/* ═══════════════════════════════════════════════════════════════════════
   discuss.css — Suhbatlar moduli (hrm_discuss) interfeysi.
   TZ: TZ/discuss/L2_INTERFEYS.md · Dizayn manbasi: "Bittada HRM.dc (1).html"
   (`isDiscuss` bloki, 745–800-qatorlar).

   QOIDALAR (L2 §1):
     1. Yangi rang/shrift/radius YO'Q — faqat --hb-* tokenlari.
     2. `hb-components.css` O'ZGARTIRILMAYDI. Hamma narsa shu faylda, `hbd-` prefiksi bilan.
     3. MOBIL-BIRINCHI: baza uslub = 360px telefon, ustiga `min-width` qo'shiladi.
     4. Faqat `transform`/`opacity` animatsiya qilinadi (kompozitor qatlami).
     5. Light + dark ikkalasi ham ishlaydi (tokenlar o'zi hal qiladi).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Harakat shkalasi (L2 §12.1) ─────────────────────────────────────── */
:root{
  --hbd-e-out:cubic-bezier(.2,.8,.3,1);
  --hbd-e-in:cubic-bezier(.4,0,1,1);
  --hbd-e-spring:cubic-bezier(.34,1.56,.64,1);
  --hbd-t-micro:120ms;
  --hbd-t-fast:180ms;
  --hbd-t-base:240ms;
  --hbd-t-slow:360ms;
  --hbd-row-h:64px;
  --hbd-bubble-radius:var(--hb-radius-md);
  /* Havola rangi — `--hb-*` da ko'k yo'q (dizayn tizimi laym/qora), shu bois
     shu yerda `hbd-` prefiksli o'z tokenimiz. Qoida 1 buzilmaydi: rang
     modul ichida qoladi, umumiy tizimga qo'shilmaydi. */
  --hbd-link:#2f81f7;
  --hbd-link-rgb:47,129,247;
  --hbd-link-hov:#58a6ff;
  --hbd-link-own:#12406e;      /* yorqin laym fonda o'qiladigan to'q ko'k */
}
:root[data-theme="light"]{--hbd-link:#0b62d6;--hbd-link-rgb:11,98,214;--hbd-link-hov:#0a4fac}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]):not([data-theme="light"]){
    --hbd-link:#0b62d6;--hbd-link-rgb:11,98,214;--hbd-link-hov:#0a4fac}
}

/* Zichlik (L2 §13.2) */
.hbd-density-compact{--hbd-row-h:54px}
/* Puflama uslubi */
.hbd-bubble-soft{--hbd-bubble-radius:12px}
.hbd-bubble-flat{--hbd-bubble-radius:6px}

/* Chat to'liq balandlikni oladi — shell padding'i olib tashlanadi.
   Klass JS orqali `.hb-content`ga qo'shiladi (umumiy shablon o'zgarmasin).

   [TUZOQ] `animation:none` MAJBURIY. `.hb-content` da `hb-screenin`
   animatsiyasi `fill-mode:both` bilan turadi; u `transform`ni animatsiya
   qilgani uchun brauzer bu elementni `position:fixed` avlodlar uchun
   CONTAINING BLOCK qilib qoldiradi — natijada mobildagi to'liq ekranli
   suhbat oynasi (`.hbd-thread{position:fixed;inset:0}`) topbar ostida
   qolib ketadi (2026-07-30 tekshiruvi). */
.hb-content.hbd-flush{padding:0;overflow:hidden;animation:none}

/* ═══════════════════════════════════════════════════════════════════════
   1. Karkas — MOBIL BIRINCHI (bitta ustun)
   ═══════════════════════════════════════════════════════════════════════ */
.hbd{
  height:100%;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);
  /* [TUZOQ] Qator ANIQ bo'lishi shart. `auto` qoldirilsa qator balandligi
     kontentga teng bo'ladi va panel to'liq balandlikni OLMAYDI (mobilda
     ro'yxat yarim ekranda tugab qolgan edi — 2026-07-30 tekshiruvi). */
  grid-template-rows:minmax(0,1fr);
  gap:0;background:var(--hb-bg);
}
.hbd-pane{min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--hb-sfc);
  border:1px solid var(--hb-brd);border-radius:0;overflow:hidden}

/* Mobilda suhbat oynasi ro'yxat ustiga sirg'alib chiqadi */
.hbd-thread{
  position:fixed;inset:0;z-index:60;transform:translateX(100%);
  transition:transform var(--hbd-t-base) var(--hbd-e-out);
  border:none;
}
.hbd-thread.open{transform:none}
.hbd-list{transition:transform var(--hbd-t-base) var(--hbd-e-out),opacity var(--hbd-t-base)}
.hbd-thread-open .hbd-list{transform:scale(.96);opacity:.6}   /* iOS naqshi */
.hbd-info{display:none}

/* Thread ochilganda pastki nav xalaqit bermasin */
.hbd-thread-open .hb-bottomnav{display:none!important}

@media (min-width:861px){
  .hbd{grid-template-columns:300px minmax(0,1fr);gap:12px;padding:12px}
  .hbd-pane{border-radius:var(--hb-radius)}
  /* [TUZOQ] `relative` (static EMAS) — .hbd-jump/.hbd-drop/.hbd-pop absolyut
     bolalari shu panelga bog'lanishi kerak. Shablonda `hbd-rel` klassi
     ISHLATILMAYDI: u keyinroq e'lon qilingani uchun mobildagi
     `position:fixed`ni jimgina bekor qilardi (2026-07-30 tekshiruvi). */
  .hbd-thread{position:relative;transform:none;z-index:auto;border:1px solid var(--hb-brd)}
  .hbd-list{transform:none!important;opacity:1!important}
  .hbd-back{display:none!important}
}
@media (min-width:1100px){
  .hbd{grid-template-columns:320px minmax(0,1fr) 300px}
  .hbd-info{display:flex}
  .hbd-info-btn{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   2. Panel 1 — suhbatlar ro'yxati
   ═══════════════════════════════════════════════════════════════════════ */
.hbd-list-head{padding:12px 14px;border-bottom:1px solid var(--hb-brd);display:flex;
  flex-direction:column;gap:10px;flex:none}
.hbd-list-title-row{display:flex;align-items:center;gap:10px}
.hbd-list-title{font-weight:800;font-size:14px;flex:1}
.hbd-iconbtn{width:34px;height:34px;border-radius:var(--hb-radius-sm);background:var(--hb-sfc2);
  border:1px solid var(--hb-brd);display:grid;place-items:center;cursor:pointer;color:var(--hb-mut);
  flex:none;transition:color var(--hbd-t-micro),border-color var(--hbd-t-micro),transform var(--hbd-t-micro)}
/* ╔═══════════════════════════════════════════════════════════════════╗
   ║ [TUZOQ 2026-08-01] `hidden` ISHLAMAY QOLADI                       ║
   ║                                                                   ║
   ║ Brauzerning o'z qoidasi `[hidden]{display:none}` — SPECIFICITY    ║
   ║ 0,0,1. Har qanday komponent klassi (`.hbd-iconbtn{display:grid}`, ║
   ║ `.hb-btn-ghost{display:inline-flex}` …) 0,1,0 bilan uni bosib     ║
   ║ ketadi. Natijada `el.hidden = true` JIM qoladi — hech qanday      ║
   ║ xato bermaydi, element esa ko'rinib turaveradi.                   ║
   ║                                                                   ║
   ║ Shu sabab: 📹 qo'ng'iroq tugmasi o'chirilgan bo'lsa ham turdi;    ║
   ║ «Yana ko'rsatish» bitta a'zoda ham chiqdi. Quyidagi qoida         ║
   ║ 0,1,1 — komponent klasslaridan kuchliroq, `!important` shart      ║
   ║ emas. Modal `body` ga qo'yiladi, `.hbd` ichida emas — shu bois    ║
   ║ ikkinchi selektor.                                                ║
   ╚═══════════════════════════════════════════════════════════════════╝ */
.hbd [hidden],.hbd-modal-bg [hidden]{display:none}
.hbd-iconbtn[hidden]{display:none}
.hbd-iconbtn:hover{color:var(--hb-txt);border-color:var(--hb-brd2)}
.hbd-iconbtn:active{transform:scale(.94)}
.hbd-iconbtn.acc{background:var(--hb-acc);color:var(--hb-acc-ink);border-color:var(--hb-acc)}

.hbd-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.hbd-tabs::-webkit-scrollbar{display:none}
.hbd-tab{height:30px;padding:0 12px;display:grid;place-items:center;border-radius:var(--hb-pill);
  font-weight:700;font-size:11.5px;white-space:nowrap;cursor:pointer;border:1px solid var(--hb-brd);
  background:transparent;color:var(--hb-mut);transition:.15s;flex:none}
.hbd-tab:hover{color:var(--hb-txt)}
.hbd-tab.active{background:var(--hb-acc);color:var(--hb-acc-ink);border-color:var(--hb-acc)}

.hbd-scrolly{overflow-y:auto;min-height:0;flex:1;overscroll-behavior:contain}

.hbd-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:10px 14px;cursor:pointer;position:relative;min-height:var(--hbd-row-h);
  border-bottom:1px solid var(--hb-brd);transition:background var(--hbd-t-micro)}
.hbd-item:hover{background:var(--hb-sfc2)}
.hbd-item.active{background:var(--hb-sfc2)}
.hbd-item::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--hb-acc);
  transform:scaleY(0);transform-origin:center;transition:transform var(--hbd-t-fast) var(--hbd-e-out)}
