* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background: transparent;
    overflow: hidden;
    font-family: 'Segoe UI', Arial, sans-serif;
}

#chat {
    position: fixed;
    left: var(--chat-left, 72%);
    top: var(--chat-top, 5%);
    width: var(--chat-width, 27%);
    height: var(--chat-height, 88%);
    font-size: var(--chat-font-size, 14px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 8px;
    gap: 4px;
}

.chat-msg {
    background: rgba(0, 0, 0, var(--chat-bg-opacity, 0.55));
    border-radius: 6px;
    padding: 5px 8px;
    color: var(--chat-text-color, #fff);
    line-height: 1.4;
    word-break: break-word;
    animation: fadein 0.2s ease;
}

.uname { font-weight: bold; }

#alert {
    position: fixed;
    left: var(--alert-left, 50%);
    top: var(--alert-top, 40%);
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, var(--alert-bg-opacity, 0.8));
    color: var(--alert-text-color, #fff);
    padding: 1rem 2rem;
    border-radius: 12px;
    font-size: var(--alert-font-size, 24px);
    font-weight: bold;
    text-align: center;
    max-width: 80vw;
    animation: popin 0.3s ease;
}

#alert-video-wrap {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
}

#alert-video {
    max-width: 80vw;
    max-height: 80vh;
    border-radius: 8px;
}

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

@keyframes popin {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}