/* ==========================================================================
   دانشجو یار — استایل مشترک (لندینگ + داشبورد)
   پالت بنفش — Flat / hairline / بدون سایه‌های سنگین
   ========================================================================== */

/* فونت وزیرمتن — لوکال (فایل‌های variable-font؛ هر فایل هر ۶ وزن رو داره) */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Vazirmatn-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Vazirmatn-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Vazirmatn-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  /* Light */
  --bg: #F7F7F8;
  --surface: #FFFFFF;
  --surface-2: #F1F1F3;
  --border: #E4E4E7;
  --border-strong: #D9D9DE;
  --primary: #6D28D9;
  --primary-hover: #7C3AED;
  --on-primary: #FFFFFF;
  --primary-soft: #F1EBFD;
  --primary-softer: #F7F4FE;
  --text: #18181B;
  --text-secondary: #52525B;
  --text-faint: #7C7C85;
  --success: #16A34A;
  --success-soft: #E8F6EE;
  --error: #DC2626;
  --error-soft: #FDECEC;

  --bg-translucent: rgba(247,247,248,0.85);
  --dot-color: 24,24,27;
  --dot-glow: 124,58,237;

  --shadow-sm: 0 1px 2px rgba(24,24,27,.05);
  --shadow-md: 0 6px 24px -6px rgba(24,24,27,.08);
  --shadow-pop: 0 12px 40px -8px rgba(24,24,27,.14);

  --hero-glow: rgba(124,58,237,.07);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 999px;
  --container: 1160px;
}

[data-theme="dark"]{
  /* Dark */
  --bg: #0A0A0C;
  --surface: #111114;
  --surface-2: #18181C;
  --border: #26262C;
  --border-strong: #33333B;
  --primary: #7C3AED;
  --primary-hover: #8B5CF6;
  --on-primary: #FFFFFF;
  --primary-soft: rgba(124,58,237,.16);
  --primary-softer: rgba(124,58,237,.08);
  --text: #F5F5F5;
  --text-secondary: #A1A1AA;
  --text-faint: #8B8B96;
  --success: #22C55E;
  --success-soft: rgba(34,197,94,.14);
  --error: #EF4444;
  --error-soft: rgba(239,68,68,.14);

  --bg-translucent: rgba(10,10,12,0.82);
  --dot-color: 235,235,237;
  --dot-glow: 139,92,246;

  --shadow-sm: none;
  --shadow-md: none;
  --shadow-pop: 0 16px 48px -12px rgba(0,0,0,.6);

  --hero-glow: rgba(124,58,237,.12);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ font-size:16px; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:'Vazirmatn', Tahoma, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.75;
  transition:background .25s ease, color .25s ease;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button,input,select,textarea{ font-family:inherit; font-size:inherit; color:inherit; }
h1,h2,h3,h4,p{ margin:0; }
:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; border-radius:4px; }

::selection{ background:var(--primary); color:var(--on-primary); }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

.container{ max-width:var(--container); margin-inline:auto; padding-inline:24px; }

/* ==========================================================================
   Icons (inline sprite)
   ========================================================================== */
.icon{
  width:20px; height:20px; fill:none; stroke:currentColor;
  stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round;
  flex-shrink:0;
}
.icon-sm{ width:16px; height:16px; }
.icon-lg{ width:24px; height:24px; }
.icon-flip{ transform:scaleX(-1); }

/* ==========================================================================
   Preloader
   ========================================================================== */
.preloader{
  position:fixed; inset:0; z-index:200;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .45s ease, visibility .45s ease;
}
.preloader.done{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader-inner{ display:flex; flex-direction:column; align-items:center; gap:18px; }
.preloader-mark{
  width:88px; height:88px;
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.preloader-mark img{
  display:block; width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 4px 14px rgba(124,58,237,.35));
}
[data-theme="dark"] .preloader-mark img{
  filter:drop-shadow(0 0 12px rgba(255,255,255,.25));
}
.preloader-mark::after{
  content:""; position:absolute; inset:-9px;
  border-radius:28px; border:2px solid var(--primary);
  opacity:.35; animation:pre-pulse 1.6s ease-out infinite;
}
@keyframes pre-pulse{
  0%{ transform:scale(.82); opacity:.5; }
  70%{ transform:scale(1.08); opacity:0; }
  100%{ transform:scale(1.08); opacity:0; }
}
.preloader-name{ font-weight:800; font-size:1.05rem; letter-spacing:-.01em; }
.preloader-bar{
  width:150px; height:3px; border-radius:99px;
  background:var(--surface-2); overflow:hidden; position:relative;
}
.preloader-bar::after{
  content:""; position:absolute; inset-block:0; width:40%;
  border-radius:99px;
  background:linear-gradient(90deg, transparent, var(--primary), transparent);
  animation:pre-slide 1.1s ease-in-out infinite;
}
@keyframes pre-slide{
  0%{ inset-inline-start:-40%; }
  100%{ inset-inline-start:100%; }
}
body.is-loading{ overflow:hidden; }

/* ==========================================================================
   Reveal-on-view animations
   ========================================================================== */
.reveal{
  opacity:1; transform:none;
  transition:opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--rd, 0ms);
}
/* فقط وقتی JS فعاله پنهان می‌شه (کلاس dy-anim از <head> اضافه می‌شه)
   — این‌طوری اگر JS اجرا نشه یا IntersectionObserver کار نکنه، محتوا همیشه دیده می‌شه */
html.dy-anim .reveal{ opacity:0; transform:translateY(5px); }
html.dy-anim .reveal.in-view{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* View swap entrance + column rhythm between sections */
.view{ display:flex; flex-direction:column; gap:24px; min-width:0; animation:view-in .35s cubic-bezier(.22,.61,.36,1) both; }
.view .view-head{ margin-bottom:0; }
@keyframes view-in{
  from{ opacity:0; transform:translateY(5px); }
  to{ opacity:1; transform:none; }
}

/* ==========================================================================
   Buttons / chips / badges
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 20px; border-radius:var(--radius-md); border:1px solid transparent;
  font-size:.92rem; font-weight:600; cursor:pointer; line-height:1.6;
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.btn:active{ transform:scale(.98); }
.btn .icon{ width:17px; height:17px; }
.btn-primary{ background:var(--primary); color:var(--on-primary); }
.btn-primary:hover{ background:var(--primary-hover); }
.btn-secondary{ background:var(--surface); color:var(--text); border-color:var(--border-strong); }
.btn-secondary:hover{ border-color:var(--primary); color:var(--primary); }
.btn-soft{ background:var(--primary-soft); color:var(--primary); }
.btn-soft:hover{ background:var(--primary); color:var(--on-primary); }
.btn-ghost{ background:transparent; color:var(--text-secondary); }
.btn-ghost:hover{ background:var(--surface-2); color:var(--text); }
.btn-sm{ padding:7px 14px; font-size:.82rem; border-radius:var(--radius-sm); }
.btn-block{ width:100%; }

.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px; border-radius:var(--radius-full);
  border:1px solid var(--border); background:var(--surface);
  font-size:.8rem; font-weight:500; color:var(--text-secondary);
  cursor:pointer; transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.chip:hover{ border-color:var(--primary); color:var(--primary); }
.chip.active{ background:var(--primary); border-color:var(--primary); color:var(--on-primary); }
.chip .icon{ width:14px; height:14px; }

.badge{
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 9px; border-radius:var(--radius-full);
  font-size:.72rem; font-weight:600; line-height:1.7;
}
.badge-primary{ background:var(--primary-soft); color:var(--primary); }
.badge-success{ background:var(--success-soft); color:var(--success); }
.badge-error{ background:var(--error-soft); color:var(--error); }
.badge-warn{ background:rgba(234,179,8,.14); color:#CA9C06; }
[data-theme="dark"] .badge-warn{ background:rgba(234,179,8,.16); color:#EAB308; }
.badge-neutral{ background:var(--surface-2); color:var(--text-secondary); }

.dot-unread{
  width:8px; height:8px; border-radius:50%; background:var(--primary);
  flex-shrink:0;
}

/* Segmented control */
.segmented{
  display:inline-flex; gap:2px; padding:3px;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-md);
}
.segmented button{
  border:0; background:transparent; color:var(--text-secondary);
  font-size:.8rem; font-weight:600; padding:6px 14px;
  border-radius:var(--radius-sm); cursor:pointer; transition:background .15s ease, color .15s ease, box-shadow .15s ease;
  display:inline-flex; align-items:center; gap:6px;
}
.segmented button .icon{ width:14px; height:14px; }
.segmented button.active{ background:var(--surface); color:var(--primary); box-shadow:var(--shadow-sm); }

/* ==========================================================================
   Panels & shared bits
   ========================================================================== */
.panel{
  border:1px solid var(--border); border-radius:var(--radius-lg);
  background:var(--surface); padding:22px;
}
.panel-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:16px;
}
.panel-head h2{ font-size:.98rem; font-weight:700; display:flex; align-items:center; gap:8px; }
.panel-head h2 .icon{ width:17px; height:17px; color:var(--primary); }
.panel-head a, .panel-head .link{
  font-size:.8rem; color:var(--primary); font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; gap:4px;
}
.panel-head a:hover, .panel-head .link:hover{ color:var(--primary-hover); }
.panel-sub{ font-size:.8rem; color:var(--text-faint); margin-top:-12px; margin-bottom:16px; }

.progress{
  height:6px; border-radius:99px; background:var(--surface-2); overflow:hidden;
}
.progress i{
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg, var(--primary), var(--primary-hover));
}
.progress-label{
  display:flex; justify-content:space-between; align-items:center;
  font-size:.75rem; color:var(--text-faint); margin-top:6px;
}

.avatar{
  width:38px; height:38px; border-radius:50%;
  background:var(--primary-soft); color:var(--primary);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.85rem; flex-shrink:0;
}
.avatar-lg{ width:56px; height:56px; }
.avatar .icon{ width:24px; height:24px; }

.empty-state{
  text-align:center; padding:44px 20px; color:var(--text-faint);
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.empty-state .icon{ width:34px; height:34px; opacity:.5; }
.empty-state p{ font-size:.88rem; max-width:32ch; }

/* Toast */
.toast{
  position:fixed; bottom:24px; inset-inline-start:50%; transform:translate(50%, 16px);
  background:var(--surface); color:var(--text);
  border:1px solid var(--border); border-radius:var(--radius-md);
  box-shadow:var(--shadow-pop);
  padding:11px 18px; font-size:.86rem; font-weight:500;
  display:flex; align-items:center; gap:10px;
  opacity:0; visibility:hidden; z-index:150;
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
}
.toast.show{ opacity:1; visibility:visible; transform:translate(50%, 0); }
.toast .icon{ width:17px; height:17px; color:var(--primary); }

/* Dropzone */
.dropzone{
  border:1.5px dashed var(--border-strong); border-radius:var(--radius-lg);
  background:var(--surface); padding:38px 24px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  text-align:center; cursor:pointer; transition:border-color .2s ease, background .2s ease;
}
.dropzone:hover, .dropzone.drag{
  border-color:var(--primary); background:var(--primary-softer);
}
.dropzone .dz-icon{
  width:52px; height:52px; border-radius:var(--radius-md);
  background:var(--primary-soft); color:var(--primary);
  display:flex; align-items:center; justify-content:center; margin-bottom:4px;
}
.dropzone .dz-icon .icon{ width:24px; height:24px; }
.dropzone h4{ font-size:.95rem; font-weight:700; }
.dropzone p{ font-size:.8rem; color:var(--text-faint); }
.dropzone .dz-hint{
  font-size:.74rem; color:var(--text-faint);
  border:1px solid var(--border); border-radius:var(--radius-full);
  padding:3px 12px; margin-top:4px;
}

/* Fields — امضای فیلدها: خط بنفش متحرک زیر فیلد هنگام فوکوس */
.field{ display:flex; flex-direction:column; gap:7px; }
.field > label{
  font-size:.82rem; font-weight:600; color:var(--text-secondary);
  display:flex; align-items:center; gap:7px;
  transition:color .2s ease;
}
.field > label::before{
  content:""; width:0; height:3px; border-radius:99px; flex-shrink:0;
  background:linear-gradient(90deg, var(--primary-hover), var(--primary));
  transition:width .28s cubic-bezier(.22,.61,.36,1);
}
.field:focus-within > label{ color:var(--primary); }
.field:focus-within > label::before{ width:14px; }
.input, .select{
  background-color:var(--surface); border:1px solid var(--border-strong);
  border-radius:var(--radius-md); color:var(--text);
  padding:11px 14px; font-size:.88rem; outline:none;
  font-family:inherit;
  background-image:linear-gradient(90deg, var(--primary-hover), var(--primary));
  background-repeat:no-repeat;
  background-position:bottom;
  background-size:0% 2px;
  transition:border-color .2s ease, box-shadow .25s ease,
             background-size .35s cubic-bezier(.22,.61,.36,1), transform .2s ease;
  width:100%;
}
.input:hover, .select:hover{ border-color:var(--primary); }
.input:focus, .select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 4px var(--primary-soft), 0 2px 10px -4px rgba(124,58,237,.35);
  background-size:100% 2px;
  transform:translateY(-1px);
}
.input::placeholder{ color:var(--text-faint); transition:color .2s ease; }
.input:focus::placeholder{ color:var(--text-secondary); }
.input[readonly]{
  background:var(--surface-2); border-style:dashed;
  color:var(--text-secondary); cursor:not-allowed;
  transform:none !important;
}
.input[readonly]:hover, .input[readonly]:focus{ border-color:var(--border); box-shadow:none; background-size:0% 2px; }
.select{ appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, var(--text-faint) 50%), linear-gradient(135deg, var(--text-faint) 50%, transparent 50%);
  background-position:calc(0% + 16px) calc(50% + 1px), calc(0% + 21px) calc(50% + 1px);
  background-size:5px 5px;
  background-repeat:no-repeat;
  padding-inline-start:38px;
}
/* فیکس خطِ روی سلکت: انیمیشن underline مربوط به .input نباید روی لایه‌ی فلش سلکت اعمال بشه */
.select:focus, .select:hover{ background-size:5px 5px; }

