/* Cliente remoto do Nodal. Mesmos tokens, vidro e tipografia do app (src/renderer/src/styles.css), tema do sistema. */
@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/vendor/geist.woff2) format('woff2-variations');
}

:root {
  color-scheme: light;
  --radius: 10px;
  --bg: #f6f6f6;
  --canvas: #ffffff;
  --surface: #ffffff;
  --surface-2: #e5e5e7;
  --muted-bg: #f0f0f2;
  --input: #0000000a;
  --input-border: #0000001a;
  --border: #0000001f;
  --text: #1d1d1f;
  --muted: #3c3c4399;
  --accent: #007aff;
  --ring: #007aff80;
  --danger: #ff3b30;
  --ok: #34c759;
  --warn: #ff9500;
  --grid: #00000014;
  --rope: #00000044;
  --sidebar: #e9e9eb;
  --hover: #0000000d;
  --pressed: #00000014;
  --term-bg: #ffffff;
  --shadow: 0 3px 18px #00000024, 0 0 0 0.5px #00000014;
  --glass-bg: rgba(255, 255, 255, 0.6);
  --glass-strong: rgba(255, 255, 255, 0.82);
  --glass-edge: inset 0 0 0 0.5px #0000001a, inset 0 1px 0 #ffffff80;
  --glass-shadow: 0 0.5px 1.5px #0000001a, 0 6px 20px #00000014;
  --font: 'Geist Variable', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --mono: 'SF Mono', ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #1a1a1c;
    --canvas: #1e1e1e;
    --surface: #2c2c2e;
    --surface-2: #3a3a3c;
    --muted-bg: #2c2c2e;
    --input: #7676803d;
    --input-border: #ffffff1a;
    --border: #54545880;
    --text: #f5f5f7;
    --muted: #ebebf599;
    --accent: #0a84ff;
    --ring: #0a84ff80;
    --danger: #ff453a;
    --ok: #30d158;
    --warn: #ff9f0a;
    --grid: #303030;
    --rope: #ffffff54;
    --sidebar: #2c2c2e;
    --hover: #ffffff0f;
    --pressed: #ffffff1a;
    --term-bg: #1c1c1e;
    --shadow: 0 3px 18px #00000059, 0 0 0 0.5px #ffffff14;
    --glass-bg: rgba(44, 44, 46, 0.6);
    --glass-strong: rgba(44, 44, 46, 0.82);
    --glass-edge: inset 0 0 0 0.5px #ffffff1a, inset 0 1px 0 #ffffff14;
    --glass-shadow: 0 0.5px 1.5px #00000040, 0 6px 20px #00000040;
  }
}

