/* ════════════════════════════════════════════════════════════════════
   FIDNT App Shell — ONE canonical sidebar (desktop) + footer (mobile).
   Linked LAST on every app page (app · dashboard · me · notifications ·
   settings). Pixel-identical everywhere; navigating must not move the
   footer — only the active selector changes. Icons only (no labels),
   larger icons, hover = neu pop-up, current/pressed = neu pressed-in.
   !important is intentional: single source of truth over older inline rules.
   ════════════════════════════════════════════════════════════════════ */

:root{
  --shell-bg:#E6EBF4;
  --shell-ink:#7A8699;
  --shell-accent:#1742E5;
  --shell-lite:#FFFFFF;
  --shell-dark:#BBC6DB;
}

/* ── DARK THEME — neumorphic depth (cards keep their relief in dark mode) ── */
html[data-theme="dark"]{
  --shell-bg:#212D38; --shell-ink:#8A97A8; --shell-ink-hi:#FFFFFF; --shell-lite:#3C4E64; --shell-dark:#0C1119;
  --nb:#212D38 !important; --surface:#212D38 !important;
  --n-lite:#3C4E64 !important; --n-dark:#0C1119 !important;
  --rise:-6px -6px 14px #3C4E64, 6px 6px 14px #0C1119 !important;
  --rise-sm:-3px -3px 7px #3C4E64, 3px 3px 7px #0C1119 !important;
  --press:inset -3px -3px 7px #3C4E64, inset 4px 4px 9px #0C1119 !important;
  --shadow:-6px -6px 14px #3C4E64, 6px 6px 14px #0C1119 !important;
}

/* selector states — same neumorphic language on both layouts */
.appnav .navi{ transition:color .16s ease, box-shadow .18s ease, transform .16s ease !important; }
@media(hover:hover){
  .appnav .navi:not(.active):hover{                        /* hover → pops up (pointer devices only — not touch) */
    box-shadow:-4px -4px 8px var(--shell-lite), 4px 4px 8px var(--shell-dark) !important;
    color:var(--shell-ink-hi,#0A0E17) !important;
  }
}
.appnav .navi:active,                                     /* press → sinks */
.appnav .navi.active{                                     /* current page → sinks */
  color:var(--shell-accent) !important;
  background:var(--shell-bg) !important;
  box-shadow:inset 3px 3px 7px var(--shell-dark), inset -3px -3px 7px var(--shell-lite) !important;
}

/* ── DESKTOP rail ─────────────────────────────────────────────── */
@media(min-width:821px){
  .appnav{
    background:var(--shell-bg) !important;
    border-right:1px solid rgba(187,198,219,.45) !important;
    box-shadow:6px 0 18px rgba(150,170,210,.16) !important;
  }
  .appnav .navi .ico{ width:23px !important; height:23px !important; }
  .appnav .navi.active .ico{ transform:none !important; }
}

/* ── MOBILE footer — fixed, sticky, SHORT, icons only, never moves ── */
@media(max-width:820px){
  :root{ --nav-h:calc(50px + env(safe-area-inset-bottom,0px)) !important; }  /* content reserves the real footer height */
  html,body{ overflow-x:hidden !important; }
  .appnav{
    position:fixed !important;
    left:0 !important; right:0 !important; bottom:0 !important; top:auto !important;
    width:auto !important; max-width:100vw !important;
    height:calc(50px + env(safe-area-inset-bottom,0px)) !important;
    padding:0 8px env(safe-area-inset-bottom,0px) !important;
    margin:0 !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:space-between !important;
    background:var(--shell-bg) !important;
    border-top:0 !important; border-right:0 !important;
    box-shadow:0 -7px 20px rgba(150,170,210,.30) !important;
    z-index:200 !important;
  }
  .appnav .logo{ display:none !important; }
  .appnav .navset{
    flex-direction:row !important;
    width:100% !important;
    height:50px !important;
    gap:6px !important;
    align-items:center !important;
    justify-content:space-between !important;
    padding:0 !important;
  }
  .appnav .navi{
    flex:1 1 0 !important;
    min-width:0 !important;
    height:42px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:0 !important;
    border-radius:13px !important;
    margin:0 !important;
    color:var(--shell-ink) !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  .appnav .navi .ico{ width:25px !important; height:25px !important; }   /* icons only, larger */
  .appnav .navi .lbl,
  .appnav .navi .tip{ display:none !important; }                        /* no page name */
  .appnav .navi.active .ico{ transform:none !important; }
  .appnav .navi.active{ pointer-events:none !important; }   /* current page: no reload-flash, no stuck press state */
  .appnav .navi .nbadge{ top:5px !important; left:calc(50% + 7px) !important; }
  /* full-screen chat session: hide the footer so the composer is reachable */
  body.thread-open .appnav{ transform:translateY(150%) !important; visibility:hidden !important; pointer-events:none !important; opacity:0 !important; }
}