/* =========================================
PUSSYMQ CHAT
PIXEL / 2000s / MODERN
========================================= */

:root {
    --black: #08090a;
    --dark: #101214;
    --panel: #151719;
    --panel-light: #1b1e21;
    --line: #34383c;


    --green: #b7ff00;
    --green-dark: #6f9900;

    --white: #f1f1e8;
    --gray: #92979c;
    --dim: #555b60;

    --pixel-font: "Courier New", monospace;


}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    margin: 0;
    min-height: 100vh;


    background:
        radial-gradient(circle at 50% 20%,
            #202428 0%,
            var(--black) 55%);

    color: var(--white);

    font-family: var(--pixel-font);

    image-rendering: pixelated;


}

/* =========================================
CRT EFFECT
========================================= */

body::before {
    content: "";


    position: fixed;
    inset: 0;

    pointer-events: none;

    z-index: 100;

    background:
        repeating-linear-gradient(to bottom,
            rgba(255, 255, 255, 0.025) 0px,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px,
            transparent 4px);

    opacity: 0.45;


}

body::after {
    content: "";


    position: fixed;
    inset: 0;

    pointer-events: none;

    z-index: 101;

    box-shadow:
        inset 0 0 100px rgba(0, 0, 0, 0.85),
        inset 0 0 20px rgba(183, 255, 0, 0.04);


}

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

.crt-screen {
    width: min(1200px, calc(100% - 40px));


    margin: 20px auto;

    border: 2px solid var(--line);

    background: var(--dark);

    box-shadow:
        8px 8px 0 #030404,
        0 0 50px rgba(0, 0, 0, 0.5);

    animation: screenBoot 0.6s steps(5);


}

/* =========================================
HEADER
========================================= */

.chat-header {
    min-height: 68px;


    display: grid;

    grid-template-columns: 1fr auto auto;

    align-items: center;

    gap: 30px;

    padding: 0 22px;

    border-bottom: 2px solid var(--line);

    background: #111315;


}

.chat-logo {
    display: flex;
    align-items: center;
    gap: 10px;


    color: var(--white);

    text-decoration: none;

    font-weight: bold;


}

.pixel-mark {
    display: inline-flex;


    width: 34px;
    height: 34px;

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

    border: 2px solid var(--green);

    color: var(--green);

    font-size: 11px;

    box-shadow:
        3px 3px 0 var(--green-dark);


}

.logo-text {
    font-size: 18px;
    letter-spacing: 2px;
}

.logo-separator {
    color: var(--dim);
}

.logo-section {
    color: var(--green);


    font-size: 13px;


}

.header-status {
    display: flex;
    align-items: center;
    gap: 8px;


    color: var(--gray);

    font-size: 10px;


}

.status-light {
    width: 8px;
    height: 8px;


    background: var(--green);

    box-shadow:
        0 0 8px var(--green);

    animation: pulse 1.5s infinite;


}
.status-light1 {
    width: 0px;
    height: 0px;


}


.header-user {
    font-size: 10px;


    color: var(--gray);


}

.username {
    color: var(--green);
}

/* =========================================
MAIN
========================================= */

.chat-main {
    padding: 26px;
}

/* =========================================
HERO
========================================= */

