/* Demo-site styles.
   - The banner (#wv-banner) and chat overlay (#wv-chat) are ours on every page, the site
     sections list (#wv-sections) on a mirrored homepage that needs it. Their rules
     sit behind ID selectors that first revert every page style reaching them, so a mirrored
     prospect page cannot restyle them, and they never select anything of the page's.
   - On a mirrored page, the mirror's YouTube frames (iframe[data-wv-video]) and the sliders
     slider.js rotates ([data-wv-slider]) get zero-specificity rules, so the page's own
     rules for those elements still win.
   - Everything else styles our own pages (the chat-only assistant and "what AI sees") and
     applies only under html.wv-own, so it never touches a mirrored page. */
:root {
  --wv-bg: #ffffff;
  --wv-surface: #f6f6f3;
  --wv-text: #1d1d1f;
  --wv-muted: #5d6066;
  --wv-border: #e2e2dd;
  --wv-accent: #1f4f7a;
  --wv-accent-text: #ffffff;
  --wv-banner-bg: #1d1d1f;
  --wv-banner-text: #f3f3f0;
  --wv-banner-height: 34px; /* the banner's height on narrow windows */
  --wv-user-bubble: #1f4f7a;
  --wv-bot-bubble: #f0f0ec;
  --wv-shadow: 0 18px 48px rgba(20, 20, 30, 0.18), 0 2px 6px rgba(20, 20, 30, 0.08);
  --wv-radius: 14px;
  --wv-content-width: 760px;
  --wv-chat-width: 380px;
  --wv-tab-width: 40px;
  --wv-tab-home-width: 46px;
  --wv-gap: 24px;
  --wv-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Noto Sans TC", "Noto Sans JP", sans-serif;
  --wv-hygiene-bg: #fffbeb;
  --wv-hygiene-border: #d97706;
  --wv-hygiene-title: #92400e;
  --wv-hygiene-text: #451a03;
}

@media (prefers-color-scheme: dark) {
  :root {
    --wv-bg: #141416;
    --wv-surface: #1d1d20;
    --wv-text: #ececea;
    --wv-muted: #a3a5aa;
    --wv-border: #2f2f33;
    --wv-accent: #7db3e6;
    --wv-accent-text: #0f1a24;
    --wv-banner-bg: #2a2a2e;
    --wv-banner-text: #f3f3f0;
    --wv-user-bubble: #2d5f8c;
    --wv-bot-bubble: #26262a;
    --wv-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
    --wv-hygiene-bg: #2a1e0a;
    --wv-hygiene-border: #d99a3d;
    --wv-hygiene-title: #f3b656;
    --wv-hygiene-text: #f6d9a8;
  }
}

/* Demo banner: a compact bar fixed at the bottom left of the window, beside the chat. At the
   bottom it covers no fixed header or promo bar of the prospect's page. */
#wv-banner, #wv-banner * { all: revert; box-sizing: border-box; }
#wv-banner {
  position: fixed;
  left: var(--wv-gap);
  bottom: var(--wv-gap);
  z-index: 2147483000;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  max-width: min(640px, calc(100vw - var(--wv-chat-width) - 3 * var(--wv-gap)));
  margin: 0;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--wv-banner-bg);
  color: var(--wv-banner-text);
  box-shadow: var(--wv-shadow);
  font: 12.5px/1.4 var(--wv-font);
  text-align: left;
}
#wv-banner p { flex: 1 1 260px; min-width: 0; margin: 0; }
#wv-banner a { flex: none; color: inherit; font-weight: 600; white-space: nowrap; text-decoration: underline; text-underline-offset: 2px; }

#wv-banner a.wv-assistant-link {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--wv-accent);
  color: var(--wv-accent-text);
  text-decoration: none;
}
#wv-banner button.wv-report-open {
  flex: none;
  margin: 0;
  padding: 4px 10px;
  border: 0;
  border-radius: 999px;
  background: var(--wv-banner-text);
  color: var(--wv-banner-bg);
  font: 600 12px/1.2 var(--wv-font);
  cursor: pointer;
}

/* Side tab to the chat-only page: fixed on the right edge, vertically centred, on every page
   but that one (render.ts emits it right after the banner). Larger on the homepage, with one
   short nudge when motion is welcome. The open chat panel moves left of it (below). */
