@import url('./glass-omni.css');

:root {
  --ink: #f4efe6;
  --dim: #c8beb0;
  --faint: #8f877d;
  --glass: rgba(20, 22, 30, 0.62);
  --edge: rgba(255, 244, 225, 0.16);
  --noema: #bfe3ff;
  --warm: #ffd49a;
  --bad: #ffb4a8;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1a1b24; color: var(--ink); font: 15px/1.45 ui-serif, Georgia, "Iowan Old Style", serif; }
canvas#world { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; touch-action: none; cursor: grab; }
canvas#world.over-thing { cursor: pointer; }
canvas#world.carrying { cursor: grabbing; }
button { font: inherit; color: var(--ink); background: var(--glass); border: 1px solid var(--edge); border-radius: 12px; padding: 7px 14px; cursor: pointer; backdrop-filter: blur(10px); }
button:hover { border-color: rgba(255, 244, 225, 0.4); }
button:focus-visible, input:focus-visible { outline: 2px solid var(--noema); outline-offset: 2px; }

.glass-surface { position: fixed; inset: 0; pointer-events: none; z-index: 6; }
.glass-node {
  position: fixed;
  left: 0;
  top: 0;
  transform: translate3d(var(--gx, 16px), var(--gy, 16px), 0) rotate(var(--gtilt, 0deg)) scale(var(--gscale, 1));
  transform-origin: center center;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font: 500 13px/1.2 ui-sans-serif, system-ui, -apple-system, sans-serif;
  letter-spacing: 0.01em;
  color: var(--ink);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.13) 0%, rgba(20, 24, 34, 0.62) 54%, rgba(191, 227, 255, 0.09) 100%);
  border: 1px solid rgba(191, 227, 255, 0.28);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.44), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  transition: box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
  will-change: transform;
  white-space: nowrap;
}
.glass-node::after {
  content: "⋮";
  font-size: 11px;
  line-height: 1;
  color: var(--dim);
  opacity: 0.42;
  margin-left: 2px;
  transition: opacity 150ms ease, color 150ms ease;
}
.glass-node:hover {
  border-color: rgba(255, 248, 235, 0.45);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), 0 0 18px rgba(191, 227, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.glass-node:hover::after { opacity: 0.82; color: var(--ink); }
.glass-node.glass-dragging {
  cursor: grabbing;
  z-index: 30;
  --gscale: 1.06;
  border-color: rgba(191, 227, 255, 0.65);
  box-shadow: 0 26px 56px rgba(0, 0, 0, 0.64), 0 0 24px rgba(191, 227, 255, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: none;
}
.glass-clock {
  font-variant-numeric: tabular-nums;
}
.glass-clock .clock-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--warm);
  box-shadow: 0 0 10px var(--warm);
  animation: clock-pulse 2s ease-in-out infinite;
}
.glass-clock time { font: 600 13px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.04em; color: var(--ink); }
.glass-clock .clock-sub { font: 600 10px/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: 0.06em; color: var(--dim); text-transform: uppercase; }
@keyframes clock-pulse { 0%, 100% { opacity: 0.95; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.82); } }

/* ---------- Glass Volume widget (Dee: "treat it like how i did the clock") ---------- */
.glass-volume {
  position: relative;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.glass-volume .volume-icon {
  font-size: 13px;
  line-height: 1;
}
.glass-volume .volume-level {
  font: 600 12px/1 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.glass-volume[data-muted="true"] .volume-level {
  color: #fca5a5;
  font-style: italic;
}
.volume-popup {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 170px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(16, 20, 30, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(24px);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.volume-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--dim);
}
.volume-popup input[type="range"] {
  width: 100%;
  accent-color: var(--warm);
  cursor: pointer;
}

/* ---------- Glass Cards & Stacks ---------- */
.glass-card {
  position: fixed;
  left: 0;
  top: 0;
  transform: translate3d(var(--cx, 20px), var(--cy, 62px), 0) rotate(var(--ctilt, 0deg)) scale(var(--cscale, 1));
  transform-origin: top center;
  pointer-events: auto;
  width: min(360px, calc(100vw - 32px));
  max-height: calc(100vh - 260px);
  overflow: auto;
  background: linear-gradient(155deg, rgba(28, 32, 44, 0.84) 0%, rgba(16, 19, 28, 0.78) 100%);
  border: 1px solid rgba(255, 244, 225, 0.22);
  border-radius: 20px;
  padding: 14px 16px;
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  will-change: transform;
  transition: box-shadow 180ms ease, border-color 180ms ease;
}
.glass-card.card-dragging {
  z-index: 28 !important;
  --cscale: 1.02;
  border-color: rgba(191, 227, 255, 0.62);
  box-shadow: 0 32px 68px rgba(0, 0, 0, 0.68), 0 0 28px rgba(191, 227, 255, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.38);
  transition: none;
}
.glass-card[data-stack-near="true"] {
  border-color: var(--warm);
  box-shadow: 0 24px 58px rgba(0, 0, 0, 0.6), 0 0 28px rgba(255, 212, 154, 0.42), inset 0 0 18px rgba(255, 212, 154, 0.16);
}
.glass-card[data-stacked="true"] {
  box-shadow:
    0 6px 0 -2px rgba(24, 28, 40, 0.88),
    0 6px 0 -1px rgba(255, 212, 154, 0.28),
    0 12px 0 -4px rgba(18, 22, 32, 0.82),
    0 12px 0 -3px rgba(191, 227, 255, 0.22),
    0 26px 58px rgba(0, 0, 0, 0.58),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
}
.glass-card-head {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  margin: -4px -4px 10px;
  padding: 6px 6px 8px;
  border-bottom: 1px solid rgba(255, 244, 225, 0.1);
}
.glass-card-head:active { cursor: grabbing; }
.glass-card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.glass-card-title-row h2 {
  margin: 0;
  font: 600 15px/1.25 ui-serif, Georgia, "Iowan Old Style", serif;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px;
}
.card-close {
  padding: 4px 10px;
  font: 500 12px/1.2 ui-sans-serif, system-ui, sans-serif;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--dim);
}
.card-close:hover { color: var(--ink); border-color: rgba(255, 244, 225, 0.42); }
.glass-drop-target.glass-trash {
  position: fixed;
  right: 28px;
  bottom: 28px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(26, 20, 24, 0.72);
  border: 1px dashed rgba(255, 180, 168, 0.35);
  color: var(--bad);
  font: 500 12px/1.2 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px) scale(0.94);
  transition: opacity 200ms ease, transform 200ms ease, border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
  z-index: 25;
}
body.card-dragging-active .glass-drop-target.glass-trash {
  opacity: 0.82;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.glass-drop-target.glass-trash[data-hover="true"] {
  opacity: 1;
  background: rgba(45, 18, 22, 0.88);
  border-color: var(--bad);
  border-style: solid;
  box-shadow: 0 14px 34px rgba(255, 100, 80, 0.32), 0 0 20px rgba(255, 180, 168, 0.45);
  transform: scale(1.08);
}
.glass-card-deck-indicator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 600 11px/1.1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.03em;
  color: var(--warm);
  background: rgba(255, 212, 154, 0.12);
  border: 1px solid rgba(255, 212, 154, 0.35);
  border-radius: 999px;
  padding: 3px 8px;
  margin-bottom: 6px;
  cursor: pointer;
  user-select: none;
}
.glass-card-deck-indicator:hover {
  background: rgba(255, 212, 154, 0.22);
  border-color: rgba(255, 212, 154, 0.65);
}

.strata .hint, .strata .fine { margin: 0 0 10px; color: var(--dim); font-size: 13px; }
.strata .fine { font: 11px/1.4 ui-monospace, Menlo, monospace; color: var(--faint); overflow-wrap: anywhere; margin: 10px 0 0; }
.strata ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.strata li button { width: 100%; text-align: left; border-radius: 10px; display: flex; justify-content: space-between; gap: 10px; }
.strata li button small { color: var(--faint); }
.strata li button[aria-current="true"] { border-color: var(--warm); }

.toast, .banner { position: fixed; left: 50%; transform: translateX(-50%); top: 16px; max-width: min(620px, calc(100vw - 32px)); background: var(--glass); border: 1px solid var(--edge); border-radius: 14px; padding: 9px 14px; backdrop-filter: blur(12px); font-size: 14px; z-index: 7; }
.toast { border-color: rgba(191, 227, 255, 0.45); }
.banner { top: 60px; display: flex; gap: 10px; align-items: center; }
.banner.bad { border-color: var(--bad); color: var(--bad); flex-direction: column; align-items: flex-start; }

/* ---------- Card-Wrapped Omnibar & Omnicard ---------- */
.talk.omni-chassis {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  width: min(740px, calc(100vw - 32px));
  z-index: 8;
}
.omni-chassis > .card {
  display: grid;
  gap: 8px;
  background: linear-gradient(165deg, rgba(26, 30, 42, 0.78) 0%, rgba(15, 17, 25, 0.84) 100%);
  border: 1px solid rgba(255, 244, 225, 0.22);
  border-radius: 26px;
  padding: 13px 16px 12px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
}
.card .who { display: flex; align-items: center; gap: 8px; font: 600 12px/1.2 ui-sans-serif, system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--noema); }
.omni-chamber-tag {
  font: 500 11px/1 ui-serif, Georgia, serif;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--warm);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 212, 154, 0.1);
  border: 1px solid rgba(255, 212, 154, 0.24);
}
.card .rules { margin-left: auto; text-transform: none; letter-spacing: 0; color: var(--faint); font: 400 11px/1.2 ui-sans-serif, system-ui, sans-serif; }
.omni-link {
  padding: 3px 9px;
  border-radius: 999px;
  font: 500 11px/1.2 ui-sans-serif, system-ui, sans-serif;
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--dim);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 244, 225, 0.16);
}
.omni-link[aria-expanded="true"] { color: var(--warm); border-color: rgba(255, 212, 154, 0.55); background: rgba(255, 212, 154, 0.12); }
.card .orb { width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle, #fff 0, var(--noema) 45%, rgba(191, 227, 255, 0) 75%); box-shadow: 0 0 10px var(--noema); }
.card p { margin: 0; }
.card #line { font-size: 15px; line-height: 1.42; overflow-wrap: anywhere; }
.card.asking { border-color: rgba(255, 212, 154, 0.55); }
.card.thinking #line::after { content: ""; display: inline-block; width: 1.2em; text-align: left; animation: dots 1.2s steps(4, end) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.card .context { color: var(--dim); font-size: 12.5px; min-height: 1.1em; }
.card .context b { color: var(--warm); font-weight: 600; }

/* ---------- Inspect & Share drawer inside the Omnicard ---------- */
.omni-inspect {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(8, 10, 16, 0.56);
  border: 1px solid rgba(255, 244, 225, 0.14);
  font: 12px/1.4 ui-sans-serif, system-ui, sans-serif;
}
.omni-dl {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.omni-dl > div {
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 244, 225, 0.08);
}
.omni-dl dt { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint); margin-bottom: 2px; }
.omni-dl dd { margin: 0; color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.omni-share-panel { display: grid; gap: 6px; }
.omni-share-panel .small { font-size: 11px; color: var(--dim); }
.omni-share-panel textarea {
  width: 100%;
  height: 58px;
  resize: none;
  padding: 7px 9px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 244, 225, 0.14);
  color: var(--ink);
  font: 11px/1.35 ui-monospace, Menlo, monospace;
}
.share-row { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- Dynamic Contextual Pills & Card Seeds ---------- */
.omni-pills-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 2px;
}
.omni-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.omni-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  font: 500 12px/1.2 ui-sans-serif, system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 244, 225, 0.18);
  white-space: nowrap;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.omni-pill:hover { border-color: rgba(255, 244, 225, 0.42); background: rgba(255, 255, 255, 0.1); }
.omni-pill:disabled { opacity: 0.48; pointer-events: none; }
.omni-pill[data-sigil]::before {
  content: attr(data-sigil);
  font-size: 11px;
  color: var(--noema);
}
.omni-pill.card-seed { cursor: grab; }
.omni-pill.card-seed:active { cursor: grabbing; }
.omni-pill[aria-expanded="true"] {
  border-color: rgba(255, 212, 154, 0.65);
  background: rgba(255, 212, 154, 0.16);
  color: var(--warm);
}
.omni-pill[aria-expanded="true"]::before { color: var(--warm); }

.tray { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 1px; scrollbar-width: thin; }
.tray button {
  flex: none;
  padding: 4px 10px;
  border-radius: 999px;
  font: 500 12px/1.2 ui-sans-serif, system-ui, sans-serif;
  background: rgba(191, 227, 255, 0.07);
  border: 1px solid rgba(191, 227, 255, 0.2);
  touch-action: none;
}
.tray button.held { border-color: var(--noema); color: var(--noema); background: rgba(191, 227, 255, 0.18); }

/* ---------- Embedded Omnibar inside the Omnicard ---------- */
#say.embedded-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px 5px 14px;
  border-radius: 999px;
  background: rgba(8, 10, 16, 0.62);
  border: 1px solid rgba(255, 244, 225, 0.18);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.45);
}
#say.embedded-bar:focus-within {
  border-color: rgba(191, 227, 255, 0.55);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.45), 0 0 0 2px rgba(191, 227, 255, 0.15);
}
#say.embedded-bar input {
  flex: 1;
  min-width: 0;
  font: 14px/1.35 ui-sans-serif, system-ui, sans-serif;
  color: var(--ink);
  background: transparent;
  border: 0;
  padding: 6px 4px;
  outline: none;
}
#say.embedded-bar input::placeholder { color: var(--faint); }
.bar-chip {
  padding: 5px 11px;
  border-radius: 999px;
  font: 500 12px/1.2 ui-sans-serif, system-ui, sans-serif;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 244, 225, 0.16);
  white-space: nowrap;
}
.bar-send {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 700 14px/1 ui-sans-serif, system-ui, sans-serif;
  background: linear-gradient(145deg, rgba(191, 227, 255, 0.28), rgba(255, 212, 154, 0.22));
  border: 1px solid rgba(255, 244, 225, 0.34);
  color: var(--ink);
}
#speak[aria-pressed="true"] { border-color: var(--warm); color: var(--warm); box-shadow: 0 0 18px rgba(255, 212, 154, 0.35); }
#her-voice[aria-pressed="true"] { border-color: var(--noema); color: var(--noema); }

