/* Design read: an operator's phone dashboard inside Telegram; flat isometric office,
   chrome follows Telegram's own theme (--tg-theme-* set by telegram-web-app.js),
   ENERGY 2 / RHYTHM 2 / MOTION 1. System font on purpose: it matches Telegram's UI
   and loads instantly. The office scene has its own light and dark palette. */
:root {
  --bg: var(--tg-theme-bg-color, #ffffff);
  --bg-2: var(--tg-theme-secondary-bg-color, #f1f2f5);
  --section: var(--tg-theme-section-bg-color, #ffffff);
  --text: var(--tg-theme-text-color, #111418);
  --hint: var(--tg-theme-hint-color, #5d6672);
  --link: var(--tg-theme-link-color, #1f6fd1);
  --btn: var(--tg-theme-button-color, #2a7de1);
  --btn-text: var(--tg-theme-button-text-color, #ffffff);
  --up: #13793b;
  --down: #c0352b;
  --warn: #8a5a00;
  --line: rgba(0, 0, 0, 0.08);
  --nav-h: 60px;
  --safe-b: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
  /* office scene: Earth defense HQ (silver steel by day) */
  --wall-l: #d3dbe6; --wall-r: #c2ccda; --trim: #3fb6ff; --floor: #a9b4c4; --grid: rgba(20, 30, 60, 0.12);
  --desk-t: #5b6585; --desk-h: #8a96ad; --desk-l: #2b3a78; --desk-r: #3b4566; --pad: #1b2650;
  --rack: #3b4566; --rack-face: #1b2650; --led: #3fb6ff; --led-2: #5fd37f;
  --suit-s: #c9d3e0; --suit-sd: #8a96ad; --eyes: #fff3a6; --timer: #3fb6ff; --timer-busy: #ffd34d; --timer-error: #ff3d4f;
  --px-ink: #0b0d1a; --monitor: #14203f; --glow: #5cc2ff; --frame: #5b6585; --screen-bg: #0e1838; --scan: rgba(63, 182, 255, 0.35);
  --ocean: #1b6fd0; --ocean-hl: #3fb6ff; --land: #3fa45a;
  --clock: #ffffff; --ink: #0b0d1a; --shadow: rgba(10, 15, 40, 0.2);
  --bubble-bg: #ffffff; --bubble-text: #111418; --bubble-line: rgba(0, 0, 0, 0.14);
}
:root[data-scheme="dark"] {
  --bg: var(--tg-theme-bg-color, #17212b);
  --bg-2: var(--tg-theme-secondary-bg-color, #232e3c);
  --section: var(--tg-theme-section-bg-color, #17212b);
  --text: var(--tg-theme-text-color, #f2f4f7);
  --hint: var(--tg-theme-hint-color, #a3adba);
  --link: var(--tg-theme-link-color, #6ab3f3);
  --btn: var(--tg-theme-button-color, #5288c1);
  --up: #5fd37f;
  --down: #ff8a80;
  --warn: #f0c050;
  --line: rgba(255, 255, 255, 0.08);
  --wall-l: #1a2350; --wall-r: #141c3d; --trim: #3fb6ff; --floor: #10173a; --grid: rgba(63, 182, 255, 0.10);
  --desk-t: #3b4566; --desk-h: #5b6585; --desk-l: #141c3d; --desk-r: #2b3a78; --pad: #0b112b;
  --rack: #2b3a78; --rack-face: #0b112b; --led: #3fb6ff; --led-2: #5fd37f;
  --suit-s: #c9d3e0; --suit-sd: #8a96ad; --eyes: #fff3a6; --timer: #3fb6ff; --timer-busy: #ffd34d; --timer-error: #ff3d4f;
  --px-ink: #05070f; --monitor: #0b112b; --glow: #6fd0ff; --frame: #2b3a78; --screen-bg: #070a18; --scan: rgba(63, 182, 255, 0.25);
  --ocean: #1b4fa8; --ocean-hl: #3fb6ff; --land: #2f8a4a;
  --clock: #e6efff; --ink: #05070f; --shadow: rgba(0, 0, 0, 0.4);
  --bubble-bg: #2b3646; --bubble-text: #f2f4f7; --bubble-line: rgba(255, 255, 255, 0.12);
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-tap-highlight-color: transparent; }
button, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.top { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--bg); border-bottom: 1px solid var(--line); }
.top h1 { margin: 0; font-size: 20px; font-weight: 700; }
.badge { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; padding: 3px 8px; border-radius: 999px; background: var(--bg-2); color: var(--hint); }
.badge.ok { color: var(--up); }
.badge.ok::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: currentColor; vertical-align: 1px; animation: pulse 2s ease-in-out infinite; }
.badge.warn { color: var(--warn); }
.badge.bad { color: var(--down); }
.updated { margin-left: auto; font-size: 12px; color: var(--hint); font-variant-numeric: tabular-nums; }

main { padding: 12px 16px calc(var(--nav-h) + var(--safe-b) + 20px); max-width: 560px; margin: 0 auto; }
h2 { font-size: 17px; margin: 4px 0 12px; }
.notice { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--bg-2); border-left: 3px solid var(--down); }

/* performance board: PnL total is the focal tile */
.board { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 12px; }
.tile { background: var(--bg-2); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.tile.wide { grid-column: 1 / -1; }
.tile dt { font-size: 12px; color: var(--hint); }
.tile dd { margin: 2px 0 0; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tile.wide dd { font-size: 24px; }
.up { color: var(--up); }
.down { color: var(--down); }

/* office scene */
.office-host { flex: 1 0 auto; display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: var(--bg-2); }
.office { position: relative; flex: 1 0 auto; aspect-ratio: 340 / 240; }
.office-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* Kantor fills the screen between the header and the nav; the office card takes the rest. */
#tab-kantor:not([hidden]) { display: flex; flex-direction: column; min-height: calc(var(--tg-viewport-stable-height, 100dvh) - 53px - 12px - var(--nav-h) - var(--safe-b) - 20px); }
.wall-l { fill: var(--wall-l); } .wall-r { fill: var(--wall-r); } .floor-t { fill: var(--floor); }
.grid-px { fill: var(--grid); } .trim { fill: var(--trim); } .frame { fill: var(--frame); } .px-ink { fill: var(--px-ink); }
.desk-t { fill: var(--desk-t); } .desk-h { fill: var(--desk-h); } .desk-l { fill: var(--desk-l); } .desk-r { fill: var(--desk-r); } .pad { fill: var(--pad); }
.key-r { fill: var(--timer-error); } .key-y { fill: var(--timer-busy); } .key-g { fill: var(--led-2); }
.rack { fill: var(--rack); } .rack-face { fill: var(--rack-face); } .led { fill: var(--led); } .led-b { fill: var(--led-2); }
.led-a { animation: blink 1.6s steps(1) infinite; } .led-b { animation: blink 1.6s steps(1) 0.8s infinite; }
.suit-s { fill: var(--suit-s); } .suit-sd { fill: var(--suit-sd); } .eyes { fill: var(--eyes); }
.timer { fill: var(--timer); }
.status-idle .timer { opacity: 0.6; }
.status-busy .timer { fill: var(--timer-busy); animation: pulse 1.2s ease-in-out infinite; }
.status-error .timer { fill: var(--timer-error); animation: blink 0.5s steps(1) infinite; }
.light { fill: var(--timer); opacity: 0.6; } .light.status-working { opacity: 1; }
.light.status-busy { fill: var(--timer-busy); opacity: 1; animation: pulse 1.2s ease-in-out infinite; }
.light.status-error { fill: var(--timer-error); opacity: 1; animation: blink 0.5s steps(1) infinite; }
.screen-bg { fill: var(--screen-bg); } .scan { fill: var(--scan); }
.ocean { fill: var(--ocean); } .ocean-hl { fill: var(--ocean-hl); } .land { fill: var(--land); }
.clock-face { fill: var(--clock); }
.beam { fill: var(--ocean-hl); opacity: 0.45; } .holo { opacity: 0.85; animation: pulse 3s ease-in-out infinite; }
.monitor { fill: var(--monitor); }
.name { font: 600 10px system-ui, sans-serif; fill: var(--text); paint-order: stroke; stroke: var(--floor); stroke-width: 3px; }
.dot { fill: #8a94a3; stroke: var(--floor); stroke-width: 1.5; }
.alert { font: 800 8px system-ui, sans-serif; fill: #fff; opacity: 0; }
.status-working .dot { fill: #2f9e6a; }
.status-working .monitor { fill: var(--glow); }
.status-working .person { animation: bob 1.8s ease-in-out infinite; }
.status-busy .dot { fill: #e0a020; animation: pulse 1.2s ease-in-out infinite; }
.status-busy .monitor { fill: var(--glow); }
.status-error .dot { fill: #e0473c; }
.status-error .alert { opacity: 1; }
.status-error .person { animation: shake 2.4s ease-in-out infinite; }
.status-idle .person { opacity: 0.8; }
.person { transform-box: fill-box; transform-origin: bottom; }

.seat-hit { position: absolute; padding: 0; border: 0; background: transparent; border-radius: 10px; cursor: pointer; }
.seat-hit:focus-visible { outline: 2px solid var(--link); }
.bubbles { position: absolute; inset: 0; pointer-events: none; }
.bubble {
  position: absolute; transform: translate(-50%, -100%); max-width: 46%; pointer-events: auto;
  padding: 6px 8px; border-radius: 10px; border: 1px solid var(--bubble-line);
  background: var(--bubble-bg); color: var(--bubble-text); font-size: 11.5px; line-height: 1.3; text-align: left;
  box-shadow: 0 2px 6px var(--shadow); animation: pop 0.25s ease-out; cursor: pointer;
}
.bubble[hidden] { display: none; }
.bubble span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hint { font-size: 12px; color: var(--hint); margin: 8px 0 0; }

/* lists */
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.item { background: var(--bg-2); border-radius: 12px; padding: 10px 12px; }
.item-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.item-pnl { margin: 4px 0 2px; font-weight: 600; font-variant-numeric: tabular-nums; }
.item-meta { margin: 0; font-size: 12.5px; color: var(--hint); }
.chip { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--bg); color: var(--hint); margin: 0; }
.chip.ok, .st-working { color: var(--up); } .chip.warn, .st-busy { color: var(--warn); } .st-error { color: var(--down); }
.empty { color: var(--hint); padding: 16px 4px; text-align: center; }
.act { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: start; }
.act-icon { font-weight: 700; color: var(--hint); text-align: center; }
.act.bad .act-icon { color: var(--down); }
.act-text { overflow-wrap: anywhere; }
.act-time { font-size: 12px; color: var(--hint); white-space: nowrap; }
.report { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--bg-2); }

/* settings */
.settings { margin: 0 0 16px; display: grid; gap: 1px; background: var(--line); border-radius: 12px; overflow: hidden; }
.settings div { display: flex; justify-content: space-between; gap: 12px; background: var(--bg-2); padding: 12px; }
.settings dt { color: var(--hint); }
.settings dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.field { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.field select { min-height: 44px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-2); }
.primary { width: 100%; min-height: 48px; border: 0; border-radius: 12px; background: var(--btn); color: var(--btn-text); font-weight: 600; cursor: pointer; }

/* bottom navigation */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; display: grid; grid-template-columns: repeat(4, 1fr);
  height: calc(var(--nav-h) + var(--safe-b)); padding-bottom: var(--safe-b);
  background: var(--bg); border-top: 1px solid var(--line);
}
.nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; background: none; color: var(--hint); font-size: 11.5px; cursor: pointer; min-height: 44px; }
.nav button span { font-size: 18px; line-height: 1; }
.nav button[aria-current="page"] { color: var(--link); font-weight: 600; }

/* agent sheet */
.sheet { width: min(520px, 100%); margin: auto auto 0; border: 0; border-radius: 16px 16px 0 0; padding: 18px 16px calc(16px + var(--safe-b)); background: var(--bg); color: var(--text); }
.sheet::backdrop { background: rgba(0, 0, 0, 0.45); }
.sheet h3 { margin: 0; font-size: 18px; }
.sheet-role { margin: 2px 0 10px; color: var(--hint); }
.sheet-msg { margin: 12px 0 16px; line-height: 1.45; }

@keyframes bob { 50% { transform: translateY(-2px); } }
@keyframes shake { 0%, 90%, 100% { transform: translateX(0); } 93% { transform: translateX(-1.5px); } 96% { transform: translateX(1.5px); } }
@keyframes pulse { 50% { opacity: 0.35; } }
@keyframes blink { 50% { opacity: 0.2; } }
@keyframes pop { from { opacity: 0; transform: translate(-50%, -90%); } }
@media (prefers-reduced-motion: reduce) { *, *::before { animation: none !important; } }