/* 🎙️ HAIS LUS — chế độ đối thoại liên tục như nút sóng âm của ChatGPT (15/09/2026)
   Màu: chàm #1E3A8A · đỏ Mông #B4322C · vàng #C9761F. Chỉ transform/opacity/filter (luật hiệu ứng 15/09). */

/* nút sóng âm trong ô soạn chat */
.hxv-btn{display:inline-flex;align-items:center;justify-content:center;gap:0;padding:8px 11px !important}
.hxv-btn svg{width:18px;height:18px;display:block}
.hxv-btn svg rect{fill:currentColor;transform-origin:center;transform-box:fill-box}
.hxv-btn:hover svg rect{animation:hxvBar .9s ease-in-out infinite}
.hxv-btn svg rect:nth-child(2){animation-delay:.15s}.hxv-btn svg rect:nth-child(3){animation-delay:.3s}.hxv-btn svg rect:nth-child(4){animation-delay:.45s}
@keyframes hxvBar{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1.15)}}

/* màn hình toàn trang */
#hxv{position:fixed;inset:0;z-index:9990;display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:max(18px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom));
  background:radial-gradient(120% 90% at 50% 110%,#2a1740 0%,#0e1633 45%,#070b18 100%);color:#eef2f8;
  font-family:'Be Vietnam Pro',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;opacity:0;transition:opacity .25s;pointer-events:none}
#hxv.on{opacity:1;pointer-events:auto}
#hxv .hxv-top{width:100%;display:flex;align-items:center;justify-content:space-between;font-size:14px;color:#c7d0e2}
#hxv .hxv-top b{font-weight:700;color:#fff;font-size:15px}
#hxv .hxv-mid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;width:100%;max-width:560px;contain:layout paint}

/* quả cầu */
.hxv-orb{position:relative;width:min(220px,56vw);height:min(220px,56vw);border-radius:50%;cursor:pointer;-webkit-tap-highlight-color:transparent;
  --lv:0; transform:scale(calc(1 + var(--lv)*.22));transition:transform .09s ease-out;will-change:transform}
.hxv-orb .c{position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%,#ffffffcc 0,#ffffff00 32%),
    radial-gradient(circle at 70% 75%,#7FA8D6dd 0,#7FA8D600 45%),
    radial-gradient(circle at 25% 70%,#38BDF8cc 0,#38BDF800 48%),
    radial-gradient(circle at 60% 35%,#3B82F6 0,#1E3A8A 55%,#0f2360 100%);   /* 15/09 Aib: quả cầu toàn XANH */
  box-shadow:0 0 0 1px #ffffff22 inset,0 18px 60px #1E3A8A66}
.hxv-orb .g{position:absolute;inset:-18%;border-radius:50%;filter:blur(28px);opacity:.75;
  background:conic-gradient(from 0deg,#1E3A8A,#2A6089,#7FA8D6,#38BDF8,#1E3A8A);animation:hxvSpin 9s linear infinite}
.hxv-orb .r{position:absolute;inset:-9%;border-radius:50%;border:2px dashed #7FA8D699;opacity:.55;animation:hxvSpin 22s linear infinite reverse}
.hxv-orb .r2{position:absolute;inset:-16%;border-radius:50%;border:1px solid #ffffff22;opacity:.6}
@keyframes hxvSpin{to{transform:rotate(360deg)}}

/* trạng thái */
#hxv[data-state="mloog"] .hxv-orb .g{animation-duration:14s;opacity:.55}
#hxv[data-state="koj"] .hxv-orb .g{opacity:.95;animation-duration:5s}
#hxv[data-state="xav"] .hxv-orb{animation:hxvBreath 1.4s ease-in-out infinite}
#hxv[data-state="xav"] .hxv-orb .g{animation-duration:2.2s;opacity:.9}
#hxv[data-state="hais"] .hxv-orb{animation:hxvTalk 1.1s ease-in-out infinite}
#hxv[data-state="hais"] .hxv-orb .g{animation-duration:4s;opacity:.85}
#hxv[data-state="kaw"] .hxv-orb{filter:grayscale(.7);opacity:.6}
@keyframes hxvBreath{0%,100%{transform:scale(.96)}50%{transform:scale(1.05)}}
@keyframes hxvTalk{0%,100%{transform:scale(1)}30%{transform:scale(1.07)}60%{transform:scale(.98)}}

/* thanh sóng nhỏ dưới quả cầu */
.hxv-wave{display:flex;gap:5px;align-items:center;height:28px}
.hxv-wave i{display:block;width:5px;height:6px;border-radius:3px;background:#c7d0e2;opacity:.8;transform-origin:center;transition:transform .08s}
#hxv[data-state="hais"] .hxv-wave i{animation:hxvBar .8s ease-in-out infinite;background:#38BDF8}
#hxv[data-state="hais"] .hxv-wave i:nth-child(2n){animation-delay:.2s}#hxv[data-state="hais"] .hxv-wave i:nth-child(3n){animation-delay:.4s}

.hxv-st{font-size:17px;font-weight:700;text-align:center;min-height:24px;color:#fff;letter-spacing:.2px}
.hxv-sub{font-size:13px;color:#a9b4c9;text-align:center;min-height:18px}
.hxv-cap{width:100%;max-height:26vh;overflow:auto;font-size:14.5px;line-height:1.5;display:flex;flex-direction:column;gap:6px;padding:0 4px}
.hxv-cap p{margin:0;padding:8px 12px;border-radius:14px;max-width:92%}
.hxv-cap p.me{align-self:flex-end;background:#ffffff1a;color:#fff}
.hxv-cap p.bot{align-self:flex-start;background:#1E3A8A55;color:#e6ecff;border:1px solid #ffffff14}
.hxv-cap p.err{align-self:center;background:#B4322C33;color:#ffd9d6;font-size:13px}

/* hàng nút dưới */
.hxv-bar{display:flex;gap:18px;align-items:center;justify-content:center;width:100%}
.hxv-bar button{width:60px;height:60px;border-radius:50%;border:1px solid #ffffff2a;background:#ffffff14;color:#fff;font-size:24px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:transform .12s,background .12s;-webkit-tap-highlight-color:transparent}
.hxv-bar button:active{transform:scale(.92)}
.hxv-bar button.x{background:#B4322C;border-color:#B4322C}
.hxv-bar button.mic.off{background:#ffffff08;color:#8b93a5;text-decoration:line-through}
.hxv-bar button.skip{font-size:20px}
.hxv-bar small{position:absolute;bottom:-18px;font-size:11px;color:#a9b4c9;white-space:nowrap}
.hxv-bar .w{position:relative;display:flex;flex-direction:column;align-items:center}

@media (prefers-reduced-motion:reduce){
  .hxv-orb .g,.hxv-orb .r,#hxv[data-state] .hxv-orb,#hxv[data-state] .hxv-wave i,.hxv-btn:hover svg rect{animation:none !important}
}
html[data-fx="off"] .hxv-orb .g,html[data-fx="off"] .hxv-orb .r,html[data-fx="off"] #hxv[data-state] .hxv-orb{animation:none !important}