/*
 * Shoutbox — komplettes Widget-Styling.
 *
 * Lag frueher als ~300-Zeilen-String-Verkettung in shoutbox_widget.js und wurde
 * zur Laufzeit als <style> in den <head> gehaengt. Jetzt ein echtes Stylesheet,
 * das der Renderer als <link> einbindet (rendering/shoutbox/shoutbox_renderer.py)
 * und der Browser 30 Tage cacht — genau wie minigames/static/lemmings.css.
 *
 * Alle Regeln sind auf #gwn-shoutbox / #sb-tab / .sb-* gescoped: das Widget
 * haengt auf JEDER Seite und darf nichts vom Seitenlayout anfassen.
 */

/* --- Farbwerte: EINE Stelle, zwei Varianten ----------------------------- */
/* Alle Flaechen sind durchscheinend, die Seite darunter wird weichgezeichnet
   (backdrop-filter am Kasten). Darum stehen hier rgba-Werte statt Hex: eine
   spaetere „nur die Farbe tauschen"-Aenderung an einer einzelnen Regel wuerde
   sonst still die Transparenz wieder zumauern.

   Die --sb-*-Namen haengen bewusst am :root und nicht an #gwn-shoutbox: der
   minimierte Reiter (#sb-tab) und das Oeffnungs-Overlay sind GESCHWISTER des
   Kastens, keine Kinder — an #gwn-shoutbox gebundene Properties erreichten sie
   nicht. Das Praefix haelt sie trotzdem von fremden Variablen fern.

   Dunkel haengt an :root[data-gwn-variant="dark"] — dem Attribut, das die
   Shell aus der Hell/Dunkel-Wahl des Betrachters setzt (usecases/shell.py::
   resolve_variant, Nachtmaxxing-Cookie bzw. XF-Style). BEWUSST nicht an
   `prefers-color-scheme`: der Lachschon-Look kann gar kein Dunkel (rendering/
   lachschon/templates/base.html setzt das Attribut nicht), eine dunkle Box auf
   heller Seite waere dort keine Anpassung, sondern ein Fremdkoerper. */

:root {
    --sb-surface: rgba(255,255,255,0.54);   /* Kasten selbst */
    --sb-solid: rgba(255,255,255,0.90);     /* Popover: muss lesbar bleiben */
    --sb-stream: rgba(238,242,248,0.28);    /* Nachrichtenflaeche */
    --sb-bar: rgba(226,233,243,0.44);       /* Leisten (Intro, Antwort, Konv.) */
    --sb-card: rgba(255,255,255,0.40);      /* Kaertchen in Listen */
    --sb-input: rgba(255,255,255,0.30);
    /* Kante nach aussen: dunkel, und kraeftig genug, um DURCH die weissliche
       Kastenflaeche zu kommen — der Rahmen liegt darueber, zu blasses Dunkel
       verrechnet sich dort zurueck zu Hellgrau und liest sich als weisser
       Saum. Betrifft nur den schwebenden Kasten; angedockt gibt es gar keine
       Kante mehr (s.u.). */
    --sb-edge: rgba(16,32,64,0.35);
    --sb-line: rgba(28,66,131,0.14);        /* Trennlinien innen */
    --sb-hover: rgba(28,66,131,0.08);
    --sb-accent-bg: rgba(28,66,131,0.10);   /* zarte Akzentflaeche */

    /* Kopfzeile, minimierter Reiter und Kanalreiter sind BEWUSST deckend: sie
       tragen weissen Text und sind die Griffe des Fensters. Durchscheinend
       nahmen sie die Farbe der Seite darunter an — der Kopf flackerte beim
       Scrollen und der aktive Reiter war vom inaktiven kaum zu unterscheiden.
       Das Glas bleibt dort, wo Inhalt steht (Kasten, Strom, Eingabe). */
    --sb-head: #1C4283;
    --sb-head-hover: #15356a;
    --sb-tabs: #163A74;
    --sb-tab-hover: #1A4080;
    --sb-tab-active: #1C4283;
    --sb-btn: #1C4283;
    --sb-btn-hover: #15356a;

    --sb-text: #333;
    --sb-text-muted: #666;
    --sb-text-faint: #98a0aa;
    --sb-accent: #1C4283;                   /* Namen, Titel */
    --sb-link-hover: #0d2a5c;
    --sb-act: #4a5666;                      /* Aktivitaetszeile */
    --sb-act-bg: rgba(28,66,131,0.055);     /* Band unter der Aktivitaetszeile */
    /* Kante links, nach Art des Ereignisses. Gedeckt gehalten: sie soll die
       Zeile sortieren, nicht mit dem Chat daneben um Aufmerksamkeit ringen. */
    --sb-act-rail: #8b98a8;                 /* unbekannte Art */
    --sb-act-rail-post: #5f83bd;            /* Beitraege */
    --sb-act-rail-media: #5d9e6e;           /* Bilder */
    --sb-act-rail-guest: #bf9445;           /* Gaestebuch */
    --sb-danger: #c00;
    --sb-ring: rgba(255,255,255,0.85);      /* Trennring im Avatar-Stapel */

    --sb-shadow: 0 8px 32px rgba(16,32,64,0.28);
    /* Breite der angedockten Spalte. Steht hier, weil DREI Stellen sie
       gleichzeitig treffen muessen: der Kasten, das Polster am <body> und
       der Ueberstand der Seitenbaender. */
    --sb-dock-w: 400px;
    /* Je duenner die Tuenche, desto mehr muss die Weichzeichnung tragen: der
       Text steht sonst auf dem Kontrast des Seiteninhalts statt auf Flaeche. */
    --sb-blur: blur(20px) saturate(170%);
}

