/* 浮動底部導覽 */
.nav{position:fixed;left:0;right:0;bottom:calc(16px + env(safe-area-inset-bottom));
  display:flex;justify-content:center;z-index:50;pointer-events:none;
  transform:translateZ(0);}   /* 自成合成圖層：iOS 捲動/慣性滾動時不漂移 */
.nav.nav-hidden{display:none;}
body.kb-open .nav{display:none;}   /* 鍵盤開啟(輸入框聚焦)時隱藏，避免被頂到畫面中間遮內容 */
.nav .cap{display:inline-flex;align-items:center;gap:16px;background:var(--navglass);
  border-radius:999px;padding:8px 14px;pointer-events:auto;
  border:.5px solid var(--navedge);
  -webkit-backdrop-filter:blur(1px) saturate(100%);
  backdrop-filter:blur(1px) saturate(100%) url(#glassRefract);
  box-shadow:0 8px 30px oklch(0 0 0/.18), inset 0 1px 0 var(--navedge), inset 0 -1px 1px oklch(0 0 0/.05);}
.nb{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:23px;cursor:pointer;color:var(--navicon);}
.nb.on{background:var(--ac);color:var(--navact);}
.nb.plus{color:var(--ac);}
.nb-logo{width:42px;height:42px;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.nb-logo .logo-mark{width:28px;height:28px;color:var(--navicon);}
.nb-av{font-family:var(--fd);font-weight:600;font-size:14px;background:var(--actint);color:var(--acink);}
.nb-av.on{background:var(--ac);color:var(--navact);}

/* 側邊導覽（桌面才顯示） */
.side-nav{display:none;}

/* 平板：仍用底部導覽，但內容置中、不滿版 */
@media (min-width:600px){
  .main .screen{max-width:600px;margin:0 auto;}
}

/* 桌面版：收合軌(hover 展開) + 圖釘釘選，內容置中 */
@media (min-width:860px){
  body{background:var(--bg);}
  .nav{display:none;}
  .side-nav{--snw-c:76px;--snw-e:236px;--sn-ease:cubic-bezier(.2,.8,.2,1);--sn-dur:.22s;
    display:flex;flex-direction:column;position:fixed;left:0;top:0;bottom:0;width:var(--snw-c);
    background:var(--surf);border-right:.5px solid var(--line);padding:18px 0;z-index:40;
    overflow:hidden;transition:width var(--sn-dur) var(--sn-ease);}
  .side-nav:hover,body.menu_pinned .side-nav,body.sn-hover .side-nav{width:var(--snw-e);box-shadow:6px 0 28px oklch(0 0 0/.06);}

  .sn-top{position:relative;display:flex;align-items:center;gap:11px;padding:4px 18px 22px;}
  .sn-brand{display:flex;align-items:center;gap:11px;min-width:0;}
  .sn-brand .brandlogo{width:32px;height:32px;}
  .sn-brand .wd{font-family:var(--fd);font-weight:700;font-size:18px;letter-spacing:-.01em;white-space:nowrap;}
  .sn-toggle{position:absolute;right:14px;border:none;background:none;color:var(--ink3);font-size:19px;
    cursor:pointer;display:flex;width:30px;height:30px;align-items:center;justify-content:center;border-radius:8px;
    transition:opacity var(--sn-dur) var(--sn-ease),transform var(--sn-dur) var(--sn-ease),
      color var(--sn-dur) var(--sn-ease),background var(--sn-dur) var(--sn-ease);}
  .sn-toggle .c2{display:none;}
  .sn-toggle:hover{background:var(--surf2);color:var(--ink2);}
  body.menu_pinned .sn-toggle{color:var(--acink);background:var(--actint);transform:rotate(-45deg);}

  .sn-items{display:flex;flex-direction:column;gap:4px;padding:0 12px;}
  .sn-item{display:flex;align-items:center;gap:14px;padding:11px 12px;border-radius:11px;border:none;
    background:none;cursor:pointer;color:var(--ink2);font-family:var(--fb);font-size:14.5px;font-weight:500;
    text-align:left;width:100%;white-space:nowrap;transition:background .15s ease;}
  .sn-item i{font-size:21px;flex:none;width:24px;text-align:center;}
  .sn-item:hover{background:var(--surf2);}
  .sn-item.on{background:var(--actint);color:var(--acink);}
  .sn-user{margin-top:auto;display:flex;align-items:center;gap:6px;padding:12px 8px 4px;border-top:.5px solid var(--line);}
  /* 收合狀態：只剩頭像 → 按鈕縮成正圓、姓名/登出不佔寬，選中底色貼合頭像不跑位 */
  .sn-user-main{flex:none;min-width:0;display:flex;align-items:center;gap:0;background:none;border:none;
    cursor:pointer;padding:7px;border-radius:50%;font-family:var(--fb);color:var(--ink);text-align:left;}
  .sn-user-main:hover{background:var(--surf2);}
  .sn-user-main.on{background:var(--actint);}
  .sn-user-main.on .nm{color:var(--acink);}
  .sn-user .me-av{flex:none;}
  .sn-user .sn-uinfo{flex:1;min-width:0;width:0;overflow:hidden;}
  /* 展開（hover / 釘選）：還原成整條膠囊列 */
  .side-nav:hover .sn-user-main,body.menu_pinned .sn-user-main,body.sn-hover .sn-user-main{
    flex:1;gap:11px;padding:7px 8px;border-radius:11px;}
  .side-nav:hover .sn-user .sn-uinfo,body.menu_pinned .sn-user .sn-uinfo,body.sn-hover .sn-user .sn-uinfo{width:auto;}
  .sn-user .nm{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .sn-user .vc{font-size:11.5px;color:var(--ink3);font-family:var(--fd);letter-spacing:.02em;white-space:nowrap;}
  .sn-logout{border:none;background:none;color:var(--ink3);font-size:20px;cursor:pointer;display:flex;flex:none;
    width:0;overflow:hidden;padding:0;}
  .side-nav:hover .sn-logout,body.menu_pinned .sn-logout,body.sn-hover .sn-logout{width:auto;overflow:visible;}
  .sn-logout:hover{color:var(--dang);}

  /* 收合時淡出文字/圖釘；hover 或釘選時淡入（圖示位置固定不跳動） */
  .sn-brand .wd,.sn-item span,.sn-user .sn-uinfo,.sn-user .sn-logout,.sn-toggle{
    opacity:0;transition:opacity var(--sn-dur) var(--sn-ease);}
  .side-nav:hover .sn-brand .wd,body.menu_pinned .sn-brand .wd,body.sn-hover .sn-brand .wd,
  .side-nav:hover .sn-item span,body.menu_pinned .sn-item span,body.sn-hover .sn-item span,
  .side-nav:hover .sn-user .sn-uinfo,body.menu_pinned .sn-user .sn-uinfo,body.sn-hover .sn-user .sn-uinfo,
  .side-nav:hover .sn-user .sn-logout,body.menu_pinned .sn-user .sn-logout,body.sn-hover .sn-user .sn-logout,
  .side-nav:hover .sn-toggle,body.menu_pinned .sn-toggle,body.sn-hover .sn-toggle{opacity:1;}

  /* 內容：左右對稱 margin → screen 置中於整個畫面（左邊同時讓開側邊欄）。
     hover 展開是覆蓋、內容不位移；釘選才把兩側 margin 加大到展開寬 */
  .main{margin:0 76px;transition:margin .22s cubic-bezier(.2,.8,.2,1);}
  body.menu_pinned .main{margin:0 236px;}
  .main .screen{min-height:100vh;min-height:100dvh;padding-bottom:56px;max-width:760px;margin:0 auto;}
  .main .hd,.main .appbar{padding-top:30px;}
}

/* nav 未讀角標 */
.nb{position:relative;}
.nb-badge{position:absolute;top:3px;right:1px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  background:var(--dang);color:#fff;font-family:var(--fd);font-size:10px;font-weight:700;line-height:16px;
  text-align:center;pointer-events:none;}
.sn-item{position:relative;}
.sn-badge{margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:999px;flex:none;
  background:var(--dang);color:#fff;font-family:var(--fd);font-size:10.5px;font-weight:700;line-height:18px;text-align:center;}