/* ==========================================================================
   response-header.css — the answer's own header
   Source of truth: Figma 905:13823 (resolved) · 905:13911 (resolving).

   One band across the top of the conversation column: the reader's plan on the
   left, the current answer's context in the middle, Share on the right. The two
   frames are the SAME header in two states — identical height, identical
   padding, identical track — so resolving moves information into a stable bar
   rather than moving the bar.

   Measures are the artboard's own (1440 frame, 1174 main column).
   ========================================================================== */

:root {
  --ws-ah-h: 66px;                     /* 16 + 34 + 16 */
  --ws-ah-pad-x: 18px;
  --ws-ah-track: 486px;                /* 905:13829 — the reserved metadata track */
  --ws-ah-gap: 16px;
  --ws-ah-ink: #24252d;
  --ws-ah-border: #bdc4c6;
  --ws-ah-chip: #f0eee6;
  --ws-ah-muted: #73726c;
  --ws-ah-orange: #f05822;

  /* Confidence ink. Green is the frame's own (905:13857, #36C65C) and grey is
     its unresolved twin (905:13945, #61686B); the middle two are the product's
     existing attention and danger hues rather than a new status palette. */
  --ws-ah-conf-high: #36c65c;
  --ws-ah-conf-moderate: #f05822;
  --ws-ah-conf-limited: #c0492e;
  --ws-ah-conf-unknown: #61686b;
}

/* The band. Present only while a conversation is on screen — the Home states
   draw their own header (887:8194) and must not gain this one. */
.ws-answer-header {
  position: relative;
  z-index: 4;
  flex: 0 0 auto;
  display: none;
  align-items: center;
  gap: 12px;
  height: var(--ws-ah-h);
  padding: 16px var(--ws-ah-pad-x);
  border-bottom: 1px solid var(--ws-ah-border);
  /* The header adapts to ITS OWN width, not the viewport's. The sidebar is
     resizable and collapsible, so the same viewport can leave this band 900px
     or 500px wide — a viewport breakpoint would be guessing at the number that
     actually decides whether the row fits. */
  container-type: inline-size;
  container-name: ws-ah;
}
.ws-main.is-conversation .ws-answer-header { display: flex; }

/* Plan — 905:13824. Real session state: the label is written from the reader's
   own plan, and Upgrade routes through the same notice the sidebar's does. */
.ws-ah-plan {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: var(--ws-ah-chip);
  font-family: Geist, Inter, var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: normal;
  white-space: nowrap;
}
.ws-ah-plan__name { color: var(--ws-ah-ink); letter-spacing: -0.7px; }
.ws-ah-plan__sep { color: var(--ws-ah-muted); }
.ws-ah-plan__upgrade {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ws-ah-orange);
  letter-spacing: -0.7px;
  cursor: pointer;
}
.ws-ah-plan__upgrade:hover { text-decoration: underline; }
.ws-ah-plan__upgrade:focus-visible {
  outline: 2px solid rgba(240, 88, 34, 0.55);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ==========================================================================
   The metadata track — 905:13828 / 905:13829
   Fixed 486 track with auto margins: in the frame the gap from the plan chip to
   the track and from the track to Share are the same 226.6, so the track is
   centred BETWEEN them. Regions are left-anchored inside it and the last pair
   absorbs the slack, which is exactly why nothing to its right moves when a
   label grows from "…" to "6 sources".
   ========================================================================== */

.ws-ah-host {
  flex: 0 1 var(--ws-ah-track);
  min-width: 0;
  margin: 0 auto;
}
.ws-ah {
  position: relative;
  width: 100%;
  min-width: 0;
}

.ws-ah__nav {
  display: flex;
  align-items: center;
  gap: var(--ws-ah-gap);
  width: 100%;
  min-width: 0;
  height: 17px;
}

/* The frame gives this pair the row's slack (905:13849), which is what keeps
   everything to its left anchored while a label grows. It may also shrink, so a
   long label can never push a control into the Share button. */
.ws-ah__tail {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ws-ah__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  font-family: Inter, Geist, var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  color: var(--ws-ah-ink);
  white-space: nowrap;
}
.ws-ah__item--confidence { gap: 3px; }

button.ws-ah__item { cursor: pointer; }
button.ws-ah__item:hover:not(:disabled) { color: var(--ws-ah-orange); }
button.ws-ah__item:disabled { cursor: default; }
.ws-ah__item:focus-visible {
  outline: 2px solid rgba(240, 88, 34, 0.55);
  outline-offset: 3px;
}

/* A region that resolved to nothing keeps its box and says so quietly. This is
   the honest empty state: the control is present, inert, and legible. */
.ws-ah__item[data-state="empty"],
.ws-ah__item[data-state="failed"] { color: rgba(36, 37, 45, 0.4); }

.ws-ah__icon,
.ws-ah__dot {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  display: block;
}
.ws-ah__icon { stroke-width: 1px; }

.ws-ah__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The words-removed twin. Hidden until the header is too narrow for prose. */
.ws-ah__compact { display: none; }

/* ---- Resolving ----------------------------------------------------------
   905:13911 draws a short placeholder where each label will be. It is the
   region's reserved geometry, and it appears ONLY while that region's value is
   genuinely unknown — it is never shown on a timer. */
.ws-ah__skeleton {
  display: none;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg,
    rgba(36, 37, 45, 0.13) 0%,
    rgba(36, 37, 45, 0.06) 50%,
    rgba(36, 37, 45, 0.13) 100%);
  background-size: 200% 100%;
  animation: ws-ah-shimmer 1.4s linear infinite;
}
.ws-ah__item[data-state="pending"] .ws-ah__skeleton { display: block; }

