/* The same model guide in the first-run wizard and Settings. */
.onboarding-card.onboarding-model-card { width: 720px; }
.model-setup { min-width: 0; }
.model-setup-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.model-setup-choice { border: 1px solid var(--border); background: var(--surface-2); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.model-setup-choice h3, .model-setup-choice p { margin: 0; }
.model-setup-choice p, .model-setup-screen > p, .model-setup-words p { color: var(--text-dim); font-size: 13px; line-height: 1.6; }
.model-setup-choice .btn { margin-top: auto; align-self: flex-start; }
.model-setup-screen { display: grid; gap: 12px; }
.model-setup-screen > .btn { justify-self: start; }
.model-setup-screen input, .model-setup-screen select { width: 100%; min-width: 0; }
.model-setup-words { margin-top: 18px; padding: 12px; border-top: 1px solid var(--border); }
.model-setup-words summary { cursor: pointer; }
.model-setup-words h4 { margin: 14px 0 4px; }
.model-setup-words p { margin: 0; }
.model-setup-error { color: var(--danger) !important; }
.model-setup-progress { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 180px; overflow: auto; font: 12px/1.6 var(--font-mono); }
.model-setup-empty { padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-panel-solid); }
#chat-main > .model-setup-empty { max-width: 520px; margin: 16px auto; position: relative; z-index: 1; }
@media (max-width: 600px) { .model-setup-cards { grid-template-columns: 1fr; } .onboarding-card.onboarding-model-card { padding: 20px 16px; } .onboarding-model-card .onboarding-actions { flex-wrap: wrap; } }

/* Forge app viewer and the conversation's shared Kairos backdrop. */
.forge-transcript-layout { position: relative; isolation: isolate; }
.forge-transcript-layout > .chat-backdrop { pointer-events: none; }
.forge-session-header, .forge-plan-note { background: var(--bg-panel-solid); }
.forge-session-header .forge-run-app { margin-left: auto; }
.forge-running-strip { padding: 8px; display: grid; gap: 4px; border-bottom: 1px solid var(--border); font-size: 11px; }
.forge-running-strip button { overflow: hidden; text-overflow: ellipsis; text-align: left; white-space: nowrap; width: 100%; }
.forge-app-dot { flex: none; }
.forge-app-command { font: 12px/1.6 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.forge-app-command-input { width: 100%; font-family: var(--font-mono); }
.forge-app-suggestions { display: grid; gap: 6px; }
.forge-app-suggestions button { white-space: normal; overflow-wrap: anywhere; text-align: left; height: auto; }
.forge-preview-toolbar { display: flex; align-items: center; gap: 4px; padding: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--border); }
.forge-preview-toolbar .btn, .forge-preview-log-controls .btn { min-height: 26px; font-size: 11px; padding: 3px 6px; }
.forge-preview-address { display: flex; align-items: center; gap: 6px; flex: 1 1 160px; min-width: 0; }
.forge-preview-origin { font: 10px var(--font-mono); color: var(--text-dim); flex: none; }
.forge-preview-path { flex: 1; width: 60px; min-width: 0; height: 28px; padding: 4px; font: 11px var(--font-mono); }
.forge-preview-options { display: flex; padding: 4px 6px; flex: none; }
.forge-preview-widths { display: flex; gap: 4px; }
.forge-preview-widths [aria-pressed=true] { background: var(--surface-2); color: var(--text); }
.forge-preview-fallback, .forge-preview-status { margin: 0; padding: 4px 8px; font-size: 11px; overflow-wrap: anywhere; }
.forge-preview-status:empty { display: none; }
.forge-preview-viewport { display: flex; justify-content: center; background: var(--surface-2); flex: 1; min-height: 80px; min-width: 0; overflow: hidden; }
.forge-preview-viewport iframe { width: 100%; height: 100%; border: 0; background: white; }
.forge-preview-viewport[data-width=tablet] iframe { max-width: 768px; }
.forge-preview-viewport[data-width=phone] iframe { max-width: 390px; }
.forge-preview-logs { border-top: 1px solid var(--border); flex: none; min-width: 0; }
.forge-preview-logs > summary { padding: 6px 10px; font-size: 12px; cursor: pointer; }
.forge-preview-log-controls { padding: 0 8px; display: flex; gap: 6px; }
.forge-app-logs { padding: 8px; margin: 0; max-height: 180px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 11px/1.5 var(--font-mono); }
.forge-running-service small { overflow-wrap: anywhere; }
@media (max-width: 768px) { .forge-preview-origin { max-width: 116px; overflow: hidden; text-overflow: ellipsis; } }

/* Forge terminal transcript. Geometry follows the brief; all paint uses Kairos tokens. */
.forge-transcript-layout { display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; }
.forge-transcript-layout [hidden] { display: none !important; }
.forge-transcript-scroll { position: relative; display: flex; flex: 1; min-height: 0; min-width: 0; }
.forge-transcript { overflow: auto; overscroll-behavior: contain; overflow-anchor: none; flex: 1; min-height: 0; font: 13px/20px var(--font-mono); }
.forge-transcript-document { max-width: 896px; width: 100%; margin: 0 auto; padding: 16px 0 32px; }
.forge-prompt { margin: 4px 6px 16px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: rgba(var(--ink-rgb), .03); font: 14px/22px var(--font-sans); }
.forge-prompt-text { white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.forge-prompt-text.expanded { display: block; }
.forge-turn { margin-bottom: 16px; min-width: 0; }
.forge-prose.chat-prose { padding: 0 16px; font: 14px/24px var(--font-sans); color: var(--text-dim); overflow-wrap: anywhere; }
.forge-prose strong { color: var(--text); }
.forge-prose.chat-prose p { margin: 0 0 16px; }
.forge-prose.chat-prose code, .forge-prose.chat-prose pre { font-family: var(--font-mono); }
.forge-prose .chat-code-block { max-width: 100%; border-radius: 10px; }
.forge-work-label { padding: 4px 16px; color: var(--text-dim); font: 14px/20px var(--font-sans); cursor: pointer; }
.forge-work-label:hover { color: var(--text); }
.forge-terminal-spinner { display: inline-block; width: 14px; margin-right: 6px; text-align: center; font: 11px var(--font-mono); }
.forge-work-spine { border-left: 1px solid var(--border); margin: 4px 16px 8px 23px; padding-left: 20px; min-width: 0; }
.forge-tool-step { padding: 4px 0; min-width: 0; }
.forge-tool-heading { display: flex; gap: 8px; align-items: baseline; font: 14px/20px var(--font-sans); color: var(--text-dim); min-width: 0; }
.forge-tool-heading > span { flex: none; }
.forge-tool-heading code { font: 13px/20px var(--font-mono); color: var(--text); background: none; padding: 0; overflow-wrap: anywhere; min-width: 0; }
.forge-command-output { white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/20px var(--font-mono); color: var(--text-dim); margin: 6px 0 0 18px; padding: 0 10px; max-height: 220px; overflow: auto; overscroll-behavior: contain; }
.forge-tool-step.is-error, .forge-tool-step.is-error code, .forge-transcript-error { color: var(--danger); }
.forge-transcript-error { padding: 0 16px; font: 12px/20px var(--font-mono); }
.forge-inline-diff { display: block; width: 100%; margin: 6px 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; padding: 0; text-align: left; color: var(--text); background: rgba(var(--ink-rgb), .03); cursor: pointer; }
.forge-inline-diff-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; font: 500 12px/18px var(--font-mono); border-bottom: 1px solid var(--border); }
.forge-inline-diff-head > span:first-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.forge-inline-diff-lines { display: block; }
.forge-inline-diff .forge-diff-line { width: 100%; min-height: 18px; line-height: 18px; font-size: 11px; border-left: 2px solid transparent; }
.forge-inline-diff .diff-add { border-left-color: var(--success); }
.forge-inline-diff .diff-remove { border-left-color: var(--danger); }
.forge-inline-diff .forge-diff-number { width: 28px; padding: 0 4px; font-size: 10px; }
.forge-inline-diff .forge-diff-marker { width: 12px; font-size: 10px; }
.forge-inline-diff .forge-diff-line code { min-width: 0; overflow: hidden; text-overflow: ellipsis; padding-right: 8px; }
.forge-turn-review { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 8px 16px 0; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; font: 12px/18px var(--font-sans); color: var(--text-dim); }
.forge-inline-permission { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; padding: 6px 0; font: 11px/18px var(--font-sans); }
.forge-inline-permission > span:first-child { flex-basis: 100%; }
.forge-inline-permission code { font-family: var(--font-mono); overflow-wrap: anywhere; }
.forge-inline-permission .btn { min-height: 24px; padding: 2px 10px; border-radius: 6px; font-size: 11px; }
.forge-jump.btn { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); height: 24px; min-height: 24px; padding: 0 8px; font-size: 11px; background: var(--bg-panel-solid); }
.forge-transcript-composer { width: calc(100% - 12px); max-width: 896px; margin: 0 auto 6px; flex: none; border: 1px solid var(--border); border-radius: 8px; background: rgba(var(--ink-rgb), .03); backdrop-filter: blur(4px); }
.forge-transcript-composer:focus-within { border-color: var(--border-strong); }
.forge-composer-context { padding: 10px 12px 0; display: flex; gap: 10px; color: var(--text-dim); font: 12px/18px var(--font-mono); }
.forge-composer-context > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.forge-composer-context > span:first-child { flex: 1; }
.forge-composer-context > span:last-child { max-width: 45%; }
.forge-transcript-input { width: 100%; padding: 12px; resize: none; min-height: 46px; max-height: 160px; border: none; background: transparent; font: 14px/22px var(--font-sans); }
.forge-transcript-input:focus { box-shadow: none; }
.forge-transcript-footer { display: flex; align-items: center; gap: 4px; padding: 0 8px 8px; min-width: 0; }
.forge-composer-chips { display: flex; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.forge-composer-chips .session-chat-tools, .forge-composer-chips .session-chat-models { display: flex; gap: 4px; padding: 0; margin: 0; flex: none; flex-wrap: nowrap; border: 0; }
.forge-transcript-layout .forge-composer-chips .custom-select { max-width: 180px; flex: none; }
.forge-composer-chips .custom-select-btn { min-height: 26px; height: 26px; padding: 0 6px; font-size: 11px; border-radius: 6px; }
.forge-composer-chips .session-chat-status:empty { display: none; }
.forge-composer-chips .session-chat-status { white-space: normal; font-size: 11px; max-width: 180px; }
.forge-transcript-footer .btn { min-height: 26px; height: 26px; font-size: 11px; border-radius: 6px; padding: 0 6px; flex: none; }
.forge-transcript-layout .session-chat-queue { font-family: var(--font-sans); }
@media (max-width: 768px) {
  .forge-transcript-document { padding-top: 8px; }
  .forge-work-spine { margin-right: 8px; padding-left: 12px; }
  .forge-transcript-composer { margin-bottom: max(6px, var(--mobile-safe-bottom)); }
}

/* Forge Preview follows the app's appearance tokens. */
.forge-shell-view.view { padding: 0; overflow: hidden; animation: none; }
.forge-shell, .forge-workspace, .forge-pane, .forge-surface { min-width: 0; min-height: 0; }
.forge-shell { display: flex; flex: 1; height: 100%; overflow: hidden; }
.forge-shell [hidden], .forge-project-section [hidden] { display: none !important; }
.forge-project-section { margin-top: 16px; min-width: 0; }
.forge-project-section > header { height: 30px; padding: 4px 8px 6px; display: flex; align-items: center; justify-content: space-between; color: var(--text-dim); font-size: 12px; }
.forge-rail-projects { display: grid; gap: 1px; }
.forge-icon-button { width: 26px; height: 26px; display: grid; place-items: center; flex: none; padding: 0; border: 0; border-radius: 6px; color: var(--text-dim); background: transparent; font-size: 18px; cursor: pointer; }
.forge-project-section > header .forge-icon-button { width: 20px; height: 20px; font-size: 14px; }
.forge-icon-button:hover, .forge-small-button:hover { background: var(--surface-2); color: var(--text); }
.forge-project-menu.custom-select-menu { width: min(230px, calc(100vw - 24px)) !important; padding: 4px; }
.forge-project-row { height: 32px; width: 100%; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--sidebar-muted); text-align: left; cursor: pointer; }
.forge-project-row:hover, .forge-project-row[aria-pressed=true] { background: var(--surface-2); color: var(--text); }
.forge-project-mark { flex: none; width: 16px; height: 16px; display: grid; place-items: center; background: var(--accent-dim); color: var(--accent); border-radius: 2px; font-size: 11px; font-weight: 600; }
.forge-project-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 500; line-height: 17.5px; }
.forge-project-row.busy .forge-project-name { background: linear-gradient(90deg, var(--text-dim) 30%, var(--accent) 50%, var(--text-dim) 70%); background-size: 200% 100%; background-clip: text; color: transparent; animation: thinking-shimmer 1.4s linear infinite; }
.forge-counts { display: inline-flex; align-items: center; gap: 4px; flex: none; font: 600 11px var(--font-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.forge-added { color: var(--success); } .forge-removed { color: var(--danger); }
.forge-project-sidebar { position: relative; display: flex; flex-direction: column; flex: none; width: 228px; min-height: 0; background: var(--bg-panel-solid); border-right: 1px solid var(--border); }
.forge-project-header { height: 40px; flex: none; display: flex; align-items: center; gap: 4px; padding: 0 6px 0 12px; border-bottom: 1px solid var(--border); }
.forge-project-heading { flex: 1; min-width: 0; display: grid; line-height: 1.2; gap: 2px; }
.forge-project-heading strong { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forge-branch { font: 11px var(--font-mono); color: var(--text-dim); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forge-sidebar-tabs { height: 36px; flex: none; display: flex; align-items: center; gap: 1px; padding: 0 8px; border-bottom: 1px solid var(--border); }
.forge-sidebar-tab { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 4px; height: 24px; padding: 0 8px; color: var(--text-dim); background: none; border: 0; border-radius: 6px; font-size: 12px; cursor: pointer; }
.forge-sidebar-tab[aria-selected=true] { background: var(--surface-2); color: var(--text); }
.forge-sidebar-tab .forge-counts { font-size: 11px; }
.forge-sidebar-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; }
.forge-session-search { height: 36px; flex: none; padding: 4px 8px; }
.forge-session-search input { width: 100%; height: 28px; min-height: 28px; padding: 4px 8px; border-radius: 6px; font-size: 12px; }
.forge-session-cards { overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.forge-session-card { flex: none; width: 100%; padding: 8px 10px; background: none; border: 1px solid transparent; border-radius: 6px; color: var(--text); text-align: left; cursor: pointer; }
.forge-session-card:hover { background: rgba(var(--ink-rgb), .05); }
.forge-session-card[aria-pressed=true] { background: var(--surface-2); }
.forge-session-card.status-approval { border: 1px dashed var(--warn); background: rgba(var(--warn-rgb), .08); }
.forge-card-top, .forge-card-bottom { display: flex; align-items: center; gap: 6px; color: var(--text-dim); font-size: 11px; min-width: 0; }
.forge-card-top .model-mark { width: 14px; height: 14px; }
.forge-card-agent { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; flex: 1; }
.forge-card-status { flex: none; font-size: 11px; font-variant-numeric: tabular-nums; }
.status-approval .forge-card-status { color: var(--warn); } .status-working .forge-card-status { color: var(--accent); }
.forge-card-title { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; line-height: 1.375; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forge-card-bottom { margin-top: 4px; justify-content: space-between; }
.forge-sidebar-toolbar { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 4px 8px; border-bottom: 1px solid var(--border); font-size: 11px; color: var(--text-dim); }
.forge-small-button { height: 24px; flex: none; padding: 0 6px; background: transparent; border: 0; color: var(--text-dim); border-radius: 6px; font-size: 11px; cursor: pointer; }
.forge-small-button:disabled { opacity: .4; cursor: default; }
.forge-explorer-tree, .forge-changes-list { overflow: auto; flex: 1; min-height: 0; padding: 4px 0; }
.forge-sidebar-panel .meta { padding: 8px 12px; font-size: 12px; }
.forge-tree-root { display: flex; align-items: center; gap: 4px; height: 32px; flex: none; padding: 0 8px; color: var(--text-dim); }
.forge-tree-root > span { width: 16px; flex: none; font-size: 14px; }
.forge-tree-root > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.forge-tree-row { display: flex; align-items: center; gap: 4px; height: 30px; width: 100%; padding-right: 8px; border: 0; background: none; color: var(--text); font-size: 14px; text-align: left; cursor: pointer; list-style: none; }
.forge-tree-row::-webkit-details-marker { display: none; }
.forge-tree-row > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forge-tree-icon { width: 16px; flex: none; color: var(--text-dim); }
.forge-tree-directory[open] > summary > .forge-tree-icon { transform: rotate(90deg); }
.forge-tree-row:hover, .forge-change-row:hover { background: rgba(var(--ink-rgb), .05); }
.forge-tree-row.selected { background: var(--surface-2); }
.role-M { color: var(--warn); } .role-A, .role-U { color: var(--success); } .role-D { color: var(--danger); }
.forge-change-row { display: flex; align-items: center; min-height: 28px; padding: 0 4px; gap: 2px; }
.forge-change-open { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; height: 28px; padding: 0 4px; border: 0; background: transparent; color: var(--text); font-size: 13px; cursor: pointer; }
.forge-change-letter { width: 14px; flex: none; font: 600 11px var(--font-mono); }
.forge-change-path { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forge-revert { font-size: 10px; }
.forge-project-resizer { position: absolute; right: 0; top: 0; bottom: 0; width: 6px; z-index: 4; cursor: ew-resize; touch-action: none; }
.forge-project-resizer:hover, .forge-project-resizer.dragging { background: rgba(var(--ink-rgb), .15); }
.forge-workspace { display: flex; flex-direction: column; flex: 1; position: relative; background: var(--bg); }
.forge-surface-bar { height: 40px; display: flex; align-items: center; gap: 2px; padding: 0 6px; border-bottom: 1px solid var(--border); flex: none; min-width: 0; }
.forge-surface-tabs { display: flex; gap: 2px; align-items: center; flex: 1; min-width: 0; height: 100%; overflow-x: auto; overscroll-behavior: contain; }
.forge-surface-tab-group { display: flex; align-items: center; flex: none; min-width: 112px; max-width: 224px; height: 30px; border-radius: 6px; color: var(--text-dim); }
.forge-surface-tab-group.visible { background: var(--surface-2); }
.forge-surface-tab-group.preview .forge-surface-tab { font-style: italic; }
.forge-surface-tab-group.dragging { opacity: .4; }
.forge-surface-tab { height: 30px; padding: 0 8px; min-width: 0; flex: 1; border: 0; background: none; color: inherit; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; cursor: pointer; }
.forge-surface-tab[aria-selected=true] { color: var(--text); }
.forge-tab-close { width: 20px; height: 20px; flex: none; border: 0; border-radius: 4px; background: none; color: var(--text-dim); padding: 0; font-size: 16px; cursor: pointer; }
.forge-tab-close:hover { background: var(--accent-dim); }
.forge-panes { display: flex; flex: 1; min-height: 0; min-width: 0; overflow: hidden; }
.forge-conversation.chat-layout { display: flex; flex: 1; min-height: 0; min-width: 0; overflow: hidden; }
.forge-conversation.chat-layout #chat-main.forge-panes { flex: 1; flex-direction: row; width: 100%; transition: none; }
.forge-conversation.chat-layout > .artifact-panel { position: absolute; inset: 0; width: 100%; z-index: 30; background: var(--bg-panel-solid); }
.forge-conversation.chat-layout > .chat-pane-resizer { display: none; }
.forge-pane { display: flex; flex-direction: column; overflow: hidden; position: relative; }
.forge-pane-divider { position: relative; width: 1px; flex: none; background: var(--border); z-index: 3; cursor: ew-resize; touch-action: none; }
.forge-pane-divider::after { content: ''; position: absolute; inset: 0 -6px; }
.forge-pane-divider:hover::after, .forge-pane-divider.dragging::after { background: rgba(var(--ink-rgb), .1); }
.forge-pane-empty { padding: 24px; color: var(--text-dim); font-size: 13px; }
.forge-drop-right::after { content: 'Split right'; position: absolute; inset: 40px 0 0 75%; background: var(--accent-dim); border: 1px solid var(--accent); display: grid; place-items: center; pointer-events: none; z-index: 5; color: var(--accent); }
.forge-surface { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
.forge-session-header { display: flex; align-items: center; gap: 6px; padding: 4px 8px; min-height: 36px; flex: none; flex-wrap: wrap; border-bottom: 1px solid var(--border); font-size: 12px; }
.forge-session-header strong { font-weight: 500; }
.forge-session-header .custom-select { max-width: 90px; }
.forge-session-header .custom-select-btn { min-height: 26px; height: 26px; border-radius: 6px; font-size: 11px; padding: 0 6px; }
.forge-session-header .btn { min-height: 26px; padding: 2px 6px; margin-left: auto; font-size: 11px; }
.forge-plan-note { margin: 0; padding: 6px 10px; font-size: 11px; }
.forge-review-status, .forge-shell-status { padding: 6px 10px; margin: 0; font-size: 12px; color: var(--danger); overflow-wrap: anywhere; }
.forge-review-status:empty, .forge-shell-status:empty { display: none; }
.forge-chat-host { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.forge-shell .session-chat { height: 100%; min-height: 0; }
.forge-shell .session-chat-messages { min-height: 0; }
.forge-file-viewer, .forge-diff-viewer { display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; }
.forge-file-title { min-height: 36px; padding: 8px 12px; border-bottom: 1px solid var(--border); font: 12px var(--font-mono); overflow-wrap: anywhere; flex: none; }
.forge-code-scroll, .forge-diff-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 8px 0 32px; }
.forge-code-lines { display: flex; min-width: 100%; width: max-content; font: 13px/20.8px var(--font-mono); }
.forge-line-numbers { min-width: 36px; padding: 0 8px; color: var(--text-faint); text-align: right; white-space: pre; user-select: none; border-right: 1px solid var(--border); }
.forge-code-lines pre { margin: 0; padding: 0 12px; font: inherit; }
.forge-code-lines code { font: inherit; padding: 0; background: none; }
.forge-diff-line { display: flex; min-height: 20px; min-width: 100%; width: max-content; font: 12px/20px var(--font-mono); }
.forge-diff-number { width: 48px; flex: none; padding: 0 8px; text-align: right; color: var(--text-faint); font-size: 11px; user-select: none; }
.forge-diff-marker { width: 28px; flex: none; text-align: center; }
.forge-diff-line code { white-space: pre; padding: 0 12px 0 0; font: inherit; background: none; }
.forge-diff-line.diff-add { color: var(--success); background: rgba(var(--success-rgb), .15); }
.forge-diff-line.diff-remove { color: var(--danger); background: rgba(var(--danger-rgb), .15); }
.diff-add .forge-diff-number { background: rgba(var(--success-rgb), .25); }
.diff-remove .forge-diff-number { background: rgba(var(--danger-rgb), .25); }
.forge-diff-line.diff-hunk { color: var(--accent); min-height: 22px; background: var(--accent-dim); }
.forge-revert-hunk { align-self: center; margin: 2px 8px 2px 0; color: var(--accent); }
.forge-revert-hunk:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.forge-shell .forge-sidebar-panel, .forge-shell .forge-session-cards { overscroll-behavior: contain; }
@media (min-width: 769px) {
  .sidebar-collapsed .forge-project-section > header > span, .sidebar-collapsed .forge-project-name, .sidebar-collapsed .forge-project-row > .forge-counts { display: none; }
  .sidebar-collapsed .forge-rail-message { display: none; }
  .sidebar-collapsed .forge-project-row { padding: 0; justify-content: center; }
  .sidebar-collapsed .forge-project-section > header { justify-content: center; padding: 0; }
}
@media (max-width: 768px) {
  .forge-shell-view.view { padding-top: 62px; }
  .forge-project-sidebar { position: fixed; inset: 0; width: 100vw !important; height: var(--ms-page-height); z-index: 100; border: 0; }
  .forge-project-header { height: 48px; }
  .forge-project-resizer, .forge-pane-divider { display: none; }
  .forge-sidebar-tab { flex: 1; }
  .forge-card-title { white-space: normal; }
  .forge-session-header .forge-branch { max-width: 160px; }
  .forge-surface-tab-group { max-width: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  .forge-project-row.busy .forge-project-name { animation: none; color: var(--text); background: none; }
}
.forge-session-row .status-dot:not(.ok) { background: var(--border-strong); }
.forge-composer [hidden], .forge-session [hidden], .session-chat [hidden] { display: none !important; }
.forge-warning { color: var(--warn); background: rgba(var(--warn-rgb), .08); border: 1px solid rgba(var(--warn-rgb), .35); padding: 10px; border-radius: 8px; font-size: 12px; overflow-wrap: anywhere; }
.forge-chat-tag { margin-left: auto; border: 1px solid var(--border-strong); border-radius: 5px; padding: 2px 5px; font-size: 9px; flex: none; color: var(--accent); }
.session-item:has(.forge-chat-tag) { position: relative; padding-right: 52px; }
.session-item .forge-chat-tag { position: absolute; right: 8px; top: 10px; margin: 0; }
.session-chat-queue { padding: 10px 12px; border-top: 1px solid var(--border); max-height: 180px; overflow-y: auto; flex: none; }
.session-chat-queue-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.session-chat-queue-row textarea { min-width: 0; flex: 1; resize: vertical; font-size: 12px; }
.forge-mode-switch { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 9px; margin-bottom: 18px; flex: none; }
.forge-mode-switch .segmented-tab { flex: 1; padding: 7px 5px; }
.forge-mode-switch small { display: block; font-size: 9px; color: var(--text-faint); }
.forge-mode-rail { display: none; background: none; border: none; color: var(--text); cursor: pointer; padding: 8px; border-radius: 7px; }
.forge-mode-rail svg { width: 22px; height: 22px; } /* The circle mark fills about 60% of its box. */
.forge-preview { display: inline-block; font: 500 10px var(--font-sans); letter-spacing: 0; padding: 2px 7px; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--text-dim); vertical-align: middle; }
.forge-hero { position: relative; isolation: isolate; overflow: hidden; border-radius: 18px; border: 1px solid var(--border); padding: 90px 28px 26px; background: var(--bg-panel); }
.forge-banner { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--bg); }
.forge-banner .dither-canvas { width: 100%; height: 100%; position: absolute; inset: 0; }
.forge-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--wash-rgb), .12), rgba(var(--wash-rgb), .9) 50%, rgb(var(--wash-rgb))); }
:root:not([data-halftone='on']) .forge-banner { display: none; }
.forge-hero-copy { width: min(100%, 680px); margin: auto; text-align: center; }
.forge-hero h1 { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(28px, 3vw, 40px); line-height: 1.15; margin: 18px 0 24px; }
.forge-composer { text-align: left; }
.forge-composer textarea { resize: vertical; border: none; background: transparent; width: 100%; min-width: 0; min-height: 80px; padding: 4px 10px 8px; box-shadow: none; }
.forge-composer textarea:focus { outline: none; box-shadow: none; }
.forge-composer textarea::placeholder { color: var(--text-faint); }
.forge-composer .chat-input-left, .forge-composer .chat-input-right { min-width: 0; max-width: 100%; }
.forge-composer .chat-input-right { flex-shrink: 1; gap: 4px; }
.forge-composer .model-pill { max-width: calc(100% - 38px); flex-shrink: 1; }
.forge-composer .forge-composer-picker, .forge-variant-pill, .forge-branch-pill { min-width: 0; max-width: 100%; }
.forge-composer.chat-input-bar .custom-select-btn { width: auto; height: 30px; min-height: 30px; max-width: min(180px, 100%); padding: 0 8px; gap: 5px; border: 0; border-radius: 999px; background: transparent; box-shadow: none; font-size: 11.5px; }
.forge-composer .custom-select-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.forge-composer .forge-mode-pill { border: 1px solid var(--hairline-soft); border-radius: 999px; background: rgba(var(--ink-rgb), .025); }
.forge-picker-prefix { color: var(--text-faint); font-size: 10px; flex: none; }
.forge-variant-pill { border-left: 1px solid var(--border); }
.forge-first-commit { margin-top: 8px; }
.forge-composer-hint.forge-in-place-hint { color: var(--warn); }
.forge-project-actions, .forge-toolbar, .forge-panel-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.forge-toolbar { justify-content: space-between; padding: 20px 0 12px; }
.forge-widget-grid, .forge-analysis-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.forge-panel { border: 1px solid var(--border); border-radius: 14px; background: var(--bg-panel); padding: 20px; min-width: 0; }
.forge-panel-header { justify-content: space-between; margin-bottom: 14px; }
.forge-panel-header h2 { font-size: 14px; font-weight: 550; margin: 0; }
.forge-panel-header .custom-select { max-width: 240px; }
.forge-widget-body { min-width: 0; }
.forge-widget-body .dashboard-row-copy small { display: block; overflow-wrap: anywhere; }
.forge-lifespan { grid-column: 1 / -1; }
.forge-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: 10px; margin: 12px 0; overflow: hidden; }
.forge-stat { display: grid; gap: 6px; padding: 14px; border-right: 1px solid var(--border); }
.forge-stat:last-child { border-right: none; }
.forge-stat strong { font-size: 28px; font-weight: 500; font-variant-numeric: tabular-nums; }
.forge-delta { color: var(--text-dim); font-size: 10px; }
.forge-activity-total { font-size: 26px; font-weight: 500; margin: 6px 0; }
.forge-bar-chart { position: relative; margin: 14px 0; }
.forge-bar-chart svg { width: 100%; display: block; overflow: visible; }
.forge-bar rect { fill: var(--accent); transition: opacity 120ms ease; }
.forge-bar rect.forge-bar-target { fill: transparent; }
.forge-bar:hover rect:not(.forge-bar-target), .forge-bar:focus rect:not(.forge-bar-target) { fill: var(--chart-2); }
.forge-chart-tooltip { position: absolute; inset: 0 auto auto 0; z-index: 1; max-width: 100%; padding: 7px 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--bg-panel-solid); color: var(--text); font-size: 11px; box-shadow: var(--popup-shadow); pointer-events: none; }
.forge-chart-caption { color: var(--text-faint); font-size: 10px; }
.forge-donut { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.forge-donut svg { width: 160px; max-width: 100%; flex: none; }
.forge-donut-track { fill: none; stroke: var(--surface-2); stroke-width: 22px; }
.forge-legend { list-style: none; padding: 0; margin: 0; min-width: 0; flex: 1; }
.forge-legend li { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 12px; }
.forge-legend i, .forge-heat-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: none; }
.forge-legend strong { margin-left: auto; font-weight: 500; }
.forge-heatmap svg { display: block; width: 100%; }
.forge-heatmap text { fill: var(--text-dim); font: 11px var(--font-sans); }
.forge-heat-legend { display: flex; justify-content: flex-end; align-items: center; gap: 5px; color: var(--text-dim); font-size: 10px; flex-wrap: wrap; }
.forge-ranked { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 11px; }
.forge-ranked th, .forge-ranked td { text-align: right; padding: 9px 4px; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; font-weight: 400; }
.forge-ranked th:first-child { text-align: left; width: 46%; overflow-wrap: anywhere; }
.forge-ranked thead { color: var(--text-dim); }
.forge-path { overflow-wrap: anywhere; white-space: normal; font-size: 12px; }
.forge-form { display: grid; gap: 14px; }
.forge-form input { width: 100%; }
.forge-folder-list { display: grid; gap: 6px; max-height: 240px; overflow: auto; }
.forge-folder-list .btn { text-align: left; white-space: normal; }
@media (min-width: 769px) {
  .sidebar-collapsed .forge-mode-switch { border: none; justify-content: center; padding: 0; }
  .sidebar-collapsed .forge-mode-switch .segmented-tab { display: none; }
  .sidebar-collapsed .forge-mode-rail { display: flex; }
}
@media (max-width: 768px) {
  .forge-widget-grid, .forge-analysis-grid { grid-template-columns: minmax(0, 1fr); }
  .forge-hero { padding: 70px 14px 18px; }
  .forge-panel { padding: 16px; }
  .forge-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .forge-stat { border-bottom: 1px solid var(--border); }
  .forge-composer.chat-input-bar .custom-select-btn { max-width: min(150px, 100%); font-size: 10px; padding-inline: 6px; }
  .forge-donut { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .forge-bar rect { transition: none; } }

/* Kairos: ink and gold on parchment (brand handoff, 2026-10-06).
   The app's working tokens, mapped onto the brand palette in
   kairos-theme.css. Every color in the app comes from these, so Settings >
   Appearance can re-derive them for another base (static/js/appearance.js
   sets the same names); scripts/test_kairos_theme.py fails on a raw color
   anywhere else. Keep custom views on these tokens; see
   specs/frontend-style.md. */
:root {
  color-scheme: light;
  --bg: var(--k-parchment);
  --bg-panel: rgba(251, 246, 238, .86);
  --bg-panel-solid: var(--k-surface);
  --surface-2: var(--k-surface-2);
  --sidebar-bg: #EFE4D2;
  --sidebar-text: var(--k-ink);
  --sidebar-muted: #745F4D;
  --sidebar-accent: #815E1E;
  /* Text tokens hold AA (4.5:1) on every ground here, hover and sidebar
     included; the brand's --k-gold-text, --k-ink-faint and --k-success are
     measured on parchment only, so these are a shade deeper
     (scripts/test_kairos_theme.py). */
  --accent-rgb: 129, 94, 30;
  --accent: #815E1E;
  --accent-dim: rgba(var(--accent-rgb), .1);
  --border: rgba(var(--ink-rgb), .12);
  --border-strong: rgba(var(--ink-rgb), .24);
  --text: var(--k-ink);
  --text-dim: var(--k-ink-dim);
  --text-faint: #745F4D;
  --danger: var(--k-danger);
  --danger-rgb: 168, 67, 47;
  --success: #4D6C48;
  --success-rgb: 77, 108, 72;
  --warn: #8C5815;
  --warn-rgb: 140, 88, 21;
  /* Washes and shadows. --ink-rgb tints toward the text (hover, pressed,
     quiet fills); --shade-rgb darkens (shadows, insets, scrims). On a dark
     base appearance.js sets ink to white and shade to black. */
  --ink-rgb: 58, 42, 32;
  --shade-rgb: 58, 42, 32;
  --scrim: rgba(58, 42, 32, .28);
  --hairline: var(--k-hairline);
  --hairline-soft: var(--k-hairline-soft);
  /* Parchment as numbers, for washes over brand imagery (always light,
     whatever the appearance). */
  --parchment-rgb: 243, 234, 219;
  /* The halftone washes' color: parchment, or a Color theme's base (appearance.js). */
  --wash-rgb: var(--parchment-rgb);
  /* The gold point of the mark: the one gilded thing. */
  --point: var(--k-gold);
  /* Categorical colors for charts and graphs (the vault map): mid-tones that
     read as marks on parchment and on a dark base. Never text. */
  --chart-1: #B8893B; --chart-2: #C9786E; --chart-3: #6F97B5; --chart-4: #7E9A72;
  --chart-5: #C2915C; --chart-6: #9C82A8; --chart-7: #8A7A66; --chart-8: #5F8C8A;
  --radius: 12px;
  --sidebar-width: 204px;
  --sidebar-rail-width: 52px;
  --chat-column: 860px;
  --chat-pane-width: 520px;
  /* Default ink on a rendered document page (slides): the page stays white in
     every theme, like the HTML preview, so its text does too. */
  --page-ink: #202124;
  --page-max: 1200px;
  --library-max: 1440px;
  --shadow-elevated: 0 12px 40px rgba(var(--shade-rgb), .10);
  /* Every menu and picker (the popup block further down). */
  --popup-shadow: 0 1px 2px rgba(var(--shade-rgb), .06), 0 14px 36px rgba(var(--shade-rgb), .14);
  --shadow-lifted: 0 16px 50px rgba(var(--shade-rgb), .14);
  --ease-out: cubic-bezier(.22,1,.36,1);
  --font-sans: var(--k-font-sans);
  --font-display: var(--k-font-serif);
  --font-mono: 'Cascadia Code', Consolas, monospace;
}

* { box-sizing: border-box; }

/* -- custom scrollbars everywhere (David's ask, 2026-08-31) -------------- */
/* Electron/Chromium supports ::-webkit-scrollbar directly, so this applies
   globally to every scrollable element (sidebar, chat sessions/messages,
   any .view with overflow-y) without needing per-component wiring. */
* {
  scrollbar-width: thin; /* Firefox-shaped fallback, harmless in Chromium */
  scrollbar-color: var(--border-strong) transparent;
}
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb), 0.25);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-rgb), 0.45); background-clip: padding-box; }
*::-webkit-scrollbar-corner { background: transparent; }

