/* ============================================================================
   Einstellungsdialog — Neufassung nach STIL.md
   ============================================================================
   Die alte Fassung steht in `theme.css` (@layer legacy) und in
   `components.css` (@layer components). Beide bleiben unberuehrt: dieses
   Blatt liegt in `@layer channels` und gewinnt damit gegen beide, ohne
   dass irgendwo `!important` noetig waere.

   Vorbild ist die Bauweise des Claude-Dialogs, nicht sein Aussehen:
   linke Leiste mit Gruppenueberschrift, rechts eine Spalte flacher
   Zeilen — Beschriftung links, Bedienung rechts. Was hier NICHT
   uebernommen wird: Rahmen um jede Einstellung (STIL R3), Versalien
   ueber Abschnitten (R4), Farbe als Marke (R2).
   ========================================================================= */
@layer channels {
    .settings-overlay:not(.show) { visibility: hidden; }

    /* ── Der Dialog selbst ───────────────────────────────────────────── */
    .settings-overlay {
        background: var(--scrim);
        padding: var(--space-5);
        z-index: var(--z-modal);
        transition: opacity var(--dur-fast) var(--ease-standard);
    }

    .settings-shell,
    .alert-settings-modal {
        width: min(1040px, 100%);
        height: min(720px, calc(100vh - 2 * var(--space-5)));
        background: var(--surface-panel);
        /* R3: der Dialog steht durch seine Flaeche vor dem Grund. Die eine
           Linie am Rand haelt ihn zusammen, wenn dahinter zufaellig eine
           gleich helle Flaeche liegt. */
        border: 1px solid var(--line);
        border-radius: var(--radius-panel);
        /* Kein eigener Schlagschatten: das Projekt setzt --shadow-* auf
           `none` (R3 — die Flaeche ordnet). Der Dialog trennt sich ueber
           seine Flaeche und den abgedunkelten Grund dahinter. */
        box-shadow: var(--shadow-lg);
        transform: translateY(4px) scale(0.99);
        transition: transform var(--dur-base) var(--ease-out);
    }

    /* ── Kopfzeile ───────────────────────────────────────────────────── */
    .settings-shell-header {
        padding: var(--space-4) var(--space-5);
        border-bottom: 1px solid var(--line-subtle);
    }

    .settings-header-icon {
        inline-size: var(--icon-nav);
        block-size: var(--icon-nav);
        color: var(--ink-secondary);
    }

    .settings-header-title {
        font-family: var(--font-ui);
        font-size: var(--text-lg);
        font-weight: var(--font-weight-medium);
        letter-spacing: normal;
        text-transform: none;
        color: var(--ink-primary);
    }

    .settings-close-btn {
        inline-size: 32px;
        block-size: 32px;
        border: none;
        background: transparent;
        border-radius: var(--radius-control);
        color: var(--ink-muted);
        transition: background var(--dur-instant) var(--ease-standard),
                    color var(--dur-instant) var(--ease-standard);
    }

    .settings-close-btn:hover {
        background: var(--surface-hover);
        border-color: transparent;
        color: var(--ink-primary);
    }

    .settings-close-btn .icon {
        inline-size: var(--icon-nav);
        block-size: var(--icon-nav);
    }

    /* ── Linke Leiste ────────────────────────────────────────────────
       Der Grund ist eine Stufe DUNKLER als der Inhalt (canvas #111 gegen
       panel #151515) — dieselbe Beziehung wie Kanalliste zu Kanalinhalt
       in der Shell. R1: 1,8 OKLCH-Punkte. */
    .settings-nav {
        inline-size: 232px;
        flex: 0 0 232px;
        gap: 1px;
        padding: var(--space-4) var(--space-3);
        background: var(--surface-canvas);
        border-right: 1px solid var(--line-subtle);
    }

    /* Gruppenueberschrift der Leiste. R4 verbietet Versalien-Marken,
       also steht sie klein und in der zweiten Schriftstufe. */
    .settings-nav-group {
        padding: var(--space-2) var(--space-3) var(--space-1);
        font-family: var(--font-ui);
        font-size: var(--text-2xs);
        font-weight: var(--font-weight-regular);
        letter-spacing: normal;
        text-transform: none;
        color: var(--ink-muted);
    }

    .settings-nav-item {
        gap: var(--space-3);
        min-block-size: var(--row-h);
        padding: 0 var(--space-3);
        border-radius: var(--radius-control);
        background: transparent;
        font-family: var(--font-ui);
        font-size: var(--text-sm);
        font-weight: var(--font-weight-regular);
        letter-spacing: normal;
        text-transform: none;
        color: var(--ink-secondary);
        box-shadow: none;
        transition: background var(--dur-instant) var(--ease-standard),
                    color var(--dur-instant) var(--ease-standard);
    }

    .settings-nav-item .icon {
        inline-size: var(--icon-nav);
        block-size: var(--icon-nav);
        flex: 0 0 auto;
    }

    .settings-nav-item:hover {
        background: var(--surface-hover);
        color: var(--ink-primary);
    }

    /* Der aktive Eintrag ist ein ZUSTAND, keine neue Ebene — deshalb
       `--control-selected` und kein Balken an der Kante. Die alte Fassung
       setzte zusaetzlich `font-weight: 600`; das faellt weg, weil Fettdruck
       nach R4 keine Hierarchie ersetzt. */
    .settings-nav-item.active {
        background: var(--control-selected);
        color: var(--ink-primary);
        font-weight: var(--font-weight-medium);
        box-shadow: none;
    }

    /* ── Inhaltsbereich ──────────────────────────────────────────────── */
    .settings-content {
        background: var(--surface-panel);
    }

    .settings-panel {
        padding: var(--space-6) var(--space-6) var(--space-7);
        max-inline-size: 780px;
    }

    .settings-panel-head {
        margin-bottom: var(--space-5);
        padding-bottom: 0;
        border-bottom: none;
    }

    .settings-panel-head h2 {
        font-family: var(--font-ui);
        font-size: var(--text-lg);
        font-weight: var(--font-weight-medium);
        letter-spacing: normal;
        text-transform: none;
        color: var(--ink-primary);
    }

    .settings-panel-head p {
        margin-top: var(--space-1);
        font-family: var(--font-ui);
        font-size: var(--text-xs);
        color: var(--ink-muted);
    }
}

