/*
 * VALK hub mode: the 2D interface (panels, menus, windows, buttons, HUD, toasts, the sign-in page) in VALK's identity.
 * Loaded AFTER style.css, only when the office follows a hub (the server puts it in the page: server/hub/pagina.ts),
 * so normal mode never sees a line of it. Every rule is under `html.valk`; the 3D world keeps agent-office's style.
 *
 * Tokens are the hub's own (Valk-HQ src/app/globals.css, :root and html.light), light by default, dark on
 * `html.dark`. Red (#E24B4A) means "a decision is yours" and nothing else: the "precisa de você" pill, the waiting
 * button, the approval state. Buttons and chips are neutral.
 *
 * Type: General Sans for the interface, Clash Display for titles, both from Fontshare's CSS API. The files are never
 * embedded, subset or renamed here (license). Terminal and code keep the office's mono.
 */
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600&f[]=clash-display@600&display=swap');

/* ---------- Tokens ---------- */
html.valk {
  color-scheme: light;
  --bg-0: #f7f6f3;
  --bg-1: #fafaf8;
  --bg-card: #ffffff;
  --bg-elev: #eeecea;
  --bg-input: #ffffff;
  --border-default: #deddda;
  --border-hover: #cecdc9;
  --text-primary: #111110;
  --text-secondary: #5a5955;
  --text-muted: #8c8b87;
  --primary: #e24b4a;
  --primary-hover: #d4403f;
  --primary-bg: rgba(226, 75, 74, 0.08);
  --primary-border: rgba(226, 75, 74, 0.28);
  --ok: #0e9f6e;
  --ok-bg: rgba(16, 185, 129, 0.14);
  --atencao: #b45309;
  --atencao-bg: rgba(245, 158, 11, 0.18);
  --neutro-bg: rgba(0, 0, 0, 0.055);
  --linha: #deddda;
  --linha-forte: #cecdc9;
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.04);
  --elev-2: 0 4px 8px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
  --elev-3: 0 16px 32px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.07);
  --vidro: rgba(255, 255, 255, 0.94);
  --font-display: 'Clash Display', 'General Sans', system-ui, sans-serif;
  --font-body: 'General Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* the office's own names, pointed at the hub's tokens */
  --ink: var(--text-primary);
  --paper: var(--bg-card);
  --paper-2: var(--bg-elev);
  --muted: var(--text-secondary);
  --accent: var(--text-primary);
  --accent-ink: var(--bg-card);
  --good: #10b981;
  --warn: #f59e0b;
  --bad: var(--primary);
  --info: #3b82f6;
  --shadow: var(--elev-2);
  --radius: 12px;
  --font: var(--font-body);
}
html.valk.dark {
  color-scheme: dark;
  --bg-0: #0a0a0a;
  --bg-1: #0a0a0a;
  --bg-card: #111111;
  --bg-elev: #1a1a1a;
  --bg-input: #0f0f0f;
  --border-default: #1f1f1f;
  --border-hover: #2a2a2a;
  --text-primary: #f7f6f3;
  --text-secondary: #a3a2a0;
  --text-muted: #777777;
  --primary-bg: rgba(226, 75, 74, 0.14);
  --primary-border: rgba(226, 75, 74, 0.4);
  --ok: #34d399;
  --ok-bg: rgba(16, 185, 129, 0.18);
  --atencao: #fbbf24;
  --atencao-bg: rgba(245, 158, 11, 0.2);
  --neutro-bg: rgba(255, 255, 255, 0.07);
  --linha: #2a2a2a;
  --linha-forte: #3a3a3a;
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --elev-2: 0 4px 12px rgba(0, 0, 0, 0.5);
  --elev-3: 0 16px 32px rgba(0, 0, 0, 0.6);
  --vidro: rgba(17, 17, 17, 0.94);
}

