/*
 * Showroom components. Every colour here comes from a semantic role declared in
 * theme.css. No component defines a colour of its own, so rebranding is a
 * theme.css edit and nothing more.
 */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-prose);
  font-kerning: normal;
  overscroll-behavior: none;
}

/* Light text on a dark canvas reads lighter, so give it more room. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) { --leading-prose: 1.66; }
}
:root[data-theme='dark'] { --leading-prose: 1.66; }

h1 { margin: 0; font-size: inherit; font-weight: inherit; }
p { margin: 0; }
button { font: inherit; color: inherit; }

kbd {
  padding: 1px 5px;
  border: 1px solid var(--code-border);
  border-radius: var(--radius-sm);
  background: var(--code-inline-surface);
  color: var(--code-inline-text);
  font-family: var(--font-mono);
  font-size: 0.85em;
  font-variant-ligatures: none;
}

/* Extension point: hosts that add richer rendering inherit these roles. */
code {
  background: var(--code-inline-surface);
  color: var(--code-inline-text);
  font-family: var(--font-mono);
  font-size: 0.9em;
  font-variant-ligatures: none;
}

pre {
  max-inline-size: 100%;
  margin: 0;
  padding: var(--space-xs);
  overflow-x: auto;
  border: 1px solid var(--code-border);
  border-radius: var(--radius-md);
  background: var(--code-surface);
  color: var(--code-text);
  font-family: var(--font-mono);
}

pre code { background: none; font-size: 1em; }

.hidden { display: none !important; }

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  inset-block-start: var(--space-2xs);
  inset-inline-start: var(--space-2xs);
  z-index: 20;
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--text-primary);
  transform: translateY(-200%);
}

.skip-link:focus-visible { transform: none; }

:focus-visible {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: var(--focus-offset);
}

/* ---- Shell ------------------------------------------------------------- */

.app {
  display: flex;
  flex-direction: column;
  block-size: var(--app-height, 100dvh);
}

/* Centres content on the shell measure without an extra wrapper element. */
.app-header,
.banner,
.stage,
.composer-bar {
  padding-inline: max(var(--space-sm), (100% - var(--measure-shell)) / 2);
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-2xs);
  border-block-end: 1px solid var(--border-subtle);
  background: var(--surface-primary);
}

.product-name {
  font-family: var(--font-display);
  font-size: var(--text-lead);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
}

.connection {
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
  color: var(--text-muted);
  font-size: var(--text-meta);
  line-height: var(--leading-snug);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
}

/* ---- Banner ------------------------------------------------------------ */

.banner {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding-block: var(--space-2xs);
  border-block-end: 1px solid var(--border-subtle);
  background: var(--warning-surface);
  color: var(--text-primary);
  font-size: var(--text-meta);
}

.banner .text-button { margin-inline-start: auto; }

/* ---- Stage ------------------------------------------------------------- */

.stage {
  flex: 1;
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.column,
.conversation {
  inline-size: 100%;
  max-inline-size: var(--measure-shell);
  margin-inline: auto;
}

/*
 * The auth column sits flush with the transcript's inline start and centres in
 * the block axis, so a signed-out screen reads as composed rather than stranded.
 */
.column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-md);
  max-inline-size: 26rem;
  min-block-size: 100%;
  margin-inline: 0;
  padding-block: var(--space-xl);
}

.conversation { padding-block: var(--space-md) var(--space-lg); }

/* A first conversation is a greeting, not a stranded block at the top edge. */
.conversation:has(.opening:not(.hidden)) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-block-size: 100%;
}

/* ---- Auth panels ------------------------------------------------------- */

.panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.panel-heading {
  max-inline-size: 18ch;
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
}

.panel-lead,
.identity-line {
  max-inline-size: 44ch;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.identity-line { color: var(--text-primary); }

.panel form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: start;
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  inline-size: 100%;
}

.field label {
  font-family: var(--font-display);
  font-size: var(--text-meta);
  font-weight: 600;
  color: var(--text-secondary);
}

.field-hint {
  color: var(--text-muted);
  font-size: var(--text-meta);
}

