/* A3 — 2.1: xato signali, bildirishnoma, navigatsiya, yordam, atmosfera.
   Bu faylni faqat A3 o'zgartiradi. Barcha klasslar `fx-` prefiksi bilan.
   Eslatma (HANDOFF §6.9): `hidden` atributi o'z `display` qiymatini bergan klassni bosa olmaydi —
   har bir shunday klass uchun `[hidden]{display:none}` alohida yozilgan. */

/* ------------------------------ Umumiy qatlam ------------------------------ */
/* #fxLayer — o'lchamsiz fixed langar: bolalari o'zlari position:fixed/absolute.
   Butun ekranni qoplamaydi — boshqa modullarning bosishlarini to'smaydi. */
.fx-layer{position:fixed; left:0; top:0; width:0; height:0; z-index:60; overflow:visible}
/* #office ustiga aniq tushadigan ramka (common.js officeFrame) */
.fx-oframe{position:fixed; pointer-events:none; overflow:hidden; contain:layout style}
.fx-oframe > *{pointer-events:none}
.tb-ext [hidden]{display:none !important}

/* ============================ S1 · Xato signali ============================ */
/* 1) mayoq — ofis yuqori chekkasi, o'rtada (ofis ustidagi overlay; zoom/scroll'ga bog'liq emas) */
.fx-alarm-beacon{
  position:absolute; top:0; left:50%; width:132px; height:196px; transform:translateX(-50%);
  z-index:10; pointer-events:none; animation:fxAlarmIn .4s ease-out both;
}
.fx-alarm-beacon[hidden]{display:none}
@keyframes fxAlarmIn{from{opacity:0}to{opacity:1}}
.fx-alarm-beacon i{position:absolute; display:block}
.fx-alarm-stem{top:0; left:50%; margin-left:-4px; width:8px; height:14px; background:linear-gradient(90deg,#3a4b6b,#13233f); border-radius:0 0 2px 2px}
.fx-alarm-cap{top:12px; left:50%; margin-left:-26px; width:52px; height:15px; border-radius:7px;
  background:linear-gradient(180deg,#3a4b6b,#1d3256 55%,#13233f); box-shadow:0 2px 4px rgba(19,35,63,.25)}
.fx-alarm-dome{top:25px; left:50%; margin-left:-29px; width:58px; height:29px; border-radius:0 0 29px 29px;
  background:linear-gradient(155deg,#ff8b80 0%,#e5343a 52%,#8f1116 100%);
  box-shadow:inset 0 -7px 12px rgba(0,0,0,.28), 0 0 18px rgba(229,72,77,.55);
  animation:fxAlarmDome 1.15s ease-in-out infinite}
.fx-alarm-dome::after{content:''; position:absolute; left:9px; top:3px; width:14px; height:12px; border-radius:0 0 0 14px;
  border-left:4px solid rgba(255,214,210,.55); border-bottom:4px solid rgba(255,214,210,.55)}
@keyframes fxAlarmDome{0%,100%{opacity:.82}50%{opacity:1}}
.fx-alarm-halo{top:40px; left:50%; margin:-75px 0 0 -75px; width:150px; height:150px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,107,100,.85) 0%,rgba(229,72,77,.32) 45%,rgba(229,72,77,0) 72%);
  animation:fxAlarmHalo 1.15s ease-in-out infinite; will-change:opacity}
@keyframes fxAlarmHalo{0%,100%{opacity:.3}50%{opacity:.95}}
.fx-alarm-beam{top:40px; left:50%; margin-left:-75px; width:150px; height:150px; overflow:hidden}
.fx-alarm-rotor{top:0; left:50%; width:340px; height:340px; margin:-170px 0 0 -170px; transform-origin:50% 50%;
  animation:fxAlarmSpin 2.4s linear infinite; will-change:transform}
@keyframes fxAlarmSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.fx-alarm-beam .fx-alarm-cone{inset:0}
.fx-alarm-cone-a{clip-path:polygon(50% 50%,39% 100%,61% 100%);
  background:linear-gradient(180deg,rgba(255,80,84,0) 49.9%,rgba(255,80,84,.55) 50%,rgba(255,80,84,0) 85%)}
.fx-alarm-cone-b{clip-path:polygon(50% 50%,43% 0,57% 0);
  background:linear-gradient(0deg,rgba(255,80,84,0) 49.9%,rgba(255,80,84,.4) 50%,rgba(255,80,84,0) 88%)}

/* 2) vinyetka — ofis chekkasida yengil qizil nur (faqat opacity animatsiyasi — kompozitor) */
.fx-alarm-vignette{position:absolute; inset:0; z-index:5; pointer-events:none; opacity:0; border-radius:inherit;
  box-shadow:inset 0 0 0 2px rgba(229,72,77,.5), inset 0 0 56px 6px rgba(229,72,77,.16); transition:opacity .35s ease}
.fx-alarm-vignette.on{animation:fxAlarmVig 1.8s ease-in-out infinite; will-change:opacity}
@keyframes fxAlarmVig{0%,100%{opacity:.3}50%{opacity:.9}}

/* 3) toolbar chipi va 🧾 */
.fx-alarm-chip{display:inline-flex; align-items:center; gap:6px; font-weight:800; font-variant-numeric:tabular-nums;
  color:#b3161c !important; background:#fdecec !important; border-color:#f0bfc1 !important;
  animation:fxAlarmChipIn .3s cubic-bezier(.2,.9,.3,1.25) both}
.fx-alarm-chip[hidden], .fx-alarm-arch[hidden]{display:none !important}
.fx-alarm-chip:hover{background:#fbdcdd !important}
.fx-alarm-chip span{font-weight:700; opacity:.75; font-size:.92em}
.fx-alarm-arch{color:#b3161c; background:#fdecec !important; border-color:#f0bfc1 !important;
  animation:fxAlarmChipIn .3s cubic-bezier(.2,.9,.3,1.25) both}
.fx-alarm-lamp{flex:none; width:9px; height:9px; border-radius:50%; background:var(--err,#e5484d); box-shadow:0 0 0 3px rgba(229,72,77,.22); will-change:opacity;
  animation:fxAlarmLamp 1.15s ease-in-out infinite}
@keyframes fxAlarmLamp{0%,100%{opacity:.45}50%{opacity:1}}   /* faqat opacity — har kadr repaint bo'lmasin */
@keyframes fxAlarmChipIn{from{opacity:0; transform:scale(.86)}to{opacity:1; transform:none}}

/* 4) toastlar — ofis o'ng-yuqori burchagi (zoom tugmalari .fp-nav dan chaproqda) */
.fx-alarm-toasts{position:absolute; top:14px; right:70px; z-index:30; width:min(322px, calc(100% - 90px));
  display:flex; flex-direction:column; gap:9px}
.fx-oframe > .fx-alarm-toasts{pointer-events:none}
.fx-alarm-toast{pointer-events:auto; cursor:pointer; position:relative; overflow:hidden;
  display:flex; align-items:flex-start; gap:9px; padding:10px 10px 12px 11px;
  background:var(--panel,#fff); border:1px solid #f2ccce; border-left:5px solid var(--err,#e5484d); border-radius:12px;
  box-shadow:0 10px 26px rgba(19,35,63,.18), 0 2px 6px rgba(19,35,63,.08);
  font:500 12.5px/1.35 var(--font-ui); color:var(--text,#18212f);
  animation:fxAlarmToastIn .3s cubic-bezier(.2,.9,.3,1.25) both}
.fx-alarm-toast:hover{border-color:#e6a9ac}
.fx-alarm-toast.fx-alarm-out{animation:fxAlarmToastOut .24s ease-in forwards}
@keyframes fxAlarmToastIn{from{opacity:0; transform:translateX(26px) scale(.96)}to{opacity:1; transform:none}}
@keyframes fxAlarmToastOut{to{opacity:0; transform:translateX(26px) scale(.96)}}
.fx-alarm-bell{flex:none; width:26px; height:26px; border-radius:8px; display:grid; place-items:center; font-size:13px;
  background:#fdecec; border:1px solid #f6d3d4}
.fx-alarm-body{min-width:0; flex:1}
.fx-alarm-head{display:flex; align-items:baseline; gap:6px}
.fx-alarm-head b{font-size:13px; font-weight:800; color:#b3161c; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fx-alarm-time{margin-left:auto; flex:none; font:500 10.5px var(--font-mono); color:var(--muted)}
.fx-alarm-team{display:inline-block; margin-top:3px; font-size:9.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  color:var(--navy-2,#1d3256); background:var(--surface-3,#edf1f6); border:1px solid var(--line,#e1e6ee); border-radius:6px; padding:1px 6px}
.fx-alarm-task{margin:4px 0 0; color:var(--ink,#2b3442); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word}
.fx-alarm-go{display:block; margin-top:5px; font-size:10.5px; color:var(--muted)}
.fx-alarm-toast:hover .fx-alarm-go{color:#b3161c}
.fx-alarm-x{flex:none; width:20px; height:20px; border:0; border-radius:6px; background:transparent; color:var(--muted);
  font:inherit; font-size:15px; line-height:1; cursor:pointer; padding:0}
.fx-alarm-x:hover{background:#fdecec; color:#b3161c}
.fx-alarm-bar{position:absolute; left:0; bottom:0; height:3px; width:100%; background:linear-gradient(90deg,#e5484d,#ff8a6a);
  transform-origin:left center; animation:fxAlarmBar linear forwards}
@keyframes fxAlarmBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}

@media (prefers-reduced-motion: reduce){
  .fx-alarm-beacon, .fx-alarm-halo, .fx-alarm-dome, .fx-alarm-rotor, .fx-alarm-vignette.on, .fx-alarm-lamp,
  .fx-alarm-chip, .fx-alarm-arch, .fx-alarm-toast{animation:none}
  .fx-alarm-halo{opacity:.7}
  .fx-alarm-vignette.on{opacity:.7}
}
.fx-alarm-chip.fx-alarm-clear{color:var(--muted) !important; background:var(--chip,#eef2f7) !important; border-color:var(--line) !important}
.fx-alarm-chip.fx-alarm-clear .fx-alarm-lamp{background:var(--ok,#1f9d63); animation:none; opacity:.8}
.fx-alarm-n{display:inline-block; min-width:2ch; text-align:center}
.fx-alarm-arch:disabled{opacity:.45; filter:grayscale(1); cursor:default}

/* ============================ S2 · Toolbar tugmalari holati ============================ */
/* yoqiq (aria-pressed) toolbar tugmalari: 🛎 🎧 🗺 💬 */
#fxMapBtn.on, #fxNotifyBtn.on, #fxSoundBtn.on, #fxBubblesBtn.on, #fxHelpBtn.on{background:var(--navy,#13233f); color:#fff; border-color:var(--navy,#13233f)}

/* ============================ S3 · Navigatsiya ============================ */
/* minimap — ofisning chap-past burchagi (o'ngda .fp-nav zoom tugmalari, pastda o'rtada tadbir chipi) */
.fx-oframe > .fx-map{position:absolute; left:14px; bottom:14px; z-index:20; pointer-events:auto;
  background:rgba(255,255,255,.92); border:1px solid var(--line-2,#cdd5e1); border-radius:12px; padding:5px;
  box-shadow:var(--shadow-sm), 0 8px 20px rgba(19,35,63,.12); contain:layout paint}
.fx-map[hidden]{display:none !important}
.fx-map-svg{display:block; border-radius:8px; cursor:crosshair; user-select:none; touch-action:none}
.fx-map-floor{fill:#f3f5f9}
.fx-map-room{fill:#dfe5ee; stroke:#fff; opacity:.9}
.fx-map-room.k-zone{opacity:.22}
.fx-map-room.k-amenity{fill:#e6efe9}
.fx-map-room.k-booth{fill:#e8ebf2}
.fx-map-dots circle{stroke:#fff; stroke-width:1; vector-effect:non-scaling-stroke}
.fx-map-err{animation:fxMapErr 1.1s ease-in-out infinite}
@keyframes fxMapErr{0%,100%{opacity:1}50%{opacity:.3}}
.fx-map-vp{fill:rgba(47,116,208,.10); stroke:var(--info,#2f74d0); stroke-width:2; vector-effect:non-scaling-stroke; pointer-events:none}
.fx-map-tip{position:absolute; background:var(--navy,#13233f); color:#fff; border-radius:6px; padding:2px 7px;
  font:700 10.5px var(--font-ui); white-space:nowrap; pointer-events:none}
.fx-map-tip[hidden]{display:none}

/* ⌘K paneli */
.fx-pal{position:fixed; left:0; top:0; width:100vw; height:100vh; z-index:200; background:rgba(19,35,63,.38); backdrop-filter:blur(2px);
  display:flex; justify-content:center; align-items:flex-start; padding-top:11vh; box-sizing:border-box}
.fx-pal[hidden]{display:none}
.fx-pal-box{width:min(620px,92vw); max-height:70vh; display:flex; flex-direction:column; overflow:hidden;
  background:var(--panel,#fff); border:1px solid var(--line-2,#cdd5e1); border-radius:14px; box-shadow:0 22px 60px rgba(19,35,63,.3); font-family:var(--font-ui)}
.fx-pal-in{border:0; border-bottom:1px solid var(--line,#e1e6ee); outline:0; padding:15px 18px; font:500 15px var(--font-ui); color:var(--text); background:transparent}
.fx-pal-in::placeholder{color:var(--muted)}
.fx-pal-list{list-style:none; margin:0; padding:5px 0; overflow-y:auto; flex:1}
.fx-pal-h{padding:8px 16px 3px; font-size:9.5px; font-weight:800; letter-spacing:.9px; text-transform:uppercase; color:var(--muted)}
.fx-pal-i{display:flex; align-items:center; gap:9px; padding:7px 16px; cursor:pointer; font-size:13px; color:var(--text)}
.fx-pal-i.sel{background:var(--accent-soft,#e4f5ec); box-shadow:inset 3px 0 0 var(--accent,#1f9d63)}
.fx-pal-i b{font-weight:700; flex:none; max-width:44%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fx-pal-i span{color:var(--muted); font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; flex:1}
.fx-pal-dot{width:9px; height:9px; border-radius:50%; flex:none}
.fx-pal-ic{font-style:normal; width:16px; text-align:center; flex:none; font-size:13px}
.fx-pal-empty{padding:20px 16px; color:var(--muted); font-size:13px; text-align:center}
.fx-pal-foot{border-top:1px solid var(--line); padding:7px 16px; font-size:11px; color:var(--muted); display:flex; gap:14px}
.fx-pal-foot .fx-pal-k{margin-left:auto}
.fx-pal-foot b, .fx-help-list kbd{font:600 10.5px var(--font-mono); background:var(--panel-2,#f6f8fb); border:1px solid var(--line-2); border-radius:5px; padding:1px 6px; color:var(--ink)}
@media (max-height:680px){ .fx-pal{padding-top:5vh} .fx-pal-box{max-height:86vh} }

/* ============================ S3 · Yordam modali ============================ */
.fx-help-ov{position:fixed; left:0; top:0; width:100vw; height:100vh; z-index:220; box-sizing:border-box;
  background:rgba(19,35,63,.38); backdrop-filter:blur(2px); display:flex; justify-content:center; align-items:center; padding:24px}
.fx-help-ov[hidden]{display:none}
.fx-help-box{width:min(520px,92vw); max-height:84vh; overflow-y:auto; background:var(--panel,#fff); border:1px solid var(--line-2);
  border-radius:14px; box-shadow:0 22px 60px rgba(19,35,63,.28); font-family:var(--font-ui); color:var(--text)}
.fx-help-head{display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line)}
.fx-help-head b{font-size:14px}
.fx-help-x{border:0; background:transparent; font-size:20px; line-height:1; cursor:pointer; color:var(--muted); padding:2px 8px; border-radius:6px}
.fx-help-x:hover{background:var(--panel-2)}
.fx-help-h{margin:12px 18px 2px; font-size:10px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:var(--muted)}
.fx-help-list{list-style:none; margin:0; padding:0 18px}
.fx-help-list li{display:flex; align-items:center; gap:12px; padding:7px 0; border-bottom:1px dashed var(--line)}
.fx-help-list li:last-child{border-bottom:0}
.fx-help-k{flex:0 0 150px; display:flex; flex-wrap:wrap; align-items:center; gap:4px}
.fx-help-d{flex:1; font-size:12.5px}
.fx-help-or{font-size:10.5px; color:var(--muted)}
.fx-help-foot{padding:10px 18px 14px; font-size:11px; color:var(--muted); text-align:center; border-top:1px solid var(--line); margin-top:8px}
@media (max-height:680px){ .fx-help-ov{padding:10px} .fx-help-box{max-height:95vh} }

/* ============================ S4 · Tool ikonkalari ============================ */
/* .desk[data-id] ichidagi overlay — stolning o'ng-yuqori burchagida qadalgan varaqcha */
.desk > .fx-prop{position:absolute; top:6px; right:6px; z-index:4; width:24px; height:24px; box-sizing:border-box;
  display:grid; place-items:center; font-size:14px; line-height:1; pointer-events:none;
  background:#fff; border:1px solid var(--line-2,#cdd5e1); border-radius:7px; box-shadow:0 2px 5px rgba(19,35,63,.12);
  font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif; transform:rotate(4deg)}
.desk.away > .fx-prop{opacity:.45}

/* ============================ S5 · Vazifa bulutchalari ============================ */
/* Faqat band va xato agentlar; bir qatorli (HANDOFF §6.5 — ko'p qatorli bulutchalar 30+ agentda ekranni to'ldiradi).
   Izometrik stol (desk.js DESK_ANCHOR 140×196): bulutcha golografik panel ustida. */
.desk > .fx-bubble{display:none; position:absolute; left:50%; top:-8px; z-index:6; transform:translate(-50%,-100%);
  max-width:150px; padding:3px 8px 4px; font:600 11px/1.3 var(--font-ui, system-ui); color:var(--ink, #13233f);
  background:#fff; border:1.5px solid var(--hc, #3e6aa3); border-radius:9px; box-shadow:0 3px 8px rgba(19,35,63,.16);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:auto}
.desk > .fx-bubble::after{content:''; position:absolute; left:50%; bottom:-5px; width:8px; height:8px; margin-left:-4px;
  background:#fff; border-right:1.5px solid var(--hc, #3e6aa3); border-bottom:1.5px solid var(--hc, #3e6aa3); transform:rotate(45deg)}
html[data-ext-bubbles] .desk:is([data-status="working"],[data-status="thinking"],[data-status="waiting"],[data-status="error"]):not(.away) > .fx-bubble{display:block}
html[data-ext-bubbles] .desk[data-status="error"] > .fx-bubble{border-color:var(--st-error, #e5484d)}
.desk:hover > .fx-bubble{white-space:normal; z-index:8}