/* ==========================================================================
   CHATBOX CHAT.CSS
   Versie: Dark Icons & Working GIF Reply (Clean Format)
   ========================================================================== */

#rd-rich-chat{
    /* --- HOOFD KLEUREN & UI --- */
    --primary: #799fcb;             /* Pastel Blauw */
    --primary-dark: #638ab4;
    --bg-app: #f3f4f6;
    --bg-chat: #ffffff;
    --border: #e5e7eb;
    --header-bg: #1f2937;
    --header-text: #fff;
    --danger: #d44e59;

    /* --- AFBEELDINGEN --- */
    --bg-chat-image: url("https://www.radio-digitaal.nl/images/chat-bg.jpg?6");
    --bg-sidebar-image: url("https://www.radio-digitaal.nl/images/sidebar-bg8.jpg");
    --bg-input-image: url("https://www.radio-digitaal.nl/images/input-bg.jpg");
    --bg-size-mode: cover;

    /* --- KLEUREN --- */
    --vip-color: #ffc107;
    --bubble-bg-self-user: var(--primary);
    --text-self: #ffffff;
    --bubble-bg-other-user: #f3f4f6;
    --text-other: #1f2937;

    --dj-gold: #E0E6ED;
    --dj-glow-bg: #fdfbe9;

    --avatar-bg-dj: #DC3545;
    --avatar-icon-dj: #333;
    --avatar-bg-listener: #d1d5db;
    --avatar-icon-listener: #6b7280;

    --level-badge-bg-sidebar: var(--primary-dark);
    --level-badge-text-sidebar: #ffffff;
    --level-badge-bg-chat: var(--primary);
    --level-badge-text-chat: #ffffff;

    --font-size-chat-text: 15px;
    --font-size-emoji-inline: 20px;
    --font-size-name: 13px;

    /* --- BADGES --- */
    --badge-dj-bg: #dc3545;
    --badge-dj-text: #ffffff;
    --badge-vip-bg: #ffc107;
    --badge-vip-text: #000000;

    --badge-font-size: 9px;
    --badge-padding: 1px 4px;
    --badge-radius: 2px;
    --badge-margin-left: 6px;
}

/* ==========================================================================
   BASIS & LAYOUT
   ========================================================================== */

#rd-rich-chat *{
    box-sizing: border-box;
}

#rd-rich-chat, #rd-rich-chat{
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: "Inter", system-ui, sans-serif;
    background-color: var(--bg-app);
    overflow: hidden;
}

/* --- HEADER --- */
#rd-rich-chat .chat-header{
    height: 50px;
    background: var(--header-bg);
    color: var(--header-text);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 20;
}

#rd-rich-chat .header-left{
    display: flex;
    align-items: center;
    gap: 10px;
}

#rd-rich-chat .status-dot{
    width: 10px;
    height: 10px;
    background: #10b981;
    border-radius: 50%;
    display: block;
}

#rd-rich-chat .station-name{
    font-weight: 600;
    font-size: 16px;
}

#rd-rich-chat .icon-btn{
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* --- HOOFD LAYOUT --- */
#rd-rich-chat .app-layout{
    display: flex;
    height: calc(100% - 50px);
    position: relative;
    width: 100%;
    min-width: 300px;
}

#rd-rich-chat .chat-area{
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-chat);
    background-image: var(--bg-chat-image);
    background-size: var(--bg-size-mode);
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    min-width: 0;
}

#rd-rich-chat .messages-container{
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    scroll-behavior: smooth;
}

/* --- LOADING SPINNER --- */
#rd-rich-chat .loading-spinner{
    text-align: center;
    padding: 20px;
    font-size: 14px;
    color: var(--primary-dark);
    animation: pulse 1.5s infinite;
}

@keyframes pulse{
    0%{ opacity: 0.5; }
    50%{ opacity: 1; }
    100%{ opacity: 0.5; }
}

/* ==========================================================================
   BERICHTEN & BUBBELS
   ========================================================================== */

#rd-rich-chat .msg-row{
    display: flex;
    flex-direction: column;
    max-width: 80%;
    animation: popIn 0.2s ease-out;
    margin-bottom: 8px;
}

@keyframes popIn{
    from{ opacity: 0; transform: translateY(10px); }
    to{ opacity: 1; transform: translateY(0); }
}

#rd-rich-chat .msg-row.own{
    align-self: flex-end;
    align-items: flex-end;
}

#rd-rich-chat .msg-row.other{
    align-self: flex-start;
    align-items: flex-start;
}

#rd-rich-chat .msg-name{
    display: flex;
    align-items: center;
    gap: 4px;
    color: #6b7280;
    margin-bottom: 2px;
    margin-left: 5px;
}

#rd-rich-chat .msg-name span{
    font-size: var(--font-size-name);
}

#rd-rich-chat .msg-row.own .msg-name{
    display: none;
}

#rd-rich-chat .msg-bubble{
    padding: 8px 14px;
    border-radius: 16px;
    font-size: var(--font-size-chat-text);
    line-height: 1.4;
    position: relative;
    word-break: break-word;
    word-wrap: break-word;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    overflow: visible;
    display: flex;
    flex-direction: column;
    min-width: 120px;
}

#rd-rich-chat .bubble-content{
    display: block;
    width: 100%;
}

#rd-rich-chat .msg-bubble span:not(.irc-cmd){
    font-size: var(--font-size-chat-text);
}

#rd-rich-chat .msg-bubble span[role="img"], #rd-rich-chat .msg-bubble span *{
    font-size: var(--font-size-emoji-inline);
}

/* Zorgt dat IRC styling niet overschreven wordt door emoji size */
#rd-rich-chat .msg-bubble span:not([style*="font-weight"]):not(.irc-cmd){
    font-size: var(--font-size-emoji-inline);
}

#rd-rich-chat .msg-row.own .msg-bubble{
    background: var(--bubble-bg-self-user);
    color: var(--text-self);
    border-bottom-right-radius: 2px;
}

#rd-rich-chat .msg-row.other .msg-bubble{
    background: var(--bubble-bg-other-user);
    color: var(--text-other);
    border-bottom-left-radius: 2px;
}

/* --- DJ STYLING --- */
#rd-rich-chat .msg-row.dj .msg-name{
    color: var(--primary-dark);
    font-weight: bold;
}

#rd-rich-chat .msg-row.dj .msg-bubble{
    border: 1px solid rgba(232, 215, 185, 0.5);
    background: var(--dj-glow-bg);
    color: #000;
}

#rd-rich-chat .msg-row.own.dj .msg-bubble{
    background: var(--dj-gold);
    color: #000;
    border-bottom-right-radius: 2px;
}

/* ==========================================================================
   ACTIES & ICONEN (Reply, Delete, Like)
   ========================================================================== */

#rd-rich-chat .message-actions{
    display: flex;
    justify-content: flex-end;
    gap: 5px;
    margin-top: 5px;
    margin-left: auto;
    padding-top: 3px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* BASIS ICOON STIJL (Donkergrijs voor betere zichtbaarheid) */
#rd-rich-chat .action-icon{
    font-size: 13px !important;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.2s;
    color: #4b5563 !important; /* Donkergrijs - ALTIJD zichtbaar */
    display: inline-block;
}

#rd-rich-chat .action-icon:hover{
    opacity: 1;
    transform: scale(1.1);
    color: #000 !important;
}

/* SPECIFIEKE KLEUREN BIJ HOVER */
#rd-rich-chat .delete-btn:hover{ color: #dc3545 !important; }
#rd-rich-chat .reply-btn:hover{ color: #1877F2 !important; }
#rd-rich-chat .reaction-hint:hover{ color: #eab308 !important; }

/* REACTIE MENU POPUP */
#rd-rich-chat .reaction-menu{
    position: fixed;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 6px 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    z-index: 10005;
    display: flex;
    gap: 8px;
    width: 180px;
}

#rd-rich-chat .reaction-btn{
    cursor: pointer;
    font-size: 20px;
    transition: transform 0.2s;
}

#rd-rich-chat .reaction-btn:hover{
    transform: scale(1.3);
}

/* TELLERS ONDER BERICHT */
#rd-rich-chat .reaction-counts{
    display: inline-flex;
    align-items: center;
    margin-top: 5px;
    font-size: 11px;
}

#rd-rich-chat .reaction-count{
    display: flex;
    align-items: center;
    gap: 2px;
    margin-right: 8px;
    color: inherit;
    opacity: 0.9;
}

#rd-rich-chat .reaction-count .reaction-emoji{
    font-size: 14px !important;
}

/* ==========================================================================
   MEDIA & REPLY PREVIEW
   ========================================================================== */

#rd-rich-chat .chat-gif{
    max-width: 100px;
    border-radius: 8px;
    display: block;
    border: none;
}

/* STIJL VOOR DE GIF IN EEN REPLY QUOTE */
#rd-rich-chat .reply-gif-thumb{
    max-height: 60px;
    max-width: 100px;
    border-radius: 4px;
    display: block;
    margin-top: 2px;
}

/* REPLY PREVIEW BAR (Popup boven input) */
#rd-rich-chat #reply-preview-bar{
    background-color: #f3f4f6;
    border-top: 3px solid var(--primary);
    border-bottom: 1px solid #ddd;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-size: 13px;
    color: #333;
    animation: slideUp 0.2s ease-out;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.05);
}

#rd-rich-chat #reply-preview-bar.hidden{
    display: none !important;
}

#rd-rich-chat .reply-info{
    display: flex;
    flex-direction: column;
    max-width: 90%;
}

#rd-rich-chat .reply-label{
    font-weight: bold;
    color: var(--primary);
    font-size: 11px;
    margin-bottom: 2px;
}

#rd-rich-chat #reply-text-preview{
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #555;
    font-size: 12px;
}

#rd-rich-chat #close-reply{
    background: none;
    border: none;
    font-size: 20px;
    color: #999;
    cursor: pointer;
    padding: 0 5px;
}

#rd-rich-chat #close-reply:hover{
    color: var(--danger);
}

@keyframes slideUp{
    from{ transform: translateY(10px); opacity: 0; }
    to{ transform: translateY(0); opacity: 1; }
}

/* QUOTE IN DE CHAT BUBBEL */
#rd-rich-chat .reply-quote{
    background: rgba(0, 0, 0, 0.05);
    border-left: 3px solid var(--primary);
    padding: 5px 8px;
    margin-bottom: 6px;
    border-radius: 4px;
    font-size: 12px;
    color: #555;
    display: flex;
    flex-direction: column;
}

#rd-rich-chat .reply-quote strong{
    color: var(--primary);
    font-size: 12px;
    margin-bottom: 2px;
}
#rd-rich-chat .reply-quote span{
    color: var(--primary); /* Of grijs #555 als je dat liever hebt */
    font-size: 14px !important; /* Forceer 11px, overschrijft de standaard bubbel tekst */
    line-height: 1.7 !important;
    opacity: 0.8;
}

/* ==========================================================================
   INPUT AREA
   ========================================================================== */

#rd-rich-chat .input-area{
    background: #fff;
    background-image: var(--bg-input-image);
    width: 100%;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
}

#rd-rich-chat #chat-form{
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px;
}

#rd-rich-chat .full-input, #rd-rich-chat #chat-input{
    flex: 1;
    padding: 10px 15px;
    border: 1px solid var(--border);
    border-radius: 20px;
    outline: none;
    font-size: 15px;
}

#rd-rich-chat #chat-input:focus{
    border-color: var(--primary);
}

#rd-rich-chat .tool-btn{
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #6b7280;
}

#rd-rich-chat #btn-send{
    background: var(--primary);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
}

#rd-rich-chat .emoji-grid{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    padding: 10px 0;
}

#rd-rich-chat .custom-emoji-btn{
    cursor: pointer;
    font-size: 28px;
    transition: transform 0.2s;
    line-height: 1;
}

#rd-rich-chat .custom-emoji-btn:hover{
    transform: scale(1.1);
}

#rd-rich-chat .toolbar{
    display: flex;
    gap: 10px;
    padding: 0 10px 10px 10px;
}

#rd-rich-chat .toolbar.hidden{
    display: none;
}

#rd-rich-chat .toolbar button{
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
}

#rd-rich-chat .toolbar button.active{
    background: #e5e7eb;
}

/* ==========================================================================
   SIDEBAR (Gebruikerslijst)
   ========================================================================== */

#rd-rich-chat .user-sidebar{
    width: 210px;
    background-color: #ffffff;
    background-image: var(--bg-sidebar-image);
    background-size: var(--bg-size-mode);
    background-repeat: no-repeat;
    background-position: center;
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    transform: translateX(0) !important;
    position: relative;
    z-index: 50;
    transition: transform 0.3s ease;
}

#rd-rich-chat #close-sidebar{
    display: none;
}

@media (max-width: 708px){
    #rd-rich-chat .user-sidebar{
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 50;
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
        transform: translateX(100%) !important;
    }

    #rd-rich-chat .user-sidebar.active{
        transform: translateX(0) !important;
    }

    #rd-rich-chat #close-sidebar{
        display: block;
    }
}

#rd-rich-chat .sidebar-header{
    background: #FFF;
    padding: 8px 15px;
    height: auto;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#rd-rich-chat .sidebar-header h3{
    font-size: 14px;
    margin: 0;
    color: #374151;
}

#rd-rich-chat .close-modal{
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #9ca3af;
    padding: 5px;
}

#rd-rich-chat .close-modal:hover{
    color: #1f2937;
}

#rd-rich-chat .user-list{
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1;
}

#rd-rich-chat .user-item{
    padding: 8px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.2s;
}

#rd-rich-chat .user-item:hover{
    background: #f9fafb;
}

#rd-rich-chat .user-info-group{
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
}

#rd-rich-chat .user-avatar{
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--avatar-bg-listener);
    color: var(--avatar-icon-listener);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    flex-shrink: 0;
}

#rd-rich-chat .user-item.is-dj .user-avatar{
    background: var(--avatar-bg-dj);
    color: var(--avatar-icon-dj);
}

#rd-rich-chat .sidebar-pfp{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#rd-rich-chat .user-avatar:has(.sidebar-pfp){
    background-color: transparent;
    border: 2px solid #ddd;
}

#rd-rich-chat .user-name{
    font-size: 13px;
    font-weight: 600;
    margin-right: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#rd-rich-chat .user-right-badges{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    min-width: 28px;
    flex-shrink: 0;
}

#rd-rich-chat .level-badge{
    width: 18px;
    height: 18px;
    min-width: 18px;
    line-height: 18px;
    text-align: center;
    font-size: 10px;
    font-weight: 600;
    border-radius: 50%;
    background: var(--level-badge-bg-sidebar);
    color: #fff;
}

#rd-rich-chat .level-badge.chat-badge{
    width: 20px;
    height: 20px;
    line-height: 20px;
    background: var(--level-badge-bg-chat);
    color: var(--level-badge-text-chat);
}

#rd-rich-chat .user-item.is-vip .user-name{
    font-weight: 600;
    color: red;
}

#rd-rich-chat .user-item.is-vip .user-avatar{
    border: 2px solid var(--vip-color);
}

#rd-rich-chat .status-tag{
    display: inline-block;
    padding: 1px 3px;
    border-radius: var(--badge-radius);
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
    vertical-align: middle;
}

#rd-rich-chat .status-tag.dj{
    background-color: var(--badge-dj-bg);
    color: var(--badge-dj-text);
}

#rd-rich-chat .status-tag.vip{
    background-color: var(--badge-vip-bg);
    color: var(--badge-vip-text);
}

/* ==========================================================================
   MODALS, MENUS & OVERLAYS
   ========================================================================== */

#rd-rich-chat .modal{
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

#rd-rich-chat .modal.hidden{
    display: none;
}

#rd-rich-chat .modal-content{
    background: white;
    padding: 20px;
    border-radius: 12px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

#rd-rich-chat .modal-header{
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

#rd-rich-chat .btn-danger{
    background: var(--danger);
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

#rd-rich-chat .btn-secondary{
    background: #e5e7eb;
    color: #374151;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

#rd-rich-chat .modal-actions{
    margin-top: 15px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

#rd-rich-chat .gif-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    height: 300px;
    overflow-y: auto;
    margin-top: 10px;
}

#rd-rich-chat .gif-result{
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    overflow: hidden;
}

#rd-rich-chat .gif-result:focus-visible{
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

#rd-rich-chat .gif-result:disabled{
    opacity: .55;
    cursor: wait;
}

#rd-rich-chat .gif-thumb{
    display: block;
    width: 100%;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
}

#rd-rich-chat .gif-status{
    min-height: 18px;
    margin-top: 7px;
    font-size: 12px;
    color: var(--muted-text, #6b7280);
}

#rd-rich-chat .gif-status.error{
    color: var(--danger, #b42318);
}

#rd-rich-chat .giphy-attribution{
    margin-top: 7px;
    text-align: right;
    font-size: 11px;
    letter-spacing: .02em;
    opacity: .75;
}

#rd-rich-chat .context-menu{
    position: absolute;
    background: white;
    border: 1px solid var(--border);
    border-radius: 8px;
    width: 150px;
    z-index: 200;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

#rd-rich-chat .context-menu.hidden{
    display: none;
}

#rd-rich-chat .menu-header{
    padding: 8px 12px;
    background: #f9fafb;
    font-weight: bold;
    font-size: 12px;
    color: #6b7280;
    border-bottom: 1px solid var(--border);
}

#rd-rich-chat .context-menu ul{
    list-style: none;
    margin: 0;
    padding: 5px 0;
}

#rd-rich-chat .context-menu li{
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
}

#rd-rich-chat .context-menu li:hover{
    background: #f3f4f6;
}

#rd-rich-chat .fullscreen-overlay{
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

#rd-rich-chat .fullscreen-overlay.hidden{
    display: none;
}

#rd-rich-chat .overlay-box{
    text-align: center;
}

#rd-rich-chat .countdown{
    font-size: 24px;
    font-weight: bold;
    color: var(--danger);
    margin-top: 20px;
}

#rd-rich-chat .channel-alert{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: var(--primary-dark);
    color: white;
    padding: 10px 15px;
    text-align: center;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    z-index: 10;
    pointer-events: none;
}

#rd-rich-chat .channel-alert.show{
    opacity: 1;
}

#rd-rich-chat .help-list-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

#rd-rich-chat .help-item{
    display: flex;
    align-items: center;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    padding: 8px;
    border-radius: 6px;
    gap: 10px;
}

#rd-rich-chat .help-key{
    font-weight: bold;
    color: #2563eb;
    background: #eff6ff;
    padding: 3px 6px;
    border-radius: 4px;
    min-width: 80px;
    text-align: center;
    font-size: 13px;
}

#rd-rich-chat .help-preview{
    font-size: 13px;
    color: #4b5563;
}

/* ==========================================================================
   IRC COMMAND STYLING (Uitgeschreven)
   ========================================================================== */

/* ====================================================== */
/* ULTRA WOW IRC COMMAND STYLING (2025 EDITION)          */
/* ====================================================== */

/* ==========================================================================
   IRC COMMAND STYLING (2025 WAUW EDITION)
   Compacte buttons, Maximale effecten!
   ========================================================================== */

/* BASISKNOP: Compact & Strak */
#rd-rich-chat .irc-cmd{
    display: inline-block;
    padding: 2px 8px;           /* Iets minder padding om het klein te houden */
    border-radius: 6px;
    font-weight: 800;           /* Extra dikke letters voor leesbaarheid */
    font-family: "Verdana", sans-serif;
    font-size: 12px !important; /* Lettergrootte iets kleiner voor gemiddelde chat */
    line-height: 1.4;
    text-transform: uppercase;  /* Maakt het stoerder */
    letter-spacing: 0.5px;
    box-shadow: 2px 2px 0px rgba(0,0,0,0.15); /* Harde schaduw voor 'sticker' effect */
    margin: 2px 2px;
    vertical-align: middle;
    transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Spring-effect */
    border: 1px solid rgba(0,0,0,0.1);
}

/* HOVER EFFECT: De knop 'springt' naar je toe */
#rd-rich-chat .irc-cmd:hover{
    transform: scale(1.1) rotate(-2deg);
    z-index: 100;
    box-shadow: 4px 4px 10px rgba(0,0,0,0.3);
    cursor: default;
}

/* --- 1. RAINBOW (!lol, !hype, !sfeer) --- */
/* Nu met snellere, vloeiende animatie */
#rd-rich-chat .irc-rainbow{
    background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
    background-size: 400% 400%;
    color: white;
    text-shadow: 1px 1px 0 #000;
    animation: rainbowMove 3s ease infinite;
    border: 1px solid white;
}
@keyframes rainbowMove{ 
    0%{ background-position: 0% 50% }
    50%{ background-position: 100% 50% }
    100%{ background-position: 0% 50% }
}

/* --- 2. GOLD - VERNIEUWD (!hitje, !applaus, !lekker) --- */
/* Veel meer 'metallic' goud in plaats van mosterdgeel */
#rd-rich-chat .irc-gold{
    background: linear-gradient(to bottom, #FFD700 0%, #FDB931 50%, #CFA026 51%, #FFD700 100%);
    color: #4B3621; /* Donkerbruin contrast */
    border: 1px solid #CFA026;
    text-shadow: 0px 1px 0px rgba(255,255,255,0.4);
    position: relative;
    overflow: hidden;
}
/* Shine effect eroverheen */
#rd-rich-chat .irc-gold::after{
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
    transform: rotate(30deg);
    animation: shineSweep 3s infinite;
}
@keyframes shineSweep{
    0%{ transform: translate(-100%, -100%) rotate(30deg); }
    20%{ transform: translate(100%, 100%) rotate(30deg); }
    100%{ transform: translate(100%, 100%) rotate(30deg); }
}

/* --- 3. SILVER/GREY - NIEUW (!greyvlek) --- */
/* Zilver met een lichte 'bibber' animatie voor de ouderdom */
#rd-rich-chat .irc-silver{
    background: linear-gradient(to bottom, #f2f2f2 0%, #d4d4d4 50%, #aaaaaa 51%, #f2f2f2 100%);
    color: #333;
    border: 1px solid #999;
    text-shadow: 0px 1px 0px #fff;
    animation: shiver 2s infinite; /* Bibberen! */
}
@keyframes shiver{
    0%{ transform: rotate(0deg); }
    95%{ transform: rotate(0deg); }
    96%{ transform: rotate(-1deg); }
    97%{ transform: rotate(1deg); }
    98%{ transform: rotate(-1deg); }
    99%{ transform: rotate(1deg); }
    100%{ transform: rotate(0deg); }
}

/* --- 4. DIAMOND/PLATINUM - NIEUW (!topper, !ty) --- */
/* Ijsblauw/wit luxe effect */
#rd-rich-chat .irc-diamond, #rd-rich-chat .irc-platinum{
    background: linear-gradient(135deg, #e0f7fa 0%, #ffffff 50%, #b2ebf2 100%);
    color: #006064;
    border: 1px solid #4dd0e1;
    box-shadow: 0 0 5px rgba(77, 208, 225, 0.5);
    animation: sparkle 1.5s infinite alternate;
}
@keyframes sparkle{
    0%{ box-shadow: 0 0 2px #4dd0e1; }
    100%{ box-shadow: 0 0 8px #00bcd4; }
}

/* --- 5. ALARM/BENGKSKE - NIEUW (!bengkske) --- */
/* Rood/Wit flitsend, heel opvallend */
#rd-rich-chat .irc-alarm{
    background: #ff0000;
    color: #fff;
    border: 2px solid #fff;
    animation: alarmFlash 0.5s infinite;
    font-weight: 900;
}
@keyframes alarmFlash{
    0%{ background: #ff0000; color: #fff; transform: scale(1); }
    50%{ background: #fff; color: #ff0000; transform: scale(1.05); }
    100%{ background: #ff0000; color: #fff; transform: scale(1); }
}

/* --- 6. WARNING - NIEUW (!18) --- */
/* Geel/Zwart gestreept */
#rd-rich-chat .irc-warning{
    position: relative;
    background: repeating-linear-gradient(
        -45deg,
        #f1c40f,
        #f1c40f 10px,
        #000 10px,
        #000 20px
    );
    background-size: 28px 28px;
    color: #fff;
    /* Extra dikke schaduw voor leesbaarheid op de strepen */
    text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000;
    border: 2px solid #000;
    overflow: hidden; /* Zorgt dat de rook binnen de knop blijft of juist erbuiten vervaagt */
    z-index: 1;
    animation: warningSlide 1s linear infinite;
}

/* De Rooklaag 1 */
#rd-rich-chat .irc-warning::before{
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.6) 0%, rgba(200,200,200,0.2) 40%, transparent 70%);
    filter: blur(8px);
    opacity: 0.7;
    z-index: -1;
    animation: smokeMovement 4s linear infinite;
}

/* De Rooklaag 2 (voor extra diepte) */
#rd-rich-chat .irc-warning::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 10%, transparent 60%);
    filter: blur(4px);
    z-index: 2; /* Deze rook drijft OVER de tekst heen */
    pointer-events: none;
    animation: smokeDrift 3s ease-in-out infinite alternate;
}

/* Animatie voor het schuiven van de strepen */
@keyframes warningSlide{
    from{ background-position: 0 0; }
    to{ background-position: 28px 0; }
}

/* Animatie voor de grote rookwolken (draaien en zweven) */
@keyframes smokeMovement{
    0%{ transform: translate(-10%, -10%) rotate(0deg); opacity: 0.4; }
    50%{ transform: translate(10%, 5%) rotate(180deg); opacity: 0.8; }
    100%{ transform: translate(-10%, -10%) rotate(360deg); opacity: 0.4; }
}

/* Animatie voor de rook die over de tekst drijft */
@keyframes smokeDrift{
    from{ transform: translateX(-20%) scale(1); opacity: 0.3; }
    to{ transform: translateX(20%) scale(1.2); opacity: 0.6; }
}

/* --- 7. DANCE (!dans, !swing, !disco, !polonaise) --- */
/* Wiebelt en verandert subtiel van kleur voor disco effect */
#rd-rich-chat .irc-dance{
    background: #ff00cc;
    background: linear-gradient(45deg, #ff00cc, #3333ff);
    color: white;
    border: 1px solid white;
    animation: wiggleColor 0.6s infinite alternate;
}
@keyframes wiggleColor{
    0%{ transform: rotate(-3deg); filter: hue-rotate(0deg); }
    100%{ transform: rotate(3deg); filter: hue-rotate(30deg); }
}

/* --- 8. LOVE (!knuffel, !zoen, !thnx) --- */
/* Zachtroze met kloppend hart animatie */
#rd-rich-chat .irc-love{
    background: #ffecf2;
    color: #e91e63;
    border: 1px solid #f48fb1;
    box-shadow: 0 2px 0 #f48fb1;
    animation: heartbeat 1.2s infinite;
}
@keyframes heartbeat{
    0%{ transform: scale(1); }
    15%{ transform: scale(1.05); }
    30%{ transform: scale(1); }
    45%{ transform: scale(1.05); }
    60%{ transform: scale(1); }
    100%{ transform: scale(1); }
}

/* --- 9. BEER (!biertje, !proost) --- */
/* Lijkt op bier met een schuimkraagje */
#rd-rich-chat .irc-beer{
    background: linear-gradient(to bottom, #ffffff 30%, #ffcc00 30%);
    color: #5c4d00;
    border: 1px solid #e6b800;
    text-shadow: 0 1px 0 rgba(255,255,255,0.8);
}

/* --- 10. ALERT/LOUD (!harder, !shotje, !alert) --- */
/* Schreeuwerig Rood/Geel met tril-effect */
#rd-rich-chat .irc-loud, #rd-rich-chat .irc-alert{
    background: #ff0000;
    color: #ffff00;
    border: 2px solid #ffff00;
    text-shadow: 1px 1px 0 #000;
    animation: shake 0.4s infinite;
}
@keyframes shake{
    0%{ transform: translate(0, 0) rotate(0deg); }
    25%{ transform: translate(-1px, 1px) rotate(-1deg); }
    50%{ transform: translate(1px, -1px) rotate(1deg); }
    75%{ transform: translate(-1px, -1px) rotate(0deg); }
    100%{ transform: translate(1px, 1px) rotate(-1deg); }
}

/* --- 11. ROCK/STAMPEN (!solo, !hakken, !drum, !box) --- */
/* Donker en stoer, draait of flitst */
#rd-rich-chat .irc-rock, #rd-rich-chat .irc-hakken{
    background: #222;
    color: #00ff00; /* Felgroen op zwart */
    border: 1px dashed #00ff00;
    animation: rockPulse 0.2s infinite alternate;
}
#rd-rich-chat .irc-hakken{
    color: #ffff00; /* Hakken is geel */
    border-color: #ffff00;
    animation: strobeFast 0.1s infinite;
}
@keyframes rockPulse{
    from{ transform: scale(1); }
    to{ transform: scale(1.05); text-shadow: 0 0 5px #00ff00; }
}
@keyframes strobeFast{
    0%{ background: #000; color: #ff0; }
    50%{ background: #ff0; color: #000; }
    100%{ background: #000; color: #ff0; }
}

/* --- 12. DJ & NEON (!dj, !djtop, !meezingen) --- */
/* Neon effect op zwarte achtergrond */
#rd-rich-chat .irc-dj, #rd-rich-chat .irc-sing{
    background: #111;
    color: #00ffff; /* Cyaan */
    border: 1px solid #00ffff;
    box-shadow: 0 0 5px #00ffff, inset 0 0 5px #00ffff;
    text-shadow: 0 0 2px #00ffff;
}

/* --- 13. BOUNCE (!jump, !handjes) --- */
/* Springt op en neer */
#rd-rich-chat .irc-bounce, #rd-rich-chat .irc-hands{
    background: #4caf50;
    color: white;
    border-bottom: 2px solid #2e7d32;
    animation: jumpHigh 0.8s infinite;
}
@keyframes jumpHigh{
    0%, 100%{ transform: translateY(0); }
    50%{ transform: translateY(-3px); }
}

/* --- 14. DRINKS (!wijn, !jaeger, !koffie, !thee) --- */
#rd-rich-chat .irc-wine{
    background: #800040;
    color: #fff;
    border: 1px solid #a00050;
    font-family: serif; /* Chiquer */
}
#rd-rich-chat .irc-jaeger{
    background: #1a3c00;
    color: #ff9900;
    border: 1px solid #ff9900;
}
#rd-rich-chat .irc-coffee{
    background: #6f4e37;
    color: white;
    border-bottom: 3px solid #3b281b;
}
#rd-rich-chat .irc-tea{
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px dashed #2e7d32;
}

/* --- 15. SOFT/FRESH (!zacht, !fris, !frisdrank) --- */
/* Ijsblauw en wazig */
#rd-rich-chat .irc-soft{
    background: #e0f7fa;
    color: #006064;
    border: 1px solid #b2ebf2;
    opacity: 0.8;
}

/* --- 16. WELKOM & POPCORN (!welkom, !popcorn) --- */
#rd-rich-chat .irc-welcome{
    background: #ffeb3b;
    color: #000;
    border: 2px solid #000;
    box-shadow: 3px 3px 0 #000; /* Stripboek effect */
    transform: skew(-10deg);
}
#rd-rich-chat .irc-popcorn{
    background: repeating-linear-gradient(45deg, #fff, #fff 5px, #ff0000 5px, #ff0000 10px);
    color: #000;
    text-shadow: 1px 1px 0 #fff;
    border: 1px solid #000;
}

/* --- 17. STATUS (!brb, !slaap, !lurker, !buiging) --- */
/* Rustig grijs/blauw */
#rd-rich-chat .irc-status, #rd-rich-chat .irc-night{
    background: #eceff1;
    color: #455a64;
    font-style: italic;
    border: 1px solid #cfd8dc;
    font-weight: 600; /* Minder dik dan de rest */
}
#rd-rich-chat .irc-night{
    background: #283593;
    color: #fff;
    border: none;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}

/* --- INTERFACE KNOPJES (Delete, Reply, etc) --- */
#rd-rich-chat .delete-btn, #rd-rich-chat .reply-btn, #rd-rich-chat .reaction-hint{
    font-size: 11px !important;  /* Forceer klein formaat */
    width: auto !important;      /* Voorkom uitrekken */
    height: auto !important;
    line-height: 1 !important;
    display: inline-block;
    margin-left: 6px;            /* Afstand tussen icoontjes */
    opacity: 0.6;
    cursor: pointer;
    color: #9ca3af;              /* Lichtgrijs (standaard) */
    transition: all 0.2s ease;
}

/* Zorg dat het icoontje IN de span ook klein is */
#rd-rich-chat .delete-btn i, #rd-rich-chat .reply-btn i, #rd-rich-chat .reaction-hint i{
    font-size: 11px !important;
}

/* Hover Effecten */
#rd-rich-chat .delete-btn:hover, #rd-rich-chat .reply-btn:hover, #rd-rich-chat .reaction-hint:hover{
    opacity: 1;
    transform: scale(1.2);       /* Iets groter bij muis erover */
}

/* Specifieke kleuren bij hover */
#rd-rich-chat .delete-btn:hover{ color: #dc3545 !important; } /* Rood */
#rd-rich-chat .reply-btn:hover{ color: #1877F2 !important; }   /* Blauw */
#rd-rich-chat .reaction-hint:hover{ color: #eab308 !important; } /* Goud */

#rd-rich-chat .irc-neon{
    background: #000;
    color: #0f0;
    border: 1px solid #0f0;
    box-shadow: 0 0 5px #0f0, inset 0 0 5px #0f0;
    text-shadow: 0 0 8px #0f0;
    animation: neonPulseGreen 2s infinite ease-in-out;
}
@keyframes neonPulseGreen{
    0%, 100%{ box-shadow: 0 0 5px #0f0, inset 0 0 2px #0f0; }
    50%{ box-shadow: 0 0 15px #0f0, inset 0 0 8px #0f0; }
}
#rd-rich-chat .irc-neon1{
    background: #000;
    color: #ff00ff;
    border: 1px solid #ff00ff;
    box-shadow: 0 0 10px #ff00ff;
    text-shadow: 0 0 10px #ff00ff;
    animation: neonFlicker 3s infinite;
}
@keyframes neonFlicker{
    0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100%{ opacity: 1; }
    20%, 21.999%, 63%, 63.999%, 65%, 69.999%{ opacity: 0.4; text-shadow: none; box-shadow: none; }
}
/* --- 5. NEON BATTERY (!batterij, !match, !topper) --- */
#rd-rich-chat .irc-neon2{
    background: #000;
    color: #00e5ff;
    border: 1px solid #00e5ff;
    position: relative;
    overflow: hidden;
    /* De achtergrond krijgt 'segmenten' zoals een batterij meter */
    background-image: repeating-linear-gradient(
        90deg,
        rgba(0, 229, 255, 0.1) 0px,
        rgba(0, 229, 255, 0.1) 8px,
        transparent 8px,
        transparent 12px
    );
    box-shadow: 0 0 5px #00e5ff, inset 0 0 5px #00e5ff;
    text-shadow: 0 0 5px #00e5ff;
    z-index: 1;
}

