/* Bancada — dark theme in the spirit of the Arduino IDE 2.
   Color carries meaning: teal = actions/compile, orange = in progress,
   violet = the AI, green = success, red = error. */
:root {
  color-scheme: dark;
  --bg: #0c1114; --bg-2: #10171a; --panel: #141c20; --panel-2: #182227; --raised: #1f2b31; --editor: #171e21;
  --line: #243238; --line-2: #31434a; --text: #e2eaec; --muted: #93a5ab; --dim: #647880;
  --teal: #0ca1a6; --teal-2: #1cc4ca; --teal-ink: #03191a; --orange: #f39c12; --green: #4fd08b; --red: #ff6b6b; --yellow: #f3c13d; --violet: #a896ff; --violet-2: #7c68f0; --board-a: #4c8dff; --board-b: #e879b9;
  /* Each board's colour, next to its letter only; the ink is the letter on it. C amber, D lime: far from the AI's lilac and the teal of the actions. */
  --board-a-ink: #06101f; --board-b-ink: #1f0714; --board-c: #f5a847; --board-c-ink: #241402; --board-d: #97d65c; --board-d-ink: #122003;
  --radius: 12px; --radius-sm: 8px;
  --sans: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Code", Consolas, ui-monospace, monospace;
  --shadow: 0 18px 50px #00000073;
  font-family: var(--sans); font-size: 14px; color: var(--text); background: var(--bg);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Engines without <dialog> would show closed dialogs inline. */
dialog:not([open]) { display: none; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--teal-2); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.eyebrow { margin: 0 0 4px; font-size: 11px; letter-spacing: .12em; font-weight: 700; color: var(--muted); }
.error-text { color: var(--red); min-height: 1em; margin: 6px 0 0; }
:focus-visible { outline: 2px solid var(--teal-2); outline-offset: 2px; }

/* ---------- Buttons ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: var(--radius-sm); border: 1px solid transparent; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s, transform .1s, opacity .15s; white-space: nowrap; }
.button svg { width: 17px; height: 17px; }
.button:active:not(:disabled) { transform: translateY(1px); }
.button:disabled { opacity: .45; cursor: not-allowed; }
.button.primary { background: var(--teal); color: #fff; }
.button.primary:hover:not(:disabled) { background: var(--teal-2); }
.button.secondary { background: var(--raised); border-color: var(--line-2); }
.button.secondary:hover:not(:disabled) { border-color: var(--teal); }
.button.danger { background: #3a1d20; border-color: #62303a; color: #ffc2c2; }
.button.small { height: 30px; padding: 0 11px; font-size: 13px; }
.button.big { height: 44px; font-size: 15px; }
.button.choice { background: var(--panel-2); border-color: var(--line-2); height: auto; min-height: 42px; padding: 9px 14px; white-space: normal; text-align: left; justify-content: flex-start; font-weight: 500; }
.button.choice:hover { border-color: var(--violet); background: #211f33; }
.text-button { background: none; border: 0; padding: 4px 6px; color: var(--muted); cursor: pointer; border-radius: 6px; font-weight: 500; }
.text-button:hover:not(:disabled) { color: var(--text); background: #ffffff0d; }
.text-button:disabled { opacity: .4; cursor: not-allowed; }
.danger-text { color: #ff9b9b; }
.link-button { background: none; border: 0; padding: 0; color: var(--teal-2); cursor: pointer; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.icon-button { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-sm); border: 1px solid transparent; background: none; color: var(--muted); cursor: pointer; }
.icon-button svg { width: 18px; height: 18px; }
.icon-button:hover:not(:disabled) { color: var(--text); background: var(--raised); }
.icon-button:disabled { opacity: .4; }
.icon-button.small { width: 28px; height: 28px; }
.tool-button { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px; border: 1px solid transparent; border-radius: var(--radius-sm); background: none; color: var(--muted); cursor: pointer; font-weight: 500; }
.tool-button svg { width: 18px; height: 18px; }
.tool-button:hover:not(:disabled) { color: var(--text); background: var(--raised); }
.inline-check { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
input, select, textarea { background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 8px 10px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px #0ca1a626; }
select { cursor: pointer; }
label { display: block; font-weight: 600; font-size: 13px; margin: 12px 0 6px; }
.inline-check, .switch { margin: 0; font-weight: 500; }

/* ---------- Login ---------- */
.loading-view { display: flex; height: 100vh; align-items: center; justify-content: center; gap: 12px; color: var(--muted); }
.loader { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--teal); animation: spin 1s linear infinite; }
/* boot-check.js: a browser too old to run the bench. */
.loading-view.boot-old { height: auto; min-height: 100vh; padding: 24px 16px; box-sizing: border-box; color: var(--text); }
.boot-old-card { width: 100%; max-width: 520px; padding: 22px 20px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--panel); }
.boot-old-card h1 { margin: 0 0 8px; font-size: 20px; }
.boot-old-lead { margin: 0 0 12px; line-height: 1.55; }
.boot-old-steps { margin: 0; padding-left: 20px; line-height: 1.55; }
.boot-old-steps li + li { margin-top: 6px; }
.login-view { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); min-height: 100vh; }
.login-art { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 28px; padding: 48px; overflow: hidden;
  background: radial-gradient(900px 500px at 30% 40%, #0ca1a61f, transparent 60%), radial-gradient(700px 400px at 80% 80%, #a896ff17, transparent 60%), var(--bg-2); border-right: 1px solid var(--line); }
.login-grid { position: absolute; inset: 0; background-image: linear-gradient(#ffffff08 1px, transparent 1px), linear-gradient(90deg, #ffffff08 1px, transparent 1px); background-size: 32px 32px; mask-image: radial-gradient(circle at 45% 45%, #000 30%, transparent 75%); }
.login-board-wrap { position: relative; width: min(560px, 90%); filter: drop-shadow(0 30px 40px #0009); transform: rotate(-4deg); }
.login-art-caption { position: relative; max-width: 460px; text-align: center; color: var(--muted); font-size: 15px; line-height: 1.55; margin: 0; }
.login-panel { display: flex; flex-direction: column; justify-content: center; padding: 48px clamp(24px, 6vw, 72px); background: var(--panel); }
.login-panel h1 { font-size: 34px; line-height: 1.12; margin: 6px 0 10px; letter-spacing: -.02em; }
.login-intro { color: var(--muted); font-size: 15px; margin: 0 0 22px; }
#login-form input { width: 100%; height: 44px; }
#login-form .button { width: 100%; margin-top: 16px; }
.login-foot { margin-top: 28px; color: var(--dim); font-size: 12px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 20px; letter-spacing: -.01em; margin-bottom: 26px; }
.brand.small { font-size: 16px; margin: 0; }
.brand-mark { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, var(--teal), var(--violet-2)); color: #fff; }
.brand.small .brand-mark { width: 26px; height: 26px; border-radius: 8px; }
.brand-mark svg { width: 62%; height: 62%; }
.compat-card { margin-top: 18px; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line-2); background: var(--panel-2); font-size: 13px; line-height: 1.5; }
.compat-card.unsupported { border-color: #7a3b3b; background: #2a1719; color: #ffd0d0; }
.compat-card.partial { border-color: #6b5a24; background: #26210f; color: #f7e3a6; }
.compat-level { font-weight: 700; margin: 0 0 6px; }
.compat-level.ok { color: var(--green); } .compat-level.partial { color: var(--yellow); } .compat-level.unsupported { color: var(--red); }

/* ---------- App shell ---------- */
.app-shell { display: flex; flex-direction: column; height: 100vh; min-height: 560px; }
.app-shell > * { flex: none; }
.app-shell > .workspace { flex: 1 1 auto; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 54px; padding: 0 14px; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.topbar-left, .topbar-center, .topbar-right { display: flex; align-items: center; gap: 8px; min-width: 0; }
.topbar-left { flex: 1 1 auto; overflow: hidden; }
.topbar-center { flex: none; }
.topbar-right { flex: none; justify-content: flex-end; }
.project-title { display: flex; align-items: center; gap: 8px; min-width: 0; margin-left: 4px; }
#project-name { width: clamp(110px, 16vw, 240px); height: 34px; border-color: transparent; background: transparent; font-weight: 700; font-size: 15px; padding: 0 8px; }
#project-name:hover { border-color: var(--line-2); }
#project-name:focus { background: var(--bg); border-color: var(--teal); }
.save-state { font-size: 12px; color: var(--dim); white-space: nowrap; }
.save-state.dirty { color: var(--orange); }
.action-button { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 6px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text); font-weight: 700; cursor: pointer; transition: border-color .15s, background .15s; }
.action-button svg { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--teal); color: #fff; }
.action-button:hover:not(:disabled) { border-color: var(--teal); background: var(--raised); }
.action-button:disabled { opacity: .45; cursor: not-allowed; }
.action-button.working svg { background: var(--orange); animation: pulse 1.2s ease-in-out infinite; }
.compat-banner { display: flex; align-items: center; gap: 10px; padding: 8px 16px; font-size: 13px; border-bottom: 1px solid var(--line); }
.compat-banner span { flex: 1; }
.compat-banner.unsupported { background: #2a1719; color: #ffd0d0; }
.compat-banner.partial { background: #26210f; color: #f7e3a6; }
.notice { margin: 8px 12px 0; padding: 9px 14px; border-radius: var(--radius-sm); background: #0ca1a61a; border: 1px solid #0ca1a64d; color: #bfeff1; font-size: 13px; }
.notice.error { background: #ff6b6b14; border-color: #ff6b6b55; color: #ffd0d0; }

.workspace { display: grid; grid-template-columns: var(--chat-w, 360px) 10px minmax(0, 1fr) 10px var(--bench-w, 300px); padding: 10px; min-height: 0; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; min-height: 0; }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.panel-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.panel-title h2 { margin: 0; font-size: 15px; }

/* ---------- Chat ---------- */
.chat-panel { display: flex; flex-direction: column; overflow: hidden; }
.ai-mark { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #a896ff26; color: var(--violet); }
.ai-mark svg { width: 19px; height: 19px; }
.chat-status { display: block; font-size: 12px; color: var(--muted); }
.chat-status.connected { color: var(--green); }
/* Nova conversa and the gear beside the title (on a line of their own, on the right, in a very
   narrow column); the model and its effort on the line below, on the right: the effort goes
   under the model only when the two do not fit side by side. Each select as wide as its choice. */
.chat-panel > .panel-header { flex-wrap: wrap; row-gap: 8px; }
.chat-tools { display: flex; align-items: center; gap: 4px; flex: none; margin-left: auto; }
.chat-tools .text-button { font-size: 13px; white-space: nowrap; }
.ai-pickers { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 10px; min-width: 0; }
.model-select, .effort-select { height: 32px; min-width: 0; font-size: 13px; padding: 0 8px; text-overflow: ellipsis; field-sizing: content; }
.model-select { max-width: 150px; }
.effort-picker { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.effort-label { margin: 0; font-size: 12px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.effort-select { max-width: 200px; }
/* What the provider allows for now (the effort served lower): a line of its own under the pickers, on the right. */
.effort-note { flex: 1 1 100%; margin: 0; font-size: 12px; line-height: 1.35; color: var(--muted); text-align: right; }
.switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13px; font-weight: 600; }
.switch input { position: absolute; opacity: 0; }
.switch-track { position: relative; width: 34px; height: 20px; border-radius: 999px; background: var(--line-2); transition: background .2s; }
.switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .2s; }
.switch input:checked + .switch-track { background: var(--violet-2); }
.switch input:checked + .switch-track::after { transform: translateX(14px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--teal-2); outline-offset: 2px; }
.ai-settings-feedback, .chat-config-note { margin: 10px 14px 0; padding: 9px 12px; border-radius: var(--radius-sm); font-size: 13px; background: var(--panel-2); border: 1px solid var(--line-2); }
.chat-config-note { border-color: #6b5a24; background: #26210f; color: #f7e3a6; }
.chat-feed { flex: 1; overflow-y: auto; padding: 14px; min-height: 0; overflow-anchor: none; }
.chat-jump { position: sticky; bottom: 4px; display: block; width: fit-content; margin: 8px auto 0; padding: 7px 14px; border: 1px solid var(--violet-2); border-radius: 99px; background: var(--panel-2); color: var(--text); font-size: 12.5px; font-weight: 600; box-shadow: var(--shadow); cursor: pointer; }
.chat-jump:hover { transform: translateY(-1px); }
.chat-empty h3 { margin: 18px 0 6px; font-size: 20px; }
.chat-empty p { color: var(--muted); line-height: 1.5; margin: 0 0 16px; }
.chat-suggestions { display: grid; gap: 8px; }
.chat-suggestions button { text-align: left; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--panel-2); cursor: pointer; line-height: 1.35; }
.chat-suggestions button:hover { border-color: var(--violet); background: #1f1d30; }
.chat-messages { display: flex; flex-direction: column; gap: 12px; }
.chat-message { max-width: 100%; }
.chat-message-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); margin-bottom: 4px; }
.chat-message-user { align-self: flex-end; max-width: 88%; background: var(--raised); border: 1px solid var(--line-2); border-radius: 14px 14px 4px 14px; padding: 9px 12px; }
.chat-message-user .chat-message-label { display: none; }
.chat-message-assistant .chat-message-label { color: var(--violet); }
.chat-text { margin: 0 0 8px; white-space: pre-wrap; line-height: 1.55; overflow-wrap: anywhere; }
.chat-message-user .chat-text { margin: 0; }
.chat-code-block { border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; margin: 6px 0 10px; background: var(--editor); }
.chat-code-header { display: flex; justify-content: space-between; align-items: center; padding: 5px 8px 5px 12px; background: var(--panel-2); font-size: 12px; color: var(--muted); font-family: var(--mono); }
.chat-apply { background: var(--teal); color: #fff; border: 0; border-radius: 6px; padding: 4px 10px; font-size: 12px; font-weight: 700; cursor: pointer; }
.chat-apply:disabled { opacity: .4; cursor: not-allowed; }
.chat-code-block pre { margin: 0; padding: 10px 12px; overflow: auto; max-height: 320px; font-family: var(--mono); font-size: 12.5px; line-height: 1.55; }
.chat-pending { color: var(--muted); font-size: 13px; margin: 4px 0 0; }
.chat-pending::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--violet); animation: pulse 1s ease-in-out infinite; }
.agent-activity { border: 1px solid #a896ff40; background: #a896ff0a; border-radius: 12px; padding: 4px 10px 8px; }
.agent-activity summary { cursor: pointer; padding: 6px 2px; font-size: 12px; font-weight: 700; color: var(--violet); letter-spacing: .02em; }
.agent-action-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.agent-action { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; align-items: start; }
.agent-action-note { grid-template-columns: minmax(0, 1fr); padding: 6px 8px; border-radius: 8px; background: #ffffff08; }
.agent-action-icon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--raised); color: var(--teal-2); font-size: 13px; font-weight: 700; }
/* Stopwatch in the AI activity: small, muted, steady-width digits. */
.agent-time, .agent-action-time { font-variant-numeric: tabular-nums; color: var(--muted); letter-spacing: 0; white-space: nowrap; }
.agent-activity summary .agent-time { font-weight: 500; }
.agent-action-timed { grid-template-columns: 24px minmax(0, 1fr) auto; }
.agent-action-time { align-self: start; padding-top: 2px; font-size: 11.5px; }
.agent-action-time.agent-time-running { color: color-mix(in srgb, var(--orange) 80%, transparent); }
.agent-live-status .agent-time { color: inherit; opacity: .75; }
/* State of the row itself only: a group's rows open inside it. */
.agent-action-running > .agent-action-icon { background: #f39c1226; color: var(--orange); animation: pulse 1.2s ease-in-out infinite; }
.agent-action-failed > .agent-action-icon { background: #ff6b6b24; color: var(--red); }
.agent-action strong { font-size: 13px; }
.agent-action p { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.agent-action-note p { color: var(--text); font-size: 13px; }
.agent-action-failed > .agent-action-content > p { color: #ffb3b3; }
/* The AI's photos: each thumbnail in the photo's own shape inside a 120×68 box (72×40 in a
   group), never cropped; width/height come from chat-photos.js. A click enlarges it. */
.agent-action-images { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; align-items: center; }
.agent-image { display: block; flex: none; padding: 0; border: 1px solid var(--line-2); border-radius: 6px; background: #000; line-height: 0; overflow: hidden; cursor: zoom-in; transition: transform .15s, border-color .15s; }
.agent-image:hover { transform: translateY(-1px); border-color: var(--teal-2); }
.agent-image:active { transform: translateY(1px); }
.agent-image img { display: block; max-width: 120px; max-height: 68px; object-fit: contain; }
.agent-image img:not([width]) { width: auto; height: 68px; }
.agent-group-images .agent-image img { max-width: 72px; max-height: 40px; }
.agent-group-images .agent-image img:not([width]) { height: 40px; }
.agent-action .agent-photo-note { font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .agent-image:hover, .agent-image:active { transform: none; } }
/* Repeated actions folded into one row; the single rows open under it. */
.agent-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.agent-group-detail { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.agent-group-failed { color: var(--red); }
.agent-group-toggle { display: inline-block; margin: 2px 0 0 -6px; padding: 2px 6px; font-size: 12px; color: var(--teal-2); }
.agent-group-rows { margin-top: 6px; padding-left: 10px; border-left: 2px solid var(--line-2); }
.agent-live-status { margin: 8px 0 0; font-size: 12px; color: var(--orange); }
.agent-activity-error { margin: 8px 0 0; font-size: 12px; color: var(--red); }
.agent-restore { margin-top: 8px; color: var(--teal-2); font-size: 12.5px; }
.chat-composer { border-top: 1px solid var(--line); padding: 10px 12px 12px; background: var(--panel); }
.chat-composer textarea { width: 100%; resize: none; min-height: 64px; max-height: 180px; line-height: 1.45; background: var(--bg-2); }
.chat-composer-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
/* Voice assistant and paperclip on the left; dictation, Parar and Enviar on the right. */
.chat-composer-actions > div { display: flex; align-items: center; gap: 6px; min-width: 0; }
.chat-composer-end { margin-left: auto; }
.chat-error { margin: 8px 0 0; color: #ffb3b3; font-size: 13px; }
body.agent-running #chat-send { background: var(--orange); }
/* Attachments of the next message (chips), the cost line and the drop target; also shown under sent messages. */
.chat-composer { position: relative; }
.icon-button.attach { border-color: var(--line-2); }
.chat-chips, .chat-message-attachments { display: flex; flex-wrap: wrap; gap: 6px; max-width: 100%; margin: 0 0 8px; padding: 0; list-style: none; }
/* The tray of the next message: compact chips, two side by side in the narrow chat column (more when it is wider). */
.chat-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 132px), 1fr)); }
.chat-message-attachments { margin: 8px 0 0; }
.chat-chip { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; padding: 3px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--bg-2); }
.chat-message-attachments .chat-chip { flex: 0 1 200px; padding-right: 8px; }
.chat-chips .chat-chip.is-error, .chat-chips .chat-chip.is-warn { grid-column: 1 / -1; }
.chat-chip-thumb, .chat-chip-badge { flex: none; width: 32px; height: 32px; border-radius: 6px; }
.chat-chip-thumb { object-fit: cover; background: #fff; }
.chat-chip-badge { display: grid; place-items: center; background: var(--raised); color: var(--teal-2); font-size: 10px; font-weight: 800; letter-spacing: .02em; }
.chat-chip-text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; }
.chat-chip-name, .chat-chip-detail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-chip-name { font-size: 12px; font-weight: 600; }
.chat-chip-detail { font-size: 11px; color: var(--muted); }
.chat-chip-detail:empty { display: none; }
.chat-chip-remove { flex: none; width: 24px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; }
.chat-chip-remove:hover, .chat-chip-remove:focus-visible { color: var(--text); background: var(--raised); }
.chat-chip.is-reading .chat-chip-detail { color: var(--orange); }
.chat-chip.is-error { border-color: #ff6b6b66; }
.chat-chip.is-warn { border-color: #f3c13d66; }
.chat-chip.is-error .chat-chip-detail, .chat-chip.is-warn .chat-chip-detail { white-space: normal; }
.chat-chip.is-error .chat-chip-detail { color: var(--red); }
.chat-chip.is-warn .chat-chip-detail { color: var(--yellow); }
.chat-attach-note { margin: 0 0 8px; color: var(--muted); }
.chat-attach-note.is-warn { color: var(--yellow); }
.chat-attach-note.is-error { color: var(--red); }
.chat-drop { position: absolute; inset: 4px; z-index: 5; display: grid; place-items: center; padding: 12px; border: 2px dashed var(--teal); border-radius: var(--radius); background: #141c20eb; color: var(--teal-2); font-weight: 700; text-align: center; pointer-events: none; }

/* ---------- Editor ---------- */
.center-column { display: grid; grid-template-rows: minmax(0, 1fr) 10px var(--console-h, 260px); min-width: 0; min-height: 0; }
.editor-panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; background: var(--editor); }
.file-tabs { display: flex; align-items: center; gap: 2px; min-width: 0; padding: 0 6px; background: var(--bg-2); border-bottom: 1px solid var(--line); min-height: 38px; }
.file-tab-list { position: relative; display: flex; overflow-x: auto; min-width: 0; scrollbar-width: none; overscroll-behavior-x: contain; }
.file-tab-list::-webkit-scrollbar { display: none; }
.file-tab-list.fade-right { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
.file-tab-list.fade-left { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px); mask-image: linear-gradient(90deg, transparent, #000 44px); }
.file-tab-list.fade-left.fade-right { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); }
.file-list-wrap, .file-tabs > .icon-button, .web-toggle { flex: none; }
.web-toggle { white-space: nowrap; }
.icon-button.small.file-list-open { width: auto; min-width: 28px; gap: 4px; padding: 0 6px; display: inline-flex; align-items: center; }
.file-list-open svg { width: 16px; height: 16px; }
.file-list-count { font: 11px var(--mono); color: var(--muted); }
/* Two classes: .action-menu (later in the file) would make it absolute. */
.action-menu.file-list-menu { position: fixed; top: 0; left: 0; z-index: 70; width: 300px; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 6px; max-height: min(60vh, 460px); overscroll-behavior: contain; }
.file-list-menu input { width: 100%; height: 32px; font-size: 13px; }
.file-list-items { position: relative; display: grid; align-content: start; gap: 1px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.file-list-items button { font: 12.5px var(--mono); padding: 6px 10px; }
.file-list-items button.active { background: #0ca1a61f; color: var(--teal-2); }
.file-list-items button.ai-changed::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--violet); }
.file-list-items button.has-error::after { content: ""; flex: none; width: 6px; height: 6px; margin-left: auto; border-radius: 50%; background: var(--red); }
.file-list-empty { margin: 6px 10px; }
.file-tab { display: flex; align-items: center; height: 38px; border-top: 2px solid transparent; color: var(--muted); flex: none; }
.file-tab.active { background: var(--editor); color: var(--text); border-top-color: var(--teal); }
.file-tab.has-error .tab-open::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 7px; border-radius: 50%; background: var(--red); vertical-align: middle; }
.tab-open { height: 100%; padding: 0 6px 0 14px; background: none; border: 0; cursor: pointer; font-family: var(--mono); font-size: 12.5px; }
.file-tab:not(:has(.tab-close)) .tab-open { padding-right: 14px; }
.tab-close { width: 22px; height: 22px; margin-right: 6px; border: 0; border-radius: 5px; background: none; color: var(--dim); cursor: pointer; opacity: 0; }
.file-tab:hover .tab-close, .file-tab.active .tab-close { opacity: 1; }
.tab-close:hover:not(:disabled) { background: var(--raised); color: var(--text); }
.editor-wrap { min-height: 0; overflow: hidden; }
#code-editor { height: 100%; }
#code-editor .cm-editor { height: 100%; }
.status-bar { display: flex; align-items: center; gap: 16px; height: 26px; padding: 0 12px; background: #0f1619; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 11.5px; color: var(--dim); white-space: nowrap; overflow: hidden; }
.status-bar .spacer { flex: 1; }
#status-memory { color: var(--teal-2); }

/* ---------- Console ---------- */
.console-panel { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); overflow: hidden; }
.console-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-width: 0; padding: 0 10px 0 4px; border-bottom: 1px solid var(--line); }
.console-tabs { display: flex; flex: none; }
.console-tab { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); cursor: pointer; font-weight: 600; font-size: 13px; white-space: nowrap; }
.console-tab.selected { color: var(--text); border-bottom-color: var(--teal); }
.console-actions { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 0 1 auto; }
.console-actions > :not(.compile-stage) { flex: none; }
.compile-stage { min-width: 0; flex: 0 1 auto; font-size: 12px; color: var(--orange); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge { font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--raised); color: var(--muted); }
.badge.running { background: #f39c1226; color: var(--orange); }
.badge.ok { background: #4fd08b22; color: var(--green); }
.badge.failed { background: #ff6b6b22; color: var(--red); }
.count { font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: #f3c13d26; color: var(--yellow); }
.count.error { background: #ff6b6b26; color: var(--red); }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px #4fd08b22; }
.status-dot.idle { background: var(--dim); box-shadow: none; }
.line-progress { width: 100%; height: 3px; border: 0; appearance: none; display: block; background: transparent; }
.line-progress::-webkit-progress-bar { background: transparent; }
.line-progress::-webkit-progress-value { background: var(--orange); }
.line-progress:indeterminate { background: linear-gradient(90deg, transparent, var(--orange), transparent) 0 0 / 40% 100% no-repeat; animation: slide 1.2s linear infinite; }
.console-pane { display: flex; flex-direction: column; min-height: 0; grid-row: 4; }
/* Fixed rows: hidden progress bars must not pull the pane into an auto-height row. */
.console-panel > .console-header { grid-row: 1; }
#compile-progress { grid-row: 2; }
#flash-progress { grid-row: 3; }
.console-output { flex: 1; margin: 0; padding: 10px 14px; overflow: auto; font-family: var(--mono); font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; color: #c3d2d6; background: #0f1518; min-height: 0; }
.serial-output { color: #cdeee2; }
.serial-toolbar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.serial-toolbar select { height: 30px; padding: 0 8px; font-size: 13px; }
.serial-toolbar .serial-options { display: inline-flex; align-items: center; gap: 14px; margin-left: auto; }
.serial-time { color: var(--dim); }
.serial-output.no-times .serial-time { display: none; }
.serial-send { display: flex; gap: 8px; align-items: center; padding: 6px 10px; border-top: 1px solid var(--line); }
.serial-send input:not([type]) , .serial-send #serial-input { flex: 1; height: 30px; font-family: var(--mono); font-size: 12.5px; }
.problems-list { list-style: none; margin: 0; padding: 6px; overflow: auto; flex: 1; }
.problems-list.stale { opacity: .6; }
.problems-list li.muted { padding: 10px; }
.problem { display: flex; gap: 12px; width: 100%; text-align: left; padding: 7px 10px; border: 0; border-radius: 6px; background: none; cursor: pointer; font-size: 13px; }
.problem:hover { background: var(--raised); }
.problem-where { font-family: var(--mono); font-size: 12px; color: var(--muted); flex: none; }
.problem.error .problem-where { color: var(--red); }
.problem.warning .problem-where { color: var(--yellow); }
/* Two boards: two monitors side by side (one at a time when narrow, picked by
   #serial-switch through #serial-pane[data-show]); Saída shows one log at a time. */
.serial-columns { display: flex; flex: 1; min-height: 0; }
.serial-column { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; min-height: 0; }
.serial-column + .serial-column { border-left: 1px solid var(--line); }
html:not([data-boards="2"]) :is(#compile-badge-b, #serial-dot-b) { display: none !important; }
html[data-boards="2"] #compile-badge::before { content: "A "; }
html[data-boards="2"] #compile-badge-b::before { content: "B "; }
html[data-boards="2"] #serial-dot-b { margin-left: -3px; }
html[data-boards="2"] .console-panel { container: console / inline-size; }
html[data-boards="2"] .serial-toolbar { gap: 6px; padding: 5px 8px; }
html[data-boards="2"] .serial-toolbar select { max-width: 124px; }
html[data-boards="2"] .serial-send { padding: 5px 8px; }
#serial-switch { display: none; }
.console-panel:has(#output-pane[hidden]) #output-switch { display: none; }
@container console (max-width: 699px) {
  .console-header { flex-wrap: wrap; }
  .console-panel:not(:has(#serial-pane[hidden])) #serial-switch { display: inline-flex; }
  #serial-pane .serial-column:not([data-target="a"]), #serial-pane[data-show] .serial-column[data-target="a"] { display: none; }
  :is(#serial-pane[data-show="b"] #serial-column-b, #serial-pane[data-show="c"] #serial-column-c, #serial-pane[data-show="d"] #serial-column-d) { display: flex; }
  .serial-column + .serial-column { border-left: 0; }
  /* The tab row must fit a phone: each board's build state is its letter in
     the state's color (the word stays for screen readers). */
  .console-tabs { min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .console-tab { flex: none; padding: 0 9px; white-space: nowrap; }
  html[data-boards="2"] :is(#compile-badge, #compile-badge-b) { min-width: 17px; padding: 2px 5px; font-size: 0; text-align: center; }
  html[data-boards="2"] #compile-badge::before { content: "A"; font-size: 10.5px; }
  html[data-boards="2"] #compile-badge-b::before { content: "B"; font-size: 10.5px; }
  html[data-boards="2"] #compile-badge-b { margin-left: -4px; }
}

/* ---------- Bench ---------- */
.bench-panel { display: flex; flex-direction: column; gap: 0; overflow-y: auto; }
.bench-card { padding: 14px; border-bottom: 1px solid var(--line); }
.bench-card:last-child { border-bottom: 0; }
.bench-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.bench-card-head h2 { margin: 0; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.state-pill { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--raised); color: var(--muted); }
.state-pill.connected, .state-pill.running { background: #4fd08b1f; color: var(--green); }
.state-pill.flashing { background: #f39c1226; color: var(--orange); }
.board-stage { position: relative; padding: 8px 4px 2px; border-radius: 10px; background: radial-gradient(260px 120px at 50% 55%, #0ca1a614, transparent 70%); }
.board-art { width: 100%; height: auto; display: block; overflow: visible; }
.board-status { font-size: 12.5px; color: var(--muted); margin: 8px 0 10px; line-height: 1.45; }
.board-actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-bottom: 8px; }
.firmware-details { margin-top: 10px; font-size: 13px; }
.firmware-details summary { cursor: pointer; color: var(--muted); }
.download-link { display: inline-block; margin-top: 6px; font-weight: 600; }
.camera-card .media-preview { position: absolute; inset: 0; }
.camera-card video { width: 100%; height: 100%; object-fit: contain; display: block; }
.camera-placeholder { display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: center; padding: 12px; border: 1px dashed var(--line-2); border-radius: 10px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.camera-placeholder svg { width: 32px; height: 32px; color: var(--violet); }
.camera-placeholder p { margin: 0; }
.eyes-empty-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mic-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.microphone-preview meter { width: 100%; }
.microphone-preview { flex: 1; }
.media-active { border-color: var(--green) !important; color: var(--green); }

/* Board illustration states (values flow into the <use> shadow tree). */
.board-art { --led-power: #3a2323; --glow-power: 0; --led-user: #1b273a; --glow-user: 0; --cable: 0; }
.board-art[data-state="connected"], .board-art[data-state="running"], .board-art[data-state="flashing"] { --led-power: #ff584c; --glow-power: .75; --cable: 1; }
.board-art[data-state="flashing"] { animation: flash-led .22s steps(1) infinite; }
.board-art.rx { --led-user: #4c8dff; --glow-user: .9; }
/* LEDs that are not red/blue on the real board: Arduino "ON" is green, "L" amber, the Pico's green. */
.board-art { --led-power-green: #1c3325; --led-user-amber: #3b2f16; --led-user-green: #1c3325; }
.board-art[data-state="connected"], .board-art[data-state="running"], .board-art[data-state="flashing"] { --led-power-green: #45e08a; }
.board-art.rx { --led-user-amber: #ffb02e; --led-user-green: #45e08a; }
.board-stage .board-art { max-height: 180px; }
/* Two boards: the drawings side by side at half size, each with its letter,
   name, state and small buttons; the single-board lines below are hidden. */
.board-slot { min-width: 0; }
html:not([data-boards="2"]) :is(#slot-state-a, #slot-state-b) { display: none !important; }
html[data-boards="2"] .board-stage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 6px 0 0; }
html[data-boards="2"] .board-slot { display: grid; align-content: start; justify-items: stretch; gap: 4px; padding: 6px 4px 8px; border-radius: 8px; background: #ffffff05; overflow: hidden; text-align: center; }
/* Each half keeps to its column in a narrow bench: names cut with an ellipsis,
   buttons shrink, and Identificar becomes the same ⓘ as board B. */
html[data-boards="2"] .board-slot > * { min-width: 0; }
html[data-boards="2"] .slot-name, html[data-boards="2"] .slot-state { justify-content: center; width: 100%; }
html[data-boards="2"] .slot-actions { flex-wrap: nowrap; width: 100%; }
html[data-boards="2"] .slot-actions .button { flex: 0 1 auto; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-boards="2"] #slot-actions-a #identify-board { flex: none; font-size: 0; }
html[data-boards="2"] #slot-actions-a #identify-board::after { content: "ⓘ"; font-size: 12px; }
html[data-boards="2"] .board-stage .board-art { max-height: 64px; }
html[data-boards="2"] :is(.board-card .board-identity, #usb-port-status, #board-state-label) { display: none; }
html[data-boards="2"] .board-card .board-actions:not(:has(button)) { display: none; }
.slot-name { display: flex; align-items: center; gap: 5px; max-width: 100%; margin: 0; font-size: 12.5px; font-weight: 600; }
.slot-name > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-state { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; margin: 0; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot-state::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--dim); }
.slot-state:is([data-state="connected"], [data-state="running"])::before { background: var(--green); box-shadow: 0 0 0 3px #4fd08b22; }
.slot-state[data-state="flashing"]::before { background: var(--orange); animation: pulse 1.2s ease-in-out infinite; }
.slot-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.slot-actions .button { height: 28px; padding: 0 9px; font-size: 12px; }
.slot-actions .button svg { display: none; }
.led-power rect { fill: var(--led-power); }
.led-power .led-glow { fill: var(--led-power); opacity: var(--glow-power); filter: blur(5px); }
.led-user rect { fill: var(--led-user); }
.led-user .led-glow { fill: var(--led-user); opacity: var(--glow-user); filter: blur(5px); }
.usb-cable { opacity: var(--cable); }
.led-power.green rect, .led-power.green .led-glow { fill: var(--led-power-green); }
.led-user.amber rect, .led-user.amber .led-glow { fill: var(--led-user-amber); }
.led-user.green rect, .led-user.green .led-glow { fill: var(--led-user-green); }

/* ---------- Dialogs ---------- */
.modal { width: min(560px, calc(100vw - 32px)); max-height: min(88vh, 900px); overflow: auto; padding: 22px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--panel); color: var(--text); box-shadow: var(--shadow); }
.modal::backdrop { background: #04080acc; backdrop-filter: blur(3px); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.modal-head h2 { margin: 0; font-size: 19px; }
.modal-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.modal input, .modal select { width: 100%; height: 40px; }
.agent-request { width: min(600px, calc(100vw - 32px)); border-color: #a896ff66; box-shadow: 0 0 0 1px #a896ff33, 0 24px 70px #000a, 0 0 80px #7c68f033; }
.agent-request-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 10px; }
.agent-request-head .eyebrow { color: var(--violet); }
.agent-request-head h2 { margin: 0; font-size: 20px; line-height: 1.25; }
.pulse-dot { flex: none; width: 12px; height: 12px; margin-top: 6px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 0 #a896ff99; animation: ring 1.6s ease-out infinite; }
.agent-request-text { font-size: 15px; line-height: 1.55; white-space: pre-wrap; margin: 0 0 12px; }
.agent-request-body { display: grid; gap: 10px; }
.agent-request-options { display: grid; gap: 8px; }
.agent-request-form { display: grid; gap: 8px; }
.agent-request-form textarea { width: 100%; resize: vertical; min-height: 56px; }
.agent-request-video { display: block; width: 100%; height: auto; max-height: min(45vh, 420px); border-radius: 10px; background: #000; object-fit: contain; }
.agent-request-status { margin: 0; font-size: 13px; color: var(--muted); }
.agent-request-status.error { color: #ffb3b3; }
.agent-request-note { font-size: 12.5px; color: var(--muted); margin: 4px 0 0; }
.agent-request-steps { margin: 0; padding-left: 22px; display: grid; gap: 6px; font-size: 13.5px; line-height: 1.45; }
.agent-request-pick { margin: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid #a896ff55; background: #a896ff14; font-size: 15px; line-height: 1.45; }
.agent-request-pick strong { color: var(--text); font-size: 17px; font-family: var(--mono); overflow-wrap: anywhere; }
.agent-request-help summary { cursor: pointer; color: var(--teal-2); font-size: 13px; }
.usb-help h3 { margin: 12px 0 8px; font-size: 15px; }
.usb-help-steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 13px; line-height: 1.5; }
.usb-help-steps strong { display: block; }
.usb-help-steps span { color: var(--muted); }
.usb-help-adapter { font-size: 13px; padding: 8px 10px; border-radius: 8px; background: var(--panel-2); }
.driver-guide-system { margin: -4px 0 6px; color: var(--dim); }
.driver-guide-lead { margin: 0 0 10px; font-size: 13px; line-height: 1.5; }
.driver-board-note { margin: 0 0 10px; line-height: 1.5; }
.driver-code { display: block; margin-top: 4px; padding: 6px 8px; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--line); font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; user-select: all; }
.driver-chooser { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.driver-chooser > summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.driver-question { margin: 8px 0; font-weight: 600; font-size: 14px; }
.driver-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.driver-chip[aria-pressed="true"] { border-color: var(--teal); background: var(--panel-2); }
.driver-panel { margin-top: 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--panel-2); font-size: 13px; line-height: 1.5; }
.driver-panel p { margin: 6px 0; }
.driver-button { height: auto; min-height: 36px; padding: 6px 14px; white-space: normal; text-align: center; text-decoration: none; }
.driver-hash span { color: var(--muted); }
.driver-panel-title { font-weight: 600; margin: 10px 0 4px !important; }
.driver-panel-steps { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.driver-page-link { display: inline-block; margin-top: 6px; }
.projects-dialog { width: min(920px, calc(100vw - 32px)); }
.projects-dialog .modal-head p { margin: 2px 0 0; }
.projects-toolbar { display: flex; gap: 10px; margin-bottom: 14px; }
.projects-toolbar input { flex: 1; min-width: 0; }
.project-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.project-card { position: relative; display: grid; grid-template-rows: 1fr auto; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); transition: border-color .15s, transform .15s; }
.project-card:hover { border-color: var(--line-2); transform: translateY(-1px); }
.project-card.active { border-color: #0ca1a680; box-shadow: inset 0 0 0 1px #0ca1a640; }
.project-card-main { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; padding: 14px 14px 8px; }
.project-card-body { min-width: 0; }
/* The name opens the project; its ::after covers the whole card. What sits above it (description, actions) is raised. */
.project-card-open { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.project-card-open::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.project-card-open:focus-visible { outline: none; }
.project-card-open:focus-visible::after { outline: 2px solid var(--teal-2); outline-offset: 2px; }
.project-card-desc, .project-card-desc-edit, .project-card-rename, .project-card-actions { position: relative; z-index: 1; }
.project-card-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, #0ca1a633, #7c68f033); color: var(--teal-2); font-weight: 800; font-size: 14px; letter-spacing: .02em; }
.project-card-name { display: block; font-size: 15px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-card-desc { display: block; width: calc(100% + 8px); min-height: calc(2.8em + 4px); margin: 2px 0 0 -4px; padding: 2px 4px; border: 0; border-radius: 6px; background: none; color: var(--muted); font: inherit; font-size: 12.5px; line-height: 1.4; text-align: left; cursor: text; }
.project-card-desc-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
button.project-card-desc:hover { background: #ffffff0a; color: var(--text); }
.project-card-desc.empty { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; cursor: default; }
.project-card-describe { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border: 1px solid var(--line-2); border-radius: 999px; background: none; color: var(--violet); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.project-card-describe svg { width: 13px; height: 13px; flex: none; }
.project-card-describe:hover:not(:disabled) { background: #a896ff14; border-color: #a896ff66; }
.project-card-describe:disabled { opacity: .75; cursor: progress; }
.project-card-desc .project-card-write { font-size: 12px; padding: 3px 6px; }
.project-card-desc-edit { width: 100%; margin-top: 3px; font-size: 12.5px; }
.project-card-desc-code { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.project-card-desc-code .project-card-desc { min-height: 0; }
.project-card-files { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.project-card-files span { padding: 1px 7px; border-radius: 999px; background: #ffffff0d; border: 1px solid var(--line); font: 11px var(--mono); color: var(--muted); }
.project-card-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 11.5px; color: var(--dim); }
/* Above the open button's overlay, so the full date shows on hover. */
.project-card-meta span[title] { position: relative; z-index: 1; }
.project-card-badge { position: absolute; top: 10px; right: 10px; padding: 2px 8px; border-radius: 999px; background: #0ca1a626; color: var(--teal-2); font-size: 11px; font-weight: 700; }
.project-card-actions { display: flex; align-items: center; gap: 2px; padding: 4px 8px 8px; border-top: 1px solid var(--line); }
.project-card-actions .text-button { font-size: 12.5px; padding: 4px 6px; }
/* Delete: a quiet trash at the right end, red only on hover or focus. */
.project-card-trash { margin-left: auto; color: var(--dim); }
.project-card-trash svg { width: 16px; height: 16px; }
.icon-button.project-card-trash:hover:not(:disabled), .icon-button.project-card-trash:focus-visible { color: var(--red); background: #ff6b6b14; }
/* The question replaces the actions: [Excluir] on the left, [Cancelar] where the trash was. */
.project-card.confirming { border-color: #ff6b6b66; }
.project-card-confirm { flex-wrap: wrap; gap: 6px 8px; padding-top: 8px; background: #ff6b6b0d; border-top-color: #ff6b6b40; border-radius: 0 0 11px 11px; }
.project-card-question { flex: 1 1 100%; margin: 0 6px; font-size: 12.5px; line-height: 1.4; color: var(--text); overflow-wrap: anywhere; }
.project-card-confirm-buttons { display: flex; width: 100%; justify-content: space-between; gap: 8px; }
.project-card-confirm .project-card-delete { color: #ff9b9b; font-weight: 700; }
.project-card-confirm .project-card-delete:hover:not(:disabled) { color: #fff; background: #d64545; }
.project-card-confirm .project-card-keep { color: var(--text); }
.project-card-rename { width: 100%; font-size: 14px; }
/* "Baixar": the formats open inside the card (above the card-wide open button). */
.project-card-actions .project-card-export { display: inline-flex; align-items: center; gap: 2px; }
.project-card-export svg { width: 14px; height: 14px; transition: transform .15s; }
.project-card-export[aria-expanded="true"] { color: var(--teal-2); background: #0ca1a614; }
.project-card-export[aria-expanded="true"] svg { transform: rotate(180deg); }
.project-card-export-menu { position: relative; z-index: 1; display: grid; gap: 2px; padding: 6px 8px 10px; border-top: 1px solid var(--line); background: #ffffff05; border-radius: 0 0 11px 11px; }
.project-card-export-title { margin: 2px 8px 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.project-card-export-option { display: grid; gap: 1px; width: 100%; padding: 7px 8px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.project-card-export-option small { color: var(--dim); font-size: 11.5px; }
.project-card-export-option:hover:not([aria-disabled="true"]), .project-card-export-option:focus-visible { background: var(--raised); outline: none; }
.project-card-export-option:focus-visible { box-shadow: inset 0 0 0 2px var(--teal-2); }
.project-card-export-option[aria-disabled="true"] { opacity: .55; cursor: progress; }
.project-card-export-note, .project-card-export-hint { margin: 2px 8px; font-size: 11.5px; line-height: 1.4; color: var(--dim); }
.project-card-export-secrets { display: flex; align-items: center; gap: 7px; margin: 6px 8px 0; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.project-card-export-secrets input { margin: 0; accent-color: var(--teal); }
.project-card-export-status { margin: 4px 8px 0; font-size: 12px; line-height: 1.4; color: var(--teal-2); overflow-wrap: anywhere; }
.project-card-export-status:empty { margin: 0; }
@media (prefers-reduced-motion: reduce) { .project-card-export svg { transition: none; } }
.projects-empty { display: grid; justify-items: center; gap: 8px; padding: 36px 16px; color: var(--muted); text-align: center; }
.projects-empty svg { width: 36px; height: 36px; opacity: .5; }
.libraries-dialog { width: min(720px, calc(100vw - 32px)); }
.libraries-dialog h3 { margin: 18px 0 8px; font-size: 14px; color: var(--muted); }
.libraries-results, .libraries-installed { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.library-row { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.library-info { min-width: 0; }
.library-info p { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); }
.library-warning { color: var(--yellow) !important; }
.library-ready { color: var(--green) !important; }
.library-newer { color: var(--teal-2) !important; }
.library-used { font-family: var(--mono); font-size: 11.5px !important; }
.library-tag { margin-left: 8px; padding: 1px 6px; border-radius: 999px; font-size: 11px; color: var(--muted); border: 1px solid var(--line); }
.library-row.dependency { background: transparent; }
.library-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.library-version { max-width: 150px; font-family: var(--mono); font-size: 12px; }
#libraries-search { width: 100%; }
@media (max-width: 560px) { .library-row { flex-direction: column; align-items: stretch; } .library-actions { justify-content: flex-start; } }
.libraries-installed li { font-size: 13px; }
.libraries-log { max-height: 140px; overflow: auto; font-family: var(--mono); font-size: 11.5px; background: var(--bg); padding: 8px 10px; border-radius: 8px; white-space: pre-wrap; }
#libraries-feedback.error { color: #ffb3b3; }
.camera-dialog { width: min(1000px, calc(100vw - 32px)); }
/* The whole picture on screen without scrolling, in any orientation (the window less its
   title); an upright phone gets a narrower window. data-shape comes from camera-shape.js. */
.camera-dialog[data-shape="portrait"] { width: min(600px, calc(100vw - 32px)); }
.camera-dialog :is(video, img) { display: block; width: 100%; height: auto; max-height: calc(min(88vh, 900px) - 110px); object-fit: contain; border-radius: 10px; background: #000; }
.camera-dialog:has(.voice-dock.in-dialog:not([hidden])) :is(video, img) { max-height: calc(min(88vh, 900px) - 190px); }
/* The AI's photos enlarged (image-viewer.js): the photo whole on screen; "Tamanho real"
   (or a click on it) shows its pixels, moved by scrolling, dragging or the fingers.
   The voice bar, when it docks here, is the last row. Full screen on phones. */
.image-viewer { width: min(1100px, calc(100vw - 32px)); height: min(88vh, 900px); padding: 14px 16px 16px; overflow: hidden; }
.image-viewer[open] { display: flex; flex-direction: column; gap: 10px; }
.image-viewer .modal-head { align-items: center; margin-bottom: 0; }
.image-viewer-titles { min-width: 0; }
.image-viewer .modal-head h2 { font-size: 17px; font-variant-numeric: tabular-nums; }
.image-viewer-context { margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.image-viewer-stage { display: flex; flex: 1; min-height: 0; overflow: hidden; border-radius: 10px; background: #000; }
.image-viewer-photo { display: block; flex: 1 1 auto; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; cursor: zoom-in; user-select: none; -webkit-user-drag: none; }
.image-viewer.is-natural .image-viewer-stage { overflow: auto; overscroll-behavior: contain; }
.image-viewer.is-natural .image-viewer-photo { flex: none; width: auto; height: auto; max-width: none; max-height: none; margin: auto; cursor: zoom-out; }
.image-viewer-stage.is-dragging, .image-viewer-stage.is-dragging .image-viewer-photo { cursor: grabbing; }
.image-viewer-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.image-viewer-nav { display: flex; gap: 6px; }
.image-viewer-open { margin-left: auto; font-size: 13px; font-weight: 600; }
@media (max-width: 640px) {
  .image-viewer { inset: 0; width: 100%; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; border: 0; border-radius: 0; padding: 12px; }
  .image-viewer-bar .button { min-height: 40px; }
}
.ai-model-price, .ai-field-hint { font-size: 12.5px; color: var(--muted); margin: 6px 0 0; }
.ai-test-result { font-size: 13px; color: var(--green); }
#ai-settings-intro { color: var(--muted); font-size: 13.5px; line-height: 1.5; margin: 0; }

/* ---------- Motion ---------- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .45; } }
@keyframes slide { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@keyframes bancada-ai-fresh { from { background-color: #a896ff5e; } to { background-color: transparent; } }
@keyframes steps-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes ring { 0% { box-shadow: 0 0 0 0 #a896ff99; } 80%, 100% { box-shadow: 0 0 0 12px #a896ff00; } }
@keyframes flash-led { 0% { --led-user: #4c8dff; --led-user-amber: #ffb02e; --led-user-green: #45e08a; --glow-user: .9; } 50% { --led-user: #1b273a; --led-user-amber: #3b2f16; --led-user-green: #1c3325; --glow-user: 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1320px) {
  .tool-button span { display: none; }
}
@media (max-width: 1180px) {
  .action-button span { display: none; }
  .action-button { padding: 0 5px; }
}
@media (max-width: 1100px) {
  .app-shell { height: auto; min-height: 100vh; }
  .workspace { grid-template-columns: minmax(290px, 340px) minmax(0, 1fr); grid-template-rows: minmax(620px, calc(100vh - 80px)) auto; gap: 10px; }
  .splitter-x { display: none; }
  .bench-panel { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .bench-card { border-bottom: 0; border-right: 1px solid var(--line); }
  .login-view { grid-template-columns: 1fr; }
  .login-art { min-height: 320px; border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 800px) {
  .topbar { height: auto; flex-wrap: wrap; padding: 8px 12px; }
  .topbar-left, .topbar-right { flex: 1 1 auto; }
  .topbar-center { order: 3; width: 100%; }
  .workspace { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; padding: 8px; }
  .chat-panel { height: 78vh; }
  .center-column { grid-template-rows: 70vh minmax(220px, 40vh); gap: 10px; }
  .splitter-y { display: none; }
  .bench-panel { grid-column: auto; }
  .save-state, .brand.small { display: none; }
  .login-art { padding: 28px 16px; }
  .login-panel { padding: 32px 16px; }
}
.chat-list { margin: 0 0 8px; padding-left: 20px; line-height: 1.55; }
.chat-list li { margin: 2px 0; }
.inline-code { font-family: var(--mono); font-size: .92em; padding: 1px 5px; border-radius: 5px; background: #ffffff12; color: #cfe7ea; }
.chat-heading { font-weight: 700; margin-top: 6px; }
.agent-action-note .chat-text { margin: 4px 0 0; font-size: 13px; }
.segmented { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line-2); }
.segmented button { border: 0; background: none; color: var(--muted); font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 6px; cursor: pointer; }
.segmented button[aria-pressed="true"] { background: var(--raised); color: var(--text); }
.phone-qr-box { display: grid; justify-items: center; gap: 8px; padding: 12px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line-2); text-align: center; }
.phone-qr { background: #fff; padding: 8px; border-radius: 10px; line-height: 0; }
.phone-qr svg { width: 200px; height: 200px; }
.phone-qr-box p { margin: 0; color: var(--muted); line-height: 1.45; }
.phone-qr-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.agent-request-phone { display: grid; justify-items: center; gap: 8px; padding: 12px; border-radius: 10px; border: 1px dashed var(--line-2); }
.agent-request-phone .phone-qr svg { width: 180px; height: 180px; }
/* The whole picture, upright or lying down, without making the window scroll. */
.agent-request-phone img, .agent-request-phone video { display: block; width: 100%; height: auto; max-height: min(45vh, 420px); object-fit: contain; border-radius: 10px; background: #000; }
.eyes-count { margin-left: auto; color: var(--dim); font-size: 12px; }
.eyes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.eye-tile { position: relative; display: grid; gap: 4px; min-width: 0; padding: 6px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel-2); }
.eye-tile.looking { box-shadow: 0 0 0 2px var(--violet); }
.eye-thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 7px; overflow: hidden; background: #000; }
/* Never cropped: the whole picture, with bars when its shape differs. An upright phone
   (data-shape from camera-shape.js) gets a taller tile, and it turns with the phone. */
.eye-tile[data-shape="portrait"] .eye-thumb { aspect-ratio: 3 / 4; max-height: min(60vh, 360px); }
.eye-thumb video, .eye-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.eye-thumb-empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 6px; color: var(--muted); font-size: 11.5px; text-align: center; }
.eye-star { position: absolute; top: 3px; left: 6px; color: #fff; font-size: 13px; text-shadow: 0 1px 2px #000; }
.eye-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--dim); box-shadow: 0 0 0 2px #0009; }
.eye-tile[data-status="on"] .eye-dot { background: var(--green); }
.eye-tile[data-status="pending"] .eye-dot, .eye-tile[data-status="waiting"] .eye-dot { background: var(--orange); }
.eye-row { display: flex; align-items: center; gap: 4px; min-width: 0; }
.eye-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 600; }
.eye-name-input { width: 100%; height: 24px; padding: 2px 6px; font-size: 12.5px; }
.eye-menu-button { flex: none; border: 0; background: none; color: var(--muted); border-radius: 6px; padding: 0 6px; font-size: 16px; line-height: 22px; cursor: pointer; }
.eye-menu-button:hover, .eye-menu-button[aria-expanded="true"] { color: var(--text); background: #ffffff0d; }
.eye-badge { color: var(--dim); font-size: 11px; }
.eye-menu { position: absolute; z-index: 5; right: 6px; display: grid; min-width: 150px; padding: 4px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--raised); box-shadow: var(--shadow); }
.eye-menu button { border: 0; background: none; color: var(--text); text-align: left; padding: 6px 10px; border-radius: 6px; font-size: 12.5px; cursor: pointer; }
.eye-menu button:hover:not(:disabled), .eye-menu button:focus-visible { background: #ffffff12; }
.eye-menu button:disabled { opacity: .4; cursor: not-allowed; }
.eye-menu button.danger-text { color: #ff9b9b; }
.eye-toggle { width: 100%; }
.eye-toggle[aria-pressed="true"] { display: none; }
.eye-message { margin: 0; color: var(--yellow); line-height: 1.35; }
.eye-device { display: grid; gap: 6px; }
.eye-device select { width: 100%; min-width: 0; font-size: 12.5px; }
.eye-device-actions { display: flex; justify-content: flex-end; gap: 6px; }
.eye-add-form { display: grid; gap: 8px; margin-bottom: 10px; padding: 10px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel-2); }
.eye-add-source { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.eye-add-source select { width: calc(100% - 22px); margin-left: 22px; }
.eye-add-name { display: grid; gap: 4px; color: var(--muted); font-size: 12px; }
.eye-add-actions { display: flex; justify-content: flex-end; gap: 6px; }
.camera-dialog .phone-qr svg { width: 240px; height: 240px; }
.agent-request-eyes { display: grid; gap: 8px; width: 100%; }
.agent-request-eye-option { display: flex; flex-wrap: wrap; gap: 6px; }
.agent-request-eye-option select { flex: 1; min-width: 140px; }
.update-banner { margin: 8px 12px 0; padding: 9px 14px; border-radius: var(--radius-sm); background: #f39c1218; border: 1px solid #f39c1266; color: #ffe2b0; font-size: 13px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.icon-button.dictate { border-color: var(--line-2); }
.icon-button.dictate.listening { color: #fff; background: #d64545; border-color: #d64545; animation: listening 1.2s ease-in-out infinite; }
@keyframes listening { 50% { box-shadow: 0 0 0 5px #d6454533; } }
@media (prefers-reduced-motion: reduce) { .icon-button.dictate.listening { animation: none; } }
.agent-request-form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.agent-request-or { margin: 4px 0 0; font-size: 12px; color: var(--muted); }

/* ---------- Dividers between panels ---------- */
.splitter { position: relative; z-index: 1; touch-action: none; }
.splitter::after { content: ""; position: absolute; border-radius: 2px; background: transparent; transition: background var(--troca, .15s); }
.splitter-x { cursor: col-resize; }
.splitter-x::after { top: 30%; bottom: 30%; left: 4px; width: 2px; }
.splitter-y { cursor: row-resize; }
.splitter-y::after { left: 35%; right: 35%; top: 4px; height: 2px; }
.splitter:hover::after, .splitter:focus-visible::after, .workspace.resizing .splitter::after { background: var(--teal, #0ca1a6); }
.splitter:focus-visible { outline: none; }
.workspace.resizing { user-select: none; }
.workspace.resizing-x, .workspace.resizing-x * { cursor: col-resize !important; }
.workspace.resizing-y, .workspace.resizing-y * { cursor: row-resize !important; }

/* ---------- Gravar menu ---------- */
.split-action { position: relative; display: flex; align-items: stretch; }
.split-action .action-button.upload { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; }
.action-caret { display: grid; place-items: center; width: 30px; height: 36px; border: 1px solid var(--line-2); border-left: 1px solid var(--line); border-radius: 0 999px 999px 0; background: var(--panel-2); color: var(--muted); cursor: pointer; transition: border-color .15s, background .15s; }
.action-caret svg { width: 16px; height: 16px; }
.action-caret:hover:not(:disabled), .action-caret[aria-expanded="true"] { border-color: var(--teal); background: var(--raised); color: var(--text); }
.action-caret:disabled { opacity: .5; cursor: default; }
.action-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: 320px; padding: 6px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel-2); box-shadow: var(--shadow); }
.action-menu-label { margin: 8px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.action-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.action-menu button:hover:not(:disabled), .action-menu button:focus-visible { background: var(--raised); outline: none; }
.action-menu button:disabled { opacity: .45; cursor: default; }
.action-menu button svg { width: 18px; height: 18px; flex: none; color: var(--teal-2); }
.action-menu button span { display: grid; }
.action-menu small { color: var(--dim); font-size: 11.5px; }
/* ---------- OTA ---------- */
.ota-dialog { width: min(600px, calc(100vw - 32px)); }
.ota-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 12px; }
.ota-steps > li { counter-increment: step; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
.ota-steps > li::before { content: counter(step); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--raised); color: var(--teal-2); font-weight: 800; font-size: 13px; }
.ota-steps p { margin: 3px 0 0; }
.ota-steps li.done::before { content: "\2713"; background: #4fd08b26; color: var(--green); }
.ota-file-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ota-usage { margin: 8px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line); font: 12px/1.5 var(--mono); color: #cdeee2; white-space: pre-wrap; }
.ota-address { display: flex; gap: 6px; margin-top: 6px; }
.ota-address input { flex: 1; min-width: 0; font-family: var(--mono); }
.ota-status { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: #0ca1a61a; border: 1px solid #0ca1a64d; font-size: 13px; }
.ota-status.error { background: #ff6b6b14; border-color: #ff6b6b55; color: #ffd0d0; }
.ota-status.ok { background: #4fd08b1a; border-color: #4fd08b55; color: #c9f5dc; }
.action-menu-setting { display: block; padding: 2px 10px 8px; }
.action-menu-setting select { width: 100%; height: 34px; padding: 0 8px; font-size: 13px; line-height: 1.3; text-overflow: ellipsis; }

/* ---------- Board web page next to the code ---------- */
.editor-split { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; }
.editor-split.with-web { grid-template-columns: minmax(0, 1fr) minmax(260px, 44%); }
.editor-split > .editor-wrap { min-width: 0; min-height: 0; }
/* Pane A holds the editor (and, with two boards, its own tab strip). */
.editor-panel > .file-tabs { grid-row: 1; }
.editor-panel > .editor-split { grid-row: 2; }
.editor-panel > .status-bar { grid-row: 3; }
.editor-pane { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; }
.editor-pane > .editor-wrap { min-width: 0; }
.pane-head-slot { min-width: 0; }
.editor-split.with-web.with-control > .editor-pane { grid-row: 1 / -1; }
:is(#code-editor-b, #code-editor-c, #code-editor-d), :is(#code-editor-b, #code-editor-c, #code-editor-d) .cm-editor { height: 100%; }
.editor-chips { display: flex; align-items: center; gap: 2px; flex: none; margin-left: auto; }
.editor-chips-slot { display: contents; }

/* ---------- Two boards (html[data-boards="2"]; --board-a/--board-b only next to the letter) ---------- */
html:not([data-boards="2"]) .dual-only { display: none !important; }
.target-badge { display: inline-grid; place-items: center; flex: none; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 4px; background: var(--board-a); color: var(--board-a-ink); font: 700 10.5px/1 var(--sans); letter-spacing: 0; }
.target-badge.b { background: var(--board-b); color: var(--board-b-ink); }
.target-badge.c { background: var(--board-c); color: var(--board-c-ink); }
.target-badge.d { background: var(--board-d); color: var(--board-d-ink); }
/* Verificar and Gravar act on the active pane and show its letter. */
.action-target::before { content: "A"; }
html[data-active-target="b"] .action-target { background: var(--board-b); color: var(--board-b-ink); }
html[data-active-target="b"] .action-target::before { content: "B"; }
html[data-active-target="c"] .action-target { background: var(--board-c); color: var(--board-c-ink); }
html[data-active-target="c"] .action-target::before { content: "C"; }
html[data-active-target="d"] .action-target { background: var(--board-d); color: var(--board-d-ink); }
html[data-active-target="d"] .action-target::before { content: "D"; }
html[data-boards="2"] .action-button .target-badge { display: inline-grid; margin-left: -3px; }
.board-chips { display: flex; align-items: center; gap: 6px; min-width: 0; }
.board-add { flex: none; border: 1px dashed var(--line-2); }
.board-add:hover:not(:disabled) { border-color: var(--teal); color: var(--teal-2); }
html[data-boards="2"] .board-chips .board-pick { max-width: 210px; padding-left: 8px; }
html[data-boards="2"] .board-chips :is(.board-pick-icon, .board-pick-chip) { display: none; }
.status-target { display: inline-flex; align-items: center; gap: 8px; }
.status-sep { color: var(--line-2); }
.status-bar .target-badge { min-width: 14px; height: 14px; margin-right: -8px; font-size: 10px; }
.status-target .target-badge { margin-right: 0; }
/* A|B switches: Saída, the monitor when narrow, and the editor in tabs. */
.ab-switch, .pane-switch { display: inline-flex; flex: none; gap: 2px; min-width: 0; padding: 2px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-2); }
.ab-switch button, .pane-switch button { display: inline-flex; align-items: center; gap: 5px; min-width: 0; padding: 3px 6px; border: 0; border-radius: 6px; background: none; color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; }
.ab-switch button[aria-pressed="true"], .pane-switch button[aria-pressed="true"] { background: var(--raised); color: var(--text); }
.ab-switch button[aria-pressed="false"] .target-badge, .pane-switch button[aria-pressed="false"] .target-badge { opacity: .55; }
.pane-switch { display: none; flex-shrink: 1; margin-right: 4px; }
.pane-switch-name { min-width: 0; max-width: 11ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Each pane's header starts with its letter and board. */
.pane-board { display: inline-flex; align-items: center; gap: 6px; flex: none; max-width: 150px; margin-right: 2px; padding: 0 8px 0 4px; border-right: 1px solid var(--line); color: var(--text); font-size: 12px; font-weight: 600; }
.pane-board-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A pane's header is about half the editor: the letter stands for the board (the
   top bar names both) and the shared chips keep to icons. The words stay for
   screen readers; a maximized pane has room for its board's name. */
html[data-boards="2"] :is(.editor-split:not([data-maximized]) .pane-board-name, #ai-changes-text, .editor-chips .web-toggle > span) { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
html[data-boards="2"] .editor-chips { gap: 4px; }
html[data-boards="2"] .editor-chips .web-toggle { width: 28px; margin: 0; padding: 0; justify-content: center; }
html[data-boards="2"] #ai-changes-next { gap: 0; }
html[data-boards="2"] .editor-pane { border-top: 2px solid transparent; }
html[data-boards="2"]:is(:not([data-active-target]), [data-active-target="a"]) #editor-pane-a { border-top-color: var(--board-a); }
html[data-boards="2"][data-active-target="b"] #editor-pane-b { border-top-color: var(--board-b); }
html[data-boards="2"][data-active-target="c"] #editor-pane-c { border-top-color: var(--board-c); }
html[data-boards="2"][data-active-target="d"] #editor-pane-d { border-top-color: var(--board-d); }
/* A board that just arrived pulses once, in its own colour. */
.editor-pane { --pane-color: var(--board-b); }
.editor-pane[data-target="c"] { --pane-color: var(--board-c); }
.editor-pane[data-target="d"] { --pane-color: var(--board-d); }
.editor-pane.pane-new { animation: pane-new 1.4s ease-out 1; }
@keyframes pane-new { from { box-shadow: inset 0 0 0 2px var(--pane-color), 0 0 18px color-mix(in srgb, var(--pane-color) 33%, transparent); } to { box-shadow: inset 0 0 0 2px transparent, 0 0 0 transparent; } }
.pane-divider { position: relative; z-index: 1; background: var(--bg-2); cursor: col-resize; touch-action: none; }
.pane-divider::after { content: ""; position: absolute; inset: 30% 2px; border-radius: 2px; background: var(--line-2); transition: background .15s; }
.pane-divider:hover::after, .pane-divider:focus-visible::after, .editor-split.resizing .pane-divider::after { background: var(--teal); }
.pane-divider:focus-visible { outline: none; }
.editor-split.resizing { user-select: none; }
.editor-split.resizing-x, .editor-split.resizing-x * { cursor: col-resize !important; }
.editor-split.resizing-y, .editor-split.resizing-y * { cursor: row-resize !important; }
/* Wider screens. The page (layout.js initPaneSplit) sets data-pane-mode from
   the editor's own width: tabs < 620 px ≤ split < 1100 px ≤ wide. */
@media (min-width: 801px) {
  html[data-boards="2"] .editor-split { --pane-a: var(--ratio-a, 1fr); --pane-b: var(--ratio-b, 1fr); --pane-gap: 6px; grid-template-columns: minmax(0, var(--pane-a)) var(--pane-gap) minmax(0, var(--pane-b)); grid-template-rows: minmax(0, 1fr); grid-template-areas: "pa dv pb"; }
  /* Two panes at a time, placed by their slot (main.js renderSlots): the pair on screen. */
  html[data-boards="2"] .editor-split > .editor-pane[data-slot="1"] { grid-area: pa; }
  html[data-boards="2"] #editor-divider { grid-area: dv; }
  html[data-boards="2"] .editor-split > .editor-pane[data-slot="2"] { grid-area: pb; }
  html[data-boards="2"] .editor-split:not([data-pane-mode="tabs"]) > .editor-pane[data-slot="0"] { display: none; }
  html[data-boards="2"] #web-panel { grid-area: wb; }
  html[data-boards="2"] #control-panel { grid-area: ct; }
  /* Página or Controle open, wide editor: a third column. */
  html[data-boards="2"] .editor-split[data-pane-mode="wide"]:is(.with-web, .with-control) { grid-template-columns: minmax(0, var(--pane-a)) var(--pane-gap) minmax(0, var(--pane-b)) minmax(260px, 34%); grid-template-rows: minmax(0, 1fr); }
  html[data-boards="2"] .editor-split[data-pane-mode="wide"].with-web { grid-template-areas: "pa dv pb wb"; }
  html[data-boards="2"] .editor-split[data-pane-mode="wide"].with-control { grid-template-areas: "pa dv pb ct"; }
  html[data-boards="2"] .editor-split[data-pane-mode="wide"].with-web.with-control { grid-template-rows: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "pa dv pb wb" "pa dv pb ct"; }
  /* Narrower: A over B, the side panel on the right. */
  html[data-boards="2"] .editor-split:not([data-pane-mode="wide"], [data-pane-mode="tabs"]):is(.with-web, .with-control) { grid-template-columns: minmax(0, 1fr) minmax(250px, 38%); grid-template-rows: minmax(0, var(--pane-a)) var(--pane-gap) minmax(0, var(--pane-b)); }
  html[data-boards="2"] .editor-split:not([data-pane-mode="wide"], [data-pane-mode="tabs"]).with-web { grid-template-areas: "pa wb" "dv wb" "pb wb"; }
  html[data-boards="2"] .editor-split:not([data-pane-mode="wide"], [data-pane-mode="tabs"]).with-control { grid-template-areas: "pa ct" "dv ct" "pb ct"; }
  html[data-boards="2"] .editor-split:not([data-pane-mode="wide"], [data-pane-mode="tabs"]).with-web.with-control { grid-template-areas: "pa wb" "dv wb" "pb ct"; }
  html[data-boards="2"] .editor-split:not([data-pane-mode="wide"], [data-pane-mode="tabs"]):is(.with-web, .with-control) .pane-divider { cursor: row-resize; }
  html[data-boards="2"] .editor-split:not([data-pane-mode="wide"], [data-pane-mode="tabs"]):is(.with-web, .with-control) .pane-divider::after { inset: 2px 35%; }
  /* One pane maximized (double click on its header): the other one on screen is a strip. */
  html[data-boards="2"] .editor-split:not([data-pane-mode="tabs"])[data-maximized="1"] { --pane-a: 1fr; --pane-b: 32px; --pane-gap: 0px; }
  html[data-boards="2"] .editor-split:not([data-pane-mode="tabs"])[data-maximized="2"] { --pane-a: 32px; --pane-b: 1fr; --pane-gap: 0px; }
  html[data-boards="2"] .editor-split:not([data-pane-mode="tabs"])[data-maximized] #editor-divider { display: none; }
  html[data-boards="2"] .editor-split:not([data-pane-mode="tabs"]) > :is([data-maximized="1"] > .editor-pane[data-slot="2"], [data-maximized="2"] > .editor-pane[data-slot="1"]) { grid-template-rows: minmax(0, 1fr); overflow: hidden; background: var(--bg-2); cursor: pointer; }
  html[data-boards="2"] .editor-split:not([data-pane-mode="tabs"]) > :is([data-maximized="1"] > .editor-pane[data-slot="2"], [data-maximized="2"] > .editor-pane[data-slot="1"]) > .editor-wrap { display: none; }
  html[data-boards="2"] .editor-split:not([data-pane-mode="tabs"]) > :is([data-maximized="1"] > .editor-pane[data-slot="2"], [data-maximized="2"] > .editor-pane[data-slot="1"]) .file-tabs { height: 100%; min-height: 0; padding: 0 6px; border-bottom: 0; }
  html[data-boards="2"] .editor-split:not([data-pane-mode="tabs"]) > :is([data-maximized="1"] > .editor-pane[data-slot="2"], [data-maximized="2"] > .editor-pane[data-slot="1"]) .file-tabs > :not(.pane-board, .editor-chips-slot) { display: none; }
  html[data-boards="2"] .editor-split:not([data-pane-mode="tabs"]) > :is([data-maximized="1"] > .editor-pane[data-slot="2"], [data-maximized="2"] > .editor-pane[data-slot="1"]) .pane-board { max-width: none; border: 0; padding: 0; }
  html[data-boards="2"] .editor-split:not([data-pane-mode="tabs"]) > :is([data-maximized="1"] > .editor-pane[data-slot="2"], [data-maximized="2"] > .editor-pane[data-slot="1"]) .pane-board::after { content: "▸"; color: var(--muted); }
  /* Side by side the strip reads top to bottom, the shared chips in a column below the name. */
  html[data-boards="2"] .editor-split:is([data-pane-mode="wide"], :not(.with-web):not(.with-control):not([data-pane-mode="tabs"])) > :is([data-maximized="1"] > .editor-pane[data-slot="2"], [data-maximized="2"] > .editor-pane[data-slot="1"]) .file-tabs { flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; padding: 10px 0; }
  html[data-boards="2"] .editor-split:is([data-pane-mode="wide"], :not(.with-web):not(.with-control):not([data-pane-mode="tabs"])) > :is([data-maximized="1"] > .editor-pane[data-slot="2"], [data-maximized="2"] > .editor-pane[data-slot="1"]) .pane-board { writing-mode: vertical-rl; }
  html[data-boards="2"] .editor-split:is([data-pane-mode="wide"], :not(.with-web):not(.with-control):not([data-pane-mode="tabs"])) > :is([data-maximized="1"] > .editor-pane[data-slot="2"], [data-maximized="2"] > .editor-pane[data-slot="1"]) .editor-chips { flex-direction: column; margin: 0; }
  html[data-boards="2"] .editor-split:is([data-pane-mode="wide"], :not(.with-web):not(.with-control):not([data-pane-mode="tabs"])) > :is([data-maximized="1"] > .editor-pane[data-slot="2"], [data-maximized="2"] > .editor-pane[data-slot="1"]) .ai-changes { flex-direction: column; width: 28px; height: auto; margin: 0; }
  html[data-boards="2"] .editor-split:is([data-pane-mode="wide"], :not(.with-web):not(.with-control):not([data-pane-mode="tabs"])) > :is([data-maximized="1"] > .editor-pane[data-slot="2"], [data-maximized="2"] > .editor-pane[data-slot="1"]) .ai-changes button { justify-content: center; padding: 6px 0; }
  html[data-boards="2"] .editor-split:is([data-pane-mode="wide"], :not(.with-web):not(.with-control):not([data-pane-mode="tabs"])) > :is([data-maximized="1"] > .editor-pane[data-slot="2"], [data-maximized="2"] > .editor-pane[data-slot="1"]) #ai-changes-clear { border-left: 0; border-top: 1px solid #a896ff33; }
  /* Narrow editor: tabs, the active board's pane alone (data-slot "1", main.js
     renderSlots), with the shared chips and the A|B|C|D switch in its header. */
  html[data-boards="2"] .editor-split[data-pane-mode="tabs"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); grid-template-areas: none; }
  html[data-boards="2"] .editor-split[data-pane-mode="tabs"].with-web { grid-template-columns: minmax(0, 1fr) minmax(260px, 44%); }
  html[data-boards="2"] .editor-split[data-pane-mode="tabs"].with-control { grid-template-columns: minmax(0, 1fr) minmax(250px, 38%); }
  html[data-boards="2"] .editor-split[data-pane-mode="tabs"].with-web.with-control { grid-template-columns: minmax(0, 1fr) minmax(260px, 44%); grid-template-rows: minmax(0, 1.25fr) minmax(0, 1fr); }
  html[data-boards="2"] .editor-split[data-pane-mode="tabs"] > :is(.editor-pane:not([data-slot="1"]), #editor-divider) { display: none; }
  html[data-boards="2"] .editor-split[data-pane-mode="tabs"] > .editor-pane[data-slot="1"] { grid-area: 1 / 1 / -1 / 2; }
  html[data-boards="2"] .editor-split[data-pane-mode="tabs"] :is(#web-panel, #control-panel) { grid-area: 1 / 2 / -1 / 3; }
  html[data-boards="2"] .editor-split[data-pane-mode="tabs"].with-web.with-control #web-panel { grid-area: 1 / 2 / 2 / 3; }
  html[data-boards="2"] .editor-split[data-pane-mode="tabs"].with-web.with-control #control-panel { grid-area: 2 / 2 / 3 / 3; }
  html[data-boards="2"] .editor-panel:has(> .editor-split[data-pane-mode="tabs"]) .pane-switch { display: inline-flex; }
  html[data-boards="2"] .editor-panel:has(> .editor-split[data-pane-mode="tabs"]) .pane-board { display: none; }
}
/* Phones: always tabs, the active board alone; Página and Controle below the code, as with one board; 3 or 4 chips: letter and name. */
@media (max-width: 800px) {
  .board-chips { flex: 1; }
  .editor-split.with-web.with-control > .editor-pane { grid-row: auto; }
  html[data-boards="2"] .topbar-center { flex-wrap: wrap; row-gap: 6px; }
  html[data-boards="2"] .board-chips { flex: 1 1 100%; }
  html[data-boards="2"] .board-chips .board-pick { flex: 1 1 0; max-width: none; }
  html[data-boards="2"] .board-add { display: none; }
  html[data-boards="2"] .editor-split { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); grid-template-areas: none; }
  html[data-boards="2"] .editor-split:is(.with-web, .with-control) { grid-template-columns: minmax(0, 1fr); grid-template-rows: max(240px, 50vh) auto; }
  html[data-boards="2"] .editor-split.with-web.with-control { grid-template-rows: max(220px, 45vh) auto auto; }
  html[data-boards="2"] .editor-split > :is(.editor-pane:not([data-slot="1"]), #editor-divider) { display: none; }
  html[data-boards="2"] .editor-split > .editor-pane[data-slot="1"] { grid-area: 1 / 1 / 2 / 2; }
  html[data-boards="2"] .editor-split :is(#web-panel, #control-panel) { grid-area: 2 / 1 / 3 / 2; }
  html[data-boards="2"] .editor-split.with-web.with-control #control-panel { grid-area: 3 / 1 / 4 / 2; }
  html[data-boards="2"]:is([data-board-count="3"], [data-board-count="4"]) .board-chips .board-pick { gap: 6px; padding: 0 8px; }
  html[data-boards="2"]:is([data-board-count="3"], [data-board-count="4"]) .board-chips .board-pick-caret { display: none; }
  html[data-boards="2"]:is([data-board-count="3"], [data-board-count="4"]) .board-chips .board-pick-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html[data-boards="2"] .pane-switch { display: inline-flex; }
  html[data-boards="2"] .pane-switch-name { max-width: 7ch; }
  html[data-boards="2"] .pane-board { display: none; }
}
/* ---------- Three and four boards (html[data-board-count="3"|"4"]; two editors at a time) ----------
   A board the project does not have (a gap: A and C) takes no room; C's and D's
   pieces are made when a project first has them (board-dom.js) and kept. */
html[data-boards="2"]:not([data-present~="b"]) :is(#board-button-b, #editor-pane-b, #compile-badge-b, #serial-dot-b, #compile-log-b, #serial-column-b, #board-slot-b, #status-target-b),
html:not([data-present~="c"]) :is(#board-button-c, #editor-pane-c, #compile-badge-c, #serial-dot-c, #compile-log-c, #serial-column-c, #board-slot-c, #status-target-c),
html:not([data-present~="d"]) :is(#board-button-d, #editor-pane-d, #compile-badge-d, #serial-dot-d, #compile-log-d, #serial-column-d, #board-slot-d, #status-target-d) { display: none !important; }
html[data-boards="2"]:not([data-present~="b"]) :is(.pane-switch, .ab-switch) button[data-target="b"],
html:not([data-present~="c"]) :is(.pane-switch, .ab-switch) button[data-target="c"],
html:not([data-present~="d"]) :is(.pane-switch, .ab-switch) button[data-target="d"] { display: none; }
/* The A|B|C|D switch of a narrow editor: letters only (the names stay for screen readers). */
html:is([data-board-count="3"], [data-board-count="4"]) .pane-switch-name { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
html:is([data-board-count="3"], [data-board-count="4"]) .pane-switch button { padding: 3px 5px; }
/* The chips of the pair not on screen fade a little: a second cue of which two the editor shows. */
.board-pick[data-visible="false"] { opacity: .72; }
.board-pick[data-visible="false"]:hover, .board-pick[data-visible="false"][aria-expanded="true"] { opacity: 1; }
@media (min-width: 801px) {
  html:is([data-board-count="3"], [data-board-count="4"]) .board-chips .board-pick { max-width: 150px; gap: 6px; }
  html:is([data-board-count="3"], [data-board-count="4"]) .board-chips .board-pick-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (min-width: 801px) and (max-width: 1320px) {
  html:is([data-board-count="3"], [data-board-count="4"]) .board-chips .board-pick { max-width: 118px; }
}
/* 801-1100px with three or four boards: the chips take a row of their own under
   the actions, as on phones, so the project's name keeps its room. */
@media (min-width: 801px) and (max-width: 1100px) {
  html:is([data-board-count="3"], [data-board-count="4"]) .topbar { height: auto; flex-wrap: wrap; row-gap: 6px; padding: 8px 14px; }
  html:is([data-board-count="3"], [data-board-count="4"]) .topbar-center { display: contents; }
  html:is([data-board-count="3"], [data-board-count="4"]) .board-chips { order: 3; flex: 1 1 100%; }
  html:is([data-board-count="3"], [data-board-count="4"]) .board-chips .board-pick { flex: 0 1 180px; max-width: 180px; }
}
/* The pair switcher: A·B | C·D at the start of the shared chips. The page not
   on screen carries a dot: at work (teal ring), errors (red), changed by the
   AI (lilac) or not saved (hollow). */
.pair-switch { gap: 2px; flex: none; height: 26px; margin-right: 2px; padding: 2px; }
.pair-switch button { position: relative; display: inline-flex; align-items: center; gap: 2px; height: 20px; padding: 0 5px; border-radius: 6px; font-size: 11px; line-height: 1; }
.pair-switch button:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.pair-switch .target-badge { min-width: 13px; height: 13px; padding: 0 2px; border-radius: 3px; font-size: 9px; }
.pair-switch button[aria-pressed="false"] .target-badge { opacity: .55; }
.pair-switch button[aria-pressed="false"]:hover .target-badge { opacity: .85; }
.pair-dot { color: var(--dim); font-weight: 700; }
.pair-status { position: absolute; top: 0; right: 0; width: 6px; height: 6px; border-radius: 50%; }
.pair-status:not([data-kind]) { display: none; }
.pair-status[data-kind="working"] { background: var(--teal-2); animation: pair-working 1.2s ease-in-out infinite; }
.pair-status[data-kind="error"] { background: var(--red); }
.pair-status[data-kind="ai"] { background: var(--violet); }
.pair-status[data-kind="unsaved"] { background: var(--bg-2); box-shadow: inset 0 0 0 1.5px var(--muted); }
@keyframes pair-working { 0%, 100% { box-shadow: 0 0 0 0 #1cc4ca99; } 60% { box-shadow: 0 0 0 4px #1cc4ca00; } }
/* Next to the switcher and the chips (three or four boards), the file tabs keep
   room for about one name, but only while the header has it: past that the
   tabs give way first (the file list still has them all), so the chips are
   never pushed out of the pane. 290px: the rest of a crowded header below. */
html:is([data-board-count="3"], [data-board-count="4"]) .editor-split:not([data-maximized]) :is(.pane-head .file-tab-list, #file-tab-list) { min-width: clamp(0px, 100% - 290px, 84px); }
/* Two panes side by side (about 320px each at 1024px): the header's pieces
   keep to their smallest, so Controle, Página and IA mudou still fit. */
html:is([data-board-count="3"], [data-board-count="4"]) .editor-split:not([data-maximized]):not([data-pane-mode="tabs"]) .file-tabs { padding: 0 4px; }
html:is([data-board-count="3"], [data-board-count="4"]) .editor-split:not([data-maximized]):not([data-pane-mode="tabs"]) .pane-board { margin-right: 0; padding: 0 5px 0 2px; }
html:is([data-board-count="3"], [data-board-count="4"]) .editor-split:not([data-maximized]):not([data-pane-mode="tabs"]) .file-list-count { display: none; }
html:is([data-board-count="3"], [data-board-count="4"]) .editor-split:not([data-maximized]):not([data-pane-mode="tabs"]) .editor-chips { gap: 2px; }
html:is([data-board-count="3"], [data-board-count="4"]) .editor-split:not([data-maximized]):not([data-pane-mode="tabs"]) .pair-switch { margin-right: 0; }
html:is([data-board-count="3"], [data-board-count="4"]) .editor-split:not([data-maximized]):not([data-pane-mode="tabs"]) .pair-switch button { gap: 1px; padding: 0 3px; }
html:is([data-board-count="3"], [data-board-count="4"]) .editor-split:not([data-maximized]):not([data-pane-mode="tabs"]) .pair-dot { display: none; }
html:is([data-board-count="3"], [data-board-count="4"]) .editor-split:not([data-maximized]):not([data-pane-mode="tabs"]) #ai-changes-next { padding: 0 6px; }
html:is([data-board-count="3"], [data-board-count="4"]) .editor-split:not([data-maximized]):not([data-pane-mode="tabs"]) #ai-changes-clear { padding: 0 6px; }
/* A strip (the other pane maximized) has no room for it. */
.editor-split[data-maximized="1"] > .editor-pane[data-slot="2"] .pair-switch, .editor-split[data-maximized="2"] > .editor-pane[data-slot="1"] .pair-switch { display: none; }
/* Gravar: "Só na placa [A][B][C][D]" and "Adicionar placa". */
.menu-letters { display: flex; align-items: center; gap: 4px; padding: 0 10px 6px 38px; }
.menu-letters-label { margin-right: 2px; color: var(--dim); font-size: 11.5px; }
.action-menu .menu-letters button { width: auto; padding: 4px 5px; border-radius: 6px; }
.action-menu .menu-letters button span { display: inline-grid; }
.action-menu .menu-add-board svg { color: var(--muted); }
.action-menu .menu-count { display: block; flex: none; margin-left: auto; color: var(--dim); font: 600 11px var(--mono); }
/* Saída and the monitor: the build states are letters, the monitors' dots too. */
html:is([data-board-count="3"], [data-board-count="4"]) .console-tab .badge { min-width: 17px; padding: 2px 5px; font-size: 0; text-align: center; }
html:is([data-board-count="3"], [data-board-count="4"]) .console-tab .badge + .badge { margin-left: -4px; }
html:is([data-board-count="3"], [data-board-count="4"]) #compile-badge::before { content: "A"; font-size: 10.5px; }
html:is([data-board-count="3"], [data-board-count="4"]) #compile-badge-b::before { content: "B"; font-size: 10.5px; }
html:is([data-board-count="3"], [data-board-count="4"]) #compile-badge-c::before { content: "C"; font-size: 10.5px; }
html:is([data-board-count="3"], [data-board-count="4"]) #compile-badge-d::before { content: "D"; font-size: 10.5px; }
html[data-boards="2"] #compile-badge-c::before { content: "C "; }
html[data-boards="2"] #compile-badge-d::before { content: "D "; }
html:is([data-board-count="3"], [data-board-count="4"]) #serial-tab .status-dot { display: inline-grid; place-items: center; width: auto; min-width: 12px; height: 12px; margin-left: 0; padding: 0 2px; border-radius: 3px; background: #4fd08b33; box-shadow: none; color: var(--green); font: 700 8.5px/1 var(--sans); }
html:is([data-board-count="3"], [data-board-count="4"]) #serial-tab .status-dot.idle { background: var(--raised); color: var(--dim); }
html:is([data-board-count="3"], [data-board-count="4"]) #serial-tab .status-dot + .status-dot { margin-left: -4px; }
html:is([data-board-count="3"], [data-board-count="4"]) #serial-dot::before { content: "A"; }
html:is([data-board-count="3"], [data-board-count="4"]) #serial-dot-b::before { content: "B"; }
html:is([data-board-count="3"], [data-board-count="4"]) #serial-dot-c::before { content: "C"; }
html:is([data-board-count="3"], [data-board-count="4"]) #serial-dot-d::before { content: "D"; }
/* A wide console shows the two monitors of the pair on screen; the others keep reading. */
@container console (min-width: 700px) {
  .serial-column[data-visible="false"] { display: none; }
  html[data-board-count="4"][data-page="1"] #serial-column-c { border-left: 0; }
}
/* Suas placas: all of them, two by two, the pair on screen outlined in its colours. */
html:is([data-board-count="3"], [data-board-count="4"]) .board-stage .board-art { max-height: 48px; }
html:is([data-board-count="3"], [data-board-count="4"]) .board-slot { cursor: pointer; outline: 1px solid transparent; outline-offset: -1px; transition: outline-color .15s, background .15s; }
html:is([data-board-count="3"], [data-board-count="4"]) .board-slot:hover { background: #ffffff0a; }
html:is([data-board-count="3"], [data-board-count="4"]) .board-slot[data-visible="true"][data-target="a"] { outline-color: var(--board-a); }
html:is([data-board-count="3"], [data-board-count="4"]) .board-slot[data-visible="true"][data-target="b"] { outline-color: var(--board-b); }
html:is([data-board-count="3"], [data-board-count="4"]) .board-slot[data-visible="true"][data-target="c"] { outline-color: var(--board-c); }
html:is([data-board-count="3"], [data-board-count="4"]) .board-slot[data-visible="true"][data-target="d"] { outline-color: var(--board-d); }
/* The status bar: port and board of the pair on screen; each other board as its letter and a dot (filled: a port). */
.status-target-a { display: contents; }
html[data-boards="2"] :is(.status-target, .status-target-a)[data-visible="false"] > :is([id^="status-port"], [id^="status-board"]) { display: none; }
html[data-boards="2"] :is(.status-target, .status-target-a)[data-visible="false"]::after { content: "\25CB"; color: var(--dim); }
html[data-boards="2"] :is(.status-target, .status-target-a)[data-visible="false"][data-connected="true"]::after { content: "\25CF"; color: var(--green); }
@media (prefers-reduced-motion: reduce) {
  .pair-status[data-kind="working"] { animation: none; box-shadow: 0 0 0 2px #1cc4ca55; }
  .board-slot, .editor-pane.pane-new { transition: none; animation: none; }
}
.web-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 28px; margin-right: 6px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 999px; background: none; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.web-toggle svg { width: 15px; height: 15px; }
.web-toggle:hover, .web-toggle[aria-pressed="true"] { color: var(--text); border-color: var(--teal); background: var(--raised); }
.web-panel { display: grid; grid-template-rows: auto minmax(120px, 1fr) auto auto minmax(80px, 34%); min-height: 0; border-left: 1px solid var(--line); background: var(--panel); }
.web-bar { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.web-bar input { flex: 1; min-width: 0; height: 30px; font: 12.5px var(--mono); }
.web-view { position: relative; min-height: 0; margin: 8px; border-radius: 8px; overflow: hidden; background: #fff; border: 1px solid var(--line-2); }
.web-view iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.web-view .web-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; background: var(--bg-2); }
.web-empty { margin: 0; color: var(--muted); font-size: 12.5px; text-align: center; line-height: 1.5; }
.web-caption { margin: 0 10px 6px; color: var(--dim); font-size: 11px; }
.web-log-head { padding: 6px 10px; border-top: 1px solid var(--line); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.web-log { margin: 0; padding: 0 8px 8px; list-style: none; overflow-y: auto; min-height: 0; display: grid; gap: 4px; align-content: start; }
.web-log li { padding: 6px 8px; border-radius: 8px; background: var(--bg-2); border-left: 3px solid var(--green); font-size: 12px; }
.web-log li.failed { border-left-color: var(--red); }
.web-log li div { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.web-log li strong { font: 600 12px var(--mono); }
.web-log li p { margin: 3px 0 0; color: var(--muted); font: 11.5px var(--mono); overflow-wrap: anywhere; }
.web-log-time { color: var(--dim); font: 11px var(--mono); }
.web-log-who { padding: 0 6px; border-radius: 999px; background: #a896ff26; color: var(--violet); font-size: 10.5px; font-weight: 700; }
.web-log-status { margin-left: auto; color: var(--muted); font-size: 11px; }

.web-view video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.web-view.live iframe, .web-view.live .web-empty { display: none; }
.web-caption.live { color: var(--green); }
.board-identity { display: grid; gap: 2px; margin: 4px 0 0; text-align: center; }
.board-identity strong { font-size: 13px; }
.board-identity span { font-size: 11.5px; }
#web-log li.page .web-log-who { color: var(--muted); }

/* Versions of the code */
.versions-dialog { width: min(1100px, calc(100vw - 32px)); }
.versions-intro { margin: 0 0 10px; }
.versions-body { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 12px; height: min(60vh, 620px); }
.versions-list { list-style: none; margin: 0; padding: 0; overflow: auto; border: 1px solid var(--line-2); border-radius: 10px; }
.versions-item button { display: grid; gap: 3px; width: 100%; padding: 9px 11px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; cursor: pointer; }
.versions-item button:hover { background: var(--panel-2); }
.versions-item.selected button { background: #0ca1a622; box-shadow: inset 3px 0 0 var(--teal); }
.versions-item strong { font-size: 12px; }
.versions-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.versions-item .versions-badge.versions-step { background: #0ca1a626; color: var(--teal-2); }
.versions-badge { justify-self: start; padding: 1px 7px; border-radius: 99px; background: var(--line-2); font-size: 10px; font-weight: 700; letter-spacing: .02em; }
.source-ia .versions-badge { background: #7c68f033; color: var(--violet); }
.source-restauracao .versions-badge { background: #f39c1226; color: var(--orange); }
.versions-label { font-size: 12px; color: var(--text); }
.versions-item small { font-size: 11px; overflow-wrap: anywhere; }
.versions-detail { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.versions-detail h3 { margin: 0 0 8px; font-size: 13px; }
.versions-diff { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.versions-diff > p { margin: 6px 0; }
.versions-files { display: flex; flex-wrap: wrap; gap: 6px; }
.versions-file { padding: 4px 10px; border: 1px solid var(--line-2); border-radius: 99px; background: var(--bg-2); font-size: 12px; cursor: pointer; }
.versions-file.selected { border-color: var(--teal); color: var(--teal-2); }
.versions-file small { color: var(--muted); }
.versions-code { flex: 1; min-height: 0; margin: 0; padding: 8px 0; overflow: auto; border-radius: 8px; background: var(--editor); font: 12px/1.55 var(--mono); }
.versions-code span { display: block; padding: 0 12px; white-space: pre; }
.versions-code .add { background: #4fd08b1f; color: #c3f5d8; }
.versions-code .del { background: #ff6b6b21; color: #ffcdcd; }
.versions-code .fold { color: var(--dim); }
.versions-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
@media (max-width: 760px) { .versions-body { grid-template-columns: 1fr; height: auto; } .versions-list { max-height: 32vh; } .versions-code { max-height: 45vh; } }

/* What the AI changed since the last command (violet, the AI's color) */
.file-tab.ai-changed .tab-open::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 3px #a896ff2e; vertical-align: middle; }
.ai-changes { margin-left: auto; display: inline-flex; align-items: stretch; flex: none; height: 26px; border: 1px solid #a896ff59; border-radius: 99px; background: #a896ff14; color: var(--violet); font-size: 12px; font-weight: 600; overflow: hidden; }
.ai-changes:not([hidden]) ~ .web-toggle { margin-left: 8px; }
.ai-changes button { display: inline-flex; align-items: center; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; transition: background .15s; }
.ai-changes button:hover { background: #a896ff24; }
#ai-changes-next { gap: 6px; padding: 0 9px 0 9px; white-space: nowrap; }
#ai-changes-next svg { width: 13px; height: 13px; }
#ai-changes-clear { padding: 0 10px 0 8px; border-left: 1px solid #a896ff33; color: #c9bdff; font-size: 15px; line-height: 1; }
.ai-changes.fresh { animation: ring 1.1s ease-out; }
@media (max-width: 560px) { #ai-changes-text { display: none; } }

/* Steps ("Etapas"): the code of each compilation that worked */
.steps { flex: none; }
.steps-pill { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 8px 0 9px; border: 1px solid var(--line-2); border-radius: 99px; background: var(--panel-2); color: var(--text); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: border-color .15s, background .15s, transform .12s; }
.steps-pill:hover, .steps-pill[aria-expanded="true"] { border-color: #0ca1a699; background: #0ca1a614; }
.steps-pill:active { transform: scale(.97); }
.steps-icon { width: 15px; height: 15px; color: var(--teal-2); }
.steps-caret { width: 13px; height: 13px; color: var(--muted); transition: transform .15s; }
.steps-pill[aria-expanded="true"] .steps-caret { transform: rotate(180deg); }
.steps-pill.edited .steps-label::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--orange); vertical-align: 2px; }
.steps-menu { position: fixed; z-index: 70; display: flex; flex-direction: column; max-height: min(72vh, 560px); border: 1px solid var(--line-2); border-radius: 14px; background: var(--panel-2); box-shadow: var(--shadow); overflow: hidden; animation: steps-in .14s ease-out; }
.steps-head { padding: 14px 16px 12px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #0ca1a60d, transparent); }
.steps-head strong { display: block; font-size: 14px; }
.steps-head p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.steps-list { margin: 0; padding: 8px 8px 6px; overflow: auto; list-style: none; }
.steps-item, .steps-now { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 9px 8px 10px 6px; border-radius: 10px; }
.steps-item + .steps-item, .steps-now + .steps-item { margin-top: 2px; }
.steps-item::before, .steps-now::before { content: ""; position: absolute; left: 19px; top: 0; bottom: 0; width: 2px; background: var(--line-2); }
.steps-list > li:first-child::before { top: 22px; }
.steps-list > li:last-child::before { bottom: calc(100% - 22px); }
.steps-list > li:only-child::before { display: none; }
.steps-item:hover { background: #ffffff06; }
.steps-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid var(--teal); border-radius: 50%; background: var(--panel-2); color: var(--teal-2); font: 700 11px/1 var(--mono); }
.by-ia .steps-dot { border-color: var(--violet); color: var(--violet); }
.steps-now .steps-dot { border-style: dashed; border-color: var(--orange); color: var(--orange); font-size: 16px; }
.steps-item.is-current { background: #0ca1a612; box-shadow: inset 0 0 0 1px #0ca1a633; }
.steps-item.is-current .steps-dot { background: var(--teal); color: var(--teal-ink); box-shadow: 0 0 0 4px #0ca1a62e; }
.steps-item.by-ia.is-current { background: #a896ff12; box-shadow: inset 0 0 0 1px #a896ff33; }
.steps-item.by-ia.is-current .steps-dot { background: var(--violet); color: #1b1535; box-shadow: 0 0 0 4px #a896ff2e; }
.steps-info { min-width: 0; padding-top: 3px; }
.steps-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.steps-tag { padding: 1px 7px; border-radius: 99px; background: #0ca1a629; color: var(--teal-2); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.by-ia .steps-tag { background: #a896ff29; color: var(--violet); }
.steps-meta { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; line-height: 1.45; overflow-wrap: anywhere; }
.steps-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.steps-actions button { height: 26px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 7px; background: var(--bg-2); color: var(--text); font-size: 12px; font-weight: 600; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.steps-actions button:hover:not(:disabled) { border-color: var(--teal); color: var(--teal-2); }
.steps-actions button:disabled { opacity: .45; cursor: default; }
.steps-actions .steps-yes { border-color: var(--teal); background: var(--teal); color: var(--teal-ink); }
.steps-actions .steps-yes:hover:not(:disabled) { background: var(--teal-2); color: var(--teal-ink); }
.steps-confirm { margin-top: 8px; padding: 10px; border: 1px solid #0ca1a64d; border-radius: 9px; background: #0ca1a60f; }
.steps-confirm p { margin: 0; font-size: 12px; line-height: 1.45; }
.steps-confirm .steps-actions { margin-top: 8px; }
.steps-status { margin: 0; padding: 0 16px 10px; color: var(--orange); font-size: 12px; }
.steps-status:empty { display: none; }

/* Account: sign-in fields, avatar menu, profile, plan and payments */
.login-field { display: grid; gap: 6px; }
.login-links { display: flex; justify-content: space-between; gap: 12px; margin-top: 4px; }
.login-help { margin: 6px 0 0; }
.account-wrap { position: relative; }
.account-button { --usage: 0%; position: relative; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: conic-gradient(var(--teal) var(--usage), var(--line-2) 0); transition: transform .12s; }
.account-button.usage-high { background: conic-gradient(var(--orange) var(--usage), var(--line-2) 0); }
.account-button:hover { transform: translateY(-1px); }
.avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--teal); color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; }
.account-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; display: grid; gap: 2px; width: 310px; padding: 10px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel); box-shadow: var(--shadow); }
.account-menu > button, .account-menu > a { display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: none; color: var(--text); font-size: 13px; text-align: left; text-decoration: none; cursor: pointer; }
.account-menu > button:hover, .account-menu > a:hover { background: var(--panel-2); }
.account-head { display: grid; gap: 2px; padding: 4px 6px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.account-plan { justify-self: start; margin-top: 4px; padding: 2px 8px; border-radius: 99px; background: #0ca1a622; color: var(--teal-2); font-size: 11px; font-weight: 600; }
#account-usage { padding: 0 6px 8px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.usage-rows { display: grid; gap: 10px; }
.usage-row { display: grid; gap: 4px; }
.usage-head { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.usage-bar { height: 6px; border-radius: 99px; background: var(--line-2); overflow: hidden; }
.usage-bar span { display: block; height: 100%; border-radius: inherit; background: var(--teal); }
.usage-bar.high span { background: var(--orange); }
.usage-bar.full span { background: var(--red); }
.usage-row small { font-size: 11px; }
.usage-extra { margin: 0; font-size: 12px; color: var(--muted); }
.usage-blocked { margin: 0; padding: 8px; border-radius: 8px; background: #ff6b6b1f; color: #ffc9c9; font-size: 12px; }
.stack-form { display: grid; gap: 6px; margin-top: 10px; }
.stack-form h3 { margin: 12px 0 4px; font-size: 14px; }
.stack-form input { width: 100%; }
.form-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.billing-dialog { width: min(900px, calc(100vw - 32px)); }
.billing-current { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel-2); }
.billing-current h3 { margin: 0; }
.billing-current .text-button { justify-self: start; }
.billing-note { padding: 10px 12px; border-radius: 10px; background: #f39c1218; color: var(--orange); font-size: 13px; }
.billing-title { margin: 18px 0 8px; font-size: 14px; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.plan-card { display: grid; align-content: start; gap: 6px; padding: 14px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--bg-2); }
.plan-card.current { border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); }
.plan-card h4 { margin: 0; font-size: 15px; }
.plan-price { margin: 0; font-size: 20px; font-weight: 700; }
.plan-features { margin: 4px 0; padding-left: 18px; font-size: 12.5px; color: var(--muted); }
.plan-mine { margin: 4px 0 0; color: var(--teal-2); font-size: 12px; font-weight: 700; }
.pack-list { display: grid; gap: 6px; }
.pack-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 10px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.data-table th, .data-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.data-table th { color: var(--muted); font-weight: 600; font-size: 11.5px; }
.ledger-list { margin: 0; padding-left: 18px; }

/* A run left open by another page, and the Bluetooth help */
.chat-stale { display: grid; gap: 8px; margin: 0 14px 8px; padding: 10px 12px; border: 1px solid #6b5a24; border-radius: var(--radius-sm); background: #26210f; color: #f7e3a6; font-size: 12.5px; line-height: 1.45; }
.chat-stale p { margin: 0; }
.chat-stale .button { justify-self: start; }
.bt-help h3 { margin: 4px 0 8px; font-size: 14px; }
.bt-help ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 13px; line-height: 1.45; }
.bt-help li strong { display: block; }
.bt-help li span { color: var(--muted); }
.bt-help-check { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; font-size: 12.5px; }
.bt-help-check .ok { color: var(--green); }
.bt-help-check .bad { color: #ffb4b4; }
.help-dialog { width: min(620px, calc(100vw - 32px)); }
.agent-request-link { display: inline-block; margin: 4px 0 10px; color: var(--teal-2); font-weight: 600; }

/* ---------- Compile progress (web/src/compile-progress.js) ---------- */
.compile-strip { flex: none; display: grid; gap: 7px; padding: 10px 14px; background: var(--panel-2); border-bottom: 1px solid var(--line); }
.compile-strip-row { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; min-width: 0; }
.compile-strip-label { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; font-weight: 600; color: var(--text); }
.compile-strip-label::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); animation: pulse 1.2s ease-in-out infinite; }
.compile-strip-detail { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.compile-strip-track { position: relative; height: 6px; border-radius: 999px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.compile-strip-bar { position: absolute; inset: 0 auto 0 0; width: var(--progress, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--teal), var(--teal-2)); box-shadow: 0 0 10px #1cc4ca59; overflow: hidden; }
.compile-strip-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 40%; background: linear-gradient(90deg, transparent, #ffffff47, transparent); transform: translateX(-100%); animation: compile-shimmer 1.8s ease-in-out infinite; }
.compile-strip-hint { margin: 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
.compile-strip[data-state="succeeded"] .compile-strip-label { color: var(--green); }
.compile-strip[data-state="failed"] .compile-strip-label { color: var(--red); }
.compile-strip[data-state="succeeded"] .compile-strip-label::before { background: var(--green); animation: none; }
.compile-strip[data-state="failed"] .compile-strip-label::before { background: var(--red); animation: none; }
.compile-strip[data-state="succeeded"] .compile-strip-bar { background: var(--green); box-shadow: 0 0 10px #4fd08b59; }
.compile-strip[data-state="failed"] .compile-strip-bar { background: var(--red); box-shadow: none; }
.compile-strip[data-state="succeeded"] .compile-strip-bar::after, .compile-strip[data-state="failed"] .compile-strip-bar::after { display: none; }
@keyframes compile-shimmer { to { transform: translateX(250%); } }
/* While the strip is visible in Saída, it replaces the thin indeterminate line. */
.console-panel:has(#output-pane:not([hidden]) > #compile-strip:not([hidden])) #compile-progress { display: none; }
/* The Verificar button fills like a download while the job runs. */
.action-button.verify.compile-fill { position: relative; isolation: isolate; overflow: hidden; border-color: #0ca1a680; }
.action-button.verify.compile-fill:disabled { opacity: 1; cursor: progress; }
.action-button.verify.compile-fill::before { content: ""; position: absolute; inset: 0 auto 0 0; z-index: -1; width: var(--progress, 0%); background: linear-gradient(90deg, #0ca1a62e, #1cc4ca52); }
.action-button.verify.compile-ok { border-color: var(--green); }
.action-button.verify.compile-ok::before { width: 100%; background: #4fd08b2e; }
.action-button.verify.compile-ok svg { background: var(--green); }
.action-button.verify.compile-failed { border-color: var(--red); }
.action-button.verify.compile-failed::before { width: 100%; background: #ff6b6b2e; }
.action-button.verify.compile-failed svg { background: var(--red); }
@media (max-width: 560px) { .compile-strip { padding: 8px 10px; } }
@media (prefers-reduced-motion: reduce) {
  .compile-strip-label::before { animation: none; }
  .compile-strip-bar::after { display: none; }
}

/* ---------- Board button (topbar) and picker ---------- */
.board-pick { display: inline-flex; align-items: center; gap: 8px; height: 36px; max-width: 260px; min-width: 0; padding: 0 8px 0 10px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--panel-2); color: var(--text); cursor: pointer; transition: border-color .15s, background .15s, transform .1s; }
.board-pick:hover:not(:disabled), .board-pick[aria-expanded="true"] { border-color: var(--teal); background: var(--raised); }
.board-pick:active:not(:disabled) { transform: translateY(1px); }
.board-pick:disabled { opacity: .45; cursor: not-allowed; }
.board-pick-icon { flex: none; width: 18px; height: 18px; color: var(--muted); transition: color .15s; }
.board-pick:hover:not(:disabled) .board-pick-icon, .board-pick[aria-expanded="true"] .board-pick-icon { color: var(--teal-2); }
.board-pick-text { display: flex; align-items: baseline; gap: 7px; min-width: 0; flex: 1; }
.board-pick-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.board-pick-chip { flex: none; font: 11px var(--mono); color: var(--dim); }
.board-pick-caret { flex: none; width: 14px; height: 14px; color: var(--muted); }

.bp-dialog { width: min(640px, calc(100vw - 32px)); height: min(720px, calc(100vh - 48px)); max-height: none; padding: 0; overflow: hidden; }
.bp-dialog[open] { display: flex; flex-direction: column; animation: steps-in .16s ease-out; }
.bp-head { margin: 0; padding: 18px 20px 2px; }
.bp-head p { margin: 3px 0 0; }
.bp-search { position: relative; margin: 12px 20px 0; }
.bp-search > svg { position: absolute; left: 13px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.bp-dialog .bp-search input { width: 100%; height: 44px; padding: 0 12px 0 40px; border-radius: 10px; font-size: 15px; }
.bp-dialog .bp-search input::placeholder { color: var(--dim); }
.bp-cats { display: flex; gap: 6px; padding: 12px 20px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.bp-cats::-webkit-scrollbar { display: none; }
.bp-cat { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 99px; background: none; color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.bp-cat:hover { color: var(--text); border-color: var(--teal); }
.bp-cat[aria-pressed="true"] { background: #0ca1a622; border-color: var(--teal); color: var(--teal-2); }
.bp-cat-count { font: 11px var(--mono); color: var(--dim); }
.bp-cat[aria-pressed="true"] .bp-cat-count { color: inherit; }
.bp-cat.none:not([aria-pressed="true"]) { opacity: .5; }
.bp-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 12px 12px; }
.bp-group-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: baseline; gap: 8px; margin: 0; padding: 14px 10px 6px; background: var(--panel); color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.bp-group-head span { font: 11px var(--mono); letter-spacing: 0; color: var(--dim); }
.bp-options { display: grid; gap: 2px; }
.bp-item { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto 36px; align-items: center; gap: 12px; min-height: 64px; padding: 8px 10px; border: 1px solid transparent; border-radius: 10px; cursor: pointer; transition: background .12s, border-color .12s; }
.bp-item:hover { background: var(--panel-2); }
.bp-item.active { background: var(--raised); border-color: var(--line-2); }
.bp-item.current { box-shadow: inset 3px 0 0 var(--teal); }
.bp-item[aria-disabled="true"] { cursor: default; }
.bp-item[aria-disabled="true"]:hover { background: none; }
.bp-item[aria-disabled="true"] > :not(.bp-state):not(.bp-star) { opacity: .5; }
.bp-thumb-box { display: grid; place-items: center; width: 88px; height: 48px; border-radius: 7px; background: var(--bg-2); overflow: hidden; }
.bp-item .bp-thumb { width: 82px; height: 42px; overflow: hidden; }
.bp-thumb-box.icon svg { width: 22px; height: 22px; color: var(--dim); }
.bp-main { display: grid; gap: 5px; min-width: 0; }
.bp-name { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 7px; min-width: 0; }
.bp-name strong { font-size: 14px; }
.bp-variant { font-size: 12px; color: var(--muted); }
.bp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.bp-chip-name { margin-right: 2px; font: 11.5px var(--mono); color: var(--muted); }
.bp-fact { padding: 1px 7px; border-radius: 99px; background: var(--line); color: var(--muted); font-size: 11px; font-weight: 600; }
.bp-state { font-size: 12px; font-weight: 700; white-space: nowrap; }
.bp-state.now { display: inline-flex; align-items: center; gap: 4px; color: var(--teal-2); }
.bp-state.now svg { width: 15px; height: 15px; }
.bp-state.soon { padding: 2px 8px; border-radius: 99px; background: var(--line-2); color: var(--muted); font-size: 11px; font-weight: 600; }
.bp-badge { padding: 1px 7px; border-radius: 99px; font-size: 11px; font-weight: 600; border: 1px solid var(--line-2); color: var(--muted); }
.bp-badge.download { border-color: color-mix(in srgb, var(--teal-2) 45%, transparent); color: var(--teal-2); }
.bp-badge.admin { border-style: dashed; }
/* The star: a 36px touch target; a tap on it never chooses the board. */
.bp-star { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; color: var(--dim); cursor: pointer; transition: color .12s, background .12s; }
.bp-star svg { width: 18px; height: 18px; fill: none; transition: transform .12s; }
.bp-star:hover { color: var(--text); background: #ffffff0d; }
.bp-star:active svg { transform: scale(.85); }
.bp-star.on { color: var(--yellow); }
.bp-star.on svg { fill: currentColor; }
.bp-note { margin: 0; padding: 8px 20px; border-top: 1px solid var(--line); color: var(--yellow); font-size: 12.5px; }
.bp-empty { display: grid; justify-items: center; gap: 6px; padding: 44px 16px; text-align: center; color: var(--muted); }
.bp-empty strong { color: var(--text); font-size: 15px; overflow-wrap: anywhere; }
.bp-empty p { max-width: 380px; margin: 0; font-size: 13px; line-height: 1.5; }
.bp-empty .button { margin-top: 8px; }
.bp-more { display: block; width: calc(100% - 20px); margin: 6px 10px 4px; padding: 10px 12px; border: 1px dashed var(--line-2); border-radius: 10px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; text-align: left; cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.bp-more:hover, .bp-more:focus-visible { background: var(--panel-2); border-color: var(--muted); color: var(--text); }
.bp-foot { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0; padding: 9px 20px; border-top: 1px solid var(--line); color: var(--dim); font-size: 11.5px; }
.bp-foot.with-action { justify-content: space-between; padding-block: 5px; }
.bp-keys { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; }
.bp-foot-action { font-size: 12.5px; }
.bp-foot kbd { padding: 0 5px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px; color: var(--muted); font: 10.5px var(--mono); }
@media (max-width: 1180px) { .board-pick-chip { display: none; } }
@media (max-width: 800px) {
  .board-pick { flex: 1; max-width: none; }
  /* Full width here: a long name must not push the topbar past the screen. */
  .board-pick-text { contain: inline-size; }
  .board-pick-chip { display: inline; }
}
@media (max-width: 640px) {
  .bp-dialog { inset: 0; width: 100%; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; border: 0; border-radius: 0; }
  .bp-head { padding: 14px 16px 2px; }
  .bp-search { margin: 10px 16px 0; }
  .bp-dialog .bp-search input { font-size: 16px; }
  .bp-cats { padding: 10px 16px; }
  .bp-scroll { padding: 0 6px 16px; }
  .bp-item { grid-template-columns: 64px minmax(0, 1fr) auto 36px; gap: 10px; padding: 8px; }
  .bp-thumb-box { width: 64px; height: 36px; }
  .bp-item .bp-thumb { width: 60px; height: 32px; }
}
@media (max-width: 640px), (pointer: coarse) { .bp-keys, .bp-foot:not(.with-action) { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .bp-dialog[open] { animation: none; }
  .board-pick, .board-pick-icon, .bp-cat, .bp-item, .bp-star, .bp-star svg { transition: none; }
  .bp-star:active svg { transform: none; }
}

/* ---------- Import from the Arduino IDE ---------- */
.import-dialog { width: min(680px, calc(100vw - 32px)); }
.import-dialog .modal-head p { margin: 2px 0 0; }
.import-drop { display: grid; justify-items: center; gap: 8px; padding: 26px 18px 20px; border: 2px dashed var(--line-2); border-radius: var(--radius); background: var(--bg-2); text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.import-drop:hover, .import-drop.dragging { border-color: var(--teal); background: #0ca1a612; }
.import-drop > svg { width: 34px; height: 34px; color: var(--teal-2); }
.import-drop strong { max-width: 34ch; font-size: 15px; line-height: 1.35; }
.import-drop p { margin: 0; }
.import-drop-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.import-status { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; color: var(--orange); font-size: 13px; }
.import-status::before { content: ""; flex: none; width: 14px; height: 14px; border: 2px solid #f39c1240; border-top-color: var(--orange); border-radius: 50%; animation: spin 1s linear infinite; }
.import-preview { margin-top: 16px; }
.import-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.import-field label { margin-top: 0; }
.import-note { margin: 6px 0 0; line-height: 1.4; }
.import-dialog h3 { margin: 18px 0 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.import-files, .import-libs, .import-skipped, .import-warnings { list-style: none; margin: 0; padding: 0; }
.import-files { display: grid; gap: 4px; }
.import-files li { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-2); }
.import-file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 12.5px var(--mono); }
.import-tag { flex: none; padding: 1px 7px; border-radius: 999px; background: #0ca1a626; color: var(--teal-2); font-size: 11px; font-weight: 700; }
.import-was { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11.5px; }
.import-file-size { flex: none; margin-left: auto; color: var(--dim); font: 11.5px var(--mono); }
.import-libs { display: flex; flex-wrap: wrap; gap: 6px; }
.import-libs li { padding: 2px 9px; border: 1px solid var(--line-2); border-radius: 999px; background: #ffffff0d; font: 12px var(--mono); }
.import-skipped { display: grid; gap: 6px; }
.import-skipped li { display: grid; gap: 2px; padding: 2px 0 2px 10px; border-left: 3px solid var(--line-2); color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.import-skipped code { color: var(--text); font: 12px var(--mono); overflow-wrap: anywhere; }
.import-warnings { display: grid; gap: 6px; }
.import-warnings li { padding: 8px 10px; border: 1px solid #f3c13d40; border-radius: var(--radius-sm); background: #f3c13d12; color: #f6d77e; font-size: 12.5px; line-height: 1.45; }
.import-error:empty { display: none; }
.import-offer { margin-top: 8px; }
.import-format-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 12px 0 0; padding: 0; list-style: none; }
.import-format-chips li { padding: 2px 9px; border: 1px solid var(--line-2); border-radius: 999px; background: #ffffff0d; font: 12px var(--mono); }
.import-formats { margin-top: 12px; font-size: 13px; }
.import-formats summary { cursor: pointer; color: var(--teal-2); }
.import-formats h4 { margin: 10px 0 4px; font-size: 12.5px; color: var(--muted); }
.import-formats ul { margin: 0; padding-left: 18px; line-height: 1.45; }
.import-formats li strong { font-weight: 600; }
.import-paste { display: grid; gap: 8px; margin-top: 12px; }
.import-paste label { margin-top: 0; }
.import-paste textarea { font: 12.5px var(--mono); min-height: 180px; resize: vertical; }
.import-paste p { margin: 0; }
.import-paste button { justify-self: start; }
.import-choose { margin-top: 16px; }
.import-choose input[type="search"] { width: 100%; margin-bottom: 8px; }
.import-choose input[type="radio"], .import-lib-row input[type="checkbox"] { flex: none; width: auto; margin: 0; padding: 0; accent-color: var(--teal); }
.import-choose ul { display: grid; gap: 4px; max-height: 320px; overflow: auto; margin: 0; padding: 0; list-style: none; }
.import-choose li label { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 400; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-2); cursor: pointer; }
.import-choose li label:hover { border-color: var(--line-2); }
.import-choice-text { display: grid; gap: 1px; min-width: 0; }
.import-choice-text span { overflow-wrap: anywhere; }
.import-choose-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
.import-kind { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--panel-2); font-size: 13.5px; }
.import-kind > svg { width: 18px; height: 18px; flex: none; color: var(--teal-2); }
.import-kind-detail { color: var(--muted); }
.import-badge { padding: 1px 8px; border-radius: 999px; background: #a896ff26; color: var(--violet); font-size: 11.5px; font-weight: 700; }
.import-created { background: #ffffff14; color: var(--muted); }
.import-adapt { margin-top: 16px; padding: 10px 12px; border: 1px solid #a896ff55; border-radius: var(--radius-sm); background: #a896ff12; }
.import-adapt h3 { margin-top: 0; color: var(--violet); }
.import-adapt p { margin: 0 0 6px; font-size: 13px; line-height: 1.45; }
.import-adapt ul { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.45; }
.import-libraries h4 { margin: 10px 0 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.import-install, .import-unknown { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.import-lib-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; }
.import-lib-row label { display: flex; align-items: baseline; gap: 6px; margin: 0; font-weight: 400; font-size: 12.5px; cursor: pointer; }
.import-lib-row select { width: auto; max-width: 100%; padding: 2px 6px; font-size: 12.5px; }
.import-lib-version { font: 12px var(--mono); color: var(--muted); }
.import-unknown li { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.import-ignored { color: var(--muted); font-size: 12.5px; }
.import-page-drop { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: #04080ab8; pointer-events: none; animation: import-fade .12s ease-out; }
.import-page-drop-card { display: grid; justify-items: center; gap: 6px; max-width: 420px; padding: 28px 32px; border: 2px dashed var(--teal); border-radius: 18px; background: var(--panel); box-shadow: var(--shadow); text-align: center; }
.import-page-drop-card svg { width: 40px; height: 40px; color: var(--teal-2); }
.import-page-drop-card strong { font-size: 18px; }
.import-page-drop-card span { color: var(--muted); font-size: 13px; }
.chat-import { margin-top: 14px; }
@keyframes import-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .import-page-drop, .import-status::before { animation: none; } .import-drop { transition: none; } }
@media (max-width: 560px) {
  .import-fields { grid-template-columns: 1fr; }
  .import-field + .import-field label { margin-top: 12px; }
  .import-drop { padding: 18px 12px 16px; }
  .import-format-chips { justify-content: center; }
  .projects-toolbar { flex-wrap: wrap; }
  .projects-toolbar input { flex-basis: 100%; }
}


/* What each step did is its main line (it may wrap); the tag sits at the end of the meta line */
.steps-summary { display: block; line-height: 1.4; overflow-wrap: anywhere; }
.steps-meta .steps-tag { display: inline-block; margin-left: 6px; vertical-align: 1px; line-height: 1.5; white-space: nowrap; }

/* Keyboard control panel, beside the code like the board's page */
.control-toggle { margin-left: auto; }
.ai-changes:not([hidden]) ~ .control-toggle, .web-toggle:not([hidden]) ~ .control-toggle { margin-left: 0; }
.control-toggle.compact { width: 28px; padding: 0; justify-content: center; }
.control-toggle.compact span { display: none; }
.editor-split.with-control { grid-template-columns: minmax(0, 1fr) minmax(250px, 38%); }
.editor-split.with-web.with-control { grid-template-columns: minmax(0, 1fr) minmax(260px, 44%); grid-template-rows: minmax(0, 1.25fr) minmax(0, 1fr); }
.editor-split.with-web.with-control > .editor-wrap { grid-row: 1 / -1; }
.editor-split.with-web.with-control > .control-panel { border-top: 1px solid var(--line); }
.control-panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; container: control / inline-size; border-left: 1px solid var(--line); background: var(--panel); outline: none; transition: box-shadow .15s; }
.control-panel.armed { box-shadow: inset 0 0 0 2px var(--teal); }
.control-bar { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.control-icon { width: 18px; height: 18px; flex: none; color: var(--teal-2); }
.control-heading { display: grid; min-width: 0; flex: 1; line-height: 1.25; }
.control-heading strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.control-transport { color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#control-edit[aria-pressed="true"] { color: var(--text); background: var(--raised); }
.control-view { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; padding: 10px; overflow-y: auto; }
.control-ready { margin: 0; padding: 6px 9px; border-radius: 8px; background: #f39c1214; border: 1px solid #f39c1240; color: #ffd08a; font-size: 12px; }
.control-ready.ok { background: #4fd08b12; border-color: #4fd08b3a; color: var(--green); }
.control-ready .text-button { padding: 1px 6px; color: var(--teal-2); font-weight: 700; text-decoration: underline; }
.control-armed-note { margin: 0; padding: 5px 9px; border-radius: 8px; background: var(--raised); color: var(--muted); font-size: 12px; font-weight: 700; text-align: center; }
.control-armed-note.armed { background: #0ca1a61f; color: var(--teal-2); }
.control-armed-note.typing { background: #f39c1214; color: #ffd08a; }
.control-keys { display: grid; gap: 12px; justify-items: center; }
.control-cross { display: grid; grid-template-columns: repeat(3, minmax(0, 76px)); gap: 6px; }
.control-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; width: 100%; }
.control-tile { display: grid; justify-items: center; align-content: center; gap: 2px; min-width: 0; min-height: 74px; padding: 6px 4px; border: 1px solid var(--line-2); border-bottom-width: 3px; border-radius: 10px; background: var(--raised); color: var(--text); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; transition: background .08s, border-color .08s, transform .08s; }
.control-tile.placeholder { visibility: hidden; }
.control-tile:hover { border-color: var(--teal); }
.control-tile.held { background: #0ca1a640; border-color: var(--teal-2); border-bottom-width: 1px; transform: translateY(2px); box-shadow: 0 0 0 3px #1cc4ca33; }
.control-cap { font: 700 22px/1.1 var(--mono); }
.control-cap.wide { font-size: 13px; }
.control-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11.5px; }
.control-command { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dim); font: 10.5px var(--mono); }
.control-empty { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.control-error { margin: 0; color: var(--red); font-size: 12px; overflow-wrap: anywhere; }
.control-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: auto; padding-top: 4px; }
.control-editor { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; padding: 10px; overflow-y: auto; }
.control-edit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px 10px; }
.control-edit-grid label { margin: 0; font-size: 12px; }
.control-edit-grid input, .control-edit-grid select { width: 100%; margin-top: 4px; padding: 6px 8px; font-weight: 400; }
.control-edit-url { grid-column: 1 / -1; }
.control-edit-url input { font: 12.5px var(--mono); }
.control-edit-grid .control-edit-newline { grid-column: 1 / -1; }
.control-edit-grid input[type="checkbox"] { width: auto; margin: 0; }
.control-templates { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; }
.control-rows { display: grid; gap: 6px; }
.control-row { display: grid; grid-template-columns: 58px minmax(70px, 1.2fr) minmax(56px, 1fr) minmax(56px, 1fr) 62px 28px; gap: 4px; align-items: center; }
.control-row input { min-width: 0; padding: 5px 7px; font: 12px var(--mono); }
.control-row .control-row-label { font-family: var(--sans); }
.control-row-head { color: var(--dim); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.control-row-key { height: 30px; min-width: 0; padding: 0 4px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 7px; background: var(--raised); font: 700 12px var(--mono); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.control-row-key.waiting { border-color: var(--orange); color: var(--orange); }
.control-edit-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: auto; }
/* The AI's question while the control panel is open: docked, not modal, so the keys keep working */
/* (also during a voice call). Bottom left of the editor (agent-requests.js sets the variables), never over the chat or the voice panel; */
/* --dock-bottom lifts it above the floating voice bar wherever the two would meet, so the bar never covers its buttons. */
.agent-request.docked { position: fixed; inset: auto auto var(--dock-bottom, 16px) var(--dock-left, 16px); z-index: 65; margin: 0; width: min(440px, var(--dock-width, calc(100vw - 32px)), calc(100vw - 32px)); max-height: min(60vh, calc(100vh - var(--dock-bottom, 16px) - 16px)); overflow: auto; padding: 16px; }
.agent-request.docked .agent-request-head h2 { font-size: 17px; }
/* Docked, the window is short: the camera picture stays small enough that the whole frame (a phone held upright too) */
/* and "Pronto, pode continuar" both fit; the buttons stay at its bottom edge while the rest scrolls. */
.agent-request.docked :is(.agent-request-video, .agent-request-phone img, .agent-request-phone video) { max-height: min(24vh, 220px); }
.agent-request.docked .modal-actions { position: sticky; bottom: -16px; margin: 8px 0 -16px; padding: 10px 0 16px; background: var(--panel); }
/* That bar is over the bottom of the scroll area: the control the keyboard focuses is scrolled above it, never under it. */
.agent-request.docked { scroll-padding-bottom: 72px; }
/* The phone's QR code fits above the bar when the window opens, so the phone can read it without scrolling. */
.agent-request.docked .agent-request-phone .phone-qr svg { width: min(180px, 18vh); height: min(180px, 18vh); }
@media (max-width: 800px) {
  /* Side panels go below the code and the editor grows with them (the page
     scrolls), instead of fixed minimums squeezed into a 70vh box. */
  .center-column:has(.editor-split.with-web, .editor-split.with-control) { grid-template-rows: auto minmax(220px, 40vh); }
  .editor-panel:has(> .editor-split.with-web, > .editor-split.with-control) { grid-template-rows: auto auto auto; }
  .editor-split.with-web, .editor-split.with-control, .editor-split.with-web.with-control { grid-template-columns: minmax(0, 1fr); grid-template-rows: max(240px, 50vh) auto; }
  .editor-split.with-web.with-control { grid-template-rows: max(220px, 45vh) auto auto; }
  .editor-split.with-web.with-control > .editor-wrap { grid-row: auto; }
  .editor-split.with-web > .web-panel { height: min(78vh, 600px); }
  .web-panel, .control-panel { border-left: 0; border-top: 1px solid var(--line); }
  .control-view { max-height: 70vh; }
  /* A sheet at the bottom, above the voice bar. */
  .agent-request.docked { inset: auto 8px var(--dock-sheet-bottom, 8px) 8px; width: auto; max-height: min(45vh, calc(100vh - var(--dock-sheet-bottom, 8px) - 8px)); }
  .agent-request.docked :is(.agent-request-video, .agent-request-phone img, .agent-request-phone video) { max-height: 16vh; }
  .agent-request.docked .agent-request-phone .phone-qr svg { width: min(160px, 14vh); height: min(160px, 14vh); }
}
/* The editor follows the panel's own width: beside the code it is narrow even on a wide screen. */
@container control (max-width: 520px) {
  .control-row { grid-template-columns: 58px minmax(0, 1fr) minmax(0, 1fr) 64px; grid-template-areas: "key label label remove" "press press release repeat"; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
  .control-row-key { grid-area: key; } .control-row .control-row-label { grid-area: label; } .control-row-press { grid-area: press; }
  .control-row-release { grid-area: release; } .control-row-repeat { grid-area: repeat; } .control-row-remove { grid-area: remove; justify-self: end; }
  .control-row-head { display: none; }
  .control-cross { grid-template-columns: repeat(3, minmax(0, 68px)); }
}

/* ---------- Browser check ---------- */
.compat-card .link-button, .compat-banner .text-button { white-space: nowrap; }
.compat-card .link-button { display: inline-block; margin-top: 6px; color: inherit; font-weight: 600; }
.help-more { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.browser-dialog { width: min(620px, calc(100vw - 32px)); }
.browser-lead { margin: 0 0 12px; font-size: 14px; line-height: 1.55; }
.browser-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.browser-lists section { padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel-2); }
.browser-lists h3, .browser-steps-title { margin: 0 0 6px; font-size: 13px; }
.browser-works h3 { color: var(--green); }
.browser-missing h3 { color: var(--red); }
.browser-lists ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; }
.browser-steps-title { margin-top: 16px; }
.browser-steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 13.5px; line-height: 1.5; }
.browser-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.browser-links a { display: grid; gap: 1px; min-width: 150px; padding: 9px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--raised); color: var(--text); text-decoration: none; transition: border-color .15s, transform .1s; }
.browser-links a:hover { border-color: var(--teal); }
.browser-links a:active { transform: translateY(1px); }
.browser-links strong { color: var(--teal-2); font-size: 13.5px; }
.browser-links small { color: var(--muted); font-size: 11.5px; }
.browser-detected { margin: 12px 0 0; }
.browser-address { display: grid; gap: 4px; margin-top: 14px; }
.browser-address input { font-family: var(--mono); font-size: 12.5px; }
.browser-copy-status { min-height: 1em; margin: 6px 0 0; }
.browser-copy-status:empty { display: none; }

/* ---------- Guided tour ---------- */
.tour { position: fixed; inset: 0; z-index: 1200; }
.tour.centered { background: #04080ac2; }
.tour-spot { position: fixed; border-radius: 12px; box-shadow: 0 0 0 200vmax #04080ab8, 0 0 0 2px var(--teal-2), 0 0 24px 4px #1cc4ca55; pointer-events: none; transition: left .22s ease, top .22s ease, width .22s ease, height .22s ease; }
.tour-card { position: fixed; width: min(360px, calc(100vw - 24px)); padding: 16px 16px 12px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--panel); color: var(--text); box-shadow: var(--shadow); transition: left .22s ease, top .22s ease; }
.tour-card:focus { outline: none; }
.tour-card:focus-visible { outline: 2px solid var(--teal-2); outline-offset: 2px; }
.tour.centered .tour-card { left: 50%; top: 50%; width: min(460px, calc(100vw - 32px)); transform: translate(-50%, -50%); }
.tour-count { margin: 0 0 4px; color: var(--teal-2); font: 700 11px/1.2 var(--mono); letter-spacing: .06em; }
.tour-title { margin: 0 0 6px; font-size: 17px; }
.tour-text { margin: 0; color: #cfdadd; font-size: 13.5px; line-height: 1.55; }
.tour-warn { margin: 10px 0 0; padding: 7px 10px; border: 1px solid #7a3b3b; border-radius: 8px; background: #2a1719; color: #ffd0d0; font-size: 12.5px; line-height: 1.45; }
.tour-extra:empty { display: none; }
.tour-extra { display: grid; gap: 10px; margin-top: 12px; }
.tour-suggestions { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tour-suggestions .button { width: 100%; }
.tour-ideas { padding-left: 18px; list-style: disc; color: var(--muted); }
.tour-first { justify-self: start; }
.tour-actions { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.tour-actions .tour-skip { margin-right: auto; }
.tour-actions .tour-next:only-child, .tour-actions .tour-skip[hidden] + .tour-back { margin-left: auto; }
/* Phone width: the card is a sheet at the bottom; the hole stays on the part being shown. */
.tour.sheet .tour-card { left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-height: 62vh; overflow: auto; transform: none; border-radius: 16px 16px 0 0; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
.tour.sheet .tour-card[data-side="sheet-top"] { top: 0; bottom: auto; border-radius: 0 0 16px 16px; padding-top: max(14px, env(safe-area-inset-top)); padding-bottom: 12px; }
@media (prefers-reduced-motion: reduce) { .tour-spot, .tour-card, .browser-links a { transition: none; } }

/* ---------- Voice assistant (voice-panel.js) ----------
   A compact bar above the composer. The orb carries the phase: violet = the
   AI listening or speaking, teal = the person speaking, orange = thinking,
   working on the bench or reconnecting, red = an error. Tokens only, so it
   follows the theme. The voice bar (#voice-dock) reads the same phases. */
.icon-button.voice { border-color: var(--line-2); }
.icon-button.voice[aria-expanded="true"] { color: var(--violet); border-color: var(--violet-2); }
.icon-button.voice.live { color: #fff; background: var(--violet-2); border-color: var(--violet-2); animation: voice-live 1.6s ease-in-out infinite; }
@keyframes voice-live { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--violet) 22%, transparent); } }
/* The chat column is a flex box that clips, and only the feed used to shrink:
   the panel shrinks too (min-height 0) and scrolls inside itself, so an open
   "Voz e modo" never pushes the composer out of reach on a phone or a short window. */
.voice-panel { --voice-tone: var(--violet); display: grid; gap: 8px; flex: 0 1 auto; min-height: 0; max-height: 60%; overflow-y: auto; overscroll-behavior: contain; margin: 0 12px 8px; padding: 10px 12px 8px; border: 1px solid color-mix(in srgb, var(--violet) 35%, var(--line-2)); border-radius: var(--radius); background: linear-gradient(180deg, color-mix(in srgb, var(--violet) 7%, var(--panel-2)), var(--panel-2)); }
.voice-panel[data-phase="voce-fala"], .voice-dock[data-phase="voce-fala"] { --voice-tone: var(--teal-2); }
.voice-panel[data-phase="pensando"], .voice-panel.agent-busy[data-phase="ouvindo"], .voice-panel[data-phase="conectando"], .voice-panel[data-phase="pedindo-microfone"], .voice-panel[data-phase="reconectando"],
.voice-dock[data-phase="pensando"], .voice-dock[data-phase="conectando"], .voice-dock[data-phase="pedindo-microfone"], .voice-dock[data-phase="reconectando"] { --voice-tone: var(--orange); }
.voice-panel[data-phase="erro"] { --voice-tone: var(--red); border-color: color-mix(in srgb, var(--red) 45%, var(--line-2)); }
.voice-dock[data-phase="erro"] { --voice-tone: var(--red); }
.voice-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.voice-orb { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--voice-tone); background: color-mix(in srgb, var(--voice-tone) 16%, transparent); transition: color .2s, background .2s; }
.voice-orb svg { width: 18px; height: 18px; }
.voice-panel.is-live .voice-orb::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--voice-tone); opacity: 0; }
.voice-panel[data-phase="falando"] .voice-orb::after, .voice-panel[data-phase="voce-fala"] .voice-orb::after { animation: voice-ring 1.4s ease-out infinite; }
.voice-panel[data-phase="pensando"] .voice-orb, .voice-panel[data-phase="conectando"] .voice-orb, .voice-panel[data-phase="pedindo-microfone"] .voice-orb, .voice-panel[data-phase="reconectando"] .voice-orb, .voice-panel.agent-busy .voice-orb,
.voice-dock[data-phase="pensando"] .voice-orb, .voice-dock[data-phase="conectando"] .voice-orb, .voice-dock[data-phase="reconectando"] .voice-orb { animation: pulse 1.2s ease-in-out infinite; }
@keyframes voice-ring { 0% { opacity: .75; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.35); } }
.voice-status { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.voice-state { font-size: 13.5px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-meta { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.voice-time.is-near { color: var(--orange); }
.voice-credits { cursor: help; text-decoration: underline dotted color-mix(in srgb, var(--muted) 60%, transparent); text-underline-offset: 3px; }
.voice-close { font-size: 18px; line-height: 1; }
.voice-captions { display: grid; gap: 2px; padding: 7px 10px; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--line); font-size: 12.5px; line-height: 1.45; }
.voice-captions p { margin: 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.voice-captions p:empty { display: none; }
.voice-said { color: var(--text); }
.voice-heard { color: var(--muted); }
.voice-error { margin: 0; padding: 8px 10px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--red) 12%, transparent); border: 1px solid color-mix(in srgb, var(--red) 40%, transparent); color: var(--text); font-size: 12.5px; line-height: 1.45; }
.voice-note { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.voice-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.voice-controls .button { height: 32px; padding: 0 12px; font-size: 13px; }
.voice-controls .button[aria-pressed="true"] { border-color: var(--orange); color: var(--orange); }
.voice-start svg { width: 16px; height: 16px; }
.voice-talk { flex: 1 1 160px; touch-action: none; user-select: none; -webkit-user-select: none; }
.voice-talk.is-down { background: var(--teal); border-color: var(--teal); color: #fff; }
.voice-change { margin-left: auto; font-size: 12.5px; color: var(--teal-2); }
.voice-setup { border-top: 1px solid var(--line); padding-top: 4px; }
.voice-setup summary { cursor: pointer; padding: 4px 0; font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.voice-setup summary:hover { color: var(--text); }
.voice-setup-body { display: grid; gap: 10px; padding: 6px 0 4px; }
.voice-field { display: grid; gap: 5px; min-width: 0; }
.voice-field label, .voice-label { margin: 0; font-size: 12px; font-weight: 600; color: var(--muted); }
.voice-pick { display: flex; gap: 6px; min-width: 0; }
.voice-pick select { flex: 1; min-width: 0; height: 32px; padding: 0 8px; font-size: 13px; }
.voice-field > select { height: 32px; padding: 0 8px; font-size: 13px; }
.voice-modes { width: fit-content; max-width: 100%; }
.voice-modes button:disabled, .voice-setup select:disabled { opacity: .5; cursor: not-allowed; }
.voice-headset { font-size: 13px; }
.voice-headset:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.voice-hint { margin: 0; font-size: 11.5px; color: var(--dim); line-height: 1.45; }
.voice-pick .button:disabled { opacity: .5; cursor: not-allowed; }
/* A question of the bench is open: the badge takes the focus to its window. */
.voice-badge { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid color-mix(in srgb, var(--orange) 55%, transparent); border-radius: 99px; background: color-mix(in srgb, var(--orange) 14%, transparent); color: var(--text); font-size: 12px; font-weight: 700; line-height: 1.4; white-space: nowrap; }
.voice-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
button.voice-badge { cursor: pointer; font-family: inherit; }
button.voice-badge:hover { background: color-mix(in srgb, var(--orange) 22%, transparent); }
/* The voice bar: at the bottom right while a call runs with the panel closed; inside
   the top modal dialog it is a sticky strip at the dialog's bottom (never fixed: a
   dialog with a transform would trap it). */
.voice-dock { --voice-tone: var(--violet); position: fixed; right: 16px; bottom: 16px; z-index: 70; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: min(560px, calc(100vw - 32px)); padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--violet) 40%, var(--line-2)); border-radius: 14px; background: var(--panel-2); color: var(--text); box-shadow: var(--shadow); }
.voice-dock .voice-orb { width: 28px; height: 28px; flex: 0 0 auto; }
.voice-dock .voice-orb svg { width: 15px; height: 15px; }
.voice-dock-state { min-width: 0; font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-dock-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.voice-dock-actions .button[aria-pressed="true"] { border-color: var(--orange); color: var(--orange); }
.voice-dock .voice-talk { flex: 0 1 auto; }
/* Why the call ended or failed, while the panel is closed (voice-dock.js makes it): a line of its own, wrapped. */
.voice-dock-note { flex: 1 1 100%; order: 1; margin: 0; font-size: 13px; line-height: 1.4; color: var(--text); overflow-wrap: anywhere; }
.voice-dock[data-phase="erro"] .voice-dock-note { color: var(--red); }
.voice-dock.in-dialog { position: sticky; right: auto; bottom: 0; z-index: 1; max-width: none; margin-top: 14px; box-shadow: 0 -6px 16px color-mix(in srgb, var(--bg) 60%, transparent); }
/* Voice lines in the chat: one block per stretch of a call, and the tag on a request made by voice. */
.chat-message-voice { border-left: 2px solid color-mix(in srgb, var(--violet) 55%, transparent); padding: 2px 0 2px 10px; }
.chat-message-voice .chat-message-label { color: var(--violet); }
.voice-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.voice-line { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; font-size: 13px; line-height: 1.5; }
.voice-line-who { color: var(--dim); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding-top: 1px; }
.voice-line-user .voice-line-text { color: var(--muted); }
.voice-line-text { overflow-wrap: anywhere; white-space: pre-wrap; }
.voice-line.is-pending .voice-line-text { color: var(--dim); }
.chat-via { display: inline-block; margin: 0 0 3px; padding: 1px 7px; border-radius: 99px; background: color-mix(in srgb, var(--violet) 16%, transparent); color: var(--violet); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
@media (max-width: 600px) {
  .voice-panel { margin: 0 8px 8px; max-height: 50%; }
  .voice-controls .button, .voice-pick select, .voice-pick .button, .voice-field > select { min-height: 44px; }
  .voice-controls .button { flex: 1 1 auto; }
  .voice-change { flex-basis: 100%; min-height: 44px; margin-left: 0; }
  .voice-modes { width: 100%; }
  .voice-modes button { flex: 1; min-height: 40px; }
  .voice-close { width: 44px; height: 44px; }
  .voice-line { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .voice-dock:not(.in-dialog) { left: 8px; right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); max-width: none; }
  .voice-dock-actions { width: 100%; margin-left: 0; }
  .voice-dock-actions .button { flex: 1 1 auto; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .icon-button.voice.live, .voice-orb, .voice-orb::after { animation: none !important; }
  .voice-panel.is-live .voice-orb::after { opacity: .6; }
}