/* 跟著 logo 走：海軍藍粗線配天藍填色。天空色封面、淡藍頁面、白紙內頁一層疊一層，陰影帶海軍藍。
   粗線和厚底只給主要動作，按下去會沉，像插頭插進插座。 */

:root {
  color-scheme: light;

  --cover: #c9daff;
  --bg: #eef3fd;
  --surface: #fff;
  --bubble: #dfe9ff;
  --ink: #021e44;
  --ink-soft: #4b5f80;
  --line: #dbe4f5;
  --hover: #e9f0fe;

  --brand: #5b8efc;
  --brand-deep: #4a7eef;
  --accent: #2458d3;
  --accent-soft: #dfe9ff;
  --danger: #c0352b;

  --stroke: 2.5px solid var(--ink);
  --press: 0 3px 0 var(--ink);
  --press-down: 0 1px 0 var(--ink);
  --lift-1: 0 1px 2px rgb(2 30 68 / 5%), 0 6px 16px rgb(2 30 68 / 6%);
  --lift-2: 0 2px 4px rgb(2 30 68 / 8%), 0 12px 28px rgb(2 30 68 / 14%);
  --lift-page: 0 -6px 20px rgb(2 30 68 / 12%);

  --nav-height: 62px;

  --font: "PingFang TC", "Noto Sans TC", "Noto Sans CJK TC", "Microsoft JhengHei", system-ui, sans-serif;
}

/* 紀錄類型的顏色 */
[data-kind="calendar"] { --dye: #2b6ca3; }
[data-kind="expense"] { --dye: #b4690e; }
[data-kind="diary"] { --dye: #7a56a8; }
[data-kind="reflection"] { --dye: #18807a; }
[data-kind="person"] { --dye: #a8502e; }
[data-kind="cancel"] { --dye: #b3362b; }
[data-kind="card"] { --dye: #4c7f3e; }
[data-kind="box"] { --dye: #8a6a1f; }

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  background: var(--bg);
}

p, h1, h2, h3, h4 { margin: 0; font-weight: 700; }

p { font-weight: 400; }

button, input, select, textarea { font: inherit; color: inherit; }

button { cursor: pointer; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

[hidden] { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.dot {
  display: inline-block;
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dye, #8a98a0);
}

/* ---- 版面 ---- */

.layout {
  position: relative;
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 560px);
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--cover);
}

/* 行事曆要寬度，對話收窄 */
@media (min-width: 901px) {
  body[data-view="calendar"] .layout { grid-template-columns: minmax(320px, 26%) minmax(0, 1fr); }

  body[data-view="calendar"] .memory { display: flex; flex-direction: column; }

  body[data-view="calendar"] .calendar { flex: 1; }

  /* 窄欄放不下 logo 加日期 */
  body[data-view="calendar"] .today { display: none; }

  body[data-view="calendar"] .greeting h1 { font-size: 26px; }
}

/* 天空色封面，內頁蓋在它上面。logo 的海軍藍線條在這個底色上最清楚 */
.brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px clamp(20px, 4vw, 48px) 32px;
  color: var(--ink);
  background: var(--cover);
}

.lockup { display: flex; align-items: center; gap: 10px; min-width: 0; }

.logo { display: block; flex: none; width: auto; height: 42px; }

.wordmark { font-size: 22px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; }

.brand-side { display: flex; align-items: center; gap: 12px; min-width: 0; }

.today { font-size: 13px; color: var(--ink-soft); white-space: nowrap; }

.new-chat, .small-button {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: var(--surface);
  font-size: 13px;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgb(2 30 68 / 6%);
}

.small-button:hover { background: var(--hover); }

.new-chat { border: 1.5px solid var(--ink); font-weight: 600; box-shadow: none; }

.new-chat:hover { background: var(--hover); }

.gear { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: var(--ink); }

.gear:hover { background: var(--hover); }

.gear svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.talk {
  position: relative;
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  margin-top: -18px;
  border-radius: 24px 24px 0 0;
  background: var(--bg);
  box-shadow: var(--lift-page);
}

.transcript {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px clamp(20px, 4vw, 48px) 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.sheet {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg);
  box-shadow: -6px 0 24px rgb(2 30 68 / 12%);
}

/* ---- 對話 ---- */

.greeting { max-width: 664px; margin: 10vh auto 0; }

.greeting-logo { display: block; width: 148px; height: auto; margin-bottom: 26px; }

.greeting h1 { margin-bottom: 10px; font-size: 32px; font-weight: 800; line-height: 1.3; letter-spacing: .01em; }

.greeting p { max-width: 28em; color: var(--ink-soft); }

.turn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 664px;
  margin: 0 auto 28px;
}

.said {
  align-self: flex-end;
  max-width: 85%;
  padding: 9px 15px;
  border-radius: 18px 18px 5px 18px;
  color: #fff;
  background: var(--ink);
  overflow-wrap: anywhere;
  box-shadow: var(--lift-1);
}

.answer { margin-top: 12px; }

.answer.failed { color: var(--danger); }

.thinking { display: flex; gap: 6px; margin-top: 18px; padding: 0 2px; }

.thinking span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
  opacity: 0.3;
  animation: thinking 1.2s ease-in-out infinite;
}

.thinking span:nth-child(2) { animation-delay: 0.15s; }

.thinking span:nth-child(3) { animation-delay: 0.3s; }

@keyframes thinking { 30% { opacity: 1; transform: translateY(-5px); } 60% { opacity: 0.3; transform: none; } }

.actions { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--ink-soft); }

.actions li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }

.evidence { align-self: stretch; margin: 10px 0 0; padding: 0; list-style: none; }

.evidence li { overflow: hidden; border-radius: 14px; background: var(--surface); box-shadow: var(--lift-1); }

.evidence li + li { margin-top: 8px; }

.evidence-tap { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 10px; width: 100%; padding: 10px 14px; border: 0; background: none; text-align: left; }

.evidence-tap:hover, .evidence-tap:active { background: var(--hover); }

.evidence-when { grid-column: 1; font-size: 12px; color: var(--ink-soft); }

.evidence q { grid-column: 1; font-size: 15px; overflow-wrap: anywhere; quotes: "「" "」"; }

.evidence .chevron { grid-column: 2; grid-row: 1 / span 2; }

/* ---- 說話區 ---- */

.composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 8px clamp(20px, 4vw, 48px) 14px;
}

.typed {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 54px;
  padding: 0 8px 0 20px;
  border: var(--stroke);
  border-radius: 27px;
  background: var(--surface);
  box-shadow: var(--press);
  transition: box-shadow .12s;
}

.typed:focus-within { box-shadow: var(--press), 0 0 0 3px var(--brand); }

.typed input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: none; }

