/* ==========================================================================
   FRESH DENTAL SOLUTIONS — INTERACTION MODES
   ==========================================================================
   The nav mode switcher and the three surfaces it opens: chat, voice, MCP.
   The site has no floating chrome: the switcher lives inside the nav (the
   site's one fixed element) and a "mode surface" is a normal band of the
   page that replaces the content — never a layer floating over it.

   Depends on: tokens.css, base.css, components.css. Load this file last,
   only on pages that offer a mode switch.
   ========================================================================== */

/* ==========================================================================
   Switcher
   ==========================================================================
   <div class="mode-switch" data-mode="browse">
     <button class="mode-switch-btn" type="button" aria-haspopup="true"
       aria-expanded="false" aria-controls="mode-menu">
       <span class="mode-switch-icon" aria-hidden="true"><svg …/></span>
       <span class="mode-switch-text">Browse</span>
     </button>
     <div class="mode-menu" id="mode-menu" role="radiogroup" aria-label="Interaction mode" hidden>
       <p class="mode-menu-title">Choose how to interact</p>
       <button class="mode-option" type="button" role="radio" aria-checked="true" data-mode-option="browse">
         <span class="mode-option-icon" aria-hidden="true"><svg …/></span>
         <span class="mode-option-body">
           <span class="mode-option-label">Browse</span>
           <span class="mode-option-desc">Read the site normally.</span>
         </span>
       </button>
       <button class="mode-option" type="button" role="radio" aria-checked="false" data-mode-option="chat">…</button>
     </div>
   </div>
   JS contract: the nav's flex row grows a third child, so give it room. */

.nav-inner { gap: var(--s-4); }

.mode-switch { position: relative; flex: 0 0 auto; }

.mode-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-full);
  background: var(--bg-raised);
  color: var(--text);
  font-weight: 600;
  font-size: var(--fs-sm);
  transition: background-color var(--t) var(--ease-out), border-color var(--t) var(--ease-out), color var(--t) var(--ease-out);
}
.mode-switch-btn:hover,
.mode-switch-btn[aria-expanded="true"] { border-color: var(--brand); color: var(--brand); }

/* A mode other than Browse is live: the control reads as switched on. */
.mode-switch:not([data-mode="browse"]) .mode-switch-btn {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-contrast);
}
/* POP #4 of 4 (see --pop in tokens.css). A live indicator, not decoration:
   it appears only while chat / voice / mcp is actually running, which is
   the one moment the site is behaving unlike a normal web page. The dot is
   a flex item of the button's own inline-flex row, so it inherits the
   existing --s-2 gap and needs no positioning. */
.mode-switch:not([data-mode="browse"]) .mode-switch-btn::after {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--r-full);
  background: var(--pop);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pop) 35%, transparent);
}

/* The switcher's icon is an inline <svg> from js/icons.js (js/modes.js
   falls back to the bones emoji only if that file did not load). Sizing it
   here keeps the two paths visually interchangeable. */
/* flex:0 0 auto on both spans and flex-shrink:0 on the svg itself: each of
   these is a flex ITEM (of .mode-switch-btn and .mode-option), and without
   it the row happily crushed a 22px icon down to 8px of sliver. */
.mode-switch-icon { display: inline-flex; align-items: center; flex: 0 0 auto; }
.mode-switch-icon svg { width: 18px; height: 18px; flex-shrink: 0; }
.mode-option-icon { display: inline-flex; align-items: flex-start; flex: 0 0 auto; color: var(--brand); }
.mode-option-icon svg { width: 22px; height: 22px; flex-shrink: 0; }
.mode-option[aria-checked="true"] .mode-option-icon { color: var(--brand-hover); }

.mode-menu {
  position: absolute;
  top: calc(100% + var(--s-3));
  right: 0;
  width: min(22rem, calc(100vw - var(--s-4) * 2));
  padding: var(--s-2);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
}
.mode-menu[hidden] { display: none; }

.mode-menu-title {
  margin: var(--s-2) var(--s-3) var(--s-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}

.mode-option {
  display: flex;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-3);
  border-radius: var(--r-md);
  text-align: left;
  transition: background-color var(--t) var(--ease-out);
}
.mode-option:hover { background: var(--bg-subtle); }
.mode-option[aria-checked="true"] { background: color-mix(in srgb, var(--brand) 8%, transparent); }

