:root {

    /*
    |--------------------------------------------------------------------------
    | Colors
    |--------------------------------------------------------------------------
    */

    --chat-bg:
        rgba(10, 10, 10, 0.96);

    --chat-border:
        rgba(255, 70, 70, 0.15);

    --chat-soft-border:
        rgba(255,255,255,0.05);

    --chat-red:
        #ff4747;

    --chat-text:
        #ffffff;

    --chat-text-soft:
        #aaaaaa;

    /*
    |--------------------------------------------------------------------------
    | VIP
    |--------------------------------------------------------------------------
    */

    --chat-vip-gold:
        #ffd95e;

    --chat-vip-orange:
        #ff9f43;
}

/*
|--------------------------------------------------------------------------
| Scrollbar
|--------------------------------------------------------------------------
*/

.chat-messages::-webkit-scrollbar {
    width: 6px;
}

.chat-messages::-webkit-scrollbar-thumb {
    background:
        rgba(255,255,255,0.12);

    border-radius: 30px;
}

/*
|--------------------------------------------------------------------------
| Shared Animations
|--------------------------------------------------------------------------
*/

@keyframes chatFade {

    from {

        opacity: 0;

        transform:
            translateY(10px);
    }

    to {

        opacity: 1;

        transform:
            translateY(0);
    }
}

@keyframes chatGlow {

    0% {

        box-shadow:
            0 0 12px rgba(255, 70, 70, 0.12);
    }

    50% {

        box-shadow:
            0 0 20px rgba(255, 70, 70, 0.18);
    }

    100% {

        box-shadow:
            0 0 12px rgba(255, 70, 70, 0.12);
    }
}

/*
|--------------------------------------------------------------------------
| Shared
|--------------------------------------------------------------------------
*/

.hidden {
    display: none;
}

.chat-message {

    animation:
        chatMessageAppear .18s ease;
}

.private-message {

    animation:
        chatMessageAppear .18s ease;
}

@keyframes chatMessageAppear {

    from {

        opacity: 0;

        transform:
            translateY(10px);
    }

    to {

        opacity: 1;

        transform:
            translateY(0);
    }
}

.chat-system-message {

    display: flex;
    justify-content: center;

    margin: 18px 0;
}

.chat-system-message-inner {

    padding: 10px 18px;

    border-radius: 999px;

    background:
        rgba(255,255,255,0.06);

    color:
        rgba(255,255,255,0.7);

    font-size: 13px;
    font-weight: 700;
}

/*
|--------------------------------------------------------------------------
| Chat Scroll Protection
|--------------------------------------------------------------------------
*/

.chat-popup,
.chat-window,
.private-chat-messages,
.chat-messages {

    overscroll-behavior: contain;
}

input,
textarea {

    font-size: 16px;
}