.hbd-item.active::before{transform:scaleY(1)}
.hbd-item-mid{display:flex;flex-direction:column;gap:3px;min-width:0}
.hbd-item-name{font-weight:700;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  display:flex;align-items:center;gap:5px}
.hbd-item-last{color:var(--hb-mut);font-size:11.5px;font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.hbd-item-right{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none}
.hbd-item-time{color:var(--hb-mut);font-size:10.5px;font-weight:700;white-space:nowrap}
.hbd-badge{min-width:18px;height:18px;padding:0 5px;border-radius:var(--hb-pill);background:var(--hb-acc);
  color:var(--hb-acc-ink);display:grid;place-items:center;font-size:10px;font-weight:800}
.hbd-badge-pop{animation:hbd-badgepop var(--hbd-t-fast) var(--hbd-e-spring) both}
@keyframes hbd-badgepop{0%{transform:scale(1)}55%{transform:scale(1.25)}100%{transform:scale(1)}}
.hbd-tgmark{color:var(--hb-info);font-size:11px;flex:none}
.hbd-mutemark{color:var(--hb-mut);font-size:10.5px}

/* Avatar + online nuqta */
.hbd-av{position:relative;flex:none}
.hbd-av .hb-avatar{width:38px;height:38px;font-size:12.5px}
.hbd-dot{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:99px;
  background:var(--hb-ok);border:2px solid var(--hb-sfc)}
/* Avatar rang indeksi (1..12) — faqat mavjud tokenlar aralashmasi */
.hbd-c1{background:color-mix(in srgb,var(--hb-acc) 22%,var(--hb-sfc2));color:var(--hb-acc-text)}
.hbd-c2{background:color-mix(in srgb,var(--hb-info) 22%,var(--hb-sfc2));color:var(--hb-info)}
.hbd-c3{background:color-mix(in srgb,var(--hb-violet) 22%,var(--hb-sfc2));color:var(--hb-violet)}
.hbd-c4{background:color-mix(in srgb,var(--hb-warning) 22%,var(--hb-sfc2));color:var(--hb-warning)}
.hbd-c5{background:color-mix(in srgb,var(--hb-danger) 20%,var(--hb-sfc2));color:var(--hb-danger)}
.hbd-c6{background:color-mix(in srgb,var(--hb-ok) 20%,var(--hb-sfc2));color:var(--hb-acc-text)}
.hbd-c7{background:var(--hb-sfc2);color:var(--hb-txt)}
.hbd-c8{background:color-mix(in srgb,var(--hb-info) 34%,var(--hb-sfc2));color:var(--hb-txt)}
.hbd-c9{background:color-mix(in srgb,var(--hb-violet) 34%,var(--hb-sfc2));color:var(--hb-txt)}
.hbd-c10{background:color-mix(in srgb,var(--hb-warning) 30%,var(--hb-sfc2));color:var(--hb-txt)}
.hbd-c11{background:color-mix(in srgb,var(--hb-acc) 34%,var(--hb-sfc2));color:var(--hb-txt)}
.hbd-c12{background:color-mix(in srgb,var(--hb-danger) 30%,var(--hb-sfc2));color:var(--hb-txt)}

/* Skeleton */
.hbd-skel-item{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:12px 14px;align-items:center}
.hbd-skel-av{width:38px;height:38px;border-radius:99px;background:var(--hb-sfc2);animation:hb-pulse 1.3s ease infinite}
.hbd-skel-ln{height:11px;border-radius:6px;background:var(--hb-sfc2);animation:hb-pulse 1.3s ease infinite}

/* ═══════════════════════════════════════════════════════════════════════
   3. Panel 2 — suhbat oynasi
   ═══════════════════════════════════════════════════════════════════════ */
.hbd-thread-head{padding:10px 12px;border-bottom:1px solid var(--hb-brd);display:flex;
  align-items:center;gap:10px;flex:none;padding-top:calc(10px + var(--tg-safe-top,0px))}
.hbd-thread-title{display:flex;flex-direction:column;line-height:1.25;min-width:0;flex:1}
.hbd-thread-name{font-weight:800;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  display:flex;align-items:center;gap:6px}
.hbd-thread-sub{color:var(--hb-mut);font-size:11.5px;font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

.hbd-scroll{flex:1;overflow-y:auto;min-height:0;padding:14px;display:flex;flex-direction:column;
  gap:10px;overscroll-behavior:contain;scroll-behavior:auto}

/* [QOIDA 2026-08-09] Har bir kun — sana tabletkasi + o'sha kunning
   xabarlari — BITTA o'ram (`.hbd-day`). `.hbd-daysep`ning `position:sticky`
   «yopishish oralig'i» aynan shu o'ram bilan chegaralanadi: o'ram pastga
   aylantirilib chiqib ketganda tabletka HAM u bilan birga chiqadi va
   keyingi kunniki o'z joyini egallaydi (JS: `discuss.js` `renderMessages()`
   izohi — TUZOQ). O'ram o'zi ko'rinmas, faqat ichki bo'shliqni avvalgi
   tekis tuzilishidagi kabi saqlaydi. */
.hbd-day{display:flex;flex-direction:column;gap:10px}

.hbd-daysep{align-self:center;position:sticky;top:2px;z-index:4}
.hbd-daysep .hb-chip{background:var(--hb-bg2);border:1px solid var(--hb-brd2);
  box-shadow:var(--hb-shadow-sm)}
.hbd-newsep{display:flex;align-items:center;gap:10px;color:var(--hb-acc-text);font-size:11px;font-weight:800}
.hbd-newsep::before,.hbd-newsep::after{content:'';flex:1;height:1px;background:var(--hb-acc);opacity:.45}

.hbd-group{display:flex;flex-direction:column;gap:3px}
.hbd-row{display:flex;gap:8px;align-items:flex-end}
.hbd-row.out{justify-content:flex-end}
.hbd-row-av{width:28px;flex:none;align-self:flex-end;cursor:pointer}
.hbd-row-av:hover .hb-avatar{filter:brightness(1.12)}
/* Guruhdagi oraliq qatorlarning avatar uyasi BO'SH (avatar faqat oxirgi
   qatorda). Bo'sh uyaga bosilganda profil ochilib ketmasin. */
.hbd-row-av:empty{cursor:default;pointer-events:none}
.hbd-row-av .hb-avatar{width:28px;height:28px;font-size:10.5px}

.hbd-msg{max-width:min(80%,560px);padding:9px 12px;border-radius:var(--hbd-bubble-radius);
  background:var(--hb-sfc2);color:var(--hb-txt);display:flex;flex-direction:column;gap:4px;
  min-width:0;animation:hbd-msgin var(--hbd-t-fast) var(--hbd-e-spring) both}
@keyframes hbd-msgin{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.hbd-row.out .hbd-msg{background:var(--hb-acc);color:var(--hb-acc-ink)}
.hbd-msg.tg{border-left:2px solid var(--hb-info)}
.hbd-msg.pending{opacity:.55}
.hbd-msg.failed{border:1px solid var(--hb-danger)}
.hbd-msg.deleted{background:transparent;border:1px dashed var(--hb-brd2);color:var(--hb-mut);font-style:italic}
.hbd-msg-mid{border-top-left-radius:6px;border-bottom-left-radius:6px}
.hbd-row.out .hbd-msg-mid{border-top-right-radius:6px;border-bottom-right-radius:6px;
  border-top-left-radius:var(--hbd-bubble-radius);border-bottom-left-radius:var(--hbd-bubble-radius)}

.hbd-msg-author{font-weight:800;font-size:11.5px;display:flex;align-items:center;gap:5px;
  cursor:pointer;align-self:flex-start;max-width:100%}
.hbd-msg-author:hover{text-decoration:underline}
.hbd-msg-body{font-size:13px;font-weight:600;line-height:1.45;text-wrap:pretty;
  overflow-wrap:anywhere;white-space:normal}
/* Havolalar ko'k — Telegram'dagi kabi (buyurtmachi 2026-07-31).
   O'z pufakchamiz foni yorqin `--hb-acc`, shu bois u yerda TO'Q ko'k
   ishlatiladi, aks holda kontrast yetmaydi. */
.hbd-msg-body a{color:var(--hbd-link);text-decoration:none;font-weight:700;
  border-bottom:1px solid rgba(var(--hbd-link-rgb),.4);
  overflow-wrap:anywhere;transition:color .12s,border-color .12s}
.hbd-msg-body a:hover{color:var(--hbd-link-hov);
  border-bottom-color:rgba(var(--hbd-link-rgb),.85)}
.hbd-row.out .hbd-msg-body a{color:var(--hbd-link-own);
  border-bottom-color:rgba(0,0,0,.32)}
.hbd-row.out .hbd-msg-body a:hover{color:#0b2c66;border-bottom-color:rgba(0,0,0,.6)}
.hbd-msg-foot{font-size:10.5px;font-weight:700;opacity:.65;align-self:flex-end;display:flex;
  align-items:center;gap:4px;white-space:nowrap}

/* ── Matnsiz media xabar: pufakcha YO'Q ──────────────────────────────────
   Buyurtmachi 2026-07-31: «orqa fon bo'lmasin — rasm, yumaloq va oddiy
   video va voice message hammasi shunday». Telegramda ham shunday: rasm
   yoki videoning atrofida rangli quti bo'lmaydi, medianing O'ZI pufakcha
   bo'ladi, vaqt esa uning ustiga tushadi. */
/* ── Rasm/video qatori: media butun kenglikni oladi ─────────────────────
   Buyurtmachi 2026-07-31: «rasmlarni o'ng tomonidan juda ko'p joy
   qolyapti». O'lchov ikki sababni ko'rsatdi:
     1. pufakcha qatorning 80% i bilan chegaralangan edi;
     2. undan ham kattarog'i — `.hbd-actions` (😀 ↩ ✏ 🗑) qatorda DOIMIY
        flex element bo'lib turardi va ko'rinmasa ham 90–120 px joy
        egallardi. 454 px li qatorda rasmga atigi 328–358 px qolardi.
   Yechim: rasm/video qatorida amal tugmalari oqimdan chiqariladi va
   medianing chekkasi ustida suzadi (Telegramdagi kabi). Matnli qatorlar
   tegilmaydi — u yerda tor pufakcha o'qishga qulay. */
.hbd-msg.hbd-msg-wide{max-width:min(100%,620px)}
.hbd-row-wide{position:relative}
.hbd-row-wide > .hbd-actions{position:absolute;top:5px;z-index:3;padding:2px;
  background:rgba(0,0,0,.45);border-radius:var(--hb-pill);backdrop-filter:blur(4px)}
.hbd-row-wide > .hbd-actions .hbd-act{color:#fff}
.hbd-row-wide > .hbd-actions .hbd-act:hover{background:rgba(255,255,255,.22)}
.hbd-row-wide:not(.out) > .hbd-actions{right:5px}
.hbd-row-wide.out > .hbd-actions{left:5px}
.hbd-msg.hbd-msg-media{background:none;padding:0;gap:0;border-left:0}
/* Telegramdan kelgani baribir bilinib tursin — pufakcha yo'q bo'lsa ham */
.hbd-msg.hbd-msg-media.tg{border-left:2px solid var(--hb-info);padding-left:6px}
.hbd-row.out .hbd-msg.hbd-msg-media{background:none;color:var(--hb-txt)}
.hbd-msg.hbd-msg-media > .hbd-msg-author{padding:0 2px 5px}
.hbd-msg.hbd-msg-media > .hbd-reacts{padding:5px 2px 0}
.hbd-atts.hbd-atts-foot{position:relative}
/* Vaqt + belgi medianing ustida — qora yarim shaffof tabletkada, aks
   holda oq rasmda oq matn ko'rinmay qoladi. */
.hbd-atts-foot > .hbd-msg-foot{position:absolute;right:8px;bottom:8px;z-index:2;
  opacity:1;color:#fff;background:rgba(0,0,0,.5);padding:2px 8px;
  border-radius:var(--hb-pill);backdrop-filter:blur(3px)}
/* Ovozli xabarda tabletka to'lqinni, yumaloq videoda aylanani, oddiy
   videoda esa «⤓ yuklab olish» havolasini bekitardi — bularda vaqt
   medianing OSTIDA, ramkasiz turadi. */
.hbd-atts-foot.hbd-atts-below > .hbd-msg-foot{position:static;background:none;
  color:var(--hb-mut);opacity:.8;padding:3px 4px 0;backdrop-filter:none}

.hb-mention{color:var(--hb-acc-text);background:rgba(var(--hb-acc-rgb),.14);
  padding:0 4px;border-radius:var(--hb-pill);font-weight:800}
.hbd-row.out .hb-mention{color:var(--hb-acc-ink);background:rgba(0,0,0,.12)}

/* Javob (quote) */
.hbd-quote{border-left:2px solid currentColor;padding:2px 0 2px 8px;opacity:.75;cursor:pointer;
  display:flex;flex-direction:column;gap:1px;min-width:0}
.hbd-quote-a{font-size:11px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbd-quote-t{font-size:11.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Tizim xabari */
.hbd-sys{align-self:center;max-width:80%;text-align:center;color:var(--hb-mut);
  font-size:11.5px;font-weight:600;padding:2px 0}

/* Reaksiyalar */
.hbd-reacts{display:flex;gap:5px;flex-wrap:wrap;margin-top:2px}
.hbd-react{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--hb-pill);
  font-size:11px;font-weight:800;background:var(--hb-sfc);border:1px solid var(--hb-brd);
  color:var(--hb-txt);cursor:pointer;transition:transform var(--hbd-t-micro),border-color var(--hbd-t-micro)}
.hbd-react:hover{border-color:var(--hb-brd2)}
.hbd-react.me{border-color:var(--hb-acc);color:var(--hb-acc-text)}
.hbd-react-burst{animation:hbd-burst var(--hbd-t-base) var(--hbd-e-spring) both}
@keyframes hbd-burst{0%{transform:scale(1)}40%{transform:scale(1.4) translateY(-6px)}100%{transform:none}}

/* Xabar amallari */
.hbd-actions{display:flex;gap:2px;align-self:center;opacity:0;transition:opacity var(--hbd-t-micro);
  flex:none}
.hbd-row:hover .hbd-actions,.hbd-row:focus-within .hbd-actions{opacity:1}
.hbd-act{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;cursor:pointer;
  color:var(--hb-mut);font-size:13px;background:transparent;border:none}
.hbd-act:hover{color:var(--hb-txt);background:var(--hb-sfc2)}
/* Qadalgan xabar — tugma «yoqilgan» ko'rinishda (ikkala holatda ham 📌) */
.hbd-act.on{color:var(--hb-acc-text);background:rgba(var(--hb-acc-rgb),.16)}
@media (hover:none){.hbd-actions{display:none}}
/* Uzoq bosish varag'i (touch) */
.hbd-sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:85;display:flex;
  align-items:flex-end;animation:hb-toastin .15s ease both}
.hbd-sheet{width:100%;background:var(--hb-sfc);border-radius:var(--hb-radius) var(--hb-radius) 0 0;
  padding:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));
  animation:hb-sheetup var(--hbd-t-base) var(--hbd-e-out) both;display:flex;flex-direction:column}
.hbd-sheet button{display:flex;align-items:center;gap:10px;width:100%;padding:13px 14px;
  background:none;border:none;color:var(--hb-txt);font-family:inherit;font-size:13.5px;
  font-weight:700;cursor:pointer;border-radius:var(--hb-radius-sm);text-align:left}
.hbd-sheet button:active{background:var(--hb-sfc2)}
.hbd-sheet button.danger{color:var(--hb-danger)}

/* Ilovalar */
.hbd-atts{display:flex;flex-direction:column;gap:6px}
/* [TUZOQ] `align-self:flex-start` MAJBURIY. `.hbd-atts` — ustunli flex,
   uning `align-items` sukut bo'yicha `stretch`; rasm butun kenglikka
   cho'zilib, `max-height` uni qirqadi va yon tomonlarda bo'sh joy qoladi
   (2026-07-31 shikoyati). `flex-start` bilan rasm O'Z o'lchamida qoladi.
   O'lchamlar kattalashtirildi: 280×300 → 420×480 (buyurtmachi so'rovi). */
.hbd-img{align-self:flex-start;max-width:min(520px,100%);max-height:540px;
  width:auto;height:auto;
  border-radius:var(--hb-radius-sm);cursor:zoom-in;background:var(--hb-sfc2);display:block;
  filter:blur(10px);opacity:.5;transition:filter var(--hbd-t-base),opacity var(--hbd-t-base)}
.hbd-img.loaded{filter:none;opacity:1}
.hbd-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;width:520px;max-width:100%}
.hbd-gallery .hbd-img{width:100%;max-width:100%;height:180px;object-fit:cover;align-self:auto}
.hbd-file{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--hb-radius-sm);
  background:var(--hb-sfc);border:1px solid var(--hb-brd);text-decoration:none;color:inherit;max-width:280px}
.hbd-file-ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:var(--hb-sfc2);font-size:15px;flex:none}
.hbd-file-name{font-size:12px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbd-file-size{font-size:10.5px;font-weight:600;color:var(--hb-mut)}
.hbd-voice{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--hb-radius-sm);
  background:var(--hb-sfc);border:1px solid var(--hb-brd);max-width:280px}
