/* wabot design system
 *
 * Rang WhatsApp ki apni site se liye gaye hain (andaza nahi):
 *   #25D366  brand green      (unka asal green)
 *   #43CD66  halka green      (hover, accents)
 *   #103928  gehra green      (dark surfaces par tint)
 *   #111B21  dark surface     (wahi jo unki dark chat me hai)
 *   #1C1E21  gehra matn
 *
 * Font: WhatsApp ka apna "WhatsApp Sans Var" public nahi hai. Figtree us ke sab
 * se qareeb hai (wahi geometric-humanist mizaj), aur variable bhi hai.
 */

/* Font yahin rakha hua hai, Google se nahi aata.
 *
 * Wajah sirf raftar nahi. Is cheez ka poora wada ye hai ke "kuch bahar nahi
 * jata". Agar font Google se aaye to har aane wale ka IP Google tak pohanch jata
 * hai, sirf safha kholne par. Wo baat apne hi wade ko kaat deti hai.
 * Ek faida aur hua: CSP kholni nahi parhi, 'self' hi kaafi raha.
 *
 * unicode-range ki wajah se browser sirf wahi hissa utarta hai jo safhe par
 * waqai chahiye (aam soorat me sirf latin wala, ~20K).
 */
@font-face {
  font-family: Figtree; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url(/fonts/figtree-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Figtree; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url(/fonts/figtree-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Figtree; font-style: italic; font-weight: 300 900; font-display: swap;
  src: url(/fonts/figtree-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Figtree; font-style: italic; font-weight: 300 900; font-display: swap;
  src: url(/fonts/figtree-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* brand */
  --green: #25D366;
  --green-lit: #43CD66;
  --green-deep: #103928;
  --green-glow: rgba(37, 211, 102, .22);

  /* dark surfaces (WhatsApp dark) */
  --bg: #0B141A;
  --surface: #111B21;
  --surface-2: #15212B;
  --line: #22303C;
  --line-soft: #1B2831;

  /* matn */
  --fg: #E9EDEF;
  --fg-dim: #8696A0;
  --fg-faint: #667781;

  --danger: #F15C6D;
  --warn: #E5A23C;

  --r-sm: 10px;
  --r: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* Ek hi rhythm poore product par: 4/8 ka nizaam */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 112px;

  --ease: cubic-bezier(.2, .7, .3, 1);
  --dur: 220ms;

  --shadow-card: 0 1px 0 rgba(255,255,255,.03) inset, 0 18px 50px -24px rgba(0,0,0,.8);
  --shadow-lift: 0 24px 70px -28px rgba(0,0,0,.9);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 16px/1.6 Figtree, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* Halka sa manzar: jaali aur ek narm sabz roshni. Sirf mahol banata hai,
     parhne me rukawat nahi banta. */
  background-image:
    radial-gradient(900px 500px at 78% -8%, rgba(37,211,102,.10), transparent 60%),
    radial-gradient(700px 420px at 8% 4%, rgba(37,211,102,.05), transparent 60%),
    linear-gradient(to bottom, rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(to right, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: auto, auto, 100% 56px, 56px 100%;
  background-attachment: fixed, fixed, scroll, scroll;
}

/* Jin logon ne harkat kam maangi hai, un ke liye sab kuch 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;
  }
}

/* ---------- type ---------- */

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.022em; line-height: 1.08; }
h1 { font-size: clamp(38px, 6vw, 68px); }
h2 { font-size: clamp(28px, 3.6vw, 42px); letter-spacing: -.02em; }
h3 { font-size: 19px; letter-spacing: -.01em; line-height: 1.3; }
p { margin: 0; }

.accent { color: var(--green); }
.italic-accent { font-style: italic; color: var(--green); }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-dim);
}
.eyebrow::before {
  content: ""; width: 28px; height: 1px; background: var(--line);
}

.badge {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 7px 14px; border-radius: var(--r-pill);
  border: 1px solid rgba(37,211,102,.28);
  background: rgba(37,211,102,.07);
  color: var(--green-lit);
  font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
}
.badge .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 4px var(--green-glow);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(37,211,102,.22); }
  50%      { box-shadow: 0 0 0 7px rgba(37,211,102,.05); }
}

.lede { color: var(--fg-dim); font-size: 17px; max-width: 54ch; }
.muted { color: var(--fg-dim); }
.small { font-size: 13.5px; }
.mono { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; }

/* ---------- layout ---------- */

.wrap { width: min(1180px, 100% - 40px); margin-inline: auto; }
.section { padding: 80px 0; }
.section-head { max-width: 62ch; margin-bottom: var(--s7); display: grid; gap: var(--s4); }

.grid { display: grid; gap: var(--s4); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 880px) { .g2, .g3 { grid-template-columns: 1fr; } }

/* ---------- nav ---------- */

.nav {
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(14px);
  background: rgba(11,20,26,.72);
  border-bottom: 1px solid var(--line-soft);
}
.nav-in { display: flex; align-items: center; gap: var(--s5); padding: 14px 0; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.02em; font-size: 18px; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: linear-gradient(160deg, var(--green), #14a04a);
  box-shadow: 0 6px 18px -6px var(--green-glow);
}
.brand-mark svg { width: 17px; height: 17px; }
.nav-links { display: flex; gap: var(--s5); margin-left: auto; }
.nav-links a {
  color: var(--fg-dim); text-decoration: none; font-size: 14.5px; font-weight: 500;
  transition: color var(--dur) var(--ease);
}
.nav-links a:hover { color: var(--fg); }
@media (max-width: 780px) { .nav-links { display: none; } }

/* ---------- buttons ---------- */

.btn {
  --btn-bg: var(--green);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  /* 44px se kam kabhi nahi: chhota target miss ho jata hai */
  min-height: 46px; padding: 0 22px;
  border: 0; border-radius: var(--r-pill);
  background: var(--btn-bg); color: #04210F;
  font: inherit; font-weight: 700; font-size: 15px; letter-spacing: -.01em;
  /* Button <a> bhi ho sakta hai. Us par browser apni lakeer laga deta hai aur
     wo button ki shakl tor deti hai. */
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
  box-shadow: 0 10px 30px -12px var(--green-glow);
}
.btn:hover { background: var(--green-lit); transform: translateY(-1px); box-shadow: 0 16px 40px -14px var(--green-glow); }
.btn:active { transform: translateY(0) scale(.985); }
.btn:disabled { opacity: .45; cursor: default; transform: none; box-shadow: none; }

.btn.ghost {
  background: transparent; color: var(--fg);
  border: 1px solid var(--line); box-shadow: none;
}
.btn.ghost:hover { background: var(--surface-2); border-color: #2C3E4C; }

.btn.sm { min-height: 36px; padding: 0 14px; font-size: 13.5px; }

/* Focus hamesha nazar aana chahiye. Is ko kabhi hataya nahi jata. */
:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ---------- cards ---------- */

.card {
  background: linear-gradient(180deg, var(--surface), #0F1A21);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  padding: var(--s5);
  box-shadow: var(--shadow-card);
}
.card.lift { border-radius: var(--r-lg); padding: var(--s6); box-shadow: var(--shadow-lift); }

.feature {
  display: grid; grid-template-columns: 34px 1fr; gap: var(--s3);
  align-items: start;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.feature:hover { border-color: rgba(37,211,102,.28); transform: translateY(-2px); }
.feature .ico {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(37,211,102,.10); border: 1px solid rgba(37,211,102,.18);
  color: var(--green-lit);
}
.feature .ico svg { width: 17px; height: 17px; }
.feature h3 { margin-bottom: 3px; font-size: 15.5px; }
.feature p { color: var(--fg-dim); font-size: 14px; line-height: 1.55; }

/* steps */
.step { display: grid; grid-template-columns: 28px 1fr; gap: var(--s3); align-items: center; padding: 13px var(--s4); }
.step .n {
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: rgba(37,211,102,.12); color: var(--green-lit);
  font-size: 12.5px; font-weight: 700;
}
.step p { font-size: 14.5px; }

/* ---------- connect card (hero ka dayan hissa) ---------- */

.connect { position: sticky; top: 92px; }
.connect .head { text-align: center; margin-bottom: var(--s5); }
.connect h3 { font-size: 20px; margin-bottom: 6px; }

.note {
  display: flex; gap: 10px; align-items: flex-start;
  background: rgba(37,211,102,.06);
  border: 1px solid rgba(37,211,102,.16);
  border-radius: var(--r-sm);
  padding: 12px 14px; margin-bottom: var(--s4);
  font-size: 13.5px; color: var(--fg-dim);
}
.note svg { width: 15px; height: 15px; color: var(--green-lit); flex: none; margin-top: 2px; }

.field { display: grid; gap: 7px; margin-bottom: var(--s3); }
.field label { font-size: 13px; font-weight: 600; color: var(--fg-dim); }

/* Checkbox aur radio browser ke apne neele rang me aate hain, jo poore safhe se
   alag lagta hai. accent-color se wo bhi wahi green le lete hain, aur unka apna
   native behaviour bhi bacha rehta hai (jo apna banane se aksar toot jata hai). */
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--green);
  width: auto;
  min-height: 0;
  cursor: pointer;
}

input, select, textarea {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--fg);
  font: inherit; font-size: 15px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
textarea { padding: 12px 14px; min-height: 84px; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--fg-faint); }
input:focus, select:focus, textarea:focus {
  border-color: rgba(37,211,102,.5);
  box-shadow: 0 0 0 3px var(--green-glow);
  outline: none;
}

.code-box {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: clamp(22px, 4.4vw, 30px); font-weight: 600;
  letter-spacing: .16em; text-align: center;
  padding: 20px 12px; margin: var(--s4) 0;
  border-radius: var(--r);
  border: 1px dashed rgba(37,211,102,.35);
  background: rgba(37,211,102,.05);
  color: var(--green-lit);
  overflow-x: auto;
}

.qr-frame {
  display: grid; place-items: center;
  padding: 14px; border-radius: var(--r);
  background: #fff;
  margin: var(--s4) auto;
  width: fit-content;
  box-shadow: 0 20px 60px -30px rgba(37,211,102,.55);
}
.qr-frame img { display: block; width: 260px; height: 260px; max-width: 100%; }

.status {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 14px; color: var(--fg-dim); text-align: center;
}
.status .spin {
  width: 13px; height: 13px; flex: none;
  border: 2px solid var(--line); border-top-color: var(--green);
  border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.err { color: var(--danger); font-size: 14px; margin-top: 10px; }

/* ---------- hero ---------- */

.hero { padding: var(--s8) 0 80px; }

/* DOM ki tarteeb hai: taaruf, jorne ka card, baqi tafseel. Chhoti screen par
   wahi tarteeb chalti hai aur wo theek hai: banda taaruf parh kar seedha kaam
   par pohanch jata hai, use pehle poori tafseel se guzarna nahi parta.
   Bari screen par ye grid card ko daayen le jata hai aur tafseel ko taaruf ke
   neeche, yani nazar wahi hai jo pehle thi. */
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  grid-template-areas:
    "intro card"
    "more  card";
  column-gap: var(--s8);
  row-gap: var(--s6);
  align-items: start;
}
.hero-intro { grid-area: intro; }
.connect    { grid-area: card; }
.hero-more  { grid-area: more; }

@media (max-width: 980px) {
  .hero-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "intro" "card" "more";
    row-gap: var(--s7);
  }
  .connect { position: static; }
}
.hero h1 { margin: var(--s4) 0 var(--s4); }
.hero .lede { margin-bottom: var(--s6); }

.stats { display: flex; gap: var(--s6); flex-wrap: wrap; margin-top: var(--s6); }
.stat .k { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.stat .v { font-size: 13px; color: var(--fg-dim); }

/* ---------- dashboard ---------- */

.app-bar {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
  padding: 12px 0;
  background: rgba(11,20,26,.82); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.tabs { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.tab {
  min-height: 36px; padding: 0 14px; border-radius: var(--r-pill);
  background: transparent; border: 1px solid transparent; color: var(--fg-dim);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.tab:hover { color: var(--fg); }
.tab.on { color: var(--fg); background: var(--surface-2); border-color: var(--line); }

.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface);
  font-size: 12.5px; font-weight: 600; color: var(--fg-dim);
}
.pill.ok { color: var(--green-lit); border-color: rgba(37,211,102,.3); background: rgba(37,211,102,.07); }
.pill.warn { color: var(--warn); border-color: rgba(229,162,60,.3); background: rgba(229,162,60,.07); }

.split { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: var(--s4); }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

.list { list-style: none; margin: 0; padding: 0; }
.list li {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.list li:last-child { border-bottom: 0; }
.list li > .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }

#chats li { cursor: pointer; border-radius: var(--r-sm); border-bottom: 1px solid var(--line-soft); }
#chats li:hover { background: var(--surface-2); }
#chats li[aria-selected="true"] { background: rgba(37,211,102,.08); }
/* Dono panel ek hi qad ke. max-height rakhne se wo apne andar ke maal jitne
   hi rehte the, is liye khali chat wala panel adha kata hua lagta tha.

   Qad ab CARD par hai, andar ki fehrist par nahi: card ke andar ab sar (search
   aur do khane) aur pair (likhne ki jagah) bhi hain, aur agar qad fehrist par
   rakha jaye to wo mil kar card ko us se lamba kar dete hain. */
.chatlist-card, .chatpane { height: 68vh; }
#chats, #messages { flex: 1; min-height: 0; overflow: auto; }
@media (max-width: 860px) { .chatlist-card, .chatpane { height: 52vh; } }

#messages li { border-bottom: 0; padding: 8px 12px; }
#messages li .bubble {
  max-width: 78%; padding: 9px 13px; border-radius: 14px;
  background: var(--surface-2); border: 1px solid var(--line-soft);
  font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere;
}
#messages li.me { justify-content: flex-end; }
#messages li.me .bubble { background: var(--green-deep); border-color: rgba(37,211,102,.22); }
#messages li .who { font-size: 12px; color: var(--fg-dim); margin-bottom: 3px; }

.pre {
  white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--bg); border: 1px solid var(--line-soft);
  border-radius: var(--r-sm); padding: 14px; margin: 0 0 var(--s4);
  font: 13.5px/1.6 ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  color: var(--fg-dim);
  max-height: 42vh; overflow: auto;
}

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--s3); }
.tile { border: 1px solid var(--line-soft); border-radius: var(--r-sm); padding: var(--s3); background: var(--surface); }
.tile .meta { font-size: 12px; color: var(--fg-faint); margin-bottom: 8px; }

