/* Novelle / Nova — a star becomes a useful presence. No ambient idle loops. */
.nai-introduction,
.nai-dock,
#nai-dialog {
  --nai-blue: #83c5ff;
  --nai-ice: #dfedff;
  --nai-line: rgba(179, 207, 239, .17);
  --nai-muted: #9caab9;
  --nai-ink: #070c13;
  font-family: "DM Sans", sans-serif;
  color: #f2f4f6;
}

.nai-introduction {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: fit-content;
  max-width: 100%;
  margin-top: 34px;
  isolation: isolate;
}

.nai-entry {
  position: relative;
  display: flex;
  align-items: center;
  gap: 17px;
  min-height: 91px;
  max-width: 100%;
  min-width: 0;
  padding: 12px 22px 12px 9px;
  overflow: visible;
  border: 1px solid var(--nai-line);
  border-radius: 4px;
  background: linear-gradient(120deg, rgba(21, 34, 50, .72), rgba(8, 14, 22, .58));
  box-shadow: inset 0 1px 0 rgba(236, 247, 255, .035), 0 12px 38px rgba(0, 0, 0, .14);
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
}

.nai-entry:hover,
.nai-entry:focus-visible {
  border-color: rgba(158, 208, 255, .55);
  background: linear-gradient(120deg, rgba(27, 48, 72, .83), rgba(8, 17, 29, .78));
  box-shadow: inset 0 1px 0 rgba(236, 247, 255, .06), 0 0 30px rgba(52, 130, 219, .12);
}

.nai-entry:focus-visible,
.nai-replay:focus-visible,
.nai-dock:focus-visible,
#nai-dialog button:focus-visible,
#nai-dialog textarea:focus-visible,
#nai-dialog a:focus-visible {
  outline: 2px solid #add9ff;
  outline-offset: 5px;
}

.nai-mark {
  position: relative;
  display: grid;
  flex: 0 0 66px;
  width: 66px;
  height: 66px;
  place-items: center;
  isolation: isolate;
}

