* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background:
        radial-gradient(circle at 20% 10%, rgba(124,92,255,.10), transparent 30%),
        radial-gradient(circle at 85% 80%, rgba(168,85,247,.08), transparent 30%),
        #070910;
    color: #fff;
}

/* =========================================================
   CONTENEDOR PRINCIPAL
========================================================= */

.chat-container {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: rgba(10,13,22,.94);
}

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

header {
    height: 72px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 26px;

    background:
        linear-gradient(135deg,
            rgba(27,31,48,.98),
            rgba(13,16,27,.98));

    border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 8px 30px rgba(0,0,0,.25);
}

header h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .7px;

    background: linear-gradient(
        90deg,
        #ffffff,
        #c4b5fd,
        #a855f7
    );

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

.channel-name {
    margin-top: 5px;
    color: #8994ad;
    font-size: 12px;
    font-weight: 600;
}

#status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;

    border: 1px solid rgba(74,222,128,.18);
    border-radius: 20px;

    background: rgba(74,222,128,.06);
    color: #6ee7a5;

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

#status::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;

    background: #4ade80;
    box-shadow:
        0 0 8px rgba(74,222,128,.8),
        0 0 16px rgba(74,222,128,.35);
}

/* =========================================================
   LOGIN
========================================================= */

#login {
    width: min(430px, calc(100% - 30px));
    margin: auto;
    padding: 34px;

    background:
        linear-gradient(
            145deg,
            rgba(24,28,43,.98),
            rgba(15,18,29,.98)
        );

    border: 1px solid rgba(255,255,255,.08);
    border-radius: 22px;

    box-shadow:
        0 25px 80px rgba(0,0,0,.5),
        0 0 50px rgba(124,92,255,.07);
}

#login input {
    width: 100%;
    height: 50px;

    padding: 0 16px;
    margin-bottom: 13px;

    border: 1px solid #343b50;
    border-radius: 12px;
    outline: none;

    background: #0a0d15;
    color: #fff;

    font-size: 15px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

#login input::placeholder {
    color: #69748c;
}

#login input:focus {
    border-color: #8b6cff;

    box-shadow:
        0 0 0 3px rgba(124,92,255,.12),
        0 0 20px rgba(124,92,255,.08);
}

/* =========================================================
   BOTONES PRINCIPALES
========================================================= */

#connect,
#send {
    border: 0;
    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #7657ff,
            #9d4edd
        );

    color: #fff;
    font-weight: 800;
    cursor: pointer;

    box-shadow:
        0 7px 20px rgba(124,92,255,.22);

    transition:
        transform .15s ease,
        filter .15s ease,
        box-shadow .15s ease;
}

#connect {
    width: 100%;
    height: 50px;
}

#connect:hover,
#send:hover {
    filter: brightness(1.12);
    transform: translateY(-1px);

    box-shadow:
        0 10px 28px rgba(124,92,255,.32);
}

#connect:active,
#send:active {
    transform: translateY(0);
}

#connect:disabled,
#send:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
}

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

#chat {
    flex: 1;
    min-height: 0;
}

.chat-layout {
    height: 100%;
    display: flex;
    min-height: 0;
}

.chat-main {
    flex: 1;
    min-width: 0;

    display: flex;
    flex-direction: column;

    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(124,92,255,.025),
            transparent 45%
        );
}

/* =========================================================
   CHANNEL TABS
========================================================= */

.channel-tabs {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 6px;

    padding: 7px 12px;

    overflow-x: auto;

    background: #0c0f18;
    border-bottom: 1px solid rgba(255,255,255,.055);
}

/* =========================================================
   CHAT / STATUS TABS
========================================================= */

.messages-tabs {
    height: 48px;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    gap: 5px;

    padding: 6px 14px;

    background: rgba(13,16,26,.96);
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.tab {
    height: 36px;
    padding: 0 19px;

    border: 0;
    border-radius: 9px;

    background: transparent;
    color: #707b93;

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

    cursor: pointer;

    transition:
        background .15s ease,
        color .15s ease,
        transform .15s ease;
}

.tab:hover {
    background: rgba(255,255,255,.045);
    color: #fff;
}

.tab.active {
    background:
        linear-gradient(
            135deg,
            rgba(124,92,255,.24),
            rgba(168,85,247,.18)
        );

    color: #fff;

    box-shadow:
        inset 0 0 0 1px rgba(168,85,247,.18);
}

/* =========================================================
   MENSAJES
========================================================= */

#messages,
#server-status {
    flex: 1;
    min-height: 0;
    overflow-y: auto;

    padding: 22px;
}

.message,
.system,
.action {
    margin-bottom: 11px;
    line-height: 1.5;
    word-break: break-word;
}

.message {
    width: fit-content;
    max-width: 82%;

    padding: 11px 15px;

    background:
        linear-gradient(
            145deg,
            #1a1f2e,
            #151a27
        );

    border: 1px solid rgba(255,255,255,.065);
    border-radius: 13px;

    color: #e9ebf2;

    box-shadow:
        0 5px 16px rgba(0,0,0,.12);

    transition:
        background .15s ease,
        transform .15s ease;
}