/* De 'Charging' Glow die door de batterij stroomt */
#rd-rich-chat .irc-neon2::before{
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg, 
        transparent, 
        rgba(0, 229, 255, 0.4), 
        rgba(255, 255, 255, 0.8), 
        rgba(0, 229, 255, 0.4), 
        transparent
    );
    z-index: -1;
    animation: batteryCharge 3s infinite linear;
}

/* De 'Batterij Kop' - het kleine uitsteeksel aan de zijkant */
#rd-rich-chat .irc-neon2::after{
    content: "";
    position: absolute;
    right: 0;
    top: 25%;
    width: 3px;
    height: 50%;
    background: #00e5ff;
    box-shadow: 0 0 5px #00e5ff;
    border-radius: 0 2px 2px 0;
}

/* De oplaad-animatie */
@keyframes batteryCharge{
    0%{ left: -100%; }
    50%{ left: 0%; }
    100%{ left: 100%; }
}

/* Extra effect: Laten trillen als hij 'bijna vol' is */
#rd-rich-chat .irc-neon2:hover{
    animation: batteryVibrate 0.1s infinite;
}

@keyframes batteryVibrate{
    0%{ transform: translate(0px, 0px); }
    50%{ transform: translate(1px, 0.5px); }
    100%{ transform: translate(-1px, -0.5px); }
}
/* ==========================================================================
   MEDIA UPLOADS / DROPZONE / USERLIST EXTRAS
   ========================================================================== */
#rd-rich-chat .drop-zone{
    margin-top: 10px;
    padding: 14px;
    border: 2px dashed rgba(121, 159, 203, 0.8);
    border-radius: 12px;
    text-align: center;
    font-size: 13px;
    background: rgba(121, 159, 203, 0.08);
    color: #334155;
}
#rd-rich-chat .drop-zone.active{
    background: rgba(121, 159, 203, 0.16);
    border-color: var(--primary-dark);
}

#rd-rich-chat .chat-image, #rd-rich-chat .chat-video{
    width: 132px;
    height: 132px;
    max-width: 132px;
    max-height: 132px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
    cursor: pointer;
    background: #000;
}


#rd-rich-chat .media-thumb{
    position: relative;
    border: 0;
    padding: 0;
    background: transparent;
    display: inline-flex;
    width: auto;
    max-width: 132px;
    cursor: pointer;
}
#rd-rich-chat .media-thumb img, #rd-rich-chat .media-thumb video{
    transition: transform .18s ease, box-shadow .18s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
#rd-rich-chat .media-thumb:hover img, #rd-rich-chat .media-thumb:hover video{
    transform: translateY(-1px) scale(1.01);
}
#rd-rich-chat .media-zoom-badge{
    position: absolute;
    right: 6px;
    bottom: 6px;
    background: rgba(15, 23, 42, 0.72);
    color: #fff;
    font-size: 10px;
    padding: 4px 7px;
    border-radius: 999px;
    backdrop-filter: blur(4px);
    pointer-events: none;
}
#rd-rich-chat .video-thumb{
    width: auto;
    max-width: 132px;
}
#rd-rich-chat .media-play-badge{
    position: absolute;
    left: 6px;
    top: 6px;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.72);
    color: #fff;
    font-size: 14px;
    box-shadow: 0 8px 20px rgba(0,0,0,.2);
    pointer-events: none;
}
#rd-rich-chat .file-actions{
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}
#rd-rich-chat .media-modal-content{
    max-width: min(980px, 92vw);
    width: 100%;
    background: #0f172a;
    color: #fff;
}
#rd-rich-chat .media-modal-content .modal-header{
    border-bottom-color: rgba(255,255,255,0.1);
}
#rd-rich-chat .media-modal-body{
    min-height: 240px;
    padding: 18px;
    background: radial-gradient(circle at top, rgba(51,65,85,0.45), rgba(2,6,23,0.96));
}
#rd-rich-chat .media-modal-body img, #rd-rich-chat .media-modal-body video{
    max-width: 100%;
    max-height: 78vh;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0,0,0,.45);
}

#rd-rich-chat .media-card{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
}
#rd-rich-chat .msg-row.other .media-card{
    background: rgba(17,24,39,0.04);
    border-color: rgba(17,24,39,0.08);
}
#rd-rich-chat .file-icon{
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background: rgba(0,0,0,0.12);
}
#rd-rich-chat .file-meta{
    display: flex;
    flex-direction: column;
    min-width: 0;
}
#rd-rich-chat .file-name{
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#rd-rich-chat .file-sub{
    font-size: 12px;
    opacity: 0.75;
}
#rd-rich-chat .file-actions a{
    text-decoration: none;
    font-size: 12px;
    padding: 7px 10px;
    border-radius: 8px;
    background: rgba(0,0,0,0.12);
    color: inherit;
}
#rd-rich-chat .reply-media-label{
    font-size: 12px;
    opacity: 0.8;
}
#rd-rich-chat .reply-image-thumb, #rd-rich-chat .reply-video-thumb, #rd-rich-chat .reply-gif-thumb{
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}
#rd-rich-chat .media-modal-content{
    max-width: 80vw;
}
#rd-rich-chat .media-modal-body{
    display: flex;
    justify-content: center;
    align-items: center;
}
#rd-rich-chat .media-modal-body img, #rd-rich-chat .media-modal-body video{
    max-width: 100%;
    max-height: 75vh;
    border-radius: 14px;
}

#rd-rich-chat .user-sidebar-tools{
    padding: 12px;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
#rd-rich-chat .sidebar-search{
    height: 38px;
}
#rd-rich-chat .user-filter-row{
    display: flex;
    gap: 8px;
}
#rd-rich-chat .user-filter-btn{
    flex: 1;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 999px;
    padding: 7px 10px;
    cursor: pointer;
    font-size: 12px;
}
#rd-rich-chat .user-filter-btn.active{
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
#rd-rich-chat .online-stats{
    font-size: 12px;
    color: #64748b;
}
#rd-rich-chat .user-item{
    position: relative;
}
#rd-rich-chat .user-item.typing .user-name::after{
    content: " • typt";
    color: #10b981;
    font-size: 11px;
}
#rd-rich-chat .user-meta-tags{
    display: flex;
    gap: 6px;
    margin-top: 4px;
    flex-wrap: wrap;
}
#rd-rich-chat .mini-tag{
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(0,0,0,0.06);
}
#rd-rich-chat .mini-tag.self{ background: rgba(16, 185, 129, 0.16); color: #047857; }
#rd-rich-chat .mini-tag.typing{ background: rgba(59, 130, 246, 0.16); color: #1d4ed8; }

#rd-rich-chat .uploading-indicator{
    margin-top: 8px;
    font-size: 12px;
    color: #334155;
}

@media (max-width: 640px){
    #rd-rich-chat .media-modal-content{
        max-width: calc(100vw - 20px);
    }
    #rd-rich-chat .chat-image, #rd-rich-chat .chat-video{
        max-width: 240px;
    }
}

/* ========================================================================== 
   TMF / Radio-Digitaal compacte chatbox layout update
   ========================================================================== */
#rd-rich-chat{
    --tmf-bg-page: #071225;
    --tmf-panel: #0b1118;
    --tmf-panel-2: #101827;
    --tmf-border: rgba(255,255,255,.18);
    --tmf-border-soft: rgba(255,255,255,.09);
    --tmf-text: #ffffff;
    --tmf-muted: #9eb0c9;
    --tmf-purple: #a36bff;
    --tmf-blue: #63c4f0;
    --tmf-button: #222831;
}

#rd-rich-chat, #rd-rich-chat{
    background: radial-gradient(circle at 30% 0%, #182644 0%, var(--tmf-bg-page) 50%, #050b16 100%) !important;
    color: var(--tmf-text);
    font-family: "Inter", Arial, sans-serif;
}

#rd-rich-chat .chat-header{
    height: 112px;
    padding: 20px;
    background: linear-gradient(180deg, #172133 0%, #121926 100%);
    border: 1px solid var(--tmf-border);
    border-bottom: 1px solid rgba(255,255,255,.28);
    box-shadow: none;
    margin: 8px 10px 0;
    border-radius: 7px 7px 0 0;
}

#rd-rich-chat .station-name{
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: clamp(34px, 4vw, 54px);
    letter-spacing: 1px;
    line-height: 1;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 3px 0 0 #0b1322, 5px 0 0 rgba(255,153,0,.45);
}

#rd-rich-chat .online-pill, #rd-rich-chat .icon-btn{
    background: #08101e;
    color: #fff;
    border: 0;
    border-radius: 6px;
    padding: 10px 13px;
    min-width: 88px;
    font-weight: 900;
    font-size: 18px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    cursor: pointer;
}

#rd-rich-chat .app-layout{
    height: calc(100% - 121px);
    margin: 0 10px 8px;
    min-width: 760px;
    border: 1px solid var(--tmf-border);
    border-top: 0;
    background: var(--tmf-panel);
}

#rd-rich-chat .chat-area{
    background: var(--tmf-panel) !important;
    background-image: none !important;
    border-right: 1px solid var(--tmf-border);
    padding: 8px 8px 0 8px;
}

#rd-rich-chat .messages-container{
    padding: 0 4px 12px 10px;
    gap: 0;
    background: #080d14;
    border: 1px solid var(--tmf-border-soft);
    border-radius: 5px;
}

#rd-rich-chat .msg-row, #rd-rich-chat .msg-row.own, #rd-rich-chat .msg-row.other{
    width: 100%;
    max-width: 100%;
    align-self: stretch;
    align-items: stretch;
    margin: 0;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,.055);
    animation: none;
}

#rd-rich-chat .msg-name, #rd-rich-chat .msg-row.own .msg-name{
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 2px 0;
    min-height: 22px;
    color: #fff;
    font-size: 20px;
    font-weight: 900;
}

#rd-rich-chat .msg-name span, #rd-rich-chat .msg-name .msg-author-name{
    color: var(--tmf-purple) !important;
    font-size: 20px !important;
    font-weight: 900;
    line-height: 1.1;
}

#rd-rich-chat .msg-time{
    color: var(--tmf-muted) !important;
    font-size: 18px !important;
    font-weight: 500;
    margin-left: 1px;
}

#rd-rich-chat .msg-role-icon{
    width: 29px;
    height: 29px;
    min-width: 29px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #353b42, #171c22);
    font-size: 19px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(0,0,0,.45);
}

#rd-rich-chat .msg-bubble, #rd-rich-chat .msg-row.own .msg-bubble, #rd-rich-chat .msg-row.other .msg-bubble, #rd-rich-chat .msg-row.dj .msg-bubble, #rd-rich-chat .msg-row.own.dj .msg-bubble{
    background: transparent;
    color: #fff;
    border: 0;
    border-radius: 0;
    padding: 0 8px 0 41px;
    min-width: 0;
    box-shadow: none;
    display: block;
}

#rd-rich-chat .bubble-content{
    color: #fff;
    font-size: 18px;
    line-height: 1.35;
}

#rd-rich-chat .bubble-content > span:not(.irc-cmd), #rd-rich-chat .bubble-content span:not(.irc-cmd){
    color: inherit;
    font-size: 18px !important;
    line-height: 1.35;
}

#rd-rich-chat .irc-cmd{
    display: block !important;
    width: min(100%, 1010px);
    padding: 12px 18px !important;
    margin: 2px 0 0 0;
    border-radius: 18px !important;
    font-size: 19px !important;
    line-height: 1.25 !important;
    text-transform: none !important;
}

#rd-rich-chat .chat-gif, #rd-rich-chat .chat-image{
    max-width: 180px;
    max-height: 120px;
    border-radius: 4px;
    object-fit: cover;
}

#rd-rich-chat .media-thumb-small{
    max-width: 190px;
}

#rd-rich-chat .message-actions{
    opacity: 0;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
}
#rd-rich-chat .msg-row:hover .message-actions{
    opacity: 1;
    height: auto;
    margin-top: 5px;
}

#rd-rich-chat .input-area{
    background: #080d14 !important;
    background-image: none !important;
    border: 1px solid var(--tmf-border-soft);
    border-radius: 5px;
    margin-top: 7px;
    margin-bottom: 7px;
}

#rd-rich-chat #chat-form{
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 8px;
}

#rd-rich-chat .chat-tools-row{
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 48px;
}

#rd-rich-chat .chat-input-row{
    display: grid;
    grid-template-columns: 1fr 118px;
    gap: 5px;
}

#rd-rich-chat .tool-btn, #rd-rich-chat .toolbar button, #rd-rich-chat .color-tool{
    height: 48px;
    min-width: 48px;
    padding: 0 12px;
    background: linear-gradient(180deg, #30343b, #1f2329) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 11px !important;
    font-size: 18px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 2px rgba(0,0,0,.45);
}

#rd-rich-chat .command-btn{
    min-width: 172px;
    font-size: 16px !important;
}

#rd-rich-chat .format-btn{
    font-size: 18px !important;
    min-width: 48px;
}

#rd-rich-chat .color-tool{
    position: relative;
    overflow: hidden;
    gap: 5px;
}
#rd-rich-chat .color-tool input[type="color"]{
    width: 30px;
    height: 34px;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

#rd-rich-chat #chat-input{
    height: 66px;
    border: 2px solid #1f91ff;
    border-radius: 6px;
    background: #1e242a;
    color: #fff;
    font-size: 20px;
    padding: 0 18px;
    box-shadow: 0 0 0 2px rgba(0,0,0,.65) inset;
}
#rd-rich-chat #chat-input::placeholder{ color: #b7bcc7; }

#rd-rich-chat #btn-send{
    width: auto;
    height: 63px;
    border-radius: 6px;
    background: #73b9dc;
    color: #00101d;
    font-size: 18px;
    font-weight: 900;
}

#rd-rich-chat .user-sidebar{
    width: 266px;
    background: #101827 !important;
    background-image: none !important;
    border-left: 0;
    padding: 14px 10px;
}

#rd-rich-chat .sidebar-header{
    display: none;
}
#rd-rich-chat .user-sidebar-tools{
    display: none;
}

#rd-rich-chat .tmf-user-section{
    border-top: 1px solid rgba(255,255,255,.15);
    margin-bottom: 14px;
    padding-top: 9px;
}

#rd-rich-chat .tmf-section-title{
    color: #9fb4d1;
    font-size: 16px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .6px;
    margin: 0 0 7px 5px;
}

#rd-rich-chat .grouped-user-list{
    flex: 0 0 auto;
    overflow: visible;
    padding: 0;
    margin: 0;
}

#rd-rich-chat .chatters-section{
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
#rd-rich-chat .chatters-section .grouped-user-list{
    overflow-y: auto;
    flex: 1 1 auto;
}

#rd-rich-chat .user-item{
    min-height: 38px;
    padding: 6px 4px;
    gap: 8px;
    border-bottom: 1px solid rgba(255,255,255,.035);
    background: rgba(0,0,0,.06);
}
#rd-rich-chat .user-item:hover{
    background: rgba(255,255,255,.06);
}

#rd-rich-chat .user-avatar{
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 5px;
    font-size: 16px;
    border: 0 !important;
    background: linear-gradient(180deg, #343a40, #171b20);
    color: #fff;
}
#rd-rich-chat .sidebar-pfp{
    border-radius: 5px;
}

#rd-rich-chat .user-name{
    font-size: 20px;
    line-height: 1.05;
    color: #fff;
    font-weight: 900;
}
#rd-rich-chat .user-item.is-vip .user-name, #rd-rich-chat .user-item.is-dj .user-name{
    color: var(--tmf-purple);
}

#rd-rich-chat .user-right-badges, #rd-rich-chat .user-meta-tags, #rd-rich-chat .status-tag{
    display: none !important;
}

@media (max-width: 900px){
    #rd-rich-chat .app-layout{ min-width: 0; }
    #rd-rich-chat .station-name{ font-size: 34px; }
    #rd-rich-chat .user-sidebar{ width: 230px; }
    #rd-rich-chat .command-btn{ min-width: 132px; font-size: 14px !important; }
    #rd-rich-chat .chat-tools-row{ flex-wrap: wrap; }
    #rd-rich-chat .chat-input-row{ grid-template-columns: 1fr 96px; }
}

/* ========================================================================== 
   Ronny update 2026-05-09: echte compacte IRC/TMF layout + chatconfig kleuren
   ========================================================================== */
#rd-rich-chat, #rd-rich-chat{
    background-color: var(--cfg-page-background) !important;
    background-image: var(--cfg-body-image) !important;
    background-size: var(--cfg-background-size) !important;
    background-position: var(--cfg-background-position) !important;
    color: var(--cfg-page-text) !important;
    overflow: hidden;
}
#rd-rich-chat .chat-header{
    display: none !important;
}
#rd-rich-chat .app-layout{
    height: 100vh !important;
    margin: 0 !important;
    border: 1px solid var(--cfg-app-border) !important;
    border-radius: 0 !important;
    background: var(--cfg-app-background) !important;
    min-width: 720px;
}
#rd-rich-chat .chat-area{
    background: var(--cfg-app-background) !important;
    border-right: 1px solid var(--cfg-panel-border) !important;
    padding: 6px !important;
}
#rd-rich-chat .chat-tabs-bar{
    display: flex;
    align-items: flex-end;
    gap: 4px;
    min-height: 34px;
    padding: 0 4px 5px 4px;
    border-bottom: 1px solid var(--cfg-tabs-bar-border);
    background: var(--cfg-tabs-bar-background);
}
#rd-rich-chat .chat-tab{
    height: 28px;
    max-width: 180px;
    padding: 0 9px;
    border: 1px solid var(--cfg-tab-border);
    border-bottom-color: var(--cfg-tab-border);
    border-radius: 6px 6px 0 0;
    background: var(--cfg-tab-background);
    color: var(--cfg-tab-text);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
#rd-rich-chat .chat-tab.active{
    color: var(--cfg-tab-active-text);
    background: var(--cfg-tab-active-background);
    border-color: var(--cfg-tab-active-border);
}
#rd-rich-chat .chat-tab .close-tab{
    width: 16px;
    height: 16px;
    border: 0;
    border-radius: 50%;
    background: var(--cfg-tab-close-background);
    color: var(--cfg-tab-close-text);
    font-size: 11px;
    line-height: 16px;
    cursor: pointer;
}
#rd-rich-chat .chat-tab.fixed .close-tab{ display: none; }
#rd-rich-chat .chat-tab.blink{
    animation: privateTabBlink .8s infinite alternate;
}
@keyframes privateTabBlink{
    from{ box-shadow: 0 0 0 rgba(0,0,0,0); color: #fff; }
    to{ box-shadow: 0 0 14px var(--cfg-private-blink); color: var(--cfg-private-blink); }
}
#rd-rich-chat .messages-container, #rd-rich-chat .private-messages-container{
    padding: 6px 8px !important;
    gap: 0 !important;
    background-color: var(--cfg-input-area-background) !important;
    background-image: var(--cfg-input-image) !important;
    background-size: var(--cfg-background-size) !important;
    background-position: var(--cfg-background-position) !important;
    border: 1px solid var(--cfg-input-area-border) !important;
    border-radius: 4px !important;
    font-family: Verdana, Arial, sans-serif !important;
}
#rd-rich-chat .private-messages-container.hidden, #rd-rich-chat #chat-window.hidden{ display: none !important; }
#rd-rich-chat .msg-row, #rd-rich-chat .msg-row.own, #rd-rich-chat .msg-row.other{
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
    align-items: stretch !important;
    margin: 0 !important;
    padding: 2px 0 !important;
    border-bottom: 1px solid var(--cfg-message-row-border) !important;
}
#rd-rich-chat .msg-name, #rd-rich-chat .msg-row.own .msg-name{
    display: inline-flex !important;
    min-height: 16px !important;
    gap: 5px !important;
    margin: 0 !important;
    font-family: Verdana, Arial, sans-serif !important;
    font-size: 12px !important;
    line-height: 16px !important;
}
#rd-rich-chat .msg-name span, #rd-rich-chat .msg-name .msg-author-name{
    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: 800 !important;
    color: var(--cfg-message-name) !important;
}
#rd-rich-chat .msg-time{
    font-size: 11px !important;
    line-height: 16px !important;
    color: var(--cfg-message-time) !important;
    font-weight: 400 !important;
}
#rd-rich-chat .msg-role-icon{
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    background: var(--cfg-message-icon-background) !important;
    color: var(--cfg-message-icon-text) !important;
}
#rd-rich-chat .msg-bubble, #rd-rich-chat .msg-row.own .msg-bubble, #rd-rich-chat .msg-row.other .msg-bubble, #rd-rich-chat .msg-row.dj .msg-bubble, #rd-rich-chat .msg-row.own.dj .msg-bubble{
    padding: 0 4px 0 23px !important;
    background: transparent !important;
    color: var(--cfg-message-text) !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    min-width: 0 !important;
}
#rd-rich-chat .bubble-content, #rd-rich-chat .bubble-content > span:not(.irc-cmd), #rd-rich-chat .bubble-content span:not(.irc-cmd), #rd-rich-chat .msg-bubble span:not(.irc-cmd){
    color: inherit;
    font-family: Verdana, Arial, sans-serif !important;
    font-size: 12px !important;
    line-height: 17px !important;
}
#rd-rich-chat .irc-cmd{
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;
    padding: 4px 9px !important;
    margin: 2px 0 !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    line-height: 16px !important;
    text-transform: none !important;
}
#rd-rich-chat .chat-gif, #rd-rich-chat .chat-image, #rd-rich-chat .chat-video{
    max-width: 150px !important;
    max-height: 95px !important;
    object-fit: cover;
}
#rd-rich-chat .input-area{
    background-color: var(--cfg-input-area-background) !important;
    background-image: var(--cfg-input-image) !important;
    background-size: var(--cfg-background-size) !important;
    background-position: var(--cfg-background-position) !important;
    border: 1px solid var(--cfg-input-area-border) !important;
    border-radius: 4px !important;
    margin-top: 6px !important;
    margin-bottom: 0 !important;
}
#rd-rich-chat #chat-form{
    gap: 5px !important;
    padding: 6px !important;
}
#rd-rich-chat .chat-tools-row{
    min-height: 32px !important;
    gap: 5px !important;
    flex-wrap: wrap;
}
#rd-rich-chat .tool-btn, #rd-rich-chat .toolbar button, #rd-rich-chat .color-tool{
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 9px !important;
    border-radius: 7px !important;
    font-size: 13px !important;
    background: var(--cfg-button-background) !important;
}
#rd-rich-chat .command-btn{ min-width: 124px !important; font-size: 12px !important; }
#rd-rich-chat .color-tool input[type="color"]{ width: 22px !important; height: 24px !important; }
#rd-rich-chat .chat-input-row{
    grid-template-columns: 1fr 94px !important;
    gap: 5px !important;
}
#rd-rich-chat #chat-input{
    height: 43px !important;
    font-size: 14px !important;
    padding: 0 12px !important;
    border-color: var(--cfg-input-border) !important;
}
#rd-rich-chat #btn-send{
    height: 43px !important;
    font-size: 14px !important;
    border-radius: 6px !important;
    background: var(--cfg-send-button-background) !important;
    color: var(--cfg-send-button-text) !important;
}
#rd-rich-chat .drop-zone{
    font-size: 12px !important;
    padding: 12px !important;
}
#rd-rich-chat .user-sidebar{
    width: 250px !important;
    background-color: var(--cfg-sidebar-background) !important;
    background-image: var(--cfg-sidebar-image) !important;
    background-size: var(--cfg-background-size) !important;
    background-position: var(--cfg-background-position) !important;
    padding: 8px 9px !important;
}
#rd-rich-chat .user-sidebar-tools{
    display: flex !important;
    padding: 0 6px 8px !important;
    border-bottom: 1px solid var(--cfg-sidebar-border) !important;
}
#rd-rich-chat .online-stats{
    color: var(--cfg-online-stats-text) !important;
    font-size: 12px !important;
    font-weight: 800;
}
#rd-rich-chat .tmf-user-section{
    margin-bottom: 9px !important;
    padding-top: 7px !important;
}
#rd-rich-chat .tmf-user-section.hidden-section{ display: none !important; }
#rd-rich-chat .tmf-section-title{
    font-size: 13px !important;
    line-height: 17px !important;
    color: var(--cfg-sidebar-title-text) !important;
    margin-bottom: 5px !important;
}
#rd-rich-chat .user-item{
    min-height: 26px !important;
    padding: 3px 4px !important;
    gap: 7px !important;
}
#rd-rich-chat .user-avatar{
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    border-radius: 5px !important;
    font-size: 13px !important;
}
#rd-rich-chat .sidebar-pfp{ border-radius: 5px !important; }
#rd-rich-chat .user-name{
    font-size: 13px !important;
    line-height: 17px !important;
    color: var(--cfg-chatters-text) !important;
}
#rd-rich-chat .user-item.is-dj .user-name{ color: var(--cfg-admin-dj-text) !important; }
#rd-rich-chat .user-item.is-vip .user-name{ color: var(--cfg-vip-text) !important; }
#rd-rich-chat .context-menu{
    background: var(--cfg-context-background) !important;
    border-color: rgba(255,255,255,.18) !important;
    color: var(--cfg-context-text) !important;
    width: 175px !important;
}
#rd-rich-chat .context-menu .menu-header{ background: var(--cfg-context-header-background) !important; color: var(--cfg-muted-text) !important; }
#rd-rich-chat .context-menu li{ font-size: 13px !important; }
#rd-rich-chat .context-menu li:hover{ background: var(--cfg-context-hover-background) !important; }
#rd-rich-chat .login-modal-content{
    background: #101827 !important;
    color: #fff !important;
    border: 1px solid var(--cfg-tab-border);
}
#rd-rich-chat .login-tabs{ display: flex; gap: 6px; margin-bottom: 12px; }
#rd-rich-chat .login-tab{
    flex: 1;
    height: 34px;
    border: 1px solid rgba(255,255,255,.15);
    background: #0b1220;
    color: var(--cfg-tab-text);
    border-radius: 7px;
    font-weight: 800;
    cursor: pointer;
}
#rd-rich-chat .login-tab.active{ color: var(--cfg-tab-active-text); border-color: var(--cfg-tab-active-border); }
#rd-rich-chat .login-pane{ display: none; flex-direction: column; gap: 8px; }
#rd-rich-chat .login-pane.active{ display: flex; }
#rd-rich-chat .login-submit-btn{
    height: 38px;
    border: 0;
    border-radius: 7px;
    background: var(--cfg-send-button-background);
    color: var(--cfg-send-button-text);
    color: var(--cfg-send-button-text);
    font-weight: 900;
    cursor: pointer;
}
#rd-rich-chat .login-error{ min-height: 18px; margin-top: 10px; color: #ff8799; font-size: 12px; }
#rd-rich-chat .private-line{
    padding: 3px 2px;
    border-bottom: 1px solid rgba(255,255,255,.05);
    font-size: 12px;
    line-height: 17px;
    font-family: Verdana, Arial, sans-serif;
}
#rd-rich-chat .private-line .pm-name{ color: var(--cfg-message-name); font-weight: 800; }
#rd-rich-chat .private-line .pm-time{ color: var(--cfg-time-text); font-size: 11px; margin-left: 4px; }
#rd-rich-chat .private-empty{ color: var(--cfg-tab-text); font-size: 12px; padding: 10px; }
@media (max-width: 900px){
    #rd-rich-chat .app-layout{ min-width: 0 !important; }
    #rd-rich-chat .user-sidebar{ width: 220px !important; }
    #rd-rich-chat .chat-input-row{ grid-template-columns: 1fr 84px !important; }
}


/* Extra: alle zichtbare chatbox onderdelen pakken hun kleur nu uit chatconfig.php */
#rd-rich-chat .messages-container::-webkit-scrollbar-thumb{ background: var(--cfg-messages-scrollbar) !important; }
#rd-rich-chat .private-messages-container::-webkit-scrollbar-thumb{ background: var(--cfg-messages-scrollbar) !important; }
#rd-rich-chat .message-actions .action-icon{ color: var(--cfg-message-action-icon) !important; }
#rd-rich-chat .drop-zone{
    background: var(--cfg-dropzone-background) !important;
    border-color: var(--cfg-dropzone-border) !important;
    color: var(--cfg-dropzone-text) !important;
}
#rd-rich-chat .tmf-user-section{ border-top-color: var(--cfg-sidebar-section-border) !important; }
#rd-rich-chat .modal{ background: var(--cfg-modal-overlay) !important; }
#rd-rich-chat .modal-content{
    background: var(--cfg-modal-background) !important;
    color: var(--cfg-modal-text) !important;
    border: 1px solid var(--cfg-modal-border) !important;
}
#rd-rich-chat .btn-danger{ background: var(--cfg-danger) !important; }
#rd-rich-chat .reply-quote{
    border-left-color: var(--cfg-accent) !important;
    color: var(--cfg-message-text) !important;
}
#rd-rich-chat .reply-quote strong, #rd-rich-chat .reply-quote span{ color: var(--cfg-muted-text) !important; }
#rd-rich-chat #reply-preview-bar{
    background: var(--cfg-input-area-background) !important;
    color: var(--cfg-input-text) !important;
    border-top-color: var(--cfg-accent) !important;
}
#rd-rich-chat #reply-text-preview{ color: var(--cfg-muted-text) !important; }

/* Ronny color-control fix: deze regels staan expres helemaal onderaan zodat chatconfig.php alles wint. */
#rd-rich-chat .chat-area{
    background-color: var(--cfg-chat-area-background) !important;
    background-image: var(--cfg-chat-image) !important;
    background-size: var(--cfg-background-size) !important;
    background-position: var(--cfg-background-position) !important;
    border-right-color: var(--cfg-chat-area-border) !important;
}
#rd-rich-chat .messages-container, #rd-rich-chat .private-messages-container{
    background-color: var(--cfg-messages-background) !important;
    background-image: var(--cfg-chat-image) !important;
    background-size: var(--cfg-background-size) !important;
    background-position: var(--cfg-background-position) !important;
    border-color: var(--cfg-messages-border) !important;
}
#rd-rich-chat .input-area{
    background-color: var(--cfg-input-area-background) !important;
    background-image: var(--cfg-input-image) !important;
    background-size: var(--cfg-background-size) !important;
    background-position: var(--cfg-background-position) !important;
    border-color: var(--cfg-input-area-border) !important;
}
#rd-rich-chat .tool-btn, #rd-rich-chat .toolbar button, #rd-rich-chat .color-tool{
    color: var(--cfg-button-text) !important;
    border-color: var(--cfg-button-border) !important;
}
#rd-rich-chat #chat-input, #rd-rich-chat .full-input{
    background: var(--cfg-input-background) !important;
    color: var(--cfg-input-text) !important;
    border-color: var(--cfg-input-border) !important;
}
#rd-rich-chat #chat-input:focus, #rd-rich-chat .full-input:focus{
    border-color: var(--cfg-input-focus-border) !important;
}
#rd-rich-chat #chat-input::placeholder, #rd-rich-chat .full-input::placeholder{
    color: var(--cfg-input-placeholder) !important;
}
#rd-rich-chat .context-menu{ border-color: var(--cfg-modal-border) !important; }
#rd-rich-chat .login-modal-content, #rd-rich-chat .login-tab, #rd-rich-chat .login-pane .full-input{
    background: var(--cfg-modal-background) !important;
    color: var(--cfg-modal-text) !important;
    border-color: var(--cfg-modal-border) !important;
}
#rd-rich-chat .login-tab{ background: var(--cfg-context-header-background) !important; color: var(--cfg-muted-text) !important; }
#rd-rich-chat .login-tab.active{ background: var(--cfg-tab-active-background) !important; color: var(--cfg-tab-active-text) !important; }
#rd-rich-chat .private-line{ border-bottom-color: var(--cfg-message-row-border) !important; color: var(--cfg-message-text) !important; }
#rd-rich-chat .private-line .pm-time{ color: var(--cfg-message-time) !important; }

/* Ronny update: compacte opties-toggle, dropzone onder opties en compactere commando popup */
#rd-rich-chat .chat-tools-head{
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
}
#rd-rich-chat .tools-toggle{
    height: 26px !important;
    min-width: 92px !important;
    padding: 0 10px !important;
    border-radius: 6px !important;
    border: 1px solid var(--cfg-button-border) !important;
    background: var(--cfg-button-background) !important;
    color: var(--cfg-button-text) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}
#rd-rich-chat .chat-tools-row{
    overflow: hidden !important;
    transition: max-height .18s ease, opacity .18s ease, margin .18s ease !important;
    max-height: 86px !important;
}
#rd-rich-chat .chat-tools-row.collapsed{
    max-height: 0 !important;
    min-height: 0 !important;
    opacity: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
}
#rd-rich-chat #drop-zone{
    margin: 0 6px 2px 6px !important;
    min-height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-style: dashed !important;
    border-width: 2px !important;
    border-radius: 9px !important;
}
#rd-rich-chat #drop-zone.hidden{
    display: none !important;
}
#rd-rich-chat .help-modal-content{
    width: min(620px, calc(100vw - 30px)) !important;
    max-width: 620px !important;
    max-height: 72vh !important;
    display: flex !important;
    flex-direction: column !important;
}
#rd-rich-chat .help-modal-content .modal-header{
    padding: 8px 10px !important;
}
#rd-rich-chat .help-modal-content .modal-header h3{
    font-size: 15px !important;
    margin: 0 !important;
}
#rd-rich-chat .help-modal-body{
    overflow-y: auto !important;
    flex: 1 !important;
    padding: 8px 10px !important;
}
#rd-rich-chat .help-hint{
    font-size: 11px !important;
    line-height: 15px !important;
    color: var(--cfg-muted-text) !important;
    margin: 0 0 7px 0 !important;
}
#rd-rich-chat .help-list-grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
}
#rd-rich-chat .help-item{
    min-height: 30px !important;
    padding: 5px 7px !important;
    border-radius: 7px !important;
    border: 1px solid var(--cfg-modal-border) !important;
    background: rgba(0,142,232,.06) !important;
    cursor: pointer !important;
}
#rd-rich-chat .help-item:hover{
    background: rgba(0,142,232,.14) !important;
}
#rd-rich-chat .help-key{
    min-width: 72px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    color: var(--cfg-accent) !important;
}
#rd-rich-chat .help-preview, #rd-rich-chat .help-preview *{
    font-size: 11px !important;
    line-height: 14px !important;
}
@media (max-width: 700px){
    #rd-rich-chat .help-list-grid{ grid-template-columns: 1fr !important; }
}

