/* ==========================================================================
   Frontend Widget Styles (Thiết kế lại)
   ========================================================================== */
.nvtrag-widget {
    font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    font-size: 15px; /* MỚI: Tăng kích thước font cơ bản */
    line-height: 1.5; /* MỚI: Tăng dãn dòng */
}
.nvtrag-floating {
    position: fixed;
    z-index: 9999999999;
    width: 360px; /* MỚI: Tăng chiều rộng 1 chút */
    max-width: calc(100vw - 32px);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.nvtrag-widget .nvtrag-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px; /* MỚI: Bo góc nhiều hơn */
    /* MỚI: Shadow đẹp và rõ hơn */
    box-shadow: 0 10px 40px rgba(0,0,0,.15), 0 2px 10px rgba(0,0,0,.05);
    overflow: hidden;
    width: 100%;
    display: none;
    flex-direction: column;
    max-height: calc(100vh - 40px);
}
.nvtrag-head {
    display: flex;
    /* THAY ĐỔI: Sắp xếp các phần tử với khoảng cách */
    justify-content: flex-start; /* Căn lề trái */
    align-items: center;
    gap: 8px; /* Khoảng cách 8px giữa 3 phần tử */
    
    padding: 12px 16px; 
    background: linear-gradient(135deg, var(--nvtrag-widget-header-color-dark, #a12d2f), var(--nvtrag-widget-header-color, #d63638));
    color: #fff;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* THAY ĐỔI: .nvtrag-head-content bây giờ chỉ chứa Title */
.nvtrag-head-content {
    /* QUAN TRỌNG: Cho phép Title co giãn, đẩy 2 phần tử còn lại sang phải */
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 0; /* Cần thiết để text-overflow hoạt động */
    overflow: hidden; /* Ẩn nếu title quá dài */
}

/* Style cho Title (giữ nguyên nhưng đảm bảo nó là display: block) */
.nvtrag-head-content strong {
    font-weight: 600; 
    font-size: 16px;  
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis; 
    display: block; /* Đảm bảo text-overflow hoạt động */
    max-width: 100%; 
}

/* THÊM MỚI: Định dạng cho #nvtrag-head-status (nằm riêng) */
#nvtrag-head-status {
    flex-shrink: 0; /* Không cho phép status badge bị co lại */
}

/* (File .nvtrag-close-btn đã được định dạng ở lần trước và không cần sửa) */
#nvtrag-head-status .nvtrag-badge { font-size: 11px; padding: 3px 8px; }
#nvtrag-head-status .nvtrag-badge__dot { width: 6px; height: 6px; }

.nvtrag-body {
    padding: 16px; /* MỚI: Tăng padding cho thân chat */
    max-height: 400px; /* MỚI: Tăng chiều cao tối đa trên destop*/
    overflow-y: auto;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 400px;
    -webkit-overflow-scrolling: touch;
    background-color: #fff; /* MỚI: Nền trắng sạch sẽ */
}
.nvtrag-row {
    margin-bottom: 12px; /* MỚI: Tăng khoảng cách tin nhắn */
    display: flex;
}
.nvtrag-row .nvtrag-bubble {
    padding: 10px 14px; /* MỚI: Cân đối padding */
    border-radius: 18px;
    background: #f3f4f6;
    color: #1f2937; /* MỚI: Màu chữ đậm rõ ràng */
    max-width: 85%;
    word-wrap: break-word;
    line-height: 1.5; /* MỚI: Dãn dòng cho dễ đọc */
}

/* === Tin nhắn của Quản trị viên / Bot (Trái) === */
.nvtrag-row .nvtrag-bubble:not(.me) {
    background: #e5e7eb; /* Màu xám nhạt cho admin/bot */
    color: #111827;
    /* Bo góc "đuôi" bên trái */
    border-radius: 18px 18px 18px 4px;
    
    /* MỚI: Đảm bảo nó luôn ở bên trái */
    margin-right: auto; 
    margin-left: 0;
}

/* === Tin nhắn của Khách hàng (Phải) === */
.nvtrag-row .nvtrag-bubble.me {
    /* Nền gradient xanh cho khách */
    background: linear-gradient(135deg, var(--nvtrag-widget-header-color, #d63638), var(--nvtrag-widget-header-color-dark, #a12d2f));
    color: #ffffff; /* Chữ trắng */
    
    /* Bo góc "đuôi" bên phải */
    border-radius: 18px 18px 4px 18px;
    
    /* MỚI: Thêm dòng này để ĐẨY tin nhắn của khách sang phải */
    margin-left: auto;
    margin-right: 0;
}


.nvtrag-foot {
    display: flex;
    gap: 8px;
    border-top: 1px solid #e5e7eb; /* MỚI: Viền xám nhạt hơn */
    padding: 12px; /* MỚI: Tăng padding */
    flex-shrink: 0;
    background: #f9fafb; /* MỚI: Nền hơi xám cho khu vực gõ */
}
.nvtrag-foot input[type="text"] {
    flex: 1;
    padding: 10px 14px; /* MỚI: Tăng padding input */
    border: 1px solid #e5e7eb; /* MỚI: Viền xám nhạt */
    border-radius: 20px;
    outline: none;
    font-size: 14px;
    background: #ffffff; /* MỚI: Input nền trắng */
    transition: all 0.2s ease;
}
/* MỚI: Hiệu ứng khi focus vào ô chat */
.nvtrag-foot input[type="text"]:focus {
    border-color: var(--nvtrag-widget-header-color, #d63638);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
.nvtrag-foot button {
    padding: 10px 18px; /* MỚI: Tăng padding nút */
    border-radius: 20px;
    /* MỚI: Nút gửi có nền gradient giống tin nhắn khách */
    background: linear-gradient(135deg, var(--nvtrag-widget-header-color, #d63638), var(--nvtrag-widget-header-color-dark, #a12d2f));
    color: #fff;
    border: 0;
    cursor: pointer;
    font-weight: 600; /* MỚI: Chữ đậm hơn */
    transition: all 0.2s ease;
    flex-shrink: 0; /* MỚI: Ngăn nút bị co lại */
}
/* MỚI: Hiệu ứng cho nút gửi */
.nvtrag-foot button:hover {
    opacity: 0.9;
    box-shadow: 0 2px 8px rgba(214, 54, 56, 0.3);
}
.nvtrag-foot button:disabled {
    background: #9ca3af;
    cursor: not-allowed;
    box-shadow: none;
}


.nvtrag-cite { font-size: 12px; margin-top: 6px; opacity: .85; color: #6b7280; }

/* MỚI: Cập nhật nvtrag-toggle-btn */

/* 1. Class CHUNG cho cả 2 loại nút (JS dùng để toggle) */
.nvtrag-widget .nvtrag-toggle-btn {
    border: none;
    cursor: pointer;
    padding: 0;
    background: transparent; 
    transition: all 0.2s ease;
    flex-shrink: 0;
    /* Hiệu ứng shadow/scale chung khi hover */
}
.nvtrag-widget .nvtrag-toggle-btn:hover {
    transform: scale(1.1);
    animation-play-state: paused; /* Dừng animation khi hover */
}


/* 2. Style cho nút MẶC ĐỊNH (hình tròn) */
.nvtrag-widget .nvtrag-toggle-btn--default {
    width: 60px; 
    height: 60px;
    border-radius: 50% !important;
    /* Dùng biến CSS color đã có */
    background: linear-gradient(135deg, var(--nvtrag-widget-color-main, #2563eb), var(--nvtrag-widget-color-dark, #1d4ed8));
    color: #fff;
    text-indent: -9999px; /* Ẩn chữ "Chat" */
    overflow: hidden;
    
    /* Animation pulse mặc định */
    animation: nvtrag-toggle-btn-pulse 2.5s infinite ease-in-out;
    
    display: flex; 
    align-items: center; 
    justify-content: center;
    position: relative; 
}
/* Icon chat bên trong nút mặc định */
.nvtrag-toggle-btn--default::before {
    content: '';
    position: absolute;
    width: 30px; 
    height: 30px; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff; 
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}
.nvtrag-widget .nvtrag-toggle-btn--default:hover {
     /* Shadow mạnh khi hover (dùng màu mặc định hoặc màu custom) */
     box-shadow: 0 10px 30px var(--nvtrag-widget-color-main, #2563eb);
     opacity: 0.9;
}


/* 3. Style cho nút ẢNH CUSTOM */
.nvtrag-widget .nvtrag-toggle-btn--custom {
    /* Reset lại các style của nút */
    width: auto; /* Sẽ được set bằng inline style */
    height: auto; /* Sẽ được set bằng inline style */
    border-radius: 0; /* Cho phép ảnh vuông */
    
    /* Style ảnh nền */
    background-size: contain; /* Hiển thị toàn bộ ảnh */
    background-repeat: no-repeat;
    background-position: center;
    
    /* Animation pulse nhẹ hơn (dùng animation của icon liên hệ) */
    animation: nvtrag-pulse-float 3s infinite ease-in-out;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1); /* Shadow mặc định nhẹ */
}
.nvtrag-widget .nvtrag-toggle-btn--custom:hover {
     box-shadow: 0 10px 30px rgba(0,0,0,0.25); /* Shadow mạnh hơn khi hover */
}

.nvtrag-close-btn {
    background: transparent;
    color: #fff;
    opacity: 0.7;
    border: 0;
    font-size: 18px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    padding: 0 !important;
    width: 22px;
    height: 22px;
    border-radius: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0;
    min-height: 18px !important;
}
.nvtrag-close-btn:hover { 
    color: #fff; /* Giữ nguyên màu chữ */
    opacity: 1; /* Hiển thị rõ khi hover */
    background-color: rgba(255, 255, 255, 0.2); /* Thêm nền mờ khi hover */
}

/* Widget Status/Badge */
.nvtrag-badge { display:inline-flex; align-items:center; gap: 6px; background:#eef2ff; color:#111827; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.nvtrag-badge--live { background:#eaffea; color: #166534; }
.nvtrag-badge__dot { width: 8px; height: 8px; border-radius: 50%; }

#nvtrag-status {
    /* Quan trọng: Đảm bảo thanh trạng thái không co lại,
       giống như header và footer */
    flex-shrink: 0;

    /* Các style này đã có trong PHP, nhưng thêm vào đây
       để dễ quản lý và ghi đè */
    padding: 6px 12px;
    font-size: 12px;
    color: #6b7280;
    background: #f9fafb;
    border-top: 1px solid #eee;
    display: none; /* JS sẽ tự động bật/tắt */
}

/* --- Contact Icons & Animation --- */
@keyframes nvtrag-pulse-float {
  0% { 
    transform: scale(1); 
    box-shadow: 0 5px 20px rgba(0,0,0,0.1), 0 0 0 0 rgba(255,255,255,0.7); 
  }
  30% { /* Đỉnh nhấp nháy */
    box-shadow: 0 5px 20px rgba(0,0,0,0.1), 0 0 0 8px rgba(255,255,255,0.0); /* Tạo hiệu ứng lan tỏa */
  }
  50% { 
    transform: scale(1.1); /* Nổi to hơn một chút */
    box-shadow: 0 10px 30px rgba(0,0,0,0.2), 0 0 0 0 rgba(255,255,255,0.7); 
  }
  80% {
    box-shadow: 0 5px 20px rgba(0,0,0,0.1), 0 0 0 8px rgba(255,255,255,0.0);
  }
  100% { 
    transform: scale(1); 
    box-shadow: 0 5px 20px rgba(0,0,0,0.1), 0 0 0 0 rgba(255,255,255,0.7); 
  }
}
@keyframes nvtrag-toggle-btn-pulse {
  0% { 
    transform: scale(1); 
    box-shadow: 0 5px 20px rgba(37, 99, 235, 0.4);
  }
  50% { 
    transform: scale(1.08); /* Phóng to nhẹ hơn một chút */
    box-shadow: 0 10px 30px rgba(37, 99, 235, 0.6); /* Shadow mạnh hơn */
  }
  100% { 
    transform: scale(1); 
    box-shadow: 0 5px 20px rgba(37, 99, 235, 0.4);
  }
}
.nvtrag-contact-icon {
    display: block;
    width: 42px;
    height: 42px;
    /* MỚI: Shadow mặc định nổi hơn một chút */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); 
    /* MỚI: Dùng animation mới cho các icon liên hệ */
    animation: nvtrag-pulse-float 3s infinite ease-in-out;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Tăng thời gian transition */
    background-color: transparent;
    cursor: pointer;
    border-radius: 50%;
    overflow: hidden;
}
.nvtrag-contact-icon:hover { 
    transform: scale(1.25); /* To hơn nhiều khi hover */
    box-shadow: 0 12px 30px rgba(0,0,0,0.2); /* Shadow mạnh hơn khi hover */
    animation-play-state: paused; /* Dừng animation khi hover */
}
.nvtrag-contact-icon img, .nvtrag-contact-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}
.nvtrag-contact-icon:nth-child(2) { animation-delay: 0.25s; }
.nvtrag-contact-icon:nth-child(3) { animation-delay: 0.5s; }
.nvtrag-contact-icon:nth-child(4) { animation-delay: 0.75s; }
.nvtrag-contact-icon:nth-child(5) { animation-delay: 1.0s; }
.nvtrag-contact-icon:nth-child(6) { animation-delay: 1.25s; }

/* Vertical Contact Bar (Chat Closed) */
.nvtrag-contact-bar-vertical {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 10px;
    width: auto;
}

/* Horizontal Slider Contact Bar (Chat Open) */
.nvtrag-contact-bar-horizontal {
    display: none;
    flex-direction: row;
    gap: 14px;
    padding: 10px 16px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: thin;
    scrollbar-color: #ccc #f9fafb;
    flex-shrink: 0;
}
.nvtrag-contact-bar-horizontal::-webkit-scrollbar { height: 4px; }
.nvtrag-contact-bar-horizontal::-webkit-scrollbar-track { background: #f9fafb; }
.nvtrag-contact-bar-horizontal::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 2px; }
.nvtrag-contact-bar-horizontal .nvtrag-contact-icon {
    display: inline-block;
    flex-shrink: 0;
    width: 36px; height: 36px;
    animation: none;
}
.nvtrag-contact-bar-horizontal .nvtrag-contact-icon:hover { transform: scale(1.1); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }

/* Profile Form Styles */
.nvtrag-profile {
    padding: 12px 16px; /* MỚI: Tăng padding */
    border-bottom: 1px solid #e5e7eb; /* MỚI: Viền nhạt hơn */
    display: none;
    background: #f9fafb;
    flex-shrink: 0;
}
.nvtrag-profile div:first-child { display: flex; gap: 8px; flex-wrap: wrap; }
.nvtrag-profile input[type="text"],
.nvtrag-profile input[type="tel"] {
    flex: 1;
    padding: 10px 12px; /* MỚI: Tăng padding */
    border: 1px solid #ddd;
    border-radius: 8px;
    min-width: 120px;
}
.nvtrag-profile button {
    padding: 10px 14px; /* MỚI: Tăng padding */
    border-radius: 8px;
    background: #111827;
    color: #fff;
    border: 0;
    cursor: pointer;
}
#nvtrag-prof-err { margin-top: 6px; color: #c00; font-size: 12px; display: none; }


/* Widget Open/Closed State Styles */
.nvtrag-widget--open .nvtrag-contact-bar-vertical { display: none; }
.nvtrag-widget--open .nvtrag-contact-bar-horizontal { display: flex; }
.nvtrag-widget--open .nvtrag-toggle-btn { display: none; }
.nvtrag-widget--open .nvtrag-card { display: flex; }

.nvtrag-widget--hidden { display: none !important; }

/* ==========================================================================
   TỐI ƯU CHO DI ĐỘNG (MOBILE OPTIMIZATIONS)
   ========================================================================== */
@media (max-width: 600px) {

  /* 1. Thiết lập lại kích thước & vị trí của widget nổi */
  .nvtrag-floating {
    /* Sử dụng !important để ghi đè các style inline từ PHP */
    width: auto !important;       /* Cho phép chiều rộng linh hoạt */
    max-width: none !important;    /* Bỏ giới hạn max-width */
    left: 10px !important;       /* Cách lề trái 10px */
    right: 10px !important;      /* Cách lề phải 10px */
    bottom: 10px !important;     /* Cách lề dưới 10px */
    
    /* Trên di động, luôn căn lề phải cho dễ thao tác */
    align-items: flex-end !important;
  }

  /* 2. Điều chỉnh thẻ chat chính */
  .nvtrag-widget .nvtrag-card {
    /* * Đặt chiều cao tối đa là 85% chiều cao màn hình.
     * Dùng vh (viewport height) thay vì px.
     * (Giá trị cũ của bạn là calc(100vh - 40px) cũng tốt, nhưng 85vh an toàn hơn)
     */
    max-height: 85vh;
    border-radius: 12px; /* Giảm bo góc một chút */
  }

  /* * 3. ĐÂY LÀ PHẦN QUAN TRỌNG NHẤT: Sửa lỗi flexbox của thân chat
   * Chúng ta loại bỏ các giá trị cố định và để flexbox tự chia bố cục.
   */
  .nvtrag-body {
    /* Bỏ các giá trị cố định gây vỡ layout */
    max-height: none;      /* Bỏ max-height: 400px */
    flex-basis: auto;    /* Bỏ flex-basis: 400px */

    /* Giữ lại các thuộc tính đúng */
    flex-grow: 1;        /* Tự động lấp đầy không gian còn lại */
    flex-shrink: 1;      /* Cho phép co lại khi cần */
    overflow-y: auto;    /* Giữ thanh cuộn khi nội dung dài */

    /* Giảm padding một chút trên di động */
    padding: 12px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background-color: #fff; /* MỚI: Nền trắng sạch sẽ */
  }

  /* 4. Tối ưu Header */
  .nvtrag-head {
    padding: 10px 12px;
  }
  .nvtrag-close-btn {
    padding: 0 8px;
  }
  
  /* 5. Tối ưu Form nhập thông tin (Profile) */
  .nvtrag-profile {
    padding: 12px;
  }
  .nvtrag-profile div:first-child {
      /* Xếp chồng các ô input theo chiều dọc */
      flex-direction: column; 
      gap: 10px;
  }
  .nvtrag-profile input[type="text"],
  .nvtrag-profile input[type="tel"],
  .nvtrag-profile button {
      /* Cho các ô input và nút chiếm 100% chiều rộng */
      min-width: 100%;
      width: 100%;
      margin: 0;
  }

  /* 6. Tối ưu khung nhập liệu chat */
  .nvtrag-foot {
    padding: 10px;
  }
  .nvtrag-foot button {
    padding: 10px 14px; /* Giảm padding nút Gửi */
  }

  /* 7. Tối ưu nút mở chat và các icon liên hệ */
  .nvtrag-toggle-btn {
    width: 55px;  /* Thu nhỏ nút */
    height: 55px;
  }
  .nvtrag-contact-bar-vertical {
    gap: 8px;
    margin-bottom: 8px;
  }
  .nvtrag-contact-icon {
    width: 38px;  /* Thu nhỏ icon */
    height: 38px;
  }
  .nvtrag-contact-bar-horizontal .nvtrag-contact-icon {
    width: 34px;
    height: 34px;
  }
}
/* === RAG Widget – Mobile hardening === */
:root{
  /* dùng cho iOS notch */
  --nvtrag-safe-bottom: env(safe-area-inset-bottom, 0px);
  /* fallback khi JS set biến viewport động (bên dưới) */
  --nvtrag-viewport-h: 100vh;
}

/* Cho flex child được co giãn đúng */
.nvtrag-widget .nvtrag-card,
.nvtrag-body { min-height: 0; }

@supports (height: 100dvh) {
  /* Trình duyệt hỗ trợ dvh -> dùng chiều cao viewport động đúng */
  .nvtrag-widget .nvtrag-card { max-height: min(92dvh, 680px); }
}

@media (max-width: 600px){
  /* Đặt khung nổi “thoáng” 2 bên & nhô lên khỏi edge/OS bar */
  .nvtrag-floating{
    left: 12px !important;
    right: 12px !important;
    bottom: max(10px, var(--nvtrag-safe-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    align-items: flex-end !important;
  }

  /* Fallback nếu trình duyệt chưa có dvh: lấy từ biến --nvtrag-viewport-h */
  .nvtrag-widget .nvtrag-card{
    width: 100%;
    border-radius: 12px;
    max-height: min(calc(var(--nvtrag-viewport-h) - 24px), 680px);
    overflow: hidden; /* giữ viền gọn gàng */
  }

  /* Giữ header & footer luôn lộ ra khi phần body cuộn */
  .nvtrag-head{
    position: sticky; top: 0; z-index: 2;
    padding: 10px 12px;
  }
  #nvtrag-status{
    flex-shrink: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .nvtrag-profile, .nvtrag-contact-bar-horizontal{ flex-shrink: 0; }

  .nvtrag-body{
    flex: 1 1 auto;
    max-height: none;
    padding: 12px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain; /* tránh kéo lò xo page dưới */
  }

  .nvtrag-foot{
    position: sticky; bottom: 0; z-index: 2;
    padding: 10px 12px;
    padding-bottom: max(12px, var(--nvtrag-safe-bottom));
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
    flex-shrink: 0;
  }

  /* Tránh iOS auto-zoom làm nhảy layout */
  .nvtrag-foot input[type="text"], .nvtrag-foot button{ font-size: 16px; }
}
/* ==========================================================================
   MỚI: Style cho Badge "Livechat"
   ========================================================================== */
.nvtrag-widget-badge {
    /* Lấy màu nền gradient từ biến màu chính của widget */
    background: linear-gradient(135deg, var(--nvtrag-widget-color-main, #2563eb), var(--nvtrag-widget-color-dark, #1d4ed8));
    color: #fff;
    padding: 5px 12px;
    border-radius: 12px; /* Bo tròn các góc */
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px; /* Khoảng cách 8px tới nút chat bên dưới */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    
    /* Animation cho mượt mà */
    transition: all 0.3s ease;
    opacity: 1;
    transform: translateY(0);
    
    /* Tự động căn lề (trái/phải) theo cài đặt của widget */
    /* (Do .nvtrag-floating đã có align-items: flex-start/flex-end) */
    max-width: fit-content; /* Tự co giãn theo nội dung */
}

/* Ẩn badge đi khi widget đang MỞ */
.nvtrag-widget--open .nvtrag-widget-badge {
    opacity: 0;
    transform: translateY(10px); /* Hiệu ứng trượt xuống khi ẩn */
    display: none; /* Ẩn hoàn toàn */
}
/* Typing Indicator - Bong bóng tin nhắn với 3 dấu chấm nhún nhảy */
.nvtrag-typing {
  align-items: center;
  display: flex;
  height: 17px;
}
.nvtrag-typing .dot {
  animation: nvtrag-typing-anim 1.8s infinite ease-in-out both;
  background-color: #9ca3af;
  border-radius: 50%;
  height: 6px;
  margin-right: 3px;
  vertical-align: middle;
  width: 6px;
  display: inline-block;
}
.nvtrag-typing .dot:nth-child(1) { animation-delay: 200ms; }
.nvtrag-typing .dot:nth-child(2) { animation-delay: 300ms; }
.nvtrag-typing .dot:nth-child(3) { animation-delay: 400ms; }

@keyframes nvtrag-typing-anim {
  0% { transform: translateY(0); }
  28% { transform: translateY(-5px); }
  44% { transform: translateY(0); }
}