@keyframes ws-ah-shimmer {
  from { background-position: 100% 0; }
  to   { background-position: -100% 0; }
}

/* ---- Confidence ---------------------------------------------------------
   Understated by design: a dot and a phrase. No score, no gauge, no percentage.
   The dot is never the only carrier — the phrase and the accessible name always
   say the same thing in words. */
.ws-ah__item--confidence { color: var(--ws-ah-ink); }
.ws-ah__item--confidence .ws-ah__dot { color: var(--ws-ah-conf-unknown); }
.ws-ah__item--confidence[data-confidence="high"] .ws-ah__dot { color: var(--ws-ah-conf-high); }
.ws-ah__item--confidence[data-confidence="moderate"] .ws-ah__dot { color: var(--ws-ah-conf-moderate); }
.ws-ah__item--confidence[data-confidence="limited"] .ws-ah__dot { color: var(--ws-ah-conf-limited); }
.ws-ah__item--confidence[data-confidence="unresolved"] .ws-ah__dot { color: var(--ws-ah-conf-unknown); }
.ws-ah__item--confidence[data-state="empty"] .ws-ah__dot,
.ws-ah__item--confidence[data-state="pending"] .ws-ah__dot { color: var(--ws-ah-conf-unknown); }

/* ==========================================================================
   Disclosure — the links and images this response actually carries.
   Sources are NOT disclosed here: that control opens the canonical aggregate
   source list the answer already owns.
   ========================================================================== */