.nai-mark .nai-halo,
.nai-mark .nai-orbit {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.nai-mark .nai-halo {
  inset: -14px;
  opacity: .66;
  background: radial-gradient(ellipse, rgba(104, 178, 255, .22), rgba(54, 117, 203, .065) 42%, transparent 70%);
}

.nai-mark .nai-orbit {
  inset: 6px;
  border: 1px solid rgba(150, 200, 248, .12);
  border-radius: 50%;
  transform: rotate(-28deg) scaleY(.62);
}

.nai-mark .nai-star {
  position: relative;
  display: block;
  width: 45px;
  height: 45px;
  overflow: visible;
  filter: drop-shadow(0 0 8px rgba(154, 209, 255, .44));
  transition: filter .35s ease, transform .5s cubic-bezier(.2, .8, .2, 1);
}

.nai-entry:hover .nai-star {
  filter: drop-shadow(0 0 13px rgba(154, 209, 255, .76));
  transform: rotate(10deg);
}

.nai-invitation {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.nai-invitation small,
.nai-kicker,
.nai-presence > small,
.nai-conversation header small {
  display: block;
  font-size: 9px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: #91abc4;
}

.nai-invitation > span {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: #b2bdca;
}

.nai-invitation strong {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: #eff5fd;
}

.nai-invitation strong svg {
  width: 17px;
  height: 17px;
  margin-left: auto;
  color: #b5d9ff;
  transition: transform .25s ease;
}

.nai-entry:hover .nai-invitation strong svg { transform: translateX(3px); }
.nai-entry.is-arriving { border-color: rgba(102, 165, 228, .24); }
.nai-entry.is-arriving .nai-star { opacity: .23; filter: none; }
.nai-entry.is-forming { border-color: rgba(174, 197, 214, .32); box-shadow: inset 0 1px 0 rgba(225, 236, 244, .05); }
.nai-entry.is-forming .nai-star { opacity: 1; animation: none; }
.nai-entry.is-awake .nai-invitation small { color: #9acbff; }

.nai-replay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 7px;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 0;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: #94a1b0;
  font: inherit;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: .02em;
  cursor: pointer;
  transition: color .2s ease;
}
.nai-replay svg { width: 14px; height: 14px; }
.nai-replay:hover { color: #d9eaff; }
.nai-replay:disabled { opacity: .4; cursor: default; }

#nai-sky {
  position: fixed;
  z-index: 65;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  contain: strict;
}
#nai-sky[hidden],
#nai-dock[hidden] { display: none !important; }

.nai-dock {
  position: fixed;
  z-index: 70;
  top: var(--nai-dock-top, 110px);
  right: max(24px, env(safe-area-inset-right));
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 5px 16px 5px 4px;
  border: 1px solid rgba(164, 202, 241, .24);
  border-radius: 4px;
  background: rgba(6, 13, 23, .94);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .035);
  cursor: pointer;
}
.nai-dock .nai-mark { flex-basis: 40px; width: 40px; height: 40px; }
.nai-dock .nai-star { width: 30px; height: 30px; }
.nai-dock .nai-orbit { inset: 3px; }
.nai-dock > span:last-child { display: grid; gap: 1px; font-size: 12px; line-height: 1.45; }
.nai-dock small { color: #91b7df; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.nai-dock:hover { border-color: rgba(154, 210, 255, .6); }

/* A blue reflected burst, while the page and card remain readable. */
body.nai-awakened .site-header {
  transition: box-shadow 2s ease, border-bottom-color 2s ease;
}
body.nai-awakened .hero h1 { transition: text-shadow 2s ease; }
body.nai-awakened .key-card-scene { transition: filter 2s ease; }
body.nai-supernova .site-header,
body.nai-supernova header.header,
body.nai-supernova .header {
  border-bottom-color: rgba(140, 201, 255, .55);
  box-shadow: 0 8px 70px rgba(146, 210, 238, .18);
}
body.nai-supernova .hero h1 {
  text-shadow: none;
}
body.nai-supernova .nai-impact-target,
body.nai-supernova .key-card-scene {
  filter: drop-shadow(0 0 12px rgba(184, 223, 246, .34)) drop-shadow(0 0 40px rgba(122, 187, 221, .18));
}

#nai-dialog {
  position: fixed;
  inset: 0;
  width: min(980px, calc(100vw - 48px));
  max-width: none;
  height: min(660px, calc(100dvh - 64px));
  max-height: calc(100dvh - 64px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(149, 187, 226, .26);
  border-radius: 8px;
  background: #080d15;
  box-shadow: 0 34px 130px rgba(0, 0, 0, .76), 0 0 90px rgba(29, 76, 136, .13);
  color-scheme: dark;
}
#nai-dialog::backdrop {
  background: rgba(0, 4, 10, .8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.nai-window { position: relative; display: grid; grid-template-columns: 32% minmax(0, 1fr); width: 100%; height: 100%; min-height: 0; }
.nai-window button,
.nai-window textarea { font-family: inherit; }
.nai-window button { -webkit-tap-highlight-color: transparent; }

.nai-presence {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 0;
  padding: 36px 30px 26px;
  overflow: hidden;
  border-right: 1px solid var(--nai-line);
  background: radial-gradient(ellipse at 50% 43%, rgba(28, 66, 116, .29), transparent 63%), linear-gradient(160deg, #0d1725, #080e17 70%);
  text-align: center;
  isolation: isolate;
}
.nai-presence > .nai-kicker { align-self: flex-start; margin: 0; color: #8a9fb6; }
.nai-universe {
  position: relative;
  display: grid;
  flex: 0 0 210px;
  width: 210px;
  height: 210px;
  max-width: 100%;
  margin: 25px 0 16px;
  place-items: center;
  isolation: isolate;
}
.nai-field,
.nai-universe > .nai-ring,
.nai-universe > .nai-ring-one,
.nai-universe > .nai-ring-two,
.nai-universe > .nai-ring-three,
.nai-universe > .nai-signal { position: absolute; pointer-events: none; }
.nai-field {
  inset: -25%;
  opacity: .8;
  background: radial-gradient(ellipse, rgba(117, 192, 255, .15), rgba(46, 108, 195, .06) 30%, transparent 62%);
  transition: opacity .5s ease;
}
.nai-universe > .nai-ring,
.nai-universe > .nai-ring-one,
.nai-universe > .nai-ring-two,
.nai-universe > .nai-ring-three {
  inset: 5%;
  border: 1px solid rgba(150, 194, 244, .12);
  border-radius: 50%;
}
.nai-universe > .nai-ring-one { inset: 6%; transform: rotate(-31deg) scaleY(.65); }
.nai-universe > .nai-ring-two { inset: 18%; border-color: rgba(168, 209, 253, .12); transform: rotate(48deg) scaleY(.6); }
.nai-universe > .nai-ring-three { inset: 1%; border-style: dotted; border-color: rgba(150, 194, 244, .11); }
.nai-universe > .nai-presence-star { position: relative; z-index: 1; width: 104px; height: 104px; overflow: visible; filter: drop-shadow(0 0 16px rgba(123, 194, 255, .6)); }
.nai-universe > .nai-signal { inset: 33%; border: 1px solid rgba(155, 215, 255, .3); border-radius: 50%; opacity: 0; }
.nai-presence h2 { margin: 0 0 11px; font-family: "Cormorant Garamond", Georgia, serif; font-size: 43px; font-weight: 400; line-height: .98; letter-spacing: -.035em; }
.nai-presence > p { max-width: 225px; margin: 0; color: #9eafc3; font-size: 12px; line-height: 1.8; }
.nai-mic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 47px;
  margin-top: auto;
  padding: 12px 14px;
  border: 1px solid rgba(153, 204, 254, .35);
  border-radius: 3px;
  background: linear-gradient(120deg, rgba(50, 96, 148, .24), rgba(21, 46, 77, .2));
  color: #e6f2ff;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.nai-mic svg { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 17px; width: 17px; height: 17px; }
.nai-mic:hover { background: rgba(53, 111, 175, .25); border-color: #8cc6ff; }
.nai-mic:disabled { opacity: .45; cursor: default; }
.nai-status { min-height: 30px; margin-top: 11px; color: #879bb2; font-size: 10px; line-height: 1.5; }

.nai-conversation {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 27px 30px 16px;
  background: linear-gradient(135deg, rgba(14, 23, 35, .52), transparent 60%);
}
.nai-conversation > header,
.nai-conversation .nai-conversation-header { position: relative; flex: 0 0 auto; padding: 0 46px 21px 0; border-bottom: 1px solid var(--nai-line); }
.nai-conversation header .nai-kicker { margin: 0 0 7px; color: #8fabc6; }
.nai-conversation h3 { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: 29px; font-weight: 400; line-height: 1.1; letter-spacing: -.02em; }
.nai-close { position: absolute; top: -8px; right: -10px; font-size: 27px; font-weight: 300; line-height: 1; display: grid; width: 44px; height: 44px; padding: 13px; place-items: center; border: 0; border-radius: 3px; background: transparent; color: #9baabc; cursor: pointer; }
.nai-close svg { width: 18px; height: 18px; }
.nai-close:hover { background: rgba(162, 201, 244, .07); color: #fff; }
.nai-messages,
.nai-conversation [role="log"] { flex: 1 1 auto; min-height: 90px; margin: 0 -8px 0 0; padding: 23px 8px 18px 0; overflow: auto; overscroll-behavior: contain; scrollbar-color: #2b3c50 transparent; scrollbar-width: thin; }
.nai-message { width: fit-content; max-width: 94%; margin: 0 0 19px; color: #d0d9e4; font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; white-space: pre-wrap; }
.nai-message > strong { display: block; margin-bottom: 6px; color: #8faac6; font-size: 9px; font-weight: 500; line-height: 1.4; letter-spacing: .13em; text-transform: uppercase; }
.nai-message[data-role="notice"] { padding: 11px 13px; border: 1px solid rgba(153, 182, 213, .18); border-radius: 3px; color: #93a8bf; font-size: 11px; }
.nai-message p { margin: 0 0 9px; }
.nai-message p:last-child { margin-bottom: 0; }
.nai-message[data-role="assistant"],
.nai-message--assistant { padding-left: 15px; border-left: 1px solid rgba(133, 194, 255, .38); }
.nai-message[data-role="user"],
.nai-message--user { margin-left: auto; padding: 11px 15px; border: 1px solid rgba(133, 175, 221, .13); border-radius: 5px 5px 0 5px; background: #111f30; color: #e3eaf3; }
.nai-message a { color: #a9d6ff; text-decoration: underline; text-underline-offset: 3px; }
.nai-message small { display: block; margin-bottom: 6px; color: #8399af; font-size: 9px; font-weight: 500; line-height: 1.4; letter-spacing: .13em; text-transform: uppercase; }
.nai-prompts { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 7px; margin: 0 0 14px; }
.nai-prompts button { min-height: 36px; padding: 7px 11px; border: 1px solid rgba(151, 189, 229, .18); border-radius: 3px; background: rgba(17, 29, 44, .45); color: #aebed0; font-size: 10px; line-height: 1.45; text-align: left; cursor: pointer; transition: color .2s ease, border-color .2s ease; }
.nai-prompts button:hover { border-color: rgba(153, 203, 251, .48); color: #e3f0ff; }
.nai-form { position: relative; display: flex; align-items: flex-end; flex: 0 0 auto; gap: 10px; margin: 0; padding: 9px 9px 9px 14px; border: 1px solid rgba(153, 190, 232, .27); border-radius: 4px; background: #0c1521; transition: border-color .2s ease; }
.nai-form:focus-within { border-color: rgba(139, 200, 255, .66); }
.nai-compose textarea { display: block; flex: 1 1 auto; width: 100%; min-width: 0; min-height: 44px; max-height: 110px; margin: 0; padding: 10px 0 8px; resize: vertical; border: 0; border-radius: 0; outline: none !important; background: transparent; color: #edf4fc; font-size: 13px; line-height: 1.7; box-shadow: none; }
.nai-compose textarea::placeholder { color: #72879e; opacity: 1; }
.nai-compose button { display: grid; flex: 0 0 42px; width: 42px; height: 44px; padding: 12px; place-items: center; border: 1px solid rgba(188, 221, 255, .35); border-radius: 2px; background: linear-gradient(145deg, #c5d9ed, #8ca8c5); color: #102137; cursor: pointer; transition: background .2s ease; }
.nai-compose button svg { width: 18px; height: 18px; }
.nai-compose button:hover { background: #d4e7fa; }
.nai-compose button:disabled { opacity: .35; cursor: default; }
.nai-compose { flex: 0 0 auto; }
.nai-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.nai-note { flex: 0 0 auto; margin: 10px 0 0; color: #6e8198; font-size: 9px; line-height: 1.6; }
.nai-bottom { display: flex; flex: 0 0 auto; align-items: center; flex-wrap: wrap; gap: 2px 17px; margin-top: 7px; }
.nai-bottom button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 36px; padding: 5px 0; border: 0; background: transparent; color: #8195ab; font-size: 9px; line-height: 1.5; cursor: pointer; }
.nai-bottom button svg { width: 12px; height: 12px; }
.nai-bottom button:hover { color: #d7eaff; }
.nai-bottom button:disabled { opacity: .4; cursor: default; }

/* Ring activity is tied to real connection / microphone / response state. */
#nai-dialog[data-state="connecting"] .nai-signal { animation: nai-signal 1.8s ease-out infinite; }
#nai-dialog[data-state="listening"] .nai-field { opacity: 1; }
#nai-dialog[data-state="listening"] .nai-signal { animation: nai-signal 1.3s ease-out infinite; border-color: rgba(161, 224, 255, .65); }
#nai-dialog[data-state="listening"] .nai-mic { border-color: #b2dfff; background: rgba(50, 116, 184, .3); }
#nai-dialog[data-state="thinking"] .nai-ring-three { border-style: solid; border-color: rgba(159, 210, 255, .08); border-top-color: rgba(159, 210, 255, .7); animation: nai-orbit-turn 4s linear infinite; }
#nai-dialog[data-state="speaking"] .nai-signal { animation: nai-signal 2.2s ease-out infinite; }
#nai-dialog[data-state="speaking"] .nai-presence-star { filter: drop-shadow(0 0 23px rgba(123, 194, 255, .85)); }
#nai-dialog[data-state="unavailable"] .nai-universe { opacity: .48; }

@keyframes nai-signal {
  0% { opacity: .55; transform: scale(.9); }
  85%, 100% { opacity: 0; transform: scale(2.5); }
}
@keyframes nai-orbit-turn { to { transform: rotate(360deg); } }

@media (max-width: 1050px) and (min-width: 761px) {
  #nai-dialog { width: calc(100vw - 32px); }
  .nai-window { grid-template-columns: 30% minmax(0, 1fr); }
  .nai-presence { padding: 30px 21px 24px; }
  .nai-universe { width: 200px; height: 200px; flex-basis: 200px; margin-top: 45px; }
  .nai-presence h2 { font-size: 42px; }
  .nai-conversation { padding-right: 24px; padding-left: 24px; }
}

@media (min-width: 761px) and (max-height: 730px) {
  .nai-presence { padding-top: 26px; padding-bottom: 18px; }
  .nai-universe { width: 170px; height: 170px; flex-basis: 170px; margin: 17px 0 12px; }
  .nai-universe > .nai-presence-star { width: 88px; height: 88px; }
  .nai-presence h2 { font-size: 38px; margin-bottom: 8px; }
  .nai-presence > p { font-size: 11px; }
}

@media (max-width: 760px), (max-width: 1000px) and (max-height: 550px) {
  .nai-introduction { gap: 10px; margin-top: 26px; }
  .nai-entry { gap: 9px; min-height: 84px; padding: 9px 15px 9px 4px; }
  .nai-mark { flex-basis: 58px; width: 58px; height: 58px; }
  .nai-mark .nai-star { width: 39px; height: 39px; }
  .nai-invitation { gap: 4px; }
  .nai-invitation small { font-size: 8px; letter-spacing: .14em; }
  .nai-invitation > span { max-width: 200px; font-size: 10px; }
  .nai-invitation strong { gap: 16px; font-size: 12px; }
  .nai-replay { gap: 4px; max-width: 55px; font-size: 9px; line-height: 1.6; }
  .nai-dock { top: var(--nai-dock-top, 96px); right: max(16px, env(safe-area-inset-right)); min-height: 48px; padding-right: 12px; }
  .nai-dock .nai-mark { flex-basis: 35px; width: 35px; height: 35px; }
  .nai-dock .nai-star { width: 27px; height: 27px; }
  .nai-dock > span:last-child { font-size: 11px; }
  #nai-dialog { width: calc(100vw - 20px); height: min(820px, calc(100dvh - 20px)); max-height: calc(100dvh - 20px); border-radius: 6px; }
  .nai-window { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .nai-presence { display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; grid-template-rows: auto auto auto; align-items: center; column-gap: 14px; min-height: 113px; padding: 15px 20px; border-right: 0; border-bottom: 1px solid var(--nai-line); text-align: left; background: radial-gradient(ellipse at 14% 50%, rgba(43, 93, 153, .24), transparent 65%), #0b1421; }
  .nai-presence > .nai-kicker { grid-column: 2; grid-row: 1; align-self: end; margin: 0 0 5px; font-size: 8px; }
  .nai-universe { grid-column: 1; grid-row: 1 / 4; width: 78px; height: 78px; max-width: none; margin: 0; }
  .nai-universe > .nai-presence-star { width: 64px; height: 64px; }
  .nai-presence h2 { grid-column: 2; grid-row: 2; align-self: start; margin: 0; font-size: 27px; }
  .nai-presence > p { display: none; }
  .nai-mic { grid-column: 3; grid-row: 1 / 4; width: 46px; min-height: 46px; margin: 0 22px 0 0; padding: 13px; }
  .nai-mic svg { flex-basis: 18px; width: 18px; height: 18px; }
  .nai-mic span { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .nai-status { display: block; grid-column: 2; grid-row: 3; margin: 6px 0 0; font-size: 9px; }
  .nai-conversation { padding: 17px 20px 10px; }
  .nai-conversation > header,
  .nai-conversation .nai-conversation-header { padding: 0 0 13px; }
  .nai-conversation header .nai-kicker { display: none; }
  .nai-conversation h3 { font-size: 23px; }
  .nai-header { position: static !important; }
  .nai-close { top: 3px; right: 3px; }
  .nai-messages,
  .nai-conversation [role="log"] { min-height: 50px; padding-top: 18px; padding-bottom: 9px; }
  .nai-message { max-width: 96%; font-size: 12px; line-height: 1.75; margin-bottom: 16px; }
  .nai-prompts { gap: 6px; margin-bottom: 11px; }
  .nai-prompts button { min-height: 44px; padding: 7px 9px; font-size: 10px; }
  .nai-form { gap: 8px; padding-left: 11px; }
  .nai-compose textarea { min-height: 44px; max-height: 90px; font-size: 16px; line-height: 1.5; }
  .nai-note { margin-top: 8px; font-size: 8px; }
  .nai-bottom { column-gap: 16px; margin-top: 2px; }
  .nai-bottom button { min-height: 38px; font-size: 9px; }
}

@media (max-width: 380px) {
  .nai-introduction { gap: 7px; }
  .nai-entry { gap: 5px; padding-right: 10px; }
  .nai-mark { flex-basis: 48px; width: 48px; height: 48px; }
  .nai-mark .nai-star { width: 34px; height: 34px; }
  .nai-invitation > span { max-width: 158px; font-size: 9px; }
  .nai-invitation strong { gap: 11px; font-size: 11px; }
  .nai-invitation strong svg { width: 14px; height: 14px; }
  .nai-replay { max-width: 44px; }
  .nai-presence { grid-template-columns: 68px minmax(0, 1fr) auto; column-gap: 10px; min-height: 103px; padding: 13px 14px; }
  .nai-universe { width: 68px; height: 68px; }
  .nai-universe > .nai-presence-star { width: 58px; height: 58px; }
  .nai-presence h2 { font-size: 25px; }
  .nai-mic { margin-right: 20px; width: 44px; min-height: 44px; padding: 12px; }
  .nai-conversation { padding-right: 14px; padding-left: 14px; }
  .nai-close { top: 1px; right: 1px; }
  .nai-conversation h3 { font-size: 21px; }
  .nai-bottom { column-gap: 13px; }
}

/* Short visual viewport: give the message area and keyboard the available room. */
@media (max-width: 1000px) and (max-height: 550px) {
  #nai-dialog { height: calc(100dvh - 12px); max-height: calc(100dvh - 12px); }
  .nai-presence { grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-rows: 1fr; min-height: 62px; padding: 7px 14px; column-gap: 12px; }
  .nai-presence > .nai-kicker { display: none; }
  .nai-universe { grid-row: 1; width: 48px; height: 48px; }
  .nai-universe > .nai-presence-star { width: 36px; height: 36px; }
  .nai-presence h2 { grid-row: 1; align-self: center; font-size: 21px; }
  .nai-presence h2 br { display: none; }
  .nai-status { display: none; }
  .nai-mic { grid-row: 1; margin-right: 28px; }
  .nai-conversation { padding-top: 12px; }
  .nai-conversation > header,
  .nai-conversation .nai-conversation-header { padding-right: 35px; }
  .nai-close { top: 2px; right: 2px; }
  .nai-prompts { display: none; }
  .nai-note { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nai-entry,
  .nai-entry *,
  .nai-dock *,
  #nai-dialog * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  #nai-sky { display: none !important; }
  .nai-entry.is-arriving .nai-star { opacity: 1; }
}
body.nai-motion-off .nai-entry *,
body.nai-motion-off .nai-dock *,
body.nai-motion-off #nai-dialog * { animation: none !important; transition: none !important; }
body.nai-motion-off #nai-sky { display: none !important; }

/* The exact card medallion is the collision origin, even in perspective. */
.nai-impact-anchor{position:absolute;left:50%;top:50%;width:0;height:0;transform:translateZ(1px);pointer-events:none}
.nai-afterglow{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 72% 26%,#6aa2c01e,transparent 57%),radial-gradient(ellipse at 14% 58%,#315c7512,transparent 60%);transition:opacity 2.4s ease}
body.nai-awakened .nai-afterglow{opacity:1}
.nai-mark{transform:perspective(420px) rotateX(var(--nai-rx,0deg)) rotateY(var(--nai-ry,0deg));transition:transform .22s ease}
@media(prefers-reduced-motion:reduce){.nai-afterglow{transition:none}}
body.nai-motion-off .nai-afterglow{transition:none}

/* The energy field is simulated on the optical canvas. Brand marks stay in
   their buttons and become visible as the field physically settles. */
.nai-mark.nai-handoff-mark {
  opacity: var(--nai-handoff-alpha, 0);
  transition: none;
  pointer-events: none;
}