/* Container chứa Badge file hiển thị phía trên input */

.file-preview-container {
    width: 100%;                  /* Chiếm full chiều rộng bằng khung input */
    max-width: 800px;            /* Hoặc đặt cùng max-width với ô input/form của bạn */
    margin: 0 auto 10px auto;      /* Giữ container nằm ở giữa khung chat nhưng nội dung bên trong lệch trái */
    display: flex !important;
    justify-content: flex-start !important; /* Đẩy badge bám sát lề trái */
    padding-left: 12px;           /* Canh lề thụt lùi vào cho khớp lề trái của ô text */
    box-sizing: border-box;
}

/* Thẻ Badge xem trước file Word trong ô Input */
.file-badge {
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #ffffff;
    background-color: #f8fbff;
    border: 1px solid #d0d7de;
    border-radius: 8px;
    padding: 0 8px 0 0; /* Xóa padding trái để khối xám bám sát lề */
    font-size: 13.5px;
    color: #32465a;
    max-width: 220px;
    overflow: hidden;   
}

/* Khối xám chứa icon bên trái (Chạm trên chạm dưới + đường gạch bên phải) */
.file-badge-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e2e8f0; /* Nền màu xám nhẹ */
    background-color: #f0f4f9;
    border-right: 1px solid #cbd5e1; /* Vạch gạch đứng ngăn cách */
    padding: 6px 8px; /* Độ rộng khối xám */
    margin-right: 8px;
    flex-shrink: 0;
}

/* Icon SVG bên trong khối xám */
.file-badge-icon svg {
    color: #475569;
    color: var(--primary-color, #0c826f); 
    width: 20px !important;
    height: 20px !important;
    min-width: 20px;
    min-height: 20px;
    display: block;
}

/* Tên File */
.file-badge .file-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 6px;
    font-weight: 500;
    color: #1e293b;
}

/* Nút xóa file (X) */
.remove-file-btn {
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 4px;
    flex-shrink: 0;
    transition: color 0.15s ease-in-out;
}

.remove-file-btn:hover {
    color: #ef4444;
}

/* Fix khoảng trống thừa ở thẻ chứa tin nhắn người dùng */
.user-message .text {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* Ép phần tử con bám top-left, không bị stretch chiếm không gian vertical */
}

/* Thẻ Badge file đã gửi trong khung Chat */
.user-attached-file {
    display: inline-flex;
    align-items: center; /* Căn giữa icon và chữ theo chiều dọc */
    gap: 8px;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    font-size: 0.85em;
    margin-bottom: 5px;
    max-width: 300px;
    width: fit-content;
    text-align: left;
    word-break: break-word;
}

.user-attached-file svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0; /* Giữ nguyên kích thước icon, không bị méo */
    color: #32465a;    
}

/* Định dạng riêng phần chữ tiêu đề tên file */
.user-attached-file strong {
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* Đảm bảo bất kỳ khung nào có attribute hidden hoặc class hidden đều phải ẩn */
#filePreviewContainer.hidden, .file-preview-container.hidden {
    display: none !important;
}

/* Hiệu ứng viền viền đứt nét khi kéo file vào khung chat */
#inputContainer.drag-active {
    border: 2px dashed color-mix(in srgb, var(--primary-color, #0c826f) 60%, transparent);    
    transition: all 0.2s ease ;
    border-radius: 8px ;
}

/* Lớp phủ chứa Icon SVG (+) và Dòng chữ căn giữa tuyệt đối */
#inputContainer.drag-active::after {
    /* Đặt Icon SVG dạng Data URI + Dòng chữ */
    content: "Kéo thả file vào đây";    
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Hiển thị nền đè lên nội dung bên trong */    
    color: var(--primary-color, #0c826f);   
    text-shadow: 0 0 4px #ffffff, 0 0 8px #ffffff, 0 0 12px rgba(255, 255, 255, 0.9);
    background-color: color-mix(in srgb, var(--primary-color, #0c826f) 10%, transparent);   
    font-size: 14px;
    font-weight: 600;    
    /* Căn giữa tuyệt đối cả chiều ngang và dọc bằng CSS Grid / Alignment */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;    
    border-radius: 6px;
    z-index: 99;
    pointer-events: none; /* Tránh cản trở sự kiện dragover/drop */
}