:root {
  color-scheme: light;
  --ink: #0b0b0f;
  --muted: #6b6f76;
  --faint: #8b9097;
  --line: #e7e8ec;
  --line-strong: #d6d8de;
  --panel: #ffffff;
  --soft: #faf8f7;
  --soft-red: #fff7f7;
  --accent: #9c1522;
  --accent-rgb: 156, 21, 34;
  --accent-dark: #5a040a;
  --danger: #b42318;
  --warning: #9a4d00;
  --heading-brown: #a15f3f;
  --shadow: 0 20px 70px rgba(12, 15, 20, 0.08);
  --evidence-width: 390px;
  --media-dock-width: 640px;
  --chat-width: 1040px;
  --content-gutter: 28px;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 10%, rgba(var(--accent-rgb), 0.04), transparent 34%),
    linear-gradient(180deg, #fffdfc 0%, #faf7f5 58%, #f8f8f9 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  font-weight: 740;
}

button:hover {
  background: var(--accent-dark);
}

button:focus-visible,
select:focus-visible,
textarea:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(var(--accent-rgb), 0.18);
  outline-offset: 2px;
}

h1,
h2,
h3,
p,
figure {
  margin: 0;
}

.startup-loader {
  position: fixed;
  inset: 0;
  z-index: 12;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 35%, rgba(var(--accent-rgb), 0.045), transparent 32%),
    rgba(255, 253, 252, 0.94);
  backdrop-filter: blur(18px);
  transition: opacity 240ms ease, visibility 240ms ease;
}

.startup-loader-hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.startup-loader-box {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(420px, 92vw);
  color: var(--ink);
  text-align: center;
}

.startup-loader-box img {
  width: min(240px, 58vw);
  height: auto;
}

.startup-loader-box strong {
  display: block;
  font-size: 18px;
  letter-spacing: 0;
}

.startup-loader-box p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.startup-progress-wrap {
  display: grid;
  grid-template-columns: minmax(180px, 320px) auto;
  align-items: center;
  gap: 10px;
  width: min(380px, 82vw);
}

.startup-progress {
  position: relative;
  width: 100%;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.10);
}

.startup-progress span {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--startup-progress, 8%);
  border-radius: inherit;
  background: var(--accent);
  transition: width 220ms ease;
}

.startup-progress-label {
  min-width: 4ch;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: left;
}

input {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 0 0;
  height: 100vh;
  min-height: 0;
  background: #fff;
  transition: grid-template-columns 360ms ease;
}

.shell.has-sources {
  grid-template-columns: minmax(0, 1fr) 8px var(--evidence-width);
}

.workspace {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background:
    radial-gradient(circle at 50% 18%, rgba(var(--accent-rgb), 0.055), transparent 35%),
    linear-gradient(180deg, #fffdfc 0%, #fbf8f6 52%, #f8f8f9 100%);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  gap: 22px;
  padding: 14px var(--content-gutter);
  border-bottom: 1px solid transparent;
  transition: border-color 280ms ease, background 280ms ease;
}

.shell.has-conversation .topbar {
  border-bottom-color: var(--line);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px);
}

.topbar-brand {
  display: flex;
  align-items: center;
  min-width: 0;
}

.topbar-links a:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.45);
  outline-offset: 3px;
}

.brand-copy {
  min-width: 0;
}

.topbar-brand h1 {
  font-size: 21px;
  font-weight: 760;
  letter-spacing: 0;
  line-height: 1.08;
}

.topbar-brand h1 span {
  display: inline;
}

.brand-name-maroon {
  color: var(--accent-dark);
}

.brand-name-ai {
  color: var(--accent);
}

.brand-name-assistant {
  color: var(--ink);
}

.topbar-brand p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.25;
}

.topbar-links {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 8px 14px;
  margin-left: auto;
  font-size: 13px;
  font-weight: 720;
  line-height: 1.15;
}

.topbar-links a {
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  padding: 5px 0;
  text-decoration: none;
  white-space: nowrap;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}

.topbar-links a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}

.topbar-links a.topbar-link-logo {
  padding: 0;
}

.topbar-links a.topbar-link-logo:hover {
  text-decoration: none;
}

.topbar-link-logo img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 38px;
  display: block;
  object-fit: contain;
  opacity: 0.9;
  transition: opacity 160ms ease;
}

.topbar-link-logo:hover img {
  opacity: 1;
}

select {
  width: min(360px, 34vw);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 9px 10px;
}

.chat-surface {
  position: relative;
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.shell:not(.has-conversation) .chat-surface {
  display: block;
  flex: 0 0 auto;
  min-height: auto;
  overflow: visible;
}

.welcome {
  align-self: center;
  justify-self: center;
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(1540px, calc(100% - 40px));
  padding: 10px 0 28px;
  text-align: center;
  transition: opacity 260ms ease, transform 360ms ease, visibility 260ms ease;
}

.shell.has-conversation .welcome {
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-28px) scale(0.965);
}

.shell.welcome-removed .welcome {
  display: none;
}