/* Ronny fix 2026-05-09: gast uitloggen rechts in de tabbar */
#rd-rich-chat .chat-tabs-bar{
    align-items: center !important;
}
#rd-rich-chat .guest-logout-btn{
    margin-left: auto;
    height: 26px;
    padding: 0 10px;
    border: 1px solid var(--cfg-button-border);
    border-radius: 6px;
    background: var(--cfg-button-background);
    color: var(--cfg-button-text);
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}
#rd-rich-chat .guest-logout-btn:hover{
    filter: brightness(1.05);
}
#rd-rich-chat .guest-logout-btn:disabled{
    opacity: .6;
    cursor: wait;
}

/* ==========================================================
   Stabiliteit update: GIF/media mogen de chat niet laten springen
   ========================================================== */
#rd-rich-chat .messages-container, #rd-rich-chat .private-messages-container{
    overflow-anchor: none !important;
    contain: layout paint !important;
}
#rd-rich-chat .msg-row{
    overflow-anchor: none !important;
}
#rd-rich-chat .chat-gif{
    width: 150px !important;
    height: 95px !important;
    max-width: 150px !important;
    max-height: 95px !important;
    object-fit: contain !important;
    display: block !important;
    border-radius: 7px !important;
    background: rgba(0,0,0,.18) !important;
}
#rd-rich-chat .chat-image, #rd-rich-chat .chat-video{
    width: 150px !important;
    height: 95px !important;
    max-width: 150px !important;
    max-height: 95px !important;
    object-fit: cover !important;
    display: block !important;
}
#rd-rich-chat .media-thumb-small, #rd-rich-chat .media-thumb.image-thumb, #rd-rich-chat .media-thumb.video-thumb{
    width: 150px !important;
    height: 95px !important;
    min-width: 150px !important;
    min-height: 95px !important;
    overflow: hidden !important;
}

/* ==========================================================
   Ronny update: profiel-icoon/kleur in berichten gelijk aan online lijst
   + hover-acties zwevend zodat berichten niet meer uitrekken
   ========================================================== */
#rd-rich-chat .msg-row, #rd-rich-chat .msg-row.own, #rd-rich-chat .msg-row.other{
    position: relative !important;
    padding-right: 58px !important;
}

#rd-rich-chat .msg-name, #rd-rich-chat .msg-row.own .msg-name{
    align-items: center !important;
}

#rd-rich-chat .msg-role-icon{
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--cfg-user-avatar-background) !important;
    color: var(--cfg-user-avatar-text) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    flex: 0 0 17px !important;
}

#rd-rich-chat .msg-row.dj .msg-role-icon{
    background: var(--cfg-user-avatar-background) !important;
}

#rd-rich-chat .msg-row.vip .msg-role-icon{
    background: var(--cfg-user-avatar-background) !important;
}

#rd-rich-chat .msg-pfp{
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    border-radius: inherit !important;
}

#rd-rich-chat .msg-name .msg-author-name{
    color: var(--cfg-chatters-text) !important;
}

#rd-rich-chat .msg-row.dj .msg-name .msg-author-name, #rd-rich-chat .msg-row.dj .msg-name span.msg-author-name{
    color: var(--cfg-admin-dj-text) !important;
}

#rd-rich-chat .msg-row.vip:not(.dj) .msg-name .msg-author-name, #rd-rich-chat .msg-row.vip:not(.dj) .msg-name span.msg-author-name{
    color: var(--cfg-vip-text) !important;
}

#rd-rich-chat .msg-time, #rd-rich-chat .msg-name .msg-time{
    color: var(--cfg-message-time) !important;
}

#rd-rich-chat .msg-bubble, #rd-rich-chat .msg-row.own .msg-bubble, #rd-rich-chat .msg-row.other .msg-bubble, #rd-rich-chat .msg-row.dj .msg-bubble, #rd-rich-chat .msg-row.own.dj .msg-bubble{
    position: static !important;
}

#rd-rich-chat .message-actions, #rd-rich-chat .msg-row:hover .message-actions{
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    height: 18px !important;
    min-height: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    z-index: 6 !important;
    transition: opacity .14s ease, visibility .14s ease, transform .14s ease !important;
}

#rd-rich-chat .message-actions{
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(2px) !important;
}

#rd-rich-chat .msg-row:hover .message-actions, #rd-rich-chat .msg-row:focus-within .message-actions{
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
}

#rd-rich-chat .message-actions .action-icon{
    width: 16px !important;
    height: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    line-height: 1 !important;
    opacity: .62 !important;
}

#rd-rich-chat .message-actions .action-icon:hover{
    opacity: 1 !important;
    transform: scale(1.08) !important;
}


/* Ronny fix: tekststijl-knoppen tonen nu echt de huidige DB-stijl */
#rd-rich-chat .tool-btn.active, #rd-rich-chat .format-btn.active{
    border-color: var(--cfg-accent) !important;
    box-shadow: 0 0 0 2px rgba(31,145,255,.28), inset 0 1px 0 rgba(255,255,255,.22) !important;
    transform: translateY(-1px);
}
#rd-rich-chat .color-tool input[type="color"]{
    border: 1px solid var(--cfg-button-border) !important;
    border-radius: 2px !important;
    overflow: hidden !important;
}

/* ==========================================================
   Ronny update: gast registreren + MOD functies
   ========================================================== */
#rd-rich-chat .chat-tools-head{
    gap: 6px !important;
    flex-wrap: wrap !important;
}
#rd-rich-chat .register-toggle, #rd-rich-chat .mod-toggle{
    min-width: 92px !important;
}
#rd-rich-chat .mod-toggle{
    background: linear-gradient(180deg, #0ea5e9, #0369a1) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.35) !important;
}
#rd-rich-chat .register-modal-body, #rd-rich-chat .mod-modal-body{
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
}
#rd-rich-chat .modal-small-text{
    font-size: 12px !important;
    line-height: 17px !important;
    color: var(--cfg-muted-text) !important;
    margin: 0 0 3px 0 !important;
}
#rd-rich-chat .mod-modal-content{
    width: min(640px, calc(100vw - 28px)) !important;
    max-width: 640px !important;
}
#rd-rich-chat .mod-tabs{
    display: flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}
#rd-rich-chat .mod-tab{
    flex: 1 1 140px !important;
    min-height: 34px !important;
    border-radius: 8px !important;
    border: 1px solid var(--cfg-button-border) !important;
    background: var(--cfg-context-header-background) !important;
    color: var(--cfg-muted-text) !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}
#rd-rich-chat .mod-tab.active{
    background: var(--cfg-tab-active-background) !important;
    color: var(--cfg-tab-active-text) !important;
    border-color: var(--cfg-tab-active-border) !important;
}
#rd-rich-chat .mod-pane{
    display: none !important;
    flex-direction: column !important;
    gap: 8px !important;
}
#rd-rich-chat .mod-pane.active{
    display: flex !important;
}
#rd-rich-chat .mod-textarea{
    min-height: 92px !important;
    resize: vertical !important;
    padding: 10px !important;
    font-family: inherit !important;
}
#rd-rich-chat .mod-actions-row{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
}
#rd-rich-chat .btn-secondary{
    background: var(--cfg-button-background) !important;
    color: var(--cfg-button-text) !important;
    border: 1px solid var(--cfg-button-border) !important;
}
#rd-rich-chat .mod-request-list{
    max-height: 250px !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 3px !important;
}
#rd-rich-chat .mod-request-item{
    width: 100% !important;
    text-align: left !important;
    border: 1px solid var(--cfg-modal-border) !important;
    background: rgba(0,142,232,.06) !important;
    color: var(--cfg-modal-text) !important;
    border-radius: 8px !important;
    padding: 8px 10px !important;
    cursor: pointer !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}
#rd-rich-chat .mod-request-item span{
    font-size: 12px !important;
    color: var(--cfg-muted-text) !important;
}
#rd-rich-chat .mod-request-item:hover, #rd-rich-chat .mod-request-item.active{
    background: rgba(0,142,232,.16) !important;
    border-color: var(--cfg-accent) !important;
}
#rd-rich-chat .mod-empty{
    font-size: 12px !important;
    color: var(--cfg-muted-text) !important;
    padding: 10px !important;
}
#rd-rich-chat .notice-popup-content{
    width: min(480px, calc(100vw - 30px)) !important;
    text-align: center !important;
    box-shadow: 0 18px 60px rgba(0,0,0,.35) !important;
}
#rd-rich-chat .notice-popup-message{
    font-size: 18px !important;
    line-height: 1.45 !important;
    font-weight: 800 !important;
    margin: 8px 0 18px 0 !important;
    white-space: pre-wrap !important;
}
#rd-rich-chat .pause-box{
    max-width: 520px !important;
    border: 1px solid var(--cfg-modal-border) !important;
    background: var(--cfg-modal-background) !important;
    color: var(--cfg-modal-text) !important;
}
#rd-rich-chat .pause-box h1{
    color: var(--cfg-accent) !important;
    font-size: 24px !important;
}
#rd-rich-chat #pause-reason-text{
    white-space: pre-wrap !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
}
#rd-rich-chat .pause-timer{
    margin-top: 10px !important;
    font-weight: 900 !important;
    color: var(--cfg-muted-text) !important;
}


/* ==========================================================
   Ronny update: lettergroottes uit chatconfig + zichtbare + 0 - knoppen
   ========================================================== */
#rd-rich-chat{
    --font-size-chat-text: var(--cfg-font-chat-message, 15px);
    --font-size-name: var(--cfg-font-chat-name, 13px);
}
#rd-rich-chat .msg-bubble, #rd-rich-chat .msg-bubble .bubble-content, #rd-rich-chat .msg-bubble .bubble-content span:not(.irc-cmd), #rd-rich-chat .private-line, #rd-rich-chat .private-line span{
    font-size: var(--font-size-chat-text) !important;
}
#rd-rich-chat .msg-name .msg-author-name, #rd-rich-chat .msg-name span.msg-author-name{
    font-size: var(--cfg-font-chat-name, 13px) !important;
}
#rd-rich-chat .msg-time, #rd-rich-chat .msg-name .msg-time{
    font-size: var(--cfg-font-chat-time, 12px) !important;
}
#rd-rich-chat .irc-cmd{
    font-size: var(--cfg-font-chat-command, 14px) !important;
}
#rd-rich-chat .online-stats, #rd-rich-chat #online-stats{
    font-size: var(--cfg-font-online-stats, 13px) !important;
}
#rd-rich-chat .tmf-section-title, #rd-rich-chat .sidebar-header h3{
    font-size: var(--cfg-font-online-header, 13px) !important;
}
#rd-rich-chat .user-name, #rd-rich-chat .user-list .user-name, #rd-rich-chat .grouped-user-list .user-name{
    font-size: var(--cfg-font-online-name, 13px) !important;
}
#rd-rich-chat .user-avatar{
    font-size: var(--cfg-font-online-avatar, 18px) !important;
}
#rd-rich-chat .tool-btn, #rd-rich-chat .tools-toggle, #rd-rich-chat #btn-send{
    font-size: var(--cfg-font-button-text, 13px) !important;
}
#rd-rich-chat #chat-input{
    font-size: var(--cfg-font-input-text, 16px) !important;
}
#rd-rich-chat .font-size-tools{
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    flex: 0 0 auto !important;
    vertical-align: middle !important;
}
#rd-rich-chat .font-size-tools .font-size-btn, #rd-rich-chat .tool-btn.font-size-btn{
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 900 !important;
    font-size: 18px !important;
    line-height: 1 !important;
}
#rd-rich-chat .font-size-tools .font-size-reset{
    font-size: 14px !important;
}
#rd-rich-chat .font-size-tools .font-size-btn.active{
    border-color: var(--cfg-accent) !important;
    box-shadow: 0 0 0 2px rgba(0,142,232,.22) !important;
}
#rd-rich-chat .font-size-tools .font-size-btn:disabled{
    opacity: .45 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* ==========================================================
   Ronny fix: CHATTERS/luisteraars allemaal dezelfde naamkleur
   ----------------------------------------------------------
   Sommige listeners kregen nog admin/vip/link-kleur door oudere role-regels.
   Alleen de normale CHATTERS-lijst wordt hiermee gelijkgetrokken.
   VIPS en ADMIN/DJ secties blijven hun eigen kleur houden.
   ========================================================== */
#rd-rich-chat #section-chatters .user-item .user-name, #rd-rich-chat #section-chatters .user-item.is-dj .user-name, #rd-rich-chat #section-chatters .user-item.is-vip .user-name, #rd-rich-chat #online-list .user-item .user-name, #rd-rich-chat #online-list .user-item.is-dj .user-name, #rd-rich-chat #online-list .user-item.is-vip .user-name{
    color: var(--cfg-chatters-text, #15283b) !important;
}

#rd-rich-chat #section-chatters .user-item .user-name a, #rd-rich-chat #online-list .user-item .user-name a{
    color: var(--cfg-chatters-text, #15283b) !important;
    text-decoration: none !important;
}


/* ==========================================================
   Radio-Digitaal 2026: lichte chat polish + stemmen + badges
   ========================================================== */
#rd-rich-chat .msg-row{
    position: relative;
    padding: 5px 10px !important;
}
#rd-rich-chat .msg-name{
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    line-height: 1.15 !important;
}
#rd-rich-chat .msg-author-name{
    font-weight: 800 !important;
    letter-spacing: .1px;
}
#rd-rich-chat .msg-time{
    margin-left: auto !important;
    opacity: .62;
    font-size: 11px !important;
}
#rd-rich-chat .msg-bubble{
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.10) !important;
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
#rd-rich-chat .msg-bubble:hover{
    transform: translateY(-1px);
    border-color: rgba(99,196,240,.34) !important;
}
#rd-rich-chat .msg-row.dj .msg-bubble{
    border-left: 4px solid #1f91ff !important;
    background: linear-gradient(135deg, rgba(31,145,255,.14), rgba(255,255,255,.035)) !important;
}
#rd-rich-chat .msg-row.vip .msg-bubble{
    border-left: 4px solid #f5c542 !important;
}
#rd-rich-chat .msg-pfp, #rd-rich-chat .sidebar-pfp{
    object-fit: cover;
}
#rd-rich-chat .msg-badges-inline, #rd-rich-chat .user-right-badges, #rd-rich-chat .leaderboard-badges{
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-wrap: wrap;
}
#rd-rich-chat .chat-user-badge{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    font-size: 11px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
#rd-rich-chat .chat-user-badge.dj{ background: rgba(31,145,255,.22); border-color: rgba(31,145,255,.38); }
#rd-rich-chat .chat-user-badge.vip{ background: rgba(245,197,66,.20); border-color: rgba(245,197,66,.42); }
#rd-rich-chat .chat-user-badge.level{ background: rgba(163,107,255,.20); border-color: rgba(163,107,255,.40); }
#rd-rich-chat .chat-user-badge.legend{ background: rgba(255,77,141,.20); border-color: rgba(255,77,141,.40); }
#rd-rich-chat .chat-user-badge.active{ background: rgba(255,128,0,.18); border-color: rgba(255,128,0,.34); }
#rd-rich-chat .mini-tag.chats{
    opacity: .75;
}

#rd-rich-chat .chat-vote-card{
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(31,145,255,.16), rgba(115,185,220,.08));
    border: 1px solid rgba(99,196,240,.30);
}
#rd-rich-chat .chat-vote-info{
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
#rd-rich-chat .chat-vote-info strong{
    font-size: 12px;
    color: #73b9dc;
    text-transform: uppercase;
    letter-spacing: .5px;
}
#rd-rich-chat .chat-vote-info span{
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#rd-rich-chat .chat-vote-info small{
    opacity: .75;
}
#rd-rich-chat .chat-vote-btn,
#rd-rich-chat .chat-irc-vote-btn{
    border: 0;
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: 900;
    cursor: pointer;
    color: #00101d;
    background: linear-gradient(180deg, #ffdf6e, #ffb100);
    box-shadow: 0 5px 14px rgba(0,0,0,.18);
    white-space: nowrap;
}
#rd-rich-chat .chat-vote-btn:hover:not(:disabled),
#rd-rich-chat .chat-irc-vote-btn:hover:not(:disabled){
    transform: translateY(-1px);
}
#rd-rich-chat .chat-vote-btn:disabled,
#rd-rich-chat .chat-irc-vote-btn:disabled,
#rd-rich-chat .chat-vote-card.voted .chat-vote-btn,
#rd-rich-chat .chat-vote-card.voted .chat-irc-vote-btn{
    cursor: default;
    color: rgba(255,255,255,.82);
    background: rgba(255,255,255,.16);
    box-shadow: none;
}
#rd-rich-chat .chat-vote-card.voted{
    border-color: rgba(76,175,80,.35);
    background: linear-gradient(135deg, rgba(76,175,80,.16), rgba(255,255,255,.04));
}

#rd-rich-chat .leaderboard-panel{
    position: fixed;
    top: 66px;
    right: 14px;
    width: min(360px, calc(100vw - 28px));
    max-height: min(72vh, 620px);
    z-index: 15000;
    border-radius: 18px;
    overflow: hidden;
    background: rgba(10,16,26,.96);
    border: 1px solid rgba(255,255,255,.15);
    box-shadow: 0 22px 60px rgba(0,0,0,.38);
    transform: translateX(0);
    transition: transform .22s ease, opacity .22s ease;
}
#rd-rich-chat .leaderboard-panel.hidden{
    display: block !important;
    pointer-events: none;
    opacity: 0;
    transform: translateX(110%);
}
#rd-rich-chat .leaderboard-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 14px;
    background: linear-gradient(135deg, rgba(31,145,255,.22), rgba(245,197,66,.12));
    border-bottom: 1px solid rgba(255,255,255,.10);
}
#rd-rich-chat .leaderboard-head strong, #rd-rich-chat .leaderboard-head span{
    display: block;
}
#rd-rich-chat .leaderboard-head span{
    font-size: 12px;
    opacity: .75;
    margin-top: 2px;
}
#rd-rich-chat #close-leaderboard{
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 0;
    color: #fff;
    background: rgba(255,255,255,.12);
    cursor: pointer;
}
#rd-rich-chat .leaderboard-list{
    padding: 10px;
    overflow: auto;
    max-height: calc(min(72vh, 620px) - 62px);
}
#rd-rich-chat .leaderboard-row{
    width: 100%;
    display: grid;
    grid-template-columns: 44px 38px 1fr auto auto;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 0;
    border-radius: 13px;
    color: inherit;
    background: rgba(255,255,255,.055);
    margin-bottom: 6px;
    cursor: pointer;
    text-align: left;
}
#rd-rich-chat .leaderboard-row:hover{
    background: rgba(31,145,255,.15);
}
#rd-rich-chat .leaderboard-row img{
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
}
#rd-rich-chat .leaderboard-rank{
    font-weight: 900;
    color: #ffdf6e;
}
#rd-rich-chat .leaderboard-name{
    font-weight: 800;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
#rd-rich-chat .leaderboard-row strong{
    font-size: 12px;
    white-space: nowrap;
    opacity: .86;
}
#rd-rich-chat .leaderboard-empty{ padding: 14px; opacity: .76; }

#rd-rich-chat .profile-card-modal{
    max-width: 430px !important;
    border-radius: 20px !important;
    overflow: hidden;
}
#rd-rich-chat .profile-card-header{
    background: linear-gradient(135deg, rgba(31,145,255,.18), rgba(245,197,66,.10));
}
#rd-rich-chat .profile-card-top{
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}
#rd-rich-chat .profile-avatar-wrap img{
    width: 92px;
    height: 92px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid rgba(255,255,255,.20);
    box-shadow: 0 10px 26px rgba(0,0,0,.22);
}
#rd-rich-chat .profile-main-meta{ min-width: 0; }
#rd-rich-chat .profile-role-pill{
    display: inline-flex;
    border-radius: 999px;
    padding: 6px 10px;
    font-weight: 900;
    background: rgba(31,145,255,.18);
    border: 1px solid rgba(31,145,255,.26);
    margin-bottom: 8px;
}
#rd-rich-chat .profile-badges{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
#rd-rich-chat .profile-badge{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.12);
}
#rd-rich-chat .profile-stat-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
#rd-rich-chat .profile-stat-grid div{
    padding: 10px;
    border-radius: 13px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.08);
}
#rd-rich-chat .profile-stat-grid span{
    display: block;
    font-size: 11px;
    opacity: .72;
    text-transform: uppercase;
    letter-spacing: .4px;
}
#rd-rich-chat .profile-stat-grid strong{
    display: block;
    margin-top: 3px;
    font-size: 15px;
}
#rd-rich-chat .profile-status-line{
    margin-top: 12px;
    color: #d44e59;
}
#rd-rich-chat .mod-vote-option{
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
    padding: 9px 10px;
    border-radius: 12px;
    background: rgba(31,145,255,.10);
    border: 1px solid rgba(31,145,255,.20);
    font-size: 13px;
    cursor: pointer;
}
#rd-rich-chat .mod-vote-option input{
    width: 18px;
    height: 18px;
}
@media (max-width: 640px){
    #rd-rich-chat .chat-vote-card{ align-items: stretch; flex-direction: column; }
    #rd-rich-chat .chat-vote-btn{ width: 100%; }
    #rd-rich-chat .leaderboard-panel{ top: 54px; right: 8px; width: calc(100vw - 16px); }
    #rd-rich-chat .leaderboard-row{ grid-template-columns: 38px 34px 1fr auto; }
    #rd-rich-chat .leaderboard-badges{ display: none; }
    #rd-rich-chat .profile-stat-grid{ grid-template-columns: 1fr; }
}


/* ==========================================================
   Ronny hotfix: Top-knop zichtbaar in compacte chat + kleinere badges
   ========================================================== */
#rd-rich-chat .leaderboard-toggle{
    min-width: 74px !important;
    background: linear-gradient(180deg, #f8c843, #d99000) !important;
    color: #1b1200 !important;
    border-color: rgba(120, 74, 0, .28) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 5px rgba(0,0,0,.12) !important;
}
#rd-rich-chat .leaderboard-toggle:hover{
    filter: brightness(1.04);
}
#rd-rich-chat .msg-name{
    gap: 4px !important;
}
#rd-rich-chat .msg-badges-inline, #rd-rich-chat .user-right-badges, #rd-rich-chat .leaderboard-badges{
    gap: 2px !important;
}
#rd-rich-chat .chat-user-badge{
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 3px !important;
    font-size: 9px !important;
    line-height: 16px !important;
    box-shadow: none !important;
}
#rd-rich-chat .msg-badges-inline .chat-user-badge{
    transform: translateY(-1px);
}
#rd-rich-chat .user-right-badges .chat-user-badge{
    min-width: 15px !important;
    height: 15px !important;
    font-size: 8px !important;
    padding: 0 2px !important;
}
#rd-rich-chat .profile-badge{
    font-size: 11px !important;
    padding: 3px 7px !important;
}

/* ==========================================================
   Ronny hotfix v2: leaderboard goed leesbaar + badges rustiger
   ========================================================== */
#rd-rich-chat .leaderboard-panel{
    background: rgba(248, 252, 255, .98) !important;
    color: #13324c !important;
    border: 1px solid rgba(46, 139, 213, .26) !important;
    box-shadow: 0 18px 48px rgba(20, 50, 80, .26) !important;
}
#rd-rich-chat .leaderboard-head{
    background: linear-gradient(135deg, #eaf6ff, #fff7dc) !important;
    border-bottom: 1px solid rgba(46, 139, 213, .22) !important;
    color: #12324d !important;
}
#rd-rich-chat .leaderboard-head strong{
    color: #12324d !important;
    font-weight: 900 !important;
}
#rd-rich-chat .leaderboard-head span{
    color: #56738d !important;
    opacity: 1 !important;
}
#rd-rich-chat #close-leaderboard{
    color: #ffffff !important;
    background: #5f6f7d !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.14) !important;
}
#rd-rich-chat #close-leaderboard:hover{
    background: #34495e !important;
}
#rd-rich-chat .leaderboard-list{
    background: linear-gradient(180deg, #f8fcff, #eef7ff) !important;
}
#rd-rich-chat .leaderboard-row{
    color: #15324d !important;
    background: #ffffff !important;
    border: 1px solid rgba(46, 139, 213, .16) !important;
    box-shadow: 0 2px 8px rgba(20, 50, 80, .08) !important;
}
#rd-rich-chat .leaderboard-row:hover{
    background: #e8f5ff !important;
    border-color: rgba(46, 139, 213, .30) !important;
}
#rd-rich-chat .leaderboard-rank{
    color: #c08000 !important;
    font-size: 19px !important;
}
#rd-rich-chat .leaderboard-name, #rd-rich-chat .leaderboard-row .leaderboard-name{
    color: #074f86 !important;
    font-weight: 900 !important;
}
#rd-rich-chat .leaderboard-row strong{
    color: #40566a !important;
    opacity: 1 !important;
    font-weight: 800 !important;
}
#rd-rich-chat .leaderboard-empty{
    color: #40566a !important;
}
#rd-rich-chat .leaderboard-badges .chat-user-badge{
    background: #eef6ff !important;
    border-color: rgba(46, 139, 213, .24) !important;
}

/* Chatregels rustiger maken: kleinere icon-badges naast namen */
#rd-rich-chat .msg-name{
    gap: 3px !important;
}
#rd-rich-chat .msg-badges-inline{
    gap: 1px !important;
    margin-left: 2px !important;
    flex-wrap: nowrap !important;
    transform: translateY(-1px);
}
#rd-rich-chat .msg-badges-inline .chat-user-badge{
    min-width: 13px !important;
    width: 13px !important;
    height: 13px !important;
    padding: 0 !important;
    font-size: 8px !important;
    line-height: 13px !important;
    border-width: 1px !important;
    box-shadow: none !important;
}
#rd-rich-chat .msg-author-name{
    margin-right: 1px !important;
}
#rd-rich-chat .user-right-badges .chat-user-badge, #rd-rich-chat .leaderboard-badges .chat-user-badge{
    min-width: 14px !important;
    width: 14px !important;
    height: 14px !important;
    padding: 0 !important;
    font-size: 8px !important;
    line-height: 14px !important;
}

/* ==========================================================
   Ronny update: mooiere pauze popup + DJ Live countdown
   ========================================================== */
#rd-rich-chat .pause-status-pill{
    margin: 0 0 8px 0 !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(14, 132, 224, .25) !important;
    background: linear-gradient(135deg, #eaf7ff, #ffffff) !important;
    color: #075985 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    box-shadow: 0 6px 18px rgba(14, 132, 224, .12) !important;
}

#rd-rich-chat .mod-live-option{
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 10px 0 8px 0 !important;
    padding: 9px 10px !important;
    border: 1px solid #bfe5ff !important;
    border-radius: 10px !important;
    background: #f0f9ff !important;
    color: #075985 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
}

#rd-rich-chat .mod-live-option input{
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 auto !important;
}

#rd-rich-chat .mod-live-time-row{
    display: none !important;
    margin: 0 0 12px 0 !important;
    padding: 10px !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    border: 1px dashed #9bd5ff !important;
}

#rd-rich-chat .mod-live-time-row.active{
    display: block !important;
}

#rd-rich-chat .mod-live-time-row label{
    display: block !important;
    margin-bottom: 5px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    color: #075985 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
}

#rd-rich-chat .mod-live-time-row input[type="time"]{
    width: 170px !important;
    max-width: 100% !important;
    margin-bottom: 6px !important;
    font-size: 18px !important;
    font-weight: 900 !important;
}

#rd-rich-chat .mod-live-time-row small{
    display: block !important;
    color: #64748b !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
}

#rd-rich-chat .fullscreen-overlay{
    background: rgba(15, 23, 42, .55) !important;
    backdrop-filter: blur(2px) !important;
}

#rd-rich-chat .pause-box{
    position: relative !important;
    width: min(520px, calc(100vw - 34px)) !important;
    max-width: 520px !important;
    padding: 28px 30px 24px 30px !important;
    border: 1px solid rgba(14, 132, 224, .28) !important;
    border-radius: 22px !important;
    background: linear-gradient(180deg, #ffffff 0%, #eef8ff 100%) !important;
    color: #0f172a !important;
    box-shadow: 0 24px 80px rgba(15, 23, 42, .28), inset 0 1px 0 rgba(255,255,255,.8) !important;
    overflow: hidden !important;
}

#rd-rich-chat .pause-box::before{
    content: "" !important;
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    height: 7px !important;
    background: linear-gradient(90deg, #0ea5e9, #38bdf8, #fbbf24) !important;
}

#rd-rich-chat .pause-icon-badge{
    width: 58px !important;
    height: 58px !important;
    margin: 0 auto 10px auto !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #dff4ff, #ffffff) !important;
    border: 1px solid rgba(14, 132, 224, .28) !important;
    box-shadow: 0 10px 24px rgba(14, 132, 224, .16) !important;
    font-size: 28px !important;
}

#rd-rich-chat .pause-box h1, #rd-rich-chat #pause-title{
    margin: 0 0 10px 0 !important;
    color: #0284c7 !important;
    font-size: clamp(24px, 3.2vw, 34px) !important;
    line-height: 1.08 !important;
    font-weight: 950 !important;
    letter-spacing: -0.03em !important;
}

#rd-rich-chat #pause-reason-text{
    margin: 0 auto 12px auto !important;
    max-width: 430px !important;
    white-space: pre-wrap !important;
    font-size: 18px !important;
    line-height: 1.4 !important;
    color: #0f172a !important;
    font-weight: 700 !important;
}

#rd-rich-chat .pause-live-line{
    margin-top: 12px !important;
    color: #0369a1 !important;
    font-size: 17px !important;
    font-weight: 950 !important;
}

#rd-rich-chat .pause-countdown{
    margin: 8px auto 10px auto !important;
    padding: 10px 16px !important;
    width: fit-content !important;
    min-width: 210px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
    color: #ffffff !important;
    font-size: clamp(30px, 5vw, 46px) !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    letter-spacing: .03em !important;
    font-variant-numeric: tabular-nums !important;
    text-shadow: 0 2px 6px rgba(0,0,0,.22) !important;
    box-shadow: 0 14px 28px rgba(2, 132, 199, .28) !important;
}

#rd-rich-chat .pause-timer{
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(14, 132, 224, .16) !important;
    font-weight: 900 !important;
    color: #475569 !important;
    font-size: 14px !important;
}

/* ==========================================================
   Ronny update: Notice rechtsonder als lichte slide-in toast
   - Geen blokkade-popup meer
   - Gebruiker kan notice sluiten; gesloten notice blijft lokaal dicht
   ========================================================== */
#rd-rich-chat .notice-toast{
    position: fixed !important;
    right: 24px !important;
    bottom: 24px !important;
    width: min(360px, calc(100vw - 28px)) !important;
    z-index: 25000 !important;
    display: grid !important;
    grid-template-columns: 42px 1fr 34px !important;
    gap: 10px !important;
    align-items: flex-start !important;
    padding: 14px 12px 13px 14px !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #ffffff 0%, #eef8ff 100%) !important;
    border: 1px solid rgba(0, 142, 232, .28) !important;
    box-shadow: 0 18px 45px rgba(0, 50, 92, .22), 0 0 0 1px rgba(255,255,255,.7) inset !important;
    color: #06243e !important;
    overflow: hidden !important;
    transform: translateX(calc(100% + 44px)) scale(.98) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform .36s cubic-bezier(.2,.9,.2,1), opacity .28s ease !important;
}
#rd-rich-chat .notice-toast.hidden{
    display: grid !important;
    visibility: hidden !important;
}
#rd-rich-chat .notice-toast.is-visible{
    visibility: visible !important;
    transform: translateX(0) scale(1) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
#rd-rich-chat .notice-toast-glow{
    position: absolute !important;
    inset: auto -45px -55px auto !important;
    width: 160px !important;
    height: 160px !important;
    border-radius: 999px !important;
    background: radial-gradient(circle, rgba(0,142,232,.22), transparent 68%) !important;
    pointer-events: none !important;
}
#rd-rich-chat .notice-toast-icon{
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(180deg, #12a5ff, #0077d9) !important;
    color: #fff !important;
    font-size: 21px !important;
    box-shadow: 0 8px 18px rgba(0, 142, 232, .26) !important;
    position: relative !important;
    z-index: 1 !important;
}
#rd-rich-chat .notice-toast-main{
    min-width: 0 !important;
    position: relative !important;
    z-index: 1 !important;
}
#rd-rich-chat .notice-toast-title{
    font-size: 14px !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
    color: #0077d9 !important;
    margin: 1px 0 5px 0 !important;
    letter-spacing: .1px !important;
}
#rd-rich-chat .notice-toast-message{
    font-size: 14px !important;
    line-height: 1.34 !important;
    font-weight: 750 !important;
    color: #17324c !important;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
}
#rd-rich-chat .notice-toast-close{
    width: 30px !important;
    height: 30px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(0, 65, 116, .08) !important;
    color: #27516e !important;
    font-size: 22px !important;
    line-height: 28px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 2 !important;
    transition: background .18s ease, transform .18s ease !important;
}
#rd-rich-chat .notice-toast-close:hover{
    background: rgba(0, 142, 232, .16) !important;
    transform: scale(1.06) !important;
}

/* Oude notice modal mag niet meer als scherm-blokker zichtbaar worden wanneer browser cache oude markup heeft. */
#rd-rich-chat #notice-popup{
    display: none !important;
}

@media (min-width: 900px){
    #rd-rich-chat .app-layout .notice-toast, #rd-rich-chat .notice-toast{
        right: 24px !important;
        bottom: 22px !important;
    }
}

@media (max-width: 700px){
    #rd-rich-chat .notice-toast{
        right: 10px !important;
        bottom: 10px !important;
        width: calc(100vw - 20px) !important;
        grid-template-columns: 38px 1fr 32px !important;
        border-radius: 16px !important;
    }
    #rd-rich-chat .notice-toast-icon{
        width: 38px !important;
        height: 38px !important;
        border-radius: 12px !important;
        font-size: 19px !important;
    }
}


/* Ronny fix 2026-05-24: tijd bij chatregels weggehaald zodat reply/delete/like iconen niet meer met de tijd botsen of omlaag schuiven. */
#rd-rich-chat .msg-time, #rd-rich-chat .msg-name .msg-time{
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

#rd-rich-chat .msg-name, #rd-rich-chat .msg-row.own .msg-name{
    padding-right: 58px !important;
}

#rd-rich-chat .message-actions, #rd-rich-chat .msg-row:hover .message-actions, #rd-rich-chat .msg-row:focus-within .message-actions{
    top: 5px !important;
    right: 7px !important;
}

/* ==========================================================
   Ronny fix 2026-05-24: chat actie-iconen volledig stabiel
   Oorzaak: de acties stonden zwevend in dezelfde tekstzone en
   hover-transform/te weinig gereserveerde ruimte liet ze visueel
   in de tekst zakken. Dit reserveert vaste ruimte en haalt layout-
   verschuivingen weg.
   ========================================================== */
#rd-rich-chat .msg-row, #rd-rich-chat .msg-row.own, #rd-rich-chat .msg-row.other{
    position: relative !important;
    box-sizing: border-box !important;
    padding-right: 82px !important;
    overflow: visible !important;
}

