/* ========================================================================== 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-*/--space-*/--radius-*/--shadow-* Tokens aus default.css (DK2-Regel: Dark :root + beide Light-Blöcke flippen die Tokens — diese Datei braucht KEINE eigenen Theme-Overrides). - 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 geschlagen (spätere Deklaration im selben Layer gewinnt — Muster article.css:281-305 / default.css:930-947). 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; } /* ---- 2 · Dock-FAB (Chat-Öffner über dem Mobile-Dock) -------------------- */ .md-chat-dock { /* Abstand über dem unteren Mobile-Dock + Safe-Area (ehem. Inline !important) */ margin-bottom: calc(4.5rem + env(safe-area-inset-bottom)); } .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. */ background: linear-gradient(135deg, #0e7490, #075985); border: 1px solid rgba(255, 255, 255, 0.25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .md-chat-fab-icon { width: 12px; height: 12px; } /* Heiler: Bootstrap-.m-3 trägt !important im untersten Layer — für important-Declarations gewinnt dort die SPÄTESTE Deklaration (css-cascade-5, Muster article.css:281). Ohne diesen Block verlöre CH die margin-bottom gegen .m-3. */ @layer bootstrap { .md-chat-dock { margin-bottom: calc(4.5rem + env(safe-area-inset-bottom)) !important; } } /* ---- 3 · Header-Bestandteile ------------------------------------------- */ .md-chat-pulse-dot { width: 7px; height: 7px; /* ehem. #10b981 — theme-aware: Dark #34d399, Light #047857 */ background: var(--color-green, #34d399); } .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 + Fade-in hier real definiert. */ .chat-message-item { min-width: 0; margin-bottom: 0.625rem; 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