[data-color='yellow'] { --note-bg: #fff9c4; --note-fg: #5d4037; }
[data-color='pink'] { --note-bg: #f8bbd0; --note-fg: #880e4f; }
[data-color='blue'] { --note-bg: #bbdefb; --note-fg: #0d47a1; }
[data-color='green'] { --note-bg: #c8e6c9; --note-fg: #1b5e20; }
[data-color='orange'] { --note-bg: #ffe0b2; --note-fg: #e65100; }
[data-color='purple'] { --note-bg: #e1bee7; --note-fg: #4a148c; }
[data-color='white'] { --note-bg: #ffffff; --note-fg: #333333; }
[data-color='charcoal'] { --note-bg: #2d2d2d; --note-fg: #ffffff; }
[data-color='slate'], [data-color='gray'] { --note-bg: #37474f; --note-fg: #ffffff; }
[data-color='midnight'] { --note-bg: #1a237e; --note-fg: #ffffff; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; }
body { background: var(--bg); color: var(--text); font: 14px/1.4 var(--font); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
#app { height: 100%; }
.boot { margin: 40vh auto 0; text-align: center; color: var(--muted); }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { opacity: 0.4; cursor: default; }
.muted { color: var(--muted); }
.error { color: var(--danger); font-size: 13px; min-height: 1em; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text) 22%, transparent); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }

/* Ícones do Tabler por máscara: pintam com currentColor. */
.i { display: inline-block; width: 18px; height: 18px; flex: none; background: currentColor; -webkit-mask: var(--u) center / contain no-repeat; mask: var(--u) center / contain no-repeat; }
.i.sm { width: 14px; height: 14px; }
.i.inline { width: 16px; height: 16px; vertical-align: -3px; }
@keyframes spin { to { transform: rotate(360deg); } }
.spin-i { animation: spin 0.9s linear infinite; }
.spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent); border-top-color: var(--accent); animation: spin 0.8s linear infinite; flex: none; }

.glass { background: var(--glass-bg); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); box-shadow: var(--glass-edge), var(--glass-shadow); }
.glass-strong { background: var(--glass-strong); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); box-shadow: var(--glass-edge), var(--glass-shadow); }

.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 999px; background: transparent; flex: none; }
.icon-btn:hover { background: var(--hover); }
.icon-btn:active { background: var(--pressed); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 14px; border: 0; border-radius: calc(var(--radius) - 2px); background: var(--surface-2); font-weight: 500; }
.btn:hover { filter: brightness(1.06); }
.btn.primary { background: var(--accent); color: #fff; }
.btn.danger { color: var(--danger); }
.btn.small { padding: 4px 10px; font-size: 12px; }
.btn.big { padding: 12px 16px; font-size: 15px; }

.field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); }
.field input, .field select, .select, .note-edit, .q-input, .chat-composer textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--input-border); border-radius: 8px; background: var(--input); color: var(--text); font-size: 16px; outline: none;
}
.field input:focus, .select:focus, .note-edit:focus, .q-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }

/* ---------------------------------------------------------------- pareamento */
.pair-wrap { min-height: 100%; display: grid; place-items: center; padding: calc(24px + var(--safe-t)) 16px calc(24px + var(--safe-b)); background: radial-gradient(1200px 600px at 50% -10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%), var(--bg); }
.pair { width: min(380px, 100%); display: flex; flex-direction: column; gap: 14px; padding: 28px 22px; border-radius: 18px; }
.pair .logo img, .pair .logo { height: 34px; align-self: flex-start; }
.pair p { margin: 0; color: var(--muted); }
.code-input { font: 600 26px/1 var(--mono) !important; letter-spacing: 0.2em; text-align: center; }
.fp { font: 11px var(--mono); word-break: break-all; }