#rd-rich-chat .msg-name, #rd-rich-chat .msg-row.own .msg-name{
    box-sizing: border-box !important;
    padding-right: 82px !important;
    max-width: calc(100% - 82px) !important;
}

#rd-rich-chat .msg-bubble, #rd-rich-chat .msg-row.own .msg-bubble, #rd-rich-chat .msg-row.other .msg-bubble, #rd-rich-chat .msg-row.dj .msg-bubble, #rd-rich-chat .msg-row.own.dj .msg-bubble{
    box-sizing: border-box !important;
    max-width: 100% !important;
    overflow: visible !important;
}

#rd-rich-chat .bubble-content{
    box-sizing: border-box !important;
    max-width: 100% !important;
    padding-right: 82px !important;
    min-height: 22px !important;
}

#rd-rich-chat .message-actions, #rd-rich-chat .msg-row:hover .message-actions, #rd-rich-chat .msg-row:focus-within .message-actions{
    position: absolute !important;
    top: 6px !important;
    right: 10px !important;
    width: 66px !important;
    min-width: 66px !important;
    max-width: 66px !important;
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    line-height: 1 !important;
    overflow: visible !important;
    background: transparent !important;
    z-index: 20 !important;
    transform: none !important;
    transition: opacity .14s ease, visibility .14s ease !important;
}

#rd-rich-chat .message-actions .action-icon, #rd-rich-chat .message-actions .action-icon:hover, #rd-rich-chat .delete-btn:hover, #rd-rich-chat .reply-btn:hover, #rd-rich-chat .reaction-hint:hover{
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 18px !important;
    font-size: 12px !important;
    line-height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    vertical-align: top !important;
}

#rd-rich-chat .message-actions .action-icon i{
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    line-height: 18px !important;
    text-align: center !important;
    transform: none !important;
}

/* Ronny fix: pauzebalk mag alleen ruimte innemen wanneer pauze echt actief is.
   De algemene .hidden class verborg dit element niet, waardoor een lege pill bleef staan. */
#rd-rich-chat .pause-status-pill.hidden, #rd-rich-chat #pause-status-pill.hidden, #rd-rich-chat #pause-status-pill:empty{
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    min-height: 0 !important;
    height: 0 !important;
}

/* ==========================================================
   Ronny fix 2026-05-24: actie-iconen definitief vast in naamregel
   Oorzaak: de knoppen stonden in de bericht-bubble. Bij lange berichten
   en bubble-hover konden ze daardoor midden in de tekst lijken te zakken.
   Nu zitten ze in de vaste header/naamregel rechtsboven van elke chatregel.
   ========================================================== */
#rd-rich-chat .msg-row, #rd-rich-chat .msg-row.own, #rd-rich-chat .msg-row.other{
    position: relative !important;
    padding-right: 8px !important;
}

#rd-rich-chat .msg-name, #rd-rich-chat .msg-row.own .msg-name{
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-right: 78px !important;
    min-height: 22px !important;
    overflow: visible !important;
}

#rd-rich-chat .msg-name .msg-author-name{
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

#rd-rich-chat .msg-name > .message-actions, #rd-rich-chat .msg-row:hover .msg-name > .message-actions, #rd-rich-chat .msg-row:focus-within .msg-name > .message-actions{
    position: absolute !important;
    top: 50% !important;
    right: 6px !important;
    left: auto !important;
    width: 66px !important;
    min-width: 66px !important;
    max-width: 66px !important;
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    line-height: 1 !important;
    overflow: visible !important;
    background: transparent !important;
    z-index: 50 !important;
    transform: translateY(-50%) !important;
    transition: opacity .12s ease, visibility .12s ease !important;
}

#rd-rich-chat .msg-name > .message-actions{
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

#rd-rich-chat .msg-row:hover .msg-name > .message-actions, #rd-rich-chat .msg-row:focus-within .msg-name > .message-actions, #rd-rich-chat .msg-name > .message-actions:hover{
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(-50%) !important;
}

#rd-rich-chat .msg-name > .message-actions .action-icon, #rd-rich-chat .msg-name > .message-actions .action-icon:hover, #rd-rich-chat .msg-name > .message-actions .delete-btn:hover, #rd-rich-chat .msg-name > .message-actions .reply-btn:hover, #rd-rich-chat .msg-name > .message-actions .reaction-hint:hover{
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    flex: 0 0 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
    line-height: 18px !important;
    vertical-align: top !important;
    transform: none !important;
}

#rd-rich-chat .msg-name > .message-actions .action-icon i{
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    line-height: 18px !important;
    text-align: center !important;
    transform: none !important;
}

#rd-rich-chat .msg-bubble > .message-actions{
    display: none !important;
}


/* ==========================================================
   Ronny update: Top 10 tabs voor Totaal / Chats / Verzoekjes
   ========================================================== */
#rd-rich-chat .leaderboard-tabs{
    display: flex;
    gap: 6px;
    padding: 8px 10px;
    background: linear-gradient(180deg, #f8fcff, #eef7ff);
    border-bottom: 1px solid rgba(46, 139, 213, .16);
}
#rd-rich-chat .leaderboard-tab{
    flex: 1;
    border: 1px solid rgba(46, 139, 213, .22);
    background: #ffffff;
    color: #286086;
    border-radius: 999px;
    padding: 5px 8px;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    line-height: 1.1;
    box-shadow: 0 1px 3px rgba(20, 50, 80, .07);
}
#rd-rich-chat .leaderboard-tab:hover{
    background: #edf8ff;
}
#rd-rich-chat .leaderboard-tab.active{
    background: linear-gradient(180deg, #1695ea, #0775c7);
    color: #ffffff;
    border-color: rgba(0, 96, 170, .35);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 7px rgba(7, 117, 199, .22);
}
#rd-rich-chat .leaderboard-detail{
    display: block;
    margin-top: 2px;
    font-size: 10px;
    line-height: 1.1;
    opacity: .72;
    font-weight: 700;
}
#rd-rich-chat .leaderboard-row strong{
    text-align: right;
}
@media (max-width: 640px){
    #rd-rich-chat .leaderboard-tabs{
        padding: 7px 8px;
        gap: 4px;
    }
    #rd-rich-chat .leaderboard-tab{
        font-size: 11px;
        padding: 5px 6px;
    }
    #rd-rich-chat .leaderboard-detail{
        display: none;
    }
}


/* ==========================================================
   Ronny fix: Top 10 totaal-detail onder de naam voor leesbaarheid
   ========================================================== */
#rd-rich-chat .leaderboard-row{
    grid-template-columns: 44px 38px minmax(0, 1fr) auto !important;
}
#rd-rich-chat .leaderboard-main{
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
#rd-rich-chat .leaderboard-name-line{
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}
#rd-rich-chat .leaderboard-name-line .leaderboard-name{
    min-width: 0;
    flex: 0 1 auto;
    display: block;
}
#rd-rich-chat .leaderboard-name-line .leaderboard-badges{
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}
#rd-rich-chat .leaderboard-detail{
    display: block !important;
    margin-top: 1px !important;
    color: #6c7f91 !important;
    font-size: 10.5px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    opacity: 1 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#rd-rich-chat .leaderboard-row > strong{
    align-self: center;
    padding-left: 6px;
    font-size: 13px !important;
}

@media (max-width: 640px){
    #rd-rich-chat .leaderboard-row{
        grid-template-columns: 38px 34px minmax(0, 1fr) auto !important;
        gap: 7px !important;
    }
    #rd-rich-chat .leaderboard-name-line{
        gap: 4px;
    }
    #rd-rich-chat .leaderboard-detail{
        display: block !important;
        font-size: 9.5px !important;
        max-width: 100%;
    }
    #rd-rich-chat .leaderboard-row > strong{
        font-size: 12px !important;
        padding-left: 4px;
    }
}

/* ==========================================================
   Ronny fix: Top 10 popup minder rond + meer ruimte voor #10
   ========================================================== */
#rd-rich-chat .leaderboard-panel{
    max-height: min(86vh, 760px) !important;
    border-radius: 10px !important;
}

#rd-rich-chat .leaderboard-list{
    max-height: calc(min(86vh, 760px) - 94px) !important;
    padding-bottom: 18px !important;
}

#rd-rich-chat .leaderboard-row{
    border-radius: 8px !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    margin-bottom: 5px !important;
}

#rd-rich-chat #close-leaderboard{
    border-radius: 10px !important;
}

@media (max-width: 640px){
    #rd-rich-chat .leaderboard-panel{
        max-height: min(88vh, 760px) !important;
        border-radius: 9px !important;
    }

    #rd-rich-chat .leaderboard-list{
        max-height: calc(min(88vh, 760px) - 90px) !important;
        padding-bottom: 20px !important;
    }

    #rd-rich-chat .leaderboard-row{
        border-radius: 8px !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }
}


/* ==========================================================
   Ronny update: ranking-vierkantje in online gebruikerslijst
   Ranking = chats + verzoekjes, volledige lijst (niet alleen Top 10)
   ========================================================== */
#rd-rich-chat .user-item{
    display: flex !important;
    align-items: center !important;
}

#rd-rich-chat .user-item .user-info-group{
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

#rd-rich-chat .user-item .user-right-badges{
    margin-left: auto !important;
    min-width: auto !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-direction: row !important;
    gap: 3px !important;
}

#rd-rich-chat .user-rank-badge{
    min-width: 28px !important;
    height: 22px !important;
    padding: 0 5px !important;
    border-radius: 5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    font-family: Verdana, Arial, sans-serif !important;
    font-size: 10px !important;
    line-height: 22px !important;
    font-weight: 900 !important;
    letter-spacing: -0.2px !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,.35) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 1px 3px rgba(0,0,0,.14) !important;
    text-shadow: 0 1px 1px rgba(0,0,0,.28) !important;
}

#rd-rich-chat .user-rank-badge.rank-1{
    background: linear-gradient(180deg, #ffd95a, #d99400) !important;
    color: #2d1900 !important;
    border-color: rgba(130,80,0,.28) !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.35) !important;
}

#rd-rich-chat .user-rank-badge.rank-2-10{
    background: linear-gradient(180deg, #27a9ff, #006fc9) !important;
}

#rd-rich-chat .user-rank-badge.rank-11-100{
    background: linear-gradient(180deg, #9b7cff, #5c3ed6) !important;
}

#rd-rich-chat .user-rank-badge.rank-101-200{
    background: linear-gradient(180deg, #34d399, #059669) !important;
}

#rd-rich-chat .user-rank-badge.rank-201-300{
    background: linear-gradient(180deg, #2dd4bf, #0f766e) !important;
}

#rd-rich-chat .user-rank-badge.rank-301-400{
    background: linear-gradient(180deg, #38bdf8, #0369a1) !important;
}

#rd-rich-chat .user-rank-badge.rank-401-500{
    background: linear-gradient(180deg, #fb923c, #c2410c) !important;
}

#rd-rich-chat .user-rank-badge.rank-501-600{
    background: linear-gradient(180deg, #f87171, #b91c1c) !important;
}

#rd-rich-chat .user-rank-badge.rank-601-700{
    background: linear-gradient(180deg, #f472b6, #be185d) !important;
}

#rd-rich-chat .user-rank-badge.rank-701-800{
    background: linear-gradient(180deg, #94a3b8, #475569) !important;
}

#rd-rich-chat .user-rank-badge.rank-801-900{
    background: linear-gradient(180deg, #b45309, #78350f) !important;
}

#rd-rich-chat .user-rank-badge.rank-901-1000{
    background: linear-gradient(180deg, #64748b, #334155) !important;
}

#rd-rich-chat .user-rank-badge.rank-1000-plus{
    background: linear-gradient(180deg, #4b5563, #111827) !important;
}

@media (max-width: 640px){
    #rd-rich-chat .user-rank-badge{
        min-width: 24px !important;
        height: 20px !important;
        font-size: 9px !important;
        line-height: 20px !important;
        border-radius: 4px !important;
        padding: 0 4px !important;
    }

    #rd-rich-chat .user-item .user-right-badges{
        gap: 2px !important;
    }
}


/* ==========================================================
   Ronny update: Top ranking meer laden knop
   ========================================================== */
#rd-rich-chat .leaderboard-load-more{
    width: 100%;
    height: 38px;
    border: 1px solid rgba(46, 139, 213, .28);
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff, #eaf6ff);
    color: #075f9d;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 2px 7px rgba(20, 50, 80, .08);
}

#rd-rich-chat .leaderboard-load-more:hover{
    background: linear-gradient(180deg, #eaf6ff, #d9efff);
    border-color: rgba(46, 139, 213, .45);
}

#rd-rich-chat .leaderboard-end{
    padding: 9px 8px 4px;
    text-align: center;
    color: #6c7f91;
    font-size: 11px;
    font-weight: 800;
    opacity: .9;
}


/* ==========================================================
   Ronny update: uitgebreide chatter profiel-popup met tabs
   ========================================================== */
#rd-rich-chat .profile-card-modal{
    width: min(620px, calc(100vw - 26px)) !important;
    max-width: 620px !important;
    max-height: min(86vh, 760px) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%) !important;
    border: 1px solid rgba(31,145,255,.22) !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .28) !important;
    color: #102033 !important;
}

#rd-rich-chat .profile-card-header{
    min-height: 62px;
    padding: 16px 18px !important;
    background:
        linear-gradient(135deg, rgba(31,145,255,.18), rgba(255,223,110,.12)),
        linear-gradient(180deg, #ffffff, #eef7ff) !important;
    border-bottom: 1px solid rgba(31,145,255,.16) !important;
}

#rd-rich-chat .profile-card-header h3, #rd-rich-chat .profile-card-header #profile-name{
    font-size: 24px !important;
    font-weight: 900 !important;
    color: #102033 !important;
    letter-spacing: -.3px;
}

#rd-rich-chat .profile-card-body{
    padding: 14px 18px 18px !important;
    overflow-y: auto;
    max-height: calc(min(86vh, 760px) - 62px);
}

#rd-rich-chat .profile-hero{
    display: grid;
    grid-template-columns: 104px 1fr;
    gap: 16px;
    align-items: center;
    padding: 12px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(31,145,255,.08), rgba(255,255,255,.72));
    border: 1px solid rgba(31,145,255,.13);
    margin-bottom: 12px;
}

#rd-rich-chat .profile-card-top{
    display: none !important;
}

#rd-rich-chat .profile-avatar-wrap img{
    width: 96px !important;
    height: 96px !important;
    border-radius: 12px !important;
    border: 4px solid #ffffff !important;
    box-shadow: 0 12px 32px rgba(18, 43, 76, .20) !important;
    background: #dbeafe;
}

#rd-rich-chat .profile-main-meta{
    min-width: 0;
}

#rd-rich-chat .profile-role-pill{
    display: inline-flex !important;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    border-radius: 10px !important;
    padding: 7px 12px !important;
    font-weight: 900 !important;
    font-size: 17px;
    color: #102033 !important;
    background: linear-gradient(180deg, #eaf5ff, #d8edff) !important;
    border: 1px solid rgba(31,145,255,.30) !important;
    box-shadow: 0 6px 16px rgba(31,145,255,.10);
    margin-bottom: 8px !important;
}

#rd-rich-chat .profile-badges{
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
}

#rd-rich-chat .profile-badge{
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    padding: 5px 7px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    line-height: 1;
    font-weight: 900 !important;
    color: #213247 !important;
    background: #ffffff !important;
    border: 1px solid rgba(31,145,255,.14) !important;
    box-shadow: 0 5px 14px rgba(15,23,42,.06);
}

#rd-rich-chat .profile-status-mini{
    margin-top: 8px;
    font-size: 13px;
    color: #475569;
}

#rd-rich-chat .profile-status-mini span{
    font-weight: 800;
    color: #d44e59;
}

#rd-rich-chat .profile-tabs{
    display: flex;
    gap: 6px;
    margin: 10px 0 12px;
    padding: 5px;
    border-radius: 10px;
    background: #eef6ff;
    border: 1px solid rgba(31,145,255,.14);
}

#rd-rich-chat .profile-tab{
    flex: 1;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #31516f;
    cursor: pointer;
    font-size: 12px;
    font-weight: 900;
    transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}

#rd-rich-chat .profile-tab.active{
    background: linear-gradient(180deg, #1594ed, #0879ca);
    color: #fff;
    box-shadow: 0 7px 18px rgba(8,121,202,.25);
}

#rd-rich-chat .profile-pane{
    display: none;
}

#rd-rich-chat .profile-pane.active{
    display: block;
}

#rd-rich-chat .profile-stat-grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
}

#rd-rich-chat .profile-stat-grid div{
    padding: 11px 12px !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    border: 1px solid rgba(31,145,255,.13) !important;
    box-shadow: 0 8px 20px rgba(15,23,42,.05);
    min-width: 0;
}

#rd-rich-chat .profile-stat-grid span{
    display: block;
    font-size: 10px !important;
    opacity: 1 !important;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .7px;
    font-weight: 800;
}

#rd-rich-chat .profile-stat-grid strong{
    display: block;
    margin-top: 5px !important;
    font-size: 17px !important;
    color: #102033 !important;
    line-height: 1.18;
    overflow-wrap: anywhere;
}

#rd-rich-chat .profile-status-line{
    display: none !important;
}

#rd-rich-chat .profile-list-title{
    font-weight: 900;
    color: #102033;
    margin: 2px 0 9px;
    font-size: 14px;
}

#rd-rich-chat .profile-mini-list{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#rd-rich-chat .profile-mini-item{
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 9px;
    align-items: start;
    padding: 10px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid rgba(31,145,255,.13);
    box-shadow: 0 8px 20px rgba(15,23,42,.05);
}

#rd-rich-chat .profile-mini-icon{
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #eaf5ff, #d8edff);
    border: 1px solid rgba(31,145,255,.18);
    font-size: 16px;
}

#rd-rich-chat .profile-mini-text{
    min-width: 0;
}

#rd-rich-chat .profile-mini-text strong{
    display: block;
    color: #0b4f85;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
}

#rd-rich-chat .profile-mini-text span{
    display: block;
    color: #475569;
    font-size: 12px;
    margin-top: 2px;
}

#rd-rich-chat .profile-mini-note{
    margin-top: 5px;
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(31,145,255,.07);
    color: #334155;
    font-size: 12px;
    line-height: 1.25;
}

#rd-rich-chat .profile-empty{
    padding: 14px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px dashed rgba(31,145,255,.25);
    color: #64748b;
    font-weight: 700;
    text-align: center;
}

@media (max-width: 640px){
    #rd-rich-chat .profile-card-modal{
        width: calc(100vw - 16px) !important;
        border-radius: 10px !important;
    }
    #rd-rich-chat .profile-card-body{
        padding: 12px !important;
    }
    #rd-rich-chat .profile-hero{
        grid-template-columns: 76px 1fr;
        gap: 10px;
        padding: 10px;
    }
    #rd-rich-chat .profile-avatar-wrap img{
        width: 72px !important;
        height: 72px !important;
        border-radius: 10px !important;
    }
    #rd-rich-chat .profile-role-pill{
        font-size: 14px;
        padding: 6px 9px !important;
    }
    #rd-rich-chat .profile-tabs{
        overflow-x: auto;
        justify-content: flex-start;
    }
    #rd-rich-chat .profile-tab{
        min-width: 96px;
        flex: 0 0 auto;
    }
    #rd-rich-chat .profile-stat-grid{
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================
   Ronny update: compactere profiel-popup header + minder scroll
   ========================================================== */
#rd-rich-chat .profile-card-modal{
    width: min(650px, calc(100vw - 24px)) !important;
    max-width: 650px !important;
    max-height: min(88vh, 780px) !important;
    border-radius: 12px !important;
}

#rd-rich-chat .profile-card-header{
    min-height: 0 !important;
    padding: 14px 16px !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

#rd-rich-chat .profile-header-main{
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    min-width: 0;
    flex: 1 1 auto;
}

#rd-rich-chat .profile-header-meta{
    min-width: 0;
}

#rd-rich-chat .profile-card-header h3, #rd-rich-chat .profile-card-header #profile-name{
    font-size: 24px !important;
    line-height: 1.08 !important;
    margin-bottom: 7px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#rd-rich-chat .profile-header-role-row{
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

#rd-rich-chat .profile-card-header .close-modal{
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255,255,255,.64);
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#rd-rich-chat .profile-card-body{
    padding: 12px 16px 16px !important;
    max-height: calc(min(88vh, 780px) - 126px) !important;
}

#rd-rich-chat .profile-hero{
    display: none !important;
}

#rd-rich-chat .profile-avatar-wrap img{
    width: 78px !important;
    height: 78px !important;
    border-radius: 11px !important;
    border-width: 3px !important;
    box-shadow: 0 10px 24px rgba(18, 43, 76, .18) !important;
}

#rd-rich-chat .profile-role-pill{
    font-size: 15px !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
    margin: 0 !important;
}

#rd-rich-chat .profile-badges{
    gap: 5px !important;
}

#rd-rich-chat .profile-badge{
    padding: 4px 6px !important;
    border-radius: 7px !important;
    font-size: 10px !important;
}

#rd-rich-chat .profile-status-mini{
    margin-top: 7px !important;
    font-size: 12px !important;
}

#rd-rich-chat .profile-tabs{
    margin: 0 0 10px !important;
    padding: 4px !important;
    border-radius: 9px !important;
}

#rd-rich-chat .profile-tab{
    height: 31px !important;
    border-radius: 7px !important;
    font-size: 11px !important;
}

#rd-rich-chat .profile-stat-grid{
    gap: 8px !important;
}

#rd-rich-chat .profile-stat-grid div{
    padding: 9px 10px !important;
    border-radius: 9px !important;
}

#rd-rich-chat .profile-stat-grid span{
    font-size: 9px !important;
    letter-spacing: .55px !important;
}

#rd-rich-chat .profile-stat-grid strong{
    margin-top: 3px !important;
    font-size: 15px !important;
}

#rd-rich-chat .profile-mini-item{
    padding: 8px !important;
    border-radius: 9px !important;
}

#rd-rich-chat .profile-mini-note{
    padding: 5px 7px !important;
    font-size: 11px !important;
}

@media (max-width: 640px){
    #rd-rich-chat .profile-card-modal{
        max-height: 92vh !important;
    }
    #rd-rich-chat .profile-card-header{
        padding: 12px !important;
    }
    #rd-rich-chat .profile-header-main{
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 10px;
    }
    #rd-rich-chat .profile-avatar-wrap img{
        width: 60px !important;
        height: 60px !important;
    }
    #rd-rich-chat .profile-card-header h3, #rd-rich-chat .profile-card-header #profile-name{
        font-size: 20px !important;
    }
    #rd-rich-chat .profile-header-role-row{
        gap: 5px;
    }
    #rd-rich-chat .profile-role-pill{
        font-size: 12px !important;
        padding: 5px 7px !important;
    }
    #rd-rich-chat .profile-badge{
        font-size: 9px !important;
        padding: 3px 5px !important;
    }
    #rd-rich-chat .profile-card-body{
        max-height: calc(92vh - 112px) !important;
        padding: 10px !important;
    }
}


/* ========================================================================== 
   Ronny update: duidelijke login/gast popup + registratieknop
   ========================================================================== */
#rd-rich-chat .auth-modal{
    padding: 14px !important;
    backdrop-filter: blur(3px);
}

#rd-rich-chat .auth-modal .login-modal-content{
    width: min(560px, calc(100vw - 28px)) !important;
    max-width: 560px !important;
    padding: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #f8fbff !important;
    color: #102033 !important;
    border: 1px solid rgba(93, 164, 235, .45) !important;
    box-shadow: 0 26px 70px rgba(15, 23, 42, .32) !important;
}

#rd-rich-chat .auth-modal .login-modal-content .modal-header{
    padding: 22px 26px 18px !important;
    margin: 0 !important;
    background: linear-gradient(135deg, #e1f1ff 0%, #f8fbff 62%, #fff7df 100%) !important;
    border-bottom: 1px solid rgba(121, 159, 203, .28) !important;
}

#rd-rich-chat .auth-modal .login-modal-content .modal-header h3{
    margin: 0 !important;
    font-size: 24px !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
    color: #102033 !important;
}

#rd-rich-chat .auth-modal .login-modal-content .close-modal{
    color: #6b7280 !important;
    font-size: 24px !important;
}

#rd-rich-chat .auth-modal .login-tabs{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin: 18px 26px 14px !important;
    padding: 5px !important;
    background: #e8f3ff !important;
    border: 1px solid rgba(121, 159, 203, .35) !important;
    border-radius: 12px !important;
}

#rd-rich-chat .auth-modal .login-tab{
    height: 44px !important;
    border: 1px solid transparent !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: #31506f !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

#rd-rich-chat .auth-modal .login-tab:hover{
    background: rgba(255,255,255,.65) !important;
    color: #0f4f86 !important;
}

#rd-rich-chat .auth-modal .login-tab.active{
    background: linear-gradient(180deg, #0ea5e9, #0284c7) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.8) !important;
    box-shadow: 0 8px 20px rgba(14, 165, 233, .22) !important;
    transform: translateY(-1px) !important;
}

#rd-rich-chat .auth-modal .login-pane{
    padding: 0 26px !important;
    gap: 10px !important;
}

#rd-rich-chat .auth-modal .login-pane .full-input{
    height: 50px !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid rgba(121, 159, 203, .55) !important;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .04) !important;
    font-size: 15px !important;
}

#rd-rich-chat .auth-modal .login-pane .full-input:focus{
    border-color: #0ea5e9 !important;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, .14), inset 0 1px 2px rgba(15, 23, 42, .04) !important;
}

#rd-rich-chat .auth-modal .login-submit-btn{
    height: 48px !important;
    border-radius: 11px !important;
    background: linear-gradient(180deg, #0ea5e9, #0284c7) !important;
    color: #ffffff !important;
    border: 0 !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    box-shadow: 0 10px 22px rgba(2, 132, 199, .22) !important;
    transition: transform .18s ease, filter .18s ease !important;
}

#rd-rich-chat .auth-modal .login-submit-btn:hover{
    filter: brightness(1.04) !important;
    transform: translateY(-1px) !important;
}

#rd-rich-chat .login-register-row{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 14px 26px 0 !important;
    padding: 13px 14px !important;
    border-radius: 12px !important;
    background: #eef7ff !important;
    border: 1px dashed rgba(14, 165, 233, .45) !important;
    color: #49657f !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

#rd-rich-chat .login-register-btn{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 32px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: #0277bd !important;
    border: 1px solid rgba(14, 165, 233, .45) !important;
    text-decoration: none !important;
    font-weight: 900 !important;
    transition: background .18s ease, transform .18s ease, color .18s ease !important;
}

#rd-rich-chat .login-register-btn:hover{
    background: #0ea5e9 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

#rd-rich-chat .auth-modal .login-error{
    min-height: 24px !important;
    margin: 12px 26px 20px !important;
    color: #dc3545 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-align: center !important;
}

@media (max-width: 520px){
    #rd-rich-chat .auth-modal .login-modal-content .modal-header{
        padding: 18px 18px 15px !important;
    }
    #rd-rich-chat .auth-modal .login-modal-content .modal-header h3{
        font-size: 21px !important;
    }
    #rd-rich-chat .auth-modal .login-tabs, #rd-rich-chat .auth-modal .login-register-row, #rd-rich-chat .auth-modal .login-error{
        margin-left: 18px !important;
        margin-right: 18px !important;
    }
    #rd-rich-chat .auth-modal .login-pane{
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
}


/* ========================================================================== 
   Thema achtergrond overlay uit chatconfig.php
   $bg en $bgtrans worden hier als lichte laag achter de chat gebruikt.
   ========================================================================== */
#rd-rich-chat::before{
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--cfg-custom-bg-image, none);
    background-size: var(--cfg-background-size, cover);
    background-position: var(--cfg-background-position, center);
    background-repeat: no-repeat;
    opacity: var(--cfg-custom-bg-opacity, 0);
}
#rd-rich-chat .app-layout, #rd-rich-chat .chat-header{
    position: relative;
    z-index: 1;
}

/* =========================================================
   GIPHY picker: interne scroll en volledige GIF-weergave
   ========================================================= */
#rd-rich-chat .gif-content{
    display: flex;
    flex-direction: column;
    width: min(90vw, 560px);
    max-width: 560px;
    max-height: calc(100vh - 64px);
    overflow: hidden;
}

#rd-rich-chat .gif-content .modal-header{
    flex: 0 0 auto;
}

#rd-rich-chat .gif-content .modal-body{
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
}

#rd-rich-chat .gif-grid{
    flex: 1 1 auto;
    min-height: 220px;
    height: auto;
    max-height: 440px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    align-content: start;
    padding-right: 5px;
}

#rd-rich-chat .gif-result{
    height: 100px;
    border: 1px solid var(--border, #d6dde3);
    background: #f3f6f8;
}

#rd-rich-chat .gif-thumb{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: #f3f6f8;
}

/* Compacte, altijd zichtbare scrollbar in het GIF-vak. */
#rd-rich-chat .gif-grid{
    scrollbar-width: thin;
    scrollbar-color: #8fa3b1 #e5ebef;
}

#rd-rich-chat .gif-grid::-webkit-scrollbar{
    width: 10px;
}

#rd-rich-chat .gif-grid::-webkit-scrollbar-track{
    background: #e5ebef;
    border-radius: 10px;
}

#rd-rich-chat .gif-grid::-webkit-scrollbar-thumb{
    background: #8fa3b1;
    border: 2px solid #e5ebef;
    border-radius: 10px;
}

#rd-rich-chat .gif-grid::-webkit-scrollbar-thumb:hover{
    background: #718895;
}

@media (max-width: 620px), (max-height: 650px){
    #rd-rich-chat .gif-content{
        width: calc(100vw - 24px);
        max-height: calc(100vh - 24px);
        padding: 14px;
    }

    #rd-rich-chat .gif-grid{
        min-height: 180px;
        max-height: none;
    }

    #rd-rich-chat .gif-result{
        height: 88px;
    }
}


/* ===== Chat UX upgrade juli 2026 ===== */
#rd-rich-chat .chat-gif{ cursor: zoom-in; loading: lazy; }
#rd-rich-chat .chat-mention{ display:inline-block; padding:1px 5px; border-radius:5px; background:rgba(35,118,190,.13); color:#17639d; font-weight:700; }
#rd-rich-chat .chat-mention.mention-me{ background:#fff0ad; color:#7b5300; box-shadow:0 0 0 1px rgba(180,120,0,.22); }
#rd-rich-chat .profile-hover-trigger{ cursor:pointer; }
#rd-rich-chat .profile-hover-card{ position:fixed; z-index:10050; width:270px; padding:12px; border:1px solid rgba(45,85,115,.22); border-radius:10px; background:rgba(255,255,255,.98); box-shadow:0 12px 35px rgba(0,0,0,.24); color:#1c2b34; pointer-events:none; }
#rd-rich-chat .hover-profile-head{display:flex;gap:10px;align-items:center}#rd-rich-chat .hover-profile-head img{width:48px;height:48px;border-radius:50%;object-fit:cover}#rd-rich-chat .hover-profile-head strong, #rd-rich-chat .hover-profile-head span{display:block}#rd-rich-chat .hover-profile-head span{font-size:12px;opacity:.7;margin-top:2px}#rd-rich-chat .hover-status{margin:9px 0;padding:7px 9px;border-radius:7px;background:#eef5f9;font-size:12px}#rd-rich-chat .hover-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}#rd-rich-chat .hover-stats span{text-align:center;padding:6px 3px;border-radius:6px;background:#f4f7f9;font-size:11px}#rd-rich-chat .hover-stats b{display:block;font-size:14px}#rd-rich-chat .hover-hint{text-align:center;margin-top:8px;font-size:10px;opacity:.58}#rd-rich-chat .hover-loading{font-size:12px;padding:8px}
#rd-rich-chat .profile-card-modal{border-radius:14px!important;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.35)!important}#rd-rich-chat .profile-card-header{background:linear-gradient(135deg,#edf6fb,#dfeef6);padding:16px!important}#rd-rich-chat .profile-card-body{background:#fff}#rd-rich-chat .profile-tabs{border-radius:8px;background:#eef3f6;padding:4px}#rd-rich-chat .profile-tab{border-radius:6px!important}#rd-rich-chat .profile-stat-grid>div{border-radius:9px!important;border:1px solid rgba(35,80,110,.1);background:#f7fafc!important}
#rd-rich-chat .gif-recent-wrap{margin:10px 0 7px}#rd-rich-chat .gif-section-title{font-size:12px;font-weight:700;margin-bottom:6px;color:#41515c}#rd-rich-chat .gif-recent{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}#rd-rich-chat .gif-recent .gif-result{height:64px}#rd-rich-chat .gif-recent img{width:100%;height:100%;object-fit:contain;background:#edf1f3}
#rd-rich-chat .media-viewer{background:rgba(5,12,18,.88)!important;z-index:11000}#rd-rich-chat .gif-viewer-content{position:relative;width:min(900px,94vw);height:min(720px,88vh);display:flex;align-items:center;justify-content:center}#rd-rich-chat .gif-viewer-content img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;box-shadow:0 10px 40px #000}#rd-rich-chat .gif-viewer-close, #rd-rich-chat .gif-viewer-nav{position:absolute;z-index:2;border:0;border-radius:50%;background:rgba(255,255,255,.9);color:#18242c;cursor:pointer}#rd-rich-chat .gif-viewer-close{right:8px;top:8px;width:40px;height:40px}#rd-rich-chat .gif-viewer-nav{top:50%;transform:translateY(-50%);width:46px;height:58px;font-size:34px}#rd-rich-chat .gif-viewer-nav.prev{left:8px}#rd-rich-chat .gif-viewer-nav.next{right:8px}
#rd-rich-chat .message-context-menu{position:absolute;z-index:12000;min-width:175px}#rd-rich-chat .message-context-menu li{cursor:pointer;padding:9px 12px}#rd-rich-chat .message-context-menu li:hover{background:#e8f2f8}
#rd-rich-chat .status-btn{white-space:nowrap}#rd-rich-chat .status-modal-content{max-width:430px}#rd-rich-chat .status-presets{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:14px}#rd-rich-chat .status-presets button{padding:10px;border:1px solid #c8d8e2;border-radius:7px;background:#f5f9fb;cursor:pointer;text-align:left}#rd-rich-chat .status-custom-row{display:flex;gap:7px}#rd-rich-chat .status-custom-row input{flex:1}#rd-rich-chat .status-custom-row button{border:0;border-radius:6px;padding:0 14px;background:#176a9e;color:#fff}#rd-rich-chat .status-label{display:block;font-size:12px;font-weight:700;margin-bottom:5px}#rd-rich-chat .status-clear{margin-top:9px}#rd-rich-chat .status-feedback{min-height:18px;margin-top:8px;font-size:12px}#rd-rich-chat .user-custom-status{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:145px;opacity:.72;margin-top:2px}#rd-rich-chat .user-custom-status span{margin-right:3px}
@media (max-width:700px){#rd-rich-chat .profile-hover-card{display:none!important}#rd-rich-chat .gif-recent{grid-template-columns:repeat(3,minmax(0,1fr))}#rd-rich-chat .status-presets{grid-template-columns:1fr}#rd-rich-chat .gif-viewer-nav{width:40px;height:50px}}


/* Hoverkaart en contextmenu-interactie fix */
#rd-rich-chat .profile-hover-card{
    pointer-events: none !important;
    z-index: 9000 !important;
}
#rd-rich-chat #context-menu, #rd-rich-chat .message-context-menu{
    z-index: 13000 !important;
}
#rd-rich-chat #profile-modal, #rd-rich-chat #status-modal, #rd-rich-chat #gif-modal, #rd-rich-chat #custom-emoji-modal, #rd-rich-chat #ban-modal{
    z-index: 14000;
}

