/* ====================================================
   banner.css — Hinweiszeilen (.banner) + Zeitzonen-Hinweis (.tz-hint)
   Ausgelagert aus components.css am 2026-10-10 (single source), weil
   Seiten ohne components.css den Zeitzonen-Hinweis zeigen
   (mobile-chat-list, mobile-chat, register, account-blocked).
   components.css bindet diese Datei oben per @import ein.
   Werte nur aus premium-design-tokens.css.
   ==================================================== */

/* ─────────────────────────────────────────────────────
   BANNER — inline notice / status
   (bleibt mit 1px Border per User-Entscheidung)
   ───────────────────────────────────────────────────── */

.banner {
    display:        flex;
    align-items:    flex-start;
    gap:            var(--banner-gap);
    padding:        var(--banner-padding);
    border-radius:  var(--banner-radius);
    border-width:   var(--banner-border-width);
    border-style:   solid;
    border-color:   transparent;
    font-size:      var(--font-size-sm, 13px);
    font-weight:    var(--font-weight-medium, 500);
}

.banner--info {
    background:   var(--banner-info-bg);
    border-color: var(--banner-info-border);
    color:        var(--banner-info-text);
}

.banner--warn {
    background:   var(--banner-warn-bg);
    border-color: var(--banner-warn-border);
    color:        var(--banner-warn-text);
}

.banner--success {
    background:   var(--banner-success-bg);
    border-color: var(--banner-success-border);
    color:        var(--banner-success-text);
}

.banner--error {
    background:   var(--banner-error-bg);
    border-color: var(--banner-error-border);
    color:        var(--banner-error-text);
}

/* Banner-hidden Helper (HTML hidden-attribute funktioniert,
   aber explizite Klasse hilft bei dynamic show/hide) */
.banner[hidden] {
    display: none;
}


/* ─────────────────────────────────────────────────────
   ZEITZONEN-HINWEIS (js/timezone-mismatch-hint.js)
   Gerät ≠ Profil-Zeitzone, unter der Navbar (M1).
   Schema: doc/Schema_Wochenzeiten.txt §6 (2026-10-09)
   ───────────────────────────────────────────────────── */

.tz-hint {
    position:   relative;
    margin:     var(--banner-gap);
    flex-wrap:  wrap;
    align-items: center;
    padding-right: calc(var(--banner-gap) * 3);
}

.tz-hint__text {
    flex:   1 1 280px;
    margin: 0;
    line-height: 1.5;
}

.tz-hint__actions {
    display: flex;
    gap:     var(--banner-gap);
    flex-wrap: wrap;
}

.tz-hint__close {
    position:   absolute;
    top:        var(--banner-gap);
    right:      var(--banner-gap);
    border:     0;
    background: transparent;
    color:      inherit;
    font-size:  var(--font-size-sm, 13px);
    line-height: 1;
    cursor:     pointer;
}

/* Schwebend auf Handy-App-Seiten (mobile-chat-list, mobile-chat): dort sind
   Kopf, Tabs und Suche fest oben, ein Hinweis im Fluss läge darunter.
   Mockup mockups/mockup-tz-hint-app-seiten.html, freigegeben 2026-10-10
   („1a“): Chat-Liste unten, Chat oben. Die Seite wählt per
   <body data-tz-hint="float-top|float-bottom">, js/profile-gate.js setzt
   die Klassen. */
.tz-hint.is-float {
    position:   fixed;
    left:       var(--banner-gap);
    right:      var(--banner-gap);
    margin:     0;
    z-index:    var(--z-floating-hint);
    box-shadow: var(--shadow-md);
}

.tz-hint.is-float-top {
    top: calc(var(--app-header-height) + var(--banner-gap));
}

.tz-hint.is-float-bottom {
    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--banner-gap));
}