:root {
  --obsidian: #0d1b2a;
  --carbon: #1e2d3d;
  --plasma-cyan: #5dd9c1;
  --hyper-gold: #f5b041; /* app alias sunbeam */
  --lavender-gold: #b8a9d9; /* named hyperGold in app */
  --stardust: #e4edf6;
  --ghost: #98a9bc;
  --max-width: 1180px;
  --radius: 18px;
  --shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  --tuning-track: rgba(93, 217, 193, 0.2);
  --tuning-fill: linear-gradient(90deg, rgba(93, 217, 193, 0.9), rgba(184, 169, 217, 0.9));
  --tuning-panel-bg: rgba(10, 22, 38, 0.78);
  --tuning-panel-border: rgba(93, 217, 193, 0.24);
  --executive-studio-bg: rgba(6, 18, 31, 0.72);
  --executive-studio-border: rgba(245, 176, 65, 0.42);
  --executive-card-bg: rgba(8, 21, 38, 0.88);
  --executive-card-border: rgba(141, 166, 197, 0.48);
  --executive-card-active: rgba(245, 176, 65, 0.78);
  --executive-copy: rgba(214, 226, 240, 0.88);
  --chat-display-pill-bg: rgba(16, 30, 48, 0.8);
  --chat-display-pill-border: rgba(93, 217, 193, 0.34);
  --chat-display-pill-active-bg: #123f52;
  --chat-display-pill-active-border: rgba(93, 217, 193, 0.72);
  --chat-display-stage-bg: linear-gradient(180deg, rgba(13, 31, 52, 0.42), rgba(5, 14, 28, 0.88));
  --persona-orb-size: 88px;
  --chat-message-avatar-size: var(--persona-orb-size);
  --chat-visual-orb-size: clamp(132px, 22vw, 260px);
  --chat-visual-orb-size-mobile: clamp(108px, 30vw, 130px);
  --persona-orb-size-mobile: 52px;
  --chat-message-avatar-size-mobile: 32px;
  --chat-box-height-desktop: clamp(860px, 79vh, 1220px);
  --chat-box-height-mobile: clamp(760px, 82vh, 1040px);
  --chat-side-visual-width-desktop: clamp(160px, 17vw, 250px);
  --header-app-icon-size: 72px;
  --header-app-icon-size-mobile: 62px;
  --trust-pill-bg: rgba(8, 18, 34, 0.84);
  --trust-pill-border: rgba(93, 217, 193, 0.32);
  --trust-pill-accent: rgba(245, 176, 65, 0.54);
  --trust-pill-text: #dce9f8;
  --trust-pill-muted: #a5b7cc;
  --voice-cyan: #7fe8ff;
  --voice-cyan-border: rgba(127, 232, 255, 0.34);
  --voice-cyan-surface: rgba(11, 37, 52, 0.78);
  --header-pill-bg: rgba(11, 24, 40, 0.9);
  --header-pill-bg-strong: rgba(14, 31, 50, 0.96);
  --header-pill-border: rgba(127, 191, 229, 0.34);
  --header-pill-border-strong: rgba(141, 239, 255, 0.56);
  --header-pill-text: rgba(236, 245, 255, 0.96);
  --header-pill-muted: rgba(196, 214, 232, 0.92);
  --header-pill-active-bg: linear-gradient(135deg, rgba(20, 66, 86, 0.96), rgba(13, 43, 59, 0.96));
  --header-pill-active-shadow: 0 12px 26px rgba(3, 12, 24, 0.34);
  --veda-panel-bg: linear-gradient(145deg, rgba(9, 23, 40, 0.96), rgba(7, 18, 33, 0.92));
  --veda-panel-border: rgba(127, 191, 229, 0.34);
  --veda-panel-copy: rgba(228, 237, 246, 0.96);
  --veda-panel-muted: rgba(173, 194, 214, 0.9);
  --veda-panel-warm: rgba(245, 176, 65, 0.88);
  --veda-panel-cool: rgba(93, 217, 193, 0.9);
}

[hidden] {
  display: none !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--stardust);
  background: radial-gradient(circle at 20% 20%, rgba(93, 217, 193, 0.08), transparent 25%),
              radial-gradient(circle at 80% 0%, rgba(245, 176, 65, 0.06), transparent 30%),
              #050b16;
  min-height: 100vh;
}

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

body.aeliana-modal-open {
  overflow: hidden;
}

a { color: var(--plasma-cyan); }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

header {
  padding: 28px 0 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.home-header {
  /* Layout: logo left, title centered (includes nav), actions right. */
  display: grid;
  grid-template-columns: minmax(64px, auto) minmax(0, 1fr) minmax(0, auto);
  grid-template-areas: "mark title actions";
  align-items: start;
  column-gap: 14px;
  row-gap: 10px;
  padding-bottom: 12px;
}

.home-header .brand-mark-shell { grid-area: mark; justify-self: start; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.home-header .brand-mark { justify-self: start; }
.home-header .brand-title { grid-area: title; justify-self: stretch; width: min(100%, 1240px); }
.home-header-main {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.home-header .header-actions {
  grid-area: actions;
  justify-self: end;
  align-self: stretch;
  margin-left: 0;
  max-width: min(100%, 292px);
  min-width: 0;
}

.surface-tabs {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
}

.surface-tabs a {
  border: 1px solid var(--header-pill-border);
  border-radius: 999px;
  padding: 8px 11px;
  color: var(--header-pill-text);
  text-decoration: none;
  background: linear-gradient(180deg, rgba(16, 31, 50, 0.96), rgba(10, 21, 35, 0.94));
  box-shadow: 0 10px 22px rgba(2, 10, 20, 0.24);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.surface-tabs a[data-surface-label="memory-reel"] {
  letter-spacing: 0.035em;
}

.surface-tabs a:hover,
.surface-tabs a:focus-visible {
  color: #f8fdff;
  border-color: var(--header-pill-border-strong);
  background: linear-gradient(180deg, rgba(23, 43, 69, 0.98), rgba(12, 28, 46, 0.98));
  box-shadow: 0 12px 24px rgba(2, 10, 20, 0.3);
  outline: none;
}

.surface-tabs a.is-active {
  color: #f8fdff;
  border-color: rgba(123, 239, 220, 0.72);
  background: linear-gradient(135deg, rgba(14, 50, 67, 0.98), rgba(12, 32, 47, 0.98));
  box-shadow: 0 14px 28px rgba(2, 10, 20, 0.32);
}

@media (max-width: 820px) {
  .home-header {
    grid-template-columns: 1fr;
    grid-template-areas:
      "mark"
      "title"
      "actions";
    justify-items: center;
    text-align: center;
    align-items: center;
  }

  .home-header .brand-mark-shell { justify-self: center; align-items: center; }
  .home-header .brand-mark { justify-self: center; }
  .home-header .brand-mark img { width: var(--header-app-icon-size-mobile); }
  .home-header .brand-title { justify-self: center; align-items: center; text-align: center; }
  .home-header .brand-title .name { text-align: center; }
  .home-header .brand-title .brand-subtitle { text-align: center; }

  .home-header .header-actions {
    justify-self: center;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .home-header .header-auth-shell { width: 100%; justify-content: center; }
  .home-header .header-auth-actions { justify-content: center; flex-wrap: wrap; }
  .home-header .header-auth-actions button,
  .home-header .header-auth-actions a { min-height: 38px; padding: 7px 12px; }
  .home-header .view-toggle { width: 100%; justify-content: center; }

  .home-header-main {
    width: 100%;
    gap: 12px;
  }
  .home-header .site-nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin: 0;
    justify-content: stretch;
  }
  .home-header .site-nav > :not(.site-nav-mobile-root) {
    display: none !important;
  }
  .home-header .site-nav .site-nav-mobile-root {
    display: block;
  }
  .home-header .site-nav a,
  .home-header .site-nav summary {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 12px;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
  }
  .home-header .site-nav-menu {
    width: 100%;
  }
  .home-header .site-nav-panel {
    left: 0;
    right: 0;
    min-width: 0;
  }
  .home-header .surface-tabs {
    display: none;
  }
  .home-header .surface-tabs a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 12px;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
  }
  .home-header .room-ai-presence {
    justify-items: center;
    width: 100%;
  }
  .home-header .room-ai-presence-copy {
    text-align: center;
  }
}

/* "Mobile view" preview toggle uses a fixed max-width container but does not change viewport size.
   Apply the same stacked header layout so preview matches real mobile breakpoints. */
body.view-mobile .home-header {
  grid-template-columns: 1fr;
  grid-template-areas:
    "mark"
    "title"
    "actions";
  justify-items: center;
  text-align: center;
  align-items: center;
}

body.view-mobile .home-header .brand-mark-shell { justify-self: center; align-items: center; }
body.view-mobile .home-header .brand-mark { justify-self: center; }
body.view-mobile .home-header .brand-mark img { width: var(--header-app-icon-size-mobile); }
body.view-mobile .home-header .brand-title { justify-self: center; align-items: center; text-align: center; }
body.view-mobile .home-header .brand-title .name { text-align: center; }
body.view-mobile .home-header .brand-title .brand-subtitle { text-align: center; }
body.view-mobile .home-header .header-actions {
  justify-self: center;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex-wrap: wrap;
  row-gap: 8px;
}
body.view-mobile .home-header .header-auth-shell { width: 100%; justify-content: center; }
body.view-mobile .home-header .header-auth-actions { justify-content: center; flex-wrap: wrap; }
body.view-mobile .home-header .header-auth-actions button,
body.view-mobile .home-header .header-auth-actions a { min-height: 38px; padding: 7px 12px; }
body.view-mobile .home-header .view-toggle { width: 100%; justify-content: center; }
body.view-mobile .home-header-main {
  width: 100%;
  gap: 12px;
}
body.view-mobile .home-header .site-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin: 0;
  justify-content: stretch;
}
body.view-mobile .home-header .site-nav > :not(.site-nav-mobile-root) {
  display: none !important;
}
body.view-mobile .home-header .site-nav .site-nav-mobile-root {
  display: block;
}
body.view-mobile .home-header .site-nav a,
body.view-mobile .home-header .site-nav summary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 12px;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
}
body.view-mobile .home-header .site-nav-menu {
  width: 100%;
}
body.view-mobile .home-header .site-nav-panel {
  left: 0;
  right: 0;
  min-width: 0;
}
body.view-mobile .home-header .surface-tabs {
  display: none;
}
body.view-mobile .home-header .surface-tabs a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 12px;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
}
body.view-mobile .home-header .room-ai-presence {
  justify-items: center;
  width: 100%;
}
body.view-mobile .home-header .room-ai-presence-copy {
  text-align: center;
}

@media (max-width: 480px) {
  .home-header .surface-tabs,
  body.view-mobile .home-header .surface-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.header-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}

@media (min-width: 821px) {
  body:not(.view-mobile) .home-header .header-actions {
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    gap: 10px;
    height: 100%;
  }

  body:not(.view-mobile) .home-header .header-auth-shell {
    order: 1;
    width: auto;
    justify-content: flex-end;
  }

  body:not(.view-mobile) .home-header .view-toggle {
    order: 0;
  }
}

.header-auth-shell {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  position: relative;
  min-width: 0;
  max-width: 100%;
}

.header-auth-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  max-width: 100%;
}

.header-auth-actions button,
.header-auth-actions a {
  min-height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(93, 217, 193, 0.34) !important;
  background: rgba(10, 22, 36, 0.72) !important;
  color: var(--plasma-cyan) !important;
  font: inherit;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  padding: 7px 12px;
  transition: border-color 140ms ease, background 140ms ease;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-shadow: none;
  text-decoration: none;
  white-space: nowrap;
}

.header-auth-actions button:hover,
.header-auth-actions button:focus-visible,
.header-auth-actions button.is-active,
.header-auth-actions a:hover,
.header-auth-actions a:focus-visible {
  border-color: rgba(93, 217, 193, 0.62) !important;
  background: rgba(23, 41, 66, 0.88) !important;
}

.header-auth-actions #chatSignOutBtn,
.header-auth-actions #headerSignOutBtn {
  border-color: rgba(245, 176, 65, 0.58) !important;
  background: rgba(245, 176, 65, 0.22) !important;
}

.header-auth-actions a.header-account-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  border-color: var(--header-pill-border) !important;
  background: var(--header-pill-bg) !important;
  color: var(--stardust) !important;
}

.header-account-avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(93, 217, 193, 0.38);
  object-fit: cover;
  flex: 0 0 auto;
  background: rgba(10, 20, 34, 0.74);
}

.header-account-text-wrap {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}

.header-account-name,
.header-account-tier {
  white-space: nowrap;
}

.header-account-name {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 132px;
}

.header-account-tier {
  font-size: 11px;
  letter-spacing: 0.02em;
  color: rgba(93, 217, 193, 0.94);
  text-transform: none;
}

.header-auth-actions a.header-account-label:hover,
.header-auth-actions a.header-account-label:focus-visible {
  border-color: rgba(93, 217, 193, 0.62) !important;
  background: rgba(23, 41, 66, 0.88) !important;
  outline: none;
}

.room-ai-presence {
  display: grid;
  justify-items: end;
  gap: 6px;
  max-width: min(320px, 100%);
}

.room-ai-presence-row {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin: 6px 0 12px;
}

.room-ai-presence-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  border-radius: 18px;
  border: 1px solid rgba(93, 217, 193, 0.28);
  background: linear-gradient(165deg, rgba(9, 26, 48, 0.92), rgba(10, 22, 36, 0.92));
  box-shadow: 0 14px 26px rgba(4, 10, 20, 0.46);
  padding: 10px 12px;
}

.room-ai-presence-orb {
  width: 92px;
  height: 92px;
  border-radius: 999px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 2px;
  background: #0b1422;
  box-shadow: 0 0 20px rgba(93, 217, 193, 0.26);
}

.room-ai-presence-orb::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: conic-gradient(
    #00d4ff 0%,
    #00ff88 25%,
    #ffd700 50%,
    #ff1493 75%,
    #00d4ff 100%
  );
  animation: persona-orb-spin 4s linear infinite;
  opacity: 0.98;
  z-index: 0;
}

.room-ai-presence-orb::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  z-index: 2;
  pointer-events: none;
}

.room-ai-presence-orb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 999px;
  position: relative;
  z-index: 1;
}

.room-ai-presence-status {
  color: var(--plasma-cyan);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

.room-ai-presence-copy {
  margin: 0;
  color: rgba(210, 226, 241, 0.9);
  font-size: 12px;
  line-height: 1.45;
  text-align: right;
}

.room-ai-presence-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(93, 217, 193, 0.34);
  background: rgba(10, 22, 36, 0.74);
  color: var(--plasma-cyan);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 12px;
  white-space: nowrap;
}

.room-ai-presence-cta:hover,
.room-ai-presence-cta:focus-visible {
  border-color: rgba(93, 217, 193, 0.62);
  background: rgba(23, 41, 66, 0.88);
  outline: none;
}

.room-ai-presence[data-router-mode="system"] .room-ai-presence-orb {
  padding: 0;
  border: 2px solid rgba(93, 217, 193, 0.72);
}

.room-ai-presence[data-router-mode="system"] .room-ai-presence-orb::before {
  display: none;
}

@media (max-width: 820px) {
  .room-ai-presence-row {
    justify-content: center;
    margin: 8px 0 12px;
  }
  .room-ai-presence {
    justify-items: center;
  }
  .room-ai-presence-copy {
    text-align: center;
  }
}

body.view-mobile .room-ai-presence-row {
  justify-content: center;
  margin: 8px 0 12px;
}

body.view-mobile .room-ai-presence {
  justify-items: center;
}

body.view-mobile .room-ai-presence-copy {
  text-align: center;
}

.header-auth-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  width: min(360px, calc(100vw - 38px));
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(93, 217, 193, 0.26);
  border-radius: 12px;
  background: rgba(9, 19, 32, 0.94);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.35);
}

.header-auth-field {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.header-auth-field[hidden] {
  display: none !important;
}

.header-auth-label {
  color: var(--plasma-cyan);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.header-auth-panel[hidden] {
  display: none !important;
}

.header-auth-panel input {
  min-height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(93, 217, 193, 0.22);
  background: rgba(30, 45, 61, 0.8);
  color: var(--stardust);
  font-size: 15px;
  padding: 8px 10px;
}

.header-auth-panel input::placeholder {
  color: rgba(152, 169, 188, 0.88);
}

.header-auth-panel input:focus-visible {
  outline: none;
  border-color: rgba(93, 217, 193, 0.58);
}

.header-auth-password-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.header-auth-password-row input {
  min-width: 0;
}

.header-auth-password-toggle {
  min-height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(93, 217, 193, 0.34);
  background: rgba(10, 22, 36, 0.72);
  color: var(--plasma-cyan);
  font: inherit;
  font-weight: 700;
  font-size: 13px;
  padding: 0 12px;
  cursor: pointer;
  white-space: nowrap;
}

.header-auth-password-toggle[aria-pressed="true"] {
  border-color: rgba(93, 217, 193, 0.62);
  background: rgba(23, 41, 66, 0.88);
}

.header-auth-password-toggle:focus-visible {
  outline: none;
  border-color: rgba(93, 217, 193, 0.62);
  box-shadow: 0 0 0 2px rgba(93, 217, 193, 0.18);
}

.header-auth-enter-btn {
  width: 100%;
  min-height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(245, 176, 65, 0.42);
  background: linear-gradient(180deg, rgba(245, 176, 65, 0.94), rgba(231, 160, 44, 0.94));
  color: #0d1420;
  font: inherit;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  padding: 9px 14px;
}

.header-auth-enter-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.header-auth-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ghost);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.25;
}

.header-auth-remember .header-auth-checkbox {
  padding: 6px 8px;
  border-radius: 10px;
}

.header-auth-remember .header-auth-checkbox:focus-within {
  outline: 2px solid rgba(93, 217, 193, 0.35);
  outline-offset: 2px;
}

.header-auth-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: unset;
  border-radius: 5px;
  padding: 0;
  margin: 0;
  accent-color: var(--plasma-cyan);
  cursor: pointer;
}

.header-auth-checkbox label {
  cursor: pointer;
  user-select: none;
}

.header-auth-status {
  margin: 2px 0 0;
  color: var(--plasma-cyan);
  font-size: 12px;
  line-height: 1.45;
}

.header-auth-link-callout {
  margin: 0;
  border: 1px solid rgba(245, 176, 65, 0.28);
  border-radius: 10px;
  background: rgba(26, 18, 7, 0.88);
  color: rgba(255, 238, 205, 0.96);
  font-size: 12px;
  line-height: 1.5;
  padding: 9px 10px;
}

.header-auth-social {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.header-auth-social[hidden] {
  display: none !important;
}

.header-auth-social-btn {
  min-height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(93, 217, 193, 0.34);
  background: rgba(10, 22, 36, 0.72);
  color: var(--plasma-cyan);
  font: inherit;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 10px;
  cursor: pointer;
  white-space: nowrap;
}

.header-auth-social-btn:hover,
.header-auth-social-btn:focus-visible {
  border-color: rgba(93, 217, 193, 0.62);
  background: rgba(23, 41, 66, 0.88);
  outline: none;
}

.view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(180deg, rgba(18, 33, 52, 0.96), rgba(11, 24, 39, 0.96));
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--header-pill-border);
  box-shadow: 0 12px 24px rgba(2, 10, 20, 0.28);
}

.view-toggle button {
  border: none;
  background: transparent;
  color: var(--header-pill-muted);
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.view-toggle button.active {
  background: var(--header-pill-active-bg);
  color: #f7fdff;
  box-shadow: var(--header-pill-active-shadow);
}

.view-toggle button:hover,
.view-toggle button:focus-visible {
  color: #f7fdff;
  background: rgba(30, 59, 83, 0.88);
  outline: none;
}

body.device-mobile .view-toggle,
body.device-tablet .view-toggle {
  display: none;
}

body.view-desktop {
  min-width: 0;
}

body.view-desktop.view-desktop-forced {
  overflow-x: auto;
}

body.view-mobile .wrap {
  max-width: none;
  width: 100%;
  margin: 0 auto;
  padding: 0 10px;
}

body.view-mobile {
  --persona-orb-size: var(--persona-orb-size-mobile);
  --chat-message-avatar-size: var(--chat-message-avatar-size-mobile);
}

body.view-mobile #enrollmentHero {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}

body.view-mobile #enrollmentHero > div:first-child {
  display: grid;
  justify-items: center;
  text-align: center;
}

body.view-mobile #enrollmentHero p,
body.view-mobile #enrollmentHero .hero-pronunciation {
  text-align: center;
}

body.view-mobile #enrollmentHero .cta-row {
  justify-content: center;
}

body.view-mobile #enrollmentHero .hero-img {
  justify-self: center;
  width: min(100%, 360px);
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  text-decoration: none;
  color: var(--stardust);
}

.brand-mark img {
  width: var(--header-app-icon-size);
  height: auto;
  border-radius: 12px;
  object-fit: contain;
  background: transparent;
  padding: 0;
  flex: 0 0 auto;
}

.brand-admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(93, 217, 193, 0.34);
  background: rgba(10, 20, 36, 0.92);
  color: var(--stardust);
  text-decoration: none;
  box-shadow: 0 14px 28px rgba(4, 10, 24, 0.28);
}

.brand-admin-badge:focus-visible {
  outline: 2px solid rgba(93, 217, 193, 0.68);
  outline-offset: 4px;
}

.brand-admin-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 206, 108, 0.94), rgba(93, 217, 193, 0.92));
  color: #08111f;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.brand-admin-email {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--stardust);
}

.surface-brand-mark {
  min-width: var(--header-app-icon-size);
}

.surface-brand-icon {
  display: block;
}

.surface-orb-mark {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.surface-orb-mark-ring {
  position: relative;
  width: 88px;
  height: 88px;
  padding: 2px;
  border-radius: 50%;
  overflow: hidden;
  background: #08111f;
  box-shadow: 0 0 22px rgba(93, 217, 193, 0.22);
}

.surface-orb-mark-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    #00d4ff 0%,
    #00ff88 25%,
    #ffd700 50%,
    #ff1493 75%,
    #00d4ff 100%
  );
  animation: persona-orb-spin 4s linear infinite;
  filter: saturate(1.18);
  opacity: 0.98;
  z-index: 0;
}

.surface-orb-mark-ring::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  z-index: 2;
}

.surface-orb-mark-ring img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: #08111f;
  position: relative;
  z-index: 1;
}

.surface-orb-mark-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--plasma-cyan);
}

.surface-brand-mark:focus-visible {
  outline: 2px solid rgba(93, 217, 193, 0.64);
  outline-offset: 8px;
  border-radius: 18px;
}

@media (min-width: 821px) {
  body:not(.view-mobile) .surface-brand-mark {
    min-width: 112px;
    justify-content: center;
  }

  body:not(.view-mobile) .surface-brand-mark .surface-brand-icon {
    display: none;
  }

  body:not(.view-mobile) .surface-brand-mark .surface-orb-mark {
    display: inline-flex;
  }
}

.brand-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  text-align: center;
}

.brand-title-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--stardust);
  width: 100%;
}

.brand-title-link:focus-visible {
  outline: 2px solid rgba(93, 217, 193, 0.6);
  outline-offset: 6px;
  border-radius: 12px;
}

.brand-title .name {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--hyper-gold);
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 0.95;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  margin: 0;
  text-align: center;
  width: 100%;
}

.brand-subtitle {
  margin-top: 5px;
  color: var(--plasma-cyan);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-align: center;
  width: 100%;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 0 10px;
}

.site-nav a,
.site-nav summary {
  border: 1px solid var(--header-pill-border);
  border-radius: 999px;
  padding: 8px 11px;
  color: var(--header-pill-text);
  text-decoration: none;
  background: linear-gradient(180deg, rgba(16, 31, 50, 0.96), rgba(10, 21, 35, 0.94));
  box-shadow: 0 10px 22px rgba(2, 10, 20, 0.24);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.site-nav summary {
  list-style: none;
  user-select: none;
}

.site-nav summary::-webkit-details-marker {
  display: none;
}

.site-nav a:hover,
.site-nav summary:hover {
  border-color: var(--header-pill-border-strong);
  background: linear-gradient(180deg, rgba(23, 43, 69, 0.98), rgba(12, 28, 46, 0.98));
  box-shadow: 0 12px 24px rgba(2, 10, 20, 0.3);
}

.site-nav-menu {
  position: relative;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  flex: 0 0 auto;
}

.site-nav-mobile-root {
  display: none;
  width: 100%;
}

.site-nav-mobile-root > summary {
  width: 100%;
  justify-content: center;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.site-nav-mobile-root .site-nav-panel-mobile {
  position: static;
  margin-top: 8px;
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: 10px;
}

.site-nav-mobile-section-title {
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(141, 239, 255, 0.88);
  font-weight: 800;
}

.site-nav-mobile-link-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.site-nav-mobile-link-group .site-nav-mobile-link {
  justify-content: center;
  min-height: 38px;
  text-align: center;
  font-size: 11px;
  white-space: normal;
  line-height: 1.2;
}

.site-nav-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 170px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid rgba(93, 217, 193, 0.3);
  background: linear-gradient(160deg, rgba(17, 32, 52, 0.98), rgba(10, 22, 36, 0.98));
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.3);
  z-index: 40;
}

.site-nav-menu[open] .site-nav-panel {
  display: grid;
  gap: 6px;
}

.site-nav-panel a {
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 8px 10px;
}

.site-nav-submenu {
  border: 1px solid rgba(93, 217, 193, 0.26);
  border-radius: 10px;
  padding: 6px;
  background: rgba(8, 20, 34, 0.64);
}

.site-nav-submenu > summary {
  padding: 6px 8px;
  font-size: 12px;
  border-radius: 8px;
  border: 1px solid rgba(93, 217, 193, 0.3);
  background: rgba(10, 22, 36, 0.72);
}

.site-nav-subpanel {
  display: none;
  margin-top: 6px;
  gap: 6px;
}

.site-nav-submenu[open] .site-nav-subpanel {
  display: grid;
}

.site-nav-subpanel a {
  font-size: 12px;
  padding: 7px 9px;
  border-radius: 8px;
}

main {
  display: flex;
  flex-direction: column;
  gap: 46px;
  padding-bottom: 10px;
}

body.view-mobile main > #enrollmentHero { order: 1; }
body.view-mobile main > #sandbox { order: 2; }
body.view-mobile main > #origin { order: 3; }
body.view-mobile main > #pricing { order: 4; }
body.view-mobile main > #persona-directory { order: 5; }
body.view-mobile main > #notify { order: 6; }
body.view-mobile main > #legal { order: 7; }

/* Keep section order stable on actual small-screen devices even when the mobile preview class is not set. */
@media (max-width: 820px) {
  main > #enrollmentHero { order: 1; }
  main > #sandbox { order: 2; }
  main > #origin { order: 3; }
  main > #pricing { order: 4; }
  main > #persona-directory { order: 5; }
  main > #notify { order: 6; }
  main > #legal { order: 7; }
}

.top-quicknav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2px;
}

.top-quicknav a {
  border: 1px solid rgba(93, 217, 193, 0.3);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--stardust);
  text-decoration: none;
  background: rgba(12, 22, 38, 0.7);
}

.top-quicknav a:hover {
  border-color: rgba(93, 217, 193, 0.56);
  background: rgba(20, 35, 58, 0.82);
}

.hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: center;
  gap: 32px;
  padding: 32px;
  background: linear-gradient(145deg, rgba(9, 23, 39, 0.94), rgba(18, 36, 58, 0.95));
  border: 1px solid rgba(93, 217, 193, 0.15);
  border-radius: 28px;
  box-shadow: var(--shadow);
}

#enrollmentHero {
  gap: 16px;
  padding: 16px;
  grid-template-columns: minmax(240px, 1fr) minmax(220px, 0.74fr);
}

#enrollmentHero > div:first-child {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}

#enrollmentHero h1 {
  font-size: clamp(24px, 3.2vw, 34px);
  margin-bottom: 10px;
  text-align: center;
}

#enrollmentHero p {
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
}

#enrollmentHero > div:first-child > p:not(.hero-pronunciation-inline):not(.hero-new-user-note) {
  color: var(--plasma-cyan);
  font-weight: 700;
}

#enrollmentHero .hero-pronunciation-inline {
  margin-top: 24px;
  text-align: center;
}

#enrollmentHero .cta-row {
  justify-content: center;
}

#enrollmentHero .hero-img {
  width: min(100%, 320px);
  max-width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 14px;
}

#enrollmentHero .hero-img img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center 12%;
}

.hero-new-user-note {
  margin: 8px auto 0;
  max-width: 62ch;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed rgba(93, 217, 193, 0.34);
  background: rgba(8, 21, 36, 0.54);
  color: var(--plasma-cyan);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
  text-shadow: 0 0 14px rgba(93, 217, 193, 0.18);
}