/* The phone page height (2026-10-21). In the browser it is the dynamic
   viewport, so nothing hides behind Safari's or Chrome's toolbars. A
   home-screen app has no toolbars, and iOS (26, black-translucent status bar)
   reports a layout viewport short by the status bar (100dvh, 100%, innerHeight
   and position:fixed inset:0 alike) while 100lvh is the true screen, so the
   page takes the larger of the two. --ms-below-fold is the part of the page
   below the layout viewport: 0 everywhere except that iOS case; fixed bottom
   surfaces drop by it (redesign-mobile.css). */
:root { --ms-page-height: 100%; --ms-below-fold: calc(var(--ms-page-height) - 100%); }
@supports (height: 100dvh) {
  :root { --ms-page-height: 100dvh; --ms-below-fold: calc(var(--ms-page-height) - 100dvh); }
  @media (display-mode: standalone) { :root { --ms-page-height: max(100dvh, 100lvh); } }
}
/* iPhone (WebKit's -webkit-touch-callout; not Android, not desktop), at
   phone width: the home-screen app draws its own haze below the status bar
   that no page style changes, so everything that clears the top safe area
   (--mobile-safe-top, interface.css) clears 12px more (2026-10-21, David on
   device). A Safari tab gets the same spacing so the two look alike. The
   status-bar frost itself stays within the true safe area. */
:root { --ms-ios-nudge: 0px; }
@supports (-webkit-touch-callout: none) {
  @media (max-width: 768px) { :root { --ms-ios-nudge: 12px; } }
}

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg); color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px; line-height: 1.5; letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

#app { display: flex; height: 100%; }

/* Shared solid panel; legacy class name retained for custom-view compatibility. */
.glass {
  background: var(--bg-panel);
  border: 1px solid var(--border); border-radius: var(--radius);
  position: relative;
}

.bracket { position: relative; }
/* Compatibility class for existing/custom views; HUD brackets are retired. */

/* -- sidebar ---------------------------------------------------------- */
#sidebar {
  width: var(--sidebar-width); flex-shrink: 0;
  background: var(--sidebar-bg); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; padding: 24px 12px 14px;
  position: relative; z-index: 10;
  transition: width 260ms var(--ease-out);
}

.sidebar-header { display: flex; align-items: center; gap: 4px; height: 28px; flex-shrink: 0; margin-bottom: 28px; }
/* -- the desktop title bar -------------------------------------------------
   One bar across the window: drag anywhere on it. It sits above every layer,
   so a dialog's dimming passes underneath and never greys out the Windows
   controls, which are painted over its right end in the bar's own colour. */
:root { --titlebar-h: 0px; }
:root.electron-shell { --titlebar-h: 36px; }
.titlebar { display: none; }
:root.electron-shell .titlebar {
  display: flex; align-items: center; gap: 14px; position: fixed; inset: 0 0 auto; z-index: 10100;
  height: var(--titlebar-h); padding: 0 152px 0 18px; background: var(--sidebar-bg);
  border-bottom: 1px solid var(--border); -webkit-app-region: drag; user-select: none;
}
:root.electron-shell.platform-mac .titlebar { padding: 0 18px 0 84px; } /* clears the traffic lights */
.titlebar-brand { display: flex; align-items: center; gap: 8px; color: var(--text); }
.titlebar-brand .brand-wordmark { height: 12px; width: auto; }
.titlebar-tab { color: var(--text-faint); font-size: 12px; padding-left: 14px; border-left: 1px solid var(--border); line-height: 14px; }
.titlebar-tab:empty { display: none; }
:root.electron-shell #app { margin-top: var(--titlebar-h); height: calc(100% - var(--titlebar-h)); }
:root.electron-shell #brand { display: none; }
:root.electron-shell #sidebar { padding-top: 12px; }
:root.electron-shell .sidebar-header { justify-content: flex-end; margin-bottom: 6px; }
#sidebar-toggle { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; padding: 0; border: none; border-radius: 7px; background: transparent; color: var(--text-faint); cursor: pointer; }
#sidebar-toggle:hover { background: var(--surface-2); color: var(--text); }
.sidebar-toggle-chevron { transform-origin: 14px 12px; transition: transform 260ms var(--ease-out); }
.sidebar-tooltip { position: fixed; z-index: 2700; pointer-events: none; padding: 7px 10px; background: var(--bg-panel-solid); border: 1px solid var(--border-strong); border-radius: 7px; box-shadow: var(--shadow-elevated); color: var(--text); font-size: 12px; opacity: 0; transform: translateX(-4px); transition: opacity 120ms ease, transform 120ms ease; }
.sidebar-tooltip.show { opacity: 1; transform: translateX(0); }

#brand {
  display: flex; align-items: center; gap: 10px;
  padding: 0 8px; flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; font-weight: 550; color: var(--text);
  letter-spacing: .08em; font-size: 14px;
}
/* The wordmark (static/js/brand.js): the full logo, never beside the icon
   (its O is the icon). 14px tall is about 82px wide, over the brand's 72px
   minimum. Only the point is gold. */
