/* WebTui: khung chat trợ lý AI góc phải dưới (trang công khai + trang đặt web). Biến riêng --wa-*, tự đổi theo chế độ tối của máy. */
.wtai,.wtai-panel{--wa-p:#5a4ff3;--wa-p-600:#4a3fe0;--wa-grad:linear-gradient(120deg,#1c7cff 0%,#5a4ff3 55%,#8a4cf7 100%);--wa-bg:#fff;--wa-bg-2:#f5f6fb;--wa-text:#0f172a;--wa-muted:#5b6478;--wa-line:#e3e6ef;
  --wa-user:#5a4ff3;--wa-user-ink:#fff;--wa-ok-bg:#e7f6ef;--wa-ok:#0b7a52;--wa-demo-bg:#fff4dd;--wa-demo:#8a5300;--wa-ext-bg:#eef1f6;--wa-ext:#3b4558;--wa-err:#c62828;--wa-sh:0 24px 60px -20px rgba(30,27,90,.42),0 4px 14px -4px rgba(15,23,42,.14)}
@media (prefers-color-scheme:dark){.wtai,.wtai-panel{--wa-p:#8b83ff;--wa-p-600:#a39cff;--wa-bg:#141826;--wa-bg-2:#1c2133;--wa-text:#e8ebf4;--wa-muted:#a3abc0;--wa-line:#2b3147;
  --wa-user:#5a4ff3;--wa-ok-bg:#12352a;--wa-ok:#6fe0b0;--wa-demo-bg:#3a2c0e;--wa-demo:#ffcf7a;--wa-ext-bg:#252b3d;--wa-ext:#c9d0e0;--wa-err:#ff8a80;--wa-sh:0 24px 60px -20px rgba(0,0,0,.7)}}

.wtai-launch{position:fixed;right:20px;bottom:20px;z-index:60;display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 20px 0 16px;border:0;border-radius:999px;background:var(--wa-grad);color:#fff;
  font:600 15px/1 "Be Vietnam Pro",system-ui,sans-serif;cursor:pointer;box-shadow:0 14px 34px -12px rgba(74,63,224,.7),0 2px 6px rgba(15,23,42,.18);transition:transform .15s,box-shadow .15s}
.wtai-launch svg{width:22px;height:22px;flex:none}
.wtai-launch:hover{transform:translateY(-1px);box-shadow:0 18px 40px -12px rgba(74,63,224,.8),0 2px 6px rgba(15,23,42,.18)}
.wtai-launch:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px var(--wa-p)}
.wtai.is-open .wtai-launch{opacity:0;pointer-events:none}

.wtai-panel{position:fixed;right:20px;bottom:20px;z-index:80;width:480px;max-width:calc(100vw - 24px);height:min(760px,calc(100vh - 40px));display:flex;flex-direction:column;background:var(--wa-bg);color:var(--wa-text);
  border:1px solid var(--wa-line);border-radius:18px;box-shadow:var(--wa-sh);font:400 14.5px/1.55 "Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow:hidden;animation:wtai-in .18s ease-out}
.wtai-panel[hidden]{display:none}
@keyframes wtai-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.wtai-panel{animation:none}.wtai-launch{transition:none}}

.wtai-head{display:flex;align-items:center;gap:8px;padding:12px 10px 12px 16px;border-bottom:1px solid var(--wa-line);background:var(--wa-bg)}
.wtai-title{flex:1;min-width:0;display:flex;flex-direction:column}
.wtai-title b{font-size:15.5px}
.wtai-seg{display:flex;background:var(--wa-bg-2);border:1px solid var(--wa-line);border-radius:999px;padding:3px;flex:none}
.wtai-seg button{border:0;background:none;color:var(--wa-muted);font:600 12.5px/1 inherit;font-family:inherit;padding:0 10px;min-height:34px;border-radius:999px;cursor:pointer;white-space:nowrap}
.wtai-seg button.on{background:var(--wa-bg);color:var(--wa-p);box-shadow:0 1px 3px rgba(15,23,42,.14)}
.wtai-icon{flex:none;width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:10px;background:none;color:var(--wa-muted);cursor:pointer}
.wtai-icon:hover{background:var(--wa-bg-2);color:var(--wa-text)}
.wtai-seg button:focus-visible,.wtai-icon:focus-visible,.wtai-btn:focus-visible,.wtai-link:focus-visible,.wtai-chips button:focus-visible{outline:2px solid var(--wa-p);outline-offset:2px}

.wtai-list{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:16px 14px 8px;display:flex;flex-direction:column;gap:10px;background:var(--wa-bg-2)}
.wtai-msg{max-width:92%;word-wrap:break-word;overflow-wrap:anywhere}
.wtai-user{align-self:flex-end;background:var(--wa-user);color:var(--wa-user-ink);padding:9px 13px;border-radius:16px 16px 4px 16px;white-space:pre-wrap}
.wtai-bot{align-self:flex-start;background:var(--wa-bg);border:1px solid var(--wa-line);padding:10px 13px;border-radius:16px 16px 16px 4px;width:92%}
.wtai-bot.is-error{border-color:var(--wa-err)}
.wtai-panel svg{width:20px;height:20px;flex:none}.wtai-icon svg{width:18px;height:18px}
.wtai-text+.wtai-text,.wtai-cards+.wtai-text,.wtai-action+.wtai-text{margin-top:10px}
.wtai-text p{margin:0 0 .5em}.wtai-text p:last-child{margin-bottom:0}
.wtai-text ul{margin:.2em 0 .6em;padding-left:1.2em}.wtai-text li{margin:.15em 0}
.wtai-text code{font-size:.85em;background:var(--wa-bg-2);border:1px solid var(--wa-line);border-radius:5px;padding:0 .3em}
.wtai-sys{align-self:center;margin:0;color:var(--wa-muted);font-size:13px;text-align:center}
.wtai-err{color:var(--wa-err);font-size:13.5px;margin:.4em 0 0}
.wtai-warn{color:var(--wa-demo);background:var(--wa-demo-bg);border-radius:8px;padding:6px 9px;font-size:13px;margin:.5em 0 0}
.wtai-status{display:flex;align-items:center;gap:8px;color:var(--wa-muted);font-size:13px;margin-top:4px}
.wtai-status[hidden]{display:none}
.wtai-dots{display:inline-flex;gap:3px}.wtai-dots i{width:6px;height:6px;border-radius:50%;background:var(--wa-p);opacity:.35;animation:wtai-dot 1s infinite}
.wtai-dots i:nth-child(2){animation-delay:.15s}.wtai-dots i:nth-child(3){animation-delay:.3s}
@keyframes wtai-dot{40%{opacity:1;transform:translateY(-2px)}}
.wtai-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.wtai-chips button{border:1px solid var(--wa-line);background:var(--wa-bg-2);color:var(--wa-text);font:500 13px/1.3 inherit;font-family:inherit;padding:8px 11px;min-height:40px;border-radius:999px;cursor:pointer;text-align:left}
.wtai-chips button:hover{border-color:var(--wa-p);color:var(--wa-p)}

.wtai-cards{display:grid;gap:8px;margin-top:10px}
.wtai-card{display:grid;grid-template-columns:128px 1fr;gap:10px;border:1px solid var(--wa-line);border-radius:12px;padding:8px;background:var(--wa-bg)}
.wtai-thumb{width:128px;height:96px;border-radius:8px;overflow:hidden;background:var(--wa-bg-2)}
.wtai-thumb--bio img{object-position:center top}
.wtai-thumb img,.wtai-thumb span{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.wtai-cbody{min-width:0;display:flex;flex-direction:column;gap:3px}
.wtai-cbody small{color:var(--wa-muted);font-size:12.5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wtai-btn{align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 12px;border:0;border-radius:9px;background:var(--wa-p);color:#fff;font:600 13px/1 inherit;font-family:inherit;cursor:pointer;text-decoration:none;margin-top:auto}
.wtai-btn:hover{background:var(--wa-p-600);color:#fff}
.wtai-btn:disabled{opacity:.6;cursor:progress}
@media (prefers-color-scheme:dark){.wtai-btn{color:#0f0b3a}.wtai-btn:hover{color:#0f0b3a}}
.wtai-palettes{grid-template-columns:1fr 1fr}
.wtai-pal{display:flex;flex-direction:column;gap:6px;border:1px solid var(--wa-line);border-radius:12px;padding:8px;background:var(--wa-bg)}
.wtai-sw{display:flex;height:30px;border-radius:7px;overflow:hidden;border:1px solid var(--wa-line)}
.wtai-sw i{flex:1}.wtai-sw i:first-child{flex:2}
.wtai-pal small{color:var(--wa-muted);font-size:12px;line-height:1.35}
.wtai-pal code{font-size:11.5px}
.wtai-images{grid-template-columns:1fr 1fr}
.wtai-img{margin:0;border:1px solid var(--wa-line);border-radius:12px;overflow:hidden;background:var(--wa-bg);display:flex;flex-direction:column}
.wtai-img img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--wa-bg-2)}
.wtai-img figcaption{padding:7px 8px 8px;display:flex;flex-direction:column;gap:5px;flex:1}
.wtai-img figcaption small{color:var(--wa-muted);font-size:11.5px;line-height:1.35}
.wtai-img figcaption a{color:var(--wa-p)}
.wtai-img .wtai-hint{color:var(--wa-text);font-size:12px}
.wtai-slot{width:100%;min-height:34px;border:1px solid var(--wa-line);border-radius:8px;background:var(--wa-bg);color:var(--wa-text);font:inherit;font-size:12.5px;padding:0 6px}
.wtai-img .wtai-btn{align-self:stretch}
.wtai-tag{display:inline-block;align-self:flex-start;font-size:11.5px;font-weight:600;line-height:1.3;padding:3px 7px;border-radius:6px}
.wtai-tag.ok{background:var(--wa-ok-bg);color:var(--wa-ok)}
.wtai-tag.demo{background:var(--wa-demo-bg);color:var(--wa-demo)}
.wtai-tag.ext{background:var(--wa-ext-bg);color:var(--wa-ext)}
.wtai-action{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;padding:7px 10px;border-radius:10px;background:var(--wa-ok-bg);color:var(--wa-ok);font-size:13px;font-weight:500}
.wtai-action.is-undone{background:var(--wa-bg-2);color:var(--wa-muted);text-decoration:line-through}
.wtai-action em{font-style:normal;text-decoration:none;font-size:12.5px}
.wtai-link{border:0;background:none;color:inherit;font:700 13px/1 inherit;font-family:inherit;text-decoration:underline;cursor:pointer;min-height:32px;padding:0 4px;flex:none}

.wtai-form{display:flex;align-items:flex-end;gap:8px;padding:10px 12px 6px;border-top:1px solid var(--wa-line);background:var(--wa-bg)}
.wtai-form textarea{flex:1;resize:none;box-sizing:border-box;height:46px;min-height:46px;max-height:140px;overflow-y:hidden;border:1px solid var(--wa-line);border-radius:12px;padding:11px 12px;background:var(--wa-bg-2);color:var(--wa-text);font:inherit;font-size:15px;line-height:1.4}
.wtai-form textarea:focus{outline:none;border-color:var(--wa-p);box-shadow:0 0 0 3px rgba(90,79,243,.2)}
.wtai-send{flex:none;width:46px;height:46px;display:grid;place-items:center;border:0;border-radius:12px;background:var(--wa-grad);color:#fff;cursor:pointer}
.wtai-send:disabled{opacity:.5;cursor:progress}
.wtai-send:focus-visible{outline:2px solid var(--wa-p);outline-offset:2px}
.wtai-foot{display:flex;justify-content:space-between;gap:8px;padding:0 14px 9px;background:var(--wa-bg);color:var(--wa-muted);font-size:11.5px}
.wtai-quota{font-weight:600;white-space:nowrap}
.wtai-quota.is-low{color:var(--wa-err)}

/* Trang đặt web: điện thoại có thanh .m-dock cao 62px ở đáy → nút nằm trên thanh; bảng tuỳ chỉnh (z 65–70) che nút khi mở. */
/* Khung to (mặc định): gần cả màn hình, chữ rộng vừa đọc, thẻ mẫu 2 cột, ảnh / bảng màu nhiều cột. */
.wtai-panel.is-large{width:min(960px,calc(100vw - 40px));height:calc(100vh - 40px)}
.wtai-panel.is-large .wtai-list{padding:20px 24px 10px;gap:12px}
.wtai-panel.is-large .wtai-bot{width:min(820px,94%)}
.wtai-panel.is-large .wtai-user{max-width:min(620px,80%)}
.wtai-panel.is-large .wtai-text{font-size:15px;line-height:1.6}
.wtai-panel.is-large .wtai-templates{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.wtai-panel.is-large .wtai-images{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.wtai-panel.is-large .wtai-palettes{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.wtai-panel.is-large .wtai-form,.wtai-panel.is-large .wtai-foot{padding-left:24px;padding-right:24px}
.wtai-size .i-grow{display:none}
.wtai-panel:not(.is-large) .wtai-size .i-shrink{display:none}
.wtai-panel:not(.is-large) .wtai-size .i-grow{display:inline}
.wtai-suggest{margin-top:12px}
.wtai-suggest button{background:var(--wa-bg);border-color:color-mix(in srgb,var(--wa-p) 35%,var(--wa-line));color:var(--wa-p);font-weight:600}
.wtai-suggest button:hover{background:color-mix(in srgb,var(--wa-p) 8%,var(--wa-bg))}
/* Trang đặt web trên điện thoại / iPad: thanh .m-dock (62px) + thanh liên hệ của website xem thử (~70px) nằm ở đáy →
   nút thu thành hình tròn và đặt cao hơn hai thanh đó để không che nút nào. */
@media (max-width:860px){
  .builder-page .wtai-launch{bottom:calc(62px + env(safe-area-inset-bottom) + 84px);right:12px;width:52px;height:52px;padding:0;justify-content:center}
  .builder-page .wtai-launch span{display:none}
}
@media (max-width:600px){
  .wtai-launch{right:12px;bottom:calc(12px + env(safe-area-inset-bottom));height:48px;padding:0 16px 0 13px;font-size:14px}
  .wtai-seg button{min-height:38px}
  .wtai-size{display:none}
  .wtai-panel.is-large{width:auto;height:auto}
  .wtai-panel{inset:0;width:auto;max-width:none;height:auto;border-radius:0;border:0;padding-bottom:env(safe-area-inset-bottom)}
  .wtai-head{padding-top:calc(10px + env(safe-area-inset-top))}
  .wtai-seg button{padding:0 8px}
  .wtai-images,.wtai-palettes{grid-template-columns:1fr 1fr}
  .wtai-card{grid-template-columns:96px 1fr}.wtai-thumb{width:96px;height:72px}
  html.wtai-lock,html.wtai-lock body{overflow:hidden}
}

/* Quản trị BIO: các nút AI dùng được bằng ngón tay trên điện thoại. */
.bio-admin-page .wtai-panel .wtai-seg button,.bio-admin-page .wtai-panel .wtai-chips button{min-height:44px}
.bio-admin-page .wtai-panel .wtai-icon{width:44px;height:44px}