/* Switch */
.switch{ position:relative; display:inline-block; width:40px; height:22px; flex-shrink:0; }
.switch input{ opacity:0; width:0; height:0; }
.switch i{
  position:absolute; inset:0; border-radius:99px;
  background:var(--border-strong); cursor:pointer; transition:background .2s ease;
}
.switch i::before{
  content:""; position:absolute; width:16px; height:16px; border-radius:50%;
  background:#fff; top:3px; inset-inline-start:3px;
  transition:transform .2s ease; box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.switch input:checked + i{ background:var(--primary); }
.switch input:checked + i::before{ transform:translateX(-18px); }
.switch input:focus-visible + i{ outline:2px solid var(--primary); outline-offset:2px; }

/* Range slider */
input[type="range"]{
  appearance:none; width:100%; height:4px; border-radius:99px;
  background:var(--surface-2); outline:none; cursor:pointer;
}
input[type="range"]::-webkit-slider-thumb{
  appearance:none; width:14px; height:14px; border-radius:50%;
  background:var(--primary); border:2px solid var(--surface);
  box-shadow:0 0 0 1px var(--border-strong);
}
input[type="range"]::-moz-range-thumb{
  width:12px; height:12px; border-radius:50%;
  background:var(--primary); border:2px solid var(--surface);
}

/* Spinner */
.spinner{
  width:16px; height:16px; border-radius:50%;
  border:2px solid var(--primary-soft); border-top-color:var(--primary);
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ==========================================================================
   Landing — Navbar
   ========================================================================== */
.navbar{
  position:sticky; top:0; z-index:40;
  background:var(--bg-translucent); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.navbar-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:14px; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.05rem; }
@media (max-width:1365px){
  .brand-mark{ width:38px; height:38px; }
  .brand-name{ font-size:.95rem; }
}
.brand-mark{
  width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.sidebar-brand .brand-mark{
  width:56px; height:56px;
}
.brand-mark img{
  display:block; width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.18));
}
[data-theme="dark"] .brand-mark img{
  filter:drop-shadow(0 0 8px rgba(255,255,255,.22));
}
.nav-links{ display:flex; align-items:center; gap:28px; font-size:.92rem; color:var(--text-secondary); }
.nav-links a{ transition:color .15s ease; }
.nav-links a:hover{ color:var(--text); }
.nav-actions{ display:flex; align-items:center; gap:12px; }

.theme-toggle{
  width:38px; height:38px; border-radius:var(--radius-full);
  border:1px solid var(--border-strong); background:var(--surface);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-secondary); cursor:pointer;
  transition:color .15s ease, border-color .15s ease;
}
.theme-toggle:hover{ color:var(--primary); border-color:var(--primary); }
.theme-toggle.topbar-theme{ display:none; } /* دسکتاپ: سوییچ تم توی سایدباره */
.theme-toggle .icon{ width:17px; height:17px; }
.theme-toggle .icon-moon{ display:none; }
[data-theme="dark"] .theme-toggle .icon-sun{ display:none; }
[data-theme="dark"] .theme-toggle .icon-moon{ display:block; }

/* ---------- سوییچ تم به سبک تلگرام ----------
   اسنپ‌شات قدیم زیر، اسنپ‌شات جدید روشن — با clip-path دایره از دکمه پخش می‌شه.
   متغیرهای --tvx/--tvy موقع کلیک از JS ست می‌شن (مرکز دکمه).
   مهم: مرورگرها به‌صورت پیش‌فرض روی اسنپ‌شات‌ها mix-blend-mode:plus-lighter می‌ذارن
   (برای کراس‌فید) — دو لایه‌ی مات روش هم = واش سفید روشن! مخصوصاً روی موبایل.
   blend عادی اجباری می‌شه تا فقط clip-path دایره دیده بشه. */
::view-transition-old(root),
::view-transition-new(root){ mix-blend-mode:normal; }
::view-transition-old(root){ animation:none; }
::view-transition-new(root){
  animation:tv-circle .85s cubic-bezier(.45,.05,.3,1) both;
  animation-delay:.05s; /* قدیم یک لحظه دیده بشه — حس رشد دایره */
}
@keyframes tv-circle{
  from{ clip-path:circle(0px at var(--tvx,50%) var(--tvy,50%)); }
  to{ clip-path:circle(150vmax at var(--tvx,50%) var(--tvy,50%)); }
}
/* سوییچ فوری برای کسانی که کاهش حرکت رو ترجیح می‌دن */
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root), ::view-transition-new(root){ animation:none !important; }
}

/* ==========================================================================
   Landing — Hero / sections
   ========================================================================== */
.hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--border); }
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(640px 340px at 78% 18%, var(--hero-glow), transparent 70%);
}
.hero-canvas{ position:absolute; inset:0; width:100%; height:100%; }
.hero-inner{ position:relative; z-index:2; padding-block:96px 88px; max-width:660px; }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.78rem; font-weight:600; color:var(--primary);
  background:var(--primary-soft); border:1px solid var(--primary-soft);
  border-radius:var(--radius-full); padding:5px 14px; margin-bottom:22px;
}
.hero-eyebrow .icon{ width:14px; height:14px; }
.hero-inner h1{ font-size:clamp(2rem,4.2vw,3.1rem); line-height:1.32; font-weight:900; margin-bottom:20px; letter-spacing:-.01em; }
.hero-inner h1 em{
  font-style:normal; color:var(--primary);
}
.hero-inner p{ font-size:1.08rem; color:var(--text-secondary); margin-bottom:32px; max-width:46ch; }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:36px; margin-top:52px; flex-wrap:wrap; }
.hero-stat b{ display:block; font-size:1.25rem; font-weight:800; }
.hero-stat span{ font-size:.78rem; color:var(--text-faint); }

.section{ padding-block:80px; }
.section-head{ max-width:560px; margin-bottom:40px; }
.section-head h2{ font-size:clamp(1.5rem,2.6vw,2rem); font-weight:800; margin-bottom:12px; }
.section-head p{ color:var(--text-secondary); font-size:1rem; }

.feature-highlights{
  display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border);
  border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden;
}
.feature-highlight{ background:var(--surface); padding:32px; transition:background .2s ease; }
.feature-highlight:hover{ background:var(--primary-softer); }
.feature-highlight .f-icon{
  width:44px; height:44px; border-radius:var(--radius-md); background:var(--primary-soft); color:var(--primary);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.feature-highlight .f-icon .icon{ width:22px; height:22px; }
.feature-highlight h3{ font-size:1.15rem; margin-bottom:8px; font-weight:700; }
.feature-highlight p{ color:var(--text-secondary); font-size:.95rem; }

.feature-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border);
  border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; margin-top:24px;
}
.feature-tile{ background:var(--surface); padding:24px; transition:background .2s ease; }
.feature-tile:hover{ background:var(--primary-softer); }
.feature-tile .f-icon{
  width:36px; height:36px; border-radius:var(--radius-sm); background:var(--primary-soft); color:var(--primary);
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;
}
.feature-tile .f-icon .icon{ width:18px; height:18px; }
.feature-tile h4{ font-size:.98rem; margin-bottom:6px; font-weight:700; }
.feature-tile p{ color:var(--text-secondary); font-size:.85rem; line-height:1.6; }

.value-props{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.value-prop h3{ font-size:1.05rem; margin-bottom:8px; font-weight:700; display:flex; align-items:center; gap:8px; }
.value-prop h3 .icon{ width:17px; height:17px; color:var(--primary); }
.value-prop p{ color:var(--text-secondary); font-size:.92rem; }

.cta-banner{
  border-block:1px solid var(--border); text-align:center; padding-block:64px;
  position:relative; overflow:hidden;
}
.cta-banner::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(480px 220px at 50% 100%, var(--hero-glow), transparent 70%);
}
.cta-banner h2{ font-size:clamp(1.4rem,2.4vw,1.9rem); margin-bottom:24px; font-weight:800; position:relative; }
.cta-banner .btn{ position:relative; }
.site-footer{ padding-block:40px; }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.footer-inner .brand{ font-size:.95rem; }
.footer-links{ display:flex; gap:20px; color:var(--text-secondary); font-size:.88rem; }
.footer-note{ color:var(--text-faint); font-size:.82rem; }

/* ==========================================================================
   App shell — Sidebar
   ========================================================================== */
.app-shell{ display:flex; min-height:100vh; }

.sidebar{
  width:246px; flex-shrink:0; border-inline-start:1px solid var(--border);
  background:var(--surface); display:flex; flex-direction:column;
  padding:20px 14px; position:sticky; top:0; height:100vh;
}
.sidebar-brand{
  display:inline-grid; grid-template-columns:1fr; align-items:center;
  padding:4px 8px 20px; font-weight:800; max-width:150px;
}
.sidebar-brand .sidebar-logo{
  grid-area:1 / 1; display:block; width:100%; max-width:150px; height:auto; object-fit:contain;
  transition:opacity .35s cubic-bezier(.4, 0, .2, 1), filter .35s ease;
}
.sidebar-brand .sidebar-logo.logo-light{
  opacity:1; visibility:visible;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.15));
}
.sidebar-brand .sidebar-logo.logo-dark{
  opacity:0; visibility:hidden;
  filter:drop-shadow(0 0 10px rgba(255,255,255,.15));
}
[data-theme="dark"] .sidebar-brand .sidebar-logo.logo-light{
  opacity:0; visibility:hidden;
}
[data-theme="dark"] .sidebar-brand .sidebar-logo.logo-dark{
  opacity:1; visibility:visible;
}
@media (prefers-reduced-motion: reduce){
  .sidebar-brand .sidebar-logo{ transition:none !important; }
}
.sidebar-brand .brand-mark{ width:56px; height:56px; }
.sidebar-nav{ display:flex; flex-direction:column; gap:2px; flex:1; overflow-y:auto; scrollbar-width:thin; }
.sidebar-link{
  display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:var(--radius-sm);
  color:var(--text-secondary); font-size:.9rem; font-weight:500;
  position:relative; transition:background .15s ease, color .15s ease;
  cursor:pointer; border:0; background:transparent; width:100%; text-align:start;
}
.sidebar-link .icon{ width:18px; height:18px; }
.sidebar-link:hover{ background:var(--surface-2); color:var(--text); }
.sidebar-link.active{ background:var(--primary-soft); color:var(--primary); font-weight:700; }
.sidebar-link.active::before{
  content:""; position:absolute; inset-inline-start:-14px; top:20%; bottom:20%;
  width:3px; border-radius:99px; background:var(--primary);
}
.sidebar-link .badge{ margin-inline-start:auto; font-size:.66rem; }
.sidebar-section{
  font-size:.68rem; font-weight:700; color:var(--text-faint);
  letter-spacing:.06em; padding:16px 12px 6px;
}
.sidebar-foot{ border-top:1px solid var(--border); padding-top:12px; margin-top:10px; display:flex; align-items:center; justify-content:space-between; }
.sidebar-foot .sidebar-link{ width:auto; flex:0 1 auto; }
.sidebar-version{ font-size:.68rem; color:var(--text-faint); padding:0 12px; }

.main{ flex:1; min-width:0; height:100vh; display:flex; flex-direction:column; }

/* Topbar */
.topbar{
  /* relative + z-index: بالاتر از محتوا باشه تا پاپ‌آپ رادیو زیر پنل‌ها نره (backdrop-filter بدون این، ترتیب رو خراب می‌کنه) */
  position:relative; z-index:40; flex-shrink:0; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:12px 28px; border-bottom:1px solid var(--border);
  background:var(--bg-translucent); backdrop-filter:blur(10px);
}
.hamburger{
  display:none; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:var(--radius-sm);
  border:1px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer;
}
.search-field{
  display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:9px 14px; width:100%; max-width:360px; color:var(--text-faint);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.search-field:focus-within{ border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); }
.search-field input{ border:0; background:transparent; outline:0; color:var(--text); width:100%; font-size:.88rem; }
.search-field input::placeholder{ color:var(--text-faint); }
.search-field .icon{ width:16px; height:16px; }
.topbar-actions{ display:flex; align-items:center; gap:10px; }

/* منوی کاربر — پاپ‌آپ آواتار تاپ‌بار (موبایل: کلیک | دسکتاپ: هاور) */
.avatar-wrap{ position:relative; }
.avatar-wrap .avatar{ cursor:pointer; }
.user-pop{
  /* آواتار سمت چپ تاپ‌بار (RTL) — مثل زنگ به سمت راست باز می‌شه */
  position:absolute; top:calc(100% + 10px); inset-inline-end:0;
  width:220px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-pop); padding:6px;
  opacity:0; visibility:hidden; transform:translateY(6px) scale(.98);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
  z-index:80; transform-origin:top;
}
.avatar-wrap.open .user-pop{ opacity:1; visibility:visible; transform:none; }
.user-pop-item{
  width:100%; display:flex; align-items:center; gap:10px;
  padding:10px 12px; border:0; background:transparent; cursor:pointer;
  border-radius:var(--radius-sm); font-family:inherit;
  font-size:.84rem; font-weight:600; color:var(--text-secondary);
  transition:background .15s ease, color .15s ease;
}
.user-pop-item:hover{ background:var(--surface-2); color:var(--primary); }
.user-pop-item .icon{ width:16px; height:16px; flex-shrink:0; }

