/* Talk screen: the demo chat panel behind every "Talk to Kokoro" button.
   Loaded after home.css. Tokens only; no new colors. js/chat.js opens the
   <dialog id="chat">, so without the script the page just stays as it is. */

/* On phones and narrow windows (under 880px, same as the header's Menu button):
   a side sheet on the right, about 80% of the screen wide. The strip of page
   left showing says "you can tap here to go back". */
.k-chat {
  box-sizing: border-box; position: fixed; inset: 0 0 0 auto; width: 80vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  font-family: var(--font-sans); color: var(--ink); background: var(--surface);
  border: 0; border-left: var(--border-hairline) solid var(--hairline); border-radius: 0; box-shadow: var(--shadow-float);
}
.k-chat:not([open]) { display: none; }
.k-chat::backdrop { background: rgba(31, 29, 26, 0.4); }

.k-chat__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3); border-bottom: var(--border-hairline) solid var(--hairline);
}
.k-chat__title { margin: 0; font-family: var(--font-display); font-size: var(--text-h3); line-height: 1.3; font-weight: 500; }
.k-chat__phone { margin: var(--space-1) 0 0; font-size: var(--text-small); line-height: 1.45; color: var(--ink-2); }
.k-chat__phone .k-link { font-weight: 700; }
.k-chat__close {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap-target); height: var(--tap-target); margin: calc(var(--space-2) * -1) calc(var(--space-2) * -1) 0 0; padding: 0;
  color: var(--ink); background: transparent; border: 0; border-radius: var(--radius-circle); cursor: pointer;
}
.k-chat__close:hover { color: var(--brand); }
.k-chat__close:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* js/chat.js hides parts with the hidden attribute; this wins over display: flex below. */
.k-chat [hidden] { display: none; }

/* Contact card, shown instead of the chat when the chat switch is off. */
.k-chat__contact { padding: var(--space-4); font-size: var(--text-body); line-height: 1.5; font-weight: 500; }
.k-chat__contact p { margin: 0 0 var(--space-3); }
.k-chat__contact p:last-child { margin-bottom: 0; }
.k-chat__contact .k-link { font-weight: 700; }

.k-chat__log {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4);
}
.k-chat__msg {
  max-width: 85%; margin: 0; padding: var(--space-3) var(--space-4);
  font-size: var(--text-body); line-height: 1.5; font-weight: 500; white-space: pre-wrap; overflow-wrap: anywhere;
  border-radius: var(--radius-md);
}
.k-chat__msg--kokoro { align-self: flex-start; background: var(--surface-tint); border-bottom-left-radius: var(--radius-xs); }
.k-chat__msg--you { align-self: flex-end; background: var(--surface-highlight); border-bottom-right-radius: var(--radius-xs); }
.k-chat__msg--error { background: var(--error-tint); color: var(--ink); }

/* Three dots while Kokoro is typing. Still when the visitor asked for reduced motion. */
.k-chat__msg--typing { display: inline-flex; gap: 6px; align-items: center; min-height: 1.5em; }
.k-chat__msg--typing i { width: 8px; height: 8px; border-radius: var(--radius-circle); background: var(--ink-3); animation: k-chat-dot 1s infinite var(--ease-out); }
.k-chat__msg--typing i:nth-child(2) { animation-delay: 0.15s; }
.k-chat__msg--typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes k-chat-dot { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .k-chat__msg--typing i { animation: none; opacity: 0.6; } }

.k-chat__form {
  display: flex; gap: var(--space-2); align-items: stretch;
  padding: var(--space-3) var(--space-4) 0; border-top: var(--border-hairline) solid var(--hairline);
}
.k-chat__form .k-input { flex: 1; min-width: 0; }
.k-chat__form .k-btn { flex: none; min-height: 52px; }
.k-chat__label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.k-chat__note {
  margin: 0; padding: var(--space-2) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  font-size: var(--text-small); line-height: 1.45; color: var(--ink-3);
}

/* From 880px (where the header shows its full nav instead of the Menu button):
   a panel in the bottom-right corner, about half the screen wide. */
@media (min-width: 880px) {
  .k-chat {
    position: fixed; inset: auto var(--space-6) var(--space-6) auto; width: 50vw; height: min(720px, calc(100dvh - var(--space-12)));
    border: var(--border-hairline) solid var(--hairline); border-radius: var(--radius-md);
  }
  .k-chat__head { padding: var(--space-6) var(--space-6) var(--space-4); }
  .k-chat__log, .k-chat__form, .k-chat__note, .k-chat__contact { padding-left: var(--space-6); padding-right: var(--space-6); }
  .k-chat__note { padding-bottom: var(--space-4); }
}