:root {
  --bg: #0c0e13;
  --bg2: #14171f;
  --bg3: #1c2230;
  --bg4: #262d3e;
  --fg: #e6e9ef;
  --fg2: #9aa3b2;
  --fg3: #6b7385;
  --accent: #7c9cff;
  --accent2: #5a7ce0;
  --border: #242938;
  --border2: #2f3548;
  --ok: #5fd479;
  --err: #ff7080;
  --tool: #d8a55c;
  --user-bubble: #2a3142;
  --asst-bg: transparent;
  --radius: 10px;
  --radius-sm: 6px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.55 -apple-system, system-ui, "Segoe UI", Roboto, Inter, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }
.muted { color: var(--fg2); }

/* ----- icons ----- */
.icon { width: 16px; height: 16px; flex-shrink: 0; vertical-align: middle; }
.icon-lg { width: 20px; height: 20px; flex-shrink: 0; vertical-align: middle; color: var(--accent); }
.icon-sm { width: 13px; height: 13px; flex-shrink: 0; }

button {
  font: inherit;
  color: var(--fg);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 6px 10px;
}
button:hover { background: var(--bg3); }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 6px;
  border-radius: var(--radius-sm);
  color: var(--fg2);
  transition: background .1s, color .1s;
}
.icon-btn:hover { background: var(--bg3); color: var(--fg); }
.icon-btn.primary { background: var(--accent); color: #fff; padding: 8px 10px; }
.icon-btn.primary:hover { background: var(--accent2); color: #fff; }
.icon-btn.primary:disabled { background: var(--bg3); color: var(--fg3); cursor: not-allowed; }
.icon-btn.danger { background: var(--err); color: #fff; padding: 8px 10px; }
.icon-btn.danger:hover { filter: brightness(1.1); }

/* Top-bar "@me" chip — clickable, opens Account modal. */
.me-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--fg2);
  font-size: 12px;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.me-chip:hover { background: var(--bg3); color: var(--fg); border-color: var(--accent); }
.me-chip:empty { display: none; }

select {
  background: var(--bg3); color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 5px 10px; font: inherit; cursor: pointer; min-width: 140px;
}
select:hover { border-color: var(--border2); }

/* ----- login ----- */
#login {
  position: fixed; inset: 0; display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(55% 45% at 50% 0%, rgba(56,132,255,.10), transparent 70%),
    radial-gradient(ellipse at top, #131826 0%, var(--bg) 62%);
}
#login-form {
  background: var(--bg2); padding: 40px 36px 32px; border-radius: 16px;
  border: 1px solid var(--border); width: 100%; max-width: 384px; box-sizing: border-box;
  box-shadow: 0 24px 70px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4);
}
.login-brand { display: flex; align-items: center; gap: 10px; }
.login-logo { width: 26px; height: 26px; color: var(--accent); flex: 0 0 auto; }
.login-word { font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: var(--fg); }
.login-sub { margin: 6px 0 26px; color: var(--fg3); font-size: 13px; }
#login-form input {
  width: 100%; box-sizing: border-box; padding: 12px 14px; background: var(--bg); color: var(--fg);
  border: 1px solid var(--border); border-radius: 9px; margin-bottom: 12px; font-size: 15px;
  transition: border-color .12s, box-shadow .12s;
}
#login-form input::placeholder { color: var(--fg3); }
#login-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(56,132,255,.22); }
#login-form button {
  width: 100%; padding: 12px; margin-top: 4px; background: var(--accent); color: #fff;
  border: none; border-radius: 9px; cursor: pointer; font-weight: 600; font-size: 15px;
  transition: filter .12s, transform .04s;
}
#login-form button:hover { filter: brightness(1.07); }
#login-form button:active { transform: translateY(1px); }
#login-error { color: var(--err); margin: 12px 0 0; min-height: 1em; font-size: 13px; text-align: center; }

/* ----- app layout ----- */
#app { display: flex; flex-direction: column; height: 100vh; }
header {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  height: 48px;
}
header .brand { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; letter-spacing: .2px; }
header .spacer { flex: 1; }
#workspace-bar { display: flex; align-items: center; gap: 4px; }
#session-indicator { font-size: 12px; margin-left: 8px; font-family: ui-monospace, monospace; }
#context-pill {
  font-size: 11px; font-family: ui-monospace, monospace;
  padding: 3px 8px; border-radius: 4px;
  background: var(--bg3); color: var(--fg2);
  border: 1px solid var(--border);
  white-space: nowrap;
}
#context-pill.warn  { background: rgba(216,165,92,0.18); color: var(--tool); border-color: rgba(216,165,92,0.4); }
#context-pill.alert { background: rgba(255,112,128,0.18); color: var(--err);  border-color: rgba(255,112,128,0.4); }
.context-bar {
  display: inline-block; width: 38px; height: 4px;
  background: var(--bg4); border-radius: 2px; margin-right: 6px; vertical-align: middle;
  overflow: hidden; position: relative;
}
.context-bar > i {
  display: block; height: 100%; background: var(--accent);
}
#context-pill.warn  .context-bar > i { background: var(--tool); }
#context-pill.alert .context-bar > i { background: var(--err); }

/* live background sub-agent strip (above the composer) */
#turn-activity {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 0 0 6px; padding: 6px 10px;
  font-size: 12px; color: var(--fg2);
  background: color-mix(in srgb, var(--accent, #6366f1) 10%, var(--bg2));
  border: 1px solid var(--border); border-radius: 8px;
}
#turn-activity .ta-label { font-weight: 600; }
#turn-activity .ta-item {
  padding: 2px 8px; border-radius: 10px; max-width: 320px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--bg3); border: 1px solid var(--border);
  font-family: ui-monospace, monospace; font-size: 11px;
}
#turn-activity .ta-spin { display: inline-block; animation: ta-spin 2s linear infinite; }
@keyframes ta-spin { to { transform: rotate(360deg); } }

/* compact-boundary divider in chat */
.compact-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 24px; padding: 8px 14px;
  color: var(--fg3); font-size: 11px; text-transform: uppercase; letter-spacing: 0.7px;
}
.compact-divider::before, .compact-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

main {
  display: grid;
  grid-template-columns: var(--chat-w, 1fr) 4px 1fr;
  flex: 1; overflow: hidden;
  position: relative; /* anchor for the floating new-workspace form */
}

#splitter-l, #splitter-r {
  background: var(--border);
  cursor: col-resize;
  transition: background .15s;
  position: relative;
}
#splitter-l:hover, #splitter-l.dragging,
#splitter-r:hover, #splitter-r.dragging { background: var(--accent); }
#splitter-l::after, #splitter-r::after {
  content: ''; position: absolute; inset: 0 -4px;
}
/* While a splitter is being dragged: make iframes transparent to pointer
   events so the drag doesn't lose tracking once the cursor crosses into the
   preview pane, force the resize cursor everywhere, and suppress text
   selection that would otherwise highlight as the cursor sweeps. */
body.dragging-splitter { cursor: col-resize; user-select: none; }
body.dragging-splitter iframe { pointer-events: none; }

/* ---------- sidebar ---------- */
#sidebar {
  background: var(--bg2);
  display: flex; flex-direction: column;
  overflow: hidden;
  min-width: 160px;
}
.sidebar-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px 6px;
}
.sidebar-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--fg3); font-weight: 600;
}
.sidebar-header .icon-btn { padding: 4px; }
#workspace-list {
  flex: 1; overflow-y: auto;
  padding: 4px 6px 12px;
  display: flex; flex-direction: column; gap: 1px;
}
#workspace-list::-webkit-scrollbar { width: 8px; }
#workspace-list::-webkit-scrollbar-thumb { background: var(--bg3); border-radius: 4px; }

