/* v49: structured Nothing-inspired canvases and compact mobile navigation */

html[data-background="prism-mono"] {
  color-scheme: light;
  --md-sys-color-background: #edf0ec;
  --md-sys-color-on-background: #202421;
  --md-sys-color-surface: #edf0ec;
  --md-sys-color-on-surface: #202421;
  --md-sys-color-surface-container-lowest: #faf9f5;
  --md-sys-color-surface-container-low: #f1f0eb;
  --md-sys-color-surface-container: #e9ebe7;
  --md-sys-color-surface-container-high: #e3e7e4;
  --md-sys-color-surface-container-highest: #dbe0dd;
  --md-sys-color-on-surface-variant: #59615e;
  --md-sys-color-outline: #77817d;
  --md-sys-color-outline-variant: #c5cdca;
}

html[data-background="night-blue"] {
  color-scheme: dark;
  --md-sys-color-background: #171615;
  --md-sys-color-on-background: #f4f0e8;
  --md-sys-color-surface: #171615;
  --md-sys-color-on-surface: #f4f0e8;
  --md-sys-color-surface-container-lowest: #1c1a18;
  --md-sys-color-surface-container-low: #211f1d;
  --md-sys-color-surface-container: #292623;
  --md-sys-color-surface-container-high: #312e2a;
  --md-sys-color-surface-container-highest: #3a3632;
  --md-sys-color-on-surface-variant: #cec6bc;
  --md-sys-color-outline: #9a9288;
  --md-sys-color-outline-variant: #48423c;
}

html[data-background="prism-violet"] {
  color-scheme: dark;
  --md-sys-color-background: #0d131d;
  --md-sys-color-on-background: #eef2f6;
  --md-sys-color-surface: #0d131d;
  --md-sys-color-on-surface: #eef2f6;
  --md-sys-color-surface-container-lowest: #121924;
  --md-sys-color-surface-container-low: #171f2b;
  --md-sys-color-surface-container: #1d2633;
  --md-sys-color-surface-container-high: #252f3d;
  --md-sys-color-surface-container-highest: #2d3847;
  --md-sys-color-on-surface-variant: #c6cdd7;
  --md-sys-color-outline: #929cab;
  --md-sys-color-outline-variant: #404b5b;
}

html[data-background="plain"] body {
  background: #f8f5ee !important;
}

html[data-background="night-blue"] body {
  background: #171615 !important;
}

