/* Designsystem des Support-Clients — destilliert aus dem Design-Export „Support Client".
   Theme über CSS-Variablen; die Wahl Hell/Dunkel/System setzt C# (UiState) als Klasse auf
   .app-shell, die Akzentfarbe als Inline-Variable. „System" (Klasse theme-system) entscheidet
   der Browser bzw. die WebView selbst über prefers-color-scheme — live beim OS-Wechsel, je
   Gerät, ohne Re-Render. Es gibt bewusst kein themenbezogenes JavaScript. */

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 500;
    src: url('fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 600;
    src: url('fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    src: url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 600;
    src: url('fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2');
}

:root {
    --font-sans: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Menlo, monospace;
    --ok: #3EAF7C;
    --ok-soft: rgba(76, 195, 138, .10);
    --ok-border: rgba(76, 195, 138, .3);
    --warn: #D19A2F;
    --warn-soft: rgba(209, 154, 47, .12);
    --warn-border: rgba(209, 154, 47, .35);
    --danger: #E5626A;
    --danger-soft: rgba(229, 98, 106, .10);
    --danger-border: rgba(229, 98, 106, .35);
    --info: #5B8DD6;
}

/* Dunkles Theme (Default) */
.app-shell,
.theme-dark {
    --bg: #121417;
    --chrome: #0E1013;
    --panel: #16191E;
    --panel2: #1A1D22;
    --field: #0E1013;
    --border: rgba(255, 255, 255, .08);
    --border-soft: rgba(255, 255, 255, .055);
    --border-strong: rgba(255, 255, 255, .12);
    --hover: rgba(255, 255, 255, .05);
    --hover2: rgba(255, 255, 255, .12);
    --text: #E8EAED;
    --text2: #C9CDD4;
    --text3: #9AA0A9;
    --text4: #6B7280;
    --text5: #5B616C;
    --stripe1: #1A1D22;
    --stripe2: #1E2229;
    --accent-fg: #0E1013;
    --dot-off: #5B616C;
}

/* Helle Werte — bei Änderungen auch den theme-system-Block direkt darunter nachziehen: Er
   trägt dieselben Werte hinter prefers-color-scheme, und eine Media Query kann eine
   Klassenliste nicht wiederverwenden. */
.theme-light {
    --bg: #F2F3F5;
    --chrome: #E9EBEF;
    --panel: #FFFFFF;
    --panel2: #F5F6F8;
    --field: #FFFFFF;
    --border: rgba(0, 0, 0, .10);
    --border-soft: rgba(0, 0, 0, .07);
    --border-strong: rgba(0, 0, 0, .18);
    --hover: rgba(0, 0, 0, .045);
    --hover2: rgba(0, 0, 0, .07);
    --text: #1B1E24;
    --text2: #3A3F47;
    --text3: #5B6169;
    --text4: #6E7580;
    --text5: #8A9099;
    --stripe1: #E8EAEE;
    --stripe2: #EFF1F4;
    --accent-fg: #0E1013;
    --dot-off: #A5ABB4;
}

/* Theme „System" (Klasse theme-system): dunkel ist der Default der .app-shell; steht das Gerät
   auf hell, greifen hier EXAKT die Werte von .theme-light (bei Änderungen beide Blöcke pflegen).
   So folgt die Oberfläche dem OS-Wechsel live — im Browser des Hubs wie in der WebView der
   nativen Köpfe, ohne dass ein Kopf das Systemdesign kennen muss. */
@media (prefers-color-scheme: light) {
    .theme-system {
        --bg: #F2F3F5;
        --chrome: #E9EBEF;
        --panel: #FFFFFF;
        --panel2: #F5F6F8;
        --field: #FFFFFF;
        --border: rgba(0, 0, 0, .10);
        --border-soft: rgba(0, 0, 0, .07);
        --border-strong: rgba(0, 0, 0, .18);
        --hover: rgba(0, 0, 0, .045);
        --hover2: rgba(0, 0, 0, .07);
        --text: #1B1E24;
        --text2: #3A3F47;
        --text3: #5B6169;
        --text4: #6E7580;
        --text5: #8A9099;
        --stripe1: #E8EAEE;
        --stripe2: #EFF1F4;
        --accent-fg: #0E1013;
        --dot-off: #A5ABB4;
    }
}

* { box-sizing: border-box; }

html, body, #app {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Mobile Browser blähen sonst Text nach eigenem Ermessen auf (iOS „Text Size Adjust"). */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
    background: rgba(128, 134, 145, .35);
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-track { background: transparent; }

@keyframes scPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes scSpin { to { transform: rotate(360deg); } }

/* ---- Shell ---- */

.app-shell {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--text);
    font-size: 13px;
    overflow: hidden;
}

.app-body {
    flex: 1;
    display: flex;
    min-height: 0;
}

.app-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--bg);
}

/* ---- Kopfleiste (im nativen Fensterrahmen, ohne Fensterknöpfe) ---- */

.titlebar {
    height: 38px;
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    background: var(--chrome);
    border-bottom: 1px solid var(--border);
    user-select: none;
}

.titlebar .logo {
    flex: none;
    display: block;
    color: var(--text);
}

.titlebar .app-name { font-size: 12px; font-weight: 600; letter-spacing: .2px; }
.titlebar .app-sub { font-size: 11px; color: var(--text4); }
.titlebar .spacer, .spacer { flex: 1; }

.theme-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 99px;
    border: 1px solid var(--border-strong);
    background: transparent;
    color: var(--text3);
    font-family: var(--font-mono);
    font-size: 10px;
    cursor: pointer;
}
.theme-toggle:hover { border-color: var(--text4); color: var(--text); }

/* Menü-Knopf (Burger) der Titelleiste: klappt auf schmalen Ansichten die Sidebar als Einschub
   auf; auf breiten Ansichten steht die Sidebar immer und der Knopf bleibt ausgeblendet. */
.nav-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: none;
    padding: 0;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--text2);
    cursor: pointer;
}
.nav-burger:hover { background: var(--hover); color: var(--text); }
.nav-burger svg { width: 18px; height: 18px; }

.status-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 99px;
    font-family: var(--font-mono);
    font-size: 10px;
}
.status-pill .dot { width: 6px; height: 6px; border-radius: 50%; }
.status-pill.ok { background: var(--ok-soft); border: 1px solid var(--ok-border); color: var(--ok); }
.status-pill.ok .dot { background: var(--ok); animation: scPulse 2.4s ease infinite; }
.status-pill.bad { background: var(--danger-soft); border: 1px solid var(--danger-border); color: var(--danger); }
.status-pill.bad .dot { background: var(--danger); }
/* „Läuft/ungeprüft": weder gut noch schlecht — gedeckt, mit ruhig pulsierendem Punkt, damit ein
   träges Fremdsystem (Ticketsystem §4.3) sichtbar arbeitet statt stumm zu wirken. */
.status-pill.pending { background: var(--hover2); border: 1px solid var(--border2); color: var(--text2); }
.status-pill.pending .dot { background: var(--text3); animation: scPulse 1.4s ease infinite; }

/* Klickbares Titelleisten-Badge fürs Self-Update (§25) — Button-Optik auf Pill-Basis. */
button.status-pill.update {
    background: var(--warn-soft);
    border: 1px solid var(--warn-border);
    color: var(--warn);
    font-family: var(--font-mono);
    font-size: 10px;
    cursor: pointer;
}
button.status-pill.update:hover { border-color: var(--warn); }
.status-pill.update .dot { background: var(--warn); animation: scPulse 2.4s ease infinite; }

/* ---- Sidebar ---- */

.sidebar {
    width: 216px;
    flex: none;
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border-right: 1px solid var(--border);
}

.sidebar-nav {
    padding: 14px 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* Gruppe unter einer .sidebar-heading (z. B. „Arbeit") — die Überschrift bringt den Abstand mit. */
.sidebar-nav.grouped { padding-top: 0; }

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 7px;
    cursor: pointer;
    color: var(--text2);
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    font-family: var(--font-sans);
    font-size: 12.5px;
}
.nav-item:hover { background: var(--hover); }
.nav-item.active { background: var(--hover2); color: var(--text); }

.nav-icon {
    width: 22px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: var(--hover2);
    color: var(--text3);
    flex: none;
}
.nav-icon svg { width: 13px; height: 13px; }
.nav-item.active .nav-icon { background: var(--accent, #4CC2A9); color: var(--accent-fg); }

.nav-label { font-weight: 500; }
.nav-count { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--text4); }

.sidebar-heading {
    padding: 14px 20px 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--text5);
}

/* Der Abstandhalter zwischen den beiden Kategorien: „Arbeit" oben, „Verwaltung" am unteren Rand
   über der Fußzeile. Die leere Fläche dazwischen IST die Trennung — sie kostet nichts und sagt
   mehr als eine weitere Linie. */
.sidebar-spacer { flex: 1; min-height: 12px; }

/* ---- Gruppe „Verwaltung" (auf-/zuklappbar) ---- */

.sidebar-admin {
    flex: none;
    padding: 8px 10px 10px;
    border-top: 1px solid var(--border-soft);
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* Aufgeklappt kann die Gruppe auf kurzen Fenstern länger werden als der Platz — dann scrollt
       sie, statt die Fußzeile aus dem Bild zu schieben. */
    max-height: 60%;
    overflow-y: auto;
}

/* Die Klappzeile trägt die Optik einer .sidebar-heading, ist aber anfassbar: gleiche Schrift,
   gleicher Zeilenraster wie ein .nav-item (damit die Punkte darunter bündig anschließen). */
.admin-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 7px;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    cursor: pointer;
    color: var(--text5);
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.admin-toggle:hover { background: var(--hover); color: var(--text3); }
.admin-toggle.open { color: var(--text3); }
.admin-toggle .chev {
    width: 22px;
    height: 18px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text4);
}
.admin-toggle .chev svg { width: 13px; height: 13px; }
/* Zugeklappt bliebe der einzige Zähler, der zum Handeln auffordert, unsichtbar — die offenen
   Einrichtungsschritte. Der Punkt hält ihn an der Zeile. */
.admin-toggle .dot {
    margin-left: auto;
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 50%;
    background: var(--warn);
    animation: scPulse 2.4s ease infinite;
}

/* Abdunkelung hinter dem mobilen Sidebar-Einschub (MainLayout rendert sie nur bei offenem
   Menü); sichtbar wird sie ausschließlich über die Schmale-Ansichten-Regeln am Dateiende. */
.sidebar-scrim {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 25;
    background: rgba(8, 9, 11, .5);
}

.sidebar-footer {
    flex: none;
    padding: 12px 14px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sidebar-footer .cert-line { display: flex; align-items: center; gap: 8px; }
.sidebar-footer .cert-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex: none; }
.sidebar-footer .cert-title { font-size: 11px; font-weight: 500; }
.sidebar-footer .cert-sub, .sidebar-footer .version { font-family: var(--font-mono); font-size: 10px; color: var(--text4); }
.sidebar-footer .version { color: var(--text5); }

/* Der Angemeldete als Weg zu „Mein Konto" (Hub §5.1): dieselbe Zeile wie das Zertifikat der
   nativen Köpfe, nur anfassbar — deshalb der Knopf-Reset und ein eigener Aktiv-Zustand. */
.sidebar-footer .account-line {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    margin: -6px -8px;
    border: none;
    border-radius: 7px;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.sidebar-footer .account-line:hover { background: var(--hover); }
.sidebar-footer .account-line.active { background: var(--hover2); }
.sidebar-footer .account-line .avatar {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent, #4CC2A9);
    color: var(--accent-fg);
    font-size: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sidebar-footer .account-text { display: flex; flex-direction: column; min-width: 0; }
.sidebar-footer .account-text .cert-title,
.sidebar-footer .account-text .cert-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Ansichten ---- */

.view {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

.view-head {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 24px 14px;
}

.view-title { font-size: 17px; font-weight: 600; }
.view-sub { font-size: 12px; color: var(--text3); margin-top: 2px; }

.view-scroll { flex: 1; overflow-y: auto; padding: 0 24px 24px; }

.search-input, .text-input, .select-input {
    padding: 7px 12px;
    border-radius: 7px;
    border: 1px solid var(--border-strong);
    background: var(--field);
    color: var(--text);
    font-size: 12.5px;
    outline: none;
    font-family: var(--font-sans);
}
.search-input { width: 240px; font-family: var(--font-mono); font-size: 11.5px; }
/* Breites Suchfeld (Ticket-Übersicht); auf schmalen Ansichten nimmt es die volle Zeile ein. */
.search-input.grow { width: 260px; }
.text-input.mono { font-family: var(--font-mono); font-size: 11.5px; }
.text-input:focus, .search-input:focus, .select-input:focus { border-color: var(--text4); }
.text-input.accent-border { border-color: var(--accent, #4CC2A9); }
input::placeholder { color: var(--text5); }

/* ---- Buttons ---- */

.btn {
    padding: 8px 14px;
    border-radius: 7px;
    border: 1px solid var(--border-strong);
    background: transparent;
    color: var(--text2);
    font-family: var(--font-sans);
    font-size: 12.5px;
    cursor: pointer;
    white-space: nowrap;
}
.btn:hover { border-color: var(--text4); color: var(--text); }
.btn:disabled { opacity: .45; cursor: default; }
.btn:disabled:hover { border-color: var(--border-strong); color: var(--text2); }

.btn.primary {
    border: 1px solid transparent;
    background: var(--accent, #4CC2A9);
    color: var(--accent-fg);
    font-weight: 600;
}
.btn.primary:hover { filter: brightness(1.1); color: var(--accent-fg); }
.btn.primary:disabled:hover { filter: none; }

.btn.danger { border-color: var(--danger-border); color: var(--danger); }
.btn.danger:hover { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger); }

.btn.subtle { border-color: transparent; background: var(--hover2); color: var(--text); }
.btn.subtle:hover { filter: brightness(1.2); }

.btn.sm { padding: 5px 10px; font-size: 11px; border-radius: 6px; }
.btn.mono { font-family: var(--font-mono); font-size: 10.5px; }
.btn.block { width: 100%; }

/* "Fernwartung" split/dropdown button (VNC + RDP), used in the target list and connection tiles. */
.fw { position: relative; display: inline-flex; }
.fw-block { display: flex; }
.fw-block > .fw-toggle { width: 100%; }
.fw-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.fw-caret { font-size: 9px; opacity: .7; line-height: 1; }
.fw-backdrop { position: fixed; inset: 0; z-index: 900; background: transparent; }
.fw-menu {
    position: fixed; top: -9999px; left: -9999px; z-index: 901;
    min-width: 232px; padding: 4px;
    background: var(--panel2); border: 1px solid var(--border-strong);
    border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, .38);
}
.fw-item {
    display: flex; flex-direction: column; gap: 1px;
    width: 100%; text-align: left;
    background: transparent; border: 0; border-radius: 7px;
    padding: 8px 10px; cursor: pointer; color: var(--text);
}
.fw-item:hover { background: var(--hover2); }
.fw-item-title { font-weight: 600; font-size: 13px; }
.fw-item-sub { font-size: 11px; color: var(--text3); }

.icon-btn {
    border: none;
    background: transparent;
    color: var(--text4);
    font-size: 15px;
    cursor: pointer;
    padding: 2px 6px;
}
.icon-btn:hover { color: var(--text); }

/* ---- Tabellen ---- */

/* flex: none ist hier Pflicht und keine Kosmetik: In einer Spalten-Flexbox (.view-scroll.stack-16)
   schrumpfen Kinder standardmässig, und weil diese Karte overflow gesetzt hat, greift die
   automatische Mindesthöhe nicht — sie wurde also auf die Fensterhöhe zusammengedrückt und schnitt
   mit overflow-y: hidden alle weiteren Zeilen ab. Der Scrollbalken der Ansicht erschien nie, weil
   gar nichts überlief. Mit flex: none behält die Karte ihre volle Höhe und .view-scroll scrollt. */
.table-card {
    flex: none;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    background: var(--panel);
}

.group-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 2px;
}
.group-head .g-name { font-size: 12.5px; font-weight: 600; color: var(--text2); }
.group-head .g-meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--text5); }
.group { margin-bottom: 18px; }

.t-head, .t-row { display: grid; gap: 0 10px; align-items: center; padding: 7px 14px; }
.t-head {
    background: var(--panel2);
    border-bottom: 1px solid var(--border-soft);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text5);
}
.t-head span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-row { border-bottom: 1px solid var(--border-soft); padding-block: 10px; }
.t-row.clickable { cursor: pointer; }
.t-row.clickable:hover { background: var(--hover); }
.t-row.selected { background: var(--hover2); }
.compact .t-row { padding-block: 6px; }

.targets-grid { grid-template-columns: 24px 26px 22px minmax(130px, 1.4fr) minmax(110px, 1fr) minmax(0, 1.2fr) 112px 92px; }

