/* A4 — 2.1: 🧩 kengaytmalar paneli, topbar siqish («⋯ ko'proq»), replay holati.
   Tokenlar base.css dan. HANDOFF §6.9: o'z display'i bor elementlarga [hidden] qoidasi alohida yoziladi. */

/* ------------------------------ 🧩 Kengaytmalar paneli ------------------------------ */
.ext-panel{
  position:fixed; left:0; top:0; z-index:9100; pointer-events:auto;
  width:300px; max-width:calc(100vw - 16px); max-height:calc(100vh - 80px);
  display:flex; flex-direction:column;
  background:var(--panel); color:var(--text);
  border:1px solid var(--line-2); border-radius:var(--r);
  box-shadow:0 14px 40px rgba(19,35,63,.18), 0 2px 6px rgba(19,35,63,.06);
  font-size:13px; overflow:hidden;
}
.ext-panel[hidden]{display:none !important}
.ext-head{display:flex; align-items:center; gap:8px; padding:11px 12px 9px 14px; border-bottom:1px solid var(--line)}
.ext-head b{font-weight:700; color:var(--navy)}
.ext-count{font-size:11px; color:var(--muted); background:var(--chip); padding:1px 7px; border-radius:10px}
.ext-x{margin-left:auto; border:0; background:none; color:var(--muted); cursor:pointer; font-size:13px; width:26px; height:26px; border-radius:var(--r-xs)}
.ext-x:hover{background:var(--surface-3); color:var(--ink)}
.ext-list{list-style:none; margin:0; padding:6px; overflow:auto}
.ext-row{display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:var(--r-sm); cursor:pointer}
.ext-row:hover{background:var(--panel-2)}
.ext-ico{width:22px; text-align:center; font-size:15px; flex:none}
.ext-lbl{flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink)}
.ext-row:not(.is-on) .ext-lbl{color:var(--muted)}
.ext-sw{flex:none; position:relative; width:34px; height:20px; border-radius:10px; border:0; padding:0; cursor:pointer;
  background:var(--line-2); transition:background .15s}
.ext-sw i{position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.2); transition:transform .15s}
.ext-sw[aria-checked="true"]{background:var(--accent)}
.ext-sw[aria-checked="true"] i{transform:translateX(14px)}
.ext-sw:focus-visible{outline:none; box-shadow:var(--focus)}
.ext-empty{margin:0; padding:16px 14px; color:var(--muted)}
.ext-foot{display:flex; gap:8px; padding:9px 12px; border-top:1px solid var(--line); background:var(--panel-2)}
.ext-foot .ghost{flex:1 1 0; font-size:12px; height:28px; background:var(--panel)}
.ext-foot .ghost:disabled{opacity:.45; cursor:default}
.ext-note{margin:0; padding:0 12px 9px; background:var(--panel-2); color:var(--muted); font-size:11px}

/* ------------------------------ Topbar siqish (topbar.js) ------------------------------
   .tb-narrow (≤1280) / .tb-tiny (≤1100) — bar'ning O'Z kengligi bo'yicha (JS), @media emas. */
.topbar.tb-narrow{gap:10px; padding-left:14px; padding-right:14px}
.topbar.tb-narrow .sub{display:none}
.topbar.tb-narrow .stat.evt{display:none}
.topbar.tb-narrow .stats{padding-left:6px}
.topbar.tb-narrow .stat{min-width:40px; padding:3px 5px}
.topbar.tb-narrow .hsq{min-width:0; padding:4px 8px 4px 6px}
.topbar.tb-narrow .hsq .bar{width:40px}
.topbar.tb-narrow .clockface small{display:none}
.topbar.tb-narrow .officeclock{min-width:120px}
.topbar.tb-tiny .brand h1{display:none}
.topbar.tb-tiny .hsq .bar{display:none}
.topbar.tb-tiny .stat span{letter-spacing:0}
.topbar.tb-tiny .conn-since{display:none}
.topbar.tb-tiny .evchip .txt{max-width:120px}

.subbar.tb-narrow{gap:8px; padding-left:14px; padding-right:14px}
.subbar.tb-narrow #search{width:150px}
.subbar.tb-narrow .ghost.seg .lbl{display:none}
.subbar.tb-tiny #search{width:120px}
.subbar.tb-tiny .fstatus > span{display:none}

/* «⋯ ko'proq» */
.tb-more{font-weight:800; letter-spacing:1px}
.tb-more[hidden]{display:none !important}
.tb-slot{display:none !important}
.tb-tray{
  position:fixed; left:0; top:0; z-index:9050;
  display:flex; flex-direction:column-reverse; /* oxiridan ko'chiriladi — teskari qilib, bar tartibida ko'rsatamiz */ align-items:stretch; gap:4px;
  min-width:190px; max-width:min(300px, calc(100vw - 16px)); max-height:calc(100vh - 80px); overflow:auto;
  padding:6px; background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r-sm);
  box-shadow:0 12px 32px rgba(19,35,63,.18);
}
.tb-tray[hidden]{display:none !important}
.tb-tray > .ghost, .tb-tray > .vwrap > .ghost{width:100%; justify-content:flex-start; padding:0 10px; gap:9px; background:var(--panel)}
.tb-tray > .ghost:hover, .tb-tray > .vwrap > .ghost:hover{background:var(--panel-2)}
.tb-tray > .vwrap{display:block}
/* ikonka-tugmalar menyuda nomi bilan */
.tb-tray > .ghost:not(.seg)::after{content:attr(title); font-size:12.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tb-tray .ghost.seg .lbl{display:inline !important; font-size:12.5px}

/* o'z display'i bor tugmalar uchun [hidden] (HANDOFF §6.9) — kengaytma o'chirilganda tugma yashirinadi */
.controls .ghost[hidden], .tb-tray .ghost[hidden]{display:none !important}