/* ==========================================================================
   community_chat.css — CH-Serie (04.09.2026): Chat-Flächen Theming
   ==========================================================================
   Tokenisierung der Chat-Surface (live_chat_drawer.tpl, chat.js-Renderer,
   themen_radar_drawer.tpl) nach der comments.css-Blaupause:
   - @layer components (nach theme_3/comments/article, vor mobile.css) —
     schlägt bei gleicher Spezifität design_system/theme_3 via Dokument-
     reihenfolge, verliert kontrolliert gegen @layer overrides (mobile.css).
   - MOBILE-FIRST: Basis = 320px Phone, Erweiterungen via min-width.
   - Konsumiert --color-*, --radius-* und --shadow-* Tokens aus default.css
     (DK2-Regel: Dark :root + beide Light-Blöcke flippen die Tokens —
     diese Datei braucht KEINE eigene Theme-Overrides). Spacing bewusst
     rem/px-Literal (kein --space-*-Konsum).
     ACHTUNG (Muster aus comments.css-Bug): in CSS-Kommentaren nie einen
     Globus-Stern unmittelbar vor einem Schrägstrich schreiben — genau diese
     Folge beendet den Kommentar vorzeitig und verschluckt die ganze Datei.
   - Bewusste Marken-Ausnahmen (Literal, dokumentiert): der Cyan-Neon-Glow
     (rgba(0,240,255,…)) an Ticker-Kapsel/Radar-Drawer und das Glas-Highlight
     rgba(255,255,255,.25) auf den Marken-Gradient-Buttons sind Dark-Brand-
     Werte; Tokenisierung = O6/TB1 (Brand-Token-Pflege), nicht CH.
   - Keine Container-Query bewusst: Der Drawer ist ein Overlay mit fester
     Breitenlogik min(440px,100vw) — @media genügt; Container-Queries bleiben
     Flächen mit Einbettungs-Varianz (comments/article) vorbehalten.
   - Bootstrap-.m-3-!important am Dock wird über den @layer bootstrap-Heiler
     am DATEIENDE (Top-Level, außerhalb des components-Wrappers) geschlagen
     (spätere Deklaration im selben Layer gewinnt — Muster
     article.css:281-305 / default.css:978-995).

   JS-Verträge (chat.js):
   .chat-message-item                    Nachrichten-Wrapper (Renderer)
   .md-chat-msg-text                     Nachrichtentext (word-break/Zeilenhöhe)
   .md-chat-event-card                   Event-Card (backdrop-filter)
   .chat-react-btn(.is-react-pulsing)    Reaktions-Puls (transform)
   .chat-report-btn(.is-reported)        ⚑ Melden (Hover-Offenbarung, MT4 hover:none)
   .md-chat-toast(.md-chat-toast--show)  C24-Melde-Toast (#chatReportToast)
   .md-chat-menu / .md-chat-menu-item    C24-Grundauswahl (#chatReportMenu)
   Markup-Vertrag (live_chat_drawer.tpl / themen_radar_drawer.tpl):
   md-chat-* bzw. md-radar-*-Klassen, 0 Inline-Styles außer Laufzeit-
   Positionierung (Report-Menü top/left, Keyboard-Avoidance bottom).
   ========================================================================== */