.shell.conversation-starting .workspace {
  animation: workspaceSettle 540ms cubic-bezier(0.2, 0.85, 0.25, 1) both;
}

.welcome.welcome-exiting .assistant-logo {
  animation: logoFoldAway 500ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.welcome.welcome-exiting .assistant-tagline,
.welcome.welcome-exiting .welcome-copy,
.welcome.welcome-exiting .suggestions {
  animation: welcomeCopyAway 360ms ease both;
}

.assistant-logo {
  display: block;
  width: min(520px, 82vw);
  height: auto;
  opacity: 0;
  transform: scale(0.96);
  animation: imageSettle 620ms ease 180ms both;
}

.assistant-tagline {
  font-size: 22px;
  font-weight: 760;
  letter-spacing: 0;
  opacity: 0;
  transform: translateY(8px);
  animation: riseIn 540ms ease 240ms both;
}

.welcome-copy {
  display: grid;
  gap: 8px;
  opacity: 0;
  transform: translateY(8px);
  animation: riseIn 540ms ease 300ms both;
}

.welcome-copy p {
  color: var(--muted);
  font-size: 16px;
  font-weight: 650;
}

.suggestions {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 8px;
  width: min(1480px, calc(100vw - 64px));
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  padding: 3px 0 4px;
  scrollbar-width: none;
  opacity: 0;
  animation: fadeIn 520ms ease 520ms both;
}

.suggestions::-webkit-scrollbar {
  display: none;
}

.suggestions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  min-height: 32px;
  padding: 6px 11px;
  font-size: 11.5px;
  font-weight: 680;
  line-height: 1.2;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.suggestion-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2em;
  line-height: 1;
}

.bucket-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.1em;
  line-height: 1;
}

.bucket-icon svg {
  width: 14px;
  height: 14px;
}

.suggestion-label {
  display: inline-flex;
  align-items: center;
}

.suggestions button:nth-child(2) {
  animation-delay: 580ms;
}

.suggestions button:nth-child(3) {
  animation-delay: 640ms;
}

.suggestions button:nth-child(4) {
  animation-delay: 700ms;
}

.suggestions button:hover {
  border-color: var(--line-strong);
  background: #fff;
  transform: translateY(-1px);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.composer-prompt-tray {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 0 0 auto;
  width: min(var(--chat-width), calc(100% - 56px));
  min-height: 36px;
  max-height: 52px;
  margin: 0 auto 8px;
  opacity: 1;
  overflow: hidden;
  transform: translateY(0);
  transition: max-height 260ms cubic-bezier(0.2, 0.8, 0.2, 1), margin 260ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 220ms ease, transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.shell:not(.has-conversation) .composer-prompt-tray {
  display: none;
}

.composer-suggestions {
  flex: 0 1 auto;
  justify-content: center;
  width: auto;
  min-width: 0;
  max-width: none;
  max-height: 44px;
  padding-right: 46px;
  opacity: 1;
  animation: none;
  transition: max-height 300ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 240ms ease, transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1), padding 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.prompt-tray-toggle {
  position: absolute;
  right: 0;
  top: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--muted);
  padding: 0;
  box-shadow: 0 8px 22px rgba(12, 15, 20, 0.05);
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease, transform 160ms ease;
}

.prompt-tray-toggle::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 160ms ease;
}

.prompt-tray-toggle:hover {
  border-color: rgba(var(--accent-rgb), 0.22);
  background: #fff;
  color: var(--accent);
}

.shell.prompt-chips-hidden .composer-suggestions {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
}

.shell.prompt-chips-hidden .prompt-tray-toggle::after {
  transform: translateY(2px) rotate(225deg);
}

.shell.prompt-tray-paused .composer-prompt-tray {
  min-height: 0;
  max-height: 0;
  margin-bottom: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
}

.movie-dock {
  flex: 0 0 auto;
  width: min(var(--media-dock-width), calc(100% - 56px));
  margin: 0 auto 8px;
  position: relative;
  z-index: 1;
  animation: mediaTrayIn 220ms ease both;
}

.movie-dock.media-dock-resizing {
  animation: none;
  user-select: none;
}

.movie-dock[hidden] {
  display: none;
}

.messages {
  min-height: 0;
  overflow: auto;
  scroll-behavior: smooth;
  padding: 22px max(var(--content-gutter), calc((100% - var(--chat-width)) / 2)) 18px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 300ms ease, transform 300ms ease;
}

.shell:not(.has-conversation) .messages {
  display: none;
}

.shell.has-conversation .messages {
  opacity: 1;
  transform: translateY(0);
}

.message {
  max-width: min(var(--chat-width), 100%);
  border-radius: 8px;
  padding: 0;
  margin-bottom: 22px;
  line-height: 1.55;
  white-space: pre-wrap;
  animation: messageIn 300ms cubic-bezier(0.2, 0.85, 0.25, 1) both;
}

.message.assistant {
  width: min(var(--chat-width), 100%);
  border: 0;
  background: transparent;
  box-shadow: none;
  white-space: normal;
}

