/**
 * mobile.css — Phase 11 手機版（重寫）
 * 只在 max-width: 767px 生效，不影響桌機。載入於所有 css 之後。
 *
 * 結構：topbar(52px, 固定) / tab-panel(捲動區) / tabbar(底部固定, safe-area)
 * 層：#mSearch(250) / #tabChart 個股頁(200) / preview(1300, 自帶) / 篩選 sheet(180, 自帶)
 * 舊世代（D款 tabbar 隱藏、左側 nav、#mStockPage、#mTopbar-stock、抽屜）已全部移除。
 */

@media (max-width: 767px) {

/* ══════════════════════════════════════════
   變數 / 全局
══════════════════════════════════════════ */
:root {
  --m-top-h: 52px;
  --m-nav-h: 56px;
  --m-safe-bottom: env(safe-area-inset-bottom, 0px);
  --m-safe-top: env(safe-area-inset-top, 0px);
}

body { overflow: hidden; height: 100dvh; }

/* 桌機元件在手機一律不顯示 */
header.topbar, .main-tabbar, .sidebar, .sidebar-overlay, .desktop-only { display: none !important; }

/* 觸控回饋 */
button, .tab-item, .mwl-card, .m-search-row { -webkit-tap-highlight-color: transparent; }

/* ══════════════════════════════════════════
   Topbar（常駐）
══════════════════════════════════════════ */
#mTopbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: calc(var(--m-top-h) + var(--m-safe-top));
  padding: var(--m-safe-top) 8px 0 4px;
  z-index: 300;
  background: #161b22; border-bottom: 0.5px solid #21262d;
  display: flex; align-items: center; justify-content: space-between;
  box-sizing: border-box;
}
#mBackBtn {
  width: 44px; height: 44px; flex-shrink: 0;
  background: none; border: none; color: #e6edf3;
  font-size: 30px; line-height: 1; cursor: pointer; padding: 0 0 4px;
  visibility: hidden;
}
#mTopbarBrand {
  position: absolute; left: 50%; top: calc(var(--m-safe-top) + var(--m-top-h) / 2);
  transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 6px; pointer-events: none;
}
#mTopbarLogo { width: 22px; height: 22px; }
#mTopbarName { font-size: 15px; font-weight: 700; color: #e6edf3; letter-spacing: 0.3px; }
#mTopbarRight {
  font-size: 13px; color: #8b949e; max-width: 38%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right;
}

/* ══════════════════════════════════════════
   底部 Tabbar
══════════════════════════════════════════ */
#mTabbar {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: calc(var(--m-nav-h) + var(--m-safe-bottom));
  padding-bottom: var(--m-safe-bottom);
  background: #0f1318; border-top: 0.5px solid #21262d;
  display: flex; align-items: stretch; justify-content: space-around;
  z-index: 200; box-sizing: border-box;
}
#mTabbar .tab-item {
  flex: 1; min-height: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: none; border: none; padding: 4px 0; cursor: pointer;
  color: #6e7681; font-size: 11px;
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang TC', sans-serif;
}
#mTabbar .tab-icon { font-size: 20px; line-height: 1.1; }
#mTabbar .tab-item.active { color: #ef5350; }
#mTabbar .tab-item.active span:last-child { font-weight: 600; }

/* ══════════════════════════════════════════
   主內容區 / tab-panel
══════════════════════════════════════════ */
.main { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; margin-top: 0 !important; }

.tab-panel {
  display: none; flex-direction: column;
  height: 100dvh; box-sizing: border-box;
  padding-top: calc(var(--m-top-h) + var(--m-safe-top));
  padding-bottom: calc(var(--m-nav-h) + var(--m-safe-bottom));
  overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  position: relative; z-index: 1;
}
.tab-panel::-webkit-scrollbar { display: none; }
.tab-panel.active { display: flex; }

/* 桌機 CSS 用 id 選擇器（#tabHub / #tabWatchlist…）設了高度，這裡用更高權重鎖回螢幕高。
   否則 panel 長到內容高度、捲動的變成 document：手機瀏覽器不理 body{overflow:hidden} 還能滑，
   PC Chrome 會老實遵守 → 滾輪死掉（2026-09-22）。 */
