/* ==========================================================================
   New API - Linear & Vercel Clean Modern Theme
   ========================================================================== */

:root {
  --site-page: #f7f9fc;
  --site-text: #172033;
  --site-secondary: #405168;
  --site-muted: #52627a;
  --site-link: #036b91;
  --site-surface: rgba(255, 255, 255, .97);
  --site-input: #fff;
  --site-popup: #fff;
  --site-header: rgba(255, 255, 255, .97);
  --site-border: #cbd5e1;
  --site-shadow: 0 12px 36px -12px rgba(15, 23, 42, .12);
  --site-heading-shadow: none;
  --site-ambient-opacity: .045;
  color-scheme: light;
}

:root.dark {
  --site-page: #04060d;
  --site-text: #f8fafc;
  --site-secondary: #cbd5e1;
  --site-muted: #b5c3d6;
  --site-link: #7dd3fc;
  --site-surface: rgba(14, 20, 38, .86);
  --site-input: rgba(8, 12, 24, .95);
  --site-popup: #101827;
  --site-header: rgba(7, 11, 22, .94);
  --site-border: rgba(148, 163, 184, .3);
  --site-shadow: 0 16px 40px -10px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .1);
  --site-heading-shadow: 0 1px 3px rgba(0, 0, 0, .7);
  --site-ambient-opacity: .72;
  color-scheme: dark;
}

/* 1. Base Setup */
html, body {
  background-color: var(--site-page) !important;
  color: var(--site-text) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", sans-serif !important;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

#ambient-bg-canvas {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: var(--site-ambient-opacity);
}

/* Page containers: transparent, stacked above the ambient canvas.
   .bg-background is deliberately NOT in this selector. Radix/shadcn portals
   (sheet-content, dialog-content, alert-dialog-content) carry that class
   together with `fixed z-50`; forcing them to `relative z-10` left the
   z-50 overlay painting on top of the panel and swallowing every click. */
#root, #root > div, main {
  position: relative !important;
  z-index: 10 !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* Plain layout surfaces can still go transparent, but never portal
   components - every one of those carries a data-slot attribute. */
.bg-background:not([data-slot]) {
  background: transparent !important;
  background-color: transparent !important;
}

/* 2. COMPLETELY OBLITERATE THE DECORATIVE OVERVIEW CODE WATERMARK */
[aria-hidden="true"] pre,
pre.whitespace-pre,
pre[class*="tracking-"],
pre[class*="whitespace-pre"],
div.font-mono.pointer-events-none,
div.font-mono[aria-hidden="true"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  clip: rect(0, 0, 0, 0) !important;
  pointer-events: none !important;
}

/* 3. Reset All Nested Card Sub-elements to Transparent */
[class*="card-header"], 
[class*="card-content"], 
[class*="card-footer"], 
[class*="card-title"], 
[class*="card-description"],
.p-6 {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 4. Translucent Frosted Glass Cards (65% Opacity lets Dynamic Background Glow Through) */
div.rounded-xl.border, 
div.rounded-lg.border, 
div[data-slot="card"],
div.border.bg-card,
form {
  background: var(--site-surface) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid var(--site-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--site-shadow) !important;
}

/* 5. Text Contrast - Crystal Clear Typography */
h1, h2, h3, h4, h5, h6,
.text-foreground {
  color: var(--site-text) !important;
  font-weight: 600 !important;
  text-shadow: var(--site-heading-shadow) !important;
}

p, label {
  color: var(--site-secondary) !important;
}

h1 .bg-clip-text {
  text-shadow: none !important;
}

:root:not(.dark) h1 .bg-clip-text {
  background-image: linear-gradient(to right, #0369a1, #6d28d9, #a21caf) !important;
}

.text-muted-foreground, [class*="text-muted"], [class*="text-foreground/"] {
  color: var(--site-muted) !important;
}

a, .text-primary {
  color: var(--site-link) !important;
  font-weight: 500;
}

/* 6. Inputs & Buttons */
input, select, textarea {
  background-color: var(--site-input) !important;
  color: var(--site-text) !important;
  border: 1px solid var(--site-border) !important;
  border-radius: 10px !important;
}

input:focus, textarea:focus {
  border-color: var(--site-link) !important;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.35) !important;
}

button.bg-primary, .bg-primary {
  background: linear-gradient(135deg, #047857 0%, #0e7490 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(6, 182, 212, 0.45) !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
}

/* 7. Header Navigation */
header, nav, [data-slot="header"] {
  background-color: var(--site-header) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--site-border) !important;
}

input::placeholder, textarea::placeholder {
  color: var(--site-muted) !important;
  opacity: 1;
}

[data-slot="sheet-content"],
[data-slot="dialog-content"],
[data-slot="alert-dialog-content"],
[data-slot="popover-content"],
[data-slot="dropdown-menu-content"],
[data-slot="select-content"] {
  background-color: var(--site-popup) !important;
  color: var(--site-text);
  border-color: var(--site-border) !important;
}

/* Keep dialog masks readable without blurring the page behind them. */
[class~="supports-backdrop-filter:backdrop-blur-xs"] {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Keep the channel editor centered; other sheets retain their native placement. */
[data-slot="sheet-content"].codex-channel-sheet {
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  width: min(92vw, 64rem) !important;
  max-width: min(92vw, 64rem) !important;
  height: min(90vh, 900px) !important;
  max-height: 90vh !important;
  border: 1px solid var(--site-border) !important;
  border-radius: 18px !important;
  transform: translate(-50%, -50%) !important;
}

@media (max-width: 640px) {
  [data-slot="sheet-content"].codex-channel-sheet {
    width: calc(100vw - 1rem) !important;
    max-width: calc(100vw - 1rem) !important;
    height: calc(100vh - 1rem) !important;
    max-height: calc(100vh - 1rem) !important;
  }
}

/* codex-portal-guard: restore the framework's own stacking for portal popups.
   Base UI ships overlay and popup both at z-50 and relies on DOM order, so we
   only re-assert that value instead of inventing a new hierarchy - inventing
   one breaks nested cases (an alert-dialog opened from inside a sheet). */
[data-slot="sheet-content"],
[data-slot="dialog-content"],
[data-slot="alert-dialog-content"] {
  position: fixed !important;
  z-index: 50 !important;
}