/* Modul Live-Chat – Seite, Box und Fenster. Passt sich über --gsi-accent an jedes Design an.
   Designs können --ch-bg, --ch-ink, --ch-panel, --ch-line überschreiben. © 2026 gameserver-install.de · by rumpel */
:root { --ch-bg: #12141c; --ch-ink: #e9eaf0; --ch-panel: rgba(255,255,255,.05); --ch-line: rgba(255,255,255,.1); --ch-mute: rgba(233,234,240,.6); }
.ch-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------ Nachrichtenliste */
.ch-pane { display: flex; flex-direction: column; min-height: 0; }
.ch-list { list-style: none; margin: 0; padding: 10px 4px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; }
.ch-empty { opacity: .6; text-align: center; padding: 24px 8px; font-size: .9rem; }
.ch-msg { display: flex; gap: 10px; align-items: flex-end; max-width: 100%; }
.ch-msg.is-new { animation: ch-in .35s cubic-bezier(.2,.8,.2,1); }
@keyframes ch-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.ch-msg.is-mine { flex-direction: row-reverse; }
.ch-av { flex: none; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-weight: 700; font-size: .9rem;
  background: color-mix(in srgb, var(--gsi-accent) 30%, transparent); color: #fff; box-shadow: 0 0 0 2px color-mix(in srgb, var(--gsi-accent) 35%, transparent); }
.ch-av img { width: 100%; height: 100%; object-fit: cover; }
.ch-bub { min-width: 0; max-width: min(78%, 620px); padding: 8px 12px 9px; border-radius: 14px 14px 14px 4px; background: var(--gsi-surface, rgba(127,127,127,.1)); border: 1px solid var(--gsi-border, rgba(127,127,127,.2)); }
.ch-msg.is-mine .ch-bub { border-radius: 14px 14px 4px 14px; background: color-mix(in srgb, var(--gsi-accent) 22%, transparent); border-color: color-mix(in srgb, var(--gsi-accent) 45%, transparent); }
.ch-meta { display: flex; align-items: baseline; gap: 8px; font-size: .78rem; margin-bottom: 2px; }
.ch-name { font-weight: 700; color: var(--gsi-accent); text-decoration: none; }
a.ch-name:hover { text-decoration: underline; }
.ch-meta time { opacity: .6; }
.ch-x { margin-left: auto; border: 0; background: none; color: inherit; opacity: .45; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 2px; }
.ch-x + .ch-x { margin-left: 0; }
.ch-x:hover, .ch-x:focus-visible { opacity: 1; }
.ch-text { overflow-wrap: anywhere; line-height: 1.45; font-size: .95rem; }
.ch-text a { color: var(--gsi-accent); }
.ch-me { background: color-mix(in srgb, var(--gsi-accent) 35%, transparent); color: inherit; border-radius: 4px; padding: 0 3px; }

/* ------------------------------------------------ Eingabe */
.ch-form { display: flex; gap: 8px; align-items: flex-end; padding: 8px 0 0; }
.ch-form textarea { flex: 1; resize: none; min-height: 42px; max-height: 140px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--gsi-border, rgba(127,127,127,.3)); background: var(--gsi-surface, rgba(127,127,127,.08)); color: inherit; font: inherit; box-sizing: border-box; }
.ch-form textarea:focus { outline: 2px solid var(--gsi-accent); outline-offset: 1px; }
.ch-send { flex: none; width: 42px; height: 42px; border-radius: 12px; border: 0; cursor: pointer; display: grid; place-items: center; background: var(--gsi-accent); color: var(--gsi-accent-ink, #fff); transition: transform .2s, filter .2s; }
.ch-send:hover { transform: translateY(-1px); filter: brightness(1.1); }
.ch-send:disabled { opacity: .5; cursor: wait; }
.ch-err { margin: 6px 0 0; font-size: .85rem; color: #ff6b6b; }
.ch-hint { margin: 8px 0 0; font-size: .9rem; opacity: .8; }
.ch-hint--warn { color: #f5a524; opacity: 1; }
.ch-btn { display: inline-block; border: 0; cursor: pointer; padding: 10px 16px; border-radius: 10px; background: var(--gsi-accent); color: var(--gsi-accent-ink, #fff); font: inherit; font-weight: 700; }
.ch-link { border: 0; background: none; color: inherit; opacity: .7; text-decoration: underline; cursor: pointer; font: inherit; font-size: .85rem; padding: 6px 0 0; }
.ch-tag { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; padding: 3px 8px; border-radius: 99px; background: var(--gsi-surface, rgba(127,127,127,.1)); border: 1px solid var(--gsi-border, rgba(127,127,127,.2)); white-space: nowrap; }
.ch-dot { width: 8px; height: 8px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 0 0 rgba(46,204,113,.6); animation: ch-pulse 2s infinite; display: inline-block; }
@keyframes ch-pulse { 70% { box-shadow: 0 0 0 7px rgba(46,204,113,0); } 100% { box-shadow: 0 0 0 0 rgba(46,204,113,0); } }

/* ------------------------------------------------ Chat-Seite */
.ch-page { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; }
.ch-side { display: grid; gap: 16px; align-content: start; }
.ch-title { margin: 0; }
.ch-rooms { display: grid; gap: 4px; }
.ch-rooms a { padding: 9px 12px; border-radius: 10px; text-decoration: none; color: inherit; border: 1px solid transparent; transition: background .2s, border-color .2s; }
.ch-rooms a:hover { background: var(--gsi-surface); }
.ch-rooms a.is-on { background: color-mix(in srgb, var(--gsi-accent) 18%, transparent); border-color: color-mix(in srgb, var(--gsi-accent) 45%, transparent); font-weight: 700; }
.ch-online b { display: block; margin-bottom: 6px; font-size: .9rem; }
.ch-online ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .9rem; }
.ch-online li { display: flex; align-items: center; gap: 8px; }
.ch-main { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--gsi-border); border-radius: 16px; background: var(--gsi-surface); padding: 14px 16px 16px; }
.ch-head { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--gsi-border); }
.ch-head h2 { margin: 0; font-size: 1.15rem; }
.ch-head p { margin: 2px 0 0; opacity: .7; font-size: .88rem; }
.ch-head .ch-tag { margin-left: auto; }
.ch-head__icon { font-size: 1.6rem; }
.ch-pane--page .ch-list { height: min(62vh, 640px); }
@media (max-width: 820px) { .ch-page { grid-template-columns: 1fr; } .ch-side { grid-template-columns: 1fr; } .ch-pane--page .ch-list { height: 58vh; } }

/* ------------------------------------------------ Box */
.ch-boxwrap { display: grid; gap: 6px; }
.ch-boxhead { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 700; }
.ch-pane--box .ch-list { max-height: 300px; }
.ch-pane--box .ch-av { width: 26px; height: 26px; font-size: .75rem; }
.ch-pane--box .ch-bub { max-width: 88%; padding: 6px 10px; }
.ch-pane--box .ch-text { font-size: .88rem; }
.ch-more { font-size: .88rem; color: var(--gsi-accent); text-decoration: none; }

/* ------------------------------------------------ Fenster unten am Rand */
.ch-w { position: fixed; bottom: 20px; z-index: 900; font-size: 15px; }
.ch-w--right { right: 20px; }
.ch-w--left { left: 20px; }
body:has(.wr-bar) .ch-w { bottom: 104px; } /* über der Webradio-Leiste */
.ch-w__fab { position: relative; width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; color: var(--gsi-accent-ink, #fff);
  background: var(--gsi-accent); box-shadow: 0 12px 30px -8px var(--gsi-accent), 0 0 0 0 color-mix(in srgb, var(--gsi-accent) 50%, transparent); transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.ch-w__fab:hover { transform: translateY(-3px) scale(1.04); }
.ch-w.is-open .ch-w__fab { transform: rotate(-8deg) scale(.92); }
.ch-w__badge { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #ff3b3b; color: #fff; font-size: .75rem; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--ch-bg); }
/* [hidden] muss gegen display:grid gewinnen */
.ch-w__badge[hidden] { display: none; }
.ch-w__badge:not([hidden]) { animation: ch-pop .4s cubic-bezier(.2,1.6,.4,1); }
@keyframes ch-pop { from { transform: scale(0); } }
.ch-w__panel { position: absolute; bottom: 72px; width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100vh - 140px)); display: flex; flex-direction: column;
  background: var(--ch-bg); color: var(--ch-ink); border: 1px solid var(--ch-line); border-radius: 18px; overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.6), 0 0 0 1px color-mix(in srgb, var(--gsi-accent) 25%, transparent); transform-origin: bottom right; animation: ch-open .28s cubic-bezier(.2,.8,.2,1); }
.ch-w--right .ch-w__panel { right: 0; }
.ch-w--left .ch-w__panel { left: 0; transform-origin: bottom left; }
.ch-w__panel[hidden] { display: none; }
@keyframes ch-open { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.ch-w__head { display: flex; align-items: center; gap: 6px; padding: 10px 10px 8px 12px; background: linear-gradient(135deg, color-mix(in srgb, var(--gsi-accent) 30%, transparent), transparent); border-bottom: 1px solid var(--ch-line); }
.ch-w__tabs { display: flex; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; }
.ch-w__tabs button { border: 0; cursor: pointer; padding: 7px 11px; border-radius: 99px; background: transparent; color: var(--ch-ink); font: inherit; font-size: .88rem; font-weight: 700; white-space: nowrap; opacity: .7; }
.ch-w__tabs button[aria-selected="true"] { background: var(--ch-panel); opacity: 1; box-shadow: inset 0 0 0 1px var(--ch-line); }
.ch-w__icon { border: 0; background: none; color: var(--ch-ink); cursor: pointer; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; font-size: 1.2rem; text-decoration: none; opacity: .75; }
.ch-w__icon:hover { background: var(--ch-panel); opacity: 1; }
.ch-w__body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 12px 12px; }
.ch-w__body[hidden] { display: none; }
.ch-w .ch-pane, .ch-w .ch-support { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ch-w .ch-list { flex: 1; }
.ch-w .ch-bub { background: var(--ch-panel); border-color: var(--ch-line); }
.ch-w .ch-msg.is-mine .ch-bub { background: color-mix(in srgb, var(--gsi-accent) 28%, var(--ch-bg)); }
.ch-w .ch-form textarea, .ch-w .ch-sform input, .ch-w .ch-sform textarea { background: var(--ch-panel); border: 1px solid var(--ch-line); color: var(--ch-ink); }
.ch-w .ch-hint a { color: var(--gsi-accent); }
.ch-sform { display: grid; gap: 10px; padding-top: 6px; overflow-y: auto; }
.ch-sform label { display: grid; gap: 4px; font-size: .85rem; font-weight: 600; }
.ch-sform input:not([type=checkbox]), .ch-sform textarea { width: 100%; box-sizing: border-box; padding: 9px 11px; border-radius: 10px; font: inherit; font-weight: 400; }
.ch-sform .ch-check { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; }
.ch-sform .ch-check a { color: var(--gsi-accent); }
.ch-support .ch-msg:not(.is-mine) .ch-av { background: color-mix(in srgb, #2ecc71 35%, transparent); }
.gsi-hp { position: absolute; left: -9999px; }
@media (max-width: 520px) {
  .ch-w { bottom: 14px; }
  .ch-w--right { right: 14px; } .ch-w--left { left: 14px; }
  .ch-w__panel { position: fixed; inset: auto 8px 84px 8px; width: auto; height: min(70vh, 560px); }
  body:has(.wr-bar) .ch-w__panel { bottom: 172px; height: min(62vh, 520px); }
}
@media (prefers-reduced-motion: reduce) { .ch-msg.is-new, .ch-w__panel, .ch-w__badge:not([hidden]), .ch-dot { animation: none; } .ch-list { scroll-behavior: auto; } }
/* versteckte Teile wirklich verstecken (gegen display:flex/grid oben) */
.ch-pane [hidden], .ch-support [hidden], .ch-w [hidden] { display: none !important; }
.ch-support .ch-list:empty { flex: 0 0 auto; padding: 0; }