.ws-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--fg);
  transition: background .1s;
  position: relative;
  min-width: 0;
}
.ws-item:hover { background: var(--bg3); }
.ws-item.active { background: var(--accent); color: #fff; }
.ws-item.active .ws-meta { color: rgba(255,255,255,0.75); }
.ws-item.active .dot { background: rgba(255,255,255,0.7); }
.ws-item.active.has-preview .dot { background: #b8f5c4; box-shadow: 0 0 6px #b8f5c4; }
.ws-item .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--bg4);
  flex-shrink: 0;
}
.ws-item.has-preview .dot { background: var(--ok); box-shadow: 0 0 4px rgba(95, 212, 121, 0.6); }
.ws-item .name {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px;
}
.ws-item .ws-meta {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--fg3);
  flex-shrink: 0;
}
.ws-item .shared-tag {
  display: inline-block; padding: 1px 5px; border-radius: 3px;
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px;
  background: rgba(124,156,255,0.18); color: var(--accent);
  margin-left: 4px;
}
.ws-item.active .shared-tag { background: rgba(255,255,255,0.20); color: #fff; }
.user-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 4px; border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.user-row:last-child { border-bottom: none; }
.user-row .name { flex: 1; }
.user-row .role {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 2px 6px; border-radius: 3px;
  background: var(--bg3); color: var(--fg2);
}
.user-row .role.admin { background: rgba(216,165,92,0.18); color: var(--tool); }
.share-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  background: var(--bg3); border-radius: 6px; margin-bottom: 4px;
  font-size: 13px;
}
.share-row .name { flex: 1; }
.ws-item.active .ws-meta { color: rgba(255,255,255,0.7); }
.ws-item:hover .ws-meta { display: none; }
.ws-item.active .ws-meta { display: inline; }
.ws-item.active:hover .ws-meta { display: none; }
.ws-item .ws-actions {
  display: none; align-items: center; gap: 1px;
}
.ws-item:hover .ws-actions { display: inline-flex; }
.ws-item.active .ws-actions { display: inline-flex; }
.ws-actions .icon-btn { padding: 3px; color: inherit; opacity: 0.75; }
.ws-actions .icon-btn:hover { opacity: 1; background: rgba(255,255,255,0.1); }
.ws-item .name-input {
  flex: 1; background: var(--bg); color: var(--fg);
  border: 1px solid var(--accent); border-radius: 3px;
  padding: 2px 6px; font: inherit; font-size: 13px;
  outline: none; min-width: 0;
}

#new-workspace-form {
  padding: 4px 12px 10px;
  border-bottom: 1px solid var(--border);
}
#new-workspace-form input {
  width: 100%; padding: 6px 8px; background: var(--bg3); color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font: inherit; font-size: 13px; outline: none;
}
#new-workspace-form input:focus { border-color: var(--accent); }
.form-row { display: flex; gap: 6px; margin-top: 6px; }
.btn-sm { padding: 5px 10px; font-size: 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.btn-sm:hover:not(:disabled) { background: var(--bg3); }
.btn-sm:disabled { opacity: 0.45; cursor: not-allowed; }
.form-error { color: var(--err); font-size: 12px; min-height: 1em; margin-top: 4px; }

#active-workspace-label {
  font-size: 12px;
  font-family: ui-monospace, monospace;
  padding: 2px 8px;
  background: var(--bg3);
  border-radius: 4px;
}
#active-workspace-label:empty { display: none; }

section { display: flex; flex-direction: column; overflow: hidden; min-width: 280px; }

/* ----- chat ----- */
#chat-pane { background: var(--bg); position: relative; }
#messages {
  flex: 1; overflow-y: auto;
  padding: 20px 0;
  display: flex; flex-direction: column;
  scroll-behavior: smooth;
}

/* "Jump to latest" pill — floats just above the composer when new messages
   arrive while the reader is scrolled up. */
.jump-latest {
  position: absolute;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  z-index: 5;
  display: flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  background: var(--accent); color: #fff;
  border: none; border-radius: 999px;
  font-size: 12px; font-weight: 500;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  cursor: pointer;
  transition: background .12s, opacity .12s, transform .12s;
}
.jump-latest:hover { background: var(--accent2); }
.jump-latest .icon-sm { transform: rotate(90deg); }  /* chevron points down */
.jump-latest.hidden { display: none; }
#messages::-webkit-scrollbar { width: 10px; }
#messages::-webkit-scrollbar-thumb { background: var(--bg3); border-radius: 5px; }
#messages::-webkit-scrollbar-thumb:hover { background: var(--bg4); }