.message:hover {
    background:
        linear-gradient(
            145deg,
            #202638,
            #191e2d
        );

    transform: translateY(-1px);
}

.system {
    color: #7d879d;
    font-size: 13px;
}

.action {
    color: #c4b5fd;
    font-style: italic;
}

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

#server-status {
    background: #070a11;

    font-family:
        "Courier New",
        monospace;

    font-size: 12px;
    color: #9da8bc;
}

.status-line {
    padding: 6px 9px;

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

    white-space: pre-wrap;
    word-break: break-word;
}

.status-line:hover {
    background: #101521;
}

.status-time {
    color: #58647a;
    margin-right: 8px;
}

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

.input-area {
    flex-shrink: 0;

    display: flex;
    gap: 10px;

    padding: 14px 16px;

    background:
        linear-gradient(
            180deg,
            #111520,
            #0e121b
        );

    border-top:
        1px solid rgba(255,255,255,.07);
}

#message {
    flex: 1;
    min-width: 0;

    height: 48px;

    padding: 0 16px;

    border: 1px solid #343b50;
    border-radius: 12px;
    outline: none;

    background: #080b12;
    color: #fff;

    font-size: 15px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

#message::placeholder {
    color: #68738a;
}

#message:focus {
    border-color: #8065ff;

    box-shadow:
        0 0 0 3px rgba(124,92,255,.10),
        0 0 22px rgba(124,92,255,.06);
}

#send {
    width: 110px;
    flex-shrink: 0;
}

/* =========================================================
   PANEL USUARIOS
========================================================= */

.users-panel {
    width: 250px;
    flex-shrink: 0;

    overflow-y: auto;

    background:
        linear-gradient(
            180deg,
            #111520,
            #0e121b
        );

    border-left:
        1px solid rgba(255,255,255,.07);
}

.users-title {
    height: 58px;

    display: flex;
    align-items: center;
    gap: 9px;

    padding: 0 17px;

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

    color: #fff;

    font-weight: 800;
    font-size: 12px;
    letter-spacing: .6px;
}

#user-count {
    margin-left: auto;

    min-width: 29px;
    height: 24px;

    padding: 0 8px;

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

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            rgba(124,92,255,.22),
            rgba(168,85,247,.15)
        );

    color: #c4b5fd;

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

    border:
        1px solid rgba(168,85,247,.15);
}

.user-item {
    display: flex;
    align-items: center;

    padding: 10px 15px;

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

    color: #e8eaf0;

    font-size: 14px;

    transition:
        background .15s ease,
        padding-left .15s ease;
}

.user-item:hover {
    background:
        linear-gradient(
            90deg,
            rgba(124,92,255,.08),
            transparent
        );

    padding-left: 18px;
}

.user-dot {
    color: #4ade80;
    font-size: 8px;
    margin-right: 7px;

    text-shadow:
        0 0 7px rgba(74,222,128,.8);
}

.user-op {
    color: #fbbf24;
    font-size: 8px;
    margin-right: 7px;

    text-shadow:
        0 0 7px rgba(251,191,36,.6);
}

/* =========================================================
   BOTÓN NOMBRE USUARIO
========================================================= */

.user-name-button {
    flex: 1;

    padding: 4px 0;

    border: 0;
    background: transparent;

    color: inherit;

    text-align: left;

    font: inherit;

    cursor: pointer;
}

.user-name-button:hover {
    color: #c4b5fd;
}

/* =========================================================
   BOTÓN VIDEOLLAMADA
========================================================= */

.user-call-button {
    width: 30px;
    height: 28px;

    margin-left: 6px;

    border: 1px solid rgba(124,92,255,.22);
    border-radius: 8px;

    background:
        rgba(124,92,255,.10);

    color: #c4b5fd;

    cursor: pointer;

    transition:
        background .15s ease,
        transform .15s ease;
}

.user-call-button:hover {
    background:
        rgba(124,92,255,.22);

    transform: scale(1.05);
}

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

#messages::-webkit-scrollbar,
#server-status::-webkit-scrollbar,
.users-panel::-webkit-scrollbar,
.channel-tabs::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

#messages::-webkit-scrollbar-thumb,
#server-status::-webkit-scrollbar-thumb,
.users-panel::-webkit-scrollbar-thumb,
.channel-tabs::-webkit-scrollbar-thumb {
    background: #30374a;
    border-radius: 10px;
}

#messages::-webkit-scrollbar-track,
#server-status::-webkit-scrollbar-track,
.users-panel::-webkit-scrollbar-track,
.channel-tabs::-webkit-scrollbar-track {
    background: transparent;
}

/* =========================================================
   VIDEOLLAMADA
========================================================= */

.call-panel {
    position: fixed;
    inset: 0;

    z-index: 9999;

    display: flex;
    flex-direction: column;

    background:
        radial-gradient(
            circle at 50% 40%,
            #151827,
            #030407 70%
        );
}

