.gap-2 {
    gap: 8px;
}

.text-pre-wrap {
    white-space: pre-wrap;
    word-break: break-word;
}

.hover-scale {
    transition: transform 0.2s;
}

.hover-scale:hover {
    transform: scale(1.05);
    z-index: 1;
}

.scroll-smooth {
    scroll-behavior: smooth;
}

/* Custom Scrollbar cho đẹp */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #bdbdbd;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #9e9e9e;
}

.history-timeline :deep(.v-timeline-divider__dot) {
    box-shadow: none;
}

.ticket-dialog :deep(.v-overlay__content) {
    border-radius: 0;
}

body {
    font-family: 'Segoe UI', Helvetica, Arial, sans-serif;
    /* Font chuẩn FB */
    background-color: var(--bg-color);
    color: var(--text-primary);
}

/* Ẩn thanh cuộn mặc định, tạo thanh cuộn đẹp hơn */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #BCC0C4;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #A0A4A8;
}

/* --- Post Card Style --- */
.fb-post-card {
    background-color: var(--card-bg);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    margin-bottom: 16px;
    overflow: hidden;
}

.floating-input-bar {
    position: sticky;

    bottom: 0;
    z-index: 100;
    background-color: #f5f5f5;
    border-top: 1px solid #E4E6EB;
    /* padding: 12px 16px; */
    padding-top: 10px;
    height: auto !important;
}

.fb-input-field {
    background-color: #FFFFFF;
    border-radius: 12px;
    height: auto !important;
    min-height: 44px;
    /* Chiều cao tối thiểu ban đầu cho đẹp */
    display: flex;
    /* Để nội dung bên trong canh chỉnh tốt */
    flex-direction: column;
}


:root {
    --primary-color: #1877F2;
    --bg-color: #F0F2F5;
    --card-bg: #FFFFFF;
    --text-primary: #050505;
    --text-secondary: #65676B;
    --divider-color: #CED0D4;
    --separator-color: #F0F2F5;
    /* Màu dải phân cách */
}

/* Thêm vào trong component is="style" */
.btn-delete-file:hover {
    color: #E53935 !important;
    /* Màu đỏ khi hover */
    background-color: transparent !important;
}

.attachment-chip-fb {
    transition: all 0.2s;
    border: 1px solid transparent;
}

.attachment-chip-fb:hover {
    border-color: #B0BEC5 !important;
    background-color: #ECEFF1 !important;
}


/* Tùy chỉnh Textarea cho bớt thô */
.custom-textarea .v-field--outlined {
    --v-field-border-opacity: 0.15;
    /* Làm mờ viền */
}

.custom-textarea .v-field--focused .v-field__outline {
    --v-field-border-opacity: 0.4;
    /* Đậm hơn chút khi focus */
}

.custom-textarea textarea {
    line-height: 1.6 !important;
    /* Dãn dòng cho dễ đọc */
}

/* Hiệu ứng khi di chuột vào thanh thu gọn */
.cursor-pointer:hover .v-avatar {
    background-color: #E3F2FD !important;
    /* Màu xanh nhạt khi hover */
    transition: 0.3s;
}