/*
  JARVIS visual system
  Type: 11 / 13 / 16 / 24 / 38. Rhythm: 4 / 8 / 12 / 16 / 24 / 32.
  Surfaces: graphite-0 and graphite-1. Cyan = live signal; amber = action/recording.
  Motion: 160–500ms UI transitions; slow linear telemetry; transforms/opacity only.
*/
:root {
  color-scheme: dark;
  --graphite-0: #050708;
  --graphite-1: #090d10;
  --graphite-2: #0d1418;
  --graphite-3: #121c21;
  --line: #203039;
  --line-bright: #31505c;
  --text: #e7f2f4;
  --muted: #83979e;
  --cyan: #55d9f3;
  --cyan-dim: #1f7183;
  --cyan-faint: rgba(85, 217, 243, 0.08);
  --amber: #f0ad63;
  --amber-dim: #7d572f;
  --green: #75dfbf;
  --red: #ff7777;
  --shadow-cyan: rgba(32, 193, 224, 0.18);
  --font-display: "Avenir Next", "DIN Alternate", "Bahnschrift", sans-serif;
  --font-mono: "SFMono-Regular", "IBM Plex Mono", "Cascadia Code", "Liberation Mono", monospace;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--graphite-0); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    linear-gradient(115deg, rgba(24, 52, 60, 0.10), transparent 28%),
    var(--graphite-0);
  font: 13px/1.5 var(--font-mono);
  text-wrap: pretty;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.32;
  background-image:
    linear-gradient(rgba(85, 217, 243, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(85, 217, 243, 0.018) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, black, transparent 88%);
}

button, input, textarea, select { font: inherit; color: inherit; }
button, input, textarea, select, summary { -webkit-tap-highlight-color: transparent; }

button {
  min-height: 40px;
  border: 1px solid var(--cyan-dim);
  border-radius: 0;
  padding: 9px 14px;
  color: #dff9ff;
  background: #103440;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease, transform 160ms var(--ease-out), box-shadow 160ms ease;
}

button:hover { border-color: var(--cyan); background: #164957; box-shadow: 0 0 20px var(--shadow-cyan); }
button:active { transform: translateY(1px); }
button:disabled { opacity: 0.42; cursor: not-allowed; box-shadow: none; }

button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible, a:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 10px 11px;
  color: var(--text);
  background: #070b0d;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

input:hover, select:hover, textarea:hover { border-color: var(--line-bright); }
input:focus, select:focus, textarea:focus { border-color: var(--cyan-dim); background: #091116; box-shadow: inset 2px 0 var(--cyan); }
textarea { resize: vertical; }

::selection { color: var(--graphite-0); background: var(--cyan); }

.hidden { display: none !important; }
.muted { color: var(--muted); }
.error { min-height: 1.5rem; margin-top: 12px; color: var(--red); }
.command-anchor { position: absolute; width: 1px; height: 1px; overflow: hidden; }

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 14px;
  color: var(--graphite-0);
  background: var(--cyan);
  transform: translateY(-160%);
  transition: transform 160ms ease;
}
.skip-link:focus { transform: translateY(0); }

.eyebrow {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

/* Access gate */
.gate {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 20px;
  background: #030506;
}

.gate::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 49.9%, rgba(85, 217, 243, 0.09) 50%, transparent 50.1%),
    linear-gradient(transparent 49.9%, rgba(85, 217, 243, 0.07) 50%, transparent 50.1%);
  background-size: 88px 88px;
  mask-image: radial-gradient(circle, black, transparent 68%);
}

