/**
 * SCL Schnappi — Fragepanel (TRAIN18-E, §9).
 *
 * Tokenvertrag: verschachtelte var()-Ketten mit dem bisherigen Literal als
 * letzter Fallbackstufe — identisch zu assets/css/scl-guide.css, damit Panel
 * und Hilfezentrum demselben Preset folgen (hell wie dunkel).
 * z-Band 110000er (110015: ueber dem Hilfezentrum 110010, unter Beta-FAB).
 * Bedienziele >= 44x44. Reduced Motion: alle Uebergaenge fallen weg.
 */

/* ── Panel ────────────────────────────────────────────────────────────────── */
.scl-schnappi-panel {
    position: fixed;
    right: 16px;
    bottom: 84px;
    z-index: 110015;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(380px, calc(100vw - 24px));
    max-height: min(560px, calc(100vh - 120px));
    padding: 14px;
    border: 1px solid var(--card-border, var(--border, rgba(255,255,255,.16)));
    border-radius: 16px;
    background: var(--surface, var(--bg, #14101f));
    color: var(--text, var(--text-color, #f2eefe));
    box-shadow: 0 10px 34px rgba(0, 0, 0, .38);
}
.scl-schnappi-panel[hidden] { display: none; }

.scl-schnappi-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.scl-schnappi-panel__title { margin: 0; font-size: 1.05rem; }

.scl-schnappi-close {
    display: inline-grid;
    place-items: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid var(--card-border, var(--border, rgba(255,255,255,.2)));
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}
.scl-schnappi-close:hover { border-color: var(--accent, #a78bfa); }
.scl-schnappi-close:focus-visible { outline: 2px solid var(--accent, #a78bfa); outline-offset: 2px; }

/* ── Verlauf ──────────────────────────────────────────────────────────────── */
.scl-schnappi-panel__log {
    display: grid;
    gap: 10px;
    align-content: start;
    flex: 1 1 auto;
    min-height: 96px;
    overflow-y: auto;
    padding: 4px 2px;
}
.scl-schnappi-panel__log:focus-visible { outline: 2px solid var(--accent, #a78bfa); outline-offset: 2px; }

.scl-schnappi-msg {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid var(--card-border, var(--border, rgba(255,255,255,.14)));
    border-radius: 12px;
    background: var(--card-bg, rgba(255,255,255,.04));
}
.scl-schnappi-msg--you {
    background: transparent;
    border-style: dashed;
}
.scl-schnappi-msg__who {
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted, var(--muted, rgba(242,238,254,.65)));
}
.scl-schnappi-msg__text { margin: 0; line-height: 1.45; overflow-wrap: anywhere; }
.scl-schnappi-msg__links,
.scl-schnappi-msg__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.scl-schnappi-link,
.scl-schnappi-chip,
.scl-schnappi-guide {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid var(--card-border, var(--border, rgba(255,255,255,.2)));
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}
.scl-schnappi-guide {
    margin-top: 8px;
    background: var(--accent, #a78bfa);
    border-color: var(--accent, #a78bfa);
    color: var(--surface, #14101f);
    font-weight: 600;
}
.scl-schnappi-link:hover,
.scl-schnappi-chip:hover { border-color: var(--accent, #a78bfa); }
.scl-schnappi-link:focus-visible,
.scl-schnappi-chip:focus-visible,
.scl-schnappi-guide:focus-visible { outline: 2px solid var(--accent, #a78bfa); outline-offset: 2px; }

/* ── Eingabe ──────────────────────────────────────────────────────────────── */
.scl-schnappi-panel__form { display: flex; gap: 8px; }
.scl-schnappi-input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--card-border, var(--border, rgba(255,255,255,.2)));
    border-radius: 10px;
    background: var(--card-bg, rgba(255,255,255,.04));
    color: var(--text, var(--text-color, #f2eefe));
    font: inherit;
    font-size: 16px; /* verhindert das iOS-Zoomen beim Fokus */
}
.scl-schnappi-input:focus-visible { outline: 2px solid var(--accent, #a78bfa); outline-offset: 1px; }
.scl-schnappi-send {
    min-width: 44px;
    min-height: 44px;
    padding: 8px 16px;
    border: 1px solid var(--accent, #a78bfa);
    border-radius: 10px;
    background: var(--accent, #a78bfa);
    color: var(--surface, #14101f);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.scl-schnappi-send:focus-visible { outline: 2px solid var(--accent, #a78bfa); outline-offset: 2px; }
.scl-schnappi-send[disabled] { opacity: .45; cursor: not-allowed; }

.scl-schnappi-panel__note {
    margin: 0;
    font-size: .74rem;
    line-height: 1.4;
    color: var(--text-muted, var(--muted, rgba(242,238,254,.65)));
}

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

/* ── Motion & kleine Viewports ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .scl-schnappi-panel,
    .scl-schnappi-link,
    .scl-schnappi-chip,
    .scl-schnappi-guide,
    .scl-schnappi-send { transition: none; animation: none; }
}
@media (max-width: 480px) {
    .scl-schnappi-panel {
        right: 8px;
        left: 8px;
        bottom: 8px;
        width: auto;
        max-height: min(76vh, calc(100vh - 24px));
        padding: 12px;
    }
}