#wv-assistant-tab { all: revert; box-sizing: border-box; }
#wv-assistant-tab {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 2147482500;
  height: max-content;
  width: var(--wv-tab-width);
  margin: auto 0;
  padding: 18px 0;
  writing-mode: vertical-rl;
  rotate: 180deg;
  border: 2px solid var(--wv-accent-text);
  border-left: 0;
  border-radius: 0 10px 10px 0;
  background: var(--wv-accent);
  color: var(--wv-accent-text);
  box-shadow: var(--wv-shadow);
  font: 700 14px/1 var(--wv-font);
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
/* Chinese and Japanese read top to bottom with upright characters. */
body:is([data-lang^="zh"], [data-lang^="ja"]) #wv-assistant-tab { rotate: none; border-radius: 10px 0 0 10px; border-left: 2px solid var(--wv-accent-text); border-right: 0; }
#wv-assistant-tab.wv-tab--home { width: var(--wv-tab-home-width); padding: 22px 0; font-size: 16px; }
#wv-assistant-tab:hover { background: var(--wv-text); color: var(--wv-bg); }
#wv-assistant-tab:focus-visible { outline: 3px solid var(--wv-accent); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  #wv-assistant-tab.wv-tab--home { animation: wv-tab-nudge 1.4s ease-in-out 1s 1 both; }
}
@keyframes wv-tab-nudge {
  0%, 100% { translate: 0 0; box-shadow: var(--wv-shadow); }
  20%, 60% { translate: -10px 0; box-shadow: var(--wv-shadow), 0 0 0 6px color-mix(in srgb, var(--wv-accent) 35%, transparent); }
  40%, 80% { translate: 0 0; }
}

/* A mirrored YouTube embed: a 16:9 frame at the width of its box. */
:where(iframe[data-wv-video]) { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }

/* A mirrored slider (slider.js): the slide it switches to fades in, unless reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  :where([data-wv-slider][data-wv-rotated] [data-wv-slide]:not(.wv-slide-hidden)) { animation: wv-slide-in 0.6s ease both; }
}
@keyframes wv-slide-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Before/after report: a modal over a dimmed page (report.js). */
#wv-report, #wv-report * { all: revert; box-sizing: border-box; }
#wv-report {
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(10, 10, 15, 0.55);
  color-scheme: light dark;
  font: 15px/1.5 var(--wv-font);
  text-align: left;
}
#wv-report[hidden] { display: none; }
#wv-report .wv-report-dialog {
  width: min(640px, 100%);
  max-height: min(88vh, 900px);
  overflow-y: auto;
  padding: 20px 24px 24px;
  background: var(--wv-bg);
  color: var(--wv-text);
  border-radius: var(--wv-radius);
  box-shadow: var(--wv-shadow);
}
#wv-report .wv-report-dialog:focus { outline: none; }
#wv-report .wv-report-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
#wv-report .wv-report-title { margin: 0; font-size: 21px; line-height: 1.3; font-weight: 700; }
#wv-report .wv-report-close { border: 0; background: transparent; color: var(--wv-muted); font: 24px/1 var(--wv-font); padding: 2px 6px; border-radius: 8px; cursor: pointer; }
#wv-report .wv-report-lead { margin: 6px 0 12px; color: var(--wv-muted); }
#wv-report .wv-report-section { margin: 0; padding: 14px 0; border-top: 1px solid var(--wv-border); }
#wv-report h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
#wv-report p { margin: 0 0 8px; }
#wv-report .wv-report-muted { color: var(--wv-muted); font-size: 14px; }
#wv-report .wv-report-list, #wv-report .wv-report-links { margin: 0 0 8px; padding-left: 20px; }
#wv-report .wv-report-list li { margin: 3px 0; }
#wv-report .wv-report-list--pending { color: var(--wv-muted); }
#wv-report .wv-report-ratio { font-weight: 600; }
#wv-report .wv-hygiene {
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 2px solid var(--wv-hygiene-border);
  border-radius: 8px;
  background: var(--wv-hygiene-bg);
  color: var(--wv-hygiene-text);
}
#wv-report .wv-hygiene-title { margin: 0 0 6px; color: var(--wv-hygiene-title); }
#wv-report .wv-hygiene-note { font-weight: 600; }
#wv-report a { color: var(--wv-accent); text-underline-offset: 2px; }
#wv-report .wv-report-chips, #wv-report .wv-report-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
#wv-report .wv-report-chip, #wv-report .wv-report-secondary {
  border: 1px solid var(--wv-border);
  background: var(--wv-bg);
  color: var(--wv-text);
  border-radius: 999px;
  padding: 6px 12px;
  font: 13.5px/1.35 var(--wv-font);
  text-align: left;
  cursor: pointer;
}
#wv-report a.wv-report-primary {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--wv-accent);
  color: var(--wv-accent-text);
  font-weight: 600;
  text-decoration: none;
}
#wv-report :focus-visible { outline: 2px solid var(--wv-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  #wv-report:not([hidden]) { animation: wv-report-fade 0.18s ease-out; }
}
@keyframes wv-report-fade { from { opacity: 0; } to { opacity: 1; } }

