/* =========================================================
   استایل اصلی اسکریپت پیام‌رسان
   پالت: تیل/سبز تیره برای اکشن‌ها، پس‌زمینه ملایم برای گفتگو
   فونت: وزیرمتن (فارسی)
   ========================================================= */

:root{
  --brand: #1E3A5F;
  --brand-dark: #142944;
  --brand-light: #E8EDF4;
  --bubble-out: #DEE7F1;
  --bubble-in: #FFFFFF;
  --bg-chat: #EEF1F5;
  --sidebar-bg: #FFFFFF;
  --border: #E2E6EC;
  --text-main: #182430;
  --text-mute: #6B7684;
  --danger: #D9534F;
  --brand-accent: #4A6C99;
}

*{ box-sizing: border-box; }

html, body{
  height: 100%;
  font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text-main);
  background: var(--bg-chat);
}

body{ margin:0; overflow: hidden; }

::-webkit-scrollbar{ width:6px; height:6px; }
::-webkit-scrollbar-thumb{ background: #C7D3D0; border-radius:10px; }
::-webkit-scrollbar-track{ background: transparent; }

.btn-brand{
  background: var(--brand);
  color:#fff;
  transition: background .15s ease;
}
.btn-brand:hover{ background: var(--brand-dark); }

.auth-shell{
  min-height:100vh;
  min-height:100dvh;
  min-height: calc(var(--vh, 1vh) * 100);
  display:flex;
  align-items:center;
  justify-content:center;
  background: radial-gradient(circle at 30% 20%, #E8EDF4 0%, #EEF1F5 45%, #DDE4EC 100%);
  padding: 16px;
}

.auth-card{
  width: 100%;
  max-width: 380px;
  background:#fff;
  border-radius: 20px;
  box-shadow: 0 10px 35px rgba(20,104,87,.12);
  padding: 32px 28px;
}

.otp-inputs input{
  width: 46px; height: 54px;
  text-align:center;
  font-size: 22px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
}
.otp-inputs input:focus{ outline:none; border-color: var(--brand); }

/* ---------------- Chat Layout ---------------- */
body{ background: linear-gradient(160deg, #EAF3F0 0%, #F4F8F6 45%, #ECF2EF 100%); }

.app-shell-wrapper{
  height: 100vh; height: 100dvh; height: calc(var(--vh, 1vh) * 100);
  display:flex; align-items:center; justify-content:center;
  padding: 18px; box-sizing:border-box;
}

.app-shell{
  display:flex;
  width: 100%; height: 100%; max-width: 1440px;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(14,50,42,.14), 0 2px 8px rgba(14,50,42,.06);
  border: 1px solid rgba(20,104,87,.06);
}

.sidebar{
  width: 340px;
  min-width: 300px;
  background: var(--sidebar-bg);
  border-left: 1px solid var(--border);
  display:flex;
  flex-direction:column;
}

.sidebar-header{
  padding: 14px 16px;
  padding-top: calc(14px + env(safe-area-inset-top));
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  gap:10px;
}

.conv-list{ flex:1; overflow-y:auto; }

.conv-item{
  display:flex;
  gap:10px;
  padding:10px 14px;
  cursor:pointer;
  border-bottom:1px solid #F2F5F4;
  align-items:center;
}
.conv-item:hover{ background:#F5FAF8; }
.conv-item.active{ background: var(--brand-light); }

.avatar{
  width:46px; height:46px; border-radius:50%;
  background: linear-gradient(135deg,#1E3A5F,#3D5F8C);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:700; flex-shrink:0; overflow:hidden; font-size:16px;
}
.avatar img{ width:100%; height:100%; object-fit:cover; }

.chat-area{
  flex:1;
  display:flex;
  flex-direction:column;
  background:
    linear-gradient(var(--bg-chat), var(--bg-chat));
  position:relative;
}

.chat-header{
  padding: 10px 18px;
  padding-top: calc(10px + env(safe-area-inset-top));
  background:#fff;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  gap:12px;
}

.messages-wrap{
  flex:1;
  overflow-y:auto;
  padding: 18px 6%;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.msg-row{ display:flex; margin-bottom:10px; }
.msg-row.in{ justify-content:flex-start; }
.msg-row.out{ justify-content:flex-end; }

.msg-content{
  display:flex;
  gap:8px;
  max-width:78%;
  align-items:flex-end;
}

.msg-avatar{
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  background: linear-gradient(135deg,#1E3A5F,#3D5F8C); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; overflow:hidden;
}
.msg-avatar img{ width:100%; height:100%; object-fit:cover; }

.bubble{
  max-width: 100%;
  padding: 9px 13px;
  border-radius: 14px;
  position:relative;
  font-size:14.5px;
  line-height:1.9;
  border: 1px solid rgba(0,0,0,.05);
  box-shadow: 0 2px 6px rgba(20,104,87,.06);
}
.bubble.in{ background: var(--bubble-in); border-bottom-right-radius:4px; }
.bubble.out{ background: var(--bubble-out); border-bottom-left-radius:4px; border-color:rgba(30,138,115,.15); }

.bubble .sender-name{
  font-size:12px; font-weight:700; color: var(--brand-dark); margin-bottom:2px; display:block;
}

.bubble .meta{
  font-size:10.5px; color: var(--text-mute); margin-top:3px; display:flex; gap:6px; justify-content:flex-end;
}

.reply-preview{
  background: rgba(30,138,115,.08);
  border-right: 3px solid var(--brand);
  border-radius:6px;
  padding: 4px 8px;
  margin-bottom:5px;
  font-size:12.5px;
  color: var(--text-mute);
  cursor:pointer;
}

.reactions-row{ display:flex; gap:4px; margin-top:4px; flex-wrap:wrap; }
.reaction-chip{
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  font-size:12px;
  padding:1px 6px;
  cursor:pointer;
  display:flex; align-items:center; gap:3px;
}
.reaction-chip.mine{ border-color: var(--brand); background: var(--brand-light); }

.msg-actions{
  position:absolute;
  top:-14px;
  display:none;
  gap:2px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:20px;
  padding:2px 4px;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.bubble.out .msg-actions{ left:6px; }
.bubble.in .msg-actions{ right:6px; }
.bubble:hover .msg-actions{ display:flex; }
.msg-actions button{ display:flex; align-items:center; justify-content:center; width:26px; height:26px; padding:0; border-radius:50%; color:var(--text-mute); }
.msg-actions button:hover{ background:#F0F0F0; color:var(--brand-dark); }

.composer{
  border-top:1px solid var(--border);
  background:#fff;
  padding:10px 16px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}

.composer textarea{
  resize:none;
  border:1px solid var(--border);
  border-radius:20px;
  padding:10px 16px;
  max-height:120px;
  font-size:16px; /* از زوم خودکار سافاری موبایل روی فوکوس جلوگیری می‌کند */
}
.composer textarea:focus{ outline:none; border-color:var(--brand); }

.emoji-panel{
  position:absolute;
  bottom:64px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 6px 24px rgba(0,0,0,.1);
  padding:8px;
  display:grid;
  grid-template-columns:repeat(8, 1fr);
  gap:4px;
  z-index:30;
}
.emoji-panel button{ font-size:19px; padding:4px; border-radius:6px; }
.emoji-panel button:hover{ background:#F0F0F0; }

.file-chip{
  display:flex; align-items:center; gap:8px;
  background:#F5F8F7; border:1px solid var(--border);
  border-radius:10px; padding:8px 10px; font-size:13px;
}

.upload-progress{
  height:4px; background:#E1E8E6; border-radius:4px; overflow:hidden; margin-top:4px;
}
.upload-progress div{ height:100%; background:var(--brand); width:0%; transition: width .15s ease; }

.modal-backdrop{
  position:fixed; inset:0; background:rgba(10,20,18,.45);
  display:flex; align-items:center; justify-content:center; z-index:50;
}
.modal-card{
  background:#fff; border-radius:16px; padding:22px; width:100%; max-width:400px;
  max-height:85vh; overflow-y:auto;
}

.toast{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  background:#17221F; color:#fff; padding:10px 18px; border-radius:10px;
  font-size:13px; z-index:100; opacity:0; transition:opacity .2s ease;
}
.toast.show{ opacity:1; }

.empty-state{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  color: var(--text-mute); gap:10px;
}

@media (max-width: 860px){
  .app-shell-wrapper{ padding:0; }
  .app-shell{ border-radius:0; box-shadow:none; border:none; max-width:none; }
  .sidebar{ position:absolute; inset:0; z-index:20; width:100%; }
  .sidebar.hide-mobile{ display:none; }
  .chat-area.hide-mobile{ display:none; }
  .msg-content{ max-width: 86%; }

  .sidebar{ bottom: 62px; height: auto; }
  .bottom-nav{ display:flex; }
}

/* ---------------- نوار استوری‌ها ---------------- */
.stories-bar{
  display:flex;
  gap:12px;
  padding:12px 14px;
  overflow-x:auto;
  border-bottom:1px solid var(--border);
}
.story-circle-wrap{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  flex-shrink:0; cursor:pointer; width:60px;
}
.story-ring{
  width:56px; height:56px; border-radius:50%;
  padding:2.5px;
  background: linear-gradient(135deg,#E1E8E6,#E1E8E6); /* دیده‌شده: خاکستری */
  display:flex; align-items:center; justify-content:center;
}
.story-ring.unviewed{
  background: linear-gradient(135deg,#1E3A5F,#3D5F8C,#8FA8C9);
}
.story-ring .avatar{ width:100%; height:100%; border:2px solid #fff; font-size:18px; }
.story-circle-wrap .label{ font-size:11px; color:var(--text-mute); max-width:60px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.story-add-badge{
  position:relative;
}
.story-add-badge::after{
  content:'+';
  position:absolute; bottom:-2px; left:-2px;
  background:var(--brand); color:#fff;
  width:18px; height:18px; border-radius:50%;
  font-size:13px; display:flex; align-items:center; justify-content:center;
  border:2px solid #fff;
}

/* ---------------- نوار پایین موبایل ---------------- */
.bottom-nav{
  display:none;
  position:fixed; bottom:0; left:0; right:0;
  background:#fff;
  border-top:1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
  z-index:25;
}
.bottom-nav-item{
  flex:1;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:8px 4px 6px;
  color:var(--text-mute);
  font-size:11px;
}
.bottom-nav-item .bn-icon{ font-size:20px; line-height:1; }
.bottom-nav-item.active{ color:var(--brand-dark); font-weight:700; }

/* ---------------- نمایش‌گر تمام‌صفحه استوری ---------------- */
.story-viewer{
  position:fixed; inset:0; background:#000;
  z-index:80; display:flex; flex-direction:column;
}
.story-progress-row{
  display:flex; gap:4px; padding:8px 10px 0;
  padding-top: calc(8px + env(safe-area-inset-top));
}
.story-progress-row .seg{
  flex:1; height:3px; background:rgba(255,255,255,.3); border-radius:3px; overflow:hidden;
}
.story-progress-row .seg .fill{ height:100%; width:0%; background:#fff; }
.story-header{
  display:flex; align-items:center; gap:10px; padding:10px 14px;
}
.story-content{
  flex:1; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
}
.story-content img, .story-content video{ max-width:100%; max-height:100%; object-fit:contain; }
.story-content .text-story{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:26px; font-weight:700; text-align:center; padding:30px; line-height:1.7;
}
.story-nav-zone{ position:absolute; top:0; bottom:0; width:35%; }
.story-nav-prev{ left:0; }
.story-nav-next{ right:0; }
.story-footer{ padding:12px 14px; color:#fff; font-size:13px; text-align:center; }
.story-footer button{ color:#fff; text-decoration:underline; }

/* ---------------- پروفایل و تب‌های موبایل داخل سایدبار ---------------- */
.profile-view-avatar{
  width:96px; height:96px; border-radius:50%; margin:0 auto;
  display:flex; align-items:center; justify-content:center;
  font-size:36px; overflow:hidden;
  background: linear-gradient(135deg,#1E3A5F,#3D5F8C); color:#fff;
}
.profile-view-avatar img{ width:100%; height:100%; object-fit:cover; }

/* ---------------- آیکون‌های کلاسیک و دکمه‌های دایره‌ای ---------------- */
.icon-btn{
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color: var(--text-mute);
  flex-shrink:0;
}
.icon-btn:hover{ background:#F0F5F3; color: var(--brand-dark); }
.icon-btn.solid{ background: var(--brand-light); color: var(--brand-dark); }
.icon-btn.danger:hover{ background:#FBEAE9; color:var(--danger); }

.dropdown-menu{
  position:absolute; top:46px; left:0;
  background:#fff; border:1px solid var(--border); border-radius:14px;
  box-shadow: 0 12px 30px rgba(14,50,42,.14);
  padding:8px; min-width:210px; z-index:40;
}
.dropdown-menu a, .dropdown-menu button{
  display:flex; align-items:center; gap:10px;
  width:100%; text-align:right; padding:9px 10px; border-radius:9px;
  font-size:13.5px; color:#374151;
}
.dropdown-menu a:hover, .dropdown-menu button:hover{ background:#F5FAF8; color:var(--brand-dark); }
.dropdown-menu a.danger, .dropdown-menu button.danger{ color:var(--danger); }
.dropdown-menu a.danger:hover, .dropdown-menu button.danger:hover{ background:#FBEAE9; }
.dropdown-menu svg{ flex-shrink:0; color: var(--brand); }
.dropdown-menu a.danger svg, .dropdown-menu button.danger svg{ color:var(--danger); }
.dropdown-divider{ height:1px; background:var(--border); margin:6px 2px; }

/* ---------------- بنر راهنمای نصب iOS ---------------- */
.ios-install-banner{
  position:fixed; bottom:14px; left:14px; right:14px; max-width:420px; margin:0 auto;
  background:#17221F; color:#fff; border-radius:14px;
  padding:12px 14px; display:flex; align-items:center; gap:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.25); z-index:60;
  animation: scaleIn .25s ease-out;
}
.ios-install-icon{
  width:36px; height:36px; border-radius:10px; flex-shrink:0;
  background: linear-gradient(135deg,var(--brand),#3D5F8C); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.ios-install-banner .icon-btn{ color:#fff; }
.ios-install-banner .icon-btn:hover{ background:rgba(255,255,255,.15); color:#fff; }
@media (max-width: 860px){
  .ios-install-banner{ bottom: calc(70px + env(safe-area-inset-bottom)); }
}

/* ---------------- تماس صوتی/تصویری ---------------- */
.call-overlay{
  position:fixed; inset:0; background:#111716; z-index:95;
  display:flex; flex-direction:column;
}
.call-header{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 18px;
  padding-top: calc(14px + env(safe-area-inset-top));
}
.call-tiles{
  flex:1; display:grid; gap:8px; padding:10px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  align-content:center;
}
.call-tile{
  position:relative; background:#1D2624; border-radius:14px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; min-height:160px;
}
.call-tile video{ width:100%; height:100%; object-fit:cover; }
.call-tile .tile-avatar{
  width:72px; height:72px; border-radius:50%;
  background: linear-gradient(135deg,#1E3A5F,#3D5F8C); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:700;
}
.call-tile .tile-name{
  position:absolute; bottom:6px; right:8px; left:8px;
  color:#fff; font-size:12px; background:rgba(0,0,0,.35); border-radius:6px; padding:2px 8px;
  display:flex; justify-content:space-between;
}
.call-controls{
  display:flex; justify-content:center; gap:16px; padding:20px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
}
.call-ctrl-btn{
  width:56px; height:56px; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff; font-size:22px;
  display:flex; align-items:center; justify-content:center;
}
.call-ctrl-btn.muted{ background:#fff; color:#111; }
.call-ctrl-btn.call-hangup{ background:var(--danger); }

/* ======================================================================
   انیمیشن‌ها و ترنزیشن‌های نرم برای بهبود تجربه کاربری
   ====================================================================== */

@keyframes msgEnter {
  from { opacity:0; transform: translateY(8px) scale(.98); }
  to   { opacity:1; transform: translateY(0) scale(1); }
}
.msg-enter{ animation: msgEnter .28s ease-out; }

@keyframes fadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes scaleIn {
  from { opacity:0; transform: scale(.94) translateY(6px); }
  to   { opacity:1; transform: scale(1) translateY(0); }
}
.modal-backdrop{ animation: fadeIn .18s ease-out; }
.modal-card{ animation: scaleIn .22s cubic-bezier(.2,.8,.3,1); }

.conv-item{ transition: background-color .15s ease; }
.bubble{ transition: box-shadow .15s ease, transform .15s ease; }
.bubble:hover{ box-shadow: 0 3px 10px rgba(20,104,87,.1); }

.btn-brand, .call-ctrl-btn, .bottom-nav-item, .reaction-chip, .msg-actions button,
.conv-item .avatar, .story-ring, a.p-2, button.p-2 {
  transition: background-color .15s ease, transform .12s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
}
.btn-brand:active, .call-ctrl-btn:active, .reaction-chip:active { transform: scale(.94); }

.story-ring{ transition: background .25s ease, transform .15s ease; }
.story-circle-wrap:active .story-ring{ transform: scale(.93); }

.emoji-panel button, .story-tile, .conv-item{ transition: background-color .12s ease, transform .1s ease; }

.sidebar{ transition: transform .22s ease; }
.chat-area{ transition: opacity .18s ease; }

#conversationView{ animation: fadeIn .18s ease-out; }

.reaction-chip{ animation: scaleIn .15s ease-out; }

.toast{ transition: opacity .25s ease, transform .25s ease; transform: translate(-50%, 4px); }
.toast.show{ transform: translate(-50%, 0); }

@keyframes pulseRing {
  0%   { box-shadow: 0 0 0 0 rgba(30,138,115,.35); }
  70%  { box-shadow: 0 0 0 10px rgba(30,138,115,0); }
  100% { box-shadow: 0 0 0 0 rgba(30,138,115,0); }
}
#incomingCallAvatar{ animation: pulseRing 1.6s infinite; }

.call-tile{ transition: all .2s ease; animation: fadeIn .25s ease-out; }

* { scroll-behavior: smooth; }