/* Browser material layer. Layout and behavior remain owned by styles.css/app.js.
   Pearl, iris and ice repeat the Nexora palette; reading surfaces stay quiet. */
:root {
  --web-page: #eef2fb;
  --web-panel: rgb(255 255 255 / 34%);
  --web-sidebar: rgb(247 248 255 / 38%);
  --web-strong: rgb(250 251 255 / 85%);
  --web-line: rgb(83 79 130 / 13%);
  --web-shadow:
    0 18px 48px -22px #494b7e44, 0 3px 9px -4px #5e649b24,
    inset 0 1px 0 #ffffffed, inset 0 -1px 0 #a5afd52b;
  --pearl-edge: rgb(255 255 255 / 78%);
  --pearl-light: rgb(255 255 255 / 68%);
  --pearl-facet: rgb(255 255 255 / 42%);
  --pearl-reflection: linear-gradient(
    132deg,
    #ffffff69 0%,
    #ffffff0a 35%,
    #ffffff00 63%,
    #c5dbf52b 100%
  );
  --pearl-blur: blur(30px) saturate(155%);
  --pearl-veil: rgb(244 247 255 / 68%);
  --pearl-title: #292a46;
}
:root[data-theme="dark"] {
  --web-page: #101525;
  --web-panel: rgb(46 53 79 / 32%);
  --web-sidebar: rgb(36 42 65 / 38%);
  --web-strong: rgb(31 38 59 / 91%);
  --web-line: rgb(184 196 229 / 17%);
  --web-shadow:
    0 18px 50px -20px #0009, 0 3px 12px -4px #0005, inset 0 1px 0 #e2e9ff24,
    inset 0 -1px 0 #03091944;
  --pearl-edge: rgb(206 219 255 / 21%);
  --pearl-light: rgb(217 232 255 / 11%);
  --pearl-facet: rgb(212 227 255 / 10%);
  --pearl-reflection: linear-gradient(
    132deg,
    #c3d5ff0f 0%,
    #c3d5ff02 35%,
    #c3d5ff00 63%,
    #869ee511 100%
  );
  --pearl-veil: rgb(19 25 42 / 84%);
  --pearl-title: #f1f2ff;
}
:root[data-glass="clear"] {
  --web-panel: rgb(255 255 255 / 20%);
  --web-sidebar: rgb(247 248 255 / 25%);
}
:root[data-theme="dark"][data-glass="clear"] {
  --web-panel: rgb(46 53 79 / 20%);
  --web-sidebar: rgb(36 42 65 / 25%);
}
.ambient {
  inset: 0;
  animation: none;
  transform: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 12% 14%, #c8b8f37a, transparent 44%),
    radial-gradient(ellipse at 94% 82%, #a8d9ec9c, transparent 49%),
    radial-gradient(ellipse at 55% 64%, #eadbf157, transparent 52%);
}
.ambient::before {
  content: "";
  position: absolute;
  inset: -3%;
  background: url("/site/_static/b8874a87ef5cfd138c059814f2e2aa79/web/assets/liquid-atmosphere.svg") center / cover no-repeat;
  opacity: 0.7;
}
.ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 58% 45%,
    var(--pearl-veil),
    transparent 75%
  );
}
:root[data-theme="dark"] .ambient {
  background:
    radial-gradient(ellipse at 12% 0%, #6350b847, transparent 50%),
    radial-gradient(ellipse at 100% 90%, #326f8e4a, transparent 50%),
    radial-gradient(ellipse at 70% 32%, #525c9030, transparent 45%);
}
:root[data-theme="dark"] .ambient::before {
  opacity: 0.21;
}
.app-shell {
  padding: 16px;
  gap: 16px;
}
.sidebar {
  flex-basis: 260px;
  width: 260px;
  border: 1px solid var(--pearl-edge);
  border-radius: 26px;
  padding: 23px 15px 14px;
  background: var(--pearl-reflection), var(--web-sidebar);
  box-shadow: var(--web-shadow);
  -webkit-backdrop-filter: var(--pearl-blur);
  backdrop-filter: var(--pearl-blur);
}
.sidebar-collapsed .sidebar {
  margin-right: -276px;
  transform: translateX(calc(-100% - 32px));
}
.sidebar-head {
  margin-bottom: 26px;
}
.brand {
  font-family: "Segoe UI Variable Display", "Segoe UI", sans-serif;
  font-size: 21px;
  letter-spacing: -0.75px;
}
.brand > span:last-child {
  text-shadow: 0 1px 0 var(--pearl-light);
}
.brand-mark {
  position: relative;
  isolation: isolate;
  width: 32px;
  height: 34px;
  border-radius: 12px;
  background:
    radial-gradient(
      circle at var(--light-x, 25%) var(--light-y, 10%),
      var(--pearl-light),
      transparent 75%
    ),
    var(--web-panel);
  border: 1px solid var(--pearl-edge);
  box-shadow: var(--web-shadow);
}
.new-chat {
  min-height: 46px;
  border-color: var(--pearl-edge);
  background: linear-gradient(112deg, #a99add26, #ffffff17), var(--web-panel);
  box-shadow: var(--web-shadow);
  border-radius: 14px;
  transition:
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}
.new-chat:hover {
  background: var(--web-strong);
  box-shadow:
    var(--web-shadow),
    0 0 0 2px #b2a2dc29;
  transform: translateY(-1px);
}
.primary-nav a {
  min-height: 42px;
  border: 1px solid transparent;
}
.primary-nav a[aria-current="page"] {
  background: linear-gradient(115deg, #9e89e32e, #acb9e816);
  border-color: var(--pearl-edge);
  box-shadow:
    inset 0 1px 0 var(--pearl-facet),
    0 4px 12px -8px #6e62a578;
}
.history-row.active {
  background: var(--web-panel);
  box-shadow: inset 0 1px 0 var(--pearl-facet);
}
.history-row {
  border-radius: 11px;
}
.free-note {
  background: var(--pearl-reflection), var(--web-panel);
  border-color: var(--pearl-edge);
  box-shadow: var(--web-shadow);
}
.free-note strong {
  white-space: normal;
  font-size: 10px;
  line-height: 1.4;
  display: block;
}
.free-note small {
  font-size: 10px;
}
.topbar {
  height: 62px;
  flex-basis: 62px;
  padding: 0 22px;
  border: 1px solid var(--pearl-edge);
  border-radius: 23px;
  background: var(--pearl-reflection), var(--web-panel);
  box-shadow: var(--web-shadow);
  -webkit-backdrop-filter: var(--pearl-blur);
  backdrop-filter: var(--pearl-blur);
}
.breadcrumb {
  color: var(--ink);
  font-weight: 550;
}
.demo-badge {
  background: var(--web-panel);
  border-color: var(--web-line);
  border-radius: 7px;
}
.balance-pill {
  min-height: 33px;
  border-color: var(--pearl-edge);
  background: var(--pearl-reflection), var(--web-panel);
  box-shadow:
    inset 0 1px 0 var(--pearl-light),
    0 3px 10px #45416f0d;
}
.login-button {
  border-color: var(--pearl-edge);
  background: var(--web-panel);
  box-shadow: inset 0 1px 0 var(--pearl-facet);
}
.conversation {
  padding-top: 24px;
  padding-bottom: 38px;
}
.welcome {
  padding: 20px 0 22px;
}
.welcome-jewel {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin-bottom: 25px;
  border-radius: 26px;
  transform: rotate(-10deg);
  border: 1px solid var(--pearl-edge);
  background:
    radial-gradient(
      circle at var(--light-x, 22%) var(--light-y, 10%),
      var(--pearl-light),
      transparent 67%
    ),
    linear-gradient(135deg, #ffffff36, #ccc1f444 47%, #b1d7ea55);
  box-shadow:
    0 17px 30px -14px #8174af80,
    inset 2px 3px 3px var(--pearl-light),
    inset -2px -3px 4px #8180b02b,
    inset 0 0 15px var(--pearl-facet);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.welcome-jewel span {
  display: block;
  transform: rotate(10deg);
  font-size: 59px;
  line-height: 1;
  background: linear-gradient(
    140deg,
    #bba9ff 12%,
    #6455d9 49%,
    #938cf5 68%,
    #c2b5ff
  );
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  filter: drop-shadow(0 3px 2px #5646a63d);
}
.welcome-jewel::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--pearl-facet);
  border-radius: 22px;
  pointer-events: none;
}
.welcome-eyebrow {
  margin-bottom: 14px;
  font-size: 11px;
  letter-spacing: 0.03em;
}
.welcome h1 {
  font-family: "Segoe UI Variable Display", "Segoe UI", sans-serif;
  font-size: clamp(34px, 3.4vw, 48px);
  font-weight: 650;
  letter-spacing: -1.7px;
  color: var(--pearl-title);
}
.welcome h1 span {
  background-image: linear-gradient(
    115deg,
    var(--pearl-title) 4%,
    var(--brand) 90%
  );
}
.welcome > p {
  font-size: 14px;
  line-height: 1.8;
  max-width: 430px;
  margin-top: 16px;
}
.suggestions {
  margin-top: 31px;
  gap: 12px;
}
.suggestion {
  position: relative;
  isolation: isolate;
  min-height: 114px;
  padding: 18px;
  gap: 16px;
  border-radius: 22px;
  border-color: var(--pearl-edge);
  background:
    radial-gradient(
      ellipse at var(--light-x, 30%) var(--light-y, 0%),
      var(--pearl-light),
      transparent 85%
    ),
    var(--web-panel);
  box-shadow: var(--web-shadow);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  font-size: 12px;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease;
}
.suggestion:hover {
  background-color: var(--web-panel);
  transform: translateY(-4px);
  box-shadow:
    var(--web-shadow),
    0 12px 23px -15px #7463ab70;
  border-color: var(--pearl-light);
}
.suggestion .icon {
  width: 23px;
  height: 23px;
  filter: drop-shadow(0 1px 1px #9b87cd30);
}
.welcome-bottom {
  margin-top: 24px;
}
.composer-zone {
  padding-bottom: 5px;
  width: min(100% - 48px, 800px);
}
.composer,
.studio-prompt {
  position: relative;
  isolation: isolate;
  border-color: var(--pearl-edge);
  border-radius: 27px;
  background:
    radial-gradient(
      ellipse at var(--light-x, 30%) var(--light-y, 0%),
      var(--pearl-light),
      transparent 74%
    ),
    var(--pearl-reflection), var(--web-panel);
  box-shadow:
    var(--web-shadow),
    0 20px 40px -28px #74639688;
  -webkit-backdrop-filter: var(--pearl-blur);
  backdrop-filter: var(--pearl-blur);
}
/* Inset reflection occupies only the rim, never an overlay over text or images. */
:is(
  .composer,
  .studio-prompt,
  .sidebar,
  .topbar,
  .card,
  .wallet-hero,
  .dialog
)::before {
  content: "";
  position: absolute;
  inset: 3px;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(
    132deg,
    var(--pearl-facet),
    transparent 30%,
    transparent 65%,
    var(--pearl-facet)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.composer:focus-within {
  border-color: color-mix(in srgb, var(--brand) 42%, var(--pearl-edge));
  box-shadow:
    var(--web-shadow),
    0 0 0 3px #9b87d31a;
}
.composer textarea {
  min-height: 52px;
  font-size: 15px;
}
.model-trigger {
  border: 1px solid var(--pearl-edge);
  background: var(--web-panel);
  box-shadow:
    inset 0 1px 0 var(--pearl-light),
    0 3px 9px #5d4b8a0a;
  border-radius: 14px;
  padding-inline: 11px;
}
.model-trigger:hover {
  background: var(--web-strong);
}
.icon-button {
  border-radius: 12px;
}
.send-button,
.primary-button {
  background: linear-gradient(145deg, #7460c2, #6455d9 58%, #5041b6);
  color: #fff;
  border: 1px solid #8b79e577;
  box-shadow:
    inset 0 1px 0 #ffffff70,
    inset 0 -1px 2px #2a197744,
    0 5px 14px -5px #6455d977;
}
.send-button {
  border-radius: 50%;
}
.send-button:hover,
.primary-button:hover {
  background: linear-gradient(145deg, #7c66c6, #6957ce 58%, #5b48c1);
  box-shadow:
    inset 0 1px 0 #ffffff70,
    0 6px 17px -5px #6455d98c;
}
.send-button:disabled,
.primary-button:disabled {
  background: var(--web-panel);
  border-color: var(--web-line);
  box-shadow: inset 0 1px 0 var(--pearl-light);
  color: var(--muted);
  opacity: 0.65;
}
.user-bubble {
  background: var(--pearl-reflection), var(--web-panel);
  border: 1px solid var(--pearl-edge);
  box-shadow: 0 4px 16px #45416f08;
  border-radius: 24px 24px 6px 24px;
}
.message-body {
  text-shadow: none;
}
.answer-code {
  background: color-mix(in srgb, var(--web-strong) 85%, transparent);
}
.jump-bottom {
  background: var(--web-strong);
  border: 1px solid var(--pearl-edge);
  box-shadow: var(--web-shadow);
  border-radius: 50%;
}
.page-scroll {
  padding-top: 32px;
}
.page-head h1 {
  letter-spacing: -1.1px;
}
.card,
.card.glass,
.wallet-hero {
  position: relative;
  isolation: isolate;
  border-color: var(--pearl-edge);
  border-radius: 25px;
  background:
    radial-gradient(
      ellipse at var(--light-x, 15%) var(--light-y, 0%),
      var(--pearl-facet),
      transparent 82%
    ),
    var(--pearl-reflection), var(--web-panel);
  box-shadow: var(--web-shadow);
  -webkit-backdrop-filter: var(--pearl-blur);
  backdrop-filter: var(--pearl-blur);
}
.wallet-hero {
  background-color: color-mix(in srgb, var(--brand) 7%, var(--web-panel));
}
.wallet-amount {
  font-size: 48px;
}
.secondary-button,
.preset-row button,
.method-row button,
.legal-card {
  border-color: var(--pearl-edge);
  background: var(--pearl-reflection), var(--web-panel);
  box-shadow:
    inset 0 1px 0 var(--pearl-light),
    0 4px 15px -10px #4b418b40;
}
.tabs {
  border-color: var(--pearl-edge);
  background: var(--web-panel);
  box-shadow: inset 0 1px 0 var(--pearl-light);
}
.art-card {
  border-color: var(--pearl-edge);
  border-radius: 25px;
  box-shadow: var(--web-shadow);
  background: var(--web-panel);
}
.art-meta {
  background: var(--pearl-reflection);
}
.studio-prompt select,
.count-control {
  border-color: var(--pearl-edge);
  background-color: var(--web-panel);
  box-shadow: inset 0 1px 0 var(--pearl-light);
}
.popover,
.dialog {
  background: var(--pearl-reflection), var(--web-strong);
  border-color: var(--pearl-edge);
  box-shadow:
    var(--web-shadow),
    0 25px 85px -25px #1a153b40;
  -webkit-backdrop-filter: blur(34px) saturate(160%);
  backdrop-filter: blur(34px) saturate(160%);
}
.popover {
  border-radius: var(--web-menu-radius);
}
.dialog {
  border-radius: var(--web-dialog-radius);
}
.dialog::backdrop {
  background: #1b203b38;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.dialog-head {
  border-color: var(--web-line);
}
.close-dialog {
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  box-shadow: none;
}
.close-dialog:hover {
  background: var(--soft);
}
.model-option {
  border-radius: 8px;
}
.model-option[aria-checked="true"] {
  background: var(--soft);
  box-shadow: none;
}
.field,
.search-field,
.amount-field,
.otp-example span {
  border-color: var(--web-line);
  background-color: var(--web-panel);
  box-shadow:
    inset 0 2px 5px #41406a08,
    0 1px 0 var(--pearl-light);
}
.toast {
  background: var(--web-strong);
  border-color: var(--pearl-edge);
  box-shadow: var(--web-shadow);
}
:root[data-theme="dark"] .primary-button,
:root[data-theme="dark"] .send-button {
  background: linear-gradient(145deg, #7460c2, #7061ce 65%, #5c50b2);
  border-color: #c6b8ff44;
  box-shadow:
    inset 0 1px 0 #ffffff55,
    0 5px 16px #0004;
}
:root[data-theme="dark"] .primary-button:hover,
:root[data-theme="dark"] .send-button:hover {
  background: linear-gradient(145deg, #7c66c6, #6957ce 65%, #5c50b2);
}
:root[data-theme="dark"] .primary-button:disabled,
:root[data-theme="dark"] .send-button:disabled {
  background: var(--web-panel);
  color: var(--muted);
  opacity: 0.6;
  box-shadow: inset 0 1px 0 var(--pearl-facet);
}
:root[data-theme="dark"] .welcome-jewel {
  background-color: #2b345a;
  box-shadow:
    0 15px 30px -15px #000b,
    inset 2px 3px 3px var(--pearl-facet),
    inset -2px -3px 4px #090e343b;
}
:root[data-theme="dark"] :is(.sidebar, .composer) {
  box-shadow: var(--web-shadow);
}
@media (max-width: 1100px) {
  .app-shell {
    padding: 12px;
    gap: 12px;
  }
  .sidebar {
    flex-basis: 236px;
    width: 236px;
    padding: 22px 12px 12px;
  }
  .sidebar-collapsed .sidebar {
    margin-right: -248px;
  }
  .topbar {
    padding: 0 18px;
  }
  .suggestions {
    margin-top: 26px;
    gap: 10px;
  }
  .suggestion {
    min-height: 86px;
    padding: 15px;
    gap: 10px;
  }
  .welcome-jewel {
    width: 64px;
    height: 64px;
    border-radius: 23px;
    margin-bottom: 20px;
  }
  .welcome-jewel span {
    font-size: 50px;
  }
  .welcome-jewel::after {
    border-radius: 19px;
  }
  .welcome h1 {
    font-size: 36px;
  }
}
@media (max-width: 760px) {
  .app-shell {
    padding: 0;
    gap: 0;
  }
  .sidebar {
    top: 10px;
    left: 10px;
    bottom: 10px;
    height: calc(var(--app-height) - 20px);
    width: 280px;
    max-width: calc(100vw - 32px);
    padding: 23px 16px 16px;
    transform: translateX(calc(-100% - 22px));
    background: var(--pearl-reflection), var(--web-strong);
    border-radius: 26px;
  }
  .sidebar-collapsed .sidebar {
    margin-right: 0;
    transform: translateX(calc(-100% - 22px));
  }
  .drawer-open .sidebar {
    transform: translateX(0);
  }
  .topbar {
    height: 57px;
    flex-basis: 57px;
    width: calc(100% - 20px);
    margin: 10px 10px 0;
    padding: 0 12px;
    border-radius: 20px;
    gap: 8px;
  }
  .topbar-left,
  .topbar-right {
    gap: 8px;
  }
  .breadcrumb {
    font-size: 12px;
  }
  .balance-pill {
    padding: 5px 9px;
    font-size: 11px;
  }
  .login-button {
    padding: 7px 9px;
    font-size: 11px;
  }
  .conversation {
    padding: 20px 20px 28px;
  }
  .welcome {
    padding: 20px 0;
  }
  .welcome h1 {
    font-size: 34px;
    letter-spacing: -1.2px;
  }
  .welcome > p {
    font-size: 12px;
    max-width: 330px;
    line-height: 1.75;
  }
  .welcome-jewel {
    width: 58px;
    height: 58px;
    border-radius: 21px;
    margin-bottom: 22px;
  }
  .welcome-jewel span {
    font-size: 45px;
  }
  .welcome-jewel::after {
    border-radius: 17px;
  }
  .welcome-eyebrow {
    font-size: 10px;
  }
  .suggestions {
    gap: 10px;
    margin-top: 24px;
  }
  .suggestion {
    border-radius: 19px;
    min-height: 89px;
    padding: 15px;
    font-size: 11px;
  }
  .suggestion .icon {
    width: 20px;
    height: 20px;
  }
  .welcome-bottom {
    margin-top: 22px;
    font-size: 9px;
  }
  .composer-zone {
    width: calc(100% - 20px);
    padding-bottom: max(7px, env(safe-area-inset-bottom));
  }
  .composer {
    border-radius: 24px;
    padding: 13px 12px 10px;
  }
  .composer textarea {
    min-height: 43px;
    font-size: 16px;
  }
  .composer-note {
    font-size: 9px;
  }
  .model-trigger {
    padding-inline: 8px;
  }
  .page-scroll {
    padding: 26px 16px 32px;
  }
  .studio-prompt {
    border-radius: 24px;
  }
  .card,
  .wallet-hero,
  .art-card {
    border-radius: 22px;
  }
  .wallet-amount {
    font-size: 42px;
  }
  .dialog {
    border-radius: 26px;
  }
  .ambient::before {
    background-size: auto 100%;
    opacity: 0.45;
  }
}
@media (max-height: 720px) and (min-width: 761px) {
  .welcome-jewel {
    width: 52px;
    height: 52px;
    margin-bottom: 15px;
    border-radius: 18px;
  }
  .welcome-jewel::after {
    border-radius: 14px;
  }
  .welcome-jewel span {
    font-size: 40px;
  }
  .welcome {
    padding-block: 12px;
  }
  .suggestions {
    margin-top: 23px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .suggestion:hover,
  .new-chat:hover {
    transform: none;
  }
}
@media (prefers-reduced-transparency: reduce) {
  /* Clear is an explicit in-app choice; balanced increases surface opacity. */
  :root:not([data-glass="clear"]) {
    --web-panel: rgb(250 251 255 / 65%);
    --web-sidebar: rgb(242 245 254 / 72%);
  }
  :root[data-theme="dark"]:not([data-glass="clear"]) {
    --web-panel: rgb(35 42 64 / 72%);
    --web-sidebar: rgb(33 39 59 / 78%);
  }
}
@supports not (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  .sidebar,
  .composer,
  .studio-prompt,
  .topbar,
  .card,
  .popover,
  .dialog {
    background-color: var(--web-strong);
  }
}

/* Contour edition: fine moving lines and clearer, lighter glass. */
:root {
  --pearl-blur: blur(9px) saturate(130%);
  --web-panel: rgb(255 255 255 / 25%);
  --web-sidebar: rgb(247 248 255 / 29%);
}
:root[data-theme="dark"] {
  --web-panel: rgb(46 53 79 / 24%);
  --web-sidebar: rgb(36 42 65 / 29%);
}
body,
.brand,
.welcome h1 {
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}
.ambient::before {
  inset: -12%;
  background-image: url("/site/_static/b8874a87ef5cfd138c059814f2e2aa79/web/assets/contours.svg");
  background-size: cover;
  opacity: 0.5;
  animation: contour-drift 42s ease-in-out infinite alternate;
  will-change: transform;
}
:root[data-theme="dark"] .ambient::before {
  opacity: 0.48;
}
.ambient::after {
  opacity: 0.65;
}
@keyframes contour-drift {
  from {
    transform: translate3d(-1.5%, -1%, 0) scale(1.03);
  }
  to {
    transform: translate3d(1.5%, 1%, 0) scale(1.07);
  }
}
.brand-mark {
  color: transparent;
  font-size: 0;
  background-image: url("/site/_static/b8874a87ef5cfd138c059814f2e2aa79/web/assets/nexora-mark.svg"), var(--pearl-reflection);
  background-size:
    25px 25px,
    auto;
  background-position: center;
  background-repeat: no-repeat;
}
.welcome-jewel span {
  width: 54px;
  height: 54px;
  font-size: 0;
  color: transparent;
  background: url("/site/_static/b8874a87ef5cfd138c059814f2e2aa79/web/assets/nexora-mark.svg") center / contain no-repeat;
  background-clip: border-box;
  -webkit-background-clip: border-box;
}
.sidebar,
.topbar,
.composer,
.studio-prompt,
.card,
.card.glass,
.wallet-hero,
.suggestion,
.popover,
.dialog {
  -webkit-backdrop-filter: var(--pearl-blur);
  backdrop-filter: var(--pearl-blur);
}
.dialog::backdrop {
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.popover.model-menu {
  min-width: 268px;
  max-width: min(290px, calc(100vw - 20px));
  padding: 5px;
  border-radius: var(--web-menu-radius);
  background:
    linear-gradient(140deg, #ffffff45, #ffffff0d), rgb(246 248 255 / 75%);
  -webkit-backdrop-filter: blur(8px) saturate(145%);
  backdrop-filter: blur(8px) saturate(145%);
}
:root[data-theme="dark"] .popover.model-menu {
  background:
    linear-gradient(140deg, #dbe3ff19, #ffffff02), rgb(24 30 48 / 78%);
}
.model-menu .model-group {
  padding: 5px 10px 2px;
  font-size: 9px;
}
.model-menu .model-option {
  min-height: 47px;
  gap: 8px;
  padding: 6px 9px;
}
.model-menu .model-option small {
  font-size: 10px;
  line-height: 1.3;
  margin-top: 1px;
}
.model-menu .model-option strong {
  font-size: 12px;
}
@media (max-width: 760px) {
  .sidebar {
    -webkit-backdrop-filter: var(--pearl-blur);
    backdrop-filter: var(--pearl-blur);
  }
  .popover.model-menu {
    min-width: 0;
    width: min(278px, calc(100vw - 20px));
  }
  .welcome-jewel span {
    width: 42px;
    height: 42px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ambient::before {
    animation: none;
    will-change: auto;
  }
}
@media (prefers-reduced-transparency: reduce) {
  :root:not([data-glass="clear"]) {
    --web-panel: rgb(250 251 255 / 43%);
    --web-sidebar: rgb(242 245 254 / 50%);
  }
  :root[data-theme="dark"]:not([data-glass="clear"]) {
    --web-panel: rgb(35 42 64 / 53%);
    --web-sidebar: rgb(33 39 59 / 58%);
  }
  :root:not([data-glass="clear"]) .popover.model-menu {
    background: rgb(250 251 255 / 86%);
  }
  :root[data-theme="dark"]:not([data-glass="clear"]) .popover.model-menu {
    background: rgb(25 30 47 / 86%);
  }
}

/* Dark topography edition. This is the only active browser appearance. */
:root[data-theme="dark"] {
  --web-page: #0b0f18;
  --web-panel: rgb(23 29 45 / 14%);
  --web-sidebar: rgb(18 24 38 / 20%);
  --web-strong: rgb(18 24 39 / 62%);
  --web-line: rgb(192 200 232 / 13%);
  --pearl-edge: rgb(209 219 255 / 15%);
  --pearl-light: rgb(217 232 255 / 6%);
  --pearl-facet: rgb(212 227 255 / 5%);
  --pearl-reflection: linear-gradient(
    132deg,
    #c3d5ff07,
    #c3d5ff00 45%,
    #869ee505
  );
  --pearl-blur: blur(3px) saturate(115%);
  --web-shadow: 0 14px 38px -24px #0008, inset 0 1px 0 #e2e9ff12;
}
:root[data-theme="dark"][data-glass="clear"] {
  --web-panel: rgb(23 29 45 / 7%);
  --web-sidebar: rgb(18 24 38 / 12%);
}
:root[data-theme="dark"] .ambient {
  background:
    radial-gradient(ellipse at 8% 10%, #6455d912, transparent 50%),
    radial-gradient(ellipse at 95% 90%, #326f8e14, transparent 50%),
    var(--web-page);
}
:root[data-theme="dark"] .ambient::before {
  animation: none;
  transform: none;
  will-change: auto;
  opacity: 0.06;
}
:root[data-theme="dark"] .ambient[data-topography="ready"]::before {
  opacity: 0;
}
.ambient::after {
  display: none;
}
.ambient canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
:root[data-theme="dark"]
  :is(
    .sidebar,
    .topbar,
    .composer,
    .studio-prompt,
    .card.glass,
    .wallet-hero,
    .suggestion
  ) {
  background: var(--pearl-reflection), var(--web-panel);
  -webkit-backdrop-filter: var(--pearl-blur);
  backdrop-filter: var(--pearl-blur);
}
:root[data-theme="dark"] .sidebar {
  background: var(--pearl-reflection), var(--web-sidebar);
}
:root[data-theme="dark"] .composer:focus-within {
  background: var(--pearl-reflection), var(--web-panel);
  box-shadow:
    var(--web-shadow),
    0 0 0 2px #a899ed14;
}
:root[data-theme="dark"] .popover.model-menu {
  background:
    linear-gradient(140deg, #dbe3ff09, #ffffff00), rgb(17 23 38 / 58%);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
:root[data-theme="dark"] .dialog {
  background: rgb(17 23 38 / 56%);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
:root[data-theme="dark"] .dialog.auth {
  background: rgb(17 23 38 / 43%);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
:root[data-theme="dark"]
  .dialog
  :is(.secondary-button, .primary-button, .auth-telegram) {
  border-radius: var(--web-choice-radius);
  box-shadow: none;
}
:root[data-theme="dark"] .dialog .primary-button {
  background: var(--brand);
  color: var(--web-page);
}
:root[data-theme="dark"] .dialog .primary-button:hover {
  background: var(--brand-deep);
}
.dialog .demo-notice {
  background: var(--web-panel);
  border-radius: var(--web-choice-radius);
  line-height: 1.6;
}
@media (max-width: 600px) {
  .dialog-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .dialog-footer > :is(button, a) {
    max-width: 100%;
    white-space: normal;
  }
}
:root[data-theme="dark"] .dialog::backdrop {
  background: rgb(3 5 13 / 46%);
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
}
:root[data-theme="dark"]
  :is(.field, .search-field, .amount-field, .studio-prompt select) {
  background-color: rgb(14 19 31 / 20%);
}
.message-body,
.favorite-body.answer-rich {
  line-height: 1.55;
}
.answer-rich p {
  margin-bottom: 7px;
}
.answer-rich :is(ul, ol) {
  margin-block: 8px;
}
.answer-rich li {
  margin-block: 3px;
}
.answer-rich h3 {
  margin-block: 15px 7px;
}
.answer-rich h3:first-child {
  margin-top: 0;
}
.answer-code pre {
  line-height: 1.5;
}
@media (prefers-reduced-transparency: reduce) {
  :root[data-theme="dark"]:not([data-glass="clear"]) {
    --web-panel: rgb(23 29 45 / 30%);
    --web-sidebar: rgb(18 24 38 / 36%);
  }
  :root[data-theme="dark"]:not([data-glass="clear"]) .popover.model-menu {
    background: rgb(17 23 38 / 76%);
  }
  :root[data-theme="dark"]:not([data-glass="clear"]) .dialog.auth {
    background-color: rgb(17 23 38 / 58%);
  }
}
@supports not (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  :root[data-theme="dark"] :is(.dialog, .dialog.auth, .popover.model-menu) {
    background-color: rgb(17 23 38 / 90%);
  }
}
:root[data-theme="dark"] .glass {
  -webkit-backdrop-filter: var(--pearl-blur);
  backdrop-filter: var(--pearl-blur);
}
:root[data-theme="dark"] .welcome-jewel {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* Selected glass N, concept 4. One alpha asset at every branded size. */
.brand-mark.nexora-mark,
.welcome-jewel .nexora-mark {
  font-size: 0;
  color: transparent;
  background: url("/site/_static/b8874a87ef5cfd138c059814f2e2aa79/web/assets/nexora-glass-n-v4.png") center / contain no-repeat;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  transform: none;
}
:root[data-theme="dark"] .welcome-jewel {
  transform: none;
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.welcome-jewel::after {
  display: none;
}
.welcome-jewel .nexora-mark {
  width: 100%;
  height: 100%;
  filter: none;
}
.brand-mark:not(.nexora-mark) {
  background-image: var(--pearl-reflection);
}
.sidebar-head .brand {
  font-weight: 500;
  letter-spacing: -0.6px;
}
.sidebar-head .brand em {
  color: inherit;
}

/* Let the site's contours continue through the chat list without a dark slab. */
:root[data-theme="dark"] .app-shell .sidebar {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.sidebar-history { background: transparent; box-shadow: none; }
@media (prefers-reduced-motion: no-preference) {
  :root[data-theme="dark"] .ambient[data-topography="fallback"]::before {
    animation: contour-drift 24s ease-in-out infinite alternate;
    will-change: transform;
  }
  .ambient[data-motion="paused"]::before { animation-play-state: paused; }
}