.hbd-wave{display:flex;align-items:center;gap:2px;height:22px;flex:1}
.hbd-wave i{display:block;width:2px;border-radius:2px;background:var(--hb-mut);
  transform-origin:center;animation:hb-bargrowx .4s var(--hbd-e-out) both}
.hbd-wave i.on{background:var(--hb-acc)}

/* Qidiruv natijalari (L6 §3) */
.hbd-hits-head{padding:10px 14px 5px;font-size:10.5px;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;color:var(--hb-mut)}
.hbd-hit .hbd-item-name{font-size:11px;color:var(--hb-mut);font-weight:700}
.hbd-hit .hbd-item-last{white-space:normal;line-height:1.35;max-height:2.7em;overflow:hidden}
.hbd-mark{background:color-mix(in srgb,var(--hb-acc) 30%,transparent);
  color:inherit;border-radius:3px;padding:0 1px;font-weight:800}

/* Video + yuklab olish (media.py: `url` = web nusxa, `download_url` = asl) */
.hbd-video{display:flex;flex-direction:column;gap:4px;max-width:min(520px,100%)}
.hbd-video video{max-width:100%;max-height:420px;border-radius:var(--hb-radius-sm);
  background:#000;display:block}
.hbd-convnote{font-size:10.5px;font-weight:700;color:var(--hb-mut);
  display:flex;align-items:center;gap:5px}
.hbd-dl{align-self:flex-start;font-size:10.5px;font-weight:700;color:var(--hb-mut);
  text-decoration:none;padding:2px 7px;border-radius:var(--hb-pill);
  background:var(--hb-sfc2);border:1px solid var(--hb-brd);
  transition:color var(--hbd-t-fast),border-color var(--hbd-t-fast)}
.hbd-dl:hover{color:var(--hb-txt);border-color:var(--hb-acc)}

/* Sakrash tugmasi */
/* «Eng pastga» — Telegram kabi doimiy dumaloq tugma.
   [O'ZGARDI 2026-07-31] Ilgari «↓ N yangi xabar» yozuvli uzun tugma edi va
   FAQAT yangi xabar kelganda chiqardi. Endi yuqoriga chiqilsa har doim
   turadi; yangi xabar bo'lsa ustiga son yopishtiriladi.
   `hb-fabbob` sakrashi ham olib tashlandi — doimiy tugma sakrab tursa
   ko'zni charchatadi. */
.hbd-jump{position:absolute;right:16px;bottom:86px;z-index:5;width:38px;height:38px;
  border-radius:50%;background:var(--hb-sfc);color:var(--hb-txt);display:none;
  align-items:center;justify-content:center;cursor:pointer;
  border:1px solid var(--hb-brd2);box-shadow:var(--hb-shadow);
  animation:hb-popin var(--hbd-t-fast) var(--hbd-e-out) both;
  transition:background var(--hbd-t-micro),transform var(--hbd-t-micro)}
.hbd-jump.show{display:flex}
.hbd-jump:hover{background:var(--hb-sfc2);transform:translateY(-2px)}
.hbd-jump-ic{font-size:20px;line-height:1;margin-top:-4px;font-weight:800}
.hbd-jump.has-new{background:var(--hb-acc);color:var(--hb-acc-ink);border-color:var(--hb-acc)}
.hbd-jump-n{position:absolute;top:-6px;right:-4px;min-width:18px;height:18px;padding:0 5px;
  border-radius:var(--hb-pill);background:var(--hb-acc);color:var(--hb-acc-ink);
  border:2px solid var(--hb-sfc);font-size:10px;font-weight:800;
  display:grid;place-items:center}
.hbd-jump.has-new .hbd-jump-n{background:var(--hb-acc-ink);color:var(--hb-acc);
  border-color:var(--hb-acc)}

/* Pin paneli */
.hbd-pinbar{display:none;align-items:center;gap:8px;padding:7px 12px;border-bottom:1px solid var(--hb-brd);
  background:var(--hb-sfc2);cursor:pointer;flex:none;font-size:11.5px;font-weight:700}
.hbd-pinbar.show{display:flex}

/* Flash (xabarga sakraganda) */
.hbd-flash{animation:hbd-flash .9s ease both}
@keyframes hbd-flash{0%{box-shadow:0 0 0 0 rgba(var(--hb-acc-rgb),0)}
  25%{box-shadow:0 0 0 4px rgba(var(--hb-acc-rgb),.28)}100%{box-shadow:0 0 0 0 rgba(var(--hb-acc-rgb),0)}}

/* Typing */
.hbd-dots{display:inline-flex;gap:3px;align-items:center;margin-left:2px}
.hbd-dots i{width:4px;height:4px;border-radius:99px;background:currentColor;animation:hb-pulse 1s ease infinite}
.hbd-dots i:nth-child(2){animation-delay:.12s}
.hbd-dots i:nth-child(3){animation-delay:.24s}

/* ═══════════════════════════════════════════════════════════════════════
   4. Kompozitor
   ═══════════════════════════════════════════════════════════════════════ */
.hbd-composer{flex:none;border-top:1px solid var(--hb-brd);padding:10px 12px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:8px;
  background:var(--hb-sfc)}
.hbd-reply-bar{display:none;align-items:center;gap:8px;padding:6px 10px;border-radius:var(--hb-radius-sm);
  background:var(--hb-sfc2);border-left:2px solid var(--hb-acc);font-size:11.5px}
.hbd-reply-bar.show{display:flex}
.hbd-chips{display:flex;gap:6px;flex-wrap:wrap}
.hbd-chip-file{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:var(--hb-pill);
  background:var(--hb-sfc2);border:1px solid var(--hb-brd);font-size:11px;font-weight:700;max-width:200px}
.hbd-chip-file span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Yuborishdan OLDINGI ko'rinish — Telegram kabi kichik rasm.
   Manba lokal `URL.createObjectURL` (server konvertatsiyasini kutmaydi). */
.hbd-chip-thumb{width:26px;height:26px;flex:none;border-radius:6px;
  background:var(--hb-sfc) center/cover no-repeat;margin:-2px 0 -2px -4px}
.hbd-chip-nm{max-width:110px}
/* Yuklanish progressi — chip ichida yupqa chiziq */
.hbd-chip-up{position:relative;overflow:hidden}
.hbd-chip-bar{position:absolute;left:0;bottom:0;height:2px;background:var(--hb-acc);
  transition:width var(--hbd-t-fast) linear}
.hbd-comp-row{display:flex;gap:8px;align-items:flex-end}
.hbd-input{flex:1;min-width:0;min-height:40px;max-height:160px;padding:10px 12px;
  border-radius:var(--hb-radius-sm);background:var(--hb-sfc2);border:1px solid var(--hb-brd);
  outline:none;color:var(--hb-txt);font-family:inherit;font-size:13px;font-weight:600;line-height:1.4;
  resize:none;overflow-y:auto}
.hbd-input:focus{border-color:var(--hb-acc)}
.hbd-input::placeholder{color:var(--hb-mut)}
.hbd-send{width:40px;height:40px;border-radius:var(--hb-radius-sm);background:var(--hb-acc);
  color:var(--hb-acc-ink);display:grid;place-items:center;cursor:pointer;flex:none;border:none;
  transition:opacity var(--hbd-t-micro),transform var(--hbd-t-micro),background var(--hbd-t-micro)}
.hbd-send:hover{background:var(--hb-acc-d)}
.hbd-send:active{transform:scale(.94)}
.hbd-send.idle{opacity:.4}
.hbd-locked{padding:14px;text-align:center;color:var(--hb-mut);font-size:12px;font-weight:700}

.hbd-drop{position:absolute;inset:0;z-index:20;display:none;place-items:center;
  background:rgba(var(--hb-acc-rgb),.10);border:2px dashed var(--hb-acc);border-radius:var(--hb-radius);
  color:var(--hb-acc-text);font-weight:800;font-size:13px}
.hbd-drop.show{display:grid}

/* Mention avtoto'ldirish */
.hbd-pop{position:absolute;z-index:30;bottom:100%;left:12px;right:12px;max-height:220px;overflow-y:auto;
  background:var(--hb-sfc);border:1px solid var(--hb-brd2);border-radius:var(--hb-radius-sm);
  box-shadow:var(--hb-shadow);display:none;animation:hb-popin var(--hbd-t-fast) var(--hbd-e-out) both}
.hbd-pop.show{display:block}
.hbd-pop-item{display:flex;align-items:center;gap:9px;padding:8px 10px;cursor:pointer}
.hbd-pop-item:hover,.hbd-pop-item.sel{background:var(--hb-sfc2)}
.hbd-pop-name{font-size:12.5px;font-weight:700}
.hbd-pop-sub{font-size:10.5px;font-weight:600;color:var(--hb-mut)}

/* Emoji tanlagich — qidiruv + kategoriya + oxirgilar (2026-07-31) */
.hbd-emoji{position:absolute;z-index:30;bottom:100%;right:12px;
  width:min(340px,calc(100% - 24px));background:var(--hb-sfc);
  border:1px solid var(--hb-brd2);border-radius:var(--hb-radius-sm);
  box-shadow:var(--hb-shadow);display:none;flex-direction:column;overflow:hidden;
  animation:hb-popin var(--hbd-t-fast) var(--hbd-e-out) both}
.hbd-emoji.show{display:flex}
.hbd-emoji-search{padding:8px 8px 6px;flex:none}
.hbd-emoji-search input{width:100%;box-sizing:border-box;padding:7px 10px;font:inherit;
  font-size:12.5px;font-weight:600;color:var(--hb-txt);background:var(--hb-sfc2);
  border:1px solid var(--hb-brd2);border-radius:var(--hb-pill);outline:none}
.hbd-emoji-search input:focus{border-color:var(--hb-acc)}
.hbd-emoji-tabs{display:flex;gap:2px;padding:0 8px 6px;flex:none;overflow-x:auto;
  scrollbar-width:none;border-bottom:1px solid var(--hb-brd2)}
.hbd-emoji-tabs::-webkit-scrollbar{display:none}
.hbd-emoji-tab{flex:none;background:none;border:0;cursor:pointer;font-size:16px;
  line-height:1;padding:6px 8px;border-radius:8px;opacity:.55;transition:opacity .12s}
.hbd-emoji-tab:hover{opacity:.85;background:var(--hb-sfc2)}
.hbd-emoji-tab.on{opacity:1;background:rgba(var(--hb-acc-rgb),.16)}
/* [O'ZGARDI 2026-07-31] Grid endi UZLUKSIZ ro'yxat: bo'limlar ketma-ket
   turadi, sarlavhasi aylantirganda yopishib qoladi (Telegram xulqi).
   Kategoriya tugmasi ro'yxatni almashtirmaydi — o'sha joyga sakraydi. */
.hbd-emoji-grid{display:block;padding:0 8px 8px;max-height:264px;overflow-y:auto;
  scrollbar-width:thin;overscroll-behavior:contain}
.hbd-emoji-sec + .hbd-emoji-sec{margin-top:2px}
.hbd-emoji-h{position:sticky;top:0;z-index:1;background:var(--hb-sfc);
  padding:8px 2px 5px;font-size:10px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--hb-mut)}