.pixel-hero {
    position: relative;


    min-height: 310px;

    display: flex;
    align-items: center;

    overflow: hidden;

    border: 2px solid var(--line);

    background:
        linear-gradient(135deg,
            #1a1d20 0%,
            #0e1011 70%);

    box-shadow:
        6px 6px 0 #050606;

    margin-bottom: 30px;


}

.hero-noise {
    position: absolute;
    inset: 0;


    opacity: 0.08;

    background-image:
        linear-gradient(90deg,
            transparent 50%,
            rgba(183, 255, 0, 0.3) 50%);

    background-size: 6px 6px;


}

.hero-content {
    position: relative;


    padding: 40px;

    z-index: 2;

    animation: heroIn 0.8s steps(8);


}

.system-line {
    color: var(--gray);


    font-size: 11px;

    margin-bottom: 8px;


}

.system-line.success {
    color: var(--green);
}

.pixel-hero h1 {
    margin: 25px 0 10px;


    font-size: clamp(38px, 7vw, 76px);

    line-height: 0.95;

    letter-spacing: 4px;

    text-shadow:
        4px 4px 0 #000;


}

.pixel-hero h1 span {
    display: block;


    color: var(--green);

    font-size: 0.48em;

    margin-top: 14px;

    letter-spacing: 6px;


}

.pixel-hero p {
    margin: 25px 0 0;


    color: var(--gray);

    font-size: 12px;

    letter-spacing: 3px;


}

.hero-cursor {
    display: inline-block;


    margin-top: 15px;

    color: var(--green);

    font-size: 20px;

    animation: blink 1s steps(2) infinite;


}

.hero-decoration {
    position: absolute;


    right: 45px;
    top: 45px;

    display: grid;

    grid-template-columns: repeat(2, 50px);

    gap: 10px;

    color: var(--dim);

    font-size: 11px;

    transform: rotate(12deg);

    opacity: 0.6;


}

/* =========================================
SECTION BAR
========================================= */

.section-bar {
    display: flex;


    justify-content: space-between;
    align-items: center;

    padding: 12px 15px;

    border: 2px solid var(--line);

    background: var(--panel);

    margin-bottom: 15px;


}

.section-title {
    display: flex;
    align-items: center;


    gap: 10px;

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


}

.section-icon {
    color: var(--green);
}

.channel-count {
    color: var(--gray);


    font-size: 9px;


}

/* =========================================
ROOMS
========================================= */

.rooms-grid {
    display: grid;


    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;


}

.room-card {
    position: relative;


    min-height: 230px;

    padding: 20px;

    border: 2px solid var(--line);

    background:
        linear-gradient(135deg,
            var(--panel-light),
            var(--panel));

    color: var(--white);

    text-decoration: none;

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

    transition:
        transform 0.15s steps(2),
        border-color 0.15s linear,
        background 0.15s linear;

    animation: cardIn 0.5s steps(6) both;


}

.room-card:nth-child(2) {
    animation-delay: 80ms;
}

.room-card:nth-child(3) {
    animation-delay: 160ms;
}

.room-card:nth-child(4) {
    animation-delay: 240ms;
}

.room-card:hover {
    transform: translate(-3px, -3px);


    border-color: var(--green);

    background:
        linear-gradient(135deg,
            #20251a,
            var(--panel));

    box-shadow:
        8px 8px 0 #050606,
        0 0 25px rgba(183, 255, 0, 0.08);


}

.room-card:active {
    transform: translate(3px, 3px);


    box-shadow:
        2px 2px 0 #050606;


}

.room-top {
    display: flex;


    justify-content: space-between;

    color: var(--dim);

    font-size: 9px;


}

.room-signal {
    color: var(--green);


    font-size: 8px;


}

.room-icon {
    display: flex;


    width: 48px;
    height: 48px;

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

    margin-top: 22px;

    border: 2px solid var(--green);

    color: var(--green);

    font-size: 18px;

    box-shadow:
        3px 3px 0 var(--green-dark);


}

.room-card h2 {
    margin: 18px 0 8px;


    font-size: 19px;

    letter-spacing: 2px;


}

.room-card p {
    max-width: 400px;


    margin: 0;

    color: var(--gray);

    font-family: Arial, sans-serif;

    font-size: 12px;

    line-height: 1.7;


}

.room-bottom {
    position: absolute;


    left: 20px;
    right: 20px;
    bottom: 17px;

    display: flex;

    justify-content: space-between;

    padding-top: 13px;

    border-top: 1px solid var(--line);

    color: var(--gray);

    font-size: 9px;


}

.room-bottom b {
    color: var(--green);
}

.enter-room {
    color: var(--white);


    transition: color 0.15s;


}

.room-card:hover .enter-room {
    color: var(--green);
}

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

.network-status {
    display: grid;


    grid-template-columns:
        repeat(4, 1fr);

    margin-top: 30px;

    border: 2px solid var(--line);

    background: var(--panel);


}

.status-block {
    padding: 16px;


    border-right: 1px solid var(--line);


}

.status-block:last-child {
    border-right: 0;
}

.status-label {
    display: block;


    color: var(--dim);

    font-size: 8px;

    margin-bottom: 8px;


}

.status-value {
    color: var(--green);


    font-size: 12px;

    font-weight: bold;


}

/* =========================================
FOOTER
========================================= */

.chat-footer {
    display: flex;


    justify-content: space-between;

    gap: 15px;

    padding: 15px 22px;

    border-top: 2px solid var(--line);

    color: var(--dim);

    font-size: 8px;

    letter-spacing: 1px;


}

/* =========================================
ANIMATIONS
========================================= */

@keyframes screenBoot {


    0% {
        opacity: 0;
        transform: scaleY(0.02);
    }

    60% {
        opacity: 1;
        transform: scaleY(1.02);
    }

    100% {
        transform: scaleY(1);
    }


}

@keyframes heroIn {


    0% {
        opacity: 0;
        transform: translateX(-30px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }


}

@keyframes cardIn {


    0% {
        opacity: 0;
        transform: translateY(15px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }


}

@keyframes pulse {


    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.25;
    }


}

@keyframes blink {


    0%,
    49% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: 0;
    }


}

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

@media (max-width: 800px) {


    .crt-screen {
        width: calc(100% - 20px);

        margin: 10px auto;
    }


    .chat-header {
        grid-template-columns: 1fr auto;

        gap: 10px;

        padding: 12px 15px;
    }


    .header-user {
        display: none;
    }


    .header-status {
        font-size: 8px;
    }


    .chat-main {
        padding: 15px;
    }


    .pixel-hero {
        min-height: 280px;
    }


    .hero-content {
        padding: 25px;
    }


    .pixel-hero h1 {
        font-size: 38px;
    }


    .hero-decoration {
        right: 15px;
        top: 20px;

        opacity: 0.25;
    }


    .rooms-grid {
        grid-template-columns: 1fr;
    }


    .network-status {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .status-block:nth-child(2) {
        border-right: 0;
    }


    .status-block:nth-child(-n+2) {
        border-bottom: 1px solid var(--line);
    }


    .chat-footer {
        flex-direction: column;
    }


}






/* =========================================
   ROOM LAYOUT
========================================= */

/* =========================================
   ROOM LAYOUT
========================================= */

.room-layout {
    display: grid;

    grid-template-columns:
        190px minmax(0, 1fr) 180px;

    /*
     * The chat area must have a fixed height.
     * Only .messages-area will scroll.
     */
    height: 650px;

    min-height: 0;

    overflow: hidden;
}


/* =========================================
   CHAT CENTER
========================================= */

.room-chat {
    display: flex;

    flex-direction: column;

    min-width: 0;
    min-height: 0;

    height: 100%;

    background: #0d0f10;

    overflow: hidden;
}


/* =========================================
   ROOM HEADER
========================================= */

.room-header {
    flex-shrink: 0;

    display: flex;

    justify-content: space-between;
    align-items: center;

    padding: 16px 20px;

    border-bottom: 2px solid var(--line);

    background: #0d0f10;
}


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

.messages-area {
    /*
     * CRITICAL:
     * This is the ONLY scrolling container.
     */

    flex: 1;

    min-height: 0;

    overflow-y: auto;
    overflow-x: hidden;

    padding: 22px;

    /*
     * Keeps scrolling inside this element.
     */
    overscroll-behavior: contain;

    /*
     * Smooth scrollbar behavior.
     */
    scrollbar-width: thin;
}








/* =========================================
   CHAT SCROLLBAR
========================================= */

.messages-area::-webkit-scrollbar {
    width: 8px;
}

.messages-area::-webkit-scrollbar-track {
    background: #080909;
    border-left: 1px solid var(--line);
}

.messages-area::-webkit-scrollbar-thumb {
    background: var(--line);
}

.messages-area::-webkit-scrollbar-thumb:hover {
    background: var(--green-dark);
}







/* =========================================
   MESSAGE INPUT
========================================= */

.message-input-area {
    flex-shrink: 0;

    display: flex;

    align-items: center;

    gap: 10px;

    margin: 15px;

    border: 2px solid var(--line);

    background: #080909;
}

/* =========================================
   LEFT SIDEBAR
========================================= */

.room-sidebar {
    border-right: 2px solid var(--line);

    background: #111315;

    padding: 18px 12px;
}


.room-sidebar-title {
    color: var(--dim);

    font-size: 9px;

    margin-bottom: 12px;

    letter-spacing: 1px;
}


.room-nav-item {
    display: flex;

    gap: 8px;

    padding: 10px;

    margin-bottom: 4px;

    color: var(--gray);

    text-decoration: none;

    font-size: 10px;

    border: 1px solid transparent;
}


.room-nav-item span {
    color: var(--dim);
}


.room-nav-item:hover,
.room-nav-item.active {
    color: var(--green);

    border-color: var(--line);

    background: var(--panel);
}


.room-nav-item.active span {
    color: var(--green);
}


.sidebar-divider {
    height: 1px;

    background: var(--line);

    margin: 22px 0;
}


.online-user {
    display: flex;

    align-items: center;

    gap: 8px;

    padding: 7px 5px;

    color: var(--gray);

    font-size: 10px;
}


.online-user span {
    width: 6px;
    height: 6px;

    background: var(--green);

    box-shadow: 0 0 6px var(--green);
}


/* =========================================
   CHAT CENTER
========================================= */

.room-chat {
    display: flex;

    flex-direction: column;

    min-width: 0;

    background: #0d0f10;
}


.room-header {
    display: flex;

    justify-content: space-between;
    align-items: center;

    padding: 16px 20px;

    border-bottom: 2px solid var(--line);
}


.room-title {
    color: var(--white);

    font-size: 15px;

    font-weight: bold;

    letter-spacing: 1px;
}


.room-description {
    margin-top: 6px;

    color: var(--dim);

    font-size: 9px;
}


.room-users {
    display: flex;

    align-items: center;

    gap: 7px;

    color: var(--gray);

    font-size: 9px;
}


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

.messages-area {
    flex: 1;

    overflow-y: auto;

    padding: 22px;
}


.chat-date {
    text-align: center;

    color: var(--dim);

    font-size: 8px;

    margin-bottom: 25px;
}


.chat-message {
    display: flex;

    gap: 12px;

    margin-bottom: 20px;

    animation: messageIn 0.3s steps(5);
}


.message-avatar {
    flex-shrink: 0;

    width: 42px;
    height: 42px;

    display: flex;

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

    overflow: hidden;

    border: 2px solid var(--line);

    color: var(--gray);

    background: #080909;

    font-size: 11px;

    image-rendering: pixelated;
}


.message-avatar img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    image-rendering: pixelated;
}

.message-content {
    min-width: 0;
}


.message-meta {
    display: flex;

    align-items: baseline;

    gap: 10px;

    margin-bottom: 5px;
}


.message-meta strong {
    color: var(--green);

    font-size: 11px;
}


.message-meta span {
    color: var(--dim);

    font-size: 8px;
}


.message-content p {
    margin: 0;

    color: var(--white);

    font-family: Arial, sans-serif;

    font-size: 13px;

    line-height: 1.6;
}


.own-message .message-avatar {
    border-color: var(--green);

    color: var(--green);
}


.own-message .message-content p {
    color: #dfffb0;
}


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

.message-input-area {
    display: flex;

    align-items: center;

    gap: 10px;

    margin: 15px;

    border: 2px solid var(--line);

    background: #080909;
}


.input-prefix {
    padding-left: 12px;

    color: var(--green);

    font-size: 12px;
}


.message-input-area input {
    flex: 1;

    min-width: 0;

    height: 48px;

    border: 0;
    outline: 0;

    background: transparent;

    color: var(--white);

    font-family: var(--pixel-font);

    font-size: 11px;
}


.message-input-area input::placeholder {
    color: var(--dim);
}


.message-input-area button {
    height: 48px;

    padding: 0 18px;

    border: 0;
    border-left: 2px solid var(--line);

    background: var(--panel-light);

    color: var(--green);

    font-family: var(--pixel-font);

    font-size: 9px;

    cursor: pointer;
}


.message-input-area button:hover {
    background: var(--green);

    color: #080909;
}


/* =========================================
   RIGHT INFO
========================================= */

.room-info {
    border-left: 2px solid var(--line);

    background: #111315;

    padding: 18px 15px;
}


.info-title {
    color: var(--dim);

    font-size: 9px;

    letter-spacing: 1px;

    margin-bottom: 15px;
}


.room-stat {
    display: flex;

    justify-content: space-between;

    padding: 10px 0;

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

    color: var(--gray);

    font-size: 9px;
}


.room-stat strong {
    color: var(--green);
}


.info-divider {
    height: 1px;

    background: var(--line);

    margin: 22px 0;
}


.topic {
    display: inline-block;

    margin: 0 3px 6px 0;

    padding: 6px 7px;

    border: 1px solid var(--line);

    color: var(--gray);

    font-size: 8px;
}


.topic:hover {
    border-color: var(--green);

    color: var(--green);
}


@keyframes messageIn {

    from {
        opacity: 0;

        transform: translateY(5px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }
}


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

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

@media (max-width: 900px) {

    .room-layout {

        grid-template-columns:
            160px minmax(0, 1fr);

    }


    .room-info {
        display: none;
    }

}


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

@media (max-width: 650px) {

    /*
     * IMPORTANT:
     *
     * The room itself becomes the main
     * application area on mobile.
     *
     * JS scrolling remains inside
     * .messages-area.
     */

    .room-layout {

        display: flex;

        flex-direction: column;

        height:
            calc(100vh - 58px - 60px);

        min-height: 0;

        overflow: hidden;

    }


    /* =====================================
       CHANNEL BAR
    ====================================== */

    .room-sidebar {

        flex-shrink: 0;

        width: 100%;

        display: block;

        padding: 8px 10px;

        border-right: 0;

        border-bottom: 1px solid #19352a;

        background: #09120e;

        overflow: hidden;

    }


    /*
     * Horizontal channel navigation.
     */

    .room-channels {

        display: flex;

        gap: 6px;

        width: 100%;

        overflow-x: auto;

        overflow-y: hidden;

        scrollbar-width: none;

        padding-bottom: 2px;

    }


    .room-channels::-webkit-scrollbar {
        display: none;
    }


    /*
     * CHANNELS title is unnecessary
     * on small screens.
     */

    .room-sidebar-title {
        display: none;
    }


    /*
     * Hide online section completely.
     *
     * chat.js still updates #online-users,
     * but the element is simply invisible.
     */

    .room-online-title,
    .room-sidebar .sidebar-divider,
    .room-sidebar .online-users {

        display: none;

    }


    /* =====================================
       MOBILE CHANNEL BUTTONS
    ====================================== */

    .room-nav-item {

        flex-shrink: 0;

        display: flex;

        align-items: center;

        gap: 6px;

        min-height: 34px;

        margin: 0;

        padding: 0 11px;

        border: 1px solid #19352a;

        background: #0b1711;

        color: #719b83;

        font-size: 9px;

        font-weight: 800;

        letter-spacing: 0.8px;

        white-space: nowrap;

    }


    .room-nav-item span {

        color: #3d7657;

    }


    .room-nav-item:hover {

        color: #dffff0;

        border-color: #24553c;

        background: #0d2118;

    }


    .room-nav-item.active {

        color: #2cff88;

        border-color: #2cff88;

        background:

            linear-gradient(
                90deg,
                rgba(44, 255, 136, 0.10),
                rgba(44, 255, 136, 0.025)
            );

        box-shadow:
            inset 0 0 12px rgba(44, 255, 136, 0.04);

    }


    .room-nav-item.active span {

        color: #2cff88;

    }


    /* =====================================
       CHAT
    ====================================== */

    .room-chat {

        flex: 1;

        width: 100%;

        min-width: 0;

        min-height: 0;

        height: auto;

        display: flex;

        flex-direction: column;

        background: #070b0a;

        overflow: hidden;

    }


    /* =====================================
       ROOM HEADER
    ====================================== */

    .room-header {

        flex-shrink: 0;

        min-height: 58px;

        padding: 10px 14px;

        border-bottom: 1px solid #19352a;

        background: #09120e;

    }


    .room-title {

        font-size: 13px;

        letter-spacing: 1px;

    }


    .room-description {

        margin-top: 4px;

        font-size: 8px;

        color: #4f8067;

    }


    .room-users {

        gap: 5px;

        font-size: 8px;

        white-space: nowrap;

    }


    .room-users .status-light {

        width: 6px;

        height: 6px;

    }


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

    .messages-area {

        flex: 1;

        min-height: 0;

        width: 100%;

        padding: 16px 13px;

        overflow-y: auto;

        overflow-x: hidden;

        overscroll-behavior: contain;

        scrollbar-width: thin;

    }


    .chat-date {

        margin-bottom: 18px;

        font-size: 7px;

    }


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

    .chat-message {

        gap: 9px;

        margin-bottom: 17px;

    }


    .message-avatar {

        width: 34px;

        height: 34px;

        flex-shrink: 0;

        font-size: 9px;

    }


    .message-meta {

        gap: 7px;

        margin-bottom: 4px;

    }


    .message-meta strong {

        font-size: 10px;

    }


    .message-meta span {

        font-size: 7px;

    }


    .message-content {

        min-width: 0;

        max-width: calc(100vw - 70px);

    }


    .message-content p {

        font-size: 12px;

        line-height: 1.55;

        overflow-wrap: anywhere;

        word-break: break-word;

    }


    /* =====================================
       MESSAGE INPUT
    ====================================== */

    .message-input-area {

        flex-shrink: 0;

        width: auto;

        margin: 8px;

        gap: 6px;

        border: 1px solid #24553c;

        background: #060a08;

        box-shadow:
            0 0 15px rgba(0, 0, 0, 0.35);

    }


    .input-prefix {

        padding-left: 9px;

        font-size: 10px;

    }


    .message-input-area input {

        height: 43px;

        min-width: 0;

        font-size: 10px;

    }


    .message-input-area button {

        height: 43px;

        padding: 0 13px;

        border-left: 1px solid #19352a;

        font-size: 8px;

        font-weight: 800;

    }


    .message-input-area button:hover {

        background: #2cff88;

        color: #061009;

    }

}


/* =========================================
   VERY SMALL PHONES
========================================= */

@media (max-width: 420px) {

    .room-layout {

        height:
            calc(100vh - 58px - 72px);

    }


    .room-sidebar {

        padding: 7px;

    }


    .room-nav-item {

        min-height: 32px;

        padding: 0 9px;

        font-size: 8px;

    }


    .room-header {

        min-height: 54px;

        padding: 9px 11px;

    }


    .room-title {

        font-size: 12px;

    }


    .room-description {

        display: none;

    }


    .messages-area {

        padding: 13px 10px;

    }


    .message-avatar {

        width: 31px;

        height: 31px;

    }


    .message-content p {

        font-size: 11px;

    }


    .message-input-area {

        margin: 7px;

    }


    .message-input-area input {

        height: 40px;

        font-size: 9px;

    }


    .message-input-area button {

        height: 40px;

        padding: 0 10px;

    }

}

@media (max-width: 650px) {

    .room-layout {
        display: flex;

        flex-direction: column;

        height: 650px;

        min-height: 0;

        overflow: hidden;
    }

    .room-sidebar {
        flex-shrink: 0;

        display: flex;

        overflow-x: auto;

        gap: 5px;

        padding: 10px;

        border-right: 0;

        border-bottom: 2px solid var(--line);
    }

    .room-chat {
        flex: 1;

        min-height: 0;

        height: auto;
    }

    .room-sidebar-title,
    .sidebar-divider,
    .online-user {
        display: none;
    }

    .room-nav-item {
        flex-shrink: 0;

        margin: 0;

        padding: 9px;
    }

    .room-header {
        flex-shrink: 0;

        padding: 14px;
    }

    .messages-area {
        flex: 1;

        min-height: 0;

        padding: 15px;

        overflow-y: auto;
    }

    .message-input-area {
        flex-shrink: 0;

        margin: 10px;
    }
}

.online-users {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.online-user {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    color: #aaa;
    font-size: 12px;
}

.online-user .status-light {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00ff88;
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.6);
}
.online-user .status-light1 {
    width: 0px;
    height: 0px;
    border-radius: 50%;
    background: #00ff88;
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.6);
}


/* =========================================================
   PUSSYMQ CHAT BASE
   PIXEL CYBERPUNK / TERMINAL THEME
========================================================= */


/* =========================================================
   RESET
========================================================= */

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

html,
body {
    width: 100%;
    min-height: 100%;
}

body {
    font-family:
        "Courier New",
        "Lucida Console",
        monospace;

    background: #070b0a;
    color: #d7ffe9;

    font-size: 14px;
    font-weight: 600;

    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}


/* =========================================================
   CRT SCREEN
========================================================= */

.crt-screen {
    min-height: 100vh;
    position: relative;

    background:
        linear-gradient(
            rgba(0, 255, 120, 0.015) 50%,
            rgba(0, 0, 0, 0.04) 50%
        ),
        #070b0a;

    background-size:
        100% 4px,
        auto;
}


/* =========================================================
   CRT SCANLINES
========================================================= */

.crt-screen::before {
    content: "";

    position: fixed;
    inset: 0;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0px,
            transparent 3px,
            rgba(0, 255, 120, 0.025) 4px
        );

    z-index: 999;
}