:root[data-gwn-variant="dark"] {
    --sb-surface: rgba(38,42,48,0.58);
    --sb-solid: rgba(40,44,50,0.92);
    --sb-stream: rgba(26,29,34,0.26);
    --sb-bar: rgba(30,34,40,0.44);
    --sb-card: rgba(255,255,255,0.05);
    --sb-input: rgba(255,255,255,0.06);
    --sb-edge: rgba(0,0,0,0.45);
    --sb-line: rgba(255,255,255,0.10);
    --sb-hover: rgba(255,255,255,0.07);
    --sb-accent-bg: rgba(154,187,228,0.14);

    --sb-head: #132646;
    --sb-head-hover: #0f1e38;
    --sb-tabs: #101E36;
    --sb-tab-hover: #182E52;
    --sb-tab-active: #1E3A68;
    --sb-btn: #2b5590;
    --sb-btn-hover: #35659f;

    --sb-text: #e0e0e0;
    --sb-text-muted: #a8b0ba;
    --sb-text-faint: #7f8792;
    /* #9ABBE4 ist das Link-Blau des dunklen Seitenstils — dasselbe Blau, das
       die Nav und die Beitragslinks dort fahren. */
    --sb-accent: #9ABBE4;
    --sb-link-hover: #c3d9f2;
    --sb-act: #aab3bf;
    --sb-act-bg: rgba(255,255,255,0.045);
    --sb-act-rail: #6b7482;
    --sb-act-rail-post: #5b7cb4;
    --sb-act-rail-media: #55916a;
    --sb-act-rail-guest: #a8823f;
    --sb-danger: #ff8a80;
    --sb-ring: rgba(38,42,48,0.9);

    --sb-shadow: 0 8px 32px rgba(0,0,0,0.55);
}

