body{
    background:#eef2f7;
    font-family:Arial,Helvetica,sans-serif;
}

.navbar-brand{
    font-weight:bold;
    font-size:24px;
}

.sidebar{
    background:#ffffff;
    min-height:100vh;
    border-right:1px solid #ddd;
}

.right-sidebar{
    background:#ffffff;
    min-height:100vh;
    border-left:1px solid #ddd;
}

.chat-area{
    background:#f8f9fa;
    min-height:100vh;
}

.profile-img{
    width:50px;
    height:50px;
    border-radius:50%;
    object-fit:cover;
}

.menu-item{
    padding:12px;
    cursor:pointer;
    border-radius:8px;
    transition:.3s;
}

.menu-item:hover{
    background:#0d6efd;
    color:white;
}

.online{
    color:green;
    font-size:12px;
}

.user-card{

cursor:pointer;

transition:.3s;

}

.user-card:hover{

background:#eaf3ff;

transform:scale(1.02);

}

.sidebar{

overflow-y:auto;

height:calc(100vh - 56px);

}

.chat-area{

height:calc(100vh - 56px);

overflow-y:auto;

}

.right-sidebar{

height:calc(100vh - 56px);

overflow-y:auto;

}

.chat-area {
    background: #f8f9fa;
    height: calc(100vh - 56px);
    overflow-y: auto;

    /* NEW: limit width for better chat feel */
    max-width: 700px;
    margin: 0 auto;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

/* MOBILE VIEW */
@media (max-width: 768px) {

    .sidebar {
        display: none;
    }

    .right-sidebar {
        display: none;
    }

    .chat-area {
        width: 100%;
        max-width: 100%;
        height: calc(100vh - 56px);
        border: none;
        margin: 0;
    }

    .navbar-brand {
        font-size: 18px;
    }

    .menu-item {
        font-size: 14px;
        padding: 10px;
    }
}

.navbar-brand img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    border-radius: 8px;
    background: white;
    padding: 3px;
}

/* Reaction buttons - no border */
.reaction-picker {
    display: flex;
    gap: 5px;
    margin-top: 5px;
}


.react-btn {
    background: transparent;
    border: none;
    outline: none;
    padding: 2px 4px;
    font-size: 20px;
    cursor: pointer;
    transition: transform 0.2s ease;
}


.react-btn:hover {
    transform: scale(1.3);
}



/* Reaction display after selected */
.reaction-display {
    margin-top: 5px;
    display: flex;
    gap: 5px;
}


.reaction-count {
    background: transparent;
    border: none;
    padding: 0;
    font-size: 14px;
}



/* ===========================
   GROUPS
=========================== */

/* ==========================
   GROUP CHAT SIDEBAR
========================== */

.group-item{

    display:flex;
    align-items:center;

    padding:12px 15px;

    cursor:pointer;

    border-bottom:1px solid #f1f1f1;

    transition:.2s ease;

}


.group-item:hover{

    background:#f8f9fa;

}



.group-item.active{

    background:#e7f1ff;

    border-left:4px solid #0d6efd;

}



.group-item .avatar{

    width:48px;
    height:48px;

    border-radius:50%;

    object-fit:cover;

    margin-right:12px;

}



.group-details{

    flex:1;

}



.group-name{

    font-weight:600;

    color:#212529;

    display:flex;

    align-items:center;

    gap:8px;

}



.group-name i{

    color:#0d6efd;

    font-size:18px;

}



.group-info{

    font-size:12px;

    color:#6c757d;

    margin-top:3px;

}


/* ===============================
   Theme Gallery
================================= */

.theme-gallery{

    display:flex;

    flex-wrap:wrap;

    gap:25px;

    justify-content:center;

}

.theme-card{

    width:260px;

    padding:18px;

    background:#fff;

    border:1px solid #ddd;

    border-radius:12px;

    text-align:center;

    box-shadow:0 2px 8px rgba(0,0,0,.08);

    transition:.25s;

}

.theme-card:hover{

    transform:translateY(-4px);

    box-shadow:0 8px 18px rgba(0,0,0,.15);

}

.theme-card img{

    width:100%;

    height:180px;

    object-fit:cover;

    border-radius:8px;

    margin-bottom:15px;

}

.theme-card h5{

    font-weight:700;

    min-height:48px;

}

.theme-card p{

    min-height:48px;

    color:#666;

    font-size:14px;

}

/* Fixed-size button */

.applyTheme{

    width:220px;

    height:46px;

    margin-top:15px;

    border-radius:30px;

    font-weight:600;

    white-space:nowrap;

}

body{
font-family:Poppins,sans-serif;
background:#f5f8fc;
}

.navbar{
background:rgba(10,20,50,.85);
backdrop-filter:blur(10px);
}

.hero{
padding:140px 0 70px;
background:linear-gradient(135deg,#007bff,#20d6a2);
color:white;
overflow:hidden;
}

.hero-image{
max-height:700px;
filter:drop-shadow(0 30px 60px rgba(0,0,0,.25));
animation:float 5s ease-in-out infinite;
}

@keyframes float{

0%{transform:translateY(0);}
50%{transform:translateY(-12px);}
100%{transform:translateY(0);}

}

.feature-card{

background:white;
padding:35px;
border-radius:20px;
text-align:center;
transition:.3s;
height:100%;
box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.feature-card:hover{

transform:translateY(-10px);

}

.icon{

font-size:50px;
margin-bottom:15px;

}

footer{

background:#08182f;
color:white;
padding:50px 0;

}

.btn-primary{

background:#19c5b8;
border:none;

}

.btn-primary:hover{

background:#00b5a8;

}