/*
 * DANT3_REFERENCE_DESIGN_20260806
 *
 * Owner-approved visual layer based on the supplied desktop design reference.
 * This file is intentionally presentation-only: no auth, billing, Supabase,
 * agent, room, job, ad or upload behaviour is changed here.
 *
 * Dark themes: near-black + crimson/red.
 * Light themes: clean white + electric/cobalt blue.
 * Green is reserved for small success/online/verified signals.
 */

:root,
html[data-theme^="dark-"] {
  --radius: 0.52rem;
  --background: #08090b;
  --foreground: #f5f7fb;
  --card: #101216;
  --card-foreground: #f6f7fa;
  --popover: #0f1115;
  --popover-foreground: #f6f7fa;
  --primary: #ff304f;
  --primary-foreground: #ffffff;
  --secondary: #171a20;
  --secondary-foreground: #e8ebf1;
  --muted: #15181d;
  --muted-foreground: #9299a6;
  --accent: #2a1117;
  --accent-foreground: #ffffff;
  --ai: #5987ff;
  --ai-foreground: #ffffff;
  --lava: #ff493b;
  --lava-foreground: #ffffff;
  --destructive: #ff3d45;
  --destructive-foreground: #ffffff;
  --border: rgb(255 255 255 / 10%);
  --input: #111419;
  --ring: rgb(255 48 79 / 55%);
  --sidebar: #090a0d;
  --sidebar-foreground: #f0f2f6;
  --sidebar-primary: #ff304f;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #171a1f;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: rgb(255 255 255 / 9%);
  --sidebar-ring: rgb(255 48 79 / 55%);
  --metal-highlight: rgb(255 255 255 / 5%);
  --metal-mid: rgb(255 255 255 / 2%);
  --metal-shadow: rgb(0 0 0 / 60%);
  --metal-tint: rgb(255 48 79 / 6%);
  --gradient-dant3:
    radial-gradient(circle at 15% -18%, rgb(255 48 79 / 7%), transparent 31%),
    radial-gradient(circle at 86% 108%, rgb(255 73 59 / 4%), transparent 36%),
    linear-gradient(145deg, #0a0b0e 0%, #07080a 58%, #0d0e11 100%);
  --gradient-mint: linear-gradient(105deg, #ffffff 0%, #ff677d 48%, #ff304f 100%);
  --gradient-lava: linear-gradient(110deg, #ffb5aa 0%, #ff493b 58%, #c61d2f 100%);
  --metal-surface:
    linear-gradient(145deg, rgb(255 255 255 / 3%), transparent 24%),
    color-mix(in oklab, var(--card) 98%, transparent);
  --shadow-elegant:
    0 24px 60px -42px rgb(0 0 0 / 80%), inset 0 1px 0 rgb(255 255 255 / 4%), 0 0 0 1px var(--border);
  --shadow-glow: 0 12px 34px -24px rgb(255 48 79 / 70%), inset 0 1px 0 rgb(255 255 255 / 7%);
  --shadow-lava: 0 14px 36px -24px rgb(255 73 59 / 65%), inset 0 1px 0 rgb(255 255 255 / 6%);
}

html[data-theme="dark-midnight"] {
  --background: #07090d;
  --card: #0e1117;
  --popover: #0c0f14;
  --primary: #df2344;
  --secondary: #151922;
  --muted: #131720;
  --accent: #251019;
  --border: rgb(193 205 225 / 12%);
  --input: #10141b;
  --sidebar: #07090c;
  --sidebar-accent: #141821;
  --ring: rgb(223 35 68 / 55%);
}

html[data-theme="dark-ember"] {
  --background: #0c090a;
  --card: #151011;
  --popover: #120e0f;
  --primary: #ff493b;
  --secondary: #1d1718;
  --muted: #1a1415;
  --accent: #301414;
  --border: rgb(255 196 178 / 11%);
  --input: #171112;
  --sidebar: #0a0809;
  --sidebar-accent: #1b1415;
  --ring: rgb(255 73 59 / 55%);
}

html.light,
html[data-theme^="light-"] {
  --radius: 0.52rem;
  --background: #f5f7fb;
  --foreground: #161b24;
  --card: #ffffff;
  --card-foreground: #161b24;
  --popover: #ffffff;
  --popover-foreground: #161b24;
  --primary: #1769e0;
  --primary-foreground: #ffffff;
  --secondary: #edf2f8;
  --secondary-foreground: #202633;
  --muted: #eef2f7;
  --muted-foreground: #687284;
  --accent: #e9f1ff;
  --accent-foreground: #12284a;
  --ai: #6a4de8;
  --ai-foreground: #ffffff;
  --lava: #d94e3d;
  --lava-foreground: #ffffff;
  --destructive: #d93b47;
  --destructive-foreground: #ffffff;
  --border: rgb(34 50 74 / 13%);
  --input: #ffffff;
  --ring: rgb(23 105 224 / 45%);
  --sidebar: #fbfcfe;
  --sidebar-foreground: #202633;
  --sidebar-primary: #1769e0;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #edf3fb;
  --sidebar-accent-foreground: #14294a;
  --sidebar-border: rgb(34 50 74 / 11%);
  --sidebar-ring: rgb(23 105 224 / 45%);
  --metal-highlight: rgb(255 255 255 / 88%);
  --metal-mid: rgb(25 64 113 / 4%);
  --metal-shadow: rgb(28 44 68 / 22%);
  --metal-tint: rgb(23 105 224 / 5%);
  --gradient-dant3:
    radial-gradient(circle at 16% -18%, rgb(23 105 224 / 6%), transparent 31%),
    radial-gradient(circle at 88% 108%, rgb(53 139 255 / 4%), transparent 34%),
    linear-gradient(145deg, #ffffff 0%, #f5f7fb 58%, #f9fbfe 100%);
  --gradient-mint: linear-gradient(105deg, #0f1e34 0%, #1769e0 50%, #338cf8 100%);
  --gradient-lava: linear-gradient(110deg, #632b26 0%, #d94e3d 58%, #9f2833 100%);
  --metal-surface:
    linear-gradient(145deg, rgb(255 255 255 / 95%), transparent 24%),
    color-mix(in oklab, var(--card) 99%, transparent);
  --shadow-elegant:
    0 18px 44px -34px rgb(30 53 87 / 25%), inset 0 1px 0 rgb(255 255 255 / 95%),
    0 0 0 1px var(--border);
  --shadow-glow: 0 12px 32px -22px rgb(23 105 224 / 44%), inset 0 1px 0 white;
  --shadow-lava: 0 16px 36px -26px rgb(217 78 61 / 40%), inset 0 1px 0 white;
}

html[data-theme="light-pearl"] {
  --background: #fafbfe;
  --card: #ffffff;
  --popover: #ffffff;
  --primary: #2a6ccf;
  --secondary: #f0f3f8;
  --muted: #f1f4f8;
  --accent: #eaf1fc;
  --border: rgb(42 72 111 / 13%);
  --sidebar: #fcfdff;
  --sidebar-accent: #edf2f9;
  --ring: rgb(42 108 207 / 43%);
}

html[data-theme="light-frost"] {
  --background: #eef5ff;
  --card: #fafdff;
  --popover: #ffffff;
  --primary: #0d5ed7;
  --secondary: #e2edfb;
  --muted: #e6eff9;
  --accent: #dbe9ff;
  --border: rgb(13 65 126 / 14%);
  --sidebar: #f5f9ff;
  --sidebar-accent: #e6effb;
  --ring: rgb(13 94 215 / 43%);
}

html,
body {
  background: var(--background);
}

body {
  background-image:
    linear-gradient(color-mix(in oklab, var(--border) 22%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--border) 16%, transparent) 1px, transparent 1px);
  background-size: 36px 36px;
  background-attachment: fixed;
}

.ti-shell {
  min-height: 100vh;
  background:
    radial-gradient(
      circle at 78% 0%,
      color-mix(in oklab, var(--primary) 5%, transparent),
      transparent 27rem
    ),
    color-mix(in oklab, var(--background) 97%, transparent);
}

.ti-shell main#main {
  background-image: none !important;
}

.metal-header {
  border-color: var(--border) !important;
  background: color-mix(in oklab, var(--background) 91%, transparent) !important;
  box-shadow: 0 10px 32px -28px var(--metal-shadow);
  backdrop-filter: blur(18px) saturate(112%);
}

.dant3-logo {
  min-width: 2.75rem;
}

.dant3-official-logo {
  object-fit: contain;
  object-position: center;
  border: 1px solid color-mix(in oklab, var(--border) 78%, transparent);
  border-radius: 0.45rem;
  padding: 2px;
  box-shadow: 0 7px 22px -16px var(--metal-shadow);
  transition:
    filter 160ms ease,
    border-color 160ms ease,
    background-color 160ms ease;
}

/* The shared component always renders the one locked canonical artwork. */
html[data-theme^="dark-"] .dant3-official-logo,
html.dark:not([data-theme]) .dant3-official-logo {
  content: normal !important;
  background: #08090b;
  border-color: color-mix(in oklab, var(--primary) 34%, var(--border));
  filter: drop-shadow(0 0 7px rgb(255 48 79 / 42%)) drop-shadow(0 10px 18px rgb(180 0 34 / 26%));
}

html[data-theme^="light-"] .dant3-official-logo,
html.light .dant3-official-logo {
  content: normal !important;
  background: #f5f3ee;
  border-color: color-mix(in oklab, var(--border) 78%, transparent);
  filter: none;
}

.ti-sidebar {
  border-color: var(--sidebar-border) !important;
  background: color-mix(in oklab, var(--sidebar) 97%, transparent) !important;
  box-shadow: 10px 0 32px -30px var(--metal-shadow);
}

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

.ti-sidebar nav a:hover,
.ti-drawer nav a:hover {
  background: color-mix(in oklab, var(--primary) 7%, var(--muted)) !important;
}

.ti-sidebar nav a[aria-current="page"],
.ti-drawer nav a[aria-current="page"] {
  border-color: color-mix(in oklab, var(--primary) 31%, var(--border)) !important;
  background: color-mix(in oklab, var(--primary) 11%, transparent) !important;
  box-shadow: inset 3px 0 0 var(--primary) !important;
}

.ti-panel,
.ti-panel-soft,
.ti-feed-card,
.ti-room-link,
.ti-room-card,
.metal-panel {
  border-color: var(--border) !important;
  border-radius: 0.55rem !important;
  background: color-mix(in oklab, var(--card) 97%, transparent) !important;
}

.ti-panel,
.metal-panel {
  box-shadow: var(--shadow-elegant) !important;
  backdrop-filter: blur(12px) saturate(106%);
}

.ti-panel-soft {
  background: color-mix(in oklab, var(--muted) 76%, transparent) !important;
}

.ti-feed-card,
.ti-room-link,
.ti-room-card {
  box-shadow: 0 14px 36px -34px var(--metal-shadow);
}

.ti-feed-card:hover,
.ti-room-link:hover,
.ti-room-card:hover {
  border-color: color-mix(in oklab, var(--primary) 43%, var(--border)) !important;
  background: color-mix(in oklab, var(--card) 98%, var(--primary) 2%) !important;
  transform: translateY(-1px);
}

.ti-feed-card::after,
.ti-room-card::after {
  width: 2px !important;
}

.ti-chip {
  border-radius: 0.35rem !important;
  background: color-mix(in oklab, var(--primary) 8%, transparent) !important;
}

.ti-kicker {
  letter-spacing: 0.13em !important;
}

.ti-icon-button {
  border-radius: 0.45rem !important;
  background: color-mix(in oklab, var(--card) 72%, transparent) !important;
}

.ti-icon-button:hover {
  border-color: color-mix(in oklab, var(--primary) 45%, var(--border)) !important;
  background: color-mix(in oklab, var(--primary) 8%, var(--muted)) !important;
  color: var(--foreground) !important;
}

.metal-button {
  border-color: color-mix(in oklab, var(--primary) 68%, transparent) !important;
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
  box-shadow: 0 12px 28px -20px color-mix(in oklab, var(--primary) 68%, transparent) !important;
}

.metal-button:hover {
  filter: brightness(1.05);
}

.ti-tabs {
  gap: 0.9rem !important;
}

.ti-tab {
  border-radius: 0 !important;
  padding-inline: 0.2rem !important;
}

.ti-tab-active {
  border-color: var(--primary) !important;
  background: transparent !important;
  color: var(--foreground) !important;
}

.ti-signal-readout {
  border-radius: 0.4rem !important;
  background: color-mix(in oklab, var(--card) 89%, transparent) !important;
}

.ti-bottom-nav {
  border-color: var(--border) !important;
  background: color-mix(in oklab, var(--background) 95%, transparent) !important;
}

.ti-drawer {
  background:
    radial-gradient(
      circle at 10% 0%,
      color-mix(in oklab, var(--primary) 6%, transparent),
      transparent 14rem
    ),
    var(--background) !important;
}

/* Header profile identity: the user's actual avatar remains visible whenever signed in. */
.ti-account-avatar-button {
  position: relative;
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  place-items: center;
  overflow: visible;
  border: 1px solid color-mix(in oklab, var(--border) 90%, transparent);
  border-radius: 999px;
  background: var(--card);
  box-shadow: 0 7px 20px -15px var(--metal-shadow);
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

.ti-account-avatar-button:hover {
  border-color: color-mix(in oklab, var(--primary) 55%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 10%, transparent);
  transform: translateY(-1px);
}

.ti-account-avatar-image {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.ti-account-avatar-fallback {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  border-radius: inherit;
  color: var(--foreground);
  font-size: 0.75rem;
  font-weight: 700;
}

.ti-account-type-badge,
.ti-feed-account-badge {
  display: inline-grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--background);
}

.ti-account-type-badge {
  position: absolute;
  right: -0.18rem;
  bottom: -0.12rem;
  width: 1rem;
  height: 1rem;
  font-size: 0.54rem;
  background: var(--background);
}

.ti-feed-account-badge {
  width: 1.05rem;
  height: 1.05rem;
  font-size: 0.55rem;
  background: color-mix(in oklab, var(--card) 95%, transparent);
}

[data-account-type="human"] {
  color: #36a45e;
}

[data-account-type="ai"] {
  color: #4f7ff0;
}

[data-account-type="bot"] {
  color: #9a58d6;
}

[data-account-type="robot"] {
  color: #dd6b39;
}

/* The approved dashboard reference intentionally has no oversized hero dragon. */
.ti-dashboard-hero-dragon,
.ti-main-dragon-art,
[data-dant3-hero-dragon] {
  display: none !important;
}

@media (max-width: 767px) {
  .ti-drawer {
    width: min(88vw, 340px) !important;
    min-width: min(88vw, 340px) !important;
    max-width: none !important;
  }

  body {
    background-size: 28px 28px;
  }

  .ti-shell {
    background: var(--background);
  }

  .ti-feed-card,
  .ti-panel,
  .ti-panel-soft,
  .ti-room-card,
  .ti-room-link {
    border-radius: 0.48rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ti-feed-card,
  .ti-room-link,
  .ti-room-card,
  .ti-account-avatar-button {
    transition: none !important;
    transform: none !important;
  }
}