.message.user {
  width: fit-content;
  max-width: min(720px, 86%);
  margin-left: auto;
  border: 1px solid rgba(var(--accent-rgb), 0.12);
  border-radius: 8px;
  background: rgba(255, 247, 247, 0.72);
  padding: 10px 13px;
}

.message.pending {
  min-height: 32px;
}

.answer-content {
  display: grid;
  gap: 10px;
  font-size: 15px;
  line-height: 1.64;
  max-width: min(860px, 100%);
}

.answer-content p,
.answer-content ul,
.answer-content ol {
  margin: 0;
}

.answer-content ul,
.answer-content ol {
  padding-left: 22px;
}

.answer-content strong {
  font-weight: 780;
}

.answer-content a,
.citation-links a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* One shared look for every inline citation regardless of bucket (FAQ,
   MASALA, Instagram, Movie, YouTube) -- Auto/multi-select answers mix
   several of these in one response, so any per-class drift here is
   immediately visible in a way it never was in single-agent mode. */
.answer-content a.masala-inline-citation,
.faq-inline-citation,
.instagram-inline-citation,
.movie-inline-citation,
.youtube-inline-citation {
  color: var(--accent);
  font-size: inherit;
  font-weight: 780;
  text-decoration: none;
}

/* Short bracket forms (a number or a timestamp) contain an internal space
   or colon and should never line-break mid-citation; long title citations
   (Instagram, MASALA) are meant to wrap like ordinary text instead. */
.faq-inline-citation,
.movie-inline-citation,
.youtube-inline-citation {
  white-space: nowrap;
}

/* Sibling icon appended after an internal citation link (and inside a FAQ
   card's summary) when it also has a permanent external page. A separate
   <a>, not part of the citation's own click target, since anchors can't
   nest and this one opens a different site in a new tab. */
.citation-external-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  margin-left: 3px;
  color: var(--faint);
  vertical-align: -1px;
}

.citation-external-link:hover {
  color: var(--accent);
}

.citation-external-link svg {
  width: 100%;
  height: 100%;
}

/* Text variant of the same "open on FAQ Dashboard" link, used in the FAQ
   card summary (below the FAQ N: title) instead of the inline icon. Styled
   to match .movie-summary-time, the existing "small link-like control below
   the title" pattern. width: fit-content is load-bearing: .citation-title
   is a CSS grid, whose items stretch to the full row width by default, so
   without it the anchor's click target would span the entire card width
   instead of just the visible word. */
.citation-dashboard-link {
  display: block;
  width: fit-content;
  margin: 0 0 5px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.2;
  text-decoration: none;
}

.citation-dashboard-link:hover {
  color: #8f1111;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Thinking panel content -- see thinking.js renderThinkingBodyHTML. Plain
   text/rows, not a bubble, so it survives once generation starts. */
.thinking-status-line {
  color: var(--ink);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
}

.thinking-subquestions {
  margin-top: 5px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.45;
}

.thinking-bucket-row {
  display: flex;
  gap: 5px;
  margin-top: 7px;
}

.thinking-bucket-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  opacity: 0.45;
}

.thinking-bucket-dot-pending {
  animation: pulseDot 1.15s ease-in-out infinite;
}

.thinking-bucket-dot-ok {
  opacity: 1;
}

.thinking-bucket-dot-empty {
  opacity: 0.5;
}

.thinking-bucket-dot-failed {
  opacity: 1;
  border-color: var(--accent);
}

.thinking-bucket-dot-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
}

.thinking-bucket-dot-icon svg {
  width: 10px;
  height: 10px;
}

.thinking-found-line {
  margin-top: 7px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.45;
}

.thinking-reasoning {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}

.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.answer-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  table-layout: auto;
  font-size: 14px;
}

.answer-table th,
.answer-table td {
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}

.answer-table th {
  background: #f7f7f8;
  color: var(--ink);
  font-weight: 760;
}

.answer-table td {
  background: #fff;
}

.composer {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: end;
  flex: 0 0 auto;
  width: min(var(--chat-width), calc(100% - 56px));
  min-height: 48px;
  margin: 0 auto 8px;
  gap: 6px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 36px rgba(12, 15, 20, 0.08);
  padding: 6px;
  opacity: 0;
  transform: translateY(8px);
  animation: riseIn 520ms ease 420ms both;
}

.agent-toggle {
  position: relative;
  z-index: 22;
  order: 1;
  display: inline-flex;
  align-items: center;
  align-self: center;
  justify-self: start;
}

.agent-toggle-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  padding: 0 8px;
  font-size: 12px;
  font-weight: 720;
  white-space: nowrap;
}

.agent-toggle-button:hover {
  background: transparent;
  color: var(--ink);
}

.agent-toggle-button .agent-toggle-trigger-label {
  color: var(--accent);
}

.agent-toggle-button .bucket-icon {
  color: var(--accent);
}

.agent-toggle-button-multi {
  min-height: 44px;
  padding: 4px 9px;
}

.agent-toggle-trigger-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  height: 100%;
}

.agent-toggle-trigger-icons {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 15px;
}

.agent-toggle-trigger-icons .bucket-icon svg {
  width: 15px;
  height: 15px;
}

