/* ===== BeYours ===== */
:root {
  --wine: #6E1F28;
  --ground: #E9DFD3;
  --cream: #F6EFE6;
  --ink: #3E1016;
  --muted: #6B4A48;
  --paper: #FFFDF9;
  --line: rgba(110, 31, 40, .16);
  --pw: min(100vw, 430px);
  --pad: 22px;
  --gx: 14px;
  --gy: 18px;
  --cell: calc((var(--pw) - 2 * var(--pad) - 3 * var(--gx)) / 4);
  --top: max(env(safe-area-inset-top), 14px);
  --bottom: max(env(safe-area-inset-bottom), 10px);
  --serif: 'Noto Serif TC', serif;
  --display: 'Playfair Display', 'Noto Serif TC', serif;
  --hand: 'LXGW WenKai TC', 'Noto Serif TC', serif;
  --sans: 'Noto Sans TC', system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #2a1215; overscroll-behavior: none; }
body { font-family: var(--sans); color: var(--ink); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: var(--ink); }
img { -webkit-user-drag: none; user-select: none; }

#phone { position: relative; width: var(--pw); height: 100dvh; margin: 0 auto; overflow: hidden; background: var(--ground); }
@media (min-width: 500px) {
  body { display: flex; align-items: center; justify-content: center; }
  #phone { height: min(100dvh, 900px); border-radius: 36px; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
}
#app { position: absolute; inset: 0; }

/* ===== 全螢幕畫面 ===== */
.screen { position: absolute; inset: 0; background: var(--ground); transform: translateX(100%); transition: transform .28s cubic-bezier(.2,.8,.2,1); display: flex; flex-direction: column; z-index: 10; }
.screen.show { transform: none; }
.screen.up { transform: translateY(100%); }
.screen.up.show { transform: none; }
.topbar { flex-shrink: 0; padding: calc(var(--top) + 6px) 10px 8px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); background: var(--ground); }
.topbar h1 { flex: 1; margin: 0; font-family: var(--serif); font-size: 17px; font-weight: 600; text-align: center; }
.icon-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--wine); border-radius: 50%; flex-shrink: 0; }
.icon-btn:active { background: rgba(110,31,40,.08); }
.scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ===== 按鈕、表單 ===== */
.btn { height: 42px; padding: 0 18px; border-radius: 21px; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn.primary { background: var(--wine); color: var(--cream); }
.btn.ghost { color: var(--muted); border: 1px solid var(--line); }
.btn.danger { background: #8E1B1B; color: #fff; }
.btn.small { height: 34px; padding: 0 14px; font-size: 13px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.field input, .field textarea, .field select { width: 100%; border: 1px solid var(--line); background: var(--paper); border-radius: 12px; padding: 10px 12px; font-size: 15px; outline: none; }
.field textarea { resize: vertical; line-height: 1.5; }
.field input:focus, .field textarea:focus { border-color: var(--wine); }

/* ===== 提示、選單、對話框 ===== */
#toast-root { position: absolute; left: 0; right: 0; top: calc(var(--top) + 10px); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; z-index: 100; }
.toast { background: var(--ink); color: var(--cream); padding: 9px 16px; border-radius: 18px; font-size: 13px; opacity: 0; transform: translateY(-8px); transition: .25s; max-width: 85%; text-align: center; }
.toast.show { opacity: 1; transform: none; }
#overlay-root { position: absolute; inset: 0; pointer-events: none; z-index: 50; }
#overlay-root > * { pointer-events: auto; }
.sheet-wrap { position: absolute; inset: 0; }
.sheet-bg { position: absolute; inset: 0; background: rgba(40,10,14,.35); opacity: 0; transition: .25s; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--cream); border-radius: 26px 26px 0 0; padding: 16px 16px calc(var(--bottom) + 10px); transform: translateY(100%); transition: transform .25s cubic-bezier(.2,.8,.2,1); max-height: 86%; overflow-y: auto; }
.sheet-wrap.show .sheet-bg { opacity: 1; }
.sheet-wrap.show .sheet { transform: none; }
.sheet-title { font-family: var(--serif); font-weight: 600; font-size: 16px; text-align: center; padding: 4px 0 12px; white-space: pre-line; line-height: 1.5; }
.sheet-body { display: flex; flex-direction: column; gap: 8px; }
.sheet-btn { min-height: 50px; border-radius: 16px; background: var(--paper); display: flex; align-items: center; gap: 10px; padding: 0 16px; font-size: 15px; color: var(--ink); }
.sheet-btn svg { color: var(--wine); }
.sheet-btn.danger, .sheet-btn.danger svg { color: #9b1c1c; }
.sheet-btn.cancel { justify-content: center; color: var(--muted); background: transparent; }
.dialog-wrap { position: absolute; inset: 0; background: rgba(40,10,14,.38); display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; transition: .2s; }
.dialog-wrap.show { opacity: 1; }
.dialog { width: 100%; max-width: 360px; background: var(--cream); border-radius: 24px; padding: 20px; display: flex; flex-direction: column; gap: 12px; max-height: 90%; overflow-y: auto; }
.dialog-title { font-family: var(--serif); font-weight: 600; font-size: 17px; }
.dialog-msg { font-size: 14px; line-height: 1.6; color: var(--muted); white-space: pre-line; }
.dialog-form { display: flex; flex-direction: column; gap: 12px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ===== 鎖屏 ===== */
.lock { position: absolute; inset: 0; z-index: 30; overflow: hidden; background: var(--ground) center/cover no-repeat; display: flex; flex-direction: column; align-items: center; color: var(--wine); transition: transform .4s cubic-bezier(.2,.8,.2,1), opacity .4s; touch-action: none; }
.lock.gone { transform: translateY(-100%); opacity: .4; pointer-events: none; }
.lock .lock-top { margin-top: calc(var(--top) + 46px); display: flex; flex-direction: column; align-items: center; }
.lock .l-date { font-family: var(--serif); font-size: 18px; font-weight: 600; margin-top: 14px; }
.lock .l-time { font-family: var(--display); font-size: 100px; line-height: 1; font-weight: 600; }
.lock .l-chips { display: flex; gap: 20px; margin-top: 18px; }
.lock .l-chip { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--wine); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 10px; }
.lock .l-chip b { font-family: var(--display); font-size: 17px; line-height: 1; }
.lock .l-notes { width: calc(100% - 32px); margin-top: 34px; display: flex; flex-direction: column; gap: 10px; }
.notif { border-radius: 22px; background: rgba(246,239,230,.84); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 13px 15px; display: flex; gap: 12px; align-items: flex-start; color: var(--ink); text-align: left; width: 100%; }
.notif .avatar { width: 40px; height: 40px; }
.notif .n-head { display: flex; justify-content: space-between; font-size: 13px; }
.notif .n-head span:last-child { color: var(--muted); }
.notif .n-body { font-size: 14px; margin-top: 2px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lock .l-hint { position: absolute; bottom: calc(var(--bottom) + 18px); font-size: 12px; color: var(--cream); text-shadow: 0 1px 4px rgba(0,0,0,.25); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.lock .l-hint .bar { width: 130px; height: 5px; border-radius: 3px; background: var(--cream); }

.heart-blur { position: absolute; pointer-events: none; filter: blur(34px); opacity: .5; }
.wall { position: absolute; inset: 0; background: var(--ground) center/cover no-repeat; }

/* ===== 頭像 ===== */
.avatar { width: 40px; height: 40px; border-radius: 50%; background: #D8C8BA center/cover no-repeat; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--wine); font-family: var(--serif); font-weight: 600; overflow: hidden; }

/* ===== 桌面 ===== */
.home { position: absolute; inset: 0; overflow: hidden; }
.pages { position: absolute; left: 0; right: 0; top: 0; bottom: calc(var(--bottom) + 120px); display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; }
.pages::-webkit-scrollbar { display: none; }
.page { flex: 0 0 100%; scroll-snap-align: start; padding: calc(var(--top) + 30px) var(--pad) 10px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: var(--rowh, var(--cell)); gap: var(--gy) var(--gx); grid-auto-flow: row dense; align-content: start; overflow: hidden; position: relative; }
.page::-webkit-scrollbar { display: none; }
.page-hint { grid-column: span 4; grid-row: 3; text-align: center; color: var(--muted); font-size: 13px; align-self: center; }
.dots { position: absolute; left: 0; right: 0; bottom: calc(var(--bottom) + 104px); display: flex; justify-content: center; gap: 7px; pointer-events: none; }
.dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(110,31,40,.3); transition: .2s; }
.dots span.on { background: var(--wine); }
.dock { position: absolute; left: 16px; right: 16px; bottom: calc(var(--bottom) + 10px); height: 84px; border-radius: 30px; background: rgba(246,239,230,.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: space-around; }

.app { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; position: relative; }
.app-icon { width: min(calc(var(--cell) * .76), calc(var(--rowh, var(--cell)) - 24px), 60px); height: min(calc(var(--cell) * .76), calc(var(--rowh, var(--cell)) - 24px), 60px); border-radius: 30%; background: var(--wine); color: var(--cream); display: flex; align-items: center; justify-content: center; position: relative; background-size: cover; background-position: center; }
.app-icon.alt { background-color: var(--cream); color: var(--wine); }
.app-label { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; text-shadow: 0 0 6px var(--ground); }
.dock .app-icon { width: 58px; height: 58px; }
.badge { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--cream); color: var(--wine); font-size: 11px; font-weight: 500; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--wine); }

.widget { border-radius: 24px; overflow: hidden; position: relative; min-width: 0; min-height: 0; text-align: left; display: block; width: 100%; height: 100%; }
.w-1x1 { grid-column: span 1; grid-row: span 1; border-radius: 20px; }
.w-2x1 { grid-column: span 2; grid-row: span 1; border-radius: 20px; }
.w-2x2 { grid-column: span 2; grid-row: span 2; }
.w-4x2 { grid-column: span 4; grid-row: span 2; }
.w-4x4 { grid-column: span 4; grid-row: span 4; }
.w-wine { background: var(--wine); color: var(--cream); }
.w-cream { background: var(--cream); color: var(--wine); }
.w-pad { padding: 14px 16px; display: flex; flex-direction: column; }
.w-clock .c-time { font-family: var(--display); font-weight: 600; line-height: 1; }
.w-clock .c-sub { font-size: 12px; opacity: .85; }
.w-photo { background: #D8C8BA center/cover no-repeat; display: flex; align-items: center; justify-content: center; color: #5E3A3A; font-size: 12px; flex-direction: column; gap: 6px; }
.w-text { font-family: var(--hand); display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px; line-height: 1.5; white-space: pre-wrap; overflow: hidden; }
.w-days { display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1.5px solid var(--wine); }
.w-days .d-num { font-family: var(--display); font-weight: 600; line-height: 1.05; }
.w-status .s-line { font-family: var(--hand); line-height: 1.5; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; }
.w-collage { background: var(--cream); }
.w-empty { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); border: 1.5px dashed rgba(110,31,40,.35); background: rgba(246,239,230,.5); }

/* 編輯模式 */
.home.editing .page > * { animation: wiggle .32s ease-in-out infinite alternate; touch-action: none; cursor: grab; }
.badge-btn { position: absolute; z-index: 4; display: none; align-items: center; justify-content: center; gap: 3px; color: var(--cream); background: var(--ink); border-radius: 999px; box-shadow: 0 2px 6px rgba(0,0,0,.25); touch-action: manipulation; }
.home.editing .badge-btn { display: flex; }
.badge-btn.del { width: 24px; height: 24px; top: 6px; left: 6px; }
.app-icon .badge-btn.del { top: -7px; left: -7px; width: 22px; height: 22px; }
.badge-btn.size { right: 6px; bottom: 6px; height: 26px; padding: 0 9px; font-size: 11px; background: rgba(62,16,22,.82); }
.drag-ghost { position: fixed; z-index: 200; pointer-events: none; opacity: .92; transform: scale(1.05); box-shadow: 0 12px 30px rgba(62,16,22,.3); border-radius: 24px; animation: none !important; }
.drag-ghost .badge-btn { display: none !important; }
.drag-src { opacity: .25; }
.drop-before { box-shadow: -5px 0 0 -1px var(--wine); }
.drop-after { box-shadow: 5px 0 0 -1px var(--wine); }
.home.editing .page > *:nth-child(2n) { animation-delay: -.16s; }
@keyframes wiggle { from { transform: rotate(-1.2deg); } to { transform: rotate(1.2deg); } }
.edit-bar { position: absolute; left: 0; right: 0; top: 0; padding: calc(var(--top) - 4px) 14px 0; display: none; justify-content: space-between; z-index: 5; }
.home.editing .edit-bar { display: flex; }
.edit-bar .btn { height: 32px; font-size: 13px; background: var(--cream); color: var(--wine); box-shadow: 0 2px 8px rgba(62,16,22,.15); }
.edit-bar .btn.primary { background: var(--wine); color: var(--cream); }

.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gallery-item { background: var(--paper); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.gallery-item .g-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--wine); color: var(--cream); display: flex; align-items: center; justify-content: center; }
.gallery-item b { font-size: 14px; font-weight: 500; }
.gallery-item span { font-size: 11px; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { height: 34px; padding: 0 14px; border-radius: 17px; border: 1px solid rgba(110,31,40,.3); font-size: 13px; color: var(--ink); }
.chip.on { background: var(--wine); border-color: var(--wine); color: var(--cream); }
.sheet-label { font-size: 12px; color: var(--muted); margin: 4px 2px 0; }

/* ===== 聊天 ===== */
.chat-head { gap: 6px; }
.chat-head .who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.chat-head .who b { display: block; font-family: var(--serif); font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-head .who small { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-body { flex: 1; overflow-y: auto; padding: 12px 12px 16px; display: flex; flex-direction: column; gap: 10px; background: var(--ground) center/cover no-repeat; }
.day-chip { align-self: center; font-size: 11px; color: var(--muted); padding: 3px 10px; border-radius: 999px; background: rgba(246,239,230,.75); }
.sys-line { align-self: center; font-size: 11.5px; color: var(--muted); text-align: center; max-width: 80%; }
.row { display: flex; gap: 8px; align-items: flex-end; max-width: 100%; }
.row.me { flex-direction: row-reverse; }
.row .avatar { width: 32px; height: 32px; font-size: 13px; }
.row.me .avatar { display: none; }
.bubble { max-width: min(76%, 290px); padding: 9px 13px; border-radius: 18px 18px 18px 6px; background: var(--cream); font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.row.me .bubble { background: var(--wine); color: var(--cream); border-radius: 18px 18px 6px 18px; }
.bubble a { color: inherit; }
.msg-img { max-width: 200px; max-height: 260px; border-radius: 16px; display: block; }
.msg-sticker { width: 100px; max-height: 110px; object-fit: contain; display: block; filter: drop-shadow(0 3px 4px rgba(62,16,22,.18)); }
.card { width: 236px; border-radius: 18px; overflow: hidden; background: var(--cream); border: 1px solid var(--line); color: var(--ink); text-align: left; }
.row.me .card { border-radius: 18px 18px 6px 18px; }
.row:not(.me) .card { border-radius: 18px 18px 18px 6px; }
.card-link { display: flex; }
.card-link .thumb { width: 84px; flex-shrink: 0; background: var(--wine) center/cover no-repeat; color: var(--cream); display: flex; align-items: center; justify-content: center; min-height: 78px; }
.card-link .info { padding: 9px 11px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.card-link .t { font-size: 13px; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-link .s { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-link .seen { font-size: 10px; color: var(--wine); display: flex; align-items: center; gap: 4px; }
.card-transfer { background: var(--wine); color: var(--cream); padding: 12px 14px; border: 0; width: 210px; }
.card-transfer.done { opacity: .72; }
.card-transfer .amt { font-family: var(--display); font-size: 21px; font-weight: 600; line-height: 1.15; }
.card-transfer .note { font-size: 12px; opacity: .9; }
.card-transfer .foot { font-size: 10.5px; opacity: .78; border-top: 1px solid rgba(246,239,230,.25); padding-top: 6px; margin-top: 7px; }
.card-transfer .top { display: flex; align-items: center; gap: 10px; }
.card-transfer .ring { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--cream); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.card-place .map { height: 86px; background: #D9CBBD; position: relative; display: flex; align-items: center; justify-content: center; color: var(--wine); background-image: linear-gradient(90deg, rgba(110,31,40,.08) 1px, transparent 1px), linear-gradient(rgba(110,31,40,.08) 1px, transparent 1px); background-size: 18px 18px; }
.card-place .info, .card-textimg .info { padding: 9px 12px; font-size: 13px; }
.card-place .info small { display: block; font-size: 11px; color: var(--muted); }
.card-textimg { width: 200px; }
.card-textimg .paper { aspect-ratio: 4/3; background: var(--paper); display: flex; align-items: center; justify-content: center; text-align: center; padding: 14px; font-family: var(--hand); font-size: 14px; line-height: 1.6; color: var(--ink); overflow: hidden; }
.card-textimg .info { font-size: 11px; color: var(--muted); display: flex; gap: 5px; align-items: center; }
.card-voice { display: flex; align-items: center; gap: 9px; padding: 9px 13px; width: auto; min-width: 140px; max-width: 240px; flex-wrap: wrap; }
.card-voice .vplay { width: 26px; height: 26px; border-radius: 50%; background: var(--wine); color: var(--cream); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.row.me .card-voice { background: var(--wine); color: var(--cream); border: 0; }
.row.me .card-voice .vplay { background: var(--cream); color: var(--wine); }
.card-voice .wave { display: flex; align-items: center; gap: 2px; flex: 1; }
.card-voice .wave i { width: 3px; border-radius: 2px; background: currentColor; opacity: .7; }
.card-voice .vtext { flex-basis: 100%; font-size: 13px; line-height: 1.5; border-top: 1px solid var(--line); padding-top: 6px; }
.card-call { display: flex; align-items: center; gap: 10px; padding: 10px 14px; width: auto; }
.card-collage img { width: 100%; display: block; background: var(--cream); }
.card-collage .info { padding: 8px 12px; font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.card-collage .info .btn { height: 30px; font-size: 12px; padding: 0 12px; }
.typing { display: inline-flex; gap: 4px; padding: 13px 15px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--wine); opacity: .5; animation: blink 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 50% { opacity: 1; transform: translateY(-2px); } }

.chat-input { flex-shrink: 0; padding: 8px 8px calc(var(--bottom) + 6px); display: flex; align-items: flex-end; gap: 6px; background: var(--ground); border-top: 1px solid var(--line); }
.chat-input .plus { width: 40px; height: 40px; border-radius: 50%; background: var(--wine); color: var(--cream); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform .2s; }
.chat-input .plus.open { transform: rotate(45deg); }
.chat-input textarea { flex: 1; min-width: 0; min-height: 40px; max-height: 120px; resize: none; border: 0; border-radius: 20px; background: var(--cream); padding: 9px 14px; font-size: 15px; line-height: 1.45; outline: none; }
.chat-input .icon-btn { width: 40px; height: 40px; }
.chat-input .send { background: var(--wine); color: var(--cream); }
.panel { flex-shrink: 0; background: var(--cream); border-radius: 22px 22px 0 0; padding: 18px 14px calc(var(--bottom) + 8px); display: none; max-height: 46%; overflow-y: auto; }
.panel.show { display: block; }
.panel-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 8px; }
.panel-grid button { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; }
.panel-grid .pi { width: 56px; height: 56px; border-radius: 18px; background: var(--ground); color: var(--wine); display: flex; align-items: center; justify-content: center; }
.sticker-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sticker-grid button { aspect-ratio: 1; border-radius: 14px; background: var(--ground) center/contain no-repeat; display: flex; align-items: flex-end; justify-content: center; font-size: 10px; color: var(--muted); padding: 3px; overflow: hidden; }
.sticker-grid .add { align-items: center; color: var(--wine); border: 1.5px dashed rgba(110,31,40,.35); background: transparent; }
.empty-hint { text-align: center; color: var(--muted); font-size: 13px; line-height: 1.7; padding: 30px 20px; }

/* 通話 */
.call { background: var(--wine); color: var(--cream); align-items: center; }
.call .c-top { margin-top: calc(var(--top) + 50px); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.call .avatar { width: 96px; height: 96px; font-size: 34px; border: 2px solid rgba(246,239,230,.5); }
.call .c-name { font-family: var(--serif); font-size: 22px; font-weight: 600; }
.call .c-time { font-size: 13px; opacity: .8; }
.call .c-lines { flex: 1; width: 100%; overflow-y: auto; padding: 24px 26px; display: flex; flex-direction: column; gap: 10px; justify-content: flex-end; }
.call .c-line { font-size: 16px; line-height: 1.6; text-align: center; }
.call .c-line.me { opacity: .6; font-size: 14px; }
.call .c-input { width: 100%; padding: 0 16px 10px; display: flex; gap: 8px; }
.call .c-input input { flex: 1; min-width: 0; height: 44px; border-radius: 22px; border: 0; padding: 0 16px; background: rgba(246,239,230,.16); color: var(--cream); outline: none; font-size: 15px; }
.call .c-input input::placeholder { color: rgba(246,239,230,.6); }
.call .c-input button { width: 44px; height: 44px; border-radius: 50%; background: var(--cream); color: var(--wine); display: flex; align-items: center; justify-content: center; }
.call .hang { width: 66px; height: 66px; border-radius: 50%; background: #C62828; color: #fff; display: flex; align-items: center; justify-content: center; margin: 6px 0 calc(var(--bottom) + 20px); }

/* ===== 拼貼 ===== */
.collage-canvas { position: relative; overflow: hidden; background-color: var(--cream); }
.collage-canvas.dots-bg { background-image: radial-gradient(rgba(110,31,40,.13) 1px, transparent 1.3px); background-size: 16px 16px; }
.ci { position: absolute; transform-origin: center center; touch-action: none; }
.ci .ci-frame { position: absolute; inset: 0; overflow: hidden; }
.ci.polaroid { background: var(--paper); box-shadow: 0 6px 14px rgba(62,16,22,.18); }
.ci .ci-frame img { position: absolute; max-width: none; pointer-events: none; }
.ci.sticker .ci-frame { overflow: visible; filter: drop-shadow(0 4px 5px rgba(62,16,22,.28)); }
.ci.text { white-space: pre; line-height: 1.3; }
.ci.tape { opacity: .85; }
.ci.sel { outline: 1.5px dashed var(--wine); outline-offset: 3px; }
.ci .hd { position: absolute; width: 26px; height: 26px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--wine); color: var(--wine); display: none; align-items: center; justify-content: center; z-index: 3; touch-action: none; }
.ci.sel .hd { display: flex; }
.ci .hd.scale { right: -16px; bottom: -16px; cursor: nwse-resize; }
.ci .hd.rot { left: 50%; top: -42px; margin-left: -13px; cursor: grab; background: var(--wine); color: var(--cream); }
.ci.cropping { outline: 2px solid var(--wine); outline-offset: 0; }
.ci.cropping .ci-frame { box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); }

.cedit-stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 18px; min-height: 0; }
.cedit-stage .collage-canvas { border-radius: 24px; box-shadow: 0 4px 20px rgba(62,16,22,.1); }
.cedit-tools { flex-shrink: 0; margin: 0 16px 10px; min-height: 58px; border-radius: 18px; background: rgba(246,239,230,.75); display: flex; align-items: center; justify-content: space-around; padding: 4px; }
.cedit-tools button { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 46px; font-size: 11px; color: var(--ink); padding: 4px 0; }
.cedit-tools button svg { color: var(--wine); }
.cedit-tools .hint { font-size: 12px; color: var(--muted); }
.cedit-tools input[type=range] { accent-color: var(--wine); width: 110px; }
.cedit-add { flex-shrink: 0; background: var(--cream); border-radius: 24px 24px 0 0; padding: 14px 16px calc(var(--bottom) + 8px); display: flex; flex-direction: column; gap: 12px; }
.cedit-add .sizes { display: flex; gap: 6px; align-items: center; }
.cedit-add .sizes .chip { height: 30px; padding: 0 11px; font-size: 12px; }
.line-card { border-radius: 18px; background: var(--wine); color: var(--cream); padding: 11px 14px; display: flex; align-items: center; gap: 10px; }
.line-card .lc-t { flex: 1; min-width: 0; }
.line-card small { font-size: 10px; opacity: .8; letter-spacing: .06em; }
.line-card div div { font-family: var(--hand); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.line-card .btn { height: 32px; padding: 0 12px; font-size: 12px; flex-shrink: 0; }
.line-card .btn.ghost { color: var(--cream); border-color: rgba(246,239,230,.5); }
.line-card .btn.light { background: var(--cream); color: var(--wine); }
.add-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.add-row button { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 12px; }
.add-row .pi { width: 50px; height: 50px; border-radius: 16px; background: var(--ground); color: var(--wine); display: flex; align-items: center; justify-content: center; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.swatches button { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--line); }

/* ===== 設定、記憶庫 ===== */
.list { padding: 14px 16px 30px; display: flex; flex-direction: column; gap: 18px; }
.group { background: var(--cream); border-radius: 20px; padding: 6px 0; overflow: hidden; }
.group-title { font-size: 12px; color: var(--muted); margin: 0 6px -10px; letter-spacing: .04em; }
.item { width: 100%; min-height: 52px; display: flex; align-items: center; gap: 12px; padding: 8px 16px; text-align: left; font-size: 15px; }
.item + .item { border-top: 1px solid var(--line); }
.item .ico { color: var(--wine); display: flex; }
.item .grow { flex: 1; min-width: 0; }
.item small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .val { font-size: 13px; color: var(--muted); max-width: 45%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item input[type=color] { width: 36px; height: 36px; border: 0; padding: 0; background: none; border-radius: 50%; }
.char-card { display: flex; gap: 14px; align-items: center; padding: 16px; }
.char-card .avatar { width: 64px; height: 64px; font-size: 24px; }
.char-card b { font-family: var(--serif); font-size: 18px; }
.char-card p { margin: 4px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mem { background: var(--cream); border-radius: 18px; padding: 13px 15px; display: flex; flex-direction: column; gap: 6px; text-align: left; width: 100%; }
.mem .m-text { font-family: var(--serif); font-size: 14.5px; line-height: 1.6; }
.mem .m-meta { font-size: 11px; color: var(--muted); display: flex; gap: 8px; }
.tag { padding: 1px 8px; border-radius: 999px; background: rgba(110,31,40,.1); color: var(--wine); }
.fab { position: absolute; right: 20px; bottom: calc(var(--bottom) + 20px); width: 56px; height: 56px; border-radius: 50%; background: var(--wine); color: var(--cream); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(62,16,22,.3); }
.loading-veil { position: absolute; inset: 0; background: rgba(246,239,230,.6); display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--wine); z-index: 60; }

/* ===== v0.2：他的手機、行程 ===== */
.w-phone { gap: 6px; color: var(--ink); }
.w-phone .ph-head { font-size: 12px; color: var(--muted); font-family: var(--serif); }
.w-phone .ph-row { display: flex; align-items: center; gap: 8px; color: var(--wine); }
.w-phone .ph-place { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--ink); min-width: 0; }
.w-phone .ph-place span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-phone .ph-sub { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-phone .ph-tag { font-size: 10px; padding: 1px 7px; border-radius: 999px; background: rgba(110,31,40,.12); }
.batt { position: relative; width: 38px; height: 18px; border: 2px solid var(--wine); border-radius: 5px; padding: 2px; display: inline-block; flex-shrink: 0; }
.batt::after { content: ''; position: absolute; right: -5px; top: 4px; width: 3px; height: 6px; border-radius: 0 2px 2px 0; background: var(--wine); }
.batt i { display: block; height: 100%; background: var(--wine); border-radius: 2px; }
.batt.low i { background: #B23A48; }
.ev-line { display: flex; gap: 7px; align-items: center; min-width: 0; }
.ev-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.ev-dot.hollow { background: transparent; border: 1px solid currentColor; }
.ev-dot.anniv { border-radius: 1px; transform: rotate(45deg); }
.ev-dot.big { width: 10px; height: 10px; color: var(--wine); }

/* 行事曆 */
.cal { margin: 12px 14px 0; background: var(--cream); border-radius: 22px; padding: 6px 10px 12px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; }
.cal-head b { font-family: var(--serif); font-size: 16px; }
.cal-week, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; }
.cal-week span { font-size: 11px; color: var(--muted); padding: 4px 0; }
.cal-day { aspect-ratio: 1 / 1.05; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 12px; font-size: 14px; }
.cal-day.today span:first-child { color: var(--wine); font-weight: 600; }
.cal-day.sel { background: var(--wine); color: var(--cream); }
.cal-day.sel span:first-child { color: var(--cream); }
.cal-dots { display: flex; gap: 2px; height: 5px; color: var(--wine); }
.cal-day.sel .cal-dots { color: var(--cream); }
.cal-dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.cal-dots i.hollow { background: transparent; border: 1px solid currentColor; }
.cal-dots i.anniv { border-radius: 1px; transform: rotate(45deg); }

/* 我們：情書、日記 */
.seg { margin: 10px 16px 0; display: flex; background: var(--cream); border-radius: 14px; padding: 3px; flex-shrink: 0; }
.seg button { flex: 1; height: 36px; border-radius: 11px; font-size: 14px; color: var(--muted); }
.seg button.on { background: var(--wine); color: var(--cream); }
.letter { width: 100%; display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 6px 6px 18px 18px; background: var(--paper); text-align: left; position: relative; box-shadow: 0 2px 10px rgba(62,16,22,.06); border-top: 3px solid var(--wine); }
.letter.mine { border-top-color: #C9B3A6; }
.letter .seal { width: 38px; height: 38px; border-radius: 50%; background: var(--wine); color: var(--cream); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.letter.mine .seal { background: #C9B3A6; }
.letter .l-info { flex: 1; min-width: 0; }
.letter b { display: block; font-family: var(--serif); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.letter small { font-size: 11px; color: var(--muted); }
.letter.unread b { color: var(--wine); }
.paper-letter { margin: 16px; background: var(--paper); border-radius: 6px; padding: 26px 22px 30px; box-shadow: 0 6px 22px rgba(62,16,22,.08); background-image: repeating-linear-gradient(transparent, transparent 31px, rgba(110,31,40,.08) 32px); }
.pl-date { font-family: var(--display); font-style: italic; font-size: 12px; color: var(--muted); text-align: right; margin-bottom: 14px; }
.pl-body { font-family: var(--hand); font-size: 17px; line-height: 32px; white-space: pre-wrap; color: var(--ink); }
.pl-sign { font-family: var(--hand); font-size: 17px; text-align: right; margin-top: 18px; color: var(--wine); }
.diary-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--cream); border-radius: 16px; padding: 10px 12px 10px 16px; font-size: 13px; color: var(--muted); }
.diary { width: 100%; background: var(--paper); border-radius: 18px; padding: 14px 16px; text-align: left; border-left: 0; position: relative; }
.diary .d-who { font-size: 11px; color: var(--wine); margin-bottom: 6px; letter-spacing: .06em; }
.diary.mine .d-who { color: var(--muted); }
.diary .d-body { font-family: var(--hand); font-size: 15.5px; line-height: 1.75; white-space: pre-wrap; color: var(--ink); }

/* 新聞 */
.news-tabs { padding: 10px 14px 4px; flex-wrap: nowrap; overflow-x: auto; flex-shrink: 0; scrollbar-width: none; }
.news-tabs .chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 2px; }
.news-item { width: 100%; text-align: left; background: var(--cream); border-radius: 16px; padding: 13px 15px; display: flex; flex-direction: column; gap: 5px; }
.news-item b { font-size: 15px; font-weight: 500; line-height: 1.5; }
.news-item small { font-size: 11px; color: var(--muted); }
.news-item.read b { color: var(--muted); }
.article { padding: 20px 20px 40px; }
.article h2 { font-family: var(--serif); font-size: 21px; line-height: 1.5; margin: 0 0 8px; }
.a-meta { font-size: 12px; color: var(--muted); }
.a-desc { font-size: 16px; line-height: 1.85; margin: 18px 0 24px; }
.a-actions { display: flex; gap: 10px; }
.a-actions a { text-decoration: none; }

/* 聊天新卡片 */
.card-event { display: flex; align-items: stretch; width: 220px; }
.card-event .ce-date { width: 62px; background: var(--wine); color: var(--cream); display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; }
.card-event .ce-date b { font-family: var(--display); font-size: 24px; line-height: 1; }
.card-event .ce-date span { font-size: 11px; }
.card-event .info { padding: 10px 12px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.card-event small { font-size: 10.5px; color: var(--wine); display: flex; align-items: center; gap: 3px; }
.gps-tag { position: absolute; top: 8px; right: 8px; font-size: 9px; letter-spacing: .08em; background: var(--wine); color: var(--cream); padding: 2px 6px; border-radius: 6px; }
.app-icon.custom { background-color: transparent; background-size: cover; background-position: center; }
.home.editing .dock .app { animation: wiggle .32s ease-in-out infinite alternate; }
.badge-btn.size { touch-action: none; cursor: nwse-resize; }

/* ===== v0.3：一起聽 ===== */
.listen .lp-stage { flex-shrink: 0; margin: 12px 16px 0; border-radius: 20px; overflow: hidden; background: var(--wine); }
.listen .lp-stage[data-kind="yt"] { aspect-ratio: 16 / 9; }
.lp-yt, .lp-yt-host, .lp-yt iframe { width: 100%; height: 100%; display: block; border: 0; }
.lp-sp { background: transparent; }
.lp-au { height: 150px; display: flex; align-items: center; justify-content: center; color: var(--cream); }
.lp-disc { width: 96px; height: 96px; border-radius: 50%; background: radial-gradient(circle, var(--cream) 0 9%, #2a0c10 10% 100%); display: flex; align-items: center; justify-content: center; color: var(--cream); box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.lp-disc svg { opacity: .35; }
.lp-disc.spin { animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.lp-meta { flex-shrink: 0; text-align: center; padding: 12px 20px 0; }
.lp-meta b { display: block; font-family: var(--serif); font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-meta small { font-size: 12px; color: var(--muted); }
.lp-progress { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 10px 20px 0; font-size: 11px; color: var(--muted); }
.lp-progress .bar { flex: 1; height: 4px; border-radius: 2px; background: rgba(110,31,40,.18); position: relative; cursor: pointer; padding: 8px 0; background-clip: content-box; }
.lp-progress .bar i { position: absolute; left: 0; top: 8px; height: 4px; border-radius: 2px; background: var(--wine); }
.lp-controls { flex-shrink: 0; display: flex; justify-content: center; align-items: center; gap: 26px; padding: 6px 0; }
.lp-play { width: 58px; height: 58px; border-radius: 50%; background: var(--wine); color: var(--cream); display: flex; align-items: center; justify-content: center; }
.lp-lyrics { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 24px 30px; text-align: center; scrollbar-width: none; mask-image: linear-gradient(transparent, #000 12%, #000 85%, transparent); -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 85%, transparent); }
.lp-line { font-family: var(--serif); font-size: 15px; line-height: 1.6; padding: 6px 0; color: rgba(62,16,22,.4); transition: color .25s, transform .25s; cursor: pointer; }
.lp-line.on { color: var(--wine); font-size: 18px; font-weight: 600; }
.lp-plain { white-space: pre-wrap; font-family: var(--serif); font-size: 14px; line-height: 1.9; color: var(--ink); text-align: center; padding-top: 10px; }
.lp-empty { color: var(--muted); font-size: 13px; line-height: 1.8; padding: 30px 10px; text-align: center; }
.lp-actions { flex-shrink: 0; display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; padding: 8px 12px calc(var(--bottom) + 8px); border-top: 1px solid var(--line); background: var(--ground); }
.lp-actions .btn { height: 34px; padding: 0 12px; font-size: 12.5px; }
.lp-react { position: absolute; left: 16px; right: 16px; bottom: calc(var(--bottom) + 64px); background: var(--cream); border-radius: 18px 18px 18px 6px; padding: 12px 14px; box-shadow: 0 8px 24px rgba(62,16,22,.18); z-index: 5; font-size: 14px; line-height: 1.6; white-space: pre-wrap; }
.lp-react b { display: block; font-size: 11px; color: var(--wine); margin-bottom: 2px; }
.btn.light { background: var(--cream); color: var(--wine); }
.sheet-btn.on { outline: 1.5px solid var(--wine); }
.np-pill { position: absolute; top: calc(var(--top) + 4px); left: 50%; transform: translateX(-50%); z-index: 25; height: 30px; max-width: 70%; padding: 0 14px; border-radius: 15px; background: var(--ink); color: var(--cream); display: flex; align-items: center; gap: 6px; font-size: 12px; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.np-pill span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-pill[hidden] { display: none; }

/* 一起看 */
.wv-stage { flex-shrink: 0; aspect-ratio: 16 / 9; background: #000; }
.wv-stage video, .wv-host, .wv-stage iframe { width: 100%; height: 100%; display: block; border: 0; }
.wv-title { flex-shrink: 0; padding: 12px 16px 0; font-family: var(--serif); font-size: 16px; font-weight: 600; line-height: 1.4; }
.wv-sub { flex-shrink: 0; min-height: 22px; padding: 6px 16px 0; font-size: 14px; color: var(--wine); }
.wv-info { padding: 0 16px 90px; }
.wv-desc { font-size: 13px; line-height: 1.7; color: var(--muted); white-space: pre-wrap; }
.shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; }
.book { display: flex; flex-direction: column; gap: 6px; text-align: left; min-width: 0; }
.book .cover { aspect-ratio: 2 / 3; border-radius: 4px 10px 10px 4px; background: var(--wine); color: var(--cream); display: flex; align-items: center; justify-content: center; padding: 10px; text-align: center; font-family: var(--serif); font-size: 13px; line-height: 1.4; box-shadow: inset 6px 0 0 rgba(0,0,0,.15), 0 4px 12px rgba(62,16,22,.18); overflow: hidden; }
.book .cover span { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.book:nth-child(3n+2) .cover { background: #8A4B4E; }
.book:nth-child(3n) .cover { background: #4A2A2E; }
.book b { font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.book small { font-size: 11px; color: var(--muted); }
.rd { padding: 18px 22px 120px; max-width: 680px; margin: 0 auto; }
.rd-head { text-align: center; margin-bottom: 20px; }
.rd-head small { font-size: 11px; color: var(--muted); }
.rd-head h2 { font-family: var(--serif); font-size: 20px; margin: 6px 0; line-height: 1.5; }
.rd-p { font-family: var(--serif); font-size: 16.5px; line-height: 1.95; margin: 0 0 14px; text-align: justify; cursor: pointer; border-radius: 4px; }
.rd-p.hl { background: linear-gradient(transparent 55%, rgba(178,58,72,.22) 55%); }
.rd-note { margin: -6px 0 16px 18px; padding: 8px 12px; border-left: 2px solid var(--wine); background: rgba(246,239,230,.8); border-radius: 0 12px 12px 0; font-family: var(--hand); font-size: 14.5px; line-height: 1.6; transform: rotate(-.6deg); }
.rd-note b { display: block; font-family: var(--sans); font-size: 10.5px; font-weight: 500; color: var(--wine); }
.rd-note.mine { border-left-color: #9C7F78; transform: rotate(.5deg); }
.rd-note.mine b { color: var(--muted); }
.rd a { color: var(--wine); }

/* 線下模式 */
.of-title { flex: 1; min-width: 0; font-family: var(--serif); font-size: 16px; font-weight: 600; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.of-title small { font-family: var(--sans); font-weight: 400; font-size: 11px; color: var(--muted); margin-left: 4px; }
.of-body { flex: 1; overflow-y: auto; padding: 14px 14px 20px; display: flex; flex-direction: column; gap: 12px; }
.of-msg { background: var(--paper); border-radius: 16px; padding: 12px 15px; box-shadow: 0 1px 6px rgba(62,16,22,.05); }
.of-msg.me { background: rgba(246,239,230,.6); border: 1px solid var(--line); }
.of-name { font-size: 12px; font-weight: 500; color: var(--wine); margin-bottom: 4px; }
.of-msg.me .of-name { color: var(--muted); }
.of-text { font-family: var(--serif); font-size: 15.5px; line-height: 1.85; word-break: break-word; }
.of-text em { color: var(--muted); }
.of-text .q { color: var(--wine); }
.of-swipe { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 6px; font-size: 11px; color: var(--muted); }
.of-swipe button { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; color: var(--wine); border-radius: 50%; }
.of-input { flex-shrink: 0; display: flex; align-items: flex-end; gap: 4px; padding: 8px 8px calc(var(--bottom) + 6px); border-top: 1px solid var(--line); background: var(--ground); }
.of-input textarea { flex: 1; min-width: 0; min-height: 42px; max-height: 140px; resize: none; border: 0; border-radius: 18px; background: var(--cream); padding: 10px 14px; font-size: 15px; line-height: 1.45; outline: none; font-family: var(--serif); }
.of-input .send { background: var(--wine); color: var(--cream); width: 42px; height: 42px; }

/* 筆記 */
.note-grid { padding: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.note-card { background: var(--paper); border-radius: 4px 4px 16px 4px; padding: 14px; display: flex; flex-direction: column; gap: 6px; text-align: left; box-shadow: 0 3px 10px rgba(62,16,22,.07); min-width: 0; }
.note-card:nth-child(odd) { transform: rotate(-.6deg); }
.note-card:nth-child(even) { transform: rotate(.6deg); }
.note-card.his { background: #F3E3DF; }
.note-card b { font-family: var(--serif); font-size: 14px; }
.note-card .nc-body { font-family: var(--hand); font-size: 14px; line-height: 1.6; white-space: pre-wrap; max-height: 180px; overflow: hidden; }
.note-card small { font-size: 10.5px; color: var(--muted); }
.note-full { margin: 16px; background: var(--paper); border-radius: 6px 6px 20px 6px; padding: 20px; box-shadow: 0 4px 16px rgba(62,16,22,.08); }
.note-full.his { background: #F3E3DF; }
.note-full .nf-body { font-family: var(--hand); font-size: 17px; line-height: 1.8; white-space: pre-wrap; margin-bottom: 10px; }
.note-full small { font-size: 11px; color: var(--muted); }
.note-comment { background: var(--cream); border-radius: 14px; padding: 10px 13px; font-size: 14px; line-height: 1.6; }
.note-comment b { display: block; font-size: 11px; color: var(--muted); font-weight: 500; }
.note-comment.his b { color: var(--wine); }

/* 錢包、每日一問 */
.wallet-card { background: var(--wine); color: var(--cream); border-radius: 22px; padding: 20px; display: flex; flex-direction: column; gap: 4px; }
.wallet-card small { font-size: 12px; opacity: .8; }
.wallet-card b { font-family: var(--display); font-size: 36px; font-weight: 600; }
.wc-actions { display: flex; gap: 8px; margin-top: 10px; }
.wc-actions .btn.ghost { color: var(--cream); border-color: rgba(246,239,230,.5); }
.qa-card { background: var(--paper); border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.qa-card.small { padding: 14px; gap: 8px; }
.qa-card > small { font-size: 11px; color: var(--muted); }
.qa-q { font-family: var(--serif); font-size: 18px; font-weight: 600; line-height: 1.5; color: var(--wine); }
.qa-card.small .qa-q { font-size: 15px; }
.qa-ans { background: var(--cream); border-radius: 14px; padding: 10px 13px; font-size: 14px; line-height: 1.65; white-space: pre-wrap; }
.qa-ans b { display: block; font-size: 11px; color: var(--muted); font-weight: 500; }
.qa-ans.his b { color: var(--wine); }
.qa-btns { display: flex; gap: 8px; justify-content: center; }

/* 聊天裡的新卡片 */
.card-song { display: flex; align-items: center; gap: 10px; padding: 10px 12px; width: 250px; }
.card-song .cs-ico { width: 40px; height: 40px; border-radius: 10px; background: var(--wine); color: var(--cream); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.card-song .info { flex: 1; min-width: 0; font-size: 13px; }
.card-song small { font-size: 10.5px; color: var(--muted); }
.card-note { width: 210px; background: var(--paper); }
.card-note .cn-paper { padding: 14px; font-family: var(--hand); font-size: 15px; line-height: 1.6; white-space: pre-wrap; background: #F3E3DF; }
.card-note .info { padding: 7px 12px; font-size: 10.5px; color: var(--muted); display: flex; gap: 4px; align-items: center; }
.card-activity { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; width: auto; max-width: 260px; color: var(--muted); }
.row.me .card-activity { background: rgba(246,239,230,.75); }
.card-activity img { width: 76px; border-radius: 8px; flex-shrink: 0; }
.card-activity .info { min-width: 0; font-size: 13px; color: var(--ink); display: flex; flex-direction: column; gap: 3px; }
.card-activity small { font-size: 11px; color: var(--muted); }
.ca-lyric { font-family: var(--serif); color: var(--wine); }