/* ============================================================================
   app.css — shell, sidebar, header, feed, composer, menus.
   Every metric traced to UI-SPEC.md §2.1 / §6–§11.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box }
html, body { height: 100% }
body {
  margin: 0;
  background: hsl(var(--bg-100));
  color: hsl(var(--text-100));
  font-family: var(--font-ui);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button, input, textarea { font: inherit; color: inherit }
a { color: inherit; text-decoration: none }

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

[hidden] { display: none !important }

svg.icon { width: 16px; height: 16px; display: block; flex: none }
/* hydrate() leaves each glyph inside its <span data-icon> host */
span:has(> svg.icon) { display: inline-flex; align-items: center; flex: none }
svg.icon[data-size="20"] { width: 20px; height: 20px }
svg.icon[data-size="14"] { width: 14px; height: 14px }
svg.icon[data-size="24"] { width: 24px; height: 24px }

/* ============================ CDS button ================================= */
/* spec §8 — hover fill is a child layer, never `background` on the button.  */
.btn {
  position: relative; isolation: isolate;
  display: inline-flex; flex: none; align-items: center; justify-content: center;
  gap: .375rem; white-space: nowrap; user-select: none;
  cursor: var(--cds-cursor-interactive);
  border: 0; background: transparent; outline: none;
  border-radius: var(--cds-radius);
  height: var(--cds-h-control);
  font-family: var(--font-ui); font-size: 14px; font-weight: var(--cds-font-weight-medium);
  color: hsl(var(--text-100));
  padding: 0 .5rem;
  transition: box-shadow var(--cds-duration-fast) linear;
}
.btn:disabled:not([aria-busy]) { opacity: .5; pointer-events: none }
.btn:focus-visible { box-shadow: 0 0 0 2px hsl(var(--accent-100)) }
.btn > .fill {
  position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: transparent;
  transition: background-color var(--cds-duration-fast) linear, transform 120ms var(--cds-ease-out);
}
.btn:hover > .fill,
.btn[aria-expanded="true"] > .fill { background: var(--cds-fill-ghost-hover) }
.btn:active > .fill { transform: scale(.96) }           /* cds-btn-squish */
.btn > .label { display: inline-flex; min-width: 0; align-items: center; gap: .25rem }
.btn.icon-only { aspect-ratio: 1; width: var(--cds-h-control); padding: 0 }
.btn.muted { color: hsl(var(--text-300)) }
.btn.secondary > .fill { background: var(--cds-fill-secondary); box-shadow: var(--cds-shadow-field) }
.btn.secondary:hover > .fill { background: var(--cds-alpha-3) }
.btn.brand { color: hsl(var(--always-white)) }
.btn.brand > .fill { inset: .5px; background: hsl(var(--accent-brand)) }
.btn.brand:hover > .fill { background: hsl(var(--brand-000)) }

/* ============================ shell ====================================== */
.dframe-root { display: flex; height: 100dvh; overflow: hidden }

.dframe-content { flex: 1; min-width: 0; display: flex; padding-left: 8px }
.dframe-pane {
  position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column;
}

/* ============================ sidebar ==================================== */
.sidebar {
  width: 288px; flex: 0 0 288px;
  /* Black, like the page. Only the panel behind them — every row, chip and
     hover state above it keeps its own grey, so the sidebar still reads as
     layered rather than flat. */
  background: hsl(var(--bg-100));
  border-right: .5px solid var(--cds-hairline);
  display: flex; flex-direction: column;
  font-size: 14px; line-height: 21px;
  overflow: hidden;
  transition: width 200ms var(--cds-ease-snap), flex-basis 200ms var(--cds-ease-snap),
              opacity 120ms linear;
}
/* min-width:0 is what actually lets the flex item shrink past its content */
body[data-sidebar="collapsed"] .sidebar {
  width: 0; flex-basis: 0; min-width: 0; opacity: 0; border-right-width: 0;
}
body[data-sidebar="collapsed"] .header-collapsed-toggle { display: inline-flex }
.header-collapsed-toggle { display: none }

/* children keep their full width while the rail collapses, so nothing reflows */
.sidebar > * { min-width: 288px }
.sidebar-inner { width: 288px; display: flex; flex-direction: column; height: 100% }

.sidebar-top { display: flex; align-items: center; gap: 4px; padding: 12px 12px 8px 16px }
.wordmark { height: 20px; color: hsl(var(--text-100)); flex: 1; display: flex; align-items: center }
.wordmark svg { height: 20px; width: auto }

.sidebar-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 8px 8px }
.sidebar-scroll::-webkit-scrollbar { width: 8px }
.sidebar-scroll::-webkit-scrollbar-thumb { background: var(--cds-alpha-3); border-radius: 8px }

/* segmented tabs (Home | Code) */
.seg {
  position: relative; display: inline-flex; width: fit-content; flex: none; align-items: stretch;
  height: var(--cds-h-control); border-radius: var(--cds-radius);
  background: var(--cds-segmented-control-track); padding: 1px;
}
.seg-thumb-track { pointer-events: none; position: absolute; inset: 0; overflow: clip; border-radius: var(--cds-radius) }
.seg-thumb {
  position: absolute; left: 0; top: 1px; bottom: 1px; transform-origin: left;
  border-radius: calc(var(--cds-radius) - 1px);
  background: var(--cds-segmented-control-thumb);
  box-shadow: inset 0 0 0 1px var(--cds-border), 0 1px 2px 0 rgb(0 0 0 / .05);
  transition: transform var(--cds-duration-base) var(--cds-ease-snap), width var(--cds-duration-base) var(--cds-ease-snap);
}
@media (prefers-reduced-motion: reduce) { .seg-thumb { transition: none } }
.seg-item {
  position: relative; z-index: 1; display: inline-flex; height: 100%; align-items: center;
  justify-content: center; gap: .375rem; user-select: none; border: 0; background: transparent;
  outline: none; border-radius: calc(var(--cds-radius) - 2px);
  font-size: 14px; color: hsl(var(--text-500)); padding: 0 .5rem;
  cursor: var(--cds-cursor-interactive);
  transition: color var(--cds-duration-fast) linear;
}
.seg-item:hover, .seg-item[aria-checked="true"] { color: hsl(var(--text-100)) }
.seg-item .seg-label { font-size: 12px }
.sidebar-seg { margin: 4px 8px 8px; width: calc(100% - 16px) }
.sidebar-seg .seg-item { flex: 1 }

