/* ==================================================
   CHIBI'S ROOM — LIVE CHAT
   ================================================== */


.hidden {
    display: none !important;
}


/* ==================================================
   MAIN CHAT WINDOW
   ================================================== */

.room-chat {
    width: 440px;

    max-width: 92%;

    margin:
        34px auto 30px;

    background:
        #efe8df;

    border:
        2px solid #526b52;

    box-shadow:
        5px 5px 0 #222222;

    color:
        #252525;

    text-align:
        left;

    position:
        relative;

    z-index:
        1;
}


/* ==================================================
   CHAT TOP BAR
   ================================================== */

.room-chat-top {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        6px 9px;

    background:
        #526b52;

    color:
        #ffcad4;

    border-bottom:
        2px solid black;

    font-size:
        17px;

    letter-spacing:
        2px;
}


.room-chat-live {
    color:
        #d8e9c9;

    font-size:
        13px;

    letter-spacing:
        1px;
}


.room-chat-live.connected {
    color:
        #d8e9c9;

    animation:
        room-chat-blink
        1.8s
        steps(2)
        infinite;
}


.room-chat-live.error {
    color:
        #ffb7c5;
}


@keyframes room-chat-blink {

    50% {
        opacity:
            0.4;
    }

}


/* ==================================================
   SUBTITLE
   ================================================== */

.room-chat-subtitle {
    padding:
        7px 10px;

    background:
        #ffb7c5;

    color:
        black;

    border-bottom:
        1px dashed #526b52;

    text-align:
        center;

    font-size:
        14px;

    letter-spacing:
        1px;
}


/* ==================================================
   CURRENT IDENTITY
   ================================================== */

.room-chat-identity {
    padding:
        6px 10px;

    color:
        #526b52;

    background:
        #fff7e8;

    border-bottom:
        1px solid #b2a99d;

    font-size:
        14px;

    letter-spacing:
        1px;
}


.room-chat-identity strong {
    color:
        black;

    font-weight:
        normal;
}


/* ==================================================
   MESSAGES SCREEN
   ================================================== */

.room-chat-messages {
    height:
        230px;

    overflow-y:
        auto;

    padding:
        10px;

    background:
        #171d18;

    color:
        #cde8b5;

    border:
        7px solid #efe8df;

    border-bottom:
        0;

    box-shadow:
        inset 0 0 15px #050705;

    scrollbar-color:
        #526b52
        #171d18;

    scrollbar-width:
        thin;

    position:
        relative;

    z-index:
        2;

    pointer-events:
        auto;
}


.room-chat-loading {
    margin:
        10px 0;

    color:
        #70836c;

    text-align:
        center;

    font-size:
        14px;

    letter-spacing:
        2px;
}


/* ==================================================
   INDIVIDUAL MESSAGE
   ================================================== */

.room-chat-message {
    padding:
        5px 0 7px;

    border-bottom:
        1px dotted #344035;

    line-height:
        1.25;

    position:
        relative;

    z-index:
        3;

    pointer-events:
        auto;
}


.room-chat-message:last-child {
    border-bottom:
        none;
}


.room-chat-message-top {
    display:
        flex;

    align-items:
        baseline;

    justify-content:
        space-between;

    gap:
        10px;
}


.room-chat-name-label {
    color:
        #ffb7c5;

    font-size:
        16px;

    word-break:
        break-word;
}


.room-chat-owner {
    display:
        inline-block;

    margin-left:
        5px;

    padding:
        0 3px;

    color:
        #171d18;

    background:
        #cde8b5;

    font-size:
        11px;

    letter-spacing:
        1px;
}


.room-chat-time {
    flex-shrink:
        0;

    color:
        #70836c;

    font-size:
        11px;
}


.room-chat-body {
    margin:
        2px 0 0;

    color:
        #cde8b5;

    font-size:
        16px;

    overflow-wrap:
        anywhere;
}


