/* ============================================================
   هامون — سیستم طراحی پوسته‌ی موبایل
   ============================================================ */

/* ---- فونت وزیرمتن (محلی، بدون CDN) ---- */
@font-face{
  font-family:'Vazirmatn'; font-weight:400; font-style:normal; font-display:swap;
  src:url("../fonts/vazirmatn/Vazirmatn-Regular.cdc140628f11.woff2") format('woff2');
}
@font-face{
  font-family:'Vazirmatn'; font-weight:500; font-style:normal; font-display:swap;
  src:url("../fonts/vazirmatn/Vazirmatn-Medium.dd2193b32cbe.woff2") format('woff2');
}
@font-face{
  font-family:'Vazirmatn'; font-weight:600; font-style:normal; font-display:swap;
  src:url("../fonts/vazirmatn/Vazirmatn-SemiBold.9260c1927872.woff2") format('woff2');
}
@font-face{
  font-family:'Vazirmatn'; font-weight:700; font-style:normal; font-display:swap;
  src:url("../fonts/vazirmatn/Vazirmatn-Bold.7958481fe611.woff2") format('woff2');
}

:root{
  --ink:#1f2335; --muted:#8a90a6; --line:#edeef5; --bg:#f5f6fb; --card:#fff;
  --primary:#6d5dfc; --primary-soft:#efeefe;
  --green:#12b886; --green-soft:#e6f7f0; --red:#f0455f; --red-soft:#fdecef;
  --amber:#f5a524; --amber-soft:#fef3e0; --blue:#3b82f6; --blue-soft:#e9f1fe;
  --header-h:60px; --tabbar-h:66px; --app-max:540px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;margin:0;}
body{
  font-family:'Vazirmatn','Segoe UI',Tahoma,sans-serif;
  color:var(--ink); background:#e9ebf3; font-size:14px; line-height:1.75;
}

/* ---- پوسته‌ی اپ: موبایل‌محور، روی دسکتاپ ستون وسط‌چین ---- */
.app{
  position:relative; width:100%; max-width:var(--app-max); min-height:100vh;
  margin:0 auto; background:var(--bg);
  box-shadow:0 0 60px -10px rgba(20,23,45,.18);
  display:flex; flex-direction:column;
}
@media(min-width:560px){ .app{ min-height:100vh; } }

/* هدر بالای اپ */
.app-header{
  position:sticky; top:0; z-index:20; height:var(--header-h);
  background:#fff; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:12px; padding:0 16px; flex-shrink:0;
}
.app-header h1{font-size:18px;font-weight:800;flex:1;margin:0;}
.app-header .h-actions{display:flex;gap:7px;}
.hbtn{width:38px;height:38px;border-radius:12px;border:none;background:var(--bg);
  color:var(--muted);display:grid;place-items:center;cursor:pointer;}
.hbtn svg{width:19px;height:19px;}

/* ناحیه‌ی محتوا */
.app-main{flex:1;overflow-y:auto;padding-bottom:calc(var(--tabbar-h) + 8px);}
.app-main.no-tabbar{padding-bottom:0;}

/* ---- نوار پایین ---- */
.tabbar{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:var(--app-max); height:var(--tabbar-h);
  background:#fff; border-top:1px solid var(--line);
  display:flex; padding:8px 6px 14px; z-index:30;
}
.tab{flex:1;border:none;background:none;cursor:pointer;text-decoration:none;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  color:var(--muted);padding:5px 0;position:relative;}
.tab svg{width:24px;height:24px;}
.tab span{font-size:10.5px;font-weight:600;}
.tab.on{color:var(--primary);}
.tab .tbadge{position:absolute;top:0;left:50%;margin-left:4px;background:var(--red);
  color:#fff;font-size:9px;font-weight:700;min-width:16px;height:16px;border-radius:9px;
  display:grid;place-items:center;padding:0 4px;}

/* ---- نشان‌های رنگی نوع/وضعیت ---- */
.pill-red{background:var(--red-soft);color:var(--red);} .bg-red{background:var(--red-soft);color:var(--red);}
.pill-green{background:var(--green-soft);color:var(--green);} .bg-green{background:var(--green-soft);color:var(--green);}
.pill-blue{background:var(--blue-soft);color:var(--blue);} .bg-blue{background:var(--blue-soft);color:var(--blue);}
.pill-amber{background:var(--amber-soft);color:var(--amber);} .bg-amber{background:var(--amber-soft);color:var(--amber);}

/* ---- اجزای عمومی ---- */
.section-label{font-size:11.5px;color:var(--muted);font-weight:600;padding:14px 18px 4px;}
.empty-state{padding:48px 28px;text-align:center;color:var(--muted);}
.empty-state .ic{width:64px;height:64px;border-radius:20px;background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;margin:0 auto 16px;color:var(--primary);}
.empty-state .ic svg{width:30px;height:30px;}
.empty-state h3{font-size:15px;font-weight:700;color:var(--ink);margin:0 0 6px;}
.empty-state p{font-size:12.5px;margin:0;line-height:1.8;}
.phase-tag{display:inline-block;margin-top:14px;font-size:11px;font-weight:700;
  background:var(--primary-soft);color:var(--primary);padding:4px 11px;border-radius:9px;}