#brand .brand-wordmark { height: 14px; width: auto; flex-shrink: 0; color: var(--text); overflow: visible; }
.brand-point { fill: var(--point); }
/* A development copy of Kairos (app.js buildSidebar). */
#brand .instance-badge, .titlebar-brand .instance-badge {
  padding: 1px 6px; border-radius: 6px; border: 1px solid var(--accent); color: var(--accent);
  font-size: 10px; font-weight: 600; letter-spacing: .06em;
}

nav#nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; overflow-x: hidden; }

#brand, .nav-item > span, .sidebar-user-name { transition: opacity 150ms ease; }
.nav-item > span { white-space: nowrap; overflow: hidden; }
@media (min-width: 769px) {
  .sidebar-collapsed #sidebar { width: var(--sidebar-rail-width); padding-left: 6px; padding-right: 6px; }
  .sidebar-collapsed #brand { flex: 0 0 0; padding: 0; opacity: 0; }
  .sidebar-collapsed .sidebar-header { justify-content: center; gap: 0; }
  .sidebar-collapsed .sidebar-toggle-chevron { transform: rotate(180deg); }
  .sidebar-collapsed .nav-item > span,
  .sidebar-collapsed .sidebar-user-name { width: 0; opacity: 0; }
  .sidebar-collapsed .nav-item { gap: 0; justify-content: center; padding: 10px 0; }
  .sidebar-collapsed .nav-group-label { font-size: 0; height: 26px; padding: 0; margin: 12px 10px 0; border-top: 1px solid var(--border); }
  .sidebar-collapsed #sidebar-footer { padding: 10px 0 0; }
  .sidebar-collapsed .sidebar-footer-row { flex-direction: column; align-items: center; }
  .sidebar-collapsed .sidebar-footer-row > div { flex: none !important; width: 100%; }
  .sidebar-collapsed .sidebar-user-card { justify-content: center; gap: 0; padding: 8px 0; }
  .sidebar-collapsed .sidebar-settings-btn { width: 36px; height: 36px; }
}
@media (max-width: 768px) {
  #sidebar-toggle { display: none; }
  .sidebar-header { padding-left: 46px; } /* Clears the fixed mobile menu button. */
}

.nav-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 11px; border-radius: 7px; text-align: left;
  color: var(--text-faint); font: inherit; font-size: 13px; cursor: pointer;
  background: transparent; border: 1px solid transparent;
  transition: color .18s, background .18s; user-select: none;
}
.nav-item svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.8; }
.nav-item:hover { color: var(--text); background: rgba(var(--ink-rgb), 0.04); }
.nav-item.active {
  color: var(--text); background: var(--surface-2); border-color: rgba(var(--ink-rgb), .035);
}
.nav-item.active svg {
  opacity: 1; color: var(--text);
}
.nav-divider { height: 1px; background: var(--border); margin: 10px 4px; opacity: 0.5; }

#sidebar-footer { padding: 10px 6px 0; }

/* -- sidebar footer: username card + separate Settings button (David's ask
   2026-08-31, split from the original single combined card) — the
   Odysseus-screenshot bottom-left avatar+username+gear layout, but the
   gear is its own distinct click into Settings, while the username card
   opens a Switch User/Log Out menu instead. */
.sidebar-footer-row { display: flex; align-items: center; gap: 6px; }
.sidebar-user-card {
  display: flex; align-items: center; padding: 9px 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid transparent; color: var(--text-dim); min-width: 0;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.sidebar-user-card:hover { color: var(--text); background: rgba(var(--ink-rgb), 0.04); border-color: var(--border); }
.sidebar-user-name { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-settings-btn {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 8px; cursor: pointer;
  background: none; border: 1px solid transparent; color: var(--text-dim);
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.sidebar-settings-btn:hover { color: var(--text); background: rgba(var(--ink-rgb), 0.04); border-color: var(--border); }
.sidebar-settings-btn svg { width: 16px; height: 16px; opacity: 0.8; }

/* -- main content ------------------------------------------------------ */
#content { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }

/* overflow-x:hidden here is a real fix, not cosmetic (David's ask
   2026-09-01: several pages had a horizontal scrollbar on mobile) — per the
   CSS spec, overflow-y:auto with overflow-x left at its default "visible"
   makes the browser silently compute overflow-x as "auto" too, so EVERY
   tab (this is the shared base class) was quietly scrollable sideways
   whenever any content ran even slightly wide, not just the pages it was
   actually noticed on. */
.view {
  display: none; flex: 1; flex-direction: column; min-height: 0;
  padding: 32px 36px; overflow-y: auto; overflow-x: hidden;
}
/* Soft fade-slide on every tab switch (David's ask 2026-09-02, proper-app
   polish) — animation triggers on the display:none → flex flip switchTab()
   performs, so no JS wiring needed. Short and subtle on purpose. */
.view.active { display: flex; animation: view-in 0.18s ease; }
@keyframes view-in { from { opacity: 0; transform: translateY(6px); } }

/* Readable content width (David's ask 2026-09-03) — without this, forms and
   card lists stretched the full width of a wide monitor, which reads as
   unfinished. Applied via a wrapper class rather than to .view itself so
   full-bleed views (Home's 3D core, Chat's two-column layout, Calendar's
   grid, Brain's vault graph) can opt out by simply not using it. */
.view-constrained { width: 100%; max-width: var(--page-max); margin: 0 auto; }
.view-constrained.library-view, .view-constrained.library-editor { max-width: var(--library-max); }

.view-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 26px; padding-bottom: 20px; border-bottom: 1px solid var(--border);
}
/* Page titles are display moments: the brand serif. */
.view-header h2 {
  font-family: var(--font-display); font-style: italic; font-weight: 500; letter-spacing: 0; margin: 0; font-size: 32px; line-height: 1.1; color: var(--text);
}
.view-header .sub {
  color: var(--text-faint); font-size: 13px; margin-top: 6px; line-height: 1.5;
}

/* Buttons (BRAND.md section 5): secondary is a hairline pill, primary
   (.btn.primary) an ink-filled one. */
.btn {
  background: transparent; border: 1px solid var(--hairline-soft);
  color: var(--text); border-radius: 999px; padding: 8px 14px; min-height: 32px;
  font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer;
  transition: background .18s, border-color .18s, translate .18s var(--ease-out);
  white-space: nowrap;
}
.btn:hover {
  background: var(--surface-2); border-color: var(--hairline);
}
.btn:active:not(:disabled) { translate: 0 1px; }
.btn:disabled { opacity: 0.35; cursor: default; transform: none; box-shadow: none; }
.btn.danger {
  border-color: rgba(var(--danger-rgb), .25); color: var(--danger); background: rgba(var(--danger-rgb), .06);
}
.btn.danger:hover {
  background: rgba(var(--danger-rgb), .12);
}

input, textarea, select {
  background: rgba(var(--ink-rgb), .025); border: 1px solid var(--border-strong);
  border-radius: 10px; padding: 8px 12px; color: var(--text); font-size: 13px; font-family: inherit;
  transition: border-color .18s, box-shadow .18s;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select { min-height: 34px; }
/* Native date and time pickers keep their behaviour, in the app's type. */
input[type=date], input[type=datetime-local], input[type=time] { color: var(--text); font-variant-numeric: tabular-nums; }
input[type=date]::-webkit-calendar-picker-indicator, input[type=datetime-local]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
input[type=date]::-webkit-calendar-picker-indicator:hover, input[type=datetime-local]::-webkit-calendar-picker-indicator:hover { opacity: .9; }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: inset 0 1px 2px rgba(var(--shade-rgb), 0.06), 0 0 0 3px rgba(var(--accent-rgb), 0.12);
}

/* Keyboard focus ring (David's ask 2026-09-03) — only inputs had any focus
   styling, so tabbing through the sidebar, cards, or buttons was invisible.
   :focus-visible (not :focus) so a mouse click never paints a ring, only
   real keyboard navigation does. */
.btn:focus-visible,
.nav-item:focus-visible,
.row-action-btn:focus-visible,
.segmented-tab:focus-visible,
.sidebar-user-card:focus-visible,
.sidebar-settings-btn:focus-visible,
.overflow-menu-item:focus-visible,
.palette-item:focus-visible,
.input-icon-btn:focus-visible,
.msg-action-btn:focus-visible,
.custom-select-btn:focus-visible,
.modal-close-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}

/* Every <select> in the app (David's ask 2026-08-31: "fix the dropdown to
   match the overall style, same for all dropdowns") — the shared
   input/textarea/select rule above already matched panel/border/text color,
   but a native <select> still renders the OS's own plain gray caret, which
   breaks the glass/cyan look. Swap it for a hand-drawn cyan chevron (same
   stroke-SVG style as every other icon in the app, e.g. .nav-item svg) via
   a background-image, since `currentColor` doesn't apply inside one. The
   list it opens is the app's own menu, not the OS's (useAppMenusForSelects
   in api.js, 2026-10-07). */
select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url('../img/chevron-down.svg');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  padding-right: 30px;
  cursor: pointer;
}

/* Custom dropdown (David's ask 2026-09-01, real screenshot showing a
   native <select>'s open option-list still rendering bright white despite
   `color-scheme: dark` above — that native popup is OS/Chromium chrome, not
   real page CSS, and doesn't reliably honor it in Electron). Built as a real
   styled DOM node instead, same visual language as .model-picker-menu /
   .overflow-menu so it never happens again for any dropdown. See
   customSelect() in api.js — every <select> in the app now goes through
   this instead of a native element. */
.custom-select { position: relative; display: inline-flex; min-width: 0; }
.custom-select.disabled { opacity: 0.45; pointer-events: none; }
.custom-select-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  background: rgba(var(--ink-rgb), 0.035); border: 1px solid var(--border);
  border-radius: 10px; padding: 0 12px; min-height: 34px; color: var(--text); font-size: 13px; font-family: inherit;
  box-shadow: inset 0 1px 2px rgba(var(--shade-rgb), 0.06);
  cursor: pointer; text-align: left;
}
.custom-select-btn:hover { border-color: var(--border-strong); }
.custom-select-btn:focus { outline: none; border-color: var(--accent); box-shadow: inset 0 1px 2px rgba(var(--shade-rgb), 0.06), 0 0 0 3px rgba(var(--accent-rgb), 0.12); }
.custom-select-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Drawn in the text color through a mask, so it follows any appearance. */
.custom-select-chevron {
  flex-shrink: 0; width: 12px; height: 12px; background: var(--text-faint);
  -webkit-mask: url('../img/chevron-down.svg') center / 12px no-repeat;
  mask: url('../img/chevron-down.svg') center / 12px no-repeat;
}
.custom-select-menu {
  /* `fixed`, positioned in JS from the button's real getBoundingClientRect()
     and appended straight to <body> (see openOptionMenu() in api.js) — not
     `absolute` inside .custom-select. A real bug found live 2026-09-01: an
     `absolute` menu can only paint above elements sharing its own stacking
     context, and a sibling `.glass.bracket.card` further down the page (its
     own stacking context via backdrop-filter) painted over it regardless of
     z-index. z-index 2500 clears the Settings window's .modal-backdrop
     (1500) and the onboarding overlay (2000). */
  position: fixed; z-index: 2500; min-width: 160px;
  max-height: 260px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
}
.custom-select-heading { padding: 8px 10px 4px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.custom-select-item {
  display: block; width: 100%; cursor: pointer; text-align: left; background: none; border: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.custom-select-item.disabled { opacity: 0.4; cursor: default; }
.custom-select-item.disabled:hover { background: none; }

/* Custom checkmark checkbox (David's ask 2026-08-31) — every
   <input type="checkbox"> in the app (onboarding's area picker, calendar
   all-day/filter toggles, chat's file-attach picker, notes' task checkbox,
   Settings' admin toggles) gets one shared look instead of the OS default
   square. Still a real native checkbox underneath (appearance: none only
   changes paint, not behavior/semantics), so every existing `.checked`
   read/write in JS keeps working unchanged. */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px; height: 16px; flex-shrink: 0;
  margin: 0; padding: 0;
  display: inline-block; vertical-align: middle;
  position: relative;
  cursor: pointer;
  background: rgba(var(--ink-rgb), 0.035);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  box-shadow: inset 0 1px 2px rgba(var(--shade-rgb), 0.06);
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
input[type="checkbox"]:hover { border-color: var(--accent); }
input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: inset 0 1px 2px rgba(var(--shade-rgb), 0.06), 0 0 0 3px rgba(var(--accent-rgb), 0.12);
}
input[type="checkbox"]:checked {
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.34), rgba(var(--accent-rgb), 0.15));
  border-color: var(--accent);
  box-shadow: none;
}
/* The check draws itself on the box just clicked (it has focus); boxes that
   load already checked don't animate. */
