:root {
  color-scheme: dark;
  --bg: #0f1113;
  --surface: #15181b;
  --surface-2: #1b1f23;
  --surface-3: #242a30;
  --border: #2a3036;
  --border-strong: #3d454d;
  --text: #e7e9ec;
  --muted: #9aa4ae;
  --faint: #6f7a85;
  --accent: #9bcfff;
  --accent-ink: #0b1724;
  --danger: #ffaca5;
  --ok: #83dec2;
  --gpt: #6fd3a8;
  --claude: #eba57e;
  --gemini: #8fb2ff;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --sidebar: 280px;
  --workspace-width: 420px;
  --content: 820px;
  font:
    16px/1.6 system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* A text workspace next to the conversation; a drawer on smaller screens. */
#workspace-editor {
  position: relative;
  width: var(--workspace-width);
  flex: 0 0 var(--workspace-width);
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border);
  background: var(--surface);
}
.editor-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.editor-head h2 {
  font-size: 16px;
  margin: 0;
  flex: 1;
}
#editor-tabs {
  display: flex;
  padding: 10px 12px;
  gap: 5px;
}
#editor-tabs button {
  flex: 1;
  font-size: 13px;
  background: transparent;
  padding: 7px;
}
#context-watch[aria-expanded="true"] {
  background: #203b32;
}
#editor-tabs [aria-selected="true"] {
  background: var(--surface-3);
  color: var(--text);
  border-color: var(--border-strong);
}
#editor-pane {
  padding: 0 16px 20px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  overscroll-behavior: contain;
}
#editor-note {
  margin: 2px 0 12px;
}
/* Saved-memory garden: a zoomable map of topic beds, with recorded edges only. */
#memory-views [aria-pressed="true"] {
  background: var(--surface-3);
  border-color: var(--accent);
}
#memory-graph {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: radial-gradient(ellipse at top, #1c302a, var(--surface) 75%);
  padding: 10px 8px;
  margin-bottom: 14px;
}
.memory-filters {
  align-items: center;
  font-size: 12px;
  margin: 0 2px;
}
.memory-filters label:first-child { flex: 1; min-width: 0; }
.memory-filters select { max-width: 100%; width: 100%; font-size: 12px; }
.memory-filters label:not(:first-child) { display: flex; align-items: center; gap: 5px; min-height: 36px; }
#memory-history, #memory-similar { width: 16px; height: 16px; min-height: 16px; padding: 0; margin: 0; flex: 0 0 16px; }
#memory-graph-status { font-size: 12px; margin: 10px 4px 0; }
#memory-canvas { position: relative; margin-top: 8px; border: 1px solid #263a31; border-radius: var(--radius); overflow: hidden; }
#memory-scene { width: 100%; height: clamp(300px, 52vh, 680px); display: block; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
#memory-scene.memory-panning { cursor: grabbing; }
.memory-zoom { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; }
.memory-zoom button { min-width: 36px; min-height: 36px; padding: 2px 9px; font-size: 13px; background: var(--surface); }
.memory-bed { fill: #17251f; fill-opacity: .65; stroke: #334b40; vector-effect: non-scaling-stroke; }
.memory-topic-label { fill: #b7c9be; font: 13px system-ui, sans-serif; cursor: zoom-in; }
.memory-topic-label:hover { fill: var(--text); }
.memory-node { cursor: pointer; outline: none; transition: opacity .15s; }
.memory-hit { fill: transparent; }
.memory-glyph { transform: scale(var(--memory-glyph, 1)); }
.memory-halo { fill: var(--accent); fill-opacity: 0; stroke: var(--accent); stroke-opacity: 0; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.memory-node:hover .memory-halo { fill-opacity: .12; }
.memory-node:focus-visible .memory-halo, .memory-selected .memory-halo { fill-opacity: .16; stroke-opacity: 1; }
.memory-node[aria-disabled="true"] { cursor: wait; }
/* Zoomed out, the map shows shape: full labels give way to a short caption at
   reading size, then to seeds alone. */
.memory-far .memory-label, .memory-far .memory-status { visibility: hidden; }
.memory-caption { fill: var(--text); font: 10px system-ui, sans-serif; font-size: calc(10px * var(--memory-inverse, 1)); pointer-events: none; visibility: hidden;
  transform: translateY(calc(21px * var(--memory-glyph, 1) + 13px * var(--memory-inverse, 1))); }
.memory-far:not(.memory-distant) .memory-caption { visibility: visible; }
.memory-inactive .memory-caption { fill: var(--muted); }
.memory-focused .memory-node:not(.memory-near) { opacity: .4; }
.memory-focused .memory-edge:not(.memory-edge-lit) { opacity: .2; }
.memory-edge.memory-edge-lit { opacity: 1; stroke-width: 2.2; }
/* The selected memory, over the foot of the map so the map never shifts. */
#memory-focus { position: absolute; left: 8px; right: 8px; bottom: 8px; max-height: 46%; overflow-y: auto; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); }
.memory-focus-head { display: flex; align-items: center; gap: 8px; }
#memory-focus-meta { flex: 1; min-width: 0; margin: 0; font-size: 11px; overflow-wrap: anywhere; }
#memory-focus-open { flex: none; min-height: 32px; padding: 3px 12px; font-size: 12px; }
#memory-focus-text { margin: 4px 0 0; font-size: 13px; line-height: 1.45; max-height: 5.8em; overflow-y: auto; overflow-wrap: anywhere; }
#memory-focus-links { margin: 8px 0 0; }
#memory-focus-links button { text-align: left; overflow-wrap: anywhere; }
.memory-seed { fill: currentColor; stroke: currentColor; stroke-width: 1.5; }
.memory-commitment { color: #83dec2; }
.memory-preference { color: #d5b2f2; }
.memory-claim { color: #9bcfff; }
.memory-question { color: #ecc88c; }
.memory-named { color: #edab86; }
.memory-sprout { fill: none; stroke: #17312a; stroke-width: 1.7; stroke-linecap: round; }
.memory-active-ring { fill: none; stroke: currentColor; stroke-width: 2; opacity: .85; }
.memory-pointer .memory-seed { fill: #1c302a; }
.memory-pointer .memory-sprout { stroke: currentColor; }
.memory-inactive .memory-seed, .memory-inactive .memory-sprout { opacity: .35; }
.memory-inactive .memory-label { fill: var(--muted); }
.memory-label { fill: var(--text); font: 13px system-ui, sans-serif; pointer-events: none; }
.memory-status { fill: #aebeb5; font: 11px system-ui, sans-serif; pointer-events: none; }
.memory-edge { fill: none; stroke: #8da9a0; stroke-width: 1.5; opacity: .65; pointer-events: stroke; vector-effect: non-scaling-stroke; }
.memory-edge-conflicts_with { stroke: var(--danger); stroke-dasharray: 4 4; }
.memory-edge-supersedes { stroke: #d5b2f2; }
.memory-edge-supports { stroke: var(--ok); }
/* Similar meaning, from embeddings: dots, so it never reads as a recorded link. */
.memory-edge-semantic { stroke: #7fa3c7; stroke-width: 2; stroke-dasharray: 0.01 6; stroke-linecap: round; opacity: .7; }
.memory-edge-semantic.memory-edge-lit { stroke: var(--accent); stroke-width: 2.8; }
.memory-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: var(--muted); margin: 0 6px; }
.memory-legend span:nth-last-child(-n + 2) { flex-basis: 100%; }
#editor-memory-proposals { margin-bottom: 10px; }
#editor-memory-proposals summary { font-size: 13px; }
#editor-memory-proposals p { overflow-wrap: anywhere; font-size: 12px; }
#editor-memory-connections button { text-align: left; overflow-wrap: anywhere; }
#editor-items {
  display: grid;
  gap: 5px;
  max-height: 220px;
  overflow-y: auto;
  margin-bottom: 14px;
}
#workspace-editor[data-tab="context"] #editor-items,
#workspace-editor[data-tab="state"] #editor-items {
  max-height: none;
  overflow: visible;
}
#editor-items > button {
  text-align: left;
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 13px;
  overflow-wrap: anywhere;
}
#editor-items [aria-current="true"] {
  border-color: var(--accent);
}
#editor-items small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
}
#workspace-editor:not([data-tab="documents"]) #editor-items > button {
  font-weight: 600;
}
#editor-back {
  margin: 0 0 2px -6px;
}
#editor-pane > details > summary,
#editor-document > details > summary {
  font-size: 13px;
}
#editor-document h3 {
  margin: 12px 0 3px;
  font-size: 16px;
  overflow-wrap: anywhere;
}
#editor-meta {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin-bottom: 12px;
}
.editor-toolbar,
.editor-save-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 10px 0;
}
.editor-toolbar button,
.editor-save-row button,
#editor-new-state,
#editor-memory-copy {
  font-size: 12px;
  min-height: 34px;
  padding: 5px 9px;
}
#editor-save {
  background: var(--accent);
  color: var(--accent-ink);
}
#editor-text {
  width: 100%;
  min-height: 300px;
  height: 45vh;
  resize: vertical;
  padding: 12px;
  margin: 10px 0;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font:
    13px/1.65 ui-monospace,
    Consolas,
    monospace;
  white-space: pre-wrap;
}
#editor-preview {
  padding: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-height: 160px;
  overflow-wrap: anywhere;
}
#editor-preview pre {
  white-space: pre-wrap;
}
#editor-preview.plain-text,
#editor-identifiers-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font:
    13px/1.65 ui-monospace,
    Consolas,
    monospace;
}
#editor-state-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
#editor-state-fields label:first-child {
  grid-column: 1/-1;
}
#editor-feedback {
  margin-top: 10px;
  white-space: pre-wrap;
}
@media (max-width: 1199px) {
  #workspace-editor {
    position: fixed;
    z-index: 45;
    inset: 0 0 0 auto;
    width: min(460px, 100vw);
    box-shadow: -18px 0 60px #0008;
  }
}
@media (max-width: 600px) {
  #workspace-editor {
    width: 100%;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  #workspace-open span {
    display: none;
  }
  #editor-text {
    min-height: 240px;
  }
}
* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}
body {
  display: flex;
  background: var(--bg);
}
[hidden] {
  display: none !important;
}
button > svg,
summary > svg,
.icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#i-more circle {
  fill: currentColor;
}