/* nav + recents rows share one row shape (spec §6: h32 / r8 / gap8 / px2) */
.row {
  position: relative; display: flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 8px; border-radius: 8px;
  color: hsl(var(--text-200)); cursor: var(--cds-cursor-interactive);
  border: 0; background: transparent; width: 100%; text-align: left;
  font-size: 14px; line-height: 21px;
  transition: background-color var(--cds-duration-fast) linear, color var(--cds-duration-fast) linear;
}
.row:hover { background: var(--cds-fill-ghost-hover); color: hsl(var(--text-100)) }
.row[aria-current="page"] { background: var(--cds-fill-secondary); color: hsl(var(--text-100)) }
.row .row-icon { color: hsl(var(--text-300)); flex: none }
.row .row-label { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap }
.row .row-kbd { color: hsl(var(--text-500)); font-size: 12px; opacity: 0; transition: opacity 150ms }
.row:hover .row-kbd { opacity: 1 }

/* recents: fade-mask truncation + hover overflow button */
.recents-head {
  display: flex; align-items: center; gap: 4px;
  padding: 0 8px 0 8px; height: 32px; margin-top: 12px;
  color: hsl(var(--text-500)); font-size: 12px;
}
.recents-head .grow { flex: 1 }
.recents-head .head-btn { opacity: 0; transition: opacity 150ms; color: hsl(var(--text-500)) }
.recents-head:hover .head-btn { opacity: 1 }
.recents-head .head-btn.btn { height: 24px; width: 24px }

.recent-row .row-label {
  position: relative;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
}
.recent-row .more {
  position: absolute; right: 4px; opacity: 0; transition: opacity 150ms;
  height: 24px; width: 24px; border-radius: 6px;
}
.recent-row:hover .more, .recent-row:focus-within .more { opacity: 1 }
@media (pointer: coarse) { .recent-row .more, .recents-head .head-btn { opacity: 1 } }

.sidebar-foot { padding: 8px; display: flex; flex-direction: column; gap: 2px }
.divider { height: 1px; background: var(--cds-hairline); margin: 6px 8px }
.chip {
  display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 999px;
  font-size: 11px; color: hsl(var(--text-300));
  border: .5px solid var(--cds-hairline-strong); background: var(--cds-alpha-2);
}
.chip svg.icon { width: 11px; height: 11px; margin-right: 3px; opacity: .8 }
.avatar {
  width: 22px; height: 22px; border-radius: 999px; flex: none;
  display: grid; place-items: center; font-size: 11px; font-weight: 600;
  background: hsl(var(--accent-brand)); color: #fff;
}
.profile-row .sub { color: hsl(var(--text-500)); font-size: 12px }

/* ============================ header ===================================== */
.dframe-header {
  position: absolute; inset-inline: 0; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 12px; height: 48px;
  padding: 0 12px 0 16px;
}
.header-scrim {
  pointer-events: none; position: absolute; inset: 0; bottom: -24px; z-index: -1;
  background: linear-gradient(to bottom, hsl(var(--bg-100)) 66.67%, hsl(var(--bg-100) / 0));
}
.header-title { display: flex; min-width: 0; align-items: center; margin-left: -4px }
.header-title .title-btn {
  min-width: 0; cursor: text; font-weight: 600; font-size: 14px; padding: 0 .5rem;
}
.header-title .title-btn .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block }
/* the caret sits next to the title at all times (screenshot 01), dimmed until
   the header is hovered */
.header-title .title-caret { margin-left: -8px; opacity: .6; transition: opacity 150ms }
.header-title:hover .title-caret, .header-title:focus-within .title-caret,
.header-title .title-caret[aria-expanded="true"] { opacity: 1 }
.header-drag { flex: 1; min-width: 0; height: 100% }
.header-actions { display: flex; align-items: center; gap: 8px; flex: none }

/* ============================ scroll region ============================== */
.pane-scroll {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  scrollbar-gutter: stable; margin-top: 48px; padding-top: 8px;
  display: flex; flex-direction: column;
}
.pane-scroll::-webkit-scrollbar { width: 10px }
.pane-scroll::-webkit-scrollbar-thumb { background: var(--cds-alpha-3); border-radius: 10px }
.pane-scroll::-webkit-scrollbar-thumb:hover { background: var(--cds-alpha-7) }

.col-outer { margin: 0 auto; width: 100%; max-width: 50.5rem; padding: 0 1.25rem; flex: 1;
             display: flex; flex-direction: column }
.col-feed  { margin: 0 auto; width: 100%; max-width: 48rem; padding: 4px 1rem 0; flex: 1;
             display: flex; flex-direction: column }

/* ============================ messages =================================== */
.msg-user { margin-top: var(--msg-gap); margin-bottom: 4px; display: flex; flex-direction: column;
            align-items: flex-end; gap: 4px }
.bubble {
  position: relative; display: inline-flex; flex-direction: column; gap: 8px;
  background: hsl(var(--bg-000));
  border-radius: .75rem;
  padding: var(--msg-bubble-py) var(--msg-bubble-px);
  color: hsl(var(--text-100));
  max-width: min(85%, 75ch);
  overflow-wrap: break-word;
  font-family: var(--font-user-message); font-size: 16px; line-height: 22.4px;
}
.bubble p { margin: 0; white-space: pre-wrap; overflow-wrap: break-word }

.action-rail {
  display: flex; justify-content: flex-start; align-items: center;
  opacity: 0; transition: opacity 150ms;
  color: hsl(var(--text-300));
}
.msg-user:hover .action-rail, .msg-user:focus-within .action-rail,
.msg-assistant:hover .action-rail, .msg-assistant:focus-within .action-rail { opacity: 1 }
@media (pointer: coarse) { .action-rail { opacity: 1 } }
.action-rail .stamp { color: hsl(var(--text-500)); font-size: 12px; margin-right: 8px }
.action-rail .btn { height: 28px; width: 28px; border-radius: 6px }
.action-rail .btn.copy .label { position: relative; width: 16px; height: 16px }
.action-rail .btn.copy .ic-copy,
.action-rail .btn.copy .ic-check {
  position: absolute; inset: 0; transition: opacity 200ms, transform 200ms;
}
.action-rail .btn.copy .ic-check { opacity: 0; transform: scale(.5) }
.action-rail .btn.copy.copied .ic-copy { opacity: 0; transform: scale(.5) }
.action-rail .btn.copy.copied .ic-check { opacity: 1; transform: scale(1) }

