:root {
  --bg: #0c111c; --panel: #141b2b; --panel2: #1a2336; --line: #263049;
  --text: #e7ebf4; --muted: #8b98b5; --accent: #5b8cff;
  --ok: #4fd88f; --bad: #ff7d7d; --warn: #ffcf7d;
  font-family: "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); }
body { font-size: 14px; }
.hidden { display: none !important; }

.banner { position: sticky; top: 0; z-index: 30; padding: 6px 16px; text-align: center; font-weight: 600;
  background: #3a2b12; color: var(--warn); border-bottom: 1px solid #5a431c; }

.shell { display: flex; min-height: 100vh; }
nav { width: 218px; flex: 0 0 218px; background: var(--panel); border-inline-end: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 14px 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
nav .brand { font-weight: 700; font-size: 15px; padding: 4px 18px 14px; letter-spacing: .3px; }
nav .brand-icon { color: var(--accent); }
nav a { color: var(--muted); text-decoration: none; padding: 9px 18px; border-inline-start: 3px solid transparent; }
nav a:hover { color: var(--text); background: var(--panel2); }
nav a.active { color: var(--text); border-inline-start-color: var(--accent); background: var(--panel2); }
.nav-foot { margin-top: auto; padding: 14px 18px; display: flex; gap: 8px; align-items: center; }

main { flex: 1; padding: 22px 26px; max-width: 1500px; }
h1 { font-size: 19px; margin: 0 0 4px; }
h2 { font-size: 14px; color: var(--muted); margin: 20px 0 8px; text-transform: uppercase; letter-spacing: .6px; }
.sub { color: var(--muted); margin: 0 0 16px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.tile .k { color: var(--muted); font-size: 12px; }
.tile b { display: block; font-size: 21px; margin-top: 3px; font-weight: 600; }
.ok { color: var(--ok); } .bad { color: var(--bad); } .warn { color: var(--warn); }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.agent-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.agent-card .head { display: flex; align-items: center; gap: 10px; }
.agent-card .icon { font-size: 22px; }
.agent-card .name { font-weight: 600; }
.agent-card .role { color: var(--muted); font-size: 12px; margin: 6px 0 8px; min-height: 30px; }
.agent-card .kv { font-size: 12px; color: var(--muted); margin-top: 3px; }
.agent-card .kv b { color: var(--text); font-weight: 500; }
.status { font-size: 11px; padding: 2px 9px; border-radius: 20px; font-weight: 600; margin-inline-start: auto; }
.status.Working { background: #123c26; color: var(--ok); }
.status.Waiting { background: #3a2b12; color: var(--warn); }
.status.Sleeping { background: #1d2536; color: var(--muted); }
.status.Blocked, .status.Offline { background: #3c1a1a; color: var(--bad); }

.badge { font-size: 11px; padding: 3px 10px; border-radius: 20px; background: var(--panel2); border: 1px solid var(--line); }
.badge.DEMO { color: var(--warn); border-color: #5a431c; }
.badge.PRODUCTION { color: var(--ok); }

table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--panel); border-radius: 10px; overflow: hidden; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: start; }
th { color: var(--muted); font-weight: 600; font-size: 12px; background: var(--panel2); }
tr:hover td { background: var(--panel2); }
.muted { color: var(--muted); }
.wrap-scroll { overflow-x: auto; border-radius: 10px; border: 1px solid var(--line); }

button { background: var(--accent); border: 0; color: #fff; padding: 8px 14px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; }
button:hover { filter: brightness(1.1); }
button.ghost { background: transparent; border: 1px solid var(--line); color: var(--muted); }
button.danger { background: #8c2f39; }
button.small { padding: 4px 10px; font-size: 12px; }
button:disabled { opacity: .45; cursor: not-allowed; }
input, select, textarea { background: var(--panel2); border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: inherit; }
textarea { width: 100%; min-height: 70px; resize: vertical; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 10px 0; }

.chat { display: flex; flex-direction: column; height: calc(100vh - 250px); min-height: 380px; }
.chat-log { flex: 1; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.msg { margin-bottom: 10px; max-width: 860px; }
.msg .meta { font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.msg .bubble { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; white-space: pre-wrap; }
.msg.from-owner .bubble { background: #1c2a4a; border-color: #2d4373; }
.msg .type-error .bubble, .msg.type-error .bubble { border-color: #6b2b2b; }
.msg.type-approval-request .bubble { border-color: #5a431c; }
.chat-compose { display: flex; gap: 8px; margin-top: 10px; align-items: flex-end; }
.chat-compose textarea { flex: 1; min-height: 54px; }

.drop { border: 2px dashed var(--line); border-radius: 14px; padding: 36px; text-align: center; color: var(--muted); cursor: pointer; }
.drop.drag { border-color: var(--accent); color: var(--text); background: var(--panel2); }

.modal { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px; width: min(680px, 92vw); max-height: 84vh; overflow-y: auto; }

.provider-opt { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 10px; cursor: pointer; }
.provider-opt.selected { border-color: var(--accent); }
.provider-opt .detail { color: var(--muted); font-size: 12px; }
.pill { font-size: 11px; padding: 2px 9px; border-radius: 20px; margin-inline-start: auto; white-space: nowrap; }
.pill.ready { background: #123c26; color: var(--ok); }
.pill.blocked { background: #3c1a1a; color: var(--bad); }
.pill.future { background: #1d2536; color: var(--muted); }

html[dir="rtl"] main { text-align: right; }

/* ---------- Pixel AI Office ---------- */
.office-page { display: flex; flex-direction: column; gap: 12px; }
.topbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.topbar .chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted);
  background: var(--panel2); border: 1px solid var(--line); border-radius: 20px; padding: 4px 11px; }
.topbar .chip b { color: var(--text); font-weight: 600; }
.topbar .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.topbar .spacer { flex: 1; }
.office-main { display: grid; grid-template-columns: 1fr 320px; gap: 12px; align-items: start; }
@media (max-width: 1250px) { .office-main { grid-template-columns: 1fr; } }

/* The v1 canvas/overlay rules (.office-wrap, .office-canvas, .office-overlay, .office-name, .office-bubble, .office-room-label)
   are replaced by the "Pixel AI Office v2" block at the end of this file (.office-root, .o-*). */

.activity-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 14px; max-height: 62vh; overflow-y: auto; }
.activity-panel h3 { margin: 0 0 8px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.activity-item { display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.activity-item:last-child { border-bottom: none; }
.activity-item .t { color: var(--muted); font-variant-numeric: tabular-nums; flex: 0 0 40px; }
.activity-item.err .txt { color: var(--bad); }

.task-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }

.side-panel { position: fixed; top: 0; inset-inline-end: 0; width: min(420px, 94vw); height: 100vh; z-index: 60;
  background: var(--panel); border-inline-start: 1px solid var(--line); box-shadow: -12px 0 40px rgba(0,0,0,.45);
  padding: 20px 22px; overflow-y: auto; animation: slideIn .18s ease-out; }
@keyframes slideIn { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.side-panel h2 { margin-top: 14px; }
.side-panel .close { position: absolute; top: 12px; inset-inline-end: 14px; }
.kv-list { font-size: 13px; }
.kv-list .kv { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.kv-list .kv .k { color: var(--muted); }
details.adv { margin-top: 14px; }
details.adv summary { cursor: pointer; color: var(--muted); font-size: 12px; }

.lane-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.lane { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; min-height: 120px; }
.lane h4 { margin: 0 0 8px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.lane .item { background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; font-size: 12px; margin-bottom: 6px; }

.callcard { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.progressbar { height: 8px; background: var(--panel2); border-radius: 6px; overflow: hidden; border: 1px solid var(--line); }
.progressbar > i { display: block; height: 100%; background: var(--accent); }
.progressbar.warn > i { background: var(--warn); }
.progressbar.bad > i { background: var(--bad); }

/* ---------- Pixel AI Office v2 (1111 brand: charcoal, cream, gold, sand and one teal) ----------
   Everything the office draws as text is DOM (crisp at any size); the canvas holds only pixel art. All rules are scoped to
   .office-root so nothing leaks into the other pages. */
.office-root { --o-dark: #2D2926; --o-darker: #231F1D; --o-light: #F5F2EF; --o-gold: #B89A75; --o-goldhi: #D6B079; --o-sand: #D4C4B0;
  --o-teal: #2FA79B; --o-amber: #E39A3B; --o-red: #D8574A; --o-mute: #8C8279; --u: 1; --cell: 100px;
  position: relative; width: 100%; max-width: 1100px; margin: 0 auto; color: var(--o-light); background: var(--o-dark);
  border: 1px solid #4A423C; border-radius: 14px; overflow: hidden; font-family: "Segoe UI", system-ui, sans-serif; }
.office-root *, .office-root *::before, .office-root *::after { box-sizing: border-box; }
.office-root [hidden] { display: none !important; }

.o-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; padding: 8px 12px; font-size: 12px; color: var(--o-sand); background: var(--o-darker); }
.o-clock { font-weight: 600; }
.o-updated { color: var(--o-mute); }
.o-banner { padding: 7px 12px; font-size: 12.5px; line-height: 1.35; color: var(--o-light); background: rgba(184, 154, 117, .22); border-top: 1px solid rgba(184, 154, 117, .35); }
.o-banner[data-tone="warn"] { background: rgba(227, 154, 59, .2); border-top-color: rgba(227, 154, 59, .5); }

.o-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 12px; background: #2A2623; border-top: 1px solid #3A3430; }
.o-line-title { font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--o-gold); }
.o-steps { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.o-steps li { padding: 3px 9px; font-size: 11.5px; line-height: 1.3; color: var(--o-sand); background: rgba(212, 196, 176, .10); border: 1px solid rgba(212, 196, 176, .18); border-radius: 999px; }
.o-steps li.on { font-weight: 700; color: var(--o-dark); background: var(--o-goldhi); border-color: var(--o-goldhi); }
.o-steps li.on:nth-child(1) { background: var(--o-sand); border-color: var(--o-sand); }
.o-steps li.on:nth-child(5) { background: var(--o-teal); border-color: var(--o-teal); color: #fff; }
.o-line-text { flex: 1 1 200px; font-size: 12px; color: var(--o-light); }

.o-stage { position: relative; width: 100%; line-height: 0; background: var(--o-dark); }
.o-canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; image-rendering: crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: pixelated; }
.o-overlay { position: absolute; inset: 0; pointer-events: none; line-height: 1.25; }

.o-room { position: absolute; display: flex; align-items: center; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; line-height: 1.05;
  font-size: clamp(9px, calc(var(--u) * 6.3px), 12.5px); color: var(--o-goldhi); text-shadow: 0 1px 0 #000; pointer-events: none; overflow: hidden; }
.o-lounge { color: #6B5B4C; text-shadow: none; font-size: 9px; letter-spacing: .8px; }
.o-note { position: absolute; display: none; padding: 3px 6px 4px; font-size: 11px; line-height: 1.3; color: var(--o-light); background: rgba(35, 31, 29, .86);
  border: 1px solid rgba(184, 154, 117, .45); border-radius: 6px; pointer-events: none; }
.o-note[data-show="1"] { display: block; }
.o-note b { color: var(--o-goldhi); font-weight: 700; }
.o-note .warn { color: var(--o-amber); font-weight: 700; } .o-note .bad { color: #F0786C; font-weight: 700; } .o-note .ok { color: #6FD3C6; }

.o-agent { --t: var(--o-sand); position: absolute; left: 0; top: 0; width: var(--w, var(--cell)); margin-left: calc(var(--w, var(--cell)) / -2); text-align: center; pointer-events: none; will-change: transform; }
.o-agent[data-tone="active"], .o-agent[data-tone="live"] { --t: var(--o-teal); }
.o-agent[data-tone="call"] { --t: var(--o-goldhi); }
.o-agent[data-tone="attention"] { --t: var(--o-amber); }
.o-agent[data-tone="problem"] { --t: var(--o-red); }
.o-agent[data-tone="sleep"] { --t: #A59B91; }
.o-agent[data-tone="unknown"] { --t: #A39A91; }
.o-tag { display: inline-flex; flex-direction: column; align-items: center; max-width: 100%; padding: 1px 6px 2px; cursor: pointer; pointer-events: auto;
  background: rgba(35, 31, 29, .94); border: 1px solid var(--t); border-radius: 6px; box-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.o-name { font-size: 11.5px; font-weight: 700; line-height: 1.2; color: var(--o-light); }
.o-chip { font-size: 10px; font-style: normal; font-weight: 700; line-height: 1.2; color: var(--t); white-space: normal; }
.o-say { display: none; margin-top: 2px; padding: 2px 5px 3px; font-size: 11px; line-height: 1.28; color: var(--o-light); background: rgba(35, 31, 29, .84); border-radius: 5px; }
.o-agent.with-say .o-say { display: block; }
.o-agent[data-tone="problem"] .o-say { color: #F7B0A8; }
.o-agent[data-tone="attention"] .o-say { color: #F3C98B; }
.office-root[data-mode="narrow"] .o-say { display: none !important; }
.office-root[data-mode="narrow"] .o-chip { font-size: 9.5px; }
.office-root[data-mode="narrow"] .o-note { font-size: 10.5px; padding: 2px 5px 3px; }

.o-icon { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.o-icon::before { position: absolute; left: 0; bottom: 0; transform: translateX(-50%); display: none; white-space: nowrap; font-weight: 800; line-height: 1; }
.o-icon[data-kind="sleep"]::before { display: block; content: "z Z z"; font-size: 12px; letter-spacing: 1px; color: #F5F2EF; text-shadow: 0 1px 0 #000; animation: o-float 2.6s ease-in-out infinite; }
.o-icon[data-kind="attention"]::before, .o-icon[data-kind="problem"]::before, .o-icon[data-kind="unknown"]::before { display: block; width: 18px; height: 18px; border-radius: 50%; text-align: center; line-height: 18px; font-size: 13px; color: #231F1D; box-shadow: 0 0 0 2px #231F1D; }
.o-icon[data-kind="attention"]::before { content: "!"; background: var(--o-amber); animation: o-pulse 1.4s ease-in-out infinite; }
.o-icon[data-kind="problem"]::before { content: "!"; background: var(--o-red); color: #fff; animation: o-bounce .9s ease-in-out infinite; }
.o-icon[data-kind="unknown"]::before { content: "?"; background: #A39A91; }
.o-icon[data-kind="messaging"]::before { display: block; content: "\2022 \2022 \2022"; padding: 1px 6px 3px; font-size: 11px; letter-spacing: 1px; color: #231F1D; background: var(--o-light); border-radius: 8px; box-shadow: 0 0 0 2px #231F1D; animation: o-pulse 1.2s ease-in-out infinite; }
.o-icon[data-kind="reading"]::before { display: block; content: ""; width: 18px; height: 12px; border-radius: 2px; box-shadow: 0 0 0 2px #231F1D; animation: o-pulse 1.6s ease-in-out infinite;
  background: linear-gradient(to bottom right, transparent 47%, #8C7457 48%, #8C7457 54%, transparent 55%) left top / 50% 70% no-repeat, linear-gradient(to bottom left, transparent 47%, #8C7457 48%, #8C7457 54%, transparent 55%) right top / 50% 70% no-repeat, var(--o-light); }
@keyframes o-float { 0%, 100% { transform: translate(-50%, 0); opacity: .75; } 50% { transform: translate(-40%, -5px); opacity: 1; } }
@keyframes o-pulse { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes o-bounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -4px); } }

.o-listwrap { padding: 12px; background: var(--o-darker); border-top: 1px solid #3A3430; }
.o-listhead { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--o-sand); }
.o-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.o-item { --t: var(--o-sand); display: grid; grid-template-columns: 1fr auto; gap: 1px 10px; width: 100%; padding: 8px 10px 9px; text-align: start; font: inherit; color: var(--o-light);
  background: rgba(245, 242, 239, .05); border: 1px solid rgba(212, 196, 176, .18); border-inline-start: 5px solid var(--t); border-radius: 8px; cursor: pointer; }
.o-item:hover, .o-item:focus-visible { background: rgba(245, 242, 239, .10); outline: 2px solid var(--o-goldhi); outline-offset: 1px; }
.o-item[data-tone="active"], .o-item[data-tone="live"] { --t: var(--o-teal); }
.o-item[data-tone="call"] { --t: var(--o-goldhi); }
.o-item[data-tone="attention"] { --t: var(--o-amber); }
.o-item[data-tone="problem"] { --t: var(--o-red); }
.o-item[data-tone="sleep"] { --t: #A59B91; }
.o-item[data-tone="unknown"] { --t: #A39A91; }
.o-dot { display: none; }
.o-item-main { grid-column: 1; font-size: 14px; }
.o-item-name { font-weight: 700; }
.o-item-role { color: var(--o-mute); font-size: 12px; }
.o-item-state { grid-column: 2; align-self: start; font-size: 12px; font-weight: 700; color: var(--t); text-align: end; }
.o-item-say { grid-column: 1 / -1; font-size: 13px; line-height: 1.35; }
.o-item-detail { grid-column: 1 / -1; font-size: 12px; line-height: 1.35; color: #F0A59C; }
.o-item-detail:empty { display: none; }
.o-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }


.o-badge { position: absolute; min-width: 18px; height: 18px; padding: 0 4px; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; color: #231F1D; background: var(--o-amber);
  border-radius: 9px; box-shadow: 0 0 0 2px #231F1D; transform: translate(-50%, -100%); pointer-events: none; }
.o-facts { margin: 0 0 8px; font-size: 12.5px; line-height: 1.4; color: var(--o-light); }
.office-root[data-mode="narrow"] .o-agent.compact .o-chip { display: none; }
.office-root.o-offline .o-say, .office-root.o-offline .o-icon { display: none !important; }

@media (prefers-reduced-motion: reduce) { .o-icon::before { animation: none !important; } }
@media (max-width: 700px) { .o-list { grid-template-columns: 1fr; } .o-bar { font-size: 11.5px; } .o-line-text { flex-basis: 100%; } }

/* Phone width: the owner shell's side navigation becomes a scrolling bar on top, so the Office page gets the whole screen (v1 left it ~170 px). */
@media (max-width: 760px) {
  .shell { flex-direction: column; }
  nav { width: 100%; flex: none; height: auto; position: static; flex-direction: row; align-items: center; overflow-x: auto; padding: 4px 6px; border-inline-end: 0; border-bottom: 1px solid var(--line); }
  nav .brand { display: none; }
  nav a { flex: none; white-space: nowrap; padding: 10px 12px; border-inline-start: 0; border-bottom: 3px solid transparent; }
  nav a.active { border-bottom-color: var(--accent); }
  .nav-foot { margin: 0 0 0 auto; padding: 0 8px; flex: none; }
  main { padding: 14px 12px; }
}

/* very small phones (narrow layout below ~340 px): tighter name tags so neighbours never touch */
.office-root[data-tiny="1"] .o-tag { padding: 1px 3px 2px; }
.office-root[data-tiny="1"] .o-name { font-size: 11px; }
.office-root[data-tiny="1"] .o-chip { font-size: 9px; }
.o-lounge { overflow: visible; }