.call-panel[hidden] {
    display: none;
}

.call-header {
    min-height: 62px;

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

    padding: 0 22px;

    background:
        rgba(13,16,25,.96);

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

    color: #fff;
    font-weight: 800;
}

#call-peer {
    opacity: .7;
    font-weight: 500;
}

.video-area {
    position: relative;

    flex: 1;
    min-height: 0;

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

    overflow: hidden;

    background: #000;
}

#remote-video {
    width: 100%;
    height: 100%;

    object-fit: contain;

    background: #000;
}

#local-video {
    position: absolute;

    right: 22px;
    bottom: 22px;

    width: 230px;
    max-width: 30%;

    aspect-ratio: 16 / 9;

    object-fit: cover;

    background: #111;

    border: 2px solid rgba(255,255,255,.8);
    border-radius: 12px;

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

.call-controls {
    min-height: 82px;

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

    gap: 12px;
    padding: 13px;

    background:
        rgba(13,16,25,.98);

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

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

@media (max-width: 800px) {

    .users-panel {
        width: 205px;
    }

    header {
        padding: 0 18px;
    }

    #messages,
    #server-status {
        padding: 16px;
    }
}

@media (max-width: 650px) {

    .users-panel {
        width: 170px;
    }

    .users-title {
        padding: 0 10px;
    }

    .user-item {
        padding: 9px;
    }

    .user-item:hover {
        padding-left: 12px;
    }

    .input-area {
        padding: 10px;
    }

    #send {
        width: 88px;
    }
}

@media (max-width: 520px) {

    header {
        height: 64px;
        padding: 0 13px;
    }

    header h1 {
        font-size: 17px;
    }

    #status {
        padding: 6px 9px;
        font-size: 10px;
    }

    .users-panel {
        width: 135px;
    }

    .users-title {
        font-size: 10px;
    }

    .user-item {
        font-size: 12px;
    }

    .user-call-button {
        width: 27px;
        height: 26px;
        font-size: 12px;
    }

    .tab {
        padding: 0 12px;
    }

    #message {
        font-size: 14px;
    }

    #send {
        width: 76px;
    }

    .call-controls {
        gap: 7px;
    }

    .call-controls button {
        font-size: 11px;
    }

    #local-video {
        right: 10px;
        bottom: 10px;
        width: 150px;
        max-width: 40%;
    }
}

/* =========================================================
   FiXeLiA — MENSAJES PROFESIONALES
========================================================= */

.message {
    padding: 11px 15px;
    margin-bottom: 10px;
    width: fit-content;
    max-width: 82%;
    background: #191e2c;
    border: 1px solid #292f40;
    border-radius: 12px;
    color: #e9ebf2;
}

.message-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
    line-height: 1;
}

.message-author {
    font-size: 13px;
    font-weight: 700;
    color: #a78bfa;
}

.message-time {
    font-size: 11px;
    color: #68738a;
    font-weight: 500;
}

.message-body {
    font-size: 14px;
    line-height: 1.45;
    color: #e9ebf2;
    white-space: pre-wrap;
    word-break: break-word;
}


/* =========================================================
   FiXeLiA — CABECERA DE MENSAJES
========================================================= */

.message-header {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin-bottom: 6px;
}

.message-author {
    font-size: 13px;
    font-weight: 700;
    color: #b79cff;
}

.message-time {
    font-size: 11px;
    font-weight: 500;
    color: #69758d;
}

.message-body {
    font-size: 14px;
    line-height: 1.5;
    color: #eef0f6;
    white-space: pre-wrap;
    word-break: break-word;
}


/* =========================================================
   FiXeLiA NEXUS // LIVE
   VISUAL CORE — CHAT LEVEL
========================================================= */

:root{
    --fx-purple:#806cff;
    --fx-violet:#a855f7;
    --fx-cyan:#62ddff;
    --fx-green:#4ade80;
    --fx-bg:#03050c;
}

/* =========================================================
   ATMOSFERA GLOBAL
========================================================= */

body{
    background:
        radial-gradient(circle at 50% 0%,
            rgba(105,75,255,.16),
            transparent 34%),
        radial-gradient(circle at 100% 100%,
            rgba(45,180,255,.10),
            transparent 32%),
        #02040a;
}

.chat-container{
    position:relative;
    isolation:isolate;

    background:
        radial-gradient(circle at 50% 20%,
            rgba(124,92,255,.055),
            transparent 38%),
        linear-gradient(
            180deg,
            rgba(5,8,17,.97),
            rgba(3,5,11,.99)
        );
}

/* rejilla tecnológica */

.chat-container::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;

    background-image:
        linear-gradient(
            rgba(115,95,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(115,95,255,.035) 1px,
            transparent 1px
        );

    background-size:55px 55px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.8),
            transparent 92%
        );

    animation:fxGridDrift 22s linear infinite;
}