input {
  inline-size: 100%;
  min-block-size: var(--target-min);
  padding: 10px var(--space-xs);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--composer-surface);
  color: var(--composer-text);
  font: inherit;
}

input::placeholder { color: var(--composer-placeholder); }

input:focus-visible { border-color: var(--composer-border-focus); }

.notice {
  padding: var(--space-xs);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-secondary);
  color: var(--text-primary);
  font-size: var(--text-meta);
}

.error {
  color: var(--danger);
  font-size: var(--text-meta);
}

.panel .error { max-inline-size: 44ch; }

/* ---- Buttons ----------------------------------------------------------- */

.button-primary {
  min-block-size: var(--target-min);
  min-inline-size: var(--target-min);
  padding-inline: var(--space-sm);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--text-on-accent);
  font-family: var(--font-display);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-out);
}

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

.button-primary:disabled {
  background: var(--state-disabled-surface);
  color: var(--state-disabled-text);
  cursor: default;
}

.text-button {
  min-block-size: var(--target-min);
  min-inline-size: var(--target-min);
  padding-inline: var(--space-2xs);
  border: 0;
  background: none;
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.text-button:hover { color: var(--accent-hover); }

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xs);
  min-block-size: var(--target-min);
  min-inline-size: var(--target-min);
  padding-inline: var(--space-2xs);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: none;
  color: var(--text-secondary);
  font-size: var(--text-meta);
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-out),
    color var(--motion-fast) var(--ease-out);
}

.icon-button:hover {
  background: var(--surface-secondary);
  color: var(--text-primary);
}

.icon-button:disabled {
  color: var(--state-disabled-text);
  cursor: default;
}

/*
 * Narrow headers collapse the label visually but never remove it, so the
 * control keeps its accessible name at every width.
 */
.button-label {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (min-width: 600px) {
  .button-label {
    position: static;
    inline-size: auto;
    block-size: auto;
    margin: 0;
    clip-path: none;
  }
}

/* ---- Marks: state as a shape, never colour alone ----------------------- */

.mark {
  position: relative;
  flex: none;
  inline-size: 10px;
  block-size: 10px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
}

.mark-idle { color: var(--text-muted); }

.mark-live,
.mark-running {
  color: var(--tool-running);
}

.mark-live::after,
.mark-running::after {
  content: '';
  position: absolute;
  inset: 1px;
  background: currentColor;
  animation: mark-pulse var(--motion-pulse) var(--ease-out) infinite;
}

.mark-agent {
  color: var(--message-mark);
  background: currentColor;
}

.mark-requested { color: var(--tool-requested); }

.mark-completed {
  color: var(--tool-completed);
  background: currentColor;
}

.mark-cancelled { color: var(--text-muted); }

.mark-cancelled::after {
  content: '';
  position: absolute;
  inset-inline: 1px;
  inset-block-start: calc(50% - 0.75px);
  block-size: 1.5px;
  background: currentColor;
}

.mark-failed { color: var(--tool-failed); }

.mark-failed::before,
.mark-failed::after {
  content: '';
  position: absolute;
  inset-inline: 0.5px;
  inset-block-start: calc(50% - 0.75px);
  block-size: 1.5px;
  background: currentColor;
}

.mark-failed::before { transform: rotate(45deg); }
.mark-failed::after { transform: rotate(-45deg); }

.mark-stop {
  color: var(--danger);
  background: currentColor;
  border-radius: 1px;
}

@keyframes mark-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

/* ---- Glyphs ------------------------------------------------------------ */

.glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 16px;
  block-size: 16px;
  font-family: var(--font-display);
  line-height: 1;
}

.glyph-send::before { content: '\2191'; font-size: 17px; font-weight: 700; }
.glyph-down::before { content: '\2193'; font-size: 15px; font-weight: 700; }