/* Site sections: on a mirrored homepage that does not link every key page itself, our list of
   the missing ones (mirror.ts), a plain strip at the end of the page above the bottom spacer. */
#wv-sections, #wv-sections * { all: revert; box-sizing: border-box; }
#wv-sections {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  clear: both;
  margin: 0;
  padding: 14px var(--wv-gap) calc(14px + 3 * var(--wv-gap));
  border-top: 1px solid var(--wv-border);
  background: var(--wv-surface);
  color: var(--wv-text);
  font: 14px/1.5 var(--wv-font);
  text-align: left;
}
#wv-sections p { margin: 0; color: var(--wv-muted); font-weight: 600; }
#wv-sections ul { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; }
#wv-sections a { color: var(--wv-accent); text-decoration: underline; text-underline-offset: 2px; }
#wv-sections a:focus-visible { outline: 3px solid var(--wv-accent); outline-offset: 2px; }

#wv-bottom-spacer { all: revert; display: none; }

/* Narrow windows: the banner spans the bottom edge and the chat sits just above it. */
@media (max-width: 767px) {
  #wv-banner { left: 0; right: 0; bottom: 0; flex-wrap: nowrap; height: var(--wv-banner-height); max-width: none; border-radius: 0; padding: 0 12px; align-items: center; }
  #wv-banner p { flex: 1 1 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  #wv-bottom-spacer { display: block; height: calc(var(--wv-banner-height) + 8px); margin: 0; padding: 0; }
  #wv-sections { padding: 12px 16px; }
}

/* Our own pages (html.wv-own): never a stand-in for a prospect's page. */
.wv-own { color-scheme: light dark; -webkit-text-size-adjust: 100%; }
.wv-own *, .wv-own *::before, .wv-own *::after { box-sizing: border-box; }

.wv-own body {
  margin: 0;
  background: var(--wv-bg);
  color: var(--wv-text);
  font-family: var(--wv-font);
  font-size: 17px;
  line-height: 1.65;
}

.wv-own a { color: var(--wv-accent); text-underline-offset: 2px; }
.wv-own a:hover { text-decoration-thickness: 2px; }
.wv-own :focus-visible { outline: 2px solid var(--wv-accent); outline-offset: 2px; }

.wv-own .wrap {
  width: 100%;
  max-width: var(--wv-content-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* Leave room for the floating chat panel on wide screens. */
@media (min-width: 1180px) {
  .wv-own .wrap {
    margin-left: max(32px, calc((100vw - var(--wv-content-width) - var(--wv-chat-width) - 3 * var(--wv-gap)) / 2));
  }
}

.wv-own .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--wv-text);
  font-weight: 700;
  font-size: 19px;
  text-decoration: none;
}
.wv-own .brand img { max-height: 36px; width: auto; }
/* A light logo on the assistant page sits on a chip; /assets/brand.css sets its colour. */
.wv-own .brand .wv-logo-chip { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 8px; }

.wv-own main.wrap { padding-top: 32px; padding-bottom: 48px; }
.wv-own main h1 { font-size: clamp(28px, 4vw, 38px); line-height: 1.2; margin: 0 0 20px; letter-spacing: -0.01em; }
.wv-own main h2 { font-size: 24px; line-height: 1.3; margin: 40px 0 12px; }
.wv-own main p { margin: 0 0 16px; }
.wv-own main img { display: block; max-width: 100%; height: auto; margin: 24px 0; border-radius: 10px; }