.msg-row {
  display: flex; gap: 12px; padding: 8px 20px;
  max-width: 100%; align-items: flex-start;
}
.msg-row .avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg3); display: grid; place-items: center;
  flex-shrink: 0; margin-top: 2px;
  color: var(--fg2);
}
.msg-row.user .avatar { background: var(--accent); color: #fff; }
.msg-row.assistant .avatar { background: linear-gradient(135deg, #d97c3c 0%, #ce6c33 100%); color: #fff; }

.msg-row .body { min-width: 0; flex: 1; }
.msg-row .role {
  font-size: 12px; font-weight: 600; color: var(--fg2);
  margin-bottom: 2px;
}
.msg-row.user .role { color: var(--accent); }
.msg-row.assistant .role { color: #e89968; }

.msg-row .content {
  color: var(--fg);
  word-wrap: break-word;
}
.msg-row .content > *:first-child { margin-top: 0; }
.msg-row .content > *:last-child { margin-bottom: 0; }
.msg-row .content p { margin: 0.4em 0; }
.msg-row .content h1, .msg-row .content h2, .msg-row .content h3 { margin: 0.8em 0 0.3em; }
.msg-row .content h1 { font-size: 1.3em; }
.msg-row .content h2 { font-size: 1.15em; }
.msg-row .content h3 { font-size: 1.05em; }
.msg-row .content ul, .msg-row .content ol { padding-left: 1.5em; margin: 0.4em 0; }
.msg-row .content li { margin: 0.15em 0; }
.msg-row .content a { color: var(--accent); text-decoration: none; }
.msg-row .content a:hover { text-decoration: underline; }
.msg-row .content code {
  background: var(--bg3); padding: 1px 5px; border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88em;
}
.msg-row .content pre {
  background: var(--bg3); border: 1px solid var(--border);
  padding: 10px 12px; margin: 0.6em 0;
  border-radius: var(--radius-sm); overflow-x: auto;
}
.msg-row .content pre code {
  background: transparent; padding: 0; font-size: 0.85em; line-height: 1.5;
}
.msg-row .content blockquote {
  border-left: 3px solid var(--border2);
  margin: 0.6em 0; padding: 0 0 0 14px; color: var(--fg2);
}
.msg-row .content table {
  border-collapse: collapse; margin: 0.5em 0;
}
.msg-row .content th, .msg-row .content td {
  border: 1px solid var(--border); padding: 4px 8px;
}

/* user messages: rounded bubble, right-leaning */
.msg-row.user { justify-content: flex-end; }
.msg-row.user .body { max-width: 80%; flex: 0 1 auto; }
.msg-row.user .role { display: none; }
.msg-row.user .content {
  background: var(--user-bubble); padding: 10px 14px;
  border-radius: 14px 14px 4px 14px; white-space: pre-wrap;
}

/* tool calls — consecutive calls collapse into one compact action strip */
.tool-group-row .body { display: flex; flex-direction: column; }
.tool-group { display: flex; flex-direction: column; gap: 6px; }
.tool-chip-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 4px 0;
}
/* one small rounded-square icon button per tool call */
.tool-mini {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 8px; color: var(--fg3);
  cursor: pointer; padding: 0;
  transition: background .1s, color .1s, border-color .1s;
}
.tool-mini:hover { background: var(--bg3); color: var(--fg); }
.tool-mini.active { border-color: var(--tool); color: var(--tool); background: var(--bg3); }
.tool-mini.done { color: var(--tool); }
.tool-mini.error { color: var(--err); border-color: rgba(255,112,128,0.5); }
.tool-mini .icon-sm { width: 15px; height: 15px; }
.tool-group-count {
  color: var(--fg3); font-size: 12px; margin-left: 4px;
  white-space: nowrap;
}
.tool-group-details { display: flex; flex-direction: column; }

.tool-detail {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px;
  font-family: ui-monospace, monospace; font-size: 12px;
  margin: 0 0 6px;
  white-space: pre-wrap;
  max-height: 320px; overflow: auto;
  color: var(--fg2);
}
.tool-detail .label { color: var(--fg3); font-weight: 600; margin-bottom: 2px; }
.tool-detail-head { margin-bottom: 8px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.tool-detail-head .tool-name { color: var(--tool); font-weight: 600; }
.tool-detail-head .tool-detail-summary { color: var(--fg); opacity: 0.85; word-break: break-all; }

/* checkpoints / rollback list */
.ckpt-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 8px;
}
.ckpt-row.current { border-color: var(--accent); background: var(--bg3); }
.ckpt-info { flex: 1; min-width: 0; }
.ckpt-label {
  font-size: 13px; color: var(--fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ckpt-meta { font-size: 11px; color: var(--fg3); margin-top: 2px; }
.ckpt-meta code { font-family: ui-monospace, monospace; }
.ckpt-current-tag {
  color: var(--accent); font-weight: 600; text-transform: uppercase;
  font-size: 10px; letter-spacing: 0.4px;
}

/* Inline "Restore to here" marker under a user message. Subtle until hovered. */
.restore-marker {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 6px; padding: 3px 9px;
  background: transparent; border: 1px solid var(--border); border-radius: 999px;
  color: var(--fg3); font-size: 11px; cursor: pointer;
  opacity: 0.55; transition: opacity .12s, color .12s, border-color .12s, background .12s;
}
.msg-row.user .body { position: relative; }
.msg-row.user .restore-marker { float: right; clear: both; }
.restore-marker:hover { opacity: 1; color: var(--accent); border-color: var(--accent); background: var(--bg3); }
.restore-marker .icon-sm { width: 13px; height: 13px; }

/* Security findings row (per-turn scan) */
.msg-row.security-findings .avatar { background: linear-gradient(135deg, #cfa64a 0%, #b48929 100%); color: #1a1208; }
.security-findings .sec-head {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 12px;
  font-size: 13px; color: var(--fg); cursor: pointer;
  transition: background .1s;
}
.security-findings .sec-head:hover { background: var(--bg3); }
.security-findings .sec-head .chevron { transition: transform .15s; color: var(--fg3); }
.security-findings .sec-head.open .chevron { transform: rotate(90deg); }
.sec-sev {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
  padding: 2px 7px; border-radius: 999px;
}
.sec-sev.sev-high   { background: rgba(255,112,128,0.18); color: var(--err); }
.sec-sev.sev-medium { background: rgba(217,166,74,0.18); color: #d9a64a; }
.sec-sev.sev-low    { background: rgba(124,156,255,0.18); color: var(--accent); }
.sec-details {
  margin-top: 8px; display: flex; flex-direction: column; gap: 4px;
}
.sec-finding {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 10px; background: var(--bg2); border: 1px solid var(--border); border-radius: 6px;
  font-size: 12px;
}
.sec-finding.sev-high   { border-color: rgba(255,112,128,0.5); }
.sec-finding.sev-medium { border-color: rgba(217,166,74,0.5); }
.sec-finding .sec-file  { font-family: ui-monospace, monospace; color: var(--fg2); }
.sec-finding .sec-msg   { color: var(--fg); flex: 1; }
.sec-finding .sec-match { font-family: ui-monospace, monospace; color: var(--fg3); background: var(--bg); padding: 1px 5px; border-radius: 3px; }

/* ask_user form */
.msg-row.ask .avatar { background: linear-gradient(135deg, #d97c3c 0%, #ce6c33 100%); color: #fff; }
.ask-question { margin: 0 0 14px; padding: 10px 12px; background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; }
.ask-question:last-child { margin-bottom: 8px; }
.ask-question .ask-header {
  display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px;
  padding: 2px 6px; background: var(--bg4); color: var(--fg2); border-radius: 3px;
  margin-bottom: 6px;
}
.ask-question .ask-q-text { font-weight: 500; margin-bottom: 8px; }
.ask-options { display: flex; flex-direction: column; gap: 4px; }
.ask-option {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 6px 10px; border-radius: 6px; cursor: pointer;
  border: 1px solid transparent;
}
.ask-option:hover { background: var(--bg3); }
.ask-option input { margin-top: 3px; flex-shrink: 0; accent-color: var(--accent); }
.ask-option .ask-label { font-weight: 500; }
.ask-option .ask-desc { font-size: 12px; color: var(--fg2); margin-top: 2px; }
.ask-option.checked { background: rgba(124,156,255,0.10); border-color: rgba(124,156,255,0.5); }
.ask-submit-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.ask-submit-row .btn-primary { padding: 6px 14px; font-size: 13px; }
.ask-submit-row .ask-note { font-size: 12px; color: var(--fg3); }
.msg-row.ask.submitted .ask-option { cursor: default; }
.msg-row.ask.submitted .ask-option:not(.checked) { opacity: 0.45; }
.msg-row.ask.submitted .ask-option.checked { background: rgba(95,212,121,0.12); border-color: rgba(95,212,121,0.5); }
.msg-row.ask.submitted .ask-option input { pointer-events: none; }
.msg-row.ask.submitted .ask-submit-row { display: none; }

/* result & system */
.msg-row.system .content { color: var(--fg3); font-size: 12px; font-style: italic; padding: 0; }
.msg-row.system .avatar { display: none; }
.msg-row.system .role { display: none; }
.msg-row.error .content { color: var(--err); }

.result-line {
  text-align: center; color: var(--fg3); font-size: 11px;
  padding: 8px 20px 4px; border-top: 1px solid var(--border);
  margin: 12px 20px 0;
}

/* streaming pulse */
.streaming::after {
  content: '▍'; color: var(--accent); animation: blink 1s infinite;
  margin-left: 1px;
}
@keyframes blink { 50% { opacity: 0; } }

/* ----- composer ----- */
#chat-form {
  padding: 12px 20px 16px;
  background: var(--bg);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.composer {
  display: flex; align-items: flex-end; gap: 8px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 14px;
  padding: 8px 8px 8px 14px;
  transition: border-color .15s;
}
.composer:focus-within { border-color: var(--accent); }
.composer.drag-over { border-color: var(--accent); background: rgba(124,156,255,0.06); }
#attachment-strip {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 6px 8px 0;
}

/* Type-ahead queue: messages sent while the agent is busy, drained on 'done'. */
#queue-strip { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px 0; }
#queue-strip .queue-head { display: flex; align-items: center; gap: 8px; }
#queue-strip .queue-head .muted { font-size: 11px; }
.queue-chip {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg3); border: 1px solid var(--border); border-radius: 6px;
  padding: 3px 4px 3px 8px; font-size: 12px;
}
.queue-chip .q-num { color: var(--fg3); font-size: 11px; flex: 0 0 auto; }
.queue-chip .q-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg2); }
.queue-chip .q-att { color: var(--fg3); font-size: 11px; flex: 0 0 auto; }
.queue-chip .icon-btn { padding: 2px; color: var(--fg3); flex: 0 0 auto; }
.queue-chip .icon-btn:hover { color: var(--err); }
.attach-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 8px; padding: 4px 6px 4px 10px;
  font-size: 12px;
}
.attach-chip .thumb {
  width: 28px; height: 28px; border-radius: 4px;
  background: var(--bg2); display: grid; place-items: center;
  color: var(--fg2); flex-shrink: 0; overflow: hidden;
}
.attach-chip .thumb img { width: 100%; height: 100%; object-fit: cover; }
.attach-chip .thumb.zoomable { cursor: zoom-in; }
.msg-row.user .content img { cursor: zoom-in; transition: filter .1s; }
.msg-row.user .content img:hover { filter: brightness(1.05); }

/* lightbox */
#image-lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.88);
  display: grid; place-items: center;
  cursor: zoom-out; padding: 24px;
}
#image-lightbox.hidden { display: none; }
#lightbox-img {
  max-width: 96vw; max-height: 92vh; object-fit: contain;
  border-radius: 6px; box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
#lightbox-close {
  position: absolute; top: 16px; right: 18px;
  background: rgba(255,255,255,0.08); color: #fff;
  border: 1px solid rgba(255,255,255,0.18); border-radius: 50%;
  width: 36px; height: 36px; display: grid; place-items: center; cursor: pointer;
}
#lightbox-close:hover { background: rgba(255,255,255,0.18); }
.attach-chip .name { color: var(--fg); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-chip .size { color: var(--fg3); }
.attach-chip .icon-btn { padding: 2px; color: var(--fg3); }
.attach-chip .icon-btn:hover { color: var(--err); }
#prompt-input {
  flex: 1; background: transparent; color: var(--fg); border: none;
  resize: none; font: inherit; line-height: 1.5;
  padding: 6px 0; min-height: 22px; max-height: 240px;
  outline: none;
}
#prompt-input::placeholder { color: var(--fg3); }
.composer-meta {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 4px 0; font-size: 11px; min-height: 16px;
}
#model-select, #backend-select {
  background: var(--bg2); color: var(--fg2); border: 1px solid var(--border);
  border-radius: 4px; padding: 2px 6px; font: inherit; font-size: 11px;
  cursor: pointer; min-width: 0;
}
#model-select:hover, #backend-select:hover { color: var(--fg); border-color: var(--border2); }
.composer-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--bg2); color: var(--fg2); border: 1px solid var(--border);
  border-radius: 4px; padding: 3px 9px; font: inherit; font-size: 11px;
  cursor: pointer;
  line-height: 1.2;
}
.composer-toggle .icon-sm { width: 12px; height: 12px; }
.composer-toggle:hover { color: var(--fg); border-color: var(--fg3); }
.composer-toggle.active {
  background: rgba(216,165,92,0.18);
  color: var(--tool);
  border-color: rgba(216,165,92,0.6);
}
body.plan-mode .composer { border-color: var(--tool); }
#status::before {
  content: ''; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--fg3); margin-right: 6px;
  vertical-align: middle;
}
#status.ready::before { background: var(--ok); }
#status.running::before { background: var(--accent); animation: pulse 1.2s infinite; }
#status.error::before { background: var(--err); }
@keyframes pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }

