/* 💬 Chat-Erweiterungen 2026 – Stile für chat_x.js (Reaktionen, Karten, Bilder, Trenner, Leisten, Fenster, Moderation). Ergänzt den Block #god-chat-v3 in chat_sidebar.php. */
#god-chat-float { --cx-line: rgba(255,255,255,.08); --cx-mut: #8b96a5; --cx-acc: var(--chat-accent, #00bfff); }
#god-chat-float .cx-dot { position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 0 2px #0f1522; font-style: normal; } #god-chat-float .cx-dot[hidden] { display: none; }
#chat-fl-settings { position: relative; }
#view-channels { position: relative; }
.cx-msgwrap { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cx-msgwrap #chat-fl-messages { flex: 1; }
#chat-fl-messages.drop { outline: 2px dashed var(--cx-acc); outline-offset: -8px; background: rgba(0,191,255,.06); }
/* Leisten */
#chat-voice-strip { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 14px; font-size: .78rem; color: #cfe6dc; background: linear-gradient(90deg, rgba(46,204,113,.16), rgba(46,204,113,.04)); border-bottom: 1px solid var(--cx-line); }
#chat-voice-strip[hidden], #chat-pin-bar[hidden], #chat-typing[hidden], #chat-upload-bar[hidden], #chat-cmd-hint[hidden], #chat-newpill[hidden] { display: none !important; }
#chat-voice-strip .vt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #chat-voice-strip b { color: #7cf0ae; }
#chat-voice-strip .vj { flex: none; padding: 4px 12px; border-radius: 999px; font-weight: 700; font-size: .72rem; color: #04150c; background: linear-gradient(135deg, #46e690, #13a95b); text-decoration: none; } #chat-voice-strip .vj:hover { filter: brightness(1.1); }
#chat-pin-bar { display: flex; align-items: center; gap: 8px; padding: 7px 14px; font-size: .78rem; color: #ffe9b0; background: linear-gradient(90deg, rgba(245,196,81,.16), rgba(245,196,81,.04)); border-bottom: 1px solid var(--cx-line); }
#chat-pin-bar .pt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; } #chat-pin-bar b { color: #fff; }
#chat-pin-bar .px { flex: none; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; font-size: .65rem; cursor: pointer; } #chat-pin-bar .px:hover { background: rgba(255,255,255,.25); }
#chat-typing { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 3px 18px 0; min-height: 18px; font-size: .74rem; color: var(--cx-mut); }
#chat-typing .dots { display: inline-block; width: 22px; height: 6px; margin-right: 2px; background: radial-gradient(circle, #8fa0b4 2.4px, transparent 2.6px) 0 50% / 7.3px 6px repeat-x; animation: cxDots 1.1s steps(4, end) infinite; }
@keyframes cxDots { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0 0 0); } }
#chat-typing .sl { color: #ffd27a; }
#chat-upload-bar { margin: 0 12px 6px; padding: 7px 12px; border-radius: 12px; font-size: .8rem; color: #cfe9ff; background: rgba(0,191,255,.14); } #chat-upload-bar.err { background: rgba(255,68,68,.16); color: #ffc3c3; }
#chat-newpill { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 6; padding: 7px 16px; border: 0; border-radius: 999px; font: 700 .78rem var(--cv-font, system-ui); color: #fff; cursor: pointer; background: linear-gradient(135deg, #00a7ff, #5b6cff); box-shadow: 0 8px 22px rgba(0,120,255,.5); animation: cxPill .25s ease-out; } #chat-newpill:hover { filter: brightness(1.1); }
@keyframes cxPill { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
#chat-cmd-hint { position: absolute; left: 12px; right: 12px; bottom: calc(100% + 4px); z-index: 12; border-radius: 14px; overflow: hidden; background: #131a28; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 14px 36px rgba(0,0,0,.55); }
#chat-cmd-hint .ch { padding: 8px 14px; font-size: .82rem; color: #aab4c1; cursor: pointer; } #chat-cmd-hint .ch b { color: #fff; } #chat-cmd-hint .ch:hover { background: rgba(255,255,255,.08); }
/* Datums-Trenner und „Neu“-Linie */
.chat-day, .chat-newline { display: flex; align-items: center; gap: 12px; margin: 4px 0; font-size: .7rem; font-weight: 700; letter-spacing: .04em; color: var(--cx-mut); text-transform: uppercase; }
.chat-day::before, .chat-day::after, .chat-newline::before, .chat-newline::after { content: ''; flex: 1; height: 1px; background: var(--cx-line); }
.chat-newline { color: #ff7a7a; } .chat-newline::before, .chat-newline::after { background: rgba(255,122,122,.45); }
/* Systemzeilen (Befehle, Slot-Gewinne, Hinweise) */
.chat-fl-msg.chat-sys { align-self: center; max-width: 94%; }
.chat-sys .sys-row { position: relative; display: inline-block; padding: 7px 14px; border-radius: 999px; font-size: .84rem; line-height: 1.4; color: #cfd8e3; background: rgba(255,255,255,.06); border: 1px solid var(--cx-line); text-align: center; }
.chat-sys .sys-n { color: #fff; } .chat-sys .sys-t { margin-left: 8px; font-size: .66rem; color: var(--cx-mut); }
.chat-sys.win .sys-row { color: #ffe9b0; background: linear-gradient(90deg, rgba(245,196,81,.2), rgba(255,155,61,.14)); border-color: rgba(245,196,81,.5); }
.chat-sys.note .sys-row { white-space: pre-line; text-align: left; border-radius: 16px; padding: 10px 34px 10px 14px; background: rgba(0,191,255,.1); border-color: rgba(0,191,255,.3); }
.chat-sys .sys-x { margin-left: 8px; width: 20px; height: 20px; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; font-size: .6rem; cursor: pointer; opacity: 0; transition: opacity .15s; } .chat-sys:hover .sys-x, .chat-sys.note .sys-x { opacity: 1; } .chat-sys.note .sys-x { position: absolute; top: 8px; right: 8px; margin: 0; }
/* Karten und Bilder */
.cx-card { margin: 2px 0 4px; padding: 11px 13px; border-radius: 14px; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.1); min-width: 220px; }
.cx-card .cx-h { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8fe9ff; margin-bottom: 4px; } .cx-card .cx-t { font-size: .95rem; font-weight: 700; color: #fff; } .cx-card .cx-m { margin-top: 3px; font-size: .8rem; color: #b5c0cd; }
.cx-card.play { border-color: rgba(46,204,113,.45); background: linear-gradient(135deg, rgba(46,204,113,.14), rgba(0,0,0,.2)); } .cx-card.play .cx-h { color: #7cf0ae; }
.cx-btn { display: inline-block; margin-top: 10px; padding: 8px 15px; border: 0; border-radius: 999px; font: 700 .8rem var(--cv-font, system-ui); text-decoration: none; cursor: pointer; color: #04150c; background: linear-gradient(135deg, #46e690, #13a95b); } .cx-btn:hover { filter: brightness(1.08); } .cx-btn[disabled] { opacity: .6; cursor: wait; }
.cx-btn.done { color: #7cf0ae; background: transparent; border: 1px solid rgba(46,204,113,.7); } .cx-btn.off { color: #8b96a5; background: rgba(255,255,255,.07); cursor: default; filter: none; }
.cx-btn.sec { color: #e6ebf2; background: rgba(255,255,255,.1); margin-top: 0; } .cx-btn.danger { color: #fff; background: linear-gradient(135deg, #ff6b5b, #d92d20); margin-top: 0; }
.cx-img { display: block; max-width: 100%; max-height: 260px; margin: 2px 0 4px; border-radius: 12px; cursor: zoom-in; object-fit: contain; background: rgba(0,0,0,.25); }
.cx-link { color: #8fe9ff; text-decoration: underline; text-underline-offset: 2px; word-break: break-all; } .chat-fl-msg.own .cx-link { color: #fff; }
.cx-link.own { display: inline-block; padding: 1px 10px; border-radius: 999px; text-decoration: none; font-weight: 600; background: rgba(0,191,255,.18); border: 1px solid rgba(0,191,255,.4); word-break: normal; } .cx-link.own:hover { background: rgba(0,191,255,.3); }
.cx-lb { position: fixed; inset: 0; z-index: 100002; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; background: rgba(4,6,10,.9); cursor: zoom-out; } .cx-lb img { max-width: 94vw; max-height: 82vh; border-radius: 14px; box-shadow: 0 20px 80px rgba(0,0,0,.7); cursor: default; }
.cx-lbc { max-width: 80vw; font: 600 .95rem system-ui; color: #e6ebf2; text-align: center; } .cx-lbx { position: absolute; top: 18px; right: 22px; width: 40px; height: 40px; border: 0; border-radius: 50%; font-size: 1rem; color: #fff; background: rgba(255,255,255,.15); cursor: pointer; }
/* Reaktionen */
.cx-react { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } .cx-react:not(.has) { margin-top: 0; height: 0; }
.cx-chip { padding: 2px 9px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(255,255,255,.07); color: #e6ebf2; font: 600 .78rem var(--cv-font, system-ui); cursor: pointer; transition: transform .12s, background .15s; } .cx-chip:hover { transform: scale(1.06); background: rgba(255,255,255,.14); }
.cx-chip.me { background: rgba(0,191,255,.22); border-color: rgba(0,191,255,.6); color: #fff; }
.cx-add { padding: 2px 8px; border: 1px dashed rgba(255,255,255,.2); border-radius: 999px; background: transparent; color: #aab4c1; font: 700 .78rem var(--cv-font, system-ui); cursor: pointer; opacity: 0; transition: opacity .15s; } .chat-fl-msg:hover .cx-add, .cx-react.has .cx-add { opacity: .8; } .cx-add:hover { opacity: 1; color: #fff; border-color: #fff; }
@media (hover: none) { .cx-add { opacity: .8; } }
.cx-rp { position: absolute; z-index: 30; display: flex; flex-wrap: wrap; gap: 2px; width: 262px; padding: 6px; border-radius: 16px; background: #1b2336; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 16px 40px rgba(0,0,0,.6); }
.cx-rb { width: 40px; height: 38px; border: 0; border-radius: 10px; background: transparent; font-size: 1.25rem; cursor: pointer; transition: transform .12s, background .12s; } .cx-rb:hover { background: rgba(255,255,255,.12); transform: scale(1.2); }
.chat-fl-msg.flash .chat-fl-bubble { animation: cxFlash 1.6s ease-out; } @keyframes cxFlash { 0%, 40% { box-shadow: 0 0 0 3px rgba(245,196,81,.9), 0 0 24px rgba(245,196,81,.5); } 100% { box-shadow: none; } }
/* Fenster: Toast, Pop-ups, Moderation */
.cx-toast { position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 40; max-width: 86%; padding: 9px 16px; border-radius: 14px; font-size: .84rem; text-align: center; color: #fff; background: rgba(28,36,54,.97); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 12px 32px rgba(0,0,0,.55); animation: cxPill .2s ease-out; }
.cx-pop { position: absolute; z-index: 35; left: 12px; right: 12px; bottom: 84px; display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 18px; background: #151d2e; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 18px 50px rgba(0,0,0,.65); }
.cx-pop.cx-set { bottom: auto; top: 58px; left: auto; right: 12px; width: 300px; }
.cx-pt { font-size: .82rem; font-weight: 800; color: #fff; margin: 8px 0 4px; } .cx-pop > .cx-pt { margin-top: 0; }
.cx-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .84rem; color: #d3dbe6; } .cx-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: #00bfff; }
.cx-in { width: 100%; padding: 9px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: #fff; font: .86rem var(--cv-font, system-ui); } .cx-row .cx-in { width: auto; } .cx-in:focus { outline: 2px solid rgba(0,191,255,.55); outline-offset: 1px; } select.cx-in option { background: #151d2e; color: #fff; }
.cx-pop .cx-btn { margin-top: 4px; }
#chat-mod-view { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; scrollbar-width: thin; }
.cx-rep { padding: 11px 13px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid var(--cx-line); } .cx-rep .cx-t { margin: 3px 0; font-size: .9rem; color: #fff; overflow-wrap: anywhere; } .cx-rep .cx-m { font-size: .76rem; color: var(--cx-mut); } .cx-rr { display: flex; gap: 8px; margin-top: 8px; }
.cx-empty { padding: 14px; text-align: center; color: var(--cx-mut); font-size: .86rem; }
@media (prefers-reduced-motion: reduce) { #chat-typing .dots, #chat-newpill, .cx-toast, .chat-fl-msg.flash .chat-fl-bubble { animation: none; } }

/* ===== Runde 2: Sprachnachrichten, „＋“-Menü, Aufnahme-Leiste ===== */
.cx-aud { display: flex; align-items: center; gap: 8px; min-width: 230px; max-width: 100%; } .cx-aud .cx-ai { flex: none; font-size: 1.2rem; } .cx-aud audio { flex: 1; min-width: 0; height: 36px; max-width: 100%; } .cx-aud .cx-ad { flex: none; font-size: .72rem; color: var(--cx-mut); }
.chat-fl-msg.own .cx-aud .cx-ad { color: rgba(255,255,255,.75); }
#chat-upload-bar.rec { display: flex; align-items: center; gap: 10px; background: rgba(255,68,68,.14); color: #ffd0d0; }
#chat-upload-bar.rec[hidden] { display: none !important; }
#chat-upload-bar .rd { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 0 3px rgba(255,77,77,.25); animation: cxRec 1s ease-in-out infinite; } @keyframes cxRec { 50% { opacity: .35; } }
#chat-upload-bar .rt { flex: 1; font-weight: 700; } #chat-upload-bar .cx-btn { margin-top: 0; padding: 7px 13px; }
.cx-menu { position: absolute; z-index: 36; left: 12px; bottom: 78px; min-width: 250px; padding: 6px; border-radius: 18px; background: #151d2e; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 18px 50px rgba(0,0,0,.65); }
.cx-mi { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border: 0; border-radius: 12px; background: transparent; color: #e6ebf2; font: 600 .92rem var(--cv-font, system-ui); text-align: left; cursor: pointer; } .cx-mi:hover { background: rgba(255,255,255,.08); } .cx-mi .mi { flex: none; width: 30px; font-size: 1.3rem; text-align: center; }
#chat-fl-plus-btn { font-size: 1.5rem; font-weight: 300; color: #cfd8e3; } #chat-fl-plus-btn:hover { background: rgba(255,255,255,.1); }
html.cx-lock, html.cx-lock body { overflow: hidden; }

/* ===== Handy: Chat als Vollbild, große Tippflächen, kein Zoom beim Tippen, Tastatur-sicher ===== */
@media (max-width: 700px) {
    html #god-chat-float { left: 0; right: 0; top: 0; bottom: auto; width: 100%; height: 100dvh; max-height: none; border-radius: 0; border: 0; box-shadow: none; }
    html #god-chat-float.chat-minimized { height: 62px !important; }
    html #chat-fl-header { padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px; cursor: default; }
    html #chat-fl-title h3 { font-size: 1.1rem; }
    .chat-fl-btn { width: 40px; height: 40px; font-size: 1rem; }
    #chat-fl-nav { padding: 6px 8px; } .chat-fl-nav-btn { padding: 12px 2px; font-size: .8rem; }
    #chat-voice-strip, #chat-pin-bar { padding: 9px 14px; font-size: .84rem; }
    #chat-fl-channels { padding: 8px 10px; } .chat-channel-pill { padding: 9px 16px; font-size: .86rem; }
    #chat-fl-messages, #dm-thread-messages { padding: 12px 10px 8px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
    .chat-fl-msg { max-width: 95%; } .chat-fl-bubble { padding: 9px 13px 10px; } .chat-fl-text { font-size: 1rem; line-height: 1.45; } .chat-fl-user { font-size: .84rem; }
    .chat-fl-input-area { padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px)); }
    .chat-fl-input { font-size: 16px !important; padding: 11px 4px; }
    .chat-fl-send-btn { width: 44px; height: 44px; } .chat-fl-emoji-btn { width: 42px; height: 42px; font-size: 1.3rem; }
    .chat-fl-resize-handle { display: none !important; }
    #chat-fl-emoji-picker { left: 8px; right: 8px; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
    .chat-emoji-item { padding: 8px 0; font-size: 1.35rem; }
    #chat-cmd-hint { left: 10px; right: 10px; } #chat-cmd-hint .ch { padding: 12px 14px; font-size: .9rem; }
    .cx-pop, .cx-pop.cx-set { left: 10px; right: 10px; width: auto; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
    .cx-pop.cx-set { top: calc(58px + env(safe-area-inset-top, 0px)); bottom: auto; }
    .cx-in { font-size: 16px; padding: 11px 13px; } .cx-btn { padding: 11px 18px; font-size: .9rem; }
    .cx-menu { left: 10px; right: 10px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } .cx-mi { padding: 14px 12px; font-size: 1rem; }
    .cx-rp { width: min(272px, calc(100% - 16px)); } .cx-rb { width: 44px; height: 44px; font-size: 1.35rem; }
    .cx-chip { padding: 5px 12px; font-size: .86rem; } .cx-add { padding: 5px 12px; opacity: .85; }
    .chat-fl-msg-action { padding: 8px 13px; font-size: .8rem; }
    .cx-card { min-width: 0; width: 100%; } .cx-img { max-height: 320px; } .cx-aud { min-width: 0; width: 100%; }
    .cx-toast { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); max-width: 92%; }
    .cx-lb img { max-width: 100vw; max-height: 78vh; border-radius: 0; } .cx-lbx { top: calc(14px + env(safe-area-inset-top, 0px)); }
    #chat-mod-view { padding: 12px; } .cx-rr { flex-wrap: wrap; }
    .chat-sys .sys-x { opacity: 1; }
}

/* Touch-Geräte: Aktionen erst nach Antippen einer Nachricht (spart Platz), Reaktions-Plus nur wenn nötig */
@media (hover: none) {
    html #god-chat-float .chat-fl-msg-actions { display: none; position: static; margin-top: 8px; padding: 0; background: transparent; border: 0; box-shadow: none; opacity: 1; transform: none; pointer-events: auto; justify-content: flex-start; flex-wrap: wrap; }
    html #god-chat-float .chat-fl-msg.act .chat-fl-msg-actions { display: flex; }
    html #god-chat-float .cx-react:not(.has) .cx-add { display: none; }
    html #god-chat-float .chat-fl-msg.act .cx-react:not(.has) { height: auto; margin-top: 6px; }
    html #god-chat-float .chat-fl-msg.act .cx-react .cx-add { display: inline-block; opacity: .9; }
    html #god-chat-float .chat-fl-msg.act .chat-fl-bubble { box-shadow: 0 0 0 2px rgba(0,191,255,.55), 0 4px 14px rgba(0,0,0,.28); }
}

/* ===== Runde 3: kleiner und dichter – mehr Nachrichten ohne Scrollen, trotzdem gut lesbar ===== */
@media (min-width: 701px) { html #god-chat-float { width: 386px; height: min(560px, calc(100vh - 110px)); } }
html #chat-fl-header { padding: 9px 13px 8px; } html #chat-fl-title h3 { font-size: .95rem; } .chat-fl-btn { width: 28px; height: 28px; font-size: .74rem; }
#chat-fl-nav { padding: 4px 8px; } .chat-fl-nav-btn { padding: 6px 2px; font-size: .72rem; }
#chat-voice-strip { padding: 4px 12px; font-size: .72rem; } #chat-voice-strip .vj { padding: 2px 10px; font-size: .68rem; }
#chat-pin-bar { padding: 5px 12px; font-size: .72rem; }
#chat-fl-channels { padding: 6px 10px; } .chat-channel-pill { padding: 4px 11px; font-size: .72rem; } .cx-hide { display: none !important; }
#chat-fl-messages, #dm-thread-messages { padding: 8px 10px 6px; gap: 5px; }
.chat-day, .chat-newline { margin: 2px 0; font-size: .62rem; }
.chat-fl-msg { max-width: 95%; }
.chat-fl-bubble { padding: 5px 11px 6px; border-radius: 14px 14px 14px 5px; } .chat-fl-msg.own .chat-fl-bubble { border-radius: 14px 14px 5px 14px; }
.chat-fl-text { font-size: .9rem; line-height: 1.36; } .chat-fl-user { font-size: .74rem; margin-bottom: 1px; } .chat-fl-time { font-size: .62rem; margin-left: 5px; }
.chat-fl-msg.grp { margin-top: -3px; }
/* Text-Nachrichten: Name und Text laufen in EINER Zeile (spart eine Zeile je Nachricht) */
.chat-fl-msg.k-text .chat-fl-user { display: inline; margin: 0 5px 0 0; } .chat-fl-msg.k-text .chat-fl-text { display: inline; }
.chat-fl-msg.k-text .chat-fl-quote { display: block; }
.cx-card { margin: 2px 0 3px; padding: 8px 11px; min-width: 200px; } .cx-card .cx-t { font-size: .88rem; } .cx-card .cx-m { font-size: .76rem; }
.cx-btn { padding: 6px 13px; margin-top: 7px; font-size: .76rem; }
.cx-react { gap: 3px; margin-top: 4px; } .cx-chip { padding: 1px 8px; font-size: .74rem; } .cx-add { padding: 1px 7px; font-size: .74rem; }
.chat-sys .sys-row { padding: 5px 12px; font-size: .8rem; } .cx-img { max-height: 220px; } .cx-aud audio { height: 32px; }
.chat-fl-input-area { padding: 8px 10px 10px; } .chat-fl-input { padding: 7px 4px; font-size: .88rem; } .chat-fl-send-btn { width: 34px; height: 34px; } .chat-fl-emoji-btn { width: 32px; height: 32px; font-size: 1.1rem; }
#chat-typing { min-height: 14px; padding-top: 1px; font-size: .7rem; }
.cx-who { position: absolute; z-index: 40; min-width: 140px; max-width: 240px; max-height: 260px; overflow-y: auto; padding: 8px 10px; border-radius: 14px; background: #1b2336; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 14px 36px rgba(0,0,0,.6); }
.cx-wh { font-size: .74rem; font-weight: 800; color: #8fe9ff; margin-bottom: 4px; } .cx-wn { font-size: .84rem; color: #e6ebf2; padding: 2px 0; } .cx-wn.mut { color: var(--cx-mut); }
@media (max-width: 700px) {
    html #chat-fl-header { padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px; } .chat-fl-btn { width: 36px; height: 36px; font-size: .95rem; }
    .chat-fl-nav-btn { padding: 9px 2px; font-size: .76rem; }
    #chat-voice-strip, #chat-pin-bar { padding: 6px 12px; font-size: .78rem; }
    #chat-fl-channels { padding: 6px 10px; } .chat-channel-pill { padding: 6px 13px; font-size: .8rem; }
    #chat-fl-messages, #dm-thread-messages { padding: 8px 8px 6px; gap: 5px; }
    .chat-fl-msg { max-width: 97%; } .chat-fl-bubble { padding: 6px 12px 7px; } .chat-fl-text { font-size: .95rem; line-height: 1.38; } .chat-fl-user { font-size: .8rem; }
    .chat-fl-input-area { padding: 6px 10px calc(8px + env(safe-area-inset-bottom, 0px)); } .chat-fl-input { padding: 9px 4px; }
    .chat-fl-send-btn { width: 40px; height: 40px; } .chat-fl-emoji-btn { width: 38px; height: 38px; }
    .cx-card { min-width: 0; } .cx-btn { padding: 9px 16px; font-size: .84rem; } .cx-chip { padding: 3px 10px; font-size: .82rem; } .cx-add { padding: 3px 10px; font-size: .82rem; } .cx-img { max-height: 260px; }
}

/* ===== Runde 4: angedockt statt frei schwebend · eigenes Fenster · Breite/Textgröße ===== */
html.cx-docked { --cx-w: 370px; --cx-top: 54px; } html.cx-docked.cx-w-s { --cx-w: 320px; } html.cx-docked.cx-w-l { --cx-w: 450px; }
html.cx-docked #god-chat-float { top: var(--cx-top) !important; bottom: 0 !important; right: 0 !important; left: auto !important; width: var(--cx-w) !important; height: auto !important; max-height: none !important; border-radius: 16px 0 0 0; border-right: 0; border-bottom: 0; box-shadow: -12px 0 38px rgba(0,0,0,.45); transform: none; }
html.cx-docked #god-chat-float.chat-minimized { top: auto !important; height: 46px !important; }
html.cx-docked #chat-fl-header { cursor: default; } html.cx-docked .chat-fl-resize-handle { display: none !important; }
html.cx-docked.cx-pushed body { padding-right: var(--cx-w); }   /* breite Bildschirme: die Seite rückt zur Seite, nichts wird verdeckt */
html.cx-docked #god-chat-tab { bottom: 18px !important; }
/* eigenes Fenster (chat_fenster.php) */
html.cx-win, html.cx-win body { margin: 0; height: 100%; background: #0a0d14; overflow: hidden; }
html.cx-win #god-chat-float { position: fixed !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-height: none !important; border-radius: 0 !important; border: 0 !important; box-shadow: none !important; display: flex !important; opacity: 1 !important; transform: none !important; }
html.cx-win #god-chat-tab, html.cx-win .chat-fl-resize-handle, html.cx-win #chat-fl-popout, html.cx-win [onclick="godMinimizeChat()"] { display: none !important; }
html.cx-win #chat-fl-header { cursor: default; padding-top: 11px; }
@media (max-width: 700px) { #chat-fl-popout { display: none !important; } }
/* Textgröße (⚙) */
html #god-chat-float.cx-fs-s .chat-fl-text { font-size: .82rem; } html #god-chat-float.cx-fs-l .chat-fl-text { font-size: 1rem; line-height: 1.42; }
html #god-chat-float.cx-fs-s .chat-fl-user, html #god-chat-float.cx-fs-s .chat-fl-time { font-size: .68rem; } html #god-chat-float.cx-fs-l .chat-fl-user { font-size: .82rem; }
@media (max-width: 700px) { html #god-chat-float.cx-fs-s .chat-fl-text { font-size: .88rem; } html #god-chat-float.cx-fs-l .chat-fl-text { font-size: 1.06rem; } }

/* ===== Runde 5: kein seitliches Überlaufen (lange Wörter/Links/Zitate), Profil-Reiter entfällt ===== */
#chat-fl-messages, #dm-thread-messages { overflow-x: hidden; }
.chat-fl-msg { min-width: 0; } .chat-fl-bubble { min-width: 0; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
.chat-fl-text, .chat-fl-user, .cx-card .cx-t, .cx-card .cx-m { overflow-wrap: anywhere; }
.cx-link { overflow-wrap: anywhere; word-break: break-all; }
.chat-fl-quote { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#chat-fl-nav { overflow: hidden; } .chat-fl-nav-btn { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#nav-btn-profile { display: none !important; }   /* das Profil bearbeitet man über ⚙ → „Mein Profil bearbeiten“; die Ansicht selbst bleibt per Klick auf einen Namen erreichbar */

/* ===== Runde 6: Der Antwort-Hinweis („Antwort an …“) darf das Chat-Fenster nie breiter machen ===== */
/* Ursache des Anzeige-Bugs: Bei „Antworten“ stand der lange Zitat-Text im Hinweis über dem Eingabefeld; das Abbrechen-Kreuz rutschte aus dem Fenster, der ganze Chat wurde breiter als das Fenster
   und beim Fokussieren des Eingabefelds verschob der Browser den Inhalt nach links – die Reiterleiste war dann nur teilweise sichtbar. */
html #god-chat-float { overflow: hidden; overflow: clip; }
#chat-fl-body, .chat-view, .cx-msgwrap { min-width: 0; max-width: 100%; }
#chat-reply-banner { min-width: 0; max-width: 100%; box-sizing: border-box; overflow: hidden; }
#chat-reply-banner > span:first-child { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-reply-snippet { display: inline; max-width: none; }
.chat-reply-cancel { flex: none; padding: 4px 6px; }

/* ===== Runde 7: Die Aktionsleiste (Antworten · PN · Löschen …) bleibt immer vollständig im Fenster ===== */
/* Ursache: Sie hing rechts an der (bei kurzen Nachrichten schmalen) Blase und ragte deshalb nach links aus dem Chat heraus („WORT · PN · LÖSCHEN“). Jetzt hängt sie an der ganzen Nachrichtenzeile:
   bei fremden Nachrichten links, bei eigenen rechts bündig, und sie bricht bei Platzmangel um. */
.chat-fl-msg { position: relative; } .chat-fl-bubble { position: static; }
#chat-fl-messages { padding-top: 14px; }
.chat-fl-msg-actions { top: -13px; z-index: 8; max-width: 100%; flex-wrap: wrap; }
.chat-fl-msg:not(.own) .chat-fl-msg-actions { left: 0; right: auto; }
.chat-fl-msg.own .chat-fl-msg-actions { right: 0; left: auto; }
@media (hover: none) { html #god-chat-float .chat-fl-msg-actions { position: static; } }

/* ===== Runde 8: eigener Sprachnachrichten-Player ===== */
.cx-ap { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 236px; max-width: 320px; box-sizing: border-box; padding: 6px 12px 6px 6px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.chat-fl-msg.own .cx-ap { background: rgba(0,0,0,.2); border-color: rgba(255,255,255,.16); }
.cx-ap.err { padding: 8px 14px; border-radius: 14px; }
.ap-btn { flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; color: #04150c; cursor: pointer; background: linear-gradient(135deg, #46e690, #13a95b); box-shadow: 0 6px 16px rgba(46,204,113,.35), inset 0 1px 0 rgba(255,255,255,.4); transition: transform .15s, box-shadow .2s; }
.ap-btn:hover { transform: scale(1.07); } .ap-btn:active { transform: scale(.95); } .ap-btn svg { width: 17px; height: 17px; margin-left: 2px; } .cx-ap.playing .ap-btn svg { margin-left: 0; }
.cx-ap.playing .ap-btn { box-shadow: 0 0 0 4px rgba(70,230,144,.2), 0 6px 18px rgba(46,204,113,.5), inset 0 1px 0 rgba(255,255,255,.4); }
.chat-fl-msg.own .ap-btn { color: #2a56e8; background: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.28); } .chat-fl-msg.own .cx-ap.playing .ap-btn { box-shadow: 0 0 0 4px rgba(255,255,255,.25), 0 6px 18px rgba(0,0,0,.3); }
.ap-wave { flex: 1 1 auto; min-width: 0; height: 34px; display: flex; align-items: center; gap: 2px; cursor: pointer; touch-action: none; outline: none; border-radius: 8px; }
.ap-wave:focus-visible { box-shadow: 0 0 0 2px rgba(0,191,255,.7); }
.ap-wave i { flex: 1 1 0; min-width: 2px; max-width: 5px; border-radius: 3px; background: rgba(255,255,255,.26); transition: background .12s, height .35s ease; }
.ap-wave i.on { background: #7fe9ff; } .chat-fl-msg.own .ap-wave i { background: rgba(255,255,255,.32); } .chat-fl-msg.own .ap-wave i.on { background: #fff; }
.cx-ap.playing .ap-wave i.on:nth-last-child(n) { box-shadow: 0 0 6px rgba(127,233,255,.45); } .chat-fl-msg.own .cx-ap.playing .ap-wave i.on { box-shadow: 0 0 6px rgba(255,255,255,.5); }
.ap-meta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.ap-time { font-size: .74rem; font-weight: 700; font-variant-numeric: tabular-nums; color: #d6dee8; } .chat-fl-msg.own .ap-time { color: #fff; }
.ap-spd { padding: 1px 7px; border: 0; border-radius: 999px; background: rgba(255,255,255,.11); color: #cfd8e3; font: 700 .64rem var(--cv-font, system-ui); cursor: pointer; } .ap-spd:hover { background: rgba(255,255,255,.2); } .chat-fl-msg.own .ap-spd { background: rgba(0,0,0,.2); color: #fff; }
@media (max-width: 700px) { .cx-ap { max-width: 100%; min-width: 0; } .ap-btn { width: 44px; height: 44px; } .ap-wave { height: 38px; } .ap-spd { padding: 3px 9px; font-size: .7rem; } }
@media (prefers-reduced-motion: reduce) { .ap-wave i, .ap-btn { transition: none; } }

/* ===== Runde 9: Handy – Aktionsmenü von unten, scrollbare Befehle, Reaktions-Knopf, Avatar-Schutz ===== */
.chat-fl-avatar { flex: 0 0 36px; width: 36px; height: 36px; min-width: 36px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; overflow: hidden; }
.chat-fl-msg.grp .chat-fl-avatar { flex-basis: 36px; height: 0; min-height: 0; }
/* Reaktions-Chip „😊+“ nur bei Nachrichten mit Reaktionen sichtbar (sonst über die Aktionsleiste/das Menü) */
.cx-react:not(.has) .cx-add { display: none; }
.cx-react.has .cx-add { opacity: .75; padding: 2px 9px; border-style: solid; border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.06); color: #dbe3ee; font-size: .78rem; } .cx-react.has .cx-add:hover { opacity: 1; background: rgba(255,255,255,.14); }
/* Menü von unten */
@keyframes cxFade { from { opacity: 0; } to { opacity: 1; } } @keyframes cxUp { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
.cx-sheet { position: absolute; inset: 0; z-index: 45; display: flex; flex-direction: column; justify-content: flex-end; }
.cx-sb { position: absolute; inset: 0; background: rgba(3,5,9,.62); animation: cxFade .15s ease-out; }
.cx-sp { position: relative; max-height: 80%; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px)); border-radius: 22px 22px 0 0; background: #151d2e; border-top: 1px solid rgba(255,255,255,.12); box-shadow: 0 -18px 50px rgba(0,0,0,.6); animation: cxUp .2s ease-out; }
.cx-sp::before { content: ''; display: block; width: 40px; height: 4px; margin: -4px auto 12px; border-radius: 2px; background: rgba(255,255,255,.22); }
.cx-sh { margin: 0 2px 12px; padding-bottom: 10px; font-size: .86rem; color: #aab4c1; border-bottom: 1px solid var(--cx-line); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cx-sh b { color: #fff; }
.cx-sr { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin-bottom: 10px; }
.cx-se { height: 54px; border: 0; border-radius: 15px; background: rgba(255,255,255,.07); font-size: 1.7rem; cursor: pointer; transition: transform .1s, background .15s; } .cx-se:active { transform: scale(.92); } .cx-se.me { background: rgba(0,191,255,.25); box-shadow: inset 0 0 0 2px rgba(0,191,255,.65); }
.cx-sa { display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 12px; border: 0; border-radius: 14px; background: transparent; color: #e6ebf2; font: 600 1rem var(--cv-font, system-ui); text-align: left; cursor: pointer; } .cx-sa:hover, .cx-sa:active { background: rgba(255,255,255,.08); }
.cx-sa .si { flex: none; width: 28px; text-align: center; font-size: 1.25rem; } .cx-sa .st { min-width: 0; } .cx-sa .sl { display: block; } .cx-sa small { display: block; margin-top: 1px; font-weight: 500; font-size: .8rem; color: #8b96a5; }
.cx-sa.danger { color: #ff9a9a; } .cx-sa.mut { color: var(--cx-mut); }
/* Inline-Befehlsliste beim Tippen von „/“: begrenzt und scrollbar */
#chat-cmd-hint { max-height: min(40vh, 250px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* Touch: Aktionsleiste an der Nachricht entfällt – dafür gibt es das Menü beim Antippen */
@media (hover: none) { html #god-chat-float .chat-fl-msg-actions { display: none !important; } html #god-chat-float .chat-fl-msg { -webkit-tap-highlight-color: rgba(0,191,255,.12); } }
@media (prefers-reduced-motion: reduce) { .cx-sb, .cx-sp { animation: none; } }

/* ===== Runde 10: schlanker – weniger Umrandung/Polster, kleinerer Sprachnachrichten-Player, immer sichtbares Mikrofon ===== */
.chat-fl-bubble { padding: 4px 10px 5px; border-radius: 12px 12px 12px 4px; box-shadow: none; }
.chat-fl-msg.own .chat-fl-bubble { padding: 4px 10px 5px; border-radius: 12px 12px 4px 12px; box-shadow: none; }
.chat-fl-msg.grp .chat-fl-bubble { border-top-left-radius: 4px; } .chat-fl-msg.own.grp .chat-fl-bubble { border-top-left-radius: 12px; border-top-right-radius: 4px; }
#chat-fl-messages, #dm-thread-messages { gap: 3px; }
.chat-fl-msg { gap: 7px; } .chat-fl-avatar { flex-basis: 30px; width: 30px; height: 30px; min-width: 30px; }
.chat-fl-text { font-size: .88rem; line-height: 1.32; } .chat-fl-user { font-size: .72rem; margin-bottom: 0; } .chat-fl-time { font-size: .6rem; }
/* eigene Nachrichten: Uhrzeit in derselben Zeile statt eigener Zeile darunter */
.chat-fl-msg.own.k-text .chat-fl-text { display: inline; }
.chat-fl-msg.own .chat-fl-time { display: inline !important; margin: 0 0 0 7px !important; text-align: left !important; font-size: .6rem; }
.chat-fl-quote { padding: 3px 8px; margin-bottom: 3px; font-size: .72rem; }
.cx-react { margin-top: 3px; } .cx-chip { padding: 0 7px; font-size: .72rem; }
.cx-card { padding: 6px 10px; margin: 1px 0 2px; min-width: 190px; } .cx-card .cx-h { font-size: .64rem; margin-bottom: 2px; } .cx-card .cx-t { font-size: .84rem; }
.cx-btn { padding: 5px 12px; margin-top: 5px; font-size: .74rem; }
/* Sprachnachrichten-Player: schlank */
.cx-ap { gap: 7px; min-width: 188px; max-width: 250px; padding: 2px 9px 2px 2px; border: 0; background: rgba(255,255,255,.05); box-shadow: none; }
.chat-fl-msg.own .cx-ap { background: rgba(0,0,0,.16); border: 0; }
.ap-btn { width: 30px; height: 30px; box-shadow: none; } .ap-btn svg { width: 13px; height: 13px; margin-left: 1px; } .cx-ap.playing .ap-btn { box-shadow: 0 0 0 3px rgba(70,230,144,.22); }
.chat-fl-msg.own .ap-btn { box-shadow: none; } .chat-fl-msg.own .cx-ap.playing .ap-btn { box-shadow: 0 0 0 3px rgba(255,255,255,.28); }
.ap-wave { height: 22px; gap: 1.5px; } .ap-wave i { max-width: 4px; min-width: 2px; border-radius: 2px; }
.cx-ap.playing .ap-wave i.on, .chat-fl-msg.own .cx-ap.playing .ap-wave i.on { box-shadow: none; }
.ap-meta { flex-direction: row; align-items: center; gap: 6px; } .ap-time { font-size: .7rem; } .ap-spd { padding: 0 6px; font-size: .6rem; }
/* Mikrofon-Knopf neben dem Senden-Knopf */
#chat-fl-mic-btn { color: #cfd8e3; } #chat-fl-mic-btn:hover { background: rgba(255,255,255,.1); }
#chat-fl-mic-btn.recording { color: #fff; background: #e5483b; box-shadow: 0 0 0 4px rgba(229,72,59,.3); animation: cxRec 1s ease-in-out infinite; }
#chat-upload-bar { padding: 5px 10px; font-size: .78rem; }
@media (max-width: 700px) {
    .chat-fl-bubble, .chat-fl-msg.own .chat-fl-bubble { padding: 5px 11px 6px; }
    .chat-fl-text { font-size: .93rem; line-height: 1.34; } .chat-fl-avatar { flex-basis: 32px; width: 32px; height: 32px; min-width: 32px; }
    .cx-ap { min-width: 0; max-width: 100%; } .ap-btn { width: 36px; height: 36px; } .ap-wave { height: 26px; } .ap-spd { padding: 2px 8px; font-size: .68rem; }
    .chat-fl-emoji-btn, #chat-fl-mic-btn { width: 36px; height: 36px; }
}
.chat-fl-msg.own:not(.k-text) .chat-fl-time { display: block !important; margin: 1px 0 0 !important; line-height: 1; text-align: right !important; }

/* ===== Runde 11: angedockter Chat liegt UNTER der Navigationsleiste (Profil-/Untermenüs klappen über dem Chat auf) ===== */
@media (min-width: 701px) { html.cx-docked #god-chat-float { z-index: 10020 !important; } }

/* ===== Runde 12a: Höhe des angedockten Chats (Standard Mittel 560 px, unten rechts, Seite wird nicht verschoben) + großes, frei skalierbares eigenes Fenster ===== */
@media (min-width: 701px) {
    html.cx-docked:not(.cx-h-f) #god-chat-float:not(.chat-minimized) { top: auto !important; bottom: 0 !important; height: min(560px, calc(100vh - var(--cx-top) - 14px)) !important; box-shadow: 0 0 0 1px rgba(255,255,255,.07), -10px -6px 34px rgba(0,0,0,.42); }
    html.cx-docked.cx-h-s:not(.cx-h-f) #god-chat-float:not(.chat-minimized) { height: min(420px, calc(100vh - var(--cx-top) - 14px)) !important; }
    html.cx-docked.cx-h-l:not(.cx-h-f) #god-chat-float:not(.chat-minimized) { height: min(720px, calc(100vh - var(--cx-top) - 14px)) !important; }
}
/* Eigenes Fenster / Tab: je breiter, desto größer Text und Bilder; der Inhalt bleibt in einer lesbaren Spalte in der Mitte */
@media (min-width: 760px) {
    html.cx-win #chat-fl-messages, html.cx-win .chat-fl-input-area, html.cx-win #chat-fl-channels, html.cx-win #chat-voice-strip, html.cx-win #chat-pin-bar, html.cx-win #chat-typing { padding-left: max(16px, calc((100% - 900px) / 2)); padding-right: max(16px, calc((100% - 900px) / 2)); }
    html.cx-win .chat-fl-text { font-size: 1rem; line-height: 1.4; } html.cx-win .chat-fl-user { font-size: .8rem; } html.cx-win .chat-fl-time { font-size: .68rem; }
    html.cx-win .chat-fl-avatar { flex-basis: 38px; width: 38px; height: 38px; min-width: 38px; }
    html.cx-win .chat-fl-input { font-size: 1rem; }
}
@media (min-width: 1300px) {
    html.cx-win #chat-fl-messages, html.cx-win .chat-fl-input-area, html.cx-win #chat-fl-channels, html.cx-win #chat-voice-strip, html.cx-win #chat-pin-bar, html.cx-win #chat-typing { padding-left: max(24px, calc((100% - 1040px) / 2)); padding-right: max(24px, calc((100% - 1040px) / 2)); }
    html.cx-win .chat-fl-text { font-size: 1.06rem; }
}

/* ===== Runde 12b: ruhiges, flaches Design – Profilbilder immer links, fremde Nachrichten ohne Blase, eigene nur leicht getönt, Kompakt-Modus entfällt ===== */
#god-chat-float { background: #0d121b; border-color: rgba(255,255,255,.07); }
/* Kopf & Reiter: schlank */
#chat-fl-header { padding: 9px 12px 8px; border-bottom: 1px solid rgba(255,255,255,.06); }
#chat-fl-title h3 { font-size: .9rem; font-weight: 650; letter-spacing: 0; }
#chat-fl-title .chat-fl-dot { width: 7px; height: 7px; box-shadow: none; animation: none; }
.chat-fl-btn { opacity: .55; border-radius: 8px; } .chat-fl-btn:hover { opacity: 1; background: rgba(255,255,255,.08); }
#chat-fl-nav { padding: 0 6px; gap: 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.chat-fl-nav-btn { padding: 8px 6px !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; border-bottom: 2px solid transparent !important; font-size: .74rem; color: #8793a3; }
.chat-fl-nav-btn:hover { color: #dfe6ef; }
.chat-fl-nav-btn.active { color: #fff; border-bottom-color: #3da5ff !important; }
/* Discord-Hinweis: leise Zeile statt grünem Block */
#chat-voice-strip { background: none; padding: 4px 12px; font-size: .7rem; color: #8793a3; border-bottom: 1px solid rgba(255,255,255,.05); }
#chat-voice-strip b { color: #b9c6d6; font-weight: 600; }
#chat-voice-strip .vj { padding: 2px 10px; font-size: .66rem; font-weight: 600; color: #cfd8e3; background: rgba(255,255,255,.09); }
#chat-voice-strip .vj:hover { background: rgba(255,255,255,.16); filter: none; }
/* Nachrichten: Profilbild IMMER links, fremde Nachrichten flach, eigene dezent blau getönt */
.chat-fl-msg, .chat-fl-msg.own { flex-direction: row; align-self: stretch; max-width: 100%; gap: 9px; padding: 2px 6px; border-radius: 10px; }
.chat-fl-msg:hover { background: rgba(255,255,255,.03); }
.chat-fl-msg.grp { margin-top: -3px; }
.chat-fl-bubble, .chat-fl-msg.own .chat-fl-bubble { padding: 1px 0 2px; border: 0; border-radius: 0; background: none; box-shadow: none; min-width: 0; }
.chat-fl-msg.own .chat-fl-bubble { padding: 3px 10px 4px; border-radius: 4px 12px 12px 12px; background: rgba(61,140,255,.17); }
.chat-fl-msg.own.grp .chat-fl-bubble { border-top-left-radius: 12px; }
.chat-fl-text, .chat-fl-msg.own .chat-fl-text { color: #e4eaf2; }
.chat-fl-user { margin-bottom: 0; }
.chat-fl-time, .chat-fl-msg.own .chat-fl-time { color: #6b7686; opacity: .8; font-size: .62rem; }
.chat-fl-avatar { box-shadow: none; }
.chat-fl-quote, .chat-fl-msg.own .chat-fl-quote { background: rgba(255,255,255,.05); border-left: 2px solid rgba(61,165,255,.7); border-radius: 6px; color: #aeb9c8; }
.chat-fl-msg.own .chat-fl-quote b { color: #dbe6f5; }
.chat-day { color: #6b7686; }
/* Reaktionen, Karten, Player: flacher */
.cx-chip { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
.cx-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); box-shadow: none; }
.cx-ap, .chat-fl-msg.own .cx-ap { background: rgba(255,255,255,.06); }
/* Eingabe: ruhige Pille, kleiner Senden-Knopf */
.chat-fl-input-area { padding: 6px 8px 8px; border-top: 1px solid rgba(255,255,255,.06); background: none; }
.chat-fl-input-row { gap: 2px; padding: 3px 4px 3px 6px; border-radius: 999px; background: rgba(255,255,255,.055); border: 1px solid transparent; box-shadow: none; }
.chat-fl-input-row:focus-within { border-color: rgba(61,165,255,.45); box-shadow: none; }
.chat-fl-emoji-btn { opacity: .6; } .chat-fl-emoji-btn:hover { opacity: 1; }
.chat-fl-send-btn { width: 30px; height: 30px; box-shadow: none; }
.chat-fl-send-btn svg { width: 15px; height: 15px; }
.chat-fl-msg.own .chat-fl-time { display: inline !important; margin: 0 0 0 7px !important; text-align: left !important; }
.chat-fl-msg.own:not(.k-text) .chat-fl-time { display: block !important; margin: 1px 0 0 !important; text-align: left !important; }
@media (min-width: 760px) { html.cx-win #chat-fl-nav, html.cx-win #chat-win-strip { padding-left: max(16px, calc((100% - 900px) / 2)); padding-right: max(16px, calc((100% - 900px) / 2)); } }
@media (min-width: 1300px) { html.cx-win #chat-fl-nav, html.cx-win #chat-win-strip { padding-left: max(24px, calc((100% - 1040px) / 2)); padding-right: max(24px, calc((100% - 1040px) / 2)); } }

/* ===== Runde 13: Seitenwechsel ohne Flackern ===== */
/* Chat erscheint nach einem Seitenwechsel sofort (keine Einblend-Animation) und zeigt gleich die letzten Nachrichten (Platzhalter bis die echten geladen sind) */
#god-chat-float.cx-noanim, #god-chat-float.cx-noanim * { transition: none !important; animation: none !important; }
html.cx-snapped #chat-fl-loading { display: none !important; }
.cx-snapchild { pointer-events: none; }
/* Browser mit „View Transitions“ (Chrome/Edge/Safari neu): Navigation und Chat bleiben beim Seitenwechsel stehen, nur der Inhalt blendet kurz über */
@view-transition { navigation: auto; }
#gnav { view-transition-name: gnav; }
html:not(.cx-win) #god-chat-float.chat-open { view-transition-name: godchat; }
::view-transition-group(gnav), ::view-transition-group(godchat) { animation: none; }
::view-transition-old(gnav), ::view-transition-old(godchat) { display: none; }
::view-transition-new(gnav), ::view-transition-new(godchat) { animation: none; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .14s; }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

/* ===== Runde 14: kein sichtbares Hochscrollen/Runterscrollen beim Laden (Nachrichtenliste springt sofort ans Ende; weiches Scrollen nur noch auf ausdrücklichen Wunsch im Code) ===== */
#chat-fl-messages, #dm-thread-messages { scroll-behavior: auto !important; }

/* ===== Runde 15: WhatsApp-Stil in den Farben der Webseite – Blasen mit Spitze, eigene rechts, fremde links mit Profilbild, Uhrzeit unten rechts, Datum als Pille ===== */
#god-chat-float { --wa-bg: #0a1018; --wa-in: #19222f; --wa-out: #0b5f94; --wa-acc: #00bfff; }
#chat-fl-messages, #dm-thread-messages { background-color: var(--wa-bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='none' stroke='%2300bfff' stroke-opacity='.055' stroke-width='1.3' stroke-linecap='round'%3E%3Ccircle cx='22' cy='24' r='6'/%3E%3Cpath d='M78 18l9 9m0-9l-9 9'/%3E%3Crect x='30' y='86' width='11' height='11' rx='2.5'/%3E%3Cpath d='M104 90l6 10 6-10z'/%3E%3Cpath d='M112 30a7 7 0 1 1-.1 0'/%3E%3Cpath d='M70 110h14m-7-7v14'/%3E%3C/g%3E%3C/svg%3E"); padding: 10px 8px 8px; gap: 2px; }
/* Zeilen */
.chat-fl-msg, .chat-fl-msg.own { flex-direction: row; align-self: stretch; max-width: 100%; gap: 7px; padding: 0 2px; border-radius: 0; background: none !important; }
.chat-fl-msg:hover { background: none; }
.chat-fl-msg.own { flex-direction: row-reverse; }
.chat-fl-msg:not(.grp):not(.chat-sys) { margin-top: 7px; } .chat-fl-msg.grp { margin-top: 0; }
.chat-fl-msg.own .chat-fl-avatar { display: none; }
/* Blasen */
.chat-fl-bubble, .chat-fl-msg.own .chat-fl-bubble { position: relative; max-width: min(80%, 440px); min-width: 64px; padding: 5px 9px 6px; border: 0; border-radius: 9px; background: var(--wa-in); box-shadow: 0 1px 1px rgba(0,0,0,.4); color: #e8edf5; }
.chat-fl-msg.own .chat-fl-bubble { background: var(--wa-out); }
.chat-fl-msg:not(.own):not(.grp) .chat-fl-bubble { border-top-left-radius: 0; } .chat-fl-msg.own:not(.grp) .chat-fl-bubble { border-top-right-radius: 0; }
.chat-fl-msg:not(.own):not(.grp):not(.chat-sys) .chat-fl-bubble::before, .chat-fl-msg.own:not(.grp):not(.chat-sys) .chat-fl-bubble::before { content: ''; position: absolute; top: 0; width: 9px; height: 13px; background: inherit; }
.chat-fl-msg:not(.own):not(.grp):not(.chat-sys) .chat-fl-bubble::before { left: -8px; clip-path: polygon(100% 0, 0 0, 100% 100%); }
.chat-fl-msg.own:not(.grp):not(.chat-sys) .chat-fl-bubble::before { right: -8px; clip-path: polygon(0 0, 100% 0, 0 100%); }
/* Name oben in der Blase, Text darunter */
.chat-fl-msg.k-text .chat-fl-user, .chat-fl-user { display: block; margin: 0 0 1px; font-size: .76rem; font-weight: 700; line-height: 1.25; }
.chat-fl-msg.k-text .chat-fl-text, .chat-fl-msg.own.k-text .chat-fl-text { display: block; }
.chat-fl-msg.grp .chat-fl-user { display: block; height: 0; margin: 0; overflow: visible; } .chat-fl-msg.grp .chat-fl-username-text { display: none; }
.chat-fl-text, .chat-fl-msg.own .chat-fl-text { color: #e8edf5; }
.chat-fl-text::after { content: ''; display: inline-block; width: 52px; height: 1px; }   /* Platz für die Uhrzeit in der letzten Zeile */
/* Uhrzeit unten rechts in der Blase */
.chat-fl-time, .chat-fl-msg.own .chat-fl-time { position: absolute !important; right: 8px; bottom: 3px; margin: 0 !important; display: block !important; text-align: right !important; font-size: .62rem; line-height: 1; color: rgba(255,255,255,.52); opacity: 1; }
.chat-fl-msg.own .chat-fl-time::after { content: ' ✓'; }
.chat-fl-msg:not(.k-text):not(.chat-sys) .chat-fl-bubble { padding-bottom: 19px; }
.chat-fl-msg.chat-sys .chat-fl-time { position: static !important; }
/* Zitat in der Blase */
.chat-fl-quote, .chat-fl-msg.own .chat-fl-quote { margin: 1px 0 4px; padding: 4px 8px; border-left: 3px solid var(--wa-acc); border-radius: 6px; background: rgba(0,0,0,.24); color: #c3cfdd; }
.chat-fl-msg.own .chat-fl-quote { border-left-color: #8fd8ff; }
/* Datum als Pille, Systemzeilen mittig */
.chat-day { align-self: center; justify-content: center; margin: 8px 0 4px; padding: 4px 11px; border-radius: 8px; background: rgba(25,34,47,.94); box-shadow: 0 1px 1px rgba(0,0,0,.35); font-size: .66rem; letter-spacing: .03em; color: #9fb0c4; }
.chat-day::before, .chat-day::after { display: none; }
.chat-newline { align-self: stretch; }
.chat-sys .sys-row { background: rgba(25,34,47,.94); border: 0; box-shadow: 0 1px 1px rgba(0,0,0,.35); }
/* Reaktionen: kleine Pille am unteren Rand der Blase */
.cx-react.has { position: absolute; bottom: -13px; left: 8px; margin: 0; z-index: 2; }
.chat-fl-msg.own .cx-react.has { left: auto; right: 8px; }
.chat-fl-msg:has(.cx-react.has) { margin-bottom: 15px; }
.cx-chip { background: #222d3e; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 1px 2px rgba(0,0,0,.4); }
/* Karten und Sprachnachricht in der Blase */
.cx-ap, .chat-fl-msg.own .cx-ap { background: rgba(0,0,0,.2); }
.cx-card { background: rgba(0,0,0,.2); border: 0; }
/* Eingabe: Pille + runder Knopf; Mikrofon bei leerem Feld, Senden-Pfeil sobald Text da ist */
.chat-fl-input-area { padding: 6px 8px 8px; border-top: 0; background: var(--wa-bg); }
.chat-fl-input-row { gap: 2px; padding: 3px 4px 3px 8px; border-radius: 999px; background: #1b2635; border: 0; box-shadow: none; }
.chat-fl-input-row:focus-within { box-shadow: 0 0 0 1px rgba(0,191,255,.35); }
#chat-fl-mic-btn, .chat-fl-send-btn { flex: none; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #00a7ff, #1f6df2); color: #fff; opacity: 1; box-shadow: none; }
#chat-fl-mic-btn:hover { background: linear-gradient(135deg, #17b3ff, #3b7df5); }
#chat-fl-mic-btn.recording { background: #e5483b; }
#chat-fl-input:not(:placeholder-shown) ~ #chat-fl-mic-btn { display: none; }
#chat-fl-input:placeholder-shown ~ .chat-fl-send-btn { display: none; }
html.cx-win .chat-fl-bubble { max-width: min(70%, 640px); }

/* ===== Runde 16: Aktionen an Nachrichten – Maus: schmale Leiste an der Blase (Gefällt mir · Reagieren · Antworten · Mehr) + Kontextmenü; Handy: Antippen = Menü, nach rechts wischen = antworten ===== */
.chat-fl-msg { position: relative; }
.cx-ab { position: absolute; top: -15px; right: 6px; z-index: 7; display: flex; gap: 1px; padding: 2px; border-radius: 999px; background: #1b2536; border: 1px solid rgba(255,255,255,.13); box-shadow: 0 6px 18px rgba(0,0,0,.5); opacity: 0; pointer-events: none; transform: translateY(3px); transition: opacity .12s, transform .12s; }
.chat-fl-msg.own .cx-ab { right: auto; left: 6px; }
.chat-fl-msg:hover .cx-ab, .chat-fl-msg:focus-within .cx-ab { opacity: 1; pointer-events: auto; transform: none; }
.cx-ib { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #dbe5f1; font-size: .92rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .12s, transform .1s; }
.cx-ib:hover, .cx-ib:focus-visible { background: rgba(255,255,255,.13); transform: scale(1.12); outline: none; } .cx-ib.like:hover { background: rgba(0,191,255,.28); } .cx-ib.more { font-weight: 800; letter-spacing: .04em; padding-bottom: 3px; }
/* Kontextmenü (⋯ oder Rechtsklick) */
.cx-ctx { position: absolute; z-index: 40; min-width: 196px; padding: 6px; border-radius: 14px; background: #17202f; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 16px 40px rgba(0,0,0,.6); animation: cxFade .1s ease-out; }
.cx-ci { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px; border: 0; border-radius: 9px; background: transparent; color: #e6ebf2; font: 600 .86rem system-ui, sans-serif; text-align: left; cursor: pointer; }
.cx-ci:hover, .cx-ci:focus-visible { background: rgba(255,255,255,.09); outline: none; } .cx-ci.danger { color: #ff9a9a; } .cx-ci .ci-i { flex: none; width: 22px; text-align: center; font-size: 1rem; }
/* Emoji-Auswahl: aufgeräumtes Raster */
.cx-rp { display: grid; grid-template-columns: repeat(5, 40px); gap: 2px; width: auto; padding: 6px; border-radius: 22px; background: #17202f; }
.cx-rb { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; font-size: 1.35rem; cursor: pointer; transition: transform .1s, background .12s; } .cx-rb:hover { background: rgba(255,255,255,.12); transform: scale(1.18); }
/* Wischen zum Antworten (Handy) */
.chat-fl-msg:not(.chat-sys)::before { content: '↩'; position: absolute; left: 10px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; background: rgba(0,191,255,.25); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1rem; opacity: 0; transform: scale(.55); pointer-events: none; }
.chat-fl-msg.cx-pulling::before { opacity: var(--pp, 0); transform: scale(calc(.55 + var(--pp, 0) * .45)); }
@media (hover: none) { .cx-ab { display: none !important; } .chat-fl-msg { touch-action: pan-y; } }

/* ===== Runde 17: Reaktionen sauber unter dem Text in der Blase (kein Überlappen mehr), Reaktions-Knopf nur noch über die Leiste/das Menü ===== */
.cx-react:not(.has) { display: none; }
.cx-react .cx-add { display: none !important; }
.cx-react.has { position: static; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 5px 0 0; padding-right: 50px; min-width: 0; }
.chat-fl-msg:has(.cx-react.has), .chat-fl-msg.own:has(.cx-react.has) { margin-bottom: 0; }
.cx-chip { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: 999px; font-size: .76rem; line-height: 1.5; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.12); box-shadow: none; color: #e8edf5; }
.cx-chip.me { background: rgba(0,191,255,.28); border-color: rgba(0,191,255,.6); }
.chat-fl-msg:has(.cx-react.has) .chat-fl-bubble { padding-bottom: 7px; min-width: 112px; }

/* ===== Runde 18: eigenes Fenster als normaler Tab → Chat bleibt in Chat-Größe (max. 640 px, mittig); als Fenster füllt er es und passt sich beim Vergrößern an ===== */
html.cx-win.cx-tab #god-chat-float { inset: 0 auto 0 50% !important; transform: translateX(-50%) !important; width: min(100%, 640px) !important; border-left: 1px solid rgba(255,255,255,.09) !important; border-right: 1px solid rgba(255,255,255,.09) !important; }

/* ===== Runde 19: Spiel-Meldungen („hat gesiegt“, Winstreak …) liegen bei geöffnetem Chat ÜBER dem Chat statt davor ===== */
html.cx-docked:has(#god-chat-float.chat-open) #toast-container { left: auto; right: 12px; width: var(--cx-w, 370px); max-width: var(--cx-w, 370px); bottom: calc(min(560px, 100vh - var(--cx-top, 54px) - 14px) + 14px); max-height: calc(100vh - var(--cx-top, 54px) - 60px); overflow: hidden; }
html.cx-docked.cx-h-s:has(#god-chat-float.chat-open) #toast-container { bottom: calc(min(420px, 100vh - var(--cx-top, 54px) - 14px) + 14px); }
/* hoher/voller Chat: kein Platz darüber → Meldungen links neben dem Chat */
html.cx-docked.cx-h-l:has(#god-chat-float.chat-open) #toast-container, html.cx-docked.cx-h-f:has(#god-chat-float.chat-open) #toast-container { right: calc(var(--cx-w, 370px) + 18px); width: auto; max-width: 340px; bottom: 20px; }
/* eingeklappter Chat: nur die Titelleiste unten */
html.cx-docked:has(#god-chat-float.chat-open.chat-minimized) #toast-container { right: 12px; width: var(--cx-w, 370px); max-width: var(--cx-w, 370px); bottom: 74px; }