/*
 * app-shell.css — 全站 app-shell（側欄 + #mainContent + 固定底部導覽列）共用版面修正
 *
 * 問題：手機版底部有固定導覽列（partial mobile-nav.html，md:hidden、高約 65px、z-50）。
 *       但各頁捲動容器 #mainContent 的 padding-bottom 只有 24px（p-6），
 *       導致最底部一排功能（編輯／分享等）落在導覽列下方的死區、點不到。
 *
 * 修正：手機版（< md, 768px）為 #mainContent 增加底部留白，讓內容能完整捲動到導覽列上方，
 *       並額外保留 iOS 瀏海手機的 safe-area。桌機（≥ md）導覽列隱藏，維持原本 24px 不受影響。
 *
 * 用 #mainContent（id 選擇器，specificity 高於 Tailwind 的 .p-6 等 class），確保穩定覆蓋。
 */
@media (max-width: 767px) {
    #mainContent {
        /* 80px 已大於導覽列高度 65px，再加上安全區 inset。
           用 var(--safe-area-inset-bottom, env(...))：iOS 由 safe-area.css 的 :root 取 env()；
           Android 因 WebView env() 恆為 0，改由原生（MainActivity）注入的 --safe-area-inset-bottom 提供，
           兩平台一致，不會漏掉手勢導覽列的間距。 */
        padding-bottom: calc(5rem + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
    }
}

/*
 * 使用者頭像選單（header.html 的 #userMenu）：平板寬度（md ~ <lg）header 較擠時，
 * flex 版面會把此選單壓縮到近乎 0 寬（iPad 實機 Web Inspector 實測僅約 4px），
 * 導致右上頭像／名稱幾乎看不到（只剩一條細線）。
 * 用 id 選擇器（specificity 高於 utility）強制 flex-shrink:0，讓它維持自然寬度。
 * 等同 header.html 的 shrink-0，但改由此靜態 CSS 提供以確保可靠部署（header.html 為動態 serve）。
 * 桌機寬鬆時本規則無副作用（本來就不需要收縮）。
 */
#userMenu {
    flex-shrink: 0;
}