/* ===== Professionele hover-profielkaart fix ===== */
#rd-rich-chat .profile-hover-card.hidden{
    display: none !important;
}

#rd-rich-chat .profile-hover-card{
    position: fixed !important;
    box-sizing: border-box;
    width: 300px !important;
    min-height: 0 !important;
    padding: 16px !important;
    overflow: visible !important;
    border: 1px solid rgba(31, 65, 88, .16) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .985) !important;
    box-shadow: 0 18px 48px rgba(14, 34, 48, .25) !important;
    color: #1d2b35 !important;
    font-family: inherit;
    line-height: 1.25;
    pointer-events: none !important;
    z-index: 12500 !important;
    opacity: 1 !important;
    transform: none !important;
    backdrop-filter: blur(10px);
}

#rd-rich-chat .profile-hover-card::after{
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    background: #fff;
    border: solid rgba(31, 65, 88, .13);
    transform: rotate(45deg);
}
#rd-rich-chat .profile-hover-card[data-placement="right"]::after{
    right: -7px; top: calc(50% - 6px); border-width: 1px 1px 0 0;
}
#rd-rich-chat .profile-hover-card[data-placement="left"]::after{
    left: -7px; top: calc(50% - 6px); border-width: 0 0 1px 1px;
}
#rd-rich-chat .profile-hover-card[data-placement="top"]::after{
    top: -7px; left: 24px; border-width: 1px 0 0 1px;
}
#rd-rich-chat .profile-hover-card[data-placement="bottom"]::after{
    bottom: -7px; left: 24px; border-width: 0 1px 1px 0;
}

#rd-rich-chat .profile-hover-card .hover-profile-head{
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0;
}
#rd-rich-chat .profile-hover-card .hover-profile-head img{
    flex: 0 0 54px;
    width: 54px !important;
    height: 54px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    background: #edf2f5;
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(42, 103, 143, .16);
}
#rd-rich-chat .profile-hover-card .hover-profile-identity{
    min-width: 0;
}
#rd-rich-chat .profile-hover-card .hover-profile-identity strong{
    display: block !important;
    overflow: hidden;
    color: #172630 !important;
    font-size: 21px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#rd-rich-chat .profile-hover-card .hover-profile-identity span{
    display: block !important;
    margin-top: 3px !important;
    overflow: hidden;
    color: #64727c !important;
    font-size: 13px !important;
    opacity: 1 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#rd-rich-chat .profile-hover-card .hover-status{
    display: flex !important;
    align-items: center;
    gap: 7px;
    margin: 12px 0 0 !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(45, 103, 140, .09);
    border-radius: 9px !important;
    background: #eef5f9 !important;
    color: #3a4e5b !important;
    font-size: 12px !important;
}
#rd-rich-chat .profile-hover-card .hover-stats{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin-top: 12px;
}
#rd-rich-chat .profile-hover-card .hover-stats span{
    display: flex !important;
    min-width: 0;
    padding: 9px 4px !important;
    flex-direction: column;
    align-items: center;
    border: 1px solid rgba(31, 65, 88, .06);
    border-radius: 9px !important;
    background: #f3f6f8 !important;
    color: #25343e !important;
    text-align: center !important;
}
#rd-rich-chat .profile-hover-card .hover-stats b{
    display: block !important;
    color: #1c2d38 !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}
#rd-rich-chat .profile-hover-card .hover-stats small{
    display: block;
    margin-top: 4px;
    color: #687680 !important;
    font-size: 10px !important;
    font-weight: 600;
}
#rd-rich-chat .profile-hover-card .hover-hint{
    margin-top: 11px !important;
    color: #71808a !important;
    font-size: 11px !important;
    text-align: center !important;
    opacity: 1 !important;
}

#rd-rich-chat #context-menu, #rd-rich-chat .message-context-menu{ z-index: 13000 !important; }
#rd-rich-chat #profile-modal, #rd-rich-chat #status-modal, #rd-rich-chat #gif-modal, #rd-rich-chat #custom-emoji-modal, #rd-rich-chat #ban-modal{ z-index: 14000 !important; }


/* HTML5 Webchat presentatie-laag. Functionaliteit blijft volledig uit chatbox(26). */
#rd-rich-chat{
  --h5-bg:#b9ceda;--h5-bg2:#dbe7ed;--h5-panel:#f7fafc;--h5-panel2:#e8f0f4;
  --h5-line:#b6c8d2;--h5-text:#17242c;--h5-muted:#60727d;--h5-accent:#2c6688;
  --h5-accent2:#204d68;--h5-bubble:#e7f0f5;--h5-mine:#d5e9f4;
  --h5-shadow:0 12px 34px rgba(25,54,70,.22);--h5-danger:#c94a4a;--h5-ok:#38a65a;
}
#rd-rich-chat *{box-sizing:border-box}
#rd-rich-chat, #rd-rich-chat{height:100%;margin:0}
#rd-rich-chat{font-family:Verdana,Arial,sans-serif!important;background:linear-gradient(145deg,var(--h5-bg2),var(--h5-bg))!important;color:var(--h5-text)!important;overflow:hidden;padding:10px;display:flex;flex-direction:column;gap:8px}
#rd-rich-chat::before{display:none!important}
#rd-rich-chat button, #rd-rich-chat input, #rd-rich-chat textarea, #rd-rich-chat select{font-family:inherit}
#rd-rich-chat .chat-header{position:relative!important;z-index:5!important;min-height:58px;height:58px;flex:0 0 58px;display:flex!important;align-items:center;justify-content:space-between;padding:8px 10px!important;border:1px solid var(--h5-line)!important;border-radius:4px!important;background:var(--h5-panel)!important;color:var(--h5-text)!important;box-shadow:var(--h5-shadow)!important}
#rd-rich-chat .html5-brand{display:flex;align-items:center;gap:10px;min-width:0}#rd-rich-chat .html5-brand-mark{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;background:linear-gradient(145deg,var(--h5-accent),var(--h5-accent2));color:#fff;font-weight:900;font-size:21px;border:1px solid rgba(0,0,0,.18);border-radius:4px}#rd-rich-chat .html5-brand-copy{display:flex;flex-direction:column;min-width:0}#rd-rich-chat .html5-brand-copy strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#rd-rich-chat .html5-brand-copy small{color:var(--h5-muted);font-size:11px;margin-top:3px}#rd-rich-chat .header-right{display:flex!important;align-items:center;gap:8px}#rd-rich-chat .html5-connection{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--h5-muted)}#rd-rich-chat .html5-connection i{width:9px;height:9px;border-radius:50%;background:var(--h5-ok)}
#rd-rich-chat .online-pill, #rd-rich-chat .tools-toggle, #rd-rich-chat .tool-btn, #rd-rich-chat .guest-logout-btn, #rd-rich-chat .chat-tab, #rd-rich-chat .leaderboard-tab, #rd-rich-chat .profile-tab, #rd-rich-chat .mod-tab, #rd-rich-chat .login-tab, #rd-rich-chat .login-submit-btn, #rd-rich-chat .login-register-btn, #rd-rich-chat .btn-secondary, #rd-rich-chat #btn-send, #rd-rich-chat .modal button, #rd-rich-chat .sidebar-header button, #rd-rich-chat .leaderboard-head button{border:1px solid var(--h5-line)!important;background:var(--h5-panel2)!important;color:var(--h5-text)!important;border-radius:3px!important;box-shadow:none!important;text-shadow:none!important}
#rd-rich-chat .online-pill{height:34px!important;padding:0 12px!important;font-size:12px!important}#rd-rich-chat .online-pill:hover, #rd-rich-chat .tools-toggle:hover, #rd-rich-chat .tool-btn:hover, #rd-rich-chat .chat-tab:hover, #rd-rich-chat .leaderboard-tab:hover, #rd-rich-chat .profile-tab:hover, #rd-rich-chat .mod-tab:hover, #rd-rich-chat .login-tab:hover{background:#dbe8ee!important}
#rd-rich-chat .app-layout{position:relative!important;z-index:1!important;display:grid!important;grid-template-columns:minmax(0,1fr) var(--cfg-online-list-width,190px)!important;gap:8px!important;flex:1!important;min-height:0!important;height:auto!important;background:transparent!important;border:0!important;padding:0!important}
#rd-rich-chat .chat-area, #rd-rich-chat .user-sidebar{border:1px solid var(--h5-line)!important;background:var(--h5-panel)!important;box-shadow:var(--h5-shadow)!important;border-radius:4px!important;min-height:0!important;overflow:hidden!important}
#rd-rich-chat .chat-area{display:flex!important;flex-direction:column!important;min-width:0!important}#rd-rich-chat .chat-tabs-bar{height:52px!important;min-height:52px!important;display:flex!important;align-items:center!important;gap:6px!important;padding:8px 10px!important;background:var(--h5-panel2)!important;border:0!important;border-bottom:1px solid var(--h5-line)!important}#rd-rich-chat .chat-tab{height:34px!important;padding:0 12px!important;font-size:12px!important}#rd-rich-chat .chat-tab.active{background:var(--h5-panel)!important;color:var(--h5-accent2)!important;border-color:var(--h5-accent)!important;font-weight:bold!important}
#rd-rich-chat .messages-container{flex:1!important;min-height:0!important;padding:12px!important;background:var(--h5-panel)!important;border:0!important;overflow-y:auto!important;scrollbar-color:var(--h5-line) transparent!important}#rd-rich-chat .private-messages-container{background:var(--h5-panel)!important}
#rd-rich-chat .message-row, #rd-rich-chat .chat-message, #rd-rich-chat .message-item{border-color:rgba(182,200,210,.65)!important;color:var(--h5-text)!important}#rd-rich-chat .message-content, #rd-rich-chat .message-bubble{background:var(--h5-bubble)!important;border:1px solid var(--h5-line)!important;border-radius:4px!important;color:var(--h5-text)!important;box-shadow:none!important}#rd-rich-chat .message-row.own .message-content, #rd-rich-chat .own-message .message-content{background:var(--h5-mine)!important}#rd-rich-chat .message-username, #rd-rich-chat .username, #rd-rich-chat .chat-name{color:var(--h5-accent2)!important;font-weight:bold!important}#rd-rich-chat .message-time, #rd-rich-chat .chat-time{color:var(--h5-muted)!important}#rd-rich-chat .message-actions button{color:var(--h5-muted)!important;background:transparent!important;border:0!important}
#rd-rich-chat .typing-bar{height:28px!important;min-height:28px!important;padding:6px 12px!important;color:var(--h5-muted)!important;font-size:11px!important;border-top:1px solid var(--h5-line)!important;background:var(--h5-panel2)!important}
#rd-rich-chat .input-area{background:var(--h5-panel2)!important;border:0!important;border-top:1px solid var(--h5-line)!important;padding:8px!important}#rd-rich-chat .chat-tools-head, #rd-rich-chat .chat-tools-row{gap:6px!important}#rd-rich-chat .chat-tools-head{margin-bottom:6px!important}#rd-rich-chat .chat-tools-row{padding:0 0 7px!important;border:0!important}#rd-rich-chat .tools-toggle, #rd-rich-chat .tool-btn, #rd-rich-chat .guest-logout-btn{min-height:32px!important;padding:0 9px!important;font-size:12px!important}#rd-rich-chat .color-tool input{width:22px!important;height:22px!important}
#rd-rich-chat .chat-input-row{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:7px!important}#rd-rich-chat .full-input, #rd-rich-chat #chat-input, #rd-rich-chat .modal input, #rd-rich-chat .modal textarea, #rd-rich-chat .modal select{min-width:0;border:1px solid var(--h5-line)!important;background:var(--h5-panel)!important;color:var(--h5-text)!important;border-radius:3px!important;outline:none!important;box-shadow:none!important}#rd-rich-chat .full-input:focus, #rd-rich-chat #chat-input:focus, #rd-rich-chat .modal input:focus, #rd-rich-chat .modal textarea:focus, #rd-rich-chat .modal select:focus{border-color:var(--h5-accent)!important;box-shadow:0 0 0 2px rgba(44,102,136,.14)!important}#rd-rich-chat #chat-input{height:40px!important;padding:9px 10px!important;font-size:14px!important}#rd-rich-chat #btn-send, #rd-rich-chat .login-submit-btn{background:linear-gradient(var(--h5-accent),var(--h5-accent2))!important;color:#fff!important;border-color:var(--h5-accent2)!important;font-weight:bold!important}#rd-rich-chat #btn-send{height:40px!important;padding:0 16px!important}
#rd-rich-chat .drop-zone{background:var(--h5-panel)!important;border:1px dashed var(--h5-accent)!important;color:var(--h5-muted)!important;border-radius:3px!important}
#rd-rich-chat .user-sidebar{display:flex!important;flex-direction:column!important}#rd-rich-chat .sidebar-header{height:52px!important;min-height:52px!important;padding:0 10px!important;background:var(--h5-panel2)!important;border-bottom:1px solid var(--h5-line)!important}#rd-rich-chat .sidebar-header h3{font-size:12px!important;color:var(--h5-text)!important;margin:0!important}#rd-rich-chat .sidebar-header button{display:none!important;width:30px!important;height:30px!important}#rd-rich-chat .user-sidebar-tools{background:var(--h5-panel)!important;border-bottom:1px solid var(--h5-line)!important}#rd-rich-chat .online-stats{color:var(--h5-muted)!important;font-size:11px!important}#rd-rich-chat .tmf-user-section{border-color:var(--h5-line)!important}#rd-rich-chat .tmf-section-title{color:var(--h5-muted)!important;background:var(--h5-panel2)!important;border-color:var(--h5-line)!important;font-size:11px!important}#rd-rich-chat .user-list{background:var(--h5-panel)!important}#rd-rich-chat .user-list li{background:transparent!important;border-color:rgba(182,200,210,.65)!important;color:var(--h5-text)!important;border-radius:0!important}#rd-rich-chat .user-list li:hover{background:var(--h5-panel2)!important}#rd-rich-chat .user-list li::before{background:var(--h5-ok)!important}#rd-rich-chat .user-name, #rd-rich-chat .online-name{color:var(--h5-text)!important}
#rd-rich-chat .modal{background:rgba(10,20,28,.62)!important;padding:18px!important}#rd-rich-chat .modal-content, #rd-rich-chat .overlay-box{background:var(--h5-panel)!important;color:var(--h5-text)!important;border:1px solid var(--h5-line)!important;border-radius:4px!important;box-shadow:var(--h5-shadow)!important}#rd-rich-chat .modal-header{background:var(--h5-panel2)!important;border-bottom:1px solid var(--h5-line)!important;color:var(--h5-text)!important}#rd-rich-chat .modal-header h3{font-size:17px!important}#rd-rich-chat .modal-body{color:var(--h5-text)!important}#rd-rich-chat .modal-small-text, #rd-rich-chat .help-hint{color:var(--h5-muted)!important}#rd-rich-chat .login-tab.active, #rd-rich-chat .leaderboard-tab.active, #rd-rich-chat .profile-tab.active, #rd-rich-chat .mod-tab.active{background:var(--h5-panel)!important;color:var(--h5-accent2)!important;border-color:var(--h5-accent)!important}#rd-rich-chat .login-register-btn{text-decoration:none!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}#rd-rich-chat .login-error{color:var(--h5-danger)!important}
#rd-rich-chat .context-menu{background:var(--h5-panel)!important;color:var(--h5-text)!important;border:1px solid var(--h5-line)!important;border-radius:3px!important;box-shadow:var(--h5-shadow)!important}#rd-rich-chat .context-menu .menu-header{background:var(--h5-panel2)!important;color:var(--h5-text)!important}#rd-rich-chat .context-menu li:hover{background:var(--h5-panel2)!important}#rd-rich-chat .text-danger{color:var(--h5-danger)!important}
#rd-rich-chat .leaderboard-panel{background:var(--h5-panel)!important;color:var(--h5-text)!important;border:1px solid var(--h5-line)!important;border-radius:4px!important;box-shadow:var(--h5-shadow)!important}#rd-rich-chat .leaderboard-head, #rd-rich-chat .leaderboard-tabs{background:var(--h5-panel2)!important;border-color:var(--h5-line)!important}#rd-rich-chat .leaderboard-item{border-color:var(--h5-line)!important}
#rd-rich-chat .profile-card-modal, #rd-rich-chat .media-modal-content, #rd-rich-chat .help-modal-content, #rd-rich-chat .login-modal-content, #rd-rich-chat .mod-modal-content{border-radius:4px!important}#rd-rich-chat .profile-stat-grid>div{background:var(--h5-panel2)!important;border:1px solid var(--h5-line)!important;border-radius:3px!important}#rd-rich-chat .profile-role-pill, #rd-rich-chat .profile-badges span{border-radius:3px!important}#rd-rich-chat .profile-mini-list>*{border-color:var(--h5-line)!important}
#rd-rich-chat .notice-toast{background:var(--h5-panel)!important;color:var(--h5-text)!important;border:1px solid var(--h5-line)!important;border-radius:4px!important;box-shadow:var(--h5-shadow)!important}#rd-rich-chat .notice-toast-title{color:var(--h5-accent2)!important}#rd-rich-chat .notice-toast-close{color:var(--h5-muted)!important;background:transparent!important}#rd-rich-chat .notice-toast-glow{display:none!important}#rd-rich-chat .pause-box{background:var(--h5-panel)!important;color:var(--h5-text)!important}#rd-rich-chat .pause-countdown, #rd-rich-chat .countdown{color:var(--h5-accent2)!important}#rd-rich-chat .pause-status-pill{background:var(--h5-panel)!important;color:var(--h5-accent2)!important;border:1px solid var(--h5-line)!important;border-radius:3px!important}
#rd-rich-chat #reply-preview-bar{background:var(--h5-panel)!important;color:var(--h5-text)!important;border:1px solid var(--h5-line)!important;border-radius:3px!important}#rd-rich-chat .reply-label{color:var(--h5-accent2)!important}#rd-rich-chat .emoji-grid, #rd-rich-chat .gif-grid{background:var(--h5-panel)!important}#rd-rich-chat .emoji-grid button, #rd-rich-chat .gif-grid>*{border-radius:3px!important}
#rd-rich-chat .channel-alert{background:var(--h5-panel)!important;color:var(--h5-text)!important;border:1px solid var(--h5-line)!important;border-radius:3px!important;box-shadow:var(--h5-shadow)!important}
#rd-rich-chat .loading-spinner{color:var(--h5-muted)!important}
@media (max-width:760px){#rd-rich-chat{padding:0;gap:0}#rd-rich-chat .chat-header{border-width:0 0 1px!important;border-radius:0!important;box-shadow:none!important}#rd-rich-chat .html5-connection span{display:none}#rd-rich-chat .app-layout{grid-template-columns:minmax(0,1fr)!important;gap:0!important}#rd-rich-chat .chat-area{border-width:0!important;border-radius:0!important;box-shadow:none!important}#rd-rich-chat .user-sidebar{position:fixed!important;top:0!important;right:0!important;bottom:0!important;width:min(310px,88vw)!important;z-index:100!important;border-radius:0!important;transform:translateX(105%);transition:transform .2s ease}#rd-rich-chat .user-sidebar.open, #rd-rich-chat .user-sidebar.active, #rd-rich-chat .user-sidebar.visible{transform:translateX(0)}#rd-rich-chat .sidebar-header button{display:block!important}#rd-rich-chat .chat-tools-row{overflow-x:auto!important;flex-wrap:nowrap!important}#rd-rich-chat .html5-brand-copy strong{font-size:13px}#rd-rich-chat .html5-brand-copy small{font-size:10px}#rd-rich-chat .online-pill{padding:0 9px!important}#rd-rich-chat .modal{padding:10px!important}#rd-rich-chat .modal-content{max-height:94vh!important}}

/* Kleurthema's van de oorspronkelijke HTML5-webchat */
#rd-rich-chat[data-theme="dark"]{
  --h5-bg:#1d2227;--h5-bg2:#343d45;--h5-panel:#181c20;--h5-panel2:#22292f;
  --h5-line:#3b4852;--h5-text:#eef3f6;--h5-muted:#a8b4bb;--h5-accent:#e0a72c;
  --h5-accent2:#b88112;--h5-bubble:#242c32;--h5-mine:#33311f;
  --h5-shadow:0 12px 34px rgba(0,0,0,.35);--h5-danger:#ef7373;--h5-ok:#48b868;
}
#rd-rich-chat[data-theme="green"]{
  --h5-bg:#87b45d;--h5-bg2:#c7dfa0;--h5-panel:#f8fbf3;--h5-panel2:#e5f0d8;
  --h5-line:#b6cc9d;--h5-text:#20301c;--h5-muted:#63725d;--h5-accent:#568529;
  --h5-accent2:#3d651a;--h5-bubble:#eef5e6;--h5-mine:#dceec9;
  --h5-shadow:0 12px 34px rgba(45,75,30,.22);--h5-danger:#b94040;--h5-ok:#36834b;
}
#rd-rich-chat .html5-theme-button{
  width:36px!important;height:34px!important;display:inline-grid!important;place-items:center!important;
  padding:0!important;border:1px solid var(--h5-line)!important;border-radius:3px!important;
  background:var(--h5-panel2)!important;color:var(--h5-text)!important;font-size:20px!important;
  line-height:1!important;cursor:pointer!important;box-shadow:none!important;
}
#rd-rich-chat .html5-theme-button:hover{background:var(--h5-bubble)!important}

/* Typ-indicator is bewust volledig verwijderd. */
#rd-rich-chat .typing-bar, #rd-rich-chat .mini-tag.typing, #rd-rich-chat .user-item.typing .user-name::after{display:none!important}

/* Login- en gastvenster exact in dezelfde HTML5-presentatiestijl. */
#rd-rich-chat .auth-modal{background:rgba(10,20,28,.62)!important}
#rd-rich-chat .auth-modal .login-modal-content{
  width:min(420px,100%)!important;max-width:420px!important;padding:0!important;overflow:hidden!important;
  background:var(--h5-panel)!important;color:var(--h5-text)!important;border:1px solid var(--h5-line)!important;
  border-radius:4px!important;box-shadow:var(--h5-shadow)!important;
}
#rd-rich-chat .auth-modal .login-modal-content .modal-header{
  min-height:58px!important;margin:0!important;padding:14px 16px!important;display:flex!important;
  align-items:center!important;justify-content:space-between!important;background:var(--h5-panel2)!important;
  border:0!important;border-bottom:1px solid var(--h5-line)!important;border-radius:0!important;
}
#rd-rich-chat .auth-modal .login-modal-content .modal-header h3{
  margin:0!important;color:var(--h5-text)!important;font-size:17px!important;font-weight:bold!important;
  text-shadow:none!important;
}
#rd-rich-chat .auth-modal .login-tabs{
  display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px!important;margin:16px 16px 0!important;
  padding:0!important;background:transparent!important;border:0!important;
}
#rd-rich-chat .auth-modal .login-tab{
  width:100%!important;min-height:36px!important;margin:0!important;padding:0 12px!important;
  border:1px solid var(--h5-line)!important;border-radius:3px!important;background:var(--h5-panel2)!important;
  color:var(--h5-text)!important;font-size:13px!important;font-weight:bold!important;
}
#rd-rich-chat .auth-modal .login-tab.active{
  background:var(--h5-panel)!important;color:var(--h5-accent2)!important;border-color:var(--h5-accent)!important;
}
#rd-rich-chat .auth-modal .login-pane{
  display:none!important;margin:0!important;padding:14px 16px 4px!important;background:transparent!important;border:0!important;
}
#rd-rich-chat .auth-modal .login-pane.active{display:block!important}
#rd-rich-chat .auth-modal .login-pane .full-input{
  width:100%!important;height:42px!important;margin:0 0 9px!important;padding:9px 10px!important;
  background:var(--h5-panel)!important;color:var(--h5-text)!important;border:1px solid var(--h5-line)!important;
  border-radius:3px!important;box-shadow:none!important;font-size:14px!important;
}
#rd-rich-chat .auth-modal .login-pane .full-input::placeholder{color:var(--h5-muted)!important;opacity:.9!important}
#rd-rich-chat .auth-modal .login-pane .full-input:focus{border-color:var(--h5-accent)!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--h5-accent) 18%,transparent)!important}
#rd-rich-chat .auth-modal .login-submit-btn{
  width:100%!important;height:42px!important;margin:3px 0 0!important;padding:0 15px!important;
  border:1px solid var(--h5-accent2)!important;border-radius:3px!important;
  background:linear-gradient(var(--h5-accent),var(--h5-accent2))!important;color:#fff!important;
  font-size:14px!important;font-weight:bold!important;box-shadow:none!important;
}
#rd-rich-chat .auth-modal .login-register-row{
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;
  margin:12px 16px 0!important;padding:12px!important;border:1px solid var(--h5-line)!important;
  border-radius:3px!important;background:var(--h5-panel2)!important;color:var(--h5-muted)!important;
  font-size:12px!important;font-weight:normal!important;
}
#rd-rich-chat .auth-modal .login-register-btn{
  min-height:32px!important;padding:0 11px!important;border:1px solid var(--h5-line)!important;border-radius:3px!important;
  background:var(--h5-panel)!important;color:var(--h5-accent2)!important;font-weight:bold!important;transform:none!important;
}
#rd-rich-chat .auth-modal .login-register-btn:hover{background:var(--h5-bubble)!important;color:var(--h5-accent2)!important;transform:none!important}
#rd-rich-chat .auth-modal .login-error{
  min-height:24px!important;margin:8px 16px 14px!important;padding:3px 0!important;color:var(--h5-danger)!important;
  font-size:12px!important;font-weight:bold!important;text-align:left!important;
}
@media (max-width:520px){
  #rd-rich-chat .auth-modal .login-modal-content .modal-header{padding:13px 14px!important}
  #rd-rich-chat .auth-modal .login-modal-content .modal-header h3{font-size:16px!important}
  #rd-rich-chat .auth-modal .login-tabs{margin:14px 14px 0!important}
  #rd-rich-chat .auth-modal .login-pane{padding:12px 14px 3px!important}
  #rd-rich-chat .auth-modal .login-register-row, #rd-rich-chat .auth-modal .login-error{margin-left:14px!important;margin-right:14px!important}
}

/* Compacte iframe-layout: alle beschikbare ruimte gaat naar de chat. */
#rd-rich-chat{padding:0!important;gap:0!important}
#rd-rich-chat .chat-header{min-height:46px!important;height:46px!important;flex:0 0 46px!important;padding:4px 7px!important;border-width:0 0 1px!important;border-radius:0!important;box-shadow:none!important}
#rd-rich-chat .html5-brand{gap:7px!important}#rd-rich-chat .html5-brand-mark{width:32px!important;height:32px!important;flex-basis:32px!important;font-size:18px!important}#rd-rich-chat .html5-brand-copy strong{font-size:13px!important}#rd-rich-chat .html5-brand-copy small{font-size:10px!important;margin-top:1px!important}
#rd-rich-chat .header-right{gap:5px!important}#rd-rich-chat .html5-connection{font-size:10px!important}#rd-rich-chat .online-pill{display:none!important}
#rd-rich-chat .app-layout{grid-template-columns:minmax(0,1fr) 260px!important;gap:0!important}
#rd-rich-chat .chat-area, #rd-rich-chat .user-sidebar{border-radius:0!important;box-shadow:none!important}
#rd-rich-chat .chat-area{border-width:0 1px 0 0!important}#rd-rich-chat .user-sidebar{border-width:0!important}
#rd-rich-chat .chat-tabs-bar{height:40px!important;min-height:40px!important;padding:4px 7px!important;gap:4px!important}#rd-rich-chat .chat-tab{height:30px!important;padding:0 10px!important}
#rd-rich-chat .messages-container{padding:6px 8px!important}
#rd-rich-chat .input-area{padding:5px 7px 6px!important}#rd-rich-chat .chat-tools-head{margin-bottom:4px!important;gap:4px!important}#rd-rich-chat .chat-tools-row{gap:4px!important;padding:0 0 4px!important}
#rd-rich-chat .tools-toggle, #rd-rich-chat .tool-btn, #rd-rich-chat .guest-logout-btn{min-height:27px!important;height:27px!important;padding:0 7px!important;font-size:11px!important}#rd-rich-chat .color-tool input{width:18px!important;height:18px!important}
#rd-rich-chat .chat-input-row{gap:5px!important}#rd-rich-chat #chat-input{height:36px!important;padding:7px 9px!important;font-size:13px!important}#rd-rich-chat #btn-send{height:36px!important;padding:0 13px!important;font-size:12px!important}
#rd-rich-chat .sidebar-header{height:40px!important;min-height:40px!important;padding:0 7px!important}#rd-rich-chat .sidebar-header h3{font-size:11px!important}#rd-rich-chat .user-sidebar-tools{padding:3px 7px!important}#rd-rich-chat .online-stats{font-size:10px!important}#rd-rich-chat .tmf-section-title{font-size:10px!important;padding-top:4px!important;padding-bottom:4px!important}

/* Thema-keuzemenu. */
#rd-rich-chat .html5-theme-picker{position:relative;display:inline-flex;align-items:center}#rd-rich-chat .html5-theme-button{width:31px!important;height:31px!important;font-size:18px!important}
#rd-rich-chat .html5-theme-menu{position:absolute;top:calc(100% + 5px);right:0;z-index:250;width:178px;padding:4px;background:var(--h5-panel)!important;border:1px solid var(--h5-line)!important;border-radius:3px!important;box-shadow:var(--h5-shadow)!important}
#rd-rich-chat .html5-theme-menu.hidden{display:none!important}#rd-rich-chat .html5-theme-option{width:100%;min-height:31px;display:flex;align-items:center;gap:8px;padding:4px 7px!important;border:0!important;border-radius:2px!important;background:transparent!important;color:var(--h5-text)!important;font-size:11px!important;text-align:left;cursor:pointer}#rd-rich-chat .html5-theme-option:hover, #rd-rich-chat .html5-theme-option.active{background:var(--h5-panel2)!important}#rd-rich-chat .html5-theme-option.active{font-weight:bold}#rd-rich-chat .theme-swatch{width:18px;height:18px;flex:0 0 18px;border:1px solid rgba(0,0,0,.22);border-radius:2px}#rd-rich-chat .theme-swatch-light{background:linear-gradient(135deg,#f7fafc 50%,#2c6688 50%)}#rd-rich-chat .theme-swatch-dark{background:linear-gradient(135deg,#181c20 50%,#e0a72c 50%)}#rd-rich-chat .theme-swatch-green{background:linear-gradient(135deg,#f8fbf3 50%,#568529 50%)}#rd-rich-chat .theme-swatch-wk2026{background:linear-gradient(135deg,#092b50 0 45%,#fff 45% 60%,#d71920 60%)}#rd-rich-chat .theme-swatch-wk2026-orange{background:linear-gradient(135deg,#ff7900 0 58%,#fff 58% 72%,#153e75 72%)}

/* Extra WK 2026-thema's. */
#rd-rich-chat[data-theme="wk2026"]{--h5-bg:#071f38;--h5-bg2:#123f69;--h5-panel:#f8fbff;--h5-panel2:#e8f0f7;--h5-line:#a9bed1;--h5-text:#10283d;--h5-muted:#60768a;--h5-accent:#d71920;--h5-accent2:#a50f16;--h5-bubble:#eef4f9;--h5-mine:#dbeafb;--h5-shadow:0 10px 28px rgba(3,24,43,.25);--h5-danger:#c83238;--h5-ok:#2e9d59}
#rd-rich-chat[data-theme="wk2026"] .chat-header{background:linear-gradient(90deg,#0a3158,#174f82)!important;color:#fff!important}#rd-rich-chat[data-theme="wk2026"] .html5-brand-copy small, #rd-rich-chat[data-theme="wk2026"] .html5-connection{color:#dfeaf4!important}#rd-rich-chat[data-theme="wk2026"] .html5-theme-button{background:#fff!important;color:#123f69!important}
#rd-rich-chat[data-theme="wk2026-orange"]{--h5-bg:#df6100;--h5-bg2:#ff9a2f;--h5-panel:#fffaf4;--h5-panel2:#ffead4;--h5-line:#e6b17e;--h5-text:#332013;--h5-muted:#7a5b45;--h5-accent:#f36c00;--h5-accent2:#c94f00;--h5-bubble:#fff1e2;--h5-mine:#ffd7ad;--h5-shadow:0 10px 28px rgba(113,47,0,.25);--h5-danger:#c63e31;--h5-ok:#269558}
#rd-rich-chat[data-theme="wk2026-orange"] .chat-header{background:linear-gradient(90deg,#f36c00,#ff941f)!important;color:#fff!important}#rd-rich-chat[data-theme="wk2026-orange"] .html5-brand-mark{background:linear-gradient(145deg,#153e75,#09284e)!important}#rd-rich-chat[data-theme="wk2026-orange"] .html5-brand-copy small, #rd-rich-chat[data-theme="wk2026-orange"] .html5-connection{color:#fff2e6!important}#rd-rich-chat[data-theme="wk2026-orange"] .html5-theme-button{background:#fff8ef!important;color:#d75b00!important}

