/*
 * Dant3 owner-approved 2026-08-28 command-center presentation layer.
 * Presentation only: no route, data, auth, payment, moderation or permission behavior.
 */

:root,
html:not([data-theme]),
html[data-theme="dark-alloy"] {
  --background: #07070b;
  --foreground: #f5f3fa;
  --card: #0d0e14;
  --card-foreground: #f5f3fa;
  --popover: #0b0c12;
  --popover-foreground: #f5f3fa;
  --primary: #9d4edd;
  --primary-foreground: #ffffff;
  --secondary: #17141f;
  --secondary-foreground: #f0ecf7;
  --muted: #14141c;
  --muted-foreground: #aaa5b6;
  --accent: #21152f;
  --accent-foreground: #faf7ff;
  --border: rgb(157 78 221 / 28%);
  --input: #101119;
  --ring: rgb(177 94 255 / 66%);
  --sidebar: #08090e;
  --sidebar-accent: #181020;
  --command-metal-edge: #888691;
  --command-metal-hi: #e8e7ed;
  --command-metal-low: #30313b;
  --command-panel: rgb(10 11 17 / 94%);
  --command-panel-soft: rgb(16 17 25 / 91%);
  --command-glow: rgb(157 78 221 / 38%);
  --command-glow-strong: rgb(177 94 255 / 62%);
}

html[data-theme="dark-midnight"] {
  --primary: #4f6fff;
  --accent: #111c38;
  --border: rgb(79 111 255 / 26%);
  --ring: rgb(79 111 255 / 62%);
  --command-glow: rgb(79 111 255 / 34%);
  --command-glow-strong: rgb(90 128 255 / 58%);
}

html[data-theme="dark-ember"] {
  --primary: #ff654f;
  --accent: #321917;
  --border: rgb(255 101 79 / 27%);
  --ring: rgb(255 101 79 / 60%);
  --command-glow: rgb(255 101 79 / 31%);
  --command-glow-strong: rgb(255 117 88 / 54%);
}

html[data-theme="light-silver"] {
  --background: #f4f2f7;
  --foreground: #17141d;
  --card: #fbfaff;
  --card-foreground: #17141d;
  --popover: #ffffff;
  --popover-foreground: #17141d;
  --primary: #7137bd;
  --primary-foreground: #ffffff;
  --secondary: #eae5f1;
  --secondary-foreground: #211b2b;
  --muted: #ebe8ef;
  --muted-foreground: #655e70;
  --accent: #e4daf0;
  --accent-foreground: #24162f;
  --border: rgb(82 70 96 / 24%);
  --input: #ffffff;
  --ring: rgb(113 55 189 / 48%);
  --sidebar: #f0edf4;
  --sidebar-accent: #e2daeb;
  --command-metal-edge: #8f8b96;
  --command-metal-hi: #ffffff;
  --command-metal-low: #cbc7d0;
  --command-panel: rgb(255 255 255 / 94%);
  --command-panel-soft: rgb(246 243 249 / 94%);
  --command-glow: rgb(113 55 189 / 18%);
  --command-glow-strong: rgb(113 55 189 / 28%);
}

html[data-theme="light-pearl"] {
  --primary: #315fd3;
  --accent: #dce6fb;
  --ring: rgb(49 95 211 / 45%);
  --command-glow: rgb(49 95 211 / 18%);
  --command-glow-strong: rgb(49 95 211 / 28%);
}

html[data-theme="light-frost"] {
  --primary: #087fba;
  --accent: #d8f0f8;
  --ring: rgb(8 127 186 / 44%);
  --command-glow: rgb(8 127 186 / 17%);
  --command-glow-strong: rgb(8 127 186 / 27%);
}

html,
body {
  background:
    radial-gradient(circle at 78% -14%, var(--command-glow), transparent 28rem),
    linear-gradient(145deg, color-mix(in srgb, var(--background) 97%, var(--primary) 3%), var(--background));
}

.ti-shell {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(90deg, transparent 0 99%, color-mix(in srgb, var(--primary) 8%, transparent) 100%),
    var(--background);
}

.ti-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.36;
  background-image:
    linear-gradient(color-mix(in srgb, var(--command-metal-edge) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--command-metal-edge) 7%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
}

.metal-header {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--command-metal-hi) 8%, var(--command-panel)), var(--command-panel) 32%, color-mix(in srgb, var(--primary) 5%, var(--command-panel)));
  border-color: color-mix(in srgb, var(--primary) 38%, var(--command-metal-edge));
  box-shadow:
    inset 0 -1px 0 color-mix(in srgb, var(--command-metal-hi) 18%, transparent),
    0 7px 22px rgb(0 0 0 / 28%),
    0 0 18px var(--command-glow);
  backdrop-filter: blur(18px) saturate(125%);
}

.metal-panel,
.surface-card,
.ti-panel,
.ti-panel-soft,
.ti-drawer,
[data-slot="card"] {
  border-radius: 6px !important;
  border-color: color-mix(in srgb, var(--primary) 27%, var(--command-metal-edge)) !important;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--command-metal-hi) 5%, var(--command-panel)) 0%, var(--command-panel) 34%, color-mix(in srgb, var(--primary) 3%, var(--command-panel)) 100%) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--command-metal-hi) 13%, transparent),
    inset 1px 0 0 color-mix(in srgb, var(--command-metal-hi) 5%, transparent),
    0 12px 28px rgb(0 0 0 / 18%),
    0 0 12px color-mix(in srgb, var(--command-glow) 48%, transparent);
}

.metal-panel,
.surface-card,
.ti-panel {
  clip-path: polygon(0 7px, 7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px));
}