.hand { position: fixed; left: 0; top: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 1.5px solid rgba(191, 227, 255, 0.9); box-shadow: 0 0 16px rgba(191, 227, 255, 0.7), inset 0 0 8px rgba(191, 227, 255, 0.5); pointer-events: none; will-change: transform; }
.hand span { position: absolute; left: 30px; top: 3px; font: 11px/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: 0.05em; color: var(--noema); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); white-space: nowrap; }
.pointing {
  position: fixed;
  left: 0;
  top: 0;
  padding: 6px 12px;
  font: 12px/1.3 ui-sans-serif, system-ui, sans-serif;
  color: var(--ink);
  background: rgba(10, 14, 22, 0.88);
  border: 1px solid rgba(124, 227, 255, 0.4);
  border-radius: 10px;
  pointer-events: none;
  transform: translate(16px, 16px);
  white-space: normal;
  max-width: 300px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 16px rgba(124, 227, 255, 0.15);
  backdrop-filter: blur(14px);
  z-index: 100;
  transition: opacity 120ms ease, transform 120ms cubic-bezier(0.16, 1, 0.3, 1);
}

.narrative-reticle {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.narrative-sigil {
  font-size: 14px;
  line-height: 1.2;
  color: #7ce3ff;
  filter: drop-shadow(0 0 4px rgba(124, 227, 255, 0.6));
  flex-shrink: 0;
}

.narrative-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.narrative-headline {
  font: 600 12px/1.25 ui-sans-serif, system-ui, sans-serif;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.narrative-sub {
  font: italic 11px/1.3 ui-serif, Georgia, serif;
  color: rgba(210, 230, 255, 0.8);
}

.pad { position: fixed; left: 20px; bottom: 20px; width: 92px; height: 92px; border-radius: 50%; background: var(--glass); border: 1px solid var(--edge); backdrop-filter: blur(12px); touch-action: none; user-select: none; display: grid; place-items: center; cursor: grab; box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.35); z-index: 7; }
.pad.active { border-color: var(--warm); cursor: grabbing; }
.pad .knob { width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff6e5, var(--warm) 65%, rgba(255, 212, 154, 0.25)); border: 1px solid rgba(255, 244, 225, 0.55); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45), 0 0 12px rgba(255, 212, 154, 0.35); pointer-events: none; will-change: transform; }
.pad .pad-label { position: absolute; bottom: -18px; font: 11px/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); pointer-events: none; }

.proof { position: fixed; right: 16px; top: 64px; width: min(360px, calc(100vw - 32px)); max-height: 60vh; overflow: auto; background: rgba(12, 14, 20, 0.86); border: 1px solid var(--edge); border-radius: 14px; padding: 12px 14px; font: 12px/1.45 ui-monospace, Menlo, monospace; z-index: 9; }
.proof h3 { margin: 0 0 6px; font: 600 13px/1.3 ui-sans-serif, system-ui, sans-serif; }
.proof li { margin: 2px 0; }
.proof .ok { color: #b6f0b0; }
.proof .no { color: var(--bad); }
.prove-hand { position: fixed; left: 0; top: 0; width: 18px; height: 18px; margin: -2px 0 0 -2px; pointer-events: none; transition: transform 380ms cubic-bezier(.2, .7, .2, 1); z-index: 10; }
.prove-hand::before { content: ""; position: absolute; inset: 0; clip-path: polygon(0 0, 100% 62%, 52% 62%, 30% 100%); background: #fff; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7)); }
.prove-hand.press::after { content: ""; position: absolute; left: -12px; top: -12px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--warm); animation: ripple 420ms ease-out forwards; }
@keyframes ripple { from { transform: scale(0.4); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }

@media (max-width: 900px) {
  .omni-chassis > .card { max-height: min(44dvh, 340px); overflow-y: auto; }
  .talk.omni-chassis { bottom: calc(16px + var(--keyboard-inset, 0px)); }
  .pad { bottom: calc(var(--talk-height, 240px) + 30px + var(--keyboard-inset, 0px)); left: 16px; width: 82px; height: 82px; }
}
@media (prefers-reduced-motion: reduce) { .prove-hand { transition: none; } }

.you-tag { position: fixed; left: 0; top: 0; padding: 2px 8px; margin: -24px 0 0 0; transform-origin: 0 0; font: 600 11px/1.4 ui-sans-serif, system-ui, sans-serif; letter-spacing: 0.04em; color: #2a1e10; background: rgba(255, 212, 154, 0.92); border-radius: 999px; pointer-events: none; white-space: nowrap; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); translate: -50% 0; }
.controls.glass-card { width: min(680px, calc(100vw - 32px)); }
.controls .columns { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.controls dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 13px; }
.controls dt { color: var(--warm); font: 600 12px/1.5 ui-sans-serif, system-ui, sans-serif; white-space: nowrap; }
.controls dt.group { grid-column: 1 / -1; color: var(--ink); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 2px; }
.controls dd { margin: 0; color: var(--dim); }
.controls .lead { margin: 0 0 12px; color: var(--ink); font-size: 13px; }
@media (max-width: 640px) { .controls .columns { grid-template-columns: 1fr; } .omni-dl { grid-template-columns: 1fr; } }
.mic.on { background: rgba(255, 212, 154, 0.92); color: #2a1e10; }
.mic.on::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: #c0392b; animation: mic-live 1.6s ease-in-out infinite; }
@keyframes mic-live { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .mic.on::before { animation: none; } }
.window-tag { position: fixed; left: 0; top: 0; translate: -50% -100%; display: grid; justify-items: center; gap: 1px; padding: 4px 10px; border-radius: 10px; background: rgba(20, 22, 34, 0.62); border: 1px solid rgba(255, 255, 255, 0.18); color: var(--ink); font: 12px/1.3 ui-sans-serif, system-ui, sans-serif; pointer-events: none; white-space: nowrap; backdrop-filter: blur(6px); }
.window-tag b { font: 600 13px/1.3 ui-serif, Georgia, serif; letter-spacing: 0.04em; color: #ffe2b8; }
.window-tag span { color: var(--dim); font-size: 11px; }
.window-tag.closed b { color: #cfd3dc; }

.peer-tag {
  position: fixed; left: 0; top: 0; translate: -50% -100%;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  pointer-events: auto; cursor: pointer; user-select: none; z-index: 15;
  transition: opacity 0.15s ease;
}
.peer-tag-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(18, 22, 32, 0.88); border: 1px solid rgba(255, 255, 255, 0.22);
  color: #f0f2f5; font: 600 11px/1.4 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.03em; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  white-space: nowrap; transition: all 0.15s ease;
}
.peer-tag-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #34d399; box-shadow: 0 0 6px rgba(52, 211, 153, 0.8);
}
.peer-tag:hover .peer-tag-badge,
.peer-tag.focused .peer-tag-badge {
  border-color: rgba(147, 197, 253, 0.85); background: rgba(30, 42, 60, 0.95);
  box-shadow: 0 0 16px rgba(147, 197, 253, 0.4); color: #ffffff;
}
.peer-tag.focused .peer-tag-badge::after {
  content: '· focused'; font-weight: 400; font-size: 10px; color: #93c5fd; margin-left: 2px;
}
.peer-tag-speech {
  max-width: 220px; padding: 4px 9px; border-radius: 8px;
  background: rgba(15, 23, 42, 0.94); border: 1px solid rgba(147, 197, 253, 0.45);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6); font: 11px/1.3 ui-sans-serif, system-ui, sans-serif;
  color: #f1f5f9; text-align: center; white-space: normal; word-break: break-word;
  pointer-events: none; animation: peerFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.peer-tag-typing {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(15, 23, 42, 0.94); border: 1px solid rgba(147, 197, 253, 0.45);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6); pointer-events: none;
  animation: peerFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.peer-tag-typing.speaking {
  border-color: rgba(52, 211, 153, 0.6);
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.3);
}
.peer-tag-typing .typing-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: #93c5fd; animation: typingBounce 1.3s infinite ease-in-out both;
}
.peer-tag-typing.speaking .typing-dot {
  background: #34d399; animation: voicePulse 0.9s infinite ease-in-out both;
}
.peer-tag-typing .typing-dot:nth-child(1) { animation-delay: -0.32s; }
.peer-tag-typing .typing-dot:nth-child(2) { animation-delay: -0.16s; }
.peer-tag-typing .typing-dot:nth-child(3) { animation-delay: 0s; }

@keyframes typingBounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.35; }
  40% { transform: scale(1.2); opacity: 1; }
}

@keyframes voicePulse {
  0%, 100% { transform: scaleY(0.7); opacity: 0.4; }
  50% { transform: scaleY(1.9); opacity: 1; }
}