/* Controls */
button,
select,
input,
textarea {
  font: inherit;
  color: inherit;
}
button,
select,
input {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
button {
  min-height: 40px;
  padding: 7px 14px;
  cursor: pointer;
  touch-action: manipulation;
  font-size: 14px;
}
button:hover:not(:disabled) {
  border-color: #8fa1b1;
}
button:disabled {
  opacity: 0.45;
  cursor: default;
}
select,
input {
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  margin-top: 5px;
}
summary {
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
label {
  display: block;
  font-size: 13px;
  color: var(--muted);
}
.note {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}
.error {
  color: var(--danger);
  white-space: pre-wrap;
  font-size: 14px;
}
.icon-button {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 10px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  list-style: none;
}
.icon-button::-webkit-details-marker {
  display: none;
}
.icon-button:hover:not(:disabled),
details[open] > summary.icon-button {
  background: var(--surface-3);
  border-color: transparent;
  color: var(--text);
}
.ghost-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border-color: #3f5d55;
  color: #a9edda;
  border-radius: 999px;
  padding: 6px 12px;
  min-height: 36px;
  font-size: 13px;
}
.ghost-button svg {
  width: 17px;
  height: 17px;
}
.link-button {
  background: none;
  border: 0;
  padding: 4px 6px;
  min-height: 32px;
  color: var(--muted);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-button:hover {
  color: var(--text);
}

/* Sidebar */
#sidebar {
  position: relative;
  width: var(--sidebar);
  flex: none;
  height: var(--app-height, 100dvh);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: max(14px, env(safe-area-inset-top)) 12px
    max(14px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: var(--surface);
  border-right: 1px solid var(--border);
  z-index: 30;
}
.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  padding-left: 4px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 650;
  letter-spacing: 0.01em;
}
.brand img {
  border-radius: 6px;
}
#sidebar-close {
  display: none;
}
.new-chat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  font-weight: 600;
  background: var(--surface-3);
}
.new-chat svg {
  width: 18px;
  height: 18px;
}
#chat-search {
  margin: 0;
  min-height: 38px;
  font-size: 14px;
  background: var(--bg);
  border-color: var(--border);
}
.chat-lists {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin: 0 -4px;
  padding: 0 4px;
}
.chat-lists h2 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 14px 8px 6px;
}
.chat-lists section:first-child h2 {
  margin-top: 4px;
}
#no-chats {
  padding: 10px 8px;
}
.chat-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.chat-list li {
  position: relative;
}
.chat-item {
  display: block;
  width: 100%;
  min-height: 0;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 8px 34px 8px 10px;
  color: var(--text);
}
.chat-item:hover:not(:disabled) {
  background: var(--surface-2);
  border-color: transparent;
}
.chat-item[aria-current="true"] {
  background: var(--surface-3);
}
.chat-item .chat-name {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
}
.chat-item .chat-meta {
  display: block;
  font-size: 12px;
  color: var(--faint);
}
.chat-delete {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  color: var(--faint);
  opacity: 0;
}
.chat-delete svg {
  width: 15px;
  height: 15px;
}
li:hover .chat-delete,
.chat-delete:focus-visible {
  opacity: 1;
}
.chat-delete:hover {
  color: var(--danger);
}
@media (hover: none) {
  .chat-delete {
    opacity: 0.7;
  }
}
#model-panel {
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
#model-panel > summary {
  padding: 6px 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.model-panel-body {
  padding: 2px 4px 4px;
  max-height: 42dvh;
  overflow-y: auto;
}
.models {
  display: grid;
  gap: 10px;
  margin: 6px 0 10px;
}
.models label::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: 1px;
}
.models select {
  font-size: 14px;
}
.model-panel-body .error {
  display: block;
  overflow-wrap: anywhere;
  font-size: 12px;
}
.model-panel-body .note {
  font-size: 12px;
}
#scrim {
  position: fixed;
  inset: 0;
  background: #0009;
  z-index: 25;
}

