/* ── Observatory · Dilo Office ── */
:root {
  --bg: #0a0f1a; --panel: rgba(15,23,42,.5); --border: rgba(148,163,184,.12);
  --text: #e2e8f0; --muted: #64748b; --accent: #8b5cf6;
  --violet: #8b5cf6; --cyan: #06b6d4; --emerald: #10b981; --amber: #f59e0b;
  --rose: #f43f5e; --pink: #ec4899;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font-family:'SF Pro Text','Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;font-size:13px;overflow:hidden}
.sub{font-size:10px;color:var(--muted)}
#app{height:100vh;display:flex;flex-direction:column;position:relative}

/* ── Ambient background ── */
.ambient{position:fixed;inset:0;pointer-events:none;z-index:0}
.blob{position:absolute;border-radius:50%;filter:blur(120px)}
.blob-violet{top:0;left:25%;width:500px;height:500px;background:rgba(139,92,246,.08)}
.blob-cyan{bottom:0;right:25%;width:400px;height:400px;background:rgba(6,182,212,.07)}
.blob-emerald{top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:600px;background:rgba(16,185,129,.04)}

/* ── Header ── */
header{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:10px 20px;background:rgba(2,6,23,.8);backdrop-filter:blur(24px);border-bottom:1px solid var(--border);flex-shrink:0}
.header-left,.header-right{display:flex;align-items:center;gap:16px}
.header-brand{display:flex;align-items:center;gap:10px}
.header-icon{padding:8px;border-radius:12px;background:linear-gradient(135deg,var(--violet),#7c3aed);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(139,92,246,.25)}
h1{font-size:16px;font-weight:700;letter-spacing:-.3px}
h2{font-size:13px;font-weight:600}
.live-badge{display:flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.3)}
.live-dot{width:8px;height:8px;border-radius:50%;background:#10b981;box-shadow:0 0 8px #10b981;animation:pulse 2s infinite}
.live-text{font-size:13px;font-weight:600;color:#10b981}
.live-count{font-size:11px;color:var(--muted)}
.clock{font-size:13px;font-family:'SF Mono',monospace;color:var(--muted)}
.pill{padding:4px 12px;border-radius:999px;border:1px solid var(--border);background:rgba(15,23,42,.6);color:var(--muted);font-size:11px}
.pill.ok{border-color:rgba(16,185,129,.4);color:#10b981}
.pill.bad{border-color:rgba(244,63,94,.4);color:#f43f5e}
.btn-header{background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.3);color:var(--text);padding:7px 14px;border-radius:10px;cursor:pointer;font-size:12px;font-weight:500;display:flex;align-items:center;gap:6px;transition:all .2s}
.btn-header:hover{background:rgba(139,92,246,.2)}
.btn-header.active{background:rgba(16,185,129,.15);border-color:rgba(16,185,129,.4);color:#10b981}

/* ── Stats row ── */
.stats-row{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:12px 20px}
.stat-card{background:rgba(30,41,59,.5);backdrop-filter:blur(16px);border-radius:16px;padding:14px;border:1px solid var(--border);display:flex;align-items:center;gap:12px;transition:border-color .3s}
.stat-card:hover{border-color:rgba(148,163,184,.25)}
.stat-icon{padding:10px;border-radius:12px;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,.2)}
.stat-icon.violet{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}
.stat-icon.amber{background:linear-gradient(135deg,#f59e0b,#d97706)}
.stat-icon.emerald{background:linear-gradient(135deg,#10b981,#059669)}
.stat-icon.cyan{background:linear-gradient(135deg,#06b6d4,#0891b2)}
.stat-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;font-weight:500}
.stat-value{font-size:22px;font-weight:700;color:#fff}

/* ── Main layout ── */
main{position:relative;z-index:1;flex:1;display:grid;grid-template-columns:1fr 340px;gap:0;min-height:0;overflow:hidden;padding:0 20px 12px 20px;transition:grid-template-columns .3s ease}
main.feed-collapsed{grid-template-columns:1fr 48px}

/* ── Office canvas ── */
.office-pane{display:flex;flex-direction:column;border-radius:20px;overflow:hidden;border:1px solid var(--border);background:rgba(30,41,59,.5);backdrop-filter:blur(16px);box-shadow:0 8px 32px rgba(0,0,0,.3)}
.office-canvas-wrap{position:relative;flex:1;overflow:hidden;background:
  radial-gradient(ellipse at 50% 0%,rgba(139,92,246,.1) 0%,transparent 50%),
  radial-gradient(ellipse at 100% 100%,rgba(6,182,212,.08) 0%,transparent 50%),
  radial-gradient(ellipse at 0% 100%,rgba(16,185,129,.08) 0%,transparent 50%),
  linear-gradient(180deg,#1e1b2e 0%,#0f172a 50%,#0a0f1a 100%)}
#world{position:absolute;inset:0;width:100%;height:100%}
#particles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#agentLayer{position:absolute;inset:0;pointer-events:none}
#lineLayer{position:absolute;inset:0;pointer-events:none}

/* Grid pattern overlay */
.office-canvas-wrap::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.03;background-image:
  repeating-linear-gradient(90deg,transparent,transparent 80px,rgba(255,255,255,.1) 80px,rgba(255,255,255,.1) 81px),
  repeating-linear-gradient(0deg,transparent,transparent 80px,rgba(255,255,255,.1) 80px,rgba(255,255,255,.1) 81px)}

/* ── Agents in office ── */
.agent-char{position:absolute;cursor:pointer;transition:all .5s cubic-bezier(.4,0,.2,1);z-index:10}
.agent-char:hover .agent-body{transform:scale(1.12)}
.agent-shadow{position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);border-radius:50%;filter:blur(8px)}
.agent-body{position:relative;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid rgba(255,255,255,.2);backdrop-filter:blur(12px);transition:transform .3s;box-shadow:0 0 30px var(--agent-glow,rgba(139,92,246,.4)),inset 0 0 20px rgba(255,255,255,.1)}
.agent-body-inner{position:absolute;border-radius:50%;opacity:.8;inset:4px}
.agent-emoji{position:relative;z-index:2;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}
.agent-ping{position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--agent-glow,rgba(139,92,246,.4));animation:ping-slow 2s ease-out infinite}
.agent-energy{position:absolute;bottom:-3px;left:50%;transform:translateX(-50%);width:70%;height:5px;border-radius:999px;background:rgba(0,0,0,.3);overflow:hidden}
.agent-energy-bar{height:100%;border-radius:999px;background:linear-gradient(90deg,#10b981,#06b6d4);transition:width .5s}
.agent-name{position:absolute;bottom:-40px;left:50%;transform:translateX(-50%);padding:2px 10px;border-radius:999px;font-size:10px;font-weight:700;white-space:nowrap;backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.15);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.agent-work-dots{position:absolute;top:-20px;left:50%;transform:translateX(-50%);display:flex;gap:4px}
.agent-work-dot{width:6px;height:6px;border-radius:50%;background:linear-gradient(to top,rgba(255,255,255,.6),#fff);animation:float 1s ease-in-out infinite}

/* ── Agent chair ── */
.agent-chair{position:absolute;bottom:-24px;left:50%;transform:translateX(-50%);width:34px;height:18px;border-radius:6px 6px 4px 4px;background:var(--chair-color,rgba(100,116,139,.2));border:1px solid rgba(255,255,255,.06);z-index:0}
.agent-char.boss .agent-chair{width:40px;height:20px}
.agent-char.walking .agent-chair{display:none}

/* ── Agent legs ── */
.agent-legs{position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:1}
.agent-char:not(.walking) .agent-legs{display:none}
.agent-leg{width:4px;height:14px;border-radius:0 0 2px 2px;background:linear-gradient(180deg,var(--leg-color,rgba(148,163,184,.6)),var(--leg-color,rgba(148,163,184,.4)));transform-origin:top center}
.agent-char.walking .agent-leg-l{animation:leg-walk-l .4s ease-in-out infinite}
.agent-char.walking .agent-leg-r{animation:leg-walk-r .4s ease-in-out infinite}
.agent-leg-shoe{position:absolute;bottom:-2px;left:-1px;width:6px;height:3px;border-radius:0 0 3px 3px;background:var(--shoe-color,rgba(30,41,59,.8))}

/* ── Agent faces (SVG) ── */
.agent-face{position:relative;z-index:2;width:28px;height:28px}

/* Dilo */
.face-dilo .dilo-eye{fill:#fff;filter:drop-shadow(0 0 3px rgba(255,255,255,.6))}
.face-dilo .dilo-pupil{fill:#1e293b}
.face-dilo .dilo-mouth{stroke:#fff;stroke-width:1.5;fill:none;stroke-linecap:round;filter:drop-shadow(0 0 2px rgba(255,255,255,.4))}
.agent-char.working .dilo-pupil{animation:dilo-look 3s ease-in-out infinite}
.dilo-blink{animation:dilo-blink 4s ease-in-out infinite}

/* Phantom */
.face-phantom .phantom-visor{filter:drop-shadow(0 0 4px rgba(244,63,94,.3))}
.face-phantom .phantom-scan{filter:drop-shadow(0 0 3px rgba(244,63,94,.5))}
.face-phantom .phantom-pupil{filter:drop-shadow(0 0 3px rgba(255,255,255,.6))}
.agent-char.working .phantom-scan{animation:phantom-scan 1.5s ease-in-out infinite}
.agent-char.working .phantom-pupil{animation:phantom-look 3.5s steps(4) infinite}
.phantom-pupil{animation:phantom-idle-look 6s steps(3) infinite}
.phantom-visor{animation:phantom-blink 5.5s steps(1) infinite}

/* Nyx */
.face-nyx .nyx-eye{filter:drop-shadow(0 0 3px rgba(168,85,247,.4))}
.nyx-blink{animation:nyx-blink 5s ease-in-out infinite}
.agent-char.working .nyx-pupil{animation:nyx-look 4s ease-in-out infinite}
.nyx-pupil{animation:nyx-idle-look 5.5s ease-in-out infinite}
.face-nyx .nyx-moon{filter:drop-shadow(0 0 3px rgba(168,85,247,.3))}

/* Cipher */
.face-cipher .cipher-eye{filter:drop-shadow(0 0 3px rgba(6,182,212,.3))}
.face-cipher .cipher-led{filter:drop-shadow(0 0 4px rgba(6,182,212,.5))}
.agent-char.working .cipher-dot{animation:cipher-process 1.2s ease-in-out infinite}
.agent-char.working .cipher-led{animation:cipher-flicker .8s steps(2) infinite}
.agent-char.working .cipher-pupil{animation:cipher-look 3s steps(4) infinite}
.cipher-pupil{animation:cipher-idle-look 5s steps(3) infinite}
.cipher-blink{animation:cipher-blink 4.5s steps(1) infinite}

/* Pulse */
.face-pulse .pulse-eye{filter:drop-shadow(0 0 3px rgba(16,185,129,.4))}
.pulse-blink{animation:pulse-blink 4.5s steps(1) infinite}
.face-pulse .pulse-smile{filter:drop-shadow(0 0 2px rgba(16,185,129,.3))}
.agent-char.working .pulse-wave{animation:pulse-signal 2s ease-in-out infinite}
.agent-char.working .pulse-wave2{animation:pulse-signal 2s ease-in-out infinite .3s}
.agent-char.working .pulse-pupil{animation:pulse-look 3s steps(4) infinite}
.pulse-pupil{animation:pulse-idle-look 5.5s steps(3) infinite}

/* Wraith */
.face-wraith .wraith-eye{filter:drop-shadow(0 0 4px rgba(99,102,241,.3))}
.face-wraith .wraith-core{filter:drop-shadow(0 0 5px rgba(165,180,252,.5))}
.agent-char.working .wraith-core{animation:wraith-glow 2s ease-in-out infinite}
.agent-char.working .wraith-wisp{animation:wraith-drift 3s ease-in-out infinite}
.agent-char.working .wraith-pupil{animation:wraith-look 4s steps(4) infinite}
.wraith-pupil{animation:wraith-idle-look 6s steps(3) infinite}
.wraith-blink{animation:wraith-blink 6s steps(1) infinite}

/* Specter */
.face-specter .specter-visor{filter:drop-shadow(0 0 3px rgba(245,158,11,.3))}
.face-specter .specter-led{filter:drop-shadow(0 0 4px rgba(251,191,36,.5))}
.agent-char.working .specter-hand{animation:specter-tick 1s linear infinite;transform-origin:14px 21px}
.agent-char.working .specter-led{animation:cipher-flicker .6s steps(2) infinite}
.agent-char.working .specter-pupil{animation:specter-look 3s steps(4) infinite}
.specter-pupil{animation:specter-idle-look 5s steps(3) infinite}
.specter-blink{animation:specter-blink 5s steps(1) infinite}
.phantom-pupil,.cipher-pupil,.pulse-pupil,.wraith-pupil,.specter-pupil,.phantom-visor,.cipher-blink,.wraith-blink,.specter-blink,.dilo-blink,.nyx-blink,.pulse-blink{transform-box:fill-box;transform-origin:center}

/* ── Working animations: typing bob ── */
.agent-char.working:not(.walking) .agent-body{animation:typing-bob .6s ease-in-out infinite}
.agent-char.working.fast-typing:not(.walking) .agent-body{animation:typing-bob .35s ease-in-out infinite}
.agent-char.working:not(.walking) .agent-face{animation:head-bob 2s ease-in-out infinite}

/* ── Error shake ── */
.agent-char.error-shake .agent-body{animation:error-shake .4s ease-in-out 3!important}

/* ── Screen flash ── */
.monitor-screen.screen-flash-success{animation:screen-flash-success .6s ease-out}
.monitor-screen.screen-flash-error{animation:screen-flash-error .6s ease-out}

/* ── Sleep/idle animation ── */
.agent-char.sleeping .agent-body{animation:sleep-breathe 3s ease-in-out infinite;opacity:.6}
.agent-char.sleeping .agent-name{opacity:.4}
.agent-zzz{position:absolute;top:-30px;left:60%;font-size:10px;color:rgba(148,163,184,.5);pointer-events:none;animation:zzz-float 2.5s ease-in-out infinite;font-weight:700}
.agent-zzz:nth-child(2){animation-delay:.8s;left:70%;font-size:8px}
.agent-zzz:nth-child(3){animation-delay:1.6s;left:50%;font-size:12px}

/* ── Agent mood system ── */
/* Warm — heavy workload (3+ recent events) */
.agent-char.mood-warm .agent-body{box-shadow:0 0 30px rgba(239,68,68,.25),0 0 50px var(--agent-glow),inset 0 0 20px rgba(239,68,68,.08);border-color:rgba(239,68,68,.3)}
.agent-char.mood-warm .agent-shadow{filter:blur(8px) brightness(1.3);background:radial-gradient(ellipse,rgba(239,68,68,.3),transparent 70%)!important}
.agent-char.mood-warm:not(.walking) .agent-body{animation:typing-bob .45s ease-in-out infinite}

/* Hot — very heavy workload (6+ recent events) */
.agent-char.mood-hot .agent-body{box-shadow:0 0 35px rgba(239,68,68,.35),0 0 60px rgba(249,115,22,.2),inset 0 0 20px rgba(239,68,68,.12);border-color:rgba(249,115,22,.4);animation:hot-pulse 1.5s ease-in-out infinite}
.agent-char.mood-hot .agent-shadow{filter:blur(10px) brightness(1.5);background:radial-gradient(ellipse,rgba(249,115,22,.35),transparent 70%)!important}
.agent-char.mood-hot .agent-name{color:rgba(249,115,22,.9)}

/* Calm — idle, at rest */
.agent-char.mood-calm .agent-body{box-shadow:0 0 20px rgba(59,130,246,.15),0 0 40px var(--agent-glow),inset 0 0 20px rgba(59,130,246,.05);border-color:rgba(96,165,250,.25);transition:all 1.5s ease}
.agent-char.mood-calm .agent-shadow{filter:blur(10px) brightness(.8);transition:all 1.5s ease}

/* Glitch — error state */
.agent-char.mood-glitch .agent-body{animation:mood-glitch .15s steps(2) 6!important;box-shadow:0 0 30px rgba(239,68,68,.4),0 0 60px rgba(239,68,68,.15),inset 0 0 20px rgba(239,68,68,.1);border-color:rgba(239,68,68,.5)}
.agent-char.mood-glitch .agent-face{animation:mood-glitch .2s steps(3) 4!important}
.agent-char.mood-glitch .agent-name{color:rgba(239,68,68,.8)}

/* Golden aura — just completed something big */
.agent-char.mood-golden .agent-body{box-shadow:0 0 40px rgba(251,191,36,.4),0 0 80px rgba(251,191,36,.15),inset 0 0 25px rgba(251,191,36,.1);border-color:rgba(251,191,36,.5);transition:all .4s ease}
.agent-char.mood-golden .agent-shadow{filter:blur(12px) brightness(1.6);background:radial-gradient(ellipse,rgba(251,191,36,.4),transparent 70%)!important}
.agent-char.mood-golden .agent-name{color:rgba(251,191,36,.9);text-shadow:0 0 8px rgba(251,191,36,.3)}

@keyframes hot-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
@keyframes mood-glitch{0%{transform:translate(0)}25%{transform:translate(-2px,1px)}50%{transform:translate(2px,-1px)}75%{transform:translate(-1px,-1px)}100%{transform:translate(0)}}

/* ── Huddle indicator ── */
.agent-char.huddling .agent-body{box-shadow:0 0 30px var(--agent-glow),0 0 60px var(--agent-glow),inset 0 0 20px rgba(255,255,255,.15)!important}

/* ── High-five burst ── */
.highfive-burst{position:absolute;pointer-events:none;z-index:25;font-size:20px;animation:highfive-pop .8s ease-out forwards}

/* ── Document pass ── */
.doc-pass{position:absolute;pointer-events:none;z-index:25;font-size:12px;filter:drop-shadow(0 0 4px rgba(139,92,246,.6))}

/* ── Smoke puff ── */
.smoke-puff{position:absolute;pointer-events:none;z-index:12;width:8px;height:8px;border-radius:50%;background:rgba(148,163,184,.25);animation:smoke-rise 2s ease-out forwards}

/* ── Boss desk (Dilo) ── */
.agent-char.boss .agent-body{width:58px!important;height:58px!important;border-width:3px;box-shadow:0 0 45px var(--agent-glow),0 0 80px var(--agent-glow),inset 0 0 25px rgba(255,255,255,.15)}
.agent-char.boss .agent-name{font-size:11px;padding:3px 14px;background:linear-gradient(135deg,rgba(59,130,246,.3),rgba(99,102,241,.3))!important;border:1px solid rgba(99,102,241,.4)}
.agent-char.boss .agent-face{width:32px;height:32px}
.agent-char.boss .agent-legs .agent-leg{height:16px;width:5px}

/* ── Speech bubble ── */
.speech-bubble{position:absolute;padding:8px 14px;border-radius:16px;font-size:11px;font-weight:500;max-width:180px;line-height:1.4;color:rgba(255,255,255,.9);backdrop-filter:blur(16px);border:1px solid rgba(148,163,184,.2);box-shadow:0 8px 32px rgba(0,0,0,.3);animation:fadeInUp .4s ease-out;pointer-events:none;z-index:20}
.speech-bubble::after{content:'';position:absolute;top:14px;width:10px;height:10px;transform:rotate(45deg);backdrop-filter:blur(16px);border:1px solid rgba(148,163,184,.2)}
.speech-bubble.dir-right{background:linear-gradient(135deg,rgba(100,116,139,.2),rgba(71,85,105,.2))}
.speech-bubble.dir-right::after{left:-5px;border-right:0;border-top:0;background:rgba(100,116,139,.2)}
.speech-bubble.dir-left{background:linear-gradient(135deg,rgba(100,116,139,.2),rgba(71,85,105,.2))}
.speech-bubble.dir-left::after{right:-5px;border-left:0;border-bottom:0;background:rgba(100,116,139,.2)}

/* ── Thought bubble (standup meeting) ── */
.thought-bubble{position:absolute;padding:8px 14px;border-radius:20px;font-size:11px;font-weight:500;max-width:190px;line-height:1.4;color:rgba(255,255,255,.95);background:linear-gradient(135deg,rgba(139,92,246,.18),rgba(99,102,241,.12));backdrop-filter:blur(16px);border:1px solid rgba(139,92,246,.25);box-shadow:0 8px 32px rgba(0,0,0,.3),0 0 20px rgba(139,92,246,.08);animation:thought-in .4s ease-out;pointer-events:none;z-index:22}
.thought-bubble::before,.thought-bubble::after{content:'';position:absolute;border-radius:50%;background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.2);backdrop-filter:blur(8px)}
.thought-bubble::after{bottom:-8px;left:18px;width:10px;height:10px}
.thought-bubble::before{bottom:-16px;left:12px;width:6px;height:6px}
.thought-bubble .thought-name{font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:rgba(139,92,246,.7);margin-bottom:2px}
@keyframes thought-in{from{opacity:0;transform:translateY(8px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}

/* ── Projected meeting screen ── */
.meeting-screen{position:absolute;z-index:25;border-radius:14px;background:linear-gradient(180deg,rgba(10,15,30,.95),rgba(20,30,50,.92));border:1px solid rgba(139,92,246,.25);box-shadow:0 16px 64px rgba(0,0,0,.6),0 0 60px rgba(139,92,246,.08),inset 0 1px 0 rgba(255,255,255,.04);backdrop-filter:blur(24px);overflow:hidden;animation:screen-rise .6s ease-out;pointer-events:none}
.meeting-screen-header{padding:12px 18px 10px;border-bottom:1px solid rgba(139,92,246,.15);display:flex;align-items:center;gap:8px}
.meeting-screen-header .screen-dot{width:7px;height:7px;border-radius:50%;background:#10b981;box-shadow:0 0 8px rgba(16,185,129,.6);animation:pulse 2s infinite}
.meeting-screen-header .screen-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:rgba(139,92,246,.7)}
.meeting-screen-agenda{padding:10px 18px;font-size:14px;color:rgba(6,182,212,.9);font-weight:600;border-bottom:1px solid rgba(139,92,246,.08);letter-spacing:.2px}
.meeting-screen-body{padding:8px 14px;max-height:280px;overflow-y:auto;scrollbar-width:none}
.meeting-screen-body::-webkit-scrollbar{display:none}
.meeting-screen-line{padding:7px 10px;font-size:12px;line-height:1.5;color:rgba(148,163,184,.6);display:flex;gap:10px;border-radius:6px;animation:line-slide .3s ease-out;margin-bottom:2px;transition:background .3s,color .3s}
.meeting-screen-line.active{background:rgba(139,92,246,.1);color:rgba(255,255,255,.9)}
.meeting-screen-line .line-agent{font-weight:700;color:rgba(139,92,246,.8);min-width:64px;text-transform:capitalize}
.meeting-screen-line .line-text{flex:1}
.meeting-screen-line .line-check{color:#10b981;font-size:11px;opacity:0;transition:opacity .4s}
.meeting-screen-line.done .line-check{opacity:1}
.meeting-screen-line.done{color:rgba(148,163,184,.4)}
@keyframes screen-rise{from{opacity:0;transform:translateY(12px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes line-slide{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}

/* ── Threat Detection Mode ── */
.threat-overlay{position:absolute;inset:0;z-index:30;pointer-events:none;transition:opacity .6s}
.threat-overlay.active{opacity:1}
.threat-overlay.fading{opacity:0}

/* Red ambient wash */
.threat-ambient{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(239,68,68,.06) 0%,rgba(239,68,68,.02) 50%,transparent 80%);animation:threat-pulse 1.2s ease-in-out infinite;pointer-events:none}
@keyframes threat-pulse{0%,100%{opacity:.4}50%{opacity:1}}

/* Scanning laser beam */
.threat-laser{position:absolute;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent 0%,rgba(239,68,68,.1) 10%,rgba(239,68,68,.7) 40%,rgba(255,100,100,1) 50%,rgba(239,68,68,.7) 60%,rgba(239,68,68,.1) 90%,transparent 100%);box-shadow:0 0 20px rgba(239,68,68,.5),0 0 60px rgba(239,68,68,.2);animation:laser-sweep 2s ease-in-out infinite;z-index:31}
@keyframes laser-sweep{0%{top:10%;opacity:.6}50%{top:85%;opacity:1}100%{top:10%;opacity:.6}}

/* Alert banner */
.threat-banner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:35;animation:banner-in .4s ease-out}
.threat-banner-inner{padding:0;text-align:center}
.threat-alert-icon{font-size:28px;animation:alert-flash .6s ease-in-out infinite alternate;margin-bottom:4px}
.threat-alert-label{font-size:10px;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:rgba(239,68,68,.9);text-shadow:0 0 20px rgba(239,68,68,.5)}
@keyframes alert-flash{from{opacity:.5;transform:scale(.95)}to{opacity:1;transform:scale(1.05)}}
@keyframes banner-in{from{opacity:0;transform:translate(-50%,-50%) scale(.7)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}

/* Holographic threat display — hexagonal shield */
.threat-holo{position:absolute;z-index:34;animation:holo-in .6s ease-out}
.threat-holo-hex{width:180px;height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}
.threat-holo-hex::before{content:'';position:absolute;inset:0;background:conic-gradient(from 0deg,rgba(239,68,68,.08),rgba(239,68,68,.02),rgba(239,68,68,.08),rgba(239,68,68,.02),rgba(239,68,68,.08));clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);animation:hex-rotate 8s linear infinite}
.threat-holo-hex::after{content:'';position:absolute;inset:8px;border:1px solid rgba(239,68,68,.25);clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);animation:hex-pulse 2s ease-in-out infinite}
.threat-holo-shield{position:absolute;inset:16px;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);border:1px solid rgba(239,68,68,.15);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;padding:24px 16px}
.threat-holo-icon{font-size:26px;filter:drop-shadow(0 0 12px rgba(239,68,68,.6));animation:alert-flash .8s ease-in-out infinite alternate}
.threat-holo-label{font-size:9px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:rgba(239,68,68,.8)}
.threat-holo-text{font-size:10px;color:rgba(255,200,200,.8);text-align:center;line-height:1.4;max-width:120px;word-wrap:break-word}
.threat-holo-ring{position:absolute;inset:-10px;border:1px solid rgba(239,68,68,.1);border-radius:50%;animation:ring-spin 6s linear infinite}
.threat-holo-ring:nth-child(2){inset:-20px;animation-duration:10s;animation-direction:reverse;border-style:dashed}
@keyframes hex-rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes hex-pulse{0%,100%{opacity:.3}50%{opacity:.8}}
@keyframes ring-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes holo-in{from{opacity:0;transform:scale(.5) rotateY(30deg)}to{opacity:1;transform:scale(1) rotateY(0deg)}}

/* Clear pulse — green ripple */
.threat-clear{position:absolute;border-radius:50%;border:2px solid rgba(16,185,129,.6);animation:clear-ripple 1.5s ease-out forwards;pointer-events:none;z-index:36}
@keyframes clear-ripple{0%{width:0;height:0;opacity:1}100%{width:600px;height:600px;margin-left:-300px;margin-top:-300px;opacity:0;border-width:1px}}

/* Red alert on agent screens */
.threat-active .monitor-screen{border:1px solid rgba(239,68,68,.3);box-shadow:0 0 12px rgba(239,68,68,.15)}

/* ── Desk ── */
.desk{position:absolute}
.desk-monitor{position:absolute;left:50%;transform:translateX(-50%);border-radius:8px 8px 0 0;border:1px solid rgba(71,85,105,.5);overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.desk-monitor-screen{width:100%;height:100%;padding:4px;display:flex;flex-direction:column;gap:2px}
.desk-code-line{height:2px;border-radius:1px;animation:pulse 2s infinite}
.desk-led{position:absolute;top:5px;right:5px;width:6px;height:6px;border-radius:50%;background:#10b981;box-shadow:0 0 6px rgba(16,185,129,.5);animation:pulse 2s infinite}
.desk-stand{position:absolute;left:50%;transform:translateX(-50%);border-radius:0 0 4px 4px}
.desk-surface{border-radius:10px;border:1px solid rgba(71,85,105,.3);box-shadow:0 8px 24px rgba(0,0,0,.2)}

/* ── Status bar ── */
.office-statusbar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:rgba(15,23,42,.9);backdrop-filter:blur(16px);border-top:1px solid var(--border)}
.statusbar-agents{display:flex;gap:4px;overflow-x:auto}
.statusbar-chip{display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:10px;cursor:pointer;transition:background .2s;flex-shrink:0}
.statusbar-chip:hover{background:rgba(148,163,184,.1)}
.statusbar-chip-avatar{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.statusbar-chip-avatar .agent-face{width:16px;height:16px}
.statusbar-chip-name{font-size:10px;color:var(--muted);font-weight:500}
.statusbar-chip-dot{width:6px;height:6px;border-radius:50%}
.statusbar-mission{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);flex-shrink:0}
.mission-dot{width:6px;height:6px;border-radius:50%;background:#10b981;animation:pulse 2s infinite}

/* ── Feed pane ── */
.feed-pane{display:flex;flex-direction:column;margin-left:12px;border-radius:20px;overflow:hidden;border:1px solid var(--border);background:rgba(15,23,42,.5);backdrop-filter:blur(16px);box-shadow:0 8px 32px rgba(0,0,0,.3);transition:width .3s ease,min-width .3s ease,opacity .3s ease}
.feed-pane.collapsed{width:48px;min-width:48px;border-radius:20px}
.feed-pane.collapsed .feed-list{display:none}
.feed-pane.collapsed .feed-header{padding:14px 10px;border-bottom:none;flex-direction:column;align-items:center;gap:12px}
.feed-pane.collapsed .feed-header-left{display:none}
.feed-pane.collapsed .btn-toggle-feed svg{transform:rotate(180deg)}
.feed-header{padding:14px 16px;border-bottom:1px solid var(--border);background:rgba(15,23,42,.8);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.feed-header-left{display:flex;align-items:center;gap:10px}
.feed-icon{padding:8px;border-radius:10px;background:linear-gradient(135deg,var(--violet),#7c3aed);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(139,92,246,.25)}
.btn-toggle-feed{background:rgba(148,163,184,.1);border:1px solid rgba(148,163,184,.15);color:var(--muted);width:28px;height:28px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}
.btn-toggle-feed:hover{background:rgba(148,163,184,.2);color:var(--text)}
.btn-toggle-feed svg{transition:transform .3s ease}
.feed-list{flex:1;overflow-y:auto;padding:6px}

/* ── Feed items ── */
.feed-item{display:flex;align-items:start;gap:10px;padding:10px 12px;border-radius:12px;transition:background .2s;animation:slideIn .4s ease-out}
.feed-item:hover{background:rgba(255,255,255,.04)}
.feed-item-avatar{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.feed-item-avatar .agent-face{width:20px;height:20px}
.feed-item-body{flex:1;min-width:0}
.feed-item-header{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.feed-item-name{font-size:12px;font-weight:600;color:#fff}
.feed-item-type{font-size:9px;padding:1px 6px;border-radius:999px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.feed-item-type.type-task{background:rgba(245,158,11,.15);color:#f59e0b;border:1px solid rgba(245,158,11,.2)}
.feed-item-type.type-message{background:rgba(6,182,212,.15);color:#06b6d4;border:1px solid rgba(6,182,212,.2)}
.feed-item-type.type-thinking{background:rgba(139,92,246,.15);color:#8b5cf6;border:1px solid rgba(139,92,246,.2)}
.feed-item-type.type-tool{background:rgba(16,185,129,.15);color:#10b981;border:1px solid rgba(16,185,129,.2)}
.feed-item-type.type-error{background:rgba(244,63,94,.15);color:#f43f5e;border:1px solid rgba(244,63,94,.2)}
.feed-item-type.type-move{background:rgba(100,116,139,.15);color:#94a3b8;border:1px solid rgba(100,116,139,.2)}
.feed-item-type.type-status{background:rgba(100,116,139,.15);color:#94a3b8;border:1px solid rgba(100,116,139,.2)}
.feed-item-type.type-conversation{background:rgba(236,72,153,.15);color:#ec4899;border:1px solid rgba(236,72,153,.2)}
.feed-item-type.type-mission{background:rgba(139,92,246,.15);color:#a78bfa;border:1px solid rgba(139,92,246,.2)}
.feed-item-content{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.feed-item-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.feed-item-time{font-size:9px;color:var(--muted);font-family:'SF Mono',monospace;white-space:nowrap}
.feed-item-icon{padding:4px;border-radius:6px;color:#fff;display:flex;align-items:center;justify-content:center}

/* ── Mission Board ── */
.mission-board{position:absolute;top:16px;left:16px;width:220px;z-index:15;display:flex;flex-direction:column;gap:8px;pointer-events:auto}
.mission-board-title{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--muted);padding:0 4px}
.mission-card{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;background:rgba(15,23,42,.85);backdrop-filter:blur(12px);border:1px solid var(--border);animation:fadeInUp .4s ease-out;transition:opacity .5s}
.mission-card.mission-fading{opacity:.5}
.mission-card-avatar{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.mission-card-avatar .agent-face{width:16px;height:16px}
.mission-card-body{flex:1;min-width:0}
.mission-card-task{font-size:10px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mission-card-bar{height:3px;border-radius:2px;background:rgba(255,255,255,.08);margin:4px 0 3px;overflow:hidden}
.mission-card-fill{height:100%;border-radius:2px;transition:width .5s ease}
.mission-card-step{font-size:9px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mission-card-status{flex-shrink:0;display:flex;align-items:center}
.mission-dot-active{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--accent);animation:pulse 2s infinite}
.mission-dot-completed{width:6px;height:6px;border-radius:50%;background:#10b981;box-shadow:0 0 6px #10b981}
.mission-dot-failed{width:6px;height:6px;border-radius:50%;background:#f43f5e;box-shadow:0 0 6px #f43f5e}

/* ── Monitor screen overlays ── */
.monitor-screen{position:absolute;z-index:8;pointer-events:none;padding:3px 4px;overflow:hidden;display:flex;flex-direction:column;gap:1px;opacity:.6;transition:opacity .4s}
.monitor-screen.screen-active{opacity:1}
.scr-line{font-family:'SF Mono',monospace;font-size:7px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scr-prompt{color:rgba(16,185,129,.8)}
.scr-dim{color:rgba(148,163,184,.6)}
.scr-hl{color:#06b6d4;font-weight:600}
.scr-ok{color:#10b981}
.scr-result{color:rgba(168,85,247,.7)}
.scr-in{color:rgba(16,185,129,.6)}
.scr-out{color:rgba(99,102,241,.6)}
.scr-bar{height:3px;border-radius:1px;background:rgba(255,255,255,.08);margin:2px 0;overflow:hidden}
.scr-bar-fill{height:100%;border-radius:1px;width:60%;transition:width .5s}
.scr-bar-fill.phantom-fill{background:linear-gradient(90deg,#f43f5e,#be123c);animation:scr-bar-pulse 2s ease-in-out infinite}
.scr-chart{display:flex;align-items:flex-end;gap:2px;height:16px}
.scr-chart-bar{width:6px;border-radius:1px 1px 0 0;background:rgba(6,182,212,.6);transition:height .3s}
.screen-active .scr-chart-bar{animation:scr-bar-bounce .6s ease-in-out infinite alternate}

/* ── Floating particles ── */
.particle{position:absolute;border-radius:50%;background:#fff;animation:float-particle linear infinite}

/* ── Modal ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .3s}
.modal-card{background:linear-gradient(135deg,rgba(15,23,42,.95),rgba(30,41,59,.95));border-radius:24px;padding:32px;max-width:420px;width:90%;border:1px solid var(--border);box-shadow:0 24px 64px rgba(0,0,0,.5);animation:scaleIn .3s ease-out}
.modal-agent-header{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.modal-avatar{width:72px;height:72px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:36px;box-shadow:0 0 40px var(--agent-glow,rgba(139,92,246,.4))}
.modal-avatar .agent-face{width:44px;height:44px}
.modal-name{font-size:22px;font-weight:700}
.modal-role{font-size:13px;color:var(--muted)}
.modal-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
.modal-stat{background:rgba(30,41,59,.5);border-radius:14px;padding:12px;border:1px solid rgba(71,85,105,.3)}
.modal-stat-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.modal-stat-value{font-size:16px;font-weight:700;color:#fff;margin-top:2px}
.modal-rows{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}
.modal-row{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:rgba(30,41,59,.3);border-radius:10px;border:1px solid rgba(71,85,105,.3)}
.modal-row-label{font-size:12px;color:var(--muted)}
.modal-row-value{font-size:12px;font-weight:600;color:#fff;max-width:55%;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modal-close{width:100%;padding:14px;border-radius:14px;border:none;font-size:13px;font-weight:700;color:#fff;cursor:pointer;transition:opacity .2s;box-shadow:0 8px 32px rgba(0,0,0,.3)}
.modal-close:hover{opacity:.85}

/* ── Animations ── */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes float-particle{0%{transform:translateY(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(-100vh);opacity:0}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
@keyframes slideIn{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:translateX(0)}}
@keyframes ping-slow{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.5);opacity:0}}
@keyframes dash{to{stroke-dashoffset:-24}}
@keyframes leg-walk-l{0%,100%{transform:rotate(0)}25%{transform:rotate(20deg)}75%{transform:rotate(-20deg)}}
@keyframes leg-walk-r{0%,100%{transform:rotate(0)}25%{transform:rotate(-20deg)}75%{transform:rotate(20deg)}}
@keyframes dilo-look{0%,100%{transform:translateX(0)}30%{transform:translateX(1.5px)}60%{transform:translateX(-1.5px)}}
@keyframes dilo-blink{0%,42%,46%,100%{transform:scaleY(1)}44%{transform:scaleY(.1)}}
@keyframes phantom-scan{0%,100%{opacity:.9;transform:translateX(0)}50%{opacity:.4;transform:translateX(3px)}}
@keyframes phantom-look{0%,100%{transform:translate(0,0)}25%{transform:translate(1px,0)}50%{transform:translate(-1px,0)}75%{transform:translate(0,-.4px)}}
@keyframes phantom-idle-look{0%,100%{transform:translate(0,0)}25%{transform:translate(.8px,-.2px)}50%{transform:translate(-.8px,.2px)}75%{transform:translate(.5px,0)}}
@keyframes phantom-blink{0%,49%,100%{transform:scaleY(1)}50%{transform:scaleY(.08)}}
@keyframes nyx-blink{0%,38%,42%,100%{transform:scaleY(1)}40%{transform:scaleY(.15)}}
@keyframes nyx-look{0%,100%{transform:translate(0,0)}25%{transform:translate(1.2px,-0.6px)}50%{transform:translate(-1.2px,0.6px)}75%{transform:translate(0.8px,-0.4px)}}
@keyframes nyx-idle-look{0%,100%{transform:translate(0,0)}25%{transform:translate(.6px,-.2px)}50%{transform:translate(-.7px,.2px)}75%{transform:translate(.4px,0)}}
@keyframes cipher-process{0%{opacity:.3}33%{opacity:1}66%{opacity:.6}100%{opacity:.3}}
@keyframes cipher-flicker{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes cipher-look{0%,100%{transform:translate(0,0)}25%{transform:translate(.8px,0)}50%{transform:translate(-.8px,0)}75%{transform:translate(0,.3px)}}
@keyframes cipher-idle-look{0%,100%{transform:translate(0,0)}25%{transform:translate(.6px,0)}50%{transform:translate(-.6px,.1px)}75%{transform:translate(.4px,-.1px)}}
@keyframes cipher-blink{0%,49%,100%{transform:scaleY(1)}50%{transform:scaleY(.1)}}
@keyframes pulse-blink{0%,44%,48%,100%{transform:scaleY(1)}46%{transform:scaleY(.15)}}
@keyframes pulse-signal{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(-1.5px);opacity:.7}}
@keyframes pulse-look{0%,100%{transform:translate(0,0)}25%{transform:translate(1px,0)}50%{transform:translate(-1px,0)}75%{transform:translate(0,.2px)}}
@keyframes pulse-idle-look{0%,100%{transform:translate(0,0)}25%{transform:translate(.7px,0)}50%{transform:translate(-.7px,.1px)}75%{transform:translate(.5px,-.1px)}}
@keyframes wraith-glow{0%,100%{filter:drop-shadow(0 0 5px rgba(165,180,252,.5))}50%{filter:drop-shadow(0 0 10px rgba(165,180,252,.8))}}
@keyframes wraith-drift{0%,100%{transform:translateX(0);opacity:.25}50%{transform:translateX(1.5px);opacity:.45}}
@keyframes wraith-look{0%,100%{transform:translate(0,0)}25%{transform:translate(.8px,0)}50%{transform:translate(-.8px,0)}75%{transform:translate(0,.2px)}}
@keyframes wraith-idle-look{0%,100%{transform:translate(0,0)}25%{transform:translate(.7px,-.1px)}50%{transform:translate(-.7px,.1px)}75%{transform:translate(.5px,0)}}
@keyframes wraith-blink{0%,49%,100%{transform:scaleY(1)}50%{transform:scaleY(.08)}}
@keyframes specter-tick{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
@keyframes specter-look{0%,100%{transform:translate(0,0)}25%{transform:translate(.9px,0)}50%{transform:translate(-.9px,0)}75%{transform:translate(0,.2px)}}
@keyframes specter-idle-look{0%,100%{transform:translate(0,0)}25%{transform:translate(.7px,0)}50%{transform:translate(-.7px,.1px)}75%{transform:translate(.5px,-.1px)}}
@keyframes specter-blink{0%,49%,100%{transform:scaleY(1)}50%{transform:scaleY(.1)}}
@keyframes typing-bob{0%,100%{transform:translateY(0)}25%{transform:translateY(-1px)}50%{transform:translateY(0)}75%{transform:translateY(-0.5px)}}
@keyframes head-bob{0%,100%{transform:translateY(0)}30%{transform:translateY(-.5px) rotate(-1deg)}70%{transform:translateY(.3px) rotate(.5deg)}}
@keyframes scr-bar-pulse{0%,100%{width:45%}50%{width:85%}}
@keyframes scr-bar-bounce{from{transform:scaleY(.7)}to{transform:scaleY(1)}}
@keyframes error-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-4px) rotate(-2deg)}40%{transform:translateX(4px) rotate(2deg)}60%{transform:translateX(-3px) rotate(-1deg)}80%{transform:translateX(2px) rotate(1deg)}}
@keyframes screen-flash-success{0%{box-shadow:inset 0 0 30px rgba(16,185,129,.8)}100%{box-shadow:none}}
@keyframes screen-flash-error{0%{box-shadow:inset 0 0 30px rgba(244,63,94,.8)}100%{box-shadow:none}}
@keyframes sleep-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
@keyframes zzz-float{0%{opacity:0;transform:translateY(0) scale(.5)}30%{opacity:.7;transform:translateY(-8px) scale(1)}70%{opacity:.5;transform:translateY(-18px) scale(.9)}100%{opacity:0;transform:translateY(-28px) scale(.6)}}
@keyframes highfive-pop{0%{opacity:1;transform:scale(.5)}40%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(2) translateY(-20px)}}
@keyframes thinking-pace{0%{transform:translate(0,0)}25%{transform:translate(8px,-3px)}50%{transform:translate(0,-1px)}75%{transform:translate(-8px,-3px)}100%{transform:translate(0,0)}}
@keyframes smoke-rise{0%{opacity:.4;transform:translateY(0) scale(1)}40%{opacity:.3;transform:translateY(-12px) scale(1.4)}100%{opacity:0;transform:translateY(-35px) scale(2) translateX(8px)}}

/* ── Footstep trails ── */
.footstep{position:absolute;width:8px;height:8px;border-radius:50%;pointer-events:none;z-index:2;animation:footstep-fade 1.8s ease-out forwards}
.footstep.left{transform:translateX(-4px)}
.footstep.right{transform:translateX(4px)}
.dust-puff{position:absolute;width:10px;height:10px;border-radius:50%;pointer-events:none;z-index:3;animation:dust-expand .7s ease-out forwards}
.dust-burst .dust-puff{width:8px;height:8px;animation:dust-burst-expand .8s ease-out forwards}
.ghost-trail{position:absolute;pointer-events:none;z-index:8;opacity:.5;animation:ghost-fade .8s ease-out forwards;filter:blur(1px)}
.ghost-trail .agent-body{box-shadow:0 0 20px rgba(6,182,212,.6)!important;border-color:rgba(6,182,212,.4)!important}

@keyframes footstep-fade{0%{opacity:.8;transform:scale(1)}50%{opacity:.5}100%{opacity:0;transform:scale(.4)}}
@keyframes dust-expand{0%{opacity:.6;transform:scale(.5)}100%{opacity:0;transform:scale(3) translateY(-8px)}}
@keyframes dust-burst-expand{0%{opacity:.6;transform:scale(.4) translate(0,0)}100%{opacity:0;transform:scale(3.5) translate(var(--dx),var(--dy))}}
@keyframes ghost-fade{0%{opacity:.4;filter:blur(1px)}100%{opacity:0;filter:blur(4px)}}

/* ── Visitor agent ── */
.visitor-agent{z-index:15;filter:drop-shadow(0 0 12px rgba(148,163,184,.4))}
.visitor-agent .agent-body{width:48px;height:48px;border-radius:50%;border:2px solid rgba(148,163,184,.4);background:linear-gradient(135deg,rgba(30,41,59,.8),rgba(51,65,85,.6))!important;backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center}
.visitor-agent .agent-body-inner{display:none}
.visitor-agent .agent-emoji{font-size:24px;line-height:1}
.visitor-agent .agent-name{background:linear-gradient(135deg,rgba(148,163,184,.25),rgba(100,116,139,.2))!important;border:1px solid rgba(148,163,184,.3);font-size:10px;color:rgba(255,255,255,.8)}
.visitor-agent .agent-shadow{opacity:.5}
.visitor-bubble{background:linear-gradient(135deg,rgba(59,130,246,.15),rgba(99,102,241,.1))!important;border-color:rgba(59,130,246,.3)!important;max-width:220px!important;font-size:12px!important;color:#e2e8f0!important}
.visitor-bubble::after{background:rgba(59,130,246,.15)!important;border-color:rgba(59,130,246,.3)!important}
@keyframes visitor-appear{0%{opacity:0;transform:translate(-50%,-50%) scale(.7) translateY(20px)}100%{opacity:1;transform:translate(-50%,-50%) scale(1) translateY(0)}}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(148,163,184,.2);border-radius:2px}
::-webkit-scrollbar-thumb:hover{background:rgba(148,163,184,.3)}

@media(max-width:900px){main{grid-template-columns:1fr}.feed-pane{display:none}.stats-row{grid-template-columns:repeat(2,1fr)}
  .meeting-screen{max-width:calc(100% - 16px)!important;left:8px!important}
  .meeting-screen-agenda{font-size:12px;padding:8px 12px}
  .meeting-screen-body{max-height:200px;padding:6px 10px}
  .meeting-screen-line{font-size:11px;padding:5px 8px;gap:6px}
  .meeting-screen-line .line-agent{min-width:48px;font-size:10px}
  .meeting-screen-header{padding:8px 12px 6px}
  .meeting-screen-header .screen-title{font-size:9px}
}