@layer components {

  /* ---- 1 · Drawer-Shell -------------------------------------------------- */
  .md-chat-drawer {
    /* Bootstrap-native Breitensteuerung (ersetzt Inline-width min(440px,100vw)) */
    --bs-offcanvas-width: min(440px, 100vw);
  }

  .md-chat-scroll {
    scroll-behavior: smooth;
    /* SWOT GX24 (04.09.2026): overscroll-contain — Scroll-Chaining zum
       Seitenhintergrund am Scroll-Ende unterbinden (mobile.css-Vertrag der
       .glass-offcanvas, hier für den theme-offcanvas-Chat-Drawer). */
    overscroll-behavior: contain;
    /* Abstand via flex-gap statt Item-Margins: die unlayered Global-Regel
       „alle Elemente margin: 0“ (default.css-Utilities) schlägt im css-cascade-5
       JEDE layered Regel VOR der Spezifitätsbetrachtung (Z4-Lektion) —
       Item-Margins im Layer wären tot. Container-gap ist davon nicht berührt. */
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
  }

  /* ---- 2 · Dock-FAB (Chat-Öffner über dem Mobile-Dock) --------------------
     Der margin-Heiler gegen Bootstrap-.m-3 steht als TOP-LEVEL-@layer-bootstrap-
     Block am DATEIENDE — verschachtelt wäre er eine Sub-Layer „components.
     bootstrap“ und verlöre gegen den globalen bootstrap-Layer. */

  .md-chat-fab {
    /* Marken-Gradient, in beiden Schemata bewusst identisch (Weiß-Text ≥4.5:1);
       früher dreifach im Markup (FAB/Senden/Einreichen), jetzt EINE Quelle.
       !important-Guard (article.css-Präzedenz): default.css:761 definiert
       UNLAYERED `.btn-primary{background:linear-gradient(...,#e6900a)}` und
       schlägt als unlayered Regel JEDE components-Regel — der frühere
       Inline-Style hat genau das maskiert. */
    background: linear-gradient(135deg, #0e7490, #075985) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .md-chat-fab-icon {
    width: 12px;
    height: 12px;
  }

  /* ---- 3 · Header-Bestandteile ------------------------------------------- */
  .md-chat-pulse-dot {
    /* !important-Guard wie .md-chat-fab: .live-pulse-dot (realtime_news.css,
       overrides-Layer) setzt 8px/rot und schlug seit der Tokenisierung durch —
       der frühere Inline-Style (7px, grün) hat das maskiert. */
    width: 7px !important;
    height: 7px !important;
    /* ehem. #10b981 — theme-aware: Dark #34d399, Light #047857 */
    background: var(--color-green, #34d399) !important;
  }

  .md-chat-sound-btn {
    width: 28px;
    height: 28px;
    line-height: 1;
  }

  /* ---- 4 · Nachrichten (chat.js-Renderer) --------------------------------- */
  /* ehem. toten Klassen animate-fadeIn/mb-2.5 ersetzt (waren nie definiert,
     fs-7/LT5-Muster) — Spacing liefert der Container (.md-chat-scroll, flex-gap;
     Item-Margins würden gegen die unlayered margin:0-Globalregel verlieren),
     Fade-in hier real definiert. min-width:0 = Flex-Child-Vertrag. */
  .chat-message-item {
    min-width: 0;
    animation: md-chat-fade-in var(--duration-base, 250ms) var(--ease-out, ease);
  }

  .md-chat-msg-text {
    word-break: break-word;
    line-height: 1.5;
  }

  .md-chat-event-card {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  @keyframes md-chat-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Reaktions-Puls (ehem. style.transform in chat.js) */
  .chat-react-btn {
    transition: transform var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .chat-react-btn.is-react-pulsing {
    transform: scale(1.25);
  }

  /* ---- 5 · Melden (C24) — Button, Grundauswahl, Toast --------------------- */
  .chat-report-btn {
    background: none;
    border: none;
    color: var(--color-text-muted, #94a3b8);
    opacity: .35;
    font-size: .75rem;
    padding: 0;
    cursor: pointer;
  }
  .chat-report-btn:hover {
    opacity: 1;
    /* Dark #f59e0b (identisch zum ehem. Literal), Light #b45309 (WCAG) */
    color: var(--accent-warning, #f59e0b);
  }
  /* MT4 (04.09.): Touch-Geräte haben keinen Hover — Report voll sichtbar. */
  @media (hover: none) {
    .chat-report-btn { opacity: 1; }
  }
  .chat-report-btn.is-reported {
    opacity: 1;
    color: var(--accent-warning, #f59e0b);
  }

  /* C24-Rest aus dem entfernten <style>-Block des Drawers: Hover-Aufhellung
     des Kommentar-Report-Buttons (bleibt chat-seitig gepflegt, !important
     1:1 übernommen — garde gegen Inline-Opacity-Stände im Kommentar-Renderer). */
  .comment-report-btn:hover {
    opacity: 1 !important;
    color: var(--accent-warning, #f59e0b);
  }
  @media (hover: none) {
    .comment-report-btn { opacity: 1 !important; }
  }

  .md-chat-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 100000; /* Theme-irrelevant, bewusst Literal (z-Scale-Aufräumarbeit steht aus) */
    background: rgba(var(--color-surface-rgb, 15, 23, 42), 0.97);
    border: 1px solid rgba(var(--color-blue-rgb, 99, 102, 241), 0.5);
    border-radius: var(--radius-xl, 16px);
    padding: 12px 20px;
    box-shadow: var(--shadow-lg, 0 8px 32px rgba(0, 0, 0, .5));
    color: var(--color-text-heading, #fff);
    font-size: .85rem;
    transition: transform .3s ease, opacity .3s ease;
    transform: translateY(100px);
    opacity: 0;
    max-width: min(90vw, 380px);
  }
  .md-chat-toast.md-chat-toast--show {
    transform: translateY(0);
    opacity: 1;
  }

  /* SWOT GX22 (04.09.2026): Streak-Toast (community.js, bisher JS-cssText mit
     bottom:24px HINTER dem Mobile-Bottom-Dock) als State-Klasse mit demselben
     Dock-Vertrag — CA1/CH3-Vertrag: Styling ins Stylesheet, JS nur State. */
  .md-streak-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 100000;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(245, 158, 11, 0.5);
    border-radius: var(--radius-xl, 16px);
    padding: 12px 20px;
    box-shadow: var(--shadow-lg, 0 8px 32px rgba(0, 0, 0, 0.5));
    backdrop-filter: blur(16px);
    color: #fff;
    font-family: monospace;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: translateY(100px);
    opacity: 0;
    max-width: min(90vw, 380px);
  }
  .md-streak-toast--show { transform: translateY(0); opacity: 1; }
  @media (max-width: 991.98px) {
    /* Mobile-Bottom-Dock (<992px, mobile.css Stufe 14): Toasts ÜBER dem Dock
       statt dahinter — dm-toast-Muster (messages.tpl, MF-/Dock-Vertrag). */
    .md-chat-toast,
    .md-streak-toast {
      bottom: calc(var(--ts-dock-height, 72px) + 8px + var(--ts-dock-safe, env(safe-area-inset-bottom, 0px)));
      right: 16px;
    }
    .md-toast:not(.md-toast--raised) {
      bottom: calc(var(--ts-dock-height, 72px) + 8px + var(--ts-dock-safe, env(safe-area-inset-bottom, 0px)));
      right: 16px;
    }
  }

  /* ---- SWOT CH8.1 (04.09.2026): Generalisiertes .md-toast-Utility — die
     Community-Toasts (profile/dm/conversion/engagement) fuhren bisher JS-
     cssText-Blobs; Styling wohnt jetzt hier, JS toggelt nur State-Klassen
     (CH3-Vertrag). Positions-Ausnahmen + z-index bleiben bewusst Laufzeit-
     Inline (chat.js-Vertrag); Default-Position = Dock-fähig (Mobildock oben). */
  .md-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 100000;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(99, 102, 241, 0.5);
    border-radius: var(--radius-xl, 16px);
    padding: 12px 20px;
    box-shadow: var(--shadow-lg, 0 8px 32px rgba(0, 0, 0, .5));
    color: #fff;
    font-size: .85rem;
    font-family: inherit;
    transition: transform .3s ease, opacity .3s ease;
    transform: translateY(100px);
    opacity: 0;
    max-width: min(90vw, 380px);
  }
  .md-toast.md-toast--show {
    transform: translateY(0);
    opacity: 1;
  }
  .md-toast--cyan { border-color: rgba(0, 240, 255, 0.4); }
  .md-toast--blue { border-color: rgba(59, 130, 246, 0.35); }
  .md-toast--left { right: auto; left: 24px; }
  .md-toast--raised { bottom: 80px; right: 20px; max-width: 360px; }
  .md-toast--rich {
    padding: 16px 18px;
    backdrop-filter: blur(20px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
  }

  /* ---- SWOT CH8.3 (04.09.2026): Marken-Gradient-Button als Utility (bisher
     n× dupliziert in auth_modal.tpl/conversion_auth.js). Markenwert bleibt
     bewusst Literal bis O6/TB1 (Farb-Single-Source). !important-Guard: die
     unlayered .btn-primary-Gegenregel (default.css:761, Gold-Gradient) würde
     jede layered Normal-Declaration schlagen (CA3-Präzedenz, css-cascade-5). */
  .btn-brand-gradient {
    background: linear-gradient(135deg, #0e7490, #075985) !important;
    border: none !important;
    color: #ffffff !important;
  }
  .btn-brand-gradient:hover {
    filter: brightness(1.12);
  }

  .md-chat-menu {
    position: fixed;
    z-index: 1060;
    background: var(--color-surface-elevated, #1e293b);
    border: 1px solid var(--color-border, rgba(255, 255, 255, .15));
    border-radius: var(--radius-md, .6rem);
    padding: .35rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 175px;
  }
  .md-chat-menu-item {
    background: none;
    border: none;
    color: var(--color-text-body, #e2e8f0);
    font-size: .78rem;
    text-align: left;
    padding: .3rem .5rem;
    border-radius: .4rem;
    cursor: pointer;
  }
  .md-chat-menu-item:hover {
    background: var(--color-surface-hover, #162040);
  }

  /* ---- 6 · Formular (16px = iOS-Zoom-Stop, MF1) ---------------------------- */
  .md-chat-alias {
    max-width: 140px;
    font-size: 16px;
  }
  .md-chat-select {
    font-size: 16px;
  }
  .md-chat-input {
    font-size: 16px;
  }
  .md-chat-send-btn {
    /* !important-Guard wie .md-chat-fab (default.css:761 unlayered .btn-primary) */
    background: linear-gradient(135deg, #0e7490, #075985) !important;
    border: none !important;
  }

  /* ---- 7 · @Mention-Autocomplete + Honeypot -------------------------------- */
  .md-chat-mention-drop {
    position: absolute;
    bottom: 100%;
    left: 0.75rem;
    right: 0.75rem;
    z-index: 1055;
  }

  .md-chat-hp {
    position: absolute;
    left: -9999px;
  }

  /* ---- 8 · Themen-Radar-Drawer (themen_radar_drawer.tpl) ------------------- */
  .md-radar-drawer {
    height: 80vh;
    max-height: 80vh;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-top: 1px solid rgba(0, 240, 255, 0.3); /* Marken-Neon (s. Header-Kommentar) */
  }

  .md-radar-filter-wrap {
    max-width: 500px;
  }

  .md-radar-subcat-link {
    max-width: 220px;
  }

}

/* ==========================================================================
   Heiler — bewusst TOP-LEVEL, außerhalb des components-Wrappers (Muster
   article.css:281-305 / default.css:978-995): Bootstrap-.m-3 trägt sein
   !important im ERSTEN Layer `bootstrap`; bei important-Declarations gewinnt
   dort die SPÄTESTE Deklaration. Der Block DARF NICHT in @layer components
   verschachtelt werden — das erzeugt den Sublayer components.bootstrap,
   der gegen den Top-Level-Layer verliert (Delta-Audit 04.09.: Dock-FAB
   bekam 1rem statt 4.5rem + safe-area).
   ========================================================================== */
@layer bootstrap {
  .md-chat-dock {
    margin-bottom: calc(4.5rem + env(safe-area-inset-bottom)) !important;
  }
}