* { box-sizing: border-box; }
html, body { height: 100%; overscroll-behavior: none; touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 14px; }
button, input, select, textarea { color: inherit; font: inherit; }
button { border: 0; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.48; }
textarea { resize: none; }
::selection { background: rgba(217, 255, 115, 0.24); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(230, 238, 210, 0.15); border: 3px solid transparent; background-clip: padding-box; border-radius: 999px; }
.hidden { display: none !important; }
[hidden] { display: none !important; }
.mobile-only, .mobile-bar, .mobile-chat-controls, .mobile-brain-button { display: none; }
.mobile-send-proxy { display: none; }
/* The phone types into the host's field over the front chat's field (public/host-input.js); the chat's own field
   shows the text, the host's field only the caret. */
.host-composer-input { display: none; }
html.host-input #composer-input { caret-color: transparent; pointer-events: none; }
.host-composer-input, .host-composer-input::placeholder { -webkit-text-fill-color: transparent; color: transparent; }
.eyebrow { color: var(--subtle); font-size: 10px; font-weight: 750; letter-spacing: 0.16em; margin: 0 0 6px; text-transform: uppercase; }

.login-page {
  align-items: center;
  background:
    radial-gradient(circle at 50% 25%, rgba(217, 255, 115, 0.08), transparent 28rem),
    linear-gradient(145deg, var(--grey-011), var(--grey-020));
  display: flex;
  justify-content: center;
  min-height: 100%;
  padding: 24px;
}
.login-shell { max-width: 440px; width: 100%; }
.login-card { background: rgb(var(--veil-dark) / 0.9); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 28px 90px rgba(0, 0, 0, 0.42); padding: 42px; }
.login-card h1 { font-size: clamp(34px, 8vw, 52px); letter-spacing: -0.055em; line-height: 0.98; margin: 12px 0 16px; }
.login-card .login-brand { line-height: 1; margin: 0 0 24px; }
.login-brand .cora-logo { width: 280px; }
.login-copy { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0 0 34px; }
.login-card label { color: var(--muted); display: block; font-size: 12px; font-weight: 650; margin-bottom: 9px; }
.login-card > form > input { background: var(--grey-014); border: 1px solid var(--line-strong); border-radius: 11px; margin-bottom: 14px; outline: none; padding: 13px 14px; width: 100%; }
.login-card > form > input:focus { border-color: rgba(217,255,115,.62); box-shadow: 0 0 0 3px rgba(217,255,115,.09); }
.password-row { display: grid; gap: 10px; grid-template-columns: 1fr auto; }
.password-row input { background: var(--grey-014); border: 1px solid var(--line-strong); border-radius: 11px; min-width: 0; outline: none; padding: 13px 14px; }
.password-row input:focus { border-color: rgba(217, 255, 115, 0.62); box-shadow: 0 0 0 3px rgba(217, 255, 115, 0.09); }
.login-foot { color: var(--subtle); font-size: 11px; text-align: center; }