@media (max-width:980px){#rd-rich-chat .html5-connection{display:none!important}#rd-rich-chat .html5-brand-copy small{display:none!important}}
@media (max-width:760px){#rd-rich-chat .online-pill{display:inline-grid!important;place-items:center!important;width:31px!important;height:31px!important;padding:0!important;font-size:0!important}#rd-rich-chat .online-pill::before{content:"☰";font-size:16px}#rd-rich-chat .app-layout{grid-template-columns:minmax(0,1fr)!important}#rd-rich-chat .chat-area{border-right:0!important}#rd-rich-chat .html5-brand-copy small{display:none!important}#rd-rich-chat .chat-header{min-height:42px!important;height:42px!important;flex-basis:42px!important}#rd-rich-chat .html5-brand-mark{width:29px!important;height:29px!important;flex-basis:29px!important}#rd-rich-chat .html5-theme-button{width:29px!important;height:29px!important}#rd-rich-chat .chat-tools-head{overflow-x:auto!important;flex-wrap:nowrap!important}#rd-rich-chat .tools-toggle{white-space:nowrap!important}}
@media (max-width:430px){#rd-rich-chat .html5-brand-copy strong{max-width:150px}#rd-rich-chat .tools-toggle, #rd-rich-chat .tool-btn{padding:0 6px!important}#rd-rich-chat .input-area{padding-left:4px!important;padding-right:4px!important}#rd-rich-chat #btn-send{padding:0 10px!important}}


/* Header verwijderd: de chat benut de volledige iframehoogte. */
#rd-rich-chat .chat-header{display:none!important}
#rd-rich-chat{padding:0!important;gap:0!important}
#rd-rich-chat .app-layout{height:100vh!important;min-height:100vh!important;max-height:100vh!important}

/* Thema-keuze staat compact tussen de bedieningsknoppen. */
#rd-rich-chat .chat-tools-head{position:relative!important;align-items:center!important}
#rd-rich-chat .tool-theme-button{min-width:29px!important;width:29px!important;height:27px!important;min-height:27px!important;padding:0!important;border:1px solid var(--h5-line)!important;background:var(--h5-panel)!important;color:var(--h5-text)!important;border-radius:3px!important;font-size:16px!important;box-shadow:none!important}
#rd-rich-chat .tool-theme-button:hover{background:var(--h5-panel2)!important}
#rd-rich-chat .chat-tools-head .html5-theme-menu{top:calc(100% + 5px)!important;left:0!important;right:auto!important}
#rd-rich-chat .mobile-users-toggle{display:none!important}

/* Ruime maar vaste emoji-popup met intern scrollvlak. */
#rd-rich-chat .emoji-modal-content{width:min(520px,calc(100vw - 24px))!important;max-width:520px!important;height:min(520px,calc(100vh - 30px))!important;max-height:520px!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}
#rd-rich-chat .emoji-modal-content .modal-header{flex:0 0 auto!important}
#rd-rich-chat .emoji-modal-body{display:flex!important;flex-direction:column!important;min-height:0!important;flex:1 1 auto!important;padding:8px!important;background:var(--h5-panel)!important}
#rd-rich-chat .emoji-help{flex:0 0 auto!important;margin:0 0 7px!important;color:var(--h5-muted)!important;font-size:11px!important}
#rd-rich-chat .emoji-grid{display:grid!important;grid-template-columns:repeat(8,minmax(0,1fr))!important;align-content:start!important;justify-content:stretch!important;gap:5px!important;padding:1px 2px 3px!important;overflow-y:auto!important;overflow-x:hidden!important;min-height:0!important;max-height:none!important;background:transparent!important;scrollbar-gutter:stable!important}
#rd-rich-chat .custom-emoji-btn{display:grid!important;place-items:center!important;width:100%!important;aspect-ratio:1/1!important;min-width:0!important;padding:3px!important;margin:0!important;border:1px solid var(--h5-line)!important;border-radius:3px!important;background:var(--h5-panel2)!important;color:var(--h5-text)!important;font-size:24px!important;line-height:1!important;cursor:pointer!important;transition:background .12s ease,transform .12s ease!important}
#rd-rich-chat .custom-emoji-btn:hover, #rd-rich-chat .custom-emoji-btn:focus-visible{background:var(--h5-bubble)!important;transform:translateY(-1px)!important;outline:none!important;border-color:var(--h5-accent)!important}

@media (max-width:760px){
  #rd-rich-chat .mobile-users-toggle{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:29px!important;width:29px!important;padding:0!important}
  #rd-rich-chat .emoji-modal-content{height:min(480px,calc(100vh - 16px))!important}
  #rd-rich-chat .emoji-grid{grid-template-columns:repeat(7,minmax(0,1fr))!important}
}
@media (max-width:430px){
  #rd-rich-chat .emoji-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:4px!important}
  #rd-rich-chat .custom-emoji-btn{font-size:22px!important}
}

/* 2026-06 compactie en zichtbaarheid verbeteringen */
/* Thema-menu opent boven de knop, zodat alle keuzes binnen het iframe blijven. */
#rd-rich-chat .chat-tools-head .html5-theme-menu{
  top:auto!important;
  bottom:calc(100% + 5px)!important;
  left:0!important;
  right:auto!important;
  max-height:min(250px,calc(100vh - 90px))!important;
  overflow-y:auto!important;
}

/* De gebruikerskolom vult exact de gridkolom; geen lege gekleurde strook ernaast. */
#rd-rich-chat .app-layout{width:100%!important;max-width:none!important}
#rd-rich-chat .user-sidebar{width:auto!important;min-width:0!important;max-width:none!important;margin:0!important}

/* Compactere emoji-kiezer met kleiner opschrift en intern scrollvlak. */
#rd-rich-chat .emoji-modal-content{
  width:min(500px,calc(100vw - 20px))!important;
  max-width:500px!important;
  height:min(350px,calc(100vh - 24px))!important;
  max-height:350px!important;
}
#rd-rich-chat .emoji-modal-content .modal-header{min-height:36px!important;padding:5px 8px!important}
#rd-rich-chat .emoji-modal-content .modal-header h3{font-size:13px!important;line-height:1.2!important;margin:0!important}
#rd-rich-chat .emoji-modal-content .modal-header .close-modal{width:27px!important;height:27px!important;min-height:27px!important;padding:0!important;font-size:13px!important}
#rd-rich-chat .emoji-modal-body{padding:6px!important}
#rd-rich-chat .emoji-help{font-size:10px!important;margin-bottom:4px!important}
#rd-rich-chat .emoji-grid{gap:4px!important}
#rd-rich-chat .custom-emoji-btn{font-size:22px!important;padding:2px!important}

/* Privétabs: duidelijk sluitkruis en opvallende animatie bij een nieuw bericht. */
#rd-rich-chat .chat-tab .close-tab{
  display:inline-grid!important;
  place-items:center!important;
  flex:0 0 18px!important;
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  min-height:18px!important;
  padding:0!important;
  border:1px solid var(--h5-line)!important;
  border-radius:3px!important;
  background:var(--h5-panel2)!important;
  color:var(--h5-text)!important;
  font-size:15px!important;
  font-weight:900!important;
  line-height:16px!important;
}
#rd-rich-chat .chat-tab .close-tab:hover{background:var(--h5-danger)!important;color:#fff!important;border-color:var(--h5-danger)!important}
#rd-rich-chat .chat-tab.fixed .close-tab{display:none!important}
#rd-rich-chat .chat-tab.blink{animation:privateMessageAttention .75s ease-in-out infinite alternate!important;border-color:var(--h5-accent)!important}
@keyframes privateMessageAttention{
  from{transform:translateY(0);box-shadow:0 0 0 rgba(0,0,0,0);background:var(--h5-panel2)}
  to{transform:translateY(-2px);box-shadow:0 0 0 3px color-mix(in srgb,var(--h5-accent) 28%,transparent);background:var(--h5-mine)}
}

@media (max-width:760px){
  #rd-rich-chat .emoji-modal-content{height:min(330px,calc(100vh - 14px))!important;max-height:330px!important}
}


/* Instelbare compacte online-lijst en kleinere tekstgroottebediening */
@media (min-width:709px){
  #rd-rich-chat .app-layout{grid-template-columns:minmax(0,1fr) var(--cfg-online-list-width,190px)!important}
  #rd-rich-chat .user-sidebar{width:var(--cfg-online-list-width,190px)!important;flex-basis:var(--cfg-online-list-width,190px)!important}
}
#rd-rich-chat .font-size-tools{display:inline-flex!important;align-items:center!important;gap:2px!important}
#rd-rich-chat .font-size-tools .font-size-btn{
  width:23px!important;min-width:23px!important;height:23px!important;min-height:23px!important;
  padding:0!important;font-size:11px!important;line-height:21px!important;border-radius:2px!important
}
#rd-rich-chat .font-size-tools .font-size-reset{font-size:10px!important}
#rd-rich-chat .reaction-counts{display:flex!important;flex-wrap:wrap!important;gap:4px!important;margin-top:4px!important}
#rd-rich-chat .reaction-count{margin:0!important;padding:2px 5px!important;border:1px solid var(--h5-line)!important;border-radius:3px!important;background:var(--h5-panel2)!important;cursor:help!important;font-size:11px!important}
#rd-rich-chat .reaction-count .reaction-emoji{font-size:14px!important}

/* =========================================================
   Update: online-secties volledig breed + uitgesproken WK 2026 thema's
   ========================================================= */

/* De groepskoppen en scheidingslijnen sluiten over de hele kolombreedte aan. */
#rd-rich-chat .user-sidebar .tmf-user-section{
  width:100%!important;
  margin:0!important;
  padding:9px 0 0!important;
  border-top:1px solid var(--h5-line)!important;
}
#rd-rich-chat .user-sidebar .tmf-user-section:first-of-type{border-top:0!important}
#rd-rich-chat .user-sidebar .tmf-section-title{
  display:flex!important;
  align-items:center!important;
  width:100%!important;
  min-height:36px!important;
  margin:0!important;
  padding:6px 12px!important;
  border:0!important;
  border-bottom:1px solid var(--h5-line)!important;
  background:var(--h5-panel2)!important;
  line-height:1.15!important;
}
#rd-rich-chat .user-sidebar .grouped-user-list{
  width:100%!important;
  margin:0!important;
  padding:0 0 8px!important;
}
#rd-rich-chat .user-sidebar .user-item, #rd-rich-chat .user-sidebar .user-list li{
  width:100%!important;
  margin:0!important;
  padding-left:10px!important;
  padding-right:8px!important;
  border-bottom:1px solid var(--h5-line)!important;
}
#rd-rich-chat .user-sidebar .user-sidebar-tools{
  width:100%!important;
  margin:0!important;
  padding:6px 10px!important;
}
#rd-rich-chat .user-sidebar .online-stats{width:100%!important;margin:0!important}

/* WK 2026: duidelijke, kleurrijke FIFA-achtige uitstraling met goed contrast. */
#rd-rich-chat[data-theme="wk2026"]{
  --h5-bg:#073d36;
  --h5-bg2:#25e4c4;
  --h5-panel:#fffdf8;
  --h5-panel2:#edf7ff;
  --h5-line:#2f72d8;
  --h5-text:#18213a;
  --h5-muted:#53617d;
  --h5-accent:#e20a17;
  --h5-accent2:#9f0710;
  --h5-bubble:#f1edff;
  --h5-mine:#dffcf1;
  --h5-shadow:0 8px 24px rgba(0,35,65,.24);
  --h5-danger:#d80d1a;
  --h5-ok:#00a868;
}
#rd-rich-chat[data-theme="wk2026"] body{
  background:
    linear-gradient(135deg,rgba(123,0,245,.96) 0 9%,transparent 9% 18%,rgba(38,87,255,.95) 18% 28%,transparent 28% 38%,rgba(232,0,26,.94) 38% 49%,transparent 49% 60%,rgba(183,246,0,.94) 60% 72%,transparent 72%),
    linear-gradient(145deg,#20e2c0,#06493e)!important;
}
#rd-rich-chat[data-theme="wk2026"] .chat-area, #rd-rich-chat[data-theme="wk2026"] .user-sidebar{
  border-color:#2f72d8!important;
  box-shadow:0 0 0 2px rgba(255,255,255,.35),0 10px 26px rgba(0,31,62,.28)!important;
}
#rd-rich-chat[data-theme="wk2026"] .chat-tabs-bar, #rd-rich-chat[data-theme="wk2026"] .input-area, #rd-rich-chat[data-theme="wk2026"] .user-sidebar-tools{
  background:linear-gradient(90deg,#e9f4ff,#fff4f6)!important;
  border-color:#2f72d8!important;
}
#rd-rich-chat[data-theme="wk2026"] .chat-tab.active{
  color:#fff!important;
  background:linear-gradient(135deg,#e20a17,#9f0710)!important;
  border-color:#8a0610!important;
}
#rd-rich-chat[data-theme="wk2026"] .tools-toggle, #rd-rich-chat[data-theme="wk2026"] .tool-btn, #rd-rich-chat[data-theme="wk2026"] .guest-logout-btn{
  background:#fff!important;
  border-color:#2f72d8!important;
  color:#17264a!important;
}
#rd-rich-chat[data-theme="wk2026"] .tools-toggle:hover, #rd-rich-chat[data-theme="wk2026"] .tool-btn:hover{background:#e8f1ff!important}
#rd-rich-chat[data-theme="wk2026"] #btn-send{
  background:linear-gradient(135deg,#e20a17,#9f0710)!important;
  border-color:#80050d!important;
}
#rd-rich-chat[data-theme="wk2026"] .messages-container{
  background:
    linear-gradient(rgba(255,255,255,.94),rgba(255,255,255,.94)),
    repeating-linear-gradient(135deg,#6f1cff 0 22px,#25e4c4 22px 44px,#e20a17 44px 66px,#b7f600 66px 88px)!important;
}
#rd-rich-chat[data-theme="wk2026"] .tmf-section-title{
  color:#fff!important;
  background:linear-gradient(90deg,#6f1cff,#2f72d8)!important;
  border-bottom-color:#17264a!important;
}
#rd-rich-chat[data-theme="wk2026"] .online-stats{
  color:#17264a!important;
  font-weight:900!important;
}
#rd-rich-chat[data-theme="wk2026"] .user-item:hover{background:#e9f3ff!important}
#rd-rich-chat[data-theme="wk2026"] .reaction-count{background:#fff!important;border-color:#2f72d8!important}
#rd-rich-chat[data-theme="wk2026"] .html5-theme-menu{border-color:#2f72d8!important}
#rd-rich-chat[data-theme="wk2026"] .tool-theme-button{background:#fff!important;color:#6f1cff!important;border-color:#2f72d8!important}

/* WK 2026 Oranje: nadrukkelijk Oranje, met donkerblauw en rood-wit-blauw accenten. */
#rd-rich-chat[data-theme="wk2026-orange"]{
  --h5-bg:#d95a00;
  --h5-bg2:#ff9b28;
  --h5-panel:#fffaf3;
  --h5-panel2:#ffe9cf;
  --h5-line:#e87918;
  --h5-text:#2d241d;
  --h5-muted:#755641;
  --h5-accent:#f36c00;
  --h5-accent2:#bd4200;
  --h5-bubble:#fff0df;
  --h5-mine:#ffd4a6;
  --h5-shadow:0 8px 24px rgba(116,48,0,.25);
}
#rd-rich-chat[data-theme="wk2026-orange"] body{
  background:
    linear-gradient(120deg,rgba(255,255,255,.2) 0 12%,transparent 12% 26%,rgba(21,62,117,.22) 26% 37%,transparent 37% 53%,rgba(255,255,255,.18) 53% 67%,transparent 67%),
    linear-gradient(145deg,#ff9b28,#dc5b00)!important;
}
#rd-rich-chat[data-theme="wk2026-orange"] .chat-area, #rd-rich-chat[data-theme="wk2026-orange"] .user-sidebar{border-color:#e87918!important}
#rd-rich-chat[data-theme="wk2026-orange"] .chat-tabs-bar, #rd-rich-chat[data-theme="wk2026-orange"] .input-area, #rd-rich-chat[data-theme="wk2026-orange"] .user-sidebar-tools{background:linear-gradient(90deg,#fff1df,#ffe2c1)!important}
#rd-rich-chat[data-theme="wk2026-orange"] .tmf-section-title{
  color:#fff!important;
  background:linear-gradient(90deg,#f36c00,#d95300)!important;
  border-bottom-color:#153e75!important;
}
#rd-rich-chat[data-theme="wk2026-orange"] .chat-tab.active, #rd-rich-chat[data-theme="wk2026-orange"] #btn-send{
  color:#fff!important;
  background:linear-gradient(135deg,#f36c00,#bd4200)!important;
  border-color:#a83a00!important;
}
#rd-rich-chat[data-theme="wk2026-orange"] .tools-toggle, #rd-rich-chat[data-theme="wk2026-orange"] .tool-btn, #rd-rich-chat[data-theme="wk2026-orange"] .guest-logout-btn{
  background:#fffaf3!important;
  border-color:#e87918!important;
}
#rd-rich-chat[data-theme="wk2026-orange"] .messages-container{
  background:
    linear-gradient(rgba(255,250,243,.95),rgba(255,250,243,.95)),
    repeating-linear-gradient(135deg,#f36c00 0 28px,#fff 28px 38px,#153e75 38px 48px)!important;
}
#rd-rich-chat[data-theme="wk2026-orange"] .online-stats{color:#153e75!important;font-weight:900!important}
#rd-rich-chat[data-theme="wk2026-orange"] .tool-theme-button{background:#fff!important;color:#d95300!important;border-color:#e87918!important}

/* ========================================================================
   WK 2026 leesbaarheid en compacte online-koppen
   ======================================================================== */

/* Het WK-patroon blijft zichtbaar als achtergrondaccent, maar niet dwars
   door de inhoud van ieder afzonderlijk chatbericht. */
#rd-rich-chat[data-theme="wk2026"] .msg-row, #rd-rich-chat[data-theme="wk2026-orange"] .msg-row{
  background:#fff!important;
  border-bottom:1px solid var(--h5-line)!important;
}
#rd-rich-chat[data-theme="wk2026"] .msg-row.own{
  background:#f5fbff!important;
}
#rd-rich-chat[data-theme="wk2026-orange"] .msg-row.own{
  background:#fff8ef!important;
}

/* Ook de gebruikersregels blijven rustig en goed leesbaar. */
#rd-rich-chat[data-theme="wk2026"] .user-item, #rd-rich-chat[data-theme="wk2026-orange"] .user-item, #rd-rich-chat[data-theme="wk2026"] .user-list li, #rd-rich-chat[data-theme="wk2026-orange"] .user-list li{
  background:#fff!important;
}
#rd-rich-chat[data-theme="wk2026"] .user-item:hover, #rd-rich-chat[data-theme="wk2026"] .user-list li:hover{
  background:#edf6ff!important;
}
#rd-rich-chat[data-theme="wk2026-orange"] .user-item:hover, #rd-rich-chat[data-theme="wk2026-orange"] .user-list li:hover{
  background:#fff3e5!important;
}

/* De teller boven de online-lijst weer compact en op één regel. */
#rd-rich-chat .user-sidebar .online-stats, #rd-rich-chat #online-stats{
  box-sizing:border-box!important;
  min-height:30px!important;
  margin:0!important;
  padding:5px 10px!important;
  font-size:13px!important;
  font-weight:800!important;
  line-height:19px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* DJ / VIPS / CHATTERS niet langer als hoge banner tonen. */
#rd-rich-chat .user-sidebar .tmf-section-title, #rd-rich-chat .tmf-section-title{
  box-sizing:border-box!important;
  width:100%!important;
  min-height:30px!important;
  margin:8px 0 4px!important;
  padding:5px 10px!important;
  font-size:12px!important;
  font-weight:900!important;
  line-height:20px!important;
  letter-spacing:.45px!important;
}
#rd-rich-chat .user-sidebar .tmf-user-section:first-child .tmf-section-title{
  margin-top:4px!important;
}

/* De WK-koppen behouden hun kleur, maar niet de overdreven hoogte. */
#rd-rich-chat[data-theme="wk2026"] .tmf-section-title, #rd-rich-chat[data-theme="wk2026-orange"] .tmf-section-title{
  min-height:30px!important;
  padding:5px 10px!important;
  line-height:20px!important;
  font-size:12px!important;
}

/* Sidebar zelf neutraal wit, zodat het patroon niet onrustig doorloopt. */
#rd-rich-chat[data-theme="wk2026"] .user-sidebar, #rd-rich-chat[data-theme="wk2026-orange"] .user-sidebar{
  background:#fff!important;
}

/* ========================================================================
   Aansluitende chatregels en online-secties
   ======================================================================== */

/* Berichtenvenster gebruikt de volledige beschikbare breedte. */
#rd-rich-chat .messages-container, #rd-rich-chat .private-messages-container{
  box-sizing:border-box!important;
  padding-left:0!important;
  padding-right:0!important;
  gap:0!important;
}

/* Iedere chatregel sluit links en rechts aan; alleen de inhoud krijgt
   een kleine prettige inspringing. */
#rd-rich-chat .msg-row, #rd-rich-chat .msg-row.own, #rd-rich-chat .msg-row.other{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  margin-bottom:0!important;
  padding-left:11px!important;
  padding-right:8px!important;
  border-radius:0!important;
  align-self:stretch!important;
}

/* Naam en profielicoon iets losser van de linkerrand. */
#rd-rich-chat .msg-name, #rd-rich-chat .msg-row.own .msg-name{
  box-sizing:border-box!important;
  margin-left:0!important;
  padding-left:1px!important;
}

#rd-rich-chat .msg-bubble, #rd-rich-chat .msg-row.own .msg-bubble, #rd-rich-chat .msg-row.other .msg-bubble, #rd-rich-chat .msg-row.dj .msg-bubble, #rd-rich-chat .msg-row.own.dj .msg-bubble{
  width:100%!important;
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
}

/* Online-kolom: geen binnenstroken meer tussen rand, koppen, lijsten en lijnen. */
#rd-rich-chat .user-sidebar{
  box-sizing:border-box!important;
  padding-left:0!important;
  padding-right:0!important;
}

#rd-rich-chat .user-sidebar .user-sidebar-tools, #rd-rich-chat .user-sidebar .tmf-user-section, #rd-rich-chat .user-sidebar .tmf-section-title, #rd-rich-chat .user-sidebar .grouped-user-list, #rd-rich-chat .user-sidebar .user-list, #rd-rich-chat .user-sidebar .user-item, #rd-rich-chat .user-sidebar .user-list li{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}

#rd-rich-chat .user-sidebar .tmf-user-section{
  padding-left:0!important;
  padding-right:0!important;
  margin-bottom:0!important;
}

#rd-rich-chat .user-sidebar .tmf-section-title{
  margin-left:0!important;
  margin-right:0!important;
  padding-left:14px!important;
  padding-right:10px!important;
  border-radius:0!important;
}

#rd-rich-chat .user-sidebar .grouped-user-list, #rd-rich-chat .user-sidebar .user-list{
  padding-left:0!important;
  padding-right:0!important;
}

#rd-rich-chat .user-sidebar .user-item, #rd-rich-chat .user-sidebar .user-list li{
  padding-left:14px!important;
  padding-right:8px!important;
  border-radius:0!important;
}

#rd-rich-chat .user-sidebar .user-sidebar-tools, #rd-rich-chat .user-sidebar .online-stats, #rd-rich-chat #online-stats{
  margin-left:0!important;
  margin-right:0!important;
  border-radius:0!important;
}


/* Online aantallen compact onder de invoerbalk; geen aparte kop meer boven de gebruikerslijst. */
#rd-rich-chat .composer-online-stats{
  box-sizing:border-box!important;
  width:100%!important;
  margin:3px 0 0!important;
  padding:0 2px!important;
  border:0!important;
  background:transparent!important;
  color:var(--h5-muted)!important;
  font-size:9px!important;
  font-weight:600!important;
  line-height:1.15!important;
  text-align:left!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* De gebruikersgroepen beginnen direct bovenaan zodat rechts meer verticale ruimte overblijft. */
#rd-rich-chat .user-sidebar > .tmf-user-section:first-of-type{
  margin-top:0!important;
}

/* Online aantallen uiterst compact onder de invoerbalk. */
#rd-rich-chat #chat-form > #online-stats.composer-online-stats{
  display:block!important;
  box-sizing:border-box!important;
  width:100%!important;
  min-height:0!important;
  height:8px!important;
  margin:0!important;
  padding:0 2px!important;
  border:0!important;
  background:transparent!important;
  font-size:7px!important;
  font-weight:400!important;
  line-height:8px!important;
  letter-spacing:0!important;
  color:var(--h5-muted)!important;
  text-align:left!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* ========================================================================
   Compacte online-lijst en volledig instelbaar chatvenster
   ======================================================================== */

/* Geen harde of dubbele strepen meer in de gebruikerslijst. */
#rd-rich-chat .user-sidebar, #rd-rich-chat .user-sidebar .tmf-user-section, #rd-rich-chat .user-sidebar .grouped-user-list, #rd-rich-chat .user-sidebar .user-list, #rd-rich-chat .user-sidebar .user-item, #rd-rich-chat .user-sidebar .user-list li{
  border-top:0!important;
  border-bottom:0!important;
  box-shadow:none!important;
}

/* Groepen sluiten direct op elkaar aan en starten meteen bovenaan. */
#rd-rich-chat .user-sidebar{
  gap:0!important;
}
#rd-rich-chat .user-sidebar .tmf-user-section{
  margin:0!important;
  padding:0!important;
}
#rd-rich-chat .user-sidebar .tmf-user-section + .tmf-user-section{
  margin-top:5px!important;
}
#rd-rich-chat .user-sidebar .tmf-section-title{
  min-height:0!important;
  height:auto!important;
  margin:0!important;
  padding:3px 14px!important;
  font-size:10px!important;
  line-height:14px!important;
  letter-spacing:.35px!important;
  border:0!important;
}
#rd-rich-chat .user-sidebar .grouped-user-list, #rd-rich-chat .user-sidebar .user-list{
  margin:0!important;
  padding:0!important;
}
#rd-rich-chat .user-sidebar .user-item, #rd-rich-chat .user-sidebar .user-list li{
  margin:0!important;
  padding-top:5px!important;
  padding-bottom:5px!important;
}

/* Alle afmetingen van de chatregels komen uit chatconfig.php. */
#rd-rich-chat .messages-container, #rd-rich-chat .private-messages-container{
  gap:var(--cfg-chat-message-gap,0px)!important;
}
#rd-rich-chat .msg-row, #rd-rich-chat .msg-row.own, #rd-rich-chat .msg-row.other{
  box-sizing:border-box!important;
  margin:0!important;
  padding:var(--cfg-chat-padding-v,5px) var(--cfg-chat-padding-right,8px) var(--cfg-chat-padding-v,5px) var(--cfg-chat-padding-left,12px)!important;
  background:rgba(255,255,255,var(--cfg-chat-message-bg-opacity,.90))!important;
  border:0!important;
  border-bottom:var(--cfg-chat-divider-width,1px) solid rgba(21,86,145,var(--cfg-chat-divider-opacity,.10))!important;
}
#rd-rich-chat .msg-row:last-child{
  border-bottom-color:transparent!important;
}
#rd-rich-chat .msg-name, #rd-rich-chat .msg-row.own .msg-name{
  min-height:var(--cfg-chat-icon-size,24px)!important;
  gap:5px!important;
  font-size:var(--cfg-chat-name-size,13px)!important;
  line-height:var(--cfg-chat-icon-size,24px)!important;
}
#rd-rich-chat .msg-name span, #rd-rich-chat .msg-name .msg-author-name, #rd-rich-chat .msg-row.own .msg-name span, #rd-rich-chat .msg-row.own .msg-author-name{
  font-size:var(--cfg-chat-name-size,13px)!important;
  line-height:var(--cfg-chat-icon-size,24px)!important;
}
#rd-rich-chat .msg-time, #rd-rich-chat .msg-name .msg-time{
  font-size:var(--cfg-chat-time-size,11px)!important;
  line-height:var(--cfg-chat-icon-size,24px)!important;
}
#rd-rich-chat .msg-role-icon, #rd-rich-chat .msg-row.dj .msg-role-icon, #rd-rich-chat .msg-row.vip .msg-role-icon{
  width:var(--cfg-chat-icon-size,24px)!important;
  height:var(--cfg-chat-icon-size,24px)!important;
  min-width:var(--cfg-chat-icon-size,24px)!important;
  flex-basis:var(--cfg-chat-icon-size,24px)!important;
  font-size:calc(var(--cfg-chat-icon-size,24px) * .58)!important;
}
#rd-rich-chat .msg-bubble, #rd-rich-chat .msg-row.own .msg-bubble, #rd-rich-chat .msg-row.other .msg-bubble, #rd-rich-chat .msg-row.dj .msg-bubble, #rd-rich-chat .msg-row.own.dj .msg-bubble{
  padding-left:calc(var(--cfg-chat-icon-size,24px) + 8px)!important;
  font-size:var(--cfg-chat-message-size,15px)!important;
  line-height:var(--cfg-chat-line-height,1.28)!important;
}
#rd-rich-chat .bubble-content, #rd-rich-chat .bubble-content > span:not(.irc-cmd), #rd-rich-chat .bubble-content span:not(.irc-cmd), #rd-rich-chat .msg-bubble span:not(.irc-cmd){
  font-size:var(--cfg-chat-message-size,15px)!important;
  line-height:var(--cfg-chat-line-height,1.28)!important;
}
#rd-rich-chat .msg-bubble img:not(.msg-pfp), #rd-rich-chat .bubble-content img, #rd-rich-chat .chat-media img, #rd-rich-chat .chat-image, #rd-rich-chat .chat-gif{
  max-width:min(100%,var(--cfg-chat-media-max-width,260px))!important;
  height:auto!important;
}

/* Ook in de WK-thema's blijven de chatregels rustig en licht transparant. */
#rd-rich-chat[data-theme="wk2026"] .msg-row, #rd-rich-chat[data-theme="wk2026-orange"] .msg-row{
  background:rgba(255,255,255,var(--cfg-chat-message-bg-opacity,.90))!important;
}

/* ========================================================================
   Definitieve chatconfig-koppeling voor ALLE HTML5-thema's
   - oude/thema-borders volledig uitschakelen
   - scheidingslijn uitsluitend via chatconfig.php tekenen
   ======================================================================== */
#rd-rich-chat html .messages-container .msg-row, #rd-rich-chat html .private-messages-container .msg-row, #rd-rich-chat[data-theme] .messages-container .msg-row, #rd-rich-chat[data-theme] .private-messages-container .msg-row{
  position:relative!important;
  border:0!important;
  border-top:0!important;
  border-right:0!important;
  border-bottom:0!important;
  border-left:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:rgba(255,255,255,var(--cfg-chat-message-bg-opacity,.90))!important;
}

/* De lijn is een eigen laag. Hierdoor kunnen thema-CSS en oudere regels de
   ingestelde dikte of transparantie niet meer overschrijven. */
#rd-rich-chat html .messages-container .msg-row::after, #rd-rich-chat html .private-messages-container .msg-row::after, #rd-rich-chat[data-theme] .messages-container .msg-row::after, #rd-rich-chat[data-theme] .private-messages-container .msg-row::after{
  content:""!important;
  position:absolute!important;
  z-index:1!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  width:auto!important;
  height:var(--cfg-chat-divider-width,1px)!important;
  min-height:0!important;
  max-height:var(--cfg-chat-divider-width,1px)!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:var(--cfg-chat-divider-color,rgba(21,86,145,.10))!important;
  opacity:1!important;
  pointer-events:none!important;
}

#rd-rich-chat html .messages-container .msg-row:last-child::after, #rd-rich-chat html .private-messages-container .msg-row:last-child::after{
  display:none!important;
}

/* Lege online-groepen nemen absoluut geen ruimte in. */
#rd-rich-chat .user-sidebar .tmf-user-section.hidden-section{
  display:none!important;
  margin:0!important;
  padding:0!important;
  min-height:0!important;
}



/* ========================================================================
   Aangepaste achtergrond uit chatconfig.php
   Een ingevulde $bg heeft altijd voorrang op de achtergrond van elk thema.
   $bgtrans bepaalt uitsluitend de zichtbaarheid van die afbeelding.
   ======================================================================== */
#rd-rich-chat[data-custom-bg="1"] body{
  background:#eef2f5!important;
  isolation:isolate!important;
}
#rd-rich-chat[data-custom-bg="1"] body::before{
  display:block!important;
  content:""!important;
  position:fixed!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  background-color:transparent!important;
  background-image:var(--cfg-custom-bg-image,none)!important;
  background-size:var(--cfg-background-size,cover)!important;
  background-position:var(--cfg-background-position,center)!important;
  background-repeat:no-repeat!important;
  opacity:var(--cfg-custom-bg-opacity,0)!important;
}
#rd-rich-chat[data-custom-bg="1"] .app-layout, #rd-rich-chat[data-custom-bg="1"] .chat-header{
  position:relative!important;
  z-index:1!important;
}

/* Thema-patronen en vaste paneelkleuren mogen de ingestelde afbeelding
   niet meer afdekken. Berichtvakken behouden hun configureerbare dekking. */
#rd-rich-chat[data-custom-bg="1"] .chat-area, #rd-rich-chat[data-custom-bg="1"] .user-sidebar{
  background:rgba(255,255,255,.34)!important;
}
#rd-rich-chat[data-custom-bg="1"] .messages-container, #rd-rich-chat[data-custom-bg="1"] .private-messages-container{
  background:transparent!important;
  background-image:none!important;
}
#rd-rich-chat[data-custom-bg="1"] .user-sidebar .grouped-user-list, #rd-rich-chat[data-custom-bg="1"] .user-sidebar .user-list{
  background:rgba(255,255,255,.72)!important;
}


/* ========================================================================
   Laatste compacte input-zone + veilig themamenu
   ======================================================================== */
#rd-rich-chat .input-area{
  flex:0 0 var(--cfg-input-area-height,110px)!important;
  min-height:70px!important;
  max-height:var(--cfg-input-area-height,110px)!important;
  padding:4px 7px 3px!important;
  overflow:visible!important;
}
#rd-rich-chat #chat-form{
  height:100%!important;
  min-height:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  gap:4px!important;
  padding:5px!important;
}
#rd-rich-chat .chat-tools-head{
  flex:0 0 auto!important;
  margin:0!important;
  gap:4px!important;
}
#rd-rich-chat .chat-tools-row{
  flex:0 0 auto!important;
  margin:0!important;
  padding:0!important;
  gap:4px!important;
}
#rd-rich-chat .chat-input-row{
  flex:0 0 auto!important;
  gap:5px!important;
  margin:0!important;
}
#rd-rich-chat #chat-input, #rd-rich-chat #btn-send{
  height:34px!important;
  min-height:34px!important;
}
#rd-rich-chat #chat-input{
  padding:6px 9px!important;
}
#rd-rich-chat #btn-send{
  padding:0 13px!important;
}
#rd-rich-chat #chat-form > #online-stats.composer-online-stats{
  flex:0 0 7px!important;
  height:7px!important;
  min-height:0!important;
  margin:0!important;
  padding:0 1px!important;
  font-size:7px!important;
  font-weight:400!important;
  line-height:7px!important;
}
#rd-rich-chat #reply-preview-bar, #rd-rich-chat .pause-status-pill, #rd-rich-chat .drop-zone{
  flex:0 0 auto!important;
}

/* Het themamenu wordt met JavaScript vast in het scherm geplaatst.
   Daardoor blijft het ook in een klein iframe/mobiel venster goed zichtbaar. */