.empty { text-align: center; padding: var(--s7) var(--s4); color: var(--fg-dim); }
.empty svg { width: 30px; height: 30px; color: var(--line); margin-bottom: var(--s3); }

/* ---------- footer ---------- */

.foot {
  border-top: 1px solid var(--line-soft);
  padding: var(--s7) 0;
  color: var(--fg-faint); font-size: 13.5px;
}
.foot a { color: var(--fg-dim); text-decoration: none; }
.foot a:hover { color: var(--fg); }

/* ---------- reveal ---------- */
/* Ek halka sa uthna, sirf pehli dafa. Ye maani rakhta hai (cheez aa rahi hai),
   sajawat nahi. reduced-motion par ye khud band ho jata hai. */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

[hidden] { display: none !important; }

/* ============================================================ chats ka safha
   Ek hi fehrist: chat bhi, contact bhi, aur allow karne ka chip bhi. Pehle ye
   do alag safhe thay aur dono me WAHI qatar thi, bas ek me tick-box aur doosre
   me paighaam. Banda ek jagah chat dekhta aur allow karne ke liye doosre safhe
   par ja kar wahi naam dobara dhoondta.                                      */

.chatlist-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }

.chatlist-head {
  padding: var(--s3) var(--s3) var(--s2);
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
}