@keyframes peerFadeIn {
  from { opacity: 0; transform: translateY(4px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.focused-peer-pill {
  color: #93c5fd; font-weight: 600; background: rgba(59, 130, 246, 0.16);
  border: 1px solid rgba(147, 197, 253, 0.3); padding: 1px 7px;
  border-radius: 999px; margin: 0 2px; display: inline-block;
}
.peer-unfocus {
  color: var(--dim); text-decoration: underline; cursor: pointer;
  background: none; border: none; font: inherit; padding: 0; margin-left: 4px;
}
.peer-unfocus:hover { color: var(--warm); }

.blueprints.glass-card { width: min(500px, calc(100vw - 32px)); max-height: calc(100dvh - var(--talk-height, 240px) - 86px); }
.blueprints p { overflow-wrap: anywhere; white-space: pre-wrap; line-height: 1.5; font-size: 13px; }
.blueprints ul { list-style: none; padding: 0; display: grid; gap: 12px; }
.blueprints li { border-bottom: 1px solid var(--edge); padding-bottom: 10px; }
.blueprints li > button { text-align: left; white-space: normal; }
.blueprints label { display: grid; gap: 5px; font-size: 13px; margin: 10px 0; }
.blueprints input, .blueprints textarea, .blueprints select { width: 100%; box-sizing: border-box; background: #171b25; color: var(--ink); border: 1px solid var(--edge); border-radius: 8px; padding: 9px; font: inherit; }
.blueprints input[type=file] { font-size: 12px; }
.blueprints details { margin: 12px 0; }
.blueprints summary { cursor: pointer; color: var(--warm); }
.blueprints .fine { color: var(--dim); font-size: 12px; }
.blueprints #blueprint-draft { border: 1px solid var(--warm); border-radius: 10px; padding: 10px; }
.blueprints button { max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .glass-node { font-size: 11px; padding: 5px 9px; gap: 5px; }
  .toast { top: 54px; max-height: 48px; overflow: hidden; pointer-events: none; z-index: 6; }
}

/* ---------- Shapeshift & Jev Glass System ---------- */
.shapeshift-card.glass-card {
  width: min(380px, calc(100vw - 32px));
  max-height: calc(100dvh - var(--talk-height, 240px) - 60px);
  overflow-y: auto;
  border-color: rgba(255, 212, 154, 0.35);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.45), 0 0 1px rgba(255, 255, 255, 0.2);
}
.shapeshift-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 6px;
}
.shapeshift-seed {
  background: rgba(255, 212, 154, 0.14) !important;
  border-color: rgba(255, 212, 154, 0.5) !important;
  color: var(--warm) !important;
  font-weight: 600;
  transition: all 140ms ease;
}
.shapeshift-seed.active-morph {
  animation: shapeshiftPillGlow 1.8s infinite ease-in-out;
}
@keyframes shapeshiftPillGlow {
  0%, 100% { box-shadow: 0 0 4px rgba(255, 212, 154, 0.2); border-color: rgba(255, 212, 154, 0.5); }
  50% { box-shadow: 0 0 14px rgba(255, 212, 154, 0.65); border-color: var(--warm); }
}
.shapeshift-presets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 6px 0 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  animation: peerFadeIn 160ms ease-out;
}
.shapeshift-preset-pill {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--dim);
  cursor: pointer;
}
.shapeshift-preset-pill:hover {
  background: rgba(255, 212, 154, 0.16);
  border-color: var(--warm);
  color: var(--ink);
}
.shapeshift-widget {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
}
.timer-display-wrap {
  text-align: center;
  padding: 12px 0 6px;
}
.timer-display {
  font-size: 42px;
  font-weight: 700;
  font-family: ui-monospace, monospace;
  letter-spacing: 0.06em;
  color: var(--warm);
}
.timer-label {
  color: var(--dim);
  font-size: 12px;
  margin-top: 2px;
}
.timer-progress-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  overflow: hidden;
  margin: 4px 0 10px;
}
.timer-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
  transition: width 0.3s ease;
}
.timer-done-flash {
  animation: timerDoneFlash 0.6s infinite alternate;
  color: #ef4444 !important;
}
@keyframes timerDoneFlash {
  from { opacity: 0.4; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1.02); }
}
.widget-btn-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
  align-items: center;
}
.widget-btn {
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--ink);
  cursor: pointer;
  font: 500 12px/1.2 ui-sans-serif, system-ui, sans-serif;
  transition: all 120ms ease;
}
.widget-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 244, 225, 0.4);
}
.widget-btn.primary {
  background: rgba(255, 212, 154, 0.22);
  border-color: rgba(255, 212, 154, 0.55);
  color: var(--warm);
  font-weight: 600;
}
.widget-btn.primary:hover {
  background: rgba(255, 212, 154, 0.35);
}
.widget-btn.mini {
  padding: 4px 8px;
  font-size: 11px;
}
.calc-expression-row {
  display: flex;
  justify-content: space-between;
  color: var(--dim);
  font-size: 12px;
}
.calc-result-display {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.calc-equals {
  font-size: 20px;
  color: var(--dim);
}
.calc-result-num {
  font-size: 32px;
  font-weight: 700;
  font-family: ui-monospace, monospace;
  color: #93c5fd;
}
.split-inputs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 8px;
}
.split-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--dim);
}
.split-field input {
  background: #171b25;
  border: 1px solid var(--edge);
  color: var(--ink);
  border-radius: 6px;
  padding: 6px 8px;
  font: inherit;
  width: 100%;
  box-sizing: border-box;
}
.stepper-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #171b25;
  border: 1px solid var(--edge);
  border-radius: 6px;
  padding: 2px;
}
.stepper-btn {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: var(--ink);
  width: 26px;
  height: 26px;
  border-radius: 4px;
  cursor: pointer;
}
.stepper-num {
  font-family: ui-monospace, monospace;
  font-weight: 600;
}
.tip-selector-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  margin-bottom: 8px;
}
.tip-btn {
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--edge);
  background: rgba(255, 255, 255, 0.04);
  color: var(--dim);
  cursor: pointer;
}
.tip-btn.active {
  background: rgba(255, 212, 154, 0.2);
  border-color: var(--warm);
  color: var(--warm);
  font-weight: 600;
}
.split-result-card {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
}
.split-per-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dim);
}
.split-per-amount {
  font-size: 28px;
  font-weight: 700;
  color: #34d399;
  font-family: ui-monospace, monospace;
  margin: 4px 0;
}
.split-meta-line {
  font-size: 11px;
  color: var(--dim);
}
.color-swatch-hero {
  height: 74px;
  border-radius: 8px;
  display: flex;
  align-items: flex-end;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.color-hex-tag {
  background: rgba(0, 0, 0, 0.65);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}
.color-info-table {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}
.info-row {
  display: flex;
  justify-content: space-between;
}
.checklist-head-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 6px;
}
.checklist-progress {
  font-size: 11px;
  color: var(--dim);
}
.checklist-items-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 160px;
  overflow-y: auto;
  margin: 6px 0;
}
.checklist-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.item-text.done {
  text-decoration: line-through;
  opacity: 0.5;
}
.checklist-add-form {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.checklist-add-form input {
  flex: 1;
  background: #171b25;
  border: 1px solid var(--edge);
  color: var(--ink);
  border-radius: 6px;
  padding: 6px 8px;
  font: inherit;
}
.tuning-head {
  text-align: center;
  padding: 8px 0;
}
.tuning-sigil {
  font-size: 20px;
  color: var(--warm);
}
.tuning-freq {
  font-size: 30px;
  font-weight: 700;
  color: var(--warm);
  font-family: ui-monospace, monospace;
}
.tuning-sub {
  font-size: 11px;
  color: var(--dim);
}
.tuning-wave-visual {
  height: 36px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wave-ring {
  position: absolute;
  border: 1px solid rgba(255, 212, 154, 0.4);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  opacity: 0;
}
.tuning-wave-visual.vibrating .wave-ring.ring1 { animation: waveRing 1.2s infinite ease-out; }
.tuning-wave-visual.vibrating .wave-ring.ring2 { animation: waveRing 1.2s infinite ease-out 0.3s; }
.tuning-wave-visual.vibrating .wave-ring.ring3 { animation: waveRing 1.2s infinite ease-out 0.6s; }
@keyframes waveRing {
  0% { width: 16px; height: 16px; opacity: 0.8; }
  100% { width: 80px; height: 80px; opacity: 0; }
}
.lens-bar {
  display: flex;
  gap: 6px;
  align-items: center;
}
.lens-input {
  flex: 1;
  background: #171b25;
  border: 1px solid var(--edge);
  color: var(--ink);
  border-radius: 6px;
  padding: 5px 8px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
}
.lens-preview-viewport {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 24px 16px;
  text-align: center;
}
.atom-head, .alioth-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.atom-prompt, .alioth-goal {
  color: var(--dim);
  font-size: 12px;
  line-height: 1.4;
  margin: 4px 0;
}
.alioth-void-purge {
  animation: voidPurgeGlow 1.2s ease-out;
}
@keyframes voidPurgeGlow {
  0% { filter: hue-rotate(240deg) brightness(1.4); }
  100% { filter: none; }
}


/* Elevation pass over Antigravity's Glass implementation. Gestures and card identities are retained. */
:root { --ink:#edf2ef; --dim:#a9bac4; --faint:#91a3ae; --glass:rgba(12,23,34,.78); --edge:rgba(188,218,224,.16); --noema:#b9e8e3; --warm:#dec7a2; }
html,body { font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input,textarea { font-family:inherit; }
button { transition:background 150ms ease,border-color 150ms ease,box-shadow 150ms ease; }
button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible { outline:2px solid var(--noema); outline-offset:3px; }
.chamber-mark { position:fixed;top:24px;left:28px;z-index:7;display:flex;align-items:center;gap:12px;pointer-events:none; }
.chamber-mark-glyph { display:grid;place-items:center;width:36px;height:36px;border:1px solid rgba(194,225,225,.22);border-radius:11px;color:#d6e9e5;font-size:21px;background:linear-gradient(145deg,#bcdbd60d,#10243155);box-shadow:inset 0 1px #ffffff15; }
.chamber-mark>div { display:grid;gap:3px; }
.chamber-mark-name { font:500 19px/1.2 ui-serif,Georgia,serif;letter-spacing:.015em;color:#f3f1e9; }
.chamber-mark-sub { font:10px/1.4 ui-sans-serif,system-ui,sans-serif;color:#b0c0c9;letter-spacing:.04em; }
.glass-clock { border-radius:12px;background:rgba(15,29,39,.57);border-color:rgba(198,227,228,.17);box-shadow:inset 0 1px #ffffff0d,0 6px 20px #00000015;backdrop-filter:blur(22px); }
.glass-clock .clock-dot { width:5px;height:5px;background:#d8c29f;box-shadow:0 0 8px #d8c29f33; }
.glass-clock time { font-size:12px;font-weight:450;font-variant-numeric:tabular-nums; }
.glass-clock .clock-sub { font-size:9px;font-weight:400;opacity:.7; }
.window-tag { padding:6px 12px;border-radius:11px;border:1px solid #c6dedb13;background:rgba(12,26,36,.67);box-shadow:0 5px 15px #00000012;backdrop-filter:blur(16px); }
.window-tag b { font:500 12px/1.4 ui-sans-serif,system-ui,sans-serif;letter-spacing:.01em;color:#e4d8c1; }
.window-tag span { font-size:10px;color:#adc0ca; }
.window-tag.closed { background:rgba(12,26,36,.4);border-color:transparent; }
.window-tag.closed b { color:#b4c6cb; }.window-tag.closed span { color:#8ba0ad; }
.you-tag { background:#d9c5a6;color:#202c31;box-shadow:0 3px 12px #0002;font-size:10px;font-weight:550;letter-spacing:0; }
.hand { border-color:#ccebe5;box-shadow:0 0 20px #b7e8e250,inset 0 0 8px #b7e8e230; }
.pad { width:72px;height:72px;border:1px solid #d2e4df20;background:rgba(12,27,38,.54);box-shadow:inset 0 1px #ffffff0a,0 8px 28px #0002;backdrop-filter:blur(18px); }
.pad .knob { width:29px;height:29px;background:radial-gradient(circle at 35% 30%,#f7efdf,#cfb78c 75%);box-shadow:0 2px 10px #0004,0 0 14px #cfb78c15;border-color:#ffffff40; }
.pad .pad-label { font-size:9px;letter-spacing:.13em;opacity:.65; }
.talk.omni-chassis { bottom:max(20px,env(safe-area-inset-bottom));width:min(740px,calc(100vw - 40px));transition:transform 340ms cubic-bezier(0.16,1,0.3,1),opacity 240ms ease; }
.omni-whisper-dock { display:none;align-items:center;gap:8px;height:36px;padding:0 16px;border-radius:999px;background:linear-gradient(135deg,rgba(20,38,50,.88),rgba(10,22,32,.94));border:1px solid rgba(190,222,223,.28);box-shadow:0 8px 30px rgba(2,10,19,.45),inset 0 1px rgba(215,234,233,.15);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);color:#d8ebe5;font-family:ui-sans-serif,system-ui,sans-serif;font-size:12px;font-weight:500;cursor:pointer;margin:0 auto;pointer-events:auto;transition:all 220ms cubic-bezier(0.16,1,0.3,1); }
.omni-whisper-dock:hover { background:linear-gradient(135deg,rgba(28,52,68,.94),rgba(14,30,44,.98));border-color:rgba(190,222,223,.5);box-shadow:0 12px 36px rgba(2,10,19,.6),0 0 16px rgba(182,233,226,.25);transform:translateY(-2px); }
.whisper-orb { width:22px;height:22px;border-radius:50%;background:transparent;display:inline-block;vertical-align:middle;flex-shrink:0; }
.whisper-name { font-weight:600;color:#eaf6f2; }
.whisper-sep { opacity:.4; }
.whisper-deictic { color:#a2bec6;font-size:11px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
/* Tucked, her newest words ride in the bar for a while. */
.whisper-deictic.saying { color:#e2f1ec;font-size:12px;max-width:min(560px,62vw); }
.whisper-hint { font-size:10px;color:#7f9ba5;margin-left:6px; }
.whisper-hint kbd { background:rgba(190,222,223,.12);border:1px solid rgba(190,222,223,.25);border-radius:4px;padding:1px 5px;font-family:ui-monospace,monospace;font-size:9px;color:#c7e6df; }
.talk.omni-chassis.omni-tucked { pointer-events:none; width:auto; display:flex; justify-content:center; }
.talk.omni-chassis.omni-tucked .omni-whisper-dock { display:inline-flex; pointer-events:auto; }
.talk.omni-chassis.omni-tucked > .card { display:none; }
.talk.omni-chassis.omni-awake .omni-whisper-dock { display:none; }
.talk.omni-chassis.omni-awake > .card { display:grid;animation:omni-origami-rise 320ms cubic-bezier(0.16,1,0.3,1) forwards; }
@keyframes omni-origami-rise { from { opacity:0;transform:translateY(20px) scale(0.98); } to { opacity:1;transform:translateY(0) scale(1); } }
.jev-predictions { display:flex;gap:5px;align-items:center; }
.omni-pill.jev-predicted-pill { background:linear-gradient(135deg,rgba(30,68,76,.4),rgba(16,40,48,.6));border:1px solid rgba(182,233,226,.45);color:#e2f4ee;box-shadow:0 0 12px rgba(182,233,226,.15);animation:jev-pill-in 200ms cubic-bezier(0.16,1,0.3,1); }
.omni-pill.jev-predicted-pill:hover,.omni-pill.jev-predicted-pill:focus { background:linear-gradient(135deg,rgba(38,88,98,.65),rgba(20,52,62,.85));border-color:rgba(182,233,226,.8);box-shadow:0 0 20px rgba(182,233,226,.3);transform:translateY(-1px); }
@keyframes jev-pill-in { from { opacity:0;transform:scale(0.92); } to { opacity:1;transform:scale(1); } }
.omni-chassis>.card { gap:10px;padding:16px 18px 10px;border-radius:22px;background:linear-gradient(135deg,rgba(24,43,55,.87),rgba(12,25,37,.94));border:1px solid rgba(190,222,223,.22);box-shadow:0 24px 70px #020a1355,inset 0 1px #d7eae91a;backdrop-filter:blur(30px) saturate(125%);-webkit-backdrop-filter:blur(30px) saturate(125%); }
.card .who { gap:9px;min-height:26px;font-size:12px;font-weight:500;letter-spacing:0;text-transform:none; }
.card .who strong { font-weight:600;letter-spacing:.02em;color:#e0efea; }
.card .orb { width:8px;height:8px;background:#c4ece4;box-shadow:0 0 12px #b6e9e250;border:2px solid #e8fff8; }
.omni-chamber-tag { font:11px/1.25 ui-sans-serif,system-ui,sans-serif;background:#cee8e007;border-color:#cee8e012;color:#9fb8bf;padding:3px 8px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.card .rules { font-size:10px;color:#94aab5;max-width:190px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden; }
.omni-link { padding:6px 9px;border-color:transparent;background:none;color:#bbcdcf;font-size:11px; }
.omni-link:hover { background:#c7e4df0c;border-color:#c7e4df22; }
.card #line { font:400 14px/1.6 ui-sans-serif,system-ui,sans-serif;color:#e0e9e8;max-height:92px;overflow:auto;scrollbar-width:thin; }
.card .context { font:11px/1.5 ui-sans-serif,system-ui,sans-serif;color:#99b3be;min-height:0; }
.card .context:empty { display:none; }.card .context b { font-weight:500;color:#d4c4a6; }
.omni-pills-row { display:grid;gap:9px;padding:8px 0 2px;border-top:1px solid #bedbd914; }
.omni-actions { gap:5px;min-width:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;padding:1px 1px 3px; }
.omni-pill { border-radius:8px;min-height:32px;padding:6px 10px;font-size:11px;font-weight:450;border-color:#bfddd31a;background:#bfddd307;color:#b8cbd0;flex:none; }
.omni-pill:hover { color:#e6f3ed;background:#bfddd313;border-color:#bfddd342;box-shadow:0 2px 8px #0001; }
.omni-pill.action-pill { color:#d8e5de;border-color:#cddfd527;background:#cddfd50b; }
.omni-pill[data-sigil]::before { color:#a6cbc7;font-size:10px;opacity:.8; }
.omni-pill[aria-expanded="true"] { background:#c7e8de13;border-color:#c7e8de55;color:#e0eee4; }
.form-rail { display:flex;align-items:center;gap:12px;min-width:0; }
.rail-label { flex:none;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#8da5b0; }
.tray { gap:4px;min-width:0;scrollbar-width:thin; }
.tray button { padding:4px 9px;font-size:11px;min-height:28px;border-radius:7px;color:#a9c1c9;border-color:transparent;background:none; }
.tray button:hover { background:#b9ddd60e;border-color:#b9ddd62a;color:#e4eee6; }
#say.embedded-bar { min-height:50px;gap:10px;padding:5px 6px 5px 12px;border-radius:12px;border-color:#bad7d329;background:rgba(5,16,26,.56);box-shadow:inset 0 1px 5px #0002; }
#say.embedded-bar:focus-within { border-color:#bededb73;box-shadow:0 0 0 3px #bededb07; }
.composer-target { flex:none;font-size:10px;color:#a2c7c5;border-right:1px solid #bddad328;padding-right:11px;max-width:120px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis; }
#say.embedded-bar input { font-size:14px;padding:6px 0;min-height:32px; }
#say.embedded-bar input::placeholder { color:#8ca4b1; }
.bar-send { width:36px;height:36px;flex:none;border-radius:9px;background:#c0dcd1;border-color:#d5ece02a;color:#15342f;font-size:19px;font-weight:400;box-shadow:inset 0 1px #fff3; }
.bar-send:hover { background:#d6eade; }.bar-send:disabled { opacity:.4;cursor:default; }
.omni-foot { display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:26px; }
#save-status { font-size:9px;color:#91a8b2; }
.voice-tools { display:flex;gap:5px;align-items:center; }
.voice-tools .bar-chip { min-height:26px;padding:4px 7px;border-radius:7px;background:none;border-color:transparent;font-size:10px;color:#a4bdc6; }
.voice-tools .bar-chip:hover { background:#bddcd408;border-color:#bddcd422; }
.record-export>summary { cursor:pointer;padding:8px 0;color:#b7c9cc;font-size:11px; }
.omni-inspect { border-radius:12px;background:#06121d45;border-color:#c1e0da16; }
.omni-dl>div { border:none;background:none;padding:3px 0; }.omni-dl dd { font-weight:400; }
.glass-card { border-radius:18px;background:linear-gradient(145deg,rgba(24,43,55,.95),rgba(10,23,35,.97));border:1px solid #bededb2c;box-shadow:0 18px 60px #020a1360,inset 0 1px #d7eae914;backdrop-filter:blur(28px);font-family:ui-sans-serif,system-ui,sans-serif; }
.glass-card-head { border-bottom:1px solid #bfdcd51a;padding-bottom:10px;margin-bottom:10px; }
.glass-card-title-row h2 { font-size:13px;letter-spacing:.01em;font-weight:500; }
.card-close { background:none;border-color:transparent;color:#a4bbc2;border-radius:8px; }
.card-close:hover { border-color:#bddcd42a;background:#bddcd40a; }
.shapeshift-card.glass-card { border-color:#bddcd433; }.shapeshift-widget { border-radius:12px; }
.widget-btn { border-radius:8px; }.widget-btn.primary { background:#c7e0d319;border-color:#c7e0d345;color:#deeee5; }
.timer-display { font-variant-numeric:tabular-nums;font-weight:350;letter-spacing:-.05em; }
.glass-card-deck-indicator { border-radius:9px;background:#102432e6;border-color:#bfded733; }
.shapeshift-seed.active-morph { animation:none;box-shadow:0 0 12px #b8ded012; }
.toast,.banner { border-radius:12px;background:#102331e8;border-color:#c2dfd52b;font-family:ui-sans-serif,system-ui,sans-serif;font-size:12px; }
@media (max-width:640px) {
 .chamber-mark { top:17px;left:16px;gap:8px; }.chamber-mark-glyph { width:30px;height:30px;font-size:18px;border-radius:9px; }.chamber-mark-name { font-size:16px; }.chamber-mark-sub { display:none; }
 .talk.omni-chassis { width:calc(100vw - 24px);bottom:max(12px,env(safe-area-inset-bottom)); }
 .omni-chassis>.card { padding:12px 12px 8px;border-radius:18px;gap:8px; }
 .card .who { gap:7px; }.card .rules { max-width:96px;font-size:9px; }.omni-chamber-tag { max-width:120px;font-size:10px; }
 .card #line { font-size:13px;max-height:66px; }.omni-actions { flex-wrap:nowrap;max-width:100%; }
 .omni-pill { min-height:36px;padding:7px 10px; }.form-rail { gap:7px; }.tray button { min-height:32px;padding:5px 8px; }
 .omni-pills-row { gap:6px;padding-top:7px; }.composer-target { max-width:78px;font-size:9px;padding-right:8px; }
 #say.embedded-bar input { font-size:16px; }.bar-send { width:38px;height:38px; }
 .voice-tools .bar-chip { min-height:32px; }.omni-dl { grid-template-columns:1fr;gap:6px; }.omni-dl dd { white-space:normal; }
 .omni-inspect { max-height:24dvh;overflow:auto; }.pad { width:58px;height:58px;left:14px; }.pad .knob { width:25px;height:25px; }.pad .pad-label { display:none; }
 .glass-card { border-radius:15px; }
}
@media (prefers-reduced-motion:reduce) { button,.glass-card,.omni-chassis { transition:none; }.active-morph { animation:none!important; } }

/* Lander Card on The Glass (Layer 2) — builds, inspection, and release decisions */
.lander-card.glass-card { width:min(540px,calc(100vw - 32px));max-height:calc(100dvh - var(--talk-height,240px) - 86px);overflow-y:auto;border-color:#bededb38; }
.lander-card-body { padding:4px 6px 14px; }
.work-heading-row { display:flex;justify-content:space-between;align-items:center;margin-bottom:8px; }
.eyebrow { font:500 10px/1.4 ui-sans-serif,system-ui;letter-spacing:.17em;color:var(--noema); }
.lander-card h3 { font-size:18px;font-weight:450;overflow-wrap:anywhere;line-height:1.3;margin:8px 0; }
.work-refresh,.held-actions button { border:1px solid var(--edge);background:rgba(185,232,227,.06);color:var(--ink);border-radius:10px;padding:8px 12px;min-height:38px;font-size:12px;cursor:pointer; }
.work-refresh:hover,.held-actions button:hover { background:rgba(185,232,227,.12); }
.build-list { display:grid;gap:8px;margin:12px 0; }
.build-choice { text-align:left;padding:12px;background:#ffffff04;border:1px solid var(--edge);border-radius:12px;color:var(--ink);cursor:pointer; }
.build-choice[aria-pressed="true"] { border-color:#b9e8e380;background:#b9e8e30b; }
.build-choice strong { display:block;font-size:13px;font-weight:500;overflow-wrap:anywhere; }
.build-choice small { display:block;font-size:10px;color:var(--dim);margin-top:4px;overflow-wrap:anywhere; }
.held-build { padding-top:14px;margin-top:14px;border-top:1px solid var(--edge); }
.build-commit { font-family:ui-monospace,monospace;font-size:10px!important;overflow-wrap:anywhere; }
.held-actions { display:flex;gap:8px;margin:12px 0; }
.held-actions button:first-child { color:var(--noema); }
.lander-card details { margin:12px 0;font-size:11px;color:var(--dim); }
.lander-card pre { font:10px/1.6 ui-monospace,monospace;white-space:pre-wrap;overflow-wrap:anywhere; }
.work-footnote { border-top:1px solid var(--edge);padding-top:12px;font-size:10px!important;color:var(--dim); }
.held-answer { color:var(--ink)!important;white-space:pre-wrap; }.held-question { font-style:italic;white-space:pre-wrap; }
.build-preview { position:fixed;inset:20px;z-index:30;background:#0c1520;border:1px solid var(--edge);border-radius:20px;padding:20px;display:flex;flex-direction:column;box-shadow:0 0 0 30px #000b; }
.build-preview header { display:flex;justify-content:space-between;gap:16px;align-items:center; }.build-preview h2 { font-size:15px;font-weight:450;overflow-wrap:anywhere; }
.build-preview button { color:var(--noema);background:#b9e8e30b;border:1px solid var(--edge);padding:12px;border-radius:12px;cursor:pointer; }
.build-preview iframe { flex:1;width:100%;min-height:0;background:#111;border:0;border-radius:10px; }.build-preview p { font-size:12px;color:var(--dim); }
@media(max-width:640px) {
 .chamber-mark { top:18px;left:16px; }.chamber-mark-sub { display:none; }.chamber-mark-name { font-size:17px; }
 .lander-card.glass-card { width:calc(100vw - 24px); }
 .build-preview { inset:8px;padding:12px;border-radius:14px; }.build-preview header { align-items:flex-start; }.build-preview button { flex-shrink:0;font-size:11px;max-width:135px; }
}

/* A held release is the composer’s subject; furniture actions wait until it is put back. */
body[data-held-build="true"] #inside,body[data-held-build="true"] #keep,body[data-held-build="true"] .form-rail { display:none; }

/* ---------- a build: touch it, understand it, act, carry on ----------
 * One journey across the three layers at once (host.mjs, continuity.mjs, motion.mjs): the build stands in the room,
 * its name and card are on the Glass, and Noema's card keeps the conversation about it. */

/* Its name, hung on the Glass over the crystal in the room, or at the screen's edge nearest it when it is out of view. */
.build-anchor { position:fixed;left:0;top:0;z-index:3;pointer-events:auto;display:inline-flex;align-items:center;gap:8px;height:34px;max-width:min(320px,calc(100vw - 24px));padding:0 14px 0 11px;border-radius:999px;background:linear-gradient(135deg,rgba(24,43,55,.8),rgba(12,25,37,.9));border:1px solid rgba(190,222,223,.26);color:#d8ebe5;font:500 12px/1 ui-sans-serif,system-ui,sans-serif;box-shadow:0 10px 30px rgba(2,10,19,.42),inset 0 1px rgba(215,234,233,.14);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);cursor:pointer;will-change:transform;transition:background 200ms ease,border-color 200ms ease,box-shadow 200ms ease; }
.build-anchor[hidden] { display:none; }
.build-anchor:hover,.build-anchor:focus-visible { border-color:rgba(190,222,223,.56);background:linear-gradient(135deg,rgba(30,56,70,.92),rgba(14,30,44,.96));outline:none; }
.build-anchor:focus-visible { box-shadow:0 0 0 3px rgba(185,232,227,.35),0 10px 30px rgba(2,10,19,.42); }
.anchor-mark { color:#a6cbc7;font-size:11px; }
.anchor-name { font-weight:600;color:#eef7f3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0; }
.anchor-state { color:#9fb9c2;white-space:nowrap;font-size:11px; }
.build-anchor[data-tone="ready"] .anchor-mark { color:var(--warm);animation:anchor-breathe 3.4s ease-in-out infinite; }
.build-anchor[data-tone="held-back"] .anchor-mark { color:#ffb4a8; }
.build-anchor[data-tone="quiet"] { opacity:.78; }
.build-anchor[data-held="true"] { border-color:rgba(185,232,227,.62);box-shadow:0 0 0 3px rgba(185,232,227,.13),0 10px 30px rgba(2,10,19,.42); }
.build-anchor[aria-expanded="true"] { background:linear-gradient(135deg,rgba(40,70,82,.94),rgba(18,38,52,.97)); }
/* A thread down to the crystal while it is in view; an arrow toward it while it is not. */
.build-anchor::after { content:'';position:absolute;left:50%;top:100%;width:1px;height:16px;background:linear-gradient(rgba(190,222,223,.5),rgba(190,222,223,0));transform:translateX(-50%);pointer-events:none; }
.build-anchor[data-away="true"]::after { content:'➜';width:auto;height:auto;background:none;top:50%;left:auto;right:-20px;transform:translateY(-50%) rotate(var(--toward,0rad));color:#c7e6df;font-size:13px; }
@keyframes anchor-breathe { 0%,100% { opacity:.6; } 50% { opacity:1; } }
#world.over-thing { cursor:pointer; }

.lander-card.glass-card { width:var(--build-card-width,min(440px,calc(100vw - 32px)));max-height:var(--build-card-room,calc(100dvh - var(--talk-height,240px) - 86px));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(190,222,223,.25) transparent;padding:12px 18px 12px;border-color:#bededb3a; }
.lander-card[data-in-room="true"].glass-card { max-height:none!important;overflow:visible!important; }
.lander-card .glass-card-head { border-bottom:none;margin-bottom:0;padding-bottom:0; }
.lander-card .glass-card-title-row h2 { font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#8fa7b0;font-weight:600; }
.lander-card .card-close.settle { font-size:15px;line-height:1;min-width:34px;min-height:30px;border-radius:9px;color:#c7e6df; }
.lander-card-body { padding:2px 0 2px; }
.held-build { display:grid;gap:10px;padding-top:2px;margin-top:2px;border-top:none; }
.held-release { border-top:1px solid var(--edge);padding-top:10px;font-size:12px;line-height:1.5; }
.held-release p:empty { display:none; }
.held-release .held-actions { margin-top:8px; }
#build-list-label { cursor:pointer; }
#build-preview > header { flex-wrap:wrap;gap:10px; }
#build-preview > header button { min-height:40px; }
.lander-card h3 { font-size:22px;font-weight:500;letter-spacing:-.01em;margin:0;color:#f1f7f4;line-height:1.15; }
.held-build .build-commit { margin:-5px 0 0;color:#8fa7b0;font:11.5px/1.3 ui-monospace,monospace!important; }
.held-status { margin:0;font-size:14px;line-height:1.45;color:#dbe9e4; }
.held-task { margin:2px 0 0;padding:10px 12px;background:rgba(255,255,255,0.03);border:1px solid var(--edge);border-radius:12px;display:grid;gap:6px; }
.held-task:empty { display:none; }
.held-task-meta { display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;letter-spacing:.08em;color:#8fa7b0;text-transform:uppercase; }
.held-task-label { font-weight:600;color:#a4c4cc; }
.held-task-source { font-size:10.5px;text-transform:none;letter-spacing:normal;color:#8fa7b0; }
.held-task-goal { margin:0;font-size:13.5px;line-height:1.45;color:var(--ink);font-weight:500;overflow-wrap:anywhere; }
.held-task-criteria-wrap, .held-task-rulings-wrap { margin-top:4px;padding-top:6px;border-top:1px solid rgba(255,244,225,0.08); }
.held-task-subhead { display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#7f9ba5;margin-bottom:4px; }
.held-task-criteria { margin:0;padding-left:16px;font-size:11.5px;line-height:1.4;color:#dbe9e4; }
.held-task-criteria li { margin-bottom:3px; }
.held-task-no-criteria { margin:2px 0 0;font-size:11px;color:#7f9ba5;font-style:italic; }
.held-task-rulings { display:flex;flex-wrap:wrap;gap:4px; }
.held-task-ruling-badge { display:inline-block;padding:2px 6px;border-radius:6px;background:rgba(185,232,227,0.08);border:1px solid rgba(185,232,227,0.18);font:10px/1.2 ui-monospace,monospace;color:#c7e6df; }
.held-task-ambiguous { margin:0;color:var(--warm);font-size:11px; }
.held-task-unavailable { margin:0;color:#7f9ba5;font-size:11px;font-style:italic; }
.build-gates { display:flex;gap:6px;list-style:none;margin:2px 0 0;padding:0; }
.build-gates[hidden] { display:none; }
.build-gates .gate { flex:1;position:relative;padding-top:11px;font-size:10.5px;color:#7f9ba5;letter-spacing:.02em; }
.build-gates .gate > .bar { position:absolute;left:0;right:0;top:0;height:4px;border-radius:2px;background:rgba(190,222,223,.14); }
.build-gates .gate.passed { color:#cfe6df; }
.build-gates .gate.passed > .bar { background:linear-gradient(90deg,#b9e8e3,#d8f1ea); }
.build-gates .gate.waiting { color:var(--warm); }
.build-gates .gate.waiting > .bar { background:linear-gradient(90deg,rgba(222,199,162,.9),rgba(222,199,162,.25));animation:anchor-breathe 2.6s ease-in-out infinite; }
.held-said { display:grid;gap:6px; }
.held-question { margin:0;font-style:italic;font-size:12px;color:#9fb9c2;white-space:pre-wrap; }
.held-answer { margin:0;padding:10px 12px;border-radius:12px;background:rgba(185,232,227,.06);border:1px solid rgba(185,232,227,.14);font-size:13px;line-height:1.5;color:var(--ink)!important;white-space:pre-wrap; }
.held-actions { display:flex;align-items:center;gap:10px;margin:2px 0 0; }
.held-actions button.held-primary { flex:1;min-height:44px;border-radius:12px;font-size:14px;font-weight:600;color:#0c1d26!important;background:linear-gradient(135deg,#dff3ec,#b9e8e3);border:none;box-shadow:0 8px 24px rgba(185,232,227,.16);cursor:pointer; }
.held-actions button.held-primary:hover { filter:brightness(1.05); }
.held-actions button.held-primary:disabled { opacity:.45;cursor:default;filter:none; }
.held-actions button.held-primary[hidden] { display:none; }
.held-actions button.held-quiet { min-height:44px;padding:0 8px;background:none;border:none;color:#9fb9c2;font-size:13px;cursor:pointer;backdrop-filter:none;-webkit-backdrop-filter:none; }
.held-actions button.held-primary,.build-anchor .anchor-mark { backdrop-filter:none;-webkit-backdrop-filter:none; }
.held-actions button.held-quiet:hover { color:#e6f2ee;background:none; }
.lander-card details { margin:0;font-size:11px;color:#8fa7b0; }
.lander-card details summary { cursor:pointer;padding:4px 0; }
.build-list-wrap { margin-top:10px; }
.build-list-wrap[hidden] { display:none; }
.held-build:not([hidden]) ~ .build-list-wrap { border-top:1px solid var(--edge);padding-top:10px; }
.lander-card .build-list { gap:6px;margin:8px 0 0; }
.lander-card .build-choice { display:grid;grid-template-columns:1fr auto;gap:5px 10px;align-items:center;padding:10px 12px; }
.lander-card .build-choice strong { font-size:14px; }
.lander-card .build-choice small { grid-column:1 / -1;font-size:11px;margin:0; }
.mini-gates { display:flex;gap:3px;list-style:none;margin:0;padding:0; }
.mini-gates .gate { width:14px;height:4px;border-radius:2px;background:rgba(190,222,223,.16); }
.mini-gates .gate.passed { background:#b9e8e3; }
.mini-gates .gate.waiting { background:rgba(222,199,162,.75); }
.work-notice { margin:8px 0 0;font-size:11px;color:#9fb9c2; }
.work-notice:empty { display:none; }
.work-foot { display:flex;align-items:center;justify-content:space-between;gap:8px;margin:10px 0 0;padding-top:8px;border-top:1px solid var(--edge);font-size:10.5px;color:#7f9ba5; }
.work-foot .work-refresh { min-height:28px;padding:4px 10px;font-size:11px;border-radius:8px; }

/* The preview grows out of the card into the space above Noema's card, and folds back into it: the room stays round
 * it and her card stays below it, with the question still there, never a separate screen. */
.build-preview { inset:auto;left:max(16px,3vw);right:max(16px,3vw);top:66px;bottom:calc(100% - var(--omni-top,70vh) + 14px);padding:12px 14px 14px;border-radius:20px;background:linear-gradient(160deg,rgba(14,28,38,.97),rgba(8,18,26,.98));box-shadow:0 30px 90px rgba(2,10,19,.62),inset 0 1px rgba(215,234,233,.1);gap:8px; }
.build-preview[hidden] { display:none; }
.build-preview header .eyebrow { font-size:10px;letter-spacing:.14em;color:#8fa7b0; }
.build-preview h2 { margin:2px 0 0; }
.build-preview #preview-return { min-height:40px;padding:8px 14px;font-weight:600; }
.build-preview p { margin:0; }

/* Noema's card never grows wider than the screen: its rows scroll inside it, and its words wrap. */
.omni-chassis > .card { grid-template-columns:minmax(0,1fr); }
.omni-chassis > .card > * { min-width:0; }
.omni-actions { scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent); }
.omni-actions::-webkit-scrollbar { display:none; }
/* It rides above a phone's keyboard instead of under it. */
.talk.omni-chassis { bottom:calc(max(20px,env(safe-area-inset-bottom)) + var(--keyboard-inset,0px)); }
/* While a build is held, the room's tools step back; they are still there for a hand that reaches for them. */
body[data-held-build="true"] .omni-actions > :not(#lander-button):not(.jev-predictions) { opacity:.5;transition:opacity 200ms ease; }
body[data-held-build="true"] .omni-actions > :hover,body[data-held-build="true"] .omni-actions > :focus-visible { opacity:1; }

@media (max-width:640px) {
  .build-anchor { height:40px;padding:0 15px 0 13px;font-size:13px; }
  .anchor-state { font-size:12px; }
  .lander-card.glass-card { padding:12px 16px 10px;border-radius:18px; }
  .lander-card h3 { font-size:20px; }
  .talk.omni-chassis { bottom:calc(max(12px,env(safe-area-inset-bottom)) + var(--keyboard-inset,0px)); }
  .build-preview { left:8px;right:8px;top:58px;padding:10px;border-radius:16px; }
  body[data-held-build="true"] .omni-pills-row { display:none; }
}
@media (prefers-reduced-motion:reduce) { .build-anchor[data-tone="ready"] .anchor-mark,.build-gates .gate.waiting > .bar { animation:none; } }

/* ---------- the Glass in three dimensions (glass3d.mjs) ----------
 * The HTML card stays, invisible and live where the glass is drawn: the hand, the keyboard and a screen reader use it;
 * what is seen is the glass. Live only on the Glass and at rest; in flight, or standing in the room, it is the glass's. */
/* An id's weight in :not() puts these above any class rule, important or not: the shadow is never seen. */
[data-skin="glass3d"]:not(#__glass),[data-skin="glass3d"] :not(#__glass),[data-skin="glass3d"] :not(#__glass)::before,[data-skin="glass3d"] :not(#__glass)::after,[data-skin="glass3d"]:not(#__glass)::after,[data-skin="glass3d"]:not(#__glass)::before { color:transparent!important;background:transparent!important;border-color:transparent!important;box-shadow:none!important;text-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;outline-color:transparent!important;caret-color:transparent!important;text-decoration-color:transparent!important;animation:none!important;filter:none!important;scrollbar-color:transparent transparent!important; }
[data-skin="glass3d"] :not(#__glass)::placeholder { color:transparent!important; }
/* The shadow never eases or animates mid-stride. Painted as it stands: a colour or opacity still fading in would be
 * read half-way (or transparent, leaving ghost pills on the glass). Hidden again at once: a colour fading out would
 * show the shadow's own card over the glass for a moment on every repaint (Dee: "i keep seeing something transparent flicker"). */
[data-skin="painting"],[data-skin="painting"] *,[data-skin="painting"] *::before,[data-skin="painting"] *::after,[data-skin="glass3d"],[data-skin="glass3d"] *,[data-skin="glass3d"] *::before,[data-skin="glass3d"] *::after { transition:none!important;animation:none!important; }
[data-skin="glass3d"] :not(#__glass)::selection { background:transparent!important;color:transparent!important; }
[data-skin="glass3d"][data-live="false"]:not(#__glass),[data-skin="glass3d"][data-live="false"] :not(#__glass) { pointer-events:none!important; }
.card-action.to-room { display:none!important; }
.lander-card .glass-card-title-row { gap:6px; }
.lander-card .glass-card-title-row h2 { margin-right:auto; }
/* The room's own labels keep the room's focus: near and far, felt apart. */
#window-tags,#you-tag,#peer-tags,#hand { filter:blur(calc(var(--room-focus,0) * 1.4px));transition:filter 60ms linear; }

/* While a card is near you on the Glass, the room's own labels are part of the far room: they soften and fade with it,
 * and the pad for walking steps back (nobody walks while reading a card). */
#window-tags,#you-tag,#peer-tags,#hand { opacity:calc(1 - var(--room-focus,0) * 0.85); }
.pad { transition:opacity 220ms ease; }
body[data-glass-focus="true"] .pad { opacity:0;pointer-events:none; }
/* The Chamber's name, as glass: a plaque with room around its words. */
.chamber-mark[data-skin] { padding:8px 14px 8px 10px;margin:-8px 0 0 -10px;border-radius:16px; }
@media (max-width:420px) { .card .rules { display:none; } .omni-chamber-tag { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } }

/* Walking is wherever the thumb comes down (host.mjs, the touch grammar); the fixed pad is gone. */
.pad { display:none!important; }

/* The Tuning Fork on a build's card: its strike, and the reading the server handed back (a sensor, never a gate). */
.held-actions button.held-fork { min-width:44px;min-height:44px;border-radius:12px;font-size:17px;font-weight:600;color:#c7f1e8;background:rgba(185,232,227,.08);border:1px solid rgba(190,222,223,.28);cursor:pointer;backdrop-filter:none; }
.held-actions button.held-fork:hover { background:rgba(185,232,227,.16); }
.held-actions button.held-fork:disabled { opacity:.45; }
.held-reading { margin:0;padding:10px 12px;border-radius:12px;background:rgba(111,240,220,.06);border:1px solid rgba(111,240,220,.2);display:grid;gap:5px; }
.held-reading[hidden] { display:none; }
.reading-head { margin:0;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#dff5ef; }
.reading-glyph { font-size:16px;color:#6ff0dc; }
.reading-struck { margin:0;font-size:11px;color:#9fb9c2; }
.reading-tension { margin:0;padding:0 0 0 16px;font-size:11.5px;line-height:1.45;color:#dbe9e4; }
.reading-tension .in-tension { color:#ffd2a8; }
.reading-note { margin:0;font-size:10.5px;color:#7f9ba5; }

/* ---------- the build card, folded where it rests (fold.mjs) ---------- */
[data-density="widget"] > .glass-card-head,[data-density="widget"] > .lander-card-body { display:none; }
[data-density="card"] > .lander-widget { display:none; }
.lander-card[data-density="widget"].glass-card { width:min(280px,calc(100vw - 32px)); }
.lander-widget { display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto;column-gap:12px;row-gap:3px;align-items:center; }
.lander-widget .widget-head { grid-column:1;margin:0;padding:0 0 2px;border:0;cursor:grab;touch-action:none; }
#widget-kind { font-size:9.5px;letter-spacing:.14em;color:#95b6bc; }
[data-tone="ready"] #widget-kind { color:#b9e8e3; }
[data-tone="held-back"] #widget-kind { color:#ffb4a8; }
#widget-name { grid-column:1;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:16px;font-weight:500;color:#eff8f4; }
#widget-detail { grid-column:1;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:11px;color:#a8c5cb; }
.widget-actions { grid-column:2;grid-row:1 / span 3;display:grid;grid-template-columns:1fr 1fr;gap:6px; }
.widget-actions button { min-height:34px;min-width:40px;padding:5px 9px;font-size:12px;border-radius:10px;backdrop-filter:none; }
#widget-expand { grid-column:1 / -1;color:#0c1d26;background:linear-gradient(135deg,#dff3ec,#b9e8e3);border:none;font-weight:600; }
#widget-strike { color:#c7f1e8; }

/* ---------- the Omnistrip (omnistrip.mjs): Noema's card's own lower edge ----------
 * One continuous dark glass strip, the card's full width with no box of its own; its glyphs evenly spaced and lit, each
 * with its word under it: the Chamber's own glyphs, the ones that fit what you are doing, so it never scrolls. */
#omnistrip { display:flex;align-items:stretch;justify-content:space-evenly;justify-self:stretch;align-self:stretch;margin:2px -18px 0;padding:5px 8px 4px;background:linear-gradient(180deg,rgba(5,7,10,.66),rgba(3,5,8,.82));border-top:1px solid rgba(236,222,196,.14);overflow:hidden; }
#omnistrip .strip-glyph { position:relative;flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;height:50px;padding:0 3px;border:0;border-radius:10px;background:none;box-shadow:none;backdrop-filter:none;color:rgba(226,216,198,.74);cursor:pointer; }
#omnistrip .glyph-mark { font-size:19px;line-height:1;text-shadow:0 0 6px rgba(255,212,154,.22); }
#omnistrip .glyph-word { font:500 9.5px/1.1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.03em;white-space:nowrap;color:rgba(214,204,186,.62); }
#omnistrip .strip-glyph[hidden] { display:none; }
#omnistrip .strip-glyph:is(:hover,:focus-visible) { color:#fbf1df;outline:none; }
#omnistrip .strip-glyph:is(:hover,:focus-visible) .glyph-mark { text-shadow:0 0 10px rgba(255,212,154,.6); }
#omnistrip .strip-glyph:is(:hover,:focus-visible) .glyph-word { color:rgba(244,234,216,.9); }
#omnistrip .strip-glyph:is([aria-expanded="true"],[aria-pressed="true"]) { color:#ffd49a; }
#omnistrip .strip-glyph:is([aria-expanded="true"],[aria-pressed="true"]) .glyph-mark { text-shadow:0 0 12px rgba(255,212,154,.8); }
#omnistrip .strip-glyph:is([aria-expanded="true"],[aria-pressed="true"]) .glyph-word { color:#f5d7aa; }

/* Omnistrip Taskbar Active App Indicators (Dee: "open cards show active indicator dots under their icons on the strip") */
#omnistrip .strip-glyph[data-app-running="true"]::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: calc(50% - 2px);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--noema);
  box-shadow: 0 0 6px var(--noema);
  transition: all 160ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
#omnistrip .strip-glyph[data-app-focused="true"]::after {
  bottom: 2px;
  left: calc(50% - 5px);
  width: 10px;
  height: 3px;
  border-radius: 3px;
  background: #ffd49a;
  box-shadow: 0 0 8px rgba(255, 212, 154, 0.9);
}
#omnistrip #strip-activity[data-unread="true"] .glyph-mark { color:#ffd49a;text-shadow:0 0 10px rgba(255,212,154,.75); }
#omnistrip #strip-fork .glyph-mark { font-weight:600; }
#omnistrip .strip-glyph:disabled { opacity:.32;cursor:default; }
#omnistrip .strip-glyph:disabled .glyph-mark { text-shadow:none; }
#omnistrip .strip-glyph:focus-visible { box-shadow:inset 0 0 0 1px rgba(255,212,154,.45); }
/* The forms tray is not on Noema's card (Dee, 2026-10-25: "i dont need the forms section on the omnicard"); a form is
 * still brought by saying it, or from the floor's long-press ring. */
body[data-omnistrip="true"] .form-rail { display:none; }
#window-tags > .under-glass,#you-tag.under-glass,#peer-tags > .under-glass { visibility:hidden; }
/* What the controller is on (pad-focus.mjs): a lit ring, drawn on the glass. */
.pad-focus { outline:2px solid #ffd49a!important;outline-offset:2px; }
/* Sending is a lit glyph on the glass like the strip's, not a tile within the field. */
body[data-omnistrip="true"] .bar-send { background:none;border:0;box-shadow:none;color:#f4ead8;text-shadow:0 0 9px rgba(255,212,154,.55); }
body[data-omnistrip="true"] .bar-send:hover { background:none;color:#ffd49a; }
body[data-omnistrip="true"] .bar-send:disabled { opacity:.32;text-shadow:none; }
#omnistrip .strip-glyph.matched { color:#ffd49a; }
#omnistrip .strip-glyph.matched .glyph-mark { color:#ffd49a;text-shadow:0 0 12px rgba(255,212,154,.85);animation:omniGlow 1.8s infinite ease-in-out; }
#omnistrip .strip-glyph.matched .glyph-word { color:#f5d7aa; }
#omnistrip .strip-glyph.dynamic-prediction { background:rgba(255,212,154,.12);border:1px solid rgba(255,212,154,.35);border-radius:12px;box-shadow:0 0 12px rgba(255,212,154,.2); }
@keyframes omniGlow { 0%,100% { filter:drop-shadow(0 0 4px rgba(255,212,154,.4)); } 50% { filter:drop-shadow(0 0 12px rgba(255,212,154,.8)); } }

/* Universal Glass Card Controls: Popout, Re-dock, Tuck, Close */
.card-controls { display:flex;align-items:center;gap:4px; }
.card-controls button { background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:var(--dim);border-radius:6px;padding:3px 6px;font-size:11px;line-height:1;cursor:pointer;transition:all 120ms ease; }
.card-controls button:hover,.card-controls button:focus-visible { color:#fff;border-color:rgba(255,212,154,.5);background:rgba(255,212,154,.16);outline:none; }

/* Popped-out Companion Window & Tucked Micro-Card */
.glass-card.card-popped-out { border-color:rgba(56,189,248,.5)!important;box-shadow:0 28px 72px -10px rgba(0,0,0,.75),0 0 26px rgba(56,189,248,.3),inset 0 1px 0 rgba(255,255,255,.3)!important;z-index:35!important; }
.glass-card.card-tucked { width:270px!important;max-width:calc(100vw - 32px);min-height:0!important;max-height:none!important;padding:8px 12px!important;border-radius:18px!important;overflow:visible!important; }
.glass-card.card-tucked > :not(.glass-card-head) { display:none!important; }
.glass-card.card-tucked .glass-card-head { margin:0!important;padding:0!important;border-bottom:none!important; }
.glass-card.card-tucked .glass-card-title-row { gap:6px; }
.glass-card.card-tucked .glass-card-title-row h2 { font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.popout-entrance { animation:popoutEntrance .28s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes popoutEntrance { 0% { opacity:0;transform:scale(.92) translateY(10px); } 100% { opacity:1;transform:scale(1) translateY(0); } }

/* Fullscreen / Maximized App Mode (Dee: "remember a card is like a program or an app") */
.glass-card.card-fullscreen {
  position: fixed !important;
  left: 16px !important;
  top: 54px !important;
  right: 16px !important;
  bottom: 74px !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  transform: none !important;
  border-radius: 14px !important;
  z-index: 45 !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.75), 0 0 24px rgba(191, 227, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  transition: all 180ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.glass-card.card-fullscreen > .glass-card-head {
  flex-shrink: 0;
  margin: 0 !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(14, 18, 26, 0.5);
}
.glass-card.card-fullscreen > :not(.glass-card-head):not(.terminal-toolbar):not(.browser-bar) {
  flex: 1 1 auto !important;
  max-height: none !important;
  overflow-y: auto !important;
}
.browser-card.card-fullscreen .browser-page {
  flex: 1 1 auto !important;
  height: 100% !important;
  max-height: none !important;
}
.browser-card.card-fullscreen .browser-picture {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* Standing Grants card on the Glass layer */
.grant-card.glass-card { width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - var(--talk-height,240px) - 86px);overflow-y:auto;border-color:rgba(255,212,154,.35); }
.grant-card-body { display:flex;flex-direction:column;gap:12px;font-size:13px;padding:4px 2px 10px; }
.grant-section { padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08); }
.grant-subhead { display:flex;justify-content:space-between;align-items:center;font:600 10px/1.2 ui-sans-serif,system-ui;letter-spacing:.12em;color:var(--dim); }
.grant-active-list { display:grid;gap:8px;margin:8px 0; }
.grant-item { display:flex;flex-direction:column;gap:5px;padding:9px 11px;border-radius:10px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08); }
.grant-item-head { display:flex;align-items:center;gap:8px;font-size:12px; }
.grant-cap-tag { color:#34d399;font-family:ui-monospace,monospace;font-weight:600;font-size:11px; }
.grant-item-words { margin:0;font-size:12px;color:var(--dim);font-style:italic; }
.grant-revoke-btn { align-self:flex-start; }
.quick-grant-row { display:flex;align-items:center;gap:8px;margin:8px 0; }
.grant-pill-btn { background:rgba(255,212,154,.12);border:1px solid rgba(255,212,154,.4);color:var(--warm);font:500 11px/1.2 ui-sans-serif,system-ui;border-radius:999px;padding:4px 10px;cursor:pointer; }
.grant-pill-btn:hover { background:rgba(255,212,154,.22); }
.grant-form { display:flex;flex-direction:column;gap:8px;margin-top:6px; }
.grant-form-row { display:grid;grid-template-columns:1fr 1fr;gap:8px; }
.grant-form label { display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--dim); }
.grant-form input,.grant-form textarea { width:100%;box-sizing:border-box;background:#171b25;border:1px solid var(--edge);color:var(--ink);border-radius:8px;padding:7px 9px;font:inherit;font-size:12px; }
.grant-action-btn { padding:8px 14px;border-radius:10px;font-weight:600;font-size:12px;cursor:pointer;border:none; }
.grant-action-btn.primary { background:linear-gradient(135deg,#dff3ec,#b9e8e3);color:#0c1d26; }
.grant-action-btn.danger { background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.35);color:#f87171;width:100%;margin-top:4px; }
.mini-btn { padding:3px 8px;font-size:11px;border-radius:6px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:var(--dim);cursor:pointer; }
.mini-btn:hover { color:#fff;border-color:rgba(255,212,154,.4); }

/* Activity this visit: what the page said here, local, and said to be. */
#strip-activity-panel { max-height:min(230px,32dvh);overflow:auto;pointer-events:auto;border:1px solid #bededb33;border-radius:12px;background:#08131df5;padding:12px;font:12px/1.5 ui-sans-serif,system-ui,sans-serif; }
#strip-activity-panel header { display:flex;align-items:center;justify-content:space-between; }
#strip-activity-panel > p { color:#94adb6;font-size:11px;margin:8px 0; }
#activity-entries { padding:0;list-style:none;margin:0;display:grid;gap:10px; }
#activity-entries li { border-top:1px solid #bededb22;padding-top:8px; }
#activity-entries small { color:#9fc5c6;font-size:10px; }
#activity-entries p { margin:4px 0 0;overflow-wrap:anywhere; }
/* Noema's card stays within the screen, its composer reachable whatever is open on it. */
body[data-omnistrip="true"] .omni-chassis > .card { max-height:calc(100dvh - 40px - var(--keyboard-inset,0px));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none; }
body[data-omnistrip="true"] .omni-pills-row { display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:4px 0 0;border:0; }
@media (max-width:640px) {
  #omnistrip { margin:2px -12px 0;padding:4px 2px 3px; }
  #omnistrip .strip-glyph { padding:0 1px;flex:1 1 0; }
  #omnistrip .glyph-mark { font-size:18px; }
  #omnistrip .glyph-word { font-size:9px;letter-spacing:0;max-width:100%;overflow:hidden;text-overflow:ellipsis; }
}

/* Browser cards (browser-card.mjs): the page a real browser on the server shows, under the card's own address bar. */
.browser-card.glass-card { width: min(760px, calc(100vw - 32px), calc((100vh - 300px) * 1.6 + 48px)); max-height: none; overflow: visible; }
.browser-bar { display:flex; gap:6px; align-items:center; margin:8px 0; }
.browser-button { min-width:34px; min-height:34px; border-radius:10px; border:1px solid var(--edge); background:#b9e8e30b; color:var(--noema); cursor:pointer; font-size:16px; }
.browser-button:disabled { opacity:.35; cursor:default; }
.browser-address { flex:1; min-width:0; min-height:34px; padding:6px 10px; border-radius:10px; border:1px solid var(--edge); background:#0006; color:inherit; font:inherit; font-size:13px; }
.browser-page { position:relative; width:100%; aspect-ratio:16 / 10; border-radius:10px; overflow:hidden; background:#0c1520; cursor:default; touch-action:none; outline:none; }
.browser-page:focus-visible { box-shadow:0 0 0 2px var(--noema); }
.browser-picture { display:block; width:100%; height:100%; }
/* On the glass, the glass draws the page itself (glass3d.mjs `screen`); the element stays, for the hand and the keys. */
[data-skin="glass3d"] .browser-picture { visibility:hidden; }
.browser-status { margin:6px 0 0; min-height:1.2em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- Native Continuing-Work & Studio Glass Surfaces (native-task.mjs, studio-panel.mjs) ---------- */
.native-task-root { display: grid; gap: 10px; font-size: 12.5px; line-height: 1.45; }
.nt-section { border: 1px solid rgba(190, 222, 219, 0.16); border-radius: 10px; padding: 10px 12px; background: rgba(6, 13, 21, 0.55); display: grid; gap: 6px; }
.nt-refusal { border-color: rgba(248, 113, 113, 0.45); background: rgba(69, 10, 10, 0.42); }
.nt-id-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.nt-subhead { font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #9fc5c6; }
.nt-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.nt-inline-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.nt-inline-form input, .nt-stack-form input, .nt-stack-form textarea, .nt-stack-form select,
.studio-panel input[type="text"], .studio-panel input[type="number"], .studio-panel select {
  background: rgba(0, 0, 0, 0.45); color: #f1f5f9; border: 1px solid rgba(190, 222, 219, 0.24);
  border-radius: 7px; padding: 5px 8px; font: inherit; font-size: 12px; width: 100%; box-sizing: border-box;
}
.nt-inline-form input { width: auto; flex: 1 1 130px; }
.nt-stack-form { display: grid; gap: 6px; margin-top: 6px; }
.nt-pending-list { display: grid; gap: 6px; margin-top: 6px; }
.nt-pending-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 8px; background: rgba(255, 212, 154, 0.08); }
.nt-pending-row span { flex: 1 1 160px; }
.nt-item-card { border-top: 1px solid rgba(190, 222, 219, 0.14); padding-top: 7px; display: grid; gap: 4px; }
.nt-item-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.nt-stance { margin: 0; font-weight: 500; color: #f8fafc; }
.nt-uncertainty { padding: 6px 8px; border-radius: 7px; background: rgba(251, 191, 36, 0.11); border-left: 2px solid #fbbf24; font-size: 11.5px; }
.nt-exec-label { margin: 0; font-weight: 600; color: #bae6fd; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.nt-exec-active { border: 1px solid rgba(56, 189, 248, 0.45); background: rgba(14, 165, 233, 0.08); border-radius: 8px; padding: 10px 12px; margin: 4px 0; }
.nt-selected-build-hoisted { margin: 8px 0; border: 1px solid rgba(56, 189, 248, 0.6); background: rgba(14, 165, 233, 0.12); }
.nt-badge-selected { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 999px; background: #0284c7; color: #ffffff; }
.nt-badge-correction { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: rgba(16, 185, 129, 0.18); border: 1px solid rgba(16, 185, 129, 0.5); color: #a7f3d0; }
.nt-badge-correction.nt-correction-warning { background: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.5); color: #fde68a; }
.nt-correction-explanation { color: #cbd5e1; font-size: 11px; margin: 4px 0; }
.nt-blob-pre { margin: 6px 0 0; padding: 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.7); font: 11px/1.4 ui-monospace, monospace; white-space: pre-wrap; word-break: break-all; }
.nt-list { margin: 2px 0; padding-left: 18px; display: grid; gap: 3px; }
.nt-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.nt-chip { font-size: 10px; padding: 2px 6px; border-radius: 999px; background: rgba(185, 232, 227, 0.12); color: #cbd5e1; }
.nt-link { color: #7dd3fc; text-decoration: underline; font-size: 12px; width: fit-content; }
.nt-unfinished-items { display: grid; gap: 6px; margin-top: 6px; }
.nt-unfinished-item { padding: 6px 8px; border-radius: 8px; background: rgba(14, 165, 233, 0.08); border-left: 2px solid #38bdf8; }
.nt-item-title-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.nt-resume-item-btn { font-size: 11px; padding: 4px 10px; cursor: pointer; white-space: nowrap; }
.nt-controls details { border-top: 1px solid rgba(190, 222, 219, 0.14); padding-top: 6px; }
.nt-controls summary { cursor: pointer; font-weight: 500; color: #e2e8f0; }
#work-notice[data-error="true"] { color: #fca5a5; }
.studio-panel { width: min(390px, calc(100vw - 32px)); display: grid; gap: 8px; }
.studio-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.studio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.studio-things-list { max-height: 130px; overflow-y: auto; display: grid; gap: 4px; padding: 6px; border-radius: 8px; background: rgba(0, 0, 0, 0.35); }
.studio-thing-row { display: flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
.studio-share-url { font-family: ui-monospace, monospace; font-size: 11px; }
.studio-block-label { display: grid; gap: 4px; }

/* ---------- Task Compass (Human Flow Banner) ---------- */
.nt-compass-card {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.16), rgba(99, 102, 241, 0.12));
  border: 1px solid rgba(56, 189, 248, 0.4);
  border-radius: 12px;
  padding: 12px 14px;
  display: grid;
  gap: 8px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}
.nt-compass-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.nt-compass-badge {
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
}
.nt-compass-badge.badge-active { background: #0284c7; color: #fff; }
.nt-compass-badge.badge-done { background: #16a34a; color: #fff; }
.nt-compass-track { display: flex; align-items: center; gap: 4px; font-size: 10px; color: #94a3b8; }
.nt-compass-track .nt-step { padding: 1px 5px; border-radius: 4px; }
.nt-compass-track .step-done { color: #4ade80; font-weight: 600; }
.nt-compass-track .step-active { background: rgba(56, 189, 248, 0.25); color: #38bdf8; font-weight: 700; }
.nt-compass-track .nt-arrow { opacity: 0.5; }
.nt-compass-goal { margin: 0; font-size: 13.5px; font-weight: 600; color: #f8fafc; }
.nt-compass-desc { margin: 0; color: #cbd5e1; }
.nt-compass-actions { display: flex; gap: 8px; margin-top: 4px; }
.nt-compass-btn { font-size: 12px; font-weight: 600; padding: 6px 14px; cursor: pointer; }
.nt-step-badge-wrap { display: flex; align-items: center; gap: 8px; }
.nt-step-pill { font-size: 10px; font-weight: 700; background: rgba(56, 189, 248, 0.2); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.35); padding: 1px 6px; border-radius: 6px; }

/* Pulsing highlight when focused via Resume button */
@keyframes ntPulseOutline {
  0% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.7); border-color: #38bdf8; }
  50% { box-shadow: 0 0 0 8px rgba(56, 189, 248, 0); border-color: #38bdf8; }
  100% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0); }
}
.nt-pulse-highlight {
  animation: ntPulseOutline 1.6s cubic-bezier(0, 0, 0.2, 1) 2;
  border-color: #38bdf8 !important;
}

/* ---------- Sovereign Stage & Morphic Broadcast Engine ---------- */
.morphic-stage-chassis {
  width: 100% !important;
  max-height: none;
  display: flex !important;
  flex-direction: column;
  padding: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none;
  border-radius: 0;
  box-sizing: border-box;
}

.omni-chassis.omni-studio {
  width: min(1180px, calc(100vw - 24px));
  z-index: 30;
}
.omni-chassis.omni-studio > .card {
  max-height: min(88dvh, 860px);
  overflow: hidden;
  grid-template-rows: minmax(0, 1fr) auto auto;
}
.omni-chassis.omni-studio > .card > .who,
.omni-chassis.omni-studio > .card > #line,
.omni-chassis.omni-studio > .card > .context,
.omni-chassis.omni-studio > .card > #inspect,
.omni-chassis.omni-studio > .card > .omni-pills-row {
  display: none;
}
.omni-chassis.omni-studio #studio-panel {
  display: flex !important;
  width: 100%;
  min-height: 0;
  position: static;
}
.omni-chassis.omni-studio #shapeshift-presets:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.omni-chassis.omni-studio #say {
  margin-top: 8px;
}
.omni-chassis.omni-studio > .card {
  grid-template-rows: minmax(180px, 1fr) auto auto auto;
}
.omni-chassis.omni-studio #studio-panel { grid-row: 1; }
.omni-chassis.omni-studio #say { grid-row: 3; }
.omni-chassis.omni-studio .omni-foot { grid-row: 4; }
.omni-intent:not([hidden]) {
  display: grid;
  grid-row: 2;
  gap: 8px;
  min-height: 150px;
  max-height: 240px;
  overflow: auto;
  position: relative;
  z-index: 3;
  padding: 8px 10px;
  background: rgba(7, 12, 16, 0.96);
}
.omni-intent-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.omni-intent-head button {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.stage-title-wrap { display: flex; align-items: baseline; gap: 8px; }
.stage-glyph { color: #06b6d4; font-size: 14px; text-shadow: 0 0 8px rgba(6, 182, 212, 0.6); }
.stage-subhead { font-size: 11px; color: #94a3b8; font-family: ui-monospace, monospace; }

.stage-head-actions { display: flex; align-items: center; gap: 10px; }
.stage-pill {
  font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px;
  letter-spacing: 0.04em; text-transform: uppercase; font-family: ui-monospace, monospace;
}
.stage-pill-standby { background: rgba(148, 163, 184, 0.16); color: #94a3b8; border: 1px solid rgba(148, 163, 184, 0.3); }
.stage-pill-live { background: rgba(239, 68, 68, 0.22); color: #f87171; border: 1px solid #ef4444; box-shadow: 0 0 10px rgba(239, 68, 68, 0.4); animation: pulse 1.6s infinite; }

.morphic-stage-body {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 14px;
  margin-top: 8px;
  min-height: 480px;
}

@media (max-width: 760px) {
  .morphic-stage-body { grid-template-columns: 1fr; }
}

/* Left Pane: Stage Viewport & Live PiP */
.stage-viewport-pane { display: flex; flex-direction: column; gap: 10px; }
.stage-context-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 20;
  flex-shrink: 0;
  gap: 8px;
}
.stage-modes { display: flex; gap: 4px; background: rgba(0, 0, 0, 0.4); padding: 3px; border-radius: 9px; }
.stage-mode-btn {
  background: transparent; border: none; color: #94a3b8; font-size: 11px; padding: 4px 8px;
  border-radius: 6px; cursor: pointer; transition: all 0.15s ease;
}
.stage-mode-btn:hover { color: #f1f5f9; background: rgba(255, 255, 255, 0.05); }
.stage-mode-btn.active { color: #06b6d4; background: rgba(6, 182, 212, 0.16); font-weight: 600; }
.stage-source-controls { display: flex; align-items: center; gap: 6px; }
.stage-source-btn {
  background: rgba(6, 182, 212, 0.12); border: 1px solid rgba(6, 182, 212, 0.3); color: #06b6d4;
  font-size: 11px; font-weight: 500; padding: 4px 10px; border-radius: 6px; cursor: pointer; transition: all 0.15s ease;
}
.stage-source-btn:hover { background: rgba(6, 182, 212, 0.22); color: #fff; }
.stage-source-btn.live { background: rgba(16, 185, 129, 0.2); border-color: #10b981; color: #34d399; }
.stage-source-disconnect {
  background: rgba(239, 68, 68, 0.2); border: 1px solid rgba(239, 68, 68, 0.4); color: #f87171;
  font-size: 11px; padding: 4px 8px; border-radius: 6px; cursor: pointer;
}
.stage-aspect-badge { font-size: 10px; color: #64748b; font-family: ui-monospace, monospace; }

.stage-canvas-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 420px;
  min-height: 240px;
  border-radius: 12px;
  overflow: hidden;
  background: #05080f;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

.stage-capture-slot { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; }
.stage-capture-video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }

.stage-viewport-mock {
  text-align: left;
  color: #e2e8f0;
  padding: 16px 216px 16px 16px;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
}
.stage-glow-icon { font-size: 32px; color: #06b6d4; display: block; margin-bottom: 8px; text-shadow: 0 0 16px rgba(6, 182, 212, 0.7); }
.stage-viewport-mock h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; }
.stage-viewport-mock p { margin: 0; font-size: 12px; color: #94a3b8; }

/* Self-Construction PiP Organ Anchor */
.stage-pip-anchor {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 200px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8), 0 0 12px rgba(6, 182, 212, 0.25);
  border: 1px solid rgba(6, 182, 212, 0.4);
  background: rgba(6, 10, 18, 0.92);
  z-index: 25;
}

.pip-header {
  display: flex; align-items: center; justify-content: space-between; padding: 4px 8px;
  background: rgba(0, 0, 0, 0.6); font-size: 9px; font-family: ui-monospace, monospace; color: #cbd5e1;
}
.pip-live-dot { width: 5px; height: 5px; border-radius: 999px; background: #10b981; box-shadow: 0 0 6px #10b981; }
.pip-latency { color: #06b6d4; }
.pip-canvas { display: block; width: 100%; height: auto; }
.pip-telemetry-bar {
  display: flex; align-items: center; justify-content: space-between; padding: 3px 6px;
  background: rgba(0, 0, 0, 0.7); font-size: 8.5px; font-family: ui-monospace, monospace; color: #94a3b8;
}
.pip-gold { color: #eab308; }

.stage-egress-bar {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
  padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.stage-egress-left { display: flex; gap: 6px; }
.stage-audio-meter-group { display: flex; gap: 5px; }
.audio-pill {
  font-size: 10px; padding: 3px 6px; border-radius: 6px; background: rgba(0, 0, 0, 0.4);
  color: #94a3b8; border: 1px solid rgba(255, 255, 255, 0.06); font-family: ui-monospace, monospace;
}
.audio-gold { color: #eab308; border-color: rgba(234, 179, 8, 0.25); }

/* Right Pane: The Strip & Unified Chat Funnel */
.stage-chat-pane {
  display: flex; flex-direction: column; gap: 8px;
  background: rgba(4, 8, 14, 0.65); border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px; padding: 10px; overflow: hidden;
}

.stage-strip-reel {
  display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08); scrollbar-width: none;
}
.stage-strip-reel::-webkit-scrollbar { display: none; }
.strip-item {
  display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: #94a3b8;
  padding: 4px 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08); white-space: nowrap; cursor: pointer;
}
.strip-item.active { background: rgba(6, 182, 212, 0.12); color: #06b6d4; border-color: rgba(6, 182, 212, 0.35); }
.strip-dot { color: #ef4444; font-size: 8px; }
.strip-avatar.cyan { color: #06b6d4; }
.strip-avatar.gold { color: #eab308; }
.strip-avatar.emerald { color: #10b981; }
.strip-cube { color: #a855f7; font-size: 11px; }

.funnel-header { display: flex; justify-content: space-between; align-items: center; padding: 2px 0; }
.funnel-title { font-size: 11px; font-weight: 600; color: #cbd5e1; text-transform: uppercase; letter-spacing: 0.05em; }
.funnel-badges { display: flex; gap: 3px; }
.badge {
  font-size: 8.5px; font-weight: 700; padding: 1px 4px; border-radius: 4px;
  font-family: ui-monospace, monospace; letter-spacing: 0.02em;
}
.badge-yt, .badge-youtube { background: #b91c1c; color: #fee2e2; }
.badge-tw, .badge-twitch { background: #6b21a8; color: #f3e8ff; }
.badge-kk, .badge-kick { background: #15803d; color: #dcfce7; }
.badge-sos { background: #0891b2; color: #cffafe; }

.funnel-feed {
  flex: 1 1 240px; min-height: 200px; max-height: 340px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px; padding: 4px 2px;
}
.funnel-msg {
  padding: 6px 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.03);
  border-left: 2px solid transparent; font-size: 11.5px; line-height: 1.35;
}
.funnel-msg-header { display: flex; align-items: center; gap: 5px; margin-bottom: 2px; font-size: 10px; }
.funnel-author { font-weight: 600; color: #cbd5e1; }
.funnel-amount { color: #eab308; font-weight: 700; font-family: ui-monospace, monospace; margin-left: auto; }
.funnel-trust, .funnel-demo { font-size: 0.68em; letter-spacing: 0.04em; text-transform: uppercase; color: #94a3b8; border: 1px solid rgba(148, 163, 184, 0.35); border-radius: 4px; padding: 0 4px; }
.funnel-body { color: #94a3b8; word-break: break-word; }

.funnel-priority-highlight {
  background: rgba(234, 179, 8, 0.1); border-left-color: #eab308;
  box-shadow: 0 0 10px rgba(234, 179, 8, 0.15);
}
.funnel-priority-highlight .funnel-body { color: #fef08a; font-weight: 500; }
.funnel-priority-founder {
  background: rgba(6, 182, 212, 0.12); border-left-color: #06b6d4;
}
.funnel-priority-founder .funnel-author { color: #22d3ee; }
.funnel-priority-founder .funnel-body { color: #e0f2fe; }
.funnel-priority-question { border-left-color: #38bdf8; }

.funnel-input-form { display: flex; gap: 6px; margin-top: auto; }
.funnel-twitch-form { display: flex; gap: 6px; }
.funnel-twitch-form input { flex: 1; min-width: 0; background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(148, 163, 184, 0.25); border-radius: 6px; color: #e2e8f0; padding: 5px 8px; font-size: 0.8em; }
.funnel-twitch-status { margin: 2px 0; font-size: 0.72em; color: #94a3b8; }
.funnel-twitch-status[data-state="live"] { color: #a78bfa; }
.funnel-twitch-status[data-state="error"] { color: #f87171; }
.funnel-input-form input {
  flex: 1; background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px; padding: 6px 10px; font-size: 11.5px; color: #f1f5f9;
}
.funnel-input-form input:focus { outline: none; border-color: #06b6d4; box-shadow: 0 0 8px rgba(6, 182, 212, 0.3); }

/* ---------- Welcome & Settings Glass Cards ---------- */
.welcome-card { width: min(440px, calc(100vw - 32px)); }
.welcome-features { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
.feature-item { display: flex; align-items: flex-start; gap: 12px; }
.feature-mark { font-size: 20px; line-height: 1.2; width: 28px; text-align: center; color: var(--noema); flex-shrink: 0; }
.welcome-footer { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--edge); }
.startup-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--dim); cursor: pointer; }
.settings-card { width: min(420px, calc(100vw - 32px)); }
.settings-section { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--edge); }
.settings-section h3 { margin: 0 0 6px 0; font-size: 14px; font-family: ui-sans-serif, system-ui, sans-serif; color: var(--ink); }
.canvas-options, .tool-options { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.canvas-btn, .tool-btn { font-size: 12px; padding: 5px 10px; border-radius: 8px; background: rgba(20, 24, 34, 0.6); }
.canvas-btn.active, .tool-btn.active { border-color: var(--noema); background: rgba(191, 227, 255, 0.22); color: var(--ink); font-weight: 600; }

/* ---------- Local store key and the commission draft ---------- */
.account-card { width: min(440px, calc(100vw - 32px)); }
.account-badge { font-size: 11px; padding: 2px 8px; border-radius: 12px; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--edge); color: var(--dim); margin-left: 6px; }
.account-badge[data-bound="true"] { border-color: var(--noema); color: var(--noema); }
.account-card-body { display: flex; flex-direction: column; gap: 14px; }
.commission-card { width: min(440px, calc(100vw - 32px)); }
.commission-body { display: flex; flex-direction: column; gap: 12px; }
.commission-field { display: flex; flex-direction: column; gap: 6px; color: var(--dim); font: 12px/1.3 ui-sans-serif, system-ui, sans-serif; }
.commission-field input, .commission-field textarea {
  width: 100%; min-height: 44px; color: var(--ink); background: var(--glass); border: 1px solid var(--edge); border-radius: 12px; padding: 10px 12px; font: 15px/1.4 ui-serif, Georgia, serif;
}
#commission-sign { min-height: 44px; }

/* ---------- Sovereign Terminal Card & Native Shell ---------- */
.terminal-card {
  width: min(780px, calc(100vw - 32px));
  height: min(520px, calc(100vh - 120px));
  display: flex;
  flex-direction: column;
  background: rgba(9, 13, 22, 0.88);
  border: 1px solid rgba(191, 227, 255, 0.24);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  overflow: hidden;
}

.terminal-card.card-fullscreen {
  left: 16px !important;
  top: 54px !important;
  right: 16px !important;
  bottom: 74px !important;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  transform: none !important;
  border-radius: 14px !important;
}
.terminal-card.card-fullscreen .terminal-toolbar {
  flex: 0 0 auto !important;
  max-height: 44px !important;
  padding: 8px 14px !important;
  background: rgba(10, 14, 22, 0.4);
  overflow: visible !important;
}
.terminal-card.card-fullscreen .terminal-viewport {
  flex: 1 1 auto !important;
  height: 100% !important;
  max-height: none !important;
  padding: 12px 14px !important;
}

.terminal-size-indicator {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--faint);
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 6px;
  border-radius: 4px;
}

.terminal-status-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
  transition: all 160ms ease;
}
.terminal-status-badge.status-online {
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.35);
  color: #4ade80;
  text-shadow: 0 0 8px rgba(74, 222, 128, 0.4);
}
.terminal-status-badge.status-offline {
  background: rgba(234, 179, 8, 0.12);
  border: 1px solid rgba(234, 179, 8, 0.3);
  color: #facc15;
}

.terminal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px;
  background: rgba(14, 18, 28, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  gap: 10px;
  flex-wrap: wrap;
}

.terminal-toolbar-left, .terminal-chips {
  display: flex;
  align-items: center;
  gap: 6px;
}

.terminal-btn {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--ink);
  cursor: pointer;
  transition: all 120ms ease;
}
.terminal-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(191, 227, 255, 0.35);
}

.terminal-chip {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10.5px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(191, 227, 255, 0.08);
  border: 1px solid rgba(191, 227, 255, 0.2);
  color: var(--noema);
  cursor: pointer;
  transition: all 120ms ease;
}
.terminal-chip:hover {
  background: rgba(191, 227, 255, 0.2);
  border-color: var(--noema);
  color: #fff;
}

.terminal-viewport {
  flex: 1;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 14px;
  background: rgba(5, 8, 14, 0.95);
  cursor: text;
  outline: none;
}

.terminal-screen {
  margin: 0;
  font-family: "JetBrains Mono", "Fira Code", "SF Mono", Consolas, Menlo, monospace;
  font-size: 13px;
  line-height: 1.45;
  color: #e2e8f0;
  white-space: pre-wrap;
  word-break: break-all;
  user-select: text;
  -webkit-user-select: text;
}

.terminal-screen::after {
  content: "▋";
  color: #38bdf8;
  animation: terminal-blink 1s step-start infinite;
  margin-left: 1px;
  text-shadow: 0 0 6px rgba(56, 189, 248, 0.6);
}

@keyframes terminal-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.terminal-hidden-input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

/* ANSI SGR Color & Format Tokens */
.ansi-bold { font-weight: 700; }
.ansi-dim { opacity: 0.65; }
.ansi-underline { text-decoration: underline; }
.ansi-fg-black { color: #1e293b; }
.ansi-fg-red { color: #f87171; }
.ansi-fg-green { color: #4ade80; }
.ansi-fg-yellow { color: #facc15; }
.ansi-fg-blue { color: #60a5fa; }
.ansi-fg-magenta { color: #c084fc; }
.ansi-fg-cyan { color: #38bdf8; }
.ansi-fg-white { color: #f1f5f9; }
.ansi-fg-bright-black { color: #64748b; }
.ansi-fg-bright-red { color: #fca5a5; }
.ansi-fg-bright-green { color: #86efac; }
.ansi-fg-bright-yellow { color: #fde047; }
.ansi-fg-bright-blue { color: #93c5fd; }
.ansi-fg-bright-magenta { color: #d8b4fe; }
.ansi-fg-bright-cyan { color: #7dd3fc; }
.ansi-fg-bright-white { color: #ffffff; }

.ansi-bg-black { background-color: #0f172a; }
.ansi-bg-red { background-color: #991b1b; }
.ansi-bg-green { background-color: #166534; }
.ansi-bg-yellow { background-color: #854d0e; }
.ansi-bg-blue { background-color: #1e40af; }
.ansi-bg-magenta { background-color: #6b21a8; }
.ansi-bg-cyan { background-color: #155e75; }
.ansi-bg-white { background-color: #cbd5e1; color: #0f172a; }

/* ---------- SmartHomies Earth Substrate Backdrop ---------- */
body[data-canvas-ground="earth"] {
  background: radial-gradient(circle at 50% 120%, rgba(30, 58, 138, 0.45) 0%, rgba(15, 23, 42, 0.95) 70%, #070a12 100%);
}
body[data-canvas-ground="earth"] canvas#world {
  filter: contrast(108%) saturate(120%);
}

/* Jev's readings of native work stay compact and legible on narrow Glass cards. */
#nt-native-work-status, .nt-jev-readings { overflow-wrap: anywhere; }
.nt-jev-readings { margin: 6px 0 0; padding-left: 16px; display: grid; gap: 4px; }

/* A closed Studio must not override the global hidden contract with its flex layout. */
.morphic-stage-chassis[hidden] { display: none !important; }

.native-task-root, .native-task-root .nt-section { min-width: 0; grid-template-columns: minmax(0, 1fr); overflow-wrap: anywhere; }
.native-task-root .nt-id-head > * { min-width: 0; }

/* The pill and the Omnistrip sit on the Glass. The Studio opens beside them, not inside a card. */
#card.pill-form {
  position: fixed;
  left: 50%;
  bottom: calc(78px + var(--keyboard-inset, 0px));
  transform: translateX(-50%);
  width: min(640px, calc(100vw - 24px));
  z-index: 32;
  pointer-events: auto;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 12px 14px 10px;
  border-radius: 22px;
  background: linear-gradient(165deg, rgba(26, 30, 42, 0.9), rgba(12, 16, 22, 0.94));
  border: 1px solid rgba(190, 222, 223, 0.22);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(22px);
}
#card.pill-form #line { margin: 0; font-size: 15px; line-height: 1.4; }
#card.pill-form .context { margin: 0; min-height: 0; font-size: 12px; color: #94a3b8; }
#card.pill-form .context:empty { display: none; }
#card.pill-form .omni-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 11px; color: #94a3b8; }
#card.pill-form .omni-intent:not([hidden]) {
  display: grid;
  gap: 8px;
  max-height: 220px;
  overflow: auto;
  padding: 8px;
  background: rgba(7, 12, 16, 0.96);
  border-radius: 12px;
}
body[data-omnistrip="true"] #omnistrip {
  position: fixed;
  left: 50%;
  bottom: max(10px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(960px, calc(100vw - 16px));
  margin: 0;
  z-index: 33;
  pointer-events: auto;
  border-radius: 16px;
  border: 0;
  background: transparent;
  box-shadow: none;
}
#omnicard {
  --tm-ink: var(--ink);
  --tm-dim: var(--dim);
  --tm-glass: var(--glass);
  --tm-edge: var(--edge);
  --tm-accent: var(--noema);
  --tm-radius: 22px;
  --tm-space: 12px;
  --tm-ease: cubic-bezier(0.16, 1, 0.3, 1);
  bottom: calc(78px + var(--keyboard-inset, 0px));
  color: var(--tm-ink);
  transition: width 320ms var(--tm-ease), max-height 320ms var(--tm-ease);
}
#omnicard .omni-pills-row { display: none !important; }
#omnicard .omni-grip { height: 8px; border-radius: 999px; background: var(--tm-edge); cursor: grab; touch-action: none; }
#omnicard.omni-tier-1 { flex-direction: row; align-items: flex-end; width: min(560px, calc(100vw - 24px)); }
#omnicard.omni-tier-1.omni-awake .omni-whisper-dock {
  display: inline-flex;
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0 8px 6px 0;
  justify-content: center;
  background: transparent;
  border: 0;
  box-shadow: none;
}
#omnicard.omni-tier-1.omni-awake .whisper-name,
#omnicard.omni-tier-1.omni-awake .whisper-sep,
#omnicard.omni-tier-1.omni-awake .whisper-deictic,
#omnicard.omni-tier-1.omni-awake .whisper-hint { display: none; }
#omnicard.omni-tier-1 .omni-thread,
#omnicard.omni-tier-1 #commission-draft,
#omnicard.omni-tier-1 .omni-canvas,
#omnicard.omni-tier-1 .who,
#omnicard.omni-tier-1 #line,
#omnicard.omni-tier-1 #context,
#omnicard.omni-tier-1 #inspect,
#omnicard.omni-tier-1 #omni-intent { display: none !important; }
#omnicard.omni-tier-2,
#omnicard.omni-tier-3 { width: min(640px, calc(100vw - 24px)); }
#omnicard.omni-tier-3 { width: min(1100px, calc(100vw - 24px)); }
#omnicard .omni-thread { max-height: min(42dvh, 420px); overflow: auto; }
#omnicard .commission-draft,
#omnicard .omni-canvas {
  display: grid;
  gap: var(--tm-space);
  padding: var(--tm-space);
  border: 1px solid var(--tm-edge);
  border-radius: var(--tm-radius);
  background: var(--tm-glass);
}
#omnicard .omni-canvas[hidden],
#omnicard .commission-draft[hidden],
#omnicard .omni-thread[hidden] { display: none !important; }
#omnicard .omni-wheel-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  background: transparent;
}
#omnicard .omni-wheel-step {
  min-height: 32px;
  padding: 4px 12px;
  background: transparent;
  color: var(--tm-dim);
  border: 1px solid var(--tm-edge);
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
  transition: transform 220ms var(--tm-ease), border-color 220ms var(--tm-ease), color 220ms var(--tm-ease);
}
#omnicard .omni-wheel-step.active,
#omnicard .omni-wheel-step:hover {
  color: var(--tm-ink);
  border-color: var(--tm-accent);
  background: transparent;
}
#omnicard .omni-wheel-meta {
  margin-left: auto;
  color: var(--tm-dim);
}
#omnicard .omni-manifold-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--tm-space);
  background: transparent;
}
#omnicard .omni-manifold-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
#omnicard .omni-manifold-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tm-space);
  align-items: stretch;
  background: transparent;
}
#omnicard .procedural-box {
  flex: 1 1 210px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  padding: var(--tm-space);
  background: transparent;
  color: var(--tm-ink);
  border: 1px solid var(--tm-edge);
  border-radius: var(--tm-radius);
  transform: scale(var(--voronoi-scale, 1));
  transform-origin: center center;
  transition: flex-grow 260ms var(--tm-ease), transform 260ms var(--tm-ease), border-color 220ms var(--tm-ease);
  cursor: pointer;
}
#omnicard .procedural-box:hover {
  border-color: var(--tm-accent);
}
#omnicard .procedural-box.depth-half { flex: 1 1 45%; }
#omnicard .procedural-box.depth-full { flex: 1 1 100%; border-color: var(--tm-accent); }
#omnicard .procedural-box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
#omnicard .procedural-box-sub { margin: 0; color: var(--tm-dim); }
#omnicard .procedural-box-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
#omnicard .procedural-ctrl-btn {
  min-height: 30px;
  padding: 2px 8px;
  font-size: 11px;
  background: transparent;
  color: var(--tm-ink);
  border: 1px solid var(--tm-edge);
  border-radius: 999px;
}
#omnicard .procedural-inyeon-ledger {
  display: grid;
  gap: 4px;
  padding: 6px 8px;
  background: transparent;
  border: 1px solid var(--tm-edge);
  border-radius: 10px;
  color: var(--tm-ink);
}
#omnicard .procedural-inyeon-row {
  font-size: 11px;
  line-height: 1.35;
  color: var(--tm-dim);
}
#omni-programs { display: flex; flex-wrap: wrap; gap: 8px; }
.omni-program, #commission-sign { min-height: 44px; background: transparent; color: var(--tm-ink, var(--ink)); border: 1px solid var(--tm-edge, var(--edge)); }
.glass-card.omni-span-half { width: min(50vw, 640px) !important; }
.glass-card.omni-span-full { width: min(100vw - 24px, 1200px) !important; }
#omnistrip #lander-button { color: var(--noema); }
#strip-activity-panel:not([hidden]) {
  position: fixed;
  left: 50%;
  bottom: calc(150px + var(--keyboard-inset, 0px));
  transform: translateX(-50%);
  width: min(420px, calc(100vw - 24px));
  z-index: 34;
  pointer-events: auto;
}
#studio-panel[hidden] { display: none !important; }
#glass > #studio-panel.morphic-stage-chassis:not([hidden]) {
  position: fixed;
  left: 50%;
  top: 56px;
  transform: translateX(-50%);
  width: min(1100px, calc(100vw - 24px)) !important;
  max-height: min(72dvh, 760px);
  overflow: auto;
  z-index: 27;
  pointer-events: auto;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(7, 12, 16, 0.96) !important;
}

/* Your Shape on the Glass (native-shape.mjs): what waits for you first, then everything home. */
.incision-card { width: min(520px, 92vw); }
.incision-card-body { display: grid; gap: 8px; padding: 10px 12px; max-height: 78vh; overflow: auto; overflow-wrap: anywhere; }
.incision-screen { position: relative; width: 100%; aspect-ratio: 4 / 3; min-height: 240px; touch-action: none; }
.incision-canvas { display: block; width: 100%; height: 100%; }
.incision-read-back, .incision-say { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.incision-line { flex: 1 1 100%; margin: 0; font-family: ui-monospace, monospace; }
.incision-panes, .incision-cut { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.incision-say input { flex: 1 1 200px; min-width: 0; }
.incision-note[data-loud="true"] { color: #ff9b8f; }
/* What the slab already shows stays in the shadow for a screen reader and a keyboard, and appears only while focused. */
.incision-sr:not(:focus-within) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.shape-card-body { display: grid; gap: 8px; padding: 10px 12px; max-height: 70vh; overflow: auto; overflow-wrap: anywhere; }
.shape-write { display: grid; gap: 6px; }
.shape-write textarea, .shape-write select, .shape-entry-actions input { font: inherit; color: #d4e4e6; background: #101c26; border: 1px solid rgba(190,222,219,.25); border-radius: 7px; padding: 6px 8px; min-width: 0; }
.shape-entries { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.shape-entry { border: 1px solid rgba(190,222,219,.18); border-radius: 8px; padding: 8px 10px; }
.shape-entry-body { margin: 2px 0 0; white-space: pre-wrap; }
.shape-entry-meta { margin: 0; }
.shape-carried { border-color: rgba(251,191,36,.5); }
.shape-disputed { opacity: .6; }
.shape-entry-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.shape-entry-actions input { flex: 1 1 140px; }
.shape-status.bad { color: #fca5a5; }
.shape-search { display: grid; gap: 6px; }
.shape-search input { font: inherit; color: #d4e4e6; background: #101c26; border: 1px solid rgba(190,222,219,.25); border-radius: 7px; padding: 6px 8px; min-width: 0; }
.shape-found { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.shape-share { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* Talking with Noema on the Glass (native-chat.mjs): what was said, oldest first, and a place to say more. */
/* The list gives way, so the place to write always stays inside the card. */
.chat-card-body { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; max-height: calc(100vh - 340px); min-width: 0; overflow-wrap: anywhere; }
.chat-card-body > :not(.chat-messages) { flex: none; }
.chat-messages { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; gap: 6px; flex: 1 1 auto; min-height: 80px; overflow: auto; }
.chat-message { border: 1px solid rgba(190,222,219,.18); border-radius: 8px; padding: 6px 10px; max-width: 92%; }
.chat-mine { justify-self: end; background: rgba(16,28,38,.6); }
.chat-hers { justify-self: start; border-color: rgba(167,139,250,.4); }
.chat-theirs { justify-self: start; }
.chat-meta, .chat-receipt, .chat-suggestion { margin: 0; }
.chat-suggestion-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 6px 0;
  padding: 8px 10px;
  background: rgba(142, 202, 230, 0.08);
  border: 1px solid rgba(142, 202, 230, 0.2);
  border-radius: 8px;
}
.suggestion-draft-btn {
  align-self: flex-start;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--tm-edge, var(--edge));
  color: var(--noema, #8ecae6);
  cursor: pointer;
}
.suggestion-draft-btn:hover {
  background: rgba(142, 202, 230, 0.18);
}
.chat-text { margin: 2px 0 0; white-space: pre-wrap; }
.chat-noticed { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.chat-problem, .chat-status.bad { color: #fca5a5; }
.chat-write { display: grid; gap: 6px; }
.chat-sends { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.chat-key { white-space: nowrap; font-family: ui-monospace, monospace; }
.chat-request, .chat-who { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chat-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chat-bar select { font: inherit; color: #d4e4e6; background: #101c26; border: 1px solid rgba(190,222,219,.25); border-radius: 7px; padding: 4px 6px; min-width: 0; max-width: 100%; }
.chat-write textarea { width: 100%; box-sizing: border-box; font: inherit; color: #d4e4e6; background: #101c26; border: 1px solid rgba(190,222,219,.25); border-radius: 7px; padding: 6px 8px; min-width: 0; resize: vertical; }