@keyframes fxGridDrift{
    from{background-position:0 0}
    to{background-position:0 55px}
}

/* aura central */

.chat-container::after{
    content:"";
    position:absolute;
    width:650px;
    height:650px;
    left:50%;
    top:42%;

    transform:translate(-50%,-50%);

    pointer-events:none;
    z-index:-1;

    background:
        radial-gradient(
            circle,
            rgba(105,80,255,.075),
            rgba(50,180,255,.025) 38%,
            transparent 70%
        );

    filter:blur(25px);

    animation:fxAura 7s ease-in-out infinite;
}

@keyframes fxAura{
    0%,100%{
        opacity:.45;
        transform:translate(-50%,-50%) scale(.9);
    }
    50%{
        opacity:1;
        transform:translate(-50%,-50%) scale(1.12);
    }
}

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

header{
    position:relative;

    background:
        linear-gradient(
            135deg,
            rgba(16,19,36,.98),
            rgba(6,9,18,.98)
        );

    border-bottom:
        1px solid rgba(124,92,255,.18);

    box-shadow:
        0 10px 40px rgba(0,0,0,.38),
        0 1px 20px rgba(124,92,255,.06);
}

header::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-1px;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(128,108,255,.7),
            rgba(98,221,255,.65),
            transparent
        );

    background-size:200% 100%;

    animation:fxHeaderFlow 4s linear infinite;
}

@keyframes fxHeaderFlow{
    from{background-position:0 0}
    to{background-position:200% 0}
}

header h1{
    filter:
        drop-shadow(0 0 10px rgba(128,108,255,.45));
}

.channel-name{
    color:#727d98;
    letter-spacing:.5px;
}

#status{
    position:relative;

    border-color:
        rgba(74,222,128,.25);

    background:
        linear-gradient(
            135deg,
            rgba(74,222,128,.09),
            rgba(20,80,55,.04)
        );

    box-shadow:
        0 0 20px rgba(74,222,128,.06);
}

#status::before{
    animation:fxStatusPulse 1.8s ease-in-out infinite;
}

@keyframes fxStatusPulse{
    0%,100%{
        transform:scale(.75);
        box-shadow:0 0 5px rgba(74,222,128,.45);
    }
    50%{
        transform:scale(1.3);
        box-shadow:
            0 0 10px rgba(74,222,128,.95),
            0 0 22px rgba(74,222,128,.45);
    }
}

/* =========================================================
   CHANNELS
========================================================= */

.channel-tabs{
    position:relative;

    background:
        linear-gradient(
            180deg,
            rgba(10,13,24,.98),
            rgba(6,9,17,.98)
        );

    border-bottom:
        1px solid rgba(124,92,255,.09);
}

.channel-tabs::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(98,221,255,.3),
            transparent
        );
}

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

.messages-tabs{
    background:
        linear-gradient(
            180deg,
            rgba(11,14,25,.98),
            rgba(7,10,19,.98)
        );

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

.tab{
    position:relative;
}

.tab.active{
    box-shadow:
        0 0 20px rgba(124,92,255,.10),
        inset 0 0 18px rgba(124,92,255,.05);
}

.tab.active::after{
    content:"";

    position:absolute;
    left:18%;
    right:18%;
    bottom:1px;

    height:2px;

    border-radius:10px;

    background:
        linear-gradient(
            90deg,
            var(--fx-purple),
            var(--fx-cyan)
        );

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

/* =========================================================
   AREA DE MENSAJES
========================================================= */

#messages{
    position:relative;

    background:
        radial-gradient(
            ellipse at 50% 20%,
            rgba(100,75,255,.035),
            transparent 55%
        );
}

/* línea ambiental */

#messages::before{
    content:"NEXUS // REAL TIME";

    position:absolute;

    top:12px;
    right:18px;

    color:rgba(111,125,157,.28);

    font-family:
        "Courier New",
        monospace;

    font-size:8px;
    letter-spacing:2px;

    pointer-events:none;
}

/* mensajes */

.message{
    position:relative;

    background:
        linear-gradient(
            145deg,
            rgba(24,29,44,.96),
            rgba(13,17,29,.96)
        );

    border:
        1px solid rgba(128,108,255,.10);

    box-shadow:
        0 8px 25px rgba(0,0,0,.18),
        0 0 0 1px rgba(255,255,255,.015);

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.message::before{
    content:"";

    position:absolute;

    left:-1px;
    top:10px;
    bottom:10px;

    width:2px;

    border-radius:3px;

    background:
        linear-gradient(
            180deg,
            var(--fx-purple),
            var(--fx-cyan)
        );

    opacity:.55;

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

.message:hover{
    border-color:
        rgba(128,108,255,.22);

    box-shadow:
        0 10px 30px rgba(0,0,0,.28),
        0 0 25px rgba(100,80,255,.06);

    transform:
        translateX(2px)
        translateY(-1px);
}

.message-author{
    color:#b7a8ff;

    text-shadow:
        0 0 12px rgba(128,108,255,.22);
}

.message-time{
    color:#56617a;
}

.system{
    color:#69758e;
}

.action{
    color:#9f8cff;

    text-shadow:
        0 0 12px rgba(128,108,255,.15);
}

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

#server-status{
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(60,200,255,.045),
            transparent 50%
        ),
        #03060d;

    border-top:
        1px solid rgba(98,221,255,.06);
}

