/* Customer contact, chat, and sharing surfaces for the light blue theme. */
#contact-dialog,
.site-chat,
.chat-launch,
.share-dialog,
.shared-unavailable {
  color-scheme: light;
}

#contact-dialog,
.site-chat,
.share-dialog {
  --dialog-text: #0b1a3b;
  --dialog-muted: #526582;
  --dialog-blue: #1458f5;
  --dialog-blue-hover: #1047c8;
  --dialog-pale: #f2f7ff;
  --dialog-border: #dce6f5;
  color: var(--dialog-text);
  background: #fff;
  border-color: var(--dialog-border);
  box-shadow: none;
  scrollbar-color: #6f89ae var(--dialog-pale);
  scrollbar-width: thin;
}

#contact-dialog::backdrop,
.share-dialog::backdrop {
  background: #0b1a3b66;
  backdrop-filter: none;
}

#contact-dialog ::selection,
.site-chat ::selection,
.share-dialog ::selection,
.shared-unavailable::selection {
  color: #0b1a3b;
  background: #cfe0ff;
}

#contact-dialog::-webkit-scrollbar,
.site-chat ::-webkit-scrollbar,
.share-dialog::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

#contact-dialog::-webkit-scrollbar-track,
.site-chat ::-webkit-scrollbar-track,
.share-dialog::-webkit-scrollbar-track {
  background: #f2f7ff;
}

#contact-dialog::-webkit-scrollbar-thumb,
.site-chat ::-webkit-scrollbar-thumb,
.share-dialog::-webkit-scrollbar-thumb {
  border: 2px solid #f2f7ff;
  border-radius: 8px;
  background: #6f89ae;
}

#contact-dialog :focus-visible,
.site-chat :focus-visible,
.chat-launch:focus-visible,
.share-dialog :focus-visible {
  outline: 3px solid #1458f5;
  outline-offset: 3px;
}

/* Keep the contact channels in their configured order and at equal dimensions. */
#contact-dialog {
  border-radius: 16px;
}

#contact-dialog .contact-modal h2,
#contact-dialog .contact-option strong {
  color: var(--dialog-text);
}

#contact-dialog .eyebrow {
  color: var(--dialog-blue);
}

#contact-dialog .contact-intro {
  color: var(--dialog-muted);
  line-height: 1.75;
}

#contact-dialog .contact-close {
  width: 44px;
  height: 44px;
  border-color: var(--dialog-border);
  background: var(--dialog-pale);
  color: var(--dialog-text);
  cursor: pointer;
}

#contact-dialog .contact-close:hover {
  background: #e7efff;
}

#contact-dialog .contact-options {
  grid-auto-rows: 1fr;
  gap: 12px;
}

#contact-dialog .contact-option {
  grid-template-columns: 54px minmax(0, 1fr) 160px;
  min-height: 104px;
  border-color: var(--dialog-border);
  background: #fff;
}

#contact-dialog .contact-option small {
  color: var(--dialog-text);
  font-weight: 600;
}

#contact-dialog .contact-option div > span {
  color: var(--dialog-muted);
  line-height: 1.6;
}

#contact-dialog .wechat-icon {
  background: #0b9146;
  color: #fff;
}

#contact-dialog .telegram-icon {
  background: #087caf;
  color: #fff;
}

#contact-dialog .whatsapp-icon {
  background: #0b7a3d;
  color: #fff;
}

#contact-dialog .online-icon {
  background: #526582;
  color: #fff;
}

#contact-dialog .contact-action,
#contact-dialog .telegram-action,
#contact-dialog .online-action {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 160px;
  min-width: 0;
  min-height: 46px;
  border: 1px solid var(--dialog-blue);
  background: var(--dialog-blue);
  color: #fff;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
}

#contact-dialog .contact-action:hover {
  border-color: var(--dialog-blue-hover);
  background: var(--dialog-blue-hover);
  filter: none;
}

#contact-dialog .contact-hours {
  border-color: var(--dialog-border);
  background: var(--dialog-pale);
  color: var(--dialog-muted);
  line-height: 1.7;
}

#contact-dialog .contact-hours strong {
  color: var(--dialog-text);
}

/* The standby chat uses the same reading and action colors as the site. */
.site-chat {
  border-radius: 16px;
}

.site-chat .chat-head {
  border-bottom: 1px solid var(--dialog-border);
  background: #fff;
  color: var(--dialog-text);
}

.site-chat .chat-head small {
  color: var(--dialog-muted);
  font-size: 11px;
  line-height: 1.5;
}

.site-chat .chat-close {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: var(--dialog-pale);
  color: var(--dialog-text);
  cursor: pointer;
}

.site-chat .chat-close:hover {
  background: #e7efff;
}

.site-chat .chat-notice {
  border-bottom: 1px solid var(--dialog-border);
  background: var(--dialog-pale);
  color: var(--dialog-muted);
  font-size: 11px;
  line-height: 1.6;
}

.site-chat .chat-history {
  background: #fff;
  scrollbar-color: #6f89ae var(--dialog-pale);
  scrollbar-width: thin;
  overscroll-behavior: contain;
}

.site-chat .chat-welcome,
.site-chat .chat-bubble {
  border-color: var(--dialog-border);
  background: var(--dialog-pale);
  color: var(--dialog-text);
}

.site-chat .chat-bubble small {
  color: var(--dialog-muted);
  font-size: 10px;
}

.site-chat .chat-bubble.customer {
  border-color: var(--dialog-blue);
  background: var(--dialog-blue);
  color: #fff;
}

.site-chat .chat-bubble.customer small {
  color: #fff;
}

.site-chat .chat-quick {
  gap: 8px;
}

