:root {
  color-scheme: dark;
  --zero-black: #02050a;
  --zero-deep: #06101a;
  --zero-panel: rgba(7, 17, 27, 0.86);
  --zero-line: rgba(143, 210, 230, 0.16);
  --zero-line-bright: rgba(126, 231, 255, 0.48);
  --zero-white: #edfaff;
  --zero-muted: #7894a0;
  --zero-cyan: #22e9ff;
  --zero-blue: #00aaff;
  --zero-violet: #9b62ff;
  --zero-gold: #ffd95b;
  --zero-green: #37ff9b;
  --zero-red: #ff5d72;
  --state-color: var(--zero-cyan);
  --state-rgb: 34, 233, 255;
  --font-display: "Arial Narrow", "Roboto Condensed", "Segoe UI", sans-serif;
  --font-body: Inter, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { background: #000; }

body {
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  color: var(--zero-white);
  background:
    radial-gradient(circle at 50% 30%, #071b27 0, #02070d 36%, #000 76%),
    #000;
  font: 15px/1.5 var(--font-body);
}

.boot-sequence {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 42%, #082534 0, #01070c 36%, #000 78%);
  transition: visibility 0s 850ms, opacity 850ms ease;
}

.boot-sequence[hidden] { display: none; }
.boot-sequence[data-phase="ready"] { visibility: hidden; opacity: 0; }

.boot-grid {
  position: absolute;
  inset: -20%;
  opacity: 0.28;
  background-image:
    linear-gradient(rgba(34, 233, 255, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 233, 255, 0.12) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle, #000 0 30%, transparent 70%);
  transform: perspective(520px) rotateX(64deg) scale(1.45);
  animation: boot-grid-drift 7s linear infinite;
}

.boot-core {
  position: absolute;
  top: 38%;
  left: 50%;
  width: min(46vw, 430px);
  aspect-ratio: 1;
  opacity: 0.28;
  transform: translate(-50%, -50%);
}

.boot-core span {
  position: absolute;
  inset: calc(var(--ring, 0) * 11%);
  border: 1px solid rgba(34, 233, 255, 0.42);
  border-top-color: #d9fdff;
  border-radius: 50%;
  box-shadow: 0 0 32px rgba(34, 233, 255, 0.16);
  animation: core-rotate calc(9s - var(--ring, 0) * 2s) linear infinite;
}

.boot-core span:nth-child(2) { --ring: 1; animation-direction: reverse; }
.boot-core span:nth-child(3) { --ring: 2; }
.boot-sequence[data-phase="booting"] .boot-core { opacity: 0.86; }

.boot-console {
  z-index: 2;
  width: min(86vw, 560px);
  margin-top: min(34vh, 280px);
  text-align: center;
}

.boot-kicker,
.boot-status {
  color: var(--zero-muted);
  font: 0.62rem/1.5 var(--font-display);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.boot-console h1 {
  margin: 8px 0 18px;
  font: 200 clamp(1.25rem, 4vw, 2.3rem)/1.1 var(--font-display);
  letter-spacing: 0.24em;
  text-indent: 0.24em;
}

.boot-log {
  display: grid;
  min-height: 92px;
  margin: 0 auto 18px;
  padding: 0;
  color: #52717d;
  list-style: none;
  font: 0.61rem/1.65 var(--font-display);
  letter-spacing: 0.16em;
}

.boot-log li[data-status="ready"] {
  color: var(--zero-cyan);
  text-shadow: 0 0 9px rgba(34, 233, 255, 0.7);
}

.wake-button {
  min-height: 46px;
  padding: 0 24px;
  border: 1px solid rgba(34, 233, 255, 0.5);
  border-radius: 2px;
  color: var(--zero-cyan);
  background: rgba(9, 38, 50, 0.62);
  box-shadow: 0 0 28px rgba(34, 233, 255, 0.12), inset 0 0 20px rgba(34, 233, 255, 0.06);
  cursor: pointer;
  font: 600 0.68rem/1 var(--font-display);
  letter-spacing: 0.2em;
}

.wake-button:disabled { opacity: 0.34; cursor: wait; }
.sound-toggle { color: var(--zero-cyan); }

@keyframes boot-grid-drift { to { background-position: 48px 48px, 48px 48px; } }

button,
textarea { font: inherit; }

button:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--zero-cyan);
  outline-offset: 3px;
}

.chat-app {
  display: grid;
  grid-template-rows: auto auto auto minmax(180px, 1fr) auto auto auto;
  min-height: 100dvh;
  max-width: 1440px;
  margin: auto;
  overflow: hidden;
  border-inline: 1px solid rgba(146, 224, 242, 0.08);
  background: rgba(0, 4, 8, 0.72);
}

.app-header {
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  padding: 12px clamp(16px, 3vw, 42px);
  border-bottom: 1px solid var(--zero-line);
  background: rgba(1, 6, 11, 0.88);
  backdrop-filter: blur(18px);
}

.brand,
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand strong,
.brand span { display: block; }

.brand strong {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.34em;
}

.brand span {
  color: var(--zero-muted);
  font-size: 0.63rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.brand-mark {
  display: grid !important;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(var(--state-rgb), 0.5);
  border-radius: 50%;
  color: var(--state-color) !important;
  background: rgba(var(--state-rgb), 0.06);
  box-shadow: inset 0 0 20px rgba(var(--state-rgb), 0.18);
  font-size: 0.9rem !important;
  font-weight: 400;
  letter-spacing: 0.08em;
}

.availability {
  color: var(--zero-green);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.availability::before {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
  content: "";
}

.availability.is-checking { color: var(--zero-muted); }
.availability.is-unavailable { color: var(--zero-red); }

.icon-button,
.hud-toggle,
.send-button,
.approval-button {
  border: 1px solid var(--zero-line);
  border-radius: 3px;
  color: var(--zero-white);
  background: rgba(16, 37, 50, 0.44);
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.icon-button {
  width: 36px;
  height: 36px;
  font-size: 1.25rem;
  font-weight: 300;
}

.hud-toggle {
  min-height: 36px;
  padding: 0 13px;
  font-size: 0.63rem;
}

.hud-toggle[aria-expanded="true"] {
  border-color: rgba(var(--state-rgb), 0.72);
  color: var(--state-color);
  background: rgba(var(--state-rgb), 0.09);
  box-shadow: 0 0 18px rgba(var(--state-rgb), 0.12);
}

.zero-stage {
  --core-speed: 18s;
  position: relative;
  height: clamp(430px, 58vh, 720px);
  min-height: 430px;
  overflow: hidden;
  border-bottom: 1px solid var(--zero-line);
  background:
    linear-gradient(rgba(27, 101, 123, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27, 101, 123, 0.045) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(var(--state-rgb), 0.08), transparent 37%),
    #01060b;
  background-size: 46px 46px, 46px 46px, auto, auto;
  isolation: isolate;
  transition: --state-color 400ms ease;
}

.zero-stage::before,
.zero-stage::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  content: "";
}

.zero-stage::before {
  opacity: 0.48;
  background:
    radial-gradient(circle at 15% 25%, rgba(34, 233, 255, 0.5) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 18%, rgba(155, 98, 255, 0.5) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 75%, rgba(55, 255, 155, 0.4) 0 1px, transparent 2px),
    radial-gradient(circle at 28% 79%, rgba(255, 217, 91, 0.4) 0 1px, transparent 2px);
  background-size: 83px 97px, 113px 89px, 101px 127px, 137px 109px;
  animation: field-drift 24s linear infinite;
}

.zero-stage::after {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.38),
    transparent 12%,
    transparent 84%,
    rgba(0, 0, 0, 0.78)
  );
}

.zero-stage[data-core-state="working"] {
  --state-color: var(--zero-cyan);
  --state-rgb: 34, 233, 255;
  --core-speed: 7s;
}

.zero-stage[data-core-state="needs_approval"] {
  --state-color: var(--zero-gold);
  --state-rgb: 255, 217, 91;
  --core-speed: 11s;
}

.zero-stage[data-core-state="error"] {
  --state-color: var(--zero-red);
  --state-rgb: 255, 93, 114;
  --core-speed: 5s;
}

.zero-stage[data-core-state="completed"] {
  --state-color: var(--zero-green);
  --state-rgb: 55, 255, 155;
  --core-speed: 14s;
}

.zero-stage[data-core-state="disconnected"] {
  --state-color: #607984;
  --state-rgb: 96, 121, 132;
  --core-speed: 28s;
}

.zero-telemetry {
  position: absolute;
  z-index: 5;
  top: 17px;
  right: clamp(16px, 3vw, 38px);
  left: clamp(16px, 3vw, 38px);
  display: flex;
  justify-content: space-between;
  color: rgba(189, 225, 233, 0.48);
  font-family: var(--font-display);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
}

.neural-field {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 5px rgba(var(--state-rgb), 0.2));
}

.neural-links path {
  fill: none;
  stroke: rgba(var(--state-rgb), 0.38);
  stroke-dasharray: 3 11;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  animation: signal-flow 6s linear infinite;
}

.neural-links .link-secondary {
  opacity: 0.38;
  stroke-dasharray: 1 17;
  animation-duration: 11s;
  animation-direction: reverse;
}

.neural-points circle {
  fill: var(--state-color);
  filter: drop-shadow(0 0 6px var(--state-color));
  transform-box: fill-box;
  transform-origin: center;
  animation: node-pulse 3.2s ease-in-out infinite;
}

.neural-points circle:nth-child(2n) { animation-delay: -1.1s; }
.neural-points circle:nth-child(3n) { animation-delay: -2.2s; }

.zero-core {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: clamp(230px, 25vw, 360px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}

.zero-core::before {
  position: absolute;
  inset: 21%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(239, 253, 255, 0.93) 0 2%,
    rgba(var(--state-rgb), 0.72) 5%,
    rgba(var(--state-rgb), 0.18) 31%,
    transparent 67%
  );
  box-shadow:
    0 0 45px rgba(var(--state-rgb), 0.52),
    0 0 110px rgba(var(--state-rgb), 0.2);
  content: "";
  animation: core-breathe 4.2s ease-in-out infinite;
}

.core-orbit,
.core-reactor,
.core-particles {
  position: absolute;
  border-radius: 50%;
}

.core-orbit {
  inset: 0;
  border: 1px solid rgba(var(--state-rgb), 0.34);
  border-top-color: var(--state-color);
  border-bottom-color: transparent;
  box-shadow: inset 0 0 28px rgba(var(--state-rgb), 0.07);
  animation: core-rotate var(--core-speed) linear infinite;
}

.orbit-two {
  inset: 9%;
  border-style: dashed;
  opacity: 0.76;
  animation-duration: calc(var(--core-speed) * 0.72);
  animation-direction: reverse;
}

.orbit-three {
  inset: 18%;
  border-right-color: transparent;
  transform: rotate(36deg);
  animation-duration: calc(var(--core-speed) * 0.46);
}

.core-reactor {
  inset: 31%;
  border: 1px solid rgba(230, 251, 255, 0.7);
  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(var(--state-rgb), 0.55) 0 2deg,
      transparent 2deg 12deg
    );
  mask: radial-gradient(circle, transparent 0 44%, #000 46% 100%);
  animation: core-rotate calc(var(--core-speed) * 0.35) linear infinite reverse;
}

.core-particles {
  inset: -8%;
  opacity: 0.85;
  background:
    radial-gradient(circle at 50% 0, var(--state-color) 0 2px, transparent 3px),
    radial-gradient(circle at 86% 18%, var(--state-color) 0 1px, transparent 2px),
    radial-gradient(circle at 100% 56%, var(--state-color) 0 2px, transparent 3px),
    radial-gradient(circle at 21% 91%, var(--state-color) 0 1px, transparent 2px),
    radial-gradient(circle at 0 42%, var(--state-color) 0 2px, transparent 3px);
  filter: drop-shadow(0 0 7px var(--state-color));
  animation: core-rotate calc(var(--core-speed) * 1.5) linear infinite;
}

.core-identity {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  display: grid;
  min-width: 220px;
  place-items: center;
  pointer-events: none;
  transform: translate(-50%, -50%);
  text-align: center;
}

.core-kicker,
.core-state {
  color: rgba(224, 248, 252, 0.62);
  font-family: var(--font-display);
  font-size: clamp(0.48rem, 0.75vw, 0.62rem);
  letter-spacing: 0.24em;
}

.core-identity strong {
  margin: 7px 0 5px;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 3vw, 2.7rem);
  font-weight: 200;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-shadow: 0 0 18px rgba(var(--state-rgb), 0.65);
}

.core-state {
  color: var(--state-color);
  text-shadow: 0 0 9px rgba(var(--state-rgb), 0.9);
}

.system-region {
  --region-color: var(--zero-cyan);
  position: absolute;
  z-index: 3;
  display: grid;
  width: clamp(118px, 13vw, 170px);
  padding: 10px 13px 9px;
  border: 1px solid rgba(180, 225, 235, 0.17);
  border-left: 2px solid var(--region-color);
  background: linear-gradient(90deg, rgba(6, 17, 26, 0.88), rgba(6, 17, 26, 0.26));
  box-shadow: -8px 0 22px color-mix(in srgb, var(--region-color) 12%, transparent);
  backdrop-filter: blur(5px);
}

.system-region::before {
  position: absolute;
  top: 50%;
  left: -6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--region-color);
  box-shadow: 0 0 12px var(--region-color);
  content: "";
  transform: translateY(-50%);
  animation: node-pulse 3s ease-in-out infinite;
}