.msg-assistant { position: relative; padding-bottom: var(--msg-assistant-pb) }
.response {
  position: relative;
  font-family: var(--font-answer);
  font-size: 16px; line-height: 1.65rem;
  color: hsl(var(--text-100));
}
.markdown { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem }
.markdown > * { min-width: 0; margin: 0 }
.markdown > :last-child { margin-bottom: 0 }
/* prose inset: pl-2 / pr-8 (spec §4) */
.markdown p, .markdown blockquote, .markdown h1, .markdown h2, .markdown h3,
.markdown h4, .markdown h5, .markdown h6 { padding-left: .5rem }
.markdown p, .markdown blockquote, .markdown ul, .markdown ol,
.markdown h1, .markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown h6 { padding-right: 2rem }
.markdown h1 { font-size: 1.5rem; line-height: 2rem; font-weight: 600 }
.markdown h2 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600 }
.markdown h3 { font-size: 1.0625rem; line-height: 1.6rem; font-weight: 600 }
.markdown ul, .markdown ol { padding-left: 2rem; display: grid; gap: .35rem }
.markdown li { margin: 0 }
.markdown li::marker { color: hsl(var(--text-400)) }
.markdown strong { font-weight: 600 }
.markdown blockquote { border-left: 2px solid var(--cds-hairline-strong); margin-left: .5rem; padding-left: .75rem;
                       color: hsl(var(--text-200)) }
.markdown code { font-family: var(--font-mono); font-size: .875em;
                 background: hsl(var(--bg-000) / .6); border-radius: 4px; padding: .1em .35em }
.markdown pre {
  margin: 0; overflow-x: auto; border-radius: .5rem;
  background: hsl(var(--bg-000) / .5); border: .5px solid var(--cds-hairline);
  padding: .75rem 1rem; font-family: var(--font-mono); font-size: 13.5px; line-height: 1.6;
}
.markdown pre code { background: none; padding: 0 }

/* code block chrome: .code-block/.code-block__code are the live class names;
   the header row itself is approximated (no live capture of it) */
.code-block {
  margin: 0 .5rem 1.5rem; border-radius: .5rem; overflow: hidden;
  border: .5px solid var(--cds-hairline); background: hsl(var(--bg-000) / .5);
}
.code-block-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 8px 6px 12px; border-bottom: .5px solid var(--cds-hairline);
  background: hsl(var(--bg-100) / .6);
}
.code-block-head .cb-lang {
  font-size: 12px; line-height: 16px; color: hsl(var(--text-300));
  font-family: var(--font-mono);
}
.code-block-head .cb-copy { height: 24px; padding: 0 8px; border-radius: 6px; font-size: 12px }
.code-block-head .cb-copy .label { display: flex; align-items: center; gap: 4px }
.code-block-head .cb-copy .ic-copy,
.code-block-head .cb-copy .ic-check { display: flex; transition: opacity 200ms, transform 200ms }
.code-block-head .cb-copy .ic-check { display: none }
.code-block-head .cb-copy.copied .ic-copy { display: none }
.code-block-head .cb-copy.copied .ic-check { display: flex }
.code-block > pre { border: 0; border-radius: 0; background: none }
.markdown hr { border: 0; border-top: .5px solid var(--cds-hairline); margin: .25rem .5rem }

/* tables (spec §11.5) */
.table-wrap { overflow-x: auto; width: 100%; padding: 0 .5rem; margin-bottom: 1.5rem }
.markdown table { min-width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.7;
                  white-space: normal; font-family: var(--font-ui) }
.markdown thead { text-align: left }
.markdown th { color: hsl(var(--text-100)); font-weight: 700; padding: .5rem 1rem .5rem 0;
               vertical-align: top; border-bottom: .5px solid hsl(var(--border-300) / .6) }
.markdown td { padding: .5rem 1rem .5rem 0; vertical-align: top;
               border-bottom: .5px solid hsl(var(--border-300) / .3) }

/* citation chips (spec §11.6) */
.cite {
  position: relative; display: inline-flex; align-items: center; overflow: hidden;
  height: 18px; border-radius: 999px; transform: translateY(-1px); margin-left: 2px;
}
.cite .pill {
  position: relative; height: 100%; max-width: 180px; overflow: hidden; padding: 0 .375rem;
  display: inline-flex; align-items: center; font-size: 11px; border-radius: 999px;
  border: .5px solid hsl(var(--border-300) / .25); background: hsl(var(--bg-200));
  color: hsl(var(--text-300));
  transition: background-color 150ms, border-color 150ms, color 150ms;
}
.cite:hover .pill { background: hsl(var(--accent-900)); border-color: hsl(var(--accent-100) / .6);
                    color: hsl(var(--text-200)) }
.cite .pill span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.cite .tail {
  position: absolute; right: .5px; height: 17px; display: flex; align-items: center; padding: 0 .375rem;
  border-radius: 0 999px 999px 0; opacity: 0; transition: opacity 200ms;
  background: linear-gradient(to right, hsl(var(--accent-900) / 0), hsl(var(--accent-900)) 30%, hsl(var(--accent-900)));
}
.cite:hover .tail { opacity: 1 }
.cite .tail svg { color: hsl(var(--accent-100)); transform: scale(.8); opacity: 0;
                  transition: all 500ms ease-in }
.cite:hover .tail svg { transform: scale(1); opacity: 1; transition-timing-function: var(--cds-ease-out) }
.cite-gap { display: inline-flex; width: 4px }

/* tool / thinking pill (spec §11.4) */
.pill-block { display: grid; grid-template-rows: auto auto; min-width: 0 }
.pill-head { min-width: 0; padding: var(--msg-pill-py) 0 var(--msg-pill-py) .5rem }
.pill-btn {
  display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 14px;
  color: hsl(var(--text-500)); background: none; border: 0; text-align: left;
  cursor: var(--cds-cursor-interactive); width: 100%; min-width: 0;
  font-family: var(--font-ui);
  transition: color var(--cds-duration-fast) linear;
}
.pill-btn:hover { color: hsl(var(--text-300)) }
.pill-btn .pill-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.pill-btn .pill-caret {
  display: inline-flex; flex: none; opacity: 0; transform: rotate(-90deg);
  transition: opacity 200ms, transform 200ms;
}
.pill-btn:hover .pill-caret, .pill-btn:focus-visible .pill-caret { opacity: 1 }
.pill-btn[aria-expanded="true"] .pill-caret { transform: rotate(0deg); opacity: 1 }
.pill-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms var(--cds-ease-out) }
.pill-block[data-open="true"] .pill-body { grid-template-rows: 1fr }
.pill-body > div { overflow: hidden; min-width: 0 }
.pill-detail {
  padding: 2px .5rem 8px 1.5rem; font-size: 13.5px; line-height: 1.6;
  color: hsl(var(--text-400)); font-family: var(--font-ui);
  border-left: 1px solid var(--cds-hairline); margin-left: .5rem;
}
.pill-detail .src { display: flex; align-items: center; gap: 6px; padding: 2px 0 }
.pill-btn .pill-icon { display: inline-flex; flex: none; width: 18px; justify-content: center }
.pill-btn .pill-icon svg { width: 16px; height: 16px; display: block }