/* ----- preview ----- */
#preview-pane { background: var(--bg2); position: relative; }

/* ---------- run bar ---------- */
#run-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; background: var(--bg2); border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
#run-bar .run-bar-spacer { flex: 1; }
#run-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px; background: var(--ok); color: #0a1a0d;
  border: none; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 13px;
}
#run-btn:hover { filter: brightness(1.05); }
#run-btn:disabled { opacity: 0.5; cursor: not-allowed; }
#run-btn.is-running { background: var(--err); color: #fff; }
#run-btn.is-running #run-btn-icon { transform: scale(0.85); }
#restart-btn, #console-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; background: var(--bg3); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font-size: 13px;
}
#restart-btn:hover, #console-toggle:hover { background: var(--bg4); }
#console-toggle.active { background: var(--accent); color: #fff; border-color: var(--accent); }
#run-status { font-size: 12px; display: inline-flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; }
#run-status .dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--fg3); flex-shrink: 0;
}
#run-status.running .dot { background: var(--ok); box-shadow: 0 0 6px rgba(95,212,121,.6); }
#run-status.stopped .dot { background: var(--err); }
#run-status.none .dot { background: var(--fg3); }
#run-status.static .dot { background: var(--accent); box-shadow: 0 0 6px rgba(124,156,255,.5); }
#run-status .name { font-weight: 500; color: var(--fg); }
#run-status .port { font-family: ui-monospace, monospace; color: var(--accent); }
#run-status .cmd { color: var(--fg3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* (#run-open / #run-reload styling now handled by .url-tool — they live on the address line.) */

/* ---------- run config form ---------- */
#run-config-form {
  padding: 18px 20px; background: var(--bg2); border-bottom: 1px solid var(--border);
}
#run-config-form h3 { margin: 0 0 12px; font-size: 14px; }
#run-config-form label { display: block; font-size: 12px; color: var(--fg2); margin: 10px 0 4px; }
#run-config-form input {
  width: 100%; padding: 8px 10px; background: var(--bg3); color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit;
  font-family: ui-monospace, monospace; font-size: 13px;
}
#run-config-form input:focus { outline: none; border-color: var(--accent); }
#run-config-form code {
  background: var(--bg3); padding: 1px 4px; border-radius: 3px;
  font-size: 11px; font-family: ui-monospace, monospace;
}

/* ---------- console pane ---------- */
#console-pane {
  position: absolute; inset: 0; top: auto; bottom: 0; right: 0; left: 0;
  background: #050608;
  display: flex; flex-direction: column;
}
/* Make it fill the preview area */
#preview-pane #console-pane {
  position: static; flex: 1; min-height: 0;
}
#console-content {
  flex: 1; margin: 0; padding: 12px 14px;
  background: #050608; color: #d6dce3;
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap; word-break: break-all;
  overflow: auto;
}

/* ---------- services panel ---------- */
#services-panel {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 8px;
  background: var(--bg2); border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.svc-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 8px 4px 10px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px; color: var(--fg);
}
.svc-chip.kind-process { border-color: #4a3a4a; }
.svc-chip.kind-static { opacity: 0.85; }
.svc-chip .kind-tag {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 1px 6px; border-radius: 3px;
  background: var(--bg4); color: var(--fg2);
}
.svc-chip.kind-service .kind-tag { background: rgba(124,156,255,0.18); color: var(--accent); }
.svc-chip.kind-process .kind-tag { background: rgba(216,165,92,0.18); color: var(--tool); }
.svc-chip.kind-static .kind-tag { background: rgba(95,212,121,0.18); color: var(--ok); }
.svc-chip .svc-port {
  font-family: ui-monospace, monospace; font-size: 11px; color: var(--fg2);
}
.svc-chip .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--bg4); flex-shrink: 0;
}
.svc-chip.alive .dot { background: var(--ok); box-shadow: 0 0 4px rgba(95, 212, 121, 0.6); }
.svc-chip.dead .dot { background: var(--err); }
.svc-chip .svc-name { font-weight: 600; }
.svc-chip .svc-cmd {
  font-family: ui-monospace, monospace; color: var(--fg2);
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.svc-chip .icon-btn { padding: 2px; color: var(--fg2); }
.svc-chip .icon-btn:hover { color: var(--fg); background: var(--bg4); }

/* logs modal */
.modal {
  position: absolute; inset: 0; z-index: 50;
  background: rgba(0,0,0,0.55);
  display: grid; place-items: center;
  padding: 24px;
}
.modal-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 100%; height: 100%;
  display: flex; flex-direction: column; overflow: hidden;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 13px; font-weight: 600;
}
.modal-header > div { display: flex; gap: 4px; }
#logs-content {
  flex: 1; overflow: auto; margin: 0; padding: 12px 14px;
  background: var(--bg); color: var(--fg);
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap; word-break: break-all;
}

