/* =========================================================
   CAT GANG WEBCHAT
   Kitty × Hacker × Underground Network
========================================================= */

:root {

    --bg:
        #05070a;

    --bg-deep:
        #000;

    --panel:
        rgba(10, 13, 20, .88);

    --panel-light:
        rgba(14, 18, 27, .82);

    --panel-dark:
        rgba(3, 5, 8, .92);

    --neon:
        #00ff66;

    --neon-blue:
        #66ccff;

    --hot-pink:
        #ff2e88;

    --violet:
        #8a5cff;

    --yellow:
        #ffcc00;

    --text:
        #c7f9cc;

    --text-bright:
        rgba(255,255,255,.88);

    --text-muted:
        rgba(255,255,255,.38);

    --border:
        rgba(0,255,102,.15);

    --border-blue:
        rgba(102,204,255,.14);

    --border-pink:
        rgba(255,46,136,.20);

    --sidebar-width:
        270px;

    --roster-width:
        230px;

    --header-height:
        60px;
}


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

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;
}


html,
body {

    width: 100%;

    height: 100%;

    overflow: hidden;
}


body {

    background:
        radial-gradient(
            circle at top,
            #070b10,
            #000 70%
        );

    color:
        var(--text);

    font-family:
        Consolas,
        "Courier New",
        monospace;
}


/* =========================================================
   BACKGROUND
========================================================= */

.binary-bg {

    position: fixed;

    inset: 0;

    z-index: -3;

    opacity: .045;

    color:
        var(--neon);

    white-space: pre-wrap;

    overflow: hidden;

    font-size: 13px;

    line-height: 13px;

    user-select: none;

    pointer-events: none;
}


.scanline-overlay {

    position: fixed;

    inset: 0;

    z-index: 20;

    pointer-events: none;

    opacity: .035;

    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 3px,
            rgba(255,255,255,.08) 4px
        );
}


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

.webchat-header {

    height:
        var(--header-height);

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        0 22px;

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

    background:
        rgba(5,7,10,.92);

    backdrop-filter:
        blur(16px);

    position: relative;

    z-index: 10;
}


.brand {

    display: flex;

    align-items: center;

    gap: 12px;

    font-family:
        "Chakra Petch",
        sans-serif;

    font-weight: 700;

    letter-spacing: 2px;
}


.brand-mark {

    color:
        var(--neon);

    text-shadow:
        0 0 14px
        rgba(0,255,102,.35);
}


.brand-divider {

    color:
        rgba(255,255,255,.16);
}


.brand-section {

    color:
        rgba(102,204,255,.7);

    font-size: 11px;

    letter-spacing: 3px;
}


.connection-status {

    display: flex;

    align-items: center;

    gap: 8px;

    font-family:
        "Chakra Petch",
        sans-serif;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 1.5px;

    color:
        var(--text-muted);
}


.status-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background:
        var(--yellow);

    box-shadow:
        0 0 9px
        rgba(255,204,0,.7);
}


.status-dot.connected {

    background:
        var(--neon);

    box-shadow:
        0 0 10px
        rgba(0,255,102,.8);
}


.status-dot.disconnected {

    background:
        var(--hot-pink);

    box-shadow:
        0 0 10px
        rgba(255,46,136,.8);
}


/* =========================================================
   APPLICATION
========================================================= */

.webchat-app {

    height:
        calc(100vh - var(--header-height));

    display: grid;

    grid-template-columns:
        var(--sidebar-width)
        minmax(0, 1fr)
        var(--roster-width);

    min-height: 0;
}


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

.sidebar {

    position: relative;

    min-height: 0;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    overflow: hidden;

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

    background:
        radial-gradient(
            circle at top,
            rgba(10,14,20,.98),
            rgba(0,0,0,.98)
        );
}


.sidebar-top {

    position: relative;

    z-index: 2;

    padding: 20px 16px;

    overflow-y: auto;
}