/* ---- web search block (spec §20) ---------------------------------------
   query header rows in the left gutter, each with a result card hung off a
   vertical rule; the trailing row is the search still in flight.          */
.websearch { min-width: 0 }
.ws-q {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: var(--msg-pill-py) .5rem var(--msg-pill-py) .5rem;
  font-size: 14px; line-height: 20px; font-family: var(--font-ui);
  color: hsl(var(--text-500));
}
.ws-icon { flex: none; width: 18px; display: inline-flex; justify-content: center }
.ws-icon svg { width: 16px; height: 16px; display: block }
.ws-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ws-count { flex: none; color: hsl(var(--text-500)); font-variant-numeric: tabular-nums }

/* the rule sits under the globe icon (8px pad + half of the 18px slot) */
.ws-body {
  margin-left: 16.5px; padding: 2px 0 6px 21.5px;
  border-left: 1px solid var(--cds-hairline);
}
.ws-card {
  background: hsl(var(--bg-000) / .5); border: .5px solid var(--cds-hairline);
  border-radius: 12px; padding: 2px; max-height: 148px;
  overflow-y: auto; overscroll-behavior: contain;
}
.ws-row {
  display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px;
  border-radius: 10px; text-decoration: none; font-size: 14px; min-width: 0;
  font-family: var(--font-ui); cursor: var(--cds-cursor-interactive);
  transition: background var(--cds-duration-fast) linear;
}
.ws-row:hover { background: hsl(var(--bg-300) / .55) }
.ws-title  { flex: 1 1 auto; min-width: 0; color: hsl(var(--text-200));
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ws-domain { flex: 0 1 auto; min-width: 0; color: hsl(var(--text-500));
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
/* favicons are never fetched — a deterministic tile stands in for the real one */
.ws-fav {
  flex: none; width: 16px; height: 16px; border-radius: 4px; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 600; line-height: 1; user-select: none;
}
.ws-fav.round { border-radius: 50% }
.ws-fav.globe { background: none; color: hsl(var(--text-400)) }
.ws-fav.globe svg { width: 16px; height: 16px; display: block }

/* starburst */
.starburst { margin: 1.5rem 0 0 .25rem; display: flex; align-items: center;
             transition: transform 300ms var(--cds-ease-out) }
.starburst .mark { display: inline-flex; align-items: center; user-select: none }
.msg-assistant[data-streaming="true"] .starburst { transform: translateY(-1.625rem) }

/* ============================ composer =================================== */
/* The dock hides what scrolls under it.
   It was transparent apart from the composer's own panel, so the feed ran
   behind the padding and straight through the footnote — the last line of an
   answer and "Alphe is AI and can make mistakes" overlapping in the same place.
   The page colour below, fading up over the padding so text disappears into it
   instead of meeting a hard edge. */
.dock {
  position: sticky; bottom: 0; margin: 0 auto; width: 100%;
  padding-top: 1.5rem; z-index: 5;
  background: linear-gradient(to bottom, hsl(var(--bg-100) / 0) 0, hsl(var(--bg-100)) 1.5rem);
}
.dock-inner { margin: 0 auto; width: 100%; max-width: 50.5rem; padding: 0 1.25rem }

.composer {
  box-sizing: content-box; display: flex; flex-direction: column; align-items: stretch;
  background: hsl(var(--bg-000));
  position: relative; z-index: 10; border-radius: 20px; cursor: text;
  border: 1px solid transparent;
  box-shadow: 0 .25rem 1.25rem color-mix(in srgb, var(--cds-black) 3.5%, transparent),
              0 0 0 .5px var(--cds-hairline);
  transition: background-color 200ms, border-color 200ms, box-shadow 200ms, opacity 200ms;
}
.composer:hover {
  box-shadow: 0 .25rem 1.25rem color-mix(in srgb, var(--cds-black) 3.5%, transparent),
              0 0 0 .5px var(--cds-hairline-strong);
}
.composer:focus-within, .composer:hover:focus-within {
  box-shadow: 0 .25rem 1.25rem color-mix(in srgb, var(--cds-black) 7.5%, transparent),
              0 0 0 .5px var(--cds-hairline-strong);
}
.composer-inner { display: flex; flex-direction: column; margin: .875rem; gap: .75rem }

.editor-wrap { width: 100%; overflow-y: auto; overflow-wrap: break-word;
               max-height: 24rem; padding: 6px 0 0 6px; transition: opacity 200ms }
.editor-wrap[data-variant="home"] { min-height: calc(2lh + 6px) }
.editor-wrap[data-variant="chat"] { min-height: 1.5rem }
.editor {
  outline: none; font-size: 16px; line-height: 22.4px; font-family: var(--font-ui);
  color: hsl(var(--text-100)); white-space: pre-wrap; overflow-wrap: break-word;
}
.editor p { margin: 0 }
.editor p.is-empty::before {
  content: attr(data-placeholder); color: hsl(var(--text-500));
  float: left; height: 0; pointer-events: none;
}

.composer-toolbar { position: relative; display: flex; align-items: center; width: 100%; gap: 8px;
                    container-type: inline-size }
.toolbar-left { position: relative; flex: none; display: flex; align-items: center; gap: 4px }
.toolbar-grow { flex: 1 }
.model-group { display: flex; align-items: center; gap: 8px; min-width: 5rem;
               transition: opacity 150ms, transform 150ms }
.model-btn { padding: 0 .5rem; font-size: 14px; line-height: 1.4; font-weight: 430; max-width: 100% }
.model-btn .m-name { min-width: 0; overflow-x: clip; text-overflow: ellipsis; white-space: nowrap;
                     user-select: none }
.model-btn .m-effort { margin-left: 4px; color: hsl(var(--text-500)) }
.model-btn .m-caret { opacity: .75; margin-right: -4px; display: inline-flex }

.mic-group { flex: none; display: flex; align-items: center; border-radius: .5rem }
.gear-slot { overflow: hidden; width: 0; transition: width 150ms var(--cds-ease-out) }
.mic-group:hover .gear-slot, .composer:focus-within .gear-slot { width: 32px }
.gear-slot .btn { opacity: 0; transition: opacity 200ms, background-color 200ms }
.mic-group:hover .gear-slot .btn, .composer:focus-within .gear-slot .btn { opacity: 1 }
.mic-btn { height: 32px; border-radius: .5rem; padding: 0 6px }
.mic-btn:hover > .fill, .gear-slot .btn:hover > .fill { background: var(--cds-alpha-2) }

.send-slot { flex: none; display: flex; align-items: center; justify-content: flex-end;
             width: 32px; z-index: 10; transition: opacity 150ms, width 150ms, margin-left 150ms }

.composer-footnote { text-align: center; font-size: 12px; color: hsl(var(--text-500)); padding: 8px 0 }

/* usage banner sits behind the composer (spec §11.8) */
.usage-band { display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden }
.usage-band-inner {
  width: 100%; position: relative; z-index: 0; padding: 8px .875rem 28px;
  border-radius: 20px 20px 0 0; border-bottom: 0;
  background: var(--cds-surface-1);
  box-shadow: inset 0 0 0 .5px hsl(var(--border-300) / .18);
  margin-bottom: -22px;
}
.usage-band-inner .line { display: flex; gap: 6px; align-items: center; justify-content: space-between;
                          font-size: 12px }
.usage-band-inner .line span { color: hsl(var(--text-300)) }
.usage-band-inner .more-usage {
  background: none; border: 0; cursor: var(--cds-cursor-interactive); font-size: 13px;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor, transparent 60%);
}
.usage-band-inner .more-usage:hover { text-decoration-color: currentColor }

/* scroll-to-bottom (spec §11.7) */
.scroll-btn {
  position: absolute; top: -32px; left: 50%; transform: translateX(-50%);
  z-index: 1; width: 36px; height: 36px; display: inline-flex; align-items: center;
  justify-content: center; border-radius: 999px; padding: 4px;
  border: .5px solid hsl(var(--border-300) / .25);
  background: hsl(var(--bg-000) / .8); backdrop-filter: blur(8px);
  box-shadow: var(--cds-shadow-md); cursor: var(--cds-cursor-interactive);
  color: hsl(var(--text-200));
  transition: opacity 200ms, box-shadow 200ms, border-color 200ms;
  opacity: 0; pointer-events: none;
}
.scroll-btn:hover { box-shadow: var(--cds-shadow-lg); background: hsl(var(--bg-000)) }
.scroll-btn[data-show="true"] { opacity: 1; pointer-events: auto }
.scroll-btn[data-streaming="true"] { border-color: hsl(var(--accent-brand) / .3) }

/* ============================ home view ================================== */
.home {
  flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding-bottom: 6vh;
}
.home-col { width: 100%; max-width: 50.5rem; padding: 0 1.25rem }
.greeting {
  display: flex; align-items: center; gap: .75rem; justify-content: center;
  font-family: var(--font-answer); font-size: 2.25rem; line-height: 1.2;
  color: hsl(var(--text-100)); margin-bottom: 1.75rem;
}
.greeting .mark { display: inline-flex; align-items: center; color: hsl(var(--accent-brand)); flex: none }
/* The mark beside the greeting sits on an empty screen with nothing to compete
   with it, so it carries more weight than the same shape inside a busy panel. */
.greeting .mark canvas { filter: brightness(1.9) contrast(1.45) }
.greeting .mark svg { width: 100%; height: auto; fill: currentColor }

.pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 1rem }
.pill-quick {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px;
  border-radius: .5rem; border: .5px solid var(--cds-hairline); background: transparent;
  color: hsl(var(--text-200)); font-size: 14px; cursor: var(--cds-cursor-interactive);
  transition: background-color 120ms, color 120ms, border-color 120ms;
}
.pill-quick:hover { background: var(--cds-fill-ghost-hover); color: hsl(var(--text-100)) }
.pill-quick .row-icon { color: hsl(var(--text-400)) }