/* login terminal modal sits above the account modal that launched it */
#login-terminal-modal { z-index: 90; }
.lt-link {
  background: color-mix(in srgb, var(--accent, #6366f1) 12%, var(--bg2));
  border: 1px solid var(--accent, #6366f1);
  border-radius: 8px; padding: 12px; margin-bottom: 14px;
}
.lt-link-label { font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.lt-link-row { display: flex; gap: 8px; align-items: center; }
.lt-link-url {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 12px ui-monospace, monospace; color: var(--accent, #818cf8);
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  padding: 7px 9px; text-decoration: none;
}
.lt-link-url:hover { text-decoration: underline; }

/* docs modal */
#memory-modal { position: fixed; inset: 0; z-index: 80; }
.docs-modal { width: 1100px; max-width: 95vw; height: 80vh; max-height: 80vh; }
.docs-body {
  flex: 1; display: grid; grid-template-columns: 260px 1fr; overflow: hidden;
}
.docs-files {
  background: var(--bg2); border-right: 1px solid var(--border);
  padding: 10px 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px;
}
.docs-files .btn-sm { margin-bottom: 4px; }
#docs-file-list { display: flex; flex-direction: column; gap: 1px; }
.docs-file {
  padding: 7px 10px; cursor: pointer; border-radius: 4px;
  font-size: 13px; color: var(--fg); display: flex; flex-direction: column; gap: 2px;
}
.docs-file:hover { background: var(--bg3); }
.docs-file.active { background: var(--accent); color: #fff; }
.docs-file.active .meta { color: rgba(255,255,255,0.75); }
.docs-file .name { font-family: ui-monospace, monospace; font-size: 12.5px; }
.docs-file .meta { font-size: 10px; color: var(--fg3); }
.docs-pane { position: relative; background: var(--bg); overflow: hidden; }
.docs-pane #memory-content,
.docs-pane #memory-rendered {
  position: absolute; inset: 0;
  margin: 0; padding: 18px 22px;
  background: var(--bg); color: var(--fg);
  overflow: auto;
}
#memory-content {
  font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  border: none; outline: none; resize: none;
}
.md-rendered {
  font: 14px/1.65 -apple-system, system-ui, "Segoe UI", Roboto, Inter, sans-serif;
}
.md-rendered > *:first-child { margin-top: 0; }
.md-rendered > *:last-child { margin-bottom: 0; }
.md-rendered h1 { font-size: 1.7em; margin: 0.6em 0 0.4em; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.md-rendered h2 { font-size: 1.35em; margin: 1.1em 0 0.4em; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.md-rendered h3 { font-size: 1.15em; margin: 1em 0 0.3em; }
.md-rendered h4 { font-size: 1.0em; margin: 0.9em 0 0.3em; }
.md-rendered p { margin: 0.5em 0; }
.md-rendered ul, .md-rendered ol { margin: 0.4em 0; padding-left: 1.6em; }
.md-rendered li { margin: 0.2em 0; }
.md-rendered a { color: var(--accent); text-decoration: none; }
.md-rendered a:hover { text-decoration: underline; }
.md-rendered code {
  background: var(--bg3); padding: 1px 5px; border-radius: 3px;
  font: 0.88em ui-monospace, monospace;
}
.md-rendered pre {
  background: var(--bg3); border: 1px solid var(--border);
  padding: 12px 14px; margin: 0.7em 0;
  border-radius: var(--radius-sm); overflow-x: auto;
}
.md-rendered pre code { background: transparent; padding: 0; font-size: 0.86em; line-height: 1.55; }
.md-rendered blockquote {
  border-left: 3px solid var(--border2);
  margin: 0.7em 0; padding: 0 0 0 14px; color: var(--fg2);
}
.md-rendered hr { border: none; border-top: 1px solid var(--border); margin: 1.2em 0; }
.md-rendered table {
  border-collapse: collapse; margin: 0.7em 0;
}
.md-rendered th, .md-rendered td {
  border: 1px solid var(--border); padding: 6px 10px;
}
.md-rendered th { background: var(--bg2); }
.md-rendered img { max-width: 100%; }
.md-rendered.empty::before {
  content: 'Empty doc. Click Edit to add content.';
  color: var(--fg3); font-style: italic;
}
/* Port chips now live inline in the run bar (only shown with 2+ ports). */
#preview-tabs {
  display: flex; align-items: center; gap: 4px;
  overflow-x: auto; min-width: 0;
}
#preview-tabs.hidden { display: none; }
#url-bar {
  display: flex; align-items: stretch; gap: 0;
  padding: 6px 8px; background: var(--bg2); border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
/* Preview tools relocated to the right of the address line. Made deliberately
   button-like (bordered, filled, brighter icons) so they don't get overlooked. */
#url-bar .url-tools-sep {
  width: 1px; align-self: stretch; margin: 2px 8px 2px 10px;
  background: var(--border); flex-shrink: 0;
}
#url-bar .url-tool {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 30px; padding: 0 9px; margin-left: 6px;
  border-radius: 7px; color: var(--fg);
  background: var(--bg3); border: 1px solid var(--border);
  font-size: 12px; font-weight: 500; line-height: 1;
  text-decoration: none; cursor: pointer; flex-shrink: 0;
  transition: background .12s, border-color .12s, color .12s;
}
#url-bar .url-tool .icon-sm { width: 16px; height: 16px; }
#url-bar .url-tool:hover { color: var(--fg); background: var(--bg4); border-color: var(--fg3); }
#url-bar .url-tool.url-tool-labeled { padding: 0 12px; }
/* Select (element picker) — the primary, most-overlooked action: accent it. */
#url-bar .url-tool.url-tool-primary {
  color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, var(--bg3));
}
#url-bar .url-tool.url-tool-primary:hover {
  background: color-mix(in srgb, var(--accent) 22%, var(--bg3)); border-color: var(--accent);
}
/* Active pick mode — unmistakable filled accent so the user sees they're picking. */
#url-bar .url-tool.active {
  color: #fff; background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}
#url-bar .url-prefix {
  padding: 5px 10px; background: var(--bg3); border: 1px solid var(--border);
  border-right: none; border-top-left-radius: 6px; border-bottom-left-radius: 6px;
  color: var(--fg2); font-family: ui-monospace, monospace; font-size: 12px;
  white-space: nowrap; display: flex; align-items: center;
}
#url-bar #url-path {
  flex: 1; min-width: 0;
  padding: 5px 10px; background: var(--bg); color: var(--fg);
  border: 1px solid var(--border); border-radius: 0;
  font-family: ui-monospace, monospace; font-size: 12px; outline: none;
}
#url-bar #url-path:focus { border-color: var(--accent); }
#url-bar #url-go {
  padding: 5px 12px; background: var(--bg3); color: var(--fg);
  border: 1px solid var(--border); border-left: none;
  border-top-right-radius: 6px; border-bottom-right-radius: 6px;
  cursor: pointer;
}
#url-bar #url-go:hover { background: var(--bg4); }
.port-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 10px; background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap;
  font-size: 12px; color: var(--fg2);
  transition: background .1s;
}
.port-tab.kind-static { opacity: 0.75; font-style: italic; }
.port-tab.kind-service { font-weight: 500; }
.port-tab .tab-label { font-family: inherit; }
.port-tab:hover { background: var(--bg4); color: var(--fg); }
.port-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.port-tab.active .ext { color: rgba(255,255,255,0.85); }
.port-tab .ext {
  display: inline-flex; padding: 2px; border-radius: 3px;
  color: var(--fg3);
}
.port-tab .ext:hover { background: rgba(255,255,255,0.15); color: var(--fg); }
.tab-spacer { flex: 1; }
.tab-action { background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 8px; color: var(--fg2); cursor: pointer; }
.tab-action:hover { color: var(--fg); }

#preview-frame-wrap { flex: 1; position: relative; }
#preview-frame { width: 100%; height: 100%; border: none; background: #fff; }
#preview-empty {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 24px; text-align: center; line-height: 1.7; font-size: 13px;
}
.btn-primary {
  background: var(--accent); color: #fff; border: none;
  border-radius: var(--radius-sm); padding: 8px 14px; cursor: pointer;
  font: inherit; font-weight: 500;
}
.btn-primary:hover { background: var(--accent2); }

/* idle-state landing card (when there's a run config but project isn't running) */
.empty-card {
  max-width: 460px; width: 90%;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 12px;
  padding: 28px 28px 24px; text-align: center;
  box-shadow: 0 14px 40px rgba(0,0,0,0.35);
}
.empty-card .icon-wrap {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(95,212,121,0.15); color: var(--ok);
  margin-bottom: 14px;
}
.empty-card .icon-wrap svg { width: 28px; height: 28px; }
.empty-card h2 { margin: 0 0 6px; font-size: 18px; color: var(--fg); }
.empty-card .ws-name { color: var(--accent); }
.empty-card .cmd {
  display: inline-block; margin: 10px 0 18px; padding: 5px 10px;
  font-family: ui-monospace, monospace; font-size: 12px; color: var(--fg2);
  background: var(--bg); border: 1px solid var(--border); border-radius: 4px;
}
.empty-card .big-run {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px; font-size: 14px; font-weight: 600;
  background: var(--ok); color: #0a1a0d; border: none; border-radius: 8px;
  cursor: pointer;
}
.empty-card .big-run:hover { filter: brightness(1.05); }
.empty-card .alt {
  margin-top: 18px; font-size: 12px; color: var(--fg3);
}
.empty-card .alt a, .empty-card .alt button {
  background: none; border: none; color: var(--fg2);
  text-decoration: underline; cursor: pointer; padding: 0; font: inherit;
}
.empty-card .alt a:hover, .empty-card .alt button:hover { color: var(--fg); }

