/* 記賬驗證骨架 v0.0.3 — 自定義輸入面板
   核心：主畫面「金額欄」是 <button>，不是 <input>，因此永遠不會喚起系統輸入法。
        只有面板裡點「備註」切換成輸入區時，才會彈出系統鍵盤（那時才需要 IME）。

   硬規則（真機已驗）：
   1. 所有真實 input 字級 >= 16px（iOS 聚焦放大門檻）
   2. 版面用 dvh，不用 vh
   3. 底部元素避開 home indicator；鍵盤開著時收掉那圈留白（body.kb-open）
*/

:root {
  color-scheme: light;      /* 鎖淺色：避免 iOS 深色模式把表單/滾動條染成深色 */
  --bg: #f5f6f8;
  --card: #ffffff;
  --line: #e3e6ea;
  --text: #1b1f24;
  --muted: #6b7280;
  --brand: #0a4d8c;
  --danger: #b3261e;
  --radius: 12px;
  --pad-h: 32dvh;          /* 面板高度：更矮，露出更多帳目 */
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ------------------------------------------------------------------
   App 級鎖定：不縮放、不拖動、不橡皮筋。
   原則（主人指定）：一旦溢出就截斷，寧可看不全，也不為了兼容而讓版面會動。
   position: fixed 讓 document 層根本沒有可滾動/可拖動的範圍，
   只剩 .pane 這個內部容器能滾。
   ------------------------------------------------------------------ */
html, body {
  margin: 0; padding: 0;
  position: fixed;
  inset: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC",
               "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  font-size: 16px; line-height: 1.45;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-touch-callout: none;      /* 長按不彈系統選單（更像 App） */
  -webkit-user-select: none;        /* 不讓長按選字把版面拖走 */
  user-select: none;
}
/* 只有真正要打字的地方允許選取 */
input, textarea {
  -webkit-user-select: text;
  user-select: text;
}

.app {
  height: 100vh;
  height: 100dvh;
  display: flex; flex-direction: column; overflow: hidden;
}

/* ---------- 頂欄 ---------- */
.bar {
  flex: 0 0 auto; height: 52px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; padding-top: env(safe-area-inset-top);
  background: var(--card); border-bottom: 1px solid var(--line);
  user-select: none;
  overflow: hidden;
}
.brand { font-weight: 600; font-size: 17px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag { font-size: 12px; color: var(--muted); font-weight: 400; margin-left: 6px; }
.icon-btn {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--bg); color: var(--muted);
  font-size: 14px; font-style: italic; cursor: pointer;
}
.bar-actions { display: flex; gap: 8px; flex: 0 0 auto; }
#btnBell { font-style: normal; font-size: 15px; }

/* ---------- 面板 ---------- */
.pane {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: 16px;
}
.hidden { display: none !important; }

.h1 { font-size: 20px; margin: 8px 0 4px; }
.muted { color: var(--muted); font-size: 14px; margin: 0 0 16px; }

/* ---------- 登入表單 ---------- */
.field { display: block; margin-bottom: 12px; }
.label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; user-select: none; }

input {
  width: 100%;
  font-size: 16px;              /* 硬下限 */
  line-height: 1.4;
  padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--text);
  min-height: 44px;
  appearance: none; -webkit-appearance: none;
}
input:focus { outline: 2px solid var(--brand); outline-offset: 1px; }

button { font-family: inherit; }

.primary {
  min-height: 46px; border: 0; border-radius: 10px;
  background: var(--brand); color: #fff;
  font-size: 16px; font-weight: 600; cursor: pointer;
  touch-action: manipulation;
}
.primary:active { filter: brightness(.92); }
.primary[disabled] { opacity: .45; }

.ghost {
  min-height: 46px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--text);
  font-size: 16px; cursor: pointer;
}