/* =========================================================
   TOP NAVBAR
========================================================= */

.chat-header {
    height: 64px;

    display: flex;
    align-items: center;

    padding: 0 28px;

    border-bottom: 1px solid #19352a;

    background:
        linear-gradient(
            90deg,
            #09120e,
            #0b1511 50%,
            #09120e
        );

    position: sticky;
    top: 0;

    z-index: 100;

    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.45);
}


/* =========================================================
   LOGO
========================================================= */

.chat-logo {
    display: flex;
    align-items: center;
    gap: 10px;

    min-width: 260px;

    font-weight: 800;

    letter-spacing: 2px;
}

.pixel-mark {
    width: 34px;
    height: 34px;

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

    border: 1px solid #2cff88;

    color: #2cff88;

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

    box-shadow:
        3px 3px 0 rgba(44, 255, 136, 0.15);

    image-rendering: pixelated;
}

.logo-text {
    color: #e7fff1;

    font-size: 16px;
    font-weight: 900;

    letter-spacing: 3px;
}

.logo-separator {
    color: #276247;

    font-weight: 900;
}

.logo-section {
    color: #52c98a;

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

    letter-spacing: 2px;
}


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

.header-status {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-left: auto;
    margin-right: 35px;

    color: #79c99b;

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

    letter-spacing: 1.5px;
}