.agent-toggle-trigger-label-small {
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.agent-toggle-option {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.agent-toggle-button::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.agent-toggle.open .agent-toggle-button::after {
  transform: translateY(2px) rotate(225deg);
}

.agent-toggle-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 40;
  display: none;
  min-width: 156px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(12, 15, 20, 0.12);
  padding: 4px;
}

.agent-toggle.open .agent-toggle-menu {
  display: grid;
}

.agent-toggle-option {
  min-height: 32px;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  padding: 0 10px;
  text-align: left;
  font-size: 13px;
  font-weight: 680;
  white-space: nowrap;
}

.agent-toggle-option:hover,
.agent-toggle-option.active {
  background: var(--soft);
  color: var(--ink);
}

.agent-toggle-menu-divider {
  height: 1px;
  margin: 4px 2px;
  background: var(--line);
}

.agent-toggle-option[role="menuitemcheckbox"] {
  position: relative;
  padding-left: 30px;
}

.agent-toggle-option[role="menuitemcheckbox"]::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  border: 1.5px solid var(--line-strong);
  border-radius: 3px;
  background: #fff;
}

.agent-toggle-option[role="menuitemcheckbox"].active::before {
  background: var(--accent);
  border-color: var(--accent);
}

.agent-toggle-option[role="menuitemcheckbox"].active::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 4px;
  height: 7px;
  transform: translateY(-65%) rotate(45deg);
  border-right: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
}

#messageInput {
  order: 2;
  min-height: 36px;
  max-height: min(31vh, 374px);
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  padding: 7px 8px;
  font-size: 15px;
  line-height: 1.45;
  overflow: hidden;
  resize: none;
}

#messageInput:focus {
  outline: none;
}

.composer:focus-within {
  border-color: rgba(var(--accent-rgb), 0.38);
  box-shadow: 0 18px 55px rgba(var(--accent-rgb), 0.12);
}

.agent-toggle.agent-switched .agent-toggle-button {
  animation: selectorSwitch 340ms ease both;
}

.composer button {
  align-self: center;
}

.composer > button[type="submit"] {
  order: 4;
  min-width: 58px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 7px;
  font-size: 13px;
}

.footer-warning {
  width: min(var(--chat-width), calc(100% - 56px));
  margin: 0 auto 12px;
  color: var(--danger);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}

.resize-handle {
  position: relative;
  z-index: 3;
  display: none;
  cursor: col-resize;
  background: #fff;
}

.shell.has-sources .resize-handle {
  display: block;
}

.resize-handle::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 3px;
  width: 2px;
  background: transparent;
}

.resize-handle:hover::before,
.resize-handle.active::before {
  background: var(--accent);
}

body.resizing {
  cursor: col-resize;
  user-select: none;
}

.evidence {
  min-width: 0;
  overflow: auto;
  border-left: 1px solid var(--line);
  background: #fbfbfc;
  padding: 18px 16px;
  opacity: 0;
  transform: translateX(18px);
  pointer-events: none;
  transition: opacity 300ms ease, transform 360ms cubic-bezier(0.2, 0.85, 0.25, 1);
}

