/* ============================================================
   VIRTUAL OFFICE v2 — styles.css
   Glassmorphism control-room UI per SPEC-v2 §6.1
   (north star: virtual-office-concept.png)
   ============================================================ */

/* ---------------- EXACT THEME TOKENS (SPEC §3 dept colors) ---------------- */
:root{
  --bg-dark:#0a0a14; --bg-card:#14142a;
  --marketing:#9d4edd; --sales:#4361ee; --support:#06d6a0; --legal:#ef476f;
  --seo:#f77f00; --webdev:#00f5d4; --content:#f72585; --operations:#ffd166;
  --finance:#ffbe0b; --hr:#00bbf1; --partnerships:#7209b7; --events:#ff006e;
  --rd:#80ffdb; --localization:#b5179e;
  /* derived UI tokens (dark default) */
  --text:#e8e8f4; --text-dim:#9a9ab8; --border:#2b2b4d;
  --glass:rgba(16,18,36,.58);            /* translucent dark glass */
  --glass-strong:rgba(18,20,40,.82);
  --panel:var(--glass-strong); --panel-solid:#161628;
  --glass-border:rgba(120,150,255,.22);  /* neon-tinted 1px borders */
  --accent:#00f5d4; --good:#22ff88; --warn:#ffd166; --bad:#ff5566; --meet:#55aaff;
  --paused:#9aa0b4; --off:#55566e;
  --shadow:0 8px 28px rgba(0,0,0,.55);
  --glow-soft:0 0 18px rgba(0,245,212,.14), 0 0 2px rgba(0,245,212,.35);
  --glow-accent:0 0 10px rgba(0,245,212,.35);
}
/* ---------------- LIGHT MODE (CSS variable swap) ---------------- */
body[data-theme="light"]{
  --bg-dark:#e8e6df; --bg-card:#f6f4ec;
  --text:#2a2a3c; --text-dim:#6d6d84; --border:#d6d2c4;
  --glass:rgba(246,244,236,.62); --glass-strong:rgba(246,244,236,.9);
  --panel:var(--glass-strong); --panel-solid:#f6f4ec;
  --glass-border:rgba(13,148,136,.28);
  --accent:#0d9488; --shadow:0 8px 24px rgba(60,55,40,.22);
  --glow-soft:0 0 14px rgba(13,148,136,.12), 0 0 2px rgba(13,148,136,.3);
  --glow-accent:0 0 8px rgba(13,148,136,.3);
}
*{box-sizing:border-box; margin:0; padding:0}
html,body{height:100%}
body{
  background:var(--bg-dark); color:var(--text);
  font-family:'Segoe UI', system-ui, -apple-system, sans-serif;
  overflow:hidden; font-size:14px;
}
b,strong{font-weight:600}
.mono,#clock,#stat-active,#stat-pending,#stat-total,.seg-num,#stat-uptime,#stat-servers{
  font-family:'Cascadia Code',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
button{font-family:inherit; cursor:pointer; border:1px solid var(--border); background:#23233f; color:var(--text);
  border-radius:8px; padding:6px 10px; font-size:13px; transition:all .15s ease;}
