/* VoiceBank 共用基礎樣式 —— 跨 App 的一致性與 RWD 底線
 *
 * 為什麼會有這支
 * --------------
 * 原本 33 個頁面各自寫 <style>,結果:
 *   · 22 頁有 viewport-fit=cover,但只有 6 頁真的處理 safe-area
 *     → iPhone 全螢幕(PWA standalone)時內容會滑到瀏海/底部指示條下面
 *   · 字體、背景、容器寬度各頁略有出入
 *   · 表格與長字串沒有統一的溢位保護,窄螢幕會把整頁撐出橫向捲軸
 *
 * 設計原則:**加法式、不強制**。
 *   · 不做 CSS reset,不覆蓋既有版面
 *   · safe-area 用 `body.vb-safe` 選擇性套用 —— 已自行處理的頁面
 *     (record/dashboard/home/store/…) 不加這個 class 就完全不受影響,
 *     避免左右內距被套兩次
 *   · 其餘規則都是「防止破版」的保護,不改變正常情況下的外觀
 */

/* ── 設計 token ───────────────────────────────────────────────── */
:root {
  --vb-safe-top: env(safe-area-inset-top, 0px);
  --vb-safe-bottom: env(safe-area-inset-bottom, 0px);
  --vb-safe-left: env(safe-area-inset-left, 0px);
  --vb-safe-right: env(safe-area-inset-right, 0px);
  /* 全站字體:與各頁原本的宣告一致,集中在這裡方便日後統一調整 */
  --vb-font: -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei",
             "Noto Sans TC", system-ui, sans-serif;
}

body { font-family: var(--vb-font); }