.hbd-emoji-rows{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}
.hbd-emoji-grid button{background:none;border:none;font-size:20px;cursor:pointer;
  padding:6px 0;border-radius:8px;line-height:1;transition:background .1s,transform .1s}
.hbd-emoji-grid button:hover{background:var(--hb-sfc2);transform:scale(1.18)}
.hbd-emoji-grid button:focus-visible{outline:2px solid var(--hb-acc);outline-offset:-2px}
.hbd-emoji-none{grid-column:1/-1;padding:18px 8px;text-align:center;font-size:12px;
  font-weight:600;color:var(--hb-mut)}

/* ═══════════════════════════════════════════════════════════════════════
   5. Panel 3 — kanal haqida
   ═══════════════════════════════════════════════════════════════════════ */
.hbd-info-body{padding:14px;display:flex;flex-direction:column;gap:14px}
.hbd-info-top{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.hbd-info-name{font-weight:800;font-size:15px}
.hbd-info-sec{display:flex;flex-direction:column;gap:8px}
.hbd-info-sec-t{font-size:11px;font-weight:800;color:var(--hb-mut);letter-spacing:.5px;
  text-transform:uppercase}
.hbd-member{display:flex;align-items:center;gap:9px;padding:5px 0}
.hbd-member-name{font-size:12.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── L11: profil paneli (2026-08-01) ─────────────────────────────────────
   Buyurtmachi: «kanal va o'zaro chatlarni chiqadigan oynasi FARQLI
   bo'ladi». Quyidagilar ikkala panelga ham xizmat qiladi. */
.hbd-info-sub{font-size:11.5px;font-weight:700;color:var(--hb-mut)}
.hbd-info-sub.is-on{color:var(--hb-ok)}
/* Amal tugmalari — Telegram profilidagi kabi teng ustunlar */
.hbd-info-acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:6px}
.hbd-infoact{display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:9px 4px;border:1px solid var(--hb-brd2);border-radius:var(--hb-radius-sm);
  background:var(--hb-sfc);color:var(--hb-txt);cursor:pointer;
  font:inherit;font-size:10.5px;font-weight:700;transition:background var(--hbd-t-fast)}
.hbd-infoact:hover{background:var(--hb-sfc2)}
.hbd-infoact-ic{font-size:17px;line-height:1}
.hbd-infoact-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.hbd-infoact.danger{color:var(--hb-danger)}
/* Qiymat USTIDA, yorlig'i OSTIDA — Telegram tartibi */
.hbd-info-field{cursor:pointer;padding:5px 0;border-radius:var(--hb-radius-sm)}
.hbd-info-field:hover{background:var(--hb-sfc2)}
.hbd-info-fval{font-size:13px;font-weight:700;word-break:break-word}
.hbd-info-flabel{font-size:10.5px;font-weight:600;color:var(--hb-mut);margin-top:1px}
.hbd-info-desc{font-weight:600;line-height:1.45;white-space:pre-wrap}
/* Media sanoqlari. `:empty` — so'rov ketayotganda yoki yiqilganda bo'sh
   bo'lim 14px oraliq qoldirib turmasin (panelda «teshik» ko'rinardi). */
.hbd-info-media:empty{display:none}
.hbd-info-row{display:flex;align-items:center;gap:9px;padding:6px 4px;
  border-radius:var(--hb-radius-sm);font-size:12.5px;font-weight:700}
.hbd-info-row.go{cursor:pointer}
.hbd-info-row.go:hover{background:var(--hb-sfc2)}
.hbd-info-row-ic{font-size:15px;width:20px;text-align:center;flex:none}
.hbd-info-row-t{flex:1;min-width:0}
.hbd-info-row-go{color:var(--hb-mut);font-size:15px}
/* A'zolar sarlavhasi — 🔍 va ＋ o'ng chekkada */
.hbd-info-sec-head{display:flex;align-items:center;gap:4px}
.hbd-info-sec-head .hbd-info-sec-t{flex:1;min-width:0}
.hbd-info-search[hidden]{display:none}
/* Panel ochiq bo'lganda sarlavhaga bosilsa — qisqa e'tibor belgisi */
.hbd-info.flash{animation:hbd-flash .6s var(--hbd-e-out) both}
@keyframes hbd-flash{0%{background:rgba(var(--hb-acc-rgb),.18)}100%{background:transparent}}
/* Media to'ri (modal ichida) */
.hbd-mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;
  max-height:56vh;overflow-y:auto}
.hbd-mcell{position:relative;aspect-ratio:1;border-radius:8px;cursor:zoom-in;
  background:var(--hb-sfc2) center/cover no-repeat}