.hero-new-user-note strong {
  color: var(--plasma-cyan);
}

.hero-new-user-note::selection {
  background: rgba(93, 217, 193, 0.34);
  color: #dffcff;
}

body.is-signed-in #enrollmentHero {
  display: none !important;
}

.hero h1 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: clamp(32px, 5vw, 46px);
  margin: 0 0 12px;
}

.hero .hero-pronunciation {
  margin: 16px 0 0;
  color: rgba(118, 238, 222, 0.96);
  font-size: 15px;
  line-height: 1.35;
  font-weight: 600;
}

.hero-pronunciation-inline {
  margin-top: 72px;
}

.hero p {
  margin: 0 0 18px;
  color: var(--ghost);
  font-size: 17px;
  line-height: 1.6;
}

.hero-access-row {
  margin-top: 4px;
}

.hero-access-btn {
  min-height: 40px;
  padding: 10px 14px;
  font-size: 14px;
}

body.is-guest-mode #enrollmentHero {
  gap: 24px;
  padding: 24px;
}

body.is-guest-mode #enrollmentHero h1 {
  font-size: clamp(24px, 3.8vw, 34px);
}

body.is-guest-mode #enrollmentHero p {
  font-size: 13px;
  line-height: 1.45;
  max-width: 44ch;
}

body.is-guest-mode #enrollmentHero .hero-pronunciation {
  font-size: 12px;
  line-height: 1.3;
  margin-top: 10px;
}

body.is-guest-mode #enrollmentHero .hero-pronunciation-inline {
  margin-top: 18px;
}

body.is-guest-mode #enrollmentHero .hero-img {
  width: min(100%, 390px);
  max-width: 100%;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.store-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

.store-note {
  margin-top: 10px;
  color: var(--ghost);
  font-size: 14px;
  line-height: 1.5;
}

#command-center {
  margin-top: -6px;
}

.command-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.command-card {
  padding: 0;
  overflow: hidden;
}

.command-card summary {
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 18px;
  color: var(--stardust);
  padding: 14px 16px;
  border-bottom: 1px solid rgba(93, 217, 193, 0.18);
  background: rgba(13, 28, 47, 0.72);
}

.command-card summary::-webkit-details-marker {
  display: none;
}

.command-card[open] summary {
  color: var(--plasma-cyan);
  border-bottom-color: rgba(93, 217, 193, 0.38);
}

.command-body {
  padding: 14px 16px 16px;
  display: grid;
  gap: 10px;
}

.command-body p {
  margin: 0;
  color: var(--ghost);
  line-height: 1.55;
}

.command-note {
  color: var(--ghost);
  font-size: 13px;
}

.store-icon {
  width: 68px;
  height: 68px;
  min-width: 68px;
  min-height: 68px;
  max-width: 68px;
  max-height: 68px;
  border-radius: 8px;
  background-image: url('assets/img/brand/app_icon.png?v=20260210v30');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: block;
  flex: 0 0 68px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: var(--hyper-gold);
  color: #0a0a0a;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
  text-align: center;
}

.btn:focus-visible {
  outline: 2px solid rgba(93, 217, 193, 0.72);
  outline-offset: 3px;
}

.btn.secondary {
  background: transparent;
  color: var(--stardust);
  border-color: rgba(93, 217, 193, 0.6);
}

.btn.danger {
  background: rgba(255, 132, 132, 0.9);
  border-color: rgba(255, 132, 132, 0.56);
  color: #1b0408;
}

.btn.danger:hover {
  box-shadow: 0 10px 30px rgba(255, 132, 132, 0.2);
}

.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(245, 176, 65, 0.25); }

.btn.disabled {
  opacity: 0.6;
}

.btn.disabled:hover {
  transform: none;
  box-shadow: none;
}

.hero-img {
  width: 100%;
  max-width: 520px;
  aspect-ratio: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(184, 169, 217, 0.2);
  background: rgba(8, 16, 28, 0.9);
  justify-self: center;
}

.hero-img img {
  width: 100%;
  height: auto;
  max-height: 760px;
  display: block;
  object-fit: contain;
  object-position: center center;
}

.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  margin-bottom: 12px;
}

.section-head h2 {
  margin: 0;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  letter-spacing: 0.04em;
  text-align: center;
}

#sandbox .section-head h2 {
  width: 100%;
  text-align: center;
  font-size: clamp(44px, 5vw, 66px);
  letter-spacing: 0.02em;
  line-height: 1.02;
}

.pill {
  background: rgba(93, 217, 193, 0.15);
  color: var(--plasma-cyan);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.04em;
}

.header-pill {
  font-size: 13px;
  padding: 8px 14px;
  white-space: nowrap;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}


.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  align-items: stretch;
}

.review-card {
  border-radius: 16px;
  border: 1px solid rgba(93, 217, 193, 0.18);
  background: linear-gradient(168deg, rgba(14, 28, 48, 0.96), rgba(8, 17, 30, 0.98));
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
  padding: 14px;
  display: grid;
  gap: 8px;
}

.review-card--featured {
  grid-column: span 2;
  border-color: rgba(245, 176, 65, 0.34);
  background: linear-gradient(165deg, rgba(28, 32, 47, 0.95), rgba(10, 20, 34, 0.98));
}

.review-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.review-name {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--stardust);
}

.review-context {
  color: var(--plasma-cyan);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.review-card p {
  margin: 0;
  color: var(--ghost);
  font-size: 14px;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .review-card--featured {
    grid-column: span 1;
  }
}

@media (max-width: 640px) {
  .trust-strip {
    flex-direction: column;
    align-items: stretch;
  }

  .trust-pill {
    width: 100%;
    justify-content: flex-start;
  }
}

.flow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.guide-row {
  margin-top: 14px;
}

.platform-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.plan-card h3 {
  margin: 0;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 21px;
}

.availability-card {
  margin-top: 12px;
}

.availability-note {
  margin: 0;
  color: var(--ghost);
  line-height: 1.6;
}

.availability-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(93, 217, 193, 0.2);
  border-radius: 12px;
  background: rgba(8, 20, 34, 0.7);
}

.availability-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

.availability-table th,
.availability-table td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(93, 217, 193, 0.12);
}

.availability-table th {
  color: var(--plasma-cyan);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(18, 36, 58, 0.7);
}

.availability-table td {
  color: var(--ghost);
  font-size: 14px;
}

.availability-table tbody tr:last-child td {
  border-bottom: none;
}

.availability-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  color: var(--stardust);
  white-space: nowrap;
}

.availability-pill.status-live {
  background: rgba(93, 217, 193, 0.16);
  border-color: rgba(93, 217, 193, 0.45);
  color: #9cf0dc;
}

.availability-pill.status-rollout {
  background: rgba(245, 176, 65, 0.14);
  border-color: rgba(245, 176, 65, 0.42);
  color: #ffd79f;
}

.availability-pill.status-limited {
  background: rgba(184, 169, 217, 0.16);
  border-color: rgba(184, 169, 217, 0.4);
  color: #dfd4f4;
}

.availability-pill.status-apponly {
  background: rgba(152, 169, 188, 0.12);
  border-color: rgba(152, 169, 188, 0.36);
  color: #ced6e0;
}

.availability-footnote {
  margin: 0;
  color: var(--ghost);
  font-size: 13px;
  line-height: 1.5;
}

.platform-list {
  margin: 0;
  padding-left: 18px;
  color: var(--ghost);
  line-height: 1.6;
  display: grid;
  gap: 6px;
}

.founders {
  border-color: rgba(245, 176, 65, 0.28);
  background: linear-gradient(175deg, rgba(22, 36, 56, 0.96), rgba(8, 18, 33, 0.98));
  position: relative;
  overflow: hidden;
}

.founders::before {
  content: "";
  position: absolute;
  inset: -40% -30% auto auto;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(245, 176, 65, 0.18), transparent 70%);
  pointer-events: none;
}

.founders-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(245, 176, 65, 0.42);
  background: rgba(245, 176, 65, 0.14);
  color: #ffd79f;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 900;
}

.founders-intro {
  text-align: center;
  max-width: 980px;
  margin: 0 auto 10px;
  line-height: 1.75;
}

.founders-intro p {
  margin: 0 0 22px;
}

.founders-intro a {
  color: var(--plasma-cyan);
}

.founders-title {
  margin: 12px 0 14px;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.2;
}

.founders-legacy-title {
  margin: 14px 0 12px;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: clamp(20px, 2.1vw, 26px);
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.founders-upgrade-lines {
  margin-bottom: 10px;
  line-height: 1.6;
}

.founders-subhead {
  margin: 20px 0 14px;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: 0.01em;
  text-align: center;
  color: var(--plasma-cyan);
  font-weight: 800;
}

.founders-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.founders-tier {
  border-radius: 16px;
  border: 1px solid rgba(93, 217, 193, 0.16);
  background: rgba(8, 18, 32, 0.62);
  padding: 12px 12px 14px;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
}

.founders-tier.founders-tier-free {
  border-color: rgba(120, 202, 255, 0.28);
  background: linear-gradient(165deg, rgba(7, 19, 34, 0.88), rgba(12, 34, 54, 0.74));
}

.founders-tier h4,
.founders-tier h5 {
  margin: 0;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 16px;
  letter-spacing: 0.01em;
}

.founders-tier-kicker {
  margin-top: 6px;
  margin-bottom: 10px;
  color: rgba(93, 217, 193, 0.92);
  font-weight: 800;
}

.founders-tier-actions {
  margin-top: 12px;
}

.founders-subscribe-btn {
  width: 100%;
  min-height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(93, 217, 193, 0.42);
  background: rgba(12, 28, 44, 0.85);
  color: var(--plasma-cyan);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

.founders-subscribe-btn:hover,
.founders-subscribe-btn:focus-visible {
  border-color: rgba(93, 217, 193, 0.68);
  background: rgba(20, 43, 66, 0.92);
  color: #a9f8e6;
  outline: none;
}

.founders-subscribe-btn[data-state="active"] {
  border-color: rgba(245, 176, 65, 0.62);
  background: rgba(245, 176, 65, 0.16);
  color: #ffe2b1;
}

.founders-subscribe-btn:disabled {
  cursor: default;
}

.founders-cta {
  margin-top: 14px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(93, 217, 193, 0.22);
  background: rgba(93, 217, 193, 0.08);
  color: var(--stardust);
  line-height: 1.55;
  text-align: center;
}

.founders-cta #foundersCtaTitle:empty {
  display: none;
}

.founders-cta-sub {
  display: block;
  margin-top: 8px;
  color: var(--ghost);
  font-size: 13px;
  line-height: 1.6;
}

.founders-legacy-line {
  display: block;
  margin-top: 2px;
}

.founders-disclaimer {
  margin: 10px auto 0;
  padding-top: 10px;
  border-top: 1px solid rgba(93, 217, 193, 0.22);
  color: #5dd9c1;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}

.shell-preview {
  margin-top: 12px;
}

.shell-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.shell-platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.shell-platforms span {
  border: 1px solid rgba(93, 217, 193, 0.35);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--stardust);
  background: rgba(8, 20, 34, 0.72);
}

.shell-layout {
  display: grid;
  grid-template-columns: minmax(150px, 180px) 1fr;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(93, 217, 193, 0.22);
  background: rgba(8, 18, 32, 0.6);
}

.shell-rail {
  display: grid;
  gap: 8px;
  align-content: start;
}

.shell-rail-item {
  border: 1px solid rgba(93, 217, 193, 0.2);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--ghost);
  background: rgba(20, 35, 58, 0.4);
}

.shell-rail-item.active {
  color: var(--stardust);
  border-color: rgba(93, 217, 193, 0.52);
  background: rgba(93, 217, 193, 0.16);
}

.shell-main {
  display: grid;
  gap: 12px;
}

.shell-modules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.shell-module {
  border: 1px solid rgba(245, 176, 65, 0.32);
  border-radius: 12px;
  padding: 12px;
  color: var(--stardust);
  font-size: 14px;
  background: rgba(245, 176, 65, 0.08);
}

.shell-main p {
  margin: 0;
  color: var(--ghost);
  line-height: 1.6;
  font-size: 14px;
}

.flow-step {
  background: linear-gradient(165deg, rgba(24, 38, 60, 0.95), rgba(10, 18, 32, 0.97));
  border: 1px solid rgba(93, 217, 193, 0.2);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.flow-step h3 {
  margin: 0;
  font-size: 22px;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
}

.flow-step p {
  margin: 0;
  color: var(--ghost);
  line-height: 1.5;
}

.flow-kicker {
  color: var(--hyper-gold);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.card {
  background: linear-gradient(180deg, rgba(14, 28, 48, 0.96), rgba(8, 18, 33, 0.98));
  border: 1px solid rgba(93, 217, 193, 0.14);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.persona-card {
  position: relative;
  overflow: hidden;
}

.persona-card[data-roster-surface="private"]::before {
  background: radial-gradient(circle, rgba(245, 176, 65, 0.16), transparent 70%);
}

.persona-card::before {
  content: "";
  position: absolute;
  inset: -35% -55% auto auto;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(184, 169, 217, 0.14), transparent 70%);
  pointer-events: none;
}

.persona-hero {
  width: 100%;
  background: #0b1422;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border: 1px solid rgba(184, 169, 217, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
}

.persona-hero img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  background: #071326;
}

/* Single-card persona views can get overly dominant; keep hero at 50% width. */
#personaGrid > .persona-card:only-child .persona-hero {
  width: min(50%, 380px);
  min-width: 160px;
  margin: 0 auto;
}

.persona-card.is-last-spoken .persona-hero {
  width: 50%;
  min-width: 180px;
  max-width: 320px;
  margin: 0 auto;
}

.card .tagline {
  color: var(--plasma-cyan);
  font-size: 13px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.persona-card .tagline {
  text-align: center;
}

.persona-roster-chip {
  align-self: center;
  margin: 4px auto 0;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(93, 217, 193, 0.28);
  background: rgba(93, 217, 193, 0.08);
  color: var(--plasma-cyan);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.persona-roster-chip[data-roster-surface="private"] {
  border-color: rgba(245, 176, 65, 0.32);
  background: rgba(245, 176, 65, 0.1);
  color: #f5b041;
}

.persona-name {
  font-weight: 700;
  font-size: 18px;
  text-align: center;
}

.card .tone {
  color: var(--ghost);
  font-size: 14px;
  line-height: 1.4;
}

/* Reduce browser/extension autofill UI clutter in form fields. */
input::-webkit-credentials-auto-fill-button,
input::-webkit-contacts-auto-fill-button {
  visibility: hidden;
  display: none !important;
  pointer-events: none;
  position: absolute;
  right: 0;
}

.persona-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 4px;
}

.persona-actions .btn {
  flex: 1 1 140px;
  justify-content: center;
}

.persona-card-note {
  font-size: 13px;
  line-height: 1.45;
}

.persona-card-note-private {
  color: #f5b041;
}

.persona-card-note-warning {
  color: #f5b041;
}

.persona-profile-link {
  font-size: 13px;
  letter-spacing: 0.02em;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}

.feature-card p {
  margin: 0;
  color: var(--ghost);
  line-height: 1.55;
}

.feature-note {
  margin-top: 12px;
}

.feature-note p {
  margin: 0;
  color: var(--ghost);
  line-height: 1.6;
}

@media (max-width: 860px) {
  .shell-layout {
    grid-template-columns: 1fr;
  }

  .shell-rail {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    align-content: stretch;
  }
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  background: rgba(30, 45, 61, 0.6);
  padding: 6px;
  border-radius: 14px;
  border: 1px solid rgba(93, 217, 193, 0.18);
  max-width: 100%;
}

.chat-legal-gate {
  margin-top: 10px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(245, 176, 65, 0.35);
  background: rgba(245, 176, 65, 0.08);
  display: grid;
  gap: 10px;
}

.chat-legal-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--hyper-gold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.chat-legal-copy {
  color: var(--stardust);
  font-size: 13px;
  line-height: 1.45;
}

.chat-legal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.chat-legal-actions button {
  min-height: 44px;
}

#chatLegalOpen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
  border: none;
}

#chatLegalOpen {
  background: var(--hyper-gold);
  color: #0a0a0a;
}

#chatLegalOpen:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(93, 217, 193, 0.15);
}

#chatAgeVerifyBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid rgba(93, 217, 193, 0.42);
  background: rgba(11, 34, 56, 0.92);
  color: var(--plasma-cyan);
  font-weight: 700;
  padding: 10px 14px;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

#chatAgeVerifyBtn:hover {
  transform: translateY(-1px);
  border-color: rgba(93, 217, 193, 0.7);
  box-shadow: 0 10px 28px rgba(93, 217, 193, 0.18);
}

#chatAgeVerifyBtn:focus-visible {
  outline: 2px solid rgba(93, 217, 193, 0.8);
  outline-offset: 2px;
}

#chatAgeVerifyBtn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

.chat-legal-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--stardust);
  font-size: 13px;
  line-height: 1.45;
}

.chat-legal-check input {
  margin-top: 2px;
}

#chatLegalAccept {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  background: var(--hyper-gold);
  color: #0a0a0a;
  border: none;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
}

#chatLegalAccept:disabled {
  opacity: 1;
  background: rgba(104, 115, 130, 0.78);
  color: rgba(242, 242, 242, 0.92);
  border: 1px solid rgba(242, 242, 242, 0.35);
  cursor: not-allowed;
}

.chat-legal-hint {
  font-size: 12px;
  color: var(--ghost);
}

.chat-legal-hint a {
  color: var(--plasma-cyan);
  text-decoration: none;
}

.legal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 12px;
}

.legal-details {
  width: min(960px, 100%);
  margin: 0 auto;
}

.legal-details > summary {
  display: block;
  text-align: center;
  color: rgba(93, 217, 193, 0.98);
  font-weight: 800;
}

.legal-terms-heading {
  margin-top: 14px;
  text-align: center;
  color: rgba(93, 217, 193, 0.98);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.legal-terms-preview {
  margin-top: 12px;
  max-height: 340px;
  overflow: auto;
  padding: 14px;
  border-radius: 12px;
  background: rgba(12, 22, 38, 0.58);
  border: 1px solid rgba(93, 217, 193, 0.18);
  font-size: 12px;
  line-height: 1.6;
}

.legal-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 18px;
}

.legal-modal[hidden] {
  display: none;
}

.legal-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
}

.legal-modal-panel {
  position: relative;
  width: min(980px, 100%);
  max-height: min(92vh, 920px);
  overflow: auto;
  border-radius: 18px;
  border: 1px solid rgba(184, 169, 217, 0.22);
  background: rgba(8, 16, 28, 0.96);
  box-shadow: var(--shadow);
  display: grid;
  grid-template-rows: auto auto auto auto;
  overscroll-behavior: contain;
}

.legal-modal-header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 16px 10px;
  border-bottom: 1px solid rgba(184, 169, 217, 0.18);
}

.legal-modal-title {
  font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--stardust);
}

.legal-modal-subtitle {
  margin-top: 4px;
  font-size: 12px;
  color: var(--ghost);
}

.legal-modal-close {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(184, 169, 217, 0.22);
  background: rgba(12, 22, 38, 0.55);
  color: var(--stardust);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.legal-modal-body {
  padding: 14px 16px 8px;
  overflow: visible;
}

.legal-modal-scroll {
  min-height: 560px;
  height: min(78vh, 780px);
  max-height: min(78vh, 780px);
  overflow: auto;
  padding: 14px;
  border-radius: 14px;
  background: rgba(12, 22, 38, 0.58);
  border: 1px solid rgba(93, 217, 193, 0.18);
  font-size: 12.5px;
  line-height: 1.65;
}

.legal-modal-scroll-hint {
  margin: 0 16px 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(245, 176, 65, 0.35);
  background: rgba(245, 176, 65, 0.12);
  color: var(--plasma-cyan);
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 900;
  line-height: 1.3;
  text-align: center;
}

.legal-terms-line {
  display: block;
  white-space: pre-wrap;
}

.legal-terms-voice {
  color: var(--plasma-cyan);
}

.legal-terms-law {
  color: rgba(228, 237, 246, 0.92);
}

.terms-engagement-flow {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}

.terms-engagement-intro,
.terms-engagement-section {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(93, 217, 193, 0.2);
  background:
    radial-gradient(circle at top right, rgba(93, 217, 193, 0.1), transparent 34%),
    linear-gradient(155deg, rgba(10, 22, 38, 0.9), rgba(8, 18, 32, 0.96));
}

.terms-engagement-intro {
  gap: 10px;
}

.terms-engagement-kicker {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(93, 217, 193, 0.96);
}

.terms-engagement-title,
.terms-engagement-section-title {
  margin: 0;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  line-height: 1.1;
}

.terms-engagement-title {
  font-size: clamp(28px, 4vw, 40px);
}

.terms-engagement-section-title {
  font-size: clamp(20px, 2.4vw, 28px);
}

.terms-engagement-subtitle,
.terms-engagement-paragraph,
.terms-engagement-list {
  margin: 0;
  color: rgba(228, 237, 246, 0.9);
  line-height: 1.7;
}

.terms-engagement-meta {
  display: grid;
  gap: 8px;
}

.terms-engagement-meta p {
  margin: 0;
  color: rgba(214, 226, 240, 0.84);
}

.terms-engagement-note {
  color: rgba(255, 235, 197, 0.96);
  font-weight: 700;
}

.terms-engagement-voice {
  color: var(--plasma-cyan);
}

.terms-engagement-voice strong {
  color: var(--plasma-cyan);
  text-shadow: 0 0 18px rgba(93, 217, 193, 0.24);
}

.terms-engagement-copy-voice {
  color: var(--plasma-cyan);
}

.terms-engagement-law {
  color: rgba(241, 245, 250, 0.94);
}

.terms-engagement-list {
  padding-left: 1.2rem;
  display: grid;
  gap: 8px;
}

.terms-engagement-cta {
  display: inline-flex;
  justify-self: start;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 198, 92, 0.28);
  background: rgba(255, 198, 92, 0.12);
  color: rgba(255, 235, 197, 0.98);
  font-weight: 700;
}

.legal-modal-confirm {
  padding: 12px 16px 2px;
  border-top: 1px solid rgba(184, 169, 217, 0.18);
  display: grid;
  gap: 10px;
}

.legal-modal-confirm-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--hyper-gold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.legal-modal-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--stardust);
  font-size: 13px;
  line-height: 1.35;
}

.legal-modal-check input {
  margin-top: 2px;
}

.legal-modal-check--dontshow {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(184, 169, 217, 0.18);
}

.legal-modal-actions {
  padding: 12px 16px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

@media (max-width: 860px) {
  .legal-modal {
    padding: 8px;
  }

  .legal-modal-panel {
    width: 100%;
    max-height: 98dvh;
    border-radius: 16px;
  }

  .legal-modal-header {
    padding: 12px 12px 8px;
  }

  .legal-modal-body {
    padding: 10px 12px 6px;
  }

  .legal-modal-scroll {
    min-height: 68dvh;
    height: 74dvh;
    max-height: 74dvh;
    font-size: 14px;
    line-height: 1.62;
  }

  .legal-modal-scroll-hint {
    margin: 0 12px 10px;
    font-size: clamp(26px, 6.2vw, 34px);
  }

  .legal-modal-confirm {
    padding: 10px 12px 2px;
  }

  .legal-modal-actions {
    padding: 10px 12px 12px;
  }
}

#legalModalAccept:disabled,
#legalModalAccept.disabled {
  opacity: 1;
  background: rgba(104, 115, 130, 0.78);
  color: rgba(242, 242, 242, 0.92);
  border: 1px solid rgba(242, 242, 242, 0.35);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

#legalModalDecline {
  border-color: rgba(245, 176, 65, 0.22);
}

.decline-confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 1060;
  display: grid;
  place-items: center;
  padding: 18px;
}

.decline-confirm-modal[hidden] {
  display: none;
}

.decline-confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 8, 20, 0.74);
  backdrop-filter: blur(8px);
}

.decline-confirm-panel {
  position: relative;
  width: min(640px, 100%);
  border-radius: 18px;
  border: 1px solid rgba(93, 217, 193, 0.28);
  background:
    radial-gradient(140% 120% at 0% 0%, rgba(26, 81, 156, 0.2), rgba(6, 16, 34, 0.96) 48%),
    radial-gradient(120% 120% at 100% 100%, rgba(93, 217, 193, 0.08), rgba(6, 16, 34, 0.96) 52%),
    rgba(6, 16, 34, 0.96);
  box-shadow: var(--shadow);
  padding: 20px 20px 18px;
}

.decline-confirm-title {
  margin: 0;
  font-size: 22px;
  line-height: 1.15;
  color: var(--hyper-gold);
  letter-spacing: 0.02em;
}

.decline-confirm-text {
  margin: 12px 0 0;
  color: rgba(228, 237, 246, 0.94);
  font-size: 16px;
  line-height: 1.45;
}

.decline-confirm-actions {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

#declineConfirmReturn {
  border-color: rgba(93, 217, 193, 0.35);
}

#declineConfirmQuit {
  border-color: rgba(245, 176, 65, 0.45);
  color: var(--hyper-gold);
}

@media (max-width: 640px) {
  .decline-confirm-panel {
    padding: 16px 14px 14px;
  }

  .decline-confirm-title {
    font-size: 20px;
  }

  .decline-confirm-actions {
    justify-content: stretch;
  }

  .decline-confirm-actions .btn {
    width: 100%;
  }
}

.calibration-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  padding: 18px;
}

.calibration-modal[hidden] {
  display: none;
}

.calibration-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
}

.calibration-modal-panel {
  position: relative;
  width: min(980px, 100%);
  max-height: min(92vh, 930px);
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(93, 217, 193, 0.26);
  background: rgba(8, 16, 28, 0.97);
  box-shadow: var(--shadow);
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.calibration-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 10px;
  border-bottom: 1px solid rgba(184, 169, 217, 0.18);
}

.calibration-modal-title {
  font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.calibration-modal-subtitle {
  margin-top: 4px;
  color: var(--ghost);
  font-size: 13px;
}

.calibration-modal-close {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(93, 217, 193, 0.26);
  background: rgba(12, 22, 38, 0.58);
  color: var(--stardust);
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}

.calibration-modal-body {
  overflow: auto;
  padding: 14px 16px 10px;
  display: grid;
  gap: 14px;
}

.calibration-card {
  border-radius: 14px;
  border: 1px solid rgba(93, 217, 193, 0.18);
  background: rgba(10, 22, 36, 0.72);
  padding: 12px;
  display: grid;
  gap: 10px;
}

.calibration-card h3 {
  margin: 0;
  font-size: 16px;
}

.calibration-card p {
  margin: 0;
  color: var(--ghost);
  font-size: 13px;
  line-height: 1.45;
}

.calibration-identity-grid {
  display: grid;
  gap: 10px;
}

.calibration-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
}

.calibration-check-inline {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ghost);
}

.calibration-age-note {
  margin: -2px 0 2px;
  color: var(--ghost);
  font-size: 12px;
  line-height: 1.45;
}

.calibration-field {
  display: grid;
  gap: 6px;
}

