:root {
  color-scheme: dark;
  --bg: #17191c;
  --surface: #202226;
  --surface-2: #292c30;
  --border: #45484b;
  --text: #f4f4f2;
  --text-dim: #a5a8aa;
  --accent: #e6bd4b;
  --add-bg: rgb(91 153 94 / 20%);
  --add-bar: #91c58e;
  --del-bg: rgb(190 76 68 / 20%);
  --del-bar: #ed8278;
  --code-bg: #15171a;
  --danger: #ff8178;
  --success: #b3d39c;
  --tool-running: #ffd43b;
  --tool-done: #20e68a;
  --tool-failed: #ff4d5f;
  --shadow: 4px 4px 0 #e6bd4b;
  --send-bg: #34373b;
  --send-text: #f4f4f2;
  --send-active-bg: #e6bd4b;
  --send-active-text: #17191c;
  --grid-line: rgb(240 240 235 / 4%);
  --card-radius: 8px;
  --chip-radius: 4px;
  --composer-radius: 10px;
  --heavy-border: 1px solid var(--border);
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #f2eedf;
    --surface: #fffdf6;
    --surface-2: #f3e5b6;
    --border: #191916;
    --text: #191916;
    --text-dim: #555147;
    --accent: #31559b;
    --add-bg: #e7f1df;
    --add-bar: #47764b;
    --del-bg: #f8e6e1;
    --del-bar: #a9473c;
    --code-bg: #f8f6ef;
    --danger: #a4312b;
    --success: #315f3c;
    --tool-running: #9a5b00;
    --tool-done: #087a46;
    --tool-failed: #bf2438;
    --shadow: 4px 4px 0 #191916;
    --send-bg: #e7e1d1;
    --send-text: #191916;
    --send-active-bg: #e9bd50;
    --send-active-text: #191916;
    --grid-line: rgb(25 25 22 / 9%);
    --send-bg: #e7e1d1;
    --send-text: #191916;
    --send-active-bg: #e9bd50;
    --send-active-text: #191916;
  }
}
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }
.view-tabs { display: none !important; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: var(--bg); color: var(--text); font: 16px/1.5 var(--font); -webkit-tap-highlight-color: transparent; }
button, textarea, select { color: inherit; font: inherit; }
button { cursor: pointer; }
button:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

