:root {
--bg: #151515; --bg-alt: #191918; --bg-input: #2a2a28; --fg: #f0efec; --fg-dim: #c3c2b7;
--accent: #c6613f; --accent-fg: #ffffff; --border: rgba(255,255,255,.08); --code-bg: #1a1a19;
--green: #55bf50; --red: #ec7e7e; --user-bg: rgba(255,255,255,.06);
/* Context ring. Its own colour, not --accent: the brand orange read as a warning sitting next to
the Send button, and the ring is a healthy-state gauge most of the time. Light green so it
stays legible on the dark panel without shouting. */
--ring: #89d185;
/* Diff bands. Opaque on purpose: VS Code's theme file gives these as translucent tints
(#347d3926 etc.), and compositing those over this panel's #1b1b1b lands near black — that
mistake made the bands invisible twice, so do not "restore" them to the theme's alpha values.
Don't use --green/--red here either; those are the syntax colours for a type name and a
string. Brightness is set by eye against the panel, not copied from anywhere: bands need to
read clearly while leaving --fg legible on top. The -strong pair marks the characters that
changed inside a modified line, so it has to stay a visible step above its band. */
--diff-add: #1f3b22; --diff-del: #4a1f22;
--diff-add-strong: #2f6d35; --diff-del-strong: #8a2b30;
--diff-add-fg: #7ec27a; --diff-del-fg: #ec7e7e;
}
/* Icon-Font (Variable), Codepoints 0xE000–0xE128.
.ci = generische Icon-Klasse; der Codepoint kommt als Textinhalt (z.B. ). */
@font-face {
font-family: "AuriIcons";
src: url("auriicons.woff2") format("woff2-variations");
font-weight: 400 700;
font-display: block;
}
.ci {
font-family: "AuriIcons";
font-feature-settings: "liga" 0;
font-optical-sizing: auto;
font-style: normal;
font-variation-settings: normal;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
user-select: none;
-webkit-user-select: none;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 14px; line-height: 1.5; color: var(--fg); background: var(--bg); }
#app { display: flex; flex-direction: column; height: 100vh; position: relative; margin-left: 310px; }
#appMenuWrap { position: absolute; top: 8px; left: 12px; z-index: 1001; }
#tlbRightSidebarItems { position: absolute; top: 8px; right: 2px; z-index: 1001; display: flex; align-items: center; gap: 1px; margin: 0 0 4px; padding: 2px; }
.tlbRightSidebarItems-btn { width: 26px; height: 26px; border-radius: 6px; background: none; border: none; color: var(--fg-dim); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.tlbRightSidebarItems-btn:hover { color: var(--fg); background: rgba(255,255,255,.08); }
.tlbRightSidebarItems-btn.active { color: #4285F4; background: rgba(66,133,244,.12); }
.app-menu-btn { width: 32px; height: 32px; border-radius: 8px; background: none; border: none; color: var(--fg-dim); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.app-menu-btn:hover { background: rgba(255,255,255,.06); color: var(--fg); }
.app-menu { position: absolute; top: 38px; right: 0; width: 240px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 12px; padding: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.app-menu.hidden { display: none; }
.am-seclabel { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; color: var(--fg-dim); padding: 8px 10px 4px; }
.am-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: none; color: var(--fg); font-size: 13px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-family: inherit; }
.am-item:hover { background: rgba(255,255,255,.06); }
.am-item .sb-ico { font-size: 14px; color: var(--fg-dim); }
/* Scrollbars (Claude.ai-Style: thin, subtle) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.25); }
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; }
/* Header (Claude.ai-Style) */
#appHeader {
height: 48px; flex: 0 0 auto;
display: flex; align-items: center; justify-content: space-between;
padding: 0 16px;
border-bottom: 1px solid var(--border);
background: var(--bg);
}
.hdr-left { display: flex; align-items: center; gap: 10px; }
.hdr-logo { height: 22px; width: auto; opacity: .9; }
.hdr-title { font-size: 13px; color: var(--fg-dim); font-weight: 500; }
.hdr-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.hdr-right { display: flex; align-items: center; gap: 4px; }
.hdr-icon {
width: 32px; height: 32px; border-radius: 6px;
display: flex; align-items: center; justify-content: center;
color: var(--fg-dim); cursor: pointer; font-size: 15px;
background: none; border: none; transition: background .12s;
}
.hdr-icon:hover { background: rgba(255,255,255,.06); color: var(--fg); }
/* Toolbar (legacy, kept for compatibility) */
.brand { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.brand .bw-logo { height: 29px; width: auto; display: none; }
.brand.bw-on .bw-logo { display: block; }
.tbtn { background: rgba(255,255,255,.05); color: var(--fg-dim); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 4px 10px; height: 28px; cursor: pointer; font-size: 12.5px; font-family: inherit; }
.tbtn:hover { background: rgba(255,255,255,.1); color: var(--fg); }
.tbtn.active { background: var(--accent); color: var(--accent-fg); border-color: transparent; }
/* Messages (Claude.ai-Style: enger, cleaner) */
#messages { flex: 1 1 auto; margin-top: 38px; overflow-y: auto; padding: 16px 24px; display: flex; flex-direction: column; gap: 16px; position: relative; }
.scroll-down-btn { position: fixed; bottom: 115px; left: calc(50% + 155px); transform: translateX(-50%); width: 32px; height: 32px; border-radius: 50%; background: var(--bg-input); border: 1px solid var(--border); color: var(--fg-dim); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.3); z-index: 10; transition: opacity .2s, transform .2s; }
.scroll-down-btn:hover { color: var(--fg); background: var(--bg-alt); }
.scroll-down-btn.hidden { display: none; }
.msg { display: flex; flex-direction: column; gap: 4px; width: 100%; max-width: 720px; margin: 0 auto; }
.msg .role { font-size: 11px; color: var(--fg-dim); text-transform: uppercase; letter-spacing: .5px; }
.msg .bubble { border-radius: 6px; padding: 8px 10px; line-height: 1.5; overflow-wrap: anywhere; }
.msg.user { align-items: flex-end; }
.msg.user .bubble { background: var(--set-user-bg, var(--user-bg)); font-size: var(--set-user-fs, 13px); font-family: var(--set-user-font, inherit); color: var(--set-user-fg, inherit); align-self: flex-end; max-width: 90%; }
.msg-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.msg-att-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--bg-input); border-radius: 4px; padding: 2px 6px; font-size: 11px; max-width: 100%; }
.msg-att-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-att-img { max-height: 28px; border-radius: 3px; cursor: zoom-in; }
.lightbox { position: absolute; inset: 0; z-index: 100; background: rgba(0,0,0,.8); display: flex; align-items: center; justify-content: center; cursor: zoom-out; padding: 24px; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 6px; box-shadow: 0 8px 40px rgba(0,0,0,.6); }
.msg-att-file { display: inline-flex; align-items: center; gap: 4px; background: var(--code-bg); border: 1px solid var(--border); border-radius: 4px; padding: 2px 8px; font-size: 12px; }
.msg-selection { margin-bottom: 6px; }
.sel-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; background: var(--code-bg); border: 1px solid var(--border); border-radius: 4px; padding: 2px 8px; font-size: 11px; cursor: pointer; }
.sel-chip:hover { border-color: var(--fg-dim); }
.sel-ico { opacity: .7; }
.sel-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-range { opacity: .65; font-variant-numeric: tabular-nums; }
.debug-break { align-self: stretch; margin: 8px 4px; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--border); border-left: 3px solid var(--fg-dim); background: var(--bg-alt); font-size: 12px; }
.debug-break.exc { border-left-color: var(--red); }
.db-head { font-weight: 600; overflow-wrap: anywhere; }
.db-where { color: var(--fg-dim); font-family: "Cascadia Code", Consolas, monospace; margin-top: 2px; overflow-wrap: anywhere; }
.db-actions { margin-top: 6px; }
.db-btn { background: var(--bg-input); color: var(--fg); border: 1px solid var(--border); border-radius: 4px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.db-btn:hover { border-color: var(--fg-dim); }
.msg.assistant .bubble { background: transparent; font-size: var(--set-agent-fs, 14px); font-family: var(--set-agent-font, inherit); color: var(--set-agent-fg, inherit); padding: 0; }
.msg .bubble p { margin: 0 0 8px; } .msg .bubble p:last-child { margin-bottom: 0; }
.msg .bubble pre { background: var(--code-bg); border: 1px solid var(--border); border-radius: 4px; padding: 8px; overflow-x: auto; margin: 8px 0; }
.msg .bubble code { font-family: "Cascadia Code", Consolas, monospace; font-size: 12px; }
.msg .bubble :not(pre) > code { background: #212121; border: 1px solid #383838; color: #ec6f57; padding: 1px 6px; border-radius: 5px; font-size: 0.88em; }
.msg .bubble a { color: var(--green); }
.msg .bubble ul, .msg .bubble ol { margin: 4px 0; padding-left: 20px; }
.msg .bubble h1, .msg .bubble h2, .msg .bubble h3, .msg .bubble h4, .msg .bubble h5, .msg .bubble h6 { margin: 12px 0 6px; font-weight: 600; color: var(--fg); }
.msg .bubble h1 { font-size: 1.4em; } .msg .bubble h2 { font-size: 1.25em; } .msg .bubble h3 { font-size: 1.1em; }
.msg .bubble h4, .msg .bubble h5, .msg .bubble h6 { font-size: 1em; }
.msg .bubble h2 { border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.msg .bubble table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 13px; }
.msg .bubble th, .msg .bubble td { border: 1px solid var(--border); padding: 6px 10px; }
.msg .bubble th { background: var(--code-bg); font-weight: 600; }
.msg .bubble tr:nth-child(even) td { background: rgba(255,255,255,.02); }
.note { color: var(--fg-dim); font-size: 12px; font-style: italic; }
.note.err { color: var(--red); font-style: normal; }
.compacted-divider { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--fg-dim); font-size: 12px; }
.compacted-divider::before, .compacted-divider::after { content: ""; flex: 1; height: 1px; background: repeating-linear-gradient(90deg, var(--fg-dim) 0, var(--fg-dim) 3px, transparent 3px, transparent 7px); opacity: .4; }
.compacted-divider span { white-space: nowrap; }
/* Lazy-Load-Sentinel: markiert, dass oben noch ältere Nachrichten nachgeladen werden.
Diskret, aber einladend (leichter Puls) — CD-1:1 "load older on scroll up". */
.load-older-sentinel { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 8px 0 16px; padding: 8px 0; color: var(--fg-dim); font-size: 12px; cursor: default; user-select: none; }
.load-older-sentinel::before, .load-older-sentinel::after { content: ""; flex: 1; height: 1px; background: repeating-linear-gradient(90deg, var(--fg-dim) 0, var(--fg-dim) 3px, transparent 3px, transparent 7px); opacity: .3; }
.load-older-sentinel span { white-space: nowrap; animation: loadOlderPulse 2.4s ease-in-out infinite; }
@keyframes loadOlderPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
/* CD-Layout (1:1 Claude.ai): saubere Assistant-Bubble, KEINE Rail, KEINE Dots.
.turn/.node bleiben als DOM-Wrapper, sind aber visuell neutral (kein Rail, keine Punkte).
Inhalt zentriert in 720px-Spalte wie CD (.message { max-width:720px; margin:0 auto }). */
.turn { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 720px; margin: 0 auto; }
/* Start-Spinner in leerem Chat zentriert (vertikal + horizontal) — wie der Lade-Kreis.
Nur aktiv, wenn KEINE .msg da ist (showThinking setzt die Klasse, addMsg entfernt sie). */
#messages.spinner-center { justify-content: center; align-items: center; }
#messages.spinner-center > .turn { width: auto; max-width: none; }
.node { position: relative; }
.node-dot { display: none; } /* CD hat keine Dots — Fehler-State ist im Tool-Detail (rot) sichtbar */
.node-main { line-height: 1.5; overflow-wrap: anywhere; }
/* Erklärender Agent-Text im Rail (vor Tool-Cards) folgt der Agent-Schriftgröße aus den Settings —
wie die Agent-Bubble, nur im Rail statt in .bubble. Tool-Cards (.tool-node/.perm-node) bleiben unangetastet. */
.text-node .node-main { font-size: var(--set-agent-fs, 13px); font-family: var(--set-agent-font, inherit); color: var(--set-agent-fg, inherit); background: var(--set-agent-bg, transparent); border-radius: 6px; }
/* Padding nur wenn ein Agent-Hintergrund gesetzt ist (sonst bleibt das Rail-Layout unverändert). */
html.set-agent-bg-on .text-node .node-main { padding: 4px 8px; }
.node-main p { margin: 0 0 8px; } .node-main p:last-child { margin-bottom: 0; }
.node-main pre { background: var(--code-bg); border: 1px solid var(--border); border-radius: 4px; padding: 8px; overflow-x: auto; margin: 8px 0; }
.node-main code { font-family: "Cascadia Code", Consolas, monospace; font-size: 12px; }
.node-main :not(pre) > code { background: #212121; border: 1px solid #383838; color: #ec6f57; padding: 1px 6px; border-radius: 5px; font-size: 0.88em; }
.node-main a { color: var(--green); }
.node-main ul, .node-main ol { margin: 4px 0; padding-left: 20px; }
.node-main h1, .node-main h2, .node-main h3, .node-main h4 { margin: 12px 0 6px; font-weight: 600; color: var(--fg); }
.node-main table { width: 100%; border-collapse: collapse; margin: 8px 0; }
.node-main th, .node-main td { border: 1px solid var(--border); padding: 6px 10px; }
.node-main th { background: var(--code-bg); font-weight: 600; }
/* Fenced code blocks — a header bar over the carrying the language and a Copy button, so a
suggested command can be lifted without hand-selecting it. Deliberately always visible rather
than revealed on hover: in a tool window this narrow, a control that only appears under the
pointer is one nobody finds. The bar borrows .diff .dhead's look so the two read as a set. */
.cblock { margin: 8px 0; }
.cbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px 2px 8px; background: var(--bg-input); border: 1px solid var(--border); border-bottom: 0; border-radius: 4px 4px 0 0; }
.cbar .clang { font-family: "Cascadia Code", Consolas, monospace; font-size: 11px; color: var(--fg-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccopy { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; background: transparent; border: 0; border-radius: 3px; padding: 2px 6px; color: var(--fg-dim); font-family: inherit; font-size: 11px; line-height: 1.4; cursor: pointer; }
.ccopy:hover { background: var(--bg-alt); color: var(--fg); }
.ccopy:focus-visible { outline: 1px solid var(--fg-dim); }
.ccopy .cico { flex: 0 0 auto; }
.ccopy.copied { color: var(--green); }
.ccopy.failed { color: var(--red); }
/* The keeps its own border and butts up under the bar. Both containers are listed because
.msg .bubble pre outweighs a bare .cblock pre. */
.node-main .cblock pre, .msg .bubble .cblock pre { margin: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
/* Überschreibt die Kopfleiste: kein Balken mehr — nur ein kleines Copy-Symbol, das beim Überfahren des
Codeblocks rechts oben einblendet (Sprache bleibt als Tooltip am , data-lang). */
/* Copy-Symbol neben Inline-Code: schwebt per position:fixed, poppt bei Mouseover auf. */
.inline-copy { position: fixed; z-index: 50; width: 20px; height: 20px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
background: var(--bg-input); color: var(--fg-dim); border: 1px solid var(--border); border-radius: 5px; cursor: pointer;
opacity: 0; transform: scale(.7); pointer-events: none; transition: opacity .12s, transform .12s; }
.inline-copy.show { opacity: 1; transform: scale(1); pointer-events: auto; }
.inline-copy:hover { color: var(--fg); background: var(--bg-alt); }
.inline-copy.copied { color: var(--green); }
.inline-copy.failed { color: var(--red); }
.cblock { position: relative; }
.cbar { position: absolute; top: 6px; right: 6px; left: auto; padding: 0; background: transparent; border: 0; border-radius: 0; z-index: 2; pointer-events: none; }
.cbar .clang { display: none; }
.cbar .ccopy { pointer-events: auto; opacity: 0; transform: translateX(4px); transition: opacity .15s, transform .15s, background .15s;
background: var(--bg-input); border: 1px solid var(--border); border-radius: 5px; padding: 4px 5px; }
.cbar .ccopy .clabel { display: none; }
.cblock:hover .ccopy, .cbar .ccopy:focus-visible, .cbar .ccopy.copied, .cbar .ccopy.failed { opacity: 1; transform: none; }
.cbar .ccopy .cico { width: 14px; height: 14px; }
.node-main .cblock pre, .msg .bubble .cblock pre { border-top-left-radius: 4px; border-top-right-radius: 4px; padding-right: 40px; }
/* Tool cards (Claude.ai-Style: subtile Rows mit Hintergrund) */
.tool { border: 0; border-radius: 6px; background: rgba(255,255,255,.03); overflow: visible; }
.tool-head { display: flex; align-items: center; gap: 8px; padding: 6px 10px; cursor: pointer; user-select: none; }
.tool-head .tname { font-weight: 500; color: var(--fg); flex: 0 0 auto; white-space: nowrap; font-size: 13px; }
.tool-head .tsummary { color: var(--fg-dim); font-family: "Cascadia Code", Consolas, monospace; font-size: 12px; flex: 1 1 auto; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.tool-head .chev { flex: 0 0 auto; color: var(--fg-dim); transition: transform .15s; margin-left: auto; font-size: 10px; }
.tool.open .chev { transform: rotate(90deg); }
.tool-body { display: none; padding: 4px 10px 8px 18px; }
.tool.open .tool-body { display: block; }
.tool-body pre { margin: 0; background: var(--code-bg); padding: 8px; border-radius: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
/* ===== CD-Tool-Grouping (3-Level: Summary → Rows → Detail) ===== */
/* Level 0: Summary-Button (eine Zeile pro Gruppe, z.B. "verwendet 6 Tools") */
.toolgroup { display: flex; flex-direction: column; }
.toolgroup-summary {
display: flex; align-items: center; gap: 6px;
padding: 0; background: none; border: none; font-family: inherit;
font-size: 12px; line-height: 1.42857; color: var(--fg-dim);
cursor: pointer; user-select: none; max-width: 100%; align-self: flex-start; text-align: left;
}
.toolgroup-summary:hover { color: var(--fg); }
.toolgroup-summary .tgs-label { overflow-wrap: anywhere; }
.toolgroup-summary .chev { flex: 0 0 auto; width: 14px; height: 14px; color: var(--fg-dim); transition: transform .15s; font-size: 10px; }
.toolgroup-summary:hover .chev { color: var(--fg); }
.toolgroup.open .toolgroup-summary .chev { transform: rotate(90deg); }
/* Level 1: Tool-Liste (Rows) */
.toolgroup-list { display: none; flex-direction: column; align-items: flex-start; gap: 4px; margin: 0; padding: 6px 0 0; }
.toolgroup.open .toolgroup-list { display: flex; }
.toolrow { width: 100%; }
.tool-row {
display: flex; align-items: center; gap: 8px;
padding: 6px 10px; background: rgba(255,255,255,.03); border-radius: 6px;
font-size: 14px; line-height: 1.42857; color: var(--fg-dim);
cursor: pointer; max-width: 100%; width: 100%; text-align: left;
}
.tool-row:hover { background: rgba(255,255,255,.06); color: var(--fg); }
.tool-row .tool-label { flex: 1; min-width: 0; color: var(--fg-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-row:hover .tool-label { color: var(--fg); }
.tool-row .chev { flex: 0 0 auto; width: 14px; height: 14px; color: var(--fg-dim); opacity: .6; transition: transform .15s; margin-left: auto; font-size: 10px; }
.tool-row:hover .chev { color: var(--fg); opacity: 1; }
.tool-row.expanded .chev { transform: rotate(90deg); }
/* Level 2: Detail (indentiert, kein Border) */
.tool-detail { display: none; width: 100%; padding: 6px 0 0 10px; position: relative; }
.tool-detail.open { display: block; }
.tool-detail-inner { display: flex; width: 100%; }
.tool-detail-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--fg-dim); white-space: pre-wrap; word-break: break-word; }
.tool-detail-params { display: flex; flex-direction: column; gap: 4px; }
.tool-detail-params .param { word-break: break-word; font-size: 13px; }
.tool-detail-params .param-key { font-family: "Cascadia Code", Consolas, monospace; opacity: .7; }
.tool-detail-params .param-val { font-family: "Cascadia Code", Consolas, monospace; }
.tool-detail-empty { color: var(--fg-dim); opacity: .6; font-size: 13px; font-style: italic; }
/* Bash-Befehl: grüner Code-Block */
.tool-detail-code { background: rgba(0,0,0,.3); border-radius: 6px; padding: 10px 12px; font-family: "Cascadia Code", Consolas, monospace; font-size: 12px; line-height: 1.5; color: var(--fg); overflow-x: auto; white-space: pre-wrap; word-break: break-all; }
.tool-result-img { display: block; max-width: 100%; max-height: 320px; margin-top: 6px; border-radius: 6px; border: 1px solid var(--border); cursor: zoom-in; object-fit: contain; background: rgba(0,0,0,.25); }
.tool-result-img.full { max-height: none; cursor: zoom-out; }
/* Syntax-Highlighting (markdown.js: hl) — Dark+-ähnliche Palette */
.hl-k { color: #c586c0; } .hl-s { color: #ce9178; } .hl-c { color: #6a9955; font-style: italic; } .hl-n { color: #b5cea8; }
.hl-add { color: #7ec27a; background: rgba(85,191,80,.10); display: inline-block; width: 100%; } .hl-del { color: #ec7e7e; background: rgba(236,126,126,.10); display: inline-block; width: 100%; }
.hl-hunk { color: #569cd6; } .hl-meta { color: #8a8a85; }
.hl-f { color: #dcdcaa; } .hl-v { color: #9cdcfe; } .hl-p { color: #569cd6; } .hl-t { color: #4ec9b0; } .hl-key { color: #9cdcfe; }
.tool-detail-code .cmd-prompt { color: var(--fg-dim); }
/* Tool-Ergebnis (Output) */
.tool-detail-output { margin: 0; background: var(--code-bg); border-radius: 4px; padding: 8px; font-size: 12px; line-height: 1.5; color: var(--fg-dim); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 320px; overflow-y: auto; }
.tool-detail-output.err { color: var(--red); }
/* Diff in Detail: etwas enger als in der Bubble */
.tool-detail-content .diff { font-size: 12px; }
/* AskUserQuestion — Fragen + Optionen lesbar (statt rohem JSON) */
.auq-q { margin-bottom: 10px; }
.auq-q:last-child { margin-bottom: 0; }
.auq-qt { font-size: 13px; color: var(--fg); margin-bottom: 6px; }
.auq-hdr { display: inline-block; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); background: var(--bg-alt); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; margin-right: 4px; vertical-align: middle; }
.auq-opts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.auq-opts li { border: 1px solid var(--border); border-radius: 5px; padding: 6px 8px; background: var(--bg-alt); }
.auq-lbl { font-weight: 600; color: var(--fg); }
.auq-dsc { display: block; font-size: 11px; color: var(--fg-dim); margin-top: 2px; }
/* AskUserQuestion interaktiv (klickbare Karte) */
.auq-card { border: 1px solid var(--accent); border-radius: 6px; background: var(--bg-alt); padding: 10px; }
.auq-multi { font-size: 10px; color: var(--fg-dim); font-style: italic; }
.auq-opt { display: block; width: 100%; text-align: left; border: 1px solid var(--border); border-radius: 5px; padding: 6px 8px; background: var(--bg-alt); color: var(--fg); cursor: pointer; font: inherit; }
.auq-opt:hover { border-color: var(--accent); }
.auq-opt.sel { border-color: var(--accent); background: rgba(204, 122, 59, .12); }
.auq-other-in { width: 100%; box-sizing: border-box; border: 1px dashed var(--border); border-radius: 5px; padding: 6px 8px; background: var(--bg); color: var(--fg); font: inherit; }
.auq-other-in:focus { outline: none; border-color: var(--accent); }
.auq-other-in.sel { border-style: solid; border-color: var(--accent); background: rgba(204, 122, 59, .12); }
.auq-actions { display: flex; gap: 6px; margin-top: 10px; align-items: center; }
.auq-submit { border: 1px solid var(--accent); border-radius: 4px; padding: 5px 14px; cursor: pointer; background: var(--accent); color: var(--accent-fg); font-weight: 600; }
.auq-submit:disabled { opacity: .4; cursor: not-allowed; }
.auq-card.resolved { opacity: .6; }
.auq-card.resolved .auq-opt, .auq-card.resolved .auq-other-in, .auq-card.resolved .auq-submit { pointer-events: none; }
/* Diff & permission */
.diff { border: 1px solid #333; border-radius: 8px; overflow: hidden; font-family: "Cascadia Code", Consolas, monospace; font-size: 12.5px; background: #181818; }
.diff .dhead { display: flex; gap: 8px; align-items: center; justify-content: flex-end; padding: 5px 10px; background: #1f1f1f; border-bottom: 1px solid #333; font-size: 11px; }
.diff .dfile { margin-right: auto; color: var(--fg); font-weight: 600; font-family: inherit; }
.diff .dstat { padding: 1px 6px; border-radius: 4px; font-weight: 600; }
.diff .dstat.add { color: var(--diff-add-fg); background: rgba(85,191,80,.16); } .diff .dstat.del { color: var(--diff-del-fg); background: rgba(236,126,126,.16); }
/* Lange Zeilen umbrechen (wie im Claude-Diff), Panel scrollt senkrecht ab ~28 Zeilen. */
.diff .dbody { max-height: 460px; overflow: auto; }
.diff .dr { display: flex; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.diff .dn { flex: 0 0 auto; width: 44px; padding: 0 8px 0 4px; text-align: right; color: var(--fg-dim); opacity: .7; user-select: none; }
.diff .dr.add .dn { color: var(--diff-add-fg); opacity: .9; } .diff .dr.del .dn { color: var(--diff-del-fg); opacity: .9; }
.diff .ds { flex: 0 0 auto; width: 16px; text-align: center; color: var(--fg-dim); user-select: none; }
.diff .dr.add .ds { color: var(--diff-add-fg); } .diff .dr.del .ds { color: var(--diff-del-fg); }
.diff .dt { flex: 1 1 auto; min-width: 0; padding-right: 12px; }
.diff .dr.add { background: var(--diff-add); } .diff .dr.del { background: var(--diff-del); }
.diff .dr.meta { color: var(--fg-dim); }
/* The changed characters inside a modified line, over the line's own band. */
.diff .dc.dca { background: var(--diff-add-strong); border-radius: 2px; }
.diff .dc.dcd { background: var(--diff-del-strong); border-radius: 2px; }
.dnote { color: var(--fg-dim); font-size: 11px; margin-bottom: 4px; cursor: help; }
.tool-body .diff + .diff { margin-top: 6px; }
.open-diff { display: block; margin: 6px 0 0 auto; width: auto; opacity: .75; margin-top: 6px; background: var(--bg-input); color: var(--fg); border: 1px solid var(--border); border-radius: 4px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.open-diff:hover { border-color: var(--fg-dim); }
.perm { border: 1px solid var(--accent); border-radius: 6px; background: var(--bg-alt); padding: 10px; }
.perm .ptitle { font-weight: 600; margin-bottom: 6px; }
.perm .pbody pre { background: var(--code-bg); padding: 8px; border-radius: 4px; overflow-x: auto; }
.perm .pactions { display: flex; gap: 6px; margin-top: 8px; }
.perm button { border: 1px solid var(--border); border-radius: 4px; padding: 4px 10px; cursor: pointer; }
.perm .allow { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.perm .prow { display: flex; gap: 10px; margin: 3px 0; align-items: baseline; }
.perm .pk { flex: 0 0 64px; color: var(--fg-muted, #8a8a85); font-size: 12px; }
.perm .pv { flex: 1; min-width: 0; word-break: break-word; }
.perm pre.pv { margin: 0; background: var(--code-bg); padding: 6px 8px; border-radius: 4px; white-space: pre-wrap; max-height: 180px; overflow: auto; font-size: 12px; }
.perm .pdetails { margin-top: 6px; font-size: 12px; color: var(--fg-muted, #8a8a85); }
.perm .pdetails summary { cursor: pointer; }
.perm .pdetails pre { margin-top: 4px; }
.perm .allow-always { background: transparent; color: var(--fg); }
.perm .deny { background: transparent; color: var(--fg); }
.perm.resolved { opacity: .6; }
/* Thinking / Busy-Indikator (wie CD: 3 animierte Punkte) */
.thinking { display: flex; gap: 5px; align-items: center; color: var(--fg); font-style: italic; font-size: 0.9em; padding: 4px 0; margin-top: -6px; }
.thinking .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse 1.2s infinite; }
.thinking .dot:nth-child(2) { animation-delay: .2s; } .thinking .dot:nth-child(3) { animation-delay: .4s; }
.compact-label { font-size: 12.5px; color: var(--fg-dim); margin-left: 8px; font-style: normal; }
@keyframes pulse { 0%,100% { opacity: .3; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.1); } }
/* Streamed extended-thinking (collapsible) */
/* Borderless for the same reason as .tool above — VS Code prints "Thought for 4s" as a bare
dim line on the rail, not a boxed card. */
.think { border: 0; border-radius: 0; background: transparent; overflow: visible; }
.think-head { display: flex; align-items: baseline; gap: 6px; padding: 0; cursor: pointer; user-select: none; color: var(--fg-dim); font-style: italic; }
.think-head .chev { flex: 0 0 auto; color: var(--fg-dim); transition: transform .15s; }
.think.open .chev { transform: rotate(90deg); }
.think-body { display: none; padding: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--fg-dim); font-style: italic; font-size: 12px; line-height: 1.5; max-height: 240px; overflow-y: auto; }
.think.open .think-body { display: block; }
#messages.hide-thinking .think-node { display: none; }
/* Status bar */
#statusbar { display: none; } /* entfernt (Mirko 08.10): redundant mit Stop-Button-Status */
/* Composer (DAI-Style) */
#composer { flex: 0 0 auto; padding: 0 24px 16px; background: transparent; }
#inbox { max-width: 768px; margin: 0 auto; background: #1f1f1e; border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 10px 12px 8px; box-shadow: 0 2px 12px rgba(0,0,0,.28); }
#inbox:focus-within { border-color: rgba(255,255,255,.26); }
#attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
#attachments .chip { display: flex; align-items: center; gap: 4px; background: var(--bg-input); border-radius: 4px; padding: 2px 6px; font-size: 11px; }
#attachments img { max-height: 28px; border-radius: 3px; }
#attachments .elem-chip { background: rgba(66,133,244,.12); border: 1px solid rgba(66,133,244,.3); color: #8ab4f8; font-family: monospace; }
#attachments .elem-chip .elem-chip-ico { font-family: "Segoe MDL2 Assets"; font-size: 12px; }
#queueChips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
#queueChips .qchip { position: relative; display: flex; align-items: center; gap: 6px; max-width: 100%;
background: rgba(128,128,128,.14); border: 1px dashed rgba(128,128,128,.45); border-radius: 6px;
padding: 4px 22px 4px 8px; font-size: 12px; color: var(--fg-dim, #999); opacity: .82; }
#queueChips .qchip .qchip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }
#queueChips .qchip .qchip-x { position: absolute; top: 1px; right: 3px; cursor: pointer; border: none;
background: none; color: var(--fg-dim, #999); font-size: 13px; line-height: 1; padding: 2px; border-radius: 3px; }
#queueChips .qchip .qchip-x:hover { color: var(--fg, #eee); background: rgba(255,255,255,.08); }
#input { width: 100%; resize: none; max-height: 200px; min-height: 24px; overflow-y: auto; background: transparent; color: #f0efec; border: none; outline: none; padding: 2px 4px; font-family: inherit; font-size: 14px; line-height: 22px; white-space: pre-wrap; word-break: break-word; }
#input::placeholder { color: #6b6a67; }
.inbar { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.inleft { display: flex; align-items: center; gap: 6px; position: relative; }
.inicon { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: #c3c2b7; font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.inicon:hover { background: rgba(255,255,255,.12); }
.inicon.active { border-color: var(--accent); color: var(--accent); }
.modebtn { display: flex; align-items: center; gap: 6px; background: none; border: none; color: #898781; font-size: 12.5px; padding: 5px 9px; border-radius: 8px; cursor: pointer; font-family: inherit; }
.modebtn:hover { background: rgba(255,255,255,.06); color: #c3c2b7; }
.modebtn .chev { font-size: 14px; opacity: .7; line-height: 1; }
.ctx-ring-btn { display: flex; align-items: center; gap: 5px; background: none; border: none; color: #898781; font-size: 11px; padding: 4px 8px; border-radius: 8px; cursor: pointer; font-family: inherit; }
.ctx-ring-btn:hover { background: rgba(255,255,255,.06); color: #c3c2b7; }
.ctx-ring { transform: rotate(-90deg); }
.ctx-ring .ring-bg { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 3; }
.ctx-ring .ring-fg { fill: none; stroke: #4a9eff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 94.2; stroke-dashoffset: 94.2; transition: stroke-dashoffset .4s ease, stroke .3s; }
#ctxLabel { font-variant-numeric: tabular-nums; }
.sendbtn { width: 32px; height: 32px; border-radius: 50%; background: #c6613f; border: none; color: #fff; font-size: 17px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.sendbtn:hover { background: #d97757; }
.sendbtn.stop { background: #ec7e7e; }
.sendbtn.hidden { display: none; }
/* Voice-Messages (Diktat): Mic-Button + Aufnahme-Status (wie auri.exe). */
#rec { display: inline-flex; align-items: center; justify-content: center; }
#rec.recording { color: #ec7e7e; border-color: #ec7e7e; animation: recpulse 1.2s ease-in-out infinite; }
@keyframes recpulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
#recstatus { display: none; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; color: var(--fg-dim); }
#recstatus .recdot { width: 9px; height: 9px; border-radius: 50%; background: #ec7e7e; animation: recpulse 1.2s infinite; flex: none; }
#recstatus .rectxt { color: #ec7e7e; font-weight: 500; }
#recstatus #rectime { font-variant-numeric: tabular-nums; color: var(--fg); }
#reclevelwrap { flex: 1; max-width: 180px; height: 4px; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; }
#reclevel { display: block; height: 100%; width: 0; background: #ec7e7e; transition: width .08s linear; }
/* TTS (Walkie-Talkie): Play-Button inline hinter den letzten Satz, nur bei Hover sichtbar. */
.tts-btn { display: inline-flex; align-items: center; justify-content: center; margin-left: 6px; width: 22px; height: 22px; border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--fg-dim); cursor: pointer; font-size: 12px; line-height: 1; vertical-align: middle; opacity: 0; transition: opacity .12s ease; }
.node-main:hover .tts-btn, .tts-btn:focus-visible { opacity: 1; }
.tts-btn:hover { background: var(--bg-input); color: var(--fg); border-color: var(--accent); }
.tts-btn.busy { color: var(--accent); border-color: var(--accent); opacity: 1; animation: recpulse 1.2s ease-in-out infinite; }
/* Hand-Traffic-Log (Thin-Client): aufklappbares Panel unter dem Composer. */
#handlog { flex: 0 0 auto; border-top: 1px solid var(--border); background: var(--bg-alt); }
#handlogBar { display: flex; align-items: center; gap: 8px; padding: 4px 10px; }
#handlogBar .hl-title { font-size: 12px; font-weight: 600; color: var(--fg-dim); }
#handlogBar .hl-badge { font-size: 11px; background: var(--accent); color: var(--accent-fg); border-radius: 9px; padding: 0 7px; min-width: 18px; text-align: center; }
#handlogBar .spacer { flex: 1 1 auto; }
#handlogBody { max-height: 220px; overflow-y: auto; border-top: 1px solid var(--border); padding: 4px 10px; font-family: ui-monospace, Consolas, monospace; font-size: 11px; line-height: 1.5; }
#handlog.collapsed #handlogBody { display: none; }
#handlog.collapsed #handlogToggle { transform: rotate(-90deg); }
.hl-line { display: flex; gap: 8px; padding: 1px 0; white-space: nowrap; }
.hl-line .hl-dir { flex: 0 0 auto; width: 34px; font-weight: 700; }
.hl-line.in .hl-dir { color: var(--accent); }
.hl-line.out .hl-dir { color: var(--fg-dim); }
.hl-line.err .hl-detail { color: #e5534b; }
.hl-line .hl-time { flex: 0 0 auto; color: var(--fg-dim); opacity: .7; }
.hl-line .hl-hand { flex: 0 0 auto; font-weight: 600; }
.hl-line .hl-detail { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; color: var(--fg-dim); }
.hidden { display: none !important; }
/* Popover (bottom-anchored, opens upward over the composer): context / usage / model */
.popover { position: absolute; bottom: 80px; right: 8px; left: 8px; max-height: 60%; overflow-y: auto; z-index: 60; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 -6px 28px rgba(0,0,0,.55); padding: 12px; font-size: 12px; }
/* Settings-Dialog: zentriert (statt bottom-anchored wie die kleinen Popovers) */
.popover.centered { top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); width: 70%; min-width: 480px; max-width: calc(100% - 32px); max-height: 82%; }
.popover h3 { margin: 0 0 10px; font-size: 13px; }
.popover .close-x { float: right; cursor: pointer; color: var(--fg-dim); border: none; background: none; font-size: 16px; }
.kv { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
.kv .k { color: var(--fg-dim); } .kv .v { text-align: right; overflow-wrap: anywhere; font-family: "Cascadia Code", Consolas, monospace; }
.sec { margin: 10px 0 4px; color: var(--fg-dim); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
/* context window bar + breakdown */
.ctxhead { font-size: 13px; margin-bottom: 2px; }
.ctxsub { color: var(--fg-dim); margin-bottom: 8px; }
.ctxbar { height: 10px; border-radius: 5px; background: var(--border); overflow: hidden; display: flex; margin-bottom: 10px; }
.ctxbar span { height: 100%; display: block; }
.brk { display: grid; grid-template-columns: 14px 1fr auto auto; gap: 6px 8px; align-items: center; }
.brk .sw { width: 10px; height: 10px; border-radius: 2px; }
.brk .nm { } .brk .tk { text-align: right; font-family: "Cascadia Code", Consolas, monospace; color: var(--fg-dim); }
.brk .pc { text-align: right; color: var(--fg-dim); width: 48px; }
.files { margin: 4px 0 0; padding-left: 16px; } .files li { padding: 1px 0; font-family: "Cascadia Code", Consolas, monospace; font-size: 11px; }
/* MCP servers (/mcp) */
.mcp-item { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; border-top: 1px solid var(--border); }
.mcp-item:first-of-type { border-top: none; }
.mcp-body { flex: 1; min-width: 0; }
.mcp-name { font-size: 12px; }
.mcp-detail { color: var(--fg-dim); font-size: 11px; font-family: "Cascadia Code", Consolas, monospace; overflow-wrap: anywhere; }
.mcp-status { font-size: 11px; white-space: nowrap; color: var(--fg-dim); }
.mcp-status.ok { color: #3fb950; } .mcp-status.bad { color: #e5534b; } .mcp-status.warn { color: #cc7a3b; }
.mcp-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; background: var(--fg-dim); }
.mcp-dot.ok { background: #3fb950; } .mcp-dot.bad { background: #e5534b; } .mcp-dot.warn { background: #cc7a3b; }
.mcp-refresh { float: right; margin-right: 8px; cursor: pointer; color: var(--fg-dim); border: none; background: none; font-size: 14px; line-height: 1; }
.mcp-refresh:hover { color: var(--fg); }
.mcp-group { margin: 10px 0 2px; color: var(--fg-dim); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.mcp-group + .mcp-item { border-top: none; }
.mcp-hint { margin-top: 3px; color: var(--fg-dim); font-size: 11px; }
.mcp-authbtn { background: transparent; border: none; padding: 0; font: inherit; font-size: 11px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.mcp-authbtn:hover { filter: brightness(1.2); }
.mcp-authbtn:disabled { cursor: default; text-decoration: none; filter: none; }
.mcp-retry { background: transparent; border: 1px solid #e5534b; border-radius: 4px; padding: 2px 8px; font-size: 11px; color: #e5534b; cursor: pointer; white-space: nowrap; margin-left: 6px; }
.mcp-retry:hover { background: #e5534b22; }
.mcp-retry:disabled { cursor: default; opacity: 0.5; }
.mcp-err { color: #e5534b; }
.mcp-foot { margin-top: 10px; }
/* usage bars */
.uitem { margin: 10px 0; }
.utitle { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.ubar { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.ufill { height: 100%; background: var(--accent); border-radius: 4px; transition: width .3s; }
.ureset { color: var(--fg-dim); font-size: 11px; margin-top: 3px; }
.ufill.warn { background: #d29922; }
.ufill.crit { background: var(--red); }
.ulink { color: var(--green); font-size: 12px; text-decoration: none; cursor: pointer; }
.ulink:hover { text-decoration: underline; }
/* usage insights (Day/Week toggle + callouts) */
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; margin: 2px 0 4px; }
.seg-btn { background: transparent; border: none; color: var(--fg-dim); font: inherit; font-size: 12px; padding: 3px 12px; cursor: pointer; }
.seg-btn.on { background: var(--bg-input); color: var(--fg); }
.insight { margin: 8px 0; font-size: 12px; }
.insight .note { margin-top: 2px; }
/* selectable rows (model/mode popover) */
.opt { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border-radius: 6px; cursor: pointer; }
.opt:hover { background: var(--bg-input); }
.opt.sel { background: var(--bg-input); }
.opt .oicon { width: 18px; text-align: center; color: var(--fg-dim); }
.opt .obody { flex: 1; }
.opt .oname { font-weight: 600; }
.opt .odesc { color: var(--fg-dim); font-size: 11px; }
.opt .oratio { align-self: center; flex: none; color: var(--fg-dim); font-size: 11px; font-variant-numeric: tabular-nums; padding: 1px 6px; border: 1px solid var(--border); border-radius: 999px; white-space: nowrap; }
.opt .ochk { color: var(--accent); }
/* effort slider */
.effort-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-top: 1px solid var(--border); margin-top: 6px; }
.effort-row .elabel { flex: 1; } .effort-row .elabel small { color: var(--fg-dim); }
.dots { display: flex; gap: 8px; align-items: center; }
.dots .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border); cursor: pointer; }
.dots .dot.on { background: var(--accent); }
.mini-toggle { background: transparent; color: var(--fg); border: 1px solid var(--border); border-radius: 12px; padding: 2px 12px; font-size: 11px; cursor: pointer; }
.mini-toggle:hover { border-color: var(--accent); }
.mini-toggle.on { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.elabel .eicon { vertical-align: -2px; margin-right: 4px; color: var(--fg-dim); }
.effort-slider { -webkit-appearance: none; appearance: none; width: 130px; height: 6px; border-radius: 3px; background: var(--border); outline: none; cursor: pointer; }
.effort-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg-alt); cursor: pointer; }
/* composer popover (bottom-anchored): + menu, / palette, mode */
.cpop { position: absolute; bottom: 70px; left: 8px; right: 8px; max-height: 50%; overflow-y: auto; z-index: 60; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 -6px 28px rgba(0,0,0,.5); padding: 6px; font-size: 12px; }
.menu-item { display: flex; gap: 4px; align-items: center; width: 100%; text-align: left; background: transparent; color: var(--fg); border: none; border-radius: 6px; padding: 8px; cursor: pointer; font-size: 12px; }
.menu-item:hover, .menu-item.sel { background: var(--bg-input); }
.menu-item .mi-icon { width: auto; text-align: center; color: var(--fg-dim); }
.menu-item .mi-desc { color: var(--fg-dim); font-size: 11px; }
.palette-input { width: 100%; background: var(--bg-input); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; margin-bottom: 4px; font-family: inherit; font-size: 13px; }
.cpop .sec { padding: 0 4px; }
.cmd-name { font-family: "Cascadia Code", Consolas, monospace; }
/* first-run onboarding banner */
.setup-banner { flex: 0 0 auto; background: var(--bg-alt); border-bottom: 1px solid var(--border); border-left: 3px solid var(--accent); padding: 10px 12px; font-size: 12px; }
.setup-banner.hidden { display: none; }
.setup-banner .sb-row { display: flex; gap: 8px; align-items: flex-start; }
.setup-banner .sb-ico { flex: 0 0 auto; }
.setup-banner .sb-text { color: var(--fg); line-height: 1.45; }
.setup-banner code { background: var(--code-bg); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; font-family: "Cascadia Code", Consolas, monospace; }
.setup-banner .sb-out { background: var(--code-bg); border: 1px solid var(--border); border-radius: 4px; margin: 6px 0; padding: 6px 8px; max-height: 140px; overflow: auto; white-space: pre-wrap; word-break: break-word; font-family: "Cascadia Code", Consolas, monospace; font-size: 11px; line-height: 1.35; }
.setup-banner .sb-actions, .err-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.sb-btn { background: transparent; color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: 12px; }
.sb-btn:hover { background: var(--bg-input); }
.sb-input { background: var(--bg-input); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; font-size: 12px; min-width: 220px; flex: 1 1 220px; font-family: "Cascadia Code", Consolas, monospace; }
.sb-input:focus { outline: none; border-color: var(--accent); }
.sb-btn.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.err-note { margin-top: 6px; color: var(--fg-dim); font-style: italic; }
/* ---- Todo-Vorschlag (Task 4): beim Starten die nächsten offenen Todos (hohe Prio zuerst) ---- */
.todo-banner { display: none !important; }
.todo-banner.hidden { display: none; }
.todo-banner .tb-row { display: flex; gap: 8px; align-items: flex-start; }
.todo-banner .tb-ico { flex: 0 0 auto; }
.todo-banner .tb-text { flex: 1 1 auto; min-width: 0; line-height: 1.45; }
.todo-banner .tb-list { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.todo-banner .tb-item { display: flex; align-items: center; gap: 6px; }
.todo-banner .tb-title { color: var(--fg); }
.todo-banner .tb-close { flex: 0 0 auto; background: transparent; color: var(--fg-dim); border: none; cursor: pointer; font-size: 14px; padding: 0 2px; line-height: 1; }
.todo-banner .tb-close:hover { color: var(--fg); }
/* Settings dialog (Darstellung-Tab) */
.set-tabs { display: flex; gap: 2px; margin-bottom: 10px; border-bottom: 1px solid var(--border); }
.set-tab { background: transparent; color: var(--fg-dim); border: none; border-bottom: 2px solid transparent; padding: 5px 12px; cursor: pointer; font-size: 12px; }
.set-tab:hover { color: var(--fg); }
.set-tab.on { color: var(--fg); border-bottom-color: var(--accent); }
.set-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.set-row label { flex: 0 0 132px; color: var(--fg-dim); font-size: 12px; }
.set-row input[type=range] { flex: 1 1 auto; accent-color: var(--accent); }
.set-row select, .set-row input[type=number] { background: var(--bg-input); color: var(--fg); border: 1px solid var(--border); border-radius: 4px; padding: 2px 6px; font-size: 12px; }
.set-row input[type=color] { width: 42px; height: 26px; padding: 1px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 4px; cursor: pointer; }
.set-row input[type=checkbox] { accent-color: var(--accent); }
.set-val { flex: 0 0 46px; text-align: right; font-family: "Cascadia Code", Consolas, monospace; font-size: 11px; color: var(--fg-dim); }
.set-reset { background: transparent; color: var(--fg-dim); border: 1px solid var(--border); border-radius: 4px; padding: 2px 8px; font-size: 11px; cursor: pointer; }
.set-reset:hover { color: var(--fg); border-color: var(--fg-dim); }
/* Settings-Dialog: Tab-Leiste darf umbrechen (5 Tabs) + Scroll-Body */
.set-tabs { flex-wrap: wrap; }
.set-body { max-height: 60vh; overflow-y: auto; padding-right: 4px; }
/* Models-Tab: Modell-Karten + Text-Inputs (Auri-Settings-Inputs bekommen damit dasselbe Styling) */
.set-row input[type=text] { background: var(--bg-input); color: var(--fg); border: 1px solid var(--border); border-radius: 4px; padding: 2px 6px; font-size: 12px; }
.mdl-card { background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; margin-bottom: 8px; }
.mdl-card .set-row label { flex-basis: 72px; }
/* System-Tab: optisch aufgeräumter (Karten statt flacher kv-Zeilen) */
.sys-card { background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; margin-bottom: 8px; }
.sys-card .sec { margin-top: 0; }
.sys-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.sys-chip { display: inline-block; padding: 2px 8px; font-size: 11px; font-family: "Cascadia Code", Consolas, monospace; background: var(--bg-2, #1a1a1a); border: 1px solid var(--border); border-radius: 4px; color: var(--fg); word-break: break-all; }
.sys-chip.mcp { background: var(--bg-alt, #222); border-color: var(--fg-dim); color: var(--fg-dim); }
.sys-chip .chip-edit { background: transparent; border: none; color: var(--fg-dim); cursor: pointer; font-size: 10px; padding: 0 2px; margin-left: 4px; vertical-align: middle; }
.sys-chip .chip-edit:hover { color: var(--accent, #4ec9b0); }
.sys-subsec { margin: 8px 0 2px; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--fg-dim); opacity: .7; }
.sys-path-row { display: flex; align-items: center; gap: 6px; padding: 5px 0; border-bottom: 1px solid var(--border); }
.sys-path-row:last-child { border-bottom: none; }
.sys-path-main { flex: 1 1 auto; min-width: 0; }
.sys-path-name { font-size: 12px; font-weight: 600; }
.sys-path-full { font-family: "Cascadia Code", Consolas, monospace; font-size: 10.5px; color: var(--fg-dim); overflow-wrap: anywhere; }
.sys-path-meta { flex: 0 0 auto; color: var(--fg-dim); font-size: 11px; white-space: nowrap; }
.sys-badge { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 10px; border: 1px solid var(--border); color: var(--fg-dim); }
.sys-badge.ok { color: #3fb950; border-color: #3fb95055; background: #3fb95018; }
.sys-badge.miss { color: var(--fg-dim); }
/* Datei-Aktions-Buttons (Oeffnen / Anzeigen / Im Explorer anzeigen) */
.fab { background: transparent; color: var(--fg-dim); border: 1px solid var(--border); border-radius: 4px; padding: 2px 7px; font-size: 10.5px; cursor: pointer; white-space: nowrap; }
.fab:hover { color: var(--fg); border-color: var(--accent); }
.fab-row { display: flex; gap: 4px; flex: 0 0 auto; }
/* Memory-Tab */
.mem-file { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.mem-file:last-child { border-bottom: none; }
.mem-file.main { background: var(--bg-input); border-radius: 6px; padding: 6px 8px; margin-bottom: 4px; border-bottom: none; }
.mem-ico { flex: 0 0 auto; width: 18px; text-align: center; color: var(--fg-dim); }
.mem-file.main .mem-ico { color: var(--accent); }
.mem-main { flex: 1 1 auto; min-width: 0; }
.mem-name { font-size: 12px; font-weight: 600; font-family: "Cascadia Code", Consolas, monospace; overflow-wrap: anywhere; }
.mem-sub { color: var(--fg-dim); font-size: 10.5px; }
.mem-date { flex: 0 0 auto; color: var(--fg-dim); font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Datei-Inhalt-Vorschau (show-Aktion) */
.fileview { background: var(--code-bg); border: 1px solid var(--border); border-radius: 6px; padding: 8px; margin-top: 6px; max-height: 40vh; overflow: auto; }
.fileview pre { margin: 0; font-family: "Cascadia Code", Consolas, monospace; font-size: 11px; white-space: pre-wrap; word-break: break-word; }
.fileview .fv-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.fileview .fv-name { font-family: "Cascadia Code", Consolas, monospace; font-size: 11px; color: var(--fg-dim); overflow-wrap: anywhere; }
/* deliver_file-Chip (aus dem auri3-tools-MCP-Server): Datei mit Download-Button */
.file-chip { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; padding: 6px 10px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; }
.file-chip .fc-ico { flex: 0 0 auto; font-size: 15px; }
.file-chip .fc-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.file-chip .fc-size { flex: 0 0 auto; color: var(--fg-dim); font-size: 11px; font-family: "Cascadia Code", Consolas, monospace; }
.file-chip .fc-dl { flex: 0 0 auto; background: var(--accent); color: var(--accent-fg); border: none; border-radius: 4px; padding: 3px 10px; font-size: 11px; font-weight: 600; cursor: pointer; }
.file-chip .fc-dl:hover { filter: brightness(1.15); }
.file-chip .fc-dl.fc-sec { background: transparent; color: var(--fg-dim); border: 1px solid var(--border); font-weight: 500; }
.file-chip .fc-dl.fc-sec:hover { color: var(--fg); background: rgba(255,255,255,.06); filter: none; }
/* Kontext >=95%: diskretes Toast (kein Pink-Screen). */
#ctx-toast {
position: fixed; bottom: 60px; left: 50%; transform: translateX(-50%) translateY(10px);
background: #2a2a28; border: 1px solid rgba(255,255,255,.18); color: #f0efec;
border-radius: 10px; padding: 10px 18px; font-size: 13px; z-index: 9999;
opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s;
box-shadow: 0 4px 20px rgba(0,0,0,.4);
}
#ctx-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* Task 5: BW-KI-Instanzen (read-only Monitoring) */
.inst { display: flex; flex-direction: column; gap: 8px; }
.inst-hd { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.inst-hd .close-x { margin-left: auto; }
.inst-count { font-size: 11px; font-weight: 500; color: var(--fg-dim); background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 1px 8px; }
.inst-sub { font-size: 11px; color: var(--fg-dim); margin-top: -4px; }
.inst-list { display: flex; flex-direction: column; gap: 4px; max-height: 40%; overflow-y: auto; }
.inst-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; font-size: 12px; }
.inst-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.inst-dot.on { background: #3fb950; box-shadow: 0 0 5px #3fb95088; }
.inst-dot.off { background: var(--fg-dim); opacity: .5; }
.inst-name { font-weight: 600; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inst-meta { font-size: 11px; color: var(--fg-dim); flex: 0 0 auto; }
.inst-caps { font-size: 10px; color: var(--fg-dim); flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.inst-last { font-size: 10px; color: var(--fg-dim); flex: 0 0 auto; }
.inst-actions { display: flex; gap: 4px; flex: 0 0 auto; }
.ibtn { background: var(--bg-alt); color: var(--fg); border: 1px solid var(--border); border-radius: 4px; padding: 2px 8px; font-size: 11px; cursor: pointer; }
.ibtn:hover { border-color: var(--accent); color: var(--accent); }
.inst-out { min-height: 4px; }
.inst-wait { font-size: 11px; color: var(--fg-dim); padding: 6px 8px; }
.inst-err { font-size: 11px; color: #f85149; padding: 6px 8px; background: rgba(248,81,73,.08); border-radius: 4px; }
.inst-result { border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.inst-res-hd { font-size: 10px; color: var(--fg-dim); padding: 4px 8px; background: var(--bg); border-bottom: 1px solid var(--border); text-transform: uppercase; letter-spacing: .04em; }
.inst-result pre { margin: 0; padding: 8px; font-size: 11px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; max-height: 200px; overflow-y: auto; background: var(--bg); }
/* Phase 2: Befehls-Konsole (PowerShell an eine Hand). */
.inst-cmd { display: flex; flex-direction: column; gap: 6px; }
.inst-cmd-row { display: flex; align-items: center; gap: 6px; }
.inst-sel { flex: 1 1 auto; min-width: 0; background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 4px; padding: 3px 6px; font-size: 12px; }
.inst-timeout { flex: 0 0 auto; width: 58px; background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 4px; padding: 3px 6px; font-size: 12px; }
.inst-run { flex: 0 0 auto; background: var(--accent); color: #fff; border: 1px solid var(--accent); border-radius: 4px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.inst-run:hover { opacity: .9; }
.inst-cmd-ta { width: 100%; box-sizing: border-box; background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 4px; padding: 6px 8px; font-size: 12px; font-family: Consolas, "Cascadia Code", monospace; resize: vertical; min-height: 54px; line-height: 1.4; }
/* Sessions-Picker (Button "Sessions") */
.sess { display: flex; flex-direction: column; gap: 8px; }
.sess-hd { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.sess-hd .close-x { margin-left: auto; }
.sess-list { display: flex; flex-direction: column; gap: 4px; max-height: 60vh; overflow-y: auto; }
.sess-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; font-size: 12px; cursor: pointer; }
.sess-row:hover { border-color: var(--accent); background: rgba(88,166,255,.06); }
.sess-new { border-style: dashed; }
.sess-ico { flex: 0 0 auto; font-size: 15px; }
.sess-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sess-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sess-sub { font-size: 11px; color: var(--fg-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sess-empty { font-size: 12px; color: var(--fg-dim); padding: 8px 10px; }
/* ---- Lade-Overlay (Session-Wechsel) ---------------------------------------------
Moderner Fortschritts-Ring + Phase-Label + Eintragszähler. Deckt das ganze Fenster ab
(position:fixed). Zwei Modi: determinate (Parse, % + Zähler) und indeterminate
(Engine-Start, kein Fortschritt → Teilbogen rotiert). Farben via CSS-Variablen → Darkmode. */
.loading-overlay {
position: absolute; inset: 0; z-index: 1000; /* absolut in #app (position:relative) → zentriert im Messages-Bereich, NICHT im ganzen Fenster */
display: flex; align-items: center; justify-content: center;
background: rgba(15, 15, 15, 0.62);
backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
animation: lo-fade .18s ease-out;
}
.loading-overlay.hidden { display: none; }
@keyframes lo-fade { from { opacity: 0; } to { opacity: 1; } }
.loading-card { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 24px; }
.loading-ring { position: relative; width: 120px; height: 120px; }
.loading-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.loading-ring .ring-bg { fill: none; stroke: var(--border); stroke-width: 6; opacity: .5; }
.loading-ring .ring-fg {
fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round;
stroke-dasharray: 326.73; stroke-dashoffset: 326.73; /* 2·π·52 = volle Umkreis */
transition: stroke-dashoffset .25s ease-out;
filter: drop-shadow(0 0 4px var(--accent));
}
/* Indeterminate (Engine-Phase): Teilbogen (~28%) rotiert, kein Prozent. */
.loading-ring.indeterminate svg { animation: lo-spin 1.1s linear infinite; }
.loading-ring.indeterminate .ring-fg { stroke-dasharray: 91 235.73; stroke-dashoffset: 0; transition: none; }
@keyframes lo-spin { to { transform: rotate(270deg); } }
.ring-pct {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
font-size: 26px; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums;
}
.ring-pct .pct-sign { font-size: 14px; color: var(--fg-dim); margin-left: 1px; }
.loading-ring.indeterminate .ring-pct { display: none; } /* kein % im Indeterminate-Modus */
.loading-label { font-size: 15px; font-weight: 600; color: var(--fg); text-align: center; }
.loading-sub { font-size: 12px; color: var(--fg-dim); text-align: center; min-height: 15px; font-variant-numeric: tabular-nums; }
/* ---- Trajectory-Tab (dsh-1:1) ---- */
.traj-table { display: flex; flex-direction: column; gap: 2px; max-height: 340px; overflow-y: auto; margin-top: 4px; }
.traj-row { display: flex; align-items: baseline; gap: 7px; padding: 3px 6px; border-radius: 4px; background: var(--code-bg); border: 1px solid var(--border); font-size: 12px; }
.traj-row:hover { border-color: var(--fg-dim); }
.traj-idx { flex: 0 0 auto; color: var(--fg-dim); font-family: "Cascadia Code", Consolas, monospace; font-size: 10px; min-width: 26px; text-align: right; }
.traj-badge { flex: 0 0 auto; padding: 1px 7px; border-radius: 999px; font-size: 10px; border: 1px solid var(--border); color: var(--fg-dim); text-transform: uppercase; letter-spacing: .3px; }
.traj-badge.usr { color: #58a6ff; border-color: #58a6ff55; background: #58a6ff18; }
.traj-badge.ast { color: var(--accent); border-color: #cc7a3b55; background: #cc7a3b18; }
.traj-badge.tool { color: var(--green); border-color: #4ec9b055; background: #4ec9b018; }
.traj-badge.res { color: var(--fg-dim); }
.traj-txt { flex: 1 1 auto; overflow-wrap: anywhere; color: var(--fg); }
.traj-tok { flex: 0 0 auto; color: var(--fg-dim); font-family: "Cascadia Code", Consolas, monospace; font-size: 10px; white-space: nowrap; }
.traj-row.sel { border-color: var(--accent); background: #cc7a3b18; }
.traj-badge.sys { color: var(--fg-dim); border-style: dashed; }
/* ---- Haupt-Tabs (Chat | Trajectory) im Toolbar ---- */
.main-tab.on { background: rgba(198,97,63,.15); color: #f0efec; }
/* ---- Trajectory-Haupt-View: links Token+Tabelle, rechts Detail-Panel ---- */
#trajView { flex: 1 1 auto; display: flex; min-height: 0; }
#trajMain { flex: 1 1 auto; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#trajTokenBar { flex: 0 0 auto; }
#trajTable { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
#trajTable .sys-card { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; margin-bottom: 0; }
#trajTable .traj-table { max-height: none; flex: 1 1 auto; }
/* ---- Debug-Haupt-View: Kopfzeile + Live-Log-Liste ---- */
#debugView {
flex: 1 1 auto;
display: flex;
flex-direction: column;
min-height: 0;
padding-top: 27px;
}
#debugBar { flex: 0 0 auto; padding: 12px 12px 0; }
#debugList { flex: 1 1 auto; overflow-y: auto; padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 2px; font-family: var(--mono, ui-monospace, monospace); font-size: 12px; }
.dbg-row { display: flex; gap: 8px; align-items: baseline; padding: 1px 4px; border-radius: 4px; }
.dbg-row:hover { background: var(--bg-input); }
/* Health-Center */
.hc-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.hc-tab { background: none; border: none; color: var(--fg-dim); font-size: 13px; padding: 6px 14px; cursor: pointer; border-bottom: 2px solid transparent; font-family: inherit; }
.hc-tab.on { color: var(--fg); border-bottom-color: var(--accent); }
.hc-content { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.hc-card { background: var(--bg-input); border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.hc-card-head { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--fg-dim); margin-bottom: 8px; }
.hc-card-body { display: flex; flex-direction: column; gap: 4px; }
.hc-row { display: flex; justify-content: space-between; font-size: 12.5px; }
.hc-row span:first-child { color: var(--fg-dim); }
.hc-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.hc-dot.ok { background: #4caf50; }
.hc-dot.warn { background: #ff9800; }
.hc-loginfo { grid-column: 1 / -1; font-size: 11px; color: var(--fg-dim); padding: 4px 0; }
.hc-empty { grid-column: 1 / -1; color: var(--fg-dim); font-size: 13px; padding: 20px 0; text-align: center; }
.hc-foot { display: flex; justify-content: flex-end; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.hc-refresh { background: var(--bg-input); border: 1px solid var(--border); color: var(--fg); font-size: 12px; padding: 5px 12px; border-radius: 6px; cursor: pointer; font-family: inherit; }
.hc-refresh:hover { background: var(--bg-alt); }
/* ---- Todo-Haupt-View: Kopfzeile + Liste aus TODO.md (volle Höhe, wie Debug-View) ---- */
#todoView { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
#todoBar { flex: 0 0 auto; padding: 12px 12px 0; display: flex; flex-direction: column; gap: 6px; }
#todoList { flex: 1 1 auto; overflow-y: auto; padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.dbg-ts { flex: 0 0 88px; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.dbg-cat { flex: 0 0 64px; font-weight: 600; color: var(--accent); }
.dbg-lvl { flex: 0 0 60px; font-size: 10px; text-transform: uppercase; letter-spacing: .3px; padding: 0 4px; border-radius: 3px; text-align: center; }
.dbg-lvl.dbg-s { color: var(--fg-dim); background: var(--bg-input); }
.dbg-lvl.dbg-v { color: var(--fg); background: var(--bg-alt); }
.dbg-msg { flex: 1 1 auto; color: var(--fg); overflow-wrap: anywhere; white-space: pre-wrap; }
.dbg-expand { flex: 0 0 auto; font-size: 10px; padding: 0 5px; border-radius: 3px; background: var(--bg-input); color: var(--fg-dim); cursor: pointer; border: none; }
.dbg-expand:hover { color: var(--fg); background: var(--bg-alt); }
.dbg-copy { flex: 0 0 auto; opacity: 0; font-size: 12px; padding: 0 3px; border-radius: 3px; background: none; color: var(--fg-dim); cursor: pointer; border: none; transition: opacity .15s; }
.dbg-row:hover .dbg-copy { opacity: 1; }
.dbg-copy:hover { color: var(--fg); background: var(--bg-input); }
/* ---- Detail-Panel (rechte Sidebar, dsh-1:1) ---- */
#trajDetail { flex: 0 0 380px; max-width: 45%; border-left: 1px solid var(--border); background: var(--bg-alt); overflow-y: auto; display: flex; flex-direction: column; }
.td-hd { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 6px; }
.td-title { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.td-tabs { display: flex; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.td-tab { background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--fg-dim); padding: 6px 10px; font-size: 12px; cursor: pointer; }
.td-tab:hover { color: var(--fg); }
.td-tab.on { color: var(--fg); border-bottom-color: var(--accent); }
.td-body { padding: 12px; overflow-y: auto; flex: 1; }
.td-sec { margin-top: 10px; }
.td-sec-hd { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--fg-dim); margin-bottom: 3px; }
.td-sec-hd[data-open] { cursor: pointer; }
.td-sec-hd[data-open]:hover { color: var(--accent); }
.td-sec-body { font-size: 12px; color: var(--fg); opacity: .92; }
.td-pre { background: var(--code-bg); border: 1px solid var(--border); border-radius: 6px; padding: 8px; font-size: 11px; white-space: pre-wrap; word-break: break-word; max-height: 420px; overflow-y: auto; margin: 0; font-family: "Cascadia Code", Consolas, monospace; }
.td-md { font-size: 13px; }
.td-path { font-family: "Cascadia Code", Consolas, monospace; font-size: 11px; color: var(--fg-dim); padding: 0 0 6px; overflow-wrap: anywhere; }
.td-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.td-chip { background: var(--code-bg); border: 1px solid var(--border); border-radius: 4px; padding: 2px 7px; font-size: 11px; font-family: "Cascadia Code", Consolas, monospace; }
/* ---- /bug: Bug-Report-Formular ---- */
.bug { display: flex; flex-direction: column; gap: 10px; padding: 14px; width: 460px; max-width: 90vw; }
.bug-hd { display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 14px; }
.bug-sub { font-size: 12px; color: var(--fg-dim); }
.bug-sub code { font-family: "Cascadia Code", Consolas, monospace; font-size: 11px; background: var(--code-bg); padding: 1px 4px; border-radius: 3px; }
.bug-desc { width: 100%; min-height: 110px; resize: vertical; background: var(--bg-input); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: 8px; font-size: 13px; font-family: inherit; box-sizing: border-box; }
.bug-desc:focus { outline: none; border-color: var(--accent); }
.bug-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bug-label { font-size: 12px; color: var(--fg-dim); }
.bug-sel { background: var(--bg-input); color: var(--fg); border: 1px solid var(--border); border-radius: 5px; padding: 4px 8px; font-size: 12px; }
.bug-file { font-size: 12px; color: var(--fg-dim); max-width: 220px; }
.bug-preview { min-height: 0; }
.bug-preview img { max-width: 100%; max-height: 220px; border: 1px solid var(--border); border-radius: 6px; }
.bug-actions { display: flex; align-items: center; gap: 10px; }
.bug-submit { background: var(--accent); color: #fff; border: none; border-radius: 6px; padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.bug-submit:hover { opacity: .9; }
.bug-status { font-size: 12px; color: var(--fg-dim); }
/* ---- 📋 Todo-Liste (📋 Todo-Button) ---- */
.todo-hd { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.todo-hd .close-x { margin-left: auto; }
.todo-status { font-size: 12px; font-weight: 400; color: var(--fg-dim); }
.todo-status.ok { color: var(--green); }
.todo-status.err { color: var(--red); }
.todo-sub { font-size: 12px; color: var(--fg-dim); }
.todo-sub code { font-family: "Cascadia Code", Consolas, monospace; font-size: 11px; background: var(--code-bg); padding: 1px 4px; border-radius: 3px; }
.todo-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.todo-sel { background: var(--bg-input); color: var(--fg); border: 1px solid var(--border); border-radius: 5px; padding: 4px 8px; font-size: 12px; }
.todo-add { margin-left: auto; background: var(--accent); color: #fff; border: none; border-radius: 5px; padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer; }
.todo-add:hover { opacity: .9; }
.todo-group { display: flex; flex-direction: column; gap: 6px; }
.todo-group-hd { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-dim); display: flex; align-items: center; gap: 6px; padding: 2px 0; border-bottom: 1px solid var(--border); }
.todo-group-count { font-size: 10px; font-weight: 500; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 0 7px; }
.todo-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; width: 100%; box-sizing: border-box; }
.todo-item.done { opacity: .6; }
.todo-item.editing { border-color: var(--accent); }
.todo-check { margin-top: 3px; width: 15px; height: 15px; cursor: pointer; accent-color: var(--accent); flex: 0 0 auto; }
.todo-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.todo-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.todo-title { font-size: 13px; font-weight: 600; }
.todo-title.done { text-decoration: line-through; color: var(--fg-dim); }
.todo-badge { font-size: 10px; font-weight: 700; border-radius: 10px; padding: 1px 8px; border: 1px solid transparent; }
.todo-badge.prio-1 { color: #ff8a80; background: rgba(244,81,73,.14); border-color: rgba(244,81,73,.4); }
.todo-badge.prio-2 { color: #ffcf80; background: rgba(255,170,0,.14); border-color: rgba(255,170,0,.4); }
.todo-badge.prio-3 { color: #b0b0b0; background: rgba(157,157,157,.14); border-color: rgba(157,157,157,.4); }
.todo-type { font-size: 10px; font-weight: 600; color: var(--fg-dim); background: var(--bg-alt); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; text-transform: uppercase; letter-spacing: .03em; }
.todo-date { font-size: 10px; color: var(--fg-dim); margin-left: auto; }
.todo-desc { display: flex; flex-direction: column; gap: 1px; }
.todo-desc-line { font-size: 12px; color: var(--fg-dim); line-height: 1.4; word-break: break-word; }
.todo-item-actions { display: flex; gap: 6px; margin-top: 2px; }
.todo-edit-btn, .todo-del-btn { background: transparent; color: var(--fg-dim); border: 1px solid var(--border); border-radius: 4px; padding: 2px 8px; font-size: 11px; cursor: pointer; }
.todo-edit-btn:hover { color: var(--fg); border-color: var(--accent); }
.todo-del-btn:hover { color: #ff8a80; border-color: var(--red); }
.todo-edit { display: flex; flex-direction: column; gap: 8px; }
.todo-edit-title { width: 100%; background: var(--bg-input); color: var(--fg); border: 1px solid var(--border); border-radius: 5px; padding: 6px 8px; font-size: 13px; font-family: inherit; }
.todo-edit-title:focus { outline: none; border-color: var(--accent); }
.todo-edit-desc { width: 100%; min-height: 60px; resize: vertical; background: var(--bg-input); color: var(--fg); border: 1px solid var(--border); border-radius: 5px; padding: 6px 8px; font-size: 12px; font-family: inherit; }
.todo-edit-desc:focus { outline: none; border-color: var(--accent); }
.todo-edit-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.todo-edit-label { font-size: 12px; color: var(--fg-dim); }
.todo-edit-check { font-size: 12px; color: var(--fg-dim); display: flex; align-items: center; gap: 4px; cursor: pointer; }
.todo-edit-check input { accent-color: var(--accent); }
.todo-edit-actions { display: flex; gap: 8px; }
.todo-save { background: var(--accent); color: #fff; border: none; border-radius: 5px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; }
.todo-save:hover { opacity: .9; }
.todo-cancel { background: transparent; color: var(--fg-dim); border: 1px solid var(--border); border-radius: 5px; padding: 5px 12px; font-size: 12px; cursor: pointer; }
.todo-cancel:hover { color: var(--fg); }
.todo-empty { font-size: 12px; color: var(--fg-dim); padding: 16px; text-align: center; }
/* ---- Notes-Haupt-View: Kopfzeile + Liste aus NOTES.md (volle Höhe, wie Todo-View) ---- */
#noteView { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
#noteBar { flex: 0 0 auto; padding: 12px 12px 0; display: flex; flex-direction: column; gap: 6px; }
#noteList { flex: 1 1 auto; overflow-y: auto; padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.note-hd { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.note-status { font-size: 12px; font-weight: 400; color: var(--fg-dim); }
.note-status.ok { color: var(--green); }
.note-status.err { color: var(--red); }
.note-sub { font-size: 12px; color: var(--fg-dim); }
.note-sub code { font-family: "Cascadia Code", Consolas, monospace; font-size: 11px; background: var(--code-bg); padding: 1px 4px; border-radius: 3px; }
.note-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.note-add { margin-left: auto; background: var(--accent); color: #fff; border: none; border-radius: 5px; padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer; }
.note-add:hover { opacity: .9; }
.note-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; }
.note-item.editing { border-color: var(--accent); }
.note-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.note-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.note-title { font-size: 13px; font-weight: 600; }
.note-date { font-size: 10px; color: var(--fg-dim); margin-left: auto; }
.note-desc { display: flex; flex-direction: column; gap: 1px; }
.note-desc-line { font-size: 12px; color: var(--fg-dim); line-height: 1.4; word-break: break-word; }
.note-item-actions { display: flex; gap: 6px; margin-top: 2px; }
.note-edit-btn, .note-del-btn { background: transparent; color: var(--fg-dim); border: 1px solid var(--border); border-radius: 4px; padding: 2px 8px; font-size: 11px; cursor: pointer; }
.note-edit-btn:hover { color: var(--fg); border-color: var(--accent); }
.note-del-btn:hover { color: #ff8a80; border-color: var(--red); }
.note-edit { display: flex; flex-direction: column; gap: 8px; }
.note-edit-title { width: 100%; background: var(--bg-input); color: var(--fg); border: 1px solid var(--border); border-radius: 5px; padding: 6px 8px; font-size: 13px; font-family: inherit; }
.note-edit-title:focus { outline: none; border-color: var(--accent); }
.note-edit-desc { width: 100%; min-height: 60px; resize: vertical; background: var(--bg-input); color: var(--fg); border: 1px solid var(--border); border-radius: 5px; padding: 6px 8px; font-size: 12px; font-family: inherit; }
.note-edit-desc:focus { outline: none; border-color: var(--accent); }
.note-edit-actions { display: flex; gap: 8px; }
.note-save { background: var(--accent); color: #fff; border: none; border-radius: 5px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; }
.note-save:hover { opacity: .9; }
.note-cancel { background: transparent; color: var(--fg-dim); border: 1px solid var(--border); border-radius: 5px; padding: 5px 12px; font-size: 12px; cursor: pointer; }
.note-cancel:hover { color: var(--fg); }
.note-empty { font-size: 12px; color: var(--fg-dim); padding: 16px; text-align: center; }
/* ---- Sidebar (links): DAI-Style, Auto-Show/Hide ---- */
#sidebar {
position: fixed; top: 3px; left: 3px; bottom: 3px; width: 304px; min-width: 304px;
border-right: 1px solid var(--border); background: var(--bg-alt);
display: flex; flex-direction: column; padding: 12px 10px 10px;
border-radius: 13px;
z-index: 1200; overflow: visible; /* über Toolbar (1001), Terminal (100) und Pop-ups des Hauptbereichs */
padding-top: 48px; /* oben Platz für den Pin-Button (#sbPinBtn) */
transition: transform .16s ease, box-shadow .16s ease;
}
.sb-logo { padding: 4px 8px 5px; }
.sb-logo img { height: 28px; width: auto; display: block; }
.sb-new {
width: 100%; text-align: left; display: flex; align-items: center; gap: 8px;
padding: 8px 12px; border-radius: 8px; font-weight: 500; color: var(--fg);
background: rgba(255,255,255,.04); border: 1px solid var(--border);
font-size: 13px; cursor: pointer; font-family: inherit;
}
.sb-new:hover { background: rgba(255,255,255,.08); }
.sb-nav { margin-top: 8px; display: flex; flex-direction: column; gap: 1px; }
.sb-item {
display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
padding: 6px 10px; border-radius: 6px; background: none; border: none;
color: var(--fg-dim); font-size: 13px; cursor: pointer; font-family: inherit;
}
.sb-item:hover { background: rgba(255,255,255,.05); color: var(--fg); }
.sb-item.active { background: rgba(198,97,63,.12); color: var(--fg); }
.sb-seclabel {
font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
color: var(--fg-dim); opacity: .6; padding: 14px 10px 5px;
}
.sb-secrow { display: flex; align-items: center; justify-content: space-between; padding-right: 6px; position: relative; z-index: 20; opacity: 1; }
.sb-secrow > span { opacity: .6; }
.sb-chats-wrap { position: relative; }
.sb-kebab { background: none; border: none; color: var(--fg-dim); cursor: pointer; font-size: 16px; line-height: 1; width: 22px; height: 22px; border-radius: 5px; opacity: .9; }
.sb-kebab:hover, .sb-chats-wrap.open .sb-kebab { background: rgba(255,255,255,.08); color: var(--fg); }
.sb-chats-menu { display: none; position: absolute; right: 0; top: 24px; z-index: 60; min-width: 190px; padding: 4px;
background: #212121; border: 1px solid #383838; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.55);
text-transform: none; letter-spacing: 0; font-size: 13px; opacity: 1; }
.sb-chats-menu .dd-item { color: var(--fg); opacity: 1; }
.sb-chats-wrap.open .sb-chats-menu { display: block; }
.sb-chats-menu .dd-item { width: 100%; text-align: left; white-space: nowrap; }
.sb-recents-label { display: flex; align-items: center; justify-content: space-between; opacity: 1; }
.sb-recents-icons { display: flex; align-items: center; gap: 6px; font-size: 10px; opacity: .7; }
.sb-recents-chev { font-size: 9px; }
.sb-recents-link { font-size: 11px; }
.sb-chatlist {
flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px;
scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent;
}
.sb-chatlist::-webkit-scrollbar { width: 8px; }
.sb-chatlist::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 8px; }
.chat-item {
position: relative; display: flex; align-items: center; gap: 6px;
padding: 6px 8px 6px 10px; border-radius: 6px; cursor: pointer;
color: var(--fg-dim); font-size: 13px;
}
.chat-item:hover { background: rgba(255,255,255,.05); color: var(--fg); }
.chat-item.active { background: rgba(255,255,255,.08); color: var(--fg); }
.ci-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-dots {
background: none; border: none; color: #6d6b67; font-size: 16px; line-height: 1;
cursor: pointer; padding: 2px 5px; border-radius: 4px; opacity: 0; transition: opacity .12s;
}
.chat-item:hover .ci-dots { opacity: 1; }
.ci-dots:hover { background: rgba(255,255,255,.1); color: #f0efec; }
.sess-menu {
position: fixed; z-index: 2000; background: #2a2a28; border: 1px solid rgba(255,255,255,.12);
border-radius: 8px; padding: 4px; min-width: 160px; box-shadow: 0 4px 16px rgba(0,0,0,.4);
display: flex; flex-direction: column; gap: 1px;
}
.sess-menu button {
background: none; border: none; color: #c3c2b7; font-size: 13px; text-align: left;
padding: 7px 10px; border-radius: 5px; cursor: pointer; font-family: inherit;
}
.sess-menu button:hover { background: rgba(255,255,255,.08); color: #f0efec; }
.sess-menu button.danger { color: #ec7e7e; }
.sess-menu button.danger:hover { background: rgba(236,126,126,.12); }
.sb-foot {
border-top: 1px solid rgba(255,255,255,.08); margin-top: 8px;
padding-top: 10px; display: flex; align-items: center; gap: 9px;
}
.sb-toggle {
background: none; border: none; font-size: 14px; cursor: pointer;
color: #6d6b67; padding: 4px 6px; border-radius: 5px;
}
.sb-toggle:hover { color: #ccc; background: rgba(255,255,255,.06); }
.sb-toggle.pinned { color: #cc7a3b; }
#sidebarTrigger { position: fixed; top: 0; left: 0; width: 4px; height: 100%; z-index: 999; }
/* ---- Sidebar CD-Style (1:1 Claude.ai): Search-Box + More-Dropdown ---- */
/* Search-Box (🔍 Suchen + Ctrl K) — oben, unter dem Logo. */
.sb-search {
display: flex; align-items: center; gap: 8px;
margin: 0 0 4px; padding: 7px 10px;
background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
color: var(--fg-dim); font-size: 13px; cursor: pointer;
transition: border-color .12s;
}
.sb-search:hover { border-color: rgba(255,255,255,.2); }
.sb-search-ico { font-size: 13px; opacity: .7; }
.sb-search-label { flex: 1; }
.sb-search-kbd { display: flex; gap: 3px; margin-left: auto; }
.sb-search-kbd .kbd { background: rgba(255,255,255,.08); border-radius: 3px; padding: 1px 4px; font-size: 10px; }
/* Neu-Button in der Nav (CD-Style, kein eigener Rahmen mehr). */
.sb-new-item { font-weight: 500; color: var(--fg); }
.sb-ico { width: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; opacity: .7; flex-shrink: 0; }
/* More-Dropdown (CD-Style: erscheint rechts neben "More", über dem Main-Bereich). */
.sb-more-wrap { position: relative; }
.sb-chev { margin-left: auto; font-size: 11px; color: var(--fg-dim); }
.sb-more-dropdown {
position: absolute; left: 100%; top: 0; margin-left: 4px;
width: 180px; background: var(--bg-input); border: 1px solid var(--border);
border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.4);
padding: 4px; z-index: 100; display: none;
}
.sb-more-wrap.open .sb-more-dropdown { display: block; }
.dd-item {
display: flex; align-items: center; gap: 8px; width: 100%;
padding: 7px 10px; border-radius: 5px; background: none; border: none;
font-size: 13px; color: var(--fg-dim); cursor: pointer; font-family: inherit; text-align: left;
}
.dd-item:hover { background: rgba(255,255,255,.06); color: var(--fg); }
.dd-separator { height: 1px; background: var(--border); margin: 4px 8px; }
/* ---- UI-Update-Popup (rechts oben) ---- */
#uiUpdatePopup {
position: fixed; top: 16px; right: 16px; z-index: 10000;
width: 320px; padding: 14px 16px;
background: var(--bg-alt); border: 1px solid var(--border); border-radius: 10px;
box-shadow: 0 8px 32px rgba(0,0,0,.45);
opacity: 0; transform: translateY(-8px);
transition: opacity .2s ease, transform .2s ease;
}
#uiUpdatePopup.show { opacity: 1; transform: translateY(0); }
.uip-hdr { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.uip-ico { font-size: 20px; line-height: 1; }
.uip-title { font-size: 13px; font-weight: 600; color: var(--fg); }
.uip-sub { font-size: 11px; color: var(--fg-dim); margin-top: 2px; }
.uip-actions { display: flex; gap: 8px; justify-content: flex-end; }
.uip-btn {
font: inherit; font-size: 12px; padding: 6px 14px; border-radius: 6px;
cursor: pointer; border: 1px solid var(--border); background: var(--bg-input); color: var(--fg);
transition: background .15s, border-color .15s;
}
.uip-btn:hover { border-color: var(--accent); }
.uip-reload { background: var(--accent); color: var(--accent-fg); border-color: transparent; }
.uip-reload:hover { filter: brightness(1.1); }
/* ---- Search Modal (CD 1:1) ---- */
#searchModal {
position: fixed; inset: 0; z-index: 2000;
display: flex; align-items: flex-start; justify-content: center;
padding-top: 12vh;
background: rgba(0,0,0,.55);
}
#searchModal.hidden { display: none; }
#searchModal .sm-card {
width: 640px; max-width: 90vw; max-height: 70vh;
background: #1e1e1c; border-radius: 12px;
box-shadow: 0 16px 48px rgba(0,0,0,.6);
display: flex; flex-direction: column; overflow: hidden;
}
.sm-input-row { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.sm-input-row .sm-ico { font-size: 16px; color: var(--fg-dim); flex-shrink: 0; }
.sm-input-row input {
flex: 1; background: none; border: none; outline: none;
font-size: 15px; color: var(--fg); font-family: inherit;
}
.sm-input-row input::placeholder { color: var(--fg-dim); }
.sm-close {
width: 24px; height: 24px; border-radius: 6px; border: none; background: none;
color: var(--fg-dim); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.sm-close:hover { background: rgba(255,255,255,.08); color: var(--fg); }
.sm-body { overflow-y: auto; flex: 1; padding: 8px 0; }
.sm-section { font-size: 11px; color: var(--fg-dim); padding: 8px 16px 4px; text-transform: none; }
.sm-item {
display: flex; align-items: flex-start; gap: 10px;
padding: 10px 16px; cursor: pointer; border-radius: 8px; margin: 0 8px;
}
.sm-item:hover, .sm-item.active { background: rgba(255,255,255,.06); }
.sm-item .sm-code-ico { font-size: 14px; color: var(--fg-dim); flex-shrink: 0; margin-top: 2px; }
.sm-item .sm-content { flex: 1; min-width: 0; }
.sm-item .sm-title { font-size: 13px; font-weight: 600; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-item .sm-preview { font-size: 12px; color: var(--fg-dim); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-item .sm-preview mark { background: none; color: var(--fg); font-weight: 700; }
.sm-item .sm-date { font-size: 11px; color: var(--fg-dim); flex-shrink: 0; margin-top: 2px; }
.sm-empty { padding: 24px 16px; text-align: center; font-size: 13px; color: var(--fg-dim); }
/* Search highlight: nach Session-Load aus Suche → Match bleibt hervorgehoben */
mark.search-flash { background: rgba(255,193,7,.45); color: inherit; border-radius: 3px; padding: 1px 2px; }
/* File links: klickbare Pfade, öffnen in zugeordneter App */
a.url-link { color: #4d9bec; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
a.url-link:hover { color: #7db7f4; }
/* URLs in Code: wie ein Hyperlink (blau, unterstrichen), Farbe der Syntax-Token überschreiben. */
pre a.url-link, code a.url-link { color: #4d9bec !important; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
pre a.url-link:hover, code a.url-link:hover { color: #7db7f4 !important; }
/* Datei-/Ordner-Links: wie ein Hyperlink (blau, unterstrichen), auch wenn der Pfad in `code` stand. */
.file-link, .node-main :not(pre) > code.file-link, .msg .bubble :not(pre) > code.file-link {
color: #4d9bec !important; cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
background: transparent !important; border: none !important; padding: 0 !important; border-radius: 0;
font-family: inherit; font-size: inherit;
}
.file-link:hover, .node-main :not(pre) > code.file-link:hover, .msg .bubble :not(pre) > code.file-link:hover { color: #7db7f4 !important; }
/* Terminal Panel (rechts) */
/* Claude-Code-Stil: flach, gleiche Fläche wie die App, dünne Trennlinie, Ghost-Icon-Buttons. */
.terminal-panel { position: fixed; top: 0; right: 0; bottom: 0; width: var(--term-w, 748px); background: var(--bg-alt); border-left: 1px solid var(--border); display: flex; flex-direction: column; z-index: 100; }
.terminal-panel.hidden { display: none; }
/* Höhe/rechter Rand wie die Toolbar (#tlbRightSidebarItems liegt darüber, z-index 1001):
Aktions-Buttons enden links davon, damit nichts überdeckt wird. */
#terminalBar { display: flex; align-items: center; gap: 2px; height: 44px; padding: 0 8px 0 14px; background: var(--bg-alt); border-bottom: 1px solid var(--border); flex-shrink: 0; }
#terminalBar .tp-title { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--fg-dim); font-size: 13px; }
#terminalBar .tp-title svg { flex-shrink: 0; }
#terminalBar .tp-name { color: var(--fg); font-weight: 500; }
#terminalBar .tp-shell { color: var(--fg-dim); opacity: .7; font-size: 12px; }
#terminalBar .spacer { flex: 1; }
#terminalBar .cbtn { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: none; border: none; border-radius: 6px; color: var(--fg-dim); cursor: pointer; padding: 0; }
#terminalBar .cbtn:hover { background: rgba(255,255,255,.08); color: var(--fg); }
#terminalContainer { flex: 1; position: relative; overflow: hidden; background: var(--bg-alt); padding: 10px 6px 6px 14px; }
#terminalContainer .xterm-viewport { background-color: transparent !important; }
#terminalContainer .term-content { white-space: pre-wrap; word-break: break-all; }
#terminalContainer .term-cursor { animation: blink 1s step-end infinite; color: var(--accent); }
@keyframes blink { 50% { opacity: 0; } }
.file-link:hover { color: #fff !important; border-bottom-color: #fff; }
/* highlight.js-Token (media\highlight.min.js) → gleiche Dark+-Palette wie die eigenen .hl-*-Klassen */
.hljs-keyword, .hljs-selector-tag, .hljs-doctag, .hljs-meta .hljs-keyword { color: #c586c0; }
.hljs-literal, .hljs-bullet, .hljs-symbol { color: #569cd6; }
.hljs-string, .hljs-regexp, .hljs-template-variable, .hljs-meta .hljs-string { color: #ce9178; }
.hljs-comment, .hljs-quote { color: #6a9955; font-style: italic; }
.hljs-number { color: #b5cea8; }
.hljs-title, .hljs-title.function_, .hljs-function .hljs-title { color: #dcdcaa; }
.hljs-title.class_, .hljs-type, .hljs-built_in, .hljs-class .hljs-title { color: #4ec9b0; }
.hljs-variable, .hljs-attr, .hljs-attribute, .hljs-property, .hljs-params, .hljs-name, .hljs-template-tag { color: #9cdcfe; }
.hljs-tag { color: #808080; } .hljs-tag .hljs-name { color: #569cd6; }
.hljs-selector-class, .hljs-selector-id, .hljs-section { color: #d7ba7d; }
.hljs-meta { color: #9b9b9b; }
.hljs-addition { color: #7ec27a; background: rgba(85,191,80,.10); display: inline-block; width: 100%; }
.hljs-deletion { color: #ec7e7e; background: rgba(236,126,126,.10); display: inline-block; width: 100%; }
.hljs-emphasis { font-style: italic; } .hljs-strong { font-weight: 700; }
.diff .dt { color: var(--fg); }
/* Prompt-Analyse (More → Prompt-Analyse) */
.ps{padding:2px 4px 6px 0;min-width:min(760px,88vw)}
.ps-load,.ps-err{padding:18px;text-align:center;opacity:.75}.ps-err{color:#f87171}
.ps-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin:6px 0 10px}
.ps-tile{background:rgba(148,163,184,.1);border-radius:8px;padding:8px 10px;display:flex;flex-direction:column}
.ps-tile b{font-size:20px}.ps-tile span{font-size:11px;opacity:.7}
.ps-tile.ok b{color:#2dd4bf}.ps-tile.warn b{color:#fbbf24}.ps-tile.bad b{color:#f87171}
.ps-card{background:rgba(148,163,184,.07);border-radius:8px;padding:10px 12px;margin-bottom:10px}
.ps-ct{font-weight:600;margin-bottom:8px}.ps-sub{font-weight:400;font-size:11px;opacity:.6;margin-left:6px}
.ps-subh{font-size:12px;opacity:.7;margin:10px 0 4px}
.ps-stack{display:flex;height:14px;border-radius:7px;overflow:hidden;margin-bottom:8px;background:rgba(148,163,184,.15)}
.ps-stack span{display:block;height:100%}
.ps-bar{display:grid;grid-template-columns:minmax(120px,36%) 1fr 90px;gap:8px;align-items:center;font-size:12px;margin:3px 0}
.ps-bn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ps-track{height:10px;background:rgba(148,163,184,.15);border-radius:5px;overflow:hidden}.ps-fill{display:block;height:100%;border-radius:5px}
.ps-bv{text-align:right;font-variant-numeric:tabular-nums}.ps-bv i{opacity:.55;font-style:normal;font-size:11px}
.ps-legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:11px;opacity:.8;margin-top:6px}
.ps-calls{display:flex;align-items:flex-end;gap:2px;height:84px;padding-top:4px}
.ps-call{flex:1;min-width:3px;max-width:14px;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;gap:2px}
.ps-cc{display:flex;flex-direction:column-reverse;background:rgba(148,163,184,.15);border-radius:2px;overflow:hidden}
.ps-hit{background:#2dd4bf;display:block}.ps-new{display:block}
.ps-ck{height:4px;border-radius:2px;display:block}
.ps-tbl{width:100%;border-collapse:collapse;font-size:11px;margin-top:10px;font-variant-numeric:tabular-nums}
.ps-tbl th{text-align:left;font-weight:500;opacity:.6;padding:2px 6px}.ps-tbl td{padding:2px 6px;border-top:1px solid rgba(148,163,184,.12)}
.ps-kv{display:flex;justify-content:space-between;gap:12px;font-size:12px;padding:3px 0;border-top:1px solid rgba(148,163,184,.1)}.ps-kv:first-of-type{border-top:0}
.ps-kv span{opacity:.7}.ps-note{font-size:11px;opacity:.5;margin-top:4px}
/* Busy-Leiste über der Eingabe: läuft ein Turn, pulsieren die drei Punkte (auch in Pausen ohne Spinner/Thinking-Knoten, z. B. langer Prefill, Tool-Wartezeit, Thinking). */
.busy-bar { margin: 0 auto; padding: 0 6px 6px; max-width: 760px; width: calc(100% - 24px); box-sizing: border-box; }
.busy-bar.hidden { display: none; }
.busy-bar .busy-label { color: var(--fg-dim); font-size: 12px; margin-left: 4px; }
/* Terminal offen: die Toolbar-Buttons (Terminal/Änderungen/Browser/Optionen) sitzen am rechten Rand des Chats, links vom Terminal (wie beim Browser-Pane) — nicht darüber. */
/* (Toolbar sitzt im #app und rückt damit automatisch an dessen rechten Rand, siehe unten) */
/* Buttons ohne Funktion: abgeblendet, kein Hover. */
.tlbRightSidebarItems-btn:disabled { opacity: .35; cursor: default; }
.tlbRightSidebarItems-btn:disabled:hover { color: var(--fg-dim); background: none; }
.ps-load { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ps-load .thinking { margin-top: 0; }
/* Terminal offen: Chat-Bereich schrumpft wie beim Browser-Pane (sonst verdeckt das Panel den rechten Teil von Chat/Eingabe). */
body:has(#terminalPanel:not(.hidden)) #app { margin-right: var(--term-w, 748px); }
/* ---- Seitenleiste: fixiert (Standard) oder eingeklappt + Hover-Aufklappen ---- */
.sb-pin-btn { position: fixed; top: 8px; left: 14px; z-index: 1300; width: 32px; height: 32px; border-radius: 8px; background: none; border: none; color: var(--fg-dim); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.sb-pin-btn:hover { background: rgba(255,255,255,.08); color: var(--fg); }
.sb-pin-btn.pinned { color: var(--fg); }
body.sb-collapsed #app { margin-left: 0; }
body.sb-collapsed #appMenuWrap { left: 54px; } /* ⋮ rückt neben den Pin-Button */
body.sb-collapsed #sidebar { transform: translateX(calc(-100% - 12px)); pointer-events: none; box-shadow: none; }
body.sb-collapsed.sb-peek #sidebar { transform: none; pointer-events: auto; box-shadow: 10px 0 32px rgba(0,0,0,.6); }
/* ---- Gedocktes Terminal (terminal.html im zweiten WebView2 unter dem Browser) ---- */
body.term-docked { margin: 0; overflow: hidden; background: var(--bg-alt); }
body.term-docked .terminal-panel { position: static; width: 100%; height: 100vh; border-left: none; z-index: auto; }
/* ---- Tool-Gruppen nach Claude-Desktop-Vorbild (17.10.): 3 Ebenen ----
Ebene 1 .toolgroup-summary allgemeine Zusammenfassung mit Anzahl der Child-Items
Ebene 2 .toolgroup-list Child-Zeilen in EINEM gemeinsamen Rahmen, sehr allgemeine Beschriftung (+ rotes "Fehlgeschlagen")
Ebene 3 .tool-detail Tool-Use (Befehl + Ergebnis) in einer Box, Kopier-Symbol oben rechts */
.toolgroup-summary { font-size: 14px; gap: 4px; }
.toolgroup-list { align-items: stretch; gap: 0; padding: 0; margin-top: 8px; border: 1px solid rgba(255,255,255,.11); border-radius: 10px; overflow: hidden; }
.toolgroup-list .toolrow + .toolrow { border-top: 1px solid rgba(255,255,255,.08); }
.toolgroup .tool-row { background: none; border-radius: 0; width: 100%; padding: 9px 14px; justify-content: flex-start; gap: 6px; font-size: 14px; }
.toolgroup .tool-row:hover { background: rgba(255,255,255,.035); }
.toolgroup .tool-row .tool-label { flex: 0 1 auto; }
.toolgroup .tool-row .chev { margin-left: 0; }
.toolgroup .tool-row.expanded .tool-label { color: var(--fg); }
.tool-fail { color: #f87171; font-size: 14px; margin-left: 2px; }
.toolgroup .tool-detail { padding: 0 12px 12px; }
.toolgroup .tool-detail-content.boxed { position: relative; background: rgba(0,0,0,.34); border-radius: 8px; padding: 12px 14px; gap: 12px; }
.toolgroup .tool-detail-content.boxed .tool-detail-code { background: none; padding: 0; border-radius: 0; }
.toolgroup .tool-detail-content.boxed .tool-detail-output { background: none; padding: 0; max-height: none; border-radius: 0; border: 0; margin: 0; }
.tool-copy { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border: 0; border-radius: 6px; background: none; color: var(--fg-dim); cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: .7; }
.tool-copy:hover { background: rgba(255,255,255,.08); color: var(--fg); opacity: 1; }
.tool-copy.done { color: var(--green, #55bf50); opacity: 1; }
/* Aussehen-Dialog (Sidebar "Einstellungen"); Eintrag nur sichtbar, wenn ein Skin aktiv ist */
.sb-look-item { display: none; } .has-skin .sb-look-item { display: flex; }
.look-overlay { position: fixed; inset: 0; z-index: 99999; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; }
.look-card { width: min(560px, 92vw); background: var(--bg, #fff); color: var(--fg, #222); border: 4px solid var(--fg, #222); border-radius: 18px; padding: 20px 24px; box-shadow: 0 8px 0 rgba(0,0,0,.35); }
.look-card h2 { margin: 0 0 14px; font-size: 22px; }
.look-row { display: flex; align-items: center; gap: 12px; margin: 12px 0; }
.look-row > label { flex: 0 0 190px; font-weight: 700; } .look-row small { font-weight: 400; opacity: .7; }
.look-row input[type=range] { flex: 1; } .look-row select { flex: 1; padding: 6px; font-size: 15px; border-radius: 8px; }
.look-row input[type=color] { width: 54px; height: 34px; border: 3px solid var(--fg, #222); border-radius: 8px; padding: 0; background: none; }
.look-btns { display: flex; gap: 8px; flex: 1; }
.look-card button { padding: 7px 14px; border-radius: 10px; border: 3px solid var(--fg, #222); background: var(--bg-input, #fff); color: var(--fg, #222); font-weight: 700; cursor: pointer; }
.look-foot { display: flex; justify-content: space-between; margin-top: 18px; }
.look-card .look-ok { background: #02b757; color: #fff; }
/* Busy-Zeile: weiches Überblenden des Texts; der Spinner-Knoten im Chat entfällt (außer im leeren Chat) */
.busy-bar .busy-label { display: inline-block; transition: opacity .26s ease, transform .26s ease; }
.busy-bar .busy-label.fade { opacity: 0; transform: translateY(2px); }
#messages:not(.spinner-center) .thinking-node { display: none; }
.look-btns { flex-wrap: wrap; }
/* Bilder in Chat-Antworten (Markdown ) */
.node-main img.chat-img { display: block; max-width: min(100%, 560px); max-height: 380px; object-fit: contain; border-radius: 12px; margin: 8px 0; border: 2px solid var(--border); background: rgba(128,128,128,.12); }
/* ---- Helfer-Haupt-View: Liste links, Editor rechts (Hintergrund-Aufgaben) ---- */
#helperView { flex: 1 1 auto; display: flex; flex-direction: row; min-height: 0; padding-top: 27px; gap: 0; }
.hp-list { flex: 0 0 230px; background: var(--bg); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow-y: auto; padding: 8px 6px 12px; gap: 2px; }
.hp-list-hd { display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 14px; padding: 4px 6px 8px; }
.hp-newbtn { background: var(--accent); color: var(--accent-fg); border: none; border-radius: 5px; padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
.hp-newbtn:hover { opacity: .9; }
.hp-item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; cursor: pointer; border: 1px solid transparent; }
.hp-item:hover { background: var(--bg-input); }
.hp-item.sel { background: var(--bg-input); border-color: var(--border); }
.hp-item-txt { min-width: 0; flex: 1 1 auto; }
.hp-item-name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-item-sub { font-size: 11px; color: var(--fg-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: #6b6b66; display: inline-block; }
.hp-dot.ok { background: #4caf50; } .hp-dot.err { background: #e5534b; } .hp-dot.running { background: #4c9be8; animation: hp-pulse 1.2s ease-in-out infinite; }
.hp-dot.paused { background: #e0a030; } .hp-dot.queued { background: #8a8a85; } .hp-dot.none { background: #55554f; }
@keyframes hp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.hp-empty { font-size: 12px; color: var(--fg-dim); padding: 12px 8px; line-height: 1.5; }
.hp-empty.hp-center { padding: 60px 20px; text-align: center; font-size: 13px; }
.hp-editor { flex: 1 1 auto; min-width: 0; background: var(--bg); overflow-y: auto; display: flex; flex-direction: column; }
.hp-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--bg); border-bottom: 1px solid var(--border); }
.hp-ctl-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; background: var(--bg-input); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font-size: 12px; font-family: inherit; }
.hp-ctl-btn:hover:not([disabled]) { background: var(--bg-alt); border-color: rgba(255,255,255,.2); }
.hp-ctl-btn.run { color: #5fd068; font-weight: 600; } .hp-ctl-btn.stop { color: #ec7e7e; }
.hp-ctl-btn[disabled] { opacity: .35; cursor: default; }
.hp-status { font-size: 12px; padding: 2px 8px; border-radius: 10px; background: var(--bg-input); color: var(--fg-dim); }
.hp-status.running { color: #7db8f0; } .hp-status.paused { color: #e8b04a; }
.hp-act { font-size: 12px; color: var(--fg-dim); min-width: 0; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: "Cascadia Code", Consolas, monospace; }
.hp-spacer { flex: 0 0 auto; margin-left: auto; }
.hp-save { height: 28px; padding: 0 14px; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--fg-dim); font-size: 12px; cursor: pointer; font-family: inherit; }
.hp-save.dirty { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); font-weight: 600; }
.hp-save[disabled] { opacity: .5; cursor: default; }
.hp-del { height: 28px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: #ec7e7e; font-size: 12px; cursor: pointer; font-family: inherit; }
.hp-del:hover { background: rgba(236,126,126,.12); }
.hp-form { padding: 14px 16px 4px; display: flex; flex-direction: column; gap: 12px; }
.hp-row { display: flex; gap: 14px; align-items: flex-start; }
.hp-row > label { flex: 0 0 120px; font-size: 12px; color: var(--fg-dim); padding-top: 7px; }
.hp-ctl { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.hp-in, .hp-sel, .hp-ta { background: var(--bg-input); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: 6px 9px; font-size: 13px; font-family: inherit; box-sizing: border-box; }
.hp-in:focus, .hp-sel:focus, .hp-ta:focus { outline: none; border-color: var(--accent); }
.hp-wide { width: 100%; } .hp-num { width: 80px; }
.hp-ta { width: 100%; min-height: 110px; resize: vertical; line-height: 1.5; }
.hp-hint { font-size: 11px; color: var(--fg-dim); line-height: 1.4; }
.hp-linkbtn { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 12px; padding: 2px 0; font-family: inherit; }
.hp-linkbtn:hover { text-decoration: underline; }
.hp-att { display: flex; flex-wrap: wrap; gap: 6px; }
.hp-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; padding: 3px 6px; font-size: 12px; }
.hp-chip img { width: 26px; height: 26px; object-fit: cover; border-radius: 3px; }
.hp-chip-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-chip-x { background: none; border: none; color: var(--fg-dim); cursor: pointer; padding: 0 2px; font-size: 11px; }
.hp-chip-x:hover { color: #ec7e7e; }
.hp-sched { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hp-chk { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--fg); cursor: pointer; }
.hp-days { display: flex; gap: 8px; flex-wrap: wrap; }
.hp-result { margin: 8px 16px 24px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-alt); display: flex; flex-direction: column; gap: 8px; }
.hp-res-hd { display: flex; align-items: center; gap: 10px; }
.hp-res-title { font-size: 12px; font-weight: 600; color: var(--fg-dim); text-transform: uppercase; letter-spacing: .4px; }
.hp-res-meta { font-size: 11px; color: var(--fg-dim); margin-right: auto; }
.hp-res-sum { font-size: 13px; padding: 6px 10px; border-radius: 6px; background: var(--bg-input); border-left: 3px solid #6b6b66; }
.hp-res-sum.ok { border-left-color: #4caf50; } .hp-res-sum.err { border-left-color: #e5534b; } .hp-res-sum.warn { border-left-color: #e0a030; }
.hp-res-body { margin: 0; max-height: 360px; overflow: auto; white-space: pre-wrap; word-break: break-word; font-family: "Cascadia Code", Consolas, monospace; font-size: 12px; line-height: 1.5; background: var(--code-bg); border-radius: 6px; padding: 10px 12px; }
.hp-hist-t { margin-top: 6px; }
.hp-hist { display: flex; flex-direction: column; gap: 3px; }
.hp-hist-row { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }
.hp-hist-t1 { color: var(--fg); flex: 0 0 auto; } .hp-hist-t2 { color: var(--fg-dim); flex: 0 0 auto; font-size: 11px; }
.hp-hist-t3 { color: var(--fg-dim); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Fertig-Meldung (Info-Fenster) */
#hp-toasts { position: fixed; right: 18px; bottom: 70px; display: flex; flex-direction: column; gap: 10px; z-index: 10000; max-width: 380px; }
.hp-toast { background: #2a2a28; color: #f0efec; border: 1px solid rgba(255,255,255,.18); border-left: 4px solid #6b6b66; border-radius: 10px; padding: 10px 12px; box-shadow: 0 6px 24px rgba(0,0,0,.45); cursor: pointer; animation: hp-in .25s ease-out; transition: opacity .25s, transform .25s; }
.hp-toast.ok { border-left-color: #4caf50; } .hp-toast.err { border-left-color: #e5534b; } .hp-toast.warn { border-left-color: #e0a030; }
.hp-toast.out { opacity: 0; transform: translateX(20px); }
@keyframes hp-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.hp-toast-hd { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.hp-toast-st { color: var(--fg-dim); font-size: 11px; margin-left: auto; }
.hp-toast-x { background: none; border: none; color: var(--fg-dim); cursor: pointer; font-size: 12px; padding: 0 2px; }
.hp-toast-sum { font-size: 12.5px; color: #d8d7d0; margin-top: 4px; line-height: 1.4; }
/* ---- Skill-Manager: Badges in der Liste + Assistent-/Editor-Dialog ---- */
.sk-badge { font-family: inherit; font-size: 10.5px; padding: 1px 7px; border-radius: 9px; background: var(--bg-input); border: 1px solid var(--border); color: var(--fg-dim); }
.sk-badge2 { color: #7db8f0; } .sk-badge-off { color: #e8b04a; border-color: #e8b04a; }
.mdl-card.sk-off { opacity: .6; }
.sk-ov { position: fixed; inset: 0; z-index: 10001; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 20px; }
.sk-card { width: min(760px, 100%); max-height: 100%; display: flex; flex-direction: column; background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 48px rgba(0,0,0,.6); }
.sk-hd { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; font-size: 15px; font-weight: 600; border-bottom: 1px solid var(--border); }
.sk-x { background: none; border: none; color: var(--fg-dim); cursor: pointer; font-size: 14px; }
.sk-x:hover { color: var(--fg); }
.sk-steps { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 18px 0; }
.sk-step { font-size: 11.5px; padding: 3px 9px; border-radius: 10px; background: var(--bg-input); color: var(--fg-dim); }
.sk-step.on { background: var(--accent); color: var(--accent-fg); font-weight: 600; } .sk-step.done { color: #5fd068; }
.sk-body { padding: 14px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; min-height: 160px; }
.sk-q { font-size: 16px; font-weight: 600; } .sk-help { font-size: 12.5px; color: var(--fg-dim); line-height: 1.5; }
.sk-sub { font-size: 11px; color: var(--fg-dim); font-weight: 400; }
.sk-row { display: flex; gap: 12px; align-items: flex-start; } .sk-row > label { flex: 0 0 110px; font-size: 12px; color: var(--fg-dim); padding-top: 7px; }
.sk-in { background: var(--bg-input); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: 6px 9px; font-size: 13px; font-family: inherit; box-sizing: border-box; width: 100%; }
.sk-in:focus { outline: none; border-color: var(--accent); } .sk-in[readonly] { opacity: .7; }
.sk-ta { resize: vertical; line-height: 1.5; } .sk-ta-s { min-height: 70px; } .sk-ta-m { min-height: 110px; } .sk-ta-l { min-height: 220px; font-family: "Cascadia Code", Consolas, monospace; font-size: 12px; }
.sk-actions { display: flex; align-items: center; gap: 10px; }
.sk-btn { height: 30px; padding: 0 14px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-input); color: var(--fg); font-size: 12.5px; cursor: pointer; font-family: inherit; white-space: nowrap; }
.sk-btn:hover:not([disabled]) { border-color: rgba(255,255,255,.25); } .sk-btn[disabled] { opacity: .45; cursor: default; }
.sk-primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); font-weight: 600; }
.sk-ft { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border); } .sk-sp { flex: 1 1 auto; }
.sk-box { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: var(--bg-alt); display: flex; flex-direction: column; gap: 6px; }
.sk-boxt { font-size: 12px; font-weight: 600; color: var(--fg-dim); } .sk-inline { display: flex; gap: 8px; }
.sk-out { margin: 0; max-height: 220px; overflow: auto; white-space: pre-wrap; word-break: break-word; font-family: "Cascadia Code", Consolas, monospace; font-size: 12px; background: var(--code-bg); border-radius: 6px; padding: 8px 10px; }
.sk-wait { padding: 40px 10px; text-align: center; color: var(--fg-dim); } .sk-err { color: #ec7e7e; font-size: 12.5px; min-height: 16px; }
.hp-in[disabled], .hp-sel[disabled], .hp-sched input[disabled] + span { opacity: .4; cursor: default; }
.hp-sched select[disabled], .hp-sched input[disabled] { opacity: .4; }
/* Composer-Dropdowns: kleines Symbol als Hintergrund (links) - Schild = Permission mode, Glühbirne = Thinking mode */
.modebtn.perm-btn, .modebtn.think-btn { padding-left: 27px; background-repeat: no-repeat; background-position: 8px center; background-size: 14px 14px; }
.modebtn.perm-btn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23898781' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 1.5l5 2v4c0 3-2 5.5-5 7-3-1.5-5-4-5-7v-4z'/%3E%3Cpath d='M5.8 8l1.6 1.6 3-3.2'/%3E%3C/svg%3E"); }
.modebtn.think-btn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23898781' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 1.5a4.5 4.5 0 0 0-2.6 8.2V11h5.2V9.7A4.5 4.5 0 0 0 8 1.5z'/%3E%3Cpath d='M6.2 13h3.6M6.9 14.6h2.2'/%3E%3C/svg%3E"); }
.modebtn.perm-btn:hover, .modebtn.think-btn:hover { background-repeat: no-repeat; background-position: 8px center; background-size: 14px 14px; }