.calibration-field span {
  color: rgba(154, 216, 255, 0.92);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.calibration-field input,
.calibration-field select,
.calibration-objective-row select,
.settings-calibration-row select {
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(93, 217, 193, 0.22);
  background: rgba(30, 45, 61, 0.82);
  color: var(--stardust);
  padding: 10px 12px;
  font: inherit;
}

.calibration-objective-list,
.settings-calibration-objectives {
  display: grid;
  gap: 10px;
}

@media (min-width: 768px) {
  .settings-objectives-panel .settings-calibration-objectives {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }
}

.settings-objectives-panel .settings-calibration-objectives > .settings-objectives-equalize,
.settings-objectives-panel .settings-calibration-objectives > #settingsCalibrationObjectiveStatus,
.settings-objectives-panel .settings-calibration-objectives > .settings-objectives-actions,
.settings-objectives-panel .settings-calibration-objectives > .settings-objectives-footer-note {
  grid-column: 1 / -1;
}

.settings-objectives-panel .settings-calibration-objectives > .settings-objectives-equalize,
.settings-objectives-panel .settings-calibration-objectives > #settingsCalibrationObjectiveStatus,
.settings-objectives-panel .settings-calibration-objectives > .settings-objectives-footer-note {
  max-width: 58rem;
  width: 100%;
  margin-inline: auto;
}

.settings-objectives-panel .settings-calibration-objectives > .settings-objectives-equalize {
  padding-top: 6px;
}

.settings-objectives-panel .settings-calibration-objectives > #settingsCalibrationObjectiveStatus,
.settings-objectives-panel .settings-calibration-objectives > .settings-objectives-footer-note {
  text-align: center;
}

.settings-objectives-panel .settings-calibration-objectives > .settings-objectives-actions {
  justify-content: center;
  margin-top: 2px;
}

.settings-screenshot-gallery-panel {
  background:
    radial-gradient(circle at 14% 10%, rgba(93, 217, 193, 0.14), transparent 42%),
    radial-gradient(circle at 86% 90%, rgba(245, 176, 65, 0.14), transparent 44%),
    rgba(7, 18, 33, 0.88);
  border-color: rgba(93, 217, 193, 0.28);
}

.settings-screenshot-gallery-head {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.settings-screenshot-gallery {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr);
}

.settings-screenshot-card {
  margin: 0;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(112, 171, 214, 0.34);
  background: rgba(10, 24, 41, 0.84);
  box-shadow: 0 16px 30px rgba(3, 10, 20, 0.26);
  display: grid;
  gap: 10px;
  min-width: 0;
}

.settings-screenshot-card img {
  width: 100%;
  height: clamp(190px, 22vw, 260px);
  border-radius: 12px;
  border: 1px solid rgba(152, 169, 188, 0.32);
  background: rgba(7, 18, 33, 0.72);
  object-fit: cover;
  object-position: top center;
  display: block;
}

.settings-screenshot-card figcaption {
  display: grid;
  gap: 4px;
}

.settings-screenshot-card figcaption strong {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(154, 216, 255, 0.95);
}

.settings-screenshot-card figcaption span {
  font-size: 12px;
  line-height: 1.45;
  color: rgba(214, 226, 240, 0.88);
}

.settings-screenshot-gallery-note {
  margin-top: 12px;
  text-align: center;
  color: rgba(173, 194, 214, 0.96);
}

@media (min-width: 760px) {
  .settings-screenshot-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .settings-screenshot-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .settings-screenshot-gallery .settings-screenshot-card:nth-child(4) {
    grid-column: 2 / span 1;
  }
}

.calibration-objective-row,
.settings-calibration-row {
  --objective-accent: rgba(94, 197, 255, 0.32);
  --objective-accent-soft: rgba(94, 197, 255, 0.08);
  --objective-accent-border: rgba(94, 197, 255, 0.52);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border-radius: 14px;
  border: 1px solid rgba(184, 169, 217, 0.16);
  border-left: 3px solid var(--objective-accent);
  background:
    linear-gradient(115deg, var(--objective-accent-soft) 0%, transparent 42%),
    rgba(10, 22, 36, 0.72);
  box-shadow:
    0 16px 34px rgba(2, 9, 18, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  padding: 12px 14px;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.calibration-objective-row:hover,
.settings-calibration-row:hover {
  transform: translateY(-1px);
  border-color: rgba(184, 169, 217, 0.24);
  box-shadow:
    0 20px 40px rgba(2, 9, 18, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.calibration-objective-row:focus-within,
.settings-calibration-row:focus-within {
  border-color: var(--objective-accent-border);
  box-shadow:
    0 0 0 1px var(--objective-accent-border),
    0 22px 42px rgba(2, 9, 18, 0.24);
}

.objective-card-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.objective-card-title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.28;
  color: rgba(233, 242, 255, 0.96);
}

.objective-card-note {
  display: block;
  color: rgba(183, 203, 223, 0.82);
  font-size: 12px;
  line-height: 1.46;
}

.objective-rank-control {
  display: grid;
  gap: 6px;
  justify-items: end;
  min-width: 96px;
  align-self: stretch;
}

.objective-rank-label {
  display: block;
  color: rgba(154, 216, 255, 0.84);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.calibration-objective-row select,
.settings-calibration-row select {
  width: 78px;
  min-height: 42px;
  border-radius: 14px;
  border-color: var(--objective-accent-border);
  box-shadow: 0 0 0 1px var(--objective-accent-soft);
  background-color: rgba(21, 35, 52, 0.96);
  text-align: center;
  font-weight: 700;
  padding: 10px 12px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.calibration-objective-row[data-objective-key="creativePartner"],
.settings-calibration-row[data-objective-key="creativePartner"] {
  --objective-accent: rgba(182, 133, 255, 0.46);
  --objective-accent-soft: rgba(182, 133, 255, 0.12);
  --objective-accent-border: rgba(182, 133, 255, 0.62);
}

.calibration-objective-row[data-objective-key="culinaryArchitectKitchenConfidante"],
.settings-calibration-row[data-objective-key="culinaryArchitectKitchenConfidante"] {
  --objective-accent: rgba(86, 244, 209, 0.44);
  --objective-accent-soft: rgba(86, 244, 209, 0.14);
  --objective-accent-border: rgba(86, 244, 209, 0.62);
}

.calibration-objective-row[data-objective-key="executiveCoaching"],
.settings-calibration-row[data-objective-key="executiveCoaching"] {
  --objective-accent: rgba(112, 165, 255, 0.46);
  --objective-accent-soft: rgba(112, 165, 255, 0.12);
  --objective-accent-border: rgba(112, 165, 255, 0.64);
}

.calibration-objective-row[data-objective-key="budgetingAdvisor"],
.settings-calibration-row[data-objective-key="budgetingAdvisor"] {
  --objective-accent: rgba(255, 196, 92, 0.48);
  --objective-accent-soft: rgba(255, 196, 92, 0.14);
  --objective-accent-border: rgba(255, 196, 92, 0.66);
}

.calibration-objective-row[data-objective-key="growthCompanion"],
.settings-calibration-row[data-objective-key="growthCompanion"] {
  --objective-accent: rgba(255, 137, 214, 0.44);
  --objective-accent-soft: rgba(255, 137, 214, 0.12);
  --objective-accent-border: rgba(255, 137, 214, 0.62);
}

.calibration-objective-row[data-objective-key="healthyLivingCoach"],
.settings-calibration-row[data-objective-key="healthyLivingCoach"] {
  --objective-accent: rgba(138, 224, 150, 0.44);
  --objective-accent-soft: rgba(138, 224, 150, 0.12);
  --objective-accent-border: rgba(138, 224, 150, 0.62);
}

.calibration-objective-row[data-objective-key="journalingCompanion"],
.settings-calibration-row[data-objective-key="journalingCompanion"] {
  --objective-accent: rgba(207, 145, 255, 0.44);
  --objective-accent-soft: rgba(207, 145, 255, 0.12);
  --objective-accent-border: rgba(207, 145, 255, 0.62);
}

.calibration-objective-row[data-objective-key="lifeDetailsMemory"],
.settings-calibration-row[data-objective-key="lifeDetailsMemory"] {
  --objective-accent: rgba(109, 224, 255, 0.44);
  --objective-accent-soft: rgba(109, 224, 255, 0.12);
  --objective-accent-border: rgba(109, 224, 255, 0.62);
}

.calibration-objective-row[data-objective-key="lifeOrchestrator"],
.settings-calibration-row[data-objective-key="lifeOrchestrator"] {
  --objective-accent: rgba(255, 167, 130, 0.44);
  --objective-accent-soft: rgba(255, 167, 130, 0.14);
  --objective-accent-border: rgba(255, 167, 130, 0.62);
}

.calibration-objective-row[data-objective-key="newsGuru"],
.settings-calibration-row[data-objective-key="newsGuru"] {
  --objective-accent: rgba(93, 209, 255, 0.42);
  --objective-accent-soft: rgba(93, 209, 255, 0.12);
  --objective-accent-border: rgba(93, 209, 255, 0.6);
}

.calibration-objective-row[data-objective-key="timeManagementCoach"],
.settings-calibration-row[data-objective-key="timeManagementCoach"] {
  --objective-accent: rgba(255, 143, 120, 0.44);
  --objective-accent-soft: rgba(255, 143, 120, 0.14);
  --objective-accent-border: rgba(255, 143, 120, 0.62);
}

.calibration-objective-row[data-objective-key="vacationPlannerTripPlannerBestFriend"],
.settings-calibration-row[data-objective-key="vacationPlannerTripPlannerBestFriend"] {
  --objective-accent: rgba(87, 223, 255, 0.48);
  --objective-accent-soft: rgba(87, 223, 255, 0.14);
  --objective-accent-border: rgba(87, 223, 255, 0.66);
}

.calibration-objective-row[data-objective-key="wellnessGuide"],
.settings-calibration-row[data-objective-key="wellnessGuide"] {
  --objective-accent: rgba(116, 222, 176, 0.44);
  --objective-accent-soft: rgba(116, 222, 176, 0.12);
  --objective-accent-border: rgba(116, 222, 176, 0.62);
}

.calibration-objective-row[data-objective-key="personalConfidante"],
.settings-calibration-row[data-objective-key="personalConfidante"] {
  --objective-accent: rgba(120, 186, 255, 0.44);
  --objective-accent-soft: rgba(120, 186, 255, 0.12);
  --objective-accent-border: rgba(120, 186, 255, 0.62);
}

.calibration-objective-row[data-objective-key="foreignNewsPerspectives"],
.settings-calibration-row[data-objective-key="foreignNewsPerspectives"] {
  --objective-accent: rgba(91, 219, 255, 0.48);
  --objective-accent-soft: rgba(91, 219, 255, 0.13);
  --objective-accent-border: rgba(91, 219, 255, 0.68);
}

.calibration-objective-row[data-objective-key="ancestryResearcher"],
.settings-calibration-row[data-objective-key="ancestryResearcher"] {
  --objective-accent: rgba(255, 177, 122, 0.46);
  --objective-accent-soft: rgba(255, 177, 122, 0.14);
  --objective-accent-border: rgba(255, 177, 122, 0.64);
}

.calibration-objective-row[data-objective-key="gamerGuru"],
.settings-calibration-row[data-objective-key="gamerGuru"] {
  --objective-accent: rgba(136, 131, 255, 0.46);
  --objective-accent-soft: rgba(136, 131, 255, 0.14);
  --objective-accent-border: rgba(136, 131, 255, 0.64);
}

.calibration-objective-row[data-objective-key="historianWorldFocus"],
.settings-calibration-row[data-objective-key="historianWorldFocus"] {
  --objective-accent: rgba(203, 165, 115, 0.46);
  --objective-accent-soft: rgba(203, 165, 115, 0.14);
  --objective-accent-border: rgba(203, 165, 115, 0.64);
}

.calibration-objective-row[data-objective-key="languageSpecialist"],
.settings-calibration-row[data-objective-key="languageSpecialist"] {
  --objective-accent: rgba(111, 235, 201, 0.46);
  --objective-accent-soft: rgba(111, 235, 201, 0.14);
  --objective-accent-border: rgba(111, 235, 201, 0.64);
}

.calibration-objective-row[data-objective-key="mealPrepPlanning"],
.settings-calibration-row[data-objective-key="mealPrepPlanning"] {
  --objective-accent: rgba(255, 206, 112, 0.48);
  --objective-accent-soft: rgba(255, 206, 112, 0.14);
  --objective-accent-border: rgba(255, 206, 112, 0.66);
}

.calibration-objective-row[data-objective-key="musicGuru"],
.settings-calibration-row[data-objective-key="musicGuru"] {
  --objective-accent: rgba(255, 132, 206, 0.46);
  --objective-accent-soft: rgba(255, 132, 206, 0.13);
  --objective-accent-border: rgba(255, 132, 206, 0.64);
}

.calibration-objective-row[data-objective-key="salesMarketing"],
.settings-calibration-row[data-objective-key="salesMarketing"] {
  --objective-accent: rgba(255, 171, 109, 0.46);
  --objective-accent-soft: rgba(255, 171, 109, 0.14);
  --objective-accent-border: rgba(255, 171, 109, 0.64);
}

.calibration-objective-row[data-objective-key="sportsGuru"],
.settings-calibration-row[data-objective-key="sportsGuru"] {
  --objective-accent: rgba(126, 231, 138, 0.46);
  --objective-accent-soft: rgba(126, 231, 138, 0.14);
  --objective-accent-border: rgba(126, 231, 138, 0.64);
}

.calibration-objective-row[data-objective-key="spiritualSage"],
.settings-calibration-row[data-objective-key="spiritualSage"] {
  --objective-accent: rgba(160, 152, 255, 0.46);
  --objective-accent-soft: rgba(160, 152, 255, 0.14);
  --objective-accent-border: rgba(160, 152, 255, 0.64);
}

.calibration-objective-row[data-objective-key="televisionMotionPictureRadioNewspaperHistorian"],
.settings-calibration-row[data-objective-key="televisionMotionPictureRadioNewspaperHistorian"] {
  --objective-accent: rgba(124, 198, 255, 0.46);
  --objective-accent-soft: rgba(124, 198, 255, 0.14);
  --objective-accent-border: rgba(124, 198, 255, 0.64);
}

.calibration-objective-row[data-objective-key="translator"],
.settings-calibration-row[data-objective-key="translator"] {
  --objective-accent: rgba(121, 232, 235, 0.46);
  --objective-accent-soft: rgba(121, 232, 235, 0.14);
  --objective-accent-border: rgba(121, 232, 235, 0.64);
}

.calibration-objective-row[data-objective-key="intimateConnection"],
.settings-calibration-row[data-objective-key="intimateConnection"] {
  --objective-accent: rgba(248, 131, 180, 0.46);
  --objective-accent-soft: rgba(248, 131, 180, 0.14);
  --objective-accent-border: rgba(248, 131, 180, 0.64);
}

.calibration-scope-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.calibration-tone-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.calibration-slider {
  display: grid;
  gap: 6px;
}

.calibration-slider span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #9ad8ff;
  font-size: 13px;
  font-weight: 700;
}

.calibration-slider output {
  color: var(--stardust);
}

.calibration-slider input[type="range"] {
  width: 100%;
  accent-color: var(--plasma-cyan);
}

.calibration-modal-actions {
  border-top: 1px solid rgba(184, 169, 217, 0.18);
  padding: 12px 16px 16px;
  display: grid;
  gap: 10px;
}

.calibration-status {
  margin: 0;
  font-size: 12px;
  color: rgba(173, 194, 214, 0.92);
  min-height: 1em;
}

.calibration-modal-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.tab {
  border: none;
  background: transparent;
  color: var(--ghost);
  padding: 9px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
}

.tab.active {
  background: rgba(93, 217, 193, 0.18);
  color: var(--stardust);
}

.persona-status-row {
  width: min(1120px, 100%);
  margin: 10px auto 0;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(93, 217, 193, 0.26);
  background: linear-gradient(165deg, rgba(12, 28, 44, 0.9), rgba(9, 21, 36, 0.95));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.persona-status-copy {
  color: var(--stardust);
  font-size: 15px;
  line-height: 1.45;
}

.persona-status-row[data-roster-surface="private"] {
  border-color: rgba(245, 176, 65, 0.3);
  background: linear-gradient(165deg, rgba(27, 18, 10, 0.92), rgba(19, 12, 24, 0.96));
}

.persona-status-row[data-roster-surface="mixed"] {
  border-color: rgba(152, 140, 255, 0.26);
}

.persona-status-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.persona-status-actions .btn.secondary {
  min-height: 40px;
  padding: 8px 14px;
  flex: 0 0 auto;
}

.sandbox {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  align-items: stretch;
}

.sandbox-origin-card {
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(18px, 3vw, 26px);
  gap: 14px;
}

.sandbox-origin-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 900;
  letter-spacing: 0.01em;
}

.sandbox-origin-body {
  color: rgba(242, 242, 242, 0.9);
  font-size: 18px;
  line-height: 1.75;
  max-width: 980px;
}

.sandbox-origin-actions {
  display: flex;
  justify-content: center;
  width: 100%;
}

.sandbox-origin-actions .btn {
  min-width: min(420px, 100%);
}

.feature-guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 14px 0 0;
}

.persona-roster-banner {
  width: min(1120px, 100%);
  margin: 14px auto 0;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(93, 217, 193, 0.22);
  background: linear-gradient(165deg, rgba(8, 22, 36, 0.88), rgba(6, 18, 30, 0.96));
  display: grid;
  gap: 6px;
  justify-items: center;
  text-align: center;
}

.persona-roster-banner > * {
  width: min(980px, 100%);
}

.persona-roster-banner[data-roster-surface="private"] {
  border-color: rgba(245, 176, 65, 0.28);
  background: linear-gradient(165deg, rgba(27, 18, 10, 0.92), rgba(19, 12, 24, 0.96));
}

.persona-roster-banner[data-roster-surface="mixed"] {
  border-color: rgba(152, 140, 255, 0.24);
  background: linear-gradient(165deg, rgba(17, 17, 42, 0.9), rgba(9, 19, 35, 0.96));
}

.persona-roster-banner-kicker {
  margin: 0;
  color: var(--plasma-cyan);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.persona-roster-banner[data-roster-surface="private"] .persona-roster-banner-kicker {
  color: #f5b041;
}

.persona-roster-banner[data-roster-surface="mixed"] .persona-roster-banner-kicker {
  color: #b8a9d9;
}

.persona-roster-banner-title {
  margin: 0;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: clamp(18px, 2.4vw, 24px);
  line-height: 1.1;
  color: var(--stardust);
}

.persona-roster-banner-copy {
  margin: 0;
  color: var(--ghost);
  font-size: 14px;
  line-height: 1.55;
}

[data-motion-preference="reduce"] .room-ai-presence-orb::before,
[data-motion-preference="reduce"] .surface-orb-mark-ring::before,
[data-motion-preference="reduce"] .chat-visual-orb::before,
[data-motion-preference="reduce"] .persona-orb::before,
[data-motion-preference="reduce"] .typing-bubble,
[data-motion-preference="reduce"] .typing-bubble::before,
[data-motion-preference="reduce"] .typing-bubble::after {
  animation: none !important;
  transition: none !important;
}

.chat-helper-shell {
  display: grid;
  gap: 12px;
  margin: 14px 0 0;
  justify-items: center;
}

.chat-helper-shell-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  text-align: center;
}

.chat-helper-shell-copy {
  display: grid;
  gap: 4px;
  justify-items: center;
  text-align: center;
}

.chat-helper-shell-kicker {
  margin: 0;
  color: var(--plasma-cyan);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.chat-helper-shell-title {
  margin: 0;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 20px;
  line-height: 1.1;
  color: var(--stardust);
}

.chat-helper-toggle {
  min-width: 220px;
  justify-content: center;
  margin-inline: auto;
}

.chat-helper-panels {
  display: grid;
  gap: 12px;
}

.chat-helper-panels[hidden] {
  display: none !important;
}

.feature-guide-grid-compact {
  margin-top: 14px;
}

.feature-guide-grid-inline {
  margin-top: 8px;
}

.feature-guide-card {
  border: 1px solid rgba(93, 217, 193, 0.2);
  border-radius: 14px;
  background: linear-gradient(165deg, rgba(10, 24, 40, 0.82), rgba(7, 18, 33, 0.94));
  padding: 14px;
  display: grid;
  gap: 10px;
}

.feature-guide-card .feature-guide-kicker {
  margin: 0;
  color: var(--plasma-cyan);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

.feature-guide-card h2,
.feature-guide-card h3 {
  margin: 0;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 19px;
  line-height: 1.15;
  text-align: center;
}

.feature-guide-card p:not(.feature-guide-kicker) {
  margin: 0;
  color: rgba(214, 226, 240, 0.84);
  line-height: 1.5;
  text-align: left;
}

.feature-guide-card > p:last-child {
  color: rgba(141, 239, 255, 0.96);
  font-size: 0.94rem;
  line-height: 1.55;
}

.feature-guide-grid-chat .feature-guide-card > p:last-child {
  text-align: center;
  font-weight: 800;
}

html.settings-hydrating .header-auth-shell {
  min-width: 220px;
  position: relative;
}

html.settings-hydrating .header-auth-actions {
  min-height: 44px;
}

html.settings-hydrating #settingsHeaderSignInLink,
html.settings-hydrating #settingsHeaderRegisterLink,
html.settings-hydrating #settingsHeaderForgotPasswordLink,
html.settings-hydrating #headerAccountLabel,
html.settings-hydrating #chatSignOutBtn {
  display: none !important;
}

html.settings-hydrating .header-auth-shell::after {
  content: "Loading account...";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(93, 217, 193, 0.3);
  background: rgba(16, 31, 52, 0.78);
  color: rgba(226, 241, 250, 0.88);
  font-size: 0.92rem;
  font-weight: 700;
}

.settings-hydration-screen {
  display: none;
  margin-top: 10px;
  min-height: 340px;
  place-items: center;
  gap: 12px;
  text-align: center;
  border: 1px solid rgba(93, 217, 193, 0.24);
  background:
    radial-gradient(circle at top right, rgba(93, 217, 193, 0.12), transparent 34%),
    radial-gradient(circle at bottom left, rgba(245, 176, 65, 0.12), transparent 34%),
    linear-gradient(145deg, rgba(10, 23, 39, 0.96), rgba(8, 27, 44, 0.94));
}

.settings-hydration-screen .settings-room-title {
  margin: 0;
}

.settings-hydration-screen .settings-room-headline {
  max-width: 54ch;
  margin: 0 auto;
}

html.settings-hydrating .settings-hydration-screen {
  display: grid;
}

html.settings-hydrating main > :not(.settings-hydration-screen) {
  display: none !important;
}

.settings-hero {
  margin-top: 10px;
  display: grid;
  gap: 14px;
}

.settings-flow-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.settings-flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  text-decoration: none;
  border: 1px solid rgba(93, 217, 193, 0.24);
  border-radius: 12px;
  padding: 10px;
  background: rgba(11, 25, 42, 0.62);
  min-width: 0;
}

.settings-flow-step:hover {
  border-color: rgba(93, 217, 193, 0.52);
  background: rgba(18, 36, 58, 0.78);
}

.settings-flow-step:focus-visible {
  outline: 2px solid rgba(93, 217, 193, 0.8);
  outline-offset: 2px;
}

.settings-flow-step-number {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(93, 217, 193, 0.4);
  color: var(--plasma-cyan);
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.settings-flow-step-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  justify-items: center;
}

.settings-flow-step-copy strong {
  font-size: 13px;
  color: rgba(235, 247, 255, 0.96);
}

.settings-flow-step-copy small {
  color: rgba(186, 205, 224, 0.88);
  font-size: 11px;
  line-height: 1.35;
}

.settings-hero-head {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 16px;
}

.settings-page-title {
  margin: 0 0 8px;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-align: center;
}

.settings-page-intro {
  margin: 0;
  color: rgba(228, 237, 246, 0.84);
  max-width: 62ch;
  line-height: 1.6;
  text-align: center;
}

.settings-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.settings-hero .cta-row {
  justify-content: center;
}

.settings-badge {
  border: 1px solid rgba(93, 217, 193, 0.34);
  color: var(--plasma-cyan);
  text-decoration: none;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: rgba(16, 29, 48, 0.62);
}

.settings-badge:hover {
  border-color: rgba(93, 217, 193, 0.62);
  background: rgba(24, 44, 70, 0.7);
}

.settings-badge:focus-visible {
  outline: 2px solid rgba(93, 217, 193, 0.8);
  outline-offset: 2px;
}

.settings-compact-shell {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(93, 217, 193, 0.28);
  background:
    radial-gradient(circle at top right, rgba(93, 217, 193, 0.12), transparent 34%),
    radial-gradient(circle at bottom left, rgba(245, 176, 65, 0.1), transparent 32%),
    linear-gradient(150deg, rgba(10, 23, 39, 0.96), rgba(7, 20, 34, 0.95));
}

.settings-control-compact {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(93, 217, 193, 0.22);
  justify-items: center;
}

.settings-compact-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: space-between;
  gap: 12px;
}

.settings-security-strip {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(93, 217, 193, 0.24);
  background: rgba(7, 19, 31, 0.64);
  color: rgba(223, 238, 248, 0.92);
  font-size: 13px;
  line-height: 1.45;
}

.settings-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid rgba(93, 217, 193, 0.26);
  background: rgba(8, 19, 32, 0.64);
  width: fit-content;
}

.settings-mode-btn {
  min-height: 34px;
  min-width: 110px;
  border-radius: 999px;
  border: 1px solid rgba(93, 217, 193, 0.18);
  background: rgba(12, 24, 40, 0.76);
  color: rgba(218, 233, 245, 0.9);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.settings-mode-btn:hover {
  border-color: rgba(93, 217, 193, 0.42);
}

.settings-mode-btn.is-active {
  border-color: rgba(93, 217, 193, 0.66);
  background: linear-gradient(135deg, rgba(93, 217, 193, 0.24), rgba(54, 150, 211, 0.24));
  color: #eafcff;
}

.settings-mode-btn:focus-visible {
  outline: 2px solid rgba(93, 217, 193, 0.8);
  outline-offset: 2px;
}

.settings-compact-lanes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.settings-compact-lane {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(93, 217, 193, 0.24);
  background: rgba(9, 22, 36, 0.64);
  text-decoration: none;
  text-align: center;
}

.settings-compact-lane:hover {
  border-color: rgba(93, 217, 193, 0.52);
  background: rgba(14, 31, 49, 0.78);
}

.settings-compact-lane:focus-visible {
  outline: 2px solid rgba(93, 217, 193, 0.8);
  outline-offset: 2px;
}

.settings-compact-lane-step {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(93, 217, 193, 0.48);
  color: var(--plasma-cyan);
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.settings-compact-lane-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  justify-items: center;
}

.settings-compact-lane-copy strong {
  color: rgba(236, 247, 255, 0.96);
  font-size: 14px;
}

.settings-compact-lane-copy small {
  color: rgba(186, 205, 224, 0.9);
  font-size: 12px;
  line-height: 1.4;
}

.settings-generalist-default-note {
  color: rgba(141, 239, 255, 0.96);
}

.settings-shell {
  display: grid;
  grid-template-columns: minmax(220px, 270px) minmax(0, 1fr);
  gap: 18px;
  margin-top: 18px;
  align-items: start;
}

.settings-side-nav {
  position: sticky;
  top: 16px;
  align-self: start;
  display: grid;
  gap: 10px;
}

.settings-side-kicker {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ghost);
  font-weight: 800;
}

.settings-jump-nav {
  display: grid;
  gap: 8px;
}

.settings-jump-nav a {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-decoration: none;
  color: rgba(226, 241, 250, 0.95);
  border: 1px solid rgba(93, 217, 193, 0.24);
  border-radius: 10px;
  padding: 9px 11px;
  background: rgba(16, 31, 52, 0.62);
  font-size: 13px;
  font-weight: 700;
}

.settings-jump-nav a:hover {
  border-color: rgba(93, 217, 193, 0.52);
  background: rgba(22, 43, 70, 0.75);
}

.settings-jump-nav a:focus-visible {
  outline: 2px solid rgba(93, 217, 193, 0.82);
  outline-offset: 2px;
}

.settings-jump-step {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(93, 217, 193, 0.42);
  color: var(--plasma-cyan);
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.settings-jump-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.settings-jump-copy strong {
  font-size: 13px;
  line-height: 1.3;
}

.settings-jump-copy small {
  color: rgba(186, 205, 224, 0.88);
  font-size: 11px;
  line-height: 1.35;
}

.settings-side-quick {
  display: grid;
  gap: 8px;
  margin-top: 2px;
}

.settings-side-quick .btn {
  width: 100%;
  justify-content: center;
}

.settings-main-content {
  display: grid;
  gap: 18px;
}

@media (min-width: 1181px) {
  .settings-main-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .settings-room-brief,
  .settings-cluster {
    grid-column: 1 / -1;
  }

  #section-account {
    grid-column: 1;
  }

  #section-calibration {
    grid-column: 2;
  }

  #section-account .settings-cluster-grid,
  #section-calibration .settings-cluster-grid {
    grid-template-columns: 1fr;
  }

  #section-account .settings-panel-wide,
  #section-calibration .settings-panel-wide {
    grid-column: auto;
  }
}

.settings-room-brief {
  display: grid;
  gap: 14px;
  border: 1px solid rgba(245, 176, 65, 0.26);
  background:
    radial-gradient(circle at top right, rgba(245, 176, 65, 0.12), transparent 30%),
    radial-gradient(circle at bottom left, rgba(93, 217, 193, 0.12), transparent 36%),
    linear-gradient(145deg, rgba(11, 24, 39, 0.96), rgba(10, 29, 46, 0.92));
  box-shadow: 0 28px 56px rgba(1, 8, 18, 0.2);
}

.settings-room-head {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  text-align: center;
}

