/* ========= BASE ========= */
#stv-chatbox { position:fixed; z-index:9999; bottom:18px; }
#stv-chatbox.pos-right { right:18px; }
#stv-chatbox.pos-left  { left:18px; }

/* ========= VARIABLES ========= */
#stv-chatbox{
  --stv-accent:#3b82f6;
  --stv-accent-2:#f97316;
  --stv-text:#111827;
  --stv-panel-bg:#fff;
  --stv-panel-border:rgba(15,23,42,.08);
  --stv-bubble-border:#d1d5db;
  --stv-header-size:16px;
  --stv-content-size:14px;
  --stv-option-size:14px;
  --stv-shadow-1:0 10px 30px rgba(0,0,0,.15), 0 2px 8px rgba(0,0,0,.06);
  --stv-radius-xl:18px;
  --stv-fab-w:64px;
  --stv-fab-h:64px;
}

/* ========= FAB ========= */
#stv-chatbox .stv-fab{
  background:linear-gradient(135deg,var(--stv-accent),var(--stv-accent-2));
  width:var(--stv-fab-w); height:var(--stv-fab-h);
  border-radius:20px; border:none; cursor:pointer; color:#fff;
  box-shadow:0 12px 30px rgba(37,99,235,.35);
  transition:transform .18s ease, box-shadow .18s ease;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
#stv-chatbox .stv-fab.fab-img{ background:#fff; border:1px solid var(--stv-panel-border); }
#stv-chatbox .stv-fab.fab-img img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit; }

/* Banner mode: ảnh to, theo chiều rộng */
#stv-chatbox .stv-fab.fab-img.fab-mode-banner{
  background:transparent; border:0; box-shadow:none;
  width:var(--stv-fab-w); height:auto; padding:0; border-radius:16px;
}
#stv-chatbox .stv-fab.fab-img.fab-mode-banner img{
  width:100%; height:auto; display:block; border-radius:inherit;
}

/* ========= PANEL ========= */
#stv-chatbox .stv-panel{
  position:absolute;
  bottom:calc(max(72px, var(--stv-fab-h) + 12px));
  right:0;
  width:360px; max-height:80vh;
  background:var(--stv-panel-bg);
  border:1px solid var(--stv-panel-border);
  border-radius:var(--stv-radius-xl);
  box-shadow:var(--stv-shadow-1);
  display:flex; flex-direction:column; overflow:hidden;
}
#stv-chatbox.pos-left .stv-panel{ left:0; right:auto; }
#stv-chatbox.minimized .stv-panel{ display:none; }

/* ========= HEADER ========= */
#stv-chatbox .stv-header{
  padding:14px 16px; border-bottom:1px solid rgba(15,23,42,.06);
  background:linear-gradient(180deg, rgba(2,6,23,.02), rgba(2,6,23,0)), linear-gradient(90deg, rgba(37,99,235,.08), rgba(249,115,22,.08));
  display:flex; align-items:center; gap:8px;
}
#stv-chatbox .stv-title{ font-weight:800; letter-spacing:.2px; color:var(--stv-text); flex:1; font-size:var(--stv-header-size); }

/* Close button (center) */
#stv-chatbox .stv-close{
  appearance:none; -webkit-appearance:none; background:#ef4444; border:none !important;
  width:36px; height:36px; padding:0 !important; margin:0; border-radius:12px;
  display:flex !important; align-items:center; justify-content:center; line-height:0 !important;
  box-sizing:border-box; cursor:pointer; transition:background .15s ease;
}
#stv-chatbox .stv-close:hover{ background:#dc2626; }
#stv-chatbox .stv-close svg{ width:18px; height:18px; display:block; }

/* ========= BODY ========= */
#stv-chatbox .stv-body{ padding:12px 14px; display:flex; flex-direction:column; flex:1 1 auto; overflow:hidden; }

/* Scrollbar gọn gàng */
#stv-chatbox .stv-messages{ flex:1 1 auto; overflow:auto; display:flex; flex-direction:column; gap:8px; padding-right:2px; }
#stv-chatbox .stv-messages::-webkit-scrollbar{ width:8px; }
#stv-chatbox .stv-messages::-webkit-scrollbar-thumb{ background:linear-gradient(180deg, rgba(37,99,235,.35), rgba(249,115,22,.35)); border-radius:999px; }
#stv-chatbox .stv-messages::-webkit-scrollbar-track{ background:transparent; }