/* "What AI sees" page: the original's and the copy's crawler-visible text side by side. */
.wv-own main.wv-ai { max-width: 1100px; padding-bottom: 140px; }
.wv-own .wv-ai-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin: 24px 0; }
.wv-own .wv-ai-columns section { padding: 16px 20px; background: var(--wv-surface); border-radius: var(--wv-radius); min-width: 0; }
.wv-own .wv-ai-columns h2 { margin-top: 0; font-size: 18px; }
.wv-own .wv-ai-ratio { font-weight: 600; }
.wv-own .wv-ai-text { white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; max-height: 480px; overflow-y: auto; margin: 0; }

@media (max-width: 767px) {
  .wv-own body { font-size: 16px; }
}

/* Chat overlay. */
#wv-chat, #wv-chat * { all: revert; box-sizing: border-box; }
#wv-chat {
  position: fixed;
  right: var(--wv-gap);
  bottom: var(--wv-gap);
  z-index: 2147482000;
  color-scheme: light dark;
  color: var(--wv-text);
  font: 15px/1.5 var(--wv-font);
  text-align: left;
}
#wv-chat a { color: var(--wv-accent); text-underline-offset: 2px; }
/* Pages with the side tab: the pill and panel sit left of it, so they never overlap. */
@media (min-width: 768px) {
  #wv-assistant-tab ~ #wv-chat { right: calc(var(--wv-gap) + var(--wv-tab-home-width)); }
}

#wv-chat .wv-chat-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  padding: 12px 20px;
  background: var(--wv-accent);
  color: var(--wv-accent-text);
  font: 600 15px/1 var(--wv-font);
  box-shadow: var(--wv-shadow);
  cursor: pointer;
}
#wv-chat .wv-chat-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: 0.8; }
#wv-chat.wv-chat--open .wv-chat-pill { display: none; }

#wv-chat .wv-chat-panel {
  display: none;
  flex-direction: column;
  width: var(--wv-chat-width);
  height: min(640px, calc(100vh - 2 * var(--wv-gap) - 40px - var(--wv-banner-height)));
  background: var(--wv-bg);
  border: 1px solid var(--wv-border);
  border-radius: var(--wv-radius);
  box-shadow: var(--wv-shadow);
  overflow: hidden;
}
#wv-chat.wv-chat--open .wv-chat-panel { display: flex; }

#wv-chat .wv-chat-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--wv-border);
}
#wv-chat .wv-chat-head-text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
#wv-chat .wv-chat-head-text strong { font-size: 16px; font-weight: 700; }
#wv-chat .wv-chat-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 6px; }
#wv-chat .wv-chat-reset { border: 1px solid var(--wv-border); background: transparent; color: var(--wv-muted); border-radius: 999px; padding: 3px 9px; font: 12px/1.3 var(--wv-font); cursor: pointer; }
#wv-chat .wv-chat-full { font-size: 12px; white-space: nowrap; }
#wv-chat .wv-chat-privacy { margin: 0; padding: 0 16px 10px; color: var(--wv-muted); font-size: 11.5px; line-height: 1.4; }
#wv-chat .wv-chat-note { color: var(--wv-muted); font-size: 12.5px; line-height: 1.4; }
#wv-chat .wv-chat-close {
  border: 0;
  background: transparent;
  color: var(--wv-muted);
  font: 24px/1 var(--wv-font);
  padding: 2px 6px;
  border-radius: 8px;
  cursor: pointer;
}
#wv-chat .wv-chat-close:hover { background: var(--wv-surface); color: var(--wv-text); }

#wv-chat .wv-chat-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }

#wv-chat .wv-chat-msg { max-width: 88%; padding: 10px 14px; border-radius: 14px; }
#wv-chat .wv-chat-msg--user { align-self: flex-end; background: var(--wv-user-bubble); color: #ffffff; border-bottom-right-radius: 4px; }
#wv-chat .wv-chat-msg--assistant { align-self: flex-start; background: var(--wv-bot-bubble); border-bottom-left-radius: 4px; }
#wv-chat .wv-chat-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