.status-line{
    border-bottom-color:
        rgba(98,221,255,.035);
}

.status-line:hover{
    background:
        linear-gradient(
            90deg,
            rgba(98,221,255,.045),
            transparent
        );
}

.status-time{
    color:#43516a;
}

/* =========================================================
   INPUT — NEXUS CONSOLE
========================================================= */

.input-area{
    position:relative;

    background:
        linear-gradient(
            180deg,
            rgba(11,15,26,.98),
            rgba(5,8,16,.99)
        );

    border-top:
        1px solid rgba(128,108,255,.14);

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

.input-area::before{
    content:"";

    position:absolute;

    left:0;
    top:-1px;

    width:25%;
    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--fx-purple),
            var(--fx-cyan)
        );

    animation:fxInputScan 4s ease-in-out infinite;
}

@keyframes fxInputScan{
    0%{
        left:-25%;
        opacity:0;
    }
    15%{opacity:1}
    55%,100%{
        left:100%;
        opacity:0;
    }
}

#message{
    background:
        linear-gradient(
            145deg,
            rgba(5,8,16,.98),
            rgba(10,13,23,.98)
        );

    border-color:
        rgba(128,108,255,.18);

    box-shadow:
        inset 0 0 20px rgba(0,0,0,.2);
}

#message:focus{
    border-color:
        rgba(128,108,255,.65);

    box-shadow:
        0 0 0 3px rgba(124,92,255,.08),
        0 0 30px rgba(124,92,255,.10),
        inset 0 0 20px rgba(80,60,180,.04);
}

#send{
    background:
        linear-gradient(
            135deg,
            #7055ff,
            #8e4de0 55%,
            #3bbde8
        );

    box-shadow:
        0 7px 25px rgba(100,80,255,.25),
        inset 0 0 0 1px rgba(255,255,255,.08);

    position:relative;
    overflow:hidden;
}

#send::after{
    content:"";

    position:absolute;

    top:-100%;
    left:-40%;

    width:35%;
    height:300%;

    transform:rotate(20deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.45),
            transparent
        );

    animation:fxSendShine 3.5s ease-in-out infinite;
}

@keyframes fxSendShine{
    0%,55%{left:-50%}
    100%{left:140%}
}

/* =========================================================
   USUARIOS — NEXUS
========================================================= */

.users-panel{
    position:relative;

    background:
        linear-gradient(
            180deg,
            rgba(12,16,27,.98),
            rgba(5,8,16,.99)
        );

    border-left:
        1px solid rgba(128,108,255,.14);

    box-shadow:
        -12px 0 35px rgba(0,0,0,.18);
}

.users-panel::before{
    content:"";

    position:absolute;

    top:0;
    bottom:0;
    left:0;

    width:1px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(128,108,255,.45),
            rgba(98,221,255,.25),
            transparent
        );

    opacity:.7;
}

.users-title{
    background:
        linear-gradient(
            90deg,
            rgba(124,92,255,.05),
            transparent
        );

    border-bottom:
        1px solid rgba(128,108,255,.11);
}

#user-count{
    box-shadow:
        0 0 18px rgba(128,108,255,.08);
}

.user-item{
    position:relative;

    border-bottom-color:
        rgba(255,255,255,.025);

    transition:
        background .2s ease,
        padding-left .2s ease;
}

.user-item::after{
    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(128,108,255,.08),
            transparent
        );
}

.user-item:hover{
    background:
        linear-gradient(
            90deg,
            rgba(124,92,255,.11),
            rgba(98,221,255,.025),
            transparent
        );

    padding-left:19px;
}

.user-dot{
    text-shadow:
        0 0 7px rgba(74,222,128,.9),
        0 0 16px rgba(74,222,128,.35);
}

.user-call-button{
    border-color:
        rgba(128,108,255,.24);

    background:
        linear-gradient(
            135deg,
            rgba(124,92,255,.10),
            rgba(98,221,255,.04)
        );

    box-shadow:
        0 0 12px rgba(124,92,255,.04);
}

.user-call-button:hover{
    border-color:
        rgba(98,221,255,.4);

    box-shadow:
        0 0 18px rgba(98,221,255,.12);
}

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

#messages::-webkit-scrollbar-thumb,
#server-status::-webkit-scrollbar-thumb,
.users-panel::-webkit-scrollbar-thumb,
.channel-tabs::-webkit-scrollbar-thumb{
    background:
        linear-gradient(
            180deg,
            #51458e,
            #273a58
        );

    border-radius:10px;
}