.typed input::placeholder { color: var(--ink-soft); }

.typed button { flex: none; height: 38px; padding: 0 15px; border: 0; border-radius: 19px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; }

/* 沒打字時不顯示送出 */
.typed input:placeholder-shown + button { display: none; }

.mic {
  position: relative;
  width: 54px;
  height: 54px;
  border: var(--stroke);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--brand);
  box-shadow: var(--press);
  transition: background-color .12s, transform .08s, box-shadow .08s;
}

.mic:hover { background: var(--brand-deep); }

.mic:active { transform: translateY(2px); box-shadow: var(--press-down); }

.mic svg { position: relative; width: 24px; height: 24px; fill: currentColor; }

.mic-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--danger);
  opacity: 0;
  transform: scale(var(--level, 1));
  transition: transform 80ms linear, opacity .2s;
}

.mic[aria-pressed="true"], .mic[aria-pressed="true"]:hover { color: #fff; background: var(--danger); }

.mic[aria-pressed="true"] .mic-ring { opacity: .2; }

.composer-foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 24px; padding: 4px 4px 0; }

.status { min-width: 0; font-size: 13px; color: var(--ink-soft); }

.status.error { color: var(--danger); }

.speak-toggle { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 13px; color: var(--ink-soft); white-space: nowrap; cursor: pointer; }

.speak-toggle input, .check input { width: 14px; height: 14px; margin: 0; accent-color: var(--accent); }

.account-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }

.account-line a { color: var(--accent); }



/* ---- 右側 ---- */

.tabs { display: flex; gap: 22px; padding: 14px 28px 0; overflow-x: auto; background: var(--surface); box-shadow: var(--lift-1); scrollbar-width: none; }

.tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0 11px;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font-size: 15px;
  white-space: nowrap;
}

.tab svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.tab:hover { color: var(--ink); }

.tab[aria-current="true"] { color: var(--ink); font-weight: 700; box-shadow: inset 0 -3px 0 var(--brand); }

.only-narrow { display: none; }

/* 輔助列只在窄螢幕用，寬螢幕對話本來就在旁邊 */
.assist, .assist-open { display: none; }

.memory {
  container-type: inline-size;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 28px 96px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.memory h2 { font-size: 23px; font-weight: 800; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 34px; }

.lead { margin-top: 4px; font-size: 14px; color: var(--ink-soft); overflow-wrap: anywhere; }

.hint { margin-top: 14px; color: var(--ink-soft); }

.check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-soft); cursor: pointer; white-space: nowrap; }

.day { display: flex; align-items: baseline; gap: 8px; margin-top: 22px; padding: 0 2px; }

.day-name { font-size: 15px; font-weight: 700; }

.day-date { font-size: 13px; color: var(--ink-soft); }

/* 一天或一組內容是一張紙，紙上的列用細線分開 */
.entries { margin: 8px 0 0; padding: 0; overflow: hidden; border-radius: 16px; list-style: none; background: var(--surface); box-shadow: var(--lift-1); }

.entries.flat { overflow: visible; border-radius: 0; background: none; box-shadow: none; }

.entry { display: flex; align-items: center; min-width: 0; border-bottom: 1px solid var(--line); }

.entry.match { background: var(--accent-soft); box-shadow: inset 4px 0 0 var(--brand); }

.entry:last-child { border-bottom: 0; }

.entry.plain { justify-content: space-between; gap: 12px; padding: 11px 16px; }

.entries.flat .entry.plain { padding: 11px 0; }

.entry-tap {
  flex: 1;
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 12px;
  min-width: 0;
  min-height: 58px;
  padding: 10px 16px;
  border: 0;
  background: none;
  text-align: left;
}

.entry-tap.plain { grid-template-columns: minmax(0, 1fr) auto; }

button.entry-tap:hover, button.entry-tap:active { background: var(--hover); }

.entries.flat .entry-tap { padding-left: 0; padding-right: 0; }

.entry.with-action { padding-right: 12px; }

.entry.fresh { animation: fresh 2s ease-out; }

@keyframes fresh { from { background: var(--accent-soft); } }

.entry-main { display: block; min-width: 0; }

.entry-title { display: block; overflow-wrap: anywhere; }

.entry-title.empty { color: var(--ink-soft); }

.entry-meta { display: block; font-size: 13px; color: var(--ink-soft); overflow-wrap: anywhere; }

.entry-side { font-size: 14px; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }

.chevron { font-size: 20px; line-height: 1; color: var(--ink-soft); }

/* 兩欄的短欄位：細線用底色透出來 */
.entries.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); }

.entries.tiles .entry { border: 0; background: var(--surface); }

.entries.tiles .entry-tap { align-self: stretch; min-height: 62px; padding: 8px 8px 8px 14px; }

.entries.tiles .chevron { display: none; }

.entry.inactive .entry-title { color: var(--ink-soft); text-decoration: line-through; }

.entry.inactive .dot { opacity: .4; }

/* 主要動作跟 logo 一樣是粗線加天藍，抬得比紙高 */
.add-record {
  position: absolute;
  right: 28px;
  bottom: 24px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 52px;
  padding: 0 22px 0 16px;
  border: var(--stroke);
  border-radius: 26px;
  color: var(--ink);
  background: var(--brand);
  font-weight: 700;
  box-shadow: var(--press), var(--lift-2);
  transition: background-color .12s, transform .08s, box-shadow .08s;
}

.add-record:hover { background: var(--brand-deep); }

.add-record:active { transform: translateY(2px); box-shadow: var(--press-down); }

.add-record svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 5;
  max-width: min(420px, calc(100vw - 32px));
  padding: 10px 18px;
  border-radius: 12px;
  color: #fff;
  background: var(--ink);
  font-size: 14px;
  box-shadow: var(--lift-2);
  transform: translateX(-50%);
  animation: rise .18s ease-out;
}