#wv-chat .wv-chat-sources, #wv-chat .wv-chat-contacts { margin-top: 8px; font-size: 13.5px; }
#wv-chat .wv-chat-sources-label { display: block; color: var(--wv-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
#wv-chat .wv-chat-sources ul, #wv-chat .wv-chat-contacts { list-style: none; margin: 4px 0 0; padding: 0; }
#wv-chat .wv-chat-sources li, #wv-chat .wv-chat-contacts li { margin: 2px 0; }

/* Artifact cards under an answer in the overlay (the chat-only page shows them in its stage). */
#wv-chat .wv-cards { display: grid; gap: 8px; margin-top: 10px; }
#wv-chat .wv-card { border: 1px solid var(--wv-border); border-radius: 10px; padding: 10px 12px; background: var(--wv-bg); color: var(--wv-text); font-size: 13.5px; overflow: hidden; }
#wv-chat .wv-card .wv-card-title { display: block; margin-bottom: 4px; font-weight: 600; }
#wv-chat .wv-card .wv-card-text { margin: 0; color: var(--wv-muted); }
#wv-chat .wv-card .wv-card-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin: 0 0 8px; border-radius: 6px; background: var(--wv-surface); }
#wv-chat .wv-card .wv-card-list { margin: 0; padding-left: 18px; }
#wv-chat .wv-card .wv-card-table { overflow-x: auto; }
#wv-chat .wv-card table { border-collapse: collapse; font-size: 12.5px; }
#wv-chat .wv-card td { border: 1px solid var(--wv-border); padding: 4px 6px; vertical-align: top; }
#wv-chat .wv-card .wv-card-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 6px; }
#wv-chat .wv-card .wv-card-gallery .wv-card-img { margin: 0; }
#wv-chat .wv-card a { color: var(--wv-accent); text-underline-offset: 2px; }

#wv-chat .wv-chat-typing { display: inline-flex; gap: 5px; padding: 14px 16px; }
#wv-chat .wv-chat-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--wv-muted); animation: wv-chat-bounce 1.2s infinite ease-in-out; }
#wv-chat .wv-chat-dot:nth-child(2) { animation-delay: 0.15s; }
#wv-chat .wv-chat-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes wv-chat-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { #wv-chat .wv-chat-dot { animation: none; } }

#wv-chat .wv-chat-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px; }
#wv-chat .wv-chat-chips[hidden] { display: none; }
#wv-chat .wv-chat-chip {
  border: 1px solid var(--wv-border);
  background: var(--wv-bg);
  color: var(--wv-text);
  border-radius: 999px;
  padding: 6px 12px;
  font: 13.5px/1.35 var(--wv-font);
  text-align: left;
  cursor: pointer;
}
#wv-chat .wv-chat-chip:hover { border-color: var(--wv-accent); color: var(--wv-accent); }

#wv-chat .wv-chat-form { display: flex; gap: 8px; margin: 0; padding: 12px 16px; border-top: 1px solid var(--wv-border); }
#wv-chat .wv-chat-input {
  flex: 1;
  resize: none;
  min-height: 42px;
  max-height: 120px;
  margin: 0;
  border: 1px solid var(--wv-border);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--wv-bg);
  color: var(--wv-text);
  font: 15px/1.4 var(--wv-font);
}
#wv-chat .wv-chat-send {
  border: 0;
  border-radius: 10px;
  padding: 0 16px;
  background: var(--wv-accent);
  color: var(--wv-accent-text);
  font: 600 14px var(--wv-font);
  cursor: pointer;
}
#wv-chat .wv-chat-send:disabled { opacity: 0.5; cursor: default; }

/* Chat-only page, laid out like SPATIAL: the artifacts stage fills the left, the chat is a
   full-height 420 px panel on the right; below 1180 px the panel narrows, below 900 px the
   two stack (stage on top, at most 45 % of the height, cards scrolling sideways). */
