/* The voice diary sheet (js/voiceDiary.js), opened from the Today plant's top leaf.
   A native <dialog>: a compact bottom sheet on phones, a centred card on wider screens. Every
   colour is a theme token, so it follows the living period (css/living.css): peach in the morning,
   mint by day, apricot at sunset, warm cream on navy at night. A theme change while it is open
   only repaints colours — the recording and the drafts live in the script, not in the markup. */
dialog.voice-sheet {
  box-sizing: border-box; width: 100%; max-width: 560px; max-height: 92vh; max-height: min(92vh, 92dvh); margin: 0 auto; padding: 0; border: 0; inset: auto 0 0 0;
  border-radius: 24px 24px 0 0; background: var(--surface); color: var(--text-primary); box-shadow: var(--shadow-3); overflow: hidden; overscroll-behavior: contain;
}
dialog.voice-sheet:modal { max-width: 560px; max-height: 92vh; max-height: min(92vh, 92dvh); } /* vh first: older WebViews drop dvh */
dialog.voice-sheet[open] { display: flex; flex-direction: column; animation: vs-up 220ms ease; }
dialog.voice-sheet::backdrop { background: rgba(30, 26, 20, 0.40); }
html[data-period="night"] dialog.voice-sheet::backdrop { background: rgba(8, 12, 30, 0.55); }
@keyframes vs-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 700px) {
  dialog.voice-sheet, dialog.voice-sheet:modal { inset: 0; margin: auto; max-height: min(88vh, 860px); border-radius: 24px; }
}
@media (prefers-reduced-motion: reduce) { dialog.voice-sheet[open] { animation: none; } }
html[data-motion="reduced"] dialog.voice-sheet[open], html[data-motion="off"] dialog.voice-sheet[open] { animation: none; }