/* Notifications dropdown (همان الگوی پاپ‌آپ رادیو) */
.notif-wrap{ position:relative; }
.notif-pop{
  /* زنگ سمت چپ صفحه‌ست — پاپ‌آپ به سمت راست باز می‌شه (برعکس رادیو) */
  position:absolute; top:calc(100% + 10px); inset-inline-end:0;
  width:330px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-pop); padding:14px;
  opacity:0; visibility:hidden; transform:translateY(6px) scale(.98);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
  z-index:80; transform-origin:top;
}
.notif-wrap.open .notif-pop{ opacity:1; visibility:visible; transform:none; }
.notif-head{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:10px; margin-bottom:8px; border-bottom:1px solid var(--border);
}
.notif-head .nh-title{
  display:flex; align-items:center; gap:8px; font-size:.85rem; font-weight:700;
}
.notif-head .nh-title .icon{ width:15px; height:15px; color:var(--primary); }
.notif-head .link{ font-size:.74rem; }
.notif-list{
  display:flex; flex-direction:column;
  max-height:340px; overflow-y:auto; scrollbar-width:none;
}
.notif-list::-webkit-scrollbar{ display:none; }
.notif-item{
  display:flex; align-items:flex-start; gap:10px;
  padding:10px 8px; border-radius:var(--radius-md);
  text-decoration:none; transition:background .15s ease;
}
.notif-item:hover{ background:var(--surface-2); }
.ni-icon{
  width:34px; height:34px; border-radius:var(--radius-md); flex-shrink:0;
  background:var(--surface-2); color:var(--text-secondary);
  display:flex; align-items:center; justify-content:center;
}
.ni-icon .icon{ width:16px; height:16px; }
.notif-item.unread .ni-icon{ background:var(--primary-soft); color:var(--primary); }
.ni-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ni-body b{ font-size:.78rem; font-weight:600; color:var(--text); line-height:1.5; }
.ni-body span{ font-size:.7rem; color:var(--text-secondary); }
.ni-body time{ font-size:.64rem; color:var(--text-faint); margin-top:2px; }
.ni-dot{
  width:7px; height:7px; border-radius:50%; background:var(--primary);
  flex-shrink:0; margin-top:6px; opacity:0; transition:opacity .2s ease;
}
.notif-item.unread .ni-dot{ opacity:1; }
.notif-item.reading .ni-dot{ opacity:0; }
.icon-btn{
  position:relative; width:38px; height:38px; border-radius:var(--radius-full); border:1px solid var(--border);
  background:var(--surface); display:flex; align-items:center; justify-content:center;
  color:var(--text-secondary); cursor:pointer;
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.icon-btn .icon{ width:17px; height:17px; }
.icon-btn:hover{ color:var(--primary); border-color:var(--primary); }
.icon-btn.active{ color:var(--primary); border-color:var(--primary); background:var(--primary-soft); }
.icon-btn .dot{
  position:absolute; top:8px; inset-inline-end:9px; width:7px; height:7px;
  border-radius:50%; background:var(--primary); border:1.5px solid var(--surface);
}

/* Radio mini-player (topbar dropdown) */
.radio-wrap{ position:relative; }
.radio-pop{
  /* لبه‌ی راست پاپ‌آپ زیر دکمه — به سمت چپ باز می‌شه */
  position:absolute; top:calc(100% + 10px); inset-inline-start:0;
  width:320px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-pop); padding:16px;
  opacity:0; visibility:hidden; transform:translateY(6px) scale(.98);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
  z-index:80; transform-origin:top;
}
.radio-wrap.open .radio-pop{ opacity:1; visibility:visible; transform:none; }
.radio-pop-head{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;
}
.radio-pop-head .rp-title{
  display:flex; align-items:center; gap:8px; font-size:.85rem; font-weight:700;
}
.radio-pop-head .rp-title .icon{ width:15px; height:15px; color:var(--primary); }
.live-badge{
  display:inline-flex; align-items:center; gap:5px;
  font-size:.66rem; font-weight:700; color:var(--error);
  background:var(--error-soft); border-radius:var(--radius-full); padding:2px 9px;
}
.live-badge::before{
  content:""; width:5px; height:5px; border-radius:50%; background:var(--error);
  animation:blink 1.4s ease infinite;
}
@keyframes blink{ 50%{ opacity:.25; } }