input[type="checkbox"]:checked:focus::after { animation: check-draw 200ms cubic-bezier(.22, 1, .36, 1); }
@keyframes check-draw { from { transform: rotate(45deg) scale(.2); opacity: 0; } }
input[type="checkbox"]:checked::after {
  content: "";
  position: absolute; left: 5px; top: 2px;
  width: 4px; height: 8px;
  border: solid var(--accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.card {
  padding: 18px 20px; margin-bottom: 10px; transition: border-color .18s;
}
.card:hover {
  border-color: var(--border-strong);
}
.card .title { font-size: 13.5px; color: var(--text); }
.card .meta {
  font-size: 12px; color: var(--text-faint); margin-top: 5px; line-height: 1.55;
}
.card-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.empty-state { color: var(--text-faint); font-size: 13px; padding: 30px 0; text-align: center; letter-spacing: 0.4px; line-height: 1.6; }

/* -- rich empty states (David's ask 2026-09-03) — icon + hint + optional
   primary action, replacing bare one-line sentences. */
.empty-state-rich { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 44px 20px; }
.empty-state-icon { width: 40px; height: 40px; opacity: 0.3; margin-bottom: 8px; }
.empty-state-icon svg { width: 100%; height: 100%; }
.empty-state-title { font-family: var(--font-display); font-style: italic; font-size: 19px; font-weight: 500; color: var(--text-dim); }
.empty-state-hint { font-size: 12.5px; color: var(--text-faint); max-width: 380px; }

/* -- row action icon buttons (David's ask 2026-09-03) — replaces repeated
   full-text Delete/Remove buttons down a list. Hidden until the row is
   hovered or something inside it has keyboard focus, same reveal idea as
   chat's .msg-actions, so lists read as content first. */
.row-actions { display: flex; align-items: center; gap: 2px; opacity: 0; transition: opacity 0.14s ease; }
.has-row-actions:hover .row-actions,
.has-row-actions:focus-within .row-actions { opacity: 1; }
.row-action-btn {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border-radius: 7px; cursor: pointer;
  background: none; border: 1px solid transparent; color: var(--text-dim);
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.row-action-btn svg { width: 15px; height: 15px; }
.row-action-btn:hover { color: var(--text); background: rgba(var(--ink-rgb), 0.06); border-color: var(--border); }
.row-action-btn.danger:hover { color: var(--danger); background: rgba(var(--danger-rgb), 0.1); border-color: rgba(var(--danger-rgb), 0.35); }
/* Touch devices have no hover — always show the controls there rather than
   leaving them permanently unreachable. */
@media (hover: none) {
  .row-actions { opacity: 1; }
}

/* -- confirm dialog (David's ask 2026-09-03) ---------------------------- */
.confirm-panel { width: 400px; }
.confirm-panel h4 { display: block; margin-bottom: 8px; }
/* pre-wrap: a message can carry its own line breaks (the hook command
   confirmation shows the exact command, then what it does). */
.confirm-panel .muted { margin-bottom: 18px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* -- labeled form fields (David's ask 2026-09-03) — the toolbar rows in
   Email/Tasks/Calendar/Notes were bare placeholder-only inputs crammed into
   one wrapping flex row, which reads as a debug form. .field pairs each
   control with a real label; .form-grid lays them out responsively. */
.form-grid { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field > label {
  font-size: 12px; color: var(--text-dim); font-weight: 400;
}
.field-grow { flex: 1 1 200px; }
.field-sm { flex: 0 0 92px; }
/* Keeps a bare button aligned with the input baseline in a .form-grid row,
   since it has no label above it to take up that vertical space. */
.form-grid .btn { margin-bottom: 1px; }

.coming-soon { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; gap: 8px; }
.coming-soon .icon-large { opacity: 0.3; }
.coming-soon h3 { font-weight: 300; color: var(--text-dim); letter-spacing: 1px; }
.coming-soon p { color: var(--text-faint); font-size: 12.5px; max-width: 380px; text-align: center; }

/* -- Tool Store tab builder ------------------------------------------- */
.tab-build-form { width: 100%; max-width: 560px; display: flex; flex-direction: column; gap: 16px; }
.tab-build-field { display: flex; flex-direction: column; gap: 6px; }
.tab-build-field label { font-size: 12px; color: var(--text-dim); letter-spacing: 0.3px; }
.tab-build-field textarea { resize: vertical; font-family: inherit; }
.tab-build-checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-dim); cursor: pointer; }
.tab-build-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.tab-build-chip {
  background: rgba(var(--ink-rgb), 0.035); border: 1px solid var(--border); color: var(--text-dim);
  border-radius: 999px; padding: 6px 12px; font-size: 12px; cursor: pointer;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.tab-build-chip:hover { color: var(--text); border-color: var(--border-strong); }
.tab-build-chip.active { color: var(--accent); background: var(--accent-dim); border-color: var(--border-strong); }
.tab-build-error { color: var(--danger); font-size: 12.5px; }
.tab-build-build-btn { align-self: flex-start; padding: 10px 20px; font-size: 13.5px; }

/* -- onboarding ---------------------------------------------------------
   Full-screen first-run wizard (David's ask, 2026-08-31) — shown in place
   of the normal sidebar+view shell until settings.onboarding_complete is
   true, then never again. */
.onboarding-overlay {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(rgba(var(--shade-rgb), .1), rgba(var(--shade-rgb), .2)), url('../img/kairos-sky.jpg') center / cover;
}
.onboarding-overlay.hidden { display: none; }
.onboarding-card { width: 480px; max-width: 90vw; max-height: min(90vh, 760px); overflow-y: auto; padding: 32px 30px; background: var(--bg-panel-solid); box-shadow: var(--shadow-elevated); }
.onboarding-card h2 { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(30px, 4vw, 42px); line-height: 1.1; letter-spacing: 0; margin-bottom: 12px; }
.onboarding-card .sub { color: var(--text-dim); font-size: 13px; margin-bottom: 20px; }
.onboarding-steps { display: flex; gap: 6px; margin-bottom: 22px; }
.onboarding-steps .dot { flex: 1; height: 3px; border-radius: 2px; background: var(--border); }
.onboarding-steps .dot.active { background: var(--accent); }
.onboarding-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; }

/* -- chat -------------------------------------------------------------- */
.chat-layout { flex-direction: row; padding: 0; }
/* The halftone background (static/js/chatBackdrop.js, David 2026-10-07):
   the figure while the chat is empty, the sky once it has messages, each
   under its own parchment wash, which crossfades with the dot dissolve.
   Other appearances draw their own background instead. */
.chat-layout { position: relative; isolation: isolate; }
.chat-backdrop { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: rgb(var(--wash-rgb)); }
.chat-backdrop .dither-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.chat-backdrop::before, .chat-backdrop::after { content: ""; position: absolute; inset: 0; z-index: 1; transition: opacity 700ms ease; }
/* Figure: the composer and greeting sit centre-left; the figure shows right. */
.chat-backdrop::before { opacity: 0; background:
  radial-gradient(ellipse 46% 40% at 42% 50%, rgba(var(--wash-rgb), .9), rgba(var(--wash-rgb), .55) 60%, rgba(var(--wash-rgb), 0) 100%),
  linear-gradient(90deg, rgba(var(--wash-rgb), .62), rgba(var(--wash-rgb), .3) 55%, rgba(var(--wash-rgb), .08)); }
/* Sky: the same wash the photo had, so messages read as before. */
.chat-backdrop::after { opacity: 0; background: linear-gradient(color-mix(in srgb, rgb(var(--wash-rgb)) 66%, transparent), color-mix(in srgb, rgb(var(--wash-rgb)) 76%, transparent)); }
.chat-backdrop[data-scene='figure']::before, .chat-backdrop[data-scene='sky']::after { opacity: 1; }
:root:not([data-halftone='on']) .chat-backdrop { display: none; }
@media (max-width: 768px) {
  /* On a phone the composer spans the width and the figure sits behind it. */
  .chat-backdrop::before { background: linear-gradient(180deg, rgba(var(--wash-rgb), .5), rgba(var(--wash-rgb), .84) 40%, rgba(var(--wash-rgb), .84) 66%, rgba(var(--wash-rgb), .45)); }
}

/* Home and Chat (app.js switchTab): Home's card grows into this background
   (and back), while each side's text fades out and the other's fades in
   over it. The names exist only during the transition. */
:root.tab-transition .dashboard-core, :root.tab-transition .chat-backdrop { view-transition-name: kairos-backdrop; }
/* No blur while it animates: the browser carries the column's backdrop blur
   onto its transition layer, which kept blurring Home's left side after the
   column had faded (found 2026-10-07). */
:root.tab-transition #chat-sessions { view-transition-name: kairos-chat-sessions; backdrop-filter: none; }
::view-transition-group(kairos-chat-sessions) { backdrop-filter: none; }
:root.tab-transition #chat-main { view-transition-name: kairos-chat-main; }
/* Home's card text fades over the background instead of being covered by it. */
:root.tab-transition .dashboard-header { view-transition-name: kairos-home-header; }
:root.tab-transition .dashboard-intro { view-transition-name: kairos-home-intro; }
/* overflow: clip, because these images, unlike <img>, aren't clipped when
   object-fit scales them past their box (found 2026-10-07: the card spilled
   over the sidebar). */
::view-transition-group(kairos-backdrop) { overflow: clip; animation-duration: 480ms; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
::view-transition-old(kairos-backdrop), ::view-transition-new(kairos-backdrop) {
  height: 100%; object-fit: cover; object-position: 70% 40%; animation-duration: 480ms; }
::view-transition-new(kairos-chat-main), ::view-transition-new(kairos-chat-sessions),
::view-transition-new(kairos-home-header), ::view-transition-new(kairos-home-intro) { animation: chat-lands 300ms 200ms both ease-out; }
::view-transition-old(kairos-chat-main), ::view-transition-old(kairos-chat-sessions),
::view-transition-old(kairos-home-header), ::view-transition-old(kairos-home-intro) { animation: chat-leaves 160ms both ease-in; }
@keyframes chat-leaves { to { opacity: 0; } }
@keyframes chat-lands { from { opacity: 0; transform: translateY(6px); } }

/* -- status rows + dots (System panel, and reused by the Activity feed) -- */
.status-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--border); font-size: 12.5px; }
.status-row:first-of-type { border-top: none; }
.status-label { color: var(--text-dim); }
.status-detail { margin-left: auto; text-align: right; }
.status-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.status-dot.ok {
  background: var(--success);
}
.status-dot.warn {
  background: var(--warn);
}
.status-dot.err {
  background: var(--danger);
}
@keyframes status-pulse { 50% { opacity: 0.45; } }

.activity-item { display: flex; align-items: baseline; gap: 8px; }
.activity-item .status-dot { align-self: center; }
.activity-msg { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-time { flex-shrink: 0; }

/* -- skeleton shimmer (loading placeholders, proper-app polish) ---------- */
.skeleton {
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(var(--ink-rgb), 0.04) 25%, rgba(var(--ink-rgb), 0.09) 50%, rgba(var(--ink-rgb), 0.04) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer { to { background-position: -200% 0; } }
.skeleton-title { height: 13px; width: 40%; margin-bottom: 12px; }
.skeleton-line { height: 11px; width: 100%; margin: 9px 0; }
.skeleton-line:nth-child(odd) { width: 82%; }
/* The history column sits on the chat's own sky behind a wash, and its header
   row matches the conversation's (54 px, one hairline), so the top reads as
   one band under the title bar. */
#chat-sessions {
  width: 236px; flex-shrink: 0; border-right: 1px solid var(--border);
  background: color-mix(in srgb, var(--sidebar-bg) 74%, transparent); backdrop-filter: blur(8px);
  padding: 0 12px 18px; overflow-y: auto; overflow-x: hidden;
  transition: width 260ms var(--ease-out), padding 260ms var(--ease-out), opacity 180ms ease;
}
#chat-sessions > * { min-width: 180px; }
.chat-history-close.input-icon-btn { display: none; }
@media (min-width: 769px) {
  .chat-history-collapsed #chat-sessions { width: 0; padding-inline: 0; border-right-width: 0; opacity: 0; pointer-events: none; }
}
#chat-main {
  flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0;
}
/* A quiet, shared desktop/mobile header; history never needs a second rail. */
.chat-mobile-header {
  display: flex; align-items: center; gap: 10px; padding: 10px 18px; min-height: 54px; border-bottom: 1px solid var(--border);
  color: var(--text-dim); font-size: 12px; font-weight: 450; flex-shrink: 0;
}
.chat-mobile-menu-btn { color: var(--text-faint); }
.chat-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.chat-composer-dock { flex-shrink: 0; width: min(calc(100% - 48px), var(--chat-column)); margin: 0 auto; position: relative; z-index: 4; }
#chat-main.is-empty #chat-messages { flex: 0; padding: 0; }
#chat-main.is-empty .chat-composer-dock { margin-block: auto; }
/* ======================================================================
   Chat conversation — Claude-style (David's ask 2026-09-03: "look a lot
   more like Claude's UI, floating bubble chat box, messages floating in
   the middle of the screen, Claude's idle thinking design").

   Replaces the previous Odysseus-style layout, where EVERY message was a
   bordered card with a status-dot + role + timestamp header. Claude's
   actual shape, which this now follows: one centered reading column; the
   user's turn is a compact rounded bubble on the right; the assistant's
   turn is plain unboxed text that just flows down the page (no card, no
   border, no avatar row); per-message chrome only appears on hover.
   ====================================================================== */
#chat-messages {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  padding: 28px 24px 20px; scrollbar-gutter: stable both-edges;
  display: flex; flex-direction: column; gap: 24px;
}

/* Bubble/alignment behavior lives on .msg itself (not scoped to
   #chat-messages) so the School tab's own compact course-chat panel, which
   reuses these same classes, gets the identical look for free. */
.msg {
  display: flex; flex-direction: column; align-items: flex-start; line-height: 1.75; font-size: 15px;
}
.msg.user { align-items: flex-end; }

/* The centered reading column — the "floating in the middle of the screen"
   part. Scoped to the main chat only: School's panel lives in half a
   column and should fill its container instead. */
#chat-messages > .msg { width: 100%; max-width: var(--chat-column); margin: 0 auto; }

.msg-body { word-wrap: break-word; white-space: pre-wrap; max-width: 100%; }

/* User turn: compact rounded bubble, hugging its own content. */
.msg.user .msg-body {
  max-width: 82%; padding: 12px 18px; border-radius: 18px;
  background: var(--surface-2); border: 1px solid rgba(var(--ink-rgb), .025);
}
/* Assistant turn: no bubble at all — plain text in the column, Claude's
   most recognizable trait. */
.msg.assistant .msg-body { color: var(--text); }
.msg-generated-image { display: block; max-width: 420px; width: 100%; border-radius: 10px; margin: 8px 0; border: 1px solid var(--border); }
.msg-generated-file { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0; padding: 8px 12px; border-radius: 8px; background: var(--surface-2, rgba(var(--ink-rgb), 0.05)); border: 1px solid var(--border); color: var(--accent); text-decoration: none; font-size: 13px; }
.msg-generated-file:hover { border-color: var(--accent); }

/* Streaming cursor + done marker (David's ask 2026-09-02) — a continuously
   blinking cursor while a reply is still streaming (survives silent gaps
   between chunks, e.g. a tool call between two text blocks), a small
   checkmark once it's genuinely finished. */
.msg-cursor {
  display: inline-block; width: 2px; height: 15px; margin-left: 2px; vertical-align: text-bottom;
  background: var(--accent); animation: msg-cursor-blink 1s step-start infinite;
}
@keyframes msg-cursor-blink { 50% { opacity: 0; } }
.msg-done { display: inline-flex; color: var(--accent); opacity: 0.85; }

/* -- idle "thinking" indicator, Claude-style ---------------------------
   Replaces the old rotating "." / ".." / "..." driven by a JS setInterval.
   Claude's is a shimmer: a highlight sweeping left-to-right across the
   word, done purely in CSS via a moving gradient clipped to the text, so
   there's no timer to leak and it keeps animating through silent gaps in
   a long tool-using turn. */
.msg-thinking-row { display: flex; align-items: center; gap: 9px; }
.msg-thinking-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0;
  animation: thinking-pulse 1.8s ease-in-out infinite;
}
@keyframes thinking-pulse {
  0%, 100% { opacity: 0.25; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1); }
}
.msg-thinking-text {
  font-size: 13.5px; letter-spacing: 0.3px;
  background: linear-gradient(90deg, var(--text-faint) 30%, var(--accent) 50%, var(--text-faint) 70%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: thinking-shimmer 2s linear infinite;
}
@keyframes thinking-shimmer { to { background-position: -200% 0; } }

/* An interrupted/failed reply reads as failed rather than just stopping
   mid-sentence (David's ask 2026-09-03). Assistant turns have no border to
   tint now, so this marks the text itself. */
.msg.msg-failed .msg-body { color: var(--danger); }
.msg.msg-failed.user .msg-body { border-color: rgba(var(--danger-rgb), 0.4); background: rgba(var(--danger-rgb), 0.05); }

.msg-actions {
  display: flex; align-items: center; gap: 4px; margin-top: 7px;
  opacity: 0; transition: opacity 0.14s;
}
.msg:hover .msg-actions, .msg:focus-within .msg-actions { opacity: 1; }
/* A finished reply keeps its row visible — the done checkmark is a status,
   not a hover affordance. */
.msg-actions.has-done { opacity: 1; }
.msg.user .msg-actions { justify-content: flex-end; }
.msg-actions .msg-time { font-size: 10.5px; color: var(--text-faint); letter-spacing: 0.3px; }
.msg-action-btn {
  background: none; border: none; color: var(--text-faint); cursor: pointer;
  padding: 5px; display: flex; border-radius: 6px;
}
.msg-action-btn:hover { color: var(--text); background: rgba(var(--ink-rgb), 0.06); }
.session-item { padding: 10px; border-radius: 8px; font-size: 12px; color: var(--text-dim); cursor: pointer; margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: background 160ms, color 160ms; }
.session-item:hover { background: rgba(var(--ink-rgb), 0.03); }
.session-item.active { color: var(--accent); background: var(--accent-dim); }
.session-rename-input {
  width: 100%; background: rgba(var(--accent-rgb), 0.06); border: 1px solid var(--border-strong);
  border-radius: 6px; padding: 4px 7px; font-size: 12.5px; color: var(--text);
}

/* -- calendar month grid ------------------------------------------------ */
/* Row layout: grid on the left (sized down per David's ask, 2026-08-31,
   to leave real room for the day-detail panel), detail panel on the right. */
.cal-layout { flex-direction: row; gap: 16px; align-items: stretch; }
.cal-left { flex: 0 0 62%; display: flex; flex-direction: column; min-width: 0; }
.cal-day-panel { flex: 1; padding: 16px; overflow-y: auto; overflow-x: hidden; min-width: 220px; }
.cal-day-panel-title { font-size: 14px; color: var(--accent); margin-bottom: 12px; }

.cal-nav { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; }
.cal-month-label { font-size: 14px; color: var(--text); min-width: 160px; text-align: center; }
.cal-create-bar { margin-bottom: 14px; }
.cal-checkbox-label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-dim); }
.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
  background: var(--border); overflow: hidden; flex: 1;
}
.cal-weekday {
  background: var(--bg-panel-solid); color: var(--text-faint); font-size: 11px;
  text-align: center; padding: 10px 0;
}
.cal-day {
  background: var(--bg-panel); min-height: 84px; padding: 8px; cursor: pointer;
  display: flex; flex-direction: column; gap: 4px; overflow: hidden;
}
.cal-day:hover { background: rgba(var(--accent-rgb), 0.04); }
.cal-day.other-month { opacity: 0.35; }
.cal-day.today { box-shadow: inset 0 0 0 1px var(--border-strong); }
.cal-day.selected { box-shadow: inset 0 0 0 2px var(--accent); background: rgba(var(--accent-rgb), 0.06); }
.cal-day-num { font-size: 11px; color: var(--text-dim); }
.cal-day.today .cal-day-num { color: var(--accent); font-weight: 600; }
.cal-event-pill {
  font-size: 10.5px; padding: 2px 6px; border-radius: 4px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.cal-event-pill.event { background: var(--accent-dim); color: var(--accent); }
.cal-event-pill.note { background: rgba(var(--ink-rgb), 0.06); color: var(--text-dim); }
.cal-event-pill.overflow { color: var(--text-faint); background: none; padding: 2px 6px 0; }
.cal-event-pill.completed { text-decoration: line-through; opacity: 0.5; }
.cal-item-completed .title, .cal-item-completed .meta { text-decoration: line-through; opacity: 0.5; }
.cal-upcoming-day-label { font-size: 11px; color: var(--text-faint); letter-spacing: 0.5px; margin: 14px 0 6px; }
.cal-upcoming-day-label:first-child { margin-top: 0; }

/* -- context menu (session right-click) --------------------------------- */
.context-menu { position: fixed; z-index: 1000; min-width: 160px; }
.context-menu-item { cursor: pointer; }
.context-menu-item.danger { color: var(--danger); }
.context-menu-item.danger:hover { background: rgba(var(--danger-rgb), 0.1); }
.star-mark { color: var(--accent); }

/* One rounded composer, centered on new chats and docked after the first
   message. Text above; attachments, model controls, and send below. */
.chat-input-bar {
  width: 100%; flex-shrink: 0;
  margin: 0 0 10px; padding: 14px; border-radius: 22px;
  background: var(--bg-panel-solid);
  border: 1px solid rgba(var(--ink-rgb), .1);
  box-shadow: 0 6px 28px rgba(var(--shade-rgb), .12);
  transition: border-color .2s, box-shadow .2s;
}
/* Focus lifts it further, the way Claude's composer responds when active. */
.chat-input-bar:focus-within {
  border-color: rgba(var(--accent-rgb), .38);
}
.chat-input-top { position: relative; display: flex; }
#chat-input {
  flex: 1; width: 100%; min-height: 38px; resize: none;
  background: transparent; border: none; padding: 4px 6px 8px;
  font-size: 15px; line-height: 1.6; max-height: 200px; box-shadow: none;
}
#chat-input:focus { outline: none; box-shadow: none; }
#chat-input::placeholder { color: var(--text-faint); }
.model-picker-wrap {
  position: relative; min-width: 0;
}
.model-picker-btn {
  display: flex; align-items: center; gap: 5px; background: rgba(var(--ink-rgb), 0.04);
  border: 1px solid var(--border); border-radius: 7px; padding: 5px 9px; font-size: 11.5px;
  color: var(--text-dim); cursor: pointer; white-space: nowrap; max-width: 220px;
}
.model-picker-btn span { overflow: hidden; text-overflow: ellipsis; }
.model-picker-btn:hover { color: var(--text); border-color: var(--border-strong); }

/* -- project picker (David's ask 2026-09-12) — sits above the chat list
   itself, not the composer, so it's a normal in-flow flex row rather than
   .model-picker-wrap's absolutely-positioned corner placement; reuses
   .model-picker-btn's own look unchanged. */
.project-picker-wrap { position: relative; display: flex; align-items: center; gap: 6px; min-height: 54px; margin: 0 -12px 12px; padding: 0 12px; border-bottom: 1px solid var(--border); }
.project-picker-wrap .model-picker-btn { flex: 1; max-width: none; justify-content: space-between; background: transparent; border-color: transparent; padding: 8px 10px; }
#project-settings-btn { flex-shrink: 0; }
.overflow-menu-divider { height: 1px; margin: 4px 6px; background: var(--border); }
.model-picker-menu {
  /* Opens upward from the button (David's ask 2026-09-01) — the model
     picker sits at the top of the composer, so opening downward pushed the
     menu awkwardly toward/under the send row instead of into open space. */
  position: absolute; bottom: calc(100% + 6px); right: 0; z-index: 50; min-width: 240px;
  max-height: 300px; overflow-y: auto; overflow-x: hidden;
}
.model-picker-menu.hidden { display: none; }
.model-picker-item { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.model-picker-heading { padding: 8px 10px 6px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.model-connection-text { display: grid; min-width: 0; }
.model-connection-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-connection-sub { font-size: 11px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; }
.model-add-item { margin-top: 7px; color: var(--text-dim); }
.model-add-item::before { content: ""; position: absolute; top: -4px; left: 4px; right: 4px; height: 1px; background: var(--border); }
/* The composer's model control: one pill, connection | model and reasoning. */
.model-pill { display: inline-flex; align-items: center; flex-shrink: 0; height: 32px; border: 1px solid var(--hairline-soft); border-radius: 999px; background: rgba(var(--ink-rgb), .025); min-width: 0; }
.model-pill .model-picker-wrap { display: flex; min-width: 0; }
.model-pill .model-picker-wrap + .model-picker-wrap { border-left: 1px solid var(--border); }
.model-pill .model-picker-wrap:has(> .model-picker-btn[hidden]) { display: none; }
.chat-input-bar .model-pill .model-picker-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--text); font-size: 12px; max-width: 190px; }
.chat-input-bar .model-pill .model-picker-btn:hover { background: rgba(var(--ink-rgb), .05); }
.model-pill-mark:empty { display: none; }
.model-pill-mark .model-mark { margin: 0; }

