/*
 * Digitera V4400
 * Mobile-only: compact premium bottom dock + sticky header everywhere.
 * Desktop/tablet >= 768px is intentionally untouched.
 */
@media (max-width: 767.98px) {
  :root{
    --dm-dock-height-v4400:56px;
    --dm-dock-bottom-v4400:max(8px, env(safe-area-inset-bottom));
    --dm-header-z-v4400:2147481000;
  }

  /* =========================================================
   * HEADER SELALU TERLIHAT SAAT SCROLL
   * Covers public, developer, teacher, student and private pages.
   * ========================================================= */
  body.digitera-mobile-v4398 > header.topbar,
  body.digitera-mobile-v4398 header.topbar,
  body.digitera-mobile-v4398 > header.header,
  body.digitera-mobile-v4398 header.header,
  body.digitera-mobile-v4398 .teacher-app-topbar,
  body.digitera-mobile-v4398 .student-app-topbar,
  body.digitera-mobile-v4398 .student-app-topbar-unified,
  body.digitera-mobile-v4398 [data-student-unified-header]{
    position:sticky!important;
    position:-webkit-sticky!important;
    top:0!important;
    z-index:var(--dm-header-z-v4400)!important;
    transform:translateZ(0);
    -webkit-transform:translateZ(0);
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }

  /* Public/developer header: compact glass bar while remaining sticky. */
  body.digitera-mobile-v4398:not(.role-teacher):not(.role-student) header.topbar,
  body.digitera-mobile-v4398:not(.role-teacher):not(.role-student) header.header{
    background:rgba(255,255,255,.96)!important;
    border-bottom:1px solid rgba(91,62,150,.08)!important;
    box-shadow:0 7px 22px rgba(48,30,92,.07)!important;
    backdrop-filter:blur(16px) saturate(1.16)!important;
    -webkit-backdrop-filter:blur(16px) saturate(1.16)!important;
  }

  body.digitera-mobile-v4398:not(.role-teacher):not(.role-student) header.topbar .nav-wrap,
  body.digitera-mobile-v4398:not(.role-teacher):not(.role-student) header.header .nav-wrap{
    min-height:58px!important;
    padding-top:6px!important;
    padding-bottom:6px!important;
  }

  /* Teacher topbar slightly more compact, still premium purple. */
  body.digitera-mobile-v4398.role-teacher .teacher-app-topbar,
  body.digitera-mobile-v4398.role-teacher .teacher-app-topbar-inner{
    min-height:66px!important;
  }
  body.digitera-mobile-v4398.role-teacher .teacher-app-topbar-inner{
    padding:7px 12px!important;
  }
  body.digitera-mobile-v4398.role-teacher .teacher-sidebar-toggle{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    border-radius:12px!important;
  }
  body.digitera-mobile-v4398.role-teacher .teacher-topbar-actions > *{
    min-width:36px!important;
    min-height:36px!important;
    border-radius:11px!important;
  }

  /* Student header also remains visible and gains a clean mobile shadow. */
  body.digitera-mobile-v4398.role-student .student-app-topbar,
  body.digitera-mobile-v4398.role-student .student-app-topbar-unified{
    background:rgba(255,255,255,.97)!important;
    border-bottom:1px solid rgba(91,62,150,.08)!important;
    box-shadow:0 7px 22px rgba(48,30,92,.07)!important;
    backdrop-filter:blur(16px) saturate(1.16)!important;
    -webkit-backdrop-filter:blur(16px) saturate(1.16)!important;
  }

  /* Avoid old CSS hiding sticky header via overflow on its direct parent. */
  body.digitera-mobile-v4398 .teacher-app-stage,
  body.digitera-mobile-v4398 .teacher-app-shell{
    overflow:visible!important;
  }

  /* =========================================================
   * BOTTOM MENU — SMALLER, CLEANER, BETTER PROPORTIONED
   * ========================================================= */
  body.digitera-mobile-v4398{
    padding-bottom:calc(68px + var(--dm-dock-bottom-v4400))!important;
  }

  .digitera-mobile-dock-v4398{
    left:16px!important;
    right:16px!important;
    bottom:var(--dm-dock-bottom-v4400)!important;
    height:var(--dm-dock-height-v4400)!important;
    grid-template-columns:1fr 1fr 62px 1fr 1fr!important;
    padding:3px 6px!important;
    border-radius:19px!important;
    border:1px solid rgba(92,61,154,.09)!important;
    background:rgba(255,255,255,.96)!important;
    box-shadow:0 11px 28px rgba(45,21,95,.16), inset 0 1px 0 rgba(255,255,255,.92)!important;
    backdrop-filter:blur(18px) saturate(1.18)!important;
    -webkit-backdrop-filter:blur(18px) saturate(1.18)!important;
  }

  .digitera-mobile-dock-item{
    height:46px!important;
    min-height:46px!important;
    gap:2px!important;
    padding:3px 1px!important;
    border-radius:13px!important;
    font-size:8px!important;
    font-weight:750!important;
    line-height:1!important;
  }

  .digitera-mobile-dock-item svg{
    width:18px!important;
    height:18px!important;
    stroke-width:1.75!important;
  }

  .digitera-mobile-dock-item span{
    max-width:54px!important;
    font-size:8px!important;
    line-height:1.05!important;
  }

  .digitera-mobile-dock-item.is-active{
    background:linear-gradient(180deg,#f5f1ff,#f8f6ff)!important;
    color:#6f35e8!important;
    box-shadow:inset 0 0 0 1px rgba(111,53,232,.045)!important;
  }

  .digitera-mobile-dock-center{
    height:56px!important;
  }

  .digitera-mobile-dock-main{
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    min-height:48px!important;
    margin-top:-16px!important;
    border:4px solid #f5f4fb!important;
    border-radius:17px!important;
    box-shadow:0 10px 22px rgba(111,53,232,.29)!important;
  }

  .digitera-mobile-dock-main svg{
    width:22px!important;
    height:22px!important;
    stroke-width:1.8!important;
  }

  /* Student's native dock receives the same compact visual language. */
  body.digitera-mobile-v4398.role-student .student-bottom-nav{
    left:16px!important;
    right:16px!important;
    bottom:var(--dm-dock-bottom-v4400)!important;
    min-height:56px!important;
    height:auto!important;
    padding:4px 5px!important;
    border-radius:19px!important;
    border:1px solid rgba(92,61,154,.09)!important;
    background:rgba(255,255,255,.96)!important;
    box-shadow:0 11px 28px rgba(45,21,95,.16)!important;
  }

  body.digitera-mobile-v4398.role-student .student-bottom-nav a{
    min-height:46px!important;
    padding:3px 2px!important;
    border-radius:13px!important;
    font-size:8px!important;
    gap:2px!important;
  }

  body.digitera-mobile-v4398.role-student .student-bottom-nav svg,
  body.digitera-mobile-v4398.role-student .student-bottom-nav .student-nav-icon{
    width:18px!important;
    height:18px!important;
  }

  body.digitera-mobile-v4398.role-student .student-bottom-nav small,
  body.digitera-mobile-v4398.role-student .student-bottom-nav span:not(.student-nav-icon):not(.student-footer-notification-badge){
    font-size:8px!important;
  }

  /* Update V4399 clearances to match the smaller dock. */
  body.digitera-mobile-v4398.role-teacher{
    --dm-teacher-dock-clearance:calc(82px + max(8px, env(safe-area-inset-bottom)))!important;
  }

  body.digitera-mobile-v4398.role-teacher .live-chat-fab,
  body.digitera-mobile-v4398.role-teacher [class*="chat-fab"],
  body.digitera-mobile-v4398 .developer-global-logout,
  body.digitera-mobile-v4398 [class*="floating-chat"]{
    bottom:calc(72px + max(8px, env(safe-area-inset-bottom)))!important;
  }

  /* Keep sticky headers reachable when browser address bar changes height. */
  @supports (height: 100dvh){
    body.digitera-mobile-v4398{
      min-height:100dvh!important;
    }
  }

  /* Immersive game pages remain full-screen. */
  body.digitera-mobile-v4398.student-play-mode,
  body.digitera-mobile-v4398.digitera-mobile-immersive{
    padding-bottom:0!important;
  }
}

/* V4403: override sticky lama. Runtime JS juga memaksa top secara inline. */
@media (max-width:767.98px){
  body.digitera-mobile-v4398 header.topbar,
  body.digitera-mobile-v4398 header.header,
  body.digitera-mobile-v4398 .teacher-app-topbar,
  body.digitera-mobile-v4398 .student-app-topbar,
  body.digitera-mobile-v4398 .student-app-topbar-unified,
  body.digitera-mobile-v4398 [data-student-unified-header]{
    position:fixed!important;
    top:0!important;
    margin-top:0!important;
    z-index:2147483600!important;
  }
}