/* AIEXAMBOT App Smooth Layer
   Purpose: phone/browser/PWA-like smooth layout without changing PHP logic/design.
   Loaded last so it only fixes overflow, overlap, touch-scroll and mobile stability. */

*{box-sizing:border-box;}
html{width:100%;max-width:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;}
body{width:100%;max-width:100%;min-width:0!important;overflow-x:hidden!important;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overscroll-behavior-y:contain;touch-action:manipulation;}
body,a,button,input,select,textarea{-webkit-tap-highlight-color:rgba(16,185,129,.14);}
img,svg,video,canvas,iframe{max-width:100%;height:auto;}
iframe{border:0;}
pre,code{max-width:100%;overflow:auto;white-space:pre-wrap;word-break:break-word;}
table{max-width:100%;border-collapse:collapse;}
input,select,textarea,button{max-width:100%;font:inherit;}
input,select,textarea{font-size:16px!important;}
button,a,[role="button"]{touch-action:manipulation;}

/* Avoid long text/URLs causing horizontal scroll */
.card,.test-card,.series-card,.note-card,.attempt-card,.profile-card,.wallet-card,.type-row,.ref-card,.pyp-card,
.bg-white,section,article,main,header,footer,nav,div,p,h1,h2,h3,h4,h5,h6,span,a,button{min-width:0;overflow-wrap:anywhere;}

/* Smooth scroll containers */
.scroll-x,.overflow-x-auto,[class*="overflow-x"],.table-wrap{max-width:100%;-webkit-overflow-scrolling:touch;scrollbar-width:thin;}

/* Universal app safe-area variables */
:root{--app-bottom-safe:env(safe-area-inset-bottom,0px);--app-top-safe:env(safe-area-inset-top,0px);--app-vh:1vh;--app-bottom-nav-h:72px;}

/* Bottom navigation stability */
.bot-nav,nav.fixed.bottom-0,nav[class*="bottom-0"],.bottom-nav,.app-bottom-nav{
  transform:translateZ(0);backface-visibility:hidden;contain:layout paint;will-change:transform;
  padding-bottom:max(8px,var(--app-bottom-safe))!important;
}
body:has(.bot-nav),body:has(nav.fixed.bottom-0),body:has(nav[class*="bottom-0"]){padding-bottom:calc(var(--app-bottom-nav-h) + var(--app-bottom-safe) + 10px)!important;}

/* Fixed/sticky header stability */
.hdr,.topbar,header.sticky,header.fixed,.sticky.top-0{transform:translateZ(0);backface-visibility:hidden;}