/* ---------- Type ---------- */
html.valk body { font-family: var(--font-body); background: var(--bg-0); color: var(--text-primary); }
/* General Sans is loaded in 400, 500 and 600 only, so weights are flattened to those (no false bold). */
html.valk body :where(:not(.xterm, .xterm *, .wb-host, .wb-host *, canvas)) { font-weight: 500; }
html.valk :is(b, strong, h1, h2, h3, h4, .btn, .pill, .title, .project-name, .name, .floor-name, .menu-sec, .mi-label, .key, .toast, th, label):not(.wb-host *) { font-weight: 600; }
html.valk :is(h1, h2, h3, .project-name, .loading-name, .floor-menu-head, .menu-sec):not(.wb-host *) { font-family: var(--font-display); letter-spacing: 0; }
html.valk :is(.side h3, .floor-menu-head, .menu-sec) { font-family: var(--font-body); font-weight: 600; letter-spacing: 0.06em; }
html.valk :is(code, kbd, .mi-key, .secret code):not(.wb-host *) { font-family: 'Geist Mono', ui-monospace, Menlo, Consolas, monospace; }

/* ---------- Lines and shadows: soft, one pixel. The office's black 3px outlines and hard offsets go. ---------- */
/* everywhere but the whiteboard, which is Excalidraw's own and keeps its own look */
html.valk :where(:not(.wb-host, .wb-host *)), html.valk :where(:not(.wb-host, .wb-host *))::before, html.valk :where(:not(.wb-host, .wb-host *))::after { border-color: var(--linha); }
html.valk :is(.panel, .modal, .wb-window, .hud-menu, .floor-menu, .toast, .loading-card, .arcade-bar, .card) {
  background: var(--bg-card);
  border-width: 1px;
  border-radius: var(--radius);
  box-shadow: var(--elev-2);
}
html.valk .modal, html.valk .wb-window { border-radius: 16px; box-shadow: var(--elev-3); }
/* not the menu's and the arcade's, which keep the office in view (.menu-backdrop, .clear) */
html.valk .backdrop:not(.menu-backdrop, .clear) { background: rgba(10, 10, 10, 0.4); }
html.valk.dark .backdrop:not(.menu-backdrop, .clear) { background: rgba(0, 0, 0, 0.62); }
html.valk :is(.modal header, .wb-window > header) { border-bottom-width: 1px; background: var(--bg-elev); }
html.valk .modal footer { border-top-width: 1px; background: var(--bg-elev); }