/* Main column */
main {
  flex: 1;
  min-width: 0;
  height: var(--app-height, 100dvh);
  display: flex;
  flex-direction: column;
  position: relative;
}
.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: max(10px, env(safe-area-inset-top)) 16px 10px;
  border-bottom: 1px solid var(--border);
  min-height: 60px;
  flex: none;
}
.chat-heading {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.chat-heading h1 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.mode-badge {
  flex: none;
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 1px 9px;
  white-space: nowrap;
}
.mode-badge[data-mode="context"] {
  color: #a9edda;
  border-color: #3f5d55;
}
.mode-badge[data-mode="agent"] {
  color: #f1d39a;
  border-color: #6b5a39;
}
.menu {
  position: relative;
}
.menu-items {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 200px;
  display: flex;
  flex-direction: column;
  padding: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 16px 40px #000a;
  z-index: 40;
}
.menu-items button {
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
}
.menu-items button:hover:not(:disabled) {
  background: var(--surface-3);
}

/* Pull to refresh: a chip that follows a downward drag from the top of the chat. */
#pull-refresh {
  position: absolute;
  top: calc(max(10px, env(safe-area-inset-top)) + 46px);
  left: 50%;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-left: -18px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--muted);
  box-shadow: 0 6px 18px #0008;
  pointer-events: none;
  opacity: var(--show, 0);
  transform: translateY(var(--pull, 0px));
  transition:
    opacity 0.2s,
    transform 0.2s;
}
#pull-refresh[data-state="pull"],
#pull-refresh[data-state="ready"] {
  transition: none;
}
#pull-refresh[data-state="ready"],
#pull-refresh[data-state="refreshing"] {
  color: var(--accent);
}
#pull-refresh svg {
  transform: rotate(var(--turn, 0deg));
}
#pull-refresh[data-state="refreshing"] svg {
  animation: pull-spin 0.8s linear infinite;
}
@keyframes pull-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  #pull-refresh {
    transition: none;
  }
  #pull-refresh[data-state="refreshing"] svg {
    animation: none;
  }
}

/* Conversation */
#chat {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding: 20px;
  padding: 8px max(16px, calc((100% - var(--content)) / 2)) 24px;
}
article {
  padding: 16px 0;
  min-width: 0;
}
.msg-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.avatar {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--muted);
}
.msg-head strong {
  font-size: 14px;
}
.msg-head small {
  color: var(--faint);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
[data-provider="gpt"] .avatar,
.models label:nth-child(1)::before {
  background: var(--gpt);
}
[data-provider="claude"] .avatar,
.models label:nth-child(2)::before {
  background: var(--claude);
}
[data-provider="gemini"] .avatar,
.models label:nth-child(3)::before {
  background: var(--gemini);
}
article[data-provider] .content {
  padding-left: 32px;
}
.msg-user {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.msg-user .msg-head {
  display: none;
}
.msg-user .bubble {
  max-width: min(85%, 640px);
  background: var(--surface-3);
  border-radius: var(--radius-lg) var(--radius-lg) 6px var(--radius-lg);
  padding: 10px 16px;
  min-width: 0;
}
.msg-user .content {
  margin-top: 0;
}
.content {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin-top: 6px;
  min-width: 0;
}
.msg-actions {
  display: flex;
  gap: 4px;
  padding-left: 28px;
  margin-top: 6px;
  opacity: 0.75;
  transition: opacity 150ms;
}
article:hover .msg-actions,
.msg-actions:focus-within {
  opacity: 1;
}
.copy-response,
.copy-message,
.edit-message,
.copy-code {
  min-height: 30px;
  padding: 3px 10px;
  font-size: 12px;
  color: var(--muted);
  background: transparent;
  border-color: transparent;
}

.msg-user .msg-actions {
  justify-content: flex-end;
}
.message-edit-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 14px 0;
  color: var(--muted);
  font-size: 12px;
}
.edit-message:hover:not(:disabled) {
  background: var(--surface-2);
  color: var(--text);
}
.markdown .katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.35em 0;
  max-width: 100%;
}
.markdown .katex {
  font-size: 1.08em;
}
.copy-response:hover:not(:disabled),
.copy-message:hover:not(:disabled) {
  background: var(--surface-2);
  color: var(--text);
}
article > .error:not(.content) {
  padding-left: 32px;
  margin: 8px 0 0;
}
.typing {
  display: inline-flex;
  gap: 5px;
  padding: 8px 0;
}
.typing i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
  animation: typing 1.2s infinite ease-in-out;
}
.typing i:nth-child(2) {
  animation-delay: 0.15s;
}
.typing i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes typing {
  0%,
  80%,
  100% {
    opacity: 0.25;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-3px);
  }
}
.attachment-card {
  margin-top: 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  max-width: 100%;
  text-align: left;
}
.attachment-card summary {
  padding: 7px 12px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.file-icon {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 4px;
  padding: 1px 5px;
}
.attachment-card pre {
  margin: 0;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  max-height: 300px;
  overflow: auto;
  font:
    13px/1.5 Consolas,
    ui-monospace,
    monospace;
  white-space: pre-wrap;
}

/* Empty state */
#empty {
  max-width: 560px;
  margin: 0 auto;
  padding: 9vh 0 24px;
  text-align: center;
}
#empty h2 {
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 600;
}
#empty p {
  color: var(--muted);
  margin: 0 auto 20px;
  max-width: 460px;
  font-size: 15px;
}
.starters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  text-align: left;
}
.starters button {
  min-height: 0;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
  line-height: 1.45;
}
.starters button:hover:not(:disabled) {
  background: var(--surface-2);
}
.starters strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 2px;
}
.starters span {
  font-size: 13px;
  color: var(--muted);
}