.settings-room-kicker {
  margin: 0 0 6px;
  color: #f0d79f;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.settings-room-title,
.settings-room-card-title {
  margin: 0;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  color: rgba(244, 251, 255, 0.98);
}

.settings-room-title {
  font-size: clamp(24px, 3.1vw, 34px);
  line-height: 1.08;
  text-align: center;
}

.settings-room-headline,
.settings-room-copy,
.settings-room-inline-note,
.settings-room-breadcrumb {
  margin: 0;
  color: rgba(220, 234, 245, 0.88);
  line-height: 1.6;
}

.settings-room-headline {
  max-width: 64ch;
  margin-inline: auto;
  text-align: center;
}

.settings-room-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.settings-room-actions .btn {
  min-width: 210px;
  justify-content: center;
}

.settings-room-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.settings-room-signal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(166, 214, 237, 0.18);
  background: rgba(8, 20, 34, 0.58);
  color: rgba(236, 246, 252, 0.96);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.settings-room-signal[data-tone="accent"] {
  border-color: rgba(93, 217, 193, 0.34);
  color: var(--plasma-cyan);
}

.settings-room-signal[data-tone="warning"] {
  border-color: rgba(245, 176, 65, 0.34);
  color: #ffd8a2;
}

.settings-room-signal[data-tone="guarded"] {
  border-color: rgba(246, 183, 215, 0.3);
  color: #ffd5e8;
}

.settings-room-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.settings-room-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(93, 217, 193, 0.18);
  background: rgba(7, 18, 31, 0.56);
}

.settings-room-card-shield {
  position: relative;
  overflow: hidden;
  border-color: rgba(245, 176, 65, 0.24);
  background: linear-gradient(160deg, rgba(18, 36, 57, 0.74), rgba(10, 24, 39, 0.68));
}

.settings-room-shield-landscape {
  position: relative;
  min-height: 116px;
  border-radius: 18px;
  border: 1px solid rgba(127, 232, 255, 0.16);
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 211, 145, 0.82), rgba(255, 211, 145, 0.2) 14%, transparent 16%),
    radial-gradient(circle at 72% 20%, rgba(127, 232, 255, 0.2), transparent 16%),
    linear-gradient(180deg, rgba(77, 131, 184, 0.34) 0%, rgba(17, 38, 61, 0.9) 58%, rgba(8, 20, 34, 0.98) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.settings-room-shield-landscape::before {
  content: "";
  position: absolute;
  inset: 44% -8% -10% -8%;
  background:
    radial-gradient(ellipse at 18% 100%, rgba(10, 48, 67, 0.98) 0 34%, transparent 35%),
    radial-gradient(ellipse at 48% 100%, rgba(8, 40, 59, 0.98) 0 38%, transparent 39%),
    radial-gradient(ellipse at 82% 100%, rgba(7, 31, 49, 0.98) 0 34%, transparent 35%);
}

.settings-room-shield-landscape::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 0 61%, rgba(127, 232, 255, 0.16) 61% 63%, transparent 63%),
    linear-gradient(90deg, transparent 0 18%, rgba(255, 255, 255, 0.06) 18% 19%, transparent 19% 49%, rgba(255, 255, 255, 0.04) 49% 50%, transparent 50%),
    radial-gradient(circle at 22% 72%, rgba(93, 217, 193, 0.12), transparent 22%);
  opacity: 0.94;
  mix-blend-mode: screen;
}

.settings-room-label {
  margin: 0;
  color: rgba(240, 215, 159, 0.94);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.settings-room-card-title {
  font-size: 18px;
  line-height: 1.2;
}

.settings-room-inline-note {
  color: rgba(190, 208, 225, 0.9);
  font-size: 13px;
}

.settings-room-checklist {
  margin: 0;
  padding-left: 18px;
  color: rgba(220, 234, 245, 0.9);
  display: grid;
  gap: 6px;
}

.settings-room-checklist li {
  line-height: 1.45;
}

.settings-room-breadcrumb {
  color: rgba(166, 214, 237, 0.96);
  font-size: 13px;
}

.settings-room-breadcrumb strong {
  color: rgba(244, 251, 255, 0.98);
}

.settings-cluster {
  display: grid;
  gap: 12px;
}

.settings-cluster-head {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  text-align: center;
}

.settings-cluster-title {
  margin: 0;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.15;
  text-align: center;
}

.settings-cluster-note {
  margin: 0;
  color: rgba(228, 237, 246, 0.75);
  font-size: 13px;
}

.settings-cluster-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.settings-generalist-governance {
  border-color: rgba(245, 176, 65, 0.34);
  background:
    radial-gradient(circle at top right, rgba(245, 176, 65, 0.12), transparent 30%),
    linear-gradient(155deg, rgba(10, 23, 39, 0.8), rgba(7, 18, 33, 0.88));
  display: grid;
  justify-items: center;
}

.settings-generalist-governance > .persona-subsection-title,
.settings-generalist-governance > .persona-subsection-note {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 74ch;
}

.settings-generalist-governance > .persona-subsection-note {
  margin-bottom: 12px;
}

.settings-generalist-governance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.settings-generalist-governance-grid > .settings-generalist-governance-card:last-child {
  grid-column: 1 / -1;
}

.settings-generalist-governance-card {
  margin: 0;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(245, 176, 65, 0.26);
  background: rgba(7, 16, 29, 0.68);
  color: rgba(222, 236, 247, 0.92);
  font-size: 13px;
  line-height: 1.48;
}

.settings-generalist-governance-kicker {
  margin: 0 0 6px;
  color: #f0d79f;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.settings-slider-guidance {
  color: rgba(141, 239, 255, 0.95);
  text-align: center;
}

#settingsPersonaLanguageOverrideFields {
  border: 1px solid rgba(93, 217, 193, 0.2);
  border-radius: 12px;
  padding: 12px;
}

#settingsPersonaLanguageOverrideFields[data-override-active="false"] {
  border-style: dashed;
  border-color: rgba(141, 239, 255, 0.34);
  background: rgba(8, 20, 35, 0.52);
}

#settingsPersonaLanguageOverrideFields[data-override-active="false"] .settings-check,
#settingsPersonaLanguageOverrideFields[data-override-active="false"] .calibration-field {
  opacity: 0.88;
}

.settings-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.settings-panel.is-read-only {
  box-shadow: inset 0 0 0 1px rgba(120, 202, 255, 0.12);
}

.settings-read-only-note {
  margin: 0;
  color: #8fd9ff;
  font-size: 12px;
  line-height: 1.45;
}

.settings-panel-wide {
  grid-column: 1 / -1;
}

.settings-persona-studio-shell {
  display: grid;
  gap: 18px;
  padding: 18px;
  border-color: rgba(93, 217, 193, 0.26);
  background:
    radial-gradient(circle at top right, rgba(93, 217, 193, 0.1), transparent 28%),
    linear-gradient(160deg, rgba(11, 24, 39, 0.97), rgba(8, 20, 35, 0.96));
}

.settings-persona-studio-intro {
  display: grid;
  gap: 12px;
  align-content: start;
  justify-items: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(93, 217, 193, 0.18);
  background: rgba(10, 21, 35, 0.54);
  text-align: center;
}

.settings-persona-studio-intro .settings-controls {
  justify-items: center;
  width: 100%;
}

.settings-persona-panel {
  margin-top: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

@media (min-width: 1100px) {
  .settings-persona-studio-shell {
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    align-items: start;
  }
}

.settings-panel-landscape {
  gap: 14px;
}

.settings-panel-landscape > .settings-title,
.settings-panel-landscape > .settings-note {
  text-align: center;
  margin-inline: auto;
}

.settings-panel-landscape > .settings-note {
  max-width: 82ch;
}

.settings-controls-landscape {
  display: grid;
  gap: 12px;
  justify-items: center;
}

.settings-controls-landscape .settings-check,
.settings-controls-landscape .settings-label,
.settings-controls-landscape .settings-row {
  width: min(980px, 100%);
}

.settings-controls-landscape .settings-label {
  text-align: center;
}

.settings-controls-landscape .settings-row select {
  text-align: left;
}

.settings-panel-landscape > .cta-row,
.settings-controls-landscape .persona-voice-actions {
  justify-content: center;
}

.settings-controls-landscape > .settings-note {
  grid-column: 1 / -1;
}

.settings-inline-setting {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(93, 217, 193, 0.18);
  background: rgba(8, 18, 32, 0.48);
}

.settings-inline-setting .settings-label,
.settings-inline-setting .settings-note {
  margin: 0;
}

.settings-inline-setting .settings-label {
  overflow-wrap: anywhere;
}

.settings-inline-setting input,
.settings-inline-setting select {
  width: 100%;
  min-width: 0;
}

.settings-session-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.settings-session-row {
  align-items: stretch;
}

.settings-session-row > .btn {
  min-width: 120px;
}

.settings-admin-card {
  border-color: rgba(245, 176, 65, 0.28);
  background: linear-gradient(145deg, rgba(15, 24, 38, 0.96), rgba(12, 30, 46, 0.9));
}

.settings-admin-actions,
.settings-persona-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.settings-persona-toolbar {
  justify-content: center;
}

.settings-admin-actions .btn,
.settings-persona-toolbar .btn,
.settings-persona-toolbar select {
  min-width: 190px;
}

.settings-persona-panel {
  margin-top: 0;
}

.settings-panel-centered .settings-note,
.settings-panel-centered .settings-label {
  text-align: center;
}

.settings-backup-card {
  border-color: rgba(93, 217, 193, 0.28);
  background:
    radial-gradient(circle at top right, rgba(93, 217, 193, 0.1), transparent 28%),
    radial-gradient(circle at bottom left, rgba(245, 176, 65, 0.08), transparent 28%),
    linear-gradient(160deg, rgba(10, 23, 39, 0.96), rgba(8, 20, 35, 0.94));
}

.settings-backup-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.settings-backup-price {
  margin: 0;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(93, 217, 193, 0.28);
  background: rgba(8, 20, 34, 0.56);
  color: var(--plasma-cyan);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.settings-backup-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.settings-backup-summary span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(93, 217, 193, 0.22);
  background: rgba(8, 20, 34, 0.56);
  color: rgba(228, 237, 246, 0.94);
  font-size: 12px;
  line-height: 1.35;
}

.settings-backup-summary span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--plasma-cyan);
  box-shadow: 0 0 0 3px rgba(93, 217, 193, 0.14);
  flex: 0 0 auto;
}

.settings-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 220px));
  justify-content: center;
  width: 100%;
}

.settings-action-grid .btn {
  width: 100%;
  justify-content: center;
  text-align: center;
}

.settings-cookie-controls,
.settings-backup-settings {
  margin-top: 16px;
}

.settings-backup-settings .cta-row {
  justify-content: center;
}

.settings-backup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  align-items: start;
}

.settings-inline-setting-wide {
  grid-column: 1 / -1;
}

.settings-cookie-actions {
  justify-content: center;
}

#section-billing #voice-credits {
  grid-column: 1;
}

#section-billing #image-credits {
  grid-column: 2;
}

#section-billing #credit-bundles {
  grid-column: 1 / -1;
}

.settings-title {
  margin: 0;
  font-size: 20px;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  text-align: center;
}

.settings-note {
  margin: 0;
  color: rgba(214, 226, 240, 0.82);
  font-size: 13px;
  line-height: 1.55;
}

.settings-note-cyan {
  color: var(--voice-cyan);
}

#settingsBackupLocationLabel,
#settingsBackupNamingPreview,
#settingsBackupPrefsStatus,
#settingsBackupStatus,
#settingsBackupLocalStatus,
#settingsBackupRemoteStatus {
  text-align: center;
}

#settingsBackupNamingPreview,
#settingsBackupPrefsStatus,
#settingsBackupStatus,
#settingsBackupLocalStatus,
#settingsBackupRemoteStatus {
  color: rgba(141, 239, 255, 0.96);
  font-weight: 700;
}

#settingsSaveBackupPrefsBtn {
  min-width: min(320px, 100%);
  margin-inline: auto;
}

.settings-community-panel > .settings-title,
.settings-community-panel > .settings-note,
.settings-community-panel #settingsCommunityAliasStatus {
  text-align: center;
}

.settings-community-panel > .settings-note,
.settings-community-panel #settingsCommunityAliasStatus {
  max-width: 52ch;
  margin-inline: auto;
}

.settings-title-sm {
  font-size: 18px;
  margin: 0;
}

.voice-pack-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.voice-pack-grid .btn {
  width: 100%;
  justify-content: center;
  min-height: 68px;
  text-align: center;
  line-height: 1.15;
  white-space: normal;
}

.settings-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

/* Keep objective cards as a true grid; generic settings-controls flex rules should not collapse this lane. */
.settings-controls.settings-calibration-objectives {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-flow: row;
}

@media (min-width: 768px) {
  .settings-objectives-panel .settings-controls.settings-calibration-objectives {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }
}

.settings-provider-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.settings-provider-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(93, 217, 193, 0.2);
  background:
    radial-gradient(circle at top right, rgba(93, 217, 193, 0.12), transparent 34%),
    linear-gradient(145deg, rgba(10, 22, 38, 0.92), rgba(13, 35, 58, 0.82));
}

.settings-provider-copy {
  display: grid;
  gap: 4px;
}

.settings-provider-card .btn {
  width: 100%;
  justify-content: center;
}

.settings-provider-card-wide {
  grid-column: 1 / -1;
}

.settings-provider-card-form {
  gap: 14px;
}

.settings-provider-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.settings-provider-form-grid .settings-label {
  margin: 0;
}

#settingsLinkAccountStatus,
#settingsCalibrationObjectiveStatus,
#calibrationObjectiveStatus {
  min-height: 1.4em;
  color: rgba(141, 239, 255, 0.94);
}

.settings-check-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.settings-briefing-shell {
  margin-top: 14px;
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 198, 92, 0.24);
  background:
    radial-gradient(circle at top right, rgba(255, 198, 92, 0.12), transparent 34%),
    linear-gradient(145deg, rgba(16, 24, 39, 0.94), rgba(13, 35, 58, 0.84));
}

.settings-briefing-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.settings-briefing-head > div {
  display: grid;
  gap: 4px;
  text-align: center;
  margin-inline: auto;
}

.settings-briefing-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.settings-briefing-actions .settings-note {
  margin: 0;
}

.settings-briefing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 12px;
  align-items: center;
}

.settings-briefing-grid input,
.settings-briefing-grid select {
  width: 100%;
}

.settings-briefing-picks {
  display: grid;
  gap: 12px;
}

.settings-briefing-notice {
  margin: 2px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed rgba(93, 217, 193, 0.34);
  background: rgba(8, 20, 34, 0.56);
  color: rgba(214, 236, 250, 0.9);
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}

.settings-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.settings-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(93, 217, 193, 0.24);
  background: rgba(9, 21, 38, 0.62);
  color: rgba(233, 244, 252, 0.92);
  font-size: 12px;
  font-weight: 700;
}

.settings-chip input {
  margin: 0;
}

.settings-privacy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.settings-privacy-surface {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(93, 217, 193, 0.2);
  background:
    radial-gradient(circle at top right, rgba(93, 217, 193, 0.12), transparent 34%),
    linear-gradient(145deg, rgba(10, 22, 38, 0.92), rgba(13, 35, 58, 0.82));
}

.settings-privacy-surface-global {
  background:
    radial-gradient(circle at top right, rgba(255, 198, 92, 0.12), transparent 36%),
    linear-gradient(145deg, rgba(18, 27, 45, 0.94), rgba(14, 40, 60, 0.86));
}

.settings-privacy-surface-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.settings-privacy-kicker {
  margin: 0 0 4px;
  color: rgba(143, 230, 213, 0.9);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.settings-privacy-surface .settings-title-sm {
  margin: 0;
}

.settings-privacy-surface .settings-controls select {
  width: 100%;
}

.settings-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.settings-contact-grid > div {
  display: grid;
  gap: 6px;
}

.settings-structured-section {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(93, 217, 193, 0.18);
  display: grid;
  gap: 14px;
}

.settings-structured-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.settings-structured-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.settings-structured-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(93, 217, 193, 0.18);
  background: rgba(9, 20, 34, 0.62);
}

.settings-structured-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.settings-structured-list {
  display: grid;
  gap: 10px;
}

.settings-structured-item {
  display: grid;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(93, 217, 193, 0.2);
  background: rgba(6, 17, 30, 0.62);
}

.settings-structured-item-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.settings-structured-item-title {
  font-size: 15px;
  font-weight: 700;
  color: rgba(232, 240, 248, 0.96);
}

.settings-structured-remove {
  min-height: 36px;
  padding-inline: 14px;
}

.settings-structured-empty {
  padding: 14px;
  border-radius: 12px;
  border: 1px dashed rgba(93, 217, 193, 0.24);
  color: rgba(197, 215, 232, 0.86);
  background: rgba(9, 20, 34, 0.4);
}

.settings-contact-grid-structured > div:last-child {
  grid-column: 1 / -1;
}

.settings-label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  color: rgba(154, 216, 255, 0.92);
}

.settings-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.settings-row-compact {
  flex-wrap: nowrap;
  align-items: stretch;
}

.settings-row > * {
  min-width: 0;
}

.settings-row-compact > .btn {
  flex: 0 0 auto;
  min-width: 96px;
  justify-content: center;
}

.settings-row input,
.settings-row select {
  flex: 1;
  min-height: 42px;
  background: rgba(30, 45, 61, 0.8);
  border: 1px solid rgba(93, 217, 193, 0.2);
  color: var(--stardust);
  padding: 12px;
  border-radius: 10px;
  font: inherit;
  font-weight: 600;
}

.settings-row textarea {
  width: 100%;
  min-height: 110px;
  background: rgba(30, 45, 61, 0.8);
  border: 1px solid rgba(93, 217, 193, 0.2);
  color: var(--stardust);
  padding: 12px;
  border-radius: 10px;
  font: inherit;
  font-weight: 600;
  resize: vertical;
}

.settings-row select {
  padding: 8px 34px 8px 12px;
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--plasma-cyan) 50%),
    linear-gradient(135deg, var(--plasma-cyan) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.settings-row input:focus-visible,
.settings-row select:focus-visible {
  outline: none;
  border-color: rgba(93, 217, 193, 0.64);
  box-shadow: 0 0 0 2px rgba(93, 217, 193, 0.18);
}

.settings-row textarea:focus-visible {
  outline: none;
  border-color: rgba(93, 217, 193, 0.64);
  box-shadow: 0 0 0 2px rgba(93, 217, 193, 0.18);
}

.settings-row select option {
  color: var(--stardust);
  background: #0b1628;
}

.settings-row-landscape > input {
  min-width: 220px;
}

.settings-row-landscape > .btn.secondary {
  min-width: 120px;
}

.danger-zone-retention-note {
  display: block;
  margin-top: 10px;
  color: rgba(93, 217, 193, 0.98);
  font-weight: 700;
}

.settings-avatar-row {
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
}

.settings-row-stack-mobile {
  align-items: stretch;
}

.settings-row-stack-mobile > input,
.settings-row-stack-mobile > select,
.settings-row-stack-mobile > textarea {
  flex: 1 1 320px;
  min-width: 0;
}

.settings-row-stack-mobile > .btn {
  flex: 0 0 220px;
}

.settings-avatar-picker {
  display: grid;
  gap: 8px;
  flex: 1 1 240px;
  min-width: 0;
}

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

.settings-avatar-file-trigger {
  width: 100%;
  justify-content: center;
}

.settings-avatar-file-name {
  margin: 0;
  color: rgba(214, 226, 240, 0.82);
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}

.settings-avatar-preview {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 1px solid rgba(93, 217, 193, 0.46);
  object-fit: cover;
  background: rgba(12, 24, 38, 0.9);
  flex: 0 0 auto;
}

.settings-avatar-row > .btn.secondary {
  flex: 1 1 180px;
  min-width: 180px;
  justify-content: center;
}

.settings-memory-pin-gate {
  border: 1px solid rgba(93, 217, 193, 0.24);
  border-radius: 12px;
  padding: 10px;
  background: rgba(6, 17, 30, 0.56);
}

.settings-memory-list {
  display: grid;
  gap: 10px;
}

.settings-memory-item {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(93, 217, 193, 0.24);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(11, 24, 40, 0.72);
}

.settings-memory-item-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(210, 227, 243, 0.88);
}

.settings-memory-item-head input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--plasma-cyan);
}

.settings-memory-item-label {
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(220, 235, 248, 0.92);
}

.settings-memory-item-meta {
  font-size: 12px;
  color: rgba(164, 187, 210, 0.9);
}

.settings-memory-item-summary {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(228, 237, 246, 0.94);
}

#section-safety .settings-panel.crisis .settings-title,
#section-safety .settings-panel.crisis .settings-note,
#section-safety .settings-panel.crisis .settings-label {
  text-align: center;
}

.settings-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--stardust);
  font-size: 14px;
  line-height: 1.4;
}

.settings-check input[type="checkbox"] {
  margin: 0;
}

.calibration-objective-row select,
.settings-calibration-row select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--stardust) 50%),
    linear-gradient(135deg, var(--stardust) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 28px;
}

.settings-calibration-tone-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.settings-calibration-slider {
  display: grid;
  gap: 6px;
}

.settings-calibration-slider span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: rgba(154, 216, 255, 0.96);
  font-size: 13px;
  font-weight: 700;
}

.settings-calibration-slider input[type="range"] {
  width: 100%;
  accent-color: var(--plasma-cyan);
}

@media (max-width: 1180px) {
  .settings-flow-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings-shell {
    grid-template-columns: 1fr;
  }

  .settings-side-nav {
    position: static;
  }

  .settings-provider-form-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 920px) {
  .settings-compact-lanes {
    grid-template-columns: 1fr;
  }

  .settings-mode-toggle {
    width: 100%;
    justify-content: stretch;
  }

  .settings-mode-btn {
    flex: 1 1 0;
    min-width: 0;
  }

  .settings-flow-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings-room-grid {
    grid-template-columns: 1fr;
  }

  .settings-cluster-grid {
    grid-template-columns: 1fr;
  }

  .settings-privacy-grid {
    grid-template-columns: 1fr;
  }

  .settings-provider-grid {
    grid-template-columns: 1fr;
  }

  .settings-briefing-head {
    flex-direction: column;
  }

  .settings-briefing-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .settings-briefing-grid {
    grid-template-columns: 1fr;
  }

  .settings-session-grid {
    grid-template-columns: 1fr;
  }

  .settings-controls-landscape {
    grid-template-columns: 1fr;
  }

  .settings-room-actions {
    flex-direction: column;
  }

  .settings-room-actions .btn {
    width: 100%;
    min-width: 0;
  }

  .settings-admin-actions .btn,
  .settings-persona-toolbar .btn,
  .settings-persona-toolbar select {
    width: 100%;
    min-width: 0;
  }

  #section-billing #voice-credits,
  #section-billing #image-credits,
  #section-billing #credit-bundles {
    grid-column: 1;
  }

  .settings-contact-grid {
    grid-template-columns: 1fr;
  }

  .settings-structured-grid {
    grid-template-columns: 1fr;
  }

  .settings-generalist-governance-grid {
    grid-template-columns: 1fr;
  }

  .voice-pack-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings-row-compact {
    flex-wrap: wrap;
  }

  .settings-session-row {
    flex-wrap: wrap;
  }

  .settings-row-compact > .btn {
    width: 100%;
    flex: 1 1 100%;
  }

  .settings-session-row > .btn {
    width: 100%;
    min-width: 0;
  }

  .settings-row-stack-mobile {
    flex-wrap: wrap;
  }

  .settings-row-stack-mobile > .btn,
  .settings-avatar-row > .btn.secondary {
    width: 100%;
    flex: 1 1 100%;
    min-width: 0;
  }

  .settings-avatar-picker {
    width: 100%;
  }

  .platform-prefs,
  .platform-prefs-landscape {
    grid-template-columns: 1fr;
  }

  .settings-calibration-tone-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 768px) and (max-width: 920px) {
  .settings-generalist-governance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .settings-compact-head {
    flex-direction: column;
  }

  .settings-flow-summary {
    grid-template-columns: 1fr;
  }

  .settings-room-head {
    flex-direction: column;
  }

  .settings-room-headline {
    max-width: none;
  }

  .voice-pack-grid {
    grid-template-columns: 1fr;
  }

  .settings-page-title {
    font-size: 34px;
  }

  .settings-calibration-row {
    grid-template-columns: 1fr;
  }

  .objective-rank-control {
    width: 100%;
    justify-items: stretch;
  }

  .objective-rank-label {
    justify-self: start;
  }

  .settings-calibration-row select {
    width: 100%;
  }
}

@media (max-width: 920px) {
  .calibration-objective-row,
  .settings-calibration-row {
    grid-template-columns: minmax(0, 1fr) minmax(104px, 118px);
    gap: 10px;
    align-items: start;
  }

  .objective-rank-control {
    width: 100%;
    min-width: 0;
    justify-items: stretch;
    gap: 4px;
  }

  .objective-rank-label {
    justify-self: start;
    letter-spacing: 0.1em;
  }

  .calibration-objective-row select,
  .settings-calibration-row select {
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    font-size: 15px;
    line-height: 1.2;
  }
}

@media (max-width: 560px) {
  .calibration-objective-row,
  .settings-calibration-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .objective-rank-control {
    grid-template-columns: auto minmax(92px, 118px);
    align-items: center;
    justify-items: stretch;
  }

  .calibration-objective-row select,
  .settings-calibration-row select {
    width: 100%;
  }
}

body[data-settings-mode="basic"] .settings-shell {
  grid-template-columns: 1fr;
}

body[data-settings-mode="basic"] .settings-side-nav,
body[data-settings-mode="basic"] .settings-guide-grid,
body[data-settings-mode="basic"] .settings-flow-summary,
body[data-settings-mode="basic"] .settings-hero-badges {
  display: none !important;
}

body[data-settings-mode="basic"] .settings-main-content {
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 1181px) {
  body[data-settings-mode="basic"] .settings-main-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  body[data-settings-mode="basic"] .settings-room-brief,
  body[data-settings-mode="basic"] #section-privacy,
  body[data-settings-mode="basic"] #section-safety {
    grid-column: 1 / -1;
  }

  body[data-settings-mode="basic"] .settings-cluster {
    grid-column: auto;
  }

  body[data-settings-mode="basic"] #section-account .settings-cluster-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-settings-mode="basic"] #section-account .settings-panel-wide {
    grid-column: 1 / -1;
  }

  body[data-settings-mode="basic"] #section-billing .settings-backup-card {
    grid-column: 1 / -1;
  }
}

@media (min-width: 980px) {
  .settings-controls-landscape {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.chat-box {
  background: rgba(10, 19, 34, 0.95);
  border: 1px solid rgba(184, 169, 217, 0.2);
  border-radius: var(--radius);
  padding: 16px;
  height: var(--chat-box-height-desktop);
  min-height: var(--chat-box-height-desktop);
  max-height: var(--chat-box-height-desktop);
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  overflow: hidden;
}

.chat-disclaimer {
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(93, 217, 193, 0.2);
  background: rgba(93, 217, 193, 0.08);
  color: var(--plasma-cyan);
  font-size: 13px;
  line-height: 1.5;
}

.chat-access {
  margin-top: 10px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(184, 169, 217, 0.24);
  background: rgba(14, 25, 42, 0.72);
}

.chat-access.guest-register-focus {
  text-align: center;
}

.chat-access-status {
  font-size: 13px;
  font-weight: 700;
  color: #9ad8ff;
  text-align: center;
}

.chat-access.guest-register-focus .chat-access-status {
  font-size: clamp(15px, 1.6vw, 22px);
  line-height: 1.28;
  font-weight: 900;
  letter-spacing: 0.01em;
  color: var(--plasma-cyan);
  text-align: center;
}

.chat-access-status.mode-persistent {
  color: #8df0ca;
}

.chat-access-controls {
  display: block;
  margin-top: 10px;
}

.chat-auth-location-note {
  grid-column: 1 / -1;
  color: var(--ghost);
  font-size: 12px;
  line-height: 1.45;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px dashed rgba(93, 217, 193, 0.34);
  background: rgba(10, 22, 36, 0.62);
}

.chat-access-controls input,
.chat-access-controls button {
  min-height: 42px;
  border-radius: 10px;
  font: inherit;
}

.chat-access-controls input {
  background: rgba(30, 45, 61, 0.8);
  border: 1px solid rgba(93, 217, 193, 0.2);
  color: var(--stardust);
  padding: 10px 12px;
}

.chat-access-controls button {
  border: 1px solid rgba(93, 217, 193, 0.35);
  background: var(--plasma-cyan);
  color: #06211b;
  font-weight: 700;
  cursor: pointer;
}

.chat-access-controls #chatRegisterBtn {
  background: rgba(93, 217, 193, 0.14);
  color: var(--stardust);
}

.chat-access-controls .chat-auth-link {
  grid-column: 1 / -1;
  background: transparent;
  color: var(--plasma-cyan);
  border-style: dashed;
}

.chat-access-controls #chatSignOutBtn {
  grid-column: 1 / -1;
}

.chat-access-hint {
  margin-top: 8px;
  font-size: 12px;
  color: rgba(141, 239, 255, 0.96);
  line-height: 1.45;
  text-align: center;
  font-weight: 700;
}

