:root {
      color-scheme: light;
      --bg:#eaf3f9; --panel:#ffffff; --panel-2:#f4f9fc; --ink:#102a3e; --muted:#657b8c;
      --line:#d4e3ed; --blue:#0033C9; --blue-2:#0026A0; --green:#00C42E; --green-2:#008F22;
      --amber:#e99b2b; --red:#d95353; --grid:rgba(20,120,223,.075); --shadow:0 18px 50px rgba(27,79,117,.14);
    }
    * { box-sizing:border-box; }
    html, body { width:100%; height:100%; margin:0; overflow:hidden; }
    body { min-width:320px; background:var(--bg); color:var(--ink); font-family:Manrope,sans-serif; -webkit-font-smoothing:antialiased; }
    button, select { font:inherit; }
    button { cursor:pointer; }
    .app {
      width:100%; height:100svh; padding:max(10px,env(safe-area-inset-top)) 12px max(10px,env(safe-area-inset-bottom));
      display:grid; grid-template-rows:58px 70px 118px minmax(0,1fr) 96px; gap:9px;
    }
    .topbar, .kpis, .flow-picker, .workspace, .event-strip { background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow); }
    .topbar { border-radius:15px; padding:8px 12px 8px 16px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
    .title-block { min-width:0; display:flex; align-items:center; gap:12px; }
    .live-beacon { width:10px; height:10px; flex:0 0 auto; border-radius:50%; background:var(--green); box-shadow:0 0 0 5px color-mix(in srgb,var(--green) 15%,transparent); animation:pulse 1.5s ease-in-out infinite; }
    .title-block h1 { margin:0; font-size:16px; letter-spacing:-.02em; line-height:1.1; }
    .title-block p { margin:3px 0 0; color:var(--muted); font:500 10px IBM Plex Mono,monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .top-actions { display:flex; align-items:center; justify-content:flex-end; gap:7px; min-width:0; }
    .segmented { display:flex; padding:3px; background:var(--panel-2); border:1px solid var(--line); border-radius:9px; }
    .dept-btn, .icon-btn, .stream-btn { border:0; color:var(--muted); background:transparent; border-radius:6px; font-size:10px; font-weight:800; }
    .dept-btn { padding:7px 9px; white-space:nowrap; }
    .dept-btn[aria-selected="true"] { color:#fff; background:var(--blue); }
    .site-select { height:34px; max-width:145px; padding:0 28px 0 9px; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--ink); font-size:10px; font-weight:700; }
    .clock { min-width:65px; color:var(--blue-2); font:600 11px IBM Plex Mono,monospace; text-align:center; }
    .stream-btn { height:34px; padding:0 11px; border:1px solid var(--line); color:var(--ink); }
    .stream-btn:hover, .icon-btn:hover { border-color:var(--blue); color:var(--blue-2); }

    .kpis { border-radius:15px; overflow:hidden; display:grid; grid-template-columns:repeat(4,1fr); }
    .kpi { min-width:0; padding:11px 15px; border-right:1px solid var(--line); position:relative; }
    .kpi:last-child { border-right:0; }
    .kpi-label { display:flex; align-items:center; justify-content:space-between; gap:6px; color:var(--muted); font:500 9px IBM Plex Mono,monospace; text-transform:uppercase; }
    .trend { color:var(--green-2); font-weight:600; }
    .kpi strong { display:block; margin-top:6px; font-size:25px; line-height:1; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
    .kpi small { position:absolute; right:13px; bottom:10px; color:var(--muted); font-size:8px; }

    .flow-picker { border-radius:15px; padding:9px 11px; display:grid; grid-template-columns:132px repeat(4,minmax(0,1fr)); grid-template-rows:minmax(0,1fr) auto; gap:8px; align-items:stretch; }
    .flow-intro { display:flex; flex-direction:column; justify-content:center; padding-left:4px; }
    .flow-intro strong { font-size:11px; }
    .flow-intro span { margin-top:3px; color:var(--muted); font:500 7px IBM Plex Mono,monospace; }
    .flow-card { min-width:0; border:1px solid var(--line); border-radius:10px; padding:8px 10px; background:var(--panel-2); color:var(--ink); text-align:left; display:grid; grid-template-columns:25px minmax(0,1fr) auto; align-items:center; gap:8px; transition:border-color .2s ease,box-shadow .2s ease,background .2s ease; }
    .flow-card:hover { border-color:color-mix(in srgb,var(--blue) 50%,var(--line)); }
    .flow-card.active { border-color:var(--blue); background:#edf7ff; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--blue) 22%,transparent); }
    .flow-num { width:25px; height:25px; display:grid; place-items:center; border-radius:7px; color:var(--blue-2); background:#dceeff; font:700 9px IBM Plex Mono,monospace; }
    .flow-card.active .flow-num { color:#fff; background:var(--blue); }
    .flow-copy { min-width:0; }
    .flow-copy strong,.flow-copy span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .flow-copy strong { font-size:9px; }
    .flow-copy span { margin-top:2px; color:var(--muted); font-size:7px; }
    .flow-state { color:var(--green-2); font:600 7px IBM Plex Mono,monospace; white-space:nowrap; }

    .workspace { min-height:0; border-radius:17px; overflow:hidden; display:grid; grid-template-columns:188px minmax(0,1fr) 270px; }
    .agent-rail { min-width:0; padding:14px 11px; border-right:1px solid var(--line); background:var(--panel); }
    .panel-label { display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--muted); font:500 9px IBM Plex Mono,monospace; text-transform:uppercase; letter-spacing:.04em; }
    .panel-label b { color:var(--green-2); font-weight:600; }
    .agent-list { display:grid; gap:6px; margin-top:10px; }
    .agent-row { width:100%; min-width:0; border:1px solid transparent; border-radius:9px; padding:8px; display:grid; grid-template-columns:29px minmax(0,1fr) auto; align-items:center; gap:8px; background:transparent; color:var(--ink); text-align:left; }
    .agent-row:hover, .agent-row.active { border-color:var(--line); background:var(--panel-2); }
    .agent-row.active { box-shadow:inset 3px 0 var(--blue); }
    .agent-avatar { width:29px; height:29px; display:grid; place-items:center; border-radius:7px; color:#fff; background:var(--blue); font:600 9px IBM Plex Mono,monospace; }
    .agent-copy { min-width:0; }
    .agent-copy strong, .agent-copy span { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
    .agent-copy strong { font-size:9px; }
    .agent-copy span { margin-top:2px; color:var(--muted); font-size:7px; }
    .agent-load { color:var(--green-2); font:600 8px IBM Plex Mono,monospace; }
    .capacity { margin-top:14px; padding:11px 3px 0; border-top:1px solid var(--line); }
    .capacity-copy { display:flex; justify-content:space-between; gap:8px; color:var(--muted); font-size:8px; }
    .capacity-copy b { color:var(--ink); font:600 8px IBM Plex Mono,monospace; }
    .meter { height:4px; margin-top:7px; border-radius:8px; overflow:hidden; background:var(--line); }
    .meter span { display:block; width:68%; height:100%; background:var(--green); transition:width .3s ease; }

    .scene { min-width:0; min-height:0; position:relative; overflow:hidden; cursor:grab; touch-action:none; background-color:var(--panel-2); background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size:32px 32px; }
    .scene.dragging { cursor:grabbing; }
    .scene-head { position:absolute; z-index:12; left:12px; right:12px; top:11px; display:flex; align-items:flex-start; justify-content:space-between; gap:10px; pointer-events:none; }
    .scene-title, .scene-rate { padding:7px 9px; border:1px solid var(--line); border-radius:8px; background:color-mix(in srgb,var(--panel) 92%,transparent); box-shadow:0 6px 18px rgba(26,75,110,.08); }
    .scene-title strong { display:block; font-size:10px; }
    .scene-title span { display:block; margin-top:2px; color:var(--muted); font-size:8px; }
    .scene-rate { color:var(--blue-2); font:600 8px/1.5 IBM Plex Mono,monospace; text-align:right; }
    .world { position:absolute; left:0; top:0; width:1000px; height:650px; transform-origin:0 0; will-change:transform; }
    .links { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
    .link { fill:none; stroke:color-mix(in srgb,var(--blue) 22%,transparent); stroke-width:3; stroke-dasharray:5 9; stroke-linecap:round; }
    .link.active { stroke:var(--green); stroke-width:4; stroke-dasharray:10 8; animation:dash 1.2s linear infinite; }
    .floor-zone { position:absolute; border:1px solid color-mix(in srgb,var(--blue) 16%,var(--line)); border-radius:22px; background:color-mix(in srgb,var(--panel) 82%,transparent); box-shadow:0 12px 30px rgba(32,91,126,.06); }
    .floor-zone.a { left:34px; top:62px; width:415px; height:245px; }
    .floor-zone.b { right:34px; top:62px; width:415px; height:245px; }
    .floor-zone.c { left:116px; right:116px; bottom:42px; height:238px; }
    .aisle { position:absolute; left:475px; top:45px; width:50px; height:560px; border-left:2px dashed color-mix(in srgb,var(--green) 25%,transparent); border-right:2px dashed color-mix(in srgb,var(--green) 25%,transparent); background:color-mix(in srgb,var(--green) 5%,transparent); }
    .station { position:absolute; z-index:2; width:136px; min-height:86px; transform:translate(-50%,-50%); padding:11px 10px 9px; border:1px solid var(--line); border-radius:13px; background:var(--panel); box-shadow:0 10px 25px rgba(18,75,110,.10); text-align:center; }
    .station svg { width:32px; height:32px; stroke:var(--blue); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
    .station.green svg { stroke:var(--green-2); }
    .station::after { content:""; position:absolute; inset:-5px; border:2px solid transparent; border-radius:17px; pointer-events:none; }
    .station.step-active { border-color:var(--green); box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 15%,transparent),0 16px 34px rgba(18,75,110,.14); }
    .station.step-active::after { border-color:color-mix(in srgb,var(--green) 42%,transparent); animation:stationPulse 1.25s ease-in-out infinite; }
    .station strong { display:block; margin-top:2px; font-size:10px; }
    .station span { display:block; margin-top:2px; color:var(--muted); font:500 7px IBM Plex Mono,monospace; }
    .hub { position:absolute; z-index:2; left:500px; top:326px; transform:translate(-50%,-50%); width:116px; height:92px; border:1px solid color-mix(in srgb,var(--green) 52%,var(--line)); border-radius:18px; background:var(--panel); box-shadow:0 15px 44px color-mix(in srgb,var(--green) 16%,transparent); display:grid; place-items:center; }
    .hub::after { content:"ĐIỀU PHỐI"; position:absolute; bottom:9px; color:var(--muted); font:600 7px IBM Plex Mono,monospace; }
    .hub-core { width:76px; height:43px; border-radius:13px; background:linear-gradient(135deg,var(--blue),var(--green)); display:grid; place-items:center; color:#fff; font:700 10px/1.15 IBM Plex Mono,monospace; text-align:center; }
    .node { position:absolute; z-index:8; width:64px; height:64px; padding:0; border:0; color:var(--ink); background:transparent; text-align:center; offset-rotate:0deg; animation:workerMove var(--dur,18s) linear infinite; }
    .node * { pointer-events:none; }
    .node:hover { z-index:12; }
    .node.active .person-wrap { box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 22%,transparent),0 9px 20px rgba(22,80,120,.22); }
    .node.priority .person-wrap { box-shadow:0 0 0 4px color-mix(in srgb,var(--amber) 30%,transparent),0 9px 20px rgba(22,80,120,.22); }
    .person-wrap { position:absolute; left:11px; top:10px; width:42px; height:45px; border-radius:16px 16px 13px 13px; background:var(--panel); border:1px solid var(--line); box-shadow:0 7px 15px rgba(22,80,120,.16); transition:.2s ease; }
    .person { position:absolute; left:11px; top:5px; width:20px; height:33px; }
    .device { display:none; position:absolute; z-index:3; left:0; top:17px; width:20px; height:11px; border:2px solid var(--blue); border-radius:2px; background:var(--panel); }
    .keyboard { display:none; position:absolute; z-index:4; left:0; top:29px; width:21px; height:5px; border:1px solid var(--blue); border-radius:3px; background:#dff0ff; }
    .chair { display:none; position:absolute; z-index:-1; left:1px; top:23px; width:18px; height:12px; border:2px solid var(--green-2); border-radius:3px 3px 7px 7px; }
    .node[data-id="linh"] { animation-name:linhMove; }
    .node[data-id="linh"] .person { animation:linhDesk var(--dur,19s) linear infinite; animation-delay:var(--delay,0s); }
    .node[data-id="linh"] .device,.node[data-id="linh"] .keyboard,.node[data-id="linh"] .chair { display:block; animation:deviceCycle var(--dur,19s) linear infinite; animation-delay:var(--delay,0s); }
    .node[data-id="linh"] .arm { animation:linhArms var(--dur,19s) linear infinite; animation-delay:var(--delay,0s); }
    .node[data-id="linh"] .leg { animation:linhLegs var(--dur,19s) linear infinite; animation-delay:var(--delay,0s); }
    .head { position:absolute; left:5px; top:0; width:11px; height:11px; border-radius:50%; background:var(--skin,#efc3a3); border:1px solid color-mix(in srgb,var(--skin,#efc3a3) 60%,#80563d); }
    .hair { position:absolute; left:4px; top:-1px; width:13px; height:6px; border-radius:8px 8px 4px 3px; background:var(--hair,#20394b); }
    .body { position:absolute; left:3px; top:11px; width:15px; height:14px; border-radius:5px 5px 3px 3px; background:var(--shirt,var(--blue)); }
    .arm,.leg { position:absolute; width:4px; border-radius:4px; transform-origin:top center; }
    .arm { top:13px; height:13px; background:var(--skin,#efc3a3); }
    .arm.a { left:1px; animation:armSwing .55s ease-in-out infinite alternate; }
    .arm.b { right:0; animation:armSwing .55s ease-in-out infinite alternate-reverse; }
    .leg { top:24px; height:11px; background:#294255; }
    .leg.a { left:5px; animation:legSwing .55s ease-in-out infinite alternate; }
    .leg.b { right:4px; animation:legSwing .55s ease-in-out infinite alternate-reverse; }
    .worker-bubble { position:absolute; left:50%; bottom:63px; transform:translateX(-50%); min-width:106px; max-width:132px; padding:6px 7px; border:1px solid var(--line); border-radius:8px; background:var(--panel); box-shadow:0 7px 16px rgba(18,71,105,.12); pointer-events:none; }
    .worker-bubble::after { content:""; position:absolute; left:50%; bottom:-5px; width:8px; height:8px; margin-left:-4px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--panel); transform:rotate(45deg); }
    .worker-bubble strong,.worker-bubble span { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .worker-bubble strong { font-size:9px; }
    .worker-bubble span { margin-top:2px; color:var(--green-2); font:600 7px IBM Plex Mono,monospace; }
    .node[aria-pressed="true"] .worker-bubble { border-color:var(--blue); }
    .scene.paused .node,.scene.paused .person,.scene.paused .device,.scene.paused .keyboard,.scene.paused .chair,.scene.paused .arm,.scene.paused .leg { animation-play-state:paused !important; }
    .zoom-controls { position:absolute; z-index:15; right:12px; bottom:12px; padding:4px; display:flex; gap:3px; border:1px solid var(--line); border-radius:9px; background:var(--panel); box-shadow:0 8px 22px rgba(24,71,106,.10); }
    .icon-btn { width:31px; height:29px; border:1px solid transparent; display:grid; place-items:center; color:var(--ink); font:700 15px IBM Plex Mono,monospace; }
    .zoom-value { min-width:42px; display:grid; place-items:center; color:var(--muted); font:500 8px IBM Plex Mono,monospace; }
    .hint { position:absolute; z-index:11; left:13px; bottom:14px; color:var(--muted); font:500 8px IBM Plex Mono,monospace; pointer-events:none; }

    .detail-panel { min-width:0; padding:14px; border-left:1px solid var(--line); background:var(--panel); position:relative; }
    .detail-close { display:none; }
    .status { display:inline-flex; align-items:center; gap:6px; margin-top:14px; color:var(--green-2); font:600 8px IBM Plex Mono,monospace; }
    .status::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
    .detail-panel h2 { margin:8px 0 3px; font-size:18px; line-height:1.15; letter-spacing:-.025em; }
    .detail-type { color:var(--muted); font-size:8px; }
    .detail-summary { margin:12px 0; color:var(--muted); font-size:10px; line-height:1.55; }
    .agent-focus-head { display:flex; align-items:center; gap:11px; margin-top:14px; }
    .agent-focus-avatar { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; color:#fff; background:linear-gradient(145deg,#0d53dd,#0097ff); box-shadow:0 0 0 4px rgba(0,115,255,.1),0 8px 20px rgba(0,51,201,.18); font:800 11px IBM Plex Mono,monospace; }
    .agent-focus-head h2 { margin:0 0 3px; }
    .agent-progress-label { display:flex; justify-content:space-between; gap:8px; margin-top:12px; color:var(--muted); font:600 8px IBM Plex Mono,monospace; }
    .agent-progress-label b { color:var(--blue-2); }
    .agent-progress { height:7px; margin-top:6px; overflow:hidden; border-radius:10px; background:var(--line); }
    .agent-progress span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--blue),#139cff); }
    .detail-stats { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
    .detail-stat { padding:8px; border:1px solid var(--line); border-radius:8px; background:var(--panel-2); }
    .detail-stat span, .detail-stat b { display:block; }
    .detail-stat span { color:var(--muted); font:500 7px IBM Plex Mono,monospace; }
    .detail-stat b { margin-top:4px; font:600 11px IBM Plex Mono,monospace; }
    .now-doing { margin-top:13px; padding-top:11px; border-top:1px solid var(--line); }
    .now-doing strong { color:var(--muted); font:500 8px IBM Plex Mono,monospace; text-transform:uppercase; }
    .now-doing p { margin:6px 0 0; font-size:10px; line-height:1.5; }
    .action-btn { width:100%; margin-top:13px; padding:9px 10px; border:0; border-radius:8px; background:var(--blue); color:#fff; font-size:9px; font-weight:800; }
    .action-btn:hover { background:var(--blue-2); }
    .flow-status-row { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:13px; }
    .flow-live { display:inline-flex; align-items:center; gap:6px; color:var(--green-2); font:700 8px IBM Plex Mono,monospace; }
    .flow-live::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; animation:pulse 1.4s ease-in-out infinite; }
    .flow-counter { color:var(--blue-2); font:600 8px IBM Plex Mono,monospace; }
    .flow-progress { height:5px; margin:8px 0 13px; border-radius:8px; overflow:hidden; background:var(--line); }
    .flow-progress span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--blue),var(--green)); transition:width .35s ease; }
    .active-step { padding:12px; border-radius:10px; background:var(--panel-2); border:1px solid var(--line); }
    .active-step small { color:var(--blue-2); font:700 7px IBM Plex Mono,monospace; }
    .active-step h3 { margin:5px 0 4px; font-size:12px; line-height:1.25; }
    .active-step p { margin:0; color:var(--muted); font-size:9px; line-height:1.5; }
    .step-agent { display:flex; align-items:center; gap:7px; margin-top:9px; padding-top:8px; border-top:1px solid var(--line); }
    .step-agent i { width:22px; height:22px; display:grid; place-items:center; border-radius:6px; background:var(--blue); color:#fff; font:700 7px IBM Plex Mono,monospace; font-style:normal; }
    .step-agent span { font-size:8px; font-weight:700; }
    .next-steps { margin-top:12px; }
    .next-steps strong { color:var(--muted); font:600 7px IBM Plex Mono,monospace; text-transform:uppercase; }
    .mini-step { position:relative; margin-top:7px; padding-left:18px; color:var(--muted); font-size:8px; line-height:1.35; }
    .mini-step::before { content:""; position:absolute; left:2px; top:2px; width:7px; height:7px; border-radius:50%; border:2px solid var(--line); background:var(--panel); }
    .mini-step.done { color:var(--ink); }
    .mini-step.done::before { border-color:var(--green); background:var(--green); }
    .mini-step.current { color:var(--blue-2); font-weight:700; }
    .mini-step.current::before { border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 14%,transparent); }

    .event-strip { min-width:0; border-radius:15px; padding:10px 13px; display:grid; grid-template-columns:125px minmax(0,1fr); gap:13px; align-items:center; overflow:hidden; }
    .event-head strong { display:block; font-size:10px; }
    .event-head span { display:block; margin-top:4px; color:var(--muted); font:500 8px IBM Plex Mono,monospace; }
    .events { min-width:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); }
    .event { min-width:0; position:relative; padding:4px 10px 4px 15px; border-left:1px solid var(--line); }
    .event::before { content:""; position:absolute; left:-4px; top:8px; width:7px; height:7px; border-radius:50%; background:var(--blue); }
    .event:first-child::before { background:var(--green); }
    .event time { color:var(--green-2); font:600 8px IBM Plex Mono,monospace; }
    .event strong, .event span { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
    .event strong { margin-top:4px; font-size:8px; }
    .event span { margin-top:2px; color:var(--muted); font-size:7px; }

    .toast { position:fixed; z-index:40; left:50%; bottom:116px; transform:translate(-50%,12px); padding:9px 12px; border-radius:9px; color:#fff; background:#102a3e; font-size:10px; opacity:0; pointer-events:none; transition:.22s ease; }
    .toast.show { opacity:1; transform:translate(-50%,0); }
    @keyframes pulse { 50% { opacity:.36; } }
    @keyframes stationPulse { 50% { opacity:.15; transform:scale(1.035); } }
    @keyframes dash { to { stroke-dashoffset:-17; } }
    @keyframes workerMove { from { offset-distance:0%; } to { offset-distance:100%; } }
    @keyframes linhMove { 0%,36% { offset-distance:0%; } 100% { offset-distance:100%; } }
    @keyframes linhDesk { 0%,36% { transform:translateY(6px) scaleY(.86); } 40%,100% { transform:none; } }
    @keyframes deviceCycle { 0%,36% { opacity:1; transform:translateY(0); } 40%,100% { opacity:0; transform:translateY(4px); } }
    @keyframes linhArms { 0%,8%,16%,24%,32%,36% { transform:rotate(72deg); } 4%,12%,20%,28%,34% { transform:rotate(57deg); } 42%,70% { transform:rotate(24deg); } 55%,100% { transform:rotate(-24deg); } }
    @keyframes linhLegs { 0%,36% { transform:rotate(78deg); height:9px; } 42%,70% { transform:rotate(20deg); height:11px; } 55%,100% { transform:rotate(-20deg); height:11px; } }
    @keyframes armSwing { from { transform:rotate(24deg); } to { transform:rotate(-24deg); } }
    @keyframes legSwing { from { transform:rotate(20deg); } to { transform:rotate(-20deg); } }

    @media (max-width:900px) {
      .app { grid-template-rows:58px 66px 110px minmax(0,1fr) 86px; }
      .flow-picker { grid-template-columns:100px repeat(4,minmax(105px,1fr)); overflow:hidden; }
      .flow-state { display:none; }
      .workspace { grid-template-columns:150px minmax(0,1fr); }
      .detail-panel { position:absolute; z-index:30; right:10px; top:148px; bottom:105px; width:min(270px,calc(100% - 20px)); border:1px solid var(--line); border-radius:13px; box-shadow:var(--shadow); transform:translateX(calc(100% + 24px)); visibility:hidden; pointer-events:none; transition:transform .22s ease,visibility 0s linear .22s; }
      .detail-panel.open { transform:translateX(0); visibility:visible; pointer-events:auto; transition-delay:0s; }
      .detail-close { display:grid; position:absolute; right:10px; top:9px; width:27px; height:27px; place-items:center; border:1px solid var(--line); border-radius:7px; background:var(--panel); color:var(--ink); }
      .kpi small { display:none; }
    }
    @media (max-width:680px) {
      html,body { overflow:auto; }
      .app { height:auto; min-height:100svh; padding:6px; grid-template-rows:92px 67px auto 660px 75px; gap:6px; }
      .topbar, .kpis, .flow-picker, .workspace, .event-strip { border-radius:11px; box-shadow:0 8px 25px rgba(27,79,117,.10); }
      .flow-picker { padding:7px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; overflow:visible; }
      .flow-intro { grid-column:1/-1; flex-direction:row; justify-content:space-between; align-items:center; padding:1px 3px 3px; }
      .flow-intro span { margin:0; }
      .commander-control { grid-template-columns:1fr auto; gap:5px; }
      .commander-badge { grid-column:1/-1; }
      .goal-select,.goal-input { width:100%; }
      .goal-input { grid-column:1/-1; }
      .mission-btn { grid-column:2; grid-row:2; }
      .goal-select { grid-column:1; grid-row:2; }
      .commander-card { width:112px; padding:5px 7px; }
      .commander-card span { display:none; }
      .flow-card { padding:7px; }
      .flow-copy span { display:none; }
      .topbar { padding:6px 8px 6px 11px; gap:7px; align-items:flex-start; }
      .title-block { padding-top:8px; }
      .title-block h1 { font-size:13px; }
      .title-block p { max-width:125px; font-size:7px; }
      .top-actions { flex:1; flex-wrap:wrap; gap:5px; }
      .segmented { position:static; order:5; width:100%; padding:3px; box-shadow:none; }
      .dept-btn { flex:1; padding:6px 3px; font-size:8px; }
      .site-select { width:100px; font-size:8px; }
      .clock { display:none; }
      .stream-btn { width:34px; padding:0; font-size:0; }
      .stream-btn::before { content:"Ⅱ"; font-size:12px; }
      .stream-btn[aria-pressed="true"]::before { content:"▶"; font-size:10px; }
      .kpi { padding:10px 8px; }
      .kpi-label { font-size:6px; }
      .kpi strong { font-size:19px; margin-top:7px; }
      .trend { display:none; }
      .workspace { display:block; position:relative; }
      .agent-rail { position:absolute; z-index:14; left:7px; right:7px; top:auto; bottom:7px; padding:5px; border:1px solid var(--line); border-radius:9px; background:color-mix(in srgb,var(--panel) 94%,transparent); }
      .agent-rail .panel-label, .capacity { display:none; }
      .agent-list { margin:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:3px; }
      .agent-row { display:flex; justify-content:center; padding:4px; }
      .agent-copy, .agent-load { display:none; }
      .agent-avatar { width:26px; height:25px; }
      .scene { width:100%; height:100%; }
      .scene-head { top:8px; left:8px; right:8px; }
      .scene-title, .scene-rate { padding:5px 7px; }
      .scene-title span { max-width:130px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
      .hint { display:none; }
      .zoom-controls { right:8px; bottom:48px; }
      .detail-panel { top:132px; bottom:87px; right:7px; width:calc(100% - 14px); max-height:405px; overflow:auto; }
      .event-strip { padding:7px 9px; grid-template-columns:86px minmax(0,1fr); gap:6px; }
      .event-head strong { font-size:8px; }
      .event-head span { font-size:6px; }
      .events { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .event:nth-child(n+3) { display:none; }
      .event { padding-left:10px; }
      .toast { bottom:130px; }
    }
    @media (prefers-reduced-motion:reduce) {
      *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
    }

    .brand-logo { width:94px; height:auto; display:block; flex:0 0 auto; }
    .brand-divider { width:1px; height:27px; background:var(--line); flex:0 0 auto; }
    .signup-btn { height:34px; padding:0 15px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; background:var(--green); color:#05270d; text-decoration:none; font-size:10px; font-weight:800; box-shadow:0 7px 18px rgba(0,196,46,.20); transition:background .2s ease,transform .2s ease; white-space:nowrap; }
    .signup-btn:hover { background:#00ad29; transform:translateY(-1px); }
    .scene { background:linear-gradient(145deg,#f8fcff 0%,#e9f4fb 52%,#e6f7ed 100%); }
    #threeCanvas { position:absolute; inset:0; width:100%; height:100%; display:block; outline:0; }
    .scene.fallback-mode #threeCanvas,
    .scene.fallback-mode .zoom-controls,
    .scene.fallback-mode .hint { display:none; }
    .scene-overlay { position:absolute; inset:0; z-index:10; overflow:hidden; pointer-events:none; }
    .scene::after { content:""; position:absolute; z-index:9; inset:0; pointer-events:none; background:radial-gradient(circle at 52% 42%,transparent 0 38%,rgba(0,51,201,.035) 66%,rgba(0,196,46,.055) 100%),linear-gradient(112deg,transparent 26%,rgba(255,255,255,.18) 45%,transparent 64%); background-size:100% 100%,220% 100%; mix-blend-mode:soft-light; animation:ambientSweep 11s ease-in-out infinite alternate; }
    .scene-label { position:absolute; min-width:102px; max-width:150px; padding:6px 8px; transform:translate(-50%,-100%); border:1px solid rgba(0,51,201,.18); border-radius:8px; background:rgba(255,255,255,.92); color:var(--ink); box-shadow:0 8px 22px rgba(18,63,102,.14); backdrop-filter:blur(8px); text-align:left; pointer-events:auto; transition:border-color .2s ease,opacity .2s ease,transform .2s ease; }
    .scene-label:hover,.scene-label.active { border-color:var(--blue); transform:translate(-50%,-100%) scale(1.03); }
    .scene-label.priority { border-color:var(--green); box-shadow:0 0 0 3px rgba(0,196,46,.12),0 8px 22px rgba(18,63,102,.16); }
    .scene-label strong,.scene-label span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .scene-label strong { font-size:9px; }
    .scene-label span { margin-top:2px; color:var(--green-2); font:600 7px IBM Plex Mono,monospace; }
    .station-tag { position:absolute; min-width:88px; padding:4px 7px; transform:translate(-50%,-50%); border-radius:6px; background:rgba(13,43,65,.82); color:#fff; font:600 7px IBM Plex Mono,monospace; text-align:center; letter-spacing:.02em; pointer-events:none; box-shadow:0 6px 15px rgba(13,43,65,.16); transition:.2s ease; }
    .station-tag.active { background:var(--green-2); box-shadow:0 0 0 4px rgba(0,196,46,.14),0 6px 18px rgba(0,143,34,.20); }
    .camera-chip { position:absolute; z-index:12; left:13px; top:68px; padding:5px 8px; border-radius:6px; background:rgba(255,255,255,.84); color:var(--muted); font:600 7px IBM Plex Mono,monospace; pointer-events:none; box-shadow:0 5px 14px rgba(22,70,106,.08); }
    .camera-chip span { display:inline-block; width:5px; height:5px; margin-right:5px; border-radius:50%; background:var(--red); animation:pulse 1.5s ease-in-out infinite; }
    .commander-control { grid-column:1/-1; display:grid; grid-template-columns:auto minmax(128px,170px) minmax(180px,1fr) auto; gap:7px; align-items:center; padding-top:7px; border-top:1px solid var(--line); }
    .commander-badge { display:inline-flex; align-items:center; gap:7px; color:#8b5f00; font:800 9px IBM Plex Mono,monospace; white-space:nowrap; }
    .commander-badge::before { content:"AI"; width:24px; height:24px; display:grid; place-items:center; border-radius:8px; color:#fff; background:linear-gradient(145deg,#0d53dd,#071b7a 58%,#e6ae28); box-shadow:0 0 0 3px rgba(230,174,40,.14),0 6px 14px rgba(0,51,201,.18); }
    .goal-select,.goal-input { height:31px; min-width:0; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--ink); padding:0 9px; font-size:9px; }
    .goal-input:focus,.goal-select:focus { outline:2px solid color-mix(in srgb,var(--blue) 22%,transparent); border-color:var(--blue); }
    .mission-btn { height:31px; padding:0 13px; border:0; border-radius:8px; color:#fff; background:linear-gradient(105deg,#0033C9,#006ee6 58%,#00a528); font-size:9px; font-weight:800; box-shadow:0 8px 20px rgba(0,51,201,.18); }
    .commander-card { display:none; position:absolute; z-index:18; left:50%; top:54%; width:132px; transform:translate(-50%,-108%); padding:6px 8px; border:1px solid rgba(220,163,25,.62); border-radius:10px; background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(239,247,255,.94)); box-shadow:0 0 0 4px rgba(230,174,40,.08),0 10px 25px rgba(12,57,120,.16); text-align:center; pointer-events:auto; transition:transform .35s cubic-bezier(.16,1,.3,1),opacity .25s ease; }
    .commander-card:hover { transform:translate(-50%,-108%) scale(1.035); }
    .commander-card b { display:block; color:#805500; font:800 8px IBM Plex Mono,monospace; }
    .commander-card strong { display:block; margin-top:3px; font-size:10px; }
    .commander-card span { display:block; margin-top:3px; color:var(--muted); font-size:7px; }
    .mission-mode .commander-card { animation:commanderPulse 1.8s ease-in-out infinite; }
    @keyframes commanderPulse { 50% { box-shadow:0 0 0 8px rgba(230,174,40,.06),0 16px 40px rgba(0,51,201,.23); } }
    @media (max-width:680px) {
      .brand-logo { width:71px; }
      .brand-divider { display:none; }
      .title-block { gap:7px; }
      .title-block .live-beacon { display:none; }
      .title-block h1,.title-block p { display:none; }
      .signup-btn { height:31px; padding:0 10px; font-size:9px; }
      .scene-label { min-width:84px; max-width:116px; padding:5px 6px; }
      .scene-label strong { font-size:8px; }
      .station-tag { min-width:70px; font-size:6px; }
      .camera-chip { top:41px; }
    }

    /* Department teams and live Vietnamese exchanges */
    .scene-label { min-width:88px; max-width:128px; padding:5px 7px; }
    .team-count { color:var(--blue-2); font:700 7px IBM Plex Mono,monospace; }
    .speech-bubble { position:absolute; z-index:24; width:max-content; max-width:230px; padding:9px 11px; transform:translate(-50%,calc(-100% + 9px)) scale(.94); border:1px solid var(--blue); border-radius:12px 12px 12px 3px; background:rgba(255,255,255,.97); color:var(--ink); box-shadow:0 14px 34px rgba(18,63,102,.22),0 0 0 1px rgba(255,255,255,.55) inset; font-size:10px; font-weight:700; line-height:1.42; opacity:0; filter:blur(2px); transition:opacity .32s cubic-bezier(.22,.8,.2,1),transform .42s cubic-bezier(.16,1,.3,1),filter .28s ease; pointer-events:none; will-change:transform,opacity; }
    .speech-bubble.show { opacity:1; filter:none; transform:translate(-50%,-100%) scale(1); }
    .speech-bubble.reply { border-color:var(--green); border-radius:12px 12px 3px 12px; }
    .speech-bubble::after { content:""; position:absolute; left:17px; bottom:-6px; width:10px; height:10px; border-right:1px solid var(--blue); border-bottom:1px solid var(--blue); background:inherit; transform:rotate(45deg); }
    .speech-bubble.reply::after { left:auto; right:17px; border-color:var(--green); }
    .speech-bubble b { display:block; margin-bottom:3px; color:var(--blue-2); font:700 7px IBM Plex Mono,monospace; text-transform:uppercase; }
    .speech-bubble.reply b { color:var(--green-2); }
    .exchange-chip { position:absolute; z-index:13; left:50%; bottom:12px; transform:translateX(-50%); max-width:calc(100% - 210px); padding:6px 10px; border:1px solid rgba(0,51,201,.14); border-radius:8px; background:rgba(255,255,255,.9); color:var(--muted); font:600 8px IBM Plex Mono,monospace; text-align:center; box-shadow:0 6px 18px rgba(18,63,102,.09); pointer-events:none; }
    .three-fallback { position:absolute; inset:0; z-index:4; padding:72px 14px 46px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:14px; overflow:hidden; background:radial-gradient(circle at 50% 16%,rgba(255,255,255,.95),transparent 28%),linear-gradient(155deg,#dff3ff 0%,#cfe9ff 42%,#d9f8e4 72%,#edf8ff 100%); }
    .three-fallback::before { content:""; position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(circle,rgba(255,255,255,.95) 0 1px,transparent 1.7px),radial-gradient(circle,rgba(0,196,46,.28) 0 1px,transparent 2px); background-position:0 0,17px 12px; background-size:39px 39px,61px 61px; opacity:.55; animation:starDrift 16s linear infinite; }
    .three-fallback::after { content:""; position:absolute; left:8%; right:8%; bottom:13%; height:25%; border-radius:50%; background:radial-gradient(ellipse,rgba(0,196,46,.16),transparent 65%); filter:blur(22px); pointer-events:none; }
    .fallback-room { min-width:0; position:relative; overflow:visible; padding:11px; border:1px solid rgba(255,255,255,.86); border-radius:48% 52% 42% 58% / 54% 44% 56% 46%; background:radial-gradient(circle at 50% 18%,rgba(255,255,255,.96),rgba(239,252,247,.88) 55%,rgba(176,229,204,.78)); box-shadow:0 18px 30px rgba(18,63,102,.12),0 8px 0 rgba(0,51,201,.08),inset 0 0 24px rgba(255,255,255,.74); }
    .fallback-room.active { border-color:var(--green); box-shadow:0 0 0 5px rgba(0,196,46,.10),0 18px 38px rgba(18,63,102,.16),0 10px 0 rgba(0,51,201,.08); }
    .fallback-room h4 { margin:0; color:var(--blue-2); font:800 8px IBM Plex Mono,monospace; text-shadow:0 1px #fff; }
    .fallback-room p { margin:2px 0 0; color:var(--green-2); font:600 7px IBM Plex Mono,monospace; }
    .fallback-team { height:calc(100% - 24px); display:flex; align-items:flex-end; justify-content:space-around; gap:4px; position:relative; }
    .fallback-team::before,.fallback-team::after { content:""; position:absolute; bottom:4px; width:17px; height:32px; border-radius:70% 30% 60% 40%; background:linear-gradient(145deg,#8df0a3,#00a92c); box-shadow:0 0 12px rgba(0,196,46,.36); transform:rotate(-15deg); }
    .fallback-team::before { left:5px; } .fallback-team::after { right:5px; transform:rotate(18deg) scale(.8); }
    .fallback-person { width:54px; padding:0; border:0; background:transparent; text-align:center; color:var(--muted); font:600 6px IBM Plex Mono,monospace; cursor:pointer; }
    .fallback-person:focus-visible { outline:2px solid var(--blue); outline-offset:2px; border-radius:7px; }
    .fallback-avatar { position:relative; width:52px; height:51px; margin:0 auto 2px; animation:deskWork 1.1s ease-in-out infinite alternate; }
    .fallback-avatar::before { content:""; position:absolute; z-index:2; left:25px; top:-5px; width:2px; height:7px; border-radius:3px; background:#b9cad6; box-shadow:0 -2px 0 1px #68bfff,0 -2px 7px 2px rgba(0,115,255,.72); }
    .fallback-avatar::after { content:""; position:absolute; z-index:0; left:11px; bottom:7px; width:30px; height:7px; border:2px solid #36a2ff; border-radius:50%; background:rgba(0,84,255,.14); box-shadow:0 0 9px 3px rgba(0,115,255,.46),inset 0 0 5px rgba(100,210,255,.9); }
    .fallback-head { position:absolute; z-index:4; left:13px; top:1px; width:27px; height:19px; border:2px solid #d9e7ef; border-radius:12px 12px 10px 10px; background:linear-gradient(145deg,#fff,#dce9f1); box-shadow:-5px 2px 0 -1px #f4fbff,5px 2px 0 -1px #f4fbff,-7px 2px 7px -1px rgba(0,115,255,.65),7px 2px 7px -1px rgba(0,115,255,.65),0 4px 8px rgba(20,73,116,.16); }
    .fallback-head::before { content:""; position:absolute; left:3px; right:3px; top:3px; height:10px; border-radius:8px; background:#071a31; box-shadow:inset 0 1px 4px #154e8e; }
    .fallback-head::after { content:"••"; position:absolute; left:0; right:0; top:1px; color:#8ee6ff; font:900 13px/12px IBM Plex Mono,monospace; letter-spacing:3px; text-align:center; text-shadow:0 0 5px #168cff,0 0 8px #168cff; }
    .fallback-body { position:absolute; z-index:3; left:16px; top:21px; width:21px; height:22px; border:2px solid #d5e4ed; border-radius:12px 12px 14px 14px; background:linear-gradient(145deg,#fff,#dce9f1); box-shadow:-8px 4px 0 -3px #eef7fc,8px 4px 0 -3px #eef7fc,-10px 7px 0 -5px #1678ef,10px 7px 0 -5px #1678ef,0 5px 9px rgba(20,73,116,.18); }
    .fallback-body::after { content:"AI"; position:absolute; left:3px; right:3px; top:4px; height:11px; border-radius:6px; background:linear-gradient(145deg,#0d53dd,#0097ff); color:#fff; font:800 7px/11px Manrope,sans-serif; text-align:center; text-shadow:0 0 4px rgba(255,255,255,.75); box-shadow:0 0 6px rgba(0,115,255,.55); }
    .fallback-arm { position:absolute; z-index:3; top:23px; width:15px; height:25px; transform-origin:50% 3px; }
    .fallback-arm.left { left:4px; transform:rotate(18deg); }
    .fallback-arm.right { right:4px; transform:rotate(-18deg); }
    .fallback-arm .shoulder,.fallback-arm .elbow,.fallback-arm .wrist { position:absolute; left:4px; width:7px; height:7px; border-radius:50%; background:radial-gradient(circle at 35% 28%,#67cfff,#0878ff 62%,#004fbe); box-shadow:0 0 5px rgba(0,115,255,.62); }
    .fallback-arm .shoulder { top:0; }
    .fallback-arm .upper,.fallback-arm .fore { position:absolute; left:5px; width:6px; border:1px solid #c9dbe6; border-radius:6px; background:linear-gradient(90deg,#d9e8f1,#fff 48%,#d3e3ed); box-shadow:inset 1px 0 rgba(255,255,255,.85); }
    .fallback-arm .upper { top:5px; height:9px; transform:rotate(7deg); }
    .fallback-arm .elbow { top:11px; left:5px; width:6px; height:6px; }
    .fallback-arm .fore { top:15px; height:8px; transform:rotate(-7deg); }
    .fallback-arm .wrist { top:20px; left:5px; width:6px; height:6px; }
    .fallback-hand { position:absolute; left:3px; top:24px; width:10px; height:7px; border:1px solid #c9dbe6; border-radius:55% 55% 65% 65%; background:linear-gradient(145deg,#fff,#d9e8f1); box-shadow:-3px 2px 0 -1px #eef7fc,3px 2px 0 -1px #eef7fc; }
    .fallback-imac { display:none; position:absolute; z-index:2; left:1px; bottom:0; width:50px; height:27px; padding:3px 3px 2px; overflow:hidden; border:2px solid #aebdc5; border-radius:3px; background:#092337; color:#fff; box-shadow:0 4px 0 -1px #aebdc5; font-style:normal; text-align:left; }
    .fallback-imac::before { content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--shirt); }
    .fallback-imac b,.fallback-imac span { position:relative; z-index:1; display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
    .fallback-imac b { margin-top:2px; color:#fff; font:700 5px IBM Plex Mono,monospace; }
    .fallback-imac span { margin-top:1px; color:#83ef9e; font:600 5px IBM Plex Mono,monospace; }
    .fallback-person.walking .fallback-avatar { animation:walkTiny .48s ease-in-out infinite alternate; }
    .fallback-room-talk { position:absolute; z-index:7; left:50%; top:52%; width:max-content; max-width:170px; transform:translate(-50%,-50%); padding:6px 8px; border:1px solid var(--blue); border-radius:9px 9px 9px 3px; background:#fff; color:var(--ink); font-size:8px; font-weight:700; line-height:1.35; box-shadow:0 8px 18px rgba(18,63,102,.16); animation:talkPop 1.8s ease-in-out infinite alternate; }
    .fallback-room-talk.reply { top:72%; border-color:var(--green); border-radius:9px 9px 3px 9px; animation-delay:.65s; }
    .fallback-room-talk b { display:block; margin-bottom:2px; color:var(--green-2); font:700 6px IBM Plex Mono,monospace; }
    @keyframes deskWork { to { transform:translateY(1px) rotate(1deg); } }
    @keyframes walkTiny { from { transform:translate(-4px,-1px) rotate(-3deg); } to { transform:translate(4px,1px) rotate(3deg); } }
    @keyframes starDrift { to { background-position:39px 78px,78px 134px; } }
    @keyframes talkPop { from { opacity:.78; transform:translate(-50%,-50%) scale(.96); } to { opacity:1; transform:translate(-50%,-50%) scale(1); } }
    @keyframes ambientSweep { from { background-position:0 0,-25% 0; } to { background-position:0 0,120% 0; } }
    @media (max-width:680px) {
      html,body { height:100%; overflow:hidden; }
      .app { height:100svh; min-height:0; padding:6px; grid-template-rows:76px 60px 158px minmax(0,1fr) 56px; gap:6px; }
      .topbar { padding:6px 8px; align-items:flex-start; }
      .title-block { padding-top:5px; }
      .top-actions { align-content:start; }
      .site-select { height:30px; }
      .stream-btn { height:30px; }
      .segmented { margin-top:1px; }
      .kpi { padding:8px; }
      .kpi strong { font-size:18px; margin-top:5px; }
      .flow-picker { padding:6px; grid-template-rows:20px 40px 40px 38px; }
      .flow-intro { padding:0 3px 2px; }
      .flow-intro strong { font-size:10px; }
      .flow-intro span { font-size:6px; }
      .flow-card { min-height:0; padding:5px 7px; grid-template-columns:24px minmax(0,1fr); }
      .flow-num { width:24px; height:24px; }
      .commander-control { grid-template-columns:28px 76px minmax(0,1fr) 104px; grid-template-rows:32px; gap:5px; padding-top:4px; }
      .commander-badge { grid-column:1; grid-row:1; width:28px; overflow:hidden; color:transparent; font-size:0; }
      .commander-badge::before { width:26px; height:26px; }
      .goal-select { grid-column:2; grid-row:1; width:76px; height:30px; padding:0 4px; font-size:0; }
      .goal-input { grid-column:3; grid-row:1; width:100%; height:30px; padding:0 7px; font-size:8px; }
      .mission-btn { grid-column:4; grid-row:1; height:30px; padding:0 7px; font-size:8px; }
      .workspace { min-height:0; }
      .agent-rail { bottom:5px; padding:4px; }
      .agent-list { grid-template-columns:repeat(7,minmax(0,1fr)); }
      .agent-avatar { width:24px; height:23px; font-size:7px; }
      .detail-panel { top:78px; bottom:45px; max-height:none; }
      .event-strip { padding:6px 8px; grid-template-columns:76px minmax(0,1fr); }
      .event-head span { display:none; }
      .speech-bubble { max-width:145px; padding:6px 8px; font-size:8px; }
      .exchange-chip { bottom:37px; max-width:calc(100% - 90px); padding:4px 7px; font-size:6px; }
      .scene-label { display:none !important; }
      .three-fallback { padding:70px 7px 72px; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(4,minmax(0,1fr)); gap:5px; }
      .fallback-room { padding:5px; min-height:0; overflow:hidden; }
      .fallback-room:nth-child(7) { grid-column:1/-1; width:50%; justify-self:center; }
      .fallback-room h4 { font-size:6px; }
      .fallback-room p { font-size:5px; }
      .fallback-room-talk { left:5px; right:5px; top:24px; width:auto; max-width:none; max-height:32px; overflow:hidden; transform:none; padding:4px 5px; font-size:6px; }
      .fallback-room-talk.reply { display:none; }
      .fallback-room-talk { animation:none; pointer-events:none; }
      .fallback-team { height:50px; padding-top:8px; align-items:flex-end; }
      .fallback-person { width:38px; overflow:visible; font-size:5px; }
      .fallback-avatar { transform:scale(.54); transform-origin:bottom center; margin-bottom:-10px; }
      .fallback-person.walking .fallback-avatar { animation:none; }
      .fallback-room.active { min-height:0; }
      .fallback-room.active .fallback-team { display:flex; height:50px; margin-top:0; padding-top:8px; }
      .fallback-room.active .fallback-room-talk { left:4px; right:4px; top:22px; bottom:auto; width:auto; min-height:0; max-height:30px; overflow:hidden; }
      .fallback-room.active .fallback-room-talk.reply { left:4px; right:4px; top:auto; bottom:3px; }
      .zoom-controls { display:none; }
    }

    /* Luminous self-contained AI garden — layered DOM art, no external renderer */
    .three-fallback {
      display:block; padding:0; isolation:isolate; perspective:900px;
      background:
        radial-gradient(ellipse at 50% 4%,rgba(255,255,255,.98) 0 8%,rgba(213,242,255,.76) 34%,transparent 58%),
        radial-gradient(ellipse at 12% 72%,rgba(0,196,46,.18),transparent 32%),
        radial-gradient(ellipse at 86% 80%,rgba(0,51,201,.16),transparent 36%),
        linear-gradient(160deg,#eefaff 0%,#cbeaff 44%,#d7f8e2 76%,#f7fdff 100%);
    }
    .three-fallback::before {
      background-image:radial-gradient(circle,rgba(255,255,255,.96) 0 1px,transparent 1.8px),radial-gradient(circle,rgba(52,184,255,.48) 0 1px,transparent 2.1px),radial-gradient(circle,rgba(0,196,46,.38) 0 1px,transparent 2px);
      background-position:0 0,18px 26px,41px 13px; background-size:46px 46px,71px 71px,93px 93px; opacity:.82;
    }
    .three-fallback::after { left:6%; right:6%; bottom:-4%; height:34%; background:radial-gradient(ellipse,rgba(0,196,46,.21),rgba(0,114,221,.09) 45%,transparent 72%); filter:blur(28px); }
    .garden-sky { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:-1; }
    .garden-sky::before,.garden-sky::after { content:""; position:absolute; border-radius:50%; filter:blur(18px); opacity:.58; }
    .garden-sky::before { width:42%; height:24%; left:-8%; top:15%; background:rgba(255,255,255,.9); box-shadow:260px -34px 0 rgba(255,255,255,.72),580px 24px 0 rgba(255,255,255,.66); }
    .garden-sky::after { width:56%; height:22%; left:22%; bottom:-8%; background:rgba(160,242,203,.48); }
    .garden-sun { position:absolute; width:132px; height:132px; left:50%; top:-70px; transform:translateX(-50%); border-radius:50%; background:#fff; box-shadow:0 0 42px 20px rgba(113,209,255,.43),0 0 90px 46px rgba(255,255,255,.55); }
    .garden-particles { position:absolute; inset:0; }
    .garden-particles i { position:absolute; left:var(--x); top:var(--y); width:var(--s); height:var(--s); border-radius:50%; background:var(--c); box-shadow:0 0 7px 2px var(--c); opacity:.72; animation:firefly var(--d) ease-in-out var(--delay) infinite alternate; }
    .energy-path { position:absolute; z-index:0; height:5px; border-radius:99px; background:linear-gradient(90deg,transparent,#57d7ff 18%,#00C42E 50%,#57d7ff 82%,transparent); box-shadow:0 0 8px #42cfff,0 0 18px rgba(0,196,46,.45); opacity:.48; transform-origin:left center; }
    .energy-path.p1 { width:39%; left:13%; top:44%; transform:rotate(8deg); }
    .energy-path.p2 { width:36%; left:51%; top:45%; transform:rotate(-10deg); }
    .energy-path.p3 { width:32%; left:34%; top:65%; transform:rotate(-2deg); }
    .fallback-room {
      position:absolute; z-index:2; width:22.5%; height:31%; min-height:112px; padding:12px 13px 9px; overflow:visible;
      border:1px solid rgba(125,220,255,.9); border-radius:46% 54% 43% 57% / 58% 48% 52% 42%;
      background:radial-gradient(ellipse at 50% 24%,rgba(255,255,255,.99) 0 22%,rgba(239,255,250,.97) 48%,rgba(159,232,196,.92) 82%,rgba(80,186,157,.88) 100%);
      box-shadow:0 0 0 3px rgba(255,255,255,.72) inset,0 0 20px rgba(63,192,255,.28),0 10px 0 #8fcdd3,0 14px 4px rgba(0,51,201,.13),0 26px 34px rgba(16,78,110,.18);
      transform:rotateX(4deg); transform-style:preserve-3d; transition:filter .25s ease,box-shadow .25s ease,transform .25s ease;
    }
    .fallback-room::before { content:""; position:absolute; inset:5px; z-index:-1; border-radius:inherit; border:1px solid rgba(0,196,46,.34); box-shadow:inset 0 0 18px rgba(0,196,46,.20),0 0 13px rgba(0,98,255,.18); pointer-events:none; }
    .fallback-room::after { content:""; position:absolute; z-index:-2; left:8%; right:8%; height:22px; bottom:-18px; border-radius:0 0 48% 48%; background:linear-gradient(180deg,#8fcdd3 0%,#5fa8ba 48%,#347e9e 100%); box-shadow:0 12px 22px rgba(13,69,105,.24),inset 0 -4px 8px rgba(0,51,201,.18); }
    .fallback-room:nth-of-type(1) { left:2.5%; top:14%; }
    .fallback-room:nth-of-type(2) { left:27.5%; top:7%; }
    .fallback-room:nth-of-type(3) { left:52.5%; top:7%; }
    .fallback-room:nth-of-type(4) { left:77.5%; top:14%; transform:translateX(-2.5%) rotateX(4deg); }
    .fallback-room:nth-of-type(5) { left:7%; top:58%; }
    .fallback-room:nth-of-type(6) { left:32%; top:64%; }
    .fallback-room:nth-of-type(7) { left:70.5%; top:58%; }
    .fallback-room:hover,.fallback-room.active { filter:saturate(1.1) brightness(1.02); transform:rotateX(4deg) translateY(-3px); }
    .fallback-room:nth-of-type(4):hover,.fallback-room:nth-of-type(4).active { transform:translateX(-2.5%) rotateX(4deg) translateY(-3px); }
    .fallback-room.active { border-color:#00C42E; box-shadow:0 0 0 3px rgba(255,255,255,.8) inset,0 0 0 4px rgba(0,196,46,.16),0 0 28px rgba(0,196,46,.40),0 10px 0 #69c8a3,0 17px 6px rgba(0,51,201,.16),0 28px 38px rgba(16,78,110,.22); }
    .fallback-room h4 { position:relative; z-index:6; display:inline-block; margin:0; padding:4px 7px; border-radius:6px; color:#0033C9; background:rgba(255,255,255,.72); box-shadow:0 4px 12px rgba(0,51,201,.08); font:800 8px IBM Plex Mono,monospace; text-shadow:none; }
    .fallback-room p { position:relative; z-index:6; margin:4px 0 0 6px; color:#008F22; font:700 6px IBM Plex Mono,monospace; letter-spacing:.04em; }
    .fallback-team { position:absolute; inset:22px 4px 4px; height:auto; align-items:flex-end; z-index:4; }
    .fallback-team::before,.fallback-team::after { display:none; }
    .energy-tree { position:absolute; z-index:3; bottom:7px; width:17px; height:43px; transform-origin:bottom center; filter:drop-shadow(0 0 7px rgba(0,196,46,.48)); }
    .energy-tree.left { left:12px; transform:rotate(-8deg); }
    .energy-tree.right { right:12px; transform:rotate(9deg) scale(.88); }
    .energy-tree::before,.energy-tree::after,.energy-tree i { content:""; position:absolute; border-radius:70% 28% 68% 30%; background:linear-gradient(145deg,#b6ffcb 0%,#20d75a 50%,#00a52a 100%); box-shadow:inset 2px 2px 4px rgba(255,255,255,.6),0 0 10px rgba(0,196,46,.55); }
    .energy-tree::before { width:13px; height:25px; left:0; top:2px; transform:rotate(-18deg); }
    .energy-tree::after { width:12px; height:22px; right:-2px; top:10px; transform:rotate(22deg); }
    .energy-tree i { width:9px; height:18px; left:5px; top:0; }
    .energy-tree { border-bottom:16px solid rgba(0,112,59,.55); border-left:2px solid transparent; border-right:2px solid transparent; }
    .fallback-person { position:relative; z-index:5; width:72px; color:#486779; font-size:7px; font-weight:800; text-shadow:0 1px rgba(255,255,255,.9); }
    .fallback-avatar { width:64px; height:66px; margin:0 auto -1px; transform-origin:bottom center; filter:drop-shadow(0 12px 8px rgba(9,61,100,.18)); animation:robotFloat 1.9s ease-in-out infinite alternate; }
    .fallback-avatar::before { left:31px; top:-5px; width:3px; height:10px; background:linear-gradient(#eff8ff,#83a9c2); box-shadow:0 -3px 0 2px #9af3ff,0 -3px 10px 4px rgba(0,115,255,.82); }
    .fallback-avatar::after { left:10px; bottom:3px; width:43px; height:11px; border:2px solid #59cfff; background:radial-gradient(ellipse,rgba(160,239,255,.72),rgba(0,83,255,.15) 55%,transparent 70%); box-shadow:0 0 8px 3px rgba(0,115,255,.62),0 0 19px 5px rgba(0,196,46,.28),inset 0 0 7px #b6f5ff; }
    .fallback-head { left:15px; top:5px; width:35px; height:25px; border:2px solid #d7e7f1; border-radius:17px 17px 13px 13px; background:linear-gradient(145deg,#fff 8%,#edf7fc 48%,#bcd3e0 100%); box-shadow:-6px 3px 0 -1px #eef8fc,6px 3px 0 -1px #eef8fc,-8px 3px 9px -2px rgba(0,115,255,.72),8px 3px 9px -2px rgba(0,115,255,.72),inset 3px 2px 4px rgba(255,255,255,.9),0 7px 11px rgba(20,73,116,.22); }
    .fallback-head::before { left:4px; right:4px; top:4px; height:13px; border-radius:10px; background:radial-gradient(circle at 50% 0,#184e7a,#06172c 72%); box-shadow:inset 0 2px 5px #1a5a96,0 1px rgba(255,255,255,.55); }
    .fallback-head::after { top:3px; color:#c8f8ff; font-size:17px; line-height:14px; letter-spacing:5px; text-shadow:0 0 4px #68e7ff,0 0 9px #0878ff; }
    .fallback-body { left:18px; top:31px; width:29px; height:29px; border:2px solid #d0e1eb; border-radius:16px 16px 17px 17px; background:linear-gradient(145deg,#fff 4%,#eaf4f9 48%,#bad0dc 100%); box-shadow:-10px 5px 0 -4px #f1f9fd,10px 5px 0 -4px #f1f9fd,-12px 8px 0 -6px #1782f4,12px 8px 0 -6px #1782f4,inset 3px 2px 4px #fff,0 7px 12px rgba(20,73,116,.23); }
    .fallback-body::after { left:4px; right:4px; top:6px; height:13px; border-radius:7px; background:linear-gradient(145deg,#0033C9,#0b8cff 68%,#00C42E); font-size:8px; line-height:13px; box-shadow:0 0 9px rgba(0,115,255,.72); }
    .fallback-arm { top:33px; transform:scale(1.08); }
    .fallback-arm.left { left:5px; transform:rotate(22deg) scale(1.08); }
    .fallback-arm.right { right:5px; transform:rotate(-22deg) scale(1.08); }
    .fallback-room.active .fallback-avatar::after { border-color:#7bffa0; box-shadow:0 0 9px 4px rgba(0,196,46,.8),0 0 22px 8px rgba(0,115,255,.38),inset 0 0 8px #d7ffe1; }
    .fallback-room.active .fallback-avatar { animation:activeRobot 1s ease-in-out infinite alternate; }
    .fallback-room-talk { z-index:9; top:48%; max-width:154px; padding:6px 8px; border-radius:9px 9px 9px 3px; background:rgba(255,255,255,.96); font-size:7px; box-shadow:0 8px 20px rgba(0,51,201,.18),0 0 0 1px rgba(255,255,255,.6) inset; }
    .fallback-room-talk.reply { top:75%; }
    .garden-nexus { position:absolute; z-index:7; left:50%; top:49%; width:126px; height:112px; transform:translate(-50%,-50%); border:1px solid rgba(113,220,255,.9); border-radius:50%; background:radial-gradient(circle at 50% 28%,#fff 0 20%,#e5f7ff 49%,#a3dddf 72%,#5ca8be 100%); box-shadow:0 0 0 3px rgba(255,255,255,.78) inset,0 0 25px rgba(0,115,255,.34),0 9px 0 #5593b2,0 15px 26px rgba(0,51,201,.24); }
    .garden-nexus::before { content:""; position:absolute; inset:-12px; border:2px solid rgba(0,196,46,.48); border-left-color:rgba(0,51,201,.72); border-right-color:rgba(0,51,201,.72); border-radius:50%; box-shadow:0 0 13px rgba(0,196,46,.36),inset 0 0 13px rgba(0,115,255,.2); animation:nexusSpin 8s linear infinite; }
    .garden-nexus::after { content:"TỔNG CHỈ HUY"; position:absolute; left:50%; bottom:4px; transform:translateX(-50%); width:max-content; padding:3px 7px; border-radius:5px; background:#092850; color:#fff; font:800 6px IBM Plex Mono,monospace; letter-spacing:.08em; box-shadow:0 0 8px rgba(0,115,255,.55); }
    .garden-nexus .fallback-person { position:absolute; left:50%; bottom:10px; transform:translateX(-50%); }
    .garden-nexus .fallback-avatar { transform:scale(1.05); }
    .garden-nexus .fallback-body::after { background:linear-gradient(145deg,#0033C9,#0b68ee 60%,#e2ad25); }
    .scene.fallback-mode .commander-card { display:none; }
    .fallback-room:nth-of-type(5),.fallback-room:nth-of-type(6),.fallback-room:nth-of-type(7) { top:54%; height:28%; }
    .fallback-room:nth-of-type(1),.fallback-room:nth-of-type(2),.fallback-room:nth-of-type(3),.fallback-room:nth-of-type(4) { height:28%; }
    .fallback-avatar { animation:robotFloat 1.9s ease-in-out infinite alternate; }
    .fallback-room.active .fallback-avatar { animation:activeRobot 1s ease-in-out infinite alternate; }
    @keyframes firefly { from { transform:translate3d(0,6px,0) scale(.65); opacity:.22; } to { transform:translate3d(8px,-9px,0) scale(1.2); opacity:.92; } }
    @keyframes robotFloat { from { transform:translateY(1px) scale(.82) rotate(-.7deg); } to { transform:translateY(-3px) scale(.82) rotate(.7deg); } }
    @keyframes activeRobot { from { transform:translateY(1px) scale(.84); } to { transform:translateY(-4px) scale(.88); } }
    @keyframes nexusSpin { to { transform:rotate(360deg); } }
    @media (max-width:680px) {
      .three-fallback { padding:52px 6px 55px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(4,minmax(0,1fr)); gap:7px; }
      .energy-path { display:none; }
      .fallback-room,.fallback-room:nth-of-type(n) { position:relative; inset:auto; width:auto; height:auto; min-height:0; transform:none; padding:5px; overflow:hidden; border-radius:42% 58% 45% 55% / 55% 45% 55% 45%; }
      .fallback-room:hover,.fallback-room.active,.fallback-room:nth-of-type(4):hover,.fallback-room:nth-of-type(4).active { transform:none; }
      .fallback-room:nth-of-type(7) { grid-column:auto; width:auto; justify-self:stretch; }
      .fallback-room h4 { padding:2px 4px; font-size:5px; }
      .fallback-room p { margin-top:2px; font-size:4px; }
      .fallback-team,.fallback-room.active .fallback-team { inset:0; height:auto; margin:0; padding:0; display:block; }
      .fallback-team .fallback-person { position:absolute; left:50%; top:55%; width:50px; transform:translate(-50%,-50%); font-size:5px; }
      .fallback-avatar,.fallback-person.walking .fallback-avatar { transform:scale(.62); transform-origin:center center; margin:-8px auto -10px; animation:none; }
      .energy-tree { transform:scale(.55); bottom:-2px; }
      .energy-tree.right { transform:rotate(9deg) scale(.5); }
      .fallback-room-talk,.fallback-room.active .fallback-room-talk { left:5px; right:5px; top:24px; bottom:auto; width:auto; max-width:none; max-height:26px; transform:none; padding:3px 4px; font-size:5px; line-height:1.25; overflow:hidden; }
      .fallback-room-talk.reply { display:none; }
      .garden-nexus { position:relative; left:auto; top:auto; width:auto; height:auto; min-height:0; transform:none; grid-column:2; grid-row:4; border-radius:48%; }
      .garden-nexus .fallback-person { bottom:3px; }
      .garden-nexus .fallback-avatar { transform:scale(.6); margin-bottom:-12px; }
      .garden-nexus::after { bottom:2px; font-size:5px; }
      .garden-nexus::before { inset:-4px; }
    }

    /* WareTrack-inspired isometric operations floor */
    .scene { background:#f3f9fc; }
    .scene::after { background:linear-gradient(125deg,rgba(255,255,255,.28),transparent 48%,rgba(0,51,201,.025)); animation:none; mix-blend-mode:normal; }
    .scene-title,.scene-rate,.camera-chip,.zoom-controls { background:rgba(255,255,255,.94); backdrop-filter:blur(8px); }
    .scene-label { display:none; align-items:center; gap:6px; min-width:122px; max-width:165px; }
    .scene-label .label-avatar { width:28px; height:28px; flex:0 0 auto; }
    .scene-label .label-copy { min-width:0; text-align:left; }
    .scene-label .label-copy strong,.scene-label .label-copy span { display:block; }
    .station-tag { display:none; padding:5px 8px; border:1px solid rgba(0,51,201,.17); background:rgba(255,255,255,.96); color:#14334b; box-shadow:0 7px 18px rgba(18,63,102,.14); }
    .station-tag::before { content:""; display:inline-block; width:6px; height:6px; margin-right:5px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 3px rgba(0,51,201,.10); }
    .station-tag:nth-of-type(even)::before,.station-tag.active::before { background:var(--green); box-shadow:0 0 0 3px rgba(0,196,46,.12); }
    .station-tag.active { color:#fff; border-color:var(--green-2); background:var(--green-2); }
    .camera-chip span { background:var(--green); }
    .icon-btn[aria-pressed="true"] { color:#fff; background:var(--blue); border-color:var(--blue); }
    @media (max-width:680px) {
      .scene-head { right:6px; }
      .scene-rate { display:none; }
      .camera-chip { max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      .zoom-controls { display:flex; bottom:44px; }
      .zoom-controls .icon-btn { width:28px; height:27px; }
      .zoom-value { display:none; }
    }

    /* Character avatars — one robot personality per AI Agent */
    .bot-avatar { width:100%; height:100%; display:block; overflow:visible; filter:drop-shadow(0 3px 5px rgba(8,65,111,.18)); }
    .agent-avatar { width:34px; height:34px; padding:1px; border-radius:50%; color:inherit; background:transparent !important; }
    .agent-row { grid-template-columns:34px minmax(0,1fr) auto; }
    .agent-row.active .bot-avatar { filter:drop-shadow(0 0 5px var(--blue)); }
    .agent-focus-avatar { width:54px; height:54px; flex:0 0 auto; padding:0; border-radius:50%; background:transparent !important; box-shadow:none; }
    .commander-badge::before { display:none; }
    .commander-avatar { width:28px; height:28px; flex:0 0 auto; }
    .commander-card { display:block; width:150px; padding:7px 9px 8px; }
    .commander-card-avatar { width:37px; height:37px; display:block; margin:-26px auto 3px; }
    .commander-card b { margin-top:1px; }
    .speech-bubble { display:flex; align-items:flex-start; gap:7px; width:max-content; max-width:250px; border-width:2px; box-shadow:0 16px 38px rgba(18,63,102,.28),0 0 0 4px rgba(255,255,255,.72); }
    .speech-bubble.show { animation:speechAttention .42s cubic-bezier(.16,1,.3,1) both; }
    @keyframes speechAttention { from { opacity:0; transform:translate(-50%,calc(-100% + 14px)) scale(.88); } to { opacity:1; transform:translate(-50%,-100%) scale(1); } }
    .speech-avatar { width:31px; height:31px; flex:0 0 auto; margin:-3px 0 0 -4px; }
    .speech-copy { min-width:0; }
    .speech-copy b { display:block; }
    .fallback-room-talk { display:grid; grid-template-columns:22px minmax(0,1fr); align-items:start; column-gap:4px; }
    .fallback-room-talk .speech-avatar { width:23px; height:23px; grid-row:1 / span 2; margin:-2px 0 0 -2px; }
    .fallback-room-talk .speech-copy { min-width:0; }
    .step-agent-avatar { width:27px !important; height:27px !important; flex:0 0 auto; padding:0 !important; border-radius:50% !important; background:transparent !important; }
    @media (max-width:680px) {
      .agent-avatar { width:30px; height:30px; }
      .agent-row { grid-template-columns:30px minmax(0,1fr) auto; padding:2px; }
      .commander-avatar { width:27px; height:27px; }
      .commander-card { width:126px; padding:6px 7px 7px; }
      .commander-card-avatar { width:32px; height:32px; margin:-22px auto 2px; }
      .speech-bubble { max-width:176px; gap:5px; }
      .speech-avatar { width:27px; height:27px; }
      .fallback-room-talk { display:block; }
      .fallback-room-talk .speech-avatar { display:none; }
    }