/* ==========================================================================
   Die Liste — Zeilen statt Karten
   ========================================================================== */

@layer channels {

    /* ── Ein Abschnitt ist eine ZEILE, keine Karte ───────────────────
       R3: „Rahmen um jede Karte sind verboten." Die alte Fassung gab
       jedem Abschnitt Rahmen, Radius und eine eigene Flaeche — bei zwei
       Einstellungen ergab das zwei Kaesten in einem Kasten. Jetzt:
       Beschriftung links, Bedienung rechts, dazwischen nichts;
       getrennt wird durch eine Haarlinie INNERHALB der Flaeche. */
    .settings-general-section {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
        margin-bottom: 0;
        padding: var(--space-4) 0;
        border: none;
        border-bottom: 1px solid var(--line-subtle);
        border-radius: 0;
        background: transparent;
    }

    .settings-general-section:last-of-type {
        border-bottom: none;
    }

    .settings-field-head {
        gap: var(--space-1);
        margin-bottom: 0;
        min-inline-size: 0;
        flex: 1 1 260px;
    }

    .settings-field-title {
        gap: var(--space-2);
        font-family: var(--font-ui);
        font-size: var(--text-sm);
        font-weight: var(--font-weight-medium);
        letter-spacing: normal;
        text-transform: none;
        color: var(--ink-primary);
    }

    /* R2: der Akzent ist der Primaerknopf, keine Icon-Farbe. Das Icon
       einer Beschriftung steht in der Schriftfarbe der Nebenzeile. */
    .settings-field-title .icon {
        inline-size: var(--icon-nav);
        block-size: var(--icon-nav);
        color: var(--ink-muted);
    }

    .settings-field-sub {
        font-family: var(--font-ui);
        font-size: var(--text-2xs);
        color: var(--ink-muted);
    }

    /* Sprache und Erscheinungsbild benutzen jetzt `.set-seg` (siehe
       unten). Die frueheren Regeln fuer `.settings-lang-card`,
       `.settings-theme-card`, den Haken und die Theme-Vorschau standen
       hier und sind mit ihrem Markup entfallen. */

    /* ── Platzhalter ─────────────────────────────────────────────────── */
    /* „Wird bald verfuegbar sein" stand erst in einem gestrichelten, dann in
       einem gefuellten Kasten von 130 px Hoehe — eine leere Flaeche, die
       aussieht wie eine Einstellung und keine ist. Ein Satz braucht keine
       Karte: er steht als letzte Zeile der Liste, klein und ruhig (R3). */
    .settings-placeholder {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: var(--space-2);
        margin-top: var(--space-4);
        padding: 0;
        border: none;
        border-radius: 0;
        background: transparent;
        font-family: var(--font-ui);
        font-size: var(--text-xs);
        color: var(--ink-muted);
    }

    .settings-placeholder .icon {
        inline-size: var(--icon-inline);
        block-size: var(--icon-inline);
        opacity: 1;
        color: var(--ink-muted);
    }

    /* ── Reiter „APIs & AI" ──────────────────────────────────────────
       Der Sicherheitshinweis stand auf gruenem Verlauf. R2: Gruen ist
       Finanzsignal, nicht Markenfarbe — der Hinweis ist eine ruhige
       Flaeche mit Text. */
    .api-settings-security {
        gap: var(--space-3);
        margin-bottom: var(--space-5);
        padding: var(--space-3) var(--space-4);
        border: none;
        border-radius: var(--radius-panel);
        background: var(--surface-raised);
        font-family: var(--font-ui);
        font-size: var(--text-2xs);
        line-height: 1.5;
        color: var(--ink-muted);
    }

    .api-settings-security .icon {
        inline-size: var(--icon-nav);
        block-size: var(--icon-nav);
        flex: 0 0 auto;
        color: var(--ink-muted);
    }

    .api-settings-security strong {
        display: block;
        font-weight: var(--font-weight-medium);
        color: var(--ink-secondary);
    }

    .api-settings-message {
        font-family: var(--font-ui);
        font-size: var(--text-2xs);
        color: var(--ink-muted);
    }

    /* Zustandsfarben bleiben Signale — aber ueber Tokens, nicht ueber
       die frueheren Festwerten #44d18c / #ff7b7b. */
    .api-settings-message[data-kind="success"] { color: var(--signal-up); }
    .api-settings-message[data-kind="error"]   { color: var(--signal-down); }
    .api-settings-message[data-kind="info"]    { color: var(--ink-secondary); }

    /* Eine Anbietergruppe ist eine `.set-group` mit anderem Namen. */
    .api-settings-group {
        display: block;
        margin-bottom: var(--space-6);
        padding: 0;
        border: none;
        border-radius: 0;
        background: transparent;
    }

    .api-settings-group-head {
        display: flex;
        align-items: baseline;
        gap: var(--space-2);
        padding: 0 0 var(--space-1);
        background: transparent;
        border-bottom: none;
        font-family: var(--font-ui);
        font-size: var(--text-sm);
        font-weight: var(--font-weight-medium);
        letter-spacing: normal;
        text-transform: none;
        color: var(--ink-primary);
    }

    .api-settings-group-head small {
        font-family: var(--font-data);
        font-size: var(--text-2xs);
        color: var(--ink-muted);
    }

    /* Die Zeile: links Name und Zustand, rechts Feld und Handlungen.
       Vorher lagen vier Spalten nebeneinander und das Feld war so breit
       wie der Name kurz war. */
    .api-secret-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: var(--space-4);
        padding: var(--space-3) 0;
        border: none;
        border-bottom: 1px solid var(--line-subtle);
        background: transparent;
    }

    .api-settings-group .api-secret-row:last-child {
        border-bottom: none;
    }

    .api-secret-meta {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-1);
        flex: 1 1 220px;
        min-inline-size: 0;
    }

    .api-secret-meta strong {
        font-family: var(--font-ui);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-regular);
        color: var(--ink-primary);
    }

    .api-secret-status {
        display: flex;
        justify-content: flex-start;
        font-size: var(--text-2xs);
        color: var(--ink-muted);
    }

    .api-secret-input {
        flex: 1 1 260px;
        min-inline-size: 0;
        min-block-size: 34px;
    }

    .api-secret-actions {
        display: flex;
        gap: var(--space-2);
        flex: 0 0 auto;
    }

    .api-secret-actions button {
        display: inline-grid;
        place-items: center;
        inline-size: 34px;
        block-size: 34px;
        padding: 0;
    }

    .api-secret-actions .icon {
        inline-size: var(--icon-md);
        block-size: var(--icon-md);
    }

    .api-secret-actions button:disabled {
        opacity: 0.45;
        cursor: not-allowed;
    }

    /* Die Zustandsmarke ist eine Beschriftung, keine Ampel-Pille. */
    .api-secret-pill {
        border-radius: var(--radius-chip);
        border: 1px solid var(--line);
        background: transparent;
        font-family: var(--font-ui);
        font-size: var(--text-2xs);
        letter-spacing: normal;
        text-transform: none;
        color: var(--ink-muted);
    }

    .api-secret-pill.ready {
        border-color: var(--signal-up-line, var(--line));
        background: var(--signal-up-surface, transparent);
        color: var(--signal-up);
    }

    .api-secret-pill.missing {
        border-color: var(--line);
        background: transparent;
        color: var(--ink-muted);
    }

    .api-secret-pill.env {
        border-color: var(--line);
        background: transparent;
        color: var(--ink-secondary);
    }

    /* Ein Eingabefeld ist die naechste Flaeche, kein umrandeter Kasten. */
    .api-secret-input {
        border: 1px solid var(--line);
        border-radius: var(--radius-control);
        background: var(--surface-raised);
        font-family: var(--font-data);
        font-size: var(--text-xs);
        color: var(--ink-primary);
    }

    .api-secret-input::placeholder { color: var(--ink-muted); }

    .api-secret-input:focus {
        border-color: var(--line-focus);
        outline: none;
    }

    .api-secret-actions button {
        border-radius: var(--radius-control);
        font-family: var(--font-ui);
        font-size: var(--text-2xs);
        font-weight: var(--font-weight-medium);
        letter-spacing: normal;
        text-transform: none;
    }

    /* Beide Knoepfe sind zweitrangig. Der Akzent ist EINE Handlung je
       Ansicht — bei zehn Key-Zeilen waere er zehnmal da und damit kein
       Akzent mehr. */
    .api-secret-save,
    .api-secret-delete {
        border: 1px solid var(--line);
        background: transparent;
        color: var(--ink-secondary);
    }

    .api-secret-save:hover:not(:disabled),
    .api-secret-delete:hover:not(:disabled) {
        border-color: var(--line-strong);
        background: var(--surface-hover);
        color: var(--ink-primary);
    }


    /* ── Reiter „Trading Alarme" ─────────────────────────────────────
       Hier standen sieben umrandete Karten untereinander. R3 laesst nur
       eine Ebene zu: die Karte ist die naechste Flaeche, ohne Rahmen,
       und die Karten liegen nicht ineinander. */
    /* Die frueheren `.alert-settings-card`-Regeln standen hier. Sie sind
       mit dem Karten-Markup entfallen — der Reiter benutzt jetzt
       `.set-group` und `.set-row`. */

    .alert-settings-message[data-kind="error"] {
        color: var(--signal-down);
        border-color: var(--signal-down-line);
        background: var(--signal-down-surface);
    }

    .alert-settings-message[data-kind="success"] {
        color: var(--signal-up);
        border-color: var(--signal-up-line);
        background: var(--signal-up-surface);
    }

    .alert-settings-message[data-kind="info"] { color: var(--ink-secondary); }

    /* Der Schalter: die Bahn ist eine Flaeche, der aktive Zustand der
       Akzent — nie Gruen (R2). */
    .alert-toggle-v2__track {
        border: 1px solid var(--line);
        background: var(--surface-canvas);
    }

    .alert-toggle-v2__thumb {
        background: var(--ink-muted);
    }

    .alert-toggle-v2 input:checked + .alert-toggle-v2__track {
        border-color: transparent;
        background: var(--accent);
    }

    .alert-toggle-v2 input:checked + .alert-toggle-v2__track .alert-toggle-v2__thumb {
        background: var(--accent-ink);
    }

    .alert-toggle-v2 input:focus-visible + .alert-toggle-v2__track {
        outline: 2px solid var(--line-focus);
        outline-offset: 2px;
    }

    .alert-service-label,
    .alert-input-group__label {
        font-family: var(--font-ui);
        font-size: var(--text-2xs);
        font-weight: var(--font-weight-regular);
        letter-spacing: normal;
        text-transform: none;
        color: var(--ink-muted);
    }

    /* Der Behaelter der Marken hatte selbst eine Flaeche und sah dadurch
       aus wie ein Eingabefeld. Er ist nur eine Reihe. */
    .alert-service-chips {
        background: transparent;
        border: none;
        padding: 0;
    }

    .alert-service-chip {
        border: 1px solid var(--line);
        border-radius: var(--radius-chip);
        background: transparent;
        font-family: var(--font-ui);
        font-size: var(--text-2xs);
        letter-spacing: normal;
        text-transform: none;
        color: var(--ink-secondary);
    }

    .alert-service-chip[data-state="ready"] {
        border-color: var(--signal-up-line);
        background: var(--signal-up-surface);
        color: var(--signal-up);
    }

    .alert-service-chip[data-state="missing"] {
        border-color: var(--line);
        background: transparent;
        color: var(--ink-muted);
    }

    /* Versandart: Karten ohne Rahmen, Wahl als Zustandsflaeche. */
    .alert-mode-card-v2__inner {
        border: 1px solid transparent;
        border-radius: var(--radius-control);
        background: var(--surface-raised);
    }

    .alert-mode-card-v2:hover .alert-mode-card-v2__inner {
        border-color: transparent;
        background: var(--surface-hover);
    }

    .alert-mode-card-v2:has(input:checked) .alert-mode-card-v2__inner {
        border-color: var(--line-strong);
        background: var(--control-selected);
    }

    .alert-mode-card-v2__radio {
        border: 1px solid var(--line-strong);
        background: transparent;
    }

    .alert-mode-card-v2__radio::after { background: var(--ink-primary); }

    .alert-mode-card-v2:has(input:checked) .alert-mode-card-v2__radio {
        border-color: var(--ink-primary);
        background: transparent;
    }

    .alert-mode-card-v2__icon {
        border: none;
        background: transparent;
        color: var(--ink-muted);
    }

    .alert-mode-card-v2:hover .alert-mode-card-v2__icon,
    .alert-mode-card-v2:has(input:checked) .alert-mode-card-v2__icon {
        background: transparent;
        color: var(--ink-primary);
    }

    .alert-mode-card-v2__label strong {
        font-family: var(--font-ui);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-medium);
        color: var(--ink-secondary);
    }

    .alert-mode-card-v2__label small {
        font-family: var(--font-ui);
        font-size: var(--text-2xs);
        color: var(--ink-muted);
    }

    .alert-mode-card-v2:has(input:checked) .alert-mode-card-v2__label strong {
        color: var(--ink-primary);
    }

    .alert-input-group__wrap input,
    .alert-input-group__wrap textarea {
        border: 1px solid var(--line);
        border-radius: var(--radius-control);
        background: var(--surface-raised);
        font-family: var(--font-ui);
        font-size: var(--text-xs);
        color: var(--ink-primary);
    }

    .alert-input-group__wrap input::placeholder,
    .alert-input-group__wrap textarea::placeholder { color: var(--ink-muted); }

    .alert-input-group__wrap input:focus,
    .alert-input-group__wrap textarea:focus {
        border-color: var(--line-focus);
        outline: none;
    }

    /* Der Knopf am Ende eines Feldes — gleiche Hoehe wie `.set-field`. */
    .alert-input-action {
        inline-size: 36px;
        block-size: 36px;
        flex: 0 0 auto;
        border: 1px solid var(--line);
        border-radius: var(--radius-control);
        background: var(--surface-raised);
        color: var(--ink-secondary);
    }

    .alert-input-action:hover {
        border-color: var(--line-strong);
        background: var(--surface-hover);
        color: var(--ink-primary);
    }

    .alert-input-action .icon {
        inline-size: var(--icon-md);
        block-size: var(--icon-md);
    }

    /* Die Handlungsleiste steht am Ende des Reiters, rechtsbuendig,
       ohne trennende Linie — die Knoepfe tragen sich selbst. */
    .alert-settings-actions-v2 {
        display: flex;
        justify-content: flex-end;
        gap: var(--space-2);
        margin-top: var(--space-5);
        padding-top: 0;
        border-top: none;
    }

    .alert-btn-v2 {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        min-block-size: 34px;
        padding: 0 var(--space-4);
        border-radius: var(--radius-control);
        font-family: var(--font-ui);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-medium);
        letter-spacing: normal;
        text-transform: none;
    }

    .alert-btn-v2 .icon {
        inline-size: var(--icon-md);
        block-size: var(--icon-md);
    }

    /* `display: inline-flex` schlaegt das `hidden`-Attribut — push.js
       versteckt den Erlaubnis-Knopf darueber. Ohne diese Zeile stand er
       auch dann da, wenn die Erlaubnis schon erteilt war. */
    .alert-btn-v2[hidden] {
        display: none;
    }

    .alert-btn-v2--primary {
        border: 1px solid transparent;
        background: var(--accent);
        color: var(--accent-ink);
    }

    .alert-btn-v2--primary:hover {
        background: var(--accent-hover);
        color: var(--accent-ink);
    }

    .alert-btn-v2--secondary {
        border: 1px solid var(--line);
        background: transparent;
        color: var(--ink-secondary);
    }

    .alert-btn-v2--secondary:hover {
        border-color: var(--line-strong);
        background: var(--surface-hover);
        color: var(--ink-primary);
    }

    .alert-history-accordion {
        border: none;
        border-radius: var(--radius-panel);
        background: var(--surface-raised);
    }

    .alert-history-accordion:hover,
    .alert-history-accordion[open] {
        border-color: transparent;
        background: var(--surface-raised);
    }

    /* ================================================================
       Bausteine des Dialogs — EIN Satz fuer alle vier Reiter
       ================================================================
       Bis hierher hatte jeder Reiter seine eigene Bauweise: „Allgemein"
       Abschnitte, „Alarme" Karten, „APIs" Zeilen. Das war der Grund,
       warum der Dialog in jedem Reiter anders aussah. Ab hier gibt es
       drei Dinge und sonst nichts:

         .set-group  — eine Gruppe mit Ueberschrift
         .set-row    — eine Zeile: Beschriftung links, Bedienung rechts
         .set-stack  — eine Zeile, deren Bedienung unter der Beschriftung
                       steht (Eingabefeld, Textblock — alles Breite)

       Die Trennung ist eine Haarlinie INNERHALB der Flaeche (R3), kein
       Rahmen. Gruppen tragen keine eigene Flaeche. */
    .set-group {
        margin-bottom: var(--space-6);
    }

    .set-group:last-child {
        margin-bottom: 0;
    }

    .set-group-title {
        margin: 0 0 var(--space-1);
        font-family: var(--font-ui);
        font-size: var(--text-sm);
        font-weight: var(--font-weight-medium);
        letter-spacing: normal;
        text-transform: none;
        color: var(--ink-primary);
    }

    .set-row,
    .set-stack {
        display: flex;
        gap: var(--space-4);
        padding: var(--space-4) 0;
        border-bottom: 1px solid var(--line-subtle);
    }

    .set-row {
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        min-block-size: var(--row-h);
    }

    .set-stack {
        flex-direction: column;
        gap: var(--space-2);
        align-items: stretch;
    }

    .set-group > .set-row:last-child,
    .set-group > .set-stack:last-child {
        border-bottom: none;
    }

    .set-label {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
        min-inline-size: 0;
        flex: 1 1 280px;
    }

    .set-label > span:first-child,
    .set-label-title {
        font-family: var(--font-ui);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-regular);
        color: var(--ink-primary);
    }

    .set-label-desc {
        font-family: var(--font-ui);
        font-size: var(--text-2xs);
        line-height: 1.45;
        color: var(--ink-muted);
        max-inline-size: 60ch;
    }

    /* In der gestapelten Zeile ist die Hauptachse senkrecht — dort wuerde
       `flex-basis: 280px` aus `.set-label` zur HOEHE und risse 280 px Luft
       zwischen Beschriftung und Feld. Gemessen: 275 px Loch. */
    .set-stack > .set-label {
        flex: 0 0 auto;
    }

    .set-control {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        flex: 0 0 auto;
    }

    /* ── Umschalter (zwei bis vier gleichwertige Moeglichkeiten) ─────
       Die Bahn ist die naechste Flaeche, die Wahl ein Zustand. Die
       Segmente sind gleich hoch wie die Bahn minus dem Rand — genau
       hier klemmte die erste Fassung: 4 px Innenabstand auf 32 px
       Segment ergaben einen Kasten, der neben der Zeile schwebte. */
    .set-seg {
        display: inline-flex;
        gap: 2px;
        padding: 2px;
        border-radius: var(--radius-control);
        background: var(--surface-raised);
    }

    .set-seg-item {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        min-block-size: 28px;
        padding: 0 var(--space-3);
        border: none;
        border-radius: var(--radius-chip);
        background: transparent;
        font-family: var(--font-ui);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-regular);
        letter-spacing: normal;
        text-transform: none;
        color: var(--ink-muted);
        cursor: pointer;
        white-space: nowrap;
        transition: background var(--dur-instant) var(--ease-standard),
                    color var(--dur-instant) var(--ease-standard);
    }

    .set-seg-item .icon {
        inline-size: var(--icon-md);
        block-size: var(--icon-md);
    }

    .set-seg-item:hover {
        color: var(--ink-primary);
    }

    .set-seg-item.is-selected,
    .set-seg-item:has(input:checked) {
        background: var(--control-selected);
        color: var(--ink-primary);
    }

    .set-seg-item input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
        inline-size: 0;
        block-size: 0;
    }

    .set-seg-item:focus-within {
        outline: 2px solid var(--line-focus);
        outline-offset: 1px;
    }

    /* ── Eingabefeld in einer Zeile ─────────────────────────────────── */
    .set-field {
        inline-size: 100%;
        min-block-size: 36px;
        padding: 0 var(--space-3);
        border: 1px solid var(--line);
        border-radius: var(--radius-control);
        background: var(--surface-raised);
        font-family: var(--font-ui);
        font-size: var(--text-xs);
        color: var(--ink-primary);
    }

    textarea.set-field {
        padding-block: var(--space-2);
        font-family: var(--font-data);
        line-height: 1.5;
        resize: vertical;
    }

    .set-field::placeholder { color: var(--ink-muted); }

    .set-field:focus {
        border-color: var(--line-focus);
        outline: none;
    }

    .set-field[readonly] {
        color: var(--ink-secondary);
    }

    .set-field-wrap {
        display: flex;
        gap: var(--space-2);
        align-items: stretch;
    }
}

