/* File: home.css */

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

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    background: linear-gradient(135deg, #f7f8fa, #eef2f7);
    color: #333;
    line-height: 1.6;
    animation: fadeIn 0.35s ease;
}

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

/* Global container */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header / Navigation */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    position: sticky;
    top: 0;
    z-index: 100;
}

header .logo {
    font-weight: bold;
    font-size: 1.5rem;
    color: #182848;
}

header nav a {
    margin-left: 1.5rem;
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: color 0.2s ease;
}

header nav a:hover {
    color: #182848;
}

/* Main container */
.container-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 85vh;
    text-align: center;
    padding: 20px;
}

/* Hero logo/title */
.logo-large {
    font-size: 2.7rem;
    font-weight: bold;
    margin-bottom: 40px;
    background: linear-gradient(90deg, #182848, #4b6cb7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Buttons */
.btn-login {
    background: #007bff;
    color: #fff;
    border: none;
    padding: 15px 40px;
    font-size: 1.2rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    font-weight: 600;
}

.btn-login:hover {
    background: #0056b3;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

/* Placeholder blocks */
.placeholder {
    width: 100%;
    max-width: 600px;
    height: 120px;
    background: #e0e0e0;
    margin: 20px 0;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #888;
    font-size: 1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.placeholder:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Footer */
footer {
    padding: 1.5rem 2rem;
    text-align: center;
    background: #f3f4f7;
    font-size: 0.9rem;
    color: #777;
    margin-top: 60px;
}

/* Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 480px) {

    .logo-large {
        font-size: 2rem;
    }

    .btn-login {
        padding: 12px 30px;
        font-size: 1rem;
    }

    .placeholder {
        height: 100px;
        font-size: 0.9rem;
    }

    header {
        flex-direction: column;
        gap: 0.5rem;
    }

    header nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    header nav a {
        margin: 0 0.5rem;
    }

}

<style>
*{box-sizing:border-box;}

:root{
--bg:#0b0f14;
--panel:#11161d;
--panel-2:#151c25;
--panel-3:#1a2230;
--border:rgba(255,255,255,0.08);
--text:#eef3fb;
--muted:#98a6bb;
--accent:#3b82f6;
--accent-hover:#5b97f7;
--bubble-them:#1a2230;
--bubble-me:linear-gradient(135deg,#2563eb,#3b82f6);
--danger:#e91e63;
--shadow:0 18px 40px rgba(0,0,0,0.28);
}

html,body{
margin:0;
height:100%;
font-family:"Segoe UI",Arial,sans-serif;
background:
radial-gradient(circle at top left,rgba(59,130,246,0.08),transparent 28%),
radial-gradient(circle at bottom right,rgba(99,102,241,0.10),transparent 30%),
var(--bg);
color:var(--text);
overflow-x:hidden;
}

body{display:flex;flex-direction:column;}

a{color:inherit;}

.top-header{
height:64px;
background:rgba(17,22,29,0.92);
backdrop-filter:blur(12px);
border-bottom:1px solid var(--border);
display:flex;
align-items:center;
justify-content:space-between;
padding:0 24px;
flex-shrink:0;
box-shadow:0 8px 24px rgba(0,0,0,0.18);
}

.brand{display:flex;align-items:center;gap:12px;}

.brand-mark{
width:36px;
height:36px;
border-radius:10px;
background:linear-gradient(135deg,#1d4ed8,#60a5fa);
display:flex;
align-items:center;
justify-content:center;
font-weight:700;
box-shadow:0 8px 18px rgba(37,99,235,0.35);
}

.brand-name{
font-size:18px;
font-weight:700;
letter-spacing:0.2px;
}

.nav{display:flex;align-items:center;gap:10px;}

.nav a{
color:var(--muted);
text-decoration:none;
font-size:14px;
font-weight:600;
padding:10px 14px;
border-radius:10px;
transition:0.2s ease;
}

.nav a:hover,
.nav a.active{
color:#fff;
background:rgba(255,255,255,0.06);
}

.wrapper{
position:relative;
z-index:2;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
padding:1.2rem;
padding-top:80px; /* 👈 ADD THIS LINE */
}

.sidebar{
width:340px;
min-width:340px;
background:rgba(17,22,29,0.86);
border-right:1px solid var(--border);
display:flex;
flex-direction:column;
backdrop-filter:blur(10px);
}

.sidebar-header{
padding:22px 20px 16px;
border-bottom:1px solid var(--border);
}

.sidebar-header h1{
margin:0;
font-size:22px;
font-weight:700;
}

.sidebar-header p{
margin:6px 0 0;
color:var(--muted);
font-size:13px;
}

.search-box{
padding:14px 18px;
border-bottom:1px solid var(--border);
}

.search-box input{
width:100%;
padding:12px 14px;
border-radius:12px;
border:1px solid transparent;
outline:none;
background:var(--panel-3);
color:#fff;
font-size:14px;
transition:0.2s ease;
}

.search-box input:focus{
border-color:rgba(59,130,246,0.6);
box-shadow:0 0 0 3px rgba(59,130,246,0.18);
}

.conversation-list{
overflow-y:auto;
flex-grow:1;
padding:8px;
}

.conversation-item{
padding:14px 14px 14px 16px;
border:1px solid transparent;
border-radius:14px;
cursor:pointer;
position:relative;
transition:0.18s ease;
margin-bottom:6px;
background:transparent;
}

.conversation-item:hover{
background:rgba(255,255,255,0.04);
border-color:rgba(255,255,255,0.04);
}

.conversation-item.active{
background:linear-gradient(135deg,rgba(37,99,235,0.18),rgba(59,130,246,0.08));
border-color:rgba(59,130,246,0.25);
}

.conversation-title{
font-size:15px;
font-weight:700;
margin-bottom:5px;
color:#fff;
padding-right:42px;
}

.conversation-last{
font-size:13px;
color:var(--muted);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
max-width:100%;
}

.unread{
background:var(--danger);
color:#fff;
min-width:22px;
height:22px;
padding:0 7px;
border-radius:999px;
font-size:11px;
font-weight:700;
position:absolute;
right:12px;
top:12px;
display:inline-flex;
align-items:center;
justify-content:center;
box-shadow:0 8px 16px rgba(233,30,99,0.32);
}

.chat-panel{
flex-grow:1;
display:flex;
flex-direction:column;
min-width:0;
background:
linear-gradient(180deg,rgba(255,255,255,0.015),rgba(255,255,255,0)),
#0d131a;
}
.chat-header{
min-height:78px;
padding:16px 22px;
border-bottom:1px solid var(--border);
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
background:rgba(15,19,26,0.85);
backdrop-filter:blur(10px);
}

.chat-user-block{min-width:0;}

.chat-user{
font-size:18px;
font-weight:700;
margin:0;
}

.chat-subtitle{
margin:5px 0 0;
color:var(--muted);
font-size:13px;
}

.messages{
flex-grow:1;
overflow-y:auto;
padding:24px 24px 18px;
min-height:0;
scroll-behavior:smooth;
}

.empty-state{
max-width:460px;
margin:70px auto 0;
text-align:center;
color:var(--muted);
background:rgba(255,255,255,0.03);
border:1px solid var(--border);
border-radius:18px;
padding:34px 26px;
}

.empty-state h2{
margin:0 0 10px;
color:#fff;
font-size:22px;
}

.date-separator{
display:flex;
align-items:center;
justify-content:center;
margin:12px 0 20px;
}

.date-separator span{
font-size:12px;
color:var(--muted);
background:rgba(255,255,255,0.04);
border:1px solid var(--border);
padding:7px 12px;
border-radius:999px;
backdrop-filter:blur(8px);
}

.message-row{
display:flex;
margin-bottom:14px;
}

.message-row.me-row{
justify-content:flex-end;
}

.message{
max-width:min(72%,720px);
border-radius:18px;
padding:12px 14px 10px;
font-size:14px;
line-height:1.5;
word-wrap:break-word;
overflow-wrap:anywhere;
box-shadow:var(--shadow);
animation:fadeIn 0.16s ease;
border:1px solid rgba(255,255,255,0.04);
}

.message.me{
background:var(--bubble-me);
border-bottom-right-radius:6px;
}

.message.them{
background:var(--bubble-them);
border-bottom-left-radius:6px;
}

.msg-text{
white-space:pre-wrap;
word-break:break-word;
}

.msg-attachment{
margin-top:10px;
background:rgba(255,255,255,0.06);
border-radius:14px;
padding:10px;
}

.message.me .msg-attachment{
background:rgba(255,255,255,0.16);
}

img.message-image{
display:block;
max-width:100%;
border-radius:12px;
cursor:pointer;
margin:0;
}

.attachment-actions{
display:flex;
align-items:center;
gap:10px;
margin-top:10px;
flex-wrap:wrap;
}

.attachment-link,
.download-btn{
display:inline-flex;
align-items:center;
gap:6px;
font-size:12px;
font-weight:700;
text-decoration:none;
padding:8px 10px;
border-radius:10px;
transition:0.2s ease;
}

.attachment-link{
color:#fff;
background:rgba(255,255,255,0.09);
}

.attachment-link:hover{
background:rgba(255,255,255,0.15);
}

.download-btn{
color:#dbeafe;
background:rgba(14,165,233,0.18);
}

.download-btn:hover{
background:rgba(14,165,233,0.28);
}

.msg-file{
display:flex;
align-items:center;
gap:10px;
padding:12px 13px;
border-radius:12px;
background:rgba(255,255,255,0.06);
margin-top:10px;
flex-wrap:wrap;
}

.file-icon{
width:36px;
height:36px;
border-radius:10px;
background:rgba(255,255,255,0.09);
display:inline-flex;
align-items:center;
justify-content:center;
font-size:16px;
flex-shrink:0;
}

.file-meta{
min-width:0;
flex:1;
}

.file-name{
font-size:13px;
font-weight:700;
color:#fff;
word-break:break-word;
}

.file-label{
font-size:11px;
color:var(--muted);
margin-top:3px;
}

.timestamp{
display:block;
font-size:11px;
opacity:0.74;
margin-top:8px;
}

.message.me .timestamp{
color:rgba(255,255,255,0.9);
}

.message.them .timestamp{
color:var(--muted);
}

.input-area{
border-top:1px solid var(--border);
padding:14px 16px;
display:flex;
align-items:center;
gap:10px;
background:rgba(17,22,29,0.92);
backdrop-filter:blur(10px);
}

.input-wrap{
flex-grow:1;
min-width:0;
display:flex;
align-items:center;
gap:10px;
background:var(--panel-3);
border:1px solid transparent;
border-radius:14px;
padding:8px 10px;
transition:0.2s ease;
}

.input-wrap:focus-within{
border-color:rgba(59,130,246,0.6);
box-shadow:0 0 0 3px rgba(59,130,246,0.16);
}

.input-area textarea{
flex-grow:1;
min-width:0;
padding:10px 6px;
border:none;
outline:none;
background:transparent;
color:#fff;
font-size:14px;
font-family:inherit;
resize:none;
min-height:20px;
max-height:120px;
line-height:1.4;
overflow-y:auto;
}

.input-area input[type="file"]{
display:none;
}

.attach-btn{
width:42px;
height:42px;
border-radius:12px;
background:rgba(255,255,255,0.06);
color:#fff;
display:inline-flex;
align-items:center;
justify-content:center;
cursor:pointer;
font-size:18px;
transition:0.2s ease;
flex-shrink:0;
}

.attach-btn:hover{
background:rgba(255,255,255,0.12);
}

.send-btn{
padding:12px 18px;
background:linear-gradient(135deg,#2563eb,#3b82f6);
color:#fff;
border:none;
border-radius:12px;
cursor:pointer;
font-weight:700;
min-width:92px;
transition:0.2s ease;
box-shadow:0 10px 18px rgba(37,99,235,0.28);
}

.send-btn:hover:not(:disabled){
transform:translateY(-1px);
background:linear-gradient(135deg,#3b82f6,#5b97f7);
}

.send-btn:disabled,
.attach-btn.disabled{
opacity:0.45;
cursor:not-allowed;
box-shadow:none;
}

.file-preview{
display:none;
margin:0 16px 12px;
padding:10px 12px;
border:1px solid var(--border);
background:rgba(255,255,255,0.04);
border-radius:14px;
align-items:center;
justify-content:space-between;
gap:12px;
}

.file-preview.active{
display:flex;
}

.file-preview-name{
font-size:13px;
color:#fff;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

.file-preview-clear{
border:none;
background:transparent;
color:var(--muted);
cursor:pointer;
font-size:18px;
line-height:1;
}

.file-preview-clear:hover{
color:#fff;
}

.lightbox{
position:fixed;
inset:0;
background:rgba(4,8,14,0.88);
display:none;
align-items:center;
justify-content:center;
z-index:9999;
padding:30px;
}

.lightbox.active{
display:flex;
}

.lightbox-inner{
position:relative;
max-width:92vw;
max-height:92vh;
}

.lightbox img{
display:block;
max-width:92vw;
max-height:92vh;
border-radius:16px;
box-shadow:0 24px 60px rgba(0,0,0,0.45);
}

.lightbox-close{
position:absolute;
top:-14px;
right:-14px;
width:42px;
height:42px;
border-radius:50%;
border:none;
background:rgba(255,255,255,0.12);
color:#fff;
cursor:pointer;
font-size:22px;
}

.lightbox-close:hover{
background:rgba(255,255,255,0.2);
}

@keyframes fadeIn{
from{opacity:0;transform:translateY(6px);}
to{opacity:1;transform:translateY(0);}
}
@media (max-width:1024px){
.sidebar{
width:310px;
min-width:310px;
}
}

@media (max-width:820px){
.sidebar{
width:42%;
min-width:42%;
}
.message{
max-width:82%;
}
}

@media (max-width:640px){

.top-header{
padding:0 14px;
height:58px;
}

.brand-name{
font-size:16px;
}

.nav{
gap:4px;
}

.nav a{
padding:8px 10px;
font-size:12px;
}

.wrapper{
height:calc(100vh - 58px);
flex-direction:column;
}

.sidebar{
width:100%;
min-width:100%;
height:220px;
border-right:none;
border-bottom:1px solid var(--border);
}

.chat-panel{
height:calc(100vh - 278px);
}

.messages{
padding:18px 14px 14px;
}

.chat-header{
padding:14px 16px;
min-height:68px;
}

.message{
max-width:88%;
font-size:15px;
}

.input-area{
padding:12px;
}

img.message-image{
max-width:100%;
}
  
/* Mobile input fix */

@media (max-width:640px){

.chat-panel{
display:flex;
flex-direction:column;
height:calc(100vh - 278px);
}

.messages{
flex:1;
overflow-y:auto;
}

.input-area{
position:sticky;
bottom:0;
left:0;
right:0;
z-index:5;
background:rgba(17,22,29,0.98);
padding:10px;
}
  
/* Increase message text size */

.message{
font-size:16px;
}

@media (max-width:640px){

.message{
font-size:17px;
}

.msg-text{
font-size:17px;
}

#msgInput{
flex-grow:1;
min-width:0;
padding:10px 6px;
border:none;
outline:none;
background:transparent;
color:#fff;
font-size:14px;
font-family:inherit;
resize:none;
min-height:24px;
max-height:120px;
line-height:1.5;
}

/* message grouping */
.message-row.grouped {
margin-top: 2px;
}

.message.grouped {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}

/* date separator */
.date-separator{
text-align:center;
font-size:12px;
color:#999;
margin:18px 0;
position:relative;
}

.date-separator::before,
.date-separator::after{
content:"";
position:absolute;
top:50%;
width:40%;
height:1px;
background:#e5e5e5;
}

.date-separator::before{
left:0;
}

.date-separator::after{
right:0;
}

.post form { margin: 5px 0; }
.post textarea { margin-top: 5px; }

}
  
/* New Header Style */

.app-header{
position:fixed;
top:0;
left:0;
width:100%;
height:60px;

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

padding:0 20px;
z-index:100;

/* clean glass look */
background:rgba(11,15,20,0.7);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);

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

/* logo */

.app-header .logo{
font-size:1rem;
font-weight:600;
color:#fff;
text-decoration:none;
letter-spacing:0.3px;
}

/* nav container */

.app-header nav{
display:flex;
align-items:center;
gap:16px;
}

/* links */

.app-header nav a{
font-size:0.85rem;
color:#aaa;
text-decoration:none;
transition:0.2s ease;
}

/* hover */

.app-header nav a:hover{
color:#fff;
}

/* register button */

.nav-cta{
padding:6px 12px;
border-radius:8px;
background:linear-gradient(135deg,#2563eb,#3b82f6);
color:#fff !important;
font-size:0.8rem;
}
  
.card{
width:100%;
max-width:420px;
margin:auto;
padding:2rem 1.5rem;
border-radius:18px;

background:rgba(255,255,255,0.04);
backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,0.08);

box-shadow:0 10px 40px rgba(0,0,0,0.4);

transition: transform 0.2s ease;
transform-style: preserve-3d;
will-change: transform;
}

</style>