.vs-head { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 10px 8px 10px 16px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--hero-top) 70%, var(--surface)), var(--surface)); border-bottom: 1px solid var(--line-soft); }
html[data-period="night"] .vs-head { background: linear-gradient(160deg, var(--accent-light), var(--surface)); }
.vs-head h2 { flex: 1 1 auto; margin: 0; font-size: 17px; }
.vs-leaf { font-size: 20px; line-height: 1; }
button.vs-close { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; background: transparent; color: var(--text-secondary); font-size: 26px; line-height: 1; box-shadow: none; }
button.vs-close:hover { background: var(--surface-soft); color: var(--text-primary); }
.vs-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 10px; }
.vs-live { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vs-lead { margin: 0; font-size: 15.5px; font-weight: 700; line-height: 1.4; }
.vs-example { margin: 0; font-size: 13.5px; color: var(--text-secondary); line-height: 1.45; font-style: italic; }
.vs-privacy, .vs-small { margin: 0; font-size: 12.5px; color: var(--text-secondary); line-height: 1.45; }
.vs-warn { margin: 0; padding: 9px 12px; border-radius: 12px; background: var(--peach-light); color: var(--peach-strong); font-size: 14px; font-weight: 700; line-height: 1.4; }
.vs-center { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 0; }
.vs-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.vs-actions button { min-height: 44px; flex: 1 1 auto; font-size: 15px; }
.vs-actions button.secondary { flex: 0 1 auto; }
button.vs-primary { background: var(--accent-strong); color: var(--text-on-accent); }
button.vs-primary:hover { background: color-mix(in srgb, var(--accent-strong) 88%, #000); }
button.vs-primary:disabled { opacity: 0.55; }
.vs-body button:focus-visible, .vs-body input:focus-visible, .vs-body select:focus-visible, .vs-body textarea:focus-visible { outline: 3px solid var(--accent-strong); outline-offset: 2px; }

/* The record button: one big round target in the accent of the period. */
button.vs-rec { width: 116px; height: 116px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--accent) 92%, #fff), var(--accent-strong)); color: var(--text-on-accent); /* white label ≥ 4.5:1 everywhere on it */
  font-size: 15px; font-weight: 800; box-shadow: 0 0 0 8px var(--accent-light), 0 10px 24px color-mix(in srgb, var(--accent-strong) 30%, transparent); }
button.vs-rec:hover { background: radial-gradient(circle at 50% 38%, var(--accent), var(--accent-strong)); }
.vs-rec-dot { width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 6px #F0575A; }

/* Recording */
.vs-recording { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 12px; padding: 12px; border-radius: 16px; background: var(--surface-soft); }
.vs-mic-on { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: #B3261E; }
html[data-period="night"] .vs-mic-on { color: #A1231B; }
.vs-mic-dot { width: 12px; height: 12px; border-radius: 50%; background: #E5484D; box-shadow: 0 0 0 4px rgba(229, 72, 77, 0.2); animation: vs-pulse 1.2s ease-in-out infinite; }
@keyframes vs-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.vs-timer { justify-self: end; font-variant-numeric: tabular-nums; font-weight: 800; font-size: 18px; }
.vs-level { grid-column: 1 / -1; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); overflow: hidden; }
.vs-level > i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0.06); background: var(--accent); border-radius: inherit; transition: transform 80ms linear; }
@media (prefers-reduced-motion: reduce) { .vs-mic-dot { animation: none; } }
html[data-motion="reduced"] .vs-mic-dot, html[data-motion="off"] .vs-mic-dot { animation: none; }

.vs-replay { display: flex; flex-direction: column; gap: 4px; }
.vs-audio { width: 100%; height: 40px; }
.vs-label { font-size: 13px; font-weight: 700; color: var(--text-secondary); }
.vs-textarea { width: 100%; box-sizing: border-box; min-height: 64px; padding: 9px 11px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-primary); font: inherit; font-size: 15px; line-height: 1.45; resize: vertical; }
.vs-row-end { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 6px; }
.vs-count { margin-right: auto; font-variant-numeric: tabular-nums; }
.vs-count.is-over { color: var(--peach-strong); font-weight: 700; }
.vs-transcript { display: flex; flex-direction: column; gap: 4px; }
.vs-unclear { padding: 6px 10px; border-radius: 10px; background: var(--surface-soft); }
.vs-h3 { margin: 4px 0 0; font-size: 15px; color: var(--text-primary); }
.vs-busy { padding: 18px 0 8px; }
.vs-spinner { width: 34px; height: 34px; border-radius: 50%; border: 4px solid var(--accent-light); border-top-color: var(--accent); animation: vs-spin 900ms linear infinite; }
@keyframes vs-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vs-spinner { animation-duration: 3s; } }
.vs-done { font-size: 17px; }
.vs-saved-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.vs-saved-list li { padding: 8px 12px; border-radius: 12px; background: var(--accent-light); color: var(--accent-strong); font-weight: 700; font-size: 14px; }

/* Draft cards: one compact card per item, all on one screen. */
.vs-items { display: flex; flex-direction: column; gap: 10px; }
.vd-card { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; border-radius: 16px; background: var(--surface-soft); box-shadow: 0 0 0 1px var(--line-soft); }
.vd-card[data-state="saved"] { background: color-mix(in srgb, var(--accent-light) 70%, var(--surface)); }
.vd-card[data-state="failed"] { box-shadow: 0 0 0 2px var(--peach); }
.vd-head { display: flex; align-items: center; gap: 6px; }
.vd-ico { font-size: 18px; width: 26px; text-align: center; flex: 0 0 auto; }
.vd-head select { flex: 1 1 auto; min-width: 0; font-weight: 800; }
.vd-head .vd-date { flex: 0 0 auto; width: 142px; }
button.vd-remove { width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 50%; background: transparent; color: var(--text-secondary); font-size: 22px; box-shadow: none; flex: 0 0 auto; }
button.vd-remove:hover { background: var(--surface-muted); color: var(--text-primary); }
.vd-card input, .vd-card select { min-height: 40px; padding: 6px 9px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-primary); font: inherit; font-size: 15px; box-sizing: border-box; }
.vd-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vd-field input, .vd-field select, .vd-field textarea { width: 100%; }
.vd-label { font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.vd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vd-grid-3 { grid-template-columns: 1.1fr 1fr 1fr; }
.vd-info { margin: 0; font-size: 13px; color: var(--text-secondary); line-height: 1.4; }
.vd-info.is-bad { color: var(--peach-strong); font-weight: 700; }
.vd-question { display: flex; flex-direction: column; gap: 5px; }
.vd-q { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.vd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
button.vd-chip { min-height: 36px; padding: 5px 12px; border-radius: 999px; background: var(--surface); color: var(--accent-strong); font-size: 13.5px; font-weight: 700; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
button.vd-chip:hover, button.vd-chip[aria-pressed="true"] { background: var(--accent-light); color: var(--accent-strong); }
.vd-flags, .vd-problems { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.vd-flag { font-size: 12.5px; font-weight: 700; padding: 4px 9px; border-radius: 8px; width: fit-content; max-width: 100%; }
.vd-flag.is-ask, .vd-flag.is-estimate { background: var(--yellow-light); color: var(--yellow-ink); }
.vd-flag.is-invalid { background: var(--peach-light); color: var(--peach-strong); }
.vd-problems li { font-size: 13px; font-weight: 700; color: var(--peach-strong); }
.vd-problems li::before { content: "⚠ "; }
.vd-status { margin: 0; font-size: 13px; font-weight: 800; }
.vd-status.is-saved { color: var(--accent-strong); }
.vd-status.is-failed { color: var(--peach-strong); }
.vd-card :disabled { opacity: 0.75; }
/* Money (round 8): the opt-in line in Ready, the opt-in card in Review, and the "Chi tiêu" card. The ₫ cue
   uses the Diary's peach (never the kcal colours), so a payment reads apart from food at a glance. */
label.vs-money { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; font-weight: 700; color: var(--text-primary); cursor: pointer; }
input.vs-switch { width: 22px; height: 22px; margin: 0; flex: 0 0 auto; accent-color: var(--accent-strong); }
.vs-money-note { margin-top: -6px; }
.vs-money-card { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 14px; background: var(--peach-light); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--peach-strong) 22%, transparent); }
.vs-money-text { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--text-primary); }
.vs-money-card .vd-chips button { min-height: 40px; }
/* The money gate (typed words with amounts, switch off: nothing sent yet) and the line after a send without them. */
.vs-gate .vs-lead { font-size: 15px; }
.vs-gate-preview { overflow-wrap: anywhere; }
.vs-redacted { padding: 6px 10px; border-radius: 10px; background: var(--surface-soft); }
/* "= 999.000 ₫ · số không đơn vị là nghìn đồng  Đổi": an amount read by the user's own bare-number rule. */
.vd-assumed { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.vd-card[data-type="expense"] .vd-ico { color: var(--peach-strong); font-weight: 800; }
.vd-grid-money { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: end; }
.vd-money { display: flex; align-items: center; gap: 6px; min-width: 0; }
.vd-money input { flex: 1 1 auto; min-width: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.vd-unit { flex: 0 0 auto; font-weight: 800; color: var(--peach-strong); }
.vd-groups button.vd-chip { min-height: 40px; }
.vd-link { margin: 0; font-size: 13px; color: var(--text-secondary); line-height: 1.4; }
button.vd-link-btn { min-height: 32px; padding: 2px 4px; font-size: 13px; font-weight: 700; background: transparent; box-shadow: none; color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; }
button.vd-add-food { font-size: 13px; }
/* Phones: the sleep kind gets its own row above the two times (a time with "PM" no longer clips at
   390–430 px), and on the narrowest phones the date gets its own full row under the type, with the
   remove button kept beside the type (a lone "×" row and a cut date are gone). */
@media (max-width: 440px) {
  .vd-grid-3 { grid-template-columns: 1fr 1fr; }
  .vd-grid-3 > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 380px) {
  .vd-head { flex-wrap: wrap; }
  .vd-head select { min-width: 8em; }
  .vd-head .vd-date { order: 3; flex: 1 1 100%; width: auto; }
  .vd-grid-money { grid-template-columns: 1fr; } /* the amount, what was bought, the group and the category each get a full row */
}

/* The first-use hint beside the leaves (once). */
.vs-leaf-hint {
  position: absolute; z-index: 5; top: -2px; left: calc(100% - 6px); width: max-content; max-width: 170px;
  padding: 6px 10px; border-radius: 12px; background: var(--surface); color: var(--text-primary); font-size: 12.5px; font-weight: 700; line-height: 1.3;
  box-shadow: 0 0 0 1px var(--line), var(--shadow-2); pointer-events: none; animation: vs-hint 380ms ease-out both;
}
.vs-leaf-hint::before { content: ""; position: absolute; right: 100%; top: 12px; border: 6px solid transparent; border-right-color: var(--surface); }
@keyframes vs-hint { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vs-leaf-hint { animation: none; } }
html[data-motion="reduced"] .vs-leaf-hint, html[data-motion="off"] .vs-leaf-hint { animation: none; }