.rp-now{
  display:flex; align-items:center; gap:12px; margin-bottom:14px;
}
.rp-art{
  width:54px; height:54px; border-radius:var(--radius-md); flex-shrink:0;
  background:linear-gradient(135deg, #7C3AED, #4C1D95);
  display:flex; align-items:center; justify-content:center; color:#fff;
  position:relative; overflow:hidden;
}
.rp-art::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(60px 30px at 70% 20%, rgba(255,255,255,.25), transparent 70%);
}
.rp-art .icon{ width:22px; height:22px; position:relative; }
.rp-meta{ min-width:0; flex:1; }
.rp-meta b{ display:block; font-size:.86rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rp-meta span{ font-size:.72rem; color:var(--text-faint); display:block; }

/* equalizer bars */
.eq{ display:inline-flex; align-items:flex-end; gap:2.5px; height:14px; }
.eq i{
  width:3px; border-radius:2px; background:var(--primary); height:100%;
  transform-origin:bottom; animation:eq-b 1s ease-in-out infinite;
}
.eq i:nth-child(2){ animation-delay:.25s; }
.eq i:nth-child(3){ animation-delay:.5s; }
.eq i:nth-child(4){ animation-delay:.12s; }
@keyframes eq-b{ 0%,100%{ transform:scaleY(.3); } 50%{ transform:scaleY(1); } }
.eq.paused i{ animation:none; transform:scaleY(.3); }

.rp-controls{
  display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:12px;
}
.rp-btn{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--border);
  background:var(--surface); color:var(--text-secondary); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.rp-btn:hover{ color:var(--primary); border-color:var(--primary); }
.rp-btn .icon{ width:15px; height:15px; }
.rp-play{
  width:44px; height:44px; border-radius:50%; border:0; cursor:pointer;
  background:linear-gradient(135deg, var(--primary), var(--primary-hover));
  color:var(--on-primary); display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px -2px rgba(124,58,237,.5);
  transition:transform .15s ease, box-shadow .15s ease;
}
.rp-play:hover{ transform:scale(1.05); }
.rp-play:active{ transform:scale(.97); }
.rp-play .icon{ width:18px; height:18px; }
.rp-play .icon-play{ display:block; }
.rp-play .icon-pause{ display:none; }
.radio-wrap.playing .rp-play .icon-play{ display:none; }
.radio-wrap.playing .rp-play .icon-pause{ display:block; }

.rp-volume{ display:flex; align-items:center; gap:10px; color:var(--text-faint); }
.rp-volume .icon{ width:15px; height:15px; }



/* ==========================================================================
   Dashboard — content
   ========================================================================== */
/* توجه: بدون overflow:hidden روی .main — وگرنه پاپ‌آپ رادیو موقع عبور از لبه بریده می‌شه */
.dash-content{
  flex:1; overflow-y:auto; overscroll-behavior:contain;
  padding:24px 32px; max-width:1800px; width:100%; margin-inline:auto;
  scrollbar-width:none;
}
.dash-content::-webkit-scrollbar{ display:none; }
.sidebar-nav::-webkit-scrollbar{ display:none; }

/* Welcome banner */
.welcome-banner{
  position:relative; overflow:hidden;
  border:1px solid var(--border); border-radius:var(--radius-xl);
  background:var(--surface); padding:30px 32px;
}
/* گلوهای ولت‌آزاد — نقطه‌ی شروع = همون گلوی استاتیک قبلی (85% 0%) */
.welcome-glow{
  --wx: 85%; --wy: 0%;
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(420px 200px at var(--wx) var(--wy), var(--hero-glow), transparent 70%);
  transition:opacity .4s ease;
}
.welcome-glow-border{
  position:absolute; inset:0; pointer-events:none; z-index:1;
  border-radius:inherit;
  box-shadow:
    inset 0 0 0 1.5px rgba(139,92,246,.65),
    inset 0 0 26px -8px rgba(139,92,246,.4);
  opacity:0;
  transition:opacity .45s ease;
  /* فقط بخشی از بوردر که با گلو تماس داره روشن می‌شه */
  -webkit-mask-image:radial-gradient(circle 220px at var(--wx,85%) var(--wy,0%), #000 0%, #000 40%, transparent 100%);
  mask-image:radial-gradient(circle 220px at var(--wx,85%) var(--wy,0%), #000 0%, #000 40%, transparent 100%);
}
.welcome-banner:hover .welcome-glow-border{ opacity:1; }
.welcome-banner:hover .welcome-glow{ opacity:1; }
.welcome-banner:not(:hover) .welcome-glow{ opacity:.75; }
.welcome-banner-text{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.welcome-banner h1{ font-size:1.5rem; font-weight:900; margin-bottom:4px; }
.welcome-banner p{ color:var(--text-secondary); font-size:.95rem; }
.welcome-date{
  position:relative; z-index:2;
  display:inline-flex; align-items:center; gap:8px;
  font-size:.8rem; font-weight:600; color:var(--text-secondary);
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-full); padding:7px 16px;
}
.welcome-date .icon{ width:14px; height:14px; color:var(--primary); }
.welcome-actions{ position:relative; z-index:2; display:flex; gap:10px; flex-wrap:wrap; }

/* Quick tool tiles */
.tools-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:12px;
}
.tool-tile{
  border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface);
  padding:16px 14px; text-align:start; cursor:pointer;
  display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  transition:border-color .2s ease, transform .2s ease, background .2s ease;
}
.tool-tile:hover{ border-color:var(--primary); transform:translateY(-2px); background:var(--primary-softer); }
.tool-tile .f-icon{
  width:38px; height:38px; border-radius:var(--radius-md);
  background:var(--primary-soft); color:var(--primary);
  display:flex; align-items:center; justify-content:center;
}
.tool-tile .f-icon .icon{ width:18px; height:18px; }
.tool-tile b{ font-size:.86rem; font-weight:700; color:var(--text); }
.tool-tile > span:not(.f-icon){ font-size:.72rem; color:var(--text-secondary); line-height:1.6; }

/* Radio mini panel (dashboard) */
.radio-mini{
  display:flex; align-items:center; gap:10px;
}
.radio-mini .rp-art{ width:46px; height:46px; border-radius:var(--radius-md); position:relative; overflow:hidden; }
.radio-mini .rp-art .icon{ width:18px; height:18px; position:relative; z-index:1; }
.radio-mini .rp-art .eq{ position:absolute; bottom:5px; inset-inline-start:50%; transform:translateX(50%); height:8px; }
.radio-mini .rp-meta{ flex:1; min-width:0; }
.radio-mini .rp-meta b{ display:block; font-size:.85rem; font-weight:700; }
.radio-mini .rp-meta span{ font-size:.7rem; color:var(--text-faint); display:block; }
.radio-mini .rp-play{ width:40px; height:40px; }
.radio-mini .rp-play .icon{ width:15px; height:15px; }
.radio-mini .rp-btn{ width:32px; height:32px; }
.radio-mini .rp-btn .icon{ width:13px; height:13px; }


/* KPI cards */
.kpi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.kpi-card{
  border:1px solid var(--border); border-radius:var(--radius-lg);
  background:var(--surface); padding:18px;
  display:flex; flex-direction:column; gap:10px;
  transition:border-color .2s ease, transform .2s ease;
}
.kpi-card:hover{ border-color:var(--primary); transform:translateY(-2px); }
.kpi-top{ display:flex; align-items:center; justify-content:space-between; }
.kpi-icon{
  width:38px; height:38px; border-radius:var(--radius-md);
  background:var(--primary-soft); color:var(--primary);
  display:flex; align-items:center; justify-content:center;
}
.kpi-icon .icon{ width:18px; height:18px; }
.kpi-value{ font-size:1.5rem; font-weight:900; line-height:1.2; }
.kpi-value small{ font-size:.85rem; font-weight:600; color:var(--text-faint); }
.kpi-label{ font-size:.78rem; color:var(--text-faint); margin-top:-6px; }
.kpi-delta{ font-size:.7rem; font-weight:700; display:inline-flex; align-items:center; gap:3px; }
.kpi-delta .icon{ width:12px; height:12px; }
.kpi-delta.up{ color:var(--success); }
.kpi-delta.down{ color:var(--error); }

/* Chart */
.chart-box{ position:relative; }
.bar-chart{
  display:flex; align-items:flex-end; gap:10px; height:150px;
  padding-top:24px;
}
.bar-chart .bar{ flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end; }
.bar-chart .bar i{
  display:block; width:100%; max-width:34px; border-radius:6px 6px 3px 3px;
  flex-shrink:0; /* درصد واقعی ارتفاع — بدون له شدن توسط flex */
  background:linear-gradient(180deg, var(--primary-hover), var(--primary));
  box-shadow:0 0 10px rgba(124,58,237,.35), 0 0 24px rgba(124,58,237,.18);
  position:relative;
  transition:filter .2s ease, box-shadow .2s ease;
}
.bar-chart .bar i b{
  position:absolute; bottom:calc(100% + 5px); inset-inline:0; text-align:center;
  font-size:.66rem; font-weight:700; color:var(--text-faint);
}
.bar-chart .bar em{
  font-style:normal; font-size:.7rem; color:var(--text-faint); font-weight:600;
}
.bar-chart .bar.hot em{ color:var(--primary); }
.bar-chart .bar:hover i{ filter:brightness(1.12); box-shadow:0 0 14px rgba(139,92,246,.5), 0 0 30px rgba(139,92,246,.28); }
.chart-legend{
  display:flex; align-items:center; gap:16px; margin-top:14px;
  font-size:.72rem; color:var(--text-faint);
}
.chart-legend span{ display:inline-flex; align-items:center; gap:6px; }
.chart-legend i{ width:10px; height:10px; border-radius:3px; background:var(--primary-soft); }
.chart-legend i.hot{ background:var(--primary); }

/* Resume / list rows */
.list-rows{ display:flex; flex-direction:column; }
.list-row{
  display:flex; align-items:center; gap:14px; padding:13px 0;
  border-top:1px solid var(--border);
}
.list-row:first-child{ border-top:0; padding-top:0; }
.list-row .lr-icon{
  width:38px; height:38px; border-radius:var(--radius-md);
  background:var(--primary-soft); color:var(--primary);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.list-row .lr-icon .icon{ width:17px; height:17px; }
.list-row .lr-body{ flex:1; min-width:0; }
.list-row .lr-title{ font-size:.87rem; font-weight:600; margin-bottom:2px; }
.list-row .lr-meta{ font-size:.74rem; color:var(--text-faint); }
.list-row .lr-side{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.list-row .lr-progress{ width:110px; }
.list-row .lr-progress .progress{ height:5px; }

/* Timeline */
.timeline{ display:flex; flex-direction:column; }
.timeline-item{ display:flex; gap:12px; position:relative; padding-bottom:18px; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{
  content:""; position:absolute; inset-inline-start:15px; top:34px; bottom:2px;
  width:1.5px; background:var(--border);
}
.timeline-item:last-child::before{ display:none; }
.timeline-item .tl-icon{
  width:32px; height:32px; border-radius:var(--radius-sm);
  background:var(--primary-soft); color:var(--primary);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  position:relative; z-index:1;
}
.timeline-item .tl-icon .icon{ width:15px; height:15px; }
.timeline-item .tl-title{ font-size:.85rem; font-weight:600; }
.timeline-item .tl-time{ font-size:.73rem; color:var(--text-faint); }

/* Announcements (fancy) */
.notice-featured{
  position:relative; border-radius:var(--radius-md); padding:18px;
  border:1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(120deg, var(--primary), rgba(139,92,246,.25) 60%, var(--border)) border-box;
  margin-bottom:14px;
}
.notice-featured .nf-top{
  display:flex; align-items:center; gap:10px; margin-bottom:8px;
}
.notice-featured .nf-icon{
  width:38px; height:38px; border-radius:var(--radius-md);
  background:linear-gradient(135deg, var(--primary), var(--primary-hover));
  color:var(--on-primary); display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.notice-featured .nf-icon .icon{ width:18px; height:18px; }
.notice-featured h4{ font-size:.95rem; font-weight:800; margin-bottom:5px; }
.notice-featured p{ font-size:.8rem; color:var(--text-secondary); margin-bottom:10px; }
.notice-meta{ display:flex; align-items:center; gap:10px; font-size:.72rem; color:var(--text-faint); }
.notice-meta .nm-dot{ width:3px; height:3px; border-radius:50%; background:var(--text-faint); }
.notice-row{
  display:flex; align-items:flex-start; gap:12px; padding:12px 0;
  border-top:1px solid var(--border);
}
.notice-row .nr-icon{
  width:34px; height:34px; border-radius:var(--radius-sm);
  background:var(--surface-2); color:var(--text-secondary);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.notice-row .nr-icon .icon{ width:15px; height:15px; }
.notice-row .nr-body{ flex:1; min-width:0; }
.notice-row .nr-title{ font-size:.84rem; font-weight:600; margin-bottom:2px; }
.notice-row .nr-date{ font-size:.72rem; color:var(--text-faint); display:flex; align-items:center; gap:8px; }

/* Groups */
.group-row{
  display:flex; align-items:center; gap:12px; padding:12px 0;
  border-top:1px solid var(--border);
}
.group-row:first-child{ border-top:0; padding-top:0; }
.group-row .g-icon{
  width:38px; height:38px; border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.group-row .g-icon .icon{
  width:18px; height:18px; display:block;
  /* اصلاح نوری: جوهرِ آیکون کمی به راست متمرکزه — نیم‌پیکسل بیارش وسط */
  transform:translate(-0.5px, 0) translateZ(0);
  backface-visibility:hidden;
}
.group-row .g-icon.tg{ background:#E7F3F8; color:#229ED9; }
.group-row .g-icon.wa{ background:#E9F7EE; color:#25D366; }
[data-theme="dark"] .group-row .g-icon.tg{ background:rgba(34,158,217,.15); }
[data-theme="dark"] .group-row .g-icon.wa{ background:rgba(37,211,102,.13); }
.group-row .g-body{ flex:1; min-width:0; }
.group-row .g-name{ font-size:.85rem; font-weight:600; }
.group-row .g-count{ font-size:.72rem; color:var(--text-faint); }

/* Dashboard layout grids */
.dash-grid{ display:grid; grid-template-columns:1.6fr 1fr; gap:20px; align-items:start; }
.col-stack{ display:flex; flex-direction:column; gap:20px; min-width:0; }

/* Priority vs secondary panel treatment */
.panel-hot{
  position:relative;
  border:1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(165deg, rgba(124,58,237,.55), var(--border-strong) 50%, var(--border)) border-box;
}
.panel-hot::before{
  content:""; position:absolute; top:0; inset-inline:0; height:3px;
  background:linear-gradient(90deg, var(--primary), rgba(139,92,246,.2));
}
.panel-hot .panel-head h2{ font-size:1.02rem; font-weight:800; }
[data-theme="dark"] .panel-hot{ box-shadow:0 10px 32px -16px rgba(124,58,237,.35); }
[data-theme="light"] .panel-hot{ box-shadow:0 10px 28px -14px rgba(109,40,217,.22); }
.panel-soft .panel-head h2{ font-size:.88rem; font-weight:600; color:var(--text-secondary); }
.panel-soft .panel-head h2 .icon{ color:var(--text-faint); }
.panel-soft .panel-head .link{ color:var(--text-faint); font-weight:500; }
.panel-soft .panel-head .link:hover{ color:var(--primary); }

/* ---------- Dashboard home: fits the viewport, no page scroll ---------- */
.view-dashboard{ height:100%; gap:16px; }
.view-dashboard .welcome-banner{ flex:none; padding:20px 26px; }
.view-dashboard .welcome-banner h1{ font-size:1.3rem; }
.view-dashboard .welcome-banner p{ font-size:.9rem; }
.view-dashboard .kpi-grid{ flex:none; gap:12px; }
.view-dashboard .kpi-card{ padding:14px 16px; gap:8px; }
.view-dashboard .kpi-value{ font-size:1.25rem; }
.view-dashboard .tools-grid{ flex:none; }

.view-dashboard .dash-priority{
  flex:1.35; min-height:0;
  display:grid; grid-template-columns:1.25fr 1.1fr 1fr; gap:16px;
}
.view-dashboard .dash-secondary{
  flex:1; min-height:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.view-dashboard .dash-priority .panel,
.view-dashboard .dash-secondary .panel{
  display:flex; flex-direction:column; min-height:0;
  padding:16px 18px; overflow:hidden;
}
.view-dashboard .panel-head{ margin-bottom:10px; flex-shrink:0; }
.view-dashboard .dash-priority .list-rows,
.view-dashboard .dash-secondary .list-rows,
.view-dashboard .dash-secondary .timeline{
  flex:1; min-height:0; overflow-y:auto; scrollbar-width:none;
}
.view-dashboard .dash-priority .list-rows::-webkit-scrollbar,
.view-dashboard .dash-secondary .list-rows::-webkit-scrollbar,
.view-dashboard .dash-secondary .timeline::-webkit-scrollbar{ display:none; }
.view-dashboard .notice-featured{ margin-bottom:10px; padding:14px 16px; }
.view-dashboard .notice-featured h4{ font-size:.92rem; }
.view-dashboard .notice-featured p{ font-size:.78rem; margin-bottom:0; }
.view-dashboard .notice-row{ padding:9px 0; }
.view-dashboard .group-row{ padding:9px 0; }
.view-dashboard .dash-secondary .bar-chart{ height:110px; padding-top:26px; gap:8px; }
.view-dashboard .radio-note{ flex:none; }

/* Radio emphasis inside priority panel */
.radio-note{
  display:flex; align-items:center; gap:8px; margin-top:12px;
  padding:8px 12px; border-radius:var(--radius-sm);
  background:var(--primary-softer); color:var(--text-secondary); font-size:.74rem;
}
.radio-note .icon{ width:14px; height:14px; color:var(--primary); }
.radio-note b{ color:var(--primary); }

/* Score ring */
.ring{
  --p: 0;
  width:52px; height:52px; border-radius:50%; flex-shrink:0;
  background:conic-gradient(var(--primary) calc(var(--p) * 1%), var(--surface-2) 0);
  display:flex; align-items:center; justify-content:center; position:relative;
}
.ring::before{ content:""; position:absolute; inset:5px; border-radius:50%; background:var(--surface); }
.ring b{ position:relative; font-size:.72rem; font-weight:800; }

/* Quiz cards */
.quiz-card{
  border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface);
  padding:20px; display:flex; flex-direction:column; gap:14px;
  transition:border-color .2s ease, transform .2s ease;
}
.quiz-card:hover{ border-color:var(--primary); transform:translateY(-2px); }
.quiz-card.qc-done{ }
.quiz-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.quiz-title{ font-size:.95rem; font-weight:700; }
.quiz-meta{ font-size:.75rem; color:var(--text-faint); display:flex; align-items:center; gap:10px; margin-top:4px; flex-wrap:wrap; }
.quiz-meta span{ display:inline-flex; align-items:center; gap:4px; }
.quiz-meta .icon{ width:13px; height:13px; }
.quiz-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; }

/* ==========================================================================
   Chat — بازطراحی کامل، فوق مدرن و جذاب چت هوش مصنوعی
   ========================================================================== */
.chat-wrap {
  display: flex; height: 100%; min-height: 520px;
  background: var(--surface); overflow: hidden; position: relative;
}
#view-root.fullbleed { padding: 0 !important; max-width: none !important; }
#view-root.fullbleed .view { height: 100%; }
.chat-wrap { border: 0; }
.fullbleed .chat-wrap { border-radius: 0; box-shadow: none; }
.app-shell.chat-fullbleed .sidebar { border-inline-start-color: transparent; }
.app-shell.chat-fullbleed .chat-hist { border-inline-start-color: transparent; }

/* ───── ستون تاریخچه (حل انیمیشن جمع‌شدن بدون فشردگی محتوا) ───── */
.chat-hist {
  width: 275px; flex-shrink: 0; overflow: hidden;
  border-inline-start: 1px solid var(--border);
  background: var(--surface);
  display: flex; flex-direction: column;
  transition: width .3s cubic-bezier(.22, .61, .36, 1), border-color .3s ease;
  z-index: 20;
}
.chat-wrap.hist-collapsed .chat-hist {
  width: 0;
  border-inline-start-color: transparent;
}
.chat-hist-inner {
  width: 275px; min-width: 275px; height: 100%;
  display: flex; flex-direction: column; overflow: hidden;
}

.chat-hist-head {
  height: 58px; box-sizing: border-box;
  padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border-bottom: 1px solid var(--border);
}
.chat-hist-head-title {
  display: flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 800; color: var(--text);
}
.chat-hist-head-title .icon { width: 16px; height: 16px; color: var(--primary); }

.chat-hist-top-actions {
  padding: 12px 14px 8px; display: flex; flex-direction: column; gap: 8px;
  border-bottom: 1px solid var(--border);
}
.chat-new-hist-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 9px 14px; border-radius: var(--radius-md);
  background: var(--primary-soft); color: var(--primary); font-size: .82rem; font-weight: 700;
  border: 1px dashed var(--primary); cursor: pointer;
  transition: all .2s ease;
}
.chat-new-hist-btn:hover {
  background: var(--primary); color: var(--on-primary); border-style: solid;
  transform: translateY(-1px); box-shadow: 0 4px 12px rgba(124,58,237,.25);
}
.chat-new-hist-btn .icon { width: 16px; height: 16px; }

.chat-hist-search-box {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 7px 10px;
}
.chat-hist-search-box .icon { width: 14px; height: 14px; color: var(--text-faint); flex-shrink: 0; }
.chat-hist-search-box input {
  flex: 1; border: 0; background: transparent; outline: 0;
  font-family: inherit; font-size: .78rem; color: var(--text);
}
.chat-hist-search-box input::placeholder { color: var(--text-faint); }

.chat-hist-list {
  flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 3px;
  overflow-x: hidden;
}
.chat-hist-group {
  font-size: .68rem; font-weight: 800; color: var(--text-faint);
  padding: 10px 8px 4px; letter-spacing: .02em;
}

.chat-item-wrapper {
  position: relative; display: flex; align-items: center; border-radius: var(--radius-sm);
  transition: background .15s ease;
}
.chat-item-wrapper:hover { background: var(--surface-2); }
.chat-item-wrapper.active { background: var(--primary-soft); }
.chat-item-wrapper.active .chat-item-title { color: var(--primary); font-weight: 700; }

.chat-item {
  flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 9px 10px;
  border: 0; background: transparent; cursor: pointer; text-align: start; min-width: 0;
}
.chat-item-title {
  font-size: .8rem; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-item-time { font-size: .68rem; color: var(--text-faint); }

.chat-item-del {
  width: 28px; height: 28px; border-radius: 6px; border: 0; background: transparent;
  color: var(--text-faint); display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0; margin-inline-end: 6px;
  transition: opacity .15s ease, color .15s ease, background .15s ease;
}
.chat-item-wrapper:hover .chat-item-del { opacity: 1; }
.chat-item-del:hover { color: var(--error); background: var(--error-soft); }
.chat-item-del .icon { width: 14px; height: 14px; }

/* موبایل و تبلت: لایه تاریخچه شناور */
.chat-hist-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px); z-index: 19;
}
@media (max-width: 1365px) {
  .chat-wrap .chat-hist {
    position: absolute; inset-block: 0; inset-inline-end: 0;
    box-shadow: -4px 0 24px rgba(0,0,0,.15);
  }
  .chat-wrap.hist-open .chat-hist { width: 280px; }
  .chat-wrap.hist-open .chat-hist-inner { width: 280px; min-width: 280px; }
  .chat-wrap.hist-open .chat-hist-backdrop { display: block; }
}

/* ───── ستون اصلی چت ───── */
.chat-main {
  flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; height: 100%;
}

/* هدر بالای چت */
.chat-top {
  position: absolute; top: 0; inset-inline: 0; z-index: 10;
  height: 58px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px;
  background: var(--bg-translucent, rgba(255,255,255,0.85));
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
[data-theme="dark"] .chat-top {
  background: rgba(17, 17, 20, 0.85);
}
.chat-top-start, .chat-top-end { display: flex; align-items: center; gap: 6px; }

.chat-top-title {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .82rem; font-weight: 700; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-full); padding: 5px 14px;
}
.chat-top-title .icon { width: 15px; height: 15px; color: var(--primary); }

.chat-bot-status-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  animation: dot-pulse 2s infinite ease-in-out;
}
@keyframes dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

.chat-hist-open { display: none; }
.chat-wrap.hist-collapsed .chat-hist-open { display: flex; }
@media (max-width: 1365px) {
  .chat-hist-open { display: flex; }
}

/* ───── کانتینر پیام‌ها ───── */
.chat-msgs {
  flex: 1; overflow-y: auto; padding: 82px 20px 24px;
  display: flex; flex-direction: column; gap: 16px;
  scroll-behavior: smooth;
}

/* ───── اسکرول‌بارهای کاستوم، باریک و تیره ───── */
.chat-msgs::-webkit-scrollbar,
.chat-hist-list::-webkit-scrollbar,
.chat-composer textarea::-webkit-scrollbar,
.code-block pre::-webkit-scrollbar {
  width: 5px; height: 5px;
}
.chat-msgs::-webkit-scrollbar-track,
.chat-hist-list::-webkit-scrollbar-track,
.chat-composer textarea::-webkit-scrollbar-track,
.code-block pre::-webkit-scrollbar-track {
  background: transparent;
}
.chat-msgs::-webkit-scrollbar-thumb,
.chat-hist-list::-webkit-scrollbar-thumb,
.chat-composer textarea::-webkit-scrollbar-thumb,
.code-block pre::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 99px;
  transition: background .2s ease;
}
.chat-msgs::-webkit-scrollbar-thumb:hover,
.chat-hist-list::-webkit-scrollbar-thumb:hover,
.chat-composer textarea::-webkit-scrollbar-thumb:hover,
.code-block pre::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.42);
}
[data-theme="dark"] .chat-msgs::-webkit-scrollbar-thumb,
[data-theme="dark"] .chat-hist-list::-webkit-scrollbar-thumb,
[data-theme="dark"] .chat-composer textarea::-webkit-scrollbar-thumb,
[data-theme="dark"] .code-block pre::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
}
[data-theme="dark"] .chat-msgs::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .chat-hist-list::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .chat-composer textarea::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .code-block pre::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.4);
}
.chat-msgs,
.chat-hist-list,
.chat-composer textarea,
.code-block pre {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}
[data-theme="dark"] .chat-msgs,
[data-theme="dark"] .chat-hist-list,
[data-theme="dark"] .chat-composer textarea,
[data-theme="dark"] .code-block pre {
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

/* ───── Empty State (Hero جذاب) ───── */
.chat-empty {
  margin: auto; max-width: 780px; width: 100%; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 30px 14px 10px; position: relative;
}
.chat-empty-glow {
  position: absolute; top: 10px; width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.16) 0%, transparent 70%);
  border-radius: 50%; pointer-events: none; z-index: 0;
}
.chat-empty-mark {
  width: 78px; height: 78px; position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(124,58,237,.12), rgba(124,58,237,.02));
  border: 1px solid rgba(124,58,237,.25);
  box-shadow: 0 10px 28px -6px rgba(124,58,237,.25);
  animation: empty-float 4s ease-in-out infinite;
}
.chat-empty-mark img { width: 44px; height: 44px; object-fit: contain; }