.ws-ah__panel {
  position: fixed;
  z-index: 60;
  width: min(420px, calc(100vw - 48px));
  max-height: min(420px, 60vh);
  overflow-y: auto;
  padding: 12px;
  border: 1px solid var(--color-card-border);
  border-radius: 12px;
  background: var(--ws-figma-cream, #fbf7ef);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}
.ws-ah__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.ws-ah__panel-title {
  font-family: Geist, Inter, var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--ws-ah-muted);
}
.ws-ah__panel-close {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  font-size: 16px;
  line-height: 1;
  color: var(--ws-ah-muted);
  cursor: pointer;
}
.ws-ah__panel-close:hover { color: var(--ws-ah-ink); }

.ws-ah__list { margin: 0; padding: 0; list-style: none; }
.ws-ah__link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--ws-ah-ink);
}
.ws-ah__link:hover { background: rgba(36, 37, 45, 0.05); }
.ws-ah__link:focus-visible {
  outline: 2px solid rgba(240, 88, 34, 0.55);
  outline-offset: -2px;
}
.ws-ah__link-label {
  font-family: Geist, Inter, var(--font-sans);
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.ws-ah__link-host {
  font-family: Geist, Inter, var(--font-sans);
  font-size: 11.5px;
  color: var(--ws-ah-muted);
}

.ws-ah__images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.ws-ah__image { margin: 0; }
.ws-ah__image img {
  display: block;
  width: 100%;
  height: 96px;
  object-fit: cover;
  border-radius: 8px;
}
.ws-ah__image figcaption {
  margin-top: 4px;
  font-family: Geist, Inter, var(--font-sans);
  font-size: 11px;
  line-height: 1.3;
  color: var(--ws-ah-muted);
}

/* ==========================================================================
   Share — 905:13860. The canonical control, wearing the frame's chip.
   ========================================================================== */
.ws-answer-header .ws-share {
  flex: 0 0 auto;
  gap: 3px;
  min-width: 54px;
  height: 24px;
  padding: 2px 7px;
  border-radius: 7px;
  background: var(--ws-ah-chip);
  font-size: 10px;
  line-height: 20px;
}
.ws-answer-header .ws-share:disabled {
  opacity: var(--state-disabled-opacity, 0.5);
  cursor: default;
  filter: none;
}
.ws-share__icon {
  width: 13.5px;
  height: 13.5px;
  flex: 0 0 auto;
  display: block;
  stroke-width: 1px;
}

/* ==========================================================================
   Responsive. The track is a design constant, so the breakpoints are the widths
   at which it stops fitting — not devices. Information is dropped in order of
   least value (the plan chip, then the words around the numbers); no region is
   ever removed, and the row never scrolls sideways.
   ========================================================================== */

/* Past the 486 track the row simply stops being centred and takes the space it
   has; every region keeps its words. */
@container ws-ah (max-width: 1180px) {
  .ws-ah-host { flex: 1 1 auto; }
}

/* A container cannot restyle itself, so anything about the BAND (its padding,
   its height) stays in a viewport query below; everything in these blocks is a
   descendant of it. */
@container ws-ah (max-width: 940px) {
  .ws-ah__nav { gap: 12px; }
  .ws-ah__item { font-size: 13px; }
}

/* The plan chip is the first thing to go: it is about the account, not about
   the answer, and the sidebar's own card carries it. */
@container ws-ah (max-width: 800px) {
  .ws-ah-plan { display: none; }
  .ws-ah-host { margin: 0 auto 0 0; }
}

/* Counts only. Every word survives in the control's accessible name, so nothing
   is lost to a screen reader — only to the eye, which has the icon instead. */
@container ws-ah (max-width: 660px) {
  .ws-ah__nav { gap: 10px; height: 16px; }
  .ws-ah__tail { gap: 8px; }
  .ws-ah__item { font-size: 12px; gap: 3px; }
  .ws-ah__icon, .ws-ah__dot { width: 15px; height: 15px; }
  /* "6 sources" → "6"; a resolved-empty region keeps its icon and shows "0". */
  .ws-ah__item[data-region="links"] .ws-ah__label,
  .ws-ah__item[data-region="images"] .ws-ah__label,
  .ws-ah__item[data-region="sources"] .ws-ah__label,
  .ws-ah__item[data-region="confidence"] .ws-ah__label,
  .ws-ah__item[data-region="reading"] .ws-ah__label { display: none; }
  .ws-ah__item[data-region="links"] .ws-ah__compact,
  .ws-ah__item[data-region="images"] .ws-ah__compact,
  .ws-ah__item[data-region="sources"] .ws-ah__compact { display: inline; }
  /* Reading time keeps its value; the clock supplies the noun. Confidence keeps
     its dot, and its meaning stays in the accessible name and the tooltip. */
  .ws-ah__item[data-region="reading"][data-state="resolved"]::after {
    content: attr(data-short);
  }
  .ws-ah__skeleton { width: 12px !important; }
}

/* The band's own geometry. Its HEIGHT is deliberately constant: the two frames
   are the same header, and a bar that changed height as it resolved — or as a
   panel opened — is the layout shift this design is built to avoid. */
@media (max-width: 560px) {
  .ws-answer-header { padding: 16px 14px; gap: 10px; }
  .ws-ah__panel { width: min(320px, calc(100vw - 32px)); }
}

@media (prefers-reduced-motion: reduce) {
  .ws-ah__skeleton { animation: none; }
}