/**
 * navDrawer.css — 「選項收進按鈕」導覽抽屜
 * 除首頁外的所有頁面共用：導覽選項預設藏起來，點浮動按鈕才展開。
 */

/* 停在 header-right 裡跟著登出按鈕排列，而不是蓋在畫面右上角浮動 ——
   避免蓋住頁面原本就有的登出按鈕/使用者信箱 */
.lux-nav-toggle {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--radius-circle);
  background: var(--color-primary);
  color: var(--text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out), background-color var(--duration-fast);
}
.lux-nav-toggle:hover { background: var(--color-primary-hover); transform: scale(1.05); }
.lux-nav-toggle:active { transform: scale(0.95); }
.lux-nav-toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }

/* 找不到 .header-right 時的備援：退回浮動按鈕 */
.lux-nav-toggle--floating {
  position: fixed;
  top: calc(var(--spacing-md) + var(--safe-area-top));
  right: var(--spacing-md);
  z-index: var(--z-drawer);
  box-shadow: var(--shadow-md);
}

/* 漢堡開合動畫（ham8）— 取自 flippin-burgers（CodePen: Vsprtn/pen/zYgXRxg） */
.lux-nav-toggle .ham {
  width: 26px;
  height: 26px;
  transition: transform 400ms;
}
.lux-nav-toggle[aria-expanded="true"] .ham { transform: rotate(45deg); }
.lux-nav-toggle .line {
  fill: none;
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
  stroke: currentColor;
  stroke-width: 6;
  stroke-linecap: round;
}
.lux-nav-toggle .top { stroke-dasharray: 40 160; }
.lux-nav-toggle .middle { stroke-dasharray: 40 142; transform-origin: 50%; transition: transform 400ms; }
.lux-nav-toggle .bottom { stroke-dasharray: 40 85; transform-origin: 50%; transition: transform 400ms, stroke-dashoffset 400ms; }
.lux-nav-toggle[aria-expanded="true"] .top { stroke-dashoffset: -64px; }
.lux-nav-toggle[aria-expanded="true"] .middle { transform: rotate(90deg); }
.lux-nav-toggle[aria-expanded="true"] .bottom { stroke-dashoffset: -64px; }

@media (prefers-reduced-motion: reduce) {
  .lux-nav-toggle .ham, .lux-nav-toggle .line { transition: none; }
}

.lux-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 24, 21, 0.45);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-normal) var(--ease-out), visibility var(--duration-normal);
  z-index: var(--z-sheet);
}
.lux-nav-overlay.visible { opacity: 1; visibility: visible; }

.lux-nav-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 84vw);
  background: var(--surface-0);
  border-left: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-lg);
  z-index: calc(var(--z-sheet) + 1);
  padding: calc(var(--spacing-lg) + var(--safe-area-top)) var(--spacing-lg) var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  transform: translateX(100%);
  transition: transform var(--duration-normal) var(--ease-out);
}
.lux-nav-panel.open { transform: translateX(0); }

.lux-nav-close {
  align-self: flex-end;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--radius-circle);
  background: var(--surface-2);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-bottom: var(--spacing-md);
  transition: background-color var(--duration-fast);
}
.lux-nav-close:hover { background: var(--surface-3); }
.lux-nav-close svg { width: 18px; height: 18px; }

.lux-nav-links {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  /* .lux-nav-panel 是 position:fixed 的固定高度，連結一多（例如聊天頁
     header-nav 有 12 個）沒設 overflow 就直接被截斷在面板邊界外，看起來
     像連結消失了，也沒有捲軸能滑過去點。flex:1 + min-height:0 讓這塊在
     固定高度的面板裡吃掉剩餘空間、真正框住，overflow-y:auto 才有效果。 */
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.lux-nav-link {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  transition: all var(--duration-fast);
  text-decoration: none;
}
.lux-nav-link:hover { background: var(--surface-2); text-decoration: none; }
.lux-nav-link.active { color: var(--color-primary-hover); background: var(--color-primary-light); }

@media (prefers-reduced-motion: reduce) {
  .lux-nav-overlay, .lux-nav-panel, .lux-nav-toggle { transition: none !important; }
}

/* ============================================================
 * Desktop sidebar（規格第 6 節）——只在 >=1200px 顯示，常駐、不用點開。
 * body 用 padding-left 把其他一切內容整個推開，不動任何頁面內部 layout。
 * ============================================================ */
.lux-sidebar {
  --nav-sidebar-width: 232px;
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--nav-sidebar-width);
  flex-direction: column;
  gap: var(--spacing-xs);
  padding: calc(var(--spacing-lg) + var(--safe-area-top)) var(--spacing-md) var(--spacing-lg);
  background: var(--surface-1);
  border-right: 1px solid var(--border-subtle);
  overflow-y: auto;
  z-index: var(--z-drawer);
}

