/* AI Project Universe V6.8 + V5.2 Navbar — final mobile polish */

/* --------------------------------------------------------------------------
   1. PROJECT VIEWER: compact, single-row, horizontally swipeable controls
   -------------------------------------------------------------------------- */
@media (max-width:760px){
  .viewer[open],#projectViewer[open]{
    display:grid!important;
    grid-template-rows:62px minmax(0,1fr)!important;
    grid-template-columns:minmax(0,1fr)!important;
  }
  .viewer .viewer__bar{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    flex-wrap:nowrap!important;
    gap:8px!important;
    width:100%!important;
    max-width:100vw!important;
    height:62px!important;
    min-height:62px!important;
    max-height:62px!important;
    padding:7px 9px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    overscroll-behavior-inline:contain!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-x!important;
    scroll-snap-type:x proximity!important;
    scroll-padding-inline:9px!important;
    scrollbar-width:thin!important;
    scrollbar-color:#111 transparent!important;
    background:#ffe100!important;
    color:#111!important;
    border-bottom:4px solid #111!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .viewer .viewer__bar::-webkit-scrollbar{height:4px!important}
  .viewer .viewer__bar::-webkit-scrollbar-track{background:transparent!important}
  .viewer .viewer__bar::-webkit-scrollbar-thumb{background:#111!important;border-radius:99px!important}
  .viewer .viewer__bar>div:first-child{
    flex:0 0 auto!important;
    min-width:max-content!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    scroll-snap-align:start!important;
  }
  .viewer .viewer__badge{
    flex:0 0 auto!important;
    min-width:43px!important;
    height:42px!important;
    padding:0 8px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    color:#111!important;
    background:#fff!important;
    border:3px solid #111!important;
    border-radius:9px!important;
    font:900 9px/1 ui-monospace,SFMono-Regular,Consolas,monospace!important;
  }
  .viewer #viewerTitle{
    display:block!important;
    flex:0 0 auto!important;
    min-width:max-content!important;
    max-width:none!important;
    overflow:visible!important;
    white-space:nowrap!important;
    color:#111!important;
    font:900 11px/1.15 ui-monospace,SFMono-Regular,Consolas,monospace!important;
  }
  .viewer .viewer__actions{
    flex:0 0 auto!important;
    width:max-content!important;
    min-width:max-content!important;
    max-width:none!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    flex-wrap:nowrap!important;
    gap:7px!important;
    scroll-snap-align:start!important;
  }
  .viewer .viewer__display-controls{
    order:0!important;
    flex:0 0 auto!important;
    width:auto!important;
    min-width:max-content!important;
    display:inline-flex!important;
    align-items:center!important;
    flex-wrap:nowrap!important;
    gap:7px!important;
  }
  .viewer .viewer__display-controls button,
  .viewer .viewer__display-controls label,
  .viewer .viewer__actions>a,
  .viewer .viewer__actions>button{
    position:relative!important;
    inset:auto!important;
    flex:0 0 44px!important;
    width:44px!important;
    min-width:44px!important;
    max-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    max-height:44px!important;
    margin:0!important;
    padding:0!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    border:3px solid #111!important;
    border-radius:9px!important;
    color:#111!important;
    background:#fff!important;
    box-shadow:none!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    scroll-snap-align:start!important;
    font-size:0!important;
    line-height:1!important;
  }
  .viewer .viewer__theme-control .viewer__control-icon{
    display:block!important;
    font:900 20px/1 system-ui,sans-serif!important;
  }
  .viewer #viewerThemeLabel{display:none!important}
  .viewer .viewer__language-control .viewer__control-icon{
    display:block!important;
    font-size:0!important;
  }
  .viewer .viewer__language-control .viewer__control-icon::before{
    content:'文';
    font:900 20px/1 system-ui,sans-serif!important;
  }
  .viewer .viewer__language-control::after{display:none!important}
  .viewer .viewer__language-control select{
    position:absolute!important;
    inset:0!important;
    z-index:3!important;
    display:block!important;
    width:100%!important;
    min-width:100%!important;
    max-width:100%!important;
    height:100%!important;
    padding:0!important;
    border:0!important;
    opacity:0!important;
    cursor:pointer!important;
  }
  .viewer #viewerStandalone::before{content:'⛶';font:900 22px/1 system-ui,sans-serif!important}
  .viewer #viewerDownload::before{content:'🔒';font:900 17px/1 system-ui,sans-serif!important}
  .viewer #viewerMusic::before{content:'♫';font:900 22px/1 system-ui,sans-serif!important}
  .viewer #viewerClose::before{content:'×';font:900 27px/1 system-ui,sans-serif!important}
  .viewer #viewerStandalone{color:#111!important;background:#fff!important}
  .viewer #viewerDownload{color:#111!important;background:#fff!important}
  .viewer #viewerMusic{color:#111!important;background:#f4f4f4!important}
  .viewer #viewerClose{color:#fff!important;background:#ff2878!important}
  .viewer #viewerClose::after{content:none!important}
  .viewer #viewerStandalone,.viewer #viewerDownload,.viewer #viewerMusic{display:inline-flex!important}
  .viewer #viewerFrame{width:100%!important;max-width:100%!important;height:100%!important;min-height:0!important}
  .viewer .viewer__loading{inset:62px 0 0!important}
}

