/*
  Thandavio · Gestaltung der User-UI
  Grundlage: Thandavio/tokens.json und Thandavio/README.md.
  Vier Markenfarben, sonst keine. Kantig wie das Zeichen, schräge Anschnitte als einziges Formmotiv.
  Alpine Teal nur als Akzent für aktive Zustände und die Hauptaktion, nie als Fläche oder Verlauf.
*/

@font-face {
    font-family: "Satoshi";
    src: url("fonts/Satoshi-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Satoshi";
    src: url("fonts/Satoshi-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Satoshi";
    src: url("fonts/Satoshi-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Markenfarben */
    --deep-navy: #0A1622;
    --alpine-teal: #2BB3B0;
    --stone-gray: #8A97A3;
    --glacier-white: #F5F7F8;

    /* Rollen im Thema Navy (dunkel, Hauptauftritt) */
    --surface: var(--deep-navy);
    --ink: var(--glacier-white);
    --muted: var(--stone-gray);
    --accent: var(--alpine-teal);
    --accent-text: var(--alpine-teal);
    --on-accent: var(--deep-navy);
    --line: var(--stone-gray);

    /* Abstufungen aus den Markenfarben, keine neuen Farben */
    --line-soft: color-mix(in srgb, var(--stone-gray) 26%, transparent);
    --line-faint: color-mix(in srgb, var(--stone-gray) 14%, transparent);
    --panel: color-mix(in srgb, var(--glacier-white) 3%, var(--deep-navy));
    --panel-raised: color-mix(in srgb, var(--glacier-white) 6%, var(--deep-navy));
    --edge-light: color-mix(in srgb, var(--glacier-white) 55%, transparent);

    /* Schrift */
    --font: "Satoshi", "Helvetica Neue", Arial, sans-serif;

    /* Abstände */
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 32px;
    --space-4: 64px;

    /* Form */
    --radius-none: 0px;
    --radius-sm: 2px;
    --cut: 10px;

    color-scheme: dark;
}

/*
  Thema Glacier (hell): Glacier White als Grund, Deep Navy für Schrift und Logo.
  Stone Gray und Alpine Teal sind auf Glacier White als Text zu schwach, deshalb gibt es dafür
  Abstufungen mit Deep Navy (Nebentext 6:1, Akzenttext 5.7:1). Als Linie und Fläche bleiben sie unverändert.
  Gilt, wenn der Benutzer «Hell» gewählt hat (data-theme="light"), und bei «System» (kein data-theme),
  wenn das Betriebssystem hell eingestellt ist. Beide Blöcke müssen gleich bleiben.
*/
:root[data-theme="light"] {
    --surface: var(--glacier-white);
    --ink: var(--deep-navy);
    --muted: color-mix(in srgb, var(--deep-navy) 45%, var(--stone-gray));
    --accent: var(--alpine-teal);
    --accent-text: color-mix(in srgb, var(--alpine-teal) 55%, var(--deep-navy));
    --on-accent: var(--deep-navy);
    --line: var(--stone-gray);
    --line-soft: color-mix(in srgb, var(--stone-gray) 55%, transparent);
    --line-faint: color-mix(in srgb, var(--stone-gray) 30%, transparent);
    --panel: color-mix(in srgb, var(--deep-navy) 3.5%, var(--glacier-white));
    --panel-raised: color-mix(in srgb, var(--deep-navy) 6%, var(--glacier-white));
    --edge-light: color-mix(in srgb, var(--deep-navy) 30%, transparent);

    color-scheme: light;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        --surface: var(--glacier-white);
        --ink: var(--deep-navy);
        --muted: color-mix(in srgb, var(--deep-navy) 45%, var(--stone-gray));
        --accent: var(--alpine-teal);
        --accent-text: color-mix(in srgb, var(--alpine-teal) 55%, var(--deep-navy));
        --on-accent: var(--deep-navy);
        --line: var(--stone-gray);
        --line-soft: color-mix(in srgb, var(--stone-gray) 55%, transparent);
        --line-faint: color-mix(in srgb, var(--stone-gray) 30%, transparent);
        --panel: color-mix(in srgb, var(--deep-navy) 3.5%, var(--glacier-white));
        --panel-raised: color-mix(in srgb, var(--deep-navy) 6%, var(--glacier-white));
        --edge-light: color-mix(in srgb, var(--deep-navy) 30%, transparent);

        color-scheme: light;
    }
}

/* Logo passend zum Thema: dunkle Variante im Thema Navy, helle im Thema Glacier. */
.brand-light {
    display: none !important;
}

:root[data-theme="light"] .brand-dark {
    display: none !important;
}

:root[data-theme="light"] .brand-light {
    display: block !important;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .brand-dark {
        display: none !important;
    }

    :root:not([data-theme]) .brand-light {
        display: block !important;
    }
}

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.55;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: var(--ink);
    text-decoration-color: var(--line);
    text-underline-offset: 4px;
}

a:hover {
    text-decoration-color: var(--accent);
}

:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: 3px;
}

h1, h2, h3 {
    font-weight: 400;
    margin: 0;
    text-wrap: balance;
}

p {
    margin: 0 0 var(--space-2);
}

code, kbd {
    font-family: var(--font);
    letter-spacing: 0.12em;
}

/* ---------- Schriftstile aus den Tokens ---------- */

.t-wortmarke {
    font-size: 40px;
    line-height: 1;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

.t-claim {
    font-size: 14px;
    line-height: 1.4;
    font-weight: 300;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--muted);
}

.t-label {
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

.t-titel {
    font-size: 32px;
    line-height: 1.15;
}

.t-text {
    font-size: 16px;
    line-height: 1.55;
}

.t-muted {
    color: var(--muted);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- Bedienelemente ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-height: 44px;
    padding: 0 22px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-none);
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 120ms ease, color 120ms ease, background-color 120ms ease;
}

.btn:hover:not(:disabled) {
    border-color: var(--line);
}

.btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Hauptaktion: schräg angeschnitten wie der Querbalken des Zeichens */
.btn-primary {
    border: 0;
    background: var(--accent);
    color: var(--on-accent);
    padding: 0 28px;
    clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
}

.btn-primary:hover:not(:disabled) {
    background: var(--ink);
    color: var(--surface);
}

.btn-quiet {
    border-color: transparent;
    padding: 0 12px;
    color: var(--muted);
}

.btn-quiet:hover:not(:disabled) {
    border-color: transparent;
    color: var(--ink);
}

.btn-block {
    width: 100%;
}

.btn.is-active {
    border-color: var(--accent);
    color: var(--accent-text);
}

.field {
    display: grid;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
}

.field > label,
.field > .field-label {
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

.input,
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"],
.field select,
.field textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-none);
    background: transparent;
    color: var(--ink);
    font: inherit;
}

.field textarea {
    resize: vertical;
    min-height: 88px;
}

.field select option {
    background: var(--surface);
}

.input:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.field.is-spaced {
    margin-top: var(--space-2);
}

.field .hint {
    font-size: 13px;
    color: var(--muted);
}

.check {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: var(--space-2);
    cursor: pointer;
    color: var(--ink);
}

.check input {
    appearance: none;
    width: 16px;
    height: 16px;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-none);
    background: transparent;
    display: grid;
    place-content: center;
    flex: none;
}

.check input::after {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--accent);
    clip-path: polygon(2px 0, 100% 0, calc(100% - 2px) 100%, 0 100%);
    transform: scale(0);
    transition: transform 100ms ease;
}

.check input:checked {
    border-color: var(--accent);
}

.check input:checked::after {
    transform: scale(1);
}

.segmented {
    display: flex;
    border: 1px solid var(--line-soft);
}

.segmented button {
    flex: 1 1 auto;
    min-height: 40px;
    padding: 0 12px;
    white-space: nowrap;
    border: 0;
    border-right: 1px solid var(--line-soft);
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.segmented button:last-child {
    border-right: 0;
}

.segmented button[aria-pressed="true"] {
    color: var(--ink);
    box-shadow: inset 0 -2px 0 var(--accent);
}

/* ---------- Meldungen ---------- */

.notice {
    display: grid;
    gap: 4px;
    padding: 12px 16px;
    margin-bottom: var(--space-2);
    border-left: 2px solid var(--line);
    background: var(--panel);
    color: var(--ink);
    font-size: 15px;
}

.notice-title {
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

.notice-detail {
    color: var(--muted);
    font-size: 14px;
    overflow-wrap: anywhere;
}

.notice.is-error {
    border-left-color: var(--ink);
}

.notice.is-ok {
    border-left-color: var(--accent);
}

.validation-message,
.validation-errors {
    color: var(--ink);
    font-size: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.validation-message::before {
    content: "▸ ";
    color: var(--muted);
}

/* ---------- Lichtkante: das Bildmotiv der Marke ---------- */

.edge {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.edge::before {
    content: "";
    position: absolute;
    width: 160vmax;
    height: 160vmax;
    left: 38%;
    top: -18vmax;
    border-radius: 50%;
    border-top: 1px solid var(--edge-light);
    border-left: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--ink) 25%, transparent),
        0 -24px 80px -40px color-mix(in srgb, var(--ink) 30%, transparent);
    background: color-mix(in srgb, var(--ink) 2%, var(--surface));
}

.edge.is-faint::before {
    opacity: 0.45;
    left: 52%;
    top: -40vmax;
}

/* ---------- Anmeldung ---------- */

.auth {
    position: relative;
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(360px, 520px);
    isolation: isolate;
}

.auth-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4);
    overflow: hidden;
}