/* Ohne backdrop-filter (aeltere Browser) bliebe die Seite hinter dem Kasten
   scharf und der Text stuende auf beliebigem Untergrund. Dann lieber fast
   deckend: die Transparenz ist Zierde, die Lesbarkeit nicht. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root {
        --sb-surface: rgba(255,255,255,0.96);
        --sb-stream: rgba(238,242,248,0.9);
        --sb-bar: rgba(226,233,243,0.95);
    }
    :root[data-gwn-variant="dark"] {
        --sb-surface: rgba(38,42,48,0.97);
        --sb-stream: rgba(26,29,34,0.9);
        --sb-bar: rgba(30,34,40,0.95);
    }
}

/* --- Rahmen: Box, minimierter Reiter, Kopfzeile ------------------------- */

#gwn-shoutbox {
    position: fixed; bottom: 20px; right: 20px; width: 340px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px; z-index: 99999; border-radius: 12px;
    box-shadow: var(--sb-shadow); overflow: hidden;
    display: flex; flex-direction: column;
    background: var(--sb-surface);
    border: 1px solid var(--sb-edge);
    color: var(--sb-text);
    -webkit-backdrop-filter: var(--sb-blur);
    backdrop-filter: var(--sb-blur);
}
#sb-tab {
    display: none; position: fixed; bottom: 0; right: 20px;
    background: var(--sb-head); color: #fff; padding: 6px 16px;
    border-radius: 10px 10px 0 0; cursor: pointer; z-index: 99999;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px; font-weight: 600; user-select: none;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.25);
}
#sb-tab:hover { background: var(--sb-head-hover); }
#sb-header {
    background: var(--sb-head); color: #fff; padding: 8px 12px;
    display: flex; justify-content: space-between; align-items: center;
    cursor: pointer; user-select: none;
}
#sb-header span { font-weight: 600; font-size: 14px; }
#sb-header button {
    background: none; border: none; color: #fff; cursor: pointer;
    font-size: 14px; font-weight: bold; padding: 0 4px; line-height: 1;
    opacity: 0.8;
}
#sb-header button:hover { opacity: 1; }

/* --- Wer-ist-online-Popover -------------------------------------------- */

#sb-online:hover { opacity: 1; }
#sb-online-pop {
    position: absolute; top: 38px; right: 8px; z-index: 100000;
    background: var(--sb-solid); color: var(--sb-text); border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    border: 1px solid var(--sb-line);
    max-height: 220px; overflow-y: auto; min-width: 140px; max-width: 260px;
    padding: 4px 0; font-size: 13px;
}
#sb-online-pop .sb-online-title {
    padding: 4px 12px; font-weight: 600; color: var(--sb-accent);
    border-bottom: 1px solid var(--sb-line); margin-bottom: 2px;
}
#sb-online-pop .sb-online-user { padding: 4px 12px; white-space: nowrap; }
#sb-online-pop .sb-online-empty { padding: 6px 12px; opacity: 0.7; }

/* --- Kanalreiter und Panels -------------------------------------------- */

#sb-tabs {
    display: flex; background: var(--sb-tabs);
    border-bottom: 1px solid rgba(0,0,0,0.15);
}
.sb-tab-btn {
    flex: 1; padding: 6px 10px; border: none; cursor: pointer;
    font-size: 12px; font-weight: 600; font-family: inherit;
    background: transparent; color: rgba(255,255,255,0.6);
    transition: background 0.15s, color 0.15s;
}
.sb-tab-btn:hover { background: var(--sb-tab-hover); color: rgba(255,255,255,0.85); }
.sb-tab-active { background: var(--sb-tab-active); color: #fff; }
#sb-body {
    display: flex; flex-direction: column; height: 300px;
}
#sb-panels { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.sb-channel-panel { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.sb-messages {
    flex: 1; overflow-y: auto; padding: 8px; background: var(--sb-stream);
}

/* --- Nachrichtenzeile --------------------------------------------------- */

/* line-height fix (nicht 1.4): der Inline-Avatar darf die Zeilenbox
   nicht aufziehen — sonst passen weniger Nachrichten in die 300px-Box. */