/* ---------- Workspace switcher (top bar dropdown) ---------- */
.ws-switcher { position: relative; }
.ws-switcher-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: transparent; color: var(--fg); cursor: pointer;
  font: 13px ui-sans-serif, system-ui, sans-serif; max-width: 240px;
}
.ws-switcher-btn:hover { background: var(--bg3); border-color: var(--fg3); }
.ws-switcher-btn #active-workspace-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px;
}
.ws-chevron { opacity: 0.6; transition: transform .15s; }
.ws-switcher.open .ws-chevron { transform: rotate(180deg); }
.ws-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 50;
  width: 320px; max-height: 480px;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.45);
  display: flex; flex-direction: column; overflow: hidden;
}
.ws-dropdown-search { padding: 8px; border-bottom: 1px solid var(--border); }
.ws-dropdown-search input {
  width: 100%; padding: 6px 8px; background: var(--bg3);
  border: 1px solid var(--border); border-radius: 5px;
  color: var(--fg); font: 13px ui-sans-serif, system-ui, sans-serif;
}
.ws-dropdown-search input:focus { outline: none; border-color: var(--accent); }
.ws-dropdown-list { flex: 1; overflow-y: auto; padding: 4px; }
.ws-dropdown-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 5px; cursor: pointer;
  font: 13px ui-sans-serif, system-ui, sans-serif; color: var(--fg);
}
.ws-dropdown-item:hover { background: var(--bg3); }
.ws-dropdown-item.active { background: var(--accent); color: #fff; }
.ws-dropdown-item .ws-d-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-dropdown-item .ws-d-meta { font-size: 11px; opacity: 0.6; }
.ws-dropdown-item .shared-tag { font-size: 10px; padding: 0 4px; opacity: 0.7; }
.ws-dropdown-item .ws-d-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--fg3); flex-shrink: 0;
}
.ws-dropdown-item.has-preview .ws-d-dot { background: var(--ok); }
.ws-dropdown-footer {
  display: flex; gap: 6px; padding: 6px; border-top: 1px solid var(--border);
}
.ws-dropdown-footer button {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 6px 8px; border: 1px solid var(--border); border-radius: 5px;
  background: transparent; color: var(--fg); cursor: pointer;
  font: 12px ui-sans-serif, system-ui, sans-serif;
}
.ws-dropdown-footer button:hover { background: var(--bg3); border-color: var(--fg3); }

/* ---------- Top-bar design indicator (active style) ---------- */
#design-toggle.active {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}
#design-toggle:not(.active) { opacity: 0.55; }
#design-toggle:not(.active):hover { opacity: 1; }

/* ---------- Workspace settings modal ---------- */
.ws-settings-section { margin-bottom: 4px; }
.ws-settings-label {
  font: 600 13px ui-sans-serif, system-ui, sans-serif; color: var(--fg);
  display: block; margin-bottom: 4px;
}

/* ---------- Toggle switch (used in workspace settings) ---------- */
.switch {
  position: relative; display: inline-block;
  width: 42px; height: 22px; flex-shrink: 0;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider {
  position: absolute; cursor: pointer;
  inset: 0; background: var(--bg3); border: 1px solid var(--border);
  border-radius: 22px; transition: background .15s;
}
.switch-slider::before {
  content: ''; position: absolute;
  height: 16px; width: 16px; left: 2px; top: 2px;
  background: var(--fg2); border-radius: 50%;
  transition: transform .15s, background .15s;
}
.switch input:checked + .switch-slider { background: var(--accent); border-color: var(--accent); }
.switch input:checked + .switch-slider::before { transform: translateX(20px); background: #fff; }

/* ---------- Inline new-workspace form (floats near the top-bar dropdown) ---------- */
.ws-new-form {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  z-index: 60;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px; min-width: 320px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
}
.ws-new-form input {
  width: 100%; padding: 8px 10px;
  background: var(--bg3); color: var(--fg);
  border: 1px solid var(--border); border-radius: 5px;
  font: 13px ui-sans-serif, system-ui, sans-serif;
  margin-bottom: 8px;
}
.ws-new-form input:focus { outline: none; border-color: var(--accent); }
.ws-new-form .form-row { display: flex; gap: 6px; }

/* ---------- Settings modal share rows ---------- */
#ws-settings-shared-list .share-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 8px; border-radius: 5px;
}
#ws-settings-shared-list .share-row:hover { background: var(--bg3); }
#ws-settings-shared-list .share-row .name { font-size: 13px; }
#ws-settings-shared-list .share-row .icon-btn { padding: 4px; }

/* ---------- Inputs inside modals (default styling for any non-classed text/password inputs) ---------- */
.modal-card input[type="text"]:not([class]),
.modal-card input[type="password"]:not([class]),
.modal-card input[type="email"]:not([class]),
.modal-card input[type="number"]:not([class]) {
  background: var(--bg3);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font: 13px ui-sans-serif, system-ui, sans-serif;
  outline: none;
}
.modal-card input[type="text"]:not([class]):focus,
.modal-card input[type="password"]:not([class]):focus,
.modal-card input[type="email"]:not([class]):focus,
.modal-card input[type="number"]:not([class]):focus {
  border-color: var(--accent);
}

/* ---------- Users modal — new-user create form layout ---------- */
#user-create-form {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
#user-create-form label {
  color: var(--fg2);
  user-select: none;
  cursor: pointer;
}
#user-create-form input[type="checkbox"] {
  accent-color: var(--accent);
  width: 14px; height: 14px;
  cursor: pointer;
}
#user-create-form .btn-primary { padding: 8px 14px; }

/* ---------- Workspace settings — tabbed layout ---------- */
.ws-settings-card {
  width: 90vw;
  max-width: 880px;
  height: min(82vh, 720px);
  margin: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ws-settings-header {
  position: sticky; top: 0;
  background: var(--bg2);
  z-index: 5;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ws-settings-body {
  display: grid;
  grid-template-columns: 200px 1fr;
  flex: 1;
  min-height: 0;        /* allow children to scroll instead of stretching the modal */
}
@media (max-width: 640px) {
  .ws-settings-body { grid-template-columns: 1fr; }
  .ws-settings-tabs { flex-direction: row; overflow-x: auto; }
}
.ws-settings-tabs {
  background: var(--bg);
  border-right: 1px solid var(--border);
  padding: 14px 10px;
  display: flex; flex-direction: column; gap: 2px;
  overflow-y: auto;
}
.ws-tab {
  text-align: left;
  padding: 8px 12px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--fg2);
  font: 13px/1.2 -apple-system, system-ui, sans-serif;
  cursor: pointer;
  width: 100%;
  white-space: nowrap;
  transition: background .1s, color .1s;
}
.ws-tab:hover { background: var(--bg3); color: var(--fg); }
.ws-tab.active {
  background: var(--accent);
  color: #fff;
  font-weight: 500;
}
.ws-tab.hidden { display: none; }
.ws-tab-danger { color: var(--err); margin-top: auto; }
.ws-tab-danger:hover { background: rgba(255,112,128,0.12); color: var(--err); }
.ws-tab-danger.active { background: var(--err); color: #fff; }
.ws-tab-spacer { flex: 1; }
.ws-settings-content {
  padding: 22px 28px 28px;
  overflow-y: auto;
  min-height: 0;
}
.ws-tab-content.hidden { display: none; }
.ws-tab-title {
  margin: 0 0 18px;
  font-size: 18px; font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.ws-settings-content .ws-settings-section { margin-bottom: 0; }
.ws-settings-content .ws-settings-section + .ws-settings-section { margin-top: 18px; }

/* ---- Sub-projects: card layout, matching the settings design language ---- */
.sp-row {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 16px; background: var(--bg2);
  display: flex; flex-direction: column; gap: 0;
}
.sp-row + .sp-row { margin-top: 12px; }
.sp-block { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; }
.sp-block + .sp-block { border-top: 1px solid var(--border); }
.sp-block:first-child { padding-top: 0; }
.sp-block:last-child { padding-bottom: 0; }
.sp-block-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--fg3); font-weight: 600;
}
.sp-hint { font-size: 11px; color: var(--fg2); line-height: 1.4; }
.sp-fieldline { display: flex; gap: 8px; align-items: center; }
.sp-field-label { font-size: 12px; color: var(--fg2); flex: 0 0 58px; }
.sp-input {
  flex: 1; padding: 6px 9px; background: var(--bg3); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px;
  font: 12px ui-monospace, monospace;
}
.sp-input::placeholder { color: var(--fg3); }
.sp-row-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sp-link { color: var(--accent); font: 12px ui-monospace, monospace; word-break: break-all; text-decoration: none; }
.sp-link:hover { text-decoration: underline; }
.sp-status-pill { font-size: 11px; display: inline-flex; align-items: center; gap: 4px; }
.sp-status-pill.running { color: #4ade80; }
.sp-status-pill.stopped { color: var(--fg3); }
.sp-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg3); border: 1px solid var(--border); border-radius: 12px;
  padding: 2px 4px 2px 10px; font-size: 12px; font-family: ui-monospace, monospace;
}
.sp-chip .icon-btn { padding: 2px; color: var(--fg3); }
.sp-chip .icon-btn:hover { color: var(--err); background: transparent; }
.sp-msg { font-size: 11px; color: var(--fg2); }

