/* mamapapa -- app.css. SPEC sec.0 "Built for 70-year-olds" as exact rules:
   base 20px, headings 28-34px, money 40px+ bold, buttons full-width 64px+ with
   words AND emoji, warm off-white #fff8ef, near-black text, bright category chips,
   72px keypad keys, green/amber/red statuses, visible focus, no hover-only effects. */

:root {
  --bg: #fff8ef;            /* warm off-white */
  --ink: #241f17;           /* near-black text */
  --ink-soft: #5c5344;
  --card: #ffffff;
  --line: #eadfcd;
  --accent: #e63946;        /* red packet red */
  --accent-dark: #c42f3b;
  --c-ok: #2f9e44;          /* Left: green */
  --c-warn: #e8a013;        /* 80-100% of budget: amber */
  --c-bad: #d64545;         /* over budget: red */
  --chip: #219ebc;          /* category chip colour (page sets --chip per category) */
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 20px;           /* base 20px */
  line-height: 1.4;
}

/* Tablet still works: content column, never a stretched wall of text */
.page {
  max-width: 480px;
  margin: 0 auto;
  padding: 16px 16px 48px;
}

h1 { font-size: 34px; line-height: 1.2; margin: 18px 0 12px; }
h2 { font-size: 30px; line-height: 1.25; margin: 16px 0 10px; }
h3 { font-size: 28px; line-height: 1.3; margin: 14px 0 8px; }