/* App 頂列：導覽有自己的位置；手機上先顯示導覽，再排列標題與操作。 */
.vb-app-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.vb-app-nav {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  flex-shrink: 0; max-width: 100%;
}
.vb-app-nav > a:not(.hidden), .vb-app-nav > button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: .375rem .625rem;
  border: 1px solid #cbd5e1; border-radius: .5rem;
  background: #fff; color: #475569; font-size: .75rem; line-height: 1.25rem;
  white-space: nowrap; text-decoration: none;
}
.vb-app-nav > a:hover, .vb-app-nav > button:hover { background: #f8fafc; }
.vb-app-title { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.vb-app-title .truncate { white-space: normal; overflow: visible; }
.vb-app-bar > span, .vb-app-actions > span { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.vb-app-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  min-width: 0; max-width: 100%; margin-left: auto; overflow-wrap: anywhere;
}
.vb-app-actions > button { flex-shrink: 0; white-space: nowrap; }
.vb-app-bar > button, .vb-app-actions > button { min-height: 40px; }
.vb-app-user { max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 639px) {
  .vb-app-bar > .vb-app-title { flex-basis: 100%; order: 2; }
  .vb-app-bar > .vb-app-actions { order: 1; }
  .vb-app-bar .vb-app-user { display: none; }
}

/* ── safe-area(選擇性:body 加 vb-safe 才生效)──────────────────
   橫向留白處理瀏海機橫放時的圓角/相機區;底部留白避開 home indicator。
   頂部留白放在頁首，包含一般、固定與容器內的導覽列。 */
@supports (padding: env(safe-area-inset-left)) {
  body.vb-safe {
    padding-left: var(--vb-safe-left);
    padding-right: var(--vb-safe-right);
    padding-bottom: var(--vb-safe-bottom);
  }
  /* 錄音等自行處理安全區的頁面未使用 vb-safe，不重複增加留白。 */
  body.vb-safe > header,
  body.vb-safe > div > header.vb-app-bar {
    padding-top: var(--vb-safe-top);
  }
}

/* ── 溢位保護:窄螢幕不該出現橫向捲軸 ─────────────────────────── */
/* 媒體與內嵌內容不得超出容器 */
img, video, audio, canvas, svg, iframe { max-width: 100%; }

/* 長 URL / 無空白的長字串(信箱、token、item_id)不該把版面撐開 */
body { overflow-wrap: break-word; }

/* 表格本身不換行,所以要靠外層捲動。
   .vb-scroll-x 是給「自己包一層」用的通用工具。 */
.vb-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 多分頁與資料表在窄螢幕保留單行，改由容器橫向捲動。 */
.vb-tabs-scroll {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.vb-tabs-scroll > * { flex: 0 0 auto; white-space: nowrap; }
.vb-table-scroll { min-width: 640px; }
.vb-table-scroll-wide { min-width: 800px; }

/* 表單欄位原本的固定 min-width 在手機上不得撐破卡片。 */
.vb-mobile-field { min-width: 0; max-width: 100%; }
@media (max-width: 639px) {
  .vb-mobile-full {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
    margin-left: 0 !important;
  }
  .vb-mobile-stack { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ── 觸控目標:手機上按鈕不要太小(WCAG 建議 ≥44px)───────────── */
@media (pointer: coarse) {
  button, [role="button"], input[type="submit"], input[type="button"] {
    min-height: 40px;
  }
}

.vb-password-field { position: relative; display: block; min-width: 0; }
.vb-password-field > input { width: 100%; padding-right: 2.75rem !important; }
.vb-password-toggle {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 6px; background: transparent; color: #64748b; cursor: pointer;
}
.vb-password-toggle:hover { color: #334155; background: #f1f5f9; }
.vb-password-toggle:focus-visible { outline: 2px solid #4f46e5; outline-offset: -2px; }
.vb-password-field > input:disabled + .vb-password-toggle { opacity: .5; pointer-events: none; }
.vb-password-field > input::-ms-reveal { display: none; }

/* ── 列印(同意書 / 稽核報表會被列印)───────────────────────────── */
@media print {
  header, nav, footer, .no-print { display: none !important; }
  body { background: #fff !important; }
}

/* 錄音入口與錄音頁共用的準備畫面。 */
  .record-preparation { width: min(100%, 420px); padding: 1.5rem; text-align: center; }
  .record-preparation > * + * { margin-top: 1rem; }
  .record-preparation-track { height: 8px; overflow: hidden; border-radius: 999px; background: #e2e8f0; }
  .record-preparation-track span {
    display: block; width: 35%; height: 100%; border-radius: inherit; background: #4f46e5;
    animation: record-preparing 1.4s ease-in-out infinite;
  }
  @keyframes record-preparing { from { transform: translateX(-100%); } to { transform: translateX(386%); } }
  @media (prefers-reduced-motion: reduce) {
    .record-preparation-track span { animation: none; width: 100%; opacity: .5; }
  }
  #preparation-message:empty { display: none; }

/* 本機工具授權頁 */
.vb-tool-auth { margin: 0; background: #f8fafc; color: #1e293b; line-height: 1.65; }
.vb-tool-auth *, .vb-tool-auth *::before, .vb-tool-auth *::after { box-sizing: border-box; }
.vb-tool-auth [hidden] { display: none !important; }
.vb-tool-auth .tool-auth-shell { width: min(100%, 560px); margin: 0 auto; padding: 48px 20px 28px; }
.vb-tool-auth .tool-auth-brand { display: flex; align-items: baseline; gap: 12px; margin: 0 4px 22px; }
.vb-tool-auth .tool-auth-brand strong { color: #4338ca; font-size: 23px; letter-spacing: -.5px; }
.vb-tool-auth .tool-auth-brand span { color: #64748b; font-size: 14px; }
.vb-tool-auth .tool-auth-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 20px; padding: 28px; box-shadow: 0 8px 30px #0f172a06; }
.vb-tool-auth .tool-auth-category { color: #6366f1; font-size: 12px; font-weight: 600; }
.vb-tool-auth h1 { font-size: 24px; line-height: 1.4; margin: 6px 0 10px; letter-spacing: -.5px; }
.vb-tool-auth p { margin: 0; font-size: 14px; }
.vb-tool-auth .tool-auth-heading > p { color: #64748b; }
.vb-tool-auth .tool-auth-details { background: #f8fafc; border: 1px solid #edf0f5; border-radius: 12px; padding: 16px; margin-top: 24px; }
.vb-tool-auth .tool-auth-label { font-size: 12px; color: #64748b; margin-bottom: 4px; }
.vb-tool-auth #site { font-size: 13px; overflow-wrap: anywhere; margin-bottom: 12px; }
.vb-tool-auth #scope-description { font-size: 13px; color: #475569; line-height: 1.8; }
.vb-tool-auth .tool-auth-status { margin: 20px 0; padding: 12px 14px; border-left: 3px solid #a5b4fc; background: #f5f5ff; border-radius: 0 8px 8px 0; color: #475569; overflow-wrap: anywhere; }
.vb-tool-auth .tool-auth-field { margin: 0 0 18px; }
.vb-tool-auth label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 7px; }
.vb-tool-auth input { width: 100%; min-height: 46px; border: 1px solid #cbd5e1; border-radius: 9px; padding: 10px 12px; font: inherit; color: inherit; background: #fff; }
.vb-tool-auth .tool-auth-help { margin-top: 6px; color: #64748b; font-size: 12px; }
.vb-tool-auth button:not(.vb-password-toggle), .vb-tool-auth .tool-auth-actions a { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 46px; padding: 10px 14px; font: inherit; font-size: 14px; font-weight: 600; border: 1px solid #cbd5e1; border-radius: 9px; background: #fff; color: #475569; text-decoration: none; cursor: pointer; }
.vb-tool-auth button:hover, .vb-tool-auth .tool-auth-actions a:hover { background: #f8fafc; }
.vb-tool-auth button.tool-auth-primary, .vb-tool-auth a.tool-auth-primary { background: #4f46e5; color: #fff; border-color: #4f46e5; }
.vb-tool-auth .tool-auth-primary:hover { background: #4338ca; }
.vb-tool-auth .tool-auth-cancel { margin-top: 10px; border-color: transparent; color: #64748b; }
.vb-tool-auth button:disabled { opacity: .55; cursor: wait; }
.vb-tool-auth :is(button, a, input):focus-visible { outline: 2px solid #818cf8; outline-offset: 3px; }
.vb-tool-auth .tool-auth-actions { display: grid; gap: 10px; }
.vb-tool-auth .tool-auth-secondary-actions { grid-template-columns: 1fr 1fr; margin-bottom: 18px; }
.vb-tool-auth footer { margin-top: 20px; text-align: center; color: #94a3b8; font-size: 12px; }
@media (max-width: 480px) {
  .vb-tool-auth .tool-auth-shell { padding: 24px 16px; }
  .vb-tool-auth .tool-auth-card { padding: 22px 18px; }
  .vb-tool-auth h1 { font-size: 22px; }
}