/* Shared atmospheric and glass polish. Loaded last so every JARVIS surface
   keeps the same visual language without duplicating page-specific rules. */
:root {
  --j-page-max: 1920px;
  --j-space-depth: #01030a;
  --j-space-panel: rgba(7, 13, 24, .58);
  --j-space-panel-strong: rgba(9, 16, 29, .72);
  --j-space-edge: rgba(202, 237, 255, .17);
  --j-space-edge-hover: rgba(176, 231, 255, .34);
  --j-space-shadow: 0 28px 80px rgba(0, 0, 0, .34), 0 0 44px rgba(64, 158, 220, .045);
}

html {
  min-width: 320px;
  min-height: 100%;
  background: var(--j-space-depth);
}

body {
  position: relative;
  isolation: isolate;
  min-width: 320px;
  min-height: 100dvh;
  background: transparent !important;
}

body::before,
body::after,
.space-scene,
.space-scene::before,
.space-scene::after {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body::before {
  z-index: -5;
  content: "";
  background:
    radial-gradient(ellipse 72% 58% at 8% 6%, rgba(44, 127, 205, .23), transparent 64%),
    radial-gradient(ellipse 58% 50% at 94% 18%, rgba(119, 77, 190, .17), transparent 65%),
    radial-gradient(ellipse 64% 66% at 54% 104%, rgba(23, 139, 161, .15), transparent 67%),
    linear-gradient(148deg, #030712 0%, #01030a 48%, #050513 100%);
  background-size: 125% 125%, 132% 132%, 120% 120%, auto;
  animation: jSpaceBreathe 24s ease-in-out infinite alternate;
}

body::after {
  z-index: -4;
  content: "";
  opacity: .72;
  background-image:
    radial-gradient(circle, rgba(239, 250, 255, .82) 0 1px, transparent 1.35px),
    radial-gradient(circle, rgba(156, 220, 255, .48) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(255, 255, 255, .22) 0 .7px, transparent 1.1px);
  background-position: 13px 21px, 77px 42px, 41px 8px;
  background-size: 142px 142px, 223px 223px, 83px 83px;
  -webkit-mask-image: linear-gradient(to bottom, #000, rgba(0,0,0,.64) 62%, rgba(0,0,0,.28));
  mask-image: linear-gradient(to bottom, #000, rgba(0,0,0,.64) 62%, rgba(0,0,0,.28));
  animation: jStarDrift 70s linear infinite;
}

.space-scene {
  z-index: -3 !important;
  overflow: hidden;
  background: var(--jarvis-background-image, transparent) center / cover no-repeat !important;
}

.space-scene::before,
.space-scene::after {
  content: "";
  inset: -18%;
  opacity: .78;
  will-change: transform;
}

.space-scene::before {
  background:
    radial-gradient(ellipse 30% 24% at 30% 38%, rgba(65, 180, 233, .18), transparent 72%),
    radial-gradient(ellipse 27% 31% at 76% 63%, rgba(137, 93, 224, .14), transparent 70%);
  filter: blur(32px) saturate(122%);
  animation: jNebulaOrbit 32s ease-in-out infinite alternate;
}

.space-scene::after {
  background:
    conic-gradient(from 225deg at 50% 50%, transparent, rgba(106, 211, 241, .075), transparent 28%),
    radial-gradient(circle at 50% 48%, transparent 0 37%, rgba(123, 212, 247, .055) 46%, transparent 60%);
  filter: blur(45px);
  animation: jNebulaCounter 42s ease-in-out infinite alternate;
}

/* Panels stay readable while allowing the ambient scene to remain visible. */
:is(
  .glass, .glass-panel, .glass-surface,
  .j-material-base, .j-material-elevated, .j-material-floating,
  .widget-card, .product-section, .plugin-card,
  .automation-rail, .automation-detail,
  .stage-panel, .inspector, .task-dock,
  .agent-sidebar, .conversation, .message-composer,
  .auth-card, .onboarding-card,
  .launch-metric, .launch-check, .manual-acceptance,
  .admin-panel, .edge-card
) {
  border-color: var(--j-space-edge) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.025) 34%, rgba(99,176,222,.018) 66%),
    var(--j-space-panel) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -1px 0 rgba(120,193,232,.025),
    var(--j-space-shadow) !important;
  -webkit-backdrop-filter: blur(26px) saturate(145%) !important;
  backdrop-filter: blur(26px) saturate(145%) !important;
}

:is(.j-material-elevated, .j-material-floating, .auth-card, .onboarding-card, .edge-card, dialog > *) {
  background:
    linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.035) 32%, rgba(93,172,223,.025) 68%),
    var(--j-space-panel-strong) !important;
}