/* لیست گفتگو */
.chat-item{display:flex;gap:13px;align-items:center;padding:12px 16px;text-decoration:none;color:inherit;}
.chat-item:active{background:#fff;}
.gicon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;flex-shrink:0;}
.gicon svg{width:25px;height:25px;}
.ci-mid{flex:1;min-width:0;}
.ci-top{display:flex;align-items:center;gap:7px;}
.ci-top b{font-size:15px;font-weight:700;}
.gtype{font-size:10px;font-weight:700;padding:2px 8px;border-radius:7px;}
.ci-last{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px;}
.ci-end{display:flex;flex-direction:column;align-items:flex-start;gap:6px;}
.ci-time{font-size:11px;color:var(--muted);}
.badge{background:var(--primary);color:#fff;font-size:11px;font-weight:700;min-width:21px;height:21px;
  border-radius:11px;display:grid;place-items:center;padding:0 6px;}
.divider{height:1px;background:var(--line);margin:0 16px 0 81px;}

/* کارت گزارش (نمایشی) */
.rep-body{padding:14px 16px 22px;}
.rcard{background:#fff;border-radius:18px;padding:16px;margin-bottom:14px;border:1px solid var(--line);
  box-shadow:0 3px 10px -4px rgba(28,33,64,.08);}
.rc-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.rc-ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex-shrink:0;}
.rc-ic svg{width:19px;height:19px;}
.rc-head .rt{font-size:14.5px;font-weight:700;flex:1;}
.minis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.mini{background:var(--bg);border-radius:13px;padding:12px;}
.mini .n{font-size:23px;font-weight:800;line-height:1;}
.mini .l{font-size:11.5px;color:var(--muted);margin-top:4px;}

/* ============================================================
   صفحات احراز هویت (ورود / کد)
   ============================================================ */