.status-light {
    width: 7px;
    height: 7px;

    display: inline-block;

    background: #35ff8a;

    box-shadow:
        0 0 7px #35ff8a;

    image-rendering: pixelated;
}


/* =========================================================
   HEADER USER
========================================================= */

.header-user {
    display: flex;
    align-items: center;
    gap: 8px;

    padding-left: 22px;

    border-left: 1px solid #19352a;

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

    letter-spacing: 1px;
}

.user-prefix {
    color: #4f8067;
}

.username {
    color: #cffff0;

    font-weight: 900;
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.chat-main {
    width: 100%;
    min-height: calc(100vh - 124px);

    padding: 30px 32px;
}


/* =========================================================
   SIDE MENU
========================================================= */

.chat-layout {
    display: grid;

    grid-template-columns: 230px minmax(0, 1fr);

    min-height: calc(100vh - 124px);
}


/* =========================================================
   SIDEBAR
========================================================= */

.chat-sidebar {
    width: 230px;

    border-right: 1px solid #19352a;

    background:
        linear-gradient(
            180deg,
            #09120e,
            #070c09
        );

    padding: 24px 16px;

    position: sticky;
    top: 64px;

    height: calc(100vh - 124px);

    overflow-y: auto;
}


/* sidebar title */

.sidebar-title {
    margin-bottom: 20px;

    color: #4f8067;

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

    letter-spacing: 2px;
}

.sidebar-title::before {
    content: "> ";

    color: #2cff88;
}


/* =========================================================
   SIDEBAR MENU
========================================================= */

.sidebar-menu {
    display: flex;
    flex-direction: column;

    gap: 5px;
}

.sidebar-menu a {
    display: flex;
    align-items: center;

    min-height: 40px;

    padding: 0 12px;

    border-left: 2px solid transparent;

    color: #91bda5;

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

    letter-spacing: 1px;

    transition:
        background 0.12s ease,
        color 0.12s ease,
        border-color 0.12s ease;
}


/* menu shortcut */

.sidebar-menu a span:first-child {
    width: 30px;

    color: #3d7657;

    font-weight: 900;
}


/* hover */

.sidebar-menu a:hover {
    color: #dffff0;

    background: #0d2118;

    border-left-color: #2cff88;
}


/* active */

.sidebar-menu a.active {
    color: #2cff88;

    background:
        linear-gradient(
            90deg,
            rgba(44, 255, 136, 0.12),
            transparent
        );

    border-left-color: #2cff88;

    box-shadow:
        inset 3px 0 0 rgba(44, 255, 136, 0.08);
}


/* =========================================================
   SIDEBAR SEPARATOR
========================================================= */

.sidebar-divider {
    height: 1px;

    margin: 22px 0;

    background: #19352a;
}


/* =========================================================
   SIDEBAR SECTION
========================================================= */

.sidebar-section {
    margin-bottom: 22px;
}

.sidebar-section-title {
    margin-bottom: 10px;

    color: #4f8067;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 2px;
}


/* =========================================================
   CONTENT INSIDE LAYOUT
========================================================= */

.chat-content {
    min-width: 0;

    padding: 30px;
}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.menu-toggle {
    display: none;

    width: 36px;
    height: 36px;

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

    border: 1px solid #24553c;

    background: #0b1711;

    color: #2cff88;

    cursor: pointer;

    font-family: inherit;
    font-weight: 900;
}


/* =========================================================
   FOOTER
========================================================= */

.chat-footer {
    min-height: 60px;

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

    padding: 0 30px;

    border-top: 1px solid #19352a;

    background: #080e0b;

    color: #4f8067;

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

    letter-spacing: 1.5px;
}

.chat-footer span:nth-child(2) {
    color: #315c46;
}

.chat-footer span:last-child {
    color: #579673;
}


/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-track {
    background: #070b0a;
}

::-webkit-scrollbar-thumb {
    background: #183b2a;

    border: 1px solid #24553c;
}

::-webkit-scrollbar-thumb:hover {
    background: #286b47;
}


/* =========================================================
   TEXT SELECTION
========================================================= */

::selection {
    background: #2cff88;
    color: #061009;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .chat-header {
        padding: 0 18px;
    }

    .chat-logo {
        min-width: auto;
    }

    .header-status {
        margin-right: 18px;
    }

    .chat-layout {
        grid-template-columns: 200px minmax(0, 1fr);
    }

    .chat-sidebar {
        width: 200px;
    }

    .chat-content {
        padding: 20px;
    }
}