/* ========= MESSAGES (đẹp hơn) ========= */
#stv-chatbox .stv-msg{
  position:relative; padding:12px 14px; border-radius:16px;
  font-size:var(--stv-content-size); line-height:1.55; max-width:90%;
  animation: stvPop .22s ease both;
}

/* Bot bubble: nhẹ nhàng */
#stv-chatbox .stv-msg.bot{
  background: #ffffff;
  color: var(--stv-text);
  border: 1.5px solid var(--stv-bubble-border);
  align-self:flex-start; border-top-left-radius:8px;
  box-shadow: 0 4px 12px rgba(2,6,23,.06) inset;
}

/* User bubble: trang trí + viền sáng + bóng + label “Bạn” */
#stv-chatbox .stv-msg.user{
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.00)) padding-box,
    linear-gradient(135deg, var(--stv-accent), var(--stv-accent-2)) border-box;
  color:#fff;
  border:1.5px solid transparent;            /* để lộ gradient border-box */
  align-self:flex-end; border-top-right-radius:8px;
  box-shadow:
    0 8px 22px rgba(37,99,235,.28),
    0 1px 0 rgba(255,255,255,.20) inset,
    0 -6px 20px rgba(0,0,0,.05) inset;
  backdrop-filter: saturate(120%);
}

/* Label “Bạn” ở góc trên bên phải */
#stv-chatbox .stv-msg.user::before{
  content:'Bạn';
  position:absolute; top:-10px; right:8px;
  font-size:10px; font-weight:700; letter-spacing:.3px;
  color:#fff; background:rgba(2,6,23,.35);
  padding:2px 6px; border-radius:999px;
}

/* Đuôi bong bóng cho cả 2 */
#stv-chatbox .stv-msg.bot:after, #stv-chatbox .stv-msg.user:after{
  content:""; position:absolute; bottom:-2px; width:10px; height:10px; background:inherit; transform: rotate(45deg);
}
#stv-chatbox .stv-msg.bot:after{ left:10px; box-shadow:-1px 1px 0 var(--stv-bubble-border); }
#stv-chatbox .stv-msg.user:after{ right:10px; }

/* Hiệu ứng xuất hiện */
@keyframes stvPop{
  from{ transform:translateY(8px) scale(.98); opacity:0; }
  to  { transform:translateY(0) scale(1);   opacity:1; }
}

/* ========= OPTIONS ========= */
#stv-chatbox .stv-options{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
#stv-chatbox .stv-opt{
  background:#fff !important; color:var(--stv-text) !important; border:1.5px solid var(--stv-accent) !important;
  padding:9px 12px; border-radius:999px; font-weight:700; letter-spacing:.2px; cursor:pointer;
  font-size:var(--stv-option-size); text-transform:none;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
}
#stv-chatbox .stv-opt:hover{
  background:linear-gradient(135deg,var(--stv-accent),var(--stv-accent-2)) !important;
  color:#fff !important; border-color:transparent !important;
  box-shadow:0 6px 18px rgba(37,99,235,.25); transform:translateY(-1px);
}

/* ========= FOOTER ========= */
#stv-chatbox .stv-footer{ display:flex; gap:8px; padding:12px 14px; border-top:1px solid rgba(15,23,42,.06); }
#stv-chatbox .stv-footer .stv-btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:38px;
  padding:8px 12px; border-radius:12px;
  background:#fff !important; color:var(--stv-text) !important;
  border:1.5px solid var(--stv-accent) !important;
  font-size:13px; font-weight:700; letter-spacing:.2px; cursor:pointer;
  text-transform:none;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
}
#stv-chatbox .stv-footer .stv-btn:hover{
  background:linear-gradient(135deg,var(--stv-accent),var(--stv-accent-2)) !important;
  color:#fff !important; border-color:transparent !important;
  box-shadow:0 6px 18px rgba(37,99,235,.25); transform:translateY(-1px);
}
#stv-chatbox .stv-footer .stv-home{ margin-left:auto; }

/* ========= MOBILE ========= */
@media (max-width:480px){
  #stv-chatbox .stv-panel{ width:min(96vw,400px); }
  #stv-chatbox .stv-fab.fab-img.fab-mode-banner{ width:min(92vw, 360px); }
}

/* ========= DARK ========= */
@media (prefers-color-scheme: dark){
  #stv-chatbox{ --stv-text:#e5e7eb; --stv-panel-bg:#0b1220; --stv-panel-border:rgba(148,163,184,.18); --stv-bubble-border:rgba(148,163,184,.25); }
  #stv-chatbox .stv-msg.bot{ background:rgba(148,163,184,.08); }
}