/* ====================================================================
   Modellauswahl im Composer — ai-chat, Daten-Modus, Journal-AI, Scanner.

   Das Aussehen ist das des Aktionsmenues (`+`) im AI-Chat: gleiche Flaeche
   (`--surface-menu`), gleiche Zeilenhoehe (32 px), gleicher Radius, gleiche
   Auswahlflaeche. Die Regeln stehen hier vollstaendig und nicht in
   `channels/chat.css`, weil derselbe Baustein in vier Kanaelen sitzt und
   `chat.css` nur im AI-Chat geladen wird.

   Eigener Namensraum `model-picker-*`: generische Namen wie `.dropdown-item`
   kollidieren zwischen den Kanaelen (siehe `.chart-container`-Vorfall).
   ==================================================================== */

@layer components {
    .model-picker {
        position: relative;
        display: inline-flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-2);
        min-width: 0;
        max-width: 100%;
    }

    /* --- Ausloeser ---------------------------------------------------
       Geometrie wie `.hotbar-action-btn`: 32 px hoch, durchsichtig,
       gedaempfte Schrift. Kein Rahmen, kein Gruen beim Ueberfahren. */
    .model-picker-trigger {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        min-width: 0;
        height: 32px;
        padding-inline: var(--space-2);
        border: none;
        border-radius: var(--radius-control);
        background: transparent;
        color: var(--ink-secondary);
        font-family: var(--font-ui);
        font-size: var(--text-xs, 13px);
        font-weight: var(--font-weight-regular);
        /* Der Bestand setzt unbeschichtet `button { text-transform: uppercase }`
           (theme.css). Der Ausloeser ist deshalb ein `div[role=button]`; die
           beiden Zeilen hier sind der Riegel, falls das Motiv je wandert. */
        letter-spacing: normal;
        text-transform: none;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        transition:
            background-color var(--dur-instant) var(--ease-standard),
            color var(--dur-instant) var(--ease-standard);
    }

    @media (hover: hover) and (pointer: fine) {
        .model-picker-trigger:hover:not(.is-disabled) {
            background: var(--surface-hover);
            color: var(--ink-primary);
        }
    }

    .model-picker-trigger.is-open {
        background: var(--surface-selected);
        color: var(--ink-primary);
    }

    .model-picker-trigger:focus-visible {
        outline: 2px solid var(--line-focus);
        outline-offset: 2px;
    }

    .model-picker-trigger.is-disabled {
        opacity: 0.5;
        cursor: default;
    }

    /* Ein nicht eingerichtetes Modell wird benannt, nicht ersetzt. */
    .model-picker-trigger.is-unavailable .model-picker-name {
        color: var(--signal-down);
    }

    .model-picker-name {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .model-picker-caret {
        flex: none;
        inline-size: 13px;
        block-size: 13px;
        color: var(--ink-muted);
        transition: transform var(--dur-fast) var(--ease-out);
    }

    .model-picker-trigger.is-open .model-picker-caret {
        transform: rotate(180deg);
    }

    /* --- Menueflaeche -------------------------------------------------
       Waechst aus dem Ausloeser nach oben: der Composer steht unten, also
       liegt die Ecke am Ausloeser unten links. */
    .model-picker-menu {
        position: absolute;
        bottom: calc(100% + var(--space-2));
        left: 0;
        z-index: var(--z-dropdown);
        /* Nur so breit wie der laengste Name plus Zustand — kein Puffer. */
        min-width: max-content;
        padding-block: var(--space-1) var(--space-1);
        padding-inline: var(--space-1);
        border-radius: var(--radius-panel);
        background: var(--surface-menu);
        color: var(--ink-primary);
        font-family: var(--font-ui);
        font-size: var(--text-sm);
        /* Ein Menue schwebt — die einzige Stelle, an der STIL.md §7 einen
           Schatten zulaesst. */
        box-shadow: 0 8px 28px color-mix(in oklab, var(--surface-canvas) 72%, transparent);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: scale(0.97);
        transform-origin: bottom left;
        transition:
            opacity var(--dur-base) var(--ease-out),
            transform var(--dur-base) var(--ease-out),
            visibility var(--dur-base) var(--ease-out);
    }

    .model-picker-menu:not(.show) {
        display: none;
    }

    .model-picker-menu.show {
        visibility: visible;
    }

    .model-picker-menu.show.is-open {
        opacity: 1;
        pointer-events: auto;
        transform: scale(1);
    }

    .model-picker-menu.is-closing {
        opacity: 0;
        transform: scale(0.97);
        transition-duration: var(--dur-fast);
    }

    /* Abschnittsmarke: klein, normal gesetzt, gedaempft — keine gesperrten
       Versalien (STIL.md §7). */
    .model-picker-menu-label {
        padding-block: var(--space-1) var(--space-1);
        padding-inline: var(--space-2);
        color: var(--ink-muted);
        font-size: var(--text-xs);
        font-weight: var(--font-weight-regular);
        letter-spacing: normal;
        text-transform: none;
    }

    /* --- Zeilen ------------------------------------------------------- */
    .model-picker-item {
        position: relative;
        display: flex;
        align-items: center;
        gap: var(--space-2);
        width: 100%;
        height: 32px;
        padding-inline: var(--space-2);
        border: none;
        border-radius: var(--radius-control);
        background: transparent;
        color: var(--ink-secondary);
        font-family: var(--font-ui);
        font-size: var(--text-sm);
        font-weight: var(--font-weight-regular);
        letter-spacing: normal;
        text-transform: none;
        text-align: start;
        cursor: pointer;
        transition:
            background-color var(--dur-instant) var(--ease-standard),
            color var(--dur-instant) var(--ease-standard);
    }

    @media (hover: hover) and (pointer: fine) {
        .model-picker-item:hover {
            background: var(--surface-hover);
            color: var(--ink-primary);
        }
    }

    /* Gewaehlt ist eine Flaeche, keine Farbe (STIL.md R2: nie gruen). */
    .model-picker-item.is-active {
        background: var(--surface-selected);
        color: var(--ink-primary);
        font-weight: var(--font-weight-medium);
    }

    .model-picker-item:focus-visible {
        outline: 2px solid var(--line-focus);
        outline-offset: -2px;
    }

    .model-picker-item.is-unavailable {
        color: var(--ink-muted);
        cursor: not-allowed;
    }

    /* Markenzeichen des Anbieters. Deutlich kleiner als der 18-px-Satz der
       Bedienleiste: es begleitet den Namen, es fuehrt ihn nicht an. Zusammen
       mit der um 20 % groesseren viewBox im Sprite steht das Motiv bei rund
       10 px — gefuellte Marken tragen optisch schwerer als Strichmotive. */
    .model-picker-brand,
    .model-picker-glyph {
        flex: none;
        inline-size: 12px;
        block-size: 12px;
        color: var(--ink-secondary);
    }

    .model-picker-item.is-unavailable .model-picker-brand {
        color: var(--ink-muted);
    }

    .model-picker-item-name {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Rechts steht der Zustand — wie das „Aus" im Aktionsmenue. */
    .model-picker-item-meta {
        margin-inline-start: auto;
        color: var(--ink-muted);
        font-family: var(--font-data);
        font-size: var(--text-2xs);
        font-variant-numeric: tabular-nums;
        letter-spacing: normal;
        white-space: nowrap;
    }

    .model-picker-item.is-unavailable .model-picker-item-meta {
        font-family: var(--font-ui);
    }

    /* Der Haken steht rechts aussen, nur beim gewaehlten Eintrag. Er haelt
       immer seinen Platz — sonst rutschen die Zeilen beim Wechseln. */
    .model-picker-check {
        flex: none;
        inline-size: 13px;
        block-size: 13px;
        opacity: 0;
        color: var(--ink-primary);
    }

    .model-picker-item.is-active .model-picker-check {
        opacity: 1;
    }

    /* --- Zahl und Meldung --------------------------------------------- */
    .model-picker-context {
        flex: none;
        color: var(--ink-muted);
        font-family: var(--font-data);
        font-size: var(--text-2xs);
        font-variant-numeric: tabular-nums;
        letter-spacing: normal;
        text-transform: none;
        white-space: nowrap;
    }

    .model-picker-status {
        flex-basis: 100%;
        color: var(--signal-down);
        font-size: var(--text-xs);
    }

    .model-picker-status:empty {
        display: none;
    }

    /* --- Sitz in den einzelnen Kanaelen -------------------------------
       Im AI-Chat traegt `#tokenBadge` schon Modellname und Kontextstand.
       Der Picker liefert dort nur den Ausloeser; seine eigene Zahl und der
       Name im Abzeichen entfallen, sonst steht beides doppelt. */
    .composer-status .model-picker-context,
    .composer-status .composer-model-name {
        display: none;
    }

    .jai-composer-bar .model-picker,
    .scanner-chat-compose .model-picker {
        flex: 0 1 auto;
    }
}

@layer channels {
    .model-picker-menu[popover] { position: fixed; inset: auto; margin: 0; min-width: 0; width: min(340px, calc(100vw - 24px)); max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; border: 1px solid var(--line-strong); box-shadow: none; }
    .model-picker-menu[popover] .model-picker-item-name { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
    @media (pointer: coarse) {
        .model-picker-trigger, .model-picker-item { min-height: 44px; }
    }
}