@layer channels {
    @media (max-width: 800px) {
        .settings-overlay { padding: 8px; }
        .settings-shell, .alert-settings-modal { width: 100%; height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); }
        .settings-shell-body { flex-direction: column; min-height: 0; }
        .settings-nav { display: flex; flex-direction: row; flex: 0 0 auto; width: 100%; inline-size: 100%; overflow-x: auto; padding: 8px; border: 0; }
        .settings-nav-group { display: none; }
        .settings-nav-item { flex: 0 0 auto; min-height: 44px; width: auto; padding-inline: 12px; }
        .settings-nav-item span { display: inline; }
        .settings-content { min-height: 0; overflow-y: auto; }
        .settings-panel { padding: 16px; }
        .settings-row { flex-wrap: wrap; gap: 12px; }
        .settings-close-btn { min-width: 44px; min-height: 44px; }
        .settings-shell-header { padding: 8px 12px; }
        .settings-panel :is(input, select, textarea) { max-width: 100%; font-size: 16px; }
    }
}

/* ── Reiter „AI-Modelle" ─────────────────────────────────────────────
   Eine Zeile je Modell in der bewaehrten `.set-row`-Form: Motiv,
   Statuspunkt und Ping in der Beschriftung, Fallback-Auswahl als
   Bedienelement rechts. Zahlen stehen in `--font-data`, wie es die
   Messregeln fuer Zaehlspalten verlangen. */