html[data-background="prism-mono"] body {
  background:
    radial-gradient(ellipse 38% 68% at 82% 10%, rgb(255 255 255 / 88%) 0 24%, transparent 72%),
    radial-gradient(ellipse 45% 60% at 1% 76%, rgb(117 158 153 / 19%), transparent 72%),
    radial-gradient(ellipse 36% 46% at 59% 96%, rgb(151 137 184 / 13%), transparent 74%),
    linear-gradient(112deg, transparent 0 35%, rgb(128 157 174 / 12%) 48%, transparent 67%),
    linear-gradient(180deg, #f4f3ee 0%, #e7ebe7 100%) !important;
}

html[data-background="prism-violet"] body {
  background:
    radial-gradient(ellipse 43% 66% at 80% 13%, rgb(88 113 190 / 27%) 0 10%, transparent 70%),
    radial-gradient(ellipse 48% 58% at 5% 79%, rgb(24 133 120 / 18%), transparent 72%),
    radial-gradient(ellipse 37% 50% at 55% 98%, rgb(102 65 169 / 19%), transparent 75%),
    linear-gradient(112deg, transparent 0 35%, rgb(89 109 162 / 17%) 48%, transparent 66%),
    linear-gradient(180deg, #111a28 0%, #091019 100%) !important;
}

html[data-background="plain"] body::before,
html[data-background="plain"] body::after,
html[data-background="night-blue"] body::before,
html[data-background="night-blue"] body::after {
  content: none !important;
}

html[data-background="prism-mono"] body::before,
html[data-background="prism-violet"] body::before,
html[data-background="prism-mono"] body::after,
html[data-background="prism-violet"] body::after {
  content: "" !important;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
}

/* Narrow highlights and shadows describe ribbed glass without blurring the UI. */
html[data-background="prism-mono"] body::before {
  opacity: .72 !important;
  background: repeating-linear-gradient(
    90deg,
    rgb(69 83 87 / 11%) 0 1px,
    rgb(255 255 255 / 25%) 1px 3px,
    transparent 3px 11px,
    rgb(255 255 255 / 39%) 11px 13px,
    transparent 13px 22px,
    rgb(96 111 115 / 8%) 22px 23px,
    transparent 23px 28px
  ) !important;
}

html[data-background="prism-violet"] body::before {
  opacity: .74 !important;
  background: repeating-linear-gradient(
    90deg,
    rgb(129 151 204 / 15%) 0 1px,
    rgb(180 196 228 / 7%) 1px 3px,
    transparent 3px 11px,
    rgb(92 119 175 / 13%) 11px 13px,
    transparent 13px 22px,
    rgb(39 190 169 / 6%) 22px 23px,
    transparent 23px 28px
  ) !important;
}

/* Uneven light curtains give the canvas a focal composition instead of wallpaper repetition. */
html[data-background="prism-mono"] body::after {
  opacity: .58 !important;
  background:
    linear-gradient(90deg, transparent 0 9%, rgb(255 255 255 / 25%) 9% 19%, transparent 19% 39%, rgb(112 146 158 / 8%) 39% 52%, transparent 52% 77%, rgb(255 255 255 / 35%) 77% 91%, transparent 91%),
    radial-gradient(ellipse 24% 76% at 72% 24%, rgb(255 255 255 / 34%), transparent 73%),
    radial-gradient(ellipse 18% 54% at 18% 70%, rgb(132 174 163 / 12%), transparent 74%);
}

html[data-background="prism-violet"] body::after {
  opacity: .65 !important;
  background:
    linear-gradient(90deg, transparent 0 8%, rgb(32 121 129 / 9%) 8% 19%, transparent 19% 39%, rgb(91 77 158 / 12%) 39% 53%, transparent 53% 75%, rgb(99 127 196 / 14%) 75% 91%, transparent 91%),
    radial-gradient(ellipse 25% 74% at 73% 25%, rgb(109 130 211 / 17%), transparent 72%),
    radial-gradient(ellipse 19% 58% at 17% 74%, rgb(25 163 145 / 10%), transparent 75%);
}

html[data-background="prism-mono"] body > *,
html[data-background="prism-violet"] body > * {
  position: relative;
  z-index: 1;
}

/* The theme is an ambient canvas, never a blur layer over the existing UI. */
html[data-background="prism-mono"] :is(.topbar, .show-card, .stat, .mobile-bottom-nav),
html[data-background="prism-violet"] :is(.topbar, .show-card, .stat, .mobile-bottom-nav) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.background-preview-plain { background: #f8f5ee !important; }
.background-preview-night { background: #171615 !important; }
.background-preview-mono {
  background:
    repeating-linear-gradient(90deg, rgb(66 81 85 / 16%) 0 1px, rgb(255 255 255 / 32%) 1px 3px, transparent 3px 8px),
    radial-gradient(circle at 75% 22%, #fff 0 12%, transparent 45%),
    linear-gradient(145deg, #f5f3ed, #dce4e0) !important;
}
.background-preview-violet {
  background:
    repeating-linear-gradient(90deg, rgb(126 151 209 / 20%) 0 1px, transparent 1px 7px),
    radial-gradient(circle at 72% 24%, rgb(102 122 202 / 55%), transparent 40%),
    linear-gradient(145deg, #162438, #091019) !important;
}

.avatar-options button {
  min-height: 92px !important;
  gap: 0 !important;
}

@media (max-width: 719px) {
  :root { --mobile-bottom-nav-height: 42px; }
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom)) !important; }

  /* A smaller screen needs a tighter, slightly stronger focal field. */
  html[data-background="prism-mono"] body {
    background:
      radial-gradient(ellipse 62% 48% at 88% 8%, rgb(255 255 255 / 94%) 0 20%, transparent 72%),
      radial-gradient(ellipse 58% 52% at 0% 69%, rgb(108 158 150 / 23%), transparent 72%),
      radial-gradient(ellipse 50% 38% at 72% 97%, rgb(149 132 185 / 17%), transparent 74%),
      linear-gradient(180deg, #f3f2ec 0%, #e4e9e5 100%) !important;
  }
  html[data-background="prism-violet"] body {
    background:
      radial-gradient(ellipse 70% 50% at 88% 10%, rgb(87 111 194 / 34%) 0 7%, transparent 70%),
      radial-gradient(ellipse 62% 54% at 0% 73%, rgb(20 145 130 / 22%), transparent 72%),
      radial-gradient(ellipse 52% 42% at 65% 99%, rgb(107 66 178 / 23%), transparent 75%),
      linear-gradient(180deg, #101a29 0%, #081019 100%) !important;
  }
  html[data-background="prism-mono"] body::before,
  html[data-background="prism-violet"] body::before {
    opacity: .82 !important;
    background-size: 20px 100% !important;
  }
  html[data-background="prism-mono"] body::after,
  html[data-background="prism-violet"] body::after {
    opacity: .76 !important;
  }

  .avatar-options button { min-height: 84px !important; }

  .mobile-bottom-nav {
    left: 10px !important;
    right: 10px !important;
    bottom: calc(7px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 3px !important;
    gap: 3px !important;
    border: 1px solid var(--md-sys-color-outline-variant) !important;
    border-radius: 15px !important;
    background: var(--md-sys-color-surface-container-high) !important;
    box-shadow: 0 4px 14px rgb(0 0 0 / 13%) !important;
    transform: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .mobile-bottom-nav.is-scroll-hidden {
    opacity: 0 !important;
    transform: translateY(calc(100% + 22px)) !important;
  }
  .mobile-bottom-tab {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border-radius: 12px !important;
  }
  .mobile-tab-indicator {
    width: 100% !important;
    min-width: 0 !important;
    height: 36px !important;
    border-radius: 12px !important;
    background: transparent !important;
  }
  .mobile-bottom-tab.active .mobile-tab-indicator,
  .mobile-bottom-tab.is-active .mobile-tab-indicator,
  .mobile-bottom-tab[aria-selected="true"] .mobile-tab-indicator {
    color: var(--md-sys-color-on-primary-container) !important;
    background: var(--md-sys-color-primary-container) !important;
  }
  .mobile-tab-label { display: none !important; }
}