.terminal-label {

    display: flex;

    align-items: center;

    gap: 8px;

    color:
        rgba(199,249,204,.58);

    font-family:
        "Chakra Petch",
        sans-serif;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 1.7px;
}


.terminal-dot {

    width: 6px;

    height: 6px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        var(--neon);

    box-shadow:
        0 0 9px
        rgba(0,255,102,.8);

    animation:
        webchatPulse 1.8s infinite;
}


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

.identity-card {

    margin-top: 20px;

    padding: 14px;

    border:
        1px solid rgba(0,255,102,.12);

    border-radius: 8px;

    background:
        rgba(0,255,102,.025);
}


.identity-label {

    color:
        rgba(255,255,255,.28);

    font-family:
        "Chakra Petch",
        sans-serif;

    font-size: 8px;

    letter-spacing: 1.4px;
}


.identity-nick {

    margin-top: 6px;

    color:
        var(--yellow);

    font-family:
        "Chakra Petch",
        sans-serif;

    font-size: 18px;

    font-weight: 700;

    text-shadow:
        0 0 9px
        rgba(255,204,0,.35);
}


.identity-status {

    display: flex;

    align-items: center;

    gap: 6px;

    margin-top: 8px;

    color:
        rgba(0,255,102,.48);

    font-size: 8px;

    letter-spacing: 1px;
}


.mini-dot {

    width: 5px;

    height: 5px;

    border-radius: 50%;

    background:
        var(--neon);

    box-shadow:
        0 0 7px
        rgba(0,255,102,.7);
}


/* =========================================================
   CONVERSATIONS
========================================================= */

.conversation-section {

    margin-top: 24px;
}


.section-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 8px;

    color:
        rgba(255,255,255,.30);

    font-family:
        "Chakra Petch",
        sans-serif;

    font-size: 8px;

    letter-spacing: 1.5px;
}


.section-count {

    color:
        rgba(102,204,255,.6);
}


