@charset "UTF-8";
.page-wrapper.horizontal-wrapper .page-body-wrapper .page-body { min-height: 100vh !important; }

/* Container chính của preview */
.image-preview { position: relative; overflow: hidden; background: #1a1a1a; /* Màu nền tối giống ảnh của bạn */ }

/* Wrapper bao quanh các dòng skeleton */
.skeleton-wrapper { padding: 15px; display: flex; flex-direction: column; gap: 12px; width: 100%; }

/* Các dòng gạch ngang */
.skeleton-line { height: 12px; background: #e6e6e6; border-radius: 6px; position: relative; overflow: hidden; }

.skeleton-line.short { width: 60%; }

/* Hiệu ứng ánh sáng lướt qua (Shimmer) */
.skeleton-line::after { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent); animation: shimmer 1.5s infinite; }

@keyframes shimmer { 100% { left: 100%; } }

/* Hiệu ứng hiện ảnh mượt mà */
.image-preview img { transition: opacity 0.3s ease-in-out; object-fit: cover; }

.details-sidebar { position: fixed; top: 0; right: -100%; width: 45%; min-width: 300px; max-width: 100vw; height: 100vh; background: #fff; box-shadow: -5px 0 25px rgba(0, 0, 0, 0.1); z-index: 1060; transition: right 0.4s cubic-bezier(0.19, 1, 0.22, 1); display: flex; flex-direction: column; border-left: 1px solid var(--gray-200); }

.details-sidebar .resize-handle { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 1070; transition: background 0.2s; }

.details-sidebar .resize-handle:hover { background: var(--indigo-main); }

.details-sidebar .resize-handle.resizing { background: var(--indigo-main); }

.details-sidebar .sidebar-header { padding: 10px 15px; border-bottom: 1px solid var(--gray-200); display: flex; flex-direction: row; align-items: center; justify-content: space-between; background: #fff; height: 56px; }

.details-sidebar .sidebar-header .sidebar-actions { display: flex; align-items: center; gap: 5px; }

.details-sidebar .slides-wrapper { padding: 0px 10px 10px; }

.details-sidebar .slides-wrapper .slide { border: 1px solid #d0d0ff; border-radius: 10px; padding: 5px 0px; }

.details-sidebar #filePreview .image-preview-wrapper img { margin: auto; }

.details-sidebar.fullscreen { width: 100vw !important; border-left: none; }

.details-sidebar.open { right: 0; }

.details-sidebar .sidebar-body { padding: 0; overflow: hidden; flex: 1; display: flex; flex-direction: column; }

.bg-indigo-500 { background-color: var(--indigo-main) !important; }

.hover\:bg-indigo-50:hover { background-color: var(--indigo-bg) !important; }

.hover\:bg-indigo-600:hover { background-color: #4f46e5 !important; }

.rounded-lg { border-radius: 0.5rem !important; }

.border-indigo-500 { border-color: var(--indigo-main) !important; }

.text-lg { font-size: 1.125rem; }

.text-xl { font-size: 1.25rem; }

.font-medium { font-weight: 500; }

.font-semibold { font-weight: 600; }

.font-bold { font-weight: 700; }

.w-full { width: 100%; }

.gap-10 { gap: 2.5rem; }

.slide-container, .slides-wrapper { height: 100%; width: 100%; }

.slide { display: none; height: 100%; overflow-y: auto; padding: 15px; animation: fadeIn 0.3s ease; }

.slide.active { display: block; }

@keyframes fadeIn { from { opacity: 0;
    transform: translateY(5px); }
  to { opacity: 1;
    transform: translateY(0); } }

.attached-files { margin-top: 2px; display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }

.file-preview { background: rgba(255, 255, 255, 0.15); padding: 0px 10px; border-radius: 8px; display: flex; align-items: center; gap: 8px; border-radius: 6px; border: 1px solid #c2c2c2; font-size: var(--font-size-base); }

.file-preview.image { padding: 10px; gap: 0px; flex-direction: column; padding-bottom: 3px; position: relative; }

.file-preview.image:hover .overlay { opacity: 1; }

.file-preview.image .overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); color: #fff; border-radius: 5px; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity 0.3s ease; }

.file-preview.image img { max-height: 100px; }

.file-icon { font-size: var(--font-size-lg); }

.file-name { word-break: break-all; }

.page-content { height: 100%; }

.page-content .content-card { height: 100%; }

.page-content .content-card .welcome-wrapper { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }

.page-content .content-card .welcome-wrapper .welcome-box { display: flex; align-items: center; gap: 40px; margin-bottom: 30px; transition: all 0.4s ease; opacity: 1; width: 60%; max-width: 1000px; }

.page-content .content-card .welcome-wrapper.hide-welcome .welcome-box { opacity: 0; transform: translateY(-520px); pointer-events: none; display: none; }

.page-content .content-card .welcome-wrapper.hide-welcome .breadcrumb { display: none; }

.page-content .content-card .welcome-wrapper .chat-container { width: 93%; margin-top: 0; max-height: 0; opacity: 0; overflow-y: auto; transition: max-height .45s ease, opacity .45s ease, margin-top .45s ease; border-radius: 0px; height: calc(100vh - 250px); scrollbar-width: none; }

.page-content .content-card .welcome-wrapper .chat-container::-webkit-scrollbar { display: none; }

.page-content .content-card .welcome-wrapper .chat-container.show { max-height: calc(100vh - 250px); opacity: 1; padding-right: 6px; }

.page-content .content-card .welcome-wrapper .chat-container .chat-message { padding: 5px 0px; margin-bottom: 12px; font-size: var(--font-size-base); }

.page-content .content-card .welcome-wrapper .chat-container .chat-message h3 { font-size: var(--font-size-lg); }

.page-content .content-card .welcome-wrapper .chat-container .chat-message.loading .bubble { opacity: 0.6; font-style: italic; }

.page-content .content-card .welcome-wrapper .chat-container .chat-message .chat-header { display: flex; position: relative; }

.page-content .content-card .welcome-wrapper .chat-container .chat-message .chat-header img { width: 35px; height: 35px; margin-right: 10px; border-radius: 50px; }

.page-content .content-card .welcome-wrapper .chat-container .chat-message .chat-header .chat-meta { margin-bottom: 7px; }

.page-content .content-card .welcome-wrapper .chat-container .chat-message .chat-header .chat-meta .chat-name { color: #0e1a5a; font-weight: 600; margin-right: 10px; }

.page-content .content-card .welcome-wrapper .chat-container .chat-message .chat-header .chat-meta .chat-time { color: #666; font-size: var(--font-size-xs); }

.page-content .content-card .welcome-wrapper .chat-container .chat-message.user { margin: 10px 0; display: flex; justify-content: flex-end; }

.page-content .content-card .welcome-wrapper .chat-container .chat-message.user .chat-body { max-width: 85%; padding-right: 70px; }

.page-content .content-card .welcome-wrapper .chat-container .chat-message.user .chat-body .chat-header { flex-direction: row-reverse; position: relative; }

.page-content .content-card .welcome-wrapper .chat-container .chat-message.user .chat-body .chat-header img { border: 1px solid #d7d7d7; margin-right: 0px; margin-left: 10px; position: absolute; top: 4px; right: -45px; }

.page-content .content-card .welcome-wrapper .chat-container .chat-message.user .chat-body .bubble, .page-content .content-card .welcome-wrapper .chat-container .chat-message.user .chat-body .content { color: #000000; border-radius: 13px; max-width: 100%; padding: 10px 15px; border-radius: 10px; background-color: white; padding: 2px 15px; border: 1px solid #ebebeb; border-top-right-radius: 0px; }

.page-content .content-card .welcome-wrapper .chat-container .chat-message.user .chat-body .bubble p, .page-content .content-card .welcome-wrapper .chat-container .chat-message.user .chat-body .content p { margin-bottom: 15px; }

.page-content .content-card .welcome-wrapper .chat-container .chat-message.user .chat-body .bubble h3, .page-content .content-card .welcome-wrapper .chat-container .chat-message.user .chat-body .content h3 { font-size: var(--font-size-lg); }

.page-content .content-card .welcome-wrapper .chat-container .chat-message.assistant { margin: 10px 0; position: relative; }

.page-content .content-card .welcome-wrapper .chat-container .chat-message.assistant .chat-body { padding-left: 70px; max-width: 90%; }

.page-content .content-card .welcome-wrapper .chat-container .chat-message.assistant .chat-body .chat-header img { position: absolute; top: 4px; left: -45px; }

.page-content .content-card .welcome-wrapper .chat-container .chat-message.assistant .content { color: #000000; padding: 12px 0px; border-radius: 10px; max-width: 92%; background-color: white; padding: 10px 15px; border: 1px solid #ebebeb; border-top-left-radius: 0px; }

.page-content .content-card .welcome-wrapper .chat-container .chat-message.assistant .content h3 { font-size: var(--font-size-lg); }

.page-content .content-card .welcome-wrapper .chat-container .chat-message.assistant .content p { margin-bottom: 15px; }

.page-content .content-card .welcome-wrapper .chat-container .chat-message.ai { margin: 10px 0; }

.page-content .content-card .welcome-wrapper .chat-container .chat-message.ai .bubble { color: #000000; padding: 12px 0px; border-radius: 14px; max-width: 92%; }

.page-content .content-card .welcome-wrapper .chat-container .chat-message.ai .bubble p { margin-bottom: 0px; }

.page-content .content-card .welcome-wrapper .chat-container hr { margin: 10px 0px; }

.page-content .content-card .welcome-wrapper .chat-container p { margin: 5px 0px; }

.page-content .content-card .welcome-wrapper .chat-container ul { margin-bottom: 10px; }

.page-content .content-card .welcome-wrapper .chat-input-box { width: 60%; max-width: 1000px; background: white; padding: 12px 20px; border-radius: 12px; display: flex; gap: 10px; position: relative; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06); height: 100px; /* Danh sách tag file */ }

.page-content .content-card .welcome-wrapper .chat-input-box .file-tags { position: absolute; top: -10px; left: 15px; display: flex; flex-wrap: wrap; gap: 6px; z-index: 5; }

.page-content .content-card .welcome-wrapper .chat-input-box .file-tag { background: #e9f3ff; border: 1px solid #bcdcff; padding: 3px 8px; border-radius: 12px; font-size: var(--font-size-mini); display: flex; align-items: center; gap: 6px; }

.page-content .content-card .welcome-wrapper .chat-input-box .file-tag .remove-tag { cursor: pointer; font-size: var(--font-size-xs); color: #ff3b3b; }

.page-content .content-card .welcome-wrapper .chat-input-box input { flex: 1; border: none; outline: none; font-size: var(--font-size-md); height: 35px; }

.page-content .content-card .welcome-wrapper .chat-input-box .send-btn { width: 36px; height: 36px; border-radius: 50%; background: black; color: white; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; }

.page-content .content-card .welcome-wrapper .chat-input-box .chat-actions { position: absolute; bottom: 15px; left: 15px; display: flex; gap: 10px; }

.page-content .content-card .welcome-wrapper .chat-input-box .chat-actions .action-btn { padding: 4px 10px; font-size: var(--font-size-md); background: #ffffff; border: 1px solid #ddd; border-radius: 20px; cursor: pointer; color: #717171; }

.page-content .content-card .welcome-wrapper .chat-input-box .chat-actions .action-btn.active { background: #e9ebff; color: #4c4c4c !important; border-color: #a992f1; }

/* CSS cho lối tắt trong dashboard - màu xám cho nút chưa chọn, khung xanh cho đã chọn */
.welcome-wrapper .breadcrumb .shortcut-btn { border: 1.5px dashed #888; background: transparent; color: #666; padding: 8px 1px; border-radius: 10px; line-height: 16px; text-align: center; width: 70px; height: 70px; font-size: 21px; display: flex; flex-direction: column; justify-content: space-around; letter-spacing: -1px; transition: all 0.3s ease; }

.welcome-wrapper .breadcrumb .shortcut-btn span { font-size: 13px !important; }

.welcome-wrapper .breadcrumb .shortcut-btn:hover { border-color: #6366F1; color: #6366F1; background: rgba(99, 102, 241, 0.05); }

.welcome-wrapper .breadcrumb .shortcut-btn span { font-size: 0.71vw; }

/* Lối tắt đã chọn - khung màu xanh */
.welcome-wrapper .breadcrumb .action-btn { background: white; color: #6366F1; padding: 8px 1px; border-radius: 10px; text-align: center; line-height: 16px; border: 1.5px solid #6366F1; width: 70px; height: 70px; font-size: 21px; letter-spacing: -1px; display: flex; flex-direction: column; justify-content: space-around; transition: all 0.3s ease; text-decoration: none; }

.welcome-wrapper .breadcrumb .action-btn span { font-size: 13px !important; }

.welcome-wrapper .breadcrumb .action-btn i { margin-right: 0px !important; }

.welcome-wrapper .breadcrumb .action-btn:hover { background: #6366F1; color: white; }

.welcome-wrapper .breadcrumb .action-btn i, .welcome-wrapper .breadcrumb .shortcut-btn i { font-size: var(--font-size-lg); height: 14px; }

.welcome-wrapper .breadcrumb .action-btn span, .welcome-wrapper .breadcrumb .shortcut-btn span { font-size: 0.71vw; }

.welcome-wrapper .breadcrumb .slot { display: flex; }

.welcome-wrapper .breadcrumb .shortcut-container { position: relative; display: flex; gap: 10px; }

.welcome-wrapper .breadcrumb .shortcut-container .delete-shortcut-btn { position: absolute; top: -5px; right: -5px; z-index: 1; padding: 0px 3px; font-size: 10px; border-radius: 50%; background-color: #6366F1 !important; color: white; border: 1px solid #fff !important; cursor: pointer; width: 20px; height: 20px; }