/* A narrow chat column wraps the controls instead of crushing the model pill. */
.chat-input-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 8px; gap: 6px 10px; }
/* Circular send button, matching the composer's rounded language. */
#chat-send, .forge-composer-send {
  width: 34px; height: 34px; padding: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex: none;
  background: var(--text); color: var(--bg-panel-solid); border-color: transparent;
}
.chat-input-left { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.input-icon-btn {
  display: flex; align-items: center; gap: 5px; background: transparent; border: none;
  color: var(--text-dim); padding: 6px 8px; border-radius: 7px; cursor: pointer; font-size: 11.5px;
}
.input-icon-btn:hover { background: rgba(var(--ink-rgb), 0.05); color: var(--text); }
.input-icon-btn.active { color: var(--accent); background: var(--accent-dim); }

.overflow-wrapper { position: relative; }
.overflow-menu {
  position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 50; min-width: 200px;
}
.overflow-menu.hidden { display: none; }
/* Opens downward from its anchor instead of the default upward-from-the-
   chat-composer placement above — e.g. Settings > Integrations' "+ Add
   Integration" button. Needs bottom/left reset to auto, not just top/right
   added: the base rule already sets bottom+left, and a view previously
   patched top/right in via an inline style without clearing those, which
   left all four offsets set at once and stretched/misplaced the menu
   (found live, 2026-08-31). Use this class instead of ad hoc inline
   positioning for any future downward-opening menu. */
.overflow-menu.below { top: calc(100% + 6px); right: 0; bottom: auto; left: auto; }
.overflow-menu-item {
  display: flex; align-items: center; gap: 10px; cursor: pointer; width: 100%; background: none; border: none; text-align: left;
}
.overflow-menu-item svg { width: 16px; height: 16px; flex: none; color: var(--text-dim); }
.overflow-menu-item[disabled] { opacity: 0.4; cursor: default; }
.overflow-menu-item[disabled]:hover { background: none; }
/* -- popups: one look for every menu and picker (David, 2026-10-07: the
   old ones had a grey smear from the dark theme's glass sheen, six
   different styles, and covered the composer). Flat parchment, a hairline,
   one soft shadow; rows of one height with the same hover; the current
   choice gets an ink check. Placement stays with each menu's own rule. */
.custom-select-menu, .model-picker-menu, .overflow-menu, .context-menu, .chat-reference-picker {
  padding: 6px; background: var(--bg-panel-solid); border: 1px solid var(--border-strong);
  border-radius: 14px; box-shadow: var(--popup-shadow); animation: popup-in 120ms ease-out;
}
@keyframes popup-in { from { opacity: 0; transform: translateY(4px); } }
.custom-select-item, .model-picker-item, .overflow-menu-item, .context-menu-item {
  position: relative; min-height: 34px; padding: 8px 10px; border-radius: 8px;
  font-size: 13px; line-height: 1.35; color: var(--text); font-weight: 400;
}
:is(.custom-select-item, .model-picker-item, .overflow-menu-item, .context-menu-item):hover { background: var(--surface-2); }
:is(.custom-select-item, .model-picker-item, .overflow-menu-item, .context-menu-item).active { padding-right: 32px; color: var(--text); background: none; }
:is(.custom-select-item, .model-picker-item, .overflow-menu-item, .context-menu-item).active:hover { background: var(--surface-2); }
:is(.custom-select-item, .model-picker-item, .overflow-menu-item, .context-menu-item).active::after {
  content: ""; position: absolute; right: 10px; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: var(--text);
  -webkit-mask: url('../img/check.svg') center / contain no-repeat;
  mask: url('../img/check.svg') center / contain no-repeat;
}
.context-menu-item.danger:hover { background: rgba(var(--danger-rgb), 0.08); }
/* Rows without a logo line up with the ones that have one. */
.model-picker-item .model-mark { margin-right: 7px; }
.model-picker-menu:has(.model-mark) .model-picker-item:not(:has(.model-mark)) { padding-left: calc(26px + 1em); }
/* Menus opened from the composer sit fully above it, aligned to its edges,
   instead of covering its text box. */
.chat-input-bar .overflow-wrapper, .chat-input-bar .model-picker-wrap { position: static; }
.chat-input-bar .overflow-menu { bottom: calc(100% + 8px); left: 0; }
.chat-input-bar .model-picker-menu { bottom: calc(100% + 8px); right: 0; }
.documents-popover { width: 330px; min-width: 0; z-index: 60; overflow-y: auto; }
.documents-menu-heading { display: grid; gap: 3px; padding: 5px 6px 11px; }
.documents-menu-heading strong { color: var(--text); font-size: 13px; font-weight: 650; }
.documents-menu-heading span { color: var(--text-dim); font-size: 11px; }
.documents-menu-search { width: 100%; margin-bottom: 10px; font-size: 12px; }
.documents-menu-group { border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.documents-menu-summary { display: flex; align-items: center; gap: 9px; padding: 10px; color: var(--text); font-size: 12px; font-weight: 600; cursor: pointer; list-style: none; }
.documents-menu-summary::-webkit-details-marker { display: none; }
.documents-menu-summary:hover { background: var(--accent-dim); }
.documents-menu-summary > span:first-child { flex: 1; }
.documents-menu-group[open] .library-chevron { transform: rotate(90deg); }
.documents-menu-rows { display: grid; gap: 3px; padding: 4px; border-top: 1px solid var(--border); }
.documents-menu-row { width: 100%; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 9px; border: 0; border-radius: 7px; background: none; color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.documents-menu-row:hover { background: var(--accent-dim); }
.documents-menu-icon { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 7px; background: var(--accent-dim); color: var(--accent); }
.documents-menu-icon svg { width: 17px; height: 17px; }
.documents-menu-copy { min-width: 0; flex: 1; display: grid; gap: 2px; }
.documents-menu-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; }
.documents-menu-copy small { color: var(--text-dim); font-size: 10.5px; }
.documents-menu-empty { padding: 14px 10px; color: var(--text-dim); font-size: 11px; }
.documents-menu-summary:focus-visible, .documents-menu-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Centered on the same column as the messages/composer (David's ask
   2026-09-03) — it sits between them, so a full-width strip would break
   the single-column alignment. */
.attach-strip { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; max-width: var(--chat-column); margin: 0 auto; padding: 0 4px; }
.attach-strip:not(:empty) { padding-bottom: 8px; }
.attach-chip {
  display: flex; align-items: center; gap: 6px; background: rgba(var(--ink-rgb), 0.04);
  border: 1px solid var(--border); border-radius: 7px; padding: 4px 6px 4px 10px; font-size: 11.5px; color: var(--text-dim);
}
.attach-chip button { background: none; border: none; color: var(--text-faint); cursor: pointer; padding: 2px; display: flex; }
.attach-chip button:hover { color: var(--danger); }

.workspace-pill {
  display: flex; align-items: center; gap: 6px; background: var(--accent-dim); border: 1px solid var(--border-strong);
  border-radius: 7px; padding: 5px 8px; font-size: 11.5px; color: var(--accent); cursor: pointer;
}
.workspace-pill button { background: none; border: none; color: var(--accent); cursor: pointer; padding: 0; display: flex; opacity: 0.7; }
.workspace-pill button:hover { opacity: 1; }

/* -- generic modal, reused by the workspace picker ---------------------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 1500; display: flex; align-items: center; justify-content: center;
  background: var(--scrim); backdrop-filter: blur(3px);
}
.modal-backdrop.hidden { display: none; }
/* Dialogs and the Settings window (David, 2026-10-07): the scrim fades and
   the panel rises 6 px into place; closing (.hidden) plays it backwards,
   since display waits for the transition (allow-discrete). A dialog that is
   removed outright (confirmDialog) only animates in. */
.modal-backdrop { transition: opacity 160ms ease, display 180ms allow-discrete; }
.modal-backdrop.hidden { opacity: 0; }
.modal-backdrop > * { transition: opacity 180ms ease, transform 200ms cubic-bezier(.22, 1, .36, 1); }
.modal-backdrop.hidden > * { opacity: 0; transform: translateY(6px) scale(.985); }
@starting-style {
  .modal-backdrop:not(.hidden) { opacity: 0; }
  .modal-backdrop:not(.hidden) > * { opacity: 0; transform: translateY(6px) scale(.985); }
}
.modal-panel { width: 480px; max-width: 90vw; max-height: 80vh; display: flex; flex-direction: column; padding: 20px; }
.modal-panel h4 { font-weight: 400; margin-bottom: 4px; display: flex; align-items: center; justify-content: space-between; }
.modal-panel .muted { color: var(--text-faint); font-size: 12px; margin-bottom: 12px; line-height: 1.5; }
.modal-close-btn { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 16px; }
.workspace-path-input { margin-bottom: 10px; }
.workspace-body { flex: 1; overflow-y: auto; overflow-x: hidden; border: 1px solid var(--border); border-radius: 8px; padding: 4px; margin-bottom: 14px; min-height: 160px; }
.workspace-row { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 6px; font-size: 12.5px; cursor: pointer; }
.workspace-row:hover { background: var(--accent-dim); }
.workspace-empty { padding: 14px; color: var(--text-faint); font-size: 12px; text-align: center; }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; }
/* Shared panel dialogs keep their header and actions above a scrolling body. */
.panel-dialog-open, .panel-dialog-open body { overflow: hidden; }
.panel-dialog-open #view-content { overflow: hidden; }
.panel-dialog { gap: 12px; max-height: 90dvh; overflow: hidden; }
.panel-dialog-wide { width: 720px; }
.panel-dialog .modal-header { flex: none; gap: 12px; min-width: 0; }
.panel-dialog .modal-header span { overflow-wrap: anywhere; }
.panel-dialog .modal-body { min-height: 0; min-width: 0; overflow: auto; overscroll-behavior: contain; }
.panel-dialog .modal-footer { flex: none; flex-wrap: wrap; }
.panel-dialog .modal-footer > div { display: flex; gap: 8px; flex-wrap: wrap; }
.panel-dialog .tab-build-form { max-width: none; }
.panel-dialog .card-row { flex-wrap: wrap; }
.panel-dialog .card-row input { min-width: 0; }
@media (max-width: 768px) {
  /* Full screen on a phone, so solid: glass would show the page through it. */
  .modal-backdrop > .panel-dialog { width: 100vw; max-width: 100vw; height: var(--ms-page-height); max-height: var(--ms-page-height); border-radius: 0; padding: 16px;
    background: var(--bg-panel-solid); }
  .panel-dialog .modal-body { flex: 1; }
}

/* -- Settings window (David's ask, 2026-08-31: "more of a popup that can be
   closed or minimized, with a similar UI to Odysseus" — their own Settings
   modal is a title-bar + left-nav-with-search + right-content-panel window,
   not a full-page tab). Reuses .modal-backdrop for the dim/blur layer. */
.settings-window {
  width: 980px; max-width: 94vw; height: 720px; max-height: 88vh;
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
  background: var(--bg-panel); box-shadow: var(--shadow-lifted);
}
.settings-titlebar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0;
  /* Draggable (David's ask 2026-09-15). The grab cursor is the only signal
     that the window can be moved, so it belongs on the bar itself; the
     buttons opt back out so they still read as buttons. */
  cursor: grab; user-select: none;
}
.settings-titlebar-btn { cursor: pointer; }
.settings-window.is-dragging .settings-titlebar { cursor: grabbing; }
/* Text selection and iframe/pointer capture both fight a drag in progress. */
.settings-window.is-dragging { user-select: none; }
/* A full-page mobile Settings has no window to move. */
.settings-mobile-page .settings-titlebar { cursor: default; }
.settings-titlebar .title { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--accent); font-weight: 400; }
.settings-titlebar-actions { display: flex; gap: 4px; }
.settings-titlebar-btn {
  background: none; border: none; color: var(--text-faint); cursor: pointer;
  width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
}
.settings-titlebar-btn:hover { background: rgba(var(--ink-rgb), 0.06); color: var(--text); }
.settings-body { flex: 1; display: flex; min-height: 0; }
.settings-nav {
  width: 220px; flex-shrink: 0; background: var(--sidebar-bg);
  border-right: 1px solid var(--border); padding: 16px 12px; overflow-y: auto; overflow-x: hidden;
}
.settings-search { width: 100%; margin-bottom: 10px; font-size: 12.5px; }
.settings-nav-group { font-size: 10px; letter-spacing: 1px; color: var(--text-faint); padding: 10px 8px 4px; }
/* Grouped nav (2026-09-15): the first heading sits flush under the search
   box, and headings/items hide via [hidden] when a search filters them out. */
.settings-nav-list > .settings-nav-group:first-child { padding-top: 2px; }
.settings-nav-group[hidden], .settings-nav-item[hidden] { display: none; }
.settings-nav-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 9px; border-radius: 7px;
  font-size: 12.5px; color: var(--text-dim); cursor: pointer;
}
.settings-nav-item:hover { background: rgba(var(--ink-rgb), 0.04); color: var(--text); }
.settings-nav-item.active { color: var(--accent); background: var(--accent-dim); }
.settings-content {
  flex: 1; overflow-y: auto; overflow-x: hidden; padding: 24px 28px; min-width: 0;
}

/* Resize handles (David's ask 2026-09-01: "stretch and shrink the window in
   any direction") — see makeResizable() in settings.js, which pins the
   window to `position: fixed` with explicit left/top/width/height so each
   handle can drag just its own edge, same feel as a real desktop window. */
.resize-handle { position: absolute; z-index: 5; }
.resize-n, .resize-s { left: 10px; right: 10px; height: 8px; cursor: ns-resize; }
.resize-n { top: -4px; }
.resize-s { bottom: -4px; }
.resize-e, .resize-w { top: 10px; bottom: 10px; width: 8px; cursor: ew-resize; }
.resize-e { right: -4px; }
.resize-w { left: -4px; }
.resize-ne, .resize-nw, .resize-se, .resize-sw { width: 16px; height: 16px; }
.resize-ne { top: -6px; right: -6px; cursor: nesw-resize; }
.resize-nw { top: -6px; left: -6px; cursor: nwse-resize; }
.resize-se { bottom: -6px; right: -6px; cursor: nwse-resize; }
.resize-sw { bottom: -6px; left: -6px; cursor: nesw-resize; }

/* Generic segmented-tab toggle (originally Integrations' filter tabs,
   generalized 2026-09-01 when Brain's Skills/Vault toggle needed the exact
   same look — reuse, don't duplicate, per specs/frontend-style.md). */
.segmented-tabs {
  display: inline-flex; align-self: flex-start; gap: 3px;
  background: rgba(var(--ink-rgb), .03); border: 1px solid var(--border); border-radius: 9px; padding: 3px; margin-bottom: 18px;
}
.segmented-tab {
  padding: 7px 13px; font-size: 12px; border-radius: 6px; cursor: pointer;
  color: var(--text-faint); background: none; border: none; font-family: inherit;
}
.segmented-tab.active {
  background: var(--bg-panel-solid); color: var(--text); box-shadow: 0 1px 3px rgba(var(--shade-rgb), .14);
}

/* -- command palette (Ctrl+K, David's ask 2026-09-02) ------------------- */
.palette-backdrop {
  position: fixed; inset: 0; z-index: 2600;
  display: flex; align-items: flex-start; justify-content: center; padding-top: 14vh;
  background: var(--scrim); backdrop-filter: blur(3px);
}
.palette-backdrop.hidden { display: none; }
.palette-panel { width: 520px; max-width: 92vw; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.palette-input-row { display: flex; align-items: center; gap: 8px; }
.palette-input { flex: 1; font-size: 14px; padding: 10px 12px; }
.palette-hint {
  flex-shrink: 0; font-size: 10px; letter-spacing: 1px; color: var(--text-faint);
  border: 1px solid var(--border); border-radius: 5px; padding: 3px 6px;
}
.palette-list { max-height: 320px; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 1px; }
.palette-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border-radius: 7px; font-size: 13px; color: var(--text);
  background: none; border: none; cursor: pointer; text-align: left; width: 100%;
}
.palette-item.active { background: var(--accent-dim); color: var(--accent); }
.palette-item-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-item-hint { flex-shrink: 0; font-size: 10px; letter-spacing: 0.5px; color: var(--text-faint); }

/* -- toasts (David's ask 2026-09-02) — bottom-right glass cards, slide-up
   + fade, click to dismiss. z-index above the Settings modal (1500) and the
   custom-select menus (2500) so a confirmation is never buried. */
#toast-host {
  position: fixed; bottom: 20px; right: 20px; z-index: 3000;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  pointer-events: none;
}
.toast {
  pointer-events: auto; cursor: pointer;
  max-width: 340px; padding: 10px 14px; font-size: 12.5px; line-height: 1.45; color: var(--text);
  background: var(--bg-panel-solid);
  backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: var(--shadow-elevated);
  border-left: 3px solid var(--accent);
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.success { border-left-color: var(--accent); }
.toast.error { border-left-color: var(--danger); }
.toast.info { border-left-color: rgba(var(--accent-rgb), 0.5); }

/* -- chat progress overlay (David's ask 2026-09-12) — top-right glass
   cards, one per chat session currently generating a reply, so leaving the
   Chat tab to do something else doesn't lose track of it. Mirrors the
   toast pattern above (same lazy host-creation, same slide+fade) in the
   opposite corner so the two never collide; the pulsing dot reuses
   .msg-thinking-dot's own keyframe for a consistent "still working" look
   between the chat view itself and this overlay. */
#chat-progress-host {
  position: fixed; top: calc(var(--titlebar-h) + 20px); right: 20px; z-index: 3000;
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  max-width: calc(100vw - 40px); max-height: calc(100dvh - var(--titlebar-h) - 40px); overflow-y: auto;
  pointer-events: none;
}
#chat-progress-list {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  max-width: 100%; max-height: 164px; overflow-y: auto;
}
#chat-progress-list[hidden], .chat-progress-card[hidden] { display: none; }
.chat-progress-card {
  flex-shrink: 0;
  pointer-events: auto; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  max-width: min(200px, 100%); padding: 5px 10px; font-size: 11px; line-height: 16px; color: var(--text);
  background: var(--bg-panel-solid);
  backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: var(--shadow-elevated);
  border-left: 2px solid var(--accent);
  opacity: 0; transform: translateY(-10px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.chat-progress-card.show { opacity: 1; transform: translateY(0); }
.chat-progress-card.done { border-left-color: var(--accent); }
.chat-progress-card.failed { border-left-color: var(--danger); }
.chat-progress-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-progress-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0;
  animation: thinking-pulse 1.8s ease-in-out infinite;
}
.chat-progress-card.done .chat-progress-dot,
.chat-progress-card.failed .chat-progress-dot { animation: none; opacity: 1; }
.chat-progress-card.failed .chat-progress-dot { background: var(--danger); }

.settings-minimized-pill {
  position: fixed; bottom: 18px; right: 18px; z-index: 1500;
  display: flex; align-items: center; gap: 7px; padding: 9px 14px; font-size: 12.5px; color: var(--text);
  cursor: pointer;
}

/* ======================================================================
   Mobile-responsive pass (David's ask 2026-09-01: "similar UX/UI and
   functionality as Claude and ChatGPT's mobile apps"). Both apps share the
   same core mobile pattern this section replicates: no persistent sidebar
   — a hamburger opens a slide-out drawer over a dimmed backdrop; chat's
   session history is its own separate slide-out drawer, not a fixed
   always-visible column; everything else (Settings, Home) collapses to one
   full-width scrollable column. 768px matches the common tablet/phone
   breakpoint (roughly iPad-portrait-and-below).
   ====================================================================== */
.mobile-menu-btn { display: none; }
.mobile-backdrop { display: none; }
.mobile-drawer-heading { display: none; }

/* Workspace details. Shared by built-in and custom views. */
button { font-family: inherit; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
input::placeholder, textarea::placeholder { color: var(--text-faint); opacity: .8; }
::selection { background: rgba(var(--accent-rgb), .22); color: inherit; }
.btn.primary { background: var(--text); color: var(--bg-panel-solid); border-color: transparent; border-radius: 999px; }
.btn.primary:hover { background: color-mix(in srgb, var(--text), var(--bg) 16%); }
.btn.quiet { background: transparent; border-color: transparent; color: var(--text-dim); box-shadow: none; }
.btn.quiet:hover { color: var(--text); background: rgba(var(--ink-rgb), .04); }
.nav-group-label { font-size: 10px; letter-spacing: .05em; color: var(--text-faint); padding: 24px 12px 8px; }
.sidebar-user-card { background: transparent; font: inherit; text-align: left; width: 100%; gap: 9px; padding: 8px 4px; }
.sidebar-avatar { width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: var(--surface-2); color: var(--text-dim); font-size: 11px; }
#sidebar-footer { border-top: 1px solid var(--border); margin-top: 16px; }
.sidebar-user-name { color: var(--text-dim); font-size: 12px; }
.session-item { display: block; width: 100%; text-align: left; border: none; background: transparent; font-family: inherit; line-height: 1.5; }
.session-item.active { color: var(--text); background: rgba(var(--ink-rgb), .06); }
.chat-new-btn { display: flex; align-items: center; gap: 8px; width: 100%; margin-bottom: 20px; text-align: left; background: transparent; border-color: transparent; color: var(--text-dim); padding: 9px 10px; }
.chat-input-right { display: flex; align-items: center; gap: 10px; min-width: 0; margin-left: auto; flex-shrink: 0; }
.composer-hint { text-align: center; font-size: 10px; color: var(--text-faint); padding: 0 12px 16px; }
.chat-input-bar .model-picker-btn { border-color: transparent; background: transparent; max-width: 230px; }
.chat-input-bar .model-picker-btn:hover { background: rgba(var(--ink-rgb), .04); }
.settings-titlebar .title { color: var(--text); }
.settings-nav-item.active { background: var(--surface-2); color: var(--text); }
.custom-select-btn { box-shadow: none; border-color: var(--border-strong); }
.custom-select-menu, .model-picker-menu, .overflow-menu, .toast, .chat-progress-card {
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.empty-state-rich { padding: 56px 24px; }
.empty-state-icon { opacity: .55; width: 32px; height: 32px; }
.empty-state-title { color: var(--text); font-size: 16px; letter-spacing: -.02em; }
.empty-state-hint { line-height: 1.7; margin-top: 4px; }
input[type="checkbox"]:checked { background: var(--accent); box-shadow: none; }
input[type="checkbox"]:checked::after { border-color: var(--text); }
.card-row > div { min-width: 0; }
.form-grid { gap: 16px; }
.disclosure-panel { border: 1px solid var(--border); background: var(--bg-panel); border-radius: 12px; padding: 0 18px; margin-bottom: 16px; }
.disclosure-panel:not([open]) { border-color: transparent; background: transparent; padding: 0; }
.disclosure-panel > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; margin: 12px 0; padding: 7px 15px;
  border: 1px solid var(--hairline-soft); border-radius: 999px; font-size: 12.5px; font-weight: 500; color: var(--text); cursor: pointer;
  transition: background .18s, border-color .18s; }
.disclosure-panel > summary::-webkit-details-marker { display: none; }
.disclosure-panel > summary:hover { background: var(--surface-2); border-color: var(--hairline); }
.disclosure-panel:not([open]) > summary { margin: 0 0 4px; }
.disclosure-panel[open] { padding-bottom: 18px; }
.disclosure-panel[open] > summary { background: var(--surface-2); }
.automation-library { margin-top: 28px; }
.automation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 12px; }
.automation-card { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding: 18px; background: rgba(var(--ink-rgb), .02); border: 1px solid var(--border); border-radius: 10px; }
.automation-card > div:last-child { flex-direction: row !important; }
.automation-card .custom-select { flex: 1; }
.library-view .view-header { margin-bottom: 18px; }
.library-editor { display: flex; flex-direction: column; flex: 1; }
.library-view > .glass.card { padding: 14px; }
.library-view > .glass.card .card-row { flex-wrap: wrap; }
.library-view > .glass.card input { min-width: min(100%, 220px); }
.library-section { margin: 18px 0; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-panel); }
.library-section-summary, .library-chat-summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
.library-section-summary::-webkit-details-marker, .library-chat-summary::-webkit-details-marker { display: none; }
.library-section-summary { padding: 18px 20px; }
.library-section-summary:hover, .library-chat-summary:hover { background: rgba(var(--accent-rgb), .045); }
.library-section[open] > .library-section-summary { border-bottom: 1px solid var(--border); }
.library-section-icon { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 10px; color: var(--accent); background: var(--accent-dim); }
.library-section-icon svg { width: 20px; height: 20px; }
.library-section-copy { display: grid; gap: 3px; min-width: 0; flex: 1; }
.library-section-copy strong { color: var(--text); font-size: 15px; font-weight: 650; }
.library-section-copy small { color: var(--text-dim); font-size: 11.5px; }
.library-count { flex: none; min-width: 26px; padding: 3px 7px; border-radius: 999px; color: var(--text-dim); background: rgba(var(--ink-rgb), .055); text-align: center; font-size: 11px; font-variant-numeric: tabular-nums; }
.library-chevron { flex: none; color: var(--text-dim); font-size: 20px; line-height: 1; transform: rotate(0deg); transition: transform .18s ease; }
.library-section[open] > summary .library-chevron, .library-chat-group[open] > summary .library-chevron { transform: rotate(90deg); }
.document-grid { margin: 0; padding: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.library-document-card, .library-file-row { width: 100%; min-width: 0; display: flex; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: 10px; background: rgba(var(--ink-rgb), .025); color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.library-document-card { min-height: 88px; padding: 14px; }
.library-document-card:hover, .library-file-row:not(:disabled):hover { background: var(--accent-dim); border-color: var(--border-strong); }
.library-document-icon { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 9px; background: var(--accent-dim); color: var(--accent); font-size: 22px; }
.library-document-copy, .library-file-copy { min-width: 0; flex: 1; display: grid; gap: 4px; }
.library-document-copy strong, .library-file-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
.library-document-copy small, .library-file-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dim); font-size: 11px; }
.library-row-arrow { flex: none; color: var(--text-faint); font-size: 17px; }
.library-document-card:hover .library-row-arrow, .library-file-row:hover .library-row-arrow { color: var(--accent); }
.library-chat-files { display: grid; gap: 9px; padding: 14px 16px 18px; }
.library-chat-group { min-width: 0; border: 1px solid var(--border); border-radius: 10px; background: rgba(var(--ink-rgb), .018); overflow: hidden; }
.library-chat-summary { min-height: 54px; padding: 11px 15px; }
.library-chat-group[open] > .library-chat-summary { border-bottom: 1px solid var(--border); }
.library-chat-title { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: 13px; font-weight: 600; }
.library-file-list { display: grid; gap: 6px; padding: 10px; }
.library-file-row { min-height: 58px; padding: 9px 11px; }
.library-file-row:disabled { opacity: .5; cursor: default; }
.library-file-kind { flex: none; min-width: 40px; max-width: 52px; padding: 5px 4px; border-radius: 5px; background: var(--accent-dim); color: var(--accent); font-size: 9px; font-weight: 700; letter-spacing: .04em; text-align: center; overflow: hidden; }
.library-empty { padding: 20px; color: var(--text-dim); font-size: 12px; }
.library-section-summary:focus-visible, .library-chat-summary:focus-visible, .library-document-card:focus-visible, .library-file-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.library-tabs { margin: -8px 0 18px; }
.google-workspace { display: grid; gap: 14px; padding-bottom: 28px; }
.google-connect { display: grid; gap: 16px; padding: 22px; }
.google-connect .meta { max-width: 76ch; line-height: 1.6; }
.google-field-row, .google-toolbar, .google-actions, .google-breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.google-field-row input, .google-toolbar input[type='search'] { min-width: min(100%, 220px); flex: 1; }
.google-account-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-panel); }
.google-account-line strong { color: var(--text); font-size: 13px; }
.google-account-line { flex-wrap: wrap; justify-content: flex-start; }
.google-account-line > :first-child { margin-right: auto; }
.google-account-line select { max-width: 280px; }
.email-sending-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); }
.email-sending-row:first-of-type { margin-top: 10px; }
.email-sending-address { min-width: 0; }
.email-sending-address .title { overflow-wrap: anywhere; font-size: 13px; }
.google-toolbar { padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-panel); }
.google-toolbar select { min-width: 100px; }
.google-trash-toggle { display: inline-flex; align-items: center; gap: 5px; color: var(--text-dim); font-size: 11px; }
.google-breadcrumbs { min-height: 28px; }
.google-browser { display: grid; grid-template-columns: 175px minmax(0, 1fr); min-height: 540px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-panel); overflow: hidden; }
.drive-group { display: contents; }
.google-file-list { min-width: 0; max-height: 70vh; overflow: auto; padding: 8px; border-right: 1px solid var(--border); }
.google-file-row { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px; border: 0; border-radius: 8px; background: none; color: var(--text); text-align: left; cursor: pointer; }
.google-file-row:hover, .google-file-row:focus-visible { background: var(--accent-dim); outline: none; }
.google-type { flex: none; width: 52px; padding: 5px 2px; border-radius: 5px; background: var(--accent-dim); color: var(--accent); text-align: center; font-size: 9px; font-weight: 700; }
.google-file-copy { min-width: 0; flex: 1; display: grid; gap: 3px; }
.google-file-copy strong, .google-file-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.google-file-copy strong { font-size: 12px; }
.google-file-copy small { color: var(--text-dim); font-size: 10px; }
.google-detail { min-width: 0; max-height: 70vh; overflow: auto; padding: 22px; }
.google-detail-head { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px; }
.google-detail-head h3 { margin: 3px 0 0; font-size: 19px; font-weight: 600; overflow-wrap: anywhere; }
.google-actions { margin: 18px 0; }
.google-detail-extra { display: grid; gap: 14px; }
.google-detail .disclosure-panel { margin-top: 12px; }
.google-inline-prompt { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px; margin: 0 0 12px; border: 1px solid var(--accent); border-radius: 9px; background: var(--bg-panel); }
.google-inline-prompt label { width: 100%; color: var(--text-dim); font-size: 11px; }
.google-inline-prompt input { flex: 1; min-width: min(100%, 160px); }
.google-share-form, .google-member, .google-form-item, .google-editor-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.google-share-form input { flex: 1; min-width: 140px; }
.google-member, .google-form-item { padding: 8px 0; border-bottom: 1px solid var(--border); color: var(--text-dim); font-size: 12px; }
.google-editor-head { padding-top: 10px; border-top: 1px solid var(--border); }
.google-sheet-grid { display: grid; grid-template-columns: repeat(var(--google-sheet-columns, 12), minmax(78px, 1fr)); overflow: auto; max-height: 450px; border: 1px solid var(--border); border-radius: 8px; }
.google-folder-results { max-height: 230px; overflow: auto; display: grid; gap: 3px; }
.google-sheet-grid input { width: 100%; min-width: 78px; padding: 7px; border: 1px solid var(--border); border-radius: 0; background: transparent; font-size: 11px; }
.google-form-responses pre { padding: 10px; border: 1px solid var(--border); border-radius: 8px; overflow: auto; font-size: 11px; }
@media (max-width: 760px) { .google-browser { display: flex; flex-direction: column; } .google-file-list { max-height: 300px; border-right: 0; border-bottom: 1px solid var(--border); } .google-detail { max-height: none; } }
@media (max-width: 600px) {
  .library-section-summary { padding: 14px; }
  .library-section-copy small { display: none; }
  .document-grid { padding: 12px; }
  .library-chat-files { padding: 10px; }
}
.settings-nav-item { border: none; background: transparent; text-align: left; width: 100%; font-family: inherit; }
.cal-day { border: none; text-align: left; font-family: inherit; }
.cal-grid { border-radius: 12px; }
.cal-month-label { font-size: 17px; font-weight: 500; }
.cal-day-panel-title { color: var(--text); font-size: 16px; }
.cal-day.selected { background: var(--accent-dim); box-shadow: inset 0 0 0 1px var(--accent); }
.cal-day:hover { background: var(--surface-2); }