.chat-access.guest-register-focus .chat-access-hint {
  text-align: center;
  font-size: clamp(16px, 1.8vw, 24px);
  line-height: 1.34;
  font-weight: 900;
  color: rgba(136, 245, 228, 0.98);
}

.chat-generalist-panel {
  position: relative;
  margin-top: 10px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--veda-panel-border);
  background:
    radial-gradient(circle at top right, rgba(245, 176, 65, 0.18), transparent 34%),
    radial-gradient(circle at bottom left, rgba(93, 217, 193, 0.16), transparent 36%),
    var(--veda-panel-bg);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.24);
  overflow: hidden;
}

.chat-generalist-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 55%);
  pointer-events: none;
}

.chat-generalist-head,
.chat-generalist-grid,
.chat-generalist-note {
  position: relative;
  z-index: 1;
}

.chat-generalist-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: flex-start;
  gap: 16px;
}

.chat-generalist-copy {
  min-width: 0;
  max-width: 74ch;
  margin: 0 auto;
  justify-self: center;
  text-align: center;
}

.chat-generalist-eyebrow {
  margin: 0;
  color: #f8fdff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.chat-generalist-title {
  margin: 8px 0 0;
  color: var(--veda-panel-copy);
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.16;
  letter-spacing: -0.02em;
}

.chat-generalist-phase {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(245, 176, 65, 0.34);
  background: rgba(245, 176, 65, 0.12);
  color: #ffe5bf;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.chat-generalist-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.chat-generalist-card {
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(127, 191, 229, 0.22);
  background: rgba(7, 17, 30, 0.58);
  backdrop-filter: blur(6px);
  text-align: center;
}

.chat-generalist-card-label {
  display: block;
  margin-bottom: 8px;
  color: #f8fdff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

.chat-generalist-card-value {
  margin: 0;
  color: var(--voice-cyan);
  font-size: clamp(17px, 1.45vw, 21px);
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
}

.chat-generalist-note {
  margin: 14px auto 0;
  max-width: 76ch;
  color: #ff6f7d;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.55;
  text-align: center;
}

.chat-generalist-panel[data-phase="after-hours"] {
  border-color: rgba(245, 176, 65, 0.4);
}

.chat-generalist-panel[data-phase="after-hours"] .chat-generalist-phase {
  border-color: rgba(245, 176, 65, 0.52);
  background: rgba(245, 176, 65, 0.18);
  color: #fff0d3;
}

.chat-generalist-panel[data-phase="after-hours"] .chat-generalist-card-label {
  color: var(--veda-panel-warm);
}

.chat-crisis-banner {
  margin-top: 10px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(245, 176, 65, 0.45);
  background: rgba(245, 176, 65, 0.12);
  color: #ffe8c5;
}

.chat-ai-disclosure {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(93, 217, 193, 0.35);
  background: rgba(93, 217, 193, 0.11);
  color: rgba(201, 244, 236, 0.95);
  font-size: 13px;
  line-height: 1.45;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.chat-ai-disclosure.is-emphasized {
  border-color: rgba(245, 176, 65, 0.78);
  background: rgba(245, 176, 65, 0.16);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24);
  transform: translateY(-1px);
}

.chat-ai-disclosure-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  flex: 0 0 24px;
  object-fit: cover;
  border: 1px solid rgba(93, 217, 193, 0.45);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  background: rgba(7, 25, 46, 0.55);
}

.chat-ai-disclosure-text {
  flex: 1 1 auto;
  min-width: 180px;
}

.chat-ai-disclosure-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.chat-ai-disclosure-action {
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(93, 217, 193, 0.45);
  background: rgba(7, 25, 46, 0.55);
  color: #c9f4ec;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.chat-ai-disclosure-action.secondary {
  border-color: rgba(173, 194, 214, 0.45);
  color: rgba(201, 216, 231, 0.95);
}

.chat-ai-disclosure-action:hover {
  border-color: rgba(93, 217, 193, 0.8);
}

.chat-ai-disclosure-action:focus-visible {
  outline: 2px solid rgba(93, 217, 193, 0.9);
  outline-offset: 2px;
}

.translator-panel {
  display: grid;
  gap: 12px;
  margin: 14px 0 4px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(93, 217, 193, 0.26);
  background: rgba(7, 20, 36, 0.82);
}

.translator-panel[data-active="false"] {
  opacity: 0.74;
}

.translator-panel-head {
  display: grid;
  gap: 4px;
}

.translator-panel-kicker {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  font-weight: 800;
  color: rgba(141, 239, 255, 0.96);
}

.translator-panel-title {
  margin: 0;
  font-size: clamp(1.02rem, 1.7vw, 1.18rem);
  line-height: 1.25;
}

.translator-panel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}

.translator-toggle,
.translator-field {
  display: grid;
  gap: 6px;
  align-content: start;
  color: rgba(224, 237, 248, 0.95);
  font-size: 14px;
}

.translator-toggle > input {
  accent-color: var(--plasma-cyan);
}

.translator-field > select {
  min-height: 42px;
  border-radius: 12px;
  padding: 0 11px;
  border: 1px solid rgba(93, 217, 193, 0.28);
  background: rgba(11, 27, 45, 0.88);
  color: var(--stardust);
  font-size: 15px;
}

.translator-field > select:focus-visible {
  outline: 2px solid rgba(93, 217, 193, 0.72);
  outline-offset: 2px;
}

.translator-speaker-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.translator-speaker-row button {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(93, 217, 193, 0.3);
  background: rgba(10, 24, 40, 0.9);
  color: rgba(233, 246, 255, 0.95);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.translator-speaker-row button.is-active {
  border-color: rgba(93, 217, 193, 0.88);
  background: rgba(26, 78, 94, 0.72);
}

.translator-speaker-row button:disabled {
  opacity: 0.5;
  cursor: default;
}

.translator-speaker-row button:focus-visible {
  outline: 2px solid rgba(93, 217, 193, 0.72);
  outline-offset: 2px;
}

.translator-detection,
.translator-legal-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

.translator-detection {
  color: rgba(171, 231, 244, 0.96);
  font-weight: 700;
}

.translator-legal-note {
  color: rgba(188, 208, 226, 0.92);
}

.message.translator-turn .msg-body {
  width: min(100%, 900px);
}

.message.translator-turn[data-speaker="a"] .bubble.user {
  background: rgba(93, 217, 193, 0.16);
}

.message.translator-turn[data-speaker="b"] .bubble.user {
  background: rgba(245, 176, 65, 0.14);
}

.translator-turn-bubble {
  display: grid;
  gap: 10px;
}

.translator-turn-heading {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(141, 239, 255, 0.96);
}

.translator-turn-block {
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid rgba(141, 239, 255, 0.24);
  background: rgba(8, 21, 35, 0.64);
}

.translator-turn-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(160, 223, 237, 0.95);
}

.translator-turn-value {
  white-space: pre-wrap;
  word-break: break-word;
}

.translator-turn-note {
  color: rgba(255, 209, 150, 0.96);
  font-size: 12px;
}

body.ai-disclosure-hidden #chatAiDisclosure {
  display: none !important;
}

.voice-credit-notice {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(245, 176, 65, 0.42);
  background: rgba(245, 176, 65, 0.12);
  display: grid;
  gap: 10px;
}

.voice-credit-notice-text {
  color: rgba(255, 231, 191, 0.98);
  font-size: 13px;
  line-height: 1.45;
}

.voice-credit-notice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.chat-crisis-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
}

.chat-crisis-text {
  color: #ffd79d;
  font-size: 14px;
  line-height: 1.5;
}

.chat-crisis-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

#chatCrisisDismissBtn {
  margin-left: auto;
}

.chat-log {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: none;
  overflow-y: auto;
  min-height: 0;
  overscroll-behavior: auto;
}

.chat-feedback-hint {
  margin: 6px 2px 8px;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(141, 239, 255, 0.96);
  text-align: center;
  font-weight: 700;
}

.message {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.message.user {
  flex-direction: row-reverse;
}

.msg-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  object-position: var(--chat-portrait-position, center 8%);
  border: 1px solid rgba(93, 217, 193, 0.4);
  background: #0b1422;
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: 2px;
}

.msg-avatar-shell {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: 2px;
  overflow: hidden;
}

.msg-avatar.user {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--stardust);
  border: 1px solid rgba(184, 169, 217, 0.35);
  background: rgba(184, 169, 217, 0.12);
}

.msg-avatar.user.is-image {
  display: block;
  font-size: 0;
  color: transparent;
  border: 1px solid rgba(184, 169, 217, 0.45);
  background: rgba(13, 21, 36, 0.94);
  object-fit: cover;
  object-position: center;
}

.msg-avatar-shell.user {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  padding: 2px;
  background: rgba(184, 169, 217, 0.12);
  box-shadow: 0 0 0 1px rgba(184, 169, 217, 0.16);
}

.msg-avatar.ai {
  width: var(--chat-message-avatar-size);
  height: var(--chat-message-avatar-size);
  border: 2px solid rgba(93, 217, 193, 0.7);
  box-shadow: 0 0 0 1px rgba(93, 217, 193, 0.22), 0 4px 12px rgba(0, 0, 0, 0.28);
}

.msg-avatar-shell.ai {
  width: var(--chat-message-avatar-size);
  height: var(--chat-message-avatar-size);
  padding: 2px;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(93, 217, 193, 0.24), 0 4px 12px rgba(0, 0, 0, 0.28);
  background: rgba(10, 20, 34, 0.85);
}

.msg-avatar-shell.ai::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: conic-gradient(
    #00d4ff 0%,
    #00ff88 25%,
    #ffd700 50%,
    #ff1493 75%,
    #00d4ff 100%
  );
  animation: persona-orb-spin 4s linear infinite;
  z-index: 0;
  opacity: 0.98;
}

.msg-avatar-shell.ai::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  z-index: 2;
  pointer-events: none;
}

.msg-avatar-shell.ai .msg-avatar.ai {
  border: none;
  box-shadow: none;
  width: 100%;
  height: 100%;
  margin-top: 0;
  position: relative;
  z-index: 1;
}

.msg-avatar-shell.ai.system-icon {
  padding: 0;
}

.msg-avatar-shell.ai.system-icon::before {
  display: none;
}

.msg-avatar-shell.ai.system-icon .msg-avatar.ai {
  border: 2px solid rgba(93, 217, 193, 0.7);
  box-shadow: 0 0 0 1px rgba(93, 217, 193, 0.22), 0 4px 12px rgba(0, 0, 0, 0.28);
}

.msg-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 78%;
}

.message.user .msg-body {
  align-items: flex-end;
}

.msg-meta {
  font-size: 11px;
  color: var(--ghost);
  opacity: 0.7;
}

.msg-feedback {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.msg-feedback-btn {
  width: 52px;
  min-width: 52px;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(93, 217, 193, 0.35);
  background: rgba(7, 17, 35, 0.72);
  color: var(--stardust);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.msg-feedback-btn[data-selected="yes"] {
  border-color: rgba(93, 217, 193, 0.88);
  background: rgba(93, 217, 193, 0.2);
  color: #d8fff8;
  box-shadow: 0 0 0 1px rgba(93, 217, 193, 0.3), 0 0 12px rgba(93, 217, 193, 0.22);
}

.msg-feedback-btn[data-feedback-reaction="star"][data-selected="yes"] {
  border-color: rgba(245, 176, 65, 0.88);
  background: rgba(245, 176, 65, 0.22);
  color: #ffe8ba;
  box-shadow: 0 0 0 1px rgba(245, 176, 65, 0.32), 0 0 12px rgba(245, 176, 65, 0.22);
}

.msg-feedback-btn:hover:not(:disabled),
.msg-feedback-btn:focus-visible:not(:disabled) {
  border-color: rgba(93, 217, 193, 0.78);
  background: rgba(93, 217, 193, 0.14);
}

.msg-feedback-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.msg-feedback-icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
}

.msg-feedback-icon svg {
  width: 18px;
  height: 18px;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.msg-feedback-btn[data-feedback-reaction="star"][data-selected="yes"] .msg-feedback-icon svg {
  fill: currentColor;
}

.msg-feedback-btn[data-selected="yes"] .msg-feedback-icon svg {
  fill: currentColor;
  stroke: currentColor;
}

.msg-feedback-status {
  flex: 1 0 100%;
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.35;
  color: rgba(173, 194, 214, 0.9);
  min-height: 1em;
}

.msg-feedback-status[data-kind="pending"] {
  color: rgba(173, 194, 214, 0.96);
}

.msg-feedback-status[data-kind="success"] {
  color: rgba(132, 242, 223, 0.96);
}

.msg-feedback-status[data-kind="error"] {
  color: rgba(255, 168, 168, 0.96);
}

.bubble {
  max-width: 92%;
  padding: 12px 14px;
  border-radius: 12px;
  line-height: 1.5;
}

.bubble.user {
  align-self: flex-end;
  background: rgba(93, 217, 193, 0.16);
}

.bubble.ai {
  align-self: flex-start;
  background: rgba(245, 176, 65, 0.12);
  border: 1px solid rgba(245, 176, 65, 0.2);
}

.bubble.ai .ai-line {
  display: block;
}

.bubble.ai .ai-line + .ai-line {
  margin-top: 0.55em;
}

.bubble.ai .ai-thought {
  color: rgba(217, 231, 245, 0.94);
  font-style: italic;
}

.bubble.ai .ai-thought.is-cyan-thought {
  color: #00ffff;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
}

.bubble.ai .ai-inline-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.bubble.ai .ai-inline-image-card {
  display: grid;
  gap: 7px;
}

.bubble.ai .ai-inline-image-card[data-kind="map"] {
  grid-column: 1 / -1;
  gap: 10px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(109, 239, 255, 0.18);
  background: linear-gradient(150deg, rgba(8, 18, 31, 0.94), rgba(10, 28, 44, 0.82));
}

.bubble.ai .ai-inline-image-link {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(109, 239, 255, 0.26);
  background: rgba(10, 20, 34, 0.58);
}

.bubble.ai .ai-inline-image-link:focus-visible {
  outline: 2px solid rgba(109, 239, 255, 0.9);
  outline-offset: 2px;
}

.bubble.ai .ai-inline-map-link {
  background: rgba(6, 14, 24, 0.88);
}

.bubble.ai .ai-inline-map-embed {
  display: block;
  aspect-ratio: 12 / 7;
  background: radial-gradient(circle at top, rgba(31, 63, 96, 0.28), rgba(7, 16, 28, 0.92));
}

.bubble.ai .ai-inline-map-embed svg {
  display: block;
  width: 100%;
  height: auto;
}

.bubble.ai .ai-inline-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.bubble.ai .ai-inline-image-card[data-kind="map"] .ai-inline-image {
  aspect-ratio: 12 / 7;
}

.bubble.ai .ai-inline-image-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bubble.ai .ai-inline-image-btn {
  appearance: none;
  border: 1px solid rgba(109, 239, 255, 0.34);
  background: rgba(9, 21, 38, 0.72);
  color: #d9f7ff;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.bubble.ai .ai-inline-image-btn:hover {
  border-color: rgba(109, 239, 255, 0.62);
}

.bubble.ai .ai-inline-image-btn:focus-visible {
  outline: 2px solid rgba(109, 239, 255, 0.92);
  outline-offset: 2px;
}

.bubble.ai .ai-inline-image-status {
  min-height: 1em;
  font-size: 11px;
  line-height: 1.35;
  color: rgba(183, 212, 236, 0.92);
}

.bubble.ai .ai-inline-image-status[data-kind="error"] {
  color: rgba(255, 168, 168, 0.95);
}

.bubble.ai .ai-message-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.bubble.ai .news-story-browser {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.bubble.ai .news-story-list {
  display: grid;
  gap: 10px;
}

.bubble.ai .news-story-card {
  appearance: none;
  width: 100%;
  display: grid;
  gap: 6px;
  padding: 12px 13px;
  border-radius: 16px;
  border: 1px solid rgba(109, 239, 255, 0.2);
  background: rgba(10, 20, 34, 0.62);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}

.bubble.ai .news-story-card:hover {
  border-color: rgba(109, 239, 255, 0.46);
  background: rgba(13, 26, 44, 0.78);
}

.bubble.ai .news-story-card:focus-visible {
  outline: 2px solid rgba(109, 239, 255, 0.92);
  outline-offset: 2px;
}

.bubble.ai .news-story-detail {
  display: grid;
  gap: 10px;
  padding: 12px 13px;
  border-radius: 16px;
  border: 1px solid rgba(109, 239, 255, 0.22);
  background: rgba(9, 21, 38, 0.82);
}

.bubble.ai .news-story-detail[hidden] {
  display: none;
}

.bubble.ai .news-story-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bubble.ai .news-story-scope {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(109, 239, 255, 0.12);
  color: #8defff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bubble.ai .news-story-title {
  color: #f6fbff;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
}

.bubble.ai .news-story-summary {
  color: rgba(220, 237, 248, 0.9);
  font-size: 13px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.bubble.ai .news-story-detail .news-story-summary {
  -webkit-line-clamp: unset;
  overflow: visible;
}

.bubble.ai .news-story-meta {
  color: rgba(164, 191, 215, 0.88);
  font-size: 11px;
  line-height: 1.35;
}

.bubble.ai .ai-message-action {
  appearance: none;
  border: 1px solid rgba(109, 239, 255, 0.34);
  background: rgba(9, 21, 38, 0.72);
  color: #d9f7ff;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.bubble.ai .ai-message-action:hover {
  border-color: rgba(109, 239, 255, 0.62);
}

.bubble.ai .ai-message-action:focus-visible {
  outline: 2px solid rgba(109, 239, 255, 0.92);
  outline-offset: 2px;
}

.persona-actions .btn[disabled] {
  opacity: 0.7;
  cursor: not-allowed;
}

.persona-card-lock-note {
  margin: 2px 0 0;
  color: rgba(141, 239, 255, 0.96);
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
  font-weight: 800;
}

.persona-voice-actions {
  display: grid;
  gap: 8px;
}

.persona-voice-sample-btn {
  width: fit-content;
}

.persona-voice-sample-status {
  margin: 0;
  color: rgba(186, 205, 224, 0.82);
  font-size: 13px;
  line-height: 1.45;
}

.bubble.typing {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.bubble.typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--stardust);
  opacity: 0.4;
  animation: typing 1.2s infinite;
}

.bubble.typing span:nth-child(2) { animation-delay: 0.2s; }
.bubble.typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-4px); opacity: 1; }
}

.input-row {
  display: flex;
  gap: 10px;
}

.input-row input,
.input-row textarea {
  flex: 1;
  background: rgba(30, 45, 61, 0.8);
  border: 1px solid rgba(93, 217, 193, 0.2);
  color: var(--stardust);
  padding: 12px;
  border-radius: 10px;
  font: inherit;
}

#chatInput {
  min-height: 60px;
  max-height: 360px;
  padding: 12px 14px;
  font-size: 1rem;
  line-height: 1.4;
  resize: none;
  overflow-y: auto;
}

.input-row button {
  background: var(--plasma-cyan);
  color: #06211b;
  border: none;
  border-radius: 10px;
  padding: 0 16px;
  font-weight: 700;
  cursor: pointer;
}

.chat-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 10px;
  align-items: stretch;
}

.chat-actions-right {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: 10px;
  margin-left: 0;
  min-width: 0;
}

.sandbox-card[data-translator-mode="on"] #chatShareBtn,
.sandbox-card[data-translator-mode="on"] #voiceBtn {
  display: none !important;
}

.sandbox-card[data-translator-mode="on"] .sandbox-header {
  justify-content: center;
}

.sandbox-card[data-translator-mode="on"] .persona-left {
  width: 100%;
  justify-content: center;
}

.sandbox-card[data-translator-mode="on"] .persona-header-copy {
  width: min(100%, 760px);
}

.sandbox-card[data-translator-mode="on"] #sandboxStoryline::before {
  content: "System lane";
}

.sandbox-card[data-translator-mode="on"] .chat-actions-right {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sandbox-card[data-translator-mode="on"] .chat-feedback-hint,
.sandbox-card[data-translator-mode="on"] .msg-feedback,
.sandbox-card[data-translator-mode="on"] #chatCrisisInline,
.sandbox-card[data-translator-mode="on"] #chatCrisisBanner {
  display: none !important;
}

.sandbox-card[data-translator-mode="on"] #micBtn {
  grid-column: 1;
  grid-row: 1;
}

.sandbox-card[data-translator-mode="on"] #chatSend {
  grid-column: 2;
  grid-row: 1;
}

#chatShareBtn {
  grid-column: 1;
  grid-row: 1;
}

#micBtn {
  grid-column: 2;
  grid-row: 1;
}

#chatSend {
  grid-column: 3;
  grid-row: 1;
}

#voiceBtn {
  grid-column: 1 / 3;
  grid-row: 2;
  background: rgba(93, 217, 193, 0.14);
  color: rgba(242, 242, 242, 0.92);
  border-style: dashed;
  font-size: 14px;
  letter-spacing: 0.01em;
}

#voiceBtn:focus-visible {
  outline: 2px solid rgba(93, 217, 193, 0.72);
  outline-offset: 3px;
}

#voiceBtn[data-state="on"] {
  background: rgba(245, 176, 65, 0.92);
  color: #07121f;
  border-color: rgba(245, 176, 65, 0.65);
}

#chatCrisisInline {
  grid-column: 3;
  grid-row: 2;
  justify-self: end;
  align-self: end;
}

.chat-crisis-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid rgba(255, 92, 92, 0.3);
  background: rgba(62, 10, 18, 0.18);
  color: rgba(255, 170, 170, 0.98);
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}

.chat-crisis-inline:hover,
.chat-crisis-inline:focus-visible {
  background: rgba(62, 10, 18, 0.28);
  border-color: rgba(255, 92, 92, 0.55);
  color: rgba(255, 200, 200, 0.98);
  outline: none;
}

.chat-actions > button {
  width: 100%;
}

.chat-actions button {
  -webkit-appearance: none;
  appearance: none;
  background: var(--plasma-cyan);
  color: #06211b;
  border: 1px solid rgba(93, 217, 193, 0.35);
  border-radius: 10px;
  padding: 12px 16px;
  font-weight: 700;
  font-family: inherit;
  font-size: 16px;
  line-height: 1;
  min-height: 44px;
  min-width: 84px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 16px 28px rgba(3, 10, 18, 0.2);
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, opacity 140ms ease, transform 140ms ease;
}

.chat-actions button:not(:disabled):hover {
  transform: translateY(-1px);
}

.chat-actions #clearChatBtn:not(:disabled) {
  background: linear-gradient(135deg, rgba(92, 23, 42, 0.96), rgba(63, 15, 32, 0.94));
  color: #fff0f4;
  border-color: rgba(255, 128, 159, 0.42);
}

.chat-actions #clearChatBtn:not(:disabled):hover {
  background: linear-gradient(135deg, rgba(108, 29, 48, 0.98), rgba(76, 18, 36, 0.96));
  border-color: rgba(255, 160, 184, 0.58);
  box-shadow: 0 18px 32px rgba(92, 23, 42, 0.34);
}

.chat-actions #chatShareBtn:not(:disabled),
.chat-actions #micBtn:not(:disabled) {
  color: #eefcff;
}

.chat-actions #chatShareBtn:not(:disabled) {
  background: linear-gradient(135deg, rgba(24, 44, 66, 0.96), rgba(15, 28, 46, 0.94));
  border-color: rgba(156, 214, 230, 0.36);
}

.chat-actions #chatShareBtn:not(:disabled):hover {
  background: linear-gradient(135deg, rgba(31, 56, 82, 0.98), rgba(20, 36, 57, 0.96));
  border-color: rgba(181, 233, 245, 0.56);
  box-shadow: 0 18px 34px rgba(12, 24, 39, 0.34);
}

.chat-actions #micBtn:not(:disabled) {
  background: linear-gradient(135deg, rgba(18, 68, 76, 0.96), rgba(13, 43, 56, 0.94));
  border-color: rgba(123, 227, 214, 0.38);
}

.chat-actions #micBtn:not(:disabled):hover {
  background: linear-gradient(135deg, rgba(25, 84, 95, 0.98), rgba(18, 56, 68, 0.96));
  border-color: rgba(151, 242, 229, 0.58);
  box-shadow: 0 18px 34px rgba(7, 45, 49, 0.34);
}

.chat-actions #chatSend:not(:disabled) {
  background: linear-gradient(135deg, rgba(93, 217, 193, 0.98), rgba(126, 236, 214, 0.96));
  background-color: rgb(108, 227, 204);
  color: #05261d;
  border-color: rgba(176, 255, 239, 0.58);
}

.chat-actions #chatSend:not(:disabled):hover {
  background: linear-gradient(135deg, rgba(118, 230, 209, 0.99), rgba(153, 243, 224, 0.97));
  background-color: rgb(135, 237, 217);
  border-color: rgba(197, 255, 242, 0.74);
  box-shadow: 0 18px 34px rgba(28, 140, 120, 0.3);
}

.chat-actions #voiceBtn:not(:disabled) {
  background: linear-gradient(135deg, rgba(45, 73, 78, 0.94), rgba(25, 44, 53, 0.94));
  color: #f7fff9;
  border-color: rgba(255, 192, 103, 0.42);
  border-style: solid;
}

.chat-actions #voiceBtn:not(:disabled):hover {
  background: linear-gradient(135deg, rgba(60, 91, 96, 0.96), rgba(33, 58, 67, 0.96));
  border-color: rgba(255, 211, 143, 0.6);
  box-shadow: 0 18px 34px rgba(17, 30, 39, 0.34);
}

.chat-actions button:not(:disabled):focus-visible {
  outline: 2px solid rgba(223, 254, 246, 0.9);
  outline-offset: 3px;
}

.chat-actions button:disabled {
  opacity: 1;
  background: rgba(109, 122, 144, 0.72);
  color: rgba(242, 242, 242, 0.62);
  border-color: rgba(181, 191, 204, 0.7);
  cursor: not-allowed;
}

.mic-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
}

.mic-btn.listening {
  background: var(--hyper-gold);
}

.vignettes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.vignette {
  padding: 14px;
  border-radius: 14px;
  background: rgba(20, 32, 52, 0.85);
  border: 1px solid rgba(184, 169, 217, 0.14);
  line-height: 1.5;
}

.timeline {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.milestone {
  flex: 1;
  min-width: 220px;
  padding: 14px;
  border-radius: 12px;
  background: rgba(93, 217, 193, 0.1);
  border: 1px solid rgba(93, 217, 193, 0.25);
}

.footer {
  margin-top: 0;
  padding: 6px 0 20px;
  color: var(--ghost);
  font-size: 14px;
}

.footer-note {
  margin: 14px 0 8px;
  color: rgba(196, 214, 232, 0.78);
  font-size: 13px;
  line-height: 1.5;
}

.site-footer {
  margin-top: 10px;
  padding-bottom: 18px;
}

.site-footer .trust-strip {
  margin-top: 8px;
}

.footer-sister-site {
  margin-top: 8px;
  color: var(--plasma-cyan);
  font-size: 13px;
  line-height: 1.6;
}

.footer-sister-site a {
  color: var(--hyper-gold);
  font-weight: 700;
  text-decoration: none;
}

.footer-sister-site a:hover {
  text-decoration: underline;
}

.footer-sister-site a:focus-visible {
  outline: 2px solid rgba(245, 176, 65, 0.7);
  outline-offset: 3px;
  border-radius: 6px;
  text-decoration: underline;
}

.trust-strip {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--trust-pill-border);
  background: var(--trust-pill-bg);
  color: var(--trust-pill-text);
  text-decoration: none;
}

.trust-pill:hover,
.trust-pill:focus-visible {
  border-color: var(--trust-pill-accent);
  box-shadow: 0 0 0 2px rgba(245, 176, 65, 0.25);
}

.trust-pill-logo {
  display: block;
  width: 88px;
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

.trust-pill-text {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
}

.trust-pill-label {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--trust-pill-text);
}

.trust-pill-copy {
  font-size: 11px;
  line-height: 1.2;
  color: var(--trust-pill-muted);
}

.trust-pill-rta {
  border-color: rgba(245, 176, 65, 0.4);
}

.trust-pill-rta .trust-pill-label {
  color: #ffd79d;
}

.trust-strip-note {
  width: 100%;
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--trust-pill-muted);
}

#notify .grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

#notify .form-card {
  padding: 12px;
  gap: 8px;
}

#notify .form-card .form-title {
  margin: 0 0 4px;
  font-size: clamp(18px, 2.1vw, 22px);
  min-height: 0;
}

#notify .form-card .form-fields {
  gap: 8px;
}

#notify .form-card input,
#notify .form-card textarea {
  padding: 10px;
}

#notify .form-card textarea {
  min-height: 88px;
}