.auth-brand-mark {
    position: relative;
}

.auth-brand-mark img {
    height: 44px;
    width: auto;
    display: block;
}

.auth-brand-statement {
    position: relative;
}

.auth-brand-statement p span {
    display: block;
}

.auth-brand-statement p {
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.12;
    margin: 0;
}

.auth-brand-statement .rule {
    width: 48px;
    height: 1px;
    background: var(--line);
    margin: var(--space-3) 0 var(--space-2);
}

.auth-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-4) var(--space-3);
    background: var(--panel);
    border-left: 1px solid var(--line-faint);
}

.auth-panel-inner {
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
}

.auth-panel h1 {
    font-size: 32px;
    line-height: 1.15;
    margin-bottom: var(--space-1);
}

.auth-panel .lead {
    color: var(--muted);
    margin-bottom: var(--space-3);
}

.auth-links {
    margin-top: var(--space-3);
    padding-top: var(--space-2);
    border-top: 1px solid var(--line-faint);
    font-size: 14px;
    color: var(--muted);
}

@media (max-width: 860px) {
    .auth {
        grid-template-columns: minmax(0, 1fr);
    }

    .auth-brand {
        min-height: 220px;
        padding: var(--space-3) var(--space-2);
    }

    .auth-brand-statement p {
        font-size: 26px;
    }

    .auth-panel {
        border-left: 0;
        border-top: 1px solid var(--line-faint);
        padding: var(--space-3) var(--space-2) var(--space-4);
    }
}

/* ---------- Rahmen der App ---------- */

.shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
}

.topbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    height: 64px;
    padding: 0 var(--space-3);
    border-bottom: 1px solid var(--line-faint);
    background: var(--surface);
    position: sticky;
    top: 0;
    z-index: 20;
}

.topbar-brand img {
    height: 26px;
    width: auto;
    display: block;
}

.topbar-nav {
    display: flex;
    gap: var(--space-2);
    flex: 1;
}

.topbar-nav a {
    position: relative;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
    padding: 22px 0;
}

.topbar-nav a.active {
    color: var(--ink);
}

.topbar-nav a.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--accent);
    clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--muted);
    font-size: 14px;
}

.topbar-user .name {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-user form {
    margin: 0;
}

.content {
    min-height: 0;
}

.page {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--space-4) var(--space-3);
}

@media (max-width: 720px) {
    .topbar {
        padding: 0 var(--space-2);
        gap: var(--space-2);
    }

    .topbar-user .name {
        display: none;
    }

    .topbar-brand img {
        height: 22px;
    }

    .topbar-nav {
        min-width: 0;
        overflow-x: auto;
    }

    .topbar-user .btn {
        padding: 0 6px;
        letter-spacing: 0.12em;
    }

    .page {
        padding: var(--space-3) var(--space-2);
    }
}

/* ---------- Kontoverwaltung ---------- */

.manage {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: var(--space-4);
}

.manage-nav {
    display: grid;
    align-content: start;
    gap: 2px;
}

.manage-nav a {
    display: block;
    padding: 10px 0 10px 14px;
    border-left: 1px solid var(--line-faint);
    color: var(--muted);
    text-decoration: none;
    font-size: 15px;
}

.manage-nav a.active {
    color: var(--ink);
    border-left: 2px solid var(--accent);
    padding-left: 13px;
}

.page-title {
    font-size: 32px;
    line-height: 1.15;
    margin-bottom: var(--space-3);
}

.manage h2 {
    font-size: 24px;
    line-height: 1.2;
    margin-bottom: var(--space-2);
}

.manage-body {
    max-width: 62ch;
}

.facts {
    display: grid;
    grid-template-columns: minmax(160px, auto) minmax(0, 1fr);
    margin: 0;
}

.facts dt,
.facts dd {
    margin: 0;
    padding: 14px 0;
    border-top: 1px solid var(--line-faint);
}

.facts dt {
    color: var(--muted);
}

.steps {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-3);
    counter-reset: step;
}

.steps > li {
    counter-increment: step;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-top: 1px solid var(--line-faint);
}

.steps > li::before {
    content: counter(step);
    color: var(--muted);
    font-size: 14px;
    padding-top: 2px;
}

.qr-tile {
    width: 196px;
    height: 196px;
    padding: 12px;
    background: var(--glacier-white);
    margin: var(--space-2) 0;
}

.qr-tile svg {
    width: 100%;
    height: 100%;
    display: block;
}

.secret {
    display: inline-block;
    padding: 6px 10px;
    border: 1px solid var(--line-soft);
    font-size: 15px;
    letter-spacing: 0.12em;
    word-break: break-all;
}

.recovery-codes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-1) var(--space-3);
    padding: var(--space-2);
    border: 1px solid var(--line-soft);
    margin: var(--space-2) 0;
    font-size: 16px;
    letter-spacing: 0.12em;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: var(--space-2);
}

@media (max-width: 720px) {
    .manage {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-3);
    }

    .manage-nav {
        grid-auto-flow: column;
        overflow-x: auto;
    }

    .manage-nav a {
        white-space: nowrap;
    }
}

/* ---------- Chat ---------- */

.chat {
    height: calc(100dvh - 64px);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    /* Der Chat richtet sich nach seiner eigenen Breite, nicht nach dem Bildschirm: als Fenster ist er oft schmal. */
    container: chat / inline-size;
}

.chat-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-3);
    border-bottom: 1px solid var(--line-faint);
    min-height: 52px;
}

.modes {
    display: flex;
    gap: var(--space-3);
    flex: 1;
}

.modes button {
    position: relative;
    white-space: nowrap;
    border: 0;
    background: none;
    padding: 16px 0;
    color: var(--muted);
    font: inherit;
    font-size: 15px;
    cursor: pointer;
}

.modes button[aria-selected="true"] {
    color: var(--ink);
}

.modes button[aria-selected="true"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--accent);
    clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
}

.model-status {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--muted);
    min-width: 0;
}

.model-status .dot {
    width: 7px;
    height: 7px;
    flex: none;
    background: var(--stone-gray);
    clip-path: polygon(2px 0, 100% 0, calc(100% - 2px) 100%, 0 100%);
}

.model-status .dot.is-ready {
    background: var(--accent);
}

.model-status .model-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Die Einstellungen sind immer eingeklappt und öffnen nur über «Einstellungen» im Kopf, über dem Chat. */
.rail-toggle {
    display: inline-flex;
}

.chat-body {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
}

.chat-main {
    position: relative;
    min-width: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: 0;
}

.rail {
    display: none;
    position: absolute;
    inset: 0 0 0 auto;
    width: min(360px, 100%);
    z-index: 15;
    background: var(--panel-raised);
    border-left: 1px solid var(--line-soft);
    padding: var(--space-3) var(--space-3) var(--space-4);
    overflow-y: auto;
    min-height: 0;
}

.chat-body.rail-open .rail {
    display: block;
}

.rail h2 {
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: var(--space-2);
}

.rail-section {
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-2);
    border-bottom: 1px solid var(--line-faint);
}

.rail-section:last-child {
    border-bottom: 0;
}

.rail-note {
    margin: var(--space-1) 0 var(--space-2);
}

.rail .field textarea {
    font-size: 14px;
}

.messages {
    overflow-y: auto;
    padding: var(--space-3) var(--space-3) var(--space-2);
    scroll-behavior: smooth;
}

.messages-inner {
    max-width: 780px;
    margin: 0 auto;
    display: grid;
    gap: var(--space-3);
}

.msg {
    display: grid;
    gap: 10px;
}

.msg-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

.msg-meta {
    letter-spacing: normal;
    text-transform: none;
    font-size: 13px;
}

.msg.is-user {
    padding-left: var(--space-2);
    border-left: 1px solid var(--line-soft);
}

.msg.is-assistant .msg-label::before {
    content: "";
    width: 14px;
    height: 2px;
    background: var(--accent);
    clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
}

.msg-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-width: 72ch;
}

.msg-text.is-streaming::after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 1em;
    margin-left: 2px;
    vertical-align: text-bottom;
    background: var(--ink);
    animation: caret 1s steps(2, start) infinite;
}

@keyframes caret {
    to {
        visibility: hidden;
    }
}

.msg-error {
    padding: 10px 14px;
    border-left: 2px solid var(--ink);
    background: var(--panel);
    font-size: 15px;
}

.media-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.media-item {
    display: grid;
    gap: 6px;
    max-width: 320px;
    margin: 0;
}

