/* ─────────────────────────────────────────────────────────────
   Hearing Center dashboard — layout and theme
   Dark by default, light with <html data-theme="light">.
   Chat-app shaped (rail · list · conversation) but our own marks,
   colours and icons; nothing is copied from WhatsApp.
   ───────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }

/* ── Rang ka nizam ────────────────────────────────────────────
   Paanch libas, har ek ke do roop — raat aur din. Default "Samaat"
   hai, jo :root aur [data-theme="light"] mein likha hai; baqi chaar
   neeche apne [data-skin] ke andar.

   Matlab wale chaar rang (blue, purple, orange, red) har libas mein
   wohi rehte hain. Agar ye bhi libas ke sath badalte to nishan ka
   matlab har bar badal jata, aur team ko dobara seekhna parta —
   libas sirf shanakht ka rang badalta hai, matlab ka nahi. */

:root {
  /* Samaat — raat ka roop */
  --bg:#0b1220; --pane:#121a2a; --pane-2:#0e1626; --raise:#1a2436;
  --line:#22304a; --text:#e8eef6; --muted:#8da0b8;
  --brand:#14b8a6; --brand-dark:#0d8276; --on-brand:#04201d;
  --blue:#5b9dff; --orange:#f0a830; --red:#f2607a; --purple:#a78bfa; --ok:#2bc48a;
  --bubble-in:#182439; --bubble-out:#0f5e57; --bubble-out-text:#eafffb;

  --r-sm:9px; --r:12px; --r-lg:16px; --r-pill:999px;
  --rail:72px; --list:320px; --drawer:304px;
  --shadow-sm:0 2px 8px rgba(0,0,0,.26);
  --shadow:0 8px 24px rgba(0,0,0,.34);
  --shadow-lg:0 18px 44px rgba(0,0,0,.46);

  /* Harkat — teen raftaar, aik hi chaal. Pehle har jagah apna waqt
     tha (ya bilkul nahi tha), aur safha jhatke se badalta tha. */
  --e:cubic-bezier(.2,.7,.3,1);
  --t-fast:.14s; --t-mid:.22s; --t-slow:.32s;

  /* Jagah — sab kuch 4 ke pahare par. Pehle har qeemat aankh se tay ki
     gayi thi (6, 9, 11, 13, 21...) aur us ka nateeja ye ke safha bikhra
     hua lagta tha bagair wajah samjhe. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px;

  /* Likhai — chaar naap parhne ke liye, do raqam ke liye. Pehle das naap
     the, aur sab se chhoti 9px — jo parhi hi nahi jati. */
  --t-xs:12px; --t-sm:13px; --t-md:15px; --t-lg:18px;
  --t-num:24px; --t-hero:32px;
  --w:500; --w-b:700;
  --f-head:'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
}
html[data-theme="light"] {
  /* Samaat — din ka roop */
  --bg:#eef3f7; --pane:#ffffff; --pane-2:#f6f9fb; --raise:#eaf0f5;
  --line:#dce5ed; --text:#13202b; --muted:#52647a;
  --brand:#0d8e82; --brand-dark:#0a6e65; --on-brand:#ffffff;
  --blue:#1d4ed8; --orange:#a15c07; --red:#b81d49; --purple:#6d28d9; --ok:#0e7a52;
  --bubble-in:#ffffff; --bubble-out:#d7f2ee; --bubble-out-text:#0b3b36;
  --shadow-sm:0 1px 4px rgba(16,25,40,.07);
  --shadow:0 8px 24px rgba(16,25,40,.10);
  --shadow-lg:0 18px 44px rgba(16,25,40,.16);
}

/* ── Baqi chaar libas ─────────────────────────────────────── */
html[data-skin="raat"] {
  --bg:#0a0e22; --pane:#141a33; --pane-2:#0f142a; --raise:#1c2342;
  --line:#272e52; --text:#e7e9fa; --muted:#9096c0;
  --brand:#6e7bff; --brand-dark:#4a52d4; --on-brand:#07091a;
  --bubble-in:#1a2140; --bubble-out:#36409c; --bubble-out-text:#edefff;
}
html[data-skin="raat"][data-theme="light"] {
  --bg:#eff1fa; --pane:#ffffff; --pane-2:#f6f7fd; --raise:#eaecf8;
  --line:#dfe2f1; --text:#15193a; --muted:#575d86;
  --brand:#4a52d4; --brand-dark:#3a41ad; --on-brand:#ffffff;
  --bubble-in:#ffffff; --bubble-out:#e0e3fb; --bubble-out-text:#1b1f52;
}

html[data-skin="sabza"] {
  --bg:#07140f; --pane:#0f2019; --pane-2:#0a1913; --raise:#152b22;
  --line:#1d3a2e; --text:#e4f2eb; --muted:#87a398;
  --brand:#2bc48a; --brand-dark:#149068; --on-brand:#04231a;
  --bubble-in:#132a21; --bubble-out:#0f6b4c; --bubble-out-text:#e9fff6;
}
html[data-skin="sabza"][data-theme="light"] {
  --bg:#edf5f0; --pane:#ffffff; --pane-2:#f5faf7; --raise:#e7f2eb;
  --line:#d9e8df; --text:#0c2018; --muted:#4a6659;
  --brand:#07916a; --brand-dark:#057052; --on-brand:#ffffff;
  --bubble-in:#ffffff; --bubble-out:#d4f0e4; --bubble-out-text:#073b2b;
}

html[data-skin="dhoop"] {
  --bg:#14110c; --pane:#211c14; --pane-2:#191510; --raise:#2b2419;
  --line:#3a3122; --text:#f4eee2; --muted:#a89b84;
  --brand:#e99a1e; --brand-dark:#b87710; --on-brand:#241704;
  --bubble-in:#2a2318; --bubble-out:#8a5a10; --bubble-out-text:#fff6e6;
}
html[data-skin="dhoop"][data-theme="light"] {
  --bg:#faf5eb; --pane:#ffffff; --pane-2:#fdfaf4; --raise:#f4ecdd;
  --line:#ebe1ce; --text:#241c0e; --muted:#6b604c;
  --brand:#a96508; --brand-dark:#854e04; --on-brand:#ffffff;
  --bubble-in:#ffffff; --bubble-out:#faeacb; --bubble-out-text:#40290a;
}

html[data-skin="gulab"] {
  --bg:#15090e; --pane:#241320; --pane-2:#1c0d16; --raise:#2e1a28;
  --line:#432338; --text:#f8e9f0; --muted:#b993a6;
  --brand:#e8638f; --brand-dark:#b93d68; --on-brand:#230711;
  --bubble-in:#2c1725; --bubble-out:#8d2a53; --bubble-out-text:#ffeef4;
}
html[data-skin="gulab"][data-theme="light"] {
  --bg:#fbf0f4; --pane:#ffffff; --pane-2:#fef7f9; --raise:#f7e7ed;
  --line:#f0dce4; --text:#2a101c; --muted:#7a5465;
  --brand:#c2366a; --brand-dark:#9c2653; --on-brand:#ffffff;
  --bubble-in:#ffffff; --bubble-out:#fbdde8; --bubble-out-text:#4a1028;
}

/* ── Noor — PHC ka apna libas ─────────────────────────────────
   Baqi paanch libas sirf rang badalte hain. Ye aik qadam aage jata
   hai: pate par halki si roshni, aur jo cheez dabai ja sakti hai us
   par chamak. Wajah sirf khoobsurti nahi — PHC ka dashboard Hearing
   Center jaisa nahi lagna chahiye, warna do alag kaarobar aik jaise
   nazar aayen aur kisi din koi ghalat safhe par kaam kar baithe.

   Teen usool jo is poore libas par chalte hain:

     · Roshni rang par, matan ke peeche kabhi nahi. Chamakta hua matan
       parhne mein sab se pehle mushkil hota hai, aur ye safha un logon
       ka hai jo din bhar is par kaam karte hain.
     · Matan aur pas-manzar ka farq har roop mein 4.5 se kam na ho.
     · Jise harkat se takleef ho, us ke liye sab theher jata hai
       (prefers-reduced-motion).

   Shanakht ka rang: banafshi se feroza — dono ke beech ka safar.
   Teal (Hearing Center) se door hai, aur baqi chaar libason se bhi. */
html[data-skin="noor"] {
  --bg:#0a0718; --pane:#15102b; --pane-2:#100c21; --raise:#1e1838;
  --line:#2c2450; --text:#ece9fb; --muted:#9a93c4;
  --brand:#8b7cff; --brand-dark:#6448e8; --on-brand:#0a0620;
  --bubble-in:#1c1636; --bubble-out:#4a35b8; --bubble-out-text:#f1eeff;
  /* Roshni ke do sire — gradient aur chamak isi se bante hain */
  --noor-1:#8b7cff;   /* banafshi */
  --noor-2:#22d3ee;   /* feroza  */
  --noor-glow:rgba(139,124,255,.42);
  --noor-aura:.30;
}
html[data-skin="noor"][data-theme="light"] {
  --bg:#f3f1fb; --pane:#ffffff; --pane-2:#faf9fe; --raise:#eeebf9;
  --line:#e2ddf3; --text:#1a1333; --muted:#5b5280;
  --brand:#6448e8; --brand-dark:#4e34c4; --on-brand:#ffffff;
  --bubble-in:#ffffff; --bubble-out:#e4defb; --bubble-out-text:#241a52;
  --noor-1:#6448e8;
  /* Feroza sira din ke roop mein gehra rakha gaya hai. Pehla rang
     (#0891b2) khoobsurat tha magar safed par us ka farq 3.68 tha —
     4.5 se kam. Unwan ka daayan hissa dhundla parhta tha, aur ye wo
     kharabi hai jo screenshot mein achhi lagti hai aur parhne waale ko
     thaka deti hai. #0e7490 par farq 5.36 hai aur rang wohi rehta. */
  --noor-2:#0e7490;
  --noor-glow:rgba(100,72,232,.22);
  --noor-aura:.16;
}

/* Pas-manzar ki roshni — do halke se haale, safhe ke peeche.
   `fixed` is liye ke scroll par na hilen, aur `-1` is liye ke kisi
   cheez ke ooper na aayen. Matan in se kabhi nahi guzarta. */
html[data-skin="noor"] body::before {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  opacity:var(--noor-aura);
  background:
    radial-gradient(42rem 28rem at 12% -8%, var(--noor-1), transparent 62%),
    radial-gradient(38rem 26rem at 92% 108%, var(--noor-2), transparent 60%);
}

/* Jo cheez dabai ja sakti hai, wo chamakti hai */
html[data-skin="noor"] .btn.primary,
html[data-skin="noor"] .rail-btn.on,
html[data-skin="noor"] .chip.active {
  background:linear-gradient(135deg, var(--noor-1), var(--noor-2));
  border-color:transparent; color:var(--on-brand);
  box-shadow:0 2px 14px var(--noor-glow);
}
html[data-skin="noor"] .btn.primary:hover,
html[data-skin="noor"] .rail-btn.on:hover {
  box-shadow:0 4px 22px var(--noor-glow);
}

