/* ============================================================
   shell.css — App Shell, Navigation Dock, Header, Layout
   Premium AI Intelligence Platform
   ============================================================ */

/* ────────── MAIN LAYOUT ────────── */
main {
  padding: var(--s4) var(--s4) calc(var(--nav-h) + var(--s6));
  max-width: var(--content-max);
  margin: 0 auto;
  /* dvh (dynamic viewport height) accounts for on-screen gesture bars and
     the collapsing URL bar. Plain 100vh is TALLER than the visible area on
     gesture-navigation phones, which made main overflow past the bottom and
     broke scrolling everywhere except near the gesture strip. */
  min-height: 100dvh;
}

section {
  margin-bottom: var(--s8);
  animation: fadeInUp var(--t-base) var(--ease-out) both;
}

section[hidden] {
  animation: none;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Stagger animation for sections */
section:nth-child(1) { animation-delay: 0ms; }
section:nth-child(2) { animation-delay: 50ms; }
section:nth-child(3) { animation-delay: 100ms; }
section:nth-child(4) { animation-delay: 150ms; }

/* ────────── FLOATING NAVIGATION DOCK ────────── */
/* Premium bottom navigation with glassmorphism */
nav[role="tablist"] {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  height: var(--nav-h);
  padding: var(--s2) var(--s4) calc(var(--s2) + env(safe-area-inset-bottom));
  
  /* Solid bg (no backdrop-filter: on fixed elements it blocks page
     scroll/touch on Android & some desktops — the scroll bug). */
  background: rgba(14,14,16,0.98);
  border-top: 1px solid var(--glass-border);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.3),
              0 -1px 0 var(--glass-border);
  
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: var(--s1);
  
  transition: transform var(--t-base) var(--ease-out),
              opacity var(--t-base) var(--ease-out);
}

/* Navigation items */
nav[role="tablist"] button[role="tab"] {
  position: relative;
  flex: 1;
  min-width: 0;
  max-width: 140px;
  height: 56px;
  padding: var(--s2) var(--s3);
  
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  
  color: var(--text-tertiary);
  font-family: var(--font-display);
  font-size: var(--fs-tiny);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
  
  /* Remove default button styles */
  appearance: none;
  outline: none;
  box-shadow: none;
}

/* Hover state */
nav[role="tablist"] button[role="tab"]:hover {
  background: var(--glass-subtle);
  color: var(--text-secondary);
  border-color: var(--border-subtle);
  transform: translateY(-2px);
}

/* Active state */
nav[role="tablist"] button[role="tab"][aria-selected="true"] {
  background: linear-gradient(135deg, var(--gold-wash), transparent);
  color: var(--gold);
  border-color: var(--border-gold);
  box-shadow: 0 0 0 1px var(--border-gold),
              var(--shadow-gold);
  transform: translateY(-2px);
}

/* Icon in navigation */
nav[role="tablist"] button[role="tab"] .ico {
  width: 24px;
  height: 24px;
  transition: transform var(--t-fast) var(--ease-spring);
}

nav[role="tablist"] button[role="tab"]:hover .ico {
  transform: scale(1.1);
}

nav[role="tablist"] button[role="tab"][aria-selected="true"] .ico {
  transform: scale(1.15);
  filter: drop-shadow(0 0 8px var(--gold-glow));
}

/* Live indicator dot */
.livedot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 8px var(--danger-glow),
              0 0 0 2px var(--bg-base);
  animation: livePulse 2s ease-in-out infinite;
}

@keyframes livePulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.2);
  }
}

/* ────────── BACK TO TOP BUTTON ────────── */
#toTop {
  position: fixed;
  bottom: calc(var(--nav-h) + var(--s4));
  right: var(--s4);
  z-index: var(--z-sticky);
  
  width: 48px;
  height: 48px;
  padding: 0;
  
  background: rgba(30,30,36,0.98);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-full);
  
  color: var(--text-primary);
  
  box-shadow: var(--shadow-lg);
  
  cursor: pointer;
  
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.9);
  
  transition: all var(--t-base) var(--ease-spring);
}

#toTop.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

#toTop:hover {
  background: var(--glass-strong);
  border-color: var(--border-gold);
  box-shadow: var(--shadow-gold);
  transform: translateY(-4px) scale(1.05);
}

#toTop:active {
  transform: translateY(-2px) scale(0.98);
}

#toTop .ico {
  width: 20px;
  height: 20px;
}

/* ────────── HEADER ELEMENTS ────────── */
/* Top header bar (if needed) */
header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  height: var(--header-h);
  padding: var(--s3) var(--s5);
  
  background: rgba(14,14,16,0.98);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
  
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
}

/* Header brand section */
header .brand {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-width: 0;
  flex: 1;
}

header .brand img {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}

header .brand > div {
  min-width: 0;
  overflow: hidden;
}