.auth-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:28px 22px;background:radial-gradient(circle at 30% 0%,#2a2f55,#12152b 65%);}
.auth-card{background:#fff;border-radius:26px;width:100%;max-width:380px;padding:30px 26px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.5);}
.auth-logo{width:64px;height:64px;border-radius:20px;background:linear-gradient(135deg,#7c6cff,#5b9dff);
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:28px;margin:0 auto 18px;
  box-shadow:0 12px 26px -6px rgba(124,108,255,.6);}
.auth-card h2{font-size:20px;font-weight:800;text-align:center;margin:0 0 4px;}
.auth-card .sub{font-size:12.5px;color:var(--muted);text-align:center;margin:0 0 22px;line-height:1.8;}
.auth-card .form-label{font-size:12.5px;font-weight:600;margin-bottom:7px;display:block;}
.ltr-input{direction:ltr;letter-spacing:.5px;}
.otp-input{letter-spacing:10px;font-weight:800;font-size:24px;}
.btn-primary-lg{width:100%;border:none;border-radius:14px;padding:14px;font-family:inherit;
  font-size:15px;font-weight:800;cursor:pointer;background:var(--primary);color:#fff;margin-top:18px;
  box-shadow:0 8px 20px -6px rgba(109,93,252,.5);}
.btn-primary-lg:hover{background:#5b4cf0;}
.auth-back{display:block;text-align:center;margin-top:16px;font-size:12.5px;color:var(--muted);text-decoration:none;}
.auth-msg{border-radius:12px;padding:10px 14px;font-size:12.5px;margin-bottom:16px;}
.auth-msg.info{background:var(--blue-soft);color:var(--blue);}
.auth-msg.error{background:var(--red-soft);color:var(--red);}
.auth-msg.success{background:var(--green-soft);color:var(--green);}
.auth-foot{margin-top:18px;text-align:center;font-size:11px;color:#9298c4;}
.dev-hint{margin-top:14px;background:var(--amber-soft);color:#9a6a06;border-radius:12px;
  padding:10px 13px;font-size:11.5px;line-height:1.8;}

/* فرم‌های Bootstrap-سازگار سبک */
.form-control{width:100%;border:1.5px solid var(--line);border-radius:13px;padding:13px 15px;
  font-family:inherit;font-size:14px;outline:none;color:var(--ink);}
.form-control:focus{border-color:var(--primary);}
.form-control-lg{padding:15px;font-size:16px;}
.text-center{text-align:center;}
.invalid-feedback{display:block;color:var(--red);font-size:11.5px;margin-top:6px;}

::-webkit-scrollbar{width:0;height:0;}

/* ============================================================
   مرحله ۱ — گفتگو، پیام‌ها، فرم‌ها
   ============================================================ */
.bg-primary{background:var(--primary-soft);color:var(--primary);}
.pill-primary{background:var(--primary-soft);color:var(--primary);}

/* عنوان هدر گفتگو */
.cv-title{flex:1;min-width:0;}
.cv-title b{font-size:15px;font-weight:700;display:flex;align-items:center;gap:7px;}
.cv-title small{font-size:11px;color:var(--muted);}
.app-header .gicon{width:40px;height:40px;border-radius:12px;}
.app-header .gicon svg{width:20px;height:20px;}

/* ناحیه‌ی پیام‌ها */
.convo-main{padding-bottom:74px;background:var(--bg);}
.msgs{padding:16px 14px;display:flex;flex-direction:column;gap:14px;min-height:100%;}
.convo-empty{align-self:center;margin-top:30px;color:var(--muted);font-size:12.5px;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 18px;text-align:center;}
.row{display:flex;gap:9px;max-width:88%;}
.row.me{align-self:flex-start;flex-direction:row-reverse;}
.ava{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  font-size:11px;font-weight:700;color:#fff;flex-shrink:0;align-self:flex-end;}
.bwrap{display:flex;flex-direction:column;gap:4px;min-width:0;}
.bwrap.end{align-items:flex-end;}
.sender{font-size:11.5px;font-weight:600;color:var(--primary);padding:0 4px;}
.bubble{background:#fff;padding:10px 13px;border-radius:15px;border-bottom-right-radius:4px;
  font-size:13.5px;box-shadow:0 1px 3px rgba(28,33,64,.07);line-height:1.8;word-break:break-word;}
.row.me .bubble{background:var(--primary);color:#fff;border-bottom-right-radius:15px;border-bottom-left-radius:4px;}
.mention{background:rgba(109,93,252,.16);color:#6d5dfc;font-weight:600;padding:1px 6px;border-radius:6px;}
.row.me .mention{background:rgba(255,255,255,.24);color:#fff;}
.time{font-size:10.5px;color:var(--muted);padding:0 4px;}

/* نوار نوشتن پیام */
.composer{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:var(--app-max);
  background:#fff;border-top:1px solid var(--line);display:flex;align-items:center;gap:9px;
  padding:10px 12px 14px;z-index:30;}
.comp-btn{width:42px;height:42px;border-radius:13px;border:none;background:var(--bg);color:var(--muted);
  display:grid;place-items:center;cursor:pointer;flex-shrink:0;}
.comp-btn svg{width:20px;height:20px;}
.cinput{flex:1;background:var(--bg);border-radius:14px;border:none;outline:none;font-family:inherit;
  font-size:13.5px;padding:12px 15px;color:var(--ink);}
.send{width:46px;height:46px;border-radius:14px;border:none;background:var(--primary);color:#fff;
  display:grid;place-items:center;cursor:pointer;flex-shrink:0;box-shadow:0 5px 14px -4px rgba(109,93,252,.5);}
.send:active{transform:scale(.95);}
.send svg{width:20px;height:20px;}

/* صفحات فرم (ساخت گروه / اعضا) */
.form-main{padding-bottom:24px;}
.form-page{padding:16px;}
.form-card{background:#fff;border-radius:18px;padding:18px;border:1px solid var(--line);
  box-shadow:0 3px 10px -4px rgba(28,33,64,.08);}
.form-card-title{font-size:15px;font-weight:800;margin-bottom:14px;}
.form-label{font-size:12.5px;font-weight:600;margin-bottom:7px;display:block;}
.form-label.mt{margin-top:16px;}
.field-hint{font-size:11px;color:var(--muted);margin-top:6px;line-height:1.7;}
.check-row{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;cursor:pointer;}
.check-row input{width:18px;height:18px;accent-color:var(--primary);}
.group-banner{background:#fff;border-radius:18px;padding:14px;display:flex;align-items:center;gap:13px;
  border:1px solid var(--line);margin-bottom:14px;}
.group-banner b{font-size:15px;font-weight:800;display:block;}
.group-banner small{font-size:12px;color:var(--muted);}

/* لیست اعضا */
.member-list{background:#fff;border-radius:18px;border:1px solid var(--line);overflow:hidden;}
.member-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line);}
.member-item:last-child{border:none;}
.m-ava{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;color:#fff;
  font-weight:700;font-size:12px;flex-shrink:0;}
.m-info{flex:1;min-width:0;}
.m-info b{font-size:13.5px;font-weight:600;display:block;}
.m-info small{font-size:11.5px;color:var(--muted);}
.m-role{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:8px;white-space:nowrap;}
.m-remove{width:32px;height:32px;border-radius:10px;border:none;background:var(--red-soft);color:var(--red);
  display:grid;place-items:center;cursor:pointer;flex-shrink:0;}
.m-remove svg{width:15px;height:15px;}

/* دکمه‌ی شناور (ساخت گروه — فقط مدیر) */
.fab{position:fixed;bottom:calc(var(--tabbar-h) + 16px);z-index:31;
  left:calc(50% - var(--app-max)/2 + 18px);
  width:56px;height:56px;border-radius:18px;background:var(--primary);color:#fff;
  display:grid;place-items:center;cursor:pointer;text-decoration:none;
  box-shadow:0 10px 24px -6px rgba(109,93,252,.6);}
.fab svg{width:26px;height:26px;}
@media(max-width:560px){ .fab{ left:18px; } }

/* ============================================================
   مرحله ۱.۵ و ۱.۶ — ضمیمه، انتخاب‌گر منشن، نشان منشن
   ============================================================ */
/* نشان منشن خوانده‌نشده در لیست گفتگوها */
.badge-at{background:var(--amber);}

/* ضمیمه در حباب پیام */
.att-img{display:block;margin-top:2px;}
.att-img img{max-width:230px;max-height:300px;border-radius:13px;display:block;}
.att-file{display:flex;align-items:center;gap:10px;margin-top:2px;background:rgba(31,35,53,.07);border:1px solid var(--line);
  border-radius:13px;padding:9px 12px;text-decoration:none;color:inherit;max-width:260px;}
.row.me .att-file{background:var(--primary);color:#fff;}
.af-ic{width:34px;height:34px;border-radius:9px;background:#fff;color:var(--primary);
  display:grid;place-items:center;flex-shrink:0;}
.row.me .af-ic{background:rgba(255,255,255,.25);color:#fff;}
.af-ic svg{width:18px;height:18px;}
.af-meta{display:flex;flex-direction:column;min-width:0;}
.af-name{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;}
.af-size{font-size:10.5px;color:var(--muted);}
.row.me .af-size{color:rgba(255,255,255,.85);}

/* محفظه‌ی نوار نوشتن (با پاپ‌آپ‌های بالای آن) */
.composer-wrap{position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:var(--app-max);z-index:30;}
.composer{position:static;left:auto;transform:none;}

/* انتخاب‌گر منشن */
.mention-pop{background:#fff;border:1px solid var(--line);border-bottom:none;
  border-radius:14px 14px 0 0;max-height:220px;overflow-y:auto;
  box-shadow:0 -10px 24px -12px rgba(0,0,0,.2);}
.mp-item{display:flex;align-items:center;gap:10px;padding:9px 14px;cursor:pointer;}
.mp-item.active,.mp-item:hover{background:var(--bg);}
.mp-ava{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  color:#fff;font-size:10px;font-weight:700;flex-shrink:0;}
.mp-name{font-size:13px;font-weight:600;}

/* پیش‌نمایش ضمیمه */
.att-preview{background:#fff;border-top:1px solid var(--line);display:flex;align-items:center;gap:11px;padding:10px 12px;}
.ap-thumb{width:42px;height:42px;border-radius:11px;object-fit:cover;flex-shrink:0;background:var(--bg);}
.ap-fileic{display:grid;place-items:center;color:var(--primary);}
.ap-fileic svg{width:20px;height:20px;}
.ap-name{flex:1;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ap-x{width:30px;height:30px;border-radius:9px;border:none;background:var(--red-soft);color:var(--red);
  display:grid;place-items:center;cursor:pointer;flex-shrink:0;}
.ap-x svg{width:15px;height:15px;}

/* ============================================================
   مرحله ۲ (بخش اول) — خوانده‌نشده + نشانگر تایپ
   ============================================================ */
.ci-badges{display:flex;align-items:center;gap:5px;}
.typing-bar{background:#fff;border-top:1px solid var(--line);padding:7px 16px;
  font-size:11.5px;color:var(--primary);font-weight:600;}

/* ============================================================
   مرحله ۲ (بخش دوم) — رسید «دیده‌شد» + حضور
   ============================================================ */
.ck{margin-right:3px;font-size:11px;color:var(--muted);}
.ck.seen{color:var(--primary);}
#onlineCount{color:var(--green);font-weight:600;}

/* ============================================================
   مرحله ۳ — وظایف و گردش‌کار
   ============================================================ */
.pill-muted{background:#eef0f6;color:var(--muted);}
.bg-muted{background:#eef0f6;color:var(--muted);}

/* کارت وظیفه در گفتگو */
.task-card{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;
  border-right:4px solid var(--muted);padding:11px 13px;text-decoration:none;color:inherit;
  max-width:300px;box-shadow:0 1px 3px rgba(28,33,64,.07);}
.pri-muted{border-right-color:var(--muted);}
.pri-blue{border-right-color:var(--blue);}
.pri-amber{border-right-color:var(--amber);}
.pri-red{border-right-color:var(--red);}
.pri-green{border-right-color:var(--green);}
.tc-head{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px;}
.tc-ic{color:var(--primary);flex-shrink:0;}
.tc-ic svg{width:18px;height:18px;}
.tc-title{font-size:13.5px;font-weight:700;line-height:1.6;}
.tc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.tc-meta>span[class^="pill-"],.tc-status{font-size:10px;font-weight:700;padding:2px 8px;border-radius:7px;}
.tc-sub{font-size:11px;color:var(--muted);}

/* صفحه‌ی جزئیات وظیفه */
.task-detail{background:#fff;border:1px solid var(--line);border-radius:18px;
  border-right:4px solid var(--muted);padding:18px;margin-bottom:14px;
  box-shadow:0 3px 10px -4px rgba(28,33,64,.08);}
.td-title{font-size:17px;font-weight:800;margin-bottom:10px;line-height:1.6;}
.td-badges{display:flex;gap:7px;margin-bottom:12px;flex-wrap:wrap;}
.td-badges span{font-size:11px;font-weight:700;padding:3px 10px;border-radius:8px;}
.td-desc{font-size:13px;line-height:1.9;color:#3a3f55;margin-bottom:14px;
  background:var(--bg);border-radius:12px;padding:11px 13px;}
.td-rows{display:flex;flex-direction:column;gap:9px;}
.td-row{display:flex;justify-content:space-between;font-size:12.5px;}
.td-row span{color:var(--muted);}
.td-row b{font-weight:600;}
.td-actions{display:flex;flex-wrap:wrap;gap:8px;}
.act-btn{border:none;border-radius:11px;padding:10px 16px;font-family:inherit;font-size:13px;
  font-weight:700;cursor:pointer;color:#fff;}
.act-btn:active{transform:scale(.97);}
.act-blue{background:var(--blue);} .act-green{background:var(--green);}
.act-red{background:var(--red);} .act-muted{background:var(--muted);} .act-amber{background:var(--amber);}
.td-note{font-size:12px;color:var(--muted);background:var(--bg);border-radius:12px;
  padding:11px 14px;margin-bottom:14px;}

/* تاریخچه‌ی وضعیت */
.log-list{background:#fff;border:1px solid var(--line);border-radius:16px;padding:8px 14px;}
.log-item{display:flex;gap:11px;padding:9px 0;}
.log-dot{width:12px;height:12px;border-radius:50%;margin-top:4px;flex-shrink:0;}
.log-dot.bg-green{background:var(--green);}
.log-dot.bg-red{background:var(--red);}
.log-dot.bg-blue{background:var(--blue);}
.log-dot.bg-amber{background:var(--amber);}
.log-body{flex:1;min-width:0;}
.log-line{font-size:13px;}
.log-line b{font-weight:700;}
.log-note{font-size:12px;color:#3a3f55;margin-top:3px;}
.log-time{font-size:11px;color:var(--muted);margin-top:3px;}

/* ============================================================
   مرحله ۴ — ارجاع (Referral)
   ============================================================ */
.btn-secondary{display:inline-block;border:1.5px solid var(--line);border-radius:12px;
  padding:11px 16px;font-family:inherit;font-size:13px;font-weight:700;color:var(--primary);
  background:#fff;text-decoration:none;cursor:pointer;margin-bottom:14px;}
.btn-secondary:hover{background:var(--primary-soft);}
.ref-item{padding:10px 0;border-bottom:1px solid var(--line);font-size:12.5px;}
.ref-item:last-child{border:none;}
.ref-link{display:inline-block;margin-top:5px;font-size:12px;color:var(--primary);
  text-decoration:none;font-weight:600;}

/* ============================================================
   مرحله ۵ — کارتابل
   ============================================================ */
.kt-item{display:flex;align-items:center;gap:10px;padding:13px 16px;text-decoration:none;
  color:inherit;border-bottom:1px solid var(--line);}
.kt-item:active{background:#fff;}
.kt-main{flex:1;min-width:0;}
.kt-title{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.kt-sub{font-size:11.5px;color:var(--muted);margin-top:3px;}
.kt-badges{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0;}
.kt-badges span{font-size:10px;font-weight:700;padding:2px 8px;border-radius:7px;}

/* ============================================================
   مرحله ۵ — اعلان‌ها
   ============================================================ */
.bell{position:relative;}
.bell-badge{position:absolute;top:-2px;left:-2px;background:var(--red);color:#fff;
  font-size:9px;font-weight:700;min-width:16px;height:16px;border-radius:9px;
  display:grid;place-items:center;padding:0 4px;}
.notif-list{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;}
.notif-item{display:flex;gap:11px;align-items:flex-start;padding:13px 15px;
  border-bottom:1px solid var(--line);text-decoration:none;color:inherit;}
.notif-item:last-child{border:none;}
.notif-item.unread{background:var(--primary-soft);}
.notif-dot{width:9px;height:9px;border-radius:50%;margin-top:6px;flex-shrink:0;background:var(--muted);}
.notif-dot.bg-primary{background:var(--primary);}
.notif-dot.bg-blue{background:var(--blue);}
.notif-dot.bg-amber{background:var(--amber);}
.notif-dot.bg-green{background:var(--green);}
.notif-body{flex:1;min-width:0;}
.notif-text{font-size:13px;line-height:1.7;}
.notif-time{font-size:11px;color:var(--muted);margin-top:3px;}

/* ============================================================
   مرحله ۶ — گزارش‌ها
   ============================================================ */
.stbar{display:flex;height:10px;border-radius:6px;overflow:hidden;margin:14px 0 12px;background:var(--bg);}
.stbar-seg{display:block;min-width:3px;}
.stbar-seg.bg-amber{background:var(--amber);}
.stbar-seg.bg-blue{background:var(--blue);}
.stbar-seg.bg-green{background:var(--green);}
.stbar-seg.bg-red{background:var(--red);}
.stbar-seg.bg-muted{background:var(--muted);}
.stlegend{display:flex;flex-wrap:wrap;gap:10px;}
.stleg{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);}
.stleg .dot{width:8px;height:8px;border-radius:50%;background:var(--muted);}
.stleg .dot.bg-amber{background:var(--amber);}
.stleg .dot.bg-blue{background:var(--blue);}
.stleg .dot.bg-green{background:var(--green);}
.stleg .dot.bg-red{background:var(--red);}
.stleg .dot.bg-muted{background:var(--muted);}
.grow{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);}
.grow:last-child{border:none;}
.grow-name{font-size:13px;font-weight:600;}
.grow-stats{display:flex;gap:6px;}
.grow-stats span{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:8px;}
.orow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;
  border-bottom:1px solid var(--line);text-decoration:none;color:inherit;}
.orow:last-child{border:none;}
.orow-main{flex:1;min-width:0;}
.orow-title{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.orow-sub{font-size:11px;color:var(--muted);margin-top:2px;}
.orow-due{font-size:11px;font-weight:700;color:var(--red);white-space:nowrap;}
.rep-empty{font-size:12.5px;color:var(--muted);padding:6px 2px;}

/* ============================================================
   فوروارد پیام (مکمل مرحله ۴)
   ============================================================ */
.fwd-btn{display:inline-flex;align-items:center;color:var(--muted);opacity:.55;
  margin-left:6px;vertical-align:middle;}
.fwd-btn svg{width:13px;height:13px;}
.fwd-btn:active{opacity:1;}
.fwd-preview{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:14px;}
.fwd-pv-label{font-size:11px;color:var(--muted);margin-bottom:6px;}
.fwd-pv-from{font-size:12px;font-weight:600;color:var(--primary);}
.fwd-pv-body{font-size:13px;line-height:1.8;color:#3a3f55;margin-top:7px;
  background:var(--bg);border-radius:10px;padding:9px 12px;white-space:pre-wrap;word-break:break-word;}
.fwd-pv-att{font-size:11.5px;color:var(--muted);margin-top:7px;}

/* ============================================================
   مرحله ۸ — جست‌وجو، بایگانی، «بیشتر»
   ============================================================ */
.search-page{padding:14px 16px;}
.search-bar{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:6px 10px 6px 14px;margin-bottom:8px;}
.sb-ic{color:var(--muted);display:grid;place-items:center;}
.sb-ic svg{width:18px;height:18px;}
.search-bar input{flex:1;border:none;outline:none;font-family:inherit;font-size:14px;
  background:transparent;color:var(--ink);}
.search-bar button{border:none;background:var(--primary);color:#fff;font-family:inherit;
  font-size:12.5px;font-weight:700;border-radius:10px;padding:8px 14px;cursor:pointer;}
.srow{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:12px 14px;margin-bottom:8px;text-decoration:none;color:inherit;}
.srow-top{font-size:11.5px;color:var(--primary);font-weight:600;}
.srow-body{font-size:13px;line-height:1.8;margin-top:4px;word-break:break-word;}
.srow-time{font-size:10.5px;color:var(--muted);margin-top:5px;}
.more-card{background:#fff;border-radius:18px;border:1px solid var(--line);overflow:hidden;margin-top:14px;}
.more-link{display:flex;align-items:center;gap:13px;padding:14px;text-decoration:none;color:inherit;
  border-bottom:1px solid var(--line);}
.more-link:last-child{border-bottom:none;}
.ml-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex-shrink:0;}
.ml-ic svg{width:20px;height:20px;}
.ml-label{flex:1;font-size:14px;font-weight:600;}
.ml-chev{width:18px;height:18px;color:var(--muted);}

/* ============================================================
   رفرش بصری + عکس آواتار + پروفایل + تقویم شمسی
   ============================================================ */

/* عکس در آواتارها */
.ava img, .m-ava img, .mp-ava img, .pc-ava img, .pa-ava img{
  width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block;}

/* زیرعنوان نام‌کاربری در انتخاب‌گر منشن */
.mp-un{font-size:11px;color:var(--muted);font-weight:600;}

/* کارت پروفایل در «بیشتر» */
.profile-card{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;
  background:#fff;border:1px solid var(--line);border-radius:20px;padding:16px;
  box-shadow:0 10px 30px -18px rgba(31,35,53,.18);}
.pc-ava{width:58px;height:58px;border-radius:18px;flex-shrink:0;overflow:hidden;
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:20px;
  background:linear-gradient(135deg,#7c6cff,#5b9dff);}
.pc-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.pc-info b{font-size:16px;font-weight:800;}
.pc-un{font-size:12px;color:var(--primary);font-weight:700;}
.pc-info small{font-size:12px;color:var(--muted);}
.pc-role{align-self:flex-start;margin-top:4px;font-size:10.5px;font-weight:700;
  background:var(--primary-soft);color:var(--primary);padding:3px 9px;border-radius:8px;}

/* صفحه‌ی پروفایل */
.pa-row{display:flex;align-items:center;gap:16px;margin-bottom:6px;}
.pa-ava{width:84px;height:84px;border-radius:24px;flex-shrink:0;overflow:hidden;
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:28px;}
.pa-side{display:flex;flex-direction:column;gap:8px;align-items:flex-start;}
.pa-pick{cursor:pointer;margin:0;}
.pa-remove{font-size:12px;color:var(--red);display:flex;align-items:center;gap:6px;cursor:pointer;}
.field-hint{font-size:11.5px;color:var(--muted);margin-top:6px;line-height:1.7;}

/* تقویم شمسی */
.jdp{position:absolute;z-index:1000;width:264px;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:10px;box-shadow:0 24px 60px -20px rgba(31,35,53,.4);font-family:inherit;}
.jdp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.jdp-title{font-size:14px;font-weight:800;color:var(--ink);}
.jdp-nav{width:32px;height:32px;border:none;background:var(--bg);border-radius:10px;cursor:pointer;
  display:grid;place-items:center;color:var(--ink);}
.jdp-nav svg{width:18px;height:18px;}
.jdp-nav:hover{background:var(--primary-soft);color:var(--primary);}
.jdp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.jdp-wd{text-align:center;font-size:11px;font-weight:700;color:var(--muted);padding:4px 0;}
.jdp-day{text-align:center;font-size:13px;padding:7px 0;border-radius:9px;cursor:pointer;
  color:var(--ink);user-select:none;}
.jdp-day:hover{background:var(--primary-soft);color:var(--primary);}
.jdp-day.empty,.jdp-day.empty:hover{background:transparent;cursor:default;}
.jdp-day.today{box-shadow:inset 0 0 0 1.5px var(--primary);color:var(--primary);font-weight:700;}
.jdp-day.selected{background:var(--primary);color:#fff;font-weight:700;}
.jdp-foot{margin-top:8px;text-align:center;}
.jdp-today{border:none;background:var(--primary-soft);color:var(--primary);font-family:inherit;
  font-size:12px;font-weight:700;border-radius:10px;padding:7px 16px;cursor:pointer;}

/* ---- رفرش بصری سراسری ---- */
body{background:linear-gradient(180deg,#eef0fb 0%,var(--bg) 220px);}
.app-header{box-shadow:0 1px 0 var(--line),0 10px 24px -22px rgba(31,35,53,.5);border-bottom:none;}
.btn-primary-lg,.send{background:linear-gradient(135deg,#7c6cff,#6d5dfc 60%,#5b9dff)!important;
  box-shadow:0 12px 26px -12px rgba(109,93,252,.7);}
.btn-primary-lg:active,.send:active{transform:translateY(1px);}
.tab{position:relative;}
.tab.on::before{content:"";position:absolute;top:0;width:26px;height:3px;
  border-radius:0 0 4px 4px;background:var(--primary);}
.tab.on svg{transform:translateY(-1px);}
.chat-item,.rcard,.form-card{box-shadow:0 10px 30px -22px rgba(31,35,53,.22);}
.form-control:focus,.cinput:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);}

/* ---- چیدمان چت به سبک تلگرام ---- */
.msgs{gap:2px;}
.row{gap:8px;max-width:85%;align-items:flex-end;align-self:flex-end;flex-direction:row-reverse;}
.row.me{align-self:flex-start;flex-direction:row;}
.row.me .ava{display:none;}
.row.grp-start{margin-top:13px;}
.ava-spacer{visibility:hidden;}

/* ---- منوی هر کاربر در «مدیریت کاربران» ---- */
.u-row>summary{list-style:none;cursor:pointer;}
.u-row>summary::-webkit-details-marker{display:none;}
.u-row>summary::marker{content:"";}
.u-chev{width:18px;height:18px;color:var(--muted);flex-shrink:0;transition:transform .15s;}
.u-row[open]>summary .u-chev{transform:rotate(180deg);}
.u-actions{padding:12px 14px;background:var(--bg);border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;gap:8px;}
.u-row:last-child .u-actions{border-bottom:none;}
.u-actions .pw-row{display:flex;gap:8px;}
.u-actions .pw-row input{flex:1;}
.u-actions .btn-secondary{margin:0;text-align:center;}
.u-del{color:var(--red);border-color:var(--red-soft);}

/* ---- رسید «دیده‌شد» + جداکننده‌ی خوانده‌نشده + پرش به آخرین پیام ---- */
.unread-sep{display:flex;align-items:center;gap:10px;margin:14px 2px 6px;
  color:var(--primary);font-size:11.5px;font-weight:700;}
.unread-sep::before,.unread-sep::after{content:"";height:1px;background:var(--primary-soft);flex:1;}
.seen-link{color:inherit;text-decoration:none;}
.seen-eye{margin-right:6px;display:inline-flex;vertical-align:middle;opacity:.55;color:var(--muted);}
.seen-eye svg{width:13px;height:13px;}
.scroll-down{position:fixed;bottom:86px;z-index:31;left:calc(50% - var(--app-max)/2 + 14px);
  width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--line);
  box-shadow:0 10px 24px -8px rgba(31,35,53,.45);display:grid;place-items:center;cursor:pointer;color:var(--ink);}
@media(max-width:560px){.scroll-down{left:14px;}}
.scroll-down[hidden]{display:none;}
.scroll-down svg{width:22px;height:22px;}
.sd-badge{position:absolute;top:-6px;right:-6px;background:var(--primary);color:#fff;
  font-size:10px;font-weight:700;min-width:18px;height:18px;border-radius:9px;
  display:grid;place-items:center;padding:0 5px;}
.sd-badge[hidden]{display:none;}

/* ===== مشتریان (CRM) ===== */
.crm-filters{padding:10px 14px 4px;}
.crm-search{display:flex;align-items:center;gap:8px;background:var(--card);
  border:1.5px solid var(--line);border-radius:13px;padding:10px 13px;}
.crm-search svg{width:18px;height:18px;color:var(--muted);flex:none;}
.crm-search input{border:none;outline:none;background:transparent;width:100%;
  font-family:inherit;font-size:14px;color:var(--ink);}
.crm-selects{display:flex;gap:8px;margin-top:8px;}
.crm-selects select{flex:1;min-width:0;border:1.5px solid var(--line);border-radius:11px;
  padding:9px 8px;font-family:inherit;font-size:12px;color:var(--ink);background:var(--card);}
.crm-clear{display:inline-block;margin-top:8px;font-size:12px;color:var(--red);text-decoration:none;}
.crm-head{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.crm-field{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px;}
.crm-field:last-child{border-bottom:none;}
.crm-k{flex:none;width:88px;color:var(--muted);font-size:12.5px;}
.crm-v{color:var(--ink);line-height:1.8;}
.crm-v a{color:var(--primary);text-decoration:none;}
.crm-actions{margin:14px 0 4px;}
.crm-row2{display:flex;gap:10px;}
.crm-row2>div{flex:1;min-width:0;}

/* تاریخچه‌ی تماس */
.call-item{background:var(--card);border:1.5px solid var(--line);border-radius:13px;
  padding:11px 13px;margin-bottom:9px;}
.call-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.call-dir{font-size:12px;color:var(--muted);}
.call-time{margin-inline-start:auto;font-size:11.5px;color:var(--muted);}
.call-note{margin-top:7px;font-size:13.5px;color:var(--ink);line-height:1.85;}
.call-meta{margin-top:7px;font-size:11.5px;color:var(--muted);}

.btn-danger-lg{width:100%;border:none;border-radius:14px;padding:13px;font-family:inherit;
  font-size:14px;font-weight:700;cursor:pointer;background:var(--red-soft);color:var(--red);}

/* ===== سنجاق کردن گفتگوها (پین) ===== */
.chat-row{display:flex;align-items:stretch;}
.chat-row>.chat-item{flex:1;min-width:0;}
.chat-row.pinned{background:var(--primary-soft);}
.pin-form{display:flex;align-items:center;flex:none;}
.pin-btn{background:none;border:none;cursor:pointer;color:var(--muted);
  padding:0 13px;display:flex;align-items:center;justify-content:center;}
.pin-btn svg{width:18px;height:18px;}
.pin-btn.on{color:var(--primary);}
.pin-mark{width:13px;height:13px;color:var(--primary);flex:none;
  margin-inline-end:4px;vertical-align:-1px;}
.pin-hform{display:flex;align-items:center;}
.pin-hbtn.on{color:var(--primary);}

/* ===== سربرگ گروه قابل‌کلیک + آواتار قابل‌کلیک + ویدیو ===== */
.cv-link{display:flex;align-items:center;gap:10px;flex:1;min-width:0;
  text-decoration:none;color:inherit;}
.cv-link:active{opacity:.7;}
.ava-link{cursor:pointer;text-decoration:none;display:flex;align-items:center;justify-content:center;}
.mention[data-uid]{cursor:pointer;}
.att-video{max-width:240px;max-height:320px;border-radius:14px;display:block;
  margin-top:4px;background:#000;}
/* اعضای قابل‌کلیک در صفحه‌ی اطلاعات گروه */
.member-link{text-decoration:none;color:inherit;cursor:pointer;}
.member-link:active{background:var(--primary-soft);}
.m-chat{width:18px;height:18px;color:var(--primary);flex:none;margin-inline-start:6px;}

/* ===== هایلایت پیام هدفِ جستجو (پرش به پیام) ===== */
.focus-flash .bubble,
.focus-flash .att-file,
.focus-flash .att-video{box-shadow:0 0 0 3px var(--amber);transition:box-shadow .3s;}
.focus-flash{border-radius:16px;animation:focusPulse 2.2s ease;}
@keyframes focusPulse{
  0%{background:rgba(245,176,65,.18);}
  100%{background:transparent;}
}

/* ===== کارت خلاصه‌ی امروز (وب) ===== */
.digest-card{margin:12px 14px 4px;padding:14px 16px;background:var(--card);
  border:1.5px solid var(--primary-soft);border-radius:18px;
  box-shadow:0 6px 18px -12px rgba(31,35,53,.4);}
.digest-head{display:flex;align-items:center;gap:8px;font-size:14.5px;}
.digest-head b{flex:1;}
.digest-ic{font-size:18px;}
.digest-rem{text-decoration:none;font-size:18px;}
.digest-lines{margin:8px 0 0;padding-inline-start:18px;}
.digest-lines li{font-size:13px;color:var(--ink);line-height:2;}

/* ===== یادآورها (وب) ===== */
.rem-item{display:flex;align-items:center;gap:10px;background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:11px 13px;margin:0 0 9px;
  border-right:3.5px solid var(--primary);}
.rem-item.overdue{border-right-color:var(--red);}
.rem-mid{flex:1;min-width:0;}
.rem-mid b{font-size:14px;font-weight:600;}
.rem-mid small{display:block;color:var(--muted);font-size:11.5px;margin-top:3px;}
.rem-item.overdue .rem-mid small{color:var(--red);}
.rem-done{flex:none;width:38px;height:38px;border:none;border-radius:11px;cursor:pointer;
  background:var(--green-soft);color:var(--green);font-size:18px;font-weight:800;}

/* ===== پیام صوتی ===== */
.att-audio{width:230px;max-width:100%;height:40px;margin-top:4px;}
.comp-btn.recording{color:var(--red);animation:recPulse 1s infinite;}
@keyframes recPulse{0%,100%{opacity:1;}50%{opacity:.4;}}