@media (max-width: 700px) {

    .chat-header {
        height: 58px;
    }

    .logo-text {
        font-size: 13px;
    }

    .logo-section,
    .logo-separator {
        display: none;
    }

    .header-status {
        display: none;
    }

    .header-user {
        margin-left: auto;

        padding-left: 15px;
    }

    .chat-layout {
        display: block;
    }

    .chat-sidebar {
        position: fixed;

        top: 58px;
        left: -240px;

        width: 230px;
        height: calc(100vh - 58px);

        z-index: 200;

        transition: left 0.2s ease;
    }

    .chat-sidebar.open {
        left: 0;
    }

    .menu-toggle {
        display: flex;

        margin-right: 12px;
    }

    .chat-content {
        padding: 18px;
    }

    .chat-footer {
        flex-direction: column;

        justify-content: center;

        gap: 7px;

        padding: 15px;

        text-align: center;
    }
}




/* =========================================================
   MOBILE SIDE MENU
========================================================= */

.mobile-menu-toggle {
    display: none;

    width: 38px;
    height: 38px;

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

    margin-left: 12px;

    border: 1px solid #24553c;

    background: #0b1711;

    color: #2cff88;

    font-family: "Courier New", monospace;

    font-size: 17px;
    font-weight: 900;

    cursor: pointer;
}