.sb-msg {
    margin-bottom: 6px; line-height: 18px; word-wrap: break-word;
}
.sb-avatar {
    display: inline-block; width: 14px; height: 14px; border-radius: 50%;
    vertical-align: middle; margin-right: 4px;
}
img.sb-avatar { object-fit: cover; }
.sb-avatar--default {
    font-size: 9px; line-height: 14px; text-align: center;
    font-weight: 700; overflow: hidden;
}
.sb-msg .sb-user {
    font-weight: 600; color: var(--sb-accent); margin-right: 4px;
}
a.sb-user { text-decoration: none; }
a.sb-user:hover { text-decoration: underline; }
.sb-msg .sb-user-clickable { cursor: pointer; }
.sb-msg .sb-user-clickable:hover { text-decoration: underline; }
.sb-msg .sb-time {
    font-size: 11px; color: var(--sb-text-faint); margin-right: 4px;
}
.sb-msg .sb-text { color: var(--sb-text); }
.sb-msg .sb-text a { color: var(--sb-accent); text-decoration: underline; word-break: break-all; }
.sb-msg .sb-text a:hover { color: var(--sb-link-hover); }
.sb-intro {
    padding: 10px; background: var(--sb-bar); border-bottom: 1px solid var(--sb-line);
    font-size: 12px; color: var(--sb-text-muted); line-height: 1.5; flex-shrink: 0;
}
.sb-intro b { color: var(--sb-accent); }
.sb-error { color: var(--sb-danger); font-style: italic; padding: 4px 8px; font-size: 12px; }

/* --- Antwortleiste und Eingabe ----------------------------------------- */

#sb-reply-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 10px; background: var(--sb-bar); border-top: 1px solid var(--sb-line);
    font-size: 12px; color: var(--sb-accent);
}
#sb-reply-bar button {
    background: none; border: none; cursor: pointer; font-size: 16px;
    color: var(--sb-text-faint); padding: 0 2px; line-height: 1;
}
#sb-reply-bar button:hover { color: var(--sb-text); }
#sb-input-area {
    display: flex; border-top: 1px solid var(--sb-line); background: var(--sb-input);
}
#sb-input {
    flex: 1; border: none; padding: 8px 10px; font-size: 13px;
    outline: none; font-family: inherit;
    background: transparent; color: var(--sb-text);
}
#sb-input::placeholder { color: var(--sb-text-faint); }
#sb-send {
    background: var(--sb-btn); color: #fff; border: none; padding: 8px 14px;
    cursor: pointer; font-size: 14px;
}
#sb-send:hover { background: var(--sb-btn-hover); }
#sb-arrow {
    display: inline-block; width: 0; height: 0;
    border-top: 6px solid transparent; border-bottom: 6px solid transparent;
    border-left: 8px solid #fff;
}

/* --- Minimiert, Badges, Loeschknopf ------------------------------------ */

#gwn-shoutbox.sb-closed { display: none; }
#gwn-shoutbox.sb-closed + #sb-tab { display: block; }
.sb-badge {
    display: inline-block; min-width: 16px; height: 16px;
    background: #e53e3e; color: #fff; font-size: 10px; font-weight: 700;
    line-height: 16px; text-align: center; border-radius: 8px;
    padding: 0 4px; margin-left: 4px; vertical-align: middle;
}
#sb-tab .sb-badge {
    position: absolute; top: -8px; right: -8px;
}
.sb-del {
    background: none; border: none; color: var(--sb-text-faint); cursor: pointer;
    font-size: 14px; padding: 0 0 0 6px; line-height: 1;
    float: right; opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}
.sb-msg:hover .sb-del { opacity: 1; }
.sb-del:hover { color: var(--sb-danger); }

@media (max-width: 480px) {
    #gwn-shoutbox { width: calc(100% - 20px); right: 10px; bottom: 10px; }
    #sb-tab { right: 10px; }
}

/* --- Staff-Sessionliste und Unterhaltungsansicht (Hilfe-Chat) ---------- */