.wv-own.wv-assistant-page, .wv-own.wv-assistant-page body { height: 100%; }
.wv-own.wv-assistant-page body { overflow: hidden; background: var(--wv-surface); }
.wv-own main.wv-assistant {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 24px;
  height: 100vh;
  height: 100dvh;
  padding: 24px;
}
.wv-own #wv-assistant-stage {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--wv-bg);
  border: 1px solid var(--wv-border);
  border-radius: var(--wv-radius);
  box-shadow: 0 22px 42px rgba(20, 20, 30, 0.08);
}
.wv-own .wv-stage-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; padding: 16px 24px; border-bottom: 1px solid var(--wv-border); }
.wv-own .wv-stage-head h1 { margin: 0; font-size: 15px; font-weight: 600; color: var(--wv-muted); letter-spacing: 0.02em; }
.wv-own .wv-stage-head .wv-back-link {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--wv-border);
  background: var(--wv-surface);
  color: var(--wv-text);
  border-radius: 999px;
  padding: 7px 14px;
  font: 600 13.5px/1.3 var(--wv-font);
  text-decoration: none;
  white-space: nowrap;
}
.wv-own .wv-stage-head .wv-back-link:hover { border-color: var(--wv-accent); color: var(--wv-accent); }
.wv-own .wv-stage-head .wv-back-link:focus-visible { outline: 3px solid var(--wv-accent); outline-offset: 2px; }
.wv-own .wv-stage-body { flex: 1; min-height: 0; overflow-y: auto; padding: 24px; }
.wv-own .wv-stage-body h2 { margin: 24px 0 12px; font-size: 16px; }
.wv-own .wv-intro-summary { margin: 0 0 8px; font-size: clamp(19px, 2vw, 24px); line-height: 1.4; font-weight: 600; max-width: 60ch; }
.wv-own .wv-intro-lead { margin: 0; color: var(--wv-muted); max-width: 70ch; }
.wv-own .wv-intro-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wv-own .wv-intro-chip {
  border: 1px solid var(--wv-border);
  background: var(--wv-surface);
  color: var(--wv-text);
  border-radius: 999px;
  padding: 8px 14px;
  font: 14px/1.35 var(--wv-font);
  text-align: left;
  cursor: pointer;
}
.wv-own .wv-intro-chip:hover { border-color: var(--wv-accent); color: var(--wv-accent); }
.wv-own #wv-assistant-cards[hidden], .wv-own #wv-assistant-intro[hidden] { display: none; }
.wv-own #wv-assistant-cards .wv-cards-title { margin: 0 0 4px; font-size: 18px; }
.wv-own #wv-assistant-cards .wv-cards-question { margin: 0 0 16px; color: var(--wv-muted); }
.wv-own #wv-assistant-stage .wv-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.wv-own #wv-assistant-stage .wv-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--wv-border); border-radius: 12px; padding: 14px 16px; background: var(--wv-bg); color: var(--wv-text); font-size: 14.5px; overflow: hidden; }
.wv-own #wv-assistant-stage .wv-card--page { padding-top: 0; }
.wv-own #wv-assistant-stage .wv-card--page .wv-card-img { margin: 0 -16px 12px; width: calc(100% + 32px); max-width: none; border-radius: 0; }
.wv-own #wv-assistant-stage .wv-card-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin: 0 0 10px; border-radius: 8px; background: var(--wv-surface); }
.wv-own #wv-assistant-stage .wv-card-title { display: block; margin: 0 0 6px; font-size: 16px; line-height: 1.35; }
.wv-own #wv-assistant-stage .wv-card-title a { color: var(--wv-text); text-decoration: none; }
.wv-own #wv-assistant-stage .wv-card-title a:hover { color: var(--wv-accent); }
.wv-own #wv-assistant-stage .wv-card-text { flex: 1; margin: 0 0 12px; color: var(--wv-muted); line-height: 1.5; }
.wv-own #wv-assistant-stage .wv-card-more { margin-top: auto; font-weight: 600; font-size: 14px; }
.wv-own #wv-assistant-stage .wv-card-list { margin: 0 0 12px; padding-left: 20px; }
.wv-own #wv-assistant-stage .wv-card-list li { margin: 3px 0; }
.wv-own #wv-assistant-stage .wv-card-table { overflow-x: auto; margin: 0 0 12px; }
.wv-own #wv-assistant-stage .wv-card table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.wv-own #wv-assistant-stage .wv-card td { border: 1px solid var(--wv-border); padding: 6px 8px; vertical-align: top; }
.wv-own #wv-assistant-stage .wv-card tr:first-child td { background: var(--wv-surface); font-weight: 600; }
.wv-own #wv-assistant-stage .wv-card--table, .wv-own #wv-assistant-stage .wv-card--images { grid-column: 1 / -1; }
.wv-own #wv-assistant-stage .wv-card-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin: 0 0 12px; }
.wv-own #wv-assistant-stage .wv-card-gallery .wv-card-img { margin: 0; }
/* The banner rides at the foot of the stage instead of floating over the chat input. */
.wv-own #wv-assistant-stage #wv-banner { position: static; flex: none; max-width: none; height: auto; margin: 0 16px 16px; box-shadow: none; flex-wrap: wrap; align-items: baseline; padding: 8px 14px; border-radius: 10px; }
.wv-own #wv-assistant-stage #wv-banner p { white-space: normal; overflow: visible; }
/* The banner's own "talk to the assistant" link would point at this page. */
.wv-own #wv-assistant-stage #wv-banner a.wv-assistant-link { display: none; }
.wv-own #wv-assistant-chat { display: flex; min-width: 0; min-height: 0; }
#wv-chat.wv-chat--page { position: static; z-index: auto; display: flex; flex: 1; min-height: 0; }
#wv-chat.wv-chat--page .wv-chat-panel { display: flex; width: 100%; height: 100%; min-height: 0; box-shadow: 0 22px 42px rgba(20, 20, 30, 0.08); }
#wv-chat.wv-chat--page .wv-chat-head { background: var(--wv-surface); }
#wv-chat.wv-chat--page .wv-chat-msg--pick { cursor: pointer; }
#wv-chat.wv-chat--page .wv-chat-msg--active { box-shadow: 0 0 0 2px var(--wv-accent); }
#wv-chat .wv-chat-show { display: inline-block; margin-top: 8px; border: 1px solid var(--wv-border); background: var(--wv-bg); color: var(--wv-accent); border-radius: 999px; padding: 3px 10px; font: 600 12px/1.4 var(--wv-font); cursor: pointer; }
#wv-chat .wv-chat-show[aria-pressed="true"] { background: var(--wv-accent); color: var(--wv-accent-text); border-color: var(--wv-accent); }
@media (max-width: 1179px) {
  .wv-own main.wv-assistant { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 16px; padding: 16px; }
}
@media (max-width: 899px) {
  .wv-own main.wv-assistant { display: flex; flex-direction: column; gap: 10px; padding: 10px; }
  .wv-own #wv-assistant-stage { flex: none; max-height: 45vh; max-height: 45dvh; }
  .wv-own .wv-stage-head { padding: 10px 14px; }
  .wv-own .wv-stage-head h1 { display: none; }
  .wv-own .wv-stage-head .brand img { max-height: 26px; }
  .wv-own .wv-stage-body { padding: 12px 14px; }
  .wv-own .wv-stage-body h2 { margin: 12px 0 8px; font-size: 14px; }
  .wv-own .wv-intro-summary { font-size: 16px; }
  .wv-own .wv-intro-lead { display: none; }
  .wv-own .wv-intro-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .wv-own .wv-intro-chip { flex: none; font-size: 13px; padding: 6px 12px; }
  .wv-own #wv-assistant-stage .wv-cards { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 72%); grid-template-columns: none; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; }
  .wv-own #wv-assistant-stage .wv-card { scroll-snap-align: start; font-size: 13.5px; }
  .wv-own #wv-assistant-stage .wv-card--table, .wv-own #wv-assistant-stage .wv-card--images { grid-column: auto; }
  .wv-own #wv-assistant-stage .wv-card-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .wv-own #wv-assistant-stage #wv-banner { margin: 0; border-radius: 0; flex-wrap: nowrap; align-items: center; padding: 6px 12px; }
  .wv-own #wv-assistant-stage #wv-banner p { flex: 1 1 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .wv-own #wv-assistant-chat { flex: 1; }
}

/* Mobile: pill button that opens an 85 % bottom sheet. */
@media (max-width: 767px) {
  #wv-chat { right: 16px; bottom: calc(var(--wv-banner-height) + 12px); }
  #wv-chat.wv-chat--open:not(.wv-chat--page) { inset: auto 0 0 0; z-index: 2147483001; }
  #wv-chat:not(.wv-chat--page) .wv-chat-panel {
    width: 100%;
    height: 85vh;
    height: 85dvh;
    border-radius: 18px 18px 0 0;
    border-bottom: 0;
  }
}