body[data-theme="light"] button{background:#fff}
button:hover{border-color:var(--accent); box-shadow:var(--glow-accent); color:var(--accent)}
button.on{background:var(--accent); color:#081018; border-color:var(--accent); font-weight:600}
body[data-theme="light"] button.on{color:#fff}
button.primary{background:var(--accent); color:#081018; border-color:var(--accent); font-weight:700}
button.primary:hover{filter:brightness(1.15); color:#081018}
textarea,select{
  width:100%; background:#12122a; border:1px solid var(--border); color:var(--text);
  border-radius:9px; padding:8px 10px; font:inherit; font-size:13px; outline:none; resize:vertical;
}
body[data-theme="light"] textarea,body[data-theme="light"] select{background:#fff}
textarea:focus,select:focus{border-color:var(--accent); box-shadow:var(--glow-accent)}
.fld-label{display:block; font-size:11px; text-transform:uppercase; letter-spacing:1px;
  color:var(--text-dim); margin:10px 0 4px}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--border); border-radius:4px}
::-webkit-scrollbar-track{background:transparent}

/* ---------------- APP GRID LAYOUT ---------------- */
#app{display:grid; grid-template-rows:auto auto 1fr auto; height:100vh; height:100dvh}
#main{display:flex; min-height:0; position:relative}

/* ============================================================
   CONTROL FASCIA — physical illuminated top panel (SPEC §6.1)
   ============================================================ */
#topbar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:9px 14px; z-index:30; position:relative;
  background:linear-gradient(180deg, rgba(30,32,58,.92) 0%, rgba(14,15,32,.88) 100%);
  border-bottom:1px solid var(--glass-border);
  box-shadow:0 1px 0 rgba(160,180,255,.08) inset, 0 -14px 30px rgba(0,0,0,.35) inset,
             0 6px 22px rgba(0,0,0,.5), 0 0 26px rgba(0,245,212,.07);
  backdrop-filter:blur(14px);
}
body[data-theme="light"] #topbar{background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(230,226,214,.9))}
#topbar .brand{font-size:16px; font-weight:700; letter-spacing:.4px; white-space:nowrap;
  text-shadow:0 1px 0 rgba(0,0,0,.6)}
#topbar .brand em{font-style:normal; color:var(--accent); text-shadow:0 0 12px var(--accent)}
.fascia-seg{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.brand-seg{gap:10px}
/* segmented displays (clock / counters) */
.seg-display{
  display:flex; align-items:center; gap:6px;
  background:rgba(5,6,16,.72); border:1px solid rgba(120,150,255,.18); border-radius:7px;
  padding:4px 9px; box-shadow:inset 0 1px 4px rgba(0,0,0,.7), 0 1px 0 rgba(160,180,255,.07);
  color:var(--text-dim); font-size:11px; text-transform:uppercase; letter-spacing:.8px; white-space:nowrap;
}
body[data-theme="light"] .seg-display{background:rgba(255,255,255,.8); box-shadow:inset 0 1px 3px rgba(60,55,40,.18)}
.seg-display .seg-num{color:var(--accent); font-size:14px; text-shadow:0 0 9px var(--glow-accent);
  margin-left:2px}
.seg-label{font-size:9px; opacity:.7}
.seg-clock{font-size:15px; color:var(--accent); letter-spacing:2px; text-shadow:0 0 10px var(--glow-accent)}
.pulse-dot{display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--good);
  margin-right:2px; box-shadow:0 0 8px var(--good); animation:pulseDot 1.6s infinite}
@keyframes pulseDot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.6}}

/* connection badge: LIVE green / SIM amber / OFFLINE red (SPEC §6.2) */
.conn-badge{
  display:flex; align-items:center; gap:6px; padding:4px 11px; border-radius:20px;
  font-size:11px; font-weight:700; letter-spacing:1.4px; border:1px solid;
  text-transform:uppercase; white-space:nowrap;
}
.conn-badge i{width:9px; height:9px; border-radius:50%; background:currentColor;
  box-shadow:0 0 9px currentColor; animation:pulseDot 1.6s infinite}
.conn-badge.live{color:var(--good); border-color:var(--good); background:rgba(34,255,136,.08);
  box-shadow:0 0 14px rgba(34,255,136,.25)}
.conn-badge.sim{color:var(--warn); border-color:var(--warn); background:rgba(255,209,102,.08);
  box-shadow:0 0 14px rgba(255,209,102,.22)}
.conn-badge.offline{color:var(--bad); border-color:var(--bad); background:rgba(255,85,102,.08);
  box-shadow:0 0 14px rgba(255,85,102,.22)}

#dept-dots{display:flex; gap:6px; flex-wrap:wrap; margin-left:auto}
.dept-dot{
  position:relative; display:flex; align-items:center; gap:5px; padding:3px 8px 3px 5px;
  border:1px solid var(--border); border-radius:20px; background:transparent;
  font-size:11px; color:var(--text-dim); transition:all .15s ease;
}
.dept-dot i{width:10px;height:10px;border-radius:50%;display:block;box-shadow:0 0 7px currentColor}
.dept-dot:hover{border-color:var(--accent); color:var(--text)}
.dept-dot.on{color:var(--text); border-color:currentColor; box-shadow:0 0 10px currentColor}
.toast-ping{position:absolute; top:-3px; right:-3px; width:9px; height:9px; border-radius:50%;
  background:var(--good); box-shadow:0 0 8px var(--good); animation:ping 1s ease-out forwards; pointer-events:none}
@keyframes ping{0%{transform:scale(.4);opacity:1}100%{transform:scale(2.2);opacity:0}}
#drawer-toggle{display:none; font-size:17px; padding:5px 11px}