.glyph-theme {
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.glyph-theme::after {
  content: '';
  inline-size: 100%;
  block-size: 100%;
  background: currentColor;
  border-radius: 50%;
  clip-path: inset(0 0 0 50%);
}

.glyph-exit { position: relative; }

.glyph-exit::before {
  content: '';
  position: absolute;
  inset-block: 1px;
  inset-inline-start: 0;
  inline-size: 8px;
  border: 1.5px solid currentColor;
  border-inline-end: 0;
  border-radius: 2px 0 0 2px;
}

.glyph-exit::after {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 2px;
  inline-size: 6px;
  block-size: 6px;
  border: 1.5px solid currentColor;
  border-block-end: 0;
  border-inline-start: 0;
  transform: translateY(-50%) rotate(45deg);
}

/* ---- Opening ----------------------------------------------------------- */

.opening { padding-block: var(--space-lg) var(--space-md); }

.opening-eyebrow {
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: var(--text-meta);
  font-weight: 600;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
}

.opening-headline {
  max-inline-size: 20ch;
  margin-block-start: var(--space-2xs);
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
}

.opening-lead {
  max-inline-size: 46ch;
  margin-block-start: var(--space-xs);
  color: var(--text-secondary);
}

.starters {
  margin-block-start: var(--space-lg);
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--border-subtle);
}

.starter { border-block-end: 1px solid var(--border-subtle); }

.starter-button {
  display: grid;
  grid-template-columns: var(--gutter-mark) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2xs);
  inline-size: 100%;
  min-block-size: var(--target-min);
  padding-block: var(--space-xs);
  border: 0;
  background: none;
  text-align: start;
  cursor: pointer;
  transition: color var(--motion-fast) var(--ease-out);
}

.starter-button:hover { color: var(--accent); }

.starter-arrow {
  color: var(--text-muted);
  opacity: 0;
  transition: opacity var(--motion-fast) var(--ease-out),
    transform var(--motion-fast) var(--ease-out);
}

.starter-button:hover .starter-arrow,
.starter-button:focus-visible .starter-arrow {
  opacity: 1;
  transform: translateX(2px);
}

/* ---- Transcript -------------------------------------------------------- */

.messages {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.turn {
  display: grid;
  grid-template-columns: var(--gutter-mark) minmax(0, 1fr);
  gap: var(--space-2xs);
  animation: turn-enter var(--motion-slow) var(--ease-out) both;
}

@keyframes turn-enter {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: none; }
}

.turn-gutter {
  display: flex;
  justify-content: center;
  padding-block-start: 7px;
}

.turn-author {
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
  color: var(--message-author);
  font-family: var(--font-display);
  font-size: var(--text-meta);
  font-weight: 600;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
}

.turn-text {
  max-inline-size: var(--measure-prose);
  margin-block-start: var(--space-3xs);
  color: var(--message-agent-text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.turn-user {
  grid-template-columns: minmax(0, 1fr);
  justify-items: end;
}

.turn-user .turn-text {
  max-inline-size: var(--measure-user);
  margin-block-start: 0;
  padding: var(--space-2xs) var(--space-xs);
  border: 1px solid var(--message-user-border);
  border-radius: var(--radius-lg);
  background: var(--message-user-surface);
  color: var(--message-user-text);
}

/* ---- Tool activity ----------------------------------------------------- */

.tool {
  display: grid;
  grid-template-columns: var(--gutter-mark) minmax(0, 1fr);
  gap: var(--space-2xs);
}

.tool-body {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3xs) var(--space-2xs);
  inline-size: fit-content;
  max-inline-size: var(--measure-prose);
  padding: var(--space-3xs) var(--space-2xs);
  border: 1px solid var(--tool-border);
  border-radius: var(--radius-md);
  background: var(--tool-surface);
  font-size: var(--text-meta);
}

.tool-name {
  color: var(--tool-name);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.tool-state { color: var(--tool-text); }

/* ---- Inline turn notes (failure, cancellation) ------------------------- */

.turn-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  inline-size: fit-content;
  max-inline-size: var(--measure-prose);
  padding: var(--space-2xs) var(--space-xs);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-size: var(--text-meta);
}

.turn-note-failed {
  border-color: var(--danger);
  background: var(--danger-surface);
}

.turn-note-cancelled { background: var(--surface-secondary); }

.turn-note-text { color: var(--text-primary); }

/* ---- Composer ---------------------------------------------------------- */

.composer-bar {
  position: relative;
  padding-block: var(--space-2xs) var(--space-xs);
  border-block-start: 1px solid var(--border-subtle);
  background: var(--composer-chrome);
  padding-block-end: max(var(--space-xs), env(safe-area-inset-bottom));
}

.composer {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.composer-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-2xs);
  padding: var(--space-3xs);
  border: 1px solid var(--composer-border);
  border-radius: var(--radius-lg);
  background: var(--composer-surface);
  transition: border-color var(--motion-fast) var(--ease-out);
}

