/* A2 — 2.1: ⏱ replay paneli (#replaySlot), ofis ustidagi yorliq, bo'sh holat kartasi, 🧾 agent kartasi va xabarlar tarixi.
   Faqat base.css tokenlari. Bu faylni faqat A2 o'zgartiradi. */

/* ------------------------------ Replay paneli ------------------------------ */
.replay-slot:empty{display:none}
.rp-panel{
  --rpc: var(--info);
  flex:none; display:flex; flex-direction:column; gap:6px;
  margin:0 14px 8px; padding:8px 12px;
  background:var(--panel); border:1px solid var(--line-2); border-left:4px solid var(--rpc);
  border-radius:var(--r-sm); box-shadow:var(--shadow-sm);
  font-size:13px; min-width:0;
}
.rp-panel[hidden]{display:none}
.rp-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0}
.rp-tag{
  font:700 11px/1 var(--font-mono); letter-spacing:.06em; color:#fff; background:var(--navy);
  padding:6px 8px; border-radius:var(--r-xs); white-space:nowrap;
}
.rp-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
.rp-fld{display:inline-flex}
.rp-win,.rp-sel{
  height:30px; padding:0 26px 0 10px; border:1px solid var(--line-2); border-radius:var(--r-xs);
  background:var(--panel-2); color:var(--text); font-size:12.5px; max-width:220px;
  appearance:auto;
}
.rp-sel.on{border-color:var(--rpc); background:var(--accent-soft); font-weight:600;
  box-shadow:inset 3px 0 0 var(--rpc)}
.rp-btn{
  height:30px; min-width:30px; padding:0 10px; border:1px solid var(--line-2); border-radius:var(--r-xs);
  background:var(--panel-2); color:var(--ink); font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap;
}
.rp-btn:hover{background:var(--surface-3)}
.rp-btn[hidden]{display:none}
.rp-play.on{background:var(--navy); color:#fff; border-color:var(--navy)}
.rp-speed{font-family:var(--font-mono); min-width:40px}
.rp-live{margin-left:auto; color:var(--err); border-color:color-mix(in srgb, var(--err) 35%, var(--line-2))}
.rp-live:hover{background:color-mix(in srgb, var(--err) 10%, var(--panel))}
.rp-range{flex:1 1 220px; min-width:140px; accent-color:var(--rpc); height:22px; cursor:pointer}
.rp-time{display:inline-flex; align-items:baseline; gap:6px; white-space:nowrap}
.rp-time b{font-size:14px; color:var(--navy); font-variant-numeric:tabular-nums}
.rp-time small{color:var(--muted); font-size:11.5px}
.rp-info{color:var(--muted); font-size:11.5px; white-space:nowrap}
.rp-flab{color:var(--muted); font-size:12px; font-weight:600}
.rp-panel.loading .rp-range,.rp-panel.loading .rp-play{opacity:.5; pointer-events:none}
.rp-panel.rp-error .rp-main > :not(.rp-tag):not(.rp-live):not(.rp-fld),
.rp-panel.rp-error .rp-filters{display:none}
.rp-msg{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 10px;
  background:var(--panel-2); border:1px dashed var(--line-2); border-radius:var(--r-xs); color:var(--ink)}
.rp-msg[hidden]{display:none}
.rp-msg b{display:block; color:var(--text)}
.rp-msg > span:nth-child(2){flex:1 1 260px; color:var(--muted); font-size:12.5px}
.rp-msg-ic{font-size:22px}

/* Replay paytida ofis «o'tmish» ekanini sezdiradi */
:root[data-replay] #office{box-shadow:inset 0 0 0 3px color-mix(in srgb, var(--info) 45%, transparent)}

/* ------------------------------ Overlay (fxLayer) ------------------------------ */
.rp-badge{
  position:fixed; z-index:30; pointer-events:none;
  font:700 12px/1 var(--font-mono); letter-spacing:.05em; color:#fff;
  background:color-mix(in srgb, var(--navy) 88%, transparent); padding:7px 10px; border-radius:999px;
  box-shadow:var(--shadow-sm);
}
.rp-badge[hidden]{display:none}
.rp-empty{
  position:fixed; z-index:31; transform:translate(-50%, -50%);
  width:min(360px, calc(100vw - 32px)); padding:18px 20px; text-align:center;
  background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r); box-shadow:var(--shadow);
}
.rp-empty[hidden]{display:none}
.rp-empty-ic{font-size:28px; margin-bottom:4px}
.rp-empty b{display:block; font-size:15px; color:var(--text); margin-bottom:4px}
.rp-empty p{margin:0 0 12px; color:var(--muted); font-size:12.5px}

