.chat-messages {

    flex: 1;

    overflow-y: auto;

    padding: 14px;

    display: flex;
    flex-direction: column;

    gap: 12px;
}

/*
|--------------------------------------------------------------------------
| Message
|--------------------------------------------------------------------------
*/

.chat-message {

    padding: 12px;

    border-radius: 14px;

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

    border:
        1px solid rgba(255,255,255,0.04);

    animation:
        messageAppear .22s ease;
}

@keyframes messageAppear {

    from {

        opacity: 0;

        transform:
            translateY(10px)
            scale(.98);
    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}

/*
|--------------------------------------------------------------------------
| Hover
|--------------------------------------------------------------------------
*/

.chat-message:hover {

    background:
        rgba(255,255,255,0.05);
}

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

.chat-message.vip {

    position: relative;

    padding: 15px 16px;

    background:
        linear-gradient(
            180deg,
            rgba(255,220,120,0.07),
            rgba(255,170,70,0.025)
        );

    border:
        1px solid rgba(255,210,120,0.16);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.03),
        0 0 30px rgba(255,190,0,0.03);

    backdrop-filter: blur(8px);
}

.chat-message.vip:hover {

    border:
        1px solid rgba(255,220,120,0.26);

    box-shadow:
        0 0 24px rgba(255,190,0,0.08);
}

/*
|--------------------------------------------------------------------------
| Top
|--------------------------------------------------------------------------
*/

.chat-top {

    display: flex;
    align-items: center;

    gap: 8px;

    margin-bottom: 6px;
}

/*
|--------------------------------------------------------------------------
| Username
|--------------------------------------------------------------------------
*/

.chat-name {

    color:
        var(--chat-text);

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

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

.chat-message.vip .chat-name {

    background:
        linear-gradient(
            90deg,
            var(--chat-vip-gold),
            var(--chat-vip-orange)
        );

    -webkit-background-clip: text;

    -webkit-text-fill-color:
        transparent;
}

/*
|--------------------------------------------------------------------------
| Level
|--------------------------------------------------------------------------
*/

.chat-level {

    height: 20px;

    padding: 0 7px;

    border-radius: 30px;

    display: flex;
    align-items: center;

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

    color:
        var(--chat-text-soft);

    font-size: 11px;
}

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

.chat-vip-badge {

    height: 20px;

    padding: 0 8px;

    border-radius: 30px;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            90deg,
            #ffd95e,
            #ff9f43
        );

    color: #111;

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

/*
|--------------------------------------------------------------------------
| Text
|--------------------------------------------------------------------------
*/

.chat-text {

    color:
        #dddddd;

    font-size: 14px;

    line-height: 1.45;

    word-break: break-word;
}

.chat-time {

    margin-left: auto;

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

    font-size: 11px;
}

/*
|--------------------------------------------------------------------------
| Own Message
|--------------------------------------------------------------------------
*/

.chat-message.own {

    margin-left: 45px;

    background:
        linear-gradient(
            135deg,
            rgba(255,70,70,0.18),
            rgba(255,40,40,0.08)
        );

    border:
        1px solid rgba(255,70,70,0.22);

    box-shadow:
        0 0 18px rgba(255,70,70,0.08);
}

/*
|--------------------------------------------------------------------------
| Own Hover
|--------------------------------------------------------------------------
*/

.chat-message.own:hover {

    background:
        linear-gradient(
            135deg,
            rgba(255,70,70,0.22),
            rgba(255,40,40,0.10)
        );
}

/*
|--------------------------------------------------------------------------
| Own Username
|--------------------------------------------------------------------------
*/

.chat-message.own .chat-name {

    color:
        #ff8e8e;
}

/*
|--------------------------------------------------------------------------
| Own Text
|--------------------------------------------------------------------------
*/

.chat-message.own .chat-text {

    color:
        #ffffff;
}

/*
|--------------------------------------------------------------------------
| Own Level
|--------------------------------------------------------------------------
*/

.chat-message.own .chat-level {

    background:
        rgba(255,70,70,0.12);

    color:
        #ffb1b1;
}

/*
|--------------------------------------------------------------------------
| Message Layout
|--------------------------------------------------------------------------
*/

.chat-top {

    display: flex;

    align-items: flex-start;

    gap: 12px;
}

.chat-message-content {

    flex: 1;
}

.chat-message-header {

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 6px;
}

/*
|--------------------------------------------------------------------------
| Avatar
|--------------------------------------------------------------------------
*/

.chat-avatar {

    position: relative;

    width: 42px;
    height: 42px;

    min-width: 42px;

    border-radius: 14px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #2c2c2c,
            #1a1a1a
        );

    color: white;

    font-size: 15px;
    font-weight: 800;

    border:
        1px solid rgba(255,255,255,0.05);
}

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

.chat-avatar.vip {

    background:
        linear-gradient(
            135deg,
            #ffd95e,
            #ff9f43
        );

    color: #111;

    box-shadow:
        0 0 18px rgba(255,190,0,0.16);
}

/*
|--------------------------------------------------------------------------
| Online Dot
|--------------------------------------------------------------------------
*/

.chat-avatar-online {

    position: absolute;

    right: -2px;
    bottom: -2px;

    width: 12px;
    height: 12px;

    border-radius: 50%;

    background: #39ff88;

    border:
        2px solid rgba(12,12,12,0.95);

    box-shadow:
        0 0 10px rgba(57,255,136,0.45);
}

/*
|--------------------------------------------------------------------------
| Own Message Layout
|--------------------------------------------------------------------------
*/

.chat-message.own {

    margin-left: 40px;
}

.chat-message.own .chat-top {

    flex-direction: row-reverse;
}

.chat-message.own .chat-message-header {

    justify-content: flex-end;
}

.chat-message.own .chat-text {

    text-align: right;
}

/*
|--------------------------------------------------------------------------
| Own Content Alignment
|--------------------------------------------------------------------------
*/

.chat-message.own .chat-message-content {

    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.chat-avatar-image {

    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 14px;
}

/*
|--------------------------------------------------------------------------
| Admin Message
|--------------------------------------------------------------------------
*/

.chat-message.admin {

    background:
        linear-gradient(
            180deg,
            rgba(90,120,255,0.10),
            rgba(70,90,255,0.04)
        );

    border:
        1px solid rgba(120,150,255,0.16);

    box-shadow:
        0 0 24px rgba(90,120,255,0.06);
}

/*
|--------------------------------------------------------------------------
| Admin Username
|--------------------------------------------------------------------------
*/

.chat-message.admin .chat-name {

    color:
        #8fb3ff;
}

/*
|--------------------------------------------------------------------------
| Admin Badge
|--------------------------------------------------------------------------
*/

.chat-admin-badge {

    height: 20px;

    padding: 0 8px;

    border-radius: 30px;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            90deg,
            #7da2ff,
            #587bff
        );

    color: white;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .4px;

    box-shadow:
        0 0 12px rgba(88,123,255,0.25);
}

/*
|--------------------------------------------------------------------------
| Chat clear
|--------------------------------------------------------------------------
*/

.chat-system-message-inner {

    padding: 12px 22px;

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            rgba(255,70,70,0.14),
            rgba(255,30,30,0.06)
        );

    border:
        1px solid rgba(255,70,70,0.16);

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

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 1px;

    text-transform: uppercase;

    backdrop-filter:
        blur(10px);

    box-shadow:
        0 0 18px rgba(255,70,70,0.08);
}