/* ---- Live style editor (element properties panel) ----
   Namespaced .pse-* so it never collides with the subproject panel's .sp-* rules. */
#preview-frame-wrap { position: relative; }
#style-panel {
  position:absolute; top:12px; right:12px; width:286px; max-height:calc(100% - 24px);
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--bg2,#161616); border:1px solid var(--border,#333); border-radius:12px;
  box-shadow:0 16px 48px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.4);
  z-index:60; font-size:12px; color:var(--fg,#e6e6e6);
}
#style-panel.hidden { display:none; }
#style-panel.pse-dragging { box-shadow:0 26px 70px rgba(0,0,0,.72); opacity:.98; }

#style-panel-head {
  display:flex; align-items:center; gap:8px; padding:10px 12px; flex:0 0 auto;
  border-bottom:1px solid var(--border,#333); cursor:grab; user-select:none;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0));
}
#style-panel-head:active { cursor:grabbing; }
#style-panel-head::before { content:"⠿⠿"; font-size:13px; opacity:.35; letter-spacing:-3px; flex:0 0 auto; }
#style-panel-title {
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font:600 12px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
}
#style-panel-close {
  flex:0 0 auto; width:22px; height:22px; display:flex; align-items:center; justify-content:center;
  background:none; border:none; color:var(--fg3,#888); cursor:pointer; border-radius:6px; font-size:15px; line-height:1;
}
#style-panel-close:hover { background:var(--bg3,#242424); color:var(--fg,#e6e6e6); }

#style-panel-body { flex:1 1 auto; overflow-y:auto; padding:2px 12px 6px; }
#style-panel-body::-webkit-scrollbar { width:9px; }
#style-panel-body::-webkit-scrollbar-thumb { background:var(--border,#333); border-radius:5px; border:2px solid var(--bg2,#161616); }