:is(.product-topbar, .agents-topbar, .launch-topbar, .jarvis-nav) {
  border-color: rgba(205, 239, 255, .18) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.025)), rgba(5, 11, 21, .64) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 18px 54px rgba(0,0,0,.28) !important;
  -webkit-backdrop-filter: blur(24px) saturate(155%) !important;
  backdrop-filter: blur(24px) saturate(155%) !important;
}

:is(input:not([type="checkbox"]):not([type="radio"]), textarea, select, .setting-row, .fact-card, .activity-row, .task-row, .agent-row, .project-row, .note-row) {
  border-color: rgba(203, 235, 255, .12);
  background-color: rgba(3, 8, 17, .46);
}

/* Use modern displays instead of leaving a narrow column floating in space. */
.dashboard-shell {
  width: min(var(--j-page-max), calc(100% - clamp(20px, 2.6vw, 56px))) !important;
}

.product-shell {
  width: min(var(--j-page-max), 100%) !important;
  padding-inline: clamp(14px, 2.5vw, 48px) !important;
}

.command-shell {
  width: 100% !important;
  max-width: none !important;
}

.launch-shell {
  width: min(1600px, calc(100% - clamp(20px, 3vw, 56px))) !important;
}

.control-room-page .app-shell {
  width: min(1100px, calc(100% - clamp(20px, 4vw, 64px))) !important;
}

/* The legacy Control Room now belongs to the same dark space system. */
body.control-room-page {
  color-scheme: dark;
  --page: transparent;
  --text: var(--j-text);
  --muted: var(--j-muted);
  --subtle: var(--j-faint);
  --line: var(--j-border);
  --glass: rgba(8, 14, 25, .62);
  --blue: var(--j-cyan);
  --blue-dark: #68c6ec;
}

.control-room-page main {
  min-height: calc(100dvh - 108px);
}

.control-room-page :is(.loading-view, .empty-view) {
  min-height: clamp(390px, 58dvh, 680px);
}

.control-room-page .soft-light {
  opacity: .45;
  filter: blur(42px);
}

.control-room-page .account-link,
.control-room-page .icon-button {
  color: var(--j-text-soft);
  border: 1px solid var(--j-space-edge);
  background: rgba(255,255,255,.045);
}

.control-room-page :is(.account-link, .icon-button):hover {
  color: var(--j-text);
  background: rgba(255,255,255,.09);
}

.control-room-page .identity-mark {
  border: 1px solid rgba(156,222,250,.24);
  background: radial-gradient(circle, rgba(112,222,255,.2), rgba(255,255,255,.035) 68%);
  box-shadow: inset 0 0 18px rgba(112,222,255,.1), 0 0 22px rgba(78,183,255,.1);
}

.control-room-page :is(.app-header, .empty-view, .proposal-card, .handoff-view, .prompt-panel, .history-item, .proposal-explanation section, .server-state, .icon-button, .reject-button, .secondary-action) {
  color: var(--j-text);
  border-color: var(--j-space-edge);
  background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.02)), rgba(7,13,24,.62);
}

.control-room-page :is(.proposal-explanation p, .handoff-intro, .manual-note, .identity small, .server-state) {
  color: var(--j-muted);
}

.control-room-page .prompt-panel pre {
  color: var(--j-text-soft);
  background: rgba(2, 7, 15, .6);
}

.control-room-page .sheet {
  color: var(--j-text);
  border-color: var(--j-space-edge);
  background: rgba(7, 13, 24, .86);
}

.control-room-page .proposal-sheet :is(input, textarea, select) {
  color: var(--j-text);
  background: rgba(2, 7, 15, .68);
}

/* Tactile motion is reserved for devices that actually hover. */
@media (hover: hover) and (pointer: fine) {
  :is(.j-button, .glass-button, .quiet-button, .primary-action, .primary-button, .send-button, .icon-button, .jarvis-nav a) {
    transition: transform 180ms cubic-bezier(.2,.8,.2,1), border-color 180ms ease, box-shadow 180ms ease, background 180ms ease, color 180ms ease;
  }

  :is(.j-button, .glass-button, .quiet-button, .primary-action, .primary-button, .send-button, .icon-button):hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: var(--j-space-edge-hover) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 12px 30px rgba(0,0,0,.24), 0 0 24px rgba(104,208,238,.08);
  }

  .jarvis-nav a:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 7px 18px rgba(0,0,0,.18);
  }

  :is(.widget-card, .product-section, .plugin-card, .launch-check, .launch-metric, .fact-card, .setup-option, .setup-plugin-link, .automation-list-item, .agent-list-item) {
    transition: transform 220ms cubic-bezier(.2,.8,.2,1), border-color 220ms ease, box-shadow 220ms ease, background-color 220ms ease;
  }

  :is(.widget-card, .plugin-card, .launch-check, .launch-metric, .fact-card, .setup-option, .setup-plugin-link, .automation-list-item, .agent-list-item):hover {
    transform: translateY(-3px);
    border-color: var(--j-space-edge-hover) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 30px 80px rgba(0,0,0,.4), 0 0 34px rgba(88,188,233,.085) !important;
  }

  .dashboard-editing .widget-card:hover,
  .widget-card.dragging,
  .widget-card.resizing {
    transform: none;
  }
}