@layer channels {
    .ai-models-message {
        margin-block-end: var(--space-3);
        padding: var(--space-2) var(--space-3);
        border: 1px solid var(--line-subtle);
        border-radius: var(--radius-control);
        color: var(--ink-secondary);
        font-size: var(--text-xs);
    }

    .ai-models-message:empty { display: none; }

    .ai-models-message[data-kind="error"] {
        color: var(--signal-down);
        border-color: var(--signal-down-line);
        background: var(--signal-down-surface);
    }

    .ai-models-message[data-kind="success"] {
        color: var(--signal-up);
        border-color: var(--signal-up-line);
        background: var(--signal-up-surface);
    }

    .ai-models-empty {
        padding-block: var(--space-3);
        color: var(--ink-muted);
        font-size: var(--text-xs);
    }

    .ai-models-title {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        flex-wrap: wrap;
    }

    .ai-models-icon {
        inline-size: 18px;
        block-size: 18px;
        color: var(--ink-secondary);
        flex: none;
    }

    .ai-models-ping {
        margin-inline-start: auto;
        color: var(--ink-secondary);
        font-family: var(--font-data);
        font-size: var(--text-xs);
        font-variant-numeric: tabular-nums;
    }

    .ai-models-control {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-1);
        min-inline-size: 190px;
    }

    .ai-models-select-label {
        color: var(--ink-muted);
        font-size: var(--text-2xs);
    }

    .ai-models-select { inline-size: 100%; }

    /* Kopf mit Refresh-Knopf rechts; der Knopf traegt die Form des Schliessen-X. */
    .ai-models-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--space-3);
    }

    .ai-models-refresh-btn { flex: none; }
    .ai-models-refresh-btn:disabled { cursor: default; }
    .ai-models-refresh-btn.is-busy .icon { animation: ui-spin 0.9s linear infinite; }

    .ai-models-control-row {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        inline-size: 100%;
    }

    /* Fallback-Auswahl: eigener Ausloeser statt nativem <select>. */
    .ai-models-select {
        flex: 1;
        min-inline-size: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-2);
        text-align: start;
        cursor: pointer;
    }

    .ai-models-select[aria-expanded="true"] { border-color: var(--line-focus); }

    .ai-models-select-value {
        min-inline-size: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ai-models-select-caret {
        inline-size: 14px;
        block-size: 14px;
        flex: none;
        color: var(--ink-muted);
        transition: transform var(--dur-fast) var(--ease-out);
    }

    .ai-models-select[aria-expanded="true"] .ai-models-select-caret { transform: rotate(180deg); }

    @media (hover: hover) and (pointer: fine) {
        .ai-models-select:hover { background: var(--surface-hover); }
    }

    .ai-models-menu:not([popover]) {
        position: absolute;
        display: none;
        max-block-size: 260px;
        overflow-y: auto;
    }

    .ai-models-menu:not([popover]).is-open { display: block; }

    .ai-models-menu[popover] {
        position: fixed;
        inset: auto;
        margin: 0;
        max-block-size: min(360px, calc(100dvh - 24px));
        overflow-y: auto;
    }

    .ai-models-menu {
        padding: 6px;
        border: 1px solid var(--line);
    }

    .ai-models-menu-item {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding: 9px 10px;
        font-size: var(--text-xs);
    }

    .ai-models-menu-item > span {
        min-inline-size: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ai-models-menu-brand {
        inline-size: 16px;
        block-size: 16px;
        flex: none;
        color: var(--ink-secondary);
    }

    .ai-models-menu-check {
        margin-inline-start: auto;
        inline-size: 14px;
        block-size: 14px;
        flex: none;
        color: var(--signal-up);
        opacity: 0;
    }

    .ai-models-menu-item[aria-selected="true"] > .ai-models-menu-check { opacity: 1; }

    .ai-models-hide-btn { flex: none; }
    .ai-models-hide-btn[aria-pressed="true"] { color: var(--ink-primary); }

    /* Ausgeblendet: nur die Beschriftung tritt zurueck, Bedienung bleibt voll. */
    .ai-models-row.is-hidden .ai-models-title { opacity: 0.5; }

    .ai-models-ms-field {
        inline-size: 110px;
        font-family: var(--font-data);
        font-variant-numeric: tabular-nums;
    }

    @media (max-width: 1280px) {
        .ai-models-control { min-inline-size: 150px; }
    }
}

/* Fallback-Auswahl: unlayered, weil alte Knopf- und Optionsregeln sonst
   Versalien, Sperrung und Datenschrift erzwingen (siehe ADHD-Auswahl). */
.settings-panel .ai-models-select,
.ai-models-menu .ai-models-menu-item {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-regular, 400);
    letter-spacing: normal;
    text-transform: none;
}