.toast.error { background: var(--danger); }

@keyframes rise { from { opacity: 0; transform: translate(-50%, 8px); } }

/* ---- 面板 ---- */

.panel {
  width: min(480px, calc(100vw - 32px));
  max-height: min(84dvh, 720px);
  padding: 0;
  border: 0;
  border-radius: 24px;
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 16px 48px rgb(2 30 68 / 34%);
}

.panel[open] { display: flex; flex-direction: column; animation: panel-in .2s ease-out; }

.panel::backdrop { background: rgb(2 30 68 / 45%); }

@keyframes panel-in { from { opacity: 0; transform: translateY(16px); } }

.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 10px 20px; }

.panel-head h3 { min-width: 0; font-size: 20px; font-weight: 800; overflow-wrap: anywhere; }

.panel-close { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--hover); color: var(--ink-soft); font-size: 20px; line-height: 1; }

.panel-body { min-height: 0; overflow-y: auto; padding: 4px 20px calc(20px + env(safe-area-inset-bottom)); }

.panel-lead { font-size: 18px; overflow-wrap: anywhere; }

.panel-section { margin-top: 20px; font-size: 14px; color: var(--ink-soft); }

.panel-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

.panel-actions > button { flex: 1 1 140px; }

.facts { display: grid; grid-template-columns: 4em minmax(0, 1fr); gap: 4px 12px; margin: 12px 0 0; font-size: 14px; }

.facts dt { color: var(--ink-soft); }

.facts dd { margin: 0; overflow-wrap: anywhere; }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }

.stat { padding: 10px 12px; border-radius: 14px; background: var(--hover); }

.stat-label, .stat-note { font-size: 12px; color: var(--ink-soft); }

.stat-value { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }

.small-table { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }

.small-table th, .small-table td { padding: 6px 4px; border-bottom: 1px solid var(--line); text-align: right; }

.small-table thead th { font-size: 12px; font-weight: 500; color: var(--ink-soft); }

.small-table th:first-child { text-align: left; font-weight: 500; }

.small-table tr:last-child > * { border-bottom: 0; }

.settings-more { margin-top: 10px; font-size: 14px; }

.settings-more summary { color: var(--ink-soft); cursor: pointer; }

.voice-settings { display: grid; gap: 12px; margin-top: 10px; }

.voice-settings .small-button { justify-self: start; min-height: 38px; }

.form { display: grid; gap: 14px; margin-top: 14px; }

.field { display: grid; gap: 4px; min-width: 0; }

.field-label { font-size: 13px; color: var(--ink-soft); }

.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }

.field input, .field select, .field textarea, .search {
  width: 100%;
  min-height: 46px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
}

.field textarea { display: block; resize: none; line-height: 1.5; }

.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible, .search:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; border-radius: 12px; background: var(--surface); }

.field input[readonly] { color: var(--ink-soft); }