.chat-empty-title {
  font-size: 1.35rem; font-weight: 800; color: var(--text); margin: 0;
  letter-spacing: -.01em;
}
.chat-empty-desc {
  font-size: .88rem; color: var(--text-secondary); max-width: 520px;
  margin: -6px 0 12px; line-height: 1.7;
}

/* کارت‌های سریع پیشنهادی */
.chat-prompt-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; width: 100%;
}
@media (max-width: 680px) {
  .chat-prompt-grid { grid-template-columns: 1fr; }
}

.chat-prompt-card {
  display: flex; align-items: center; gap: 12px; padding: 13px 15px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); text-align: start; cursor: pointer;
  transition: all .2s cubic-bezier(.16, 1, .3, 1);
  position: relative; overflow: hidden;
}
.chat-prompt-card:hover {
  border-color: var(--primary); background: var(--surface);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px -4px rgba(124,58,237,.14);
}
.chat-prompt-card:active { transform: translateY(0) scale(.99); }

.prompt-card-icon {
  width: 38px; height: 38px; border-radius: var(--radius-md);
  background: var(--primary-soft); color: var(--primary);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.prompt-card-icon .icon { width: 18px; height: 18px; }

.prompt-card-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.prompt-card-title { font-size: .84rem; font-weight: 700; color: var(--text); }
.prompt-card-hint {
  font-size: .73rem; color: var(--text-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prompt-card-arrow {
  color: var(--text-faint); display: flex; align-items: center; justify-content: center;
  transition: transform .2s ease, color .2s ease;
}
.prompt-card-arrow .icon { width: 15px; height: 15px; }
.chat-prompt-card:hover .prompt-card-arrow {
  color: var(--primary); transform: translateX(-4px);
}

/* ───── حباب‌های پیام چت ───── */
@keyframes chatMsgIn {
  0% { opacity: 0; transform: translateY(12px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.msg {
  display: flex; gap: 12px; width: 100%; max-width: 840px; margin: 0 auto;
  animation: chatMsgIn .32s cubic-bezier(.16, 1, .3, 1) both;
  box-sizing: border-box;
}

.msg-user {
  flex-direction: row; align-self: flex-start;
}
.msg-user .msg-content { align-items: flex-start; }

.msg-assistant {
  flex-direction: row-reverse; align-self: flex-end;
}
.msg-assistant .msg-content { align-items: flex-start; }

.msg .avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.msg-user .avatar {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-secondary);
}
.msg-user .avatar .icon { width: 18px; height: 18px; }

.msg-assistant .avatar {
  background: linear-gradient(135deg, var(--primary), #9333ea);
  color: #fff; box-shadow: 0 4px 12px rgba(124,58,237,.3);
}
.msg-assistant .avatar .icon { width: 18px; height: 18px; }

.msg-content {
  display: flex; flex-direction: column; max-width: 85%; min-width: 0;
  box-sizing: border-box;
}

.msg-author {
  display: flex; align-items: center; gap: 8px; margin-bottom: 5px; padding-inline-start: 4px;
}
.msg-author-name { font-size: .8rem; font-weight: 800; color: var(--text); }

.bubble {
  padding: 13px 18px; font-size: .92rem; line-height: 1.85; position: relative;
  word-break: break-word; overflow-wrap: anywhere; box-sizing: border-box; max-width: 100%;
}

/* حباب کاربر — سمت راست */
.msg-user .bubble {
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  color: #ffffff;
  border-radius: 4px 18px 18px 18px;
  box-shadow: 0 4px 16px -2px rgba(124,58,237,.3);
}
.msg-user .bubble a { color: #ffffff; text-decoration: underline; }

/* حباب هوش مصنوعی — سمت چپ */
.msg-assistant .bubble {
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); border-radius: 18px 4px 18px 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,.03);
}
[data-theme="dark"] .msg-assistant .bubble {
  background: #16161A; border-color: #26262D;
}

/* استایل Markdown درون حباب دستیار */
.bubble.markdown-body h1,
.bubble.markdown-body h2,
.bubble.markdown-body h3,
.bubble.markdown-body h4 {
  margin: 12px 0 6px; font-weight: 800; color: var(--text);
}
.bubble.markdown-body h1 { font-size: 1.15rem; }
.bubble.markdown-body h2 { font-size: 1.05rem; }
.bubble.markdown-body h3 { font-size: .96rem; }

.bubble.markdown-body p { margin: 0 0 10px; }
.bubble.markdown-body p:last-child { margin-bottom: 0; }

.bubble.markdown-body ul,
.bubble.markdown-body ol {
  margin: 6px 0 10px; padding-inline-start: 22px;
}
.bubble.markdown-body li { margin-bottom: 4px; }

.bubble.markdown-body blockquote {
  margin: 10px 0; padding: 8px 14px;
  background: var(--primary-soft);
  border-inline-start: 3px solid var(--primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: .88rem; color: var(--text);
}

.bubble.markdown-body code:not(pre code) {
  background: rgba(124,58,237,.12); color: var(--primary);
  padding: 2px 6px; border-radius: 5px; font-family: monospace;
  font-size: .86em; direction: ltr; display: inline-block;
}
[data-theme="dark"] .bubble.markdown-body code:not(pre code) {
  background: rgba(139,92,246,.2); color: #c4b5fd;
}

/* بلوک کد چندخطی زیبا با دکمه کپی */
.code-block {
  margin: 12px 0; border-radius: var(--radius-md); overflow: hidden;
  background: #141418; border: 1px solid #282830;
  direction: ltr; text-align: left; max-width: 100%; box-sizing: border-box;
}
.code-block-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 12px; background: #1c1c22; border-bottom: 1px solid #282830;
  font-size: .74rem; font-weight: 700; color: #a1a1aa;
}
.code-block-lang { text-transform: uppercase; letter-spacing: .05em; }

.code-copy-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: transparent; border: 0; color: #a1a1aa;
  cursor: pointer; font-size: .72rem; font-family: inherit;
  padding: 3px 8px; border-radius: 5px; transition: all .15s ease;
}
.code-copy-btn:hover { background: rgba(255,255,255,.1); color: #fff; }
.code-copy-btn.copied { color: #22c55e; }
.code-copy-btn .icon { width: 13px; height: 13px; }

.code-block pre {
  margin: 0; padding: 12px 14px; overflow-x: auto;
  max-width: 100%; box-sizing: border-box; -webkit-overflow-scrolling: touch;
}
.code-block pre code {
  font-family: Consolas, Monaco, "Courier New", monospace;
  font-size: .86rem; line-height: 1.6; color: #e4e4e7;
  background: transparent !important; padding: 0 !important;
}

/* نوار اکشن زیر حباب هوش مصنوعی */
.msg-actions {
  display: flex; align-items: center; gap: 6px; margin-top: 6px; padding-inline-start: 4px;
}
.msg-act-btn {
  width: 28px; height: 28px; border-radius: 6px; border: 0; background: transparent;
  color: var(--text-faint); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .15s ease; font-size: .72rem;
}
.msg-act-btn:hover { color: var(--primary); background: var(--surface-2); }
.msg-act-btn.active { color: var(--primary); background: var(--primary-soft); }
.msg-act-btn .icon { width: 14px; height: 14px; }
.msg-act-btn.with-label { width: auto; padding: 0 8px; gap: 4px; }

.msg-time { font-size: .68rem; color: var(--text-faint); margin-inline-start: auto; }

/* ───── انیمیشن در حال نوشتن (Typing indicator) ───── */
.msg-typing {
  display: flex; align-items: center; gap: 8px; padding: 12px 16px;
  color: var(--text-faint); font-size: .82rem; font-weight: 600;
}
.typing-wave {
  display: inline-flex; align-items: center; gap: 4px;
}
.typing-wave span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--primary);
  animation: typing-jump 1.2s infinite ease-in-out;
}
.typing-wave span:nth-child(2) { animation-delay: .18s; }
.typing-wave span:nth-child(3) { animation-delay: .36s; }

@keyframes typing-jump {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30% { transform: translateY(-6px); opacity: 1; }
}

/* ───── نوار Dock و Composer مدرن ───── */
.chat-dock {
  padding: 8px 20px 16px; position: relative; z-index: 10;
  max-width: 860px; width: 100%; margin: 0 auto; box-sizing: border-box;
}

/* دکمه شناور اسکرول به پایین (دقیقاً بالای اینپوت، بدون تداخل با پیام‌ها یا باکس متن) */
.chat-scroll-btn {
  position: absolute; top: -44px; left: 50%; transform: translateX(-50%) translateY(8px);
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text-secondary); box-shadow: 0 4px 16px rgba(0,0,0,.12);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 15; opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, background .2s ease, border-color .2s ease;
}
.chat-scroll-btn.visible {
  opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.chat-scroll-btn:hover {
  background: var(--primary-soft); color: var(--primary); border-color: var(--primary);
  transform: translateX(-50%) translateY(-2px);
}
.chat-scroll-btn .icon { width: 16px; height: 16px; }

/* تری ضمیمه فایل */
.chat-attach-tray {
  margin-bottom: 8px; display: flex; flex-wrap: wrap; gap: 8px;
}
.chat-attach-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 6px 12px; font-size: .78rem;
  color: var(--text); animation: chatMsgIn .2s ease;
}
.chat-attach-chip .icon { width: 15px; height: 15px; color: var(--primary); }
.chat-attach-chip-name { font-weight: 600; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-attach-chip-size { color: var(--text-faint); font-size: .7rem; }
.chat-attach-chip-remove {
  background: transparent; border: 0; color: var(--text-faint); cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 2px;
  border-radius: 4px; transition: color .15s ease;
}
.chat-attach-chip-remove:hover { color: var(--error); }
.chat-attach-chip-remove .icon { width: 13px; height: 13px; }

/* کارد Composer شبیه ChatGPT و Claude */
.chat-composer {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 22px; position: relative;
  box-shadow: 0 4px 20px -2px rgba(24,24,27,.07), 0 1px 3px rgba(24,24,27,.04);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
[data-theme="dark"] .chat-composer {
  background: #141418; border-color: #26262e;
  box-shadow: 0 6px 28px -4px rgba(0,0,0,.5);
}

.chat-composer:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft), 0 6px 24px -4px rgba(124,58,237,.18);
}

.chat-composer-main {
  padding: 10px 16px 2px; display: flex; align-items: center;
}
.chat-composer textarea {
  width: 100%; border: 0; background: transparent; outline: 0; resize: none;
  color: var(--text); font-family: inherit; font-size: .94rem; line-height: 1.65;
  min-height: 36px; max-height: 150px; padding: 2px 0;
}
.chat-composer textarea::placeholder { color: var(--text-faint); }

.chat-composer-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 10px 8px; gap: 8px;
}

.chat-composer-tools {
  display: flex; align-items: center; gap: 6px;
}

.chat-tool-btn {
  width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent;
  color: var(--text-faint); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .15s ease;
}
.chat-tool-btn:hover {
  color: var(--primary); background: var(--primary-soft);
}
.chat-tool-btn .icon { width: 17px; height: 17px; }

.chat-composer-actions {
  display: flex; align-items: center; gap: 10px; margin-inline-start: auto;
}

.chat-keyhint {
  font-size: .7rem; color: var(--text-faint); display: flex; align-items: center; gap: 4px;
}
.chat-keyhint kbd {
  font-size: .65rem; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 5px; font-family: inherit; font-weight: 700;
}

.chat-send-btn {
  width: 36px; height: 36px; border-radius: 50%; border: 0;
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  color: var(--on-primary); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .18s cubic-bezier(.34, 1.56, .64, 1);
  box-shadow: 0 3px 12px rgba(124,58,237,.35);
}
.chat-send-btn:hover:not(:disabled) {
  transform: scale(1.08); box-shadow: 0 5px 18px rgba(124,58,237,.45);
}
.chat-send-btn:active:not(:disabled) { transform: scale(.96); }
.chat-send-btn:disabled {
  opacity: .35; cursor: not-allowed; transform: none; box-shadow: none;
  background: var(--surface-2); color: var(--text-faint);
}
.chat-send-btn.generating {
  background: #dc2626 !important; opacity: 1 !important; cursor: pointer !important;
  box-shadow: 0 3px 12px rgba(220,38,38,.4) !important;
}
.chat-send-btn .icon { width: 16px; height: 16px; }

.chat-disclaimer {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: .72rem; color: var(--text-faint); margin: 6px 0 0; text-align: center;
}
.chat-disclaimer .icon { width: 13px; height: 13px; flex-shrink: 0; }

/* ───── بهبود ریسپانسیو اختصاصی موبایل ───── */
@media (max-width: 768px) {
  .chat-wrap { overflow-x: hidden; }
  .chat-main { overflow-x: hidden; width: 100%; max-width: 100vw; }
  
  /* تاپ‌بار چت در موبایل: بدون بک‌گراند و مرز تا دید پیام‌ها حداکثری شود و دو دکمه به‌صورت شناور بمانند */
  .chat-top {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 0 !important;
    padding: 8px 10px;
    pointer-events: none;
  }
  .chat-top-start {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .chat-top-start .icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    color: var(--text);
  }
  [data-theme="dark"] .chat-top-start .icon-btn {
    background: #18181c;
    border-color: #2b2b32;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
  }
  .chat-top-title {
    display: none !important;
  }
  
  .chat-keyhint { display: none; }

  .chat-msgs {
    padding: 64px 10px 12px; overflow-x: hidden; width: 100%; box-sizing: border-box; gap: 12px;
  }
  .msg {
    max-width: 100%; gap: 8px; margin-bottom: 6px; box-sizing: border-box;
  }
  .msg .avatar { width: 30px; height: 30px; }
  .msg .avatar .icon { width: 15px; height: 15px; }
  .msg-content { max-width: calc(100% - 38px); min-width: 0; box-sizing: border-box; }
  .bubble {
    padding: 9px 12px; font-size: .86rem; line-height: 1.65; max-width: 100%;
    box-sizing: border-box; word-break: break-word; overflow-wrap: anywhere;
  }
  .msg-user .bubble { border-radius: 4px 14px 14px 14px; }
  .msg-assistant .bubble { border-radius: 14px 4px 14px 14px; }
  .bubble.markdown-body h1 { font-size: 1.05rem; margin: 8px 0 4px; }
  .bubble.markdown-body h2 { font-size: .98rem; margin: 8px 0 4px; }
  .bubble.markdown-body h3 { font-size: .92rem; margin: 6px 0 4px; }
  .bubble.markdown-body ul,
  .bubble.markdown-body ol { padding-inline-start: 16px; margin: 4px 0 8px; }
  .code-block { max-width: 100%; margin: 8px 0; box-sizing: border-box; }
  .code-block pre {
    padding: 8px 10px; font-size: .8rem; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  
  /* کاهش ارتفاع داک و باکس پیام روی موبایل برای اختصاص فضای بیشتر به چت */
  .chat-dock {
    padding: 4px 8px 8px; max-width: 100%; box-sizing: border-box;
  }
  .chat-composer { border-radius: 18px; }
  .chat-composer-main { padding: 6px 12px 2px; }
  .chat-composer textarea {
    min-height: 28px; max-height: 110px; font-size: .86rem; line-height: 1.5; padding: 2px 0;
  }
  .chat-composer-footer { padding: 2px 8px 6px; }
  .chat-tool-btn { width: 30px; height: 30px; }
  .chat-tool-btn .icon { width: 16px; height: 16px; }
  .chat-send-btn { width: 32px; height: 32px; }
  .chat-send-btn .icon { width: 15px; height: 15px; }
  .chat-scroll-btn { width: 32px; height: 32px; top: -38px; }
  .chat-scroll-btn .icon { width: 14px; height: 14px; }
  .chat-disclaimer { margin: 3px 0 0; font-size: .62rem; }
  
  .chat-empty { padding: 16px 8px 8px; gap: 12px; }
  .chat-empty-mark { width: 60px; height: 60px; }
  .chat-empty-mark img { width: 34px; height: 34px; }
  .chat-empty-title { font-size: 1.15rem; }
  .chat-empty-desc { font-size: .8rem; margin: -4px 0 8px; line-height: 1.5; }
  .chat-prompt-card { padding: 10px 12px; gap: 8px; }
  .prompt-card-icon { width: 32px; height: 32px; }
  .prompt-card-icon .icon { width: 15px; height: 15px; }
  .prompt-card-title { font-size: .78rem; }
  .prompt-card-hint { font-size: .68rem; }
}

/* Media cards (رشته‌ها) */
.media-card{
  border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden;
  background:var(--surface); transition:border-color .2s ease, transform .2s ease;
  cursor:pointer;
}
.media-card:hover{ border-color:var(--primary); transform:translateY(-2px); }
.media-thumb{
  aspect-ratio:16/9; position:relative; display:flex; align-items:center; justify-content:center;
  color:#fff;
}
.media-thumb .play-btn{
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.18); backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.35);
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s ease;
}
.media-card:hover .play-btn{ transform:scale(1.1); }
.media-thumb .play-btn .icon{ width:18px; height:18px; }
.media-thumb .m-dur{
  position:absolute; bottom:10px; inset-inline-end:10px;
  font-size:.68rem; font-weight:700; background:rgba(0,0,0,.55);
  border-radius:var(--radius-sm); padding:2px 8px;
}
.media-body{ padding:14px 16px; }
.media-body h4{ font-size:.9rem; font-weight:700; margin-bottom:3px; }
.media-body p{ font-size:.75rem; color:var(--text-faint); }

/* Radio page */
.player-hero{
  border:1px solid var(--border); border-radius:var(--radius-xl); background:var(--surface);
  padding:32px; display:flex; align-items:center; gap:28px; flex-wrap:wrap;
  position:relative; overflow:hidden;
}
.player-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(420px 200px at 20% 0%, var(--hero-glow), transparent 70%);
}
.player-art{
  width:120px; height:120px; border-radius:var(--radius-lg); flex-shrink:0;
  background:linear-gradient(135deg, #7C3AED, #4C1D95);
  display:flex; align-items:center; justify-content:center; color:#fff;
  position:relative; overflow:hidden;
}
.player-art::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(90px 60px at 70% 20%, rgba(255,255,255,.22), transparent 70%);
}
.player-art .icon{ width:44px; height:44px; position:relative; }
.player-art .eq{ position:absolute; bottom:14px; height:16px; }
.player-info{ flex:1; min-width:220px; position:relative; }
.player-info .live-badge{ margin-bottom:8px; }
.player-info h2{ font-size:1.4rem; font-weight:900; margin-bottom:4px; }
.player-info p{ color:var(--text-secondary); font-size:.9rem; }
.player-controls{ position:relative; display:flex; align-items:center; gap:16px; }
.player-controls .rp-btn{ width:42px; height:42px; }
.player-controls .rp-btn .icon{ width:18px; height:18px; }
.player-controls .rp-play{ width:56px; height:56px; }