.brand-mark,
.product-brand img,
.onboarding-brand img,
.auth-brand-mark,
.edge-core {
  filter: drop-shadow(0 0 14px rgba(111, 214, 255, .25));
  animation: jCorePulse 5.5s ease-in-out infinite;
}

@keyframes jSpaceBreathe {
  0% { background-position: 0% 0%, 100% 0%, 45% 100%, 0 0; }
  100% { background-position: 8% 7%, 91% 11%, 58% 92%, 0 0; }
}

@keyframes jStarDrift {
  to { background-position: 155px 163px, -146px 265px, 124px -75px; }
}

@keyframes jNebulaOrbit {
  0% { transform: translate3d(-3%, -2%, 0) rotate(-2deg) scale(.98); }
  100% { transform: translate3d(5%, 4%, 0) rotate(4deg) scale(1.07); }
}

@keyframes jNebulaCounter {
  0% { transform: translate3d(4%, -3%, 0) rotate(3deg) scale(1.04); }
  100% { transform: translate3d(-4%, 4%, 0) rotate(-5deg) scale(.97); }
}

@keyframes jCorePulse {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(111,214,255,.18)); }
  50% { filter: drop-shadow(0 0 20px rgba(111,214,255,.42)); }
}

@media (min-width: 1800px) {
  .product-content { max-width: none !important; }
  .launch-summary { grid-template-columns: repeat(4, minmax(220px, 1fr)); }
  .check-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  body::after { opacity: .5; }
  .space-scene::before { filter: blur(26px) saturate(115%); }

  :is(
    .glass, .glass-panel, .glass-surface,
    .j-material-base, .j-material-elevated, .j-material-floating,
    .widget-card, .product-section, .plugin-card,
    .automation-rail, .automation-detail,
    .stage-panel, .inspector, .task-dock,
    .agent-sidebar, .conversation, .message-composer,
    .auth-card, .onboarding-card,
    .launch-metric, .launch-check, .manual-acceptance,
    .admin-panel, .edge-card
  ) {
    -webkit-backdrop-filter: blur(18px) saturate(135%) !important;
    backdrop-filter: blur(18px) saturate(135%) !important;
  }

  /* A blurred ancestor becomes the containing block for fixed descendants.
     Keep the phone top bars translucent but let the shared nav anchor to the
     actual viewport instead of covering each page heading. */
  :is(.topbar, .product-topbar, .agents-topbar) {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .dashboard-shell,
  .launch-shell,
  .control-room-page .app-shell {
    width: calc(100% - 20px) !important;
  }

  .product-shell { padding-inline: 10px !important; }
  .control-room-page :is(.loading-view, .empty-view) { min-height: min(62dvh, 520px); }
}

@media (max-width: 380px) {
  .dashboard-shell,
  .launch-shell,
  .control-room-page .app-shell { width: calc(100% - 14px) !important; }
  .product-shell { padding-inline: 7px !important; }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after,
  .space-scene::before,
  .space-scene::after,
  .brand-mark,
  .product-brand img,
  .onboarding-brand img,
  .auth-brand-mark,
  .edge-core {
    animation: none !important;
  }
}

html[data-effects="reduced"] body::before,
html[data-effects="reduced"] body::after,
html[data-effects="reduced"] .space-scene::before,
html[data-effects="reduced"] .space-scene::after,
body[data-effects="reduced"]::before,
body[data-effects="reduced"]::after,
body[data-effects="reduced"] .space-scene::before,
body[data-effects="reduced"] .space-scene::after {
  animation: none !important;
}

html[data-background-performance="static"] :is(body::before, body::after, .space-scene::before, .space-scene::after),
html[data-background-performance="reduced"] :is(body::before, body::after, .space-scene::before, .space-scene::after) {
  animation: none !important;
}

@media (forced-colors: active) {
  body::before,
  body::after,
  .space-scene { display: none; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :is(.glass, .glass-panel, .glass-surface, .j-material-base, .j-material-elevated, .j-material-floating, .widget-card, .product-section, .plugin-card) {
    background: rgba(9, 16, 29, .96) !important;
  }
}