#jump {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--composer-height, 180px) + 12px);
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  min-height: 34px;
  padding: 4px 14px 4px 10px;
  background: var(--surface-3);
  box-shadow: 0 8px 24px #0008;
  font-size: 13px;
  z-index: 5;
}
#jump svg {
  width: 16px;
  height: 16px;
}

/* Composer */
#composer {
  flex: none;
  position: relative;
  padding: 8px max(16px, calc((100% - var(--content)) / 2))
    max(12px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.composer-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  min-height: 34px;
}
#mode-switch {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
}
#mode-switch.single {
  display: none;
}
#mode-switch label {
  position: relative;
  display: block;
  font-size: 13px;
  color: var(--muted);
}
#mode-switch input {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  cursor: pointer;
}
#mode-switch input:disabled {
  cursor: not-allowed;
}
#mode-switch span {
  display: block;
  padding: 4px 13px;
  border-radius: 999px;
}
#mode-switch input:checked + span {
  background: var(--surface-3);
  color: var(--text);
  font-weight: 600;
}
#mode-switch input:focus-visible + span {
  outline: 2px solid var(--accent);
}
#mode-switch input:disabled:not(:checked) + span {
  opacity: 0.45;
}
#recipients {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
#recipients .label {
  font-size: 13px;
  color: var(--faint);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 3px 11px 3px 8px;
  border-radius: 999px;
  font-size: 13px;
  background: transparent;
  border-color: var(--border-strong);
  color: var(--muted);
  max-width: 100%;
  /* Holding a chip opens its model menu instead of selecting or panning. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.chip::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--dot);
}
.chip[aria-pressed="true"] {
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--dot);
}
.chip[aria-pressed="true"]::before {
  background: var(--dot);
}
.chip[aria-pressed="true"]:hover:not(:disabled) {
  border-color: var(--dot);
}
.chip[aria-expanded="true"] {
  color: var(--text);
  background: var(--surface-3);
}
.chip small {
  color: var(--faint);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
:is(.chip, #model-menu)[data-name="GPT"] {
  --dot: var(--gpt);
}
:is(.chip, #model-menu)[data-name="Claude"] {
  --dot: var(--claude);
}
:is(.chip, #model-menu)[data-name="Gemini"] {
  --dot: var(--gemini);
}
/* Model menu (opens above the chip it belongs to) */
#model-menu {
  position: absolute;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  max-width: calc(100% - 16px);
  max-height: min(
    340px,
    calc(var(--app-height, 100dvh) - var(--composer-height, 190px) - 16px)
  );
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 -12px 40px #000a;
  user-select: none;
  -webkit-user-select: none;
}
.menu-title {
  flex: none;
  padding: 4px 10px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
#model-menu button {
  flex: none;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 12px 6px 10px;
  text-align: left;
  overflow-wrap: anywhere;
  background: transparent;
  border: 0;
  color: var(--muted);
  outline-offset: -2px;
}
#model-menu button::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
#model-menu [aria-checked="true"] {
  color: var(--text);
}
#model-menu [aria-checked="true"]::before {
  background: var(--dot);
}
#model-menu button:is(:hover, :focus-visible, .is-active) {
  background: var(--surface-3);
  color: var(--text);
}
#models-link {
  margin-left: auto;
}
/* Run-level notices sit in the conversation, after the latest reply. */
.run-notice {
  margin: 4px 0 12px;
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font-size: 13px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#agent-notice {
  margin: 0;
  overflow-wrap: anywhere;
}
#agent-notice[data-error="true"] {
  color: var(--danger);
}
.run-notice:has(#agent-notice[data-error="true"]:not([hidden])) {
  border-color: #6b3a37;
  background: #2a1716;
}
.run-paused {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.run-paused:has(#agent-resume[hidden]) {
  display: none;
}
#agent-resume {
  min-height: 32px;
  padding: 3px 14px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  font-weight: 600;
}
.turn-error {
  margin: 6px 0 12px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid #6b3a37;
  background: #2a1716;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@keyframes working-pulse {
  50% {
    opacity: 0.35;
  }
}
#workspace-panel {
  position: relative;
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding: 6px 10px 2px;
  font-size: 14px;
}
#workspace-panel summary {
  color: var(--accent);
}
#workspace-downloads {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 0;
  max-height: 140px;
  overflow: auto;
}
#workspace-downloads a {
  color: inherit;
}
.composer-box {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 4px;
  transition: border-color 150ms;
}
.composer-row {
  display: flex;
  align-items: flex-end;
  gap: 2px;
}
.composer-row > .icon-button,
.composer-row > details > summary.icon-button {
  width: 38px;
  height: 38px;
  min-height: 38px;
}
.composer-box:focus-within {
  border-color: #6c8199;
}
.composer-box textarea {
  display: block;
  flex: 1;
  min-width: 0;
  resize: none;
  border: 0;
  background: transparent;
  padding: 8px 6px;
  min-height: 38px;
  max-height: 36dvh;
  font-size: 16px;
  line-height: 1.5;
  outline: none;
  overflow-y: auto;
}
.composer-box textarea:placeholder-shown {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.composer-box:has(textarea:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.attachment-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 6px 6px 0;
  padding: 3px 4px 3px 10px;
  border-radius: 999px;
  background: var(--surface-3);
  font-size: 13px;
  max-width: calc(100% - 12px);
}
#filename {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#remove-file {
  width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
}
#remove-file svg {
  width: 14px;
  height: 14px;
}
.composer-status {
  margin: 0;
  padding: 0 6px;
  font-size: 13px;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.composer-status[data-idle="true"] {
  display: none;
}
#send,
#agent-stop {
  flex: none;
  min-height: 38px;
  padding: 6px 18px;
  border-radius: 999px;
  border: 0;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 650;
}
#send:hover:not(:disabled) {
  background: #b8ddff;
}
#agent-stop {
  background: var(--surface-3);
  color: var(--text);
  border: 1px solid var(--border-strong);
}
#agent-stop::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  border-radius: 2px;
  background: currentColor;
}
.composer-row:has(#agent-stop:not([hidden])) #send {
  display: none;
}