/* Settings */
.settings-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
.settings-row{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 0; border-top:1px solid var(--border);
}
.settings-row:first-of-type{ border-top:0; padding-top:0; }
.settings-row .sr-body{ flex:1; min-width:0; }
.settings-row .sr-title{ font-size:.88rem; font-weight:600; }
.settings-row .sr-desc{ font-size:.75rem; color:var(--text-faint); margin-top:2px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* Upload queue rows */
.queue-row{
  display:flex; align-items:center; gap:14px; padding:13px 14px;
  border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface);
}
.queue-row + .queue-row{ margin-top:10px; }
.queue-row .q-icon{
  width:38px; height:38px; border-radius:var(--radius-md); flex-shrink:0;
  background:var(--primary-soft); color:var(--primary);
  display:flex; align-items:center; justify-content:center;
}
.queue-row .q-icon .icon{ width:17px; height:17px; }
.queue-row .q-body{ flex:1; min-width:0; }
.queue-row .q-name{ font-size:.84rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.queue-row .q-meta{ font-size:.72rem; color:var(--text-faint); }

/* View header (inside views) */
.view-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.view-head h1{ font-size:1.35rem; font-weight:900; display:flex; align-items:center; gap:12px; }
.view-head h1 .vh-icon{
  width:42px; height:42px; border-radius:var(--radius-md);
  background:var(--primary-soft); color:var(--primary);
  display:flex; align-items:center; justify-content:center;
}
.view-head h1 .vh-icon .icon{ width:20px; height:20px; }
.view-head p{ font-size:.85rem; color:var(--text-secondary); margin-top:3px; }
.view-head-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.vh-back{
  width:42px; height:42px; border-radius:var(--radius-md);
  border:1px solid var(--border); background:var(--surface); color:var(--text-secondary);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:color .15s ease, border-color .15s ease;
}
.vh-back:hover{ color:var(--primary); border-color:var(--primary); }

/* ==========================================================================
   Responsive
   ========================================================================== */
.sidebar-backdrop{ display:none; }

@media (max-width:1080px){
  .kpi-grid{ grid-template-columns:repeat(2,1fr); }
  .dash-grid{ grid-template-columns:1fr; }

  .tools-grid{ grid-template-columns:repeat(3,1fr); }
  .view-dashboard .dash-priority{ grid-template-columns:1fr 1fr; }
  .view-dashboard .dash-priority .panel-hot:first-child{ grid-column:1 / -1; }
  .view-dashboard .dash-secondary{ grid-template-columns:1fr 1fr 1fr; }
}
@media (max-width:980px){
  .feature-highlights{ grid-template-columns:1fr; }
  .feature-grid{ grid-template-columns:repeat(2,1fr); }
  .value-props{ grid-template-columns:1fr; gap:24px; }
  .settings-grid{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .nav-links{ display:none; }
  .hero-inner{ padding-block:64px 56px; }
  .hamburger{ display:flex; }
  .sidebar{
    position:fixed; inset-inline-start:0; top:0; height:100vh;
    transform:translateX(100%); transition:transform .25s ease; z-index:60;
    box-shadow:var(--shadow-pop);
  }
  .app-shell.sidebar-open .sidebar{ transform:translateX(0); }
  .sidebar-backdrop{
    display:none; position:fixed; inset:0; background:rgba(0,0,0,.45);
    z-index:50; backdrop-filter:blur(2px);
  }
  .app-shell.sidebar-open .sidebar-backdrop{ display:block; }
  .topbar{ padding:12px 16px; }
  .dash-content{ padding:18px 16px; }
  .welcome-banner{ padding:22px; }
  .tools-grid{ grid-template-columns:repeat(2,1fr); }
  .view-dashboard{ height:auto; }
  .view-dashboard .dash-priority,
  .view-dashboard .dash-secondary{ grid-template-columns:1fr; }
  .view-dashboard .dash-priority .panel-hot:first-child{ grid-column:auto; }
  .view-dashboard .panel{ flex:none; overflow:visible; }
  .view-dashboard .dash-priority .list-rows,
  .view-dashboard .dash-secondary .list-rows,
  .view-dashboard .dash-secondary .timeline{ overflow:visible; }
  .chat-wrap{ height:100%; position:relative; min-height:0; }
  /* موبایل/تبلت: تاریخچه لایه‌ی روی چت — با transform بیرون می‌ره (نه width:0 که باعث نیمه‌باز می‌شه) */
  .chat-hist{
    position:absolute; top:0; bottom:0; inset-inline-start:0; inset-inline-end:auto; z-index:31;
    width:min(300px,82vw); box-shadow:var(--shadow-pop);
    transition:transform .32s cubic-bezier(.22,.61,.36,1), visibility .32s;
  }
  .chat-wrap.hist-collapsed .chat-hist{ width:min(300px,82vw); transform:translateX(100%); visibility:hidden; }
  .chat-wrap.hist-open .chat-hist{ transform:none; visibility:visible; }
  /* بک‌درپ لایه‌ی تاریخچه — فقط در حالت باز */
  .chat-hist-backdrop{
    display:block; position:absolute; inset:0; z-index:30; background:rgba(10,10,12,.45);
    opacity:0; visibility:hidden; pointer-events:none; transition:opacity .28s ease, visibility 0s linear .28s;
  }
  .chat-wrap.hist-open .chat-hist-backdrop{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity .28s ease, visibility 0s; }
  .chat-msgs{ padding-top:60px; }
  .chat-dock{ padding:6px 14px calc(132px + env(safe-area-inset-bottom,0px)); }
  .chat-top-title{ display:none; }
  .form-grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .kpi-grid{ grid-template-columns:1fr 1fr; gap:10px; }
  .kpi-card{ padding:14px; }
  .welcome-actions{ width:100%; }
  .welcome-actions .btn{ flex:1; white-space:nowrap; padding-inline:12px; }
  .list-row .lr-progress{ display:none; }
  .player-hero{ padding:22px; }
  .radio-pop{ width:290px; }
}

/* ==========================================================================
   موبایل و تبلت (≤1365px) — تجربه‌ی اپ‌مانند: تب‌بار پایین + فاب رادیو + مینی‌پلیر تمام‌صفحه
   ========================================================================== */
.mobile-tabbar, .mobile-fab, .radio-sheet{ display:none; }

@media (max-width:1365px){
  /* حذف فلش آبی سیستم هنگام تاچ روی دکمه‌ها و لینک‌ها */
  *, *::before, *::after{ -webkit-tap-highlight-color:transparent; }

  /* --- پوسته: بدون سایدبار کلاسیک، اپ‌مانند — سایدبار به کشوی منو تبدیل می‌شه --- */
  .sidebar{
    display:flex; position:fixed; inset-inline-start:0; top:0; height:100dvh;
    width:min(300px,84vw); z-index:90;
    transform:translateX(100%); opacity:0; pointer-events:none;
    transition:transform .32s cubic-bezier(.22,1,.36,1), opacity .25s ease;
    box-shadow:var(--shadow-pop);
  }
  .app-shell.sidebar-open .sidebar{
    transform:translateX(0); opacity:1; pointer-events:auto;
  }
  .sidebar-backdrop{
    display:block; position:fixed; inset:0; z-index:85;
    background:rgba(10,10,12,.45);
    backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
    opacity:0; visibility:hidden; pointer-events:none; transition:opacity .3s ease, visibility 0s linear .3s;
  }
  .app-shell.sidebar-open .sidebar-backdrop{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity .3s ease, visibility 0s; }
  .topbar{
    position:sticky; top:0; z-index:40;
    padding:12px 16px calc(12px + env(safe-area-inset-top,0px));
    border-bottom:1px solid var(--border);
  }
  .topbar .hamburger{ display:none; }
  .radio-wrap.topbar-radio{ display:none; }
  .topbar .topbar-theme{ display:flex; }
  .main, .main > .dash-content{ height:auto; min-height:100vh; }
  /* اسکرول تنها روی body — هیچ تله‌ی اسکرول تو در تو نباشه */
  html, body{ overflow-x:hidden; }
  body{ overflow-y:auto; }
  .main{ height:auto !important; min-height:100vh; overflow:visible !important; }
  .dash-content{ height:auto !important; min-height:0; overflow:visible !important; }
  /* داشبورد «بدون اسکرول» دسکتاپ — موبایل باید آزاد جریان داشته باشه */
  .view-dashboard{ height:auto !important; }
  .view-dashboard .panel{ overflow:visible; flex:none; }
  .view-dashboard .list-rows,
  .view-dashboard .timeline{ overflow:visible !important; max-height:none !important; }
  .dash-content{ padding:16px 16px calc(112px + env(safe-area-inset-bottom,0px)) !important; max-width:none; }

  /* --- تب‌بار شناور پایین --- */
  /* --- شیشه‌ی مایع اپل: شکست نور واقعی + ریم درخشان --- */
  .mobile-tabbar{
    display:flex; align-items:center; justify-content:space-around; gap:4px;
    position:fixed; z-index:80;
    inset-inline-start:14px; inset-inline-end:96px;
    bottom:calc(14px + env(safe-area-inset-bottom,0px));
    height:64px; border-radius:999px;
    border:0; padding:0 8px;
    /* بلور کلاسیک GPU — فیلتر SVG لنز (feDisplacementMap) هر فریم backdrop رو
       دوباره پردازش می‌کرد و روی موبایل سنگین بود؛ حذف شد */
    backdrop-filter:blur(14px) saturate(1.4);
    -webkit-backdrop-filter:blur(14px) saturate(1.4);
    background:rgba(255,255,255,.055);
    box-shadow:
      0 22px 48px -18px rgba(0,0,0,.5),
      0 4px 14px -6px rgba(0,0,0,.22);
  }
  [data-theme="dark"] .mobile-tabbar{ background:rgba(18,18,24,.22); }
  /* ریم شیشه: بازتاب نور روی لبه — بسیار نرم، بدون خط تیز */
  .mobile-tabbar::after{
    content:""; position:absolute; inset:0; border-radius:999px;
    padding:3px; pointer-events:none; z-index:3;
    background:linear-gradient(135deg,
      rgba(255,255,255,.8), rgba(255,255,255,.14) 24%,
      rgba(255,255,255,.03) 50%, rgba(255,255,255,.05) 72%,
      rgba(255,255,255,.4) 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
            mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite:exclude;
    filter:blur(.5px);
  }
  .mtab{
    position:relative; z-index:2; /* بالاتر از نشانگر متحرک */
    flex:1; height:52px; border-radius:16px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    color:var(--text-secondary); font-size:.66rem; font-weight:700; line-height:1;
    text-shadow:0 1px 4px rgba(0,0,0,.14);
    transition:color .18s ease;
    -webkit-tap-highlight-color:transparent;
  }
  .mtab .icon{ width:22px; height:22px; flex-shrink:0; display:block; filter:drop-shadow(0 1px 3px rgba(0,0,0,.18)); }
  .mtab.active{ color:var(--primary); }
  .mtab.active .icon{ filter:drop-shadow(0 1px 4px rgba(124,58,237,.45)); }
  /* نشانگر متحرک: تکه شیشه‌ی متراکم که پشت تب‌ها جابه‌جا می‌شه */
  .mtab-pill{
    position:absolute; top:6px; bottom:6px; left:0; width:60px;
    border-radius:999px; z-index:1; pointer-events:none;
    background:rgba(255,255,255,.36);
    /* بهینه: پیل روی backdrop از قبل بلورشده‌ی تب‌بار نمونه‌گیری می‌کنه —
       ۱۰px همون ظاهر رو می‌ده بدون هزینه‌ی بلور ۲۲px */
    backdrop-filter:blur(10px) saturate(1.9) brightness(1.16);
    -webkit-backdrop-filter:blur(10px) saturate(1.9) brightness(1.16);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.55),
      0 3px 14px -4px rgba(0,0,0,.3);
    opacity:0;
    will-change:transform, width;
    transition:transform .32s cubic-bezier(.22,.9,.3,1), width .32s cubic-bezier(.22,.9,.3,1), opacity .25s ease;
  }
  [data-theme="dark"] .mtab-pill{ background:rgba(255,255,255,.11); }
  .mtab-pill.show{ opacity:1; }
  .mtab-pill.no-anim{ transition:none; }
  button.mtab{ background:transparent; border:0; font:inherit; font-size:.66rem; cursor:pointer; }

  /* --- فاب رادیو (سمت راست، مثل تصویر) --- */
  .mobile-fab{
    display:flex; align-items:center; justify-content:center;
    position:fixed; z-index:80;
    inset-inline-end:14px; bottom:calc(14px + env(safe-area-inset-bottom,0px));
    width:64px; height:64px; border-radius:50%; border:0; cursor:pointer;
    background:linear-gradient(135deg, var(--primary), var(--primary-hover)); color:#fff;
    box-shadow:0 10px 26px -8px rgba(124,58,237,.65);
    -webkit-tap-highlight-color:transparent;
  }
  .mobile-fab .icon{ width:26px; height:26px; }
  .mobile-fab:active{ transform:scale(.94); }

  /* مینی‌پلیرهاورِ تاپ‌بار موبایل معنی نداره — فقط کلیک */
  .radio-wrap .radio-pop{ display:none !important; }

  /* --- مینی‌پلیر تمام‌صفحه (radio-sheet) --- */
  .radio-sheet{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    position:fixed; z-index:100;
    inset:0; width:100%; height:100dvh; border-radius:0;
    padding:60px 26px calc(40px + env(safe-area-inset-bottom,0px));
    /* بلور کلاسیک — لنز شیشه‌ای فقط برای تب‌باره (سنگینه!)
       بهینه‌سازی: وقتی بسته‌ست visibility:hidden — لایه‌ی تمام‌صفحه‌ی blur(28px) نباید
       بعد از انیمیشن بسته‌شدن روی GPU بمونه و هر فریم کامپوزیت کنه */
    background:var(--bg-translucent); backdrop-filter:blur(28px) saturate(1.4);
    -webkit-backdrop-filter:blur(28px) saturate(1.4);
    border:0;
    transform:translateY(100%);
    transition:transform .45s cubic-bezier(.22,.9,.3,1), opacity .3s ease, visibility 0s linear .45s;
    opacity:0; visibility:hidden; pointer-events:none;
  }
  [data-theme="dark"] .radio-sheet{ background:var(--bg-translucent); }
  .radio-sheet.open{
    transform:none; opacity:1; visibility:visible; pointer-events:auto;
    transition:transform .45s cubic-bezier(.22,.9,.3,1), opacity .3s ease, visibility 0s;
  }
  .radio-sheet.dragging{ transition:none; }
  .radio-sheet .rs-grab{
    position:absolute; top:12px; inset-inline-start:50%; transform:translateX(50%);
    width:46px; height:5px; border-radius:99px; background:var(--border-strong);
  }
  .radio-sheet .rs-close{
    position:absolute; top:14px; inset-inline-start:14px;
    width:36px; height:36px; border-radius:50%; border:1px solid var(--border);
    background:var(--surface-2); color:var(--text-secondary); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .radio-sheet .rs-close .icon{ width:18px; height:18px; }
  .rs-art{
    position:relative; z-index:2; width:min(240px,62vw); height:min(240px,62vw); border-radius:32px; overflow:hidden;
    box-shadow:0 18px 44px -12px rgba(124,58,237,.5);
    background:linear-gradient(135deg, #2a2140, #16131f);
    margin-top:14px;
  }
  .rs-art img{ width:100%; height:100%; object-fit:cover; }
  .rs-art .eq{ position:absolute; bottom:12px; inset-inline-start:50%; transform:translateX(50%); height:18px; }
  .rs-art .eq i{ width:4px; }
  .rs-meta{ text-align:center; margin-top:22px; }
  .rs-meta b{ font-size:1.3rem; font-weight:900; display:block; }
  .rs-live{
    display:inline-flex; align-items:center; gap:6px; margin-top:6px;
    font-size:.74rem; font-weight:700; color:var(--error);
  }
  .rs-live .rdot{ width:7px; height:7px; border-radius:50%; background:var(--error); animation:rdot 1.4s ease-in-out infinite; }
  @keyframes rdot{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
  .rs-controls{ margin-top:26px; }
  .rs-controls .rp-play{ width:74px; height:74px; }
  .rs-controls .rp-play .icon{ width:30px; height:30px; }
  .rs-volume{ display:flex; align-items:center; gap:12px; margin-top:28px; width:100%; max-width:300px; color:var(--text-secondary); }
  .rs-volume .icon{ width:18px; height:18px; flex-shrink:0; }

  /* هدرها و پنل‌ها — نفس اپ */
  .welcome-banner{ padding:20px; border-radius:24px; }
  .welcome-banner h1{ font-size:1.2rem; }
  .welcome-actions .btn{ flex:1; }
  .panel{ border-radius:20px; }
  .tools-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
  /* گریدهای با ستون ثابت اینلاین (گروه‌ها/رشته‌ها) — واکنش‌گرا بشن */
  .kpi-grid{ grid-template-columns:repeat(auto-fit,minmax(210px,1fr)) !important; }

  /* چت: زنجیره‌ی ارتفاع ثابت + فاصله‌ی کامپوزر از تب‌بار.
     --app-h از JS میاد (visualViewport.height) = ناحیه‌ی واقعی دیده‌شده بدون نوار آدرس.
     100dvh با نوار آدرس موبایل بازی می‌کرد و کامپوزر می‌رفت زیر تب‌بار.
     پوسته هم pin می‌شه وگرنه min-height:100vh چت رو بلندتر از ناحیه‌ی دیده‌شده می‌کنه
     و صفحه اسکرول می‌خوره → نوار آدرس جمع می‌شه → همه‌چیز می‌پره. */
  .app-shell.chat-fullbleed{ height:var(--app-h,100dvh); min-height:0; overflow:hidden; }
  .main:has(.chat-wrap){ height:var(--app-h,100dvh) !important; min-height:0 !important; overflow:hidden !important; }
  .main:has(.chat-wrap) > .dash-content{ overflow:hidden !important; padding:0 !important; min-height:0 !important; }
  /* کیبورد باز: زنجیره باید بتونه جمع بشه — min-height:autoِ فلکس‌آیتم و 520px
     چی-رپ مانع جمع‌شدن بودند؛ پایین چت (کامپوزر) زیر لبه‌ی بریده‌شده پنهان می‌شد */
  .main:has(.chat-wrap) .chat-wrap{ min-height:0 !important; height:100% !important; }
  #view-root:has(.chat-wrap){ height:100%; overflow:hidden; padding:0 !important; max-width:none !important; }
  #view-root:has(.chat-wrap) .view{ height:100%; min-height:0; }
  /* فاصله‌ی کامپوزر از تب‌بار: --tab-clear از JS میاد (موقعیت واقعی تب‌بار).
     فرمول ثابت universal نبود — سافاری/کروم اندروید هرکدوم نوار پایین متفاوتی دارن.
     ۱۳۲px فقط fallback اولیه‌ست قبل از اولین اندازه‌گیری. */
  .chat-dock{
    padding-bottom:var(--tab-clear, calc(132px + env(safe-area-inset-bottom,0px)));
    transition:padding-bottom .22s cubic-bezier(.22,.9,.3,1); /* فقط padding — سبک روی موبایل */
  }
  /* کیبورد باز: تب‌بار و فاب می‌رن زیر، کامپوزر مستقیم روی کیبورد */
  .mobile-tabbar, .mobile-fab{
    transition:transform .26s cubic-bezier(.3,.7,.3,1), opacity .2s ease;
  }
  html.kb-open .mobile-tabbar, html.kb-open .mobile-fab{
    transform:translateY(calc(100% + 24px));
    opacity:0;
    pointer-events:none;
  }
}  /* اسمارت‌فون — زیر ۴۷۵px چیدمان‌های خراب اصلاح می‌شن */
@media (max-width:474px){
  .topbar{ padding:10px 12px calc(10px + env(safe-area-inset-top,0px)); gap:10px; }
  .topbar-actions{ gap:8px; }
  .notif-wrap{ position:static; }
  .notif-pop{ position:fixed; top:auto; inset-inline:10px; width:auto; }
  .avatar{ width:34px; height:34px; font-size:.8rem; }
  .radio-toggle{ width:38px; height:38px; }
  .radio-pop{ display:none !important; }
  .welcome-banner{ padding:18px 16px; }
  .welcome-date{ display:none; }
  .tools-grid{ grid-template-columns:repeat(2,1fr); gap:8px; }
  .tool-tile{ padding:13px 10px; }
  .tool-tile b{ font-size:.8rem; }
  .tool-tile span:last-child{ font-size:.66rem; }
  .kpi-grid{ grid-template-columns:1fr 1fr !important; gap:8px; }
  .kpi-card{ padding:12px; }
  .dash-priority, .dash-secondary{ grid-template-columns:1fr !important; }
  .panel-hot:first-child{ grid-column:auto !important; }
  .quiz-card, .media-card{ width:100%; }
  .settings-grid, .form-grid{ grid-template-columns:1fr !important; }
  .btn{ padding:11px 18px; }
  .mobile-tabbar{ inset-inline-start:10px; inset-inline-end:84px; height:62px; border-radius:999px; }
  .mobile-fab{ inset-inline-end:10px; width:62px; height:62px; }
  .radio-sheet{ padding:50px 20px calc(30px + env(safe-area-inset-bottom,0px)); }
  .rs-art{ width:min(200px,58vw); height:min(200px,58vw); }
}

/* ==========================================================================
   Auth — ورود / ثبت‌نام (شماره موبایل + OTP + آنبوردینگ)
   ========================================================================== */
/* صفحه‌ی اُت — قدش با --app-h (ارتفاع واقعی دیده‌شده از visualViewport) قفل می‌شه.
   نتیجه: کیبورد/نوار آدرس هیچ‌وقت صفحه رو اسکرول‌دار نمی‌کنه؛ کارتِ فعال خودش
   داخلش اسکرول می‌شه و اینپوت فوکوس‌شده همیشه توی دید می‌مونه.
   سنترینگ کاملاً با فلکس‌باکس و بدون هیچ padding داینامیک JS-ای انجام می‌شه —
   همین جلوگیری از حلقه‌ی بازخورد، فلیکِ موقع تاپ‌دن OTP رو از بین می‌بره. */
.auth-page{
  height:var(--app-h,100dvh); display:flex; align-items:center; justify-content:center;
  padding:28px 16px; position:relative; overflow:hidden;
}
.auth-stage{
  position:relative; z-index:1; width:100%; max-width:460px;
  height:100%; display:flex; flex-direction:column; justify-content:center;
}

/* کارت فعال — تنها ناحیه‌ی اسکرول‌شونده؛ با موس هم اسکرول می‌شه، نه کل صفحه.
   این ناحیه و والدش overflow:visible دارن تا پاپِ دراپ‌داون‌ها از قاب کارت
   بیرون بزنن و کامل دیده بشن (مشکل «یه ردیف دیده می‌شه» در گام ۲ آنبوردینگ). */
.auth-stage{ overflow:visible; }
.auth-card-active{
  min-height:0;
  max-height:100%;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  scrollbar-width:none;
}
.auth-card-active::-webkit-scrollbar{ display:none; }

/* پاپ دراپ‌داون: پایه‌ی بالای ۴۵px + اضافه‌ی فاصله تا ۲۶۰px.
   داخل اسکرول‌کننده، ۲۱۰px کامل همیشه دیده می‌شه. */
.auth-card-active .dd-pop{ top:auto; bottom:calc(100% + 8px); max-height:min(260px,calc(45px + (var(--vh,100vh) - 360px))); }

@media (prefers-reduced-motion: reduce){
  .otp-box{ transition:border-color .15s ease, box-shadow .15s ease; }
  .otp-box:focus{ transform:none; }
}

.auth-card{
  position:relative;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-xl); padding:36px 32px;
  animation:auth-in .45s cubic-bezier(.2,.8,.25,1);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.35);
}
@keyframes auth-in{ from{ opacity:0; transform:translateY(10px) scale(.985); } to{ opacity:1; transform:none; } }
.auth-card[hidden]{ display:none; }

.auth-brand{
  display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.05rem;
  margin-bottom:26px; color:var(--text);
}
.auth-brand .brand-mark{
  width:46px; height:46px;
}
.auth-card h1{ font-size:1.35rem; font-weight:800; margin:0 0 6px; }
.auth-sub{ color:var(--text-secondary); font-size:.86rem; margin:0 0 22px; line-height:1.9; }
.auth-sub b{ color:var(--text); }

.auth-form{ display:flex; flex-direction:column; gap:16px; }
.auth-form .field{ margin:0; }
.auth-form label{ display:block; font-size:.8rem; font-weight:600; color:var(--text-secondary); margin-bottom:8px; }
.auth-form .input{
  width:100%; box-sizing:border-box;
  background-color:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:12px 14px; color:var(--text); font-size:.95rem; font-family:inherit; outline:0;
  background-image:linear-gradient(90deg, var(--primary-hover), var(--primary));
  background-repeat:no-repeat;
  background-position:bottom;
  background-size:0% 2px;
  transition:border-color .2s ease, box-shadow .25s ease,
             background-size .35s cubic-bezier(.22,.61,.36,1), transform .2s ease;
}
.auth-form .input:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 4px var(--primary-soft), 0 2px 10px -4px rgba(124,58,237,.35);
  background-size:100% 2px;
  transform:translateY(-1px);
}
.field-err{
  display:flex; align-items:center; gap:6px;
  color:var(--error); font-size:.72rem; margin-top:7px;
  animation:auth-in .2s ease;
}
.field-err[hidden]{ display:none; }
@keyframes field-shake{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-5px); }
  40%{ transform:translateX(5px); }
  60%{ transform:translateX(-3px); }
  80%{ transform:translateX(3px); }
}
.input.invalid, .phone-field.invalid, .otp-box.invalid{
  border-color:var(--error) !important;
  box-shadow:0 0 0 4px var(--error-soft) !important;
  animation:field-shake .4s ease;
}
.phone-field:focus-within{ border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-soft); }