.conversation-list {

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.conversation {

    position: relative;

    display: flex;

    align-items: center;

    gap: 9px;

    min-height: 35px;

    padding: 7px 9px;

    border:
        1px solid transparent;

    border-radius: 6px;

    color:
        rgba(199,249,204,.48);

    cursor: pointer;

    transition:
        .18s ease;
}


.conversation:hover {

    color:
        rgba(199,249,204,.8);

    background:
        rgba(0,255,102,.035);

    border-color:
        rgba(0,255,102,.08);
}


.conversation.active {

    color:
        var(--neon);

    background:
        rgba(0,255,102,.08);

    border-color:
        rgba(0,255,102,.18);

    box-shadow:
        inset 2px 0 0
        var(--neon);
}


.conversation.dm {

    color:
        rgba(255,46,136,.6);
}


.conversation.dm:hover {

    color:
        rgba(255,46,136,.9);

    background:
        rgba(255,46,136,.045);

    border-color:
        rgba(255,46,136,.12);
}


.conversation.dm.active {

    color:
        var(--hot-pink);

    background:
        rgba(255,46,136,.08);

    border-color:
        rgba(255,46,136,.20);

    box-shadow:
        inset 2px 0 0
        var(--hot-pink);
}


.conversation-icon {

    width: 16px;

    color:
        rgba(102,204,255,.55);

    font-family:
        "Chakra Petch",
        sans-serif;

    font-weight: 700;

    text-align: center;
}


.conversation.dm .conversation-icon {

    color:
        var(--hot-pink);
}


.conversation-name {

    flex: 1;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    font-size: 11px;
}


.conversation-unread {

    min-width: 16px;

    height: 16px;

    display: none;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        var(--hot-pink);

    color:
        white;

    font-size: 8px;

    font-weight: 700;

    box-shadow:
        0 0 8px
        rgba(255,46,136,.35);
}


.conversation.has-unread .conversation-unread {

    display: flex;
}


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

.sidebar-footer {

    position: relative;

    min-height: 150px;

    padding: 15px;

    overflow: hidden;

    border-top:
        1px solid rgba(0,255,102,.08);
}


.network-info {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    gap: 7px;

    font-family:
        "Chakra Petch",
        sans-serif;

    font-size: 7px;

    letter-spacing: 1px;

    color:
        rgba(255,255,255,.22);
}


.network-info span {

    display: block;
}


.network-info strong {

    display: block;

    margin-top: 2px;

    color:
        rgba(0,255,102,.48);

    font-weight: 500;
}


/* =========================================================
   KITTY
========================================================= */

.kitty-decoration {

    position: absolute;

    right: -25px;

    bottom: -38px;

    width: 145px;

    height: 145px;

    opacity: .22;

    filter:
        drop-shadow(
            0 0 14px
            rgba(255,46,136,.4)
        );
}


.kitty-face {

    position: absolute;

    left: 30px;

    top: 38px;

    width: 85px;

    height: 70px;

    border:
        2px solid var(--hot-pink);

    border-radius:
        45% 45% 48% 48%;
}


.kitty-ear {

    position: absolute;

    top: 25px;

    width: 35px;

    height: 35px;

    border:
        2px solid var(--hot-pink);

    transform: rotate(45deg);
}


.kitty-ear.left {

    left: 29px;
}


.kitty-ear.right {

    right: 29px;
}


.kitty-eye {

    position: absolute;

    top: 27px;

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background:
        var(--neon);

    box-shadow:
        0 0 7px
        var(--neon);
}


.kitty-eye.left {

    left: 23px;
}


.kitty-eye.right {

    right: 23px;
}


.kitty-nose {

    position: absolute;

    left: 50%;

    bottom: 20px;

    width: 6px;

    height: 5px;

    background:
        var(--hot-pink);

    transform:
        translateX(-50%)
        rotate(45deg);
}


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

.chat-panel {

    min-width: 0;

    min-height: 0;

    display: flex;

    flex-direction: column;

    background:
        radial-gradient(
            circle at top,
            rgba(10,14,20,.65),
            rgba(0,0,0,.96)
        );
}


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

.chat-header {

    min-height: 68px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding:
        12px 20px;

    border-bottom:
        1px solid rgba(0,255,102,.12);

    background:
        rgba(7,10,15,.72);
}


.conversation-type {

    color:
        rgba(102,204,255,.52);

    font-family:
        "Chakra Petch",
        sans-serif;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 1.7px;
}


.conversation-heading h1 {

    margin-top: 3px;

    color:
        var(--neon);

    font-family:
        "Chakra Petch",
        sans-serif;

    font-size: 21px;

    letter-spacing: 1px;

    text-shadow:
        0 0 12px
        rgba(0,255,102,.16);
}


.conversation-meta {

    display: flex;

    align-items: center;

    gap: 8px;

    color:
        rgba(255,255,255,.25);

    font-family:
        "Chakra Petch",
        sans-serif;

    font-size: 8px;

    letter-spacing: 1px;
}


.meta-separator {

    color:
        rgba(255,255,255,.10);
}


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

.message-area {

    flex: 1;

    min-height: 0;

    overflow-y: auto;

    padding:
        20px;

    scroll-behavior: smooth;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.72),
            rgba(5,7,10,.96)
        );
}


.message {

    display: flex;

    gap: 10px;

    margin-bottom: 7px;

    padding: 7px 9px;

    border-left:
        2px solid transparent;

    border-radius: 4px;

    animation:
        messageIn .15s ease-out;

    transition:
        .15s ease;
}


.message:hover {

    border-left-color:
        var(--neon);

    background:
        rgba(0,255,153,.035);
}


.message.dm {

    border-left-color:
        rgba(255,46,136,.5);

    background:
        rgba(255,46,136,.025);
}


.message.system {

    color:
        var(--neon-blue);

    opacity: .7;
}


.message-time {

    flex-shrink: 0;

    color:
        rgba(255,255,255,.22);

    font-size: 10px;
}