#messages::-webkit-scrollbar-thumb:hover,
#server-status::-webkit-scrollbar-thumb:hover,
.users-panel::-webkit-scrollbar-thumb:hover{
    background:
        linear-gradient(
            180deg,
            #806cff,
            #3ebee9
        );
}

/* =========================================================
   VIDEOLLAMADA — NEXUS
========================================================= */

.call-panel{
    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(100,75,255,.12),
            transparent 40%
        ),
        #02040a;
}

.call-header{
    background:
        linear-gradient(
            135deg,
            rgba(15,19,34,.99),
            rgba(4,7,14,.99)
        );

    border-bottom:
        1px solid rgba(128,108,255,.18);
}

.video-area{
    background:
        radial-gradient(
            circle,
            rgba(60,70,120,.08),
            transparent 55%
        ),
        #000;
}

#local-video{
    border-color:
        rgba(128,108,255,.65);

    box-shadow:
        0 0 0 1px rgba(98,221,255,.15),
        0 12px 40px rgba(0,0,0,.75),
        0 0 30px rgba(100,80,255,.10);
}

.call-controls{
    background:
        linear-gradient(
            180deg,
            rgba(10,13,23,.99),
            rgba(4,7,14,.99)
        );

    border-top:
        1px solid rgba(128,108,255,.16);
}

/* =========================================================
   LOGIN — ACTIVATION CORE
========================================================= */

#login{
    position:relative;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(128,108,255,.10),
            transparent 50%
        ),
        linear-gradient(
            145deg,
            rgba(18,22,38,.98),
            rgba(6,9,17,.99)
        );

    border-color:
        rgba(128,108,255,.20);

    box-shadow:
        0 30px 100px rgba(0,0,0,.6),
        0 0 70px rgba(100,80,255,.09),
        inset 0 0 40px rgba(100,80,255,.025);

    overflow:hidden;
}

#login::before{
    content:"NEXUS ACCESS";

    display:block;

    margin-bottom:20px;

    color:rgba(128,108,255,.65);

    font-family:
        "Courier New",
        monospace;

    font-size:9px;

    font-weight:700;

    letter-spacing:3px;

    text-align:center;
}

#login::after{
    content:"";

    position:absolute;

    left:-30%;
    top:0;

    width:30%;
    height:100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(128,108,255,.055),
            transparent
        );

    transform:skewX(-18deg);

    animation:fxLoginScan 5s ease-in-out infinite;
}

@keyframes fxLoginScan{
    0%,35%{left:-40%}
    75%,100%{left:140%}
}

#connect{
    position:relative;
    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #7055ff,
            #974fe2 55%,
            #3abce8
        );

    box-shadow:
        0 10px 30px rgba(100,80,255,.28),
        0 0 35px rgba(100,80,255,.08);
}

#connect::after{
    content:"";

    position:absolute;

    left:-50%;
    top:-100%;

    width:35%;
    height:300%;

    transform:rotate(20deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.5),
            transparent
        );

    animation:fxConnectShine 3.2s ease-in-out infinite;
}

@keyframes fxConnectShine{
    0%,50%{left:-50%}
    100%{left:140%}
}

/* =========================================================
   MICRO ANIMACIÓN DE ENTRADA
========================================================= */

.chat-main,
.users-panel{
    animation:fxPanelIn .65s cubic-bezier(.2,.8,.2,1) both;
}

.users-panel{
    animation-delay:.08s;
}

@keyframes fxPanelIn{
    from{
        opacity:0;
        transform:translateY(8px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* =========================================================
   ACCESIBILIDAD
========================================================= */

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

    .chat-container::before,
    .chat-container::after,
    header::after,
    .input-area::before,
    #send::after,
    #connect::after,
    #login::after{
        animation:none!important;
    }
}

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

@media(max-width:520px){

    .chat-container::after{
        width:380px;
        height:380px;
    }

    #messages::before{
        display:none;
    }

    .users-panel{
        box-shadow:none;
    }

    #login{
        padding:27px 22px;
    }
}

/* =========================================================
   END NEXUS // LIVE
========================================================= */

/* =========================================================
   FIXELIA COMMUNITY NEXUS — ENTRY HUB
========================================================= */

#login{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    max-width:none;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(124,92,255,.10),
            transparent 34%
        ),
        radial-gradient(
            circle at 20% 80%,
            rgba(40,190,255,.06),
            transparent 30%
        );

    border:0;
    border-radius:0;
    box-shadow:none;

    overflow-y:auto;
}