.field input::placeholder, .field textarea::placeholder, .search::placeholder { color: #6b7c9c; }

.form-error { font-size: 14px; color: var(--danger); }

.primary-button, .danger-button {
  min-height: 46px;
  padding: 0 18px;
  border: 0;
  border-radius: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.primary-button {
  border: var(--stroke);
  color: var(--ink);
  background: var(--brand);
  box-shadow: var(--press);
  transition: background-color .12s, transform .08s, box-shadow .08s;
}

.primary-button:hover { background: var(--brand-deep); }

.primary-button:active:not(:disabled) { transform: translateY(2px); box-shadow: var(--press-down); }

.primary-button:disabled { opacity: .55; cursor: default; }

.danger-button { background: none; color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }

.danger-button[data-armed] { color: #fff; background: var(--danger); }

.choices { display: flex; flex-wrap: wrap; gap: 8px; }

.choice { position: relative; cursor: pointer; }

.choice input { position: absolute; opacity: 0; pointer-events: none; }

.choice span { display: block; padding: 7px 14px; border-radius: 999px; background: var(--hover); font-size: 14px; }

.choice input:checked + span { color: #fff; background: var(--accent); box-shadow: var(--lift-1); }

.choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.toggles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

.toggle { min-height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: none; font-size: 14px; }

.toggle[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); font-weight: 600; }

.tags { display: flex; flex-wrap: wrap; gap: 8px; }

.tag { display: inline-flex; align-items: center; gap: 2px; padding-left: 12px; border-radius: 999px; background: var(--accent-soft); font-size: 14px; }

.tag button { width: 34px; height: 34px; border: 0; background: none; color: var(--ink-soft); font-size: 17px; line-height: 1; }

.option { display: grid; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line); }

.option:last-child { border-bottom: 0; }

.option p { font-size: 14px; color: var(--ink-soft); }

.option strong { font-size: 16px; color: var(--ink); }

.option .small-button { min-height: 44px; }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }

.toolbar .primary-button { min-height: 38px; font-size: 14px; }

.toolbar .small-button { min-height: 38px; }

.heading-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.subheading { margin-top: 22px; font-size: 14px; font-weight: 600; color: var(--ink-soft); }

.card-boxes { margin-top: 4px; font-size: 13px; }

.back-button { margin: 0 0 8px -6px; padding: 4px 6px; border: 0; background: none; color: var(--accent); font-size: 14px; }

.search { margin-top: 6px; }

/* ---- 記帳 ---- */

.summary { margin-top: 14px; padding: 18px 18px 14px; border-radius: 16px; background: var(--surface); box-shadow: var(--lift-1); }

.stepper { display: flex; align-items: center; gap: 2px; font-size: 14px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.stepper button { width: 34px; height: 34px; border: 0; border-radius: 8px; background: none; color: var(--ink); font-size: 18px; line-height: 1; }

.stepper button:hover { background: var(--hover); }

.total { font-size: 42px; font-weight: 800; line-height: 1.25; font-variant-numeric: tabular-nums; }

.total-unit { margin-right: 6px; font-family: var(--font); font-size: 16px; font-weight: 400; color: var(--ink-soft); }

.bars { margin-top: 14px; }

.bar { display: grid; grid-template-columns: 3.4em minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 4px 0; font-size: 14px; }

.bar-track { height: 7px; border-radius: 4px; background: var(--hover); }

.bar-fill { display: block; height: 100%; border-radius: 4px; background: var(--brand); }

.bar-value { font-variant-numeric: tabular-nums; }

/* ---- 行事曆 ---- */

.stepper .to-today { width: auto; margin-right: 6px; padding: 0 12px; border: 1px solid var(--line); background: var(--surface); font-size: 13px; white-space: nowrap; }

.calendar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 26%); gap: 24px; margin-top: 14px; }

.month { display: flex; flex-direction: column; min-width: 0; padding: 12px 8px 8px; border-radius: 16px; background: var(--surface); box-shadow: var(--lift-1); }

.weekdays, .cells { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }

.weekdays span { padding-bottom: 6px; text-align: center; font-size: 12px; color: var(--ink-soft); }

.cells { flex: 1; grid-auto-rows: minmax(0, 1fr); }

.cell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  min-width: 0;
  min-height: 104px;
  padding: 4px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
  text-align: left;
  transition: background-color .12s;
}

.cell:hover { background: var(--hover); }

.cell.outside .cell-date, .cell.outside .chips { opacity: .4; }

.cell.selected, .cell.selected:hover { background: var(--accent-soft); }