.message-sender {

    flex-shrink: 0;

    color:
        var(--neon);

    font-family:
        "Chakra Petch",
        sans-serif;

    font-size: 11px;

    font-weight: 600;
}


.message.dm .message-sender {

    color:
        var(--hot-pink);
}


.message-text {

    min-width: 0;

    color:
        rgba(255,255,255,.72);

    font-size: 12px;

    line-height: 1.55;

    overflow-wrap: anywhere;
}


.message.action .message-text {

    color:
        rgba(255,204,0,.75);

    font-style: italic;
}


/* =========================================================
   EMPTY STATE
========================================================= */

.empty-state {

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    text-align: center;
}


.empty-symbol {

    color:
        rgba(0,255,102,.25);

    font-size: 30px;

    text-shadow:
        0 0 20px
        rgba(0,255,102,.2);
}


.empty-title {

    margin-top: 10px;

    color:
        rgba(255,255,255,.28);

    font-family:
        "Chakra Petch",
        sans-serif;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 2px;
}


.empty-text {

    max-width: 300px;

    margin-top: 8px;

    color:
        rgba(255,255,255,.18);

    font-size: 10px;

    line-height: 1.6;
}


/* =========================================================
   COMPOSER
========================================================= */

.composer-area {

    flex-shrink: 0;

    padding:
        12px 16px 14px;

    border-top:
        1px solid rgba(0,255,102,.15);

    background:
        rgba(5,7,10,.94);
}


.composer-context {

    margin-bottom: 7px;

    color:
        rgba(102,204,255,.42);

    font-family:
        "Chakra Petch",
        sans-serif;

    font-size: 8px;

    letter-spacing: 1px;
}


.composer {

    display: flex;

    align-items: center;

    min-height: 46px;

    border:
        1px solid rgba(0,255,102,.25);

    border-radius: 7px;

    background:
        rgba(0,0,0,.55);

    transition:
        .2s ease;
}


.composer:focus-within {

    border-color:
        rgba(0,255,102,.55);

    box-shadow:
        0 0 18px
        rgba(0,255,102,.06);
}


.composer-prefix {

    width: 38px;

    flex-shrink: 0;

    color:
        var(--neon);

    text-align: center;

    font-family:
        "Chakra Petch",
        sans-serif;

    font-weight: 700;
}


#message-input {

    flex: 1;

    min-width: 0;

    height: 44px;

    border: none;

    outline: none;

    background: transparent;

    color:
        var(--text);

    font-family:
        Consolas,
        monospace;

    font-size: 12px;
}


#message-input::placeholder {

    color:
        rgba(199,249,204,.22);
}


#send-button {

    height: 34px;

    margin-right: 6px;

    padding:
        0 13px;

    border:
        1px solid rgba(0,255,102,.35);

    border-radius: 5px;

    background:
        rgba(0,255,102,.06);

    color:
        var(--neon);

    font-family:
        "Chakra Petch",
        sans-serif;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1px;

    cursor: pointer;

    transition:
        .2s ease;
}


#send-button:hover {

    border-color:
        var(--neon);

    background:
        rgba(0,255,102,.12);

    box-shadow:
        0 0 14px
        rgba(0,255,102,.10);
}


#send-button span {

    margin-left: 5px;

    font-size: 13px;
}


.composer-help {

    display: flex;

    gap: 8px;

    margin-top: 6px;

    color:
        rgba(255,255,255,.18);

    font-size: 7px;

    letter-spacing: 1px;
}


.composer-help code {

    color:
        rgba(102,204,255,.5);
}


/* =========================================================
   ROSTER
========================================================= */

.roster-panel {

    min-height: 0;

    display: flex;

    flex-direction: column;

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

    background:
        rgba(5,8,12,.82);
}


.roster-header {

    min-height: 68px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        0 15px;

    border-bottom:
        1px solid rgba(0,255,102,.10);
}


.roster-count {

    color:
        rgba(102,204,255,.55);

    font-family:
        "Chakra Petch",
        sans-serif;

    font-size: 9px;

    letter-spacing: 1px;
}