/* --------------------------------------------------------------------------
   2. Shared V5.2-style mobile navbar for CV, Incident, and Student Performance
   -------------------------------------------------------------------------- */
.apu-final-mobile-bar,
.apu-final-mobile-drawer,
.apu-final-mobile-scrim{display:none}

@media (max-width:54rem){
  html[data-apu-final-mobile-nav='true'],
  html[data-apu-final-mobile-nav='true'] body{
    width:100%!important;
    min-width:0!important;
    height:auto!important;
    max-height:none!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    position:static!important;
    touch-action:pan-y pinch-zoom!important;
    -webkit-overflow-scrolling:touch!important;
  }
  html.apu-final-nav-open,
  html.apu-final-nav-open body{
    overflow:hidden!important;
    overscroll-behavior:none!important;
  }
  .apu-final-mobile-bar{
    position:sticky!important;
    top:0!important;
    z-index:2147483100!important;
    display:grid!important;
    grid-template-columns:44px minmax(0,1fr) 40px!important;
    align-items:center!important;
    gap:10px!important;
    width:100%!important;
    min-height:64px!important;
    padding:max(9px,env(safe-area-inset-top)) 10px 9px!important;
    color:#f8fbff!important;
    background:#0d1a2e!important;
    border-bottom:1px solid #29415f!important;
    box-shadow:0 10px 28px rgba(0,0,0,.28)!important;
  }
  .apu-final-mobile-menu,
  .apu-final-mobile-exit,
  .apu-final-drawer-close{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    padding:0!important;
    border:1px solid #385779!important;
    border-radius:11px!important;
    background:#132640!important;
    color:#fff!important;
    cursor:pointer!important;
    touch-action:manipulation!important;
  }
  .apu-final-mobile-menu span{
    position:relative!important;
    width:22px!important;
    height:16px!important;
  }
  .apu-final-mobile-menu span::before,
  .apu-final-mobile-menu span::after,
  .apu-final-mobile-menu span i{
    content:'';
    position:absolute!important;
    left:0!important;
    width:22px!important;
    height:2px!important;
    border-radius:99px!important;
    background:currentColor!important;
  }
  .apu-final-mobile-menu span::before{top:0!important}
  .apu-final-mobile-menu span i{top:7px!important}
  .apu-final-mobile-menu span::after{top:14px!important}
  .apu-final-mobile-brand{min-width:0!important}
  .apu-final-mobile-brand strong,
  .apu-final-mobile-brand small{
    display:block!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  .apu-final-mobile-brand strong{
    color:#fff!important;
    font:850 14px/1.18 system-ui,-apple-system,'Segoe UI',sans-serif!important;
  }
  .apu-final-mobile-brand small{
    margin-top:3px!important;
    color:#9fb1c8!important;
    font:650 10px/1.15 system-ui,-apple-system,'Segoe UI',sans-serif!important;
    letter-spacing:.05em!important;
    text-transform:uppercase!important;
  }
  .apu-final-mobile-exit{width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important;font:900 23px/1 system-ui,sans-serif!important}
  .apu-final-mobile-scrim{
    position:fixed!important;
    inset:0!important;
    z-index:2147483090!important;
    display:block!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
    border:0!important;
    padding:0!important;
    background:rgba(2,7,15,.68)!important;
    transition:opacity .2s ease,visibility 0s linear .2s!important;
  }
  .apu-final-mobile-scrim.is-open{
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    transition:opacity .2s ease!important;
  }
  .apu-final-mobile-drawer{
    position:fixed!important;
    inset:0 auto 0 0!important;
    z-index:2147483200!important;
    display:flex!important;
    flex-direction:column!important;
    width:min(86vw,340px)!important;
    max-width:340px!important;
    height:100dvh!important;
    max-height:100dvh!important;
    padding:max(12px,env(safe-area-inset-top)) 12px max(16px,env(safe-area-inset-bottom))!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    background:#0b1728!important;
    color:#fff!important;
    border-right:1px solid #29415f!important;
    box-shadow:20px 0 55px rgba(0,0,0,.46)!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translate3d(-105%,0,0)!important;
    transition:transform .22s ease,visibility 0s linear .22s!important;
  }
  .apu-final-mobile-drawer.is-open{
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translate3d(0,0,0)!important;
    transition:transform .22s ease!important;
  }
  .apu-final-drawer-head{
    position:sticky!important;
    top:0!important;
    z-index:2!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 40px!important;
    align-items:center!important;
    gap:10px!important;
    min-height:56px!important;
    margin:-12px -12px 10px!important;
    padding:max(12px,env(safe-area-inset-top)) 12px 10px!important;
    background:#0b1728!important;
    border-bottom:1px solid #29415f!important;
  }
  .apu-final-drawer-head strong{display:block!important;font:850 15px/1.2 system-ui,sans-serif!important}
  .apu-final-drawer-head small{display:block!important;margin-top:3px!important;color:#9fb1c8!important;font:650 10px/1.2 system-ui,sans-serif!important}
  .apu-final-drawer-close{width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important;font:900 23px/1 system-ui,sans-serif!important}
  .apu-final-mobile-links{display:grid!important;gap:7px!important;width:100%!important}
  .apu-final-mobile-links a{
    display:grid!important;
    grid-template-columns:34px minmax(0,1fr)!important;
    align-items:center!important;
    gap:10px!important;
    width:100%!important;
    min-height:48px!important;
    padding:8px 11px!important;
    border:1px solid transparent!important;
    border-radius:11px!important;
    color:#aebed2!important;
    background:rgba(255,255,255,.035)!important;
    text-decoration:none!important;
    font:760 13px/1.25 system-ui,sans-serif!important;
  }
  .apu-final-mobile-links a span:first-child{
    width:34px!important;
    height:34px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:9px!important;
    color:#dce8f7!important;
    background:#142b49!important;
    font-size:16px!important;
  }
  .apu-final-mobile-links a[aria-current='page']{
    color:#fff!important;
    background:#17345f!important;
    border-color:#2c65ad!important;
  }
  .apu-final-mobile-links a[aria-current='page'] span:first-child{background:#205299!important}

  /* Remove legacy mobile bars/drawers so there is exactly one navbar. */
  html[data-scroll-theme='computer-vision'] .apu-v52-cv-bar,
  html[data-scroll-theme='computer-vision'] .apu-v52-cv-scrim,
  html[data-scroll-theme='computer-vision'] .apu-v54-cv-mobile-bar,
  html[data-scroll-theme='computer-vision'] .apu-v54-cv-mobile-drawer,
  html[data-scroll-theme='computer-vision'] .apu-v54-cv-mobile-scrim,
  html[data-scroll-theme='student-performance'] .apu-v5-mobile-project-bar,
  html[data-scroll-theme='student-performance'] .apu-v5-mobile-nav-drawer,
  body.project-incident-monitoring .incident-mobile-button,
  body.project-incident-monitoring .incident-mobile-backdrop{
    display:none!important;
  }
  [data-apu-final-original-sidebar='true'],
  [data-apu-final-legacy-header='true']{display:none!important}

  html[data-scroll-theme='computer-vision'] #root,
  html[data-scroll-theme='computer-vision'] #root>div,
  html[data-scroll-theme='computer-vision'] main,
  html[data-scroll-theme='incident-monitoring'] #root,
  html[data-scroll-theme='incident-monitoring'] #root>div,
  html[data-scroll-theme='incident-monitoring'] main,
  html[data-scroll-theme='student-performance'] #root,
  html[data-scroll-theme='student-performance'] #root>div,
  html[data-scroll-theme='student-performance'] .sp-app,
  html[data-scroll-theme='student-performance'] .sp-main{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    max-height:none!important;
    min-height:0!important;
    margin:0!important;
    overflow:visible!important;
    position:static!important;
  }
  html[data-scroll-theme='computer-vision'] main{
    padding:18px 12px max(64px,env(safe-area-inset-bottom))!important;
  }
  html[data-scroll-theme='computer-vision'] main>div,
  html[data-scroll-theme='computer-vision'] main [class~='h-full']{
    height:auto!important;
    min-height:0!important;
  }
  html[data-scroll-theme='computer-vision'] main>div>header:first-child{
    margin-top:0!important;
    padding-top:0!important;
  }
  html[data-scroll-theme='incident-monitoring'] body.project-incident-monitoring{
    overflow-x:hidden!important;
    overflow-y:auto!important;
    background:#07101d!important;
  }
  html[data-scroll-theme='incident-monitoring'] body.project-incident-monitoring #root,
  html[data-scroll-theme='incident-monitoring'] body.project-incident-monitoring #root>div{
    height:auto!important;
    min-height:0!important;
  }
  html[data-scroll-theme='incident-monitoring'] body.project-incident-monitoring main{
    padding-top:14px!important;
    padding-bottom:max(64px,env(safe-area-inset-bottom))!important;
    overflow:visible!important;
  }
  html[data-scroll-theme='student-performance'] .sp-sidebar{display:none!important}
  html[data-scroll-theme='student-performance'] .sp-main{
    padding:18px 12px max(64px,env(safe-area-inset-bottom))!important;
  }
}

/* --------------------------------------------------------------------------
   3. AI Architect mobile burger + reliable vertical scrolling
   -------------------------------------------------------------------------- */
@media (max-width:767px){
  html[data-scroll-theme='ai-architect'],
  html[data-scroll-theme='ai-architect'] body{
    width:100%!important;
    min-width:0!important;
    min-height:100%!important;
    height:auto!important;
    max-height:none!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    position:static!important;
    touch-action:pan-y pinch-zoom!important;
    -webkit-overflow-scrolling:touch!important;
  }
  html[data-scroll-theme='ai-architect'] #root,
  html[data-scroll-theme='ai-architect'] #root>div{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:100dvh!important;
    max-height:none!important;
    overflow:visible!important;
  }
  html[data-scroll-theme='ai-architect'] .ai-architect-header{
    position:sticky!important;
    top:0!important;
    z-index:2147483000!important;
    display:flex!important;
    min-height:60px!important;
    height:60px!important;
    padding:8px 10px!important;
    background:#0d1a2e!important;
    border-bottom:1px solid #29415f!important;
    box-shadow:0 10px 26px rgba(0,0,0,.28)!important;
  }
  html[data-scroll-theme='ai-architect'] .ai-architect-header .ai-menu-trigger{
    order:-10!important;
    display:inline-flex!important;
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    margin:0!important;
    border:1px solid #385779!important;
    border-radius:11px!important;
    background:#132640!important;
    color:#fff!important;
  }
  html[data-scroll-theme='ai-architect'] .ai-architect-drawer{
    inset:60px auto 0 0!important;
    width:min(86vw,340px)!important;
    max-width:340px!important;
    height:calc(100dvh - 60px)!important;
    max-height:calc(100dvh - 60px)!important;
    border-radius:0!important;
    border:0!important;
    border-right:1px solid #29415f!important;
    background:#0b1728!important;
    overflow:hidden!important;
  }
  html[data-scroll-theme='ai-architect'] .ai-architect-drawer nav{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:7px!important;
    width:100%!important;
    height:100%!important;
    max-height:100%!important;
    padding:12px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }
  html[data-scroll-theme='ai-architect'] .ai-architect-drawer nav>a,
  html[data-scroll-theme='ai-architect'] .ai-architect-drawer nav>a>div{
    width:100%!important;
    min-width:0!important;
    min-height:48px!important;
  }
  html[data-scroll-theme='ai-architect'] .ai-architect-main,
  html[data-scroll-theme='ai-architect'] main{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    position:static!important;
  }
}

/* --------------------------------------------------------------------------
   4. SentiScope Model Evaluation: never render as a white/empty screen
   -------------------------------------------------------------------------- */
html[data-scroll-theme='sentiment-analysis'] body{
  background:#030711!important;
}
html[data-scroll-theme='sentiment-analysis'] #root{
  min-height:100dvh!important;
  background:#030711!important;
  color:#e7eef9!important;
}
.apu-model-fallback{
  min-height:100dvh;
  padding:24px;
  color:#e7eef9;
  background:
    linear-gradient(rgba(34,211,238,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(34,211,238,.035) 1px,transparent 1px),
    #030711;
  background-size:48px 48px;
  font-family:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
}
.apu-model-fallback__inner{width:min(1080px,100%);margin:0 auto}
.apu-model-fallback__eyebrow{margin:0 0 8px;color:#22d3ee;font:800 11px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase}
.apu-model-fallback h1{margin:0;color:#fff;font-size:clamp(2rem,7vw,3.7rem);line-height:1.02;letter-spacing:-.04em}
.apu-model-fallback__lead{max-width:780px;margin:14px 0 24px;color:#93a4bc;line-height:1.65}
.apu-model-fallback__metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}
.apu-model-card{padding:18px;border:1px solid #243a58;border-radius:14px;background:#0d1829;box-shadow:0 12px 32px rgba(0,0,0,.2)}
.apu-model-card small{display:block;color:#71839d;font:750 10px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase}
.apu-model-card strong{display:block;margin-top:9px;color:#fff;font-size:2rem;line-height:1}
.apu-model-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px;margin-top:16px}
.apu-model-section{padding:18px;border:1px solid #243a58;border-radius:14px;background:#0d1829}
.apu-model-section h2{margin:0 0 14px;color:#fff;font-size:1rem}
.apu-model-matrix{width:100%;border-collapse:separate;border-spacing:6px;text-align:center;font:750 12px/1 ui-monospace,SFMono-Regular,Consolas,monospace}
.apu-model-matrix th{padding:5px;color:#71839d;font-weight:700}
.apu-model-matrix td{height:52px;border:1px solid #2b496d;border-radius:9px;background:#10233b;color:#dbeafe}
.apu-model-matrix td.is-correct{background:#0c3a34;color:#62f0b3;border-color:#176153}
.apu-model-errors{display:grid;gap:10px}
.apu-model-error{padding:13px;border:1px solid #263b58;border-radius:11px;background:#081321}
.apu-model-error p{margin:0 0 8px;color:#dce7f7;font-size:.9rem;line-height:1.5}
.apu-model-error div{display:flex;flex-wrap:wrap;gap:7px;color:#8294ad;font:700 10px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace}
.apu-model-pill{padding:5px 8px;border-radius:999px;background:#132a47;color:#b8d6ff}
@media(max-width:760px){
  .apu-model-fallback{padding:18px 12px 64px}
  .apu-model-fallback__metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .apu-model-grid{grid-template-columns:minmax(0,1fr)}
  .apu-model-card{padding:15px}
  .apu-model-card strong{font-size:1.6rem}
  .apu-model-section{padding:14px}
  .apu-model-matrix{min-width:330px}
  .apu-model-matrix-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* Final precedence safeguards for legacy scripts and exact sizing. */
@media (max-width:760px){
  .viewer,.viewer *{box-sizing:border-box!important}
}
@media (max-width:54rem){
  html[data-scroll-theme='computer-vision'] .apu-final-mobile-bar.apu-v52-cv-bar,
  html[data-scroll-theme='student-performance'] .apu-final-mobile-bar.apu-v5-mobile-project-bar{
    display:grid!important;
  }
}