/* Nhận diện Thống Nhất — theo mockup/mockup.html, phương án A (nền sáng). Phông tự lưu, không gọi mạng ngoài.
   Lớp trạng thái do host.js gắn: body.incall · body[data-phase] · body.ready · body.busy · body.muted · body.haslog
   · #orb.live · #orb.speaking · #callBtn.end · #status.err · #status[data-clock] */
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url("fonts/BeVietnamPro-400.woff2") format("woff2")}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:500;font-display:swap;src:url("fonts/BeVietnamPro-500.woff2") format("woff2")}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url("fonts/BeVietnamPro-600.woff2") format("woff2")}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url("fonts/BeVietnamPro-700.woff2") format("woff2")}

:root{
  --tn-red:#E3302C; --tn-red-dark:#B8231F; --tn-red-tint-1:#FDECEB; --tn-red-tint-2:#F9D2CF;
  --ink:#1A1A1A; --text-2:#4A4A4A; --muted:#6B6B6B;
  --bg:#FFFFFF; --surface:#F5F5F4; --surface-2:#FAFAFA; --control:#F2F2F2; --border:#E5E5E5;
  --ok:#15803D; --delta-pos:#166534;
}
:root{
  --safe-t:max(env(safe-area-inset-top),12px); --safe-b:max(env(safe-area-inset-bottom),12px);
  --top-h:64px; --pad:24px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{height:100%;overflow:hidden}
html,body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 'Be Vietnam Pro',system-ui,sans-serif}
body{position:fixed;inset:0;overflow:hidden;display:flex;flex-direction:column}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ── Đầu trang: logo chữ bên trái, nút cài đặt bên phải; chip trạng thái (#status) ghim cạnh nút cài đặt ── */
.top{flex:none;position:relative;z-index:20;display:flex;align-items:center;justify-content:space-between;
  height:calc(var(--safe-t) + var(--top-h));padding:var(--safe-t) 13px 0 var(--pad);background:var(--bg)}
.hdr__logo{display:block;height:36px;width:auto}
.icon{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;color:var(--text-2)}
.icon svg{width:22px;height:22px}

.status{position:fixed;z-index:21;top:calc(var(--safe-t) + 16px);right:61px;max-width:calc(100vw - 232px);
  padding:7px 12px;border:1px solid var(--border);border-radius:16px;background:var(--bg);color:var(--text-2);
  font-size:13px;line-height:1.3;font-weight:500;font-variant-numeric:tabular-nums}
.status::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--muted);vertical-align:1px}
body.ready .status::before{background:var(--ok)}
body.incall .status{border-color:transparent;background:var(--tn-red-tint-1);color:var(--tn-red-dark);font-weight:600}
body.incall .status::before{background:var(--tn-red)}
/* Đồng hồ chỉ hiện khi đang trong cuộc gọi: host.js xoá data-clock chậm tới 1 giây sau khi kết thúc (PWA-SUA-2 T1) */
body[data-phase="live"] .status[data-clock]:not([data-clock=""])::after{content:" · " attr(data-clock)}
/* Lỗi, mất kết nối, chưa có quyền micro: dải thông báo nằm trong luồng trang, đủ chữ để chẩn đoán */
body .status.err{position:static;flex:none;max-width:none;margin:4px 0 12px;padding:12px 14px 12px 44px;border:0;border-radius:14px;
  background:var(--tn-red-tint-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8231F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") no-repeat 14px 12px/20px 20px;
  color:var(--ink);font-size:14px;line-height:1.45;font-weight:500;word-break:break-word}
body .status.err::before,body .status.err::after{content:none}

/* ── Bảng cài đặt (model, giọng). Ô chọn trợ lý ẩn nhưng vẫn nằm trong DOM vì host.js đọc nó ── */
.settings{position:absolute;z-index:19;top:calc(var(--safe-t) + var(--top-h));left:var(--pad);right:var(--pad);
  display:grid;gap:12px;padding:16px 18px;border-radius:18px;background:var(--surface);box-shadow:0 12px 32px rgba(26,26,26,.12)}
.settings label{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:500;color:var(--text-2)}
.settings select{flex:1;min-width:0;height:44px;padding:0 36px 0 12px;border:1px solid var(--border);border-radius:12px;
  background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A4A4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center/18px 18px;
  color:var(--ink);font-size:15px;-webkit-appearance:none;appearance:none}

/* ── Vùng giữa: phần duy nhất cuộn được ── */
/* Đệm đáy 40 = dải mờ 24 của .bottom::before + 16: cuộn hết thì mục cuối nằm hẳn phía trên dải mờ (PWA-SUA-3 U3) */
main{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 var(--pad) 40px}
.head{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center;gap:16px;background:var(--bg)}
.stage{display:flex;flex-direction:column;align-items:center;gap:22px;padding:12px 0;text-align:center}
.state__txt{display:flex;flex-direction:column;align-items:center;gap:6px}

/* Biểu tượng và các vòng tròn. --o vòng ngoài · --i vòng trong · --s biểu tượng */
.orb{--o:112px;--i:112px;--s:112px;--o-bg:transparent;--i-bg:transparent;
  position:relative;flex:none;display:grid;place-items:center;width:var(--o);height:var(--o);border-radius:50%;background:var(--o-bg);cursor:pointer}
.orb__in{display:grid;place-items:center;width:var(--i);height:var(--i);border-radius:50%;background:var(--i-bg)}
.orb__symbol{display:block;width:var(--s);height:var(--s)}
body.incall .orb{--o:168px;--i:128px;--s:88px;--o-bg:var(--tn-red-tint-1);--i-bg:var(--bg)}                 /* đang kết nối, nối lại */
body.incall .orb.live{--o:232px;--i:176px;--s:120px;--i-bg:var(--tn-red-tint-2)}                            /* S2, S4 */
body.busy .orb.live{--o:168px;--i:128px;--s:88px;--o-bg:var(--surface);--i-bg:#E9E9E7}                      /* S3 */
body.incall .orb:not(.live) .orb__symbol{animation:tn-wait 1.4s ease-in-out infinite}
/* host.js đổi border-width của .ring 10 lần/giây theo âm lượng (3–13px). Vòng đặt tuyệt đối, căn giữa quanh
   biểu tượng, viền lớn dần ra ngoài nên không xô lệch bố cục. */
.ring{display:none;position:absolute;top:50%;left:50%;box-sizing:content-box;width:var(--i);height:var(--i);
  border:3px solid var(--tn-red-tint-2);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;transition:border-width .1s linear}
.orb.live .ring{display:block}
body.busy .ring{display:none}

.hero__title{margin:10px 0 0;font-size:26px;line-height:1.25;font-weight:700;letter-spacing:-.01em}
.state__title,.state__busy{margin:0;font-size:28px;line-height:1.2;font-weight:700;letter-spacing:-.01em}
.sub{margin:0;font-size:15px;line-height:1.5;color:var(--text-2)}
.stage .sub{max-width:280px}
.label-caps{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* Chữ nào hiện ở trạng thái nào */
.state__title,.state__busy,.bars,.sub--listen,.sub--muted,.sub--error{display:none}
body[data-phase]:not([data-phase="idle"]) .hero__title,
body[data-phase]:not([data-phase="idle"]) .sub--idle{display:none}
body[data-phase]:not([data-phase="idle"]) .state__title{display:block}
body.busy[data-phase]:not([data-phase="idle"]) .state__title{display:none}
body.busy .state__busy{display:block}
body[data-phase="live"]:not(.busy):not(.muted) .orb:not(.speaking) ~ .state__txt .sub--listen{display:block}
body.muted:not(.busy) .sub--muted{display:block}
body[data-phase="error"] .sub--error{display:block}                       /* PWA-SUA-3 U2 */
/* Ví dụ câu hỏi ở màn chờ (PWA-SUA-3 U6): chữ tĩnh, không bấm được; ẩn khi đang gọi hoặc đã có hội thoại */
.eg{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:22px}
.eg__q{margin:0;font-size:15px;line-height:1.4;color:var(--ink)}
body[data-phase]:not([data-phase="idle"]) .eg,body.haslog .eg{display:none}
body:not(.busy) .orb.speaking ~ .state__txt .bars{display:flex}

/* Vạch âm thanh khi trợ lý đang nói */
.bars{align-items:center;gap:4px;height:28px}
.bars span{width:4px;border-radius:2px;background:var(--tn-red);transform-origin:center;animation:tn-bar 1s ease-in-out infinite}
.bars span:nth-child(1),.bars span:nth-child(5){height:10px}
.bars span:nth-child(2){height:20px;animation-delay:-.2s}
.bars span:nth-child(3){height:28px;animation-delay:-.4s}
.bars span:nth-child(4){height:16px;animation-delay:-.6s}
.bars span:nth-child(5){animation-delay:-.8s}
@keyframes tn-bar{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
@keyframes tn-wait{0%,100%{opacity:1}50%{opacity:.45}}

/* ── Thẻ câu hỏi đang tra (#card do host.js dựng) và thẻ duyệt ── */
.deleg{display:flex;flex-direction:column;gap:14px}
.deleg .sub{order:-1;margin-top:-12px;text-align:center}
.card{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border-radius:18px;background:var(--surface)}
.card__text{font-size:17px;line-height:1.4;font-weight:500;word-break:break-word}
body:not(.busy) .deleg>.card:first-child{flex-direction:row;align-items:baseline;gap:10px;padding:10px 16px;border-radius:14px}
body:not(.busy) .deleg>.card:first-child .label-caps{flex:none}
body:not(.busy) .deleg>.card:first-child .card__text{min-width:0;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:14px;color:var(--text-2)}  /* PWA-SUA-3 U5: tối đa 2 dòng */
.deleg code{padding:2px 6px;border-radius:6px;background:var(--bg);font-size:14px;word-break:break-all}
.deleg .row{display:flex;gap:10px;margin-top:8px}
.deleg button{flex:1;min-height:48px;padding:0 16px;border:1px solid var(--border);border-radius:999px;background:var(--bg);color:var(--ink);font-size:15px;font-weight:600}
.deleg button[data-a="once"]{border-color:var(--ink);background:var(--ink);color:#fff}

/* ── Dòng hội thoại: danh sách cuộn, không ẩn lượt cũ ── */
.transcript{list-style:none;display:flex;flex-direction:column;gap:14px;width:100%;margin:0;padding:0}
.transcript li{white-space:pre-wrap;word-wrap:break-word}
.transcript li.user{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border-radius:18px;background:var(--surface);font-size:18px;line-height:1.4;font-weight:500}
.transcript li.user::before{content:"Bạn vừa nói";font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.transcript li.assistant{padding:4px 0;font-size:20px;line-height:1.45;color:var(--ink)}
.transcript li.assistant b{font-weight:700}
.transcript li.system{font-size:13px;color:var(--muted);text-align:center}

/* Thẻ bản ghi số liệu: đầu thẻ là .cap, thân giữ nguyên nội dung hmFormat.written dựng ra */
.transcript li.note{white-space:normal;overflow:hidden;border:1px solid var(--border);border-radius:20px;font-size:15px;line-height:1.5;scroll-margin-top:84px}
.note .cap{margin-bottom:12px;padding:14px 18px;background:var(--surface);border-bottom:1px solid var(--border);
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.note>:not(.cap){margin-left:18px;margin-right:18px}
.note b{font-weight:700;font-variant-numeric:tabular-nums}
.note .h{margin-top:4px;font-weight:700}
.note .li{padding:10px 0 10px 16px;border-top:1px solid var(--border);text-indent:-16px;font-variant-numeric:tabular-nums}
.note .gap{height:8px}
/* Bảng (PWA-SUA-1 S3): thu gọn trước — chữ 13, đệm 8px 6px, cột đầu được xuống dòng, cột số một dòng và căn phải.
   Vẫn rộng hơn thẻ thì vuốt ngang ngay trong thẻ, cột đầu ghim bên trái. */
.note table{display:block;overflow-x:auto;margin-top:8px;margin-bottom:8px;font-size:13px;line-height:1.4;font-variant-numeric:tabular-nums;
  /* PWA-SUA-3 U4: bóng mờ ở mép phải khi còn cột chưa thấy. Lớp trên (local) là miếng che gắn vào mép phải của NỘI DUNG,
     lớp dưới (scroll) là bóng gắn vào mép phải của KHUNG: bảng vừa khung hoặc đã vuốt hết thì miếng che phủ kín bóng. */
  background:linear-gradient(to left,var(--bg) 50%,rgba(255,255,255,0)) right center/48px 100% no-repeat local,
    linear-gradient(to left,rgba(26,26,26,.13),rgba(26,26,26,0)) right center/20px 100% no-repeat scroll}
.note tbody,.note thead{display:table;min-width:100%;border-collapse:collapse}
.note th,.note td{padding:8px 6px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);text-align:right;white-space:nowrap;vertical-align:top}
.note th:first-child,.note td:first-child{position:sticky;left:0;padding-left:0;background:var(--bg);text-align:left;white-space:normal}
.note th:last-child,.note td:last-child{padding-right:0}
.note th{font-size:12px;font-weight:600;color:var(--muted)}
.note code,.note pre{border-radius:6px;background:var(--control);font-size:13px}
.note code{padding:1px 5px}
.note pre{overflow-x:auto;margin-top:6px;margin-bottom:6px;padding:8px}
.transcript li.note::after{content:"Bản viết đầy đủ của câu trả lời";display:block;margin-top:12px;padding:12px 18px;
  border-top:1px solid var(--border);background:var(--surface-2);font-size:12px;color:var(--muted)}

/* ── Đã có ít nhất một mục hội thoại: khối trạng thái thu thành một hàng gọn, ghim trên đầu vùng cuộn ── */
body.haslog .head{flex:none;position:sticky;top:0;z-index:2;justify-content:flex-start;gap:12px;padding:8px 0 14px}
body.haslog .stage{flex-direction:row;gap:12px;padding:0;text-align:left}
body.haslog .orb,body.haslog .orb.live{--o:44px;--i:44px;--s:44px;--o-bg:transparent;--i-bg:transparent}
body.haslog .ring{transform:translate(-50%,-50%) scale(.8)}
body.haslog .state__txt{flex:1;min-width:0;flex-direction:row;align-items:center;gap:12px}
body.haslog .hero__title,body.haslog .state__title,body.haslog .state__busy{margin:0;font-size:17px;line-height:1.3;letter-spacing:0}
body.haslog .stage .sub{display:none}
body.haslog .deleg .sub{margin-top:-6px;padding-left:56px;font-size:13px;text-align:left}

/* ── Đáy trang: ô gõ chữ (chỉ khi đang gọi) và hàng điều khiển ── */
.bottom{flex:none;position:relative;z-index:3;display:flex;flex-direction:column;gap:16px;padding:8px var(--pad) calc(var(--safe-b) + 20px);background:var(--bg)}
.bottom::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:24px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,0),var(--bg))}
.textform{display:none;min-width:0}
body.incall .textform{display:flex}
.textform input{flex:1;min-width:0;height:48px;padding:0 20px;border:0;border-radius:999px;background:var(--surface);color:var(--ink);font-size:16px}
.textform input::placeholder{color:var(--muted);opacity:1}
.ctl{display:flex;align-items:flex-start;justify-content:space-between}
body.incall .ctl{padding:0 12px}
body:not(.incall) .ctl__btn{display:none}

/* Nút chính khi chờ: viên đỏ "Bắt đầu gọi". host.js ghi đè chữ trong nút nên biểu tượng vẽ bằng ::before */
.call{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:64px;padding:0;border:0;border-radius:999px;
  background:var(--tn-red);color:#fff;font-size:19px;font-weight:700}
.call::before{content:"";flex:none;width:22px;height:22px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center/contain no-repeat}
.call:active{background:var(--tn-red-dark)}

/* Ba nút tròn khi đang gọi: Tắt tiếng 64 · Kết thúc 72 (nền mực, KHÔNG đỏ) · Bản ghi 64.
   Đang tắt tiếng (PWA-SUA-3 U1): nền hồng nhạt, viền hồng, mic gạch chéo màu đỏ — không trùng nền mực của nút Kết thúc */
.ctl__btn,.call.end{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;width:auto;min-width:72px;height:auto;
  padding:0;border:0;border-radius:12px;background:none;color:var(--ink);font-size:13px;line-height:1.3;font-weight:500}
.ctl__btn::before,.call.end::before{content:"";flex:none;width:64px;height:64px;border-radius:50%;background-color:var(--control);background-repeat:no-repeat;background-position:center;background-size:24px 24px}
.ctl__btn--mute::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2'/%3E%3Cline x1='12' y1='19' x2='12' y2='23'/%3E%3Cline x1='8' y1='23' x2='16' y2='23'/%3E%3C/svg%3E")}
body.muted .ctl__btn--mute::before{box-sizing:border-box;border:2px solid var(--tn-red-tint-2);background-color:var(--tn-red-tint-1);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E3302C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3Cpath d='M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6'/%3E%3Cpath d='M17 16.95A7 7 0 0 1 5 12v-2m14 0v2a7 7 0 0 1-.11 1.23'/%3E%3Cline x1='12' y1='19' x2='12' y2='23'/%3E%3Cline x1='8' y1='23' x2='16' y2='23'/%3E%3C/svg%3E")}
.ctl__btn--log::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01'/%3E%3C/svg%3E")}
.call.end{font-weight:600}
.call.end::before{width:72px;height:72px;background-color:var(--ink);background-size:28px 28px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.68 13.31a16 16 0 0 0 3.41 2.6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7 2 2 0 0 1 1.72 2v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.42 19.42 0 0 1-3.33-2.67m-2.67-3.34a19.79 19.79 0 0 1-3.07-8.63A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91'/%3E%3Cline x1='23' y1='1' x2='1' y2='23'/%3E%3C/svg%3E")}
.call.end:active{background:none}
.call.end:active::before,.ctl__btn:active::before{opacity:.8}
.ctl__btn:disabled{opacity:.4;cursor:default}

/* ── Màn hình hẹp hoặc thấp ── */
@media (max-width:389px){.hdr__logo{height:30px}.status{max-width:calc(100vw - 209px)}}
@media (max-width:340px){.hdr__logo{height:24px}.status{max-width:calc(100vw - 186px);padding:6px 9px;font-size:12px}}
@media (max-height:640px){
  body.incall .orb.live{--o:184px;--i:140px;--s:96px}
  body.busy .orb.live,body.incall .orb:not(.live){--o:136px;--i:104px;--s:72px}
  body.haslog .orb:not(.live),body.haslog .orb.live{--o:44px;--i:44px;--s:44px}
  .stage{gap:16px}
}

/* ── Giảm chuyển động: tắt vạch âm thanh, nhịp chờ và độ phập phồng của vòng tròn ── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .ring{border-width:3px!important}
}