@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Inter:wght@400;600&family=Press+Start+2P&family=VT323&family=Share+Tech+Mono&display=swap');
:root{--bg:#030508;--g:#00ff88;--p:#b040ff;--c:#00e5ff;--m:#e8a0b4;--o:#ffdd00;--b:#8b6cc6;--y:#ffdd00;--r:#ff3344;--t:#e0d0e8;--d:#8e94b5;
  --pf:'Orbitron', sans-serif;--mf:'Inter', sans-serif;--sf:'Share Tech Mono',monospace;
  --donna-deep:#080612;--donna-purple:#6c3baa;--donna-rose:#c98a7d;--donna-soft-rose:#e8a0b4;--donna-gold:#c9a96e;
  --glass:rgba(10,12,25,0.7);--glass-border:rgba(255,255,255,0.12);--neon-shadow:0 0 15px;
  --gold:#c9a96e;--gold-dim:rgba(201,169,110,.3);--gold-glow:rgba(201,169,110,.25)}
*{margin:0;padding:0;box-sizing:border-box}
body{background:#050310;color:var(--t);font-family:var(--mf);overflow:hidden;height:100vh;display:flex;flex-direction:column;user-select:none}
canvas#fx{position:fixed;inset:0;z-index:0;pointer-events:none}
.scan{position:fixed;inset:0;pointer-events:none;z-index:9999;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.03) 2px,rgba(0,0,0,.03) 4px)}