.mode-option-body { display: flex; flex-direction: column; gap: var(--s-1); }
.mode-option-label { font-weight: 600; color: var(--text); }
.mode-option[aria-checked="true"] .mode-option-label::after {
  content: ' · on';
  color: var(--brand-hover);
  font-weight: 700;
}
.mode-option-desc { font-size: var(--fs-sm); color: var(--text-faint); }

/* ==========================================================================
   Surface — a mode replaces the page's main content; chrome stays put
   ==========================================================================
   body[data-fresh-mode="chat"] hides <main> and shows the matching
   #mode-surface-chat inside a <div class="mode-surface" id="…" hidden>. */

/* A mode replaces the whole page body, not just <main>. kb/index.html
   keeps its hero as a SIBLING of <main>, so a rule naming only `main` left
   that hero stranded above the chat panel (and, with the composer taking
   focus, scrolled the panel's own heading up under the nav). Hide every
   top-level page region instead, and name only what must survive: the
   chrome, the skip link, and the surface being shown. */
body[data-fresh-mode] > :not(.mode-surface, header, footer, .skip-link, script, template, style) {
  display: none;
}

/* A mode surface REPLACES <main> in the page flow, so — exactly like
   `main` in base.css — it has to clear the fixed nav itself. Without this
   the panel's own heading ("Talk to Fresh Dental Solutions") rendered
   underneath the bar and was sliced in half. */
.mode-surface { padding-top: var(--nav-h); }
.mode-surface[hidden] { display: none; }

.mode-panel {
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding: var(--s-12) var(--gutter) var(--s-16);
}
.mode-mcp { max-width: 54rem; }

.mode-head { margin-bottom: var(--s-8); }
.mode-head p { max-width: 60ch; }

.mode-loading { text-align: center; color: var(--text-faint); padding-block: var(--s-16); }

.mode-footnote {
  margin-top: var(--s-8);
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

/* ==========================================================================
   Shared reply parts
   ==========================================================================
   <p class="mode-answer">…</p>
   <p class="mode-note">Educational information, not a diagnosis.</p>
   <div class="mode-actions">
     <a class="btn btn-primary btn-md" href="/contact.html">Book a visit</a>
     <a class="btn btn-danger btn-md" href="tel:+15035551234">Call now — emergency</a>
   </div>
   <div class="mode-articles">
     <article class="card card-kb">…</article>
   </div>
   <div class="mode-chips">
     <button class="chip" type="button">Do you take my insurance?</button>
   </div> */

.mode-answer { color: var(--text); }

.mode-note {
  padding-left: var(--s-3);
  border-left: 3px solid var(--mint);
  font-size: var(--fs-sm);
  color: var(--text-faint);
}

.mode-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block: var(--s-5); }

.mode-articles { display: grid; gap: var(--s-3); margin-block: var(--s-5); }
.mode-articles .card-kb { padding: var(--s-4); }

.mode-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }

.chip {
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-full);
  background: var(--bg-raised);
  color: var(--brand);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: background-color var(--t) var(--ease-out), border-color var(--t) var(--ease-out);
}
.chip:hover { background: color-mix(in srgb, var(--brand) 8%, transparent); border-color: var(--brand); }

/* ==========================================================================
   Chat
   ==========================================================================
   <div class="mode-chat">
     <div class="mode-chat-log" role="log" aria-live="polite">
       <div class="mode-msg is-visitor"><p>When can I get in this week?</p></div>
       <div class="mode-msg is-fresh"><p>We have an opening Thursday at 2pm.</p></div>
     </div>
     <form class="mode-chat-composer">
       <label class="visually-hidden" for="chat-input">Message</label>
       <input class="input" id="chat-input" type="text" placeholder="Ask a question…" />
       <button class="btn btn-primary" type="submit">Send</button>
     </form>
   </div>
   Fixed height (not min-height): the log scrolls inside the panel so the
   composer stays put as the conversation grows. */

.mode-chat {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 6rem);
  min-height: 28rem;
}

.mode-chat-log {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding-block: var(--s-2) var(--s-4);
}

.mode-msg {
  max-width: 40rem;
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-lg);
  animation: modeMsgIn var(--t-slow) var(--ease-out) both;
}
.mode-msg.is-visitor {
  align-self: flex-end;
  background: var(--brand);
  color: var(--brand-contrast);
  border-bottom-right-radius: var(--r-sm);
}
.mode-msg.is-visitor p { color: inherit; }
.mode-msg.is-fresh {
  align-self: flex-start;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-bottom-left-radius: var(--r-sm);
}