/* ---------------- OFFLINE BANNER (SPEC §6.2) ---------------- */
#offline-banner{
  display:none; z-index:29; padding:5px 14px; font-size:12px; letter-spacing:.4px;
  background:linear-gradient(90deg, rgba(255,85,102,.16), rgba(255,85,102,.07));
  border-bottom:1px solid rgba(255,85,102,.4); color:#ff8896;
}
#offline-banner.show{display:block; animation:bannerIn .3s ease}
@keyframes bannerIn{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}

/* ---------------- CANVAS AREA ---------------- */
#canvas-wrap{flex:1; position:relative; min-width:0; overflow:hidden;
  background:radial-gradient(ellipse at 50% 35%, #131328 0%, var(--bg-dark) 75%)}
body[data-theme="light"] #canvas-wrap{background:radial-gradient(ellipse at 50% 35%, #f0eee6 0%, var(--bg-dark) 78%)}
#canvas-wrap canvas{display:block}
#canvas-wrap.dragging{cursor:grabbing}

/* ============================================================
   DEPARTMENT ZOOM — left glass sidebar (SPEC §6.1)
   ============================================================ */
#zoom-sidebar{
  position:absolute; top:64px; left:10px; z-index:21; width:158px;
  background:var(--glass); border:1px solid var(--glass-border); border-radius:14px;
  padding:10px 9px; box-shadow:var(--shadow), var(--glow-soft);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  display:flex; flex-direction:column; gap:4px; max-height:calc(100% - 140px); overflow-y:auto;
}
.zs-title{font-size:10.5px; text-transform:uppercase; letter-spacing:1.6px; color:var(--text-dim);
  padding:2px 4px 7px; border-bottom:1px solid var(--glass-border); margin-bottom:4px}
.zs-btn{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  background:rgba(255,255,255,.03); border:1px solid transparent; border-radius:9px;
  padding:5px 8px; font-size:12.5px; color:var(--text);
}
body[data-theme="light"] .zs-btn{background:rgba(0,0,0,.03)}
.zs-btn:hover{border-color:var(--glass-border); box-shadow:var(--glow-soft); color:var(--text)}
.zs-btn.on{background:rgba(0,245,212,.1); border-color:var(--accent); color:var(--accent); font-weight:600}
.zs-ico{width:15px; text-align:center; flex:none; filter:drop-shadow(0 0 4px currentColor)}
.zs-legend{margin-top:8px; padding-top:7px; border-top:1px solid var(--glass-border);
  font-size:11px; color:var(--text-dim); display:flex; flex-direction:column; gap:4px}
.zl-title{font-size:9.5px; text-transform:uppercase; letter-spacing:1.4px; margin-bottom:2px}
.zs-legend div{display:flex; align-items:center; gap:7px}
.zl{width:12px; height:12px; flex:none; display:inline-block}
.zl.halo{border:2.5px solid var(--good); border-radius:50%; box-shadow:0 0 6px var(--good)}
.zl.bar{background:var(--warn); border-radius:2px; height:5px; box-shadow:0 0 6px var(--warn)}
.zl.x{position:relative}
.zl.x::before,.zl.x::after{content:''; position:absolute; left:4.5px; top:0; width:3px; height:12px;
  background:var(--bad); border-radius:2px; box-shadow:0 0 6px var(--bad)}
.zl.x::before{transform:rotate(45deg)} .zl.x::after{transform:rotate(-45deg)}
.zl.meet{background:var(--meet); border-radius:50%; box-shadow:0 0 6px var(--meet)}
.zl.paused{background:var(--paused); border-radius:2px; height:5px}
.zl.off{background:var(--off); border-radius:50%; opacity:.6}

/* filter bar floating over canvas */
#filter-bar{
  position:absolute; top:10px; left:178px; z-index:20; display:flex; gap:8px; align-items:center;
  flex-wrap:wrap; max-width:calc(100% - 270px);
  background:var(--glass); border:1px solid var(--glass-border); border-radius:12px; padding:7px 10px;
  box-shadow:var(--shadow), var(--glow-soft); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
#search-box{position:relative}
#search-input{background:rgba(5,6,16,.7); border:1px solid var(--border); color:var(--text); border-radius:8px;
  padding:6px 10px; width:180px; font-size:13px; outline:none}
body[data-theme="light"] #search-input{background:#fff}
#search-input:focus{border-color:var(--accent); box-shadow:var(--glow-accent)}
#search-results{position:absolute; top:calc(100% + 6px); left:0; min-width:230px; max-height:220px; overflow:auto;
  background:var(--panel-solid); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow); display:none; z-index:40}