/* ==================================================
   CHIBI ADMIN DELETE
   ================================================== */

.room-chat-delete {
    display:
        block !important;

    width:
        auto !important;

    min-width:
        0 !important;

    margin:
        5px 0 0 auto !important;

    padding:
        2px 6px !important;

    background:
        transparent !important;

    color:
        #ff7f96 !important;

    border:
        1px solid #9f1b29 !important;

    box-shadow:
        none !important;

    border-radius:
        0 !important;

    font-family:
        "VT323",
        monospace !important;

    font-size:
        12px !important;

    line-height:
        1.1 !important;

    letter-spacing:
        1px;

    cursor:
        pointer !important;

    position:
        relative;

    z-index:
        999 !important;

    pointer-events:
        auto !important;

    touch-action:
        manipulation;

    user-select:
        none;
}


.room-chat-delete:hover {
    background:
        #9f1b29 !important;

    color:
        #ffffff !important;

    transform:
        none !important;
}


.room-chat-delete.confirming {
    background:
        #9f1b29 !important;

    color:
        #ffffff !important;

    border-color:
        #ffb7c5 !important;
}


.room-chat-delete:disabled {
    opacity:
        0.45;

    cursor:
        default !important;
}


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

#room-chat-form {
    padding:
        8px 9px 6px;

    background:
        #efe8df;

    border-top:
        1px solid #526b52;
}


.room-chat-name-area {
    margin-bottom:
        6px;
}


.room-chat-name,
.room-chat-input {
    box-sizing:
        border-box;

    padding:
        7px 8px;

    background:
        #fff7e8;

    color:
        black;

    border:
        2px inset #b6ada1;

    border-radius:
        0;

    outline:
        none;

    font-family:
        "VT323",
        monospace;

    font-size:
        17px;
}


.room-chat-name {
    width:
        125px;
}


.room-chat-input {
    width:
        100%;
}


.room-chat-name:focus,
.room-chat-input:focus {
    border-color:
        #526b52;
}


.room-chat-name::placeholder,
.room-chat-input::placeholder {
    color:
        #8b837b;
}


/* ==================================================
   INPUT ROW
   ================================================== */

.room-chat-input-row {
    display:
        grid;

    grid-template-columns:
        1fr auto;

    gap:
        6px;
}


/* ==================================================
   SEND BUTTON
   ================================================== */

.room-chat-send {
    min-width:
        88px;

    padding:
        5px 10px;

    background:
        #ffb7c5;

    color:
        #263226;

    border:
        2px outset #ffffff;

    box-shadow:
        none;

    font-family:
        "VT323",
        monospace;

    font-size:
        16px;

    white-space:
        nowrap;

    cursor:
        pointer;
}


.room-chat-send:hover {
    background:
        #526b52;

    color:
        #ffced8;

    transform:
        none;
}


.room-chat-send:disabled {
    opacity:
        0.5;

    cursor:
        default;
}


/* ==================================================
   STATUS
   ================================================== */

.room-chat-status {
    min-height:
        16px;

    padding:
        0 9px 5px;

    background:
        #efe8df;

    color:
        #8b6370;

    text-align:
        center;

    font-size:
        12px;

    letter-spacing:
        1px;
}


/* ==================================================
   BOTTOM DECORATION
   ================================================== */

.room-chat-bottom {
    padding:
        4px;

    background:
        #ffb7c5;

    color:
        #526b52;

    border-top:
        1px solid #526b52;

    text-align:
        center;

    font-size:
        12px;

    letter-spacing:
        5px;
}


/* ==================================================
   MOBILE
   ================================================== */

@media (max-width: 650px) {

    .room-chat {
        width:
            94%;
    }


    .room-chat-messages {
        height:
            210px;
    }


    .room-chat-input-row {
        grid-template-columns:
            1fr;
    }


    .room-chat-send {
        width:
            100%;
    }


    .room-chat-name {
        width:
            100%;
    }

}