/* VisionaryOS Sprint 001B — Root Application Canvas
   Authoritative viewport, depth, geometry, padding, scrolling, and overflow rules.
   Frontend presentation only. */

:root {
  --vos-canvas-bg: #020711;
  --vos-canvas-bg-deep: #01040a;
  --vos-canvas-surface: rgba(4, 10, 20, 0.92);
  --vos-canvas-line: rgba(64, 86, 126, 0.18);
  --vos-shell-max: 1920px;
  --vos-page-max: 1680px;
  --vos-header-h: 58px;
  --vos-footer-h: 0px;
  --vos-sidebar-w: 194px;
  --vos-page-pad-x: clamp(18px, 3.15vw, 60px);
  --vos-page-pad-y: clamp(14px, 1.7vw, 28px);
}

html {
  min-width: 320px;
  min-height: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--vos-canvas-bg-deep);
  color-scheme: dark;
}

body {
  width: 100%;
  min-width: 320px;
  min-height: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(80% 52% at 50% -8%, rgba(69, 82, 213, 0.16) 0%, rgba(39, 48, 130, 0.08) 34%, transparent 70%),
    radial-gradient(46% 38% at 100% 0%, rgba(133, 45, 224, 0.10) 0%, transparent 72%),
    radial-gradient(38% 30% at 0% 78%, rgba(28, 103, 191, 0.06) 0%, transparent 74%),
    linear-gradient(180deg, var(--vos-canvas-bg) 0%, var(--vos-canvas-bg-deep) 100%) !important;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

body::before {
  background-image:
    linear-gradient(var(--vos-canvas-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--vos-canvas-line) 1px, transparent 1px);
  background-size: 54px 54px;
  opacity: 0.12;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.82), transparent 66%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.82), transparent 66%);
}

body::after {
  z-index: -1;
  background: radial-gradient(ellipse at center, transparent 48%, rgba(0, 2, 8, 0.52) 100%);
}

.app {
  position: relative;
  isolation: isolate;
  width: min(100%, var(--vos-shell-max));
  min-width: 0;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  margin: 0 auto;
  overflow: hidden;
  display: grid !important;
  grid-template-rows: var(--vos-header-h) minmax(0, 1fr) var(--vos-footer-h) !important;
  background: linear-gradient(180deg, rgba(3, 8, 17, .44), rgba(1, 5, 12, .70));
}

.topbar {
  position: relative !important;
  inset: auto !important;
  width: 100%;
  min-width: 0;
  height: var(--vos-header-h) !important;
  grid-row: 1;
  align-self: stretch;
}

.layout,
.layout.inspector-collapsed,
.layout.founder-sidebar-collapsed,
.layout.founder-sidebar-collapsed.inspector-collapsed {
  grid-row: 2;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto !important;
  max-height: none;
  overflow: hidden;
}

.sidebar,
.main,
.inspector {
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.sidebar,
.inspector {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

.main {
  width: 100%;
  height: 100%;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: var(--vos-page-pad-y) var(--vos-page-pad-x) calc(var(--vos-page-pad-y) + env(safe-area-inset-bottom)) !important;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.main > .page {
  width: min(100%, var(--vos-page-max)) !important;
  min-width: 0;
  margin-inline: auto;
}

.main img,
.main svg,
.main canvas,
.main video,
.main iframe,
.card,
.row,
.out,
.fileitem,
input,
textarea,
select {
  max-width: 100%;
}

.grid,
.grid2,
.executive-panel-grid,
.command-main-grid,
.command-bottom-grid,
.project-metrics,
.command-metrics,
.vos-metric-grid {
  min-width: 0;
}

.statusbar {
  grid-row: 3;
  min-width: 0;
}

/* Unified quiet scrollbars */
.sidebar,
.main,
.inspector,
.chat,
.timeline,
.filelist {
  scrollbar-width: thin;
  scrollbar-color: rgba(104, 116, 177, .42) transparent;
}
.sidebar::-webkit-scrollbar,
.main::-webkit-scrollbar,
.inspector::-webkit-scrollbar,
.chat::-webkit-scrollbar,
.timeline::-webkit-scrollbar,
.filelist::-webkit-scrollbar { width: 7px; height: 7px; }
.sidebar::-webkit-scrollbar-track,
.main::-webkit-scrollbar-track,
.inspector::-webkit-scrollbar-track,
.chat::-webkit-scrollbar-track,
.timeline::-webkit-scrollbar-track,
.filelist::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb,
.main::-webkit-scrollbar-thumb,
.inspector::-webkit-scrollbar-thumb,
.chat::-webkit-scrollbar-thumb,
.timeline::-webkit-scrollbar-thumb,
.filelist::-webkit-scrollbar-thumb {
  background: rgba(104, 116, 177, .34);
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

@media (min-width: 1921px) {
  body { background-color: #01040a; }
  .app { box-shadow: 0 0 110px rgba(0, 0, 0, .62); }
}

@media (max-width: 1180px) {
  :root {
    --vos-sidebar-w: 180px;
    --vos-page-pad-x: clamp(18px, 2.5vw, 34px);
    --vos-page-pad-y: 18px;
  }
}

@media (max-width: 820px) {
  :root {
    --vos-page-pad-x: 18px;
    --vos-page-pad-y: 16px;
  }
  .main > .page { max-width: 100%; }
}

@media (max-width: 720px) {
  :root {
    --vos-header-h: 58px;
    --vos-page-pad-x: 12px;
    --vos-page-pad-y: 13px;
  }

  html,
  body {
    height: 100%;
    overflow: hidden !important;
  }

  body {
    background:
      radial-gradient(115% 46% at 50% -4%, rgba(75, 73, 242, .16), transparent 62%),
      linear-gradient(180deg, #020711 0%, #01040a 100%) !important;
  }

  body::before { background-size: 42px 42px; opacity: .08; }

  .app {
    display: grid !important;
    height: 100vh !important;
    height: 100dvh !important;
    grid-template-rows: var(--vos-header-h) minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  .topbar {
    position: relative !important;
    top: auto !important;
    z-index: 50;
    grid-row: 1;
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
  }

  .layout,
  .layout.inspector-collapsed,
  .layout.founder-sidebar-collapsed,
  .layout.founder-sidebar-collapsed.inspector-collapsed {
    grid-row: 2;
    display: block !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .main {
    height: 100% !important;
    padding:
      var(--vos-page-pad-y)
      max(var(--vos-page-pad-x), env(safe-area-inset-right))
      calc(78px + env(safe-area-inset-bottom))
      max(var(--vos-page-pad-x), env(safe-area-inset-left)) !important;
  }

  .sidebar {
    top: var(--vos-header-h) !important;
    bottom: 0 !important;
    max-height: calc(100dvh - var(--vos-header-h));
    padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
  }

  .statusbar { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .main { scroll-behavior: auto; }
}