#search-results div{padding:7px 11px; font-size:12.5px; cursor:pointer; border-left:3px solid transparent}
#search-results div:hover{background:rgba(255,255,255,.06)}
body[data-theme="light"] #search-results div:hover{background:rgba(0,0,0,.06)}
#search-results small{color:var(--text-dim); margin-left:6px}
.chip{padding:5px 11px; border-radius:18px; font-size:12px; white-space:nowrap}

/* hover tooltip */
#tooltip{
  position:absolute; z-index:25; pointer-events:none; display:none;
  background:var(--panel-solid); border:1px solid var(--glass-border); border-radius:8px;
  padding:6px 10px; font-size:12px; box-shadow:var(--shadow); white-space:nowrap;
}
#tooltip .tt-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}

/* zoom / view controls (bottom-right of canvas) */
#view-controls{position:absolute; right:12px; bottom:12px; z-index:20; display:flex; gap:6px}
#view-controls button{width:36px; height:36px; font-size:16px; padding:0; border-radius:10px;
  background:var(--glass-strong); border-color:var(--glass-border); box-shadow:var(--shadow);
  backdrop-filter:blur(10px)}
#zoom-exit{color:var(--warn); display:none}
#zoom-exit.show{display:block}

/* ---------------- AGENT DETAIL PANEL (slides from left) ---------------- */
#detail-panel{
  position:absolute; top:64px; left:178px; z-index:26; width:312px; max-width:calc(100vw - 200px);
  background:var(--glass-strong); border:1px solid var(--glass-border); border-radius:14px; padding:16px;
  box-shadow:var(--shadow), var(--glow-soft); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transform:translateX(calc(-100% - 210px)); transition:transform .28s cubic-bezier(.2,.8,.25,1);
}
#detail-panel.open{transform:translateX(0)}
#detail-panel h3{font-size:16px; margin-bottom:2px; display:flex; align-items:center; gap:8px}
#detail-panel h3 i{width:12px;height:12px;border-radius:50%;box-shadow:0 0 9px currentColor;flex:none}
#detail-panel .close{position:absolute; top:10px; right:10px; width:26px; height:26px; padding:0; border-radius:50%}
.live-badge{font-size:9.5px; font-weight:700; letter-spacing:1.2px; padding:2px 7px; border-radius:10px;
  border:1px solid; margin-left:auto; margin-right:26px; flex:none}
.live-badge.live{color:var(--good); border-color:var(--good); background:rgba(34,255,136,.1)}
.live-badge.sim{color:var(--warn); border-color:var(--warn); background:rgba(255,209,102,.1)}
.dp-sub{color:var(--text-dim); font-size:12px; margin-bottom:10px}
.dp-row{display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-top:1px dashed var(--border); font-size:13px}
.dp-row span{color:var(--text-dim); flex:none}
.dp-row b{text-align:right; font-weight:500; word-break:break-word}
.dp-status{padding:2px 9px; border-radius:12px; font-size:12px; font-weight:600}
.dp-actions{display:flex; gap:7px; margin-top:12px; flex-wrap:wrap}
.dp-actions button{flex:1 1 45%; font-size:12px; padding:7px 6px; white-space:nowrap}
#dp-stop:hover{border-color:var(--bad); color:var(--bad); box-shadow:0 0 10px rgba(255,85,102,.35)}

/* ---------------- LOG DRAWER ---------------- */
#log-drawer{
  position:absolute; top:64px; right:12px; bottom:56px; z-index:27; width:380px; max-width:calc(100vw - 40px);
  background:var(--glass-strong); border:1px solid var(--glass-border); border-radius:14px;
  box-shadow:var(--shadow), var(--glow-soft); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  display:flex; flex-direction:column; transform:translateX(115%); transition:transform .28s cubic-bezier(.2,.8,.25,1);
}
#log-drawer.open{transform:translateX(0)}
.ld-head{display:flex; align-items:center; justify-content:space-between; padding:12px 14px;
  border-bottom:1px solid var(--glass-border); font-weight:600; font-size:14px}
.ld-head .close{width:26px; height:26px; padding:0; border-radius:50%}
#ld-body{flex:1; overflow-y:auto; padding:10px 12px; display:flex; flex-direction:column; gap:6px;
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px}
.ld-entry{padding:6px 9px; border-left:3px solid var(--accent); border-radius:6px;
  background:rgba(255,255,255,.035); line-height:1.45}
