/* =============================================================================
   VNPT AI – Giao diện hỏi/đáp (chat agent) · v1.0
   -----------------------------------------------------------------------------
   Cách dùng
     1. Nạp file này SAU toàn bộ CSS hiện có của trang (app-*.css và khối <style>
        của khung chat). File chỉ ghi đè, không cần sửa HTML.
     2. Nạp vnpt-chat-ui.js sau script khung chat.
     3. Áp bản vá nhỏ cho scroll handler (xem README.md, mục "Bản vá JS").

   Vì sao dùng "html body ..." và !important?
     CSS gốc của khung chat dùng nhiều !important và selector dài. Tiền tố
     "html body" giúp mọi quy tắc ở đây thắng mà không phải sửa CSS gốc.
     Khi dev gộp hẳn vào source, có thể bỏ tiền tố và !important.

   Mốc responsive
     ≥ 1600px & cao > 800px ... Desktop lớn (giữ kích thước gốc)
     992 – 1599px hoặc cao ≤ 800px ... Desktop gọn (laptop, màn scale 125%)
     768 – 991px ............. Tablet
     ≤ 767px ................. Mobile
     (pointer: coarse) ....... Màn cảm ứng bất kỳ kích thước: vùng chạm ≥ 44px

   Mục lục
     0. Design tokens
     1. Bảng màu (mọi kích thước)
     2. Tin nhắn & nội dung trả lời
     3. Ô nhập – kích thước
     4. Ô nhập – viền, quầng sáng, bo góc (màn chào)
     5. Desktop (≥ 992px)
     6. Desktop gọn (992–1599px hoặc cao ≤ 800px)
     7. Tablet & mobile (≤ 991px)
     8. Tablet (768–991px)
     9. Mobile (≤ 767px)
    10. Màn cảm ứng
    11. Chuyển động (keyframes)
    12. Giảm chuyển động (accessibility)
   ============================================================================= */


/* =============================================================================
   0. DESIGN TOKENS
   ============================================================================= */