#notify .form-lead {
  font-size: 13px;
  line-height: 1.4;
}

#notify .platform-prefs {
  gap: 6px 10px;
  padding: 8px 10px;
}

#notify .platform-prefs label {
  font-size: 12px;
}

#notify .platform-prefs-title {
  font-size: 11px;
}

.form-card-unified {
  max-width: min(760px, 100%);
  margin: 0 auto;
}

.form-kicker {
  align-self: center;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(240, 186, 87, 0.26);
  background: rgba(240, 186, 87, 0.1);
  color: rgba(255, 214, 141, 0.96);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.form-card-unified[data-inquiry-type="vote"] .form-kicker {
  border-color: rgba(93, 217, 193, 0.3);
  background: rgba(93, 217, 193, 0.12);
  color: rgba(184, 248, 241, 0.96);
}

.form-card-unified[data-inquiry-type="feature"] .form-kicker {
  border-color: rgba(255, 184, 122, 0.32);
  background: rgba(255, 184, 122, 0.12);
  color: rgba(255, 219, 180, 0.98);
}

.form-label {
  color: rgba(198, 248, 255, 0.92);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.inquiry-select-wrap {
  position: relative;
}

.inquiry-select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(93, 217, 193, 0.72);
  border-bottom: 2px solid rgba(93, 217, 193, 0.72);
  transform: translateY(-60%) rotate(45deg);
  pointer-events: none;
}

.form-card {
  background: rgba(12, 20, 34, 0.92);
  border: 1px solid rgba(93, 217, 193, 0.2);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  position: relative;
}

.form-card .form-title {
  margin: 0 0 6px;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 32px;
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-align: center;
  min-height: 2.3em;
}

.form-card .form-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
}

.form-lead {
  margin: 0;
  color: rgba(141, 239, 255, 0.96);
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
  font-weight: 800;
}

.platform-prefs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed rgba(93, 217, 193, 0.28);
  background: rgba(12, 22, 38, 0.42);
}

.platform-prefs-title {
  grid-column: 1 / -1;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(93, 217, 193, 0.92);
  text-align: center;
}

.platform-prefs label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ghost);
  font-size: 13px;
}

.platform-prefs-landscape label {
  min-height: 56px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(93, 217, 193, 0.16);
  background: rgba(14, 27, 45, 0.5);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
}

.platform-prefs input[type="checkbox"] {
  accent-color: var(--hyper-gold);
}

.form-card .form-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}

.form-card .btn {
  width: 100%;
}

.form-card input,
.form-card textarea {
  background: rgba(30, 45, 61, 0.8);
  border: 1px solid rgba(93, 217, 193, 0.2);
  color: var(--stardust);
  padding: 12px;
  border-radius: 10px;
  font: inherit;
}

.form-card textarea {
  min-height: 128px;
  resize: vertical;
}

.form-card select {
  width: 100%;
  appearance: none;
  background: rgba(30, 45, 61, 0.86);
  border: 1px solid rgba(93, 217, 193, 0.22);
  color: var(--stardust);
  padding: 12px 42px 12px 12px;
  border-radius: 10px;
  font: inherit;
}

.inquiry-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.inquiry-panel[hidden] {
  display: none !important;
}

.form-status {
  min-height: 20px;
  color: var(--plasma-cyan);
  font-size: 14px;
}

.card.crisis {
  border-color: rgba(255, 170, 170, 0.18);
  background: linear-gradient(180deg, rgba(37, 14, 21, 0.46), rgba(8, 18, 33, 0.98));
  position: relative;
  overflow: hidden;
}

.card.crisis::before {
  content: "";
  position: absolute;
  inset: -40% -35% auto auto;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(255, 170, 170, 0.08), transparent 70%);
  pointer-events: none;
}

.crisis-lede {
  margin: 0;
  line-height: 1.6;
}

.crisis-action-guide {
  margin-top: 12px;
  border: 1px solid rgba(93, 217, 193, 0.28);
  background: rgba(9, 30, 46, 0.82);
  border-radius: 14px;
  padding: 14px 16px;
}

.crisis-action-guide-title {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.05;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(118, 238, 222, 0.96);
  text-align: center;
}

.crisis-action-guide-list {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--stardust);
  display: grid;
  gap: 6px;
  line-height: 1.5;
}

.crisis-urgent {
  color: rgba(255, 198, 198, 0.9);
  font-weight: 800;
}

.crisis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.crisis-item {
  background: rgba(10, 16, 28, 0.72);
  border: 1px solid rgba(255, 178, 178, 0.12);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.crisis-title {
  font-weight: 850;
  letter-spacing: 0.02em;
  color: rgba(255, 210, 210, 0.9);
}

.crisis-desc {
  color: var(--ghost);
  line-height: 1.5;
}

.crisis-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.card.crisis .btn.secondary {
  border-color: rgba(255, 188, 188, 0.34);
}

.crisis-footnote {
  margin: 12px 0 0;
  color: var(--ghost);
  font-size: 14px;
  line-height: 1.5;
}

.crisis-monitor {
  border: 1px solid rgba(93, 217, 193, 0.28);
  background: linear-gradient(180deg, rgba(16, 54, 73, 0.68), rgba(8, 18, 33, 0.94));
}

.crisis-service-notice {
  border: 1px solid rgba(245, 176, 65, 0.6);
  background: linear-gradient(180deg, rgba(79, 49, 12, 0.58), rgba(45, 31, 10, 0.68));
  margin-top: 12px;
}

.crisis-service-notice-kicker {
  display: none;
}

.crisis-service-notice-title {
  margin: 0;
  font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.2;
  font-weight: 900;
  color: rgba(255, 223, 162, 0.98);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
}

.crisis-service-notice-text {
  margin: 10px 0 0;
  color: rgba(255, 236, 203, 0.98);
  line-height: 1.6;
  font-weight: 700;
  text-align: center;
}

.crisis-finalization {
  border: 1px solid rgba(93, 217, 193, 0.28);
  background: linear-gradient(180deg, rgba(8, 38, 48, 0.88), rgba(8, 18, 33, 0.96));
}

.crisis-finalization-head {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}

.crisis-finalization-kicker {
  margin: 0 0 4px;
  color: rgba(118, 238, 222, 0.96);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.crisis-finalization-title {
  margin: 0;
  font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.08;
  font-weight: 800;
  color: var(--stardust);
}

.crisis-finalization-status {
  margin: 0;
  max-width: 320px;
  color: rgba(215, 232, 246, 0.9);
  font-size: 13px;
  line-height: 1.5;
}

.crisis-finalization-copy {
  margin: 0;
  color: var(--ghost);
  line-height: 1.6;
}

.crisis-finalization-list,
.crisis-evidence-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
}

.crisis-finalization-list li,
.crisis-evidence-list li {
  line-height: 1.5;
}

.crisis-finalization-list strong {
  display: block;
  margin-bottom: 2px;
  color: rgba(255, 223, 162, 0.98);
}

.crisis-finalization-list span {
  display: block;
  color: var(--ghost);
}

.crisis-evidence {
  border: 1px solid rgba(93, 217, 193, 0.18);
  background: rgba(8, 16, 28, 0.68);
  border-radius: 14px;
  padding: 12px 14px;
}

.crisis-evidence-title {
  margin: 0 0 6px;
  color: rgba(118, 238, 222, 0.94);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.crisis-monitor-title {
  display: block;
  text-align: center;
  color: rgba(93, 217, 193, 0.98);
  font-weight: 900;
  letter-spacing: 0.08em;
  font-size: clamp(28px, 3.1vw, 44px);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.crisis-monitor-text {
  margin: 0;
  color: var(--stardust);
  line-height: 1.6;
}

.crisis-config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.crisis-panel {
  border: 1px solid rgba(93, 217, 193, 0.26);
  background: rgba(10, 22, 36, 0.78);
  display: grid;
  gap: 12px;
}

.crisis-panel-title {
  margin: 0;
  text-align: center;
  font-size: clamp(32px, 3.2vw, 48px);
  font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  color: var(--stardust);
  font-weight: 800;
}

.crisis-panel-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.crisis-panel-row .crisis-panel-title {
  width: 100%;
  text-align: center;
}

.crisis-small-btn {
  min-height: 36px;
  padding: 8px 12px;
  font-size: 13px;
}

.crisis-toggle-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}

.crisis-toggle-title {
  font-weight: 700;
  color: var(--stardust);
}

.crisis-toggle-copy {
  color: var(--ghost);
  line-height: 1.5;
}

.crisis-warning {
  margin: 0 auto;
  width: min(100%, 620px);
  border: 1px solid rgba(245, 176, 65, 0.45);
  background: rgba(245, 176, 65, 0.14);
  color: var(--plasma-cyan);
  font-weight: 700;
  text-align: center;
  border-radius: 12px;
  padding: 16px 18px;
  line-height: 1.35;
}

.crisis-warning-lead {
  display: block;
  max-width: none;
  margin: 0 auto;
  font-size: clamp(20px, 1.9vw, 28px);
}

.crisis-warning-break {
  display: block;
  margin-top: 4px;
  font-size: clamp(28px, 2.7vw, 42px);
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
}

#crisis-support .section-head {
  align-items: center;
  justify-content: center;
  text-align: center;
}

#crisis-support .section-head h2 {
  font-size: clamp(44px, 5vw, 72px);
  letter-spacing: 0.01em;
  font-weight: 900;
}

.crisis-switch {
  position: relative;
  width: 64px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.crisis-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.crisis-switch-track {
  position: relative;
  display: block;
  width: 64px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(228, 237, 246, 0.45);
  background: rgba(10, 22, 36, 0.9);
  transition: border-color 160ms ease, background 160ms ease;
}

.crisis-switch-track::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(228, 237, 246, 0.92);
  transition: transform 160ms ease, background 160ms ease;
}

.crisis-switch input:checked + .crisis-switch-track {
  border-color: rgba(93, 217, 193, 0.68);
  background: rgba(14, 90, 90, 0.92);
}

.crisis-switch input:checked + .crisis-switch-track::after {
  transform: translateX(28px);
  background: rgba(93, 217, 193, 0.98);
}

.crisis-switch input:focus-visible + .crisis-switch-track {
  outline: 2px solid rgba(93, 217, 193, 0.72);
  outline-offset: 3px;
}

.crisis-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.crisis-contact-form {
  display: grid;
  gap: 8px;
}

.crisis-consent-note {
  margin-bottom: 4px;
}

.crisis-contact-form label {
  font-size: 13px;
  color: rgba(228, 237, 246, 0.9);
}

.crisis-contact-form input {
  background: rgba(8, 16, 28, 0.82);
  border: 1px solid rgba(93, 217, 193, 0.32);
  color: var(--stardust);
  border-radius: 10px;
  padding: 11px 12px;
  font: inherit;
}

.crisis-consent-check {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(93, 217, 193, 0.24);
  background: rgba(8, 16, 28, 0.68);
}

.crisis-consent-check input {
  margin: 2px 0 0;
  width: 16px;
  height: 16px;
  accent-color: var(--plasma-cyan);
}

.crisis-consent-check span {
  display: block;
  font-size: 13px;
  line-height: 1.55;
}

.crisis-contact-list {
  display: grid;
  gap: 8px;
}

.crisis-contact-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  border: 1px solid rgba(93, 217, 193, 0.2);
  background: rgba(8, 16, 28, 0.72);
  border-radius: 12px;
  padding: 10px 12px;
}

.crisis-contact-meta {
  color: var(--stardust);
  font-size: 14px;
  line-height: 1.4;
}

.crisis-contact-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.crisis-contact-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.crisis-contact-badge.ready {
  background: rgba(93, 217, 193, 0.16);
  border: 1px solid rgba(93, 217, 193, 0.34);
  color: var(--plasma-cyan);
}

.crisis-contact-badge.missing {
  background: rgba(255, 170, 130, 0.14);
  border: 1px solid rgba(255, 170, 130, 0.28);
  color: #ffcfb1;
}

.consent-proof-page .legal-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 20px;
  line-height: 1.7;
}

.consent-proof-image {
  width: min(100%, 1080px);
  display: block;
  border-radius: 18px;
  border: 1px solid rgba(93, 217, 193, 0.22);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.26);
  background: rgba(8, 16, 28, 0.72);
}

.crisis-group-head {
  margin: 18px 0 6px;
  color: rgba(255, 204, 204, 0.84);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-size: 13px;
}

.crisis-help-bar {
  margin-top: 14px;
  position: sticky;
  bottom: 8px;
  z-index: 4;
  border: 1px solid rgba(255, 186, 186, 0.22);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(58, 23, 32, 0.66), rgba(30, 13, 21, 0.9));
  padding: 14px;
}

.crisis-help-note {
  margin: 0;
  color: rgba(255, 232, 232, 0.9);
  text-align: center;
  line-height: 1.45;
}

.crisis-help-bar .btn.danger {
  background: rgba(255, 170, 170, 0.88);
  border-color: rgba(255, 170, 170, 0.5);
  color: #24070b;
}

.crisis-help-bar .btn.danger:hover {
  box-shadow: 0 10px 30px rgba(255, 170, 170, 0.15);
}

.crisis-help-actions {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.crisis-help-status {
  min-height: 18px;
  margin: 10px 0 0;
  text-align: center;
  color: var(--ghost);
  font-size: 13px;
}

.crisis-device-note {
  margin: 10px 0 0;
  color: rgba(215, 232, 246, 0.92);
  text-align: center;
  font-size: 13px;
  line-height: 1.45;
}

.crisis-device-note code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: rgba(165, 236, 223, 0.96);
}

.crisis-dispatch-fallback {
  margin-top: 10px;
  border: 1px solid rgba(255, 170, 120, 0.36);
  background: rgba(16, 26, 43, 0.85);
  border-radius: 14px;
  padding: 12px;
  display: grid;
  gap: 10px;
}

.crisis-dispatch-title {
  margin: 0;
  color: rgba(255, 226, 188, 0.96);
  font-weight: 700;
  line-height: 1.4;
}

.crisis-dispatch-message {
  margin: 0;
  color: var(--ghost);
  font-size: 13px;
  line-height: 1.5;
}

.crisis-dispatch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hp-field {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}

.hp-field[hidden] {
  display: none !important;
}

.sandbox-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}

.sandbox-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  --chat-persona-image: none;
  --chat-portrait-position: center 8%;
}

.sandbox-card > * {
  position: relative;
  z-index: 1;
}

.sandbox-card[data-chat-display-mode="full"]::before {
  display: none;
}

.sandbox-card[data-chat-display-mode="full"]::after {
  display: none;
}

.sandbox-card[data-chat-display-mode="side"]::before {
  display: none;
}

.sandbox-card[data-chat-display-mode="side"]::after {
  display: none;
}

.persona-left {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.persona-header-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
  justify-items: center;
  text-align: center;
}

#sandboxName {
  font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  font-size: clamp(24px, 3.1vw, 42px);
  line-height: 0.95;
  letter-spacing: 0.04em;
}

#sandboxTone {
  color: var(--plasma-cyan);
  font-size: clamp(18px, 1.95vw, 34px);
  line-height: 1.24;
  max-width: min(980px, 78vw);
  text-align: center;
}

#sandboxStoryline {
  position: relative;
  color: rgba(226, 247, 244, 0.98);
  font-size: clamp(15px, 1.38vw, 21px);
  line-height: 1.48;
  max-width: min(940px, 80vw) !important;
  text-align: center;
  margin-top: 8px;
  padding: 14px 18px 15px;
  border-radius: 20px;
  border: 1px solid rgba(93, 217, 193, 0.24);
  background:
    linear-gradient(140deg, rgba(6, 22, 36, 0.9), rgba(10, 31, 49, 0.82)),
    radial-gradient(circle at top, rgba(245, 176, 65, 0.18), transparent 62%);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
}

#sandboxStoryline::before {
  content: "Thread";
  display: block;
  margin-bottom: 7px;
  color: rgba(245, 176, 65, 0.92);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

#sandboxStoryline[data-relationship-stage="close"] {
  border-color: rgba(245, 176, 65, 0.34);
  box-shadow:
    0 20px 46px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 1px rgba(245, 176, 65, 0.08);
}

#sandboxStoryline[data-relationship-stage="familiar"] {
  border-color: rgba(121, 229, 209, 0.32);
}

#sandboxStoryline[data-relationship-stage="new"],
#sandboxStoryline[data-relationship-persistent="false"] {
  color: rgba(213, 237, 233, 0.96);
  border-color: rgba(93, 217, 193, 0.2);
}

.persona-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.persona-editor-section {
  margin-top: 10px;
  border-radius: 14px;
  border: 1px solid rgba(93, 217, 193, 0.22);
  background: linear-gradient(165deg, rgba(10, 24, 40, 0.74), rgba(7, 18, 33, 0.88));
  padding: 14px;
  display: grid;
  gap: 10px;
}

.persona-editor-toggle {
  width: 100%;
  min-height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(93, 217, 193, 0.34);
  background: rgba(8, 20, 34, 0.72);
  color: var(--stardust);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  text-align: left;
}

.persona-editor-toggle::after {
  content: "▾";
  font-size: 13px;
  opacity: 0.92;
  flex: 0 0 auto;
}

.persona-editor-toggle[data-state="open"]::after {
  content: "▴";
}

.persona-editor-toggle:focus-visible {
  outline: 2px solid rgba(93, 217, 193, 0.75);
  outline-offset: 3px;
}

.persona-editor-toggle-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.persona-editor-title-only {
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(154, 216, 255, 0.92);
}

.persona-editor-summary {
  font-size: 12px;
  line-height: 1.4;
  color: rgba(214, 226, 240, 0.82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.persona-editor-panel-body {
  display: grid;
  gap: 12px;
}

.chat-display-toolbar {
  display: grid;
  gap: 8px;
}

.chat-display-toolbar-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
  color: rgba(154, 216, 255, 0.92);
}

.chat-display-toolbar-body {
  display: grid;
  gap: 10px;
}

.chat-display-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chat-display-toggle button {
  min-height: 38px;
  border-radius: 999px;
  border: 1px solid var(--chat-display-pill-border);
  background: var(--chat-display-pill-bg);
  color: var(--stardust);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 7px 14px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.chat-display-toggle button:hover {
  border-color: rgba(93, 217, 193, 0.62);
  background: rgba(20, 40, 63, 0.92);
}

.chat-display-toggle button:focus-visible {
  outline: none;
  border-color: rgba(93, 217, 193, 0.78);
  box-shadow: 0 0 0 2px rgba(93, 217, 193, 0.24);
}

.chat-display-toggle button.is-active {
  border-color: var(--chat-display-pill-active-border);
  background: var(--chat-display-pill-active-bg);
  color: #dbfff9;
}

.chat-visual-stage {
  margin-top: 4px;
  border-radius: 16px;
  border: 1px solid rgba(93, 217, 193, 0.24);
  background: var(--chat-display-stage-bg);
  min-height: 230px;
  max-height: 360px;
  overflow: hidden;
  display: none;
  align-items: center;
  justify-content: center;
}

.chat-visual-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--chat-portrait-position);
  display: block;
}

.chat-visual-portrait-pair {
  display: none;
  width: 100%;
  height: 100%;
}

.chat-visual-orb {
  width: var(--chat-visual-orb-size);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  position: relative;
  border: none;
  background: #0b1422;
  box-shadow: 0 0 24px rgba(93, 217, 193, 0.26);
  overflow: hidden;
  cursor: pointer;
  padding: 3px;
}

.chat-visual-orb::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(#00d4ff 0%, #00ff88 25%, #ffd700 50%, #ff1493 75%, #00d4ff 100%);
  animation: persona-orb-spin 4s linear infinite;
  filter: saturate(1.2);
  opacity: 0.98;
  z-index: 0;
}

.chat-visual-orb::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  pointer-events: none;
  z-index: 2;
}

.chat-visual-orb img {
  position: relative;
  z-index: 1;
  border-radius: 50%;
  object-position: var(--chat-portrait-position);
}

.chat-visual-orb:focus-visible {
  outline: 2px solid rgba(93, 217, 193, 0.82);
  outline-offset: 4px;
}

.sandbox-card[data-chat-display-mode="orb"] .chat-visual-stage {
  display: flex;
  min-height: 200px;
}

.sandbox-card[data-chat-display-mode="orb"] .chat-visual-portrait-pair {
  display: none;
}

.sandbox-card[data-chat-display-mode="portrait"] .chat-visual-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 310px;
  max-height: 560px;
  padding: 10px;
  background: linear-gradient(180deg, rgba(10, 20, 36, 0.88) 0%, rgba(6, 14, 28, 0.96) 100%);
}

.sandbox-card[data-chat-display-mode="portrait"] #chatVisualOrb {
  display: none;
}

.sandbox-card[data-chat-display-mode="portrait"] .chat-visual-portrait-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 12px;
  width: min(100%, 940px);
  height: 100%;
}

.sandbox-card[data-chat-display-mode="portrait"] #chatVisualPortrait,
.sandbox-card[data-chat-display-mode="portrait"] #chatVisualPortraitSecondary {
  width: 100%;
  max-height: calc(100% - 6px);
  object-fit: contain;
  object-position: var(--chat-portrait-position);
  transform: scale(0.95);
  transform-origin: center center;
  background: rgba(5, 13, 26, 0.45);
  border-radius: 12px;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.32));
}

.sandbox-card[data-chat-display-mode="chat"] .chat-visual-stage,
.sandbox-card[data-chat-display-mode="full"] .chat-visual-stage,
.sandbox-card[data-chat-display-mode="side"] .chat-visual-stage {
  display: none;
}

.sandbox-card[data-chat-display-mode="orb"] .persona-orb-wrap,
.sandbox-card[data-chat-display-mode="portrait"] .persona-orb-wrap,
.sandbox-card[data-chat-display-mode="full"] .persona-orb-wrap,
.sandbox-card[data-chat-display-mode="side"] .persona-orb-wrap {
  display: flex;
}

.sandbox-card[data-chat-display-mode="full"] .chat-box,
.sandbox-card[data-chat-display-mode="full"] .chat-access,
.sandbox-card[data-chat-display-mode="full"] .chat-generalist-panel,
.sandbox-card[data-chat-display-mode="full"] .chat-ai-disclosure,
.sandbox-card[data-chat-display-mode="full"] .chat-legal-gate,
.sandbox-card[data-chat-display-mode="full"] .chat-crisis-banner {
  background: rgba(7, 20, 37, 0.62);
  border-color: rgba(93, 217, 193, 0.3);
  backdrop-filter: blur(2px);
}

.sandbox-card[data-chat-display-mode="full"] .chat-box {
  position: relative;
  height: var(--chat-box-height-desktop);
  min-height: var(--chat-box-height-desktop);
  max-height: var(--chat-box-height-desktop);
  background: rgba(6, 17, 31, 0.52);
  border-color: rgba(93, 217, 193, 0.32);
  backdrop-filter: blur(2px);
}

.sandbox-card[data-chat-display-mode="full"] .chat-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: var(--chat-persona-image);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  background-color: rgba(4, 10, 20, 0.88);
  opacity: 0.38;
  z-index: 0;
  pointer-events: none;
}

.sandbox-card[data-chat-display-mode="full"] .chat-box::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(4, 11, 22, 0.08) 0%, rgba(4, 12, 25, 0.52) 42%, rgba(3, 10, 20, 0.9) 100%);
  z-index: 0;
  pointer-events: none;
}

.sandbox-card[data-chat-display-mode="full"] .chat-box > * {
  position: relative;
  z-index: 1;
}

.sandbox-card[data-chat-display-mode="full"] .bubble.ai {
  background: rgba(245, 176, 65, 0.28);
  border-color: rgba(245, 176, 65, 0.44);
}

.sandbox-card[data-chat-display-mode="full"] .bubble.user {
  background: rgba(93, 217, 193, 0.32);
}

.sandbox-card[data-chat-display-mode="full"] .chat-log {
  padding-right: 2px;
}

.sandbox-card[data-chat-display-mode="side"] .chat-box,
.sandbox-card[data-chat-display-mode="side"] .chat-access,
.sandbox-card[data-chat-display-mode="side"] .chat-generalist-panel,
.sandbox-card[data-chat-display-mode="side"] .chat-ai-disclosure,
.sandbox-card[data-chat-display-mode="side"] .chat-legal-gate,
.sandbox-card[data-chat-display-mode="side"] .chat-crisis-banner {
  background: rgba(7, 20, 37, 0.7);
  border-color: rgba(93, 217, 193, 0.28);
  backdrop-filter: blur(2px);
}

.sandbox-card[data-chat-display-mode="side"] .chat-box {
  position: relative;
  height: var(--chat-box-height-desktop);
  min-height: var(--chat-box-height-desktop);
  max-height: var(--chat-box-height-desktop);
  padding-right: calc(var(--chat-side-visual-width-desktop) + 20px);
}

.sandbox-card[data-chat-display-mode="side"] .chat-box::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: var(--chat-side-visual-width-desktop);
  height: auto;
  border-radius: 0 16px 16px 0;
  background: linear-gradient(180deg, rgba(5, 13, 24, 0.28) 0%, rgba(5, 13, 24, 0.82) 100%);
  z-index: 0;
}

.sandbox-card[data-chat-display-mode="side"] .chat-box::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: var(--chat-side-visual-width-desktop);
  height: auto;
  border-radius: 0 16px 16px 0;
  background-image: var(--chat-persona-image);
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: rgba(5, 12, 22, 0.88);
  border: 1px solid rgba(93, 217, 193, 0.24);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
  z-index: 0;
}

.sandbox-card[data-chat-display-mode="side"] .chat-box > * {
  position: relative;
  z-index: 1;
}

.persona-controls select {
  min-height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(93, 217, 193, 0.34);
  background-color: rgba(10, 22, 36, 0.9);
  color: var(--stardust);
  font: inherit;
  font-weight: 600;
  padding: 8px 34px 8px 12px;
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--plasma-cyan) 50%),
    linear-gradient(135deg, var(--plasma-cyan) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.persona-controls select:focus-visible {
  outline: none;
  border-color: rgba(93, 217, 193, 0.64);
}

.persona-controls select option {
  color: var(--stardust);
  background: #0b1628;
}

.persona-living-link {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  font-weight: 700;
  white-space: nowrap;
}

.persona-tuning-toggle {
  min-height: 42px;
  white-space: nowrap;
  position: relative;
  padding-right: 32px;
}

.persona-tuning-toggle::after {
  content: "▾";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-52%);
  font-size: 13px;
  opacity: 0.92;
}

.persona-tuning-toggle[data-state="open"]::after {
  content: "▴";
}

.avatar-variant-panel {
  margin-top: 10px;
  border-radius: 14px;
  border: 1px solid rgba(93, 217, 193, 0.22);
  background: linear-gradient(165deg, rgba(10, 24, 40, 0.74), rgba(7, 18, 33, 0.88));
  padding: 14px;
  display: grid;
  gap: 10px;
}

.avatar-variant-panel-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.avatar-variant-toggle {
  align-items: flex-start;
}

.avatar-variant-panel-body {
  display: grid;
  gap: 10px;
}

.avatar-variant-title {
  margin: 0;
  font-size: 16px;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
}

.avatar-variant-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  border-radius: 999px;
  padding: 0 8px;
  border: 1px solid rgba(93, 217, 193, 0.35);
  color: var(--plasma-cyan);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.avatar-variant-note {
  margin: 0;
  color: rgba(214, 226, 240, 0.84);
  font-size: 13px;
}

