/*
  NotaKu — Menu bawah "Notch + Bubble" (mobile, < 800px).

  Bar penuh di dasar layar dengan lekukan setengah lingkaran di bawah tab aktif.
  Bulatan (bubble) berisi ikon tab aktif duduk di dalam lekukan, berbingkai
  cincin berwarna aksen, lalu meluncur mengikuti tab yang dipilih.
  Geometri lekukan digambar oleh js/navIndicator.js (clip-path), sedangkan
  warna & bayangan seluruhnya diatur variabel --nav-* di bawah, satu blok per tema.

  - Dimuat paling akhir agar menimpa gaya menu bawah lama di theme/neo/glass/clay.
  - Desktop (>= 800px): penanda aktif dan ikon melompat secara vertikal.
  - Tidak mengubah struk, cetak, atau logika aplikasi.
*/

/* Elemen tambahan tidak dipakai di desktop */
.nav-shape, .nav-bubble { display:none; }
.sidebar-indicator, .sidebar-bubble { display:none; }

@media screen {
  /* ---------- Palet per tema ---------- */
  html[data-theme="light"] {
    --nav-bar:#491d30;
    --nav-ink:#d9bcc8;
    --nav-bubble:#f2ccaa;
    --nav-bubble-ink:#532339;
    --nav-rim:#a53b5a;
    --nav-shadow:drop-shadow(0 -4px 12px rgba(53,16,31,.30));
    --nav-bubble-shadow:0 0 0 4px var(--nav-rim), 0 8px 16px -4px rgba(35,10,20,.55);
    --nav-blur:none;
  }
  html[data-theme="dark"] {
    --nav-bar:linear-gradient(180deg,#2d3878 0%,#1b2354 100%);
    --nav-ink:#9aa3d6;
    --nav-bubble:var(--g-amber, linear-gradient(180deg,#ffd75a,#ff9a28));
    --nav-bubble-ink:var(--navy-text, #1a2150);
    --nav-rim:#3b4799;
    --nav-shadow:drop-shadow(0 -6px 14px rgba(4,6,28,.65));
    --nav-bubble-shadow:0 0 0 4px var(--nav-rim), 0 12px 20px -4px rgba(255,160,40,.55), inset 0 1px 0 rgba(255,255,255,.65), inset 0 -3px 5px rgba(150,70,0,.25);
    --nav-blur:none;
  }
  html[data-theme="glass"] {
    --nav-bar:linear-gradient(145deg,rgba(255,255,255,.82),rgba(226,241,252,.62));
    --nav-ink:var(--muted, #678ba8);
    --nav-bubble:var(--gl-btn, linear-gradient(90deg,#1b6fb4,#38cfe0));
    --nav-bubble-ink:#fff;
    --nav-rim:#f6fbff;
    --nav-shadow:none; /* filter pada wrapper akan mematikan blur kaca */
    --nav-bubble-shadow:0 0 0 4px var(--nav-rim), 0 12px 20px -6px rgba(24,125,190,.65), inset 0 1px 0 rgba(255,255,255,.6);
    --nav-blur:var(--gl-blur-strong, blur(26px) saturate(160%));
  }
  html[data-theme="clay"] {
    --nav-bar:var(--cl-panel, linear-gradient(180deg,#d3e6db,#bcd6c8));
    --nav-ink:#4f7566;
    --nav-bubble:var(--cl-coral, linear-gradient(180deg,#f8a67f,#ef7d55));
    --nav-bubble-ink:#fff;
    --nav-rim:#fff6e8;
    --nav-shadow:drop-shadow(0 -6px 12px rgba(80,130,110,.38));
    --nav-bubble-shadow:0 0 0 4px var(--nav-rim), 0 10px 16px -5px rgba(222,105,65,.65), inset 0 2px 3px rgba(255,255,255,.55), inset 0 -3px 5px rgba(170,70,30,.3);
    --nav-blur:none;
  }
}

@media screen and (max-width:799px) {
  /* ---------- Wadah bar ---------- */
  #app #bottomnav {
    --nav-h:64px;
    position:sticky; bottom:0;
    flex-shrink:0;
    margin:0; gap:0;
    padding:0 0 env(safe-area-inset-bottom,0px);
    background:none; border:0; border-radius:0; box-shadow:none;
    -webkit-backdrop-filter:none; backdrop-filter:none;
    overflow:visible;
  }

  /* Bentuk bar (dipotong oleh clip-path dari JS). Wrapper membawa bayangan. */
  #app #bottomnav .nav-shape {
    display:block; position:absolute; inset:0; z-index:0; pointer-events:none;
    filter:var(--nav-shadow, none);
  }
  #app #bottomnav .nav-bg {
    position:absolute; inset:0;
    background:var(--nav-bar);
    -webkit-backdrop-filter:var(--nav-blur, none); backdrop-filter:var(--nav-blur, none);
  }

  /* ---------- Tombol tab: label berganti posisi sesuai status aktif ---------- */
  #app #bottomnav .nav-btn {
    position:relative; z-index:1;
    flex:1 1 0; min-width:0; height:var(--nav-h); min-height:0;
    padding:4px 0 0; gap:0; border-radius:0;
    justify-content:center; align-items:center;
    background:none; box-shadow:none;
    color:var(--nav-ink); font-weight:inherit;
    -webkit-tap-highlight-color:transparent;
  }
  #app #bottomnav .nav-btn.active { background:none; box-shadow:none; color:var(--nav-ink); }
  #app #bottomnav .nav-btn span {
    position:absolute; top:7px; left:0; right:0; width:auto; height:auto; margin:0; padding:0 2px;
    overflow:hidden; clip:auto; color:inherit; font-size:9px; font-weight:600;
    line-height:1.15; text-align:center; text-overflow:ellipsis; white-space:nowrap; border:0;
    transform:translateY(0);
    transition:transform .58s cubic-bezier(.65,0,.35,1);
  }
  #app #bottomnav .nav-btn.active span { transform:translateY(35px); color:var(--nav-ink); }
  #app #bottomnav .nav-btn svg {
    position:absolute; bottom:14px;
    width:24px; height:24px; padding:0; margin:0;
    background:none; border:0; border-radius:0; box-shadow:none;
    color:inherit; opacity:.82;
    transform:translateY(0) scale(1);
    transition:transform .58s cubic-bezier(.22,1,.36,1), opacity .22s ease;
  }
  #app #bottomnav .nav-btn:active svg { transform:translateY(0) scale(.86); }
  /* Ikon tab aktif ditampilkan di dalam bubble, jadi yang asli disembunyikan */
  #app #bottomnav .nav-btn.active svg { opacity:0; transform:translateY(-29px) scale(.75); }
  #app #bottomnav .nav-btn:focus-visible { outline:2px solid var(--nav-rim); outline-offset:-6px; border-radius:16px; }

  /* ---------- Bubble ---------- */
  #app #bottomnav .nav-bubble {
    display:flex; align-items:center; justify-content:center;
    position:absolute; left:0; z-index:2; pointer-events:none;
    top:-16px; /* NOTCH_DEPTH (9) - radius bubble (25) */
    width:50px; height:50px; border-radius:50%;
    background:var(--nav-bubble); color:var(--nav-bubble-ink);
    box-shadow:var(--nav-bubble-shadow);
    will-change:transform;
  }
  #app #bottomnav .nav-bubble.is-hidden { visibility:hidden; }
  #app #bottomnav .nav-bubble svg { width:24px; height:24px; display:block; }
}

@media screen and (min-width:800px) {
  #app #bottomnav { isolation:isolate; }
  #app #bottomnav.sidebar-motion-ready .nav-btn { position:relative; z-index:1; }
  #app #bottomnav.sidebar-motion-ready .nav-btn.active { background:transparent; box-shadow:none; }
  #app #bottomnav.sidebar-motion-ready .nav-btn svg { flex-shrink:0; transition:opacity .22s ease; }
  #app #bottomnav.sidebar-motion-ready .nav-btn.active svg { opacity:0; }
  #app #bottomnav .sidebar-indicator {
    display:block; position:absolute; top:0; left:0; z-index:0; pointer-events:none;
    border-radius:12px; background:var(--nav-bubble); visibility:hidden;
    box-shadow:0 7px 14px -6px rgba(0,0,0,.25); will-change:transform;
  }
  #app #bottomnav .sidebar-bubble {
    display:flex; align-items:center; justify-content:center;
    position:absolute; top:0; left:0; width:32px; height:32px; z-index:2;
    pointer-events:none; visibility:hidden; border-radius:50%;
    background:var(--nav-bubble); color:var(--nav-bubble-ink);
    box-shadow:0 3px 7px rgba(0,0,0,.12); will-change:transform;
  }
  #app #bottomnav .sidebar-bubble svg { display:block; width:21px; height:21px; }
  html[data-theme="clay"] #app #bottomnav .sidebar-indicator {
    background:linear-gradient(180deg,#fffaf0,#fbeedb);
    box-shadow:0 8px 12px -5px rgba(80,120,100,.55), inset 0 2px 3px #fff, inset 0 -3px 5px rgba(205,160,115,.22);
  }
  html[data-theme="glass"] #app #bottomnav .sidebar-indicator {
    background:linear-gradient(160deg,rgba(255,255,255,.98),rgba(190,228,246,.75));
    box-shadow:0 8px 16px -6px rgba(30,120,180,.45), inset 0 1px 0 #fff;
  }
}

@media (prefers-reduced-motion:reduce) {
  #app #bottomnav.sidebar-motion-ready .nav-btn svg,
  #app #bottomnav .nav-btn svg,
  #app #bottomnav .nav-btn span { transition:none; }
}