.media-item img,
.media-item video {
    display: block;
    max-width: 320px;
    max-height: 240px;
    background: var(--panel);
    border: 1px solid var(--line-faint);
}

.media-item audio {
    width: 300px;
    max-width: 100%;
}

.media-caption {
    font-size: 13px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.empty {
    position: relative;
    min-height: 100%;
    display: grid;
    align-content: center;
    overflow: hidden;
}

.empty-inner {
    position: relative;
    max-width: 780px;
    width: 100%;
    margin: 0 auto;
}

.empty h1 {
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.12;
    margin-bottom: var(--space-2);
    max-width: 16ch;
}

.empty p {
    color: var(--muted);
    max-width: 52ch;
}

.composer {
    border-top: 1px solid var(--line-faint);
    padding: var(--space-2) var(--space-3) var(--space-2);
    background: var(--surface);
}

.composer-inner {
    max-width: 780px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 280px;
    padding: 6px 6px 6px 10px;
    border: 1px solid var(--line-soft);
    font-size: 13px;
}

.chip img {
    width: 28px;
    height: 28px;
    object-fit: cover;
    display: block;
}

.chip-kind {
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

.chip > span {
    white-space: nowrap;
}

.chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chip button {
    border: 0;
    background: none;
    color: var(--muted);
    cursor: pointer;
    font: inherit;
    padding: 2px 6px;
}

.chip button:hover {
    color: var(--ink);
}

/* In Dateien markiert: geht mit der nächsten Nachricht mit. Linke Kante in Teal wie die Auswahl in der Liste. */
.chip.is-marked {
    box-shadow: inset 2px 0 0 var(--accent);
}

.chip.is-marked .chip-kind {
    color: var(--accent-text);
}

.chip.is-unusable {
    box-shadow: none;
    border-style: dashed;
}

.chip.is-unusable .chip-kind,
.chip.is-unusable .chip-name {
    color: var(--muted);
}

.composer-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    border: 1px solid var(--line-soft);
}

.composer-box:focus-within {
    border-color: var(--accent);
}

.composer-box textarea {
    width: 100%;
    min-height: 52px;
    max-height: 240px;
    padding: 14px 16px;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    resize: none;
    outline: none;
}

.composer-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    padding: 6px 6px 6px 8px;
    border-top: 1px solid var(--line-faint);
}

.composer-tools .spacer {
    flex: 1;
}

.composer-hint {
    font-size: 13px;
    color: var(--muted);
}

.recording {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    font-size: 14px;
}

.recording .pulse {
    width: 8px;
    height: 8px;
    background: var(--accent);
    clip-path: polygon(2px 0, 100% 0, calc(100% - 2px) 100%, 0 100%);
    animation: pulse 1.2s ease-in-out infinite;
}

@keyframes pulse {
    50% {
        opacity: 0.25;
    }
}

.file-input {
    display: none;
}

/* Sprachdialog */

.voice {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
}

.voice-stage {
    position: relative;
    display: grid;
    justify-items: start;
    gap: var(--space-2);
    max-width: 780px;
    width: 100%;
    margin: 0 auto;
    padding: var(--space-4) var(--space-3) var(--space-3);
}

.voice-stage h1 {
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.12;
    max-width: 18ch;
}

.voice-stage > *:not(.edge) {
    position: relative;
}

.voice-state {
    color: var(--muted);
    min-height: 1.55em;
}

.talk {
    min-width: 220px;
    min-height: 64px;
    font-size: 13px;
}

.talk.is-live {
    background: var(--ink);
    color: var(--surface);
}

/* Live-Video */

.live {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: 0;
}

.live-scroll {
    overflow-y: auto;
    padding: var(--space-3);
}

.live-inner {
    max-width: 880px;
    margin: 0 auto;
    display: grid;
    gap: var(--space-3);
}

.viewfinder {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--panel);
    border: 1px solid var(--line-faint);
    overflow: hidden;
}

.viewfinder video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.viewfinder-idle {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    gap: var(--space-2);
    justify-items: center;
    text-align: center;
    padding: var(--space-3);
    color: var(--muted);
}

.viewfinder-badge {
    position: absolute;
    left: var(--space-2);
    top: var(--space-2);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    /* Liegt über dem Kamerabild, deshalb in beiden Themen dunkel. */
    background: color-mix(in srgb, var(--deep-navy) 82%, transparent);
    color: var(--glacier-white);
    font-size: 13px;
}

.viewfinder-badge .pulse {
    width: 8px;
    height: 8px;
    background: var(--accent);
    clip-path: polygon(2px 0, 100% 0, calc(100% - 2px) 100%, 0 100%);
    animation: pulse 1.2s ease-in-out infinite;
}

@container chat (max-width: 900px) {
    .chat-head {
        padding: 0 var(--space-2);
        gap: var(--space-2);
    }

    .chat-head {
        flex-wrap: wrap;
        row-gap: 0;
    }

    .modes {
        flex: 1 1 100%;
        gap: var(--space-2);
    }

    .model-status {
        flex: 1;
        padding: 10px 0;
    }

    .composer-tools .btn {
        padding: 0 10px;
        letter-spacing: 0.12em;
    }

    .messages,
    .live-scroll {
        padding: var(--space-2);
    }

    .composer {
        padding: var(--space-1) var(--space-2) var(--space-2);
    }

    .voice-stage {
        padding: var(--space-3) var(--space-2);
    }
}

/* ---------- Fehlerseiten ---------- */

.plain-page {
    position: relative;
    min-height: calc(100vh - 64px);
    display: grid;
    align-content: center;
    padding: var(--space-4) var(--space-3);
    overflow: hidden;
}

.plain-page > *:not(.edge) {
    position: relative;
    max-width: 52ch;
}

.plain-page h1 {
    font-size: 32px;
    line-height: 1.15;
    margin-bottom: var(--space-2);
}

#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    padding: 14px var(--space-3);
    background: var(--panel-raised);
    border-top: 1px solid var(--line);
    color: var(--ink);
    font-size: 15px;
}

#blazor-error-ui .reload {
    margin-left: var(--space-2);
}

#blazor-error-ui .dismiss {
    position: absolute;
    right: var(--space-3);
    top: 12px;
    cursor: pointer;
    color: var(--muted);
}

/* ---------- Dateimanager ---------- */

/* Fenster Dateien: Kopf mit Pfad und Suche, darunter Ordnerbaum und Dateiliste. */
.fm-window {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
    container: files / inline-size;
}

.fm-head {
    display: flex;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    padding: 10px var(--space-2);
    min-height: 60px;
    border-bottom: 1px solid var(--line-faint);
}

.fm-crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.fm-crumb {
    border: 0;
    background: none;
    padding: 6px 4px;
    color: var(--muted);
    font: inherit;
    font-size: 15px;
    cursor: pointer;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fm-crumb:hover,
.fm-crumb.is-current {
    color: var(--ink);
}

.fm-crumb-sep {
    color: var(--line-soft);
}

.fm-search {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex: 0 1 560px;
    min-width: 0;
}

.fm-search input[type="search"] {
    flex: 1;
    min-width: 0;
}

.fm-select {
    width: auto;
    min-height: 44px;
    padding: 8px 12px;
}

.fm-select option,
.fm-select optgroup {
    background: var(--surface);
}

.fm-message {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin: 0;
    padding: 6px 6px 6px var(--space-3);
    border-bottom: 1px solid var(--line-faint);
}

.fm-message .btn {
    min-height: 36px;
}

.fm-empty {
    padding: var(--space-4) var(--space-3);
}

.fm-pane {
    min-height: 0;
    min-width: 0;
    overflow-y: auto;
}

.fm-pane-title {
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fm-ellipsis {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fm-ellipsis-cell {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ordnerbaum */

.fm-tree {
    padding: var(--space-2) 0;
}

.fm-tree > .fm-pane-title {
    padding: 0 var(--space-2) var(--space-1);
}

.fm-tree-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fm-tree-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
    padding-left: calc(8px + var(--depth, 0) * 16px);
    padding-right: var(--space-1);
}

.fm-tree-row.is-selected::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--accent);
}

.fm-tree-row.is-selected,
.fm-tree-row:hover {
    background: var(--panel);
}

.fm-tree-toggle {
    flex: none;
    width: 22px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 0;
    background: none;
    color: var(--muted);
    font: inherit;
    font-size: 12px;
    padding: 0;
    cursor: pointer;
}

span.fm-tree-toggle {
    cursor: default;
}

.fm-tree-name {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    min-height: 34px;
    border: 0;
    background: none;
    color: var(--muted);
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    padding: 0 4px;
}

.fm-tree-row.is-selected .fm-tree-name,
.fm-tree-name:hover {
    color: var(--ink);
}

.fm-tree-row.is-path .fm-tree-name {
    font-style: italic;
}

.fm-tree-row.is-disabled .fm-tree-name {
    opacity: 0.4;
    cursor: not-allowed;
}

.fm-icon-folder,
.fm-icon-file {
    flex: none;
    display: inline-block;
    background: var(--stone-gray);
    opacity: 0.7;
}

.fm-icon-folder {
    width: 15px;
    height: 12px;
    clip-path: polygon(0 0, 42% 0, 54% 20%, 100% 20%, 100% 100%, 0 100%);
}

.fm-icon-file {
    width: 11px;
    height: 14px;
    clip-path: polygon(0 0, 66% 0, 100% 30%, 100% 100%, 0 100%);
    opacity: 0.45;
}

/* Inhalt */

.fm-list {
    padding: var(--space-2) var(--space-2) var(--space-3);
}

.fm-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-height: 44px;
    margin-bottom: var(--space-2);
}