.community-hub{
    position:relative;

    width:min(1120px,calc(100% - 36px));
    min-height:100%;

    margin:0 auto;

    padding:
        54px
        20px
        40px;

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

/* ---------------------------------------------------------
   MARCA
--------------------------------------------------------- */

.hub-brand{
    text-align:center;
    animation:hubBrandIn .8s ease both;
}

.hub-logo{
    font-size:clamp(42px,7vw,72px);
    font-weight:950;
    letter-spacing:-4px;
    line-height:.9;

    background:
        linear-gradient(
            100deg,
            #fff,
            #b9adff 28%,
            #806cff 50%,
            #62ddff 72%,
            #fff
        );

    background-size:250% auto;

    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;

    filter:
        drop-shadow(0 0 18px rgba(124,92,255,.55))
        drop-shadow(0 0 40px rgba(70,190,255,.15));

    animation:
        communityLogoFlow 5s linear infinite;
}

@keyframes communityLogoFlow{
    to{
        background-position:250% center;
    }
}

.hub-kicker{
    margin-top:13px;

    color:#707b96;

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

    letter-spacing:5px;
}

.hub-intro{
    text-align:center;
    margin-top:30px;

    animation:hubFadeUp .8s .12s ease both;
}

.hub-title{
    color:#f7f7fb;

    font-size:clamp(23px,4vw,32px);
    font-weight:900;
    letter-spacing:-.7px;
}

.hub-subtitle{
    margin-top:8px;

    color:#727c94;

    font-size:13px;
}

/* ---------------------------------------------------------
   NICK
--------------------------------------------------------- */

.nick-zone{
    width:min(460px,100%);
    margin-top:27px;

    animation:hubFadeUp .8s .2s ease both;
}

.field-label{
    margin-bottom:8px;

    color:#656f87;

    font-size:9px;
    font-weight:800;
    letter-spacing:2px;
}

#login input{
    width:100%;
    height:52px;

    margin:0;

    padding:0 17px;

    background:
        linear-gradient(
            145deg,
            rgba(11,14,24,.96),
            rgba(8,11,19,.98)
        );

    border:1px solid rgba(126,110,255,.20);
    border-radius:13px;

    color:#fff;

    box-shadow:
        inset 0 0 20px rgba(0,0,0,.25),
        0 0 0 1px rgba(255,255,255,.015);

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

#login input:focus{
    border-color:rgba(139,108,255,.65);

    box-shadow:
        0 0 0 3px rgba(124,92,255,.10),
        0 0 30px rgba(124,92,255,.10);

    transform:translateY(-1px);
}

/* ---------------------------------------------------------
   TITULO COMUNIDADES
--------------------------------------------------------- */

.community-label{
    width:100%;

    display:flex;
    align-items:center;
    gap:12px;

    margin-top:34px;
    margin-bottom:14px;

    color:#717b93;

    font-size:9px;
    font-weight:900;
    letter-spacing:2px;

    animation:hubFadeUp .8s .28s ease both;
}

.community-line{
    flex:1;
    height:1px;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.04),
            rgba(124,92,255,.20),
            rgba(255,255,255,.04)
        );
}

.community-live{
    color:#56e59a;
    font-size:8px;
    letter-spacing:1.2px;

    text-shadow:
        0 0 10px rgba(74,222,128,.5);
}

/* ---------------------------------------------------------
   GRID
--------------------------------------------------------- */

.community-grid{
    width:100%;

    display:grid;

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

    gap:10px;

    animation:
        hubGridIn .9s .32s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes hubGridIn{
    from{
        opacity:0;
        transform:translateY(22px) scale(.98);
    }

    to{
        opacity:1;
        transform:none;
    }
}

.community-card{
    position:relative;

    min-height:145px;

    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;

    padding:18px;

    border:1px solid rgba(255,255,255,.065);
    border-radius:16px;

    background:
        linear-gradient(
            145deg,
            rgba(25,29,45,.92),
            rgba(12,15,25,.96)
        );

    color:#fff;

    text-align:left;

    cursor:pointer;

    overflow:hidden;

    transition:
        transform .22s ease,
        border-color .22s ease,
        background .22s ease,
        box-shadow .22s ease;
}

.community-card::before{
    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle at 20% 0%,
            rgba(124,92,255,.13),
            transparent 55%
        );

    opacity:.4;

    transition:opacity .25s ease;
}

.community-card::after{
    content:"";

    position:absolute;

    left:-100%;
    top:0;

    width:70%;
    height:100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.055),
            transparent
        );

    transform:skewX(-18deg);

    transition:left .5s ease;
}

.community-card:hover{
    transform:
        translateY(-5px)
        scale(1.015);

    border-color:
        rgba(133,112,255,.38);

    background:
        linear-gradient(
            145deg,
            rgba(32,36,58,.98),
            rgba(14,18,30,.98)
        );

    box-shadow:
        0 15px 35px rgba(0,0,0,.28),
        0 0 25px rgba(124,92,255,.08);
}

.community-card:hover::before{
    opacity:1;
}

.community-card:hover::after{
    left:130%;
}

.community-card.selected{
    border-color:
        rgba(139,108,255,.72);

    background:
        linear-gradient(
            145deg,
            rgba(54,45,93,.62),
            rgba(18,20,34,.98)
        );

    box-shadow:
        inset 0 0 0 1px rgba(139,108,255,.10),
        0 0 25px rgba(124,92,255,.14);
}

.community-card.selected::before{
    opacity:1;
}