.pse-group { padding:11px 0; }
.pse-group + .pse-group { border-top:1px solid var(--border,#2a2a2a); }
.pse-group-title { font-size:10px; text-transform:uppercase; letter-spacing:.09em; color:var(--fg3,#888); font-weight:700; margin-bottom:9px; }

.pse-row { display:flex; align-items:center; gap:8px; min-height:28px; }
.pse-row + .pse-row { margin-top:7px; }
.pse-row > label { flex:0 0 74px; color:var(--fg2,#aaa); font-size:11px; white-space:nowrap; }

#style-panel input[type=text], #style-panel select {
  flex:1 1 auto; min-width:0; width:100%; box-sizing:border-box; height:27px;
  background:var(--bg,#0e0e0e); border:1px solid var(--border,#333); color:var(--fg,#e6e6e6);
  border-radius:7px; padding:0 8px; font:12px ui-monospace, SFMono-Regular, Menlo, monospace; outline:none;
  transition:border-color .12s, box-shadow .12s;
}
#style-panel input[type=text]:focus, #style-panel select:focus {
  border-color:var(--accent,#3884ff); box-shadow:0 0 0 2px rgba(56,132,255,.22);
}
#style-panel select { cursor:pointer; appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23888' fill='none' stroke-width='1.5'/></svg>");
  background-repeat:no-repeat; background-position:right 8px center; padding-right:24px; }
#style-panel input[type=color] {
  flex:0 0 auto; width:30px; height:27px; padding:2px; border:1px solid var(--border,#333);
  border-radius:7px; background:var(--bg,#0e0e0e); cursor:pointer;
}
#style-panel input[type=range] { flex:1 1 auto; accent-color:var(--accent,#3884ff); cursor:pointer; }

.pse-quad { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; flex:1 1 auto; min-width:0; }
.pse-quad input {
  width:100%; box-sizing:border-box; height:27px; text-align:center;
  background:var(--bg,#0e0e0e); border:1px solid var(--border,#333); color:var(--fg,#e6e6e6);
  border-radius:7px; padding:0 2px; font:11px ui-monospace, monospace; outline:none;
}
.pse-quad input:focus { border-color:var(--accent,#3884ff); box-shadow:0 0 0 2px rgba(56,132,255,.22); }

.pse-edited { border-color:var(--accent,#3884ff) !important; box-shadow:inset 2.5px 0 0 var(--accent,#3884ff) !important; }

#style-panel-foot {
  display:flex; gap:8px; align-items:center; justify-content:flex-end; flex:0 0 auto;
  padding:10px 12px; border-top:1px solid var(--border,#333); background:var(--bg2,#161616);
}
#style-panel-foot .pse-edits-count { margin-right:auto; font-size:11px; color:var(--fg3,#888); }
#style-panel-foot .pse-edits-count b { color:var(--accent,#3884ff); font-weight:700; }

/* ================= Mobile / responsive layer =================
   Additive only: everything below is either a desktop no-op (the two panes are
   hidden until the media query activates) or lives inside the max-width query,
   so the desktop layout is completely untouched. On a phone the app becomes
   three "pages" (Chat / Preview / Menu) chosen by a bottom nav; the active one
   is selected by body[data-mview]. */
#menu-pane { display: none; }       /* desktop: never shown */
#mobile-nav { display: none; }       /* desktop: never shown */
#preview-viewport { display: none; } /* desktop: never shown (no manual resize needed there) */
#tasks-pane { display: none; }       /* desktop: Tasks is a modal, not a pane */
#tasks-view { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } /* fills the modal-card (desktop) or the pane (mobile) */

@media (max-width: 820px) {
  /* Dynamic viewport units so the iOS URL bar doesn't clip the shell. */
  #app { height: 100vh; height: 100dvh; }

  /* Single-column stage; a splitter is meaningless with one column. */
  main { grid-template-columns: 1fr !important; padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; }
  #splitter-l, #splitter-r { display: none !important; }

  /* Exactly one pane visible at a time; all three share the single grid cell. */
  #chat-pane, #preview-pane, #menu-pane { grid-column: 1 !important; grid-row: 1 !important; min-height: 0; }
  main > #chat-pane, main > #preview-pane, main > #menu-pane { display: none; }
  body[data-mview="chat"] #chat-pane,
  body:not([data-mview]) #chat-pane { display: flex; flex-direction: column; }
  body[data-mview="preview"] #preview-pane { display: flex; flex-direction: column; }
  body[data-mview="menu"] #menu-pane { display: block; }
  /* Tasks tab — full-page list (the shared #tasks-view is relocated in here). */
  #tasks-pane { grid-column: 1 !important; grid-row: 1 !important; min-height: 0; }
  main > #tasks-pane { display: none; }
  body[data-mview="tasks"] #tasks-pane { display: flex; flex-direction: column; }
  .tasks-pane-head { flex: 0 0 auto; padding: 13px 16px; font-weight: 600; font-size: 15px; border-bottom: 1px solid var(--border); background: var(--bg2); }
  /* Preview internals fill the page on mobile. */
  #preview-frame-wrap { flex: 1 1 auto; min-height: 0; }
  #preview-frame { width: 100%; height: 100%; }

  /* Slim header: brand mark + workspace switcher + New chat; the dense action
     cluster moves into the Menu tab. */
  header { gap: 8px; padding: 6px 10px; }
  .brand { font-size: 0; }
  .brand svg { width: 22px; height: 22px; }
  #workspace-settings-btn, #design-toggle, #workspace-download-btn, #memory-btn,
  #tasks-btn, #assets-btn, #inbox-btn, #checkpoints-btn, #compact-btn, #users-btn, #me-indicator,
  #logout-btn, #usage-pill, #context-pill, #session-indicator,
  #subproject-switcher, header .spacer { display: none !important; }
  #new-chat-btn { margin-left: auto; }

  /* Bottom navigator (Chat / Preview / Menu). */
  #mobile-nav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--bg2); border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .mnav-btn {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    background: none; border: none; color: var(--fg3); cursor: pointer;
    padding: 8px 0 7px; font: 500 11px/1 inherit;
  }
  .mnav-btn .icon { width: 22px; height: 22px; }
  .mnav-btn.active { color: var(--accent); }

  /* Menu tab. */
  #menu-pane { overflow-y: auto; background: var(--bg); }
  #menu-list { display: flex; flex-direction: column; padding: 6px 0; }
  .menu-item {
    display: flex; align-items: center; gap: 14px; width: 100%;
    padding: 15px 18px; background: none; border: none;
    border-bottom: 1px solid var(--border); color: var(--fg);
    font-size: 15px; text-align: left; cursor: pointer;
  }
  .menu-item .icon { width: 20px; height: 20px; color: var(--fg2); flex: 0 0 auto; }
  .menu-item:active { background: var(--bg3); }

  /* Modals use the whole screen on a phone. */
  .modal { padding: 0 !important; }
  .modal-card { border-radius: 0 !important; border: none !important; }
  #tasks-modal .modal-card, #assets-modal .modal-card { height: 100vh !important; height: 100dvh !important; max-height: none !important; }

  /* 16px inputs so iOS doesn't zoom on focus. */
  #chat-form textarea, #url-bar #url-path { font-size: 16px; }

  /* Preview toolbars fit a phone: truncate the (rarely-used) URL so the action
     buttons keep their room; labeled tools go icon-only; and both bars can scroll
     horizontally as a safety net so a button is never hard-cut. */
  #run-bar, #url-bar { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  #run-bar::-webkit-scrollbar, #url-bar::-webkit-scrollbar { display: none; }
  #url-bar .url-prefix { max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; }
  #url-bar #url-path { flex: 1 1 48px; min-width: 48px; }
  #url-bar .url-tool.url-tool-labeled span { display: none; }        /* icon-only on mobile */
  #url-bar .url-tool.url-tool-labeled { padding: 0 9px; }
  #url-bar .url-tool, #url-bar #url-go { flex: 0 0 auto; }
  #run-status .name, #run-status .cmd, #run-status .port { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Preview viewport control (Fit / Wide-pannable). Floats bottom-right of the
     preview, above the bottom nav. */
  #preview-viewport {
    display: flex; gap: 3px; z-index: 45;
    position: fixed; right: 10px; bottom: calc(58px + env(safe-area-inset-bottom, 0px) + 10px);
    background: color-mix(in srgb, var(--bg2) 86%, transparent);
    border: 1px solid var(--border); border-radius: 10px; padding: 3px;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    box-shadow: 0 4px 14px rgba(0,0,0,.35);
  }
  #preview-viewport button {
    background: none; border: none; color: var(--fg2); font: 600 12px/1 inherit;
    padding: 7px 11px; border-radius: 7px; cursor: pointer; min-width: 34px;
  }
  #preview-viewport button.active { background: var(--accent); color: #fff; }
}

/* ---- Tasks panel (shared TODO checklist of chat prompts) ---- */
#tasks-body { flex: 1; overflow-y: auto; padding: 4px 0; }
.task-item { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-bottom: 1px solid var(--border); }
.task-item.done .task-text { text-decoration: line-through; color: var(--fg3); }
.task-check { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; cursor: pointer; accent-color: var(--accent); }
.task-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.task-text { font-size: 14px; line-height: 1.4; color: var(--fg); white-space: pre-wrap; word-break: break-word; outline: none; border-radius: 4px; padding: 1px 3px; }
.task-text:focus { box-shadow: 0 0 0 2px rgba(56,132,255,.25); background: var(--bg); }
.task-atts { display: flex; flex-wrap: wrap; gap: 6px; }
.task-att { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 2px 7px 2px 3px; border: 1px solid var(--border); border-radius: 999px; color: var(--fg2); background: var(--bg3); max-width: 220px; }
.task-att img { width: 22px; height: 22px; object-fit: cover; border-radius: 4px; flex: 0 0 auto; }
.task-att .att-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-actions { flex: 0 0 auto; display: flex; gap: 2px; }
.task-actions .icon-btn { padding: 5px; }
.task-actions .task-run { color: var(--accent); }
#tasks-add { flex: 0 0 auto; border-top: 1px solid var(--border); padding: 10px 12px; background: var(--bg2); }
#task-input { width: 100%; box-sizing: border-box; resize: none; background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 8px; padding: 9px 10px; font: 14px/1.4 inherit; outline: none; max-height: 160px; }
#task-input:focus { border-color: var(--accent); }
.tasks-add-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }

/* Tasks modal — size to content on desktop (was full-height → giant empty box),
   with a comfortable multi-line compose area. Mobile keeps it full-screen (above). */
#tasks-modal .modal-card { height: auto; max-height: 82vh; }
#tasks-empty { padding: 34px 20px !important; }
#task-input { min-height: 70px; }
#tasks-add { padding: 12px 14px; }
.tasks-add-actions { margin-top: 10px; }

/* Task body preview under the headline (truncated). */
.task-more { font-size: 12px; color: var(--fg3); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Security-findings: hand off to the agent. */
.sec-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
.sec-actions .sec-fix:disabled { opacity: .6; cursor: default; }

/* ---- Assets library ---- */
#assets-modal .modal-card { height: auto; max-height: 85vh; }
#assets-body { flex: 1; overflow-y: auto; padding: 14px; }
#assets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.asset-card { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--bg); display: flex; flex-direction: column; }
.asset-thumb { aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center; background: var(--bg3); overflow: hidden; }
.asset-thumb img { width: 100%; height: 100%; object-fit: cover; }
.asset-thumb .icon { width: 34px; height: 34px; color: var(--fg3); }
.asset-meta { display: flex; flex-direction: column; gap: 1px; padding: 7px 9px 2px; min-width: 0; }
.asset-name { font-size: 12px; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-sub { font-size: 10px; color: var(--fg3); text-transform: capitalize; }
.asset-actions { display: flex; gap: 2px; padding: 2px 6px 6px; }
.asset-actions .icon-btn { padding: 5px; }
.asset-actions .asset-use { color: var(--accent); }
#assets-add { flex: 0 0 auto; border-top: 1px solid var(--border); padding: 12px 14px; background: var(--bg2); }
#assets-gen { display: flex; gap: 8px; margin-bottom: 10px; }
#asset-gen-prompt { flex: 1; box-sizing: border-box; background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; font: 14px inherit; outline: none; }
#asset-gen-prompt:focus { border-color: var(--accent); }
.assets-add-actions { display: flex; align-items: center; gap: 10px; }

/* Composer asset-reference chips (from the Assets panel) */
#composer-assets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.ref-pill { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; padding: 3px 7px 3px 4px; background: var(--bg3); border: 1px solid var(--border); border-radius: 999px; font-size: 12px; color: var(--fg2); }
.ref-pill .ref-thumb { width: 22px; height: 22px; object-fit: cover; border-radius: 4px; flex: 0 0 auto; }
.ref-pill .ref-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ref-pill .ref-x { background: none; border: none; color: var(--fg3); cursor: pointer; padding: 0 2px; font-size: 12px; line-height: 1; }
.ref-pill .ref-x:hover { color: var(--fg); }

/* Slim top-bar meters */
#session-indicator { display: none; }   /* session id removed from the bar */
#usage-pill { cursor: pointer; }