/* =========================================================
   OVERLAY
========================================================= */

.mobile-menu-overlay {

    display: none;

    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, 0.65);

    z-index: 998;

}


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

.mobile-menu {

    position: fixed;

    top: 0;
    right: 0;

    width: min(320px, 86vw);

    height: 100vh;

    display: flex;

    flex-direction: column;

    background: #08100c;

    border-left: 1px solid #24553c;

    box-shadow:
        -10px 0 35px rgba(0, 0, 0, 0.65);

    transform: translateX(100%);

    transition:
        transform 0.2s steps(5);

    z-index: 999;

    visibility: hidden;

}


/* OPEN */

.mobile-menu.open {

    transform: translateX(0);

    visibility: visible;

}


.mobile-menu-overlay.open {

    display: block;

}


/* =========================================================
   MENU HEADER
========================================================= */

.mobile-menu-header {

    height: 64px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 18px;

    border-bottom: 1px solid #19352a;

    background: #09140f;

    color: #2cff88;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 1.5px;

}


.mobile-menu-close {

    width: 32px;
    height: 32px;

    border: 1px solid #24553c;

    background: #0b1711;

    color: #79c99b;

    font-family: inherit;

    font-size: 11px;

    font-weight: 900;

    cursor: pointer;

}


.mobile-menu-close:hover {

    border-color: #2cff88;

    color: #2cff88;

    background: #0d2118;

}