.hbd-mcell:hover{filter:brightness(.92)}
.hbd-mcell.round{border-radius:50%}          /* yumaloq video xabar — L12 §5 */
.hbd-mcell.skel{cursor:default;animation:hb-pulse 1.3s ease infinite}
/* Cheksiz aylantirish «mo'ljali» — ko'rinmaydi, faqat kuzatiladi (L12 §2.1) */
.hbd-mgrid-end{grid-column:1/-1;height:1px}
/* Sarlavhaning bosiladigan qismi (👥 tugmasi o'rniga, L11 §1) */
.hbd-head-open{display:flex;align-items:center;gap:10px;flex:1;min-width:0;
  cursor:pointer;border-radius:var(--hb-radius-sm);padding:2px 6px 2px 2px;
  background:none;border:0;text-align:left;transition:background var(--hbd-t-fast)}
.hbd-head-open:hover{background:var(--hb-sfc2)}
.hbd-head-open:hover .hbd-thread-name{text-decoration:underline}
.hbd-head-open:focus-visible{outline:2px solid var(--hb-acc);outline-offset:2px}

/* ═══════════════════════════════════════════════════════════════════════
   6. Umumiy
   ═══════════════════════════════════════════════════════════════════════ */
.hbd-rel{position:relative}
.hbd-offline{display:none;padding:5px 12px;background:var(--hb-warning);color:var(--hb-acc-ink);
  font-size:11.5px;font-weight:800;text-align:center;flex:none}
.hbd-offline.show{display:block}
.hbd-loading{display:flex;justify-content:center;padding:10px;color:var(--hb-mut);font-size:11.5px;
  font-weight:700}
.hbd-modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:80;display:flex;
  align-items:flex-end;justify-content:center;animation:hb-toastin .15s ease both}
.hbd-modal{width:100%;max-height:88vh;overflow-y:auto;background:var(--hb-sfc);
  border-radius:var(--hb-radius) var(--hb-radius) 0 0;padding:18px;border-top:1px solid var(--hb-brd);
  animation:hb-sheetup var(--hbd-t-base) var(--hbd-e-out) both;display:flex;flex-direction:column;gap:12px}
@media (min-width:700px){
  .hbd-modal-bg{align-items:center}
  .hbd-modal{max-width:520px;border-radius:var(--hb-radius);animation:hb-popin var(--hbd-t-base) var(--hbd-e-out) both}
}
.hbd-modal-title{font-weight:800;font-size:16px}
.hbd-menu{position:absolute;right:8px;top:52px;z-index:40;min-width:200px;background:var(--hb-sfc);
  border:1px solid var(--hb-brd2);border-radius:var(--hb-radius-sm);box-shadow:var(--hb-shadow);
  padding:5px;display:none;animation:hb-popin var(--hbd-t-fast) var(--hbd-e-out) both}
.hbd-menu.show{display:block}
.hbd-menu button{display:flex;align-items:center;gap:8px;width:100%;padding:9px 10px;background:none;
  border:none;color:var(--hb-txt);font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;
  border-radius:8px;text-align:left}
.hbd-menu button:hover{background:var(--hb-sfc2)}
.hbd-menu button.danger{color:var(--hb-danger)}

.hbd-picked{display:flex;gap:6px;flex-wrap:wrap}
.hbd-picked .hb-chip{cursor:pointer}

/* Fokus ko'rinadigan (a11y) */
.hbd :focus-visible{outline:2px solid var(--hb-acc);outline-offset:2px}

/* ── Harakatni kamaytirish (L2 §12.4) ────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .hbd *,.hbd *::before,.hbd *::after{animation-duration:.001ms!important;
    transition-duration:.001ms!important;animation-iteration-count:1!important}
}
.hbd-no-motion *,.hbd-no-motion *::before,.hbd-no-motion *::after{
  animation-duration:.001ms!important;transition-duration:.001ms!important;
  animation-iteration-count:1!important}

/* ══ L8 — Qo'ng'iroq ══════════════════════════════════════════════════════ */
/* ── Qo'ng'iroq oynasi (L12 §1.3) ────────────────────────────────────────
   Buyurtmachi 2026-08-01 skrinshot bilan Telegram desktop ko'rinishini
   so'radi: butun ekran, katta avatar, ism, holat matni va pastda yumaloq
   tugmalar. Ilgari o'ng pastdagi kichik quti edi va ovozli qo'ng'iroqda
   faqat bo'sh kvadratchalar ko'rinardi. */
.hbd-call{position:fixed;inset:0;z-index:340;display:none;flex-direction:column;
  background:#17171c;color:#fff}
.hbd-call.open{display:flex;animation:hb-fadein var(--hbd-t-fast) both}
.hbd-call-main{flex:1;min-height:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;padding:24px}
.hbd-call-av{width:150px;height:150px;border-radius:50%;flex:none;
  background:#2a2a33 center/cover no-repeat;display:grid;place-items:center;
  font-size:52px;font-weight:800;color:#fff;
  box-shadow:0 0 0 0 rgba(255,255,255,.16);animation:hbd-callpulse 2s ease-in-out infinite}
@keyframes hbd-callpulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.14)}
  50%{box-shadow:0 0 0 18px rgba(255,255,255,0)}}
.hbd-call-name{font-size:26px;font-weight:700;text-align:center}
.hbd-call-state{font-size:14px;font-weight:600;color:#9a9aa6;
  font-variant-numeric:tabular-nums}
.hbd-call-warn{position:absolute;left:50%;top:18px;transform:translateX(-50%);
  font-size:11.5px;font-weight:700;color:#ffcf70;background:rgba(255,207,112,.14);
  padding:6px 14px;border-radius:var(--hb-pill);z-index:2}
.hbd-call-warn[hidden]{display:none}
/* Ovozli qo'ng'iroqda video oynachalari YO'Q — `<audio>` ko'rinmaydi */
.hbd-call-grid{display:none}
.hbd-call-bar{display:flex;gap:26px;justify-content:center;align-items:flex-end;
  padding:26px 16px calc(34px + env(safe-area-inset-bottom,0px))}