.lux-sidebar-brand {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  padding: 0 var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.lux-sidebar-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lux-sidebar-secondary {
  margin-top: auto;
  padding-top: var(--spacing-md);
  /* 金色分隔線——次要分組（心跳/設定）跟主要內容頁面分開，呼應規格裡
     金色只作為 divider/選中指示這種小面積用法 */
  border-top: 1px solid var(--color-renaissance-gold-light);
}

.lux-sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-sm);
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  text-decoration: none;
  transition: background-color var(--duration-fast), color var(--duration-fast);
}
.lux-sidebar-link:hover { background: var(--surface-2); color: var(--text-primary); text-decoration: none; }
/* color-primary（terracotta）文字疊在 color-primary-light 上只有 3.1:1，
   沒過 WCAG AA 的 4.5:1，換成深一階的 color-primary-hover */
.lux-sidebar-link.active { background: var(--color-primary-light); color: var(--color-primary-hover); }
.lux-sidebar-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.lux-sidebar-icon {
  font-size: var(--text-lg);
  line-height: 1;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 2026-09-12：手繪圖示素材本身帶著一點米色羊皮紙底色（沒有去背工具可用），
   緊貼裁切＋這裡的小圓角容器可以把殘留的背景色差收乾淨——淺色模式下跟頁面
   底色融在一起，深色模式换成暗色 token，圖示才不會在暗背景上變成一塊突兀
   的亮方塊。這是規格第 17 條允許調整的範圍（icon container background）。 */
.lux-nav-icon-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: var(--radius-xs);
  /* --surface-2 本身在 [data-theme="dark"] 裡就會換成暗色 token，不用另外
     寫一份 dark mode 覆寫。 */
  background: var(--surface-2);
}

@media (min-width: 1200px) {
  .lux-sidebar { display: flex; }
  /* sidebar 常駐取代漢堡，桌面版不需要再顯示浮動/頂部的抽屜開關 */
  .lux-nav-toggle { display: none; }
  body:has(.lux-sidebar) { padding-left: var(--nav-sidebar-width, 232px); }
}

/* ============================================================
 * Mobile bottom nav（規格第 8 節）——只在 <=767px 顯示，最多 5 個入口。
 * ============================================================ */
.lux-bottom-nav {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-drawer);
  background: var(--surface-0);
  border-top: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sheet);
  padding-bottom: var(--safe-area-bottom);
}

.lux-bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 1;
  padding: var(--spacing-xs) 2px;
  font-size: 20px;
  line-height: 1;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--duration-fast);
}
.lux-bottom-nav-item:hover,
.lux-bottom-nav-item:focus-visible { color: var(--text-primary); text-decoration: none; }
/* 10px 的小字更要保對比度，用深一階的 terracotta */
.lux-bottom-nav-item.active { color: var(--color-primary-hover); }
.lux-bottom-nav-item:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.lux-bottom-nav-item .lux-nav-icon-img { width: 24px; height: 24px; }

.lux-bottom-nav-label {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: var(--weight-medium);
}

@media (max-width: 767px) {
  .lux-bottom-nav { display: flex; }
  body:has(.lux-bottom-nav) { padding-bottom: calc(56px + var(--safe-area-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .lux-sidebar-link, .lux-bottom-nav-item { transition: none; }
}

/* Paper-bound navigation shared by the sidebar, drawer and mobile shelf. */
.lux-nav-panel,
.lux-sidebar,
.lux-bottom-nav {
  background: var(--surface-0);
}
.lux-nav-panel {
  border-left: 2px solid var(--border-default);
  box-shadow: -14px 0 44px rgba(70,52,32,.16);
}
.lux-nav-links { gap: 4px; padding-right: 4px; }
.lux-nav-link {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  border: 1px solid transparent;
  font-size: var(--text-xl);
}
.lux-nav-link.active,
.lux-sidebar-link.active {
  background: var(--color-primary-light);
  border-color: var(--border-subtle);
}
.lux-nav-link-icon {
  width: 42px;
  height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 24px;
}
.lux-nav-link-icon .lux-nav-icon-img { width: 40px; height: 40px; }
.lux-sidebar { border-right: 2px solid var(--border-default); }
.lux-sidebar-brand {
  padding-bottom: 15px;
  border-bottom: 1px solid var(--color-renaissance-gold-light);
  letter-spacing: .08em;
}
.lux-sidebar-link {
  min-height: 40px;
  border: 1px solid transparent;
}
.lux-sidebar-link:hover { border-color: var(--border-subtle); }
.lux-sidebar-icon { width: 30px; height: 30px; }
.lux-sidebar-icon .lux-nav-icon-img { width: 28px; height: 28px; }
.lux-bottom-nav { border-top: 2px solid var(--border-default); }
.lux-bottom-nav-item { position: relative; min-height: 60px; gap: 4px; }
.lux-bottom-nav-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  width: 32px;
  height: 2px;
  background: var(--color-terracotta-dark);
}
.lux-bottom-nav-item .lux-nav-icon-img { width: 29px; height: 29px; }
.lux-bottom-nav-label { font-size: 11px; letter-spacing: .02em; }
@media (max-width: 767px) {
  body:has(.lux-bottom-nav) { padding-bottom: calc(66px + var(--safe-area-bottom)); }
}