.shell.has-sources .evidence {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.shell.sources-entering .evidence {
  animation: sourcePanelPop 520ms cubic-bezier(0.2, 0.85, 0.25, 1) both;
}

.shell.sources-exiting .evidence {
  animation: sourcePanelOut 300ms ease both;
}

.panel h2 {
  font-size: 19px;
  font-weight: 780;
}

.panel-kicker {
  margin: 3px 0 14px;
  color: var(--muted);
  font-size: 13px;
}

.citation-group {
  margin-bottom: 16px;
}

.citation-group:last-child {
  margin-bottom: 0;
}

.citation-group-heading {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 720;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.citation {
  border: 1px solid rgba(214, 216, 222, 0.78);
  border-radius: 8px;
  margin-bottom: 8px;
  background: #fff;
  overflow: hidden;
  transform-origin: top right;
}

.citation.citation-pop {
  animation: citationPop 440ms cubic-bezier(0.2, 0.85, 0.25, 1) var(--citation-stagger, 0ms) both;
}

.citation.source-target-pulse {
  animation: sourceTargetPulse 2s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes sourceTargetPulse {
  0% {
    transform: translateY(0);
    border-color: rgba(214, 216, 222, 0.78);
    box-shadow: 0 0 0 0 rgba(107, 63, 42, 0);
  }
  20% {
    transform: translateY(-3px);
    border-color: var(--heading-brown);
    box-shadow: 0 0 0 4px rgba(107, 63, 42, 0.16);
  }
  55% {
    transform: translateY(0);
    border-color: var(--heading-brown);
    box-shadow: 0 0 0 3px rgba(107, 63, 42, 0.12);
  }
  100% {
    transform: translateY(0);
    border-color: rgba(214, 216, 222, 0.78);
    box-shadow: 0 0 0 0 rgba(107, 63, 42, 0);
  }
}

.citation summary {
  position: relative;
  cursor: pointer;
  padding: 10px 40px 26px 11px;
  list-style: none;
}

.citation summary::-webkit-details-marker {
  display: none;
}

.citation-title {
  display: grid;
  gap: 4px;
}

.citation-corner-icon {
  position: absolute;
  right: 9px;
  bottom: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 22px;
  line-height: 1;
  pointer-events: none;
}

.citation-corner-icon svg {
  width: 24px;
  height: 24px;
}

.citation-label {
  color: var(--faint);
  font-size: 11px;
  font-weight: 720;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.citation-topic {
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
}

.faq-source-title {
  color: var(--heading-brown);
  font-size: 13px;
  font-weight: 680;
  line-height: 1.35;
}

.faq-source-number {
  color: var(--ink);
  margin-top: 1px;
}

.masala-chunk-detail {
  color: var(--heading-brown);
  font-size: 13px;
  font-weight: 680;
  line-height: 1.35;
}

.masala-paper-title {
  color: var(--ink);
  font-size: 12px;
  font-weight: 640;
  line-height: 1.4;
}

.masala-paper-link-row {
  margin-top: 12px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
}

.masala-paper-link {
  color: var(--accent);
  font-size: 12px;
  font-weight: 720;
}

.youtube-source-video {
  color: var(--heading-brown);
  font-size: 13px;
  font-weight: 720;
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: none;
}

.instagram-source-title {
  color: var(--heading-brown);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
}

.instagram-source-date {
  color: var(--ink);
  font-size: 12px;
  font-weight: 680;
  line-height: 1.2;
}

.movie-chunk-title {
  color: var(--heading-brown);
  font-size: 13px;
  font-weight: 680;
  line-height: 1.35;
}

.movie-youtube-link-row {
  margin-top: 12px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
}

.citation-body {
  border-top: 1px solid var(--line);
  padding: 11px;
}

.citation[open] .citation-body {
  animation: citationBodyReveal 260ms ease both;
}

.citation-body h3 {
  margin: 0 0 6px;
  color: var(--faint);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.citation-body p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 12px;
}

.citation-meta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.instagram-player {
  margin: 0 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.instagram-player-frame {
  width: 100%;
  aspect-ratio: 9 / 14;
  max-height: min(620px, 72vh);
  background: #fff;
  overflow: hidden;
}

.instagram-player-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.instagram-player-link {
  border-top: 1px solid var(--line);
  padding: 10px;
  font-size: 13px;
  font-weight: 650;
}

.instagram-player-fallback {
  padding: 0;
}

.movie-player {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(12, 15, 20, 0.045);
  overflow: hidden;
}

/* Flags a collapse the user didn't directly click on -- see
   players.js pulseCollapse(). Re-triggerable: the class is removed on
   animationend so a later collapse of the same element can replay it. */
.media-dock-pulse {
  animation: mediaDockCollapsePulse 1300ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.movie-player-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  border-bottom: 1px solid var(--line);
  padding: 5px 9px;
  color: var(--ink);
  cursor: pointer;
  font-size: 13px;
  font-weight: 680;
  list-style: none;
}

.movie-player-summary::-webkit-details-marker {
  display: none;
}

.movie-player-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.movie-player-chevron {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  color: var(--muted);
  transform: rotate(45deg);
  transition: transform 160ms ease;
}

.movie-player[open] .movie-player-chevron {
  transform: translateY(2px) rotate(225deg);
}

.movie-player-resize {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--faint);
  cursor: nwse-resize;
  touch-action: none;
}

.movie-player-resize:hover,
.movie-player-resize:focus-visible {
  background: var(--soft);
  color: var(--ink);
}

.movie-player-resize svg {
  width: 14px;
  height: 14px;
  pointer-events: none;
}

.movie-player:not([open]) .movie-player-summary {
  border-bottom: 0;
}

.movie-player-language {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  color: var(--faint);
  font-size: 9px;
  font-weight: 720;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: default;
}

.movie-language-select {
  max-width: 104px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  padding: 3px 6px;
  font-size: 11px;
}

.movie-player-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #111;
}

.movie-player-frame iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.media-dock-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 9px;
  border-bottom: 1px solid var(--line);
  background: var(--soft);
  overflow-x: auto;
}

.media-dock-tab {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 640;
  cursor: pointer;
  white-space: nowrap;
}

.media-dock-tab:hover {
  background: var(--soft);
  color: var(--ink);
}

.media-dock-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.media-dock-tab.active:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: #fff;
}

.media-dock-panel[hidden] {
  display: none;
}

.media-dock .movie-player-language {
  padding: 6px 9px 0;
}

.movie-source-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.movie-source-time {
  display: block;
  margin-bottom: 5px;
  border: 0;
  background: transparent;
  color: var(--accent);
  padding: 0;
  font-size: 13px;
  font-weight: 760;
  text-align: left;
}

.movie-summary-time {
  appearance: none;
  display: block;
  width: fit-content;
  margin: 0 0 5px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--accent);
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 760;
  line-height: 1.2;
  text-align: left;
}

