/* =========================================================
   Bàn soạn thư: thẻ lựa chọn bo tròn có viền màu ở mép trên,
   mỗi phần (section) mang một màu nhấn riêng
   ========================================================= */
.panel { --accent: #e8604c; }
.panel > .group, .panel > .field, .panel > .row2, .panel .extras-block, .panel > details, .panel > #eventFields, .panel > .write-note {
  position: relative; margin-bottom: 16px; padding: 16px 16px 18px; border-radius: 20px;
  background: rgba(255, 252, 246, .62); border: 1px solid rgba(47, 39, 35, .07);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset;
}
.panel > .row2 { padding: 0; background: none; border: 0; box-shadow: none; }
.panel > .row2 > .field, .panel > .row2 > .group { padding: 14px 14px 12px; margin: 0; border-radius: 18px; background: rgba(255, 252, 246, .62); border: 1px solid rgba(47, 39, 35, .07); }
/* Mỗi phần một màu nhấn (vòng 6 màu) */
.panel > :nth-child(6n+1) { --accent: #e8604c; }
.panel > :nth-child(6n+2) { --accent: #1f3d5a; }
.panel > :nth-child(6n+3) { --accent: #f0a030; }
.panel > :nth-child(6n+4) { --accent: #3fb6c8; }
.panel > :nth-child(6n+5) { --accent: #e2b93b; }
.panel > :nth-child(6n+6) { --accent: #2b6cb0; }
.panel > .group::before, .panel > .field::before, .panel .extras-block::before, .panel > details::before, .panel > #eventFields::before, .panel > .write-note::before {
  content: ''; position: absolute; left: 18px; right: 18px; top: -1px; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); opacity: .85;
}
.panel .label, .panel .field > span { align-items: center; }
.panel .group > .label::before, .panel .field > span::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 8px; flex: none; }
.panel .field > span { justify-content: flex-start; }
.panel .field > span small, .panel .label small { margin-left: 6px; }

/* ---------- Thẻ lựa chọn kiểu hình 2 ---------- */
.chip, .occasion-option, .theme-option, .gestures button, .sticker-opt, .stamp-opt {
  background: #fff; border: 0; border-top: 3px solid color-mix(in srgb, var(--accent) 55%, #fff);
  box-shadow: 0 6px 16px rgba(60, 40, 25, .1), 0 1px 2px rgba(60, 40, 25, .08);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.chip { border-radius: 14px; padding: 8px 13px; }
.chip:hover, .occasion-option:hover, .theme-option:hover, .gestures button:hover, .sticker-opt:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(60, 40, 25, .14); border-top-color: var(--accent); }
.chip.active { background: var(--ink); color: var(--paper); border-top-color: var(--accent); box-shadow: 0 8px 18px rgba(30, 20, 15, .25); }
.chips.soft .chip { background: #fff; border-style: solid; }
.chips.soft .chip.active { background: var(--ink); color: var(--paper); }
.occasion-option { border-radius: 20px; padding: 14px 12px; }
.occasion-option.active { border-top-color: var(--accent); box-shadow: 0 0 0 2px var(--ink), 0 10px 22px rgba(60, 40, 25, .15); background: #fffdf8; }
.occasion-option small { display: block; margin-left: auto; font: 500 10px var(--mono); color: var(--accent); white-space: nowrap; }
.occasion-head { grid-column: 1 / -1; margin: 6px 0 -2px; font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.occasion-head.holiday { margin-top: 12px; color: #c0392b; }
.occasion-head.holiday::after { content: ' · 🇻🇳'; }
.theme-option { border-radius: 20px; }
.theme-option.active { box-shadow: 0 0 0 2px var(--ink), 0 10px 22px rgba(60, 40, 25, .15); }
.swatch { box-shadow: 0 3px 8px rgba(60, 40, 25, .15); }
.swatch.picker { outline-color: var(--accent); }

/* Nét chữ: mỗi lựa chọn hiển thị đúng phông của nó */
.font-chips .chip { font-size: 15px; }

/* Ghi chú viết trên thư */
.write-note { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-soft); }
.write-note b { color: var(--ink); font-weight: 600; }
.write-note small { margin-left: auto; font: 500 11px var(--mono); }
@media (max-width: 900px) { .write-note span::after { content: ' (ở phía trên)'; } }

/* Bước 2: giãn khoảng giữa phần gõ tên và lời chào cuối thư */
.sig-type .chips { margin-bottom: 8px; }
.closing-group { margin-top: 26px !important; }

/* Bước 3: các kiểu gấp là nút bấm */
.gestures { gap: 10px; }
.gestures li { display: block; padding: 0; border: 0; background: none; }
.gestures button { width: 100%; display: grid; grid-template-columns: 54px 1fr; column-gap: 12px; align-items: center; text-align: left; padding: 12px 14px; border-radius: 18px; color: var(--ink); cursor: pointer; }
.gestures button svg { grid-row: span 2; width: 54px; height: 28px; fill: none; stroke: var(--wine); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.gestures button b { font-weight: 600; font-size: 14px; }
.gestures button span { font-size: 12.5px; color: var(--ink-soft); }
.gestures li.hit button, .gestures button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--wine), 0 10px 22px rgba(158, 59, 51, .18); background: #fff8f4; }

/* Bước 4: sticker */
.sticker-palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 8px; max-height: 220px; overflow-y: auto; padding: 4px 2px 8px; margin-top: 10px; }
.sticker-opt { aspect-ratio: 1; border-radius: 14px; display: grid; place-items: center; font: 26px/1 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; cursor: pointer; padding: 4px; }
.sticker-opt span, .sticker-opt span svg, .sticker-opt img { width: 34px; height: 34px; display: block; object-fit: contain; }
.stamp-opt { border-radius: 10px; }

/* Bước 1: ảnh và nhạc */
.layout-chip i { font-style: normal; }
.yt-box { width: 100%; height: clamp(200px, 24vw, 280px); border-radius: 12px; overflow: hidden; background: #111; margin: 6px 0 12px; }
#ytPlayerBox { width: 100%; height: 100%; }
.yt-box iframe { width: 100%; height: 100%; display: block; }
.music-editor .text-btn { display: block; margin: 6px 0 0; font-size: 12px; }
#musicTabs { margin: 12px 0 6px; }

/* Bước 5: xem trước màn chào trong khung điện thoại */
.welcome-frame { position: relative; width: min(360px, 86%); aspect-ratio: 9 / 16; max-height: 86%; border-radius: 28px; overflow: hidden; box-shadow: 0 0 0 10px #241d19, 0 26px 50px rgba(30, 20, 15, .35); }
.welcome-frame .welcome { font-size: 12px; padding: 16px; }
.welcome-frame .welcome-title { font-size: 30px; }
.welcome-frame .welcome-badge { width: 84px; height: 84px; margin-bottom: 14px; }
.welcome-frame .welcome-badge b { width: 64px; height: 64px; font-size: 30px; }
.welcome-frame .welcome-note { font-size: 14px; margin-bottom: 18px; }
.welcome-frame .welcome-open { padding: 12px 24px; font-size: 15px; animation: none; }

/* Tờ thư viết trực tiếp */
.sheet.editable .sheet-msg { outline: none; min-height: 7em; cursor: text; border-radius: 4px; transition: background .2s; -webkit-user-select: text; user-select: text; }
.sheet.editable .sheet-msg:hover { background: rgba(255, 238, 200, .25); }
.sheet.editable .sheet-msg:focus { background: rgba(255, 238, 200, .35); box-shadow: 0 0 0 2px rgba(158, 59, 51, .18); }
.sheet.editable .sheet-msg:empty::before { content: attr(data-placeholder); color: color-mix(in srgb, var(--ink-color) 40%, transparent); font-style: italic; }

/* Nhãn mỗi phần canh trái, số đếm (nếu có) dạt phải */
.panel .label { justify-content: flex-start; }
.panel .label small, .panel .field > span small { margin-left: auto; }
/* Khung xem trước: không chạy lại hiệu ứng mỗi lần gõ */
.welcome.preview *, .welcome.preview .ww { animation: none !important; }

#occasionSelect, #libraryCategory { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper, #fffaf0); color: var(--ink); font: inherit; }
#musicTabs { flex-wrap: wrap; }
.library-tracks { display: grid; gap: 10px; max-height: 330px; overflow-y: auto; padding: 2px; }
.library-track { padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.library-track.selected { border-color: var(--wine); background: #a8554410; }
.library-track b, .library-track small { display: block; }
.library-track small { margin-top: 4px; opacity: .7; font-size: 12px; }
.library-track .music-actions { margin-top: 10px; }
#libraryPreview { width: 100%; margin-top: 12px; }

/* ---------- Thanh tab: luôn một hàng, không tràn viền ---------- */
.panel .tabs { display: flex; width: 100%; max-width: 100%; flex-wrap: nowrap; gap: 2px; border-radius: 14px; }
.panel .tabs button { flex: 1 1 0; min-width: 0; padding: 8px 6px; border-radius: 11px; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#musicTabs { flex-wrap: nowrap; margin: 12px 0 10px; }
.music-editor > summary { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; list-style: none; }
.music-editor > summary::-webkit-details-marker { display: none; }
.music-editor > summary::before { content: '▸'; flex: none; transition: transform .2s; }
.music-editor[open] > summary::before { transform: rotate(90deg); }

/* Danh sách ảnh đã thêm: tối đa 20 ảnh nên cuộn trong khung */
.album-editor { max-height: 440px; overflow-y: auto; padding-right: 4px; }

/* =========================================================
   Nút chuyển bước có hình minh hoạ động
   ========================================================= */
.nav-row { flex-wrap: wrap; row-gap: 10px; }
.nav-row > div { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.btn.art-btn { --na-d: 3.4s; gap: 12px; padding: 6px 18px 6px 6px; min-height: 62px; border-radius: 18px; border: 0; text-align: left; justify-content: flex-start;
  box-shadow: 0 10px 22px rgba(30, 20, 15, .22); transition: transform .18s, box-shadow .18s, background .18s; }
.btn.art-btn:hover, .btn.art-btn:focus-visible { --na-d: 1.7s; transform: translateY(-2px); box-shadow: 0 14px 28px rgba(30, 20, 15, .28); }
.btn.art-btn:active { transform: translateY(0) scale(.98); }
.art-btn .art { width: 72px; height: 50px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 13px; background: #f6efe2; }
.art-btn .art svg { width: 72px; height: 48px; display: block; overflow: visible; }
.art-text { display: grid; gap: 1px; line-height: 1.25; }
.art-text b { font: 600 15px var(--ui); }
.art-text small { font-size: 11.5px; font-weight: 400; opacity: .75; }
.btn.seal-btn.art-btn .art { background: #7f2c26; }
.btn.art-btn:disabled { opacity: .6; }
@media (max-width: 480px) { .nav-row .art-btn { flex: 1 1 100%; } }

/* Ký tên: mực hiện theo ngòi bút */
.na-ink { stroke-dasharray: 100; animation: na-ink var(--na-d) ease-in-out infinite; }
.na-pen { animation: na-pen var(--na-d) ease-in-out infinite; }
@keyframes na-ink { 0% { stroke-dashoffset: 100; opacity: 1; } 70%, 90% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes na-pen {
  0% { transform: translate(12px, 30px); } 12% { transform: translate(20px, 21px); } 24% { transform: translate(24px, 29px); }
  36% { transform: translate(33px, 19px); } 48% { transform: translate(38px, 29px); } 60% { transform: translate(48px, 24px); }
  70% { transform: translate(60px, 25px); } 85% { transform: translate(63px, 18px) rotate(-10deg); } 100% { transform: translate(12px, 30px); } }

/* Gấp thư: nửa dưới gập lên, bàn tay miết theo */
.na-flap, .na-back, .na-hand, .na-letter, .na-letter2, .na-flag, .na-fly, .na-seal, .na-trail { transform-box: fill-box; }
[data-art="fold"] .na-flap { transform-origin: 50% 0; animation: na-fold-a var(--na-d) ease-in-out infinite; }
[data-art="fold"] .na-back { transform-origin: 50% 100%; animation: na-fold-b var(--na-d) ease-in-out infinite; }
[data-art="fold"] .na-hand { animation: na-hand var(--na-d) ease-in-out infinite; }
@keyframes na-fold-a { 0%, 12% { transform: scaleY(1); } 38%, 100% { transform: scaleY(0); } }
@keyframes na-fold-b { 0%, 38% { transform: scaleY(0); } 60%, 88% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
@keyframes na-hand { 0%, 12% { transform: translateY(0); } 60%, 82% { transform: translateY(-20px); } 100% { transform: translateY(0); } }

/* Cho vào phong bì: thư trượt xuống, nắp đóng */
[data-art="envelope"] .na-letter { animation: na-slide var(--na-d) ease-in-out infinite; }
[data-art="envelope"] .na-flap { transform-origin: 50% 0; animation: na-close var(--na-d) ease-in-out infinite; }
@keyframes na-slide { 0%, 10% { transform: translateY(0); } 45%, 90% { transform: translateY(15px); } 100% { transform: translateY(0); } }
@keyframes na-close { 0%, 50% { transform: scaleY(0); } 68%, 90% { transform: scaleY(1); } 100% { transform: scaleY(0); } }

/* Gửi đi: thư rơi vào cột thư, cờ bật lên */
[data-art="post"] .na-letter2 { animation: na-drop var(--na-d) ease-in infinite; }
[data-art="post"] .na-flag { transform-origin: 0% 100%; animation: na-flag var(--na-d) ease-in-out infinite; }
@keyframes na-drop { 0% { transform: translateY(-6px); opacity: 0; } 15% { transform: translateY(0); opacity: 1; } 45% { transform: translateY(17px); opacity: 1; } 52%, 100% { transform: translateY(17px); opacity: 0; } }
@keyframes na-flag { 0%, 48% { transform: rotate(90deg); } 62%, 90% { transform: rotate(0deg); } 100% { transform: rotate(90deg); } }

/* Niêm phong & gửi đi: ấn dấu sáp rồi phong bì bay đi */
[data-art="send"] .na-seal { transform-origin: 50% 50%; animation: na-seal var(--na-d) ease-out infinite; }
[data-art="send"] .na-fly { animation: na-fly var(--na-d) ease-in-out infinite; }
[data-art="send"] .na-trail { animation: na-trail var(--na-d) ease-in-out infinite; }
@keyframes na-seal { 0% { transform: scale(0); } 14% { transform: scale(1.35); } 22%, 100% { transform: scale(1); } }
@keyframes na-fly { 0%, 36% { transform: translate(0, 0) rotate(0); opacity: 1; } 70% { transform: translate(46px, -16px) rotate(-10deg); opacity: 0; } 71% { transform: translate(-40px, 0); opacity: 0; } 100% { transform: translate(0, 0); opacity: 1; } }
@keyframes na-trail { 0%, 40% { opacity: 0; transform: translateX(0); } 55% { opacity: 1; } 70%, 100% { opacity: 0; transform: translateX(18px); } }

/* =========================================================
   Rà soát UX 18/10/2026: dễ hiểu hơn, gần gũi hơn
   ========================================================= */
/* Mục thu gọn (giấy & nét chữ, gửi vào hộp thư): cùng kiểu mũi tên với mục nhạc */
.look-editor > summary, .mailbox-send > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font: 600 14px var(--ui); color: var(--ink); }
.look-editor > summary::-webkit-details-marker, .mailbox-send > summary::-webkit-details-marker { display: none; }
.look-editor > summary::before, .mailbox-send > summary::before { content: '▸'; flex: none; transition: transform .2s; color: var(--accent); }
.look-editor[open] > summary::before, .mailbox-send[open] > summary::before { transform: rotate(90deg); }
.look-editor > summary small, .mailbox-send > summary small { margin-left: auto; font-weight: 400; color: var(--ink-soft); font-size: 12.5px; text-align: right; }
.look-editor[open] > summary, .mailbox-send[open] > summary { margin-bottom: 14px; }
.look-editor .group { margin-bottom: 14px; }
.look-editor .group:last-child { margin-bottom: 0; }
.look-note { margin: 8px 0 0; }

/* Câu mở lời gợi ý: viết tay, xuống dòng thoải mái */
.starter-group .chips { gap: 8px; }
.starter-group .chip { white-space: normal; text-align: left; font: 16px/1.35 var(--hand); padding: 8px 12px; }

/* Bước 5: nhãn phụ trong khung "Khi người ấy mở thư" */
.label.sub { margin-top: 16px; font-size: 13px; color: var(--ink-soft); }
.label.sub::before { display: none !important; }
.label label { cursor: pointer; }
.welcome-editor .theme-grid { margin-top: 4px; }
.preview-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.preview-actions .btn { min-height: 44px; }
.mailbox-send .slug-row { margin-top: 4px; }

/* Thanh chuyển bước: nhãn "đang ở đâu" bên trái */
.nav-where { font-size: 13px; color: var(--ink-soft); }

/* Tờ giấy còn trống: con trỏ nhấp nháy mời viết */
.sheet.editable .sheet-msg:empty::after { content: ''; display: inline-block; width: 2px; height: 1.15em; margin-left: 3px; vertical-align: -3px; background: var(--wine); animation: caret 1.1s steps(1) infinite; }
.sheet.editable .sheet-msg:empty:focus::before { opacity: .55; }
@keyframes caret { 50% { opacity: 0; } }

/* Menu âm thanh & hiệu ứng có chữ */
.ambience { position: relative; }
.ambience-menu { position: absolute; right: 0; top: calc(100% + 8px); width: 248px; padding: 12px; border-radius: 16px; background: var(--paper); box-shadow: 0 18px 40px rgba(40, 25, 15, .22), 0 0 0 1px var(--line); z-index: 45; animation: rise .2s ease; }
.ambience-menu p { margin: 2px 4px 8px; font-size: 12.5px; color: var(--ink-soft); }
.switch { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 8px 6px; border: 0; background: none; border-radius: 10px; font-size: 14px; text-align: left; }
.switch:hover { background: rgba(47, 39, 35, .05); }
.switch i { position: relative; flex: none; width: 38px; height: 22px; border-radius: 99px; background: #cdbfa9; transition: background .2s; }
.switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s; }
.switch[aria-pressed="true"] i { background: var(--sage); }
.switch[aria-pressed="true"] i::after { transform: translateX(16px); }

/* Bản xem thử của người gửi */
.preview-banner { position: fixed; left: 50%; top: calc(var(--topbar) + 10px); transform: translateX(-50%); z-index: 55; display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100% - 24px); padding: 8px 10px 8px 16px; border-radius: 99px; background: rgba(47, 39, 35, .9); color: var(--paper); font-size: 12.5px; box-shadow: 0 10px 24px rgba(30, 20, 15, .25); }
.preview-banner .text-btn { margin: 0; color: #f3dcc0; white-space: nowrap; min-height: 32px; }

/* ---------- Điện thoại ---------- */
@media (max-width: 900px) {
  /* Nút đi tiếp luôn trong tầm tay: dính ở đáy màn hình trong lúc cuộn */
  .panel > .nav-row { position: sticky; bottom: 0; z-index: 8; margin: 22px calc(-1 * clamp(18px, 2.6vw, 36px)) 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(243, 235, 221, .95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--line); box-shadow: 0 -10px 24px rgba(60, 40, 25, .1); }
  .panel > .nav-row .art-btn { min-height: 54px; }
  .panel > .nav-row .art-btn .art { width: 60px; height: 42px; }
  /* Bước ký tên, phong bì, gửi đi: khung xem trước dính trên đầu để thấy ngay mỗi lựa chọn */
  body:not(.reading)[data-step="2"] .stage, body:not(.reading)[data-step="4"] .stage, body:not(.reading)[data-step="5"] .stage {
    position: sticky !important; top: var(--topbar) !important; height: 40vh !important; min-height: 270px !important; z-index: 9; box-shadow: 0 10px 20px rgba(60, 40, 25, .18); }
  body.typing:not(.reading) .stage { position: relative !important; }
  .preview-banner { border-radius: 14px; flex-wrap: wrap; justify-content: center; text-align: center; padding: 8px 12px; }
}
@media (max-width: 480px) {
  .panel > .nav-row:has(.nav-where) .nav-where { flex: 1 1 100%; text-align: center; font-size: 12px; margin-bottom: -4px; }
  .look-editor > summary small { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sheet.editable .sheet-msg:empty::after { animation: none; } }
@media (max-width: 900px) { body:not(.reading) .toast { bottom: calc(96px + env(safe-area-inset-bottom)); } }
/* Điện thoại hẹp: nút quay lại thu thành mũi tên để thanh đáy chỉ còn một hàng */
@media (max-width: 480px) {
  .panel:not([data-panel="3"]) > .nav-row:not(:has(.nav-where)) { flex-wrap: nowrap; }
  .panel > .nav-row > .btn.ghost[data-go] { flex: none; width: 48px; height: 48px; padding: 0; font-size: 0; border-color: rgba(47, 39, 35, .25); }
  .panel > .nav-row > .btn.ghost[data-go]::before { content: '←'; font-size: 20px; }
  .panel:not([data-panel="3"]) > .nav-row .art-btn { flex: 1 1 auto; min-width: 0; }
}
/* Bước 5 trên điện thoại: bản thân màn hình đã là điện thoại, nên màn chào tràn khung xem trước thay vì lồng thêm khung */
@media (max-width: 900px) {
  body:not(.reading)[data-step="5"] .stage .caption { display: none; }
  .stage .welcome-frame { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
  .stage .welcome-frame .welcome { padding: 12px 16px; }
  .stage .welcome-frame .welcome-badge { width: 56px; height: 56px; margin-bottom: 8px; }
  .stage .welcome-frame .welcome-badge b { width: 42px; height: 42px; font-size: 20px; }
  .stage .welcome-frame .welcome-title { font-size: 26px; margin-bottom: 6px; }
  .stage .welcome-frame .welcome-note { font-size: 13px; margin-bottom: 12px; }
  .stage .welcome-frame .welcome-open { padding: 9px 20px; font-size: 14px; }
}