/* ======================================================
   ROCKBOOK X MESSENGER
   Estilo Facebook + MegaMan X Cyberpunk
====================================================== */

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

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

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

body{

    font-family:'Orbitron', sans-serif;

    background:
    linear-gradient(rgba(0,0,0,0.88), rgba(0,0,0,0.94)),
    url("https://images.unsplash.com/photo-1516321318423-f06f85e504b3?q=80&w=1920")
    no-repeat center center fixed;

    background-size:cover;

    color:white;

    height:100vh;

    display:flex;

    overflow:hidden;
}

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

.sidebar{

    width:340px;

    background:rgba(5,12,24,0.96);

    border-right:2px solid #16b5ff;

    display:flex;
    flex-direction:column;

    padding:20px;

    overflow-y:auto;
}

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

.sidebar-top{

    margin-bottom:25px;
}

.sidebar-top h1{

    color:#67dcff;

    margin-bottom:18px;

    text-shadow:
    0 0 8px rgba(22,181,255,0.5);
}

/* ===== SEARCH ===== */

.sidebar-top input{

    width:100%;

    padding:14px;

    border:none;
    outline:none;

    border-radius:14px;

    background:#09111d;

    color:white;

    border:1px solid #17425e;
}

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

.chat-user{

    width:100%;

    display:flex;
    align-items:center;

    gap:15px;

    padding:14px;

    border:none;

    border-radius:18px;

    background:transparent;

    color:white;

    cursor:pointer;

    transition:0.25s;

    margin-bottom:10px;
}

.chat-user:hover{

    background:#12263c;
}

.chat-user.active{

    background:#16b5ff;

    color:black;
}

/* ===== IMG ===== */

.chat-user img{

    width:60px;
    height:60px;

    border-radius:50%;

    object-fit:cover;

    border:2px solid #16b5ff;
}

.chat-user h3{

    margin-bottom:5px;
}

.chat-user p{

    font-size:0.8rem;

    opacity:0.8;
}

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

.chat-container{

    flex:1;

    display:flex;
    flex-direction:column;

    background:rgba(0,0,0,0.35);
}

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

.chat-top{

    height:85px;

    background:rgba(5,12,24,0.96);

    border-bottom:2px solid #16b5ff;

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

    padding:0 25px;
}

/* ===== PROFILE ===== */

.chat-profile{

    display:flex;
    align-items:center;

    gap:15px;
}

.chat-profile img{

    width:60px;
    height:60px;

    border-radius:50%;

    border:2px solid #16b5ff;
}

.chat-profile h2{

    color:#6edfff;

    margin-bottom:4px;
}

.chat-profile span{

    color:#9fc3d8;

    font-size:0.85rem;
}

/* ===== ICONS ===== */

.chat-icons{

    display:flex;
    gap:10px;
}

.chat-icons button{

    width:45px;
    height:45px;

    border:none;

    border-radius:12px;

    background:#10243b;

    color:#72dcff;

    cursor:pointer;

    transition:0.2s;
}

.chat-icons button:hover{

    background:#16b5ff;

    color:black;
}

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

.chat-area{

    flex:1;

    padding:25px;

    overflow-y:auto;

    display:flex;
    flex-direction:column;

    gap:18px;
}

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

.message{

    max-width:70%;

    padding:14px 18px;

    border-radius:18px;

    line-height:1.6;

    position:relative;
}

/* ===== RECEIVED ===== */

.received{

    align-self:flex-start;

    background:#13263d;

    border:1px solid #1b8cc2;
}

/* ===== SENT ===== */

.sent{

    align-self:flex-end;

    background:#16b5ff;

    color:black;
}

/* ===== NAMES ===== */

.message span{

    display:block;

    margin-top:8px;

    font-size:0.75rem;

    opacity:0.7;
}

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

.chat-input{

    height:85px;

    background:rgba(5,12,24,0.96);

    border-top:2px solid #16b5ff;

    display:flex;
    align-items:center;

    gap:15px;

    padding:0 20px;
}

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