@keyframes modeMsgIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.mode-chat-composer {
  display: flex;
  gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
}
.mode-chat-composer .input { flex: 1 1 auto; }

/* ==========================================================================
   Voice
   ==========================================================================
   <div class="mode-voice-stage">
     <div class="mode-voice-orb" data-state="idle" aria-hidden="true"><svg …/></div>
     <p class="mode-voice-status" role="status">Tap to talk</p>
     <p class="mode-voice-transcript"></p>
     <button class="btn btn-primary btn-lg mode-voice-toggle" type="button">Start talking</button>
     <p class="mode-voice-hints">Try: "Do you see kids?"</p>
     <div class="mode-voice-answer" hidden>…</div>
   </div> */

.mode-voice-orb svg { width: 48px; height: 48px; }

.mode-voice-stage { text-align: center; padding-block: var(--s-6) var(--s-2); }

.mode-voice-orb {
  width: 7.5rem;
  height: 7.5rem;
  margin-inline: auto;
  margin-bottom: var(--s-6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-2xl); /* only reached by the emoji fallback path */
  color: var(--brand-contrast);
  border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--brand), var(--cyan));
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--t) var(--ease-out), filter var(--t) var(--ease-out);
}
.mode-voice-orb[data-state="listening"] { animation: modeOrbPulse 1.8s var(--ease-in-out) infinite; }
.mode-voice-orb[data-state="speaking"] { background: linear-gradient(135deg, var(--cyan), var(--mint)); }
.mode-voice-orb[data-state="idle"] { filter: grayscale(0.5); }

@keyframes modeOrbPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cyan) 45%, transparent); }
  50% { box-shadow: 0 0 0 22px color-mix(in srgb, var(--cyan) 0%, transparent); }
}

.mode-voice-status { font-weight: 600; color: var(--text); margin-bottom: var(--s-2); }

.mode-voice-transcript {
  min-height: 1.6em;
  font-size: var(--fs-lg);
  color: var(--brand);
  margin-bottom: var(--s-5);
}

.mode-voice-hints { font-size: var(--fs-sm); color: var(--text-faint); margin-top: var(--s-5); }

.mode-voice-answer {
  margin-top: var(--s-8);
  padding: var(--s-5) var(--s-6);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  text-align: left;
}
.mode-voice-answer[hidden] { display: none; }

/* ==========================================================================
   MCP
   ==========================================================================
   <div class="mode-card card">
     <h2>fresh_find_slot <span class="mode-card-badge is-live">Live</span></h2>
     <p class="mode-sub">Request</p>
     <pre><code>{ "service": "cleaning" }</code></pre>
     <div class="mode-tools">
       <span class="mode-tool">fresh_find_slot</span>
       <span class="mode-tool">fresh_book</span>
     </div>
     <button class="mode-copy btn btn-secondary btn-sm" type="button">Copy config</button>
   </div> */

.mode-card h2 {
  font-size: var(--fs-xl);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.mode-card-badge {
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-full);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  color: var(--text-faint);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.mode-card-badge.is-live { background: var(--ok-bg); border-color: transparent; color: var(--ok); }

.mode-sub { font-weight: 600; color: var(--text); margin: var(--s-4) 0 var(--s-2); font-size: var(--fs-sm); }

.mode-card pre {
  overflow-x: auto;
  padding: var(--s-4) var(--s-5);
  background: var(--ink-900);
  color: var(--ink-50);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.mode-card pre code { font-family: var(--font-mono); background: none; }
.mode-card p code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 0.15em 0.4em;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}

.mode-tools { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }

.mode-tool {
  padding: var(--s-1) var(--s-3);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  color: var(--text);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 48rem) {
  .mode-switch-text { display: none; }
  .mode-switch-btn { padding: var(--s-2) var(--s-3); }
  .mode-menu { width: min(20rem, calc(100vw - var(--s-3) * 2)); }
  .mode-panel { padding: var(--s-8) var(--gutter) var(--s-12); }
  .mode-msg { max-width: 100%; }
  .mode-chat { height: calc(100vh - 5.5rem); min-height: 22rem; }
  .mode-actions .btn { width: auto; }
}