/* Settings sheet (opens above the composer) */
#context-panel.unused {
  display: none;
}
#context-panel > .sheet {
  position: absolute;
  right: max(16px, calc((100% - var(--content)) / 2));
  width: min(var(--settings-width, var(--content)), calc(100% - 32px));
  bottom: calc(100% - 4px);
  height: var(--settings-height, auto);
  max-height: calc(var(--app-height, 100dvh) - var(--composer-height, 190px) - 24px);
  overflow-y: auto;
  padding: 16px 18px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 -12px 48px #000b;
  z-index: 20;
  font-size: 14px;
}
.sheet-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}
#sheet-close {
  margin-left: auto;
  width: 34px;
  height: 34px;
  min-height: 34px;
}
.sheet-head h2 {
  margin: 0;
  font-size: 16px;
}
.sheet details {
  border-top: 1px solid var(--border);
  padding: 10px 0 2px;
  margin-top: 12px;
}
.sheet details > summary {
  font-size: 14px;
  color: var(--text);
}
.sheet .note {
  margin: 6px 0;
}
.context-controls,
.remember-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
  margin: 10px 0;
}
.context-controls label {
  flex: 1 1 150px;
}
.check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  font-size: 14px;
  color: var(--text);
}
.check-label input {
  width: auto;
  min-height: 0;
  margin: 0;
}
.remember-controls input {
  flex: 1 1 160px;
  width: auto;
}
.remember-controls select {
  width: auto;
}
#context-preview,
#agent-files {
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font:
    13px/1.5 system-ui,
    sans-serif;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px;
}

/* Markdown */
.markdown {
  white-space: normal;
  min-width: 0;
}
.markdown > :first-child {
  margin-top: 0;
}
.markdown > :last-child {
  margin-bottom: 0;
}
.markdown p {
  margin: 10px 0;
}
.markdown h1,
.markdown h2,
.markdown h3,
.markdown h4 {
  line-height: 1.3;
  margin: 20px 0 10px;
  font-weight: 600;
}
.markdown h1 {
  font-size: 1.5rem;
}
.markdown h2 {
  font-size: 1.3rem;
}
.markdown h3 {
  font-size: 1.12rem;
}
.markdown a {
  color: var(--accent);
  text-decoration: underline;
}
.markdown pre {
  position: relative;
  white-space: pre;
  overflow: auto;
  background: #0a0c0e;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
}
.markdown pre .copy-code {
  position: absolute;
  top: 6px;
  right: 6px;
  opacity: 0;
  background: var(--surface-3);
  font-family: system-ui, sans-serif;
}
.markdown pre:hover .copy-code,
.markdown pre .copy-code:focus-visible {
  opacity: 1;
}
@media (hover: none) {
  .markdown pre .copy-code {
    opacity: 0.85;
  }
}
.markdown code {
  font-family: Consolas, ui-monospace, monospace;
  font-size: 0.9em;
  background: var(--surface-3);
  padding: 2px 4px;
  border-radius: 4px;
}
.markdown pre code {
  background: none;
  padding: 0;
}
.markdown blockquote {
  border-left: 3px solid #6584a0;
  margin: 12px 0;
  padding: 0 16px;
  color: #bbc6d0;
}
.markdown table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 14px 0;
}
.markdown th,
.markdown td {
  border: 1px solid var(--border-strong);
  padding: 8px 12px;
  text-align: left;
}
.markdown th {
  background: var(--surface-3);
}
.markdown ul,
.markdown ol {
  padding-left: 26px;
}
.markdown li {
  margin: 5px 0;
}
.markdown hr {
  border: 0;
  border-top: 1px solid var(--border-strong);
  margin: 20px 0;
}

/* Dialogs */
dialog {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
}
dialog::backdrop {
  background: #000c;
}
/* Splash: the sign-in page, shown over the app until this browser is let in. */
#unlock {
  width: 100vw;
  max-width: none;
  height: var(--app-height, 100dvh);
  max-height: none;
  margin: 0;
  padding: 24px;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(56rem 28rem at 50% -8%, #9bcfff17, transparent 70%),
    var(--bg);
  text-align: center;
  overflow-y: auto;
}
#unlock[open] {
  display: grid;
  place-items: center;
}
.splash {
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Takes the opening focus so no link or button starts with a focus ring. */
.splash:focus {
  outline: none;
}
.splash img {
  border-radius: 14px;
}
.splash h1 {
  margin: 18px 0 0;
  font-size: 34px;
  font-weight: 650;
  letter-spacing: -0.02em;
}
.splash-lede {
  margin: 6px 0 0;
  font-size: 18px;
}
.splash-text {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}
/* Holds its height while the server says which sign-in applies. */
.splash-entry {
  width: min(300px, 100%);
  min-height: 46px;
  margin-top: 28px;
}
#unlock input {
  margin-top: 0;
  font-size: 16px;
  text-align: center;
}
.splash-entry button {
  width: 100%;
  min-height: 46px;
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  font-weight: 650;
  font-size: 15px;
}
#unlock-form button {
  margin-top: 10px;
}
#email-sign-in {
  margin-top: 16px;
  font-size: 14px;
}
#email-sign-in summary {
  color: var(--muted);
  cursor: pointer;
}
#email-code-form {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
#email-code-reset {
  background: none;
  color: var(--muted);
  font-size: 13px;
  min-height: 32px;
}
#unlock-error {
  color: var(--danger);
  margin: 12px 0 0;
  min-height: 1.4em;
  font-size: 14px;
}
#unlock-error.pending {
  color: var(--muted);
}
.splash-links {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin: 22px 0 0;
}
.splash-links a,
.splash-links button {
  min-height: 0;
  padding: 4px 2px;
  background: none;
  border: 0;
  border-radius: 4px;
  color: var(--muted);
  font-size: 14px;
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 4px;
  cursor: pointer;
}
.splash-links a:hover,
.splash-links button:hover {
  color: var(--text);
}