.movie-summary-time:hover {
  border: 0;
  background: transparent;
  color: #8f1111;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.movie-play-button,
.movie-timestamp-button {
  border: 1px solid rgba(185, 28, 28, 0.16);
  border-radius: 999px;
  background: #fff;
  color: var(--accent);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
}

.movie-play-button {
  background: #fff;
}

.movie-play-button:hover,
.movie-timestamp-button:hover {
  border-color: rgba(185, 28, 28, 0.24);
  background: #fff;
  color: #8f1111;
}

.movie-source-link-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px;
  align-items: baseline;
  margin-bottom: 12px;
  font-size: 13px;
}

.movie-source-link-row span {
  color: var(--faint);
  font-size: 10px;
  font-weight: 720;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.movie-source-link {
  color: var(--accent);
  font-size: 12px;
  font-weight: 720;
}

.source-section {
  margin-bottom: 10px;
}

.source-section summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: 0 18px 0 0;
}

.source-section summary::-webkit-details-marker {
  display: none;
}

.source-section summary::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 2px;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
}

.source-section[open] summary::after {
  top: 8px;
  transform: rotate(225deg);
}

.source-section summary span {
  display: block;
  margin-bottom: 5px;
  color: var(--faint);
  font-size: 10px;
  font-weight: 720;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.source-preview {
  display: -webkit-box;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.source-section[data-source-lines="2"] .source-preview { -webkit-line-clamp: 2; }
.source-section[data-source-lines="1"] .source-preview { -webkit-line-clamp: 1; }
.source-section[data-source-lines="5"] .source-preview { -webkit-line-clamp: 5; }
.source-section[data-source-lines="6"] .source-preview { -webkit-line-clamp: 6; }
.source-section[data-source-lines="8"] .source-preview { -webkit-line-clamp: 8; }

.source-section[open] .source-preview {
  display: none;
}

.source-full {
  display: none;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.source-section[open] .source-full {
  display: block;
}

.citation-links {
  margin: 0 0 12px;
  padding-left: 19px;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.citation-metrics {
  width: 100%;
  margin-top: 8px;
  border-collapse: collapse;
  table-layout: fixed;
}

.citation-metrics-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  margin: 5px 0 0;
  padding: 6px 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.retrieval-details {
  width: fit-content;
  max-width: 100%;
  margin: 4px 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  overflow: visible;
}

.retrieval-details[open] {
  width: 100%;
  border-radius: 8px;
}

.retrieval-details summary {
  cursor: pointer;
  padding: 4px 8px;
  color: var(--faint);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  list-style: none;
  text-transform: uppercase;
}

.retrieval-details summary::-webkit-details-marker {
  display: none;
}

.citation-metrics td {
  border: 1px solid var(--line);
  padding: 7px;
  vertical-align: top;
  background: #fafafa;
}

.citation-metrics td:empty {
  border: 0;
  background: transparent;
}

.citation-metrics span,
.stat-card span,
.metric-card span {
  display: block;
  color: var(--faint);
  font-size: 10px;
  font-weight: 720;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.citation-metrics strong,
.stat-card strong,
.metric-card strong {
  display: block;
  margin-top: 3px;
  overflow-wrap: anywhere;
}

.response-tools,
.model-stats,
.thinking-inline {
  margin-top: 14px;
}

/* Answer footer (Backlog A-23/A-21): actions on the left, Sources + stats on the right. */
.response-tools {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 7px;
}

.response-actions,
.response-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.response-meta {
  margin-left: auto;
  gap: 7px;
}

.ui-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.response-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 30px;
  height: 30px;
  padding: 0 7px;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.response-action:hover {
  background: rgba(var(--accent-rgb), 0.07);
  color: var(--accent);
}

.response-action[aria-pressed="true"] {
  color: var(--accent);
}

.response-action[aria-pressed="true"] .ui-icon {
  fill: rgba(var(--accent-rgb), 0.16);
}

.response-action-label {
  font-size: 12px;
  font-weight: 650;
}

.response-status {
  display: inline-flex;
  align-items: center;
  height: 24px;
  margin-right: 2px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.response-retry {
  color: var(--accent);
}

.response-action.is-done {
  color: var(--accent);
}

.response-action-note {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.response-action-note:empty {
  display: none;
}

.feedback-panel {
  display: grid;
  gap: 6px;
  max-width: 560px;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  animation: panelIn 150ms ease both;
}

.feedback-panel textarea {
  width: 100%;
  min-height: 52px;
  max-height: 160px;
  resize: none;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  padding: 7px 9px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
}

.feedback-panel-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.feedback-counter {
  margin-right: auto;
  color: var(--faint);
  font-size: 12px;
}

.feedback-skip {
  background: transparent;
  color: var(--muted);
  padding: 5px 8px;
  font-size: 13px;
  font-weight: 650;
}

.feedback-skip:hover {
  background: var(--soft);
  color: var(--ink);
}

.feedback-send {
  padding: 5px 12px;
  font-size: 13px;
}

.feedback-thanks {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
}

/* Suggested follow-ups (Backlog A-20): stacked text rows, deliberately unlike
   the rounded starter chips, inside the answer they belong to. */
.followups {
  display: grid;
  justify-items: start;
  max-width: min(620px, 100%);
  margin-top: 14px;
}

.followups.is-ready {
  animation: panelIn 150ms ease both;
}

.followups-label {
  margin: 0 0 4px;
  color: var(--faint);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.followup {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  padding: 7px 8px;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  font-weight: 560;
  text-align: left;
}

.followup:last-child {
  border-bottom: 0;
}

.followup:hover,
.followup:focus-visible {
  border-radius: 7px;
  background: rgba(var(--accent-rgb), 0.06);
  color: var(--accent);
}

.followup-icon {
  display: inline-flex;
  color: var(--faint);
}

.followup:hover .followup-icon {
  color: var(--accent);
}

.followup-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.followup-skeleton {
  display: block;
  height: 14px;
  margin: 11px 8px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--line) 0%, #f4f4f6 50%, var(--line) 100%);
  background-size: 200% 100%;
  animation: followupShimmer 1.2s ease-in-out infinite;
}

@keyframes followupShimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

@keyframes panelIn {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: none; }
}

.request-error {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--danger);
  font-size: 14px;
  line-height: 1.5;
}

.request-error-icon {
  display: inline-flex;
}

.composer > button[type="submit"].is-stop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  background: #fff;
  color: var(--accent);
}

.composer > button[type="submit"].is-stop:hover {
  background: rgba(var(--accent-rgb), 0.06);
}

.composer > button[type="submit"].is-stop .ui-icon {
  width: 12px;
  height: 12px;
}

.thinking-inline {
  margin-top: 0;
  margin-bottom: 12px;
  border: 0;
  background: transparent;
  overflow: visible;
}

.thinking-inline[hidden] {
  display: none;
}

.thinking-inline summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  width: fit-content;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  padding: 5px 9px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  list-style: none;
}

.thinking-inline summary::-webkit-details-marker {
  display: none;
}

.thinking-inline summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.thinking-inline[open] summary::after {
  transform: rotate(225deg);
}

.thinking-inline.thinking-active summary {
  color: var(--accent-dark);
}

.model-stats {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin-top: 0;
  margin-left: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  box-shadow: none;
  overflow: visible;
}

.sources-chip {
  min-height: auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--faint);
  padding: 5px 9px;
  font-size: 9px;
  font-weight: 760;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.sources-chip:hover {
  background: var(--soft);
  color: var(--ink);
}

.sources-chip.sources-chip-active {
  animation: sourceChipRecall 420ms ease both;
}

.citations.citations-entering {
  animation: citationsFadeIn 380ms ease both;
}

.citations.citations-recalled {
  animation: citationsRecall 520ms cubic-bezier(0.2, 0.85, 0.25, 1) both;
}

.citations.citations-clearing {
  animation: citationsFadeOut 260ms ease both;
}

.model-stats summary span {
  color: var(--faint);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.model-stats summary {
  display: block;
  cursor: pointer;
  padding: 5px 9px;
  color: var(--faint);
  font-size: 9px;
  font-weight: 760;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.thinking-inline-text {
  max-height: 150px;
  overflow: auto;
  margin-top: 8px;
  border-left: 2px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
  padding: 4px 0 4px 10px;
  white-space: pre-line;
}

.stats-grid {
  position: absolute;
  right: 0;
  bottom: 28px;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  min-width: 230px;
  max-width: min(280px, calc(100vw - 40px));
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(12, 15, 20, 0.1);
}

.stat-card,
.metric-card {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  font-size: 10px;
  line-height: 1.25;
}

.citation-metrics-grid .metric-card {
  font-size: 9px;
}

.citation-metrics-grid .metric-card span,
.citation-metrics-grid .metric-card strong {
  font-size: 9px;
}

.message-warning {
  display: none;
}

.empty {
  color: var(--muted);
}

.hidden {
  display: none;
}

[hidden] {
  display: none !important;
}

.warning {
  color: var(--warning);
}

.error {
  color: var(--danger);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes mediaTrayIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes startupProgress {
  0% {
    transform: translateX(-110%);
  }

  50% {
    transform: translateX(80%);
  }

  100% {
    transform: translateX(230%);
  }
}

@keyframes imageSettle {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes messageIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes workspaceSettle {
  0% {
    transform: translateY(8px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes logoFoldAway {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
  70% {
    opacity: 0.18;
    transform: translateY(-20px) scale(0.94);
    filter: blur(1px);
  }
  100% {
    opacity: 0;
    transform: translateY(-28px) scale(0.9);
    filter: blur(2px);
  }
}

@keyframes welcomeCopyAway {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@keyframes selectorSwitch {
  0% {
    background: transparent;
  }
  45% {
    background: var(--soft-red);
    transform: translateY(-1px);
  }
  100% {
    background: transparent;
    transform: translateY(0);
  }
}

@keyframes sourcePanelPop {
  from {
    opacity: 0;
    transform: translateX(22px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes sourcePanelOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(12px);
  }
}

@keyframes citationsFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes citationsFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.45;
  }
}

@keyframes citationsRecall {
  0% {
    opacity: 0.58;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes citationPop {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes citationBodyReveal {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes sourceChipRecall {
  0% {
    border-color: var(--line);
    color: var(--faint);
    transform: translateY(0);
  }
  44% {
    border-color: rgba(var(--accent-rgb), 0.36);
    color: var(--accent-dark);
    background: var(--soft-red);
    transform: translateY(-1px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes mediaDockCollapsePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.32);
    transform: scale(1);
  }
  28% {
    box-shadow: 0 0 0 10px rgba(var(--accent-rgb), 0);
    transform: scale(1.008);
  }
  52% {
    box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.2);
    transform: scale(1);
  }
  80% {
    box-shadow: 0 0 0 7px rgba(var(--accent-rgb), 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0);
    transform: scale(1);
  }
}

@keyframes pulseDot {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes thinkingGlow {
  0%,
  100% {
    opacity: 0.62;
  }
  50% {
    opacity: 1;
  }
}

@media (max-width: 980px) {
  :root {
    --content-gutter: 14px;
  }

  html,
  body {
    height: auto;
    overflow: auto;
  }

  .shell,
  .shell.has-sources {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 100vh;
  }

  .workspace {
    min-height: 100vh;
  }

  .shell.has-conversation.has-sources .workspace {
    min-height: auto;
  }

  .topbar {
    align-items: center;
    flex-direction: row;
    gap: 10px;
    padding: 12px 14px;
  }

  .topbar-brand {
    flex: 1 1 auto;
    gap: 10px;
    min-width: 0;
  }

  .topbar-brand h1 {
    font-size: clamp(16px, 4.2vw, 19px);
  }

  .topbar-brand h1 span {
    display: block;
  }

  .topbar-brand p {
    display: none;
  }

  .topbar-links {
    flex: 0 1 auto;
    justify-content: flex-end;
    align-items: center;
    gap: 5px 9px;
    margin-left: 0;
    max-width: 38vw;
    font-size: clamp(11px, 2.8vw, 12px);
    line-height: 1.1;
  }

  .topbar-links a {
    padding: 3px 0;
  }

  .brand-copy {
    min-width: 0;
  }

  select {
    width: 100%;
  }

  .chat-surface {
    flex: 0 0 auto;
    overflow: visible;
  }

  .welcome {
    width: min(100% - 28px, 640px);
    gap: 12px;
    padding: 6px 0 20px;
  }

  .assistant-logo {
    width: min(400px, 88vw);
    border-radius: 12px;
  }

  .welcome-copy p {
    font-size: 14px;
  }

  .suggestions {
    gap: 6px;
    justify-content: flex-start;
    width: min(520px, 100%);
    max-width: calc(100vw - 28px);
    padding-bottom: 2px;
  }

  .suggestions button {
    min-height: 32px;
    padding: 6px 8px;
    font-size: 11px;
  }

  .messages {
    min-height: 48vh;
    padding: 18px 14px;
  }

  .shell.has-sources .messages {
    min-height: 0;
    padding-bottom: 8px;
  }

  .shell.has-sources .message:last-child {
    margin-bottom: 10px;
  }

  .composer {
    width: calc(100% - 28px);
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: end;
    margin-bottom: 10px;
    gap: 5px;
    padding: 5px;
  }

  .composer-prompt-tray {
    width: calc(100% - 28px);
    gap: 5px;
  }

  .agent-toggle {
    order: 2;
  }

  .agent-toggle-button {
    min-height: 30px;
    padding: 0 6px;
    font-size: 11px;
  }

  .composer > button[type="submit"] {
    order: 4;
    min-width: 50px;
    min-height: 34px;
    padding: 0 9px;
  }

  #messageInput {
    order: 1;
    grid-column: 1 / -1;
    max-height: min(28vh, 250px);
    min-height: 36px;
  }

  .footer-warning {
    width: calc(100% - 28px);
    margin-bottom: 10px;
    font-size: 11px;
  }

  .resize-handle {
    display: none !important;
  }

  .evidence {
    display: none;
    border-top: 1px solid var(--line);
    border-left: 0;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    padding: 14px 14px 18px;
  }

  .shell.has-sources .evidence {
    display: block;
  }

  .answer-table {
    min-width: 560px;
  }

  .model-stats {
    margin-left: 0;
  }

  .stats-grid {
    right: auto;
    left: 0;
  }
}

@media (max-width: 560px) {
  .followup-text {
    white-space: normal;
  }


  .topbar {
    align-items: flex-start;
    gap: 8px;
  }

  .topbar-brand {
    align-items: flex-start;
    gap: 8px;
    max-width: calc(100% - 110px);
  }

  .topbar-brand h1 {
    font-size: 15px;
    line-height: 1.15;
  }

  .topbar-links {
    flex: 0 0 auto;
    max-width: 100px;
    gap: 6px;
  }

  .topbar-link-logo img {
    max-height: 22px;
  }

  .suggestions {
    width: min(100%, 100%);
  }

  .message.user {
    max-width: 92%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}