:root {
  /* Xanh thương hiệu */
  --vnpt-blue-700: #0E4BBD;   /* hover / nhấn */
  --vnpt-blue-600: #0057E5;   /* chính: bong bóng người dùng, link, active · 6.01:1 trên trắng */
  --vnpt-cyan-500: #02AAFA;   /* điểm cuối gradient nút gửi */
  --vnpt-blue-200: #BCD3F8;   /* viền hover */
  --vnpt-blue-100: #DCE8FC;   /* viền nhẹ */
  --vnpt-blue-50:  #EFF5FE;   /* nền hover */

  /* Trung tính ngả navy */
  --vnpt-ink-900: #1A2A45;    /* chữ chính · 14.37:1 */
  --vnpt-ink-600: #4A5B78;    /* chữ phụ · 6.87:1 */
  --vnpt-ink-500: #66748B;    /* icon, placeholder, ghi chú · 4.73:1 */
  --vnpt-ink-400: #8A97AD;    /* chấm "đang gõ" (đồ họa) */
  --vnpt-line:    #DCE4F0;    /* kẻ bảng, vạch phân cách */
  --vnpt-surface-alt: #F3F7FD;/* đầu bảng, khối code */
  --vnpt-danger:  #C53030;    /* cảnh báo, "không thích" · 5.47:1 */

  /* Ô nhập màn chào */
  --vnpt-input-ring: #D9E6FB; /* viền 1px = màu nút gửi khi chưa có chữ */
  --vnpt-halo: linear-gradient(100deg,
      #0E4BBD 0%, #0057E5 14%, #02AAFA 28%, #5CC8FF 36%, #02AAFA 44%,
      #3D7BFF 60%, #0057E5 72%, #02AAFA 86%, #0E4BBD 100%);

  /* Panel chat nổi */
  --vnpt-panel-bg:     rgba(236, 243, 253, .58);
  --vnpt-panel-border: rgba(0, 87, 229, .14);
  --vnpt-panel-shadow: 0 16px 48px rgba(14, 75, 189, .18), 0 2px 8px rgba(14, 75, 189, .06);

  /* Bóng đổ ngả xanh */
  --vnpt-shadow-bubble: 0 1px 2px rgba(14, 75, 189, .06), 0 6px 16px rgba(14, 75, 189, .08);
  --vnpt-shadow-user:   0 6px 16px rgba(0, 87, 229, .22);
  --vnpt-shadow-input:  0 8px 24px rgba(14, 75, 189, .12);

  /* Chuyển động */
  --vnpt-ease-out: cubic-bezier(.16, 1, .3, 1);
}


/* =============================================================================
   1. BẢNG MÀU (mọi kích thước)
   ============================================================================= */

/* Bong bóng */
html body .vnpt-ai-main-wrapper .chat-conversation-mode .chat-history-content .msg-row .msg-bubble {
  box-shadow: var(--vnpt-shadow-bubble) !important;
}
html body .vnpt-ai-main-wrapper .chat-conversation-mode .chat-history-content .msg-row.user-msg .msg-bubble {
  background: var(--vnpt-blue-600) !important;
  box-shadow: var(--vnpt-shadow-user) !important;
}
html body .vnpt-ai-main-wrapper .chat-conversation-mode .chat-history-content .msg-row.ai-msg .msg-bubble {
  color: var(--vnpt-ink-900) !important;
}
html body .vnpt-ai-main-wrapper .chat-conversation-mode .chat-history-content .msg-row.ai-msg .msg-bubble .ai-process-status {
  color: var(--vnpt-ink-500) !important;
}
html body .typing-dots span { background-color: var(--vnpt-ink-400) !important; }

/* Nội dung câu trả lời (markdown) */
html body .msg-text { color: var(--vnpt-ink-900); }
html body .msg-text a { color: var(--vnpt-blue-600) !important; }
html body .msg-text a:hover { color: var(--vnpt-blue-700) !important; }
html body .msg-text table {
  color: var(--vnpt-ink-900) !important;
  border-color: var(--vnpt-line) !important;
}
html body .msg-text table > :not(caption) > * > * { border-color: var(--vnpt-line) !important; }
html body .msg-text table thead { background-color: var(--vnpt-surface-alt) !important; }
html body .msg-text pre { background: var(--vnpt-surface-alt) !important; }
html body .msg-text code { color: var(--vnpt-ink-900); }

/* Nguồn tham khảo */
html body .ai-references,
html body .ai-references .ref-title,
html body .ref-loading-text { color: var(--vnpt-ink-500) !important; }
html body .ai-references { border-top-color: var(--vnpt-line) !important; }
html body .ref-loading-dots span { background-color: var(--vnpt-ink-400) !important; }
html body .ai-references .ref-list-container li,
html body .ai-references .ref-list-container li::marker,
html body .ai-references .ref-doc-link { color: var(--vnpt-blue-600) !important; }
html body .ai-references .ref-item {
  background: #FFFFFF !important;
  border-color: var(--vnpt-blue-100) !important;
  color: var(--vnpt-blue-600) !important;
}
html body .ai-references .ref-item:hover {
  background: var(--vnpt-blue-50) !important;
  border-color: var(--vnpt-blue-200) !important;
}

/* Thích / không thích */
html body .ai-feedback-btn { color: var(--vnpt-ink-500) !important; }
html body .ai-feedback-btn:hover {
  background: var(--vnpt-blue-50) !important;
  color: var(--vnpt-blue-600) !important;
}
html body .ai-feedback-btn.active,
html body .ai-feedback-btn.active.ai-feedback-like { color: var(--vnpt-blue-600) !important; }
html body .ai-feedback-btn.active.ai-feedback-dislike { color: var(--vnpt-danger) !important; }

/* Header khung chat, vạch phân cách lượt hỏi */
html body .vnpt-ai-main-wrapper .chat-conversation-mode .chat-header-active .sub-title-vnpt {
  color: var(--vnpt-ink-900) !important;
}
html body .vnpt-ai-main-wrapper .chat-conversation-mode .chat-history-content .conversation-group {
  border-bottom-color: var(--vnpt-line) !important;
}

/* Ô nhập: chữ, gợi ý, cảnh báo, nút */
html body .vnpt-ai-main-wrapper .vnpt-box-chat-input {
  box-shadow: var(--vnpt-shadow-input) !important;
}
html body .vnpt-ai-main-wrapper:not(.chatting-active) .chat-interactive-area.is-sticky .vnpt-box-chat-input .inner-chat-box {
  box-shadow: var(--vnpt-shadow-input) !important;
}
html body .vnpt-ai-main-wrapper .vnpt-box-chat-input .chat-field { color: var(--vnpt-ink-900) !important; }
html body .vnpt-ai-main-wrapper .vnpt-box-chat-input .chat-field::placeholder {
  color: var(--vnpt-ink-500) !important;
}
html body .chat-input-warning { color: var(--vnpt-danger) !important; }
html body .vnpt-ai-main-wrapper .vnpt-box-chat-input .chat-action-row .send-btn-gradient.has-content,
html body .vnpt-ai-main-wrapper .vnpt-box-chat-input .chat-action-row .stop-btn {
  background: linear-gradient(90deg, var(--vnpt-blue-700) 0%, var(--vnpt-cyan-500) 100%) !important;
}
html body .vnpt-ai-main-wrapper .vnpt-box-chat-input .chat-action-row .send-btn-gradient.has-content:hover,
html body .vnpt-ai-main-wrapper .vnpt-box-chat-input .chat-action-row .stop-btn:hover {
  box-shadow: 0 4px 14px rgba(14, 75, 189, .30) !important;
}
html body .vnpt-ai-main-wrapper .vnpt-box-chat-input .chat-action-row .custom-tooltip::before {
  background: rgba(26, 42, 69, .94) !important;
}
html body .vnpt-ai-main-wrapper .vnpt-box-chat-input .chat-action-row .custom-tooltip::after {
  border-top-color: rgba(26, 42, 69, .94) !important;
}


/* =============================================================================
   2. TIN NHẮN & NỘI DUNG TRẢ LỜI (mọi kích thước)
   ============================================================================= */

/* Nhịp chữ trong bong bóng: line-height 32px -> 26px */
html body .vnpt-ai-main-wrapper .chat-conversation-mode .chat-history-content .msg-row .msg-bubble {
  line-height: 26px !important;
}
/* Cho bóng đổ của bong bóng tràn tự nhiên (trước bị cắt thành mảng vuông ở góc).
   Bảng / code vẫn tự cuộn ngang bên trong bong bóng. */
html body .vnpt-ai-main-wrapper .chat-conversation-mode .chat-history-content .msg-row {
  overflow: visible !important;
}
/* Heading trong câu trả lời: 24px -> 20 / 18 / 16px */
html body .msg-text h1,
html body .msg-text h2 { font-size: 20px !important; line-height: 28px !important; }
html body .msg-text h3,
html body .msg-text h4 { font-size: 18px !important; line-height: 26px !important; }
html body .msg-text h5,
html body .msg-text h6 { font-size: 16px !important; line-height: 24px !important; }

/* Dòng cảnh báo nhập liệu: 12px -> 13px */
html body .chat-input-warning { font-size: 13px !important; line-height: 18px !important; }


/* =============================================================================
   3. Ô NHẬP – HÀNH VI CHUNG
   ============================================================================= */

/* Chỉ chuyển động bóng đổ. "transition: all" cũ làm ô nhập trượt từ trái sang
   khi thoát chế độ chat. */
html body .vnpt-ai-main-wrapper .vnpt-box-chat-input {
  transition: box-shadow .3s ease !important;
}
/* Quay về màn chào: khung nhập hiện dần tại chỗ (class do vnpt-chat-ui.js gắn) */
html body .vnpt-ai-main-wrapper .chat-interactive-area.is-arriving {
  animation: vnptAreaArrive .32s var(--vnpt-ease-out) both;
}


/* =============================================================================
   4. Ô NHẬP MÀN CHÀO – VIỀN, QUẦNG SÁNG, BO GÓC
   Chỉ áp dụng ở màn chào; ô nhập nổi (sticky) và khi đang chat không có hiệu ứng.
   ============================================================================= */
html body .vnpt-ai-main-wrapper .vnpt-box-chat-input { --vnpt-r: 32px; }
@media (max-width: 991px) {
  html body .vnpt-ai-main-wrapper .vnpt-box-chat-input { --vnpt-r: 24px; }
}

/* Bóng riêng của ô nhập: rất nhẹ, để quầng sáng làm vai chính */
html body .vnpt-ai-main-wrapper:not(.chatting-active) .chat-interactive-area:not(.is-sticky) .vnpt-box-chat-input {
  box-shadow: 0 4px 12px rgba(14, 75, 189, .06) !important;
}

/* Viền 1px vẽ trực tiếp trên ô nhập: 1 hình bo góc duy nhất nên nét đều, không lẹm */
html body .vnpt-ai-main-wrapper:not(.chatting-active) .chat-interactive-area:not(.is-sticky) .vnpt-box-chat-input .inner-chat-box {
  border: 1px solid var(--vnpt-input-ring) !important;
}

/* Gỡ 2 lớp conic-gradient xoay vòng của bản gốc; ::after dùng lại làm quầng sáng */
html body .vnpt-ai-main-wrapper .vnpt-box-chat-input::before { display: none !important; }
html body .vnpt-ai-main-wrapper .vnpt-box-chat-input::after {
  content: "" !important;
  position: absolute !important;
  pointer-events: none !important;
  border: 0 !important;
  padding: 0 !important;
  -webkit-mask: none !important;
  mask: none !important;
  background: var(--vnpt-halo) !important;
  background-size: 300% 100% !important;
  background-position: 100% 50% !important;
  border-radius: calc(var(--vnpt-r) + 8px) !important;
  z-index: -1 !important;
  animation: none !important;
  /* Nghỉ: nhỏ, nhạt, căn giữa quanh ô nhập */
  inset: -9px 6px !important;
  filter: blur(22px) !important;
  opacity: .2 !important;
  transition: opacity .4s ease, inset .4s cubic-bezier(.2, .8, .2, 1), filter .4s ease !important;
}
/* Rê chuột: quầng rộng hơn */
html body .vnpt-ai-main-wrapper .vnpt-box-chat-input:hover::after {
  inset: -23px -18px !important;
  filter: blur(36px) !important;
  opacity: .28 !important;
}
/* Bấm vào / đang gõ: quầng rộng nhất, độ đậm chỉ nhích nhẹ */
html body .vnpt-ai-main-wrapper .vnpt-box-chat-input:focus-within::after {
  inset: -54px -80px !important;
  filter: blur(60px) !important;
  opacity: .34 !important;
}
/* Mở màn (tải trang / bấm vào ô – class animate-trigger của code gốc):
   dải màu chảy qua 1 lần, sáng lên rồi tự lắng về trạng thái hiện tại */
html body .vnpt-ai-main-wrapper .vnpt-box-chat-input.animate-trigger::after {
  animation: vnptAuroraFlow 4.5s cubic-bezier(.4, 0, .2, 1), vnptAuroraGlow 4.5s ease !important;
}
/* Ô nhập nổi và khi đang chat: không quầng sáng */
html body .vnpt-ai-main-wrapper .chat-interactive-area.is-sticky .vnpt-box-chat-input::after,
html body .vnpt-ai-main-wrapper.chatting-active .vnpt-box-chat-input::after {
  display: none !important;
}

/* Focus bằng bàn phím (Tab): một vòng xanh rõ ràng, thay vòng trắng + xanh của bản gốc.
   Selector đủ mạnh để thắng bóng nhẹ của màn chào ở trên. */
html body.chat-keyboard-nav .vnpt-ai-main-wrapper .chat-interactive-area .vnpt-box-chat-input:focus-within {
  box-shadow: 0 0 0 3px rgba(0, 87, 229, .35) !important;
}

/* Bo tròn đúng nửa chiều cao ô nhập 1 dòng (dạng viên thuốc) – hết đoạn thẳng
   ngắn ở 2 đầu khiến cung bo trông như bị gãy */
@media (min-width: 992px) {
  html body .vnpt-ai-main-wrapper:not(.chatting-active) .chat-interactive-area:not(.is-sticky) .vnpt-box-chat-input { --vnpt-r: 49px; } /* ô cao 98px */
  html body .vnpt-ai-main-wrapper:not(.chatting-active) .chat-interactive-area:not(.is-sticky) .vnpt-box-chat-input,
  html body .vnpt-ai-main-wrapper:not(.chatting-active) .chat-interactive-area:not(.is-sticky) .vnpt-box-chat-input .inner-chat-box {
    border-radius: var(--vnpt-r) !important;
  }
}
@media (min-width: 992px) and (max-width: 1599px), (min-width: 992px) and (max-height: 800px) {
  html body .vnpt-ai-main-wrapper:not(.chatting-active) .chat-interactive-area:not(.is-sticky) .vnpt-box-chat-input { --vnpt-r: 41px; } /* ô cao 82px */
}


/* =============================================================================
   5. DESKTOP (≥ 992px)
   ============================================================================= */
@media (min-width: 992px) {
  /* Khung chat không chồng lên nav 64px (bản gốc 60px) */
  html body .vnpt-ai-main-wrapper { padding-top: 64px !important; }

  /* --- Chat toàn màn hình: ô nhập gọn 96 -> 72px, chữ 16px --- */
  html body .vnpt-ai-main-wrapper.chatting-active .vnpt-box-chat-input .inner-chat-box,
  html body .vnpt-ai-main-wrapper .chat-interactive-area.is-sticky .vnpt-box-chat-input .inner-chat-box {
    padding: 12px 12px 12px 24px !important;
    column-gap: 12px !important;
  }
  html body .vnpt-ai-main-wrapper.chatting-active .vnpt-box-chat-input .chat-input-main-row .chat-field,
  html body .vnpt-ai-main-wrapper .chat-interactive-area.is-sticky .vnpt-box-chat-input .chat-input-main-row .chat-field {
    font-size: 16px !important;
    line-height: 24px !important;
    padding: 8px 0 !important;
  }
  html body .vnpt-ai-main-wrapper.chatting-active .chat-conversation-mode .chat-history-content {
    height: calc(100dvh - 252px) !important;
  }

  /* --- Thanh nhập nổi & panel nổi ---
     Thanh nổi có sẵn khoảng đệm 16px + viền 1px trong suốt giống panel đã mở,
     nên khi bấm Enter ô nhập giữ nguyên bề rộng và vị trí (không co ngang). */
  html body .vnpt-ai-main-wrapper:not(.chatting-active) .chat-interactive-area.is-sticky {
    padding: 16px !important;
    border: 1px solid transparent !important;
    bottom: 24px !important;
  }
  html body .vnpt-ai-main-wrapper.chatting-active .chat-interactive-area.is-sticky {
    bottom: 24px !important;
    background: var(--vnpt-panel-bg) !important;       /* bản gốc rgba(255,255,255,.30) */
    border: 1px solid var(--vnpt-panel-border) !important;
    box-shadow: var(--vnpt-panel-shadow) !important;
  }
  /* Panel cách nav 24px = cách đáy 24px.
     100dvh - nav 64 - 24 - 24 - khung bao 134 (đệm 32 + hàng icon 28 + ô nhập 72 + 2) */
  html body .vnpt-ai-main-wrapper.sticky-mode-active.chatting-active .chat-conversation-mode .chat-history-content {
    height: max(200px, calc(100dvh - 246px)) !important;
  }
  /* Hàng chứa icon ẩn panel: 44–48 -> 28px, icon 28 -> 20px */
  html body .vnpt-ai-main-wrapper.sticky-mode-active .chat-conversation-mode .chat-header-active {
    min-height: 28px !important;
    height: 28px !important;
  }
  html body .vnpt-ai-main-wrapper.sticky-mode-active .chat-conversation-mode .chat-header-active .close-btn-header {
    min-height: 28px !important;
    height: 28px !important;
    min-width: 40px !important;
  }
  html body .vnpt-ai-main-wrapper.sticky-mode-active .chat-conversation-mode .chat-header-active .close-btn-header .icon-close-chat {
    width: 20px !important;
  }

  /* --- Chuyển động panel (class do code gốc / vnpt-chat-ui.js gắn) --- */
  /* Mở: lộ dần từ ô nhập lên. Giữ slideUpSticky ở đầu danh sách để không bị phát lại. */
  html body .vnpt-ai-main-wrapper .chat-interactive-area.is-sticky.is-opening {
    animation: slideUpSticky .5s cubic-bezier(.165, .84, .44, 1), vnptStickyPanelOpen .36s var(--vnpt-ease-out) both !important;
  }
  html body .vnpt-ai-main-wrapper .chat-interactive-area.is-sticky.is-opening .chat-conversation-mode {
    animation: vnptStickyContentIn .3s .08s var(--vnpt-ease-out) both;
  }
  /* Đóng khi cuộn lên: mờ dần tại chỗ thay vì trượt cả panel xuống */
  html body .vnpt-ai-main-wrapper.chatting-active .chat-interactive-area.is-sticky.is-collapsing {
    animation: vnptStickyPanelClose .26s cubic-bezier(.4, 0, 1, 1) forwards !important;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  /* Dải này thanh nổi cách đáy 64px (theo bản gốc) -> panel cũng cách nav 64px */
  html body .vnpt-ai-main-wrapper:not(.chatting-active) .chat-interactive-area.is-sticky,
  html body .vnpt-ai-main-wrapper.chatting-active .chat-interactive-area.is-sticky { bottom: 64px !important; }
  html body .vnpt-ai-main-wrapper.sticky-mode-active.chatting-active .chat-conversation-mode .chat-history-content {
    height: max(200px, calc(100dvh - 326px)) !important;
  }
}


/* =============================================================================
   6. DESKTOP GỌN (992–1599px hoặc chiều cao ≤ 800px)
   Ví dụ laptop Full HD scale 125% -> vùng hiển thị ~1536×650.
   ============================================================================= */
@media (min-width: 992px) and (max-width: 1599px), (min-width: 992px) and (max-height: 800px) {
  /* Màn chào */
  html body .vnpt-ai-main-wrapper .chat-header-home .text-gradient-vnpt {
    font-size: 32px !important;          /* 42 -> 32 */
    margin-bottom: 40px !important;
  }
  html body .vnpt-ai-main-wrapper:not(.chatting-active) .chat-interactive-area:not(.is-sticky) .vnpt-box-chat-input .inner-chat-box {
    padding: 16px 16px 16px 28px !important;
  }
  html body .vnpt-ai-main-wrapper:not(.chatting-active) .chat-interactive-area:not(.is-sticky) .vnpt-box-chat-input .chat-field {
    font-size: 18px !important;          /* 20 -> 18 */
    line-height: 26px !important;
  }

  /* Bề rộng khung chat 900 -> 760px */
  html body .vnpt-ai-main-wrapper .chat-interactive-area { max-width: 760px !important; }
  html body .vnpt-ai-main-wrapper .chat-interactive-area.is-sticky { width: min(760px, 95%) !important; }

  /* Header khung chat 64 -> 48px */
  html body .vnpt-ai-main-wrapper .chat-conversation-mode .chat-header-active { min-height: 48px !important; }
  html body .vnpt-ai-main-wrapper .chat-conversation-mode .chat-header-active .back-btn-header { padding: 12px !important; }
  html body .vnpt-ai-main-wrapper .chat-conversation-mode .chat-header-active .sub-title-vnpt { font-size: 16px !important; }

  /* Ô nhập khi chat (toàn màn hình và nổi) 72 -> 56px */
  html body .vnpt-ai-main-wrapper.chatting-active .vnpt-box-chat-input .inner-chat-box,
  html body .vnpt-ai-main-wrapper .chat-interactive-area.is-sticky .vnpt-box-chat-input .inner-chat-box {
    padding: 8px 8px 8px 20px !important;
  }
  html body .vnpt-ai-main-wrapper.chatting-active .vnpt-box-chat-input .chat-action-row,
  html body .vnpt-ai-main-wrapper .chat-interactive-area.is-sticky .vnpt-box-chat-input .chat-action-row {
    padding: 0 !important;
  }

  /* Tin nhắn */
  html body .vnpt-ai-main-wrapper .chat-conversation-mode .chat-history-content .msg-row .msg-bubble {
    font-size: 15px !important;
    line-height: 24px !important;
  }
  html body .vnpt-ai-main-wrapper .chat-conversation-mode .chat-history-content { gap: 12px !important; }
  html body .ai-avatar { width: 32px !important; height: 32px !important; }
  html body .msg-text h1,
  html body .msg-text h2 { font-size: 18px !important; line-height: 26px !important; }
  html body .msg-text h3,
  html body .msg-text h4 { font-size: 16px !important; line-height: 24px !important; }

  /* Vùng đọc khi chat toàn màn hình: nav 64 + header 48 + ô nhập 56 + đệm 46 = 214 */
  html body .vnpt-ai-main-wrapper.chatting-active:not(.sticky-mode-active) .chat-conversation-mode .chat-history-content {
    height: calc(100dvh - 214px) !important;
  }
  /* Panel nổi: khung bao 118 (đệm 32 + hàng icon 28 + ô nhập 56 + 2) */
  html body .vnpt-ai-main-wrapper.sticky-mode-active.chatting-active .chat-conversation-mode .chat-history-content {
    height: max(200px, calc(100dvh - 230px)) !important;
  }
  /* Hiệu ứng mở panel bắt đầu đúng chiều cao thanh nhập: 56 + đệm 32 = 88px */
  html body .vnpt-ai-main-wrapper .chat-interactive-area.is-sticky.is-opening {
    animation: slideUpSticky .5s cubic-bezier(.165, .84, .44, 1), vnptStickyPanelOpenCompact .36s var(--vnpt-ease-out) both !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  html body .vnpt-ai-main-wrapper.sticky-mode-active.chatting-active .chat-conversation-mode .chat-history-content {
    height: max(200px, calc(100dvh - 310px)) !important;
  }
}


/* =============================================================================
   7. TABLET & MOBILE (≤ 991px)
   ============================================================================= */
@media (max-width: 991px) {
  /* Chữ ô nhập 16px ở mọi trạng thái -> iOS Safari không tự phóng to khi chạm */
  html body .vnpt-ai-main-wrapper .vnpt-box-chat-input .chat-field,
  html body .vnpt-ai-main-wrapper .vnpt-box-chat-input .chat-input-main-row .chat-field,
  html body .vnpt-ai-main-wrapper .vnpt-box-chat-input .chat-field::placeholder,
  html body .vnpt-ai-main-wrapper:not(.chatting-active) .chat-interactive-area.is-sticky .vnpt-box-chat-input .chat-input-main-row .chat-field,
  html body .vnpt-ai-main-wrapper:not(.chatting-active) .chat-interactive-area.is-sticky .vnpt-box-chat-input:focus-within .chat-input-main-row .chat-field,
  html body .vnpt-ai-main-wrapper:not(.chatting-active) .chat-interactive-area.is-sticky .vnpt-box-chat-input.is-focused .chat-input-main-row .chat-field,
  html body .vnpt-ai-main-wrapper:not(.chatting-active) .chat-interactive-area.is-sticky .vnpt-box-chat-input.has-content .chat-input-main-row .chat-field,
  html body .vnpt-ai-main-wrapper:not(.chatting-active) .chat-interactive-area.is-sticky .vnpt-box-chat-input .chat-input-main-row .chat-field::placeholder,
  html body .vnpt-ai-main-wrapper:not(.chatting-active) .chat-interactive-area.is-sticky .vnpt-box-chat-input:focus-within .chat-input-main-row .chat-field::placeholder {
    font-size: 16px !important;
  }

  /* Ô nhập 1 dòng (đang chat / thanh nổi, chưa gõ): dòng 24px, ô 68px */
  html body .vnpt-ai-main-wrapper.chatting-active .vnpt-box-chat-input:not(:focus-within):not(.is-focused):not(.has-content) .chat-field,
  html body .vnpt-ai-main-wrapper:not(.chatting-active) .chat-interactive-area.is-sticky .vnpt-box-chat-input:not(:focus-within):not(.is-focused):not(.has-content) .chat-field {
    line-height: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
  }
  html body .vnpt-ai-main-wrapper.chatting-active .vnpt-box-chat-input .chat-field::placeholder,
  html body .vnpt-ai-main-wrapper .chat-interactive-area.is-sticky .vnpt-box-chat-input .chat-field::placeholder {
    line-height: 24px !important;
  }
  html body .vnpt-ai-main-wrapper.chatting-active .vnpt-box-chat-input,
  html body .vnpt-ai-main-wrapper:not(.chatting-active) .chat-interactive-area.is-sticky .vnpt-box-chat-input {
    min-height: 68px !important;
  }
  html body .vnpt-ai-main-wrapper.chatting-active .vnpt-box-chat-input:not(:focus-within):not(.is-focused):not(.has-content) .inner-chat-box,
  html body .vnpt-ai-main-wrapper:not(.chatting-active) .chat-interactive-area.is-sticky .vnpt-box-chat-input:not(:focus-within):not(.is-focused):not(.has-content) .inner-chat-box {
    min-height: 68px !important;
    height: 68px !important;
    padding: 12px 12px 12px 16px !important;
  }

  /* Nút mic / gửi / dừng: 24 -> 44px (vùng chạm cho ngón tay) */
  html body .vnpt-ai-main-wrapper .vnpt-box-chat-input .chat-action-row { gap: 4px !important; }
  html body .vnpt-ai-main-wrapper .vnpt-box-chat-input .chat-action-row .mic-btn,
  html body .vnpt-ai-main-wrapper .vnpt-box-chat-input .chat-action-row .send-btn-gradient,
  html body .vnpt-ai-main-wrapper .vnpt-box-chat-input .chat-action-row .stop-btn {
    width: 28px !important;
    height: 28px !important;
    /* padding: 10px !important; */
  }
  html body .vnpt-ai-main-wrapper .vnpt-box-chat-input .chat-action-row .mic-btn img { width: 20px !important; height: 20px !important; }
  html body .vnpt-ai-main-wrapper .vnpt-box-chat-input .chat-action-row .send-btn-gradient img { width: 12px !important; }

  /* Khoảng trống giữa lịch sử và ô nhập: 170 -> 92px (ô 68 + cách đáy 12 + 12) */
  html body .vnpt-ai-main-wrapper:not(.spdv-variant).chatting-active .chat-container-inner.chatting-active .chat-history-content {
    margin-bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html body .vnpt-ai-main-wrapper .chat-conversation-mode .chat-header-active {
    border-bottom-color: rgba(0, 87, 229, .08) !important;
  }
}


/* =============================================================================
   8. TABLET (768–991px)
   ============================================================================= */
@media (min-width: 768px) and (max-width: 991px) {
  html body .vnpt-ai-main-wrapper .chat-conversation-mode .chat-history-content .msg-row.ai-msg .msg-bubble {
    max-width: 88% !important;
  }
  /* Mở chat từ thanh nổi: ghim khung vào mép màn hình (bản gốc giữ bottom: 30px
     khiến header khuất 30px), vùng hội thoại co theo khung */
  html body .vnpt-ai-main-wrapper.chatting-active .chat-interactive-area.is-sticky {
    top: 0 !important;
    bottom: 0 !important;
  }
  html body .vnpt-ai-main-wrapper.chatting-active .chat-conversation-mode .chat-history-content,
  html body .vnpt-ai-main-wrapper.sticky-mode-active .chat-conversation-mode .chat-history-content {
    height: auto !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }
}


/* =============================================================================
   9. MOBILE (≤ 767px)
   ============================================================================= */
@media (max-width: 767px) {
  /* Tiêu đề màn chào: 24px -> ~30–34px, 2 dòng cân */
  html body .vnpt-ai-main-wrapper .chat-header-home .text-gradient-vnpt {
    font-size: clamp(28px, 8.4vw, 34px) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 32px !important;
    text-wrap: balance;
  }

  /* Gợi ý trong ô nhập luôn 1 dòng (câu ngắn do vnpt-chat-ui.js đặt) */
  html body .vnpt-ai-main-wrapper .vnpt-box-chat-input .chat-input-main-row .chat-field::placeholder {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  html body .vnpt-ai-main-wrapper:not(.chatting-active) .chat-interactive-area:not(.is-sticky) .vnpt-box-chat-input .chat-input-main-row .chat-field:placeholder-shown {
    min-height: 24px !important;
  }

  /* Tin nhắn: 14 -> 15px, line-height 32 -> 24px */
  html body .vnpt-ai-main-wrapper .chat-conversation-mode .chat-history-content .msg-row .msg-bubble,
  html body .vnpt-ai-main-wrapper .chat-conversation-mode .chat-history-content .msg-bubble {
    font-size: 15px !important;
    line-height: 24px !important;
  }
  html body .vnpt-ai-main-wrapper .chat-conversation-mode .chat-history-content .msg-row.user-msg .msg-bubble {
    max-width: 85% !important;
  }
  html body .ai-avatar { width: 28px !important; height: 28px !important; }
  html body .vnpt-ai-main-wrapper .chat-conversation-mode .chat-history-content .msg-row.ai-msg { gap: 4px !important; }
  html body .msg-text h1,
  html body .msg-text h2 { font-size: 18px !important; line-height: 26px !important; }
  html body .msg-text h3,
  html body .msg-text h4 { font-size: 16px !important; line-height: 24px !important; }
}
@media (max-width: 359px) {
  /* Màn 320px: gợi ý 15px để vẫn vừa 1 dòng (chữ người dùng gõ vẫn 16px) */
  html body .vnpt-ai-main-wrapper .vnpt-box-chat-input .chat-input-main-row .chat-field::placeholder {
    font-size: 15px !important;
  }
}


/* =============================================================================
   10. MÀN CẢM ỨNG (iPad ngang, laptop cảm ứng…)
   ============================================================================= */
@media (pointer: coarse) {
  html body .vnpt-ai-main-wrapper .vnpt-box-chat-input .chat-action-row .mic-btn,
  html body .vnpt-ai-main-wrapper .vnpt-box-chat-input .chat-action-row .send-btn-gradient,
  html body .vnpt-ai-main-wrapper .vnpt-box-chat-input .chat-action-row .stop-btn {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  html body .ai-feedback-btn { width: 44px !important; height: 44px !important; }
}
@media (min-width: 992px) and (pointer: coarse) {
  /* Nút ẩn panel: hàng chỉ cao 28px nhưng vùng chạm vẫn 44×44 (tràn đều 8px) */
  html body .vnpt-ai-main-wrapper.sticky-mode-active .chat-conversation-mode .chat-header-active .close-btn-header {
    min-height: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    margin: -8px 0 !important;
  }
}


/* =============================================================================
   11. KEYFRAMES
   ============================================================================= */
@keyframes vnptAuroraFlow {            /* quầng sáng ô nhập: dải màu chảy 1 lần */
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}
@keyframes vnptAuroraGlow {            /* không có mốc 100% -> tự lắng về trạng thái hiện tại */
  0%  { opacity: 0; }
  30% { opacity: .45; }
}
@keyframes vnptStickyPanelOpen {       /* desktop lớn: ô nhập 72 + đệm 32 */
  from { clip-path: inset(calc(100% - 104px) 0 0 0 round 32px); }
  to   { clip-path: inset(0 0 0 0 round 32px); }
}
@keyframes vnptStickyPanelOpenCompact {/* desktop gọn: ô nhập 56 + đệm 32 */
  from { clip-path: inset(calc(100% - 88px) 0 0 0 round 32px); }
  to   { clip-path: inset(0 0 0 0 round 32px); }
}
@keyframes vnptStickyContentIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes vnptStickyPanelClose {
  from { opacity: 1; transform: translate(-50%, 0); }
  to   { opacity: 0; transform: translate(-50%, 24px); }
}
@keyframes vnptAreaArrive {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* =============================================================================
   12. GIẢM CHUYỂN ĐỘNG
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  html body .vnpt-ai-main-wrapper .vnpt-box-chat-input::after { animation: none !important; }
  html body .vnpt-ai-main-wrapper .chat-interactive-area.is-sticky,
  html body .vnpt-ai-main-wrapper .chat-interactive-area.is-sticky.is-opening,
  html body .vnpt-ai-main-wrapper .chat-interactive-area.is-sticky.is-opening .chat-conversation-mode,
  html body .vnpt-ai-main-wrapper .chat-interactive-area.is-arriving {
    animation-duration: .01ms !important;
  }
}