/* IDE brand layer — matches the storefront hero/header.
   Loaded only on IDE routes; the body scope also reaches Radix portals.
   Monospace code, semantic status colors, and preview documents are preserved. */
@font-face {
  font-family: 'Geist';
  src: url('/assets/fonts/geist/Geist-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

body.ide-page {
  --primary: #1e9bf0;
  --primary-fg: #ffffff;
  --ring: #1e9bf0;
  --ring-dim: #0b5cad;
  --font-sans: 'Geist', system-ui, sans-serif;
  font-family: var(--font-sans);
}
html:not(.light) body.ide-page,
html:not(.light) body.ide-page .ide-root {
  --bg: #1e1e1e;
  --bg-raised: #252526;
  --surface: #252526;
  --surface-1: #2b2b2c;
  --surface-2: #303031;
  --surface-3: #363637;
  --popover: #252526;
  --background: #1e1e1e;
  --foreground: #f5f5f5;
  --card: #252526;
  --card-foreground: #f5f5f5;
  --popover-foreground: #f5f5f5;
  --muted: #2b2b2c;
  --muted-foreground: #bcbcbc;
  --accent: #303031;
  --accent-foreground: #7dd8ff;
  --primary-foreground: #ffffff;
  --secondary: #303031;
  --secondary-foreground: #f5f5f5;
  --input: #3c3c3c;
  --border: #3c3c3c;
  --border-sub: #333334;
  --fg: #f5f5f5;
  --fg-muted: #bcbcbc;
  --fg-faint: #909090;
  background: var(--bg);
  color: var(--fg);
  color-scheme: dark;
}
.ide-page .ide-root,
.ide-page .font-sans,
.ide-page [role="dialog"],
.ide-page [role="menu"] {
  font-family: 'Geist', system-ui, sans-serif;
}
html:not(.light) .ide-root,
html:not(.light) .ide-root :is(
  .bg-black, .bg-\[\#000001\], .bg-\[\#050507\],
  .bg-\[\#080808\], .bg-\[\#08080b\], .bg-\[\#0a0a0a\],
  .bg-\[\#0a0a0c\], .bg-\[\#0a0a0d\], .bg-\[\#0b0b0e\],
  .bg-\[\#0d0d0d\], .bg-\[\#0f0f0f\], .bg-\[\#111\]
) {
  background-color: #1e1e1e !important;
}
html:not(.light) .ide-root :is(.bg-\[\#242424\], .bg-\[\#2a2a2a\]) {
  background-color: #252526 !important;
}

/* Fine panel seams and raised toolbar surfaces, rather than black slabs. */
html:not(.light) .ide-root header {
  background: linear-gradient(180deg, #29292a, #1e1e1e);
  border-color: #3c3c3c;
  box-shadow: inset 0 1px #ffffff09, 0 4px 16px #00000026;
}

/* Small projects sidebar — flat platform background, no gradient. */
html:not(.light) .ide-root .ide-rail-blue {
  background: #1e1e1e !important;
}
html:not(.light) .ide-root .ide-rail-blue .text-ring {
  color: #dbeeff;
}
html:not(.light) .ide-root .ide-rail-blue .hover\:text-ring:hover {
  color: #ffffff;
}
html.light .ide-root .ide-rail-blue {
  background: #f5f5f5 !important;
}
/* Collapsed rail: the square icon buttons become the header's lit "power buttons" —
   beveled dark disc, recessed inner face, glowing blue ring, luminous icon. */
html:not(.light) .ide-root .ide-rail-blue button.h-9.w-9 {
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #323232, #1d1d1d 78%, #161616) !important;
  color: #7dd8ff;
  box-shadow: inset 0 1px 1px #ffffff21, inset 0 -3px 6px #000000a6,
    0 2px 4px #00000099;
  transition: box-shadow .15s, transform .15s, color .15s;
}
html:not(.light) .ide-root .ide-rail-blue button.h-9.w-9::before {
  content: '';
  position: absolute;
  inset: 6px;
  z-index: -1;
  border-radius: 999px;
  pointer-events: none;
  background: linear-gradient(180deg, #191919, #242424);
  box-shadow: inset 0 3px 7px #000000e6, inset 0 -1px 2px #ffffff12,
    0 0 0 2px #2a2a2c, 0 0 0 3px #0d0d0d;
  transition: box-shadow .15s;
}
html:not(.light) .ide-root .ide-rail-blue button.h-9.w-9 svg {
  position: relative;
  z-index: 1;
  color: #6b6b6e;
  filter: none;
  transition: color .15s, filter .15s;
}
html:not(.light) .ide-root .ide-rail-blue button.h-9.w-9:hover:not(:disabled) {
  transform: translateY(-1px);
  color: #eaf7ff;
}
html:not(.light) .ide-root .ide-rail-blue button.h-9.w-9:hover:not(:disabled)::before {
  box-shadow: inset 0 3px 7px #000000e6, inset 0 -1px 2px #ffffff12,
    0 0 0 2px #5cbcff, 0 0 0 3px #0d0d0d, 0 0 22px #1e9bf0b3, 0 0 6px #1e9bf0cc;
}
html:not(.light) .ide-root .ide-rail-blue button.h-9.w-9:hover:not(:disabled) svg {
  color: #7dd8ff;
  filter: drop-shadow(0 0 5px #1e9bf0e6);
}
html:not(.light) .ide-root .ide-rail-blue button.h-9.w-9:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: inset 0 1px 1px #ffffff21, inset 0 -2px 4px #000000a6, 0 1px 3px #000000b3;
}
/* Light theme: soft white bevel discs with a cool blue icon. */
html.light .ide-root .ide-rail-blue button.h-9.w-9 {
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff, #eef4fa 78%, #e4edf5) !important;
  color: #0b5cad;
  box-shadow: inset 0 1px 1px #ffffff, inset 0 -2px 4px #0b5cad1f, 0 2px 5px #0b5cad26;
  transition: box-shadow .15s, transform .15s, color .15s;
}
html.light .ide-root .ide-rail-blue button.h-9.w-9::before {
  content: '';
  position: absolute;
  inset: 6px;
  z-index: -1;
  border-radius: 999px;
  pointer-events: none;
  background: linear-gradient(180deg, #f2f7fc, #e7eff7);
  box-shadow: inset 0 2px 5px #0b5cad21, inset 0 -1px 2px #ffffff,
    0 0 0 2px #7dd8ff, 0 0 0 3px #ffffff, 0 0 12px #1e9bf04d;
  transition: box-shadow .15s;
}
html.light .ide-root .ide-rail-blue button.h-9.w-9 svg {
  position: relative;
  z-index: 1;
  color: #1e9bf0;
}
html.light .ide-root .ide-rail-blue button.h-9.w-9:hover:not(:disabled) {
  transform: translateY(-1px);
}
.ide-page :is(button, a, input, textarea, select) {
  transition: color .15s ease, background-color .15s ease,
    border-color .15s ease, box-shadow .15s ease;
}
.ide-page :is(button, a, input, textarea, select):focus-visible {
  outline: 2px solid #1e9bf0;
  outline-offset: 3px;
}
/* Textareas that opt out (chat input shows its container's focus ring instead)
   must beat the rule above — its specificity outranks the utility class. */
.ide-page textarea.focus-visible\:outline-none:focus-visible {
  outline: none;
}
html:not(.light) .ide-root :is(input, textarea)::placeholder {
  color: #909090;
}
/* Exact hero power-button construction: outer bevel + recessed inner face.
   Negative stacking inside an isolated control keeps bare text above the face. */
html:not(.light) .ide-page :is(button, a).bg-primary {
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #323232, #1d1d1d 78%, #161616) !important;
  color: #dbeeff;
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: .02em;
  text-shadow: 0 0 8px #1e9bf08c;
  box-shadow: inset 0 1px 1px #ffffff21, inset 0 -3px 6px #000000a6,
    0 2px 4px #00000099, 0 8px 18px #00000073;
  transition: box-shadow .15s, transform .15s, color .15s;
}
html:not(.light) .ide-page :is(button, a).bg-primary::before {
  content: '';
  position: absolute;
  inset: 6px;
  z-index: -1;
  border-radius: 999px;
  pointer-events: none;
  background: linear-gradient(180deg, #191919, #242424);
  box-shadow: inset 0 3px 7px #000000e6, inset 0 -1px 2px #ffffff12,
    0 0 0 2px #2f9df5, 0 0 0 3px #0d0d0d,
    0 0 16px #1e9bf066, 0 0 5px #1e9bf099;
  transition: box-shadow .15s;
}
html:not(.light) .ide-page :is(button, a).bg-primary svg {
  color: #7dd8ff;
  filter: drop-shadow(0 0 5px #1e9bf0e6);
}
html:not(.light) .ide-page :is(button, a).bg-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  color: #eaf7ff;
}
html:not(.light) .ide-page :is(button, a).bg-primary:hover:not(:disabled)::before {
  box-shadow: inset 0 3px 7px #000000e6, inset 0 -1px 2px #ffffff12,
    0 0 0 2px #5cbcff, 0 0 0 3px #0d0d0d,
    0 0 22px #1e9bf099, 0 0 6px #1e9bf0cc;
}
html:not(.light) .ide-page :is(button, a).bg-primary:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: inset 0 1px 1px #ffffff21, inset 0 -2px 4px #000000a6,
    0 1px 3px #000000b3;
}
html:not(.light) .ide-page button.bg-primary:disabled {
  color: #b5b5b5;
  text-shadow: none;
  transform: none;
}
html:not(.light) .ide-page button.bg-primary:disabled::before {
  box-shadow: inset 0 3px 7px #000000e6, inset 0 -1px 2px #ffffff12,
    0 0 0 2px #454545, 0 0 0 3px #0d0d0d;
}
html:not(.light) .ide-page button.bg-primary:disabled svg {
  color: #9a9a9a;
  filter: none;
}
html:not(.light) .ide-root [role="tab"][aria-selected="true"],
html:not(.light) .ide-root [role="tab"][data-state="active"] {
  color: #7dd8ff;
  background: #1e9bf012;
  box-shadow: inset 0 -2px #1e9bf0;
}
html:not(.light) .ide-page :is([role="dialog"], [role="menu"]) {
  background-color: #252526;
  border-color: #3c3c3c;
  box-shadow: inset 0 1px #ffffff0d, 0 18px 60px #00000066;
}
html:not(.light) .ide-root :is(.monaco-editor, .monaco-editor .margin,
  .monaco-editor-background, .xterm, .xterm-viewport) {
  background-color: #1e1e1e !important;
}
.ide-root {
  scrollbar-width: thin;
  scrollbar-color: #505052 transparent;
}
.ide-root ::-webkit-scrollbar { width: 7px; height: 7px; }
.ide-root ::-webkit-scrollbar-thumb { background: #505052; border-radius: 999px; }
.ide-root ::-webkit-scrollbar-track { background: transparent; }

/* Collapsed rail: more breathing room between the icon discs. */
html:not(.light) .ide-root .ide-rail-blue .flex.flex-col.flex-1.items-center,
html.light .ide-root .ide-rail-blue .flex.flex-col.flex-1.items-center {
  gap: .55rem !important;
}
/* Collapsed rail: solid, gradient-free icon discs and background. */
html:not(.light) .ide-root .ide-rail-blue,
html:not(.light) .ide-root .ide-rail-blue * {
  background-image: none !important;
}
html:not(.light) .ide-root .ide-rail-blue button.h-9.w-9 {
  background: #262626 !important;
}
html:not(.light) .ide-root .ide-rail-blue button.h-9.w-9::before {
  background: #1e1e1e !important;
}
html.light .ide-root .ide-rail-blue,
html.light .ide-root .ide-rail-blue * {
  background-image: none !important;
}
html.light .ide-root .ide-rail-blue button.h-9.w-9 {
  background: #ffffff !important;
}
html.light .ide-root .ide-rail-blue button.h-9.w-9::before {
  background: #f2f7fc !important;
}
/* Collapsed rail: active state — the icon disc lights up while its panel is open. */
html:not(.light) .ide-root .ide-rail-blue button.h-9.w-9.ide-rail-active::before {
  box-shadow: inset 0 3px 7px #000000e6, inset 0 -1px 2px #ffffff12,
    0 0 0 2px #2f9df5, 0 0 0 3px #0d0d0d, 0 0 14px #1e9bf099;
}
html:not(.light) .ide-root .ide-rail-blue button.h-9.w-9.ide-rail-active svg {
  color: #7dd8ff;
  filter: drop-shadow(0 0 5px #1e9bf0e6);
}
html:not(.light) .ide-root .ide-rail-blue button.h-9.w-9.ide-rail-active.ide-rail-violet::before {
  box-shadow: inset 0 3px 7px #000000e6, inset 0 -1px 2px #ffffff12,
    0 0 0 2px #8b5cf6, 0 0 0 3px #0d0d0d, 0 0 14px #8b5cf699;
}
html:not(.light) .ide-root .ide-rail-blue button.h-9.w-9.ide-rail-active.ide-rail-violet svg {
  color: #c4b5fd;
  filter: drop-shadow(0 0 5px #8b5cf6e6);
}
html.light .ide-root .ide-rail-blue button.h-9.w-9.ide-rail-active {
  background: #dbeafe !important;
}
html.light .ide-root .ide-rail-blue button.h-9.w-9.ide-rail-active svg {
  color: #1d4ed8;
}
html.light .ide-root .ide-rail-blue button.h-9.w-9.ide-rail-active.ide-rail-violet {
  background: #ede9fe !important;
}
html.light .ide-root .ide-rail-blue button.h-9.w-9.ide-rail-active.ide-rail-violet svg {
  color: #6d28d9;
}
/* Chat send button: same power-disc construction as the collapsed rail icons. */
html:not(.light) .ide-root button.ide-send-disc {
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #323232, #1d1d1d 78%, #161616) !important;
  color: #7dd8ff;
  box-shadow: inset 0 1px 1px #ffffff21, inset 0 -3px 6px #000000a6,
    0 2px 4px #00000099;
  transition: box-shadow .15s, transform .15s, color .15s;
}
html:not(.light) .ide-root button.ide-send-disc::before {
  content: '';
  position: absolute;
  inset: 6px;
  z-index: -1;
  border-radius: 999px;
  pointer-events: none;
  background: linear-gradient(180deg, #191919, #242424);
  box-shadow: inset 0 3px 7px #000000e6, inset 0 -1px 2px #ffffff12,
    0 0 0 2px #2a2a2c, 0 0 0 3px #0d0d0d;
  transition: box-shadow .15s;
}
html:not(.light) .ide-root button.ide-send-disc svg {
  position: relative;
  z-index: 1;
  color: #6b6b6e;
  filter: none;
  transition: color .15s, filter .15s;
}
html:not(.light) .ide-root button.ide-send-disc:hover:not(:disabled) {
  transform: translateY(-1px);
  color: #eaf7ff;
}
html:not(.light) .ide-root button.ide-send-disc:hover:not(:disabled)::before {
  box-shadow: inset 0 3px 7px #000000e6, inset 0 -1px 2px #ffffff12,
    0 0 0 2px #5cbcff, 0 0 0 3px #0d0d0d, 0 0 22px #1e9bf0b3, 0 0 6px #1e9bf0cc;
}
html:not(.light) .ide-root button.ide-send-disc:hover:not(:disabled) svg {
  color: #7dd8ff;
  filter: drop-shadow(0 0 5px #1e9bf0e6);
}
html:not(.light) .ide-root button.ide-send-disc:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: inset 0 1px 1px #ffffff21, inset 0 -2px 4px #000000a6, 0 1px 3px #000000b3;
}
/* Typed text: the disc lights up — same lit state as an active rail button. */
html:not(.light) .ide-root button.ide-send-disc.ide-send-active::before {
  box-shadow: inset 0 3px 7px #000000e6, inset 0 -1px 2px #ffffff12,
    0 0 0 2px #2f9df5, 0 0 0 3px #0d0d0d, 0 0 14px #1e9bf099;
}
html:not(.light) .ide-root button.ide-send-disc.ide-send-active svg {
  color: #7dd8ff;
  filter: drop-shadow(0 0 5px #1e9bf0e6);
}
/* Light theme: soft white bevel disc, cool blue icon — identical to rail. */
html.light .ide-root button.ide-send-disc {
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff, #eef4fa 78%, #e4edf5) !important;
  color: #0b5cad;
  box-shadow: inset 0 1px 1px #ffffff, inset 0 -2px 4px #0b5cad1f, 0 2px 5px #0b5cad26;
  transition: box-shadow .15s, transform .15s, color .15s;
}
html.light .ide-root button.ide-send-disc::before {
  content: '';
  position: absolute;
  inset: 6px;
  z-index: -1;
  border-radius: 999px;
  pointer-events: none;
  background: linear-gradient(180deg, #f2f7fc, #e7eff7);
  box-shadow: inset 0 2px 5px #0b5cad21, inset 0 -1px 2px #ffffff,
    0 0 0 2px #7dd8ff, 0 0 0 3px #ffffff, 0 0 12px #1e9bf04d;
  transition: box-shadow .15s;
}
html.light .ide-root button.ide-send-disc svg {
  position: relative;
  z-index: 1;
  color: #1e9bf0;
}
html.light .ide-root button.ide-send-disc:hover:not(:disabled) {
  transform: translateY(-1px);
}
html.light .ide-root button.ide-send-disc.ide-send-active {
  background: #dbeafe !important;
}
html.light .ide-root button.ide-send-disc.ide-send-active svg {
  color: #1d4ed8;
}
/* Recording state: same disc, red glow. */
html:not(.light) .ide-root button.ide-send-disc.ide-send-rec::before {
  box-shadow: inset 0 3px 7px #000000e6, inset 0 -1px 2px #ffffff12,
    0 0 0 2px #ef4444, 0 0 0 3px #0d0d0d, 0 0 14px #ef444499;
}
html:not(.light) .ide-root button.ide-send-disc.ide-send-rec svg {
  color: #fca5a5;
  filter: drop-shadow(0 0 5px #ef4444e6);
}
html.light .ide-root button.ide-send-disc.ide-send-rec {
  background: #fee2e2 !important;
}
html.light .ide-root button.ide-send-disc.ide-send-rec svg {
  color: #dc2626;
}

/* Preview toolbar: icon discs built exactly like the collapsed rail buttons —
   flat bevel disc, recessed inner face, blue glow ring on hover. */
html:not(.light) .ide-root button.ide-preview-disc {
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: 999px;
  background: #262626 !important;
  color: #6b6b6e;
  box-shadow: inset 0 1px 1px #ffffff21, inset 0 -3px 6px #000000a6,
    0 2px 4px #00000099;
  transition: box-shadow .15s, transform .15s, color .15s;
}
html:not(.light) .ide-root button.ide-preview-disc::before {
  content: '';
  position: absolute;
  inset: 6px;
  z-index: -1;
  border-radius: 999px;
  pointer-events: none;
  background: #1e1e1e !important;
  box-shadow: inset 0 3px 7px #000000e6, inset 0 -1px 2px #ffffff12,
    0 0 0 2px #2a2a2c, 0 0 0 3px #0d0d0d;
  transition: box-shadow .15s;
}
html:not(.light) .ide-root button.ide-preview-disc svg {
  position: relative;
  z-index: 1;
  color: #6b6b6e;
  filter: none;
  transition: color .15s, filter .15s;
}
html:not(.light) .ide-root button.ide-preview-disc:hover:not(:disabled) {
  transform: translateY(-1px);
  color: #eaf7ff;
}
html:not(.light) .ide-root button.ide-preview-disc:hover:not(:disabled)::before {
  box-shadow: inset 0 3px 7px #000000e6, inset 0 -1px 2px #ffffff12,
    0 0 0 2px #5cbcff, 0 0 0 3px #0d0d0d, 0 0 22px #1e9bf0b3, 0 0 6px #1e9bf0cc;
}
html:not(.light) .ide-root button.ide-preview-disc:hover:not(:disabled) svg {
  color: #7dd8ff;
  filter: drop-shadow(0 0 5px #1e9bf0e6);
}
html:not(.light) .ide-root button.ide-preview-disc:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: inset 0 1px 1px #ffffff21, inset 0 -2px 4px #000000a6, 0 1px 3px #000000b3;
}
/* Light theme: soft white bevel discs with a cool blue icon — same as rail. */
html.light .ide-root button.ide-preview-disc {
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: 999px;
  background: #ffffff !important;
  color: #1e9bf0;
  box-shadow: inset 0 1px 1px #ffffff, inset 0 -2px 4px #0b5cad1f, 0 2px 5px #0b5cad26;
  transition: box-shadow .15s, transform .15s, color .15s;
}
html.light .ide-root button.ide-preview-disc::before {
  content: '';
  position: absolute;
  inset: 6px;
  z-index: -1;
  border-radius: 999px;
  pointer-events: none;
  background: #f2f7fc !important;
  box-shadow: inset 0 2px 5px #0b5cad21, inset 0 -1px 2px #ffffff,
    0 0 0 2px #7dd8ff, 0 0 0 3px #ffffff, 0 0 12px #1e9bf04d;
  transition: box-shadow .15s;
}
html.light .ide-root button.ide-preview-disc svg {
  position: relative;
  z-index: 1;
  color: #1e9bf0;
}
html.light .ide-root button.ide-preview-disc:hover:not(:disabled) {
  transform: translateY(-1px);
}
/* Preview toolbar text pills (Publish / Sign in): same disc construction,
   lit blue ring and glowing label — the rail's "active" state as a pill. */
html:not(.light) .ide-root button.ide-preview-pill {
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: 999px;
  background: #262626 !important;
  color: #dbeeff;
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: .02em;
  text-shadow: 0 0 8px #1e9bf08c;
  box-shadow: inset 0 1px 1px #ffffff21, inset 0 -3px 6px #000000a6,
    0 2px 4px #00000099, 0 8px 18px #00000073;
  transition: box-shadow .15s, transform .15s, color .15s;
}
html:not(.light) .ide-root button.ide-preview-pill::before {
  content: '';
  position: absolute;
  inset: 5px;
  z-index: -1;
  border-radius: 999px;
  pointer-events: none;
  background: #1e1e1e !important;
  box-shadow: inset 0 3px 7px #000000e6, inset 0 -1px 2px #ffffff12,
    0 0 0 2px #2f9df5, 0 0 0 3px #0d0d0d, 0 0 16px #1e9bf066, 0 0 5px #1e9bf099;
  transition: box-shadow .15s;
}
html:not(.light) .ide-root button.ide-preview-pill svg {
  position: relative;
  z-index: 1;
  color: #7dd8ff;
  filter: drop-shadow(0 0 5px #1e9bf0e6);
}
html:not(.light) .ide-root button.ide-preview-pill:hover:not(:disabled) {
  transform: translateY(-1px);
  color: #eaf7ff;
}
html:not(.light) .ide-root button.ide-preview-pill:hover:not(:disabled)::before {
  box-shadow: inset 0 3px 7px #000000e6, inset 0 -1px 2px #ffffff12,
    0 0 0 2px #5cbcff, 0 0 0 3px #0d0d0d, 0 0 22px #1e9bf099, 0 0 6px #1e9bf0cc;
}
html:not(.light) .ide-root button.ide-preview-pill:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: inset 0 1px 1px #ffffff21, inset 0 -2px 4px #000000a6, 0 1px 3px #000000b3;
}
html:not(.light) .ide-root button.ide-preview-pill:disabled {
  color: #b5b5b5;
  text-shadow: none;
  transform: none;
}
html:not(.light) .ide-root button.ide-preview-pill:disabled::before {
  box-shadow: inset 0 3px 7px #000000e6, inset 0 -1px 2px #ffffff12,
    0 0 0 2px #454545, 0 0 0 3px #0d0d0d;
}
html:not(.light) .ide-root button.ide-preview-pill:disabled svg {
  color: #9a9a9a;
  filter: none;
}
/* Muted pill (locked publish / upgrade): gray ring like the rail's idle disc. */
html:not(.light) .ide-root button.ide-preview-pill-muted {
  color: #b5b5b5;
  text-shadow: none;
}
html:not(.light) .ide-root button.ide-preview-pill-muted::before {
  box-shadow: inset 0 3px 7px #000000e6, inset 0 -1px 2px #ffffff12,
    0 0 0 2px #454545, 0 0 0 3px #0d0d0d;
}
html:not(.light) .ide-root button.ide-preview-pill-muted svg {
  color: #9a9a9a;
  filter: none;
}
html:not(.light) .ide-root button.ide-preview-pill-muted:hover:not(:disabled) {
  color: #eaf7ff;
}
html:not(.light) .ide-root button.ide-preview-pill-muted:hover:not(:disabled)::before {
  box-shadow: inset 0 3px 7px #000000e6, inset 0 -1px 2px #ffffff12,
    0 0 0 2px #5cbcff, 0 0 0 3px #0d0d0d, 0 0 22px #1e9bf099, 0 0 6px #1e9bf0cc;
}
html:not(.light) .ide-root button.ide-preview-pill-muted:hover:not(:disabled) svg {
  color: #7dd8ff;
  filter: drop-shadow(0 0 5px #1e9bf0e6);
}
/* Preview URL bar: same bevel + blue lit ring as the Publish pill, but as a
   pill-shaped input well. Applies to the wrapper div around the URL input. */
html:not(.light) .ide-root .ide-preview-urlbar {
  position: relative;
  isolation: isolate;
  border: 0 !important;
  border-radius: 999px;
  background: #262626 !important;
  box-shadow: inset 0 1px 1px #ffffff21, inset 0 -3px 6px #000000a6,
    0 2px 4px #00000099, 0 8px 18px #00000073;
  padding-left: 4px;
  padding-right: 4px;
}
html:not(.light) .ide-root .ide-preview-urlbar::before {
  content: '';
  position: absolute;
  inset: 5px;
  z-index: -1;
  border-radius: 999px;
  pointer-events: none;
  background: #1e1e1e !important;
  box-shadow: inset 0 3px 7px #000000e6, inset 0 -1px 2px #ffffff12,
    0 0 0 2px #2a2a2c, 0 0 0 3px #0d0d0d;
  transition: box-shadow .15s;
}
html:not(.light) .ide-root .ide-preview-urlbar:focus-within::before {
  box-shadow: inset 0 3px 7px #000000e6, inset 0 -1px 2px #ffffff12,
    0 0 0 2px #5cbcff, 0 0 0 3px #0d0d0d, 0 0 22px #1e9bf099, 0 0 6px #1e9bf0cc;
}
html:not(.light) .ide-root .ide-preview-urlbar input {
  color: #dbeeff;
  text-shadow: 0 0 8px #1e9bf05c;
}
html:not(.light) .ide-root .ide-preview-urlbar > svg {
  color: #7dd8ff;
  filter: drop-shadow(0 0 5px #1e9bf0e6);
}
html.light .ide-root .ide-preview-urlbar {
  position: relative;
  isolation: isolate;
  border: 0 !important;
  border-radius: 999px;
  background: #ffffff !important;
  box-shadow: inset 0 1px 1px #ffffff, inset 0 -2px 4px #0b5cad1f, 0 2px 5px #0b5cad26;
  padding-left: 4px;
  padding-right: 4px;
}
html.light .ide-root .ide-preview-urlbar::before {
  content: '';
  position: absolute;
  inset: 5px;
  z-index: -1;
  border-radius: 999px;
  pointer-events: none;
  background: #f2f7fc !important;
  box-shadow: inset 0 2px 5px #0b5cad21, inset 0 -1px 2px #ffffff,
    0 0 0 2px #7dd8ff, 0 0 0 3px #ffffff, 0 0 12px #1e9bf04d;
}
html.light .ide-root .ide-preview-urlbar:focus-within::before {
  box-shadow: inset 0 2px 5px #0b5cad21, inset 0 -1px 2px #ffffff,
    0 0 0 2px #1e9bf0, 0 0 0 3px #ffffff, 0 0 16px #1e9bf066;
}
html.light .ide-root .ide-preview-urlbar input {
  color: #0b5cad;
}
html.light .ide-root .ide-preview-urlbar > svg {
  color: #1e9bf0;
}
/* Light theme pills: white bevel disc, blue label. */
html.light .ide-root button.ide-preview-pill {
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: 999px;
  background: #ffffff !important;
  color: #0b5cad;
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: inset 0 1px 1px #ffffff, inset 0 -2px 4px #0b5cad1f, 0 2px 5px #0b5cad26;
  transition: box-shadow .15s, transform .15s, color .15s;
}
html.light .ide-root button.ide-preview-pill::before {
  content: '';
  position: absolute;
  inset: 5px;
  z-index: -1;
  border-radius: 999px;
  pointer-events: none;
  background: #f2f7fc !important;
  box-shadow: inset 0 2px 5px #0b5cad21, inset 0 -1px 2px #ffffff,
    0 0 0 2px #7dd8ff, 0 0 0 3px #ffffff, 0 0 12px #1e9bf04d;
  transition: box-shadow .15s;
}
html.light .ide-root button.ide-preview-pill svg {
  position: relative;
  z-index: 1;
  color: #1e9bf0;
}
html.light .ide-root button.ide-preview-pill:hover:not(:disabled) {
  transform: translateY(-1px);
}
html.light .ide-root button.ide-preview-pill:disabled {
  color: #909090;
}
html.light .ide-root button.ide-preview-pill:disabled::before {
  box-shadow: inset 0 2px 5px #0b5cad14, inset 0 -1px 2px #ffffff,
    0 0 0 2px #d7d7d9, 0 0 0 3px #ffffff;
}
html.light .ide-root button.ide-preview-pill:disabled svg {
  color: #909090;
}
html.light .ide-root button.ide-preview-pill-muted {
  color: #909090;
}
html.light .ide-root button.ide-preview-pill-muted::before {
  box-shadow: inset 0 2px 5px #0b5cad14, inset 0 -1px 2px #ffffff,
    0 0 0 2px #d7d7d9, 0 0 0 3px #ffffff;
}
html.light .ide-root button.ide-preview-pill-muted svg {
  color: #909090;
}

@media (prefers-reduced-motion: reduce) {
  .ide-page :is(button, a, input, textarea, select),
  .ide-page :is(button, a)::before { transition: none !important; }
}

/* ============================================================
   Mobile chat composer: text input on TOP, AI tools row BELOW.
   (Desktop already stacks the composer via .lg:block — this
   mirrors that same layout on screens < 1024px, where the
   wrapper is otherwise a single row with tools on the right.)
   ============================================================ */
@media (max-width: 1023px) {
  /* Stack: textarea first (top), tools row second (bottom) */
  .ide-root .ide-chat-input div.flex.items-end {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  /* Input takes the full width up top with a comfortable touch height */
  .ide-root .ide-chat-input div.flex.items-end > textarea {
    width: 100% !important;
    min-height: 52px;
  }
  /* Tools row spans the full width below: options (+) pinned left,
     reasoning + model selector next to it, mic / send / stop pinned right */
  .ide-root .ide-chat-input div.flex.items-end > :last-child {
    width: 100% !important;
    justify-content: flex-start;
    gap: 8px;
  }
  /* Hide the Options (+) button on mobile — its menu is reachable
     elsewhere; keep reasoning / model / clip / mic / send */
  .ide-root .ide-chat-input div.flex.items-end > :last-child > button.h-8.w-8.lg\:hidden {
    display: none !important;
  }
  /* Reveal the reasoning-effort disc, attach-image (clip) disc and
     model-selector pill on mobile (they carry "hidden lg:flex" —
     same power-disc style as desktop) */
  .ide-root .ide-chat-input div.flex.items-end > :last-child > button.ide-send-disc.h-9.w-9,
  .ide-root .ide-chat-input div.flex.items-end > :last-child > button.pl-5 {
    display: flex !important;
  }
  /* Model pill: cap its width so the model label truncates on small screens.
     flex-shrink:1 overrides its shrink-0 so it compresses instead of overflowing. */
  .ide-root .ide-chat-input div.flex.items-end > :last-child > button.pl-5 {
    min-width: 0;
    max-width: 140px;
    overflow: hidden;
    flex-shrink: 1 !important;
  }
  /* Bigger send / stop disc on mobile — easier thumb tap. Scoped to the
     last disc inside the voice cluster so reasoning / clip / mic keep
     their 36px size; the amber browser-agent run button (h-8) is not
     matched because it lacks .ide-send-disc. */
  .ide-root .ide-chat-input div.flex.items-end .relative.flex.items-center > button.ide-send-disc:last-child {
    height: 44px !important;
    width: 44px !important;
    border-radius: 14px !important;
  }
  .ide-root .ide-chat-input div.flex.items-end .relative.flex.items-center > button.ide-send-disc:last-child svg {
    width: 20px !important;
    height: 20px !important;
  }
  /* The clip button's own ml-auto pushes the right cluster
     (clip, divider, voice / send / stop) to the right edge */
  /* Reveal the 1px vertical divider between the clip button and the voice cluster */
  .ide-root .ide-chat-input div.flex.items-end > :last-child > div.hidden.lg\:block {
    display: block !important;
  }
}