/* Mehrfachauswahl: Häkchenspalte, angehakte Zeile und die Aktionsleiste darüber. */
.cell-check { display: flex; align-items: center; }
.cell-check input { margin: 0; cursor: pointer; accent-color: var(--accent, #4CC2A9); }
.t-row.checked { background: var(--hover); box-shadow: inset 2px 0 0 var(--accent, #4CC2A9); }
/* Fortschritt und Ergebnisliste eines Massenlaufs (Dialog). */
.bulk-progress { margin-bottom: 12px; }
.bulk-progress-line { margin-top: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--text3); }
.bulk-list { max-height: 320px; overflow-y: auto; border: 1px solid var(--border-soft); border-radius: 6px; }
.bulk-line { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-bottom: 1px solid var(--border-soft); }
.bulk-line:last-child { border-bottom: none; }
.bulk-line-main { min-width: 0; display: flex; flex-direction: column; }
/* Der Grund eines Fehlschlags ist die eigentliche Nachricht des Berichts — er wird umgebrochen
   statt abgeschnitten. */
.bulk-line-main .cell-sub { white-space: normal; overflow: visible; }
.bulk-badge {
    flex: none;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--border);
    font-size: 11px;
    color: var(--text4);
}
.bulk-badge.ok { color: var(--ok); border-color: var(--ok-border); background: var(--ok-soft); }
.bulk-badge.failed { color: var(--err, #d9534f); border-color: currentColor; }
.bulk-badge.active { color: var(--accent, #4CC2A9); border-color: currentColor; }
.bulk-badge.skipped { color: var(--text5); }

/* Asset-Umbau (Skizze): Typ-Filter über der Asset-Liste + Typ-Etikett in den Asset-Zeilen. */
.asset-chips { flex: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0 24px 12px; }
.asset-chip {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text3);
    background: none;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px 12px;
    cursor: pointer;
}
.asset-chip:hover { border-color: var(--border-strong); color: var(--text2); }
.asset-chip.on { color: var(--accent, #4CC2A9); border-color: var(--accent, #4CC2A9); }
.kind-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-radius: 4px;
    padding: 1px 7px;
    border: 1px solid var(--border);
    color: var(--text3);
    white-space: nowrap;
}
.kind-tag.m365 { color: var(--warn); border-color: var(--warn-border); background: var(--warn-soft); }
.kind-tag.exchange-online { color: var(--ok); border-color: var(--ok-border); background: var(--ok-soft); }
.kind-tag.drucker { color: var(--info); border-color: transparent; background: rgba(91, 141, 214, .14); }
.customers-grid { grid-template-columns: minmax(160px, 1.6fr) 110px 110px minmax(230px, 1fr); padding-inline: 16px; }
/* Einträge der eingebauten Passwortverwaltung (Passwortmanager-Konzept §6.4): Titel, Benutzer,
   Kunde, Computer, Feldarten, Aktionen. Die Feldarten stehen als Pillen und brauchen Luft. */
.passwords-grid { grid-template-columns: minmax(200px, 1.8fr) minmax(120px, 1fr) minmax(120px, 1fr) minmax(120px, 1fr) minmax(150px, 1.2fr) 180px; gap: 0 12px; padding-inline: 16px; }
.pw-fields { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
/* „Ablage" (wo das Zertifikat verwahrt wird) steht in beiden Tabellen vor der letzten Spalte. */
.certs-grid { grid-template-columns: 1.4fr 1fr 1fr 140px 150px 110px; gap: 0 12px; padding-inline: 16px; }
.vault-grid { grid-template-columns: minmax(220px, 1.8fr) 120px 100px 140px 150px minmax(220px, 1fr); gap: 0 12px; padding-inline: 16px; }
/* Benutzer-Zertifikate, die dieser Kopf selbst ausgestellt hat (Hub-Konzept §4.2/§4.3). */
.usercerts-grid { grid-template-columns: minmax(180px, 1.6fr) minmax(140px, 1fr) 130px 130px; gap: 0 12px; padding-inline: 16px; }
.warn-text { color: var(--warn); }

.cell-primary { font-weight: 500; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell-sub { font-family: var(--font-mono); font-size: 10px; color: var(--text5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell-mono { font-family: var(--font-mono); font-size: 11.5px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell-mono.dim { color: var(--text3); font-size: 11px; }
.cell-mono.dim2 { color: var(--text4); font-size: 10.5px; }
.cell-actions { display: flex; gap: 5px; justify-content: flex-end; }
.cell-min { min-width: 0; }

/* Betriebssystem-Glyphe (OsIcon.razor): monochrom neben dem Statuspunkt; „unbekannt" tritt zurück */

.os-icon { display: flex; align-items: center; justify-content: center; color: var(--text3); }
.os-icon.unknown { color: var(--text5); }
.os-icon svg { display: block; }

/* Statuspunkt + Badge */

.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot.ok { background: var(--ok); box-shadow: 0 0 0 3px rgba(62, 175, 124, .15); }
.dot.warn { background: var(--warn); box-shadow: 0 0 0 3px rgba(209, 154, 47, .15); }
.dot.off { background: var(--dot-off); box-shadow: 0 0 0 3px rgba(128, 134, 145, .12); }
.dot.unknown { background: transparent; border: 1.5px solid var(--dot-off); box-shadow: none; }

/* Ring um den Statuspunkt = Chat-Leitung des Hubs (Benutzerchat §5.3). Der Punkt selbst bleibt die
   Relay-Präsenz: Ein Rechner kann angemeldet sein und trotzdem keine Chat-Leitung haben, und eine
   stehende Leitung sagt noch nicht, dass jemand davorsitzt. Ohne Leitung (Support-App, nicht von
   der Hub-PKI abgedeckte Ziele) trägt die Hülle keine Klasse und ist damit unsichtbar. */
.dot-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
}
.dot-wrap.chat-on { box-shadow: inset 0 0 0 1.5px var(--ok); }
.dot-wrap.chat-idle { box-shadow: inset 0 0 0 1.5px var(--warn); }
.dot-wrap.chat-down { box-shadow: inset 0 0 0 1.5px var(--danger); }

.pill {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 3px 9px;
    border-radius: 99px;
    font-family: var(--font-mono);
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--hover);
    color: var(--text3);
    border: 1px solid var(--border-strong);
}
.pill.ok { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-border); }
.pill.warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-border); }
.pill.info { background: var(--hover2); color: var(--text2); border-color: var(--border2); }

/* Schlüsselbesitz-Pille der Zertifikatsverwaltung: grün mit Schlüssel-Glyphe = privater
   Schlüssel im Vault (Besitz = Berechtigung), neutral = nur öffentlicher Teil */
.key-pill { gap: 5px; }
.key-pill svg { flex: none; }

/* „Ablage": Die Pille ist ein Aufklapper — dahinter steht der genaue Ort (Pfad bzw.
   Systemspeicher) und wer die Export-Grenze des privaten Schlüssels durchsetzt. */
.ablage-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.ablage-btn:hover .pill { border-color: var(--text5); }
.disclosure { color: var(--text5); font-size: 9px; flex: none; }

.loc-detail { padding: 2px 0 2px 2px; }
.loc-grid {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 4px 12px;
    align-items: baseline;
}
.loc-key { font-size: 11px; color: var(--text5); }
.loc-val { font-size: 11.5px; color: var(--text2); min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Pfade dürfen umbrechen und markierbar bleiben — ein abgeschnittener Pfad nützt niemandem.
   display:block hebt das flex von .loc-val auf, damit langer Text normal umbricht. */
.loc-path {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text2);
    overflow-wrap: anywhere;
    user-select: text;
}
.loc-note { display: block; font-size: 11px; color: var(--text4); line-height: 1.45; }
.loc-enforcer { font-size: 10.5px; color: var(--text4); }
.loc-status { font-size: 10.5px; color: var(--text4); }

/* Ablage-Übersicht am Fuß der Seite */
.loc-place { display: flex; flex-direction: column; gap: 3px; }
.loc-place + .loc-place { padding-top: 8px; border-top: 1px solid var(--border-soft); }
.loc-place-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.loc-place-title { font-weight: 600; font-size: 12px; }

/* „!"-Badge am Anzeigenamen: provisioniertes Ziel, dessen Zweig kein Tresor-Credential mit
   privatem Schlüssel abdeckt — von hier aus nicht erreichbar (Tooltip erklärt den Grund) */
.key-missing {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-left: 6px;
    border-radius: 50%;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    vertical-align: -2px;
    background: var(--warn-soft);
    color: var(--warn);
    border: 1px solid var(--warn-border);
}

/* ---- Leere Zustände & Hinweise ---- */

.empty-box {
    border: 1px dashed var(--border-strong);
    border-radius: 10px;
    padding: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--text4);
}
.empty-box .mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; }

.note { margin-top: 12px; font-size: 11.5px; color: var(--text4); }
.error-text { color: var(--danger); font-size: 11.5px; white-space: pre-wrap; }

/* Fortschrittsbalken (Software-Update im Detail-Panel) */
.progress-track { height: 6px; margin-top: 6px; border-radius: 3px; background: var(--border-strong); overflow: hidden; }
.progress-fill { height: 100%; background: var(--info); transition: width .2s ease; }

.callout {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 7px;
    background: rgba(229, 180, 84, .08);
    border: 1px solid rgba(229, 180, 84, .3);
    font-size: 11px;
    color: #C08F2C;
}
.callout .dot-inline { width: 6px; height: 6px; border-radius: 50%; background: var(--warn); flex: none; }
.callout .mono { font-family: var(--font-mono); }

/* ---- Verbindungen (Karten, Konzept §10: Zustand statt Vorschau) ---- */

.conn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(370px, 1fr));
    gap: 16px;
    align-items: start;
}

.conn-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.conn-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--chrome);
    border-bottom: 1px solid var(--border);
}
.conn-title-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.conn-name-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.conn-name-row .dot { flex: none; }
.conn-name-row .dot.ok { animation: scPulse 2.4s ease infinite; }
.conn-name { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conn-host { font-family: var(--font-mono); font-size: 10.5px; color: var(--text4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Sitzungs-Chips: mTLS (Sicherheitsdialog), VNC/RDP (Sitzung öffnen/starten), n TUN (Tunnel). */
.conn-chips { display: flex; gap: 5px; flex: none; }
.conn-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 37px;
    padding: 5px 6px;
    border-radius: 9px;
    border: 1px solid var(--border-strong);
    background: transparent;
    color: var(--text5);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .05em;
    cursor: pointer;
}
.conn-chip:hover { border-color: var(--text4); color: var(--text3); }
.conn-chip .ind { display: flex; align-items: center; justify-content: center; height: 12px; font-size: 11px; font-weight: 600; line-height: 1; }
.conn-chip .ind svg { display: block; width: 10px; height: 11px; }
.conn-chip .lbl { line-height: 1; }
.conn-chip .chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dot-off); }
.conn-chip .chip-dot.ok { background: var(--ok); animation: scPulse 2s ease infinite; }
.conn-chip .chip-dot.info { background: var(--info); animation: scPulse 2s ease infinite; }
.conn-chip.on { border-color: var(--ok-border); background: var(--ok-soft); color: var(--ok); }
.conn-chip.on:hover { border-color: var(--ok); color: var(--ok); }
.conn-chip.rdp.on, .conn-chip.tun.on {
    border-color: rgba(91, 141, 214, .45);
    background: rgba(91, 141, 214, .10);
    color: var(--info);
}
.conn-chip.rdp.on:hover, .conn-chip.tun.on:hover { border-color: var(--info); color: var(--info); }
/* Verbindungsart zum Relay (§28.4): ohne beidseitig verschlüsselte Hülle bewusst NICHT grün,
   sondern gedämpft warnend — offener Handshake und unbekannte Gegenstelle sollen auffallen. */
.conn-chip.relay:not(.on) { border-color: var(--warn-border); background: var(--warn-soft); color: var(--warn); }
.conn-chip.relay:not(.on):hover { border-color: var(--warn); color: var(--warn); }

/* Sitzungsprotokoll: die letzten Aktivitätseinträge, klickbar zur Aktivität-Seite. */
.conn-feed {
    min-height: 88px;
    padding: 9px 14px 7px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    cursor: pointer;
}
.conn-feed:hover { background: var(--hover); }
.feed-row { display: flex; gap: 10px; align-items: baseline; white-space: nowrap; overflow: hidden; line-height: 1.85; }
.feed-time { color: var(--text5); flex: none; }
.feed-title { flex: none; color: var(--text2); }
.feed-title.ok { color: var(--ok); }
.feed-title.info { color: var(--info); }
.feed-title.err { color: var(--danger); }
.feed-title.dim { color: var(--text4); }
.feed-detail { color: var(--text4); overflow: hidden; text-overflow: ellipsis; }
.feed-empty { color: var(--text5); line-height: 1.85; }

/* Netz-Metriken aus dem Verbindungs-Monitor: RTT, Durchsatz, Qualitätswort. */
.conn-net {
    display: flex;
    gap: 14px;
    align-items: baseline;
    padding: 8px 14px;
    border-top: 1px solid var(--border-soft);
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--text3);
}
.conn-net .rtt { color: var(--text2); }
.conn-net .arrow { color: var(--text5); }
.conn-net .net-q { margin-left: auto; }
.conn-net .net-q.ok { color: var(--ok); }
.conn-net .net-q.warn { color: var(--warn); }
.conn-net .net-q.danger { color: var(--danger); }
.conn-net .net-q.dim { color: var(--text5); }

