/* ==========================================================================
   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-bubble(--user/--bot/__*)     W22: Token-Bubbles statt bg-dark-Utility
   .md-chat-event-card(--danger/--accent/--info/__*)  W22: Severity-Kante statt
                                        Ganzflächen-badge_class (Typ-Mapping JS)
   .chat-react-btn(--active/__count,
   .is-react-pulsing)                    Reaktions-Chip + Puls (transform)
   .chat-report-btn(.is-reported)        Melden (Hover-Offenbarung, MT4 hover:none)
   .md-topic-card(__*) + .community-vote-btn (scoped)  W22: Themen-Radar-Liste
   .chat-mention-option(--active/__*)    W22: Mention-Dropdown (chatMentionList)
   .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);
    min-height: 44px !important;
    min-width: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.45rem 1rem !important;
  }

  .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 {
    /* W23: 28→32px + Farbvertrag — der rundeIconButton wirkte neben dem
       btn-close gequetscht (W22-Verbleib „Mute-Button-Abstand“); Farbe wie
       die Chip-Sprache (muted → hover aufhellend). Größe bewusst auf
       Fine-Pointer gescoped — der 44px-Touch-Vertrag im pointer:coarse-
       Block steht Früher in der Datei und würde sonst von hier geschlagen.
       TPL trägt KEIN btn-xs mehr: dessen min-height:36 (theme_3) + p-1
       trieben die Höhe über die Breite (32×44 = Ellipse statt Kreis). */
    color: var(--color-text-muted) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: color var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .md-chat-sound-btn:hover {
    color: var(--color-text-body) !important;
  }
  @media (hover: hover) and (pointer: fine) {
    .md-chat-sound-btn {
      width: 32px;
      height: 32px;
      /* !important: default.css setzt UNLAYERED min-height:var(--touch-target-min)
         (44px) auf JEDES .btn — als unlayered Normal-Regel schlägt sie jede
         layered height. Ohne Guard wäre der Kreis 32×44 (Ellipse). */
      min-height: 32px !important;
    }
  }

  /* ---- 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;
  }

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

  /* ---- 4b · Bubbles (W22 11.09.2026): Token-Flächen statt bg-dark-Utility ---
     chat.js setzt nur noch .md-chat-bubble--user/--bot (+ __head/__sender/
     __role/__time/__text) — Flächen flippen via DK2-Tokens automatisch in
     Dark UND Light (früher bg-dark bg-opacity-50/70 hart auf Dark verriegelt). */
  .md-chat-bubble {
    background: var(--color-surface-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    padding: 0.5rem 0.75rem;
  }
  .md-chat-bubble--bot {
    background: var(--color-surface-elevated);
    border-inline-start: 2px solid var(--color-accent-cyan);
  }
  .md-chat-bubble__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
  }
  .md-chat-bubble__sender {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-heading) !important;
    text-decoration: none;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  a.md-chat-bubble__sender:hover {
    color: var(--color-text-link-hover) !important;
    text-decoration: underline;
  }
  .md-chat-bubble__sender--bot {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.55rem;
    border-radius: var(--radius-full, 9999px);
    background: var(--color-info-dim);
    color: var(--color-info);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.6875rem;
    letter-spacing: 0.03em;
    white-space: nowrap;
  }
  .md-chat-bubble__role {
    padding: 0.05rem 0.45rem;
    border-radius: var(--radius-full, 9999px);
    background: var(--color-surface-hover);
    color: var(--color-text-muted);
    font-size: 0.625rem;
    white-space: nowrap;
  }
  .md-chat-bubble__time {
    color: var(--color-text-muted);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.625rem;
    white-space: nowrap;
  }
  .md-chat-bubble__text {
    color: var(--color-text-body);
    font-size: 0.8125rem;
  }

  /* ---- 4c · Event-Cards (W22): Severity-Akzentkante statt Ganzflächen-Farbe.
     chat.js mappt card.type → --danger/--accent/--info; Badge/Border/Button
     ziehen Farbe + Fläche aus EINEM Token-Paar (semantische Status-Tokens,
     WCAG-geprüft in beiden Themes). Alte badge_class-Subtle-Paarungen sind
     damit kontrastseitig außer Kraft. */
  .md-chat-event-card {
    --md-chat-sev: var(--color-info);
    --md-chat-sev-rgb: var(--color-info-rgb, 96, 165, 250);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background: var(--color-surface-card);
    border: 1px solid var(--color-border);
    border-inline-start: 3px solid var(--md-chat-sev);
    border-radius: var(--radius-md, 8px);
    padding: 0.75rem 0.875rem;
    transition: transform var(--duration-base, 250ms) var(--ease-out, ease),
                border-color var(--duration-base, 250ms) var(--ease-out, ease);
  }
  .md-chat-event-card--danger {
    --md-chat-sev: var(--color-danger);
    --md-chat-sev-rgb: var(--color-danger-rgb, 248, 113, 113);
  }
  .md-chat-event-card--accent {
    --md-chat-sev: var(--color-warning);
    --md-chat-sev-rgb: var(--color-warning-rgb, 251, 191, 36);
  }
  .md-chat-event-card--info {
    --md-chat-sev: var(--color-info);
    --md-chat-sev-rgb: var(--color-info-rgb, 96, 165, 250);
  }
  .md-chat-event-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
  }
  .md-chat-event-card__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.6rem;
    border-radius: var(--radius-full, 9999px);
    background: rgba(var(--md-chat-sev-rgb), 0.16);
    color: var(--md-chat-sev);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .md-chat-event-card__time {
    color: var(--color-text-muted);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.625rem;
    white-space: nowrap;
  }
  .md-chat-event-card__headline {
    margin: 0.4rem 0 0.2rem;
    color: var(--color-text-heading);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.4;
  }
  .md-chat-event-card__summary {
    color: var(--color-text-body);
    font-size: 0.75rem;
    line-height: 1.5;
    margin-bottom: 0.2rem;
  }
  .md-chat-event-card__meta {
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    margin-bottom: 0.5rem;
  }
  .md-chat-event-card__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.25rem 0.75rem;
    border: 1px solid rgba(var(--md-chat-sev-rgb), 0.55);
    border-radius: var(--radius-full, 9999px);
    color: var(--md-chat-sev) !important;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .md-chat-event-card__btn:hover {
    background: rgba(var(--md-chat-sev-rgb), 0.16);
    color: var(--md-chat-sev) !important;
  }
  .md-chat-event-card__btn .bi {
    font-size: 1rem;
    line-height: 1;
  }

  /* ---- 4d · Reaktions-Chips (W22): Utility-Suppe durch Token-Chips ---------- */
  .chat-reactions-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.4rem;
  }
  .chat-react-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full, 9999px);
    background: var(--color-surface-hover);
    color: var(--color-text-muted) !important;
    font-size: 0.75rem;
    line-height: 1.5;
    cursor: pointer;
    transition: transform var(--duration-fast, 150ms) var(--ease-out, ease),
                color var(--duration-fast, 150ms) var(--ease-out, ease),
                border-color var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .chat-react-btn:hover {
    color: var(--color-text-body) !important;
    border-color: var(--color-border-active);
  }
  .chat-react-btn--active {
    border-color: rgba(var(--color-info-rgb, 96, 165, 250), 0.5);
    color: var(--color-info) !important;
    font-weight: 700;
  }
  .chat-react-btn__count {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.6875rem;
  }
  .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;
  }

  /* SWOT Design-Pass (05.09.): Emoji-/Kanal-Buttons im Drawer sind <44px und
     hingen bislang allein am globalen design_system-Override — eigener Vertrag: */
  @media (pointer: coarse) {
    .chat-emoji-btn { min-width: 44px; min-height: 44px; }
    .chat-channel-btn { min-height: 44px; }
    /* W22: Sound-Toggle war per Fixgröße 28px — unter der 44px-Touch-Norm. */
    .md-chat-sound-btn { width: 44px; height: 44px; }
  }
  .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) ----------------------------
     !important-Nachbesserung (W22): der unlayered Modern-CSS-Reset
     (default.css:639 'input,button{font:inherit}') erbt mobil den Body-Font
     (~14px via --font-size-base-clamp) — die layered 16px verloren still seit
     der CH2-Tokenisierung (vorher schützten Inline-Styles). <16px zoomt iOS
     Safari bei Fokus in den Input. Gleiches gilt für die Themen-Formular-
     Felder (form-control-sm = 14px). */
  .md-chat-alias {
    max-width: 140px;
    font-size: 16px !important;
  }
  .md-chat-select {
    font-size: 16px !important;
  }
  .md-chat-input {
    font-size: 16px !important;
  }
  #frmSuggestTopic input[type="text"],
  #frmSuggestTopic input[type="url"],
  #frmSuggestTopic textarea {
    font-size: 16px !important;
  }
  .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;
  }

  /* ---- 6b · Kanal- & Command-Chips (W22: einheitliche Chip-Sprache) --------
     TPL trägt nur noch btn btn-xs + rounded-pill als Sizing-Gerüst; Fläche,
     Border und Farbe kommen hier. Farb-Differenzierung NUR im Icon (Scan-
     Barrierefreiheit ohne Farb-Explosion), aktiv = Marken-Pill wie FAB/Senden.
     !important-Guard am aktiven Gradienten wie .md-chat-fab (defensiv gegen
     unlayered .btn-Zukunftsregeln, Muster default.css:782). */
  .chat-channels-bar {
    flex-shrink: 0;
    /* W22-Nachbesserung: 4 Kanal-Chips brauchen ~620px, der Drawer ist
       min(440px,100vw) breit — horizontales Scrollen ohne Affordance
       versteckte 2 von 4 Kanälen (Vision-Audit). Umbruch statt Scroll. */
    flex-wrap: wrap;
    overflow-x: visible;
    row-gap: 0.375rem;
  }
  .chat-channel-btn {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted) !important;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-weight: 600;
    white-space: nowrap;
    transition: color var(--duration-fast, 150ms) var(--ease-out, ease),
                border-color var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .chat-channel-btn:hover {
    color: var(--color-text-body) !important;
    border-color: var(--color-border-active);
  }
  .chat-channel-btn[data-channel="cve_alerts"] .bi          { color: var(--color-danger); }
  .chat-channel-btn[data-channel="incident_response"] .bi   { color: var(--color-warning); }
  .chat-channel-btn[data-channel="ki_security"] .bi         { color: var(--color-info); }
  .chat-channel-btn[data-channel="lounge"] .bi              { color: var(--color-text-muted); }
  .chat-channel-btn.active {
    background: linear-gradient(135deg, #0e7490, #075985) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
  }
  .chat-channel-btn.active .bi { color: #ffffff; }

  .quick-cmd-btn {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted) !important;
    font-family: var(--font-mono, ui-monospace, monospace);
    transition: color var(--duration-fast, 150ms) var(--ease-out, ease),
                border-color var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .quick-cmd-btn:hover {
    color: var(--color-text-body) !important;
    border-color: var(--color-border-active);
  }

  /* ---- 6c · Emoji-Picker (W22: volle Chip-Definition, TPL trägt Bare-Class) */
  .chat-emoji-btn {
    background: var(--color-surface-hover);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full, 9999px);
    color: var(--color-text-body) !important;
    padding: 0.15rem 0.55rem;
    font-size: 0.9rem;
    line-height: 1.5;
    cursor: pointer;
    transition: transform var(--duration-fast, 150ms) var(--ease-out, ease),
                border-color var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .chat-emoji-btn:hover {
    border-color: var(--color-border-active);
    transform: translateY(-1px);
  }

  /* ---- 6d · Tabs als Segment-Control (W22) ----------------------------------
     .md-chat-tabs sitzt auf dem nav-pills-UL; components-Layer schlägt
     Bootstrap-.nav-pills-active bei Gleichtspezifität via Layer-Reihenfolge.
     FARBE mit !important: der Modern-CSS-Reset (default.css:639, UNLAYERED
     'input,button,textarea,select{color:inherit}' + 'a{color:…}') schlägt als
     Unlayered-Regel JEDE Layer-Deklaration — ohne Guard erbt der aktive Tab
     im Light-Mode dunklen Text vom theme-card-subtle-Eltern (CDP bewiesen).
     FLEX-SHRINK:0: Die Streifen sind Flex-Kinder der Offcanvas-Spalte — bei
     Platzdruck stauchten sie auf 23px während die 44px-Chips überstanden
     (Layout-Clipping, CDP-Bounding-Boxen). */
  .md-chat-tabs {
    gap: 0.25rem;
    flex-shrink: 0;
  }
  .md-chat-tabs .nav-link {
    color: var(--color-text-muted) !important;
    transition: color var(--duration-fast, 150ms) var(--ease-out, ease),
                background-color var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .md-chat-tabs .nav-link:hover:not(.active) {
    color: var(--color-text-body) !important;
  }
  .md-chat-tabs .nav-link.active {
    background: linear-gradient(135deg, #0e7490, #075985);
    color: #ffffff !important;
  }
  .md-chat-tabs .nav-link.active .bi { color: #ffffff; }

  /* ---- 6e · Themen-Radar-Karten (W22: chat.js-Renderer .md-topic-card) ------ */
  .md-topic-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    background: var(--color-surface-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    padding: 0.6rem 0.75rem;
  }
  .md-topic-card__title {
    color: var(--color-text-heading);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
  }
  .md-topic-card__desc {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    margin-top: 0.15rem;
  }
  .md-topic-card__author {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--color-text-link);
    font-size: 0.6875rem;
    margin-top: 0.3rem;
  }
  /* Vote-Chip nur im Drawer-Kontext neu gestaltet — sitewide .community-vote-btn
     (RSS-Karten) behält sein Utility-Styling, Scope über .md-topic-card. */
  .md-topic-card .community-vote-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full, 9999px);
    background: transparent;
    color: var(--color-text-muted) !important;
    font-weight: 600;
    font-size: 0.75rem;
    cursor: pointer;
    transition: border-color var(--duration-fast, 150ms) var(--ease-out, ease),
                color var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .md-topic-card .community-vote-btn:hover {
    border-color: var(--color-border-active);
    color: var(--color-text-body) !important;
  }
  .md-topic-card .community-vote-btn .community-vote-score {
    font-family: var(--font-mono, ui-monospace, monospace);
  }

  /* ---- 6f · Peer-Matchmaking-Strip (W23 11.09.2026): Wrap statt Clipping ----
     #peerMatchmakingStrip trug overflow-x-auto + justify-content-between —
     zwei+ Peer-Pills sind breiter als min(440px,100vw), die rechte Pill
     wurde abgeschnitten (gleiche Befundklasse wie die Kanal-Chips in W22).
     Markup bricht jetzt (TPL flex-wrap), hier leben Strip-Rhythmus und die
     Chip-Optik: Pills in derselben Sprache wie .chat-channel-btn — Status
     über Punkt statt 🟢/👤-Emoji (W22-Chrome-Vertrag), Match-% als Badge. */
  .md-chat-peer-strip {
    flex-shrink: 0;
    row-gap: 0.375rem;
  }
  #peerMatchmakingList {
    row-gap: 0.375rem;
  }
  .md-chat-peer-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full, 9999px);
    background: transparent;
    color: var(--color-text-muted) !important;
    font-size: 0.75rem;
    font-family: var(--font-mono, ui-monospace, monospace);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--duration-fast, 150ms) var(--ease-out, ease),
                border-color var(--duration-fast, 150ms) var(--ease-out, ease);
  }
  .md-chat-peer-pill:hover {
    color: var(--color-text-body) !important;
    border-color: var(--color-border-active);
    text-decoration: none;
  }
  .md-chat-peer-pill__handle {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 11rem;
  }
  .md-chat-peer-pill__match {
    padding: 0.05rem 0.45rem;
    border-radius: var(--radius-full, 9999px);
    background: var(--color-success-dim, rgba(52, 211, 153, 0.14));
    color: var(--color-success, var(--color-green, #34d399));
    font-size: 0.625rem;
    font-weight: 700;
  }
  .md-chat-peer-dot {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full, 9999px);
    background: var(--color-text-muted);
  }
  .md-chat-peer-pill--online .md-chat-peer-dot {
    background: var(--color-green, #34d399);
    box-shadow: 0 0 0 2px rgba(var(--color-green-rgb, 52, 211, 153), 0.25);
  }

  /* ---- 6g · Feed-Scrollbar (W23): dezente System-Scrollbar im Token-Kleid -- */
  .md-chat-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
  }
  .md-chat-scroll::-webkit-scrollbar {
    width: 6px;
  }
  .md-chat-scroll::-webkit-scrollbar-track {
    background: transparent;
  }
  .md-chat-scroll::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: var(--radius-full, 9999px);
  }
  .md-chat-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--color-border-active);
  }

  /* ---- 7 · @Mention-Autocomplete + Honeypot -------------------------------- */
  .md-chat-mention-list {
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    box-shadow: var(--shadow-lg, 0 8px 32px rgba(0, 0, 0, .5));
  }
  .chat-mention-option {
    cursor: pointer;
    color: var(--color-text-body);
    background: var(--color-surface-card);
  }
  .chat-mention-option--active,
  .chat-mention-option:hover {
    background: var(--color-surface-hover);
    color: var(--color-text-heading);
  }
  .chat-mention-option__handle {
    font-weight: 700;
    font-family: var(--font-mono, ui-monospace, monospace);
  }
  .chat-mention-option__name {
    color: var(--color-text-muted);
    font-family: var(--font-mono, ui-monospace, monospace);
  }
  .chat-mention-option__role {
    padding: 0.05rem 0.5rem;
    border-radius: var(--radius-full, 9999px);
    background: var(--color-info-dim);
    color: var(--color-info);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.625rem;
    white-space: nowrap;
  }

  .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;
  }
}