/* Focus ka nishan chamak se ziada ahem hai.
   App ka focus ring `box-shadow` se banta hai (outline: none ke sath).
   Oopar wali chamak bhi `box-shadow` hai — aur baad mein likhi hone ki
   wajah se wo ring ko dhak deti thi. Natija: Noor mein keyboard se
   chalne wale ko nazar hi nahi aata tha ke wo kahan khara hai.
   Ab dono aik sath jate hain: ring pehle, chamak us ke peeche. Ring ka
   rang thora gehra rakha hai kyunke wo gradient par bethta hai. */
html[data-skin="noor"] .btn.primary:focus-visible,
html[data-skin="noor"] .rail-btn.on:focus-visible,
html[data-skin="noor"] .chip.active:focus-visible {
  outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 55%, transparent),
             0 2px 14px var(--noor-glow);
}

/* Shishe jaisa — sirf un do jagahon par jo theher kar rehti hain.
   Fehrist ke har khane par lagate to scroll bhaari ho jata. */
html[data-skin="noor"] .rail,
html[data-skin="noor"] .view-head {
  background:color-mix(in srgb, var(--pane) 76%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}

/* Unwan par wohi safar — banafshi se feroza */
html[data-skin="noor"] .card-box > h3,
html[data-skin="noor"] .view-head h1 {
  background:linear-gradient(100deg, var(--noor-1), var(--noor-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* Jahan gradient-matan na chale (purana browser) wahan saada rang */
@supports not (background-clip: text) {
  html[data-skin="noor"] .card-box > h3,
  html[data-skin="noor"] .view-head h1 { color:var(--text); }
}

/* Nishan ki lakeer bhi roshni se */
html[data-skin="noor"] .card-box > h3::before { background:linear-gradient(var(--noor-1), var(--noor-2)); }

/* Jise harkat se takleef ho — us ke liye sab theher jata hai */
@media (prefers-reduced-motion: reduce) {
  html[data-skin="noor"] .btn.primary,
  html[data-skin="noor"] .rail-btn.on { transition:none; }
}

html, body { height:100%; }
body {
  font-family:'Inter', system-ui, sans-serif; background:var(--bg); color:var(--text);
  overflow:hidden; -webkit-font-smoothing:antialiased;
  /* Khabar wali patti safhe ke ooper apni qatar leti hai, aur app baqi
     bachi hui oonchai. Grid ke andar rakhte to wo poori tarteeb tor deti. */
  display:flex; flex-direction:column;
}
button, input, select, textarea { font:inherit; color:inherit; }
.muted { color:var(--muted); }
.small { font-size:var(--t-xs); }
[hidden] { display:none !important; }

/* ── Buttons ──────────────────────────────────────────── */
.btn {
  background:var(--raise); border:1px solid var(--line); border-radius:8px;
  padding:var(--s1) var(--s3); font-size:var(--t-xs); cursor:pointer; white-space:nowrap;
}
.btn:hover { border-color:var(--brand); color:var(--brand); }
.btn.primary { background:var(--brand); border-color:var(--brand); color:#04160c; font-weight:var(--w-b); }
.btn.primary:hover { opacity:.88; color:#04160c; }
.btn.danger { color:var(--red); border-color:var(--red); }
.btn.on { color:var(--brand); border-color:var(--brand); }
.icon-btn { background:none; border:none; cursor:pointer; color:var(--muted); font-size:var(--t-lg); padding:var(--s1) var(--s2); border-radius:8px; }
.icon-btn:hover { background:var(--raise); color:var(--text); }

/* ── Login ────────────────────────────────────────────── */
.login { position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; background:var(--bg); }
.login-box {
  width:330px; background:var(--pane); border:1px solid var(--line); border-radius:16px;
  padding:var(--s8) var(--s6); display:flex; flex-direction:column; gap:var(--s3); align-items:center; box-shadow:var(--shadow);
}
.login-box h2 { font-size:var(--t-lg); }
.login-box p { font-size:var(--t-xs); margin-top:-var(--s2); }
.login-box input {
  width:100%; background:var(--pane-2); border:1px solid var(--line); border-radius:8px;
  padding:var(--s2) var(--s3); font-size:var(--t-sm); outline:none;
}
.login-box input:focus { border-color:var(--brand); }
.login-box .btn { width:100%; padding:var(--s2); }
.login-mark, .rail-mark, .chat-none-mark {
  display:grid; place-items:center; font-weight:var(--w-b); color:#fff;
  background:linear-gradient(135deg, var(--brand-dark), var(--brand));
}
.login-mark { width:54px; height:54px; border-radius:16px; font-size:var(--t-lg); }
.err { color:var(--red); font-size:var(--t-xs); min-height:16px; text-align:center; }

/* ── App shell ────────────────────────────────────────── */
.app { display:grid; grid-template-columns:var(--rail) var(--list) 1fr; flex:1; min-height:0; }

/* Rail */
.rail {
  background:var(--pane); border-right:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; gap:var(--s1); padding:var(--s2) 0; overflow-y:auto;
}
.rail-mark { width:38px; height:38px; border-radius:11px; font-size:var(--t-sm); margin-bottom:var(--s2); }
.rail-gap { flex:1; }
.rail-btn {
  width:56px; padding:var(--s2) 0 var(--s1); background:none; border:none; cursor:pointer; color:var(--muted);
  display:flex; flex-direction:column; align-items:center; gap:3px; border-radius:10px; font-size:var(--t-xs);
}
.rail-btn svg { width:21px; height:21px; fill:currentColor; }
.rail-btn:hover { background:var(--raise); color:var(--text); }
.rail-btn.active { color:var(--brand); background:var(--raise); }

/* ── Chat list ────────────────────────────────────────── */
.list-pane { background:var(--pane); border-right:1px solid var(--line); display:flex; flex-direction:column; overflow:hidden; }
.list-head { padding:var(--s3) var(--s3) var(--s1); border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:var(--s2); }
.list-title { display:flex; align-items:center; justify-content:space-between; gap:var(--s2); }
.list-title h1 { font-size:var(--t-md); font-weight:var(--w-b); }
.status { display:flex; align-items:center; gap:var(--s1); font-size:var(--t-xs); color:var(--muted); }
.dot { width:8px; height:8px; border-radius:50%; background:var(--muted); }
.dot.online { background:var(--brand); } .dot.warn { background:var(--orange); } .dot.off { background:var(--red); }
.search { position:relative; }
.search input {
  width:100%; background:var(--pane-2); border:1px solid var(--line); border-radius:9px;
  padding:var(--s2) var(--s6) var(--s2) var(--s3); font-size:var(--t-xs); outline:none;
}
.search input:focus { border-color:var(--brand); }
.search .x { position:absolute; right:4px; top:3px; background:none; border:none; color:var(--muted); cursor:pointer; padding:3px var(--s1); }
.chips { display:flex; flex-wrap:wrap; gap:var(--s1); padding-bottom:var(--s1); }
.chip {
  background:var(--pane-2); border:1px solid var(--line); border-radius:999px;
  padding:3px var(--s2); font-size:var(--t-xs); cursor:pointer; display:flex; align-items:center; gap:var(--s1);
}
.chip:hover { border-color:var(--brand); }
.chip.active { background:var(--brand); border-color:var(--brand); color:#04160c; font-weight:var(--w-b); }
.chip b { font-weight:var(--w-b); }
.chip.active b { color:#04160c; }
.chip .n { color:var(--muted); font-weight:var(--w-b); }
.chip.active .n { color:#04160c; }

.list { flex:1; overflow-y:auto; }
.list::-webkit-scrollbar, .messages::-webkit-scrollbar, .drawer-body::-webkit-scrollbar, .view-body::-webkit-scrollbar { width:6px; }
.list::-webkit-scrollbar-thumb, .messages::-webkit-scrollbar-thumb,
.drawer-body::-webkit-scrollbar-thumb, .view-body::-webkit-scrollbar-thumb { background:var(--line); border-radius:99px; }
.row { display:flex; gap:var(--s2); padding:var(--s2) var(--s3); cursor:pointer; border-left:3px solid transparent; align-items:center; }
.row:hover { background:var(--pane-2); }
.row.active { background:var(--pane-2); border-left-color:var(--brand); }
.row-main { flex:1; min-width:0; }
.row-top { display:flex; align-items:baseline; gap:var(--s1); }
.row-name { font-size:var(--t-xs); font-weight:var(--w-b); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row-time { font-size:var(--t-xs); color:var(--muted); margin-left:auto; white-space:nowrap; }
.row-prev { font-size:var(--t-xs); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.row-tags { display:flex; gap:var(--s1); align-items:center; margin-top:3px; flex-wrap:wrap; }
.mini { font-size:var(--t-xs); border-radius:999px; padding:1px var(--s1); border:1px solid var(--line); color:var(--muted); }
.mini.reg { color:var(--brand); border-color:rgba(37,211,102,.4); }
.mini.need { color:var(--orange); border-color:rgba(240,136,62,.4); }
.mini.stop { color:var(--red); border-color:rgba(248,81,73,.4); }
.mini.child { color:var(--purple); border-color:rgba(188,140,255,.4); }
.unread { background:var(--brand); color:#04160c; font-size:var(--t-xs); font-weight:var(--w-b); border-radius:999px; padding:1px var(--s1); }
.avatar {
  position:relative; width:38px; height:38px; border-radius:50%; flex-shrink:0; color:#fff;
  display:grid; place-items:center; font-size:var(--t-sm); font-weight:var(--w-b);
  background:linear-gradient(135deg, var(--brand-dark), var(--brand));
}
.avatar img { position:absolute; inset:0; width:100%; height:100%; border-radius:50%; object-fit:cover; }
.empty { padding:var(--s6) var(--s4); text-align:center; color:var(--muted); font-size:var(--t-xs); }
.list-foot { padding:var(--s2); text-align:center; font-size:var(--t-xs); color:var(--muted); min-height:10px; }

/* ── Chat pane ────────────────────────────────────────── */
.chat-pane { display:flex; overflow:hidden; background:var(--bg); }
.chat { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.chat-none { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--s3); color:var(--muted); }
.chat-none-mark { width:64px; height:64px; border-radius:20px; font-size:var(--t-num); opacity:.5; }
.chat-head { display:flex; align-items:center; gap:var(--s2); padding:var(--s2) var(--s3); background:var(--pane); border-bottom:1px solid var(--line); }
.chat-head .who { min-width:0; flex:1; }
.chat-head .name, .chat-head .sub { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-head .name { font-size:var(--t-sm); font-weight:var(--w-b); }
.chat-head .sub { font-size:var(--t-xs); color:var(--muted); }
.head-actions { margin-left:auto; display:flex; gap:var(--s1); }
.back { display:none; }

.messages { flex:1; overflow-y:auto; padding:var(--s3) var(--s4); display:flex; flex-direction:column; gap:var(--s2); }
.day { align-self:center; background:var(--raise); border:1px solid var(--line); border-radius:999px; padding:2px var(--s2); font-size:var(--t-xs); color:var(--muted); margin:var(--s1) 0; }
.msg { max-width:min(72%, 560px); display:flex; flex-direction:column; }
.msg.in { align-self:flex-start; }
.msg.out { align-self:flex-end; align-items:flex-end; }
.bubble { padding:var(--s2) var(--s3); border-radius:12px; font-size:var(--t-sm); line-height:1.55; white-space:pre-wrap; word-break:break-word; }
.msg.in .bubble { background:var(--bubble-in); border:1px solid var(--line); border-bottom-left-radius:3px; }
.msg.out .bubble { background:var(--bubble-out); color:var(--bubble-out-text); border-bottom-right-radius:3px; }
.msg.shadow .bubble { background:transparent; border:1px dashed var(--orange); color:var(--muted); }
.meta { font-size:var(--t-xs); color:var(--muted); margin-top:3px; }
.bubble audio { display:block; width:232px; max-width:100%; height:32px; margin-bottom:var(--s1); }
.transcript { font-size:var(--t-xs); color:var(--muted); margin-bottom:2px; }
.card { background:var(--pane); border:1px solid var(--line); border-radius:10px; padding:var(--s2) var(--s3); font-size:var(--t-xs); align-self:center; width:min(100%, 560px); }
.card h4 { font-size:var(--t-xs); color:var(--brand); margin-bottom:var(--s1); }
.card table { width:100%; border-collapse:collapse; }
.card td { padding:2px var(--s1); } .card td:first-child { color:var(--muted); width:86px; }
.ad { display:flex; gap:var(--s2); }
.ad img { width:52px; height:52px; border-radius:7px; object-fit:cover; flex-shrink:0; }
.banner { align-self:center; width:min(100%, 560px); border-radius:9px; padding:var(--s1) var(--s2); font-size:var(--t-xs); border:1px solid var(--line); }

.composer { display:flex; gap:var(--s2); padding:var(--s2) var(--s3); background:var(--pane); border-top:1px solid var(--line); }
.composer input { flex:1; background:var(--pane-2); border:1px solid var(--line); border-radius:9px; padding:var(--s2) var(--s3); font-size:var(--t-sm); outline:none; }
.composer input:focus { border-color:var(--brand); }

/* ── Drawer ───────────────────────────────────────────── */
.drawer { width:var(--drawer); flex-shrink:0; background:var(--pane); border-left:1px solid var(--line); display:flex; flex-direction:column; }
.drawer-head { display:flex; align-items:center; justify-content:space-between; padding:var(--s3) var(--s3); border-bottom:1px solid var(--line); }
.drawer-head h2 { font-size:var(--t-sm); }
.drawer-body { flex:1; overflow-y:auto; padding:var(--s3) var(--s3); display:flex; flex-direction:column; gap:var(--s3); font-size:var(--t-xs); }
.field { display:flex; justify-content:space-between; gap:var(--s2); padding:3px 0; border-bottom:1px solid var(--pane-2); }
.field span:first-child { color:var(--muted); }
.drawer h3 { font-size:var(--t-xs); color:var(--muted); text-transform:uppercase; letter-spacing:.4px; margin-bottom:var(--s1); }
.tag { background:var(--pane-2); border:1px solid var(--line); border-radius:999px; padding:2px var(--s2); font-size:var(--t-xs); display:inline-flex; gap:var(--s1); align-items:center; }
.tag .x { color:var(--red); cursor:pointer; }
.note { border-bottom:1px solid var(--pane-2); padding:var(--s1) 0; font-size:var(--t-xs); }
.note .when { color:var(--muted); font-size:var(--t-xs); }
.row-input { display:flex; gap:var(--s1); }
.row-input input { flex:1; background:var(--pane-2); border:1px solid var(--line); border-radius:8px; padding:var(--s1) var(--s2); font-size:var(--t-xs); outline:none; }
.drawer select { width:100%; background:var(--pane-2); border:1px solid var(--line); border-radius:8px; padding:var(--s1) var(--s2); font-size:var(--t-xs); }
.camp-mini { border:1px solid var(--line); border-radius:9px; padding:var(--s2) var(--s2); margin-bottom:var(--s2); }
.camp-mini a { color:var(--brand); }
.icon-btn.copy { font-size:var(--t-xs); padding:0 var(--s1); }

/* ── Camps view ───────────────────────────────────────── */
.view { grid-column:2 / -1; display:flex; flex-direction:column; overflow:hidden; background:var(--bg); }
.view-head { padding:var(--s3) var(--s4); border-bottom:1px solid var(--line); background:var(--pane); }
.view-head h1 { font-size:var(--t-md); }
.view-tools { display:flex; align-items:center; gap:var(--s2); margin-top:var(--s2); flex-wrap:wrap; }
.view-tools select { background:var(--pane-2); border:1px solid var(--line); border-radius:8px; padding:var(--s1) var(--s2); font-size:var(--t-xs); }
.view-body { flex:1; overflow-y:auto; padding:var(--s4) var(--s4); }
table.grid { width:100%; border-collapse:collapse; font-size:var(--t-xs); background:var(--pane); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
table.grid th { text-align:left; padding:var(--s2) var(--s3); background:var(--pane-2); color:var(--muted); font-weight:var(--w); }
table.grid td { padding:var(--s2) var(--s3); border-top:1px solid var(--line); }
.pill { border-radius:999px; padding:2px var(--s2); font-size:var(--t-xs); font-weight:var(--w-b); border:1px solid var(--line); }
.pill.ok { color:var(--brand); border-color:rgba(37,211,102,.4); }
.pill.no { color:var(--red); border-color:rgba(248,81,73,.4); }

/* ── Toast ────────────────────────────────────────────── */
.toast {
  position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:60;
  background:var(--pane); border:1px solid var(--line); border-radius:10px;
  padding:var(--s2) var(--s4); font-size:var(--t-xs); box-shadow:var(--shadow);
}
.toast.bad { border-color:var(--red); color:var(--red); }

/* ── Phone / tablet ───────────────────────────────────── */
@media (max-width: 900px) {
  .app { grid-template-columns:var(--rail) 1fr; }
  .list-pane { grid-column:2; }
  .chat-pane, .view { position:fixed; inset:0 0 0 var(--rail); z-index:20; background:var(--bg); }
  .chat-pane { display:none; }
  body.chat-open .chat-pane { display:flex; }
  body.chat-open .list-pane { display:none; }
  .back { display:block; }
  .drawer { position:absolute; inset:0 0 0 auto; width:min(320px, 100%); box-shadow:var(--shadow); }
  .msg { max-width:86%; }
  .rail-btn span { display:none; }
}

/* ── Reports and Settings ─────────────────────────────── */
.card-box { background:var(--pane); border:1px solid var(--line); border-radius:12px; padding:var(--s3) var(--s4); margin-bottom:var(--s3); }
.card-box h3 { font-size:var(--t-xs); color:var(--muted); text-transform:uppercase; letter-spacing:.4px; margin-bottom:var(--s2); }
.stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:var(--s3); margin-bottom:var(--s3); }
.stat { background:var(--pane); border:1px solid var(--line); border-radius:12px; padding:var(--s3); display:flex; flex-direction:column; gap:3px; }
.stat b { font-size:var(--t-num); color:var(--brand); }
.two { display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); }
.chart { position:relative; height:190px; }
.bar { display:inline-block; vertical-align:middle; width:90px; height:6px; background:var(--raise); border-radius:99px; overflow:hidden; margin-right:var(--s1); }
.bar > span { display:block; height:100%; border-radius:99px; }
.card-box .bar { width:100%; height:8px; }
.rem-log { max-height:150px; overflow-y:auto; font-size:var(--t-xs); background:var(--pane-2); border:1px solid var(--line); border-radius:8px; padding:var(--s2); margin-top:var(--s2); }
.sf { display:flex; flex-direction:column; gap:var(--s1); margin-bottom:var(--s2); font-size:var(--t-xs); }
.sf > span { color:var(--muted); font-size:var(--t-xs); }
.sf input, .sf select, .sf textarea {
  background:var(--pane-2); border:1px solid var(--line); border-radius:8px; padding:var(--s2) var(--s2); font-size:var(--t-xs); outline:none; width:100%;
}
.sf input:focus, .sf textarea:focus, .sf select:focus { border-color:var(--brand); }
.sf textarea { min-height:52px; resize:vertical; }
.sf.check input { width:auto; accent-color:var(--brand); margin-right:var(--s1); }
.sf.check > span { color:var(--text); font-size:var(--t-xs); }
.sf-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); }
.faq { display:grid; grid-template-columns:1fr 1fr 30px; gap:var(--s2); margin-bottom:var(--s2); }
.faq input { background:var(--pane-2); border:1px solid var(--line); border-radius:8px; padding:var(--s2) var(--s2); font-size:var(--t-xs); outline:none; }
.tags { display:flex; flex-wrap:wrap; gap:var(--s1); margin:var(--s1) 0; }
.view-tools .btn { text-decoration:none; }
@media (max-width: 900px) { .two, .sf-grid { grid-template-columns:1fr; } }

/* ── Composer: attachment and emoji ───────────────────── */
.attach-bar {
  display:flex; align-items:center; gap:var(--s2); padding:var(--s2) var(--s3); font-size:var(--t-xs);
  background:var(--pane-2); border-top:1px solid var(--line); color:var(--muted);
}
.attach-bar span { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.emoji-pad {
  display:grid; grid-template-columns:repeat(10, 1fr); gap:2px; padding:var(--s2) var(--s3);
  background:var(--pane-2); border-top:1px solid var(--line);
}
.emoji-pad button { background:none; border:none; cursor:pointer; font-size:var(--t-lg); padding:3px; border-radius:6px; }
.emoji-pad button:hover { background:var(--raise); }
@media (max-width: 900px) { .emoji-pad { grid-template-columns:repeat(8, 1fr); } }

/* ── Per-city reminder rules and recordings ───────────── */
.city-rule { border:1px solid var(--line); border-radius:10px; padding:var(--s2) var(--s3); margin-top:var(--s2); }
.city-rule-head { display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; margin-bottom:var(--s1); }
.city-rule textarea {
  width:100%; min-height:44px; background:var(--pane-2); border:1px solid var(--line);
  border-radius:8px; padding:var(--s2) var(--s2); font-size:var(--t-xs); outline:none; resize:vertical;
}
.city-rule textarea:focus { border-color:var(--brand); }
.city-rule input[type="file"] { flex:1; font-size:var(--t-xs); }

.warn-line {
  border:1px solid var(--orange); border-radius:9px; padding:var(--s2) var(--s2); margin-bottom:var(--s2);
  font-size:var(--t-xs); color:var(--orange); line-height:1.5;
}

.sug-actions { display:flex; gap:var(--s1); margin-top:var(--s1); }
.sug-actions .btn { padding:var(--s1) var(--s2); font-size:var(--t-xs); }

/* ── Super Agent ──────────────────────────────────────── */
.report {
  white-space:pre-wrap; font-family:inherit; font-size:var(--t-xs); line-height:1.65;
  background:var(--pane-2); border:1px solid var(--line); border-radius:10px;
  padding:var(--s3) var(--s3); margin:var(--s2) 0; max-height:420px; overflow:auto;
}
.agent-answer { font-size:var(--t-xs); color:var(--brand); margin-top:var(--s2); min-height:16px; white-space:pre-wrap; }

/* ── Gujranwala: bhejne ke qawaid ────────────────────── */
.guj-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:var(--s3); }
.guj-grid label { display:flex; flex-direction:column; gap:var(--s1); font-size:var(--t-xs); color:var(--muted); }
.guj-grid input[type=number], .guj-grid input[type=time] {
  width:100%; padding:var(--s2) var(--s2); border-radius:8px; border:1px solid var(--line);
  background:var(--pane-2); color:var(--text); font:inherit; font-size:var(--t-sm);
}
.guj-grid .pair { display:flex; align-items:center; gap:var(--s1); }
.guj-grid label.tick { flex-direction:row; align-items:center; gap:var(--s2); color:var(--text); font-size:var(--t-sm); }
.guj-grid label.tick input[type=time] { max-width:120px; }

.guj-grid textarea {
  width:100%; padding:var(--s2) var(--s2); border-radius:8px; border:1px solid var(--line);
  background:var(--pane-2); color:var(--text); font:inherit; font-size:var(--t-xs); line-height:1.55; resize:vertical;
}

.pill.part-done { border-color:var(--ok,#22c55e); color:var(--ok,#22c55e); }
.pill.part-now  { border-color:var(--brand); color:var(--brand); font-weight:var(--w-b); }
.pill.part-wait { opacity:.6; }

/* ── Intezar, "ho gaya", aur ready-made jawab ──────────── */
.waiting { font-size:var(--t-xs); color:var(--muted); }
.waiting.late { color:var(--red,#ef4444); font-weight:var(--w-b); }
.row-done {
  align-self:center; margin-left:var(--s1); width:26px; height:26px; flex:0 0 26px;
  border-radius:50%; border:1px solid var(--line); background:var(--pane-2);
  color:var(--muted); cursor:pointer; font-size:var(--t-sm); line-height:1;
}
.row-done:hover { color:var(--ok,#22c55e); border-color:var(--ok,#22c55e); }
.canned-sheet {
  position:absolute; bottom:64px; left:12px; right:12px; z-index:30;
  background:var(--pane); border:1px solid var(--line); border-radius:12px;
  padding:var(--s2); max-height:280px; overflow:auto; box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.canned-sheet button {
  display:block; width:100%; text-align:right; direction:rtl;
  background:none; border:0; border-radius:8px; padding:var(--s2) var(--s2);
  color:var(--text); font:inherit; font-size:var(--t-sm); cursor:pointer;
}
.canned-sheet button:hover { background:var(--pane-2); }
.canned-sheet .cl { display:block; direction:ltr; text-align:left; font-size:var(--t-xs); color:var(--muted); }

.tbl td.good { color:var(--ok,#22c55e); font-weight:var(--w-b); }
.tbl td.bad  { color:var(--red,#ef4444); }

/* Reports ke chhote table aur unwan — ginti parhne mein asaan rahe */
.sec-head { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--s2); flex-wrap:wrap; margin-bottom:var(--s1); }
.sec-head h2 { font-size:var(--t-sm); }
.tbl { width:100%; border-collapse:collapse; font-size:var(--t-xs); }
.tbl th { text-align:left; font-size:var(--t-xs); color:var(--muted); font-weight:var(--w-b); padding:var(--s1) var(--s1); border-bottom:1px solid var(--line); }
.tbl td { padding:var(--s1) var(--s1); border-bottom:1px solid var(--line); vertical-align:middle; }
.tbl tr:last-child td { border-bottom:0; }

/* ── Settings ke guchhe ───────────────────────────────────────
   Chaudah khane aik hi lambe scroll mein the; koi cheez dhoondni ho to
   nazar hi nahi aati thi. Ab chhe guchhe, aur har khana aik click par. */

.set-tabs {
  display: flex; gap: var(--s1); overflow-x: auto; scrollbar-width: none;
  padding: var(--s2) var(--s4); background: var(--pane);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 5;
}
.set-tabs::-webkit-scrollbar { display: none; }
.set-tab {
  flex: none; display: flex; align-items: center; gap: var(--s1);
  padding: var(--s2) var(--s3); border: 1px solid transparent;
  border-radius: 999px; background: transparent; color: var(--muted);
  font-size: var(--t-sm); font-weight: var(--w-b); cursor: pointer;
  white-space: nowrap; transition: background .15s, color .15s, border-color .15s;
}
.set-tab:hover { background: var(--raise); color: var(--text); }
.set-tab.on {
  background: color-mix(in srgb, var(--brand) 16%, transparent);
  border-color: color-mix(in srgb, var(--brand) 42%, transparent);
  color: var(--brand);
}
.set-tab-i { font-size: var(--t-md); line-height: 1; }

.set-group { animation: setIn .2s cubic-bezier(.22,.9,.3,1); }
@keyframes setIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .set-group { animation: none; } }

/* ── Phone ────────────────────────────────────────────────────
   900px wali tarteeb tablet ke liye theek hai. Phone par rail apne 72px
   mein safhe ka paanchwan hissa kha jati thi, halanke us par likhai bhi
   nahi hoti. Aur settings ke card apni chaurhi hashiyon ke sath bache
   hue arz mein aur simat jate the. */
@media (max-width: 560px) {
  :root { --rail: 56px; }
  .rail { padding-top: var(--s2); }
  .rail-btn { width: 56px; padding: var(--s2) 0; }
  .rail-btn svg { width: 22px; height: 22px; }
  .rail-mark { font-size: var(--t-sm); }

  .view-head { padding: var(--s3) var(--s3) var(--s2); flex-wrap: wrap; gap: var(--s2); }
  .view-head h1 { font-size: var(--t-lg); }
  .view-body { padding: var(--s3); }
  .card-box { padding: var(--s3); border-radius: var(--s3); }

  .set-tabs { padding: var(--s2) var(--s3); }
  .set-tab { padding: var(--s2); }

  /* Do khanon wali qatar phone par aik ke neeche aik */
  .row-input { flex-wrap: wrap; }
  .stats { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
}

/* Chhoti screen par bhi koi cheez chaurai mein bahar na nikle */
.view-body, .card-box, .sf-grid { min-width: 0; }
.card-box pre, .card-box code { white-space: pre-wrap; word-break: break-word; }

/* ── Tarteeb theek karna ──────────────────────────────────────
   `small` browser ki apni marzi se 13.3px par chalta tha — yani madad ka
   matan un labels se bara tha jin ki wo madad kar raha hai, aur us card
   ke unwan se bhi. Aankh ko pehle wahi cheez dikhti thi jo sab se kam
   ahem hai. Ab tarteeb ulti nahi: khana sab se bara, us ka naam us se
   chhota, aur wazahat sab se chhoti. */
.card-box small,
.sf small,
small.muted { font-size: var(--t-xs); line-height: 1.5; }

label.sf > span,
.sf > span { font-size: var(--t-sm); font-weight: var(--w); }

/* Likhne ka khana sab se bara — usi mein aadmi ka haath jata hai. Phone
   par 16px se kam ho to iPhone safha khud zoom kar deta hai aur tarteeb
   bikhar jati hai. */
input, select, textarea { font-size: var(--t-md); }
@media (max-width: 560px) { input, select, textarea { font-size: 16px; } }

/* `.sf` ke andar ke khane apne purane naap par atke hue the — aur wahi
   khane hain jahan aadmi ka haath jata hai. Naam chhota, khana bara. */
.sf input, .sf select, .sf textarea { font-size: var(--t-md); padding: var(--s2) var(--s3); }
.sf > span { font-size: var(--t-sm); }
.sf.check > span { font-size: var(--t-sm); color: var(--text); }
.sf small, .sf.check small { font-size: var(--t-xs); }
@media (max-width: 560px) { .sf input, .sf select, .sf textarea { font-size: 16px; } }

/* ── Jo nazar maang raha hai ──────────────────────────────────
   Safhe ke bilkul ooper, rail ke saath — jahan nazar pehle jati hai.
   Aur har khabar ke sath us ka button, warna khabar sirf fikr hai. */

.attn {
  flex: none;
  display: flex; align-items: flex-start; gap: var(--s2);
  padding: var(--s2) var(--s3);
  background: var(--pane);
  border-bottom: 1px solid var(--line);
  max-height: 40vh; overflow-y: auto;
}
.attn[data-top="act"]  { box-shadow: inset 3px 0 0 var(--red); }
.attn[data-top="warn"] { box-shadow: inset 3px 0 0 var(--orange); }
.attn[data-top="info"] { box-shadow: inset 3px 0 0 var(--blue); }

.attn-rows { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s1); }
.attn-x {
  flex: none; width: var(--s6); height: var(--s6);
  background: transparent; border: 0; border-radius: var(--s2);
  color: var(--muted); cursor: pointer; font-size: var(--t-sm);
}
.attn-x:hover { background: var(--raise); color: var(--text); }

.attn-row {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s2); border-radius: var(--s2);
  background: var(--pane-2); border: 1px solid var(--line);
}
.attn-row.act  { border-color: color-mix(in srgb, var(--red) 40%, var(--line)); }
.attn-row.warn { border-color: color-mix(in srgb, var(--orange) 34%, var(--line)); }
.attn-dot { flex: none; font-size: var(--t-xs); line-height: 1; }
.attn-body { flex: 1; min-width: 0; }
.attn-title { font-size: var(--t-sm); font-weight: var(--w-b); }
.attn-why { font-size: var(--t-xs); color: var(--muted); margin-top: 2px; line-height: 1.45; }
.attn-acts { flex: none; display: flex; align-items: center; gap: var(--s1); }
.attn-acts .btn { padding: var(--s1) var(--s2); font-size: var(--t-xs); }

@media (max-width: 560px) {
  .attn { padding: var(--s2); }
  .attn-row { flex-wrap: wrap; }
  .attn-acts { width: 100%; justify-content: flex-end; }
}

/* Jis din ye safha sab se ziada zaroori hoga, shayad us din safha khulta
   hi na ho — is liye kagaz par bhi theek nikalna chahiye */
@media print {
  .rail, .attn, .view-tools, .list-pane, .chat-pane { display: none !important; }
  body, .app { display: block !important; overflow: visible !important; height: auto !important; }
  .view { position: static !important; display: block !important; }
  .view-body { overflow: visible !important; padding: 0 !important; }
  .card-box { break-inside: avoid; border-color: #bbb; }
  * { color: #000 !important; background: #fff !important; }
}

/* ── Qadam ba qadam kaam ──────────────────────────────────────
   Jo safhe sainkron asli numbron par message bhejte hain, un par aadmi ko
   har waqt pata hona chahiye ke wo kahan khara hai aur aage kya hoga.
   Is liye har card apna number pehnta hai, aur jo qadam abhi baqi hai wo
   halka par jata hai — nazar khud us par chali jati hai jahan kaam hai. */

.step { position:relative; padding-left:var(--s8); }
.step::before {
  content:attr(data-step);
  position:absolute; left:0; top:2px;
  width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:var(--t-xs); font-weight:var(--w-b);
  background:var(--raise); color:var(--muted); border:1px solid var(--line);
}
.step[data-on]::before { background:var(--brand); color:#04160c; border-color:var(--brand); }
.step[data-wait] { opacity:.55; }
.step > h2 { margin-bottom:var(--s1); }

/* ── Message jaisa nazar aayega ───────────────────────────────
   Matan ko saada khane mein dikhane se andaza nahi hota ke mareez ke
   phone par kaisa lagega — aur yehi wo cheez hai jis par bhejne se pehle
   nazar dalni chahiye. Is liye wohi shakl: hamara apna bubble, waqt aur
   do nishan. Rang wohi hain jo poore dashboard ke hain. */

.wa-wrap {
  background:var(--pane-2); border:1px solid var(--line); border-radius:var(--r);
  padding:var(--s4); display:flex; flex-direction:column; align-items:flex-end; gap:var(--s2);
}
.wa-bub {
  position:relative; max-width:min(100%, 420px);
  background:var(--bubble-out); color:var(--bubble-out-text);
  border-radius:12px 12px 2px 12px; padding:var(--s3) var(--s3) var(--s2);
  font-size:var(--t-sm); line-height:1.55; white-space:pre-wrap; word-break:break-word;
  box-shadow:var(--shadow);
}
.wa-bub img { max-width:100%; border-radius:8px; display:block; margin-bottom:var(--s2); }
.wa-bub b { font-weight:var(--w-b); }
.wa-meta {
  display:flex; align-items:center; justify-content:flex-end; gap:4px;
  font-size:10px; opacity:.75; margin-top:var(--s1);
}
.wa-note { align-self:flex-start; font-size:var(--t-xs); color:var(--muted); }

/* ── Awaz aur tasveer rakhne ki qatar ─────────────────────── */

.media-row {
  display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap;
  border:1px solid var(--line); border-radius:10px;
  padding:var(--s3); margin-bottom:var(--s2); background:var(--pane-2);
}
.media-row > .media-ico {
  width:34px; height:34px; border-radius:9px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--raise); font-size:var(--t-md);
}
.media-row .media-main { flex:1; min-width:170px; }
.media-row .media-main b { font-size:var(--t-sm); }
.media-row .media-main span { display:block; font-size:var(--t-xs); color:var(--muted); }
.media-row img.thumb { max-height:52px; border-radius:7px; }
.media-row input[type="file"] { font-size:var(--t-xs); max-width:190px; }

/* Rakhi hui cheez par sabz nishan — khali par khamosh */
.media-row[data-has] > .media-ico { background:rgba(37,211,102,.14); }

/* ═════════════════════════════════════════════════════════════
   Marhala 1 — buniyad
   ─────────────────────────────────────────────────────────────
   Yahan koi nayi tarteeb nahi: wohi purze, naya libas. Har qaida
   oopar wale ko sanwarta hai, mitata nahi — is liye kisi safhe ka
   dhancha nahi badla aur kaam karne ka tareeqa jyun ka tyun hai.
   ═════════════════════════════════════════════════════════════ */

/* Unwan apni likhai mein — safhe ka darja nazar se hi pata chale */
h1, h2, h3, .login-box h2, .list-title h1, .view-head h1, .stat b {
  font-family: var(--f-head); letter-spacing: -.012em;
}

/* Raqam hamesha tabular — ginti badalte waqt lakeerein hilti nahi */
.stat b, .unread, .chip .n, .row-time, .waiting, .tbl td, table.grid td, .wa-meta {
  font-variant-numeric: tabular-nums;
}

/* Libas badalne par rang narmi se badlein, jhatke se nahi */
body, .rail, .list-pane, .chat-pane, .drawer, .view, .card-box, .stat,
.btn, .chip, .set-tab, .bubble, .toast, .attn, .media-row, .city-rule {
  transition: background-color var(--t-slow) var(--e), border-color var(--t-slow) var(--e), color var(--t-slow) var(--e);
}

/* ── Button ──────────────────────────────────────────────── */
.btn {
  border-radius: var(--r-sm); padding: var(--s2) var(--s3);
  font-size: var(--t-sm); font-weight: 600; line-height: 1.2;
  display: inline-flex; align-items: center; gap: var(--s1);
  transition: background-color var(--t-fast) var(--e), border-color var(--t-fast) var(--e),
              color var(--t-fast) var(--e), transform var(--t-fast) var(--e), box-shadow var(--t-fast) var(--e);
}
.btn:hover { background: var(--raise); border-color: var(--brand); color: var(--brand); }
.btn:active { transform: translateY(1px); }
.btn.primary { color: var(--on-brand); box-shadow: 0 2px 10px color-mix(in srgb, var(--brand) 34%, transparent); }
.btn.primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: var(--on-brand); opacity: 1; }
.btn.danger:hover { background: color-mix(in srgb, var(--red) 13%, transparent); border-color: var(--red); color: var(--red); }
.btn.on { background: color-mix(in srgb, var(--brand) 14%, transparent); }
.icon-btn { border-radius: var(--r-sm); transition: background-color var(--t-fast) var(--e), color var(--t-fast) var(--e), transform var(--t-fast) var(--e); }
.icon-btn:active { transform: scale(.92); }

/* Keyboard se chalne wale ko bhi nazar aaye ke wo kahan khara hai */
.btn:focus-visible, .icon-btn:focus-visible, .chip:focus-visible, .set-tab:focus-visible,
.rail-btn:focus-visible, .row:focus-visible, .row-done:focus-visible {
  outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 32%, transparent);
}

/* ── Likhne ke khane ─────────────────────────────────────── */
input, select, textarea {
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast) var(--e), box-shadow var(--t-fast) var(--e), background-color var(--t-slow) var(--e);
}
.login-box input:focus, .search input:focus, .composer input:focus,
.sf input:focus, .sf select:focus, .sf textarea:focus,
.city-rule textarea:focus, .row-input input:focus, .faq input:focus,
.guj-grid input:focus, .guj-grid textarea:focus, .drawer select:focus, .view-tools select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .85; }

/* ── Rail ────────────────────────────────────────────────── */
.rail { background: var(--pane-2); }
.rail-btn { border-radius: var(--r); transition: background-color var(--t-fast) var(--e), color var(--t-fast) var(--e), transform var(--t-fast) var(--e); }
.rail-btn:active { transform: scale(.94); }
.rail-btn.active {
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 32%, transparent);
}
.rail-mark, .login-mark, .chat-none-mark, .avatar {
  background: linear-gradient(140deg, var(--brand), var(--brand-dark));
  color: var(--on-brand);
}
.rail-mark { box-shadow: 0 6px 18px color-mix(in srgb, var(--brand) 30%, transparent); }

/* ── Login ───────────────────────────────────────────────── */
.login { background: radial-gradient(1200px 560px at 50% -10%, color-mix(in srgb, var(--brand) 12%, transparent), var(--bg) 62%); }
.login-box { border-radius: 20px; box-shadow: var(--shadow-lg); padding: var(--s8) var(--s6) var(--s6); }
.login-box h2 { font-size: var(--t-lg); font-weight: 800; }
.login-box .btn { padding: var(--s3); justify-content: center; }

/* ── Chat list ───────────────────────────────────────────── */
.row { transition: background-color var(--t-fast) var(--e), border-color var(--t-fast) var(--e); }
.chip { border-radius: var(--r-pill); padding: var(--s1) var(--s3); font-weight: 600; transition: background-color var(--t-fast) var(--e), border-color var(--t-fast) var(--e), color var(--t-fast) var(--e); }
.chip.active { color: var(--on-brand); }
.chip.active b, .chip.active .n { color: var(--on-brand); }
.unread { background: var(--brand); color: var(--on-brand); padding: 1px var(--s2); }

/* Nishan: rang ke sath halka pas-manzar — khali lakeer se saaf dikhte hain */
.mini { font-weight: 600; padding: 1px var(--s2); }
.mini.reg   { color: var(--brand);  border-color: color-mix(in srgb, var(--brand) 40%, transparent);  background: color-mix(in srgb, var(--brand) 11%, transparent); }
.mini.need  { color: var(--orange); border-color: color-mix(in srgb, var(--orange) 40%, transparent); background: color-mix(in srgb, var(--orange) 11%, transparent); }
.mini.stop  { color: var(--red);    border-color: color-mix(in srgb, var(--red) 40%, transparent);    background: color-mix(in srgb, var(--red) 11%, transparent); }
.mini.child { color: var(--purple); border-color: color-mix(in srgb, var(--purple) 40%, transparent); background: color-mix(in srgb, var(--purple) 11%, transparent); }

/* ── Guftagu ─────────────────────────────────────────────── */
.bubble { border-radius: var(--r); box-shadow: var(--shadow-sm); }
.msg.in .bubble  { border-bottom-left-radius: 4px; }
.msg.out .bubble { border-bottom-right-radius: 4px; }
.day { background: var(--pane-2); }

/* ── Card aur khane ──────────────────────────────────────── */
.card-box, .stat, .card, table.grid, .wa-wrap, .media-row, .city-rule, .report, .rem-log {
  border-radius: var(--r-lg);
}
.card-box { box-shadow: var(--shadow-sm); }
.stat {
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-mid) var(--e), box-shadow var(--t-mid) var(--e), border-color var(--t-slow) var(--e);
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.stat b { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.card-box h3, .drawer h3 { font-size: var(--t-xs); font-weight: var(--w-b); letter-spacing: .06em; }

/* ── Pill aur halat ──────────────────────────────────────── */
.pill { font-weight: 700; padding: 3px var(--s3); }
.pill.ok { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 40%, transparent); background: color-mix(in srgb, var(--brand) 12%, transparent); }
.pill.no { color: var(--red);   border-color: color-mix(in srgb, var(--red) 40%, transparent);   background: color-mix(in srgb, var(--red) 12%, transparent); }
.pill.part-now { background: color-mix(in srgb, var(--brand) 12%, transparent); }

/* ── Table ───────────────────────────────────────────────── */
table.grid th { font-weight: var(--w-b); letter-spacing: .05em; text-transform: uppercase; font-size: 11px; }
table.grid tr, .tbl tr { transition: background-color var(--t-fast) var(--e); }
table.grid tbody tr:hover, .tbl tbody tr:hover { background: var(--pane-2); }
.tbl th { letter-spacing: .05em; text-transform: uppercase; font-size: 11px; }
.tbl td.good { color: var(--ok); }

/* ── Settings ke guchhe ──────────────────────────────────── */
.set-tab { font-weight: 600; }
.set-tab.on { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 32%, transparent); }

/* ── Toast ───────────────────────────────────────────────── */
.toast { border-radius: var(--r); box-shadow: var(--shadow-lg); animation: toastIn var(--t-mid) var(--e); }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ── Intezar ka nishan — "Loading…" ki jagah ─────────────── */
.empty { font-size: var(--t-sm); }
.skel { border-radius: 6px; background: var(--raise); position: relative; overflow: hidden; }
.skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 10%, transparent), transparent);
  animation: skel 1.5s ease-in-out infinite;
}
@keyframes skel { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ── Nazar maangne wali patti ────────────────────────────── */
.attn-row { border-radius: var(--r); }
.attn-row.act  { background: color-mix(in srgb, var(--red) 8%, var(--pane-2)); }
.attn-row.warn { background: color-mix(in srgb, var(--orange) 8%, var(--pane-2)); }

/* ── Qadam ───────────────────────────────────────────────── */
.step[data-on]::before { color: var(--on-brand); box-shadow: 0 2px 8px color-mix(in srgb, var(--brand) 34%, transparent); }

/* ── Media ───────────────────────────────────────────────── */
.media-row[data-has] > .media-ico { background: color-mix(in srgb, var(--brand) 15%, transparent); color: var(--brand); }

/* Jis ko harkat na chahiye us ke liye sab theher jata hai */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* ═════════════════════════════════════════════════════════════
   Marhala 2 — rang chunna, aur intezar ka nishan
   ═════════════════════════════════════════════════════════════ */

/* ── Rang aur libas ka khana ─────────────────────────────── */
.skin-pop {
  position: fixed; left: calc(var(--rail) + var(--s2)); bottom: var(--s4); z-index: 70;
  width: 248px; background: var(--pane); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2);
  animation: popIn var(--t-mid) var(--e);
}
@keyframes popIn { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.skin-pop h3 {
  font-size: var(--t-xs); color: var(--muted); font-weight: var(--w-b);
  letter-spacing: .06em; text-transform: uppercase;
}
.skin-pop h3 + * { margin-top: -2px; }

.skin-row { display: flex; gap: var(--s2); }
.skin-dot {
  width: 34px; height: 34px; border-radius: var(--r-sm); border: 0; cursor: pointer; padding: 0;
  transition: transform var(--t-fast) var(--e), box-shadow var(--t-fast) var(--e), opacity var(--t-fast) var(--e);
  opacity: .62;
}
.skin-dot:hover { transform: scale(1.09); opacity: 1; }
.skin-dot:active { transform: scale(.94); }
.skin-dot.on { opacity: 1; box-shadow: 0 0 0 2px var(--pane), 0 0 0 4px currentColor; }
/* Har gola apne libas ka rang pehenta hai — wohi rang jo chunne par chalega */
.skin-dot[data-skin="samaat"] { background: #14b8a6; color: #14b8a6; }
.skin-dot[data-skin="raat"]   { background: #6e7bff; color: #6e7bff; }
.skin-dot[data-skin="sabza"]  { background: #2bc48a; color: #2bc48a; }
.skin-dot[data-skin="dhoop"]  { background: #e99a1e; color: #e99a1e; }
.skin-dot[data-skin="gulab"]  { background: #e8638f; color: #e8638f; }
/* Noor ka nishan bhi wohi safar dikhata hai jo libas dikhata hai */
.skin-dot[data-skin="noor"]   { background: linear-gradient(135deg,#8b7cff,#22d3ee); color: #8b7cff; }

.skin-seg {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  background: var(--pane-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 3px;
}
.skin-seg button {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  border-radius: 7px; padding: var(--s2) 0; font-size: var(--t-xs); font-weight: 600;
  transition: background-color var(--t-fast) var(--e), color var(--t-fast) var(--e);
}
.skin-seg button:hover { color: var(--text); }
.skin-seg button.on { background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); }
.skin-note { font-size: var(--t-xs); color: var(--muted); line-height: 1.5; }

@media (max-width: 560px) {
  .skin-pop { left: var(--s2); right: var(--s2); width: auto; bottom: var(--s2); }
}

/* ── Intezar ka nishan ───────────────────────────────────── */
.skel-row {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s3); border-left: 3px solid transparent;
}
.skel-av { width: 38px; height: 38px; border-radius: 50%; flex: none; }
.skel-lines { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s1); }
.skel-lines .skel { height: 10px; }

.skel-page { display: flex; flex-direction: column; gap: var(--s3); }
.skel-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s3); }
.skel-tile, .skel-card {
  background: var(--pane); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s3) var(--s4);
}
.skel-tile { padding: var(--s3); }

.skel-chat { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3) var(--s4); }
.skel-bub { height: 46px; border-radius: var(--r); border-bottom-left-radius: 4px; align-self: flex-start; }
.skel-bub.out { align-self: flex-end; border-bottom-left-radius: var(--r); border-bottom-right-radius: 4px; }

/* Safha pehli dafa khulte waqt — JS chalne se pehle bhi kuch to ho */
.empty.skel-boot { color: transparent; user-select: none; }
.empty.skel-boot::after {
  content: ""; display: block; height: 13px; max-width: 220px; margin: 0 auto;
  border-radius: 6px; background: var(--raise);
  animation: bootFade 1.4s ease-in-out infinite;
}
@keyframes bootFade { 0%, 100% { opacity: .45; } 50% { opacity: .95; } }

/* ═════════════════════════════════════════════════════════════
   Marhala 3a — Gujranwala ka safha
   ═════════════════════════════════════════════════════════════ */

/* ── Tick ab switch hai ──────────────────────────────────────
   Markup wohi rehta hai — aik saada checkbox — is liye koi JS nahi
   badla aur `.checked` parhne wala har hissa jyun ka tyun chalta
   hai. Sirf shakl badli: aankh ko foran pata chale ke khula hai ya
   band, aur ungli ko pakarne ke liye poori jagah mile. */
.tick input[type="checkbox"], .sf.check input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  position: relative; flex: none; margin: 0; cursor: pointer;
  width: 42px; height: 24px; border-radius: var(--r-pill);
  background: var(--raise); border: 1px solid var(--line);
  transition: background-color var(--t-mid) var(--e), border-color var(--t-mid) var(--e);
}
.tick input[type="checkbox"]::after, .sf.check input[type="checkbox"]::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%; background: var(--muted);
  transition: transform var(--t-mid) var(--e), background-color var(--t-mid) var(--e);
}
.tick input[type="checkbox"]:checked, .sf.check input[type="checkbox"]:checked {
  background: color-mix(in srgb, var(--brand) 30%, transparent); border-color: var(--brand);
}
.tick input[type="checkbox"]:checked::after, .sf.check input[type="checkbox"]:checked::after {
  transform: translateX(18px); background: var(--brand);
}
.tick input[type="checkbox"]:focus-visible, .sf.check input[type="checkbox"]:focus-visible {
  outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 32%, transparent);
}
/* Har tick, chahe kisi bhi khane mein ho — pehle ye qaida sirf
   `.guj-grid` ke andar chalta tha, aur bahar wale do tick aik doosre
   ke pehlu mein ja lagte the, apne switch se door. */
label.tick, .guj-grid label.tick, .sf.check {
  display: flex; flex-direction: row; align-items: center; gap: var(--s3);
  padding: var(--s2) 0; font-size: var(--t-sm); color: var(--text);
}
label.tick > span { flex: 1; min-width: 0; line-height: 1.5; }
label.tick > span .muted { font-weight: var(--w); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── Camp ka sar ─────────────────────────────────────────── */
.guj-hero {
  background: linear-gradient(168deg, color-mix(in srgb, var(--brand) 9%, var(--pane)) 0%, var(--pane) 58%);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s4) var(--s4) var(--s3); margin-bottom: var(--s3);
  box-shadow: var(--shadow-sm);
}
.guj-hero-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s3);
}
.guj-hero h2 { font-size: var(--t-lg); font-weight: 800; }
.guj-hero .stats { margin-bottom: 0; }

/* Ginti ka rang us ke matlab ka — neela samaat, banafshi ENT */
.stat[data-tone="brand"] b { color: var(--brand); }
.stat[data-tone="info"] b  { color: var(--blue); }
.stat[data-tone="ent"] b   { color: var(--purple); }
.stat[data-tone="warn"] b  { color: var(--orange); }
.stat span:first-child {
  font-size: var(--t-xs); font-weight: var(--w-b);
  letter-spacing: .06em; text-transform: uppercase;
}

/* ── ENT ka khana ────────────────────────────────────────── */
.guj-ent { border-color: var(--line); }
.guj-ent.on {
  border-color: color-mix(in srgb, var(--brand) 38%, var(--line));
  background: linear-gradient(168deg, color-mix(in srgb, var(--brand) 7%, var(--pane)) 0%, var(--pane) 62%);
}
.guj-ent-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s4); margin-bottom: var(--s3);
}
.guj-ent-head h3 {
  font-size: var(--t-md); color: var(--text); text-transform: none;
  letter-spacing: -.012em; margin-bottom: var(--s1);
}
.guj-ent-sw { flex: none; padding: 0 !important; }
.guj-note {
  display: block; margin: var(--s3) 0 var(--s2);
  padding: var(--s2) var(--s3); border-radius: var(--r-sm);
  font-size: var(--t-xs); line-height: 1.55;
  background: var(--pane-2); border: 1px solid var(--line); color: var(--muted);
  transition: background-color var(--t-mid) var(--e), border-color var(--t-mid) var(--e), color var(--t-mid) var(--e);
}
.guj-note[data-on="1"] {
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  border-color: color-mix(in srgb, var(--brand) 32%, transparent);
  color: var(--brand);
}

/* ── Halat chunne ke khane ───────────────────────────────── */
.tog-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s3) 0; }
.tog {
  display: inline-flex; align-items: center; gap: var(--s2); cursor: pointer;
  padding: var(--s2) var(--s3); border-radius: var(--r-pill);
  background: var(--pane-2); border: 1px solid var(--line);
  font-size: var(--t-xs); font-weight: 600; color: var(--muted);
  transition: background-color var(--t-fast) var(--e), border-color var(--t-fast) var(--e), color var(--t-fast) var(--e);
}
.tog:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.tog input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; margin: 0; cursor: pointer;
  width: 15px; height: 15px; border-radius: 5px; flex: none;
  background: transparent; border: 1.5px solid var(--line); position: relative;
  transition: background-color var(--t-fast) var(--e), border-color var(--t-fast) var(--e);
}
.tog input[type="checkbox"]::after {
  content: ""; position: absolute; inset: 2px;
  border-radius: 2px; background: var(--on-brand); opacity: 0;
  transition: opacity var(--t-fast) var(--e);
}
.tog input[type="checkbox"]:checked { background: var(--brand); border-color: var(--brand); }
.tog input[type="checkbox"]:checked::after { opacity: 1; }
.tog:has(input:checked) {
  color: var(--brand); border-color: color-mix(in srgb, var(--brand) 42%, transparent);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
}
.tog b { font-variant-numeric: tabular-nums; }

/* ── Round ki qatar ──────────────────────────────────────── */
.guj-rounds {
  display: flex; flex-direction: column; gap: var(--s1); margin-top: var(--s3);
  border: 1px solid var(--line); border-radius: var(--r); padding: var(--s2) var(--s3);
  background: var(--pane-2);
}
.guj-rounds label.tick { justify-content: flex-start; }
.guj-rounds label.tick > span { flex: 1; }
.guj-rounds input[type="time"] {
  max-width: 130px; background: var(--pane); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: var(--s1) var(--s2); font-size: var(--t-sm);
}

/* ── Chalte hue kaam ki patti ────────────────────────────── */
#guj-progress .bar { width: 100%; height: 9px; }
#guj-progress .bar > i {
  display: block; height: 100%; border-radius: 99px; background: var(--brand);
  transition: width var(--t-slow) var(--e);
}

@media (max-width: 560px) {
  .guj-ent-head { flex-direction: column; gap: var(--s3); }
  .guj-hero { padding: var(--s3); }
  .tog { padding: var(--s2); }
}

/* ═════════════════════════════════════════════════════════════
   Marhala 3b — Settings ka safha
   Safhe par chaudah khane hain aur sainkron khane bharne wale.
   Yahan sab se zaroori cheez tarteeb hai: kaunsa naam hai, kaunsi
   qeemat, aur kaunsi wazahat — teenon alag alag nazar aayein.
   ═════════════════════════════════════════════════════════════ */

/* ── Oopar ki patti ──────────────────────────────────────── */
.set-tabs {
  gap: var(--s1); padding: var(--s3) var(--s4);
  background: color-mix(in srgb, var(--pane) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.set-tab {
  gap: var(--s2); padding: var(--s2) var(--s4);
  border-radius: var(--r-pill); font-size: var(--t-sm);
  transition: background-color var(--t-fast) var(--e), color var(--t-fast) var(--e),
              border-color var(--t-fast) var(--e), transform var(--t-fast) var(--e);
}
.set-tab:active { transform: translateY(1px); }
.set-tab-i { display: grid; place-items: center; width: 17px; height: 17px; font-size: 0; }
.set-tab-i svg { width: 17px; height: 17px; display: block; }

/* ── Khane ka jism ───────────────────────────────────────── */
#settings-body .card-box { padding: var(--s4) var(--s5); margin-bottom: var(--s4); }
#settings-body .card-box > h3:first-child {
  display: flex; align-items: center; gap: var(--s2);
  padding-bottom: var(--s3); margin-bottom: var(--s4);
  border-bottom: 1px solid var(--line);
  color: var(--text); font-size: var(--t-sm); letter-spacing: .04em;
}
#settings-body .card-box > h3:first-child::before {
  content: ""; flex: none; width: 3px; height: 15px;
  border-radius: 99px; background: var(--brand);
}

/* ── Aik khana: naam, qeemat, wazahat ────────────────────── */
.sf { gap: var(--s2); margin-bottom: var(--s4); }
.sf > span { color: var(--text); font-weight: 600; line-height: 1.4; }
.sf > span code {
  font-size: 11px; padding: 1px var(--s1); border-radius: 5px;
  background: var(--pane-2); border: 1px solid var(--line); color: var(--muted);
}
.sf small, .sf > small.muted { line-height: 1.55; }
.sf input, .sf select, .sf textarea { background: var(--pane-2); }
.sf textarea { min-height: 76px; line-height: 1.6; }

/* Checkbox wala khana: switch aur us ka naam aik qatar mein */
.sf.check > span {
  display: flex; align-items: center; gap: var(--s3);
  font-weight: 600; color: var(--text);
}
.sf.check { align-items: flex-start; flex-direction: column; gap: var(--s1); }
.sf.check small { padding-left: calc(42px + var(--s3)); }

/* ── Do khanon wali qatar ────────────────────────────────── */
.sf-grid { gap: var(--s4); }
.faq { gap: var(--s2); align-items: start; }
.faq input { background: var(--pane-2); }

/* ── Awaz aur file ───────────────────────────────────────── */
.media-row { background: var(--pane-2); gap: var(--s3); }
.media-row input[type="file"] {
  max-width: 200px; font-size: var(--t-xs); color: var(--muted);
}
.media-row input[type="file"]::file-selector-button {
  background: var(--raise); border: 1px solid var(--line); color: var(--text);
  border-radius: var(--r-sm); padding: var(--s1) var(--s3);
  font: inherit; font-size: var(--t-xs); font-weight: 600; cursor: pointer;
  margin-right: var(--s2);
  transition: border-color var(--t-fast) var(--e), color var(--t-fast) var(--e);
}
.media-row input[type="file"]::file-selector-button:hover { border-color: var(--brand); color: var(--brand); }

/* ── Shehar ke apne qawaid ───────────────────────────────── */
.city-rule { background: var(--pane-2); }
.city-rule-head { gap: var(--s4); }

/* ── Khabardar karne wali lakeer ─────────────────────────── */
.warn-line {
  border-radius: var(--r); padding: var(--s3);
  background: color-mix(in srgb, var(--orange) 9%, transparent);
  border-color: color-mix(in srgb, var(--orange) 40%, transparent);
}

@media (max-width: 560px) {
  #settings-body .card-box { padding: var(--s3); }
  .set-tab { padding: var(--s2) var(--s3); }
  .sf.check small { padding-left: 0; }
}

/* Nishan button ke matan ke sath seedhe mein baithein */
.btn svg, .icon-btn svg, .attn-x svg, .search .x svg {
  display: block; flex: none;
}
.icon-btn, .attn-x, .search .x {
  display: inline-flex; align-items: center; justify-content: center;
}
.search .x { top: 7px; right: 6px; }

/* ── Reports ─────────────────────────────────────────────────
   Ginti ke khane aur chart aik hi safhe par hain; chart ko apni
   jagah chahiye warna lakeerein aapas mein ghus jati hain. */
.chart { height: 220px; margin-top: var(--s3); }
.card-box .bar { background: var(--pane-2); height: 9px; }
.card-box .bar > span { background: var(--brand); transition: width var(--t-slow) var(--e); }
.sec-head h2 { font-family: var(--f-head); font-size: var(--t-md); font-weight: 700; }
.two { gap: var(--s4); }

/* ═════════════════════════════════════════════════════════════
   Marhala 3d — Reminders, Postpone, Camps, Agent, Handover
   Paanch chhote safhe. Dhancha sab ka aik jaisa ho jaye: safhe ka
   sar, phir card, phir ginti ke khane — har jagah wohi naap.
   ═════════════════════════════════════════════════════════════ */

/* ── Har safhe ka sar ────────────────────────────────────── */
.view-head {
  padding: var(--s4) var(--s5) var(--s3);
  background: color-mix(in srgb, var(--pane) 90%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.view-head h1 { font-size: var(--t-lg); font-weight: 800; }
.view-tools { margin-top: var(--s3); gap: var(--s2); }
.view-tools select {
  background: var(--pane-2); border-radius: var(--r-sm);
  padding: var(--s2) var(--s3); font-size: var(--t-sm);
}
.view-body { padding: var(--s4) var(--s5) var(--s8); }

/* ── Ginti ke khane ──────────────────────────────────────── */
.stat b { color: var(--brand); }
/* Jin khanon mein raqam nahi, matan hai — number, mode, naam — un ke
   liye 28px bahut bara hai aur lafz toot jata hai */
.stat.text b {
  font-size: var(--t-md); font-weight: 700; line-height: 1.35;
  word-break: break-word; font-variant-numeric: normal;
}

/* ── Qadam ba qadam (Postpone) ───────────────────────────── */
/* Number ki apni jagah: card ka hashiya + gola + saans */
.step { padding-left: calc(var(--s4) + 28px + var(--s3)); }
.step::before {
  top: var(--s4); left: var(--s4);
  width: 28px; height: 28px; font-size: var(--t-sm);
  transition: background-color var(--t-mid) var(--e), color var(--t-mid) var(--e),
              border-color var(--t-mid) var(--e), box-shadow var(--t-mid) var(--e);
}
.step > h2 {
  font-family: var(--f-head); font-size: var(--t-md); font-weight: 700;
  margin-bottom: var(--s2);
}
.step[data-wait] { opacity: .6; }
.step[data-on] { border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); }

/* ── Super Agent ka report ───────────────────────────────── */
.report {
  background: var(--pane-2); line-height: 1.7;
  padding: var(--s4); font-size: var(--t-sm);
}
.agent-answer {
  padding: var(--s3); border-radius: var(--r);
  background: color-mix(in srgb, var(--brand) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 26%, transparent);
  font-size: var(--t-sm); line-height: 1.6;
}
.agent-answer:empty { display: none; }

/* ── Camps aur Reminders ke table ────────────────────────── */
table.grid { box-shadow: var(--shadow-sm); }
table.grid td { font-size: var(--t-sm); }
table.grid tbody tr:last-child td:first-child { border-bottom-left-radius: var(--r-lg); }
table.grid tbody tr:last-child td:last-child { border-bottom-right-radius: var(--r-lg); }

/* Reminder ki qatar: jo chal raha hai wo alag nazar aaye */
.rem-log {
  background: var(--pane-2); line-height: 1.6;
  padding: var(--s3); max-height: 190px;
}

/* ── Chhoti screen ───────────────────────────────────────── */
@media (max-width: 560px) {
  .view-head { padding: var(--s3) var(--s3) var(--s2); }
  .view-body { padding: var(--s3) var(--s3) var(--s6); }
  .step { padding-left: calc(var(--s3) + 24px + var(--s2)); }
  .step::before { top: var(--s3); left: var(--s3); width: 24px; height: 24px; }
}

/* ═════════════════════════════════════════════════════════════
   Marhala 4 — phone
   ─────────────────────────────────────────────────────────────
   Safha chaurai mein kahin bahar nahi nikalta — wo pehle hi theek
   tha. Masla doosra tha: har dabane wali cheez 33 se 38 pixel ki
   thi. Mouse ke liye kafi hai, ungli ke liye nahi — camp par haath
   jaldi mein hota hai aur ghalat khana dab jata hai. Ungli ko kam az
   kam 44 pixel chahiye.
   ═════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  /* Rail: nishan bara, aur poora khana dabne layak */
  .rail-btn { min-height: 48px; padding: var(--s3) 0; }
  .rail-btn svg { width: 24px; height: 24px; }

  /* Button aur chip — ungli ke naap par */
  .btn, a.btn { min-height: 44px; padding: var(--s2) var(--s4); font-size: var(--t-sm); }
  .icon-btn { min-width: 44px; min-height: 44px; }
  .chip, .tog { min-height: 40px; padding: var(--s2) var(--s4); }
  .set-tab { min-height: 44px; }
  .row-done { width: 34px; height: 34px; flex-basis: 34px; }

  /* Switch bara — ye sab se zyada daba jata hai */
  .tick input[type="checkbox"], .sf.check input[type="checkbox"] {
    width: 48px; height: 28px;
  }
  .tick input[type="checkbox"]::after, .sf.check input[type="checkbox"]::after {
    width: 22px; height: 22px;
  }
  .tick input[type="checkbox"]:checked::after,
  .sf.check input[type="checkbox"]:checked::after { transform: translateX(20px); }
  .sf.check small { padding-left: calc(48px + var(--s3)); }

  /* Chat ki qatar: har row par ungli poori aa jaye */
  .row { padding: var(--s3); }
  .avatar { width: 44px; height: 44px; }

  /* Guftagu ka khana aur bhejne ka button */
  .composer { padding: var(--s3); gap: var(--s3); }
  .composer input { min-height: 44px; }

  /* Khane: phone par 16px se kam ho to iPhone safha khud zoom kar
     deta hai aur poori tarteeb bikhar jati hai */
  .guj-grid input, .guj-grid textarea, .row-input input { min-height: 44px; }
}

@media (max-width: 560px) {
  /* Ginti ke khane do do ki qatar mein — teen phone par simat jate hain */
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
  .stat { padding: var(--s3); }
  .stat b { font-size: var(--t-num); }
  .stat.text b { font-size: var(--t-sm); }

  /* Camp ka sar: tareekh aur nishan aik doosre ke neeche */
  .guj-hero-top { flex-direction: column; align-items: flex-start; gap: var(--s2); }
  .guj-hero h2 { font-size: var(--t-md); }

  /* Do khanon wali har qatar aik ke neeche aik */
  .guj-grid { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr 1fr; }
  .faq button { grid-column: 1 / -1; }

  /* Bhejne ke khane: hadd aur button alag alag lakeeron mein */
  .row-input { flex-wrap: wrap; }
  .row-input input { flex: 1 1 140px; max-width: none !important; }
  .row-input .btn { flex: 1 1 auto; justify-content: center; }

  /* Table ko apni jagah chahiye — zabardasti simatne se lafz toot-te hain */
  table.grid, .tbl { min-width: 460px; }
  .view-body table.grid, .card-box table.grid, .card-box .tbl { min-width: 0; }
  .card-box > table.grid { display: block; overflow-x: auto; }

  /* Libas ka khana poori chaurai mein, neeche se uthta hua */
  .skin-pop { border-radius: var(--r-lg) var(--r-lg) 0 0; padding: var(--s4) var(--s4) var(--s6); }
  .skin-dot { width: 40px; height: 40px; }
  .skin-seg button { min-height: 40px; }

  /* Nazar maangne wali patti */
  .attn-acts .btn { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 900px) {
  /* ENT ka switch safhe ka sab se ahem khana hai — us ke gird jagah
     chahiye, warna ungli kinare par lagti hai */
  .guj-ent-sw { padding: var(--s2) 0 !important; min-height: 44px; align-items: center; }
  .guj-rounds input[type="time"], input[type="time"] { min-height: 44px; }
}

/* ═════════════════════════════════════════════════════════════
   Marhala 5 — aakhri safai
   ═════════════════════════════════════════════════════════════ */

/* ── Halat ka nishan ─────────────────────────────────────────
   Pehle emoji tha. Rang ke sath sath naap bhi alag hai: jis baat par
   abhi kaam karna hai us ka gola bara hai aur us ke gird halqa, aur
   jo sirf khabar hai wo chhota. Rang ke andhe aadmi ko bhi farq
   nazar aata hai — rang akela kabhi kaafi nahi hota. */
.attn-dot {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  background: var(--blue); margin-top: 5px;
}
.attn-dot[data-level="act"]  { width: 12px; height: 12px; background: var(--red);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 22%, transparent); margin-top: 4px; }
.attn-dot[data-level="warn"] { width: 11px; height: 11px; background: var(--orange);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 20%, transparent); }

/* ── Keyboard se chalne wale ke liye ─────────────────────────
   Jo aadmi mouse nahi chala sakta us ke liye bhi safha chalna
   chahiye, aur usay har waqt pata hona chahiye ke wo kahan khara
   hai. Browser ka apna halqa gehre rang par gayab ho jata hai. */
a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
  outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 32%, transparent);
  border-radius: var(--r-sm);
}
/* Safhe ke shuru mein — sirf keyboard walon ko nazar aata hai */
.skip {
  position: fixed; top: var(--s2); inset-inline-start: var(--s2); z-index: 200;
  transform: translateY(-200%); transition: transform var(--t-mid) var(--e);
  background: var(--brand); color: var(--on-brand); font-weight: var(--w-b);
  padding: var(--s2) var(--s4); border-radius: var(--r-sm); text-decoration: none;
}
.skip:focus { transform: none; }