/* cowork extras */
.cowork-row { display: flex; align-items: center; gap: 8px; padding-top: 2px }
.cowork-row .spacer { flex: 1 }
.cowork-note { display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
               color: hsl(var(--text-500)) }
.ideas { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 2px }
.ideas h3 { font-size: 12px; color: hsl(var(--text-500)); font-weight: 400; margin: 0 0 4px 8px }
.idea-row { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 8px;
            border-radius: 8px; color: hsl(var(--text-200)); font-size: 14px;
            background: none; border: 0; width: 100%; text-align: left;
            cursor: var(--cds-cursor-interactive) }
.idea-row:hover { background: var(--cds-fill-ghost-hover); color: hsl(var(--text-100)) }
.idea-row .pictogram { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center;
                       background: var(--cds-alpha-2); color: hsl(var(--text-300)) }
.beta-chip { margin-left: 6px }

/* ============================ popups / menus ============================= */
.portal-layer { position: fixed; inset: 0; z-index: 100; pointer-events: none }
.portal-layer > * { pointer-events: auto }
.popup-backdrop { position: fixed; inset: 0 }
.popup {
  position: fixed; display: flex; flex-direction: column;
  min-width: 128px; max-width: 320px; max-height: var(--dropdown-max-height);
  border-radius: .75rem; background: var(--cds-surface-3); box-shadow: var(--cds-shadow-panel);
  color: hsl(var(--text-100)); font-size: 14px; outline: none;
  animation: cds-reveal-in 140ms var(--cds-ease-out) both;
}
.popup[data-side="top"] { animation-name: cds-reveal-in }
.popup-scroll { min-height: 0; overflow-y: auto; border-radius: inherit; padding: 4px }
.popup-scroll::-webkit-scrollbar { width: 8px }
.popup-scroll::-webkit-scrollbar-thumb { background: var(--cds-alpha-3); border-radius: 8px }

.menu-item {
  display: flex; width: 100%; align-items: center; gap: 8px;
  padding: calc((var(--cds-h-control) - var(--cds-leading-body)) / 2) 8px;   /* = 6px 8px */
  border-radius: var(--cds-radius); user-select: none; outline: none;
  cursor: var(--cds-cursor-interactive); background: none; border: 0; text-align: left;
  color: inherit; font-size: 14px; line-height: var(--cds-leading-body);
}
.menu-item:hover, .menu-item[data-highlighted="true"] { background: var(--cds-fill-ghost-hover) }
.menu-item[data-disabled="true"] { opacity: .5; pointer-events: none }
.menu-item.danger { color: hsl(var(--danger-100)) }
.menu-item .mi-icon { display: flex; width: 16px; flex: none; align-items: center; justify-content: center;
                      color: hsl(var(--text-300)) }
