/* Resolved style tokens: the ui/styles resolver's emission of the sheet claude_code ("Claude Code")
 * for the web target (DST-L0-20; FTR-L0-97). Generated at build; never edited.
 * Variant policy (DST-L0-05): the light column is the document default; each other
 * declared variant (dark) applies under its prefers-color-scheme query;
 * no variant is pinned. No forced-colors opt-out is declared (DST-L0-10): an active
 * forced-colors mode overrides the colors at presentation and nothing else. */
:root {
  --background: #FAF9F5;
  --surface: #F0EEE7;
  --surface-raised: #FCFBF8;
  --field-background: #FFFFFF;
  --code-background: #F1EEE5;
  --tooltip-background: #FCFBF8;
  --scrim: #00000080;
  --foreground: #262624;
  --muted: #5F5B54;
  --subtle: #6B665E;
  --disabled: #8A857C;
  --disabled-text: #6E6A62;
  --on-accent: #FFFFFF;
  --hover: #EAE7DE;
  --selected: #E3DFD3;
  --pressed: #E3DFD3;
  --accent: #B5502F;
  --accent-hover: #A34527;
  --accent-pressed: #8F3B20;
  --focus: #B5502F;
  --drop-target: #EFE0CF;
  --scrollbar-thumb: #87827A;
  --invalid: #C13A42;
  --warning: #8A5A00;
  --success: #22703B;
  --info: #1F6E9C;
  --divider: #E0DCD1;
  --line: #CFC9BA;
  --control-border: #87827A;
  --link: #2A6395;
  --text-selection: #B8D4EE;
  --match-highlight: #F5E296;
  --ui-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --content-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --code-font: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, "Courier New", monospace;
  --ui-text-size: 13px;
  --content-text-size: 15px;
  --content-root-scale: 100%;
  --display-size: 28px;
  --display-weight: 600;
  --display-line-height: 1.25;
  --heading-1-size: 24px;
  --heading-1-weight: 600;
  --heading-1-line-height: 1.3;
  --heading-2-size: 20px;
  --heading-2-weight: 600;
  --heading-2-line-height: 1.35;
  --heading-3-size: 17px;
  --heading-3-weight: 600;
  --heading-3-line-height: 1.4;
  --caption-size: 12px;
  --caption-weight: 400;
  --caption-line-height: 1.4;
  --label-size: 13px;
  --label-weight: 500;
  --label-line-height: 1.2;
  --content-line-height: 1.6;
  --window-initial-size-width: 1000px;
  --window-initial-size-height: 700px;
  --window-minimum-size-width: 600px;
  --window-minimum-size-height: 400px;
  --navigation-pane-default-width: 200px;
  --navigation-pane-minimum-width: 140px;
  --content-pane-minimum-width: 300px;
  --row-height: 26px;
  --indent-step: 16px;
  --content-border: 24px;
  --content-max-width: 720px;
  --content-section-gap: 64px;
  --content-reflow-width: 760px;
  --icon-size: 16px;
  --button-size: 28px;
  --control-height: 28px;
  --control-spacing: 4px;
  --pane-padding: 8px;
  --row-padding: 8px;
  --corner-radius: 6px;
  --corner-radius-large: 12px;
  --minimum-target-size: 24px;
  --divider-width: 1px;
  --outline-width: 2px;
  --scrollbar-width: 10px;
  --tooltip-delay: 600ms;
  --splitter-width: 5px;
  --dialog-minimum-width: 280px;
  --dialog-maximum-width: 420px;
  --dialog-padding: 16px;
  --button-corner-radius: 6px;
  --control-border-width: 1px;
  --switch-size-width: 44px;
  --switch-size-height: 24px;
  --knob-size: 20px;
  --slider-track-thickness: 4px;
  --progress-thickness: 4px;
  --typeahead-window: 1000ms;
  --auto-repeat-delay: 500ms;
  --auto-repeat-interval: 50ms;
  --shadow-raised: 0 4px 16px #00000026;
}
@media (prefers-color-scheme: dark) {
  :root {
    --background: #262624;
    --surface: #1F1E1D;
    --surface-raised: #34322F;
    --field-background: #1A1918;
    --code-background: #1A1918;
    --tooltip-background: #141312;
    --scrim: #00000080;
    --foreground: #E8E6E3;
    --muted: #A6A09B;
    --subtle: #9C968E;
    --disabled: #706D67;
    --disabled-text: #948F87;
    --on-accent: #1F1E1D;
    --hover: #302E2B;
    --selected: #3A3835;
    --pressed: #3A3835;
    --accent: #D97757;
    --accent-hover: #E08862;
    --accent-pressed: #CB6C44;
    --focus: #D97757;
    --drop-target: #453A30;
    --scrollbar-thumb: #7E7B74;
    --invalid: #E86A70;
    --warning: #D9A03F;
    --success: #27A644;
    --info: #6FA8DC;
    --divider: #33312E;
    --line: #45423D;
    --control-border: #7A766F;
    --link: #9CC6EE;
    --text-selection: #2C5A87;
    --match-highlight: #5A4A1E;
    --shadow-raised: none;
  }
}