/* Responsive: drawer sidebar below 900px */
.panel-resize {
  display: none;
}
@media (min-width: 900px) {
  .panel-resize {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 8px;
    z-index: 50;
    cursor: col-resize;
    touch-action: none;
  }
  .panel-resize-left { left: 0; }
  .panel-resize-right { right: 0; }
  .panel-resize-floating { top: 12px; bottom: auto; height: 80px; }
  .panel-resize-top {
    top: 0;
    left: 12px;
    right: 12px;
    bottom: auto;
    width: auto;
    height: 8px;
    cursor: row-resize;
  }
  .panel-resize::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 3px;
    width: 2px;
    height: 32px;
    transform: translateY(-50%);
    border-radius: 2px;
    background: var(--border-strong);
  }
  .panel-resize-top::after {
    top: 3px;
    left: 50%;
    width: 32px;
    height: 2px;
    transform: translateX(-50%);
  }
  .panel-resize:hover, .panel-resize:focus-visible { background: var(--accent); border-radius: 4px; }
  .resizing-panel { user-select: none; }
  #workspace-editor { width: var(--workspace-width); }
}
@media (min-width: 900px) {
  #scrim {
    display: none !important;
  }
  body.sidebar-collapsed #sidebar {
    display: none;
  }
}
@media (max-width: 899px) {
  #sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: min(320px, 86vw);
    transform: translateX(-102%);
    transition: transform 220ms ease;
    box-shadow: 16px 0 48px #000a;
    visibility: hidden;
  }
  body.sidebar-open #sidebar {
    transform: none;
    visibility: visible;
  }
  #sidebar-close {
    display: inline-grid;
  }
}
@media (max-width: 600px) {
  .topbar {
    padding-left: 8px;
    padding-right: 8px;
    gap: 6px;
  }
  .chat-heading {
    flex-direction: column;
    gap: 0;
  }
  .chat-heading h1 {
    max-width: 100%;
    font-size: 15px;
  }
  .mode-badge {
    border: 0;
    padding: 0;
    font-size: 11px;
  }
  #context-watch span {
    display: none;
  }
  #context-watch {
    padding: 6px 9px;
  }
  #chat {
    padding: 4px 14px 16px;
  }
  article[data-provider] .content,
  article > .error:not(.content) {
    padding-left: 0;
  }
  .msg-actions {
    padding-left: 0;
  }
  .msg-user .bubble {
    max-width: 92%;
  }
  #empty {
    padding-top: 4vh;
  }
  #empty h2 {
    font-size: 20px;
  }
  .starters {
    grid-template-columns: 1fr;
  }
  .starters button:nth-child(n + 3) {
    display: none;
  }
  #composer {
    padding-left: 10px;
    padding-right: 10px;
    gap: 6px;
  }
  .chip small {
    display: none;
  }
  #context-panel > .sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    max-height: 78dvh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
  .composer-top {
    gap: 6px 8px;
    min-height: 0;
  }
  #mode-switch span {
    padding: 3px 10px;
  }
  #recipients {
    flex-wrap: nowrap;
  }
  #recipients .label,
  #models-link {
    display: none;
  }
  .chip {
    min-height: 30px;
    padding: 2px 10px 2px 8px;
  }
  .composer-status {
    font-size: 12px;
  }
  #send {
    padding: 6px 14px;
  }
  .markdown pre {
    font-size: 14px;
  }
}