.cell-date {
  align-self: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 13px;
  line-height: 26px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.cell[aria-current="date"] .cell-date { background: var(--ink); color: #fff; font-weight: 700; }

.chips { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.chip {
  display: block;
  min-width: 0;
  padding: 0 4px;
  border-radius: 4px;
  overflow: hidden;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.chip-event { background: color-mix(in srgb, var(--dye) 14%, #fff); color: var(--dye); font-weight: 500; }

.chip-note { color: var(--ink-soft); }

.chip-note::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 4px;
  border-radius: 50%;
  background: var(--dye, #8a98a0);
  vertical-align: 1px;
}

.chip.fresh { animation: fresh 2s ease-out; }

.chip-more { padding: 0 4px; font-size: 11px; line-height: 16px; color: var(--ink-soft); }

.day-panel .day { margin-top: 0; }

@container (max-width: 680px) {
  .calendar { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .cell { min-height: 76px; }
}

/* 太窄放不下文字，每筆縮成一個色點 */
@container (max-width: 520px) {
  .cell { min-height: 58px; padding: 3px 2px; }
  .chips { flex-flow: row wrap; justify-content: center; gap: 3px; }
  .chip { width: 6px; height: 6px; padding: 0; border-radius: 50%; font-size: 0; background: var(--dye, #8a98a0); }
  .chip::before, .chip-more { display: none; }
}

/* ---- 全螢幕的一天：和主畫面同一套封面加內頁 ---- */

.day-full {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  color: var(--ink);
  background: var(--cover);
}

.day-full[open] { display: flex; flex-direction: column; animation: day-in .22s cubic-bezier(.2, .7, .2, 1); }

.day-full::backdrop { background: rgb(2 30 68 / 30%); }

@keyframes day-in { from { opacity: .4; transform: scale(.16); border-radius: 24px; } }

.day-full-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(14px + env(safe-area-inset-top)) max(20px, calc((100% - 680px) / 2)) 32px;
}

.day-full-title { flex: 1; min-width: 0; }

.day-full-title .day { flex-wrap: wrap; gap: 0 10px; margin: 0; padding: 0; }

.day-full-title .day-name { font-size: 26px; font-weight: 800; }

.day-full-title .day-date { font-size: 14px; color: var(--ink-soft); }

.day-full-head .panel-close { background: var(--surface); }

.day-full-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin-top: -18px;
  padding: 20px max(20px, calc((100% - 680px) / 2)) calc(96px + env(safe-area-inset-bottom));
  border-radius: 24px 24px 0 0;
  background: var(--bg);
  box-shadow: var(--lift-page);
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.day-full-body .entries { margin-top: 0; }

.day-full-body .hint { margin-top: 0; }

.day-full .add-record { position: absolute; right: max(20px, calc((100% - 680px) / 2)); bottom: calc(24px + env(safe-area-inset-bottom)); }

/* ---- 我的 ---- */

.section-title { margin-top: 30px; }

details { margin-top: 28px; font-size: 14px; color: var(--ink-soft); }

summary { min-height: 34px; cursor: pointer; }

summary:hover { color: var(--ink); }

/* ---- 離線檢視：只有 Android APP 連不上後端時會出現，只能看不能記 ---- */

/* body 也有 offline 這個 class，這裡只管封面上那一塊 */
.brand .offline { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); }

.brand .offline p { flex: 1 1 100%; }

body.offline .brand { flex-wrap: wrap; }

body.offline .brand-side, body.offline .talk, body.offline .only-narrow { display: none; }

body.offline .layout { grid-template-columns: minmax(0, 1fr); }

body.offline .sheet { grid-column: 1; }

/* ---- 窄螢幕：一次看一區，分頁放在底部 ---- */

@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); }

  .brand { padding: 10px 20px 28px; }

  .logo { height: 36px; }

  .wordmark { font-size: 20px; }

  .sheet { display: contents; }

  .only-narrow { display: inline-flex; }

  .tabs {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    justify-content: space-around;
    gap: 0;
    height: calc(var(--nav-height) + env(safe-area-inset-bottom));
    padding: 0 4px env(safe-area-inset-bottom);
    background: var(--surface);
    box-shadow: 0 -2px 14px rgb(2 30 68 / 12%);
  }

  .tab { flex: 1; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; padding: 0; font-size: 11.5px; }

  /* 目前的分頁：圖示墊一塊淡藍 */
  /* 七個分頁要塞進 360px 寬的手機 */
  .tab svg { width: 46px; height: 28px; padding: 3px 12px; border-radius: 14px; }

  .tab[aria-current="true"] { box-shadow: none; }

  .tab[aria-current="true"] svg { background: var(--accent-soft); }

  .memory {
    position: relative;
    grid-column: 1;
    grid-row: 2;
    margin-top: -18px;
    padding: 18px 16px calc(var(--nav-height) + 88px + env(safe-area-inset-bottom));
    border-radius: 24px 24px 0 0;
    background: var(--bg);
    box-shadow: var(--lift-page);
  }

  body[data-view="chat"] .memory { display: none; }

  body:not([data-view="chat"]) .talk { display: none; }

  .transcript { padding: 18px 20px 12px; }

  .composer { padding: 8px 16px calc(var(--nav-height) + 8px + env(safe-area-inset-bottom)); }

  .add-record { position: fixed; right: 16px; bottom: calc(var(--nav-height) + 16px + env(safe-area-inset-bottom)); }

  .toast { bottom: calc(var(--nav-height) + 16px + env(safe-area-inset-bottom)); }

  .panel {
    width: 100%;
    max-width: none;
    max-height: 88dvh;
    margin: auto 0 0;
    border-radius: 24px 24px 0 0;
  }

  .small-button { min-height: 38px; }

  /* ---- 輔助列：清單才是主角，這裡只佔一行，回答標在清單上 ---- */

  .assist-open {
    position: fixed;
    right: 16px;
    bottom: calc(var(--nav-height) + 19px + env(safe-area-inset-bottom));
    z-index: 2;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface);
    box-shadow: var(--lift-2);
  }

  .assist-open img { display: block; width: 32px; height: auto; }

  body[data-view="records"] .add-record { right: 74px; }

  body.assist-on .add-record { display: none; }

  .assist {
    position: fixed;
    right: 12px;
    bottom: calc(var(--nav-height) + 10px + env(safe-area-inset-bottom));
    left: 12px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* 清單捲到底下時淡出，字不會從回覆和輸入列的縫隙露出來 */
  .assist::before {
    content: "";
    position: absolute;
    inset: -16px -12px -10px;
    z-index: -1;
    background: linear-gradient(transparent, var(--bg) 20px);
    pointer-events: none;
  }

  .assist-reply { max-height: 34dvh; overflow-y: auto; padding: 10px 8px 4px 14px; border-radius: 16px; color: #fff; background: var(--ink); box-shadow: var(--lift-2); }

  .assist-text { padding-right: 6px; font-size: 15px; overflow-wrap: anywhere; }

  .assist-text.error { color: #ffc9c2; }

  .assist-text .thinking { align-items: center; height: 1.5em; margin-top: 0; }

  .assist-text .thinking span { background: var(--cover); }

  .assist-foot { display: flex; align-items: center; gap: 4px; min-height: 36px; font-size: 13px; }

  .assist-matches { display: flex; align-items: center; gap: 2px; margin-right: auto; font-variant-numeric: tabular-nums; }

  .assist-matches button { width: 34px; height: 34px; border: 0; border-radius: 8px; background: rgb(255 255 255 / 12%); color: #fff; font-size: 18px; line-height: 1; }

  .assist-matches span { margin-right: 6px; }

  .assist-link { margin-left: auto; padding: 6px 4px; border: 0; background: none; color: inherit; font-size: 13px; text-decoration: underline; }

  .assist-matches + .assist-link { margin-left: 0; }

  .assist-matches[hidden] + .assist-link { margin-left: auto; }

  .assist-x { flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: inherit; font-size: 18px; line-height: 1; }

  .assist-bar { display: flex; align-items: center; gap: 2px; height: 48px; padding: 0 6px 0 10px; border: 1px solid var(--line); border-radius: 24px; color: var(--ink-soft); background: var(--surface); box-shadow: var(--lift-2); }

  .assist-bar:focus-within { box-shadow: 0 0 0 2px var(--brand), var(--lift-2); }

  .assist-mark { flex: none; width: 30px; height: auto; margin-right: 6px; }

  .assist-bar input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: none; color: var(--ink); }

  .assist-bar input::placeholder { color: var(--ink-soft); }

  .assist-mic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: var(--ink); }

  .assist-mic svg { width: 21px; height: 21px; fill: currentColor; }

  .assist-mic[aria-pressed="true"] { color: #fff; background: var(--danger); }

  /* 底部多留一點，最後幾筆不會被回覆蓋住 */
  body.assist-on .memory { padding-bottom: calc(var(--nav-height) + 200px + env(safe-area-inset-bottom)); }
}

/* 窄手機放不下 logo 加日期 */
@media (max-width: 400px) {
  .today { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .entry.fresh, .chip.fresh, .panel[open], .day-full[open], .toast { animation: none; }
  .thinking span { opacity: 0.6; animation: none; }
  .mic, .mic-ring, .typed, .add-record, .primary-button { transition: none; }
  .mic:active, .add-record:active, .primary-button:active:not(:disabled) { transform: none; }
}