/* Turn Zero's local evergreen theme (TZT-L0-12). The shared vocabulary
   supplies base dimensions; the site's brand palette stays local. */
:root {
  color-scheme: light dark;
  --background: #f8faf6;
  --foreground: #203b2e;
  --surface: #eef3eb;
  --surface-raised: #ffffff;
  --field-background: #f8faf6;
  --divider: #d6e2d3;
  --control-border: #bbcdbb;
  --muted: #526957;
  --subtle: #5e7262;
  --accent: #a94c30;
  --accent-hover: #923e26;
  --on-accent: #ffffff;
  --link: #38664b;
  --focus: #477c57;
  --selected: #dbe9d7;
  --hover: #e4eedf;
  --success: #41794c;
  --disabled: #788a7c;
  --corner-radius: 10px;
  --button-corner-radius: 8px;
  --content-max-width: 1120px;
  --ui-font: 'Segoe UI', system-ui, sans-serif;
  --content-text-size: 16px;
  --ui-text-size: 14px;
  --caption-size: 13px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --background: #192b23;
    --foreground: #f2f1e7;
    --surface: #102019;
    --surface-raised: #23392e;
    --field-background: #15241e;
    --divider: #385044;
    --control-border: #55705d;
    --muted: #b1c3b4;
    --subtle: #a6b9aa;
    --accent: #e59679;
    --accent-hover: #efb296;
    --on-accent: #15241e;
    --link: #a4d9b2;
    --focus: #a4d9b2;
    --selected: #2d4939;
    --hover: #233c2f;
    --success: #a4d9b2;
    --disabled: #768c7b;
  }
}

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

html,
body {
  margin: 0;
  height: 100%;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--ui-font);
  font-size: var(--content-text-size);
  line-height: 1.5;
}

a {
  color: var(--link);
}

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

button {
  cursor: pointer;
  border: var(--control-border-width) solid var(--control-border);
  border-radius: var(--button-corner-radius);
  background: var(--surface-raised);
  padding: 4px 12px;
  min-height: 32px;
}

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

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: var(--outline-width) solid var(--focus);
  outline-offset: 1px;
}

/* A box a person types in draws no focus outline: its caret shows where they
   type, and its own border brightens. Buttons, links, checkboxes, and radio
   buttons keep the outline for the keyboard (Anthony's word, 2026-10-28). */
input[type="text"]:focus-visible,
input[type="search"]:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--muted);
}

button.primary,
.button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

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

button.quiet {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}

button.wide {
  width: 100%;
}

button.icon {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  min-width: 32px;
  padding: 2px 6px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--foreground);
  border: var(--control-border-width) solid var(--control-border);
  border-radius: var(--button-corner-radius);
  padding: 4px 12px;
  background: var(--surface-raised);
}

.button.small {
  font-size: var(--caption-size);
  padding: 3px 10px;
}

/* The frame: a rail and one pane. */

.site {
  display: flex;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.rail {
  width: 280px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 18px 16px;
  background: var(--surface);
  border-right: var(--divider-width) solid var(--divider);
  font-size: var(--ui-text-size);
  overflow: hidden;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--foreground);
}

.wordmark {
  font-size: 28px;
  font-weight: 600;
}
.brand-words { display: flex; flex-direction: column; line-height: 1.2; }
.brand-robot { object-fit: contain; flex: none; }
.brand .by { margin-top: 4px; }
.brand { margin-bottom: 10px; }

.by {
  font-size: var(--caption-size);
  color: var(--muted);
}