/* ---------------------------------------------------------------- casca */
.shell { position: fixed; inset: 0; display: flex; }
.side { width: 248px; flex: none; display: flex; flex-direction: column; background: var(--sidebar); border-right: 0.5px solid var(--border); padding-top: var(--safe-t); padding-left: var(--safe-l); z-index: 30; }
.side-top { padding: 16px 16px 6px; }
.side-top .logo, .side-top .logo img { height: 26px; display: block; }
.side-head { padding: 14px 16px 6px; color: var(--muted); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.ws-list { flex: 1; overflow-y: auto; padding: 0 8px; display: flex; flex-direction: column; gap: 2px; }
.ws-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; text-align: left; }
.ws-row:hover { background: var(--hover); }
.ws-row.on { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.ws-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: var(--hover); flex: none; }
.ws-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ws-pc { display: flex; color: var(--muted); }
.ws-pc .i { width: 14px; height: 14px; }
.badge { display: inline-flex; align-items: center; gap: 3px; min-width: 22px; padding: 2px 6px; border-radius: 6px; background: var(--hover); font-size: 11px; font-variant-numeric: tabular-nums; color: var(--muted); }
.badge .i { width: 12px; height: 12px; }
.badge.busy { color: var(--accent); }
.badge.warn { background: color-mix(in srgb, var(--warn) 22%, transparent); color: var(--warn); font-weight: 600; justify-content: center; }
.side-foot { padding: 10px 10px calc(10px + var(--safe-b)); border-top: 0.5px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.peers { display: flex; flex-wrap: wrap; gap: 6px; }
.peer-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 6px; border-radius: 999px; background: var(--hover); font-size: 12px; }
.peer-chip .i { width: 14px; height: 14px; }
.peer-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.peer-chip.me { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.side-btn { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; }
.side-btn:hover { background: var(--hover); }

.stage { position: relative; flex: 1; min-width: 0; overflow: hidden; }
.scrim { display: none; }

.topbar { position: absolute; top: calc(10px + var(--safe-t)); left: 50%; transform: translateX(-50%); z-index: 20; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; white-space: nowrap; max-width: calc(100% - 20px); }
.menu-btn { display: none; }
.top-title { display: inline-flex; align-items: center; gap: 4px; max-width: 220px; padding: 5px 10px; border: 0; border-radius: 999px; background: transparent; font-weight: 600; }
.top-title span { overflow: hidden; text-overflow: ellipsis; }
.top-title .i { opacity: 0.5; }
.top-title:hover { background: var(--hover); }
.tool-sep { width: 1px; height: 20px; margin: 0 4px; background: var(--border); }
.zoom-label { min-width: 52px; padding: 5px 6px; border: 0; border-radius: 999px; background: transparent; font-variant-numeric: tabular-nums; }
.zoom-label:hover { background: var(--hover); }
.offline, .banner { position: absolute; left: 50%; transform: translateX(-50%); z-index: 21; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; font-size: 13px; max-width: calc(100% - 24px); }
.offline { bottom: calc(16px + var(--safe-b)); color: var(--warn); }
.banner { top: calc(60px + var(--safe-t)); }

/* ---------------------------------------------------------------- canvas */
.cv { position: absolute; inset: 0; overflow: hidden; background: var(--canvas); touch-action: none; user-select: none; -webkit-user-select: none; cursor: default; }
.cv.moving { cursor: grabbing; }
.grid-bg { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); }
.world { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; will-change: transform; }
.layer { position: absolute; left: 0; top: 0; }
.ropes { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
.rope-line { fill: none; stroke: var(--rope); stroke-width: 2; stroke-linecap: round; }
.rope-end { fill: var(--accent); }

.node { position: absolute; display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; contain: layout paint; }
.node[data-color] { background: var(--note-bg); color: var(--note-fg); }
.node.dragging { box-shadow: 0 16px 56px #00000059, 0 0 0 1px var(--ring); z-index: 100000 !important; }
.n-head { display: flex; align-items: center; gap: 6px; height: 32px; flex: none; padding: 0 8px; background: var(--surface-2); font-size: 13px; }
.node[data-color] .n-head { background: color-mix(in srgb, var(--note-bg), var(--note-fg) 10%); }
.n-icon { display: flex; opacity: 0.8; }
.n-icon .i { width: 15px; height: 15px; }
.kind-terminal .n-icon { color: var(--tc, inherit); opacity: 1; }
.n-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.n-flag { display: flex; opacity: 0.5; }
.n-flag .i { width: 13px; height: 13px; }
.n-badge { padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--warn) 24%, transparent); color: var(--warn); font-size: 11px; font-weight: 600; }
.node[data-status='asking'] .n-badge { background: color-mix(in srgb, var(--accent) 24%, transparent); color: var(--accent); }
.n-body { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.kind-terminal .n-body { background: var(--term-bg); }
.n-screen { margin: 0; padding: 6px 8px; font: 12px/1.25 var(--mono); white-space: pre; color: var(--text); }
.cv.far .n-screen, .cv.far .n-note, .cv.far .n-center span, .cv.far .n-link { visibility: hidden; }
.cv.far .n-head { font-size: 22px; height: 44px; }
.n-note { padding: 10px 12px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
.n-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.25; }
.n-text.w-medium { font-weight: 500; }
.n-text.w-bold { font-weight: 700; }
.kind-text { background: transparent; box-shadow: none; overflow: visible; }
.n-center { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px; color: var(--muted); text-align: center; }
.n-center .i { width: 32px; height: 32px; }
.n-url { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.n-link { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; }
.kind-group { background: color-mix(in srgb, var(--group, #8e8e93) 10%, transparent); border: 2px dashed var(--group, #8e8e93); box-shadow: none; }
.kind-group .n-head { background: color-mix(in srgb, var(--group, #8e8e93) 28%, var(--surface)); }
.node.redacted .n-body > * { filter: blur(12px); }

.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); opacity: 0.6; flex: none; }
.node[data-status='idle'] .dot, .dot.st-idle { background: var(--ok); opacity: 1; }
.node[data-status='busy'] .dot, .dot.st-busy { background: var(--accent); opacity: 1; animation: pulse 1.2s ease-in-out infinite; }
.node[data-status='attention'] .dot, .dot.st-attention { background: var(--warn); opacity: 1; }
.node[data-status='asking'] .dot, .dot.st-asking { background: var(--accent); opacity: 1; box-shadow: 0 0 0 3px var(--ring); }
@keyframes pulse { 50% { opacity: 0.35; } }

/* ---------------------------------------------------------------- terminal em tela cheia */
.tv { position: fixed; z-index: 40; top: var(--vvt, 0px); left: 0; right: 0; height: var(--vvh, 100dvh); display: flex; flex-direction: column; background: var(--term-bg); opacity: 0; transform: translateY(12px); transition: opacity 180ms ease, transform 180ms ease; }
.tv.in { opacity: 1; transform: none; }
.tv.out { opacity: 0; transform: translateY(12px); }
@media (min-width: 900px) { .tv { left: 248px; } }
.tv-head { display: flex; align-items: center; gap: 8px; padding: calc(6px + var(--safe-t)) calc(10px + var(--safe-r)) 6px calc(8px + var(--safe-l)); border-radius: 0; flex: none; flex-wrap: wrap; row-gap: 4px; }
.tv-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; }
.tv-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-icon { display: flex; }
.tv-st { color: var(--muted); font-size: 12px; white-space: nowrap; }
.tv-typing { font-size: 12px; color: var(--accent); white-space: nowrap; animation: pulse 1.2s ease-in-out infinite; }
.tv-peers { display: flex; gap: 4px; }
.peer { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--hover); color: var(--ok); }
.peer .i { width: 14px; height: 14px; }
.agent-pill { padding: 4px 10px; border: 0.5px solid var(--border); border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); font-size: 12px; font-weight: 600; white-space: nowrap; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
.agent-pill.danger { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.seg { display: inline-flex; padding: 2px; border-radius: 9px; background: var(--input); }
.seg button { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 0; border-radius: 7px; background: transparent; font-size: 13px; font-weight: 500; color: var(--muted); }
.seg button .i { width: 15px; height: 15px; }
.seg button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px #00000026; }
.tv-body { position: relative; flex: 1; min-height: 0; display: flex; }
.tv-scroll { flex: 1; min-width: 0; overflow-x: hidden; overflow-y: hidden; padding: 6px 6px 0 calc(6px + var(--safe-l)); }
.tv-scroll.zoomed { overflow-x: auto; }
.tv-term { height: 100%; width: max-content; min-width: 100%; }
.tv-term.touch { touch-action: none; }
.tv-term .xterm { height: 100%; }
.tv-term .xterm-viewport { background: var(--term-bg) !important; }
/* No toque, o campo escondido do xterm cobre o terminal: tocar abre o teclado e tocar e segurar mostra Colar do iOS. */
.tv-term.touch .xterm-helpers { inset: 0; }
.tv-term.touch .xterm-helper-textarea { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; opacity: 0 !important; z-index: 5 !important; font-size: 16px !important; caret-color: transparent; color: transparent; resize: none; }
.tv[data-tab='chat'] .tv-scroll { display: none; }
.tv[data-tab='term'] .tv-chat { display: none; }
.tv[data-tab='chat'] .tv-keys { display: none; }
.tv-chat { flex: 1; min-width: 0; display: flex; background: var(--bg); }
.tv-off { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; background: color-mix(in srgb, var(--term-bg) 86%, transparent); color: var(--muted); }
.tv-off strong { color: var(--text); font-size: 16px; }
.tv-off .i { width: 30px; height: 30px; }
.tv-keys { display: flex; gap: 6px; padding: 8px calc(8px + var(--safe-r)) calc(8px + var(--safe-b)) calc(8px + var(--safe-l)); overflow-x: auto; flex: none; border-radius: 0; scrollbar-width: none; }
.tv-keys::-webkit-scrollbar { display: none; }
.key { flex: none; min-width: 44px; height: 38px; padding: 0 10px; border: 0; border-radius: 9px; background: var(--surface); box-shadow: 0 1px 0 #00000033; font: 600 14px var(--font); display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.key:active, .key[aria-pressed='true'] { background: var(--accent); color: #fff; }
.key-paste { min-width: 96px; background: color-mix(in srgb, var(--accent) 18%, var(--surface)); color: var(--accent); }

.ctx { position: fixed; z-index: 90; min-width: 180px; padding: 5px; border-radius: 10px; display: flex; flex-direction: column; }
.ctx-item { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border: 0; border-radius: 6px; background: transparent; text-align: left; font-size: 13px; }
.ctx-item:hover:not(:disabled) { background: var(--accent); color: #fff; }
.ctx-item .i { width: 15px; height: 15px; }

/* ---------------------------------------------------------------- chat */
.chat { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.chat-scroll { flex: 1; overflow-y: auto; padding: 16px max(16px, var(--safe-l)) 12px; -webkit-overflow-scrolling: touch; }
.chat-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.chat-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 12px; color: var(--muted); text-align: center; }
.chat-empty .i { width: 28px; height: 28px; }
.chat-empty strong { color: var(--text); }
.chat-user { display: flex; justify-content: flex-end; }
.chat-user .bubble { max-width: 86%; padding: 10px 14px; border-radius: 16px; background: color-mix(in srgb, var(--warn) 20%, var(--surface)); border: 0.5px solid color-mix(in srgb, var(--warn) 40%, transparent); display: flex; flex-direction: column; gap: 8px; }
.chat-plain { white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-agent { display: flex; flex-direction: column; gap: 8px; }
.chat-who { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.chat-who time { color: var(--muted); font-size: 12px; }
.chat-avatar { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: var(--surface-2); }
.chat-avatar .i { width: 14px; height: 14px; }
.chat-steps summary { display: inline-flex; padding: 3px 10px; border-radius: 8px; background: var(--hover); font-size: 12px; font-weight: 600; cursor: pointer; list-style: none; }
.chat-steps ol { margin: 8px 0 0; padding-left: 18px; color: var(--muted); font-size: 13px; }
.chat-steps li::marker { color: var(--ok); }
.chat-msg { display: flex; flex-direction: column; gap: 8px; }
.chat-img { max-width: min(100%, 420px); border-radius: 10px; border: 0.5px solid var(--border); }
.chat-file { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 0.5px solid var(--border); border-radius: 8px; background: var(--surface); font-size: 13px; align-self: flex-start; }
.chat-divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }
.chat-divider::before, .chat-divider::after { content: ''; flex: 1; height: 0.5px; background: var(--border); }
.chat-working { display: flex; align-items: center; gap: 8px; max-width: 760px; width: 100%; margin: 0 auto; padding: 0 16px 8px; color: var(--muted); font-size: 13px; }
.chat-composer { display: flex; align-items: flex-end; gap: 6px; margin: 0 auto calc(10px + var(--safe-b)); width: min(760px, calc(100% - 20px)); padding: 6px; border-radius: 16px; }
.chat-composer textarea { flex: 1; resize: none; border: 0 !important; background: transparent !important; box-shadow: none !important; max-height: 160px; padding: 8px 10px; line-height: 1.35; }
.chat-btn { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 10px; background: var(--hover); flex: none; }
.chat-btn.primary { background: var(--accent); color: #fff; }
.md { overflow-wrap: anywhere; line-height: 1.5; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md h1, .md h2, .md h3 { line-height: 1.25; margin: 14px 0 6px; }
.md h1 { font-size: 20px; }
.md h2 { font-size: 17px; }
.md h3 { font-size: 15px; }
.md a { color: var(--accent); }
.md code { font: 12.5px var(--mono); padding: 1px 5px; border-radius: 5px; background: var(--hover); }
.md pre { margin: 8px 0; padding: 10px 12px; border-radius: 10px; background: var(--surface); border: 0.5px solid var(--border); overflow-x: auto; }
.md pre code { padding: 0; background: none; }
.md table { border-collapse: collapse; display: block; overflow-x: auto; }
.md th, .md td { border: 0.5px solid var(--border); padding: 4px 8px; }
.md blockquote { margin: 8px 0; padding-left: 12px; border-left: 3px solid var(--border); color: var(--muted); }

/* ---------------------------------------------------------------- perguntas */
.qdock { position: absolute; z-index: 25; top: calc(60px + var(--safe-t)); right: calc(12px + var(--safe-r)); width: min(380px, calc(100% - 24px)); display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
.qdock > * { pointer-events: auto; }
.q-card { width: 100%; border-radius: 16px; overflow: hidden; animation: qin 220ms cubic-bezier(0.2, 0.9, 0.3, 1.2); }
@keyframes qin { from { opacity: 0; transform: translateY(-8px) scale(0.98); } }
.q-head { display: flex; align-items: center; gap: 8px; padding: 10px 10px 8px 12px; }
.q-avatar { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); flex: none; }
.q-name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--hover); font-size: 11px; font-weight: 600; white-space: nowrap; }
.q-chip .i { width: 13px; height: 13px; }
.q-card[data-kind='permission'] .q-chip:first-of-type { color: var(--warn); }
.q-x { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 999px; background: transparent; }
.q-x:hover { background: var(--hover); }
.q-body { padding: 0 12px 10px; display: flex; flex-direction: column; gap: 10px; }
.q-text { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 30vh; overflow-y: auto; font-size: 14px; }
.q-opts { display: flex; flex-direction: column; gap: 6px; }
.q-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0.5px solid var(--border); border-radius: 10px; background: var(--surface); text-align: left; animation: qin 260ms both; }
.q-opt:hover:not(:disabled) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.q-opt.deny .q-opt-name { color: var(--danger); }
.q-opt .i { opacity: 0.5; width: 15px; height: 15px; }
.q-key { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--hover); font: 600 12px var(--mono); flex: none; }
.q-opt-label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.q-opt-name { font-weight: 500; }
.q-opt-label small { color: var(--muted); font-size: 12px; }
.q-write { display: flex; gap: 6px; align-items: flex-end; }
.q-input { resize: none; font-size: 15px !important; }
.q-send { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 10px; background: var(--accent); color: #fff; flex: none; }
.q-error { display: flex; align-items: center; gap: 6px; color: var(--danger); font-size: 13px; }
.q-done { align-items: center; padding: 14px 12px 16px; text-align: center; }
.q-done-ring { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, var(--ok) 20%, transparent); color: var(--ok); }
.q-done-ring .i { width: 26px; height: 26px; }
.q-foot { display: flex; align-items: center; gap: 8px; padding: 8px 12px 10px; border-top: 0.5px solid var(--border); font-size: 12px; }
.q-link { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border: 0; border-radius: 7px; background: var(--hover); font-size: 12px; font-weight: 500; }
.q-link .i { width: 14px; height: 14px; }
.q-ws { flex: 1; min-width: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-queue { display: inline-flex; align-items: center; gap: 2px; font-variant-numeric: tabular-nums; }
.q-nav { display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 6px; background: transparent; }
.q-nav .i { width: 15px; height: 15px; }
.q-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 0; border-radius: 999px; color: var(--accent); font-weight: 600; }

/* ---------------------------------------------------------------- folhas e avisos */
.sheet-wrap { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center; background: #00000000; transition: background 200ms ease; }
.sheet-wrap.in { background: #00000059; }
.sheet { width: min(520px, 100%); max-height: 86dvh; display: flex; flex-direction: column; border-radius: 18px 18px 0 0; transform: translateY(100%); transition: transform 220ms cubic-bezier(0.2, 0.9, 0.3, 1); padding-bottom: var(--safe-b); }
.sheet.wide { width: min(760px, 100%); }
.sheet-wrap.in .sheet { transform: none; }
@media (min-width: 700px) {
  .sheet-wrap { align-items: center; }
  .sheet { border-radius: 16px; transform: scale(0.97); opacity: 0; transition: transform 180ms ease, opacity 180ms ease; }
  .sheet-wrap.in .sheet { opacity: 1; }
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 12px 8px 18px; }
.sheet-head strong { font-size: 16px; }
.sheet-body { padding: 4px 18px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.settings { display: flex; flex-direction: column; gap: 10px; }
.settings h3 { margin: 8px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.kv { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.kv span { color: var(--muted); }
.kv strong { text-align: right; font-weight: 500; }
.peer-list { display: flex; flex-direction: column; gap: 6px; }
.peer-line { display: flex; align-items: center; gap: 8px; }
.peer-line span:nth-child(2) { flex: 1; }
.agent-menu { display: flex; flex-direction: column; gap: 12px; }
.agent-note { margin: 0; color: var(--muted); font-size: 13px; }
.install { display: flex; flex-direction: column; gap: 12px; }
.steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.steps li { display: flex; gap: 10px; align-items: baseline; line-height: 1.45; }
.step-n { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; flex: none; transform: translateY(-1px); }
.note-view { font-size: 15px; }
.note-edit { min-height: 50dvh; font: 14px/1.45 var(--mono) !important; resize: vertical; }

.toast { position: fixed; z-index: 100; left: 50%; bottom: calc(24px + var(--safe-b)); transform: translate(-50%, 20px); max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 12px; font-size: 13px; opacity: 0; pointer-events: none; transition: opacity 180ms ease, transform 180ms ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { color: var(--danger); }

/* ---------------------------------------------------------------- celular */
@media (max-width: 899px) {
  .side { position: fixed; top: 0; bottom: 0; left: 0; width: min(300px, 84vw); transform: translateX(-102%); transition: transform 220ms cubic-bezier(0.2, 0.9, 0.3, 1); background: var(--glass-strong); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); }
  .drawer .side { transform: none; }
  .drawer .scrim { display: block; position: fixed; inset: 0; z-index: 29; background: #00000059; }
  .menu-btn { display: inline-flex; }
  .topbar { left: calc(10px + var(--safe-l)); right: calc(10px + var(--safe-r)); transform: none; max-width: none; }
  .top-title { flex: 1; max-width: none; justify-content: flex-start; }
  .ws-row { padding: 10px; }
  .qdock { left: calc(10px + var(--safe-l)); right: calc(10px + var(--safe-r)); width: auto; }
  .tv-head .seg button { padding: 5px 8px; }
  .tv-peers { display: none; }
}
@media (max-width: 480px) {
  .tv-head .seg { order: 5; width: 100%; }
  .tv-head .seg button { flex: 1; justify-content: center; }
  .agent-pill { order: 4; }
}