.avatar-variant-mode-group {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.avatar-variant-mode-group button {
  border: 1px solid rgba(184, 169, 217, 0.34);
  background: rgba(9, 21, 36, 0.72);
  color: rgba(228, 237, 246, 0.92);
  border-radius: 12px;
  min-height: 48px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.avatar-variant-mode-group button.is-active {
  border-color: rgba(184, 169, 217, 0.78);
  background: linear-gradient(165deg, rgba(184, 169, 217, 0.28), rgba(130, 115, 198, 0.26));
  color: #efe8ff;
}

.avatar-variant-mode-group button:focus-visible {
  outline: 2px solid rgba(93, 217, 193, 0.75);
  outline-offset: 3px;
}

.avatar-variant-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: 10px;
}

.avatar-variant-card {
  border-radius: 12px;
  border: 1px solid rgba(184, 169, 217, 0.24);
  background: rgba(12, 24, 40, 0.72);
  padding: 8px;
  display: grid;
  gap: 8px;
  justify-items: center;
  cursor: pointer;
  min-width: 0;
  overflow: hidden;
}

.avatar-variant-card.is-active {
  border-color: rgba(93, 217, 193, 0.85);
  box-shadow: 0 0 0 1px rgba(93, 217, 193, 0.2);
}

.avatar-variant-card img {
  width: min(88px, 100%);
  height: auto;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  object-fit: cover;
  object-position: center 18%;
  border: 1px solid rgba(184, 169, 217, 0.32);
}

.avatar-variant-card-label {
  display: block;
  width: 100%;
  text-align: center;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(12px, 1.8vw, 13px);
  color: rgba(228, 237, 246, 0.92);
}

body.view-mobile .avatar-variant-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

body.view-mobile .avatar-variant-card {
  border-radius: 18px;
  border-color: rgba(116, 131, 193, 0.62);
  background: linear-gradient(180deg, rgba(4, 20, 44, 0.98), rgba(4, 18, 38, 0.96));
  padding: 10px;
  gap: 10px;
  min-height: 190px;
  align-content: start;
}

body.view-mobile .avatar-variant-card img {
  width: 100%;
  max-width: none;
  border-radius: 16px;
  border-color: rgba(126, 156, 214, 0.72);
}

body.view-mobile .avatar-variant-card-label {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
  color: rgba(228, 237, 246, 0.96);
}

body.view-mobile .avatar-variant-card.is-active {
  border-color: rgba(93, 217, 193, 0.95);
  box-shadow: 0 0 0 2px rgba(93, 217, 193, 0.26);
}

body.view-mobile .avatar-variant-cards .avatar-variant-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.avatar-variant-status {
  margin: 0;
  color: rgba(214, 226, 240, 0.84);
  font-size: 12px;
  line-height: 1.4;
}

.avatar-variant-actions {
  display: flex;
  justify-content: flex-end;
}

#avatarVariantSaveBtn {
  min-height: 38px;
  padding: 8px 12px;
  font-size: 13px;
  white-space: nowrap;
  flex: 0 0 auto;
}

.memory-reel-panel {
  margin-top: 10px;
  border-radius: 14px;
  border: 1px solid rgba(93, 217, 193, 0.22);
  background: linear-gradient(165deg, rgba(10, 24, 40, 0.74), rgba(7, 18, 33, 0.88));
  padding: 14px;
  display: grid;
  gap: 10px;
}

.memory-reel-panel-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.memory-reel-toggle:hover {
  border-color: rgba(93, 217, 193, 0.68);
  background: linear-gradient(145deg, rgba(10, 24, 40, 0.95), rgba(14, 38, 60, 0.92));
}

.memory-reel-title {
  margin: 0;
  font-size: 16px;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
}

.memory-reel-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  border-radius: 999px;
  padding: 0 8px;
  border: 1px solid rgba(93, 217, 193, 0.52);
  color: #9ef5e3;
  background: rgba(7, 20, 35, 0.86);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.memory-reel-panel-body {
  display: grid;
  gap: 10px;
}

.memory-reel-note {
  margin: 0;
  color: rgba(214, 226, 240, 0.84);
  font-size: 13px;
}

.memory-reel-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.memory-reel-slot-field {
  display: grid;
  gap: 6px;
}

.memory-reel-slot-field span {
  color: rgba(154, 216, 255, 0.92);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.memory-reel-slot-field select {
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(93, 217, 193, 0.22);
  background: rgba(30, 45, 61, 0.82);
  color: var(--stardust);
  padding: 10px 12px;
  font: inherit;
}

.memory-reel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: 10px;
}

.memory-reel-card {
  border-radius: 12px;
  border: 1px solid rgba(184, 169, 217, 0.24);
  background: rgba(12, 24, 40, 0.72);
  padding: 8px;
  display: grid;
  gap: 8px;
  justify-items: center;
  cursor: pointer;
  min-width: 0;
  overflow: hidden;
}

.memory-reel-card.is-selected {
  border-color: rgba(93, 217, 193, 0.85);
  box-shadow: 0 0 0 1px rgba(93, 217, 193, 0.2);
}

.memory-reel-card:focus-visible {
  outline: 2px solid rgba(93, 217, 193, 0.76);
  outline-offset: 2px;
}

.memory-reel-card img {
  width: min(88px, 100%);
  height: auto;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  object-fit: cover;
  object-position: center 18%;
  border: 1px solid rgba(184, 169, 217, 0.32);
}

.memory-reel-card-source {
  display: block;
  width: 100%;
  text-align: center;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(12px, 1.8vw, 13px);
  color: rgba(228, 237, 246, 0.92);
}

.memory-reel-status {
  margin: 0;
  color: rgba(214, 226, 240, 0.84);
  font-size: 12px;
  line-height: 1.4;
}

.memory-reel-page-shell {
  display: grid;
  gap: 18px;
  padding-bottom: 48px;
}

.memory-reel-page-hero {
  display: grid;
  gap: 18px;
  justify-items: center;
  text-align: center;
  border-color: rgba(93, 217, 193, 0.22);
  background:
    radial-gradient(circle at top center, rgba(93, 217, 193, 0.12), transparent 36%),
    linear-gradient(160deg, rgba(11, 24, 39, 0.97), rgba(8, 20, 35, 0.96));
}

.memory-reel-page-title {
  margin: 0;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.02;
  text-align: center;
}

.memory-reel-page-intro {
  margin: 8px auto 0;
  max-width: 70ch;
  color: var(--plasma-cyan);
  line-height: 1.65;
  text-align: center;
}

.memory-reel-page-hero .cta-row {
  justify-content: center;
}

.memory-reel-page-summary {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.memory-reel-page-summary-card {
  display: grid;
  gap: 6px;
  align-content: center;
  justify-items: center;
  min-height: 112px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(93, 217, 193, 0.18);
  background: rgba(8, 20, 34, 0.6);
}

.memory-reel-page-summary-value {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1;
  color: #f2fbff;
}

.memory-reel-page-summary-label {
  color: rgba(214, 226, 240, 0.84);
  font-size: 13px;
  text-align: center;
}

.memory-reel-page-library {
  display: grid;
  gap: 18px;
}

.memory-reel-page-library-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  text-align: center;
}

.memory-reel-page-library-note,
.memory-reel-page-status {
  margin: 0;
  color: var(--plasma-cyan);
  line-height: 1.5;
}

.memory-reel-page-status {
  text-align: center;
}

.memory-reel-page-empty {
  display: grid;
  gap: 12px;
  justify-items: center;
  padding: 24px;
  text-align: center;
  border: 1px solid rgba(93, 217, 193, 0.24);
  background:
    radial-gradient(circle at top center, rgba(93, 217, 193, 0.12), transparent 34%),
    linear-gradient(160deg, rgba(9, 22, 37, 0.92), rgba(8, 18, 32, 0.96));
}

.memory-reel-page-empty strong {
  font-size: clamp(22px, 2.8vw, 30px);
  line-height: 1.15;
}

.memory-reel-page-empty span {
  max-width: 54ch;
  color: var(--plasma-cyan);
  line-height: 1.6;
}

.memory-reel-page-empty .cta-row {
  justify-content: center;
}

.memory-reel-page-groups {
  display: grid;
  gap: 18px;
}

.memory-reel-page-group {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(93, 217, 193, 0.2);
  background: linear-gradient(165deg, rgba(10, 24, 40, 0.74), rgba(7, 18, 33, 0.88));
}

.memory-reel-page-group-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  text-align: center;
}

.memory-reel-page-group-title {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 40px);
  line-height: 1.1;
}

.memory-reel-page-group-note {
  margin: 8px 0 0;
  color: rgba(214, 226, 240, 0.84);
  font-size: 14px;
  text-align: center;
}

.memory-reel-page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 12px;
  align-items: start;
}

.memory-reel-page-card {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.memory-reel-page-card-link {
  display: block;
  width: 100%;
}

.memory-reel-page-card-link img {
  display: block;
  width: 100%;
  max-width: 128px;
  margin: 0 auto;
  aspect-ratio: 3 / 4;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
  object-position: center 18%;
  border: 1px solid rgba(184, 169, 217, 0.32);
  background: rgba(6, 16, 28, 0.88);
}

.memory-reel-page-card-body {
  display: grid;
  gap: 8px;
}

.memory-reel-page-card-meta {
  font-size: 12px;
  line-height: 1.4;
  color: rgba(214, 226, 240, 0.78);
  text-align: center;
}

.memory-reel-card-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.memory-reel-card-tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(93, 217, 193, 0.34);
  background: rgba(8, 26, 42, 0.8);
  color: rgba(154, 216, 255, 0.94);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.memory-reel-slot-field--page {
  width: 100%;
  gap: 6px;
}

.memory-reel-slot-field--page span {
  text-align: center;
}

.memory-reel-slot-field--page select {
  width: 100%;
}

.memory-reel-page-card-actions {
  display: grid;
  gap: 8px;
  justify-items: stretch;
}

.memory-reel-card-delete {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 170, 170, 0.4);
  background: rgba(52, 16, 19, 0.76);
  color: rgba(255, 229, 229, 0.96);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.memory-reel-card-delete:hover:not(:disabled) {
  border-color: rgba(255, 188, 188, 0.58);
  background: rgba(74, 22, 27, 0.84);
}

.memory-reel-card-delete:disabled {
  opacity: 0.62;
  cursor: wait;
}

.memory-reel-assign-btn,
.memory-reel-page-card-actions .btn,
.memory-reel-page-card-actions .memory-reel-card-delete {
  width: 100%;
}

.settings-hero .btn.secondary,
.settings-shell .btn.secondary,
.settings-room-actions .btn.secondary,
.settings-provider-card .btn,
.settings-persona-toolbar .btn.secondary,
.persona-tuning-panel .persona-tuning-action-buttons .btn.secondary,
.memory-reel-page-shell .btn.secondary,
.memory-reel-page-empty .btn.secondary,
.cookie-consent-actions .btn.secondary {
  background: linear-gradient(135deg, rgba(245, 176, 65, 0.98), rgba(255, 209, 127, 0.96));
  border-color: rgba(255, 225, 167, 0.52);
  box-shadow: 0 16px 30px rgba(245, 176, 65, 0.24);
  color: #09111b;
}

.settings-hero .btn.secondary:hover,
.settings-shell .btn.secondary:hover,
.settings-room-actions .btn.secondary:hover,
.settings-provider-card .btn:hover,
.settings-persona-toolbar .btn.secondary:hover,
.persona-tuning-panel .persona-tuning-action-buttons .btn.secondary:hover,
.memory-reel-page-shell .btn.secondary:hover,
.memory-reel-page-empty .btn.secondary:hover,
.cookie-consent-actions .btn.secondary:hover,
.settings-hero .btn.secondary:focus-visible,
.settings-shell .btn.secondary:focus-visible,
.settings-room-actions .btn.secondary:focus-visible,
.settings-provider-card .btn:focus-visible,
.settings-persona-toolbar .btn.secondary:focus-visible,
.persona-tuning-panel .persona-tuning-action-buttons .btn.secondary:focus-visible,
.memory-reel-page-shell .btn.secondary:focus-visible,
.memory-reel-page-empty .btn.secondary:focus-visible,
.cookie-consent-actions .btn.secondary:focus-visible {
  background: linear-gradient(135deg, rgba(248, 185, 87, 0.99), rgba(255, 219, 150, 0.98));
  border-color: rgba(255, 236, 192, 0.66);
  color: #07111b;
}

.persona-tuning-panel {
  margin-top: 10px;
  border-radius: 14px;
  border: 1px solid var(--tuning-panel-border);
  background: var(--tuning-panel-bg);
  padding: 14px;
  display: grid;
  gap: 12px;
}

.persona-tuning-head {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  text-align: center;
}

.persona-tuning-head > div {
  display: grid;
  gap: 6px;
  justify-items: center;
  margin: 0 auto;
  max-width: 78ch;
}

.persona-tuning-title {
  margin: 0;
  font-size: 16px;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
}

.persona-tuning-note {
  margin: 4px 0 0;
  color: rgba(214, 226, 240, 0.8);
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}

.persona-settings-section,
.persona-slider-section,
.persona-defaults-section,
.persona-voice-section {
  margin-top: 0;
}

.persona-interest-section,
.persona-suggestion-section {
  border: 1px solid rgba(93, 217, 193, 0.2);
  border-radius: 12px;
  background: rgba(9, 21, 35, 0.52);
  padding: 10px;
  display: grid;
  gap: 8px;
}

.persona-subsection-title {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(154, 216, 255, 0.92);
}

.persona-subsection-note {
  margin: 0;
  font-size: 12px;
  color: rgba(214, 226, 240, 0.78);
  line-height: 1.4;
  text-align: center;
}

.persona-priority-section {
  justify-items: center;
  text-align: center;
  padding: 14px 16px;
  border-color: rgba(93, 217, 193, 0.32);
  background: linear-gradient(165deg, rgba(10, 24, 40, 0.78), rgba(7, 18, 33, 0.92));
}

.persona-priority-section .persona-subsection-note {
  max-width: 72ch;
  color: var(--plasma-cyan);
}

.persona-priority-section .persona-chip-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  justify-content: center;
  width: 100%;
}

.persona-priority-section .persona-chip-status {
  text-align: center;
}

.persona-tuning-panel[data-preview-mode="true"] .persona-interest-section {
  border-color: rgba(93, 217, 193, 0.28);
  background: linear-gradient(150deg, rgba(9, 21, 35, 0.68), rgba(8, 28, 44, 0.84));
}

.persona-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.persona-chip {
  border: 1px solid rgba(184, 169, 217, 0.36);
  border-radius: 999px;
  background: rgba(12, 24, 40, 0.76);
  color: rgba(228, 237, 246, 0.92);
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.2;
  cursor: pointer;
}

.persona-priority-section .persona-chip {
  width: 100%;
  min-height: 40px;
  text-align: left;
  justify-content: flex-start;
  white-space: normal;
}

.persona-chip.is-selected {
  border-color: rgba(93, 217, 193, 0.8);
  background: linear-gradient(140deg, rgba(93, 217, 193, 0.2), rgba(184, 169, 217, 0.22));
  color: #ecfeff;
}

.persona-chip:focus-visible {
  outline: 2px solid rgba(93, 217, 193, 0.72);
  outline-offset: 2px;
}

.persona-chip[disabled] {
  opacity: 0.58;
  cursor: not-allowed;
}

.persona-chip-status {
  margin: 0;
  font-size: 12px;
  color: rgba(214, 226, 240, 0.82);
  text-align: center;
}

.persona-voice-head {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  text-align: center;
}

.persona-voice-head > div {
  display: grid;
  gap: 6px;
  justify-items: center;
}

.persona-voice-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(93, 217, 193, 0.34);
  background: rgba(8, 26, 42, 0.8);
  color: rgba(154, 216, 255, 0.94);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.persona-voice-field {
  max-width: 360px;
}

.persona-voice-note {
  margin: 0;
  color: rgba(214, 226, 240, 0.82);
  font-size: 12px;
  line-height: 1.45;
}

.persona-adaptive-tip {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(93, 217, 193, 0.34);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(7, 27, 42, 0.92), rgba(10, 35, 49, 0.86));
  box-shadow: 0 12px 24px rgba(2, 10, 20, 0.18);
}

.persona-adaptive-tip-label {
  color: rgba(141, 239, 255, 0.96);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.persona-adaptive-tip-copy {
  margin: 0;
  color: rgba(236, 245, 255, 0.94);
  font-size: 13px;
  line-height: 1.5;
}

.persona-tuning-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}

.persona-tuning-slider {
  display: grid;
  gap: 6px;
}

.persona-tuning-slider-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  color: rgba(154, 216, 255, 0.92);
}

.persona-tuning-slider-label output {
  color: rgba(228, 237, 246, 0.92);
  letter-spacing: 0.04em;
}

.persona-tuning-slider input[type="range"] {
  width: 100%;
  margin: 0;
  height: 6px;
  border-radius: 999px;
  background: var(--tuning-track);
  accent-color: var(--plasma-cyan);
}

.persona-tuning-slider input[type="range"]:focus-visible {
  outline: 2px solid rgba(93, 217, 193, 0.72);
  outline-offset: 4px;
}

.persona-tuning-toggles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}

.persona-tuning-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(228, 237, 246, 0.9);
  font-size: 13px;
  line-height: 1.45;
}

.persona-tuning-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--hyper-gold);
}

.persona-tuning-toggles .calibration-field {
  min-width: 0;
  max-width: none;
}

.persona-tuning-toggles .calibration-field select {
  width: 100%;
  max-width: none;
}

.persona-style-hint {
  display: block;
  margin-top: 10px;
  max-width: 52ch;
  color: rgba(176, 226, 233, 0.96);
  line-height: 1.55;
}

.executive-presence-studio {
  border: 1px solid var(--executive-studio-border);
  border-radius: 12px;
  background: linear-gradient(140deg, var(--executive-studio-bg), rgba(14, 33, 54, 0.82));
  padding: 12px;
  display: grid;
  gap: 12px;
}

.executive-presence-head {
  display: grid;
  gap: 4px;
}

.executive-presence-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.executive-presence-group {
  margin: 0;
  border: 1px solid rgba(245, 176, 65, 0.35);
  border-radius: 10px;
  padding: 10px;
  min-width: 0;
  display: grid;
  gap: 8px;
}

.executive-presence-group legend {
  padding: 0 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 239, 214, 0.95);
}

.executive-presence-hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--executive-copy);
}

.executive-presence-choice-grid {
  display: grid;
  gap: 8px;
}

.executive-presence-choice {
  border: 1px solid var(--executive-card-border);
  border-radius: 10px;
  background: var(--executive-card-bg);
  padding: 10px;
  display: grid;
  gap: 6px;
  cursor: pointer;
}

.executive-presence-choice input[type="radio"] {
  margin: 0;
  accent-color: var(--hyper-gold);
}

.executive-presence-choice-title {
  font-size: 13px;
  font-weight: 700;
  color: rgba(236, 246, 255, 0.98);
}

.executive-presence-choice-copy {
  font-size: 12px;
  line-height: 1.4;
  color: var(--executive-copy);
}

.executive-presence-choice:focus-within {
  outline: 2px solid rgba(245, 176, 65, 0.66);
  outline-offset: 2px;
}

.executive-presence-choice:has(input[type="radio"]:checked) {
  border-color: var(--executive-card-active);
  box-shadow: 0 0 0 2px rgba(245, 176, 65, 0.2);
}

.executive-sarcasm-slider-wrap {
  border: 1px solid var(--executive-card-border);
  border-radius: 10px;
  background: var(--executive-card-bg);
  padding: 10px;
  display: grid;
  gap: 8px;
}

.executive-sarcasm-slider-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.executive-sarcasm-slider-label {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 242, 220, 0.96);
}

#personaExecutiveSarcasmValue {
  font-size: 13px;
  font-weight: 700;
  color: rgba(245, 176, 65, 0.98);
}

#personaExecutiveSarcasm {
  width: 100%;
  margin: 0;
  accent-color: var(--hyper-gold);
}

.executive-sarcasm-slider-scale {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(190, 205, 224, 0.78);
}

.executive-sarcasm-slider-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--executive-copy);
}

.executive-presence-summary {
  margin: 0;
  border: 1px dashed rgba(245, 176, 65, 0.46);
  border-radius: 10px;
  background: rgba(8, 18, 31, 0.88);
  color: rgba(255, 235, 207, 0.96);
  font-size: 12px;
  line-height: 1.5;
  padding: 8px 10px;
}

.persona-tuning-warning {
  margin: 0;
  color: #ffe9c6;
  font-size: 12px;
  line-height: 1.5;
  border: 1px solid rgba(245, 176, 65, 0.35);
  border-radius: 10px;
  background: rgba(6, 17, 34, 0.88);
  padding: 8px 10px;
}

.persona-tuning-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.persona-tuning-action-buttons {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.persona-tuning-status {
  margin: 0;
  color: rgba(214, 226, 240, 0.84);
  font-size: 13px;
  line-height: 1.4;
}

.calibration-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}

#personaTuningSave {
  min-width: 188px;
}

#personaTuningReset {
  min-width: 152px;
  border-color: rgba(245, 176, 65, 0.58);
  background: rgba(15, 24, 40, 0.92);
  color: rgba(255, 245, 220, 0.98);
  box-shadow: 0 10px 24px rgba(4, 10, 22, 0.26);
}

#personaTuningReset:hover,
#personaTuningReset:focus-visible {
  background: rgba(22, 34, 56, 0.96);
  color: rgba(255, 248, 232, 1);
}

#personaTuningCancel {
  min-width: 120px;
}

#personaMode {
  min-width: 188px;
}

#personaSelect {
  min-width: 248px;
  max-width: 320px;
}

.persona-orb-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.persona-orb {
  width: var(--persona-orb-size);
  height: var(--persona-orb-size);
  border-radius: 50%;
  position: relative;
  border: none;
  background: #0b1422;
  box-shadow: 0 0 18px rgba(93, 217, 193, 0.18);
  overflow: hidden;
  cursor: pointer;
  /* Ring thickness */
  padding: 2px;
}

.persona-orb::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* Rotating 4-color swirl ring (match app style). */
  background: conic-gradient(
    #00d4ff 0%,
    #00ff88 25%,
    #ffd700 50%,
    #ff1493 75%,
    #00d4ff 100%
  );
  animation: persona-orb-spin 4s linear infinite;
  filter: saturate(1.18);
  opacity: 0.98;
  pointer-events: none;
  z-index: 0;
}

.persona-orb::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  pointer-events: none;
  z-index: 2;
}

.persona-orb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 10%;
  position: relative;
  z-index: 1;
  border-radius: 50%;
}

@keyframes persona-orb-spin {
  to { transform: rotate(360deg); }
}

.persona-orb-label {
  font-size: 11px;
  color: var(--plasma-cyan);
  margin-top: 6px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.faq-category {
  font-weight: 700;
  color: var(--plasma-cyan);
  margin-bottom: 8px;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.05em;
}

details {
  background: rgba(20, 32, 52, 0.85);
  border: 1px solid rgba(184, 169, 217, 0.14);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
}

details summary {
  cursor: pointer;
  list-style: none;
  display: block;
  padding: 2px 2px 2px 0;
  font-weight: 600;
  line-height: 1.35;
  text-wrap: pretty;
}

details summary::-webkit-details-marker {
  display: none;
}

details summary::marker {
  content: '';
}

details summary:focus-visible {
  outline: 2px solid rgba(138, 191, 255, 0.95);
  outline-offset: 2px;
  border-radius: 8px;
}

details p {
  color: var(--ghost);
  margin: 8px 0 0;
  line-height: 1.6;
}

.legal details {
  background: rgba(12, 20, 34, 0.7);
}

.legal-confirm {
  margin-top: 14px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(93, 217, 193, 0.25);
  background: rgba(93, 217, 193, 0.08);
}

.legal-confirm ul {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--ghost);
}

.press-investor-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  row-gap: 10px;
  padding: 4px 0;
  justify-content: center;
  text-align: center;
}

body.embed-chat,
html.embed-chat body {
  background: transparent;
}

body.focus-chat-route,
html.focus-chat-route body {
  background:
    radial-gradient(circle at top center, rgba(21, 76, 126, 0.18), transparent 55%),
    linear-gradient(180deg, rgba(3, 12, 22, 0.98), rgba(3, 12, 22, 1));
}

body.embed-chat .wrap,
html.embed-chat body .wrap {
  max-width: none;
  margin: 0;
  padding: 0;
}

body.embed-chat header,
body.embed-chat .top-quicknav,
body.embed-chat .site-nav,
body.embed-chat .hero,
body.embed-chat main > section:not(#sandbox),
body.embed-chat footer,
html.embed-chat body header,
html.embed-chat body .top-quicknav,
html.embed-chat body .site-nav,
html.embed-chat body .hero,
html.embed-chat body main > section:not(#sandbox),
html.embed-chat body footer {
  display: none !important;
}

body.focus-chat-route main > section:not(#sandbox),
body.focus-chat-route footer,
html.focus-chat-route body main > section:not(#sandbox),
html.focus-chat-route body footer {
  display: none !important;
}

body.embed-chat main,
html.embed-chat body main {
  padding: 0;
}

body.focus-chat-route main,
html.focus-chat-route body main {
  padding-top: 8px;
}

body.embed-chat #sandbox,
html.embed-chat body #sandbox {
  margin: 0;
  padding: 0;
}

body.focus-chat-route #sandbox,
html.focus-chat-route body #sandbox {
  margin: 0;
  padding-top: 0;
}

body.embed-chat #sandbox .section-head,
html.embed-chat body #sandbox .section-head {
  display: none !important;
}

body.focus-chat-route #sandbox .section-head,
html.focus-chat-route body #sandbox .section-head {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  text-align: center;
}

body.focus-chat-route #sandbox .section-head h2,
html.focus-chat-route body #sandbox .section-head h2 {
  display: grid;
  justify-items: center;
}

body.focus-chat-route #sandbox .section-head h2::after,
html.focus-chat-route body #sandbox .section-head h2::after {
  content: "";
  display: block;
  width: clamp(96px, 14vw, 180px);
  height: 3px;
  margin-top: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(127, 232, 255, 0.98), rgba(93, 217, 193, 0.9));
}

.focus-chat-copy {
  margin: 0;
  max-width: 840px;
  color: var(--voice-cyan);
  font-size: 14px;
  line-height: 1.55;
  text-align: center;
}

body.embed-chat #sandbox .sandbox,
html.embed-chat body #sandbox .sandbox {
  grid-template-columns: 1fr;
}

body.focus-chat-route #sandbox .sandbox,
html.focus-chat-route body #sandbox .sandbox {
  grid-template-columns: 1fr;
}

body.embed-chat #sandbox .sandbox-header,
body.embed-chat #sandbox .feature-guide-grid-chat,
body.embed-chat #sandbox .chat-access,
html.embed-chat body #sandbox .sandbox-header,
html.embed-chat body #sandbox .feature-guide-grid-chat,
html.embed-chat body #sandbox .chat-access {
  display: none !important;
}

body.embed-chat #sandbox .sandbox > .card:nth-child(n + 2),
html.embed-chat body #sandbox .sandbox > .card:nth-child(n + 2) {
  display: none !important;
}

body.focus-chat-route #sandbox .sandbox > .card:nth-child(n + 2),
html.focus-chat-route body #sandbox .sandbox > .card:nth-child(n + 2) {
  display: none !important;
}

body.embed-chat #sandbox .sandbox > .card:first-child,
html.embed-chat body #sandbox .sandbox > .card:first-child {
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  min-height: 100vh;
  box-shadow: none;
}

body.focus-chat-route #sandbox .sandbox > .card:first-child,
html.focus-chat-route body #sandbox .sandbox > .card:first-child {
  min-height: calc(100vh - 112px);
}

body.embed-chat #sandbox .sandbox > .card:first-child,
body.focus-chat-route #sandbox .sandbox > .card:first-child,
html.embed-chat body #sandbox .sandbox > .card:first-child,
html.focus-chat-route body #sandbox .sandbox > .card:first-child {
  padding-top: 14px;
}

body.embed-chat #sandbox .avatar-variant-panel,
body.embed-chat #sandbox .chat-display-toolbar,
body.embed-chat #sandbox .memory-reel-panel,
body.focus-chat-route #sandbox .avatar-variant-panel,
body.focus-chat-route #sandbox .chat-display-toolbar,
body.focus-chat-route #sandbox .memory-reel-panel,
html.embed-chat body #sandbox .avatar-variant-panel,
html.embed-chat body #sandbox .chat-display-toolbar,
html.embed-chat body #sandbox .memory-reel-panel,
html.focus-chat-route body #sandbox .avatar-variant-panel,
html.focus-chat-route body #sandbox .chat-display-toolbar,
html.focus-chat-route body #sandbox .memory-reel-panel {
  margin-top: 0;
}

body.room-expert-route #sandbox .feature-guide-grid-chat,
body.room-expert-route #sandbox .avatar-variant-panel,
body.room-expert-route #sandbox .chat-display-toolbar,
body.room-expert-route #sandbox .persona-tuning-toggle,
body.room-expert-route #sandbox .persona-tuning-panel,
body.room-expert-route #sandbox .memory-reel-panel,
html.room-expert-route body #sandbox .feature-guide-grid-chat,
html.room-expert-route body #sandbox .avatar-variant-panel,
html.room-expert-route body #sandbox .chat-display-toolbar,
html.room-expert-route body #sandbox .persona-tuning-toggle,
html.room-expert-route body #sandbox .persona-tuning-panel,
html.room-expert-route body #sandbox .memory-reel-panel {
  display: none !important;
}

body.embed-chat #sandbox .chat-box,
html.embed-chat body #sandbox .chat-box {
  min-height: min(560px, calc(100vh - 220px));
  max-height: min(560px, calc(100vh - 220px));
}

.embed-escape-bar {
  display: none;
}

body.embed-chat .embed-escape-bar,
html.embed-chat body .embed-escape-bar {
  display: none !important;
}

body.focus-chat-route .embed-escape-bar,
html.focus-chat-route body .embed-escape-bar {
  display: none !important;
}