.fm-list-tools {
    display: flex;
    gap: var(--space-1);
}

.fm-list-empty {
    padding: var(--space-3) 0;
}

.fm-drop {
    position: relative;
    display: grid;
    gap: 2px;
    justify-items: center;
    text-align: center;
    padding: 18px var(--space-2);
    margin-bottom: var(--space-2);
    border: 1px dashed var(--line-soft);
    font-size: 14px;
    transition: border-color 120ms ease, background-color 120ms ease;
}

.fm-drop .t-muted {
    font-size: 13px;
}

.fm-drop:hover,
.fm-drop:focus-within {
    border-color: var(--accent);
    background: var(--panel);
}

.fm-drop.is-busy {
    border-style: solid;
    border-color: var(--accent);
}

.fm-drop.is-compact {
    padding: var(--space-2);
    margin: var(--space-2) 0 0;
}

.fm-drop-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.fm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.fm-table th {
    text-align: left;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 8px 10px;
    border-bottom: 1px solid var(--line-soft);
    white-space: nowrap;
}

.fm-table td {
    padding: 0 10px;
    height: 42px;
    border-bottom: 1px solid var(--line-faint);
    white-space: nowrap;
}

.fm-table tbody tr:hover {
    background: var(--panel);
}

.fm-table tbody tr.is-selected {
    background: var(--panel-raised);
    box-shadow: inset 2px 0 0 var(--accent);
}

.fm-table td:first-child {
    max-width: 0;
    width: 50%;
}

.fm-col-num {
    text-align: right;
}

.fm-table th.fm-col-num {
    text-align: right;
}

.fm-row-name .fm-ellipsis {
    min-width: 8ch;
}

/* Suchtreffer: unter dem Namen die Fundstelle, wenn sie in einer Eigenschaft oder Klasse liegt. */
.fm-hit-text {
    display: grid;
    min-width: 0;
    padding: 4px 0;
}

.fm-hit-match {
    font-size: 12px;
    color: var(--accent-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Markieren für den Chat: Kästchen vor dem Namen, bei Ordnern ein gleich breiter Platzhalter. */
.fm-name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.fm-name-cell .fm-row-name {
    flex: 1;
    min-width: 0;
    user-select: none;
}

.fm-mark,
.fm-mark-space {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 0;
}

.fm-mark {
    appearance: none;
    display: grid;
    place-content: center;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-none);
    background: transparent;
    cursor: pointer;
}

.fm-mark::after {
    content: "";
    width: 8px;
    height: 8px;
    background: var(--accent);
    clip-path: polygon(2px 0, 100% 0, calc(100% - 2px) 100%, 0 100%);
    transform: scale(0);
    transition: transform 100ms ease;
}

.fm-mark:hover,
.fm-mark:focus-visible {
    border-color: var(--line);
}

.fm-mark:checked {
    border-color: var(--accent);
}

.fm-mark:checked::after {
    transform: scale(1);
}

.fm-table tbody tr.is-marked:not(.is-selected) {
    background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.fm-markbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-1) var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-2);
    padding: 6px 6px 6px 12px;
    border-left: 2px solid var(--accent);
    background: var(--panel-raised);
    font-size: 13px;
}

.fm-markbar .btn {
    min-height: 34px;
}

.fm-row-name {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    border: 0;
    background: none;
    padding: 0;
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.fm-sort {
    border: 0;
    background: none;
    padding: 0;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}

.fm-sort:hover {
    color: var(--ink);
}

.fm-link {
    border: 0;
    background: none;
    padding: 0;
    color: var(--muted);
    font: inherit;
    text-decoration: underline;
    text-decoration-color: var(--line-soft);
    text-underline-offset: 4px;
    cursor: pointer;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fm-link:hover {
    color: var(--ink);
    text-decoration-color: var(--accent);
}

.fm-badge {
    flex: none;
    padding: 1px 8px;
    border: 1px solid var(--line-soft);
    color: var(--muted);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* Details */

.fm-details {
    padding: var(--space-2) var(--space-3) var(--space-3);
}

.fm-details-head {
    padding-bottom: var(--space-2);
}

.fm-details-title {
    font-size: 22px;
    line-height: 1.25;
    margin: 6px 0;
    overflow-wrap: anywhere;
}

.fm-details-meta {
    margin: 0 0 4px;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.fm-lock {
    margin: var(--space-1) 0 0;
    padding: 6px 12px;
    border-left: 2px solid var(--accent);
    background: var(--panel);
    font-size: 14px;
}

.fm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-2);
    border-bottom: 1px solid var(--line-faint);
}

.fm-actions .btn,
.fm-version-actions .btn {
    min-height: 38px;
    padding: 0 14px;
}

.fm-actions .btn-quiet {
    padding: 0 10px;
}

.fm-details-section {
    margin-bottom: var(--space-2);
}

.fm-details-section h3 {
    margin-bottom: var(--space-1);
}

.fm-details-hint {
    font-size: 14px;
}

.fm-tabs {
    display: flex;
    gap: var(--space-2);
    border-bottom: 1px solid var(--line-faint);
    margin-bottom: var(--space-2);
}

.fm-tabs button {
    position: relative;
    border: 0;
    background: none;
    padding: 10px 0;
    color: var(--muted);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.fm-tabs button[aria-selected="true"] {
    color: var(--ink);
}

.fm-tabs button[aria-selected="true"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--accent);
    clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
}

.fm-tab-body {
    display: grid;
    gap: var(--space-1);
    align-content: start;
}

.fm-tab-body .field {
    margin-bottom: 4px;
}

.fm-tab-body > .btn {
    justify-self: start;
}

.fm-tab-body .field input[type="date"] {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-none);
    background: transparent;
    color: var(--ink);
    font: inherit;
}

.fm-tab-body .field input:disabled,
.fm-tab-body .field select:disabled {
    opacity: 0.6;
}

.fm-preview-frame {
    width: 100%;
    height: 58vh;
    border: 1px solid var(--line-faint);
    background: var(--panel);
}

.fm-preview-image {
    display: block;
    max-width: 100%;
    max-height: 58vh;
    margin: 0 auto;
    border: 1px solid var(--line-faint);
}

.fm-preview-media {
    width: 100%;
}

.fm-preview-text {
    margin: 0;
    padding: var(--space-2);
    max-height: 58vh;
    overflow: auto;
    border: 1px solid var(--line-faint);
    background: var(--panel);
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.fm-versions {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fm-versions li {
    padding: 12px 0 12px 14px;
    border-left: 1px solid var(--line-faint);
}

.fm-versions li.is-current {
    border-left: 2px solid var(--accent);
}

.fm-version-head {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.fm-version-meta {
    font-size: 13px;
}

.fm-version-comment {
    margin-top: 4px;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.fm-version-actions {
    display: flex;
    gap: 4px;
    margin-top: 6px;
}

.fm-version-actions .btn-quiet {
    padding: 0 8px;
    margin-left: -8px;
}

/* Dialoge */

.fm-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--surface) 78%, transparent);
}

.fm-dialog {
    position: fixed;
    z-index: 51;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(520px, calc(100vw - 32px));
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    padding: var(--space-3);
    background: var(--panel-raised);
    border: 1px solid var(--line-faint);
    border-top: 2px solid var(--accent);
}

.fm-dialog.is-wide {
    width: min(780px, calc(100vw - 32px));
}

.fm-dialog h2 {
    font-size: 24px;
    margin-bottom: var(--space-1);
}

.fm-dialog-lead {
    margin-bottom: var(--space-2);
    overflow-wrap: anywhere;
}

.fm-dialog-note {
    font-size: 13px;
    margin-top: var(--space-2);
}

.fm-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-1);
    margin-top: var(--space-3);
}

.fm-kind {
    margin-left: var(--space-1);
    font-size: 12px;
}

.fm-cell-action {
    text-align: right;
    width: 1%;
}

.fm-perm-table td:first-child {
    width: 60%;
}

.fm-perm-add {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: var(--space-2);
}

.fm-perm-add .fm-select:first-child {
    flex: 1;
    min-width: 200px;
}

.fm-perm-summary {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 14px;
}

.fm-perm-summary li {
    display: flex;
    align-items: baseline;
    gap: var(--space-1);
    padding: 6px 0;
    border-bottom: 1px solid var(--line-faint);
}

