/* C3 — ish stoli, qahramon, bulutcha, animatsiyalar */
/* Stolning umumiy ichki uslubi (castle sahnasi + modern uchun asos).
   2.0 integratsiyada floor.css oxiridan ko'chirildi (coord/requests/c2-desk-css.md) — tartib va
   spetsifiklik o'zgarmagan: floor.css'dan keyin, .desk.m qoidalaridan oldin. */
.desk{position:relative; display:flex; flex-direction:column; padding:4px 4px 0}
.desk[data-status="error"]{background:#fff5f5}
.desk[data-status="done"]{background:#f3fbf7}
.mini-slot{position:relative; height:78px; flex:none}
.desk-scene svg{display:block; width:100%; height:auto}
.desk-foot{display:flex; align-items:center; gap:6px; padding:3px 6px 6px; min-width:0}
.desk-foot .d-name{
  font-size:11.5px; font-weight:700; color:#33415c;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0;
}
.d-chip{
  flex:none; font-weight:800; font-size:9px; text-transform:uppercase; letter-spacing:.4px;
  padding:2px 7px; border-radius:20px; color:#fff; background:#c2cddc;
}
.d-chip.working{background:var(--ok)} .d-chip.thinking{background:var(--think)}
.d-chip.waiting{background:var(--info)} .d-chip.done{background:#1a9d61}
.d-chip.error{background:var(--err)} .d-chip.idle{background:#dbe3ee; color:#55627a}

/* Bulutcha */
.bubble{
  position:absolute; left:43%; bottom:4px; transform:translateX(-50%);
  max-width:96%; min-width:96px;
  background:#fff; color:#17223a;
  border:2px solid #1d2839; border-radius:11px;
  padding:5px 8px 6px;
  font-size:10.5px; font-weight:600; line-height:1.3;
  box-shadow:0 6px 16px rgba(21,42,80,.16);
  z-index:5;
  animation:pop .3s cubic-bezier(.2,1.5,.4,1) both;
}
.bubble::after{
  content:''; position:absolute; bottom:-10px; left:50%; transform:translateX(-50%);
  width:0; height:0; border:7px solid transparent; border-top-color:#1d2839;
}
.bubble::before{
  content:''; position:absolute; bottom:-5.5px; left:50%; transform:translateX(-50%);
  width:0; height:0; border:5px solid transparent; border-top-color:#fff; z-index:1;
}
.bubble .tsk{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.bubble .toolz{
  display:inline-block; margin-top:3px; font-size:8.5px; font-weight:700;
  background:#eef2fb; color:#4a5878; padding:2px 7px; border-radius:6px;
  font-family:'JetBrains Mono', monospace;
}
@keyframes pop{from{opacity:0; transform:translateX(-50%) translateY(8px) scale(.86)}to{opacity:1; transform:translateX(-50%) scale(1)}}

.bubble.think{background:#f4edff; border-color:#3d2a6d}
.bubble.think::before{border-top-color:#f4edff}
.bubble.wait{background:#e9f4ff}
.bubble.wait::before{border-top-color:#e9f4ff}
.bubble.err{background:#ffecee; border-color:#6d1a20}
.bubble.err::before{border-top-color:#ffecee}
.bubble.done{background:#e7f9f0}
.bubble.done::before{border-top-color:#e7f9f0}

.dots{display:inline-flex; gap:3px; margin-left:4px; vertical-align:middle}
.dots i{width:4px; height:4px; border-radius:50%; background:#7488ad; animation:blink 1.2s infinite}
.dots i:nth-child(2){animation-delay:.2s}
.dots i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25; transform:translateY(0)}40%{opacity:1; transform:translateY(-2px)}}

/* Zzz */
.zzz{position:absolute; left:43%; bottom:8px; transform:translateX(-50%);
  font-size:15px; color:#93a6c4; font-weight:800; letter-spacing:2px; opacity:.9}
.zzz span{display:inline-block; animation:float 2.6s infinite ease-in-out}
.zzz span:nth-child(2){animation-delay:.35s; font-size:.8em}
.zzz span:nth-child(3){animation-delay:.7s; font-size:.65em}
@keyframes float{0%{transform:translateY(4px); opacity:.2}50%{transform:translateY(-6px); opacity:.95}100%{transform:translateY(4px); opacity:.2}}

/* Minifigura animatsiyalari */
.fig{transform-origin:center bottom}
.desk[data-status="working"] .arm-l{animation:type .42s infinite alternate ease-in-out; transform-origin:top center}
.desk[data-status="working"] .arm-r{animation:type .42s .21s infinite alternate ease-in-out; transform-origin:top center}
@keyframes type{from{transform:rotate(0deg)}to{transform:rotate(-9deg) translateY(-2px)}}
.desk[data-status="working"] .head-g{animation:nod 2.4s infinite ease-in-out; transform-origin:center bottom}
@keyframes nod{0%,100%{transform:rotate(0)}25%{transform:rotate(-2.5deg)}75%{transform:rotate(2.5deg)}}
.desk[data-status="thinking"] .head-g{animation:tilt 3s infinite ease-in-out; transform-origin:center bottom}
@keyframes tilt{0%,100%{transform:rotate(0)}50%{transform:rotate(-7deg)}}
.desk[data-status="idle"] .fig{animation:breathe 4s infinite ease-in-out}
@keyframes breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(2.5px)}}
.desk[data-status="error"] .fig{animation:shake .45s 3}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.desk[data-status="done"] .fig{animation:cheer .6s ease-out}
@keyframes cheer{0%{transform:translateY(0)}40%{transform:translateY(-8px)}100%{transform:translateY(0)}}

/* Monitor ekrani */
.scr-line{animation:scroll 2.4s linear infinite}
.desk[data-status="idle"] .scr-line{animation:none; opacity:.25}
@keyframes scroll{0%{opacity:.15}50%{opacity:1}100%{opacity:.15}}
.scr-glow{animation:glow 3s ease-in-out infinite}
@keyframes glow{0%,100%{opacity:.3}50%{opacity:.6}}

/* Pastki panel */
.footer{
  display:flex; align-items:center; gap:8px;
  padding:8px 12px;
  background:var(--panel-2);
  border-top:1px solid var(--line);
  font-size:11.5px; color:var(--muted);
  position:relative; z-index:3;
}
.chip{
  font-weight:800; font-size:10.5px; text-transform:uppercase; letter-spacing:.5px;
  padding:3px 9px; border-radius:20px; color:#fff;
}
.chip.working{background:var(--ok)} .chip.thinking{background:var(--think)}
.chip.waiting{background:var(--info)} .chip.done{background:#1a9d61}
.chip.error{background:var(--err)} .chip.idle{background:#dbe3ee; color:#55627a}
.footer .sp{margin-left:auto; display:flex; gap:10px; align-items:center}
.footer b{color:#33415c}

.bar-wrap{display:inline-flex; align-items:center; gap:6px}
.bar{display:block; height:6px; width:74px; flex:none; background:#dde4ee; border-radius:4px; overflow:hidden}
.bar i{display:block; height:100%; background:linear-gradient(90deg,var(--ok),#5fd79c); transition:width .5s}

/* Mash'al lovullashi */
.torch-f{transform-box:fill-box; transform-origin:50% 100%; animation:flick 1.4s ease-in-out infinite}
@keyframes flick{0%,100%{opacity:.85; transform:scale(1)}50%{opacity:1; transform:scale(1.12,1.2)}}


/* =====================================================================
   ZAMONAVIY MAVZU — ixcham stol (.desk.m), golografik ekran, avatar
   ===================================================================== */
.desk.m{
  --hc:#b7c3d4; --sq:transparent;
  min-width:0; outline:none; isolation:isolate;
}
.desk.m[data-status="working"]{--hc:#2f7cf6}
.desk.m[data-status="thinking"]{--hc:#8b5cf6}
.desk.m[data-status="waiting"]{--hc:#f0a91c}
.desk.m[data-status="error"]{--hc:#e5484d}
.desk.m[data-status="done"]{--hc:#1fae6b}

/* Bulutcha: faqat hover / fokus / katta zoom'da (aks holda ekran yetarli) */
.desk.m .mini-slot{position:absolute; left:0; right:0; top:0; height:0; z-index:6; display:none}
.desk.m:hover .mini-slot, .desk.m:focus-visible .mini-slot, .desk.m:focus-within .mini-slot,
[data-zoom="lg"] .desk.m .mini-slot, .desk.m.show-bubble .mini-slot{display:block}
.desk.m .mini-slot .bubble{bottom:auto; top:2px; animation:none}
.desk.m .mini-slot .bubble::before, .desk.m .mini-slot .bubble::after{display:none}
.desk.m .mini-slot .zzz{display:none}

.dk-stage{position:relative; aspect-ratio:160/150; width:100%; max-width:240px; margin:0 auto}
.dk-stage svg{position:absolute; inset:0; width:100%; height:100%; display:block; overflow:visible}
.dk-holo{pointer-events:none; color:var(--hc)}

/* Qahramon va qo'llar */
.dk-seat{display:none}
.desk.m.away .dk-char, .desk.m.away .dk-hands{display:none}
.desk.m.away .dk-seat{display:inline}

/* Golografik panel */
.dk-holo .panel{fill:var(--hc); fill-opacity:.13; stroke:var(--hc); stroke-opacity:.55; stroke-width:.8}
.dk-holo .beam{fill:var(--hc); opacity:.09}
.dk-holo .trk{fill:none; stroke:var(--hc); stroke-opacity:.22; stroke-width:4}
.dk-holo .val{fill:none; stroke:var(--hc); stroke-width:4; stroke-linecap:round; transition:stroke-dasharray .5s}
.dk-holo .pct{fill:var(--hc); font:800 7.5px/1 'JetBrains Mono', ui-monospace, monospace; filter:brightness(.8)}
.dk-holo .hb{fill:var(--hc); opacity:.85}
.dk-holo .hb:nth-child(-n+4){opacity:.5}
.dk-holo .base{stroke:var(--hc); stroke-opacity:.4; stroke-width:.8}
.dk-holo .cap{fill:#26354f; font:600 6.5px/1 'JetBrains Mono', ui-monospace, monospace}
.dk-holo .sby{fill:#6b7a92; font:700 8px/1 'Baloo 2', system-ui, sans-serif; display:none}

/* Ekran rejimlari */
.desk.m[data-screen="off"] .dk-holo{opacity:0}
.desk.m[data-screen="standby"] .dk-holo{--hc:#9aa8bc; opacity:.85}
.desk.m[data-screen="standby"] .dk-holo .data{display:none}
.desk.m[data-screen="standby"] .dk-holo .sby{display:inline}
.desk.m[data-screen="standby"] .dk-holo .panel{stroke-dasharray:3 3}

/* Holat animatsiyalari (faqat HTML-darajadagi opacity/transform — kompozitorda arzon) */
.desk.m[data-screen="on"][data-status="working"] .dk-holo{animation:holoBreath 3.2s ease-in-out infinite}
.desk.m[data-screen="on"][data-status="thinking"] .dk-holo{animation:holoBreath 2.2s ease-in-out infinite}
.desk.m[data-screen="on"][data-status="error"] .dk-holo{animation:holoBlink 1s steps(2, jump-none) infinite}
@keyframes holoBreath{0%,100%{opacity:1}50%{opacity:.62}}
@keyframes holoBlink{0%{opacity:1}100%{opacity:.25}}
.desk.m[data-status="working"]:not(.away) .dk-hands circle{animation:typeTap .38s infinite alternate ease-in-out}
.desk.m[data-status="working"]:not(.away) .dk-hands .h2{animation-delay:.19s}
@keyframes typeTap{from{transform:translateY(0)}to{transform:translateY(-1.6px)}}
.desk.m[data-status="error"] .dk-stage{animation:shake .45s 3}
.desk.m[data-status="done"] .dk-char{animation:cheer .6s ease-out}

/* Pastki qism: belgilar, nom, holat chipi, squad chizig'i */
.dk-foot{
  display:flex; align-items:center; gap:4px; min-width:0;
  padding:2px 6px 6px 8px; margin-top:-6px; position:relative;
}
.dk-foot::before{
  content:''; position:absolute; left:2px; top:3px; bottom:7px; width:3px; border-radius:2px; background:var(--sq);
}
.dk-name{font-size:11px; font-weight:700; color:#26354f; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0}
.dk-badges{display:inline-flex; gap:2px; flex:none}
.dk-badges:empty{display:none}
.dk-badges i, .avatar .av-b{
  font-style:normal; font-weight:800; font-size:8.5px; line-height:13px; min-width:13px; height:13px;
  border-radius:4px; text-align:center; padding:0 2px;
}
.b-lead{background:#fff4cc; color:#a86f00}
.b-jr{background:#e3f0ff; color:#1f5fbf}
.b-od{background:#f2eaff; color:#6a3fd1}
.dk-chip{
  flex:none; font-weight:800; font-size:8.5px; text-transform:uppercase; letter-spacing:.3px;
  padding:2px 6px; border-radius:20px; color:#fff; background:var(--hc);
}
.dk-chip.waiting{color:#4a3300}
.dk-chip.idle{background:#e3e9f1; color:#55627a}
.desk.m.away .dk-chip{background:#e3e9f1; color:#55627a}
.desk.m.away .dk-name{color:#7a879c}
.desk.m:focus-visible{box-shadow:inset 0 0 0 2px var(--hc)}

/* ------------------------------ Avatar ------------------------------ */
.avatar{
  --ac:#b7c3d4; --sq:#9aa8bc;
  position:relative; display:inline-block; flex:none;
  width:30px; height:30px; border-radius:50%;
  background:radial-gradient(circle at 50% 35%, #ffffff, #e7edf5);
  box-shadow:0 0 0 2px var(--ac), 0 0 0 3.5px #fff, 0 2px 6px rgba(20,35,63,.18);
  cursor:pointer; outline:none;
}
.avatar svg{width:100%; height:100%; display:block; border-radius:50%; overflow:hidden}
.avatar::before{ /* squad nuqtasi */
  content:''; position:absolute; left:-2px; bottom:-2px; width:9px; height:9px; border-radius:50%;
  background:var(--sq); box-shadow:0 0 0 1.5px #fff; z-index:1;
}
.avatar .av-b{position:absolute; right:-5px; top:-5px; background:#fff; color:#a86f00; box-shadow:0 0 0 1px #e1e7ef}
.avatar .av-b:empty{display:none}
.avatar[data-status="working"]{--ac:#2f7cf6}
.avatar[data-status="thinking"]{--ac:#8b5cf6}
.avatar[data-status="waiting"]{--ac:#f0a91c}
.avatar[data-status="error"]{--ac:#e5484d}
.avatar[data-status="done"]{--ac:#1fae6b}
.avatar::after{ /* ism tooltip */
  content:attr(data-name); position:absolute; left:50%; bottom:calc(100% + 7px); transform:translateX(-50%);
  white-space:nowrap; font-size:10.5px; font-weight:700; color:#fff; background:#1d2839;
  padding:3px 7px; border-radius:6px; pointer-events:none; opacity:0; transition:opacity .15s; z-index:20;
}
.avatar:hover::after, .avatar:focus-visible::after{opacity:1}
.avatar:focus-visible{box-shadow:0 0 0 2px var(--ac), 0 0 0 4.5px #1d2839}
.avatar[data-status="error"]{animation:avBlink 1s steps(2, jump-none) infinite}
@keyframes avBlink{0%{box-shadow:0 0 0 2px var(--ac), 0 0 0 3.5px #fff}100%{box-shadow:0 0 0 2px #fff, 0 0 0 3.5px #fff}}

/* ------------------------ Harakatni kamaytirish ------------------------ */
@media (prefers-reduced-motion: reduce){
  .desk, .desk *, .avatar, .bubble, .zzz span, .dots i{animation:none !important; transition:none !important}
}