#chat_overlay {
    position: absolute;
    left: 10px;
    top: 50%;
    bottom: 40px;  /* sama dengan height + bottom dari #chat_textbox */
    width: 280px;
    overflow: hidden;
    z-index: 5;
    pointer-events: none;
    display: block;
}

#chat_overlay.chat-hidden {
    display: none;
}

.chat-row {
    display: block;
    width: fit-content;    /* ← background ngikutin konten */
    max-width: 280px;      /* ← biar ga overflow */
    padding: 1px 8px;
    margin: 1px 0;
    font-size: 15px;
    line-height: 1.4;
    font-family: Arial, Helvetica, sans-serif;
    pointer-events: auto;
    cursor: pointer;
    transition: background 0.15s;
    word-break: break-word;
}

.chat-row.has-bg {
    padding: 2px 8px;
}

.chat-name {
    font-weight: bold;
    font-size: 15px;
    margin-right: 2px;
    /* hapus flex-shrink, ganti jadi inline */
}

.chat-name, .chat-msg {
    display: inline;
}

.chat-name.is-admin {
    animation: adminRainbow 1s linear infinite;
    text-shadow: 0 0 8px currentColor;
}

.chat-name.is-mod {
    color: #00eeff;
    animation: modLightning 0.1s steps(1) infinite;
    text-shadow: 0 0 10px #00eeff, 0 0 20px #00eeff;
}

.chat-msg {
    font-size: 15px;
    font-family: Arial, Helvetica, sans-serif;
}

.chat-msg.is-guild {
    color: #FF8C00;
    font-family: Ubuntu, Arial, sans-serif;
}

.chat-msg.has-glow {
    text-shadow:
        0 0 4px var(--msg-glow-color),
        0 0 12px var(--msg-glow-color),
        0 0 20px var(--msg-glow-color);
}

.chat-row.fading {
    animation: chatFadeOut 3s forwards;
}

@keyframes chatFadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes adminRainbow {
    0%   { color: hsl(0,   100%, 60%); }
    25%  { color: hsl(90,  100%, 60%); }
    50%  { color: hsl(180, 100%, 60%); }
    75%  { color: hsl(270, 100%, 60%); }
    100% { color: hsl(360, 100%, 60%); }
}

@keyframes modLightning {
    0%  { 
        color: hsl(185, 100%, 65%);
        text-shadow: 0 0 8px #00eeff, 0 0 16px #00eeff;
    }
    50% { 
        color: hsl(195, 100%, 75%);
        text-shadow: 0 0 4px #00eeff, 0 0 8px #00eeff;
    }
    100% { 
        color: hsl(185, 100%, 60%);
        text-shadow: 0 0 12px #00eeff, 0 0 24px #00eeff;
    }
}

#copyToast {
    position: fixed;
    bottom: 70px;
    left: 10px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 13px;
    z-index: 9999;
    pointer-events: none;
    transition: opacity 0.5s;
}