/* Điện thoại mẫu manseru. Phần "Khung máy" chép NGUYÊN từ dbr-web/public/phone.css (khung iPhone dùng chung của mọi web DBR:
   cùng viền, cỡ, Dynamic Island, thanh trạng thái); chỉ giữ font icon Feather (fe). Phần manseru viết lại theo app 1.9.9.
   Mọi số đo bên trong máy là điểm (pt) thật của iPhone 390×844; cả máy được thu nhỏ bằng --k.
   Không có style nội tuyến (CSP style-src 'self'); màu / toạ độ riêng do phone.js đặt qua CSSOM. */
/* ═════════════ Khung máy ═════════════ */
@font-face { font-family: 'fe'; src: url('/m/fe.woff') format('woff'); font-display: block; }

.phf { --k: 0.72; position: relative; flex: none; width: calc(422px * var(--k)); height: calc(876px * var(--k)); -webkit-tap-highlight-color: transparent; }
.phf.land { --k: 0.62; width: calc(876px * var(--k)); height: calc(422px * var(--k)); }
.ph-dev {
  position: absolute; left: 0; top: 0; width: 422px; height: 876px; padding: 16px; border-radius: 70px;
  transform: scale(var(--k)); transform-origin: 0 0;
  background: linear-gradient(150deg, #3a3a3f 0%, #1c1c1f 22%, #121214 60%, #2a2a2e 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.16), inset 0 0 0 6px #0b0b0c, 0 60px 90px -40px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.6);
}
.ph-dev::before, .ph-dev::after { content: ''; position: absolute; width: 4px; border-radius: 2px; background: #2a2a2e; }
.ph-dev::before { left: -3px; top: 190px; height: 64px; box-shadow: 0 84px 0 #2a2a2e; }
.ph-dev::after { right: -3px; top: 240px; height: 100px; }
.phf.land .ph-dev { width: 876px; height: 422px; }
.phf.land .ph-dev::before { left: 190px; top: -3px; width: 64px; height: 4px; box-shadow: 84px 0 0 #2a2a2e; }
.phf.land .ph-dev::after { left: 240px; right: auto; top: auto; bottom: -3px; width: 100px; height: 4px; }

.ph-scr { position: relative; width: 390px; height: 844px; border-radius: 54px; overflow: hidden; isolation: isolate; background: var(--bg, #000); color: var(--tx, #fff); font: 400 16px/1.3 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; text-align: left; }
.phf.land .ph-scr { width: 844px; height: 390px; }
.ph-scr * { box-sizing: border-box; }
:where(.ph-scr) :is(p, h4, ul, figure) { margin: 0; padding: 0; }
:where(.ph-scr) ul { list-style: none; }
:where(.ph-scr) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; -webkit-tap-highlight-color: transparent; }
:where(.ph-scr) input { font: inherit; color: inherit; background: none; border: 0; outline: 0; padding: 0; min-width: 0; }
.ph-scr button:focus-visible, .ph-scr input:focus-visible { outline: 3px solid var(--focus, #3b82f6); outline-offset: 2px; }
.ph-scr [hidden] { display: none !important; }
.ph-scr .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ph-scr .i { font-style: normal; font-weight: normal; line-height: 1; display: inline-block; flex: none; speak: never; -webkit-font-smoothing: antialiased; }

.scr { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }
.scr::-webkit-scrollbar { display: none; }
.ph-nav { position: absolute; inset: auto 0 0; z-index: 30; pointer-events: none; }
.ph-nav > * { pointer-events: auto; }
.ph-scr.nonav .ph-nav { display: none; }

/* Thanh trạng thái + Dynamic Island + thanh Home */
.ph-island { position: absolute; z-index: 60; top: 11px; left: 50%; width: 126px; height: 37px; margin-left: -63px; border-radius: 20px; background: #000; pointer-events: none; }
.phf.land .ph-island { top: 50%; left: 11px; width: 37px; height: 126px; margin: -63px 0 0; }
.sb { position: absolute; z-index: 55; top: 0; left: 0; right: 0; height: 54px; padding: 0 30px 0 0; display: flex; align-items: center; justify-content: space-between; color: #000; pointer-events: none; transition: color 0.2s; }
.ph-scr[data-sbm='light'] .sb { color: #fff; }
.sb-t { width: 140px; padding-top: 5px; text-align: center; font: 600 17px/1 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; letter-spacing: -0.2px; }
.sb-r { display: flex; align-items: center; gap: 6px; padding-top: 5px; }
.sb-sig { width: 18px; height: 12px; background: linear-gradient(to right, currentColor 0 3px, transparent 3px 5px, currentColor 5px 8px, transparent 8px 10px, currentColor 10px 13px, transparent 13px 15px, currentColor 15px 18px); clip-path: polygon(0 75%, 17% 75%, 17% 50%, 44% 50%, 44% 25%, 72% 25%, 72% 0, 100% 0, 100% 100%, 0 100%); }
.sb-wifi { width: 17px; height: 12px; background: currentColor; clip-path: path('M8.5 12 5.6 8.9a4.2 4.2 0 0 1 5.8 0zM3.5 6.8a7.2 7.2 0 0 1 10 0l-1.5 1.5a5.1 5.1 0 0 0-7 0zM1.4 4.6a10.2 10.2 0 0 1 14.2 0l1.4-1.5a12.3 12.3 0 0 0-17 0z'); }
.sb-bat { position: relative; width: 27px; height: 13px; border: 1.3px solid currentColor; border-radius: 4px; opacity: 0.95; }
.sb-bat::before { content: ''; position: absolute; inset: 1.5px 4px 1.5px 1.5px; border-radius: 1.5px; background: currentColor; }
.sb-bat::after { content: ''; position: absolute; right: -4px; top: 3.5px; width: 2px; height: 4px; border-radius: 0 1px 1px 0; background: currentColor; opacity: 0.6; }
.ph-home { position: absolute; z-index: 55; bottom: 8px; left: 50%; width: 139px; height: 5px; margin-left: -70px; border-radius: 3px; background: #000; pointer-events: none; }
.ph-scr[data-sbm='light'] .ph-home { background: #fff; }
.phf.land .ph-home { width: 200px; margin-left: -100px; background: rgba(255, 255, 255, 0.8); }

.ph-toast { position: absolute; z-index: 70; left: 50%; bottom: 130px; width: max-content; max-width: 300px; padding: 11px 18px; border-radius: 999px; background: rgba(20, 20, 22, 0.92); color: #fff; font: 500 15px/1.3 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; text-align: center; opacity: 0; transform: translate(-50%, 10px); transition: opacity 0.25s, transform 0.25s; pointer-events: none; }
.ph-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* Vào màn */
@media (prefers-reduced-motion: no-preference) {
  .scr.enter { animation: ph-in 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .scr.enter.back { animation-name: ph-back; }
  .pop { animation: ph-pop 0.34s cubic-bezier(0.2, 0.8, 0.2, 1.2) both; }
  @keyframes ph-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
  @keyframes ph-back { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
  @keyframes ph-pop { from { opacity: 0; transform: scale(0.96) translateY(6px); } to { opacity: 1; transform: none; } }
}

/* Cỡ máy theo màn hình trang */
@media (max-width: 1100px) { .phf.land { --k: 0.56; } }
@media (max-width: 820px) { .phf.land { --k: 0.5; } }
@media (max-width: 600px) { .phf { --k: 0.78; } .phf.land { --k: 0.38; } }
@media (max-width: 370px) { .phf { --k: 0.7; } .phf.land { --k: 0.34; } }
@media (max-width: 330px) { .phf { --k: 0.62; } .phf.land { --k: 0.3; } }

.i.fe { font-family: 'fe'; }

/* ═════════════ manseru — "wabi-sabi nổi" (src/lib/theme.ts): bản tối đen nhám mặc định, Cài đặt → Sáng = trắng sữa ═════════════ */
.app-manseru {
  --bg: #151515; --paper: #1e1e1e; --sunk: #0e0e0e; --tray: #1b1b1b; --ink: #ecebe7; --t2: #c4c3be; --mu: #8f8e89; --fa: #5f5e5a;
  --line: rgba(255, 255, 255, 0.07); --matcha: #8fb0a2; --kaki: #edebe6; --ai: #8ca6c8; --danger: #d47a6a; --now: #edebe6; --on: #151515;
  --cink: #f2f1ed; --csub: rgba(242, 241, 237, 0.62); --sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 55%);
  --raise: 8px 10px 26px rgba(0, 0, 0, 0.6), -6px -6px 16px rgba(255, 255, 255, 0.035), inset 1px 1px 1px rgba(255, 255, 255, 0.06);
  --raiseS: 4px 5px 14px rgba(0, 0, 0, 0.55), -4px -4px 10px rgba(255, 255, 255, 0.03), inset 1px 1px 0 rgba(255, 255, 255, 0.055);
  --lift: 12px 16px 30px rgba(0, 0, 0, 0.7), -4px -4px 12px rgba(255, 255, 255, 0.04);
  --insetS: inset 2px 2px 5px rgba(0, 0, 0, 0.7), inset -2px -2px 4px rgba(255, 255, 255, 0.035);
  --groove: inset 4px 4px 10px rgba(0, 0, 0, 0.7), inset 0 -3px 7px rgba(0, 0, 0, 0.55), inset -3px -3px 8px rgba(255, 255, 255, 0.035);
  --pressed: #181818; --tx: var(--ink); --focus: #edebe6;
  font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, sans-serif; transition: background-color 0.3s;
}
.app-manseru.ms-light {
  --bg: #f2f0eb; --paper: #faf9f6; --sunk: #e9e6e0; --tray: #f7f5f2; --ink: #2b2621; --t2: #574f46; --mu: #887e71; --fa: #b3a998;
  --line: rgba(60, 48, 36, 0.08); --matcha: #5e7f72; --kaki: #c2643a; --ai: #2f4a6b; --danger: #a4473a; --now: #c2643a; --on: #fff8f0;
  --cink: #2b2621; --csub: #574f46; --sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 55%);
  --raise: 8px 10px 26px rgba(105, 95, 80, 0.13), -8px -8px 20px rgba(255, 255, 255, 0.96), inset 1px 1px 1px rgba(255, 255, 255, 0.85);
  --raiseS: 4px 5px 14px rgba(105, 95, 80, 0.13), -4px -4px 11px rgba(255, 255, 255, 0.96), inset 1px 1px 0 rgba(255, 255, 255, 0.85);
  --lift: 12px 16px 30px rgba(100, 90, 75, 0.22), -6px -6px 16px rgba(255, 255, 255, 0.85);
  --insetS: inset 2px 2px 5px rgba(105, 95, 80, 0.16), inset -2px -2px 5px rgba(255, 255, 255, 0.9);
  --groove: inset 4px 4px 10px rgba(105, 95, 80, 0.15), inset 0 -3px 6px rgba(105, 95, 80, 0.11), inset -4px -4px 10px rgba(255, 255, 255, 0.9);
  --pressed: #eeedea; --focus: #c2643a;
}
.app-manseru .i { font-size: 17px; }
.ms-lbl { display: block; font-weight: 500; font-size: 10.5px; line-height: 14px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--mu); }
.ms-lbl.acc { color: var(--kaki); }
.ms-lbl.mat { color: var(--matcha); }
.ms-ib { flex: none; min-width: 44px; height: 44px; padding: 0; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--paper); box-shadow: var(--raiseS); color: var(--t2); }
.ms-ib.acc { color: var(--kaki); }
/* Nút đang bật: lún nhẹ (p.pressed + insetS, components/ui.tsx IconBtn active), không đen */
.ms-ib.on { background: var(--pressed); box-shadow: var(--insetS); color: var(--ink); }
.ms-ib b { font-weight: 500; font-size: 13px; }
.ms-slab { flex: none; height: 44px; padding: 0 12px; border-radius: 14px; display: inline-flex; align-items: center; gap: 6px; background: var(--paper); box-shadow: var(--raiseS); font-weight: 500; font-size: 13.5px; letter-spacing: 0.2px; color: var(--ink); }
.ms-slab .i { font-size: 15px; color: var(--t2); }
.ms-seg { position: relative; display: flex; padding: 3px; border-radius: 13px; background: var(--sunk); box-shadow: var(--insetS); }
.ms-seg button { flex: 1 1 auto; min-height: 40px; padding: 0 8px; border-radius: 10px; font-size: 12.5px; color: var(--mu); white-space: nowrap; text-align: center; transition: background-color 0.2s, box-shadow 0.2s, color 0.2s; }
.ms-seg button.on { background: var(--paper); box-shadow: var(--raiseS); color: var(--ink); font-weight: 500; }
.ms-pad { padding: 54px 0 120px; }
.ms-hdr { display: flex; align-items: center; gap: 8px; padding: 16px 20px 12px; }
.ms-hdr > b { flex: 1; min-width: 0; font-family: 'Noto Serif', Georgia, serif; font-weight: 400; font-size: 24px; line-height: 33px; }
.ms-hdr.c { padding: 8px 16px 10px; }
.ms-hdr .ms-seg button { padding: 0 9px; }
.tg { font-style: normal; display: inline-flex; align-items: center; height: 19px; padding: 0 7px; border-radius: 7px; font-weight: 500; font-size: 10.5px; color: var(--mu); background: color-mix(in srgb, currentColor 13%, transparent); white-space: nowrap; }
.tg.fill { background: var(--matcha); color: var(--on); }
.tg.acc { color: var(--kaki); }
.tg.ai { color: var(--ai); }

/* ── Lịch ── */
.scr[data-s='cal'], .scr[data-s^='spread'], .scr[data-s='gantt'], .scr[data-s='kaito'], .scr[data-s='conv'] { overflow: hidden; }
.ms-cal { position: absolute; inset: 0; display: flex; flex-direction: column; padding-bottom: 98px; }
.ms-spread { padding-bottom: 30px; }
.ms-top { padding: 64px 16px 0; }
.ms-r1 { display: flex; align-items: center; gap: 6px; }
.ms-dt { flex: 1; min-width: 0; }
.ms-dt b { display: block; font-family: 'Noto Serif', Georgia, serif; font-weight: 400; font-size: 22px; line-height: 29px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-dt .ms-sub { display: block; font-size: 11.5px; line-height: 15px; color: var(--mu); }
.ms-r2 { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.ms-r2 > .ms-seg:first-child { flex: 1; min-width: 0; }
/* Lịch trên máy hẹp (< 400 pt, index.tsx: tight=2, nút 40×40, gap 6): kiểu xem + 3 nút vuông (trải ngang, chọn nhiều, lọc) */
.ms-r2:not(.wr) { gap: 6px; }
.ms-r2:not(.wr) > .ms-ib { min-width: 40px; width: 40px; height: 40px; }
.ms-r2:not(.wr) > .ms-ib .i { font-size: 15px; }
.ms-r2:not(.wr) > .ms-seg:first-child { overflow-x: auto; scrollbar-width: none; }
.ms-r2:not(.wr) > .ms-seg:first-child button { padding: 0 2px; font-size: 12px; min-height: 36px; }
.ms-r2.wr { flex-wrap: wrap; gap: 10px; }
.ms-r2.wr > .ms-seg { flex: none; }
.ms-r2.wr .ms-seg button { padding: 0 7px; font-size: 12px; }
.ms-filter { display: flex; justify-content: space-between; gap: 10px; padding: 14px 0 2px; }
.ms-fl { display: grid; gap: 8px; align-content: space-between; }
.ms-tgl { display: flex; align-items: center; }
.ms-tgl span { width: 84px; font-size: 13px; color: var(--t2); }
.ms-fr { display: grid; gap: 12px; justify-items: end; }
.ms-zr { display: flex; align-items: center; gap: 10px; width: 100%; }
.ms-zr small { flex: 1; align-self: flex-end; margin-bottom: -6px; padding-left: 4px; font-size: 13px; color: var(--mu); }
.ms-zr .i { font-size: 15px; }
.ms-seg-e button { flex: none; width: 66px; padding: 0; }
.ms-sw { position: relative; flex: none; width: 50px; height: 30px; border-radius: 15px; background: var(--sunk); box-shadow: var(--insetS); transition: background-color 0.2s; }
.ms-sw i { position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 12px; background: var(--paper); box-shadow: var(--raiseS); transition: transform 0.25s cubic-bezier(0.3, 1.3, 0.5, 1); }
.ms-sw.on { background: color-mix(in srgb, var(--matcha) 55%, var(--sunk)); }
.ms-sw.on i { transform: translateX(20px); }
.ms-dh { display: flex; padding: 14px 12px 6px 52px; }
.ms-dh span { flex: 1; display: grid; justify-items: center; gap: 3px; }
.ms-dh small { font-size: 10.5px; letter-spacing: 0.4px; color: var(--mu); }
.ms-dh b { width: 30px; height: 30px; border-radius: 15px; display: grid; place-items: center; font-family: 'Noto Serif', serif; font-weight: 400; font-size: 15px; }
.ms-dh .today small { color: var(--kaki); }
.ms-dh .today b { background: var(--kaki); color: var(--on); box-shadow: var(--raiseS); }
.ms-tg { position: relative; flex: 1; min-height: 0; margin: 0 8px; }
.ms-tg.sp { margin-top: 14px; }
.ms-traybg, .ms-shade { position: absolute; left: 40px; right: 0; top: 0; bottom: 0; border-radius: 14px; pointer-events: none; }
.ms-traybg { background: var(--tray); }
.ms-shade { z-index: 80; box-shadow: var(--groove); }
.ms-ts { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; border-radius: 14px; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 7px, #000 calc(100% - 7px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 7px, #000 calc(100% - 7px), transparent 100%); }
.ms-ts::-webkit-scrollbar { display: none; }
.ms-tc { position: relative; display: flex; height: 1070px; }
.ms-gut { position: relative; width: 44px; flex: none; }
.ms-gut small { position: absolute; right: 8px; font-size: 10px; line-height: 14px; color: var(--mu); }
.ms-cols { position: relative; flex: 1; display: flex; margin-right: 4px; }
.ms-lines i { position: absolute; left: 0; right: 0; height: 1px; background: var(--line); }
.ms-col { position: relative; flex: 1; min-width: 0; border-left: 1px solid var(--line); }
.ms-col:first-of-type, .ms-col.one { border-left: 0; }
.ms-box { position: absolute; left: 4px; right: 4px; z-index: 1; display: block; padding: 3px 7px 0; border-radius: 9px; overflow: hidden; background-color: var(--tray); background-image: repeating-linear-gradient(180deg, transparent 0 43px, var(--line) 43px 44px); box-shadow: var(--groove); text-align: left; transition: transform 0.15s; }
.ms-box span { display: flex; align-items: center; gap: 4px; }
.ms-box .i { font-size: 11px; color: var(--mu); }
.ms-box small { flex: 1; min-width: 0; font-size: 10px; line-height: 14px; color: var(--fa); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-box:active { transform: scale(0.988); }
.ms-box.sel { outline: 1px solid color-mix(in srgb, var(--ink) 60%, transparent); outline-offset: -1px; }
.nobox .ms-box { display: none; }
.noplan .ms-ev { display: none; }
.ms-ev { position: absolute; left: 3px; right: 3px; display: flex; flex-direction: column; padding: 3px 5px 3px 8px; border-radius: 9px; overflow: hidden; background-color: var(--c); background-image: var(--sheen); box-shadow: var(--raiseS); text-align: left; color: var(--cink); }
.ms-light .ms-ev, .ms-light .ms-tr, .ms-light .ms-gs, .ms-light .ms-gp { background-color: var(--c2); }
.ms-ev b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-weight: 500; font-size: 11.5px; line-height: 14px; }
.ms-ev.short b, .ms-ev.mid b { -webkit-line-clamp: 1; }
.ms-ev small { font-size: 10px; line-height: 13px; color: var(--csub); white-space: nowrap; }
.ms-ev.st { border: 1px solid var(--paper); }
.ms-ev:has(.ms-more) { padding-right: 32px; }
.ms-more { position: absolute; top: 3px; right: 4px; min-width: 24px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ink); color: var(--bg); font-style: normal; font-weight: 500; font-size: 10.5px; line-height: 18px; text-align: center; }
.ms-ev.sel { z-index: 60 !important; overflow: visible; box-shadow: var(--lift), 0 0 0 1px color-mix(in srgb, var(--c3) 90%, transparent); }
.ms-light .ms-ev.sel { box-shadow: var(--lift), 0 0 0 1px var(--ai); }
.ms-ev.sel::before, .ms-ev.sel::after { content: ''; position: absolute; left: 50%; width: 26px; height: 5px; margin-left: -13px; border-radius: 3px; background: var(--ink); box-shadow: 0 0 0 2px var(--bg); }
.ms-ev.sel::before { top: -3px; }
.ms-ev.sel::after { bottom: -3px; }
.ms-now { position: absolute; left: 0; right: 0; z-index: 30; height: 8px; display: flex; align-items: center; pointer-events: none; }
.ms-now::before { content: ''; width: 8px; height: 8px; border-radius: 4px; background: var(--now); }
.ms-now i { flex: 1; height: 1.5px; border-radius: 1px; background: var(--now); }
/* Thanh chọn (SelBar, TimeGrid.tsx): tầng 1 tên đầy đủ (xuống dòng, không cắt "…"), tầng 2 hàng nút + ↑ ↓ 🏷 ⧉ ✎ 🗑 ✕ */
.ms-selbar { position: absolute; z-index: 70; display: grid; gap: 0; width: max-content; max-width: 236px; padding: 4px; border-radius: 13px; background: var(--paper); box-shadow: var(--raise); }
.ms-selbar > b { min-width: 0; padding: 6px 9px; font-weight: 500; font-size: 13px; line-height: 18px; color: var(--ink); overflow-wrap: anywhere; }
.ms-sbr, .ms-sbo { display: flex; align-items: center; gap: 2px; }
.ms-sbo[hidden], .ms-sb-i[hidden] { display: none; }
.ms-sb-i { flex: none; height: 32px; width: 32px; padding: 0; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--t2); }
.ms-sb-i .i { font-size: 15px; }
.ms-sb-i[data-act='msdesel'] { color: var(--mu); }
.app-manseru .ph-toast.act { pointer-events: auto; }
.ph-toast button { margin-left: 2px; font: inherit; color: #edebe6; text-decoration: underline; text-underline-offset: 3px; }

/* ── Thời gian (Gantt) ── */
.ms-g { position: absolute; inset: 0; display: flex; flex-direction: column; padding-bottom: 96px; }
.ms-run { display: flex; align-items: center; gap: 10px; margin: 12px 16px 0; padding: 9px 8px 9px 14px; border-radius: 18px; background: var(--paper); box-shadow: var(--raise); }
.ms-run[hidden] { display: none; }
.ms-run .t { flex: 1; min-width: 0; }
.ms-run .ms-lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 1.2px; }
.ms-run .t b { display: block; font-weight: 500; font-size: 14.5px; line-height: 21px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-pulse { position: relative; flex: none; width: 14px; height: 14px; border-radius: 7px; background: color-mix(in srgb, var(--matcha) 25%, transparent); }
.ms-pulse::after { content: ''; position: absolute; inset: 3.5px; border-radius: 4px; background: var(--matcha); }
@media (prefers-reduced-motion: no-preference) { .ms-pulse { animation: ms-pulse 1.8s ease-in-out infinite; } @keyframes ms-pulse { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--matcha) 12%, transparent); } } }
.ms-tb { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 14px; font-size: 13px; color: var(--mu); }
.ms-tb .i { font-size: 14px; }
.ms-tb.raised { background: var(--paper); box-shadow: var(--raiseS); color: var(--ink); font-weight: 500; }
.ms-tb.mat, .ms-tb.mat .i { color: var(--matcha); }
.ms-tb.sm { height: 36px; padding: 0 9px; gap: 5px; }
.ms-tl { position: relative; flex: 1; min-height: 0; display: flex; margin-top: 12px; }
.ms-gl { position: relative; z-index: 3; flex: none; overflow: hidden; border-radius: 0 18px 18px 0; background: var(--paper); box-shadow: var(--raiseS); }
.ms-tl.nolab .ms-gl { display: none; }
.ms-tl.nolab .ms-gc { margin-left: 0; }
.ms-ghd { position: relative; height: 48px; }
.ms-glr { height: 40px; display: flex; align-items: center; gap: 5px; padding-right: 6px; }
.ms-glr .i { font-size: 13px; color: var(--mu); }
.ms-glr .dot { width: 8px; height: 8px; border-radius: 4px; background: var(--c); }
.ms-light .ms-glr .dot { background: var(--c2); }
.ms-glr.sec span { flex: 1; font-weight: 500; font-size: 10.5px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--mu); }
.ms-glr .ld { width: 14px; flex: none; display: flex; justify-content: center; }
.ms-pt { width: 4px; height: 4px; border-radius: 2px; background: var(--ai); opacity: 0.8; }
.ms-dia { width: 6px; height: 6px; transform: rotate(45deg); background: var(--ai); }
.ms-glr .t { flex: 1; min-width: 0; display: grid; }
.ms-glr .t small { font-size: 9.5px; line-height: 12px; color: var(--fa); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-glr .t b { font-weight: 400; font-size: 11.5px; line-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-glr.b .t b { font-weight: 500; }
.ms-glr.mu .t b { color: var(--mu); text-decoration: line-through; }
.ms-gc { position: relative; flex: 1; min-width: 0; overflow: hidden; margin-left: -14px; padding-left: 14px; background: var(--sunk); box-shadow: var(--insetS); }
.ms-gc .ms-ghd { border-bottom: 1px solid var(--line); }
.ms-gc .ms-ghd b { position: absolute; left: 6px; top: 7px; font-family: 'Noto Serif', serif; font-weight: 400; font-size: 13px; }
.ms-gc .ms-ghd small { position: absolute; top: 28px; font-size: 10px; color: var(--mu); }
.ms-gc .ms-ghd small.today { color: var(--kaki); font-weight: 500; }
.ms-gbody { position: relative; height: 480px; }
.ms-gv { position: absolute; top: -48px; bottom: 0; width: 1px; background: var(--line); }
.ms-gh { position: absolute; left: -14px; right: 0; height: 1px; background: var(--line); opacity: 0.6; }
.ms-dep { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.ms-dep path { fill: none; stroke: var(--t2); stroke-width: 1.2; opacity: 0.75; }
.ms-gs { position: absolute; height: 14px; overflow: hidden; border-radius: 5px; background-color: var(--c); background-image: var(--sheen); box-shadow: var(--raiseS); }
.ms-gs i { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--matcha) 45%, transparent); }
.ms-gb { position: absolute; left: -14px; right: 0; height: 40px; }
.ms-gb i { position: absolute; margin-left: 14px; border-radius: 3px; }
.ms-gp { background-color: var(--c); box-shadow: var(--raiseS); }
.ms-ga { background: var(--matcha); }
.ms-ga.run { box-shadow: inset -3px 0 0 var(--kaki); }
.ms-gm { position: absolute; width: 16px; height: 16px; }
.ms-gm i { display: block; width: 13px; height: 13px; margin: 1.5px; border-radius: 2.5px; transform: rotate(45deg); background: var(--kaki); box-shadow: var(--raiseS); }
.ms-gnow { position: absolute; z-index: 4; top: -20px; bottom: 0; width: 1.5px; background: var(--now); opacity: 0.8; pointer-events: none; }
.ms-gs.ms-gsel, .ms-gm.ms-gsel i { box-shadow: var(--raiseS), 0 0 0 1.5px var(--ink); }
.ms-gb.ms-gsel { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.ms-popbox { position: absolute; z-index: 40; left: 16px; right: 16px; bottom: 104px; }
.ms-pop { display: grid; gap: 6px; padding: 14px; border-radius: 18px; background: var(--paper); box-shadow: var(--lift); }
.ms-pop > small { font-size: 11px; color: var(--mu); }
.ms-pop > b { font-family: 'Noto Serif', serif; font-weight: 500; font-size: 16px; line-height: 23px; }
.ms-pop .ln { font-size: 13px; line-height: 18px; color: var(--t2); }
.ms-pop .tgs, .ms-pop .acts { display: flex; gap: 6px; flex-wrap: wrap; }
.ms-pop .acts { gap: 8px; margin-top: 4px; }

/* ── Việc ── */
.ms-add { display: flex; align-items: center; gap: 10px; margin: 12px 16px 0; padding: 0 14px; border-radius: 18px; background: var(--sunk); box-shadow: var(--insetS); }
.ms-add .i { font-size: 16px; color: var(--t2); }
.ms-add .srch { color: var(--mu); }
.ms-add input { flex: 1; padding: 12px 0; font-size: 15px; }
.ms-add input::placeholder, .ms-comp input::placeholder { color: var(--fa); }
.ms-add input:focus-visible, .ms-comp input:focus-visible { outline: 0; }
.ms-chips { display: flex; gap: 8px; padding: 12px 16px 14px; overflow-x: auto; scrollbar-width: none; }
.ms-chips::-webkit-scrollbar { display: none; }
.ms-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 12px; background: var(--paper); box-shadow: var(--raiseS); font-size: 13px; color: var(--t2); white-space: nowrap; }
.ms-chip .i { font-size: 13px; color: var(--mu); }
.ms-chip.on { background: var(--pressed); box-shadow: var(--insetS); color: var(--ink); font-weight: 500; }
.ms-chip.on .i { color: var(--ink); }
.ms-tr { margin: 5px 14px; border-radius: 20px; overflow: hidden; background-color: var(--c); background-image: var(--sheen); box-shadow: var(--raiseS); color: var(--cink); }
.ms-tr[hidden] { display: none; }
.ms-tr .in { display: flex; align-items: center; gap: 10px; padding: 11px 14px 11px 12px; }
.ms-tog { width: 18px; flex: none; display: flex; justify-content: center; color: var(--csub); }
.ms-tog .i { font-size: 15px; transition: transform 0.2s; }
.ms-tog[aria-expanded='false'] .i { transform: rotate(-90deg); }
.ms-chk { flex: none; font-size: 21px; color: var(--csub); display: grid; place-items: center; width: 22px; height: 22px; }
.ms-chk .i { font-size: 21px; }
.ms-chk .onl, .ms-chk.on .off { display: none; }
.ms-chk.on { color: var(--matcha); }
.ms-chk.on .onl { display: inline-block; }
.ms-chk.dia .ms-dia { width: 11px; height: 11px; background: none; border: 1.5px solid currentColor; border-radius: 2px; }
.ms-chk.dia.on .ms-dia { background: currentColor; }
.ms-tt { flex: 1; min-width: 0; display: grid; gap: 3px; }
.ms-tt b { font-weight: 400; font-size: 15px; line-height: 20px; }
.ms-tt b.m { font-weight: 500; }
.ms-tt .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ms-tt .meta small { min-width: 0; font-size: 12px; color: var(--csub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-tr.done .ms-tt b { color: var(--csub); text-decoration: line-through; }
.ms-tr .tg { color: var(--cink); }
.ms-tr .tg.acc { color: var(--kaki); }
.ms-tr .tg.ai { color: var(--ai); }
.ms-tr .tg.fill { color: var(--on); }
.ms-prog { flex: none; min-width: 44px; display: grid; justify-items: end; gap: 4px; }
.ms-prog small { font-weight: 500; font-size: 11px; color: var(--csub); }
.ms-prog > i { display: block; width: 44px; height: 5px; overflow: hidden; border-radius: 3px; background: var(--sunk); box-shadow: var(--insetS); }
.ms-prog > i > i { display: block; height: 5px; border-radius: 3px; background: var(--matcha); }

/* ── Tin nhắn + Kaito ── */
.ms-cv { display: flex; align-items: center; gap: 14px; width: calc(100% - 28px); margin: 5px 14px; padding: 12px; border-radius: 20px; background: var(--paper); box-shadow: var(--raiseS); transition: transform 0.15s; }
.ms-cv:active { transform: scale(0.985); }
.ms-av { flex: none; width: 44px; height: 44px; border-radius: 22px; display: grid; place-items: center; background: var(--paper); box-shadow: var(--raiseS); font-weight: 500; font-size: 15px; color: var(--t2); }
.ms-av.k { font-family: 'Shippori Mincho', 'Noto Serif', serif; font-size: 18.5px; color: var(--kaki); }
.ms-light .ms-av.k { background: var(--ink); color: var(--bg); }
.ms-cv .t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ms-cv .r1, .ms-cv .r2 { display: flex; align-items: center; gap: 6px; }
.ms-cv .r1 b { flex: 1; min-width: 0; font-weight: 400; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-cv .r1 b.u { font-weight: 500; }
.ms-cv .r1 small { font-size: 11.5px; color: var(--mu); }
.ms-cv .pin { font-size: 13px; color: var(--kaki); }
.ms-cv .r2 small { flex: 1; min-width: 0; font-size: 13px; color: var(--mu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-cv .r2 small.u { color: var(--ink); }
.ms-badge { flex: none; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--kaki); color: var(--on); font-style: normal; font-weight: 500; font-size: 11px; line-height: 20px; text-align: center; }
.ms-kai { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 54px 0 34px; }
.ms-ct { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.ms-ct .ms-av { width: 36px; height: 36px; font-size: 13px; }
.ms-ct .ms-av.k { font-size: 16px; }
.ms-ct b { font-family: 'Noto Serif', serif; font-weight: 400; font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-msgs { flex: 1; overflow-y: auto; scrollbar-width: none; padding: 8px 20px 14px; display: flex; flex-direction: column; gap: 12px; }
.ms-msgs::-webkit-scrollbar { display: none; }
.ms-day { align-self: center; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mu); }
.ms-hello { padding-top: 26px; font-family: 'Noto Serif', serif; font-size: 20px; line-height: 28px; }
.ms-sugs { display: grid; gap: 12px; margin-top: 8px; }
.ms-sugs button { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 16px; background: var(--paper); box-shadow: var(--raiseS); font-size: 14px; line-height: 19px; color: var(--t2); text-align: left; }
.ms-sugs .i { font-size: 14px; color: var(--kaki); }
.ms-me, .ms-o { max-width: 84%; padding: 10px 14px; font-size: 15px; line-height: 21px; }
.ms-me { align-self: flex-end; border-radius: 16px 16px 5px 16px; background: var(--paper); box-shadow: var(--raiseS); }
.ms-o { align-self: flex-start; border-radius: 16px 16px 16px 5px; background: var(--sunk); box-shadow: var(--insetS); }
.ms-me.att { padding: 10px 12px; }
.ms-tk { display: flex; align-items: center; gap: 10px; }
.ms-tk .i { font-size: 16px; color: var(--matcha); }
.ms-tk > span { display: grid; }
.ms-tk b { font-weight: 500; font-size: 14px; line-height: 19px; }
.ms-tk small { font-size: 12px; color: var(--mu); }
.ms-ai { display: grid; gap: 10px; }
.ms-ai > p { font-size: 15px; line-height: 23px; }
.ms-card { display: grid; gap: 4px; padding: 14px; border-radius: 16px; background: var(--paper); box-shadow: var(--raiseS); }
.ms-card.faded { box-shadow: var(--insetS); }
.ms-card.faded b { text-decoration: line-through; }
.ms-cs { display: flex; align-items: center; gap: 10px; }
.ms-cs .i { font-size: 15px; color: var(--matcha); }
.ms-cs b { font-weight: 500; font-size: 14px; }
.ms-card small { padding-left: 25px; font-size: 12px; line-height: 17px; color: var(--t2); }
.ms-ca { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 6px; }
.ms-ca small { font-size: 12px; color: var(--mu); }
.ms-comp { display: flex; align-items: center; gap: 8px; margin: 0 16px; padding: 6px 6px 6px 16px; border-radius: 18px; background: var(--sunk); box-shadow: var(--insetS); }
.ms-comp .clip { font-size: 17px; color: var(--mu); }
.ms-comp label { flex: 1; }
.ms-comp input { width: 100%; padding: 8px 0; font-size: 15px; }
.ms-send { flex: none; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--paper); box-shadow: var(--raiseS); }

/* ── Cài đặt ── */
.ms-sec { margin: 18px 24px 8px; }
.ms-acc { display: grid; gap: 2px; padding: 0 24px; }
.ms-acc b { font-family: 'Noto Serif', serif; font-weight: 500; font-size: 16px; }
.ms-acc small { font-size: 13px; color: var(--t2); }
.ms-sp { display: grid; gap: 8px; padding: 6px 16px 0; }
.ms-sm { padding-left: 4px; font-size: 13px; color: var(--t2); }
.ms-sm.tiny { font-size: 11px; line-height: 15px; color: var(--mu); }
.ms-sp .ms-seg.sm { justify-self: start; }
.ms-sp .ms-seg.sm button { min-height: 34px; font-size: 12px; padding: 0 10px; }
/* Thẻ việc trên lịch: 3 kiểu, mỗi kiểu xem trước 3 phân loại × (việc cha + việc con) */
.ms-cards { display: flex; flex-wrap: wrap; gap: 6px; }
.ms-ct-o { display: grid; gap: 6px; padding: 7px; border-radius: 14px; text-align: left; }
.ms-ct-o.on { background: var(--pressed); box-shadow: var(--insetS); }
.ms-ct-o .sw { display: flex; gap: 4px; }
.ms-ct-o .sw > span { display: grid; gap: 3px; }
.ms-ct-o .sw i { display: block; width: 24px; height: 13px; border-radius: 4px; background: var(--c) var(--sheen); box-shadow: var(--raiseS); }
.ms-light .ms-ct-o .sw i { background-color: var(--c2); }
.ms-ct-o small { max-width: 84px; font-size: 10.5px; line-height: 13px; color: var(--mu); }
.ms-ct-o.on small { color: var(--ink); }
.ms-slab2 { margin: 0 16px; padding: 4px 14px; border-radius: 16px; background: var(--paper); box-shadow: var(--raiseS); }
.ms-sw-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.ms-sw-row > span { flex: 1; display: grid; gap: 2px; }
.ms-sw-row b { font-weight: 400; font-size: 15px; }
.ms-sw-row small { font-size: 11px; line-height: 14px; color: var(--mu); }
.ms-rows { margin-top: 14px; }
.ms-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 0; border-top: 1px solid var(--line); font-size: 15px; }
.ms-row:first-child { border-top: 0; }
.ms-row .i { font-size: 17px; color: var(--t2); }
.ms-row span { flex: 1; text-align: left; }
.ms-row small { font-size: 13px; color: var(--mu); }
.ms-row .ms-chev { font-size: 16px; color: var(--fa); }

/* ── Thanh tab: phiến nổi, icon viền Feather, vạch nhấn trượt dưới mục đang mở (TabBar.tsx) ── */
.ms-navw { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 14px 28px; background: var(--paper); transition: background-color 0.3s; }
.ms-nav { position: relative; display: flex; border-radius: 24px; background: var(--paper); box-shadow: var(--raise); }
.ms-tab { flex: 1; min-height: 56px; display: grid; place-items: center; align-content: center; gap: 3px; padding: 9px 0; color: var(--fa); }
.ms-tab .i { font-size: 20px; }
.ms-tab span { font-size: 10px; letter-spacing: 0.2px; }
.ms-tab.on { color: var(--ink); }
.ms-tab.on span { font-weight: 500; }
.ms-mark { position: absolute; bottom: 5px; left: 10%; width: 18px; height: 2px; margin-left: -9px; border-radius: 1px; background: var(--kaki); transition: left 0.4s cubic-bezier(0.3, 1.3, 0.5, 1); }
.ph-scr[data-nav='gantt'] .ms-mark { left: 30%; } .ph-scr[data-nav='tasks'] .ms-mark { left: 50%; } .ph-scr[data-nav='chat'] .ms-mark { left: 70%; } .ph-scr[data-nav='settings'] .ms-mark { left: 90%; }