.hint { min-height: 18px; margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.hint.err { color: var(--danger); }

/* ---------- 摘要 / 列表 ---------- */
.summary {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px;
}
.sum-num {
  font-size: 30px; font-weight: 700; letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sum-label { font-size: 13px; color: var(--muted); margin-top: 2px; }

.list { list-style: none; margin: 0; padding: 0; }
.list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 12px 14px; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; margin-bottom: 8px;
  overflow: hidden;               /* 內容再長也不撐破，直接截斷 */
}
.li-main { min-width: 0; overflow: hidden; }
.li-note { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.li-time { font-size: 12px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.li-amt {
  flex: 0 0 auto; max-width: 45%;
  font-variant-numeric: tabular-nums; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.empty { text-align: center; color: var(--muted); font-size: 14px; padding: 24px 0; }

/* ---------- 底部條 ---------- */
.composer {
  flex: 0 0 auto;
  background: var(--card); border-top: 1px solid var(--line);
  padding: 10px 16px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  user-select: none;
}
.composer .row { display: flex; align-items: stretch; gap: 8px; }
.composer .hint { margin-top: 6px; }

/* 假欄位：用 button 做成輸入框的樣子。按鈕天生不會喚起鍵盤。 */
.fake-input {
  flex: 1 1 auto; min-width: 0; min-height: 46px;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); color: var(--text);
  font-size: 16px; text-align: left; cursor: pointer;
  touch-action: manipulation;
}
.fake-input:active { background: #eef1f4; }
.fake-input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.fake-label { font-size: 12px; color: var(--muted); flex: 0 0 auto; }
.fake-value {
  flex: 1 1 auto; text-align: right;
  font-size: 20px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.send { flex: 0 0 auto; padding: 0 20px; }

/* 鍵盤開著時，安全區留白與空提示行都是死空間 → 收掉 */
body.kb-open .composer { padding-bottom: 10px; }
body.kb-open .composer .hint { min-height: 0; margin-top: 0; }
body.kb-open .pad { padding-bottom: 8px; }

/* ---------- 自定義輸入面板 ---------- */
.pad-mask {
  position: fixed; inset: 0; background: rgba(15, 20, 28, .28);
  z-index: 30;
}

.pad {
  position: fixed; left: 0; right: 0;
  height: var(--pad-h); min-height: 220px;
  z-index: 40;
  display: flex; flex-direction: column;
  gap: 6px;
  padding: 8px 12px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--card);
  border-top: 1px solid var(--line);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 24px rgba(15, 20, 28, .12);
  /* 跟 visualViewport 走：鍵盤彈出時整塊上移
     刻意用 bottom 而非 transform —— fixed + transform 在舊 iOS 上有
     「內部 input 點不開鍵盤」的已知問題，不能冒這個險 */
  bottom: var(--kb, 0px);
  transition: bottom .12s ease-out;
  user-select: none;
}

.pad-top {
  flex: 0 0 auto; height: 44px;
  display: flex; align-items: center; gap: 8px;
}
.pad-amount {
  flex: 1 1 auto; text-align: right;
  font-size: 26px; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -0.5px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.pad-note-chip {
  flex: 0 0 auto; height: 34px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 17px;
  background: var(--bg); color: var(--muted);
  font-size: 14px; cursor: pointer;
  max-width: 45%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.pad-note-chip.has-text { color: var(--brand); border-color: var(--brand); background: #eef5fb; }
.pad-del {
  flex: 0 0 auto; width: 44px; height: 34px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); font-size: 16px; cursor: pointer;
}

.pad-keys {
  flex: 1 1 auto; min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 6px;
}
.pad-keys button {
  min-height: 0;
  border: 1px solid var(--line); border-radius: 10px;
  background: #fafbfc; color: var(--text);
  font-size: 20px; font-weight: 500; cursor: pointer;
  touch-action: manipulation;
}
.pad-keys button:active { background: #e6ebf0; }
.pad-keys .key-fn { color: var(--muted); font-size: 17px; }

/* 模式二：整塊變輸入區（點備註才切換） */
.pad-note {
  flex: 1 1 auto; min-height: 0; width: 100%;
  font-size: 20px;                /* 遠高於 16px 門檻 */
  line-height: 1.4;
  padding: 10px 12px;
  border: 1px solid var(--brand); border-radius: 10px;
  background: #fff;
}

.pad-foot {
  flex: 0 0 auto; height: 48px;
  display: flex; align-items: stretch; gap: 8px;
}
.pad-foot .primary { flex: 1 1 auto; }

/* ---------- 詳情 sheet / 確認框 ---------- */
/* 背景滾動鎖：document 早已鎖死，但 .pane 是內部滾動容器，開 modal 時要另外鎖 */
body.modal-open .pane { overflow: hidden; }

.sheet-mask {
  position: fixed; inset: 0; background: rgba(15, 20, 28, .34);
  z-index: 45;
}
.sheet {
  position: fixed; left: 0; right: 0;
  bottom: var(--kb, 0px);
  z-index: 50;
  display: flex; flex-direction: column; gap: 8px;
  padding: 8px 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--card);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 28px rgba(15, 20, 28, .16);
  transition: bottom .12s ease-out;
  max-height: 78dvh;
  overflow: hidden;
}
body.kb-open .sheet { padding-bottom: 12px; }
.sheet-grip {
  width: 38px; height: 4px; border-radius: 2px;
  background: #d5dae0; margin: 2px auto 6px;
}
.sheet-amount {
  font-size: 28px; font-weight: 700; text-align: center;
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sheet-meta {
  text-align: center; font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sheet-label { font-size: 12px; color: var(--muted); }
.sheet-note { font-size: 16px; }
.sheet-actions { display: flex; gap: 8px; }
.sheet-actions .primary { flex: 1 1 auto; }
.danger {
  min-height: 46px; padding: 0 16px;
  border: 1px solid var(--danger); border-radius: 10px;
  background: var(--card); color: var(--danger);
  font-size: 16px; font-weight: 600; cursor: pointer;
}
.sheet-close { min-height: 42px; }

.confirm-mask {
  position: fixed; inset: 0; background: rgba(15, 20, 28, .42);
  z-index: 55;
}
.confirm {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%);   /* 桌面與 iOS 都安全：內容無輸入框，不受 fixed+transform 坑影響 */
  width: min(86vw, 320px);
  z-index: 60;
  background: var(--card); border-radius: 14px;
  padding: 18px 16px 12px;
  box-shadow: 0 18px 50px rgba(15, 20, 28, .28);
  user-select: none;
}
.confirm-title { font-size: 17px; font-weight: 700; text-align: center; }
.confirm-text { font-size: 14px; color: var(--muted); text-align: center; margin: 8px 0 16px; }
.confirm-actions { display: flex; gap: 8px; }
.confirm-actions > button { flex: 1 1 0; }

/* ---------- 桌面：限寬居中，像手機預覽；手機端完全不受影響 ---------- */
@media (min-width: 720px) {
  .app {
    max-width: 480px; margin: 0 auto;
    box-shadow: 0 0 0 1px var(--line), 0 16px 48px rgba(15, 20, 28, .10);
  }
  .pad, .sheet,
  .pad-mask, .sheet-mask, .confirm-mask {
    max-width: 480px; margin-left: auto; margin-right: auto;
  }
}

/* ---------- 診斷浮層 ---------- */
.debug {
  position: fixed; right: 8px; top: 56px; z-index: 50;
  background: rgba(20, 24, 30, .92); color: #d7e3f0;
  font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 8px 10px; border-radius: 8px;
  max-width: 62vw; pointer-events: none;
}
.debug b { color: #8fb6dd; font-weight: 600; }