/* Ressourcen-Balken CPU/RAM/DISK (GetResourceStats, Protokoll v3). */
.conn-res {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    padding: 4px 14px 12px;
}
.conn-res-hint {
    padding: 6px 14px 12px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text5);
}
.res { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.res-line { display: flex; justify-content: space-between; gap: 6px; font-family: var(--font-mono); font-size: 10px; color: var(--text4); }
.res-line .val { color: var(--text2); }
.res-line .val.warn { color: var(--warn); }
.res-line .val.danger { color: var(--danger); }
.res-track { height: 5px; border-radius: 3px; background: var(--border-strong); overflow: hidden; }
.res-fill { height: 100%; border-radius: 3px; background: var(--text4); transition: width .3s ease; }
.res-fill.ok { background: var(--ok); }
.res-fill.info { background: var(--info); }
.res-fill.warn { background: var(--warn); }
.res-fill.danger { background: var(--danger); }

.conn-foot {
    display: flex;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid var(--border);
}
.conn-foot .btn.primary { flex: 1; padding: 7px 0; font-size: 12px; }
.conn-foot .fw { flex: 1; }
.conn-foot .fw > .fw-toggle { width: 100%; }

/* ---- VNC ---- */

.vnc-view { flex: 1; display: flex; flex-direction: column; min-height: 0; background: #0B0C0F; }

/* Inactive sessions and the host off the /vnc route are hidden, never unmounted — unmounting would
   dispose the viewer and end the session. Explicit rule because display:flex beats UA [hidden]. */
.vnc-view[hidden], .vnc-panel[hidden] { display: none; }

/* Eine Fernwartungssitzung ist ein Bildschirm, kein Dokument: Ein Zieh-Klick darin markierte
   sonst Bedienleiste und Bildfläche blau, statt zum Zielcomputer zu gehen. */
.vnc-panel {
    user-select: none;
    -webkit-user-select: none;
}

.vnc-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.vnc-tabbar {
    flex: none;
    display: flex;
    align-items: stretch;
    gap: 2px;
    padding: 6px 10px 0;
    background: #101216;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    overflow-x: auto;
}
.vnc-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px 7px 12px;
    max-width: 220px;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    color: #8B919B;
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}
.vnc-tab:hover { color: #C9CDD4; background: rgba(255, 255, 255, .04); }
.vnc-tab.active { background: #16191E; border-color: rgba(255, 255, 255, .07); color: #E8EAED; }
.vnc-tab .dot { flex: none; width: 7px; height: 7px; }
.vnc-tab-name { overflow: hidden; text-overflow: ellipsis; }
.vnc-tab-close {
    flex: none;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: #6B7280;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}
.vnc-tab-close:hover { background: rgba(229, 98, 106, .18); color: var(--danger); }
.vnc-tab.overview { font-weight: 600; padding-right: 14px; margin-right: 8px; border-right: 1px solid rgba(255, 255, 255, .07); border-radius: 8px 0 0 0; }
.vnc-tab-kind { flex: none; font-size: 9px; font-weight: 600; letter-spacing: .04em; padding: 1px 4px; border-radius: 3px; background: rgba(120, 130, 150, .22); color: #9AA3B2; }
.vnc-tab-kind.rdp { background: rgba(90, 140, 220, .22); color: #7FB0F0; }
.vnc-tab-kind.vnc { background: rgba(76, 195, 138, .18); color: #63C99A; }
.vnc-tab-kind.tty { background: rgba(190, 150, 90, .20); color: #D8A96A; }
.badge-rdp { flex: none; font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px; background: rgba(90, 140, 220, .18); color: #7FB0F0; }
.rdp-host { flex: 1; min-height: 0; position: relative; display: flex; background: #0B0D10; }
.rdp-stage { flex: 1; min-height: 0; display: flex; user-select: none; -webkit-user-select: none; }
.rdp-stage iron-remote-desktop { flex: 1; width: 100%; height: 100%; }
.rdp-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #C9CDD4; background: rgba(11, 13, 16, .82); }
.rdp-overlay-error { color: var(--danger); }
.rdp-overlay-line { font-size: 13px; max-width: 70%; text-align: center; }
.rdp-login { display: flex; flex-direction: column; gap: 10px; min-width: 300px; }
.rdp-login-title { font-weight: 600; margin-bottom: 4px; }
.rdp-login-hint { font-size: 11px; color: var(--text-secondary); }

.dot.idle { background: #4B5563; }
.dot.bad { background: var(--danger); }
.dot.live { background: #4CC38A; animation: scPulse 2s ease infinite; }
.dot.ask { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }

.vnc-topbar {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: #16191E;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    color: #C9CDD4;
}
.vnc-topbar .t-name { font-weight: 600; font-size: 12.5px; color: #E8EAED; }
.vnc-topbar .t-host { font-family: var(--font-mono); font-size: 10.5px; color: #6B7280; }
.vnc-topbar .dot.live { width: 8px; height: 8px; background: #4CC38A; animation: scPulse 2s ease infinite; }
.vnc-topbar .btn { border-color: rgba(255, 255, 255, .12); color: #C9CDD4; }
.vnc-topbar .btn:hover { border-color: rgba(255, 255, 255, .3); color: #fff; }
.vnc-topbar .btn.danger { border-color: var(--danger-border); background: var(--danger-soft); color: var(--danger); }
.vnc-topbar .btn.danger:hover { background: rgba(229, 98, 106, .2); }

.vnc-statusbar {
    flex: none;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 6px 16px;
    background: #16191E;
    border-top: 1px solid rgba(255, 255, 255, .07);
    font-family: var(--font-mono);
    font-size: 10px;
    color: #6B7280;
}
.vnc-statusbar .good { color: #4CC38A; }

.vnc-stage {
    position: relative;
    flex: 1;
    min-height: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}
.vnc-canvas {
    max-width: 100%;
    max-height: 100%;
    image-rendering: pixelated;
    outline: none;
}
.vnc-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 9, 11, .55);
}
.vnc-overlay-card {
    background: #16191E;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 10px;
    padding: 22px 28px;
    text-align: center;
    color: #C9CDD4;
    font-size: 12.5px;
}
.vnc-overlay-card.vnc-overlay-error { border-color: rgba(229, 98, 106, .5); }
.vnc-spinner-line { margin-bottom: 12px; }

/* Hinweisstreifen zwischen Kopfleiste und Bild (§30.7): erklärt ein schwarzes Bild, statt es
   unkommentiert stehenzulassen. Bewusst im Fluss und nicht über dem Bild — die WebGL-Insel
   positioniert sich an ihrem Halter, dort gehört nichts drübergelegt. */
.vnc-hinweis {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 14px;
    background: rgba(224, 168, 74, .12);
    border-bottom: 1px solid rgba(224, 168, 74, .35);
    color: #E3C08A;
    font-size: 11.5px;
    line-height: 1.45;
}
.vnc-hinweis span { flex: 1; }

/* ---- Detailpanel ---- */

.detail-section {
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-bottom: 1px solid var(--border);
}
.detail-section:last-child { border-bottom: none; }
.micro-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text5);
}
.kv-row { display: flex; justify-content: space-between; gap: 12px; }
.kv-row .k { font-size: 11.5px; color: var(--text4); flex: none; }
.kv-row .v { font-family: var(--font-mono); font-size: 11px; color: var(--text2); text-align: right; word-break: break-all; }
/* Werte, die ein SATZ sind und keine Kennung: „break-all" ist für Fingerabdrücke und UUIDs
   richtig, zerreißt aber Wörter mitten im Wort („S|itzung 3"). Hier wird nur zwischen Wörtern
   umbrochen — und nur dann innerhalb, wenn ein einzelnes Wort sonst überliefe. */
.kv-row .v.satz { word-break: normal; overflow-wrap: anywhere; }
.cert-block { font-family: var(--font-mono); font-size: 10.5px; color: var(--text3); line-height: 1.8; white-space: pre-line; }

/* ---- Leiste über der Liste (Asset-Umbau) ----
   Sie trägt den Typfilter und — solange etwas angehakt ist — die Massenaktionen. Was ein
   EINZELNES Asset betrifft, liegt im Asset-Dialog; die Zeile führt mit einem Knopf dorthin.
   Die Leiste beerbt die frühere .bulk-bar: Platz und Außenmaße stehen hier bewusst unverändert,
   damit beim Wechsel zwischen Filter und Massenaktionen nichts springt. */
.action-bar {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 24px 12px;
    padding: 7px 8px 7px 12px;
    min-height: 44px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel);
}
.action-bar.on { border-color: var(--accent, #4CC2A9); background: var(--panel2); }
.action-bar .spacer { flex: 1; }
.action-bar .bulk-count { font-size: 12.5px; font-weight: 600; color: var(--text2); }
.action-bar .bulk-detail { font-family: var(--font-mono); font-size: 10.5px; color: var(--text5); }
/* Der Typfilter ist der Ruhezustand der Leiste — die Chips bringen darin keinen eigenen Rand mit. */
.action-bar .asset-chips { padding: 0; }

/* Das „⋯"-Menü der Leiste und des Dialogs. Anders als das Fernwartungsmenü, das per fwmenu.js am
   Fenster ausgerichtet wird (es klappt aus einer scrollenden Tabellenzeile auf), sitzt dieses in
   einem stehenden Kasten — absolute Positionierung genügt, kein JavaScript nötig. */
.more { position: relative; display: inline-flex; }
.fw-menu.inline { position: absolute; top: calc(100% + 6px); right: 0; left: auto; }
.fw-sep { height: 1px; margin: 4px 6px; background: var(--border); }
.fw-item.danger .fw-item-title { color: var(--danger); }

/* Durchsuchbares Drop-down (Kundenfilter der Assets-Liste): Suchfeld oben, darunter die Treffer
   als fw-items in einer scrollenden Liste; der gewählte Eintrag trägt „on". */
.fw-picker { width: 280px; display: flex; flex-direction: column; gap: 4px; }
.fw-picker .fw-search { width: 100%; box-sizing: border-box; }
.fw-list { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.fw-item.on { background: var(--hover2); }
.fw-item.on .fw-item-title { color: var(--accent, #4CC2A9); }
.fw-empty { padding: 10px; font-size: 12px; color: var(--text3); }
.customer-filter .fw-toggle { max-width: 260px; }
.customer-filter .fw-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-filter.on .fw-toggle { border-color: var(--accent, #4CC2A9); color: var(--text); }

/* ---- Dialoge ---- */

.modal-backdrop {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
}
/* Dim + Blur in eine eigene Ebene HINTER dem Dialog: liegt backdrop-filter auf dem gemeinsamen
   Vorfahren, schlägt der Blur in der WKWebView (Mac Catalyst = WebKit) auf den Dialog durch
   („grauer/schwarzer Schleier vor dem Dialog"). Als Geschwister-Pseudoelement mit z-index 0
   bleibt der Blur unter dem Dialog (z-index 1). */
.modal-backdrop::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(8, 9, 11, .6);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    z-index: 0;
}
/* Ein Dialog ÜBER einem Dialog (Verknüpfen aus der Kundenakte heraus): eigene Ebene, damit
   nicht die Reihenfolge im Dokument darüber entscheidet, wer oben liegt. */
.modal-backdrop.on-top { z-index: 60; }
.modal {
    position: relative;
    z-index: 1;
    width: 460px;
    max-height: 86vh;
    overflow-y: auto;
    background: var(--panel);
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.modal.wide { width: 520px; }
.modal-head {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 12px;
}
.modal-title { font-size: 14px; font-weight: 600; }
.modal-sub { font-size: 11.5px; color: var(--text3); margin-top: 2px; }
.modal-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.modal-foot {
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
.modal-foot .grow { flex: 1; }
.modal-foot .foot-ok { font-size: 12px; color: var(--ok); }
.modal-foot .foot-info { font-size: 12px; color: var(--text3); }

/* Asset-Dialog (Asset-Umbau): löst die frühere Detail-Seitenleiste ab. Breiter als die übrigen
   Dialoge, weil er deren gesamten Inhalt trägt — und mit Reitern statt eines Bandwurms aus
   Rubriken. Kopf, Aktionen, Reiter und Fuß stehen fest, nur der Reiterinhalt scrollt. */
.modal.xl { width: 760px; display: flex; flex-direction: column; overflow: hidden; }
.modal.xl .dlg-scroll { overflow-y: auto; }
/* Im Dialog haben die Rubriken den Innenabstand des Dialogs, nicht den der schmalen Seitenleiste. */
.modal .detail-section { padding: 16px 20px; }
.dlg-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--panel2);
}
.dlg-tabs {
    display: flex;
    gap: 2px;
    padding: 0 20px;
    border-bottom: 1px solid var(--border);
    background: var(--panel2);
}
.dlg-tab {
    padding: 9px 12px;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--text3);
    font-family: var(--font-sans);
    font-size: 12px;
    cursor: pointer;
}
.dlg-tab:hover { color: var(--text2); }
.dlg-tab.on { color: var(--text); font-weight: 600; border-bottom-color: var(--accent, #4CC2A9); }
/* Stammdaten zweispaltig: In der 300 px schmalen Seitenleiste ging nur untereinander, im 760 px
   breiten Dialog passen zwei Spalten — dieselben .kv-row, nur anders gesetzt. */
.kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 32px; }
.kv-grid .kv-row { padding-bottom: 7px; border-bottom: 1px solid var(--border-soft); }

.field { display: flex; flex-direction: column; gap: 5px; }
.field > label { font-size: 11.5px; font-weight: 500; color: var(--text3); }
.field .text-input, .field .select-input { padding: 9px 12px; width: 100%; }
.field-hint { font-size: 11px; color: var(--text4); }

.check-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text2); cursor: pointer; }
.check-row input { accent-color: var(--accent, #4CC2A9); }

.tray-icon-row { display: flex; align-items: center; gap: 10px; }
.tray-icon-preview {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex: none;
    border-radius: 5px;
    border: 1px solid var(--border);
    padding: 2px;
    background: var(--panel2);
}
.tray-icon-name { flex: 1; min-width: 0; font-size: 12px; color: var(--text3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.modal-foot .foot-warn { font-size: 11.5px; color: var(--warn); }

.check-badge {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 50%;
    background: rgba(62, 175, 124, .12);
    border: 1px solid rgba(62, 175, 124, .35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ok);
    font-size: 14px;
}

.cert-card {
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--panel2);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cert-card .head { display: flex; align-items: center; gap: 8px; }
.cert-card .head .dot { width: 7px; height: 7px; background: var(--ok); }
.cert-card .head .title { font-size: 12.5px; font-weight: 600; flex: 1; }

/* Provisionierungs-Schritte */

.prov-steps { padding: 16px 20px; display: flex; flex-direction: column; gap: 2px; max-height: 420px; overflow-y: auto; }
.prov-step { display: flex; align-items: center; gap: 12px; padding: 6px 4px; }
.prov-step.todo { opacity: .6; }
.prov-step .badge {
    width: 18px;
    height: 18px;
    flex: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-family: var(--font-mono);
    border: 1px solid transparent;
}
.prov-step.todo .badge { border-color: var(--border-strong); color: var(--text5); }
.prov-step.active .badge { background: var(--accent, #4CC2A9); color: var(--accent-fg); }
.prov-step.done .badge { background: rgba(62, 175, 124, .15); color: var(--ok); }
.prov-step.failed .badge { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-border); }
.prov-step .label { font-size: 12.5px; color: var(--text3); }
.prov-step.active .label { color: var(--text); }

.spinner {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
    border-top-color: var(--accent, #4CC2A9);
    animation: scSpin .8s linear infinite;
    margin-left: auto;
    flex: none;
}

/* ---- Karten (Zertifikate, MCP) ---- */

.panel-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel);
    padding: 16px 18px;
}
.panel-card.row { display: flex; align-items: center; gap: 16px; }
.panel-card .big-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 0 4px rgba(76, 195, 138, .15);
    flex: none;
}
.panel-card .big-dot.warn { background: var(--warn); box-shadow: 0 0 0 4px rgba(209, 154, 47, .15); }

.stack-16 { display: flex; flex-direction: column; gap: 16px; }
.stack-8 { display: flex; flex-direction: column; gap: 8px; }

/* Kleine Layout-/Text-Utilities. Die Seiten benutzen sie längst (Formularzeilen der
   Zertifikatsverwaltung, Hub-Verwaltungsseiten) — definiert waren sie nie: .row-Gruppen
   fielen auf Inline-Fluss zurück, gap-Angaben liefen ins Leere. Abstände kommen als
   Inline-gap von der jeweiligen Stelle, damit die Utility keine Layout-Meinung erzwingt. */
.row { display: flex; align-items: center; min-width: 0; }
.mono { font-family: var(--font-mono); }
.dim { color: var(--text3); }

.list-card { border: 1px solid var(--border); border-radius: 10px; background: var(--panel); overflow: hidden; }
.list-card .head {
    padding: 10px 16px;
    background: var(--panel2);
    border-bottom: 1px solid var(--border-soft);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text5);
}
.list-card .item { padding: 9px 16px; border-bottom: 1px solid var(--border-soft); }
.list-card .item:last-child { border-bottom: none; }
.list-card .item .name { font-family: var(--font-mono); font-size: 11.5px; color: var(--text); }
.list-card .item .desc { font-size: 11px; color: var(--text4); margin-top: 2px; }
.list-card .item .params { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.list-card .item .params .p {
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 1.5;
    color: var(--text5);
    background: var(--panel2);
    border: 1px solid var(--border-soft);
    border-radius: 5px;
    padding: 0 5px;
    cursor: default;
}
.list-card .item .params .p.req { color: var(--text3); border-color: var(--border); }
/* Abgeblendeter Eintrag (MCP-Ansicht: Werkzeug, das gerade kein Ziel kann, §12.5). Das .dim am
   Container allein wirkt nicht — Name und Beschreibung setzen ihre Farbe selbst und gewinnen mit
   höherer Spezifität. Die Abblendung muss deshalb dort ansetzen, wo die Farbe gesetzt wird. */
.list-card .item.dim .name { color: var(--text4); }
.list-card .item.dim .desc { color: var(--text5); }

.mcp-layout {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 16px;
    align-content: start;
}
.mcp-log {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--field);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 320px;
}
.mcp-log .head {
    padding: 10px 16px;
    background: var(--panel);
    border-bottom: 1px solid var(--border-soft);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text5);
}
.mcp-log .lines {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 2;
    color: var(--text3);
}
.mcp-log .line { display: flex; gap: 12px; white-space: nowrap; align-items: baseline; }
.mcp-log .line.link { cursor: pointer; }
.mcp-log .line.link:hover { background: var(--hover); color: var(--text2); }
.mcp-log .line .time { color: var(--text5); flex: none; }
.mcp-log .line .tool { flex: none; }
.mcp-log .line .tool.ok { color: var(--ok); }
.mcp-log .line .tool.err { color: var(--danger); }
.mcp-log .line .tool.info { color: var(--info); }
.mcp-log .line .args { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text4); cursor: default; }
.mcp-log .line .detail { flex: none; color: var(--text5); }

/* ---- Aktivität je Zielcomputer ---- */

.act-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0 24px 24px;
}

.seg-tabs {
    display: flex;
    gap: 4px;
    background: var(--hover);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 3px;
    flex: none;
}
.seg-tabs .seg {
    border: none;
    background: transparent;
    color: var(--text3);
    font-family: var(--font-sans);
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}
.seg-tabs .seg:hover { color: var(--text); }
.seg-tabs .seg.active { background: var(--panel); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.seg-tabs .seg .n { font-family: var(--font-mono); font-size: 10px; color: var(--text5); }

.act-panel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--field);
    overflow: hidden;
}
.act-toolbar {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--panel);
    border-bottom: 1px solid var(--border-soft);
}
.act-toolbar .search-input { flex: 1; max-width: 340px; }
.act-count { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--text5); white-space: nowrap; }

.chip {
    border: 1px solid var(--border-strong);
    background: transparent;
    color: var(--text3);
    font-family: var(--font-mono);
    font-size: 10.5px;
    padding: 5px 10px;
    border-radius: 99px;
    cursor: pointer;
    white-space: nowrap;
}
.chip:hover { color: var(--text); border-color: var(--text4); }
.chip.on { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger); }

.act-lines {
    flex: 1;
    overflow-y: auto;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text3);
}
.act-empty {
    padding: 48px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--text5);
    font-size: 10.5px;
    letter-spacing: .04em;
    text-align: center;
}
.act-line { border-bottom: 1px solid var(--border-soft); }
.act-line .act-row {
    display: flex;
    gap: 12px;
    align-items: baseline;
    padding: 7px 14px;
    cursor: pointer;
    white-space: nowrap;
}
.act-line .act-row:hover, .act-line.open .act-row { background: var(--hover); }
.act-row .time { color: var(--text5); flex: none; }
.act-row .tool { flex: none; }
.act-row .tool.ok { color: var(--ok); }
.act-row .tool.err { color: var(--danger); }
.act-row .ctx {
    flex: none;
    font-size: 9.5px;
    color: var(--text5);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0 4px;
}
.act-row .args { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text4); }
.act-row .right { flex: none; color: var(--text5); }
.act-expand {
    padding: 4px 14px 14px 40px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.act-expand pre {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--border-soft);
    border-radius: 7px;
    background: var(--panel);
    color: var(--text2);
    font-family: var(--font-mono);
    font-size: 10.5px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 320px;
    overflow-y: auto;
}
.act-note { font-size: 10.5px; color: var(--text4); }

/* Konsole: bewusst immer dunkel — ein Terminal bleibt ein Terminal, auch im hellen Theme. */
.term {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: #0E1013;
}
.term-scroll {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column-reverse; /* neueste zuerst im DOM → Ansicht klebt unten, ohne JS */
    padding: 14px 16px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    line-height: 1.55;
}
.term-block { padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.term-block:first-child { border-bottom: none; } /* erstes DOM-Kind = unterster Block */
.term-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 9.5px;
    color: #5B616C;
    margin-bottom: 4px;
}
.term-meta .ctx { border: 1px solid rgba(255, 255, 255, .14); border-radius: 4px; padding: 0 5px; color: #9AA0A9; }
.term-badge { border-radius: 4px; padding: 0 5px; }
.term-badge.err { background: rgba(229, 98, 106, .14); color: #E5626A; border: 1px solid rgba(229, 98, 106, .35); }
.term-badge.warn { background: rgba(209, 154, 47, .14); color: #D19A2F; border: 1px solid rgba(209, 154, 47, .35); }
.term-cmd { display: flex; gap: 8px; color: #E8EAED; white-space: pre-wrap; word-break: break-word; }
.term-cmd .prompt { color: var(--accent, #4CC2A9); font-weight: 600; flex: none; }
.term-out, .term-err { margin: 2px 0 0; white-space: pre-wrap; word-break: break-word; font-family: var(--font-mono); }
.term-out { color: #C9CDD4; }
.term-err { color: #E5626A; }
.term-none { color: #5B616C; font-style: italic; margin-top: 2px; }
/* Kompakte Log-Zeile (Rollout, §23.10): Zeit inline, farbcodiert nach Tonalität. */
.term-msg { display: flex; gap: 8px; color: #C9CDD4; white-space: pre-wrap; word-break: break-word; }
.term-msg.warn { color: #D19A2F; }
.term-msg.err { color: #E5626A; }
.term-msg.muted { color: #7A828D; }
.term-time { color: #4B5568; flex: none; }
.term-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #5B616C;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .04em;
    text-align: center;
    padding: 0 24px;
}

/* ---- Blazor-Fehlerleiste ---- */

#blazor-error-ui {
    background: #b32121;
    color: #fff;
    bottom: 0;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, .3);
    display: none;
    left: 0;
    padding: .6rem 1.25rem .7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-size: 12px;
}
#blazor-error-ui .reload { color: #fff; }
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: .75rem;
    top: .5rem;
}

/* ============ Tickets & Arbeitsbereich (Ticket-KI-Konzept §9) ============ */

/* Übersichtstabelle */
.tickets-grid { grid-template-columns: 64px minmax(220px, 2.2fr) minmax(130px, 1fr) 100px 110px 110px 110px; padding-inline: 16px; }

/* Status-/Prioritäts-Pills; Semantik-Farben aus dem Bestand (--ok/--warn/--danger/--info) */
/* Liste eines noch laufenden Abrufs: sichtbar „von gestern", aber lesbar — sie verschwindet
   nicht unter dem Zeiger weg, gibt sich aber auch nicht als frisch aus. */
.table-card.stale { opacity: .55; transition: opacity .2s ease; }

.tk-pill {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 20px;
    border: 1px solid var(--border-strong);
    color: var(--text3);
    background: var(--hover);
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tk-pill.st-neu { color: var(--info); background: rgba(91, 141, 214, .12); border-color: rgba(91, 141, 214, .35); }
.tk-pill.st-offen { color: var(--warn); background: var(--warn-soft); border-color: var(--warn-border); }

/* Werkzeugliste der Sitzung (Ticket-KI §6.4). Bewusst wie die Verbindungszeile gebaut — Name
   links, Herkunft rechts: Beide Ausklappmenüs beantworten dieselbe Frage („was steht dieser
   Sitzung offen"), und sie sollen dabei nicht verschieden aussehen. Nicht angebotene Werkzeuge
   werden abgeblendet statt ausgeblendet, genau wie in der MCP-Ansicht. */
/* Der Katalog ist lang (ein Dutzend Zielwerkzeuge und mehr) — ohne Deckel reicht das Menü über
   die halbe Ansicht. Gekürzt wird trotzdem nicht: Ein nicht angebotenes Werkzeug ist eine
   Auskunft, kein Ballast. */
.tkw-flyout.tkw-tools { max-height: 60vh; overflow-y: auto; }
.tkw-tools-group {
    font-size: 11px;
    color: var(--text4);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 10px 0 4px;
}
.tkw-tools-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.tkw-tools-chip {
    font-size: 11.5px;
    color: var(--text3);
    background: var(--field);
    border: 1px solid var(--border-soft);
    border-radius: 5px;
    padding: 2px 6px;
}
.tkw-tools-row { display: flex; align-items: baseline; gap: 9px; padding: 4px; font-size: 12.5px; }
.tkw-tools-row .nm { color: var(--text2); width: 130px; flex: none; }
.tkw-tools-row .src {
    flex: 1;
    color: var(--text4);
    font-size: 11.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tkw-tools-row.dim .nm, .tkw-tools-row.dim .src { color: var(--text5); }
.tk-pill.st-wartend { color: var(--text3); }
.tk-pill.st-geschlossen { color: var(--ok); background: var(--ok-soft); border-color: var(--ok-border); }
.tk-pill.pr-hoch { color: var(--danger); background: var(--danger-soft); border-color: var(--danger-border); }
.tk-pill.pr-niedrig { color: var(--text4); }

/* Arbeitsbereich-Host: Panels bleiben gemountet, nur versteckt (Muster .vnc-view). */
.tkw-view { flex: 1; display: flex; flex-direction: column; min-height: 0; background: var(--bg); }
.tkw-view[hidden], .tkw-panel[hidden] { display: none; }
.tkw-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.tkw-empty { flex: 1; display: flex; align-items: center; justify-content: center; }

.tkw-main { flex: 1; display: flex; min-height: 0; position: relative; }

/* Umschalter Chat ↔ Ticket-Referenz: existiert nur auf schmalen Ansichten (Dateiende), auf
   breiten stehen beide Spalten nebeneinander und die Leiste bleibt ausgeblendet. */
.tkw-mobile-switch {
    display: none;
    flex: none;
    gap: 6px;
    padding: 8px 10px;
    background: var(--chrome);
    border-bottom: 1px solid var(--border);
}
.tkw-ms-btn {
    flex: 1;
    min-width: 0;
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid var(--border-strong);
    background: transparent;
    color: var(--text3);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tkw-ms-btn.active { background: var(--hover2); color: var(--text); }

/* Chat-Spalte (dominant links, §9.3) */
.tkw-chat { flex: 1; min-width: 0; display: flex; flex-direction: column; border-right: 1px solid var(--border); }
.tkw-chatlog { flex: 1; overflow-y: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; }
/* Verlaufs-Kinder behalten ihre natürliche Höhe: Karten mit overflow:hidden (Werkzeug-
   Ausklapper) haben als Flex-Kind min-height 0 und würden sonst bei langem Verlauf auf ihre
   Ränder zusammengedrückt — sichtbar nur noch als dünne graue/rote Striche. */
.tkw-chatlog > * { flex-shrink: 0; }
.tkw-placeholder {
    margin: auto;
    max-width: 440px;
    text-align: center;
    color: var(--text3);
    border: 1px dashed var(--border-strong);
    border-radius: 12px;
    padding: 26px 30px;
    background: var(--panel);
}
.tkw-placeholder .mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--text4); }
.tkw-placeholder p { margin: 10px 0 0; font-size: 12.5px; line-height: 1.6; }
.tkw-placeholder .dim { color: var(--text4); font-size: 11px; }
.tkw-composer {
    flex: none;
    display: flex;
    gap: 10px;
    align-items: center;
    border-top: 1px solid var(--border);
    background: var(--chrome);
    padding: 10px 14px;
}

/* Ticket-Spalte (Referenz rechts, §9.3) */
.tkw-ticket { flex: 0 0 380px; min-width: 0; display: flex; flex-direction: column; background: var(--panel); overflow: hidden; }
.tkw-t-head { padding: 13px 14px 10px; border-bottom: 1px solid var(--border-soft); }
.tkw-t-num { font-size: 10.5px; letter-spacing: .05em; color: var(--text4); font-family: var(--font-mono); }
.tkw-t-title { font-size: 14px; font-weight: 600; margin: 3px 0 7px; }
.tkw-t-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.tkw-t-tab {
    font: inherit;
    font-size: 12px;
    padding: 6px 11px 8px;
    color: var(--text3);
    cursor: pointer;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 6px 6px 0 0;
}
.tkw-t-tab:hover { background: var(--hover); }
.tkw-t-tab.active { color: var(--text); border-bottom-color: var(--accent, #4CC2A9); font-weight: 600; }
.tkw-t-tab .dim { color: var(--text4); }
.tkw-t-body { flex: 1; overflow-y: auto; padding: 12px 14px; }

.tkw-info-grid { display: grid; grid-template-columns: 110px 1fr; gap: 6px 10px; font-size: 12.5px; margin: 0; }
.tkw-info-grid dt { color: var(--text4); }
.tkw-info-grid dd { margin: 0; color: var(--text2); overflow-wrap: anywhere; }

/* Verlauf: Richtung als linke Kante (§9.3 — Kunde blau, Antwort neutral, interne Notiz amber) */

/* Schreiben am Vorgang (Ticket-KI §4.2): sitzt unter dem Verlauf, abgesetzt durch eine Linie —
   Lesen und Schreiben sollen sich nicht verwechseln lassen. */
/* Sitzungsbericht (Ticket-KI §12) — sitzt über dem Schreibbereich und füllt dessen Feld. */
.tkw-report { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 7px; }
.tkw-r-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tkw-r-head .spacer { flex: 1 1 auto; }
.tkw-r-head select { width: auto; padding-block: 4px; }
.tkw-r-title { font-size: 12.5px; font-weight: 600; color: var(--text2); }
.tkw-r-only { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text3); }
.tkw-r-note { font-size: 11.5px; color: var(--text4); }
.tkw-r-warn { font-size: 11.5px; color: var(--warn); border: 1px solid var(--warn); border-radius: 6px; padding: 6px 8px; background: var(--panel2); }
.tkw-r-preview { max-height: 220px; overflow: auto; margin: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel2); font-size: 12px; white-space: pre-wrap; word-break: break-word; }

.tkw-write { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.tkw-write textarea { width: 100%; resize: vertical; }
.tkw-write-actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.tkw-write-actions .spacer { flex: 1 1 auto; }
.tkw-write-actions select { width: auto; padding-block: 4px; }

/* Anhänge-Tab */
.tkw-attach { border: 1px solid var(--border); border-radius: 8px; background: var(--panel2); padding: 8px 10px; margin-bottom: 8px; }
.tkw-attach-row { display: flex; align-items: center; gap: 9px; }
.tkw-attach-name { flex: 1; min-width: 0; }
.tkw-attach-name .n { font-size: 12.5px; font-weight: 500; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tkw-attach-name .s, .tkw-attach .s { font-size: 11px; color: var(--text4); }
.tkw-attach-img { margin-top: 8px; max-width: 100%; border: 1px solid var(--border); border-radius: 6px; background: var(--field); }

/* Aktivitätsleiste (Segmente füllen sich in M3–M6) */
.tkw-bar {
    flex: none;
    display: flex;
    align-items: center;
    gap: 16px;
    border-top: 1px solid var(--border);
    background: var(--chrome);
    padding: 7px 14px;
    font-size: 12px;
    color: var(--text3);
}
.tkw-bar .spacer { flex: 1; }
.tkw-bar-seg { white-space: nowrap; }
.tkw-bar-seg.dim { color: var(--text4); }

/* ---------- Ticket-Chat (Ticket-KI-Konzept §9.4, ab M2) ---------- */

/* column-reverse + umgekehrt gerenderte Einträge = Auto-Follow ohne JavaScript (Muster §21). */
.tkw-chatlog.reverse { flex-direction: column-reverse; justify-content: flex-start; }

.tkw-msg { max-width: 78%; }
.tkw-msg.user { align-self: flex-end; }
.tkw-msg-who { font-size: 11px; color: var(--text4); margin-bottom: 4px; }
.tkw-msg.user .tkw-msg-who { text-align: right; }
.tkw-msg-body {
    padding: 10px 13px;
    border-radius: 10px;
    background: var(--panel);
    border: 1px solid var(--border-soft);
    border-top-left-radius: 4px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text2);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.tkw-msg.user .tkw-msg-body {
    background: color-mix(in srgb, var(--accent, #4CC2A9) 14%, var(--panel));
    border-color: color-mix(in srgb, var(--accent, #4CC2A9) 30%, transparent);
    border-top-left-radius: 10px;
    border-top-right-radius: 4px;
}
.tkw-msg.error .tkw-msg-body { border-color: var(--danger-border); color: var(--danger); }
.tkw-msg-body .tkw-attach-img { display: block; max-width: 300px; margin-top: 8px; }

.tkw-note {
    align-self: center;
    font-size: 11.5px;
    color: var(--text4);
    text-align: center;
    max-width: 420px;
    padding: 4px 0;
}

.tkw-cursor {
    display: inline-block;
    width: 7px;
    height: 14px;
    background: var(--accent, #4CC2A9);
    vertical-align: -2px;
    margin-left: 2px;
    border-radius: 1px;
    animation: tkw-blink 1s steps(1) infinite;
}
@keyframes tkw-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tkw-cursor { animation: none; } }

.tkw-composer-block { flex: none; border-top: 1px solid var(--border); background: var(--chrome); padding: 8px 14px 10px; }
.tkw-composer-block .tkw-composer { border-top: none; background: none; padding: 0; }
.tkw-input { flex: 1; resize: none; min-height: 38px; max-height: 130px; font-family: var(--font-sans); }
.tkw-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.tkw-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--text2);
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 3px 8px;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tkw-chip-x { border: none; background: none; color: var(--text4); cursor: pointer; padding: 0 2px; border-radius: 3px; }
.tkw-chip-x:hover { color: var(--danger); background: var(--hover); }

/* Bild-Rückkanal (§6.4): Screenshot in der Werkzeug-Karte + Erstanalyse-Bilder an der Notiz */
.tkw-tool-img { display: block; max-width: 420px; margin: 6px 10px 8px; }
.tkw-note .tkw-attach-img { display: block; max-width: 220px; margin: 6px auto 0; }

/* Drag-&-Drop-Ziel des Composers (composer.js setzt die Klasse während des Ziehens) */
.tkw-composer-block.tkw-drop { outline: 2px dashed var(--accent, #4CC2A9); outline-offset: -4px; border-radius: 8px; }

/* ---------- Dialog „KI & LLMs" (Ticket-KI-Konzept §5.5) ---------- */
.llm-row, .pw-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel2);
    margin-bottom: 6px;
}
.llm-row-main, .pw-row-main { flex: 1; min-width: 0; }
.llm-row-name, .pw-row-name { font-size: 12.5px; font-weight: 600; color: var(--text2); display: flex; gap: 8px; align-items: center; }
.llm-row-sub { font-size: 11px; color: var(--text4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* API-Art und Denkstufe (§5.1) dürfen NICHT abgeschnitten werden: „Chat-Completions
   (automatisch) · Denkstufe medium" passt neben den vier Knöpfen nicht in eine Zeile und
   endete als „… · Denkstufe med…" — gerade der Wert fiel weg. Diese Zeile bricht deshalb um. */
[data-test=llm-row-api] { white-space: normal; overflow: visible; line-height: 1.5; }
/* Verdacht auf eine falsch eingetragene Basis-URL (§5.1). Warnend, nicht rot: Der Endpunkt ist
   benutzbar, die URL nur vermutlich falsch. Der Hinweis ist ein eigenes Kind der Zeile und bricht
   mit flex-basis:100% unter Text und Knöpfe um — in der Textspalte stünde der Satz sonst in einer
   Handbreit Spalte neben den Knöpfen. */
.llm-row { flex-wrap: wrap; }
.llm-row-warn { flex-basis: 100%; font-size: 11px; color: var(--warn); line-height: 1.5; }
.llm-row-warn .btn { margin-left: 6px; vertical-align: baseline; }
/* Wie .llm-row-sub, aber ohne Abschneiden: Die Feld-Pillen eines Eintrags dürfen umbrechen. */
.pw-row-sub { font-size: 11px; color: var(--text4); min-width: 0; }
.llm-form, .pw-form { border: 1px solid var(--border-strong); border-radius: 8px; padding: 10px 12px; background: var(--panel2); }
.llm-form-grid, .pw-form-grid { display: grid; grid-template-columns: 92px 1fr; gap: 7px 10px; align-items: center; font-size: 12px; color: var(--text2); }
/* Eine Zeile „Art · Name · Wert · entfernen" im Eintrags-Editor (Passwortmanager-Konzept §6.4).
   min-width:0 auf den Kindern: Ohne das wachsen die Eingabefelder über ihre Spalte hinaus und
   drücken die letzte Spalte aus dem Formular. */
.pw-field-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px; align-items: center; margin-top: 6px; }
.pw-field-row > * { min-width: 0; }
.pw-field-row .llm-check { white-space: nowrap; }
/* Freigabedialog (§7.5): Die Angaben stehen als Text, nicht in Eingabefeldern — hier wird nichts
   bearbeitet, nur bestätigt. */
.pw-approve-value { font-size: 12.5px; color: var(--text); font-weight: 600; }
/* Herausgabe-Protokoll (§7.5): kompakte Zeilen, Zeit in fester Breite damit die Spalte steht. */
.pw-audit { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; }
.pw-audit-row {
    display: grid;
    grid-template-columns: 84px auto minmax(0, 1fr);
    gap: 8px;
    align-items: baseline;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--panel2);
}
.pw-audit-time { font-size: 11px; color: var(--text4); font-variant-numeric: tabular-nums; }
.pw-audit-main { font-size: 12px; color: var(--text2); min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.llm-check { display: flex; gap: 7px; align-items: center; font-size: 12px; color: var(--text2); }
.llm-assign-grid { display: grid; grid-template-columns: 150px 1fr; gap: 6px 10px; align-items: center; font-size: 12.5px; color: var(--text2); }

/* ---------- Dialog „KI-Verlauf" (Ticket-KI-Konzept §8.4) ---------- */
.lh-filter {
    display: grid;
    grid-template-columns: 62px 1fr 62px 1fr;
    gap: 6px 8px;
    align-items: center;
    font-size: 12px;
    color: var(--text2);
}
.lh-filter > label { font-size: 11.5px; color: var(--text3); }
.lh-filter .text-input { min-width: 0; }
.lh-bar { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.lh-count { font-size: 11.5px; color: var(--text4); margin: 8px 0 4px; }

.lh-row {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel2);
    margin-bottom: 5px;
    overflow: hidden;
}
.lh-row.error { border-color: var(--danger-border); }
.lh-row-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 2px;
    cursor: pointer;
    user-select: none;
    font-size: 12px;
    color: var(--text2);
}
.lh-row-head:hover { background: var(--hover); }
.lh-chev { color: var(--text4); width: 11px; }
.lh-time { font-size: 11px; color: var(--text3); }
.lh-endpoint { font-size: 11.5px; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lh-dim { color: var(--text4); }
.lh-err { color: var(--danger); font-size: 11px; }
.lh-row-sub {
    padding: 0 10px 7px 29px;
    font-size: 11px;
    color: var(--text3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lh-detail { border-top: 1px solid var(--border-soft); padding: 8px 11px 11px; }
.lh-detail-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 11px; }
.lh-label { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text4); margin: 9px 0 3px; }
.lh-meta { font-size: 11px; color: var(--text3); }
.lh-tool { margin-bottom: 3px; }
.lh-tool-head { display: flex; gap: 7px; align-items: baseline; cursor: pointer; font-size: 11.5px; color: var(--text2); }
.lh-tool-head:hover { background: var(--hover); }
.lh-tool-head .lh-dim { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lh-msg { border-left: 2px solid var(--border-strong); padding-left: 9px; margin: 6px 0 9px; }
.lh-msg-role { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--text3); margin-bottom: 3px; }
/* Der Draht wird ungekürzt aufgezeichnet — im Dialog bekommt jeder Block sein eigenes Fenster,
   damit ein 40-KB-Systemprompt die Liste nicht unbedienbar macht. */
.lh-detail .tkw-tool-pre { max-height: 320px; }
.lh-img { display: block; max-width: 100%; margin: 4px 0; border-radius: 6px; }

/* ---------- Tool-Karten + Plan-Flyout (Ticket-KI-Konzept §9.4/§9.5, ab M3) ---------- */
.tkw-tool {
    max-width: 78%;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--panel2);
    overflow: hidden;
}
.tkw-tool.error { border-color: var(--danger-border); }
.tkw-tool-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    cursor: pointer;
    user-select: none;
    font-size: 12px;
    color: var(--text2);
}
.tkw-tool-head:hover { background: var(--hover); }
.tkw-tool-chev { color: var(--text4); width: 12px; }
.tkw-tool-time { margin-left: auto; font-size: 10.5px; color: var(--text5); font-family: var(--font-mono); }
.tkw-tool-body { border-top: 1px solid var(--border-soft); padding: 8px 11px 10px; }
.tkw-tool-label { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text4); margin: 6px 0 3px; }
.tkw-tool-pre {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.5;
    color: var(--text2);
    background: var(--field);
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    padding: 7px 9px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 220px;
    overflow-y: auto;
}

.tkw-bar { position: relative; }
.tkw-bar-btn {
    font: inherit;
    font-size: 12px;
    color: var(--text2);
    background: none;
    border: 1px solid transparent;
    padding: 4px 9px;
    border-radius: 7px;
    cursor: pointer;
    white-space: nowrap;
}
.tkw-bar-btn:hover { background: var(--hover); }
.tkw-bar-btn.open { background: var(--panel); border-color: var(--border); }

.tkw-flyout {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 12px;
    width: 460px;
    max-width: calc(100% - 24px);
    background: var(--panel);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .45);
    padding: 12px 14px;
    z-index: 6;
}
/* Rechtsbündige Variante (Verbindungen-Flyout sitzt über seinem Knopf am rechten Rand). */
.tkw-flyout.right { left: auto; right: 12px; width: 440px; }
.tkw-flyout-head { display: flex; align-items: baseline; gap: 10px; font-size: 12.5px; font-weight: 600; margin-bottom: 8px; }
.tkw-flyout-head .meta { font-weight: 400; font-size: 11px; color: var(--text4); margin-left: auto; }

.tkw-plan-step { display: flex; gap: 9px; align-items: center; padding: 5px 4px; border-radius: 6px; font-size: 12.5px; }
.tkw-plan-step:hover { background: var(--hover); }
.tkw-plan-step .st { width: 18px; text-align: center; flex: none; color: var(--text4); }
.tkw-plan-step .tx { flex: 1; color: var(--text2); }
.tkw-plan-step.done .tx { color: var(--text4); text-decoration: line-through; text-decoration-color: var(--border-strong); }
.tkw-plan-step.done .st { color: var(--ok); }
.tkw-plan-step.run .st { color: var(--accent, #4CC2A9); }
.tkw-plan-step.run .tx { color: var(--text); font-weight: 500; }
.tkw-plan-step.blocked .st { color: var(--danger); }
.tkw-plan-step.skipped .tx { color: var(--text5); }
.tkw-plan-step .acts { display: flex; gap: 4px; opacity: 0; }
.tkw-plan-step:hover .acts { opacity: 1; }
.btn.mini { font-size: 11px; padding: 3px 8px; }
.btn.quiet { border-color: transparent; background: none; color: var(--text3); }
.btn.quiet:hover { background: var(--hover); }

/* ---------- Freigabe- + Verbindungs-Karten, Autonomie (Ticket-KI-Konzept §7, ab M4) ---------- */
.tkw-approval {
    max-width: 82%;
    align-self: center;
    width: 82%;
    border: 1px solid var(--warn-border);
    background: var(--warn-soft);
    border-radius: 10px;
    padding: 10px 13px;
}
.tkw-approval.decided { border-color: var(--border); background: var(--panel2); }

/* Angebots-Karte der Erstanalyse (§6.2, Opt-in): eine neutrale Entscheidung, keine Warnung —
   deshalb Panel-Farben statt der Freigabe-Gelbtöne, aber dieselbe Karten-Anatomie. */
.tkw-offer { border-color: var(--border); background: var(--panel2); }

/* Verknüpfen-Spalte des freien Chats (§6.7): Trefferliste der Ticketsuche. */
.tkw-link-results { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.tkw-link-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel2);
}
.tkw-link-name { flex: 1; min-width: 0; }
.tkw-link-name .n { font-size: 12.5px; font-weight: 600; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tkw-link-name .s { font-size: 11.5px; color: var(--text4); }
.tkw-approval-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; font-weight: 600; color: var(--text2); margin-bottom: 7px; }
.tkw-approval .kv { font-size: 12px; color: var(--text3); margin-bottom: 4px; }
.tkw-approval-actions { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; }
.tkw-approval-note { margin-top: 8px; font-size: 12px; }
.tkw-approval-note.ok { color: var(--ok); }
.tkw-approval-note.bad { color: var(--danger); }
/* „Der Qualifizierer hat nicht geantwortet" — muss sich von seiner Begründung (.kv, still)
   deutlich abheben: Hier steht nicht, WAS er geurteilt hat, sondern DASS er nichts geurteilt hat. */
/* Musterregeln (Ticket-KI §7.2): der Editor auf der Karte und die Liste im Flyout. Das Muster
   steht bewusst in einem Eingabefeld und nicht bloss als Text — es soll sich enger ziehen lassen,
   bevor es Regel wird. */
.tkw-rule-edit {
    margin: 4px 0 6px;
    padding: 8px 10px;
    border: 1px solid var(--border-strong);
    border-radius: 7px;
    background: var(--panel2, transparent);
}

.tkw-rule-label { font-size: 11px; color: var(--text3); margin-bottom: 4px; }
.tkw-rule-row { display: flex; gap: 8px; align-items: center; font-size: 12px; margin: 3px 0; }
.tkw-rule-row.listed { padding: 3px 0; }
.tkw-rule-row .tx { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.tkw-rule-input { flex: 1; font-size: 12px; padding: 3px 6px; }
.tkw-rule-hint { font-size: 11px; color: var(--text3); margin-top: 4px; }

/* Die Sperrliste in den Einstellungen: lesbar, nicht bedienbar — sie ist fest im Programm. */
.set-denylist {
    font-size: 11.5px;
    color: var(--text2);
    line-height: 1.7;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 7px;
}

/* Abnahme des Plans (Ticket-KI §7.2). Drei Zustaende, drei Farben: nicht freigegeben (neutral),
   freigegeben (ruhig), von der KI ueberholt (Warnung — die Deckung ist weg). */
.tkw-plan-approve {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    margin: 4px 0 6px;
    padding: 5px 9px;
    font-size: 11.5px;
    color: var(--text3);
    border: 1px dashed var(--border-strong);
    border-radius: 6px;
}

.tkw-plan-approve.ok { color: var(--text2); border-style: solid; }

.tkw-plan-approve.stale {
    color: var(--warn);
    border-style: solid;
    border-color: var(--warn);
    background: color-mix(in srgb, var(--warn) 8%, transparent);
}

/* Die Deckungszeile der Freigabe-Karte (Ticket-KI §7.2). Sie beantwortet die Frage, wegen der man
   die Karte aufschlaegt: Laesst sich das auf den Auftrag zurueckfuehren? Gedeckt ist leise,
   ungedeckt faellt auf. */
.tkw-approval-cover {
    margin: 2px 0 6px;
    padding: 5px 9px;
    font-size: 12px;
    color: var(--text2);
    border-left: 2px solid var(--border-strong);
}

.tkw-approval-cover.open {
    color: var(--warn);
    border-left-color: var(--warn);
    background: color-mix(in srgb, var(--warn) 8%, transparent);
}

/* Treffer der Sperrliste (Ticket-KI §7.2 Stufe 2). Kräftiger als der Qualifizierer-Warnblock:
   Der sagt „hier wurde nicht eingestuft", dieser sagt „das läuft nie ungefragt". */
.tkw-approval-deny {
    margin: 2px 0 6px;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--bad, var(--warn));
    border: 1px solid var(--bad, var(--warn));
    border-radius: 7px;
    background: color-mix(in srgb, var(--bad, var(--warn)) 12%, transparent);
}

.tkw-approval-deny .why { display: block; font-weight: 400; opacity: .85; margin-top: 2px; }

.tkw-approval-warn {
    margin: 2px 0 4px;
    padding: 6px 9px;
    font-size: 12px;
    color: var(--warn);
    border: 1px solid var(--warn);
    border-radius: 7px;
    background: color-mix(in srgb, var(--warn) 10%, transparent);
}

/* Der Auftragsstand der Sitzung (Ticket-KI §7.2). Er sitzt ueber dem Gespraech und ist im
   Ruhezustand eine Zeile — sichtbar genug, um widersprochen zu werden, leise genug, um nicht mit
   den Freigabe-Karten um Aufmerksamkeit zu ringen. */
.mandat {
    margin: 0 0 6px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--panel2, transparent);
    font-size: 12px;
}

.mandat-head {
    display: flex;
    gap: 8px;
    align-items: baseline;
    padding: 6px 10px;
    cursor: pointer;
    color: var(--text2);
}

.mandat-chev { color: var(--text3); }

.mandat-tag {
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 1px 5px;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    color: var(--text3);
    flex: none;
}

.mandat-kurz { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mandat-bad { color: var(--warn); flex: none; }
.mandat-body { padding: 2px 10px 10px; border-top: 1px solid var(--border); }

.mandat-label {
    margin: 8px 0 3px;
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text3);
}

/* Der Anker ist woertlich und unveraenderlich — das soll man ihm ansehen. */
.mandat-anker {
    padding: 5px 8px;
    border-left: 2px solid var(--border-strong);
    color: var(--text);
}

.mandat-lage { padding: 3px 0; color: var(--text2); }
.mandat-edit { width: 100%; font: inherit; padding: 6px 8px; }
.mandat-actions { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.mandat-dim { color: var(--text3); font-size: 11px; }
.mandat-note { color: var(--text3); margin: 6px 0; }
.mandat-note.bad { color: var(--warn); }

/* Debug-Block am Werkzeugaufruf (Ticket-KI §7.2). Bewusst leise: Er steht an JEDER Werkzeugzeile,
   sobald der Modus an ist — als Rahmen im Panel-Ton, nicht in der Warnfarbe, die den Freigaben
   gehört. Zu sehen ist im Normalfall nur die Kopfzeile; der Inhalt kommt beim Aufklappen. */
.qdbg {
    margin: 4px 0 2px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--panel2, transparent);
    font-size: 11.5px;
}

.qdbg-head {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    padding: 5px 9px;
    cursor: pointer;
    color: var(--text2);
}

.qdbg-tag {
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 1px 5px;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    color: var(--text3);
}

.qdbg-dim { color: var(--text3); }
.qdbg-bad { color: var(--warn); }
.qdbg-body { padding: 4px 9px 9px; border-top: 1px solid var(--border); }
.qdbg-line { margin: 4px 0; color: var(--text2); }
.qdbg-label { color: var(--text3); margin-right: 4px; }
.qdbg-note { margin: 6px 0; color: var(--text3); }

.qdbg-part {
    margin: 9px 0 3px;
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text3);
}

/* Ausgefallener Qualifizierer (Ticket-KI §7.2): ein Band am Kopf der Sitzung, keine Karte je
   Aufruf. Es ist ein Zustand der Sitzung, kein Ereignis — deshalb bleibt es stehen, bis der
   Qualifizierer wieder antwortet. */
.tkw-qualifier-down {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 6px;
    padding: 7px 10px;
    font-size: 12px;
    color: var(--warn);
    border: 1px solid var(--warn);
    border-radius: 7px;
    background: color-mix(in srgb, var(--warn) 10%, transparent);
}

.tkw-qualifier-down .why { display: block; opacity: .85; }

.tkw-bar.attention { box-shadow: inset 0 2px 0 var(--warn); }
.tkw-bar-btn.attention { color: var(--warn); }

/* Hintergrundaufgaben (Ticket-KI §9.7): Eine offene Verabredung ist kein Alarm, aber sie muss
   auffallen — deshalb die Info-Farbe statt des Warn-Gelbs, das den Freigaben gehört. */
.tkw-bar-btn.timed { color: var(--info); }

/* Karte der Hintergrundaufgabe: Anatomie der Freigabe-Karte, aber neutrale Panel-Farben wie das
   Erstanalyse-Angebot — hier wird nichts entschieden, hier wird etwas verabredet. */
.tkw-bg { border-color: var(--border); background: var(--panel2); }

.tkw-autonomy {
    font: inherit;
    font-size: 12px;
    color: var(--text2);
    background: var(--field);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    padding: 2px 6px;
    margin-left: 4px;
}

.tkw-conn-row { display: flex; align-items: center; gap: 9px; padding: 6px 4px; font-size: 12.5px; }
.tkw-conn-row .nm { font-weight: 500; color: var(--text2); width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tkw-conn-row .why { flex: 1; color: var(--text4); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-pill.st-offen { color: var(--warn); background: var(--warn-soft); border-color: var(--warn-border); }

/* Qualifizierer-Tags auf der Freigabe-Karte (Ticket-KI-Konzept §7.2, ab M5) */
.tkw-approval-tags { display: inline-flex; gap: 5px; flex: none; }

/* Sub-Agent-Karten (Ticket-KI-Konzept §6.5/§9.4, ab M6) */
.tkw-tool.subagent .tkw-tool-head { font-weight: 600; }
.tkw-tool .routing { font-size: 11px; color: var(--text4); margin-bottom: 8px; }
.tkw-tool .sub-step { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--text3); padding: 2px 0; }
.tkw-tool .sub-step .ok { color: var(--ok); }
.tkw-tool .sub-step .err { color: var(--danger); }
.tkw-tool .sub-step .dim { color: var(--text4); }
.tkw-tool .sub-text { font-size: 12px; color: var(--text2); line-height: 1.5; margin: 4px 0; white-space: pre-wrap; }

/* Wissensrecherche-Karten (Ticket-KI-Konzept §13.5) */
.tkw-tool.knowledge .tkw-tool-head { font-weight: 600; }
.kn-find { display: flex; align-items: center; gap: 8px; padding: 4px 11px; font-size: 12.5px; }
.kn-find + .kn-find { border-top: 1px solid var(--border-soft); }
.kn-num {
    flex: none; font-family: var(--font-mono); font-size: 12px; color: var(--accent, #4CC2A9);
    background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline;
}
.kn-num:hover { color: var(--text1); }
.kn-title { flex: 1; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kn-meta { flex: none; color: var(--text4); font-size: 11px; }
.tk-pill.kn-hoch { color: var(--ok); background: var(--ok-soft); border-color: var(--ok-border); }
.tk-pill.kn-mittel { color: var(--warn); background: var(--warn-soft); border-color: var(--warn-border); }
.tk-pill.kn-gering { color: var(--text4); }
.kn-detail { font-size: 12px; color: var(--text3); line-height: 1.5; margin: 6px 0 10px; }
.kn-detail-head { font-weight: 600; color: var(--text2); margin-bottom: 2px; }
.kn-lbl { color: var(--text4); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; margin-right: 4px; }
.kn-note { font-size: 11.5px; color: var(--text4); margin-top: 6px; }

/* Fortsetzbare Sitzungen auf der Ticket-Übersicht (Ticket-KI-Konzept §9.2, ab M7) */

/* Gemeinsame Workspace-Tab-Leiste: Icon je Sitzungsart (Ticket-KI-Konzept §9.1, M8) */
.vnc-tab .wtab-ico { display: inline-flex; flex: none; color: var(--text4); margin-right: 1px; }
.vnc-tab .wtab-ico svg { width: 13px; height: 13px; }
.vnc-tab.active .wtab-ico { color: var(--text3); }

/* ============ Einstellungen-Dialog (Hub mit Kategorie-Navigation) ============ */
.settings-modal {
    width: 800px;
    max-width: 94vw;
    height: 82vh;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.settings-body { flex: 1; display: flex; min-height: 0; }

.settings-nav {
    flex: 0 0 196px;
    border-right: 1px solid var(--border);
    background: var(--panel2);
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.settings-nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    border-radius: 8px;
    border: none;
    background: none;
    color: var(--text2);
    font-family: var(--font-sans);
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    width: 100%;
}
.settings-nav-item:hover { background: var(--hover); }
.settings-nav-item.active { background: var(--hover2); color: var(--text); font-weight: 600; }
.settings-nav-ico { width: 18px; text-align: center; color: var(--text4); font-size: 14px; }
.settings-nav-item.active .settings-nav-ico { color: var(--accent, #4CC2A9); }

.settings-content { flex: 1; overflow-y: auto; padding: 20px 24px; min-width: 0; }

.set-section { display: flex; flex-direction: column; gap: 24px; }
.set-block { display: flex; flex-direction: column; gap: 8px; }
/* Klare, helle Sektionsüberschrift — der zuvor zu dunkle Kontrast (Ticket-KI-Feedback). */
.set-block-title { font-size: 13px; font-weight: 600; color: var(--text); letter-spacing: .01em; }
.set-block-hint { font-size: 11.5px; color: var(--text3); line-height: 1.55; margin-bottom: 2px; }
.set-empty {
    font-size: 12px;
    color: var(--text3);
    padding: 12px 14px;
    border: 1px dashed var(--border-strong);
    border-radius: 8px;
    background: var(--panel2);
}
.set-inline-msg { font-size: 12px; margin-top: 8px; color: var(--text2); }
.set-inline-msg.danger { color: var(--danger); }
.set-inline-msg.warn { color: var(--warn); }
.set-status {
    font-size: 12px;
    color: var(--text2);
    white-space: pre-wrap;
    background: var(--field);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    line-height: 1.55;
}
/* Formularblock beim Anlegen/Bearbeiten eines Endpunkts bzw. einer Passwortmanager-Instanz */
.set-section .pw-form { border: 1px solid var(--border-strong); border-radius: 8px; padding: 12px 14px; background: var(--panel2); margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.set-section .llm-form { border: 1px solid var(--border-strong); border-radius: 8px; padding: 12px 14px; background: var(--panel2); margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }

/* Ticket-Anlage-Dialog (Ticket-KI-Konzept §4.5) */
.nt-grid { display: grid; grid-template-columns: 92px 1fr; gap: 9px 12px; align-items: center; }
.nt-grid > label { font-size: 12px; color: var(--text2); }
.nt-article { border: 1px solid var(--border); border-radius: 8px; background: var(--panel2); padding: 9px 10px; margin-top: 8px; }
.nt-article-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.nt-article-text { width: 100%; min-height: 54px; resize: vertical; font-family: var(--font-sans); }

/* Live-Statuszeile im Chat (Ticket-KI §9.4): zeigt, was die KI gerade tut. */
.tkw-activity {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text3);
    padding: 6px 13px;
    background: var(--panel2);
    border: 1px solid var(--border);
    border-radius: 20px;
    margin: 6px 0;
}
.tkw-activity-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent, #4CC2A9);
    flex: none;
    animation: tkw-pulse 1.2s ease infinite;
}
@keyframes tkw-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.65); } }
@media (prefers-reduced-motion: reduce) { .tkw-activity-dot { animation: none; } }

/* System-Prompt-Editor (Ticket-KI §6.3) */
.set-prompt-area {
    width: 100%;
    min-height: 340px;
    resize: vertical;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.5;
    white-space: pre;
    overflow-wrap: normal;
    overflow-x: auto;
}

/* Gerenderte KI-Markdown-Ausgabe im Chat (Markdig, Ticket-KI §9.4) */
.tkw-msg-body.md { white-space: normal; }
.tkw-msg-body.md > *:first-child { margin-top: 0; }
.tkw-msg-body.md > *:last-child { margin-bottom: 0; }
.tkw-msg-body.md p { margin: 6px 0; }
.tkw-msg-body.md ul, .tkw-msg-body.md ol { margin: 6px 0; padding-left: 20px; }
.tkw-msg-body.md li { margin: 2px 0; }
.tkw-msg-body.md li > p { margin: 2px 0; }
.tkw-msg-body.md h1, .tkw-msg-body.md h2, .tkw-msg-body.md h3,
.tkw-msg-body.md h4, .tkw-msg-body.md h5, .tkw-msg-body.md h6 {
    font-size: 13.5px; font-weight: 600; color: var(--text); margin: 12px 0 5px; line-height: 1.3;
}
.tkw-msg-body.md strong { font-weight: 600; color: var(--text); }
.tkw-msg-body.md code {
    font-family: var(--font-mono); font-size: 11.5px;
    background: var(--field); border: 1px solid var(--border-soft); border-radius: 4px; padding: 1px 5px;
}
.tkw-msg-body.md pre {
    background: var(--field); border: 1px solid var(--border-soft); border-radius: 6px;
    padding: 9px 11px; overflow-x: auto; margin: 7px 0;
}
.tkw-msg-body.md pre code { background: none; border: none; padding: 0; font-size: 11.5px; }
.tkw-msg-body.md table {
    border-collapse: collapse; margin: 8px 0; font-size: 12px; display: block; overflow-x: auto; max-width: 100%;
}
.tkw-msg-body.md th, .tkw-msg-body.md td { border: 1px solid var(--border-strong); padding: 5px 9px; text-align: left; }
.tkw-msg-body.md th { background: var(--panel2); font-weight: 600; color: var(--text); }
.tkw-msg-body.md blockquote {
    border-left: 3px solid var(--border-strong); margin: 7px 0; padding: 2px 0 2px 11px; color: var(--text3);
}
.tkw-msg-body.md a { color: var(--accent, #4CC2A9); text-decoration: underline; }
.tkw-msg-body.md hr { border: none; border-top: 1px solid var(--border); margin: 10px 0; }

/* Rückfrage-Karte der KI (Ticket-KI §7.6). Bewusst NICHT die gelbe Freigabe-Karte: Die KI fragt
   hier nach, sie warnt nicht. Teilten sich beide das Gelb, nutzte sich das Signal der echten
   Schranken an den harmlosen Fragen ab. */
.tkw-question {
    align-self: center;
    width: 82%;
    max-width: 82%;
    border: 1px solid color-mix(in srgb, var(--accent, #4CC2A9) 28%, transparent);
    background: var(--panel2);
    border-radius: 14px;
    padding: 14px 16px;
    /* Bewusst OHNE Einblend-Animation: Der Chat gleicht seine Liste ohne @key positionsweise ab —
       beim Einfügen oben entsteht unten ein NEUER Knoten, und eine alte Karte blendete dann bei
       jeder neuen Zeile erneut auf. Im Bildschirmfoto sah das aus wie eine halb geladene Karte. */
}

.tkw-question-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.tkw-question-ico {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--accent, #4CC2A9) 14%, transparent);
    color: var(--accent, #4CC2A9);
    font-size: 13px;
    font-weight: 600;
}
.tkw-question-label { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text4); }
.tkw-question-text { font-size: 14px; line-height: 1.5; color: var(--text); }
.tkw-question-hint { font-size: 12.5px; color: var(--text3); margin-top: 4px; }

/* Antwortmöglichkeiten: ganze Zeilen statt Mini-Chips — Klickfläche auch auf dem iPad, und die
   Wahl trägt die Akzentfarbe, nicht mehr das Rot der Gefahr. */
.tkw-question-options { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.tkw-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: transparent;
    color: var(--text2);
    font-family: var(--font-sans);
    font-size: 13px;
    cursor: pointer;
}
.tkw-option:hover { border-color: var(--text4); color: var(--text); }
.tkw-option.on {
    border-color: color-mix(in srgb, var(--accent, #4CC2A9) 55%, transparent);
    background: color-mix(in srgb, var(--accent, #4CC2A9) 10%, transparent);
    color: var(--text);
}
.tkw-option-mark { flex: none; width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--text5); position: relative; }
.tkw-option.multi .tkw-option-mark { border-radius: 4px; }
.tkw-option.on .tkw-option-mark { border-color: var(--accent, #4CC2A9); background: var(--accent, #4CC2A9); }
.tkw-option.on .tkw-option-mark::after {
    content: "";
    position: absolute;
    left: 4.5px;
    top: 1.5px;
    width: 4px;
    height: 8px;
    border: solid var(--accent-fg);
    border-width: 0 1.6px 1.6px 0;
    transform: rotate(43deg);
}
.tkw-option-text { flex: 1; min-width: 0; }
.tkw-question-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; }

/* Freitext: Feld und Senden in einem Rahmen wie der Chat-Composer darunter. */
.tkw-question-composer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 5px 5px 5px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: var(--field);
}
.tkw-question-composer:focus-within { border-color: color-mix(in srgb, var(--accent, #4CC2A9) 55%, transparent); }
.tkw-question-input {
    flex: 1;
    min-width: 0;
    padding: 4px 0;
    border: none;
    background: none;
    outline: none;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 13px;
}
.tkw-question-send {
    flex: none;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 7px;
    background: var(--accent, #4CC2A9);
    color: var(--accent-fg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.tkw-question-send:hover { filter: brightness(1.1); }
.tkw-question-send svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Beantwortet: Die Karte beruhigt sich zur Zeile — die Frage bleibt lesbar, die Antwort steht
   rechts. Vorher blieb nur ein grüner Haken ohne Bezug zur Frage stehen. */
.tkw-question.answered { border-color: var(--border); background: var(--panel); padding: 11px 14px; }
.tkw-question-done { display: flex; align-items: center; gap: 10px; font-size: 12.5px; min-width: 0; }
.tkw-question-done-ico { flex: none; color: var(--ok); }
.tkw-question-done.bad .tkw-question-done-ico { color: var(--danger); }
.tkw-question-done-q { color: var(--text4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tkw-question-done-a {
    margin-left: auto;
    flex: none;
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 3px 10px;
    border-radius: 99px;
    background: var(--hover);
    color: var(--text2);
}
.tkw-question-done.bad .tkw-question-done-a { background: var(--danger-soft); color: var(--danger); }

/* =============================================================================
   Schmale Ansichten — Smartphone hochkant, iPad hochkant, schmale Fenster
   (Hub-Konzept §1.1: die PWA läuft auch auf Mobilgeräten). Maßgeblich ist die
   Breite, nicht das Gerät: Ein schmales Desktop-Fenster verhält sich gleich.
   Grundsätze: Die Sidebar wird zum Einschub (Burger in der Titelleiste), der
   Ticket-Arbeitsbereich einspaltig (Ticket-Referenz schiebt sich über den
   Chat), Listen stapeln ihre Zellen, und die Safe-Areas (Kerbe/Home-Balken
   der PWA, viewport-fit=cover) polstern Titelleiste und Fußleisten.
   ========================================================================== */
@media (max-width: 768px) {
    /* Höhe folgt dem sichtbaren Ausschnitt — einklappende Browserleisten und die
       Bildschirmtastatur ändern 100dvh live, 100 % bliebe dahinter zurück. */
    html, body, #app, .app-shell { height: 100dvh; }

    /* ---- Titelleiste: kompakt, Symbole statt Beschriftung, Safe-Area oben ---- */
    .titlebar {
        height: calc(38px + env(safe-area-inset-top));
        padding: env(safe-area-inset-top) 10px 0;
        gap: 8px;
    }
    .titlebar .app-sub { display: none; }
    .titlebar .app-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .titlebar .status-pill { padding: 3px 6px; }
    /* Pillen schrumpfen auf ihren Statuspunkt — Farbe trägt die Information. */
    .titlebar .status-pill span:not(.dot) { display: none; }
    .theme-toggle .tt-label { display: none; }
    .nav-burger { display: flex; }

    /* ---- Sidebar als Einschub über dem Inhalt ---- */
    .sidebar {
        position: fixed;
        top: calc(38px + env(safe-area-inset-top));
        bottom: 0;
        left: 0;
        z-index: 30;
        width: min(300px, 84vw);
        border-right: 1px solid var(--border-strong);
        box-shadow: 14px 0 40px rgba(0, 0, 0, .35);
        transform: translateX(-105%);
        transition: transform .22s ease;
        padding-bottom: env(safe-area-inset-bottom);
    }
    .sidebar.open { transform: none; }
    .sidebar-scrim { display: block; }

    /* ---- Ansichten: engere Ränder, umbruchfähige Kopfzeilen ---- */
    .view-head { flex-wrap: wrap; gap: 8px 10px; padding: 12px 14px 10px; }
    .view-head .search-input { max-width: 100%; }
    .view-head .search-input.grow { flex: 1 1 100%; width: auto; }
    .view-scroll { padding: 0 14px 18px; }
    .empty-box { padding: 28px 16px; }

    /* iOS zoomt in Eingabefelder mit Schrift unter 16 px hinein — deshalb hier 16 px. */
    .text-input, .search-input, .select-input { font-size: 16px; }

    /* ---- Dialoge: volle Breite, Höhe am sichtbaren Ausschnitt ---- */
    .modal, .modal.wide { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); }
    .settings-modal { width: calc(100vw - 20px); height: calc(100dvh - 20px); max-height: none; }
    /* Kategorie-Navigation des Einstellungen-Dialogs wandert als Zeile nach oben. */
    .settings-body { flex-direction: column; }
    .settings-nav {
        flex: none;
        flex-direction: row;
        overflow-x: auto;
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding: 8px 10px;
    }
    .settings-nav-item { width: auto; white-space: nowrap; }
    .settings-content { padding: 16px 14px; }

    /* ---- Zielcomputer-Liste: Nebenspalten weichen, die Aktionsleiste bricht um ---- */
    .t-head.targets-grid, .t-row.targets-grid { grid-template-columns: 22px 22px 20px minmax(0, 1fr) auto auto; }
    .t-head.targets-grid > :nth-child(5), .t-row.targets-grid > :nth-child(5),
    .t-head.targets-grid > :nth-child(6), .t-row.targets-grid > :nth-child(6) { display: none; }
    .action-bar { margin-inline: 14px; flex-wrap: wrap; }
    .cell-actions { flex-wrap: wrap; }
    /* Der Asset-Dialog nimmt die Breite, die das Gerät hergibt — 760 px hat hier niemand. */
    .modal.xl { width: min(760px, 94vw); }
    .kv-grid { grid-template-columns: 1fr; }

    /* ---- Verbindungs-Karten einspaltig ---- */
    .conn-grid { grid-template-columns: 1fr; }

    /* ---- Ticket-Übersicht: Zeilen stapeln sich zu Karten ---- */
    .t-head.tickets-grid { display: none; }
    .t-row.tickets-grid {
        grid-template-columns: auto minmax(0, 1fr) auto auto;
        grid-template-areas:
            "titel  titel titel titel"
            "nr     kunde zeit  aktion"
            "status prio  .     aktion";
        gap: 4px 10px;
        padding-inline: 14px;
    }
    .t-row.tickets-grid > :nth-child(1) { grid-area: nr; }
    .t-row.tickets-grid > :nth-child(2) { grid-area: titel; white-space: normal; }
    .t-row.tickets-grid > :nth-child(3) { grid-area: kunde; }
    .t-row.tickets-grid > :nth-child(4) { grid-area: status; }
    .t-row.tickets-grid > :nth-child(5) { grid-area: prio; }
    .t-row.tickets-grid > :nth-child(6) { grid-area: zeit; text-align: right; }
    .t-row.tickets-grid > :nth-child(7) { grid-area: aktion; align-self: center; }

    /* ---- Workspace-Tab-Leiste: schmalere Tabs, mehr passt nebeneinander ---- */
    .vnc-tabbar { padding: 6px 6px 0; }
    .vnc-tab { max-width: 150px; padding-left: 9px; }

    /* ---- Ticket-Arbeitsbereich: einspaltig, Ticket-Referenz als Schub von rechts ---- */
    .tkw-mobile-switch { display: flex; }
    .tkw-chat { border-right: none; }
    .tkw-ticket {
        position: absolute;
        inset: 0;
        width: auto;
        flex: none;
        z-index: 5;
        transform: translateX(102%);
        transition: transform .22s ease;
        box-shadow: -14px 0 40px rgba(0, 0, 0, .35);
    }
    .tkw-ticket.mobile-open { transform: none; }

    /* Chat: Blasen und Karten nutzen die volle Breite, engere Ränder. */
    .tkw-chatlog { padding: 12px; gap: 12px; }
    .tkw-msg { max-width: 94%; }
    .tkw-tool { max-width: 100%; }
    .tkw-approval { width: 100%; max-width: 100%; }
    .tkw-question { width: 100%; max-width: 100%; }
    .tkw-approval-head { flex-wrap: wrap; }
    .tkw-conn-row { flex-wrap: wrap; }
    .tkw-msg-body .tkw-attach-img { max-width: 100%; }
    .tkw-tool-img { max-width: calc(100% - 20px); }
    .tkw-composer-block { padding: 8px 10px 10px; }
    .tkw-composer { gap: 8px; }

    /* Fußleiste: seitlich rollbar statt gequetscht; Safe-Area unten (Home-Balken). */
    .tkw-bar {
        gap: 10px;
        padding: 6px 10px calc(6px + env(safe-area-inset-bottom));
        overflow-x: auto;
    }
    .tkw-bar-seg.dim { display: none; }

    /* Flyouts (Plan, Verbindungen) lösen sich von der rollbaren Fußleiste und liegen als
       Bodenblatt über dem Chat — position:fixed entkommt deren overflow. */
    .tkw-flyout, .tkw-flyout.right {
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: calc(52px + env(safe-area-inset-bottom));
        width: auto;
        max-width: none;
        max-height: 55dvh;
        overflow-y: auto;
        z-index: 24;
    }
    /* Plan-Schritte: Aktionen ohne Mauszeiger immer zeigen (hover trägt auf Touch nicht). */
    .tkw-plan-step .acts { opacity: 1; }
}

/* Die Einschub-Übergänge respektieren die Systemeinstellung „Bewegung reduzieren". */
@media (prefers-reduced-motion: reduce) {
    .sidebar, .tkw-ticket { transition: none; }
}

/* ---- Terminal-Sitzung (Konzept §29) -------------------------------------------------------- */
/* Bewusst immer dunkel, auch im hellen Theme — wie die Konsolenansicht der Aktivitätsseite
   (§21.3). Ein Terminal, das seine Farben mit dem Theme wechselt, macht ANSI-Ausgaben je nach
   Einstellung unlesbar; die Farben kommen hier vom Programm, nicht von uns. */
/* Das Terminal ist als Tab ein .vnc-panel und erbt dessen „nichts markierbar" — das gilt für einen
   Bildschirm, nicht für Text: Ausgabe muss sich markieren und kopieren lassen. */
.terminal-panel, .terminal-panel .xterm { user-select: text; -webkit-user-select: text; }

.terminal-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
    border: 1px solid var(--rand, #2a2f37);
    border-radius: 8px;
    overflow: hidden;
    background: #0d1117;
}

.terminal-leiste {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem .6rem;
    background: #161b22;
    border-bottom: 1px solid #2a2f37;
    color: #c9d1d9;
    font-size: .85rem;
}

.terminal-titel { font-weight: 600; }
.terminal-meta { color: #8b949e; font-family: ui-monospace, Menlo, Consolas, monospace; }
.terminal-luecke { flex: 1; }

.terminal-badge {
    padding: .1rem .45rem;
    border-radius: 999px;
    font-size: .75rem;
    border: 1px solid currentColor;
}
.terminal-badge.ok { color: #3fb950; }
.terminal-badge.fehler { color: #f85149; }

.terminal-fehler {
    padding: .5rem .6rem;
    background: #3d1d1d;
    color: #ffb4ab;
    border-bottom: 1px solid #5c2b2b;
}

/* Die Fläche muss eine echte Höhe haben: xterm.js misst sie beim Fit, und ein Element ohne Höhe
   ergibt null Zeilen — das Terminal bliebe leer, ohne dass irgendwo ein Fehler auftaucht. */
.terminal-flaeche {
    flex: 1;
    min-height: 24rem;
    padding: .35rem;
}

/* Die frühere Auswahlliste laufender Sitzungen ist mit dem Tab-Umbau (§29) entfallen: Laufende
   Terminals stehen jetzt als Tabs in der SessionTabBar, wie Bild und RDP. */

/* ---- Vorgangsansicht und KI-Sitzungen (Ticket-KI §14.2/§14.6) ------------------------------
   Bis 2026-08-20 war die Ticket-Detailansicht der KI-Chat mit einer schmalen Ticket-Spalte
   daneben. Seitdem sind es zwei Orte: Der Vorgang bekommt die ganze Fläche (der Verlauf ist
   Hauptinhalt, nicht Randnotiz), die Sitzung behält ihren Arbeitsbereich. */
.tkv-panel[hidden] { display: none; }
.tkv-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; background: var(--panel); }

.tkv-head { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px 10px; border-bottom: 1px solid var(--border-soft); }
.tkv-h-main { min-width: 0; flex: 1; }
.tkv-h-num { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; color: var(--text3); text-transform: uppercase; }
.tkv-h-title { font-size: 16px; font-weight: 600; margin: 2px 0 6px; overflow-wrap: anywhere; }
.tkv-h-actions { display: flex; align-items: center; gap: 6px; flex: none; }

.tkv-tabs { display: flex; align-items: center; gap: 2px; padding: 0 18px; border-bottom: 1px solid var(--border-soft); }
.tkv-body { flex: 1; overflow-y: auto; padding: 14px 18px 18px; }

/* Der Vorgangsverlauf in Chat-Optik (Ticket-KI §14.2, Bauform nach dem UX-Entwurf 2026-08-20).

   Die Farben kommen AUSSCHLIESSLICH aus den vorhandenen Variablen — kein neuer Farbton. Der
   Entwurf nutzt Violett für die KI und Orange für die Kundenantwort; beides gibt es in diesem
   System nicht, und ein Ton, den nur eine Ansicht kennt, fällt beim nächsten Themenwechsel
   durch. Die Zuordnung folgt stattdessen der Frage, die man einer Zeile ansehen muss:

     herein  → --info   (blau)     eine Meldung des Kunden
     hinaus  → --warn   (bernstein) etwas, das beim Kunden ankommt
     intern  → neutral              bleibt im Haus
     KI      → --accent (türkis)    das Produkt handelt (dieselbe Farbe wie die KI-Sitzungen) */
.tkv-thread { display: flex; flex-direction: column; gap: 16px; max-width: 900px; }

/* Datumstrenner: eine Linie mit dem Tag darin, damit „08:12" eine Einordnung bekommt. */
.tkv-day { display: flex; align-items: center; gap: 10px; margin: 4px 0 -4px; }
.tkv-day::before, .tkv-day::after { content: ""; flex: 1; height: 1px; background: var(--border-soft); }
.tkv-day span {
    font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--text4); white-space: nowrap;
}

.tkv-msg { display: flex; gap: 10px; align-items: flex-start; }
/* Eingerückt, was von uns kommt — die Richtung ist damit schon an der Kante ablesbar, bevor man
   einen Chip liest. */
.tkv-msg.outbound, .tkv-msg.internal { padding-left: 34px; }

.tkv-m-avatar {
    flex: none; width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
    background: var(--panel2); color: var(--text3);
    border: 1px solid var(--border-strong);
}
.tkv-msg.inbound .tkv-m-avatar { border-color: var(--info); color: var(--info); }
.tkv-msg.outbound .tkv-m-avatar { border-color: var(--warn-border); color: var(--warn); }

.tkv-m-block {
    flex: 1; min-width: 0;
    border: 1px solid var(--border-soft); border-left: 3px solid var(--border-strong);
    border-radius: 8px; padding: 8px 12px 10px; background: var(--panel2);
}
.tkv-msg.inbound .tkv-m-block { border-left-color: var(--info); }
.tkv-msg.outbound .tkv-m-block { border-left-color: var(--warn); background: var(--warn-soft); }
/* Die interne Notiz bleibt bewusst ohne Signalfarbe: Sie ist der Normalfall im Haus, und was
   immer leuchtet, leuchtet nirgends. */
.tkv-msg.internal .tkv-m-block { background: transparent; }

.tkv-m-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tkv-m-who { font-size: 12.5px; font-weight: 600; }
.tkv-m-org { font-size: 11px; color: var(--text3); }
.tkv-m-time { font-family: var(--mono); font-size: 11px; color: var(--text4); }

/* Richtungs-Chips: eigene Klassen, keine geborgten Status-Pillen. „in" kommt herein, „out" geht
   beim Kunden an, „int" bleibt im Haus — und was im Haus bleibt, braucht keine Signalfarbe. */
.tkv-chip {
    font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
    padding: 1px 6px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--text3);
}
.tkv-chip.in { border-color: var(--info); color: var(--info); }
.tkv-chip.out { border-color: var(--warn-border); color: var(--warn); background: var(--warn-soft); }
.tkv-m-body {
    margin: 4px 0 0; font-size: 12.5px; color: var(--text2); line-height: 1.55;
    white-space: pre-wrap; overflow-wrap: anywhere;
}
.tkv-m-attach { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 11px; color: var(--text3); }
.tkv-m-link {
    background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; color: var(--accent);
}
.tkv-m-link:hover { text-decoration: underline; }

/* Die Sitzungskarte (§14.6) — sie ersetzt den Markentext, nicht den Artikel: Sie steht an
   dessen Stelle im Verlauf, damit die zeitliche Einordnung erhalten bleibt. */
/* Die KI im Verlauf trägt die Akzentfarbe — dieselbe, unter der ihre Sitzungen im Hauptmenü
   stehen. Der Entwurf hatte dafür Violett; ein eigener Ton nur für diese Karte wäre ein
   Sonderweg, den kein anderes Stück des Systems mitgeht. */
.tkv-msg-ki .tkv-m-avatar.ki {
    border-color: var(--accent, #4CC2A9); color: var(--accent, #4CC2A9);
    font-size: 11px; letter-spacing: 0;
}
.tkv-session-card {
    flex: 1; min-width: 0; border: 1px solid var(--accent); border-left-width: 3px;
    border-radius: 8px; padding: 10px 12px;
    /* Wie die übrigen Akzentflächen im System gemischt (vgl. Zeile ~1887) — die Akzentfarbe ist
       je Profil einstellbar, ein fester Hex-Wert liefe ihr davon. */
    background: color-mix(in srgb, var(--accent, #4CC2A9) 10%, var(--panel));
}
/* Eine Sitzung, die hier nicht lebt (Kollege, geschlossener Reiter): gedämpft, weil die Karte
   dann den Stand aus dem Vorgang zeigt und nicht den von jetzt (§14.6). */
.tkv-session-card.stale {
    border-color: var(--border-strong); background: var(--panel2); opacity: .9;
}
.tkv-sc-head { display: flex; align-items: center; gap: 8px; }
.tkv-sc-title { font-size: 12.5px; font-weight: 600; }
.tkv-sc-meta { font-size: 11px; color: var(--text3); margin-top: 2px; }
/* Die offene Rückfrage: das einzige Stück der Karte, das jemanden zum Handeln auffordert. */
.tkv-sc-question {
    display: flex; flex-direction: column; gap: 2px; margin: 8px 0 0;
    padding: 7px 10px; border-radius: 6px;
    background: var(--warn-soft); border: 1px solid var(--warn-border);
}
.tkv-sc-q-label {
    font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--warn);
}
.tkv-sc-q-text { font-size: 12.5px; color: var(--text); overflow-wrap: anywhere; }

.tkv-sc-short { margin: 6px 0 0; font-size: 12.5px; color: var(--text2); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.tkv-sc-short.dim { color: var(--text3); font-style: italic; }
.tkv-sc-actions { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }

/* Die Prüfliste der laufenden Sitzung (§9.5 im Vorgang gelesen): Zeichen und Farbe sagen den
   Zustand, nicht ein zweites Label daneben. */
.tkv-sc-steps { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.tkv-sc-steps li { display: flex; gap: 8px; align-items: baseline; font-size: 12px; color: var(--text3); }
.tkv-sc-mark { flex: none; width: 12px; font-family: var(--mono); font-size: 11px; }
.tkv-sc-text { min-width: 0; overflow-wrap: anywhere; }
.tkv-sc-steps li.done { color: var(--text3); }
.tkv-sc-steps li.done .tkv-sc-mark { color: var(--ok); }
.tkv-sc-steps li.running { color: var(--text); }
.tkv-sc-steps li.running .tkv-sc-mark { color: var(--accent); }
.tkv-sc-steps li.skipped .tkv-sc-text { text-decoration: line-through; opacity: .7; }
.tkv-sc-more { font-size: 11px; color: var(--text4); padding-left: 20px; }
.tkv-sc-note { font-size: 11px; color: var(--text3); }
.tkv-sc-long { margin: 8px 0 0; padding: 8px 10px; background: var(--panel); border: 1px solid var(--border-soft); border-radius: 6px; font-family: var(--mono); font-size: 11.5px; white-space: pre-wrap; overflow-x: auto; }

/* Sitzungsübersicht */
.tkv-sec-title { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text3); margin: 14px 0 6px; }
.tkv-session-list { display: flex; flex-direction: column; gap: 6px; }
.tkv-session-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border-soft); border-radius: 8px; background: var(--panel2); }
.tkv-sr-name { flex: 1; min-width: 0; }
.tkv-sr-name .n { font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; }
.tkv-sr-name .s { font-size: 11px; color: var(--text3); }
.tkv-pick { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }

/* Kopfzeile des Vorgangsbezugs in der Sitzung (§14.8) */
.tkw-t-actions { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.tkw-t-sub { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text3); margin: 14px 0 6px; }

/* ==== Arbeitsvorrat und Vorgang (Hub-Konzept §10.1) ===================================
   Die Startseite sortiert nach der ARBEIT, nicht nach Objekten: links EINE Liste dessen, was
   einen Menschen braucht, in der Mitte der Vorgang mit seinen Reitern (Verlauf, Chat,
   KI-Sitzung, Fernwartung), rechts der Kunde als Kontext. Die Halter der Mitte sind dieselben
   wie in den Bereichen — deshalb liegt hier nur, was die drei Spalten brauchen. */

/* Die Zeile aus Leiste | Mitte | Kontext steht auf JEDER Seite (Halter-Stabilität, MainLayout);
   außerhalb des Arbeitsvorrats ist sie nur die Mitte. */
.work-row { flex: 1; display: flex; min-height: 0; min-width: 0; }
.work-center { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }

/* ---- Die Liste ---- */
.av {
    width: 320px;
    flex: none;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--panel);
    border-right: 1px solid var(--border);
}
.av-head { flex: none; display: flex; flex-direction: column; gap: 9px; padding: 14px 14px 10px; border-bottom: 1px solid var(--border-soft); }
.av-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.av-title svg { width: 16px; height: 16px; color: var(--text3); flex: none; }
.av-sub { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; font-weight: 400; color: var(--text4); white-space: nowrap; }
.av-filter { display: flex; align-items: center; gap: 5px; }
.av-filter .asset-chip { padding: 3px 10px; font-size: 10.5px; }
.av-reload { display: flex; padding: 3px; border-radius: 6px; }
.av-reload svg { width: 14px; height: 14px; }
.av-reload:disabled { opacity: .4; cursor: default; }
.av-search { width: 100%; font-size: 11px; padding: 6px 10px; }
.av-list { flex: 1; overflow-y: auto; min-height: 0; padding-bottom: 8px; }
.av-sec {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 14px 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text5);
}
.av-sec .n { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0; color: var(--text4); }
.av-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: transparent;
    color: var(--text);
    text-align: left;
    font-family: var(--font-sans);
    cursor: pointer;
}
.av-item:hover { background: var(--hover); }
.av-item.on { background: color-mix(in srgb, var(--accent, #4CC2A9) 9%, transparent); box-shadow: inset 2px 0 0 var(--accent, #4CC2A9); }
.av-ic {
    flex: none;
    width: 26px;
    height: 26px;
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    border: 1px solid var(--border-strong);
    color: var(--text3);
}
.av-ic svg { width: 13px; height: 13px; }
.av-ic.chat { color: var(--info); border-color: rgba(91, 141, 214, .45); }
.av-ic.ki { color: var(--accent, #4CC2A9); border-color: color-mix(in srgb, var(--accent, #4CC2A9) 45%, transparent); }
.av-ic.fw { color: var(--ok); border-color: var(--ok-border); }
.av-ic.warn { color: var(--warn); border-color: var(--warn-border); }
.av-b { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.av-t1 { font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.av-t2 { font-size: 11px; color: var(--text4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.av-m { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-family: var(--font-mono); font-size: 10px; color: var(--text5); }
/* Zähler, der zum Handeln auffordert: gefüllte Pille in der Akzentfarbe — in der Liste, an den
   Reitern und am Menüpunkt. */
.nb {
    min-width: 16px;
    height: 16px;
    padding: 0 5px;
    border-radius: 99px;
    background: var(--accent, #4CC2A9);
    color: var(--accent-fg);
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
}
.nav-count.live { color: var(--accent-fg); background: var(--accent, #4CC2A9); border-radius: 99px; padding: 1px 7px; font-weight: 600; }
/* Etikett am Menüpunkt („experimentell"): gedämpft warnend wie ein kind-tag, damit es auffällt,
   ohne mit dem Zähler zu konkurrieren. In der Symbolspalte fällt es mit der Beschriftung weg. */
.nav-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.nav-text .nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.nav-badge {
    flex: none;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .05em;
    text-transform: uppercase;
    line-height: 1.4;
    padding: 0 5px;
    border-radius: 4px;
    border: 1px solid var(--warn-border);
    background: var(--warn-soft);
    color: var(--warn);
}
.sidebar.rail .nav-text { display: none; }
.av-leer { margin: 12px 14px; padding: 28px 16px; }
.av-foot { flex: none; padding: 8px 14px; border-top: 1px solid var(--border-soft); font-family: var(--font-mono); font-size: 10px; color: var(--text5); min-height: 30px; }
.av-fehler { color: var(--warn); }

/* ---- Leerzustand der Mitte ---- */
.av-seite { align-items: center; justify-content: center; }
.av-willkommen { width: min(520px, 90%); }

/* ---- Der Vorgangskopf ---- */
.vk { flex: none; padding: 14px 20px 0; background: var(--panel); border-bottom: 1px solid var(--border-soft); }
.vk-top { display: flex; align-items: flex-start; gap: 12px; }
.vk-main { flex: 1; min-width: 0; }
.vk-num { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; color: var(--text3); text-transform: uppercase; }
.vk-title { font-size: 16px; font-weight: 600; margin: 2px 0 8px; overflow-wrap: anywhere; }
.vk-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.vk-actions .icon-btn { display: flex; padding: 4px; border-radius: 6px; }
.vk-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.vk-tabs { display: flex; gap: 2px; margin-bottom: -1px; overflow-x: auto; }
.vk-tab {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--text3);
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    white-space: nowrap;
    cursor: pointer;
}
.vk-tab:hover { color: var(--text2); background: var(--hover); }
.vk-tab.on { background: var(--bg); border-color: var(--border-soft); color: var(--text); }
.vk-tab svg { flex: none; }
.vk-tab .dot { width: 7px; height: 7px; box-shadow: none; }

/* Im Vorgang trägt der Kopf schon Nummer, Titel und Pillen — der Kopf der Vorgangsansicht und
   die Vorgangsspalte der KI-Sitzung wiederholten sie. Beide bleiben auf ihren eigenen Adressen. */
.work-row.arbeit .tkv-head { display: none; }
.work-row.arbeit .tkw-ticket { display: none; }
.work-row.arbeit .tkw-chat { border-right: none; }
.work-row.arbeit .tkw-mobile-switch { display: none; }

/* Das eingebettete Gesprächsfenster füllt die Mitte wie ein Halter. */
.chat-panel.eingebettet { background: var(--bg); }

/* ---- Die Kontextspalte ---- */
.vx {
    width: 320px;
    flex: none;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    background: var(--panel);
    border-left: 1px solid var(--border);
}
.vx-sec { padding: 12px 16px; border-bottom: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 2px; }
.vx-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text5);
}
.vx-more { margin-left: auto; border: none; background: none; padding: 0; font-family: var(--font-mono); font-size: 10px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text4); cursor: pointer; }
.vx-more:hover { color: var(--text2); }
.vx-row { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: 12px; min-width: 0; }
.vx-row .dot { flex: none; }
.vx-ic { width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: center; color: var(--text3); flex: none; }
.vx-ic svg { width: 13px; height: 13px; }
.vx-b { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vx-t1 { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vx-t2 { font-family: var(--font-mono); font-size: 10.5px; color: var(--text4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vx-row .btn.sm { flex: none; }
.vx-hinweis { font-size: 11.5px; color: var(--text4); line-height: 1.5; }
.vx-kn {
    display: flex;
    gap: 8px;
    align-items: baseline;
    width: 100%;
    padding: 4px 0;
    border: none;
    background: none;
    text-align: left;
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--text2);
    cursor: pointer;
}
.vx-kn:hover .t { color: var(--text); }
.vx-kn .num { font-family: var(--font-mono); font-size: 10.5px; color: var(--text4); flex: none; }
.vx-kn .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vx-kn .d { font-family: var(--font-mono); font-size: 10px; color: var(--text5); flex: none; }

/* ---- Die eingeklappte Leiste (Symbolspalte) ---- */
.sidebar-fold {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 4px 6px;
    margin: -4px 0 0;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--text5);
    font-family: var(--font-sans);
    font-size: 11px;
    cursor: pointer;
}
.sidebar-fold:hover { background: var(--hover); color: var(--text3); }
.sidebar-fold svg { width: 14px; height: 14px; flex: none; }
.sidebar.rail { width: 56px; }
.sidebar.rail .sidebar-heading,
.sidebar.rail .nav-count,
.sidebar.rail .admin-toggle span:not(.chev):not(.dot),
.sidebar.rail .account-text,
.sidebar.rail .version { display: none; }
.sidebar.rail .nav-item, .sidebar.rail .admin-toggle { justify-content: center; padding: 8px 0; position: relative; }
.sidebar.rail .sidebar-nav { padding-top: 14px; }
.sidebar.rail .admin-toggle .dot { position: absolute; top: 6px; right: 10px; margin: 0; }
.sidebar.rail .sidebar-footer { padding: 10px 8px; align-items: center; }
.sidebar.rail .sidebar-footer .account-line { margin: 0; padding: 4px; justify-content: center; }
.sidebar.rail .sidebar-fold { justify-content: center; }
/* Zugeklappt kann man die Verwaltung nicht lesen, aber der Punkt sagt weiter, dass dort etwas
   offen ist — und ein Klick klappt die Leiste auf. */

/* ---- Schmale Ansichten: Liste ODER Vorgang, nicht beides ---- */
@media (max-width: 1100px) {
    .vx { display: none; }
}
@media (max-width: 768px) {
    .work-row.arbeit .av { width: 100%; border-right: none; }
    .work-row.arbeit .work-center { display: none; }
    .work-row.arbeit.hat-vorgang .av { display: none; }
    .work-row.arbeit.hat-vorgang .work-center { display: flex; }
    .vk { padding-inline: 14px; }
}
=======
/* ---- Kundenverknüpfung (Hub-Konzept §14) ---------------------------------------------------- */
.customers-grid { grid-template-columns: minmax(160px, 1.4fr) 80px 90px minmax(200px, 1.6fr) 180px; }
.t-row.is-highlighted { box-shadow: inset 3px 0 0 var(--accent); }
.customer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
/* ---- Kundenakte (Hub-Konzept §14) ----
   Jede Rubrik hat denselben Aufbau: Kopfzeile mit Titel links und Aktion rechts, darunter eine
   Liste gleich gebauter Zeilen — egal ob darin ein Asset, eine Verknüpfung oder ein
   Kennworteintrag steht. */
.kd-head { display: flex; align-items: center; gap: 8px; }
.kd-head .spacer { flex: 1; }
.kd-list { display: flex; flex-direction: column; gap: 6px; }
.kd-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel2);
}
.kd-row-name { flex: 1; min-width: 0; }
.kd-row-name .n { font-size: 12.5px; font-weight: 500; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-row-name .s { font-size: 11px; color: var(--text4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-row-name .s.mono { font-family: var(--font-mono); font-size: 10.5px; }
.customer-link-chip {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
  padding: 2px 6px 2px 8px; border-radius: 999px; font-size: 11px;
  background: var(--surface3); color: var(--text2); border: 1px solid var(--border);
}
.customer-link-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-link-x {
  border: 0; background: transparent; color: var(--text4); cursor: pointer; padding: 0 2px;
  font-size: 13px; line-height: 1;
}
.customer-link-x:hover { color: var(--danger); }
.tk-pill.tk-customer { display: inline-flex; align-items: center; gap: 5px; padding-right: 4px; }
.tk-pill.tk-customer.is-bound { border-color: var(--ok); }
.tk-pill.tk-customer.is-suggested { border-style: dashed; }
.tk-pill.tk-customer.is-unbound { border-style: dashed; color: var(--text3); }
.tk-customer-ok { color: var(--ok); font-weight: 600; }
.tk-customer-ref { font-family: var(--font-mono); font-size: 10px; color: var(--text4); }
.tk-customer-act {
  border: 0; border-radius: 999px; padding: 1px 7px; font-size: 10.5px; cursor: pointer;
  background: var(--surface3); color: var(--text2);
}
.tk-customer-act:hover { background: var(--accent); color: var(--on-accent, #fff); }
.nt-customer { display: flex; flex-direction: column; gap: 6px; }
.nt-customer-hits { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.nt-customer-hit {
  text-align: left; border: 0; background: var(--surface2); color: var(--text1); padding: 7px 10px;
  font-size: 12px; cursor: pointer; border-bottom: 1px solid var(--border);
}
.nt-customer-hit:last-child { border-bottom: 0; }
.nt-customer-hit:hover { background: var(--surface3); }

/* ---- Fokusmodus der Fernwartung (Hub-Konzept §10, „Fokus & Vollbild") ----
   Die Klasse „fokus" an der app-shell (UiState.Fokus) nimmt Kopfleiste, Navigation und
   Reiterleiste weg; die Sitzungsfläche füllt das Fenster, die Bedienleiste der Sitzung bleibt —
   sie trägt den Weg zurück. Das Browser-Vollbild (fokus.js) setzt obendrauf und braucht keine
   eigenen Regeln: Es macht die Seite größer, nicht anders. Steht am Ende der Datei, damit die
   Regel die Einschub-Sidebar (.sidebar.open, gleiche Spezifität) sicher schlägt. */
.app-shell.fokus .titlebar,
.app-shell.fokus .sidebar,
.app-shell.fokus .sidebar-scrim,
.app-shell.fokus .vnc-tabbar { display: none; }
/* Im Arbeitsvorrat (Hub-Konzept §10.1) gehören auch Liste, Vorgangskopf und Kundenspalte zum
   Rahmen — der Fokus nimmt sie mit; die Bedienleiste der Sitzung trägt den Weg zurück. */
.app-shell.fokus .av,
.app-shell.fokus .vk,
.app-shell.fokus .vx { display: none; }

/* Kundendokumentation: Baum, Markdown und verbindliche Änderungsprüfung. */
.knowledge-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.knowledge-actions > label { display: grid; gap: 5px; font-size: 12px; }
.knowledge-actions > .text-input { width: min(360px, 100%); }
.knowledge-instance { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 14px 0; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.knowledge-instance > strong { flex: 1; min-width: 150px; }
.knowledge-workspace { display: grid; grid-template-columns: minmax(230px, 28%) minmax(0, 1fr); min-height: 480px; border: 1px solid var(--border); border-radius: 10px; margin: 18px 0; }
.knowledge-sidebar { padding: 16px; border-right: 1px solid var(--border); overflow: auto; }
.knowledge-document { min-width: 0; padding: 22px; }
.knowledge-tree { padding-left: 14px; margin: 8px 0; list-style: none; }
.knowledge-tree-row { display: flex; align-items: center; gap: 3px; }
.knowledge-tree-row > button:last-child { overflow-wrap: anywhere; text-align: left; white-space: normal; }
.knowledge-tree-row > .btn.primary { color: var(--text); background: var(--ok-soft); border-color: var(--ok-border); }
.knowledge-editor { display: block; width: 100%; min-height: 300px; resize: vertical; font-family: ui-monospace, SFMono-Regular, monospace; line-height: 1.55; }
.knowledge-preview { overflow-wrap: anywhere; padding: 12px 0; line-height: 1.65; }
.knowledge-preview pre { overflow: auto; }
.knowledge-proposals { margin: 12px; max-height: 60vh; overflow: auto; flex-shrink: 0; }
.knowledge-proposal { border: 1px solid var(--border); border-radius: 8px; padding: 14px; margin: 12px 0; }
.knowledge-proposal pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 340px; overflow: auto; font-size: 12px; }
.knowledge-diff { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin: 14px 0; }
.knowledge-diff > div { min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 6px; }
.knowledge-diff > div:last-child { border-color: var(--ok); }
@media (max-width: 800px) {
    .knowledge-workspace, .knowledge-diff { grid-template-columns: 1fr; }
    .knowledge-sidebar { border-right: 0; border-bottom: 1px solid var(--border); }
    .knowledge-document { padding: 14px; }
}

/* Documentation desk: the existing workspace tabs, with a persistent explorer alongside. */
.knowledge-desk { background: var(--bg); overflow: hidden; }
.knowledge-desk-header { display: flex; align-items: center; gap: 11px; padding: 13px 20px; border-bottom: 1px solid var(--border); flex: none; }
.knowledge-heading-icon { width: 19px; height: 19px; color: var(--accent); }
.knowledge-desk-header .view-title { font-size: 14px; }
.knowledge-desk-hint { font-size: 11px; color: var(--text4); margin-left: auto; }
.knowledge-explorer-toggle { font-size: 15px; }
.knowledge-desk-body { display: flex; flex: 1; min-height: 0; min-width: 0; }
.knowledge-explorer { width: 272px; flex: 0 0 272px; min-height: 0; display: flex; flex-direction: column; border-right: 1px solid var(--border); background: var(--chrome); }
.explorer-closed .knowledge-explorer { display: none; }
.knowledge-explorer-context { padding: 17px 16px 13px; display: grid; gap: 7px; border-bottom: 1px solid var(--border-soft); }
.knowledge-eyebrow { display: block; font-size: 10px; font-weight: 600; letter-spacing: .07em; color: var(--text4); text-transform: uppercase; }
.knowledge-explorer-context > .knowledge-eyebrow:not(:first-child) { margin-top: 8px; }
.knowledge-explorer-context .select-input { width: 100%; min-width: 0; font-size: 12px; }
.knowledge-area-picker { display: flex; align-items: center; gap: 5px; min-width: 0; }
.knowledge-area-picker .select-input { flex: 1; }
.knowledge-customer { display: flex; gap: 7px; align-items: center; font-size: 11px; color: var(--text3); min-width: 0; margin-top: 5px; }
.knowledge-customer > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-customer .dot { flex: none; width: 5px; height: 5px; background: var(--text5); }
.knowledge-customer .dot.on { background: var(--accent); }
.knowledge-area-settings, .knowledge-folder-properties { padding: 13px 16px; background: var(--panel); border-bottom: 1px solid var(--border); overflow: auto; max-height: 40vh; flex: none; }
.knowledge-area-settings .btn, .knowledge-folder-properties .btn { margin: 4px 3px 0 0; }
.knowledge-area-settings .field { margin-bottom: 5px; }
.knowledge-assignment { display: flex; flex-wrap: wrap; gap: 5px; font-size: 11px; }
.knowledge-assignment > strong, .knowledge-assignment > span { flex-basis: 100%; overflow-wrap: anywhere; }
.knowledge-assignment > span { color: var(--text4); line-height: 1.5; }
.knowledge-area-settings input, .knowledge-folder-properties input, .knowledge-folder-properties select { width: 100%; }
.knowledge-folder-properties { font-size: 11px; border-top: 1px solid var(--border); }
.knowledge-folder-properties label { display: grid; gap: 4px; margin: 10px 0; }
.knowledge-folder-properties summary { cursor: pointer; color: var(--text3); }
.knowledge-explorer-search { display: flex; align-items: center; margin: 14px 12px 6px; background: var(--field); border: 1px solid var(--border); border-radius: 6px; }
.knowledge-explorer-search .text-input { width: 0; flex: 1; border: 0; background: none; font-size: 11px; padding: 8px; }
.knowledge-explorer-search:focus-within { border-color: var(--accent); }
.knowledge-explorer-search .text-input:focus { outline: none; box-shadow: none; }
.knowledge-explorer-search svg, .knowledge-files-toolbar svg { width: 16px; height: 16px; display: block; }
.knowledge-files-toolbar { display: flex; align-items: center; gap: 2px; padding: 8px 12px 5px 17px; }
.knowledge-files-toolbar .btn { padding: 5px; min-width: 26px; }
.knowledge-folder-create { padding: 8px 15px; font-size: 11px; color: var(--text3); display: grid; gap: 6px; }
.knowledge-folder-create label { display: grid; gap: 5px; }
.knowledge-folder-create input { width: 100%; }
.knowledge-folder-create .btn { justify-self: end; }
.knowledge-explorer-scroll { flex: 1; min-height: 0; overflow: auto; padding: 5px 10px 20px; }
.knowledge-tree-root { display: flex; align-items: center; gap: 8px; background: none; border: 0; width: 100%; color: var(--text2); font: inherit; font-size: 12px; font-weight: 600; text-align: left; padding: 8px; cursor: pointer; border-radius: 5px; }
.knowledge-tree-root:hover { background: var(--hover); }
.knowledge-tree { list-style: none; margin: 1px 0; padding-left: 14px; }
.knowledge-explorer-scroll > .knowledge-tree { padding-left: 0; }
.knowledge-tree-row { display: flex; align-items: center; gap: 0; min-height: 30px; border-radius: 5px; margin: 1px 0; }
.knowledge-tree-row:hover { background: var(--hover); }
.knowledge-tree-row.selected { background: var(--hover2); color: var(--text); }
.knowledge-tree-toggle { flex: none; width: 22px; height: 27px; display: grid; place-items: center; border: 0; background: none; color: var(--text4); cursor: pointer; padding: 0; }
.knowledge-tree-toggle svg { width: 13px; height: 13px; }
.knowledge-tree-toggle svg.expanded { transform: rotate(90deg); }
.knowledge-tree-spacer { flex: none; width: 22px; }
.knowledge-tree-label { display: flex; flex: 1; min-width: 0; align-items: center; gap: 7px; background: none; border: 0; color: var(--text3); cursor: pointer; font: inherit; font-size: 12px; text-align: left; padding: 5px 6px 5px 0; }
.knowledge-tree-row.selected .knowledge-tree-label { color: var(--text); }
.knowledge-tree-label svg { flex: none; width: 15px; height: 15px; color: var(--text4); }
.knowledge-tree-row.selected .knowledge-tree-label svg { color: var(--accent); }
.knowledge-tree-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-tree-empty { font-size: 12px; color: var(--text4); line-height: 1.7; padding: 8px; }
.knowledge-explorer-footer { padding: 10px 16px; color: var(--text5); border-top: 1px solid var(--border-soft); font-size: 10px; }
.knowledge-search-hit { display: flex; flex-direction: column; gap: 5px; width: 100%; padding: 12px 8px; color: var(--text2); background: none; border: 0; border-bottom: 1px solid var(--border); text-align: left; font: inherit; font-size: 11px; cursor: pointer; overflow-wrap: anywhere; }
.knowledge-search-hit:hover { background: var(--hover); }
.knowledge-search-hit > span { color: var(--text4); font-size: 11px; line-height: 1.5; }
.knowledge-document-area { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; background: var(--bg); }
.knowledge-tabbar { background: var(--chrome); border-color: var(--border); min-height: 43px; }
.knowledge-tabbar .vnc-tab { flex-shrink: 0; font-family: inherit; background: none; border-color: transparent; color: var(--text3); }
.knowledge-tabbar .vnc-tab.active { background: var(--bg); border-color: var(--border); color: var(--text); }
.knowledge-tabbar .vnc-tab:hover { background: var(--hover); color: var(--text); }
.knowledge-tabbar .vnc-tab.overview { border-right-color: var(--border); font-weight: 400; }
.knowledge-unsaved { font-size: 7px; color: var(--accent); }
.knowledge-panels { flex: 1; display: flex; min-width: 0; min-height: 0; position: relative; }
.knowledge-document-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.knowledge-document-panel[hidden] { display: none; }
.knowledge-document-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 12px 23px; border-bottom: 1px solid var(--border-soft); flex: none; }
.knowledge-breadcrumb { display: flex; gap: 9px; align-items: center; color: var(--text4); min-width: 0; font-size: 11px; }
.knowledge-breadcrumb > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-toolbar-actions { display: flex; gap: 5px; align-items: center; flex: none; }
.knowledge-document-scroll { flex: 1; overflow: auto; min-height: 0; }
.knowledge-reading-page { width: 100%; max-width: 900px; margin: 0 auto; padding: 48px 55px 80px; }
.knowledge-document-title { margin: 10px 0 28px; color: var(--text); font-size: 30px; font-weight: 600; letter-spacing: -.025em; line-height: 1.25; overflow-wrap: anywhere; }
.knowledge-reading-page .knowledge-preview { font-size: 14px; line-height: 1.8; }
.knowledge-preview h1, .knowledge-preview h2, .knowledge-preview h3 { letter-spacing: -.015em; line-height: 1.35; }
.knowledge-edit-heading { padding: 30px 32px 20px; }
.knowledge-title-input { width: 100%; min-width: 0; padding: 8px 0; border: 0; background: none; color: var(--text); font: inherit; font-weight: 600; font-size: 26px; outline: none; }
.knowledge-title-input:disabled { opacity: 1; }
.knowledge-title-input:focus { box-shadow: 0 1px var(--accent); }
.knowledge-editor-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 450px; }
.knowledge-editor-column { min-width: 0; padding: 0 32px 30px; }
.knowledge-editor-column + .knowledge-editor-column { border-left: 1px solid var(--border); }
.knowledge-editor-column .knowledge-editor { min-height: 410px; margin-top: 12px; resize: vertical; border: 0; background: none; color: var(--text2); outline: none; font-size: 13px; }
.knowledge-editor-column .knowledge-preview { font-size: 13px; }
.knowledge-document-status { display: flex; align-items: center; justify-content: flex-end; gap: 17px; color: var(--text4); font-size: 10px; padding: 8px 20px; border-top: 1px solid var(--border-soft); flex: none; }
.knowledge-document-status > span:first-child { margin-right: auto; }
.knowledge-properties { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 13px 23px; background: var(--panel); border-bottom: 1px solid var(--border); font-size: 11px; }
.knowledge-properties label { display: grid; gap: 5px; }
.knowledge-panel-message { padding: 9px 23px; border-bottom: 1px solid var(--border); }
.knowledge-welcome { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; text-align: center; padding: 40px; margin: auto; color: var(--text3); max-width: 630px; }
.knowledge-welcome svg { width: 75px; height: 75px; color: var(--text5); margin-bottom: 7px; }
.knowledge-welcome h2 { color: var(--text2); font-size: 22px; font-weight: 500; letter-spacing: -.02em; margin: 0; }
.knowledge-welcome p { line-height: 1.8; font-size: 13px; margin: 0; }
.knowledge-welcome .btn { margin: 8px 0 16px; }
.knowledge-review-drawer { flex: none; border-top: 1px solid var(--border); background: var(--panel); max-height: 48%; overflow: auto; }
.knowledge-review-drawer > summary { padding: 12px 20px; font-size: 11px; cursor: pointer; color: var(--text3); }
.knowledge-review-drawer > summary > span { margin-left: 17px; font-size: 10px; color: var(--text5); }
.knowledge-review-drawer .knowledge-proposals { max-height: none; }
.knowledge-notice { flex: none; padding: 9px 20px; background: var(--panel); color: var(--text3); border-top: 1px solid var(--border); font-size: 12px; }
@media (max-width: 1100px) {
    .knowledge-explorer { width: 240px; flex-basis: 240px; }
    .knowledge-reading-page { padding: 35px 30px 60px; }
    .knowledge-editor-split { grid-template-columns: minmax(0, 1fr); }
    .knowledge-editor-column + .knowledge-editor-column { border-left: 0; border-top: 1px solid var(--border); padding-top: 20px; }
}
@media (max-width: 700px) {
    .knowledge-desk-hint { display: none; }
    .knowledge-desk-header { padding: 9px 12px; }
    .knowledge-desk-body { position: relative; }
    .knowledge-explorer { position: absolute; inset: 0 auto 0 0; z-index: 8; box-shadow: 10px 0 30px #0003; width: min(290px, 85%); }
    .knowledge-document-toolbar { padding: 10px 12px; gap: 6px; flex-wrap: wrap; }
    .knowledge-reading-page { padding: 28px 24px 45px; }
    .knowledge-document-title { font-size: 26px; }
    .knowledge-review-drawer > summary > span { display: none; }
    .knowledge-document-status { gap: 8px; padding: 8px 12px; }
}
.knowledge-attachment-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 12px 24px; border-bottom: 1px solid var(--border); font-size: 12px; }
.knowledge-upload { position: relative; overflow: hidden; }
.knowledge-upload input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.knowledge-upload:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.knowledge-attachments { max-width: 860px; margin: 24px auto; padding: 0 28px 24px; }
.knowledge-attachments h2 { font-size: 14px; margin-bottom: 10px; }
.knowledge-attachment { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border); padding: 10px 0; font-size: 13px; }
.knowledge-attachment a { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.knowledge-attachment a, .knowledge-preview a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-underline-offset: 3px; }
.knowledge-attachment a:hover, .knowledge-preview a:hover { text-decoration-color: currentColor; }
.knowledge-preview img { display: block; max-width: 100%; height: auto; border-radius: 6px; margin: 12px 0; }