.roster-list {

    flex: 1;

    min-height: 0;

    overflow-y: auto;

    padding:
        12px;
}


.roster-user {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 6px 5px;

    color:
        rgba(0,255,102,.58);

    font-size: 10px;

    border-radius: 4px;

    transition:
        .15s ease;
}


.roster-user:hover {

    background:
        rgba(0,255,102,.04);

    color:
        var(--neon);
}


.roster-mode {

    width: 13px;

    color:
        var(--hot-pink);

    font-family:
        "Chakra Petch",
        sans-serif;

    font-weight: 700;

    text-align: center;
}


.roster-nick {

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.roster-footer {

    padding:
        12px;

    border-top:
        1px solid rgba(0,255,102,.08);

    color:
        rgba(255,255,255,.18);

    font-family:
        "Chakra Petch",
        sans-serif;

    font-size: 7px;

    letter-spacing: 1px;
}


.roster-line {

    height: 1px;

    margin: 7px 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,255,102,.18),
            transparent
        );
}


/* =========================================================
   TOASTS
========================================================= */

.toast-container {

    position: fixed;

    right: 18px;

    bottom: 18px;

    z-index: 100;

    display: flex;

    flex-direction: column;

    gap: 7px;

    pointer-events: none;
}


.toast {

    max-width: 320px;

    padding: 10px 13px;

    border:
        1px solid rgba(0,255,102,.20);

    border-radius: 6px;

    background:
        rgba(5,8,12,.94);

    color:
        rgba(199,249,204,.7);

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

    font-size: 10px;

    animation:
        toastIn .2s ease-out;
}


.toast.error {

    border-color:
        rgba(255,46,136,.3);

    color:
        rgba(255,141,165,.8);
}


/* =========================================================
   SCROLLBARS
========================================================= */

* {

    scrollbar-width:
        thin;

    scrollbar-color:
        rgba(0,255,102,.20)
        transparent;
}


::-webkit-scrollbar {

    width: 6px;

    height: 6px;
}


::-webkit-scrollbar-track {

    background:
        transparent;
}


::-webkit-scrollbar-thumb {

    background:
        rgba(0,255,102,.18);

    border-radius:
        99px;
}


::-webkit-scrollbar-thumb:hover {

    background:
        rgba(0,255,102,.32);
}


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

@keyframes webchatPulse {

    0%,
    100% {

        opacity: 1;

        transform:
            scale(1);
    }

    50% {

        opacity: .45;

        transform:
            scale(.75);
    }
}


@keyframes messageIn {

    from {

        opacity: 0;

        transform:
            translateY(4px);
    }

    to {

        opacity: 1;

        transform:
            translateY(0);
    }
}


@keyframes toastIn {

    from {

        opacity: 0;

        transform:
            translateY(8px);
    }

    to {

        opacity: 1;

        transform:
            translateY(0);
    }
}


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

@media (max-width: 1050px) {

    :root {

        --sidebar-width:
            220px;

        --roster-width:
            190px;
    }

}


@media (max-width: 850px) {

    .webchat-app {

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


    .roster-panel {

        display: none;
    }

}


@media (max-width: 650px) {

    :root {

        --header-height:
            54px;
    }


    .webchat-header {

        padding:
            0 14px;
    }


    .brand-divider,
    .brand-section {

        display: none;
    }


    .webchat-app {

        grid-template-columns:
            1fr;
    }


    .sidebar {

        display: none;
    }


    .chat-header {

        padding:
            10px 13px;
    }


    .conversation-heading h1 {

        font-size:
            18px;
    }


    .conversation-meta {

        display: none;
    }


    .message-area {

        padding:
            13px 10px;
    }


    .composer-area {

        padding:
            10px;
    }


    .composer-help {

        display: none;
    }


    .message {

        gap: 6px;

        padding:
            6px;
        }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation:
            none !important;

        transition:
            none !important;

        scroll-behavior:
            auto !important;
    }
}