#rd-rich-chat .html5-theme-menu{
  position:fixed!important;
  z-index:9999!important;
  width:178px!important;
  max-width:calc(100vw - 12px)!important;
  max-height:min(220px,calc(100vh - 12px))!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
}
@media (max-width:430px){
  #rd-rich-chat .input-area{padding-left:4px!important;padding-right:4px!important}
  #rd-rich-chat #chat-form{padding:4px!important;gap:3px!important}
  #rd-rich-chat .html5-theme-menu{width:170px!important;max-height:min(190px,calc(100vh - 10px))!important}
}

/* ========================================================================
   Correctie: input-zone altijd volledige breedte gebruiken
   ======================================================================== */
#rd-rich-chat .input-area{
  width:100%!important;
  max-width:none!important;
  align-self:stretch!important;
}
#rd-rich-chat #chat-form{
  width:100%!important;
  max-width:none!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
}
#rd-rich-chat .chat-tools-head, #rd-rich-chat .chat-tools-row, #rd-rich-chat .chat-input-row{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}
#rd-rich-chat .chat-tools-head, #rd-rich-chat .chat-tools-row{
  justify-content:flex-start!important;
}
#rd-rich-chat .chat-input-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
}
#rd-rich-chat #chat-input{
  width:100%!important;
  max-width:none!important;
}
#rd-rich-chat #btn-send{
  width:auto!important;
  white-space:nowrap!important;
}
@media (max-width:520px){
  #rd-rich-chat .chat-input-row{grid-template-columns:minmax(0,1fr) auto!important;gap:5px!important}
  #rd-rich-chat #btn-send{padding-left:10px!important;padding-right:10px!important}
}
@media (max-width:360px){
  #rd-rich-chat .chat-input-row{grid-template-columns:1fr!important}
  #rd-rich-chat #btn-send{width:100%!important}
}

/* ========================================================================
   Gesplitste achtergronden uit chatconfig.php
   $bg_chat blijft altijd achter de linker chatkant + input.
   $bg_online blijft altijd achter de rechter online-lijst.
   Zo hoeft een brede achtergrondafbeelding niet meer exact mee te stretchen.
   ======================================================================== */
#rd-rich-chat[data-split-bg="1"] body::before{
  display:none!important;
}
#rd-rich-chat[data-split-bg="1"] .app-layout{
  background:transparent!important;
}
#rd-rich-chat[data-split-bg="1"] .chat-area, #rd-rich-chat[data-split-bg="1"] .user-sidebar{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  background-color:transparent!important;
  background-image:none!important;
}
#rd-rich-chat[data-split-bg="1"] .chat-area::before, #rd-rich-chat[data-split-bg="1"] .user-sidebar::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  background-repeat:no-repeat!important;
  background-size:var(--cfg-background-size,cover)!important;
  background-position:var(--cfg-background-position,center center)!important;
  opacity:var(--cfg-custom-bg-opacity,1)!important;
}
#rd-rich-chat[data-split-bg="1"] .chat-area::before{
  background-image:var(--cfg-chat-image,none)!important;
}
#rd-rich-chat[data-split-bg="1"] .user-sidebar::before{
  background-image:var(--cfg-sidebar-image,none)!important;
}
#rd-rich-chat[data-split-bg="1"] .chat-area > *, #rd-rich-chat[data-split-bg="1"] .user-sidebar > *{
  position:relative!important;
  z-index:1!important;
}
#rd-rich-chat[data-split-bg="1"] .messages-container, #rd-rich-chat[data-split-bg="1"] .private-messages-container, #rd-rich-chat[data-split-bg="1"] .input-area, #rd-rich-chat[data-split-bg="1"] .user-sidebar .grouped-user-list, #rd-rich-chat[data-split-bg="1"] .user-sidebar .user-list{
  background-image:none!important;
}
#rd-rich-chat[data-split-bg="1"] .messages-container, #rd-rich-chat[data-split-bg="1"] .private-messages-container{
  background-color:transparent!important;
}
#rd-rich-chat[data-split-bg="1"] .input-area{
  background-color:var(--cfg-input-area-background,rgba(255,255,255,.72))!important;
}
#rd-rich-chat[data-split-bg="1"] .user-sidebar .grouped-user-list, #rd-rich-chat[data-split-bg="1"] .user-sidebar .user-list{
  background-color:transparent!important;
}

/* ========================================================================
   Ronny update: style-menu altijd zichtbaar + online-lijst vanuit chatconfig
   ======================================================================== */
/* Het menu wordt door chat.js direct onder <body> geplaatst en met fixed
   coördinaten gepositioneerd. Zo wordt het niet meer door input-area/chat-area
   clipping verborgen in een iframe of klein venster. */
#rd-rich-chat body > .html5-theme-menu{
  position:fixed!important;
  z-index:2147483000!important;
  display:block!important;
  width:178px!important;
  max-width:calc(100vw - 12px)!important;
  max-height:min(220px,calc(100vh - 12px))!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  background:var(--h5-panel)!important;
  border:1px solid var(--h5-line)!important;
  border-radius:3px!important;
  box-shadow:0 14px 34px rgba(0,0,0,.28)!important;
}
#rd-rich-chat body > .html5-theme-menu.hidden{display:none!important}

/* Online-lijst: alle belangrijke groottes komen nu uit chatconfig.php. */
#rd-rich-chat .user-sidebar .tmf-user-section{
  margin:0!important;
  padding:0!important;
  border:0!important;
}
#rd-rich-chat .user-sidebar .tmf-user-section + .tmf-user-section{
  margin-top:var(--cfg-online-section-gap,5px)!important;
}
#rd-rich-chat .user-sidebar .tmf-section-title{
  box-sizing:border-box!important;
  width:100%!important;
  min-height:var(--cfg-online-section-title-height,22px)!important;
  height:var(--cfg-online-section-title-height,22px)!important;
  margin:0!important;
  padding:0 8px 0 var(--cfg-online-section-title-padding-left,14px)!important;
  display:flex!important;
  align-items:center!important;
  border:0!important;
  font-size:var(--cfg-online-section-title-size,10px)!important;
  font-weight:var(--cfg-online-section-title-weight,800)!important;
  line-height:1!important;
}
#rd-rich-chat .user-sidebar .grouped-user-list, #rd-rich-chat .user-sidebar .user-list{
  margin:0!important;
  padding:0!important;
  background:transparent!important;
}
#rd-rich-chat .user-sidebar .user-item, #rd-rich-chat .user-sidebar .user-list li.user-item{
  box-sizing:border-box!important;
  width:100%!important;
  margin:0!important;
  padding:var(--cfg-online-user-padding-v,5px) var(--cfg-online-user-padding-right,6px) var(--cfg-online-user-padding-v,5px) var(--cfg-online-user-padding-left,10px)!important;
  border:0!important;
  box-shadow:none!important;
  background:rgba(255,255,255,var(--cfg-online-user-bg-opacity,.88))!important;
}
#rd-rich-chat .user-sidebar .user-item + .user-item, #rd-rich-chat .user-sidebar .user-list li.user-item + li.user-item{
  margin-top:0!important;
}
#rd-rich-chat .user-sidebar .user-avatar, #rd-rich-chat .user-sidebar .sidebar-pfp{
  width:var(--cfg-online-avatar-size,22px)!important;
  height:var(--cfg-online-avatar-size,22px)!important;
  min-width:var(--cfg-online-avatar-size,22px)!important;
  flex-basis:var(--cfg-online-avatar-size,22px)!important;
}
#rd-rich-chat .user-sidebar .user-name, #rd-rich-chat .user-sidebar .user-name a, #rd-rich-chat #section-chatters .user-item .user-name, #rd-rich-chat #section-chatters .user-item .user-name a, #rd-rich-chat #online-list .user-item .user-name, #rd-rich-chat #online-list .user-item .user-name a{
  font-size:var(--cfg-online-user-name-size,12px)!important;
  font-weight:var(--cfg-online-user-name-weight,800)!important;
  line-height:1.15!important;
}

/* Bij gesplitste achtergronden moeten alle gebruikersregels een rustig vlak
   houden, ook in volledig scherm. */
#rd-rich-chat[data-split-bg="1"] .user-sidebar .user-item, #rd-rich-chat[data-split-bg="1"] .user-sidebar .user-list li.user-item, #rd-rich-chat[data-custom-bg="1"] .user-sidebar .user-item, #rd-rich-chat[data-custom-bg="1"] .user-sidebar .user-list li.user-item{
  background:rgba(255,255,255,var(--cfg-online-user-bg-opacity,.88))!important;
}

@media (max-width:430px){
  #rd-rich-chat body > .html5-theme-menu{width:170px!important;max-height:min(190px,calc(100vh - 10px))!important}
}

/* ========================================================================
   Ronny update: DJ-verzoek/stemactie berichten beter leesbaar
   ======================================================================== */
#rd-rich-chat .msg-row.request-notice{
  background:rgba(255,255,255,.88)!important;
  box-shadow:inset 4px 0 0 var(--cfg-accent,#008ee8), 0 1px 0 rgba(255,255,255,.45)!important;
}
#rd-rich-chat .msg-row.request-notice .msg-name{
  color:#102235!important;
}
#rd-rich-chat .msg-row.request-notice .msg-author-name{
  color:#0b78bd!important;
  text-shadow:0 1px 0 rgba(255,255,255,.65)!important;
}
#rd-rich-chat .msg-row.request-notice .bubble-content > span:not(.irc-cmd), #rd-rich-chat .msg-row.request-notice .bubble-content > span *{
  color:#09233b!important;
  font-weight:800!important;
  text-shadow:0 1px 0 rgba(255,255,255,.75)!important;
}
#rd-rich-chat .msg-row.request-notice .bubble-content > span::before{
  content:"";
  display:inline-block;
  width:0;
}
#rd-rich-chat .chat-vote-card{
  margin-top:7px!important;
  max-width:min(620px, calc(100% - 6px))!important;
  padding:12px 14px!important;
  border-radius:8px!important;
  background:rgba(255,255,255,.92)!important;
  border:1px solid rgba(0,126,211,.25)!important;
  box-shadow:0 4px 14px rgba(0,0,0,.08), inset 4px 0 0 var(--cfg-accent,#008ee8)!important;
}
#rd-rich-chat .chat-vote-info strong{
  color:#0a78bd!important;
  font-size:11px!important;
  font-weight:900!important;
  letter-spacing:.75px!important;
  text-shadow:none!important;
}
#rd-rich-chat .chat-vote-info span{
  color:#102235!important;
  font-size:14px!important;
  font-weight:900!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  line-height:1.25!important;
}
#rd-rich-chat .chat-vote-info small{
  color:#40556c!important;
  opacity:1!important;
  font-size:13px!important;
  font-weight:700!important;
}
#rd-rich-chat .chat-vote-btn{
  min-width:128px!important;
  color:#101820!important;
  border:1px solid rgba(0,0,0,.10)!important;
  background:linear-gradient(180deg,#ffe86f,#ffb300)!important;
  box-shadow:0 6px 14px rgba(0,0,0,.18)!important;
}
#rd-rich-chat[data-theme="wk2026"] .msg-row.request-notice{
  background:rgba(255,255,255,.90)!important;
  box-shadow:inset 4px 0 0 #6d2cff, 0 1px 0 rgba(255,255,255,.45)!important;
}
#rd-rich-chat[data-theme="wk2026"] .msg-row.request-notice .msg-author-name, #rd-rich-chat[data-theme="wk2026"] .chat-vote-info strong{
  color:#1868ff!important;
}
#rd-rich-chat[data-theme="wk2026"] .chat-vote-card{
  border-color:rgba(24,104,255,.32)!important;
  box-shadow:0 4px 14px rgba(0,0,0,.08), inset 4px 0 0 #6d2cff!important;
}
#rd-rich-chat[data-theme="wk2026-orange"] .msg-row.request-notice{
  background:rgba(255,255,255,.90)!important;
  box-shadow:inset 4px 0 0 #f05a00, 0 1px 0 rgba(255,255,255,.45)!important;
}
#rd-rich-chat[data-theme="wk2026-orange"] .msg-row.request-notice .msg-author-name, #rd-rich-chat[data-theme="wk2026-orange"] .chat-vote-info strong{
  color:#d24b00!important;
}
#rd-rich-chat[data-theme="wk2026-orange"] .chat-vote-card{
  border-color:rgba(240,90,0,.36)!important;
  box-shadow:0 4px 14px rgba(0,0,0,.08), inset 4px 0 0 #f05a00!important;
}
#rd-rich-chat[data-theme="dark"] .msg-row.request-notice{
  background:rgba(7,13,21,.86)!important;
  box-shadow:inset 4px 0 0 #63c4f0, 0 1px 0 rgba(255,255,255,.08)!important;
}
#rd-rich-chat[data-theme="dark"] .msg-row.request-notice .bubble-content > span:not(.irc-cmd), #rd-rich-chat[data-theme="dark"] .msg-row.request-notice .bubble-content > span *{
  color:#f4fbff!important;
  text-shadow:0 1px 2px rgba(0,0,0,.60)!important;
}
#rd-rich-chat[data-theme="dark"] .msg-row.request-notice .msg-author-name{
  color:#8bd7ff!important;
  text-shadow:0 1px 2px rgba(0,0,0,.60)!important;
}
#rd-rich-chat[data-theme="dark"] .chat-vote-card{
  background:rgba(12,24,38,.92)!important;
  border-color:rgba(99,196,240,.36)!important;
  box-shadow:0 4px 14px rgba(0,0,0,.20), inset 4px 0 0 #63c4f0!important;
}
#rd-rich-chat[data-theme="dark"] .chat-vote-info strong{color:#8bd7ff!important}
#rd-rich-chat[data-theme="dark"] .chat-vote-info span{color:#ffffff!important}
#rd-rich-chat[data-theme="dark"] .chat-vote-info small{color:#c8d9e8!important}
#rd-rich-chat[data-theme="green"] .msg-row.request-notice{
  box-shadow:inset 4px 0 0 #1f9d55, 0 1px 0 rgba(255,255,255,.45)!important;
}
#rd-rich-chat[data-theme="green"] .msg-row.request-notice .msg-author-name, #rd-rich-chat[data-theme="green"] .chat-vote-info strong{
  color:#0f7a3c!important;
}
#rd-rich-chat[data-theme="green"] .chat-vote-card{
  border-color:rgba(31,157,85,.32)!important;
  box-shadow:0 4px 14px rgba(0,0,0,.08), inset 4px 0 0 #1f9d55!important;
}
@media (max-width:520px){
  #rd-rich-chat .chat-vote-card{flex-direction:column!important;align-items:stretch!important;gap:8px!important}
  #rd-rich-chat .chat-vote-btn{width:100%!important;min-width:0!important}
}


/* Radio-Digitaal /main integratie: de chat blijft binnen zijn eigen module. */
#rd-rich-chat{
  position:relative;
  width:100%;
  height:720px;
  min-height:620px;
  max-height:78vh;
  overflow:hidden;
  border:1px solid var(--line, #293343);
  border-radius:var(--radius, 10px);
  background:var(--panel, #121923);
}
#rd-rich-chat .app-layout{
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
}
#rd-rich-chat .chat-area,
#rd-rich-chat .user-sidebar{min-height:0!important}
#rd-rich-chat .login-modal-content{max-height:calc(100% - 24px)!important;overflow:auto!important}
#rd-rich-chat .modal{position:absolute!important;inset:0!important}
#rd-rich-chat .fullscreen-overlay{position:absolute!important;inset:0!important}
#rd-rich-chat .leaderboard-panel{position:absolute!important}
#rd-rich-chat .context-menu{position:absolute!important}
#rd-rich-chat .notice-toast{position:absolute!important}
#rd-rich-chat .channel-alert{position:absolute!important}
#rd-rich-chat .profile-hover-card{position:absolute!important}
#rd-rich-chat .auth-modal{position:absolute!important}
#rd-rich-chat a{color:inherit}
@media(max-width:760px){
  #rd-rich-chat{height:760px;min-height:680px;max-height:none}
}

/* Geen Font Awesome dependency nodig in de nieuwe portal. */
#rd-rich-chat .fas::before{display:inline-block;min-width:1em;text-align:center;font-style:normal;font-family:system-ui,sans-serif}
#rd-rich-chat .fa-reply::before{content:"↩"}
#rd-rich-chat .fa-trash::before{content:"×"}
#rd-rich-chat .fa-thumbs-up::before{content:"👍"}
#rd-rich-chat .fa-sign-in-alt::before{content:"→"}
#rd-rich-chat .fa-star::before{content:"★"}
#rd-rich-chat .fa-music::before{content:"♫"}

/* ==========================================================================
   FASE 2.28 — ÉÉN RADIO-DIGITAAL CHATPRESENTATIE
   Geen Classic/Portal-splitsing meer. Antenne is de enige visuele bron.
   Database/Hybrid/IRC beïnvloeden uitsluitend transport, niet de layout.
   ========================================================================== */

#rd-rich-chat{
  --rdc-frame-bg:#1a232d;
  --rdc-header-bg:#1d2733;
  --rdc-header-text:#ffffff;
  --rdc-chat-bg:#eef0f2;
  --rdc-chat-text:#25282b;
  --rdc-chat-bg-image:none;
  --rdc-chat-bg-opacity:.16;
  --rdc-bg-size:cover;
  --rdc-bg-position:center center;
  --rdc-message-bg:#eef0f2;
  --rdc-message-text:#25282b;
  --rdc-message-border:#d9dde2;
  --rdc-message-header-bg:#eef0f2;
  --rdc-message-header-border:#d9dde2;
  --rdc-reply-bg:#dfe6ed;
  --rdc-reply-text:#4d5863;
  --rdc-toolbar-bg:#1d2733;
  --rdc-toolbar-text:#ffffff;
  --rdc-input-bg:#111820;
  --rdc-input-text:#ffffff;
  --rdc-input-border:#44515f;
  --rdc-sidebar-bg:#171d25;
  --rdc-sidebar-header-bg:#202936;
  --rdc-sidebar-user-bg:#171d25;
  --rdc-sidebar-user-hover-bg:#232d39;
  --rdc-sidebar-text:#e9eef4;
  --rdc-section-bg:#202936;
  --rdc-section-text:#eef3f8;
  --rdc-accent:#ff5a66;
  --rdc-icon-color:#ffffff;
  --rdc-muted-text:#9fb0bf;
  --rdc-link-color:#69d5ff;
  --rdc-role-guest:#7fe6ff;
  --rdc-role-member:#89dcff;
  --rdc-role-vip:#ffd12a;
  --rdc-role-dj:#ff737d;
  --rdc-role-moderator:#ff9f43;
  --rdc-role-owner:#c58cff;
  --rdc-sidebar-width:220px;
  --rdc-font-family:Verdana,Geneva,sans-serif;
  --rdc-message-font-size:15px;
  --rdc-name-font-size:13px;
  --rdc-time-font-size:11px;
  --rdc-user-font-size:13px;
  --rdc-toolbar-font-size:13px;

  box-sizing:border-box!important;
  font-family:var(--rdc-font-family)!important;
  color:var(--rdc-chat-text)!important;
  border:1px solid var(--rdc-frame-bg)!important;
  border-radius:18px!important;
  overflow:hidden!important;
  background:var(--rdc-frame-bg)!important;
}

#rd-rich-chat .app-layout{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) var(--rdc-sidebar-width)!important;
  gap:0!important;
  height:100%!important;
  min-height:0!important;
  background:var(--rdc-frame-bg)!important;
}

#rd-rich-chat .chat-area{
  display:flex!important;
  flex-direction:column!important;
  min-width:0!important;
  min-height:0!important;
  background:var(--rdc-chat-bg)!important;
  border:0!important;
  border-right:1px solid var(--rdc-frame-bg)!important;
  border-radius:0!important;
  box-shadow:none!important;
}

#rd-rich-chat .chat-tabs-bar{
  min-height:52px!important;
  height:auto!important;
  padding:8px 10px!important;
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  background:var(--rdc-header-bg)!important;
  color:var(--rdc-header-text)!important;
  border:0!important;
  border-bottom:1px solid var(--rdc-frame-bg)!important;
  font-family:var(--rdc-font-family)!important;
}
#rd-rich-chat .chat-tab,
#rd-rich-chat .chat-tab.active,
#rd-rich-chat .guest-logout-btn{
  color:var(--rdc-header-text)!important;
  font-family:var(--rdc-font-family)!important;
}
#rd-rich-chat .chat-tab.active{
  border-color:var(--rdc-accent)!important;
}

/* Berichtenpaneel + optionele achtergrondafbeelding */
#rd-rich-chat #chat-window.messages-container,
#rd-rich-chat #private-window.private-messages-container{
  position:relative!important;
  isolation:isolate!important;
  flex:1 1 auto!important;
  min-height:0!important;
  overflow:auto!important;
  background-color:var(--rdc-chat-bg)!important;
  color:var(--rdc-chat-text)!important;
  font-family:var(--rdc-font-family)!important;
  font-size:var(--rdc-message-font-size)!important;
}
#rd-rich-chat #chat-window::before,
#rd-rich-chat #private-window::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  background-image:var(--rdc-chat-bg-image)!important;
  background-size:var(--rdc-bg-size)!important;
  background-position:var(--rdc-bg-position)!important;
  background-repeat:no-repeat!important;
  opacity:var(--rdc-chat-bg-opacity)!important;
}
#rd-rich-chat #chat-window > *,
#rd-rich-chat #private-window > *{
  position:relative!important;
  z-index:1!important;
}

/* Eén berichtmodel voor database én IRC */
#rd-rich-chat #chat-window > .msg-row,
#rd-rich-chat #private-window > .msg-row,
#rd-rich-chat[data-theme] #chat-window > .msg-row,
#rd-rich-chat[data-theme] #private-window > .msg-row{
  align-self:stretch!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  background:var(--rdc-message-bg)!important;
  color:var(--rdc-message-text)!important;
  border:0!important;
  border-bottom:1px solid var(--rdc-message-border)!important;
  border-radius:0!important;
  box-shadow:none!important;
  font-family:var(--rdc-font-family)!important;
}
#rd-rich-chat #chat-window > .msg-row::after,
#rd-rich-chat #private-window > .msg-row::after{
  display:none!important;
}
#rd-rich-chat #chat-window > .msg-row > .msg-name,
#rd-rich-chat #private-window > .msg-row > .msg-name{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  min-height:34px!important;
  margin:0!important;
  padding:5px 10px!important;
  background:var(--rdc-message-header-bg)!important;
  color:var(--rdc-message-text)!important;
  border:0!important;
  border-bottom:1px solid var(--rdc-message-header-border)!important;
  border-radius:0!important;
  font-family:var(--rdc-font-family)!important;
  font-size:var(--rdc-name-font-size)!important;
  line-height:1.3!important;
}
#rd-rich-chat .msg-name span,
#rd-rich-chat .msg-author-name{
  font-family:var(--rdc-font-family)!important;
  font-size:var(--rdc-name-font-size)!important;
}
#rd-rich-chat .msg-time,
#rd-rich-chat .irc-message-time,
#rd-rich-chat .pm-time{
  margin-left:4px!important;
  color:var(--rdc-muted-text)!important;
  font-family:var(--rdc-font-family)!important;
  font-size:var(--rdc-time-font-size)!important;
  font-weight:600!important;
}
#rd-rich-chat[data-timestamps="off"] .msg-time,
#rd-rich-chat[data-timestamps="off"] .irc-message-time,
#rd-rich-chat[data-timestamps="off"] .pm-time{
  display:none!important;
}
#rd-rich-chat .msg-bubble,
#rd-rich-chat .msg-row.own .msg-bubble,
#rd-rich-chat .msg-row.other .msg-bubble,
#rd-rich-chat .msg-row.dj .msg-bubble,
#rd-rich-chat .msg-row.vip .msg-bubble{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:8px 12px 11px!important;
  background:transparent!important;
  color:var(--rdc-message-text)!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  font-family:var(--rdc-font-family)!important;
  font-size:var(--rdc-message-font-size)!important;
}
#rd-rich-chat .bubble-content,
#rd-rich-chat .bubble-content > span:not(.irc-cmd),
#rd-rich-chat .bubble-content span:not(.irc-cmd){
  background:transparent!important;
  color:var(--rdc-message-text)!important;
  border:0!important;
  box-shadow:none!important;
  font-family:var(--rdc-font-family)!important;
  font-size:var(--rdc-message-font-size)!important;
  line-height:1.45!important;
}
#rd-rich-chat .bubble-content a,
#rd-rich-chat .msg-bubble a{
  color:var(--rdc-link-color)!important;
  text-decoration:underline!important;
}

/* Reply/citaat */
#rd-rich-chat .reply-quote,
#rd-rich-chat #reply-preview-bar{
  background:var(--rdc-reply-bg)!important;
  color:var(--rdc-reply-text)!important;
  border-color:var(--rdc-message-border)!important;
  font-family:var(--rdc-font-family)!important;
}
#rd-rich-chat .reply-quote *,
#rd-rich-chat #reply-preview-bar *{
  color:var(--rdc-reply-text)!important;
}

/* Actieknoppen */
#rd-rich-chat .message-actions .action-icon,
#rd-rich-chat .tools-toggle i,
#rd-rich-chat .tool-btn i,
#rd-rich-chat .sidebar-header i,
#rd-rich-chat .chat-tabs-bar i,
#rd-rich-chat .action-icon{
  color:var(--rdc-icon-color)!important;
  fill:currentColor!important;
  opacity:1!important;
}

/* Composer / toolbar */
#rd-rich-chat .input-area{
  background:var(--rdc-toolbar-bg)!important;
  color:var(--rdc-toolbar-text)!important;
  border:0!important;
  border-top:1px solid var(--rdc-frame-bg)!important;
  font-family:var(--rdc-font-family)!important;
}
#rd-rich-chat .tools-toggle,
#rd-rich-chat .tool-btn,
#rd-rich-chat .guest-logout-btn,
#rd-rich-chat #btn-send{
  font-family:var(--rdc-font-family)!important;
  font-size:var(--rdc-toolbar-font-size)!important;
}
#rd-rich-chat .tools-toggle,
#rd-rich-chat .tool-btn,
#rd-rich-chat .guest-logout-btn{
  color:var(--rdc-toolbar-text)!important;
}
#rd-rich-chat #chat-input{
  background:var(--rdc-input-bg)!important;
  color:var(--rdc-input-text)!important;
  border-color:var(--rdc-input-border)!important;
  font-family:var(--rdc-font-family)!important;
  font-size:var(--rdc-message-font-size)!important;
}
#rd-rich-chat #chat-input::placeholder{
  color:color-mix(in srgb,var(--rdc-input-text) 48%,transparent)!important;
}
#rd-rich-chat #btn-send{
  background:var(--rdc-accent)!important;
  color:#fff!important;
  border-color:var(--rdc-accent)!important;
}

/* Gebruikerslijst */
#rd-rich-chat .user-sidebar{
  display:flex!important;
  flex-direction:column!important;
  width:var(--rdc-sidebar-width)!important;
  min-width:0!important;
  flex-basis:var(--rdc-sidebar-width)!important;
  background:var(--rdc-sidebar-bg)!important;
  color:var(--rdc-sidebar-text)!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  font-family:var(--rdc-font-family)!important;
}
#rd-rich-chat .sidebar-header{
  min-height:40px!important;
  height:auto!important;
  padding:7px 10px!important;
  background:var(--rdc-sidebar-header-bg)!important;
  color:var(--rdc-sidebar-text)!important;
  border:0!important;
  border-bottom:1px solid var(--rdc-frame-bg)!important;
}
#rd-rich-chat .sidebar-header h3{
  margin:0!important;
  color:var(--rdc-sidebar-text)!important;
  font-family:var(--rdc-font-family)!important;
  font-size:var(--rdc-user-font-size)!important;
}
#rd-rich-chat .tmf-user-section,
#rd-rich-chat .grouped-user-list,
#rd-rich-chat .user-list{
  background:var(--rdc-sidebar-bg)!important;
}
#rd-rich-chat .tmf-section-title{
  padding:5px 10px!important;
  background:var(--rdc-section-bg)!important;
  color:var(--rdc-section-text)!important;
  border-color:var(--rdc-frame-bg)!important;
  font-family:var(--rdc-font-family)!important;
  font-size:calc(var(--rdc-user-font-size) * .9)!important;
  font-weight:800!important;
}
#rd-rich-chat .user-sidebar .user-item,
#rd-rich-chat .user-sidebar .user-list li.user-item{
  background:var(--rdc-sidebar-user-bg)!important;
  color:var(--rdc-sidebar-text)!important;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.06)!important;
  border-radius:0!important;
  font-family:var(--rdc-font-family)!important;
  font-size:var(--rdc-user-font-size)!important;
}
#rd-rich-chat .user-sidebar .user-item:hover,
#rd-rich-chat .user-sidebar .user-list li.user-item:hover{
  background:var(--rdc-sidebar-user-hover-bg)!important;
}
#rd-rich-chat .user-custom-status,
#rd-rich-chat .user-meta-tags,
#rd-rich-chat .online-stats{
  color:var(--rdc-muted-text)!important;
}

/* Rolkleuren: exact de Antenne-waarde, zonder automatische mix/contrastcorrectie. */
#rd-rich-chat .user-item.role-guest .user-name,
#rd-rich-chat .msg-row.role-guest .msg-author-name{color:var(--rdc-role-guest)!important}
#rd-rich-chat .user-item.role-member .user-name,
#rd-rich-chat .msg-row.role-member .msg-author-name{color:var(--rdc-role-member)!important}
#rd-rich-chat .user-item.role-vip .user-name,
#rd-rich-chat .msg-row.role-vip .msg-author-name{color:var(--rdc-role-vip)!important}
#rd-rich-chat .user-item.role-dj .user-name,
#rd-rich-chat .msg-row.role-dj .msg-author-name{color:var(--rdc-role-dj)!important}
#rd-rich-chat .user-item.role-moderator .user-name,
#rd-rich-chat .msg-row.role-moderator .msg-author-name{color:var(--rdc-role-moderator)!important}
#rd-rich-chat .user-item.role-owner .user-name,
#rd-rich-chat .msg-row.role-owner .msg-author-name{color:var(--rdc-role-owner)!important}

/* IRC realtime notices gebruiken eveneens de centrale beheerwaarden. */
#rd-rich-chat .irc-live-notice{
  margin:4px 0 8px!important;
  padding:6px 9px!important;
  border-left:3px solid var(--rdc-accent)!important;
  background:color-mix(in srgb,var(--rdc-accent) 10%,transparent)!important;
  color:var(--rdc-muted-text)!important;
  font-family:var(--rdc-font-family)!important;
  font-size:var(--rdc-time-font-size)!important;
  font-weight:700!important;
}

/* Menus/modals volgen de gekozen chattypografie. */
#rd-rich-chat .modal-content,
#rd-rich-chat .context-menu,
#rd-rich-chat .leaderboard-panel,
#rd-rich-chat .overlay-box,
#rd-rich-chat .notice-toast,
#rd-rich-chat .profile-hover-card{
  font-family:var(--rdc-font-family)!important;
}
#rd-rich-chat .modal-content input,
#rd-rich-chat .modal-content select,
#rd-rich-chat .modal-content textarea,
#rd-rich-chat .modal-content button,
#rd-rich-chat .context-menu,
#rd-rich-chat .leaderboard-panel{
  font-size:var(--rdc-toolbar-font-size)!important;
}

/* Mobiel: sidebar blijft de bestaande uitschuifbare lijst. */
@media(max-width:760px){
  #rd-rich-chat{
    border-radius:10px!important;
  }
  #rd-rich-chat .app-layout{
    grid-template-columns:minmax(0,1fr)!important;
  }
  #rd-rich-chat .chat-area{
    border-right:0!important;
  }
  #rd-rich-chat .user-sidebar{
    width:min(var(--rdc-sidebar-width),88vw)!important;
    flex-basis:min(var(--rdc-sidebar-width),88vw)!important;
  }
}

/* ========================================================================== 
   FASE 2.32 — profiel/modal leesbaarheid + persoonlijke chatopmaak
   Dezelfde Antenne-kleuren als de chat zijn hier de enige visuele bron.
   ========================================================================== */
#rd-rich-chat .profile-card-modal,
#rd-rich-chat .unregistered-chatter-modal-content{
  background:var(--rdc-frame-bg)!important;
  color:var(--rdc-sidebar-text)!important;
  border:1px solid var(--rdc-message-border)!important;
  box-shadow:0 22px 70px rgba(0,0,0,.35)!important;
}
#rd-rich-chat .profile-card-header,
#rd-rich-chat .unregistered-chatter-modal-content>.modal-header{
  background:var(--rdc-header-bg)!important;
  color:var(--rdc-header-text)!important;
  border-bottom:1px solid var(--rdc-message-header-border)!important;
}
#rd-rich-chat .profile-card-header h3,
#rd-rich-chat .profile-card-header #profile-name,
#rd-rich-chat .profile-card-header .close-modal,
#rd-rich-chat .unregistered-chatter-modal-content>.modal-header h3,
#rd-rich-chat .unregistered-chatter-modal-content>.modal-header .close-modal{
  color:var(--rdc-header-text)!important;
}
#rd-rich-chat .profile-card-body,
#rd-rich-chat .unregistered-chatter-body{
  background:var(--rdc-chat-bg)!important;
  color:var(--rdc-chat-text)!important;
}
#rd-rich-chat .profile-tabs{
  background:var(--rdc-toolbar-bg)!important;
  border:1px solid var(--rdc-message-border)!important;
}
#rd-rich-chat .profile-tab{
  background:var(--rdc-sidebar-bg)!important;
  color:var(--rdc-sidebar-text)!important;
  border:1px solid var(--rdc-message-border)!important;
}
#rd-rich-chat .profile-tab.active{
  background:var(--rdc-header-bg)!important;
  color:var(--rdc-header-text)!important;
  border-color:var(--rdc-accent)!important;
}
#rd-rich-chat .profile-stat-grid>div,
#rd-rich-chat .profile-mini-list>*{
  background:var(--rdc-message-bg)!important;
  color:var(--rdc-message-text)!important;
  border:1px solid var(--rdc-message-border)!important;
}
#rd-rich-chat .profile-stat-grid span,
#rd-rich-chat .profile-list-title,
#rd-rich-chat .profile-mini-note,
#rd-rich-chat .profile-status-mini{
  color:var(--rdc-muted-text)!important;
}
#rd-rich-chat .profile-stat-grid strong,
#rd-rich-chat .profile-mini-list strong,
#rd-rich-chat .profile-mini-list span,
#rd-rich-chat .profile-mini-list div{
  color:var(--rdc-message-text)!important;
}
#rd-rich-chat .profile-role-pill{
  background:var(--rdc-sidebar-bg)!important;
  color:var(--rdc-sidebar-text)!important;
  border:1px solid var(--rdc-message-border)!important;
}
#rd-rich-chat .profile-badge{
  background:var(--rdc-message-bg)!important;
  color:var(--rdc-message-text)!important;
  border:1px solid var(--rdc-message-border)!important;
}
#rd-rich-chat .unregistered-chatter-body{
  display:flex!important;
  align-items:flex-start!important;
  gap:14px!important;
  padding:22px!important;
}
#rd-rich-chat .unregistered-chatter-icon{
  flex:0 0 48px!important;
  width:48px!important;
  height:48px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:8px!important;
  background:var(--rdc-sidebar-bg)!important;
  color:var(--rdc-sidebar-text)!important;
  font-size:28px!important;
}
#rd-rich-chat .unregistered-chatter-body strong{
  display:block!important;
  margin:1px 0 6px!important;
  color:var(--rdc-chat-text)!important;
  font-size:max(var(--rdc-name-font-size),16px)!important;
}
#rd-rich-chat .unregistered-chatter-body p{
  margin:0!important;
  color:var(--rdc-chat-text)!important;
  font-size:var(--rdc-message-font-size)!important;
  line-height:1.5!important;
}
#rd-rich-chat .irc-personal-style{
  font-size:inherit!important;
  line-height:inherit!important;
}
#rd-rich-chat .profile-status-mini #profile-status{
  color:var(--rdc-chat-text)!important;
}

