/* ==================================================================
   恆健藥廠 · 移動端 / 觸屏兼容層
   ------------------------------------------------------------------
   最後加載（base → site → chat → mobile / admin → mobile），
   只放「桌面不出問題、手機能用」的補丁，不重寫版式。
   分七塊：觸屏基礎 / hover 依賴 / iOS 輸入框 / 點擊區 /
           全屏面板高度 / 滾動體驗 / 小字兜底
   ================================================================== */

/* ---------- 0. 觸屏基礎 ---------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

a,
button,
[role="button"],
label,
summary {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* 鍵盤導航（Tab）時仍然要看得見焦點；只給「本來沒有焦點樣式」的元素加，
   輸入框自己有 :focus 邊框，別疊兩層 */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* ---------- 1. 觸屏沒有 hover ---------- */
/* 刪除按鈕原本寫成 .chatlist__wrap:hover .chatlist__del，
   手機永遠不 hover → 按鈕永遠不出現 → 刪不掉。觸屏下讓它常顯。 */
@media (hover: none), (pointer: coarse) {
  .chatlist__del {
    opacity: 0.5;
  }

  .chatlist__del:active {
    opacity: 1;
  }

  /* 輪播圓點視覺只有 9×9，觸屏下把「按鈕」本身做成 36×36，
     圓點用 ::before 畫在中間 —— 視覺不變，可點範圍變大且互不重疊 */
  .hero__dots {
    gap: 6px;
  }

  .hero__dot {
    position: relative;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
  }

  .hero__dot.is-active {
    background: transparent;
    border-color: transparent;
    transform: none;
  }

  .hero__dot::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1px solid var(--gray-400);
    background: transparent;
    transition: all var(--dur) var(--ease);
  }

  .hero__dot.is-active::before {
    background: var(--green-800);
    border-color: var(--green-800);
    transform: scale(1.15);
  }
}

/* ---------- 2. iOS 輸入框：字號 <16px 聚焦會被強制放大 ---------- */
@media (pointer: coarse), (max-width: 700px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: 16px;
    min-height: 42px;
  }

  /* 聊天輸入框是多行自適應，別再頂高度（字號要單獨寫，
     否則 .chat-input textarea 的 13.5px 會蓋掉上面的 16px） */
  .chatmain__input textarea,
  .chat-input textarea {
    font-size: 16px;
    min-height: 44px;
  }
}

/* ---------- 2b. 聊天窗按鈕（手機上最容易點錯的地方） ---------- */
@media (hover: none), (pointer: coarse) {
  .chat-head__close {
    width: 40px;
    height: 40px;
  }

  .chat-teaser__close {
    min-width: 32px;
    min-height: 32px;
  }

  .chat-quick button {
    min-height: 40px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .chat-input button {
    min-width: 60px;
    height: 44px;
  }

  .chat-foot button {
    min-height: 36px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

/* ---------- 3. 點擊區：觸屏目標 ≥ 40~44px ---------- */
@media (max-width: 1023px) {
  /* 手機選單按鈕本來就 42×42，補到 44 */
  .burger {
    width: 44px;
    height: 44px;
  }

  /* 手機選單每一項高度夠，這裡只保證下拉子項也夠 */
  .nav.is-open .nav__drop a {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  /* 頂欄：窄屏上「地址」和右側「代工詢價」會擠成一行、兩段文字貼在一起，
     所以窄屏只留電話和郵箱；整條頂欄加高到 44px，順便解決點擊區太小 */
  .topbar__inner {
    height: 44px;
  }

  .topbar__list li:nth-child(3) {
    display: none;
  }

  .topbar a {
    display: flex;
    align-items: center;
    height: 44px;
  }
}

@media (pointer: coarse), (max-width: 640px) {
  /* 頁腳連結原本只有 19px 高 */
  .footer__col a,
  .footer a,
  .footer button {
    display: inline-block;
    padding-top: 7px;
    padding-bottom: 7px;
  }

  /* 頁頭 logo 原本 35px 高 */
  .logo {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* 後台頂部小按鈕原本 30px 高 */
  .btn-a--sm {
    min-height: 38px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  /* 麵包屑首頁連結原本只有 23px 高 */
  .pagehero__crumb a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding-left: 8px;
    padding-right: 8px;
    margin-left: -8px;
  }

  /* 會話篩選標籤 */
  .chatfilter__tab {
    min-height: 36px;
  }
}

/* ---------- 4. 全屏面板：用 dvh，別被 Safari 地址欄吃掉一截 ---------- */
@media (max-width: 640px) {
  .chat-panel {
    height: 100vh;
    max-height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
  }

  .chat-foot,
  .chat-input {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }

  .chat-fab {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
}

/* 手機選單最大高度 */
@media (max-width: 1023px) {
  .nav.is-open {
    max-height: calc(100vh - 112px);
    max-height: calc(100dvh - 112px);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}

/* 後台會話：手機上左列別把右列擠沒 */
@media (max-width: 980px) {
  .chatlist {
    max-height: 42vh;
  }

  .chatmain {
    min-height: 56vh;
  }
}

/* 後台會話：寬屏 / 平板吃滿可視高度 */
@media (min-width: 981px) {
  .chatwrap {
    height: calc(100vh - 150px);
    height: calc(100dvh - 150px);
  }
}

/* ---------- 5. 滾動體驗 ---------- */
.chatlist,
.chatmain__body,
.nav.is-open,
.side__nav,
.clist {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ---------- 6. 小字兜底：手機上 10~11px 基本看不清 ---------- */
@media (pointer: coarse), (max-width: 640px) {
  .logo__en {
    font-size: 11px;
  }

  .msg__time {
    font-size: 11px;
  }

  .flow__time,
  .field__hint,
  .chat-foot {
    font-size: 12px;
  }

  /* 後台側欄的品牌英文副標題原本 9.5px */
  .side__brand span {
    font-size: 11px;
  }

  /* 後台「無圖」佔位 */
  .imgfield__preview {
    font-size: 11px;
  }
}

/* ---------- 7. 極窄屏（320px 老機器） ---------- */
@media (max-width: 380px) {
  .nav__brand,
  .logo__cn {
    font-size: 16px;
    letter-spacing: 0.1em;
  }

  .hero__body {
    padding-left: 20px;
    padding-right: 20px;
  }

  .hero__media {
    margin: 0 20px;
  }
}