/* ==========================================================================
   VSI Chat — khung trò chuyện góc màn hình
   Màu lấy từ bảng màu của giao diện (biến --wp--preset--color--*) và luôn có
   giá trị dự phòng để widget vẫn đúng màu nếu đổi sang giao diện khác.
   ========================================================================== */

.vsi-chat{
  --vsi-primary:  var(--wp--preset--color--primary, #1D4ED8);
  --vsi-dark:     var(--wp--preset--color--primary-dark, #152E7A);
  --vsi-ink:      var(--wp--preset--color--contrast, #0B1120);
  --vsi-soft:     var(--wp--preset--color--ink-soft, #475467);
  --vsi-surface:  var(--wp--preset--color--surface, #F4F7FC);
  --vsi-line:     var(--wp--preset--color--border, #E3E8F0);
  --vsi-radius: 18px;
  --vsi-ease: cubic-bezier(.4,0,.2,1);

  position: fixed;
  right: clamp(1rem, 0.4rem + 1.6vw, 1.75rem);
  bottom: clamp(1rem, 0.4rem + 1.6vw, 1.75rem);
  z-index: 9998;                       /* đầu trang dính của giao diện đang ở 100 */
  font-family: inherit;
  line-height: 1.55;
}

/* ── Nút tròn mở khung ── */
.vsi-chat__launcher{
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: linear-gradient(135deg, var(--vsi-primary) 0%, var(--vsi-dark) 100%);
  color: #fff;
  box-shadow: 0 8px 28px rgba(29,78,216,.36);
  transition: transform .2s var(--vsi-ease), box-shadow .2s var(--vsi-ease);
}
@media (hover:hover){
  .vsi-chat__launcher:hover{ transform: translateY(-2px); box-shadow: 0 12px 34px rgba(29,78,216,.44); }
}
.vsi-chat__launcher:focus-visible{ outline: 3px solid var(--vsi-primary); outline-offset: 3px; }

.vsi-chat__icon-close{ display: none; }
.vsi-chat[data-state="open"] .vsi-chat__icon-open{ display: none; }
.vsi-chat[data-state="open"] .vsi-chat__icon-close{ display: block; }

/* Chấm đếm tin chưa đọc */
.vsi-chat__badge{
  position: absolute; top: -2px; right: -2px;
  min-width: 21px; height: 21px; padding: 0 6px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 2px solid #fff;
  background: #E11D48; color: #fff;
  font-size: .6875rem; font-weight: 700; line-height: 1;
}
.vsi-chat__badge[hidden]{ display: none; }

/* ── Khung hội thoại ── */
.vsi-chat__panel{
  position: absolute; right: 0; bottom: 72px;
  display: flex; flex-direction: column;
  width: min(380px, calc(100vw - 2rem));
  max-height: min(620px, calc(100vh - 7rem));
  overflow: hidden;
  border: 1px solid var(--vsi-line); border-radius: var(--vsi-radius);
  background: #fff; color: var(--vsi-ink);
  box-shadow: 0 4px 12px rgba(11,17,32,.06), 0 24px 60px rgba(11,17,32,.18);
  transform-origin: bottom right;
  animation: vsi-chat-in .22s var(--vsi-ease);
}
.vsi-chat__panel[hidden]{ display: none; }

@keyframes vsi-chat-in{
  from{ opacity: 0; transform: translateY(12px) scale(.97); }
  to  { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce){
  .vsi-chat__panel{ animation: none; }
  .vsi-chat__launcher{ transition: none; }
}

/* ── Thanh tiêu đề ── */
.vsi-chat__head{
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.15rem;
  background: linear-gradient(135deg, var(--vsi-primary) 0%, var(--vsi-dark) 100%);
  color: #fff;
}
.vsi-chat__heading{ margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: -.015em; color: #fff; }
.vsi-chat__sub{ margin: .2rem 0 0; font-size: .8125rem; color: rgba(255,255,255,.82); }
.vsi-chat__close{
  flex: 0 0 32px; width: 32px; height: 32px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 8px; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff;
}
.vsi-chat__close:hover{ background: rgba(255,255,255,.24); }
.vsi-chat__close:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }

/* ── Thân ── */
.vsi-chat__body{
  flex: 1 1 auto; min-height: 190px;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 1.15rem;
  background: var(--vsi-surface);
}

.vsi-chat__greeting{
  margin: 0 0 1rem; padding: .85rem 1rem;
  border-radius: 14px 14px 14px 4px;
  background: #fff; border: 1px solid var(--vsi-line);
  font-size: .9375rem; color: var(--vsi-ink);
}

/* ── Biểu mẫu mở đầu ── */
.vsi-chat__form{ display: flex; flex-direction: column; }
.vsi-chat__label{
  margin-bottom: .3rem; font-size: .8125rem; font-weight: 600; color: var(--vsi-soft);
}
.vsi-chat__input{
  width: 100%; margin-bottom: .85rem; padding: .6rem .75rem;
  border: 1px solid var(--vsi-line); border-radius: 10px;
  background: #fff; color: var(--vsi-ink);
  font: inherit; font-size: .9375rem;
  transition: border-color .18s var(--vsi-ease), box-shadow .18s var(--vsi-ease);
}
.vsi-chat__input:focus{
  outline: none;
  border-color: var(--vsi-primary);
  box-shadow: 0 0 0 3px rgba(29,78,216,.14);
}
.vsi-chat__textarea{ resize: vertical; min-height: 76px; }

/* Bẫy máy gửi tự động — ẩn khỏi mắt lẫn trình đọc màn hình, không dùng
   display:none vì một số bot bỏ qua trường bị ẩn kiểu đó. */
.vsi-chat__trap{
  position: absolute !important;
  width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  white-space: nowrap;
}

.vsi-chat__submit{
  margin-top: .25rem; padding: .78rem 1rem;
  border: 0; border-radius: 10px; cursor: pointer;
  background: var(--vsi-primary); color: #fff;
  font: inherit; font-size: .9375rem; font-weight: 600;
  transition: background-color .18s var(--vsi-ease);
}
.vsi-chat__submit:hover{ background: var(--vsi-dark); }
.vsi-chat__submit:disabled{ opacity: .6; cursor: progress; }
.vsi-chat__submit:focus-visible{ outline: 2px solid var(--vsi-dark); outline-offset: 2px; }

.vsi-chat__note{ margin: .7rem 0 0; font-size: .75rem; color: var(--vsi-soft); }

/* ── Danh sách tin ── */
.vsi-chat__log{ display: flex; flex-direction: column; gap: .55rem; }
.vsi-chat__log[hidden]{ display: none; }

.vsi-chat__msg{ max-width: 84%; }
.vsi-chat__msg--in{ align-self: flex-end; }
.vsi-chat__msg--out{ align-self: flex-start; }

.vsi-chat__bubble{
  margin: 0; padding: .65rem .9rem;
  font-size: .9375rem; white-space: pre-wrap; overflow-wrap: break-word;
}
.vsi-chat__msg--in .vsi-chat__bubble{
  border-radius: 14px 14px 4px 14px;
  background: var(--vsi-primary); color: #fff;
}
.vsi-chat__msg--out .vsi-chat__bubble{
  border-radius: 14px 14px 14px 4px;
  background: #fff; border: 1px solid var(--vsi-line); color: var(--vsi-ink);
}
.vsi-chat__meta{
  margin: .25rem .25rem 0; font-size: .6875rem; color: var(--vsi-soft);
}
.vsi-chat__msg--in .vsi-chat__meta{ text-align: right; }

/* Chấm "đang nhập" */
.vsi-chat__typing{ display: flex; gap: 4px; padding: .8rem .9rem; }
.vsi-chat__typing span{
  width: 6px; height: 6px; border-radius: 50%; background: var(--vsi-soft);
  animation: vsi-chat-blink 1.2s infinite ease-in-out both;
}
.vsi-chat__typing span:nth-child(2){ animation-delay: .18s; }
.vsi-chat__typing span:nth-child(3){ animation-delay: .36s; }
@keyframes vsi-chat-blink{ 0%,80%,100%{ opacity:.25 } 40%{ opacity:1 } }

/* ── Ô soạn tin ── */
.vsi-chat__compose{
  display: flex; align-items: flex-end; gap: .5rem;
  padding: .7rem .75rem;
  border-top: 1px solid var(--vsi-line); background: #fff;
}
.vsi-chat__compose[hidden]{ display: none; }
.vsi-chat__write{
  flex: 1 1 auto; max-height: 120px; padding: .55rem .7rem;
  border: 1px solid var(--vsi-line); border-radius: 10px;
  background: #fff; color: var(--vsi-ink);
  font: inherit; font-size: .9375rem; line-height: 1.45;
  resize: none; overflow-y: auto;
}
.vsi-chat__write:focus{
  outline: none; border-color: var(--vsi-primary);
  box-shadow: 0 0 0 3px rgba(29,78,216,.14);
}
.vsi-chat__send{
  flex: 0 0 40px; width: 40px; height: 40px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 10px; cursor: pointer;
  background: var(--vsi-primary); color: #fff;
}
.vsi-chat__send:hover{ background: var(--vsi-dark); }
.vsi-chat__send:disabled{ opacity: .5; cursor: not-allowed; }
.vsi-chat__send:focus-visible{ outline: 2px solid var(--vsi-dark); outline-offset: 2px; }

/* ── Nút mở lại hội thoại sau khi đã kết thúc ── */
.vsi-chat__restart{
  margin: 0; padding: .8rem 1rem;
  border: 0; border-top: 1px solid var(--vsi-line); cursor: pointer;
  background: #fff; color: var(--vsi-primary);
  font: inherit; font-size: .9375rem; font-weight: 600;
  transition: background-color .18s var(--vsi-ease);
}
.vsi-chat__restart[hidden]{ display: none; }
.vsi-chat__restart:hover{ background: var(--vsi-surface); }
.vsi-chat__restart:focus-visible{ outline: 2px solid var(--vsi-primary); outline-offset: -2px; }

/* ── Dòng trạng thái / lỗi ── */
.vsi-chat__status{
  margin: 0; padding: 0 1rem; max-height: 0; overflow: hidden;
  font-size: .8125rem; color: #B42318; background: #FEF3F2;
  transition: max-height .2s var(--vsi-ease), padding .2s var(--vsi-ease);
}
.vsi-chat__status.is-shown{ max-height: 6rem; padding: .6rem 1rem; }
.vsi-chat__status.is-info{ color: var(--vsi-soft); background: var(--vsi-surface); }

/* ── Điện thoại: khung dán sát đáy, chiếm gần hết màn ── */
@media (max-width: 559.98px){
  .vsi-chat{ right: 1rem; bottom: 1rem; }
  .vsi-chat__panel{
    position: fixed; right: 0; left: 0; bottom: 0;
    width: 100%; max-height: 88vh; max-height: 88dvh;
    border-radius: var(--vsi-radius) var(--vsi-radius) 0 0;
    border-left: 0; border-right: 0; border-bottom: 0;
  }
  .vsi-chat__msg{ max-width: 90%; }
}

/* Khi đang mở trên điện thoại thì giấu nút tròn để không che nội dung */
@media (max-width: 559.98px){
  .vsi-chat[data-state="open"] .vsi-chat__launcher{ display: none; }
}