/* Money figures: BIG and bold */
.money { font-size: 42px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* QA #1622 (SPEC sec.0 "money figures 40px+ bold"): 30px failed the 40px rule */
.money-sm { font-size: 40px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Top bar: '< Home' one tap away (64px tap target) */
.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 480px;
  margin: 0 auto;
  padding: 8px 12px;
  border-bottom: 2px solid var(--line);
}
.topbar-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;          /* 64px tap target */
  min-width: 96px;
  padding: 0 18px;
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 14px;
  text-decoration: none;
}
.topbar-home:active { background: #f2e8d8; }
.topbar-title { font-size: 24px; font-weight: 700; }

/* Buttons: full width, min 64px, words AND emoji (never icon-only) */
.btn {
  display: block;
  width: 100%;
  min-height: 64px;
  margin: 10px 0;
  padding: 12px 20px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 16px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}
.btn:active { transform: translateY(1px); background: #f2e8d8; }
.btn-primary { background: var(--accent); border-color: var(--accent-dark); color: #fff; }
.btn-primary:active { background: var(--accent-dark); }
.btn-ok { background: var(--c-ok); border-color: #237a34; color: #fff; }
.btn-ok:active { background: #237a34; }

/* Undo: the one action that stays on screen during its 10-second countdown */
.btn-undo {
  display: block;
  width: 100%;
  min-height: 64px;
  margin: 10px 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--accent-dark);
  background: #fff;
  border: 3px dashed var(--accent);
  border-radius: 16px;
}

/* Cards (month card, totals) */
.card {
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 18px;
  padding: 18px 20px;
  margin: 14px 0;
}

/* Month card label + three money lines */
.card-label { font-size: 22px; font-weight: 700; color: var(--ink-soft); }

/* Status colours: Left green / amber near budget / red over budget */
.st-ok   { color: var(--c-ok); }
.st-warn { color: var(--c-warn); }
.st-bad  { color: var(--c-bad); }

/* Thin colour bar under the month card (green -> amber -> red by budget use) */
.bar {
  height: 14px;
  border-radius: 7px;
  background: #eee2cc;
  overflow: hidden;
  margin: 8px 0 2px;
}
.bar-fill { height: 100%; border-radius: 7px; background: var(--c-ok); }
.bar-fill.warn { background: var(--c-warn); }
.bar-fill.bad { background: var(--c-bad); }

/* Banner: "N receipts to check" */
.banner {
  display: block;
  padding: 14px 18px;
  margin: 12px 0;
  font-size: 22px;
  font-weight: 600;
  color: #7a4a00;
  background: #ffedd0;
  border: 2px solid var(--c-warn);
  border-radius: 16px;
  text-decoration: none;
}

/* Bright category chips: page sets style="--chip: #e63946" from the category colour */
.chip {
  display: inline-block;
  min-width: 56px;
  min-height: 40px;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--chip);
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
}

/* Category tiles on add.php: 2 per row */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  padding: 10px;
  font-size: 21px;
  font-weight: 600;
  color: var(--ink);
  background: var(--card);
  border: 3px solid var(--line);
  border-radius: 16px;
  cursor: pointer;
  text-align: center;
}
.tile .tile-emoji { font-size: 34px; line-height: 1.2; }
/* Selected tile: thick coloured border + inner ring (works on every Safari/Chrome) */
.tile.on { border-color: var(--chip); box-shadow: inset 0 0 0 3px var(--chip); }

/* Paid-by toggles: Cash / Card / Bank */
.toggles { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.toggle {
  min-height: 64px;
  padding: 8px;
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  background: var(--card);
  border: 3px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
}
.toggle.on { border-color: var(--accent); background: #ffe9e9; }

/* Forms: big fields, 20px text minimum */
label.field { display: block; margin: 16px 0 6px; font-size: 21px; font-weight: 600; }
input[type="text"], input[type="date"], input[type="number"], select, textarea {
  width: 100%;
  min-height: 56px;
  padding: 10px 14px;
  font-size: 20px;
  font-family: inherit;
  color: var(--ink);
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 12px;
}

/* Big on-screen keypad: 72px keys */
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0; }
.key {
  min-height: 72px;          /* 72px keys */
  font-size: 28px;
  font-weight: 600;
  color: var(--ink);
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  padding: 8px;
}
.key:active { background: #f2e8d8; }
.key-keypad-spacer { visibility: hidden; }

/* Amount as typed, shown big above the keypad */
.amount-display {
  font-size: 44px;
  font-weight: 700;
  text-align: center;
  min-height: 64px;
  padding: 8px 0;
  font-variant-numeric: tabular-nums;
}

/* Full-screen confirmation ("Saved. $12.50 Food." + Undo) */
.confirm {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px;
  background: var(--bg);
  text-align: center;
}
.confirm .confirm-emoji { font-size: 72px; line-height: 1.1; }
.confirm .confirm-words { font-size: 30px; font-weight: 700; max-width: 480px; }

/* Big list rows (last expenses, summary categories) */
.rows { list-style: none; margin: 12px 0; padding: 0; }
.row-item {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 10px 14px;
  margin: 10px 0;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 16px;
  text-decoration: none;
  color: var(--ink);
}
.row-item .row-emoji { font-size: 32px; }
.row-item .row-main { flex: 1; min-width: 0; }
.row-item .row-sub { font-size: 20px; color: var(--ink-soft); } /* QA #1622: base font is 20px */
.row-item .row-amount { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Cash / Card / Bank split, small line at the bottom of summary */
.split-small { font-size: 20px; color: var(--ink-soft); text-align: center; margin-top: 16px; } /* QA #1622 */

/* lang = both: Chinese underneath on a smaller second line */
.bi-zh { display: block; font-size: 0.75em; }

/* Visible focus outlines everywhere (no hover-only effects in this app) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 4px solid #219ebc;
  outline-offset: 2px;
}

/* ===== Xiao Chen chat (SPEC sec.5 Phase 2a; task #1624) ====================
   Round 小陈 button bottom-right (label under it on Home only, added by
   chat.js); full-screen panel with 22px bubbles, big composer and 3
   suggestion chips. Keyboard-safe: the panel height follows visualViewport. */

/* Keep the page's last row clear of the floating button (only when it exists) */
body.has-xc .page { padding-bottom: 132px; }
body.xc-lock { overflow: hidden; } /* panel open: nothing scrolls behind it */

.xc-btn {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.xc-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--accent); /* red-packet red */
  box-shadow: 0 4px 14px rgba(36, 31, 23, 0.3);
}
.xc-btn:active .xc-circle { background: var(--accent-dark); }
.xc-face {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 1px;
}
.xc-label {
  display: block;
  margin-top: 6px;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

/* Full-screen chat panel */
.xc-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100%; /* JS keeps it at visualViewport.height when the keyboard is up */
  z-index: 60;
  display: none;
  flex-direction: column;
  background: var(--bg);
}
.xc-panel.xc-open { display: flex; }
.xc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: var(--card);
  border-bottom: 2px solid var(--line);
}
.xc-title { font-size: 24px; font-weight: 700; }
.xc-close {
  width: 64px;
  height: 64px;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  font-size: 30px;
  line-height: 1;
}
.xc-bubbles {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 12px;
}
.xc-msg { display: flex; margin: 10px 0; }
.xc-msg.xc-xc { justify-content: flex-start; }
.xc-msg.xc-me { justify-content: flex-end; }
.xc-bubble {
  max-width: 84%;
  padding: 12px 16px;
  border-radius: 18px;
  font-size: 22px; /* bubbles 22px */
  line-height: 1.4;
  white-space: pre-line;
  overflow-wrap: break-word;
}
.xc-xc .xc-bubble {
  background: var(--card);
  border: 2px solid var(--line);
  border-top-left-radius: 4px;
}
.xc-me .xc-bubble {
  background: var(--chip);
  color: #fff;
  border-top-right-radius: 4px;
}
.xc-time { font-size: 15px; margin-top: 4px; color: var(--ink-soft); }
.xc-me .xc-time { color: rgba(255, 255, 255, 0.9); }

/* 'Xiao Chen is thinking' with animated dots */
.xc-thinking .xc-think-text { margin-right: 4px; }
.xc-dot {
  display: inline-block;
  margin: 0 2px;
  font-size: 26px;
  font-weight: 700;
  animation: xc-blink 1.2s infinite;
}
.xc-dot:nth-child(2) { animation-delay: 0.2s; }
.xc-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes xc-blink {
  0%, 60%, 100% { opacity: 0.25; }
  30% { opacity: 1; }
}

/* the 'slow today' line */
.xc-slow { border-style: dashed; color: var(--ink-soft); }

/* Composer: big textarea + Send, the tip under it, then the chips */
.xc-composer {
  padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--card);
  border-top: 2px solid var(--line);
}
.xc-err {
  display: none;
  margin: 0 0 8px;
  padding: 8px 12px;
  border: 2px solid var(--c-bad);
  border-radius: 10px;
  color: var(--c-bad);
  font-size: 18px;
}
.xc-inputrow { display: flex; gap: 10px; align-items: stretch; }
.xc-input {
  flex: 1;
  min-height: 64px;
  max-height: 150px;
  padding: 14px;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 22px; /* >= 16px: no page zoom on focus */
  line-height: 1.4;
  resize: none;
}
.xc-send {
  min-width: 96px;
  min-height: 64px;
  border: none;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
}
.xc-send:disabled { opacity: 0.5; }
.xc-send:active { background: var(--accent-dark); }
.xc-tip { margin-top: 8px; font-size: 17px; color: var(--ink-soft); }
.xc-chips { margin-top: 10px; }
.xc-chip {
  display: block;
  width: 100%;
  min-height: 56px;
  margin: 8px 0 0;
  padding: 8px 14px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  color: var(--ink);
  font-size: 20px;
  text-align: left;
}
.xc-chip:active { background: var(--line); }