/* Chat voi PHOEBE (10/10/2026, js/chat-widget.js). Nut vien thuoc den goc duoi trai; o chat noi
   kieu menu ben (css/menu.css). Trang SCARLETT (body.sc): do #360F0E + vang #E8BB84.
   Tu du, khong dua vao base.css (index.html khong nap base.css). */
.pcw-btn{ position:fixed; z-index:80; left:20px; bottom:calc(20px + env(safe-area-inset-bottom)); display:inline-flex; align-items:center; gap:9px;
  height:48px; padding:0 21px 0 17px; margin:0; border:0; border-radius:999px; background:#111; color:#fff;
  font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size:15px; font-weight:500; line-height:1; letter-spacing:.01em; cursor:pointer; box-shadow:0 6px 22px rgba(0,0,0,.16);
  -webkit-tap-highlight-color:transparent; opacity:1; visibility:visible; transform:none;
  transition:opacity .3s ease, visibility .3s, transform .35s cubic-bezier(.2,.7,.2,1), bottom .35s cubic-bezier(.2,.7,.2,1); }
.pcw-btn svg{ flex:none; display:block; }
.pcw-btn:hover{ background:#000; }
.pcw-btn:focus-visible{ outline:2px solid #C9A96A; outline-offset:3px; }
.pcw-btn.pcw-off{ opacity:0; visibility:hidden; transform:translateY(14px); pointer-events:none; }
.pcw-btn.pcw-up{ bottom:calc(var(--pcw-lift, 88px) + env(safe-area-inset-bottom)); }
body.sc .pcw-btn{ background:#E8BB84; color:#360F0E; }
body.sc .pcw-btn:hover{ background:#EFC895; }

.pcw-scrim{ display:none; }

.pcw{ position:fixed; z-index:93; left:20px; bottom:20px; width:380px; height:560px; max-width:calc(100vw - 40px); max-height:calc(100vh - 40px);
  display:flex; flex-direction:column; overflow:hidden; box-sizing:border-box; border-radius:8px;
  background:rgba(244,243,241,.98); color:#33383C; box-shadow:0 10px 40px rgba(0,0,0,.14);
  font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size:15px; line-height:1.45; text-align:left;
  opacity:0; visibility:hidden; transform:translateY(16px); transition:opacity .3s ease, visibility .3s, transform .4s cubic-bezier(.2,.7,.2,1); }
.pcw.show{ opacity:1; visibility:visible; transform:none; }
.pcw *, .pcw *::before, .pcw *::after{ box-sizing:border-box; }
.pcw button{ font-family:inherit; -webkit-tap-highlight-color:transparent; }

.pcw-hd{ flex:none; display:flex; align-items:center; gap:8px; padding:10px 8px 6px 22px; }
.pcw-brand{ flex:1; min-width:0; font-family:'Cinzel', 'Cormorant Garamond', 'Times New Roman', Georgia, serif; font-size:15px; letter-spacing:.16em; color:#1F3A5F; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pcw-out{ flex:none; min-height:44px; padding:0 10px; border:0; background:none; color:#7D6437; font-size:13px; cursor:pointer; }
.pcw-out[hidden]{ display:none; }
.pcw-x{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:0; background:none; color:#33383C; cursor:pointer; }

.pcw-body{ flex:1; min-height:0; display:flex; flex-direction:column; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.pcw-body.pcw-v-chat{ overflow:hidden; }
.pcw-pad{ padding:6px 22px 22px; }

.pcw-load{ flex:1; display:flex; align-items:center; justify-content:center; min-height:120px; }
.pcw-spin{ width:22px; height:22px; border-radius:50%; border:1.5px solid rgba(31,58,95,.18); border-top-color:#1F3A5F; animation:pcwSpin .8s linear infinite; }
@keyframes pcwSpin{ to{ transform:rotate(360deg); } }

/* tab gach chan */
.pcw-tabs{ display:flex; gap:26px; margin:0 0 20px; }
.pcw-tab{ position:relative; min-height:44px; padding:0 2px; border:0; background:none; font-size:15px; color:#6E6A65; cursor:pointer; }
.pcw-tab::after{ content:""; position:absolute; left:0; right:0; bottom:4px; height:2px; background:#C9A96A; transform:scaleX(0); transition:transform .3s cubic-bezier(.2,.7,.2,1); }
.pcw-tab.on{ color:#1F3A5F; font-weight:600; }
.pcw-tab.on::after{ transform:scaleX(1); }

.pcw-g{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:48px; padding:0 16px;
  border:1px solid #DCD8D1; border-radius:10px; background:#fff; color:#1F3A5F; font-size:15px; font-weight:500; cursor:pointer; }
.pcw-g svg{ flex:none; }
.pcw-or{ display:flex; align-items:center; gap:12px; margin:18px 0; color:#6E6A65; font-size:13px; }
.pcw-or::before, .pcw-or::after{ content:""; flex:1; height:1px; background:#E1DFDB; }

.pcw-form{ margin:0; }
.pcw-f{ display:block; margin:0 0 14px; }
.pcw-f span{ display:block; margin:0 0 6px; font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:#6E6A65; }
.pcw-f input{ display:block; width:100%; height:48px; margin:0; padding:0 14px; border:1px solid #DCD8D1; border-radius:10px; background:#fff;
  font-family:inherit; font-size:16px; color:#1F3A5F; outline:none; -webkit-appearance:none; appearance:none; transition:border-color .2s; }
.pcw-f input:focus{ border-color:#C9A96A; }

.pcw-btn1{ display:flex; align-items:center; justify-content:center; width:100%; min-height:50px; margin:6px 0 0; padding:0 20px;
  border:0; border-radius:10px; background:#C9A96A; color:#1F3A5F; font-size:15px; font-weight:600; letter-spacing:.02em; cursor:pointer; }
.pcw-btn1:hover{ filter:brightness(.96); }
.pcw button[disabled]{ opacity:.6; cursor:default; }
.pcw-link{ display:inline-flex; align-items:center; min-height:44px; margin:6px 0 0; padding:0; border:0; background:none; color:#7D6437; font-size:14px; cursor:pointer; }
.pcw-link:hover{ text-decoration:underline; text-underline-offset:4px; }

.pcw-h{ margin:4px 0 14px; font-family:'Cormorant Garamond', 'Times New Roman', Georgia, serif; font-weight:500; font-size:26px; line-height:1.15; color:#1F3A5F; }
.pcw-note{ margin:0 0 14px; font-size:15px; color:#3F3F3F; overflow-wrap:anywhere; }
.pcw-err, .pcw-ok{ display:none; margin:0 0 10px; font-size:14px; line-height:1.4; }
.pcw-err{ color:#A9563F; }
.pcw-ok{ color:#1F3A5F; }
.pcw-err.show, .pcw-ok.show{ display:block; }
.pcw-err--auth{ margin-top:12px; }
.pcw-err--chat{ flex:none; margin:0; padding:0 18px; }
.pcw-err--chat.show{ padding:6px 18px; }

/* tin nhan */
.pcw-list{ flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:8px 16px 12px; display:flex; flex-direction:column; }
.pcw-empty{ margin:auto 0; text-align:center; color:#6E6A65; font-size:14px; }
.pcw-day{ align-self:center; margin:12px 0 8px; font-size:12px; color:#6E6A65; }
.pcw-m{ display:flex; flex-direction:column; align-items:flex-start; max-width:82%; margin:0 0 3px; }
.pcw-m--end{ margin-bottom:10px; }
.pcw-m--me{ align-self:flex-end; align-items:flex-end; }
.pcw-bub{ padding:9px 13px; border-radius:16px; background:#fff; color:#33383C; font-size:15px; line-height:1.4; white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; }
.pcw-m--me .pcw-bub{ background:#1F3A5F; color:#fff; }
.pcw-t{ margin:4px 4px 0; font-size:12px; color:#6E6A65; }
.pcw-seen{ align-self:flex-end; margin:-4px 4px 4px; font-size:12px; color:#6E6A65; }

.pcw-comp{ flex:none; display:flex; align-items:flex-end; gap:8px; padding:10px 12px 12px 16px; border-top:1px solid #E1DFDB; }
.pcw-ta{ flex:1; min-width:0; display:block; height:44px; min-height:44px; max-height:132px; margin:0; padding:11px 14px; resize:none;
  border:1px solid #DCD8D1; border-radius:10px; background:#fff; font-family:inherit; font-size:16px; line-height:1.35; color:#1F3A5F; outline:none; }
.pcw-ta:focus{ border-color:#C9A96A; }
.pcw-send{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:0; border-radius:50%;
  background:#1F3A5F; color:#fff; cursor:pointer; }
.pcw .pcw-send[disabled]{ opacity:.35; }
.pcw-closed{ flex:1; margin:0; padding:12px 4px; text-align:center; font-size:14px; color:#6E6A65; }

/* Nhung trang (account.html tab Messages): nam trong khung trang, khong noi, khong bong, khong thanh tieu de */
.pcw.pcw--embed{ position:relative; z-index:auto; left:auto; right:auto; top:auto; bottom:auto; width:100%; max-width:none;
  height:min(68vh, 620px); min-height:420px; max-height:none; border-radius:0; background:transparent; box-shadow:none;
  opacity:1; visibility:visible; transform:none; transition:none; }
.pcw--embed .pcw-hd{ display:none; }
.pcw--embed .pcw-list{ padding:8px 0 12px; }
.pcw--embed .pcw-comp{ padding:12px 0 0; }
.pcw--embed .pcw-pad{ padding:6px 0 22px; }
.pcw--embed .pcw-err--chat{ padding:0; }

/* SCARLETT */
.pcw--sc{ background:rgba(54,15,14,.98); color:#F3E9DC; box-shadow:0 10px 40px rgba(0,0,0,.35); }
.pcw--sc .pcw-brand{ color:#E8BB84; }
.pcw--sc .pcw-x{ color:#F3E9DC; }
.pcw--sc .pcw-out, .pcw--sc .pcw-link{ color:#E8BB84; }
.pcw--sc .pcw-tab{ color:rgba(243,233,220,.6); }
.pcw--sc .pcw-tab.on{ color:#F3E9DC; }
.pcw--sc .pcw-tab::after{ background:#E8BB84; }
.pcw--sc .pcw-g{ background:transparent; border-color:rgba(232,187,132,.4); color:#F3E9DC; }
.pcw--sc .pcw-or, .pcw--sc .pcw-f span, .pcw--sc .pcw-empty, .pcw--sc .pcw-day, .pcw--sc .pcw-t, .pcw--sc .pcw-seen, .pcw--sc .pcw-closed{ color:rgba(243,233,220,.62); }
.pcw--sc .pcw-or::before, .pcw--sc .pcw-or::after{ background:rgba(232,187,132,.22); }
.pcw--sc .pcw-f input, .pcw--sc .pcw-ta{ background:rgba(243,233,220,.06); border-color:rgba(232,187,132,.32); color:#F3E9DC; }
.pcw--sc .pcw-f input:focus, .pcw--sc .pcw-ta:focus{ border-color:#E8BB84; }
.pcw--sc .pcw-ta::placeholder{ color:rgba(243,233,220,.45); }
.pcw--sc .pcw-btn1{ background:#E8BB84; color:#360F0E; }
.pcw--sc .pcw-h{ color:#E8BB84; }
.pcw--sc .pcw-note, .pcw--sc .pcw-ok{ color:#F3E9DC; }
.pcw--sc .pcw-err{ color:#F0A08A; }
.pcw--sc .pcw-spin{ border-color:rgba(232,187,132,.25); border-top-color:#E8BB84; }
.pcw--sc .pcw-bub{ background:rgba(243,233,220,.1); color:#F3E9DC; }
.pcw--sc .pcw-m--me .pcw-bub{ background:#E8BB84; color:#360F0E; }
.pcw--sc .pcw-comp{ border-top-color:rgba(232,187,132,.2); }
.pcw--sc .pcw-send{ background:#E8BB84; color:#360F0E; }

/* dien thoai: gan toan man hinh, chua vien 10px */
@media (max-width: 760px){
  .pcw-btn{ left:16px; bottom:calc(16px + env(safe-area-inset-bottom)); height:46px; padding:0 19px 0 15px; }
  .pcw-scrim{ display:block; position:fixed; inset:0; z-index:92; background:rgba(20,22,26,.18); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s; }
  .pcw-scrim.show{ opacity:1; visibility:visible; }
  .pcw{ left:10px; right:10px; top:10px; bottom:10px; width:auto; height:auto; max-width:none; max-height:none; }
  .pcw-hd{ padding:8px 6px 4px 20px; }
  .pcw-pad{ padding:6px 20px 20px; }
  html.pcw-open, html.pcw-open body{ overflow:hidden; }
  .pcw.pcw--embed{ left:auto; right:auto; top:auto; bottom:auto; width:100%; height:min(64vh, 560px); min-height:380px; }
}
@media (prefers-reduced-motion: reduce){
  .pcw, .pcw-btn, .pcw-scrim, .pcw-tab::after{ transition:none; }
  .pcw-spin{ animation-duration:2s; }
}