.menu-item.danger .mi-icon { color: inherit }
.menu-item .mi-label { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.menu-item .mi-desc { display: block; font-size: 12px; color: hsl(var(--text-500)); white-space: normal }
.menu-item .mi-right { margin-left: .5rem; display: flex; flex: none; align-items: center; gap: 4px;
                       color: hsl(var(--text-500)); font-size: 12px }
.menu-item .mi-sub { margin-right: -4px; flex: none; color: hsl(var(--text-500)); display: flex }
.menu-item .mi-check { color: hsl(var(--accent-100)) }
.menu-header { padding: 6px 10px; font-size: 12px; font-weight: 500; color: hsl(var(--text-500));
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.menu-note { padding: 6px 10px 8px; font-size: 12px; color: hsl(var(--text-500)); line-height: 1.45 }
.menu-sep { margin: 4px 8px; height: 1px; background: var(--cds-hairline) }
kbd { display: inline-flex; height: 16px; align-items: center; justify-content: center;
      font-family: inherit; font-size: 12px; color: hsl(var(--text-500)) }

/* tooltip */
.tooltip {
  position: fixed; z-index: 200; padding: 4px 8px; border-radius: 6px; font-size: 12px;
  background: var(--cds-surface-3); color: hsl(var(--text-100));
  box-shadow: var(--cds-shadow-panel); pointer-events: none;
  animation: cds-reveal-in 120ms var(--cds-ease-out) both;
}

/* ============================ search dialog ============================== */
.dialog-backdrop {
  position: fixed; inset: 0; z-index: 150; background: hsl(var(--always-black) / .45);
  display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh;
  animation: fade 120ms linear both;
}
.dialog {
  width: min(640px, calc(100vw - 32px)); border-radius: 1rem; overflow: hidden;
  background: var(--cds-surface-3); box-shadow: var(--cds-shadow-panel);
  animation: cds-reveal-in 160ms var(--cds-ease-out) both;
}
.dialog-search { display: flex; align-items: center; gap: 10px; padding: 12px 14px;
                 border-bottom: .5px solid var(--cds-hairline) }
.dialog-search input { flex: 1; background: none; border: 0; outline: none; font-size: 15px;
                       color: hsl(var(--text-100)) }
.dialog-search input::placeholder { color: hsl(var(--text-500)) }
.dialog-list { max-height: 50vh; overflow-y: auto; padding: 6px }
.dialog-row { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px;
              border-radius: 8px; color: hsl(var(--text-200)); font-size: 14px; cursor: var(--cds-cursor-interactive) }
.dialog-row .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.dialog-row .meta { color: hsl(var(--text-500)); font-size: 12px }
.dialog-row[data-highlighted="true"], .dialog-row:hover { background: var(--cds-fill-ghost-hover);
                                                          color: hsl(var(--text-100)) }
.dialog-empty { padding: 24px; text-align: center; color: hsl(var(--text-500)); font-size: 14px }

/* ============================ misc ======================================= */
.response .tools:empty { display: none }
.pill-block[data-has-body="true"] .pill-caret { opacity: .55 }
.action-rail .btn[aria-pressed="true"] { color: hsl(var(--accent-100)) }
.starburst .mark canvas, .greeting .mark canvas { display: block }
.dialog-row svg.icon { color: hsl(var(--text-400)) }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 8px);
  z-index: 300; padding: 8px 14px; border-radius: 10px; font-size: 13px;
  background: var(--cds-surface-3); color: hsl(var(--text-100));
  box-shadow: var(--cds-shadow-panel); pointer-events: none;
  opacity: 0; transition: opacity 160ms linear, transform 160ms var(--cds-ease-out);
}
.toast[data-show="true"] { opacity: 1; transform: translate(-50%, 0) }


.clock-hand { transform-origin: 12px 12px; transition: transform 600ms cubic-bezier(.3,.9,.4,1) }
.row:hover .clock-hand { transform: rotate(390deg) }
@media (prefers-reduced-motion: reduce) { .clock-hand { transition: none } }

.h-12-spacer { height: 48px }
.grow-spacer { flex: 1 }


/* ---- the phase pill ------------------------------------------------------
   The orb and its label are one statement, so they sit in one row inside one
   rounded container. Stacked as a separate mark above the text they read as
   unrelated pieces: a shape, a gap, then a sentence.

   The container is a pill only while the turn is running. Once it settles into
   the routing summary it is a plain line again, because a finished turn is a
   fact rather than an activity and should not keep announcing itself. */
.pill-btn .pill-icon[data-icon="orb"] {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: 0 0 auto;
}
.pill-btn .pill-icon[data-icon="orb"] canvas { display: block }
/* The settled mark reads as a full stop on the turn, so it carries more weight
   than the states that preceded it. */
.pill-btn .pill-icon[data-icon="orb"] canvas.settled {
  filter: brightness(1.55) contrast(1.2);
}

/* Hugs its label. The button inherits a full-width rule from the settled pill,
   where a wide hit area is right because the row is expandable; a status that
   cannot be opened should be exactly as wide as what it says. */
.pill-block[data-running="true"] { width: fit-content; max-width: 100% }
.pill-block[data-running="true"] .pill-head { display: inline-flex }
.pill-block[data-running="true"] .pill-btn {
  width: auto; display: inline-flex; align-items: center; gap: .5rem;
  padding: .25rem .9rem .25rem .3rem;
  border-radius: 999px;
  background: hsl(var(--bg-200) / .6);
  border: 1px solid hsl(var(--border-300) / .5);
}
.pill-block[data-running="true"] .pill-caret { display: none }


/* ---- run report ----------------------------------------------------------
   Hangs off the rail button rather than the message, so it cannot be knocked
   out of alignment by an answer of any length. */