.site-chat .chat-quick button {
  min-height: 44px;
  padding: 9px 11px;
  border-color: var(--dialog-border);
  border-radius: 8px;
  background: var(--dialog-pale);
  color: var(--dialog-text);
  font-size: 12px;
  line-height: 1.5;
  cursor: pointer;
}

.site-chat .chat-quick button:hover {
  border-color: #9cb9f5;
  background: #e7efff;
}

.site-chat .chat-footer {
  border-color: var(--dialog-border);
  background: #fff;
}

.site-chat .chat-footer label {
  color: var(--dialog-muted);
  font-size: 11px;
  line-height: 1.6;
}

.site-chat .chat-compose textarea {
  border-color: #9aafcc;
  background: #fff;
  color: var(--dialog-text);
  caret-color: var(--dialog-blue);
}

.site-chat .chat-compose textarea::placeholder {
  color: var(--dialog-muted);
  opacity: 1;
}

.site-chat .chat-compose button {
  min-width: 52px;
  min-height: 44px;
  background: var(--dialog-blue);
  color: #fff;
  cursor: pointer;
}

.site-chat .chat-compose button:hover:enabled {
  background: var(--dialog-blue-hover);
}

.site-chat .chat-compose button:disabled {
  background: #dce6f5;
  color: #526582;
  opacity: 1;
  cursor: wait;
}

.site-chat .chat-state,
.site-chat .chat-footer > small {
  color: var(--dialog-muted);
}

.site-chat .chat-footer > small {
  font-size: 10px;
  line-height: 1.6;
}

.site-chat .chat-tools {
  gap: 10px;
  margin-top: 4px;
}

.site-chat .chat-tools a,
.site-chat .chat-tools button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 0;
  color: var(--dialog-blue-hover);
  font-size: 11px;
  line-height: 1.5;
  text-underline-offset: 3px;
}

.site-chat .chat-tools a:hover,
.site-chat .chat-tools button:hover {
  color: var(--dialog-text);
  text-decoration: underline;
}

.chat-launch {
  min-height: 46px;
  border-color: #1458f5;
  background: #1458f5;
  color: #fff;
  box-shadow: none;
  cursor: pointer;
}

.chat-launch:hover {
  border-color: #1047c8;
  background: #1047c8;
}

/* The preview frame is pale blue; the generated white poster is untouched. */
.share-dialog {
  border-radius: 16px;
}

.share-dialog .share-heading h2,
.share-dialog .share-product h3 {
  color: var(--dialog-text);
}

.share-dialog .share-heading p,
.share-dialog .share-product p,
.share-dialog .share-help,
.share-dialog .share-price-note {
  color: var(--dialog-muted);
}

.share-dialog .share-close {
  border-color: var(--dialog-border);
  background: var(--dialog-pale);
  color: var(--dialog-text);
}

.share-dialog .share-close:hover {
  background: #e7efff;
}

.share-dialog .share-preview {
  background: var(--dialog-pale);
}

.share-dialog .share-preview p {
  color: var(--dialog-muted);
}

.share-dialog .share-product > span {
  color: var(--dialog-blue-hover);
}

.share-dialog .share-actions button,
.share-dialog .share-actions a,
.share-dialog .share-retry {
  min-height: 46px;
  border-color: var(--dialog-border);
  background: var(--dialog-pale);
  color: var(--dialog-text);
}

.share-dialog .share-actions .share-send {
  border-color: var(--dialog-blue);
  background: var(--dialog-blue);
  color: #fff;
}

.share-dialog .share-actions .share-send:hover {
  border-color: var(--dialog-blue-hover);
  background: var(--dialog-blue-hover);
}

.share-dialog .share-actions .share-save,
.share-dialog .share-actions .share-copy,
.share-dialog .share-retry {
  border-color: #9aafcc;
  background: #fff;
  color: var(--dialog-text);
}

.share-dialog .share-actions .share-save:hover,
.share-dialog .share-actions .share-copy:hover,
.share-dialog .share-retry:hover {
  border-color: #9cb9f5;
  background: #e7efff;
}

.share-dialog .share-actions [disabled],
.share-dialog .share-actions [aria-disabled="true"] {
  border-color: var(--dialog-border);
  background: #e9eff8;
  color: var(--dialog-muted);
  opacity: 1;
}

.share-dialog .share-feedback {
  color: var(--dialog-blue-hover);
}

.share-dialog .share-link-fallback {
  min-height: 44px;
  border-color: #9aafcc;
  background: #fff;
  color: var(--dialog-text);
  caret-color: var(--dialog-blue);
}

.shared-unavailable {
  border-color: #bdd1f5;
  background: #f2f7ff;
  color: #0b1a3b;
  line-height: 1.7;
}

@media (max-width: 700px) {
  #contact-dialog {
    border-radius: 14px;
  }

  #contact-dialog .contact-close {
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
  }

  #contact-dialog .contact-modal h2 {
    margin-right: 48px;
  }

  #contact-dialog .contact-option {
    grid-template-columns: 44px minmax(0, 1fr);
    min-height: 140px;
  }

  #contact-dialog .contact-action {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 44px;
  }

  #contact-dialog .contact-option div > span,
  #contact-dialog .contact-hours {
    font-size: 12px;
  }

  .site-chat {
    max-height: calc(100dvh - 85px - env(safe-area-inset-bottom, 0px));
  }

  .site-chat .chat-compose textarea {
    font-size: 16px;
  }

  .site-chat .chat-compose textarea::placeholder {
    font-size: 14px;
  }

  .share-dialog .share-actions .share-copy {
    min-height: 44px;
    background: #fff;
  }

  .share-dialog .share-link-fallback {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #contact-dialog *,
  .site-chat *,
  .chat-launch,
  .share-dialog * {
    scroll-behavior: auto;
    transition: none;
  }
}