.app {
  position: fixed;
  top: var(--viewport-offset-top, 0px);
  right: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: var(--viewport-height, 100vh);
  height: var(--viewport-height, 100dvh);
  max-width: 960px;
  flex-direction: column;
  margin: 0 auto;
  overflow: hidden;
  background: var(--bg);
}
.topbar {
  position: relative;
  z-index: 5;
  display: flex;
  min-height: calc(48px + env(safe-area-inset-top));
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: env(safe-area-inset-top) 12px 0 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.daemon-switch { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; white-space:nowrap; }
.daemon-switch select { max-width:min(34vw,220px); height:34px; padding:0 9px; border:1px solid var(--border); border-radius:8px; background:var(--panel); color:var(--text); }
.conversation-title { min-width: 0; overflow: hidden; color: var(--text); font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.icon-button, .round-control, .send-button, .sheet-close {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
}
.icon-button:hover, .round-control:hover { background: var(--surface-2); color: var(--text); }
.icon-button svg, .round-control svg, .send-button svg, .quiet-selector svg, .environment-selector svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.menu, .small-sheet {
  position: absolute;
  z-index: 12;
  min-width: 200px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.menu { top: 44px; right: 0; }
.menu button, .small-sheet > button {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  text-align: left;
  font-size: 14px;
}
.menu button:hover, .small-sheet > button:hover { background: var(--surface-2); }
.menu button span { color: var(--text-dim); font-size: 12px; }

.transcript-shell { position: relative; display: flex; min-height: 0; flex: 1; flex-direction: column; }
.sleek-stage { position: relative; z-index: 1; display: flex; min-width: 0; min-height: 0; flex: 1 1 100%; flex-direction: column; overflow: hidden; }
.agent-pane-grid { --agent-columns: 1; display: grid; min-width: 0; min-height: 0; flex: 0 0 0%; grid-auto-columns: minmax(210px, 1fr); grid-auto-flow: column; grid-template-columns: repeat(var(--agent-columns), minmax(210px, 1fr)); gap: 8px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; opacity: 0; transition: flex-basis 240ms cubic-bezier(.2,.75,.25,1), opacity 180ms ease; }
.transcript-shell.has-agent-panes .agent-pane-grid { flex-basis: 50%; opacity: 1; }
.transcript-shell.has-agent-panes .sleek-stage { flex-basis: 50%; }
.agent-pane { display: flex; min-width: 0; min-height: 0; flex-direction: column; overflow: hidden; border: 1px solid #303638; border-radius: 12px; background: #171a1b; box-shadow: 0 12px 32px rgb(0 0 0 / 16%); }
.agent-pane-header { display: flex; min-height: 62px; flex: 0 0 auto; flex-direction: column; justify-content: center; gap: 3px; padding: 9px 12px; border-bottom: 1px solid #303638; background: rgb(255 255 255 / 2%); }
.agent-pane-identity { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; }
.agent-pane-identity strong { min-width: 0; overflow: hidden; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .02em; text-overflow: ellipsis; white-space: nowrap; }
.agent-pane-status { flex: 0 0 auto; color: #aab7b0; font-size: 10px; }
.agent-pane-status::before { display: inline-block; width: 6px; height: 6px; margin: 0 6px 1px 0; border-radius: 50%; background: #7c8a83; content: ""; }
.agent-pane-status[data-status="acked"]::before, .agent-pane-status[data-status="in_progress"]::before { background: #60d6a2; box-shadow: 0 0 9px rgb(96 214 162 / 36%); }
.agent-pane-status[data-status="blocked"]::before, .agent-pane-status[data-status="dead_letter"]::before { background: #e28b75; }
.agent-pane-status[data-status="done"]::before, .agent-pane-status[data-status="reviewed"]::before, .agent-pane-status[data-status="closed"]::before { background: #88a9ff; }
.agent-pane-ops { flex: 0 0 auto; overflow: hidden; color: #82938a; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.agent-pane-ops[data-status="connected"] { color: #72cba0; }
.agent-pane-ops[data-status="degraded"] { color: #e5a574; }
.agent-pane-workspace { flex: 0 0 auto; border: 1px solid rgb(255 255 255 / 12%); border-radius: 6px; padding: 4px 7px; color: #d1d9d4; background: rgb(255 255 255 / 4%); font-size: 10px; cursor: pointer; }
.agent-pane-workspace:hover { background: rgb(255 255 255 / 10%); }
.agent-activity-path { display: inline-block; max-width: 44%; margin-left: 6px; overflow-wrap: anywhere; color: #a8c8ff; cursor: pointer; white-space: normal; }
.agent-pane-step { overflow: hidden; color: #c0cac5; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.agent-pane-scroll { min-height: 0; flex: 1; padding: 10px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #66716c #171a1b; }
.agent-task-card { margin: 0 0 10px; padding: 10px; border: 1px solid #2c3333; border-radius: 9px; background: #191e1f; }
.agent-task-title { display: -webkit-box; overflow: hidden; color: #f0f3f1; font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.agent-task-activity { display: grid; gap: 7px; margin-top: 10px; }
.agent-activity-line { display: flex; min-width: 0; align-items: flex-start; gap: 8px; color: #d0d7d3; font-size: 11px; line-height: 1.5; }
.agent-activity-line > span:not(.agent-activity-dot) { min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.agent-activity-dot { width: 5px; height: 5px; flex: 0 0 auto; margin-top: 4px; border-radius: 50%; background: #648c7a; }
.agent-task-live-output { max-height: 260px; margin-top: 10px; padding: 10px; overflow: auto; border: 1px solid #34433c; border-radius: 8px; background: #121a17; color: #e1eae5; font-size: 11px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; scrollbar-width: thin; }
.agent-task-live-output::before { display: block; margin-bottom: 6px; color: #91c8ae; content: "Live agent output"; font-size: 9px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.agent-task-live-output[data-phase="waiting_for_inference"]::before, .agent-task-live-output[data-phase="network_interrupted"]::before { color: #e3bd7b; content: "Saved output · reconnecting"; }
.agent-task-live-output[hidden] { display: none; }
.agent-task-response { max-height: 220px; margin-top: 10px; padding: 9px 10px; overflow: auto; border: 1px solid #34433c; border-radius: 8px; background: #19221f; color: #e0e9e4; font-size: 11px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; scrollbar-width: thin; }
.agent-task-response::before { display: block; margin-bottom: 5px; color: #91c8ae; content: "Agent response"; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.agent-task-response[hidden] { display: none; }
.agent-task-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.agent-task-footer a { color: #91c8ae; font-size: 10px; text-decoration: none; }
.agent-task-footer a:hover { text-decoration: underline; }
.agent-task-footer button { min-height: 26px; padding: 0 8px; border: 1px solid #414947; border-radius: 6px; background: #222829; color: #c1cbc6; font-size: 10px; }
.agent-task-footer button:hover { background: #2b3333; }
@keyframes agent-pane-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.transcript-scroll { width: 100%; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.transcript { display: flex; min-height: 100%; flex-direction: column; padding: 8px 16px 26px; }
.splash { margin: auto 0 18px; padding: 14px 0; animation: fade-in 100ms ease-out both; }
.exit-mark { display: flex; align-items: baseline; gap: 6px; color: #008751; font-size: 13px; font-weight: 750; letter-spacing: .13em; }
.exit-mark strong { font-weight: 850; }
.splash-line { color: var(--text-dim); font-size: 13px; }
.block { width: 100%; margin: 12px 0; animation: fade-in 100ms ease-out both; }
.block.user-block { padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.block.assistant-block { color: var(--text); }
.assistant-content { min-width: 0; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.wake-stream-raw { white-space: pre-wrap; }
.inline-image-block { margin-top: 7px; }
.screenshot-artifact-card { max-width: min(100%, 980px); padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); }
.screenshot-artifact-heading { display: flex; min-width: 0; align-items: center; gap: 10px; margin-bottom: 10px; }
.screenshot-artifact-heading strong { min-width: 0; overflow: hidden; color: var(--text); font-size: 14px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.screenshot-artifact-badge { flex: 0 0 auto; padding: 4px 7px; border: 1px solid color-mix(in srgb, var(--accent, #008751) 38%, transparent); border-radius: 5px; color: var(--accent, #008751); font-size: 9px; font-weight: 750; letter-spacing: .08em; }
.screenshot-artifact-open { display: block; width: 100%; padding: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 9px; background: #0b0e0c; cursor: zoom-in; }
.screenshot-artifact-open:focus-visible, .screenshot-artifact-actions button:focus-visible, .screenshot-artifact-actions a:focus-visible { outline: 2px solid var(--accent, #008751); outline-offset: 3px; }
.screenshot-artifact-image { display: block; width: 100%; max-height: 560px; object-fit: contain; }
.screenshot-artifact-video { display: block; width: 100%; max-height: min(65vh, 640px); border-radius: 9px; background: #080a0b; }
.screenshot-artifact-details { margin-top: 8px; color: var(--text-dim); font-size: 11px; overflow-wrap: anywhere; }
.screenshot-artifact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.screenshot-artifact-actions button, .screenshot-artifact-actions a { min-height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); font: inherit; font-size: 11px; text-decoration: none; cursor: pointer; }
.screenshot-artifact-actions button:hover, .screenshot-artifact-actions a:hover { border-color: var(--accent, #008751); }
.inline-image-preview-button { display: block; max-width: 100%; padding: 0; border: 0; border-radius: 10px; background: transparent; cursor: zoom-in; text-align: left; }
.inline-image-preview-button:focus-visible { outline: 2px solid var(--accent, #008751); outline-offset: 3px; }
.inline-chat-image { display: block; width: auto; max-width: min(100%, 900px); max-height: 640px; border-radius: 10px; object-fit: contain; }
.account-asset-media-block { width: min(100%, 900px); }
.account-asset-inline-player { display: block; width: 100%; max-height: 640px; border-radius: 10px; background: #080a0c; }
.account-asset-download { display: inline-flex; width: fit-content; color: #d6d8dd; text-decoration: underline; text-underline-offset: 3px; }
.image-preview-dialog { position: fixed; inset: 0; width: min(96vw, 1600px); max-width: none; max-height: none; height: 100dvh; margin: auto; padding: 54px 18px 24px; overflow: auto; border: 0; background: #080a09; color: #fff; }
.image-preview-dialog::backdrop { background: rgb(0 0 0 / 88%); backdrop-filter: blur(5px); }
.image-preview-full { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 112px); margin: auto; object-fit: contain; }
.image-preview-caption { margin: 12px auto 0; color: #d5d8d6; text-align: center; font-size: 13px; overflow-wrap: anywhere; }
.image-preview-close { position: fixed; z-index: 1; top: max(12px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgb(255 255 255 / 24%); border-radius: 50%; background: #171a18; color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
.image-preview-close:hover { background: #272b28; }
@media (max-width: 600px) {
  .screenshot-artifact-card { padding: 9px; border-radius: 11px; }
  .screenshot-artifact-image { max-height: 46dvh; }
  .screenshot-artifact-video { max-height: 48dvh; }
  .screenshot-artifact-heading strong { font-size: 12px; }
  .image-preview-dialog { width: 100vw; padding: 60px 8px max(20px, env(safe-area-inset-bottom)); }
  .image-preview-full { max-height: calc(100dvh - 120px); }
}

.chat-history {
  position: fixed;
  z-index: 9;
  inset: 0 auto 0 0;
  display: flex;
  width: 272px;
  flex-direction: column;
  gap: 10px;
  padding: max(18px, env(safe-area-inset-top)) 12px 14px;
  overflow: hidden;
  border-right: 1px solid #303238;
  background: #17191b;
  color: #f4f4f2;
}
.chat-history-heading { display: flex; min-height: 38px; align-items: center; justify-content: space-between; padding: 0 4px; font-size: 17px; }
.chat-history-heading .icon-button { width: 34px; height: 34px; border-radius: 8px; color: #aaaeb2; font-size: 23px; }
.chat-new-button { display: flex; min-height: 42px; align-items: center; gap: 9px; padding: 0 11px; border: 1px solid #383b3e; border-radius: 10px; background: #222427; color: #f4f4f2; text-align: left; font-size: 13px; font-weight: 650; }
.chat-new-button:hover { background: #2b2e31; }
.chat-new-button span { font-size: 19px; line-height: 1; }
.chat-history-section-label { padding: 12px 8px 2px; color: #85898d; font-size: 10px; font-weight: 750; letter-spacing: .12em; }
.chat-history-list-wrap { min-height: 0; flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 86%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 86%, transparent 100%); }
.chat-history-list { display: flex; height: 100%; flex-direction: column; gap: 3px; overflow: auto; overscroll-behavior: contain; padding-bottom: 24px; }
.chat-history-section-label { padding: 12px 8px 4px; color: #85898d; font-size: 10px; font-weight: 750; letter-spacing: .12em; }
.chat-history-row { position: relative; display: flex; align-items: center; min-height: 38px; border-radius: 8px; }
.chat-history-row:hover, .chat-history-row.active { background: #25282b; }
.chat-history-item { min-width: 0; flex: 1; min-height: 38px; padding: 8px 10px; overflow: hidden; border: 0; border-radius: 8px; background: transparent; color: #d8dadd; text-align: left; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.chat-history-item:hover { color: #fff; }
.chat-history-item.active { color: #fff; }
.chat-history-more { flex: none; width: 30px; height: 30px; margin-right: 4px; border: 0; border-radius: 7px; background: transparent; color: #aeb2b6; opacity: 0; font-size: 20px; line-height: 1; }
.chat-history-row:hover .chat-history-more, .chat-history-more:focus-visible, .chat-history-more[aria-expanded="true"] { opacity: 1; }
.chat-history-more:hover, .chat-history-more[aria-expanded="true"] { background: #3a3e42; color: #fff; }
.chat-history-action-menu { position: absolute; z-index: 20; top: 32px; right: 4px; min-width: 150px; padding: 5px; border: 1px solid #494d51; border-radius: 10px; background: #202326; box-shadow: 0 12px 30px #0009; }
.chat-history-action-menu[hidden] { display: none; }
.chat-history-action-menu button { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px; background: transparent; color: #e5e6e7; text-align: left; font-size: 12px; }
.chat-history-action-menu button:hover:not(:disabled) { background: #34383c; }
.chat-history-action-menu button:disabled { opacity: .4; cursor: not-allowed; }
.chat-history-action-menu button.is-danger { color: #f0aaa0; }
.chat-rename-dialog { width: min(420px, calc(100vw - 28px)); padding: 0; border: 1px solid #555b62; border-radius: 16px; background: #202327; color: #f0eee8; box-shadow: 0 24px 80px #000b; }
.chat-rename-dialog::backdrop { background: #08090bd9; backdrop-filter: blur(8px); }
.chat-rename-dialog form { display: grid; gap: 12px; padding: 22px; }
.chat-rename-dialog h2 { margin: 0; font-size: 19px; }
.chat-rename-dialog label { color: #c7c9ca; font-size: 12px; }
.chat-rename-dialog input { min-height: 42px; padding: 0 11px; border: 1px solid #555b62; border-radius: 8px; background: #141619; color: #f2f0eb; font: inherit; }
.chat-rename-dialog input:focus-visible { outline: 2px solid #c7a56a; outline-offset: 2px; }
.chat-rename-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.chat-rename-actions button { min-height: 36px; padding: 0 12px; border: 1px solid #555b62; border-radius: 8px; background: #292d32; color: #eee; }
.chat-rename-actions button[type="submit"] { border-color: #c7a56a; background: #c7a56a; color: #1c1a16; font-weight: 700; }
.chat-rename-actions button:disabled { opacity: .6; }
.chat-history-footer { position: relative; z-index: 1; flex: 0 0 auto; margin-top: -12px; padding: 24px 3px 2px; background: linear-gradient(180deg, rgb(23 25 27 / 0%), #17191b 34%); }
.sign-out-button { display: flex; width: 100%; min-height: 44px; align-items: center; gap: 11px; padding: 0 11px; border: 1px solid rgb(255 255 255 / 8%); border-radius: 10px; background: rgb(255 255 255 / 3%); color: #c9ccca; text-align: left; font-size: 12px; font-weight: 600; transition: background 140ms ease, border-color 140ms ease, color 140ms ease; }
.sign-out-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.sign-out-button:hover { border-color: rgb(230 189 75 / 38%); background: rgb(230 189 75 / 9%); color: #f2d781; }
.sign-out-button:disabled { cursor: wait; opacity: .65; }
.settings-button { display: flex; width: 100%; min-height: 42px; align-items: center; gap: 11px; padding: 0 11px; border: 0; border-radius: 9px; background: transparent; color: #bfc2c4; text-align: left; font-size: 12px; font-weight: 600; transition: background 140ms ease, color 140ms ease; }
.settings-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.55; }
.settings-button:hover { background: rgb(255 255 255 / 5%); color: #fff; }
.settings-dialog { width: min(600px, calc(100vw - 28px)); max-width: 600px; max-height: min(82dvh, 760px); padding: 0; overflow: hidden; border: 1px solid #3d4142; border-radius: 18px; background: #1c1f20; color: #f4f4f2; box-shadow: 0 28px 100px rgb(0 0 0 / 58%); }
.settings-dialog::backdrop { background: rgb(0 0 0 / 66%); backdrop-filter: blur(7px); }
.settings-header { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px 18px; border-bottom: 1px solid #303638; }
.settings-eyebrow { color: #8a9690; font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.settings-header h2 { margin: 3px 0 0; font-size: 21px; letter-spacing: -.03em; }
.settings-close { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid #383e3d; border-radius: 10px; background: #252a29; color: #d8ddda; font-size: 23px; }
.settings-close:hover { background: #303735; color: #fff; }
.settings-account { display: grid; gap: 4px; margin: 17px 22px 0; padding: 13px 15px; border: 1px solid #303638; border-radius: 12px; background: #202525; }
.settings-account span { color: #89928e; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.settings-account strong { overflow-wrap: anywhere; font-size: 13px; font-weight: 600; }
.settings-files { padding: 20px 22px 12px; }
.settings-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.settings-section-heading h3 { margin: 0; font-size: 15px; }
.settings-section-heading p { margin: 4px 0 0; color: #89928e; font-size: 11px; line-height: 1.45; }
.settings-section-heading > span { flex: 0 0 auto; color: #89928e; font-size: 10px; }
.settings-upload-button { display: inline-flex; min-height: 38px; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid rgb(0 169 107 / 42%); border-radius: 9px; background: rgb(0 135 81 / 13%); color: #a8e4c5; cursor: pointer; font-size: 11px; font-weight: 700; }
.settings-upload-button:hover { border-color: #00a96b; background: rgb(0 135 81 / 22%); }
.settings-upload-button[aria-disabled="true"] { cursor: wait; opacity: .58; pointer-events: none; }
.settings-upload-button span { font-size: 17px; }
.settings-asset-list { display: grid; max-height: 38dvh; gap: 7px; margin-top: 13px; overflow: auto; overscroll-behavior: contain; }
.settings-asset { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 11px; padding: 10px; border: 1px solid #303638; border-radius: 11px; background: #202425; }
.settings-asset-kind { display: grid; width: 34px; height: 38px; flex: 0 0 auto; place-items: center; border-radius: 8px; background: #293331; color: #8bd7b0; font-size: 9px; font-weight: 800; letter-spacing: .03em; }
.settings-asset-info { display: grid; min-width: 0; flex: 1; gap: 3px; }
.settings-asset-info strong { overflow: hidden; font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.settings-asset-info span { color: #89928e; font-size: 9px; }
.settings-asset-actions { display: flex; flex: 0 0 auto; gap: 4px; }
.settings-asset-actions button { min-height: 30px; padding: 0 8px; border: 1px solid #383e3d; border-radius: 7px; background: #252a29; color: #c7cfcb; font-size: 9px; }
.settings-asset-actions button:hover { background: #303735; color: #fff; }
.settings-asset-actions .settings-delete { color: #e29b93; }
.settings-video-preview { width: 100%; max-height: 280px; border-radius: 8px; background: #070908; }
.account-asset-chat-card { display: flex; width: min(100%, 520px); min-width: 0; align-items: center; gap: 11px; margin: 8px 0 12px; padding: 10px; border: 1px solid #333c38; border-radius: 11px; background: #1e2522; }
.account-asset-chat-card .account-asset-video-preview { width: 100%; max-height: 420px; border-radius: 8px; background: #070908; }
.account-asset-chat-card > button { min-height: 31px; flex: 0 0 auto; padding: 0 10px; border: 1px solid #3b4842; border-radius: 7px; background: #27312c; color: #c8e0d2; font-size: 10px; }
.account-asset-chat-card > button:hover { background: #314038; color: #fff; }
.settings-empty { margin: 0; padding: 20px 8px; color: #89928e; text-align: center; font-size: 11px; }
.settings-status { min-height: 22px; padding: 0 22px 12px; color: #a8e4c5; font-size: 11px; }
.media-dialog { display: none; width: min(1320px, calc(100vw - 48px)); max-width: 1320px; height: min(900px, calc(100dvh - 48px)); max-height: calc(100dvh - 48px); flex-direction: column; border-color: #343638; border-radius: 22px; background: #111213; }
.media-dialog[open] { display: flex; }
.media-dialog::backdrop { background: rgb(4 5 6 / 78%); backdrop-filter: blur(12px); }
.media-header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; padding: 24px 30px 19px; border-bottom: 1px solid #292b2d; background: linear-gradient(135deg, #191a1b, #111213 68%); }
.media-header h2 { margin: 4px 0 0; font-size: 25px; font-weight: 680; letter-spacing: -.045em; }
.media-header p { margin: 5px 0 0; color: #929598; font-size: 11px; }
.media-library { display: flex; min-height: 0; flex: 1; flex-direction: column; }
.media-toolbar { display: flex; min-height: 76px; flex: 0 0 auto; align-items: center; gap: 10px; padding: 13px 24px; border-bottom: 1px solid #292b2d; background: #141516; }
.media-intro { display: grid; min-width: 118px; gap: 4px; margin-right: auto; }
.media-intro strong { font-size: 12px; font-weight: 650; }
.media-intro span { color: #85898d; font-size: 10px; }
.media-search { display: flex; width: min(230px, 20vw); min-width: 145px; height: 38px; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid #323436; border-radius: 9px; background: #1b1c1e; color: #93979a; }
.media-search:focus-within { border-color: #707477; }
.media-search svg { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; }
.media-search input { width: 100%; border: 0; outline: 0; background: transparent; color: #eeeff0; font: inherit; font-size: 11px; }
.media-search input::placeholder { color: #7c8083; }
.media-select { height: 38px; padding: 0 28px 0 10px; border: 1px solid #323436; border-radius: 9px; background: #1b1c1e; color: #d8dadd; font-size: 11px; }
.media-view-toggle { display: flex; height: 38px; align-items: center; padding: 3px; border: 1px solid #323436; border-radius: 9px; background: #1b1c1e; }
.media-view-toggle button { width: 31px; height: 30px; border: 0; border-radius: 6px; background: transparent; color: #85898d; font-size: 16px; }
.media-view-toggle button.active { background: #333537; color: #f4f4f2; }
.media-upload { min-height: 38px; flex: 0 0 auto; border-color: #595c5f; background: #dedfdf; color: #1b1c1d; }
.media-upload:hover { border-color: #f3f3f3; background: #f3f3f3; }
.media-upload[aria-disabled="true"] { opacity: .5; }
.media-collection-scroll { min-height: 0; flex: 1; overflow: auto; overscroll-behavior: contain; scrollbar-color: #414345 transparent; scrollbar-width: thin; }
.settings-asset-list.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); align-content: start; gap: 14px; margin: 0; padding: 22px 24px 28px; overflow: visible; }
.settings-asset-list.media-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 18px 24px 24px; overflow: visible; }
.media-card { display: flex; min-width: 0; flex-direction: column; gap: 0; padding: 0; overflow: hidden; border-color: #303234; border-radius: 13px; background: #191a1b; transition: border-color 140ms ease, background 140ms ease, transform 140ms ease; }
.media-card:hover { transform: translateY(-2px); border-color: #515456; background: #1c1d1e; }
.media-card-preview { display: flex; width: 100%; aspect-ratio: 1.56; align-items: center; justify-content: center; padding: 0; overflow: hidden; border: 0; border-bottom: 1px solid #292b2d; background: #0a0b0c; color: #d8dadd; }
.media-image-preview { cursor: zoom-in; }
.media-card-preview img, .media-card-preview video { display: block; width: 100%; height: 100%; object-fit: cover; }
.media-card-preview video { object-fit: contain; }
.media-card-preview audio { width: min(94%, 420px); }
.media-card-preview.media-audio-preview { background: linear-gradient(145deg, #171a1f, #0a0b0c); }
.media-document-preview { gap: 9px; flex-direction: column; background: radial-gradient(ellipse at 50% 35%, #27292b 0, #141516 70%); color: #898d90; font-size: 9px; font-weight: 750; letter-spacing: .13em; }
.media-document-mark { display: grid; width: 57px; height: 69px; place-items: center; border: 1px solid #4a4d50; border-radius: 6px; background: linear-gradient(145deg, #2a2c2e, #1c1d1f); color: #dedfe0; font-size: 12px; letter-spacing: .04em; box-shadow: 0 12px 25px #0006; }
.media-card-details { display: flex; min-width: 0; align-items: center; gap: 8px; padding: 12px; }
.media-card .settings-asset-info { gap: 5px; }
.media-card .settings-asset-info strong { color: #e9eaeb; font-size: 11px; }
.media-card .settings-asset-info span { color: #929598; font-size: 10px; }
.media-card-actions { gap: 5px; }
.media-card-actions button { min-height: 29px; padding: 0 8px; border-color: #37393b; background: #222325; color: #d0d2d3; font-size: 9px; }
.media-card-actions button:hover { border-color: #5b5e60; background: #303234; }
.media-card-actions .settings-delete { color: #d1a5a2; }
.media-empty { grid-column: 1 / -1; margin: auto; padding: 60px 12px; font-size: 12px; }
.media-dialog .settings-status { min-height: 24px; flex: 0 0 auto; padding: 3px 25px 12px; color: #c8cacc; }
.media-toolbar { border-bottom-color: #303234; }
.media-toolbar:focus-within { border-bottom-color: #404345; }
.media-upload { border: 1px solid #12d878; background: #12d878; color: #07150d; font-weight: 850; box-shadow: 0 0 0 1px #12d87822, 0 5px 18px #12d87824; }
.media-upload:hover { border-color: #49f19a; background: #49f19a; color: #06120b; box-shadow: 0 0 0 3px #12d87824; }
.media-upload span { font-weight: 900; }
.media-upload[aria-disabled="true"] { border-color: #53635a; background: #35423a; color: #b9c8bf; box-shadow: none; }
.media-view-toggle button.active { background: #12d878; color: #07150d; font-weight: 900; }
.media-view-toggle:has(button.active) { border-color: #12d87888; }
.media-card:hover { border-color: #12d87899; box-shadow: 0 8px 24px #0005, 0 0 0 1px #12d87812; }
.media-card-preview { position: relative; }
.media-type-label { position: absolute; top: 10px; left: 10px; z-index: 1; padding: 5px 8px; border: 1px solid transparent; border-radius: 5px; color: #07130b; font-size: 8px; font-weight: 950; letter-spacing: .1em; line-height: 1; pointer-events: none; box-shadow: 0 2px 10px #0008; }
.media-type-image { border-color: #4af39a; background: #12d878; }
.media-type-video { border-color: #ff6672; background: #f33b4d; color: #fff; }
.media-type-document { border-color: #a9afb1; background: #d3d6d7; color: #17191a; }
.media-document-preview { color: #f2f4f4; }
.media-document-mark { border-color: #12d878aa; color: #57efa0; box-shadow: 0 0 22px #12d87818, 0 12px 25px #0006; }
.media-card-actions button { border-color: #414446; background: #252729; color: #f1f2f2; font-weight: 700; }
.media-card-actions button:hover { border-color: #12d878; background: #143325; color: #75f3ae; }
.media-card-actions .settings-delete { border-color: #74343a; background: #321b1e; color: #ff747e; }
.media-card-actions .settings-delete:hover { border-color: #ff4655; background: #651f27; color: #fff; }
.media-dialog .settings-status { color: #35e887; font-weight: 750; }
.media-dialog .settings-status.is-error { color: #ff5966; }
.media-header .settings-eyebrow { color: #35e887; }
.media-search:focus-within { border-color: #12d878; box-shadow: 0 0 0 2px #12d87820; }
.media-select:focus-visible, .media-view-toggle button:focus-visible, .media-card-actions button:focus-visible, .media-upload:focus-visible { outline: 2px solid #12d878; outline-offset: 2px; }
.media-list .media-card { min-height: 88px; flex-direction: row; align-items: center; }
.media-list .media-card-preview { width: 126px; min-height: 88px; aspect-ratio: auto; flex: 0 0 126px; border-right: 1px solid #292b2d; border-bottom: 0; }
.media-list .media-document-mark { width: 38px; height: 48px; font-size: 9px; }
.media-list .media-document-preview { font-size: 0; }
.media-list .media-card-details { flex: 1; padding: 12px 16px; }
.media-list .media-card .settings-asset-info strong { font-size: 12px; }
.media-list .media-card .settings-asset-info span { font-size: 10px; }
.media-list .media-card-actions { margin-left: auto; }
.machine-manage-button { display: grid; width: 35px; height: 35px; flex: 0 0 auto; place-items: center; border: 1px solid #383b3d; border-radius: 9px; background: #17191a; color: #c2c6c7; }
.machine-manage-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.machine-manage-button:hover { border-color: #666b6d; background: #232628; color: #f0f1f1; }
.account-settings-dialog { display: none; width: min(1240px, calc(100vw - 42px)); max-width: 1240px; height: min(850px, calc(100dvh - 42px)); max-height: calc(100dvh - 42px); flex-direction: column; border-color: #303234; border-radius: 20px; background: #0a0b0c; color: #f2f3f3; }
.account-settings-dialog[open] { display: flex; }
.account-settings-dialog::backdrop { background: rgb(3 4 5 / 82%); backdrop-filter: blur(12px); }
.account-settings-header { display: flex; min-height: 88px; flex: 0 0 auto; align-items: center; justify-content: space-between; padding: 18px 28px; border-bottom: 1px solid #292b2d; background: linear-gradient(105deg, #17191a, #0d0e0f 65%); }
.account-settings-header h2 { margin: 4px 0 0; font-size: 23px; font-weight: 720; letter-spacing: -.04em; }
.account-settings-header p { margin: 4px 0 0; color: #8f9496; font-size: 11px; }
.account-settings-page { display: flex; min-height: 0; flex: 1; }
.account-settings-rail { display: flex; width: 220px; flex: 0 0 220px; flex-direction: column; gap: 7px; padding: 26px 15px; border-right: 1px solid #27292b; background: #101112; }
.settings-rail-label { margin: 0 9px 9px; color: #7d8284; font-size: 9px; font-weight: 850; letter-spacing: .14em; }
.settings-rail-item { display: flex; min-height: 39px; align-items: center; justify-content: space-between; gap: 12px; padding: 0 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #aeb2b3; text-align: left; text-decoration: none; font: inherit; font-size: 11px; font-weight: 650; }
.settings-rail-item:hover { background: #1a1c1d; color: #f2f3f3; }
.settings-rail-item.active { border-color: #4a4e50; background: #242729; color: #f0f1f1; }
.settings-rail-item span { color: #83898a; font-size: 10px; }
.settings-rail-item.active span { color: #c8cbcc; }
.machine-settings-content { width: min(890px, 100%); min-width: 0; margin: 0 auto; padding: 36px clamp(18px, 4vw, 54px) 30px; overflow: auto; overscroll-behavior: contain; scrollbar-color: #45494a transparent; scrollbar-width: thin; }
.machine-settings-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 23px; }
.machine-settings-title h3 { margin: 5px 0 0; font-size: 25px; font-weight: 680; letter-spacing: -.04em; }
.machine-settings-title p { margin: 7px 0 0; color: #969b9c; font-size: 11px; line-height: 1.6; }
.machine-refresh-button { min-height: 35px; flex: 0 0 auto; padding: 0 11px; border: 1px solid #393c3e; border-radius: 8px; background: #191b1c; color: #d7d9da; font-size: 10px; font-weight: 700; }
.machine-refresh-button span { margin-right: 4px; color: #c4c8c9; font-size: 15px; }
.machine-refresh-button:hover { border-color: #666b6d; background: #242729; }
.machine-enroll-card { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 30px; padding: 19px; border: 1px solid #3c4042; border-radius: 13px; background: linear-gradient(110deg, #1d2022, #121415); box-shadow: inset 2px 0 0 #64696b; }
.machine-enroll-symbol { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border: 1px solid #4b5052; border-radius: 9px; background: #282b2d; color: #d5d8d9; font-size: 22px; }
.machine-enroll-copy { display: grid; min-width: 0; flex: 1; gap: 7px; }
.machine-enroll-copy strong { color: #ededee; font-size: 12px; font-weight: 750; }
.machine-enroll-copy p { margin: 0; color: #b9bdbe; font-size: 10px; line-height: 1.6; }
.machine-enroll-copy code { display: block; margin-top: 3px; padding: 10px 11px; overflow-wrap: anywhere; border: 1px solid #44484a; border-radius: 7px; background: #0b0c0d; color: #d4d7d8; font: 10px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; user-select: all; }
.machine-copy-command { min-height: 34px; flex: 0 0 auto; padding: 0 11px; border: 1px solid #d0d3d4; border-radius: 7px; background: #d0d3d4; color: #111314; font-size: 10px; font-weight: 850; }
.machine-copy-command:hover { border-color: #fff; background: #f3f4f4; }
.machine-list-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 1px 10px; }
.machine-list-heading strong { font-size: 12px; font-weight: 750; }
.machine-list-heading span { color: #929798; font-size: 10px; }
.machine-settings-list { display: grid; gap: 8px; }
.machine-settings-card { display: flex; min-width: 0; align-items: center; gap: 13px; padding: 13px; border: 1px solid #303335; border-radius: 11px; background: #141617; transition: border-color 130ms ease, background 130ms ease; }
.machine-settings-card:hover { border-color: #484c4d; background: #181a1b; }
.machine-settings-card.is-revoked { opacity: .62; }
.machine-card-glyph { display: grid; width: 39px; height: 39px; flex: 0 0 auto; place-items: center; border: 1px solid #34383a; border-radius: 9px; background: #202325; color: #c4c8c9; font-size: 20px; }
.machine-card-details { display: grid; min-width: 0; flex: 1; gap: 5px; }
.machine-card-title { display: flex; min-width: 0; align-items: center; gap: 9px; }
.machine-card-title strong { overflow: hidden; color: #eceeef; font-size: 11px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.machine-state { padding: 3px 6px; border: 1px solid #46494b; border-radius: 4px; background: #252729; color: #c6c9ca; font-size: 8px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.machine-state-online { border-color: #676c6e; background: #303335; color: #f0f1f1; }
.machine-state-offline { border-color: #505456; background: #242729; color: #b7bbbc; }
.machine-state-pairing { border-color: #575b5d; background: #292b2d; color: #c9cccd; }
.machine-state-revoked { border-color: #703238; background: #331b1f; color: #ff6772; }
.machine-card-id { overflow: hidden; color: #858b8d; font: 9px ui-monospace, SFMono-Regular, Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; }
.machine-card-meta { color: #858b8d; font-size: 9px; }
.machine-card-actions { display: flex; flex: 0 0 auto; gap: 6px; }
.machine-card-actions button { min-height: 32px; padding: 0 10px; border: 1px solid #3a3d3f; border-radius: 7px; background: #202223; color: #d7d9da; font-size: 9px; font-weight: 750; }
.machine-card-actions .machine-use-button { border-color: #696e70; background: #303335; color: #eff0f0; }
.machine-card-actions .machine-use-button:hover { border-color: #b1b5b6; background: #3b3e40; }
.machine-card-actions .machine-use-button:disabled { cursor: default; opacity: .56; }
.machine-card-actions .machine-revoke-button { border-color: #73343a; background: #321b1e; color: #ff7780; }
.machine-card-actions .machine-revoke-button:hover { border-color: #ff4655; background: #642129; color: white; }
.machine-settings-status { min-height: 22px; padding: 9px 1px; color: #c7cacc; font-size: 10px; font-weight: 700; }
.machine-settings-status.is-error, .settings-error { color: #ff5864; }
@media (max-width: 760px) {
  .machine-manage-button { width: 32px; height: 32px; }
  .account-settings-dialog { width: calc(100vw - 14px); height: calc(100dvh - 14px); max-height: calc(100dvh - 14px); border-radius: 15px; }
  .account-settings-header { min-height: 78px; padding: 14px 17px; }
  .account-settings-page { flex-direction: column; }
  .account-settings-rail { width: 100%; flex: 0 0 auto; flex-direction: row; align-items: center; gap: 5px; padding: 8px 11px; border-right: 0; border-bottom: 1px solid #27292b; }
  .settings-rail-label { display: none; }
  .settings-rail-item { min-height: 34px; flex: 1; }
  .machine-settings-content { padding: 23px 14px 22px; }
  .machine-settings-title { align-items: flex-start; }
  .machine-settings-title h3 { font-size: 22px; }
  .machine-enroll-card { flex-wrap: wrap; gap: 11px; padding: 14px; }
  .machine-enroll-copy { flex-basis: calc(100% - 52px); }
  .machine-copy-command { margin-left: 47px; }
  .machine-settings-card { flex-wrap: wrap; gap: 10px; }
  .machine-card-details { width: calc(100% - 52px); flex: 1 1 calc(100% - 52px); }
  .machine-card-actions { width: 100%; justify-content: flex-end; padding-left: 48px; }
}
@media (max-width: 760px) {
  .media-dialog { width: calc(100vw - 16px); height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); border-radius: 15px; }
  .media-header { padding: 17px 17px 14px; }
  .media-toolbar { flex-wrap: wrap; gap: 8px; padding: 11px 14px; }
  .media-intro { min-width: calc(100% - 130px); }
  .media-search { order: 2; width: 100%; }
  .media-select { flex: 1; }
  .media-upload { margin-left: auto; }
  .settings-asset-list.media-grid { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 9px; padding: 13px 12px 20px; }
  .settings-asset-list.media-list { padding: 12px; }
  .media-card-details { align-items: flex-start; flex-direction: column; padding: 9px; }
  .media-card-actions { width: 100%; }
  .media-card-actions button { flex: 1; }
  .media-list .media-card { min-height: 76px; }
  .media-list .media-card-preview { width: 92px; min-height: 76px; flex-basis: 92px; }
  .media-list .media-card-details { align-items: center; flex-direction: row; padding: 8px 10px; }
  .media-list .media-card-actions { width: auto; }
  .media-list .media-card-actions button { flex: 0 1 auto; }
}
.app-status { position: fixed; z-index: 40; right: 16px; bottom: calc(112px + env(safe-area-inset-bottom)); max-width: min(420px, calc(100vw - 32px)); padding: 10px 14px; border: 1px solid #424a46; border-radius: 10px; background: #202624; color: #e4e9e6; box-shadow: 0 12px 32px rgb(0 0 0 / 38%); font-size: 11px; line-height: 1.45; animation: fade-in 120ms ease-out both; }
.chat-history-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding-top: 9px; border-top: 1px solid #303238; }
.chat-history-tools button { min-height: 36px; padding: 0 4px; border: 0; border-radius: 7px; background: transparent; color: #bfc2c4; font-size: 11px; }
.chat-history-tools button:hover { background: #25282b; color: #fff; }
.history-toggle { display: none; width: 38px; height: 38px; flex: 0 0 auto; }
.history-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; }
.chat-history-scrim { display: none; }
.block.assistant-block { padding: 0 !important; border: 0 !important; border-left: 0 !important; background: transparent !important; color: var(--text) !important; box-shadow: none !important; }

@media (min-width: 761px) {
  .app { left: 0; right: 0; width: min(1000px, 100%); max-width: none; transition: left 180ms ease, width 180ms ease; }
  body.chat-history-open .app { right: 0; left: 272px; width: min(1000px, calc(100% - 272px)); }
  .chat-history { transform: translateX(-102%); transition: transform 180ms ease; }
  body.chat-history-open .chat-history { transform: translateX(0); }
  .history-toggle { display: grid; }
  #history-close { visibility: visible; }

  /* Agent work and chat can share the desktop view. */
  .transcript-shell { flex-direction: row; }
  .transcript-shell.has-agent-panes .agent-pane-grid { flex-basis: 50%; flex: 1; min-width: 0; }
  .transcript-shell.has-agent-panes .sleek-stage { flex-basis: 50%; flex: 1; min-width: 0; }
}
@media (max-width: 760px) {
  .chat-history { z-index: 31; width: min(84vw, 320px); padding-top: max(14px, env(safe-area-inset-top)); transform: translateX(-102%); transition: transform 180ms ease; box-shadow: 12px 0 38px rgb(0 0 0 / 24%); }
  body.chat-history-open .chat-history { transform: translateX(0); }
  .chat-history-scrim:not([hidden]) { position: fixed; z-index: 30; inset: 0; display: block; width: 100%; height: 100%; border: 0; background: rgb(0 0 0 / 54%); }
  .history-toggle { display: grid; }
  .app { left: 0; right: 0; width: 100%; max-width: 760px; }
}
.inline-image-block figcaption { margin-top: 5px; color: var(--text-dim); font-size: 12px; }
.thinking-panel { margin: 3px 0 9px; color: var(--text-dim); }
.thinking-summary { display: flex; width: fit-content; min-height: 28px; align-items: center; gap: 6px; padding: 0; cursor: pointer; list-style: none; font-size: 12px; font-weight: 600; user-select: none; }
.thinking-summary::-webkit-details-marker { display: none; }
.thinking-summary svg { width: 12px; height: 12px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; transition: transform 140ms ease; }
.thinking-panel[open] .thinking-summary svg { transform: rotate(90deg); }
.thinking-body { max-height: 240px; overflow: auto; margin: 3px 0 7px 18px; padding: 0; color: var(--text-dim); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11px; line-height: 1.55; }
.assistant-content p { margin: 0 0 12px; }
.assistant-content p:last-child { margin-bottom: 0; }
.assistant-content strong { font-weight: 650; }
.assistant-content em { font-style: italic; }
.assistant-content h1, .assistant-content h2, .assistant-content h3, .assistant-content h4 { margin: 18px 0 8px; font-size: 1em; font-weight: 650; }
.assistant-content ul, .assistant-content ol { margin: 8px 0 12px; padding-left: 26px; }
.assistant-content li { padding-left: 3px; }
.assistant-content blockquote { margin: 10px 0; padding: 2px 0 2px 14px; border-left: 2px solid var(--border); color: var(--text-dim); }
.assistant-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.assistant-content hr { height: 1px; margin: 18px 0; border: 0; background: var(--border); }
.markdown-table-scroll { width: 100%; max-width: 100%; margin: 10px 0 14px; overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; scrollbar-width: thin; }
.assistant-content table { width: max-content; min-width: 100%; max-width: none; border-collapse: collapse; font-size: 14px; }
.assistant-content th, .assistant-content td { max-width: 280px; padding: 7px 10px; border: 1px solid var(--border); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.assistant-content th { position: sticky; top: 0; background: var(--surface-2); color: var(--text); }
.assistant-content code:not(pre code) { padding: 2px 6px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-2); font: .9em var(--mono); font-weight: 400; }
.block-meta { margin-top: 4px; color: var(--text-dim); text-align: right; font-size: 11px; opacity: .7; }
.message-state { margin-left: 8px; color: var(--text-dim); font-size: 11px; }
.message-state.failed { color: var(--danger); cursor: pointer; }
.message-state.queued { color: var(--text-dim); }
.thinking-line, .reconnect-line { align-self: flex-start; margin: 7px 0; color: var(--text-dim); font-size: 14px; }
.thinking-line { display: flex; width: 42px; height: 42px; align-items: center; justify-content: center; }
.thinking-cell { position: relative; display: block; width: 30px; height: 30px; }
.cell-nucleus { width: 5px; height: 5px; border-radius: 50%; background: #fff4d2; box-shadow: 0 0 7px color-mix(in srgb, var(--accent) 80%, white); animation: nucleus-drift 1.8s ease-in-out infinite alternate; }
.cell-orbit { position: absolute; inset: 1px; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 50%; transform: rotate(-32deg) scaleY(.63); animation: cell-orbit 3s linear infinite; }
.cell-orbit-two { inset: 3px -1px; border-color: color-mix(in srgb, var(--accent) 24%, transparent); transform: rotate(52deg) scaleY(.72); animation-duration: 4.2s; animation-direction: reverse; }
.cell-orbit i { position: absolute; top: 1px; left: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.reconnect-line { align-self: center; }
.clarification-card {
  width: min(100%, 560px);
  margin: 12px 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--accent) 45%, transparent);
  animation: fade-in 120ms ease-out both;
}
.clarification-heading { color: var(--accent); font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.clarification-question { margin: 8px 0 4px; color: var(--text); font-size: 16px; font-weight: 650; }
.clarification-helper { margin: 0 0 12px; color: var(--text-dim); font-size: 12px; }
.clarification-choices { display: grid; gap: 7px; }
.clarification-choice {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg);
  color: var(--text);
  text-align: left;
}
.clarification-choice:hover:not(:disabled) { border-color: var(--accent); background: var(--surface-2); }
.clarification-choice-number {
  display: grid;
  width: 23px;
  height: 23px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 5px;
  background: var(--surface-2);
  color: var(--text-dim);
  font: 11px var(--mono);
}
.clarification-other { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; margin-top: 10px; }
.clarification-other-label { grid-column: 1 / -1; color: var(--text-dim); font-size: 12px; font-weight: 650; }
.clarification-other textarea {
  min-width: 0;
  min-height: 42px;
  flex: 1;
  padding: 9px 10px;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
}
.clarification-other button {
  min-height: 42px;
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  background: var(--accent);
  color: var(--send-active-text);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.clarification-choice:disabled, .clarification-other button:disabled, .clarification-other textarea:disabled { cursor: default; opacity: .55; }
.clarification-feedback { min-height: 0; margin-top: 8px; color: var(--text-dim); font-size: 12px; }
.clarification-feedback:empty { display: none; }
.clarification-card.answered { border-left-color: var(--success); box-shadow: none; }
.clarification-card.answered .clarification-heading { color: var(--success); }
.tool-line-wrap { width: 100%; margin: 3px 0; overflow: visible; }
.tool-line { display: flex; width: 100%; min-height: 42px; align-items: center; gap: 10px; margin: 0; padding: 8px 12px; border: 0; background: transparent; color: var(--text-dim); font-size: 13px; line-height: 1.45; text-align: left; cursor: pointer; }
.tool-line:hover { color: var(--text); }
.tool-line:disabled { cursor: default; }
.tool-line.command-action .tool-label { color: var(--text); font-weight: 700; }
.tool-line.running .tool-label::before, .tool-line.done .tool-label::before, .tool-line.failed .tool-label::before { display: inline-block; width: 7px; height: 7px; margin: 0 9px 1px 0; border-radius: 50%; content: ""; vertical-align: middle; }
.tool-line.running, .tool-line.running .tool-label { color: var(--tool-running); font-weight: 700; }
.tool-line.done, .tool-line.done .tool-label { color: var(--tool-done); font-weight: 700; }
.tool-line.failed, .tool-line.failed .tool-label { color: var(--tool-failed); font-weight: 700; }
.tool-line.running .tool-label::before { background: var(--tool-running); box-shadow: 0 0 10px color-mix(in srgb, var(--tool-running) 70%, transparent); animation: tool-pulse 1.4s ease-in-out infinite; }
.tool-line.done .tool-label::before { background: var(--tool-done); }
.tool-line.failed .tool-label::before { background: var(--tool-failed); }
@keyframes tool-pulse { 50% { opacity: .38; transform: scale(.78); } }
.tool-line .tool-label { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.tool-line.file-progress .tool-label { color: var(--text); font-variant-numeric: tabular-nums; }
.tool-line .tool-label strong { color: var(--tool-failed); font-weight: 700; }
.tool-chevron { width: 7px; height: 7px; flex: 0 0 auto; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .16s ease; }
.tool-line[aria-expanded="true"] .tool-chevron { transform: rotate(135deg); }
.tool-output { max-height: 460px; margin: 0 0 4px 12px; padding: 0; overflow: auto; border: 0; border-left: 1px solid var(--border); border-radius: 0; background: transparent; color: var(--text-dim); }
.tool-command { margin: 0; padding: 5px 12px; overflow: auto; border: 0; color: var(--text); font: 600 12px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.tool-diff { padding: 8px; }
.tool-read-view { padding: 0; }
.tool-read-view .code-card { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.tool-result { max-height: 340px; margin: 0; padding: 12px; overflow: auto; color: var(--text); font: 12px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.tool-diff .diff-card { margin: 0; }
.tool-diff .code-header { display: none; }
.tool-output button { min-height: 36px; border: 0; background: transparent; color: var(--accent); }
.explore-line { align-self: flex-start; margin: 4px 0; color: var(--text-dim); font-size: 14px; }
.turn-footer { margin: 10px 0 14px; color: var(--text-dim); font-size: 12px; }

.code-card, .diff-card { width: 100%; margin: 14px 0; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--code-bg); }
.code-header { display: flex; min-height: 38px; align-items: center; justify-content: space-between; gap: 10px; padding: 0 10px 0 13px; border-bottom: 1px solid var(--border); color: var(--text-dim); font-size: 12px; }
.code-header .file-path { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copy-button { min-width: 44px; min-height: 36px; border: 0; border-radius: 7px; background: transparent; color: var(--text-dim); font-size: 12px; }
.copy-button:hover { background: var(--surface-2); color: var(--text); }
.code-scroll { max-height: 360px; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.code-lines { min-width: max-content; padding: 7px 0; font: 13px/1.55 var(--mono); }
.code-line { display: grid; min-height: 20px; grid-template-columns: 48px max-content; padding-right: 16px; white-space: pre; }
.line-number { padding-right: 12px; color: var(--text-dim); text-align: right; user-select: none; opacity: .72; }
.line-content { padding-left: 12px; border-left: 3px solid transparent; }
.code-line.added { background: var(--add-bg); }.code-line.added .line-content { border-left-color: var(--add-bar); }
.code-line.removed { background: var(--del-bg); }.code-line.removed .line-content { border-left-color: var(--del-bar); }
.token-keyword { color: #d2a8ff; }.token-type { color: #f2cc60; }.token-string { color: #7ee787; }.token-function { color: #79c0ff; }.token-comment { color: var(--text-dim); }
.code-footer { display: flex; min-height: 34px; align-items: center; justify-content: center; border-top: 1px solid var(--border); }
.code-footer button { min-height: 34px; border: 0; background: transparent; color: var(--text-dim); font-size: 12px; }
.code-hunk summary { min-height: 34px; padding: 8px 12px; border-top: 1px solid var(--border); color: var(--text-dim); font: 12px var(--mono); cursor: pointer; }

.composer-dock { position: relative; z-index: 4; flex: 0 0 auto; padding: 0 8px calc(7px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--bg) 13%); }
.todo-inline { position: relative; z-index: 2; width: fit-content; max-width: 100%; margin: 0 0 5px 2px; }
.todo-inline-toggle { display: flex; min-height: 30px; align-items: center; gap: 7px; padding: 0 7px; border: 0; border-radius: 7px; background: transparent; color: var(--text-dim); font-size: 12px; font-weight: 600; }
.todo-inline-toggle:hover, .todo-inline-toggle[aria-expanded="true"] { background: var(--surface-2); color: var(--text); }
.todo-inline-toggle svg { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.todo-inline-arrow { transition: transform 150ms ease; }
.todo-inline-toggle[aria-expanded="true"] .todo-inline-arrow { transform: rotate(-90deg); transform-origin: 16px 12px; }
.todo-inline-count { color: var(--text-dim); font: 11px var(--mono); }
.todo-inline-panel { position: absolute; right: auto; bottom: calc(100% + 7px); left: 0; width: min(420px, calc(100vw - 28px)); max-height: min(30dvh, 240px); padding: 6px 12px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.todo-inline-panel .todo-list { margin: 0; }
.todo-inline-panel .todo-item { min-height: 36px; padding: 7px 0; font-size: 12px; }
.composer-card { padding: 8px 10px 7px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); }
.composer-card textarea { display: block; width: 100%; min-height: 56px; max-height: 196px; padding: 8px 4px; resize: none; overflow-y: auto; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 16px; line-height: 1.45; }
.composer-card textarea::placeholder { color: var(--text-dim); opacity: 1; }
.composer-controls { display: flex; min-height: 44px; align-items: center; gap: 4px; }
.round-control { width: 44px; height: 44px; }
.plus-button { font-size: 27px; font-weight: 300; }
.quiet-selector { display: flex; min-width: 0; min-height: 40px; align-items: center; gap: 8px; padding: 0 5px; border: 0; border-radius: 8px; background: transparent; color: var(--text-dim); font-size: 12px; }
.quiet-selector:hover { background: var(--surface-2); color: var(--text); }
.quiet-selector span:first-child { overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
.quiet-selector span:nth-child(2) { white-space: nowrap; }
.quiet-selector svg { width: 14px; height: 14px; }
.control-spacer { flex: 1; }
.status-button svg { width: 19px; height: 19px; }
.send-button { width: 36px; height: 36px; margin: 0 2px; background: var(--surface-2); color: var(--text-dim); transition: background 100ms, color 100ms; }
.send-button svg { width: 19px; height: 19px; }
.send-button .stop-icon { display: none; }
.send-button.has-text { background: #e6e8eb; color: #12151a; }
.send-button.busy { background: var(--surface-2); color: var(--text); }
.send-button.busy .send-icon { display: none; }.send-button.busy .stop-icon { display: block; }
.environment-selector { display: flex; min-height: 26px; align-items: center; gap: 5px; margin: 2px 5px 0 auto; padding: 0 6px; border: 0; background: transparent; color: var(--text-dim); font-size: 11px; opacity: .78; }
.environment-selector svg { width: 12px; height: 12px; }
.status-line { position: absolute; right: 12px; bottom: 44px; color: var(--text-dim); font-size: 11px; }
.sheet-scrim { position: fixed; z-index: 19; inset: 0; background: rgb(0 0 0 / 45%); }
.model-sheet { position: fixed; z-index: 20; right: max(8px, calc((100vw - 760px) / 2 + 8px)); bottom: calc(115px + env(safe-area-inset-bottom)); left: max(8px, calc((100vw - 760px) / 2 + 8px)); width: min(420px, calc(100vw - 16px)); margin: 0 auto; padding: 12px; }
.model-sheet header { display: flex; min-height: 42px; align-items: center; justify-content: space-between; padding: 0 3px 6px 8px; }
.sheet-close { width: 36px; height: 36px; font-size: 23px; }
.model-option.selected span { color: var(--success); font-size: 11px; }
.reasoning-option { display: flex; min-height: 46px; align-items: center; justify-content: space-between; padding: 0 12px; color: var(--text-dim); font-size: 13px; }
.reasoning-option select { min-height: 36px; padding: 0 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); color: var(--text); }

@media (min-width: 761px) {
  body { background: color-mix(in srgb, var(--bg) 88%, #1b2533); }
  .app { border-right: 1px solid var(--border); border-left: 1px solid var(--border); }
}
@media (max-width: 390px) {
  .transcript { padding-right: 12px; padding-left: 12px; }
  .composer-card { padding-right: 7px; padding-left: 7px; }
  .quiet-selector { gap: 5px; font-size: 11px; }
  .status-button { width: 40px; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes shimmer { to { background-position: -220% 0; } }
@keyframes cell-orbit { to { rotate: 328deg; } }
@keyframes nucleus-drift { to { transform: translate(2px, -1px) scale(.72); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .agent-pane { animation: none !important; }
}

body {
  background-color: var(--bg);
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 24px 24px;
}
.app { background: var(--bg); }
.topbar {
  border-bottom: var(--heavy-border);
  background: var(--surface-2);
}
.conversation-title { font-weight: 800; letter-spacing: -.025em; }
.icon-button, .round-control, .send-button, .sheet-close { border-radius: var(--chip-radius); }
.icon-button:hover, .round-control:hover { background: var(--accent); color: var(--send-active-text); }
.menu, .small-sheet {
  border: var(--heavy-border);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow);
}
.menu button, .small-sheet > button { border-radius: var(--chip-radius); }
.menu button:hover, .small-sheet > button:hover { background: var(--surface-2); }
.splash {
  width: fit-content;
  padding: 10px 12px;
  border: var(--heavy-border);
  border-radius: var(--card-radius);
  background: var(--surface-2);
  box-shadow: var(--shadow);
}
.exit-mark { color: var(--text); font-weight: 850; }
.splash-line { color: var(--text-dim); }
.block.user-block {
  border: var(--heavy-border);
  border-radius: var(--card-radius);
  background: var(--surface-2);
  box-shadow: var(--shadow);
}
.block.assistant-block { padding-left: 12px; border-left: 3px solid var(--accent); }
.block-meta, .turn-footer { font-family: var(--mono); }
.tool-pulse { width: 9px; height: 9px; }
.code-card, .diff-card {
  border: var(--heavy-border);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow);
}
.code-header { background: var(--surface-2); }
.copy-button, .code-footer button { border-radius: var(--chip-radius); font-weight: 650; }
.composer-dock { background: var(--bg); }
.composer-card {
  border: var(--heavy-border);
  border-radius: var(--composer-radius);
  box-shadow: var(--shadow);
}
.composer-controls { border-top: 1px solid var(--grid-line); }
.quiet-selector { border-radius: var(--chip-radius); font-weight: 650; }
.send-button {
  border: 2px solid var(--border);
  border-radius: var(--chip-radius);
  background: var(--send-bg);
  color: var(--send-text);
  box-shadow: 2px 2px 0 var(--border);
}

.composer-attach-button { display: grid; width: 40px; height: 44px; flex: 0 0 40px; place-items: center; border-radius: 12px; color: #b8bdbe; cursor: pointer; transition: background 140ms ease, color 140ms ease, transform 140ms ease; }
.composer-attach-button:hover { background: #292c30; color: #f3f4f4; transform: translateY(-1px); }
.composer-attach-button:focus-visible { outline: 2px solid #bfc3c4; outline-offset: 2px; }
.composer-attach-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.attachment-file-chip { display: flex; min-width: 110px; max-width: 220px; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid #363a3b; border-radius: 10px; background: #1a1c1d; color: #e3e5e5; font-size: 10px; }
.attachment-file-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-file-chip button { margin-left: auto; border: 0; background: transparent; color: #aeb3b4; cursor: pointer; font-size: 15px; }
.message-file-chip { display: inline-flex; max-width: min(260px, 100%); align-items: center; margin: 8px 6px 0 0; padding: 5px 8px; border: 1px solid #45494a; border-radius: 7px; color: #daddde; font-size: 10px; }

.personalization-content { width: min(980px, 100%); min-width: 0; margin: 0 auto; padding: 36px clamp(18px, 4vw, 54px) 30px; overflow: auto; overscroll-behavior: contain; scrollbar-color: #45494a transparent; scrollbar-width: thin; }
.personalization-content[hidden] { display: none; }
.personalization-field { display: grid; gap: 7px; margin: 18px 0; color: #eceeef; font-size: 12px; font-weight: 700; }
.personalization-field small, .personalization-switches small, .personalization-section-heading small { color: #909697; font-size: 10px; font-weight: 450; line-height: 1.55; }
.personalization-field textarea, .personalization-field select, .personalization-field input { width: 100%; min-height: 42px; padding: 11px 12px; border: 1px solid #343839; border-radius: 9px; background: #111314; color: #eceeef; font-family: inherit; font-size: 12px; line-height: 1.55; }
.personalization-field textarea { min-height: 112px; resize: vertical; }
.personalization-field textarea:focus, .personalization-field select:focus, .personalization-field input:focus { border-color: #8c9294; outline: 2px solid #8c929433; }
.personalization-switches { display: grid; gap: 1px; margin: 18px 0; border: 1px solid #303436; border-radius: 12px; background: #303436; overflow: hidden; }
.personalization-switches label { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 15px; background: #131516; cursor: pointer; }
.personalization-switches label span { display: grid; gap: 4px; }
.personalization-switches strong { color: #e8ebeb; font-size: 11px; }
.personalization-switches input { width: 17px; height: 17px; accent-color: #d5d8d9; }
.personalization-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 27px 0 10px; }
.personalization-section-heading div { display: grid; gap: 4px; }
.personalization-section-heading strong { color: #eceeef; font-size: 12px; }
.personalization-reset { padding: 7px 10px; border: 1px solid #45494a; border-radius: 7px; background: #191b1c; color: #d3d6d7; font-size: 10px; cursor: pointer; }
.personalization-learned-list, .personalization-project-list { display: grid; gap: 7px; }
.personalization-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border: 1px solid #303436; border-radius: 9px; background: #141617; }
.personalization-card-main { display: grid; min-width: 0; gap: 4px; }
.personalization-card-main strong { color: #e7e9e9; font-size: 11px; }
.personalization-card-main small { color: #919697; font-size: 9px; }
.personalization-card-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.personalization-card-actions input[type="text"] { width: min(240px, 28vw); min-height: 32px; padding: 6px 8px; border: 1px solid #3a3e3f; border-radius: 6px; background: #0c0e0f; color: #e8ebeb; font-size: 10px; }
.personalization-card-actions button { min-height: 30px; padding: 0 8px; border: 1px solid #45494a; border-radius: 6px; background: #202324; color: #e0e3e3; font-size: 9px; cursor: pointer; }
.personalization-card-actions button[aria-pressed="true"] { border-color: #9da2a3; background: #363a3b; }
.personalization-history { margin-top: 18px; padding: 12px; border: 1px solid #303436; border-radius: 9px; background: #121415; color: #e4e7e7; font-size: 11px; }
.personalization-history summary { cursor: pointer; font-weight: 700; }
.personalization-history #personalization-history-list { display: grid; gap: 7px; padding-top: 12px; }
.personalization-privacy { margin: 22px 0 4px; padding: 12px; border-left: 2px solid #888e90; background: #17191a; color: #a5aaab; font-size: 10px; line-height: 1.6; }
.personalization-content .machine-settings-status { min-height: 18px; margin-top: 8px; color: #c8cccd; font-size: 10px; }
.turn-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 9px 0 18px; }
.turn-footer > span:first-child { margin-right: 5px; color: var(--text-dim); font-size: 12px; }
.turn-feedback { display: inline-flex; min-height: 36px; align-items: center; justify-content: center; gap: 8px; padding: 0 13px; border: 1px solid #4b4f50; border-radius: 999px; background: #17191a; color: #d7dada; font-size: 13px; font-weight: 550; cursor: pointer; transition: border-color 140ms ease, background 140ms ease, color 140ms ease, transform 140ms ease; }
.turn-feedback svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.turn-feedback:hover, .turn-feedback[aria-pressed="true"] { transform: translateY(-1px); border-color: #a8adae; background: #252829; color: #fff; }
.turn-feedback:disabled { transform: none; opacity: .58; cursor: default; }
.feedback-reply-panel { width: min(100%, 590px); margin: 4px 0 20px; padding: 15px 16px; border: 1px solid #414546; border-radius: 14px; background: linear-gradient(145deg, #1b1e1f, #141617); box-shadow: 0 8px 24px rgb(0 0 0 / 18%); }
.feedback-reply-heading { margin-bottom: 10px; color: #f1f3f3; font-size: 14px; font-weight: 650; }
.feedback-reply-panel blockquote { margin: 0 0 10px; padding: 9px 12px; border-left: 3px solid #8e9697; border-radius: 0 8px 8px 0; background: #111314; color: #b9bfc0; font-size: 12px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.feedback-reply-panel p { margin: 0; color: #d0d4d4; font-size: 13px; line-height: 1.5; }
.feedback-reply-status { min-height: 18px; margin-top: 9px; color: #aeb4b5; font-size: 12px; }
.feedback-reply-cancel { margin-top: 7px; min-height: 32px; padding: 0 12px; border: 1px solid #4a4f50; border-radius: 8px; background: #202324; color: #e0e3e3; font-size: 12px; cursor: pointer; }
.feedback-reply-cancel:hover { background: #2b2f30; border-color: #7b8283; }
.feedback-reply-panel.is-sending .feedback-reply-cancel { opacity: .6; }
.feedback-thanks { color: #c8cece; font-size: 12px; }
.thinking-line .cell-orbit { animation-duration: 1.15s; }
.thinking-line .cell-orbit-two { animation-duration: 1.6s; }
@keyframes cell-orbit { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .thinking-line .cell-orbit, .thinking-line .cell-orbit-two { animation-duration: 1.15s !important; animation-iteration-count: infinite !important; }
}

.send-button.has-text { background: var(--send-active-bg); color: var(--send-active-text); }
.send-button.busy { background: var(--surface-2); color: var(--text); }
.environment-selector { font-family: var(--mono); font-weight: 650; }
.model-sheet { border: var(--heavy-border); border-radius: var(--card-radius); box-shadow: var(--shadow); }
.reasoning-option select { border: var(--heavy-border); border-radius: var(--chip-radius); }
button:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
@media (min-width: 761px) {
  body { background: var(--bg); background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 24px 24px; }
  .app { border-right: var(--heavy-border); border-left: var(--heavy-border); box-shadow: 6px 0 0 color-mix(in srgb, var(--border) 20%, transparent), -6px 0 0 color-mix(in srgb, var(--border) 20%, transparent); }
}

body {
  background-color: var(--bg);
  background-image: radial-gradient(rgb(255 255 255 / 3%) 0.7px, transparent 0.7px);
  background-size: 5px 5px;
}
.app { background: var(--bg); }
.topbar {
  min-height: calc(56px + env(safe-area-inset-top));
  justify-content: flex-start;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.view-tabs { display: flex; height: 100%; align-items: stretch; gap: 20px; }
.daemon-switch { display:flex; align-items:center; gap:7px; margin-left:auto; color:var(--text-dim); font-size:12px; font-weight:650; white-space:nowrap; }
.daemon-switch select { max-width:min(30vw,220px); min-height:36px; padding:0 22px 0 9px; border:1px solid var(--border); border-radius:7px; background:var(--surface-2); color:var(--text); font:inherit; }
@media(max-width:560px) { .daemon-switch { margin-left:auto; } .daemon-switch span { display:none; } .daemon-switch select { max-width:42vw; } }
.view-tab {
  position: relative;
  min-width: 54px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font-size: 15px;
  font-weight: 650;
}
.view-tab.active { color: var(--text); }
.view-tab.active::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  background: var(--accent);
  content: "";
}
.icon-button { border-radius: 6px; }
.icon-button:hover, .round-control:hover { background: var(--surface-2); color: var(--text); }
.transcript-shell {
  isolation: isolate;
  background: var(--bg);
}
.transcript-shell::before,
.transcript-shell::after {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  content: "";
}
.transcript-shell::before {
  display: none;
}
.transcript-shell::after {
  display: none;
}
.transcript-scroll { position: relative; z-index: 1; background: transparent; }
.transcript { gap: 2px; padding: 18px 16px 16px; }
.block { margin: 8px 0; }
.block.user-block,
.block.assistant-block {
  width: fit-content;
  padding: 10px 12px;
  border: 1px solid var(--accent);
  border-radius: 9px;
  background: #222427;
  color: #f4f4f2;
  box-shadow: none;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.block.user-block { max-width: min(60%, 560px); margin-left: auto; }
.block.assistant-block { max-width: 88%; margin-right: auto; padding-left: 12px; }
.block-meta { color: #b7b9ba; }
.splash { margin-left: 0; border-color: var(--border); background: var(--surface); box-shadow: none; }
.exit-mark { color: var(--text); }
.code-card, .diff-card { border: 1px solid var(--border); border-radius: 8px; box-shadow: none; }
.code-header { background: #232529; }
.composer-dock { padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--bg); }
.composer-card {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.composer-card textarea {
  border: 0;
  border-radius: 24px;
  background: #292c30;
  padding: 11px 16px;
}
.composer-card textarea:focus-visible { outline: 0; background: #30343a; }
.attachment-tray { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; }
.attachment-preview { position: relative; width: 52px; height: 52px; flex: 0 0 auto; }
.attachment-preview img { width: 100%; height: 100%; border: 1px solid var(--border); border-radius: 6px; object-fit: cover; }
.attachment-remove { position: absolute; top: -6px; right: -6px; display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid var(--bg); border-radius: 50%; background: var(--surface-2); color: var(--text); font-size: 15px; line-height: 1; }
.message-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.message-attachments img { width: min(220px, 100%); max-height: 180px; border: 1px solid var(--border); border-radius: 6px; object-fit: cover; }
.composer-card textarea {
  width: auto;
  min-width: 0;
  min-height: 44px;
  max-height: 160px;
  flex: 1 1 auto;
  padding: 10px 4px 10px 12px;
  color: var(--text);
  line-height: 1.45;
}
.composer-controls { min-height: 44px; flex: 0 0 auto; border: 0; }
.send-button {
  width: 44px;
  height: 44px;
  margin: 0;
  border: 0;
  border-radius: 8px;
  background: #3a3d40;
  color: var(--text);
  box-shadow: none;
}
.send-button.has-text { background: var(--accent); color: #17191c; }
.send-button.busy { background: #3a3d40; color: var(--text); }
.todo-heading-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.todo-heading { margin: 0; color: var(--text); font-size: 16px; font-weight: 650; }
.todo-count { color: var(--text-dim); font: 12px var(--mono); }
.todo-empty { padding: 16px 0; }
.todo-list { display: grid; gap: 4px; margin: 12px 0; padding: 0; list-style: none; }
.todo-item { display: flex; min-height: 44px; align-items: center; gap: 11px; padding: 9px 0; border-bottom: 1px solid rgb(255 255 255 / 5%); color: var(--text); overflow-wrap: anywhere; }
.todo-marker { display: grid; width: 22px; flex: 0 0 22px; place-items: center; color: #ffcc00; font-weight: 850; text-align: center; }
.todo-marker::before { width: 13px; height: 13px; border-radius: 50%; background: #ffcc00; content: ""; }
.todo-item.pending .todo-marker::before { width: 14px; height: 14px; background: #ffd000; box-shadow: 0 0 0 2px rgb(255 208 0 / 18%); }
.todo-item.active .todo-marker::before { background: #ffb000; box-shadow: 0 0 0 2px rgb(255 176 0 / 20%); }
.todo-item.done { color: var(--text-dim); text-decoration: line-through; text-decoration-color: var(--text-dim); }
.todo-item.done .todo-marker::before { width: 13px; height: 13px; background: #00e676; box-shadow: 0 0 0 2px rgb(0 230 118 / 20%); }
.todo-item.blocked .todo-marker { color: #ff4d5f; }
.todo-item.blocked .todo-marker::before { display: none; }
.runner-content { display: flex; min-height: 240px; flex: 1; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
#runner-preview { width: 100%; min-height: 360px; flex: 1; border: 0; background: #fff; }
#runner-output { width: 100%; min-height: 240px; max-height: 100%; margin: 0; padding: 15px; overflow: auto; color: var(--text); font: 12px/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.composer-dock[hidden], .transcript-scroll[hidden] { display: none; }

@font-face {
  font-family: "JetBrains Mono";
  src: url("/media/fonts/JetBrainsMono.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

.runner-panel { position: absolute; z-index: 8; top: 58px; right: 0; bottom: 0; display: flex; width: min(460px, calc(100vw - 720px)); min-width: 330px; flex-direction: column; border-left: 1px solid #3a4142; background: #171a1b; color: #e9edeb; box-shadow: -16px 0 44px rgb(0 0 0 / 30%); animation: runner-slide-in 170ms ease-out both; }
.runner-panel[hidden] { display: none !important; }
.runner-panel-header { display: flex; min-height: 58px; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 10px; padding: 0 12px 0 16px; border-bottom: 1px solid #303638; background: #1d2122; }
.runner-panel-title { display: flex; min-width: 0; align-items: center; gap: 10px; }
.runner-panel-title > div { display: grid; min-width: 0; gap: 3px; }
.runner-panel-title strong { font-size: 12px; }
.runner-panel-title span:last-child { max-width: 230px; overflow: hidden; color: #92999a; font: 10px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.runner-indicator { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #00d37f; box-shadow: 0 0 0 3px rgb(0 211 127 / 12%); }
.runner-panel-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 5px; }
.runner-panel-actions button { min-height: 31px; padding: 0 9px; border: 1px solid #3a4142; border-radius: 6px; background: #292e2f; color: #dfe4e1; font-size: 10px; font-weight: 650; }
.runner-panel-actions #runner-start { border-color: #00a96b; background: #00bd77; color: #07170f; }
.runner-panel-actions #runner-stop { border-color: #a84c4c; background: #462727; color: #ffd8d5; }
.runner-panel-actions #runner-close { width: 30px; padding: 0; background: transparent; font-size: 20px; }
.runner-content { display: flex; min-height: 0; flex: 1; overflow: hidden; background: #111415; }
#runner-output { width: 100%; min-height: 100%; margin: 0; padding: 14px 16px; overflow: auto; color: #d8e1dd; font: 11px/1.65 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
#runner-preview { width: 100%; min-height: 0; flex: 1; border: 0; background: #fff; }

@media (min-width: 1100px) {
  .app.workspace-layout {
    display: grid;
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 25vw);
    grid-template-rows: calc(56px + env(safe-area-inset-top)) 58px minmax(0, 1fr) auto;
    margin: 0;
    transition: grid-template-columns 220ms cubic-bezier(.2,.75,.25,1);
  }
  .app.workspace-layout .topbar { grid-column: 1 / -1; grid-row: 1; }
  .app.workspace-layout .topbar #history-toggle { display: grid; }
  .app.workspace-layout .view-tabs { display: none; }
  .app.workspace-layout .transcript-shell { display: contents; }
  .app.workspace-layout .sleek-stage { display: contents; }
  .app.workspace-layout #agent-pane-grid { display: none; }

  .app.workspace-layout #transcript-scroll { display: block; grid-column: 2; grid-row: 3; min-width: 0; min-height: 0; width: auto; border-left: 1px solid #303638; background: #171a1b; }
  .app.workspace-layout #composer-dock { display: block; grid-column: 2; grid-row: 4; min-width: 0; border-left: 1px solid #303638; border-top: 1px solid #303638; background: #171a1b; }
  .app.workspace-layout.bob-dock-collapsed { grid-template-columns: minmax(0, 1fr); }

  .app.workspace-layout.bob-dock-collapsed #agent-pane-grid,
  .app.workspace-layout.bob-dock-collapsed #transcript-scroll,
  .app.workspace-layout.bob-dock-collapsed #composer-dock { display: none !important; }
  .app.workspace-layout.has-agent-panes { grid-template-rows: calc(56px + env(safe-area-inset-top)) 58px minmax(0, 1fr) minmax(0, 1fr) auto; transition: grid-template-rows 240ms cubic-bezier(.2,.75,.25,1); }

  .app.workspace-layout.has-agent-panes #agent-pane-grid { display: grid; grid-column: 2; grid-row: 3; min-width: 0; min-height: 0; padding: 8px 8px 0; }
  .app.workspace-layout.has-agent-panes #transcript-scroll { grid-row: 4; }
  .app.workspace-layout.has-agent-panes #composer-dock { grid-row: 5; }
  .app.workspace-layout.has-agent-panes.bob-dock-collapsed #agent-pane-grid { display: none !important; }
  .app.workspace-layout.chat-focus-mode { grid-template-columns: minmax(0, 1fr); grid-template-rows: calc(56px + env(safe-area-inset-top)) 58px minmax(0, 1fr) auto; }
  .app.workspace-layout.chat-focus-mode.has-agent-panes { grid-template-rows: calc(56px + env(safe-area-inset-top)) 58px minmax(0, 1fr) minmax(0, 1fr) auto; }
  .app.workspace-layout.chat-focus-mode .topbar { grid-column: 1; }

  .app.workspace-layout.chat-focus-mode #transcript-scroll { grid-column: 1; grid-row: 3; border-left: 0; }
  .app.workspace-layout.chat-focus-mode #composer-dock { grid-column: 1; grid-row: 4; border-left: 0; }
  .app.workspace-layout.chat-focus-mode #agent-pane-grid { display: none; }
  .app.workspace-layout.chat-focus-mode.has-agent-panes #agent-pane-grid { display: grid; grid-column: 1; grid-row: 3; padding: 8px 12px 0; }
  .app.workspace-layout.chat-focus-mode.has-agent-panes #transcript-scroll { grid-row: 4; }
  .app.workspace-layout.chat-focus-mode.has-agent-panes #composer-dock { grid-row: 5; }
  .runner-panel { width: min(460px, calc(100vw - 720px)); }
}
@media (min-width: 1100px) {
  body:has(.app.workspace-layout) .chat-history {
    z-index: 20;
    inset: 0 auto 0 0;
    width: 272px;
    min-width: 272px;
    padding-top: max(18px, env(safe-area-inset-top));
    border-right: 1px solid #303238;
    border-left: 0;
    transform: translateX(-102%);
    transition: transform 180ms ease;
    box-shadow: 12px 0 38px rgb(0 0 0 / 24%);
  }
  body.chat-history-open:has(.app.workspace-layout) .chat-history { transform: translateX(0); }
  body.chat-history-open:has(.app.workspace-layout) .app.workspace-layout { left: 272px; width: auto; }
  body:has(.app.workspace-layout) #history-close { visibility: visible; }
}
@media (max-width: 1099px) {

  .runner-panel { top: 58px; right: 0; bottom: 0; left: 0; width: auto; min-width: 0; border-left: 0; }
}
@keyframes runner-slide-in { from { opacity: .75; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }
@keyframes cell-orbit { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .thinking-line .cell-orbit, .thinking-line .cell-orbit-two { animation-duration: 1.15s !important; animation-iteration-count: infinite !important; }
}

/* High-contrast thinking orb: thicker yellow orbit arms. */
.thinking-line .cell-orbit{border-width:3px;border-color:#f4ed52!important}
.thinking-line .cell-orbit-two{border-width:3px;border-color:rgba(244,237,82,.78)!important}
.thinking-line .cell-orbit i{width:5px;height:5px;background:#f4ed52!important;box-shadow:0 0 9px #f4ed52!important}
/* A single royal-gold nucleus stays centered inside the spinning orbit. */
.thinking-line .cell-nucleus{position:absolute;top:50%;left:50%;z-index:2;width:8px;height:8px;transform:translate(-50%,-50%);background:#d4af37;box-shadow:0 0 9px #d4af37,0 0 16px rgba(212,175,55,.55);animation:nucleus-glow 1.8s ease-in-out infinite alternate}
@keyframes nucleus-glow{to{transform:translate(-50%,-50%) scale(.82);filter:brightness(1.18)}}
@media (prefers-reduced-motion: reduce){.thinking-line .cell-nucleus{animation:none}}