/* Native border beam: a masked conic highlight travels around the actual
   rounded border. The center is cut out and never intercepts input. */
@property --beam-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.border-beam { --beam-strength: .4; position: relative; }
.border-beam::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  padding: 1px; pointer-events: none; z-index: 1;
  background: conic-gradient(from var(--beam-angle), transparent 0deg 240deg, var(--k-rose) 275deg, var(--k-gold-hi) 305deg, var(--point) 330deg, transparent 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: var(--beam-strength); animation: border-orbit 8s linear infinite;
}
.border-beam:focus-within::before { opacity: .7; }
.border-beam[data-active="false"]::before { animation-play-state: paused; }
@keyframes border-orbit { to { --beam-angle: 360deg; } }

/* Home: editorial hero, live constellation, then a useful daily workspace. */
.dashboard { padding: 30px 40px 48px; }
.dashboard-content { width: 100%; max-width: 1320px; margin: 0 auto; }
.dashboard-header { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.eyebrow { font-size: 10px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--text-faint); }
.dashboard-header p { font-size: 12px; color: var(--text-dim); margin: 5px 0 0; }
.dashboard-system-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-dim); white-space: nowrap;
  padding: 5px 11px; border-radius: 999px; background: rgba(var(--wash-rgb), .92); border: 1px solid var(--border); }
.dashboard-intro h1 span { display: block; color: var(--text-dim); }
.dashboard-hero { position: relative; display: flex; flex-direction: column; min-height: 400px; padding: 24px 30px; margin: 0 0 16px; border: 1px solid var(--hairline-soft); border-radius: var(--radius); overflow: hidden; background: var(--bg-panel); }
.dashboard-intro { position: relative; z-index: 1; flex: 1; max-width: 510px; padding: 36px 0 20px; }
.dashboard-intro h1 { font-family: var(--font-display); font-style: italic; font-size: clamp(36px, 4vw, 58px); font-weight: 500; letter-spacing: 0; line-height: 1.05; margin: 16px 0 20px; max-width: 470px; }
.dashboard-intro > p { font-size: 14px; color: var(--text-faint); line-height: 1.8; max-width: 350px; margin: 0 0 24px; }
.dashboard-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dashboard-actions .primary { padding: 10px 16px; border-radius: 9px; }
.dashboard-next { display: block; color: var(--text-faint); font-size: 11px; margin-top: 28px; max-width: 400px; overflow-wrap: anywhere; }
/* Home's banner: the Kairos figure as halftone (static/js/dither.js), with
   the plain painting underneath until it draws. A parchment wash keeps the
   text side readable. */
.dashboard-core { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; background: rgb(var(--wash-rgb)) url('../img/home-figure.webp') 70% 40% / cover no-repeat; }
.dashboard-core.is-dithered { background-image: none; }
/* Halftone switched off: a plain card. In Color its painting fallback would
   clash too, so it goes with the dots. */
:root[data-halftone='off'] .dashboard-core { background: none; }
:root[data-halftone='off'] .dashboard-core > .dither-canvas, :root[data-halftone='off'] .dashboard-core::after { display: none; }
.dashboard-core .dither-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.dashboard-core::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--wash-rgb), .95) 0%, rgba(var(--wash-rgb), .86) 34%, rgba(var(--wash-rgb), 0) 64%); }
.dashboard-stats { display: flex; flex-wrap: wrap; gap: 10px; }
.dashboard-stat { display: flex; align-items: baseline; gap: 8px; padding: 9px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-panel); color: var(--text-dim); font-size: 12px; text-align: left; cursor: pointer; min-width: 0; }
.dashboard-stat-value { font-size: 18px; font-weight: 500; color: var(--text); }
.dashboard-stat-label { font-size: 12px; }
.dashboard-stat:hover { background: var(--surface-2); }
.dashboard-attention { border-color: var(--warn); color: var(--text); }
.dashboard-icon { grid-row: span 2; padding-top: 5px; }
.dashboard-stat-value { font-size: 24px; line-height: 1.25; letter-spacing: -.035em; }
.dashboard-stat-label { font-size: 11px; color: var(--text-faint); }
.dashboard-stat:hover .dashboard-stat-label { color: var(--text); }
.dashboard-icon { color: var(--text-faint); flex-shrink: 0; display: flex; align-items: center; }
.dashboard-icon svg { width: 16px; height: 16px; }
.dashboard-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.dashboard-grid > .dashboard-stats { grid-column: 1 / -1; margin: 2px 0 4px; }
.dashboard-grid > [hidden], .dashboard-stat[hidden] { display: none; }
.dashboard-wide { grid-column: span 2; }
.is-filled .dashboard-section-body { animation: home-fill 320ms ease-out both; }
.is-filled .dashboard-grid > :nth-child(2) .dashboard-section-body { animation-delay: 40ms; }
.is-filled .dashboard-grid > :nth-child(3) .dashboard-section-body { animation-delay: 80ms; }
.is-filled .dashboard-grid > :nth-child(4) .dashboard-section-body { animation-delay: 120ms; }
.is-filled .dashboard-grid > :nth-child(5) .dashboard-section-body { animation-delay: 160ms; }
.is-filled .dashboard-grid > :nth-child(6) .dashboard-section-body { animation-delay: 200ms; }
.is-filled .dashboard-grid > :nth-child(7) .dashboard-section-body { animation-delay: 240ms; }
@keyframes home-fill { from { opacity: 0; transform: translateY(4px); } }
/* A completed note: the strike draws across, the text dims. */
/* Inline, so the strike runs under the words on each line, not the row. */
.note-title { display: inline; -webkit-box-decoration-break: clone; box-decoration-break: clone; background: linear-gradient(currentColor, currentColor) 0 55% / 0 1px no-repeat; transition: background-size 280ms ease, opacity 280ms ease; }
.note-title.is-done { background-size: 100% 1px; opacity: .5; }
.note-title.is-settled { transition: none; }
.dashboard-section { min-width: 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-panel); }
.dashboard-section-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.dashboard-section-header h2 { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; margin: 0; color: var(--text-faint); }
.dashboard-section-header h2 { display: flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.dashboard-section-header h2 .dashboard-icon { padding: 0; }
.dashboard-customize { display: flex; justify-content: flex-end; margin: 0 0 8px; }
.dashboard-customize .btn { font-size: 12px; color: var(--text-faint); }
.dashboard-tab-badge { flex: 0 1 auto; min-width: 0; max-width: 30%; overflow-wrap: anywhere; font-size: 10px; color: var(--text-faint); }
.dashboard-tab-badge.tone-warn { color: var(--warn); }
.dashboard-tab-badge.tone-danger { color: var(--danger); }
.dashboard-tab-badge.tone-ok { color: var(--success); }
.dashboard-section .dashboard-stat-value { overflow-wrap: anywhere; }
.dashboard-tab-figure { display: flex; align-items: baseline; gap: 8px; width: 100%; min-width: 0; padding: 6px 0 2px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.dashboard-tab-figure .dashboard-stat-value { font-size: 32px; line-height: 1.1; }
.dashboard-tab-figure .dashboard-stat-label { font-size: 12px; overflow-wrap: anywhere; }
.dashboard-tab-figure:hover .dashboard-stat-label { color: var(--text); }
.dashboard-tab-figure:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.layout-list[data-group="home-tabs"]:empty::after { content: attr(data-empty); display: block; padding: 10px 12px; font-size: 12px; color: var(--text-faint); }
.dashboard-section-header .btn { font-size: 13px; padding: 0 0 0 8px; color: var(--text-faint); min-height: 20px; }
/* Model provider logos (see modelMark in static/js/api.js). */
.model-mark { display: inline-block; flex: none; width: 1em; height: 1em; vertical-align: -0.14em; background: currentColor; -webkit-mask: var(--mark) center/contain no-repeat; mask: var(--mark) center/contain no-repeat; }
.dashboard-row > .model-mark { width: 15px; height: 15px; color: var(--text); }
.model-row-title .model-mark { margin-right: 7px; }
.dashboard-row { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; padding: 6px 0; background: transparent; border: none; border-radius: 0; color: var(--text); text-align: left; font-size: 12.5px; line-height: 1.5; }
.dashboard-row + .dashboard-row, .dashboard-model + .dashboard-model { border-top: 1px solid var(--hairline-soft); }
button.dashboard-row { cursor: pointer; }
button.dashboard-row:hover { background: var(--surface-2); }
.dashboard-row-title { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dashboard-row-detail { flex: 0 1 auto; max-width: 60%; min-width: 0; font-size: 11px; color: var(--text-faint); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: right; }
.dashboard-event-date { width: 92px; flex: none; font-size: 11px; color: var(--text-faint); white-space: nowrap; }
.dashboard-agent-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); }
.dashboard-agent-dot.working { background: var(--success); }
.dashboard-agent-dot.needs_you { background: var(--warn); }
.dashboard-agent-dot.off { background: transparent; border: 1px solid var(--text-faint); }
.dashboard-empty { font-size: 12px; line-height: 1.7; color: var(--text-faint); padding: 12px 0; }
.dashboard-model { padding: 6px 0; }
.dashboard-model-top { padding: 0; gap: 8px; }
.dashboard-model-name, .dashboard-model-variant { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-model-variant { font-size: 11px; color: var(--text-faint); }
.dashboard-model-usage { display: block; font-size: 10.5px; color: var(--text-faint); overflow-wrap: anywhere; margin-top: 3px; }
/* Account limits keep the shared thresholds, with compact parallel windows. */
.dashboard-quota { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; margin-top: 6px; }
.dashboard-quota-window { min-width: 0; display: grid; gap: 3px; }
.dashboard-quota-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 2px 6px; font-size: 10.5px; color: var(--text-faint); }
.dashboard-quota-head > span { white-space: nowrap; }
.dashboard-quota-note { grid-column: 1 / -1; font-size: 10px; color: var(--text-faint); }
.dashboard-quota-track { height: 4px; border-radius: 2px; background: var(--surface-2); overflow: hidden; }
.dashboard-quota-fill { display: block; height: 100%; border-radius: inherit; transition: width 400ms ease; }
.dashboard-quota-fill.tone-ample { background: var(--success); }
.dashboard-quota-fill.tone-watch { background: var(--warn); }
.dashboard-quota-fill.tone-crit { background: var(--danger); }
.dashboard-system-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dashboard-system-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 11.5px; color: var(--text); }
.dashboard-system-chip .status-dot { width: 7px; height: 7px; }
.dashboard-system-chip .meta { color: var(--text-faint); }