.composer-field:focus-within { border-color: var(--composer-border-focus); }

/* One ring for the whole field rather than a ring inside a highlighted border. */
.composer-field:has(:focus-visible) {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: var(--focus-offset);
}

#prompt:focus-visible { outline: none; }

#prompt {
  min-block-size: var(--target-min);
  /* A rem cap scales with the reader's text size and, unlike a vh cap, does
     not collapse when the visual viewport is shrunk by a keyboard. */
  max-block-size: 12rem;
  padding: 10px var(--space-2xs);
  border: 0;
  background: none;
  color: var(--composer-text);
  font: inherit;
  resize: none;
  overflow-y: auto;
}

#prompt::placeholder { color: var(--composer-placeholder); }

#prompt:disabled { color: var(--state-disabled-text); }

.composer-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
}

.send-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--target-min);
  block-size: var(--target-min);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--text-on-accent);
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-out);
}

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

.send-button:disabled {
  background: var(--state-disabled-surface);
  color: var(--state-disabled-text);
  cursor: default;
}

.stop-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  min-block-size: var(--target-min);
  min-inline-size: var(--target-min);
  padding-inline: var(--space-xs);
  border: 1px solid var(--danger);
  border-radius: var(--radius-md);
  background: none;
  color: var(--danger);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-meta);
  cursor: pointer;
}

.stop-button:disabled {
  border-color: var(--state-disabled-border);
  color: var(--state-disabled-text);
  cursor: default;
}

.composer-hint {
  color: var(--text-muted);
  font-size: var(--text-meta);
}

@media (pointer: coarse) {
  .composer-hint { display: none; }
}

.jump-latest {
  position: absolute;
  inset-block-end: calc(100% + var(--space-2xs));
  inset-inline-start: 50%;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  min-block-size: var(--target-min);
  padding-inline: var(--space-xs);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--surface-raised-shadow);
  color: var(--text-primary);
  font-size: var(--text-meta);
  cursor: pointer;
  transform: translateX(-50%);
}

/* ---- Narrow viewports -------------------------------------------------- */

@media (max-width: 480px) {
  :root {
    --text-display: 1.75rem;
    --text-title: 1.375rem;
    --gutter-mark: 18px;
  }

  .app-header {
    align-items: start;
    padding-block: var(--space-3xs);
  }

  .column { padding-block: var(--space-lg) var(--space-md); }

  .opening { padding-block: var(--space-md) var(--space-2xs); }
}

/* ---- Reduced motion ---------------------------------------------------- */

/*
 * The live mark stops pulsing and stays filled: the state is still visible,
 * it just no longer moves. Every other duration collapses through the tokens.
 */
@media (prefers-reduced-motion: reduce) {
  .mark-live::after,
  .mark-running::after { animation: none; }

  .starter-button:hover .starter-arrow,
  .starter-button:focus-visible .starter-arrow { transform: none; }
}

/* ---- Forced colours ---------------------------------------------------- */

@media (forced-colors: active) {
  .turn-user .turn-text,
  .tool-body,
  .turn-note,
  .composer-field,
  .banner,
  .notice,
  .jump-latest {
    border: 1px solid CanvasText;
  }

  .send-button,
  .button-primary { border: 1px solid CanvasText; }

  #prompt::placeholder,
  input::placeholder { color: GrayText; }

  :focus-visible { outline-color: Highlight; }
}