.sb-session-list {
    flex: 1; overflow-y: auto; background: var(--sb-stream);
}
.sb-session-row {
    display: flex; flex-direction: column; padding: 10px 12px;
    border-bottom: 1px solid var(--sb-line); cursor: pointer;
    position: relative; transition: background 0.15s;
}
.sb-session-row:hover { background: var(--sb-hover); }
.sb-session-unread { background: var(--sb-accent-bg); }
.sb-session-unread .sb-session-name { font-weight: 700; }
.sb-session-info {
    display: flex; justify-content: space-between; align-items: center;
}
.sb-session-name { font-weight: 600; color: var(--sb-accent); font-size: 13px; }
.sb-session-time { font-size: 11px; color: var(--sb-text-faint); }
.sb-session-preview {
    font-size: 12px; color: var(--sb-text-muted); margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 280px;
}
.sb-session-close {
    position: absolute; top: 8px; right: 8px;
    background: none; border: none; cursor: pointer;
    font-size: 16px; color: var(--sb-text-faint); opacity: 0;
    transition: opacity 0.15s, color 0.15s;
    line-height: 1; padding: 0;
}
.sb-session-row:hover .sb-session-close { opacity: 1; }
.sb-session-close:hover { color: var(--sb-danger); }
.sb-session-empty {
    padding: 20px; text-align: center; color: var(--sb-text-faint); font-size: 13px;
}
.sb-conversation { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
.sb-conv-header {
    display: flex; align-items: center; padding: 6px 10px;
    background: var(--sb-bar); border-bottom: 1px solid var(--sb-line); flex-shrink: 0;
}
.sb-back-btn {
    background: none; border: none; cursor: pointer;
    font-size: 18px; color: var(--sb-accent); padding: 0 8px 0 0; line-height: 1;
}
.sb-back-btn:hover { color: var(--sb-link-hover); }
.sb-conv-title { flex: 1; font-weight: 600; color: var(--sb-accent); font-size: 13px; }
.sb-dismiss-conv {
    background: none; border: none; cursor: pointer;
    font-size: 16px; color: var(--sb-text-faint); padding: 0 2px; line-height: 1;
}
.sb-dismiss-conv:hover { color: var(--sb-danger); }
.sb-invite-btn {
    background: #9CC42F; color: #fff; border: none; cursor: pointer;
    font-size: 11px; font-weight: 700; border-radius: 5px;
    padding: 3px 8px; margin-right: 6px; font-family: inherit;
}
.sb-invite-btn:hover { background: #89ae28; }

/* --- Systemzeilen ------------------------------------------------------- */

#sb-closed-notice {
    padding: 8px 10px; text-align: center; color: var(--sb-text-muted);
    font-size: 12px; border-top: 1px solid var(--sb-line); background: var(--sb-bar);
}
.sb-server-msg {
    text-align: center; color: var(--sb-text-muted); font-size: 12px;
    font-style: italic; padding: 4px 8px; margin: 4px 0;
}
/* Ignorierter Absender (Issue #109): nur eine unscheinbare Notiz,
   den Text schickt der Server erst gar nicht mit. */
.sb-ignored-msg {
    color: var(--sb-text-faint); font-size: 11px; font-style: italic;
    padding: 2px 8px;
}

/* --- Oeffnungs-Animation (18 Uhr) -------------------------------------- */

@keyframes sb-overlay-in {
    0% { opacity: 0; }
    20% { opacity: 1; }
    75% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes sb-text-in {
    0% { opacity: 0; transform: translateY(10px); }
    20% { opacity: 1; transform: translateY(0); }
    75% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-5px); }
}
@keyframes sb-line-reveal {
    0% { width: 0; opacity: 0; }
    25% { opacity: 1; }
    50% { width: 220px; }
    75% { width: 220px; opacity: 1; }
    100% { width: 0; opacity: 0; }
}
.sb-open-overlay {
    position: fixed; inset: 0; z-index: 999999;
    display: flex; align-items: center; justify-content: center; flex-direction: column;
    background: rgba(28,66,131,0.85);
    pointer-events: none;
    animation: sb-overlay-in 3s ease-out forwards;
}
.sb-open-title {
    font-family: inherit;
    color: #fff;
    font-size: 32px; font-weight: 700; letter-spacing: 1px;
    text-align: center; line-height: 1.4;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
    animation: sb-text-in 3s ease-out forwards;
}
.sb-open-line {
    height: 2px; margin-top: 14px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
    animation: sb-line-reveal 3s ease-out forwards;
}

