/* ── Mount container ─────────────────────────────────────────── */
#chat-mount {
    width: 100%;
    height: 100%;
}

/* ── Chat Container ──────────────────────────────────────────── */
.dr-chat {
    --bg-primary-inner:    var(--bg-primary,    #000000);
    --bg-primary-rgb-inner:var(--bg-primary-rgb, 15,15,15);
    --bg-secondary-inner:  var(--bg-secondary,  #181818);
    --bg-tertiary-inner:   var(--bg-tertiary,   #212121);
    --bg-hover-inner:      var(--bg-hover,      #2a2a2a);
    --bg-card-inner:       var(--bg-card,       #1a1a1a);
    --border-inner:        var(--border,        #303030);
    --text-primary-inner:  var(--text-primary,  #f1f1f1);
    --text-secondary-inner:var(--text-secondary,#aaa);
    --text-muted-inner:    var(--text-muted,    #717171);
    --accent-inner:        var(--accent,        #8b1a1a);
    --accent-hover-inner:  var(--accent-hover,  #a52020);
    --accent-light-inner:  var(--accent-light,  #c0392b);
    --link-color-inner:    var(--link-color,    #e07070);
    --live-color-inner:    var(--live-color,    #ff4444);
    --discord-inner:       var(--discord,       #5865f2);
    --shadow-inner:        var(--shadow,        0 4px 24px rgba(0,0,0,.5));
    --shadow-card-inner:   var(--shadow-card,   0 2px 12px rgba(0,0,0,.4));
    --radius-inner:        var(--radius,        12px);
    --radius-sm-inner:     var(--radius-sm,     8px);
    --topbar-height-inner: var(--topbar-height, 56px);
    --sidebar-width-inner: var(--sidebar-width, 220px);
    --transition-inner:    var(--transition,    .2s ease);

    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bg-primary-inner);
    border: 1px solid var(--border-inner);
    border-radius: 1rem;
    overflow: hidden;
    font-size: .9rem;
}

/* ── Hidden attribute override fix ────────────────────────────── */
.dr-chat [hidden] { display: none !important; }

/* ── Join Screen ─────────────────────────────────────────────── */
.dr-chat__join {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 2rem;
    text-align: center;
}
.dr-chat__main {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
    border: 1px solid transparent;
    border-radius: inherit;
    transition: border-color .2s;
}
.dr-chat__join-inner h2 { margin-bottom: .5rem; font-size: 1.3rem; }
.dr-chat__join-inner p { opacity: .6; margin-bottom: 1.25rem; font-size: .85rem; }
.dr-chat__join-form {
    display: flex;
    gap: .5rem;
    max-width: 320px;
    margin: 0 auto 1rem;
}

.dr-chat__auth-form {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-width: 320px;
    margin: .75rem auto 0;
}
.dr-chat__auth-form input {
    padding: .6rem .8rem;
    background: var(--bg-primary-inner);
    border: 1px solid var(--border-inner);
    border-radius: .4rem;
    color: var(--text-primary-inner);
    font-size: .9rem;
    outline: none;
}
.dr-chat__auth-form input:focus { border-color: var(--accent-light-inner); }
.dr-chat__auth-details {
    max-width: 320px;
    margin: .75rem auto 0;
}
.dr-chat__auth-section {
    max-width: 320px;
    margin: 1rem auto 0;
    border-top: 1px solid var(--border-inner);
    padding-top: .75rem;
}
.dr-chat__auth-label {
    font-size: .8rem;
    color: var(--text-secondary-inner);
    margin: 0 0 .5rem;
}
.dr-chat__auth-hint {
    font-size: .75rem;
    color: var(--text-secondary-inner);
    margin: .5rem 0 0;
    text-align: center;
}
.dr-chat__auth-link {
    color: var(--link-color-inner);
    text-decoration: none;
}
.dr-chat__auth-link:hover { text-decoration: underline; }
.dr-chat__terms-label {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .78rem;
    color: var(--text-secondary-inner);
    cursor: pointer;
    line-height: 1.4;
}
.dr-chat__terms-label input[type="checkbox"] { margin-top: .15rem; flex-shrink: 0; cursor: pointer; }
.dr-chat__terms-label a { color: var(--link-color-inner); text-decoration: underline; }
.dr-chat__guest-note {
    font-size: .72rem;
    color: var(--text-secondary-inner);
    opacity: .7;
    margin: .25rem 0 0;
    text-align: center;
}
.dr-chat__join-form input, .dr-chat__auth-details input, .dr-chat__auth-section input {
    flex: 1;
    padding: .6rem .8rem;
    background: var(--bg-primary-inner);
    border: 1px solid var(--border-inner);
    border-radius: .4rem;
    color: var(--text-primary-inner);
    font-size: .9rem;
    outline: none;
}
.dr-chat__join-form input:focus, .dr-chat__auth-details input:focus, .dr-chat__auth-section input:focus { border-color: var(--accent-light-inner); }
.dr-chat__error { color: var(--live-color-inner); font-size: .8rem; margin-top: .5rem; }

/* ── Buttons ─────────────────────────────────────────────────── */
.dr-chat__btn {
    padding: .5rem 1rem;
    border: none;
    border-radius: .4rem;
    cursor: pointer;
    font-size: .85rem;
    color: var(--text-secondary-inner);
    background: var(--border-inner);
    transition: background .15s;
}
.dr-chat__btn:hover { background: var(--bg-secondary-inner); }
.dr-chat__btn--primary { background: var(--accent-inner); color: #fff; }
.dr-chat__btn--primary:hover { background: var(--accent-hover-inner); }
.dr-chat__btn--auth { background: transparent; border: 1px solid var(--accent-inner); color: var(--accent-light-inner); margin-top: .5rem; }
.dr-chat__btn--auth:hover { background: var(--bg-hover-inner); }
.dr-chat__btn--sm { padding: .3rem .6rem; font-size: .8rem; }
.dr-chat__btn--logout {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0;
    background: none; color: #e74c3c; border-radius: .3rem;
    opacity: .7; transition: opacity .15s;
}
.dr-chat__btn--logout:hover { opacity: 1; background: rgba(231,76,60,.1); }
.dr-chat__btn--logout svg { width: 15px; height: 15px; }
.dr-chat__btn--icon { display: inline-flex; align-items: center; justify-content: center; background: transparent; border-radius: .3rem; opacity: .5; transition: opacity .15s, background .15s; }
.dr-chat__btn--icon:hover { opacity: 1; background: var(--bg-hover-inner); }
.dr-chat__btn--send { display: inline-flex; align-items: center; justify-content: center; padding: .3rem .6rem; font-size: 1rem; border-radius: .4rem; align-self: center; }
.dr-chat__btn--send svg { width: 16px; height: 16px; }
.dr-chat__btn--danger { background: var(--live-color-inner); color: var(--text-primary-inner); }
.dr-chat__btn--danger:hover { background: var(--accent-inner); }

/* ── Header ──────────────────────────────────────────────────── */
.dr-chat__header {
    display: flex;
    align-items: center;
    user-select: none;
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--border-inner);
    gap: .4rem;
}
.dr-chat__header-left { display: flex; align-items: center; gap: .4rem; }
.dr-chat__title {
    flex: 1; font-weight: 600; font-size: .85rem; text-align: center;
    opacity: .5; white-space: nowrap;
}
/* Room bar lives inside the header center area */
.dr-room-bar__label {
    font-size: .8rem; font-weight: 600; opacity: .5;
    white-space: nowrap; text-align: center;
}
.dr-chat__header-right { display: flex; align-items: center; gap: .3rem; }
.dr-chat__header-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: var(--chat-btn-size); height: var(--chat-btn-size); padding: 0 .3rem; gap: .25rem;
    background: none; border: none; border-radius: .3rem;
    color: var(--text-secondary-inner); cursor: pointer;
    opacity: .5; transition: opacity .15s, background .15s;
    font-size: calc(var(--chat-font-size) * .85); line-height: 1; box-sizing: border-box;
}
.dr-chat__header-btn:hover { opacity: 1; background: var(--bg-hover-inner); }
.dr-chat__header-btn svg { width: var(--chat-icon-size); height: var(--chat-icon-size); flex-shrink: 0; }
.dr-chat__header-btn[data-icon] { padding: 0; width: var(--chat-btn-size); }
.dr-chat__header-btn--logout { color: #e74c3c; opacity: .7; }
.dr-chat__header-btn--logout:hover { background: rgba(231,76,60,.1); opacity: 1; }
#user-count { font-size: calc(var(--chat-font-size) * .8); line-height: 1; }
.dr-chat__btn--user {
    font-size: calc(var(--chat-font-size) * .9);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: none;
    border: none;
    padding: 0 .4rem;
    height: var(--chat-btn-size);
    border-radius: .3rem;
    color: var(--text-primary-inner);
    cursor: pointer;
    transition: background .15s;
}
@media (min-width: 600px)  { .dr-chat__btn--user { max-width: 200px; } }
@media (min-width: 900px)  { .dr-chat__btn--user { max-width: 300px; } }
@media (min-width: 1200px) { .dr-chat__btn--user { max-width: none; } }
.dr-chat__btn--user:hover { background: rgba(255,255,255,.08); }
.dr-chat__header-suffix { font-size: .75em; font-weight: 400; }
.dr-chat__settings-modal { min-width: 220px; max-width: 300px; }
.dr-chat__settings-group { margin-bottom: .5rem; }
.dr-chat__settings-group:last-of-type { margin-bottom: 0; }
.dr-chat__settings-group-title {
    display: block;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted-inner);
    margin-bottom: .3rem;
    padding-bottom: .2rem;
    border-bottom: 1px solid var(--border-inner);
}
.dr-settings__hint {
    font-size: .65rem; opacity: .4; margin: .5rem 0 0; line-height: 1.4;
}
.dr-settings__hint a { color: var(--text-primary-inner); text-decoration: underline; }
.dr-settings__db-hint { display: inline-flex; align-items: center; gap: .2rem; }
.dr-settings__db-tag {
    font-size: .6rem; opacity: .5; background: rgba(255,255,255,.06);
    padding: .1rem .3rem; border-radius: .2rem; white-space: nowrap;
}
.dr-settings__db-reset {
    background: none; border: none; color: var(--text-secondary-inner);
    cursor: pointer; padding: .1rem; opacity: .4; line-height: 1;
    display: inline-flex; align-items: center;
}
.dr-settings__db-reset:hover { opacity: .9; }
.dr-settings__db-reset svg { width: 12px; height: 12px; }

/* ── Room Bar ─────────────────────────────────────────────────── */
.dr-chat__room-bar {
    display: flex;
    gap: .25rem;
    flex: 1;
    justify-content: center;
    overflow-x: auto;
    flex-shrink: 1;
    min-width: 0;
}
.dr-chat__room-bar::-webkit-scrollbar { height: 3px; }
.dr-chat__room-bar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 3px; }
.dr-room-pill {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .15rem .5rem;
    border-radius: 5px;
    font-size: calc(var(--chat-font-size) * .82);
    cursor: pointer;
    background: rgba(255,255,255,.05);
    border: 2px solid transparent;
    color: rgba(255,255,255,.7);
    white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s;
    user-select: none;
}
.dr-room-pill:hover { background: rgba(255,255,255,.1); color: #fff; }
.dr-room-pill--active {
    background: rgba(255,255,255,.12);
    color: #fff;
    font-weight: 600;
}
.dr-room-pill__count {
    font-size: .7rem;
    display: none;
    opacity: .5;
    margin-left: .15rem;
}
.dr-room-pill__icon {
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.dr-room-pill__icon svg { width: 12px; height: 12px; }
.dr-room-pill__lock {
    display: inline-flex; align-items: center; justify-content: center;
    opacity: .6; flex-shrink: 0;
}
.dr-room-pill__lock svg { width: 10px; height: 10px; }
.dr-room-pill__unread {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 8px;
    height: 8px;
    border-radius: 4px;
    background: #e74c3c;
    margin-left: .2rem;
    flex-shrink: 0;
    animation: dr-unread-pulse 1.5s ease-in-out infinite;
}
.dr-room-pill__unread--count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 14px;
    border-radius: 7px;
    background: #e74c3c;
    font-size: .6rem;
    font-weight: 700;
    line-height: 1;
    padding: 0 3px;
    margin-left: .2rem;
    color: #fff;
    animation: dr-unread-pulse 1.5s ease-in-out infinite;
}
@keyframes dr-unread-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .4; }
}

/* ── Unread Divider ─────────────────────────────────────────── */
.dr-chat__unread-divider {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .5rem 0;
    color: #e74c3c;
    font-size: .72rem;
    font-weight: 600;
}
.dr-chat__unread-divider::before,
.dr-chat__unread-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e74c3c;
    opacity: .5;
}

/* ── Load old conversation button ───────────────────────────── */
.dr-chat__load-old-btn {
    display: block;
    width: 100%;
    padding: .4rem;
    margin-bottom: .4rem;
    background: rgba(255,255,255,.06);
    color: var(--text-secondary-inner);
    border: 1px dashed rgba(255,255,255,.15);
    border-radius: .3rem;
    font-size: .75rem;
    cursor: pointer;
    text-align: center;
    transition: background .15s;
}
.dr-chat__load-old-btn:hover { background: rgba(255,255,255,.1); }
.dr-chat__load-old-btn:disabled { opacity: .5; cursor: default; }
.dr-chat__loading {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary-inner);
    font-size: .8rem;
    opacity: .6;
}

/* ── Old / deleted / cleared messages ──────────────────────── */
.dr-msg--old { opacity: .5; }
.dr-msg--deleted .dr-msg__text { text-decoration: line-through; opacity: .4; }
.dr-msg--cleared .dr-msg__text { font-style: italic; opacity: .4; }

/* ── Body ────────────────────────────────────────────────────── */
.dr-chat__body {
    flex: 1;
    display: flex;
    overflow: hidden;
    position: relative;
}
.dr-chat__messages-wrap {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-width: 0;
}
.dr-chat__scroll-btn {
    position: absolute;
    bottom: .6rem;
    right: .7rem;
    z-index: 10;
    background: var(--accent-inner, #5865f2);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,.4);
    transition: opacity .15s, transform .15s;
}
.dr-chat__scroll-btn:hover { transform: scale(1.1); }
.dr-chat__scroll-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--accent-inner, #5865f2);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
    pointer-events: none;
}
.dr-chat__messages {
    height: 100%;
    overflow-y: auto;
    padding: .75rem 1rem;
    scroll-behavior: smooth;
}

/* ── Messages ────────────────────────────────────────────────── */
.dr-msg {
    margin-bottom: .5rem;
    line-height: 1.4;
    word-wrap: break-word;
    padding: .15rem .35rem;
    border-radius: .25rem;
}
.dr-msg:hover {
    background: rgba(255,255,255,.04);
}
.dr-msg__nick {
    font-weight: 700;
    margin-right: .3rem;
    cursor: default;
}
.dr-msg__nick--auth {
    background: linear-gradient(90deg, var(--accent-light-inner), var(--live-color-inner));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.dr-msg__badge {
    display: inline-block;
    font-size: .65rem;
    padding: .1rem .35rem;
    border-radius: .2rem;
    color: #fff !important;
    margin-right: .3rem;
    vertical-align: middle;
    font-weight: 600;
}
.dr-msg__time {
    font-size: .7rem;
    opacity: .4;
    margin-left: .3rem;
}
/* ── Chat font size scale ────────────────────────────────────── */
.dr-chat { --chat-font-size: .85rem; --chat-btn-size: 30px; --chat-icon-size: 16px; }
.dr-chat--font-md { --chat-font-size: 1rem; --chat-btn-size: 34px; --chat-icon-size: 18px; }
.dr-chat--font-lg { --chat-font-size: 1.15rem; --chat-btn-size: 38px; --chat-icon-size: 20px; }
.dr-chat__messages,
.dr-chat__users { font-size: var(--chat-font-size); }
.dr-chat__font-btn, .dr-chat__view-btn, .dr-chat__media-toggle,
.dr-chat__ac-toggle, .dr-chat__color-toggle, .dr-chat__focus-toggle,
.dr-ue__pref-btn {
    opacity: .5;
    border: 1px solid transparent;
    transition: opacity .15s, border-color .15s, background .15s;
}
.dr-chat__font-btn.is-active, .dr-chat__view-btn.is-active, .dr-chat__media-toggle.is-active,
.dr-chat__ac-toggle.is-active, .dr-chat__color-toggle.is-active, .dr-chat__focus-toggle.is-active,
.dr-ue__pref-btn.is-active {
    opacity: 1;
    background: var(--bg-hover-inner);
    border-color: rgba(255,255,255,.25);
}

/* ── Compact mode ────────────────────────────────────────────── */
.dr-chat--compact .dr-msg {
    margin-bottom: .1rem;
    padding: .05rem .35rem;
}
.dr-chat--compact .dr-msg .dr-msg__time {
    margin-right: .3rem;
}
.dr-msg__role-icon {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-right: .15rem;
}
.dr-msg__role-icon svg {
    width: 1em;
    height: 1em;
}
.dr-msg__role-icon--mod  { color: var(--badge-mod-inner, #dc2626); }
.dr-msg__role-icon--user { color: var(--badge-user-inner, #5865f2); }

.dr-msg__text { opacity: .9; }
.dr-msg__text a, .dr-chat-link { color: var(--discord-inner) !important; text-decoration: underline !important; cursor: pointer; }
.dr-msg--system {
    font-style: italic;
    color: var(--text-secondary-inner);
    font-size: .95em;
}
.dr-msg--system-mod {
    font-style: italic;
    font-size: .95em;
    background: rgba(249, 115, 22, .12);
    border-left: 3px solid #f97316;
    padding: 2px 6px;
    border-radius: 3px;
}
.dr-msg--deleted .dr-msg__text { opacity: .3; font-style: italic; }
.dr-spoiler { background: rgba(255,255,255,.12); color: transparent; border-radius: 3px; padding: 0 2px; cursor: pointer; transition: color .15s, background .15s; user-select: none; }
.dr-spoiler.is-revealed { color: inherit; background: rgba(255,255,255,.06); }
.dr-msg--whisper {
    background: rgba(88, 101, 242, .08);
    border-left: 2px solid var(--discord-inner);
    padding-left: .5rem;
    margin-left: 0;
}
.dr-msg--cross-room {
    background: rgba(243, 156, 18, .1);
    border-left-color: #f39c12;
}
.dr-msg--dice {
    background: rgba(255, 200, 50, .06);
    border-left: 2px solid rgba(255, 200, 50, .5);
    padding-left: .5rem;
}
.dr-msg__dice {
    font-weight: 600;
    letter-spacing: .03em;
}
/* Inline SVG icons in messages — always vertically centered */
.dr-msg__cross-room-link svg,
.dr-msg__whisper-label svg,
.dr-msg__reply-btn svg,
.dr-away-tag svg,
.dr-chat__ac-item svg,
.dr-room-pill__lock svg,
.dr-room-pill__icon svg {
    display: inline-block;
    vertical-align: middle;
    width: 1em;
    height: 1em;
}
.dr-msg__cross-room-link {
    display: inline-flex; align-items: center; gap: .2rem;
    color: #f39c12;
    font-size: .7rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    margin-left: .3rem;
}
.dr-msg__whisper-label {
    display: inline-flex; align-items: center; gap: .15rem;
    font-size: .7rem;
    color: var(--discord-inner);
    font-style: italic;
    margin-right: .4rem;
}
.dr-msg__whisper-label svg { width: 14px; height: 14px; flex-shrink: 0; }
.dr-msg__whisper-label--click { cursor: pointer; }
.dr-msg__whisper-label--click:hover { opacity: .7; }
.dr-msg__reply-btn {
    display: inline-flex; align-items: center; gap: .15rem;
    background: none;
    border: none;
    color: var(--discord-inner);
    cursor: pointer;
    font-size: .7rem;
    padding: 0 .3rem;
    opacity: .6;
    transition: opacity .15s;
    vertical-align: middle;
}
.dr-msg__reply-btn svg { width: 12px; height: 12px; flex-shrink: 0; }
.dr-msg__reply-btn:hover { opacity: 1; }
.dr-chat__autocomplete {
    position: absolute;
    bottom: calc(100% + .4rem);
    left: .4rem;
    right: .4rem;
    background: var(--bg-secondary-inner);
    border: 1px solid var(--border-inner);
    border-radius: .5rem;
    max-height: 160px;
    overflow-y: auto;
    z-index: 20;
    display: none;
    box-shadow: 0 -4px 12px rgba(0,0,0,.3);
}
.dr-chat__ac-item {
    padding: .4rem .75rem;
    cursor: pointer;
    font-size: .85rem;
    color: var(--text-primary-inner);
}
.dr-chat__ac-item:hover, .dr-chat__ac-item--active {
    background: var(--bg-hover-inner);
}
.dr-chat__ac-item img {
    width: 1.2em;
    height: 1.2em;
    vertical-align: middle;
    margin-right: .4rem;
    object-fit: contain;
}
.dr-chat__ac-item code {
    opacity: .5;
    font-size: .8em;
    margin-left: .4rem;
}
.dr-msg__gif
{
    max-width: 300px;
    max-height: 200px;
    border-radius: .4rem;
    margin-top: .25rem;
    display: block;
}
.dr-msg__actions {
    display: inline-block;
    margin-left: .4rem;
    opacity: 0;
    transition: opacity .15s;
}
.dr-msg:hover .dr-msg__actions { opacity: 1; }
.dr-msg__actions button {
    background: none;
    border: none;
    color: var(--live-color-inner);
    cursor: pointer;
    font-size: .75rem;
    padding: .1rem .3rem;
}

/* ── User List ───────────────────────────────────────────────── */
.dr-chat__resize-handle {
    width: 5px;
    cursor: col-resize;
    background: var(--border-inner);
    transition: background .15s;
    flex-shrink: 0;
}
.dr-chat__resize-handle:hover,
.dr-chat__resize-handle.dragging {
    background: var(--accent-light-inner, #c0392b);
}
.dr-chat__users {
    min-width: 100px;
    max-width: 400px;
    width: 180px;
    border-left: 1px solid var(--border-inner);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    user-select: none;
}
.dr-chat__sidebar-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-inner);
    flex-shrink: 0;
}
.dr-chat__sidebar-tab {
    flex: 1;
    background: none;
    border: none;
    color: var(--text-secondary-inner);
    padding: .4rem .25rem;
    font-size: .7rem;
    cursor: pointer;
    opacity: .5;
    border-bottom: 2px solid transparent;
}
.dr-chat__sidebar-tab:hover { opacity: .8; }
.dr-chat__sidebar-tab.active {
    opacity: 1;
    border-bottom-color: var(--live-color-inner);
}
#sidebar-view-users, #sidebar-view-leaderboard {
    flex: 1;
    overflow-y: auto;
    padding: .5rem .75rem;
}
.dr-chat__users ul { list-style: none; }
.dr-chat__users li {
    padding: .25rem .35rem;
    font-size: 1em;
    display: flex;
    align-items: center;
    border-radius: .25rem;
}
.dr-chat__users li:hover {
    background: rgba(255,255,255,.04);
}
    gap: .3rem;
}
.dr-chat__users li .dr-msg__badge { font-size: .75em; }
/* (dr-userlist-divider removed — replaced by dr-chat__sidebar-title) */
}
.dr-userlist-elsewhere { opacity: .45; }
.dr-userlist-away { opacity: .6; }
.dr-chat__users .dr-user-mod {
    display: none;
    margin-left: auto;
    gap: .2rem;
}
.dr-chat__users li:hover .dr-user-mod { display: flex; }
.dr-user-mod button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: .7rem;
    padding: .1rem .2rem;
    color: var(--text-secondary-inner);
}
.dr-user-mod button:hover { color: var(--live-color-inner); }

/* ── Footer Popups (shared) ──────────────────────────────────── */
.dr-chat__footer-popups {
    position: relative;
    /* zero-height wrapper — popups float above via bottom positioning */
}
.dr-chat__footer-popup {
    position: absolute;
    bottom: 0;
    border-radius: .5rem;
    box-shadow: 0 -4px 12px rgba(0,0,0,.3);
    overflow: hidden;
    z-index: 25;
}
.dr-chat__help-popup.dr-chat__footer-popup {
    left: .9rem;
    max-width: 500px;
}
.dr-chat__media-picker.dr-chat__footer-popup {
    right: .9rem;
    width: 500px;
    max-width: calc(100% - 1.8rem);
    height: 500px;
    max-height: 60vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary-inner);
}

/* ── Input Bar ───────────────────────────────────────────────── */
.dr-chat__input-bar {
    display: flex;
    align-items: center;
    padding: .35rem .5rem;
    background: var(--bg-secondary-inner);
    border: 1px solid var(--border-inner);
    border-radius: .6rem;
    margin: .4rem;
    position: relative;
    user-select: none;
    transition: border-color .15s;
}
.dr-chat__input-bar:focus-within { border-color: color-mix(in srgb, var(--border-inner) 60%, #fff 40%); }
.dr-chat__input-bar textarea {
    flex: 1;
    min-width: 0;
    padding: .3rem .4rem;
    background: transparent;
    border: none;
    color: var(--text-secondary-inner);
    font-size: var(--chat-font-size);
    font-family: inherit;
    outline: none;
    resize: none;
    max-height: 6rem;
    line-height: 1.4;
    overflow-y: auto;
}
.dr-chat__char-counter {
    position: absolute;
    bottom: 2px; right: .6rem;
    font-size: .6rem;
    color: #999;
    line-height: 1;
    pointer-events: none;
}
.dr-chat__char-counter.is-over {
    color: #e74c3c;
    font-weight: 700;
}
.dr-chat__inputbar-btn {
    display: flex; align-items: center; justify-content: center;
    width: var(--chat-btn-size); height: var(--chat-btn-size);
    margin: 0; padding: 0;
    background: none; border: none; border-radius: .3rem;
    color: var(--text-secondary-inner); cursor: pointer;
    opacity: .5; transition: opacity .15s, background .15s;
    flex-shrink: 0; box-sizing: border-box;
    line-height: 1;
}
.dr-chat__inputbar-btn:hover { opacity: 1; background: var(--bg-hover-inner); }
.dr-chat__inputbar-btn svg { display: block; width: var(--chat-icon-size); height: var(--chat-icon-size); flex-shrink: 0; }
.dr-chat__inputbar-btn span { display: flex; align-items: center; justify-content: center; }
.dr-chat__inputbar-btn--help { font-weight: 700; font-size: calc(var(--chat-font-size) * .95); opacity: .6; }
#btn-gif { font-weight: 700; font-size: calc(var(--chat-font-size) * .7); letter-spacing: .02em; }
.dr-chat__inputbar-btn--help:hover, .dr-chat__inputbar-btn--help.is-active { opacity: 1; }
.dr-chat__inputbar-btn--send {
    background: var(--accent-inner); color: #fff; opacity: 1;
    border-radius: .4rem;
}
.dr-chat__inputbar-btn--send:hover { background: var(--accent-hover-inner); }
.dr-chat__inputbar-btn--send:disabled { opacity: .3; pointer-events: none; }
.dr-chat__input-bar.dr-chat__input--flash { animation: dr-input-flash .4s ease; }
@keyframes dr-input-flash {
    0%, 100% { border-color: var(--border-inner); }
    50% { border-color: #e74c3c; box-shadow: 0 0 4px rgba(231,76,60,.4); }
}

/* ── Away Bar ────────────────────────────────────────────────── */
.dr-chat__away-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .4rem .75rem;
    background: var(--bg-secondary-inner);
    border-top: 1px solid var(--border-inner);
    font-size: .8rem;
    color: var(--text-muted-inner);
}
.dr-chat__away-bar code { background: var(--bg-tertiary-inner); border-radius: 3px; padding: 0 4px; color: var(--text-primary-inner); }

/* ── Help Button & Popup ─────────────────────────────────────── */
.dr-chat__help-popup {
    background: var(--bg-card-inner);
    border: 1px solid var(--border-inner);
    padding: .75rem;
    width: auto;
    z-index: 200;
    box-shadow: 0 8px 24px rgba(0,0,0,.5);
    font-size: .8rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
}
.dr-chat__help-section { margin-bottom: .6rem; }
.dr-chat__help-section:last-child { margin-bottom: 0; }
.dr-chat__help-title {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted-inner);
    margin-bottom: .3rem;
}
.dr-chat__help-row {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .15rem 0;
    color: var(--text-secondary-inner);
}
.dr-chat__help-cmd { cursor: pointer; border-radius: 3px; padding: .15rem .2rem; margin: 0 -.2rem; transition: background .1s; }
.dr-chat__help-cmd:hover { background: var(--bg-hover-inner); color: var(--text-primary-inner); }
.dr-chat__help-row code {
    background: var(--bg-tertiary-inner);
    border-radius: 3px;
    padding: 1px 5px;
    font-size: .78rem;
    color: var(--text-primary-inner);
    white-space: nowrap;
    flex-shrink: 0;
}
.dr-chat__help-row span { color: var(--text-secondary-inner); }
.dr-chat__help-spoiler {
    background: rgba(255,255,255,.12);
    color: transparent;
    border-radius: 3px;
    padding: 0 4px;
    cursor: default;
    user-select: none;
}

/* ── Unified Media Picker (Emoji + GIF) ─────────────────────── */
.dr-chat__media-tabs {
    display: flex;
    align-items: center;
    gap: 0;
    border-bottom: 1px solid var(--border-inner);
    flex-shrink: 0;
    padding: 0 .5rem;
}
.dr-chat__media-tab {
    padding: .5rem .8rem;
    font-size: .78rem;
    font-weight: 600;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary-inner);
    opacity: .55;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity .15s, border-color .15s;
}
.dr-chat__media-tab:hover { opacity: .85; }
.dr-chat__media-tab--active {
    opacity: 1;
    border-bottom-color: var(--accent, #e04040);
    color: var(--text-primary-inner);
}
.dr-chat__media-search-wrap {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    padding: .3rem 0;
}
.dr-chat__media-search-wrap input {
    width: 160px;
    padding: .3rem .5rem;
    background: var(--bg-tertiary-inner);
    border: 1px solid var(--border-inner);
    border-radius: .3rem;
    color: var(--text-secondary-inner);
    font-size: .75rem;
    outline: none;
    transition: border-color .15s;
}
.dr-chat__media-search-wrap input:focus {
    border-color: color-mix(in srgb, var(--border-inner) 60%, #fff 40%);
}
.dr-chat__media-body {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.dr-chat__media-sidebar {
    width: 110px;
    flex-shrink: 0;
    overflow-y: auto;
    border-right: 1px solid var(--border-inner);
    padding: .4rem 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.dr-chat__media-sidebar--icons {
    width: 42px;
}
.dr-chat__media-sidebar[hidden] { display: none; }
.dr-chat__media-cat {
    display: block;
    width: 100%;
    text-align: left;
    padding: .35rem .6rem;
    font-size: .72rem;
    font-weight: 500;
    background: none;
    border: none;
    color: var(--text-secondary-inner);
    opacity: .6;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background .1s, opacity .1s;
}
.dr-chat__media-cat:hover { opacity: .85; background: var(--bg-hover-inner); }
.dr-chat__media-cat--icon {
    text-align: center;
    font-size: 1.15rem;
    padding: .3rem;
    line-height: 1;
    position: relative;
}
.dr-chat__media-cat--icon:hover::after,
.dr-chat__media-cat--icon.dr-chat__media-cat--active::after {
    content: attr(title);
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 4px;
    background: var(--bg-primary-inner);
    border: 1px solid var(--border-inner);
    color: var(--text-primary-inner);
    font-size: .65rem;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 10;
    pointer-events: none;
}
.dr-chat__media-cat--active {
    opacity: 1;
    background: var(--bg-hover-inner);
    color: var(--text-primary-inner);
    border-left: 2px solid var(--accent, #e04040);
}
.dr-chat__media-content {
    flex: 1;
    overflow-y: auto;
    padding: .5rem;
    min-height: 0;
}
.dr-chat__media-hint {
    font-size: .75rem;
    opacity: .4;
    padding: .5rem;
    display: block;
}
.dr-chat__media-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-content: flex-start;
}
.dr-chat__media-emoji {
    background: none;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    padding: .2rem;
    border-radius: .25rem;
    transition: background .1s;
    line-height: 1;
}
.dr-chat__media-emoji:hover { background: var(--bg-hover-inner); }
.dr-chat__media-custom {
    height: 48px;
    max-width: 72px;
    object-fit: contain;
    border-radius: .3rem;
    cursor: pointer;
    transition: transform .1s;
    background: rgba(255,255,255,.04);
    padding: .15rem;
}
.dr-chat__media-custom:hover { transform: scale(1.1); }
.dr-chat__media-gif-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    align-content: flex-start;
}
.dr-chat__media-gif-grid img {
    height: 90px;
    border-radius: .3rem;
    cursor: pointer;
    transition: transform .1s;
}
.dr-chat__media-gif-grid img:hover { transform: scale(1.05); }

/* ── Scrollbar ───────────────────────────────────────────────── */
.dr-chat ::-webkit-scrollbar { width: 6px; height: 6px; }
.dr-chat ::-webkit-scrollbar-track { background: transparent; }
.dr-chat ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 3px; }
.dr-chat ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.25); }
.dr-chat { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; }
.dr-chat * { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; }

/* ── Profile Panel ──────────────────────────────────────────── */
.dr-chat__profile-modal {
    position: absolute;
    top: 50px; left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    background: var(--bg-secondary-inner);
    border: 1px solid var(--border-inner);
    border-radius: .5rem;
    box-shadow: 0 8px 32px rgba(0,0,0,.5);
    min-width: 280px;
    max-width: 95%;
}
.dr-chat__profile-titlebar {
    position: absolute; top: 0; left: 0; right: 0; z-index: 2;
    height: 2rem;
    display: flex; justify-content: flex-end; align-items: flex-start;
    padding: 0;
    background: none; border: none;
    cursor: grab; user-select: none;
}
.dr-chat__profile-titlebar:active { cursor: grabbing; }
.dr-chat__profile-close {
    position: relative; z-index: 3;
    background: rgba(0,0,0,.4); border: none; color: #fff;
    font-size: 1rem; cursor: pointer; padding: .2rem .35rem; line-height: 1;
    border-radius: 0 .45rem 0 .3rem; opacity: .7;
}
.dr-chat__profile-close:hover { opacity: 1; }
.dr-chat__profile-inner { padding: .75em 1em; max-width: 400px; }
.dr-chat__admin-overlay {
    position: absolute; inset: 0; z-index: 99;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(2px);
}
.dr-chat__admin-modal {
    position: absolute; z-index: 100;
    top: 1.5rem; left: 6rem; right: 6rem; bottom: 1.5rem;
    background: var(--bg-secondary-inner);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: .75rem;
    box-shadow: 0 12px 48px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04) inset;
    overflow: hidden; display: flex; flex-direction: row;
}
.dr-chat__user-edit-modal {
    position: absolute; z-index: 100;
    top: 1.5rem; left: 6rem; right: 6rem; bottom: 1.5rem;
    background: var(--bg-secondary-inner);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: .75rem;
    box-shadow: 0 12px 48px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04) inset;
    overflow: hidden; display: flex; flex-direction: row;
}
/* User edit: hero preview block */
.dr-ue__hero {
    background: rgba(0,0,0,.25); border-radius: .5rem;
    padding: 1.2rem 1.25rem; margin-bottom: 1rem;
}
.dr-ue__hero-row {
    display: flex; align-items: center; gap: .5rem;
}
.dr-ue__hero-name {
    font-size: 1.3rem; font-weight: 700; white-space: nowrap;
}
.dr-ue__hero-spacer { flex: 1; }
.dr-ue__hero-colors {
    display: flex; align-items: center; gap: .35rem; flex-shrink: 0;
}
.dr-ue__color-sq {
    width: 28px; height: 28px; border: 1px solid rgba(255,255,255,.12);
    border-radius: .3rem; background: none; cursor: pointer; padding: 0;
}
.dr-ue__color-reset {
    background: none; border: none; color: var(--text-secondary-inner);
    cursor: pointer; padding: .2rem; display: flex; align-items: center;
    opacity: .5; transition: opacity .15s;
}
.dr-ue__color-reset:hover { opacity: 1; }
.dr-ue__color-reset svg { width: 16px; height: 16px; }
/* User edit form body */
.dr-ue__actions {
    margin-top: 1rem; display: flex; gap: .5rem;
}
.dr-ue__delete-row {
    display: flex; align-items: center; gap: .5rem; margin-top: .35rem;
}
.dr-chat--focus .dr-chat__user-edit-modal {
    inset: 0; border-radius: 0; border: none; box-shadow: none;
}
.dr-chat--focus .dr-chat__admin-modal {
    inset: 0;
    border-radius: 0;
    border: none;
    box-shadow: none;
}
.dr-chat--focus .dr-chat__admin-overlay {
    display: none;
}
/* Auto-fullscreen modals on small viewports */
@media (max-width: 1000px), (max-height: 800px) {
    .dr-chat__admin-modal,
    .dr-chat__user-edit-modal {
        inset: 0; border-radius: 0; border: none; box-shadow: none;
    }
    .dr-chat__admin-overlay { display: none; }
}
/* Placeholder for coming-soon tabs */
.dr-ue__placeholder {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 100%; min-height: 200px;
    color: var(--text-secondary-inner); opacity: .45;
    font-size: .85rem; text-align: center; gap: .5rem;
}
.dr-ue__placeholder svg { width: 32px; height: 32px; opacity: .5; }
.dr-chat__admin-sidebar {
    width: 180px; flex-shrink: 0;
    display: flex; flex-direction: column;
    padding: .4rem 0;
    background: rgba(0,0,0,.2);
    border-right: 1px solid rgba(255,255,255,.06);
    overflow-y: auto;
    transition: width .2s ease;
}
.dr-chat__admin-sidebar-spacer { flex: 1; }
.dr-chat__admin-collapse {
    display: flex; align-items: center; justify-content: flex-end;
    background: none; border: none; color: var(--text-secondary-inner);
    padding: .4rem .6rem .5rem; font-size: 1.2rem; cursor: pointer;
    opacity: .4; transition: opacity .15s;
    line-height: 1;
}
.dr-chat__admin-collapse:hover { opacity: .8; }
.dr-chat__admin-content {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
    position: relative;
}
/* ── View header ─────────────────────────────────────────── */
.dr-adm__view-header {
    display: flex; align-items: center; gap: .5rem;
    padding: .5rem .75rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
    flex-shrink: 0;
}
.dr-adm__view-header-title {
    flex: 1; margin: 0; font-size: .85rem; font-weight: 600;
    color: var(--text-primary-inner);
}
.dr-chat__admin-close {
    background: rgba(255,255,255,.06); border: none; color: var(--text-secondary-inner);
    width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; cursor: pointer; opacity: .5; line-height: 1;
    transition: opacity .15s, background .15s;
}
.dr-chat__admin-close:hover { opacity: 1; background: rgba(255,255,255,.12); }
.dr-chat__admin-inner { flex: 1; min-height: 0; overflow-y: auto; position: relative; }

/* ── Admin design system (dr-adm__*) ───────────────────────── */

/* Segments — group settings by topic */
.dr-adm__segment { margin-bottom: 1.25rem; }
.dr-adm__segment-title {
    font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    opacity: .35; margin-bottom: .5rem; padding-bottom: .3rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

/* Field — single setting row */
.dr-adm__field { margin-bottom: .6rem; }
.dr-adm__field-header {
    display: flex; align-items: center; gap: .75rem;
}
.dr-adm__field-name {
    font-size: .78rem; opacity: .7; min-width: 140px; flex-shrink: 0;
}
.dr-adm__field-control {
    display: flex; align-items: center; gap: .4rem; min-width: 140px;
}
.dr-adm__field-control > input[type="number"],
.dr-adm__field-control > select {
    width: 100px;
}
.dr-adm__field-control > input[type="password"],
.dr-adm__field-control > input[type="text"] {
    width: 100px;
}
.dr-adm__field-desc {
    font-size: .65rem; opacity: .3; margin-top: .15rem; padding-left: 140px;
    margin-left: .75rem;
}
.dr-adm__unit { font-size: .65rem; opacity: .4; }

/* Collapsible details (long info text) */
.dr-adm__details {
    margin-top: .25rem; padding-left: 140px; margin-left: .75rem;
}
.dr-adm__details summary {
    font-size: .65rem; opacity: .35; cursor: pointer; user-select: none;
}
.dr-adm__details summary:hover { opacity: .6; }
.dr-adm__details-body {
    font-size: .65rem; opacity: .5; line-height: 1.6;
    margin-top: .3rem; padding: .4rem .5rem;
    background: rgba(0,0,0,.15); border-radius: .3rem;
}

/* Color input + preview */
.dr-adm__color-group { display: flex; align-items: center; gap: .5rem; }
.dr-adm__color-input {
    width: 28px; height: 24px; padding: 0; border: 1px solid rgba(255,255,255,.1);
    border-radius: .25rem; background: transparent; cursor: pointer;
}
.dr-adm__badge-preview {
    font-size: .6rem; font-weight: 700; color: #fff;
    padding: 1px 8px; border-radius: 3px; white-space: nowrap;
}

/* Inputs — unified style */
.dr-adm__input {
    padding: .3rem .45rem; background: rgba(0,0,0,.25);
    border: 1px solid rgba(255,255,255,.08); border-radius: .35rem;
    color: var(--text-primary-inner); font-size: .75rem;
    transition: border-color .15s, background .15s;
}
.dr-adm__input:focus {
    outline: none; border-color: var(--accent-inner); background: rgba(0,0,0,.35);
}
select.dr-adm__input { background-color: #1a1a1a; }
select.dr-adm__input option { background: #1a1a1a; color: var(--text-primary-inner); }
.dr-adm__input--emoji {
    width: 36px; text-align: center; font-size: .85rem; padding: .2rem;
}
.dr-adm__input--sm { font-size: .7rem; padding: .2rem .35rem; }
.dr-adm__input--wide { width: 220px !important; }

/* Toggle switch */
.dr-adm__switch { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0; }
.dr-adm__switch input { opacity: 0; width: 0; height: 0; }
.dr-adm__switch-slider {
    position: absolute; inset: 0; background: rgba(255,255,255,.12); border-radius: 10px;
    cursor: pointer; transition: background .2s;
}
.dr-adm__switch-slider::before {
    content: ''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px;
    background: #fff; border-radius: 50%; transition: transform .2s;
}
.dr-adm__switch input:checked + .dr-adm__switch-slider { background: var(--accent-inner, #8b1a1a); }
.dr-adm__switch input:checked + .dr-adm__switch-slider::before { transform: translateX(16px); }

/* Buttons — unified style */
.dr-adm__btn {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .3rem .6rem; border-radius: .35rem;
    font-size: .72rem; font-weight: 600; cursor: pointer;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
    color: var(--text-secondary-inner);
    transition: background .12s, transform .08s, border-color .12s;
}
.dr-adm__btn:hover { background: rgba(255,255,255,.1); }
.dr-adm__btn:active { transform: scale(.97); }
.dr-adm__btn--primary {
    background: var(--accent-inner); border-color: var(--accent-inner); color: #fff;
}
.dr-adm__btn--primary:hover { filter: brightness(1.1); }
.dr-adm__btn--danger { color: #e74c3c; border-color: rgba(231,76,60,.2); }
.dr-adm__btn--danger:hover { background: rgba(231,76,60,.12); }
.dr-adm__btn--sm { font-size: .65rem; padding: .2rem .4rem; }
.dr-adm__btn--warn { color: #f39c12; border-color: rgba(243,156,18,.3); background: rgba(243,156,18,.08); }
.dr-adm__btn svg { width: 14px; height: 14px; }

/* Icon buttons (inline action icons) */
.dr-adm__icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: .3rem;
    background: none; border: none; color: var(--text-secondary-inner);
    cursor: pointer; opacity: .35; transition: opacity .12s, background .12s;
    flex-shrink: 0;
}
.dr-adm__icon-btn:hover { opacity: .8; background: rgba(255,255,255,.06); }
.dr-adm__icon-btn--danger { color: #e74c3c; }
.dr-adm__icon-btn--danger:hover { background: rgba(231,76,60,.1); }
.dr-adm__icon-btn--star.is-active { color: #f39c12; opacity: .7; }
.dr-adm__icon-btn--disabled { opacity: .15; pointer-events: none; cursor: default; }
.dr-adm__icon-btn--sm { width: 20px; height: 20px; }
.dr-adm__icon-btn--sm svg { width: 12px; height: 12px; }
.dr-adm__icon-btn svg { width: 14px; height: 14px; }

/* List items — one-line rows for rooms, bans, templates */
.dr-adm__list-item {
    display: flex; align-items: center; gap: .4rem;
    padding: .35rem .5rem; margin-bottom: .2rem;
    border-radius: .35rem; background: rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.04);
    transition: background .1s;
}
.dr-adm__list-item:hover { background: rgba(255,255,255,.05); }
.dr-adm__list-item.is-disabled { opacity: .35; }
.dr-adm__meta { font-size: .65rem; opacity: .4; white-space: nowrap; min-width: 4.5rem; text-align: right; }

/* Group title (template types, emoji categories) */
.dr-adm__group-title {
    font-size: .6rem; font-weight: 700; text-transform: uppercase;
    opacity: .3; letter-spacing: .05em;
    margin: .6rem 0 .25rem; padding-top: .4rem;
    border-top: 1px solid rgba(255,255,255,.06);
}
.dr-adm__group-title:first-child { margin-top: 0; border-top: none; padding-top: 0; }

/* Add bar — consistent add-new section */
.dr-adm__add-bar {
    margin-top: .75rem; padding-top: .75rem;
    border-top: 1px solid rgba(255,255,255,.06);
}
.dr-adm__add-title {
    display: flex; align-items: center; gap: .3rem;
    font-size: .7rem; opacity: .5; margin-bottom: .4rem;
}
.dr-adm__add-title svg { width: 14px; height: 14px; }
.dr-adm__add-row {
    display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
}

/* Save bar — sticky save button area */
.dr-adm__save-bar {
    display: flex; align-items: center; gap: .6rem;
    margin-top: .75rem; padding-top: .75rem;
    border-top: 1px solid rgba(255,255,255,.06);
}
.dr-adm__save-bar .dr-adm__btn svg { width: 14px; height: 14px; }

/* Action bar — cleanup/reset actions */
.dr-adm__action-bar {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    margin-top: .75rem; padding-top: .75rem;
    border-top: 1px solid rgba(255,255,255,.06);
}
.dr-adm__action-sep {
    width: 1px; height: 20px; background: rgba(255,255,255,.08);
}

/* Status text (save confirmation, errors) */
.dr-adm__status { font-size: .7rem; opacity: .5; }

/* Loading/empty states */
.dr-adm__loading, .dr-adm__empty {
    text-align: center; padding: 1.5rem; font-size: .78rem; opacity: .4;
}

/* File upload label */
.dr-adm__file-label { cursor: pointer; }
.dr-adm__file-label .dr-adm__btn { pointer-events: none; }

/* Emoji grid */
/* ── Emoji view layout ────────────────────────────────────── */
.dr-adm__emoji-view {
    display: flex !important; gap: 0; padding: 0 !important;
    position: absolute; inset: 0;
}
.dr-adm__emoji-view[hidden] { display: none !important; }
.dr-adm__emoji-sidebar {
    width: 160px; min-width: 160px; display: flex; flex-direction: column;
    background: rgba(0,0,0,.12);
    border-right: 1px solid rgba(255,255,255,.06);
    overflow-y: auto; padding: .35rem 0;
}
.dr-adm__emoji-sidebar-title {
    padding: .35rem .65rem .45rem; font-size: .6rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-muted-inner); opacity: .6;
}
.dr-adm__emoji-main {
    flex: 1; min-width: 0; overflow-y: auto; padding: 0;
    display: flex; flex-direction: column;
}
.dr-adm__emoji-cat {
    display: flex; align-items: center; gap: .4rem;
    width: calc(100% - .7rem); margin: 1px .35rem;
    padding: .45rem .6rem; border: none; border-radius: .35rem;
    background: none; color: var(--text-secondary-inner);
    font-size: .78rem; font-weight: 450; cursor: pointer;
    text-align: left; white-space: nowrap;
    transition: background .12s, color .12s, opacity .12s;
    position: relative; opacity: .6;
}
.dr-adm__emoji-cat:hover { opacity: .85; background: rgba(255,255,255,.05); }
.dr-adm__emoji-cat.is-active {
    opacity: 1; color: var(--text-primary-inner);
    background: rgba(255,255,255,.08);
    box-shadow: inset 2px 0 0 var(--accent-inner);
}
.dr-adm__emoji-cat.is-dragover {
    background: rgba(139,26,26,.18); opacity: 1;
    box-shadow: inset 2px 0 0 var(--accent-light-inner);
}
.dr-adm__emoji-cat-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-adm__emoji-cat-count {
    font-size: .65rem; opacity: .35; min-width: 1.2rem; text-align: right;
}
.dr-adm__emoji-cat-del {
    opacity: 0; cursor: pointer; color: var(--text-muted-inner);
    transition: opacity .15s, color .15s; font-size: .65rem;
}
.dr-adm__emoji-cat:hover .dr-adm__emoji-cat-del { opacity: .6; }
.dr-adm__emoji-cat-del:hover { color: #e74c3c !important; opacity: 1 !important; }
.dr-adm__emoji-cat-del.dr-adm__icon-btn--confirm { opacity: 1 !important; color: #f39c12 !important; }
.dr-adm__emoji-cat-add {
    margin-top: auto; padding: .5rem; border: none;
    background: rgba(255,255,255,.03); color: var(--text-muted-inner);
    cursor: pointer; font-size: .85rem; font-weight: 500;
    transition: background .15s, color .15s;
    display: flex; align-items: center; justify-content: center;
    border-top: 1px solid rgba(255,255,255,.04);
}
.dr-adm__emoji-cat-add:hover { background: rgba(255,255,255,.06); color: var(--text-primary-inner); }

/* ── Emoji header ────────────────────────────────────────── */
.dr-adm__emoji-header {
    flex-shrink: 0;
    background: var(--bg-secondary-inner);
    padding: .55rem .75rem .5rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.dr-adm__emoji-header-top {
    display: flex; align-items: baseline; gap: .6rem; margin-bottom: .4rem;
}
.dr-adm__emoji-header-title {
    font-size: .9rem; font-weight: 600; margin: 0;
    color: var(--text-primary-inner);
}
.dr-adm__emoji-header-hint {
    font-size: .65rem; opacity: .35;
    display: flex; align-items: center; gap: .25rem;
}
.dr-adm__emoji-header-hint svg { width: 12px; height: 12px; }
.dr-adm__emoji-upload-row {
    display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
}
.dr-adm__emoji-upload-row .dr-adm__input {
    width: 120px; font-size: .75rem; padding: .3rem .45rem;
}
.dr-adm__emoji-upload-row .dr-adm__btn { font-size: .72rem; padding: .3rem .55rem; }
.dr-adm__emoji-upload-cat {
    font-size: .68rem; opacity: .4; font-style: italic; white-space: nowrap;
}
.dr-adm__emoji-upload-row[hidden] { display: none !important; }
.dr-adm__emoji-search-row {
    display: flex; align-items: center; gap: .35rem; margin-top: .35rem;
}
.dr-adm__emoji-search-row svg { width: 14px; height: 14px; opacity: .35; flex-shrink: 0; }
.dr-adm__emoji-search-row .dr-adm__input {
    flex: 1; font-size: .75rem; padding: .25rem .45rem;
}

/* ── Emoji size toggle ───────────────────────────────────── */
.dr-adm__emoji-size-toggle {
    display: flex; gap: 1px; margin-left: auto;
    background: rgba(255,255,255,.06); border-radius: .3rem; overflow: hidden;
}
.dr-adm__emoji-size-btn {
    background: none; border: none; color: var(--text-muted-inner);
    font-size: .6rem; font-weight: 600; padding: .2rem .45rem;
    cursor: pointer; transition: background .12s, color .12s;
    line-height: 1;
}
.dr-adm__emoji-size-btn:hover { background: rgba(255,255,255,.06); color: var(--text-secondary-inner); }
.dr-adm__emoji-size-btn.is-active {
    background: rgba(255,255,255,.12); color: var(--text-primary-inner);
}

/* ── Emoji grid ──────────────────────────────────────────── */
#admin-emoji-list {
    flex: 1; overflow-y: auto; padding: .75rem;
}
.dr-adm__emoji-grid {
    --emoji-size: 40px;
    display: flex; flex-wrap: wrap; gap: .5rem;
}
.dr-adm__emoji-item {
    display: flex; flex-direction: column; align-items: center; gap: .25rem;
    padding: .35rem; border-radius: .4rem; width: calc(var(--emoji-size) + 2rem);
    background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.04);
    cursor: grab; transition: opacity .15s, background .12s;
}
.dr-adm__emoji-item:hover { background: rgba(255,255,255,.06); }
.dr-adm__emoji-item.is-dragging { opacity: .3; }
.dr-adm__emoji-img {
    width: var(--emoji-size); height: var(--emoji-size); object-fit: contain;
    pointer-events: none; /* prevent img from becoming drag target */
}
.dr-adm__emoji-name {
    font-size: .7rem; opacity: .55; cursor: text;
    padding: .15rem .25rem; border-radius: .2rem;
    transition: background .12s, opacity .12s;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    text-align: center;
}
.dr-adm__emoji-name:hover { opacity: .85; background: rgba(255,255,255,.06); }
.dr-adm__emoji-name-input {
    width: calc(var(--emoji-size) + 1.4rem); font-size: .7rem; padding: .15rem .3rem;
    background: rgba(0,0,0,.3); border: 1px solid var(--accent-inner);
    border-radius: .25rem; color: var(--text-primary-inner);
    outline: none; font-family: inherit; text-align: center;
}

/* ── Upload preview + validation ────────────────────────── */
.dr-adm__emoji-upload-preview {
    width: 28px; height: 28px; object-fit: contain; border-radius: .25rem;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06);
}
.dr-adm__emoji-upload-row .dr-adm__input.is-invalid {
    border-color: #e74c3c; color: #e74c3c;
}
.dr-adm__emoji-upload-row .dr-adm__btn--primary:disabled {
    opacity: .3; cursor: not-allowed; pointer-events: none;
}

/* ── Category add inline input ──────────────────────────── */
.dr-adm__emoji-cat-input {
    width: 100%; background: rgba(0,0,0,.25); border: 1px solid var(--accent-inner);
    border-radius: .25rem; color: var(--text-primary-inner);
    font-size: .75rem; padding: .25rem .4rem; outline: none; font-family: inherit;
}

/* ── Toast feedback ───────────────────────────────────────── */
.dr-adm__toast {
    position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%) translateY(.5rem);
    background: rgba(30,30,30,.92); border: 1px solid rgba(255,255,255,.1);
    color: #f1f1f1; font-size: .78rem; padding: .45rem 1rem; border-radius: .4rem;
    pointer-events: none; opacity: 0; transition: opacity .25s, transform .25s;
    white-space: nowrap; z-index: 120;
}
.dr-adm__toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.dr-adm__toast.is-error { border-color: rgba(231,76,60,.4); color: #e74c3c; }

/* ── Icon-button confirm state ────────────────────────────── */
.dr-adm__icon-btn--confirm {
    color: #f39c12 !important; opacity: 1 !important;
    animation: adm-pulse .6s ease-in-out infinite alternate;
}
@keyframes adm-pulse { from { opacity: .7; } to { opacity: 1; } }
/* ── User profile modal ──────────────────────────────────────── */
.dr-chat__user-profile-modal { width: 22em; z-index: 105; font-size: var(--chat-font-size); }
.dr-profile__row { display: flex; align-items: center; gap: .3em; padding: .15em 0; font-size: .9em; }
.dr-profile__row svg { width: 1.1em; height: 1.1em; flex-shrink: 0; vertical-align: -1px; }
.dr-profile__stats {
    display: flex; flex-wrap: wrap; align-items: center; gap: .3em .5em;
    font-size: .82em; opacity: .6; padding: .15em 0;
}
.dr-profile__stats svg { width: 1em; height: 1em; vertical-align: -1px; }
.dr-profile__stat {
    display: inline-flex; align-items: center; gap: .2em;
    white-space: nowrap;
}
/* Profile popup: admin nerd info */
.dr-profile__nerd {
    position: relative; display: inline-flex; align-items: center; padding: .15em 0;
}
.dr-profile__nerd-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.4em; height: 1.4em; border-radius: 50%;
    background: rgba(88,101,242,.15); color: var(--discord-inner); cursor: help;
    transition: background .15s;
}
.dr-profile__nerd-icon:hover { background: rgba(88,101,242,.3); }
.dr-profile__nerd-icon svg { width: 1em; height: 1em; }
.dr-profile__nerd-tooltip {
    display: none; position: absolute; left: 0; top: 100%; z-index: 10;
    margin-top: .3em; padding: .5em .7em; min-width: 14em;
    background: var(--bg-secondary-inner); border: 1px solid var(--border-inner);
    border-radius: .5em; font-size: .8em; line-height: 1.5;
    box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.dr-profile__nerd:hover .dr-profile__nerd-tooltip { display: block; }
.dr-profile__nerd-row { white-space: nowrap; }
.dr-profile__nerd-row strong { color: var(--text-primary-inner); }
/* Profile popup: banner + identity + fields */
.dr-profile__banner {
    height: 6em; background-size: cover; background-position: center;
    margin: -.75em -1em 0; cursor: grab;
}
.dr-profile__banner:active { cursor: grabbing; }
.dr-profile__identity {
    display: flex; align-items: center; gap: .5em;
    margin-bottom: .4em; cursor: grab;
}
.dr-profile__identity:active { cursor: grabbing; }
.dr-profile__banner + .dr-profile__body .dr-profile__identity {
    margin-top: -.5em;
}
.dr-profile__avatar-wrap {
    position: relative; flex-shrink: 0;
}
.dr-profile__avatar {
    width: 3.8em; height: 3.8em; border-radius: 25%; object-fit: cover;
    border: 2px solid var(--bg-secondary-inner); cursor: pointer;
}
.dr-profile__avatar--initial {
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6em; font-weight: 700; color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.3); cursor: default;
}
.dr-profile__avatar-preview {
    display: none; position: absolute; z-index: 10;
    bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    max-width: 300px; max-height: 300px; border-radius: .5em;
    border: 2px solid var(--border-inner);
    box-shadow: 0 8px 24px rgba(0,0,0,.6);
    object-fit: contain; background: var(--bg-secondary-inner);
}
.dr-profile__avatar-wrap:hover .dr-profile__avatar-preview {
    display: block;
}
.dr-profile__banner + .dr-profile__body .dr-profile__avatar {
    margin-top: -.9em;
}
.dr-profile__name-block {
    min-width: 0; display: flex; flex-direction: column; justify-content: center;
}
.dr-profile__nick {
    font-size: 1em; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dr-profile__suffix {
    font-size: .82em; opacity: .55;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dr-profile__body { padding: .5em 1em 0; }
.dr-profile__statement {
    font-size: .9em; opacity: .7; font-style: italic;
    padding: .25em 0 .4em; border-bottom: 1px solid rgba(255,255,255,.06);
    margin-bottom: .4em; white-space: pre-wrap; word-break: break-word;
}
.dr-profile__fields { padding: .2em 0 .3em; }
.dr-profile__field {
    display: flex; align-items: center; gap: .35em;
    font-size: .88em; padding: .15em 0; opacity: .75;
}
.dr-profile__field svg { width: 1em; height: 1em; flex-shrink: 0; opacity: .6; }
.dr-profile__field a { color: var(--text-primary-inner); text-decoration: underline; text-underline-offset: 2px; }
.dr-profile__field a:hover { opacity: .8; }

/* ── Custom context menu ─────────────────────────────────────── */
.dr-ctx {
    position: absolute;
    z-index: 120;
    background: var(--bg-secondary-inner);
    border: 1px solid var(--border-inner);
    border-radius: .4rem;
    box-shadow: 0 4px 16px rgba(0,0,0,.5);
    min-width: 160px;
    padding: .25rem 0;
    font-size: .8rem;
}
.dr-ctx__item {
    padding: .35rem .75rem;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.dr-ctx__item svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    opacity: .7;
}
.dr-ctx__item:hover {
    background: var(--bg-hover-inner);
}
.dr-ctx__item--muted {
    opacity: .45;
}
.dr-ctx__item--danger {
    color: #e74c3c;
}
.dr-ctx__item--danger:hover {
    background: rgba(231, 76, 60, .12);
}
.dr-ctx__label {
    padding: .3rem .75rem;
    font-size: .7rem;
    opacity: .4;
    cursor: default;
}
.dr-ctx__sep {
    height: 1px;
    margin: .25rem 0;
    background: var(--border-inner);
}

/* ── Copy Toast ──────────────────────────────────────────────── */
.dr-copy-toast {
    position: absolute;
    bottom: 4.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    background: var(--bg-secondary-inner);
    border: 1px solid var(--border-inner);
    color: var(--text-inner);
    padding: .25rem .75rem;
    border-radius: .35rem;
    font-size: .75rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
    z-index: 130;
}
.dr-copy-toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.dr-chat__kickban-modal { min-width: 260px; z-index: 110; }
.dr-chat__admin-inner { padding: 1rem 1.25rem; }
/* Legacy classes still used by kickban/profile modals */
.dr-chat__admin-row {
    display: flex; align-items: center; gap: .75rem; margin-bottom: .6rem;
}
.dr-chat__admin-row label {
    font-size: .72rem; opacity: .5; min-width: 130px; flex-shrink: 0;
}
.dr-chat__admin-input {
    width: 70px; padding: .35rem .5rem; background: rgba(0,0,0,.25);
    border: 1px solid rgba(255,255,255,.08); border-radius: .4rem;
    color: var(--text-secondary-inner); font-size: .78rem;
}
.dr-chat__admin-input:focus { outline: none; border-color: var(--accent-inner); }
.dr-chat__color-input {
    width: 32px; height: 28px; border: 1px solid var(--border-inner);
    border-radius: .3rem; background: transparent; cursor: pointer; padding: 0;
}
.dr-chat__admin-tab {
    display: flex; align-items: center; gap: .55rem;
    width: calc(100% - 1rem);
    margin: 2px .5rem; padding: .5rem .65rem;
    background: none; border: none; border-radius: .4rem;
    color: var(--text-secondary-inner);
    font-size: .82rem; font-weight: 500; cursor: pointer;
    text-align: left; opacity: .55;
    white-space: nowrap; overflow: hidden;
    transition: background .12s, opacity .12s, color .12s;
}
.dr-chat__admin-tab:hover { opacity: .8; background: rgba(255,255,255,.06); }
.dr-chat__admin-tab.active {
    opacity: 1; color: var(--text-primary-inner);
    background: rgba(255,255,255,.08);
}
.dr-chat__admin-tab-icon { flex-shrink: 0; font-size: 1rem; line-height: 1; }
.dr-chat__admin-tab-label { overflow: hidden; text-overflow: ellipsis; }

/* Collapsed sidebar — icon only */
.dr-chat__admin-sidebar.is-collapsed { width: 48px; }
.dr-chat__admin-sidebar.is-collapsed .dr-chat__admin-collapse { justify-content: center; padding-right: 0; }
.dr-chat__admin-sidebar.is-collapsed .dr-chat__admin-tab {
    justify-content: center; padding: .55rem .3rem; width: calc(100% - .5rem); margin: 2px .25rem;
}
.dr-chat__admin-sidebar.is-collapsed .dr-chat__admin-tab-icon { font-size: 1.1rem; }
.dr-chat__admin-sidebar.is-collapsed .dr-chat__admin-tab-label { display: none; }
.dr-chat__profile-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .5rem;
}
.dr-chat__profile-row label {
    font-size: .75rem;
    opacity: .6;
    min-width: 90px;
    flex-shrink: 0;
}
.dr-chat__profile-input {
    flex: 1;
    padding: .35rem .5rem;
    background: var(--bg-primary-inner);
    border: 1px solid var(--border-inner);
    border-radius: .3rem;
    color: var(--text-secondary-inner);
    font-size: .8rem;
    outline: none;
}
.dr-chat__profile-input:focus { border-color: var(--live-color-inner); }

/* ── Custom Emoji in messages ──────────────────────────────── */
.dr-msg__custom-emoji {
    max-width:500px;
    max-height: 300px;
    vertical-align: middle;
    display: inline;
    object-fit: contain;
    cursor: pointer;
}

/* ── Guest Login Button ──────────────────────────────────────── */
.dr-chat__btn--guest-login {
    background: var(--accent-inner);
    color: var(--text-primary-inner);
    font-size: .75rem;
}
.dr-chat__btn--guest-login:hover { background: var(--accent-hover-inner); }


/* ── Guest Badge (registered non-mod user) ───────────────────── */
.dr-msg__badge--guest {
    background: var(--discord-inner);
}

/* ── Leaderboard (inside sidebar) ────────────────────────────── */
.dr-chat__sidebar-title {
    display: flex; align-items: center; gap: .3rem;
    font-size: calc(var(--chat-font-size) * .8); font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--text-muted-inner);
    padding: .4rem .5rem .2rem;
    list-style: none; pointer-events: none;
}
.dr-chat__sidebar-title svg { width: calc(var(--chat-icon-size) * .85); height: calc(var(--chat-icon-size) * .85); }
li.dr-chat__sidebar-title + li.dr-chat__sidebar-title,
li.dr-chat__sidebar-title:not(:first-child) {
    margin-top: .5rem;
    border-top: 1px solid rgba(255,255,255,.08);
    padding-top: .5rem;
}
.dr-chat__leaderboard-tabs {
    display: flex;
    gap: 0;
    margin-bottom: .5rem;
    border-bottom: 1px solid var(--border-inner);
}
.dr-chat__leaderboard-tab {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    background: none;
    border: none;
    color: var(--text-secondary-inner);
    padding: .4rem .5rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color var(--transition-inner), border-color var(--transition-inner);
}
.dr-chat__leaderboard-tab svg { width: var(--chat-icon-size); height: var(--chat-icon-size); }
.dr-chat__leaderboard-tab:hover { color: var(--text-primary-inner); }
.dr-chat__leaderboard-tab.active {
    color: var(--accent-light-inner);
    border-bottom-color: var(--accent-light-inner);
}
.dr-chat__lb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: calc(var(--chat-font-size) * .88);
}
.dr-chat__lb-table th {
    text-align: left;
    padding: .3rem .4rem;
    font-weight: 600;
    opacity: .5;
    font-size: calc(var(--chat-font-size) * .75);
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-inner);
}
.dr-chat__lb-table td {
    padding: .3rem .4rem;
    border-bottom: 1px solid rgba(255,255,255,.04);
}
.dr-chat__lb-table:not(.dr-adm__user-table) tr:first-child td { color: #ffd700; font-weight: 600; }
.dr-chat__lb-table:not(.dr-adm__user-table) tr:nth-child(2) td { color: #c0c0c0; }
.dr-chat__lb-table:not(.dr-adm__user-table) tr:nth-child(3) td { color: #cd7f32; }

/* ── Color swatch (admin user table) ─────────────────────── */
.dr-adm__color-swatch {
    display: inline-block; width: 42px; height: 14px; border-radius: 3px;
    vertical-align: middle; box-shadow: 0 0 0 1px rgba(255,255,255,.1);
    cursor: pointer; position: relative;
    transition: transform .15s;
}
.dr-adm__color-swatch:hover {
    transform: scaleY(1.4);
}
.dr-adm__color-swatch:hover::after {
    content: attr(data-color);
    position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%);
    background: rgba(20,20,20,.95); border: 1px solid rgba(255,255,255,.12);
    color: #f1f1f1; font-size: .6rem; padding: .15rem .4rem; border-radius: .25rem;
    white-space: nowrap; pointer-events: none; z-index: 10;
}
.dr-chat__lb-rank { width: 2rem; text-align: center; }
/* Session-transfer overlay */
.dr-chat__session-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    backdrop-filter: blur(2px);
}
.dr-chat__session-overlay-box {
    text-align: center;
    padding: 1.5rem 2rem;
    background: var(--bg-secondary-inner);
    border-radius: .5rem;
    border: 1px solid rgba(255,255,255,.1);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.dr-chat__session-overlay-box p {
    margin: 0;
    font-size: .95rem;
    opacity: .9;
}