.cora-logo { display: block; height: auto; max-width: 100%; }
/* The signet keeps its brand color; only the wordmark follows Cora's selected theme. */
.cora-logo-light { display: none; }
html[data-theme="light"] .cora-logo-dark { display: none; }
html[data-theme="light"] .cora-logo-light { display: block; }
.brand-mark { display: block; flex: 0 0 auto; height: 36px; object-fit: contain; width: 36px; }
.brand-mark.small { height: 28px; width: 28px; }
.brand-mark.disconnected { filter: grayscale(1); opacity: .42; }
/* The organisation switch on the logo (public/org-switch.js), only with more than one organisation. */
.rail-brand.org-switchable { cursor: pointer; position: relative; border-radius: 9px; }
.rail-brand.org-switchable:hover, .rail-brand.org-switchable:focus-visible { background: rgb(var(--veil-light) / .06); outline: none; }
.rail-brand.org-switchable::after { border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 4px solid var(--muted); bottom: 1px; content: ""; left: 50%; position: absolute; transform: translateX(-50%); }
.org-switch-menu { background: var(--grey-030); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 16px 48px rgba(0,0,0,.58); max-width: 280px; min-width: 190px; padding: 5px; position: fixed; z-index: 130; }
.org-switch-title { color: var(--muted); font-size: 10px; letter-spacing: .04em; padding: 6px 10px 4px; text-transform: uppercase; }
.org-switch-menu button { background: transparent; border-radius: 7px; color: var(--muted); display: block; font-size: 12px; padding: 9px 10px; text-align: left; width: 100%; }
.org-switch-menu button:hover { background: rgb(var(--veil-light) / .06); color: var(--text); }
.org-switch-menu button.active { background: rgba(185,167,255,.16); color: #ddd5ff; }
.org-switch-menu small { color: var(--muted); display: block; font-size: 10px; margin-top: 2px; }
.org-switch-menu .org-switch-search { font-size: 12px; margin: 2px 2px 5px; min-height: 32px; padding: 6px 9px; width: calc(100% - 4px); }
.org-switch-list { display: grid; max-height: min(420px, 60vh); overflow: auto; }
.org-switch-menu .org-switch-more { margin: 4px 10px 6px; }
html[data-theme="light"] .org-switch-menu { background: #fff; box-shadow: 0 16px 48px rgba(0,0,0,.18); }
html[data-theme="light"] .org-switch-menu button:hover { background: rgba(0,0,0,.05); }
html[data-theme="light"] .org-switch-menu button.active { background: rgba(75,59,176,.1); color: #4b3bb0; }
/* Provider › Hinzufügen: accounts an organisation still borrows from the platform. */
.org-relogin { background: rgba(255,207,138,.05); border: 1px solid rgba(255,207,138,.22); border-radius: 12px; display: grid; gap: 6px; margin-bottom: 12px; padding: 12px 14px; }
.org-relogin-head strong, .org-relogin-head small { display: block; }
.org-relogin-head small { color: var(--muted); font-size: 10px; line-height: 1.45; margin-top: 3px; }
.org-relogin-row { align-items: center; display: flex; font-size: 11px; gap: 10px; justify-content: space-between; }
.org-relogin-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.app-shell { display: grid; grid-template-columns: 354px minmax(0, 1fr); height: 100dvh; max-width: 100vw; min-width: 0; overflow: hidden; transition: grid-template-columns 180ms ease; }
body.nav-collapsed .app-shell { grid-template-columns: 56px minmax(0,1fr); }
@media (min-width: 861px) { body.nav-collapsed .nav-list { display: none !important; } }
.workspace-grid { display: grid; height: 100%; min-height: 0; min-width: 0; overflow: hidden; position: relative; }
.workspace-grid.multi { gap: 1px; grid-auto-columns: minmax(max(320px, calc((100% - 3px) / 4)), 1fr); grid-auto-flow: column; grid-template-columns: none; overflow-x: auto; overflow-y: hidden; }
.workspace-grid.multi::-webkit-scrollbar-thumb { background-color: rgba(230, 238, 210, 0.3); }
/* In the pane host the chat panel only shows the restore and empty screens; chats live in .chat-pane. */
.workspace-grid.has-panes > #chat-panel { display: none; }
.chat-pane { background: var(--bg); border-left: 1px solid var(--line); min-height: 500px; min-width: 0; position: relative; }
/* A waiting pane shows about:blank, whose light scheme would make Chrome paint it white against a dark page; with
   the frame on the default scheme it stays see-through and the theme's background shows. */
.chat-pane iframe { background: var(--bg); border: 0; color-scheme: normal; display: block; height: 100%; min-height: 0; width: 100%; }
.chat-pane.first-pane { border-left: 0; }
/* A chat jumped to glows briefly (public/pane-head.js). */
.chat-pane.pane-flash::after { animation: paneFlash 1.1s ease-out forwards; box-shadow: inset 0 0 0 2px var(--accent), inset 0 0 70px rgba(217,255,115,.2); content: ""; inset: 0; pointer-events: none; position: absolute; z-index: 5; }
@keyframes paneFlash { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }
/* A chat that is working shows a glowing line running to and fro under its header (public/chat-head.css). */
/* The phone never scrolls sideways; clip keeps a rotation from leaving the page shifted (app.js resetSidewaysScroll). */
@media (max-width: 860px) { html, body { overflow-x: clip; } }
/* The standby pane is booted and waiting for the next chat; it never shows. */
.workspace-grid > .chat-pane.standby-pane { display: none !important; }
.workspace-grid > .pane-dragging { opacity: .62; }
.workspace-grid > .pane-drop-before { box-shadow: inset 3px 0 0 var(--accent); }
.workspace-grid > .pane-drop-after { box-shadow: inset -3px 0 0 var(--accent); }
.workspace-grid > .chat-panel, .workspace-grid > .chat-pane, .workspace-grid > .brain-workspace-panel { transition: box-shadow 100ms ease, opacity 100ms ease; }
.pane-thread-drop-overlay { align-items: center; background: rgb(var(--veil-dark) / .78); border: 1px dashed var(--line-strong); color: var(--muted); display: flex; font-size: 11px; font-weight: 750; inset: 7px; justify-content: center; position: absolute; z-index: 70; }
.pane-thread-drop-target > .pane-thread-drop-overlay { background: rgba(217,255,115,.14); border-color: var(--accent); box-shadow: inset 0 0 0 2px rgba(217,255,115,.12); color: var(--accent); }
.pane-add-drop-zone { align-items: center; background: rgb(var(--veil-dark) / .92); border: 1px dashed rgba(217,255,115,.45); color: var(--accent); display: flex; flex-direction: column; gap: 7px; justify-content: center; min-width: 58px; position: fixed; width: clamp(58px,6vw,88px); z-index: 220; }
.pane-add-drop-zone.left { border-radius: 0 14px 14px 0; }
.pane-add-drop-zone.right { border-radius: 14px 0 0 14px; }
.pane-add-drop-zone.between { background: rgb(var(--veil-dark) / .82); border-radius: 14px; min-width: 42px; width: 42px; }
.pane-add-drop-zone.full { background: rgb(var(--veil-dark) / .94); border-radius: 18px; border-width: 2px; }
.pane-add-drop-zone.full strong { font-size: 44px; }
.pane-add-drop-zone.full span { font-size: 11px; writing-mode: horizontal-tb; }
.pane-add-drop-zone strong { font-size: 27px; font-weight: 300; line-height: 1; }
.pane-add-drop-zone span { font-size: 8px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; writing-mode: vertical-rl; }
.pane-add-drop-zone.active { background: rgba(217,255,115,.17); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(217,255,115,.09), inset 0 0 24px rgba(217,255,115,.08); }
.pane-cancel-drop-zone { align-items: center; backdrop-filter: blur(10px); background: rgba(28,18,17,.94); border: 1px solid rgba(255,142,131,.36); border-radius: 13px 13px 0 0; bottom: 0; color: #ff9c92; display: flex; font-size: 10px; font-weight: 800; gap: 9px; height: 48px; justify-content: center; letter-spacing: .045em; position: fixed; text-transform: uppercase; z-index: 230; }
.pane-cancel-drop-zone strong { font-size: 20px; font-weight: 400; line-height: 1; }
.pane-cancel-drop-zone.active { background: rgba(94,31,28,.96); border-color: rgba(255,142,131,.86); box-shadow: 0 -8px 34px rgba(255,92,82,.1),inset 0 0 24px rgba(255,142,131,.08); }
.workspace-tabs { display: none; }
.project-panel { border-right: 1px solid var(--line); min-height: 0; }
.project-panel { background: var(--grey-017); display: grid; grid-template-columns: 56px minmax(0,1fr); padding: 0; }
.panel-brand { align-items: center; display: flex; gap: 11px; padding: 0 8px 24px; }
.panel-brand .nav-toggle-button { margin-left: auto; margin-right: 0; }
.panel-brand div:last-child { display: flex; flex-direction: column; line-height: 1.18; }
.panel-brand strong { font-size: 16px; letter-spacing: -0.02em; }
.panel-brand span { color: var(--danger); font-size: 10px; }
.account-summary { align-items: center; background: transparent; border: 1px solid transparent; border-radius: 12px; color: var(--text); display: flex; flex: 0 0 auto; justify-content: center; padding: 6px 0; width: 44px; }
.account-summary:hover { background: rgb(var(--veil-light) / .04); border-color: var(--line); }
.account-summary.switching { border-color: rgba(255,201,106,.36); }
.provider-capacities { align-items: center; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.provider-capacity { align-items: center; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
/* The rings alone show the pools; the percent stays in the tooltip. */
.provider-capacity > strong { display: none; }
.account-gauge { --available: 0; --gauge-accent: var(--accent); align-items: center; background: conic-gradient(var(--gauge-accent) calc(var(--available) * 1%), rgb(var(--veil-light) / .08) 0); border-radius: 50%; display: flex; flex: 0 0 auto; height: 36px; justify-content: center; position: relative; width: 36px; }
.account-gauge::before { background: var(--grey-017); border-radius: inherit; content: ""; inset: 4px; position: absolute; }
.account-gauge img { height: 16px; object-fit: contain; position: relative; width: 16px; z-index: 1; }
/* Each pool's ring in its provider's logo colour. */
.account-gauge.pool-codex { --gauge-accent: var(--grey-242); }
.account-gauge.pool-claude { --gauge-accent: #d97757; }
.account-summary.no-pool-access .account-gauge { background: var(--panel-3); border: 1px solid var(--line); }
.account-summary.no-pool-access .account-gauge::before { display: none; }
.nav-create-actions { display: grid; gap: 7px; grid-template-columns: minmax(0,1fr) auto; margin: 10px 2px 0; }
/* Rarely needed, so as quiet as „+ Projekt“ beside it. */
.new-thread-button { align-items: center; background: var(--panel-3); border: 1px solid var(--line); border-radius: 10px; color: var(--muted); display: flex; font-size: 11px; font-weight: 700; gap: 6px; justify-content: center; margin: 0; min-height: 34px; padding: 0 12px; }
.new-project-button { align-items: center; background: var(--panel-3); border: 1px solid var(--line); border-radius: 10px; color: var(--muted); display: flex; font-size: 10px; font-weight: 700; gap: 5px; min-height: 34px; padding: 0 11px; }
.new-project-button:hover { border-color: var(--line-strong); color: var(--text); }
.new-project-button span { color: var(--accent); font-size: 15px; }
.new-thread-button:hover { border-color: var(--line-strong); color: var(--text); }
.new-thread-button span { color: var(--accent); font-size: 15px; font-weight: 400; line-height: 12px; }
.project-list { display: flex; flex: 1; flex-direction: column; gap: 4px; min-height: 0; overflow-x: hidden; overflow-y: auto; }
.project-list[hidden] { display: none; }
/* Its rows end where a project's chats end, so every + stands in one line. */
.pinned-section { border-bottom: 1px solid var(--line); margin: 0 2px 8px; padding: 0 1px 8px 4px; }
.pinned-title { color: var(--subtle); font-size: 8px; font-weight: 750; letter-spacing: .11em; padding: 4px 8px 6px; text-transform: uppercase; }
.pinned-section .thread-list { gap: 2px; }
/* „Angeheftet | Geöffnet“ above the projects (public/tree-tabs.js). */
/* The chat list's two views (public/tree-tabs.js): „Sortiert“ (projects, pins) and „Liste“ (every chat by activity). */
.tree-mode { background: rgb(var(--veil-light) / .04); border: 1px solid var(--line); border-radius: 10px; display: flex; gap: 2px; margin: 0 2px 11px; padding: 3px; }
.tree-mode > button { background: transparent; border: 0; border-radius: 7px; color: var(--muted); cursor: pointer; flex: 1 1 0; font-size: 12px; font-weight: 650; min-height: 30px; padding: 0 8px; }
.tree-mode > button:hover { color: var(--text); }
.tree-mode > button.active { background: var(--panel-3); box-shadow: 0 1px 0 rgb(var(--veil-light) / .04), 0 6px 18px rgba(0,0,0,.14); color: var(--text); }
.recent-list { display: flex; flex: 1 1 auto; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; }
/* The chat lists scroll without a visible scrollbar: one that came with an unfolded team moved every row's buttons on a
   Mac (Chris, 05.10.2026). */
.project-list, .recent-list { scrollbar-width: none; }
.project-list::-webkit-scrollbar, .recent-list::-webkit-scrollbar { display: none; height: 0; width: 0; }
.recent-list[hidden] { display: none; }
.recent-list > * { flex: none; }
.recent-list .recent-more { align-self: center; font-size: 12px; margin: 4px 0 8px; padding: 8px 14px; }
/* „Liste“ is the plain order by activity: no pin at a row (pinning belongs to „Sortiert“), only „+“. */
.recent-list .thread-pin { display: none; }
.recent-list .thread-row { grid-template-columns: minmax(0,1fr) auto; }
/* In „Liste“ a row names its project on a second line, under the chat's name, in the project's colour. */
.thread-item-project { display: block; font-size: 10.5px; font-weight: 600; line-height: 1.3; margin-top: 2px; overflow: hidden; padding-left: 32px; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme="light"] .tree-mode { background: #fff; }
.tree-tab-bar { display: flex; gap: 2px; padding: 2px 4px 6px; }
.tree-tab-bar button { align-items: baseline; background: transparent; border-radius: 7px; color: var(--subtle); display: flex; font-size: 9px; font-weight: 750; gap: 5px; letter-spacing: .09em; padding: 5px 8px; text-transform: uppercase; }
.tree-tab-bar button:hover { color: var(--text); }
.tree-tab-bar button.active { background: var(--panel-3); color: var(--text); }
.tree-tab-bar small { color: var(--subtle); font-family: var(--mono); font-size: 8px; letter-spacing: 0; }
/* Only the chosen tab shows, left; hovering the bar (or a tap on the chosen one: .open) slides the others out at its
   right, so the others do not catch the eye (public/tree-tabs.js). The chosen one carries a small arrow. */
.tree-tab-bar { align-items: center; }
.tree-tab-bar button.active { order: -1; }
.tree-tab-bar button.active::after { border-bottom: 1.4px solid currentColor; border-right: 1.4px solid currentColor; content: ""; height: 4px; margin-left: 1px; opacity: .6; transform: rotate(-45deg) translateY(-1px); transition: transform 160ms ease; width: 4px; }
.tree-tab-bar:is(:hover:not(.closed), :has(:focus-visible):not(.closed), .open) button.active::after { transform: rotate(135deg) translate(-1px, 1px); }
.tree-tab-bar button:not(.active) { max-width: 0; opacity: 0; overflow: hidden; padding-left: 0; padding-right: 0; pointer-events: none; transition: max-width 200ms ease, opacity 160ms ease, padding 200ms ease; white-space: nowrap; }
.tree-tab-bar:is(:hover:not(.closed), :has(:focus-visible):not(.closed), .open) button:not(.active) { max-width: 120px; opacity: 1; padding-left: 8px; padding-right: 8px; pointer-events: auto; }
.panel-sets-section { border-bottom: 1px solid var(--line); margin: 0 2px 7px; padding: 0 4px 7px; }
.panel-sets-head { align-items: center; display: grid; gap: 5px; grid-template-columns: minmax(0,1fr) 28px; }
.panel-sets-toggle { align-items: center; background: rgb(var(--veil-light) / .025); border: 1px solid transparent; border-radius: 8px; color: var(--muted); display: flex; font-size: 9px; font-weight: 720; gap: 7px; min-height: 30px; min-width: 0; padding: 5px 8px; text-align: left; }
.panel-sets-toggle span, .panel-set-load span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-sets-toggle small, .panel-set-load small { color: var(--subtle); font-family: var(--mono); font-size: 7px; }
.panel-sets-toggle::before { color: var(--subtle); content: ">"; font-family: var(--mono); font-size: 9px; transition: transform 120ms ease; }
.panel-sets-section.open .panel-sets-toggle::before { transform: rotate(90deg); }
.panel-set-add, .panel-set-rename, .panel-set-remove { align-items: center; background: transparent; border-radius: 7px; color: var(--subtle); display: flex; height: 28px; justify-content: center; padding: 0; width: 28px; }
.panel-set-add { background: rgb(var(--veil-light) / .03); border: 1px solid var(--line); color: var(--accent); font-size: 16px; }
.panel-set-list { display: none; gap: 3px; padding-top: 5px; }
.panel-sets-section.open .panel-set-list { display: grid; }
.panel-set-row { align-items: center; display: grid; gap: 2px; grid-template-columns: minmax(0,1fr) 28px 32px 28px; }
.panel-set-update { align-items: center; background: transparent; border-radius: 7px; color: var(--subtle); display: flex; font-size: 14px; height: 28px; justify-content: center; padding: 0; width: 28px; }
.panel-set-update:hover { background: rgb(var(--veil-light) / .06); color: var(--text); }
.panel-set-row.changed .panel-set-update { background: var(--accent-soft); color: var(--accent); }
.panel-set-load em { color: var(--accent); font-size: 8px; font-style: normal; font-weight: 700; }
.panel-set-row.active { background: rgba(185,167,255,.07); border-radius: 8px; }
.panel-set-load { align-items: center; background: transparent; border-radius: 7px; color: var(--muted); display: flex; font-size: 9px; gap: 7px; min-width: 0; padding: 7px 8px; text-align: left; }
.panel-set-row.active .panel-set-load { color: var(--text); font-weight: 720; }
.panel-set-rename { font-size: 8px; width: 32px; }
.panel-set-remove { color: var(--danger); font-size: 15px; }
.panel-set-empty { color: var(--subtle); font-size: 9px; padding: 8px; }
.project-tree { border: 1px solid transparent; border-radius: 12px; }
/* Folder, + and gear close together at the right, so the name keeps its room. */
.project-tree-head { align-items: center; display: grid; grid-template-columns: minmax(0,1fr) 24px 24px 24px; }
.project-actions-trigger, .project-files-trigger, .project-new-chat { align-items: center; background: transparent; border-radius: 7px; color: var(--subtle); display: flex; font-size: 13px; height: 28px; justify-content: center; padding: 0; width: 24px; }
/* The arrow into the project panel: always there, brighter on hover. */
.project-actions-trigger { opacity: .6; }
.project-actions-trigger svg, .project-new-chat svg { height: 13px; width: 13px; }
.thread-add svg { height: 13px; width: 13px; }
/* The + a size larger, the first thing to reach for. */
.project-new-chat { font-size: 20px; font-weight: 300; line-height: 1; }
.project-tree-head:hover .project-actions-trigger, .project-actions-trigger:focus, .project-actions-trigger[aria-expanded="true"] { opacity: 1; }
.project-actions-trigger:hover, .project-files-trigger:hover, .project-new-chat:hover { background: rgb(var(--veil-light) / .06); color: var(--text); }
.project-files-trigger { opacity: .62; }
.folder-glyph { fill: none; height: 14px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.35; width: 17px; }
/* An unfolded project: its head stays selected, its chats stand free without a frame; a line under them shows where the
   next project begins (Chris, 05.10.2026). */
.project-tree.active { border-radius: 0; }
.project-tree.expanded:has(.thread-list > *) { border-bottom-color: var(--line); padding-bottom: 7px; }
/* A chat's + right under its project's gear. */
.project-tree .thread-row-actions { margin-right: -4px; }
.project-tree.active .project-tree-head { background: var(--panel-3); border-radius: 9px; }
.project-tree.worker-switching { filter: grayscale(.75); opacity: .55; }
.project-tree.project-move-target .project-tree-head { outline: 1px dashed rgba(217,255,115,.38); outline-offset: -2px; }
.project-tree.project-move-hover .project-tree-head { background: rgba(217,255,115,.13); box-shadow: inset 3px 0 0 var(--accent); outline-color: var(--accent); }
.project-tree.project-move-hover .project-name { color: var(--text); }
.project-item { align-items: center; background: transparent; border-radius: 9px; color: var(--muted); display: grid; gap: 9px; grid-template-columns: 18px minmax(0, 1fr); min-height: 38px; padding: 7px 9px; text-align: left; width: 100%; }
.project-item:has(.project-avatar) { grid-template-columns: 30px minmax(0, 1fr); }
/* Hovering a project marks its whole row, as wide as the selection after a click (Chris, 05.10.2026). */
.project-item:hover { color: var(--text); }
.project-tree-head { border-radius: 9px; }
.project-tree-head:hover { background: rgb(var(--veil-light) / 0.035); }
.project-tree-head:hover .project-item { color: var(--text); }
.project-item.active { background: transparent; color: var(--text); }
/* A project with an unread answer: a quiet dot at its icon (paintProjectAttention). */
.project-tree.has-unread .project-item { position: relative; }
.project-tree.has-unread .project-item::after { background: var(--warn); border-radius: 50%; box-shadow: 0 0 0 2px var(--panel), 0 0 6px rgba(255,201,106,.35); content: ""; height: 6px; left: 23px; pointer-events: none; position: absolute; top: 9px; width: 6px; }
.project-avatar { align-items: center; background: var(--grey-035); border: 1px solid var(--grey-055); border-radius: 50%; color: var(--grey-172); display: flex; font-size: 10px; font-weight: 800; height: 30px; justify-content: center; position: relative; text-transform: uppercase; width: 30px; }
.project-avatar > span { position: relative; z-index: 1; }
.project-item.active .project-avatar { background: var(--grey-055); border-color: var(--grey-095); color: var(--grey-242); }
.project-name { color: var(--text); display: block; font-size: 12px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-kind { color: var(--subtle); display: block; font-size: 9px; margin-top: 2px; }
/* Folder, environment or personal: the project kind as an icon before its name. */
.project-kind-icon { align-items: center; color: var(--subtle); display: flex; height: 18px; justify-content: center; width: 18px; }
.project-kind-icon svg { height: 16px; width: 16px; }
/* An environment (a computer of its own) stands out in yellow. */
.project-kind-icon.environment, .project-item .project-kind-icon.environment, .project-item.active .project-kind-icon.environment, .project-item:hover .project-kind-icon.environment { color: #f2c94c; }
html[data-theme="light"] .project-kind-icon.environment { color: #b8860b; }
.project-item.active .project-kind-icon, .project-item:hover .project-kind-icon { color: var(--muted); }
.project-footer { border-top: 1px solid var(--line); display: grid; gap: 10px; margin-top: 14px; padding: 14px 7px 0; }
.project-footer > div:last-child { display: flex; gap: 3px; }
.brain-tree-button { align-items: center; background: linear-gradient(110deg,rgba(217,255,115,.09),rgb(var(--veil-light) / .025)); border: 1px solid var(--line); border-radius: 11px; color: var(--text); display: grid; gap: 9px; grid-template-columns: 30px minmax(0,1fr) auto; min-height: 48px; padding: 7px 10px; text-align: left; width: 100%; }
.brain-tree-button:hover { border-color: rgba(217,255,115,.3); }
.brain-tree-button > span:nth-child(2) { min-width: 0; }
.brain-tree-button strong, .brain-tree-button small { display: block; }
.brain-tree-button strong { font-size: 11px; }
.brain-tree-button small { color: var(--subtle); font-size: 8px; margin-top: 2px; }
.brain-tree-mark { align-items: center; background: var(--accent-soft); border: 1px solid rgba(217,255,115,.25); border-radius: 9px; color: var(--accent); display: flex; font-size: 11px; font-weight: 850; height: 30px; justify-content: center; width: 30px; }
.connection-chip { align-items: center; color: var(--muted); display: flex; font-size: 10px; gap: 6px; }
.connection-chip i, .status-chip i { background: var(--subtle); border-radius: 999px; height: 6px; width: 6px; }
.connection-chip.online i, .status-chip.active i { background: var(--ok); box-shadow: 0 0 8px rgba(156, 230, 168, 0.56); }
.connection-chip.reconnecting i { background: var(--warn); }

.thread-panel { background: var(--panel); display: flex; flex-direction: column; min-width: 0; padding: 22px 16px 14px; }
.thread-panel-head { align-items: center; display: flex; justify-content: space-between; padding: 0 3px 16px; }
.thread-panel-head h2 { font-size: 19px; letter-spacing: -0.035em; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hamburger, .hamburger::before, .hamburger::after { background: currentColor; border-radius: 2px; content: ""; display: block; height: 1px; position: relative; width: 15px; }
.hamburger::before { position: absolute; top: -5px; }
.hamburger::after { position: absolute; top: 5px; }
.text-icon { font-size: 8px !important; font-weight: 750; letter-spacing: -.01em; }
.stop-glyph { background: currentColor; border-radius: 2px; display: block; height: 9px; width: 9px; }
.search-box { align-items: center; background: var(--grey-017); border: 1px solid var(--line); border-radius: 9px; display: flex; gap: 7px; padding: 8px 10px; }
.search-box span { color: var(--subtle); font-size: 17px; }
.search-glyph { border: 1px solid currentColor; border-radius: 50%; height: 10px; position: relative; width: 10px; }
.search-glyph::after { background: currentColor; content: ""; height: 1px; position: absolute; right: -4px; top: 8px; transform: rotate(45deg); width: 5px; }
.search-box input { background: transparent; border: 0; font-size: 12px; min-width: 0; outline: 0; width: 100%; }
.tree-tools { align-items: center; display: grid; gap: 5px; grid-template-columns: minmax(0,1fr) 34px; padding: 5px 2px 0; }
.tree-tools .search-box { padding: 7px 9px; }
.tree-tools .icon-button { height: 34px; width: 34px; }
.search-result-count { color: var(--subtle); font-size: 8px; padding: 5px 2px 3px 4px; text-transform: uppercase; }
.thread-list { display: flex; flex-direction: column; gap: 3px; min-height: 0; }
/* An open project's chats stand indented under it, their logo under the project's name (Chris, 06.10.2026). */
.project-tree .thread-list { padding: 0 2px 0 28px; }
/* The title takes the width; the row's buttons (team, goal, +) sit at the right edge, as narrow as they are. */
.thread-row { align-items: center; display: grid; grid-template-columns: minmax(0,1fr) auto; position: relative; }
.thread-row.worker-switching { filter: grayscale(1); opacity: .46; }
.thread-row.drag-before::before, .thread-row.drag-after::after { background: var(--accent); border-radius: 2px; box-shadow: 0 0 7px rgba(217,255,115,.35); content: ""; height: 2px; left: 5px; pointer-events: none; position: absolute; right: 5px; z-index: 4; }
.thread-row.drag-before::before { top: -2px; }
.thread-row.drag-after::after { bottom: -2px; }
.thread-row-actions { align-items: center; display: flex; gap: 2px; justify-content: flex-end; padding-right: 2px; }
.thread-row-actions .thread-goal-toggle { position: static; transform: none; }
/* A lead's team chats under it in a project's tree (app.js teamOrder); the lead folds them in and out. */
.thread-row.team-child { padding-left: calc(var(--team-depth, 1) * 14px); }
.thread-row.team-child .thread-item { border-left: 2px solid var(--line); }
/* A lead's team: arrow and number in a quiet grey pill, no outline; green text while one of them works. */
.thread-team-toggle { background: rgb(var(--veil-light) / .07); border: 0; border-radius: 999px; color: var(--muted); cursor: pointer; font-size: 11px; font-variant-numeric: tabular-nums; font-weight: 650; padding: 2px 8px; white-space: nowrap; }
.thread-team-toggle:hover { background: rgb(var(--veil-light) / .12); color: var(--text); }
.thread-team-toggle.working { color: var(--ok); }
html[data-theme="light"] .thread-team-toggle { background: rgba(0,0,0,.06); }
.thread-team-toggle.open { color: inherit; }
.thread-row:hover .thread-split, .thread-row:hover .thread-pin, .thread-row:focus-within .thread-split, .thread-row:focus-within .thread-pin { opacity: 1; }
.thread-split, .thread-pin { align-items: center; background: transparent; border-radius: 6px; color: var(--subtle); display: flex; height: 24px; justify-content: center; opacity: .48; width: 28px; }
.thread-split:hover { background: rgb(var(--veil-light) / .06); color: var(--accent); opacity: 1; }
.thread-add { font-size: 20px; font-weight: 300; line-height: 1; }
.thread-pin:hover { background: rgb(var(--veil-light) / .06); color: var(--text); opacity: 1; }
.thread-pin.active { color: var(--accent); opacity: .9; }
.pin-glyph { fill: none; height: 13px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.35; width: 13px; }
.thread-pin.active .pin-glyph path:first-child { fill: currentColor; }
.project-actions-popover { background: var(--grey-030); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 16px 48px rgba(0,0,0,.58); min-width: 180px; padding: 5px; position: fixed; z-index: 125; }
.project-actions-popover button { background: transparent; border-radius: 7px; color: var(--muted); display: block; font-size: 11px; padding: 9px 10px; text-align: left; width: 100%; }
.project-actions-popover button:hover { background: rgb(var(--veil-light) / .06); color: var(--text); }
.thread-item { background: transparent; border: 1px solid transparent; border-radius: 10px; color: var(--text); display: block; min-width: 0; padding: 6px 7px; text-align: left; width: 100%; }
/* Hover and selection mark the whole row, its buttons at the right included (Chris, 05.10.2026). */
.thread-row { border-radius: 10px; }
.thread-row:hover { background: rgb(var(--veil-light) / 0.025); }
.thread-row:has(> .thread-item.active) { background: var(--panel-3); box-shadow: inset 0 0 0 1px var(--line); }
.thread-item.has-goal { padding-right: 34px; }
.thread-goal-toggle { align-items: center; background: rgb(var(--veil-light) / .025); border: 1px solid transparent; border-radius: 7px; color: var(--subtle); display: flex; height: 23px; justify-content: center; position: absolute; right: 62px; top: 50%; transform: translateY(-50%); width: 26px; z-index: 2; }
.thread-goal-toggle:hover { background: rgba(217,255,115,.08); border-color: rgba(217,255,115,.16); color: var(--accent); }
.thread-goal-toggle.pause { color: var(--ok); }
.thread-goal-toggle.loading { opacity: .4; pointer-events: none; }
.goal-play-glyph { border-bottom: 5px solid transparent; border-left: 8px solid currentColor; border-top: 5px solid transparent; height: 0; margin-left: 2px; width: 0; }
.goal-pause-glyph { display: flex; gap: 3px; }
.goal-pause-glyph i { background: currentColor; border-radius: 1px; display: block; height: 10px; width: 3px; }
.thread-item-top { align-items: center; display: flex; gap: 7px; }
.thread-dot { background: var(--subtle); border-radius: 50%; flex: 0 0 auto; height: 6px; width: 6px; }
.thread-dot.failed { background: var(--danger); }
/* A running chat: no spinner, its dot pulses in the project's colour (Chris, 06.10.2026: the dot alone is enough, the
   title stays white), in the tree and in a phone's tabs. */
.thread-row.running .thread-dot, .workspace-tab.running .workspace-tab-dot { animation: threadDotPulse .55s ease-in-out infinite alternate; }
@keyframes threadDotPulse { from { opacity: .3; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .thread-row.running .thread-dot, .workspace-tab.running .workspace-tab-dot { animation: none; } }
.thread-name { flex: 1; font-size: 13px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-badge { border-radius: 999px; flex: 0 0 auto; font-size: 7px; font-weight: 800; letter-spacing: .03em; padding: 3px 5px; text-transform: uppercase; }
/* „Neu“ is a small dot in the accent, no word (Chris, 05.10.2026). */
.thread-badge.unread { background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); color: transparent; font-size: 0; height: 8px; margin: 0 3px; padding: 0; width: 8px; }
.thread-badge.archived { background: rgba(255,196,94,.14); border: 1px solid rgba(255,196,94,.48); color: #ffd477; font-size: 8px; letter-spacing: .06em; padding: 4px 8px; }
/* „Wait“: the chat waits on purpose (its own run, a time, a commit); quiet, in the context blue (app.js threadBadgeState). */
.thread-badge.wait { background: rgba(75,104,144,.22); border: 1px solid rgba(110,140,185,.5); color: #b9cbe6; font-size: 8px; letter-spacing: .05em; padding: 3px 7px; }
html[data-theme="light"] .thread-badge.wait { background: rgba(125,151,187,.16); border-color: rgba(75,104,144,.45); color: #3c5a82; }
.thread-empty { color: var(--subtle); font-size: 12px; padding: 28px 12px; text-align: center; }
.load-more, .load-older { background: transparent; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); font-size: 10px; padding: 8px 12px; }
.load-more:hover, .load-older:hover { border-color: var(--line-strong); color: var(--text); }
/* In the tree a plain text line, no frame. */
.project-tree .load-more { border: 0; border-radius: 0; display: block; font-size: 11px; margin: 2px 0 1px; padding: 6px 12px; text-align: left; width: 100%; }

@media (min-width: 861px) and (pointer: fine) {
  .thread-row-draggable > .thread-item { cursor: grab; }
  .thread-row-draggable.dragging { opacity: .42; }
  .thread-row-draggable.dragging > .thread-item { cursor: grabbing; }
}
body.embed-mode.embed-desktop .chat-header { cursor: grab; user-select: none; }
body.embed-mode.embed-desktop .chat-header.pane-drag-source { cursor: grabbing; }
body.embed-mode.embed-desktop .chat-header button,
body.embed-mode.embed-desktop .chat-header a,
body.embed-mode.embed-desktop .chat-header input,
body.embed-mode.embed-desktop .chat-header select { cursor: pointer; }

.chat-panel { background: var(--bg); max-width: 100%; min-height: 0; min-width: 0; overflow: hidden; position: relative; }
body.pane-host #chat-panel > #chat-workspace { display: none !important; }
.panel-close { font-size: 20px; font-weight: 300; }
/* The work mode's lock next to the close button (public/work-mode.js): faint while loose, filled in the accent while
   the pane is fixed at its place. */
.panel-fix { color: var(--subtle); justify-content: center; opacity: .55; }
.panel-fix:hover { color: var(--text); opacity: 1; }
.panel-fix.active { color: var(--accent); opacity: 1; }
.fix-glyph { fill: none; height: 15px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; width: 15px; }
.panel-fix.active .fix-glyph rect { fill: currentColor; }
.workspace-restore { align-items: center; color: var(--muted); display: flex; flex-direction: column; gap: 12px; height: 100%; justify-content: center; max-width: 100%; min-width: 0; padding: 24px; text-align: center; }
.workspace-restore p { font-size: 12px; margin: 0; max-width: 100%; overflow-wrap: anywhere; }
.restore-mark { background: var(--accent); border-radius: 50%; height: 9px; width: 9px; }
.empty-state { align-items: center; display: flex; flex-direction: column; height: 100%; justify-content: center; padding: 40px; text-align: center; }
.empty-state h1 { font-size: clamp(35px, 5vw, 62px); letter-spacing: -0.06em; margin: 6px 0 14px; }
.empty-state > p:not(.eyebrow) { color: var(--muted); line-height: 1.6; margin: 0 0 26px; max-width: 480px; }
.empty-state .empty-logo { flex: 0 0 auto; margin-bottom: 28px; width: 340px; }
/* The existing empty-history node is removed as soon as a message arrives. */
.history-scroll:has(.timeline > .thread-empty:only-child) { align-items: center; display: flex; }
.timeline > .thread-empty::before { aspect-ratio: 4296 / 1110; background: url("/cora/assets/cora-logo-mittel.svg?v=20261004-raster-c") center / contain no-repeat; background-image: -webkit-image-set(url("/cora/assets/cora-logo-mittel.svg?v=20261004-raster-c") 1x, url("/cora/assets/cora-logo.svg?v=20261004-raster-c") 2x); background-image: image-set(url("/cora/assets/cora-logo-mittel.svg?v=20261004-raster-c") 1x, url("/cora/assets/cora-logo.svg?v=20261004-raster-c") 2x); content: ""; display: block; margin: 0 auto 24px; max-width: 100%; width: 300px; }
html[data-theme="light"] .timeline > .thread-empty::before { background-image: url("/cora/assets/cora-logo-mittel-light.svg?v=20261004-raster-c"); background-image: -webkit-image-set(url("/cora/assets/cora-logo-mittel-light.svg?v=20261004-raster-c") 1x, url("/cora/assets/cora-logo-light.svg?v=20261004-raster-c") 2x); background-image: image-set(url("/cora/assets/cora-logo-mittel-light.svg?v=20261004-raster-c") 1x, url("/cora/assets/cora-logo-light.svg?v=20261004-raster-c") 2x); }
.chat-workspace { display: grid; grid-template-areas: "header" "controls" "context" "activity" "handover" "goal" "history" "notice" "thinking" "composer"; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto auto auto minmax(0, 1fr) auto auto auto; height: 100%; max-width: 100%; min-height: 0; min-width: 0; overflow: hidden; }
.chat-workspace.file-dropping { box-shadow: inset 0 0 0 2px var(--accent); }
.chat-header { grid-area: header; }
.control-strip { grid-area: controls; }
.context-strip { grid-area: context; }
.activity-banner { grid-area: activity; }
.handover-panel { grid-area: handover; }
.history-scroll { grid-area: history; }
.jump-to-live { grid-area: history; }
.usage-limit-notice { grid-area: notice; }
.live-thinking-slot { grid-area: thinking; }
.composer-wrap { grid-area: composer; }
.chat-bottom-stack { display: contents; }
.chat-header { align-items: center; background: linear-gradient(90deg, var(--project-accent-soft, transparent), transparent 34%), var(--grey-026); border-bottom: 1px solid var(--line-strong); box-shadow: inset 3px 0 0 var(--project-accent-strong, transparent); display: flex; justify-content: space-between; min-height: 70px; padding: 11px 25px; }
.chat-identity { align-items: center; display: flex; min-width: 0; }
.chat-identity > div { min-width: 0; }
.title-row { align-items: center; display: flex; gap: 8px; min-width: 0; }
.thread-provider-logo { flex: 0 0 auto; height: 15px; object-fit: contain; width: 15px; }
.title-row h1 { font-size: 18px; letter-spacing: -0.03em; margin: 0; max-width: min(50vw, 620px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-meta { align-items: center; color: var(--subtle); display: flex; font-family: var(--mono); font-size: 9px; gap: 7px; margin-top: 3px; padding-left: 2px; }
.thread-project-badge { background: var(--project-accent, var(--accent)); border-radius: 999px; color: var(--project-accent-ink, var(--accent-ink)); display: inline-flex; flex: 0 1 auto; font-family: var(--font); font-size: 10px; font-weight: 800; max-width: min(38vw, 270px); overflow: hidden; padding: 4px 9px; text-overflow: ellipsis; white-space: nowrap; }
.header-actions { align-items: center; display: flex; gap: 5px; position: relative; }
.header-button { align-items: center; background: transparent; border-radius: 8px; color: var(--muted); display: flex; font-size: 11px; gap: 6px; padding: 8px 10px; }
.header-button:hover { background: var(--panel-2); color: var(--text); }
.document-glyph { border: 1.4px solid currentColor; border-radius: 2px; display: block; height: 16px; position: relative; width: 15px; }
.header-actions #document-open { flex: 0 0 40px; font-size: 0 !important; gap: 0; height: 40px; justify-content: center; min-height: 40px; min-width: 40px; padding: 0 !important; width: 40px; }
.document-glyph::before { background: currentColor; box-shadow: 0 4px 0 currentColor, 0 8px 0 currentColor; content: ""; height: 1px; left: 3px; position: absolute; right: 3px; top: 3px; }
.header-button.goal-active { background: var(--accent-soft); color: var(--accent); }
.header-button.goal-paused { background: rgba(255,201,106,.1); color: var(--warn); }
.header-button.goal-active span { font-size: 8px; }
.header-button .goal-dot { background: currentColor; border-radius: 50%; height: 7px; width: 7px; }
.header-button.goal-blocked, .header-button.goal-limited { background: rgba(255,142,131,.13); color: var(--danger); }
.header-button.goal-complete { background: rgba(156,230,168,.12); color: var(--ok); }
.popover { background: var(--grey-035); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4); min-width: 180px; padding: 5px; position: absolute; right: 0; top: 38px; z-index: 20; }
.header-actions .popover { right: 36px; }
.popover button { background: transparent; border-radius: 7px; color: var(--muted); display: block; font-size: 11px; padding: 9px 10px; text-align: left; width: 100%; }
.popover button:hover { background: rgb(var(--veil-light) / 0.06); color: var(--text); }
.menu-setting { border-block: 1px solid var(--line); display: grid; gap: 6px; margin: 4px 0; padding: 8px 10px 9px; }
.menu-setting small { color: var(--subtle); font-size: 9px; letter-spacing: .03em; }
.menu-handover-limit small strong { color: var(--text); font-family: var(--mono); font-weight: 600; }
.menu-handover-limit input[type="range"] { accent-color: var(--accent, #7aa2ff); margin: 0; width: 100%; }
.menu-handover-limit-note { align-items: center; color: var(--subtle); display: flex; font-size: 9px; gap: 8px; justify-content: space-between; }
.popover .menu-handover-limit-note button { font-size: 9px; padding: 2px 6px; width: auto; }
.menu-segmented { background: rgb(var(--veil-light) / .035); border: 1px solid var(--line); border-radius: 8px; display: flex; gap: 2px; padding: 2px; }
.popover .menu-segmented button { border-radius: 6px; flex: 1 1 auto; font-size: 10px; padding: 5px 7px; text-align: center; white-space: nowrap; width: auto; }
.popover .menu-segmented button.active { background: rgba(185,167,255,.16); color: #ddd5ff; }
html[data-theme="light"] .popover .menu-segmented button.active { background: rgba(75,59,176,.1); color: #4b3bb0; }
.chat-preview-overlay { align-items: stretch; backdrop-filter: blur(5px); background: rgba(0,0,0,.72); display: flex; inset: 0; justify-content: center; padding: 18px; position: fixed; transition: background 90ms ease-out,backdrop-filter 90ms ease-out; z-index: 180; }
.chat-preview-shell { background: var(--bg); border: 1px solid var(--line-strong); border-radius: 18px; box-shadow: 0 30px 100px rgba(0,0,0,.72); height: 100%; max-width: 1320px; opacity: 1; overflow: hidden; transform: scale(1); transition: opacity 90ms ease-out,transform 110ms cubic-bezier(.22,1,.36,1); width: min(94vw,1320px); }
/* The preview is a chat pane placed over the shell (see syncPreviewPanePosition). */
.workspace-grid > .chat-pane.overlay-pane { border: 0; border-radius: 18px; display: block; min-height: 0; overflow: hidden; pointer-events: auto; position: fixed; transition: opacity 90ms ease-out, transform 90ms ease-out; visibility: visible; z-index: 185; }
body:not(.preview-open) .workspace-grid > .chat-pane.overlay-pane { display: none; }
body.preview-dragging .workspace-grid > .chat-pane.overlay-pane { opacity: 0; transform: scale(.96); }
body.document-focus .workspace-grid > .chat-pane.overlay-pane { display: block !important; }
.chat-preview-overlay.pane-dragging { backdrop-filter: none; background: transparent; pointer-events: none; }
.chat-preview-overlay.pane-dragging .chat-preview-shell { opacity: 0; pointer-events: auto; transform: scale(.96); }
.preview-drag-ghost { --drag-scale: .86; --drag-x: 0px; --drag-y: 0px; align-items: center; background: linear-gradient(145deg,rgb(var(--veil-dark) / .98),rgb(var(--veil-dark) / .98)); border: 1px solid rgba(217,255,115,.45); border-radius: 17px; box-shadow: 0 16px 46px rgba(0,0,0,.48),inset 0 1px 0 rgb(var(--veil-light) / .045); color: var(--text); display: grid; gap: 3px; grid-template-columns: 34px minmax(0,1fr); height: 70px; left: 0; opacity: 0; padding: 11px 15px 11px 12px; pointer-events: none; position: fixed; top: 0; transform: translate3d(var(--drag-x),var(--drag-y),0) scale(var(--drag-scale)); transform-origin: center; transition: opacity 75ms ease-out,box-shadow 90ms ease-out,border-color 90ms ease-out; width: clamp(220px,24vw,330px); will-change: transform,opacity; z-index: 260; }
.preview-drag-ghost.visible { --drag-scale: 1; opacity: .98; }
.preview-drag-ghost::before { background: radial-gradient(circle at 35% 35%,#e8ffa8,var(--accent) 48%,#78962e 100%); border-radius: 11px; box-shadow: 0 0 18px rgba(217,255,115,.18); content: ""; grid-row: 1 / span 2; height: 30px; width: 30px; }
.preview-drag-ghost strong,.preview-drag-ghost span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-drag-ghost strong { font-size: 12px; font-weight: 760; }
.preview-drag-ghost span { color: var(--muted); font-size: 9px; font-weight: 650; }
.preview-drag-ghost.add-target { border-color: rgba(217,255,115,.8); box-shadow: 0 16px 46px rgba(0,0,0,.46),0 0 0 3px rgba(217,255,115,.1); }
.preview-drag-ghost.replace-target { border-color: rgba(185,167,255,.72); }
.preview-drag-ghost.cancel-target { border-color: rgba(255,142,131,.78); box-shadow: 0 16px 46px rgba(0,0,0,.46),0 0 0 3px rgba(255,142,131,.08); }
.preview-drag-ghost.settling { filter: blur(2px); opacity: 0; transition: transform 125ms cubic-bezier(.2,.8,.2,1),opacity 110ms ease-in,filter 110ms ease-in; }

.control-strip { align-items: end; background: rgb(var(--veil-dark) / 0.76); border-bottom: 1px solid var(--line); display: flex; gap: 13px; overflow-x: auto; padding: 8px 25px; }
.mobile-thread-settings { display: none; }
.control-strip label { color: var(--subtle); display: flex; flex-direction: column; flex: 0 0 auto; font-size: 8px; font-weight: 700; gap: 2px; letter-spacing: 0.08em; text-transform: uppercase; }
.control-strip select { appearance: none; background: transparent; border: 0; color: var(--muted); cursor: pointer; font-size: 10px; font-weight: 600; outline: 0; padding: 1px 18px 1px 0; text-transform: none; }
.control-strip label { position: relative; }
.control-strip label::after { bottom: 2px; content: "v"; font-size: 8px; pointer-events: none; position: absolute; right: 2px; }
.thread-meta .mobile-thread-settings { background: transparent; border: 0; border-radius: 0; color: var(--muted); display: inline-flex; font-family: var(--font); gap: 0; max-width: min(48vw,420px); min-height: 22px; padding: 0; width: auto; }
.thread-meta .mobile-thread-provider-logo { display: none; }
.mobile-thread-settings-copy { align-items: baseline; display: flex; gap: 7px; min-width: 0; }
.mobile-thread-settings-copy strong { color: var(--text); font-size: 12px; font-style: normal; font-weight: 720; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-thread-settings-copy small { color: var(--muted); font-size: 10px; font-style: normal; font-weight: 600; white-space: nowrap; }
.mobile-thread-settings-copy small::before { color: var(--subtle); content: "·"; margin-right: 7px; }
.context-strip { align-items: center; background: var(--grey-017); border-bottom: 1px solid var(--line); display: grid; gap: 14px; grid-template-columns: auto minmax(100px, 1fr) auto; padding: 7px 25px; }
.context-copy { align-items: baseline; display: flex; gap: 9px; min-width: 0; }
.context-copy span { color: var(--subtle); font-size: 9px; text-transform: uppercase; }
.context-copy strong { color: var(--muted); font-family: var(--mono); font-size: 9px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.context-track { background: var(--panel-3); border-radius: 999px; height: 4px; overflow: visible; position: relative; }
.context-track span { background: linear-gradient(90deg, var(--accent), var(--warn)); border-radius: inherit; display: block; height: 100%; transition: width 300ms ease; width: 0; }

.activity-banner { align-items: center; background: linear-gradient(90deg, rgba(185,167,255,.12), rgba(217,255,115,.06)); border-bottom: 1px solid rgba(185,167,255,.2); display: flex; gap: 11px; padding: 9px 25px; }
.activity-banner.queued { background: var(--accent-soft); border-bottom-color: rgba(217,255,115,.18); }
.activity-banner.worker-switching { background: rgba(255,201,106,.08); border-bottom-color: rgba(255,201,106,.2); }
.activity-banner.worker-switching strong { color: var(--warn); }
.activity-banner div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.activity-banner strong { color: #ddd5ff; font-size: 11px; }
.activity-banner.queued strong { color: var(--accent); }
.activity-banner span:not(.activity-spinner) { color: var(--muted); font-size: 9px; }
.activity-spinner { animation: spin 1s linear infinite; border: 2px solid rgba(185,167,255,.18); border-right-color: var(--violet); border-radius: 50%; flex: 0 0 auto; height: 17px; width: 17px; }
.activity-banner.queued .activity-spinner { animation: none; background: var(--accent); border: 0; box-shadow: 0 0 9px rgba(217,255,115,.32); height: 8px; margin: 4px; width: 8px; }

.history-scroll { max-width: 100%; min-height: 0; min-width: 0; overflow-anchor: none; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 22px clamp(18px, 5vw, 74px) 40px; touch-action: pan-y; width: 100%; }
.jump-to-live { align-self: end; background: var(--panel-3); border: 1px solid var(--line-strong); border-radius: 999px; box-shadow: 0 8px 28px rgba(0,0,0,.38); color: var(--text); font-size: 19px; height: 38px; justify-self: end; margin: 0 20px 14px 0; padding: 0; position: relative; width: 38px; z-index: 4; }
.jump-to-live:hover { border-color: rgba(217,255,115,.45); color: var(--accent); }
.load-older { display: block; margin: 0 auto 22px; }
.timeline { margin: 0 auto; max-width: 940px; min-width: 0; width: 100%; }
.turn { border-bottom: 1px solid rgb(var(--veil-light) / 0.06); max-width: 100%; min-width: 0; padding: 9px 0 20px; }
.turn + .turn { padding-top: 20px; }
.turn-head { align-items: center; color: var(--subtle); display: flex; font-family: var(--mono); font-size: 8px; gap: 8px; margin-bottom: 12px; text-transform: uppercase; }
.turn.turn-active > .turn-head { display: none; }
.turn-head .turn-state { background: var(--panel-2); border-radius: 99px; font-family: var(--font); padding: 3px 7px; }
.turn-head .inProgress { color: var(--ok); }
.item { margin: 9px 0; min-width: 0; }
.message { border-radius: 13px; line-height: 1.58; max-width: 100%; min-width: 0; overflow-wrap: anywhere; padding: 12px 14px; white-space: pre-wrap; }
.item.userMessage { align-items: flex-end; display: flex; flex-direction: column; justify-content: flex-end; }
.item.userMessage .message { background: var(--panel-3); max-width: min(82%, 760px); position: relative; }
.message-media { display: grid; gap: 7px; grid-template-columns: repeat(2, minmax(0, 220px)); }
.message-media + .message-copy { margin-top: 9px; }
.message-image { background: var(--grey-011); border: 1px solid var(--line); border-radius: 9px; display: block; min-height: 70px; overflow: hidden; }
.message-image img { display: block; height: auto; max-height: 260px; object-fit: cover; width: 100%; }
.optimistic-message .message { border: 1px solid rgba(217,255,115,.12); }
.message-delivery { color: var(--subtle); font-size: 8px; margin: 3px 5px 0; }
.outbox-retry { align-self: flex-end; background: var(--panel-3); border: 1px solid var(--line-strong); border-radius: 8px; color: var(--text); font-size: 9px; margin-top: 6px; padding: 6px 9px; }
.outbox-retry:hover { border-color: var(--accent); color: var(--accent); }
.outbox-failures { display: flex; flex-direction: column; gap: 10px; padding: 0 20px 20px; }
.pending-outbox-tail { display: flex; flex-direction: column; margin-top: 9px; min-width: 0; }
.outbox-cancel { align-items: center; background: rgba(255,142,131,.06); border: 0; border-radius: 6px; color: rgba(255,142,131,.7); display: flex; font-size: 15px; height: 22px; justify-content: center; left: -27px; padding: 0; position: absolute; top: 4px; width: 22px; }
.outbox-cancel:hover { background: rgba(255,142,131,.13); color: var(--danger); }
.outbox-edit { align-items: center; background: rgb(var(--veil-light) / .035); border: 0; border-radius: 6px; color: var(--subtle); display: flex; font-size: 13px; height: 22px; justify-content: center; left: -53px; padding: 0; position: absolute; top: 4px; width: 22px; }
.outbox-edit:hover { background: rgb(var(--veil-light) / .08); color: var(--text); }
.outbox-send-now { align-self: flex-end; background: color-mix(in srgb, var(--project-accent, var(--accent)) 11%, transparent); border: 1px solid color-mix(in srgb, var(--project-accent-strong, var(--accent)) 42%, transparent); border-radius: 999px; color: var(--project-accent-strong, var(--accent)); font-size: 9px; font-weight: 750; margin: 4px 5px 0; padding: 4px 9px; }
.outbox-send-now:hover { background: color-mix(in srgb, var(--project-accent, var(--accent)) 18%, transparent); }
.outbox-send-now:disabled { cursor: wait; opacity: .6; }
.outbox-failure-card { background: var(--panel-2); border: 1px solid var(--line); border-radius: 11px; display: flex; flex-direction: column; padding: 12px; }
.outbox-failure-card time, .outbox-failure-card small, .outbox-empty { color: var(--muted); font-size: 10px; }
.outbox-failure-card p { margin: 8px 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.outbox-failure-card .outbox-retry { align-self: flex-start; }
.outbox-failure-card .outbox-send-now { align-self: flex-start; margin: 8px 0 0; }
.item.agentMessage .message { background: transparent; font-size: 14px; padding-left: 0; }
.item.agentMessage { position: relative; }
/* A final answer: its grey box with the left edge in the project's colour, curving slightly to the right at top and
   bottom; no line at the right. The edge is a narrow strip of its own: as the box's left border, WebKit (Safari, Cora
   Companion) drew faint arcs in its colour at the box's right corners too. */
.item.agentMessage:is(.final_answer, .final) .message-bubble { background: rgb(var(--veil-light) / .035); border-radius: 11px; padding: 11px 13px 11px 14px; position: relative; }
.item.agentMessage:is(.final_answer, .final) .message-bubble::before { border-left: 2px solid var(--project-accent-strong, var(--accent)); border-radius: 11px 0 0 11px; bottom: 0; content: ""; left: 0; pointer-events: none; position: absolute; top: 0; width: 11px; }
/* An unread answer keeps an accent frame until it is read (app.js); then the frame fades (fresh-answer below). */
.item.agentMessage.unread-answer .message-bubble { background: rgba(217,255,115,.06); box-shadow: 0 0 0 1px rgba(217,255,115,.4); }
html[data-theme="light"] .item.agentMessage.unread-answer .message-bubble { background: rgba(59,125,34,.06); box-shadow: 0 0 0 1px rgba(59,125,34,.38); }
/* An answer just read (app.js markFreshAnswer): the unread frame fades. */
.item.agentMessage.fresh-answer .message-bubble { animation: freshAnswer 2.6s ease-out forwards; }
@keyframes freshAnswer {
  0%, 25% { background: rgba(217,255,115,.06); box-shadow: 0 0 0 1px rgba(217,255,115,.4); }
  100% { background: rgb(var(--veil-light) / .035); box-shadow: none; }
}
html[data-theme="light"] .item.agentMessage.fresh-answer .message-bubble { animation-name: freshAnswerLight; }
@keyframes freshAnswerLight {
  0%, 25% { background: rgba(59,125,34,.06); box-shadow: 0 0 0 1px rgba(59,125,34,.38); }
  100% { background: rgb(var(--veil-dark) / .04); box-shadow: none; }
}
.item.agentMessage:is(.final_answer, .final) .message-bubble > .message { background: transparent; border-radius: 0; padding: 0; }
.answer-bar { color: var(--subtle); font-size: 10px; line-height: 1.4; white-space: normal; }
.answer-bar > summary { cursor: pointer; list-style: none; overflow: hidden; padding-right: 30px; text-overflow: ellipsis; white-space: nowrap; width: fit-content; max-width: 100%; }
.answer-bar > summary::-webkit-details-marker { display: none; }
.answer-bar > summary:hover, .answer-bar[open] > summary { color: var(--muted); }
.answer-bar-sources { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 5px; }
.answer-bar-writes { border-bottom: 1px solid var(--line); margin-bottom: 9px; padding-bottom: 5px; }
.answer-bar ul { display: grid; gap: 3px; list-style: none; margin: 6px 0 2px; padding: 0; }
.answer-bar li { color: var(--muted); overflow-wrap: anywhere; }
.answer-bar li strong { color: var(--text); font-weight: 600; }
.answer-bar li ul { gap: 1px; margin: 2px 0 3px 10px; }
.answer-bar li li { color: var(--subtle); }
.answer-bar li li::before { content: "– "; }
.message-copy-button { align-items: center; background: rgb(var(--veil-light) / .018); border: 0; border-radius: 6px; bottom: 9px; color: var(--subtle); display: flex; height: 22px; justify-content: center; margin: 0; padding: 0; position: absolute; right: 6px; width: 24px; }
.message-copy-button:hover { background: rgb(var(--veil-light) / .045); color: var(--muted); }
.message-copy-button svg { fill: none; height: 13px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.35; width: 13px; }
.message-copy-button span { display: none; font-size: 12px; font-weight: 800; }
.message-copy-button.copied { color: var(--ok); }
.message-copy-button.copied svg { display: none; }
.message-copy-button.copied span { display: inline; }
.user-copy-button:not(.copied) { color: rgb(var(--veil-light) / .42); }
.message.markdown, .reasoning-text.markdown { white-space: normal; }
.message p, .reasoning-text p { margin: 0 0 .72em; }
.message p:last-child, .reasoning-text p:last-child { margin-bottom: 0; }
.message h1, .message h2, .message h3 { letter-spacing: -.025em; line-height: 1.25; margin: 1.1em 0 .45em; }
.message h1 { font-size: 1.35em; }
.message h2 { font-size: 1.2em; }
.message h3 { font-size: 1.08em; }
.message ul, .message ol { margin: .45em 0 .8em; padding-left: 1.55em; }
.message li { margin: .24em 0; }
.message code, .reasoning-text code { background: rgb(var(--veil-light) / .055); border: 1px solid var(--line); border-radius: 5px; font-family: var(--mono); font-size: .9em; padding: .1em .34em; }
.message pre { background: var(--grey-011); border: 1px solid var(--line); border-radius: 10px; font-family: var(--mono); font-size: 11px; line-height: 1.5; margin: .8em 0; max-height: 520px; overflow: auto; padding: 12px; white-space: pre; }
.message pre code { background: transparent; border: 0; padding: 0; }
.message a { color: var(--blue); text-decoration-color: rgba(143,215,255,.35); }
.brain-item-reference { border-bottom: 1px dotted color-mix(in srgb, var(--accent) 65%, transparent); color: var(--accent) !important; cursor: pointer; font-family: var(--mono); font-size: .92em; font-weight: 720; text-decoration: none; }
.brain-item-reference code { color: inherit; }
.brain-item-reference:hover, .brain-item-reference:focus-visible { border-bottom-style: solid; color: #e8ffa7 !important; outline: none; }
.message blockquote { border-left: 2px solid var(--line-strong); color: var(--muted); margin: .8em 0; padding-left: 12px; }
.markdown-table-wrap { border: 1px solid var(--line); border-radius: 10px; margin: .75em 0 1em; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.markdown-table-wrap table { border-collapse: collapse; font-size: .92em; min-width: 100%; width: max-content; }
.markdown-table-wrap th, .markdown-table-wrap td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 8px 10px; vertical-align: top; }
.markdown-table-wrap th { background: rgb(var(--veil-light) / .035); color: var(--text); font-weight: 700; white-space: nowrap; }
.markdown-table-wrap tr:last-child td { border-bottom: 0; }
.markdown-table-wrap :is(th,td):last-child { border-right: 0; }
.item.agentMessage.commentary .message { color: var(--grey-205); }
/* Interim messages read almost as running text: little room between them, a short line where one ends; their copy
   button shows on hover (Chris, 06.10.2026). */
.item.agentMessage.commentary { margin: 0; }
.item.agentMessage.commentary .message { padding-bottom: 4px; padding-top: 4px; }
.item.agentMessage.commentary + .item.agentMessage.commentary::before { background: rgb(var(--veil-light) / .14); content: ""; display: block; height: 1px; margin: 3px 0; width: 22px; }
.item.agentMessage.commentary .message-copy-button { bottom: auto; opacity: 0; top: 4px; transition: opacity 120ms ease; }
.item.agentMessage.commentary:hover .message-copy-button, .item.agentMessage.commentary .message-copy-button:focus-visible, .item.agentMessage.commentary .message-copy-button.copied { opacity: 1; }
@media (pointer: coarse) { .item.agentMessage.commentary .message-copy-button { opacity: .5; } }
html[data-theme="light"] .item.agentMessage.commentary + .item.agentMessage.commentary::before { background: rgb(var(--veil-dark) / .16); }
body.hide-thinking-messages .item.agentMessage.commentary { display: none !important; }
.item.reasoning { color: #d3caff; }
.reasoning-details { background: linear-gradient(var(--violet-soft), var(--violet-soft)), var(--bg); border: 1px solid rgba(185, 167, 255, 0.13); border-radius: 11px; overflow: hidden; }
.reasoning-details > summary::-webkit-details-marker { display: none; }
.reasoning-label, .event-label { align-items: center; color: var(--violet); display: flex; font-size: 9px; font-weight: 750; gap: 6px; letter-spacing: 0.1em; margin-bottom: 7px; text-transform: uppercase; }
.reasoning-label { cursor: pointer; list-style: none; margin: 0; min-height: 28px; padding: 4px 9px; }
.reasoning-label::before { background: var(--violet); content: ""; flex: 0 0 auto; height: 5px; transform: rotate(45deg); width: 5px; }
.thinking-active .reasoning-details { border-color: rgba(217,255,115,.26); box-shadow: inset 2px 0 0 rgba(217,255,115,.65); }
.thinking-active .reasoning-label::before { background: var(--accent); box-shadow: 0 0 4px rgba(217,255,115,.28); }
.thinking-active .reasoning-preview { animation: thinkingText 1.6s ease-in-out infinite; }
.reasoning-preview { color: rgba(211,202,255,.72); flex: 1; font-size: 9px; font-weight: 500; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; text-transform: none; white-space: nowrap; }
.reasoning-body { border-top: 1px solid rgba(185,167,255,.1); padding: 8px 10px; }
.reasoning-text { font-size: 11px; line-height: 1.55; white-space: pre-wrap; }
.reasoning-raw { border-top: 1px solid rgba(185, 167, 255, 0.12); color: rgba(221, 215, 255, 0.76); font-family: var(--mono); font-size: 10px; margin-top: 8px; padding-top: 8px; white-space: pre-wrap; }
.tool-card, .event-card { background: var(--panel-2); border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.tool-group { color: var(--muted); margin: 7px 0 10px; }
.tool-group > summary { align-items: center; cursor: pointer; display: flex; font-size: 10px; gap: 8px; list-style: none; min-height: 28px; padding: 3px 5px; width: fit-content; }
.tool-group > summary::-webkit-details-marker { display: none; }
.tool-group > summary:hover { color: var(--text); }
.tool-group-icon { border-bottom: 1px solid currentColor; border-top: 1px solid currentColor; color: var(--subtle); height: 7px; width: 11px; }
.tool-group-title { white-space: nowrap; }
.tool-group-chevron { color: var(--subtle); transition: transform 150ms ease; }
.tool-group[open] .tool-group-chevron { transform: rotate(90deg); }
.tool-group-body { display: grid; gap: 6px; padding: 5px 0 5px 22px; }
.tool-group-body .item { margin: 0; }
.tool-group-body .tool-summary { min-height: 34px; }
.tool-summary { align-items: center; display: flex; gap: 9px; min-height: 38px; padding: 8px 11px; }
.tool-icon { align-items: center; background: var(--blue-soft); border-radius: 7px; color: var(--blue); display: flex; flex: 0 0 auto; font-size: 11px; height: 24px; justify-content: center; width: 24px; }
.tool-title { flex: 1; font-family: var(--mono); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-status { color: var(--subtle); font-size: 9px; }
.tool-status.completed { color: var(--ok); }
.tool-status.failed { color: var(--danger); }
.tool-body { border-top: 1px solid var(--line); color: var(--muted); font-family: var(--mono); font-size: 9px; line-height: 1.48; margin: 0; max-height: 320px; overflow: auto; padding: 11px; white-space: pre-wrap; }
.tool-output-full { background: none; border: 0; border-top: 1px solid var(--line); color: var(--accent); cursor: pointer; display: block; font: inherit; font-size: 11px; padding: 7px 11px; text-align: left; width: 100%; }
.tool-output-full:hover { text-decoration: underline; }
.event-card { border-left: 2px solid var(--accent); color: var(--muted); font-size: 10px; padding: 10px 12px; }
.event-card.compaction { border-left-color: var(--violet); }
.event-card.error { border-left-color: var(--danger); color: #ffc2bc; }
.event-card.model { border-left-color: var(--blue); }
.plan-card { background: var(--blue-soft); border: 1px solid rgba(143, 215, 255, 0.13); border-radius: 12px; color: #ccecff; line-height: 1.55; padding: 12px 14px; white-space: pre-wrap; }
.generated-image-card { background: var(--panel-2); border: 1px solid var(--line); border-radius: 13px; margin: 10px 0; max-width: 720px; overflow: hidden; }
.generated-image-card > a { background: var(--grey-011); display: block; }
.generated-image-card img { display: block; height: auto; max-height: 620px; object-fit: contain; width: 100%; }
.generated-image-card figcaption { align-items: center; display: flex; gap: 12px; justify-content: space-between; padding: 9px 11px; }
.generated-image-card figcaption span:first-child { color: var(--text); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.generated-image-card figcaption span:nth-child(2) { color: var(--subtle); flex: 0 0 auto; font-size: 8px; margin-left: auto; }
.generated-image-save { background: var(--panel-3); border: 1px solid var(--line); border-radius: 8px; color: var(--accent); cursor: pointer; flex: 0 0 auto; font-size: 11px; font-weight: 700; min-height: 30px; padding: 0 12px; }
.generated-image-save:hover { border-color: var(--line-strong); }
/* A picture in full over the chat (app.js openImageViewer), with „Sichern“ and „Schließen“. */
.image-viewer { align-items: center; background: rgba(0,0,0,.88); display: flex; flex-direction: column; gap: 14px; inset: 0; justify-content: center; padding: max(16px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom)); position: fixed; z-index: 1500; }
.image-viewer img { border-radius: 8px; max-height: calc(100% - 70px); max-width: 100%; object-fit: contain; }
.image-viewer img { cursor: zoom-in; }
.image-viewer.zoomed { align-items: flex-start; justify-content: flex-start; overflow: auto; }
.image-viewer.zoomed img { cursor: zoom-out; max-height: none; max-width: none; }
.image-viewer.zoomed .image-viewer-bar { bottom: max(16px, env(safe-area-inset-bottom)); left: 50%; position: fixed; transform: translateX(-50%); }
.image-viewer-bar { display: flex; gap: 10px; }
.image-viewer-bar button { min-height: 42px; min-width: 120px; }
.generated-image-placeholder { align-items: center; color: var(--muted); display: flex; justify-content: center; min-height: 180px; }
.generated-image-placeholder.loading { animation: shimmer 1.3s infinite; background: linear-gradient(90deg, var(--grey-020), var(--grey-030), var(--grey-020)); background-size: 200% 100%; }
.attachment-message { border: 1px solid var(--line); border-radius: 8px; color: var(--muted); display: inline-flex; font-family: var(--mono); font-size: 9px; margin: 4px; padding: 6px 8px; }
.usage-limit-notice { background: rgba(255,142,131,.1); border: 1px solid rgba(255,142,131,.28); border-left: 3px solid var(--danger); color: #ffc2bc; display: flex; flex-direction: column; font-size: 10px; gap: 2px; margin: 0 clamp(18px,5vw,74px) 7px; max-width: calc(100% - 36px); min-width: 0; padding: 9px 11px; }
.usage-limit-notice strong { color: var(--danger); }
.brain-down-continue { align-self: flex-start; margin-top: 6px; padding: 7px 11px; }
.live-thinking-slot { background: var(--bg); padding: 0 clamp(18px, 5vw, 74px) 4px; position: relative; }
.live-thinking-slot > .item { margin: 0 auto; max-width: 940px; }
.live-agent-shell { display: grid; gap: 4px; margin: 0 auto 4px; max-width: 940px; min-width: 0; width: 100%; }
.item.userMessage.cora-notice { align-items: flex-start; background: none; border: 0; box-shadow: none; padding: 0; }
.cora-notice-box { display: grid; gap: 4px; justify-items: start; max-width: 100%; min-width: 0; }
/* Cora's word or another chat's message to the AI (app-messages.js coraNoticePill, Chris, 08.10.2026): folded a quiet
   pill on the composer's button ground, the sender in its colour; open a card like an answer whose frame, in the
   sender's colour, widens seamlessly at the left into a spine with the sender's name. */
.cora-notice-box { --notice-color: var(--accent); --notice-ink: var(--accent-ink); }
.cora-notice-pill { align-items: center; background: rgb(var(--veil-light) / .05); border: 0; border-radius: 999px; color: var(--muted); cursor: pointer; display: inline-flex; font-family: var(--font); font-size: 11px; gap: 7px; max-width: 100%; min-width: 0; overflow: hidden; padding: 5px 11px; white-space: nowrap; }
.cora-notice-pill:hover { background: rgb(var(--veil-light) / .09); color: var(--text); }
.cora-notice-pill > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cora-notice-from { color: var(--notice-color); flex: 0 0 auto; font-weight: 650; }
.cora-notice-card { background: rgb(var(--veil-light) / .045); border: 1px solid var(--notice-color); border-radius: 11px; display: flex; max-width: 940px; min-height: 96px; min-width: 0; overflow: hidden; width: 100%; }
.cora-notice-card.hidden { display: none; }
.cora-notice-pill.hidden { display: none; }
.cora-notice-card { cursor: pointer; }
.cora-notice-spine { background: var(--notice-color); color: var(--notice-ink); flex: 0 0 16px; position: relative; }
.cora-notice-spine > span { bottom: 8px; font-size: 9.5px; font-weight: 750; left: 0; letter-spacing: .04em; line-height: 16px; overflow: hidden; position: absolute; right: 0; text-align: center; text-overflow: ellipsis; text-transform: uppercase; top: 8px; transform: rotate(180deg); white-space: nowrap; writing-mode: vertical-rl; }
.cora-notice-text { color: var(--text); flex: 1; font-size: 13px; line-height: 1.5; min-width: 0; overflow-wrap: anywhere; padding: 10px 13px; white-space: pre-wrap; }
html[data-theme="light"] .cora-notice-pill { background: rgb(var(--veil-dark) / .05); }
html[data-theme="light"] .cora-notice-pill:hover { background: rgb(var(--veil-dark) / .08); }
html[data-theme="light"] .cora-notice-card { background: rgb(var(--veil-dark) / .03); }
.thread-wait-row { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-start; margin: 0 auto 4px; max-width: 940px; min-width: 0; width: 100%; }
.thread-wait-pill { background: rgba(240,200,110,.1); border: 1px solid rgba(240,200,110,.3); border-radius: 999px; color: #f0dca8; cursor: pointer; font-family: inherit; font-size: 10px; font-weight: 600; max-width: 100%; overflow: hidden; padding: 4px 8px; text-overflow: ellipsis; white-space: nowrap; }
.thread-wait-pill:hover { background: rgba(240,200,110,.18); border-color: rgba(240,200,110,.45); }
.thread-wait-pill.confirm { background: rgba(217,255,115,.16); border-color: var(--accent); color: var(--accent); }
/* A wait on a time: the pill fills up to the moment Cora wakes the chat. */
.thread-wait-pill[data-wait-until] { background: linear-gradient(to right, rgba(240,200,110,.28) var(--wait-progress, 0%), rgba(240,200,110,.08) var(--wait-progress, 0%)); }
.live-agent-toggle { background: rgba(185,167,255,.12); border: 1px solid rgba(185,167,255,.25); border-radius: 999px; color: #d8d0ff; font-family: var(--mono); font-size: 8px; font-weight: 700; justify-self: end; max-width: 100%; overflow: hidden; padding: 4px 8px; position: static; text-overflow: ellipsis; white-space: nowrap; }
.live-agent-toggle:hover, .live-agent-toggle[aria-expanded="true"] { background: rgba(185,167,255,.2); border-color: rgba(185,167,255,.4); color: #f0ecff; }
.live-agent-list { display: grid; gap: 4px; margin: 0; max-width: none; min-width: 0; width: 100%; }
.live-agent-row { align-items: center; background: rgba(185,167,255,.08); border: 1px solid rgba(185,167,255,.2); border-radius: 9px; display: flex; min-height: 32px; padding: 5px 9px; }
.live-agent-row > div { display: flex; flex-direction: column; min-width: 0; }
.live-agent-row strong { color: #ddd5ff; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-agent-row span { color: var(--muted); font-size: 8px; }
.composer-wrap { background: linear-gradient(to top, var(--bg) 72%, transparent); max-width: 100%; min-width: 0; padding: 0 clamp(18px, 5vw, 74px) max(17px, env(safe-area-inset-bottom)); width: 100%; }
.composer { background: var(--grey-030); border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: 0 17px 50px rgba(0, 0, 0, 0.25); margin: 0 auto; max-width: 940px; min-width: 0; padding: 11px 12px 9px; position: relative; width: 100%; }
.composer .composer-measure { max-width: 100%; pointer-events: none; }
.composer:focus-within { border-color: rgba(217, 255, 115, 0.26); }
.composer textarea { background: transparent; border: 0; line-height: 1.5; max-height: 220px; min-height: 28px; min-width: 0; outline: 0; overflow-x: hidden; overflow-wrap: anywhere; padding: 3px 4px 9px; position: relative; white-space: pre-wrap; width: 100%; z-index: 0; }
.compact-composer-open { display: none; }
.composer-toolbar { align-items: center; display: grid; gap: 5px; grid-template-columns: minmax(0, 1fr) max-content; max-width: 100%; min-width: 0; overflow: hidden; position: relative; width: 100%; z-index: 2; }
.composer-tools, .composer-actions { align-items: center; display: flex; gap: 5px; }
.composer-tools { flex: 1 1 auto; min-width: 0; overflow-x: auto; }
.composer-actions { flex: 0 0 auto; min-width: max-content; position: relative; z-index: 1; }
.tool-button { background: rgb(var(--veil-light) / 0.035); font-size: 15px; height: 29px; width: 29px; }
/* The microphone alone, folded or unfolded: its „Diktat“ never shows (Chris, 06.10.2026). */
.dictation-button { gap: 0; padding: 0; }
.dictation-button .voice-label { display: none; }
/* The chat's model as a small pill at the composer's right (app.js syncComposerModel): the provider's logo filled from
   below as far as it thinks, under it the model small; a click opens the chat's settings. */
/* In a row: the logo left, the model, and at the right the goal's play or pause while it has one (Chris, 06.10.2026). */
.composer-model { align-items: center; background: rgb(var(--veil-light) / .035); border: 0; border-radius: 999px; color: var(--muted); column-gap: 6px; cursor: pointer; display: inline-flex; flex: 0 0 auto; line-height: 1.1; min-width: 0; padding: 4px 10px 4px 11px; text-align: left; }
.composer-model:hover { background: rgb(var(--veil-light) / .08); color: var(--text); }
.composer-model-logo { --fill: 50%; -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; background: linear-gradient(to top, var(--accent) var(--fill), rgb(var(--veil-light) / .28) var(--fill)); height: 17px; position: relative; width: 17px; }
.composer-model.claude .composer-model-logo { background: linear-gradient(to top, #d97757 var(--fill), rgb(var(--veil-light) / .28) var(--fill)); }
.composer-model.glow .composer-model-logo { filter: drop-shadow(0 0 3px var(--accent)); }
.composer-model.claude.glow .composer-model-logo { filter: drop-shadow(0 0 3px #d97757); }
/* Auto and Speed as small marks at the logo's top right. */
.composer-model { position: relative; }
.composer-model.auto::before, .composer-model.speed::after { font-size: 7.5px; font-weight: 800; line-height: 1; position: absolute; top: 2px; }
.composer-model.auto::before { color: var(--accent); content: "A"; left: 31px; }
.composer-model.speed::after { content: "⚡"; left: 3px; }
.composer-model .composer-goal-mark { margin-left: -1px; }
.composer-model-logo { flex: none; margin-right: 3px; }
.composer-model small { font-size: 9.5px; font-weight: 600; max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme="light"] .composer-model { background: rgba(0,0,0,.04); }
html[data-theme="light"] .composer-model-logo { background: linear-gradient(to top, #3b7d22 var(--fill), rgba(0,0,0,.22) var(--fill)); }
.dictation-button > span:last-child { font-size: 9px; font-weight: 700; }
.attach-button { cursor: pointer; position: relative; }
.plus-glyph, .plus-glyph::after { background: currentColor; border-radius: 1px; content: ""; display: block; height: 1.5px; width: 11px; }
.plus-glyph::after { transform: rotate(90deg); }
.mic-glyph { fill: none; height: 16px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.45; width: 16px; }
.tool-button.recording { animation: recordPulse 1.3s infinite; background: rgba(255, 142, 131, 0.14); color: var(--danger); }
/* The dictation records (the microphone gives sound, not only granted): solid red and a ring breathing out, unmistakable
   beside „Start …“ before it (Chris, 09.10.2026: words said before the microphone really listened were lost). */
.dictation-button.recording,
html .composer .dictation-button.recording { animation: dictationListening 1.2s ease-out infinite; background: var(--danger); color: var(--grey-011); }
html[data-theme="light"] .composer .dictation-button.recording { background: var(--danger); color: #fff; }
@keyframes dictationListening { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 60%, transparent); } 100% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--danger) 0%, transparent); } }
.dictation-button.recording .mic-glyph { display: none; }
.dictation-button.recording::before { background: currentColor; border-radius: 2px; content: ""; height: 10px; width: 10px; }
/* „Senden“ beside „Stopp“ while recording, the same size (index.html #voice-send). */
.voice-send { background: var(--accent); color: var(--accent-ink); font-size: 16px; font-weight: 700; }
.voice-send.hidden { display: none !important; }
.tool-button.starting { animation: thinkingText 1s ease-in-out infinite; color: var(--accent); }
.tool-button.processing { background: var(--accent-soft); }
.steer-toggle { align-items: center; color: var(--accent); display: flex; font-size: 9px; gap: 5px; margin-left: 5px; }
.steer-toggle select { background: var(--grey-020); border: 1px solid var(--line); border-radius: 7px; color: var(--accent); font-size: 9px; outline: none; padding: 5px 6px; }
#composer-hint { color: var(--subtle); font-size: 8px; }
.send-button, .stop-button { align-items: center; border-radius: 9px; display: inline-flex; flex: 0 0 auto; height: 31px; justify-content: center; line-height: 1; padding: 0; position: relative; width: 31px; z-index: 2; }
.send-button { background: var(--accent); color: var(--accent-ink); font-size: 19px; touch-action: manipulation; }
.send-button.empty:not(:disabled) { background: var(--panel-3); border: 1px solid var(--line); color: var(--subtle); }
.stop-button { background: rgba(255, 142, 131, 0.14); color: var(--danger); }
.attachment-list { display: flex; gap: 7px; margin: 0 auto 7px; max-width: 940px; overflow-x: auto; }
.attachment-chip { align-items: center; background: var(--panel-3); border: 1px solid var(--line); border-radius: 9px; display: flex; flex: 0 0 auto; gap: 7px; max-width: 240px; padding: 6px 8px; }
.attachment-chip img { border-radius: 5px; height: 26px; object-fit: cover; width: 26px; }
.attachment-chip span { font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-chip button { background: transparent; color: var(--subtle); padding: 2px; }
.form-help { color: var(--subtle); font-size: 10px; line-height: 1.5; margin: 10px 0; }
.project-service-actions { align-items: center; display: flex; gap: 10px; }
.project-service-card .service-status-connected { color: var(--ok); }
.project-service-card .service-status-warning { color: var(--warn); }
.project-service-login-link { font-size: 11px; grid-column: 1 / -1; }
.project-services-hint { color: var(--subtle); font-size: 10px; line-height: 1.5; margin: 0; }
.project-service-add { display: grid; gap: 10px; grid-template-columns: minmax(0,1fr); }
.project-service-add > div:first-child { display: grid; gap: 2px; }
.project-service-add > div:first-child span { color: var(--subtle); font-size: 10px; }
.project-service-add-grid { display: grid; gap: 8px; grid-template-columns: minmax(0,.8fr) minmax(0,1.4fr) minmax(0,1fr); }
.project-service-add-grid.project-service-main { grid-template-columns: minmax(0,.7fr) minmax(0,.8fr) minmax(0,1.4fr) minmax(0,1fr); }@media (max-width: 720px) { .project-service-add-grid.project-service-main { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
.project-service-field { display: grid; gap: 4px; }
.project-service-field > span { color: var(--muted); font-size: 10px; font-weight: 650; }
.project-service-add > .small-button { justify-self: start; }
.project-service-keys, .project-service-new-key { display: grid; gap: 8px; }
.project-service-new-key { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.project-service-keys[hidden], .project-service-new-key[hidden] { display: none; }
.project-service-add > .project-service-actions { display: flex; gap: 10px; justify-self: start; align-items: center; }
.project-service-field-wide { grid-column: 1 / -1; }
.project-service-suggest { align-items: center; color: var(--subtle); display: flex; flex-wrap: wrap; font-size: 10px; gap: 6px; }
.project-service-suggest[hidden] { display: none; }
.project-service-suggestion { background: var(--accent-soft); border: 1px solid var(--line-strong); border-radius: 999px; color: var(--text); cursor: pointer; font-size: 11px; padding: 3px 9px; }
@media (max-width: 860px) { .project-service-add-grid { grid-template-columns: minmax(0,1fr); } }
.github-device, .github-current, .github-repositories { grid-column: 1 / -1; }
.github-device { align-items: center; background: var(--panel-3); border-radius: 9px; display: flex; justify-content: space-between; padding: 9px 10px; }
.github-device code { color: var(--accent); font-size: 14px; letter-spacing: .08em; }
.github-device a { color: var(--accent); font-size: 10px; }
.github-device-actions { align-items: center; display: flex; gap: 9px; }
.github-device-actions .danger-text { margin: 0; }
.github-current { display: grid; gap: 8px; }
.github-list-head { align-items: baseline; display: flex; gap: 10px; justify-content: space-between; }
.github-list-head > span { color: var(--subtle); font-size: 8px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.github-list-head small { color: var(--muted); font-size: 10px; }
.github-list-head strong { color: var(--text); font-weight: 650; }
.github-repo-list { display: grid; gap: 6px; }
.github-repo { align-items: center; background: var(--panel-3); border: 1px solid var(--line); border-radius: 9px; display: grid; gap: 8px 12px; grid-template-columns: minmax(0,1fr) auto; padding: 10px 11px; }
.github-repo-main { display: grid; gap: 4px; min-width: 0; }
.github-repo-folder { color: var(--text); font-family: var(--mono); font-size: 11px; font-weight: 650; overflow-wrap: anywhere; }
.github-repo-line { align-items: center; display: flex; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.github-repo-name { color: var(--accent); font-size: 11px; font-weight: 650; overflow-wrap: anywhere; text-decoration: none; }
.github-repo-name:hover { text-decoration: underline; }
.github-repo .github-sync-state { padding: 2px 8px; }
.github-repo-meta { color: var(--muted); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.github-repo-actions { align-items: center; display: flex; gap: 8px; }
.github-repo-actions .danger-text { margin: 0; }
.modal .github-repo-move { align-items: end; display: flex; gap: 8px; grid-column: 1 / -1; padding: 0; }
.modal .github-repo-move label { flex: 1; margin: 0; min-width: 0; }
.modal .github-repo-move input { font-family: var(--mono); font-size: 11px; padding: 8px 10px; }
.github-repo-empty { color: var(--muted); font-size: 11px; margin: 0; }
.project-extension-card .github-error { color: var(--danger); font-size: 11px; grid-column: 1 / -1; margin: 0; min-height: 0; }
.project-extension-card .github-error:empty { display: none; }
.github-sync-state { border-radius: 999px; font-size: 10px; font-weight: 750; padding: 5px 10px; }
.github-sync-state[data-tone="ok"] { background: var(--accent-soft); color: var(--accent); }
.github-sync-state[data-tone="warn"] { background: rgba(255,196,94,.12); color: #ffc45e; }
.github-more-toggle { font-size: 10px; grid-column: 1 / -1; justify-self: start; padding: 4px 0; }
.github-more-toggle::before { content: '+ '; }
.github-more-toggle[aria-expanded="true"]::before { content: '− '; }
.github-repositories { border-top: 1px solid var(--line); display: grid; gap: 7px; grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; padding-top: 10px; }
.github-repositories label { min-width: 0; }
.github-repositories input, .github-repositories select { width: 100%; }
.github-repositories #project-github-name { min-width: 0; }
.github-section-heading { border-top: 1px solid var(--line); font-size: 11px; margin: 8px 0 0; padding-top: 12px; }
.github-section-heading:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.github-list-status { color: var(--muted); font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
.github-repositories #project-github-link { justify-self: start; }
.span-two { grid-column: 1 / -1; }
.tile-search { margin: 10px 0; }
.tile-thread-list { display: grid; gap: 4px; max-height: 46dvh; overflow: auto; }
.tile-thread-option { align-items: center; background: var(--grey-017); border: 1px solid transparent; border-radius: 9px; color: var(--text); display: flex; gap: 8px; padding: 10px; text-align: left; width: 100%; }
.tile-thread-option:hover { border-color: var(--line-strong); }
.tile-thread-option i { background: var(--subtle); border-radius: 50%; height: 6px; width: 6px; }
.tile-thread-option span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#claude-login-dialog { width: min(520px,calc(100% - 22px)); }
#claude-provider-device { align-items: end; display: grid; gap: 10px 12px; grid-template-columns: minmax(0,1fr) auto; }
#claude-provider-message { align-self: center; min-width: 0; }
#claude-provider-device > label { grid-column: 1; min-width: 0; }
#claude-provider-submit { grid-column: 2; }
/* Settings: tabs for preferences and (admins) users and machines. */
.handover-evaluation { display: grid; gap: 10px; }
.brain-journal-fold { border: 1px dashed var(--line); border-radius: 10px; margin: 6px 0; padding: 6px 10px; }
.brain-journal-fold > summary { color: var(--subtle); cursor: pointer; font-size: 10px; }
.brain-journal-fold[open] > summary { margin-bottom: 6px; }
.handover-eval-progress { align-items: center; display: grid; gap: 6px 12px; grid-template-columns: minmax(0,1fr) auto; }
.handover-eval-progress strong { color: var(--text); font-size: 11px; }
.handover-eval-progress small { color: var(--subtle); font-size: 9px; }
.handover-eval-bar { background: rgb(var(--veil-light) / .06); border-radius: 999px; grid-column: 1 / -1; height: 4px; overflow: hidden; }
.handover-eval-bar span { background: #b9a7ff; display: block; height: 100%; }
.handover-eval-compare { display: grid; gap: 8px; margin: 12px 0; }
.handover-eval-table { border-collapse: collapse; font-size: 10px; width: 100%; }
.handover-eval-table th { color: var(--subtle); font-size: 9px; font-weight: 500; padding: 4px 6px; text-align: left; }
.handover-eval-table td { border-top: 1px solid var(--line); color: var(--muted); padding: 5px 6px; }
.handover-eval-table td.num { font-family: var(--mono); text-align: right; }
.handover-eval-table td.good { color: #9fe3a8; }
.handover-eval-table td.bad { color: #ffb4a3; }
html[data-theme="light"] .handover-eval-table td.good { color: #1f7a33; }
html[data-theme="light"] .handover-eval-table td.bad { color: #b3401f; }
html[data-theme="light"] .handover-eval-bar span { background: #4b3bb0; }
.brain-workspace-panel { background: var(--bg); border-left: 1px solid var(--line); container-type: inline-size; display: flex; flex-direction: column; min-height: 0; min-width: 340px; overflow: hidden; position: relative; }
.brain-panel-header { align-items: center; background: linear-gradient(90deg,rgba(217,255,115,.07),transparent 38%),var(--grey-026); border-bottom: 1px solid var(--line-strong); cursor: grab; display: flex; justify-content: space-between; min-height: 70px; padding: 11px 22px; }
.brain-panel-header.pane-drag-source { cursor: grabbing; }
.brain-panel-header h2 { font-size: 16px; letter-spacing: -.025em; margin: 1px 0 0; }
.brain-panel-header .eyebrow { font-size: 8px; margin: 0; }
.brain-panel-body { align-self: center; flex: 1; min-height: 0; overflow: auto; padding: 20px 22px 28px; width: min(100%,960px); }
.brain-health { align-items: center; background: linear-gradient(110deg,rgba(217,255,115,.075),rgb(var(--veil-light) / .025)); border: 1px solid var(--line); border-radius: 13px; display: flex; gap: 11px; margin-bottom: 18px; min-height: 62px; padding: 12px 14px; }
.brain-health.ready { border-color: rgba(217,255,115,.25); }
.brain-health.error { border-color: rgba(255,142,131,.32); }
.brain-health.ready::before, .brain-health.error::before { background: var(--ok); border-radius: 50%; box-shadow: 0 0 10px rgba(156,230,168,.38); content: ""; flex: 0 0 auto; height: 8px; width: 8px; }
.brain-health.error::before { background: var(--danger); box-shadow: 0 0 10px rgba(255,142,131,.3); }
.brain-health > div { min-width: 0; }
.brain-health strong, .brain-health small { display: block; }
.brain-health strong { font-size: 12px; letter-spacing: -.01em; }
.brain-health small { color: var(--muted); font-size: 9px; line-height: 1.45; margin-top: 3px; }
.brain-scope-grid { display: grid; gap: 10px; grid-template-columns: repeat(2,minmax(0,1fr)); }
.brain-scope-grid label { color: var(--muted); display: grid; font-size: 9px; font-weight: 700; gap: 6px; margin-top: 0; min-width: 0; }
.brain-panel-body input, .brain-panel-body select, .brain-panel-body textarea { background-color: var(--grey-017); border: 1px solid var(--line); border-radius: 10px; color: var(--text); outline: 0; padding: 10px 12px; transition: border-color 120ms ease,box-shadow 120ms ease,background-color 120ms ease; width: 100%; }
.brain-panel-body input::placeholder, .brain-panel-body textarea::placeholder { color: var(--grey-110); }
.brain-panel-body input:hover, .brain-panel-body select:hover, .brain-panel-body textarea:hover { background-color: var(--grey-020); border-color: var(--line-strong); }
.brain-panel-body input:focus, .brain-panel-body select:focus, .brain-panel-body textarea:focus { background-color: var(--grey-020); border-color: rgba(217,255,115,.42); box-shadow: 0 0 0 3px rgba(217,255,115,.07); }
.brain-panel-body select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.25 6 6.25l5-5' fill='none' stroke='%238b9284' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-position: right 12px center; background-repeat: no-repeat; cursor: pointer; padding-right: 34px; }
.brain-scope-grid select { margin: 0; min-height: 42px; width: 100%; }
.brain-search-form { display: grid; gap: 9px; grid-template-columns: minmax(0,1fr) auto; margin: 14px 0 15px; }
.brain-search-form input { margin: 0; min-height: 42px; min-width: 0; }
.brain-search-form button { min-height: 42px; }
.brain-knowledge { align-items: start; display: grid; gap: 14px; grid-template-columns: minmax(190px,250px) minmax(0,1fr); min-height: 320px; }
.brain-page-list { align-content: start; display: grid; gap: 2px; max-height: calc(100vh - 260px); overflow-x: hidden; overflow-y: auto; padding-right: 2px; position: sticky; top: 0; }
.brain-nav-row { align-items: center; background: transparent; border: 1px solid transparent; border-radius: 9px; color: var(--muted); cursor: pointer; display: flex; font-size: 10px; gap: 6px; min-height: 32px; padding: 6px 8px 6px calc(6px + var(--depth, 0) * 14px); text-align: left; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; width: 100%; }
.brain-nav-row:hover { background: rgb(var(--veil-light) / .03); border-color: var(--line); color: var(--text); }
.brain-nav-row.active { background: var(--accent-soft); border-color: rgba(217,255,115,.22); color: var(--text); }
.brain-nav-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.brain-icon, .brain-nav-icon, .brain-chevron { display: inline-flex; flex: 0 0 auto; }
.brain-icon svg, .brain-nav-icon svg, .brain-chevron svg { display: block; height: 100%; width: 100%; }
.brain-nav-toggle { align-items: center; color: var(--subtle); display: inline-flex; flex: 0 0 14px; height: 14px; justify-content: center; }
.brain-nav-toggle .brain-chevron { height: 11px; opacity: 0; transition: transform 140ms ease; width: 11px; }
.brain-nav-toggle.clickable { border-radius: 4px; cursor: pointer; }
.brain-nav-toggle.clickable .brain-chevron { opacity: 1; }
.brain-nav-toggle.expanded .brain-chevron { transform: rotate(90deg); }
.brain-nav-toggle.clickable:hover { background: var(--line); color: var(--text); }
.brain-nav-icon { color: var(--accent); height: 13px; opacity: .85; width: 13px; }
.brain-nav-row:not(.active) .brain-nav-icon { color: var(--muted); }
.brain-nav-dot { border: 1.5px solid var(--subtle); border-radius: 50%; flex: 0 0 auto; height: 7px; margin: 0 3px; width: 7px; }
.brain-nav-dot.pinned { background: var(--subtle); }
.brain-nav-row.area.active .brain-nav-dot { border-color: var(--accent); }
.brain-nav-row.area.active .brain-nav-dot.pinned { background: var(--accent); }
.brain-page-refresh .brain-icon { height: 14px; width: 14px; }
.brain-nav-label { flex: 1; font-weight: 620; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brain-nav-row.area .brain-nav-label { font-weight: 540; }
.brain-nav-badges { align-items: center; display: flex; flex: 0 0 auto; gap: 4px; }
.brain-nav-open { background: rgba(255,201,106,.14); border-radius: 999px; color: var(--warn); font-size: 8px; font-weight: 760; line-height: 1; padding: 3px 6px; }
.brain-nav-count { color: var(--subtle); font-size: 8px; font-variant-numeric: tabular-nums; }
.brain-nav-heading { align-items: center; background: transparent; border: 0; color: var(--subtle); cursor: default; display: flex; font-size: 7.5px; font-weight: 780; gap: 6px; justify-content: space-between; letter-spacing: .08em; margin: 12px 0 4px; padding: 0 8px; text-align: left; text-transform: uppercase; width: 100%; }
.brain-nav-heading .brain-chevron { display: none; height: 11px; transition: transform 140ms ease; width: 11px; }
.brain-nav-heading-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brain-page-head > .brain-head-actions { flex: 0 0 auto; }
.brain-page .brain-page-markdown h1 { font-size: 14px; }
.brain-page .brain-page-markdown h2 { font-size: 12.5px; }
.brain-page .brain-page-markdown h3, .brain-page .brain-page-markdown h4 { font-size: 11.5px; }
.brain-nav-empty { border: 1px dashed var(--line); border-radius: 10px; color: var(--subtle); font-size: 9px; line-height: 1.45; margin-top: 10px; padding: 10px; }
.brain-page { background: rgb(var(--veil-light) / .018); border: 1px solid var(--line); border-radius: 14px; min-height: 320px; min-width: 0; padding: 18px 20px 22px; }
.brain-head-actions { align-items: center; display: flex; flex: 0 0 auto; gap: 7px; }
.brain-head-actions .secondary { font-size: 9px; min-height: 30px; padding: 5px 10px; }
.brain-breadcrumb { align-items: center; display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 5px; }
.brain-crumb { background: transparent; border: 0; border-radius: 5px; color: var(--subtle); cursor: pointer; font-size: 8.5px; padding: 1px 3px; }
.brain-crumb:hover { background: var(--line); color: var(--text); }
.brain-crumb-sep { color: var(--subtle); font-size: 8px; opacity: .6; }
.brain-area-description { color: var(--muted); font-size: 10.5px; line-height: 1.5; margin: -4px 0 14px; }
.brain-section { margin-top: 18px; }
.brain-section:first-of-type { margin-top: 4px; }
.brain-section-title { align-items: center; color: var(--text); display: flex; font-size: 10px; font-weight: 760; gap: 7px; letter-spacing: .01em; margin: 0 0 9px; }
.brain-section-title.clickable { cursor: pointer; }
.brain-section-title.clickable:hover { color: var(--accent); }
.brain-section-count { background: var(--line); border-radius: 999px; color: var(--muted); font-size: 8px; font-weight: 700; padding: 2px 6px; }
.brain-page-stamp { color: var(--subtle); display: block; font-size: 8px; margin-top: 10px; }
.brain-banner { align-items: center; background: rgba(255,201,106,.07); border: 1px solid rgba(255,201,106,.2); border-radius: 11px; color: var(--warn); display: flex; font-size: 10px; gap: 9px; margin-bottom: 14px; padding: 10px 12px; }
.brain-stats { display: grid; gap: 9px; grid-template-columns: repeat(3,minmax(0,1fr)); margin-bottom: 6px; }
.brain-stat { background: var(--panel-3); border: 1px solid var(--line); border-radius: 12px; color: var(--text); display: grid; gap: 3px; padding: 12px 14px; text-align: left; }
button.brain-stat { cursor: pointer; transition: border-color 120ms ease, transform 120ms ease; }
button.brain-stat:hover { border-color: rgba(217,255,115,.3); transform: translateY(-1px); }
.brain-stat strong { font-size: 20px; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.brain-stat span { color: var(--muted); font-size: 9px; }
.brain-area-grid { display: grid; gap: 9px; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); }
.brain-area-card { align-content: start; background: var(--panel-3); border: 1px solid var(--line); border-radius: 12px; color: var(--text); cursor: pointer; display: grid; gap: 6px; min-height: 96px; padding: 12px 13px; text-align: left; transition: border-color 120ms ease, transform 120ms ease, background 120ms ease; }
.brain-area-card:hover { border-color: rgba(217,255,115,.32); transform: translateY(-1px); }
.brain-area-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.brain-area-card-top { align-items: start; display: flex; gap: 8px; justify-content: space-between; }
.brain-area-card strong { font-size: 11px; letter-spacing: -.01em; }
.brain-area-card p { -webkit-box-orient: vertical; -webkit-line-clamp: 3; color: var(--muted); display: -webkit-box; font-size: 9.5px; line-height: 1.45; margin: 0; overflow: hidden; }
.brain-area-card small { color: var(--subtle); font-size: 8px; }
.brain-card-children { display: flex; flex-wrap: wrap; gap: 4px; }
.brain-card-children span { border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 7.5px; padding: 2px 6px; }
.brain-open-pill { background: rgba(255,201,106,.13); border-radius: 999px; color: var(--warn); flex: 0 0 auto; font-size: 7.5px; font-weight: 760; padding: 3px 7px; white-space: nowrap; }
.brain-item-list { display: grid; gap: 6px; }
.brain-item { align-items: start; background: var(--panel-3); border: 1px solid var(--line); border-left: 3px solid var(--line-strong); border-radius: 11px; display: grid; gap: 8px 10px; grid-template-columns: auto minmax(0,1fr); padding: 9px 10px 9px 11px; }
/* The text gets the whole width; status and actions share the row below it at every width. */
.brain-item > .brain-item-body { grid-column: 2; grid-row: 1; }
.brain-item > .brain-item-status { grid-column: 2; grid-row: 2; justify-self: start; }
.brain-item > .brain-entry-actions { align-self: center; grid-column: 2; grid-row: 2; justify-self: end; position: static; transform: none; }
.brain-item.status-open { border-left-color: var(--warn); }
.brain-item.status-in_progress { border-left-color: var(--accent); }
.brain-item.status-blocked { border-left-color: var(--danger); }
.brain-item.status-done { border-left-color: var(--ok); opacity: .78; }
.brain-item.status-rejected { opacity: .6; }
.brain-item.targeted { animation: brainItemTarget 1.15s ease-out 2; border-color: rgba(217,255,115,.72); box-shadow: 0 0 0 2px rgba(217,255,115,.14), 0 8px 28px rgba(0,0,0,.22); opacity: 1; }
@keyframes brainItemTarget { 50% { background: rgba(217,255,115,.13); box-shadow: 0 0 0 3px rgba(217,255,115,.2), 0 8px 28px rgba(0,0,0,.22); } }
.brain-item.status-done .brain-item-body > p, .brain-item.status-rejected .brain-item-body > p { text-decoration: line-through; text-decoration-color: var(--subtle); }
.brain-item-kind { align-items: center; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--muted); display: flex; font-size: 9px; font-weight: 800; height: 20px; justify-content: center; margin-top: 1px; width: 20px; }
.brain-item-kind.question { border-color: rgba(152,184,255,.35); color: #b9ccff; }
.brain-item-kind .brain-icon { height: 11px; width: 11px; }
.brain-item-body { display: grid; gap: 4px; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.brain-item-body > p { font-size: 10.5px; font-weight: 600; line-height: 1.45; margin: 0; overflow-wrap: anywhere; }
.brain-item-details { -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--muted); display: -webkit-box; font-size: 9.5px; line-height: 1.45; overflow: hidden; overflow-wrap: anywhere; }
.brain-item-updates { color: var(--muted); display: grid; font-size: 9px; gap: 2px; line-height: 1.4; list-style: none; margin: 0; padding: 0 0 0 9px; border-left: 1px solid var(--line); }
.brain-item-updates li { -webkit-box-orient: vertical; -webkit-line-clamp: 3; display: -webkit-box; overflow: hidden; overflow-wrap: anywhere; }
.brain-item-body[role="button"] { cursor: pointer; }
.brain-item-body[role="button"]:focus-visible { border-radius: 6px; outline: 1px solid var(--accent); outline-offset: 3px; }
.brain-item.expanded .brain-item-details, .brain-item.expanded .brain-item-updates li { -webkit-line-clamp: unset; display: block; overflow: visible; }
.brain-item.expanded .brain-item-details { color: var(--text); font-size: 10px; line-height: 1.55; white-space: pre-wrap; }
.brain-item-more { background: transparent; border: 0; color: var(--accent); cursor: pointer; font-size: 8.5px; font-weight: 600; min-height: 0; padding: 0 2px; }
.brain-item-more:hover { text-decoration: underline; }
.brain-item-meta { align-items: center; color: var(--subtle); display: flex; flex-wrap: wrap; font-size: 8px; gap: 6px; }
.brain-panel-body select.brain-item-status { font-size: 9px; min-height: 28px; padding: 4px 26px 4px 8px; width: auto; }
.brain-area-chip { background: var(--accent-soft); border: 1px solid rgba(217,255,115,.18); border-radius: 999px; color: var(--accent); cursor: pointer; font-size: 8px; font-weight: 650; max-width: 100%; overflow: hidden; padding: 2px 7px; text-overflow: ellipsis; white-space: nowrap; }
.brain-area-chip:hover { border-color: rgba(217,255,115,.4); }
.brain-area-chip.static { cursor: default; }
.brain-pending-pill { background: rgba(255,201,106,.1); border-radius: 999px; color: var(--warn); font-size: 7.5px; font-weight: 700; padding: 2px 7px; }
.brain-filters { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 14px; }
.brain-filter { background: transparent; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); cursor: pointer; font-size: 9px; padding: 5px 10px; }
.brain-filter:hover { border-color: var(--line-strong); color: var(--text); }
.brain-filter.active { background: var(--accent-soft); border-color: rgba(217,255,115,.3); color: var(--accent); font-weight: 700; }
.brain-finished { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 12px; }
.brain-finished > summary { color: var(--muted); cursor: pointer; font-size: 9.5px; font-weight: 700; margin-bottom: 9px; }
.brain-more { margin-top: 9px; }
.brain-area-edit { background: rgb(var(--veil-light) / .02); border: 1px solid var(--line-strong); border-radius: 12px; display: grid; gap: 10px; grid-template-columns: repeat(2,minmax(0,1fr)); margin-bottom: 14px; padding: 13px 14px; }
.brain-area-edit > label { color: var(--muted); display: grid; font-size: 9px; font-weight: 700; gap: 5px; min-width: 0; }
.brain-area-edit > label:nth-child(2) { grid-column: 1 / -1; }
.brain-area-edit textarea { resize: vertical; }
.brain-area-edit .brain-check { align-items: center; display: flex; gap: 8px; grid-column: 1 / -1; }
.brain-area-edit .brain-check input { accent-color: var(--accent); flex: 0 0 auto; margin: 0; width: auto; }
.brain-area-edit .brain-check span { color: var(--muted); font-weight: 600; }
.brain-edit-actions { align-items: center; display: flex; gap: 8px; grid-column: 1 / -1; justify-content: flex-end; }
.brain-edit-status { color: var(--muted); flex: 1; font-size: 9px; }
.brain-doc-list { display: grid; gap: 4px; }
.brain-doc { align-items: center; border: 1px solid var(--line); border-radius: 9px; display: flex; flex-wrap: wrap; gap: 6px 10px; justify-content: space-between; padding: 7px 10px; }
.brain-doc code { color: var(--text); font-size: 9px; overflow-wrap: anywhere; }
.brain-doc small { align-items: center; color: var(--subtle); display: flex; flex-wrap: wrap; font-size: 8px; gap: 6px; }
.brain-doc.error code { color: var(--muted); }
.brain-doc.error small { color: var(--warn); }
.brain-doc-path { color: var(--muted); font-size: 8px; }
.brain-decision { border: 1px solid var(--line); border-radius: 11px; display: grid; gap: 6px; margin-bottom: 6px; padding: 9px 11px; }
.brain-decision p { color: var(--text); font-size: 10px; line-height: 1.45; margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.brain-decision-top { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; }
.brain-decision-top small { color: var(--subtle); font-size: 8px; margin-left: auto; }
.brain-decision-target { color: var(--muted); font-size: 8.5px; line-height: 1.4; }
.brain-action-badge { border-radius: 999px; font-size: 7.5px; font-weight: 780; letter-spacing: .02em; padding: 3px 7px; background: var(--line); color: var(--muted); }
.action-new_fact .brain-action-badge { background: var(--accent-soft); color: var(--accent); }
.action-new_item .brain-action-badge { background: rgba(255,201,106,.13); color: var(--warn); }
.action-update_item .brain-action-badge { background: rgba(156,230,168,.12); color: var(--ok); }
.action-supersede .brain-action-badge { background: rgba(152,184,255,.12); color: #b9ccff; }
.action-ignore { opacity: .62; }
.brain-area-log { display: grid; gap: 5px; list-style: none; margin: 0; padding: 0; }
.brain-area-log li { align-items: baseline; border-bottom: 1px solid var(--line); color: var(--muted); display: flex; flex-wrap: wrap; font-size: 9px; gap: 7px; line-height: 1.45; padding: 5px 0; }
.brain-area-log small { color: var(--subtle); font-size: 8px; margin-left: auto; }
.brain-log-actor { color: var(--accent); font-size: 8px; font-weight: 780; text-transform: uppercase; }
html[data-theme="light"] .brain-page, html[data-theme="light"] .brain-area-edit { background: #fff; }
html[data-theme="light"] .brain-nav-row:hover { background: rgb(var(--veil-dark) / .04); }
html[data-theme="light"] .brain-nav-row.active, html[data-theme="light"] .brain-filter.active, html[data-theme="light"] .brain-area-chip { border-color: rgba(59,125,34,.28); }
html[data-theme="light"] .brain-item-kind.question, html[data-theme="light"] .action-supersede .brain-action-badge { color: var(--blue); }
html[data-theme="light"] .brain-panel-body input, html[data-theme="light"] .brain-panel-body select, html[data-theme="light"] .brain-panel-body textarea { background-color: #fff; }
.brain-page-head { align-items: start; border-bottom: 1px solid var(--line); display: flex; gap: 10px; justify-content: space-between; margin-bottom: 14px; padding-bottom: 11px; }
.brain-page-head > div { flex: 1; min-width: 0; }
.brain-page-head h3 { font-size: 15px; letter-spacing: -.02em; margin: 0; }
.brain-page-head small { color: var(--subtle); display: block; font-size: 8px; margin-top: 3px; }
.brain-page-markdown { color: var(--muted); font-size: 11px; line-height: 1.58; overflow-wrap: anywhere; }
.brain-page-markdown h1, .brain-page-markdown h2, .brain-page-markdown h3 { color: var(--text); margin: 18px 0 8px; }
.brain-page-markdown h1:first-child, .brain-page-markdown h2:first-child, .brain-page-markdown h3:first-child { margin-top: 0; }
.brain-page-markdown ul, .brain-page-markdown ol { padding-left: 19px; }
.brain-page-markdown code { color: var(--accent); }
.brain-page-stale { background: rgba(255,201,106,.09); border-radius: 999px; color: var(--warn); font-size: 7px; padding: 4px 7px; }
.brain-page-refresh { align-items: center; background: transparent; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); display: flex; flex: 0 0 auto; height: 30px; justify-content: center; padding: 0; width: 30px; }
.brain-page-refresh:hover { border-color: var(--line-strong); color: var(--text); }
.brain-results { display: grid; gap: 8px; min-height: 72px; padding-right: 2px; }
.brain-empty { align-items: center; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); display: flex; font-size: 10px; justify-content: center; min-height: 72px; padding: 18px; text-align: center; }
.brain-memory { background: var(--panel-3); border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 7px; padding: 11px 12px; }
.brain-memory-head { align-items: center; display: flex; gap: 7px; justify-content: space-between; }
.brain-memory-meta { align-items: center; display: flex; flex-wrap: wrap; gap: 5px; }
.brain-scope-badge, .brain-memory-tag { border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 8px; padding: 3px 6px; }
.brain-scope-badge.personal { background: rgba(152,184,255,.08); color: #b9ccff; }
.brain-scope-badge.project { background: var(--accent-soft); color: var(--accent); }
.brain-memory p { font-size: 11px; line-height: 1.5; margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.brain-memory small { color: var(--subtle); font-size: 8px; }
.brain-memory .danger-text { margin: 0; padding: 3px 5px; }
.brain-memory.derived { background: transparent; border-style: dashed; }
.brain-memory.derived p { color: var(--muted); }
.brain-derived-tag { color: var(--subtle); cursor: help; font-size: 8px; font-style: italic; letter-spacing: .02em; }
.brain-derived-divider { align-items: center; color: var(--subtle); display: flex; font-size: 9px; gap: 8px; margin-top: 6px; }
.brain-derived-divider::before, .brain-derived-divider::after { border-top: 1px solid var(--line); content: ""; flex: 1 1 18px; }
.brain-sources-panel { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 13px; }
.brain-sources-panel > summary { color: var(--subtle); cursor: pointer; font-size: 9px; font-weight: 700; margin-left: 12px; }
.brain-sources-panel[open] > summary { color: var(--text); margin-bottom: 10px; }
.brain-remember-panel { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 13px; }
.brain-remember-panel > summary { color: var(--muted); cursor: pointer; font-size: 10px; font-weight: 700; list-style-position: outside; margin-left: 12px; }
.brain-remember-panel[open] { background: rgb(var(--veil-light) / .018); border: 1px solid var(--line); border-radius: 13px; padding: 13px 14px 14px; }
.brain-remember-panel[open] > summary { color: var(--text); margin: 0 0 12px 12px; }
.brain-remember-panel label, .brain-jev-panel label { color: var(--muted); display: grid; font-size: 9px; font-weight: 700; gap: 6px; margin-top: 11px; min-width: 0; width: 100%; }
.brain-remember-panel textarea { min-height: 104px; resize: vertical; }
.brain-remember-actions { align-items: center; display: flex; gap: 10px; justify-content: space-between; margin-top: 12px; }
.brain-remember-actions span { color: var(--muted); font-size: 9px; }
.brain-remember-actions button { min-height: 40px; min-width: 112px; }
.brain-jev-panel { background: rgb(var(--veil-light) / .018); border: 1px solid var(--line); border-radius: 12px; margin-top: 12px; padding: 11px 12px; }
.brain-jev-panel > summary { color: var(--muted); cursor: pointer; font-size: 10px; font-weight: 700; }
.brain-jev-panel[open] > summary { color: var(--text); margin-bottom: 10px; }
.brain-jev-head strong, .brain-jev-head small { display: block; }
.brain-jev-head strong { font-size: 11px; }
.brain-jev-head small { color: var(--muted); font-size: 9px; line-height: 1.45; margin-top: 3px; }
.brain-jev-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.brain-jev-actions .danger-text { margin-left: auto; }
.brain-admin-panel { background: rgb(var(--veil-light) / .018); border: 1px solid var(--line); border-radius: 12px; margin-top: 12px; padding: 11px 12px; }
.brain-admin-panel > summary { color: var(--muted); cursor: pointer; font-size: 10px; font-weight: 700; }
.brain-admin-panel[open] > summary { color: var(--text); margin-bottom: 8px; }
.brain-admin-panel > p { color: var(--subtle); font-size: 9px; line-height: 1.45; margin: 0 0 10px; }
.brain-admin-grid { display: grid; gap: 9px; grid-template-columns: repeat(3,minmax(0,1fr)); }
.brain-admin-grid label { color: var(--muted); display: grid; font-size: 9px; font-weight: 700; gap: 6px; min-width: 0; }
.brain-admin-actions { align-items: center; display: flex; gap: 10px; justify-content: space-between; margin-top: 11px; }
.brain-admin-actions span { color: var(--muted); font-size: 9px; }
@container (max-width: 560px) {
  .brain-panel-body { padding-inline: 14px; }
  .brain-scope-grid, .brain-search-form { grid-template-columns: minmax(0,1fr); }
  .brain-admin-grid { grid-template-columns: minmax(0,1fr); }
  .brain-stats { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .brain-area-edit { grid-template-columns: minmax(0,1fr); }
  .brain-page { padding: 14px; }
  .brain-page-head { flex-wrap: wrap; }
  .brain-search-form button { width: 100%; }
}
/* Beside the cards the area navigation needs room of its own; below that it becomes a row
   of chips above them, so the cards keep the whole width. */
@container (max-width: 760px) {
  .brain-knowledge { grid-template-columns: minmax(0,1fr); }
  .brain-page-list { border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 5px; max-height: none; padding-bottom: 10px; position: static; }
  .brain-page-list > .brain-nav-row:not(.area) { background: var(--panel-3); border-color: var(--line); border-radius: 999px; flex: 0 0 auto; min-height: 30px; padding: 5px 11px 5px 9px; width: auto; }
  .brain-page-list > .brain-nav-row:not(.area) .brain-nav-toggle { display: none; }
  .brain-page-list > .brain-nav-row:not(.area).active { background: var(--accent-soft); border-color: rgba(217,255,115,.3); }
  .brain-page-list > .brain-nav-heading { background: var(--panel-3); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; flex: 1 0 100%; font-size: 8.5px; margin: 4px 0 0; min-height: 34px; }
  .brain-page-list > .brain-nav-heading .brain-chevron { display: inline-flex; transform: rotate(90deg); }
  .brain-page-list.areas-open > .brain-nav-heading .brain-chevron { transform: rotate(-90deg); }
  .brain-page-list > .brain-nav-row.area { display: none; flex: 1 0 100%; }
  .brain-page-list.areas-open > .brain-nav-row.area { display: flex; }
}
.users-list { display: grid; gap: 7px; margin-bottom: 14px; }
.users-pane .users-list { margin-bottom: 0; }
.users-pane:not(.editing) .user-form { display: none; }
.users-pane.editing .users-list, .users-pane.editing #user-create-trigger { display: none; }
.users-pane:not(.editing) #user-editor-back { display: none; }
.user-card { align-items: center; background: var(--panel-3); border: 1px solid var(--line); border-radius: 10px; display: flex; gap: 10px; justify-content: space-between; padding: 10px 11px; }
.user-card strong, .user-card span { display: block; }
.user-card span { color: var(--muted); font-size: 9px; }
.user-form { border-top: 1px solid var(--line); display: grid; gap: 9px; grid-template-columns: repeat(2,minmax(0,1fr)); padding-top: 14px; }
.user-form > label { min-width: 0; }
.user-form > label > input:not([type="checkbox"]), .user-form > label > select { width: 100%; }
.user-form .form-error, .user-form .modal-actions { grid-column: 1 / -1; }
.user-form #user-delete { margin-right: auto; }
.user-delete-preview { color: var(--muted); display: grid; font-size: 10px; gap: 6px; line-height: 1.5; margin: 10px 0 12px; }
.user-delete-preview ul { margin: 0; padding-left: 18px; }
.user-delete-preview strong { color: var(--text); }
.user-delete-preview .form-error { margin: 0; }
.user-delete-dialog label > input { width: 100%; }
.modal-head-actions { align-items: center; display: flex; gap: 7px; }
.pool-manager, .claude-pool-manager { background: rgb(var(--veil-light) / .018); border: 1px solid var(--line); border-radius: 14px; margin-top: 0; padding: 16px; }
.pool-manager-head { align-items: center; display: flex; gap: 12px; justify-content: space-between; }
.pool-manager-head strong { display: block; font-size: 13px; }
.pool-manager-head span { color: var(--muted); font-size: 10px; }
.pool-list { display: grid; gap: 7px; margin: 12px 0; }
.pool-card { align-items: center; background: var(--panel-3); border: 1px solid var(--line); border-radius: 10px; display: flex; gap: 10px; justify-content: space-between; padding: 10px 11px; }
.pool-card div { min-width: 0; }
.pool-card strong { display: block; font-size: 11px; }
.pool-card span { color: var(--muted); display: block; font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pool-form { display: grid; gap: 8px; grid-template-columns: minmax(0,1.4fr) minmax(0,1.4fr) 92px 92px auto; }
.pool-form label { min-width: 0; }
.pool-form input, .pool-form select { width: 100%; }
.pool-form button { align-self: end; }
.pool-form .form-error { grid-column: 1 / -1; }
.pool-accounts-field { grid-column: span 1; }
.pool-account-choices { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.pool-account-choice { background: var(--panel-3); border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 9px; max-width: 100%; overflow: hidden; padding: 7px 9px; text-overflow: ellipsis; white-space: nowrap; }
.pool-account-choice.selected { background: var(--accent-soft); border-color: rgba(217,255,115,.28); color: var(--accent); }
.account-switch-banner { align-items: center; background: rgba(255,201,106,.075); border: 1px solid rgba(255,201,106,.22); border-radius: 11px; display: flex; gap: 11px; margin: 0 0 14px; padding: 11px 12px; }
.account-switch-banner.success { background: rgba(156,230,168,.07); border-color: rgba(156,230,168,.22); }
.account-switch-banner.error { background: rgba(255,142,131,.07); border-color: rgba(255,142,131,.22); }
.account-switch-banner.success .activity-spinner, .account-switch-banner.error .activity-spinner { animation: none; border: 0; height: 9px; width: 9px; }
.account-switch-banner.success .activity-spinner { background: var(--ok); }
.account-switch-banner.error .activity-spinner { background: var(--danger); }
.account-switch-banner > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.account-switch-banner strong { font-size: 11px; }
.account-switch-banner span:not(.activity-spinner) { color: var(--muted); font-size: 9px; overflow-wrap: anywhere; }
.account-list { align-items: stretch; display: grid; gap: 10px; grid-template-columns: repeat(3,minmax(0,1fr)); }
.account-empty-note, .account-access-note { background: var(--grey-017); border: 1px solid var(--line); border-radius: 12px; color: var(--muted); font-size: 10px; padding: 13px; }
.account-empty-note, .account-access-note, .account-switch-banner { grid-column: 1 / -1; }
.account-access-note { align-items: center; display: flex; justify-content: space-between; }
.account-access-note strong { color: var(--text); font-size: 11px; }
.account-access-note span { color: var(--warn); font-weight: 700; }
.account-card { align-items: start; align-self: stretch; background: var(--grey-017); border: 1px solid var(--line); border-radius: 13px; display: grid; gap: 9px; grid-template-columns: minmax(0,1fr); height: 100%; padding: 13px 14px; position: relative; }
.account-card:has(.account-profile-details[open]) { grid-column: 1 / -1; height: auto; }
.account-card.active { background: linear-gradient(105deg, rgba(217,255,115,.075), var(--grey-017) 58%); border-color: rgba(217,255,115,.25); }
.account-card.worker-active { border-color: rgba(217,255,115,.48); }
.account-card.project-active { background: linear-gradient(105deg, rgba(217,255,115,.13), var(--grey-017) 65%); border: 2px solid var(--accent); padding: 12px 13px; }
.account-card-main { min-width: 0; }
.account-card-main > strong { display: block; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-name-row { align-items: center; display: flex; gap: 7px; min-width: 0; }
.account-name-row > strong { font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-plan-badge { background: rgba(217,255,115,.1); border: 1px solid rgba(217,255,115,.25); border-radius: 999px; color: var(--accent); flex: 0 0 auto; font-size: 7px; font-weight: 800; letter-spacing: .08em; line-height: 1; padding: 4px 6px 3px; }
.account-reset-badge { background: rgba(255,201,106,.08); border: 1px solid rgba(255,201,106,.22); border-radius: 999px; color: var(--warn); flex: 0 0 auto; font-size: 7px; font-weight: 800; letter-spacing: .05em; line-height: 1; margin-left: auto; padding: 4px 6px 3px; }
.account-expired-badge { background: rgba(255,120,110,.08); border: 1px solid rgba(255,120,110,.3); border-radius: 999px; color: var(--danger, #ff786e); flex: 0 0 auto; font-size: 7px; font-weight: 800; letter-spacing: .05em; line-height: 1; margin-left: auto; padding: 4px 6px 3px; }
.account-card.auth-expired .account-budget-value, .account-card.auth-expired .claude-usage small { color: var(--danger, #ff786e); }
.account-running-badge { background: rgba(217,255,115,.12); border: 1px solid rgba(217,255,115,.34); border-radius: 999px; color: var(--accent); flex: 0 0 auto; font-size: 7px; font-weight: 850; letter-spacing: .07em; line-height: 1; margin-left: auto; padding: 4px 7px 3px; }
.account-card-meta { color: var(--subtle); font-size: 10px; margin-top: 4px; }
.account-profile-details { min-width: 0; }
.account-profile-details:not([open]) > :not(summary) { display: none; }
.account-profile-details > summary { cursor: pointer; list-style: none; min-width: 0; padding-right: 22px; }
.account-profile-details > summary::-webkit-details-marker { display: none; }
.account-profile-details > summary::after { color: var(--muted); content: "+"; font-family: var(--mono); font-size: 12px; position: absolute; right: 12px; top: 10px; }
.account-profile-details[open] > summary::after { content: "−"; }
.account-detail-body { border-top: 1px solid var(--line); display: grid; gap: 12px; grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 12px; padding-top: 12px; }
.account-detail-body.single { grid-template-columns: minmax(0,1fr); }
.account-detail-body > .account-detail-section, .account-detail-body > .account-provider-controls, .account-detail-body > .account-detail-actions, .account-detail-body > .api-provider-editor { align-self: start; background: rgb(var(--veil-light) / .018); border: 1px solid var(--line); border-radius: 11px; margin: 0; min-width: 0; padding: 12px; }
.account-detail-section { margin: 0; }
.account-detail-section > strong { color: var(--muted); display: block; font-family: var(--mono); font-size: 9px; margin-bottom: 7px; }
.account-detail-actions { border-top: 1px solid var(--line); display: flex; gap: 7px; margin-top: 9px; padding-top: 9px; }
.account-detail-actions button { flex: 1 1 0; min-width: 0; white-space: normal; }
.account-budget { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; width: 100%; }
.account-budget-head { align-items: baseline; display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }
.account-budget-value { color: var(--text); font-family: var(--mono); font-size: 13px !important; }
.account-budget-reset { color: var(--muted); font-family: var(--mono); font-size: 12px; font-weight: 650; }
.account-budget-track { background: var(--grey-035); border: 1px solid rgb(var(--veil-light) / .04); border-radius: 999px; display: flex; height: 9px; min-width: 120px; overflow: hidden; width: 100%; }
.account-budget-track span { display: block; flex: 0 0 auto; height: 100%; }
.account-budget-protected { background: repeating-linear-gradient(135deg, rgba(159,200,255,.55) 0 3px, rgba(159,200,255,.25) 3px 6px); }
.account-budget-protected.breached { background: repeating-linear-gradient(135deg, rgba(255,142,131,.6) 0 3px, rgba(255,142,131,.25) 3px 6px); }
.account-budget-pool { background: var(--accent); }
.account-special-resets { align-items: flex-start; background: rgba(255,201,106,.07); border: 1px solid rgba(255,201,106,.2); border-radius: 9px; color: var(--warn); display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; }
.account-special-resets strong { font-size: 10px !important; }
.account-special-resets span { color: var(--muted); font-size: 9px; }
.account-special-reset { align-items: center; display: grid; gap: 8px; grid-template-columns: minmax(0,1fr) auto; width: 100%; }
.account-special-reset button { font-size: 8px; padding: 5px 8px; }
.account-special-reset button:disabled { cursor: not-allowed; opacity: .42; }
.account-provider-controls { display: grid; gap: 9px; }
.account-provider-controls .account-detail-actions { border-top: 0; margin-top: 0; padding-top: 0; }
.account-provider-controls > .account-manual-switch { background: var(--accent-soft); border-color: rgba(217,255,115,.28); color: var(--accent); width: 100%; }
.account-auto-reset { margin: 0; }
.account-credit-mode { display: grid; gap: 4px; margin: 6px 0 0; min-width: 0; }
.account-credit-mode strong { font-size: 12px; }
.account-credit-mode select { max-width: 100%; }
.account-credit-mode small { color: var(--muted); font-size: 11px; line-height: 1.45; }
.account-pool-limits { background: var(--panel-3); border: 1px solid var(--line); border-radius: 10px; display: grid; gap: 7px 8px; grid-template-columns: repeat(2,minmax(0,1fr)); padding: 9px; width: 100%; }
.account-pool-limits label { font-size: 8px; margin: 0; min-width: 0; }
.account-pool-limits label.inactive { opacity: .45; }
.account-pool-limits input { font-family: var(--mono); font-size: 10px; margin-top: 4px; min-width: 0; padding: 7px 8px; }
.account-pool-limits small { color: var(--muted); font-size: 8px; grid-column: 1 / -1; }
.account-pool-limits button { grid-column: 1 / -1; width: 100%; }
.account-card button { background: var(--panel-3); border: 1px solid var(--line); border-radius: 9px; color: var(--text); font-size: 9px; font-weight: 700; padding: 9px 11px; white-space: nowrap; }
.api-account-card.active { border-color: rgba(127,183,255,.52); }
.api-budget { display: grid; gap: 5px; margin-top: 9px; }
.api-budget-head { align-items: baseline; display: flex; gap: 8px; justify-content: space-between; }
.api-budget-head strong { font-family: var(--mono); font-size: 11px !important; }
.api-budget-head span { color: var(--muted); font-family: var(--mono); font-size: 9px; }
.api-budget-track { background: var(--grey-035); border-radius: 999px; display: block; height: 8px; overflow: hidden; }
.api-budget-track > span { background: #7fb7ff; display: block; height: 100%; }
.api-provider-editor { border-top: 1px solid var(--line); display: grid; gap: 7px 8px; grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 9px; padding-top: 9px; }
.api-provider-editor label { font-size: 8px; margin: 0; }
.api-provider-editor input { font-family: var(--mono); font-size: 10px; margin-top: 4px; min-width: 0; padding: 7px 8px; }
.api-provider-editor .setting-check, .api-provider-editor .account-detail-actions { grid-column: 1 / -1; }
.account-card:not(.active) button:hover { border-color: rgba(217,255,115,.3); color: var(--accent); }
.account-card.active button { color: var(--accent); cursor: default; }
.danger-button { background: rgba(255,142,131,.16); border-radius: 9px; color: var(--danger); font-size: 10px; font-weight: 750; padding: 10px 12px; }
.setting-check { align-items: flex-start; background: var(--grey-017); border: 1px solid var(--line); border-radius: 10px; display: flex !important; gap: 10px; padding: 11px; }
.setting-check input { accent-color: var(--accent); margin: 2px 0 0; width: auto; }
.setting-check span { display: flex; flex-direction: column; gap: 3px; }
.setting-check strong { color: var(--text); font-size: 11px; }
.setting-check small { color: var(--subtle); font-size: 9px; font-weight: 400; }
body.embed-mode .app-shell, html.pane-embed .app-shell { display: block; padding: 0; }
html.pane-embed .app-shell { transition: none; }
html.pane-hydrating.pane-embed .chat-workspace { visibility: hidden; }
body.embed-mode .project-panel, body.embed-mode .mobile-bar, body.embed-mode .nav-toggle-button,
html.pane-embed .project-panel, html.pane-embed .mobile-bar, html.pane-embed .nav-toggle-button { display: none !important; }
body.embed-mode .workspace-grid, html.pane-embed .workspace-grid { height: var(--pane-height, 100dvh); }
/* A pane takes its frame's size in the host (public/app.js syncPaneSize): WebKit laid a new frame out 10 % too large. */
html.pane-embed, html.pane-embed body { height: var(--pane-height, 100%); overflow: hidden; width: var(--pane-width, 100%); }
html.pane-embed .app-shell { height: var(--pane-height, 100dvh); max-width: var(--pane-width, 100vw); width: var(--pane-width, auto); }
.modal .user-form { padding: 14px 0 0; }
.new-project-progress { align-items: center; background: rgba(185,167,255,.07); border: 1px solid rgba(185,167,255,.22); border-radius: 11px; display: flex; gap: 11px; margin-top: 14px; padding: 11px 12px; }
.new-project-progress.hidden { display: none; }
.new-project-progress strong { display: block; font-size: 11.5px; }
.new-project-progress small { color: var(--muted); display: block; font-size: 10px; margin-top: 3px; }
.new-project-import { background: var(--grey-017); border: 1px solid var(--line); border-radius: 11px; margin-top: 15px; padding: 12px; }
.new-project-import > strong { display: block; font-size: 11px; }
.new-project-import > strong span, .new-project-import > span { color: var(--subtle); font-size: 9px; font-weight: 400; }
.new-project-import-actions { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 8px; }
.modal .file-picker-button, .sidebar-files .file-picker-button { align-items: center; cursor: pointer; display: inline-flex; font-size: 10px; justify-content: center; margin: 0; padding: 10px 12px; }
.new-project-import .text-button { margin-left: 6px; }
.sidebar-files { display: none; flex: 1; flex-direction: column; min-height: 0; overflow: hidden; }
.files-dialog { max-width: 880px; overflow: hidden; }
.files-dialog > .sidebar-files { display: flex; height: min(820px,90dvh); min-height: 420px; overflow: hidden; padding: 16px 18px 14px; position: relative; }
.files-dialog #files-back { display: none; }
.files-dialog .sidebar-files-head { grid-template-columns: minmax(0,1fr) auto; padding: 0 0 12px; }
/* public/file-browser.js renders into this; its own styles (file-browser.css) come with it. */
.files-browser { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.project-panel.files-mode .nav-list > .nav-create-actions,
.project-panel.files-mode .nav-list > .tree-mode,
.project-panel.files-mode .nav-list > .recent-list,
.project-panel.files-mode .nav-list > .project-list { display: none !important; }
.project-panel.files-mode .nav-list > .sidebar-files { animation: sidebarFilesIn 180ms ease-out; display: flex; }
.sidebar-files-head { align-items: center; display: grid; gap: 8px; grid-template-columns: auto minmax(0,1fr) auto; padding: 3px 2px 12px; }
.sidebar-files-head > div { min-width: 0; }
.sidebar-files-head .eyebrow { font-size: 8px; margin-bottom: 2px; }
.sidebar-files-head h2 { font-size: 13px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-files-head .secondary { font-size: 9px; padding: 8px 9px; }
@keyframes sidebarFilesIn { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: translateX(0); } }
.new-thread-advanced { border-top: 1px solid var(--line); margin-top: 13px; padding-top: 10px; }
.new-thread-advanced > summary { color: var(--muted); cursor: pointer; font-size: 10px; font-weight: 700; list-style-position: inside; padding: 5px 0; }
#new-thread-form > .modal-actions { background: var(--grey-026); bottom: -1px; border-top: 1px solid var(--line); margin-left: -2px; margin-right: -2px; padding: 11px 2px 2px; position: sticky; z-index: 2; }
.approval-modal pre { background: var(--grey-014); border: 1px solid var(--line); border-radius: 10px; color: var(--muted); font-family: var(--mono); font-size: 10px; max-height: 50dvh; overflow: auto; padding: 13px; white-space: pre-wrap; }
.approval-fields { display: grid; gap: 12px; }
.approval-field { background: var(--grey-017); border: 1px solid var(--line); border-radius: 11px; padding: 12px; }
.approval-field strong { display: block; font-size: 12px; margin-bottom: 5px; }
.approval-field p { color: var(--muted); font-size: 11px; line-height: 1.5; margin: 0 0 9px; }
.approval-options { display: grid; gap: 6px; }
.approval-options label { align-items: flex-start; background: var(--panel-2); border-radius: 8px; cursor: pointer; display: flex; gap: 8px; margin: 0; padding: 8px; }
.approval-options input { accent-color: var(--accent); margin: 2px 0 0; width: auto; }
.approval-options span { color: var(--text); font-size: 10px; }
.approval-options small { color: var(--subtle); display: block; margin-top: 2px; }
.toast-stack { align-items: flex-end; bottom: auto; display: flex; flex-direction: column; gap: 7px; max-width: 380px; pointer-events: none; position: fixed; right: 24px; top: 24px; z-index: 400; }
.toast { animation: toastIn 180ms ease; background: var(--grey-035); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 10px 35px rgba(0,0,0,.38); color: var(--text); font-size: 11px; line-height: 1.45; padding: 11px 13px; }
.toast.error { border-color: rgba(255, 142, 131, 0.35); color: #ffc2bc; }

.skeleton { animation: shimmer 1.3s infinite; background: linear-gradient(90deg, var(--panel-2), var(--panel-3), var(--panel-2)); background-size: 200% 100%; border-radius: 8px; height: 52px; margin: 4px 0; }

@media (max-width: 620px) {
  #project-settings-dialog, .account-dialog, .files-dialog { border-radius: 0; height: 100dvh; inset: 0; margin: 0; max-height: 100dvh; max-width: none; overflow-x: hidden; width: 100vw; }
  #project-settings-dialog > section, .account-dialog > section { max-width: 100%; overflow-x: hidden; padding: 16px 14px; width: 100%; }
  .files-dialog > .sidebar-files { height: 100dvh; max-width: 100%; min-height: 0; padding: max(16px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom)); width: 100%; }
  .modal-head { gap: 12px; }
  .modal-head > div:first-child, .project-worker-head > div:first-child { min-width: 0; }
  .modal-head h2, .project-worker-head strong, .project-worker-head span { overflow-wrap: anywhere; }
  .project-appearance, .project-extension-card, .project-danger-zone { max-width: 100%; min-width: 0; overflow: hidden; width: 100%; }
  .project-worker-head { gap: 10px; }
  .project-worker-head > button { flex: 0 0 auto; }
  .permission-grid { grid-template-columns: minmax(0,1fr); }
  .modal .setting-check { min-height: 46px; padding: 10px 11px; }
  .modal .user-form { padding: 14px 0 0; }
}

@keyframes pulse { 50% { opacity: 0.4; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes orbit { to { transform: rotate(360deg) translateX(25px); } }
@keyframes recordPulse { 50% { box-shadow: 0 0 0 6px rgba(255,142,131,0.08); } }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes thinkingText { 50% { opacity: .48; } }

@media (min-width: 861px) {
  .header-actions .mobile-brain-button { align-items: center; background: var(--accent-soft); border: 1px solid rgba(217,255,115,.24); border-radius: 9px; color: var(--accent); display: flex; font-size: 11px; font-weight: 850; height: 36px; justify-content: center; min-height: 36px; min-width: 36px; padding: 0; width: 36px; }
  .header-actions .mobile-brain-button:hover { background: rgba(217,255,115,.15); border-color: rgba(217,255,115,.4); }
  .control-strip { display: none !important; }
  .header-actions #document-open { background: rgb(var(--veil-light) / .055); border: 1px solid var(--line-strong); border-radius: 11px; color: var(--text); font-size: 11px; min-height: 40px; padding: 9px 12px; }
  .header-actions #document-open:hover { background: rgb(var(--veil-light) / .09); border-color: rgba(217,255,115,.26); }
  .header-actions #document-open .document-glyph { height: 19px; width: 18px; }
  body.embed-desktop .chat-workspace { position: relative; }
}

@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 300px minmax(0, 1fr); }
  .header-button { font-size: 0; }
  .header-button.goal-active { font-size: 9px; }
  .header-button span { font-size: 14px; }
  .control-strip { gap: 9px; }
}

@media (max-width: 860px) {
  html, body { max-width: 100vw; overflow-x: hidden; }
  .mobile-bar { align-items: center; background: var(--grey-017); border-bottom: 1px solid var(--line); display: flex; gap: 6px; height: 52px; justify-content: space-between; padding: 0 8px; position: fixed; top: 0; transform: translate3d(0,0,0); transition: transform 220ms cubic-bezier(.22,1,.36,1); width: 100%; will-change: transform; z-index: 80; }
  .toast-stack { max-width: calc(100vw - 16px); right: 8px; top: 100px; }
  .toast { max-width: 100%; }
  .mobile-chat-controls { align-items: center; display: flex; flex: 1; gap: 4px; justify-content: flex-end; min-width: 0; }
  .mobile-chat-fallback { color: var(--text); display: none; flex: 1; font-size: 12px; font-weight: 750; text-align: center; }
  .mobile-chat-controls.no-thread .mobile-chat-fallback { display: block; }
  .mobile-chat-controls.no-thread .mobile-thread-settings, .mobile-chat-controls.no-thread .header-actions { display: none; }
  /* Left the chat's name in Cora's heading type, the whole width it can have; model and thinking small beneath it. */
  .mobile-chat-title { display: none; }
  .mobile-chat-controls:not(.no-thread) { column-gap: 4px; display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: 1px; }
  .mobile-chat-project { display: none; }
  /* Model and thinking live in the composer's pill now: the top bar's second line names only the project. */
  .mobile-chat-controls:not(.no-thread) .mobile-thread-settings { display: none !important; }
  .mobile-chat-controls:not(.no-thread) .mobile-chat-project:not(:empty) { color: var(--accent); display: block; font-size: 10px; font-weight: 700; grid-column: 1 / 3; grid-row: 2; line-height: 1.25; max-width: 100%; overflow: hidden; padding-left: 6px; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-chat-controls:not(.no-thread) .mobile-chat-title { color: var(--text); display: block; font-family: var(--font); font-size: 15.5px; font-weight: 750; grid-column: 1 / 3; grid-row: 1; letter-spacing: -.02em; line-height: 1.2; min-width: 0; overflow: hidden; padding: 0 4px 0 6px; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-chat-controls:not(.no-thread) .header-actions { grid-column: 3; grid-row: 1 / 3; }
  .mobile-bar .mobile-thread-settings { background: transparent; border: 0; border-radius: 6px; gap: 4px; grid-column: 2; grid-row: 2; justify-content: flex-start; justify-self: start; max-width: 100%; min-height: 0; min-width: 0; padding: 0 4px 0 6px; width: auto; }
  .mobile-bar .mobile-thread-settings:active { background: rgb(var(--veil-light) / .06); }
  .mobile-bar .mobile-thread-provider-logo { height: 10px; opacity: .75; width: 10px; }
  .mobile-bar .mobile-thread-settings-copy { gap: 4px; max-width: 100%; overflow: hidden; }
  .mobile-bar .mobile-thread-settings-copy strong { color: var(--muted); font-size: 10px; font-weight: 600; line-height: 1.25; min-width: 0; }
  .mobile-bar .mobile-thread-settings-copy small { flex: 0 0 auto; font-size: 8.5px; }
  .mobile-bar .header-actions { align-self: center; flex: 0 0 auto; grid-area: auto; justify-self: auto; margin: 0; position: relative; z-index: 1; }
  .mobile-bar > #mobile-projects { background: rgb(var(--veil-light) / .045); border: 1px solid var(--line); border-radius: 11px; color: var(--text); flex: 0 0 auto; height: 40px; min-height: 40px; min-width: 40px; width: 40px; }
  .mobile-brain-button { align-items: center; background: var(--accent-soft); border: 1px solid rgba(217,255,115,.28); border-radius: 11px; color: var(--accent); display: flex; flex: 0 0 auto; font-size: 11px; font-weight: 850; height: 40px; justify-content: center; min-height: 40px; min-width: 40px; padding: 0; width: 40px; }
  .mobile-brain-button:active { background: rgba(217,255,115,.17); }
  .brand-dot { background: var(--accent); border-radius: 50%; height: 7px; width: 7px; }
  .mobile-only { display: inline-flex; }
  .app-shell { display: block; padding-top: 0; }
  body.nav-collapsed .app-shell { display: block; }
  body.nav-collapsed .project-panel { opacity: 1; pointer-events: auto; }
  .project-panel { bottom: 0; box-shadow: 18px 0 60px rgba(0,0,0,.58); max-width: calc(100vw - 24px); position: fixed; top: var(--mobile-host-chrome-height); transform: translateX(-105%); transition: transform 180ms ease; width: 372px; z-index: 50; }
  body.booting .project-panel { transition: none !important; visibility: hidden !important; }
  .project-panel.open { transform: translateX(0); }
  .project-tree-head { grid-template-columns: minmax(0,1fr) repeat(3,34px); }
  .project-actions-trigger, .project-files-trigger, .project-new-chat { height: 42px; min-height: 42px; min-width: 34px; width: 34px; }
  .chat-panel { height: 100%; }
  .workspace-grid { grid-auto-columns: minmax(0,1fr); grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr); height: 100dvh; max-width: 100vw; position: relative; width: 100%; }
  .workspace-grid.multi { display: grid; grid-auto-columns: minmax(0,1fr); grid-auto-flow: row; grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr); max-width: 100vw; overflow: hidden; }
  .workspace-grid, .workspace-grid.multi { overflow: clip; }
  .workspace-grid > .workspace-tabs { display: flex; left: 0; position: absolute; right: 0; top: 52px; z-index: 70; }
  .workspace-grid > .chat-panel, .workspace-grid > .chat-pane, .workspace-grid > .brain-workspace-panel { grid-column: 1; grid-row: 1; }
  .workspace-grid.multi > .chat-panel, .workspace-grid.multi > .chat-pane, .workspace-grid.multi > .brain-workspace-panel {
    display: block;
    grid-column: 1;
    grid-row: 1;
    height: 100%;
    max-width: 100%;
    min-height: 0;
    pointer-events: none;
    visibility: hidden;
    width: 100%;
  }
  .chat-pane { border-left: 0; min-height: 0; }
  .chat-pane iframe { max-width: 100%; min-width: 0; }
  .workspace-grid.multi > .mobile-pane-active { pointer-events: auto; visibility: visible; z-index: 1; }
  /* The chat preview over the panes shows on every narrow screen, an upright tablet too (not only phones). */
  .workspace-grid.multi > .chat-pane.overlay-pane { pointer-events: auto; visibility: visible; }
  .workspace-grid.multi > .brain-workspace-panel, .brain-workspace-panel { display: flex; flex-direction: column; height: 100%; max-width: 100%; overscroll-behavior: none; padding-top: var(--mobile-host-chrome-height); width: 100%; }
  .brain-panel-header { cursor: default; min-height: 62px; padding: 9px 14px; }
  .brain-panel-header .panel-close { height: 40px; width: 40px; }
  .brain-panel-body { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 14px 12px max(20px,env(safe-area-inset-bottom)); }
  body.brain-pane-active #mobile-chat-controls > :not(.mobile-chat-fallback) { display: none !important; }
  body.brain-pane-active #mobile-chat-controls .mobile-chat-fallback { display: inline-flex; }
  body.brain-pane-active > .brain-workspace-panel { border: 0; display: flex !important; height: 100dvh; inset: 0; max-height: 100dvh; max-width: 100vw; min-height: 100dvh; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); pointer-events: auto !important; position: fixed; visibility: visible !important; width: 100vw; z-index: 500; }
  .workspace-grid > .pane-loading::before { align-items: center; background: var(--bg); color: var(--muted); content: "Chat wird geladen …"; display: flex; font-family: var(--mono); font-size: 11px; inset: 0; justify-content: center; padding-top: 42px; position: absolute; z-index: 30; }
  .workspace-grid > .pane-loading::after { animation: spin 900ms linear infinite; border: 2px solid var(--line-strong); border-right-color: var(--accent); border-radius: 50%; content: ""; height: 18px; left: calc(50% - 9px); position: absolute; top: calc(50% - 22px); width: 18px; z-index: 31; }
  .workspace-grid > .pane-loading > iframe { visibility: hidden; }
  .workspace-tabs { -webkit-touch-callout: none; -webkit-user-select: none; align-items: center; background: var(--grey-017); border-bottom: 1px solid var(--line); gap: 4px; min-width: 0; overflow-x: auto; padding: 5px 7px; transform: translate3d(0,0,0); transition: transform 220ms cubic-bezier(.22,1,.36,1), opacity 150ms ease; user-select: none; will-change: transform; }
  body:not(.embed-mode).mobile-header-hidden .mobile-bar { transform: translate3d(0,-100%,0); }
  body:not(.embed-mode).mobile-header-hidden .workspace-tabs { opacity: 0; pointer-events: none; transform: translate3d(0,calc(-100% - 52px),0); }
  body:not(.embed-mode) .mobile-send-proxy.active { background: transparent; border: 0; display: block; margin: 0; opacity: .001; padding: 0; position: fixed; touch-action: manipulation; z-index: 200; }
  body:not(.embed-mode) .host-composer-input:not(.hidden) { -webkit-appearance: none; -webkit-tap-highlight-color: transparent; appearance: none; background: transparent; border: 0; border-radius: 0; box-sizing: border-box; caret-color: var(--text); display: block; margin: 0; outline: 0; overflow-x: hidden; overflow-wrap: anywhere; overflow-y: auto; position: fixed; resize: none; white-space: pre-wrap; z-index: 40; }
  /* Over the preview's chat (z-index 185) while it is the chat in front. */
  body.preview-open:not(.embed-mode) .host-composer-input:not(.hidden) { z-index: 186; }
  body:has(.project-panel.open) .host-composer-input, body.brain-pane-active .host-composer-input, body.preview-dragging .host-composer-input { display: none !important; }
  .workspace-tab { -webkit-touch-callout: none; -webkit-user-select: none; background: var(--panel-2); border: 1px solid transparent; border-radius: 8px; color: var(--muted); flex: 0 0 auto; font-size: 9px; max-width: 160px; overflow: hidden; padding: 7px 10px; position: relative; text-overflow: ellipsis; user-select: none; white-space: nowrap; }
  .workspace-tab.tab-dragging { opacity: .42; }
  .workspace-tab.tab-drop-before::before, .workspace-tab.tab-drop-after::before { background: var(--accent); border-radius: 2px; content: ""; height: calc(100% - 8px); position: absolute; top: 4px; width: 2px; }
  .workspace-tab.tab-drop-before::before { left: 0; }
  .workspace-tab.tab-drop-after::before { right: 0; }
  .workspace-tab.active { background: linear-gradient(180deg, rgba(185,167,255,.17), rgba(185,167,255,.075)); border-color: rgba(185,167,255,.5); box-shadow: inset 0 -2px 0 var(--violet), 0 0 0 1px rgba(185,167,255,.08); color: var(--text); font-weight: 760; }
  .workspace-tab.unread { border-color: rgba(255,201,106,.42); box-shadow: inset 3px 0 0 var(--warn); color: var(--text); }
  .workspace-tab.active.unread { border-color: rgba(185,167,255,.5); box-shadow: inset 3px 0 0 var(--warn), inset 0 -2px 0 var(--violet), 0 0 0 1px rgba(185,167,255,.08); }
  /* A running tab: a pulsing dot in its project's colour before the name, as in the tree (Chris, 06.10.2026); no
     spinner. */
  .workspace-tab-dot { background: var(--row-accent, var(--accent)); border-radius: 50%; display: inline-block; height: 6px; margin-right: 5px; vertical-align: 1px; width: 6px; }
  .workspace-tab.loading { color: var(--text); opacity: .72; }
  .workspace-tab.loading::after { animation: spin 1s linear infinite; border: 1px solid var(--line-strong); border-right-color: var(--accent); border-radius: 50%; content: ""; height: 8px; margin-left: 7px; position: static; width: 8px; }
  body.embed-mode .chat-panel, body.embed-mode .workspace-grid,
  html.pane-embed .chat-panel, html.pane-embed .workspace-grid { height: var(--pane-height, 100dvh); }
  body.embed-mode .app-shell, html.pane-embed .app-shell { padding-top: 0; }
  .chat-workspace { grid-template-areas: "controls" "activity" "handover" "goal" "history" "notice" "thinking" "context" "composer"; grid-template-rows: auto auto auto auto minmax(0,1fr) auto auto auto auto; }
  .chat-header { display: contents; }
  .chat-identity { display: none; }
  body:not(.embed-mode) .control-strip { display: none; }
  body.embed-mode:not(.preview-mode) .chat-workspace { position: relative; }
  body.embed-mobile:not(.preview-mode) .chat-workspace { padding-top: var(--mobile-host-chrome-height); }
  body.embed-mobile.host-header-hidden:not(.preview-mode) .chat-workspace { padding-top: 0; }
  body.embed-mode:not(.preview-mode) .control-strip { background: transparent; border: 0; height: 0; min-height: 0; overflow: visible; padding: 0; }
  body.embed-mode:not(.preview-mode) .mobile-thread-settings { display: none; }
  body.embed-mode:not(.preview-mode) .header-actions { display: none; }
  .nav-toggle-button { display: none; }
  .header-actions { align-self: center; gap: 1px; grid-area: controls; justify-self: end; margin-right: 7px; z-index: 8; }
  .header-actions .header-button, .header-actions .icon-button { height: 36px; min-height: 36px; min-width: 36px; padding: 0; width: 36px; }
  .header-actions .header-button { gap: 0; justify-content: center; }
  .header-actions .header-button, .header-actions .header-button.goal-active { font-size: 0; }
  .header-actions .icon-button { font-size: 16px; }
  .header-actions .panel-close { font-size: 20px; }
  .header-actions .header-button span { font-size: 13px; }
  .mobile-bar .header-actions { gap: 1px; }
  .mobile-bar .header-actions #document-open { background: rgb(var(--veil-light) / .04); border: 1px solid var(--line); border-radius: 10px; color: var(--text); height: 38px; min-height: 38px; min-width: 38px; width: 38px; }
  .mobile-bar .header-actions #document-open .document-glyph { height: 18px; width: 17px; }
  .mobile-bar .header-actions #more-toggle,
  .mobile-bar .header-actions #panel-close { background: transparent; border: 1px solid transparent; border-radius: 9px; color: var(--muted); height: 36px; min-height: 36px; min-width: 36px; width: 36px; }
  /* „…“ is the phone's main menu (documents, Brain, Macs, website, tables): the projects' gear, plain beside the ×. */
  .mobile-bar .header-actions #more-toggle { align-items: center; display: inline-flex; font-size: 0; justify-content: center; }
  .mobile-bar .header-actions #more-toggle::before { background: currentColor; content: ""; height: 19px; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E") center / contain no-repeat; width: 19px; }
  .mobile-bar .header-actions #more-toggle { letter-spacing: 0; padding: 0; }
  .mobile-bar .header-actions #more-toggle::before { flex: none; }
  .mobile-bar .header-actions #more-toggle:active { background: rgb(var(--veil-light) / .06); }
  html[data-theme="light"] .mobile-bar .header-actions #more-toggle:active { background: rgba(0,0,0,.05); }
  .mobile-bar .header-actions #panel-close { font-size: 22px; }
  .header-actions .popover { right: 36px; top: 34px; }
  .control-strip { align-items: center; min-height: 42px; overflow: visible; padding: 4px 118px 4px 9px; }
  .control-strip > label { display: none; }
  .mobile-thread-settings { align-items: center; background: rgba(178,158,255,.075); border: 1px solid rgba(190,174,255,.15); border-radius: 999px; color: #bbb0dc; display: flex; font-family: var(--mono); font-size: 10.5px; font-weight: 650; gap: 5px; justify-content: flex-start; max-width: 154px; min-height: 34px; overflow: hidden; padding: 4px 11px; text-align: left; width: 100%; }
  .mobile-thread-provider-logo { flex: 0 0 auto; height: 15px; object-fit: contain; width: 15px; }
  .mobile-thread-settings span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .context-strip { background: transparent; border: 0; display: block; height: 2px; min-height: 2px; padding: 0 10px; }
  .context-copy { display: none; }
  .context-track { height: 2px; max-width: none; width: 100%; }
  .context-handover { display: none; }
  .activity-banner { padding-left: 10px; padding-right: 10px; }
  .history-scroll { padding: 10px 14px 24px; }
  .usage-limit-notice { margin: 0 10px 6px; max-width: calc(100% - 20px); }
  .live-thinking-slot { padding: 0 10px 6px; }
  body.embed-mobile .activity-banner:not(.hidden) { border: 1px solid rgba(185,167,255,.2); border-radius: 11px; left: 8px; position: absolute; right: 8px; top: 89px; transform: translate3d(0,0,0); transition: transform 220ms cubic-bezier(.22,1,.36,1); z-index: 16; }
  body.embed-mobile.host-header-hidden .activity-banner:not(.hidden) { transform: translate3d(0,-81px,0); }
  /* It floats over the messages on phones: its tint lies on the panel colour, so no text shows through. */
  body.embed-mobile .activity-banner:not(.hidden) { background-color: var(--panel); }
  body.embed-mobile .activity-banner.queued:not(.hidden) { background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--panel); }
  body.embed-mobile .activity-banner.worker-switching:not(.hidden) { background: linear-gradient(rgba(255,201,106,.08), rgba(255,201,106,.08)), var(--panel); }
  body.embed-mobile .chat-bottom-stack { bottom: 0; display: flex; flex-direction: column; gap: 4px; left: 0; pointer-events: none; position: absolute; right: 0; z-index: 10; }
  body.embed-mobile .chat-bottom-stack > * { pointer-events: auto; }
  body.embed-mobile .usage-limit-notice { margin: 0 10px; max-width: calc(100% - 20px); }
  body.embed-mobile .live-thinking-slot { background: transparent; padding-bottom: 0; }
  body.embed-mobile .context-strip { margin-bottom: -4px; }
  body.embed-mobile .composer-wrap { position: relative; z-index: 12; }
  body.embed-mobile .jump-to-live { bottom: calc(var(--bottom-overlay-height, 70px) + 8px); margin: 0; position: absolute; right: 14px; z-index: 13; }
  body.embed-mobile #live-anchor { height: calc(var(--bottom-overlay-height, 70px) + 8px); pointer-events: none; }
  .composer-wrap { padding: 0 7px max(7px, env(safe-area-inset-bottom)); }
  body.embed-mode.keyboard-open .workspace-grid,
  body.embed-mode.keyboard-open .chat-panel { height: calc(var(--pane-height, 100dvh) - var(--cora-keyboard-inset, 0px)); }
  body.embed-mode.keyboard-open .composer-wrap { background: var(--bg); position: relative; transform: none; z-index: 12; }
  body.embed-mode.keyboard-open .composer-wrap::after { background: var(--bg); content: ""; height: 100dvh; left: 0; pointer-events: auto; position: absolute; right: 0; top: 100%; }
  body.ios-standalone .composer-wrap { transform: translateY(5px); }
  body.ios-standalone:not(.keyboard-open) .composer-wrap:not(.composer-wrap-compact) { transform: translateY(max(5px, calc(env(safe-area-inset-bottom) - 14px))); }
  /* Centered in the phone's flex column (align-self) and in a narrow desktop pane's grid (justify-self: the web app on the
     Mac stood left there). */
  body.ios-standalone:not(.keyboard-open) .composer-wrap.composer-wrap-compact { align-self: center; justify-self: center; background: transparent; margin: 0 0 6px; max-width: calc(100% - 48px); padding: 0; position: relative; transform: none; width: max-content; z-index: 12; }
  .composer { border-radius: 13px; padding: 7px 8px 6px; }
  .composer.composer-idle { align-items: center; border-radius: 999px; column-gap: 7px; display: grid; grid-template-columns: 40px 40px minmax(72px,1fr) auto; max-width: calc(100vw - 48px); overflow: hidden; padding: 7px 9px; width: min(328px,calc(100vw - 48px)); }
  .composer.composer-idle.composer-stop-visible { grid-template-columns: 40px 40px minmax(60px,1fr) auto 40px; width: min(376px,calc(100vw - 48px)); }
  .composer.composer-idle > textarea { display: none; }
  .composer.composer-idle > .composer-toolbar, .composer.composer-idle .composer-tools, .composer.composer-idle .composer-actions { display: contents; }
  .composer.composer-idle #attach-button { border-radius: 50%; grid-column: 1; grid-row: 1; height: 40px; width: 40px; }
  .composer.composer-idle #voice-live { border-radius: 50%; grid-column: 2; grid-row: 1; height: 40px; justify-content: center; padding: 0; width: 40px; }
  /* Recording in the folded composer: „Senden“ takes the place of „Nachricht“, right of „Stopp“, as round. */
  .composer.composer-idle.dictating #voice-send { border-radius: 50%; display: inline-flex; grid-column: 3; grid-row: 1; height: 40px; justify-self: start; padding: 0; width: 40px; }
  .composer.composer-idle.dictating .compact-composer-open { display: none; }
  .composer.composer-idle #voice-live .voice-label, .composer.composer-idle #steer-label, .composer.composer-idle #composer-hint, .composer.composer-idle #send-message { display: none; }
  .composer.composer-idle .compact-composer-open { align-items: center; background: rgb(var(--veil-light) / .035); border-radius: 999px; color: var(--muted); display: flex; grid-column: 3; grid-row: 1; height: 40px; justify-content: center; min-width: 108px; padding: 0 14px; }
  /* „Nachricht“ shrinks to its column, so it never runs under the model's pill. */
  .composer.composer-idle .compact-composer-open { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* While a chat runs its stop button stands right of the model's pill. */
  .composer.composer-idle #stop-turn { border-radius: 50%; grid-column: 5; grid-row: 1; height: 40px; width: 40px; }
  /* Folded: the model's pill in a row, the logo left, the model, the goal's play or pause right. */
  .composer.composer-idle #composer-model { align-self: stretch; grid-column: 4; grid-row: 1; margin: 0; max-width: 140px; }
  .composer.composer-idle #composer-model small { max-width: 76px; }
/* Shared theme and controls are in ui-base.css; layout and chat-specific rules remain here. */
  body.embed-desktop .chat-workspace {
    grid-template-areas: "header" "controls" "context" "activity" "handover" "goal" "history" "notice" "thinking" "composer";
    grid-template-rows: auto auto auto auto auto auto minmax(0,1fr) auto auto auto;
  }
  body.embed-desktop .chat-header { display: flex; min-height: 70px; padding: 11px 25px; }
  body.embed-desktop .chat-identity { display: flex; }
  body.embed-desktop .header-actions { align-items: center; display: flex !important; gap: 5px; grid-area: auto; justify-self: auto; margin-right: 0; position: relative; z-index: auto; }
  body.embed-desktop .header-actions .header-button { font-size: 11px; height: auto; min-height: 0; min-width: 0; padding: 8px 10px; width: auto; }
  body.embed-desktop .header-actions .icon-button { font-size: 16px; height: 32px; min-height: 0; min-width: 0; padding: 0; width: 32px; }
  body.embed-desktop .header-actions .header-button span { font-size: 14px; }
  body.embed-desktop .header-actions .popover { right: 36px; top: 38px; }
  body.embed-mode.embed-desktop:not(.preview-mode) .control-strip { align-items: end; background: rgb(var(--veil-dark) / .76); border: 0; border-bottom: 1px solid var(--line); display: flex; gap: 13px; height: auto; min-height: 0; overflow-x: auto; padding: 8px 25px; }
  body.embed-desktop .control-strip > label { display: flex; }
  body.embed-desktop .mobile-thread-settings { display: none; }
  body.embed-desktop .context-strip { align-items: center; background: var(--grey-017); border-bottom: 1px solid var(--line); border-top: 0; display: grid; gap: 14px; grid-template-columns: auto minmax(100px,1fr); height: auto; min-height: 0; padding: 7px 25px; }
  body.embed-desktop .context-copy { display: flex; }
  body.embed-desktop .context-copy span { display: inline; }
  body.embed-desktop .context-track { height: 4px; max-width: none; width: auto; }
  body.embed-desktop .chat-workspace.composer-input-active .context-strip { display: grid; }
  body.embed-desktop .history-scroll { padding: 22px clamp(18px,5vw,74px) 40px; }
  body.embed-desktop .usage-limit-notice { margin: 0 clamp(18px,5vw,74px) 7px; max-width: calc(100% - 36px); }
  body.embed-desktop .live-thinking-slot { padding: 0 clamp(18px,5vw,74px) 4px; }
  body.embed-desktop .composer-wrap { padding: 0 clamp(18px,5vw,74px) max(17px,env(safe-area-inset-bottom)); }
  body.keyboard-open .composer-wrap { padding-bottom: 7px; }
  body.embed-desktop .composer { border-radius: 16px; padding: 11px 12px 9px; }
  body.embed-desktop .composer.composer-idle textarea { height: auto !important; min-height: 28px; padding: 3px 4px 9px; }
  body.embed-desktop .composer.composer-idle .composer-tools > .tool-button { display: inline-flex; }
  body.embed-desktop .composer.composer-idle .composer-tools > .steer-toggle:not(.hidden) { display: flex; }
  body.embed-desktop .composer.composer-idle #composer-hint { display: inline; }
  body.embed-desktop .composer.composer-idle .send-button,
  body.embed-desktop .composer.composer-idle .stop-button { height: 31px; width: 31px; }
}

/* A narrow desktop pane keeps its identity. Only action labels collapse; the
   true mobile header remains exclusive to the mobile workspace with tabs. */
@media (max-width: 620px) {
  body.embed-mode.embed-desktop .chat-header { display: flex; gap: 6px; min-height: 58px; padding: 8px 9px 8px 13px; }
  body.embed-mode.embed-desktop .chat-identity { display: flex; flex: 1; min-width: 0; overflow: hidden; }
  body.embed-mode.embed-desktop .title-row h1 { font-size: 16px; max-width: 100%; }
  body.embed-mode.embed-desktop .thread-project-badge { max-width: min(36vw,180px); }
  body.embed-mode.embed-desktop .header-actions { flex: 0 0 auto; gap: 1px; }
  body.embed-mode.embed-desktop .header-actions .header-button,
  body.embed-mode.embed-desktop .header-actions .icon-button {
    height: 31px;
    min-height: 31px;
    min-width: 31px;
    padding: 0;
    width: 31px;
  }
  body.embed-mode.embed-desktop .header-actions .header-button,
  body.embed-mode.embed-desktop .header-actions .header-button.goal-active { font-size: 0; gap: 0; justify-content: center; }
  body.embed-mode.embed-desktop .header-actions .header-button span { font-size: 13px; }
  body.embed-mode.embed-desktop .header-actions .icon-button { font-size: 15px; }
  body.embed-mode.embed-desktop .header-actions .panel-close { font-size: 19px; }
  body.embed-mode.embed-desktop .header-actions .popover { right: 32px; top: 33px; }
}

@media (max-width: 460px) {
  body.embed-mode.embed-desktop:not(.preview-mode) .control-strip {
    align-items: center;
    background: rgb(var(--veil-dark) / .76);
    border: 0;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 0;
    height: auto;
    min-height: 36px;
    overflow: visible;
    padding: 3px 9px;
  }
  body.embed-mode.embed-desktop .control-strip > label { display: none; }
  body.embed-mode.embed-desktop:not(.preview-mode) .mobile-thread-settings {
    align-items: center;
    background: transparent;
    color: var(--muted);
    display: flex;
    flex: 1;
    font-family: var(--mono);
    font-size: 9px;
    gap: 5px;
    justify-content: space-between;
    max-width: 100%;
    min-height: 28px;
    min-width: 0;
    overflow: hidden;
    padding: 2px 5px;
    text-align: left;
    width: 100%;
  }
  body.embed-mode.embed-desktop .context-strip {
    align-items: center;
    background: var(--grey-017);
    border-bottom: 1px solid var(--line);
    border-top: 0;
    display: grid;
    gap: 8px;
    grid-template-columns: auto minmax(60px,1fr);
    min-height: 25px;
    padding: 4px 10px;
  }
  body.embed-mode.embed-desktop .context-copy { display: flex; min-width: 0; }
  body.embed-mode.embed-desktop .context-copy span { display: none; }
  body.embed-mode.embed-desktop .context-copy strong { font-size: 8px; white-space: nowrap; }
  body.embed-mode.embed-desktop .context-track { height: 3px; max-width: none; width: auto; }
}

@media (max-width: 520px) {
  .chat-preview-overlay { padding: 0; }
  .chat-preview-shell { border: 0; border-radius: 0; max-width: none; width: 100vw; }
  .workspace-grid > .chat-pane.overlay-pane { border-radius: 0; }
  .workspace-grid.multi > .chat-pane.overlay-pane { pointer-events: auto; visibility: visible; }
  .login-card { padding: 30px 23px; }
  .password-row { grid-template-columns: 1fr; }
  .item.userMessage .message { max-width: 92%; }
  .message-media { grid-template-columns: minmax(0, 1fr); }
  .modal form { padding: 19px; }
  #new-thread-dialog { max-height: calc(100dvh - 22px); width: calc(100% - 20px); }
  #new-thread-dialog .modal-head { margin-bottom: 12px; }
  #new-thread-dialog .modal-head h2 { font-size: 22px; }
  #new-thread-dialog label { margin: 8px 0; }
  #new-thread-dialog textarea { max-height: 104px; }
  .modal-grid { grid-template-columns: 1fr; }
  .api-provider-form { grid-template-columns: minmax(0,1fr); }
  .api-provider-form > * { grid-column: 1 !important; }
  .account-list { gap: 7px; grid-template-columns: minmax(0,1fr); }
  .account-card { align-items: stretch; padding: 9px; }
  .account-card.project-active { padding: 8px; }
  .account-card-main > strong { font-size: 10px; }
  .account-name-row > strong { font-size: 10px; }
  .account-card-meta { font-size: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .account-budget { gap: 5px; margin-top: 8px; }
  .account-budget-head { gap: 3px; }
  .account-budget-value { font-size: 10px !important; }
  .account-budget-reset { font-size: 9px; }
  .account-budget-track { height: 7px; min-width: 0; width: 100%; }
  .account-profile-details > summary::after { font-size: 10px; right: 8px; top: 7px; }
  .account-detail-actions { flex-direction: column; }
  .account-card button { width: 100%; }
  .modal-actions.split { align-items: stretch; flex-direction: column-reverse; }
  .modal-actions.split button { width: 100%; }
  #composer-hint { display: none; }
  .steer-toggle span { display: none; }
}

/* Desktop panes can be narrow columns; their chrome follows pane mode, not iframe width. */
body.embed-desktop .control-strip { display: none !important; }
body.embed-desktop .header-actions #document-open { background: rgb(var(--veil-light) / .055); border: 1px solid var(--line-strong); border-radius: 11px; color: var(--text); font-size: 11px; min-height: 40px; padding: 9px 12px; }
body.embed-desktop .header-actions #document-open:hover { background: rgb(var(--veil-light) / .09); border-color: rgba(217,255,115,.26); }
body.embed-desktop .header-actions #document-open .document-glyph { height: 19px; width: 18px; }
/* No model line under a wide pane's title: the model and the goal's state are in the composer's pill (Chris, 06.10.2026). */
body.embed-desktop .thread-meta .mobile-thread-settings { display: none !important; }
body.embed-desktop .chat-workspace { position: relative; }

@media (max-width: 620px) {
  .account-detail-body { grid-template-columns: minmax(0,1fr); }
  body.embed-desktop .thread-meta { gap: 7px; max-width: 100%; min-width: 0; }
  body.embed-desktop .thread-meta .mobile-thread-settings { flex: 1 1 auto; max-width: none; }
  body.embed-desktop .thread-meta .mobile-thread-settings-copy { max-width: 100%; overflow: hidden; }
  body.embed-desktop .header-actions #document-open { font-size: 0; height: 40px; min-height: 40px; min-width: 40px; padding: 0; width: 40px; }
}

@media (max-height: 680px) and (min-width: 861px) {
  .chat-header { min-height: 58px; padding-bottom: 7px; padding-top: 7px; }
  .control-strip { padding-bottom: 5px; padding-top: 5px; }
  .context-strip { padding-bottom: 5px; padding-top: 5px; }
  .history-scroll { padding-bottom: 20px; padding-top: 12px; }
  .composer-wrap { padding-bottom: 8px; }
}

@media (pointer: coarse) {
  .icon-button, .tool-button { min-height: 40px; min-width: 40px; }
  .thread-item { min-height: 36px; }
  .thread-split { min-height: 40px; min-width: 36px; opacity: .72; }
  .thread-row-actions .thread-split, .thread-row-actions .thread-pin { min-height: 30px; min-width: 28px; opacity: .72; }
  .project-actions-trigger { min-height: 40px; min-width: 36px; opacity: .72; }
  .send-button, .stop-button { height: 40px; width: 40px; }
  /* As large as the answers: the viewport's maximum-scale=1 keeps iOS from zooming into smaller fields anyway. */
  .composer textarea { font-size: 14px; }
}
.provider-kind-heading { color: var(--muted); font-family: var(--mono); font-size: 10px; grid-column: 1 / -1; letter-spacing: .08em; margin-top: 4px; text-transform: uppercase; }
.claude-account-card { min-width: 0; overflow: hidden; }
.claude-account-summary { align-items: center; display: flex; gap: 9px; min-width: 0; }
.claude-account-card .account-card-main { flex: 1 1 auto; min-width: 0; }
.claude-usage { border-top: 1px solid var(--line); display: grid; gap: 5px; margin-top: 9px; padding-top: 8px; }
.claude-usage > small, .claude-usage-row > span { color: var(--muted); font-size: 9px; }
.claude-usage-row { align-items: baseline; display: grid; gap: 4px 8px; grid-template-columns: minmax(58px,auto) auto 1fr; }
.claude-usage-row > strong { color: var(--text); font-family: var(--mono); font-size: 10px; white-space: nowrap; }
.claude-usage-row > time { font-size: 9px; justify-self: end; white-space: nowrap; }
.claude-usage-row > .claude-usage-note { color: var(--muted); font-size: 9px; grid-column: 1 / -1; }
.claude-provider-icon { align-items: center; color: #d97757; display: inline-flex; flex: 0 0 auto; font-size: 12px; justify-content: center; }
.thread-provider-icon { background: center / contain no-repeat url("/cora/assets/provider-chatgpt.svg"); display: inline-block; flex: 0 0 auto; height: 12px; margin-right: 1px; width: 12px; }
.thread-provider-icon.claude { background-image: url("/cora/assets/provider-claude.svg"); }
/* The ChatGPT file leaves a wide empty margin round its mark: drawn larger in the same box, it matches Claude's. */
.thread-provider-icon:not(.claude) { background-size: 140%; -webkit-mask-size: 140%; mask-size: 140%; }
/* A running chat's provider logo pulses in its own colours, a failed one stands red; at rest the logo is still
   (Chris, 06.10.2026). The tree's dot is no longer shown. */
.thread-row .thread-item-top > .thread-dot { display: none; }
.thread-row.running .thread-provider-icon { animation: threadDotPulse .55s ease-in-out infinite alternate; }
.thread-row.failed .thread-provider-icon { background: #ff3d52; filter: none; -webkit-mask: url("/cora/assets/provider-chatgpt.svg") center / contain no-repeat; mask: url("/cora/assets/provider-chatgpt.svg") center / contain no-repeat; }
.thread-row.failed .thread-provider-icon.claude { -webkit-mask-image: url("/cora/assets/provider-claude.svg"); mask-image: url("/cora/assets/provider-claude.svg"); }
html[data-theme="light"] .thread-row.failed .thread-provider-icon { background: #d91535; filter: none; }
@media (prefers-reduced-motion: reduce) { .thread-row.running .thread-provider-icon { animation: none; } }

@media (max-width: 520px) {
  .claude-account-card .account-card-main { width: 100%; }
  .claude-usage-row { grid-template-columns: minmax(0,1fr) auto; }
  .claude-usage-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .claude-usage-row > time { grid-column: 1 / -1; justify-self: start; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}

/* Documents a person added to the Brain */
.brain-doc-button { align-items: center; display: inline-flex; gap: 6px; justify-content: center; position: relative; }
.brain-doc-button svg { flex: 0 0 auto; height: 15px; width: 15px; }
.brain-doc-button[data-phase="none"] { color: var(--subtle); }
.brain-doc-button[data-phase="none"]:hover { color: var(--accent); }
.brain-doc-button[data-phase="ready"], .brain-doc-button[data-phase="sorting"] { color: var(--accent); }
.brain-doc-button[data-phase="working"] { color: var(--accent); }
.brain-doc-button[data-phase="working"] svg { animation: brain-doc-pulse 1.2s ease-in-out infinite; }
.brain-doc-button[data-phase="changed"] { color: var(--warn); }
.brain-doc-button[data-phase="failed"] { color: var(--danger); }
.brain-doc-dot { background: currentColor; border: 2px solid var(--bg); border-radius: 50%; display: none; height: 8px; position: absolute; right: 1px; top: 1px; width: 8px; }
.brain-doc-button[data-phase="changed"] .brain-doc-dot, .brain-doc-button[data-phase="failed"] .brain-doc-dot { display: block; }
.brain-doc-button.secondary .brain-doc-dot { right: -3px; top: -3px; }
@keyframes brain-doc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.document-brain-slot { align-items: center; display: inline-flex; gap: 2px; }
.document-brain-slot .brain-doc-button.secondary { min-height: 32px; padding: 5px 11px; white-space: nowrap; }
.document-brain-slot .brain-doc-button.secondary[data-phase="ready"], .document-brain-slot .brain-doc-button.secondary[data-phase="sorting"] { background: var(--accent-soft); border-color: rgba(217,255,115,.3); }
.document-brain-slot .brain-doc-button.secondary[data-phase="changed"] { border-color: rgba(255,201,106,.4); }
.brain-doc-remove { color: var(--subtle); }
.brain-doc-remove:hover { color: var(--danger); }
.brain-doc-cards { display: grid; gap: 8px; }
.brain-doc-card { background: var(--panel-3); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 12px; display: grid; gap: 8px; padding: 11px 13px; }
.brain-doc-card.phase-changed { border-left-color: var(--warn); }
.brain-doc-card.phase-failed { border-left-color: var(--danger); }
.brain-doc-card.phase-working, .brain-doc-card.phase-sorting { border-left-color: var(--line-strong); }
.brain-doc-card-top { align-items: start; display: flex; gap: 10px; justify-content: space-between; }
.brain-doc-card-title { display: grid; gap: 3px; min-width: 0; }
.brain-doc-card-title strong { font-size: 11px; }
.brain-doc-card-title code { color: var(--subtle); font-size: 8.5px; overflow-wrap: anywhere; }
.brain-doc-card p { color: var(--muted); font-size: 10px; line-height: 1.5; margin: 0; }
.brain-doc-card-meta { align-items: center; color: var(--subtle); display: flex; flex-wrap: wrap; font-size: 8.5px; gap: 7px; }
.brain-doc-card-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.brain-doc-card-actions button { font-size: 9px; min-height: 30px; padding: 5px 11px; }
.brain-doc-badge { border-radius: 999px; flex: 0 0 auto; font-size: 7.5px; font-weight: 760; padding: 3px 8px; white-space: nowrap; }
.brain-doc-badge.phase-ready { background: var(--accent-soft); color: var(--accent); }
.brain-doc-badge.phase-sorting, .brain-doc-badge.phase-working { background: var(--line); color: var(--muted); }
.brain-doc-badge.phase-changed { background: rgba(255,201,106,.13); color: var(--warn); }
.brain-doc-badge.phase-failed { background: rgba(255,142,131,.12); color: var(--danger); }
.brain-doc-error { color: var(--danger); }
.brain-doc-empty { align-items: flex-start; display: grid; gap: 6px; justify-items: start; text-align: left; }
.brain-doc-empty strong { color: var(--text); font-size: 11px; }
.brain-doc-list .brain-doc { background: transparent; cursor: pointer; display: grid; gap: 3px; justify-content: stretch; text-align: left; width: 100%; }
.brain-doc-list .brain-doc:hover { border-color: var(--line-strong); }
.brain-doc-list .brain-doc strong { color: var(--text); font-size: 10px; }
.brain-doc-list .brain-doc small { color: var(--muted); font-size: 9px; line-height: 1.4; }
button.brain-doc-path { background: transparent; border: 0; color: var(--muted); cursor: pointer; font-family: inherit; font-size: 8px; padding: 0; text-decoration: underline; text-decoration-color: var(--line-strong); }
button.brain-doc-path:hover { color: var(--accent); }
.brain-doc-button.secondary[data-phase="none"] { color: var(--text); }
.brain-doc-button.secondary[data-phase="none"] svg { color: var(--accent); }

/* Live Brain panel: changes arrive in place, never under the reader's hands. */
.brain-page-wrap { min-width: 0; position: relative; }
.brain-live-hint { align-items: center; background: var(--accent); border: 0; border-radius: 999px; box-shadow: 0 6px 22px rgba(0,0,0,.28); color: var(--accent-ink); cursor: pointer; display: flex; font-family: inherit; font-size: 9px; font-weight: 720; gap: 6px; margin: -44px auto 14px; padding: 6px 12px; position: sticky; bottom: 14px; width: max-content; z-index: 4; }
.brain-live-hint.hidden { display: none; }
.brain-live-hint i { animation: brain-live-pulse 1.6s ease-in-out infinite; background: currentColor; border-radius: 50%; height: 6px; width: 6px; }
.brain-live-hint b { font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
.brain-live-new { animation: brain-live-in .32s ease-out, brain-live-ring 1.8s ease-out; }
.brain-live-changed { animation: brain-live-ring 1.8s ease-out; }
.brain-live-leaving { animation: brain-live-out .26s ease-in forwards; pointer-events: none; }
@keyframes brain-live-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes brain-live-out { to { opacity: 0; transform: translateY(-4px); } }
@keyframes brain-live-ring { from { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; } to { outline: 2px solid transparent; outline-offset: 2px; } }
@keyframes brain-live-pulse { 50% { opacity: .35; } }
.brain-recent-list { display: grid; gap: 0; }
.brain-decision.compact { gap: 4px; padding: 7px 10px; }
.brain-decision.compact p { font-size: 9.5px; }
.action-checking { border-style: dashed; }
.action-checking .brain-action-badge { align-items: center; background: rgba(152,184,255,.1); color: #b9ccff; display: inline-flex; gap: 5px; }
.brain-checking-dot { animation: brain-live-pulse 1.2s ease-in-out infinite; background: currentColor; border-radius: 50%; display: inline-block; height: 5px; width: 5px; }
.action-duplicate { opacity: .72; }
.action-failed .brain-action-badge { background: rgba(255,120,120,.12); color: var(--danger, #ff8a8a); }
html[data-theme="light"] .action-checking .brain-action-badge { background: rgba(60,90,200,.08); color: #3553b8; }
@media (prefers-reduced-motion: reduce) {
  .brain-live-new, .brain-live-changed, .brain-live-leaving, .brain-live-hint i, .brain-checking-dot { animation: none; }
}

/* Document tree overlay: every entry of one document, by outline or by area. */
.brain-doc-modal { display: none; height: min(880px, 92dvh); max-width: 1080px; overflow: hidden; }
.brain-doc-modal[open] { display: flex; }
.brain-doc-shell { display: flex; flex: 1; flex-direction: column; min-height: 0; padding: 20px 22px 0; width: 100%; }
.brain-doc-head { gap: 16px; margin-bottom: 14px; }
.brain-doc-head > div:first-child { min-width: 0; }
.brain-doc-head h2 { font-size: 21px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brain-doc-head code { color: var(--muted); display: block; font-size: 10px; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brain-doc-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.brain-doc-stat { align-items: baseline; background: rgb(var(--veil-light) / .025); border: 1px solid var(--line); border-radius: 11px; display: flex; gap: 6px; padding: 7px 11px; }
.brain-doc-stat strong { font-size: 15px; letter-spacing: -.02em; }
.brain-doc-stat span { color: var(--muted); font-size: 10px; }
.brain-doc-stat.running { align-items: center; border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); color: var(--accent); }
.brain-doc-stat.running span { color: var(--accent); }
.brain-doc-stat.failed { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); color: var(--danger); font-size: 10px; }
.brain-doc-toolbar { align-items: center; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px; padding-bottom: 12px; }
.brain-doc-modes { background: rgb(var(--veil-light) / .03); border: 1px solid var(--line); border-radius: 10px; display: inline-flex; padding: 3px; }
.brain-doc-modes button { background: transparent; border: 0; border-radius: 7px; color: var(--muted); cursor: pointer; font: inherit; font-size: 11px; font-weight: 700; padding: 6px 12px; }
.brain-doc-modes button[aria-selected="true"] { background: var(--accent-soft); color: var(--accent); }
.brain-doc-filters { display: flex; flex-wrap: wrap; gap: 5px; }
#brain-doc-query { flex: 1 1 200px; font-size: 12px; margin: 0; min-width: 160px; }
.brain-doc-tree { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 2px 22px; }
.brain-doc-node { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 7px; }
.brain-doc-node > .brain-doc-entries > .brain-doc-node { margin: 6px 0 6px 4px; }
.brain-doc-node-head { align-items: center; cursor: pointer; display: flex; gap: 9px; list-style: none; padding: 10px 12px; }
.brain-doc-node-head::-webkit-details-marker { display: none; }
.brain-doc-node-head::before { border-bottom: 1.6px solid var(--subtle); border-right: 1.6px solid var(--subtle); content: ""; flex: 0 0 auto; height: 6px; transform: rotate(-45deg); transition: transform .15s ease; width: 6px; }
.brain-doc-node[open] > .brain-doc-node-head::before { transform: rotate(45deg); }
.brain-doc-node-no { background: rgb(var(--veil-light) / .05); border-radius: 6px; color: var(--muted); font-size: 10px; font-weight: 750; min-width: 22px; padding: 2px 5px; text-align: center; }
.brain-doc-node-title { color: var(--text); flex: 1; font-size: 12.5px; font-weight: 650; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brain-doc-node-count { color: var(--subtle); flex: 0 0 auto; font-size: 10px; }
.brain-doc-node-state { color: var(--accent); font-size: 10px; font-weight: 700; }
.brain-doc-node-state.muted { color: var(--subtle); font-weight: 500; }
.brain-doc-node.state-reading { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.brain-doc-node.state-waiting { opacity: .55; }
.brain-doc-node-link { background: transparent; border: 0; color: var(--subtle); cursor: pointer; font-size: 12px; padding: 0 2px; }
.brain-doc-node-link { align-items: center; display: inline-flex; }
.brain-doc-node-link .brain-icon { height: 13px; width: 13px; }
.brain-doc-node-link:hover { color: var(--accent); }
.brain-doc-node-summary { color: var(--muted); font-size: 11px; line-height: 1.5; margin: -2px 14px 8px 44px; }
.brain-doc-entries { display: grid; gap: 5px; padding: 0 10px 10px 14px; }
.brain-doc-entry { border-left: 2px solid var(--line-strong); display: grid; gap: 4px; padding: 5px 0 5px 11px; }
.brain-doc-entry p { color: var(--text); font-size: 11.5px; line-height: 1.5; margin: 0; overflow-wrap: anywhere; }
.brain-doc-entry-meta { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; }
.brain-doc-entry.kind-stored { border-left-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.brain-doc-entry.kind-stored .brain-action-badge { background: var(--accent-soft); color: var(--accent); }
.brain-doc-entry.kind-known { border-left-color: var(--line-strong); opacity: .72; }
.brain-doc-entry.kind-items { border-left-color: var(--warn); }
.brain-doc-entry.kind-items .brain-action-badge { background: rgba(255,201,106,.13); color: var(--warn); }
.brain-doc-entry.kind-checking { border-left-style: dashed; }
.brain-doc-entry.kind-checking .brain-action-badge { align-items: center; background: rgba(152,184,255,.1); color: #b9ccff; display: inline-flex; gap: 5px; }
.brain-doc-entry.kind-dropped, .brain-doc-entry.kind-failed { opacity: .5; }
.brain-doc-empty-line { color: var(--subtle); font-size: 10.5px; padding: 2px 0 4px 11px; }
.brain-doc-card-name { background: transparent; border: 0; color: var(--text); cursor: pointer; font: inherit; font-weight: 700; padding: 0; text-align: left; }
.brain-doc-card-name:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
html[data-theme="light"] .brain-doc-modal { background: #fff; }
html[data-theme="light"] .brain-doc-stat, html[data-theme="light"] .brain-doc-modes { background: rgb(var(--veil-dark) / .03); }
@media (max-width: 700px) {
  .brain-doc-shell { padding: 16px 14px 0; }
  .brain-doc-node-summary { margin-left: 14px; }
  .brain-doc-entries { padding-left: 8px; }
}
.brain-doc-node-change { background: rgba(152,184,255,.12); border-radius: 999px; color: #b9ccff; font-size: 9px; font-weight: 750; padding: 2px 8px; }
.brain-doc-node-change.new { background: var(--accent-soft); color: var(--accent); }
.brain-doc-node.state-removed { border-style: dashed; opacity: .8; }
.brain-doc-entry.kind-removed { border-left-color: var(--danger); opacity: .7; }
.brain-doc-entry.kind-removed p { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--danger) 60%, transparent); }
.brain-doc-entry.kind-removed .brain-action-badge { background: rgba(255,120,120,.12); color: var(--danger); }
.brain-doc-stat.change { color: var(--muted); font-size: 10.5px; }
.brain-doc-card-change { color: #b9ccff; display: block; font-size: 9px; margin-top: 4px; }
html[data-theme="light"] .brain-doc-node-change, html[data-theme="light"] .brain-doc-card-change { color: #3553b8; }

/* Editing Brain entries in place: facts of an area, open items, search results. */
.brain-fact-list { display: grid; gap: 6px; }
.brain-fact, .brain-memory, .brain-item { position: relative; }
.brain-fact { border: 1px solid var(--line); border-radius: 10px; display: grid; gap: 4px; padding: 8px 76px 8px 11px; }
.brain-fact p { color: var(--text); font-size: 11px; line-height: 1.5; margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.brain-fact-meta { color: var(--subtle); display: flex; flex-wrap: wrap; font-size: 8.5px; gap: 8px; }
.brain-entry-actions { display: flex; gap: 4px; opacity: 0; position: absolute; right: 8px; top: 6px; transition: opacity .12s ease; }
.brain-fact:hover .brain-entry-actions, .brain-memory:hover .brain-entry-actions, .brain-item:hover .brain-entry-actions, .brain-entry-actions:focus-within { opacity: 1; }
.brain-entry-action { align-items: center; background: var(--panel, var(--grey-030)); border: 1px solid var(--line); border-radius: 8px; color: var(--muted); cursor: pointer; display: inline-flex; height: 26px; justify-content: center; padding: 0; width: 26px; }
.brain-entry-action .brain-icon { height: 13px; width: 13px; }
.brain-entry-action:hover { border-color: var(--line-strong); color: var(--accent); }
.brain-entry-action.danger:hover { color: var(--danger); }
.brain-memory .brain-entry-actions { top: 8px; }
.brain-entry-editor { display: grid; gap: 7px; margin-top: 2px; }
.brain-entry-editor textarea { font: inherit; font-size: 11.5px; line-height: 1.5; margin: 0; min-height: 60px; resize: vertical; width: 100%; }
.brain-entry-saved { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.brain-entry-busy { opacity: .5; pointer-events: none; }
@media (hover: none) {
  .brain-entry-actions { opacity: 1; }
}
html[data-theme="light"] .brain-entry-action { background: #fff; }
.brain-entry-editor .brain-edit-actions { align-items: center; display: flex; gap: 6px; justify-content: flex-end; }
.brain-entry-editor .brain-edit-actions button { border-radius: 9px; font-size: 11px; min-height: 0; padding: 6px 12px; }
.brain-entry-editor .brain-edit-status { color: var(--muted); flex: 1; font-size: 10px; }

/* Knowledge tree overlay. */
.brain-tree-node { border-radius: 11px; }
.brain-tree-node .brain-doc-entries { padding-left: 16px; }
.brain-tree-node > .brain-doc-node-head .brain-doc-node-title { font-size: 12.5px; }
.brain-tree-node .brain-tree-node > .brain-doc-node-head .brain-doc-node-title { font-size: 12px; font-weight: 600; }
.brain-tree-node .brain-fact, .brain-tree-node .brain-item { background: rgb(var(--veil-light) / .012); }
.brain-tree-node summary.drop-target { background: var(--accent-soft); border-radius: 10px; outline: 1.5px dashed color-mix(in srgb, var(--accent) 70%, transparent); }
.brain-tree-node [draggable="true"] { cursor: grab; }
.brain-tree-node [draggable="true"].dragging { opacity: .45; }
.brain-tree-move { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; grid-column: 1 / -1; margin-top: 6px; }
.brain-tree-move span { color: var(--muted); font-size: 10.5px; }
.brain-tree-move select { flex: 1 1 200px; font-size: 11px; margin: 0; min-width: 160px; }
.brain-tree-move button { border-radius: 9px; font-size: 11px; min-height: 0; padding: 6px 12px; }
#brain-tree-query { flex: 1 1 240px; font-size: 12px; margin: 0; min-width: 180px; }
#brain-tree-subtitle { font-family: inherit; }
.brain-fact:has(.brain-entry-actions > :nth-child(3)) { padding-right: 106px; }
.brain-memory:has(.brain-entry-actions) { padding-right: 76px; }

/* Chat journal: history of an entry and chat hits in the search. */
.brain-history-body { display: grid; gap: 12px; }
.brain-journal-group { border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 2px; padding: 10px 12px 12px; }
.brain-journal-group-head { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: 10px; margin-bottom: 6px; padding-bottom: 8px; }
.brain-journal-group-head strong { flex: 1; font-size: 12.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brain-journal-group-head small { color: var(--subtle); font-size: 10px; }
.brain-journal-group-head button { border-radius: 9px; font-size: 11px; min-height: 0; padding: 5px 11px; }
.brain-journal-message { border-left: 2px solid var(--line-strong); display: grid; gap: 3px; padding: 6px 0 6px 11px; }
.brain-journal-message.role-user { border-left-color: var(--accent); }
.brain-journal-message.role-final { border-left-color: #b9ccff; }
.brain-journal-head { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
.brain-journal-role { font-size: 9.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.brain-journal-message.role-user .brain-journal-role { color: var(--accent); }
.brain-journal-message.role-commentary .brain-journal-role { color: var(--muted); }
.brain-journal-message.role-final .brain-journal-role { color: #b9ccff; }
.brain-journal-head small { color: var(--subtle); font-size: 9.5px; }
.brain-journal-chat { color: var(--muted) !important; font-weight: 650; }
.brain-journal-via { background: rgba(152,184,255,.1); border-radius: 999px; color: #b9ccff !important; padding: 1px 7px; }
.brain-journal-head .brain-doc-node-link { margin-left: auto; }
.brain-journal-text { color: var(--text); font-size: 11.5px; line-height: 1.55; margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.brain-journal-text mark { background: var(--accent-soft); border-radius: 3px; color: var(--accent); padding: 0 2px; }
.brain-journal-message.collapsed .brain-journal-text { -webkit-box-orient: vertical; -webkit-line-clamp: 8; display: -webkit-box; overflow: hidden; }
.brain-journal-more { background: transparent; border: 0; color: var(--accent); cursor: pointer; font: inherit; font-size: 10.5px; justify-self: start; padding: 0; }
.brain-journal-message:not(.collapsed) .brain-journal-more::after { content: " (weniger)"; }
.brain-journal-results { display: grid; gap: 8px; }
.brain-journal-results .brain-journal-message { border: 1px solid var(--line); border-left-width: 2px; border-radius: 10px; padding: 8px 11px; }
.brain-journal-links { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
html[data-theme="light"] .brain-journal-message.role-final { border-left-color: #3553b8; }
html[data-theme="light"] .brain-journal-message.role-final .brain-journal-role, html[data-theme="light"] .brain-journal-via { color: #3553b8 !important; }
.brain-history-summary { background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 12px; display: grid; gap: 6px; padding: 12px 14px; }
.brain-history-summary strong { color: var(--accent); font-size: 11px; letter-spacing: .02em; }
.brain-history-summary p { color: var(--text); font-size: 12px; line-height: 1.6; margin: 0; }
.brain-history-summary small { color: var(--muted); font-size: 10px; }
.brain-journal-related { border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 8px; padding: 10px 12px; }
.brain-journal-related > .brain-journal-head strong { color: var(--text); flex: 1; font-size: 12px; min-width: 0; }
.brain-journal-related .brain-journal-message { border-left: 2px solid var(--line); padding-left: 10px; }

/* ---------- context hand-over ---------- */
.context-track #context-fill { overflow: hidden; position: relative; z-index: 1; }
.context-track .context-limit { background: rgba(255,35,55,.48); border-radius: 0 999px 999px 0; bottom: 0; box-shadow: inset 0 0 5px rgba(255,30,50,.32); height: auto; pointer-events: none; position: absolute; right: 0; top: 0; transform: none; width: auto; z-index: 2; }
.context-track .context-limit::before { background: #ff243f; border-radius: 2px; box-shadow: 0 0 5px rgba(255,36,63,.72), 0 0 0 2px var(--grey-017); bottom: -3px; content: ""; left: 0; position: absolute; top: -3px; width: 2px; }
.context-strip.near-limit #context-fill { background: linear-gradient(90deg, var(--warn), #ff9d6a); }
.context-strip.near-limit .context-copy strong { color: var(--warn); }
.context-handover { background: transparent; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--muted); cursor: pointer; font-size: 9px; font-weight: 700; justify-self: end; letter-spacing: .02em; padding: 3px 10px; transition: border-color 160ms ease, color 160ms ease, background 160ms ease; white-space: nowrap; }
.context-handover:hover, .context-strip.near-limit .context-handover { background: rgba(185,167,255,.1); border-color: rgba(185,167,255,.55); color: #ddd5ff; }
.handover-glyph { background: conic-gradient(from 200deg, #b9a7ff, var(--accent), #b9a7ff); border-radius: 50%; flex: 0 0 auto; height: 18px; mask: radial-gradient(circle, transparent 4px, #000 4.5px); -webkit-mask: radial-gradient(circle, transparent 4px, #000 4.5px); position: relative; width: 18px; }
.handover-panel { background: linear-gradient(95deg, rgba(185,167,255,.13), rgba(217,255,115,.05) 70%); border-bottom: 1px solid rgba(185,167,255,.25); display: grid; gap: 9px; padding: 11px 25px 12px; }
.handover-panel .handover-glyph { animation: handover-spin 2.4s linear infinite; }
@keyframes handover-spin { to { transform: rotate(360deg); } }
.handover-panel.failed { background: linear-gradient(95deg, rgba(255,107,107,.12), rgba(255,201,106,.05) 70%); border-bottom-color: rgba(255,107,107,.3); }
.handover-panel.failed .handover-glyph { animation: none; background: #ff8f8f; }
.handover-head { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; min-width: 0; }
.handover-copy { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.handover-copy .eyebrow { margin: 0; }
.handover-copy strong { color: #ddd5ff; font-size: 12px; }
.handover-panel.failed .handover-copy strong { color: #ffb3b3; }
.handover-copy span { color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
.handover-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; margin-left: auto; }
.handover-steps { counter-reset: step; display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; overflow: visible; padding: 0; }
.handover-steps li { align-items: center; background: rgb(var(--veil-light) / .03); border: 1px solid var(--line); border-radius: 999px; color: var(--subtle); counter-increment: step; display: flex; flex: 0 0 auto; font-size: 9px; gap: 6px; padding: 4px 10px 4px 5px; white-space: nowrap; }
.handover-steps li::before { align-items: center; background: var(--panel-3); border-radius: 50%; color: var(--subtle); content: counter(step); display: inline-flex; font-size: 8px; font-weight: 800; height: 15px; justify-content: center; width: 15px; }
.handover-steps li.done { border-color: rgba(217,255,115,.3); color: var(--muted); }
.handover-steps li.done::before { background: var(--accent); color: var(--accent-ink); content: "✓"; }
.handover-steps li.active { background: rgba(185,167,255,.12); border-color: rgba(185,167,255,.55); color: #ddd5ff; }
.handover-steps li.active::before { animation: pulse 1.4s ease-in-out infinite; background: #b9a7ff; color: #1a1530; }
.handover-steps li.failed { border-color: rgba(255,107,107,.55); color: #ffb3b3; }
.handover-steps li.failed::before { background: #ff8f8f; color: #2a0f0f; content: "!"; }
.handover-scores { display: flex; flex-wrap: wrap; gap: 5px; }
.handover-score { background: rgba(217,255,115,.08); border: 1px solid rgba(217,255,115,.22); border-radius: 6px; color: var(--muted); font-family: var(--mono); font-size: 9px; padding: 2px 7px; }
.handover-score.weak { background: rgba(255,201,106,.1); border-color: rgba(255,201,106,.4); color: var(--warn); }
.handover-capsule summary, .chain-capsule summary { color: #ddd5ff; cursor: pointer; font-size: 10px; font-weight: 700; }
.handover-capsule-body { background: rgba(0,0,0,.22); border: 1px solid var(--line); border-radius: 10px; color: var(--text); font-size: 11px; line-height: 1.55; margin-top: 7px; max-height: 42vh; overflow: auto; padding: 10px 14px; }
.handover-capsule-body h2 { color: #ddd5ff; font-size: 11px; letter-spacing: .02em; margin: 12px 0 4px; }
.handover-capsule-body h2:first-child { margin-top: 0; }
.chain-bar { align-items: center; background: linear-gradient(90deg, rgba(185,167,255,.1), transparent 75%); border: 1px solid rgba(185,167,255,.22); border-radius: 12px; display: flex; gap: 11px; margin: 14px 0 8px; padding: 8px 11px; }
.chain-bar > div:not(.chain-bar-actions) { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.chain-bar strong { color: #ddd5ff; font-size: 11px; }
.chain-bar small { color: var(--muted); font-size: 9px; }
.chain-bar-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.chain-capsule { position: relative; }
.chain-capsule[open] .handover-capsule-body { position: absolute; right: 0; top: 24px; width: min(620px, 80vw); z-index: 20; background: var(--grey-020); box-shadow: 0 18px 50px rgba(0,0,0,.45); }
.turn-handover:not(.expanded) > :not(.turn-head):not(.handover-card) { display: none !important; }
/* Only the start prompt (the capsule) folds away; messages sent while the new session works stay visible. */
.turn-handover-start:not(.show-prompt) > .item.userMessage.handover-prompt { display: none !important; }
.handover-card { align-items: center; background: linear-gradient(90deg, rgba(185,167,255,.1), rgb(var(--veil-light) / .015)); border: 1px solid rgba(185,167,255,.24); border-radius: 12px; display: flex; gap: 10px; margin: 4px 0 8px; padding: 8px 11px; }
.handover-card > div { display: flex; flex: 1; flex-direction: column; gap: 1px; min-width: 0; }
.handover-card strong { color: #ddd5ff; font-size: 11px; }
.handover-card small { color: var(--muted); font-size: 9px; }
.turn.turn-handover:not(.expanded) { border-bottom: 0; padding: 3px 0; }
.turn.turn-handover:not(.expanded) > .turn-head { display: none; }
.turn.turn-handover:not(.expanded) > .handover-card { margin: 0; padding: 6px 11px; }
.turn.turn-handover:not(.expanded) + .turn { padding-top: 12px; }
.turn-handover .turn-head { opacity: .7; }
/* After a hand-over: the capsule steps of the earlier session fold away, the transition is one line. */
.chain-timeline > .turn.turn-handover:not(.expanded) { display: none; }
.handover-card.handover-line { background: none; border: 0; border-top: 1px solid rgba(185,167,255,.22); border-radius: 0; gap: 8px; margin: 6px 0 10px; padding: 7px 2px 0; }
.handover-card.handover-line .handover-glyph { transform: scale(.7); }
.handover-card.handover-line > div { align-items: baseline; flex-direction: row; gap: 7px; overflow: hidden; white-space: nowrap; }
.handover-card.handover-line small { overflow: hidden; text-overflow: ellipsis; }
.handover-card.handover-line > button { background: none; border: 0; color: var(--violet); font-size: 10px; min-height: 0; padding: 2px 4px; }
.thread-badge.handover { background: rgba(185,167,255,.16); border: 1px solid rgba(185,167,255,.5); color: #ddd5ff; }
.handover-dialog { max-width: 520px; }
.handover-dialog-copy { color: var(--muted); font-size: 12px; line-height: 1.55; margin: 0 0 14px; }
.handover-provider-choice { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 12px; }
.handover-provider-choice label { cursor: pointer; margin: 0; position: relative; }
.handover-provider-choice input { opacity: 0; position: absolute; }
.handover-provider-choice span { border: 1px solid var(--line-strong); border-radius: 12px; display: flex; flex-direction: column; gap: 3px; height: 100%; padding: 10px 11px; transition: border-color 160ms ease, background 160ms ease; }
.handover-provider-choice strong { color: var(--text); font-size: 12px; }
.handover-provider-choice small { color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
.handover-provider-choice input:checked + span { background: rgba(185,167,255,.1); border-color: rgba(185,167,255,.65); }
.handover-provider-choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.project-handover-card p { color: var(--muted); font-size: 11px; line-height: 1.5; }
html[data-theme="light"] .context-track .context-limit { background: rgba(220,20,45,.36); }
html[data-theme="light"] .context-track .context-limit::before { background: #d91535; box-shadow: 0 0 4px rgba(217,21,53,.45), 0 0 0 2px #fff; }
html[data-theme="light"] .handover-copy strong, html[data-theme="light"] .chain-bar strong, html[data-theme="light"] .handover-card strong, html[data-theme="light"] .handover-capsule summary, html[data-theme="light"] .chain-capsule summary { color: #4b3bb0; }
html[data-theme="light"] .handover-steps li.active { color: #4b3bb0; }
html[data-theme="light"] .handover-capsule-body { background: rgb(var(--veil-light) / .7); }
html[data-theme="light"] .chain-capsule[open] .handover-capsule-body { background: #fff; }
html[data-theme="light"] .thread-badge.handover { color: #4b3bb0; }

/* The iPhone app: the page reaches under the status bar, whose height (--app-safe-top, set by app.js) stays free above
   the bar. A band in the bar's colour lies behind the clock; the bar slides away under it and text runs out beneath it. */
@media (max-width: 860px) {
  html.cora-app { --mobile-host-chrome-height: calc(92px + var(--app-safe-top, 0px)); }
  html.cora-app body:not(.embed-mode)::before { background: var(--grey-017); content: ""; height: var(--app-safe-top, 0px); left: 0; pointer-events: none; position: fixed; right: 0; top: 0; z-index: 85; }
  html.cora-app[data-theme="light"] body:not(.embed-mode)::before { background: var(--grey-242); }
  html.cora-app body:not(.embed-mode) .mobile-bar { height: calc(52px + var(--app-safe-top, 0px)); padding-top: var(--app-safe-top, 0px); }
  html.cora-app .workspace-grid > .workspace-tabs { top: calc(52px + var(--app-safe-top, 0px)); }
  html.cora-app body:not(.embed-mode).mobile-header-hidden .workspace-tabs { transform: translate3d(0, calc(-100% - 52px - var(--app-safe-top, 0px)), 0); }
  html.cora-app .toast-stack { top: calc(100px + var(--app-safe-top, 0px)); }
  html.cora-app #project-settings-dialog, html.cora-app .account-dialog { padding-top: var(--app-safe-top, 0px); }
  /* Without open chats there are no tabs: the menu and the assistant's circle start right below the bar. */
  html.cora-app body:not(.embed-mode):has(#workspace-tabs.hidden) { --mobile-host-chrome-height: calc(52px + var(--app-safe-top, 0px)); }
  /* A chat in the overlay starts below the status bar (its pane follows the shell). */
  html.cora-app .chat-preview-overlay { padding-top: var(--app-safe-top, 0px); }
  /* Chat panes: with the bar slid away (scrolling) the first lines, the banner and the ring stay below the status bar. */
  html.cora-app body.embed-mobile.host-header-hidden:not(.preview-mode) .chat-workspace { padding-top: var(--app-safe-top, 0px); }
  html.cora-app body.embed-mobile:not(.preview-mode) .activity-banner:not(.hidden) { top: calc(89px + var(--app-safe-top, 0px)); }
}

/* A failing service the Brain needs (public/service-notice.js): one line at the top, above everything. */
.service-notice { align-items: baseline; background: rgba(255,142,131,.12); border-bottom: 1px solid rgba(255,142,131,.35); color: var(--text); display: flex; flex-wrap: wrap; font-size: 13px; gap: 4px 10px; left: 0; padding: 8px 14px calc(8px + 0px); padding-top: calc(8px + env(safe-area-inset-top, 0px)); position: fixed; right: 0; top: 0; z-index: 1000; }
.service-notice strong { color: var(--danger); }
.service-notice span { color: var(--muted, inherit); }
.service-notice-close { background: none; border: 0; color: inherit; cursor: pointer; font-size: 18px; line-height: 1; margin-left: auto; padding: 0 4px; }
/* Operations problems for administrators (public/service-notice.js updateOps): strong red on top, folded a red button. */
.ops-notice { color: #fff; display: flex; flex-wrap: wrap; font-size: 13px; gap: 4px 12px; left: 0; padding: 10px 14px; position: fixed; right: 0; z-index: 1001; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.ops-notice:not(.ops-notice-folded) { padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
.ops-notice-problem { background: #c62828; }
.ops-notice-repaired { background: #8a6d00; }
.ops-notice-title { font-size: 14px; }
.ops-notice ul { flex-basis: 100%; list-style: none; margin: 0; padding: 0; }
.ops-notice li { line-height: 1.45; }
.ops-notice-fixed { opacity: .85; }
.ops-notice-close { background: rgb(var(--veil-light) / .18); border: 1px solid rgb(var(--veil-light) / .5); border-radius: 6px; color: #fff; cursor: pointer; font-size: 12px; margin-left: auto; padding: 2px 10px; }
.ops-notice-folded { background: none; box-shadow: none; left: auto; padding: calc(6px + env(safe-area-inset-top, 0px)) 10px 0 0; }
.ops-notice-pill { background: #c62828; border: 0; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.3); color: #fff; cursor: pointer; font-size: 12px; font-weight: 700; padding: 5px 12px; }
.brain-health.degraded strong { color: var(--danger); }

/* The login code copies itself with one click (public/app.js). */
#provider-code { cursor: copy; user-select: all; }
/* „Als Tab öffnen“ only in the phone's preview (public/index.html #preview-to-panel). */
#preview-to-panel { display: none; }
body.embed-mobile.preview-mode #preview-to-panel { align-items: center; display: inline-flex; justify-content: center; }

/* The context bar is a line only, over the whole width beside „Neuer Abschnitt“ (Chris, 06.10.2026): its numbers stand
   in its title and in the chat's settings, which a click on it opens (app.js openChatSettingsMenu). Quiet, not in the
   accent; near the hand-over it warms up as before. On a phone the thin line gets a taller target for the finger. */
#context-strip .context-copy { display: none !important; }
#context-strip { cursor: pointer; grid-auto-columns: auto; grid-auto-flow: column; grid-template-columns: minmax(0, 1fr) !important; position: relative; }
body.embed-mobile #context-strip::before { content: ""; inset: -7px 0; position: absolute; }
#context-strip > * { position: relative; }
/* The line shows how far the chat's work is (app.js renderProgressLine), in a quiet grey tone of the project's colour;
   while the chat runs a light travels to and fro in it instead of the header's glow (Chris, 06.10.2026). The context
   window and its hand-over mark live in the model pill's ring (below). */
#context-strip #context-fill { background: color-mix(in srgb, var(--project-accent-strong, var(--accent)) 38%, var(--grey-130)); }
html[data-theme="light"] #context-strip #context-fill { background: color-mix(in srgb, var(--project-accent-strong, var(--accent)) 45%, var(--grey-172)); }
#context-strip .context-limit { display: none !important; }
#context-strip:not(.has-work) { cursor: default; }
#context-strip .context-track { overflow-x: clip; }
#context-strip.working .context-track::after { animation: progressLight 1.8s ease-in-out infinite alternate; background: linear-gradient(90deg, transparent, var(--project-accent-strong, var(--accent)) 50%, transparent); border-radius: inherit; bottom: 0; box-shadow: 0 0 6px 0 color-mix(in srgb, var(--project-accent-strong, var(--accent)) 45%, transparent); content: ""; left: 0; pointer-events: none; position: absolute; top: 0; transform: translateX(-50%); width: 28%; will-change: transform; z-index: 3; }
@keyframes progressLight { from { transform: translateX(-50%); } to { transform: translateX(307.14%); } }
@media (prefers-reduced-motion: reduce) { #context-strip.working .context-track::after { animation: none; opacity: .5; transform: none; width: 100%; } }

/* The context window as a thin ring round the pill's logo (app.js renderContext): filled clockwise in a quiet blue, the
   hand-over a small red mark. The ring stands before the logo and pulls it back over itself (the pill's 6 px gap
   included), so the logo sits in its middle. */
.composer-context-ring { --context-ring-fill: var(--context-fill); --context-ring-track: var(--context-track); --context-ring-limit: var(--context-limit); background: var(--context-ring-track); border-radius: 50%; flex: none; height: 25px; margin: 0 -27px 0 -4px; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.6px), #000 calc(100% - 1.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 1.6px), #000 calc(100% - 1.5px)); width: 25px; }
.context-strip:hover .context-track { background: color-mix(in srgb, var(--panel-3) 70%, var(--muted)); }
/* In a wide pane the line ends flush with the title on the left and the × on the right (both 14 px from the edge). */
body.embed-desktop #context-strip { padding-left: 14px; padding-right: 14px; }
.menu-context-usage { color: var(--muted); font-size: 10.5px; line-height: 1.4; margin: 2px 0 0; padding: 4px 10px 2px; }
.menu-context-usage.hidden { display: none; }

/* The tree's row tools (Chris, 06.10.2026): on a desktop a project's folder, + and gear and a chat's + show only on the
   row under the pointer (or one reached by keyboard), their places kept so nothing shifts. On a phone a chat's + is
   gone: a chat opens with a tap and goes into the tabs with the preview's +. */
@media (hover: hover) and (min-width: 861px) {
  .project-tree-head:not(:hover):not(:has(:focus-visible)) :is(.project-actions-trigger, .project-files-trigger, .project-new-chat),
  .thread-row:not(:hover):not(:has(:focus-visible)) .thread-add { opacity: 0; }
}
@media (max-width: 860px) {
  .thread-row-actions .thread-add { display: none; }
}
.thread-row.failed .thread-provider-icon:not(.claude) { -webkit-mask-size: 140%; mask-size: 140%; }

/* The person's display settings (app.js applyDisplayPrefs; Einstellungen › Darstellung): the sources bar and the Brain
   bar under answers show only when turned on, for all chats. */
body.hide-answer-sources .answer-bar-sources,
body.hide-answer-brain .answer-bar-writes { display: none !important; }
/* With the Brain bar off its reads leave „Quellen“ too; a bar of Brain reads alone goes (app.js applyAnswerSources). */
.answer-sources-without-brain { display: none; }
body.hide-answer-brain .answer-sources-full { display: none; }
body.hide-answer-brain .answer-sources-without-brain { display: inline; }
body.hide-answer-brain .answer-source-brain,
body.hide-answer-brain .answer-bar-brain-only { display: none !important; }

/* A phone (Chris, 06.10.2026): the tabs stand at the very top, the bar with menu, title, gear and × below them; without
   tabs the bar stands at the top. Scrolling slides both away upwards as before. The tree opens over the whole page,
   above both, so its own button folds it and the bar's is not doubled. */
@media (max-width: 860px) {
  body:not(.embed-mode) .workspace-grid > .workspace-tabs { box-sizing: border-box; height: 40px; top: 0; z-index: 81; }
  body:not(.embed-mode) .mobile-bar { top: 40px; }
  body:not(.embed-mode):has(#workspace-tabs.hidden) .mobile-bar { top: 0; }
  body:not(.embed-mode).mobile-header-hidden .mobile-bar { transform: translate3d(0, calc(-100% - 40px), 0); }
  body:not(.embed-mode).mobile-header-hidden .workspace-tabs { transform: translate3d(0, -100%, 0); }
  body:not(.embed-mode) .project-panel { top: 0; z-index: 90; }
  html.cora-app body:not(.embed-mode) .workspace-grid > .workspace-tabs { height: calc(40px + var(--app-safe-top, 0px)); padding-top: calc(5px + var(--app-safe-top, 0px)); top: 0; }
  html.cora-app body:not(.embed-mode) .mobile-bar { height: 52px; padding-top: 0; top: calc(40px + var(--app-safe-top, 0px)); }
  html.cora-app body:not(.embed-mode):has(#workspace-tabs.hidden) .mobile-bar { height: calc(52px + var(--app-safe-top, 0px)); padding-top: var(--app-safe-top, 0px); top: 0; }
  html.cora-app body:not(.embed-mode).mobile-header-hidden .mobile-bar { transform: translate3d(0, calc(-100% - 40px - var(--app-safe-top, 0px)), 0); }
  html.cora-app body:not(.embed-mode).mobile-header-hidden .workspace-tabs { transform: translate3d(0, -100%, 0); }
  html.cora-app body:not(.embed-mode) .project-panel { padding-top: var(--app-safe-top, 0px); }
}

/* A phone's burger: the plain lines, no tile around them (Chris, 06.10.2026). */
@media (max-width: 860px) {
  .mobile-bar > #mobile-projects, html[data-theme="light"] .mobile-bar > #mobile-projects { background: transparent; border-color: transparent; }
  .mobile-bar > #mobile-projects:active { background: rgb(var(--veil-light) / .06); }
}


/* The project under the title a step larger and a little closer to it, the same as in a wide pane (Chris, 07.10.2026). */
@media (max-width: 860px) {
  .mobile-chat-controls:not(.no-thread) .mobile-chat-project:not(:empty) { font-size: 11px; margin-top: -1px; }
}

/* The folded composer in a pane is one pill around its inner pills, their curves concentric (Chris, 07.10.2026): the
   pane's rounded box (16 px) is for the open composer only. Only a narrow pane folds it into a pill; a wide one (an
   overlay chat) keeps the box even at rest. */
@media (max-width: 860px) {
  body.embed-desktop .composer.composer-idle { border-radius: 999px; }
}

/* A wide pane: the history fades out softly over its last 48 px towards the composer instead of ending at a hard edge
   (Chris, 07.10.2026); the space under the last message keeps it readable when scrolled to the end. */
body.embed-desktop #history-scroll { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent); }
body.embed-desktop .history-scroll { padding-bottom: 56px; }

/* The composer clear and dark (Chris, 07.10.2026: the grey on grey looked smeared, not high-end): an opaque ground almost
   black, every inner pill one opaque step lighter, the type crisp instead of grey on a milky veil. In the light theme the
   inner pills are opaque as well. */
html .composer { background: var(--grey-008); border-color: rgb(var(--veil-light) / .1); box-shadow: 0 16px 44px rgba(0,0,0,.62), 0 4px 12px rgba(0,0,0,.4); }
html[data-theme="light"] .composer { box-shadow: 0 14px 38px rgb(var(--veil-dark) / .13), 0 3px 9px rgb(var(--veil-dark) / .08); }
html .composer .tool-button, html .composer.composer-idle .compact-composer-open { background: var(--grey-020); }
html .composer .tool-button:hover, html .composer.composer-idle .compact-composer-open:hover { background: var(--grey-026); }
html .composer .tool-button { color: var(--grey-233); }
html .composer.composer-idle .compact-composer-open { color: var(--grey-205); font-weight: 400; }
html .composer textarea::placeholder { color: var(--grey-150); }
html[data-theme="light"] .composer { background: #fff; }
html[data-theme="light"] .composer .tool-button, html[data-theme="light"] .composer.composer-idle .compact-composer-open { background: var(--grey-242); color: var(--grey-072); }
html[data-theme="light"] .composer .tool-button:hover, html[data-theme="light"] .composer.composer-idle .compact-composer-open:hover { background: var(--grey-233); }
html[data-theme="light"] .composer textarea::placeholder { color: var(--grey-150); }

/* The composer's model pill (Chris, 07.10.2026): one of the composer's inner pills, without a frame of its own (the frame
   that shimmers is the composer's). The name light, the thinking quiet beside it, in the folded pill under it; no logo
   (it stands in the pane's header). How full the context window is fills the pill from the left, a step lighter than its
   ground, in a cool grey (app.js setContextFrame); a thin dark line through it behind the type shows where the chat
   hands over. */
html .composer #composer-model { --ctx: 0%; --ctx-fill: var(--grey-035); --ctx-ground: var(--grey-020); background: linear-gradient(to right, var(--ctx-fill) var(--ctx), var(--ctx-ground) var(--ctx)); border-radius: 8px; box-shadow: none; min-height: 29px; }
html .composer #composer-model:hover { --ctx-ground: var(--grey-026); }
html[data-theme="light"] .composer #composer-model { --ctx-fill: var(--grey-222); --ctx-ground: var(--grey-242); }
html[data-theme="light"] .composer #composer-model:hover { --ctx-ground: var(--grey-233); }
html .composer #composer-model { --ctx-mark: rgba(0,0,0,.5); }
html[data-theme="light"] .composer #composer-model { --ctx-mark: rgba(0,0,0,.28); }
html .composer #composer-model.has-limit { background: linear-gradient(to right, transparent calc(var(--ctx-limit) - .75px), var(--ctx-mark) calc(var(--ctx-limit) - .75px), var(--ctx-mark) calc(var(--ctx-limit) + .75px), transparent calc(var(--ctx-limit) + .75px)), linear-gradient(to right, var(--ctx-fill) var(--ctx), var(--ctx-ground) var(--ctx)); }
html .composer #composer-model .composer-context-ring, html .composer #composer-model .composer-model-logo { display: none; }
html .composer #composer-model::before, html .composer #composer-model::after { content: none; }
html .composer #composer-model #composer-model-name { color: var(--text); font-size: 11px; font-weight: 500; letter-spacing: -.005em; max-width: 96px; }
html .composer #composer-model .composer-model-effort { color: var(--grey-150); font-size: 9px; font-weight: 400; white-space: nowrap; }
html[data-theme="light"] .composer #composer-model .composer-model-effort { color: var(--grey-110); }
.composer-model-effort:empty { display: none; }
@media (pointer: coarse) { html .composer #composer-model { min-height: 40px; } }
@media (max-width: 860px) {
  html .composer.composer-idle #composer-model { align-content: center; border-radius: 999px; display: inline-grid; grid-template-columns: auto auto; justify-content: center; min-height: 0; padding: 3px 14px; row-gap: 1px; }
  html .composer.composer-idle #composer-model small { grid-column: 1; line-height: 1.1; text-align: center; }
  html .composer.composer-idle #composer-model .composer-goal-mark { grid-column: 2; grid-row: 1 / 3; }
}

/* How a message goes into a running chat (Steuern, Sofort, Danach) is a pill of the composer's bottom row like the
   others: same height, ground and type, a small arrow for the list (Chris, 07.10.2026). */
html .composer .steer-toggle { margin-left: 0; }
html .composer .steer-toggle select { -webkit-appearance: none; appearance: none; background: var(--grey-020) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a9af9f' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 9px center / 9px 6px no-repeat; border: 0; border-radius: 8px; color: var(--grey-233); cursor: pointer; font-family: var(--font); font-size: 11px; font-weight: 500; height: 29px; padding: 0 24px 0 10px; }
html .composer .steer-toggle select:hover { background-color: var(--grey-026); }
html[data-theme="light"] .composer .steer-toggle select { background: var(--grey-242) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236c786f' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 9px center / 9px 6px no-repeat; color: var(--grey-072); }
@media (pointer: coarse) { html .composer .steer-toggle select { height: 40px; } }

/* The open composer (Chris, 07.10.2026): its outline a plain cool grey, a step clearer while one types, instead of a
   faint accent nobody could name; send and stop as high as the buttons beside them, with their corners, and an empty
   send button on their ground instead of its own grey with a border. */
html .composer:focus-within { border-color: rgb(var(--veil-light) / .2); }
html[data-theme="light"] .composer { border-color: rgba(0,0,0,.1); }
html[data-theme="light"] .composer:focus-within { border-color: rgba(0,0,0,.2); }
html .composer:not(.composer-idle) .send-button, html .composer:not(.composer-idle) .stop-button { border-radius: 8px; height: 29px; width: 29px; }
@media (pointer: coarse) { html .composer:not(.composer-idle) .send-button, html .composer:not(.composer-idle) .stop-button { height: 40px; width: 40px; } }
html .composer .send-button.empty:not(:disabled) { background: var(--grey-020); border: 0; color: var(--grey-150); }
html[data-theme="light"] .composer .send-button.empty:not(:disabled) { background: var(--grey-242); color: var(--grey-110); }
/* The stop button of a running chat like the other buttons, folded or open: their ground, a light square (Chris,
   07.10.2026: the pink on red stood out). */
html .composer .stop-button { background: var(--grey-020); color: var(--grey-233); }
html .composer .stop-button:hover { background: var(--grey-026); }
html[data-theme="light"] .composer .stop-button { background: var(--grey-242); color: var(--grey-072); }

/* The chats' headers in a cooler, neutral grey instead of the green cast, on a phone and on a desktop (Chris,
   07.10.2026); the project's tint from the left stays. */
html .chat-header { background-color: var(--grey-026); border-bottom-color: rgb(var(--veil-light) / .1); }
html .mobile-bar { background: var(--grey-017); border-bottom-color: rgb(var(--veil-light) / .08); }
html[data-theme="light"] body .chat-header { background-color: var(--grey-242); border-bottom-color: rgba(0,0,0,.12); }
html[data-theme="light"] body .mobile-bar { background: var(--grey-242); }

/* Surfaces instead of frames (Chris, 07.10.2026): a selected or marked element stands out by a quiet step of the grey
   ramp (public/colors.css), not by an outline; badges are quiet words on a faint ground; yellow only for what is new. */
html .thread-row:hover { background: rgb(var(--veil-light) / .04); }
html .thread-row:has(> .thread-item.active) { background: var(--grey-026); box-shadow: none; }
html .project-tree.active .project-tree-head { background: var(--grey-026); }
html .thread-badge.wait { background: rgb(var(--veil-light) / .08); border: 0; color: var(--muted); }
html .thread-badge.archived, html .thread-badge.handover, html .thread-badge.question { border: 0; }
html .new-thread-button { background: var(--grey-026); border-color: transparent; color: var(--text); }
html .new-thread-button:hover { background: var(--grey-030); border-color: transparent; }
html .item.agentMessage:is(.final_answer, .final) .message-bubble { background: rgb(var(--veil-light) / .045); }
html .item.agentMessage.unread-answer .message-bubble { background: rgba(217,255,115,.07); box-shadow: none; }
html .item.agentMessage.unread-answer .message-bubble::before { border-left: 3px solid var(--accent); }
@keyframes freshAnswer {
  0%, 25% { background: rgba(217,255,115,.07); }
  100% { background: rgb(var(--veil-light) / .045); }
}
@keyframes freshAnswerLight {
  0%, 25% { background: rgba(59,125,34,.07); }
  100% { background: rgb(var(--veil-dark) / .04); }
}
html[data-theme="light"] body .thread-row:hover, html[data-theme="light"] body .project-tree-head:hover { background: rgb(var(--veil-dark) / .04); }
html[data-theme="light"] body .thread-row:has(> .thread-item.active), html[data-theme="light"] body .project-tree.active .project-tree-head { background: rgb(var(--veil-dark) / .05); }
html[data-theme="light"] body .thread-badge.wait { background: rgb(var(--veil-dark) / .07); color: var(--muted); }
html[data-theme="light"] body .new-thread-button { background: rgb(var(--veil-dark) / .06); }
html[data-theme="light"] body .new-thread-button:hover { background: rgb(var(--veil-dark) / .09); }
html[data-theme="light"] body .item.agentMessage.unread-answer .message-bubble { background: rgba(59,125,34,.07); box-shadow: none; }

/* The rail at the far left black, a calm frame for the view (Chris, 07.10.2026); in the light theme a light grey. */
html .nav-rail { background: var(--grey-008); }
html[data-theme="light"] body .nav-rail { background: var(--grey-233); }

/* Fewer accents (Chris, 07.10.2026): yellow only for action, selection and what is new. Thinking and a deliberate wait
   are quiet greys of the ramp, without violet or amber and without a frame. */
html .reasoning-details { background: rgb(var(--veil-light) / .03); border: 0; }
html .reasoning-label, html .event-label { color: var(--muted); }
html .reasoning-label::before { background: var(--subtle); }
html .thinking-active .reasoning-details { border: 0; box-shadow: none; }
html .reasoning-body, html .reasoning-raw { border-top-color: var(--line); }
html .reasoning-raw { color: var(--muted); }
html .thread-wait-pill { background: rgb(var(--veil-light) / .06); border: 0; color: var(--muted); }
html .thread-wait-pill:hover { background: rgb(var(--veil-light) / .1); color: var(--text); }
html .thread-wait-pill[data-wait-until] { background: linear-gradient(to right, rgb(var(--veil-light) / .12) var(--wait-progress, 0%), rgb(var(--veil-light) / .05) var(--wait-progress, 0%)); }
html .thread-wait-pill.confirm { background: rgba(217,255,115,.14); color: var(--accent); }
html[data-theme="light"] body .reasoning-details { background: rgb(var(--veil-dark) / .03); }
html .item.reasoning { color: var(--text); }
html .reasoning-preview { color: var(--muted); }
html .thinking-active .reasoning-label::before { background: var(--muted); box-shadow: none; }
html[data-theme="light"] body .item.reasoning { color: var(--text); }
html[data-theme="light"] body .reasoning-preview, html[data-theme="light"] body .reasoning-raw { color: var(--muted); }
html[data-theme="light"] body .thinking-active .reasoning-details { border: 0; box-shadow: none; }
html[data-theme="light"] body .thinking-active .reasoning-label::before { box-shadow: none; }
html[data-theme="light"] body .reasoning-label::after { color: var(--subtle); }
html[data-theme="light"] body .thread-wait-pill { background: rgb(var(--veil-dark) / .05); color: var(--muted); }
html[data-theme="light"] body .thread-wait-pill:hover { background: rgb(var(--veil-dark) / .08); color: var(--text); }
html[data-theme="light"] body .thread-wait-pill[data-wait-until] { background: linear-gradient(to right, rgb(var(--veil-dark) / .1) var(--wait-progress, 0%), rgb(var(--veil-dark) / .04) var(--wait-progress, 0%)); }

/* A chat that waits on purpose shows a small clock in the tree instead of the word „Wait“ (Chris, 08.10.2026); the word
   stays for screen readers, what it waits for in the tooltip. Its circle ends where the other badges end (no outer
   margin at the right, the drawing's inset taken back). */
html .thread-badge.wait { background: currentColor; border: 0; border-radius: 0; color: var(--muted); font-size: 0; height: 14px; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat; margin: 0 -1px 0 3px; padding: 0; width: 14px; }
html[data-theme="light"] body .thread-badge.wait { background: currentColor; color: var(--muted); }

/* Less air between a badge and the tree's „+“ (Chris, 08.10.2026): the „+“ button was 28 px wide around a 13 px sign and
   the row kept 7 px inside at the right; without a touch screen the button is narrower and the row's right inset small.
   Touch keeps its larger targets. */
@media not (pointer: coarse) {
  html .thread-row-actions .thread-add { width: 20px; }
  html .thread-row > .thread-item { padding-right: 3px; }
}

/* „Neuer Chat“ and „Projekt“ as one pair of buttons (Chris, 08.10.2026): the first a main button in Cora yellow, the
   second beside it of the same height and corners without a ground, a fine frame; neither looks like the quiet grey of a
   selected chat any more. */
html .new-thread-button, html .new-project-button { border-radius: 10px; font-family: var(--font); font-size: 12px; font-weight: 650; min-height: 34px; }
html .new-thread-button { background: var(--accent); border: 1px solid var(--accent); color: var(--accent-ink); }
html .new-thread-button:hover { background: color-mix(in srgb, var(--accent) 88%, #fff); border-color: transparent; color: var(--accent-ink); }
html .new-thread-button span { color: inherit; }
html .new-thread-button:disabled { opacity: .45; }
html .new-project-button { background: transparent; border: 1px solid var(--line-strong); color: var(--text); }
html .new-project-button:hover { background: rgb(var(--veil-light) / .05); border-color: var(--line-strong); }
html[data-theme="light"] body .new-thread-button { background: var(--accent); color: var(--accent-ink); }
html[data-theme="light"] body .new-thread-button:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
html[data-theme="light"] body .new-project-button:hover { background: rgb(var(--veil-dark) / .05); }