/* Serena Chat (chat.html, Kevin, November 3, 2026): a navy page with one big rose
   button, sized for an iPhone held in one hand. Same brand as Serena. */
:root {
  --navy: #0E172F; --navy-deep: #16203C; --navy-hover: #25314F; --on-navy: #F4F6F8; --on-navy-muted: #A9B3C4;
  --rose: #BBA49F; --blush: #F6EFED;
  --font-heading: "EB Garamond", Garamond, Georgia, serif;
  --font-ui: "Source Sans 3", Calibri, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html.auth-pending body { visibility: hidden; }
html, body { margin: 0; height: 100%; }
body { background: var(--navy); color: var(--on-navy); font-family: var(--font-ui); font-size: 17px;
  display: flex; flex-direction: column; min-height: 100dvh;
  padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.chat-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chat-boat { width: 34px; height: 34px; }
.chat-top h1 { margin: 0; font-family: var(--font-heading); font-weight: 600; font-size: 1.6rem; }
.chat-top h1 span { color: var(--rose); }
.chat-notice { margin: 0 0 0 auto; font-size: 0.85rem; color: var(--on-navy-muted); border: 1px solid var(--navy-hover); border-radius: 12px; padding: 3px 10px; }
.chat-main { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; min-height: 0; padding-top: 10px; }
.chat-note { margin: 0; min-height: 1.4em; color: var(--rose); font-weight: 600; text-align: center; }

/* The one big button: a tap here is what lets the iPhone speak and listen. */
.chat-talk { width: min(78vw, 340px); aspect-ratio: 1; border-radius: 50%; border: 0; background: var(--rose); color: var(--navy);
  font: inherit; font-size: 1.5rem; font-weight: 600; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 0 0 10px rgba(187, 164, 159, 0.18); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.chat-talk:active { transform: scale(0.98); }
.chat-talk svg { width: 64px; height: 64px; }
.chat-talk[hidden] { display: none; }

/* While running: a ring that shows listening (rose, pulsing), thinking (slate, turning), speaking (white). */
.chat-orb { display: none; width: 150px; height: 150px; border-radius: 50%; position: relative; }
body:not([data-state="idle"]) .chat-orb { display: block; }
.chat-orb span { position: absolute; inset: 0; border-radius: 50%; border: 6px solid var(--navy-hover); }
body[data-state="listening"] .chat-orb span { border-color: var(--rose); animation: chat-pulse 1.4s ease-in-out infinite; }
body[data-state="thinking"] .chat-orb span { border-color: var(--navy-hover); border-top-color: var(--on-navy-muted); animation: chat-turn 0.9s linear infinite; }
body[data-state="speaking"] .chat-orb span { border-color: var(--on-navy); animation: chat-pulse 2s ease-in-out infinite; }
@keyframes chat-pulse { 50% { transform: scale(1.08); opacity: 0.75; } }
@keyframes chat-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .chat-orb span { animation: none !important; } }

.chat-status { margin: 0; min-height: 1.4em; font-size: 1.05rem; text-align: center; color: var(--on-navy); max-width: 30em; }
.chat-end { font: inherit; font-weight: 600; height: 44px; padding: 0 28px; border-radius: 22px; border: 1px solid var(--rose); background: none; color: var(--on-navy); cursor: pointer; }
.chat-end[hidden] { display: none; }
.chat-log { width: 100%; max-width: 34em; flex: 1; min-height: 80px; overflow-y: auto; background: var(--navy-deep); border-radius: 14px; padding: 8px 12px; }
.chat-log:empty { display: none; }
.chat-line { margin: 6px 0; line-height: 1.35; }
.chat-line b { color: var(--on-navy-muted); font-weight: 600; margin-right: 4px; }
.chat-line.serena b { color: var(--rose); }
.chat-type { width: 100%; max-width: 34em; display: flex; gap: 8px; }
.chat-type[hidden] { display: none; }
.chat-type input { flex: 1; min-width: 0; height: 44px; font: inherit; font-size: 16px; border-radius: 10px; border: 1px solid var(--navy-hover); background: var(--navy-deep); color: var(--on-navy); padding: 0 12px; }
.chat-type button { font: inherit; font-weight: 600; height: 44px; padding: 0 16px; border-radius: 10px; border: 0; background: var(--rose); color: var(--navy); }
.chat-hint { margin: 0; font-size: 0.85rem; color: var(--on-navy-muted); text-align: center; }

/* The Voice menu (Kevin, November 3, 2026): Premium and Enhanced voices first. */
.chat-voice { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--on-navy-muted); }
.chat-voice[hidden] { display: none; }
.chat-voice select { font: inherit; font-size: 16px; max-width: 70vw; height: 36px; border-radius: 8px; border: 1px solid var(--navy-hover); background: var(--navy-deep); color: var(--on-navy); padding: 0 8px; }