/* ------------------------------ 🧾 Agent kartasi (history.js) ------------------------------ */
.hc{
  position:fixed; z-index:40; right:14px; width:min(360px, calc(100vw - 28px));
  display:flex; flex-direction:column; min-height:0;
  background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r); box-shadow:var(--shadow);
  overflow:hidden; font-size:13px;
}
.hc[hidden]{display:none}
.hc.expanded{height:100vh}   /* inline max-height cheklaydi — ro'yxatga joy */
.hc-head{display:flex; align-items:flex-start; gap:10px; padding:12px 12px 8px; border-bottom:1px solid var(--line)}
.hc-dot{width:10px; height:10px; border-radius:50%; flex:none; margin-top:5px; background:var(--dot, #b7c3d4)}
.hc-tt{flex:1; min-width:0}
.hc-tt b{display:block; font-size:15px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hc-tt small{display:block; color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hc-x{border:0; background:transparent; font-size:18px; line-height:1; padding:2px 4px; color:var(--muted); cursor:pointer; border-radius:var(--r-xs)}
.hc-x:hover{background:var(--surface-3); color:var(--text)}
.hc-body{padding:10px 12px; display:flex; flex-direction:column; gap:8px; flex:none}
.hc-chips{display:flex; flex-wrap:wrap; gap:6px}
.hc-chip{display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border-radius:999px; background:var(--chip);
  font-size:11.5px; color:var(--ink); white-space:nowrap}
.hc-chip.st{color:#fff; background:var(--dot, var(--muted)); font-weight:700; letter-spacing:.03em}
.hc-chip i{width:8px; height:8px; border-radius:2px; background:var(--sq, var(--muted))}
.hc-kv{display:grid; grid-template-columns:auto 1fr; gap:3px 10px; margin:0; font-size:12.5px}
.hc-kv dt{color:var(--muted)}
.hc-kv dd{margin:0; min-width:0; overflow-wrap:anywhere}
.hc-bar{height:6px; border-radius:3px; background:var(--line); overflow:hidden}
.hc-bar i{display:block; height:100%; background:var(--dot, var(--info))}
.hc-tl-wrap{display:flex; flex-direction:column; gap:4px}
.hc-tl-wrap[hidden]{display:none}   /* HANDOFF §6.9 */
.hc-tl-wrap small{color:var(--muted); font-size:11px}
.hc-tl{display:flex; gap:3px; height:12px}
.hc-tl i{flex:1; border-radius:3px; background:var(--dot, #b7c3d4); min-width:6px}
.hc-tl.loading i{background:var(--line); animation:hcPulse 1.2s infinite ease-in-out}
@keyframes hcPulse{50%{opacity:.45}}
.hc-more{
  height:32px; border:1px solid var(--line-2); border-radius:var(--r-xs); background:var(--panel-2);
  font-weight:600; color:var(--navy); cursor:pointer;
}
.hc-more:hover{background:var(--surface-3)}
.hc-more[aria-expanded="true"]{background:var(--navy); color:#fff; border-color:var(--navy)}
.hc-hist{display:flex; flex-direction:column; min-height:0; flex:1; border-top:1px solid var(--line)}
.hc-hist[hidden]{display:none}
.hc-hhead{display:flex; justify-content:space-between; align-items:center; padding:8px 12px; font-size:12px; color:var(--muted)}
.hc-hhead b{color:var(--text)}
.hc-list{list-style:none; margin:0; padding:0 8px 8px; overflow-y:auto; min-height:80px; flex:1; overscroll-behavior:contain}
.hc-list li{display:grid; grid-template-columns:auto 1fr; gap:2px 8px; padding:7px 6px; border-bottom:1px solid var(--line)}
.hc-list li.new{animation:hcNew 1.6s ease-out}
@keyframes hcNew{from{background:var(--accent-soft)}to{background:transparent}}
.hc-list li > i{grid-row:span 2; width:8px; height:8px; border-radius:50%; margin-top:5px; background:var(--dot, #b7c3d4)}
.hc-list .hm{display:flex; gap:8px; align-items:baseline; font-size:11.5px; color:var(--muted)}
.hc-list .hm b{font-family:var(--font-mono); color:var(--ink); font-weight:600}
.hc-list .ht{font-size:12.5px; color:var(--text); overflow-wrap:anywhere}
.hc-list .ht em{color:var(--muted); font-style:normal; font-family:var(--font-mono); font-size:11.5px}
.hc-list li.note{display:block; text-align:center; color:var(--muted); font-size:12px; border-bottom:0; padding:12px 6px}
.hc-list li.note.err{color:var(--err)}

@media (max-width:1280px){
  .rp-panel{margin:0 10px 6px; padding:6px 10px; gap:5px}
  .rp-win,.rp-sel{max-width:170px}
  .rp-info{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hc-list li.new,.hc-tl.loading i{animation:none}
}