/* شماره موبایل — پیش‌شماره سمت چپ، مثل تکمیل شدن عدد */
.phone-field{
  display:flex; align-items:stretch; direction:ltr;
  background-color:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-md);
  overflow:hidden;
  background-image:linear-gradient(90deg, var(--primary-hover), var(--primary));
  background-repeat:no-repeat;
  background-position:bottom;
  background-size:0% 2px;
  transition:border-color .2s ease, box-shadow .25s ease,
             background-size .35s cubic-bezier(.22,.61,.36,1);
}
.phone-field:focus-within{
  border-color:var(--primary);
  box-shadow:0 0 0 4px var(--primary-soft), 0 2px 10px -4px rgba(124,58,237,.35);
  background-size:100% 2px;
}
.phone-field input{
  flex:1; min-width:0; border:0; background:transparent; outline:0;
  padding:12px 14px; color:var(--text); font-size:1.05rem; font-weight:600; letter-spacing:1px;
  font-family:inherit; text-align:left;
}
.phone-field input::placeholder{ color:var(--text-faint); font-weight:400; letter-spacing:0; }
.phone-prefix{
  display:flex; align-items:center; gap:6px; padding:0 14px;
  border-inline-end:1px solid var(--border);
  color:var(--text-secondary); font-size:.88rem; font-weight:700; white-space:nowrap;
  transition:color .2s ease, background-color .2s ease;
}
.phone-field:focus-within .phone-prefix{ color:var(--primary); background-color:var(--primary-soft); }

