/* VioVerse — App Shell (sidebar + container frame)
   Fluid viewport shell that wraps the existing SPA screens.
   Reference viewport: 1440x810. Production fills any viewport.

   FRAME GEOMETRY — consolidated for easy L-frame -> full-frame swap.
   Current: L-frame (orange on left + top only).
   To switch to full 4-side frame: adjust --shell-container-* vars. */

:root {
  --shell-sidebar-w: 63px;
  --shell-top-gap: 10px;
  --shell-container-left: var(--shell-sidebar-w);
  --shell-container-top: var(--shell-top-gap);
  --shell-container-w: calc(100vw - var(--shell-sidebar-w));
  --shell-container-h: calc(100dvh - var(--shell-top-gap));
  --shell-container-radius: 28px 0 0 0; /* top-left only for L-frame */
  --shell-nav-h: 60px;
}

/* === FRAME === */
.app {
  width: 100vw;
  height: 100dvh;
  position: relative;
  background: var(--coral);
  overflow: hidden;
  /* No transform/filter/will-change here — would break position:fixed
     on modals and vault-backdrop that live outside .app or inside
     .container. See ai-investigation-guardrails.md. */
}

/* === SIDEBAR (navigation rail) === */
/* FS-D5 (2026-08-03): the SEVENTH smoothing root. The ruling named six,
   derived from a report whose table was family-focused -- the sidebar
   measured clean on family (`.nav-item span` below declares it) and so
   never appeared on the smoothing list. The re-sweep caught it: the nav
   labels were the last surface still rasterizing without smoothing, and
   they are persistent chrome sitting beside every screen that now has it.
   Declared on the root rather than on `.nav-item span`, matching the
   root-declaration pattern used everywhere else in this lane. */
.sidebar {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--shell-sidebar-w);
  height: 100dvh;
  z-index: 60;
  display: none; /* hidden by default; body.app-framed activates */
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 25px;
  /* Align first nav square's top edge to the topnav's bottom edge.
     topnav is 60px (--shell-nav-h) + container starts at --shell-top-gap (10px)
     = 70px from viewport top. The sidebar starts at viewport y=0, so
     padding-top = 70px aligns the first square with the navbar bottom. */
  padding-top: 70px;
}

.nav-item {
  width: 63px;
  height: 63px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.nav-item svg {
  width: 24px;
  height: 24px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-item span {
  font-size: 10px;
  font-weight: 500;
  color: #fff;
  line-height: 1;
  font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
}

.nav-item.active {
  background: #fff;
}
.nav-item.active svg {
  stroke: var(--coral);
}
.nav-item.active span {
  color: var(--coral);
}
.nav-item:not(.active):hover {
  background: rgba(255, 255, 255, 0.14);
}

/* === CONTAINER (bone-cream content area) === */
.container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100dvh;
  background: var(--bone-0);
  border-radius: 0;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 10;
  /* No transform/filter/will-change — see .app comment. */
}

/* Custom scrollbar (AG-8: scrollbar-width/scrollbar-color in @supports
   only -- Chrome 121+ discards all webkit styling when they coexist,
   AND scrollbar-color inherits to descendants, poisoning their webkit
   rules too) */
.container::-webkit-scrollbar { width: 12px; }
.container::-webkit-scrollbar-track { background: transparent; margin: 14px 0; }
.container::-webkit-scrollbar-button { display: none; }
.container::-webkit-scrollbar-thumb {
  background: #E0E3E7;
  background-clip: padding-box;
  border: 5px solid transparent;
  border-radius: 99px;
}
.container::-webkit-scrollbar-thumb:hover,
.container::-webkit-scrollbar-thumb:active {
  border-width: 2px;
  background-color: #D5D8DC;
}
@supports not selector(::-webkit-scrollbar) {
  .container {
    scrollbar-width: thin;
    scrollbar-color: #E0E3E7 transparent;
  }
}

/* === FRAMED STATE (body.app-framed) ===
   Activated by JS when: authenticated AND on a destination screen
   (results, zero-flags, home). Sidebar + orange L-frame appear. */

body.app-framed .sidebar {
  display: block;
}

body.app-framed .container {
  left: var(--shell-container-left);
  top: var(--shell-container-top);
  width: var(--shell-container-w);
  height: var(--shell-container-h);
  border-radius: var(--shell-container-radius);
}


/* === MOBILE: sidebar -> bottom tab bar at <= 768px === */
@media (max-width: 768px) {
  :root {
    --shell-tab-bar-h: 56px;
  }

  .sidebar {
    position: fixed;
    bottom: 0;
    left: 0;
    top: auto;
    width: 100vw;
    height: var(--shell-tab-bar-h);
    padding-bottom: env(safe-area-inset-bottom); /* iPhone home indicator */
    display: none; /* still gated on body.app-framed */
    align-items: center;
    justify-content: center;
    background: var(--coral);
    z-index: 60;
  }

  body.app-framed .sidebar {
    display: flex;
  }

  .sidebar-nav {
    flex-direction: row;
    gap: 0;
    padding-top: 0;
    width: 100%;
  }

  .nav-item {
    width: auto;
    height: var(--shell-tab-bar-h);
    flex: 1; /* even tap targets */
    gap: 4px;
  }

  .nav-item span {
    font-size: 10px; /* matches desktop sidebar */
  }

  .nav-item svg {
    width: 22px;
    height: 22px;
  }

  /* Container: full width, no L-frame, leaves room for tab bar */
  .container {
    left: 0;
    top: 0;
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
  }

  body.app-framed .container {
    left: 0;
    top: 0;
    width: 100vw;
    height: calc(100dvh - var(--shell-tab-bar-h) - env(safe-area-inset-bottom));
    border-radius: 0;
  }

  /* No orange L-frame on mobile */
  body.app-framed .app {
    background: var(--bone-0);
  }
}