.action-rail .btn { position: relative }
.run-report {
  position: absolute; bottom: calc(100% + .5rem); left: 0; z-index: 40;
  min-width: max-content; max-width: min(26rem, 92vw);
  padding: .55rem .65rem; border-radius: .7rem;
  background: hsl(var(--bg-100)); border: 1px solid hsl(var(--border-300));
  box-shadow: 0 12px 32px hsl(0 0% 0% / .38);
  font-size: 12.5px; line-height: 1.5; text-align: left; cursor: default;
}
.rr-row { display: flex; align-items: center; gap: .5rem; padding: .2rem 0 }
.rr-sep { height: 1px; margin: .45rem 0; background: hsl(var(--border-300)) }
.rr-model { color: hsl(var(--text-100)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.rr-mark {
  flex: 0 0 auto; width: 17px; height: 17px;
  display: inline-flex; align-items: center; justify-content: center;
  color: hsl(var(--text-200));
}
.rr-mark svg { width: 100%; height: 100%; display: block }
.rr-mark-none { opacity: 0 }
/* One row, always. Wrapping split three figures into two-and-one, which reads
   as two groups that mean different things rather than one line of totals. */
.rr-totals { display: flex; align-items: center; gap: .85rem; flex-wrap: nowrap; white-space: nowrap }
.rr-stat { display: inline-flex; align-items: center; gap: .3rem; color: hsl(var(--text-300));
           font-family: var(--font-mono); font-size: 12px; white-space: nowrap }
.rr-stat svg { color: hsl(var(--text-500)) }

/* The mark sits below the top of the message rather than level with it, so the
   answer starts on the reader's line and the mark reads as attached to it. */


/* ---- the thinking panel --------------------------------------------------
   Closed it is one muted line; open it is the model's own working, ruled off
   down the left so it reads as quoted rather than as part of the answer. */
.thinking { margin: .25rem 0 .5rem }
.th-head {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: 0; border: 0; background: none; cursor: var(--cds-cursor-interactive);
  color: hsl(var(--text-400)); font-family: var(--font-sans); font-size: 14px;
  line-height: 20px; text-align: left;
}
.th-head:hover { color: hsl(var(--text-300)) }
.th-caret { display: inline-flex; transition: transform .18s ease }
.thinking[data-open="true"] .th-caret { transform: rotate(90deg) }
.th-body { display: none; position: relative; margin: .5rem 0 0 .1rem; padding-left: .9rem }
.thinking[data-open="true"] .th-body { display: block }
.th-rule { position: absolute; left: 0; top: .2rem; bottom: 1.9rem; width: 1px;
           background: hsl(var(--border-300)) }
.th-text p { margin: 0 0 .7rem; color: hsl(var(--text-300)); font-size: 14.5px; line-height: 1.62 }
.th-done { display: flex; align-items: center; gap: .45rem; margin-left: -.9rem;
           color: hsl(var(--text-400)); font-size: 14px }
.th-done svg { color: hsl(var(--text-500)) }


/* ---- the mark a finished answer keeps ------------------------------------
   Under the action rail, not above the message. Above, it read as a thing the
   answer was waiting on; under its own buttons it reads as a full stop.

   Larger and brighter than every working state on purpose. Those are progress
   and this is completion, and if the two looked alike neither would say
   anything. */
.answer-mark { margin: 1.15rem 0 .25rem .2rem; display: flex }
.answer-mark canvas.settled { filter: brightness(1.75) contrast(1.3) }


/* ---- the greeting shimmer ------------------------------------------------
   A slow sweep of light across the words in the brand colour. Slow on purpose:
   this sits on an otherwise empty screen and anything quick here reads as a
   loading state, which is the one thing it is not.

   Falls back to a flat brand colour where a gradient cannot be painted into
   text, and stops entirely for anyone who has asked for less motion. */
.shimmer-greeting {
  background: linear-gradient(
    100deg,
    hsl(var(--accent-brand)) 20%,
    hsl(var(--brand-200) / .55) 38%,
    hsl(var(--text-100)) 50%,
    hsl(var(--brand-200) / .55) 62%,
    hsl(var(--accent-brand)) 80%
  );
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: greeting-sweep 7s ease-in-out infinite;
}
@keyframes greeting-sweep {
  0%   { background-position: 130% 0 }
  100% { background-position: -30% 0 }
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .shimmer-greeting { color: hsl(var(--accent-brand)); -webkit-text-fill-color: currentColor }
}
@media (prefers-reduced-motion: reduce) {
  .shimmer-greeting { animation: none; background-position: 50% 0 }
}


/* ---- the marks in light mode ---------------------------------------------
   The orb draws itself light-on-dark or dark-on-light from the theme, so the
   shape is already right. What was wrong is the boost applied to it: brightness
   was tuned against a black page, and brightening dark dots on a white one
   washes them out until there is nothing left to see.

   Light mode keeps the emphasis and gets it from contrast and a slight
   darkening instead, which pushes the dots away from the background rather than
   towards it. */
[data-mode="light"] .greeting .mark canvas,
[data-mode="light"] .answer-mark canvas.settled,
[data-mode="light"] .pill-btn .pill-icon[data-icon="orb"] canvas.settled {
  filter: brightness(0.55) contrast(1.6);
}

/* The shimmer sweeps through the page's own text colour at its brightest point,
   which is white on a dark page and near-black on a light one. Stated for both
   so neither relies on a value that only reads on one. */
/* `background-image`, not `background`.
   The shorthand resets `background-clip` to its initial value, which silently
   undid the `background-clip: text` on the base rule — so the gradient stopped
   being cut to the letters and painted as a solid block with the text hidden
   underneath it. Only the image needs to change here; everything else about how
   it is painted is already right. */
[data-mode="light"] .shimmer-greeting {
  background-image: linear-gradient(
    100deg,
    hsl(var(--brand-000)) 20%,
    hsl(var(--accent-brand)) 38%,
    hsl(var(--brand-200)) 50%,
    hsl(var(--accent-brand)) 62%,
    hsl(var(--brand-000)) 80%
  );
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* A running pill's label is shimmer-text, which is a light sweep by default. */
[data-mode="light"] .pill-block[data-running="true"] .shimmer-text {
  color: hsl(var(--text-200));
}


/* Renaming happens on the row itself, so the field has to sit exactly where the
   label was rather than pushing the row around. */
.row-rename {
  flex: 1; min-width: 0; margin: 0; padding: 0;
  background: transparent; border: 0; outline: 0;
  font: inherit; color: hsl(var(--text-100));
  border-bottom: 1px solid hsl(var(--accent-brand));
}


/* The "Recents" heading, rebuilt alongside the nav block above it. */
.nav-heading {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 8px 4px 12px;
  font-size: 12px; color: hsl(var(--text-500));
}

.sidebar-inner { display: flex; flex-direction: column; height: 100% }
.sidebar-scroll { flex: 1 1 auto }
.sidebar-foot { margin-top: auto }


/* ---- what moves in the sidebar and what does not ------------------------
   Three fixed parts and one that scrolls. The mark and its controls, the three
   nav rows and the "Recents" heading all stay put, and so does the profile row
   at the foot; only the list of conversations moves.

   A heading that scrolls away from the list it names stops being a heading, and
   nav rows that leave the screen are exactly the rows a reader is reaching for
   when the list is long enough to have scrolled at all. */
.sidebar-nav { flex: 0 0 auto; padding: 4px 8px 0 }
.sidebar-scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 0 8px 8px;
  overscroll-behavior: contain;
}


/* ── sign-in ────────────────────────────────────────────────────────────────
   A full cover rather than a modal: until there is an account there is nothing
   behind it worth seeing, and a dialog over a working app invites dismissing it. */
#signin[hidden] { display: none; }
#signin {
  position: fixed; inset: 0; z-index: 9000;
  display: grid; place-items: center;
  /* Its own colours, not the app's.

     It inherited the theme tokens, so in dark mode it painted a near-black heading on a
     black ground and the form could not be read at all. Sign-in also runs before there is a
     reader whose preference could be known, which makes "whatever theme is set" the wrong
     source for it: this is the one screen that must be legible on first paint, every time. */
  background: #ffffff;
  color: #16181d;
}
#signin * { color: inherit; }
#signin-form {
  width: min(340px, calc(100vw - 48px));
  display: flex; flex-direction: column; gap: 6px;
}
#signin-form h1 { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
.signin-sub { margin: 0 0 18px; color: #6b7280; font-size: 14px; }
#signin-form label { font-size: 12px; color: #6b7280; margin-top: 10px; }
#signin-form input {
  height: 40px; padding: 0 12px; border-radius: 10px;
  border: 1px solid #d6d9e0;
  background: #ffffff; color: #16181d; font: inherit;
}
#signin-form input:focus-visible { outline: 2px solid #0d69d3; outline-offset: 1px; }
#signin-go {
  margin-top: 20px; height: 40px; border: 0; border-radius: 10px;
  /* The deep azure, not #51a2ff: this button sits on white. */
  background: #0d69d3; color: #ffffff;
  font: inherit; font-weight: 600; cursor: pointer;
}
#signin-go[disabled] { opacity: 0.6; cursor: default; }
.signin-error { margin: 12px 0 0; font-size: 13px; color: #ff6b6b; }
.signin-error[hidden] { display: none; }


/* How many times one model ran, beside its name rather than as another row. */
.rr-times { opacity: .55; font-variant-numeric: tabular-nums; }


/* ── a picture being made, and then made ──────────────────────────────────
   The shimmer is a placeholder with the shape of the thing it stands for, so
   the layout does not jump when the image arrives. */
:root {
  --shimmer-dur: 3000ms;
  --shimmer-band: 26%;
  --shimmer-glow-opacity: 0.7;
  --shimmer-blur: 5px;
}

@keyframes t-shimmer-sweep {
  from { mask-position: 100% 100%; }
  to   { mask-position: 0% 0%; }
}

.t-shimmer { position: relative; overflow: hidden; isolation: isolate; }

.t-shimmer-wash,
.t-shimmer-edge {
  position: absolute;
  pointer-events: none;
  mask-image: linear-gradient(
    135deg,
    transparent 0%,
    transparent calc(50% - var(--shimmer-band) * 0.8),
    rgba(255, 255, 255, 0.25) calc(50% - var(--shimmer-band) * 0.45),
    rgba(255, 255, 255, 0.7) calc(50% - var(--shimmer-band) * 0.18),
    #fff 50%,
    rgba(255, 255, 255, 0.7) calc(50% + var(--shimmer-band) * 0.18),
    rgba(255, 255, 255, 0.25) calc(50% + var(--shimmer-band) * 0.45),
    transparent calc(50% + var(--shimmer-band) * 0.8),
    transparent 100%
  );
  mask-size: 280% 280%;
  mask-repeat: no-repeat;
  animation: t-shimmer-sweep var(--shimmer-dur) linear infinite;
}

.t-shimmer-wash {
  inset: 0;
  background:
    radial-gradient(ellipse 90px 70px at 20% 15%, rgba(40, 140, 255, 0.14), transparent),
    radial-gradient(ellipse 80px 60px at 65% 25%, rgba(255, 50, 100, 0.13), transparent),
    radial-gradient(ellipse 70px 80px at 30% 55%, rgba(50, 200, 80, 0.12), transparent),
    radial-gradient(ellipse 90px 70px at 75% 65%, rgba(180, 40, 240, 0.13), transparent),
    radial-gradient(ellipse 70px 60px at 45% 85%, rgba(255, 120, 40, 0.12), transparent);
}

.t-shimmer-edge {
  inset: calc(var(--shimmer-blur) * -2);
  z-index: 1;
  opacity: var(--shimmer-glow-opacity);
  filter: blur(var(--shimmer-blur));
  border-radius: inherit;
  box-shadow:
    inset 0 0 calc(var(--shimmer-blur) * 3) rgba(255, 255, 255, 0.85),
    inset 0 0 var(--shimmer-blur) rgba(120, 180, 255, 0.6);
}

.t-shimmer[data-playing="false"] .t-shimmer-wash,
.t-shimmer[data-playing="false"] .t-shimmer-edge { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .t-shimmer-wash, .t-shimmer-edge { animation: none; }
}

.image-block { margin: 10px 0 4px; max-width: 560px; }

.image-canvas-wrap {
  position: relative;
  /* Square only until the picture arrives, when JS replaces this with its real
     shape. It exists so the shimmer has somewhere to be and the page does not
     jump when the image lands. */
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  background: var(--cds-alpha-2, rgba(128,128,128,.08));
  display: grid;
  place-items: center;
}
.image-canvas-wrap canvas { width: 100%; height: 100%; object-fit: contain; display: block; }

/* The label sits over the shimmer and names what is being done. */
.image-doing {
  position: relative;
  z-index: 2;
  font-size: 13px;
  letter-spacing: .01em;
  color: var(--text-300, #6b7280);
  pointer-events: none;
}



/* Files that came with a question, shown when a conversation is reopened. */
.attached-row { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 10px; justify-content: flex-end; }
.attached-chip {
  font-size: 12px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border-100, rgba(128,128,128,.28));
  color: inherit; text-decoration: none; opacity: .85;
}
.attached-chip:hover { opacity: 1; }