@media (max-width: 1100px) {
  .sandbox-card[data-chat-display-mode="side"] .chat-box {
    min-height: var(--chat-box-height-mobile);
    max-height: var(--chat-box-height-mobile);
    padding-right: 16px;
  }

  .sandbox-card[data-chat-display-mode="side"] .chat-box::before,
  .sandbox-card[data-chat-display-mode="side"] .chat-box::after {
    display: none;
  }

  .chat-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .chat-actions-right {
    display: contents;
  }

  .chat-actions button {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 10px 12px;
    font-size: 15px;
    border-radius: 12px;
  }

  #clearChatBtn {
    grid-column: 1;
    grid-row: 1;
  }

  #chatShareBtn {
    grid-column: 1;
    grid-row: 2;
  }

  #micBtn {
    grid-column: 2;
    grid-row: 2;
  }

  #chatSend {
    grid-column: 2;
    grid-row: 1;
  }

  #voiceBtn {
    grid-column: 1 / -1;
    grid-row: 3;
    min-height: 42px;
    font-size: 14px;
  }

  #chatCrisisInline {
    grid-column: 1 / -1;
    grid-row: 4;
    justify-self: stretch;
    align-self: stretch;
    min-height: 40px;
    padding: 8px 10px;
    font-size: 11px;
  }
}

body.view-mobile .chat-box {
  height: var(--chat-box-height-mobile);
  min-height: var(--chat-box-height-mobile);
  max-height: var(--chat-box-height-mobile);
  padding: 12px;
}

body.view-mobile .sandbox-header {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

body.view-mobile .persona-left {
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

body.view-mobile .persona-header-copy {
  order: 3;
  width: 100%;
  justify-items: center;
  text-align: center;
}

body.view-mobile .persona-controls {
  order: 2;
  width: 100%;
  justify-content: center;
}

body.view-mobile #sandboxName {
  font-size: clamp(22px, 7.2vw, 34px);
}

body.view-mobile #sandboxTone {
  font-size: clamp(16px, 4.2vw, 24px);
  max-width: min(94vw, 680px);
}

body.view-mobile #sandboxStoryline {
  font-size: clamp(15px, 4vw, 20px);
  max-width: min(94vw, 700px) !important;
  padding: 13px 14px 14px;
  border-radius: 18px;
}

body.view-mobile #chatInput {
  min-height: 68px;
  max-height: 300px;
  font-size: 15px;
  line-height: 1.4;
  padding: 12px 14px;
}

body.view-mobile .chat-log {
  gap: 10px;
}

body.view-mobile .chat-generalist-head {
  grid-template-columns: 1fr;
  justify-items: center;
}

body.view-mobile .chat-generalist-phase {
  align-self: center;
  justify-self: center;
}

body.view-mobile .chat-generalist-grid {
  grid-template-columns: 1fr;
}

body.view-mobile .chat-helper-shell-head {
  flex-direction: column;
  align-items: center;
}

body.view-mobile .chat-helper-shell-copy {
  justify-items: center;
  text-align: center;
}

body.view-mobile .chat-helper-toggle {
  width: min(100%, 520px);
  min-width: 0;
  margin-inline: auto;
}

body.view-mobile .chat-ai-disclosure {
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-wrap: wrap;
}

body.view-mobile .chat-ai-disclosure-actions {
  width: 100%;
  justify-content: center;
}

body.view-mobile .msg-body {
  max-width: 84%;
}

body.view-mobile .bubble {
  font-size: 15px;
  line-height: 1.42;
}

body.view-mobile .sandbox-card[data-chat-display-mode="full"] .chat-box,
body.view-mobile .sandbox-card[data-chat-display-mode="side"] .chat-box {
  height: var(--chat-box-height-mobile);
  min-height: var(--chat-box-height-mobile);
  max-height: var(--chat-box-height-mobile);
}

body.view-mobile .sandbox-card[data-chat-display-mode="side"] .chat-box {
  padding-right: 16px;
}

body.view-mobile .sandbox-card[data-chat-display-mode="side"] .chat-box::before,
body.view-mobile .sandbox-card[data-chat-display-mode="side"] .chat-box::after {
  display: none;
}

body.view-mobile .chat-actions {
  grid-template-columns: 1fr;
  gap: 10px;
}

body.view-mobile .chat-actions-right {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body.view-mobile .translator-panel-grid {
  grid-template-columns: 1fr;
}

body.view-mobile .translator-speaker-row button {
  flex: 1 1 calc(50% - 8px);
}

body.view-mobile .chat-actions button {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 10px 12px;
  font-size: 15px;
  border-radius: 12px;
}

body.view-mobile #clearChatBtn {
  grid-column: 1;
  grid-row: 1;
}

body.view-mobile #chatShareBtn {
  grid-column: 1;
  grid-row: 1;
}

body.view-mobile #micBtn {
  grid-column: 2;
  grid-row: 1;
}

body.view-mobile #chatSend {
  grid-column: 1 / -1;
  grid-row: 2;
}

body.view-mobile #voiceBtn {
  grid-column: 1 / -1;
  grid-row: 3;
  min-height: 42px;
  font-size: 14px;
}

body.view-mobile #chatCrisisInline {
  grid-column: 1 / -1;
  grid-row: 4;
  justify-self: center;
  align-self: stretch;
  min-height: 40px;
  max-width: 100%;
  padding: 8px 10px;
  font-size: 11px;
}

body.view-mobile .chat-visual-orb {
  width: var(--chat-visual-orb-size-mobile);
  box-shadow: 0 0 30px rgba(93, 217, 193, 0.32);
}

body.view-mobile .sandbox-card[data-chat-display-mode="orb"] .chat-visual-stage {
  min-height: 148px;
  max-height: 184px;
  padding: 8px;
}

body.view-mobile .chat-display-toggle button[data-chat-display-mode="side"],
body.device-mobile .chat-display-toggle button[data-chat-display-mode="side"],
body.device-tablet .chat-display-toggle button[data-chat-display-mode="side"] {
  display: none;
}

body.view-mobile .sandbox-card[data-chat-display-mode="portrait"] .chat-visual-stage {
  order: 0;
  min-height: 188px;
  max-height: 236px;
  padding: 8px 10px;
}

body.view-mobile .sandbox-card[data-chat-display-mode="portrait"] .chat-visual-portrait-pair {
  position: relative;
  grid-template-columns: 1fr;
  gap: 0;
  width: min(62vw, 168px);
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  margin: 0 auto;
}

body.view-mobile .sandbox-card[data-chat-display-mode="portrait"] #chatVisualPortrait,
body.view-mobile .sandbox-card[data-chat-display-mode="portrait"] #chatVisualPortraitSecondary {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  min-height: 100%;
  max-height: none;
  object-fit: contain;
  object-position: var(--chat-portrait-position);
  transform: none;
  border-radius: 12px;
}

body.view-mobile .sandbox-card[data-chat-display-mode="portrait"] #chatVisualPortraitSecondary {
  display: none;
}

body.view-mobile .sandbox-card[data-chat-display-mode="full"] .chat-box::before {
  background-size: cover;
  background-position: center 18%;
  background-color: rgba(4, 10, 20, 0.52);
  opacity: 0.62;
}

body.view-mobile .sandbox-card[data-chat-display-mode="full"] .chat-box::after {
  background: linear-gradient(180deg, rgba(4, 11, 22, 0.04) 0%, rgba(4, 12, 25, 0.3) 40%, rgba(3, 10, 20, 0.7) 100%);
}

body.view-mobile .msg-avatar.ai {
  width: var(--chat-message-avatar-size-mobile);
  height: var(--chat-message-avatar-size-mobile);
}

body.view-mobile .msg-avatar-shell.ai {
  width: var(--chat-message-avatar-size-mobile);
  height: var(--chat-message-avatar-size-mobile);
}

body.view-mobile #personaGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

body.view-mobile #personaGrid .persona-card {
  border-radius: 18px;
  padding: 10px;
  gap: 8px;
  min-height: 100%;
}

body.view-mobile #personaGrid .persona-hero {
  border-radius: 16px;
}

body.view-mobile #personaGrid .persona-card .tone {
  display: none;
}

body.view-mobile #personaGrid .persona-actions {
  margin-top: auto;
  padding-top: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

body.view-mobile #personaGrid .persona-actions .btn {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  font-size: 13px;
}

body.view-mobile #personaGrid > .persona-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  max-width: min(280px, 100%);
  justify-self: center;
}

body.view-mobile #pricing .founders-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body.view-mobile #pricing .founders-tier {
  border-radius: 18px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.view-mobile #pricing .founders-tier h5 {
  font-size: 19px;
  line-height: 1.2;
}

body.view-mobile #pricing .founders-tier-kicker {
  margin: 0;
  font-size: 15px;
  line-height: 1.3;
}

body.view-mobile #pricing .platform-list {
  font-size: 13px;
  line-height: 1.45;
  gap: 4px;
}

body.view-mobile #pricing .founders-tier-actions {
  margin-top: auto;
}

body.view-mobile #pricing .founders-subscribe-btn {
  min-height: 40px;
  font-size: 13px;
}

body.view-mobile #pricing .founders-grid .founders-tier:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

@media (max-width: 640px) {
  .wrap {
    padding: 0 10px;
  }
  header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .header-actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }
  .header-auth-shell {
    width: auto;
    min-width: 0;
    align-items: center;
  }
  .header-auth-actions {
    justify-content: flex-start;
  }
  .header-auth-panel {
    width: min(340px, calc(100vw - 38px));
    right: auto;
    left: 0;
  }
  .header-pill {
    width: 100%;
    text-align: center;
  }
  .view-toggle {
    width: 100%;
    justify-content: flex-start;
  }
  .home-header .header-actions {
    justify-content: center;
  }
  .home-header .header-auth-actions {
    justify-content: center;
  }
  .home-header .view-toggle {
    justify-content: center;
  }
  .chat-display-toolbar {
    width: 100%;
  }
  .sandbox-header {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .persona-left {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }
  .persona-header-copy {
    order: 3;
    width: 100%;
    justify-items: center;
    text-align: center;
  }
  .persona-controls {
    order: 2;
    width: 100%;
    justify-content: center;
  }
  #sandboxName {
    font-size: clamp(22px, 8vw, 34px);
  }
  #sandboxTone {
    font-size: clamp(18px, 4.9vw, 30px);
    max-width: min(94vw, 680px);
  }
  #sandboxStoryline {
    font-size: clamp(15px, 4vw, 20px);
    max-width: min(94vw, 700px) !important;
    padding: 13px 14px 14px;
    border-radius: 18px;
  }
  .chat-display-toggle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .chat-display-toggle button[data-chat-display-mode="side"] {
    display: none;
  }
  .chat-display-toggle button {
    width: 100%;
    min-height: 44px;
    font-size: 12px;
    padding: 6px 10px;
  }
  .chat-visual-stage {
    min-height: 160px;
    max-height: 220px;
  }
  .sandbox-card[data-chat-display-mode="orb"] .chat-visual-stage {
    min-height: 148px;
    max-height: 184px;
    padding: 8px;
  }
  .sandbox-card[data-chat-display-mode="portrait"] .chat-visual-stage {
    order: 0;
    min-height: 178px;
    max-height: 224px;
    padding: 8px 10px;
  }
  .sandbox-card[data-chat-display-mode="portrait"] .chat-visual-portrait-pair {
    position: relative;
    grid-template-columns: 1fr;
    gap: 0;
    width: min(64vw, 164px);
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    margin: 0 auto;
  }
  .sandbox-card[data-chat-display-mode="portrait"] #chatVisualPortrait,
  .sandbox-card[data-chat-display-mode="portrait"] #chatVisualPortraitSecondary {
    position: relative;
    inset: auto;
    width: 100%;
    height: 100%;
    min-height: 100%;
    max-height: none;
    object-fit: contain;
    object-position: var(--chat-portrait-position);
    transform: none;
    border-radius: 12px;
  }
  .sandbox-card[data-chat-display-mode="portrait"] #chatVisualPortraitSecondary {
    display: none;
  }
  .sandbox-card[data-chat-display-mode="full"] .chat-box::before {
    background-size: cover;
    background-position: center 18%;
    background-color: rgba(4, 10, 20, 0.48);
    opacity: 0.66;
  }
  .sandbox-card[data-chat-display-mode="full"] .chat-box::after {
    background: linear-gradient(180deg, rgba(4, 11, 22, 0.02) 0%, rgba(4, 12, 25, 0.28) 38%, rgba(3, 10, 20, 0.66) 100%);
  }
  .sandbox-card[data-chat-display-mode="full"] .chat-box {
    height: var(--chat-box-height-mobile);
    min-height: var(--chat-box-height-mobile);
    max-height: var(--chat-box-height-mobile);
  }
  .sandbox-card[data-chat-display-mode="side"] .chat-box {
    padding-right: 16px;
  }
  .chat-visual-orb {
    width: var(--chat-visual-orb-size-mobile);
    box-shadow: 0 0 30px rgba(93, 217, 193, 0.32);
  }
  .msg-avatar.ai {
    width: var(--chat-message-avatar-size-mobile);
    height: var(--chat-message-avatar-size-mobile);
  }
  .msg-avatar-shell.ai {
    width: var(--chat-message-avatar-size-mobile);
    height: var(--chat-message-avatar-size-mobile);
  }
  #personaGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  #personaGrid .persona-card {
    border-radius: 18px;
    padding: 10px;
    gap: 8px;
    min-height: 100%;
  }
  #personaGrid .persona-hero {
    border-radius: 16px;
  }
  #personaGrid .persona-card .tone {
    display: none;
  }
  #personaGrid .persona-actions {
    margin-top: auto;
    padding-top: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }
  #personaGrid .persona-actions .btn {
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    font-size: 13px;
  }
  #personaGrid > .persona-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: min(280px, 100%);
    justify-self: center;
  }
  #pricing .founders-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  #pricing .founders-tier {
    border-radius: 18px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  #pricing .founders-tier h5 {
    font-size: 19px;
    line-height: 1.2;
  }
  #pricing .founders-tier-kicker {
    margin: 0;
    font-size: 15px;
    line-height: 1.3;
  }
  #pricing .platform-list {
    font-size: 13px;
    line-height: 1.45;
    gap: 4px;
  }
  #pricing .founders-tier-actions {
    margin-top: auto;
  }
  #pricing .founders-subscribe-btn {
    min-height: 44px;
    font-size: 13px;
  }
  #pricing .founders-grid .founders-tier:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .hero {
    padding: 18px;
    border-radius: 20px;
    gap: 16px;
  }
  .hero h1 {
    font-size: clamp(36px, 11vw, 52px);
    line-height: 1.06;
  }
  .hero p {
    font-size: 15px;
    line-height: 1.5;
  }
  .hero .hero-pronunciation {
    font-size: 14px;
    line-height: 1.35;
  }
  #enrollmentHero {
    grid-template-columns: 1fr;
    padding: 14px;
    gap: 12px;
  }
  #enrollmentHero h1 {
    font-size: clamp(20px, 7.4vw, 30px);
    line-height: 1.14;
  }
  #enrollmentHero p {
    font-size: 13px;
    line-height: 1.4;
  }
  #enrollmentHero .hero-pronunciation-inline {
    margin-top: 14px;
  }
  #enrollmentHero .hero-img {
    max-width: min(220px, 100%);
  }
  #enrollmentHero .hero-img img {
    max-height: 300px;
  }
  #notify .grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  #chatInput {
    min-height: 68px;
    max-height: 300px;
    font-size: 15px;
    line-height: 1.4;
    padding: 12px 14px;
  }
  .top-quicknav {
    overflow-x: visible;
    flex-wrap: wrap;
    padding-bottom: 0;
  }
  .brand-title {
    width: 100%;
    align-items: flex-start;
  }
  .brand-title .name {
    font-size: clamp(26px, 7.8vw, 38px);
    text-align: left;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }
  .brand-subtitle {
    text-align: left;
  }
  .brand-admin-badge {
    align-self: flex-start;
  }
  .site-nav {
    width: 100%;
  }
  .site-nav-menu {
    width: auto;
  }
  .shell-platforms {
    width: 100%;
  }
  .cta-row { width: 100%; }
  .store-row { width: 100%; }
  .btn { justify-content: center; flex: 1; }
  .chat-box {
    height: var(--chat-box-height-mobile);
    min-height: var(--chat-box-height-mobile);
    max-height: var(--chat-box-height-mobile);
    padding: 12px;
  }
  .chat-generalist-head {
    flex-direction: column;
  }
  .chat-generalist-phase {
    align-self: flex-start;
  }
  .chat-generalist-grid {
    grid-template-columns: 1fr;
  }
  .chat-ai-disclosure {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .chat-ai-disclosure-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .chat-log {
    gap: 10px;
  }
  .msg-body {
    max-width: 84%;
  }
  .bubble {
    font-size: 15px;
    line-height: 1.42;
  }
  .chat-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .chat-actions-right {
    display: contents;
  }
  .chat-actions button {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 10px 12px;
    font-size: 15px;
    border-radius: 12px;
  }
  #clearChatBtn {
    grid-column: 1;
    grid-row: 1;
  }
  #chatShareBtn {
    grid-column: 1;
    grid-row: 2;
  }
  #micBtn {
    grid-column: 2;
    grid-row: 2;
  }
  #chatSend {
    grid-column: 2;
    grid-row: 1;
  }
  #voiceBtn {
    grid-column: 1 / -1;
    grid-row: 3;
    min-height: 42px;
    font-size: 14px;
  }
  #chatCrisisInline {
    grid-column: 1 / -1;
    grid-row: 4;
    justify-self: stretch;
    align-self: stretch;
    min-height: 40px;
    padding: 8px 10px;
    font-size: 11px;
  }
  .chat-access-controls {
    display: block;
  }
  .persona-status-row {
    justify-content: center;
    text-align: center;
  }
  .persona-status-copy {
    width: 100%;
  }
  .persona-status-actions {
    width: 100%;
    justify-content: center;
  }
  #personaGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  #personaGrid .persona-card {
    border-radius: 18px;
    padding: 10px;
    gap: 8px;
    min-height: 100%;
  }
  #personaGrid .persona-hero {
    border-radius: 16px;
  }
  #personaGrid .persona-card .tone {
    display: none;
  }
  #personaGrid .persona-actions {
    margin-top: auto;
    padding-top: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }
  #personaGrid .persona-actions .btn {
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    font-size: 13px;
  }
  #personaGrid > .persona-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: min(280px, 100%);
    justify-self: center;
  }
  .persona-card.is-last-spoken .persona-hero {
    width: min(56%, 260px);
    min-width: 160px;
  }
  .chat-ai-disclosure {
    flex-wrap: wrap;
  }
  .chat-ai-disclosure-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  #personaSelect {
    min-width: 100%;
    max-width: 100%;
  }
  .persona-tuning-grid {
    grid-template-columns: 1fr;
  }
  .persona-tuning-toggles {
    grid-template-columns: 1fr;
  }
  .executive-presence-layout {
    grid-template-columns: 1fr;
  }
  .avatar-variant-mode-group {
    grid-template-columns: 1fr;
  }
  .avatar-variant-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .avatar-variant-card {
    border-radius: 18px;
    border-color: rgba(116, 131, 193, 0.62);
    background: linear-gradient(180deg, rgba(4, 20, 44, 0.98), rgba(4, 18, 38, 0.96));
    padding: 10px;
    gap: 10px;
    min-height: 190px;
    align-content: start;
  }
  .avatar-variant-card img {
    width: 100%;
    max-width: none;
    border-radius: 16px;
    border-color: rgba(126, 156, 214, 0.72);
  }
  .avatar-variant-card-label {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0;
    color: rgba(228, 237, 246, 0.96);
  }
  .avatar-variant-card.is-active {
    border-color: rgba(93, 217, 193, 0.95);
    box-shadow: 0 0 0 2px rgba(93, 217, 193, 0.26);
  }
  .avatar-variant-cards .avatar-variant-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .memory-reel-toolbar {
    grid-template-columns: 1fr;
  }
  .memory-reel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .memory-reel-page-group {
    padding: 14px;
  }
  .memory-reel-page-summary {
    grid-template-columns: 1fr;
  }
  .memory-reel-page-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .memory-reel-page-card-link img {
    max-width: 100%;
  }
  .memory-reel-page-card-actions .btn,
  .memory-reel-page-card-actions .memory-reel-card-delete {
    width: 100%;
  }
  #memoryReelAssignBtn {
    width: 100%;
    min-width: 0;
  }
  .avatar-variant-actions {
    justify-content: stretch;
  }
  #avatarVariantSaveBtn {
    width: 100%;
    min-width: 0;
  }
  .persona-tuning-action-buttons {
    width: 100%;
    flex-wrap: wrap;
  }
  .persona-tuning-action-buttons .btn {
    width: 100%;
    min-width: 0;
  }
  #personaTuningSave {
    width: 100%;
    min-width: 0;
  }
  .calibration-modal-panel {
    max-height: 95vh;
  }
  .calibration-scope-row,
  .calibration-tone-grid {
    grid-template-columns: 1fr;
  }
  .calibration-modal-buttons {
    justify-content: stretch;
  }
  .calibration-modal-buttons .btn {
    width: 100%;
  }
  #pricing .founders-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  #pricing .founders-tier {
    border-radius: 18px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  #pricing .founders-tier h5 {
    font-size: 19px;
    line-height: 1.2;
  }
  #pricing .founders-tier-kicker {
    margin: 0;
    font-size: 15px;
    line-height: 1.3;
  }
  #pricing .platform-list {
    font-size: 13px;
    line-height: 1.45;
    gap: 4px;
  }
  #pricing .founders-tier-actions {
    margin-top: auto;
  }
  #pricing .founders-subscribe-btn {
    min-height: 40px;
    font-size: 13px;
  }
  #pricing .founders-grid .founders-tier:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .calibration-objective-row,
  .settings-calibration-row {
    grid-template-columns: minmax(0, 1fr) minmax(104px, 118px);
    gap: 10px;
    align-items: start;
  }

  .objective-rank-control {
    width: 100%;
    min-width: 0;
    justify-items: stretch;
    gap: 4px;
  }

  .objective-rank-label {
    justify-self: start;
    letter-spacing: 0.1em;
  }

  .calibration-objective-row select,
  .settings-calibration-row select {
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    font-size: 15px;
    line-height: 1.2;
  }
}

@media (max-width: 900px) {
  .persona-editor-summary {
    white-space: normal;
  }

  .persona-priority-section .persona-chip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chat-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .chat-actions-right {
    display: contents;
  }

  .chat-actions button {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 10px 12px;
    font-size: 15px;
    border-radius: 12px;
  }

  #clearChatBtn {
    grid-column: 1;
    grid-row: 1;
  }

  #chatShareBtn {
    grid-column: 1;
    grid-row: 2;
  }

  #micBtn {
    grid-column: 2;
    grid-row: 2;
  }

  #chatSend {
    grid-column: 2;
    grid-row: 1;
  }

  #voiceBtn {
    grid-column: 1 / -1;
    grid-row: 3;
    min-height: 42px;
    font-size: 14px;
  }

  #chatCrisisInline {
    grid-column: 1 / -1;
    grid-row: 4;
    justify-self: stretch;
    align-self: stretch;
    min-height: 40px;
    padding: 8px 10px;
    font-size: 11px;
  }
}

@media (max-width: 640px) {
  .persona-priority-section .persona-chip-grid {
    grid-template-columns: 1fr;
  }
}

.cookie-consent-banner {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 1200;
  width: min(500px, calc(100vw - 28px));
  display: grid;
  gap: 10px;
  justify-items: center;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(127, 232, 255, 0.24);
  background:
    radial-gradient(circle at top right, rgba(127, 232, 255, 0.14), transparent 32%),
    radial-gradient(circle at top left, rgba(255, 196, 120, 0.12), transparent 28%),
    linear-gradient(155deg, rgba(11, 27, 42, 0.98), rgba(8, 18, 28, 0.98));
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.28);
  text-align: center;
  transform: translateX(-50%);
}

.cookie-consent-banner h2,
.cookie-consent-banner p {
  margin: 0;
}

.cookie-consent-banner h2 {
  font-size: clamp(1.06rem, 2.4vw, 1.28rem);
}

.cookie-consent-banner p {
  color: var(--voice-cyan);
  line-height: 1.62;
}

.cookie-consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.cookie-consent-actions .btn,
.cookie-consent-actions .btn.secondary {
  min-width: 160px;
  justify-content: center;
}

.cookie-consent-note {
  font-size: 0.85rem;
  color: #bcd4e8;
}

.cookie-consent-note a {
  color: var(--voice-cyan);
}

.cookie-choice-controls {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 196, 120, 0.2);
  background: rgba(7, 19, 31, 0.5);
}

.cookie-choice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cookie-choice-actions .btn,
.cookie-choice-actions .btn.secondary {
  min-width: 180px;
  justify-content: center;
}

.cookie-choice-status {
  margin: 0;
  color: #d6e5f4;
  line-height: 1.55;
}

.voice-note {
  margin: 14px 0 18px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid var(--voice-cyan-border);
  background:
    linear-gradient(155deg, rgba(13, 43, 62, 0.9), rgba(7, 22, 36, 0.9)),
    var(--voice-cyan-surface);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.2);
}

.voice-note-title {
  margin: 0 0 6px;
  color: var(--voice-cyan);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.voice-note p {
  margin: 0;
  color: #e5f7ff;
  line-height: 1.62;
}

.voice-note p + p {
  margin-top: 10px;
}

@media (max-width: 720px) {
  .cookie-consent-banner {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    padding: 16px;
    transform: none;
  }

  .cookie-consent-actions {
    flex-direction: column;
  }

  .cookie-consent-actions .btn,
  .cookie-consent-actions .btn.secondary {
    width: 100%;
    min-width: 0;
  }

  body.translator-route .cookie-consent-banner,
  html.translator-route body .cookie-consent-banner {
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    bottom: auto;
  }

  .cookie-choice-actions {
    flex-direction: column;
  }

  .cookie-choice-actions .btn,
  .cookie-choice-actions .btn.secondary {
    width: 100%;
    min-width: 0;
  }

  .voice-note {
    padding: 14px 15px;
  }
}

body.view-desktop.view-desktop-forced #sandbox {
  min-width: min(1100px, calc(100vw - 40px));
}

body.view-desktop.view-desktop-forced .sandbox-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

body.view-desktop.view-desktop-forced .persona-left {
  flex-wrap: nowrap;
  justify-content: flex-start;
}

body.view-desktop.view-desktop-forced .persona-header-copy {
  order: initial;
  width: auto;
  justify-items: start;
  text-align: left;
}

body.view-desktop.view-desktop-forced .persona-controls {
  order: initial;
  width: auto;
  justify-content: flex-end;
}

body.view-desktop.view-desktop-forced .chat-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body.view-desktop.view-desktop-forced .chat-actions-right {
  display: contents;
}

body.view-desktop.view-desktop-forced .chat-actions button {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 10px 12px;
  font-size: 14px;
  border-radius: 12px;
}

body.view-desktop.view-desktop-forced #clearChatBtn {
  grid-column: 1;
  grid-row: 1;
}

body.view-desktop.view-desktop-forced #chatShareBtn {
  grid-column: 1;
  grid-row: 2;
}

body.view-desktop.view-desktop-forced #micBtn {
  grid-column: 2;
  grid-row: 2;
}

body.view-desktop.view-desktop-forced #chatSend {
  grid-column: 2;
  grid-row: 1;
}

body.view-desktop.view-desktop-forced #voiceBtn {
  grid-column: 1 / -1;
  grid-row: 3;
}

body.view-desktop.view-desktop-forced #chatCrisisInline {
  grid-column: 1 / -1;
  grid-row: 4;
  justify-self: stretch;
  align-self: stretch;
  min-height: 40px;
  padding: 8px 10px;
  font-size: 11px;
}

body.view-desktop.view-desktop-forced .sandbox-card[data-chat-display-mode="side"] .chat-box {
  min-height: var(--chat-box-height);
  max-height: var(--chat-box-height);
  padding-right: 22px;
}

body.view-desktop.view-desktop-forced .sandbox-card[data-chat-display-mode="side"] .chat-box::before,
body.view-desktop.view-desktop-forced .sandbox-card[data-chat-display-mode="side"] .chat-box::after {
  display: block;
}

body.view-desktop.view-desktop-forced .sandbox-card[data-chat-display-mode="portrait"] .chat-visual-stage {
  min-height: 280px;
  max-height: 360px;
}

body.view-desktop.view-desktop-forced .sandbox-card[data-chat-display-mode="portrait"] .chat-visual-portrait-pair {
  width: min(100%, 440px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

body.view-desktop.view-desktop-forced .sandbox-card[data-chat-display-mode="portrait"] #chatVisualPortraitSecondary {
  display: block;
}