/* --- Angedockter Modus -------------------------------------------------- */
/* Angedockt wird der Seiteninhalt SCHMALER, nicht ueberdeckt: ein Overlay
   wuerde genau die Galerie und die Threads verdecken, zu denen die
   Aktivitaetszeilen verlinken. Unter 1200px waere die Inhaltsspalte danach
   zu schmal — dort gibt es den Knopf nicht (und shoutbox_widget.js loest
   einen gespeicherten Dock-Zustand beim Verkleinern wieder auf). */

html.gwn-sb-docked body {
    padding-right: var(--sb-dock-w);
    box-sizing: border-box;
    max-width: 100%;
}
/* Volle-Breite-Baender (Kopf, Nav, Fuss, Mod-Leiste) laufen unter dem Kasten
   WEITER. Ohne das endet das Blau 400px vor dem Rand — die Glasflaeche stuende
   auf dem weissen Seitengrund und die angedockte Box saehe aus wie ein weisser
   Balken neben der Seite statt wie ein Fenster AUF ihr.
   Negativer Rand + gleich grosses Polster: die FLAECHE waechst um 400px nach
   rechts, der Inhaltskasten bleibt unveraendert — die zentrierten Innen-
   wrapper (.p-header-inner, .p-nav-inner) und damit Logo und Menuepunkte
   stehen weiter genau dort, wo sie ohne Andocken stuenden.
   Nur der XenMaxx-Look braucht das: im Lachschon-Look traegt <body> selbst
   das Blau, und das steht ohnehin hinter dem Kasten. */
html.gwn-sb-docked .p-header,
html.gwn-sb-docked .p-nav,
html.gwn-sb-docked .p-footer-inner,
html.gwn-sb-docked .p-footer-copyrightRow,
html.gwn-sb-docked .gwn-modbar {
    margin-right: calc(-1 * var(--sb-dock-w));
    padding-right: var(--sb-dock-w);
}
#gwn-shoutbox.sb-docked {
    top: 0; bottom: 0; right: 0; width: var(--sb-dock-w);
    height: 100vh; border-radius: 0;
    box-shadow: -4px 0 18px rgba(0,0,0,0.22);
    /* GAR keine Kante: drei Seiten liegen am Bildschirmrand, und die vierte
       zeichnete einen hellen Strich. Der Rahmen liegt naemlich UEBER der
       durchscheinend weissen Kastenflaeche — eine zu 16% dunkle Linie auf
       54% Weiss bleibt hell. Auf dem weissen Seiteninhalt faellt das nicht
       auf, vor dem blauen Kopfband oben sehr wohl. Abgegrenzt wird hier
       ueber den Schatten, der dunkelt statt aufzuhellen. */
    border: none;
}
/* Feste 300px sind die Hoehe des schwebenden Fensters; angedockt fuellt der
   Koerper die Spalte (min-height:0, sonst waechst der Flex-Kasten ueber die
   Bildschirmhoehe hinaus statt innen zu scrollen). */
#gwn-shoutbox.sb-docked #sb-body { height: auto; flex: 1; min-height: 0; }