.gate-atmosphere { position: absolute; width: min(78vw, 760px); aspect-ratio: 1; opacity: 0.62; }
.gate-ring { position: absolute; inset: 0; border: 1px solid rgba(85, 217, 243, 0.17); border-radius: 50%; }
.gate-ring::before, .gate-ring::after { content: ""; position: absolute; inset: 9%; border: inherit; border-radius: inherit; }
.gate-ring::after { inset: 28%; border-color: rgba(240, 173, 99, 0.13); }
.gate-ring-a { animation: core-spin 44s linear infinite; border-style: dashed; }
.gate-ring-b { inset: 17%; animation: core-spin-reverse 31s linear infinite; border-color: rgba(85, 217, 243, 0.10); }
.gate-scan { position: absolute; inset: 49% 5% auto; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); box-shadow: 0 0 18px var(--cyan); animation: gate-scan 5s ease-in-out infinite; }

.gate-card {
  position: relative;
  width: min(460px, 100%);
  padding: 32px;
  border: 1px solid var(--line-bright);
  background: rgba(7, 12, 15, 0.96);
  box-shadow: 0 0 80px rgba(23, 126, 147, 0.16), inset 0 1px rgba(255, 255, 255, 0.04);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  animation: gate-arrive 500ms var(--ease-out) both;
}

.gate-card::before {
  content: "SECURE NODE · 01";
  position: absolute;
  right: 26px;
  bottom: 12px;
  color: #4f656d;
  font-size: 9px;
  letter-spacing: 0.16em;
}

.gate-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.gate-card h1 { margin: 4px 0 0; color: var(--cyan); font: 600 38px/1 var(--font-display); letter-spacing: 0.24em; }
.gate-card p { max-width: 34ch; color: var(--muted); }
.gate-card label { display: grid; gap: 8px; margin: 24px 0 16px; color: #b3c4c9; }
.gate-card > button { width: 100%; }

.gate-seal { position: relative; width: 58px; height: 58px; flex: 0 0 auto; border: 1px solid var(--cyan-dim); border-radius: 50%; animation: core-spin 12s linear infinite; }
.gate-seal::before { content: ""; position: absolute; inset: 8px; border: 1px dashed var(--amber-dim); border-radius: inherit; }
.gate-seal span { position: absolute; inset: 21px; border: 2px solid var(--cyan); transform: rotate(45deg); }

/* Application shell */
.app { width: min(1920px, 100%); margin: 0 auto; padding: 16px 18px 24px; animation: app-arrive 420ms var(--ease-out) both; }

header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 74px;
  padding: 10px 4px 12px;
  border-bottom: 1px solid var(--line);
  background: rgba(5, 7, 8, 0.92);
  backdrop-filter: blur(14px);
}

header::after { content: ""; position: absolute; bottom: -1px; left: 0; width: 132px; height: 1px; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.brand-lockup { display: flex; align-items: center; gap: 14px; min-width: 0; }
.brand-index { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--cyan-dim); color: var(--cyan); font-size: 11px; transform: rotate(45deg); }
.brand-index i { font-style: normal; transform: rotate(-45deg); }
header h1 { margin: 3px 0 0; color: var(--cyan); font: 600 24px/1.2 var(--font-display); letter-spacing: 0.18em; }
header h1 span { margin-left: 8px; color: var(--muted); font: 11px/1.2 var(--font-mono); letter-spacing: 0.02em; }
.header-status, .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

main { display: grid; grid-template-columns: minmax(250px, 0.82fr) minmax(500px, 1.9fr) minmax(330px, 1.18fr); gap: 12px; padding-top: 12px; }
.left-rail, .right-rail { display: flex; min-width: 0; flex-direction: column; gap: 12px; }

.panel, .center-stage {
  position: relative;
  border: 1px solid var(--line);
  background: rgba(9, 14, 17, 0.94);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}