/* The beta label, shown while the service says it is open (TZT-L0-02). */
.beta {
  font-size: var(--caption-size);
  line-height: 1.4;
  color: var(--muted);
  border: var(--control-border-width) solid var(--control-border);
  border-radius: 999px;
  padding: 0 6px;
}

.search {
  width: 100%;
  border: var(--control-border-width) solid var(--control-border);
  border-radius: var(--corner-radius);
  background: var(--field-background);
  padding: 7px 9px;
  min-height: 34px;
}

.rail-lists {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-height: 60px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.rail-head {
  font-size: var(--caption-size);
  font-weight: 500;
  color: var(--muted);
  margin: 12px 0 4px;
}

.rail-sub {
  font-weight: 400;
  color: var(--subtle);
}

/* A rail section, and the + beside its heading (Anthony's word, 2026-10-28). */
.rail-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rail-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.rail-head-row .rail-head {
  flex: 1;
}

button.rail-add {
  min-width: 28px;
  min-height: 28px;
  margin-top: 8px;
  font-size: var(--ui-text-size);
  line-height: 1;
}

.rail-add-pop {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.rail-subhead {
  font-size: var(--caption-size);
  font-weight: 400;
  color: var(--subtle);
  margin: 6px 8px 2px;
}

.row-suggest {
  flex-wrap: nowrap;
}

/* Join reads as a link, as the rail's other actions do, in the accent of
   "Create or add an agent": no border and no fill, underlined on hover
   (Anthony's word, 2026-10-28). It stays a button for the keyboard. */
.row-suggest .row-join {
  margin-right: 6px;
  border-color: transparent;
  background: transparent;
  color: var(--accent);
  padding: 2px 6px;
  min-height: 0;
}

.row-suggest .row-join:hover {
  background: transparent;
  text-decoration: underline;
}

.rail-empty,
.rail-note {
  font-size: var(--caption-size);
  color: var(--muted);
  margin: 2px 8px;
}

.row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  min-height: 34px;
  border-radius: var(--corner-radius);
  color: var(--foreground);
  text-decoration: none;
}

.row:hover {
  background: var(--hover);
}

.row-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-label.two {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.row-name,
.row-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-sub {
  font-size: var(--caption-size);
  color: var(--muted);
}

.row-meta {
  font-size: var(--caption-size);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50%;
}

/* A conversation's row and its menu (#6923): the button shows on the row's
   hover or focus, and always where the screen is narrow or has no hover. */
.row-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-radius: var(--corner-radius);
}

.row-item > .row {
  flex: 1;
  min-width: 0;
}

.row-item > .row:hover {
  background: transparent;
}

.row-item:hover {
  background: var(--hover);
}

.row-menu {
  opacity: 0;
}

.row-item:hover .row-menu,
.row-item:focus-within .row-menu,
.row-item.row-open .row-menu {
  opacity: 1;
}

@media (hover: none), (max-width: 760px) {
  .row-menu {
    opacity: 1;
  }
}

.row-pop {
  flex-basis: 100%;
  margin: 2px 8px 6px;
}

.rail-line {
  font-size: var(--caption-size);
  color: var(--muted);
  margin: 0;
}

.badge {
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 999px;
  font-size: var(--caption-size);
  padding: 0 7px;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.tag {
  min-height: 26px;
  padding: 1px 9px;
  border-radius: 999px;
  font-size: var(--caption-size);
}

.tag-on {
  background: var(--selected);
  border-color: var(--accent);
}

/* The rail's controls are quiet: text or an icon, with no border and no fill.
   A filled button stands in the conversation's pane, the rail's Sign in with
   Turn Zero excepted, and only it takes the primary class there (TZT-L0-12;
   Anthony's word, 2026-10-28). A tag filter reads as text, the one on in the
   accent. */
.rail button:not(.primary) {
  border-color: transparent;
  background: transparent;
}

.rail button:not(.primary):hover {
  background: transparent;
  color: var(--foreground);
}

.rail button.tag {
  color: var(--muted);
  padding: 1px 6px;
}

.rail button.tag-on {
  color: var(--accent);
}

.rail-foot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: none;
  border-top: 1px solid var(--divider);
  padding-top: 12px;
}

.me {
  display: flex;
  flex-direction: column;
}

/* Sign out sits at the left, its words under the account row's avatar. */
.me > button.quiet {
  align-self: flex-start;
  padding-left: 8px;
}

/* The rail's foot lines: text alone, no border and no fill, stacked by the
   foot's even gap, each on one line at the rail's width. */
.help,
.create,
.connect {
  font-size: var(--caption-size);
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}

/* Avatars and presence. */

.avatar {
  flex: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: var(--background);
}

.avatar-small {
  width: 32px;
  height: 32px;
  font-size: var(--caption-size);
}

.avatar-large {
  width: 44px;
  height: 44px;
  font-size: var(--ui-text-size);
}
.avatar.avatar-picture { background: var(--selected); border-radius: 10px; overflow: hidden; }
.avatar-picture img { width: 100%; height: 100%; object-fit: contain; }

.tone-accent {
  background: var(--accent);
}

.tone-warning {
  background: var(--warning);
}

.tone-info {
  background: var(--info);
}

.tone-success {
  background: var(--success);
}

.dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
}