/* Home: each summary has a visual form, with detail available on activation. */
.dashboard-section { padding: 18px; }
.dashboard-section-header { margin-bottom: 16px; }
.dashboard-section-header .btn { min-width: 30px; min-height: 30px; padding: 0; }
.dashboard-section-body > .dashboard-empty { min-height: 112px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.dashboard-empty .dashboard-icon { opacity: .6; }
.dashboard-empty .dashboard-icon svg { width: 34px; height: 34px; }
.dashboard-stat { display: flex; align-items: center; gap: 10px; }
.dashboard-stat > .dashboard-icon { width: 32px; height: 32px; justify-content: center; border-radius: 10px; background: var(--surface-2); color: var(--accent); }
.dashboard-figure { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; }
.dashboard-figure strong { font-family: var(--font-display); font-weight: 400; font-size: 38px; line-height: 1; }
.dashboard-figure > span { font-size: 11px; color: var(--text-faint); }
.dashboard-badge { border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px; font-size: 11px; }
.dashboard-chat-tile { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; padding: 11px 10px; border-radius: 12px; background: var(--surface-2); }
.dashboard-chat-tile + .dashboard-chat-tile { margin-top: 7px; border-top: 0; }
.dashboard-chat-tile > .dashboard-icon { justify-content: center; color: var(--accent); }
.dashboard-chat-tile .dashboard-row-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 12px; line-height: 1.5; }
.dashboard-chat-tile .dashboard-row-detail { max-width: none; font-size: 10px; }
.dashboard-chat-tile:first-child { background: var(--accent-dim); }
.dashboard-event { display: flex; align-items: center; width: 100%; gap: 13px; padding: 8px 0; border: 0; background: transparent; text-align: left; color: var(--text); cursor: pointer; }
.dashboard-event + .dashboard-event { border-top: 1px solid var(--hairline-soft); }
.dashboard-date-block { display: grid; flex: 0 0 46px; text-align: center; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.dashboard-date-block small { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; background: var(--accent-dim); color: var(--text-dim); padding: 3px; }
.dashboard-date-block strong { font-family: var(--font-display); font-size: 25px; line-height: 1.2; font-weight: 400; padding: 2px; }
.dashboard-event-copy { min-width: 0; display: grid; gap: 3px; }
.dashboard-event-copy > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.dashboard-event-copy small { font-size: 10px; color: var(--text-faint); }
.dashboard-project-shelf { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding: 10px 0; }
.dashboard-project-tile { min-width: 0; padding: 0; display: grid; align-content: start; justify-items: center; gap: 13px; border: 0; background: transparent; color: var(--text); cursor: pointer; }
.dashboard-folder { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; width: 66px; max-width: 100%; height: 50px; margin-top: 8px; border: 1px solid var(--border-strong); border-radius: 3px 7px 7px 7px; background: linear-gradient(160deg,var(--bg-panel-solid),var(--accent-dim)); color: var(--accent); isolation: isolate; }
.dashboard-folder::before { content: ''; position: absolute; z-index: -1; top: -8px; left: -1px; width: 28px; height: 10px; border: 1px solid var(--border-strong); border-bottom: 0; border-radius: 5px 5px 0 0; background: var(--bg-panel-solid); }
.dashboard-folder::after { content: ''; position: absolute; z-index: -1; top: -4px; left: 7px; right: 5px; height: 5px; border: 1px solid var(--border); border-radius: 3px; background: var(--bg-panel-solid); }
.dashboard-folder > span:last-child { font-size: 14px; }
.dashboard-project-name { width: 100%; min-width: 0; font-size: 11px; line-height: 1.5; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dashboard-project-tile:hover .dashboard-folder { transform: translateY(-3px); }
.dashboard-agent-summary { display: flex; gap: 24px; padding: 3px 0 18px; }
.dashboard-agent-roster { display: flex; flex-wrap: wrap; gap: 6px; }
.dashboard-agent-tile { display: grid; justify-items: center; gap: 5px; border: 0; background: transparent; padding: 0 2px 4px; min-width: 0; width: calc(20% - 5px); color: var(--text); cursor: pointer; }
.dashboard-agent-tile > span:last-child { max-width: 100%; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashboard-agent-face { display: flex; position: relative; }
.dashboard-agent-face .dashboard-agent-dot { position: absolute; right: 2px; bottom: 2px; width: 9px; height: 9px; outline: 3px solid var(--bg-panel-solid); }
.dashboard-agent-dot.capped { background: var(--warn); }
.dashboard-model { padding: 9px 0; }
.dashboard-model-top { gap: 9px; }
.dashboard-model-top > .model-mark, .dashboard-model-top > .dashboard-icon { width: 24px; height: 24px; }
.dashboard-model-top > .dashboard-icon { justify-content: center; border-radius: 7px; background: var(--surface-2); }
.dashboard-model-name { flex: 1; font-size: 12px; }
.dashboard-model-variant { max-width: 40%; font-size: 10px; }
.dashboard-model-usage { margin: 7px 0 0 33px; font-size: 10px; }
.dashboard-quota { gap: 8px; margin: 10px 0 2px; }
.dashboard-quota-window { display: flex; align-items: center; gap: 8px; }
.dashboard-quota-ring { --gauge: var(--success); display: grid; place-items: center; position: relative; isolation: isolate; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; background: conic-gradient(var(--gauge) var(--quota-used),var(--surface-2) 0); }
.dashboard-quota-ring::before { content: ''; position: absolute; z-index: -1; inset: 4px; border-radius: 50%; background: var(--bg-panel-solid); }
.dashboard-quota-ring > span { font-size: 10px; font-weight: 500; }
.dashboard-quota-ring.tone-watch { --gauge: var(--warn); }
.dashboard-quota-ring.tone-crit { --gauge: var(--danger); }
.dashboard-quota-copy { min-width: 0; }
.dashboard-quota-head { display: grid; gap: 3px; font-size: 10px; }
.dashboard-quota-head > span { white-space: normal; }
.dashboard-quota-reset { font-size: 9px; }
.dashboard-system-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(82px,1fr)); gap: 12px; padding: 6px 0; }
.dashboard-system-tile { display: grid; justify-items: center; align-content: start; gap: 7px; min-width: 0; padding: 5px; border: 0; background: transparent; color: var(--text); font-size: 11px; cursor: pointer; }
.dashboard-system-symbol { width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 14px; position: relative; display: grid; place-items: center; background: var(--surface-2); }
.dashboard-system-symbol .dashboard-icon { color: var(--text-dim); }
.dashboard-system-symbol .dashboard-icon svg { width: 21px; height: 21px; }
.dashboard-system-symbol .status-dot { position: absolute; right: -2px; top: -2px; outline: 3px solid var(--bg-panel-solid); }
.dashboard-system-tile .meta { font-size: 10px; text-align: center; line-height: 1.4; }
.dashboard-store-categories { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.dashboard-store-categories > button { display: grid; justify-items: center; gap: 5px; padding: 12px 4px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-2); color: var(--text); cursor: pointer; }
.dashboard-store-categories strong { font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.15; }
.dashboard-store-categories button > span:last-child { font-size: 10px; color: var(--text-faint); }
.dashboard-store-shelf { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 0; border: 0; background: transparent; color: var(--text-dim); cursor: pointer; font-size: 11px; }
.dashboard-activity { align-items: flex-start; gap: 10px; padding: 9px 0; }
.dashboard-activity > .dashboard-icon { padding: 3px; border-radius: 50%; background: var(--surface-2); }
.dashboard-activity[data-level=error] > .dashboard-icon { color: var(--danger); }
.dashboard-activity[data-level=warning] > .dashboard-icon { color: var(--warn); }
.dashboard-activity .dashboard-row-title { font-size: 11px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; }
.dashboard-activity .dashboard-row-detail { padding-top: 2px; font-size: 10px; }
.dashboard-card-detail { font-size: 11px; margin-top: 12px; color: var(--text-faint); }
.dashboard-card-detail summary { cursor: pointer; }
.dashboard-card-detail p { line-height: 1.6; overflow-wrap: anywhere; }
.dashboard-section-body .model-setup-empty { text-align: center; display: grid; justify-items: center; gap: 14px; padding: 24px 0; }
.dashboard-section-body .model-setup-empty .dashboard-icon svg { width: 40px; height: 40px; }
.dashboard-section :is(button,summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

@media (min-width: 769px) and (max-width: 1100px) {
  :root { --sidebar-width: 176px; }
  .view { padding: 26px 24px; }
  .chat-layout { padding: 0; }
  #chat-sessions { width: 205px; }
  .dashboard-actions { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 768px) {
  /* A shared phone shell: generous navigation, warm surfaces and quiet chrome. */
  .mobile-menu-btn { box-shadow: none; border-radius: 14px; }
  #sidebar, #chat-sessions { border-radius: 0 24px 24px 0; border-right: 1px solid var(--hairline-soft); }
  #sidebar .sidebar-header { min-height: 44px; margin-bottom: 20px; }
  #sidebar .nav-item { min-height: 48px; border-radius: 12px; margin-bottom: 3px; }
  #sidebar .nav-item.active { background: var(--accent-dim); color: var(--accent); }
  #sidebar .nav-group-label { padding-left: 14px; letter-spacing: .1em; }
  #sidebar .sidebar-user-card, #sidebar .sidebar-settings-btn { min-height: 44px; }
  #sidebar .sidebar-settings-btn { min-width: 44px; }
  .mobile-drawer-heading { display: block; padding: 0 12px 18px; }
  .mobile-drawer-eyebrow { color: var(--text-faint); font-size: 11px; letter-spacing: .06em; }
  .mobile-drawer-heading h2 { color: var(--text); font-size: 23px; font-weight: 500; margin: 5px 0 0; }
  #chat-sessions .session-item { min-height: 52px; border-radius: 12px; }
  #sidebar.drawer-dragging, #chat-sessions.drawer-dragging {
    transform: translateX(var(--drawer-swipe-x)); transition: none;
    box-shadow: 12px 0 40px rgba(var(--shade-rgb), .16);
  }
  .mobile-backdrop, .chat-sessions-backdrop { overscroll-behavior: none; touch-action: none; }
}

@media (prefers-reduced-motion: reduce) {
  #sidebar, #chat-sessions { transition: none !important; }
}

@media (max-width: 768px) {
  .mobile-menu-btn {
    display: flex; align-items: center; justify-content: center;
    position: fixed; top: calc(var(--titlebar-h) + 12px + var(--mobile-safe-top)); left: max(12px, var(--mobile-safe-left)); z-index: 60;
    width: 44px; height: 44px; border-radius: 9px;
    background: var(--bg-panel-solid);
    backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5);
    border: 1px solid var(--border); color: var(--text); cursor: pointer;
    box-shadow: var(--shadow-elevated);
  }
  .mobile-menu-btn svg { width: 18px; height: 18px; }

  .mobile-backdrop {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(var(--shade-rgb), 0.55); backdrop-filter: blur(2px);
  }
  .mobile-backdrop.hidden { display: none; }

  /* Sidebar becomes a slide-out drawer instead of a permanent column. */
  #app { position: relative; }
  #sidebar {
    position: fixed; inset: var(--titlebar-h) auto 0 0; z-index: 56;
    width: 78vw; max-width: 300px; height: auto;
    transform: translateX(-100%); transition: transform 0.22s ease, box-shadow 0.22s ease;
    padding-top: calc(22px + var(--mobile-safe-top));
    padding-bottom: max(14px, var(--mobile-safe-bottom));
    padding-left: max(10px, var(--mobile-safe-left));
  }
  /* Shadow only while open, as with the chat history drawer. */
  #sidebar.open { transform: translateX(0); box-shadow: 16px 0 50px rgba(var(--shade-rgb), 0.5); }
  .nav-item { padding: 13px 14px; font-size: 14.5px; } /* bigger touch targets */

  html, body { height: var(--ms-page-height); }
  #content { width: 100%; padding: 0 var(--mobile-safe-right) 0 var(--mobile-safe-left); }
  .view { padding: 72px 14px 14px; } /* clears the fixed hamburger button */


  /* Chat: sessions list becomes its own slide-out drawer (Claude/ChatGPT's
     "tap to see history" pattern) instead of a fixed 220px column
     squeezing the conversation on a narrow screen. */
  .chat-layout { flex-direction: column; }
  .chat-mobile-header { display: flex; }
  #chat-sessions {
    position: fixed; inset: var(--titlebar-h) auto 0 0; z-index: 56;
    width: 82vw; max-width: 320px; height: auto;
    transform: translateX(-100%); transition: transform 0.22s ease, box-shadow 0.22s ease;
    background: var(--bg-panel-solid);
    padding-top: calc(14px + var(--mobile-safe-top));
    padding-bottom: max(14px, var(--mobile-safe-bottom));
  }
  /* The shadow only while open: closed, it would bleed onto the page's left edge. */
  #chat-sessions.open { transform: translateX(0); box-shadow: 16px 0 50px rgba(var(--shade-rgb), 0.5); }
  .chat-history-close.input-icon-btn { display: flex; justify-content: flex-end; width: 100%; margin-bottom: 12px; }
  .chat-sessions-backdrop {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(var(--shade-rgb), 0.55);
  }
  .chat-sessions-backdrop.hidden { display: none; }
  #chat-main { width: 100%; }
  /* Claude-style column collapses to full width on a phone — the centering
     max-width would otherwise just add dead side margins on a narrow
     screen. Composer stays floating but tightens its margins. */
  #chat-messages { padding: 16px 12px 8px; gap: 20px; }
  .model-picker-btn { max-width: 130px; }
  .chat-input-bar {
    margin: 0 0 10px; width: 100%; border-radius: 22px;
    padding-bottom: max(10px, var(--mobile-safe-bottom));
  }
  .attach-strip { padding-left: 12px; padding-right: 12px; }
  .msg.user .msg-body { max-width: 88%; }

  /* Settings modal goes full-screen; its left nav becomes a horizontal
     scroll strip above the content instead of a side column, same
     restructuring Claude/ChatGPT apply to any desktop-shaped side-nav
     panel on mobile. */
  .settings-window { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; border-radius: 0; }
  .settings-body { flex-direction: column; }
  .settings-nav {
    width: 100%; display: block; overflow: hidden;
    border-right: none; border-bottom: 1px solid var(--border); padding: 8px;
  }
  .settings-nav-list { display: flex; gap: 4px; overflow-x: auto; white-space: nowrap; }
  .settings-nav-group { display: none; } /* group labels don't fit a horizontal strip */
  .settings-nav-item { flex: 0 0 auto; width: auto; }

  /* Settings as a real full-screen page instead of a popup on mobile
     (David's ask 2026-09-01) — mounted directly into the tab's view
     content (app.js's settings-gear handler branches on viewport), not
     the floating modal-backdrop window desktop uses. Reuses the same
     .settings-titlebar/.settings-body/.settings-nav/.settings-content
     building blocks, just laid out as this tab's own content instead of
     an overlay on top of whatever tab was active. */
  .settings-mobile-page { display: flex; flex-direction: column; padding: 0; overflow: hidden; height: 100%; }

  /* Toolbar rows (Notes/Library/Calendar/Tasks/Tool Store) wrap
     instead of forcing the page to scroll sideways — David's ask 2026-09-01
     named these five pages specifically; all five build their toolbar with
     the same shared .card-row class, so one rule fixes every one of them.
     Combined with the overflow-x:hidden fixes above (the actual root cause
     of the scrollbar itself), content now reflows instead of clipping or
     scrolling off-screen. */
  .card-row { flex-wrap: wrap; }
  /* Real bug found live 2026-09-01: this rule was also matching
     checkboxes, whose fixed 16x16px sizing (style.css's custom checkmark
     rule) got overridden by flex-grow stretching their width while height
     stayed fixed — the "elongated checkmarks" David saw. Excluded
     checkboxes/radios explicitly rather than just text/date inputs. */
  /* Override legacy inline flex:1 shorthands so fields wrap at a usable width. */
  .card-row input:not([type="checkbox"]):not([type="radio"]), .card-row select, .card-row .custom-select { flex: 1 1 180px !important; min-width: 0; }

  /* Calendar (David's ask 2026-09-01: "some of the stuff are hanging off
     the page") — real bug: .cal-layout's two-column split (.cal-left at a
     fixed 62% flex-basis + .cal-day-panel's own 220px min-width) never
     stacked on mobile, so their combined minimum width exceeded a phone's
     viewport and the whole row overflowed sideways instead of wrapping
     (flex-direction:row doesn't wrap on its own). Stacked vertically
     instead, both panels released back to natural full width, and the
     month-nav row (prev/next/today + label) allowed to wrap too. */
  .cal-layout { flex-direction: column; gap: 12px; }
  .cal-left { flex: none; width: 100%; min-width: 0; }
  /* Real bug found live, follow-up 2026-09-01 ("super small, can't see its
     content"): .cal-day-panel kept its desktop flex:1 in the new stacked
     column layout above — with .cal-left now claiming its own full natural
     (and, at full mobile width, fairly tall) height, flex:1's flex-basis:0
     squeezed the day panel down to whatever sliver of height was left
     inside .view's bounded flex column, rather than growing to fit its
     actual content. flex:none lets it take its real content height instead
     of competing for space; overflow-y:visible hands scrolling back to the
     page itself (.view already scrolls) instead of nesting a second,
     tinier scroll box inside an already-too-short box. */
  .cal-day-panel { flex: none; width: 100%; min-width: 0; overflow-y: visible; }
  .cal-nav { flex-wrap: wrap; }
  .cal-month-label { min-width: 0; }
  .dashboard { padding: 68px 20px 32px; }
  .dashboard-header { align-items: flex-start; gap: 12px; }
  .dashboard-system-pill { font-size: 9px; padding-top: 2px; gap: 5px; }
  .dashboard-hero { min-height: 0; padding: 18px; margin-top: 0; }
  .dashboard-core::after { background: linear-gradient(180deg, rgba(var(--wash-rgb), .94), rgba(var(--wash-rgb), .84) 72%, rgba(var(--wash-rgb), .5)); }
  .dashboard-intro { padding: 34px 0 48px; }
  .dashboard-intro h1 { font-size: 38px; margin: 12px 0 16px; }
  .dashboard-intro > p { max-width: 100%; }
  .dashboard-next { margin-top: 20px; }
  .view-header { gap: 12px; flex-wrap: wrap; margin-bottom: 20px; padding-bottom: 16px; }
  .view-header h2 { font-size: 25px; }
  .view-header .sub { font-size: 12px; }
  .card { padding: 16px; }
  .chat-layout { padding: 0; }
  .chat-mobile-header { padding: 12px 16px 12px 62px; min-height: 68px; letter-spacing: .05em; color: var(--text-dim); }
  .chat-suggestions { gap: 6px; }
  .suggestion-chip { font-size: 11px; padding: 8px 10px; }
  .chat-composer-dock { width: calc(100% - 24px); }
  .chat-input-bar { width: 100%; margin: 0 0 8px; padding: 12px; border-radius: 18px; }
  .chat-input-bar .model-picker-btn { max-width: 160px; font-size: 10px; }
  .chat-input-right { gap: 4px; }
  #chat-input { font-size: 16px; }
  .composer-hint { font-size: 9px; padding-bottom: max(10px, var(--mobile-safe-bottom)); }
  .model-picker-menu { min-width: 200px; max-width: calc(100vw - 48px); }
  .settings-mobile-page .settings-titlebar { padding-left: 62px; min-height: 68px; }
  .settings-content { padding: 18px 16px; }
  .cal-day { min-height: 65px; padding: 4px; }
  .cal-event-pill { font-size: 9px; padding: 2px; }
  #chat-progress-host { top: calc(var(--titlebar-h) + 68px); right: 12px; max-width: calc(100vw - 24px); max-height: calc(100dvh - var(--titlebar-h) - 80px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .border-beam::before { animation: none !important; --beam-angle: 140deg; opacity: .45; }
  .msg-thinking-text { color: var(--text-dim); background: none; }
}

/* -- Settings > Speech (David's ask 2026-09-15) ------------------------- */
.speech-model-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.speech-model-actions .meta { font-variant-numeric: tabular-nums; min-width: 38px; text-align: right; }

/* Settings > Admin > Logs (static/js/views/settings.js renderLogsPanel). */
.logs-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 6px; }
.logs-controls .custom-select { flex: 1 1 150px; min-width: 0; }
.logs-controls .logs-search { flex: 2 1 180px; min-width: 0; }
.logs-follow-label { display: flex; align-items: center; gap: 4px; color: var(--text-dim); white-space: nowrap; }
.logs-status { margin: 4px 0 8px; }
.logs-output { height: 420px; max-height: 60vh; overflow: auto; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-panel-solid); font: 11.5px/1.55 var(--font-mono); color: var(--text); }
.log-entry { white-space: pre-wrap; overflow-wrap: anywhere; padding: 2px 6px; border-radius: 5px; }
.log-debug { color: var(--text-faint); }
.log-warning { color: var(--warn); background: rgba(var(--warn-rgb), .08); }
.log-error, .log-critical { color: var(--danger); background: rgba(var(--danger-rgb), .08); }
/* Settings > Administration > Sandbox changes */
.sandbox-change { margin-top: 12px; }
.sandbox-change-head { justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.sandbox-change-actions { gap: 6px; flex-wrap: wrap; }
.sandbox-change-files { margin: 8px 0 0; padding-left: 18px; overflow-wrap: anywhere; }
.sandbox-diff { margin: 10px 0 0; max-height: 50vh; overflow: auto; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--bg-panel-solid); font: 11.5px/1.55 var(--font-mono);
  color: var(--text); white-space: pre; }
.sandbox-diff.hidden { display: none; }
.sandbox-diff-line.add { color: var(--success); background: rgba(var(--success-rgb), .08); }
.sandbox-diff-line.del { color: var(--danger); background: rgba(var(--danger-rgb), .08); }
.sandbox-diff-line.hunk { color: var(--accent); }
.log-tag { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 6px; background: var(--accent-dim);
  color: var(--accent); max-width: 220px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; white-space: nowrap; }

/* Tasks > Work board (static/js/views/taskBoard.js). Scrolls sideways on a
   narrow screen rather than squeezing six columns into it. */
.task-board-card { margin-bottom: 14px; }
.task-board { display: grid; grid-template-columns: repeat(6, minmax(150px, 1fr)); gap: 10px; margin-top: 12px;
  overflow-x: auto; padding-bottom: 4px; }
.board-column { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 8px; border-radius: 10px;
  background: rgba(var(--ink-rgb), 0.03); border: 1px solid var(--border); }
.board-column-title { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
.board-card { display: flex; flex-direction: column; gap: 6px; padding: 9px 10px; border-radius: 8px;
  border: 1px solid var(--border-strong); background: var(--bg-panel-solid); min-width: 0; }
.board-card-name { font-size: 12.5px; color: var(--text); overflow-wrap: anywhere; }
.board-card-running { border-color: var(--accent); }
.board-card-review { border-color: var(--warn); }
.board-card-blocked { border-color: var(--danger); }
.board-card-done { opacity: .7; }
.board-card-output summary { font-size: 11px; color: var(--text-dim); cursor: pointer; }
.board-card-text { margin-top: 4px; max-height: 180px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere;
  font-size: 11.5px; color: var(--text-dim); }
.board-card-text.is-error { color: var(--danger); }
.board-card-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.board-card-actions .btn { padding: 3px 9px; font-size: 11px; }
.board-feedback { flex: 1 1 100%; min-width: 0; font-size: 11.5px; }

/* Agents (static/js/views/agents.js). */
.nav-badge { margin-left: auto; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent-dim);
  color: var(--accent); font-size: 10.5px; line-height: 18px; text-align: center; }
.sidebar-collapsed .nav-badge { position: absolute; top: 4px; right: 6px; margin: 0; }
.nav-item { position: relative; }
.agent-avatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%;
  color: var(--k-ink); font-weight: 600; }