.system-region strong {
  font-family: var(--font-display);
  font-size: clamp(0.62rem, 1vw, 0.76rem);
  font-weight: 500;
  letter-spacing: 0.18em;
}

.system-region small,
.region-index {
  color: var(--zero-muted);
  font-size: clamp(0.48rem, 0.7vw, 0.58rem);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.region-index {
  position: absolute;
  top: -14px;
  left: 0;
  color: color-mix(in srgb, var(--region-color) 68%, white);
}

.region-executive { --region-color: var(--zero-violet); top: 14%; left: 8%; }
.region-memory { --region-color: var(--zero-cyan); top: 45%; left: 4%; }
.region-language { --region-color: var(--zero-blue); bottom: 12%; left: 9%; }
.region-perception { --region-color: var(--zero-green); top: 14%; right: 8%; }
.region-action { --region-color: var(--zero-gold); top: 45%; right: 4%; }
.region-autonomy { --region-color: var(--zero-red); right: 9%; bottom: 12%; }

.zero-stage[data-core-state="working"] .region-action,
.zero-stage[data-core-state="needs_approval"] .region-executive,
.zero-stage[data-core-state="error"] .region-autonomy {
  border-color: var(--state-color);
  background: rgba(var(--state-rgb), 0.1);
  box-shadow: 0 0 28px rgba(var(--state-rgb), 0.16);
}

.zero-caption {
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: 13px;
  left: 0;
  margin: 0;
  color: rgba(194, 226, 233, 0.48);
  font-family: var(--font-display);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-align: center;
  text-transform: uppercase;
}

.hud-panel {
  max-height: min(68dvh, 700px);
  padding: clamp(16px, 2.6vw, 36px);
  overflow-y: auto;
  border-bottom: 1px solid var(--zero-line);
  background:
    linear-gradient(120deg, rgba(9, 25, 37, 0.97), rgba(2, 8, 14, 0.97));
}

.hud-header,
.hud-card-top,
.approval-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hud-header h2,
.hud-columns h3,
.hud-header p,
.hud-card p { margin: 0; }

.hud-header h2 {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.hud-header p,
.hud-updated,
.hud-meta {
  color: var(--zero-muted);
  font-size: 0.64rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.hud-columns {
  display: grid;
  gap: 22px;
  margin-top: 20px;
}

.hud-columns h3 {
  margin-bottom: 10px;
  color: #b9d0d8;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.hud-list { display: grid; gap: 9px; }

.hud-card {
  padding: 14px;
  border: 1px solid var(--zero-line);
  border-left: 2px solid #647d87;
  border-radius: 2px;
  background: rgba(8, 22, 32, 0.68);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}

.hud-card.is-running,
.approval-card.is-pending { border-left-color: var(--zero-gold); }
.hud-card.is-completed,
.approval-card.is-approved { border-left-color: var(--zero-green); }
.hud-card.is-failed,
.approval-card.is-rejected,
.approval-card.risk-critical { border-left-color: var(--zero-red); }
.hud-card-top strong { overflow-wrap: anywhere; font-size: 0.84rem; }

.status-badge {
  flex: none;
  padding: 3px 7px;
  border: 1px solid var(--zero-line);
  border-radius: 1px;
  color: #acc3cb;
  background: rgba(255, 255, 255, 0.025);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hud-detail,
.hud-consequence,
.hud-error { margin-top: 8px !important; font-size: 0.8rem; }
.hud-consequence { color: var(--zero-gold); }
.hud-error { color: var(--zero-red); }

.tool-progress {
  width: 100%;
  height: 3px;
  border: 0;
  accent-color: var(--zero-cyan);
}

.approval-actions { justify-content: flex-end; margin-top: 12px; }
.approval-button { min-height: 34px; padding: 0 12px; font-size: 0.62rem; }
.approval-button.reject { color: var(--zero-red); }
.approval-button.approve { border-color: rgba(55, 255, 155, 0.42); color: var(--zero-green); }

.empty-state {
  margin: 0;
  padding: 16px;
  color: var(--zero-muted);
  border: 1px dashed var(--zero-line);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
}

.hud-notice { margin: 12px 0 0; }

.conversation {
  min-height: 180px;
  max-height: 42dvh;
  overflow-y: auto;
  padding: 24px clamp(16px, 6vw, 80px);
  background: rgba(0, 5, 9, 0.78);
}

.message {
  display: flex;
  flex-direction: column;
  max-width: min(78%, 720px);
  margin: 0 0 18px;
}

.message.user-message { align-items: flex-end; margin-left: auto; }

.message-label {
  margin: 0 3px 5px;
  color: var(--zero-muted);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.bubble {
  padding: 11px 14px;
  overflow-wrap: anywhere;
  border: 1px solid var(--zero-line);
  border-radius: 2px 12px 12px;
  color: #d9e8ec;
  background: rgba(8, 22, 32, 0.74);
  white-space: pre-wrap;
}

.user-message .bubble {
  border-color: rgba(34, 233, 255, 0.28);
  border-radius: 12px 2px 12px 12px;
  color: #eaffff;
  background: rgba(12, 68, 81, 0.45);
}

.notice {
  margin: 0 clamp(16px, 6vw, 80px) 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 93, 114, 0.24);
  border-radius: 2px;
  color: #ffb0bb;
  background: rgba(82, 16, 27, 0.34);
  font-size: 0.78rem;
}

.loading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 clamp(16px, 6vw, 80px) 10px;
  color: var(--zero-muted);
  font-size: 0.76rem;
}

.spinner {
  width: 14px;
  height: 14px;
  border: 1px solid var(--zero-line);
  border-top-color: var(--zero-cyan);
  border-radius: 50%;
  animation: core-rotate 0.8s linear infinite;
}

.composer {
  display: flex;
  gap: 9px;
  padding: 12px clamp(16px, 6vw, 80px) max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--zero-line);
  background: rgba(1, 7, 12, 0.96);
}

.composer textarea {
  flex: 1;
  max-height: 160px;
  padding: 10px 12px;
  resize: none;
  border: 1px solid var(--zero-line-bright);
  border-radius: 2px;
  color: var(--zero-white);
  background: rgba(6, 19, 29, 0.76);
}

.composer textarea::placeholder { color: #56717c; }
.send-button { padding: 0 18px; color: var(--zero-cyan); }

.send-button:disabled,
.icon-button:disabled,
.approval-button:disabled { cursor: not-allowed; opacity: 0.42; }

.privacy-note {
  margin: 0;
  padding: 0 16px 11px;
  color: #4e6872;
  background: rgba(1, 7, 12, 0.96);
  font-size: 0.61rem;
  text-align: center;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes core-rotate { to { transform: rotate(360deg); } }
@keyframes signal-flow { to { stroke-dashoffset: -84; } }
@keyframes field-drift { to { background-position: 83px 97px, -113px 89px, 101px -127px, -137px -109px; } }
@keyframes node-pulse {
  0%, 100% { opacity: 0.36; transform: scale(0.72); }
  50% { opacity: 1; transform: scale(1.24); }
}
@keyframes core-breathe {
  0%, 100% { opacity: 0.74; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1.06); }
}

@media (min-width: 760px) {
  .hud-columns { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  .chat-app { grid-template-rows: auto auto auto minmax(160px, 1fr) auto auto auto; }
  .zero-stage { height: 610px; min-height: 610px; }
  .neural-field { opacity: 0.35; transform: scale(1.45); }
  .zero-core { top: 38%; width: 240px; }
  .core-identity { top: 38%; }
  .system-region {
    width: calc(50% - 22px);
    padding: 8px 10px 7px;
  }
  .region-executive { top: auto; right: auto; bottom: 128px; left: 14px; }
  .region-memory { top: auto; right: 14px; bottom: 128px; left: auto; }
  .region-language { right: auto; bottom: 76px; left: 14px; }
  .region-perception { top: auto; right: 14px; bottom: 76px; }
  .region-action { top: auto; right: auto; bottom: 24px; left: 14px; }
  .region-autonomy { right: 14px; bottom: 24px; }
  .zero-caption { display: none; }
}

@media (max-width: 560px) {
  .availability { display: none; }
  .brand span { display: none; }
  .hud-toggle { padding-inline: 9px; }
  .message { max-width: 90%; }
}

@media (prefers-reduced-motion: reduce) {
  .boot-grid,
  .boot-core span {
    animation: none !important;
  }
  .boot-sequence { transition-duration: 1ms; }
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}