* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
:root {
  --bg: #121214; --bg2: #1c1c1f; --bg3: #26262a;
  --border: #32323a; --text: #ececf0; --muted: #7a7a85;
  --accent: #5b8def; --green: #34d399; --yellow: #fbbf24;
  --red: #ef4444; --radius: 10px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);
  --strip-w: 52px;
  --drawer-w: 560px;
}

html, body { height: 100%; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--bg); color: var(--text);
  height: 100dvh; overflow: hidden;
  display: flex; flex-direction: column;
}

/* ── Lucide icon base ── */
.icon, [data-lucide] { width: 18px; height: 18px; stroke-width: 1.75; vertical-align: middle; flex-shrink: 0; }
.strip-btn .icon { width: 20px; height: 20px; }
.drawer-icon .icon { width: 18px; height: 18px; }
.exp-nav-icon .icon { width: 16px; height: 16px; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ── Status bar (Option B) ── */
#statusBar {
  background: var(--bg2); border-bottom: 1px solid var(--border);
  height: 40px; display: none; align-items: center;
  padding: 0 12px; gap: 16px; flex-shrink: 0; z-index: 10;
  font-size: 12px; color: var(--muted);
}
#statusBar.visible { display: flex; }
.sb-item { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.sb-price { font-weight: 600; color: var(--text); }
.sb-change.up { color: var(--green); }
.sb-change.down { color: var(--red); }
.sb-sep { color: var(--border); }
.sb-time { margin-left: auto; font-weight: 600; color: var(--text); font-size: 13px; }

/* ── Desk layout ── */
.desk {
  flex: 1; display: flex; overflow: hidden; position: relative;
}

/* ── Main workspace ── */
.workspace {
  flex: 1; display: flex; flex-direction: column; overflow: hidden;
  position: relative; z-index: 60;
}

/* ── Sidebar strip ── */
.sidebar-strip {
  width: var(--strip-w); background: var(--bg2);
  border-right: 1px solid var(--border);
  box-shadow: 1px 0 8px rgba(0,0,0,.2);
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 0; gap: 2px; flex-shrink: 0;
  position: relative; z-index: 500;
  padding-top: calc(8px + var(--safe-top));
}
.sidebar-feature-scroll {
  width: 100%; flex: 1; min-height: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sidebar-feature-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }
.sidebar-footer {
  width: 100%; display: flex; flex-direction: column; align-items: center;
  gap: 2px; flex-shrink: 0;
}
.strip-btn {
  width: 40px; height: 40px; background: none; border: none;
  border-radius: 8px; cursor: pointer; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); transition: background .2s cubic-bezier(.4,0,.2,1), color .2s cubic-bezier(.4,0,.2,1);
  position: relative; flex-shrink: 0;
}
.strip-btn:hover { background: var(--bg3); color: var(--text); }
.strip-btn.active { background: rgba(91,141,239,.15); color: var(--accent); }
.strip-btn .strip-badge {
  position: absolute; top: 4px; right: 4px;
  background: var(--accent); color: #fff;
  border-radius: 8px; font-size: 9px; padding: 1px 4px;
  min-width: 14px; text-align: center; line-height: 14px;
}
.session-dot {
  display: none; position: absolute; top: 5px; right: 5px;
  width: 8px; height: 8px; border-radius: 50%;
}
.session-dot.warn  { display: block; background: var(--yellow); }
.session-dot.alert { display: block; background: var(--red); }
.strip-sep { width: 32px; height: 1px; background: var(--border); margin: 4px 0; }
/* User avatar button */
.strip-user-btn {
  width: 34px; height: 34px; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, transform .15s; flex-shrink: 0; position: relative;
  background: var(--bg3);
}
.strip-user-btn:hover { border-color: var(--accent); transform: scale(1.08); }
.strip-user-btn .strip-tooltip { left: calc(var(--strip-w) + 6px); top: 50%; transform: translateY(-50%); }
/* Drawer header hint icon */
.drawer-hint {
  cursor: help; font-size: 13px; opacity: 0.55; position: relative;
  line-height: 1; flex-shrink: 0; margin-right: 2px;
}
.drawer-hint::after {
  content: attr(data-tip); display: none; position: absolute;
  right: 0; top: 26px; width: 230px;
  background: var(--bg3); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; font-size: 11px; color: var(--text); z-index: 300;
  line-height: 1.5; white-space: normal; box-shadow: 0 4px 18px rgba(0,0,0,.45);
}
.drawer-hint:hover::after { display: block; }
/* User picker modal */
.user-picker-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 1100;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.user-picker-modal.hidden { display: none; }
.user-picker-panel {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 14px;
  padding: 24px; width: 360px; max-width: 95vw;
  display: flex; flex-direction: column; gap: 16px;
}
.user-picker-title { font-size: 16px; font-weight: 700; color: var(--text); }
.user-list { display: flex; flex-direction: column; gap: 8px; }
.user-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg3); border: 2px solid transparent; border-radius: 10px;
  padding: 10px 14px; cursor: pointer; transition: border-color .15s;
}
.user-card:hover { border-color: var(--accent); }
.user-card.active { border-color: var(--accent); }
.user-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.user-card-name { font-size: 14px; font-weight: 600; color: var(--text); }
.user-card-sub { font-size: 11px; color: var(--muted); }
.user-card-del { margin-left: auto; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; padding: 2px 6px; border-radius: 4px; }
.user-card-del:hover { color: var(--red); background: rgba(255,80,80,.1); }
.user-add-row { display: flex; gap: 8px; }
.user-add-row input { flex: 1; background: var(--bg3); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.user-add-row select { background: var(--bg3); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 8px 6px; font-size: 16px; width: 56px; }
.user-add-row button { background: var(--accent); border: none; color: #fff; border-radius: 8px; padding: 8px 14px; font-size: 13px; cursor: pointer; font-weight: 600; }
.strip-tooltip { display: none; } /* rendered by JS tooltip at body level */

/* ── Agent pill ── */
.agent-pill {
  position: absolute; top: 10px; left: 12px; z-index: 5;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 20px; padding: 4px 10px 4px 8px;
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--text);
  user-select: none; pointer-events: none;
}
.agent-pill .status-dot { width: 6px; height: 6px; }

/* Agent activity stays beside the conversation on desktop and mobile. */
.chat-agents-controls { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.chat-agents-toggle {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 30px; flex-shrink: 0; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg2); color: var(--muted); font: inherit; font-size: 12px; cursor: pointer;
}
.chat-agents-toggle .icon, .chat-agents-toggle svg { width: 16px; height: 16px; }
.chat-agents-toggle:hover, .chat-agents-toggle[aria-expanded="true"], .chat-agents-toggle.has-active-agents {
  color: var(--accent); border-color: var(--accent);
}
#chatAgentsCount { min-width: 16px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 11px; padding: 1px 3px; }
.chat-agents-panel {
  position: absolute; z-index: 30; bottom: calc(100% + 8px); right: 12px;
  width: min(420px, calc(100% - 24px)); max-height: min(65dvh, 600px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 12px 40px #0004; color: var(--text);
}
.chat-agents-panel[hidden], #chatAgentsCount[hidden] { display: none; }
.chat-agents-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px; border-bottom: 1px solid var(--border); }
.chat-agents-header h2 { font-size: 15px; margin: 0 0 5px; }
.chat-agents-header p { font-size: 12px; color: var(--muted); margin: 0; overflow-wrap: anywhere; }
#chatAgentsClose { flex-shrink: 0; width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg3); color: var(--text); cursor: pointer; }
.chat-agents-toggle:focus-visible, #chatAgentsClose:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.chat-agents-list { overflow-y: auto; overscroll-behavior: contain; padding: 0 14px; }
.chat-agent-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 8px; padding: 14px 0 14px calc(var(--agent-depth, 0) * 10px); border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.chat-agent-row:last-child { border-bottom: 0; }
.chat-agent-name { font-size: 13px; font-weight: 650; }
.chat-agent-status { max-width: 120px; align-self: start; padding: 2px 6px; border-radius: 5px; font-size: 10px; color: var(--muted); background: var(--bg3); }
.chat-agent-row[data-status="running"] .chat-agent-status { color: var(--accent); }
.chat-agent-row[data-status="done"] .chat-agent-status { color: var(--green); }
.chat-agent-row[data-status="error"] .chat-agent-status { color: var(--red); }
.chat-agent-model, .chat-agent-assignment, .chat-agent-activity { grid-column: 1 / -1; font-size: 12px; line-height: 1.45; }
.chat-agent-model { color: var(--muted); font-size: 11px; }
.chat-agent-activity { color: var(--muted); }
.chat-agents-empty { margin: 0; padding: 22px 18px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.chat-agent-work { grid-column: 1 / -1; min-width: 0; margin-top: 6px; font-size: 12px; }
.chat-agent-work > summary { color: var(--accent); cursor: pointer; padding: 6px 0; }
.chat-agent-work summary:focus-visible, .chat-agent-work button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chat-agent-work-body { padding: 4px 0 8px; overflow-wrap: anywhere; line-height: 1.5; }
.chat-agent-work-body h3 { font-size: 12px; margin: 14px 0 6px; color: var(--text); }
.chat-agent-work-body h4 { font-size: 11px; margin: 8px 0 4px; color: var(--muted); }
.chat-agent-work-text, .chat-agent-work-body pre { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.chat-agent-work-body pre { max-height: 300px; overflow-y: auto; margin: 0; padding: 8px; border-radius: 6px; background: var(--bg); font-size: 11px; }
.chat-agent-work-note, .chat-agent-work-notice { color: var(--muted); font-size: 11px; }
.chat-agent-work-notice { padding: 10px 16px; margin: 0; border-top: 1px solid var(--border); }
.chat-agent-work-action { margin: 6px 0; padding: 8px; border: 1px solid var(--border); border-radius: 8px; }
.chat-agent-work-action > summary { cursor: pointer; }
.chat-agent-work-progress { padding-left: 18px; }
.chat-agent-work-progress li { margin: 6px 0; }
.chat-agent-work-download, .chat-agent-work-more { margin-top: 12px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg3); color: var(--text); font: inherit; font-size: 12px; cursor: pointer; }
.chat-agent-work-more { margin: 0 16px 12px; }
@media (max-width: 480px) {
  .chat-agent-status { max-width: 95px; }
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.status-dot.offline { background: var(--red); }
.status-dot.busy    { background: var(--yellow); animation: pulse 1s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ── Chat area ── */
.chat-area { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.messages { flex: 1; min-height: 0; overflow-y: auto; padding: 16px;
  padding-top: 48px; /* space for agent pill */
  display: flex; flex-direction: column; gap: 12px; }
.empty-state-wrap { flex: 1; display: flex; align-items: center; justify-content: center; }
.empty-state-card { text-align: center; padding: 40px 32px; background: var(--bg2); border-radius: 16px; border: 1px solid var(--border); max-width: 360px; }
.empty-state-card h2 { margin: 12px 0 8px; font-size: 20px; }
.empty-state-card p { color: var(--muted); font-size: 14px; margin: 0 0 20px; }
.empty-state-card .btn-create-agent { font-size: 15px; padding: 12px 24px; }

/* ── Messages ── */
.msg { max-width: 820px; width: 100%; flex: 0 0 auto; }
.msg.user { align-self: flex-end; }
.msg.assistant { align-self: flex-start; }
.msg-bubble { padding: 10px 14px; border-radius: var(--radius); line-height: 1.55; font-size: 14px;
  /* Allow mid-word breaking for unbreakable strings (long URLs, base64 ids,
     Microsoft Graph message-ids, hashes). Without this, a plain-text token
     with no spaces/hyphens stretches the bubble past its container — visible
     when an email summary inlines a Graph message-id. The existing
     :not(pre) > code rule below handles inline-code tokens; this covers
     prose. `pre` blocks keep their own overflow-x: auto. */
  word-break: break-word; overflow-wrap: anywhere; }
.msg.user .msg-bubble { background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.msg.assistant .msg-bubble { background: var(--bg3); border-bottom-left-radius: 4px; }
.msg.turn-stopped { width: auto; }
.msg.turn-stopped .msg-bubble {
  padding: 6px 10px; color: var(--muted); background: transparent;
  border: 1px solid var(--border); font-size: 12px; font-style: italic;
}

/* ── Background task coordinator cards ── */
.msg.task-chip {
  align-self: flex-start;
  margin: 6px 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 4%, var(--bg));
  color: var(--text);
  font-size: 13px;
  transition: background 160ms ease, border-color 160ms ease;
}
.msg.task-chip[data-task-state="done"] {
  border-left-color: var(--green);
  background: color-mix(in srgb, var(--green) 6%, var(--bg));
}
.msg.task-chip[data-task-state="error"] {
  border-left-color: var(--red);
  background: color-mix(in srgb, var(--red) 6%, var(--bg));
}
.msg.task-chip[data-task-state="cancelled"],
.msg.task-chip[data-task-state="blocked"] {
  border-left-color: var(--yellow);
  background: color-mix(in srgb, var(--yellow) 5%, var(--bg));
}
.msg.task-chip[data-task-state="finished"] { opacity: .8; }
.job-recovery-dialog {
  margin: auto; padding: 24px; width: min(600px, calc(100vw - 32px));
  max-height: 85vh; overflow: auto; box-sizing: border-box;
  background: var(--bg2); color: var(--text); border: 1px solid var(--border); border-radius: 12px;
}
.job-recovery-dialog::backdrop { background: rgba(0, 0, 0, .55); }
.job-recovery-dialog h3 { margin-bottom: 12px; }
.job-recovery-dialog p { margin: 10px 0; line-height: 1.45; overflow-wrap: anywhere; }
.job-recovery-dialog pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 180px; overflow: auto; }
.job-recovery-dialog fieldset { min-width: 0; margin: 16px 0; padding: 12px; border: 1px solid var(--border); border-radius: 6px; }
.job-recovery-dialog label { display: block; margin: 10px 0; }
.job-recovery-dialog select, .job-recovery-dialog textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; padding: 10px; font: inherit; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; }
.job-recovery-dialog button { min-height: 40px; padding: 8px 16px; font: inherit; color: var(--text); background: var(--bg3); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }
.job-recovery-buttons button:last-child { background: var(--accent); color: #fff; }
.job-recovery-dialog button:disabled { opacity: .6; cursor: wait; }
.job-recovery-dialog :is(button, select, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.job-recovery-dialog [hidden] { display: none; }
.job-recovery-buttons { display: flex; justify-content: flex-end; gap: 12px; }
.task-chip-recover { padding: 2px 8px; }
.task-chip-header {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-bottom: 4px;
}
.task-chip-agent {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-chip-badge {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}
.task-chip-badge[data-status="done"] { color: var(--green); }
.task-chip-badge[data-status="error"] { color: var(--red); }
.task-chip-badge[data-status="cancelled"],
.task-chip-badge[data-status="blocked"] { color: var(--yellow); }
.task-chip-badge[data-status="finished"] { color: var(--muted); }
.task-chip-recover,
.task-chip-cancel,
.task-chip-history-button {
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg2);
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  line-height: 1.4;
  cursor: pointer;
}
.task-chip-cancel { padding: 2px 8px; }
.task-chip-history-button {
  justify-self: start;
  margin-top: 2px;
  padding: 4px 8px;
}
.task-chip-recover:hover,
.task-chip-cancel:hover,
.task-chip-history-button:hover { border-color: var(--accent); color: var(--text); }
.task-chip-recover:focus-visible,
.task-chip-cancel:focus-visible,
.task-chip-history-button:focus-visible,
.task-chip-details-summary:focus-visible,
.task-chip-more-children > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.task-chip-cancel:disabled,
.task-chip-history-button:disabled { cursor: wait; opacity: .65; }
.task-chip-task {
  display: -webkit-box;
  margin-bottom: 5px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.task-chip-task[hidden],
.task-chip-meta[hidden],
.task-chip-overview[hidden],
.task-chip-claims[hidden],
.task-chip-children[hidden],
.task-chip-event-highlight[hidden],
.task-chip-status[hidden],
.task-chip-event-list[hidden],
.task-chip-recent[hidden],
.task-chip-raw[hidden] { display: none; }
.task-chip-meta {
  margin-bottom: 6px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-chip-overview {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}
.task-chip-overview > span {
  padding: 2px 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
  white-space: nowrap;
}
.task-chip-claims {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.task-chip-root-claims { margin-bottom: 6px; }
.task-chip-claim {
  max-width: min(220px, 100%);
  padding: 1px 6px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 7%, var(--bg2));
  color: color-mix(in srgb, var(--text) 78%, var(--muted));
  font-size: 9px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-chip-claim::before {
  content: "◆";
  margin-right: 4px;
  color: var(--accent);
  font-size: 7px;
}
.task-chip-claim[data-mode="verification"],
.task-chip-claim[data-mode="shared"] {
  border-style: dashed;
}
.task-chip-claim[data-status="done"]::before { content: "✓"; color: var(--green); }
.task-chip-claim[data-status="cancelled"],
.task-chip-claim[data-status="blocked"] { opacity: .65; }
.task-chip-claim-more::before { content: ""; margin: 0; }
.task-chip-children {
  display: grid;
  gap: 4px;
  margin-bottom: 6px;
}
.task-chip-child {
  position: relative;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: start;
  min-width: 0;
  padding: 5px 7px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: color-mix(in srgb, var(--text) 2%, transparent);
}
.task-chip-child[data-depth="1"] { margin-left: 14px; }
.task-chip-child[data-depth="2"] { margin-left: 28px; }
.task-chip-child[data-depth="3"] { margin-left: 42px; }
.task-chip-child[data-depth="4"] { margin-left: 56px; }
.task-chip-child[data-depth]:not([data-depth="0"])::before {
  position: absolute;
  top: -5px;
  bottom: -5px;
  left: -8px;
  width: 6px;
  border-bottom: 1px solid var(--border);
  border-left: 1px solid var(--border);
  content: "";
  pointer-events: none;
}
.task-chip-child-icon {
  color: var(--accent);
  font-size: 10px;
  line-height: 1.6;
  text-align: center;
}
.task-chip-child[data-status="done"] .task-chip-child-icon { color: var(--green); }
.task-chip-child[data-status="error"] .task-chip-child-icon { color: var(--red); }
.task-chip-child[data-status="cancelled"] .task-chip-child-icon,
.task-chip-child[data-status="blocked"] .task-chip-child-icon { color: var(--yellow); }
.task-chip-child[data-status="queued"] .task-chip-child-icon { color: var(--muted); }
.task-chip-child-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.task-chip-child-name-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
}
.task-chip-child-name {
  min-width: 0;
  overflow: hidden;
  font-size: 11px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-chip-child-role {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 9px;
  text-transform: lowercase;
}
.task-chip-child-execution {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}
.task-chip-root-execution {
  flex: 0 1 45%;
}
.task-chip-child-detail {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-chip-child-claims { margin-top: 1px; }
.task-chip-child-state {
  display: grid;
  justify-items: end;
  min-width: 72px;
  max-width: 210px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
  text-align: right;
}
.task-chip-child-progress {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.task-chip-child-action {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-chip-more-children {
  color: var(--muted);
  font-size: 10px;
}
.task-chip-more-children > summary {
  width: fit-content;
  padding: 3px 5px;
  border-radius: 4px;
  cursor: pointer;
  list-style-position: inside;
}
.task-chip-more-children > summary:hover { background: var(--bg2); color: var(--text); }
.task-chip-more-children-list {
  display: grid;
  gap: 4px;
  margin-top: 4px;
}
.task-chip-event-highlight {
  margin-bottom: 5px;
  padding: 4px 7px;
  border-left: 2px solid color-mix(in srgb, var(--accent) 60%, var(--border));
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  color: var(--muted);
  font-size: 10px;
}
.task-chip-event-row {
  display: grid;
  grid-template-columns: 13px minmax(0, 1fr) auto;
  gap: 5px;
  min-width: 0;
  padding: 2px 0;
  line-height: 1.35;
}
.task-chip-event-row[data-type="redirect"] .task-chip-event-icon { color: var(--yellow); }
.task-chip-event-row[data-type="conflict"] .task-chip-event-icon { color: var(--red); }
.task-chip-event-row[data-type="claim"] .task-chip-event-icon { color: var(--accent); }
.task-chip-event-row[data-type="complete"] .task-chip-event-icon,
.task-chip-event-row[data-type="completed"] .task-chip-event-icon { color: var(--green); }
.task-chip-event-row[data-type="error"] .task-chip-event-icon { color: var(--red); }
.task-chip-event-text { min-width: 0; overflow-wrap: anywhere; }
.task-chip-event-time {
  color: var(--muted);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  opacity: .75;
}
.task-chip-status {
  display: -webkit-box;
  max-height: 4.2em;
  padding: 5px 7px;
  overflow: hidden;
  border-radius: 5px;
  background: var(--bg2);
  color: var(--text);
  font-size: 11px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.task-chip-live-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.task-chip-details {
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
}
.task-chip-details-summary {
  width: fit-content;
  padding: 3px 2px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 10px;
  list-style-position: inside;
}
.task-chip-details-summary:hover { color: var(--text); }
.task-chip-details[open] .task-chip-details-summary { color: var(--text); }
.task-chip-details-body {
  display: grid;
  gap: 7px;
  margin-top: 4px;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: color-mix(in srgb, var(--bg2) 75%, transparent);
}
.task-chip-detail-label {
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.task-chip-event-list,
.task-chip-recent {
  display: grid;
  gap: 2px;
}
.task-chip-history-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px;
  min-width: 0;
  line-height: 1.4;
}
.task-chip-history-row time {
  font-variant-numeric: tabular-nums;
  opacity: .65;
}
.task-chip-history-row span { min-width: 0; overflow-wrap: anywhere; }
.task-chip-raw pre {
  max-height: 12em;
  margin: 0;
  padding: 6px 7px;
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  font: 10px/1.4 ui-monospace, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-word;
}
.task-chip .watcher-history {
  margin-top: 0 !important;
  padding: 6px 0 0 !important;
  border-top-color: var(--border) !important;
  font-size: 10px !important;
}
.task-chip-reply {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
}
.task-chip-reply input {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 5px;
  outline: none;
  background: var(--bg2);
  color: var(--text);
  font: inherit;
  font-size: 12px;
}
.task-chip-reply input:focus { border-color: var(--accent); }
.task-chip-reply button {
  padding: 6px 12px;
  border: 0;
  border-radius: 5px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.task-chip-reply button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.task-chip-reply button:disabled,
.task-chip-reply input:disabled { cursor: wait; opacity: .65; }
@media (prefers-reduced-motion: reduce) {
  .msg.task-chip { transition: none; }
}

/* Document-edit turns replace body-sized chat output with one durable artifact. */
.msg.document-artifact-message { align-self: flex-start; max-width: 390px; }
.document-artifact-card {
  overflow: hidden; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg2); box-shadow: 0 8px 24px rgba(0,0,0,.16);
}
.document-artifact-preview {
  appearance: none; display: block; position: relative; width: 100%;
  aspect-ratio: 31 / 18; overflow: hidden; padding: 0; border: 0;
  border-bottom: 1px solid var(--border); background: #f7f8fa; cursor: pointer;
}
.document-artifact-preview canvas { display: block; width: 100%; height: 100%; }
.document-artifact-preview:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.document-artifact-preview:disabled { cursor: default; }
.document-artifact-processing {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center; gap: 10px;
  color: #374151; background: rgba(247,248,250,.38);
}
.document-artifact-message.processing .document-artifact-processing { display: flex; }
.document-artifact-file-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px;
  border: 1px solid #cfd5df; border-radius: 8px; background: rgba(255,255,255,.92);
  box-shadow: 0 4px 14px rgba(31,41,55,.14);
}
.document-artifact-meta { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px 11px 5px; }
.document-artifact-kind { display: inline-flex; color: var(--muted); flex: 0 0 auto; }
.document-artifact-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
.document-artifact-state { flex: 0 0 auto; color: var(--muted); font-size: 11px; white-space: nowrap; }
.document-artifact-message.complete .document-artifact-state { color: var(--green); }
.document-artifact-message.failed .document-artifact-state { color: var(--red); }
.document-artifact-instruction {
  padding: 0 11px 10px; overflow: hidden; color: var(--muted); font-size: 11px;
  text-overflow: ellipsis; white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .document-artifact-message .pill-spinner { animation: none; }
}

/* ── Markdown ── */
.msg-bubble p  { margin-bottom: 8px; }
.msg-bubble p:last-child { margin-bottom: 0; }
.msg-bubble pre { background: #111; border: 1px solid var(--border); border-radius: 6px;
  padding: 10px 12px; overflow-x: auto; margin: 8px 0; max-width: 100%;
  /* Cap tall code blocks (e.g. a verbatim `apt list` dump from node_exec)
     so the bubble doesn't take over the chat. Scroll lives inside the
     <pre>, so the conversation around it stays usable. dvh on small
     screens so the address-bar resize doesn't clip the block. */
  max-height: min(50vh, 50dvh); overflow-y: auto; overscroll-behavior: contain; }
.msg-bubble pre code { white-space: pre; }
.msg-bubble code { font-family: 'Fira Code', monospace; font-size: 12px; }
.msg-bubble :not(pre) > code { background: #111; padding: 2px 5px; border-radius: 4px;
  word-break: break-word; overflow-wrap: anywhere; }
.msg-bubble ul, .msg-bubble ol { padding-left: 18px; margin-bottom: 8px; }
.msg-bubble li { margin-bottom: 3px; }
.msg-bubble h1,.msg-bubble h2,.msg-bubble h3 { margin: 10px 0 6px; }
.msg-bubble strong { color: #fff; }
.msg-bubble a { color: var(--accent); }
.msg-bubble .table-wrap { overflow-x: auto; max-width: 100%; margin: 8px 0; -webkit-overflow-scrolling: touch; }
.msg-bubble table { border-collapse: collapse; width: 100%; margin: 8px 0; }
.msg-bubble .table-wrap table { margin: 0; }
.msg-bubble th,.msg-bubble td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; }
.msg-bubble th { background: var(--bg2); }

/* ── HTML document preview (chat code fences + docs viewer) ── */
.html-preview-card {
  margin: 10px 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg2);
}
.html-preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.html-preview-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.html-preview-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.html-preview-btn {
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}
.html-preview-btn:hover { border-color: var(--accent); color: var(--accent); }
.html-preview-src-wrap pre {
  margin: 0;
  max-height: min(40vh, 40dvh);
  border: none;
  border-radius: 0;
}
.html-preview-frame {
  display: block;
  width: 100%;
  height: min(56vh, 480px);
  border: none;
  background: #fff;
}
.html-preview-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10050;
  background: rgba(0, 0, 0, 0.65);
  align-items: stretch;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}
.html-preview-modal-shell {
  display: flex;
  flex-direction: column;
  width: min(1100px, 100%);
  height: 100%;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.html-preview-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
}
.html-preview-modal-frame {
  flex: 1;
  width: 100%;
  border: none;
  background: #fff;
}
.doc-html-viewer {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 50vh;
  background: var(--bg2);
}
.doc-html-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg3);
  flex-shrink: 0;
}
.doc-html-toolbar-label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}
.doc-html-frame {
  flex: 1;
  width: 100%;
  border: none;
  background: #fff;
  min-height: 0;
}
.doc-html-source {
  flex: 1;
  margin: 0;
  padding: 14px;
  overflow: auto;
  font-family: 'Fira Code', ui-monospace, monospace;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--bg);
  color: var(--text);
  min-height: 0;
}

/* ── Pronunciation button ── */
.pronounce-btn { display: inline-flex; align-items: center; gap: 4px; background: var(--bg2); border: 1px solid var(--accent);
  color: var(--accent); border-radius: 16px; padding: 2px 10px 2px 6px; font-size: 13px; cursor: pointer;
  font-family: inherit; line-height: 1.4; transition: background 0.15s, color 0.15s; vertical-align: middle; }
.pronounce-btn:hover { background: var(--accent); color: #fff; }
.pronounce-btn:active { opacity: 0.8; }
.pronounce-btn .pronounce-icon { font-size: 14px; }

/* ── Tutor Widgets ── */
.tutor-widget { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin: 10px 0; }
.tutor-widget-question { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 12px; line-height: 1.45; }
.tutor-widget-options { display: flex; flex-direction: column; gap: 8px; }
.tutor-widget-option { display: flex; align-items: center; gap: 10px; background: var(--bg3); border: 1.5px solid var(--border);
  border-radius: 8px; padding: 10px 14px; cursor: pointer; transition: border-color 0.15s, background 0.15s; font-size: 13px; color: var(--text); }
.tutor-widget-option:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg3)); }
.tutor-widget-option .opt-label { font-weight: 700; color: var(--accent); min-width: 20px; }
.tutor-widget-option.correct { border-color: #43b89c; background: color-mix(in srgb, #43b89c 12%, var(--bg3)); }
.tutor-widget-option.incorrect { border-color: #e74c3c; background: color-mix(in srgb, #e74c3c 12%, var(--bg3)); }
.tutor-widget-option.disabled { pointer-events: none; opacity: 0.7; }
.tutor-widget-option.correct .opt-label { color: #43b89c; }
.tutor-widget-option.incorrect .opt-label { color: #e74c3c; }
.tutor-widget-explanation { margin-top: 10px; padding: 10px 14px; background: color-mix(in srgb, var(--accent) 8%, var(--bg2));
  border-radius: 8px; font-size: 12px; color: var(--muted); line-height: 1.5; display: none; }
.tutor-widget-explanation.visible { display: block; }
.tutor-widget-response { margin-top: 10px; padding: 10px 14px; background: var(--bg3); border-radius: 8px;
  font-size: 13px; color: var(--text); line-height: 1.5; display: none; }
.tutor-widget-response.visible { display: block; }
.tutor-widget-response .tutor-response-inner p { margin: 0 0 6px 0; }
.tutor-widget-response .tutor-response-inner p:last-child { margin-bottom: 0; }
.tutor-widget-review-badge { display: inline-block; background: var(--accent); color: #fff; font-size: 10px;
  padding: 2px 8px; border-radius: 10px; margin-bottom: 8px; font-weight: 600; }

/* Fill-in-blank & Cloze shared input styles */
.tutor-widget-input-row { display: flex; gap: 8px; align-items: stretch; }
.tutor-widget-input {
  flex: 1; background: var(--bg3); border: 1.5px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 10px 12px; font-size: 14px; font-family: inherit;
}
.tutor-widget-input:focus { outline: none; border-color: var(--accent); }
.tutor-widget-input.correct { border-color: #43b89c; background: color-mix(in srgb, #43b89c 12%, var(--bg3)); }
.tutor-widget-input.incorrect { border-color: #e74c3c; background: color-mix(in srgb, #e74c3c 12%, var(--bg3)); }
.tutor-widget-submit {
  background: var(--accent); color: #fff; border: none; border-radius: 8px;
  padding: 10px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.tutor-widget-submit[disabled] { opacity: 0.5; cursor: not-allowed; }

.tutor-widget-cloze-body { font-size: 14px; line-height: 1.8; color: var(--text); margin-bottom: 12px; }
.tutor-widget-cloze-input {
  display: inline-block; width: 100px; min-width: 80px;
  background: var(--bg3); border: 1.5px solid var(--border); color: var(--text);
  border-radius: 6px; padding: 3px 8px; font-size: 13px; font-family: inherit; margin: 0 2px;
}
.tutor-widget-cloze-input.correct { border-color: #43b89c; background: color-mix(in srgb, #43b89c 15%, var(--bg3)); }
.tutor-widget-cloze-input.incorrect { border-color: #e74c3c; background: color-mix(in srgb, #e74c3c 15%, var(--bg3)); }

/* Flashcard */
.tutor-widget-flashcard-front {
  font-size: 18px; font-weight: 600; color: var(--text); padding: 20px; text-align: center;
  background: var(--bg3); border-radius: 10px; margin-bottom: 10px;
}
.tutor-widget-flashcard-back {
  font-size: 15px; color: var(--text); padding: 16px 20px; text-align: center;
  background: color-mix(in srgb, var(--accent) 10%, var(--bg2)); border-radius: 10px; margin-bottom: 12px;
  animation: tutor-fc-reveal 0.3s ease;
}
@keyframes tutor-fc-reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.tutor-widget-flashcard-actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.tutor-widget-flashcard-ratings { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tutor-widget-flashcard-ratings button {
  background: var(--bg3); border: 1.5px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 8px 6px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.tutor-widget-flashcard-ratings button[data-rating="again"]:hover { border-color: #e74c3c; }
.tutor-widget-flashcard-ratings button[data-rating="hard"]:hover  { border-color: #f9c74f; }
.tutor-widget-flashcard-ratings button[data-rating="good"]:hover  { border-color: #43b89c; }
.tutor-widget-flashcard-ratings button[data-rating="easy"]:hover  { border-color: var(--accent); }
.tutor-widget-flashcard-ratings button.selected { background: var(--accent); color: #fff; border-color: var(--accent); }
.tutor-widget-flashcard-ratings button[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Free response */
.tutor-widget-textarea {
  width: 100%; background: var(--bg3); border: 1.5px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 10px 12px; font-size: 13px; font-family: inherit;
  resize: vertical; margin-bottom: 10px; box-sizing: border-box;
}
.tutor-widget-textarea:focus { outline: none; border-color: var(--accent); }
.tutor-widget-rubric { margin: 8px 0; font-size: 12px; color: var(--muted); }
.tutor-widget-rubric summary { cursor: pointer; user-select: none; }
.tutor-widget-rubric ul { margin: 6px 0 0 20px; padding: 0; }

/* Inline celebration widget */
.tutor-widget-celebration {
  text-align: center; padding: 20px;
  background: color-mix(in srgb, #f9c74f 12%, var(--bg2));
  border-color: #f9c74f;
}
.tutor-widget-celebration .tutor-celebration-icon { font-size: 48px; margin-bottom: 6px; }

/* Ordering */
.tutor-widget-order-list { list-style: none; padding: 0; margin: 0 0 10px 0; display: flex; flex-direction: column; gap: 6px; }
.tutor-widget-order-item {
  background: var(--bg3); border: 1.5px solid var(--border); border-radius: 8px;
  padding: 10px 14px; font-size: 13px; color: var(--text); cursor: grab; user-select: none;
}
.tutor-widget-order-item.dragging { opacity: 0.5; cursor: grabbing; }
.tutor-widget-order-item.correct { border-color: #43b89c; background: color-mix(in srgb, #43b89c 12%, var(--bg3)); }
.tutor-widget-order-item.incorrect { border-color: #e74c3c; background: color-mix(in srgb, #e74c3c 12%, var(--bg3)); }

/* Matching */
.tutor-widget-matching { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.tutor-widget-match-col { display: flex; flex-direction: column; gap: 6px; }
.tutor-widget-match-left, .tutor-widget-match-right {
  background: var(--bg3); border: 1.5px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 8px 12px; font-size: 13px; cursor: pointer; text-align: left;
}
.tutor-widget-match-left:hover:not([disabled]), .tutor-widget-match-right:hover:not([disabled]) { border-color: var(--accent); }
.tutor-widget-match-left.selected, .tutor-widget-match-right.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, var(--bg3)); }
.tutor-widget-match-left.paired, .tutor-widget-match-right.paired { border-color: var(--accent); opacity: 0.75; }
.tutor-widget-match-left.correct, .tutor-widget-match-right.correct { border-color: #43b89c; background: color-mix(in srgb, #43b89c 15%, var(--bg3)); }
.tutor-widget-match-left.incorrect, .tutor-widget-match-right.incorrect { border-color: #e74c3c; background: color-mix(in srgb, #e74c3c 15%, var(--bg3)); }

/* Hotspot */
.tutor-widget-hotspot-wrap { position: relative; display: inline-block; max-width: 100%; cursor: crosshair; margin-bottom: 10px; }
.tutor-widget-hotspot-img { display: block; max-width: 100%; height: auto; border-radius: 8px; }
.tutor-widget-hotspot-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tutor-widget-hotspot-region { fill: rgba(0,0,0,0); stroke: rgba(255,255,255,0.2); stroke-width: 2; transition: all 0.3s; }
.tutor-widget-hotspot-region.correct { fill: rgba(67, 184, 156, 0.35); stroke: #43b89c; stroke-width: 3; }
.tutor-widget-hotspot-region.incorrect { fill: rgba(231, 76, 60, 0.35); stroke: #e74c3c; stroke-width: 3; }

/* Speak */
.tutor-widget-speak-target {
  font-size: 16px; font-weight: 600; color: var(--text); padding: 14px 16px;
  background: color-mix(in srgb, var(--accent) 10%, var(--bg2)); border-radius: 10px; margin-bottom: 10px; text-align: center;
}
.tutor-widget-speak-actions { display: flex; align-items: center; gap: 12px; }
.tutor-widget-speak-status { font-size: 12px; color: var(--muted); }

/* ── Timestamp ── */
.msg-time { font-size: 10px; color: var(--muted); margin-top: 4px; padding: 0 4px; }
.msg.user .msg-time { text-align: right; }

/* ── Tool pill ── */
.task-header { display: flex; align-items: center; gap: 8px; margin: 16px 0 4px; color: var(--muted); font-size: 11px; width: 100%; max-width: 820px; flex: 0 0 auto; }
.task-header::before,.task-header::after { content:''; flex:1; height:1px; background:var(--border); }
.task-header-label { white-space: nowrap; padding: 0 6px; color: var(--yellow); font-size: 11px; letter-spacing: 0.02em; }
.tool-run {
  width: 100%; max-width: min(820px, 100%); min-width: 0; margin: 6px 0 4px;
  flex: 0 0 auto; align-self: flex-start;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg2);
  overflow: hidden; box-sizing: border-box;
}
.tool-run-head {
  width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center; gap: 7px; padding: 6px 9px; border: 0; background: transparent;
  color: var(--muted); font: inherit; font-size: 12px; text-align: left; cursor: pointer;
}
.tool-run-head:hover,
.tool-run-head:focus-visible { color: var(--fg); outline: none; background: var(--bg3); }
.tool-run-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--fg); }
.tool-run-meta { color: var(--muted); font-size: 11px; white-space: nowrap; }
.tool-run-chev { display: inline-flex; color: var(--muted); transition: transform .12s ease; }
.tool-run.open .tool-run-chev { transform: rotate(180deg); }
.tool-run-done { background: color-mix(in srgb, var(--accent) 5%, var(--bg2)); }
.tool-run-steps { display: grid; gap: 1px; border-top: 1px solid var(--border); background: var(--border); }
.tool-run-steps[hidden] { display: none; }
.tool-run-step { display: grid; gap: 3px; padding: 7px 9px; background: var(--bg2); }
.tool-run-step.clickable { cursor: pointer; }
.tool-run-step.clickable:hover,
.tool-run-step.clickable:focus-visible { background: var(--bg3); outline: none; }
.tool-run-step.is-internal { opacity: .72; }
.tool-run-step-main { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; }
.tool-run-step-icon { display: inline-flex; align-items: center; justify-content: center; width: 14px; flex: 0 0 auto; color: var(--muted); }
.tool-run-step-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); }
.tool-run-step-time { margin-left: auto; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tool-run-step-sub,
.tool-run-step-preview {
  margin-left: 20px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--muted); font-size: 11px;
}
.tool-run-step-sub { font-family: monospace; }
.tool-run-actions { display: grid; gap: 7px; padding: 7px 8px; border-top: 1px solid var(--border); background: var(--bg2); }
.tool-run-actions-summary { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 7px; min-width: 0; color: var(--muted); font-size: 11px; }
.tool-run-actions-summary span { white-space: nowrap; }
.tool-run-actions-tools { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.tool-run-action-chip { max-width: 100%; overflow-wrap: anywhere; border: 1px solid var(--border); border-radius: 4px; padding: 2px 5px; background: var(--bg1); color: var(--fg); font-size: 11px; line-height: 1.25; }
.tool-run-actions-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
.tool-run-actions button { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); background: transparent; color: var(--muted); border-radius: 4px; padding: 4px 7px; font-size: 11px; cursor: pointer; }
.tool-run-actions button:hover, .tool-run-actions button:focus-visible { color: var(--fg); background: var(--bg3); outline: none; }
.tool-pills { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 2px; }
.tool-pill { font-size: 11px; color: var(--muted); background: var(--bg2);
  border: 1px solid var(--border); border-radius: 10px; padding: 2px 8px; font-family: monospace;
  display: inline-flex; align-items: center; gap: 4px; }
.tool-pill.ask-claude { color: var(--accent); border-color: var(--accent); display: inline-flex; align-items: center; gap: 5px; }
.tool-pill.ask-claude.done { color: var(--muted); border-color: var(--border); }
.tool-pill.tool-done { color: var(--fg); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.tool-pill-summary { font-family: var(--font); font-size: 10px; opacity: 0.7; margin-left: 2px;
  max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-pill-subtitle { font-family: monospace; font-size: 10px; opacity: 0.7; margin-left: 4px;
  max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Currently-streaming tool's output: a chat-bubble-sized container that lives
   directly under the small-pill row. Only one is shown at a time; it vanishes
   on tool_result and the small pill above flips to its done state. */
.tool-stream-bubble {
  display: flex; flex-direction: column; gap: 4px;
  width: 100%; max-width: 820px; min-width: 0;
  flex: 0 0 auto;
  padding: 6px 10px; margin: 4px 0 6px;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 12px;
  box-sizing: border-box;
}
.tool-stream-bubble .tool-pill-head {
  display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--muted); font-size: 11px;
}
.tool-stream-bubble .tool-pill-head .tool-pill-cmd {
  font-family: monospace; font-size: 11px; color: var(--fg); opacity: 0.85;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0;
}
.tool-pill-stream {
  font-family: monospace; font-size: 11px; line-height: 1.35; color: var(--fg); opacity: 0.85;
  background: var(--bg3); border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 8px; margin: 0;
  /* ~10 lines: 10 × 1.35em + 12px padding. min-* are required so flex doesn't
     let it grow to content size and ignore max-height / overflow-x. */
  min-height: 0; min-width: 0; max-height: calc(10 * 1.35em + 12px);
  overflow-y: auto; overflow-x: hidden;
  white-space: pre-wrap; word-break: break-word;
}
.tool-pill.clickable { cursor: pointer; transition: border-color .15s, color .15s; }
.tool-pill.clickable:hover,
.tool-pill.clickable:focus-visible { color: var(--fg); border-color: var(--accent); outline: none; }
.tool-modal-body { background: var(--bg3); border: 1px solid var(--border); border-radius: 6px;
  padding: 10px 12px; font-family: monospace; font-size: 12px; color: var(--text);
  white-space: pre-wrap; word-break: break-word; overflow: auto; flex: 1; min-height: 0;
  max-height: 60dvh; margin: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
.pill-spinner { width: 10px; height: 10px; border: 1.5px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block; flex-shrink: 0; }

/* ── Typing indicator ── */
.typing { display: none; align-self: flex-start; padding: 8px 14px;
  background: var(--bg3); border-radius: var(--radius); border-bottom-left-radius: 4px; }
.typing.visible { display: flex; gap: 8px; align-items: center; }
.typing-label { color: var(--muted); font-size: 12px; font-weight: 500; line-height: 1; }
.typing-dots { display: flex; gap: 5px; align-items: center; }
.typing-dot { width: 7px; height: 7px; background: var(--muted); border-radius: 50%; animation: bounce .9s infinite; }
.typing-dot:nth-child(2) { animation-delay: .15s; }
.typing-dot:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%,80%,100%{transform:scale(.8);opacity:.5} 40%{transform:scale(1.1);opacity:1} }

/* ── Slash command menu ── */
.slash-menu {
  position: absolute; bottom: 100%; left: 12px; right: 12px; margin-bottom: 4px;
  background: var(--bg3); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 -4px 20px rgba(0,0,0,.35); overflow: hidden; z-index: 200;
  max-height: 260px; overflow-y: auto;
}
.slash-menu-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px; cursor: pointer;
  transition: background .1s; border-bottom: 1px solid var(--border);
}
.slash-menu-item:last-child { border-bottom: none; }
.slash-menu-item:hover, .slash-menu-item.active { background: var(--bg2); }
.slash-menu-item.active { border-left: 3px solid var(--accent); padding-left: 11px; }
.smi-icon  { display: flex; align-items: center; color: var(--muted); flex-shrink: 0; }
.smi-label { font-family: monospace; font-size: 13px; color: var(--accent); font-weight: 600; min-width: 100px; }
.smi-desc  { font-size: 12px; color: var(--muted); }

/* ── Input area ── */
.input-area {
  border-top: 1px solid var(--border); padding: 10px 12px;
  padding-bottom: calc(10px + var(--safe-bot));
  display: flex; flex-direction: column; gap: 6px; background: var(--bg2);
  flex-shrink: 0;
}
.input-row { display: flex; gap: 8px; align-items: flex-end; }
.btn-attach { background: transparent; border: 1.5px solid var(--border); color: var(--muted);
  width: 44px; height: 44px; border-radius: 10px; cursor: pointer; font-size: 18px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: border-color .15s, color .15s; }
.btn-attach:hover { border-color: var(--accent); color: var(--accent); }
.attach-preview { display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  background: var(--bg3); border: 1px solid var(--border); border-radius: 8px;
  font-size: 12px; color: var(--text); }
.attach-preview img { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.attach-preview-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-preview-remove { background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 16px; padding: 0 4px; flex-shrink: 0; }
.attach-preview-remove:hover { color: #e05555; }
.tool-plan-picker { margin-bottom: 2px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg2); overflow: hidden; }
.tool-plan-head { display: flex; align-items: center; gap: 8px; padding: 5px; }
.tool-plan-toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; border: 0; background: transparent; color: var(--text); padding: 5px 7px; border-radius: 4px; font: inherit; font-size: 12px; cursor: pointer; text-align: left; }
.tool-plan-toggle:hover, .tool-plan-toggle:focus-visible { outline: none; background: var(--bg3); }
.tool-plan-toggle strong { font-weight: 600; color: var(--fg); white-space: nowrap; }
.tool-plan-toggle em { color: var(--muted); font-style: normal; font-size: 11px; white-space: nowrap; }
.tool-plan-modes { display: flex; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: 5px; background: var(--bg1); flex: 0 0 auto; }
.tool-plan-modes button { border: 0; background: transparent; color: var(--muted); border-radius: 3px; padding: 4px 7px; font-size: 11px; cursor: pointer; white-space: nowrap; }
.tool-plan-modes button:hover, .tool-plan-modes button:focus-visible { color: var(--fg); outline: none; background: var(--bg3); }
.tool-plan-modes button.active { background: var(--accent); color: #fff; }
.tool-plan-body { border-top: 1px solid var(--border); display: grid; gap: 1px; background: var(--border); }
.tool-plan-body[hidden] { display: none; }
.tool-plan-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px; background: var(--bg2); cursor: pointer; }
.tool-plan-row:hover { background: var(--bg3); }
.tool-plan-row input { margin: 0; }
.tool-plan-row-main { min-width: 0; display: grid; gap: 2px; }
.tool-plan-row-label { color: var(--fg); font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
.tool-plan-row-desc { color: var(--muted); font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.tool-plan-row code { color: var(--muted); font-size: 10px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-plan-add { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(120px, 0.8fr) auto; gap: 6px; align-items: center; padding: 7px; background: var(--bg2); }
.tool-plan-add select, .tool-plan-add input { min-width: 0; width: 100%; border: 1px solid var(--border); border-radius: 4px; background: var(--bg1); color: var(--fg); padding: 6px 7px; font-size: 11px; }
.tool-plan-add button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg3); color: var(--fg); padding: 6px 8px; font-size: 11px; cursor: pointer; white-space: nowrap; }
.tool-plan-add button:hover, .tool-plan-add button:focus-visible { outline: none; border-color: var(--accent); }
.tool-plan-remember { display: flex; align-items: center; gap: 7px; padding: 8px; background: var(--bg2); color: var(--muted); font-size: 11px; cursor: pointer; }
.tool-plan-empty { padding: 9px; background: var(--bg2); color: var(--muted); font-size: 12px; }
@media (max-width: 640px) {
  .tool-plan-head { align-items: stretch; flex-direction: column; }
  .tool-plan-modes { width: 100%; }
  .tool-plan-modes button { flex: 1; }
  .tool-plan-row { grid-template-columns: auto minmax(0, 1fr); }
  .tool-plan-row code { grid-column: 2; max-width: none; }
  .tool-plan-add { grid-template-columns: 1fr; }
  .tool-plan-add button { width: 100%; }
}
.msg-attachment { margin-bottom: 6px; }
.msg-attachment img { max-width: 280px; max-height: 200px; border-radius: 8px; display: block; }
.msg-attachment-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--bg3);
  border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; font-size: 12px; color: var(--muted); }
textarea { flex: 1; background: var(--bg3); border: 1px solid var(--border); color: var(--text);
  border-radius: 10px; padding: 10px 14px; font-size: 16px; font-family: inherit;
  resize: none; max-height: 160px; line-height: 1.5; outline: none;
  transition: border-color .15s; }
textarea:focus { border-color: var(--accent); }
textarea::placeholder { color: var(--muted); }
.btn-send { background: var(--accent); border: none; color: #fff;
  width: 44px; height: 44px; border-radius: 10px; cursor: pointer;
  font-size: 20px; display: flex; align-items: center; justify-content: center;
  transition: opacity .15s; flex-shrink: 0; }
.btn-send:hover { opacity: .85; }
.btn-send:disabled { opacity: .4; cursor: not-allowed; }
.btn-stop { background: transparent; border: 1.5px solid var(--border); color: var(--muted);
  width: 44px; height: 44px; border-radius: 10px; cursor: pointer;
  font-size: 14px; display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, color .15s, opacity .15s; flex-shrink: 0;
  opacity: 0.35; }
.btn-stop:hover { border-color: #e05555; color: #e05555; opacity: 1; }
.btn-stop.visible { opacity: 1; }

/* ── Memory gold bubble (saved) / muted slate (forgotten) ── */
@keyframes goldShimmer { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
.msg.assistant.memory-stored .msg-bubble {
  background: linear-gradient(135deg, #1c1500, #2e2200, #3d2e00, #2e2200, #1c1500);
  background-size: 300% 300%;
  animation: goldShimmer 4s ease infinite;
  border: 1px solid #7a5c00;
  box-shadow: 0 0 14px rgba(180, 140, 0, 0.2);
}
.msg.assistant.memory-forgotten .msg-bubble {
  background: linear-gradient(135deg, #14171c, #1c2028, #232834, #1c2028, #14171c);
  background-size: 300% 300%;
  animation: goldShimmer 4s ease infinite;
  border: 1px solid #3d4452;
  box-shadow: 0 0 14px rgba(120, 130, 150, 0.15);
}
.memory-badge { font-size: 10px; color: #c8a000; margin-top: 3px; padding: 0 4px; }
.memory-badge.memory-badge-forgotten { color: #8a92a3; }
.perf-bar { font-size: 10px; color: var(--muted); margin-top: 4px; padding: 0 4px; opacity: 0.7; }

/* ── Desk drawers (slide in from LEFT over the workspace) ── */
.desk-drawer-overlay {
  display: none; position: absolute; inset: 0; background: rgba(0,0,0,.4);
  z-index: 100;
}
.desk-drawer-overlay.open { display: block; }

.desk-drawer {
  position: absolute; top: 0; left: 0; width: var(--drawer-w);
  max-width: calc(100% - 16px);
  height: 100%; background: var(--bg2);
  border-right: 1px solid var(--border);
  /* Closed panels sit offscreen; their stacked shadows must not shade chat. */
  box-shadow: none;
  display: flex; flex-direction: column;
  transform: translateX(-100%);
  transition: transform .25s cubic-bezier(.4,0,.2,1); z-index: 101;
  overflow: hidden;
}
.desk-drawer.open {
  transform: translateX(0);
  box-shadow: 4px 0 24px rgba(0,0,0,.3);
}
.desk-drawer--wide { width: min(80vw, 1100px); }
.desk-drawer-hdr {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.desk-drawer-hdr .drawer-icon { font-size: 18px; }
.desk-drawer-hdr .drawer-label { font-size: 15px; font-weight: 600; color: var(--text); flex: 1; }
.btn-drawer-x {
  background: none; border: none; color: var(--muted);
  font-size: 18px; cursor: pointer; padding: 4px 8px; line-height: 1;
  transition: color .15s;
}
.btn-drawer-x:hover { color: var(--text); }
.desk-drawer-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px 16px; min-width: 0; }

/* ── Drawer: Agents ── */
.agent-list-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  cursor: pointer; transition: background .1s;
  position: relative;
}
.agent-list-item:hover { background: var(--bg3); }
.agent-list-item.active { background: rgba(74,158,255,.12); }
.agent-list-item .ag-emoji { font-size: 22px; }
.agent-list-item .ag-info { flex: 1; min-width: 0; }
.agent-list-item .ag-name { font-weight: 600; font-size: 14px; }
.agent-list-item .ag-model { font-size: 11px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-list-item .ag-del,
.agent-list-item .ag-edit {
  background: none; border: none; color: var(--muted);
  font-size: 14px; cursor: pointer; padding: 4px 6px;
  opacity: 0; transition: opacity .1s, color .1s;
}
.agent-list-item:hover .ag-del,
.agent-list-item:hover .ag-edit { opacity: 1; }
.agent-list-item .ag-del:hover { color: var(--red); }
.agent-list-item .ag-edit:hover { color: var(--accent); }
.btn-new-agent-strip {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 10px 12px; margin-top: 8px;
  background: none; border: 1px dashed var(--border); color: var(--muted);
  border-radius: 8px; cursor: pointer; font-size: 13px; transition: all .15s;
}
.btn-new-agent-strip:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.btn-new-agent-strip:disabled { opacity: .45; cursor: not-allowed; }

/* ── Drawer: Markets ── */
.market-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-radius: 8px; background: var(--bg3);
  margin-bottom: 6px; gap: 8px;
}
.market-row:hover .market-del { opacity: 1; }
.market-del { background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 14px; padding: 0 4px; opacity: 0; transition: opacity .15s; line-height: 1; }
.market-del:hover { color: var(--red); }
.market-name { font-weight: 600; font-size: 13px; }
.market-sym { font-size: 11px; color: var(--muted); margin-top: 1px; }
.market-price { font-size: 14px; font-weight: 700; color: var(--text); }
.market-change { font-size: 12px; font-weight: 600; margin-top: 2px; text-align: right; }
.market-change.up { color: var(--green); }
.market-change.down { color: var(--red); }
.markets-section-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); padding: 12px 0 6px; }
.markets-add-row {
  display: flex; gap: 6px; margin-top: 16px; border-top: 1px solid var(--border); padding-top: 14px;
}
.markets-add-input {
  flex: 1; background: var(--bg3); border: 1px solid var(--border); color: var(--text);
  border-radius: 6px; padding: 7px 10px; font-size: 13px; font-family: inherit;
}
.markets-add-input:focus { outline: none; border-color: var(--accent); }
.markets-add-select {
  background: var(--bg3); border: 1px solid var(--border); color: var(--text);
  border-radius: 6px; padding: 7px 8px; font-size: 13px; cursor: pointer;
}
.markets-add-btn {
  background: var(--accent); border: none; color: #fff; padding: 7px 12px;
  border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600;
}
.btn-refresh-markets {
  background: none; border: 1px solid var(--border); color: var(--muted);
  padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 12px;
  transition: all .15s; margin-top: 10px; width: 100%;
}
.btn-refresh-markets:hover { border-color: var(--accent); color: var(--accent); }

/* ── Tasks inside drawer ── */
.task-list { display: flex; flex-direction: column; gap: 8px; }
.task-tabs { display: flex; gap: 4px; padding: 4px; background: var(--bg3); border: 1px solid var(--border); border-radius: 9px; }
.task-tab { flex: 1; min-width: 0; padding: 8px 6px; border: 0; border-radius: 6px; background: none; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.task-tab.active { background: var(--accent); color: #fff; }
.task-tab:focus-visible, .task-ledger-entry > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.task-view { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.task-view[hidden], .task-form[hidden] { display: none; }
.task-ledger-intro, .task-ledger-empty { margin: 4px 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.task-ledger-controls { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.task-ledger-controls label { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.task-ledger-controls select { background: var(--bg3); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 6px; font: inherit; }
.task-ledger-entry { background: var(--bg3); border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.task-ledger-entry > summary { padding: 12px; cursor: pointer; list-style: none; }
.task-ledger-entry > summary::-webkit-details-marker { display: none; }
.task-ledger-entry[open] { border-color: var(--accent); }
.task-ledger-heading { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.task-ledger-name { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.task-ledger-name::before { content: '▸'; margin-right: 6px; color: var(--muted); }
.task-ledger-entry[open] .task-ledger-name::before { content: '▾'; }
.task-run-status { font-size: 10px; font-weight: 600; border: 1px solid currentColor; border-radius: 12px; padding: 2px 7px; white-space: nowrap; color: var(--muted); }
.task-run-status-ok { color: var(--green); }
.task-run-status-running { color: var(--accent); }
.task-run-status-error, .task-run-status-interrupted, .task-run-status-warning { color: var(--red); }
.task-ledger-meta, .task-ledger-retention { font-size: 11px; color: var(--muted); line-height: 1.5; margin: 5px 0 0; overflow-wrap: anywhere; }
.task-ledger-preview { font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.task-ledger-entry[open] .task-ledger-preview { display: none; }
.task-ledger-result { border-top: 1px solid var(--border); padding: 12px; }
.task-ledger-result pre { margin: 4px 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 13px; line-height: 1.6; }
.task-run-error { color: var(--red); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; margin: 4px 0; }
.task-item { display: flex; align-items: center; gap: 10px; background: var(--bg3);
  border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.task-item-open { border-color: var(--accent); border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 1px solid var(--border); }
.task-edit-panel { display: flex; flex-direction: column; gap: 8px; background: var(--bg3); border: 1px solid var(--accent); border-top: none; border-radius: 0 0 8px 8px; padding: 10px 12px 12px; margin-top: -8px; margin-bottom: 0; }
.task-edit-panel label { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
.task-edit-panel input, .task-edit-panel select, .task-edit-panel textarea {
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  border-radius: 6px; padding: 7px 9px; font-size: 13px; font-family: inherit; }
.task-edit-panel textarea { resize: vertical; min-height: 60px; }
.task-edit-meta { font-size: 11px; color: var(--muted); padding: 4px 0; border-top: 1px dashed var(--border); }
.task-edit-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.btn-task-save { background: var(--accent); border: none; color: #fff; padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600; }
.btn-task-run { background: none; border: 1px solid var(--accent); color: var(--accent); padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.btn-task-run:hover { background: var(--accent); color: #fff; }
.btn-task-run:disabled { opacity: .6; cursor: default; }
.btn-task-cancel { background: none; border: 1px solid var(--border); color: var(--muted); padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 12px; }
.task-item-info { flex: 1; min-width: 0; }
.task-item-label { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-item-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.task-toggle { appearance: none; width: 36px; height: 20px; background: var(--border);
  border-radius: 10px; cursor: pointer; position: relative; flex-shrink: 0; transition: background .2s; }
.task-toggle:checked { background: var(--accent); }
.task-toggle::after { content: ''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px;
  background: #fff; border-radius: 50%; transition: left .2s; }
.task-toggle:checked::after { left: 18px; }
.btn-task-del { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 18px; padding: 4px 8px; }
.task-form { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--border); padding-top: 14px; margin-top: 12px; }
.task-form label { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
.task-form input, .task-form select, .task-form textarea {
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  border-radius: 6px; padding: 9px 10px; font-size: 14px; font-family: inherit; }
.task-form textarea { resize: vertical; min-height: 120px; max-height: none; }
.task-form-row { display: flex; gap: 8px; flex-wrap: wrap; }
.task-form-row label { flex: 1; min-width: 100px; }
.btn-add-task { background: var(--accent); border: none; color: #fff; padding: 10px 18px;
  border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600; align-self: flex-end; }

/* ── Settings section headers in drawer ── */
.settings-section {
  border-top: 1px solid var(--border); margin-top: 16px; padding-top: 16px;
}
.settings-section-title {
  font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
}
.settings-section-desc {
  font-size: 11px; color: var(--muted); margin-bottom: 10px;
}

/* ── Settings tabs & models ── */
.model-list-scroll { overflow-y: auto; max-height: 200px; border: 1px solid var(--border); border-radius: 8px; }
.model-provider-label { font-size: 10px; text-transform: uppercase; color: var(--muted);
  letter-spacing: .08em; padding: 6px 8px 2px; }
.model-option { display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  border-radius: 6px; font-size: 13px; }
.provider-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.dot-ollama, .dot-ollama-local { background: #4caf50; }
.dot-lmstudio  { background: #ff9800; }
.dot-anthropic { background: #7c6af7; }
.dot-grok      { background: #00b4d8; }
.settings-tabs { display: flex; flex-wrap: wrap; gap: 3px; padding: 8px 12px;
  border-bottom: 1px solid var(--border); flex-shrink: 0; background: var(--bg2); }
.stab-btn { background: none; border: none; color: var(--muted); font-size: 12px;
  padding: 5px 10px; border-radius: 6px; cursor: pointer; font-weight: 500; transition: all .15s; }
.stab-btn:hover { background: var(--bg3); color: var(--text); }
.stab-btn.active { background: var(--accent); color: #fff; }
.stab-panel { display: none; flex: 1; overflow-y: auto; padding: 14px 16px; flex-direction: column; min-height: 0; -webkit-overflow-scrolling: touch; }
.stab-panel.active { display: flex; }
#drawerSettings .desk-drawer-body { padding: 0; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.agent-model-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; flex-wrap: wrap; }
.agent-model-row .agent-name { font-weight: 600; font-size: 13px; min-width: 80px; }
.agent-model-row .agent-role { font-size: 10px; color: var(--muted); font-weight: 500; margin-top: 1px; }
.agent-model-row select { flex: 1; min-width: 140px; background: var(--bg2); border: 1px solid var(--border);
  color: var(--text); border-radius: 6px; padding: 7px 8px; font-size: 13px; }
.agent-model-row .agent-model-info { font-size: 11px; color: var(--muted); }
.models-refresh { background: none; border: 1px solid var(--border); color: var(--muted);
  padding: 5px 10px; border-radius: 6px; cursor: pointer; font-size: 12px; }
.models-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }

/* ── Shared drawer dashboard styles ── */
.drawer-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0; gap: 6px;
}
.drawer-toolbar-topics { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.topic-btn {
  background: var(--bg3); border: 1px solid var(--border); color: var(--muted);
  padding: 3px 9px; border-radius: 12px; cursor: pointer; font-size: 11px;
  transition: all .15s; white-space: nowrap;
}
.topic-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.drawer-refresh { background: none; border: 1px solid var(--border); color: var(--muted);
  padding: 3px 8px; border-radius: 6px; cursor: pointer; font-size: 12px; flex-shrink: 0; }
.drawer-refresh:hover { border-color: var(--accent); color: var(--accent); }
.drawer-cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; background: var(--border); }
.drawer-cards-single { display: flex; flex-direction: column; gap: 0; }

/* ── Run Inspector ──────────────────────────────────────────────────────── */
.run-inspector {
  display: grid;
  grid-template-columns: minmax(260px, 34%) minmax(0, 1fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.run-inspector-list {
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 10px;
  background: var(--bg2);
}
.run-row {
  width: 100%;
  text-align: left;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 8px;
  cursor: pointer;
}
.run-row:hover,
.run-row.active {
  border-color: var(--accent);
}
.run-row-top,
.run-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.run-status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.run-status.ok { background: rgba(67,184,156,.16); color: var(--green,#43b89c); }
.run-status.error { background: rgba(224,92,92,.16); color: var(--red,#e05c5c); }
.run-time,
.run-model,
.run-preview,
.run-tools,
.run-detail-sub,
.run-muted {
  color: var(--muted);
  font-size: 11px;
}
.run-agent {
  font-size: 13px;
  font-weight: 700;
  margin-top: 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.run-model {
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.run-preview {
  margin-top: 8px;
  line-height: 1.35;
}
.run-tools {
  margin-top: 7px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.run-inspector-detail {
  overflow-y: auto;
  padding: 16px;
  min-width: 0;
}
.run-detail-title {
  font-size: 18px;
  font-weight: 750;
  color: var(--text);
}
.run-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 8px;
  margin: 14px 0;
}
.run-metric {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 10px;
  min-width: 0;
}
.run-metric span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.run-metric b {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.run-section,
.run-tool {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  margin-top: 10px;
  min-width: 0;
}
.run-section-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.run-section-title,
.run-tool-label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 7px;
}
.run-section pre,
.run-tool pre {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text);
}
.run-tool summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}
.run-tool-label {
  margin-top: 10px;
}
.run-error {
  background: rgba(224,92,92,.12);
  border: 1px solid rgba(224,92,92,.35);
  color: var(--red,#e05c5c);
  border-radius: 8px;
  padding: 9px 10px;
  font-size: 12px;
}
.run-memory-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.run-memory-hit {
  display: grid;
  grid-template-columns: minmax(160px, 32%) minmax(0, 1fr);
  gap: 8px;
  border-top: 1px solid var(--border);
  padding-top: 7px;
  font-size: 11px;
}
.run-memory-hit:first-child {
  border-top: none;
  padding-top: 0;
}
.run-memory-hit code {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.run-memory-hit span {
  color: var(--text);
  overflow-wrap: anywhere;
}

/* ── Skill Permissions ──────────────────────────────────────────────────── */
.skill-permissions {
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.perm-toolbar {
  border-bottom: 1px solid var(--border);
  padding: 10px 12px;
  background: var(--bg2);
  flex-shrink: 0;
}
.perm-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 8px;
}
.perm-summary b {
  color: var(--text);
  font-size: 16px;
}
.perm-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.perm-filter {
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--muted);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11px;
  cursor: pointer;
}
.perm-filter.active,
.perm-filter:hover {
  border-color: var(--accent);
  color: var(--text);
}
.perm-list {
  overflow-y: auto;
  padding: 12px;
}
.perm-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 10px;
}
.perm-card[open] {
  border-color: rgba(94,160,255,.5);
}
.perm-card summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 12px;
  cursor: pointer;
  list-style: none;
}
.perm-card summary::-webkit-details-marker { display: none; }
.perm-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 750;
  color: var(--text);
}
.perm-card-desc {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.perm-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.perm-card-meta span,
.perm-enabled,
.perm-disabled,
.perm-flag,
.perm-risk {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 650;
}
.perm-card-meta span,
.perm-flag {
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--muted);
}
.perm-card-flags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-content: flex-start;
  gap: 5px;
  max-width: 280px;
}
.perm-enabled { background: rgba(67,184,156,.16); color: var(--green,#43b89c); }
.perm-disabled { background: var(--bg2); color: var(--muted); }
.perm-risk.high { background: rgba(224,92,92,.16); color: var(--red,#e05c5c); }
.perm-risk.medium { background: rgba(249,199,79,.16); color: #f0b84d; }
.perm-risk.low { background: rgba(67,184,156,.16); color: var(--green,#43b89c); }
.perm-detail {
  border-top: 1px solid var(--border);
  padding: 12px;
}
.perm-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.perm-detail-grid > div {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  min-width: 0;
}
.perm-detail-grid span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.perm-detail-grid b {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.perm-tools-wrap {
  overflow-x: auto;
}
.perm-tools {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.perm-tools th,
.perm-tools td {
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--border);
  padding: 8px 6px;
}
.perm-tools th {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.perm-tools code {
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ── Memory Control ─────────────────────────────────────────────────────── */
.memory-control {
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mem-toolbar {
  border-bottom: 1px solid var(--border);
  padding: 10px 12px;
  background: var(--bg2);
  flex-shrink: 0;
}
.mem-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 8px;
}
.mem-summary b {
  color: var(--text);
  font-size: 16px;
}
.mem-search {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 9px 10px;
  font-size: 13px;
  margin-bottom: 8px;
}
.mem-search:focus {
  outline: none;
  border-color: var(--accent);
}
.mem-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mem-filter {
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--muted);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11px;
  cursor: pointer;
}
.mem-filter.active,
.mem-filter:hover {
  border-color: var(--accent);
  color: var(--text);
}
.mem-list {
  overflow-y: auto;
  padding: 12px;
}
.mem-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 10px;
}
.mem-card[open] {
  border-color: rgba(94,160,255,.5);
}
.mem-card summary {
  padding: 12px;
  cursor: pointer;
  list-style: none;
}
.mem-card summary::-webkit-details-marker { display: none; }
.mem-card-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
}
.mem-kind,
.mem-pin,
.mem-scope,
.mem-date,
.mem-meta span {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 650;
}
.mem-kind { background: rgba(94,160,255,.14); color: var(--accent); }
.mem-pin { background: rgba(67,184,156,.16); color: var(--green,#43b89c); }
.mem-scope,
.mem-date,
.mem-meta span {
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--muted);
}
.mem-text {
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.mem-detail {
  border-top: 1px solid var(--border);
  padding: 12px;
}
.mem-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.mem-metrics > div {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  min-width: 0;
}
.mem-metrics span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.mem-metrics b {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mem-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.mem-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.mem-actions button {
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 7px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
}
.mem-actions button:hover {
  border-color: var(--accent);
}
.mem-actions button.danger {
  color: var(--red,#e05c5c);
}

/* Provider cards & toggle */
.provider-card {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 14px;
}
.provider-card.disabled { opacity: 0.5; }
.provider-card.disabled > div:not(:first-child) { display: none; }
.provider-toggle {
  position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0;
}
.provider-toggle input { opacity: 0; width: 0; height: 0; }
.provider-toggle-slider {
  position: absolute; cursor: pointer; inset: 0; background: var(--border); border-radius: 20px; transition: .2s;
}
.provider-toggle-slider::before {
  content: ""; position: absolute; height: 14px; width: 14px; left: 3px; bottom: 3px;
  background: var(--text); border-radius: 50%; transition: .2s;
}
.provider-toggle input:checked + .provider-toggle-slider { background: var(--accent); }
.provider-toggle input:checked + .provider-toggle-slider::before { transform: translateX(16px); background: #fff; }

/* ── Today · Tutor drawer ────────────────────────────────────────────────── */
.tutor-today { padding: 12px 14px 20px; }
.tutor-today-empty { text-align: center; padding: 40px 20px; color: var(--text); }
.tutor-today-cta {
  display: block; width: 100%; margin: 12px 0 0;
  background: var(--accent); color: #fff; border: none; border-radius: 10px;
  padding: 12px 16px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.tutor-today-link { background: transparent; border: none; color: var(--accent); font-size: 13px; padding: 6px 10px; cursor: pointer; }

.tutor-today-hero {
  display: grid; grid-template-columns: 140px 1fr; gap: 12px; align-items: center;
  background: var(--bg3); border-radius: 12px; padding: 14px;
}
.tutor-hero-streak { text-align: center; }
.tutor-flame { font-size: 44px; line-height: 1; opacity: 0.4; }
.tutor-flame.on { opacity: 1; filter: drop-shadow(0 0 8px rgba(249, 199, 79, 0.6)); }
.tutor-streak-num { font-size: 30px; font-weight: 700; color: var(--text); }
.tutor-streak-sub { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
.tutor-streak-longest { font-size: 11px; color: var(--muted); margin-top: 4px; }

.tutor-level { font-weight: 700; font-size: 16px; color: var(--text); margin-bottom: 6px; }
.tutor-xp-bar { background: var(--bg2); height: 10px; border-radius: 5px; overflow: hidden; margin-bottom: 4px; }
.tutor-xp-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #43b89c); transition: width 0.4s; }
.tutor-xp-label { font-size: 11px; color: var(--muted); }

.tutor-today-section { margin-top: 18px; }
.tutor-section-hdr { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin-bottom: 8px; }

.tutor-week-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.tutor-week-progress { flex: 1; }
.tutor-mastery-bar { background: var(--bg2); height: 8px; border-radius: 4px; overflow: hidden; }
.tutor-mastery-fill { height: 100%; background: var(--accent); }
.tutor-week-label { font-size: 11px; color: var(--muted); margin-top: 4px; }
.tutor-today-min { font-size: 13px; color: var(--text); }

.tutor-heat-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 6px; }
.tutor-heat-cell {
  background: var(--bg2); border-radius: 6px; aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--muted); border: 1px solid transparent;
}
.tutor-heat-cell.warm { background: color-mix(in srgb, #f9c74f 25%, var(--bg2)); color: var(--text); }
.tutor-heat-cell.hot  { background: color-mix(in srgb, #f9c74f 55%, var(--bg2)); color: #000; font-weight: 700; border-color: #f9c74f; }

.tutor-due-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.tutor-due-list li {
  display: flex; align-items: center; gap: 8px; background: var(--bg3); border-radius: 8px; padding: 8px 10px;
}
.tutor-due-text { flex: 1; font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tutor-due-start {
  background: var(--accent); color: #fff; border: none; border-radius: 6px;
  padding: 5px 10px; font-size: 11px; cursor: pointer;
}

.tutor-subject-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.tutor-subject-card {
  background: var(--bg3); border-radius: 10px; padding: 10px 12px;
}
.tutor-subject-name { font-size: 13px; font-weight: 600; color: var(--text); text-transform: capitalize; }
.tutor-subject-band { font-size: 10px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 2px; }
.tutor-subject-meta { font-size: 11px; color: var(--muted); margin-top: 6px; }

.tutor-ach-shelf { display: flex; flex-wrap: wrap; gap: 6px; }
.tutor-ach-chip {
  background: var(--bg3); border-radius: 16px; padding: 4px 10px; font-size: 12px; color: var(--text); border: 1px solid var(--border);
}

.tutor-today-actions { display: flex; gap: 8px; margin-top: 20px; }
.tutor-prefs-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.tutor-prefs-row select, .tutor-prefs-row input[type="time"] { background: var(--bg3); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; }

/* ── Personalization ────────────────────────────────────────────────────── */
.pz-hint { font-size: 11px; color: var(--muted); margin-top: 6px; line-height: 1.4; min-height: 14px; overflow-wrap: anywhere; }
.pz-settings-hint {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 11px; color: var(--muted); line-height: 1.45;
  margin: 12px 0 0; padding: 10px 11px;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
  overflow-wrap: anywhere; position: relative; z-index: 0;
}
.pz-settings-hint + .pz-section-heading,
.pz-settings-hint + .settings-section-title { clear: both; position: relative; z-index: 0; }
.pz-notice { font-size: 11px; color: #f0b84d; background: rgba(249,199,79,.12); border: 1px solid rgba(249,199,79,.3);
  border-radius: 6px; padding: 6px 9px; margin-top: 6px; line-height: 1.4; }
.pz-health { margin-top: 12px; padding: 10px 11px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg2); font-size: 11px; line-height: 1.4; }
.pz-health-paused, .pz-health-model_unavailable { border-color: rgba(249,199,79,.38); background: rgba(249,199,79,.09); }
.pz-health-healthy { border-color: rgba(67,184,156,.32); background: rgba(67,184,156,.07); }
.pz-health-title { color: var(--text); font-weight: 650; }
.pz-health-detail, .pz-health-note { color: var(--muted); margin-top: 3px; }
.pz-health-times { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); margin-top: 6px; }
.pz-list { display: flex; flex-direction: column; gap: 8px; }
.pz-empty { font-size: 12px; color: var(--muted); background: var(--bg3); border: 1px dashed var(--border);
  border-radius: 8px; padding: 14px; text-align: center; }
.pz-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.pz-row-main { flex: 1; min-width: 0; }
.pz-row-text { font-size: 13px; color: var(--text); line-height: 1.4; overflow-wrap: anywhere; }
.pz-row-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pz-row-actions { display: flex; gap: 6px; flex-shrink: 0; }
.pz-chip { display: inline-flex; align-items: center; border-radius: 999px; padding: 2px 8px;
  font-size: 10px; font-weight: 650; background: var(--bg2); border: 1px solid var(--border); color: var(--muted); }
.pz-chip-inferred { background: rgba(94,160,255,.14); color: var(--accent); border-color: transparent; }
.pz-chip-confirmed { background: rgba(67,184,156,.16); color: var(--green,#43b89c); border-color: transparent; }
.pz-chip-flag { background: rgba(224,92,92,.16); color: var(--red,#e05c5c); border-color: transparent; }
.pz-btn { background: var(--bg2); border: 1px solid var(--border); color: var(--text); border-radius: 7px;
  padding: 6px 12px; font-size: 12px; cursor: pointer; white-space: nowrap; }
.pz-btn:hover { border-color: var(--accent); }
.pz-btn-small { padding: 4px 9px; font-size: 11px; }
.pz-btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.pz-btn-accent:hover { opacity: .9; }
.pz-btn-danger { color: var(--red,#e05c5c); }
.pz-btn-danger:hover { border-color: var(--red,#e05c5c); }
.pz-btn:disabled { opacity: .55; cursor: wait; }
.pz-select { width: 100%; background: var(--bg3); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 8px 10px; font-size: 12px; box-sizing: border-box; }
.pz-select:disabled, .pz-control-row input:disabled, .pz-quiet-row input:disabled { opacity: .55; cursor: wait; }
.pz-section-gap { margin-top: 16px; margin-bottom: 6px; }
.pz-section-heading { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 18px; margin-bottom: 8px; }
.pz-heading-actions { display: flex; align-items: center; justify-content: space-between; }
.pz-link-btn { border: 0; background: transparent; color: var(--accent); font-size: 11px; cursor: pointer; padding: 2px 0; }
.pz-controls { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.pz-control-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 11px; background: var(--bg3); border-bottom: 1px solid var(--border); font-size: 12px; }
.pz-control-row:last-child { border-bottom: 0; }
.pz-control-row span { display: flex; flex-direction: column; gap: 2px; }
.pz-control-row small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.pz-control-row input { accent-color: var(--accent); width: 16px; height: 16px; flex: 0 0 auto; }
/* 2×2 so Delivery is not a lonely third-row cell under a 3-col grid (that
 * layout made the following Quiet hours block appear to collide with the
 * engagement/safe-initiative controls and their help text). */
.pz-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 12px; margin-top: 12px; margin-bottom: 0; }
.pz-settings-grid label { color: var(--muted); font-size: 10px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pz-quiet-row { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; }
.pz-quiet-row input { background: var(--bg3); border: 1px solid var(--border); color: var(--text); border-radius: 7px; padding: 6px; }
.pz-row-detail { color: var(--muted); font-size: 11px; line-height: 1.4; margin-top: 3px; overflow-wrap: anywhere; }
.pz-row-why { color: var(--muted); font-size: 10px; line-height: 1.4; margin-top: 6px; overflow-wrap: anywhere; }
.pz-row-unread { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.pz-history { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.pz-history-row { padding: 8px 11px; background: var(--bg3); border-bottom: 1px solid var(--border); font-size: 12px; line-height: 1.35; }
.pz-history-row:last-child { border-bottom: 0; }
.pz-history-meta { color: var(--muted); font-size: 10px; margin-top: 2px; }
.pz-section-error { color: var(--red,#e05c5c); }
.pz-section-error .pz-link-btn { margin-left: 5px; }
.pz-setup { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.pz-setup h3 { margin: 2px 0 6px; font-size: 17px; }
.pz-setup p { color: var(--muted); font-size: 12px; line-height: 1.55; margin: 0 0 16px; }
.pz-setup-kicker { color: var(--accent); text-transform: uppercase; letter-spacing: .08em; font-size: 10px; font-weight: 700; }
.pz-setup-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

/* Personalization profile inside the Learn drawer */
.learn-about-intro { color: var(--muted); font-size: 11px; line-height: 1.45; padding: 2px 12px 10px; }
.learn-fact-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--border); font-size: 12px; }
.learn-fact-row-flagged { background: rgba(200,128,0,.06); }
.learn-fact-main { flex: 1; min-width: 0; }
.learn-fact-statement { line-height: 1.45; overflow-wrap: anywhere; }
.learn-fact-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 5px; }
.learn-fact-chip { border: 1px solid var(--border); background: var(--bg1); color: var(--muted); border-radius: 999px; padding: 1px 6px; font-size: 9px; }
.learn-fact-confirmed { background: rgba(58,170,119,.16); color: var(--green,#3a7); border-color: transparent; }
.learn-fact-flag { background: rgba(200,128,0,.16); color: var(--orange,#c80); border-color: transparent; }
.learn-fact-date { color: var(--muted); font-size: 10px; margin-left: 2px; }
.learn-fact-conflict { margin-top: 6px; padding: 7px 8px; border-left: 2px solid var(--orange,#c80);
  background: rgba(200,128,0,.08); color: var(--text); font-size: 10px; line-height: 1.4; }
.learn-fact-conflict small { color: var(--muted); }
.learn-fact-actions { display: flex; align-items: flex-start; gap: 5px; flex-shrink: 0; }
.learn-fact-actions > button, .learn-fact-more > summary { background: transparent; border: 1px solid var(--border); border-radius: 5px; padding: 3px 7px; color: var(--muted); font-size: 10px; cursor: pointer; list-style: none; }
.learn-fact-more { position: relative; }
.learn-fact-more > summary::-webkit-details-marker { display: none; }
.learn-fact-more > div { position: absolute; z-index: 30; right: 0; top: calc(100% + 3px); min-width: 120px; padding: 4px; background: var(--bg2); border: 1px solid var(--border); border-radius: 7px; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.learn-fact-more button { display: block; width: 100%; text-align: left; border: 0; background: transparent; color: var(--text); padding: 6px 8px; border-radius: 4px; font-size: 11px; cursor: pointer; }
.learn-fact-more button:hover { background: var(--bg3); }
.learn-why { margin-top: 6px; color: var(--muted); font-size: 10px; }
.learn-why > summary { cursor: pointer; color: var(--accent); }
.learn-evidence-item { margin-top: 5px; padding: 6px 8px; border-left: 2px solid var(--border); background: var(--bg1); line-height: 1.4; }
.learn-evidence-item small { display: block; color: var(--muted); margin-top: 2px; }
@media (max-width: 700px) {
  .pz-settings-grid { grid-template-columns: 1fr; }
  .pz-row, .learn-fact-row { flex-direction: column; }
  .pz-row-actions, .learn-fact-actions { width: 100%; flex-wrap: wrap; }
}

/* ── New Agent modal ── */
.modal-backdrop { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  z-index: 1200; align-items: center; justify-content: center;
  padding: 16px 16px 16px calc(var(--strip-w) + 16px); box-sizing: border-box; }
.modal-backdrop.open { display: flex; }
.modal { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; width: 520px; max-width: 100%; max-height: 85dvh;
  display: flex; flex-direction: column; gap: 16px; overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,.4); }
.modal h2 { font-size: 16px; color: var(--text); flex-shrink: 0; }
.modal-footer { display: flex; justify-content: flex-end; flex-shrink: 0; }
.btn-modal-close { background: none; border: 1px solid var(--border); color: var(--muted);
  padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 13px; }

.agent-form { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.agent-form label { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.agent-form input, .agent-form select, .agent-form textarea {
  background: var(--bg3); border: 1px solid var(--border); color: var(--text);
  border-radius: 6px; padding: 9px 10px; font-size: 14px; font-family: inherit;
  width: 100%; min-width: 0; box-sizing: border-box; }
.agent-form textarea { resize: vertical; min-height: 90px; }
.agent-form-row { display: flex; gap: 8px; min-width: 0; }
.agent-form-row label { flex: 1; min-width: 0; }
.btn-create-agent { background: var(--accent); border: none; color: #fff; padding: 10px 20px;
  border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600; align-self: flex-end;
  display: inline-flex; align-items: center; gap: 6px;
  transition: transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s cubic-bezier(.4,0,.2,1); }
.btn-create-agent:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(91,141,239,.25); }
.emoji-picker { display: none; flex-wrap: wrap; gap: 6px; max-height: 120px; overflow-y: auto;
  background: var(--bg3); border: 1px solid var(--border); border-radius: 6px; padding: 8px; }
.emoji-picker.open { display: flex; }
.emoji-opt { font-size: 20px; cursor: pointer; padding: 2px 4px; border-radius: 4px; transition: background .1s; }
.emoji-opt:hover, .emoji-opt.selected { background: var(--accent); }

/* ── Agent report card ───────────────────────────────────────────────────── */
.agent-report {
  margin: 8px 16px;
  border-left: 3px solid var(--accent, #89b4fa);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(137,180,250,0.06);
}
.agent-report-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 12px;
  font-size: 12px; font-weight: 600;
  background: rgba(137,180,250,0.1);
}
.agent-report-time { color: var(--muted); font-weight: 400; }
/* Cap the report bubble height so a long specialist reply (e.g. "top 3
   videos from N watchers") doesn't push the rest of the chat off-screen.
   Use dvh on small screens so address-bar resize doesn't clip the bubble.
   The scroll lives inside the bubble — the page scroll still works for the
   conversation around it. */
.agent-report-body {
  border-radius: 0 0 8px 8px;
  margin: 0;
  border: none;
  max-height: min(60vh, 60dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ── Collapsible <details> chevron ───────────────────────────────────────── */
details > summary::-webkit-details-marker { display: none; }
details[open] > summary .details-chevron { transform: rotate(90deg); }

/* ── Settings collapsible group ──────────────────────────────────────────── */
.settings-group > .settings-group-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
  border-radius: 6px;
  transition: background .12s;
}
.settings-group > .settings-group-summary:hover { background: var(--bg3); }
.settings-group-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.settings-group-hint {
  font-size: 11px;
  color: var(--muted);
  margin-left: auto;
  font-weight: 400;
}
.settings-group-body {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--bg2, rgba(255,255,255,0.02));
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.settings-subsection + .settings-subsection {
  border-top: 1px dashed var(--border);
  padding-top: 14px;
}
.settings-subsection-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.settings-subsection-title i { color: var(--muted); }

/* Hover effects previously implemented as inline onmouseover/onmouseout. */
.role-delete-btn:hover { color: var(--red, #e05c5c) !important; }
.new-role-btn:hover { border-color: var(--accent) !important; color: var(--accent) !important; }

/* ── Per-role / per-skill model execution settings ─────────────────────── */
.skill-settings-card {
  background: var(--bg3);
  border-radius: 8px;
  padding: 10px 12px;
}
.skill-settings-card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.skill-execution-settings {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.skill-execution-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  cursor: pointer;
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  user-select: none;
}
.skill-execution-summary::before {
  content: '›';
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  transition: transform .12s ease;
}
.skill-execution-settings[open] > .skill-execution-summary::before { transform: rotate(90deg); }
.skill-execution-current {
  margin-left: auto;
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-weight: 400;
}
.skill-execution-body { padding: 9px 0 1px 24px; }
.skill-execution-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}
.skill-execution-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
}
.skill-execution-grid select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background: var(--bg2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 7px;
  font-size: 11px;
}
.skill-execution-grid select:disabled { opacity: .65; cursor: wait; }
.skill-execution-hint {
  margin-top: 7px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}
.skill-execution-status {
  min-height: 14px;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}
.skill-execution-status[data-state="saved"] { color: #43b89c; }
.skill-execution-status[data-state="error"] { color: var(--red, #e05c5c); }

@media (max-width: 520px) {
  .skill-execution-grid { grid-template-columns: 1fr; }
  .skill-execution-body { padding-left: 16px; }
  .skill-execution-current { max-width: 60%; }
}

/* Generic hover utility classes (replace inline onmouseover/onmouseout). */
.hover-red:hover { color: var(--red, #e05c5c) !important; }
.hover-border-accent:hover { border-color: var(--accent) !important; }

/* ── Document review workspace ───────────────────────────────────────────── */
.doc-workspace-backdrop {
  display: none; position: fixed; inset: 0; z-index: 1300; align-items: center; justify-content: center;
  padding: 18px 18px 18px calc(var(--strip-w) + 18px); box-sizing: border-box;
  background: rgba(0,0,0,.78); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.doc-workspace-shell {
  width: min(1420px, 100%); height: min(94dvh, 980px); min-height: 520px;
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg2);
  box-shadow: 0 24px 70px rgba(0,0,0,.46);
}
.doc-workspace-header {
  display: flex; align-items: center; gap: 8px; min-height: 54px; padding: 8px 12px;
  border-bottom: 1px solid var(--border); background: var(--bg2); flex: 0 0 auto;
}
.doc-workspace-title-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  color: var(--accent); border: 1px solid var(--border); border-radius: 6px; background: var(--bg3);
}
.doc-workspace-title-icon svg { width: 17px; height: 17px; }
.doc-workspace-title-wrap { display: grid; min-width: 0; flex: 1; gap: 2px; }
.doc-workspace-title { overflow: hidden; color: var(--text); font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.doc-workspace-version { min-height: 13px; color: var(--muted); font-size: 11px; }
.doc-workspace-command, .doc-workspace-icon-btn {
  height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--bg3); color: var(--text);
  font: inherit; font-size: 12px; cursor: pointer; flex: 0 0 auto;
}
.doc-workspace-command { padding: 0 10px; }
.doc-workspace-icon-btn { width: 32px; padding: 0; }
.doc-workspace-command svg, .doc-workspace-icon-btn svg { width: 15px; height: 15px; }
.doc-workspace-command:hover, .doc-workspace-icon-btn:hover,
.doc-workspace-command:focus-visible, .doc-workspace-icon-btn:focus-visible {
  outline: none; border-color: var(--accent); color: var(--accent);
}
.doc-workspace-body { display: grid; grid-template-columns: minmax(0, 1fr) 310px; min-height: 0; flex: 1; }
.doc-workspace-body:not(.has-history), .doc-workspace-body.history-hidden { grid-template-columns: minmax(0, 1fr); }
.doc-workspace-stage { min-width: 0; min-height: 0; overflow: hidden; background: var(--bg1); }
.doc-workspace-content {
  width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: auto; box-sizing: border-box;
  display: flex; align-items: flex-start; justify-content: center; padding: 24px;
}
.doc-current-page, .doc-version-page {
  width: min(820px, 100%); min-height: 100%; box-sizing: border-box; margin: 0 auto;
  padding: clamp(24px, 4vw, 54px); border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg2); color: var(--text); box-shadow: 0 8px 28px rgba(0,0,0,.14);
  font-size: 13px; line-height: 1.65; white-space: pre-wrap; word-break: break-word;
}
.doc-current-page.markdown { display: block; white-space: normal; }
.doc-current-page.markdown > :first-child { margin-top: 0; }
.doc-view-loading { align-self: center; margin: auto; color: var(--muted); font-size: 12px; }
.doc-view-loading.error { color: var(--red); }
.doc-history-rail {
  display: none; min-width: 0; min-height: 0; overflow-y: auto; padding: 0 12px 14px;
  border-left: 1px solid var(--border); background: var(--bg2);
}
.doc-history-heading {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between;
  min-height: 46px; border-bottom: 1px solid var(--border); background: var(--bg2);
  font-size: 12px; font-weight: 700;
}
.doc-history-count { color: var(--muted); font-size: 11px; font-weight: 500; }
.doc-history-row { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; padding: 11px 2px; border-bottom: 1px solid var(--border); }
.doc-history-version { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.doc-history-version.current { color: var(--accent); }
.doc-history-detail { min-width: 0; }
.doc-history-byline { overflow: hidden; color: var(--text); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.doc-history-note { margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.doc-history-source { margin-top: 4px; color: var(--muted); font-size: 10px; text-transform: uppercase; }
.doc-history-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 5px; }
.doc-history-actions button {
  display: inline-flex; align-items: center; gap: 4px; min-height: 27px; padding: 3px 7px;
  border: 1px solid var(--border); border-radius: 5px; background: var(--bg3); color: var(--text);
  font: inherit; font-size: 10px; cursor: pointer;
}
.doc-history-actions button:hover, .doc-history-actions button:focus-visible { outline: none; border-color: var(--accent); color: var(--accent); }
.doc-history-actions button.restore { color: var(--accent); }
.doc-compare-wrap { width: 100%; min-width: 0; }
.doc-compare-banner { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--muted); font-size: 11px; }
.doc-compare-banner strong { color: var(--text); font-size: 12px; }
.doc-compare-banner button { margin-left: auto; border: 1px solid var(--border); border-radius: 5px; background: var(--bg2); color: var(--text); padding: 4px 8px; cursor: pointer; }
.doc-compare-limit { margin-bottom: 8px; color: var(--muted); font-size: 11px; }
.doc-compare-scroll { max-height: calc(94dvh - 185px); overflow: auto; border: 1px solid var(--border); border-radius: 6px; background: var(--bg2); }
.doc-compare-aligned { display: grid; grid-template-columns: repeat(2, minmax(280px, 1fr)); min-width: 560px; }
.doc-compare-pane-header { position: sticky; top: 0; z-index: 1; padding: 9px 11px; border-bottom: 1px solid var(--border); background: var(--bg3); font-size: 11px; font-weight: 700; }
.doc-compare-pane-header:nth-child(2) { border-left: 1px solid var(--border); }
.doc-compare-line { min-height: 19px; padding: 1px 10px; border-bottom: 1px solid color-mix(in srgb, var(--border) 45%, transparent); color: var(--text); font-family: 'Fira Code', monospace; font-size: 11px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.doc-compare-line:nth-child(2n + 4) { border-left: 1px solid var(--border); }
.doc-compare-line.removed { background: rgba(214,74,74,.16); }
.doc-compare-line.added { background: rgba(42,150,93,.18); }
.doc-compare-line.context-gap { color: var(--muted); text-align: center; }
.doc-review-bar { align-items: center; gap: 7px; padding: 8px 12px; border-top: 1px solid var(--accent); background: var(--bg3); flex: 0 0 auto; }
.doc-review-bar > span { min-width: 0; flex: 1; overflow: hidden; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.doc-review-bar button, .doc-ask-send {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 31px;
  border: 1px solid var(--border); border-radius: 5px; background: var(--bg2); color: var(--text);
  padding: 4px 9px; font: inherit; font-size: 11px; cursor: pointer;
}
.doc-review-bar button svg, .doc-ask-send svg { width: 13px; height: 13px; }
.doc-review-bar button.danger { color: var(--red); }
.doc-review-bar button.primary, .doc-ask-send { border-color: var(--accent); background: var(--accent); color: #fff; }
.doc-ask-bar { flex-direction: column; gap: 4px; padding: 8px 12px calc(8px + var(--safe-bot)); border-top: 1px solid var(--border); background: var(--bg2); flex: 0 0 auto; }
.doc-ask-controls { display: flex; gap: 7px; min-width: 0; }
.doc-ask-controls select, .doc-ask-controls input {
  min-width: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--bg3); color: var(--text);
  padding: 7px 9px; font: inherit; font-size: 12px; outline: none;
}
.doc-ask-controls select { width: 150px; }
.doc-ask-controls input { flex: 1; }
.doc-ask-controls select:focus, .doc-ask-controls input:focus { border-color: var(--accent); }
.doc-ask-send:disabled { cursor: not-allowed; opacity: .5; }
#docViewAskStatus { min-height: 13px; color: var(--muted); font-size: 10px; }

/* ── Dashboard (inside drawer) ── */
#drawerDashboard .desk-drawer-body {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px; align-content: start; padding: 16px;
}
#drawerDashboard .desk-drawer-body.dashboard-tool-open {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-content: stretch;
  min-height: 0;
  overflow: hidden;
}
#drawerDashboard .desk-drawer-body.dashboard-tool-open > .dash-tool-shell {
  width: 100%;
  height: auto;
  min-height: 0;
}
.dash-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.dash-card.memory-card { border-color: #4a9eff55; }
.dash-card-title { font-size: 15px; font-weight: 600; }
.dash-card-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.dash-card-badge { font-size: 11px; border-radius: 6px; padding: 2px 8px; background: var(--bg3); color: var(--muted); white-space: nowrap; }
.dash-card-badge.on { background: rgba(76,175,80,.15); color: var(--green); }
.dash-card-output { font-size: 13px; background: var(--bg3); border-radius: 8px; padding: 10px 12px; max-height: 200px; overflow-y: auto; line-height: 1.55; cursor: pointer; transition: max-height .3s; }
.dash-card-output.expanded { max-height: 600px; }
.dash-card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 2px; }
.btn-dash-go { background: none; border: 1px solid var(--border); color: var(--accent); padding: 4px 12px; border-radius: 6px; cursor: pointer; font-size: 12px; }
.btn-dash-go:hover { border-color: var(--accent); }
.btn-dash-close { background: none; border: 1px solid var(--border); color: var(--muted); padding: 5px 12px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.dash-tool-btn {
  margin-top: auto;
  align-self: flex-start;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 7px;
  padding: 7px 12px;
  font-size: 12px;
  cursor: pointer;
}
.dash-tool-btn:hover { border-color: var(--accent); color: var(--accent); }
.dash-tool-shell {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}
.dash-tool-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-shrink: 0;
}
.dash-tool-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 7px;
  padding: 7px 10px;
  font-size: 12px;
  cursor: pointer;
}
.dash-tool-back:hover { border-color: var(--accent); }
.dash-tool-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
}
.dash-tool-panel {
  flex: 1;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg2);
}

/* ── Display dashboard studio ── */
.dash-display-entry {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border-color: rgba(91,141,239,.32);
  background:
    radial-gradient(circle at 92% 0, rgba(91,141,239,.15), transparent 34%),
    linear-gradient(145deg, var(--bg2), rgba(91,141,239,.045));
}
.dash-display-entry-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: #9ab9ff;
  background: rgba(91,141,239,.13);
  border: 1px solid rgba(91,141,239,.24);
}
.dash-display-entry-copy { min-width: 0; }
.dash-display-entry-copy .dash-card-title { font-size: 16px; }
.dash-display-entry-copy .dash-card-meta { max-width: 650px; font-size: 12px; line-height: 1.5; }
.dash-display-entry-actions,
.dash-display-head-actions,
.dash-display-card-actions,
.dash-display-form-footer,
.dash-display-configure-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dash-display-entry-actions .dash-tool-btn { margin-top: 0; }
.dash-ops-loading {
  grid-column: 1 / -1;
  color: var(--muted);
  padding: 10px 4px;
  font-size: 12px;
}
.dash-ops-loading.error {
  color: var(--yellow);
  border: 1px solid rgba(251,191,36,.2);
  background: rgba(251,191,36,.06);
  border-radius: 8px;
  padding: 10px 12px;
}
.dash-display-shell .dash-tool-head { min-width: 0; }
.dash-display-head-actions { margin-left: auto; min-width: 0; }
.dash-display-notice {
  color: var(--muted);
  font-size: 11px;
  max-width: 230px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-display-notice.success { color: var(--green); }
.dash-display-notice.error { color: var(--red); }
.dash-display-studio {
  display: block;
  overflow: auto;
  background: var(--bg);
}
.dash-display-studio.configuring {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.dash-display-loading,
.dash-display-empty {
  min-height: 230px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 9px;
  padding: 30px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}
.dash-display-loading { flex-direction: row; min-height: 160px; }
.dash-display-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  animation: dash-display-spin .8s linear infinite;
}
@keyframes dash-display-spin { to { transform: rotate(360deg); } }
.dash-display-empty-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: var(--accent);
  background: rgba(91,141,239,.1);
}
.dash-display-empty.error .dash-display-empty-icon {
  color: var(--red);
  background: rgba(239,68,68,.1);
}
.dash-display-empty h3 { color: var(--text); font-size: 16px; }
.dash-display-empty p { max-width: 480px; line-height: 1.55; }
.dash-display-library,
.dash-display-create {
  width: 100%;
  min-height: 100%;
  padding: 18px;
}
.dash-display-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 22px;
  margin-bottom: 16px;
  border: 1px solid rgba(91,141,239,.25);
  border-radius: 14px;
  background:
    radial-gradient(circle at 85% 20%, rgba(91,141,239,.18), transparent 34%),
    linear-gradient(135deg, var(--bg2), rgba(91,141,239,.06));
}
.dash-display-eyebrow {
  display: block;
  margin-bottom: 6px;
  color: #8fb2ff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.dash-display-hero h2,
.dash-display-create-head h2 {
  color: var(--text);
  font-size: clamp(19px, 2.5vw, 27px);
  line-height: 1.2;
}
.dash-display-hero p,
.dash-display-create-head p {
  max-width: 660px;
  margin-top: 7px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}
.dash-display-primary,
.dash-display-secondary,
.dash-display-danger,
.dash-display-text-btn,
.dash-display-icon-btn {
  appearance: none;
  border: 1px solid var(--border);
  border-radius: 7px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: border-color .15s, color .15s, background .15s, transform .15s;
}
.dash-display-primary,
.dash-display-secondary,
.dash-display-danger { min-height: 34px; padding: 7px 11px; }
.dash-display-primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}
.dash-display-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.dash-display-primary:disabled { cursor: wait; opacity: .65; transform: none; }
.dash-display-secondary { background: var(--bg3); color: var(--text); }
.dash-display-secondary:hover { border-color: var(--accent); color: #9ab9ff; }
.dash-display-danger { margin-left: auto; color: var(--red); background: transparent; border-color: rgba(239,68,68,.25); }
.dash-display-danger:hover { background: rgba(239,68,68,.08); border-color: var(--red); }
.dash-display-danger:disabled {
  cursor: not-allowed;
  opacity: .42;
  color: var(--muted);
  background: transparent;
  border-color: var(--border);
}
.dash-display-text-btn,
.dash-display-icon-btn { background: none; color: var(--muted); }
.dash-display-text-btn { border-color: transparent; padding: 4px 2px; }
.dash-display-text-btn:hover { color: var(--text); }
.dash-display-icon-btn { width: 32px; height: 32px; padding: 0; flex-shrink: 0; }
.dash-display-icon-btn:hover { color: var(--accent); border-color: var(--accent); }
.dash-display-library-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 2px 9px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.dash-display-list { display: grid; gap: 10px; }
.dash-display-card {
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg2);
  transition: border-color .18s, box-shadow .18s;
}
.dash-display-card:hover {
  border-color: rgba(91,141,239,.34);
  box-shadow: 0 7px 24px rgba(0,0,0,.12);
}
.dash-display-card.is-home { border-color: rgba(52,211,153,.24); }
.dash-display-card-top {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}
.dash-display-theme-swatch {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(145deg, #111a2b, #243353);
  box-shadow: inset 0 0 0 5px rgba(255,255,255,.025);
}
.dash-display-theme-swatch.sand { background: linear-gradient(145deg, #f3eadb, #c9ae89); }
.dash-display-card-identity { flex: 1; min-width: 0; }
.dash-display-card-title-row { display: flex; align-items: center; gap: 7px; min-width: 0; }
.dash-display-card-title-row h3 {
  color: var(--text);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-display-card-identity p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.dash-display-pill {
  padding: 2px 6px;
  border-radius: 10px;
  color: var(--green);
  background: rgba(52,211,153,.1);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.dash-display-address {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 11px 0 8px;
  padding: 7px 9px;
  border-radius: 7px;
  color: #8fb2ff;
  background: rgba(91,141,239,.07);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
}
.dash-display-address span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-display-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 10px;
}
.dash-display-card-meta span { display: inline-flex; align-items: center; gap: 4px; }
.dash-display-card-actions { padding-top: 11px; border-top: 1px solid var(--border); }
.dash-display-create { max-width: 880px; margin: 0 auto; }
.dash-display-create-head {
  display: grid;
  grid-template-columns: 145px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  margin-bottom: 18px;
}
.dash-display-form {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--bg2);
}
.dash-display-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, .45fr);
  gap: 14px;
}
.dash-display-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dash-display-field-wide { grid-column: 1 / -1; }
.dash-display-field > span,
.dash-display-template-fieldset legend,
.dash-display-copy-source > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.dash-display-field input,
.dash-display-field select,
.dash-display-field textarea,
.dash-display-copy-source select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  outline: none;
  background: var(--bg3);
  color: var(--text);
  padding: 9px 10px;
  font: inherit;
  font-size: 12px;
}
.dash-display-field textarea { resize: vertical; min-height: 76px; }
.dash-display-field input:focus,
.dash-display-field select:focus,
.dash-display-field textarea:focus,
.dash-display-copy-source select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(91,141,239,.1); }
.dash-display-field input.invalid { border-color: var(--red); }
.dash-display-field small { color: var(--muted); font-size: 10px; line-height: 1.4; }
.dash-display-slug-row {
  display: grid;
  grid-template-columns: auto minmax(100px, 1fr);
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg3);
}
.dash-display-slug-row:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(91,141,239,.1); }
.dash-display-slug-row > span {
  padding-left: 10px;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  white-space: nowrap;
}
.dash-display-slug-row input { border: 0; border-radius: 0; padding-left: 3px; box-shadow: none !important; }
.dash-display-template-fieldset {
  border: 0;
  margin-top: 19px;
  padding: 0;
}
.dash-display-template-fieldset legend { margin-bottom: 8px; }
.dash-display-template-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.dash-display-template-option {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  background: var(--bg3);
  transition: border-color .15s, background .15s;
}
.dash-display-template-option:hover { border-color: rgba(91,141,239,.5); }
.dash-display-template-option:has(input:checked) { border-color: var(--accent); background: rgba(91,141,239,.1); }
.dash-display-template-option input { position: absolute; opacity: 0; pointer-events: none; }
.dash-display-template-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #9ab9ff;
  background: rgba(91,141,239,.1);
}
.dash-display-template-option strong { display: block; color: var(--text); font-size: 11px; }
.dash-display-template-option small { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.dash-display-template-option > i { color: var(--accent); opacity: 0; }
.dash-display-template-option:has(input:checked) > i { opacity: 1; }
.dash-display-copy-source {
  display: none;
  grid-template-columns: 130px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px;
  border-radius: 9px;
  background: rgba(91,141,239,.06);
}
.dash-display-copy-source.visible { display: grid; }
.dash-display-form-footer {
  justify-content: flex-end;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.dash-display-form-error { flex: 1; color: var(--red); font-size: 11px; line-height: 1.4; }
.dash-display-create-button .icon,
#dashboardDisplayCreateButton .icon { flex-shrink: 0; }
.dash-display-configure {
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dash-display-configure-bar {
  flex-shrink: 0;
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
}
.dash-display-configure-identity { flex: 1; min-width: 0; }
.dash-display-configure-identity strong,
.dash-display-configure-identity span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-display-configure-identity strong { color: var(--text); font-size: 12px; }
.dash-display-configure-identity span { margin-top: 2px; color: var(--muted); font-size: 9px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.dash-display-configure-bar .dash-display-danger { margin-left: 0; }
.dash-display-preview-bar {
  display: flex; flex-wrap: wrap; align-items: center; flex-shrink: 0;
  gap: 8px 12px; padding: 8px 10px;
  border-bottom: 1px solid var(--border); background: var(--bg2);
}
.dash-display-preview-modes { display: flex; flex-wrap: wrap; gap: 3px; }
.dash-display-preview-modes button {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-height: 34px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--muted); padding: 5px 9px;
  font: inherit; font-size: 11px; cursor: pointer;
}
.dash-display-preview-modes button[aria-pressed="true"] {
  color: var(--text); background: var(--bg3); border-color: var(--accent);
}
.dash-display-preview-modes button:focus-visible,
.dash-display-preview-zoom select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dash-display-preview-zoom { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; }
.dash-display-preview-zoom select {
  min-height: 34px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--text); padding: 4px 6px; font: inherit;
}
.dash-display-preview-zoom select:disabled { opacity: .5; }
.dash-display-preview-dimensions { margin-left: auto; color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.dash-display-preview-bar p { flex-basis: 100%; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.dash-display-frame-wrap { display: flex; flex: 1; min-width: 0; min-height: 0; overflow: auto; background: var(--bg); }
.dash-display-frame-stage { position: relative; flex: none; width: 100%; height: 100%; margin: auto; overflow: hidden; }
.dash-display-editor-frame { position: absolute; inset: 0 auto auto 0; display: block; width: 100%; height: 100%; border: 0; background: #0e1117; transform-origin: top left; }
.fixed-preview .dash-display-frame-stage { box-shadow: 0 0 0 1px var(--border), 0 8px 30px rgba(0,0,0,.25); }

@media (pointer: coarse) {
  .dash-display-preview-modes button, .dash-display-preview-zoom select { min-height: 44px; }
}

@media (max-width: 760px) {
  .dash-display-entry { grid-template-columns: auto minmax(0, 1fr); }
  .dash-display-entry-actions { grid-column: 1 / -1; }
  .dash-display-entry-actions > * { flex: 1; }
  .dash-display-head-actions .dash-display-notice { display: none; }
  .dash-display-library,
  .dash-display-create { padding: 12px; }
  .dash-display-hero { align-items: stretch; flex-direction: column; padding: 16px; }
  .dash-display-hero .hero-action { align-self: flex-start; }
  .dash-display-card-actions { flex-wrap: wrap; }
  .dash-display-card-actions > * { flex: 1 1 auto; }
  .dash-display-card-actions .dash-display-danger { margin-left: 0; }
  .dash-display-create-head { grid-template-columns: 1fr; }
  .dash-display-form-grid { grid-template-columns: 1fr; }
  .dash-display-field-wide { grid-column: auto; }
  .dash-display-template-grid { grid-template-columns: 1fr; }
  .dash-display-slug-row { grid-template-columns: 1fr; }
  .dash-display-slug-row > span { padding: 8px 10px 0; overflow: hidden; text-overflow: ellipsis; }
  .dash-display-slug-row input { padding-left: 10px; }
  .dash-display-copy-source { grid-template-columns: 1fr; }
  .dash-display-configure-bar { flex-wrap: wrap; }
  .dash-display-configure-identity { order: -1; flex-basis: 100%; }
  .dash-display-configure-bar > button,
  .dash-display-configure-bar > a { flex: 1; }
}

@media (max-width: 520px) {
  .dash-display-shell .dash-tool-head { flex-wrap: wrap; }
  .dash-display-head-actions { flex: 1 1 100%; }
  .dash-display-head-actions .dash-display-primary { width: 100%; }
  .dash-display-card-meta { display: grid; grid-template-columns: 1fr 1fr; }
  .dash-display-form { padding: 13px; }
  .dash-display-form-footer { flex-wrap: wrap; }
  .dash-display-form-error { flex-basis: 100%; }
  .dash-display-form-footer button { flex: 1; }
}

/* ── News cards ── */
.news-card {
  display: flex; flex-direction: column; cursor: pointer;
  background: var(--bg2); transition: background .15s;
  text-decoration: none; min-width: 0;
}
.news-card:hover { background: var(--bg3); }
.news-card-img {
  width: 100%; height: 120px; object-fit: cover; display: block; flex-shrink: 0;
}
.news-card-body { padding: 9px 11px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.news-card-meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.news-card-source {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  color: var(--accent); letter-spacing: .04em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.news-card-age { font-size: 9px; color: var(--muted); }
.news-card-title { font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.4; }
.news-card-desc {
  font-size: 11px; color: var(--muted); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── Inbox cards (single-column list, no avatar tile) ── */
.inbox-card-list { display: flex; flex-direction: column; gap: 1px; background: var(--border); }
.email-card-row { border-left: 3px solid transparent; position: relative; }
.email-card-row:hover { border-left-color: var(--accent); }
.email-card-row.is-selected { border-left-color: var(--accent); background: var(--bg3); }
.email-card-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.email-card-delete {
  position: absolute;
  top: 6px;
  right: 8px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 12px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.email-card-row:hover .email-card-delete { opacity: 1; }
.email-card-delete:hover { color: var(--red); border-color: var(--red); }

/* ── Email drawer: slide out from behind the inbox ── */
#drawerInbox { z-index: 102; }
#drawerInbox.email-detail-open { width: min(var(--drawer-w), 42%); }
#drawerEmail {
  left: min(var(--drawer-w), 42%);
  width: min(760px, calc(100% - min(var(--drawer-w), 42%)));
  max-width: none;
  visibility: hidden;
  pointer-events: none;
  transition: transform .25s cubic-bezier(.4,0,.2,1), visibility 0s .25s;
}
#drawerEmail.open { visibility: visible; pointer-events: auto; transition-delay: 0s; }
#drawerEmail .desk-drawer-body { padding: 0; overflow: hidden; min-height: 0; }
#drawerEmail .desk-drawer-hdr { min-width: 0; }
#drawerEmail .btn-drawer-x { flex-shrink: 0; }

@media (max-width: 640px) {
  #drawerInbox.email-detail-open { width: 100%; }
  #drawerEmail { left: 24px; width: calc(100% - 24px); z-index: 103; }
  #drawerEmail .desk-drawer-hdr { gap: 6px; padding: 8px; }
  #drawerEmail .btn-drawer-x { padding: 8px; }
  #drawerEmail .email-detail-meta { padding: 8px; }
  #drawerEmail .email-action-bar { flex-wrap: wrap; gap: 6px; padding: 8px; }
  #drawerEmail .btn-email-action { flex: 1 1 25%; padding: 8px 4px; }
}

@media (prefers-reduced-motion: reduce) {
  #drawerEmail { transition: none; }
}

.email-detail {
  display: flex; flex-direction: column; height: 100%; min-height: 0;
}
.email-detail-subject { font-size: 14px; font-weight: 600; color: var(--text); flex: 1; min-width: 0; line-height: 1.3; overflow-wrap: anywhere; }
.email-detail-meta { padding: 10px 16px 8px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.email-detail-from { font-size: 12px; color: var(--text); font-weight: 500; overflow-wrap: anywhere; }
.email-detail-date { font-size: 11px; color: var(--muted); margin-top: 2px; }
.email-detail-body {
  flex: 1; overflow: hidden; min-height: 0;
}
.email-detail-body iframe {
  width: 100%; height: 100%; border: none; display: block;
  background: #fff;
}
.email-action-bar {
  display: flex; gap: 8px; padding: 12px 16px;
  border-top: 1px solid var(--border); background: var(--bg2);
  flex-shrink: 0;
}
.email-action-bar:empty { display: none; }
.btn-email-action {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 6px; background: var(--bg3); border: 1px solid var(--border);
  border-radius: 8px; cursor: pointer; color: var(--text); transition: background .15s, border-color .15s;
  font-size: 11px; font-weight: 500;
}
.btn-email-action .action-icon { font-size: 18px; line-height: 1; }
.btn-email-action:hover { background: var(--bg1); border-color: var(--accent); color: var(--accent); }
.btn-email-action.danger:hover { border-color: var(--red, #e05c5c); color: var(--red, #e05c5c); }

/* ════════════════════════════════════════════════════════════
   MOBILE  (≤ 640px)
   ════════════════════════════════════════════════════════════ */
/* Mobile bottom bar: current agent + switcher trigger */
.bottom-nav {
  display: none; background: var(--bg2); border-top: 1px solid var(--border);
  padding-bottom: var(--safe-bot); flex-shrink: 0; z-index: 10;
}
.bn-current {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  background: none; border: none; color: var(--text); cursor: pointer;
  padding: 0 16px; min-height: 54px; position: relative; text-align: left;
}
.bn-current:active { background: var(--bg3); }
.bn-emoji { font-size: 22px; line-height: 1; flex-shrink: 0; }
.bn-name { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bn-switch {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  background: none; border: none; border-left: 1px solid var(--border);
  color: var(--muted); cursor: pointer; font-size: 13px; font-weight: 600;
  padding: 0 18px; min-height: 54px; position: relative;
}
.bn-switch:active { background: var(--bg3); }
.bn-switch .icon, .bn-switch svg { width: 16px; height: 16px; }
.busy-dot, .agent-list-item .busy-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  animation: pulse-dot 1.2s ease-in-out infinite; }
.bn-current .busy-dot { position: static; flex-shrink: 0; }
.bn-switch .busy-dot, .agent-list-item .busy-dot { position: absolute; top: 8px; right: 8px; }
.agent-list-item { position: relative; }
@keyframes pulse-dot { 0%,100%{opacity:.4;transform:scale(.8)} 50%{opacity:1;transform:scale(1.2)} }

/* ── Mobile menu: bottom sheet ─────────────────────────────────
   Contents are generated by drawers.js from the sidebar strip so
   the sheet always has feature parity with desktop. */
.drawer-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 200; }
.drawer-backdrop.open { display: block; }
.drawer {
  position: fixed; left: 0; right: 0; bottom: 0; width: 100%;
  max-height: 88dvh;
  background: var(--bg2); border: 1px solid var(--border); border-bottom: none;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -12px 40px rgba(0,0,0,.45);
  transform: translateY(102%);
  transition: transform .28s cubic-bezier(.32,.72,.24,1);
  z-index: 201; display: flex; flex-direction: column;
}
.drawer.open { transform: translateY(0); }
.drawer-grabber {
  background: none; border: none; padding: 12px 0 10px; cursor: pointer;
  display: flex; justify-content: center; flex-shrink: 0; width: 100%;
  touch-action: none; /* let pointermove drive drag-to-dismiss, not scrolling */
}
.drawer-grabber span { width: 40px; height: 4px; border-radius: 2px; background: var(--border); display: block; }
.drawer-body {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; /* sheet scroll must not chain to the page */
  padding: 2px 14px calc(12px + var(--safe-bot));
}
.mm-sheet-title { font-size: 13px; font-weight: 600; color: var(--muted); margin: 2px 2px 10px; }

/* Profile row */
.mm-profile {
  width: 100%; display: flex; align-items: center; gap: 12px;
  background: var(--bg3); border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 12px; margin: 2px 0 12px; cursor: pointer; color: var(--text);
}
.mm-avatar {
  width: 38px; height: 38px; border-radius: 50%; background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0; overflow: hidden;
}
.mm-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.mm-profile-name { font-size: 15px; font-weight: 600; }
.mm-profile-hint { margin-left: auto; font-size: 12px; color: var(--muted); }

/* Feature grid */
.mm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 360px) { .mm-grid { grid-template-columns: repeat(3, 1fr); } }
.mm-tile {
  position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start; gap: 6px; padding: 12px 4px 10px;
  background: var(--bg3); border: 1px solid transparent; border-radius: 12px;
  cursor: pointer; color: var(--text); min-height: 74px;
}
.mm-tile:active { background: var(--bg); border-color: var(--border); }
.mm-tile-icon {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; color: var(--accent);
}
.mm-tile-icon .icon, .mm-tile-icon [data-lucide], .mm-tile-icon svg { width: 22px; height: 22px; }
.mm-tile-icon span { font-size: 20px; line-height: 1; }
.mm-tile-label {
  font-size: 10.5px; line-height: 1.25; color: var(--muted); text-align: center;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  word-break: break-word;
}
.mm-tile-badge {
  position: absolute; top: 6px; right: 6px; background: var(--accent); color: #fff;
  border-radius: 9px; font-size: 9px; font-weight: 600; padding: 1px 5px;
  min-width: 15px; text-align: center; line-height: 14px;
}
.mm-tile-alert {
  position: absolute; top: 8px; right: 8px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--red);
}

/* Agent switcher sheet */
.mm-agent-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 360px) { .mm-agent-grid { grid-template-columns: repeat(2, 1fr); } }
.mm-agent { min-height: 84px; justify-content: center; }
.mm-agent .mm-tile-label { font-size: 12px; color: var(--text); }
.mm-agent-emoji { font-size: 28px; line-height: 1; }
.mm-agent.active { border-color: var(--accent); background: rgba(91,141,239,.12); }
.mm-agent.active .mm-tile-label { color: var(--accent); }
.mm-agent .busy-dot { position: absolute; top: 8px; right: 8px; }

/* Quick-action rows */
.mm-rows {
  display: flex; flex-direction: column;
  margin-top: 12px; border-top: 1px solid var(--border); padding-top: 6px;
}
.mm-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: none; border: none; color: var(--text); font-size: 14.5px;
  padding: 12px 6px; cursor: pointer; border-radius: 10px; text-align: left;
}
.mm-row:active { background: var(--bg3); }
.mm-row:disabled { opacity: .45; cursor: not-allowed; }
.mm-row-icon { width: 26px; display: flex; justify-content: center; color: var(--muted); flex-shrink: 0; }
.mm-row.danger, .mm-row.danger .mm-row-icon { color: var(--red); }
.mm-row.update, .mm-row.update .mm-row-icon { color: var(--green); }
.mm-row .session-dot { display: block; width: 8px; height: 8px; border-radius: 50%; }
.mm-row .session-dot.warn  { background: var(--yellow); }
.mm-row .session-dot.alert { background: var(--red); }

/* Mobile hamburger (⋮) with aggregate attention dot */
.btn-menu { display: none; background: none; border: none; color: var(--text);
  font-size: 22px; cursor: pointer; padding: 6px 10px; line-height: 1; position: relative; }
.menu-dot {
  position: absolute; top: 3px; right: 4px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--accent);
}

/* Mobile compact header */
.mobile-header {
  display: none; background: var(--bg2); border-bottom: 1px solid var(--border);
  padding: 0 12px; padding-top: var(--safe-top);
  height: calc(48px + var(--safe-top)); align-items: center; gap: 10px;
  flex-shrink: 0; z-index: 10;
}
.mobile-header h1 { font-size: 17px; font-weight: 700; color: var(--accent); margin-right: auto; }

/* Chat/Dashboard/Workspace switcher in the mobile header. */
.mobile-view-toggle {
  display: none; gap: 2px; background: var(--bg3);
  border: 1px solid var(--border); border-radius: 8px; padding: 2px;
}
.mv-btn {
  width: 32px; height: 26px; background: none; border: none; border-radius: 6px;
  cursor: pointer; color: var(--muted);
  display: flex; align-items: center; justify-content: center;
}
.mv-btn .icon, .mv-btn svg { width: 15px; height: 15px; }
.mv-btn.active { background: rgba(91,141,239,.18); color: var(--accent); }

/* Keep the menu reachable without horizontal scrolling on small phones. */
@media (max-width: 360px) {
  .mobile-header { gap: 6px; }
}

@media (max-width: 640px) {
  /* Hide desktop sidebar strip on mobile */
  .sidebar-strip { display: none; }

  /* Show mobile header and bottom bar */
  .mobile-header { display: flex; }
  .mobile-view-toggle { display: flex; }
  .bottom-nav { display: flex; }

  /* Hide status bar on mobile (update notice surfaces in the ⋮ menu) */
  #statusBar { display: none !important; }

  /* The floating workspace view toggle is replaced by the header control.
     (.workspace prefix out-specifies 11-desktop.css, which concatenates later) */
  .workspace .view-toggle { display: none; }

  /* Messages full-width on mobile */
  .msg { max-width: 100%; }
  .msg-bubble { font-size: 15px; }
  textarea { font-size: 16px; }

  /* Agent pill hidden on mobile (using bottom nav) */
  .agent-pill { display: none; }
  .messages { padding-top: 16px; }

  /* Modal full-screen on mobile. !important beats the inline widths some
     modals carry (e.g. the 500px search modal) which otherwise overflow. */
  .modal-backdrop { padding: 0; align-items: flex-end;
    width: 100%; max-width: 100vw; left: 0; right: 0; }
  .modal { width: 100% !important; max-width: 100% !important;
    border-radius: var(--radius) var(--radius) 0 0;
    max-height: 90dvh; padding-bottom: calc(20px + var(--safe-bot)); }
  /* Long URLs / unbroken strings wrap in chat bubbles on narrow screens */
  .msg-bubble { word-break: break-word; overflow-wrap: anywhere; }

  /* Compact coordinator cards stay readable without a wide status column. */
  .msg.task-chip { padding: 9px; }
  .task-chip-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 8px;
  }
  .task-chip-agent { grid-column: 1; grid-row: 1; }
  .task-chip-cancel { grid-column: 2; grid-row: 1; }
  .task-chip-badge { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
  .task-chip-task { -webkit-line-clamp: 3; }
  .task-chip-meta { white-space: normal; }
  .task-chip-overview { gap: 3px; }
  .task-chip-child {
    grid-template-columns: 13px minmax(0, 1fr);
    gap: 5px 6px;
  }
  .task-chip-child-state {
    grid-column: 2;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px;
    justify-items: start;
    min-width: 0;
    max-width: 100%;
    text-align: left;
  }
  .task-chip-child[data-depth="1"] { margin-left: 8px; }
  .task-chip-child[data-depth="2"] { margin-left: 16px; }
  .task-chip-child[data-depth="3"] { margin-left: 24px; }
  .task-chip-child[data-depth="4"] { margin-left: 32px; }
  .task-chip-child-action { white-space: normal; }
  .task-chip-event-row { grid-template-columns: 13px minmax(0, 1fr); }
  .task-chip-event-time { display: none; }
  .task-chip-raw pre { max-height: min(12em, 35dvh); }
  .task-chip-reply input { font-size: 16px; }

  /* Desk drawers full width on mobile */
  .desk-drawer { width: 100%; max-width: 100%; }

  /* Roomier touch targets for drawer close buttons */
  .btn-drawer-x { padding: 8px 12px; }

  /* btn-menu visible on mobile */
  .btn-menu { display: block; }

  /* Document workspace uses the full viewport; history becomes a lower rail. */
  .doc-workspace-backdrop { padding: 0; align-items: stretch; }
  .doc-workspace-shell { width: 100%; height: 100dvh; min-height: 0; border: 0; border-radius: 0; }
  .doc-workspace-header { min-height: calc(50px + var(--safe-top)); padding: var(--safe-top) 8px 7px; }
  .doc-workspace-title-icon { display: none; }
  .doc-workspace-command { width: 34px; padding: 0; }
  .doc-workspace-command span { display: none; }
  .doc-workspace-body { display: flex; flex-direction: column; }
  .doc-workspace-stage { flex: 1; }
  .doc-workspace-content { padding: 12px; }
  .doc-current-page, .doc-version-page { min-height: 100%; padding: 24px 18px; }
  .doc-history-rail { max-height: 38%; padding: 0 10px 10px; border-top: 1px solid var(--border); border-left: 0; }
  .doc-compare-scroll { max-height: 48dvh; }
  .doc-compare-aligned { grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; }
  .doc-compare-line { padding-inline: 6px; font-size: 10px; }
  .doc-review-bar { flex-wrap: wrap; }
  .doc-review-bar > span { flex-basis: 100%; }
  .doc-ask-controls { flex-wrap: wrap; }
  .doc-ask-controls select { width: 120px; }
  .doc-ask-controls input { min-width: calc(100% - 172px); }
  .doc-ask-send { width: 38px; padding: 0; }
  .doc-ask-send span { display: none; }
  .msg.document-artifact-message { max-width: min(390px, 100%); }
}

/* ── Login screen ── */
body.oe-auth-suspended > :not(#loginScreen) { display: none !important; visibility: hidden !important; pointer-events: none !important; }
#loginScreen {
  position: fixed; inset: 0; background: var(--bg); z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 40%, rgba(91,141,239,.06) 0%, var(--bg) 70%);
}
#loginScreen.hidden { display: none; }
.login-panel {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 20px;
  padding: 36px; width: 420px; max-width: 95vw; max-height: 92vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 20px;
  box-shadow: 0 8px 40px rgba(0,0,0,.35);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.login-logo { font-size: 36px; text-align: center; }
.login-title { font-size: 20px; font-weight: 700; color: var(--text); text-align: center; }
.login-subtitle { font-size: 13px; color: var(--muted); text-align: center; margin-top: -12px; }
.login-user-list { display: flex; flex-direction: column; gap: 8px; max-height: 240px; overflow-y: auto; }
.login-user-btn {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg3); border: 2px solid transparent; border-radius: 10px;
  padding: 10px 14px; cursor: pointer; transition: border-color .15s; width: 100%;
}
.login-user-btn:hover { border-color: var(--accent); }
.login-user-btn.selected { border-color: var(--accent); background: rgba(74,158,255,.1); }
.login-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0;
}
.login-user-name { font-size: 14px; font-weight: 600; color: var(--text); text-align: left; }
.login-pw-row { display: flex; flex-direction: column; gap: 6px; }
.login-pw-row label { font-size: 12px; color: var(--muted); }
.login-pw-row input {
  background: var(--bg3); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 10px 12px; font-size: 14px; width: 100%; box-sizing: border-box;
}
.login-pw-row input:focus { outline: none; border-color: var(--accent); }
.login-btn {
  background: var(--accent); border: none; color: #fff; border-radius: 8px;
  padding: 12px; font-size: 14px; font-weight: 700; cursor: pointer; width: 100%;
  transition: transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s cubic-bezier(.4,0,.2,1), opacity .15s;
}
.login-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(91,141,239,.25); }
.login-btn:disabled { opacity: .5; cursor: not-allowed; }
.login-error { font-size: 12px; color: var(--red); text-align: center; min-height: 16px; }
.login-setup { font-size: 12px; color: var(--muted); text-align: center; }
.login-setup a { color: var(--accent); cursor: pointer; text-decoration: none; }
/* Setup (create first user) form */
.login-setup-form { display: flex; flex-direction: column; gap: 10px; }
.login-setup-intro {
  color: var(--muted); text-align: center; font-size: 13px; line-height: 1.45;
}
.login-setup-kicker {
  color: var(--text); font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; margin-bottom: 4px;
}
.login-setup-checklist {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
.login-setup-checklist div {
  display: grid; grid-template-columns: 22px 1fr; grid-template-areas: "num title" "num meta";
  align-items: center; column-gap: 8px; padding: 9px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--bg3); min-width: 0;
}
.login-setup-checklist span {
  grid-area: num; width: 22px; height: 22px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; background: rgba(91,141,239,.16);
  color: var(--accent); font-size: 11px; font-weight: 700;
}
.login-setup-checklist strong {
  grid-area: title; color: var(--text); font-size: 12px; line-height: 1.2; min-width: 0;
}
.login-setup-checklist small {
  grid-area: meta; color: var(--muted); font-size: 10px; line-height: 1.2; min-width: 0;
}
.login-setup-form input, .login-setup-form select {
  background: var(--bg3); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 9px 12px; font-size: 13px; width: 100%; box-sizing: border-box;
}
.login-emoji-row { display: flex; gap: 8px; }
.login-emoji-row select { width: 70px; flex-shrink: 0; font-size: 18px; }
.login-emoji-row input { flex: 1; }
.login-restore-panel {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--bg3);
  display: flex; flex-direction: column; gap: 8px;
}
@media (max-width: 460px) {
  .login-panel { padding: 28px 20px; }
  .login-setup-checklist { grid-template-columns: 1fr; }
}

/* ── Expense drawer ─────────────────────────────────────────────────── */
/* ── Expenses — full-screen app ── */
#drawerExpenses { width:100% !important; max-width:100% !important; left:0 !important; transform:translateX(-100%) !important; }
#drawerExpenses.open { transform:translateX(0) !important; }
.exp-app { display:flex; height:100%; overflow:hidden; }
.exp-sidebar { width:190px; flex-shrink:0; background:var(--bg); border-right:1px solid var(--border); display:flex; flex-direction:column; }
.exp-sidebar-hdr { display:flex; align-items:center; gap:10px; padding:16px; border-bottom:1px solid var(--border); flex-shrink:0; }
.exp-sidebar-title { font-size:16px; font-weight:700; color:var(--text); flex:1; }
.exp-book-selector { border-bottom:1px solid var(--border); }
.exp-nav { display:flex; flex-direction:column; padding:10px 8px; gap:2px; }
.exp-nav-item { display:flex; align-items:center; gap:10px; padding:9px 12px; border:none; border-radius:8px; background:transparent; color:var(--muted); font-size:13px; font-weight:500; cursor:pointer; text-align:left; transition:background .15s,color .15s; width:100%; }
.exp-nav-item:hover { background:var(--bg3); color:var(--text); }
.exp-nav-item.active { background:rgba(74,158,255,.12); color:var(--accent); font-weight:600; }
.exp-nav-icon { font-size:15px; width:20px; flex-shrink:0; }
.exp-main { flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden; }
.exp-view { display:none; flex-direction:column; flex:1; overflow:hidden; padding:24px; gap:0; box-sizing:border-box; width:100%; }
.exp-view.active { display:flex; }
.exp-view-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-shrink:0; flex-wrap:wrap; gap:12px; }
.exp-view-title { font-size:20px; font-weight:700; color:var(--text); margin:0; }
.exp-kpi-row { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; flex-shrink:0; }
.exp-kpi-card { background:var(--bg3); border-radius:10px; padding:16px 18px; border:1px solid var(--border); }
.exp-kpi-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:6px; }
.exp-kpi-value { font-size:22px; font-weight:700; color:var(--text); }
.exp-kpi-cat { font-size:14px !important; }
.exp-section-hdr { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:10px; flex-shrink:0; }
.exp-filter-input { background:var(--bg3); border:1px solid var(--border); color:var(--text); border-radius:7px; padding:6px 10px; font-size:12px; }
.exp-txn-filters { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.exp-txn-total { font-size:13px; font-weight:700; color:var(--accent); white-space:nowrap; }
.exp-table-wrap { flex:1; overflow-y:auto; border-radius:10px; border:1px solid var(--border); }
.exp-table { border-collapse:collapse; width:100%; font-size:13px; }
.exp-table thead { position:sticky; top:0; background:var(--bg3); z-index:1; }
.exp-table th { padding:10px 14px; text-align:left; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); border-bottom:1px solid var(--border); white-space:nowrap; }
.exp-table th.exp-th-r { text-align:right; }
.exp-table td { padding:9px 14px; border-bottom:1px solid var(--border); vertical-align:middle; }
.exp-table tbody tr:hover { background:var(--bg3); }
.exp-table tbody tr:last-child td { border-bottom:none; }
.exp-td-date { color:var(--muted); white-space:nowrap; font-size:12px; }
.exp-td-merchant { font-weight:600; white-space:nowrap; }
.exp-td-desc { color:var(--muted); font-size:12px; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.exp-td-amt { text-align:right; font-weight:700; color:var(--accent); white-space:nowrap; }
.exp-td-act { text-align:right; white-space:nowrap; }
.exp-cat-badge { display:inline-block; padding:2px 8px; border-radius:10px; background:rgba(74,158,255,.12); color:var(--accent); font-size:11px; cursor:pointer; white-space:nowrap; }
.exp-drop-zone { border:2px dashed var(--border); border-radius:14px; padding:52px 24px; text-align:center; cursor:pointer; transition:border-color .2s,background .2s; }
.exp-drop-zone:hover,.exp-drop-active { border-color:var(--accent) !important; background:rgba(74,158,255,.05); }
.exp-input { width:100%; background:var(--bg); border:1px solid var(--border); color:var(--text); border-radius:7px; padding:8px 12px; font-size:13px; box-sizing:border-box; }
.exp-btn-primary { background:var(--accent); color:#fff; border:none; border-radius:7px; padding:9px 16px; cursor:pointer; font-size:13px; font-weight:600; }
.exp-btn-ghost { background:none; border:1px solid var(--border); color:var(--muted); border-radius:7px; padding:7px 12px; cursor:pointer; font-size:12px; }
.exp-refresh-btn { background:var(--bg3); border:1px solid var(--border); color:var(--muted); border-radius:7px; padding:6px 12px; cursor:pointer; font-size:12px; }
.exp-overview-table { border-collapse:collapse; width:100%; font-size:12px; }
.exp-overview-table th { text-align:left; padding:8px 10px; border-bottom:1px solid var(--border); color:var(--muted); font-weight:700; font-size:11px; text-transform:uppercase; white-space:nowrap; }
.exp-overview-table td { padding:7px 10px; border-bottom:1px solid var(--border); }
.exp-overview-table tr:last-child td { font-weight:700; border-top:2px solid var(--border); }
.exp-member-row { display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--bg3); border-radius:8px; }
.exp-dash-body { display:flex; gap:20px; flex:1; overflow:hidden; min-height:0; }
.exp-chart-panel { width:300px; flex-shrink:0; display:flex; flex-direction:column; background:var(--bg3); border:1px solid var(--border); border-radius:10px; padding:16px; overflow-y:auto; }
.exp-recent-panel { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }
.exp-chart-period { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.exp-period-btn { background:var(--bg); border:1px solid var(--border); color:var(--muted); border-radius:6px; padding:4px 10px; font-size:11px; cursor:pointer; transition:background .15s,color .15s; }
.exp-period-btn.active { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
.exp-legend { display:flex; flex-direction:column; gap:6px; margin-top:14px; }
.exp-legend-item { display:flex; align-items:center; gap:8px; font-size:12px; cursor:pointer; padding:3px 4px; border-radius:5px; transition:background .12s; }
.exp-legend-item:hover { background:var(--bg); }
.exp-legend-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.exp-legend-name { flex:1; color:var(--text); }
.exp-legend-amt { font-weight:600; color:var(--text); white-space:nowrap; }
.exp-legend-pct { color:var(--muted); font-size:11px; white-space:nowrap; }

/* ════════════════════════════════════════════════════════════
   PRIMARY VIEW SWITCHER + WORKSPACE VIEW
   ════════════════════════════════════════════════════════════ */

/* ── View toggle (top-right of workspace) ── */
.view-toggle {
  position: absolute; top: 10px; right: 12px; z-index: 5;
  display: flex; gap: 2px; background: var(--bg2);
  border: 1px solid var(--border); border-radius: 8px; padding: 2px;
}
.view-btn {
  width: 32px; height: 32px; background: none; border: none;
  border-radius: 6px; cursor: pointer; color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s;
}
.view-btn:hover { color: var(--text); }
.view-btn.active { background: rgba(91,141,239,.15); color: var(--accent); }

/* ── Workspace view container ── */
.desktop-view {
  flex: 1; overflow-y: auto; padding: 24px 20px;
  -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(91,141,239,.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(139,92,246,.05) 0%, transparent 50%);
}

/* ── Category cards grid ── */
.desktop-categories {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.desktop-cat-card {
  background: linear-gradient(135deg, rgba(255,255,255,.03) 0%, transparent 100%);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px; padding: 20px; cursor: pointer;
  transition: border-color .25s, transform .25s, box-shadow .25s, background .25s;
  display: flex; align-items: center; gap: 16px;
  width: 260px; flex-shrink: 0;
  backdrop-filter: blur(8px);
}
.desktop-cat-card:hover {
  border-color: rgba(91,141,239,.4);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.2), 0 0 0 1px rgba(91,141,239,.15);
  background: linear-gradient(135deg, rgba(91,141,239,.06) 0%, transparent 100%);
}
.desktop-cat-icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.desktop-cat-info { flex: 1; min-width: 0; }
.desktop-cat-name { font-size: 15px; font-weight: 600; color: var(--text); }
.desktop-cat-count { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ── Items view ── */
.desktop-items { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.desktop-items-hdr {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 14px; flex-shrink: 0;
}
.desktop-back-btn {
  background: none; border: 1px solid var(--border);
  color: var(--muted); padding: 6px 12px; border-radius: 6px;
  cursor: pointer; font-size: 13px; display: flex; align-items: center; gap: 6px;
  transition: border-color .15s, color .15s;
}
.desktop-back-btn:hover { border-color: var(--accent); color: var(--accent); }
.desktop-items-title { font-size: 16px; font-weight: 600; color: var(--text); }
.desktop-selection-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px; margin-bottom: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg2); font-size: 12px; }
.desktop-selection-bar[hidden] { display: none; }
.desktop-selection-bar label, .desktop-item-select { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.desktop-selection-bar button, .desktop-item-preview { border: 1px solid var(--border); background: var(--bg3); color: var(--text); border-radius: 6px; padding: 7px 10px; cursor: pointer; }
.desktop-selection-bar button:disabled { opacity: .45; cursor: default; }
.desktop-selection-bar .detail-delete-btn { color: var(--red, #e55); }
#desktopSelectionStatus { flex-basis: 100%; margin: 0; color: var(--muted); line-height: 1.5; overflow-wrap: anywhere; }
.desktop-item-select { font-size: 12px; flex-shrink: 0; }
.desktop-item-select input, .desktop-selection-bar input { width: 16px; height: 16px; accent-color: var(--accent); }
.desktop-item-selected { outline: 2px solid var(--accent); outline-offset: -2px; }
.desktop-img-thumb .desktop-item-select { position: absolute; left: 8px; top: 8px; z-index: 1; padding: 5px 8px; border-radius: 6px; color: #fff; background: #172334e6; }
.desktop-img-thumb .desktop-item-preview { position: absolute; right: 8px; bottom: 8px; z-index: 1; font-size: 11px; background: #172334e6; color: #fff; }
.desktop-img-thumb:has(.desktop-item-preview) .desktop-img-label { padding-bottom: 46px; }
.desktop-item-preview:focus-visible, .desktop-item-select input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 540px) { .desktop-item-row { flex-wrap: wrap; } .desktop-item-row .desktop-item-info { flex-basis: 60%; } }
.desktop-items-grid {
  flex: 1; overflow-y: auto; padding-top: 4px;
  display: grid; gap: 10px; align-content: start;
  -webkit-overflow-scrolling: touch;
}

/* List mode (documents, tutoring) */
.desktop-items-grid.list-mode { grid-template-columns: 1fr; }

/* Gallery mode (images) */
.desktop-items-grid.gallery-mode {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

/* ── Document / item row ── */
.desktop-item-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; background: var(--bg2);
  border: 1px solid var(--border); border-radius: 10px;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.desktop-item-row:hover { background: var(--bg3); border-color: var(--accent); }
.desktop-item-icon { font-size: 20px; flex-shrink: 0; width: 28px; text-align: center; }
.desktop-item-info { flex: 1; min-width: 0; }
.desktop-item-title { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.desktop-item-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.desktop-item-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.desktop-item-tag {
  font-size: 10px; background: var(--bg3); color: var(--muted);
  padding: 1px 7px; border-radius: 10px;
}

/* ── Image thumbnail ── */
.desktop-img-thumb {
  aspect-ratio: 1; border-radius: 10px; overflow: hidden;
  cursor: pointer; border: 1px solid var(--border);
  transition: border-color .15s, transform .15s;
  position: relative;
}
.desktop-img-thumb:hover { border-color: var(--accent); transform: scale(1.02); }
.desktop-img-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.desktop-img-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,.7));
  color: #fff; font-size: 10px; padding: 16px 8px 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Detail modal overrides ── */
.desktop-detail-modal { width: 680px; max-height: 85dvh; }
.desktop-detail-modal h1 { font-size: 20px; margin-bottom: 4px; }
.desktop-detail-modal .detail-meta { font-size: 12px; color: var(--muted); margin-bottom: 16px; }
.desktop-detail-modal .detail-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
.desktop-detail-modal .detail-tag {
  font-size: 11px; background: var(--bg3); color: var(--muted);
  padding: 2px 10px; border-radius: 12px;
}
.desktop-detail-modal .detail-body { line-height: 1.7; font-size: 14px; }
.desktop-detail-modal .detail-body h1,
.desktop-detail-modal .detail-body h2,
.desktop-detail-modal .detail-body h3 { margin-top: 16px; }
.desktop-detail-modal .detail-body table { width: 100%; border-collapse: collapse; margin: 10px 0; }
.desktop-detail-modal .detail-body th,
.desktop-detail-modal .detail-body td { border: 1px solid var(--border); padding: 6px 10px; font-size: 13px; text-align: left; }
.desktop-detail-modal .detail-body th { background: var(--bg3); }
.desktop-detail-modal .detail-image { width: 100%; border-radius: 8px; }
.desktop-detail-modal .detail-actions { display: flex; gap: 8px; margin-top: 16px; }
.desktop-detail-modal .detail-actions button {
  background: none; border: 1px solid var(--border); color: var(--muted);
  padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 12px;
  transition: all .15s;
}
.desktop-detail-modal .detail-actions button:hover { border-color: var(--accent); color: var(--accent); }
.desktop-detail-modal .detail-actions .desktop-resume-btn {
  background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600;
}
.desktop-detail-modal .detail-actions .desktop-resume-btn:hover {
  filter: brightness(1.15); color: #fff;
}
.desktop-detail-modal .detail-actions .detail-delete-btn {
  border-color: var(--red, #e53935); color: var(--red, #e53935);
}
.desktop-detail-modal .detail-actions .detail-delete-btn:hover {
  background: var(--red, #e53935); color: #fff;
}

/* ── Empty state ── */
.desktop-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px; color: var(--muted); text-align: center; gap: 8px;
}
.desktop-empty .empty-icon { font-size: 48px; opacity: .4; margin-bottom: 8px; }

/* ── Workspace Widget Grid ── */
.desktop-widget-grid {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}

/* ── Widget card ── */
.desktop-widget {
  background: linear-gradient(160deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.01) 100%);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  overflow: visible;
  transition: border-color .25s, box-shadow .25s;
  position: relative;
}
.desktop-widget:hover {
  border-color: rgba(255,255,255,.1);
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
}
.desktop-widget:empty { display: none; }

/* Size variants */
.widget-size-small  { width: calc(33.333% - 11px); min-width: 280px; }
.widget-size-medium { width: calc(50% - 8px);      min-width: 320px; }
.widget-size-large  { width: 100%; }

/* ── Widget header ── */
.widget-header {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  font-size: 12px; font-weight: 600;
  color: rgba(200,200,220,.65);
  text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 1px solid rgba(255,255,255,.05);
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.02) 0%, transparent 100%);
  border-radius: 14px 14px 0 0;
}
.widget-title {
  flex: 1; cursor: default; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.widget-header-actions { display: flex; gap: 4px; flex-shrink: 0; }

/* ── Widget menu button + dropdown ── */
.widget-menu-btn {
  background: none; border: none; color: var(--muted);
  cursor: pointer; font-size: 14px; padding: 2px 6px;
  border-radius: 4px; line-height: 1;
  transition: color .15s, background .15s;
}
.widget-menu-btn:hover { color: var(--text); background: rgba(255,255,255,.06); }

.widget-menu {
  display: none; position: absolute; top: 100%; right: 8px;
  background: #1e1e24; border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px; padding: 6px 0; min-width: 140px;
  box-shadow: 0 12px 32px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.03);
  z-index: 50;
}
.widget-menu.open { display: block; }
.widget-menu-item {
  padding: 8px 14px; font-size: 12px; color: var(--text);
  cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 400;
  transition: background .12s;
}
.widget-menu-item:hover { background: rgba(91,141,239,.1); }
.widget-menu-item.active { color: var(--accent); font-weight: 600; }
.widget-menu-item.widget-menu-danger { color: var(--red, #e53935); }
.widget-menu-item.widget-menu-danger:hover { background: rgba(229,57,53,.1); }
.widget-menu-divider { height: 1px; background: rgba(255,255,255,.05); margin: 4px 0; }

/* ── Rename input ── */
.widget-rename-input {
  background: transparent; border: none; border-bottom: 1px solid var(--accent);
  color: var(--text); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  outline: none; width: 100%; padding: 0;
}

/* ── Widget body ── */
.widget-body {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px;
  max-height: 360px;
  overflow-y: auto;
  border-radius: 0 0 14px 14px;
}

/* ── Task card inside widget ── */
.board-task-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  transition: background .15s;
}
.board-task-card:hover { background: rgba(91,141,239,.06); }
.board-task-icon { font-size: 16px; flex-shrink: 0; }
.board-task-info { flex: 1; min-width: 0; }
.board-task-label { font-size: 13px; font-weight: 600; color: var(--text); }
.board-task-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* ── Reminder card inside widget ── */
.board-reminder-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  transition: background .15s;
}
.board-reminder-card:hover { background: rgba(139,92,246,.06); }
.board-reminder-icon { font-size: 16px; flex-shrink: 0; }
.board-reminder-info { flex: 1; min-width: 0; }
.board-reminder-label { font-size: 13px; font-weight: 600; color: var(--text); }
.board-reminder-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.board-reminder-dismiss {
  background: none; border: 1px solid rgba(255,255,255,.08); color: var(--muted);
  width: 24px; height: 24px; border-radius: 6px; cursor: pointer;
  font-size: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, color .15s, background .15s;
}
.board-reminder-dismiss:hover {
  border-color: var(--red, #f38ba8); color: var(--red, #f38ba8);
  background: rgba(229,57,53,.08);
}

/* ── Notes widget ── */
.widget-body-notes { padding: 0; }
.widget-notes-area {
  width: 100%; min-height: 120px; max-height: 320px; resize: vertical;
  background: transparent; border: none; color: var(--text);
  font-size: 13px; line-height: 1.6; padding: 12px 14px;
  font-family: inherit; outline: none;
}
.widget-notes-area::placeholder { color: rgba(200,200,220,.3); }

/* ── Links widget ── */
.widget-link-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 6px;
  transition: background .12s;
}
.widget-link-row:hover { background: rgba(91,141,239,.06); }
.widget-link-anchor {
  flex: 1; min-width: 0; color: #7aadff; font-size: 13px;
  text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color .15s;
}
.widget-link-anchor:hover { color: #a3c6ff; text-decoration: underline; }
.widget-link-remove {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 11px; padding: 2px 4px; border-radius: 4px;
  opacity: 0; transition: opacity .15s, color .15s;
}
.widget-link-row:hover .widget-link-remove { opacity: 1; }
.widget-link-remove:hover { color: var(--red, #e53935); }
.widget-link-add {
  padding: 8px 12px; font-size: 12px; color: var(--muted);
  cursor: pointer; border-radius: 6px; transition: background .12s, color .12s;
}
.widget-link-add:hover { background: rgba(91,141,239,.06); color: var(--accent); }

/* ── Checklist widget ── */
.widget-check-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 6px;
  transition: background .12s;
}
.widget-check-row:hover { background: rgba(52,211,153,.05); }
.widget-check-row input[type="checkbox"] {
  accent-color: var(--green, #34d399); flex-shrink: 0; cursor: pointer;
  width: 15px; height: 15px;
}
.widget-check-label {
  flex: 1; min-width: 0; font-size: 13px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.widget-check-label.done {
  text-decoration: line-through; color: var(--muted); opacity: .6;
}
.widget-check-row:hover .widget-link-remove { opacity: 1; }

/* ── Add Widget button ── */
.desktop-widget-add {
  width: calc(33.333% - 11px); min-width: 280px;
  min-height: 100px;
  border: 2px dashed rgba(91,141,239,.2); border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; cursor: pointer;
  color: rgba(200,200,220,.35);
  transition: border-color .25s, color .25s, background .25s, box-shadow .25s;
}
.desktop-widget-add:hover {
  border-color: rgba(91,141,239,.45); color: var(--accent);
  background: rgba(91,141,239,.04);
  box-shadow: 0 0 20px rgba(91,141,239,.06);
}
.widget-add-icon { font-size: 28px; font-weight: 300; line-height: 1; }
.widget-add-label { font-size: 12px; font-weight: 500; }

/* ── Widget Picker overlay ── */
.widget-picker-overlay {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.55); backdrop-filter: blur(8px);
  align-items: center; justify-content: center;
}
.widget-picker-overlay.open { display: flex; }
.widget-picker-modal {
  background: linear-gradient(170deg, #1e1e26 0%, #18181c 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px; width: 380px; max-width: 90vw;
  box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.03);
  overflow: hidden;
}
.widget-picker-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: 15px; font-weight: 600; color: var(--text);
  background: linear-gradient(180deg, rgba(91,141,239,.04) 0%, transparent 100%);
}
.widget-picker-close {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 16px; padding: 4px 8px; border-radius: 6px;
  transition: color .15s, background .15s;
}
.widget-picker-close:hover { color: var(--text); background: rgba(255,255,255,.06); }
.widget-picker-list { padding: 8px; }
.widget-picker-item {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; border-radius: 10px; cursor: pointer;
  transition: background .15s, transform .15s;
}
.widget-picker-item:hover {
  background: rgba(91,141,239,.08);
  transform: translateX(2px);
}
.widget-picker-icon {
  font-size: 24px; flex-shrink: 0; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.04); border-radius: 10px;
}
.widget-picker-info { flex: 1; min-width: 0; }
.widget-picker-name { font-size: 14px; font-weight: 600; color: var(--text); }
.widget-picker-desc { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ── Mobile ── */
@media (max-width: 640px) {
  .view-toggle { top: 6px; right: 8px; }
  .desktop-view { padding: 16px 12px; }
  .desktop-categories { gap: 10px; }
  .desktop-cat-card { width: 140px; padding: 14px; gap: 12px; }
  .desktop-cat-icon { width: 40px; height: 40px; font-size: 20px; }
  .desktop-cat-name { font-size: 14px; }
  .desktop-items-grid.gallery-mode {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
  }
  .desktop-detail-modal { width: 100%; max-width: 100%; }
  .desktop-widget,
  .widget-size-small,
  .widget-size-medium,
  .widget-size-large,
  .desktop-widget-add { width: 100%; min-width: 0; }
}

/* ════════════════════════════════════════════════════════════
   AVATAR PICKER
   ════════════════════════════════════════════════════════════ */

.avatar-picker { display: flex; flex-direction: column; gap: 14px; }

.avatar-picker-current {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg3); border-radius: 10px; padding: 12px 14px;
}

.avatar-preview { flex-shrink: 0; }

.avatar-preview-img {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover; display: block;
  border: 2px solid var(--border);
}
.avatar-preview-emoji {
  width: 56px; height: 56px; border-radius: 50%; font-size: 28px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--border);
}

.avatar-remove-btn {
  background: none; border: 1px solid var(--border); color: var(--muted);
  width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
  font-size: 12px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all .15s;
}
.avatar-remove-btn:hover { border-color: var(--red, #e05c5c); color: var(--red, #e05c5c); }

.avatar-section-title {
  font-size: 11px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .5px;
}
.avatar-builtin-details { margin-top: 12px; }
.avatar-builtin-details > summary { user-select: none; list-style: revert; }

.avatar-upload-row {
  display: flex; flex-direction: column; gap: 6px;
}
.avatar-upload-btn {
  background: var(--bg3); border: 1px dashed var(--border); color: var(--text);
  border-radius: 8px; padding: 10px; font-size: 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: border-color .15s, color .15s;
}
.avatar-upload-btn:hover { border-color: var(--accent); color: var(--accent); }

.avatar-builtin-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 4px;
}
.avatar-builtin-item {
  width: 40px; height: 40px; border-radius: 8px;
  background: var(--bg3); border: 2px solid transparent;
  font-size: 20px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, transform .15s;
}
.avatar-builtin-item:hover { border-color: var(--accent); transform: scale(1.1); }
.avatar-builtin-item.active { border-color: var(--accent); background: rgba(91,141,239,.12); }

/* Avatar images in user cards / login */
.user-avatar img, .login-avatar img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
}
.strip-user-btn img {
  width: 30px; height: 30px; border-radius: 50%; object-fit: cover; display: block;
}

/* ════════════════════════════════════════════════════════════
   AVATAR CROP MODAL
   ════════════════════════════════════════════════════════════ */

.avatar-crop-backdrop {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.7); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}

.avatar-crop-panel {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 16px; padding: 24px;
  width: 100%; max-width: 360px;
  display: flex; flex-direction: column; gap: 12px;
}

.avatar-crop-title {
  font-size: 16px; font-weight: 700; color: var(--text); text-align: center;
}
.avatar-crop-hint {
  font-size: 11px; color: var(--muted); text-align: center;
}

.avatar-crop-viewport {
  width: 260px; height: 260px; margin: 0 auto;
  border-radius: 50%; overflow: hidden;
  position: relative; cursor: grab;
  background: var(--bg3);
  border: 3px solid var(--border);
  box-shadow: 0 0 0 4000px rgba(0,0,0,.3);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.avatar-crop-viewport:active { cursor: grabbing; }

.avatar-crop-viewport img {
  position: absolute; top: 0; left: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.avatar-crop-controls {
  display: flex; align-items: center; gap: 10px;
  padding: 0 20px;
}

.avatar-crop-slider {
  flex: 1; height: 4px;
  -webkit-appearance: none; appearance: none;
  background: var(--border); border-radius: 2px; outline: none;
}
.avatar-crop-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); cursor: pointer;
  border: 2px solid var(--bg2);
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.avatar-crop-slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); cursor: pointer;
  border: 2px solid var(--bg2);
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}

.avatar-crop-actions {
  display: flex; gap: 8px; justify-content: center;
  padding-top: 4px;
}
.avatar-crop-cancel {
  background: none; border: 1px solid var(--border); color: var(--muted);
  border-radius: 8px; padding: 8px 20px; font-size: 13px;
  cursor: pointer; transition: all .15s;
}
.avatar-crop-cancel:hover { border-color: var(--accent); color: var(--accent); }
.avatar-crop-save {
  background: var(--accent); border: none; color: #fff;
  border-radius: 8px; padding: 8px 24px; font-size: 13px;
  cursor: pointer; font-weight: 600; transition: filter .15s;
}
.avatar-crop-save:hover { filter: brightness(1.15); }

/* ── Mobile crop modal ── */
@media (max-width: 640px) {
  .avatar-crop-panel { max-width: 100%; padding: 16px; }
  .avatar-crop-viewport { width: 220px; height: 220px; }
}

/* ── Reminder Banner ──────────────────────────────────────────────────────── */

.reminder-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--surface, #1e1e2e);
  border-bottom: 2px solid var(--accent, #89b4fa);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}

.reminder-banner.visible {
  transform: translateY(0);
}

.reminder-content {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.reminder-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.reminder-text {
  min-width: 0;
}

.reminder-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--fg, #cdd6f4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reminder-time {
  font-size: 12px;
  color: var(--muted, #6c7086);
  margin-top: 2px;
}

.reminder-dismiss {
  background: var(--accent, #89b4fa);
  border: none;
  color: var(--bg, #1e1e2e);
  border-radius: 6px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}

.reminder-dismiss:hover {
  opacity: 0.85;
}

/* ── Tutor nudge banner ──────────────────────────────────────────────────── */
.tutor-nudge-banner {
  border-bottom-color: #f9c74f !important;
}
.tutor-nudge-banner .reminder-dismiss {
  background: #f9c74f;
  margin-left: 8px;
}

/* ── Celebration overlay ─────────────────────────────────────────────────── */
.tutor-celebration {
  position: fixed; inset: 0; z-index: 10050;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.tutor-celebration.visible { opacity: 1; pointer-events: auto; }
.tutor-celebration-card {
  background: var(--surface, #1e1e2e);
  border: 2px solid #f9c74f;
  border-radius: 18px;
  padding: 32px 40px;
  text-align: center;
  min-width: 260px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 0 80px rgba(249, 199, 79, 0.35);
  transform: scale(0.7);
  transition: transform 0.4s cubic-bezier(.3,1.5,.6,1);
}
.tutor-celebration.visible .tutor-celebration-card { transform: scale(1); }
.tutor-celebration-icon { font-size: 72px; line-height: 1; margin-bottom: 12px; }
.tutor-celebration-kind { font-size: 12px; color: var(--muted, #6c7086); text-transform: uppercase; letter-spacing: 0.12em; }
.tutor-celebration-label { font-size: 22px; font-weight: 700; color: var(--fg, #cdd6f4); margin-top: 6px; }

/* ── Custom drawer design tokens ──────────────────────────────────────────────
 * Reusable class set for drawers created by the skill-builder. These give
 * plugin-authored UIs the same look as the built-in drawers without having
 * to reinvent colors, spacing, and buttons.
 *
 * Prefix: `.cdraw-*` (custom drawer). Prefer these over ad-hoc inline styles.
 */

/* Rows — the workhorse for lists inside a drawer body. */
.cdraw-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 6px;
}
.cdraw-row-main { flex: 1; min-width: 0; }
.cdraw-row-title {
  font-weight: 600; font-size: 13px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cdraw-row-sub {
  font-size: 11px; color: var(--muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cdraw-row-actions {
  display: flex; gap: 4px; flex-shrink: 0;
  opacity: 0; transition: opacity .15s;
}
.cdraw-row:hover .cdraw-row-actions { opacity: 1; }

/* Buttons — pick a variant to match intent. */
.cdraw-btn {
  background: var(--bg3); border: 1px solid var(--border); color: var(--text);
  padding: 7px 12px; border-radius: 6px; cursor: pointer;
  font-size: 12px; font-weight: 500; font-family: inherit;
  transition: all .15s;
}
.cdraw-btn:hover { border-color: var(--accent); color: var(--accent); }
.cdraw-btn-primary {
  background: var(--accent); border: 1px solid var(--accent); color: #fff;
}
.cdraw-btn-primary:hover { filter: brightness(1.1); color: #fff; }
.cdraw-btn-danger { /* icon-only destructive; see .cdraw-icon-btn */ }
.cdraw-btn-full { width: 100%; }

/* Compact icon-only button — for Mark read / Email / Delete style actions. */
.cdraw-icon-btn {
  background: none; border: none; color: var(--muted);
  cursor: pointer; padding: 4px 6px; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .15s, background .15s;
}
.cdraw-icon-btn:hover { color: var(--text); background: var(--bg2); }
.cdraw-icon-btn.danger:hover { color: var(--red); }
.cdraw-icon-btn.accent:hover { color: var(--accent); }
.cdraw-icon-btn .icon,
.cdraw-icon-btn [data-lucide] { width: 15px; height: 15px; }

/* Badges — small status pills (READ, SENT, etc.). */
.cdraw-badge {
  display: inline-block;
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em;
  padding: 2px 7px; border-radius: 10px;
  background: var(--bg2); color: var(--muted);
  border: 1px solid var(--border);
  margin-right: 4px;
}
.cdraw-badge.accent { background: rgba(91,141,239,.15); color: var(--accent); border-color: rgba(91,141,239,.3); }
.cdraw-badge.green  { background: rgba(52,211,153,.15); color: var(--green);  border-color: rgba(52,211,153,.3); }
.cdraw-badge.yellow { background: rgba(251,191,36,.15); color: var(--yellow); border-color: rgba(251,191,36,.3); }
.cdraw-badge.red    { background: rgba(239,68,68,.15);  color: var(--red);    border-color: rgba(239,68,68,.3); }

/* Empty / loading / error states. */
.cdraw-empty,
.cdraw-loading,
.cdraw-error {
  padding: 24px 12px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}
.cdraw-error { color: var(--red); }

/* Section headers inside the drawer body. */
.cdraw-section-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted);
  margin: 14px 0 8px;
}

/* Toolbar — e.g. a Refresh button sticky at the top of the body. */
.cdraw-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 10px; margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.cdraw-toolbar > :first-child { flex: 1; }

/* ── Remote Nodes ──────────────────────────────────────────────────────────── */

.node-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 8px;
}

.node-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.node-platform-icon {
  font-size: 18px;
  line-height: 1;
}

.node-hostname {
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
}

.node-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.node-pulse {
  animation: nodePulse 1.5s ease-in-out infinite;
}

@keyframes nodePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.node-card-status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.node-card-info {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px;
}

.node-card-stats {
  font-size: 11px;
  color: var(--muted);
  font-family: var(--mono, 'SF Mono', 'Fira Code', monospace);
}

.node-quality-summary {
  margin-top: 6px;
  font-size: 11px;
}

.node-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}

.node-actions-queue {
  margin: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg3);
}

.node-actions-queue-head,
.node-reliability {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.node-actions-queue-head {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
}

.node-actions-queue-head span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.node-actions-queue-head small {
  color: var(--muted);
  font-weight: 500;
}

.node-actions .cdraw-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  font-size: 11px;
}

/* ── Node walkthrough ────────────────────────────────────────────────────── */

.node-walkthrough-card {
  margin: 10px 10px 0;
  padding: 10px 12px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
}

.node-walkthrough-title {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  font-weight: 700;
  margin-bottom: 8px;
}

.node-walkthrough-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  color: var(--muted);
  line-height: 1.35;
}

.node-walkthrough-grid b,
.node-walkthrough-step b {
  color: var(--text);
}

.node-walkthrough-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.node-walkthrough-modal {
  max-width: 560px;
  text-align: left;
}

.node-walkthrough-modal-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.node-walkthrough-modal-title {
  font-weight: 800;
  font-size: 15px;
  color: var(--text);
}

.node-walkthrough-modal-subtitle {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.node-walkthrough-steps {
  display: grid;
  gap: 8px;
}

.node-walkthrough-step {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 8px;
  align-items: start;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.node-walkthrough-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--accent);
  font-weight: 800;
  font-size: 11px;
}

.node-walkthrough-next {
  margin-top: 12px;
  padding: 10px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.node-walkthrough-next code {
  color: var(--text);
}

.node-onboarding-modal {
  max-width: 620px;
  text-align: left;
}

.node-onboarding-body {
  display: grid;
  gap: 10px;
}

.node-onboarding-step {
  padding: 10px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.node-onboarding-step b {
  color: var(--text);
}

.node-onboarding-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.node-onboarding-services {
  display: grid;
  gap: 6px;
}

.node-onboarding-empty {
  color: var(--muted);
  font-size: 12px;
  padding: 8px 0;
}

.node-onboarding-status {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.node-onboarding-status b {
  color: var(--text);
}

.node-onboarding-status-done {
  border-color: rgba(63, 185, 80, 0.35);
}

.node-onboarding-status-error {
  border-color: rgba(248, 81, 73, 0.35);
}

.node-onboarding-status-warning {
  border-color: rgba(210, 153, 34, 0.35);
}

.node-onboarding-spinner {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  margin-top: 2px;
  flex-shrink: 0;
}

.node-onboarding-status-running .node-onboarding-spinner {
  animation: nodeSpin 0.8s linear infinite;
}

.node-onboarding-status-done .node-onboarding-spinner {
  border-color: var(--green);
  background: var(--green);
}

.node-onboarding-status-error .node-onboarding-spinner {
  border-color: var(--red);
  background: var(--red);
}

.node-onboarding-status-warning .node-onboarding-spinner {
  border-color: var(--yellow);
  background: var(--yellow);
}

@keyframes nodeSpin {
  to { transform: rotate(360deg); }
}

.node-onboarding-detect {
  margin: 0;
  max-height: 180px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  color: var(--text);
  font-size: 11px;
  line-height: 1.45;
}

/* ── Terminal ──────────────────────────────────────────────────────────────── */

.node-terminal {
  margin-top: 10px;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 8px;
  overflow: hidden;
}

.node-terminal-output {
  padding: 10px 12px;
  max-height: 350px;
  overflow-y: auto;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
  font-size: 12px;
  line-height: 1.5;
  color: #c9d1d9;
  white-space: pre-wrap;
  word-break: break-all;
}

.node-terminal-input-row {
  display: flex;
  align-items: center;
  border-top: 1px solid #30363d;
  padding: 6px 12px;
  background: #161b22;
}

.node-terminal-prompt {
  color: #58a6ff;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
  font-size: 12px;
  font-weight: 600;
  margin-right: 8px;
  flex-shrink: 0;
}

.node-terminal-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: #c9d1d9;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
  font-size: 12px;
  caret-color: #58a6ff;
}

.node-terminal-input::placeholder {
  color: #484f58;
}

/* Terminal output styles */
.term-cmd-line {
  color: #58a6ff;
  margin-top: 4px;
}

.term-prompt {
  color: #3fb950;
  font-weight: 600;
}

.term-output {
  color: #c9d1d9;
}

.term-stderr {
  color: #f85149;
}

.term-exit-ok {
  color: #3fb950;
  font-size: 11px;
  margin-top: 2px;
  opacity: 0.7;
}

.term-exit-err {
  color: #f85149;
  font-size: 11px;
  margin-top: 2px;
}

/* ── Access level badges ──────────────────────────────────────────────────── */

.access-badge-click {
  cursor: pointer;
  transition: opacity 0.15s;
}

.access-badge-click:hover {
  opacity: 0.8;
}

.cdraw-badge.access-red {
  background: rgba(248, 81, 73, 0.15);
  color: #f85149;
  border: 1px solid rgba(248, 81, 73, 0.3);
}

.cdraw-badge.access-orange {
  background: rgba(210, 153, 34, 0.15);
  color: #d29922;
  border: 1px solid rgba(210, 153, 34, 0.3);
}

.cdraw-badge.access-green {
  background: rgba(63, 185, 80, 0.15);
  color: #3fb950;
  border: 1px solid rgba(63, 185, 80, 0.3);
}

.cdraw-badge.access-blue {
  background: rgba(88, 166, 255, 0.15);
  color: #58a6ff;
  border: 1px solid rgba(88, 166, 255, 0.3);
}

/* ── Confirm modal buttons ───────────────────────────────────────────────── */

.cdraw-btn-warning {
  background: rgba(210, 153, 34, 0.2) !important;
  color: #d29922 !important;
  border-color: rgba(210, 153, 34, 0.4) !important;
}

.cdraw-btn-warning:hover {
  background: rgba(210, 153, 34, 0.35) !important;
}

.cdraw-btn-danger {
  background: rgba(248, 81, 73, 0.2) !important;
  color: #f85149 !important;
  border-color: rgba(248, 81, 73, 0.4) !important;
}

.cdraw-btn-danger:hover {
  background: rgba(248, 81, 73, 0.35) !important;
}

/* ── Toast notifications ──────────────────────────────────────────────────── */

.node-toast-stack {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.node-toast {
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s, transform 0.3s;
  max-width: 350px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  pointer-events: auto;
}

.node-toast.show {
  opacity: 1;
  transform: translateY(0);
}

.node-toast-error {
  background: rgba(248, 81, 73, 0.15);
  border: 1px solid rgba(248, 81, 73, 0.4);
  color: #f85149;
}

.node-toast-success {
  background: rgba(63, 185, 80, 0.15);
  border: 1px solid rgba(63, 185, 80, 0.4);
  color: #3fb950;
}

.node-toast-warning {
  background: rgba(210, 153, 34, 0.15);
  border: 1px solid rgba(210, 153, 34, 0.4);
  color: #d29922;
}

/* ── Pairing modal ────────────────────────────────────────────────────────── */

.node-pair-modal {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}

.node-pair-modal.show { opacity: 1; }

.node-pair-modal-bg {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
}

.node-pair-modal-box {
  position: relative;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  max-width: 380px;
  width: 90%;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.node-pair-code {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--accent);
  background: var(--bg2);
  border: 2px dashed var(--accent);
  border-radius: 10px;
  padding: 16px;
  user-select: all;
  cursor: pointer;
}

/* ── Profile rollup inside each node card ───────────────────────────────── */
.node-profiles-section {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.node-profiles-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 6px;
}
.node-section-onboard-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
}
.node-profile-row {
  padding: 6px 8px;
  margin-bottom: 4px;
  background: var(--bg2);
  border-radius: 6px;
  font-size: 12px;
}
.node-profile-row:last-child { margin-bottom: 0; }
.node-profile-row-header {
  display: flex;
  align-items: center;
  gap: 6px;
}
.node-profile-action {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  font-size: 10px;
  line-height: 1.2;
}
.node-profile-name {
  font-weight: 600;
}
.node-profile-row-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
  padding-left: 14px;
}
.node-profile-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.node-trust-unverified {
  opacity: 0.6;
}
.node-profiles-empty {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
}

/* ── Combined System Health block inside each node card ─────────────────── */
.node-system-health {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.node-system-health-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.node-system-health-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}
.node-system-health-detail {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.35;
}
.node-system-health-meta {
  margin-top: 6px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--muted);
}
.node-system-health-skipped {
  color: var(--yellow);
}
.node-system-health-actions {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.node-system-health-actions .cdraw-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-size: 11px;
}
.node-autofix-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
  user-select: none;
}
.node-autofix-toggle input {
  appearance: none;
  width: 34px;
  height: 18px;
  border-radius: 999px;
  background: var(--border);
  position: relative;
  cursor: pointer;
  transition: background .15s;
}
.node-autofix-toggle input::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: left .15s;
}
.node-autofix-toggle input:checked {
  background: var(--accent);
}
.node-autofix-toggle input:checked::after {
  left: 18px;
}
.node-autofix-disabled {
  opacity: 0.5;
  cursor: default;
}
.node-autofix-disabled input {
  cursor: default;
}

/* ── Shared node health detail view ─────────────────────────────────────── */
.node-health-modal {
  max-width: 760px;
  width: min(92vw, 760px);
  max-height: 86dvh;
  overflow: auto;
  text-align: left;
}
.node-health-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.node-health-service {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg2);
  padding: 10px;
}
.node-health-service-head,
.node-health-signal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.node-health-service-title {
  font-weight: 650;
  font-size: 13px;
}
.node-health-signal {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
  margin-top: 8px;
  font-size: 12px;
}
.node-health-signal-bad {
  background: rgba(224, 92, 92, 0.10);
}
.node-health-signal-ok {
  background: rgba(67, 184, 156, 0.08);
}
.node-health-signal-head span {
  font-size: 11px;
  color: var(--muted);
}
.node-health-signal-bad .node-health-signal-head span {
  color: var(--red);
}
.node-health-line,
.node-health-muted {
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.45;
}
.node-health-line code {
  color: var(--text);
}
.node-health-command {
  margin-top: 4px;
}
.node-health-command summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 11px;
}
.node-health-command pre,
.node-health-diag {
  margin: 4px 0 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 11px;
}
.node-health-empty {
  color: var(--muted);
  font-size: 12px;
  padding: 10px 0;
}
.node-ops-view {
  display: grid;
  gap: 12px;
}
.node-reliability {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg2);
}
.node-reliability div {
  display: grid;
  gap: 2px;
}
.node-reliability span {
  color: var(--muted);
  font-size: 11px;
}
.node-reliability strong {
  font-size: 26px;
  line-height: 1;
}
.node-health-section-title {
  margin: 2px 0 -4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.node-action-list {
  display: grid;
  gap: 8px;
}
.node-action-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg2);
}
.node-action-title {
  font-size: 12px;
  font-weight: 700;
}
.node-health-critical {
  border-color: rgba(224, 92, 92, 0.45);
}
.node-health-warn {
  border-color: rgba(224, 178, 92, 0.45);
}
.node-quality-grid {
  display: grid;
  gap: 6px;
}
.node-quality-gate {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg2);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}
.node-quality-gate span {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
}
.node-quality-gate b {
  color: var(--text);
}
.node-quality-pass span {
  color: var(--green);
}
.node-quality-warn span {
  color: var(--yellow);
}
.node-quality-fail span {
  color: var(--red);
}
.node-health-actions {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.node-timeline {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}
.node-timeline-item {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 8px;
  align-items: start;
}
.node-timeline-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 5px;
  background: var(--accent);
}
.node-timeline-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}
.node-timeline-head span,
.node-event-row span {
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}
.node-event-log {
  display: grid;
  gap: 6px;
}
.node-event-row {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 6px 8px;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg2);
  font-size: 11px;
}
.node-event-row div {
  grid-column: 2;
  color: var(--muted);
}

/* ── Sidebar nodes-button alert dot ──────────────────────────────────────── */
.strip-btn-alert {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--red);
  border: 2px solid var(--bg2);
  box-shadow: 0 0 0 1px var(--red);
  pointer-events: none;
}

/* ── Join requests (device admission queue) ──────────────────────────────── */
.node-admission-queue {
  margin: 10px;
  padding: 10px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--bg3);
}

.node-admission-queue-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
}

.node-admission-queue-head span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.node-admission-queue-head small {
  color: var(--muted);
  font-weight: 500;
}

.node-admission-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 8px;
}

.node-admission-card:last-child {
  margin-bottom: 0;
}

.node-admission-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.node-admission-host {
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
}

.node-admission-meta {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 6px;
}

.node-admission-sas {
  font-size: 12px;
  margin-bottom: 8px;
}

.node-admission-sas b {
  font-family: var(--mono, 'SF Mono', 'Fira Code', monospace);
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--accent);
}

.node-admission-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.node-admission-actions .cdraw-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  font-size: 11px;
}

/* Skill app launcher */
#drawerSkills { width: 440px; }
/* Keep the active skill surface above shadows from closed sibling drawers. */
#drawerSkills.open, .desk-drawer[data-skill-panel].open { z-index: 103; }
.skills-launcher-toolbar { padding: 18px 20px 16px; flex-shrink: 0; }
.skills-launcher-toolbar p { color: var(--muted); font-size: 13px; margin-bottom: 16px; }
.skills-search {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 12px; color: var(--muted);
}
.skills-search:focus-within { border-color: var(--accent); }
.skills-search input {
  width: 100%; min-width: 0; background: none; border: 0; outline: none;
  color: var(--text); font: inherit; font-size: 13px;
}
.skills-search input::placeholder { color: var(--muted); }
.skills-launcher-body { padding: 8px 18px 24px; }
.skill-app-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 8px; align-content: start; }
.skill-app {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  min-width: 0; padding: 10px 4px; border: 1px solid transparent; border-radius: 16px;
  background: transparent; color: var(--text); font: inherit; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.skill-app:hover { background: var(--bg3); }
.skill-app:focus-visible, .skill-back-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.skill-app.active { background: var(--bg3); border-color: var(--accent); }
.skill-app[hidden], .skills-empty[hidden] { display: none; }
.skill-app-icon {
  display: flex; align-items: center; justify-content: center; width: 66px; height: 66px;
  border-radius: 19px; color: #fff; font-size: 30px; line-height: 1;
  background: linear-gradient(145deg, #6587df, #4356ad);
  box-shadow: inset 0 1px 1px #ffffff35, 0 5px 12px #0003;
}
.skill-app-icon svg, .skill-app-icon [data-lucide] { width: 29px; height: 29px; stroke-width: 1.7; }
.skill-app-icon--finance { background: linear-gradient(145deg, #39ae96, #1d796d); }
.skill-app-icon--tutor { background: linear-gradient(145deg, #ac80e5, #7851b4); }
.skill-app:nth-child(4n) .skill-app-icon { background: linear-gradient(145deg, #d89a54, #ab6433); }
.skill-app:nth-child(4n + 5) .skill-app-icon { background: linear-gradient(145deg, #cb7b9a, #974a70); }
.skill-app-label { font-size: 12px; font-weight: 500; line-height: 1.45; text-align: center; overflow-wrap: anywhere; max-width: 100%; }
.skills-empty { color: var(--muted); font-size: 13px; line-height: 1.6; text-align: center; padding: 32px 12px; }
.skill-drawer-nav { padding: 8px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.skill-back-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 9px; border-radius: 8px;
  border: 0; background: none; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer;
}
.skill-back-btn:hover { background: var(--bg3); color: var(--text); }
.skill-back-btn svg { width: 16px; height: 16px; }
#drawerExpenses[data-skill-panel] .exp-app { flex: 1; min-height: 0; height: auto; }
@media (max-width: 640px) {
  #drawerSkills { width: 100%; }
  .skills-launcher-toolbar { padding: 16px; }
  .skills-search input { font-size: 16px; }
  .skills-launcher-body { padding: 8px 12px 24px; }
  .skill-app-grid { gap: 14px 4px; }
  .skill-back-btn { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .skill-app { transition: none; }
}

.guide-search-row {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
}
#guideSearch, #guideContentsToggle {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12px;
  box-sizing: border-box;
}
#guideSearch { flex: 1; min-width: 0; }
#guideContentsToggle { display: none; cursor: pointer; }
.guide-layout { display: flex; flex: 1; min-height: 0; }
#guideToc {
  width: 200px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 8px 0;
  background: var(--bg2);
}
#guideContent {
  flex: 1;
  min-width: 0;
  max-width: none;
  overflow-y: auto;
  overflow-wrap: anywhere;
  padding: 18px 22px;
  line-height: 1.55;
  font-size: 13.5px;
}
@media (max-width: 700px) {
  #guideContentsToggle { display: block; }
  #guideToc { display: none; width: 100%; border-right: 0; }
  #guideContent { padding: 16px; }
  .guide-show-toc #guideToc { display: block; }
  .guide-show-toc #guideContent { display: none; }
}

/* Docs selection stays reachable while scrolling long media lists. */
.doc-selection-bar {
  position: sticky; top: -1px; z-index: 2; flex-shrink: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px; background: var(--bg2); border: 1px solid var(--border);
  border-radius: 9px; font-size: 12px;
}
.doc-select-all, .doc-card-select { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.doc-select-all { min-height: 30px; }
.doc-selection-bar input, .doc-card-select input { width: 18px; height: 18px; accent-color: var(--accent); flex-shrink: 0; }
#docSelectionCount { margin-left: auto; color: var(--muted); }
.doc-selection-actions { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.doc-selection-actions button {
  background: var(--bg3); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); padding: 7px 8px; font: inherit; cursor: pointer;
}
#docDeleteSelected { color: var(--red, #e55); }
.doc-selection-actions button:disabled, .doc-card button:disabled { opacity: .45; cursor: default; }
.doc-selection-hint { width: 100%; color: var(--muted); line-height: 1.5; overflow-wrap: anywhere; }
.doc-selection-hint:empty { display: none; }
.doc-card-select { padding: 6px 9px; min-height: 30px; font-size: 12px; }
.doc-card.doc-card-selected { border-color: var(--accent) !important; box-shadow: 0 0 0 1px var(--accent); }
.doc-card:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

.network-share-card { border:1px solid var(--border); border-radius:8px; padding:12px; margin-bottom:10px; }
.network-share-heading { display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; font-size:13px; }
.network-share-heading span,.network-share-note,.network-share-location { color:var(--muted); font-size:12px; line-height:1.5; }
.network-share-location { overflow-wrap:anywhere; margin:6px 0; }
.network-share-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
#stab-panel-shares .btn-sm { padding:6px 12px; border:1px solid var(--border); border-radius:6px; background:var(--bg3); color:var(--text); font:inherit; font-size:12px; cursor:pointer; }
#stab-panel-shares .btn-sm:hover { border-color:var(--accent); }
#stab-panel-shares .btn-sm:disabled { opacity:.6; cursor:wait; }
#stab-panel-shares #networkShareConnect { background:var(--accent); color:#fff; border-color:var(--accent); padding:9px 12px; }
#stab-panel-shares summary { cursor:pointer; font-size:13px; padding:5px 0; }
#networkShareStatus { font-size:12px; line-height:1.5; }
.network-share-form { display:flex; flex-direction:column; gap:10px; padding:12px 0; }
.network-share-form label { display:flex; flex-direction:column; gap:4px; font-size:12px; }
.network-share-form input,.network-share-form select { padding:8px; border:1px solid var(--border); border-radius:6px; background:var(--bg3); color:var(--text); min-width:0; }
.network-share-form [hidden] { display:none; }
.network-share-login { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.network-share-entry { display:block; width:100%; text-align:left; background:transparent; color:var(--text); padding:8px 4px; border:0; border-bottom:1px solid var(--border); font:inherit; font-size:12px; overflow-wrap:anywhere; }
button.network-share-entry { cursor:pointer; }
#networkShareBrowser { margin-top:16px; font-size:12px; }
#networkShareDiscovery { overflow-wrap:anywhere; font-size:12px; }
@media (max-width:480px) { .network-share-login { grid-template-columns:1fr; } }