@media(max-width:767px){
  html,body{min-height:calc(var(--app-vh) * 100);}
  body{padding-left:0!important;margin:0!important;}
  body::before{max-width:100vw!important;}
  .student-desktop-sidebar{display:none!important;}

  /* All main wrappers should fit phone width */
  main,.main,.page,.wrap,.container,.content,.shell,.app-wrap,.content-area,.hero,.top-tabs-inner,
  .series-shell,.series-page,.test-series-shell,.tests-shell,.max-w-xl,.max-w-lg,.max-w-md,.max-w-sm{
    width:100%!important;max-width:100%!important;min-width:0!important;margin-left:0!important;margin-right:0!important;
  }
  main,.main,.page,.wrap,.container,.content,.shell,.app-wrap,.content-area{padding-left:12px!important;padding-right:12px!important;}
  header .max-w-xl,header .max-w-lg,header .max-w-md,header .max-w-sm{padding-left:12px!important;padding-right:12px!important;}

  /* Header cannot overflow/shift on mobile */
  .hdr,.topbar,header.fixed,header[class*="fixed"],header.sticky,.sticky.top-0{
    left:0!important;right:0!important;width:100%!important;max-width:100%!important;
  }
  .hdr-inner,.hdr-in,.top-in,.header-in,.nav-in{width:100%!important;max-width:100%!important;padding-left:12px!important;padding-right:12px!important;}

  /* Cards and rows: app style, no overlap */
  .card,.test-card,.series-card,.note-card,.attempt-card,.leader-card,.profile-card,.wallet-card,.type-row,.pyp-card,.ref-card,
  .cat-group-rows,.stats-strip,.tabs-wrap,.bg-white{
    max-width:100%!important;min-width:0!important;border-radius:16px!important;
  }
  .grid,[class*="grid-cols"],.desktop-action-card{min-width:0!important;}
  .grid{gap:12px;}
  .flex{min-width:0;}
  .flex>*{min-width:0;}
  .truncate{min-width:0;max-width:100%;}

  /* Any desktop multi-column rule becomes safe on small screens */
  .desktop-action-card,.dashboard-grid,.stats-grid,.plans-grid,.pricing-grid,.profile-grid,.wallet-grid{
    grid-template-columns:1fr!important;
  }

  /* Buttons/chips should wrap instead of hiding behind each other */
  .tabs,.chips,.chip-row,.actions,.btn-row,.filter-row,.top-tabs-inner,.cat-row,.level-row{
    max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .tabs::-webkit-scrollbar,.chips::-webkit-scrollbar,.chip-row::-webkit-scrollbar,.actions::-webkit-scrollbar,.btn-row::-webkit-scrollbar,.filter-row::-webkit-scrollbar,.top-tabs-inner::-webkit-scrollbar{display:none;}
  button,.btn,a.btn,.action-btn,.desktop-action-btn{min-height:42px;}

  /* Tables/questions/options images stay inside screen */
  table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .question-card,.question-box,.option,.opt,.option-row,.solution-card{max-width:100%!important;overflow:hidden;}
  .question-card img,.question-box img,.solution-card img,.option img,.opt img{max-width:100%!important;height:auto!important;object-fit:contain;}

  /* Prevent mobile keyboard/open focus layout jumps as much as browser allows */
  input,select,textarea{font-size:16px!important;line-height:1.35!important;}
  textarea{resize:vertical;}

  /* Modals/popups stay within phone viewport */
  .modal,.popup,.sheet,.dialog,[role="dialog"]{max-width:calc(100vw - 24px)!important;max-height:calc((var(--app-vh) * 100) - 24px)!important;overflow:auto!important;-webkit-overflow-scrolling:touch;}

  /* Fixed bottom forms/search boxes should not hide behind browser safe area */
  .fixed.bottom-0:not(nav),.sticky.bottom-0:not(nav){padding-bottom:max(12px,var(--app-bottom-safe))!important;}
}

@media(max-width:390px){
  main,.main,.page,.wrap,.container,.content,.shell,.app-wrap,.content-area{padding-left:10px!important;padding-right:10px!important;}
  .card,.test-card,.series-card,.note-card,.attempt-card,.profile-card,.wallet-card,.type-row{border-radius:14px!important;}
  h1{font-size:clamp(20px,6vw,28px)!important;}
  h2{font-size:clamp(17px,5vw,23px)!important;}
  .btn,a.btn,button{font-size:14px;}
}

/* Exam pages must remain focused and full-screen, only overflow-safe */
body.exam-page,body.test-page,body.take-test-page{padding-left:0!important;overflow-x:hidden!important;}
body.exam-page main,body.test-page main,body.take-test-page main{max-width:100%!important;}

/* ============================================================
   AIEXAMBOT MOBILE OVERLAP FIX v2
   Fixes reported from phone screenshots:
   1) Center AI bottom button was clipped/half visible on some pages.
      Cause: paint containment/hidden overflow on fixed bottom nav.
   2) Study Room subject chips text was overlapping/innerlapping.
      Cause: global mobile min-width/wrapping rules affected pill chips.
   3) Horizontal category/subject rows now scroll cleanly like an app.
============================================================ */
.bot-nav,
.bot-nav-fixed,
nav.fixed.bottom-0,
nav[class*="bottom-0"],
.bottom-nav,
.app-bottom-nav{
  overflow:visible!important;
  contain:none!important;
  height:72px!important;
  min-height:72px!important;
  padding-bottom:max(6px,var(--app-bottom-safe))!important;
}
.bot-nav-in,
.bot-nav-inner,
.bot-nav .bot-nav-in,
.bot-nav .bot-nav-inner,
nav.fixed.bottom-0 > div,
nav[class*="bottom-0"] > div{
  overflow:visible!important;
  height:66px!important;
  min-height:66px!important;
}
.nav-ai,
.bnav-ai,
.bot-nav .nav-ai,
.bot-nav-fixed .nav-ai,
nav.fixed.bottom-0 .nav-ai,
nav[class*="bottom-0"] .nav-ai{
  overflow:visible!important;
  flex:0 0 auto!important;
  min-width:58px!important;
  top:-16px!important;
  z-index:3!important;
}
.nav-ai-btn,
.bnav-ai-btn,
.bot-nav .nav-ai-btn,
.bot-nav-fixed .nav-ai-btn,
nav.fixed.bottom-0 a[href="ai_search.php"],
nav[class*="bottom-0"] a[href="ai_search.php"]{
  flex:0 0 54px!important;
  width:54px!important;
  height:54px!important;
  min-width:54px!important;
  min-height:54px!important;
  overflow:visible!important;
}
.nav-ai-lbl,
.bnav-ai-lbl,
.bot-nav .nav-ai-lbl,
.bot-nav-fixed .nav-ai-lbl{
  bottom:-15px!important;
  line-height:1.05!important;
  overflow:visible!important;
  white-space:nowrap!important;
}
body:has(.bot-nav),body:has(nav.fixed.bottom-0),body:has(nav[class*="bottom-0"]){
  padding-bottom:calc(84px + var(--app-bottom-safe))!important;
}

/* Study Room / test category chips: no overlap, no text breaking */
.subj-chip,
.cat-chip,
.chip,
.tab-chip,
.level-chip,
.filter-chip,
.top-tabs-inner > *,
.cat-row > *,
.chips-bar > *,
.chip-row > *,
.flex.overflow-x-auto > button,
.flex.overflow-x-auto > a{
  flex:0 0 auto!important;
  min-width:max-content!important;
  max-width:none!important;
  white-space:nowrap!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  text-overflow:clip!important;
}
.subj-chip{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  line-height:1.15!important;
  padding:8px 12px!important;
  min-height:38px!important;
}
.subj-chip .material-symbols-outlined,
.subj-chip .ms{
  flex:0 0 auto!important;
  font-size:15px!important;
  line-height:1!important;
}

/* Search/input rows must not go under fixed nav and must not overflow */
main,.content-area,.page,.app-wrap,.shell{padding-bottom:calc(92px + var(--app-bottom-safe))!important;}


/* AIEXAMBOT PJAX no-reload navigation */
html.aix-pjax-loading{cursor:progress;}
html.aix-pjax-loading body::before{content:'';position:fixed;left:0;right:0;top:0;height:2px;z-index:999999;background:linear-gradient(90deg,var(--brand,#4F46E5),rgba(79,70,229,.15));animation:aixPjaxBar .8s ease-in-out infinite alternate;}
@keyframes aixPjaxBar{from{opacity:.45;transform:scaleX(.25);transform-origin:left}to{opacity:1;transform:scaleX(1);transform-origin:left}}

/* ============================================================
   v20260612 stable page open + warm-load polish
   - hide the document for a very short PJAX swap to avoid raw HTML flash
   - keep desktop pages full width when desktop sidebar is present
   - wallet/study-room canvas consistency fixes
============================================================ */
html.aix-pjax-swapping body{
  opacity:0!important;
  pointer-events:none!important;
}
html.aix-pjax-swapping::after{
  content:'Loading…';
  position:fixed;
  left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:1000000;
  padding:10px 16px;
  border-radius:999px;
  background:rgba(15,23,42,.86);
  color:#fff;
  font:700 12px/1.2 system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  box-shadow:0 10px 30px rgba(15,23,42,.22);
}
@media(min-width:1024px){
  body.has-student-sidebar{padding-left:var(--aeds-sb,300px)!important;}
  body.has-student-sidebar .topbar,
  body.has-student-sidebar header.fixed,
  body.has-student-sidebar header[class*="fixed"],
  body.has-student-sidebar .sticky.top-0{
    left:var(--aeds-sb,300px)!important;
    right:0!important;
    width:calc(100% - var(--aeds-sb,300px))!important;
    max-width:none!important;
    transform:none!important;
  }
  body.has-student-sidebar main,
  body.has-student-sidebar .main,
  body.has-student-sidebar .page,
  body.has-student-sidebar .wrap,
  body.has-student-sidebar .container,
  body.has-student-sidebar .content,
  body.has-student-sidebar .shell,
  body.has-student-sidebar .app-wrap{
    width:100%!important;
    max-width:none!important;
  }
  body.has-student-sidebar main.max-w-2xl,
  body.has-student-sidebar main.max-w-xl,
  body.has-student-sidebar main.max-w-lg,
  body.has-student-sidebar main.max-w-md,
  body.has-student-sidebar main.max-w-sm{
    max-width:none!important;
  }
}