@media (max-width: 1199px) {
    #sb-dock { display: none; }
    html.gwn-sb-docked body { padding-right: 0; }
    /* Der gespeicherte Dock-Zustand ueberlebt das Verkleinern (shoutbox_widget
       loest ihn erst beim naechsten Zeichnen auf) — bis dahin duerfen die
       Baender nicht 400px ins Nichts ragen. */
    html.gwn-sb-docked .p-header,
    html.gwn-sb-docked .p-nav,
    html.gwn-sb-docked .p-footer-inner,
    html.gwn-sb-docked .p-footer-copyrightRow,
    html.gwn-sb-docked .gwn-modbar { margin-right: 0; padding-right: 0; }
}

/* Ausgeschaltet muss auf einen Blick erkennbar sein: blasses Icon allein
   liest sich wie "inaktiv/deaktiviert", nicht wie "Strom ist aus". Der
   Querstrich sagt es eindeutig. */
#sb-blend.sb-off { opacity: 0.45; position: relative; }
#sb-blend.sb-off:hover { opacity: 0.7; }
#sb-blend.sb-off::after {
    content: "";
    position: absolute;
    left: 15%;
    top: 50%;
    width: 70%;
    height: 1.5px;
    background: currentColor;
    transform: rotate(-45deg);
}

/* --- Aktivitaetszeilen -------------------------------------------------- */
/* Eine Aktivitaet bleibt eine ZEILE, kein Kasten: dasselbe .sb-msg-Raster,
   derselbe kleine Avatar, dieselbe Uhrzeit, ein Ereignis pro Zeile. Aber sie
   ist als andere Sorte erkennbar, ohne dass man den Satz lesen muss — die
   Sprache allein ("Name lud ein Bild hoch" statt "Name: text") liess sie im
   Ueberfliegen wie eine Wortmeldung aussehen.

   Drei Mittel, alle so gewaehlt, dass die Zeilenhoehe nicht waechst:
     Band       zarte Toenung ueber die ganze Breite; setzt die Zeile vom
                Strom ab, ohne sie einzurahmen
     Kante      2px links, gefaerbt nach Art des Ereignisses (Beitrag,
                Bild, Gaestebuch) — sortiert den Strom auf einen Blick
     Einrueckung + eine Spur kleinerer Satz: der Strom ist beigemischt, der
                Chat bleibt der Hauptinhalt

   Avatar und Name behalten Groesse und Akzentfarbe der Wortmeldung: WER etwas
   getan hat, ist die Information, die den Strom ueberhaupt lesenswert macht. */

.sb-msg--act {
    font-size: 12px;
    padding: 2px 6px 2px 7px;
    background: var(--sb-act-bg);
    border-left: 2px solid var(--sb-act-rail);
}
/* Aufeinanderfolgende Aktivitaeten sind EIN Band, nicht mehrere. Der
   6px-Zeilenabstand des Chats stand sonst als heller Streifen zwischen zwei
   getoenten Zeilen — bei einem Schwall von fuenf Aktivitaeten wurde daraus
   ein Zebra, also genau der Laerm, den die Toenung vermeiden sollte. Der
   negative Rand hebt den Abstand exakt auf; nach aussen (zur Wortmeldung
   davor und danach) bleibt er stehen. Deshalb auch keine runden Ecken: an
   der Nahtstelle zweier Baender saehen sie aus wie Kerben. */
.sb-msg--act + .sb-msg--act { margin-top: -6px; }
/* Der Avatar ist der Anker der Zeile — er bleibt auf Chat-Groesse, obwohl der
   Satz daneben kleiner steht. */
.sb-msg--act .sb-avatar { width: 14px; height: 14px; }
.sb-msg--act .sb-time { font-size: 10px; }

.sb-act--post { border-left-color: var(--sb-act-rail-post); }
.sb-act--media,
.sb-act--media_comment { border-left-color: var(--sb-act-rail-media); }
.sb-act--profile_post,
.sb-act--profile_post_comment { border-left-color: var(--sb-act-rail-guest); }