/* =========================================================
   MENU BODY
========================================================= */

.mobile-menu-body {

    flex: 1;

    overflow-y: auto;

    padding: 20px 14px;

}


.mobile-menu-title {

    margin: 5px 8px 10px;

    color: #4f8067;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 2px;

}


.mobile-menu-item {

    display: flex;

    align-items: center;

    gap: 12px;

    min-height: 44px;

    margin-bottom: 4px;

    padding: 0 12px;

    border-left: 2px solid transparent;

    color: #91bda5;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;

}


.mobile-menu-item span {

    width: 20px;

    color: #3d7657;

    font-weight: 900;

}


.mobile-menu-item:hover {

    color: #dffff0;

    background: #0d2118;

    border-left-color: #2cff88;

}


.mobile-menu-item.active {

    color: #2cff88;

    background:

        linear-gradient(
            90deg,
            rgba(44, 255, 136, 0.12),
            transparent
        );

    border-left-color: #2cff88;

}


.mobile-menu-item.active span {

    color: #2cff88;

}


/* =========================================================
   DIVIDER
========================================================= */

.mobile-menu-divider {

    height: 1px;

    margin: 18px 6px;

    background: #19352a;

}


/* =========================================================
   LOGOUT
========================================================= */

.mobile-menu-danger {

    color: #a8b9af;

}


.mobile-menu-danger:hover {

    color: #ff6b6b;

    border-left-color: #ff6b6b;

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

}


/* =========================================================
   FOOTER
========================================================= */

.mobile-menu-footer {

    flex-shrink: 0;

    display: flex;

    align-items: center;

    gap: 8px;

    min-height: 52px;

    padding: 0 18px;

    border-top: 1px solid #19352a;

    background: #070d0a;

    color: #4f8067;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1px;

}


.mobile-menu-footer .status-light {

    width: 6px;
    height: 6px;

}


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

@media (max-width: 700px) {

    .mobile-menu-toggle {

        display: flex;

    }

}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 701px) {

    .mobile-menu,
    .mobile-menu-overlay {

        display: none !important;

    }

}