header .brand h1 {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  letter-spacing: 0.01em;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Rich gold-gradient wordmark instead of flat text */
  background: linear-gradient(100deg,
              var(--gold-light, #FCD34D) 0%,
              var(--gold, #F59E0B) 45%,
              var(--gold-light, #FCD34D) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold);              /* fallback if clip unsupported */
  text-shadow: 0 1px 8px rgba(245,158,11,0.15);
}

header .brand em {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-style: normal;
  display: block;
  margin-top: 3px;
}

/* Header actions */
header .head-actions {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-shrink: 0;
}

header .priv {
  font-family: var(--font-display);
  font-size: var(--fs-tiny);
  font-weight: var(--fw-bold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: var(--s1) var(--s3);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-full);
}

/* Theme toggle button */
#btnTheme {
  width: 40px;
  height: 40px;
  min-height: max(36px, calc(40px * var(--zoom-k)));
  padding: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-full);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
  transition: all var(--t-fast) var(--ease-out);
}

#btnTheme::before {
  display: none;
}

#btnTheme:hover {
  background: var(--bg-overlay);
  color: var(--gold);
  border-color: var(--border-gold);
  transform: scale(1.05);
}

/* Show sun/moon based on theme */
#btnTheme .i-moon { display: none; }
#btnTheme .i-sun { display: block; }
:root[data-theme="light"] #btnTheme .i-sun { display: none; }
:root[data-theme="light"] #btnTheme .i-moon { display: block; }

.header-title {
  font-family: var(--font-display);
  font-size: var(--fs-large);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

/* ────────── GUIDE SHEET / MODAL OVERLAY ────────── */
#guideSheet,
#loginView {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  
  /* NO backdrop-filter here: these are full-screen position:fixed
     overlays; backdrop-filter on them creates a compositing layer that
     intercepts page scroll/touch across the whole viewport on Android &
     Chrome — the root scroll bug. Solid scrim instead. */
  background: rgba(6,6,8,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s4);
  
  opacity: 0;
  animation: fadeIn var(--t-base) var(--ease-out) forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

/* Guide panel */
.gs-panel {
  width: 100%;
  max-width: 800px;
  max-height: 90vh;
  
  background: rgba(20,20,24,0.99);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  
  box-shadow: var(--shadow-2xl);
  
  display: flex;
  flex-direction: column;
  
  animation: scaleIn var(--t-base) var(--ease-spring) forwards;
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.gs-head {
  padding: var(--s6) var(--s6) var(--s4);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
}

.gs-head h2 {
  font-size: var(--fs-title);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}

.gs-search {
  position: relative;
  padding: 0 var(--s6);
  margin-top: var(--s4);
}

.gs-search .ico {
  position: absolute;
  left: calc(var(--s6) + var(--s3));
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  pointer-events: none;
}

.gs-search input {
  width: 100%;
  padding-left: 44px;
}

.gs-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--s6);
}

/* Icon button for close */
.iconbtn {
  width: 40px;
  height: 40px;
  padding: 0;
  
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  
  color: var(--text-secondary);
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
}

.iconbtn:hover {
  background: var(--bg-overlay);
  border-color: var(--border-default);
  color: var(--text-primary);
  transform: scale(1.05);
}

.iconbtn:active {
  transform: scale(0.95);
}

/* ────────── FLOATING VIDEO WINDOW ────────── */
#vidPop {
  position: fixed;
  z-index: var(--z-dropdown);
  width: min(92vw, 480px);
  left: calc(50vw - min(46vw, 240px));
  top: 80px;
  
  background: var(--bg-base);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  
  overflow: hidden;
  box-shadow: var(--shadow-2xl);
  
  touch-action: none;
  cursor: move;
  
  animation: popIn var(--t-base) var(--ease-spring) forwards;
}

@keyframes popIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

#vidPop .vbar {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3);
  
  background: var(--glass-strong);
  
  border-bottom: 1px solid var(--border-subtle);
  cursor: grab;
  user-select: none;
}

#vidPop .vbar:active {
  cursor: grabbing;
}

#vidPop .vbar b {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.05em;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#vidPop .vbar button {
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  flex-shrink: 0;
}

#vidPop .vbody {
  aspect-ratio: 16/9;
  background: #000;
}

#vidPop iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

#vidPop.mini .vbody {
  display: none;
}

/* ────────── RESPONSIVE ────────── */
@media (min-width: 768px) {
  main {
    padding: var(--s6) var(--s6) calc(var(--nav-h) + var(--s8));
  }
  
  nav[role="tablist"] button[role="tab"] {
    max-width: 180px;
    font-size: var(--fs-caption);
  }
}

@media (min-width: 1024px) {
  main {
    padding: var(--s8) var(--s8) var(--s8);
  }
  
  /* Desktop: side navigation instead of bottom */
  nav[role="tablist"] {
    top: 0;
    left: 0;
    bottom: 0;
    right: auto;
    width: var(--sidebar-w);
    height: 100vh;
    padding: var(--s6) var(--s4);
    
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--s2);
    
    border-top: none;
    border-right: 1px solid var(--glass-border);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2);
  }
  
  nav[role="tablist"] button[role="tab"] {
    width: 100%;
    max-width: none;
    height: 64px;
    flex-direction: row;
    justify-content: flex-start;
    padding: var(--s4);
    gap: var(--s3);
  }
  
  nav[role="tablist"] button[role="tab"] .ico {
    width: 28px;
    height: 28px;
  }
  
  main {
    margin-left: var(--sidebar-w);
  }
  
  /* Fix header positioning on desktop */
  header {
    margin-left: var(--sidebar-w);
    width: calc(100% - var(--sidebar-w));
  }
  
  #toTop {
    bottom: var(--s6);
  }
}