.btn-block{ width:100%; justify-content:center; padding-block:13px; font-size:.95rem; }
.auth-card .btn .icon{ width:17px; height:17px; }
.auth-foot{ text-align:center; font-size:.72rem; color:var(--text-faint); margin:18px 0 0; }
.auth-foot a{ color:var(--text-secondary); }

/* برگشت */
.auth-back{
  position:absolute; top:18px; inset-inline-start:18px;
  width:34px; height:34px; border-radius:var(--radius-full);
  border:1px solid var(--border); background:var(--surface-2); color:var(--text-secondary);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:color .15s ease, border-color .15s ease;
}
.auth-back:hover{ color:var(--primary); border-color:var(--primary); }
.auth-back .icon{ width:16px; height:16px; }

/* OTP */
.otp-row{ display:flex; gap:10px; justify-content:center; direction:ltr; }
.otp-box{
  width:48px; height:56px; text-align:center;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-md);
  color:var(--text); font-size:1.3rem; font-weight:800; font-family:inherit; outline:0;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.otp-box:focus{ border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); transform:translateY(-2px); }
.otp-box.filled{ border-color:var(--primary); background:var(--primary-soft); }
.otp-resend{ display:flex; align-items:center; justify-content:center; gap:8px; font-size:.76rem; color:var(--text-faint); }
.otp-resend .link{ font-size:.76rem; }

/* آنبوردینگ — نوار پیشرفت */
.auth-onboard{ padding-top:30px; }
.ob-progress{
  display:flex; align-items:center; gap:8px; margin-bottom:26px;
}
.obp-label{ font-size:.72rem; color:var(--text-faint); font-weight:600; margin-inline-end:4px; }
.obp-label b{ color:var(--primary); }
.obp-step{
  flex:1; height:5px; border-radius:99px; background:var(--surface-2);
  border:1px solid var(--border); position:relative; overflow:hidden;
  transition:border-color .3s ease;
}
.obp-step::after{
  content:""; position:absolute; inset:0; border-radius:99px;
  background:linear-gradient(90deg, var(--primary), var(--primary-hover));
  transform:scaleX(0); transform-origin:right;
  transition:transform .45s cubic-bezier(.2,.8,.25,1);
}
.obp-step.is-active{ border-color:var(--primary); }
.obp-step.is-active::after{ transform:scaleX(1); }
.obp-step.is-done::after{ transform:scaleX(1); }

.ob-pane h1{ font-size:1.25rem; }
.ob-nav{ display:flex; gap:10px; margin-top:4px; }
.ob-nav .btn-primary{ flex:1; }

/* دانشگاه قفل‌شده */
.uni-locked{
  display:flex; align-items:center; gap:10px;
  background:var(--primary-softer); border:1px dashed var(--primary);
  border-radius:var(--radius-md); padding:12px 14px;
}
.uni-locked .icon{ width:17px; height:17px; color:var(--primary); flex-shrink:0; }
.uni-locked span{ font-size:.82rem; font-weight:700; color:var(--text); flex:1; }
.uni-locked em{
  font-style:normal; font-size:.62rem; color:var(--primary);
  background:var(--primary-soft); border-radius:var(--radius-full); padding:2px 8px; white-space:nowrap;
}

/* دراپ‌داون سفارشی */
.dd{ position:relative; }
.dd-btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:12px 14px; color:var(--text); font-size:.92rem; font-family:inherit; cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.dd-btn:focus{ outline:0; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); }
.dd.open .dd-btn{ border-color:var(--primary); }
.dd-btn .dd-value{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dd-btn .dd-value.placeholder{ color:var(--text-faint); }
.dd-btn .icon{ width:16px; height:16px; color:var(--text-faint); flex-shrink:0; transition:transform .2s ease; }
.dd.open .dd-btn .icon{ transform:rotate(180deg); color:var(--primary); }
.dd-pop{
  position:absolute; top:calc(100% + 8px); inset-inline:0; z-index:90;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  box-shadow:var(--shadow-pop); overflow:hidden;
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.dd.open .dd-pop{ opacity:1; visibility:visible; transform:none; }
.dd-search{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px; border-bottom:1px solid var(--border); color:var(--text-faint);
}
.dd-search .icon{ width:14px; height:14px; }
.dd-search input{
  flex:1; border:0; background:transparent; outline:0; color:var(--text);
  font-size:.82rem; font-family:inherit; min-width:0;
}
.dd-list{ max-height:210px; overflow-y:auto; scrollbar-width:thin; padding:6px; }
.dd-opt{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:9px 10px; border-radius:var(--radius-sm); cursor:pointer;
  font-size:.84rem; color:var(--text-secondary);
  transition:background .12s ease, color .12s ease;
}
.dd-opt:hover{ background:var(--surface-2); color:var(--text); }
.dd-opt.selected{ background:var(--primary-soft); color:var(--primary); font-weight:700; }
.dd-opt .icon{ width:14px; height:14px; opacity:0; }
.dd-opt.selected .icon{ opacity:1; }
.dd-empty{ padding:14px 10px; text-align:center; font-size:.76rem; color:var(--text-faint); }

@media (max-width:560px){
  .auth-page{ padding:20px 14px; }
  .auth-card{ padding:28px 22px; }
  .otp-box{ width:42px; height:50px; }
}

/* ==========================================================================
   AI Chat Advanced Extensions (Artifacts, Web Search, Streaming, Modals)
   ========================================================================== */

/* Claude-like Artifact Cards */
.chat-artifact-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  padding: 12px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
}
.chat-artifact-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.12);
  transform: translateY(-1px);
}
.chat-artifact-info {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.chat-artifact-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chat-artifact-icon.is-docx { background: rgba(59, 130, 246, 0.12); color: #3b82f6; }
.chat-artifact-icon.is-pdf { background: rgba(239, 68, 68, 0.12); color: #ef4444; }
.chat-artifact-icon.is-code { background: rgba(16, 185, 129, 0.12); color: #10b981; }
.chat-artifact-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.chat-artifact-title {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-artifact-sub {
  font-size: 0.74rem;
  color: var(--text-muted);
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 2px;
}
.chat-artifact-badge {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--surface-3);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.chat-artifact-dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
  transition: all .15s ease;
  flex-shrink: 0;
}
.chat-artifact-dl-btn:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}
.chat-artifact-dl-btn .icon {
  width: 15px;
  height: 15px;
}

/* Web Search Grounding Badges */
.chat-search-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  margin-bottom: 8px;
  background: rgba(var(--primary-rgb), 0.08);
  color: var(--primary);
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 600;
}
.chat-search-badge .icon {
  width: 14px;
  height: 14px;
}
.chat-search-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.chat-source-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.72rem;
  color: var(--text-muted);
  text-decoration: none;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: all .15s ease;
}
.chat-source-chip:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(var(--primary-rgb), 0.04);
}
.chat-source-chip .icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* Regenerate Popover Dropdown */
.chat-retry-wrap {
  position: relative;
  display: inline-flex;
}
.chat-retry-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  inset-inline-start: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  border-radius: var(--radius-md);
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 4px;
  min-width: 200px;
  z-index: 100;
  animation: retryPop .16s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes retryPop {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.chat-retry-menu.open {
  display: flex;
}
.chat-retry-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  text-align: right;
  transition: background .12s ease, color .12s ease;
}
.chat-retry-item:hover {
  background: var(--surface-2);
  color: var(--primary);
}
.chat-retry-item .icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* Streaming Blinking Cursor */
.stream-cursor {
  display: inline-block;
  width: 8px;
  height: 16px;
  background: var(--primary);
  margin-inline-start: 4px;
  vertical-align: middle;
  border-radius: 2px;
  animation: streamBlink 0.75s ease-in-out infinite;
}
@keyframes streamBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Sidebar History Items & Pinning */
.chat-item-wrapper {
  position: relative;
}
.chat-item-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-inline-start: auto;
  flex-shrink: 0;
}
.chat-item-pin-btn, .chat-item-edit-btn {
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all .15s ease;
}
.chat-item-wrapper:hover .chat-item-pin-btn,
.chat-item-wrapper:hover .chat-item-edit-btn {
  opacity: 0.65;
}
.chat-item-pin-btn:hover, .chat-item-edit-btn:hover {
  opacity: 1 !important;
  color: var(--primary);
  background: var(--surface-2);
}
.chat-item-wrapper.is-pinned .chat-item-pin-btn {
  opacity: 1;
  color: var(--primary);
}
.chat-item-pin-indicator {
  color: var(--primary);
  display: inline-flex;
  margin-inline-end: 4px;
}
.chat-item-pin-indicator .icon {
  width: 13px;
  height: 13px;
}
.chat-title-inline-input {
  width: 100%;
  padding: 4px 8px;
  font-size: 0.82rem;
  font-family: inherit;
  border: 1px solid var(--primary);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
  outline: none;
}

/* Top bar editable title and actions */
.chat-top-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.chat-top-title-edit-btn, .chat-top-pin-btn {
  opacity: 0.6;
  transition: opacity .15s, color .15s;
}
.chat-top-title-edit-btn:hover, .chat-top-pin-btn:hover {
  opacity: 1;
  color: var(--primary);
}
.chat-top-pin-btn.is-pinned {
  opacity: 1;
  color: var(--primary);
}

/* KaTeX LaTeX Equations */
.katex-display {
  direction: ltr !important;
  text-align: center;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 0;
  margin: 10px 0;
}
.katex {
  direction: ltr !important;
  font-size: 1.05em;
}

/* Confirmation Modal for Delete Chat */
.chat-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 12, 0.55);
  backdrop-filter: blur(4px);
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility 0s linear .2s;
}
.chat-modal-backdrop.open {
  opacity: 1;
  visibility: visible;
  transition: opacity .2s ease, visibility 0s;
}
.chat-modal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
  width: 90%;
  max-width: 400px;
  padding: 24px;
  transform: scale(0.94);
  transition: transform .2s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: center;
}
.chat-modal-backdrop.open .chat-modal-box {
  transform: scale(1);
}
.chat-modal-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-modal-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text);
}
.chat-modal-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 20px;
}
.chat-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.chat-modal-btn {
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .15s ease;
}
.chat-modal-btn-cancel {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}
.chat-modal-btn-cancel:hover {
  background: var(--surface-3);
}
.chat-modal-btn-del {
  background: #ef4444;
  color: #fff;
}
.chat-modal-btn-del:hover {
  background: #dc2626;
}

/* Markdown Tables (جداول استاندارد مارک‌داون) */
.chat-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin: 16px 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  -webkit-overflow-scrolling: touch;
  background: var(--surface);
}
.chat-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
  text-align: right;
  direction: rtl;
}
.chat-table th {
  background: var(--surface-2);
  color: var(--text);
  font-weight: 700;
  padding: 11px 14px;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
.chat-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  line-height: 1.55;
}
.chat-table tbody tr:nth-child(even) {
  background: rgba(var(--primary-rgb), 0.02);
}
.chat-table tbody tr:hover {
  background: rgba(var(--primary-rgb), 0.06);
}
.chat-table tbody tr:last-child td {
  border-bottom: none;
}
@media (max-width: 600px) {
  .chat-table th, .chat-table td {
    padding: 8px 10px;
    font-size: 0.78rem;
  }
}