/* ---------- Buttons: neutral, rounded-lg. Primary is the inverse of the page, never red. ---------- */
html.valk .btn {
  background: var(--bg-card); color: var(--text-primary);
  border-width: 1px; border-radius: 8px; box-shadow: var(--elev-1); transition: background 0.15s, border-color 0.15s;
}
html.valk .btn:hover { background: var(--bg-elev); border-color: var(--linha-forte); }
html.valk .btn:active { transform: none; box-shadow: none; }
html.valk .btn.primary { background: var(--text-primary); color: var(--bg-card); border-color: var(--text-primary); }
html.valk .btn.primary:hover { background: var(--text-primary); opacity: 0.88; }
html.valk .btn.on { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); }
html.valk .btn.danger { background: var(--primary); color: #fff; border-color: var(--primary); }
html.valk .btn.danger:hover { background: var(--primary-hover); }
html.valk .dock-panel[aria-pressed='true'] { background: var(--bg-elev); transform: none; box-shadow: none; }
html.valk .dock-menu[aria-expanded='true'] { background: var(--bg-elev); }
html.valk .burger i { height: 2px; background: var(--text-primary); }
html.valk .dock-btn { height: 40px; }
html.valk .svc-count { background: var(--neutro-bg); color: var(--text-primary); border-color: transparent; }
/* what needs a person is the one place a dock button is red */
html.valk .menu-item.danger { color: var(--primary); }
html.valk .dock-btn.danger { color: var(--text-primary); background: color-mix(in srgb, var(--primary) 12%, var(--bg-card)); border-color: var(--primary); }

/* ---------- Inputs ---------- */
html.valk :is(input, textarea, select):not(.wb-host *),
html.valk :is(.modal textarea, .modal input[type='text'], .modal input[type='password'], .provider-select, .provider-model input, .provider-model.claude-model select, .accounts .invite-row select) {
  background: var(--bg-input); color: var(--text-primary); border-width: 1px; border-radius: 8px; font-family: var(--font-body);
}
html.valk :is(input, textarea, select):not(.wb-host *):focus,
html.valk :is(.modal textarea, .modal input[type='text'], .modal input[type='password']):focus { border-color: var(--text-primary); }
html.valk #chat-input { background: var(--vidro); box-shadow: var(--elev-1); border-width: 1px; }
html.valk #chat-input:focus { background: var(--bg-card); border-color: var(--text-primary); }
html.valk ::placeholder { color: var(--text-muted); }
html.valk .close { border-radius: 8px; }

/* ---------- The top bar and the side panels ---------- */
html.valk .project:hover, html.valk .project.open { background: var(--bg-elev); }
html.valk .project-name { font-size: 17px; }
html.valk .side h3 { font-size: 11px; text-transform: uppercase; color: var(--text-secondary); }
html.valk .side .count { color: var(--text-muted); font-family: 'Geist Mono', ui-monospace, monospace; font-weight: 500; }
html.valk .panel-x:hover { background: var(--bg-elev); }
html.valk .people li.walk:hover, html.valk .workers li:hover { background: var(--bg-elev); }
html.valk .dot { border-width: 1px; }
html.valk .people .you { color: var(--text-muted); }
/* Hub mode has no cost, plan limits or provider to show, and nothing to spend on. */
html.valk :is(#spend, #limits, #workers-cost) { display: none !important; }

/* worker states: quiet, and red only where the decision is yours */
html.valk .pill { border-width: 1px; border-color: transparent; padding: 2px 8px; font-weight: 600; }
html.valk :is(.pill.starting, .pill.idle) { background: var(--neutro-bg); color: var(--text-secondary); }
html.valk .pill.working { background: var(--atencao-bg); color: var(--atencao); }
html.valk .pill.needs_input { background: var(--primary); color: #fff; animation: none; }
html.valk .pill.done { background: var(--ok-bg); color: var(--ok); }
html.valk :is(.pill.exited, .pill.offline) { background: var(--neutro-bg); color: var(--text-muted); }
html.valk button#waiting { background: color-mix(in srgb, var(--primary) 10%, var(--bg-card)); border: 1px solid var(--primary-border); color: var(--text-primary); border-radius: 8px; }
html.valk button#waiting:hover { background: color-mix(in srgb, var(--primary) 18%, var(--bg-card)); }
html.valk button#waiting.all-done { background: color-mix(in srgb, var(--good) 12%, var(--bg-card)); border-color: var(--ok); }
html.valk button#waiting.all-done:hover { background: color-mix(in srgb, var(--good) 20%, var(--bg-card)); }
html.valk button#waiting .key { background: var(--text-primary); color: var(--bg-card); }
html.valk .compass-arrow { border-width: 2px; border-color: var(--bg-card); }
html.valk .compass-who { background: var(--text-primary); color: var(--bg-card); }

/* ---------- Chat, hints, toasts ---------- */
html.valk #chat-log li { background: var(--vidro); border-width: 1px; box-shadow: var(--elev-1); border-radius: 10px; }
html.valk .hint { background: var(--text-primary); color: var(--bg-card); border: 1px solid var(--linha-forte); border-radius: 12px; box-shadow: var(--elev-3); }
html.valk .hint .title { color: var(--bg-card); }
html.valk .hint .cost { color: var(--bg-card); opacity: 0.7; }
html.valk .key { background: var(--bg-elev); color: var(--text-primary); box-shadow: none; border: 1px solid var(--linha-forte); border-radius: 6px; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 0.85em; }
html.valk .hint .key { background: var(--bg-card); color: var(--text-primary); }
html.valk .toast { font-weight: 500; }
html.valk .toast.warn { background: color-mix(in srgb, var(--warn) 16%, var(--bg-card)); border-color: var(--atencao); }
html.valk .toast.error { background: color-mix(in srgb, var(--primary) 12%, var(--bg-card)); border-color: var(--primary-border); }
html.valk .conn { background: var(--text-primary); color: var(--bg-card); border-width: 1px; border-color: var(--linha-forte); }
html.valk .conn.upgrading { background: var(--atencao-bg); color: var(--text-primary); }
html.valk .crosshair { border-width: 1px; border-color: var(--text-primary); background: var(--bg-card); }
html.valk .crosshair.on { background: var(--text-primary); }
html.valk .crosshair .look-hint { background: var(--text-primary); color: var(--bg-card); }
html.valk .caffeine .bar { border-width: 1px; }

/* ---------- The ☰ menu, the floor list, the elevator ---------- */
html.valk .hud-menu { border-radius: 14px; box-shadow: var(--elev-3); }
html.valk .menu-item { font-weight: 500; border-radius: 8px; }
html.valk .menu-item:hover, html.valk .menu-pin:hover { background: var(--bg-elev); }
html.valk .menu-item:focus-visible, html.valk .menu-pin:focus-visible { box-shadow: inset 0 0 0 1px var(--text-primary); }
html.valk .mi-key, html.valk .menu-foot kbd { background: var(--bg-elev); border-width: 1px; border-bottom-width: 1px; }
html.valk .menu-item.on .mi-label::after { border: 0; background: var(--ok); }
html.valk .menu-item.primary .mi-label { color: var(--text-primary); font-weight: 600; }
html.valk .menu-pin[aria-pressed='true'] svg path { fill: var(--text-primary); stroke: var(--text-primary); }
html.valk .menu-foot { border-top: 1px solid var(--linha); }
html.valk .switch { border-width: 1px; background: var(--linha-forte); }
html.valk .switch::after { border-width: 1px; background: var(--bg-card); }
html.valk .menu-toggle[aria-checked='true'] .switch { background: var(--text-primary); }
html.valk :is(.floor-item, .elevator .floor-btn, .meeting-pattern) { background: var(--bg-card); color: var(--text-primary); border-width: 1px; border-radius: 10px; box-shadow: none; }
html.valk :is(.floor-item:hover:not(:disabled), .elevator .floor-btn:hover:not(:disabled)) { background: var(--bg-elev); border-color: var(--linha-forte); }
html.valk :is(.floor-item:active:not(:disabled), .elevator .floor-btn:active:not(:disabled)) { transform: none; box-shadow: none; }
html.valk :is(.floor-item.here, .elevator .floor-btn.here) { background: var(--bg-elev); transform: none; }
html.valk .floor-item .floor-no, html.valk .elevator .floor-no { border-width: 0; text-shadow: none; }
html.valk .floor-item .floor-stats .waiting, html.valk .elevator .floor-stats .waiting { color: var(--primary); }
html.valk .floor-item.add { background: var(--bg-card); }
html.valk .elevator .repo-list { border-width: 1px; background: var(--bg-card); }
html.valk .elevator .repo.sel { background: var(--bg-elev); }

/* ---------- Windows: controls, terminal, help, character ---------- */
html.valk .help-grid .key { white-space: nowrap; }
html.valk .modal.term header { background: var(--bg-elev); }
/* the terminal stays dark in both themes (it is code), all the way down: no black band under the last line */
html.valk .modal.term :is(.term-host, .xterm, .xterm-viewport) { background-color: #1e1f2e !important; }
html.valk .modal.term header .typed.now { color: var(--text-primary); }
html.valk .avatar { border-width: 1px; }
html.valk .settings-tab.on { background: var(--bg-elev); }
html.valk .search-hit mark, html.valk .bs-item mark { background: var(--atencao-bg); color: var(--text-primary); }
html.valk .empty { color: var(--text-muted); }
html.valk .note, html.valk .modal footer .grow { color: var(--text-secondary); }
html.valk .md, html.valk .md code, html.valk .md pre { color: var(--text-primary); }
html.valk .bs-item.open { background: var(--text-primary); color: var(--bg-card); }
html.valk .wb-live { background: var(--text-primary); color: var(--bg-card); }
html.valk :is(.wb-person, .gh-badge, .label, .desk-link, .qchip) { background: var(--bg-card); border-width: 1px; }
html.valk .telescope-exit { background: var(--bg-card); }

/* ---------- The loading screen: the VALK mark where the paw was ---------- */
html.valk #loading { background: var(--bg-0); }
html.valk .loading-card { border-width: 1px; box-shadow: var(--elev-3); }
html.valk .loading-paw, html.valk .loading-shadow { display: none; }
html.valk .loading-card::before { content: ''; display: block; width: 56px; height: 56px; margin: 0 auto 16px; background: url('/hub/marca.svg') center / contain no-repeat; border-radius: 14px; animation: valk-respira 1.6s ease-in-out infinite; }
html.valk .loading-name { font-size: 24px; margin-bottom: 16px; }
html.valk .loading-bar { height: 8px; padding: 0; border-width: 1px; background: var(--bg-elev); }
html.valk .loading-fill { background: var(--text-primary); }
@keyframes valk-respira { 50% { transform: scale(0.94); opacity: 0.8; } }
@media (prefers-reduced-motion: reduce) { html.valk .loading-card::before { animation: none; } }

/* ---------- The theme switch (menu item), and the sign-in page ---------- */
html.valk .tema-botao { position: fixed; top: 14px; right: 14px; z-index: 5; width: 38px; height: 38px; padding: 0; margin: 0; display: grid; place-items: center; font-size: 17px; line-height: 1; background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--linha); border-radius: 10px; box-shadow: var(--elev-1); cursor: pointer; }
html.valk .tema-botao:hover { background: var(--bg-elev); }
html.valk .tema-botao:active { transform: none; box-shadow: none; }

/* The sign-in page (hub/entrar.html) has its own sheet, hub/entrar.css: the reception of the VALK office. */

/* ---------- Windows that draw their own surfaces: settings, search, shelf, jukebox, emote wheel, meters ---------- */
html.valk :is(.budget, .meter, .caffeine .bar, .throw-meter, .loading-bar, .golf-rest) { background: var(--bg-elev); }
html.valk .caffeine .bar span { background: var(--text-secondary); }
html.valk .emote-wheel { background: radial-gradient(circle, rgba(10, 10, 10, 0.3), transparent 45%); }
html.valk .emote-wheel .ring { background: var(--vidro); border-width: 1px; box-shadow: var(--elev-3); }
html.valk .emote-wheel .emote { background: var(--bg-card); border-width: 1px; box-shadow: var(--elev-1); }
html.valk .emote-wheel .emote.on { background: var(--bg-elev); border-color: var(--text-primary); }
html.valk .emote-wheel .num { background: var(--text-primary); color: var(--bg-card); }
html.valk .settings-nav { background: var(--bg-elev); border-right-width: 1px; }
html.valk .settings-tab { border-width: 1px; border-radius: 8px; }
html.valk .settings-tab:hover { background: var(--bg-card); }
html.valk .settings-tab.on { background: var(--bg-card); border-color: var(--linha-forte); box-shadow: none; }
html.valk .setting { background: var(--bg-card); border: 1px solid var(--linha); border-radius: 12px; }
html.valk .scope { background: var(--neutro-bg); border-width: 0; color: var(--text-secondary); }
html.valk :is(.scope.you, .scope.floor, .scope.office) { background: var(--neutro-bg); }
html.valk .swatch { border-width: 1px; }
html.valk :is(.search-hit, .st, .svc-list li, .bs-toc, .role) { background: var(--bg-card); color: var(--text-primary); border-width: 1px; }
html.valk .search-hit.term { background: #1e1f2e; color: #e6e6f0; border-color: #1e1f2e; }
html.valk .svc-list li { box-shadow: none; }
html.valk .svc-list li.on, html.valk .svc-list li:hover { background: var(--bg-elev); }
html.valk .jb-now { border-width: 1px; background: var(--bg-elev); }
html.valk .bs-side { background: var(--bg-elev); }
html.valk .bs-reader { background: var(--bg-card); }
html.valk .bs-item:hover { background: var(--bg-card); }
html.valk .bs-item.sel { background: var(--bg-card); border-color: var(--linha-forte); }
html.valk :is(.bs-title, .bs-path, .bs-count, .bs-meta) { color: var(--text-secondary); }
html.valk .bs-title { color: var(--text-primary); }
html.valk .bs-item.open, html.valk .bs-item.open.sel { background: var(--text-primary); border-color: var(--text-primary); color: var(--bg-card); }
html.valk .bs-item.open .bs-path, html.valk .bs-item.open .bs-title { color: var(--bg-card); }
html.valk .md :is(code, pre) { background: var(--bg-elev); border-color: var(--linha); }
html.valk .md :is(th, td) { border-color: var(--linha); }
html.valk .md th { background: var(--bg-elev); }
html.valk .md a { color: var(--text-primary); text-decoration: underline; }
html.valk .volume input[type='range']::-webkit-slider-runnable-track { border-width: 1px; background: linear-gradient(to right, var(--text-primary) var(--fill), var(--bg-elev) var(--fill)); }
html.valk .volume input[type='range']::-webkit-slider-thumb { border-width: 1px; background: var(--bg-card); box-shadow: var(--elev-1); }
html.valk .modal label.choice { background: var(--bg-card); }
html.valk .modal label { color: var(--text-primary); }
html.valk .meeting-pattern.on { background: var(--bg-elev); box-shadow: none; }

/* ---------- The boss's panel: every squad of the hub (hub/painel.ts) ---------- */
html.valk .modal.painel-squads { width: min(760px, calc(100vw - 32px)); max-height: min(86vh, 900px); display: flex; flex-direction: column; }
html.valk .modal.painel-squads .body { overflow-y: auto; }
html.valk .painel-resumo { margin: 0 0 14px; color: var(--text-secondary); font-weight: 500; }
html.valk .painel-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
html.valk .painel-squad { padding: 14px 16px; background: var(--bg-card); border: 1px solid var(--border-default); border-left: 4px solid var(--cor); border-radius: 12px; }
html.valk .painel-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
html.valk .painel-ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--cor); flex: none; }
html.valk .painel-nome { font: 600 17px/1.25 var(--font-display, 'Clash Display', system-ui, sans-serif); color: var(--text-primary); }
html.valk .painel-situacao { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
html.valk .painel-rascunho { font-size: 12px; color: var(--text-secondary); border: 1px dashed var(--border-hover); padding: 2px 8px; border-radius: 999px; }
html.valk .painel-quando { margin-left: auto; font: 500 12px var(--font-mono, 'Geist Mono', ui-monospace, monospace); color: var(--text-secondary); }
html.valk .painel-passo { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 14px; color: var(--text-primary); }
html.valk .painel-barra { flex: 0 0 140px; height: 6px; border-radius: 999px; background: var(--bg-elev); overflow: hidden; }
html.valk .painel-barra i { display: block; height: 100%; background: var(--cor); border-radius: inherit; transition: width 200ms ease; }
html.valk :is(.painel-quem, .painel-nota, .painel-recentes) { margin: 6px 0 0; font-size: 14px; color: var(--text-secondary); line-height: 1.4; }
html.valk .painel-quem { color: var(--text-primary); }
html.valk .painel-nota { font-style: italic; overflow-wrap: anywhere; }
html.valk .painel-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
html.valk .painel-acoes a.btn { text-decoration: none; }
html.valk .painel-vazio { color: var(--text-secondary); padding: 12px 0; }
@media (max-width: 560px) {
  html.valk .painel-quando { margin-left: 0; width: 100%; }
  html.valk .painel-barra { flex-basis: 90px; }
}