.fm-perm-summary .fm-level {
    margin-left: auto;
    color: var(--muted);
    white-space: nowrap;
}

.fm-props-list {
    display: grid;
    gap: var(--space-2);
}

.fm-props-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) 110px;
    gap: 0 var(--space-2);
    padding: var(--space-2);
    border: 1px solid var(--line-faint);
}

.fm-props-row.is-inactive {
    opacity: 0.6;
}

.fm-props-row .field {
    margin-bottom: var(--space-1);
}

.fm-props-options {
    grid-column: 1 / -1;
}

.fm-props-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

.fm-props-actions .check {
    margin: 0;
}

/* Klassen: Name und Reihenfolge, darunter die Eigenschaften der Klasse zum Ankreuzen, zuletzt Aktiv und Speichern. */
.fm-class-row {
    grid-template-columns: minmax(0, 1fr) 110px;
}

.fm-class-fields {
    grid-column: 1 / -1;
    order: 1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    margin: 0 0 var(--space-2);
    padding: var(--space-1) 0 0;
    border: 0;
    border-top: 1px solid var(--line-faint);
}

.fm-class-fields legend {
    padding: 0;
    margin-bottom: var(--space-1);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
}

.fm-class-fields .check {
    margin: 0;
}

.fm-class-row .fm-props-actions {
    order: 2;
}

/* Kopf eines Eigenschaftsfeldes: Name links, «Wert entfernen» rechts. */
.fm-prop-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-1);
}

.fm-prop-remove {
    flex: none;
    border: 0;
    background: none;
    padding: 0;
    color: var(--muted);
    font: inherit;
    font-size: 12px;
    text-decoration: underline;
    text-decoration-color: var(--line-soft);
    text-underline-offset: 3px;
    cursor: pointer;
}

.fm-prop-remove:hover {
    color: var(--ink);
    text-decoration-color: var(--accent);
}

/* Stand eines Eigenschaftsfeldes nach dem Speichern. */
.fm-prop-status {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--muted);
}

.fm-prop-status.is-ok::before {
    content: "✓ ";
    color: var(--accent-text);
}

.fm-prop-status.is-error {
    color: var(--ink);
    border-left: 2px solid var(--ink);
    padding-left: 8px;
}

.fm-pick-tree {
    max-height: 50dvh;
    overflow-y: auto;
    border: 1px solid var(--line-faint);
    padding: var(--space-1) 0;
}

/* Das Fenster Dateien richtet sich nach seiner eigenen Breite. */
@container files (max-width: 760px) {
    .fm-head {
        flex-wrap: wrap;
    }

    .fm-search {
        flex: 1 1 100%;
    }
}

@container files (max-width: 560px) {
    .fm-table .fm-hide-narrow {
        display: none;
    }

    .fm-search {
        flex-wrap: wrap;
    }

    .fm-search input[type="search"] {
        flex: 1 1 100%;
    }

    .fm-row-name .fm-badge {
        display: none;
    }

    .fm-table td:first-child {
        width: auto;
    }
}

@container pane (max-width: 420px) {
    .fm-details {
        padding-left: var(--space-2);
        padding-right: var(--space-2);
    }
}

@media (max-width: 720px) {
    .fm-props-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Fenster ---------- */

/* Startansicht: Die Fensteransicht füllt den Platz unter der Kopfzeile. */
.start {
    height: calc(100dvh - 64px);
    display: grid;
    grid-template-rows: minmax(0, 1fr);
}

.desk {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    min-height: 0;
}

/* Leiste mit allen Fenstern: Ein Klick blendet ein oder aus. */
.desk-dock {
    display: flex;
    align-items: center;
    gap: 2px;
    min-height: 44px;
    padding: 0 var(--space-2);
    border-bottom: 1px solid var(--line-faint);
    overflow-x: auto;
}

.desk-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 0;
    background: none;
    padding: 8px 12px;
    color: var(--muted);
    font: inherit;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: color 120ms ease;
}

.desk-toggle::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    background: var(--line-soft);
    clip-path: polygon(2px 0, 100% 0, calc(100% - 2px) 100%, 0 100%);
    transition: background-color 120ms ease;
}

.desk-toggle:hover,
.desk-toggle[aria-pressed="true"],
.desk-toggle[aria-current="true"] {
    color: var(--ink);
}

.desk-toggle[aria-pressed="true"]::before,
.desk-toggle[aria-current="true"]::before {
    background: var(--accent);
}

.desk-panes {
    display: flex;
    min-width: 0;
    min-height: 0;
    padding: var(--space-1);
    overflow-x: auto;
}

.desk-empty {
    margin: auto;
    padding: var(--space-3);
    color: var(--muted);
    text-align: center;
}

/* Beim Ziehen fangen eingebettete Vorschauen den Zeiger nicht ab. */
.desk.is-resizing-x,
.desk.is-resizing-x * {
    cursor: col-resize;
    user-select: none;
}

.desk.is-resizing-y,
.desk.is-resizing-y * {
    cursor: row-resize;
    user-select: none;
}

.desk.is-resizing-x iframe,
.desk.is-resizing-y iframe {
    pointer-events: none;
}

/*
  Ein Fenster: Fläche mit Haarlinie, oben rechts schräg angeschnitten wie das Zeichen. Der Anschnitt ist eine
  aufgelegte Ecke in der Grundfarbe, kein clip-path: Dialoge im Fenster (position: fixed) würden sonst mit abgeschnitten.
*/
.pane {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--panel);
    border: 1px solid var(--line-faint);
}

.pane::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: -1px;
    right: -1px;
    width: calc(var(--cut) + 1px);
    height: calc(var(--cut) + 1px);
    background: linear-gradient(to top right, transparent calc(50% - 0.5px), var(--line-soft) calc(50% - 0.5px), var(--line-soft) calc(50% + 0.5px), var(--surface) calc(50% + 0.5px));
    pointer-events: none;
}

.pane.is-hidden {
    display: none;
}

.pane-head {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 34px;
    padding: 0 var(--space-2) 0 var(--space-2);
    border-bottom: 1px solid var(--line-faint);
}

.pane-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pane-title::before {
    content: "";
    flex: none;
    width: 14px;
    height: 2px;
    background: var(--line-soft);
    clip-path: polygon(2px 0, 100% 0, calc(100% - 2px) 100%, 0 100%);
    transition: background-color 160ms ease;
}

/* Das Fenster, in dem gerade gearbeitet wird. */
.pane:focus-within .pane-title {
    color: var(--ink);
}

.pane:focus-within .pane-title::before {
    background: var(--accent);
}

.pane-close {
    flex: none;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 0;
    background: none;
    color: var(--muted);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.pane-close:hover {
    color: var(--ink);
}

.pane-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    container: pane / inline-size;
}

.pane-body > .chat,
.pane-body > .fm-window,
.pane-body > .fm-details {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
}

/* Trennlinie zwischen zwei Fenstern: ziehen oder mit den Pfeiltasten verschieben. */
.splitter {
    flex: none;
    position: relative;
    width: var(--space-1);
    cursor: col-resize;
    touch-action: none;
    outline: none;
}

.splitter::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2px;
    height: 36px;
    transform: translate(-50%, -50%);
    background: var(--line-soft);
    transition: height 160ms ease, background-color 160ms ease;
}

.splitter:hover::after,
.splitter:focus-visible::after,
.splitter.is-active::after {
    height: 88px;
    background: var(--accent);
}

/* Aufteilung innerhalb eines Fensters, oben und unten. */
.split {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.split-part {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.split-part > .fm-pane {
    flex: 1 1 auto;
    min-height: 0;
}

.split-handle {
    flex: none;
    position: relative;
    height: var(--space-1);
    cursor: row-resize;
    touch-action: none;
    outline: none;
}

.split-handle::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: var(--line-faint);
}

.split-handle::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 36px;
    height: 2px;
    transform: translate(-50%, -50%);
    background: var(--line-soft);
    transition: width 160ms ease, background-color 160ms ease;
}

.split-handle:hover::after,
.split-handle:focus-visible::after,
.split-handle.is-active::after {
    width: 88px;
    background: var(--accent);
}

/* Schmaler Bildschirm: immer ein Fenster, die Leiste wechselt. Grenze wie NARROW_QUERY in pane-layout.js. */
@media (max-width: 900px) {
    .desk-panes {
        padding: 0;
    }

    .pane {
        display: none;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        border: 0;
    }

    .pane.is-focus {
        display: flex;
    }

    .pane::after,
    .pane-head,
    .splitter,
    .desk-empty {
        display: none;
    }
}

/* ---------- Benutzermenü ---------- */

.user-menu {
    position: relative;
}

.user-menu summary {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 4px 0 12px;
    color: var(--muted);
    font-size: 14px;
    cursor: pointer;
    list-style: none;
}

.user-menu summary::-webkit-details-marker {
    display: none;
}

.user-menu summary:hover,
.user-menu[open] summary {
    color: var(--ink);
}

.user-menu .name {
    display: inline;
}

