*{
box-sizing:border-box;
font-family:'Vazirmatn',sans-serif;
}

/* ---------- BODY ---------- */

body{
margin:0;
background:linear-gradient(135deg,#0e1621,#111827);
height:100vh;
display:flex;
justify-content:center;
align-items:center;
}

/* ---------- CONTAINER ---------- */

.chat-container{
width:100%;
max-width:650px;
height:95vh;
display:flex;
flex-direction:column;
background:#17212b;
border-left:1px solid #1f2c3a;
border-right:1px solid #1f2c3a;
border-radius:20px;
overflow:hidden;
box-shadow:0 20px 50px rgba(0,0,0,.45);
}

/* ---------- HEADER ---------- */

.chat-header{
padding:16px 18px;
background:#1f2c3a;
color:#fff;
display:flex;
justify-content:space-between;
align-items:center;
border-bottom:1px solid #243447;
font-weight:600;
letter-spacing:.4px;
}

/* ---------- MESSAGES ---------- */

.messages{
flex:1;
overflow-y:auto;
padding:20px;
display:flex;
flex-direction:column;
scroll-behavior:smooth;
gap:15px;
}

.messages::-webkit-scrollbar{
width:6px;
}

.messages::-webkit-scrollbar-thumb{
background:rgba(255,255,255,.12);
border-radius:10px;
}

/* ---------- MESSAGE BUBBLE ---------- */

.message{
background:#2f5478;
color:#fff;
padding:14px 16px;
border-radius:18px 18px 6px 18px;
max-width:75%;
align-self:flex-start;
text-align:right;
direction:rtl;
animation:popIn .25s cubic-bezier(.2,.8,.2,1);
box-shadow:0 6px 18px rgba(0,0,0,.28);
border:1px solid rgba(255,255,255,.05);
transition:.2s;
}

.message:hover{
transform:translateY(-1px);
box-shadow:0 10px 22px rgba(0,0,0,.38);
}

.message p{
margin:0;
text-align:right;
}

/* ---------- REPLY ---------- */

.reply-box{
background:rgba(255,255,255,.08);
padding:8px 10px;
margin-bottom:8px;
border-right:4px solid #00c3ff;
font-size:12px;
border-radius:10px;
opacity:.9;
}

/* ---------- TIME ---------- */

.time{
font-size:11px;
opacity:.6;
margin-top:8px;
text-align:left;
}

/* ---------- ACTIONS ---------- */

.actions{
margin-top:8px;
display:flex;
gap:8px;
justify-content:flex-end;
opacity:0;
transition:.2s;
}

.message:hover .actions{
opacity:1;
}

.actions button{
background:rgba(255,255,255,.06);
border:none;
color:#fff;
font-size:11px;
padding:5px 10px;
border-radius:8px;
cursor:pointer;
transition:.2s;
}

.actions button:hover{
background:rgba(255,255,255,.18);
}

/* ---------- INPUT ---------- */

.chat-input{
display:flex;
padding:14px;
background:#1f2c3a;
gap:8px;
border-top:1px solid #243447;
box-shadow:0 -4px 15px rgba(0,0,0,.25);
}

.chat-input textarea{
flex:1;
border:none;
border-radius:14px;
padding:12px 14px;
resize:none;
background:#0e1621;
color:#fff;
outline:none;
border:1px solid rgba(255,255,255,.05);
transition:.2s;
}

.chat-input textarea:focus{
border-color:#0088cc;
box-shadow:0 0 0 2px rgba(0,136,204,.2);
}

.chat-input button{
background:#0088cc;
border:none;
color:#fff;
padding:10px 16px;
border-radius:12px;
cursor:pointer;
transition:.2s;
}

.chat-input button:hover{
background:#0099e6;
transform:translateY(-1px);
}

/* ---------- FILE BUTTON ---------- */

.file-btn{
cursor:pointer;
background:#243447;
color:white;
padding:10px;
border-radius:10px;
display:flex;
align-items:center;
transition:.2s;
}

.file-btn:hover{
background:#2c3f52;
}

/* ---------- UPLOAD PROGRESS ---------- */

.upload-progress{
width:100%;
height:6px;
background:#243447;
margin:5px 0;
border-radius:4px;
overflow:hidden;
}

#progressBar{
height:100%;
width:0%;
background:#00c3ff;
transition:width .2s;
}

/* ---------- VIDEO ---------- */

.video-wrapper{
position:relative;
display:inline-block;
border-radius:12px;
overflow:hidden;
box-shadow:0 6px 18px rgba(0,0,0,.3);
}

.video-wrapper video{
display:block;
max-width:100%;
border-radius:12px;
}

.play-icon{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
font-size:36px;
color:white;
background:rgba(0,0,0,.55);
width:60px;
height:60px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
pointer-events:none;
transition:opacity .25s ease;
}

/* ---------- MODAL ---------- */

.media-modal{
position:fixed;
inset:0;
background:rgba(0,0,0,.85);
display:none;
justify-content:center;
align-items:center;
z-index:999;
animation:fadeIn .2s ease;
}

.media-modal img,
.media-modal video{
max-width:90%;
max-height:85%;
border-radius:12px;
box-shadow:0 10px 40px rgba(0,0,0,.5);
}

.close-modal{
position:absolute;
top:20px;
right:30px;
font-size:22px;
color:white;
cursor:pointer;
}

/* ---------- LOCK ---------- */

.chat-locked{
padding:15px;
text-align:center;
background:#1f2c3a;
color:#aaa;
font-size:13px;
border-top:1px solid #243447;
}

/* ---------- ANIMATIONS ---------- */

@keyframes popIn{
from{
opacity:0;
transform:translateY(10px) scale(.98);
}
to{
opacity:1;
transform:translateY(0) scale(1);
}
}

@keyframes fadeIn{
from{opacity:0}
to{opacity:1}
}

/* ---------- LIGHT MODE ---------- */

body.light{
background:#f1f1f1;
}

body.light .chat-container{
background:#ffffff;
}

body.light .message{
background:#0088cc;
color:#fff;
}
.brand-title{
display:flex;
align-items:center;
gap:4px;
letter-spacing:.5px;
}

.brand-main{
color:#ffffff;
opacity:.75;
font-weight:500;
}

.brand-accent{
color:#ffffff;
font-weight:700;
letter-spacing:1px;
}


/* subtle glow */
.brand-accent{
text-shadow:0 0 8px rgba(0,195,255,.4);
}

.brand-title{
margin-right:auto;   /* هلش بده سمت چپ */
margin-left:0;
direction:ltr;       /* چون انگلیسیه */
text-align:left;
}