/* Chat assistant — branded concierge FAB + slide-up panel. Mobile-first; key stays server-side.
   Four switchable personas (Atlas default); the active persona drives --accent. */
:root{ --chat-ink:#1a2320; --chat-line:#e9e7e1; --chat-faint:#9aa39d;
  --chat-serif:'Fraunces',Georgia,'Times New Roman',serif;
  --chat-mono:'SFMono-Regular',Menlo,Consolas,monospace; }

.chat-fab{
  position:fixed; right:18px; bottom:calc(84px + env(safe-area-inset-bottom));  /* clear the bottom nav */
  width:56px; height:56px; border-radius:50%; border:0; cursor:pointer; z-index:40;
  background:linear-gradient(150deg,#0e8a7e,#0d7a70); color:#fff;
  display:grid; place-items:center; box-shadow:0 6px 20px rgba(13,122,112,.4);
  transition:transform .15s, box-shadow .15s;
}
.chat-fab:hover{ transform:translateY(-1px); box-shadow:0 8px 26px rgba(13,122,112,.5) }
.chat-fab.hidden{ display:none }

/* bell ring — a quick swing on tap of the Workout tab's "Ring your butler" button. */
@keyframes bell-ring{
  0%,100%{transform:rotate(0)}
  15%{transform:rotate(16deg)} 30%{transform:rotate(-13deg)}
  45%{transform:rotate(10deg)} 60%{transform:rotate(-7deg)}
  75%{transform:rotate(4deg)} 90%{transform:rotate(-2deg)}
}
@media (prefers-reduced-motion: reduce){ .ring-btn.ringing svg{ animation:none } }

.chat-panel{
  --accent:#0d7a70; --accent-soft:#e7f1ee;     /* default = Atlas; JS swaps per persona */
  position:fixed; inset:0; z-index:41;          /* full screen on phones */
  max-width:none; margin:0; height:100dvh;
  background:#faf8f3; border:0;
  border-radius:0; box-shadow:0 -8px 30px rgba(20,30,25,.18);
  display:flex; flex-direction:column;
  transform:translateY(105%); transition:transform .26s cubic-bezier(.2,.8,.2,1);
  padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom);
}
.chat-panel.open{ transform:translateY(0) }
.chat-panel.dragging{ transition:none }
/* grabber — the swipe-down-to-close handle (drag from here or the header) */
.chat-grab{ display:flex; justify-content:center; align-items:center; height:20px; flex:0 0 20px; cursor:grab; touch-action:none }
.chat-grab span{ width:38px; height:4px; border-radius:3px; background:color-mix(in srgb, var(--chat-faint) 55%, transparent) }
.chat-head{ touch-action:none }
.chat-panel[data-persona="atlas"]{ --accent:#0d7a70; --accent-soft:#e7f1ee }
.chat-panel[data-persona="sage"]{ --accent:#4a7c59; --accent-soft:#e8f0ea }
.chat-panel[data-persona="vita"]{ --accent:#c0674a; --accent-soft:#f6e7e1 }
.chat-panel[data-persona="lumen"]{ --accent:#2f6f9f; --accent-soft:#e4eef6 }
@media (min-width:680px){ .chat-panel{ inset:auto 18px 18px auto; width:400px; height:min(86vh,760px); border:1px solid var(--chat-line); border-radius:18px } }

/* branded header */
.chat-head{ display:flex; align-items:center; gap:12px; padding:16px 16px 13px; border-bottom:1px solid var(--chat-line) }
.chat-badge{ width:42px; height:42px; flex:0 0 42px; border-radius:50%; background:var(--accent); color:#fff;
  display:grid; place-items:center; font-size:20px; box-shadow:0 3px 10px rgba(20,30,25,.18) }
.chat-id{ min-width:0 }
.chat-name{ font-family:var(--chat-serif); font-size:20px; font-weight:600; line-height:1.05; color:var(--chat-ink) }
.chat-tag{ font-family:var(--chat-mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--chat-faint); margin-top:3px }
.chat-close{ margin-left:auto; border:0; background:transparent; font-size:24px; line-height:1; color:var(--chat-faint); cursor:pointer; padding:0 4px }

/* persistent "Asking about …" bar above the thread — always visible while a subject is pinned */
.chat-context{ display:flex; align-items:center; gap:7px; padding:8px 14px; background:var(--accent-soft);
  border-bottom:1px solid var(--chat-line); flex:0 0 auto }
.chat-context[hidden]{ display:none }
.chat-ctx-ic{ font-size:14px; line-height:1 }
.chat-ctx-lab{ font-family:var(--mono, ui-monospace), monospace; font-size:8.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent) }
.chat-ctx-t{ flex:1; min-width:0; font-size:12.5px; font-weight:600; color:var(--chat-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.chat-ctx-x{ border:0; background:none; color:var(--chat-faint); font-size:18px; line-height:1; cursor:pointer; padding:0 2px }
.chat-thread{ flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:12px; -webkit-overflow-scrolling:touch }
.msg{ max-width:88%; font-size:14.5px; line-height:1.55; white-space:pre-wrap; word-wrap:break-word }
.msg.user{ align-self:flex-end; background:var(--accent); color:#fff; padding:9px 12px; border-radius:14px 14px 4px 14px; font-size:14px }   /* user text sized to match the conversation */
.msg.bot{ align-self:stretch; max-width:100%; color:var(--chat-ink) }   /* responses use the full panel width */
.msg.greet{ align-self:flex-start; background:var(--accent-soft); color:var(--chat-ink); padding:12px 14px; border-radius:4px 14px 14px 14px; border:1px solid color-mix(in srgb, var(--accent) 22%, #fff) }
.msg.bot.streaming::after{ content:'▍'; color:var(--chat-faint); animation:blink 1s steps(2) infinite }
/* a failed send: brief reason + a Try-again button so the user never retypes */
.chat-retry,.chat-review-btn{ display:inline-flex; align-items:center; gap:6px; margin-top:7px; border:1px solid var(--accent); border-radius:16px; background:var(--accent-soft); color:var(--accent); font-size:13px; font-weight:600; padding:6px 13px; cursor:pointer }
.chat-retry:active,.chat-review-btn:active{ transform:scale(.97) }
@keyframes blink{ 50%{opacity:0} }
.chat-empty{ color:var(--chat-faint); font-size:13.5px; line-height:1.6; margin:auto 0; text-align:center; padding:0 18px }

.chat-chips{ display:flex; gap:8px; overflow-x:auto; padding:0 16px 10px; -webkit-overflow-scrolling:touch }
.chat-chips .chip{ flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; border:1px solid var(--chat-line); background:#fff; color:#5d6a64; font-size:12.5px; padding:8px 12px; border-radius:999px; cursor:pointer; white-space:nowrap }
.chat-chips .chip .ci{ display:flex; color:var(--accent) }
/* suggested quick replies read as answers: accent-tinted, no leading icon */
.chat-chips .chip.chip-reply{ background:var(--accent-soft); border-color:color-mix(in srgb, var(--accent) 30%, transparent); color:var(--accent); font-weight:600 }
.chat-chips.hidden{ display:none }

/* rendered markdown inside bot replies */
.msg.bot ul{ margin:6px 0 2px; padding-left:18px }
.msg.bot li{ margin:2px 0 }
.msg.bot strong{ font-weight:700 }
.msg.bot em{ font-style:italic }
.msg.bot code{ font-family:var(--chat-mono); font-size:12.5px; background:color-mix(in srgb, var(--accent) 10%, #fff); padding:1px 5px; border-radius:5px }

/* plan-reshape review card (rendered inline in the thread) */
.proposal{ align-self:stretch; border:1px solid var(--chat-line); border-radius:14px; background:#fff; overflow:hidden; margin:2px 0 }
.proposal .prop-head{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--chat-line) }
.proposal .prop-badge{ width:28px; height:28px; flex:0 0 28px; border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center; font-size:14px }
.proposal .prop-title{ font-family:var(--chat-serif); font-size:16px; color:var(--chat-ink) }
.proposal .prop-why{ padding:10px 14px; font-size:12.5px; line-height:1.5; color:#5d6a64; background:var(--accent-soft); border-bottom:1px solid var(--chat-line) }
.proposal .prow2{ padding:10px 14px; border-bottom:1px solid #f0eee8 }
.proposal .rt{ font-size:13px; font-weight:700; color:var(--chat-ink) }
.proposal .rd{ font-size:13px; margin-top:2px; color:var(--chat-ink) }
.proposal .rd s{ color:#b4452f; opacity:.8 } .proposal .rd b{ color:var(--accent) }
.proposal .rr{ font-size:11.5px; color:var(--chat-faint); margin-top:2px; line-height:1.45 }
.proposal .prop-actions{ display:flex; gap:8px; padding:12px 14px }
.proposal .pbtn{ flex:1; border:0; border-radius:10px; padding:11px; font-size:13.5px; font-weight:600; cursor:pointer }
.proposal .apply{ background:var(--accent); color:#fff }
.proposal .apply:disabled{ opacity:.6; cursor:default }
.proposal .discard{ background:transparent; border:1px solid var(--chat-line); color:#5d6a64 }
.proposal .prop-status{ font-size:12.5px; line-height:1.5 }
.proposal .prop-status.ok{ padding:12px 14px; background:#eaf4ee; color:#15803d; border-top:1px solid #cfe6d8 }
.proposal .prop-status.err{ padding:10px 14px; color:#b4452f }

/* dark mode (shell sets html[data-theme=dark]; the chat surface follows) */
html[data-theme="dark"] .chat-panel{ background:#1a1f22; --chat-ink:#e8eae9; --chat-line:#2c3338; --chat-faint:#7d878a }
html[data-theme="dark"] .chat-input textarea{ background:#11161a; color:#e8eae9 }
html[data-theme="dark"] .chat-chips .chip{ background:#11161a; color:#9aa39d }
html[data-theme="dark"] .persona{ background:#11161a }
/* dark bubbles so text is never light-on-light */
html[data-theme="dark"] .msg.bot{ background:#252b30; color:#e8eae9; padding:10px 13px; border-radius:14px 14px 14px 4px }
html[data-theme="dark"] .msg.greet{ background:#252b30; color:#e8eae9; border-color:#323a3f }
html[data-theme="dark"] .proposal{ background:#1e2326 }
html[data-theme="dark"] .proposal .prop-title, html[data-theme="dark"] .proposal .rt, html[data-theme="dark"] .proposal .rd{ color:#e8eae9 }
html[data-theme="dark"] .proposal .prop-why{ background:#252b30; color:#c3c9c7 }
html[data-theme="dark"] .msg.bot code{ background:color-mix(in srgb, var(--accent) 22%, #11161a) }

.chat-input{ display:flex; gap:8px; padding:11px 14px 12px; border-top:1px solid var(--chat-line); align-items:flex-end }
/* textarea auto-grows with what you type (1 line → up to ~6) so it's easy to read & edit */
.chat-input textarea{ flex:1; border:1px solid var(--chat-line); border-radius:18px; padding:10px 15px; font-size:16px; line-height:1.4; outline:none; background:#fff; resize:none; max-height:140px; overflow-y:auto; font-family:inherit }  /* 16px: stops iOS focus-zoom */
.chat-input textarea:focus{ border-color:var(--accent) }
.chat-input button{ width:42px; height:42px; flex:0 0 42px; border:0; border-radius:50%; background:var(--accent); color:#fff; font-size:18px; cursor:pointer }
.chat-input button:disabled{ background:#cfd4cf; cursor:default }
/* dictation mic — outlined (not a send-style filled button); pulses while listening */
.chat-mic{ background:#fff !important; color:var(--accent) !important; border:1px solid var(--chat-line) !important; display:grid; place-items:center }
.chat-mic[hidden]{ display:none }
.chat-mic.listening{ background:var(--accent) !important; color:#fff !important; border-color:var(--accent) !important; animation:micpulse 1.3s ease-in-out infinite }
@keyframes micpulse{ 0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 50%,transparent) } 70%{ box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 0%,transparent) } }
html[data-theme="dark"] .chat-mic{ background:#11161a !important }

/* persona switcher — thin badge-only row (names removed; hover/long-press shows the name) */
.chat-switch{ display:flex; justify-content:center; gap:10px; padding:6px 12px 12px }
.persona{ display:grid; place-items:center; padding:5px; border:1px solid var(--chat-line); border-radius:50%; background:#fff; cursor:pointer; line-height:0 }
.persona .pb{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:13px }
.persona .b-atlas{ background:#0d7a70 } .persona .b-sage{ background:#4a7c59 } .persona .b-vita{ background:#c0674a } .persona .b-lumen{ background:#2f6f9f }
.persona.active{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft) }

/* chat markdown tables */
.msg.bot .chat-tbl{border-collapse:collapse; width:100%; margin:9px 0; font-size:12.5px; display:block; overflow-x:auto}
.chat-tbl th,.chat-tbl td{border:1px solid var(--line); padding:6px 9px; text-align:left; white-space:nowrap}
.chat-tbl th{background:color-mix(in srgb, var(--teal) 9%, var(--card)); font-weight:600; color:var(--ink)}

/* chat reset (clear conversation) */
.chat-reset{ margin-left:0; border:0; background:transparent; font-size:19px; line-height:1; color:var(--chat-faint); cursor:pointer; padding:0 4px }
.chat-head .chat-close{ margin-left:4px }
/* read-aloud toggle — leads the right-hand button group; reset/close follow it */
.chat-speak{ margin-left:auto; border:0; background:transparent; line-height:1; color:var(--chat-faint); cursor:pointer; padding:0 4px; display:grid; place-items:center }
.chat-remember{ margin-left:auto; border:0; background:transparent; line-height:1; color:var(--chat-faint); cursor:pointer; padding:0 4px; display:grid; place-items:center }
.chat-remember:active{ opacity:.5 }
.chat-speak ~ .chat-remember{ margin-left:0 }   /* when both show, don't double the gap */
.chat-speak[hidden]{ display:none }
.chat-speak.on{ color:var(--accent) }
.chat-speak:not(.on) .wv{ opacity:.18 }