/* Dark Mode & Design Polishing */
:root {
    --color-1: #6d28d9;
    --color-1-rgb: 109, 40, 217;
    --color-2: #4c1d95;
    --bg-light: #f8fafc;
    --bg-dark: #0f172a;
    --card-dark: #1e293b;
    --text-dark: #f8fafc;
    --border-dark: #334155;
}

html.dark-mode body {
    background-color: var(--bg-dark) !important;
    color: var(--text-dark) !important;
}

html.dark-mode .bg-light {
    background-color: var(--bg-dark) !important;
}

html.dark-mode .card,
html.dark-mode .modal-content {
    background-color: var(--card-dark) !important;
    color: var(--text-dark) !important;
    border-color: var(--border-dark) !important;
}

html.dark-mode .navbar,
html.dark-mode footer {
    background-color: #1e293b !important;
    border-color: var(--border-dark) !important;
}

html.dark-mode .navbar-brand,
html.dark-mode .nav-link {
    color: var(--text-dark) !important;
}

html.dark-mode .form-control,
html.dark-mode .form-select,
html.dark-mode .input-group-text {
    background-color: #334155 !important;
    color: var(--text-dark) !important;
    border-color: var(--border-dark) !important;
}

html.dark-mode .message-item:hover {
    background-color: #334155 !important;
}

html.dark-mode .text-muted {
    color: #94a3b8 !important;
}

/* Animations & Polishing */
.message-item {
    transition: all 0.3s ease;
}

.message-item:hover {
    transform: translateX(5px);
    background-color: var(--bg-light);
}

.avatar {
    transition: transform 0.3s ease;
}

.message-item:hover .avatar {
    transform: scale(1.1);
}

.btn-generate:active {
    transform: scale(0.95);
}

/* Attachment View Styling */
.attachment-item {
    border: 1px solid var(--border-dark);
    transition: background 0.2s;
}

.attachment-item:hover {
    background: rgba(var(--color-1-rgb), 0.05);
}