.user-menu-caret {
    font-size: 12px;
}

.user-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    z-index: 40;
    min-width: 240px;
    display: grid;
    padding: var(--space-1) 0;
    background: var(--panel-raised);
    border: 1px solid var(--line-faint);
    border-top: 2px solid var(--accent);
}

.user-menu-login {
    padding: 6px 18px 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--line-faint);
    color: var(--muted);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.user-menu-panel a,
.user-menu-panel button {
    display: block;
    width: 100%;
    padding: 10px 18px;
    border: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: 15px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.user-menu-panel a:hover,
.user-menu-panel button:hover {
    background: var(--panel);
    box-shadow: inset 2px 0 0 var(--accent);
}

.user-menu-panel form {
    margin: 0;
    border-top: 1px solid var(--line-faint);
    margin-top: 4px;
    padding-top: 4px;
}

/* ---------- Einstellungen und Administration ---------- */

.page.is-wide {
    max-width: 1280px;
}

.manage-body.is-wide {
    max-width: none;
    min-width: 0;
}

.manage-nav-group {
    margin: var(--space-2) 0 4px;
    padding-left: 14px;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

.settings-group {
    margin: 0 0 var(--space-3);
    padding: 0;
    border: 0;
    border-top: 1px solid var(--line-faint);
    padding-top: var(--space-2);
}

.settings-group legend {
    padding: 0 var(--space-1) 0 0;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

.settings-note {
    font-size: 14px;
    margin-bottom: var(--space-2);
}

.tone-list {
    display: grid;
    gap: 6px;
}

.tone {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 2px 12px;
    align-items: baseline;
    padding: 12px 14px;
    border: 1px solid var(--line-faint);
    cursor: pointer;
}

.tone:hover {
    border-color: var(--line-soft);
}

.tone.is-selected {
    border-color: var(--accent);
    background: var(--panel);
}

.tone input {
    grid-row: span 2;
    margin: 0;
    accent-color: var(--alpine-teal);
}

.tone-name {
    color: var(--ink);
}

.tone-text {
    color: var(--muted);
    font-size: 14px;
}

.tone-editor {
    display: grid;
    gap: var(--space-1);
    margin-bottom: var(--space-1);
}

.tone-edit {
    display: grid;
    grid-template-columns: minmax(120px, 200px) minmax(0, 1fr) auto;
    gap: var(--space-1);
    align-items: start;
}

.tone-edit textarea {
    min-height: 44px;
    resize: vertical;
    font-size: 14px;
}

.tone-edit textarea:disabled {
    opacity: 0.5;
}

.admin-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.admin-head h2 {
    margin: 0;
}

.admin-section {
    padding: var(--space-2) 0;
    border-top: 1px solid var(--line-faint);
}

.admin-section h3 {
    margin-bottom: var(--space-1);
}

.admin-inline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    align-items: center;
}

.admin-inline .input {
    flex: 1 1 220px;
    width: auto;
}

form.admin-inline {
    margin-bottom: var(--space-2);
}

.admin-table td {
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    vertical-align: top;
}

.admin-table td:first-child {
    max-width: none;
    width: auto;
}

.admin-name {
    display: block;
}

.admin-sub {
    display: block;
    font-size: 13px;
}

.admin-wrap {
    white-space: normal;
    overflow-wrap: anywhere;
}

.admin-row-actions {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
}

.role-checks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
}

.role-checks .check {
    margin: 0;
}

.admin-tabs {
    display: inline-flex;
    margin-bottom: var(--space-2);
}

.admin-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0 var(--space-2);
    margin-bottom: var(--space-2);
}

.admin-filter .field {
    margin-bottom: var(--space-1);
}

.admin-filter-text {
    flex: 1 1 240px;
}

.admin-filter .btn {
    margin-bottom: var(--space-1);
}

.admin-filter input[type="date"] {
    min-height: 44px;
    color-scheme: inherit;
}

.admin-log {
    font-size: 13px;
}

.admin-log .admin-time {
    white-space: nowrap;
    color: var(--muted);
}

.admin-log .admin-source {
    max-width: 220px;
}

.admin-log tr.is-alert td:first-child {
    box-shadow: inset 2px 0 0 var(--ink);
}

.admin-exception summary {
    cursor: pointer;
    color: var(--muted);
    margin-top: 4px;
}

.admin-exception pre {
    max-height: 320px;
    overflow: auto;
    margin: 6px 0 0;
    padding: var(--space-1);
    background: var(--panel);
    border: 1px solid var(--line-faint);
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 12px;
    white-space: pre-wrap;
}

@media (max-width: 720px) {
    .user-menu .name {
        display: inline-block;
        max-width: 110px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .user-menu-panel {
        min-width: 220px;
    }

    .manage-nav-group {
        display: none;
    }

    .tone-edit {
        grid-template-columns: minmax(0, 1fr);
    }

    .admin-table {
        display: block;
        overflow-x: auto;
    }
}

/* ---------- Administration: Rahmen ---------- */

/* Eigener Bereich: Seitenleiste nach Themen links, die Seite rechts über die volle Breite. */
.admin-shell {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    min-height: calc(100dvh - 64px);
}

.admin-side {
    position: sticky;
    top: 64px;
    align-self: start;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: calc(100dvh - 64px);
    padding: var(--space-3) 0 var(--space-2);
    border-right: 1px solid var(--line-faint);
    background: var(--panel);
    overflow-y: auto;
}

.admin-side-head {
    display: grid;
    gap: 2px;
    padding: 0 var(--space-2) var(--space-2) 22px;
    margin-bottom: var(--space-1);
    border-bottom: 1px solid var(--line-faint);
}

.admin-side-title {
    font-size: 12px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ink);
}

.admin-side-sub {
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

.admin-nav {
    display: grid;
    align-content: start;
    gap: 1px;
    padding: var(--space-1) 0;
}

.admin-nav a {
    position: relative;
    display: block;
    padding: 9px var(--space-2) 9px 22px;
    color: var(--muted);
    text-decoration: none;
    font-size: 15px;
}

.admin-nav a:hover {
    color: var(--ink);
    background: var(--panel-raised);
}

/* Aktive Seite: schräger Balken links, wie der Querbalken des Zeichens. */
.admin-nav a.active {
    color: var(--ink);
    background: var(--panel-raised);
}

.admin-nav a.active::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 9px;
    bottom: 9px;
    width: 4px;
    background: var(--accent);
    clip-path: polygon(0 3px, 100% 0, 100% calc(100% - 3px), 0 100%);
}

.admin-nav-group {
    margin: var(--space-2) 0 4px;
    padding-left: 22px;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

.admin-back {
    margin: var(--space-2) var(--space-2) 0 22px;
    padding-top: var(--space-2);
    border-top: 1px solid var(--line-faint);
    color: var(--muted);
    font-size: 14px;
    text-decoration: none;
}

.admin-back:hover {
    color: var(--ink);
}

.admin-main {
    min-width: 0;
    max-width: 1280px;
    padding: var(--space-3) var(--space-3) var(--space-4);
}

.admin-main > h2,
.admin-main .admin-head h2 {
    font-size: 24px;
    line-height: 1.2;
}

.admin-main > h2 {
    margin-bottom: var(--space-2);
}

.admin-main .admin-head {
    align-items: flex-end;
    margin-bottom: var(--space-3);
}

.admin-lead {
    max-width: 72ch;
    margin: var(--space-1) 0 0;
    font-size: 15px;
}

.admin-head-tools {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: none;
}

.admin-stamp {
    font-size: 13px;
    white-space: nowrap;
}

.admin-note {
    margin-top: var(--space-3);
    font-size: 14px;
}

.admin-note a {
    color: var(--accent-text);
}

/* ---------- Administration: Zustand der Dienste ---------- */

.status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-2);
}

.status-tile {
    --state: var(--line-soft);
    display: grid;
    align-content: start;
    gap: var(--space-1);
    min-height: 196px;
    padding: 20px 22px;
    border: 1px solid var(--line-faint);
    border-top: 2px solid var(--state);
    background: var(--panel);
}

.status-tile.is-ok {
    --state: var(--accent);
}

.status-tile.is-warning {
    --state: var(--ink);
}

.status-tile.is-down {
    --state: var(--ink);
    border-style: dashed;
    border-top-style: solid;
    background: transparent;
}

.status-tile.is-off {
    --state: var(--line-faint);
    background: transparent;
}

.status-tile-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/* Zustandszeichen: schräges Parallelogramm. Voll bei bereit, Rahmen bei prüfen, durchgestrichen bei nicht erreichbar. */
.status-mark {
    --state: var(--line-soft);
    position: relative;
    flex: none;
    width: 16px;
    height: 10px;
    background: var(--state);
    clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}

.is-ok .status-mark {
    --state: var(--accent);
}

.is-warning .status-mark {
    --state: var(--ink);
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--state);
}

.is-down .status-mark {
    --state: var(--ink);
    background: linear-gradient(to bottom, transparent 40%, var(--state) 40%, var(--state) 60%, transparent 60%);
    box-shadow: inset 0 0 0 1px var(--state);
}