/* ═══ TOP BAR ═══ */
.top{display:flex;align-items:center;padding:0 18px;background:rgba(13,10,20,0.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--glass-border);height:32px;flex-shrink:0;z-index:200;position:relative;gap:15px;box-shadow:0 4px 30px rgba(0,0,0,0.5)}
.logo{font-family:var(--pf);font-size:10px;font-weight:700;color:var(--gold);letter-spacing:4px;text-shadow:0 0 15px rgba(201,169,110,.5);white-space:nowrap;text-transform:uppercase}
.top-c{display:flex;gap:12px;align-items:center;flex:1;justify-content:center}
.ts{font-size:14px;font-weight:700}
.top-r{display:flex;gap:8px;align-items:center;margin-left:auto}
.tp{padding:3px 10px;border-radius:3px;font-family:var(--pf);font-size:5.5px;letter-spacing:1px;white-space:nowrap}
.tp-on{background:rgba(201,138,125,.12);color:var(--donna-rose);border:1px solid rgba(201,138,125,.3)}
.tp-live{background:rgba(232,160,180,.12);color:var(--donna-soft-rose);border:1px solid rgba(232,160,180,.3);display:flex;align-items:center;gap:5px}
.tp-live::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--r);animation:blink 1s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
.tp-af{background:rgba(255,136,0,.08);color:var(--o);border:1px solid rgba(255,136,0,.25)}
.tp-ai{background:rgba(255,136,0,.1);color:#ff8800;border:1px solid rgba(255,136,0,.3);animation:aiBadgePulse 3s ease-in-out infinite}
@keyframes aiBadgePulse{0%,100%{box-shadow:0 0 3px rgba(255,136,0,.2)}50%{box-shadow:0 0 8px rgba(255,136,0,.4)}}
.clk{color:var(--c);font-family:var(--pf);font-size:12px;letter-spacing:2px;text-shadow:0 0 10px rgba(0,229,255,0.4)}
.c1{color:#00ff88;text-shadow:0 0 10px rgba(0,255,136,0.5)} 
.c2{color:#00e5ff;text-shadow:0 0 10px rgba(0,229,255,0.5)} 
.c3{color:#ffdd00;text-shadow:0 0 10px rgba(255,221,0,0.5)} 
.c4{color:#ff66aa;text-shadow:0 0 10px rgba(255,102,170,0.5)} 
.c5{color:#ff8800;text-shadow:0 0 10px rgba(255,136,0,0.5)} 
.c6{color:#b040ff;text-shadow:0 0 10px rgba(176,64,255,0.5)}
.strategy-banner{display:flex;align-items:center;gap:12px;background:rgba(255,136,0,0.1);border:1px solid rgba(255,136,0,0.4);padding:4px 16px;border-radius:30px;margin-left:20px;box-shadow:0 0 15px rgba(255,136,0,0.2)}
.st-label{font-family:var(--pf);font-size:6px;font-weight:700;color:#ff8800;letter-spacing:2px;text-shadow:0 0 8px rgba(255,136,0,0.4)}
.st-text{font-family:var(--mf);font-size:14px;font-weight:600;color:rgba(255,255,255,0.9);letter-spacing:0.5px}

/* ═══ FLAT 2D LAYOUT ═══ */
.wrap{display:flex;flex:1;overflow:hidden;z-index:1}
/* Corridor floor — visible tiled hallway between rooms */
.ofc{flex:1;padding:8px;overflow:hidden;position:relative;
  background:#050310;background-image:
    radial-gradient(circle at 2px 2px, rgba(255,255,255,0.03) 1px, transparent 0);
  background-size: 32px 32px;
}
.ofc::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 1px,rgba(0,229,255,0.01) 1px,rgba(0,229,255,0.01) 2px);pointer-events:none;z-index:1}
.grid{width:100%;height:100%;display:grid;gap:7px;
  perspective:1200px;transform-style:preserve-3d;
  grid-template-columns:1fr 1.3fr 1fr 1.6fr;
  grid-template-rows:1.2fr .5fr .5fr 1.1fr;
  grid-template-areas:"ceo live coo data""open open open hq""open open open hq""dev studio attend fin"}

/* ═══ ROOMS — Realistic building ═══ */
.rm{position:relative;border-radius:8px;overflow:visible;
  transform:rotateX(1deg);transform-style:preserve-3d;
  background:rgba(15,18,35,0.4);backdrop-filter:blur(8px);
  border:1px solid var(--glass-border);box-shadow:0 8px 32px rgba(0,0,0,0.3)}
.rm::before{content:'';position:absolute;inset:0;border-radius:8px;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:20px 20px;pointer-events:none;z-index:0}
.rm::after{content:'';position:absolute;bottom:0;left:0;right:0;height:4px;border-radius:0 0 8px 8px;
  background:linear-gradient(180deg,transparent,rgba(0,229,255,0.05));pointer-events:none;z-index:1}
/* Wall top edge — visible wall line */
.rm-wall-top{position:absolute;top:0;left:0;right:0;height:4px;border-radius:6px 6px 0 0;z-index:1;
  background:linear-gradient(180deg,rgba(60,70,100,.5),rgba(30,35,50,.2));pointer-events:none;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.04)}
/* Wall left edge */
.rm-wall-left{position:absolute;top:0;left:0;bottom:0;width:4px;border-radius:6px 0 0 6px;z-index:1;
  background:linear-gradient(90deg,rgba(60,70,100,.5),rgba(30,35,50,.1));pointer-events:none;
  box-shadow:inset -1px 0 0 rgba(255,255,255,.03)}
/* Ceiling light strip */
.rm-ceiling{position:absolute;top:6px;left:20%;right:20%;height:2px;z-index:1;
  background:rgba(255,255,255,.06);border-radius:1px;pointer-events:none;
  box-shadow:0 0 8px rgba(255,255,255,.03),0 2px 12px rgba(255,255,255,.015)}
.rl{position:absolute;top:0px;left:0px;font-family:var(--pf);font-size:9px;font-weight:700;letter-spacing:2px;z-index:5;text-transform:uppercase;color:#fff;
  background:rgba(0,0,0,0.8);padding:5px 15px;border-radius:0 0 10px 0;border:1px solid var(--glass-border);border-top:0;border-left:0;
  text-shadow:0 0 10px currentColor;box-shadow:5px 5px 15px rgba(0,0,0,0.4)}
/* Room corner connectors */
.pl{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--donna-rose);box-shadow:0 0 6px rgba(201,138,125,.4);z-index:20}
.pl.tl{top:-4px;left:-4px} .pl.tr{top:-4px;right:-4px} .pl.bl{bottom:-4px;left:-4px} .pl.br{bottom:-4px;right:-4px}

/* Room floor styles — each room has distinct flooring */
/* CEO — dark marble floor (stronger) */
.r-ceo{grid-area:ceo;border:3px solid rgba(176,64,255,.45);border-radius:6px;
  background:linear-gradient(135deg,#0d0820 0%,#100a22 50%,#080c14 100%);
  box-shadow:inset 0 0 40px rgba(176,64,255,.06),inset 0 -4px 8px rgba(0,0,0,.35)}
/* ═══ ULTRA-VISIBLE FLOOR PATTERNS ═══ */

/* CEO — Purple marble checkerboard */
.r-ceo::before{background-image:
  linear-gradient(45deg,rgba(176,64,255,.08) 25%,transparent 25%,transparent 75%,rgba(176,64,255,.08) 75%),
  linear-gradient(45deg,rgba(176,64,255,.08) 25%,transparent 25%,transparent 75%,rgba(176,64,255,.08) 75%),
  linear-gradient(rgba(176,64,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(176,64,255,.04) 1px,transparent 1px);
  background-size:26px 26px,26px 26px,13px 13px,13px 13px;background-position:0 0,13px 13px,0 0,0 0}
.r-ceo .rl{color:var(--p)}

/* Live — Herringbone wood planks */
.r-live{grid-area:live;border:3px solid rgba(68,136,255,.45);border-radius:6px;
  background:linear-gradient(135deg,#0a0e1e,#0c1024);
  box-shadow:inset 0 0 50px rgba(68,136,255,.1),inset 0 -4px 8px rgba(0,0,0,.4)}
.r-live::before{background-image:
  repeating-linear-gradient(45deg,rgba(139,100,50,.07) 0px,rgba(139,100,50,.07) 2px,transparent 2px,transparent 8px),
  repeating-linear-gradient(-45deg,rgba(139,100,50,.05) 0px,rgba(139,100,50,.05) 2px,transparent 2px,transparent 8px),
  repeating-linear-gradient(0deg,rgba(68,136,255,.04) 0px,rgba(68,136,255,.04) 1px,transparent 1px,transparent 4px);
  background-size:8px 8px,8px 8px,100% 4px}
.r-live .rl{color:var(--c)}

/* COO — Wood plank floor */
.r-coo{grid-area:coo;border:3px solid rgba(0,255,136,.45);border-radius:6px;
  background:linear-gradient(135deg,#06100e 0%,#081410 50%,#080c14 100%);
  box-shadow:inset 0 0 50px rgba(0,255,136,.1),inset 0 -4px 8px rgba(0,0,0,.4)}
.r-coo::before{background-image:
  repeating-linear-gradient(90deg,rgba(139,90,43,.12) 0px,rgba(139,90,43,.12) 18px,rgba(139,90,43,.04) 18px,rgba(139,90,43,.04) 20px),
  repeating-linear-gradient(0deg,rgba(0,255,136,.03) 0px,transparent 1px,transparent 20px);
  background-size:20px 100%,100% 20px}
.r-coo .rl{color:var(--g)}

/* Data Center — Cyan raised floor grid */
.r-data{grid-area:data;border:3px solid rgba(0,229,255,.45);border-radius:6px;
  background:linear-gradient(135deg,#04081c,#060c20);
  box-shadow:inset 0 0 50px rgba(0,229,255,.1),inset 0 -4px 8px rgba(0,0,0,.4)}
.r-data::before{background-image:
  linear-gradient(rgba(0,229,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(0,229,255,.1) 1px,transparent 1px),
  linear-gradient(rgba(0,229,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,229,255,.04) 1px,transparent 1px);
  background-size:18px 18px,18px 18px,6px 6px,6px 6px}
.r-data .rl{color:var(--c)}

/* Open Office — Commercial neutral */
.r-open{grid-area:open;border:3px solid rgba(176,64,255,.35);border-radius:6px;
  background:#080614;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:1fr 1fr;gap:4px;padding:16px 4px 4px 4px;
  box-shadow:inset 0 0 40px rgba(176,64,255,.06),inset 0 -4px 8px rgba(0,0,0,.4)} .r-open>.rl{z-index:12}

/* MLD TV — Studio concrete */
.r-hq{grid-area:hq;border:3px solid rgba(201,138,125,.5);border-radius:6px;
  background:linear-gradient(135deg,#140a10 0%,#120810 50%,#0e060c 100%);
  box-shadow:inset 0 0 60px rgba(201,138,125,.1),inset 0 -4px 8px rgba(0,0,0,.4)} .r-hq .rl{color:var(--donna-rose);font-size:6px}

/* Dev — Blue anti-static vinyl dots */
.r-dev{grid-area:dev;border:3px solid rgba(0,150,255,.45);border-radius:6px;
  background:linear-gradient(135deg,#080e1c,#0a1224);
  box-shadow:inset 0 0 50px rgba(0,150,255,.1),inset 0 -4px 8px rgba(0,0,0,.4)}
.r-dev::before{background-image:
  radial-gradient(rgba(0,150,255,.08) 1.5px,transparent 1.5px),
  linear-gradient(rgba(0,150,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,150,255,.04) 1px,transparent 1px);
  background-size:10px 10px,20px 20px,20px 20px}
.r-dev .rl{color:#4499ff}

/* Studio Foto — Purple polished concrete */
.r-studio{grid-area:studio;border:3px solid rgba(176,64,255,.45);border-radius:6px;
  background:linear-gradient(135deg,#0e0824 0%,#0c0722 50%,#080c1a 100%);
  box-shadow:inset 0 0 50px rgba(176,64,255,.1),inset 0 -4px 8px rgba(0,0,0,.4)} .r-studio .rl{color:var(--p)}

/* Atendimento VIP — Pink luxury marble */
.r-attend{grid-area:attend;border:3px solid rgba(255,0,170,.4);border-radius:6px;
  background:linear-gradient(135deg,#0e081c,#100a20);
  box-shadow:inset 0 0 50px rgba(255,0,170,.08),inset 0 -4px 8px rgba(0,0,0,.4)}
.r-attend::before{background-image:
  linear-gradient(45deg,rgba(255,0,170,.07) 25%,transparent 25%,transparent 75%,rgba(255,0,170,.07) 75%),
  linear-gradient(45deg,rgba(255,0,170,.07) 25%,transparent 25%,transparent 75%,rgba(255,0,170,.07) 75%);
  background-size:22px 22px;background-position:0 0,11px 11px}
.r-attend .rl{color:#ff55aa}

/* Operações & Finanças — Orange stone tile */
.r-fin{grid-area:fin;border:3px solid rgba(255,136,0,.45);border-radius:6px;
  background:linear-gradient(135deg,#161008,#100c06);
  box-shadow:inset 0 0 50px rgba(255,136,0,.1),inset 0 -4px 8px rgba(0,0,0,.4)}
.r-fin .rl{color:var(--o)}

/* Workstation cubicle — enhanced */
.oc{position:relative;background:rgba(10,6,20,.65);border:1px solid rgba(176,64,255,.18);overflow:visible;border-radius:4px;
  box-shadow:inset 0 -2px 6px rgba(0,0,0,.3),inset 0 0 14px rgba(176,64,255,.03)}
.oc-l{position:absolute;top:2px;left:4px;font-family:var(--pf);font-size:5px;letter-spacing:1px;color:var(--d);z-index:5;
  background:rgba(0,0,0,.6);padding:1px 4px;border-radius:2px;
  -webkit-font-smoothing:antialiased}

/* Door — Real office door with handle & glass */
.door{position:absolute;z-index:25;width:16px;height:5px;border-radius:1px;
  background:linear-gradient(90deg,#1a2030,#2a3450,#222a40,#2a3450,#1a2030);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 1px 3px rgba(0,0,0,.4),inset 0 0 4px rgba(255,255,255,.02)}
.door::before{content:'';position:absolute;top:50%;right:3px;transform:translateY(-50%);
  width:3px;height:3px;border-radius:50%;
  background:radial-gradient(#c4a44a,#8a7030);box-shadow:0 0 3px rgba(196,164,74,.3)}
.door::after{content:'';position:absolute;top:0;left:3px;width:6px;height:100%;
  background:rgba(100,160,255,.04);border:1px solid rgba(100,160,255,.06);border-radius:0}
.door.door-v{width:5px;height:16px}
.door.door-v::before{bottom:3px;top:auto;right:50%;transform:translateX(50%)}
.door.door-v::after{top:3px;left:0;width:100%;height:6px}


/* ═══ FURNITURE — Premium Bigtech Agency ═══ */

/* Desk — Walnut executive with drawer & shine */
.dk{position:absolute;height:28px;border-radius:3px;
  background:linear-gradient(180deg,#2a3658 0%,#1e2a44 40%,#18223a 100%);
  border:1px solid #344070;
  box-shadow:0 5px 10px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.04)}
/* desk surface reflection */
.dk::before{content:'';position:absolute;top:0;left:0;right:0;height:40%;
  background:linear-gradient(180deg,rgba(255,255,255,.04),transparent);border-radius:3px 3px 0 0}
/* desk drawer handle */
.dk::after{content:'';position:absolute;bottom:4px;left:50%;transform:translateX(-50%);
  width:12px;height:2px;background:linear-gradient(90deg,transparent,rgba(196,164,74,.2),rgba(196,164,74,.35),rgba(196,164,74,.2),transparent);
  border-radius:1px}

/* Monitor — Ultra-thin bezel with webcam */
.mn{position:absolute;width:24px;height:20px;border-radius:2px 2px 0 0;
  background:#060a16;border:2px solid #1e2a44;
  box-shadow:0 3px 8px rgba(0,0,0,.5),inset 0 0 1px rgba(255,255,255,.05)}
/* webcam dot */
.mn::before{content:'';position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  width:2px;height:2px;border-radius:50%;background:#0a1428;
  box-shadow:0 0 2px rgba(0,229,255,.3)}
/* monitor stand */
.mn::after{content:'';position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);
  width:10px;height:5px;background:linear-gradient(180deg,#1a2438,#141e30);
  border-radius:0 0 3px 3px;border:1px solid #1e2a40;border-top:0}

/* Chair — Executive with armrests & cushion */
.chr{position:absolute;width:18px;height:18px;border-radius:50%;
  background:radial-gradient(ellipse at 40% 40%,#2a3658,#1e2844,#141e34);
  border:1px solid #354070;
  box-shadow:0 3px 6px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.04)}
/* armrests — two side bumps */
.chr::before{content:'';position:absolute;top:50%;left:-3px;transform:translateY(-50%);
  width:3px;height:8px;background:#1e2844;border-radius:2px 0 0 2px;
  box-shadow:21px 0 0 #1e2844}
/* castors — 5 wheel dots */
.chr::after{content:'';position:absolute;bottom:-2px;left:2px;width:2px;height:2px;
  border-radius:50%;background:#2a3050;
  box-shadow:12px 0 0 #2a3050,6px 2px 0 #2a3050,3px -1px 0 #2a3050,9px -1px 0 #2a3050}

/* Monitor screen glow colors */
.ms{position:absolute;inset:2px;border-radius:1px;animation:msa 4s infinite alternate}
@keyframes msa{0%{opacity:.5}30%{opacity:1}60%{opacity:.8}100%{opacity:.6}}
.ms.sg{background:linear-gradient(#082e12,#04180a);box-shadow:inset 0 0 8px rgba(0,255,136,.5)}
.ms.sc{background:linear-gradient(#081228,#040e18);box-shadow:inset 0 0 8px rgba(0,229,255,.5)}
.ms.sp{background:linear-gradient(#140a28,#0c0618);box-shadow:inset 0 0 8px rgba(176,64,255,.5)}
.ms.so{background:linear-gradient(#281808,#180e04);box-shadow:inset 0 0 8px rgba(255,136,0,.5)}
.ms.sm{background:linear-gradient(#280814,#180410);box-shadow:inset 0 0 8px rgba(255,0,170,.5)}

.srv{position:absolute;width:22px;height:38px;background:linear-gradient(#0e1428,#0a0e1a);border:1px solid #1e2a48;border-radius:3px}
.srv-l{position:absolute;top:5px;left:5px;display:flex;flex-direction:column;gap:5px}
.ld{width:6px;height:4px;border-radius:1px;animation:lb 1.5s infinite}
.ld:nth-child(2){animation-delay:.4s} .ld:nth-child(3){animation-delay:.8s}
@keyframes lb{0%,100%{opacity:1;box-shadow:0 0 5px}50%{opacity:.15}}
.mtbl{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:62%;height:52%;
  border:3px solid rgba(68,136,255,.5);border-radius:50%;
  background:radial-gradient(ellipse,#0e1830 0%,#0a1220 60%,#060a16 100%);
  box-shadow:0 0 25px rgba(68,136,255,.15),0 0 50px rgba(68,136,255,.06),
    inset 0 0 20px rgba(68,136,255,.06),0 6px 14px rgba(0,0,0,.5);
  animation:tableLed 2.5s ease-in-out infinite}
@keyframes tableLed{
  0%,100%{border-color:rgba(68,136,255,.3);box-shadow:0 0 20px rgba(68,136,255,.08),0 0 40px rgba(68,136,255,.03),inset 0 0 15px rgba(68,136,255,.04)}
  50%{border-color:rgba(68,136,255,.9);box-shadow:0 0 30px rgba(68,136,255,.25),0 0 60px rgba(68,136,255,.1),inset 0 0 25px rgba(68,136,255,.1)}}
/* center LED line */
.mtbl::before{content:'';position:absolute;top:15%;left:50%;transform:translateX(-50%);width:1px;height:70%;
  background:linear-gradient(180deg,transparent,rgba(68,170,255,.25),rgba(100,180,255,.35),rgba(68,170,255,.25),transparent);
  animation:tableLed 2.5s ease-in-out infinite}
/* surface reflection — clean futuristic */
.mtbl::after{content:'';position:absolute;top:0;left:0;right:0;height:40%;border-radius:50% 50% 0 0;
  background:linear-gradient(180deg,rgba(255,255,255,.04),transparent);pointer-events:none}
.brd{position:absolute;background:#060a16;border:1px solid;border-radius:3px;overflow:hidden}
.bb{height:6px;border-radius:3px;margin:3px 6px;animation:bbg 4s infinite alternate;opacity:.8;transform-origin:left}
@keyframes bbg{0%{transform:scaleX(.25)}100%{transform:scaleX(1)}}
.brd-txt{padding:5px 7px;font-family:var(--pf);font-size:5px;line-height:2.2;opacity:.7}
.ring{position:absolute;border:4px solid var(--p);border-radius:50%;box-shadow:0 0 30px rgba(176,64,255,.4),inset 0 0 20px rgba(176,64,255,.1);animation:rg 4s infinite}
@keyframes rg{0%,100%{opacity:.3;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}
.swch{position:absolute;display:grid;gap:4px} .swi{width:10px;height:10px;border-radius:2px;opacity:.85}
.tro{position:absolute;font-size:16px;filter:drop-shadow(0 0 8px rgba(255,221,0,.5))}
/* Whiteboard */
.wb{position:absolute;background:rgba(20,28,50,.8);border:1px solid rgba(0,229,255,.2);border-radius:2px;box-shadow:inset 0 0 8px rgba(0,229,255,.06)}
.wb::before{content:'';position:absolute;inset:3px;background:repeating-linear-gradient(180deg,transparent,transparent 5px,rgba(0,229,255,.06) 5px,rgba(0,229,255,.06) 6px);border-radius:1px}
.wb::after{content:'📌';position:absolute;top:1px;right:2px;font-size:5px}
/* Bookshelf */
.bksh{position:absolute;width:18px;height:28px;background:linear-gradient(180deg,#1a1428,#0e0a18);border:1px solid #2a2040;border-radius:3px;overflow:hidden}
.bksh::before{content:'';position:absolute;inset:2px;background:repeating-linear-gradient(180deg,#e91e63 0px,#e91e63 4px,#3f51b5 4px,#3f51b5 8px,#4caf50 8px,#4caf50 12px,#ff9800 12px,#ff9800 16px,#2196f3 16px,#2196f3 20px);opacity:.35;border-radius:1px}
/* Indoor plant */
.plnt{position:absolute;font-size:16px;filter:drop-shadow(0 0 6px rgba(0,255,136,.3));z-index:5}
/* Camera tripod */
.cam{position:absolute;font-size:14px;filter:drop-shadow(0 0 4px rgba(176,64,255,.3));z-index:5}
/* Area rug */
.rug{position:absolute;border-radius:3px;pointer-events:none;z-index:0}
/* Keyboard */
.kb{position:absolute;width:20px;height:8px;background:#0e1420;border:1px solid #1e2840;border-radius:2px;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0px,rgba(255,255,255,.04) 3px,transparent 3px,transparent 4px);z-index:2}
/* Coffee cup */
.cup{position:absolute;font-size:8px;z-index:3;filter:drop-shadow(0 0 3px rgba(255,136,0,.2))}
/* Desk lamp */
.lamp{position:absolute;width:4px;height:18px;background:linear-gradient(180deg,#2a3040,#1a2030);border-radius:2px;z-index:3}
.lamp::before{content:'';position:absolute;top:-5px;left:-5px;width:14px;height:8px;background:#1e2838;border-radius:10px 10px 2px 2px;
  box-shadow:0 5px 12px rgba(255,200,100,.1)}
.lamp::after{content:'';position:absolute;bottom:0;left:-4px;width:12px;height:4px;background:#1a2030;border-radius:50%}
/* Filing cabinet */
.filing{position:absolute;width:20px;height:30px;background:linear-gradient(180deg,#1a2038,#0e1420);border:1px solid #2a3050;border-radius:3px}
.filing::before{content:'';position:absolute;top:4px;left:3px;right:3px;height:1px;background:#2a3850;box-shadow:0 6px 0 #2a3850,0 12px 0 #2a3850,0 18px 0 #2a3850}
.filing::after{content:'';position:absolute;top:4px;right:3px;width:3px;height:3px;background:#3a4a60;border-radius:1px;box-shadow:0 6px 0 #3a4a60,0 12px 0 #3a4a60,0 18px 0 #3a4a60}
/* Sofa / waiting couch */
.sofa{position:absolute;width:44px;height:20px;background:linear-gradient(180deg,#1e2844,#141c30);border:1px solid #2a3858;border-radius:5px 5px 2px 2px}
.sofa::before{content:'';position:absolute;top:-4px;left:1px;right:1px;height:6px;background:#1a2440;border-radius:8px 8px 0 0;border:1px solid #2a3858;border-bottom:none}
/* Projector screen */
.projector{position:absolute;background:#0a0e1e;border:1px solid rgba(68,136,255,.2);border-radius:2px;overflow:hidden}
.projector::before{content:'';position:absolute;inset:2px;background:linear-gradient(135deg,rgba(68,136,255,.04),transparent);border-radius:1px}
.projector::after{content:'▶';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:6px;color:rgba(68,136,255,.3)}
/* Water dispenser */
.water{position:absolute;font-size:8px;z-index:3}
/* Cable tray */
.cable{position:absolute;background:repeating-linear-gradient(90deg,rgba(0,229,255,.06) 0px,rgba(0,229,255,.06) 8px,transparent 8px,transparent 16px);z-index:0}
/* Audio mixer */
.mixer{position:absolute;width:18px;height:14px;background:linear-gradient(180deg,#1a1e28,#0e1018);border:1px solid #2a2e38;border-radius:2px}
.mixer::before{content:'';position:absolute;top:2px;left:2px;right:2px;height:8px;
  background:repeating-linear-gradient(90deg,rgba(0,255,136,.15) 0px,rgba(0,255,136,.15) 1px,transparent 1px,transparent 3px);border-radius:1px}
/* Design tablet */
.tablet{position:absolute;width:22px;height:16px;background:#0a0e1e;border:1px solid rgba(176,64,255,.2);border-radius:3px}
.tablet::before{content:'';position:absolute;inset:2px;background:linear-gradient(135deg,rgba(176,64,255,.06),rgba(0,229,255,.04));border-radius:2px}
/* Notepad */
.notepad{position:absolute;width:14px;height:18px;background:#f5f0e0;border:1px solid #d0c8a0;border-radius:2px;opacity:.3}
.notepad::before{content:'';position:absolute;top:3px;left:2px;right:2px;height:13px;
  background:repeating-linear-gradient(180deg,transparent,transparent 3px,rgba(0,0,0,.1) 3px,rgba(0,0,0,.1) 4px)}
/* Standing desk (taller variant) */
.dk-stand{border-bottom:2px solid #3a4868}
/* Reception desk (wider, taller) */
.dk-recv{background:linear-gradient(180deg,#1e2848,#141c30);border:1px solid #3a4868;border-radius:4px}
/* Executive chair */
.chr-ex{width:18px;height:18px;border:2px solid #3a4060;box-shadow:0 0 5px rgba(68,136,255,.1)}
/* Studio light */
.light{position:absolute;font-size:12px;z-index:3;filter:drop-shadow(0 0 6px rgba(255,200,100,.3))}
/* Studio backdrop */
.backdrop{position:absolute;z-index:0}
/* Picture frame */
.pic{position:absolute;width:18px;height:14px;background:#0a0e18;border:1px solid;border-radius:2px}
.pic::before{content:'';position:absolute;inset:2px;background:linear-gradient(135deg,rgba(176,64,255,.08),rgba(0,229,255,.06));border-radius:1px}
/* Coffee machine */
.coffee{position:absolute;font-size:14px;z-index:3;filter:drop-shadow(0 0 4px rgba(255,136,0,.2))}
/* Mixer scaled */
.mixer{width:24px;height:18px}

/* ═══ FASHION BRAND ELEMENTS — Madame La Donna HQ ═══ */
/* Dress mannequin */
.mannequin{position:absolute;width:14px;height:30px;z-index:4}
.mannequin::before{content:'';position:absolute;top:0;left:2px;width:10px;height:18px;
  background:linear-gradient(180deg,#2a1828,#1a0e18);border:1px solid #3a2840;
  border-radius:4px 4px 8px 8px;box-shadow:inset 0 0 4px rgba(176,64,255,.08)}
.mannequin::after{content:'';position:absolute;bottom:0;left:5px;width:4px;height:14px;
  background:linear-gradient(180deg,#1a1228,#0e0a14);border-radius:2px}
/* Fabric roll */
.fabric{position:absolute;width:20px;height:10px;border-radius:5px;
  background:repeating-linear-gradient(45deg,rgba(176,64,255,.12),rgba(176,64,255,.12) 3px,rgba(255,0,170,.08) 3px,rgba(255,0,170,.08) 6px);
  border:1px solid rgba(176,64,255,.2);box-shadow:0 1px 3px rgba(0,0,0,.2)}
/* Mood board */
.moodboard{position:absolute;background:rgba(30,22,18,.8);border:1px solid #3a2828;border-radius:2px;overflow:hidden}
.moodboard::before{content:'';position:absolute;inset:2px;
  background:repeating-linear-gradient(135deg,rgba(255,136,0,.04),rgba(255,136,0,.04) 4px,transparent 4px,transparent 8px);border-radius:1px}
.moodboard::after{content:'📌';position:absolute;top:1px;left:2px;font-size:4px;
  text-shadow:6px 4px 0 #e91e63,12px 2px 0 #9c27b0,4px 8px 0 #4caf50}
/* Perfume bottle */
.perfume{position:absolute;width:8px;height:16px;z-index:3}
.perfume::before{content:'';position:absolute;bottom:0;left:0;width:8px;height:12px;
  background:linear-gradient(135deg,rgba(176,64,255,.15),rgba(255,0,170,.1));
  border:1px solid rgba(176,64,255,.25);border-radius:2px 2px 4px 4px}
.perfume::after{content:'';position:absolute;top:0;left:2px;width:4px;height:6px;
  background:#2a1830;border-radius:1px 1px 0 0;border:1px solid #3a2840}
/* Vanity mirror */
.mirror{position:absolute;width:12px;height:18px;z-index:3}
.mirror::before{content:'';position:absolute;top:0;left:1px;width:10px;height:12px;
  background:radial-gradient(ellipse,rgba(200,220,255,.08),rgba(100,150,200,.03));
  border:1px solid rgba(200,220,255,.2);border-radius:50%;
  box-shadow:0 0 6px rgba(200,220,255,.06)}
.mirror::after{content:'';position:absolute;bottom:0;left:4px;width:4px;height:8px;
  background:#1a1828;border-radius:1px}
/* Garment rack */
.grack{position:absolute;height:3px;background:#2a2040;border-radius:2px;z-index:3;
  box-shadow:0 1px 0 rgba(176,64,255,.1)}
.grack::before{content:'';position:absolute;top:3px;left:2px;width:2px;height:12px;
  background:#1a1428;border-radius:1px;box-shadow:calc(100% - 6px) 0 0 #1a1428}
/* Lookbook display */
.lookbook{position:absolute;width:12px;height:16px;background:#0e0814;
  border:1px solid rgba(255,0,170,.15);border-radius:2px;overflow:hidden}
.lookbook::before{content:'';position:absolute;inset:2px;
  background:linear-gradient(180deg,rgba(255,0,170,.06),rgba(176,64,255,.04));border-radius:1px}
.lookbook::after{content:'MLD';position:absolute;bottom:1px;left:1px;font-size:3px;
  font-family:var(--pf);color:rgba(255,0,170,.3);letter-spacing:.5px}

/* ═══════════════════════════════════════════════════
   AGENTS — SUPREME HUMANIZED CHIBI
   Detailed human characters with nose, ears, eyelids,
   clothing details, star badges — Madame La Donna HQ
   ═══════════════════════════════════════════════════ */
.ag{position:absolute;z-index:10;cursor:pointer;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));
  transition:filter .3s,transform .3s}
.ag:hover{filter:drop-shadow(0 6px 14px rgba(0,0,0,.6)) drop-shadow(0 0 12px var(--glow,rgba(0,229,255,.2)));
  transform:scale(1.12) translateY(-2px)}
.ag:hover .ag-card{opacity:1;transform:translateY(0) scale(1)}
.ag-w{display:flex;flex-direction:column;align-items:center;transition:transform .15s}

/* Status indicator */
.ag-dot{width:5px;height:5px;border-radius:50%;margin-bottom:1px;
  box-shadow:0 0 4px currentColor;animation:ad 2.5s ease-in-out infinite}
@keyframes ad{0%,100%{opacity:1;box-shadow:0 0 6px}50%{opacity:.3;box-shadow:0 0 2px}}

/* Sprite container — smaller for proportionality */
.ag-spr{display:flex;flex-direction:column;align-items:center;animation:breathe 4s ease-in-out infinite;
  transform-origin:top center;transform:scale(.62);image-rendering:auto}
@keyframes breathe{0%,100%{transform:scale(.62) translateY(0)}50%{transform:scale(.62) translateY(-1px)}}

/* ── HAIR — distinct styles, narrower ── */
.ag-hair{width:28px;height:14px;border-radius:14px 14px 0 0;margin-bottom:-5px;z-index:3;position:relative;
  box-shadow:inset 0 -3px 5px rgba(0,0,0,.3),0 -1px 2px rgba(0,0,0,.15)}
.ag-hair::before{content:'';position:absolute;top:2px;left:5px;width:9px;height:3px;
  background:rgba(255,255,255,.12);border-radius:8px;transform:rotate(-8deg)}
/* Long */
.ag-hair[data-style="long"]{height:16px;border-radius:14px 14px 2px 2px;width:30px}
.ag-hair[data-style="long"]::after{content:'';position:absolute;bottom:-14px;left:-1px;width:5px;height:17px;
  background:inherit;border-radius:0 0 4px 4px;box-shadow:25px 0 0;filter:brightness(.85)}
/* Short */
.ag-hair[data-style="short"]{height:10px;border-radius:12px 12px 2px 2px}
/* Spiky */
.ag-hair[data-style="spiky"]{height:14px;border-radius:4px;
  clip-path:polygon(5% 100%,0% 40%,15% 55%,20% 10%,35% 50%,45% 0%,55% 50%,65% 10%,80% 55%,95% 40%,100% 100%)}
/* Curly */
.ag-hair[data-style="curly"]{height:16px;border-radius:15px 15px 4px 4px;width:30px;
  background-image:radial-gradient(circle at 20% 30%,rgba(255,255,255,.1) 2px,transparent 2px),
    radial-gradient(circle at 50% 20%,rgba(255,255,255,.08) 2px,transparent 2px),
    radial-gradient(circle at 80% 35%,rgba(255,255,255,.1) 2px,transparent 2px)}
/* Bun */
.ag-hair[data-style="bun"]{height:12px;border-radius:14px 14px 2px 2px}
.ag-hair[data-style="bun"]::after{content:'';position:absolute;top:-8px;left:50%;transform:translateX(-50%);
  width:10px;height:10px;background:inherit;border-radius:50%;box-shadow:inset 0 -2px 4px rgba(0,0,0,.25)}

/* ── HEAD — narrower, taller oval for human look ── */
.ag-hd{width:26px;height:30px;border-radius:12px 12px 10px 10px;position:relative;z-index:2;
  background:linear-gradient(180deg,var(--skin,#f5d0a9) 0%,var(--skin-mid,#eab890) 40%,var(--skin-dark,#d9a575) 100%);
  box-shadow:inset 0 -3px 5px rgba(0,0,0,.08),0 2px 3px rgba(0,0,0,.1)}
/* Eyebrows */
.ag-hd::before{content:'';position:absolute;top:7px;left:4px;width:5px;height:1.5px;
  background:rgba(50,30,15,.3);border-radius:3px 3px 1px 1px;
  box-shadow:12px 0 0 rgba(50,30,15,.3)}
/* Cheek blush */
.ag-hd::after{content:'';position:absolute;bottom:7px;left:1px;width:5px;height:3px;
  background:rgba(255,120,120,.18);border-radius:50%;box-shadow:18px 0 0 rgba(255,120,120,.18)}

/* ── EARS — match skin tone ── */
.ag-ear{position:absolute;width:5px;height:7px;border-radius:50%;z-index:1;
  background:linear-gradient(180deg,var(--skin-mid,#eab890),var(--skin-dark,#d4a070));
  box-shadow:inset 0 0 2px rgba(0,0,0,.15)}
.ag-ear.ear-l{left:-3px;top:10px}
.ag-ear.ear-r{right:-3px;top:10px}

/* ── EYES — adjusted for narrower face ── */
.ag-eyes{position:absolute;top:10px;left:2px;right:2px;display:flex;justify-content:space-between;padding:0 2px;z-index:3}
.ag-eye{width:8px;height:9px;background:#fff;border-radius:50%;position:relative;
  box-shadow:inset 0 2px 2px rgba(0,0,0,.08),0 -1px 0 rgba(80,50,30,.2);
  animation:blinke 4.5s ease-in-out infinite}
/* Iris with gradient */
.ag-eye::before{content:'';position:absolute;top:2px;left:1.5px;width:5px;height:5px;
  background:radial-gradient(circle at 40% 40%,var(--iris-light,#5a88cc),var(--iris,#3a5888));
  border-radius:50%;box-shadow:inset 0 -1px 1px rgba(0,0,0,.25)}
/* Pupil + catchlight */
.ag-eye::after{content:'';position:absolute;top:3px;left:3px;width:2.5px;height:2.5px;
  background:#0a0a0a;border-radius:50%;box-shadow:1px -1px 0 1px rgba(255,255,255,.85)}
@keyframes blinke{0%,38%,42%,100%{transform:scaleY(1)}40%{transform:scaleY(.06)}}

/* ── NOSE ── */
.ag-nose{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
  width:3px;height:4px;z-index:4;
  background:linear-gradient(180deg,transparent,rgba(180,130,100,.15));
  border-radius:0 0 2px 2px}
.ag-nose::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:4px;height:1.5px;border-bottom:1px solid rgba(160,110,80,.12);border-radius:50%}

/* ── MOUTH ── */
.ag-mouth{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);
  width:6px;height:2px;border-bottom:1.5px solid rgba(170,90,70,.4);border-radius:0 0 4px 4px}
.ag-mouth[data-expr="smile"]{width:8px;height:3px;border-bottom:2px solid rgba(180,100,80,.4);border-radius:0 0 6px 6px}
.ag-mouth[data-expr="open"]{width:5px;height:4px;background:rgba(120,50,40,.35);border-radius:50%;border:none}
/* Upper lip line */
.ag-mouth::before{content:'';position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  width:4px;height:1px;border-top:0.5px solid rgba(160,90,70,.15);border-radius:50%}

/* ── NECK — slimmer ── */
.ag-neck{width:9px;height:5px;background:linear-gradient(180deg,var(--skin-dark,#d9a575),var(--skin-darker,#c88a5a));margin-top:-1px;z-index:1;
  position:relative;border-radius:0 0 2px 2px}

/* ── BODY — slimmer, taller torso ── */
.ag-bd{width:28px;height:28px;border-radius:5px 5px 3px 3px;margin-top:-1px;position:relative;z-index:1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -3px 5px rgba(0,0,0,.12)}
/* Collar V-neck */
.ag-bd::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:10px;height:5px;border-bottom:1.5px solid rgba(255,255,255,.1);border-radius:0 0 5px 5px}
/* Button line + shoulder seam */
.ag-bd::after{content:'';position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:1px;height:16px;background:rgba(0,0,0,.06);
  box-shadow:-11px -4px 0 rgba(255,255,255,.04),11px -4px 0 rgba(255,255,255,.04)}

/* ── ARMS — thinner, more human ── */
.ag-arms{position:absolute;top:0;left:-7px;right:-7px;height:24px}
.ag-arm{position:absolute;width:7px;border-radius:4px;top:0;transform-origin:top center;overflow:hidden}
.ag-arm.l{left:0} .ag-arm.r{right:0}
.ag-arm .sleeve{width:100%;height:12px;border-radius:4px 4px 0 0;
  box-shadow:inset 0 -1px 2px rgba(0,0,0,.08)}
.ag-arm .skin{width:100%;height:12px;background:linear-gradient(180deg,var(--skin-mid,#eab890),var(--skin-dark,#d4a070));border-radius:0 0 4px 4px}
.ag-arm .hand{position:absolute;bottom:-1px;left:0;width:6px;height:6px;
  background:linear-gradient(135deg,var(--skin-mid,#eab890),var(--skin-dark,#d9a575));border-radius:50%;
  box-shadow:0 1px 1px rgba(0,0,0,.1)}

/* ── LEGS — longer for human proportion ── */
.ag-legs{display:flex;gap:3px;margin-top:1px}
.ag-lg{width:9px;height:20px;border-radius:3px 3px 0 0;position:relative;
  box-shadow:inset 1px 0 0 rgba(255,255,255,.05)}
.ag-lg::after{content:'';position:absolute;top:10px;left:1px;right:1px;height:1px;
  background:rgba(0,0,0,.03);border-radius:1px}
/* Shoes with sole */
.ag-shoe{position:absolute;bottom:0;left:-1px;width:11px;height:5px;
  border-radius:3px 5px 4px 3px;box-shadow:0 2px 2px rgba(0,0,0,.25)}
.ag-shoe::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1.5px;
  background:rgba(0,0,0,.15);border-radius:0 0 3px 3px}

/* ── Shadow ── */
.ag-shd{width:22px;height:4px;background:radial-gradient(ellipse,rgba(0,0,0,.22) 30%,transparent 70%);margin-top:1px}

/* ── Name tag with star ── */
.ag-tag{font-family:var(--pf);font-size:9px;font-weight:700;margin-top:4px;text-align:center;white-space:nowrap;
  letter-spacing:2px;text-shadow:0 2px 5px rgba(0,0,0,0.9);
  background:rgba(6,10,25,0.8);backdrop-filter:blur(10px);padding:4px 10px;border-radius:5px;
  border:1.5px solid;border-color:inherit;box-shadow:0 5px 15px rgba(0,0,0,0.6)}
.ag-tag::after{content:' \1F9E0';margin-left:2px;font-size:6px;opacity:.9}

/* ── Info card ── */
.ag-card{margin-top:3px;padding:4px 8px;background:rgba(8,12,22,.95);border:1px solid;
  border-radius:4px;min-width:80px;text-align:center;backdrop-filter:blur(6px);
  opacity:.8;transition:opacity .2s,transform .2s;transform:translateY(2px) scale(.95);
  box-shadow:0 4px 12px rgba(0,0,0,.5)}
.ac-role{font-family:var(--pf);font-size:6px;letter-spacing:.8px;opacity:.8;margin-bottom:2px;
  -webkit-font-smoothing:antialiased}
.ac-task{font-family:var(--sf);font-size:12px;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100px}

/* ── Speech bubble ── */
.bub{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  padding:5px 10px;background:rgba(8,12,22,.95);border:1.5px solid;border-radius:6px;
  font-family:var(--sf);font-size:11px;white-space:nowrap;opacity:0;transition:opacity .3s;
  pointer-events:none;z-index:20;backdrop-filter:blur(6px);box-shadow:0 4px 14px rgba(0,0,0,.55);
  -webkit-font-smoothing:antialiased}
.bub::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:4px solid transparent;border-top-color:inherit}
.bub.show{opacity:1}

/* ── Walk animations ── */
.ag.wk .ag-lg:first-child{animation:wL .34s ease-in-out infinite}
.ag.wk .ag-lg:last-child{animation:wR .34s ease-in-out infinite}
.ag.wk .ag-spr{animation:bob .34s ease-in-out infinite}
.ag.wk .ag-arm.l{animation:aL .34s ease-in-out infinite}
.ag.wk .ag-arm.r{animation:aR .34s ease-in-out infinite}
@keyframes wL{0%,100%{height:16px}50%{height:10px}} @keyframes wR{0%,100%{height:10px}50%{height:16px}}
@keyframes bob{0%,100%{transform:scale(.62) translateY(0)}50%{transform:scale(.62) translateY(-2px)}}
@keyframes aL{0%,100%{transform:rotate(0)}50%{transform:rotate(-22deg)}}
@keyframes aR{0%,100%{transform:rotate(0)}50%{transform:rotate(22deg)}}

/* ═══ SIDEBAR ═══ */
.side{width:240px;background:rgba(8,6,20,0.8);backdrop-filter:blur(20px);border-left:1px solid var(--glass-border);display:flex;flex-direction:column;flex-shrink:0;z-index:50}
.side-tabs{display:flex;border-bottom:1px solid var(--glass-border);background:rgba(255,255,255,0.02)}
.stab{flex:1;padding:7px;text-align:center;font-family:var(--pf);font-size:7px;letter-spacing:1.5px;cursor:pointer;color:var(--d);border-bottom:2px solid transparent;transition:.2s}
.stab.act{color:var(--donna-rose);border-bottom-color:var(--donna-rose)}
.slist{flex:1;overflow-y:auto;padding:0}
.slist::-webkit-scrollbar{width:3px} .slist::-webkit-scrollbar-thumb{background:#1a2a40;border-radius:2px}
.sa{padding:8px 10px;cursor:pointer;transition:.2s;border-bottom:1px solid rgba(255,255,255,.04);border-left:2px solid transparent}
.sa:hover{background:rgba(255,255,255,.04);border-left-color:var(--c);box-shadow:inset 0 0 20px rgba(0,229,255,0.02)}
.sa-top{display:flex;align-items:center;gap:6px;margin-bottom:3px}
.sa-dot{width:7px;height:7px;border-radius:50%;box-shadow:0 0 6px;animation:dotPulse 3s ease-in-out infinite}
@keyframes dotPulse{0%,100%{opacity:1;box-shadow:0 0 4px}50%{opacity:.7;box-shadow:0 0 10px}}
.sa-n{font-family:var(--pf);font-size:8px;font-weight:700;letter-spacing:1.5px} .sa-cnt{margin-left:auto;font-family:var(--sf);font-size:12px;color:var(--d)}
.sa-mid{display:flex;align-items:center;gap:4px;margin-bottom:3px}
.sa-rm{font-size:11px;color:var(--d);font-weight:700;font-family:var(--mf)} .sa-role{font-size:10px;color:var(--d);font-family:var(--mf)}
.sa-badge{padding:2px 6px;border-radius:4px;font-family:var(--pf);font-size:6px;letter-spacing:1px;background:rgba(201,138,125,.1);color:var(--donna-rose);border:1px solid rgba(201,138,125,.2)}
.sa-task{font-family:var(--mf);font-size:12px;color:var(--d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-top:2px}
.sa-task::before{content:'> ';color:var(--c);opacity:.6;font-family:var(--sf)}
.sbot{border-top:1px solid #161e34;padding:5px}
.sbot-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.sbot-i{padding:5px 8px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.04);border-radius:3px;text-align:center}
.sbot-v{font-family:var(--pf);font-size:10px;margin-bottom:2px} .sbot-l{font-size:10px;color:var(--d)}

/* ═══ BOTTOM ═══ */
.mtg{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);z-index:200;padding:8px 28px;cursor:pointer;font-family:var(--pf);font-size:7px;color:var(--c);letter-spacing:2px;background:rgba(0,229,255,.07);border:2px solid rgba(0,229,255,.35);border-radius:4px;text-shadow:0 0 10px rgba(0,229,255,.4);transition:.3s}
.mtg:hover{background:rgba(0,229,255,.14);box-shadow:0 0 20px rgba(0,229,255,.15)}
.tst-a{position:fixed;top:36px;right:226px;z-index:500;display:flex;flex-direction:column;gap:4px}
.tst{padding:6px 12px;background:rgba(8,12,22,.95);border:1.5px solid;border-radius:5px;font-size:11px;display:flex;align-items:center;gap:6px;animation:tstI .35s ease,tstO .35s ease 3.5s forwards;pointer-events:none;
  -webkit-font-smoothing:antialiased;box-shadow:0 4px 12px rgba(0,0,0,.4)}
.tst .td{width:5px;height:5px;border-radius:50%}
@keyframes tstI{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:translateX(0)}}
@keyframes tstO{to{opacity:0;transform:translateX(18px)}}
.tl{height:26px;background:rgba(8,5,20,0.9);backdrop-filter:blur(10px);border-top:1px solid var(--glass-border);display:flex;align-items:center;padding:0 12px;gap:14px;overflow-x:auto;z-index:50;flex-shrink:0}
.tl-i{display:flex;align-items:center;gap:5px;font-size:11px;white-space:nowrap;opacity:.7;font-family:var(--mf)}
.tl-i .tt{color:var(--c);font-size:10px;font-family:var(--sf);opacity:.6} .tl-i .td{width:5px;height:5px;border-radius:50%;box-shadow:0 0 6px}
/* ═══ NEURAL MINIMAP — Persistent floating widget ═══ */
.neural-minimap{position:fixed;bottom:20px;left:20px;width:160px;height:120px;
  background:rgba(10,12,25,0.6);backdrop-filter:blur(10px);border:1px solid var(--glass-border);
  border-radius:12px;z-index:400;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,0.6);
  cursor:pointer;transition:transform 0.3s, background 0.3s}
.neural-minimap:hover{transform:scale(1.05);background:rgba(10,12,25,0.8);border-color:var(--c)}
.nm-header{padding:5px 10px;font-family:var(--pf);font-size:6px;letter-spacing:1px;color:var(--c);border-bottom:1px solid var(--glass-border);background:rgba(255,255,255,0.03)}
.nm-content{width:100%;height:calc(100% - 18px);position:relative}

.modol{display:none;position:fixed;inset:0;background:rgba(5,5,15,0.9);backdrop-filter:blur(20px);z-index:2000;align-items:center;justify-content:center}
.modol.show{display:flex}
.mod{background:rgba(12,16,32,0.95);backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:12px;width:480px;max-width:90vw;padding:24px;box-shadow:0 0 100px rgba(0,229,255,0.1)}
.mod h2{font-family:var(--pf);font-size:10px;font-weight:700;margin-bottom:6px;color:var(--c);letter-spacing:2px} .mod .sub{font-size:14px;color:var(--d);margin-bottom:16px;font-family:var(--mf)}
.mod label{font-family:var(--pf);font-size:6px;letter-spacing:2px;color:var(--d);display:block;margin-bottom:5px}
.mod input{width:100%;padding:9px 12px;background:#080c16;border:1px solid #1e2a44;border-radius:5px;color:var(--t);font-family:var(--mf);font-size:15px;outline:0;margin-bottom:14px}
.mod input:focus{border-color:var(--c)} .mod input::placeholder{color:#2a3a50}
.mod-l{max-height:280px;overflow-y:auto;margin-bottom:14px}
.mar{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:4px;cursor:pointer;transition:.15s}
.mar:hover{background:rgba(255,255,255,.03)}
.mar .md{width:10px;height:10px;border-radius:50%} .mar .mn2{font-family:var(--pf);font-size:7px;min-width:55px} .mar .mr{font-size:12px;color:var(--d);flex:1}
.mar .mc{margin-left:auto;width:17px;height:17px;border:2px solid #1e2a44;border-radius:3px;display:flex;align-items:center;justify-content:center}
.mar.sel .mc{background:var(--c);border-color:var(--c)} .mar.sel .mc::after{content:'✓';color:#000;font-size:10px}
.mod-b{display:flex;gap:10px;justify-content:flex-end}
.bc{padding:8px 20px;background:0;border:1px solid #1e2a44;border-radius:4px;color:var(--d);font-family:var(--pf);font-size:6px;cursor:pointer}
.bg{padding:8px 24px;background:var(--b);border:0;border-radius:4px;color:#fff;font-family:var(--pf);font-size:6px;cursor:pointer}
.wall-b,.wall-l{display:none}

/* ═══ NEW FEATURES — Inspired by OpenClaw/OHMO.AI ═══ */

/* Ceiling light spots — warm ambient glow */
.ceil-light{position:absolute;z-index:0;pointer-events:none}
.ceil-light::before{content:'';position:absolute;width:40px;height:40px;
  background:radial-gradient(circle,rgba(255,230,180,.06) 0%,transparent 70%);
  border-radius:50%;transform:translate(-50%,-50%)}
.ceil-light::after{content:'';position:absolute;width:6px;height:6px;
  background:rgba(255,230,180,.15);border-radius:50%;
  transform:translate(-50%,-50%);box-shadow:0 0 8px rgba(255,230,180,.1)}

/* AC vent strip */
.ac-vent{position:absolute;background:repeating-linear-gradient(90deg,
  rgba(255,255,255,.02) 0px,rgba(255,255,255,.02) 2px,transparent 2px,transparent 4px);
  height:3px;border-radius:1px;z-index:0}

/* Voice agent notification bar */
.voice-bar{position:fixed;bottom:55px;left:50%;transform:translateX(-50%);z-index:300;
  padding:7px 20px;display:flex;align-items:center;gap:10px;
  background:rgba(8,12,22,.85);backdrop-filter:blur(15px);border:1px solid rgba(0,229,255,.2);
  border-radius:24px;box-shadow:0 4px 30px rgba(0,0,0,.5),0 0 15px rgba(0,229,255,0.08)}
.voice-bar .vb-avatar{width:20px;height:20px;border-radius:50%;border:2px solid;
  display:flex;align-items:center;justify-content:center;font-size:8px}
.voice-bar .vb-name{font-family:var(--pf);font-size:6px;letter-spacing:1px}
.voice-bar .vb-status{font-family:var(--sf);font-size:10px;color:var(--d)}
.voice-bar .vb-wave{display:flex;gap:2px;align-items:center;margin-left:auto}
.voice-bar .vb-wave span{width:2px;background:var(--p);border-radius:1px;
  animation:wave 1.2s ease-in-out infinite}
.voice-bar .vb-wave span:nth-child(1){height:6px;animation-delay:0s}
.voice-bar .vb-wave span:nth-child(2){height:10px;animation-delay:.15s}
.voice-bar .vb-wave span:nth-child(3){height:14px;animation-delay:.3s}
.voice-bar .vb-wave span:nth-child(4){height:8px;animation-delay:.45s}
.voice-bar .vb-wave span:nth-child(5){height:12px;animation-delay:.6s}
@keyframes wave{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}

/* Agent typing animation — hands move */
.ag.typing .ag-arm.l{animation:typeL .4s ease-in-out infinite !important}
.ag.typing .ag-arm.r{animation:typeR .4s ease-in-out infinite !important}
.ag.typing .ag-spr{animation:none !important;transform:scale(.62)}
@keyframes typeL{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(-12deg)}}
@keyframes typeR{0%,100%{transform:rotate(5deg)}50%{transform:rotate(12deg)}}

/* Agent head look-around (idle) */
.ag.idle-look .ag-hd{animation:lookAround 6s ease-in-out infinite}
@keyframes lookAround{0%,100%{transform:translateX(0)}25%{transform:translateX(-1px)}75%{transform:translateX(1px)}}

/* Agent sitting class — shorter legs when at desk */
.ag.sitting .ag-lg{height:10px !important}
.ag.sitting .ag-shd{opacity:0}

/* Desk name plates */
.dk-name{position:absolute;top:-8px;left:50%;transform:translateX(-50%);
  font-family:var(--pf);font-size:3.5px;letter-spacing:1px;color:var(--d);
  white-space:nowrap;opacity:.5}

/* Room corner ambient glow */
.rm::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  border-radius:4px;opacity:.4;
  background:radial-gradient(circle at 10% 10%,rgba(255,255,255,.015),transparent 30%),
    radial-gradient(circle at 90% 90%,rgba(255,255,255,.01),transparent 25%)}

/* Room separator line with label */
.room-sep{position:absolute;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);
  z-index:0;pointer-events:none}

/* Standup board in sidebar */
.standup{border-top:1px solid #161e34;padding:6px 8px}
.standup-h{font-family:var(--pf);font-size:5.5px;letter-spacing:1.5px;color:var(--c);margin-bottom:4px}
.standup-i{padding:3px 6px;margin-bottom:3px;background:rgba(0,0,0,.2);border-radius:2px;
  border-left:2px solid;font-size:10px;color:var(--d)}

/* Mini productivity sparkline */
.sparkline{display:flex;align-items:flex-end;gap:1px;height:14px}
.sparkline span{width:3px;background:var(--g);border-radius:1px 1px 0 0;opacity:.6;
  animation:sparkGrow 3s ease-in-out infinite}
@keyframes sparkGrow{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}

/* ═══ API PANEL ═══ */
.api-item{padding:3px 6px;margin-bottom:2px;background:rgba(0,0,0,.2);border-radius:2px;
  border-left:2px solid;font-size:10px;color:var(--t);display:flex;align-items:center;gap:4px}
.api-item span:first-child{font-size:8px}
.api-st{margin-left:auto;font-family:var(--pf);font-size:4px;letter-spacing:.5px;padding:1px 4px;border-radius:2px}
.api-st.ready{background:rgba(0,255,136,.1);color:var(--g)}
.api-st.active{background:rgba(0,255,136,.2);color:var(--g);box-shadow:0 0 4px rgba(0,255,136,.2)}
.api-st.pending{background:rgba(255,221,0,.06);color:var(--d)}
.api-st.error{background:rgba(255,51,68,.1);color:var(--r)}

/* ═══ FASHION BRAND ELEMENTS — Madame La Donna ═══ */

/* Brand sign — illuminated logo */
.brand-sign{position:absolute;z-index:10;font-family:var(--pf);font-size:6px;letter-spacing:2px;
  background:linear-gradient(135deg,#e8c864,#d4a438,#e8c864);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 6px rgba(232,200,100,.3));text-transform:uppercase}

/* Wall baseboard — realistic room edge */
.baseboard{position:absolute;bottom:0;left:0;right:0;height:3px;z-index:1;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.1));
  border-top:1px solid rgba(255,255,255,.04)}

/* Product display shelf — illuminated */
.prod-shelf{position:absolute;width:24px;height:20px;z-index:3;
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.1));
  border:1px solid rgba(255,255,255,.06);border-radius:2px}
.prod-shelf::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,200,100,.08),transparent)}
.prod-shelf::after{content:'';position:absolute;top:50%;left:0;right:0;height:1px;
  background:rgba(255,255,255,.04)}

/* Clothes hanger with garment */
.hanger{position:absolute;z-index:3}
.hanger::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:14px;height:2px;background:#3a3040;border-radius:1px;
  box-shadow:0 0 0 1px rgba(255,255,255,.03)}
.hanger::after{content:'';position:absolute;top:2px;left:50%;transform:translateX(-50%);
  width:10px;height:14px;background:linear-gradient(180deg,rgba(176,64,255,.08),rgba(255,0,170,.05));
  border-radius:0 0 3px 3px;border:1px solid rgba(176,64,255,.1);border-top:0}

/* Beauty counter */
.beauty-counter{position:absolute;height:22px;background:linear-gradient(180deg,#1e2040,#141830);
  border:1px solid #2a3050;border-radius:3px;z-index:3;
  box-shadow:0 3px 6px rgba(0,0,0,.3)}
.beauty-counter::before{content:'';position:absolute;top:3px;left:2px;right:2px;
  height:1px;background:#2a3858;box-shadow:0 5px 0 #2a3858,0 10px 0 #2a3858}
.beauty-counter::after{content:'';position:absolute;top:1px;left:2px;right:2px;height:4px;
  background:linear-gradient(90deg,rgba(176,64,255,.04),rgba(255,0,170,.04));border-radius:1px}

/* Air conditioning unit */
.ac-unit{position:absolute;width:28px;height:5px;background:#141830;
  border:1px solid #1e2a40;border-radius:2px;z-index:1}
.ac-unit::before{content:'';position:absolute;inset:1px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.02) 0px,rgba(255,255,255,.02) 2px,transparent 2px,transparent 3px)}

/* Wall clock */
.wall-clock{position:absolute;width:14px;height:14px;border:1px solid rgba(255,255,255,.1);
  border-radius:50%;z-index:3;background:rgba(0,0,0,.3)}
.wall-clock::before{content:'';position:absolute;top:50%;left:50%;width:4px;height:1px;
  background:rgba(255,255,255,.2);transform-origin:left;transform:rotate(-45deg)}
.wall-clock::after{content:'';position:absolute;top:50%;left:50%;width:3px;height:1px;
  background:rgba(255,200,100,.3);transform-origin:left;transform:rotate(90deg)}

/* ═══════════════════════════════════════════════════
   EVOLUTION — Inspired by OpenClaw Office & AgentOffice
   Advanced features for supreme realism
   ═══════════════════════════════════════════════════ */

/* Agent status glow states */
.ag.state-working{filter:drop-shadow(0 4px 8px rgba(0,0,0,.5)) drop-shadow(0 0 6px rgba(0,255,136,.15))}
.ag.state-working .ag-dot{background:var(--g)!important;box-shadow:0 0 6px var(--g)!important}
.ag.state-meeting{filter:drop-shadow(0 4px 8px rgba(0,0,0,.5)) drop-shadow(0 0 6px rgba(255,221,0,.15))}
.ag.state-meeting .ag-dot{background:var(--y)!important;box-shadow:0 0 6px var(--y)!important}
.ag.state-idle{filter:drop-shadow(0 4px 8px rgba(0,0,0,.4));opacity:.8}
.ag.state-idle .ag-dot{background:#555!important;box-shadow:0 0 3px #555!important}

/* Collaboration line between agents */
.collab-line{stroke:rgba(0,229,255,.12);stroke-width:1;fill:none;
  stroke-dasharray:4 3;animation:collabDash 2s linear infinite}
@keyframes collabDash{to{stroke-dashoffset:-7}}

/* Glass wall partition */
.glass-wall{position:absolute;z-index:4;
  background:linear-gradient(180deg,rgba(200,220,255,.04),rgba(200,220,255,.01));
  border:1px solid rgba(200,220,255,.08);backdrop-filter:blur(1px);
  box-shadow:0 0 8px rgba(200,220,255,.02)}
.glass-wall.gw-h{height:3px;left:0;right:0} /* horizontal */
.glass-wall.gw-v{width:3px;top:0;bottom:0} /* vertical */

/* Document stack on desk */
.doc-stack{position:absolute;width:10px;height:7px;z-index:4;
  background:#e8e0d0;border:1px solid #c8c0b0;border-radius:1px;opacity:.25}
.doc-stack::before{content:'';position:absolute;top:-2px;left:1px;width:8px;height:6px;
  background:#f0e8d8;border:1px solid #d0c8b8;border-radius:1px;transform:rotate(-3deg)}
.doc-stack::after{content:'';position:absolute;top:2px;left:2px;right:2px;
  height:1px;background:rgba(0,0,0,.1);box-shadow:0 2px 0 rgba(0,0,0,.08)}

/* Desktop photo frame */
.photo-frame{position:absolute;width:8px;height:10px;z-index:4;
  background:#0a0e18;border:1px solid rgba(255,255,255,.08);border-radius:1px}
.photo-frame::before{content:'';position:absolute;inset:1px;
  background:linear-gradient(135deg,rgba(255,200,100,.06),rgba(176,64,255,.04));border-radius:1px}

/* Fashion display case with spotlight */
.display-case{position:absolute;z-index:3;
  background:rgba(0,0,0,.3);border:1px solid rgba(176,64,255,.12);border-radius:3px}
.display-case::before{content:'';position:absolute;top:-4px;left:50%;transform:translateX(-50%);
  width:8px;height:4px;background:linear-gradient(180deg,rgba(255,230,180,.08),transparent);
  border-radius:0 0 50% 50%}
.display-case::after{content:'';position:absolute;bottom:2px;left:50%;transform:translateX(-50%);
  width:60%;height:2px;background:rgba(176,64,255,.08);border-radius:1px}

/* Activity bar — real-time glow strip */
.activity-bar{position:absolute;bottom:0;left:0;right:0;height:2px;z-index:6;overflow:hidden}
.activity-bar::before{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,var(--g),rgba(0,229,255,.4),var(--g),transparent);
  animation:activitySlide 3s ease-in-out infinite}
@keyframes activitySlide{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* Agent thought bubble — three dots */
.think-dots{position:absolute;top:-8px;right:-6px;display:flex;gap:1.5px;z-index:15}
.think-dots span{width:2px;height:2px;border-radius:50%;background:rgba(255,255,255,.3);
  animation:thinkPulse 1.5s ease-in-out infinite}
.think-dots span:nth-child(2){animation-delay:.3s}
.think-dots span:nth-child(3){animation-delay:.6s}
@keyframes thinkPulse{0%,100%{opacity:.2;transform:scale(.8)}50%{opacity:.8;transform:scale(1.2)}}

/* Wall art / poster frame */
.wall-art{position:absolute;z-index:3;background:#0a0e18;border:1px solid rgba(255,255,255,.06);border-radius:2px}
.wall-art::before{content:'';position:absolute;inset:2px;border-radius:1px;
  background:linear-gradient(135deg,rgba(176,64,255,.06),rgba(255,0,170,.04),rgba(0,229,255,.03))}

/* Exit sign */
.exit-sign{position:absolute;z-index:4;font-family:var(--pf);font-size:3.5px;
  letter-spacing:.5px;color:rgba(0,255,136,.5);padding:1px 3px;
  background:rgba(0,0,0,.4);border:1px solid rgba(0,255,136,.15);border-radius:1px}

/* Fire extinguisher */
.fire-ext{position:absolute;width:4px;height:10px;z-index:3;
  background:linear-gradient(180deg,#cc2233,#991122);border-radius:2px 2px 1px 1px;
  box-shadow:0 0 3px rgba(255,50,50,.15)}
.fire-ext::before{content:'';position:absolute;top:-2px;left:0;width:4px;height:3px;
  background:#444;border-radius:1px 1px 0 0}

/* Floor power outlet */
.outlet{position:absolute;width:6px;height:6px;border-radius:50%;z-index:1;
  background:#0a0e14;border:1px solid rgba(255,255,255,.04)}
.outlet::before{content:'';position:absolute;top:2px;left:1px;width:1px;height:1px;
  background:rgba(255,255,255,.06);box-shadow:2px 0 0 rgba(255,255,255,.06)}

/* Wall light switch */
.switch{position:absolute;width:4px;height:6px;z-index:3;
  background:#1a1e2a;border:1px solid rgba(255,255,255,.06);border-radius:1px}
.switch::before{content:'';position:absolute;top:1px;left:1px;width:2px;height:2px;
  background:rgba(255,255,255,.08);border-radius:.5px}

/* Coat hook */
.coat-hook{position:absolute;width:3px;height:5px;z-index:3;
  background:#2a3040;border-radius:0 0 2px 2px}
.coat-hook::before{content:'';position:absolute;top:-1px;left:-1px;width:5px;height:2px;
  background:#2a3040;border-radius:2px 2px 0 0}

/* Mini fridge */
.mini-fridge{position:absolute;width:12px;height:18px;z-index:3;
  background:linear-gradient(180deg,#1a2038,#0e1420);border:1px solid #2a3050;border-radius:2px}
.mini-fridge::before{content:'';position:absolute;top:2px;right:1px;width:2px;height:3px;
  background:#3a4a60;border-radius:1px}
.mini-fridge::after{content:'';position:absolute;top:50%;left:0;right:0;height:1px;
  background:#2a3850}

/* ═══ ACTIVITY BAR — Room status indicator ═══ */
.activity-bar{position:absolute;bottom:6px;left:8%;right:8%;height:3px;z-index:2;
  background:rgba(201,138,125,.06);border-radius:2px;overflow:hidden}
.activity-bar::before{content:'';position:absolute;top:0;left:0;width:35%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(201,138,125,.4),rgba(176,64,255,.3),transparent);
  border-radius:2px;animation:actPulse 3s ease-in-out infinite}
@keyframes actPulse{0%{left:-35%}100%{left:100%}}

/* ═══ DISPLAY CASE — Glass vitrine for fashion ═══ */
.display-case{position:absolute;z-index:3;
  background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.08);border-radius:2px;
  box-shadow:inset 0 0 8px rgba(255,255,255,.02)}
.display-case::before{content:'';position:absolute;top:50%;left:0;right:0;height:1px;
  background:rgba(255,255,255,.06)}
.display-case::after{content:'';position:absolute;top:2px;left:2px;right:2px;bottom:52%;
  background:rgba(176,64,255,.03);border-radius:1px}

/* ═══ OUTLET — Wall power socket ═══ */
.outlet{position:absolute;width:6px;height:8px;z-index:3;
  background:#141828;border:1px solid rgba(255,255,255,.06);border-radius:1px}
.outlet::before{content:'';position:absolute;top:2px;left:1px;width:1px;height:2px;
  background:rgba(255,255,255,.1);border-radius:.5px;
  box-shadow:2px 0 0 rgba(255,255,255,.1)}

/* ═══ DOOR FRAME — Room entry door ═══ */
.door-frame{position:absolute;z-index:3;width:16px;height:100%;
  background:linear-gradient(90deg,rgba(40,50,70,.4),rgba(40,50,70,.2),rgba(40,50,70,.4))}
.door-frame::before{content:'';position:absolute;top:30%;right:2px;width:2px;height:4px;
  background:rgba(255,200,100,.2);border-radius:1px}
.door-frame::after{content:'';position:absolute;top:20%;left:3px;right:3px;height:30%;
  background:rgba(100,140,200,.03);border:1px solid rgba(100,140,200,.05);border-radius:1px}

/* ═══ ROOM BADGE — Status circle ═══ */
.room-badge{position:absolute;top:4px;right:6px;width:6px;height:6px;border-radius:50%;z-index:5;
  animation:badgePulse 2s ease-in-out infinite}
@keyframes badgePulse{0%,100%{opacity:.6;box-shadow:0 0 4px currentColor}50%{opacity:1;box-shadow:0 0 8px currentColor}}

/* ═══ BLUE LED STRIP — Meeting Room Perimeter ═══ */
.led-strip{position:absolute;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(68,136,255,.1),rgba(68,136,255,.5),rgba(100,160,255,.7),rgba(68,136,255,.5),rgba(68,136,255,.1));
  animation:ledPulse 3s ease-in-out infinite}
.led-top{top:0;left:0;right:0;height:3px;border-radius:6px 6px 0 0;
  box-shadow:0 0 8px rgba(68,136,255,.4),0 0 20px rgba(68,136,255,.2),0 2px 30px rgba(68,136,255,.1)}
.led-bottom{bottom:0;left:0;right:0;height:3px;border-radius:0 0 6px 6px;
  box-shadow:0 0 8px rgba(68,136,255,.4),0 0 20px rgba(68,136,255,.2),0 -2px 30px rgba(68,136,255,.1)}
.led-left{top:0;left:0;bottom:0;width:3px;border-radius:6px 0 0 6px;
  background:linear-gradient(180deg,rgba(68,136,255,.1),rgba(68,136,255,.5),rgba(100,160,255,.7),rgba(68,136,255,.5),rgba(68,136,255,.1));
  box-shadow:0 0 8px rgba(68,136,255,.4),0 0 20px rgba(68,136,255,.2),2px 0 30px rgba(68,136,255,.1)}
.led-right{top:0;right:0;bottom:0;width:3px;border-radius:0 6px 6px 0;
  background:linear-gradient(180deg,rgba(68,136,255,.1),rgba(68,136,255,.5),rgba(100,160,255,.7),rgba(68,136,255,.5),rgba(68,136,255,.1));
  box-shadow:0 0 8px rgba(68,136,255,.4),0 0 20px rgba(68,136,255,.2),-2px 0 30px rgba(68,136,255,.1)}
@keyframes ledPulse{0%,100%{opacity:.4;filter:brightness(.8)}50%{opacity:1;filter:brightness(1.2)}}

/* ═══ SPEAKERPHONE — Conference phone ═══ */
.speakerphone{position:absolute;width:10px;height:10px;z-index:3;
  background:radial-gradient(circle,#0a1020 40%,#1a2440 60%,#0a1020 80%);
  border:1px solid rgba(68,136,255,.2);border-radius:50%;
  box-shadow:0 0 6px rgba(68,136,255,.1)}
.speakerphone::before{content:'';position:absolute;top:2px;right:2px;width:3px;height:3px;
  background:rgba(0,255,136,.5);border-radius:50%;
  box-shadow:0 0 4px rgba(0,255,136,.4);animation:ledBlink 2s infinite}
@keyframes ledBlink{0%,100%{opacity:1}50%{opacity:.3}}

/* ═══ NOTEPAD — Meeting notepad ═══ */
.notepad{position:absolute;width:8px;height:10px;z-index:3;
  background:linear-gradient(180deg,#e8e4d8,#d8d4c8);border-radius:1px;
  box-shadow:1px 1px 2px rgba(0,0,0,.3)}
.notepad::before{content:'';position:absolute;top:2px;left:1px;right:1px;height:1px;
  background:rgba(68,136,255,.2);
  box-shadow:0 2px 0 rgba(68,136,255,.15),0 4px 0 rgba(68,136,255,.1)}
.notepad::after{content:'';position:absolute;top:1px;left:6px;width:3px;height:1px;
  background:rgba(68,100,200,.3);border-radius:.5px;transform:rotate(30deg)}

/* ═══ COFFEE TRAY — Side table ═══ */
.coffee-tray{position:absolute;width:14px;height:10px;z-index:3;
  background:linear-gradient(180deg,#1a1420,#0e0a14);border:1px solid rgba(255,255,255,.06);
  border-radius:2px}
.coffee-tray::before{content:'';position:absolute;top:2px;left:2px;width:4px;height:4px;
  background:rgba(139,90,43,.3);border-radius:50%;border:1px solid rgba(139,90,43,.4)}
.coffee-tray::after{content:'';position:absolute;top:2px;right:2px;width:4px;height:4px;
  background:rgba(139,90,43,.2);border-radius:50%;border:1px solid rgba(139,90,43,.3)}

/* ═══ STATUS BOARD — Meeting indicator ═══ */
.status-board{position:absolute;height:8px;z-index:4;
  background:rgba(255,40,40,.08);border:1px solid rgba(255,40,40,.25);border-radius:2px;
  font-family:var(--pf);font-size:3.5px;letter-spacing:.8px;color:rgba(255,100,100,.7);
  display:flex;align-items:center;justify-content:center;
  animation:statusGlow 2s ease-in-out infinite}
.status-board::before{content:'';position:absolute;left:3px;top:50%;transform:translateY(-50%);
  width:3px;height:3px;background:rgba(255,60,60,.6);border-radius:50%;
  box-shadow:0 0 4px rgba(255,0,0,.4);animation:ledBlink 1.5s infinite}
@keyframes statusGlow{0%,100%{box-shadow:0 0 4px rgba(255,40,40,.1)}50%{box-shadow:0 0 10px rgba(255,40,40,.2)}}

/* ═══ Enhanced meeting room blue ambient ═══ */
.r-live{box-shadow:inset 0 0 60px rgba(68,136,255,.12),inset 0 -4px 8px rgba(0,0,0,.4),0 0 30px rgba(68,136,255,.06) !important}

/* ═══ EVA SECRETARY CHAT ═══ */
.eva-chat{position:fixed;bottom:12px;right:12px;width:280px;z-index:500;
  background:rgba(8,12,24,.95);border:1px solid rgba(232,184,77,.25);border-radius:10px;
  box-shadow:0 8px 32px rgba(0,0,0,.5),0 0 20px rgba(232,184,77,.06);
  backdrop-filter:blur(12px);font-family:var(--sf);overflow:hidden;transition:all .3s ease}
.eva-header{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;
  background:linear-gradient(135deg,rgba(232,184,77,.08),rgba(232,184,77,.02));
  border-bottom:1px solid rgba(232,184,77,.12)}
.eva-avatar{font-size:18px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  background:rgba(232,184,77,.1);border-radius:50%;border:1px solid rgba(232,184,77,.2)}
.eva-info{flex:1}
.eva-name{font-family:var(--pf);font-size:6px;color:#e8b84d;letter-spacing:1px}
.eva-status{color:#00ff88;font-size:5px;animation:blink 2s infinite}
.eva-sub{font-size:9px;color:var(--d);margin-top:1px}
.eva-min{color:var(--d);font-size:14px;cursor:pointer;padding:0 4px;transition:color .2s}
.eva-min:hover{color:#e8b84d}
.eva-body{max-height:260px;transition:max-height .3s ease,opacity .3s ease;overflow:hidden}
.eva-body.collapsed{max-height:0;opacity:0}
.eva-msgs{height:200px;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:6px;
  scrollbar-width:thin;scrollbar-color:rgba(232,184,77,.2) transparent}
.eva-msg{max-width:88%;animation:msgFade .3s ease}
.eva-msg span{display:inline-block;padding:6px 10px;border-radius:8px;font-size:10px;line-height:1.4}
.eva-bot{align-self:flex-start}
.eva-bot span{background:rgba(232,184,77,.08);border:1px solid rgba(232,184,77,.12);color:var(--t)}
.eva-user{align-self:flex-end}
.eva-user span{background:rgba(0,255,136,.08);border:1px solid rgba(0,255,136,.12);color:#aaffcc}
@keyframes msgFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.eva-input{display:flex;gap:4px;padding:6px 8px;border-top:1px solid rgba(232,184,77,.1)}
.eva-input input{flex:1;background:rgba(255,255,255,.04);border:1px solid rgba(232,184,77,.15);
  border-radius:6px;padding:6px 10px;color:var(--t);font-family:var(--sf);font-size:10px;outline:none;
  transition:border-color .2s}
.eva-input input:focus{border-color:rgba(232,184,77,.4)}
.eva-input button{background:rgba(232,184,77,.15);border:1px solid rgba(232,184,77,.25);
  border-radius:6px;color:#e8b84d;padding:4px 10px;cursor:pointer;font-size:10px;transition:all .2s}
.eva-input button:hover{background:rgba(232,184,77,.25)}

/* ═══ NOTIFICATION CENTER ═══ */
.notif-bell{position:fixed;top:7px;right:140px;z-index:300;cursor:pointer;font-size:14px;
  padding:2px 4px;transition:transform .2s}
.notif-bell:hover{transform:scale(1.15)}
.bell-count{position:absolute;top:-2px;right:-4px;background:#ff3344;color:#fff;
  font-family:var(--pf);font-size:5px;padding:1px 3px;border-radius:6px;min-width:10px;text-align:center;
  animation:bellBounce 2s infinite}
@keyframes bellBounce{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}
.notif-panel{position:fixed;top:34px;right:100px;width:260px;z-index:500;
  background:rgba(8,12,24,.96);border:1px solid rgba(0,229,255,.15);border-radius:8px;
  box-shadow:0 8px 32px rgba(0,0,0,.5);backdrop-filter:blur(12px);
  display:none;max-height:300px;overflow-y:auto}
.notif-panel.show{display:block;animation:msgFade .2s ease}
.notif-header{padding:8px 12px;font-family:var(--pf);font-size:5.5px;color:var(--c);letter-spacing:1.5px;
  border-bottom:1px solid rgba(0,229,255,.1)}
.notif-item{padding:8px 12px;font-size:10px;color:var(--t);border-bottom:1px solid rgba(255,255,255,.03);
  border-left:3px solid transparent;transition:background .2s}
.notif-item:hover{background:rgba(255,255,255,.02)}

/* ═══ ROOM HEAT GLOW — Dynamic room brightness ═══ */
.rm{transition:filter .8s ease,box-shadow .8s ease}
.heat-low{filter:brightness(.9)}
.heat-med{filter:brightness(1.05)}
.heat-high{filter:brightness(1.15);box-shadow:inset 0 0 40px rgba(0,255,136,.06)}

/* ═══ KPI CARDS — Finance room ═══ */
.kpi-card{flex:1;background:rgba(0,0,0,.4);border:1px solid rgba(255,136,0,.12);border-radius:3px;
  padding:3px 4px;text-align:center}
.kpi-val{font-family:var(--pf);font-size:6px;letter-spacing:.5px}
.kpi-lbl{font-family:var(--sf);font-size:8px;color:var(--d);margin-top:1px}
.sparkline-canvas{background:rgba(0,0,0,.3);border:1px solid rgba(255,136,0,.12);border-radius:3px}

/* ═══ SAFE BOX — Finance room ═══ */
.safe-box{position:absolute;width:18px;height:22px;z-index:3;
  background:linear-gradient(180deg,#2a2a2a,#1a1a1a);border:2px solid #3a3a3a;border-radius:2px;
  box-shadow:inset 0 0 8px rgba(0,0,0,.5),0 2px 4px rgba(0,0,0,.4)}
.safe-box::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:8px;height:8px;border:2px solid rgba(255,200,100,.3);border-radius:50%}
.safe-box::after{content:'';position:absolute;top:25%;right:3px;width:3px;height:3px;
  background:rgba(0,255,136,.4);border-radius:50%;box-shadow:0 0 3px rgba(0,255,136,.3);animation:ledBlink 2s infinite}

/* ═══ WEBSOCKET STATUS ═══ */
.ws-dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:4px;
  background:#ff5577;box-shadow:0 0 4px rgba(255,85,119,.4);transition:all .3s}
.ws-dot.connected{background:#c98a7d;box-shadow:0 0 4px rgba(201,138,125,.4)}