/* ═════════════════════════════════════════════
 *  weather-mobile.css — 手機版 Bottom Sheet 架構
 *
 *  僅在 viewport <= 768px 啟用。
 *  把原本 desktop 浮動左側 panel + 底部 meteogram-bar 整合進單一底部 sheet,
 *  消除空間競爭,對齊 iOS/Android 原生 bottom sheet UX 慣例。
 *
 *  Sheet 狀態:
 *    - peek  (~80px 露 handle + 風險 chip)
 *    - half  (50vh,default)
 *    - full  (95vh,展開完整 AI 解讀 + meteogram)
 *
 *  保留不動:
 *    Canvas 2D meteogram 繪圖邏輯(雨柱 / 雲霧 / 白天黑夜 / 溫度色溫)。
 *    只重做外層 chrome (model tabs 保留,drag handle / toggle btn 重做)。
 * ═════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ═══════════════════════════════════════════════════
   * Sheet 容器(fixed 蓋地圖底部)
   * ═══════════════════════════════════════════════════ */
  #mobile-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* 對齊 desktop .weather-panel 的 rgba(30, 35, 48, 0.92) 深色半透明風格
       讓搬進來的 panel 原本的白色文字(on-dark)可以正確顯示 */
    background: rgba(30, 35, 48, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--pk-text-on-dark, #F5F1E8);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.35);
    z-index: 500;
    display: flex;
    flex-direction: column;
    transition: top 0.32s cubic-bezier(0.32, 0.72, 0, 1); /* iOS 感 easing */
    overflow: hidden;
    /* top 由 .mobile-sheet--{state} class 控制 */
  }

  /* 三段高度 — 用 dvh(dynamic viewport height)而非 vh
     · vh 是「URL bar 隱藏後的最大可視高度」,URL bar 可見時元素會跑到工具列後面
     · dvh 會隨瀏覽器 chrome 展開 / 收合即時同步,handle 一定貼在可視底部
     · fallback 保留 vh 給極舊版瀏覽器(< Chrome 108 / Safari 15.4) */
  /* I3 修復 2026-04-19:三段統一只用 dvh,移除 vh fallback(2026 年支援率 >95%,
     保留不一致的 half/full fallback 沒意義) */
  #mobile-sheet.mobile-sheet--peek { top: calc(100dvh - 80px); }
  #mobile-sheet.mobile-sheet--half { top: 50dvh; }
  #mobile-sheet.mobile-sheet--full { top: 5dvh; }

  /* 拖曳中 JS 會設 inline top + transition:none 即時跟手 */

  /* iOS Safari safe area — home indicator / 底部 URL bar 避讓
     sheet 本身貼 bottom:0,但內容往上推避開手機底部的互動 zone */
  #mobile-sheet {
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  /* ═══════════════════════════════════════════════════
   * Drag handle(拖曳手把)
   * ═══════════════════════════════════════════════════ */
  .mobile-sheet__handle {
    position: relative;
    flex-shrink: 0;
    padding: 10px 0 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: grab;
    touch-action: none;           /* 攔截瀏覽器預設 touch 行為 */
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-sheet__handle:active { cursor: grabbing; }
  .mobile-sheet__handle-bar {
    width: 44px;
    height: 5px;
    background: rgba(245, 241, 232, 0.35); /* 深底配亮色 handle bar */
    border-radius: 999px;
    transition: background 0.15s, width 0.15s;
  }
  .mobile-sheet__handle:active .mobile-sheet__handle-bar,
  #mobile-sheet[data-state="full"] .mobile-sheet__handle-bar {
    background: var(--pk-amber, #C4845A);
    width: 56px;
  }

  /* 快速展開 / 收合 toggle 按鈕(JS 動態插入 handle 右側) */
  .mobile-sheet__toggle {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(245, 241, 232, 0.28);
    background: rgba(245, 241, 232, 0.08);
    color: var(--pk-text-on-dark, #F5F1E8);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    z-index: 2;
    transition: background 0.15s, border-color 0.15s;
  }
  .mobile-sheet__toggle:active {
    background: rgba(245, 241, 232, 0.22);
    border-color: var(--pk-amber, #C4845A);
  }

  /* ═══════════════════════════════════════════════════
   * Peek chip(露出單行風險總覽)
   * ═══════════════════════════════════════════════════ */
  .mobile-sheet__chip {
    flex-shrink: 0;
    padding: 0 56px 14px; /* 左右留 56px 讓右側 toggle button 不壓到文字 */
    font-size: 14px;
    font-weight: 600;
    color: var(--pk-text-on-dark, #F5F1E8); /* 深底亮字 */
    text-align: center;
    letter-spacing: 0.02em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    line-height: 1.4;
  }
  /* full 狀態 chip 淡隱(展開後資訊已充分) */
  #mobile-sheet.mobile-sheet--full .mobile-sheet__chip { display: none; }

  /* ═══════════════════════════════════════════════════
   * Sheet body 內容區
   * ═══════════════════════════════════════════════════ */
  .mobile-sheet__body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 0 14px 24px;
    /* 避免 iOS Safari scroll 彈回干擾 sheet drag */
    overscroll-behavior: contain;
  }
  /* peek 狀態 body 完全隱藏 */
  #mobile-sheet.mobile-sheet--peek .mobile-sheet__body { display: none; }

  /* ═══════════════════════════════════════════════════
   * 覆寫 .weather-panel 和 .meteogram-bar 在 sheet 內的行為
   * ═══════════════════════════════════════════════════ */
  .mobile-sheet__body .weather-panel,
  .mobile-sheet__body .meteogram-bar {
    position: static !important;
    inset: auto !important;
    max-height: none !important;
    height: auto !important;
    width: 100% !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    transform: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    display: block !important;
  }

  /* 隱藏 desktop-only UI chrome */
  .mobile-sheet__body .weather-panel .panel-toggle,
  .mobile-sheet__body .weather-panel .weather-panel__close-btn-desktop,
  .mobile-sheet__body .meteogram-bar .meteogram-bar__handle,
  .mobile-sheet__body #meteogram-toggle {
    display: none !important;
  }

  /* Panel 頭部在 sheet 內的簡化 */
  .mobile-sheet__body .weather-panel__title {
    font-size: 15px !important;
    margin: 0 0 4px !important;
  }
  .mobile-sheet__body .weather-panel__subtitle {
    font-size: 12px !important;
    margin-bottom: 12px !important;
  }

  /* Mode segmented(路線&天氣 / AI 解讀) */
  .mobile-sheet__body .panel-mode-seg {
    margin: 8px 0 12px !important;
    width: 100%;
  }

  /* ═══════════════════════════════════════════════════
   * Meteogram UI chrome 重做
   * ═══════════════════════════════════════════════════ */
  .mobile-sheet__body .meteogram-bar {
    margin-top: 20px !important;
    padding-top: 16px !important;
    border-top: 1px solid rgba(30, 35, 48, 0.08) !important;
  }
  .mobile-sheet__body .meteogram-model-tabs {
    justify-content: flex-start !important;
    gap: 4px !important;
    margin: 0 0 8px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-sheet__body .meteogram-model-tab {
    flex-shrink: 0;
    padding: 6px 12px !important;
    font-size: 13px !important;
  }
  .mobile-sheet__body .meteogram-model-updated {
    font-size: 10px !important;
    margin-left: auto;
  }
  /* Canvas 保持寬度 + 橫向滾動(時間軸長時) */
  .mobile-sheet__body #meteogram-chart {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    position: relative !important;
  }
  .mobile-sheet__body #meteogram-canvas {
    min-width: 680px;  /* 確保窄螢幕仍可橫向捲動看完整時間軸 */
  }

  /* ═══════════════════════════════════════════════════
   * 地圖與 sheet 共存
   * ═══════════════════════════════════════════════════ */
  .weather-page { position: relative; }
  #map { z-index: 0; }

  /* 原本 desktop 浮動 panel / meteogram-bar 在 sheet 外如有殘影,確保隱藏 */
  body > .weather-panel:not(.mobile-sheet__body *),
  body > .meteogram-bar:not(.mobile-sheet__body *) {
    display: none !important;
  }

  /* 原本的手機 media 覆寫(max-height:35vh 等)在 sheet body 內失效,上面 !important 已壓制 */

  /* ═══════════════════════════════════════════════════
   * Hero banner compact(省空間,sheet 內不需要 88px 高大 banner)
   * ═══════════════════════════════════════════════════ */
  .mobile-sheet__body .ai-hero-banner {
    padding: 10px 12px !important;
    margin-bottom: 10px !important;
    gap: 8px !important;
  }
  .mobile-sheet__body .ai-hero-banner__icon {
    font-size: 24px !important;
  }
  .mobile-sheet__body .ai-hero-banner__label {
    font-size: 15px !important;
  }
  .mobile-sheet__body .ai-hero-banner__title {
    font-size: 12.5px !important;
    color: var(--pk-text-on-dark, #F5F1E8) !important; /* 深 sheet 底亮字 */
    margin-bottom: 2px !important;
  }
  .mobile-sheet__body .ai-hero-banner__sub {
    font-size: 11px !important;
  }
  .mobile-sheet__body .ai-hero-banner__share,
  .mobile-sheet__body .ai-hero-banner__refetch {
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
  }

  /* Day card 在 sheet 內的間距調整 */
  .mobile-sheet__body .ai-day-card {
    margin-bottom: 10px !important;
  }
  .mobile-sheet__body .ai-day-head {
    padding: 10px 12px !important;
    font-size: 14px !important;
  }
  .mobile-sheet__body .ai-day-body {
    padding: 0 12px 12px !important;
  }

  /* 時段卡片手機版緊湊 */
  .mobile-sheet__body .ai-period-card {
    padding: 8px 10px !important;
  }
  .mobile-sheet__body .ai-period-card__icon {
    font-size: 20px !important;
  }
  .mobile-sheet__body .ai-period-card__summary {
    padding-left: 0 !important;  /* 手機窄螢幕不縮排 */
    font-size: 12.5px !important;
  }

  /* Q&A 對話框在 full 狀態可用,sheet scroll 到底即可 */
  .mobile-sheet__body #ai-followup-input {
    font-size: 14px !important;  /* iOS 14px 以下會自動放大 */
  }

  /* AI action bar v2(2026-04-20)手機版:
       頂部一行 toggle + ✨ 按鈕橫排,按鈕窄螢幕保留 icon + 短 label
       下方 #ai-history-list 獨立一行 full width */
  .mobile-sheet__body .ai-history-bar__top {
    flex-wrap: nowrap !important;
  }
  .mobile-sheet__body .ai-action-bar__rerun {
    padding: 7px 10px !important;
    font-size: 12px !important;
  }
  .mobile-sheet__body .ai-action-bar__rerun-label {
    /* 手機窄螢幕只顯示 icon,省空間(title 仍保留可長按看 tooltip) */
    display: none !important;
  }
  .mobile-sheet__body .ai-action-bar__rerun-icon {
    font-size: 16px !important;
  }

  /* AI 歷史橫條(E2):手機深色 sheet 底下覆寫配色,避免 text-on-light 暗字看不見 */
  .mobile-sheet__body .ai-history-bar__summary {
    background: rgba(245, 241, 232, 0.08) !important;
    border-color: rgba(245, 241, 232, 0.22) !important;
    color: var(--pk-text-on-dark-mute, #AEBDD4) !important;
  }
  .mobile-sheet__body .ai-history-bar__summary:hover {
    background: rgba(245, 241, 232, 0.16) !important;
  }
  .mobile-sheet__body .ai-history-bar__label {
    color: var(--pk-text-on-dark, #F5F1E8) !important;
  }
  .mobile-sheet__body .ai-history-bar__chevron {
    color: rgba(245, 241, 232, 0.5) !important;
  }

  /* ═══════════════════════════════════════════════════
   * Body 根元素:sheet 開啟時避免 double scroll
   * ═══════════════════════════════════════════════════ */
  body.weather-page {
    overflow: hidden;
  }
}

/* Desktop (>768px) 時 mobile sheet 完全隱藏 */
@media (min-width: 769px) {
  #mobile-sheet { display: none !important; }
}