.community-icon{
    position:relative;
    z-index:2;

    width:39px;
    height:39px;

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

    margin-bottom:14px;

    border-radius:11px;

    background:
        rgba(124,92,255,.11);

    border:
        1px solid rgba(139,108,255,.15);

    font-size:18px;

    box-shadow:
        0 0 20px rgba(124,92,255,.07);
}

.community-name{
    position:relative;
    z-index:2;

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

    letter-spacing:.7px;
}

.community-desc{
    position:relative;
    z-index:2;

    margin-top:5px;

    color:#737e96;

    font-size:10px;
    line-height:1.4;
}

.community-state{
    position:relative;
    z-index:2;

    margin-top:auto;
    padding-top:10px;

    color:#55d99a;

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

    letter-spacing:.7px;

    opacity:.75;
}

/* ---------------------------------------------------------
   SELECCIÓN
--------------------------------------------------------- */

.hub-selection{
    width:100%;

    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;

    margin-top:22px;

    color:#5f6981;

    font-size:9px;
    letter-spacing:1.5px;

    animation:hubFadeUp .8s .42s ease both;
}

.hub-selection strong{
    color:#b9adff;

    font-size:10px;

    text-shadow:
        0 0 12px rgba(139,108,255,.35);
}

.selection-pulse{
    width:6px;
    height:6px;

    border-radius:50%;

    background:#8b6cff;

    box-shadow:
        0 0 8px #8b6cff,
        0 0 18px rgba(139,108,255,.7);

    animation:
        selectionPulse 1.6s ease-in-out infinite;
}

@keyframes selectionPulse{
    0%,100%{
        opacity:.45;
        transform:scale(.8);
    }

    50%{
        opacity:1;
        transform:scale(1.15);
    }
}

/* ---------------------------------------------------------
   BOTÓN ENTRAR
--------------------------------------------------------- */

#connect{
    position:relative;

    width:min(390px,100%);
    height:57px;

    margin-top:17px;

    border-radius:15px;

    border:1px solid rgba(153,137,255,.65);

    background:
        linear-gradient(
            135deg,
            #7657ff,
            #934fe2 50%,
            #3bbde8
        );

    box-shadow:
        0 10px 30px rgba(92,72,220,.22),
        0 0 35px rgba(92,72,220,.08);

    overflow:hidden;

    animation:hubFadeUp .8s .48s ease both;
}

#connect::before{
    content:"";

    position:absolute;

    top:-100%;
    left:-40%;

    width:35%;
    height:300%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.48),
            transparent
        );

    transform:rotate(20deg);

    animation:
        communityButtonShine 3.4s ease-in-out infinite;
}

@keyframes communityButtonShine{
    0%{left:-50%}
    45%,100%{left:130%}
}

#connect span,
#connect b{
    position:relative;
    z-index:2;
}

#connect span{
    letter-spacing:1.2px;
}

#connect b{
    margin-left:12px;
    font-size:18px;
}

#connect:hover{
    transform:
        translateY(-3px)
        scale(1.015);

    filter:brightness(1.08);

    box-shadow:
        0 15px 40px rgba(92,72,220,.34),
        0 0 55px rgba(70,190,255,.12);
}

/* ---------------------------------------------------------
   SEGURIDAD
--------------------------------------------------------- */

.hub-security{
    display:flex;
    align-items:center;
    gap:9px;

    margin-top:15px;

    color:#454e64;

    font-size:8px;
    font-weight:700;

    letter-spacing:1.3px;

    animation:hubFadeUp .8s .54s ease both;
}

.hub-security span{
    color:#4ade80;

    text-shadow:
        0 0 8px rgba(74,222,128,.7);
}

.hub-security i{
    width:1px;
    height:9px;

    background:#343b50;
}

/* ---------------------------------------------------------
   ANIMACIONES
--------------------------------------------------------- */

@keyframes hubFadeUp{
    from{
        opacity:0;
        transform:translateY(15px);
    }

    to{
        opacity:1;
        transform:none;
    }
}

@keyframes hubBrandIn{
    from{
        opacity:0;
        transform:translateY(-12px) scale(.96);
    }

    to{
        opacity:1;
        transform:none;
    }
}

/* ---------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------- */

@media(max-width:950px){

    .community-grid{
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }

}

@media(max-width:650px){

    .community-hub{
        width:min(100% - 22px,520px);
        padding:35px 10px 28px;
    }

    .hub-logo{
        font-size:50px;
    }

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

        gap:8px;
    }

    .community-card{
        min-height:132px;
        padding:14px;
    }

    .community-icon{
        width:34px;
        height:34px;
        font-size:16px;
    }

    .community-name{
        font-size:11px;
    }

    .community-desc{
        font-size:9px;
    }

}

@media(max-width:390px){

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

    .community-card{
        min-height:105px;
    }

    .community-icon{
        margin-bottom:8px;
    }

    .community-state{
        padding-top:6px;
    }

}

/* =========================================================
   END COMMUNITY NEXUS ENTRY
========================================================= */