/* The garden heads the Context tab: a live map above the request breakdown. */
#context-garden {
  margin: 2px 0 12px;
  border: 1px solid #50615b88;
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse at 55% 35%, #18302c88, transparent 68%), #141e1e;
  font-size: 12px;
  line-height: 1.5;
  overflow: hidden;
}
.garden-phase {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 0 12px;
  color: #adc6bc;
  min-height: 24px;
}
#garden-phase {
  flex: 1;
  min-width: 0;
}
#garden-replay {
  font-size: 11px;
  min-height: 28px;
  color: #a6bcb1;
  white-space: nowrap;
}
#garden-mode {
  font-size: 9px;
  letter-spacing: 0.1em;
  border: 1px solid #74978866;
  border-radius: 20px;
  padding: 3px 7px;
  color: #b3ebd7;
}
#garden-scene {
  display: block;
  width: 100%;
  height: auto;
  max-height: 34dvh;
  overflow: hidden;
  stroke: none;
}
.garden-orbit {
  fill: none;
  stroke: #74887b;
  stroke-opacity: 0.32;
  stroke-dasharray: 2 5;
}
.garden-boundary {
  fill: #8aebce03;
  stroke: #9adcc7;
  stroke-opacity: 0.17;
}
.garden-map-label {
  fill: #89a499;
  font: 9px system-ui;
  letter-spacing: 1.5px;
}
.garden-heart circle {
  fill: #192d29;
  stroke: #8bdac7;
  stroke-opacity: 0.22;
}
.garden-heart text {
  fill: #a4c8b9;
  font: 8px system-ui;
  letter-spacing: 1.5px;
}
.garden-thread {
  stroke: #8ae2c8;
  stroke-width: 0.5;
  opacity: 0.09;
}
.garden-lineage {
  stroke: #9be4c9;
  stroke-width: 1.6;
  fill: none;
  animation: garden-lineage 1.8s ease-out forwards;
}
.garden-raw {
  color: #bbd6e9;
}
.garden-summary {
  color: #87e4c6;
}
.garden-anchor {
  color: #edc885;
}
.garden-reference {
  color: #aea1d6;
}
.garden-piece {
  transition:
    transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1),
    opacity 800ms;
  cursor: pointer;
  outline: none;
}
.garden-seed {
  fill: currentColor;
  fill-opacity: 0.83;
  stroke: currentColor;
  stroke-width: 1;
}
.garden-aura {
  fill: currentColor;
  opacity: 0.15;
  filter: url(#garden-glow);
}
.garden-diamond {
  stroke: currentColor;
  fill: none;
  stroke-width: 0.8;
  opacity: 0.62;
}
.garden-reference .garden-seed {
  fill: #192622;
  stroke-width: 1.8;
}
.garden-piece:focus .garden-seed,
.garden-piece:hover .garden-seed {
  stroke: #fff;
  stroke-width: 2;
}
.garden-current .garden-seed {
  stroke: #fff;
  stroke-width: 2.5;
}
.garden-current .garden-aura {
  opacity: 0.8;
}
.garden-selected .garden-aura {
  opacity: 0.7;
}
.garden-selected .garden-seed {
  stroke: #eafff5;
  stroke-dasharray: 2 2;
  stroke-width: 2;
}
.garden-retained .garden-aura {
  opacity: 0.9;
}
.garden-departing {
  opacity: 0;
  pointer-events: none;
}
.garden-source {
  fill: #9aac9e;
  opacity: 0.55;
  cursor: pointer;
  transition:
    fill 500ms,
    opacity 500ms;
}
.garden-source:hover,
.garden-source:focus,
.garden-retrieved {
  fill: #a5ffe5;
  opacity: 1;
  stroke: #a5ffe5;
  stroke-width: 2;
  outline: none;
}
.garden-thinking .garden-heart circle {
  transform-origin: 200px 146px;
  animation: garden-breathe 2.3s ease-in-out infinite;
}
/* What was sent: one stacked bar, then a row per part that opens to its items. */
#request-breakdown {
  --part-instructions: #3987e5;
  --part-tools: #d95926;
  --part-memory: #9085e9;
  --part-context: #199e70;
  --part-files: #c98500;
  --part-turn: #d55181;
  --part-reasoning: #008300;
  --part-framing: #8b96a1;
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  font-size: 13px;
}
.breakdown-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 12px;
}
.breakdown-head strong {
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  color: var(--text);
  order: -1;
}
#garden-request-phase {
  flex-basis: 100%;
  order: -2;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#breakdown-bar {
  display: flex;
  gap: 2px;
  height: 12px;
  margin-bottom: 8px;
}
#breakdown-bar i {
  flex: 1 1 0;
  min-width: 3px;
  transition: flex-grow 500ms ease;
}
#breakdown-bar i:first-child {
  border-radius: 4px 0 0 4px;
}
#breakdown-bar i:last-child {
  border-radius: 0 4px 4px 0;
}
.part-instructions {
  background: var(--part-instructions);
}
.part-tools {
  background: var(--part-tools);
}
.part-memory {
  background: var(--part-memory);
}
.part-context {
  background: var(--part-context);
}
.part-files {
  background: var(--part-files);
}
.part-turn {
  background: var(--part-turn);
}
.part-reasoning {
  background: var(--part-reasoning);
}
.part-framing {
  background: var(--part-framing);
}
/* Hatched: counted by the provider, not by anything listed here. */
.part-unattributed {
  background: repeating-linear-gradient(135deg, #7a8590 0 3px, #454e57 3px 6px);
}
.breakdown-part summary {
  display: grid;
  grid-template-columns: 10px 1fr auto 38px;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 2px 4px;
  border-radius: 6px;
  cursor: pointer;
  list-style: none;
}
.breakdown-part summary::-webkit-details-marker {
  display: none;
}
.breakdown-part summary:hover,
.breakdown-part[open] > summary {
  background: var(--surface-3);
}
.breakdown-part summary i {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.part-tokens,
.part-share {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.part-share {
  color: var(--muted);
}
.breakdown-part > .note {
  margin: 4px 4px 6px 22px;
  font-size: 12px;
}
.breakdown-item {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  width: calc(100% - 22px);
  min-height: 28px;
  margin: 0 0 2px 22px;
  padding: 3px 46px 3px 8px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--muted);
  font-size: 12px;
  text-align: left;
  overflow-wrap: anywhere;
}
button.breakdown-item {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
}
button.breakdown-item:hover {
  background: var(--surface-3);
}
#breakdown-remainder,
#breakdown-baseline {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 12px;
}
#breakdown-baseline strong,
#garden-full-tokens {
  color: var(--text);
  font-weight: 600;
}
.segmented {
  display: flex;
  gap: 4px;
  margin: 0 0 10px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.segmented button {
  flex: 1;
  min-height: 30px;
  padding: 4px 8px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
}
.segmented [aria-pressed="true"] {
  background: var(--surface-3);
  color: var(--text);
}
#editor-telemetry .editor-toolbar {
  align-items: flex-end;
}
#editor-telemetry h3 {
  margin: 12px 0 6px;
  font-size: 13px;
}
.facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 0 0 8px;
  font-size: 12px;
}
.facts dt {
  color: var(--muted);
}
.facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.garden-counts {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin: 0 12px;
  font-size: 11px;
  color: #95b0a3;
}
.garden-counts strong {
  color: #dcece3;
  font-weight: 600;
}
.garden-legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin: 2px 12px 6px;
  font-size: 10px;
}
#garden-caption {
  margin: 6px 12px 10px;
  color: #bed5c9;
  text-align: center;
}
/* With a piece open, the map shrinks to a locator above it. */
#workspace-editor[data-detail] #garden-scene {
  max-height: 170px;
}
#workspace-editor[data-detail] :is(.garden-legend, .garden-counts, #garden-caption) {
  display: none;
}
@keyframes garden-breathe {
  50% {
    transform: scale(1.13);
    stroke-opacity: 0.75;
  }
}
@keyframes garden-lineage {
  0% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
  }
}
@media (max-width: 600px) {
  #garden-scene {
    max-height: 29dvh;
  }
}
@media (prefers-reduced-motion: reduce) {
  .garden-piece,
  .garden-source,
  #breakdown-bar i,
  #sidebar {
    transition: none;
  }
  .garden-thinking .garden-heart circle,
  .garden-lineage,
  .typing i,
  .is-working #run-progress::before {
    animation: none;
  }
  .garden-lineage {
    opacity: 0.35;
  }
}
/* Provider summaries stay collapsed and separate from the copied answer. */
/* Thought trail: one quiet line; tap for steps, tap a step for its text. */
.thoughts {
  margin: 6px 0 2px 32px;
  font-size: 13px;
  min-width: 0;
}
.msg-user + .thoughts {
  margin-left: 0;
}
.thoughts-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 30px;
  padding: 3px 8px 3px 6px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  text-align: left;
  font-size: 13px;
}
.thoughts-toggle:hover:not(:disabled) {
  background: var(--surface);
  color: var(--text);
}
.thoughts-toggle:disabled {
  opacity: 1;
}
.thoughts-icon {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--faint);
}
[data-state="live"] .thoughts-icon {
  background: var(--ok);
  animation: working-pulse 1.4s infinite;
}
.thoughts-label {
  flex: none;
  font-weight: 600;
  color: var(--text);
}
.thoughts-snippet {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-state="live"] .thoughts-snippet {
  background: linear-gradient(90deg, var(--muted) 0%, var(--text) 50%, var(--muted) 100%) 0 0 / 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: thought-shimmer 2.2s linear infinite;
}
@keyframes thought-shimmer {
  to {
    background-position: -200% 0;
  }
}
.thoughts-meta {
  flex: none;
  font-size: 12px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.thoughts-meta:empty {
  display: none;
}
.thoughts-chevron {
  flex: none;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  margin-right: 2px;
  transition: transform 150ms;
}
.thoughts-toggle:disabled .thoughts-chevron {
  display: none;
}
[aria-expanded="true"] > .thoughts-chevron {
  transform: rotate(45deg);
}
.thoughts-steps {
  list-style: none;
  margin: 2px 0 6px 10px;
  padding: 0 0 0 12px;
  border-left: 1px solid var(--border-strong);
}
.thoughts-steps details > summary {
  padding: 4px 6px;
  border-radius: 6px;
  color: var(--muted);
  list-style: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.thoughts-steps details > summary::-webkit-details-marker {
  display: none;
}
.thoughts-steps details > summary:hover,
.thoughts-steps details[open] > summary {
  color: var(--text);
  background: var(--surface);
}
.thought-said {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text);
  padding: 6px 8px 0;
  line-height: 1.55;
}
.thought-said:empty {
  display: none;
}
.thought-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--muted);
  padding: 6px 8px 10px;
  max-height: 22rem;
  overflow: auto;
  line-height: 1.55;
}
#docs-dialog,
#keys-dialog {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(var(--app-height, 100dvh) - 48px);
  padding: 0;
  overflow: hidden;
}
#keys-dialog {
  width: min(520px, calc(100vw - 32px));
}
#docs-dialog[open],
#keys-dialog[open] {
  display: flex;
  flex-direction: column;
}
#docs-dialog header,
#keys-dialog header {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px 10px 20px;
  border-bottom: 1px solid var(--border);
}
#docs-dialog header h2,
#keys-dialog header h2 {
  margin: 0;
  font-size: 16px;
}
#keys-content {
  padding: 16px 20px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.key-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.key-row strong,
