/* ============================================================
   webchat.css — the public chat widget.
   Brand tokens only (--navy-*, --gold-*), so each company's own palette
   applies without this file knowing which company it is on.

   IMMUNE TO THE HOST PAGE. The widget is injected into every public page,
   and every public page carries element rules of its own: `h2 { color:
   var(--navy-800) }` painted the hero's white heading navy-on-navy, and
   `p { margin-bottom: 16px }` opened gaps no design asked for. Every
   element inside .wc is therefore reverted to the user-agent sheet first
   (`all: revert`) and then styled explicitly — colour, size, margin and
   font are never left to inheritance from the page.

   ONE SCROLLER. An open panel is header (fixed) / body (the only thing
   that scrolls) / rail-or-composer (fixed). The body gets flex:1 1 auto and
   min-height:0, which is what lets it shrink instead of pushing the rail
   off the bottom.

   THE VISIBLE VIEWPORT. The sheet is sized from --wc-vvh / --wc-vvt, which
   webchat.js writes from visualViewport (the keyboard shrinks it; the
   address bar moves it). dvh and vh are the fallbacks, in that order.
   ============================================================ */

.wc {
  position: fixed;
  /* Safe-area, not a guess: on a phone with a home indicator a flat 20px puts
     the button under it. */
  --wc-right: max(18px, env(safe-area-inset-right, 0px));
  /* Same shared floor as the dashboard launcher: a public page with a
     sticky action bar must be able to lift this out of the way. */
  --wc-bottom: max(var(--fab-floor, 18px), env(safe-area-inset-bottom, 0px));
  right: var(--wc-right);
  bottom: var(--wc-bottom);
  z-index: 2147483000;                 /* above site chrome, below nothing we own */
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
  /* The page's body font — the brand's — but nothing else from the page. */
  font-family: inherit; font-size: 16px; line-height: 1.4; font-weight: 400;
  /* Pixels throughout: the page's root font-size (rem) must not rescale the
     widget on one brand and not the other. */
  color: var(--navy-900, #0B2545); text-align: left; direction: ltr;
  letter-spacing: normal; text-transform: none;
  -webkit-text-size-adjust: 100%;
}
/* THE RESET. Every descendant drops the page's element rules and starts
   from the user-agent sheet; the rules below this line then say what each
   thing looks like. This block is FIRST so any later .wc__* rule wins at
   equal specificity. */
/* SVG is left alone: `all: revert` outranks an icon's own fill="none"
   stroke="currentColor" attributes and painted every icon invisible. :where()
   keeps the selector at (0,1,0). */
.wc *:where(:not(svg):not(svg *)), .wc *::before, .wc *::after {
  all: revert;
  box-sizing: border-box;
}
/* Element-level defaults are wrapped in :where() so they carry (0,1,0) and
   lose to every .wc__* component rule that follows. */
.wc :where(button, input, select, textarea) {
  font: inherit; color: inherit; margin: 0; letter-spacing: inherit;
}
.wc :where(h2, h3, p, ul, ol) { margin: 0; padding: 0; font: inherit; color: inherit }
.wc :where(b) { font-weight: 700 }
.wc :where(small) { font-size: .82em }
.wc :where(em, i) { font-style: normal }
.wc :where(img) { display: block; max-width: 100%; height: auto; border: 0 }
.wc :where(svg) { display: block }
.wc :where(a) { color: inherit; text-decoration: underline }
.wc [hidden] { display: none !important }

/* ------------------------------------------------------------------ launcher */
.wc__fab {
  /* Fixed box, reserved up front: the launcher must never reflow the page when
     it appears, and a square that grows would do exactly that. */
  position: relative;
  width: 58px; height: 58px; flex: none;
  display: grid; place-items: center;
  border: 2px solid rgba(255, 255, 255, .55); border-radius: 50%;
  background: var(--navy-800, #0B2545);
  color: #fff; cursor: pointer; padding: 0;
  box-shadow: 0 8px 24px rgba(11, 37, 69, .28), 0 2px 6px rgba(11, 37, 69, .18);
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}
.wc__fab svg { width: 26px; height: 26px }
.wc__fab:hover { background: var(--navy-900, #081B33); transform: translateY(-2px) }
.wc__fab:active { transform: translateY(0) scale(.97) }
.wc__fab:focus-visible { outline: 3px solid var(--gold-500, #C9A227); outline-offset: 3px }
/* The unread count: a word for screen readers is on the button's label;
   this is the visible number. */
.wc__badge {
  position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px;
  padding: 0 6px; border-radius: 11px; display: grid; place-items: center;
  background: var(--gold-500, #C9A227); color: var(--navy-900, #0B2545);
  font-size: 11.5px; font-weight: 800; line-height: 1;
  border: 2px solid #fff;
}
/* One gentle nudge, only for people who have not asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
  .wc__fab.is-nudge { animation: wcNudge 1.6s ease-in-out 2 }
  @keyframes wcNudge {
    0%, 100% { box-shadow: 0 8px 24px rgba(11, 37, 69, .28), 0 0 0 0 rgba(201, 162, 39, .55) }
    50% { box-shadow: 0 8px 24px rgba(11, 37, 69, .28), 0 0 0 12px rgba(201, 162, 39, 0) }
  }
}
/* OPEN = NO LAUNCHER, ON EVERY BREAKPOINT. The panel's own close control is
   the way out; a second button drawn over the panel's foot was a target the
   visitor could hit by mistake. display:none, so it also leaves the column
   and the panel sits where the button was. */
.wc--open .wc__fab { display: none }

/* -------------------------------------------------------------------- panel */
/* HIDDEN HAS TO WIN. close() sets panel.hidden = true, and the UA sheet's
   [hidden]{display:none} loses to ANY author rule that sets display - which
   .wc__panel below does. */
.wc__panel[hidden] { display: none }

.wc__panel {
  position: relative;
  width: min(400px, calc(100vw - 32px));
  /* Bottom-aligned (the root is), with at least 16px of air above: the
     visible height minus the launcher's floor minus that clearance. */
  height: min(680px, calc(100vh - var(--wc-bottom) - 16px));
  height: min(680px, calc(100dvh - var(--wc-bottom) - 16px));
  height: min(680px, calc(var(--wc-vvh, 100dvh) - var(--wc-bottom) - 16px));
  max-height: calc(var(--wc-vvh, 100dvh) - var(--wc-bottom) - 16px);
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; color: var(--navy-900, #0B2545);
  border: 1px solid var(--gray-200, #dde4ec); border-radius: 16px;
  box-shadow: 0 24px 60px rgba(11, 37, 69, .26), 0 2px 8px rgba(11, 37, 69, .10);
  animation: wcIn .18s cubic-bezier(.2, .8, .3, 1);
  transform-origin: bottom right;
}
@keyframes wcIn { from { opacity: 0; transform: translateY(10px) scale(.98) } to { opacity: 1; transform: none } }

/* The three parts. Every view is built from them. */
.wc__head, .wc__hero, .wc__nav, .wc__composer, .wc__foot, .wc__typing, .wc__conn,
.wc__up, .wc__rec, .wc__emoji { flex: 0 0 auto }
.wc__body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}

.wc__head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--navy-800, #0B2545); color: #fff;
  border-bottom: 3px solid var(--gold-500, #C9A227);
}

/* ------------------------------------------------------------------ consent */
.wc__consent { margin: 4px 0 0; font-size: 11.8px; line-height: 1.5; color: #4a5c76 }
.wc__consent a { color: var(--navy-700, #13315C); text-decoration: underline }

/* --------------------------------------------------------------------- chat */
.wc__logWrap { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column }
.wc__log { padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 8px; color: var(--navy-900, #0B2545) }
.wc__empty { margin: auto; padding: 12px; color: #4a5c76; font-size: 14.1px; text-align: center }

/* The way down, when the reader is up. */
.wc__pill {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px;
  padding: 6px 14px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--navy-800, #0B2545); color: #fff; font-size: 12.8px; font-weight: 700;
  box-shadow: 0 6px 18px rgba(11, 37, 69, .28);
}
.wc__pill svg { width: 14px; height: 14px }
.wc__pill:focus-visible { outline: 2px solid var(--gold-500, #C9A227); outline-offset: 2px }

/* The assistant's bubble is the quieter one: lighter than the visitor's
   navy, at most 84% of the panel, a hair less padding. The reader's eye
   should land on what THEY said and on the composer, not on the chrome. */
.wc__msg { max-width: 92%; align-self: flex-start; display: flex; flex-direction: row; align-items: flex-end; gap: 8px }
.wc__bubble { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.wc__msg p {
  margin: 0; padding: 8px 11px; border-radius: 14px 14px 14px 4px;
  background: #f6f8fb; border: 1px solid #e3e9f1; color: var(--navy-900, #0B2545); font-size: 14.2px; line-height: 1.45;
  overflow-wrap: anywhere; white-space: pre-wrap;  /* a pasted URL must not widen the panel */
}
.wc__who { font-size: 10.4px; font-weight: 700; color: #4a5c76; text-transform: uppercase; letter-spacing: .04em; display: flex; align-items: center; gap: 6px; flex-wrap: wrap }
.wc__who time { font-weight: 400; text-transform: none; letter-spacing: 0; color: #5b6b85 }
.wc__aiTag {
  display: inline-block; padding: 1px 5px; border-radius: 999px;
  font-size: 9.6px; font-weight: 800; letter-spacing: .06em;
  background: #dfe8f5; color: var(--navy-800, #0B2545);
}
.wc__msg.is-mine { align-self: flex-end; max-width: 84% }
.wc__msg.is-mine p { background: var(--navy-800, #0B2545); border-color: var(--navy-800, #0B2545); color: #fff; border-radius: 14px 14px 4px 14px }
.wc__msg.is-mine .wc__who { justify-content: flex-end }
.wc__msg.is-system { align-self: center; max-width: 100% }
.wc__msg.is-system p { background: #fdf8ea; border-color: #fdf8ea; color: #5c4a12; font-size: 12.8px; text-align: center; border-radius: 9px }
.wc__msg.is-pending p { opacity: .62 }
.wc__msg.is-failed p { background: #fdecea; border-color: #fdecea; color: #7f231c }
/* Status is a WORD, never colour alone. */
.wc__state { font-size: 11.2px; color: #7f231c }
.wc__state--ok { color: #4a5c76 }
.wc__msg.is-mine .wc__state { text-align: right }

.wc__typing { display: flex; align-items: center; gap: 4px; padding: 0 14px 8px; font-size: 12.5px; color: #4a5c76 }
.wc__typing span { width: 5px; height: 5px; border-radius: 50%; background: #7a8aa3; animation: wcDot 1.2s infinite }
.wc__typing span:nth-child(2) { animation-delay: .2s }
.wc__typing span:nth-child(3) { animation-delay: .4s }
.wc__typing em { font-style: normal; margin-left: 6px }
.wc__typing .wc__link { margin-left: auto }
.wc__msg.is-stream p::after { content: "▍"; margin-left: 2px; color: #7a8aa3; animation: wcDot 1.2s infinite }
.wc__msg.is-stream .wc__state, .wc__msg.is-stopped .wc__state { color: #4a5c76 }
@keyframes wcDot { 0%, 60%, 100% { opacity: .3; transform: translateY(0) } 30% { opacity: 1; transform: translateY(-2px) } }

/* THE COMPOSER IS THE SHARED CAPSULE (assets/css/composer-ui.css), which the
   widget loads with the panel. This sheet only sizes the placeholder that
   holds its place while it is fetched, and the strips that ride above it. */
.wc__composer--pending { min-height: 74px; background: #fff }
.wc .cu { border-top: 1px solid #e3e9f1 }
.wc .cu__field { font-size: 16px }     /* 16px stops iOS zooming the page on focus */

.wc__foot { padding: 0 14px 8px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px }
.wc__link { border: 0; background: none; padding: 6px 8px; font: inherit; font-size: 12.8px; font-weight: 600; color: var(--navy-700, #13315C); text-decoration: underline; cursor: pointer; min-height: 32px }
.wc__link:focus-visible { outline: 2px solid var(--gold-500, #C9A227); outline-offset: 2px }

.wc__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 }

/* The waiting state replaces the button, so there is nothing left to click
   twice. ONE line: a dot that belongs to words, what happened, and a
   three-word expectation. The full response-time sentence — the company's
   own, hours included — opens under it on a tap; the summary is the whole
   line, so the tap target is the line. */
.wc__wait { display: block; max-width: 100%; font-size: 12.5px; font-weight: 700; color: var(--navy-800, #0B2545); line-height: 1.4 }
.wc__wait.is-closed { color: #7a4a0e }
.wc__wait summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; padding: 6px 4px; min-height: 32px; white-space: nowrap; max-width: 100% }
.wc__wait summary::-webkit-details-marker { display: none }
.wc__wait summary > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis }
.wc__wait summary::after { content: "\25BE"; font-size: 11px; color: #7a8aa3; transition: transform .15s }
.wc__wait[open] summary::after { transform: rotate(180deg) }
.wc__wait summary:focus-visible { outline: 2px solid var(--gold-500, #C9A227); outline-offset: 2px; border-radius: 6px }
.wc__waitDot { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 3px rgba(61, 220, 132, .25); flex: none }
.wc__wait.is-closed .wc__waitDot { background: #d28a1e; box-shadow: none }
.wc__wait--live { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: #1c5c33; padding: 6px 4px }
.wc__waitMore { margin: 0 0 4px; font-size: 12.2px; font-weight: 400; color: #4a5c76; line-height: 1.4 }

/* The visitor is TOLD when delivery has fallen back to polling. */
.wc__conn { padding: 6px 14px; font-size: 11.8px; font-weight: 600; color: #7a4a0e; background: #fdf0e3; border-bottom: 1px solid #f3e0c8 }

/* ---- header: who is answering ---- */
.wc__ident { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; color: #fff }
.wc__ident b { font-size: 15.2px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff }
.wc__ident small { font-size: 11.5px; color: #dbe4f0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap }
/* The AI disclosure is a WORD, not a colour or an icon. */
.wc__aidot {
  padding: 0 5px; border-radius: 999px; font-size: 9.4px; font-weight: 700;
  letter-spacing: .02em; background: rgba(255, 255, 255, .18); color: #fff;
}

.wc__av {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11.8px; font-weight: 700;
  background: rgba(255, 255, 255, .18); color: #fff;
}
.wc__av svg { width: 20px; height: 20px }
.wc__av--human { background: var(--gold-500, #C9A227); color: var(--navy-900, #0B2545) }
.wc__av--sm { width: 26px; height: 26px; font-size: 9.9px; align-self: flex-end; background: var(--navy-700, #16456f); color: #fff }
.wc__av--sm svg { width: 15px; height: 15px }
.wc__av--sm.wc__av--ai { background: #dfe8f5; color: var(--navy-800, #0B2545) }

.wc__ico {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: 10px; background: rgba(255, 255, 255, .14);
  color: #fff; cursor: pointer; padding: 0;
}
.wc__ico:hover { background: rgba(255, 255, 255, .26) }
.wc__ico:focus-visible { outline: 2px solid #fff; outline-offset: 2px }
.wc__ico svg { width: 20px; height: 20px }
.wc__ico--onhero { margin-left: auto }

/* ---- overflow menu ---- */
.wc__menu {
  position: absolute; top: 60px; right: 10px; z-index: 3; min-width: 220px;
  background: #fff; border: 1px solid var(--gray-200, #dde4ec); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(11, 37, 69, .18); overflow: hidden; padding: 4px;
}
.wc__mi {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 12px; min-height: 44px;
  border: 0; border-radius: 8px; background: none; cursor: pointer;
  font: inherit; font-size: 14.1px; color: var(--navy-900, #0B2545); text-align: left;
}
.wc__mi:hover { background: #f2f6fb }
.wc__mi:focus-visible { outline: 2px solid var(--navy-900, #0B2545); outline-offset: -2px }
.wc__mi svg { width: 17px; height: 17px; flex: none; opacity: .75 }

/* ---- home ---- */
/* THE HEADER. A solid navy with a very slight gradient, both ends of which
   carry white text at 4.5:1 or better. Every line of text in it sets its own
   colour: nothing here inherits, so nothing here can be overridden by the
   page's heading rule. */
.wc__hero {
  position: relative; padding: 16px 16px 16px;
  background-color: var(--navy-900, #0B2545);
  background-image: linear-gradient(160deg, var(--navy-900, #0B2545), var(--navy-800, #13315C));
  color: #fff;
  border-bottom: 3px solid var(--gold-500, #C9A227);
}
.wc__heroBrandRow { display: flex; align-items: center; gap: 10px; margin-bottom: 12px }
.wc__heroLogo {
  width: 36px; height: 36px; border-radius: 10px; background: #fff;
  padding: 4px; object-fit: contain; flex: 0 0 auto;
}
.wc__heroBrand { margin: 0; font-size: 13.1px; font-weight: 700; color: #fff; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.wc__heroTitle { margin: 0; font-size: 22.4px; line-height: 1.2; font-weight: 800; color: #fff; letter-spacing: -.01em }
.wc__heroSub { margin: 4px 0 0; font-size: 14.4px; color: #e6edf6 }
/* Availability: a badge, a line, the hours — three elements, never one
   paragraph joined with dots. */
.wc__avail { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 12px 0 0 }
.wc__badgeStatus {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 8px;
  border-radius: 999px; font-size: 12.2px; font-weight: 800; letter-spacing: .01em;
  background: rgba(255, 255, 255, .14); color: #fff; border: 1px solid rgba(255, 255, 255, .28);
}
.wc__availDot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: #c7ced8 }
.wc__badgeStatus.is-open .wc__availDot { background: #3ddc84; box-shadow: 0 0 0 3px rgba(61, 220, 132, .25) }
.wc__badgeStatus.is-closed .wc__availDot { background: #f0b04b }
.wc__availLine { margin: 0; font-size: 13.1px; line-height: 1.4; color: #e6edf6 }
.wc__availHours { margin: 0; font-size: 12.2px; color: #c9d6e6 }
.wc__availHoursLab { font-weight: 700; color: #e6edf6 }

.wc__homeBody { padding: 14px 14px 18px; display: flex; flex-direction: column; gap: 10px; background: #f6f8fb }

/* Cards: one height, one radius, one icon size; every state is drawn. */
.wc__card {
  width: 100%; min-height: 72px; display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 12px 14px; border: 1px solid var(--gray-200, #dde4ec); border-radius: 14px;
  background: #fff; box-shadow: 0 2px 8px rgba(11, 37, 69, .06); cursor: pointer;
  font: inherit; color: var(--navy-900, #0B2545);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.wc__card:hover { border-color: var(--gold-500, #C9A227); box-shadow: 0 8px 22px rgba(11, 37, 69, .12) }
.wc__card:active { transform: scale(.985) }
.wc__card:focus-visible { outline: 3px solid var(--gold-500, #C9A227); outline-offset: 2px }
.wc__card:disabled, .wc__card.is-loading { cursor: default; opacity: .6; transform: none; box-shadow: none }
.wc__card.is-loading .wc__cardGo svg { animation: wcSpin 1s linear infinite }
@keyframes wcSpin { to { transform: rotate(360deg) } }
.wc__cardIco {
  flex: none; width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  background: #e8eff9; color: var(--navy-800, #0B2545);
}
.wc__cardIco svg { width: 22px; height: 22px }
.wc__cardText { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px }
.wc__cardText b { font-size: 15.2px; font-weight: 800; color: var(--navy-900, #0B2545); line-height: 1.25 }
.wc__cardText small { font-size: 12.5px; color: #4a5c76; line-height: 1.35 }
.wc__cardGo { flex: none; color: #6b7d97 }
.wc__cardGo svg { width: 18px; height: 18px }

/* ---- bottom navigation ---- */
.wc__nav {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--gray-200, #dde4ec); background: #fff;
}
.wc__tab {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 8px 4px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 11px; font-weight: 600; color: #3f5470; min-height: 52px;
  min-width: 0; overflow: hidden;
}
/* A 320px phone gives each tab 80px; "Conversación" is told to fit, not to
   push the rail wider than the sheet. */
.wc__tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.wc__tab svg { width: 22px; height: 22px }
/* The active tab is bold AND coloured AND underlined by a bar AND carries
   aria-current — colour alone is not a signal for every reader. */
.wc__tab.is-on { color: var(--navy-900, #0B2545); font-weight: 800 }
.wc__tab.is-on svg { stroke-width: 2.5 }
.wc__tab.is-on::before { content: ""; position: absolute; top: 0; left: 18%; right: 18%; height: 3px; border-radius: 0 0 3px 3px; background: var(--gold-500, #C9A227) }
.wc__tab:hover:not(:disabled):not(.is-on) { background: #f4f7fb }
.wc__tab:disabled { opacity: .45; cursor: default }
.wc__tab:focus-visible { outline: 2px solid var(--navy-900, #0B2545); outline-offset: -3px }

/* ---- scrolling tab bodies ---- */
.wc__scroll { padding: 14px 16px 20px; color: var(--navy-900, #0B2545) }
.wc__grpTitle { margin: 14px 0 6px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #4a5c76 }
.wc__grpTitle:first-child { margin-top: 0 }

.wc__faq { border-bottom: 1px solid var(--gray-200, #dde4ec) }
.wc__faqQ {
  width: 100%; display: flex; gap: 10px; align-items: center; justify-content: space-between;
  padding: 12px 0; min-height: 44px; border: 0; background: none; cursor: pointer; text-align: left;
  font: inherit; font-size: 14.1px; font-weight: 600; color: var(--navy-900, #0B2545);
}
.wc__faqQ:focus-visible { outline: 2px solid var(--navy-900, #0B2545); outline-offset: 2px }
.wc__faqQ svg { width: 16px; height: 16px; flex: none; transition: transform .18s }
.wc__faq.is-open .wc__faqQ svg { transform: rotate(180deg) }
.wc__faqA { padding: 0 0 12px; font-size: 13.8px; line-height: 1.55; color: #33465f }

.wc__art { display: flex; gap: 12px; padding: 12px 0; text-decoration: none; color: inherit; border-bottom: 1px solid var(--gray-200, #dde4ec) }
.wc__art:focus-visible { outline: 2px solid var(--navy-900, #0B2545); outline-offset: 2px }
.wc__artImg { flex: none; width: 72px; height: 72px; object-fit: cover; border-radius: 10px }
.wc__artText { display: flex; flex-direction: column; gap: 3px; min-width: 0 }
.wc__artText b { font-size: 14.4px; line-height: 1.3; color: var(--navy-900, #0B2545) }
.wc__artText small { font-size: 12.5px; color: #4a5c76 }
.wc__artText em { font-style: normal; font-size: 11.5px; color: #4a5c76 }

/* ---- timeline ---- */
.wc__day { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; color: #7a8aa3 }
.wc__day::before, .wc__day::after { content: ""; flex: 1 1 auto; height: 1px; background: #e3e9f1 }
.wc__day span { font-size: 10.6px; font-weight: 600 }

/* ---- sheets (end / edit / transcript) ---- */
.wc__sheet {
  position: absolute; inset: 0; z-index: 4; display: grid; place-items: center;
  padding: 20px; background: rgba(11, 37, 69, .42);
}
.wc__sheetBox { width: 100%; max-height: 82%; overflow-y: auto; background: #fff; border-radius: 14px; padding: 18px; box-shadow: 0 20px 50px rgba(11, 37, 69, .3) }
.wc__sheetBox h3 { margin: 0 0 8px; font-size: 16px; font-weight: 800; color: var(--navy-900, #0B2545) }
.wc__sheetBox p { margin: 0 0 16px; font-size: 13.8px; line-height: 1.5; color: #33465f }
.wc__sheetRow { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap }
.wc__btn {
  padding: 9px 14px; border-radius: 10px; border: 1px solid var(--gray-200, #cfd8e3);
  background: #fff; font: inherit; font-size: 13.8px; font-weight: 700; cursor: pointer;
  color: var(--navy-900, #0B2545); min-height: 44px;
}
.wc__btn--go { background: var(--navy-900, #0B2545); border-color: var(--navy-900, #0B2545); color: #fff }
.wc__btn:focus-visible { outline: 2px solid var(--gold-500, #C9A227); outline-offset: 2px }
.wc__done { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px }
.wc__done h3 { margin: 0; font-size: 16.8px; font-weight: 800; color: var(--navy-900, #0B2545) }

/* ---- the edit / transcript forms ---- */
.wc__form { display: flex; flex-direction: column; gap: 11px; margin: 0 0 16px }
.wc__field { display: flex; flex-direction: column; gap: 4px }
.wc__field > span { font-size: 12.2px; font-weight: 700; color: #33465f }
.wc__field input, .wc__field select {
  width: 100%; padding: 9px 11px; font: inherit; font-size: 16px;
  color: var(--navy-900, #0B2545); background: #fff;
  border: 1px solid var(--gray-200, #cfd8e3); border-radius: 9px; min-height: 44px;
}
.wc__field input:focus-visible, .wc__field select:focus-visible { outline: 2px solid var(--navy-900, #0B2545); outline-offset: 1px; border-color: transparent }
/* An invalid field is marked by a BORDER, a message and the label — never by
   colour alone. */
.wc__field.is-bad input { border-color: #c0392b; border-width: 2px }
.wc__field em { font-style: normal; font-size: 12.2px; color: #a83226 }
.wc__fine { margin: 2px 0 0; font-size: 12.2px; line-height: 1.45; color: #4a5c76 }

/* ---- composer: emoji, counter, upload progress, attachments ---- */
/* The emoji picker, the plus menu and the icon buttons are the shared
   composer's (.cu__*); nothing here styles them. */

.wc__count { position: absolute; right: 70px; bottom: 100%; margin: 0 0 2px; font-size: 11.2px; color: #4a5c76; pointer-events: none }
.wc__count.is-bad { color: #a83226; font-weight: 700 }

/* The strips ride in the composer's previews slot, above the capsule and
   in flow: the log shortens under them rather than being covered. */
.wc__up { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border: 1px solid var(--gray-200, #dde4ec); border-radius: 14px; background: #fbfcfe; font-size: 12.5px; color: #33465f }
.wc__upName { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.wc__upBar { flex: 1 1 auto; height: 5px; border-radius: 3px; background: #dde4ec; overflow: hidden }
.wc__upBar i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--navy-900, #0B2545); transition: width .18s linear }

/* A file is a BUTTON, not a link: the URL does not exist until it is clicked. */
.wc__file {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px;
  margin-top: 4px; padding: 8px 10px;
  border: 1px solid var(--gray-200, #dde4ec); border-radius: 10px;
  background: #fff; color: var(--navy-900, #0B2545); font: inherit; font-size: 12.8px; text-align: left; cursor: pointer;
}
.wc__file svg { width: 16px; height: 16px; flex: none; color: #4a5c76 }
.wc__file span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.wc__file em { flex: none; font-style: normal; font-weight: 700; color: var(--navy-700, #13315C) }
.wc__file:hover { background: #f4f7fb; border-color: #cfdae7 }
.wc__file:focus-visible { outline: 2px solid var(--gold-500, #C9A227); outline-offset: 1px }
.wc__msg.is-mine .wc__file { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.25); color: #fff }
.wc__msg.is-mine .wc__file svg, .wc__msg.is-mine .wc__file em { color: #fff }

/* --------------------------------------------------------------- voice notes */
.wc__rec { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; width: 100%; padding: 8px 12px; border: 1px solid var(--gray-200, #dde4ec); border-radius: 14px; background: #fbfcfe; font-size: 12.8px; color: #33415c; font-variant-numeric: tabular-nums }
.wc__recDot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #c0392b; animation: wc-rec 1.2s ease-in-out infinite }
.wc__rec.is-paused .wc__recDot { animation: none; background: #8a94a6 }
.wc__recState { font-weight: 700; color: var(--navy-900, #0B2545) }
.wc__recTime { min-width: 3.2em }
@keyframes wc-rec { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }
.wc__rec .wc__btn { margin-left: auto }
.wc__recAudio { flex: 1 1 auto; min-width: 0; height: 34px; max-width: 100% }
.wc__voice { display: flex; align-items: center; gap: 8px; margin-top: 6px; max-width: 100% }
.wc__play { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--gray-200, #dde4ec); border-radius: 50%; background: #fff; color: var(--navy-900, #0B2545); cursor: pointer; padding: 0 }
.wc__play svg { width: 15px; height: 15px }
.wc__play:hover { background: #f4f7fb; border-color: #cfdae7 }
.wc__play:focus-visible { outline: 2px solid var(--gold-500, #C9A227); outline-offset: 2px }
.wc__voiceLab { font-size: 12.5px; color: #4a5c76; font-variant-numeric: tabular-nums }
.wc__voice.is-loading { opacity: .6 }
.wc__msg.is-mine .wc__play { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.25); color: #fff }
.wc__msg.is-mine .wc__voiceLab { color: rgba(255,255,255,.85) }

/* ---- the opening choice, inside the conversation ---- */
.wc__chooser { margin: 10px 0 4px; padding: 10px; border-radius: 14px; background: #f3f6fa; border: 1px solid var(--gray-200, #dde4ec); display: flex; flex-direction: column; gap: 6px }
.wc__chooserLead { margin: 0 0 2px; font-size: 12.8px; font-weight: 700; color: var(--navy-900, #0B2545) }
.wc__chooserBtn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  width: 100%; text-align: left; cursor: pointer; font: inherit;
  border: 1px solid var(--gray-200, #cfd8e3); background: #fff;
  color: var(--navy-900, #0B2545); border-radius: 12px; padding: 9px 12px; min-height: 44px;
  transition: background .15s ease, border-color .15s ease;
}
.wc__chooserBtn:hover { border-color: var(--gold-500, #C9A227) }
.wc__chooserBtn:focus-visible { outline: 3px solid var(--gold-500, #C9A227); outline-offset: 2px }
.wc__chooserBtn b { font-size: 14.1px; font-weight: 700 }
.wc__chooserBtn small { font-size: 12.2px; color: #4a5c76 }
.wc__chooserBtn.is-ai b::after { content: " · AI"; font-size: 10.6px; font-weight: 800; letter-spacing: .06em; color: #4a5c76 }

/* ================================================================ modes */
/* THE SHEET: a phone, or any viewport too short for a floating panel to
   have air above and below (a phone in landscape). Anchored to the TOP of
   the visible viewport (--wc-vvt) and sized to its height (--wc-vvh), so
   the header sits under the status bar and above the keyboard, whichever
   is in the way; the safe-area insets pad the header and the rail. */
@media (max-width: 640px), (max-height: 520px) {
  .wc--open { right: 0; bottom: 0; left: 0; top: 0; align-items: stretch; gap: 0 }
  .wc--open .wc__panel {
    position: fixed; left: 0; right: 0;
    top: var(--wc-vvt, 0px);
    width: 100%; max-width: none;
    height: 100vh; height: 100dvh; height: var(--wc-vvh, 100dvh);
    max-height: 100vh; max-height: 100dvh; max-height: var(--wc-vvh, 100dvh);
    border: 0; border-radius: 0; animation: none;
  }
  .wc--open .wc__hero, .wc--open .wc__head { padding-top: calc(12px + env(safe-area-inset-top, 0px)) }
  .wc--open .wc__hero { padding-top: calc(16px + env(safe-area-inset-top, 0px)) }
  .wc--open .wc__nav { padding-bottom: env(safe-area-inset-bottom, 0px) }
  .wc__fab { margin: 0 }
}
/* A short landscape phone: the hero gives up its subtitle so the cards can
   still be reached without scrolling the header away. */
@media (max-height: 520px) {
  .wc--open .wc__hero { padding-top: calc(10px + env(safe-area-inset-top, 0px)); padding-bottom: 10px }
  .wc--open .wc__heroSub { display: none }
  .wc--open .wc__heroBrandRow { margin-bottom: 6px }
  .wc--open .wc__heroTitle { font-size: 18.4px }
}
/* A tablet: a wider panel than a phone's card, still floating. */
@media (min-width: 641px) and (max-width: 1024px) {
  .wc__panel { width: min(420px, calc(100vw - 32px)) }
}

/* The page behind the sheet does not scroll; webchat.js records and restores
   the position. */
html.wc-lock, html.wc-lock body { overflow: hidden !important; height: 100% }
html.wc-lock body { position: fixed; left: 0; right: 0; width: 100% }

@media (hover: none), (pointer: coarse) {
  .wc__fab { width: 60px; height: 60px }
  .wc__link { min-height: 44px }
}
/* THE KEYBOARD ON A SMALL PHONE leaves under 380px of visible height. The
   rail and the footer give way so the header, the newest message and the
   composer all fit; both return the moment the keyboard goes. */
@media (max-height: 380px) {
  .wc--open .wc__nav, .wc--open .wc__foot { display: none }
  .wc--open .wc__log { padding: 8px 14px 10px }
}

@media print { .wc { display: none !important } }

@media (prefers-reduced-motion: reduce) {
  .wc__panel { animation: none }
  .wc__fab, .wc__card, .wc__chooserBtn, .wc__upBar i, .wc__faqQ svg { transition: none }
  .wc__typing span, .wc__msg.is-stream p::after, .wc__recDot, .wc__card.is-loading .wc__cardGo svg { animation: none; opacity: .6 }
}