.panel { padding: 13px; clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%); }
.panel::before { content: ""; position: absolute; top: -1px; left: -1px; width: 42px; height: 1px; background: var(--cyan-dim); }
.panel[open] { border-color: #29414b; }

.panel-title {
  min-height: 18px;
  margin-bottom: 12px;
  color: var(--cyan);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.panel summary { cursor: pointer; list-style: none; }
.panel summary::-webkit-details-marker { display: none; }
.panel > summary::before { content: "+"; float: right; margin-left: 8px; color: var(--muted); }
.panel[open] > summary::before { content: "−"; color: var(--cyan); }
.panel > summary.row::before { order: 3; float: none; }

.pill {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  border: 1px solid var(--line-bright);
  color: #a9bac0;
  background: rgba(5, 10, 12, 0.66);
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.pill.online, .pill.valid { border-color: #2b826e; color: var(--green); }
.pill.encrypted { border-color: var(--cyan-dim); color: var(--cyan); }
.pill.unverified, .pill.untested { border-color: var(--amber-dim); color: var(--amber); }
.pill.invalid, .pill.error { border-color: #8b3f43; color: var(--red); }
.pill.listening { border-color: #2b826e; color: var(--green); }
.pill.detected { border-color: var(--cyan); color: #021014; background: var(--cyan); }
.pill.recording { border-color: var(--amber); color: #1c0e02; background: var(--amber); }

.secondary { border-color: var(--line-bright); color: #b5c4c9; background: transparent; }
.mini { min-height: 30px; padding: 4px 8px; font-size: 10px; background: transparent; }

.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }
.metric { position: relative; min-height: 68px; padding: 12px; background: #080d10; overflow: hidden; }
.metric::after { content: ""; position: absolute; right: 0; bottom: 0; width: 18px; height: 1px; background: var(--cyan-dim); }
.metric b { display: block; color: var(--text); font: 600 16px/1.2 var(--font-display); letter-spacing: 0.04em; }
.metric small { display: block; margin-top: 7px; color: var(--muted); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }

.stack { display: flex; flex-direction: column; gap: 7px; }
.item { position: relative; border: 1px solid #18262d; padding: 10px; background: #070c0f; }
.item:hover { border-color: #29414b; }
.item.due { border-color: var(--amber-dim); }
.item strong { font-family: var(--font-display); font-size: 13px; font-weight: 600; }
.item .meta { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }
.item .actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.item .actions button { min-height: 30px; padding: 4px 8px; font-size: 10px; }

/* Functional command core */
.center-stage {
  min-width: 0;
  min-height: calc(100vh - 102px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 12px 16px 14px;
  background:
    linear-gradient(180deg, rgba(18, 31, 37, 0.35), transparent 42%),
    #070b0d;
}

.center-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(85, 217, 243, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(85, 217, 243, 0.02) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, black 0 47%, transparent 82%);
}

.center-stage::after { content: "CORE / INPUT"; position: absolute; top: 11px; left: 13px; color: #52676f; font-size: 9px; letter-spacing: 0.15em; }

.command-core {
  --core-accent: var(--cyan);
  position: relative;
  width: min(310px, 62vw);
  aspect-ratio: 1;
  flex: 0 0 auto;
  margin: 2px auto 4px;
  color: var(--core-accent);
  filter: drop-shadow(0 0 18px rgba(85, 217, 243, 0.10));
  transition: filter 300ms ease, color 300ms ease;
}

.command-core[data-state="recording"], .command-core[data-state="transmitting"] { --core-accent: var(--amber); filter: drop-shadow(0 0 24px rgba(240, 173, 99, 0.22)); }
.command-core[data-state="detected"], .command-core[data-state="listening"] { filter: drop-shadow(0 0 27px rgba(85, 217, 243, 0.24)); }
.command-core[data-state="error"], .command-core[data-state="degraded"] { --core-accent: var(--red); }

.core-grid { position: absolute; inset: 7%; border-radius: 50%; opacity: 0.38; background: repeating-radial-gradient(circle, transparent 0 17px, rgba(85, 217, 243, 0.10) 18px 19px); }
.core-grid::before, .core-grid::after { content: ""; position: absolute; background: currentColor; opacity: 0.22; }
.core-grid::before { width: 1px; inset: 4% auto 4% 50%; }
.core-grid::after { height: 1px; inset: 50% 4% auto; }

.core-orbit, .core-reticle { position: absolute; border-radius: 50%; }
.core-orbit { border: 1px solid color-mix(in srgb, currentColor 38%, transparent); }
.orbit-outer { inset: 5%; border-style: dashed; animation: core-spin 26s linear infinite; }
.orbit-mid { inset: 17%; border-color: color-mix(in srgb, currentColor 29%, transparent); animation: core-spin-reverse 19s linear infinite; }
.orbit-inner { inset: 29%; border-width: 2px; border-style: double; animation: core-spin 13s linear infinite; }
.orbit-outer::before, .orbit-mid::before, .orbit-inner::before { content: ""; position: absolute; inset: 6%; border: 1px dotted color-mix(in srgb, currentColor 23%, transparent); border-radius: inherit; }

.orbit-node { position: absolute; width: 6px; height: 6px; border: 1px solid currentColor; background: var(--graphite-0); box-shadow: 0 0 10px currentColor; transform: rotate(45deg); }
.node-a { top: -3px; left: 49%; }
.node-b { right: 8%; bottom: 20%; }
.node-c { top: 18%; left: 3%; }
.node-d { right: -3px; top: 47%; background: currentColor; }
.orbit-tag { position: absolute; padding: 2px 4px; color: currentColor; background: var(--graphite-0); font-size: 8px; letter-spacing: 0.1em; }
.tag-xai { top: 7%; right: 12%; animation: core-spin-reverse 26s linear infinite; }
.tag-memory { left: 5%; bottom: 20%; animation: core-spin 19s linear infinite; }
.tag-tasks { right: 4%; top: 24%; animation: core-spin-reverse 13s linear infinite; }

.core-reticle { border: 1px solid transparent; }
.reticle-a { inset: 10%; border-top-color: currentColor; border-bottom-color: currentColor; opacity: 0.58; animation: core-spin 7s linear infinite; }
.reticle-b { inset: 23%; border-left-color: currentColor; border-right-color: currentColor; opacity: 0.72; animation: core-spin-reverse 5s linear infinite; }

.core-scan { position: absolute; inset: 8%; overflow: hidden; border-radius: 50%; }
.core-scan::before { content: ""; position: absolute; left: 8%; right: 8%; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, currentColor, transparent); box-shadow: 0 0 14px currentColor; animation: core-scan 3.6s ease-in-out infinite; }

.core-center {
  position: absolute;
  inset: 37%;
  display: grid;
  place-content: center;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: currentColor;
  background: #071015;
  box-shadow: 0 0 28px color-mix(in srgb, currentColor 20%, transparent), inset 0 0 18px color-mix(in srgb, currentColor 10%, transparent);
}
.core-center::before { content: ""; position: absolute; inset: 7px; border: 1px dotted currentColor; border-radius: inherit; opacity: 0.44; }
.core-kicker, .core-coordinate { font-size: 7px; letter-spacing: 0.13em; white-space: nowrap; opacity: 0.64; }
.core-center strong { margin: 2px 0; font: 700 11px/1 var(--font-display); letter-spacing: 0.14em; }

.audio-spectrum { position: absolute; left: 24%; right: 24%; bottom: 7%; height: 27px; display: flex; align-items: end; justify-content: center; gap: 3px; }
.audio-spectrum span { width: 2px; height: 100%; background: currentColor; opacity: 0.52; transform: scaleY(0.16); transform-origin: bottom; animation: signal-idle 2.4s ease-in-out infinite; transition: transform 90ms linear, opacity 180ms ease; }
.audio-spectrum span:nth-child(3n) { animation-delay: -0.8s; }
.audio-spectrum span:nth-child(4n) { animation-delay: -1.4s; }
.audio-spectrum span:nth-child(5n) { animation-delay: -2s; }
.command-core[data-state="recording"] .audio-spectrum span { opacity: 0.95; animation: none; }
.command-core[data-state="transmitting"] .audio-spectrum span { animation-duration: 0.65s; opacity: 0.9; }

.route-row { position: relative; z-index: 2; display: flex; justify-content: center; align-items: end; gap: 12px; margin-top: -2px; }
.route-row label { display: grid; min-width: min(280px, 60%); gap: 4px; color: var(--muted); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }

.conversation { position: relative; z-index: 2; flex: 1; min-height: 190px; max-height: calc(100vh - 485px); overflow: auto; padding: 12px 4px; scrollbar-color: var(--cyan-dim) transparent; }
.conversation:empty::before { content: "Command channel standing by"; position: absolute; inset: 48% 0 auto; color: #4e6269; text-align: center; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }
.message { max-width: 84%; margin: 8px 0; padding: 10px 12px; border: 1px solid #1a2a31; border-left: 2px solid var(--cyan); background: #0a1419; animation: message-enter 220ms var(--ease-out) both; overflow-wrap: anywhere; }
.message.user { margin-left: auto; border-right: 2px solid var(--amber); border-left: 1px solid #30271c; background: #15120d; }
.message small { display: block; margin-top: 6px; color: var(--muted); font-size: 10px; }
.capability-offer { max-width: 84%; margin: 8px 0; padding: 12px; border: 1px solid var(--amber-dim); background: rgba(64, 42, 20, 0.18); animation: message-enter 220ms var(--ease-out) both; }
.capability-offer strong { color: var(--amber); font-family: var(--font-display); }
.capability-offer .meta { margin: 5px 0; color: var(--muted); font-size: 10px; }
.capability-offer button { margin-top: 7px; border-color: var(--amber-dim); color: #f7d7b3; background: #2a1c0e; }

.composer { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding-top: 9px; border-top: 1px solid var(--line); }
.composer::before { content: "INPUT"; position: absolute; top: -7px; left: 9px; padding: 0 5px; color: #5d747c; background: #070b0d; font-size: 8px; letter-spacing: 0.14em; }
.composer textarea { min-height: 76px; }
.composer-actions { display: flex; min-width: 132px; flex-direction: column; gap: 6px; }
.composer-actions .pill { flex: 1; }
.privacy { position: relative; z-index: 2; margin: 10px 0 0; color: #657a82; font: 10px/1.45 var(--font-display); }

.phone-launch { position: relative; z-index: 4; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-bottom: 10px; padding: 12px; border: 1px solid var(--cyan-dim); background: rgba(8, 25, 31, 0.92); }
.phone-launch strong { display: block; margin-top: 2px; color: var(--cyan); font: 600 18px/1.2 var(--font-display); letter-spacing: 0.05em; }
.phone-launch p { max-width: 62ch; margin: 5px 0 0; color: var(--muted); font-size: 10px; }
.phone-launch a { color: var(--cyan); font-size: 10px; }
.phone-launch details { grid-column: 1 / -1; color: var(--muted); font-size: 10px; }
.phone-launch details summary { color: #bcd6dc; cursor: pointer; }
.phone-launch ol { margin: 8px 0 0; padding-left: 20px; }

.operations-connectors .stack { margin-bottom: 10px; }
.connector-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px; }
.security-posture { padding: 9px; border: 1px dashed #2a3c43; font-size: 10px; line-height: 1.55; }

/* API management */
.api-management { border-color: #28424d; }
.api-intro { display: grid; gap: 3px; margin: -2px 0 12px; padding: 9px 10px; border-left: 1px solid var(--cyan-dim); background: var(--cyan-faint); }
.api-intro strong { color: #c9e8ed; font-family: var(--font-display); }
.api-intro span, .connector-config p { color: var(--muted); font: 10px/1.5 var(--font-display); }
.key-editor { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.editor-actions { justify-content: flex-end; }
.connection-receipt { min-height: 34px; margin: 10px 0; padding: 8px; border: 1px dashed #2a3c43; font-size: 10px; }
.connection-receipt.success { border-color: #2b826e; color: var(--green); }
.connection-receipt.failure { border-color: #8b3f43; color: var(--red); }
.provider-matrix { gap: 9px; }

.provider-key { padding: 0; overflow: hidden; }
.provider-key-header { display: flex; align-items: start; justify-content: space-between; gap: 8px; padding: 10px; border-bottom: 1px solid #17252b; background: #091116; }
.provider-key-header strong { color: #d8e9ec; }
.provider-key-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: #17252b; }
.provider-fact { min-height: 46px; padding: 7px 9px; background: #070c0f; }
.provider-fact span { display: block; color: #60767e; font-size: 8px; letter-spacing: 0.11em; text-transform: uppercase; }
.provider-fact strong { display: block; margin-top: 3px; color: #aebfc4; font: 10px/1.35 var(--font-mono); overflow-wrap: anywhere; }
.provider-key .actions { padding: 9px; margin: 0; }
.provider-key .danger { border-color: #65363a; color: #e89b9b; }
.provider-error { padding: 8px 10px; color: #dc9c9c; background: rgba(117, 38, 43, 0.12); font-size: 10px; overflow-wrap: anywhere; }

.connector-config { margin-top: 14px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.connector-config .panel-title { margin-bottom: 6px; }
.subsystem { margin-top: 12px; border: 1px solid #1b2b32; padding: 10px; background: #070c0f; }
.subsystem > summary { cursor: pointer; list-style: none; }
.subsystem > summary::-webkit-details-marker { display: none; }
.wake-settings output { margin-left: 8px; color: var(--cyan); }
.wake-settings input[type="range"] { width: calc(100% - 48px); padding: 0; vertical-align: middle; accent-color: var(--cyan); }
.wake-readiness { border-color: var(--cyan-dim); }

.form-grid input, .form-grid select, .form-grid textarea { width: 100%; }
.form-grid label { display: grid; gap: 4px; color: var(--muted); font-size: 10px; }
.check { display: grid !important; grid-template-columns: auto 1fr; align-items: center; justify-content: start; min-height: 38px; }
.check input { width: 18px; height: 18px; accent-color: var(--cyan); }
.audit { max-height: 240px; overflow: auto; font-size: 10px; }
.audit .item { padding: 7px; }

dialog {
  width: min(560px, calc(100% - 24px));
  max-height: calc(100vh - 24px);
  overflow: auto;
  border: 1px solid var(--line-bright);
  border-radius: 0;
  padding: 20px;
  color: var(--text);
  background: #080e11;
  box-shadow: 0 24px 100px #000;
}
dialog::backdrop { background: rgba(0, 3, 5, 0.82); backdrop-filter: blur(6px); }
.dialog-form { display: grid; gap: 12px; }
.dialog-form h2 { margin: 0; color: var(--cyan); font: 600 24px/1.2 var(--font-display); letter-spacing: 0.05em; }
.dialog-form p { color: var(--muted); }
.dialog-form label { display: grid; gap: 5px; color: var(--muted); }
.dialog-form textarea { min-height: 88px; }
.dialog-form select[multiple] { min-height: 130px; }

@keyframes core-spin { to { transform: rotate(360deg); } }
@keyframes core-spin-reverse { to { transform: rotate(-360deg); } }
@keyframes core-scan { 0%, 100% { transform: translateY(-88px); opacity: 0; } 18%, 82% { opacity: 0.8; } 50% { transform: translateY(88px); } }
@keyframes signal-idle { 0%, 100% { transform: scaleY(0.14); } 50% { transform: scaleY(0.58); } }
@keyframes gate-scan { 0%, 100% { transform: translateY(-210px); opacity: 0; } 20%, 80% { opacity: 0.5; } 50% { transform: translateY(210px); } }
@keyframes gate-arrive { from { opacity: 0; transform: translateY(12px) scale(0.985); } }
@keyframes app-arrive { from { opacity: 0; transform: translateY(8px); } }
@keyframes message-enter { from { opacity: 0; transform: translateY(5px); } }

@media (max-width: 1320px) {
  main { grid-template-columns: minmax(240px, 0.8fr) minmax(470px, 1.7fr); }
  .right-rail { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .right-rail .api-management { grid-row: span 3; }
  .center-stage { min-height: 760px; }
}

@media (max-width: 860px) {
  .app { padding: 8px; }
  header { position: relative; align-items: flex-start; }
  header h1 span { display: block; margin: 5px 0 0; }
  .header-status { flex-wrap: wrap; justify-content: flex-end; }
  main { display: flex; flex-direction: column; }
  .center-stage { order: -1; min-height: min(840px, calc(100svh - 88px)); }
  .right-rail { display: flex; }
  .conversation { max-height: none; }
  .command-core { width: min(280px, 72vw); }
}

@media (max-width: 560px) {
  body { font-size: 12px; }
  button { min-height: 44px; }
  .app { padding: 5px; }
  header { min-height: 86px; gap: 8px; }
  .brand-index { display: none; }
  header h1 { font-size: 20px; }
  .eyebrow { font-size: 9px; }
  .header-status { max-width: 168px; }
  .header-status .pill { width: 100%; }
  .header-status button { min-width: 74px; padding-inline: 8px; }
  main { padding-top: 6px; gap: 6px; }
  .left-rail, .right-rail { gap: 6px; }
  .center-stage { min-height: calc(100svh - 100px); padding: 10px; }
  .command-core { width: min(238px, 76vw); }
  .route-row { align-items: stretch; flex-direction: column; gap: 6px; }
  .route-row label { min-width: 0; }
  .route-row .pill { align-self: flex-start; }
  .conversation { min-height: 150px; }
  .message { max-width: 94%; }
  .composer { grid-template-columns: 1fr; }
  .composer-actions { min-width: 0; flex-direction: row; flex-wrap: wrap; }
  .composer-actions > * { flex: 1 1 120px; min-height: 44px; }
  .privacy { font-size: 9px; }
  .gate-card { padding: 24px 20px; }
  .gate-card h1 { font-size: 30px; }
  .gate-seal { width: 48px; height: 48px; }
  .gate-seal span { inset: 17px; }
  .provider-key-body { grid-template-columns: 1fr; }
  .editor-actions { align-items: stretch; flex-direction: column-reverse; }
  .connector-config .editor-actions { flex-direction: column; }
  .phone-launch { grid-template-columns: 1fr; }
  .phone-launch > button, .phone-launch > .pill { width: 100%; }
  .connector-card { grid-template-columns: 1fr; }
}

body.voice-mode .left-rail, body.voice-mode .right-rail { display: none; }
body.voice-mode main { grid-template-columns: minmax(0, 820px); justify-content: center; }
body.voice-mode .center-stage { min-height: calc(100svh - 102px); }
body.voice-mode .phone-launch { display: grid !important; }
body.voice-mode .command-core { width: min(286px, 70vw); }
body.voice-mode .conversation { min-height: 180px; max-height: none; }

@media (max-width: 560px) {
  body.voice-mode .app { padding: 0; }
  body.voice-mode header { padding-inline: 10px; }
  body.voice-mode .header-status #refresh, body.voice-mode .header-status #system-state { display: none; }
  body.voice-mode .center-stage { min-height: calc(100svh - 86px); border-inline: 0; padding: 10px; }
  body.voice-mode .privacy { margin-bottom: max(8px, env(safe-area-inset-bottom)); }
}

@media (prefers-contrast: more) {
  :root { --line: #40535b; --muted: #a9b8bd; }
  .panel, .center-stage, .item { border-width: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .core-scan, .gate-scan { display: none; }
  .audio-spectrum span { transform: scaleY(0.22); }
}