/* Dynamic theme CSS (DB-backed) */
:root{
  --primary: #3b82f6;
  --accent: #60a5fa;
  --bg: #000000;
  --bg-image: none;
  --card-bg: #020617;
  --border: #1f2937;
  --msg-own: #111827;
  --msg-other: #020617;
}


/* Apply per-style background image */
body{ background-image: var(--bg-image); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; }
/* Theme export: Jump-Sun-Radio */
/* Exported: 2026-01-16T11:23:48+00:00 */

/* Default Style (DB): extracted chat base CSS (editable) */

/* Auto-extracted from public/chat.php (inline <style>)
   Refactored to use CSS variables from theme.php.

   This is the BASE UI stylesheet for the chat page.
   Edit carefully: it is meant to be stable, while themes override variables.
*/

*{box-sizing:border-box;}
        body{margin:0;font-family:var(--font, system-ui);background-color:var(--bg, #020617);background-image:var(--bg-image, none);background-repeat:no-repeat;background-position:center;background-size:cover;color:var(--text, #e5e7eb);}
        .app{display:flex;flex-direction:column;height:100vh;}
        .topbar{
            padding:10px 12px;
            border-bottom:1px solid var(--border, #1f2937);
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:10px;
            position:sticky;
            top:0;
            z-index:60;
 /* background:rgba(2,6,23,.92); */
            backdrop-filter:saturate(140%) blur(8px);
			background-color: rgba(0, 0, 0, 0.5);
        }
        .topbar-left{display:flex;align-items:center;gap:12px;min-width:0;}
        .brand{display:flex;align-items:center;gap:10px;min-width:0;}
        .brand-mark{
            width:34px;height:34px;border-radius:12px;
            display:flex;align-items:center;justify-content:center;
            background:var(--card-2, #111827);border:1px solid var(--border-strong, #374151);
            font-size:18px;flex:0 0 auto;
        }
        .brand-stack{display:flex;flex-direction:column;gap:4px;min-width:0;}
        .brand-title{font-size:14px;font-weight:800;letter-spacing:.2px;line-height:1;}
        .header-row{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap;}
        .pill{
            display:inline-flex;align-items:center;gap:8px;
            padding:6px 10px;border-radius:999px;
            border:1px solid var(--border-strong, #374151);background:var(--card-2, #111827);
            color:var(--text, #e5e7eb);font-size:12px;white-space:nowrap;
        }
        .pill.small{padding:4px 8px;font-size:11px;}
        .pill-dot{width:8px;height:8px;border-radius:999px;background:var(--warning, #f97316);flex:0 0 auto;}
        .room-pill{max-width:320px;min-width:0;}
        .room-pill .room-name{
            max-width:260px;
            overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
            display:inline-block;vertical-align:bottom;
        }
        .topbar-right{display:flex;align-items:center;gap:8px;font-size:12px;flex-wrap:wrap;justify-content:flex-end;}
        .conn-pill{background:var(--bg, #020617);}
.invisible-pill{background:var(--border, #1f2937);border-color:var(--purple, #a78bfa);color:var(--purple-soft, #f3e8ff);}
        .user-menu{position:relative;}
        .user-btn{
            display:inline-flex;align-items:center;gap:8px;
            padding:4px 16px;border-radius:999px;
            border:1px solid var(--border-strong, #374151);background:var(--bg, #020617);
            color:var(--text, #e5e7eb);cursor:pointer;font-size:12px;
            position:relative;
        }
        .user-btn:hover{background:var(--card-2, #111827);border-color:var(--accent, #60a5fa);}
        .user-btn:focus{outline:none;}
        .user-btn:focus-visible{box-shadow:0 0 0 2px rgba(96,165,250,.35);}
        .user-avatar{
            width:24px;height:24px;border-radius:999px;
            object-fit:cover;background:var(--card-2, #111827);border:1px solid var(--border-strong, #374151);
        }
        .user-name{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
        .user-chevron{opacity:.75;}
        .user-pm-badge{
            position:absolute;
            top:2px;
            right:2px;
            min-width:18px;
            height:18px;
            border-radius:999px;
            background:var(--danger-bg, #7f1d1d);
            border:1px solid var(--danger, #ef4444);
            display:none;
            align-items:center;
            justify-content:center;
            font-size:11px;
            padding:0 6px;
            box-shadow:0 0 0 2px rgba(2,6,23,.9);
            pointer-events:none;
        }

        .user-gb-badge{
            position:absolute;
            top:2px;
            right:26px;
            min-width:18px;
            height:18px;
            border-radius:999px;
            background:var(--info-bg, #1e3a8a);
            border:1px solid var(--accent, #60a5fa);
            display:none;
            align-items:center;
            justify-content:center;
            font-size:11px;
            padding:0 6px;
            box-shadow:0 0 0 2px rgba(2,6,23,.9);
            pointer-events:none;
        }
        .gb-toast{
            position:fixed;
            right:16px;
            bottom:16px;
            z-index:9999;
            display:none;
            min-width:240px;
            max-width:360px;
            background:var(--card, #0b1220);
            border:1px solid var(--border-strong, #374151);
            border-radius:16px;
            box-shadow:0 20px 50px rgba(0,0,0,.75);
            padding:12px 12px;
        }
        .gb-toast.open{display:block;}
        .gb-toast .t-title{font-weight:800;font-size:13px;margin-bottom:4px;}
        .gb-toast .t-body{font-size:12px;opacity:.9;white-space:pre-wrap;}
        .gb-toast .t-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
        .gb-toast .t-actions button{padding:6px 10px;border-radius:999px;border:1px solid var(--border-strong, #374151);background:var(--card-2, #111827);color:var(--text, #e5e7eb);cursor:pointer;font-size:12px;}
        .gb-toast .t-actions button.primary{background:var(--primary, #3b82f6);border-color:var(--primary, #3b82f6);color:white;}

        .guest-badge{padding:2px 8px;border-radius:999px;font-size:11px;border:1px solid var(--border-strong, #374151);opacity:.85;}
        .user-dropdown{
            position:absolute;right:0;top:calc(100% + 8px);
            min-width:220px;
            background:var(--bg, #020617);border:1px solid var(--border-strong, #374151);border-radius:14px;
            box-shadow:0 20px 50px rgba(0,0,0,0.75);
            padding:6px;display:none;z-index:1200;
            max-height:min(70vh, 520px);
            overflow:auto;
        }
        .user-dropdown.open{display:block;}
        .user-item{
            display:flex;align-items:center;gap:10px;
            padding:10px 10px;border-radius:12px;
            color:var(--text, #e5e7eb);text-decoration:none;font-size:13px;
            border:none;
            background:transparent;
            width:100%;
            text-align:left;
            cursor:pointer;
        }
        .menu-badge{
            margin-left:auto;
            min-width:18px;
            height:18px;
            border-radius:999px;
            background:var(--danger-bg, #7f1d1d);
            border:1px solid var(--danger, #ef4444);
            display:none;
            align-items:center;
            justify-content:center;
            font-size:11px;
            padding:0 6px;
        }

        .user-item:hover{background:var(--card-2, #111827);}
        .user-item.danger{color:var(--danger-soft, #fecaca);}
        .user-item.danger:hover{background:rgba(185,28,28,.25);}
        .user-sep{height:1px;background:var(--border, #1f2937);margin:6px 0;}
        /* Sidebar toggle button (mobile only) */
        .mobile-toggle{display:none;}
        .main{flex:1;display:flex;min-height:0;}
        .sidebar{width:220px;border-right:1px solid var(--border, #1f2937);display:flex;flex-direction:column;}
        .sidebar-header{padding:8px 12px;font-size:13px;border-bottom:1px solid var(--border, #1f2937);}
        .room-list{flex:1;overflow-y:auto;}
        .room{padding:8px 12px;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;}
        .room:hover{background:var(--card-2, #111827);}
        .room.active{background:var(--border, #1f2937);}
        .room span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
        .sidebar-radio{
    border-top:1px solid var(--border, #1f2937);
    padding:10px 12px;
    font-size:13px;
    background:linear-gradient(180deg, rgba(2,6,23,.92), rgba(2,6,23,1));
}

/* Modern radio card */
.radio-card{display:flex;flex-direction:column;gap:10px;}
.radio-card__header{display:flex;gap:10px;align-items:center;}
.radio-card__cover{
    width:44px;height:44px;flex:0 0 auto;
    border-radius:12px;
    background:var(--card-2, #111827);
    border:1px solid var(--border, #1f2937);
    background-size:cover;
    background-position:center;
}
.radio-card__label{font-weight:700;letter-spacing:.02em;line-height:1.1;}
.radio-card__status{font-size:11px;opacity:.85;margin-top:2px;}
.radio-card__now{
    font-size:11px;opacity:.9;margin-top:4px;
    max-height:2.6em;overflow:hidden;text-overflow:ellipsis;
}
.radio-card__controls{display:flex;align-items:center;gap:10px;}
.radio-card__btn{
    border:none;
    background:var(--card-2, #111827);
    color:var(--text, #e5e7eb);
    border-radius:14px;
    width:40px;
    height:40px;
    cursor:pointer;
    font-size:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 0 0 1px rgba(55,65,81,.7) inset;
}
.radio-card__btn:hover{background:var(--border, #1f2937);}
.radio-card__vol{display:flex;align-items:center;gap:8px;flex:1;min-width:0;}
.radio-card__volicon{font-size:14px;opacity:.8;flex:0 0 auto;}
#radioVolume{flex:1;min-width:0;}
.radio-card__show{
    display:flex;align-items:center;gap:10px;
    padding:8px 10px;
    border-radius:14px;
    border:1px solid var(--border, #1f2937);
    background:rgba(17,24,39,.55);
    color:var(--text, #e5e7eb);
    text-decoration:none;
}
.radio-card__show:hover{background:var(--card-2, #111827);}
.radio-card__modimg{
    width:40px;height:40px;border-radius:999px;object-fit:cover;
    border:1px solid var(--border-strong, #334155);
    background:var(--card, #0b1220);
    flex:0 0 auto;
}

.radio-card__modwrap{position:relative;width:40px;height:40px;flex:0 0 auto;}
.radio-card__badge{
    position:absolute;top:-6px;left:-6px;
    padding:2px 6px;border-radius:999px;
    font-size:10px;font-weight:800;letter-spacing:.04em;
    border:1px solid var(--border-strong, #334155);
    background:var(--card-2, #111827);color:var(--text, #e5e7eb);
}
.radio-card__badge--live{background:var(--danger, #ef4444);border-color:var(--danger, #ef4444);color:var(--white, #fff);animation:radioBadgePulse 1.6s ease-in-out infinite;}
.radio-card__badge--next{background:var(--primary-strong, #2563eb);border-color:var(--primary-strong, #2563eb);color:var(--white, #fff);}
@keyframes radioBadgePulse{
    0%,100%{transform:scale(1);filter:brightness(1);}
    50%{transform:scale(1.06);filter:brightness(1.1);}
}
.is-hidden{display:none !important;}
.radio-card__showmeta{min-width:0;flex:1;}
.radio-card__showtitle{font-size:12px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.radio-card__showhost,.radio-card__showtime{font-size:11px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;}
.radio-card__chev{margin-left:auto;opacity:.6;font-size:20px;line-height:1;}
        .chat-area{flex:1;display:flex;flex-direction:column;}
        .chat-header{padding:6px 12px;border-bottom:1px solid var(--border, #1f2937);font-size:12px;display:flex;align-items:center;justify-content:space-between;gap:10px;}
        .chat-body{flex:1;display:flex;min-height:0;}
        .messages{flex:1;padding:8px 12px;overflow-y:auto;font-size:14px;}
        .message{margin-bottom:6px;}
        .message .meta{font-size:15px;opacity:.7;margin-bottom:2px;}
        .message .text{word-wrap:break-word;}
        .message.system .text{font-style:italic;opacity:.8;}
        .online-sidebar{width:320px;border-left:1px solid var(--border, #1f2937);display:flex;flex-direction:column;}
        .online-header{padding:8px 10px;border-bottom:1px solid var(--border, #1f2937);font-size:13px;display:flex;justify-content:space-between;align-items:center;}
        .online-list{flex:1;overflow-y:auto;padding:6px;}
        .online-user{display:flex;align-items:center;gap:6px;padding:4px;border-radius:10px;cursor:default;position:relative;}
        .online-user:hover{background:var(--card-2, #111827);}
        .online-avatar{width:24px;height:24px;border-radius:999px;object-fit:cover;background:var(--card-2, #111827);}
        .online-name{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
        .role-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 6px;border-radius:999px;font-size:10px;border:1px solid var(--border-strong, #374151);margin-left:4px;}
        .role-badge img{width:12px;height:12px;}
        .gender-badge{display:inline-flex;align-items:center;padding:2px 6px;border-radius:999px;font-size:10px;border:1px solid var(--border-strong, #374151);margin-left:4px;opacity:.9;}
        .onair-badge{display:inline-flex;align-items:center;padding:2px 6px;border-radius:999px;font-size:10px;border:1px solid var(--danger, #ef4444);margin-left:4px;background:rgba(239,68,68,.12);color:var(--danger-soft-2, #fee2e2);animation:onairBlink 1.05s steps(2, start) infinite;}
        @keyframes onairBlink{0%{opacity:1}50%{opacity:.35}100%{opacity:1}}
        @media (prefers-reduced-motion: reduce){.onair-badge{animation:none;}}

        .webcam-badge{display:inline-flex;align-items:center;justify-content:center;padding:2px 6px;border-radius:999px;font-size:10px;border:1px solid var(--accent, #60a5fa);margin-left:4px;background:rgba(96,165,250,.12);color:var(--info-soft, #dbeafe);cursor:pointer;user-select:none;}
        .webcam-badge:hover{background:rgba(96,165,250,.20);}

        .webcam-video{
            width:100%;
            max-height:60vh;
            background:var(--black, #000);
            border-radius:14px;
            border:1px solid var(--border, #1f2937);
        }
        .webcam-hint{font-size:12px;opacity:.8;margin-top:8px;}
        
        .afk-inline{display:inline-flex;align-items:center;padding:2px 6px;border-radius:999px;font-size:10px;border:1px solid var(--slate, #64748b);margin-left:6px;background:rgba(148,163,184,.10);color:var(--text, #e5e7eb);}
        .afk-toggle{border:1px solid var(--border-strong, #374151);background:var(--card-2, #111827);color:var(--text, #e5e7eb);border-radius:999px;padding:4px 16px;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;}
        .afk-toggle:hover{background:var(--border, #1f2937);}
        .afk-toggle.on{border-color:var(--warning, #f97316);background:rgba(249,115,22,.14);color:var(--warning-soft, #fff7ed);}
        .afk-toggle:disabled{opacity:.55;cursor:not-allowed;}
.onair-toggle{border:1px solid var(--border-strong, #374151);background:var(--card-2, #111827);color:var(--text, #e5e7eb);border-radius:999px;padding:4px 16px;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;}
        .onair-toggle:hover{background:var(--border, #1f2937);}
        .onair-toggle.on{border-color:var(--danger, #ef4444);background:rgba(239,68,68,.14);color:var(--danger-soft-2, #fee2e2);}
        .user-link{color:inherit;text-decoration:none;}
        .user-link:hover{text-decoration:underline;}
        /* Profile modal */
        body.modal-open{overflow:hidden;}
        .modal-backdrop{
            position:fixed;
            inset:0;
            display:none;
            align-items:center;
            justify-content:center;
            padding:18px;
            background:rgba(0,0,0,0.65);
            z-index:120;
        }
        .modal-backdrop.open{display:flex;}
        .profile-modal{
            width:min(560px, 100%);
            max-height:90vh;
            overflow:auto;
            background:var(--bg, #020617);
            border:1px solid var(--border-strong, #374151);
            border-radius:18px;
            box-shadow:0 20px 50px rgba(0,0,0,0.85);
        }
        .profile-modal.editor{width:min(820px, 100%);}
        .profile-modal-header{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:10px;
            padding:12px 14px;
            border-bottom:1px solid var(--border, #1f2937);
        }
        .profile-modal-title{font-size:13px;font-weight:700;opacity:.95;}
        .profile-modal-close{
            border:none;
            background:transparent;
            color:var(--muted, #9ca3af);
            cursor:pointer;
            font-size:18px;
            padding:4px 6px;
            border-radius:10px;
        }
        .profile-modal-close:hover{background:var(--card-2, #111827);color:var(--text, #e5e7eb);}
        .profile-modal-body{padding:14px;}
        .profile-modal-body.editor-body{padding:0;}
        .profile-editor-frame{width:100%;height:min(78vh, 780px);border:0;background:transparent;display:block;border-bottom-left-radius:18px;border-bottom-right-radius:18px;}
        .profile-card{display:flex;gap:14px;align-items:center;}
        .profile-avatar{width:64px;height:64px;border-radius:999px;object-fit:cover;background:var(--card-2, #111827);flex:0 0 auto;}
        .profile-meta{display:flex;flex-direction:column;gap:4px;min-width:0;}
        .profile-name{font-size:18px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
        .profile-badges{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
        .profile-line{height:1px;background:var(--border, #1f2937);margin:14px 0;}
        .profile-field{font-size:13px;opacity:.95;margin:6px 0;}
        .profile-field strong{opacity:.85;}
        .profile-warn{border-radius:12px;padding:8px 10px;font-size:13px;margin:10px 0;background:var(--danger-bg, #7f1d1d);border:1px solid var(--danger-strong, #b91c1c);}
        .profile-actions{margin-top:12px;display:flex;justify-content:flex-end;}

        .mute-badge{font-size:10px;padding:2px 6px;border-radius:999px;background:var(--danger-bg, #7f1d1d);border:1px solid var(--danger-strong, #b91c1c);color:var(--danger-soft-2, #fee2e2);margin-left:4px;cursor:default;}
        .chat-input-area{
            border-top:1px solid var(--border, #1f2937);
            padding:8px 12px;
            display:flex;
            gap:8px;
            align-items:center;
            background:var(--bg, #020617);
            position:relative;
        }
        .chat-input{flex:1;background:var(--bg, #020617);border-radius:999px;border:1px solid var(--border-strong, #374151);color:var(--text, #e5e7eb);padding:10px 14px;outline:none;font-size:14px;}
        .btn{border-radius:999px;border:1px solid var(--border-strong, #374151);background:var(--card-2, #111827);color:var(--text, #e5e7eb);padding:8px 16px;font-size:14px;cursor:pointer;}
        .btn-primary{background:var(--primary, #3b82f6);border-color:var(--primary-strong, #2563eb);color:white;}
        .btn-primary:disabled{opacity:.5;cursor:not-allowed;}
        .btn-icon{
            border-radius:999px;
            border:1px solid var(--border-strong, #374151);
            background:var(--bg, #020617);
            color:var(--text, #e5e7eb);
            width:40px;
            height:40px;
            display:flex;
            align-items:center;
            justify-content:center;
            cursor:pointer;
            font-size:18px;
        }
        .btn-icon:hover{
            border-color:var(--accent, #60a5fa);
            background:var(--card-2, #111827);
        }
        
.smiley-panel{
    position:fixed;
    left:8px;
    bottom:calc(64px + env(safe-area-inset-bottom, 0px));
    width:min(800px, calc(100vw - 16px));
    height:min(500px, calc(100vh - 180px));
    background:var(--bg, #020617);
    border:1px solid var(--border-strong, #374151);
    border-radius:16px;
    box-shadow:0 20px 40px rgba(0,0,0,0.7);
    display:none;
    flex-direction:column;
    overflow:hidden;
    z-index:9999;
}
.smiley-panel.open{display:flex;}
.smiley-tabs{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    align-content:flex-start;
    gap:4px;
    padding:6px;
    border-bottom:1px solid var(--border, #1f2937);
    background:var(--bg, #020617);
    z-index:2;
    /* Multi-line tabs: wrap to as many rows as needed (no internal scrolling),
       so categories don't "jump" or disappear when selecting tabs further down. */
    max-height:none;
    overflow:visible;
    /* Prevent iOS/Safari scroll anchoring from "jumping" the tab area when content below changes */
    overflow-anchor:none;
}
.smiley-tab{
    /* Important for long category names in flex-wrap: allow shrinking so ellipsis works */
    flex:0 1 auto;
    min-width:0;
    padding:6px 10px;
    font-size:12px;
    line-height:16px;
    cursor:pointer;
    opacity:.75;
    -webkit-tap-highlight-color:transparent;
    border-radius:999px;
    border:1px solid transparent;
    /* prevent individual long category names from becoming multi-line and pushing rows up */
    max-width:100%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.smiley-tab.active{
    opacity:1;
    border-color:var(--primary, #3b82f6);
    /* use inset shadow instead of border-bottom so the tab height never changes */
    box-shadow: inset 0 -2px 0 var(--primary, #3b82f6);
}
.smiley-grid{
    padding:6px;
    display:flex;
    flex-wrap:wrap;
    gap:4px;
    /* Take remaining height below the (variable height) tab bar */
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
}
.smiley-item{
    width:auto;
    height:auto;
    border-radius:8px;
    border:none;
    background:transparent;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
}
.smiley-item:hover{
    background:var(--card-2, #111827);
}
.smiley-item img{
    max-width:min(250px, 38vw);
    max-height:200px;
}
.smiley-empty{
    font-size:12px;
    opacity:.7;
    padding:8px;
}
/* Limit smileys inserted into messages to prevent oversized images */
.smiley{max-width:400px;max-height:400px;width:auto;height:auto;vertical-align:middle;}

/* Poll widget (Bot-Umfragen) */
.poll-widget{border:1px solid var(--border);border-radius:10px;padding:10px;margin:6px 0;background:rgba(255,255,255,0.04)}
.poll-title{font-weight:700;margin:0 0 6px 0;font-size:14px}
.poll-meta{font-size:12px;opacity:.8;margin:0 0 8px 0}
.poll-options{display:flex;flex-direction:column;gap:8px}
.poll-opt{display:flex;flex-direction:column;gap:4px}
.poll-btn{padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:var(--card);color:inherit;cursor:pointer;text-align:left}
.poll-btn:hover{border-color:var(--accent)}
.poll-btn[disabled]{opacity:.6;cursor:not-allowed}
.poll-resline{display:flex;justify-content:space-between;gap:10px;font-size:12px;opacity:.9}
.poll-barwrap{width:100%;height:8px;border-radius:999px;background:rgba(255,255,255,0.08);overflow:hidden}
.poll-bar{height:8px;border-radius:999px;background:var(--accent);width:0%}
.poll-you{font-size:11px;opacity:.85}
.reactions-bar{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 0 0;align-items:center}
.react-btn{border:1px solid var(--border);background:rgba(255,255,255,0.03);color:inherit;border-radius:999px;padding:4px 8px;font-size:12px;cursor:pointer;display:inline-flex;gap:6px;align-items:center;line-height:1}
.react-btn:hover{background:rgba(255,255,255,0.07)}
.react-btn.me{border-color:rgba(34,197,94,0.65)}
.react-btn .cnt{font-size:11px;opacity:.85}
.react-btn.zero .cnt{opacity:.35}


@media (max-width: 520px){
    .smiley-panel{
        left:8px;
        right:8px;
        width:calc(100vw - 16px);
        height:min(60vh, calc(100vh - 170px));
        bottom:calc(74px + env(safe-area-inset-bottom, 0px));
    }
    .smiley-item img{
        max-width:min(200px, 46vw);
        max-height:160px;
    }
}

        .mod-menu{
            position:absolute;
            right:4px;
            top:4px;
        }
        .mod-menu-btn{
            border:none;
            background:transparent;
            color:var(--muted, #9ca3af);
            cursor:pointer;
            font-size:14px;
            padding:2px 4px;
        }
        .mod-menu-btn:hover{color:var(--text, #e5e7eb);}
        .mod-menu-panel{
            position:absolute;
            right:0;
            top:20px;
            background:var(--bg, #020617);
            border:1px solid var(--border-strong, #374151);
            border-radius:12px;
            padding:4px 0;
            box-shadow:0 10px 30px rgba(0,0,0,0.8);
            display:none;
            z-index:40;
            min-width:140px;
        }
        .mod-menu-panel.open{display:block;}
        .mod-menu-item{
            padding:4px 16px;
            font-size:12px;
            cursor:pointer;
        }
        .mod-menu-item:hover{background:var(--card-2, #111827);}
        /* Responsive layout for mobile */
        @media (max-width: 768px) {
            .mobile-toggle{display:inline-flex;align-items:center;justify-content:center;}
            .sidebar,
            .online-sidebar{
                display:none;
            }
            body.mobile-show-sidebars .sidebar,
            body.mobile-show-sidebars .online-sidebar{
                display:flex;
            }
        
            body{
                height:100vh;
            }
            .app{
                height:100vh;
            }
            .main{
                flex-direction:column;
            }
            .sidebar{
                width:100%;
                border-right:none;
                border-bottom:1px solid var(--border, #1f2937);
                order:1;
            }
            .chat-area{
                order:2;
            }
            .chat-body{
                flex-direction:column;
            }
            .online-sidebar{
                width:100%;
                border-left:none;
                border-top:1px solid var(--border, #1f2937);
                max-height:160px;
            }
            .messages{
                max-height:calc(100vh - 260px);
            }
            .chat-input-area{
                position:relative;
            }
            .sidebar-radio{
                position:relative;
            }
            .topbar{
                flex-wrap:wrap;
                gap:6px;
            }
            .topbar-left{
                width:100%;
                margin-bottom:4px;
            }
            .topbar-right{
                width:100%;
                justify-content:flex-start;
            }
            .poll-pill{display:none;}
            #connText{display:none;}
            .user-name{max-width:120px;}
            .room-pill .room-name{max-width:160px;}
            .topbar-right{justify-content:flex-start;}

        }
    

        /* Style overrides from Settings */
        body{backgroun: <?= h($styleBg) ?>;}
        .topbar,
        .sidebar,
        .chat-area,
        .online-sidebar,
        .chat-input-area,
        .sidebar-radio{
                background-color: rgba(0, 0, 0, 0.5);;
            border-color: <?= h($styleBorder) ?>;
        }
        .topbar{border-bottom:1px solid <?= h($styleBorder) ?>;}
        .chat-header{border-bottom:1px solid <?= h($styleBorder) ?>;}
        .btn-primary{
                background-color: rgba(0, 0, 0, 0.5);;
            border-color: <?= h($stylePrimary) ?>;
        }
        a{color: <?= h($styleAccent) ?>;}
        .message.me{
                background-color: rgba(0, 0, 0, 0.5);;
            border-radius:10px;
            padding:6px 8px;
        }
        .message{
                background-color: rgba(0, 0, 0, 0.5);;
            border-radius:10px;
            padding:6px 8px;
        }

    
/* Video-Stream (über der Online-Liste) */
.video-stream {
    margin: 10px 10px 0 10px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(0,0,0,0.06);
}
.video-stream__title {
    padding: 8px 10px;
    font-weight: 600;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.video-stream__frame {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    display: block;
    background: var(--black, #000);
}


/* OnAir Webcam Preview (über der Online-Liste) */
.onair-preview{
    margin: 10px 10px 0 10px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(0,0,0,0.10);
    border: 1px solid rgba(255,255,255,0.06);
}
.onair-preview__header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding: 8px 10px;
}
.onair-preview__title{
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.onair-preview__open{
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(0,0,0,0.25);
    color: var(--text, #e5e7eb);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    flex: 0 0 auto;
}
.onair-preview__open:hover{ background: rgba(0,0,0,0.35); }
.onair-preview__video{
    width:100%;
    display:block;
    background:var(--black, #000);
    max-height:220px;
    object-fit:cover;
}
.onair-preview__hint{
    padding: 8px 10px;
    font-size: 12px;
    opacity: .85;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.onair-preview__chips{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    padding: 8px 10px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.onair-chip{
    border:1px solid rgba(255,255,255,0.10);
    background: rgba(0,0,0,0.22);
    color:var(--text, #e5e7eb);
    border-radius:999px;
    padding:4px 10px;
    font-size:12px;
    cursor:pointer;
    max-width:100%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.onair-chip.active{
    border-color:var(--danger, #ef4444);
    background:rgba(239,68,68,.14);
    color:var(--danger-soft-2, #fee2e2);
}


.chat-nav__img {
    width: auto;
    height: auto;
    border-radius: 4px;
    object-fit: cover;
    flex: 0 0 auto;
	display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 6px;
}


/* Welcome popup */
.welcome-text{white-space:pre-wrap;font-size:14px;line-height:1.45;}


/* Toggle-Pills (AFK/Unsichtbar/… im gleichen Stil wie OnAir) */
.toggle-pill{ cursor:pointer; }
.toggle-pill:hover{ background:var(--border, #1f2937); }

/* Leuchten, wenn aktiv */
.toggle-pill.on{
    border-color:var(--purple, #a78bfa);
    background:rgba(167,139,250,.16);
    color:var(--purple-soft, #f3e8ff);
}

/* Optional: wenn disabled, klar erkennbar */
.toggle-pill:disabled{
    opacity:.55;
    cursor:not-allowed;
}

/* =====================================================================
   Theme overrides (optional)
   - You can edit the selectors above directly.
   - Or keep changes here to make updates easier.
   ===================================================================== */

:root{
  --primary: #3b82f6;
  --accent: #60a5fa;
  --bg: #000000;
  --text: #e5e7eb;
}