.is-off .status-mark {
    --state: var(--line-soft);
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--state);
}

.status-name {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 17px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.status-state {
    flex: none;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

.is-ok .status-state {
    color: var(--accent-text);
}

.is-warning .status-state,
.is-down .status-state {
    color: var(--ink);
}

.status-purpose {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.45;
}

.status-detail {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.status-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-1) var(--space-2);
    margin: auto 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--line-faint);
}

.status-facts:empty {
    display: none;
}

.status-facts > div {
    min-width: 0;
}

.status-facts > div.is-wide {
    grid-column: 1 / -1;
}

.status-facts dt {
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

.status-facts dd {
    margin: 2px 0 0;
    font-size: 14px;
}

.status-address {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Link zur Weboberfläche des Dienstes, öffnet in einem neuen Tab. */
.status-link {
    justify-self: start;
    margin-top: 2px;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent-text);
    text-decoration: none;
}

.status-link:hover {
    color: var(--ink);
}

/* Platzhalter, solange die erste Prüfung läuft. */
.status-tile.is-pending {
    border-top-color: var(--line-faint);
}

.status-tile.is-pending .status-mark,
.status-tile.is-pending .status-name {
    background: var(--line-faint);
    box-shadow: none;
}

.status-tile.is-pending .status-name {
    flex: 0 0 45%;
    height: 14px;
}

@media (prefers-reduced-motion: no-preference) {
    .status-tile.is-pending {
        animation: status-wait 1.4s ease-in-out infinite alternate;
    }
}

@keyframes status-wait {
    from {
        opacity: 0.55;
    }

    to {
        opacity: 1;
    }
}

/* ---------- Administration: Verbindungen der Dienste ---------- */

.service-list {
    display: grid;
    gap: var(--space-2);
}

.service-card {
    padding: 20px 22px 12px;
    border: 1px solid var(--line-faint);
    background: var(--panel);
}

.service-card.is-fixed {
    background: transparent;
    padding-bottom: 20px;
}

.service-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.service-head h3 {
    margin: 0 0 2px;
    font-size: 17px;
    line-height: 1.3;
}

.service-head p {
    margin: 0;
    font-size: 14px;
}

.service-source {
    flex: none;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

.service-fixed {
    margin: 0;
    max-width: 72ch;
    font-size: 14px;
    color: var(--muted);
}

.service-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-2);
}

.service-fields .field {
    min-width: 0;
}

.service-clear {
    margin: 4px 0 0;
    font-size: 14px;
}

.service-test {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: none;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

.service-test.is-ok {
    color: var(--accent-text);
}

.service-test.is-warning,
.service-test.is-down {
    color: var(--ink);
}

.service-test-detail {
    margin: 0 0 var(--space-1);
    padding: 8px 12px;
    border-left: 2px solid var(--line-soft);
    font-size: 14px;
    overflow-wrap: anywhere;
}

.service-actions {
    display: flex;
    justify-content: flex-end;
}

/* Speichern bleibt beim Scrollen unten sichtbar. */
.admin-savebar {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding: var(--space-2) 0;
    border-top: 1px solid var(--line-faint);
    background: var(--surface);
    font-size: 14px;
}

@media (max-width: 860px) {
    .admin-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Auf schmalen Bildschirmen liegt die Navigation als Leiste oben. */
    .admin-side {
        position: static;
        height: auto;
        grid-template-rows: none;
        grid-auto-flow: column;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        padding: 0;
        border-right: 0;
        border-bottom: 1px solid var(--line-faint);
        overflow: visible;
    }

    .admin-side-head,
    .admin-nav-group {
        display: none;
    }

    .admin-nav {
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        overflow-x: auto;
        padding: 0;
    }

    .admin-nav a {
        padding: 14px 14px;
        white-space: nowrap;
        font-size: 14px;
    }

    .admin-nav a.active::before {
        left: 14px;
        right: 14px;
        top: auto;
        bottom: 0;
        width: auto;
        height: 2px;
        clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
    }

    .admin-back {
        margin: 0;
        padding: 14px var(--space-2);
        border-top: 0;
        border-left: 1px solid var(--line-faint);
        white-space: nowrap;
    }

    .admin-main {
        padding: var(--space-2) var(--space-2) var(--space-3);
    }

    .admin-main .admin-head {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .service-fields {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Dateispeicher in anderen Bereichen ---------- */

.media-save {
    border: 0;
    background: none;
    padding: 0;
    margin-left: var(--space-1);
    color: var(--muted);
    font: inherit;
    font-size: 13px;
    text-decoration: underline;
    text-decoration-color: var(--line-soft);
    text-underline-offset: 4px;
    cursor: pointer;
}

.media-save:hover {
    color: var(--ink);
    text-decoration-color: var(--accent);
}

.media-save.is-block {
    display: block;
    margin: 4px 0 0;
    text-align: left;
}

.msg-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px var(--space-2);
}

.msg-actions .media-save {
    margin-left: 0;
}

.fs-path {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-bottom: var(--space-1);
}

.fs-list {
    display: grid;
    max-height: 46dvh;
    overflow-y: auto;
    border: 1px solid var(--line-faint);
}

.fs-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    border-bottom: 1px solid var(--line-faint);
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.fs-row:last-child {
    border-bottom: 0;
}

.fs-row:hover {
    background: var(--panel);
}

.fs-row.is-selected {
    background: var(--panel);
    box-shadow: inset 2px 0 0 var(--accent);
}

.fs-row.is-disabled {
    color: var(--muted);
    cursor: default;
}

.fs-row.is-disabled:hover {
    background: none;
}

.fs-row input[type="checkbox"] {
    flex: none;
    margin: 0;
    accent-color: var(--alpine-teal);
}

.fs-meta {
    margin-left: auto;
    flex: none;
    font-size: 13px;
}

.fs-empty {
    padding: var(--space-2);
    margin: 0;
}

@media (max-width: 720px) {
    .fs-meta {
        display: none;
    }
}

/* ---------- Antworten der KI ---------- */

.md {
    max-width: 74ch;
    overflow-wrap: anywhere;
    line-height: 1.62;
}

/* Diagramme bringen eine eigene Breite mit. Ohne min-width: 0 würde die Rasterspalte mitwachsen
   und auf schmalen Bildschirmen die ganze Antwort aus dem Bild schieben. */
.msg.is-assistant,
.md {
    min-width: 0;
}

.md > :first-child {
    margin-top: 0;
}

.md > :last-child {
    margin-bottom: 0;
}

.md p {
    margin: 0 0 14px;
}

.md h1,
.md h2,
.md h3,
.md h4,
.md h5,
.md h6 {
    position: relative;
    font-weight: 500;
    line-height: 1.25;
    margin: 26px 0 12px;
    text-wrap: balance;
}

.md h1 {
    font-size: 24px;
}

.md h2 {
    font-size: 20px;
}

.md h1,
.md h2 {
    padding-left: 16px;
}

.md h1::before,
.md h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.3em;
    bottom: 0.3em;
    width: 3px;
    background: var(--accent);
    clip-path: polygon(0 2px, 100% 0, 100% calc(100% - 2px), 0 100%);
}

.md h3 {
    font-size: 17px;
}

.md h4,
.md h5,
.md h6 {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

.md ul,
.md ol {
    margin: 0 0 14px;
    padding-left: 22px;
}

.md li {
    margin: 5px 0;
}

.md li > ul,
.md li > ol {
    margin: 4px 0 0;
}

.md li::marker {
    color: var(--accent-text);
}

.md ul.contains-task-list {
    list-style: none;
    padding-left: 2px;
}

.md .task-list-item input {
    margin: 0 10px 0 0;
    accent-color: var(--alpine-teal);
}

.md a {
    color: var(--ink);
    text-decoration-color: var(--accent);
    text-underline-offset: 3px;
}

.md strong {
    font-weight: 500;
}

.md del {
    color: var(--muted);
}

.md mark {
    background: color-mix(in srgb, var(--alpine-teal) 28%, transparent);
    color: var(--ink);
    padding: 0 3px;
}

.md blockquote {
    margin: 0 0 14px;
    padding: 10px 18px;
    border-left: 2px solid var(--accent);
    background: var(--panel);
    color: color-mix(in srgb, var(--ink) 82%, var(--muted));
}

.md blockquote > :last-child {
    margin-bottom: 0;
}

.md hr {
    border: 0;
    height: 1px;
    background: var(--line-soft);
    margin: 24px 0;
}

.md code {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.88em;
    letter-spacing: normal;
    padding: 1px 6px;
    background: var(--panel-raised);
    border: 1px solid var(--line-faint);
}

.md pre {
    position: relative;
    margin: 0 0 16px;
    padding: 36px 18px 16px;
    background: var(--panel);
    border: 1px solid var(--line-faint);
    border-left: 2px solid var(--accent);
    overflow-x: auto;
    font-size: 13.5px;
    line-height: 1.55;
}

.md pre code {
    padding: 0;
    background: none;
    border: 0;
    font-size: inherit;
    white-space: pre;
    display: block;
}

.md pre::before {
    content: attr(data-language);
    position: absolute;
    top: 9px;
    left: 18px;
    font-family: var(--font);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

.md-copy {
    position: absolute;
    top: 6px;
    right: 8px;
    padding: 3px 10px;
    border: 1px solid var(--line-soft);
    background: var(--surface);
    color: var(--muted);
    font: inherit;
    font-family: var(--font);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    opacity: 0;
    transition: opacity 120ms ease, color 120ms ease, border-color 120ms ease;
}

.md pre:hover .md-copy,
.md-copy:focus-visible {
    opacity: 1;
}

.md-copy:hover {
    color: var(--ink);
    border-color: var(--accent);
}

@media (hover: none) {
    .md-copy {
        opacity: 1;
    }
}

.md pre.md-diagram {
    padding: 28px 20px 20px;
    border-left-color: var(--line-faint);
    background: color-mix(in srgb, var(--ink) 1.5%, var(--surface));
    text-align: center;
    white-space: normal;
}

.md pre.md-diagram svg {
    max-width: 100%;
    height: auto;
}

.md pre.md-diagram-error {
    border-left-color: var(--ink);
}

.md pre.md-diagram-error::before {
    color: var(--ink);
}

.md table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.45;
}

.md th {
    text-align: left;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 8px 14px 8px 0;
    border-bottom: 1px solid var(--line-soft);
    white-space: nowrap;
}

.md td {
    padding: 9px 14px 9px 0;
    border-bottom: 1px solid var(--line-faint);
    vertical-align: top;
}

.md th[style*="right"],
.md td[style*="right"] {
    padding-left: 14px;
}

.md tbody tr:hover td {
    background: var(--panel);
}

.md img {
    display: block;
    max-width: 100%;
    margin: 6px 0 14px;
    border: 1px solid var(--line-faint);
}

.md .footnotes {
    margin-top: 20px;
    font-size: 13px;
    color: var(--muted);
}

.md .footnotes hr {
    margin: 12px 0;
}

.md.is-streaming > :last-child::after,
.md.is-streaming:empty::after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 1em;
    margin-left: 2px;
    vertical-align: text-bottom;
    background: var(--ink);
    animation: caret 1s steps(2, start) infinite;
}

/* Codefarben aus den Markenfarben */

.md .hljs-keyword,
.md .hljs-selector-tag,
.md .hljs-built_in,
.md .hljs-name,
.md .hljs-tag,
.md .hljs-operator {
    color: var(--accent-text);
}

.md .hljs-string,
.md .hljs-attr,
.md .hljs-template-tag,
.md .hljs-addition,
.md .hljs-regexp {
    color: color-mix(in srgb, var(--accent-text) 45%, var(--ink));
}

.md .hljs-comment,
.md .hljs-quote,
.md .hljs-meta,
.md .hljs-deletion {
    color: var(--muted);
    font-style: italic;
}

.md .hljs-number,
.md .hljs-literal,
.md .hljs-symbol,
.md .hljs-bullet {
    color: color-mix(in srgb, var(--accent-text) 70%, var(--ink));
}

.md .hljs-title,
.md .hljs-section,
.md .hljs-selector-id,
.md .hljs-selector-class {
    color: var(--ink);
    font-weight: 500;
}

.md .hljs-type,
.md .hljs-variable,
.md .hljs-params,
.md .hljs-property {
    color: color-mix(in srgb, var(--muted) 45%, var(--ink));
}

.md .hljs-emphasis {
    font-style: italic;
}

.md .hljs-strong {
    font-weight: 500;
}

/* ---------- Favoriten ---------- */

.composer-tools .btn-quiet[aria-pressed="true"] {
    color: var(--accent-text);
}

.fav-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 14px 16px 16px;
    border: 1px solid var(--line-soft);
    border-left: 2px solid var(--accent);
    background: var(--panel);
}

.fav-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fav-title,
.fav-label {
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

.fav-filter,
.fav-save input {
    min-width: 0;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--line-faint);
    border-radius: var(--radius-none);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    outline: none;
}

.fav-filter {
    flex: 1;
}

.fav-filter:focus,
.fav-save input:focus {
    border-color: var(--accent);
}

.fav-head .media-save {
    margin-left: 0;
    white-space: nowrap;
}

.fav-close {
    border: 0;
    background: none;
    color: var(--muted);
    font: inherit;
    padding: 4px 6px;
    cursor: pointer;
}

.fav-close:hover {
    color: var(--ink);
}

.fav-save {
    display: grid;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line-faint);
}