.main > .tab-panel,
.main > .tab-panel.active {
  height: 100dvh !important;
  max-height: 100dvh !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}
/* 內層自己宣告 overflow 的區塊不搶捲動，統一交給 tab-panel */
#tabHub .m-result-body,
#tabWatchlist #watchlistContainerMobile { overflow-y: visible !important; flex: none !important; }

/* ══════════════════════════════════════════
   搜尋層
══════════════════════════════════════════ */
#mSearch {
  display: none; position: fixed;
  top: calc(var(--m-top-h) + var(--m-safe-top)); left: 0; right: 0;
  bottom: calc(var(--m-nav-h) + var(--m-safe-bottom));
  z-index: 250; background: #0d1117;
  flex-direction: column;
}
#mSearch.open { display: flex; }
.m-search-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; background: #161b22; border-bottom: 0.5px solid #21262d; flex-shrink: 0;
}
#mSearchInput {
  flex: 1; min-width: 0; height: 40px; padding: 0 12px;
  background: #0d1117; border: 0.5px solid #30363d; border-radius: 10px;
  color: #e6edf3; font-size: 16px; /* ≥16px 避免 iOS 自動縮放 */
  -webkit-appearance: none; appearance: none;
}
#mSearchInput::-webkit-search-cancel-button { display: none; }
#mSearchClear {
  width: 40px; height: 40px; flex-shrink: 0;
  background: none; border: none; color: #8b949e; font-size: 16px; cursor: pointer;
}
#mSearchList { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.m-search-hint { padding: 14px 16px 6px; font-size: 11px; color: #3d444d; letter-spacing: 1px; }
.m-search-row {
  display: flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 16px; border-bottom: 0.5px solid #161b22; cursor: pointer;
}
.m-search-row:active { background: #161b22; }
.m-search-code { font-size: 14px; font-weight: 700; color: #e6edf3; min-width: 52px; }
.m-search-name { flex: 1; font-size: 14px; color: #8b949e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-search-px   { font-size: 13px; font-weight: 600; }

/* ══════════════════════════════════════════
   個股頁（#tabChart 在 m-stock-open 時撐全頁）
══════════════════════════════════════════ */
#tabChart { padding: 0; }

body.m-stock-open #tabChart,
#tabChart.m-stock-active {
  position: fixed !important;
  top: calc(var(--m-top-h) + var(--m-safe-top)) !important;
  left: 0 !important; right: 0 !important;
  bottom: calc(var(--m-nav-h) + var(--m-safe-bottom)) !important;
  height: auto !important; padding: 0 !important;
  z-index: 150 !important;
  display: flex !important; flex-direction: column !important;
  overflow: hidden !important; background: #0d1117 !important;
}

/* 桌機看盤雜物：手機無條件隱藏（這些元素只存在於 tabChart 內） */
#tabChart .stock-tabbar,
#tabChart .stock-tabs-bar,
#tabChart .chart-toolbar,
#tabChart .toolbar,
#tabChart .ind-panel,
#tabChart .sh-lamps,
#tabChart #stockSignalLamps,
#tabChart .sh-stats,
#tabChart .sh-signals,
#tabChart #stockSignalBubbles,
#tabChart .stock-signal-tags,
#tabChart #stockSignalTags,
#tabChart .sh-add-btn,
#tabChart .sh-similar-btn,
#tabChart .sh-rs-badge,
#tabChart #personasPanel,
#tabChart #analysisPanel,
#tabChart #stockinfoPanel,
#tabChart #resonancePanel { display: none !important; }

/* 妖股 chip 精簡：保留狀態行 + 出場線警示，砍 X 訊號 pill 列 */
#tabChart #stockYaoguChip .yaogu-chip-row-x { display: none !important; }
#tabChart #stockYaoguChip { margin: 4px 12px 0 !important; }

/* stock-header 精簡 */
#tabChart .stock-header { padding: 8px 12px 6px; border-bottom: 0.5px solid #21262d; flex-shrink: 0; }
#tabChart .sh-title  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#tabChart .sh-name   { font-size: 16px; font-weight: 800; letter-spacing: -0.5px; }
#tabChart .sh-code   { font-size: 12px; color: #8b949e; }
#tabChart .sh-price  { font-size: 22px; font-weight: 800; letter-spacing: -1px; line-height: 1.1; }
#tabChart .sh-change { font-size: 13px; }
#tabChart .sh-meta   { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
#tabChart .sh-meta-item  { display: flex; flex-direction: column; gap: 1px; }
#tabChart .sh-meta-label { font-size: 10px; color: #3d444d; }
#tabChart .sh-meta-val   { font-size: 12px; font-weight: 600; color: #e6edf3; }

/* stock-panel 填滿 */
#tabChart.m-stock-active .stock-panel {
  display: none; flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
}
#tabChart.m-stock-active .stock-panel.active { display: flex; flex-direction: column; }
#tabChart.m-stock-active #chartPanel.stock-panel.active { overflow: hidden; }

#chartWrap, .chart-wrap, #mainChartEl { flex: 1; min-height: 240px; touch-action: pan-y; }

/* K 線控制列（週期 pill + 重載） */
#mKlineBar {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; background: #161b22; border-bottom: 0.5px solid #21262d; flex-shrink: 0;
}
.mkl-periods { display: flex; gap: 4px; flex: 1; overflow-x: auto; }
.mkl-periods::-webkit-scrollbar { display: none; }
.mkl-p {
  flex-shrink: 0; min-width: 44px; height: 32px; padding: 0 8px;
  background: transparent; border: 0.5px solid #30363d; border-radius: 8px;
  color: #8b949e; font-size: 12px; cursor: pointer;
}
.mkl-p.active { color: #ef5350; border-color: rgba(239,83,80,0.5); background: rgba(239,83,80,0.1); font-weight: 600; }
.mkl-refresh-btn {
  width: 44px; height: 32px; flex-shrink: 0;
  border-radius: 8px; border: 0.5px solid #30363d;
  background: rgba(88,166,255,0.1); color: #58a6ff; font-size: 16px; line-height: 1; cursor: pointer;
}

/* ══════════════════════════════════════════
   自選清單
══════════════════════════════════════════ */
#tabWatchlist { padding-left: 0; padding-right: 0; }
#tabWatchlist .watchlist-container,
#tabWatchlist .wl-list { display: none !important; }   /* 桌機單列版不用 */
/* #watchlistContainerMobile / .mwl-* → mobile-watchlist.css */

/* ══════════════════════════════════════════
   設定頁（mobile-settings.js 動態建立）
══════════════════════════════════════════ */
#tabMobileSettings { width: 100%; max-width: 100vw; padding-left: 0; padding-right: 0; }
#tabMobileSettings * { box-sizing: border-box; min-width: 0; }
#tabMobileSettings > div { width: 100%; max-width: 100%; }
#tabMobileSettings .auth-signin-btn { width: 100%; justify-content: center; min-height: 44px; }
#tabMobileSettings .auth-drawer-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
#tabMobileSettings .auth-drawer-btn { flex: 1; min-height: 40px; }
.ms-toggle { width: 40px; height: 24px; border-radius: 12px; background: #30363d; position: relative; transition: background .2s; }
.ms-toggle.on { background: #ef5350; }
.ms-toggle-dot { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; }
.ms-toggle.on .ms-toggle-dot { transform: translateX(16px); }

/* ══════════════════════════════════════════
   篩選頁覆蓋層：要壓過 tabbar(200)（id 選擇器，不受 css 載入順序影響）
══════════════════════════════════════════ */
#mSheetOv      { z-index: 260 !important; }
#mScanOverlay  { z-index: 255 !important; padding-bottom: var(--m-safe-bottom); }
#mScrMain, #mSetupScreen { padding-bottom: 8px; }

/* 燈燈 toast / 一般 toast：抬到 tabbar 之上 */
.deng-toast, .toast, #toast {
  bottom: calc(var(--m-nav-h) + var(--m-safe-bottom) + 10px) !important;
  z-index: 400 !important;
}

/* ══════════════════════════════════════════
   漲跌顏色（台股慣例）
══════════════════════════════════════════ */
.m-up { color: #ef5350; }
.m-dn { color: #26a69a; }
.m-up-bg { color: #ef5350; background: rgba(239,83,80,0.12); }
.m-dn-bg { color: #26a69a; background: rgba(38,166,154,0.12); }

} /* end @media (max-width: 767px) */