/* Phase 2.33 — IRC server/system events */
#rd-rich-chat .irc-system-event {
    display:flex;
    align-items:flex-start;
    gap:8px;
    padding:8px 12px;
    border-bottom:1px solid var(--rdc-message-border);
    background:color-mix(in srgb, var(--rdc-message-bg) 86%, var(--rdc-chat-bg));
    color:var(--rdc-muted-text);
    font-family:var(--rdc-font-family);
    font-size:var(--rdc-message-font-size);
    line-height:1.35;
}
#rd-rich-chat .irc-system-event strong { color:var(--rdc-message-text); }
#rd-rich-chat .irc-system-event small { color:var(--rdc-muted-text); opacity:.9; }
#rd-rich-chat .irc-system-event.is-warning {
    border-left:3px solid var(--rdc-accent);
    background:color-mix(in srgb, var(--rdc-accent) 10%, var(--rdc-message-bg));
    color:var(--rdc-message-text);
}
#rd-rich-chat .irc-system-icon { flex:0 0 auto; }

/* ==========================================================
   Fase 2.37 - RK IRC Channel Control Panel + crew notice fix
   ========================================================== */
#rd-rich-chat .notice-toast-message{
  color:var(--h5-text)!important;
  opacity:1!important;
}
#rd-rich-chat .notice-toast-title{color:var(--h5-accent)!important}
#rd-rich-chat .notice-toast-icon{background:var(--h5-accent2)!important;color:#fff!important}
#rd-rich-chat .notice-toast-close{color:var(--h5-text)!important}

#rd-rich-chat .channel-control-toggle{font-weight:800!important}
#rd-rich-chat .channel-control-content{width:min(980px,96vw)!important;max-width:980px!important;max-height:92vh!important;overflow:hidden!important;display:flex!important;flex-direction:column!important}
#rd-rich-chat .channel-control-content .modal-header{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;flex:0 0 auto!important}
#rd-rich-chat .channel-control-tabs{display:flex!important;gap:4px!important;padding:8px!important;background:var(--h5-panel2)!important;border-bottom:1px solid var(--h5-line)!important;overflow-x:auto!important;flex:0 0 auto!important}
#rd-rich-chat .channel-control-tab{border:1px solid var(--h5-line)!important;background:var(--h5-panel)!important;color:var(--h5-text)!important;border-radius:3px!important;min-height:34px!important;padding:0 12px!important;font-weight:800!important;cursor:pointer!important;white-space:nowrap!important}
#rd-rich-chat .channel-control-tab.active{border-color:var(--h5-accent)!important;color:var(--h5-accent)!important}
#rd-rich-chat .channel-control-tab.cc-disabled,#rd-rich-chat .channel-control-tab:disabled{opacity:.45!important;cursor:not-allowed!important}
#rd-rich-chat .channel-control-body{padding:12px!important;overflow:auto!important;flex:1 1 auto!important;background:var(--h5-bg)!important;color:var(--h5-text)!important}
#rd-rich-chat .channel-control-loading{padding:10px!important;margin-bottom:10px!important;background:var(--h5-panel)!important;border:1px solid var(--h5-line)!important;color:var(--h5-muted)!important}
#rd-rich-chat .channel-control-pane{display:none!important}
#rd-rich-chat .channel-control-pane.active{display:block!important}
#rd-rich-chat .channel-control-card{background:var(--h5-panel)!important;border:1px solid var(--h5-line)!important;border-radius:4px!important;padding:12px!important;margin-bottom:10px!important}
#rd-rich-chat .channel-control-card>strong{display:block!important;margin-bottom:8px!important;color:var(--h5-accent)!important;font-size:14px!important}
#rd-rich-chat .channel-control-card p{margin:4px 0 10px!important;color:var(--h5-muted)!important}
#rd-rich-chat .channel-control-pane label{display:flex!important;flex-direction:column!important;gap:5px!important;margin-bottom:10px!important;font-weight:700!important;color:var(--h5-text)!important}
#rd-rich-chat .channel-control-pane input,#rd-rich-chat .channel-control-pane textarea,#rd-rich-chat .channel-control-pane select{width:100%!important;box-sizing:border-box!important;border:1px solid var(--h5-line)!important;background:var(--h5-panel2)!important;color:var(--h5-text)!important;border-radius:3px!important;padding:8px 9px!important;min-height:36px!important}
#rd-rich-chat .channel-control-pane textarea{resize:vertical!important}
#rd-rich-chat .cc-grid{display:grid!important;gap:10px!important}
#rd-rich-chat .cc-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))!important}
#rd-rich-chat .cc-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))!important}
#rd-rich-chat .cc-check-grid label{display:flex!important;flex-direction:row!important;align-items:center!important;gap:7px!important;background:var(--h5-panel2)!important;border:1px solid var(--h5-line)!important;padding:8px!important;margin:0 0 10px!important}
#rd-rich-chat .cc-check-grid input[type="checkbox"]{width:auto!important;min-height:0!important}
#rd-rich-chat .cc-inline{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto!important;gap:8px!important;align-items:end!important;margin-bottom:10px!important}
#rd-rich-chat .cc-actions{display:flex!important;gap:8px!important;flex-wrap:wrap!important;margin-top:8px!important}
#rd-rich-chat .danger-btn{background:var(--h5-danger)!important;border-color:var(--h5-danger)!important;color:#fff!important}
#rd-rich-chat .danger-zone{border-color:color-mix(in srgb,var(--h5-danger) 55%,var(--h5-line))!important}
#rd-rich-chat .cc-list{display:flex!important;flex-direction:column!important;gap:6px!important}
#rd-rich-chat .cc-list-row{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;border:1px solid var(--h5-line)!important;background:var(--h5-panel2)!important;padding:8px!important;border-radius:3px!important}
#rd-rich-chat .cc-list-row span{min-width:0!important;display:flex!important;flex-direction:column!important}
#rd-rich-chat .cc-list-row b{overflow-wrap:anywhere!important;color:var(--h5-text)!important}
#rd-rich-chat .cc-list-row small{color:var(--h5-muted)!important;margin-top:2px!important}
#rd-rich-chat .cc-list-row button{border:1px solid var(--h5-line)!important;background:var(--h5-panel)!important;color:var(--h5-text)!important;border-radius:3px!important;padding:5px 8px!important;cursor:pointer!important}
#rd-rich-chat .cc-empty{color:var(--h5-muted)!important;padding:5px 0!important}
#rd-rich-chat .channel-control-status{padding:9px 12px!important;min-height:36px!important;border-top:1px solid var(--h5-line)!important;background:var(--h5-panel2)!important;color:var(--h5-accent)!important;font-weight:700!important;flex:0 0 auto!important}
#rd-rich-chat .channel-control-status.is-error{color:var(--h5-danger)!important}
#rd-rich-chat .cc-readonly{opacity:.75!important}
#rd-rich-chat .channel-control-pane button:disabled,#rd-rich-chat .channel-control-pane input:disabled,#rd-rich-chat .channel-control-pane textarea:disabled,#rd-rich-chat .channel-control-pane select:disabled{opacity:.5!important;cursor:not-allowed!important}
@media(max-width:760px){
  #rd-rich-chat .channel-control-content{width:100%!important;max-width:none!important;height:96vh!important;max-height:96vh!important}
  #rd-rich-chat .cc-grid.two,#rd-rich-chat .cc-grid.three,#rd-rich-chat .cc-inline{grid-template-columns:1fr!important}
  #rd-rich-chat .channel-control-tabs{padding:6px!important}
  #rd-rich-chat .channel-control-tab{padding:0 9px!important}
}

/* Fase 2.38 - compacter kanaalbeheer + profiel moderatoracties */
#rd-rich-chat .channel-control-content{width:min(820px,94vw)!important;max-width:820px!important;max-height:86vh!important}
#rd-rich-chat .channel-control-content .modal-header{padding:8px 10px!important;min-height:42px!important}
#rd-rich-chat .channel-control-tabs{padding:5px 6px!important;gap:3px!important}
#rd-rich-chat .channel-control-tab{min-height:30px!important;padding:0 9px!important;font-size:12px!important}
#rd-rich-chat .channel-control-body{padding:8px!important}
#rd-rich-chat .channel-control-card{padding:8px!important;margin-bottom:7px!important}
#rd-rich-chat .channel-control-pane label{gap:3px!important;margin-bottom:7px!important;font-size:12px!important}
#rd-rich-chat .channel-control-pane label small{font-weight:400!important;color:var(--h5-muted)!important;font-size:11px!important}
#rd-rich-chat .channel-control-pane input,#rd-rich-chat .channel-control-pane textarea,#rd-rich-chat .channel-control-pane select{padding:6px 7px!important;min-height:31px!important;font-size:12px!important}
#rd-rich-chat .cc-grid{gap:7px!important}
#rd-rich-chat .cc-check-grid label{padding:6px!important;margin:0 0 6px!important}
#rd-rich-chat .cc-list-row{padding:6px!important;font-size:12px!important}
#rd-rich-chat .channel-control-status{padding:6px 9px!important;min-height:30px!important;font-size:12px!important}
#rd-rich-chat .profile-action-pane label{display:flex;flex-direction:column;gap:4px;margin:10px 0;font-weight:700}
#rd-rich-chat .profile-action-pane input,#rd-rich-chat .profile-action-pane select{width:100%;box-sizing:border-box;border:1px solid var(--h5-line);background:var(--h5-panel2);color:var(--h5-text);border-radius:3px;padding:8px}
#rd-rich-chat .profile-action-target{padding:8px;border:1px solid var(--h5-line);background:var(--h5-panel2);border-radius:3px}
#rd-rich-chat .profile-action-buttons{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
#rd-rich-chat .profile-action-status{min-height:22px;margin-top:8px;color:var(--h5-accent);font-weight:700}
#rd-rich-chat .profile-action-status.is-error{color:var(--h5-danger)}
@media(max-width:760px){#rd-rich-chat .channel-control-content{height:90vh!important;max-height:90vh!important}}

/* Phase 2.43: button hover colors from Antenne chat preview editor */
#rd-rich-chat .online-pill:hover,#rd-rich-chat .tools-toggle:hover,#rd-rich-chat .tool-btn:hover,#rd-rich-chat .guest-logout-btn:hover,#rd-rich-chat .chat-tab:hover,#rd-rich-chat .leaderboard-tab:hover,#rd-rich-chat .profile-tab:hover,#rd-rich-chat .mod-tab:hover,#rd-rich-chat .login-tab:hover,#rd-rich-chat .login-submit-btn:hover,#rd-rich-chat .login-register-btn:hover,#rd-rich-chat .btn-secondary:hover,#rd-rich-chat #btn-send:hover,#rd-rich-chat .modal button:hover,#rd-rich-chat .channel-control-tab:hover{background:var(--rdc-button-hover-bg,#dbe8ee)!important;color:var(--rdc-button-hover-text,#17242c)!important}


/* Phase 2.52 – popups gebruiken de volledige browserviewport, maar blijven in #rd-rich-chat zodat alle bestaande styling behouden blijft. */
#rd-rich-chat .modal{position:fixed!important;inset:0!important;z-index:99990!important;padding:24px!important;align-items:center!important;justify-content:center!important;background:rgba(2,8,13,.82)!important;backdrop-filter:blur(8px);overflow:auto!important}
#rd-rich-chat .modal.hidden{display:none!important}
#rd-rich-chat .modal:not(.hidden){display:flex!important}
#rd-rich-chat .modal-content{position:relative!important;width:min(1080px,calc(100vw - 48px))!important;max-width:none!important;max-height:calc(100vh - 48px)!important;margin:auto!important;overflow:auto!important}
#rd-rich-chat #channel-control-modal .modal-content{width:min(1280px,calc(100vw - 40px))!important;height:min(860px,calc(100vh - 40px))!important}
#rd-rich-chat #profile-modal .modal-content{width:min(920px,calc(100vw - 40px))!important}
#rd-rich-chat #gif-modal .modal-content{width:min(1120px,calc(100vw - 40px))!important;height:min(820px,calc(100vh - 40px))!important}
#rd-rich-chat #media-modal .media-modal-content{width:min(1200px,calc(100vw - 40px))!important;background:#070b0e!important}
#rd-rich-chat #media-modal .media-modal-body{display:grid!important;place-items:center!important;min-height:220px;max-height:calc(100vh - 150px);overflow:auto;padding:14px!important}
#rd-rich-chat #media-modal .media-modal-body img{display:block;max-width:100%;max-height:calc(100vh - 185px);object-fit:contain;border-radius:5px}
#rd-rich-chat .modal-header{position:sticky!important;top:0!important;z-index:5!important}
#rd-rich-chat .modal-header .close-modal{position:relative!important;right:auto!important;top:auto!important;flex:0 0 42px;width:42px!important;height:42px!important;display:grid!important;place-items:center!important;border-radius:50%!important}
#rd-rich-chat #gif-viewer.media-viewer{position:fixed!important;inset:0!important;z-index:100000!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:20px!important}
#rd-rich-chat #gif-viewer.media-viewer.hidden{display:none!important}
#rd-rich-chat #gif-viewer .gif-viewer-content{width:min(1200px,calc(100vw - 40px))!important;height:min(880px,calc(100vh - 40px))!important;max-width:none!important;max-height:none!important}
#rd-rich-chat #gif-viewer .gif-viewer-close{right:14px!important;top:14px!important}
#rd-rich-chat .media-thumb{position:relative;cursor:zoom-in!important}
#rd-rich-chat .media-zoom-badge{display:grid!important;place-items:center!important;min-width:32px!important;height:32px!important;border-radius:50%!important;font-size:16px!important}
@media(max-width:760px){#rd-rich-chat .modal{padding:8px!important}#rd-rich-chat .modal-content{width:calc(100vw - 16px)!important;max-height:calc(100vh - 16px)!important}}

/* Phase 2.61 — user context menu uses viewport coordinates so it cannot be
   misplaced/clipped by the embedded chat layout. */
#rd-rich-chat #context-menu{
  position:fixed!important;
  z-index:30000!important;
  min-width:220px!important;
  max-width:min(280px,calc(100vw - 16px))!important;
}
#rd-rich-chat .chat-tab .close-tab{
  display:inline-grid!important;
  place-items:center!important;
  width:22px!important;
  height:22px!important;
  margin-left:8px!important;
  border-radius:3px!important;
  cursor:pointer!important;
  line-height:1!important;
  opacity:.72!important;
}
#rd-rich-chat .chat-tab .close-tab:hover{opacity:1!important;background:color-mix(in srgb,var(--rdc-accent) 16%,transparent)!important}

/* Phase 3.09A - tijdelijke verzoek-overlay buiten IRC */
#rd-rich-chat .chat-area{position:relative!important}
#rd-rich-chat .rd-request-overlay{
  --ro-bg:#0b1b24;--ro-accent:#55d9f1;--ro-text:#fff;--ro-heading:#55d9f1;
  --ro-vote-bg:#173f50;--ro-vote-text:#fff;--ro-heading-size:14px;--ro-message-size:14px;
  --ro-song-size:18px;--ro-button-size:13px;--ro-radius:8px;
  position:absolute;z-index:95;top:8px;left:12px;right:12px;display:flex;justify-content:center;
  pointer-events:none;opacity:0;transform:translateY(calc(-100% - 24px));
  transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .25s ease;
}
#rd-rich-chat .rd-request-overlay.is-visible{opacity:1;transform:translateY(0)}
#rd-rich-chat .rd-request-overlay__inner{
  position:relative;width:min(820px,100%);padding:12px 46px 12px 14px;
  border:1px solid color-mix(in srgb,var(--ro-accent) 56%,transparent);
  border-left:4px solid var(--ro-accent);border-radius:var(--ro-radius);background:var(--ro-bg);color:var(--ro-text);
  box-shadow:0 12px 34px rgba(0,0,0,.38);pointer-events:auto;overflow:hidden;
}
#rd-rich-chat .rd-request-overlay__inner::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,color-mix(in srgb,var(--ro-accent) 10%,transparent),transparent 42%)}
#rd-rich-chat .rd-request-overlay__heading{position:relative;z-index:1;color:var(--ro-heading);font-size:var(--ro-heading-size);font-weight:900;letter-spacing:.08em;text-transform:uppercase;line-height:1.25}
#rd-rich-chat .rd-request-overlay__message{position:relative;z-index:1;margin-top:3px;font-size:var(--ro-message-size);line-height:1.35}
#rd-rich-chat .rd-request-overlay__song{position:relative;z-index:1;margin-top:4px;font-size:var(--ro-song-size);font-weight:900;line-height:1.25;overflow-wrap:anywhere}
#rd-rich-chat .rd-request-overlay__actions{position:relative;z-index:1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
#rd-rich-chat .rd-request-overlay__vote{border:1px solid color-mix(in srgb,var(--ro-accent) 50%,transparent);background:var(--ro-vote-bg);color:var(--ro-vote-text);font-size:var(--ro-button-size);font-weight:900;padding:7px 11px;border-radius:max(2px,calc(var(--ro-radius) * .65));cursor:pointer}
#rd-rich-chat .rd-request-overlay__vote:hover{filter:brightness(1.12)}
#rd-rich-chat .rd-request-overlay__vote:disabled{opacity:.65;cursor:default}
#rd-rich-chat .rd-request-overlay__status{font-size:11px;color:color-mix(in srgb,var(--ro-text) 72%,transparent)}
#rd-rich-chat .rd-request-overlay__close{position:absolute;z-index:3;right:8px;top:8px;width:28px;height:28px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--ro-accent) 35%,transparent);background:rgba(0,0,0,.18);color:var(--ro-text);border-radius:max(2px,calc(var(--ro-radius) * .6));cursor:pointer;font-size:16px;line-height:1}
#rd-rich-chat .rd-request-overlay[aria-hidden="true"]{visibility:hidden}
@media(max-width:760px){
  #rd-rich-chat .rd-request-overlay{top:5px;left:5px;right:5px}
  #rd-rich-chat .rd-request-overlay__inner{padding:10px 40px 10px 11px}
  #rd-rich-chat .rd-request-overlay__song{line-height:1.2}
}


/* ========================================================================
   Radio-Digitaal update: online aantallen in de bovenste chatbalk
   ======================================================================== */
.rich-chat-module .own-chat-heading{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
}
.rich-chat-module .own-chat-heading-meta{
  margin-left:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:14px!important;
  min-width:0!important;
}
.rich-chat-module .rd-chat-history-button{
  border:1px solid var(--border-color,var(--border,rgba(255,255,255,.25)));
  border-radius:7px;
  padding:5px 9px;
  background:var(--surface,var(--theme-surface,rgba(20,18,18,.8)));
  color:inherit;
  font:inherit;
  font-size:12px;
  font-weight:700;
  line-height:1.2;
  white-space:nowrap;
  cursor:pointer;
}
#rd-rich-chat .rd-chat-history-control{
  display:flex;
  flex:none;
  align-self:flex-start;
  align-items:center;
  gap:9px;
  padding:7px 4px 10px;
}
#rd-rich-chat .rd-chat-history-status{font-size:11px;opacity:.75;}
.rich-chat-module .rd-chat-history-button:hover,
.rich-chat-module .rd-chat-history-button:focus-visible{
  border-color:var(--theme-accent,var(--accent,#aa815a));
}
.rich-chat-module .own-chat-live-stats{
  display:inline-flex!important;
  align-items:center!important;
  min-width:0!important;
  color:#b9ccd6!important;
  font-size:12px!important;
  font-weight:800!important;
  line-height:1.2!important;
  white-space:nowrap!important;
  letter-spacing:.01em!important;
}
.rich-chat-module .own-chat-live-stats::before{
  content:"";
  width:7px;
  height:7px;
  margin-right:7px;
  flex:0 0 7px;
  border-radius:50%;
  background:#49d8f5;
  box-shadow:0 0 8px rgba(73,216,245,.45);
}
/* De oude teller onder het invoerveld wordt niet meer gebruikt. */
#rd-rich-chat .composer-online-stats{display:none!important;}
@media (max-width:760px){
  .rich-chat-module .own-chat-heading{
    align-items:flex-start!important;
    flex-wrap:wrap!important;
    gap:5px 10px!important;
  }
  .rich-chat-module .own-chat-heading-meta{
    width:100%!important;
    margin-left:0!important;
    justify-content:space-between!important;
    gap:8px!important;
  }
  .rich-chat-module .own-chat-live-stats{font-size:10px!important;}
  .rich-chat-module .own-chat-badge{font-size:10px!important;}
}
@media (max-width:430px){
  .rich-chat-module .own-chat-heading-meta{align-items:center!important;}
  .rich-chat-module .own-chat-live-stats{
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
}

/* R5A — chat TOP: vaste, altijd zichtbare bladerknop en scrollbare lijst.
   Alleen binnen de chatmodule; websitekleuren/presets blijven leidend. */
#rd-rich-chat .leaderboard-panel:not(.hidden) {
    display: flex !important;
    flex-direction: column !important;
    /* Chatmodule heeft zelf een vaste hoogte: footer mag niet buiten het iframe-achtige vlak vallen. */
    max-height: min(85vh, calc(100% - 80px), 740px) !important;
    overflow: hidden !important;
}
#rd-rich-chat .leaderboard-panel .leaderboard-head,
#rd-rich-chat .leaderboard-panel .leaderboard-tabs,
#rd-rich-chat .leaderboard-panel .leaderboard-footer { flex: 0 0 auto; }
#rd-rich-chat .leaderboard-panel .leaderboard-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}
#rd-rich-chat .leaderboard-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    padding: 9px 11px;
    border-top: 1px solid var(--rdc-message-border,#cdd8e2);
    background: var(--rdc-sidebar-bg,#eaf3fb);
    color: var(--rdc-sidebar-text,#183a52);
}
#rd-rich-chat .leaderboard-footer span { font-size: 12px; font-weight: 700; }
#rd-rich-chat .leaderboard-footer .leaderboard-load-more {
    width: auto !important;
    flex: 0 0 auto;
    min-width: 155px;
    height: 36px;
    margin: 0;
    padding: 0 10px;
    font-size: 12px;
}
#rd-rich-chat .leaderboard-footer .leaderboard-load-more[hidden] { display:none!important; }
@media (max-width: 520px) {
    #rd-rich-chat .leaderboard-footer { gap: 6px; padding: 7px; }
    #rd-rich-chat .leaderboard-footer .leaderboard-load-more { min-width: 125px; }
}

/* Compacte IRC-regels gebruiken de bestaande Antenne-kleuren en typografie. */
#rd-rich-chat .msg-row.irc-compact-text {
  display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;
  align-items:start!important;gap:3px 6px!important;padding:3px 4px!important;
  background:transparent!important;border-bottom:1px solid var(--rdc-message-border)!important;
}
#rd-rich-chat .irc-compact-text .msg-name {
  grid-column:1!important;width:auto!important;min-width:0!important;max-width:35vw!important;
  padding:0!important;gap:5px!important;align-items:center!important;
}
#rd-rich-chat .irc-compact-text .msg-author-name::after { content:":"; }
#rd-rich-chat .irc-compact-text .msg-bubble {
  grid-column:2!important;width:auto!important;min-width:0!important;
  padding:0!important;background:transparent!important;border:0!important;
}
#rd-rich-chat .irc-compact-text .bubble-content {overflow-wrap:anywhere!important;line-height:1.35!important;}
#rd-rich-chat .irc-compact-text > .message-actions {
  position:static!important;transform:none!important;grid-column:3!important;
  display:flex!important;align-items:center!important;gap:5px!important;
  width:auto!important;height:auto!important;margin:0!important;padding:0!important;
  opacity:1!important;visibility:visible!important;pointer-events:auto!important;
}
#rd-rich-chat .irc-compact-text > .irc-reaction-counts {grid-column:2 / 4!important;}
#rd-rich-chat .irc-reply-quote {
  display:block!important;margin:0 0 4px!important;padding:4px 8px!important;
  border-left:3px solid var(--rdc-link-color,#58aaff)!important;
  border-radius:3px!important;background:var(--rdc-reply-bg)!important;
  color:var(--rdc-reply-text)!important;font-size:.85em!important;line-height:1.3!important;
}
#rd-rich-chat .irc-reply-quote span,#rd-rich-chat .irc-reply-quote q {display:block!important;color:var(--rdc-reply-text)!important;}
#rd-rich-chat .help-key {color:#173a5e!important;background:#e8f2ff!important;}
#rd-rich-chat .help-item {cursor:pointer;}
.rd-command-target-dialog {max-width:min(420px,90vw);border:1px solid #7890a0;border-radius:12px;padding:20px;background:#192832;color:#fff;}
.rd-command-target-dialog::backdrop {background:rgba(0,0,0,.68);}
.rd-command-target-dialog h3 {margin:0 0 8px;color:inherit;}
.rd-command-target-dialog label {display:grid;gap:6px;}
.rd-command-target-dialog input {width:100%;padding:10px;background:#fff;color:#111;border:1px solid #7c8d99;border-radius:5px;}
.rd-command-target-actions {display:flex;justify-content:flex-end;gap:8px;margin-top:16px;}
.rd-command-target-actions button {padding:8px 12px;cursor:pointer;}
.rd-twitch-tools {position:absolute;top:7px;right:7px;z-index:20;display:flex;gap:5px;}
.rd-twitch-tools button {padding:5px 8px;border:1px solid #ddd;border-radius:5px;background:rgba(15,15,18,.88);color:#fff;font-size:12px;cursor:pointer;}
.rd-twitch-tools [data-twitch-drag] {display:none;touch-action:none;cursor:grab;}
.twitch-player-stage.is-floating:not(.is-chat-placement) .rd-twitch-tools [data-twitch-drag] {display:block;}
.twitch-player-stage.is-chat-placement {max-width:calc(100vw - 20px);}
@media(max-width:960px){.rd-twitch-tools{display:none!important;}}

#rd-rich-chat:not(.rd-can-moderate) .irc-delete-btn {display:none!important;}
.rd-twitch-heading-toggle {padding:5px 9px;border:1px solid currentColor;border-radius:5px;background:transparent;color:inherit;cursor:pointer;}
@media(max-width:960px){.rd-twitch-heading-toggle{display:none!important;}}

/* Compacte IRC-tekst: één doorlopende rij, zonder leeg reactievak. */
#rd-rich-chat[data-theme] #chat-window > .msg-row.irc-compact-text {
  gap:0 6px!important;
  align-items:center!important;
  padding:2px 6px!important;
  background:var(--rdc-message-bg)!important;
}
#rd-rich-chat[data-theme] #chat-window > .msg-row.irc-compact-text > .msg-name {
  min-height:0!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
}
#rd-rich-chat[data-theme] #chat-window > .msg-row.irc-compact-text > .msg-bubble {
  padding:0!important;
  background:transparent!important;
}
#rd-rich-chat[data-theme] #chat-window > .msg-row.irc-compact-text > .irc-reaction-counts:empty {
  display:none!important;
  margin:0!important;
}
#rd-rich-chat[data-theme] #chat-window > .msg-row.irc-compact-text > .irc-reaction-counts:not(:empty) {
  margin:2px 0 0!important;
}

/* Twitch in de chat: reserveer een eigen vak boven de scrollbare online lijst. */
#rd-rich-chat .rd-chat-twitch-slot {display:none;}
#rd-rich-chat .rd-chat-user-scroll {display:contents;}
@media(min-width:961px){
  #rd-rich-chat.rd-twitch-in-chat .app-layout {
    grid-template-columns:minmax(0,1fr) min(260px, 27%)!important;
  }
  #rd-rich-chat.rd-twitch-in-chat .user-sidebar {
    width:100%!important;flex-basis:auto!important;overflow:hidden!important;
  }
  #rd-rich-chat.rd-twitch-in-chat .rd-chat-twitch-slot {
    display:block!important;flex:0 0 auto!important;width:100%!important;
    aspect-ratio:16 / 9;background:var(--rdc-sidebar-bg)!important;
  }
  #rd-rich-chat.rd-twitch-in-chat .rd-chat-user-scroll {
    display:block!important;flex:1 1 auto!important;min-height:0!important;
    overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain;
  }
  .twitch-player-stage.is-chat-placement {
    border:0!important;box-shadow:none!important;max-width:none!important;
  }
  .twitch-player-stage.is-chat-placement .twitch-floating-label {display:none!important;}
  .twitch-player-stage.is-chat-placement .rd-chat-live-overlay {
    display:inline-flex!important;top:5px;left:5px;min-height:0;max-width:calc(100% - 10px);
    padding:3px 5px;gap:4px;font-size:9px;line-height:1.1;white-space:nowrap;
  }
  .twitch-player-stage.is-chat-placement .rd-chat-live-overlay svg {width:11px;height:11px;}
  .twitch-player-stage.is-chat-placement .rd-live-listeners__separator {height:10px;margin:0 2px;}
  .twitch-player-stage.is-chat-placement .rd-chat-live-overlay .live-dot {width:5px;height:5px;}
  .twitch-player-stage.is-chat-placement .rd-twitch-tools {top:auto;bottom:5px;}
}

@media(min-width:961px){.twitch-player-stage.is-chat-placement .rd-twitch-tools button{font-size:11px;padding:4px 6px;}}

/* Compact citaat en reactieteller; behoud de ingestelde berichtgrootte. */
#rd-rich-chat #chat-window .irc-compact-text .irc-reply-quote {
  font-size:calc(var(--rdc-message-font-size, 15px) * .72)!important;
  line-height:1.25!important;padding:3px 7px!important;
}
#rd-rich-chat #chat-window .irc-compact-text .irc-reply-quote span,
#rd-rich-chat #chat-window .irc-compact-text .irc-reply-quote q {
  font-size:inherit!important;line-height:inherit!important;font-weight:500!important;
}
#rd-rich-chat #chat-window .irc-compact-text .irc-reaction-counts:not(:empty) {
  gap:3px!important;margin:1px 0 0!important;
}
#rd-rich-chat #chat-window .irc-compact-text .irc-reaction-count {
  display:inline-flex!important;gap:2px!important;margin:0!important;padding:1px 4px!important;
  min-height:0!important;font-size:11px!important;line-height:1.15!important;
}
#rd-rich-chat #chat-window .irc-compact-text .irc-reaction-count .reaction-emoji {font-size:12px!important;line-height:1!important;}
#rd-rich-chat #btn-mod-tools.hidden,#rd-rich-chat #btn-channel-control.hidden {display:none!important;}
#rd-rich-chat .rd-request-tab-button {display:inline-flex!important;align-items:center;justify-content:center;text-decoration:none!important;white-space:nowrap;}
/* De chatspeler toont de eigen luisteraarsbanner alleen bij aanwijzen. */
@media (min-width:961px) {
  .twitch-player-stage.is-chat-placement .rd-chat-live-overlay {
    font-size:11px!important;padding:5px 7px!important;gap:5px!important;
  }
}
@media (hover:hover) and (pointer:fine) {
  .twitch-player-stage .rd-chat-live-overlay {opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s ease;}
  .twitch-player-stage:hover .rd-chat-live-overlay,.twitch-player-stage:focus-within .rd-chat-live-overlay {opacity:1;visibility:visible;}
}

@media (min-width:961px){.twitch-player-stage.is-chat-placement .rd-chat-live-overlay {font-size:12px!important;padding:4px 6px!important;}}

/* Hogere banner dekt Twitch-informatie in de kleine chatspeler tijdens hover. */
@media (min-width:961px) {
  .twitch-player-stage.is-chat-placement .rd-chat-live-overlay {
    box-sizing:border-box;top:0;left:0;width:100%;max-width:100%;height:88px;
    align-items:flex-start;padding:8px 7px!important;background:#b51748;
  }
}
@media (hover:hover) and (pointer:fine) {
  .twitch-player-stage.is-chat-placement .rd-chat-live-overlay,
  .twitch-player-stage .rd-chat-live-overlay {opacity:0!important;visibility:hidden!important;}
  .twitch-player-stage.is-chat-placement:hover .rd-chat-live-overlay,
  .twitch-player-stage:hover .rd-chat-live-overlay {opacity:1!important;visibility:visible!important;}
}

.rd-twitch-tools button[hidden]{display:none!important;}
.rd-twitch-tools{flex-wrap:wrap;justify-content:flex-end;max-width:calc(100% - 14px);}

/* Laat de luisteraarsbanner en startknop ook zonder hover zien bij pauze. */
.twitch-player-stage.is-player-paused .rd-chat-live-overlay,
.twitch-player-stage.is-chat-placement.is-player-paused .rd-chat-live-overlay {
  opacity:1!important;visibility:visible!important;
}

/* Houd de bestaande player boven de chatlaag zodat iframe en knoppen klikken ontvangen. */
@media (min-width:961px) {
  .live-video-module.has-chat-player {position:relative!important;z-index:1100!important;}
  .twitch-player-stage.is-chat-placement {z-index:1101!important;pointer-events:auto!important;}
  .twitch-player-stage.is-chat-placement .twitch-player,
  .twitch-player-stage.is-chat-placement .twitch-player iframe {pointer-events:auto!important;}
  .twitch-player-stage.is-chat-placement .rd-twitch-tools {pointer-events:none!important;}
  .twitch-player-stage.is-chat-placement .rd-twitch-tools button {pointer-events:auto!important;}
  .twitch-player-stage.is-chat-placement .rd-chat-live-overlay {pointer-events:none!important;}
}

/* De luisteraarsbalk blijft zichtbaar op alle chatspelers. */
.twitch-player-stage .rd-chat-live-overlay,
.twitch-player-stage.is-chat-placement .rd-chat-live-overlay{opacity:1!important;visibility:visible!important}