/* ── Kagaz par ───────────────────────────────────────────────
   Jis din ye safha sab se zyada zaroori hoga, shayad us din safha
   khulta hi na ho. Chart kagaz par kaam ke nahi — wo screen ke liye
   bane hain; ginti aur table reh jate hain, jo asal cheez hai. */
@media print {
  .rail, .attn, .view-tools, .list-pane, .chat-pane, .drawer,
  .set-tabs, .skin-pop, .toast, .composer { display: none !important; }
  body, .app { display: block !important; overflow: visible !important; height: auto !important; }
  .view { position: static !important; display: block !important; }
  .view-head { border-bottom: 2px solid #000; padding: 0 0 8pt; margin-bottom: 12pt; }
  .view-body { overflow: visible !important; padding: 0 !important; }
  .card-box, .stat, table.grid { break-inside: avoid; border: 1px solid #999 !important; box-shadow: none !important; }
  .chart, canvas { display: none !important; }
  .stats { display: flex !important; gap: 12pt; }
  * { color: #000 !important; background: #fff !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555 !important; }
}

/* ── Jo cheez abhi nahi aayi ─────────────────────────────────
   Khali khana aur "kuch nahi mila" — dono aik jaisi khamoshi mein */
.empty { line-height: 1.6; }
.empty:not(.skel-boot)::before {
  content: ""; display: block; width: 34px; height: 34px; margin: 0 auto var(--s3);
  border-radius: 50%; border: 2px dashed var(--line);
}

/* ── Chhoti cheezein ─────────────────────────────────────────── */
/* Likhai kahin bhi chipak kar na rahe */
.card-box p, .drawer-body p, .attn-why, .sf small { max-width: 76ch; }
/* Scrollbar safhe ke libas mein */
* { scrollbar-color: var(--line) transparent; scrollbar-width: thin; }
/* Chuna hua matan bhi hamare rang mein */
::selection { background: color-mix(in srgb, var(--brand) 30%, transparent); color: var(--text); }

/* ─────────────────────────────────────────────────────────────
   TANKHWAH KA RECORD
   Tankhwah "Other costs" mein likhi jati hai, is liye baad mein
   pata hi nahi chalta tha ke aakhri kab gayi. Yahan har shakhs ka
   apna khana — tareekh, raqam, aur beech ke din.
   ───────────────────────────────────────────────────────────── */
.sal-head{
  display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;
  font-size:.86rem;color:var(--muted);margin-bottom:10px
}
.sal-head b{color:var(--ink);font-size:1rem}
.sal-person{
  border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;margin-bottom:10px;background:var(--bg)
}
.sal-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-bottom:6px}
.sal-top b{font-size:.98rem}
.sal-last{font-size:.78rem;color:var(--muted)}
.sal-sum{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}
.sal-row{
  display:grid;grid-template-columns:1fr auto;gap:2px 10px;
  padding:7px 0;border-top:1px dashed var(--line);font-size:.86rem
}
.sal-day{font-variant-numeric:tabular-nums;font-weight:600}
.sal-amt{font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.sal-note{grid-column:1/-1;font-size:.76rem;color:var(--muted);line-height:1.5}
.sal-note b{color:var(--ink)}
.sal-note i{font-style:normal;opacity:.75}

/* ─────────────────────────────────────────────────────────────
   AIK KHANE MEIN KAI AWAZEIN
   Pehle har khane ki aik hi recording hoti thi aur wohi har mareez
   ko jati thi. Ab kai hoti hain — har aik alag sun'ni aur alag
   hatani ja sakti hai.
   ───────────────────────────────────────────────────────────── */
.clip-list{display:flex;flex-direction:column;gap:6px;margin:6px 0 4px}
.clip{display:flex;align-items:center;gap:8px}
.clip audio{min-width:0}
.clip .btn.sm{padding:3px 9px;font-size:.78rem;line-height:1.2}

/* ── Awaz mein kya kaha jaye (ⓘ) aur ek-click usool ──────────── */
.tip-i{
  width:17px;height:17px;margin-left:6px;padding:0;border-radius:50%;
  border:1px solid var(--line);background:var(--bg);color:var(--muted);
  font:600 11px/1 serif;font-style:italic;cursor:pointer;vertical-align:1px
}
.tip-i:hover,.tip-i:focus{border-color:var(--brand);color:var(--brand)}
.preset-box{
  display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;
  margin:12px 0 4px;padding:12px 14px;border-radius:10px;
  border:1px solid var(--line);background:var(--bg)
}
.preset-box>div{flex:1;min-width:230px}
.preset-box > div > b{display:block;margin-bottom:3px}
.preset-box small{display:block;line-height:1.55}

/* PHC — doctor chunne ka khana */
.phc-docs { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:8px; }
.phc-doc {
  display:flex; align-items:center; gap:9px; cursor:pointer;
  padding:10px 12px; border-radius:9px;
  border:1px solid var(--line); background:var(--bg);
}
.phc-doc:hover { border-color:var(--brand); }
.phc-doc.on { border-color:var(--brand); background:color-mix(in srgb, var(--brand) 7%, var(--bg)); }
.phc-doc input { margin:0; flex:none; }
.phc-doc .phc-naam { font-weight:var(--w-b); }
.phc-doc .small { margin-left:auto; text-align:right; }

/* PHC ke matan — jo jagahen khud bhar jati hain */
.jagah-row { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.jagah-row code {
  font-size:var(--t-xs); padding:3px 7px; border-radius:6px;
  background:var(--surface-2,var(--bg)); border:1px solid var(--line); color:var(--brand);
}

/* Jo hisse sirf Hearing Center ke apne hain — Gujranwala ka alag nizam
   aur Shahzaib ki partnership ka hisab — wo doosre markaz ke dashboard
   par nazar nahi aate. Wahan un ka wajood hi nahi.
   Nishan server lagata hai (data-company), CSS mein is liye ke safha
   khulte waqt aik lamhe ke liye bhi wo khane jhalak na jayen. */
html[data-doosra-markaz] [data-hc-only] { display: none !important; }