body[data-theme="light"] .ld-entry{background:rgba(0,0,0,.05)}
.ld-entry .lt{color:var(--text-dim); font-size:10.5px; margin-right:6px}
.ld-entry .lk{font-size:10px; text-transform:uppercase; letter-spacing:1px; margin-right:6px; padding:1px 5px;
  border-radius:8px; background:rgba(255,255,255,.08)}
.ld-empty{color:var(--text-dim); text-align:center; padding:20px}

/* ---------------- RIGHT PANEL (departments) ---------------- */
#side-panel{
  width:288px; flex:none; background:var(--glass); border-left:1px solid var(--glass-border);
  overflow-y:auto; z-index:22; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
#side-panel h2{font-size:12px; text-transform:uppercase; letter-spacing:1.5px; color:var(--text-dim);
  padding:13px 14px 8px; position:sticky; top:0; background:var(--panel-solid); z-index:2}
.dept-row{
  position:relative; display:grid; grid-template-columns:14px 1fr auto; gap:9px; align-items:center;
  padding:9px 14px; cursor:pointer; border-left:3px solid transparent; transition:background .15s;
}
.dept-row:hover{background:rgba(255,255,255,.045)}
body[data-theme="light"] .dept-row:hover{background:rgba(0,0,0,.045)}
.dept-row.on{border-left-color:currentColor; background:rgba(255,255,255,.06)}
body[data-theme="light"] .dept-row.on{background:rgba(0,0,0,.06)}
.dept-row .chip-dot{width:12px; height:12px; border-radius:4px; box-shadow:0 0 8px currentColor}
.dept-row .dname{font-size:13.5px; font-weight:600}
.dept-row .dmeta{font-size:11px; color:var(--text-dim); margin-top:1px}
.dept-row .dcount{font-size:16px; font-family:ui-monospace,Menlo,monospace; color:var(--text-dim)}
.dept-row .spark{grid-column:1 / -1; height:4px; border-radius:2px; background:rgba(255,255,255,.07); overflow:hidden}
body[data-theme="light"] .dept-row .spark{background:rgba(0,0,0,.09)}
.dept-row .spark i{display:block; height:100%; border-radius:2px; transition:width .5s ease; box-shadow:0 0 6px currentColor}

/* ---------------- BOTTOM BAR ---------------- */
#bottom-bar{
  display:flex; gap:12px; padding:7px 14px; background:var(--glass-strong); border-top:1px solid var(--glass-border);
  z-index:24; min-height:164px; max-height:196px; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
#feed-wrap{flex:1; min-width:0; display:flex; flex-direction:column}
#feed-title{font-size:11px; text-transform:uppercase; letter-spacing:1.2px; color:var(--text-dim); margin-bottom:5px}
.feed-mode{font-size:9.5px; font-weight:700; letter-spacing:1px; padding:1px 7px; border-radius:9px;
  border:1px solid var(--warn); color:var(--warn); margin-left:6px; vertical-align:1px}
.feed-mode.live{border-color:var(--good); color:var(--good)}
#feed{flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:4px; padding-right:6px}
.feed-item{
  font-size:12.5px; padding:5px 9px; border-left:3px solid var(--accent); border-radius:6px;
  background:rgba(255,255,255,.035); color:var(--text);
  animation:feedIn .35s cubic-bezier(.2,.9,.3,1.2);
}
body[data-theme="light"] .feed-item{background:rgba(0,0,0,.045)}
.feed-item .t{color:var(--text-dim); font-family:ui-monospace,Menlo,monospace; font-size:11px; margin-right:7px}
.feed-item .who{font-weight:600}
.feed-item .task{color:var(--text-dim); font-style:italic}
@keyframes feedIn{0%{transform:translateX(-26px); opacity:0}100%{transform:translateX(0); opacity:1}}
#quick-actions{
  flex:none; width:360px; display:grid; grid-template-columns:repeat(3,1fr); gap:5px; align-content:start;
  align-self:flex-start;   /* don't stretch to the bar height — keeps grid rows at natural size */
}
#quick-actions button{padding:4px 2px; font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#quick-actions .qa-label{grid-column:1/-1; font-size:11px; text-transform:uppercase; letter-spacing:1.2px; color:var(--text-dim)}
#speed-group{grid-column:1/-1; display:flex; gap:6px}
#speed-group button{flex:1}
#btn-broadcast{border-color:rgba(0,245,212,.4); color:var(--accent)}