.hbd-call-act{display:flex;flex-direction:column;align-items:center;gap:7px;
  font-size:11.5px;font-weight:600;color:#9a9aa6}
.hbd-call-btn{width:58px;height:58px;border-radius:50%;border:0;cursor:pointer;
  background:#2a2a33;color:#fff;font-size:21px;display:grid;place-items:center;
  transition:transform var(--hbd-t-micro),background var(--hbd-t-micro)}
.hbd-call-btn:hover{transform:translateY(-2px);background:#34343f}
.hbd-call-btn.off{background:#fff;color:#17171c}
.hbd-call-btn.danger{background:#e5484d;color:#fff}
.hbd-call-btn.danger:hover{background:#f05a5f}
@media (max-width:640px){
  .hbd-call-av{width:118px;height:118px;font-size:42px}
  .hbd-call-name{font-size:22px}
  .hbd-call-bar{gap:18px}
}

.hbd-ring{position:fixed;inset:0;z-index:300;display:none;place-items:center;
  background:rgba(0,0,0,.45);backdrop-filter:blur(3px)}
.hbd-ring.open{display:grid;animation:hb-fadein var(--hbd-t-fast) both}
.hbd-ring-card{background:var(--hb-sfc);border-radius:22px;padding:26px 30px;
  text-align:center;min-width:264px;
  animation:hb-popin var(--hbd-t-base) var(--hbd-e-out) both}
.hbd-ring-av{width:76px;height:76px;border-radius:50%;margin:0 auto 12px;
  display:grid;place-items:center;font-size:27px;font-weight:800;
  background:var(--hb-acc);color:#1a1a1a;
  animation:hbd-ringpulse 1.5s ease-in-out infinite}
@keyframes hbd-ringpulse{0%,100%{box-shadow:0 0 0 0 rgba(200,241,105,.55)}
  50%{box-shadow:0 0 0 16px rgba(200,241,105,0)}}
.hbd-ring-name{font-size:16px;font-weight:800}
.hbd-ring-sub{font-size:12px;font-weight:600;color:var(--hb-mut);margin-top:3px}
.hbd-ring-btns{display:flex;gap:10px;margin-top:20px}
.hbd-ring-btn{flex:1;padding:11px 16px;border-radius:var(--hb-pill);border:0;
  font:inherit;font-size:12.5px;font-weight:800;cursor:pointer}
.hbd-ring-btn.ok{background:var(--hb-acc);color:#1a1a1a}
.hbd-ring-btn.no{background:#e5484d;color:#fff}

@media (max-width:640px){
  .hbd-call{inset:auto 0 0 0;width:100%;border-radius:18px 18px 0 0}
}

/* Xodim kartasi (a'zolar ro'yxatidagi ismga bosilganda) */
.hbd-member-sub{font-size:10.5px;font-weight:600;color:var(--hb-mut);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbd-member:hover{background:var(--hb-sfc2);border-radius:var(--hb-radius-sm)}
.hbd-card-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.hbd-card-head .hb-avatar{width:52px;height:52px;font-size:17px}
.hbd-card-name{font-size:15px;font-weight:800}
.hbd-card-sub{font-size:11.5px;font-weight:600;color:var(--hb-mut);margin-top:2px}
.hbd-card-rows{display:flex;flex-direction:column;gap:7px}
.hbd-card-row{display:flex;gap:10px;font-size:12.5px}
.hbd-card-k{color:var(--hb-mut);font-weight:700;min-width:74px}
.hbd-card-v{font-weight:600;word-break:break-word}
.hbd-card-acts{display:flex;gap:8px;margin-top:16px}
.hbd-card-acts a{text-decoration:none;display:inline-grid;place-items:center}

/* ── Xabar amallari TO'G'RI tomonda (foydalanuvchi 2026-07-31) ────────────
   O'zining xabari o'ngda turadi — amallar undan CHAPDA (ichkariga qarab),
   begona xabar chapda — amallar undan O'NGDA. Telegram shu mantiqda. */
.hbd-row.out .hbd-actions{order:-1}
.hbd-row .hbd-actions{order:2}

/* Onlayn nuqtasi xabar avatarida ham */
.hbd-row-av{position:relative}
.hbd-row-av .hbd-online{position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;
  border-radius:50%;background:var(--hb-ok);border:2px solid var(--hb-sfc)}

/* Panellarni yig'ish/ochish (3-oyna boshqaruvi) */
.hbd-panebtn{margin-left:auto}

/* ═══════════════════════════════════════════════════════════════════════
   L10 — interfeys tuzatishlari (2026-07-31)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Albom: Telegram mozaikasi ──────────────────────────────────────────
   Tashqi burchaklar yumaloq, ichkarilar to'g'ri — bitta yaxlit blok. */
.hbd-album{display:grid;gap:2px;width:520px;max-width:100%;border-radius:var(--hb-radius-sm);
  overflow:hidden;background:var(--hb-sfc2)}
.hbd-album-2{grid-template-columns:1fr 1fr;aspect-ratio:2/1.35}
.hbd-album-3{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:1/.78}
.hbd-album-3 .hbd-cell:first-child{grid-row:span 2}
.hbd-album-4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:1/1}
.hbd-cell{position:relative;overflow:hidden;cursor:zoom-in;background:var(--hb-sfc2);
  min-height:0;min-width:0}
.hbd-cell img{width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity var(--hbd-t-base)}
.hbd-cell.loaded img{opacity:1}
.hbd-cell.failed::after{content:'⚠';position:absolute;inset:0;display:grid;
  place-items:center;color:var(--hb-mut);font-size:20px}
.hbd-cell:hover img{filter:brightness(.92)}
.hbd-more{position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(0,0,0,.5);color:#fff;font-size:19px;font-weight:800}

/* Video poster (suhbat ichida) */
.hbd-vposter{position:relative;width:520px;max-width:100%;aspect-ratio:16/10;
  border-radius:var(--hb-radius-sm);background:#111 center/cover no-repeat;
  cursor:pointer;display:block}
.hbd-vplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;
  display:grid;place-items:center;font-size:17px;padding-left:3px;
  transition:transform var(--hbd-t-fast)}
.hbd-vposter:hover .hbd-vplay,.hbd-cell:hover .hbd-vplay{transform:translate(-50%,-50%) scale(1.1)}
.hbd-vdur{position:absolute;right:6px;bottom:6px;font-size:10.5px;font-weight:800;
  color:#fff;background:rgba(0,0,0,.55);padding:1px 6px;border-radius:999px}

/* ── Reaksiya tanlagichi ─────────────────────────────────────────────
   [O'ZGARDI 2026-07-31] Ilgari bu `.hbd-emoji` ni qayta ishlatib, ekran
   o'rtasida `bottom:120px` da qotib turardi — qaysi xabarga tegishli ekani
   bilinmasdi. Endi xabar YONIGA joylashadi (JS `placeNear`), o'z reaksiyam
   belgilanadi va «＋» to'liq tanlagichni ochadi. */
.hbd-reactbar{position:fixed;z-index:330;display:flex;gap:2px;padding:5px 6px;
  background:var(--hb-sfc);border:1px solid var(--hb-brd2);
  border-radius:var(--hb-pill);box-shadow:var(--hb-shadow);
  max-width:calc(100vw - 16px);overflow-x:auto;scrollbar-width:none;
  animation:hb-popin var(--hbd-t-fast) var(--hbd-e-spring) both}
.hbd-reactbar::-webkit-scrollbar{display:none}
.hbd-reactpick{width:34px;height:34px;flex:none;border:0;border-radius:50%;
  background:transparent;cursor:pointer;font-size:19px;line-height:1;
  display:grid;place-items:center;transition:background .12s,transform .12s}
.hbd-reactpick:hover{background:var(--hb-sfc2);transform:scale(1.22)}
.hbd-reactpick.on{background:rgba(var(--hb-acc-rgb),.22)}
.hbd-reactmore{font-size:15px;font-weight:800;color:var(--hb-mut);
  border:1px dashed var(--hb-brd2)}
/* To'liq tanlagich modal ichida — o'z qalqishi va soyasi kerak emas */
.hbd-emoji-inmodal{position:static;width:100%;box-shadow:none;border:0;
  animation:none}

/* ── Xabarlar skeleti (yuklanayotganda) ──────────────────────────────── */
.hbd-skel-row{display:flex;align-items:flex-end;gap:8px;margin-bottom:10px}
.hbd-skel-row.out{justify-content:flex-end}
.hbd-skel-row .hbd-skel-av{width:28px;height:28px;border-radius:50%;flex:none}
.hbd-skel-bub{height:38px;border-radius:var(--hbd-bubble-radius);max-width:80%}
.hbd-skel-av,.hbd-skel-bub{
  background:linear-gradient(90deg,var(--hb-sfc2) 25%,var(--hb-brd) 37%,var(--hb-sfc2) 63%);
  background-size:400% 100%;animation:hbd-shimmer 1.4s ease-in-out infinite}
@keyframes hbd-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* ── Sarlavha ostidagi ijrochi (ovozli / yumaloq video xabar) ────────── */
.hbd-nowplay{display:flex;align-items:center;gap:10px;flex:none;
  padding:7px 10px;border-bottom:1px solid var(--hb-brd);
  background:var(--hb-sfc2);animation:hb-popin var(--hbd-t-fast) var(--hbd-e-out) both}
.hbd-nowplay[hidden]{display:none}
/* «⏪ ▶ ⏩» — Telegram desktopdagi kabi YONMA-YON, chap chekkada */
.hbd-np-ctl{display:flex;align-items:center;gap:2px;flex:none}
.hbd-np-nav,.hbd-np-play,.hbd-np-x,.hbd-np-rate{background:transparent;border:0;
  cursor:pointer;color:var(--hb-txt);flex:none;border-radius:8px;
  display:grid;place-items:center;transition:background .12s,opacity .12s}
.hbd-np-nav{width:26px;height:28px;font-size:13px;line-height:1}
.hbd-np-play{width:32px;height:32px;font-size:14px;background:var(--hb-acc);
  color:var(--hb-acc-ink);border-radius:50%}
.hbd-np-rate{width:34px;height:26px;font-size:11px;font-weight:800;
  border:1px solid var(--hb-brd)}
.hbd-np-x{width:26px;height:26px;font-size:12px;color:var(--hb-mut)}
.hbd-np-nav:hover,.hbd-np-x:hover,.hbd-np-rate:hover{background:var(--hb-sfc)}
/* ‹ › HAR DOIM ko'rinadi — chegarada faqat so'nadi (buyurtmachi so'rovi) */
.hbd-np-nav:disabled{opacity:.28;cursor:default;background:transparent}
.hbd-np-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.hbd-np-title{font-size:11.5px;font-weight:700;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.hbd-np-bar{height:4px;border-radius:999px;background:rgba(128,128,128,.28);
  cursor:pointer;overflow:hidden}
.hbd-np-bar>i{display:block;height:100%;width:0;background:var(--hb-acc);
  border-radius:999px}
.hbd-np-time{font-size:10.5px;font-weight:700;color:var(--hb-mut);flex:none;
  white-space:nowrap;font-variant-numeric:tabular-nums}
/* Pufakcha ichida ijro etilayotgan yumaloq video */
.hbd-vnote-vid{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border-radius:50%;display:block}
@media (max-width:640px){
  .hbd-np-rate,.hbd-np-time{display:none}
}

/* ── Yumaloq video xabar (Telegram «video xabar») ───────────────────── */
.hbd-vnote{width:190px;height:190px;border-radius:50%;position:relative;
  background:var(--hb-sfc2) center/cover no-repeat;cursor:pointer;flex:none;
  align-self:flex-start;border:2px solid var(--hb-brd);
  transition:transform var(--hbd-t-fast) var(--hbd-e-out)}
.hbd-vnote:hover{transform:scale(1.02)}
/* `active` — video biriktirilgan (ochilgan); `playing` — HOZIR chalinyapti.
   Ikkisi ajratilgan: pauzada halqa yonib turadi, «▶» esa qaytib chiqadi. */
.hbd-vnote.active,.hbd-vnote.playing{border-color:var(--hb-acc)}
/* [TUZOQ] `z-index` shart: `<video>` pufakchaga OXIRIDA qo'shiladi, ya'ni
   DOM tartibi bo'yicha «▶» ning ustiga chiqadi va pauzada tugma
   ko'rinmay qoladi. */
.hbd-vnote-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;
  display:grid;place-items:center;font-size:15px;z-index:2}
.hbd-vnote.playing .hbd-vnote-play{display:none}
.hbd-vnote-dur{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);
  font-size:10.5px;font-weight:800;color:#fff;background:rgba(0,0,0,.55);
  padding:1px 8px;border-radius:999px;z-index:2}
.hbd-voice.playing .hbd-iconbtn{background:var(--hb-acc);color:var(--hb-acc-ink);
  border-color:var(--hb-acc)}

/* ── Yozib olish paneli ─────────────────────────────────────────────── */
.hbd-recbar{display:flex;align-items:center;gap:10px;padding:8px 4px 0}
.hbd-recbar[hidden]{display:none}
/* ╔═══════════════════════════════════════════════════════════════════╗
   ║ [TUZOQ] «Bekor»/«Yuborish» YOZAYOTGANDA KO'RINMAYDI.              ║
   ║ Ular kompozitor ichida, `#hbdRec` bilan bir ustunda: panel        ║
   ║ ochilganda tugmalar aynan sichqoncha turgan nuqtaga tushardi va   ║
   ║ qo'yib yuborish ikkinchi marta yuborardi (buyurtmachi 2026-08-01).║
   ║ Telegramda ham ular faqat QULFLANGANDAN keyin chiqadi.            ║
   ╚═══════════════════════════════════════════════════════════════════╝ */
.hbd-recbar #hbdRecCancel,.hbd-recbar #hbdRecSend{
  display:none;pointer-events:none}
.hbd-recbar.locked #hbdRecCancel,.hbd-recbar.locked #hbdRecSend{
  display:inline-flex;pointer-events:auto}
/* Chapga surilgan holat — qizil, «qo'yib yuborsang bekor bo'ladi» */
.hbd-recbar.will-cancel .hbd-rechint{color:var(--hb-danger);font-weight:800}
.hbd-recbar.will-cancel .hbd-recwave{background:linear-gradient(90deg,var(--hb-danger),transparent)}
.hbd-recvideo.will-cancel{border-color:var(--hb-danger);opacity:.6}
.hbd-recdot{width:10px;height:10px;border-radius:50%;background:var(--hb-danger);
  flex:none;animation:hbd-recblink 1s ease-in-out infinite}
@keyframes hbd-recblink{0%,100%{opacity:1}50%{opacity:.25}}
.hbd-rectime{font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;flex:none}
.hbd-rechint{font-size:10.5px;font-weight:600;color:var(--hb-mut);flex:none;
  white-space:nowrap}
@media (max-width:640px){.hbd-rechint{display:none}}
.hbd-recwave{flex:1;height:3px;border-radius:999px;
  background:linear-gradient(90deg,var(--hb-acc),transparent);
  animation:hbd-recwave 1.2s linear infinite}
@keyframes hbd-recwave{0%{opacity:.35}50%{opacity:1}100%{opacity:.35}}
.hbd-recvideo{position:absolute;bottom:100%;right:12px;z-index:30;margin-bottom:8px;
  width:190px;height:190px;border-radius:50%;overflow:hidden;background:#000;
  border:3px solid var(--hb-acc);box-shadow:var(--hb-shadow)}
.hbd-recvideo[hidden]{display:none}
.hbd-recvideo video{width:100%;height:100%;object-fit:cover;display:block;
  transform:scaleX(-1)}          /* oyna kabi — o'zini ko'rish qulay */
.hbd-composer.recording .hbd-input{opacity:.4;pointer-events:none}
.hbd-recbtn,.hbd-recswap{font-size:15px}
.hbd-composer.recording .hbd-recbtn{background:var(--hb-danger);color:#fff;
  border-color:var(--hb-danger)}

/* Profil kartasidagi Telegram ismi */
.hbd-card-tg{font-size:11.5px;font-weight:700;color:var(--hb-info);
  overflow-wrap:anywhere}

/* ── So'rovnoma (Telegram uslubi, 2026-07-31) ───────────────────────── */
.hbd-poll{display:flex;flex-direction:column;gap:6px;min-width:min(260px,60vw);
  padding:2px 0}
.hbd-poll.busy{opacity:.55;pointer-events:none}
.hbd-poll-q{font-size:13.5px;font-weight:800;line-height:1.35;overflow-wrap:anywhere}
.hbd-poll-meta{font-size:10.5px;font-weight:700;opacity:.62;text-transform:lowercase}
.hbd-poll-opts{display:flex;flex-direction:column;gap:3px;margin-top:2px}
.hbd-poll-opt{display:flex;flex-direction:column;gap:3px;padding:5px 6px;
  border-radius:8px;font-size:12.5px;font-weight:650}
.hbd-poll-opt.clickable{cursor:pointer;flex-direction:row;align-items:center;gap:8px}
.hbd-poll-opt.clickable:hover{background:rgba(var(--hb-acc-rgb),.12)}
.hbd-poll-opt.on{background:rgba(var(--hb-acc-rgb),.18)}
.hbd-poll-mark{width:15px;height:15px;flex:none;border-radius:50%;
  border:2px solid currentColor;opacity:.5}
.hbd-poll-mark.sq{border-radius:4px}
.hbd-poll-opt.on .hbd-poll-mark{opacity:1;background:var(--hb-acc);
  border-color:var(--hb-acc)}
.hbd-poll-top{display:flex;align-items:baseline;gap:7px}
.hbd-poll-pc{font-size:11.5px;font-weight:800;min-width:34px;text-align:right;
  flex:none;opacity:.85;font-variant-numeric:tabular-nums}
.hbd-poll-txt{flex:1;min-width:0;overflow-wrap:anywhere}
.hbd-poll-tick{flex:none;font-size:11px}
.hbd-poll-bar{height:4px;border-radius:999px;background:rgba(128,128,128,.22);
  overflow:hidden}
.hbd-poll-fill{height:100%;border-radius:999px;background:var(--hb-acc);
  transition:width var(--hbd-t-base) var(--hbd-e-out)}
.hbd-poll-opt.mine .hbd-poll-fill{background:var(--hb-acc)}
.hbd-poll-opt.right .hbd-poll-fill{background:var(--hb-ok,#2ea043)}
.hbd-poll-opt.wrong .hbd-poll-fill{background:var(--hb-danger)}
/* O'z pufakchamizning foni `--hb-acc` — polosa ham laym bo'lsa KO'RINMAYDI */
.hbd-row.out .hbd-poll-bar{background:rgba(0,0,0,.18)}
.hbd-row.out .hbd-poll-fill,
.hbd-row.out .hbd-poll-opt.mine .hbd-poll-fill{background:var(--hb-acc-ink)}
.hbd-row.out .hbd-poll-opt.clickable:hover{background:rgba(0,0,0,.10)}
.hbd-row.out .hbd-poll-opt.on{background:rgba(0,0,0,.14)}
.hbd-row.out .hbd-poll-opt.on .hbd-poll-mark{background:var(--hb-acc-ink);
  border-color:var(--hb-acc-ink)}
.hbd-row.out .hbd-poll-send{background:var(--hb-acc-ink);color:var(--hb-acc)}
.hbd-poll-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:10.5px;font-weight:700;opacity:.7;margin-top:2px}
.hbd-poll-link{background:none;border:0;padding:0;cursor:pointer;font:inherit;
  color:var(--hbd-link);opacity:1;text-decoration:underline}
.hbd-row.out .hbd-poll-link{color:var(--hbd-link-own)}
.hbd-poll-send{align-self:flex-start;margin-top:4px}
.hbd-poll-note{font-size:10.5px;font-weight:650;opacity:.62;line-height:1.35;
  padding-top:2px}
.hbd-poll-vgroup{font-size:11.5px;font-weight:800;opacity:.7;padding:8px 2px 2px}
/* Yaratish oynasi */
.hbd-pollform-opts{display:flex;flex-direction:column;gap:6px}
.hbd-pollform-row{display:flex;align-items:center;gap:6px}
.hbd-pollform-row .hb-input{flex:1;min-width:0}
.hbd-pollform-check{display:flex;align-items:center;gap:8px;font-size:12.5px;
  font-weight:650;cursor:pointer}
.hbd-pollform-check input{width:16px;height:16px;accent-color:var(--hb-acc);
  cursor:pointer}

/* ── Media ko'ruvchi (lightbox) ─────────────────────────────────────── */
.hbd-viewer{position:fixed;inset:0;z-index:320;background:rgba(0,0,0,.96);
  backdrop-filter:blur(6px);
  display:flex;flex-direction:column;animation:hb-fadein var(--hbd-t-fast) both}
.hbd-viewer-head{display:flex;align-items:center;gap:12px;padding:12px 16px;
  color:#fff;flex:none}
.hbd-viewer-meta{flex:1;font-size:12.5px;font-weight:700;opacity:.9;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbd-viewer-btn{width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;font-size:16px;display:grid;
  place-items:center;text-decoration:none;flex:none;transition:background .15s}
.hbd-viewer-btn:hover{background:rgba(255,255,255,.24)}
/* [TUZOQ] Bu yerda `display:grid;place-items:center` ISHLAMAYDI. Grid'ning
   avtomatik qatori KONTENT bo'yicha o'lchanadi, shu bois rasmning
   `max-height:100%` i o'z balandligiga nisbatan hisoblanadi — ya'ni hech
   qanday cheklov bermaydi. Rasm sahna chegarasidan oshadi va `overflow:hidden`
   uni KESIB tashlaydi (foydalanuvchi 2026-07-31: "komda rasim ochqanimda
   kesilib ketyabdi").
   Yechim — klassik `position:absolute;inset:0;margin:auto`: konteyner
   `position:relative` bo'lgani uchun balandligi ANIQ, `max-height:100%`
   to'g'ri hisoblanadi, `margin:auto` esa ikki o'q bo'yicha markazlaydi. */
.hbd-viewer-stage{flex:1;min-height:0;min-width:0;position:relative;
  padding:0 16px;overflow:hidden}
.hbd-viewer-media{position:absolute;inset:0;margin:auto;
  max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  cursor:zoom-in;transition:transform var(--hbd-t-fast);will-change:transform}
.hbd-viewer-nav{position:absolute;top:50%;transform:translateY(-50%);width:50px;
  height:50px;border-radius:50%;border:0;cursor:pointer;font-size:26px;
  background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center}
.hbd-viewer-nav:hover:not(:disabled){background:rgba(255,255,255,.22)}
/* Chekkada tugma YO'QOLMAYDI — nofaol bo'ladi (ijrochidagi qoida) */
.hbd-viewer-nav:disabled{opacity:.22;cursor:default}
.hbd-viewer-nav.prev{left:14px}
.hbd-viewer-nav.next{right:14px}

/* ── Ko'ruvchi ichidagi video (2026-07-31) ──────────────────────────────
   Rasmdan farqli: `absolute;inset:0` EMAS — video ramkasi, nomi va hajmi
   bilan bitta ustunda markazlashadi, boshqaruv paneli kesilmaydi. */
.hbd-viewer-vbox{position:absolute;inset:0;margin:auto;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:12px;
  width:100%;height:100%;pointer-events:none}
.hbd-viewer-vbox > *{pointer-events:auto}
.hbd-viewer-video{max-width:min(1120px,100%);max-height:calc(100% - 52px);
  width:auto;height:auto;border-radius:14px;background:#000;display:block;
  box-shadow:0 18px 60px rgba(0,0,0,.55);outline:none}
/* ── O'z video paneli (L12 §2.2) ────────────────────────────────────────
   `<video controls>` OLIB TASHLANDI: brauzerning paneli Chrome/Safari/
   mobil da uch xil ko'rinadi va tezlik boshqaruvi kontekst menyusida
   yashirin. Buyurtmachi: «defult style olib tashla … tezlashtirish». */
.hbd-viewer-vbox{cursor:default}
.hbd-vc{display:flex;align-items:center;gap:10px;width:min(1120px,100%);
  padding:8px 12px;border-radius:var(--hb-pill);background:rgba(20,20,24,.72);
  backdrop-filter:blur(8px);color:#fff;
  transition:opacity var(--hbd-t-base),transform var(--hbd-t-base)}
.hbd-viewer-vbox.idle .hbd-vc{opacity:0;transform:translateY(8px);pointer-events:none}
.hbd-vc-btn{background:none;border:0;color:#fff;cursor:pointer;font:inherit;
  font-size:15px;line-height:1;padding:4px 6px;border-radius:8px;flex:none}
.hbd-vc-btn:hover{background:rgba(255,255,255,.16)}
.hbd-vc-rate{font-size:11.5px;font-weight:800;min-width:34px}
.hbd-vc-time{font-size:11.5px;font-weight:700;flex:none;white-space:nowrap;
  font-variant-numeric:tabular-nums;opacity:.85}
.hbd-vc-bar{position:relative;flex:1;height:4px;border-radius:999px;
  background:rgba(255,255,255,.22);cursor:pointer;min-width:60px}
.hbd-vc-bar::before{content:'';position:absolute;inset:-8px 0}  /* bosish maydoni */
.hbd-vc-buf{position:absolute;left:0;top:0;height:100%;width:0;border-radius:999px;
  background:rgba(255,255,255,.28)}
.hbd-vc-fill{position:absolute;left:0;top:0;height:100%;width:0;border-radius:999px;
  background:var(--hb-acc)}
.hbd-vc-knob{position:absolute;top:50%;left:0;width:11px;height:11px;border-radius:50%;
  background:var(--hb-acc);transform:translate(-50%,-50%);pointer-events:none}
/* Ovoz balandligi — 🔊 tugmasining O'ZIDA, ustiga borilganda ochiladi
   (buyurtmachi: «shu o'rnatishni ham shu ovozlar turgan joyga qo'sh») */
.hbd-vc-vol{display:flex;align-items:center;gap:6px;flex:none}
.hbd-vc-slider{width:0;opacity:0;height:4px;padding:0;margin:0;cursor:pointer;
  appearance:none;-webkit-appearance:none;background:transparent;
  transition:width var(--hbd-t-base),opacity var(--hbd-t-base)}
.hbd-vc-vol:hover .hbd-vc-slider,.hbd-vc-slider:focus-visible{width:76px;opacity:1}
.hbd-vc-slider::-webkit-slider-runnable-track{height:4px;border-radius:999px;
  background:linear-gradient(90deg,var(--hb-acc) var(--v,70%),rgba(255,255,255,.25) var(--v,70%))}
.hbd-vc-slider::-moz-range-track{height:4px;border-radius:999px;background:rgba(255,255,255,.25)}
.hbd-vc-slider::-moz-range-progress{height:4px;border-radius:999px;background:var(--hb-acc)}
.hbd-vc-slider::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;
  margin-top:-3.5px;border-radius:50%;background:#fff;cursor:pointer}
.hbd-vc-slider::-moz-range-thumb{width:11px;height:11px;border:0;border-radius:50%;
  background:#fff;cursor:pointer}
/* ── To'liq ekran (L12) ─────────────────────────────────────────────────
   [TUZOQ] `.hbd-viewer-vbox` — `position:absolute;inset:0` bo'lgan
   element. To'liq ekranda uning containing block'i yo'qoladi va ichidagi
   video bilan panel joyidan siljib ketardi («full screen noto'g'ri
   ishlayabdi»). Shu bois to'liq ekranda o'lchamlar QAYTA belgilanadi. */
.hbd-viewer-vbox:fullscreen{position:static;width:100vw;height:100vh;
  background:#000;gap:0;padding:0}
.hbd-viewer-vbox:fullscreen .hbd-viewer-video{max-width:100vw;max-height:100vh;
  border-radius:0;box-shadow:none}
.hbd-viewer-vbox:fullscreen .hbd-vc{position:fixed;left:50%;bottom:20px;
  transform:translateX(-50%);width:min(1120px,92vw);z-index:2}
.hbd-viewer-vbox:fullscreen.idle .hbd-vc{transform:translateX(-50%) translateY(8px)}
@media (max-width:640px){.hbd-vc-rate,.hbd-vc-time{display:none}
  .hbd-vc-vol:hover .hbd-vc-slider{width:56px}}
.hbd-viewer-strip{display:flex;gap:6px;padding:12px 16px;overflow-x:auto;flex:none;
  justify-content:center;scrollbar-width:none}
.hbd-viewer-strip::-webkit-scrollbar{display:none}
.hbd-viewer-thumb{width:52px;height:52px;border-radius:8px;flex:none;cursor:pointer;
  background:#333 center/cover no-repeat;opacity:.5;position:relative;
  border:2px solid transparent;transition:opacity .15s}
.hbd-viewer-thumb.on{opacity:1;border-color:var(--hb-acc)}
.hbd-viewer-thumb .hbd-vplay{width:20px;height:20px;font-size:9px}
@media (max-width:640px){
  .hbd-viewer-nav{display:none}      /* mobilda svayp bilan */
  .hbd-viewer-strip{justify-content:flex-start}
}

/* ── Kanal haqida — modal (yon panel o'rniga) ───────────────────────── */
.hbd-infomodal{max-width:440px;width:min(440px,calc(100vw - 32px));
  max-height:min(78vh,720px);display:flex;flex-direction:column;gap:0;padding:0}
.hbd-infomodal-head{display:flex;align-items:center;gap:10px;padding:14px 16px;
  border-bottom:1px solid var(--hb-brd);flex:none}
.hbd-infomodal-head .hbd-modal-title{flex:1;margin:0}
.hbd-infomodal-body{overflow-y:auto;padding:14px 16px;min-height:0;
  display:flex;flex-direction:column;gap:14px}

/* ── 📎 biriktirish menyusi ─────────────────────────────────────────── */
.hbd-attmenu{position:absolute;left:10px;bottom:calc(100% + 8px);z-index:40;
  background:var(--hb-sfc);border:1px solid var(--hb-brd);
  border-radius:var(--hb-radius-sm);box-shadow:0 12px 34px rgba(0,0,0,.22);
  padding:6px;min-width:216px;
  animation:hb-popin var(--hbd-t-fast) var(--hbd-e-out) both}
.hbd-attitem{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;
  border:0;background:transparent;cursor:pointer;border-radius:9px;font:inherit;
  font-size:12.5px;font-weight:700;color:var(--hb-txt);text-align:left}
.hbd-attitem:hover{background:var(--hb-sfc2)}
.hbd-attic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  background:var(--hb-sfc2);font-size:14px;flex:none}
.hbd-atthint{padding:7px 10px 4px;font-size:10.5px;font-weight:600;
  color:var(--hb-mut);border-top:1px solid var(--hb-brd);margin-top:4px}
/* 📎 tugmasi — bosilganda aniq ko'rinsin */
#hbdAttach{font-size:16px}
#hbdAttach:hover{background:var(--hb-acc);color:var(--hb-acc-ink);
  border-color:var(--hb-acc)}

/* ── Onlayn nuqta ──────────────────────────────────────────────────── */
.hbd-avwrap{position:relative;display:inline-block;flex:none}
.hbd-avwrap .hbd-dot,.hbd-row-av .hbd-dot,.hbd-av .hbd-dot{
  position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;
  background:var(--hb-ok);border:2px solid var(--hb-sfc);display:block}
.hbd-row-av .hbd-dot{width:8px;height:8px}

/* ── Uch oyna boshqaruvi ───────────────────────────────────────────── */
.hbd-panetgl{display:none}

/* ── Yig'ilgan ro'yxat = TOR ZOLA (Telegram desktop naqshi) ──────────────
   [O'ZGARDI 2026-07-31] Ilgari `display:none` edi — ro'yxat butunlay
   yo'qolardi va boshqa suhbatga o'tib bo'lmasdi. Buyurtmachi: «butunlay
   yopilmasligi kerak, bu Telegramdagi kabi rasmni yoki avatarni chiqarib
   turishi kerak». Endi 72px zola qoladi: avatar, onlayn nuqtasi va
   o'qilmagan belgisi ko'rinadi, bosib suhbat almashtiriladi. */

@media (min-width:861px){
  .hbd-panetgl{display:grid}
  .hbd.hbd-nolist{grid-template-columns:72px minmax(0,1fr)}
}
@media (min-width:1100px){
  .hbd.hbd-noinfo{grid-template-columns:320px minmax(0,1fr)}
  .hbd.hbd-noinfo .hbd-info{display:none}
  .hbd.hbd-nolist{grid-template-columns:72px minmax(0,1fr) 300px}
  .hbd.hbd-nolist.hbd-noinfo{grid-template-columns:72px minmax(0,1fr)}
}
@media (min-width:861px){
  .hbd-nolist .hbd-list-head{padding:10px 6px;gap:6px}
  .hbd-nolist .hbd-list-title,
  .hbd-nolist .hb-search{display:none}
  .hbd-nolist .hbd-list-title-row{flex-direction:column;gap:6px}
  /* Bo'limlar (Barchasi / Shaxsiy / @ / 👁) zolada ham QOLADI — ustma-ust
     belgilar ko'rinishida, Telegram'ning chapdagi papka zolasi kabi.
     Ularsiz yig'ilgan holatda bo'limni almashtirib bo'lmasdi. */
  .hbd-nolist .hbd-tabs{flex-direction:column;gap:4px;overflow:visible;
    align-items:center}
  .hbd-nolist .hbd-tab{width:40px;height:34px;padding:0;font-size:15px;
    position:relative}
  .hbd-nolist .hbd-tab>span{display:none}
  .hbd-nolist .hbd-tab::after{content:attr(data-ic);line-height:1}
  .hbd-nolist .hbd-item{grid-template-columns:minmax(0,1fr);justify-items:center;
    padding:8px 4px;min-height:auto;position:relative}
  .hbd-nolist .hbd-item-mid{display:none}
  .hbd-nolist .hbd-item-time{display:none}
  .hbd-nolist .hbd-item-right{position:absolute;top:5px;right:9px;gap:0}
  /* Zolada ism ko'rinmaydi — nima ustida turganini tooltip aytadi */
  .hbd-nolist .hbd-item::before{width:3px}
}
.hbd-panetgl.on{background:var(--hb-acc);color:var(--hb-acc-ink);
  border-color:var(--hb-acc)}

/* ── Holat: «onlayn» / «kecha 09:12 da» (L13, 2026-08-01) ────────────────
   Buyurtmachi: «har bir odam onlayn bo'lganmi-yo'qmi va QACHON onlayn
   bo'lganini ham ko'rsatish kerak». */
.hbd-member-seen{flex:none;font-size:10px;font-weight:700;color:var(--hb-mut);
  white-space:nowrap;margin-left:auto;padding-left:6px}
.hbd-member-seen.on{color:var(--hb-ok)}

/* ── Bo'lim bo'yicha tez qo'shish (L13, 2026-08-01) ──────────────────────
   Buyurtmachi: «qanday bo'limlarni tanlash va TEZLASHTIRIB odamlarni
   qo'shish mumkinligini ham qilish kerak». 77 xodimni bittalab izlash
   o'rniga bo'limga bitta bosish. */
.hbd-deps{display:flex;flex-direction:column;gap:5px}
.hbd-deprow{display:flex;flex-wrap:wrap;gap:5px;max-height:104px;overflow-y:auto}
.hbd-depchip{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;
  border:1px solid var(--hb-brd2);border-radius:var(--hb-pill);background:var(--hb-sfc);
  color:var(--hb-txt);font:inherit;font-size:11.5px;font-weight:700;cursor:pointer;
  transition:background var(--hbd-t-fast),border-color var(--hbd-t-fast)}
.hbd-depchip b{font-size:10px;font-weight:800;color:var(--hb-mut);
  background:var(--hb-sfc2);border-radius:999px;padding:1px 6px}
.hbd-depchip:hover{background:var(--hb-sfc2);border-color:var(--hb-acc)}
.hbd-depchip.done{background:rgba(var(--hb-acc-rgb),.16);border-color:var(--hb-acc)}
.hbd-depchip:disabled{opacity:.5;cursor:default}
.hbd-infoact.ok{color:var(--hb-ok)}