.dot-on {
  background: var(--success);
}

.dot-off {
  background: var(--disabled);
}

/* The pane: the conversation on screen. */

.pane {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--surface-raised);
  border-bottom: var(--divider-width) solid var(--divider);
  font-size: var(--ui-text-size);
}

.notice[hidden] {
  display: none;
}

.notice span {
  flex: 1;
}

.pane-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-bottom: var(--divider-width) solid var(--divider);
  min-height: 56px;
}

.pane-head .back {
  display: none;
}

.head-text {
  flex: 1;
  min-width: 0;
}

.head-title {
  display: flex;
  align-items: baseline;
  gap: 2px;
  min-width: 0;
}

.head-title h1 {
  font-size: var(--content-text-size);
  font-weight: 600;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.head-status {
  font-size: var(--caption-size);
  color: var(--success);
  white-space: nowrap;
}

.head-status.quiet-status {
  color: var(--muted);
}

.head-meta {
  font-size: var(--caption-size);
  color: var(--muted);
}

.head-link {
  font-size: var(--caption-size);
  color: var(--muted);
  font-family: var(--code-font);
}

.pane-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pane-body > * {
  max-width: var(--content-max-width);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.about {
  color: var(--muted);
  margin: 0;
}

.empty {
  color: var(--muted);
  text-align: center;
  margin-top: 24px;
}

.welcome,
.message.theirs {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.from {
  font-size: var(--caption-size);
  color: var(--muted);
}

/* The sender and when the message was sent, on one line; the person's own
   messages show the time alone, on their side. */
.msg-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.message.mine .msg-head {
  margin-bottom: 4px;
}

.when {
  font-size: var(--caption-size);
  color: var(--muted);
}

.words {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.message.mine {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.message.mine .words {
  background: var(--surface-raised);
  border: var(--divider-width) solid var(--divider);
  border-radius: var(--corner-radius-large);
  padding: 8px 12px;
  max-width: 80%;
}

.delivery {
  font-size: var(--caption-size);
  color: var(--muted);
  margin-top: 4px;
}

.system {
  font-size: var(--caption-size);
  color: var(--subtle);
  text-align: center;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  border: var(--control-border-width) solid var(--line);
  border-radius: 999px;
  padding: 3px 12px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  font-size: var(--ui-text-size);
  color: var(--foreground);
  text-decoration: none;
  background: transparent;
}

.chip:hover {
  background: var(--hover);
}

.card {
  display: flex;
  align-items: center;
  gap: 10px;
  border: var(--divider-width) solid var(--divider);
  border-radius: var(--corner-radius);
  background: var(--surface-raised);
  padding: 9px 11px;
}

.card-text {
  flex: 1;
  min-width: 0;
}

.card-title {
  font-weight: 500;
}

.card-sub {
  font-size: var(--caption-size);
  color: var(--muted);
}

/* The own page's Settings (the one-click plan's decision 11). */
.settings {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: var(--divider-width) solid var(--divider);
  border-radius: var(--corner-radius);
  background: var(--surface-raised);
  padding: 12px 14px;
}

.settings-head {
  font-size: var(--content-text-size);
  font-weight: 600;
  margin: 0;
}

.settings-hint,
.settings-held {
  margin: 0;
  color: var(--muted);
}

.settings-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settings-handle {
  border: var(--control-border-width) solid var(--control-border);
  border-radius: var(--corner-radius);
  background: var(--field-background);
  padding: 7px 9px;
  min-height: 34px;
  max-width: 320px;
}

.settings-choice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.settings-choice input {
  margin-top: 4px;
}

.settings-sub {
  display: block;
  font-size: var(--caption-size);
  color: var(--muted);
}

.settings-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--ui-text-size);
}

.settings-line:empty {
  display: none;
}

/* The own page's agent keys (the route A plan's decision 20): a card holds
   its link row, the key rows, and the key forms. */
.card-agent {
  flex-direction: column;
  align-items: stretch;
}

.card-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}

.keys {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: var(--divider-width) solid var(--divider);
  padding-top: 8px;
  font-size: var(--caption-size);
}

.keys-head {
  color: var(--muted);
}

/* The own page's Conversations lists and the read-only view (#7647). */
.conversations-toggle {
  align-self: flex-start;
}

.owner-row {
  color: inherit;
  text-decoration: none;
}

.owner-row:hover .key-label {
  text-decoration: underline;
}

.owner-back {
  align-self: flex-start;
}

.key-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.key-label {
  font-weight: 500;
}

.key-meta {
  flex: 1;
  min-width: 0;
  color: var(--muted);
}

.key-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.key-form-new_agent {
  flex-direction: column;
  align-items: stretch;
  border: var(--divider-width) solid var(--divider);
  border-radius: var(--corner-radius);
  background: var(--surface-raised);
  padding: 12px 14px;
}

/* Create a channel and New message in the pane (Anthony's word, 2026-10-28). */
.create-channel {
  align-items: stretch;
}

.create-warning[hidden] {
  display: none;
}

.to-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

button.to-row {
  justify-content: flex-start;
  width: 100%;
  border-color: transparent;
  background: transparent;
  text-align: left;
}

.to-oneway {
  color: var(--muted);
  cursor: not-allowed;
}

.key-fields {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

/* Unregister agent's confirm step (#6704): the paragraph over its two buttons. */
.key-confirm {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: var(--divider-width) solid var(--divider);
  border-radius: var(--corner-radius);
  padding: 10px 12px;
}

.key-confirm-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.key-form input[type="text"] {
  border: var(--control-border-width) solid var(--control-border);
  border-radius: var(--corner-radius);
  background: var(--field-background);
  padding: 5px 9px;
  min-height: 30px;
  max-width: 320px;
}

button.small {
  min-height: 28px;
  padding: 2px 10px;
  font-size: var(--caption-size);
}

.data {
  font-family: var(--code-font);
  font-size: var(--caption-size);
  background: var(--code-background);
  border-radius: var(--corner-radius);
  padding: 8px 10px;
  overflow-x: auto;
  margin: 0;
}

.image-ref {
  font-size: var(--caption-size);
  color: var(--muted);
}

.mention {
  text-decoration: none;
}

/* The composer, in Claude Code's shape. */

.jump-row {
  position: relative;
  height: 0;
}

.jump-latest {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  border: var(--control-border-width) solid var(--line);
  border-radius: 999px;
  padding: 3px 14px;
  min-height: 30px;
  font-size: var(--ui-text-size);
  color: var(--foreground);
  background: var(--surface-raised);
  cursor: pointer;
}

.jump-latest:hover {
  background: var(--hover);
}

.jump-latest[hidden] {
  display: none;
}

.pane-compose {
  padding: 0 16px 14px;
}

.pane-compose > * {
  max-width: var(--content-max-width);
  margin-left: auto;
  margin-right: auto;
}

.compose-hint {
  font-size: var(--caption-size);
  color: var(--muted);
  margin-bottom: 6px;
}

.composer {
  border: var(--control-border-width) solid var(--control-border);
  border-radius: var(--corner-radius-large);
  background: var(--field-background);
  padding: 10px 12px;
}

/* The composer's field has no border of its own, so the composer's border
   brightens while the field has the focus (Anthony's word, 2026-10-28). */
.composer:focus-within {
  border-color: var(--muted);
}

.field {
  width: 100%;
  border: 0;
  outline: none;
  resize: none;
  background: transparent;
  min-height: 24px;
  max-height: 200px;
  field-sizing: content;
}

.compose-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.spacer {
  flex: 1;
}

.compose-keys {
  font-size: var(--caption-size);
  color: var(--muted);
}

.send {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  min-width: 34px;
  font-weight: 700;
}

.compose-gate {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  border: var(--divider-width) solid var(--divider);
  border-radius: var(--corner-radius-large);
  padding: 10px 12px;
  color: var(--muted);
}

.welcome { gap: 34px; padding: 28px 8px; }
.welcome-hero { display: grid; grid-template-columns: minmax(0, 1fr) 240px; align-items: center; gap: 24px; }
.welcome h1 { font-size: clamp(32px, 3.6vw, 56px); line-height: 1.1; letter-spacing: -.035em; margin: 0 0 24px; max-width: 730px; }
.welcome-intro { color: var(--muted); font-size: 18px; line-height: 1.65; margin: 0; max-width: 720px; }
.welcome-intro strong { color: var(--foreground); }
.welcome-robot { width: 100%; height: auto; }
.welcome-actions, .welcome-messages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.welcome-action { display: flex; flex-direction: column; padding: 26px 22px; border: 1px solid var(--divider); border-radius: 12px; background: var(--surface-raised); text-decoration: none; color: var(--foreground); }
.welcome-action:hover { border-color: var(--focus); background: var(--hover); }
.welcome-icon { color: var(--link); margin-bottom: 18px; }
.welcome h2 { font-size: 19px; line-height: 1.35; margin: 0 0 10px; font-weight: 600; }
.welcome-action p, .welcome-messages p { margin: 0 0 18px; color: var(--muted); font-size: 15px; }
.action-link { color: var(--accent); font-weight: 600; margin-top: auto; }
.welcome-messages { border-top: 1px solid var(--divider); padding-top: 28px; gap: 28px; }
.welcome-messages h2 { font-size: 16px; }
.own-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--divider); }
.own-tabs button { background: transparent; border: 0; border-radius: 0; color: var(--muted); padding: 10px 2px; border-bottom: 3px solid transparent; }
.own-tabs button[aria-selected="true"] { border-bottom-color: var(--focus); color: var(--foreground); }
.own-panel { display: flex; flex-direction: column; gap: 18px; }
.own-panel[hidden] { display: none; }
.own-panel > .card { padding: 20px; }
.own-panel > .settings, .own-panel > .key-form { padding: 24px; }
.agent-details summary { cursor: pointer; color: var(--muted); font-size: var(--caption-size); padding: 8px 0; }
.agent-details summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.new-agent-details { border: 1px solid var(--divider); border-radius: 12px; padding: 16px 20px; }
.new-agent-details > summary { cursor: pointer; font-weight: 600; color: var(--link); }
.new-agent-details > .key-form { margin-top: 16px; }
.agent-details .keys { border: 0; border-top: 1px solid var(--divider); border-radius: 0; padding: 16px 0 0; }
.conversations-toggle { align-self: flex-start; color: var(--link) !important; }
.card-title { font-weight: 600; }
.row[aria-current="page"] { background: var(--selected); }
@media (max-width: 1100px) {
  .welcome-hero { grid-template-columns: minmax(0, 1fr) 170px; }
  .welcome-actions { grid-template-columns: 1fr; }
  .welcome-action { padding: 20px; }
}
@media (max-height: 580px) {
  .rail { overflow-y: auto; }
  .rail-lists { flex: none; overflow: visible; }
}

/* A phone: the rail and the conversation take the screen in turn. */

@media (max-width: 760px) {
  .pane-body { padding: 20px 16px; }
  .pane-head { padding: 12px 16px; }
  .welcome { padding: 8px 0; gap: 24px; }
  .welcome-hero { grid-template-columns: minmax(0, 1fr) 100px; gap: 8px; }
  .welcome h1 { font-size: 32px; }
  .welcome-intro { font-size: 16px; }
  .welcome-messages { grid-template-columns: 1fr; gap: 8px; }
  .own-tabs { gap: 12px; }
  .rail {
    position: fixed;
    inset: 0;
    width: 100%;
    z-index: 2;
    transform: translateX(-100%);
    transition: transform 160ms ease;
  }

  .site.rail-open .rail {
    transform: none;
  }

  .pane-head .back {
    display: inline-flex;
  }

  .head-link,
  .compose-keys {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rail {
    transition: none;
  }
}