.chat-input input{

    flex:1;

    padding:15px;

    border:none;
    outline:none;

    border-radius:18px;

    background:#09111d;

    color:white;

    border:1px solid #18425c;
}

/* ===== BUTTONS ===== */

.chat-input button{

    width:48px;
    height:48px;

    border:none;

    border-radius:14px;

    background:#10243b;

    color:#72dcff;

    cursor:pointer;

    transition:0.2s;
}

.chat-input button:hover{

    background:#16b5ff;

    color:black;
}

/* ===== SCROLL ===== */

::-webkit-scrollbar{
    width:8px;
}

::-webkit-scrollbar-track{
    background:#08111d;
}

::-webkit-scrollbar-thumb{

    background:#16b5ff;

    border-radius:10px;
}

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

@media(max-width:900px){

    .sidebar{

        width:100px;
    }

    .sidebar-top h1,
    .sidebar-top input,
    .chat-user div{

        display:none;
    }

    .chat-user{

        justify-content:center;
    }
}

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

@media(max-width:700px){

    body{

        flex-direction:column;
    }

    .sidebar{

        width:100%;
        height:110px;

        flex-direction:row;

        overflow-x:auto;

        overflow-y:hidden;

        border-right:none;
        border-bottom:2px solid #16b5ff;
    }

    .chat-user{

        min-width:90px;

        flex-direction:column;

        gap:8px;
    }

    .chat-user img{

        width:50px;
        height:50px;
    }

    .chat-user div{

        display:block;
        text-align:center;
    }

    .chat-user h3{

        font-size:0.75rem;
    }

    .chat-user p{

        display:none;
    }
}

/* ===== NAV BUTTON ===== */

.nav-button{

    text-decoration:none;

    padding:10px 15px;

    border-radius:12px;

    background:#10243b;

    color:#72dcff;

    transition:0.2s;

    font-size:0.9rem;
}

.nav-button:hover{

    background:#16b5ff;

    color:black;
}

/* ===== BOTONES NAVEGACION ===== */

.nav-button{

    text-decoration:none;

    padding:10px 16px;

    border-radius:12px;

    background:#10243b;

    color:#72dcff;

    font-size:0.9rem;

    transition:0.25s;

    border:1px solid #1b8dc5;
}

.nav-button:hover{

    background:#16b5ff;

    color:black;

    box-shadow:
    0 0 10px rgba(22,181,255,0.6);
}

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

.popup-overlay{

    position:fixed;

    inset:0;

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

    display:none;

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

    z-index:9999;
}

/* ===================================
   POPUP BASE
=================================== */

.popup{

    width:420px;

    max-width:90%;

    padding:30px;

    border-radius:25px;

    text-align:center;

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    animation:popupOpen .3s ease;
}

/* ===================================
   ROJO
=================================== */

.popup-red{

    background:rgba(255,0,0,0.15);

    border:2px solid rgba(255,100,100,0.4);

    box-shadow:
    0 0 25px rgba(255,0,0,0.4);
}

/* ===================================
   GRIS
=================================== */

.popup-gray{

    background:rgba(180,180,180,0.12);

    border:2px solid rgba(255,255,255,0.2);

    box-shadow:
    0 0 25px rgba(255,255,255,0.15);
}

/* ===================================
   WORDART
=================================== */

.popup-wordart{

    width:250px;

    max-width:100%;

    margin-bottom:20px;
}

/* ===================================
   TITULOS
=================================== */

.popup h2{

    margin-bottom:15px;
}

.popup p{

    margin-bottom:20px;

    line-height:1.6;
}

/* ===================================
   BOTON
=================================== */

.popup button{

    padding:12px 25px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    font-family:'Orbitron',sans-serif;

    background:#16b5ff;

    color:black;
}

/* ===================================
   ANIMACION
=================================== */

@keyframes popupOpen{

    from{

        transform:scale(.8);

        opacity:0;
    }

    to{

        transform:scale(1);

        opacity:1;
    }
}