.searchbox { position: relative; display: flex; align-items: center; }
.searchbox svg {
  position: absolute; left: 12px; width: 17px; height: 17px;
  color: var(--fg-faint); pointer-events: none;
}
.searchbox input {
  width: 100%; min-height: 40px; padding: 0 12px 0 38px;
  border-radius: var(--r-pill); border: 1px solid transparent;
  background: var(--surface-2); color: var(--fg); font: inherit; font-size: 14px;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.searchbox input::placeholder { color: var(--fg-faint); }
.searchbox input:focus { outline: none; border-color: rgba(37,211,102,.45); background: var(--bg); }
.searchbox input::-webkit-search-cancel-button { filter: invert(.6); }

/* Do khane: All aur Allowed. Tab ki shakl wahi jo upar app-bar me hai, taake
   ek hi zubaan poore product par chale. */
.seg { display: flex; gap: 6px; margin-top: var(--s3); }
.seg-btn {
  min-height: 32px; padding: 0 14px; border-radius: var(--r-pill);
  border: 1px solid transparent; background: var(--surface-2); color: var(--fg-dim);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.seg-btn:hover { color: var(--fg); }
.seg-btn.on {
  color: #04210F; background: var(--green); border-color: var(--green);
}
.chatlist-note { margin: var(--s2) 2px 2px; font-size: 12px; }
.chatlist-note.warnish { color: var(--warn); }

/* --- ek qatar ------------------------------------------------------------ */

.chatlist { flex: 1; }
.chatlist li {
  gap: var(--s3); padding: 10px 12px; flex-wrap: nowrap; align-items: center;
  border-radius: 0; border-bottom: 1px solid var(--line-soft);
}

.avatar {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 700; letter-spacing: .02em;
  color: oklch(.92 .04 var(--h, 150));
  background: oklch(.34 .06 var(--h, 150));
  border: 1px solid oklch(.44 .07 var(--h, 150));
  user-select: none;
}
.avatar.grp { border-radius: var(--r); }

.row-top { display: flex; align-items: baseline; gap: var(--s2); }
.row-name {
  flex: 1; min-width: 0; font-size: 14.5px; font-weight: 600; color: var(--fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row-time { flex: none; font-size: 11.5px; color: var(--fg-faint); font-variant-numeric: tabular-nums; }
.row-sub {
  display: block; margin-top: 2px; font-size: 13px; color: var(--fg-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row-sub.faint { color: var(--fg-faint); font-style: italic; }
.chatlist li > .grow { display: block; }

/* --- wo green chip -------------------------------------------------------
   Band haalat me bhi nazar aata hai. Sirf hover par dikhana saaf lagta hai
   magar chhoone wali screen par wo cheez ghayab ho jati hai.                */

.chip {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  min-height: 26px; padding: 0 10px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: transparent;
  color: var(--fg-faint); font: inherit; font-size: 11.5px; font-weight: 700;
  letter-spacing: .01em; cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease),
              border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.chip:hover { color: var(--fg-dim); border-color: #2C3E4C; }
.chip:disabled { opacity: .5; cursor: default; }
.chip .chip-mark { font-size: 12px; line-height: 1; }
.chip .chip-word { display: none; }
.chip.on {
  color: var(--green-lit); border-color: rgba(37,211,102,.42);
  background: rgba(37,211,102,.1);
}
.chip.on .chip-word { display: inline; }
.chip.on:hover { box-shadow: 0 8px 22px -12px var(--green-glow); }

/* --- daayan panel -------------------------------------------------------- */

.chatpane { padding: 0; display: flex; flex-direction: column; overflow: hidden; }

.chat-head {
  display: flex; align-items: center; gap: var(--s3);
  padding: 10px 14px; border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
}
.chat-head > .grow { min-width: 0; }
.chat-title {
  display: block; font-size: 15px; font-weight: 600; color: var(--fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-sub { display: block; font-size: 12px; color: var(--fg-dim); }

#messages { flex: 1; padding: var(--s3) 0; }
#messages li { position: relative; }
#messages li .bubble { position: relative; padding-right: 34px; }
#messages li .stamp {
  margin-top: 3px; font-size: 10.5px; color: var(--fg-faint);
  text-align: right; font-variant-numeric: tabular-nums;
}
#messages li .said { white-space: pre-wrap; }

.msg-more {
  position: absolute; top: 4px; right: 6px;
  width: 22px; height: 22px; border-radius: 6px;
  border: 0; background: transparent; color: var(--fg-faint);
  font: inherit; font-size: 15px; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease);
}
#messages li:hover .msg-more, .msg-more:focus-visible { opacity: 1; }
.msg-more:hover { color: var(--fg); background: rgba(255,255,255,.06); }

/* Menu `fixed` hai: ye ek scroll hone wale dabbe ke andar se khulta hai aur
   absolute rakhne par wahin kat jata. */
.msg-menu {
  position: fixed; z-index: 400; min-width: 190px; padding: 6px;
  border-radius: var(--r); border: 1px solid var(--line);
  background: var(--surface-2); box-shadow: var(--shadow-lift);
  animation: menu-in 140ms var(--ease);
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px) } to { opacity: 1; transform: none } }

.msg-react { display: flex; gap: 2px; padding: 2px 2px 6px; border-bottom: 1px solid var(--line-soft); }
.msg-react button {
  width: 30px; height: 30px; border-radius: 50%; border: 0;
  background: transparent; font-size: 16px; line-height: 1; cursor: pointer;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.msg-react button:hover { background: rgba(255,255,255,.08); transform: scale(1.15); }

.msg-item {
  display: block; width: 100%; text-align: left;
  min-height: 34px; padding: 0 10px; margin-top: 2px; border-radius: var(--r-sm);
  border: 0; background: transparent; color: var(--fg);
  font: inherit; font-size: 13.5px; cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.msg-item:hover { background: rgba(255,255,255,.06); }
.msg-item.danger { color: var(--danger); }
.msg-item.danger:hover { background: rgba(241,92,109,.12); }

/* --- likhne ki jagah ----------------------------------------------------- */

.composer {
  display: flex; gap: var(--s2); align-items: center;
  padding: 10px 12px; border-top: 1px solid var(--line-soft); background: var(--surface);
}
.composer input {
  flex: 1; min-width: 0; min-height: 40px; padding: 0 14px;
  border-radius: var(--r-pill); border: 1px solid transparent;
  background: var(--surface-2); color: var(--fg); font: inherit; font-size: 14px;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.composer input::placeholder { color: var(--fg-faint); }
.composer input:focus { outline: none; border-color: rgba(37,211,102,.45); background: var(--bg); }
.composer-err { margin: 0; padding: 0 12px 10px; }

/* --- chhoti khabar ------------------------------------------------------- */

.toast {
  position: fixed; left: 50%; bottom: 22px; z-index: 500;
  max-width: min(92vw, 460px); padding: 10px 16px;
  border-radius: var(--r-pill); border: 1px solid var(--line);
  background: var(--surface-2); color: var(--fg);
  font-size: 13.5px; box-shadow: var(--shadow-lift);
  opacity: 0; transform: translate(-50%, 10px); pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 860px) {
  .chatpane { min-height: 52vh; }
}

@media (prefers-reduced-motion: reduce) {
  .msg-menu { animation: none; }
  .toast { transition: opacity 1ms linear; transform: translate(-50%, 0); }
  .msg-react button:hover { transform: none; }
}

/* Dashboard ki chaurai landing se alag hai.
   Landing par 1180px theek hai: wahan matn parhna hai aur lambi lakeerein
   parhna mushkil kar deti hain. Dashboard par ulta masla tha: chat ki fehrist
   aur paighaam dono ek patli si nali me nichur rahe thay, naam "Usman Buk..."
   ban kar kat jate thay, aur donon taraf khali screen padi rehti thi. */
#step-dash .wrap { width: min(1560px, 100% - 32px); }
#step-dash .split { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); }
@media (max-width: 1100px) { #step-dash .split { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); } }
@media (max-width: 860px)  { #step-dash .split { grid-template-columns: 1fr; } }

/* Khali panel par khali panel mat chhoRo. */
.chatpane .empty { margin: auto; padding: var(--s6); text-align: center; }

/* ============================================== app shell: rail + do khaane
   Dashboard ab safha nahi, aik app hai: poori screen, apna rail, aur andar ka
   hissa khud scroll hota hai. Pehle ye landing hi ki tarah ek 1180px ki patli
   nali me baitha tha aur chat ki fehrist us me nichur rahi thi.              */

#step-dash { height: 100dvh; }
.shell { display: grid; grid-template-columns: 76px minmax(0, 1fr); height: 100dvh; }

.rail {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--s3) 0; background: var(--surface);
  border-right: 1px solid var(--line-soft);
}
.rail-mark {
  width: 34px; height: 34px; border-radius: 10px; margin-bottom: var(--s3);
  display: grid; place-items: center; background: var(--green); flex: none;
}
.rail-mark svg { width: 20px; height: 20px; }
.rail-group { display: flex; flex-direction: column; gap: 2px; width: 100%; align-items: center; }
.rail-foot { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: var(--s2); width: 100%; }

.rail-btn {
  position: relative; width: 60px; padding: 8px 0 6px; border: 0; border-radius: var(--r);
  background: transparent; color: var(--fg-dim); cursor: pointer;
  display: grid; justify-items: center; gap: 3px; font: inherit;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.rail-btn svg { width: 21px; height: 21px; }
.rail-word { font-size: 9.5px; font-weight: 600; letter-spacing: .01em; }
.rail-btn:hover { color: var(--fg); background: var(--surface-2); }
.rail-btn.on { color: var(--green-lit); background: rgba(37,211,102,.1); }
.rail-btn:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }

.rail-pill { padding: 3px 8px; font-size: 10px; text-align: center; }

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

/* Chats: donon khaane poori oonchai, WhatsApp ki tarah beech me sirf lakeer. */
#tab-chats { display: flex; }
#tab-chats[hidden] { display: none; }
#tab-chats .split {
  flex: 1; min-height: 0; display: grid; gap: 0;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
}
#step-dash .chatlist-card, #step-dash .chatpane {
  height: auto; min-height: 0; border-radius: 0; border: 0; box-shadow: none;
  background: var(--bg);
}
#step-dash .chatlist-card { border-right: 1px solid var(--line-soft); background: var(--surface); }
@media (max-width: 900px) {
  .shell { grid-template-columns: 62px minmax(0, 1fr); }
  .rail-word { display: none; }
  .rail-btn { width: 46px; padding: 10px 0; }
  #tab-chats .split { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); }
}

/* Baqi safhe: apna scroll, apni saans. */
.scrollpane { overflow: auto; }
.pane-in { width: min(1180px, 100% - 48px); margin-inline: auto; padding: var(--s6) 0 var(--s8); }
.pane-title { font-size: 26px; letter-spacing: -.02em; margin: 0; }
.pane-sub { margin: 6px 0 var(--s6); }

/* --- dashboard ke tiles -------------------------------------------------- */

.ov-why {
  margin: 0 0 var(--s5); padding: 12px 16px; border-radius: var(--r);
  border: 1px solid rgba(229,162,60,.32); background: rgba(229,162,60,.08);
  color: var(--warn); font-size: 14px;
}
.ov-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s3); }
.tile {
  padding: var(--s4) var(--s5); border-radius: var(--r);
  border: 1px solid var(--line-soft); background: var(--surface);
  display: grid; gap: 2px;
}
.tile-n { font-size: 30px; font-weight: 700; letter-spacing: -.03em; color: var(--fg); font-variant-numeric: tabular-nums; }
.tile-l { font-size: 12.5px; color: var(--fg-dim); }
.ov-grid { margin-top: var(--s4); }
.ov-facts { margin-top: var(--s4); }
.ov-facts .list li { justify-content: space-between; }
.ov-facts .fact-v { color: var(--fg); font-weight: 600; }
.ov-facts .fact-v.bad { color: var(--warn); }

/* ------------------------------------------------ paighaam WhatsApp ki tarah */

/* Rang WhatsApp ke apne hain. Pehle yahan andaze se sabz rakha tha aur wo
   saath rakh kar foran pakra jata tha: aane wala bubble zyada neela aur jane
   wala zyada gehra tha.                                                     */
#messages {
  padding: var(--s3) 5%;
  background-color: #0B141A;
  /* Halka sa naqsh, warna khali maidan lagta hai. Ye apna banaya hua hai. */
  background-image:
    radial-gradient(circle at 25% 25%, rgba(255,255,255,.014) 1.2px, transparent 1.3px),
    radial-gradient(circle at 75% 75%, rgba(255,255,255,.014) 1.2px, transparent 1.3px);
  background-size: 34px 34px, 34px 34px;
}

#messages li { padding: 1px 0; display: flex; }
#messages li.same { padding-top: 0; }
#messages li .bubble {
  position: relative;
  max-width: min(65%, 480px);
  padding: 6px 9px 8px;
  border: 0;
  border-radius: 7.5px;
  background: #202C33;
  box-shadow: 0 1px .5px rgba(11,20,26,.13);
  font-size: 14.2px;
  line-height: 19px;
  color: #E9EDEF;
}
#messages li.me { justify-content: flex-end; }
#messages li.me .bubble { background: #005C4B; border-color: transparent; }

/* Poonch sirf pehle bubble par, jaise WhatsApp me. Musalsal paighaam sidhe
   kinare ke saath chipke rehte hain.                                        */
#messages li:not(.same) .bubble { border-top-left-radius: 0; }
#messages li:not(.same).me .bubble { border-top-left-radius: 7.5px; border-top-right-radius: 0; }
#messages li:not(.same) .bubble::before {
  content: ''; position: absolute; top: 0; left: -8px;
  width: 8px; height: 13px;
  background: #202C33;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}
#messages li:not(.same).me .bubble::before {
  left: auto; right: -8px;
  background: #005C4B;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

#messages li .who {
  font-size: 12.8px; font-weight: 500; margin-bottom: 2px;
  color: #53BDEB;
}
#messages li .said { white-space: pre-wrap; overflow-wrap: anywhere; }
#messages li .said.faint { color: var(--fg-faint); font-style: italic; }

/* Waqt matn ke andar hi baithta hai, neeche dayen kone me. Jagah aakhri
   lakeer me pehle se chhori jati hai (.said ke baad khali span), warna waqt
   lafzon par charh jata hai.                                                */
#messages li .stamp {
  position: absolute; right: 9px; bottom: 5px;
  font-size: 11px; line-height: 15px;
  color: rgba(233,237,239,.55);
  display: flex; align-items: center; gap: 3px;
  white-space: nowrap;
}
#messages li.me .stamp { color: rgba(233,237,239,.6); }
.stamp-space { display: inline-block; width: 58px; height: 1px; }
.stamp-space.wide { width: 72px; }
.tick { width: 15px; height: 15px; flex: none; }
.tick svg { width: 100%; height: 100%; fill: currentColor; display: block; }

.day-sep { justify-content: center !important; padding: var(--s3) 0 !important; }
.day-sep span {
  padding: 5px 12px; border-radius: 7.5px;
  background: #182229; border: 0;
  font-size: 12.2px; font-weight: 500; color: #8696A0;
  text-transform: uppercase; letter-spacing: .02em;
}

/* --- awaz ka player ------------------------------------------------------ */

.vn { display: flex; align-items: center; gap: 9px; width: 258px; max-width: 100%; padding: 3px 0 1px; }
.vn-play {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  border: 0; cursor: pointer; padding: 0;
  background: transparent; color: #8696A0;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.vn-play svg { width: 26px; height: 26px; fill: currentColor; }
.vn-play:hover { color: #E9EDEF; }
.vn.on .vn-play { color: #E9EDEF; }
.vn-play:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.vn-mid { flex: 1; min-width: 0; }
.vn-wave {
  display: flex; align-items: center; gap: 2px;
  height: 26px; cursor: pointer;
}
.vn-bar {
  flex: 1; min-width: 2px; border-radius: 1px;
  background: #667781;
  transition: background 90ms linear, height 260ms var(--ease);
}
.vn-bar.done { background: #53BDEB; }
li.me .vn-bar { background: #4E8F80; }
li.me .vn-bar.done { background: #A8E5D6; }

.vn-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 1px; }
.vn-time { font-size: 11px; color: rgba(233,237,239,.55); font-variant-numeric: tabular-nums; }
.vn-rate {
  border: 0; background: rgba(255,255,255,.08); color: rgba(233,237,239,.75);
  font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: var(--r-pill);
  cursor: pointer;
}
.vn-rate:hover { background: rgba(255,255,255,.14); color: #E9EDEF; }
/* Jis bubble me media ya card ho, wahan waqt apni ALAG lakeer par.
   Ye pehle `li .bubble:has(...)` likha tha aur chalta nahi tha: uper wala
   qaida `#messages` se shuru hota hai, aur ID ka zor class se zyada hota hai.
   Nateeja ye ke waqt absolute hi raha aur awaz ke neeche likhe matn ke UPER
   charh gaya. Zor barabar karne ke liye yahan bhi wahi ID.                  */
#messages li .bubble:is(:has(.vn), :has(.bub-said), :has(.lk), :has(.bub-doc),
                        :has(.bub-img), :has(.bub-vid), :has(.bub-sticker)) .stamp {
  position: static; justify-content: flex-end; margin-top: 3px;
}

.bub-said {
  margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.09);
  font-size: 12.6px; line-height: 17px; color: rgba(233,237,239,.6); white-space: pre-wrap;
}

/* --- tasveer, video, kaghaz --------------------------------------------- */

.bub-img {
  display: block; max-width: 300px; max-height: 340px; width: auto;
  border-radius: 6px; margin: 1px 0 2px; cursor: zoom-in;
}
.bub-img:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.bub-sticker { display: block; width: 130px; height: auto; margin: 2px 0; }

.bub-vid { position: relative; display: block; cursor: pointer; margin: 1px 0 2px; width: max-content; max-width: 100%; }
.bub-vid video { display: block; max-width: 300px; max-height: 340px; border-radius: 6px; }
.bub-vid-play {
  position: absolute; inset: 0; margin: auto;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(0,0,0,.55);
  display: grid; place-items: center;
}
.bub-vid-play::after {
  content: ''; width: 0; height: 0; margin-left: 3px;
  border-left: 15px solid #fff;
  border-top: 9px solid transparent; border-bottom: 9px solid transparent;
}
.bub-vid:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.bub-doc {
  display: flex; align-items: center; gap: var(--s2);
  padding: 9px 11px; margin: 2px 0; border-radius: 6px;
  background: rgba(255,255,255,.06); color: var(--fg); text-decoration: none;
  font-size: 13.5px;
}
.bub-doc:hover { background: rgba(255,255,255,.1); }
.bub-doc-i { font-size: 18px; }

/* --- link ka preview ----------------------------------------------------- */
/*
   Sirf naam likh dena kaafi nahi tha: WhatsApp me link ek card banta hai,
   uper tasveer, phir sarkhi, phir chhota sa byora aur website ka naam. Tasveer
   seedhi us website se aati hai, hum us ko apne server par nahi rakhte.     */

.lk {
  display: block; text-decoration: none; color: inherit;
  margin: 1px 0 3px; border-radius: 6px; overflow: hidden;
  background: rgba(0,0,0,.22);
}
li.me .lk { background: rgba(0,0,0,.18); }
.lk:hover { background: rgba(0,0,0,.3); }
.lk-img { display: block; width: 100%; max-height: 168px; object-fit: cover; background: rgba(255,255,255,.04); }
.lk-in { padding: 8px 10px; display: grid; gap: 2px; }
.lk-t {
  font-size: 13.4px; line-height: 18px; font-weight: 500; color: #E9EDEF;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lk-d {
  font-size: 12.4px; line-height: 17px; color: rgba(233,237,239,.6);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lk-h { font-size: 12px; color: rgba(233,237,239,.45); }
.said a, .lk + .said a { color: #53BDEB; }

/* --- bara kar ke dekhna -------------------------------------------------- */

.lb {
  position: fixed; inset: 0; z-index: 400;
  display: grid; place-items: center;
  background: rgba(11,20,26,.94);
  padding: var(--s6);
  animation: lb-in 160ms var(--ease);
}
@keyframes lb-in { from { opacity: 0 } to { opacity: 1 } }
.lb-item { max-width: 100%; max-height: 86dvh; border-radius: 6px; display: block; }
.lb-x, .lb-get {
  position: absolute; top: var(--s4);
  border: 0; cursor: pointer; border-radius: var(--r-pill);
  background: rgba(255,255,255,.1); color: #E9EDEF;
  font-size: 14px; padding: 8px 14px; text-decoration: none;
}
.lb-x { right: var(--s4); width: 40px; height: 40px; padding: 0; font-size: 17px; }
.lb-get { left: var(--s4); }
.lb-x:hover, .lb-get:hover { background: rgba(255,255,255,.2); }

@media (prefers-reduced-motion: reduce) {
  .lb { animation: none }
  .vn-bar { transition: none }
}

/* ------------------------------------------- jab tak WhatsApp jur na jaye
   Ye sirf khoobsurti nahi. Jure baghair safhe par jo bhi nazar aata hai wo
   purana ya adhoora hota hai (chats, ginti, sab), aur us par daba kar kuch
   karna nakaam hi hota hai. Banda samajhta hai ke nizaam kharab hai, jabke
   asal baat sirf itni hai ke abhi jur raha hai.                            */

.conn-wait {
  position: absolute; inset: 0; z-index: 300;
  display: grid; place-items: center;
  background: rgba(11, 20, 26, .86); backdrop-filter: blur(6px);
}
.conn-wait[hidden] { display: none; }
.conn-wait-card {
  display: grid; justify-items: center; gap: var(--s3);
  padding: var(--s6) var(--s7); max-width: 380px; text-align: center;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--surface); box-shadow: var(--shadow-lift);
}
.conn-wait-card h3 { margin: 0; font-size: 17px; }
.conn-wait-card p { margin: 0; }

/* Ye .status ke bahar bhi chalna chahiye, is liye apni tareef. */
.spin.big {
  width: 26px; height: 26px; display: block;
  border: 3px solid var(--line); border-top-color: var(--green);
  border-radius: 50%; animation: spin .8s linear infinite;
}
#step-dash { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .spin.big { animation-duration: 2s; }
}

/* Wo sawal jo sirf malik ka jawab maangte hain. Ye us ki WhatsApp chat me
   kabhi nahi jate: wahan wo chand ghanton me chat bhar dete thay. */
.ov-asks { margin-top: var(--s4); }
.ov-asks .list li { align-items: flex-start; gap: var(--s3); }
.ov-asks .row-sub { color: var(--fg-faint); }

/* --------------------------------------------------- scroll ki patli lakeer
   Browser ki apni moti salakh yahan bhaddi lagti thi: chat ke kinare par ek
   khaki patti khari rehti thi. WhatsApp me wo patli hai, matn ke UPER tairti
   hai (jagah nahi khati), aur tab tak chhupi rehti hai jab tak us khane par
   haath na jaye.                                                            */

#messages, #chats, .scrollpane, .chatlist-card .list, .tabbody {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color var(--dur) var(--ease);
}
#messages:hover, #chats:hover, .scrollpane:hover,
.chatlist-card:hover .list, .tabbody:hover {
  scrollbar-color: rgba(134,150,160,.42) transparent;
}

#messages::-webkit-scrollbar,
#chats::-webkit-scrollbar,
.scrollpane::-webkit-scrollbar,
.tabbody::-webkit-scrollbar { width: 6px; height: 6px; }

#messages::-webkit-scrollbar-track,
#chats::-webkit-scrollbar-track,
.scrollpane::-webkit-scrollbar-track,
.tabbody::-webkit-scrollbar-track { background: transparent; }

#messages::-webkit-scrollbar-thumb,
#chats::-webkit-scrollbar-thumb,
.scrollpane::-webkit-scrollbar-thumb,
.tabbody::-webkit-scrollbar-thumb {
  background: transparent; border-radius: 3px;
  transition: background var(--dur) var(--ease);
}
#messages:hover::-webkit-scrollbar-thumb,
#chats:hover::-webkit-scrollbar-thumb,
.scrollpane:hover::-webkit-scrollbar-thumb,
.tabbody:hover::-webkit-scrollbar-thumb { background: rgba(134,150,160,.42); }

#messages::-webkit-scrollbar-thumb:hover,
#chats::-webkit-scrollbar-thumb:hover,
.scrollpane::-webkit-scrollbar-thumb:hover,
.tabbody::-webkit-scrollbar-thumb:hover { background: rgba(134,150,160,.65); }

/* Salakh matn ke uper tairti hai, us ke saath jagah nahi ghairti. */
#messages, #chats { overflow-y: overlay; overscroll-behavior: contain; }

/* Tasveer ke utarne tak us ka apna dabba. Bina is ke naap sifar rehta hai,
   aur sifar naap wali cheez "nazar me aayi" nahi ginti: lazy loading ka
   pehiya kabhi ghoomta hi nahi aur tasveer hamesha utarti reh jati hai.   */
.bub-img.loading {
  min-width: 200px; min-height: 150px;
  background: rgba(255,255,255,.05);
}
.bub-gone {
  padding: 14px 16px; border-radius: 6px; margin: 1px 0 2px;
  background: rgba(255,255,255,.05); color: var(--fg-faint); font-size: 13px;
}