.key-row .note {
  flex: 0 0 100%;
}
.key-row strong {
  font-size: 15px;
}
.key-row input {
  flex: 1 1 0;
  min-width: 0;
  margin-top: 0;
  font-size: 16px;
}
.key-row button {
  min-height: 40px;
  padding: 0 14px;
}
.key-row button:not(.key-remove) {
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  font-weight: 650;
}
#keys-status {
  margin-top: 14px;
  min-height: 1.4em;
}
#keys-status.error {
  color: var(--danger);
}
#docs-content {
  margin: 0;
  padding: 16px 20px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  font-size: 15px;
}
/* The guide opens with the same title as the dialog. */
#docs-content > h1:first-child {
  display: none;
}
#docs-content > h1:first-child + * {
  margin-top: 0;
}
#editor-telemetry { padding: 0 0 12px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
#editor-audit details { margin: 8px 0; }
#editor-audit summary { cursor: pointer; font-size: 13px; }
#editor-audit p { overflow-wrap: anywhere; }
#editor-jev h3 { font-size: 16px; margin: 12px 0; }
#editor-jev .facts { font-size: 13px; }
#editor-jev dd { margin: 0; }
#jev-records details { margin: 10px 0; padding: 10px; border: 1px solid var(--border); border-radius: 8px; }
#jev-records summary { cursor: pointer; font-size: 13px; line-height: 1.5; }
#jev-records p, #jev-records blockquote { overflow-wrap: anywhere; }
#jev-records blockquote { font-size: 12px; white-space: pre-wrap; margin: 8px 0; padding-left: 10px; border-left: 2px solid var(--border-strong); }
#jev-records pre { font-size: 11px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 240px; overflow-y: auto; }
#editor-removed button { display: block; margin: 8px 0; }
/* Streaming replies hide actions until the text settles. */
.is-streaming .msg-actions,
.msg[data-provisional] .msg-actions {
  display: none;
}
#chat {
  position: relative;
  overflow-anchor: none;
}
#chat-tail {
  flex: none;
  pointer-events: none;
}

@media (max-width: 600px) {
  .thoughts {
    margin-left: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-state="live"] .thoughts-icon,
  [data-state="live"] .thoughts-snippet {
    animation: none;
  }
  [data-state="live"] .thoughts-snippet {
    color: var(--text);
    background: none;
  }
}
#attachment-preview { width: 46px; height: 46px; object-fit: contain; border-radius: 5px; }
.image-attachment { margin: 12px 0 0; max-width: 360px; }
.image-attachment img { display: block; max-width: 100%; max-height: 320px; border-radius: 8px; object-fit: contain; }
.image-attachment figcaption { font-size: .8rem; overflow-wrap: anywhere; margin-top: 5px; opacity: .75; }