.ti-sidebar {
  border-right: 1px solid color-mix(in srgb, var(--primary) 30%, var(--command-metal-edge));
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 3%, var(--sidebar)), var(--sidebar));
  box-shadow: 8px 0 22px rgb(0 0 0 / 12%);
}

.ti-sidebar nav a,
.ti-drawer nav a {
  border-radius: 4px !important;
}

.ti-sidebar nav a[aria-current="page"],
.ti-drawer nav a[aria-current="page"] {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--command-metal-edge));
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 18%, transparent), color-mix(in srgb, var(--primary) 4%, transparent));
  box-shadow: inset 3px 0 0 var(--primary), 0 0 12px var(--command-glow);
}

.metal-button,
button.bg-primary,
a.bg-primary {
  border-radius: 4px !important;
  border: 1px solid color-mix(in srgb, var(--command-metal-hi) 24%, var(--primary));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--primary) 88%, white 12%), color-mix(in srgb, var(--primary) 82%, black 18%)) !important;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 22%),
    0 0 13px var(--command-glow);
}

input,
textarea,
select,
[role="combobox"] {
  border-radius: 4px !important;
}

.ti-icon-button,
.ti-account-avatar-button,
.ti-chip {
  border-radius: 4px !important;
}

.ti-bottom-nav {
  border-top-color: color-mix(in srgb, var(--primary) 35%, var(--command-metal-edge));
  background: color-mix(in srgb, var(--command-panel) 94%, transparent);
  box-shadow: 0 -8px 22px rgb(0 0 0 / 18%), 0 -1px 14px var(--command-glow);
  backdrop-filter: blur(18px);
}

.dant3-product-mark {
  display: block;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--primary) 38%, var(--command-metal-edge));
  background: #06060a;
  box-shadow: 0 0 18px var(--command-glow);
}

.dant3-product-mark > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

::selection {
  background: color-mix(in srgb, var(--primary) 42%, transparent);
  color: var(--foreground);
}

@media (max-width: 767px) {
  .ti-shell::before {
    opacity: 0.18;
    background-size: 64px 64px;
  }

  .metal-header,
  .metal-panel,
  .surface-card,
  .ti-panel,
  .ti-panel-soft,
  .ti-drawer,
  [data-slot="card"] {
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--command-metal-hi) 9%, transparent), 0 6px 16px rgb(0 0 0 / 12%);
  }

  .metal-panel,
  .surface-card,
  .ti-panel {
    clip-path: none;
    border-radius: 5px !important;
  }

  .dant3-product-mark {
    box-shadow: 0 0 9px color-mix(in srgb, var(--command-glow) 55%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}

/* Phase 1 acquisition-density overrides.
 * Keep the full desktop network desk while making the mobile Feed content-first.
 */

@media (max-width: 767px) {
  section[aria-labelledby="network-signal"] {
    padding: 0.875rem !important;
    clip-path: none !important;
  }

  section[aria-labelledby="network-signal"] > div {
    gap: 0.75rem !important;
  }

  #network-signal {
    margin-top: 0.25rem !important;
    font-size: 1.75rem !important;
    line-height: 2rem !important;
  }

  section[aria-labelledby="network-signal"] #network-signal + p {
    margin-top: 0.4rem !important;
    font-size: 0.75rem !important;
    line-height: 1.2rem !important;
  }

  section[aria-labelledby="network-signal"] #network-signal + p + div {
    margin-top: 0.65rem !important;
  }

  /* The four-window network dashboard duplicates information already available
   * from Discover and the side/network desks. On mobile, lead with conversation.
   */
  section[aria-label="Dant3 network overview"] {
    display: none !important;
  }

  /* Preserve the private-room upsell/privacy signal, but do not make users scroll
   * through two synthetic placeholder cards before reaching public conversation.
   */
  section[aria-labelledby="private-signal-preview"] {
    margin-top: 0.65rem !important;
    padding: 0.75rem !important;
    clip-path: none !important;
  }

  section[aria-labelledby="private-signal-preview"] > div {
    gap: 0.5rem !important;
  }

  section[aria-labelledby="private-signal-preview"]
    [aria-label="Synthetic blurred private message previews"],
  section[aria-labelledby="private-signal-preview"] > p:last-child {
    display: none !important;
  }

  section[aria-labelledby="private-signal-preview"] h2 {
    margin-top: 0.25rem !important;
    font-size: 1rem !important;
    line-height: 1.35rem !important;
  }

  section[aria-labelledby="private-signal-preview"] h2 + p {
    margin-top: 0.25rem !important;
    font-size: 0.7rem !important;
    line-height: 1.05rem !important;
  }

  section[aria-labelledby="private-signal-preview"] a[href="/pricing"] {
    margin-top: 0.5rem !important;
    padding: 0.4rem 0.65rem !important;
  }
}

/* The bundled Android WebView receives this marker at build time. Keep its
 * compositor workload deterministic: fixed page backgrounds and layered
 * backdrop filters can leave stale/duplicated tiles on foldables and during
 * scroll/resize transitions. This does not alter the browser build. */
html[data-dant3-mobile="true"],
html[data-dant3-mobile="true"] body,
html[data-dant3-mobile="true"] #root {
  min-height: 100%;
  background-color: var(--background);
}

html[data-dant3-mobile="true"] body {
  min-height: 100dvh;
  background-image: none !important;
  background-attachment: scroll !important;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
    env(safe-area-inset-left);
}

html[data-dant3-mobile="true"] .ti-shell {
  background: var(--background) !important;
}

html[data-dant3-mobile="true"] * {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-dant3-mobile="true"] [class~="h-screen"] {
  height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}

html[data-dant3-mobile="true"] [class~="min-h-screen"] {
  min-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}