.sb-msg--act .sb-act-link {
    color: var(--sb-act); text-decoration: none;
}
.sb-msg--act .sb-act-link:hover { color: var(--sb-accent); text-decoration: underline; }

/* Der Avatar-Stapel (mehrere Absender in einer Zeile, .sb-act-avs) ist raus:
   er spannte per Konstruktion ueber verschiedene Threads/Bilder und musste den
   Titel deshalb weglassen. Gebuendelt wird nur noch innerhalb desselben Bezugs
   (s. groupByUser), und da ist der Absender genau einer — es bleibt beim
   normalen Avatar mit Name. */

/* Ueberschuss wird gefaltet, nie verworfen — ein Klick klappt ihn an Ort
   und Stelle auf. Die Zeile traegt selbst .sb-msg--act (s. buildOverflowRow),
   liegt also im selben Band wie die Zeilen, die darunter herauskommen; hier
   steht nur, was sie davon unterscheidet. Die Kante bleibt neutral: was
   dahinter steckt, ist gemischt. */
.sb-act-overflow {
    cursor: pointer; font-style: italic; color: var(--sb-text-faint);
}
.sb-act-overflow:hover { color: var(--sb-accent); }

/* Stiller Punkt statt Zahl: die Ungelesen-Zahl gehoert dem echten Chat.
   Zaehlte Aktivitaet mit, stuende das Badge dauerhaft rot. */
.sb-dot {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: #9CC42F; margin-left: 5px; vertical-align: middle;
}

/* --- Paysafecard-Adminpanel -------------------------------------------- */

.sb-psc-list {
    flex: 1; overflow-y: auto; background: var(--sb-stream); padding: 6px;
}
.sb-psc-empty { padding: 20px; text-align: center; color: var(--sb-text-faint); font-size: 13px; }
.sb-psc-row {
    padding: 10px; background: var(--sb-card); border: 1px solid var(--sb-line);
    border-radius: 6px; margin-bottom: 8px; font-size: 12px;
}
.sb-psc-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 6px; font-weight: 600; color: var(--sb-accent);
}
.sb-psc-anon { color: #e67e22; font-size: 11px; font-weight: 700; }
.sb-psc-kind {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .5px; padding: 2px 6px; border-radius: 3px;
    background: var(--sb-btn); color: #fff; margin-left: 6px;
}
.sb-psc-kind-amazon { background: #ff9900; color: #232f3e; }
.sb-psc-pin-row {
    display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
}
.sb-psc-pin-code {
    flex: 1; font-family: 'Consolas','Menlo',monospace; font-size: 13px;
    font-weight: 700; letter-spacing: 1px; padding: 6px 8px;
    background: var(--sb-accent-bg); border-radius: 4px; word-break: break-all;
    cursor: pointer; user-select: all; color: var(--sb-text);
}
.sb-psc-pin-code:hover { background: var(--sb-hover); }
.sb-psc-copy {
    background: var(--sb-btn); color: #fff; border: none; padding: 4px 10px;
    border-radius: 4px; font-size: 11px; cursor: pointer; font-weight: 600;
}
.sb-psc-copy:hover { background: var(--sb-btn-hover); }
.sb-psc-amount-row {
    display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
    font-size: 12px;
}
.sb-psc-actual {
    width: 70px; padding: 4px 6px; border: 1px solid var(--sb-line);
    border-radius: 4px; font-size: 12px; font-family: inherit;
    background: var(--sb-input); color: var(--sb-text);
}
.sb-psc-actions { display: flex; gap: 6px; }
.sb-psc-btn {
    flex: 1; padding: 6px 10px; border: none; border-radius: 4px;
    font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.sb-psc-confirm { background: #2e7d32; color: #fff; }
.sb-psc-confirm:hover { background: #1b5e20; }
.sb-psc-reject { background: #c62828; color: #fff; }
.sb-psc-reject:hover { background: #8e0000; }
.sb-psc-btn:disabled { opacity: .5; cursor: not-allowed; }