/* ---------------- MODALS ---------------- */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(5,5,15,.65); backdrop-filter:blur(3px);
  display:none; align-items:center; justify-content:center; z-index:60;
}
.modal-backdrop.open{display:flex}
.modal{
  width:440px; max-width:calc(100vw - 32px); max-height:80vh; overflow:auto;
  background:var(--panel-solid); border:1px solid var(--glass-border); border-radius:16px; padding:22px;
  box-shadow:var(--shadow), var(--glow-soft); animation:modalIn .22s ease;
}
@keyframes modalIn{0%{transform:scale(.92);opacity:0}100%{transform:scale(1);opacity:1}}
.modal h3{margin-bottom:12px; font-size:16px}
.modal .close-x{float:right; width:28px; height:28px; padding:0; border-radius:50%}
.modal-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:14px}
#report-body{font-size:13.5px; line-height:1.65; color:var(--text); white-space:pre-line}
#report-body .rep-head{color:var(--text-dim); font-size:12px; margin-bottom:8px}
.set-row{display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-top:1px dashed var(--border); font-size:13.5px}
.set-row input{accent-color:var(--accent); width:17px; height:17px; cursor:pointer}

/* ---------------- TOASTS ---------------- */
#toasts{position:fixed; bottom:120px; right:16px; z-index:70; display:flex; flex-direction:column; gap:8px; pointer-events:none}
.toast{
  background:var(--panel-solid); border:1px solid var(--glass-border); border-left:4px solid var(--accent);
  border-radius:10px; padding:9px 14px; font-size:12.5px; box-shadow:var(--shadow);
  animation:toastIn .25s cubic-bezier(.2,.9,.3,1.2); max-width:340px;
}
.toast.ok{border-left-color:var(--good)}
.toast.err{border-left-color:var(--bad); color:#ffb3bc}
.toast.warn{border-left-color:var(--warn)}
.toast.out{animation:toastOut .3s ease forwards}
@keyframes toastIn{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes toastOut{to{transform:translateX(40px);opacity:0}}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:1180px){
  #zoom-sidebar{width:52px}
  #zoom-sidebar .zs-btn{font-size:0; gap:0; justify-content:center; padding:6px 0}
  #zoom-sidebar .zs-ico{font-size:15px; width:auto}
  #zoom-sidebar .zs-title{font-size:0; padding-bottom:6px}
  #zoom-sidebar .zs-title::after{content:'ZOOM'; font-size:9px; letter-spacing:1px}
  .zs-legend{display:none}
  #filter-bar{left:72px}
  #detail-panel{left:72px}
}
@media (max-width:1024px){
  #drawer-toggle{display:block}
  #side-panel{position:fixed; top:0; right:0; bottom:0; transform:translateX(105%);
    transition:transform .25s ease; box-shadow:var(--shadow); padding-top:46px}
  #side-panel.open{transform:translateX(0)}
  #quick-actions{width:300px}
}
@media (max-width:768px){
  #main{flex-direction:column}
  #canvas-wrap{flex:none; height:55vh}
  #bottom-bar{flex-direction:column; max-height:none; min-height:0}
  #feed-wrap{min-height:90px}
  #quick-actions{width:100%; grid-template-columns:repeat(3,1fr)}
  #topbar .stats{gap:8px}
  #detail-panel{top:58px; width:270px; left:8px}
  #zoom-sidebar{top:56px; max-height:calc(100% - 120px)}
  #filter-bar{left:8px; top:8px; max-width:calc(100% - 80px)}
  #log-drawer{top:56px; bottom:12px}
}

/* ---------------- PRINT VIEW ---------------- */
#print-area{display:none}
@media print{
  body{overflow:visible; background:#fff; color:#111}
  #app,.modal-backdrop,#toasts{display:none !important}
  #print-area{display:block !important; font-family:'Segoe UI',system-ui,sans-serif; padding:24px}
  #print-area h1{font-size:20px; margin-bottom:4px}
  #print-area .p-time{color:#555; font-size:12px; margin-bottom:16px}
  #print-area table{width:100%; border-collapse:collapse; font-size:12px}
  #print-area th,#print-area td{border:1px solid #bbb; padding:6px 8px; text-align:left}
  #print-area th{background:#eee}
  #print-area .p-foot{margin-top:14px; font-size:11px; color:#666}
}