.fav-save-row {
    display: flex;
    gap: var(--space-1);
}

.fav-save-row input {
    flex: 1;
}

.fav-save-row .btn {
    min-height: 36px;
}

.fav-preview,
.fav-note {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.fav-list {
    display: grid;
    max-height: min(320px, 40dvh);
    overflow-y: auto;
    border: 1px solid var(--line-faint);
}

.fav-row {
    display: grid;
    gap: 2px;
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px solid var(--line-faint);
    background: none;
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.fav-row:last-child {
    border-bottom: 0;
}

.fav-row:hover,
.fav-row:focus-visible {
    background: var(--surface);
    box-shadow: inset 2px 0 0 var(--accent);
    outline: none;
}

.fav-row-title {
    font-size: 14px;
}

.fav-row-text {
    overflow: hidden;
    color: var(--muted);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Verwaltung in den Einstellungen */

.fav-items {
    display: grid;
    gap: 6px;
}

.fav-item {
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid var(--line-faint);
}

.fav-item.is-editing {
    border-color: var(--accent);
    background: var(--panel);
}

.fav-item-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px var(--space-2);
}

.fav-item-title {
    flex: 1;
    min-width: 12ch;
    color: var(--ink);
}

.fav-item-meta {
    color: var(--muted);
    font-size: 13px;
}

.fav-item-text {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 7.5em;
    overflow: hidden;
}

.fav-item-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px var(--space-2);
}

.fav-item-actions .media-save {
    margin-left: 0;
}

.fav-item-actions .is-danger {
    color: var(--ink);
    text-decoration-color: var(--ink);
}

@container chat (max-width: 720px) {
    .fav-save-row {
        flex-direction: column;
    }
}

/* ---------- Gespeicherte Chats ---------- */

.chat-body.has-history {
    grid-template-columns: 272px minmax(0, 1fr);
}

.history-toggle {
    display: none;
}

.history {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: var(--space-2);
    min-height: 0;
    padding: var(--space-2) var(--space-2) 0;
    border-right: 1px solid var(--line-faint);
}

.history-head {
    display: grid;
    gap: var(--space-1);
}

.history-filter {
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--line-faint);
    border-radius: var(--radius-none);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    outline: none;
}

.history-filter:focus {
    border-color: var(--accent);
}

.history-list {
    display: grid;
    align-content: start;
    gap: 2px;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: var(--space-3);
}

.history-group {
    padding: 14px 10px 6px;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}

.history-group:first-child {
    padding-top: 2px;
}

.history-note {
    margin: 0;
    padding: 4px 10px;
    color: var(--muted);
    font-size: 13px;
}

.history-item {
    display: grid;
}

.history-item.is-active {
    background: var(--panel);
    box-shadow: inset 2px 0 0 var(--accent);
}

.history-link {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    padding: 8px 10px;
    border: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.history-link:hover:not(:disabled) {
    background: var(--panel);
}

.history-link:disabled {
    cursor: default;
}

.history-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-time {
    flex: none;
    color: var(--muted);
    font-size: 12px;
}

.history-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px var(--space-2);
    padding: 0 10px 10px;
}

.history-actions .media-save {
    margin-left: 0;
    font-size: 12px;
}

.history-actions .history-note {
    padding: 0;
    font-size: 12px;
}

.history-actions .is-danger {
    color: var(--ink);
    text-decoration-color: var(--ink);
}

.history-rename {
    display: grid;
    gap: 8px;
    padding: 8px 10px 0;
}

.history-rename input {
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid var(--accent);
    border-radius: var(--radius-none);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    outline: none;
}

.history-rename .history-actions {
    padding: 0 0 10px;
}

/* Bis 1280 px Breite des Chats liegt die Liste über dem Chat und öffnet über «Chats» im Kopf. */
@container chat (max-width: 1280px) {
    .chat-body.has-history {
        position: relative;
        grid-template-columns: minmax(0, 1fr);
    }

    .history {
        display: none;
        position: absolute;
        inset: 0 auto 0 0;
        width: min(320px, 100%);
        z-index: 16;
        background: var(--panel-raised);
        border-right: 1px solid var(--line-soft);
    }

    .chat-body.history-open .history {
        display: grid;
    }

    .history-toggle {
        display: inline-flex;
    }
}

@container chat (max-width: 1080px) {
    .chat-body.has-history {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0ms !important;
        animation-duration: 0ms !important;
    }
}