.agent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-top: 14px; }
.agent-tile { display: flex; flex-direction: column; gap: 12px; padding: 14px; text-align: left; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--bg-panel); color: var(--text); cursor: pointer; min-width: 0; }
.agent-tile:hover { border-color: var(--border-strong); }
.agent-tile-head { display: flex; gap: 10px; align-items: center; min-width: 0; }
.agent-tile-name { min-width: 0; }
.agent-tile-name .meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-tile-foot { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.agent-status { padding: 1px 8px; border-radius: 8px; border: 1px solid var(--border-strong); font-size: 11px; color: var(--text-dim); }
.agent-status-working { color: var(--accent); border-color: var(--accent); }
.agent-status-needs_you { color: var(--warn); border-color: var(--warn); }
.agent-status-off, .agent-status-capped { color: var(--text-faint); }
/* Teams (agents phase 5): Swarm companies listed in the Agents tab. */
.agent-teams { margin-top: 26px; }
.agent-teams-header { align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.agent-teams-header h3 { margin: 0; }
.team-mission { white-space: normal !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.team-state-active { color: var(--accent); border-color: var(--accent); }
.team-state-paused, .team-state-pausing { color: var(--warn); border-color: var(--warn); }
.team-state-stopped, .team-state-archived { color: var(--text-faint); }
.agent-teams-panel .card-row { padding: 6px 0; border-top: 1px solid var(--border); min-width: 0; }
.agent-teams-panel .card-row span { min-width: 0; overflow-wrap: anywhere; }
.agents-view > .glass, .agents-view > .disclosure-panel { margin-top: 14px; }
.agent-back { margin-bottom: 8px; }
.agent-header { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.agent-header-text { flex: 1 1 240px; min-width: 0; }
.agent-header-text h2 { margin: 0; }
.agent-header-meta { display: flex; gap: 8px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.agent-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.agent-inbox { display: flex; flex-direction: column; gap: 10px; }
.agent-inbox-item { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: rgba(var(--ink-rgb), 0.02); min-width: 0; }
.agent-inbox-question { border-color: var(--warn); }
.agent-inbox-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 0; }
.agent-inbox-kind { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
.agent-inbox-title { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
.agent-inbox-body { max-height: 220px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12.5px; color: var(--text-dim); }
.agent-inbox-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.agent-reply { flex: 1 1 180px; min-width: 0; }
.agent-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 0;
  border-top: 1px solid var(--border); flex-wrap: wrap; }
.agent-row-actions { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.agent-memory { width: 100%; box-sizing: border-box; font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.meta.is-error { color: var(--danger); }
.agent-swatches { display: flex; gap: 6px; padding-top: 4px; }
.agent-swatches button { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.agent-swatches button[aria-checked="true"] { border-color: var(--text); }
.agent-tabs { display: flex; gap: 4px; margin-top: 16px; border-bottom: 1px solid var(--border); }
.agent-tab { padding: 8px 14px; border: none; border-bottom: 2px solid transparent; background: none; color: var(--text-dim);
  font-size: 13px; cursor: pointer; margin-bottom: -1px; }
.agent-tab.active { color: var(--text); border-bottom-color: var(--accent); }
.agent-tab-panel[hidden] { display: none; }
.agent-work-host > .glass, .agent-work-host > .disclosure-panel { margin-top: 14px; }
.agent-chat { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 12px; margin-top: 14px; height: min(70vh, 720px); }
.agent-chat-side { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.agent-chat-list { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; min-height: 0; }
.agent-chat-item { display: flex; align-items: center; border-radius: 8px; }
.agent-chat-item.active, .agent-chat-item:hover { background: rgba(var(--ink-rgb), 0.05); }
.agent-chat-open { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 8px;
  border: none; background: none; color: var(--text); text-align: left; cursor: pointer; }
.agent-chat-title { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.agent-chat-delete { opacity: 0; }
.agent-chat-item:hover .agent-chat-delete, .agent-chat-delete:focus-visible { opacity: 1; }
.agent-chat-main { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-panel); }
.agent-chat-empty { margin: auto; max-width: 360px; text-align: center; display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 768px) {
  .agent-chat { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: auto; }
  .agent-chat-list { max-height: 140px; }
  .agent-chat-main { height: 64vh; }
  .agent-chat-delete { opacity: 1; }
}

/* Run timelines, roadmap phase 8 (static/js/runTimeline.js). */
.runs-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.run-item { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; min-width: 0; }
.run-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; }
.run-item-title { font-weight: 600; overflow-wrap: anywhere; }
.run-item-head .btn { margin-left: auto; padding: 2px 10px; font-size: 11px; }
.run-timeline { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; font-size: 11.5px; }
.run-step { display: flex; flex-wrap: wrap; gap: 8px; padding: 3px 0; border-top: 1px solid var(--border); min-width: 0; }
.run-step-time { color: var(--text-faint); font-variant-numeric: tabular-nums; }
.run-step.is-error .run-step-what { color: var(--danger); }
.run-step-detail { flex-basis: 100%; color: var(--text-dim); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 120px; overflow: auto; }
.run-link { overflow-wrap: anywhere; }
.run-steps { margin-top: 4px; padding: 1px 8px; font-size: 11px; }

/* Tool Store, roadmap phase 6: MCP server health, held tools, unreadable skills. */
.tool-store-health { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0;
  font-size: 11.5px; color: var(--text-dim); }
.tool-store-health .btn { padding: 2px 10px; font-size: 11px; }
.tool-store-health.health-working span { color: var(--success); }
.tool-store-health.health-down span { color: var(--danger); }
.tool-store-health.health-signed_out span { color: var(--warn); }
.tool-store-held { margin: 6px 0; padding: 8px 10px; border: 1px solid var(--warn); border-radius: 8px; display: flex;
  flex-direction: column; gap: 6px; font-size: 11.5px; }
.tool-store-held .title { color: var(--warn); font-size: 11.5px; }
.tool-store-held-tool { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; min-width: 0;
  overflow-wrap: anywhere; }
.tool-store-held-tool .btn, .tool-store-held > .btn { padding: 2px 10px; font-size: 11px; align-self: flex-start; }
.tool-store-version { display: inline-flex; align-items: baseline; }

/* Run history (static/js/runHistory.js): scheduled tasks and board cards. */
.run-history-panel { margin-top: 6px; }
.run-history-panel > summary { font-size: 11.5px; color: var(--text-dim); cursor: pointer; }
.run-history { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; min-width: 0; }
.run-row > summary { font-size: 11.5px; cursor: pointer; overflow-wrap: anywhere; }
.run-outcome { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 6px; border: 1px solid var(--border-strong);
  font-size: 10.5px; color: var(--text-dim); }
.run-outcome.run-succeeded { color: var(--success); }
.run-outcome.run-failed { color: var(--danger); }
.run-outcome.run-lost { color: var(--warn); }
.run-outcome.run-stopped { color: var(--text-dim); }
.run-delivery { margin: 2px 0; font-size: 11px; color: var(--text-faint); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.run-delivery.is-error { color: var(--danger); }
.run-delivery .btn { padding: 1px 8px; font-size: 11px; }
.run-meta { color: var(--text-faint); }
.run-text { margin: 4px 0 2px; max-height: 180px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere;
  font-size: 11.5px; color: var(--text-dim); }
.run-text.is-error { color: var(--danger); }
.run-more { align-self: flex-start; padding: 2px 8px; font-size: 11px; }


/* Tool Store: skills, MCP servers, prebuilt tabs and user tabs. */
.tool-store-view { width: 100%; padding-bottom: 48px; }
.tool-store-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 22px 0 10px; }
.tool-store-search { flex: 1 1 260px; min-width: 0; }
.tool-store-filters { margin: 0; flex-shrink: 0; }
.tool-store-community .tool-store-card-foot { margin-top: auto; justify-content: flex-start; flex-wrap: wrap; gap: 6px; }
.tool-store-community .tool-store-card-foot .btn { padding: 6px 12px; font-size: 12px; }
.tool-store-community .meta { overflow-wrap: anywhere; }
.tool-store-installed { display: inline-flex; align-items: center; gap: 7px; color: var(--text-dim); font-size: 12px; cursor: pointer; white-space: nowrap; }
.tool-store-installed input { accent-color: var(--accent); }
.tool-store-summary { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; min-height: 38px; }
.tool-store-manage { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.tool-store-manager > .tool-store-heading { margin: 8px 0 10px; }
.tool-store-manager .card { margin-bottom: 10px; }
.tool-store-install p { margin: 0 0 12px; }
.tool-store-form-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.tool-store-form-row input[type="url"] { flex: 2 1 280px; min-width: 0; }
.tool-store-form-row input:not([type="url"]), .tool-store-form-row select { flex: 1 1 150px; min-width: 0; }
.tool-store-form-row input[hidden] { display: none; }
.tool-store-review:not(:empty) { margin-top: 12px; }
.tool-store-scan { padding: 14px; border: 1px solid var(--border-strong); border-radius: var(--radius); }
.tool-store-scan pre { max-height: 220px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-dim); font: inherit; font-size: 12px; }
.tool-store-heading { margin: 26px 0 12px; color: var(--text-dim); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.tool-store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); gap: 10px; }
.tool-store-card { display: flex; flex-direction: column; min-width: 0; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-panel); }
.tool-store-card:hover { border-color: var(--border-strong); }
.tool-store-card-top, .tool-store-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.tool-store-mark { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border: 1px solid var(--border); border-radius: 9px; color: var(--text-dim); }
.tool-store-mark svg { width: 18px; height: 18px; }
.tool-store-badge { border-radius: 999px; padding: 3px 8px; background: var(--accent-dim); color: var(--accent); font-size: 11px; white-space: nowrap; }
.tool-store-badge.muted { background: var(--surface-2); color: var(--text-faint); }
.tool-store-badge.blocked { background: rgba(var(--danger-rgb), .1); color: var(--danger); }
.tool-store-card h4 { margin: 15px 0 4px; overflow-wrap: anywhere; font-size: 14px; font-weight: 600; }
.tool-store-card p { flex: 1; margin: 0 0 19px; color: var(--text-dim); font-size: 12.5px; line-height: 1.55; }
.tool-store-card-foot { min-height: 29px; }
.tool-store-card[data-addon] .tool-store-card-foot { margin-top: auto; justify-content: flex-start; gap: 6px; flex-wrap: wrap; }
.tool-store-card[data-addon] .tool-store-card-foot .btn { padding: 6px 12px; font-size: 12px; }
.tool-store-card[data-tab-slug] .tool-store-card-foot { margin-top: auto; justify-content: flex-start; gap: 6px; flex-wrap: wrap; }
.tool-store-card[data-tab-slug] .tool-store-card-foot .btn { padding: 6px 12px; font-size: 12px; }
.tool-store-card-foot .btn.quiet.danger { color: var(--danger); }
.tool-store-card[data-tab-slug] p { flex: none; }
.tool-store-tab-review p { margin: 0 0 10px; }
.tool-store-tab-files { margin: 0 0 12px; font-size: 12px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.tool-store-tab-hash { overflow-wrap: anywhere; }
.tool-store-card p.tool-store-tab-reason { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--danger); }
.tool-store-card-foot a, .tool-store-action a { color: var(--accent); font-size: 12px; text-decoration: none; }
.tool-store-card-foot a:hover, .tool-store-action a:hover { text-decoration: underline; }
.tool-store-action { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.tool-store-skill-body { margin: 0 0 8px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-dim); font: inherit; font-size: 12px; }
.tool-store-notice, .tool-store-empty { margin-top: 24px; padding: 22px; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-dim); }
@media (max-width: 768px) {
  .tool-store-toolbar { align-items: stretch; }
  .tool-store-filters { max-width: 100%; flex-wrap: wrap; }
  .tool-store-search { flex-basis: 100%; }
  .tool-store-grid { grid-template-columns: 1fr; }
}

/* Drive keeps navigation, files and the reader together at every width. */
.store-github { margin: 0 0 18px; }
.store-github-strip, .store-submission { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.store-github h4 { margin: 14px 0 8px; font-size: 13px; }
.store-device-code { user-select: all; letter-spacing: .12em; }
.store-github a, .store-publish-panel a { color: var(--accent); overflow-wrap: anywhere; }
.store-submission a { flex: 1; min-width: 160px; font-size: 12px; }
.submission-closed { color: var(--text-faint); background: var(--surface-2); }
.submission-merged { color: var(--success); }
.store-publish-body { display: flex; flex-direction: column; gap: 12px; }
.store-publish-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.store-publish-fields .field { min-width: 0; }
.store-publish-fields input, .store-publish-fields textarea { width: 100%; box-sizing: border-box; }
.store-publish-preview { flex-shrink: 0; max-height: 35vh; overflow: auto; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); }
.store-publish-preview h5 { overflow-wrap: anywhere; margin: 0 0 6px; }
.store-publish-preview pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; margin: 0 0 18px; }
.store-publish-panel .modal-footer { flex-wrap: wrap; }
.tool-store-card-foot:has(.store-share) { flex-wrap: wrap; }
@media (max-width: 768px) {
  .store-publish-fields { grid-template-columns: minmax(0, 1fr); }
  .store-publish-panel { padding: 16px; }
}

.google-rail { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-right: 1px solid var(--border); min-width: 0; }
.google-section { text-align: left; }
.google-section[aria-current='true'] { background: var(--accent-dim); color: var(--accent); }
.google-storage { padding: 18px 4px; margin-top: auto; }
.google-main { min-width: 0; padding: 14px; }
.google-toolbar .btn[aria-pressed='true'], .cal-nav .btn[aria-pressed='true'] { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.google-content { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.google-content:has(.google-detail:not([hidden])) { grid-template-columns: minmax(0, 1fr) minmax(280px, 40%); }
.google-files { min-width: 0; }
.google-main .google-file-list { border: 0; max-height: none; position: relative; }
.google-file-open { display: flex; align-items: center; gap: 12px; background: none; border: 0; color: var(--text); text-align: left; cursor: pointer; min-width: 0; flex: 1; padding: 0; }
.google-file-row.selected { background: var(--accent-dim); outline: 1px solid var(--accent); }
.google-thumbnail { position: relative; display: grid; place-items: center; flex: none; width: 52px; height: 44px; overflow: hidden; border-radius: 8px; background: var(--surface-2); }
.google-thumbnail img { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.google-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.google-grid .google-file-row { align-items: flex-start; border: 1px solid var(--border); background: var(--bg-panel-solid); }
.google-grid .google-file-open { flex-direction: column; align-items: stretch; }
.google-grid .google-thumbnail { width: 100%; height: 116px; }
.google-grid .google-file-copy { width: 100%; }
.google-new-menu { position: relative; margin-bottom: 16px; }
.google-new-actions { display: grid; gap: 6px; margin-top: 8px; }
.google-new-menu summary { cursor: pointer; list-style: none; }
.google-new-menu summary::-webkit-details-marker { display: none; }  /* the default disclosure arrow */
.google-selection-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; background: var(--surface-2); border-radius: var(--radius); }
.google-selection-toolbar[hidden], .google-detail[hidden] { display: none; }
.google-context-menu { position: absolute; z-index: 3; inset: 12px 12px auto auto; display: grid; width: 190px; max-width: 90%; padding: 10px; gap: 4px; background: var(--bg-panel-solid); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-elevated); }
.google-main .google-detail { border: 1px solid var(--border); border-radius: var(--radius); max-height: 75vh; overflow: auto; padding: 16px; }
.google-drop-active { outline: 2px solid var(--accent); }
.google-viewer { min-height: 240px; }
.google-reader { width: 100%; height: 60vh; border: 1px solid var(--border); background: var(--bg-panel-solid); }
.google-viewer img { max-width: 100%; max-height: 60vh; object-fit: contain; }
.google-text-preview { overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
@media (max-width: 1100px) {
  .google-content:has(.google-detail:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .google-rail { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--border); }
  .google-storage { margin: 0; padding: 8px; }
  .google-new-menu { margin: 0; }
  .google-main { padding: 10px; }
  .google-content:has(.google-detail:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
  .google-main .google-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .google-grid .google-file-row { padding: 6px; gap: 4px; }
  .google-grid .google-thumbnail { height: 90px; }
  .google-main .google-detail { padding: 12px; max-height: none; }
}

.cal-calendar-list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 12px; }
.cal-calendar-choice { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; border-left: 4px solid var(--border); padding-left: 8px; }
.cal-google-event { border-left: 4px solid var(--calendar-color); }
.cal-event-pill.cal-google-event { color: var(--text); background: var(--surface-2); }
.cal-nav { flex-wrap: wrap; }
.cal-event-dialog { width: min(620px, calc(100vw - 24px)); max-height: calc(100vh - 32px); overflow: auto; }
.cal-event-dialog .form-grid { align-items: start; }
.cal-event-dialog .field { min-width: 0; }
.cal-event-dialog [hidden] { display: none !important; }
.cal-event-dialog input, .cal-event-dialog select, .cal-event-dialog textarea { width: 100%; min-width: 0; }
/* A real checkbox: the form's text-input sizing otherwise squashes it into a bar. */
.cal-event-dialog .cal-checkbox-label input { width: 16px; height: 16px; min-height: 0; padding: 0; flex: none; accent-color: var(--accent); }
.cal-event-dialog .row-actions { position: static; display: flex; justify-content: flex-end; opacity: 1; margin-top: 12px; }
.cal-week-grid { display: block; max-height: 580px; overflow: auto; }
.cal-week-header, .cal-week-timeline { display: grid; grid-template-columns: 48px repeat(7, minmax(78px, 1fr)); min-width: 620px; }
.cal-week-header { position: sticky; top: 0; z-index: 2; background: var(--bg-panel-solid); border-bottom: 1px solid var(--border); }
.cal-week-header > span { font-size: 10px; padding: 8px 2px; }
.cal-week-heading { min-width: 0; padding: 4px; border-left: 1px solid var(--border); }
.cal-week-heading .btn { padding: 6px 2px; width: 100%; }
.cal-week-heading .cal-event-pill { display: block; width: 100%; text-align: left; color: var(--text); background: var(--surface-2); cursor: pointer; }
.cal-week-timeline { height: 1008px; }
.cal-week-hours, .cal-week-day { position: relative; }
.cal-week-hours span { position: absolute; font-size: 10px; color: var(--text-dim); }
.cal-week-day { border-left: 1px solid var(--border); background: repeating-linear-gradient(to bottom, transparent 0, transparent 41px, var(--border) 41px, var(--border) 42px); }
.cal-week-event { position: absolute; overflow: hidden; text-align: left; font: inherit; font-size: 11px; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 5px; padding: 3px; cursor: pointer; }
.cal-week-event.cal-google-event { border-left-color: var(--calendar-color); }
.cal-today-line { position: absolute; left: 0; right: 0; border-top: 2px solid var(--danger); pointer-events: none; z-index: 1; }
@media (max-width: 760px) {
  .cal-event-dialog .form-grid { display: grid; grid-template-columns: 1fr; }
  .cal-event-dialog .field-grow { grid-column: auto; }
  .cal-week-grid { max-height: 520px; }
}
.forge-editor-host { flex: 1; min-height: 0; overflow: hidden; }
.forge-editor-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.forge-editor-toolbar > span:first-child { flex: 1; overflow-wrap: anywhere; }
.forge-file-surface { display: flex; flex-direction: column; }
.forge-git-panel { padding: 12px; overflow: auto; }
.forge-git-content { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* The rail is narrow: let the branch line wrap, and drop the status line's space while it's empty. */
.forge-git-content .forge-branch { white-space: normal; overflow-wrap: anywhere; }
.forge-git-panel > [role=status]:empty { display: none; }
.forge-git-content input, .forge-git-content textarea { width: 100%; min-width: 0; }
.forge-git-actions, .forge-end-options { display: flex; gap: 8px; flex-wrap: wrap; }
.forge-git-file { display: flex; align-items: center; gap: 6px; padding: 5px 0; }
.forge-git-file code { flex: 1; overflow-wrap: anywhere; min-width: 0; }
.forge-git-files > strong { font-size: 12px; color: var(--text-dim); }
.forge-terminal-surface { display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: var(--bg-panel-solid); }
.forge-terminal-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px; border-bottom: 1px solid var(--border); }
.forge-terminal-host { flex: 1; min-height: 0; min-width: 0; padding: 8px; overflow: hidden; }
.forge-terminal-host .xterm { height: 100%; }
.forge-sidebar-tabs { height: 42px; padding: 0 4px; }
.forge-sidebar-tab { flex: 1 1 0; flex-direction: column; gap: 0; height: 36px; padding: 0 2px; }
.forge-terminal-phone-note { display: none; }
@media (max-width: 768px) { .forge-terminal-phone-note { display: block; flex-basis: 100%; } }

@media (max-width: 768px) {
  .dashboard-grid { grid-template-columns: 1fr; gap: 14px; }
  .dashboard-wide { grid-column: auto; }
  .dashboard-stat { flex: 1 1 40%; }
}