/* Import Arabic Font - Must be at the top */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap');

/* Font Family - Inter with system fallbacks */
:root {
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-base: 14px;
    --font-size-sm: 12px;
    --font-size-lg: 16px;
    --font-size-xs: 11px;
}

/* Global Font Settings */
body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.5;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--text-dark);
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-family);
    font-weight: 600;
    line-height: 1.3;
}

h1 {
    font-size: 1.75rem;
}

h2 {
    font-size: 1.375rem;
}

h3 {
    font-size: 1.125rem;
}

h4 {
    font-size: 1rem;
}

/* Compact button styles */
.btn {
    font-size: 13px;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    border: 1px solid transparent;
    transition: all 0.25s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
    pointer-events: none;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.btn:active {
    transform: translateY(0);
}

/* Glassy Primary Button */
.btn-primary {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.9) 0%, rgba(79, 70, 229, 0.9) 100%);
    border-color: rgba(99, 102, 241, 0.5);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

.btn-primary:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 1) 0%, rgba(79, 70, 229, 1) 100%);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
}

/* Glassy Secondary Button */
.btn-secondary {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
    border-color: rgba(203, 213, 225, 0.5);
    color: #475569;
    backdrop-filter: blur(10px);
}

.btn-secondary:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.1) 100%);
    border-color: rgba(203, 213, 225, 0.8);
    color: #334155;
}

/* Glassy Outline Buttons */
.btn-outline-primary {
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.05) 0%, rgba(99, 102, 241, 0.02) 100%);
    border-color: rgba(99, 102, 241, 0.5);
    color: #6366f1;
    backdrop-filter: blur(10px);
}

.btn-outline-primary:hover {
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.15) 0%, rgba(99, 102, 241, 0.08) 100%);
    border-color: #6366f1;
    color: #4f46e5;
}

.btn-outline-secondary {
    background: linear-gradient(180deg, rgba(148, 163, 184, 0.05) 0%, rgba(148, 163, 184, 0.02) 100%);
    border-color: rgba(148, 163, 184, 0.4);
    color: #64748b;
    backdrop-filter: blur(10px);
}

.btn-outline-secondary:hover {
    background: linear-gradient(180deg, rgba(148, 163, 184, 0.12) 0%, rgba(148, 163, 184, 0.05) 100%);
    border-color: #94a3b8;
    color: #475569;
}

/* Dark Mode Glassy Buttons */
:root[data-theme="dark"] .btn,
body[data-theme="dark"] .btn {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    border-color: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
    backdrop-filter: blur(10px);
}

:root[data-theme="dark"] .btn:hover,
body[data-theme="dark"] .btn:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 100%);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

:root[data-theme="dark"] .btn-primary,
body[data-theme="dark"] .btn-primary {
    background: linear-gradient(135deg, rgba(129, 140, 248, 0.9) 0%, rgba(99, 102, 241, 0.9) 100%);
    border-color: rgba(129, 140, 248, 0.5);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
}

:root[data-theme="dark"] .btn-primary:hover,
body[data-theme="dark"] .btn-primary:hover {
    background: linear-gradient(135deg, rgba(129, 140, 248, 1) 0%, rgba(99, 102, 241, 1) 100%);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.5);
}

:root[data-theme="dark"] .btn-secondary,
body[data-theme="dark"] .btn-secondary {
    background: linear-gradient(180deg, rgba(45, 49, 57, 0.8) 0%, rgba(45, 49, 57, 0.4) 100%);
    border-color: rgba(255, 255, 255, 0.1);
    color: #94a3b8;
}

:root[data-theme="dark"] .btn-secondary:hover,
body[data-theme="dark"] .btn-secondary:hover {
    background: linear-gradient(180deg, rgba(61, 68, 79, 0.9) 0%, rgba(45, 49, 57, 0.5) 100%);
    border-color: rgba(255, 255, 255, 0.15);
    color: #e2e8f0;
}

:root[data-theme="dark"] .btn-outline-primary,
body[data-theme="dark"] .btn-outline-primary {
    background: linear-gradient(180deg, rgba(129, 140, 248, 0.08) 0%, rgba(99, 102, 241, 0.03) 100%);
    border-color: rgba(129, 140, 248, 0.4);
    color: #a5b4fc;
}

:root[data-theme="dark"] .btn-outline-primary:hover,
body[data-theme="dark"] .btn-outline-primary:hover {
    background: linear-gradient(180deg, rgba(129, 140, 248, 0.2) 0%, rgba(99, 102, 241, 0.1) 100%);
    border-color: #818cf8;
    color: #c7d2fe;
}

:root[data-theme="dark"] .btn-outline-secondary,
body[data-theme="dark"] .btn-outline-secondary {
    background: linear-gradient(180deg, rgba(45, 49, 57, 0.6) 0%, rgba(45, 49, 57, 0.3) 100%);
    border-color: rgba(148, 163, 184, 0.25);
    color: #94a3b8;
}

:root[data-theme="dark"] .btn-outline-secondary:hover,
body[data-theme="dark"] .btn-outline-secondary:hover {
    background: linear-gradient(180deg, rgba(61, 68, 79, 0.8) 0%, rgba(45, 49, 57, 0.4) 100%);
    border-color: rgba(148, 163, 184, 0.4);
    color: #cbd5e1;
}

.btn-sm {
    font-size: 12px;
    padding: 0.35rem 0.75rem;
    border-radius: 8px;
}

.btn-lg {
    font-size: 14px;
    padding: 0.625rem 1.5rem;
    border-radius: 12px;
}

/* Form controls compact */
.form-control {
    font-size: 13px;
    padding: 0.375rem 0.625rem;
}

/* Enhanced Navbar Styling */
.btn-outline-light {
    border-color: rgba(255, 255, 255, 0.5);
    color: white;
    transition: all 0.3s ease;
}

.btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: white;
    color: white;
    transform: translateY(-1px);
}

/* Enhanced Logo Styling */
.navbar img {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    transition: transform 0.3s ease;
}

.navbar img:hover {
    transform: scale(1.05);
}

/* Global Styles */
:root {
    --primary-color: #6366f1;
    --primary-dark: #4f46e5;
    --primary-light: #a5b4fc;
    --secondary-color: #f8fafc;
    --border-color: #e2e8f0;
    --text-dark: #1e293b;
    --text-muted: #64748b;
    --success-color: #10b981;
    --danger-color: #ef4444;
    --warning-color: #f59e0b;
    --accent-color: #6366f1;
    --accent-light: #f1f5f9;
}

/* Delete Confirmation Modal */
#deleteConfirmModal .modal-content {
    border-radius: 16px;
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    background: #ffffff;
}

#deleteConfirmModal .modal-header {
    padding: 1.5rem 1.5rem 0.75rem;
    border-bottom: none;
}

#deleteConfirmModal .modal-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#deleteConfirmModal .modal-title i {
    color: #ef4444;
    font-size: 1.25rem;
}

#deleteConfirmModal .modal-body {
    padding: 0.5rem 1.5rem 1.5rem;
}

#deleteConfirmModal .modal-body p {
    color: var(--text-dark);
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

#deleteConfirmModal .modal-body .text-muted {
    font-size: 0.85rem;
}

#deleteConfirmModal .modal-footer {
    padding: 0 0.5rem 0.5rem;
    gap: 0.5rem;
    border-top: none;
}

#deleteConfirmModal .btn-primary,
#deleteConfirmModal .btn-danger {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    border: none;
    border-radius: 20px;
    padding: 0.6rem 1.25rem;
    font-weight: 500;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
}

#deleteConfirmModal .btn-primary:hover,
#deleteConfirmModal .btn-danger:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
}

#deleteConfirmModal .btn-secondary {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #64748b;
    border-radius: 20px;
    padding: 0.6rem 1.25rem;
    font-weight: 500;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

#deleteConfirmModal .btn-secondary:hover {
    background: #e2e8f0;
    color: #475569;
}

/* Dark mode delete modal */
:root[data-theme="dark"] #deleteConfirmModal .modal-content,
body[data-theme="dark"] #deleteConfirmModal .modal-content {
    background: #1e2028;
    border: 1px solid #2d3139;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

:root[data-theme="dark"] #deleteConfirmModal .modal-title,
body[data-theme="dark"] #deleteConfirmModal .modal-title {
    color: #f1f5f9;
}

:root[data-theme="dark"] #deleteConfirmModal .modal-title i,
body[data-theme="dark"] #deleteConfirmModal .modal-title i {
    color: #f87171;
}

:root[data-theme="dark"] #deleteConfirmModal .modal-body p,
body[data-theme="dark"] #deleteConfirmModal .modal-body p {
    color: #e2e8f0;
}

:root[data-theme="dark"] #deleteConfirmModal .modal-body .text-muted,
body[data-theme="dark"] #deleteConfirmModal .modal-body .text-muted {
    color: #94a3b8 !important;
}

:root[data-theme="dark"] #deleteConfirmModal .btn-secondary,
body[data-theme="dark"] #deleteConfirmModal .btn-secondary {
    background: #2d3139;
    border: 1px solid #3d444f;
    color: #94a3b8;
}

:root[data-theme="dark"] #deleteConfirmModal .btn-secondary:hover,
body[data-theme="dark"] #deleteConfirmModal .btn-secondary:hover {
    background: #3d444f;
    color: #e2e8f0;
}

:root[data-theme="dark"] #deleteConfirmModal .modal-body .text-muted,
body[data-theme="dark"] #deleteConfirmModal .modal-body .text-muted {
    color: #94a3b8 !important;
}

:root[data-theme="dark"] #deleteConfirmModal .btn-secondary,
body[data-theme="dark"] #deleteConfirmModal .btn-secondary {
    background: #2d3139;
    border-color: #3d444f;
    color: #94a3b8;
}

:root[data-theme="dark"] #deleteConfirmModal .btn-secondary:hover,
body[data-theme="dark"] #deleteConfirmModal .btn-secondary:hover {
    background: #3d444f;
    color: #e2e8f0;
}

/* Dark mode feedback modal */
:root[data-theme="dark"] #feedbackModal .modal-content,
body[data-theme="dark"] #feedbackModal .modal-content {
    background: #1e2028;
    border: 1px solid #2d3139;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

:root[data-theme="dark"] #feedbackModal .modal-title,
body[data-theme="dark"] #feedbackModal .modal-title {
    color: #f1f5f9;
}

:root[data-theme="dark"] #feedbackModal .modal-title i,
body[data-theme="dark"] #feedbackModal .modal-title i {
    color: #fbbf24;
}

:root[data-theme="dark"] #feedbackModal .modal-body p,
body[data-theme="dark"] #feedbackModal .modal-body p {
    color: #e2e8f0;
}

:root[data-theme="dark"] #feedbackModal .form-control,
body[data-theme="dark"] #feedbackModal .form-control {
    background: #2d3139;
    border: 1px solid #3d444f;
    color: #e2e8f0;
}

:root[data-theme="dark"] #feedbackModal .form-control::placeholder,
body[data-theme="dark"] #feedbackModal .form-control::placeholder {
    color: #64748b;
}

:root[data-theme="dark"] #feedbackModal .form-control:focus,
body[data-theme="dark"] #feedbackModal .form-control:focus {
    background: #2d3139;
    border-color: #6366f1;
    color: #e2e8f0;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

:root[data-theme="dark"] #feedbackModal .btn-secondary,
body[data-theme="dark"] #feedbackModal .btn-secondary {
    background: #2d3139;
    border: 1px solid #3d444f;
    color: #94a3b8;
}

:root[data-theme="dark"] #feedbackModal .btn-secondary:hover,
body[data-theme="dark"] #feedbackModal .btn-secondary:hover {
    background: #3d444f;
    color: #e2e8f0;
}

/* Share Session Modal */
#shareSessionModal .modal-content {
    border-radius: 16px;
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

#shareSessionModal .modal-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

#shareSessionModal .modal-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#shareSessionModal .modal-title i {
    color: var(--primary-color);
}

#shareSessionModal .modal-body {
    padding: 1.5rem;
}

#shareSessionModal .modal-body h6 {
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.25rem;
}

#shareSessionModal .modal-body .form-label {
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

#shareSessionModal .modal-body .form-check-input {
    width: 44px;
    height: 22px;
    cursor: pointer;
}

#shareSessionModal .btn-close {
    opacity: 0.5;
}

#shareSessionModal .btn-close:hover {
    opacity: 1;
}

#shareSessionModal #shareToggle {
    cursor: pointer;
}

/* Dark mode share modal */
:root[data-theme="dark"] #shareSessionModal .modal-content,
body[data-theme="dark"] #shareSessionModal .modal-content {
    background: #1e2028;
    border-color: #2d3139;
}

:root[data-theme="dark"] #shareSessionModal .modal-header,
body[data-theme="dark"] #shareSessionModal .modal-header {
    border-bottom-color: #2d3139;
}

:root[data-theme="dark"] #shareSessionModal .modal-title,
body[data-theme="dark"] #shareSessionModal .modal-title {
    color: #f1f5f9;
}

:root[data-theme="dark"] #shareSessionModal .modal-body h6,
body[data-theme="dark"] #shareSessionModal .modal-body h6 {
    color: #e2e8f0;
}

:root[data-theme="dark"] #shareSessionModal .modal-body .text-muted,
body[data-theme="dark"] #shareSessionModal .modal-body .text-muted {
    color: #94a3b8 !important;
}

:root[data-theme="dark"] #shareSessionModal .modal-body .form-label,
body[data-theme="dark"] #shareSessionModal .modal-body .form-label {
    color: #e2e8f0;
}

:root[data-theme="dark"] #shareSessionModal .form-control,
body[data-theme="dark"] #shareSessionModal .form-control {
    background: #2d3139;
    border-color: #3d444f;
    color: #e2e8f0;
}

:root[data-theme="dark"] #shareSessionModal .form-control:focus,
body[data-theme="dark"] #shareSessionModal .form-control:focus {
    background: #2d3139;
    border-color: var(--primary-color);
    color: #e2e8f0;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

:root[data-theme="dark"] #shareSessionModal .btn-outline-secondary,
body[data-theme="dark"] #shareSessionModal .btn-outline-secondary {
    background: #2d3139;
    border-color: #3d444f;
    color: #94a3b8;
}

:root[data-theme="dark"] #shareSessionModal .btn-outline-secondary:hover,
body[data-theme="dark"] #shareSessionModal .btn-outline-secondary:hover {
    background: #3d444f;
    border-color: #52525b;
    color: #e2e8f0;
}

:root[data-theme="dark"] #shareSessionModal .btn-close,
body[data-theme="dark"] #shareSessionModal .btn-close {
    filter: invert(1);
    opacity: 0.7;
}

:root[data-theme="dark"] #shareSessionModal .btn-close:hover,
body[data-theme="dark"] #shareSessionModal .btn-close:hover {
    opacity: 1;
}

.modal-header .btn-close {
    margin: 0 !important;
}

/* Dark mode close button for all modals */
:root[data-theme="dark"] .modal .btn-close,
body[data-theme="dark"] .modal .btn-close {
    filter: invert(1);
    opacity: 0.7;
}

:root[data-theme="dark"] .modal .btn-close:hover,
body[data-theme="dark"] .modal .btn-close:hover {
    opacity: 1;
}

/* Share Toggle Switch - Dark Mode */
:root[data-theme="dark"] #shareSessionModal .form-switch .form-check-input,
body[data-theme="dark"] #shareSessionModal .form-switch .form-check-input {
    background-color: #3d444f;
    border-color: #3d444f;
}

:root[data-theme="dark"] #shareSessionModal .form-switch .form-check-input:checked,
body[data-theme="dark"] #shareSessionModal .form-switch .form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

:root[data-theme="dark"] #shareSessionModal .form-switch .form-check-input:focus,
body[data-theme="dark"] #shareSessionModal .form-switch .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
    border-color: var(--primary-color);
}

/* Dark Mode Variables */
:root[data-theme="dark"] {
    --primary-color: #a5b4fc;
    --primary-dark: #818cf8;
    --primary-light: #c7d2fe;
    --secondary-color: #0f0f0f;
    --border-color: #262626;
    --text-dark: #f5f5f5;
    --text-muted: #a3a3a3;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --danger-color: #ef4444;
    --accent-color: #818cf8;
    --accent-light: rgba(129, 140, 248, 0.1);
    --chat-bg: #0f0f0f;
    --message-bg: #1a1a1a;
    --input-bg: #141414;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    background-color: var(--secondary-color);
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
    line-height: 1.55;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--text-dark);
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-family);
    font-weight: 600;
    line-height: 1.3;
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.5rem;
}

h3 {
    font-size: 1.25rem;
}

h4 {
    font-size: 1.125rem;
}

/* Loading Screen */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    z-index: 9999;
}

/* Login Screen */
.login-screen {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.login-container {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 3rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    max-width: 500px;
    width: 100%;
}

.login-form {
    margin-top: 2rem;
}

.login-screen .btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    border: none;
    padding: 1rem 2rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 18px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(71, 85, 105, 0.3);
}

.login-screen .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(71, 85, 105, 0.4);
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
}

.login-screen .alert-info {
    background-color: rgba(71, 85, 105, 0.1);
    border-color: rgba(71, 85, 105, 0.2);
    color: var(--primary-dark);
    border-radius: 12px;
    padding: 1rem;
}

.login-screen .bi-robot {
    color: var(--primary-color);
    font-size: 4rem;
    margin-bottom: 1rem;
}

.login-screen h2 {
    color: var(--text-dark);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.login-screen .text-muted {
    color: var(--text-muted) !important;
    font-size: 1.1rem;
}

/* Main Application */
.main-app {
    height: 100vh;
    display: block !important;
    visibility: visible !important;
    background-color: var(--secondary-color);
}

/* Ensure main-app is always visible and not hidden by Bootstrap classes */
.main-app.d-none {
    display: flex !important;
    visibility: visible !important;
}

/* Ensure critical elements are visible */
#mainApp {
    display: flex !important;
    visibility: visible !important;
}

#chatMessages {
    display: block !important;
    visibility: visible !important;
}

.chat-input-container {
    display: block !important;
    visibility: visible !important;
}

/* Override Bootstrap conflicts */
.main-app.d-none {
    display: flex !important;
    visibility: visible !important;
}

/* Ensure Bootstrap doesn't hide our critical elements */
#mainApp.d-none,
#chatMessages.d-none,
.chat-input-container.d-none {
    display: flex !important;
    visibility: visible !important;
}

#chatMessages.d-none {
    display: block !important;
}

.chat-input-container.d-none {
    display: block !important;
}

/* Performance: contain heavy chat area to reduce reflow scope - moved to main definition below */

/* Layout variables */
:root {
    --sidebar-width: 280px;
}

body.with-sidebar-collapsed {
    --sidebar-width: 80px;
}

/* Main app uses flex so content always fills remaining space */
.main-app>.container-fluid>.row {
    display: flex;
    min-height: 100vh;
    margin: 0;
    /* Remove Bootstrap row margins */
}

/* Sidebar */
.sidebar {
    background-color: var(--secondary-color);
    border-right: 1px solid var(--border-color);
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    height: 100vh;
    overflow-y: auto;
    overflow-x: visible;
    /* Hide scrollbar but keep scrolling functionality */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* Internet Explorer 10+ */
    transition: width 0.3s ease, min-width 0.3s ease;
}

/* Sidebar Collapsed State (width powered by CSS var) */

/* Hide text elements in collapsed state */
.sidebar.collapsed .sidebar-header .app-name,
.sidebar.collapsed .sidebar-header .app-subtitle,
.sidebar.collapsed .sidebar-header .welcome-text,
.sidebar.collapsed #sidebarUserName,
.sidebar.collapsed .new-chat-minimal .btn-text,
.sidebar.collapsed .session-title,
.sidebar.collapsed .sidebar-footer .user-name,
.sidebar.collapsed .sidebar-footer .user-email {
    display: none !important;
}

/* Also hide the full avatar block, keep only the logout circle */
.sidebar.collapsed .sidebar-footer .user-avatar {
    display: none !important;
}

/* Center icons in collapsed state */
.sidebar.collapsed .sidebar-header {
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* stack icon and controls */
    height: 160px;
    /* increased height for stacked buttons */
    z-index: 3;
    /* keep above any sticky blocks */
    background: rgba(99, 102, 241, 0.02);
    /* subtle background tint */
    border-radius: 8px 8px 0 0;
    /* rounded top corners */
}

/* Dark theme for collapsed sidebar header */
:root[data-theme="dark"] .sidebar.collapsed .sidebar-header,
body[data-theme="dark"] .sidebar.collapsed .sidebar-header {
    background: rgba(99, 102, 241, 0.1) !important;
}

.sidebar.collapsed .sidebar-header-content {
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    gap: 12px;
}

/* Force header row (inner) to become column and center content when collapsed */
.sidebar.collapsed .sidebar-header .d-flex.align-items-center.justify-content-between {
    width: 100%;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px;
    /* increased gap for better visual separation */
}

/* Keep right controls (theme/expand) visible, stack under icon */
.sidebar.collapsed .sidebar-header .d-flex.align-items-center.justify-content-between>.d-flex.align-items-center:last-child {
    order: 2;
    display: flex !important;
    /* ensure visible */
    flex-direction: column !important;
    /* stack buttons vertically */
    gap: 8px !important;
    /* spacing between stacked buttons */
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    /* Ensure full width */
    height: auto !important;
    /* Allow natural height */
    min-height: 80px !important;
    /* increased height for stacked buttons */
    overflow: visible !important;
    /* Ensure buttons are not clipped */
    padding: 8px 0 !important;
    /* add vertical padding */
}

/* On the left group, hide the text block but keep the robot icon */
.sidebar.collapsed .sidebar-header .d-flex.align-items-center.justify-content-between>.d-flex.align-items-center:first-child>div {
    display: none !important;
}

.sidebar.collapsed .sidebar-header .d-flex.align-items-center.justify-content-between>.d-flex.align-items-center:first-child>i {
    display: inline-block !important;
    font-size: 2rem !important;
    /* larger robot icon */
    margin: 0 !important;
    /* remove margin for better centering */
    color: var(--accent-color) !important;
    /* ensure consistent color */
}

/* Removed duplicate/old collapsed New Chat tile styles to prevent conflicts */

.sidebar.collapsed .chat-sessions {
    padding: 0.5rem;
}

.sidebar.collapsed .session-item {
    justify-content: center;
    padding: 0.5rem;
    margin: 0.25rem 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: #fff;
    position: relative;
}

/* Hide any per-session buttons/menus when collapsed */
.sidebar.collapsed .session-options-btn,
.sidebar.collapsed .session-actions,
.sidebar.collapsed .session-metadata {
    display: none !important;
}

/* Hide the entire sessions list in collapsed mode as requested */
body.with-sidebar-collapsed .sidebar.collapsed #chatSessions {
    display: none !important;
}

/* Ensure the New Chat container centers the icon-only button in collapsed */
body.with-sidebar-collapsed .sidebar.collapsed .new-chat-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 8px !important;
    /* increased padding for better spacing */
    position: static !important;
    top: auto !important;
    z-index: 1 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    /* subtle divider */
    /* background: rgba(99, 102, 241, 0.01) !important; */
    /* very subtle background */
    min-height: 70px !important;
    /* ensure adequate height */
    margin: 0 4px !important;
    /* slight margin for visual separation */
    border-radius: 0 !important;
    /* no border radius for clean look */
}

/* Dark theme for collapsed new chat container */
:root[data-theme="dark"] body.with-sidebar-collapsed .sidebar.collapsed .new-chat-container,
body[data-theme="dark"] body.with-sidebar-collapsed .sidebar.collapsed .new-chat-container {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Hide any siblings in the New Chat container except the button when collapsed */
body.with-sidebar-collapsed .sidebar.collapsed .new-chat-container>*:not(#newChatBtn) {
    display: none !important;
}

/* Force New Chat to be icon-only in collapsed state */
body.with-sidebar-collapsed .sidebar.collapsed #newChatBtn {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--accent-color);
    /* background: var(--accent-color); */
    color: var(--accent-color);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2) !important;
}

body.with-sidebar-collapsed .sidebar.collapsed #newChatBtn:hover {
    box-shadow: 0 4px 12px rgba(99, 102, 241, .3);
    transform: scale(1.05) !important;
    /* background: #ffffff !important;
    color: var(--accent-color) !important; */
    border-color: var(--accent-color) !important;
}

/* Dark mode styles for collapsed newChatBtn */
:root[data-theme="dark"] body.with-sidebar-collapsed .sidebar.collapsed #newChatBtn,
body[data-theme="dark"] body.with-sidebar-collapsed .sidebar.collapsed #newChatBtn {
    background: var(--secondary-color) !important;
    border-color: var(--border-color) !important;
    color: var(--accent-color) !important;
}

/* Override new-chat-minimal dark mode for collapsed state */
:root[data-theme="dark"] body.with-sidebar-collapsed .sidebar.collapsed .new-chat-minimal,
body[data-theme="dark"] body.with-sidebar-collapsed .sidebar.collapsed .new-chat-minimal {
    background: var(--secondary-color) !important;
    border-color: var(--border-color) !important;
    color: var(--accent-color) !important;
}

body.with-sidebar-collapsed .sidebar.collapsed #newChatBtn {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    color: #ffffff !important;
    padding: 0 !important;
    font-size: 0 !important;
    /* Hide all text content */
}

body.with-sidebar-collapsed .sidebar.collapsed #newChatBtn i {
    display: inline-block !important;
    /* font-size: 20px !important; */
    margin: 0 !important;
    line-height: 1 !important;
    color: #ffffff !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

body.with-sidebar-collapsed .sidebar.collapsed #newChatBtn::after {
    content: "" !important;
    display: none !important;
}

/* Guard against text overflow to the right - removed to allow buttons to display properly */
/* body.with-sidebar-collapsed .sidebar { overflow-x: hidden !important; } */
.main-content {
    border-left: none !important;
}

/* Keep theme toggle visible in collapsed mode */
body.with-sidebar-collapsed .sidebar.collapsed #themeToggle {
    display: inline-flex !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    flex-shrink: 0 !important;
    /* prevent button from shrinking */
}

body.with-sidebar-collapsed .sidebar.collapsed #themeToggle:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .12) !important;
}

/* Expanded: session item pill styling */
.session-item:not(.sidebar .session-item) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 40px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.session-item:hover {
    border-color: var(--accent-color);
    box-shadow: 0 6px 14px rgba(99, 102, 241, .08);
    transform: translateY(-1px);
}

.session-item.active {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .12);
}

.session-item .session-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.sidebar.collapsed .session-item .session-actions {
    display: none;
}

/* Show an initial when collapsed (provided via data-letter) */
.sidebar.collapsed .session-item::after {
    content: attr(data-letter);
    font-weight: 600;
    color: var(--accent-color);
    font-size: 0.95rem;
}

.sidebar.collapsed .session-item.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
}

.sidebar.collapsed .session-item.active::after {
    color: #fff;
}

/* Footer spacing is handled below; removed duplicate block */

/* Make toggle button more prominent when collapsed */
/* Removed earlier toggle block; using the hard-reset version below */

/* Hard reset for legacy/global styles on the collapsed toggle button */
body.with-sidebar-collapsed .sidebar.collapsed #sidebarToggle {
    all: unset;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: var(--accent-color) !important;
    color: #fff !important;
    cursor: pointer !important;
    margin: 0 !important;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3) !important;
    visibility: visible !important;
    opacity: 1 !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
    /* prevent button from shrinking */
}

body.with-sidebar-collapsed .sidebar.collapsed #sidebarToggle i {
    display: inline-block !important;
    font-size: 16px;
    line-height: 1;
}

body.with-sidebar-collapsed .sidebar.collapsed #sidebarToggle:hover {
    background: var(--primary-dark) !important;
    transform: scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4) !important;
}

/* Dark mode styles for collapsed sidebarToggle */
:root[data-theme="dark"] body.with-sidebar-collapsed .sidebar.collapsed #sidebarToggle,
body[data-theme="dark"] body.with-sidebar-collapsed .sidebar.collapsed #sidebarToggle {
    background: var(--accent-color) !important;
    color: #fff !important;
}

/* Make sure critical header icons/buttons are never hidden */
body.with-sidebar-collapsed .sidebar.collapsed .sidebar-header i.bi-robot,
body.with-sidebar-collapsed .sidebar.collapsed #themeToggle,
body.with-sidebar-collapsed .sidebar.collapsed #sidebarToggle {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Force visibility of all collapsed sidebar buttons */
body.with-sidebar-collapsed .sidebar.collapsed #newChatBtn,
body.with-sidebar-collapsed .sidebar.collapsed #sidebarToggle,
body.with-sidebar-collapsed .sidebar.collapsed #logoutBtn {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure sidebarToggle is always visible in both states */
#sidebarToggle {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure themeToggle is always visible in both states */
#themeToggle {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure sidebar buttons are visible */
#newChatBtn,
#sidebarToggle,
#themeToggle,
#logoutBtn {
    display: inline-flex !important;
    visibility: visible !important;
}

/* Additional collapsed sidebar improvements */
.sidebar.collapsed .sidebar-header .app-logo {
    margin: 0;
}

.sidebar.collapsed .new-chat-minimal i {
    margin: 0;
    font-size: 18px !important;
}

/* Overall collapsed sidebar improvements */
.sidebar.collapsed {
    /* box-shadow: 2px 0 12px rgba(0, 0, 0, 0.08) !important; */
    border-right: 1px solid var(--border-color) !important;
    background: #fff !important;
    /* border-radius: 0 8px 8px 0 !important; */
    /* rounded right corners */
}

/* Dark theme for collapsed sidebar */
:root[data-theme="dark"] .sidebar.collapsed,
body[data-theme="dark"] .sidebar.collapsed {
    background: #0f0f0f !important;
    /* border-right: 1px solid #404040 !important;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.3) !important; */
}

/* Ensure consistent button sizing in collapsed state */
.sidebar.collapsed .btn {
    min-width: 36px !important;
    min-height: 36px !important;
}

/* Removed decorative collapsed session styles; sessions are hidden in collapsed state */

/* Ensure proper spacing in collapsed mode */
.sidebar.collapsed .chat-sessions {
    gap: 0.25rem;
}

/* Hide scrollbar in collapsed mode */
.sidebar.collapsed::-webkit-scrollbar {
    display: none;
}

.sidebar.collapsed {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.sidebar::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

/* Sidebar Header */
.sidebar-header {
    background-color: var(--secondary-color);
    border-bottom: 1px solid var(--border-color);
    height: 56px;
    display: flex;
    align-items: center;
    position: relative;
}

.sidebar-header-content {
    padding: 0 12px;
    width: 100%;
}

/* App icon sizing */
.sidebar-header .bi-robot {
    font-size: 1.4rem;
    line-height: 1;
    margin-right: 8px;
}

.sidebar-header .btn {
    border: none;
    background: none;
    color: var(--text-muted);
    transition: all 0.2s ease;
}

.sidebar-header .btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--text-dark);
}

/* Sidebar Footer */
.sidebar-footer {
    background-color: var(--secondary-color);
    border-top: 1px solid var(--border-color);
    height: 64px;
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
}

.sidebar-footer-content {
    padding: 0 12px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidebar-footer .btn {
    border: none;
    background: none;
    color: var(--text-muted);
    transition: all 0.2s ease;
}

.sidebar-footer .btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--text-dark);
}

/* New Chat Container */
.new-chat-container {
    padding: 16px 16px 12px 16px;
    margin-bottom: 8px;
}

/* User Avatar */
.user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Minimal New Chat Button */
.new-chat-minimal {
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--border-color);
    background: #fff;
    color: var(--accent-color) !important;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}

.new-chat-minimal:hover {
    box-shadow: 0 6px 14px rgba(99, 102, 241, .12);
    border-color: white !important;
    background: #ffffff !important;
    color: var(--accent-color) !important;
    transform: translateY(-1px);
}

.new-chat-minimal:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.new-chat-minimal:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Compact Input Area */
.chat-input-wrapper {
    background: white;
    border-radius: 35px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
    padding: 8px;
    position: relative;
    overflow: visible;
    border: 1px solid #e5e7eb;
    min-height: 52px;
    height: auto !important;
}

.input-group .btn {
    border: none;
    background: none;
    color: var(--text-muted);
    transition: all 0.2s ease;
    padding: 0.5rem;
    flex-shrink: 0 !important;
    align-self: center !important;
}

.input-group .btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--text-dark);
}

.input-group .btn-primary {
    background: #007bff;
    color: white;
    border-radius: 35px !important;
    width: 36px;
    height: 36px;
    margin: 0;
    box-shadow: none;
    transition: all 0.2s ease;
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    z-index: 1 !important;
    flex-shrink: 0 !important;
    /* prevent shrinking */
    align-self: flex-end !important;
    /* align to bottom so it stays with textarea bottom */
    order: 3 !important;
    /* ensure it comes last */
}

.input-group .btn-primary:hover {
    background: #0056b3;
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}

.input-group .btn-primary:disabled {
    opacity: 0.6;
    transform: none;
}

/* Left button group styling */
.input-group .left-button-group {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-right: 0 !important;
    padding: 6px !important;
    border-radius: 30px !important;
    background: #f1f3f4 !important;
    transition: all 0.2s ease !important;
    height: 44px !important;
    flex-shrink: 0 !important;
    align-self: flex-end !important;
    border: 1px solid #e8eaed !important;
    order: 1 !important;
    margin-bottom: 3px;
    margin-left: 4px;
}

.input-group .left-button-group:hover {
    background: #e8eaed !important;
}

/* Individual button containers */
.input-group .left-button-group .dropdown,
.input-group .left-button-group .file-attach-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 36px !important;
    width: 36px !important;
}

/* Mode dropdown button styling - More specific selector */
.chat-input-wrapper .input-group .left-button-group .dropdown .btn {
    border-radius: 18px !important;
    padding: 8px !important;
    background: #f8f9fa !important;
    /* light gray background like in image */
    color: #5f6368 !important;
    /* dark gray icon color */
    border: 1px solid #dadce0 !important;
    /* subtle border */
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
    z-index: 10 !important;
    flex-shrink: 0 !important;
    align-self: flex-end !important;
    /* Override general button alignment */
    margin: 0 !important;
    /* Override any margins */
    position: relative !important;
    /* Ensure proper positioning */
}

/* File attach button styling within button group - More specific selector */
.chat-input-wrapper .input-group .left-button-group .file-attach-btn {
    border-radius: 18px !important;
    padding: 8px !important;
    background: #f8f9fa !important;
    /* light gray background like in image */
    color: #5f6368 !important;
    /* dark gray icon color */
    border: 1px solid #dadce0 !important;
    /* subtle border */
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
    align-self: flex-end !important;
    /* Override general button alignment */
    margin: 6px !important;
    /* Override any margins */
    left: 1px !important;
    position: relative !important;
    /* Ensure proper positioning */
}

.chat-input-wrapper .input-group .left-button-group .dropdown .btn:hover,
.chat-input-wrapper .input-group .left-button-group .file-attach-btn:hover {
    background: #e8eaed !important;
    /* darker gray on hover */
    border-color: #bdc1c6 !important;
    color: #3c4043 !important;
    /* darker icon on hover */
    transform: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* Mode Dropdown */
.dropdown-menu {
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    padding: 0.5rem;
}

.dropdown-item {
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    transition: all 0.2s ease;
}

.dropdown-item:hover {
    background-color: var(--accent-light);
    color: var(--accent-color);
}

.dropdown-item.active {
    background-color: var(--accent-color);
    color: white;
}

/* Suggested Prompts */
.suggested-prompts {
    max-width: 800px;
    margin: 0 auto;
}

.prompt-card {
    width: 100%;
    padding: 20px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    background: #f8fafc;
    color: var(--text-dark);
    text-align: left;
    transition: all 0.2s ease;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 1.25rem;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    box-shadow: none;
}

.prompt-card:hover {
    background: white;
    border-color: var(--accent-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.prompt-card:active {
    transform: translateY(0);
}

.prompt-card i {
    color: var(--accent-color);
    font-size: 1.2rem;
    margin-right: 12px;
    margin-top: 2px;
    flex-shrink: 0;
    transition: color 0.2s ease;
}

.prompt-card:hover i {
    color: var(--primary-dark);
}

.prompt-card .card-content {
    flex: 1;
}

.prompt-card .card-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dark);
    margin: 0 0 4px 0;
    line-height: 1.4;
}

.prompt-card .card-description {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.4;
}

/* Dark Mode Specific Styles */
:root[data-theme="dark"] body {
    background-color: var(--secondary-color);
    color: var(--text-dark);
}

:root[data-theme="dark"] .sidebar {
    background-color: var(--secondary-color);
    border-right-color: var(--border-color);
}

:root[data-theme="dark"] .sidebar-header,
:root[data-theme="dark"] .sidebar-footer {
    background-color: var(--secondary-color);
    border-color: var(--border-color);
}

/* Collapsed footer: center logout only, hide separators */
body.with-sidebar-collapsed .sidebar.collapsed .sidebar-footer {
    justify-content: center !important;
    border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
    /* subtle top border */
    display: flex !important;
    /* Ensure footer is displayed */
    align-items: center !important;
    /* Center vertically */
    height: auto !important;
    /* Allow natural height */
    min-height: 70px !important;
    /* increased minimum height for button */
    overflow: visible !important;
    /* Ensure button is not clipped */
    /* background: rgba(99, 102, 241, 0.02); */
    /* subtle background tint */
    border-radius: 0 0 8px 8px;
    /* rounded bottom corners */
    margin: 0 4px !important;
    /* slight margin for visual separation */
}

/* Dark theme for collapsed sidebar footer */
:root[data-theme="dark"] body.with-sidebar-collapsed .sidebar.collapsed .sidebar-footer,
body[data-theme="dark"] body.with-sidebar-collapsed .sidebar.collapsed .sidebar-footer {
    border-top: 0px !important;

}

body.with-sidebar-collapsed .sidebar.collapsed .sidebar-footer-content {
    padding: 12px 8px !important;
    /* increased padding for better spacing */
    justify-content: center !important;
    align-items: center !important;
    display: flex !important;
}

body.with-sidebar-collapsed .sidebar.collapsed .sidebar-footer .user-avatar,
body.with-sidebar-collapsed .sidebar.collapsed .sidebar-footer .user-name,
body.with-sidebar-collapsed .sidebar.collapsed .sidebar-footer .user-email {
    display: none !important;
}

body.with-sidebar-collapsed .sidebar.collapsed #logoutBtn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--border-color);
    background: #fff;
    color: var(--text-muted);
    transition: all 0.2s ease !important;
}

body.with-sidebar-collapsed .sidebar.collapsed #logoutBtn:hover {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .12);
    transform: scale(1.05) !important;
    color: var(--accent-color) !important;
}

/* Dark mode styles for collapsed logoutBtn */
:root[data-theme="dark"] body.with-sidebar-collapsed .sidebar.collapsed #logoutBtn,
body[data-theme="dark"] body.with-sidebar-collapsed .sidebar.collapsed #logoutBtn {
    background: var(--secondary-color) !important;
    border-color: var(--border-color) !important;
    color: var(--text-dark) !important;
}

:root[data-theme="dark"] .new-chat-minimal {
    background: var(--secondary-color);
    border-color: var(--border-color);
    color: var(--text-dark);
}

:root[data-theme="dark"] .chat-input-wrapper {
    background: rgba(42, 42, 42, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

:root[data-theme="dark"] .prompt-card {
    background: var(--secondary-color);
    border-color: var(--border-color);
    color: var(--text-dark);
}

:root[data-theme="dark"] .dropdown-menu {
    background: var(--secondary-color);
    border-color: var(--border-color);
}

:root[data-theme="dark"] .dropdown-item {
    color: var(--text-dark);
}

:root[data-theme="dark"] .dropdown-item:hover {
    background-color: var(--accent-light);
    color: var(--accent-color);
}

:root[data-theme="dark"] .message {
    background: var(--secondary-color);
    border-color: var(--border-color);
}

:root[data-theme="dark"] .message.user {
    background: var(--accent-light);
}

:root[data-theme="dark"] .message.assistant {
    background: var(--secondary-color);
}

/* Theme Toggle Button */
#themeToggle {
    transition: all 0.3s ease;
}

#themeToggle:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

:root[data-theme="dark"] body.with-sidebar-collapsed .sidebar.collapsed #themeToggle,
body[data-theme="dark"] body.with-sidebar-collapsed .sidebar.collapsed #themeToggle {
    background: var(--secondary-color) !important;
    border-color: var(--border-color) !important;
    color: var(--text-dark) !important;
}

/* Smooth theme transition */
* {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Message Avatars */
.message {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2rem;
    padding: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.message-avatar {
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.user-avatar-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4f4ee752, #eef2ff);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4f46e5;
    font-weight: 600;
    font-size: 0.875rem;
}

[data-theme="dark"] .user-avatar-circle {
    background: linear-gradient(135deg, #253144, #0f172a);
    color: white !important;
    font-weight: 400 !important;
}

.ai-avatar-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #eef2ff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-color);
    font-size: 1rem;
}

[data-theme="dark"] .ai-avatar-circle {
    background: linear-gradient(135deg, #0b3982, #1f2a3c);
    color: white !important;
    font-weight: 400 !important;
}

.ai-avatar-circle.web-search {
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
}

.message-body {
    flex: 1;
    min-width: 0;
}

.message-header {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.message-footer {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.5rem;
    padding-top: 0.4rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    flex-wrap: wrap;
}

.message-copy-btn {
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 0.3rem 0.6rem;
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    background: #f3f4f6;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: all 0.2s ease;
}

.message-copy-btn:hover {
    background: #e5e7eb;
    color: #374151;
    transform: translateY(-1px);
}

.message-copy-btn:active {
    transform: translateY(0);
}

.message-copy-btn.copied {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    border-color: #6366f1;
    color: #ffffff;
}

.message-copy-btn.copied:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
}

.message-copy-btn i {
    font-size: 0.875rem;
}

.message-time {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.message-content {
    line-height: 1.65;
    word-wrap: break-word;
    position: relative;
    z-index: 1;
    font-size: 14px;
    padding: 0.5rem 0.75rem;
    color: var(--text-dark);
}

/* Message role-specific styling */
/* Improved User Message Bubble */
.message.user {
    background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 100%);
    margin-left: 3rem;
    margin-right: 1rem;
    border-radius: 2rem 2rem 0.5rem 2rem;
    border: 1px solid rgba(99, 102, 241, 0.15);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.04);
}

/* Premium Assistant Message Bubble */
.message.assistant {
    /* background: #ffffff; */
    margin-right: 2rem;
    margin-left: 3rem;
    /* border-radius: 1.25rem 1.25rem 1.25rem 0.5rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03); */
}

.message.user:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
}

/* Prevent message hover effects when editing to avoid conflicts */
.message.user.editing:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transform: none;
}

.message.user:active {
    transform: translateY(0);
}


/* Dark mode message styles */
:root[data-theme="dark"] .message,
body[data-theme="dark"] .message {
    background: #1a1a1a;
    border-color: #262626;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

:root[data-theme="dark"] .message.user,
body[data-theme="dark"] .message.user {
    background: linear-gradient(135deg, #1f1f1f 0%, #171717 100%);
    border-color: #333333;
}

:root[data-theme="dark"] .message.assistant,
body[data-theme="dark"] .message.assistant {
    /* background: #141414;
    border-color: #262626;
    border-radius: 1.25rem 1.25rem 1.25rem 0.5rem; */
    margin-right: 2rem;
    margin-left: 3rem;
}

/* Dark mode table styles */
:root[data-theme="dark"] .markdown-table,
:root[data-theme="dark"] .premium-markdown-table,
body[data-theme="dark"] .markdown-table,
body[data-theme="dark"] .premium-markdown-table {
    font-size: 13px;
    border: 1px solid #2d2d2d;
    border-radius: 8px;
    overflow: hidden;
}

:root[data-theme="dark"] .markdown-table th,
:root[data-theme="dark"] .premium-markdown-table th,
body[data-theme="dark"] .markdown-table th,
body[data-theme="dark"] .premium-markdown-table th {
    background-color: #1a1a1a;
    color: #f0f0f0;
    font-weight: 600;
    border-bottom: 1px solid #333333;
    padding: 0.625rem 0.875rem;
    text-align: left;
}

:root[data-theme="dark"] .markdown-table td,
:root[data-theme="dark"] .premium-markdown-table td,
body[data-theme="dark"] .markdown-table td,
body[data-theme="dark"] .premium-markdown-table td {
    color: #bfbfbf;
    border-bottom: 1px solid #262626;
    padding: 0.625rem 0.875rem;
}

/* Alternating row colors (zebra striping) */
:root[data-theme="dark"] .markdown-table tbody tr:nth-child(odd),
:root[data-theme="dark"] .premium-markdown-table tbody tr:nth-child(odd),
body[data-theme="dark"] .markdown-table tbody tr:nth-child(odd),
body[data-theme="dark"] .premium-markdown-table tbody tr:nth-child(odd) {
    background-color: #141414;
}

:root[data-theme="dark"] .markdown-table tbody tr:nth-child(even),
:root[data-theme="dark"] .premium-markdown-table tbody tr:nth-child(even),
body[data-theme="dark"] .markdown-table tbody tr:nth-child(even),
body[data-theme="dark"] .premium-markdown-table tbody tr:nth-child(even) {
    background-color: #0f0f0f;
}

:root[data-theme="dark"] .markdown-table tbody tr:hover,
:root[data-theme="dark"] .premium-markdown-table tbody tr:hover,
body[data-theme="dark"] .markdown-table tbody tr:hover,
body[data-theme="dark"] .premium-markdown-table tbody tr:hover {
    background-color: rgba(99, 102, 241, 0.25) !important;
}

:root[data-theme="dark"] .markdown-table tbody tr:hover td,
:root[data-theme="dark"] .premium-markdown-table tbody tr:hover td,
body[data-theme="dark"] .markdown-table tbody tr:hover td,
body[data-theme="dark"] .premium-markdown-table tbody tr:hover td {
    color: #ffffff !important;
    font-weight: 500;
}

/* User message tables */
:root[data-theme="dark"] .message.user .message-content .markdown-table,
body[data-theme="dark"] .message.user .message-content .markdown-table {
    border-color: #3d3d3d;
}

:root[data-theme="dark"] .message.user .message-content .markdown-table th,
body[data-theme="dark"] .message.user .message-content .markdown-table th {
    background-color: #1f1f1f;
    color: #f0f0f0;
    border-bottom-color: #333333;
}

:root[data-theme="dark"] .message.user .message-content .markdown-table td,
body[data-theme="dark"] .message.user .message-content .markdown-table td {
    color: #bfbfbf;
    border-bottom-color: #2a2a2a;
}

/* Smart Model Selection Info */
.smart-model-info {
    background: rgba(13, 110, 253, 0.05);
    border: 1px solid rgba(13, 110, 253, 0.1);
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
}

.smart-model-info .bi-brain {
    color: var(--primary-color);
}

/* Model Indicator in Messages */
.model-indicator {
    font-size: 0.75rem;
    opacity: 0.7;
}

.model-indicator .bi-cpu {
    color: var(--primary-color);
}

/* Chat Sessions Sidebar */
.chat-sessions {
    background: var(--secondary-color);
    /* Footer (64) + new-chat area (~80) => keep safe bottom padding */
    height: calc(100vh - 64px - 80px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem 1rem 4.5rem 1rem;
    /* prevent overlap over footer */
    position: relative;
    z-index: 1;
    /* Hide scrollbar but keep scrolling functionality */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* Internet Explorer 10+ */
    /* Ensure proper scrolling behavior */
    scroll-behavior: smooth;
    /* Force LTR direction for scroll detection */
    direction: ltr;
}

/* Dark mode: sidebar and session items */
:root[data-theme="dark"] .sidebar,
body[data-theme="dark"] .sidebar {
    background-color: var(--secondary-color);
    border-right-color: var(--border-color);
}

:root[data-theme="dark"] .chat-session-item,
body[data-theme="dark"] .chat-session-item {
    background: transparent;
    border: none;
    color: var(--text-dark);
}

:root[data-theme="dark"] .chat-session-item:hover,
body[data-theme="dark"] .chat-session-item:hover {
    background: #1e293b !important;
}

:root[data-theme="dark"] .chat-session-item.active,
body[data-theme="dark"] .chat-session-item.active {
    background: rgba(99, 102, 241, 0.15) !important;
}

:root[data-theme="dark"] .new-chat-minimal,
body[data-theme="dark"] .new-chat-minimal {
    background: #0f172a;
    border-color: #334155;
    color: var(--text-dark);
}

.chat-sessions::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

.chat-sessions h5 {
    color: var(--text-dark);
    margin-bottom: 1rem;
    font-weight: 600;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 0.5rem;
}

.chat-session-item {
    background: transparent;
    border: none;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 2px;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: none;

    height: auto;
    min-height: 40px;
    display: flex;
    align-items: center;
    font-size: 14px;
    position: relative;
    overflow: visible !important;
}

/* Minimal session button styling */
.chat-session-item:hover {
    background: #f1f5f9 !important;
    transition: all 0.15s ease;
}

.chat-session-item.active {
    background: #eef2ff !important;
    color: var(--primary-dark) !important;
}

.chat-session-item:hover .session-title {
    color: var(--text-dark) !important;
}

.chat-session-item.active .session-title {
    color: var(--primary-dark) !important;
    font-weight: 500 !important;
}

.session-button-content {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 4px;
    position: relative;
}

.session-delete-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 4px;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s ease;
    z-index: 10;
}

.session-delete-btn:hover {
    background: rgba(245, 158, 11, 0.2);
    border-color: rgba(245, 158, 11, 0.4);
    transform: translateY(-50%) scale(1.1);
}

.session-delete-btn i {
    color: #f59e0b;
    font-size: 0.75rem;
    transition: color 0.2s ease;
}

.session-delete-btn:hover i {
    color: #d97706;
}

/* Show delete button on session hover */
.chat-session-item:hover .session-delete-btn {
    opacity: 1;
}

/* Hide delete button for active session */
.chat-session-item.active .session-delete-btn {
    opacity: 0;
}

.session-status-icon {
    font-size: 0.8rem;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

.session-title {
    font-weight: 400;
    font-size: 13px;
    color: var(--text-dark);
    line-height: 1.4;
    flex: 1;
    margin: 0;
    transition: color 0.15s ease;
}

.chat-session-item.active .session-status-icon {
    filter: brightness(1.2);
}

/* Session spacing and active emphasis */
.chat-session-item {
    padding: 8px 10px;
}

.chat-session-item.active {
    background: #eef3ff;
    border: 1px solid #dbe6ff;
}

/* Modern Session Info Display - Integrated within session button */

/* Move tooltip to far right of session button */
.session-with-tooltip {
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
}

/* Session metadata panel that appears on hover */

/* Tooltip now appears to the far right of the session button */
.session-metadata {
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%) translateX(16px) scale(0.95);
    min-width: 220px;
    max-width: 320px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2000;
    /* ensure shown above most UI layers */
    pointer-events: none;
    /* default: don't block clicks */
    font-size: 0.8rem;
    line-height: 1.4;
    white-space: normal;
}

.session-metadata-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.session-metadata-item:last-child {
    margin-bottom: 0;
}

.session-metadata-label {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.session-metadata-value {
    color: var(--text-dark);
    font-weight: 500;
    font-size: 0.82rem;
}

.session-metadata-icon {
    margin-right: 8px;
    color: var(--primary-color);
    font-size: 0.9rem;
}


/* Show metadata on hover, but not when .tooltip-hidden is present (e.g., when options menu is open) */
.session-with-tooltip:hover .session-metadata {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0) scale(1);
    z-index: 99999;
    pointer-events: auto;
}


/* Hide metadata when options menu is active */
.session-with-tooltip.tooltip-hidden:hover .session-metadata {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50%) translateX(16px) scale(0.95);
    pointer-events: none;
}


.session-metadata {
    position: fixed !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.06);
    z-index: 99999 !important;
    pointer-events: auto !important;
    max-width: 120px;
    min-width: 90px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding: 6px 10px;
    margin-bottom: 0;
    font-size: 0.72rem;
    line-height: 0.9;
    white-space: normal;
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: none;
}

.session-with-tooltip:hover .session-metadata {
    display: block;
}

/* Ensure the options button remains clickable when tooltip overlaps it */
.session-options-btn {
    position: relative;
    /* keep it above tooltip area */
    z-index: 2100;
    /* higher than tooltip so clicks hit it */
}

/* Hide the old session-status class */
.session-status {
    display: none;
}

.session-date {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

/* Main Content */
.main-content {
    height: 100vh;
    padding-left: 0 !important;
    padding-right: 0 !important;
    /* width: 100% !important; */
    display: flex !important;
    flex-direction: column;
    visibility: visible !important;
    flex: 1;
    min-width: 0;
    /* CRITICAL: Allows flex item to shrink below content size, preventing wrap */
    /* Take remaining space */
}

/* Force Bootstrap columns to be visible */
.col-md-9,
.col-lg-10 {
    display: block !important;
    visibility: visible !important;
}

/* Dark mode: ensure main surfaces adopt dark background */
:root[data-theme="dark"] .main-content,
body[data-theme="dark"] .main-content {
    background-color: var(--chat-bg) !important;
    color: #ffffff !important;
}

:root[data-theme="dark"] #chatMessages,
body[data-theme="dark"] #chatMessages {
    background-color: var(--chat-bg) !important;
}

:root[data-theme="dark"] .chat-messages,
body[data-theme="dark"] .chat-messages {
    background-color: var(--chat-bg) !important;
}

:root[data-theme="dark"] .welcome-message,
body[data-theme="dark"] .welcome-message {
    background: transparent !important;
    color: #ffffff !important;
    border: none;
    box-shadow: none;
}

/* Dark theme for welcome message content */
:root[data-theme="dark"] .welcome-content,
body[data-theme="dark"] .welcome-content {
    color: #ffffff !important;
}

:root[data-theme="dark"] .welcome-content h2,
body[data-theme="dark"] .welcome-content h2 {
    color: #ffffff !important;
}

:root[data-theme="dark"] .welcome-content p,
body[data-theme="dark"] .welcome-content p {
    color: #cccccc !important;
}

/* Dark theme for prompt cards */
:root[data-theme="dark"] .prompt-card,
body[data-theme="dark"] .prompt-card {
    background: #1e293b !important;
    border-color: transparent !important;
    color: #e2e8f0 !important;
}

:root[data-theme="dark"] .prompt-card:hover,
body[data-theme="dark"] .prompt-card:hover {
    background: #334155 !important;
    border-color: var(--accent-color) !important;
    color: #ffffff !important;
}

:root[data-theme="dark"] .prompt-card i,
body[data-theme="dark"] .prompt-card i {
    color: var(--accent-color) !important;
}

:root[data-theme="dark"] .prompt-card .card-title,
body[data-theme="dark"] .prompt-card .card-title {
    color: #e2e8f0 !important;
}

:root[data-theme="dark"] .prompt-card .card-description,
body[data-theme="dark"] .prompt-card .card-description {
    color: #94a3b8 !important;
}

/* Dark theme for input area */
:root[data-theme="dark"] .input-group,
body[data-theme="dark"] .input-group {
    background-color: #2a2a2a !important;
    border-color: #404040 !important;
}

:root[data-theme="dark"] .form-control,
body[data-theme="dark"] .form-control {
    background-color: #1a1a1a !important;
    border-color: #333333 !important;
    color: #ffffff !important;
}

:root[data-theme="dark"] .form-control::placeholder,
body[data-theme="dark"] .form-control::placeholder {
    color: #737373 !important;
}

/* Dark mode: polish for sidebar brand, tooltips, menus, footer identity */
:root[data-theme="dark"] .app-name,
body[data-theme="dark"] .app-name,
:root[data-theme="dark"] #sidebarAppName,
body[data-theme="dark"] #sidebarAppName {
    color: var(--text-dark) !important;
}

:root[data-theme="dark"] .app-subtitle,
body[data-theme="dark"] .app-subtitle {
    color: var(--text-muted) !important;
}

/* Footer identity colors in dark */
:root[data-theme="dark"] .sidebar-footer .user-name,
body[data-theme="dark"] .sidebar-footer .user-name {
    color: var(--text-dark) !important;
}

:root[data-theme="dark"] .sidebar-footer .user-email,
body[data-theme="dark"] .sidebar-footer .user-email {
    color: var(--text-muted) !important;
}

/* Session tooltip (metadata) dark theme */
:root[data-theme="dark"] .session-metadata,
body[data-theme="dark"] .session-metadata {
    background: linear-gradient(135deg, rgba(17, 24, 39, 0.98) 0%, rgba(15, 23, 42, 0.98) 100%) !important;
    border: 1px solid #1f2937 !important;
    /* slate-800 */
    color: var(--text-dark) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}

:root[data-theme="dark"] .session-metadata-label,
body[data-theme="dark"] .session-metadata-label {
    color: var(--text-muted) !important;
}

:root[data-theme="dark"] .session-metadata-value,
body[data-theme="dark"] .session-metadata-value {
    color: var(--text-dark) !important;
}

/* Session options menu dark theme */
:root[data-theme="dark"] .session-options-menu,
body[data-theme="dark"] .session-options-menu {
    background: #0f172a !important;
    /* slate-900 */
    border: 1px solid #1f2937 !important;
    color: var(--text-dark) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45) !important;
}

:root[data-theme="dark"] .session-options-item,
body[data-theme="dark"] .session-options-item {
    color: var(--text-dark) !important;
}

:root[data-theme="dark"] .session-options-item:hover,
body[data-theme="dark"] .session-options-item:hover {
    background: rgba(129, 140, 248, 0.14) !important;
    color: #c7d2fe !important;
}

/* Continue Chat button readable in dark */
:root[data-theme="dark"] .new-chat-minimal,
body[data-theme="dark"] .new-chat-minimal {
    color: var(--text-dark) !important;
}

/* Dark mode: fix avatar icon color in sidebar header */
:root[data-theme="dark"] .sidebar-header .bi-robot,
body[data-theme="dark"] .sidebar-header .bi-robot {
    color: var(--accent-color) !important;
}

/* Dark mode: footer user avatar icon visibility */
:root[data-theme="dark"] .sidebar-footer .bi-person-circle,
body[data-theme="dark"] .sidebar-footer .bi-person-circle {
    color: var(--accent-color) !important;
}

/* Dark mode: fix white bar at bottom of chat area */
:root[data-theme="dark"] .chat-input-wrapper,
body[data-theme="dark"] .chat-input-wrapper {
    background-color: #374151 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* :root[data-theme="dark"] .chat-input-wrapper:focus-within,
body[data-theme="dark"] .chat-input-wrapper:focus-within {
    box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
} */

:root[data-theme="dark"] .input-group,
body[data-theme="dark"] .input-group {
    background-color: transparent !important;
}

:root[data-theme="dark"] .input-group .form-control,
body[data-theme="dark"] .input-group .form-control {
    background-color: transparent !important;
    color: var(--text-dark) !important;
}

:root[data-theme="dark"] #messageInput.form-control::placeholder,
body[data-theme="dark"] #messageInput.form-control::placeholder {
    color: #6b7280 !important;
}

/* --- Transparent, Smooth Scrollbar for Chat Messages --- */
.chat-messages {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    /* Hidden by default */
    transition: scrollbar-color 0.3s ease;
}

/* Hide scrollbar by default (WebKit) */
.chat-messages::-webkit-scrollbar {
    width: 3px;
}

.chat-messages::-webkit-scrollbar-track {
    background: transparent;
    margin: 10px 0;
}

.chat-messages::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 10px;
    transition: all 0.3s ease;
    opacity: 0;
}

/* Show scrollbar only on hover */
.chat-messages:hover {
    scrollbar-color: rgba(59, 130, 246, 0.3) transparent;
}

.chat-messages:hover::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg,
            rgba(59, 130, 246, 0.4) 0%,
            rgba(139, 92, 246, 0.4) 100%);
    opacity: 1;
}

/* Hovering over the thumb itself for smoother feel */
.chat-messages::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg,
            rgba(59, 130, 246, 0.6) 0%,
            rgba(139, 92, 246, 0.6) 100%);
}

/* Dark Theme Enhancements */
:root[data-theme="dark"] .chat-messages:hover::-webkit-scrollbar-thumb,
body[data-theme="dark"] .chat-messages:hover::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg,
            rgba(59, 130, 246, 0.5) 0%,
            rgba(139, 92, 246, 0.5) 100%);
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
}


.welcome-message {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    position: relative;
    overflow: visible;
    visibility: visible !important;
}

.welcome-content {
    max-width: 700px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.welcome-content h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.welcome-content h3 {
    font-size: 1.5rem;
    font-weight: 500;
    color: #64748b;
    margin-bottom: 1.5rem;
}

.welcome-content p {
    font-size: 0.9rem;
    color: #64748b;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.welcome-content .bi-robot {
    font-size: 4rem;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1.5rem;
    display: block;
    animation: float 3s ease-in-out infinite;
}

/* Dark mode welcome message */
:root[data-theme="dark"] .welcome-message,
body[data-theme="dark"] .welcome-message {
    background: transparent;
    border: none;
    box-shadow: none;
}

:root[data-theme="dark"] .welcome-content h2,
body[data-theme="dark"] .welcome-content h2 {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

:root[data-theme="dark"] .welcome-content h3,
body[data-theme="dark"] .welcome-content h3 {
    color: #cbd5e1;
}

:root[data-theme="dark"] .welcome-content p,
body[data-theme="dark"] .welcome-content p {
    color: #94a3b8;
}

/* Dark mode prompt cards */
:root[data-theme="dark"] .prompt-card,
body[data-theme="dark"] .prompt-card {
    background: #1e293b;
    border-color: rgba(148, 163, 184, 0.15);
    color: #e2e8f0;
}

:root[data-theme="dark"] .prompt-card:hover,
body[data-theme="dark"] .prompt-card:hover {
    background: #334155;
    border-color: var(--accent-color);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }
}

.feature-card {
    text-align: center;
    padding: 0.25rem;
    background-color: var(--accent-light);
    border: 1px solid var(--border-color);
    transition: transform 0.2s, box-shadow 0.2s;
    margin-bottom: 1rem;
}

.feature-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.feature-card i {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--primary-color);
}

/* Message Styles - Updated for Avatar Layout */
/* .message {
    animation: fadeIn 0.3s ease-in;
} */

/* .message:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    transform: translateY(-1px);
} */

.message.user .message-content {
    color: var(--text-dark);
    font-weight: 400;
}

/* .message.user.editing .message-content {
    background: #f8f9fb;
    color: var(--text-dark);
    max-width: 100%;
    margin-left: auto;
    margin-right: 0;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
} */

.edit-interface {
    display: grid;
    gap: 10px;
}

.edit-interface .edit-message-input {
    resize: none;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 0.95rem;
    line-height: 1.5;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
    min-height: 84px;
}

.edit-interface .edit-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Button polish and consistency */
.edit-interface .edit-buttons .btn {
    min-width: 102px;
    letter-spacing: .2px;
}

.edit-interface .btn-success {
    filter: saturate(0.95);
}

.edit-interface .btn-success:disabled {
    opacity: .65;
}

/* Visible focus for accessibility */
.edit-interface .edit-message-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.20);
}

/* User message markdown elements - ensure readability on dark background */
.message.user .message-content .markdown-header {
    color: #ffffff;
}

.message.user .message-content .markdown-paragraph {
    color: #031c5e;
}

[data-theme="dark"] .message.user .message-content .markdown-paragraph {
    color: white !important;
}

.message.user .message-content .markdown-blockquote {
    background-color: rgba(255, 255, 255, 0.1);
    border-left-color: #ffffff;
    color: #ffffff;
}

.message.user .message-content .markdown-list li {
    color: #031c5e;
}

.message.user .message-content .inline-code {
    background-color: rgba(255, 255, 255, 0.2);
    color: #031c5e;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.message.user .message-content .markdown-link {
    color: #031c5e;
    text-decoration: underline;
}

.message.user .message-content .markdown-link:hover {
    color: #031c5e;
}

.message.user .message-content pre {
    background: #f0f4ff;
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 12px;
    padding: 1.5rem 1.25rem;
    box-shadow: inset 0 1px 2px rgba(99, 102, 241, 0.05);
}

.message.user .message-content pre code {
    color: #3730a3;
}

.message.user .message-content .markdown-table {
    background-color: rgba(255, 255, 255, 0.1);
}

.message.user .message-content .markdown-table th {
    background-color: rgba(255, 255, 255, 0.2);
    color: #031c5e;
    border-color: rgba(255, 255, 255, 0.3);
}

.message.user .message-content .markdown-table td {
    color: #031c5e;
    border-color: rgba(255, 255, 255, 0.3);
}

.message.assistant .message-content {
    color: var(--text-dark);
}

.message-time {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* Code Blocks - Modern light styling */
.message-content pre {
    background: #fafbfc;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.5rem 1.25rem;
    overflow-x: auto;
    margin: 1rem 0;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
    max-width: 100%;
}

.message-content code {
    background-color: rgba(79, 70, 229, 0.08);
    color: #6366f1;
    padding: 0.15rem 0.4rem;
    border-radius: 6px;
    font-size: 0.875em;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
}

.message-content pre code {
    background: transparent;
    color: #475569;
    padding: 0;
    border-radius: 0;
    line-height: 1.7;
}

/* Enhanced Markdown Styling */
.markdown-header {
    margin: 1rem 0 0.5rem 0;
    font-weight: 600;
    color: #2c3e50;
}

.markdown-header h1 {
    font-size: 1.8rem;
    border-bottom: 2px solid #3498db;
    padding-bottom: 0.3rem;
}

.markdown-header h2 {
    font-size: 1.5rem;
    border-bottom: 1px solid #bdc3c7;
    padding-bottom: 0.2rem;
}

.markdown-header h3 {
    font-size: 1.3rem;
    color: #34495e;
}

.markdown-paragraph {
    margin: 0.5rem 0;
    line-height: 1.6;
    color: var(--text-dark);
}

[data-theme="dark"] .markdown-paragraph {
    color: white !important;
}

.markdown-blockquote {
    border-left: 4px solid var(--accent-color, #6366f1);
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.05) 0%, rgba(248, 249, 250, 0) 100%);
    border-radius: 0 12px 12px 0;
    font-style: italic;
    color: var(--text-dark);
    font-size: 1.05rem;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.markdown-list {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.markdown-list li {
    margin: 0.3rem 0;
    line-height: 1.5;
}

.markdown-hr {
    border: none;
    border-top: 2px solid #ecf0f1;
    margin: 1.5rem 0;
}

.premium-table-wrapper {
    overflow-x: auto;
    border-radius: 12px;
    margin: 1.5rem 0;

}

.markdown-table,
.premium-markdown-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    text-align: left;
}

.markdown-table th,
.premium-markdown-table th {
    background-color: var(--secondary-color, #f8fafc);
    color: var(--text-dark);
    font-weight: 600;
    padding: 1rem;
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
}

.markdown-table td,
.premium-markdown-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-dark);
}

.markdown-table tbody tr:last-child td,
.premium-markdown-table tbody tr:last-child td {
    border-bottom: none;
}

.markdown-table tbody tr:hover,
.premium-markdown-table tbody tr:hover {
    background-color: rgba(99, 102, 241, 0.02);
}

.inline-code {
    background-color: #f1f2f6;
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    color: #e74c3c;
}

.markdown-link {
    color: #3498db;
    text-decoration: none;
}

.markdown-link:hover {
    text-decoration: underline;
    color: #2980b9;
}

/* Enhanced Code block styling */
pre {
    background-color: #fafbfc;
    color: #475569;
    padding: 1.5rem 1.25rem;
    border-radius: 12px;
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin: 1rem 0;
    position: relative;
}

/* Enhanced code block styling with syntax highlighting */
.hljs {
    background: #f8f9fa !important;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1.25rem !important;
    font-size: 0.875rem;
    line-height: 1.6;
    overflow-x: auto;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    position: relative;
}

.message.assistant .hljs {
    background: #f8f9fa !important;
    color: #24292e !important;
    border-color: #e1e4e8;
}

.message.user .hljs {
    background: #2d3748 !important;
    color: #e2e8f0 !important;
    border-color: #4a5568;
}

/* Enhanced inline code styling */
.inline-code {
    background: #f1f3f4;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace;
    font-size: 0.875em;
    border: 1px solid #e1e5e9;
    color: #d73a49;
    font-weight: 500;
}

.message.assistant .inline-code {
    background: #f1f3f4;
    color: #d73a49;
    border-color: #e1e5e9;
}

.message.user .inline-code {
    background: rgba(255, 255, 255, 0.15);
    color: #ffd700;
    border-color: rgba(255, 255, 255, 0.2);
}

pre code {
    background: none !important;
    padding: 0 !important;
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    border: none !important;
    border-radius: 0 !important;
}

/* Enhanced RTL/LTR content styling */
.rtl-content {
    direction: rtl;
    text-align: right;
    unicode-bidi: embed;
}

.ltr-content {
    direction: ltr;
    text-align: left;
    unicode-bidi: embed;
}

/* RTL-specific styling for markdown elements */
.rtl-content .markdown-list {
    padding-right: 1.5rem;
    padding-left: 0;
}

.rtl-content .markdown-blockquote {
    border-right: 4px solid var(--accent-color, #6366f1);
    border-left: none;
    border-radius: 12px 0 0 12px;
    background: linear-gradient(270deg, rgba(99, 102, 241, 0.05) 0%, rgba(248, 249, 250, 0) 100%);
    padding-right: 1.5rem;
    padding-left: 1rem;
}

.rtl-content .markdown-table th,
.rtl-content .premium-markdown-table th,
.rtl-content .markdown-table td,
.rtl-content .premium-markdown-table td {
    text-align: right;
}

/* RTL styling for message content */
.rtl-content h1,
.rtl-content h2,
.rtl-content h3,
.rtl-content h4,
.rtl-content h5,
.rtl-content h6 {
    text-align: right;
}

.rtl-content p {
    text-align: right;
}

.rtl-content ul,
.rtl-content ol {
    padding-right: 1.5rem;
    padding-left: 0;
}

.rtl-content blockquote {
    border-right: 4px solid var(--primary-color);
    border-left: none;
    padding-right: 1rem;
    padding-left: 0.5rem;
    text-align: right;
}

.rtl-content table {
    direction: rtl;
}

.rtl-content th,
.rtl-content td {
    text-align: right;
}

/* RTL styling for user input field */
#messageInput.rtl-content {
    text-align: right;
    direction: rtl;
}

#messageInput.ltr-content {
    text-align: left;
    direction: ltr;
}

/* RTL styling for message bubbles */
.message.user .rtl-content {
    text-align: right;
}

.message.assistant .rtl-content {
    text-align: right;
}

/* RTL styling for inline code */
.rtl-content code {
    direction: ltr;
    text-align: left;
    unicode-bidi: bidi-override;
}

.rtl-content pre {
    direction: ltr;
    text-align: left;
}

/* RTL styling for edit interface */
.message.user.editing .rtl-content .edit-interface {
    text-align: right;
}

.message.user.editing .rtl-content .edit-message-input {
    text-align: right;
    direction: rtl;
}

.message.user.editing .rtl-content .edit-buttons {
    justify-content: flex-start;
}

/* RTL styling for feedback buttons */
.rtl-content .feedback-container {
    flex-direction: row-reverse;
}

/* RTL styling for file display */
.rtl-content .file-display-item {
    flex-direction: row-reverse;
}

.rtl-content .file-icon {
    margin-right: 0;
    margin-left: 12px;
}

/* Mixed content handling */
.mixed-content {
    unicode-bidi: plaintext;
}

/* Ensure proper text flow for mixed content */
.message-content[dir="rtl"] {
    text-align: right;
}

.message-content[dir="ltr"] {
    text-align: left;
}

/* Chat Input - Compact Modern Style */
.chat-input-container {
    padding: 0.5rem 1rem;
    position: sticky;
    bottom: 0;
    overflow: visible;
    display: block !important;
    visibility: visible !important;
    min-height: auto;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Dark mode: enhanced styling */
:root[data-theme="dark"] .chat-input-container,
body[data-theme="dark"] .chat-input-container {
    /* background: var(--input-bg) !important;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2) !important; */
    border-top-color: var(--border-color) !important;
}

/* Drag & Drop disabled visual state */
.chat-input-container.drag-disabled {
    outline: 2px dashed rgba(156, 163, 175, 0.5);
    outline-offset: 4px;
}

.chat-input-container::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -18px;
    height: 18px;
    pointer-events: none;
}

/* Disable the bright gradient line in dark theme */
:root[data-theme="dark"] .chat-input-container::before,
body[data-theme="dark"] .chat-input-container::before {
    display: none !important;
}

/* Override old input group styles */
.chat-input-wrapper .input-group {
    display: flex !important;
    flex-direction: row !important;
    /* Fixed: changed from column to row */
    gap: 8px !important;
    align-items: flex-end !important;
    /* Changed to flex-end for proper alignment */
    flex-wrap: nowrap !important;
}

.chat-input-wrapper .input-group>.form-control {
    border-radius: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* Center and constrain input width for a more professional look */
.chat-input-wrapper {
    max-width: 75%;
    margin: 0 auto;
    position: relative;
    transition: all 0.2s ease;
    display: block !important;
    visibility: visible !important;
}

/* .chat-input-wrapper:focus-within {
    border-color: #0d6efd;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1), 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
} */


#sendBtn {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.chat-input-container.drag-over {
    background: rgba(0, 123, 255, 0.05);
    border-top: 2px solid #007bff;
    box-shadow: 0 -4px 12px rgba(0, 123, 255, 0.15);
}

.chat-input-wrapper {
    max-width: 75%;
    margin: 0 auto;
    position: relative;
    overflow: visible;
    display: block !important;
    visibility: visible !important;
}

.input-group {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    align-items: flex-end !important;
    /* align to bottom so textarea grows upward */
    transition: all 0.2s ease;
    padding: 0;
    position: relative;
    box-shadow: none;
    min-height: 52px;
    /* consistent height for alignment */
    z-index: 1;
    display: flex !important;
    visibility: visible !important;
    flex-direction: row !important;
    /* horizontal layout - single row */
    gap: 12px !important;
    /* better spacing between elements */
    width: 100%;
    justify-content: flex-start !important;
    /* ensure left alignment */
    flex-wrap: nowrap !important;
    /* prevent wrapping */
    height: auto !important;
    /* allow natural height growth */
}

.input-group .form-control {
    border: none;
    background: transparent;
    padding: 14px 16px;
    /* increased padding for better alignment */
    font-size: 15px;
    display: block !important;
    visibility: visible !important;
    flex: 1 !important;
    min-width: 0 !important;
    line-height: 1.5;
    resize: none;
    outline: none;
    min-height: 24px;
    /* increased min height */
    max-height: 120px;
    overflow-y: auto;
    transition: height 0.2s ease;
    font-family: inherit;
    color: var(--text-dark);
    border-radius: 0;
    text-align: start;
    direction: auto;
    align-self: flex-end !important;
    /* align to bottom so it grows upward */
    flex-shrink: 1 !important;
    /* allow textarea to shrink/grow */
    order: 2 !important;
    /* ensure it comes second */
}

/* Auto-resizing textarea */
.input-group textarea.form-control {
    min-height: 24px;
    max-height: 200px;
    height: auto;
    /* Allow dynamic height */
    overflow-y: auto;
    /* Enable scrolling when content exceeds max height */
    resize: none;
    transition: height 0.15s ease-out;
    /* Match our specific rule */
}

/* All buttons visible by default in unified container */
.file-attach-btn,
.dropdown {
    opacity: 1;
    transform: scale(1);
    transition: all 0.2s ease;
    pointer-events: auto;
}

/* Ensure buttons stay aligned to bottom when textarea grows */
.input-group .btn {
    align-self: flex-end;
    margin-bottom: 0;
}

/* Ensure the specific chat textarea always respects our growth + clearances */
#messageInput.form-control {
    overflow-y: auto !important;
    min-height: 52px !important;
    max-height: 120px !important;
    padding: 14px 100px 14px 16px !important;
    line-height: 1.5 !important;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    text-align: start !important;
    direction: auto !important;
    align-self: flex-end !important;
    flex-shrink: 1 !important;
    resize: none !important;
    box-sizing: border-box !important;
}

/* Placeholder styling */
#messageInput.form-control::placeholder {
    color: #9ca3af;
    /* font-style: italic; */
    opacity: 1;
}

/* Visual indicator when textarea is scrollable */
.input-group textarea.form-control.scrollable {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
    overflow-y: auto;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

/* Enhanced focus state for input group */
/* .input-group:focus-within {
    border-color: var(--accent-color);
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.12), 0 0 0 3px rgba(99, 102, 241, 0.08);
    transform: translateY(-1px);
} */

.input-group textarea.form-control:focus {
    outline: none;
}

/* Enhanced scrollbar styling for textarea */
.input-group textarea.form-control::-webkit-scrollbar {
    width: 6px;
}

.input-group textarea.form-control::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 3px;
}

.input-group textarea.form-control::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
    transition: background 0.2s ease;
}

.input-group textarea.form-control::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}

.input-group textarea.form-control:focus::-webkit-scrollbar-thumb {
    background: rgba(79, 70, 229, 0.3);
}

.input-group textarea.form-control:focus::-webkit-scrollbar-thumb:hover {
    background: rgba(79, 70, 229, 0.4);
}

/* Placeholder styling - Light theme */
.input-group textarea.form-control::placeholder {
    color: #9ca3af;
    font-style: normal;
    font-weight: 400;
    transition: opacity 0.2s ease;
}

.input-group textarea.form-control:focus::placeholder {
    opacity: 0.6;
}

/* Responsive improvements for mobile - Light theme with better scrolling */
@media (max-width: 768px) {
    .chat-input-container {
        padding: 1.5rem 1rem;
        /* background: #ffffff; */
    }

    .input-group {
        padding: 4px;
        background: #ffffff;
        min-height: 2.75rem;
    }

    .input-group textarea.form-control {
        font-size: 16px;
        /* Prevents zoom on iOS */
        padding: 0.5rem 1rem;
        min-height: 2rem;
        height: 2rem;
        max-height: 80px;
        /* Smaller max height on mobile */
        color: #2d3748;
        line-height: 1.0;
        vertical-align: top;
    }

    .input-group .btn {
        padding: 0.5rem;
        min-height: 2.5rem;
        width: 2.5rem;
        font-size: 0.9rem;
    }

    .chat-input-wrapper {
        max-width: 100%;
        overflow: visible;
    }

    /* Mobile scrollbar styling */
    .input-group textarea.form-control::-webkit-scrollbar {
        width: 4px;
    }
}

/* Remove conflicting focus styles */
.input-group .form-control:focus {
    box-shadow: none;
}

.input-group .btn {
    border: none;
    padding: 8px;
    align-self: center;
    height: 36px;
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px !important;
    background-color: transparent;
    color: #6b7280;
    transition: all 0.2s ease;
    font-size: 1rem;
    margin: 0;
    position: relative;
    overflow: visible;
    flex-shrink: 0;
    order: 4 !important;
    /* ensure stop button comes after send button */
}

.input-group .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(107, 114, 128, 0.1);
    border-radius: 50%;
    transform: scale(0);
    transition: transform 0.2s ease;
    z-index: -1;
}

.input-group .btn:hover::before {
    transform: scale(1);
}

/* Send button - Light theme with circular hover */
.input-group .btn-primary {
    background: #4f46e5;
    color: #ffffff;
}

.input-group .btn-primary::before {
    background-color: rgba(255, 255, 255, 0.15);
}

.input-group .btn-primary:hover {
    background: #4338ca;
    color: #ffffff;
    transform: scale(1.05);
}

.input-group .btn-primary:active {
    transform: scale(0.95);
}

.input-group .btn-primary:disabled {
    background: #d1d5db;
    color: #9ca3af;
    transform: none;
}

/* File upload button styling - Light theme with circular hover */
.input-group .btn-outline-secondary {
    background-color: transparent;
    color: #6b7280;
}

.input-group .btn-outline-secondary::before {
    background-color: rgba(107, 114, 128, 0.1);
}

.input-group .btn-outline-secondary:hover {
    color: #374151;
    transform: scale(1.05);
}

/* .input-group .btn-outline-secondary:active {
    transform: scale(0.95);
} */

/* Stop button styling - Light theme with circular hover */
.input-group .btn-outline-danger {
    background-color: transparent;
    color: #dc2626;
}

.input-group .btn-outline-danger::before {
    background-color: rgba(220, 38, 38, 0.1);
}

.input-group .btn-outline-danger:hover {
    color: #b91c1c;
    transform: scale(1.05);
}

.input-group .btn-outline-danger:active {
    transform: scale(0.95);
}

/* Disabled button styling for New Chat button */
.btn-primary:disabled {
    background-color: #6c757d;
    border-color: #6c757d;
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-primary:disabled:hover {
    background-color: #6c757d;
    border-color: #6c757d;
    transform: none;
}

.btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
    color: white;
}

.btn-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
    color: white;
}

.btn-secondary:disabled {
    background-color: #6c757d;
    border-color: #6c757d;
    opacity: 0.6;
    cursor: not-allowed;
}

/* Hint message styling */
.hint-message .alert {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: none;
    border-radius: 8px;
    animation: slideInRight 0.3s ease-out;
}

/* keyframes slideInRight defined once below in Notifications section */

.btn-outline-secondary {
    border-color: var(--border-color);
    color: var(--text-dark);
}

.btn-outline-secondary:hover {
    color: #fff;
    border-color: #545b62;
}

/* Message headers for web search */
.message.assistant .message-role .bi-globe {
    color: #0dcaf0 !important;
}

.message.assistant .message-role .bi-globe.text-info {
    font-size: 1.1em;
}

/* Collapsible Sources Styling */
.web-search-sources-collapsible {
    margin: 16px 0;
}

.sources-toggle {
    user-select: none;
    transition: all 0.2s ease;
}

.sources-toggle:hover {
    background: #e9ecef !important;
    border-color: #dee2e6 !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.sources-toggle:active {
    transform: translateY(0);
}

.sources-content {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.source-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-color: #007bff !important;
}

.source-number {
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Clickable Citation Links */
.citation-link {
    display: inline-block;
    color: #007bff !important;
    text-decoration: none !important;
    font-weight: 500;
    /* padding: 2px 4px; */
    border-radius: 3px;
    background: rgba(0, 123, 255, 0.1);
    /* border: 1px solid rgba(0, 123, 255, 0.2);
    margin: 0 2px; */
    transition: all 0.2s ease;
    font-size: 0.9em;
    vertical-align: baseline;
}

.citation-link:hover {
    background: rgba(0, 123, 255, 0.2) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
    text-decoration: none !important;
    color: #0056b3 !important;
}

.citation-link:active {
    transform: translateY(0);
    background: rgba(0, 123, 255, 0.3) !important;
}

.citation-link:focus {
    outline: 2px solid rgba(0, 123, 255, 0.5);
    outline-offset: 2px;
}

/* Ensure citations work in both light and dark modes */
.message-content .citation-link {
    font-family: inherit;
    line-height: inherit;
}

/* Responsive design for sources */
@media (max-width: 768px) {
    .sources-grid {
        grid-template-columns: 1fr !important;
    }

    .source-card {
        padding: 10px !important;
        gap: 10px !important;
    }

    .sources-toggle {
        padding: 10px 12px !important;
        font-size: 0.9em;
    }

    .citation-link {
        padding: 1px 3px;
        font-size: 0.85em;
        margin: 0 1px;
    }
}

/* Enhanced Web Search Results */
.web-search-results-container {
    border-left: 3px solid var(--primary-light);
    padding-left: 15px;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.search-metadata {
    background: rgba(13, 110, 253, 0.05);
    border: 1px solid rgba(13, 110, 253, 0.1);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
}

.search-metadata .search-timestamp {
    color: var(--text-muted);
    font-weight: 500;
}

.web-search-result {
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    position: relative;
}

.web-search-result:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.web-search-result .result-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.web-search-result h5 {
    margin-bottom: 0.25rem;
    flex: 1;
}

.web-search-result h5 a {
    text-decoration: none;
    color: var(--accent-color);
    font-weight: 600;
    font-size: 1.1rem;
}

.web-search-result h5 a:hover {
    text-decoration: underline;
}

.relevance-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-weight: 600;
    margin-left: 0.5rem;
    flex-shrink: 0;
}

.relevance-badge.relevance-high {
    background: rgba(40, 167, 69, 0.1);
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.2);
}

.relevance-badge.relevance-medium {
    background: rgba(255, 193, 7, 0.1);
    color: #ffc107;
    border: 1px solid rgba(255, 193, 7, 0.2);
}

.relevance-badge.relevance-low {
    background: rgba(108, 117, 125, 0.1);
    color: #6c757d;
    border: 1px solid rgba(108, 117, 125, 0.2);
}

.web-search-result .search-url {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    word-break: break-all;
}

.web-search-result .search-url .bi-globe {
    color: var(--text-muted);
    font-size: 1rem;
}

.web-search-result .search-snippet {
    font-size: 0.95rem;
    color: var(--text-dark);
    line-height: 1.5;
}

/* Enhanced Sources Section */
.web-search-sources-enhanced {
    margin-top: 20px;
    padding: 16px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    border: 1px solid #dee2e6;
}

.sources-header {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    color: #495057;
    font-size: 0.95rem;
    gap: 0.5rem;
}

.sources-header strong {
    color: #343a40;
    font-weight: 600;
}

.sources-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.source-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.source-item:last-child {
    border-bottom: none;
}

.source-link {
    text-decoration: none;
    color: var(--accent-color);
    font-weight: 500;
    flex: 1;
    transition: color 0.2s ease;
}

.source-link:hover {
    text-decoration: underline;
}

.source-link.relevance-high {
    color: #28a745;
}

.source-link.relevance-medium {
    color: #ffc107;
}

.source-link.relevance-low {
    color: #6c757d;
}

.source-domain {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-style: italic;
}

.source-relevance {
    font-size: 0.75rem;
    color: var(--text-muted);
    background: rgba(0, 0, 0, 0.05);
    padding: 0.2rem 0.4rem;
    border-radius: 8px;
    min-width: 2rem;
    text-align: center;
}

/* Enhanced Sources Grid Layout */
.sources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
    margin-top: 8px;
}

.source-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: white;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    transition: all 0.2s ease;
    position: relative;
}

.source-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #0d6efd;
}

.source-card.relevance-high {
    border-left: 3px solid #28a745;
}

.source-card.relevance-medium {
    border-left: 3px solid #ffc107;
}

.source-card.relevance-low {
    border-left: 3px solid #6c757d;
}

.source-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.favicon {
    width: 16px;
    height: 16px;
    border-radius: 2px;
}

.favicon-fallback {
    color: #6c757d;
    font-size: 14px;
}

.source-content {
    flex: 1;
    min-width: 0;
}

.source-title {
    display: block;
    font-weight: 500;
    color: #495057;
    text-decoration: none;
    line-height: 1.4;
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.source-title:hover {
    color: #0d6efd;
    text-decoration: none;
}

.source-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.source-meta .source-domain {
    color: #6c757d;
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    font-style: normal;
}

.source-relevance-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 12px;
    text-align: center;
    min-width: 32px;
}

.source-relevance-badge.relevance-high {
    background: #d4edda;
    color: #155724;
}

.source-relevance-badge.relevance-medium {
    background: #fff3cd;
    color: #856404;
}

.source-relevance-badge.relevance-low {
    background: #f8d7da;
    color: #721c24;
}

@media (max-width: 768px) {
    .sources-grid {
        grid-template-columns: 1fr;
    }

    .source-card {
        padding: 10px;
        gap: 10px;
    }

    .source-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

/* Enhanced LLM Summary */
.llm-summary-enhanced {
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.05) 0%, rgba(13, 110, 253, 0.02) 100%);
    border: 1px solid rgba(13, 110, 253, 0.1);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    position: relative;
}

.llm-summary-enhanced::before {
    content: "🤖 AI Summary";
    position: absolute;
    top: -0.5rem;
    left: 1rem;
    background: white;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-color);
    border-radius: 4px;
    border: 1px solid rgba(13, 110, 253, 0.1);
}

/* Search Analytics Footer */
.search-analytics-footer {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    text-align: center;
}

.search-analytics-footer small {
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* Web Search Error States */
.web-search-error {
    background: rgba(220, 53, 69, 0.05);
    border: 1px solid rgba(220, 53, 69, 0.1);
    border-radius: 12px;
    padding: 1rem;
    margin: 1rem 0;
}

.web-search-error .error-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    color: #dc3545;
    font-weight: 600;
}

.web-search-error .error-message {
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.web-search-no-results {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
    font-style: italic;
}

/* LLM Summary Box */
.llm-summary {
    background-color: var(--accent-light);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    font-size: 1rem;
    line-height: 1.6;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.llm-summary p {
    margin-bottom: 0.5rem;
}

.llm-summary p:last-child {
    margin-bottom: 0;
}

/* File Upload */
.file-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Selected Files Display */
.selected-files {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Enhanced File Preview List */
.file-preview-list {
    max-height: 200px;
    overflow-y: auto;
    padding: 8px 0;
    border-radius: 8px;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    margin-top: 8px;
}

.file-preview-list::-webkit-scrollbar {
    width: 4px;
}

.file-preview-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 2px;
}

.file-preview-list::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 2px;
}

.file-preview-list::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Individual File Item */
.file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    margin: 2px 8px;
    /* background-color: white;
    border: 1px solid #e0e0e0;
     */
    border-radius: 8px;
    transition: all 0.2s ease;
    animation: file-item-enter 0.3s ease-out;
}

.file-item:hover {
    background-color: #f8f9fa;
    border-color: #d0d0d0;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.file-item-info {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.file-item-icon {
    margin-right: 8px;
    font-size: 16px;
    flex-shrink: 0;
}

.file-item-details {
    flex: 1;
    min-width: 0;
}

.file-item-name {
    font-size: 13px;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.file-item-size {
    font-size: 11px;
    color: #666;
    margin-top: 1px;
}

.file-item-remove {
    background: none;
    border: none;
    color: #dc3545;
    padding: 4px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-left: 8px;
}

.file-item-remove:hover {
    background-color: #dc3545;
    color: white;
    transform: scale(1.1);
}

.file-item-remove:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25);
}

/* File Item Animations */
@keyframes file-item-enter {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes file-item-exit {
    from {
        opacity: 1;
        transform: translateY(0);
        max-height: 50px;
    }

    to {
        opacity: 0;
        transform: translateY(-10px);
        max-height: 0;
        padding: 0;
        margin: 0;
    }
}

.file-item.exiting {
    animation: file-item-exit 0.3s ease-in forwards;
}

/* Notification Animations */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* File Count Badge (fallback for simple display) */
.file-count-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    background-color: #007bff;
    color: white;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.file-count-badge i {
    margin-right: 4px;
}

/* Clear All Button */
.clear-files-btn {
    background: none;
    border: none;
    color: #dc3545;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 12px;
}

.clear-files-btn:hover {
    background-color: #dc3545;
    color: white;
}

/* File Remove Button */
.file-remove-btn {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    transition: background-color 0.2s, border-color 0.2s;
}

.file-remove-btn:hover {
    background-color: #c82333;
    border-color: #bd2130;
}

/* ==========================================================================
   LEGACY INDICATOR STYLES - REMOVED
   ========================================================================== */

/* 
   The following styles have been removed and replaced by the unified indicator system:
   - .loading-indicator
   - .typing-indicator
   - .typing-wrapper
   - .typing-text  
   - .typing-dots-simple
   - .typing-dot-simple
   - .thinking-indicator
   - .thinking-content
   - .thinking-dots
   - .thinking-dot
   - .thinking-process
   - .streaming-indicator
   - .streaming-dots
   - .streaming-dot
   
   All animations (thinkingPulse, streamingPulse) have also been removed.
   Use the new .unified-indicator classes instead.
*/

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes simplePulse {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(0.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* ==========================================================================
   UNIFIED WORKING INDICATOR SYSTEM (DRY Architecture)
   ========================================================================== */

/* Main container for unified indicator */
.unified-indicator {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: linear-gradient(135deg, var(--secondary-color) 0%, #f8f9fa 100%);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    animation: fadeIn 0.3s ease-in-out;
    margin: 2px 0;
}

/* Indicator wrapper for chat container placement */
.indicator-wrapper {
    display: flex;
    justify-content: flex-start;
    padding-left: 8px;
    margin: 0.5rem 0;
}

/* Icon styling */
.unified-indicator-icon {
    font-size: 1.2em;
    flex-shrink: 0;
}

/* Optional text label */
.unified-indicator-text {
    font-size: 0.9em;
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
}

/* Dots container with fixed height for bouncing animation */
.unified-indicator-dots {
    display: flex !important;
    align-items: center;
    gap: 4px;
    height: 16px;
    flex-shrink: 0;
}

/* Individual dot styling */
.unified-indicator-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background-color: var(--primary-color) !important;
    animation: dotBounce 1.4s ease-in-out infinite !important;
    display: inline-block !important;
}

/* Staggered animation delays for ChatGPT-style effect */
.unified-indicator-dot:nth-child(1) {
    animation-delay: 0s !important;
}

.unified-indicator-dot:nth-child(2) {
    animation-delay: 0.2s !important;
}

.unified-indicator-dot:nth-child(3) {
    animation-delay: 0.4s !important;
}

/* ChatGPT-style bouncing animation */
@keyframes dotBounce {

    0%,
    60%,
    100% {
        transform: translateY(0);
    }

    30% {
        transform: translateY(-8px);
    }
}

/* Dark mode support */
[data-theme="dark"] .unified-indicator {
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    border-color: #3a3a3a;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .unified-indicator-text {
    color: #9ca3af;
}

/* ==========================================================================
   END UNIFIED WORKING INDICATOR SYSTEM
   ========================================================================== */

/* Responsive Design */
@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        left: -100%;
        top: 0;
        width: min(280px, 85vw);
        min-width: min(280px, 85vw);
        height: 100vh;
        z-index: 1000;
        transition: left 0.3s ease;
        box-shadow: none;
    }

    .sidebar.show {
        left: 0;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
    }

    .sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.35);
        z-index: 999;
    }

    .sidebar-overlay.d-none {
        display: none !important;
    }

    .main-content {
        margin-left: 0;
        flex: 1;
        min-width: 0;
    }

    .main-app>.container-fluid>.row {
        flex-wrap: nowrap;
    }

    .chat-header {
        padding: 8px 12px;
    }

    .chat-session-info {
        min-width: 0;
    }

    .message-content {
        max-width: 92%;
    }

    .edit-interface .edit-message-input {
        min-height: 100px;
    }

    .message-content pre,
    .hljs {
        font-size: 0.8rem !important;
        padding: 0.75rem !important;
        margin: 0.75rem 0 !important;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    .code-block-header {
        padding: 0.375rem 0.75rem;
        font-size: 0.7rem;
    }

    .code-copy-btn {
        padding: 0.2rem 0.4rem;
        font-size: 0.7rem;
    }

    .welcome-content {
        padding: 1rem;
    }

    .welcome-content h2 {
        font-size: 1.5rem;
    }

    .feature-card {
        margin-bottom: 1rem;
    }
}

@media (max-width: 576px) {
    .login-container {
        padding: 1.5rem;
        margin: 1rem;
    }

    .shared-session .app-header,
    .shared-session .conversation-header {
        padding: 1rem !important;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .shared-session .app-header .text-end,
    .shared-session .conversation-header .d-flex {
        width: 100%;
    }

    .shared-session .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

/* Scrollbar Styling */
.chat-messages::-webkit-scrollbar {
    width: 6px;
}

.chat-messages::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Feedback Buttons */
.feedback-container {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    animation: fadeInFeedback 0.3s ease-in-out;
}

@keyframes fadeInFeedback {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.feedback-container:hover {
    opacity: 1;
}

.feedback-button {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 8px;
    font-size: 1.4rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    width: 40px;
    height: 40px;
    min-width: 40px;
    position: relative;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
}

.feedback-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.feedback-button:hover {
    background: transparent;
    border-color: transparent;
    color: #007bff;
    transform: scale(1.1);
    box-shadow: none;
}

.feedback-button:hover::before {
    opacity: 1;
}

.feedback-button:active {
    transform: scale(0.95);
    box-shadow: none;
    transition: all 0.1s ease;
}

.feedback-button.liked {
    background: transparent;
    border-color: transparent;
    color: #28a745 !important;
    box-shadow: none;
}

.feedback-button.liked:hover {
    background: transparent;
    border-color: transparent;
    color: #1e7e34;
    box-shadow: none;
}

.feedback-button.disliked {
    background: transparent;
    border-color: transparent;
    color: #dc3545 !important;
    box-shadow: none;
}

.feedback-button.disliked:hover {
    background: transparent;
    border-color: transparent;
    color: #c82333;
    box-shadow: none;
}

.feedback-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    background: transparent;
    border-color: transparent;
    color: #6c757d;
}

.feedback-button:disabled:hover {
    background: transparent;
    border-color: transparent;
    color: #6c757d;
    transform: none;
    box-shadow: none;
}

.feedback-button:disabled::before {
    opacity: 0;
}

.feedback-icon {
    font-size: 1.3rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

.feedback-button:hover .feedback-icon {
    transform: scale(1.1);
}

.feedback-button:active .feedback-icon {
    transform: scale(0.95);
}

/* Feedback status indicator */
.feedback-status {
    font-size: 0.8rem;
    color: #6c757d;
    font-weight: 500;
    margin-left: auto;
    opacity: 0.8;
    transition: all 0.3s ease;
    padding: 4px 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.02);
}

.feedback-status.submitted {
    color: #28a745;
    font-weight: 600;
    background: rgba(40, 167, 69, 0.1);
    animation: feedbackSubmitted 0.5s ease-out;
}

@keyframes feedbackSubmitted {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ripple effect for buttons */
.feedback-button .ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    transform: scale(0);
    animation: ripple 0.6s linear;
    pointer-events: none;
}

@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .feedback-container {
        border-top-color: rgba(255, 255, 255, 0.1);
    }

    .feedback-button {
        background: transparent;
        border-color: transparent;
        color: #a0aec0;
    }

    .feedback-button:hover {
        background: transparent;
        border-color: transparent;
        color: #63b3ed;
        box-shadow: none;
    }

    .feedback-status {
        color: #a0aec0;
        background: rgba(255, 255, 255, 0.05);
    }

    .feedback-status.submitted {
        color: #68d391;
        background: rgba(104, 211, 145, 0.1);
    }
}

/* Feedback Tooltip */
.feedback-tooltip {
    position: relative;
    display: inline-block;
}

.feedback-tooltip .tooltip-text {
    visibility: hidden;
    width: 120px;
    background-color: var(--text-dark);
    color: white;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 0.75rem;
}

.feedback-tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* Feedback Success Message */
.feedback-success {
    background-color: var(--success-color);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    margin-left: 8px;
    animation: fadeInOut 2s ease-in-out;
}

@keyframes fadeInOut {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }

    20% {
        opacity: 1;
        transform: translateY(0);
    }

    80% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* Utility Classes */
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cursor-pointer {
    cursor: pointer;
}

.transition-all {
    transition: all 0.3s ease;
}

/* File Display Styles */
.uploaded-files-display {
    margin-top: 10px;
    padding: 10px;
    background-color: var(--secondary-color);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.files-header {
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.files-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.file-display-item {
    display: flex;
    align-items: center;
    padding: 8px;
    background-color: white;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

.file-display-item:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 4px rgba(78, 115, 223, 0.1);
}

.file-icon {
    font-size: 1.5rem;
    margin-right: 12px;
    min-width: 24px;
    text-align: center;
    color: var(--primary-color);
}

.file-info {
    flex: 1;
    min-width: 0;
}

.file-name {
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 2px;
    word-break: break-word;
}

[data-theme="dark"] .file-name {
    color: var(--primary-dark) !important;
}

.file-type {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.file-size {
    font-size: 0.75rem;
    color: #adb5bd;
}

/* Message file display */
.message .uploaded-files-display {
    margin-top: 8px;
    margin-bottom: 4px;
}

.message.user .uploaded-files-display {
    background-color: #e3f2fd;
    border-color: #bbdefb;
}

.message.assistant .uploaded-files-display {
    background-color: #f3e5f5;
    border-color: #e1bee7;
}

/* System messages with files */
.message.system.files-available {
    background-color: #fff3cd00;
    border-radius: 8px;
    margin: 10px 0;
}

.message.system.files-available .system-message {
    margin-bottom: 10px;
}

.message.system.files-available .system-message strong {
    color: #856404;
}

/* User messages with files */
.message.user.with-files {
    border-left: 4px solid var(--primary-color);
}

.message.user.with-files .uploaded-files-display {
    background-color: #e3f2fd;
    border: 1px solid #bbdefb;
    border-radius: 6px;
    margin-top: 8px;
}

/* Markdown Styling for Chat Messages */
.message-content h1,
.message-content h2,
.message-content h3,
.message-content h4,
.message-content h5,
.message-content h6 {
    margin: 1rem 0 0.5rem 0;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-dark);
}

.message-content h1 {
    font-size: 24px;
    font-weight: 700;
    padding-bottom: 0.3rem;
    margin: 1rem 0 0.5rem 0;
    line-height: 1.2;
}

.message-content h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 2rem 0 1rem 0;
    padding-bottom: 0.5rem;
    line-height: 1.3;
}

.message-content h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 1.5rem 0 0.75rem 0;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--border-color);
    line-height: 1.2;
}

.message-content h4 {
    font-size: 1.1rem;
    color: var(--text-muted);
}

.message-content h5 {
    font-size: 1rem;
    color: var(--text-muted);
}

.message-content h6 {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.message-content strong {
    font-weight: 600;
    color: var(--text-dark);
}

.message-content em {
    font-style: italic;
    color: var(--text-dark);
}

.message-content code {
    background-color: #f1f3f4;
    border: 1px solid #e1e5e9;
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace;
    font-size: 0.875em;
    color: #d73a49;
    font-weight: 500;
}

.message-content pre {
    background-color: #f8f9fa;
    color: #24292e;
    padding: 0;
    border-radius: 8px;
    overflow-x: auto;
    margin: 1.25rem 0;
    border: 1px solid #e1e4e8;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    position: relative;
}

.message-content pre code {
    background-color: transparent !important;
    border: none !important;
    padding: 1.25rem !important;
    color: inherit !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace !important;
    display: block !important;
}

/* Fake code block for Arabic content - prevents code styling on false detections */
.message-content pre.fake-code-block {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0.5rem !important;
    margin: 0.5rem 0;
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    white-space: pre-wrap !important;
    overflow-x: visible !important;
    direction: ltr !important;
    text-align: left !important;
}

.message-content.rtl-content pre.fake-code-block,
.message-content[dir="rtl"] pre.fake-code-block {
    direction: ltr !important;
    text-align: left !important;
}

.message-content pre.fake-code-block code {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    direction: ltr !important;
    unicode-bidi: plaintext !important;
}

/* Premium Code Block Features */
.code-block-wrapper {
    position: relative;
    margin: 1.5rem 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    direction: ltr !important;
    text-align: left !important;
}

.mermaid-wrapper {
    direction: ltr !important;
    text-align: left !important;
}

.code-block-wrapper:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.code-block-header {
    background: #f8fafc;
    border-bottom: 1px solid var(--border-color);
    padding: 0.75rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.code-language-label {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primary-color);
}

.code-copy-btn {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.35rem 0.55rem !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    color: #64748b !important;
    font-size: 11px;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none !important;
    line-height: 1;
}

.code-copy-btn:hover {
    background: #e2e8f0;
    color: #475569 !important;
    transform: translateY(-1px);
}

.code-copy-btn i,
.code-copy-btn .bi {
    font-size: 13px !important;
    line-height: 1;
}

.code-copy-btn.copied {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    border-color: #6366f1;
    color: #ffffff !important;
}

.code-copy-btn.copied:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
}

/* Code blocks */
.code-block-wrapper pre.hljs {
    background: #fafbfc !important;
    color: #475569 !important;
    padding: 1.5rem !important;
    margin: 0 !important;
    font-size: 0.9rem !important;
    line-height: 1.7 !important;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

/* Dark mode code blocks */
.code-block-wrapper pre.hljs {
    background: #1e2028 !important;
    color: #94a3b8 !important;
    padding: 1.5rem !important;
    margin: 0 !important;
    font-size: 0.9rem !important;
    line-height: 1.7 !important;
    border-radius: 12px;
    border: 1px solid #2d3139;
}

/* Mermaid Tabs Refinement */
.mermaid-wrapper {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    margin: 1.25rem 0;
}

.mermaid-tab-btn {
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: all 0.2s ease;
}

.mermaid-tab-btn:hover {
    color: var(--primary-color) !important;
    background: rgba(99, 102, 241, 0.05);
}

.mermaid-tab-btn.active {
    background: white !important;
}

.code-copy-btn.copied:hover {
    background: var(--accent-color);
    border-color: var(--accent-color);
}

.table-copy-wrapper {
    margin: 1.25rem 0;
    border-radius: 8px;
    overflow: hidden;
}

.table-copy-header {
    padding: 0.2rem 0.35rem;
    display: flex;
    justify-content: flex-start;

}

.table-copy-btn {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.3rem 0.6rem;
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.table-copy-btn:hover {
    background: #e5e7eb;
    border-color: #d1d5db;
    color: #374151;
    transform: translateY(-1px);
}

.table-copy-btn:active {
    transform: translateY(0);
}

.table-copy-btn.copied {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    border-color: #6366f1;
    color: #ffffff;
}

.table-copy-btn.copied:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
}

/* Dark mode copy buttons */
:root[data-theme="dark"] .message-copy-btn,
body[data-theme="dark"] .message-copy-btn {
    background: #262626;
    color: #a3a3a3;
    border: 1px solid #404040;
}

:root[data-theme="dark"] .message-copy-btn:hover,
body[data-theme="dark"] .message-copy-btn:hover {
    background: #333333;
    color: #e5e5e5;
    border-color: #525252;
}

:root[data-theme="dark"] .message-content pre,
body[data-theme="dark"] .message-content pre {
    background: #1e2028;
    border: 1px solid #2d3139;
    border-radius: 12px;
    padding: 1.5rem 1.25rem;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}

:root[data-theme="dark"] .message-content code,
body[data-theme="dark"] .message-content code {
    background-color: rgba(139, 92, 246, 0.15);
    color: #c4b5fd;
}

:root[data-theme="dark"] .message-content pre code,
body[data-theme="dark"] .message-content pre code {
    color: #94a3b8;
}

:root[data-theme="dark"] .message.user .message-content pre,
body[data-theme="dark"] .message.user .message-content pre {
    background: #1a1a2e;
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 12px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

:root[data-theme="dark"] .message.user .message-content pre code,
body[data-theme="dark"] .message.user .message-content pre code {
    color: #c7d2fe;
}

/* Dark mode code copy button */
:root[data-theme="dark"] .code-copy-btn,
body[data-theme="dark"] .code-copy-btn {
    background: #2d3139;
    border: 1px solid #3d444f;
    color: #94a3b8 !important;
}

:root[data-theme="dark"] .code-copy-btn:hover,
body[data-theme="dark"] .code-copy-btn:hover {
    background: #3d444f;
    color: #e2e8f0 !important;
}

:root[data-theme="dark"] .code-copy-btn i,
:root[data-theme="dark"] .code-copy-btn .bi,
body[data-theme="dark"] .code-copy-btn i,
body[data-theme="dark"] .code-copy-btn .bi {
    font-size: 13px !important;
}

:root[data-theme="dark"] .table-copy-btn,
body[data-theme="dark"] .table-copy-btn {
    background: #262626;
    border-color: #404040;
    color: #a3a3a3;
}

:root[data-theme="dark"] .table-copy-btn:hover,
body[data-theme="dark"] .table-copy-btn:hover {
    background: #333333;
    border-color: #525252;
    color: #e5e5e5;
}

.table-copy-wrapper table {
    margin: 0;
}

#copyLinkBtn.btn-success {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 500;
    font-size: 13px;
    padding: 0.4rem 0.75rem;
    transition: all 0.2s ease;
}

#copyLinkBtn.btn-success:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}


/* Language-specific color coding */
.hljs.language-python .code-language-label {
    color: #3776ab;
}

.hljs.language-javascript .code-language-label,
.hljs.language-js .code-language-label {
    color: #f7df1e;
}

.hljs.language-sql .code-language-label {
    color: #336791;
}

.hljs.language-bash .code-language-label,
.hljs.language-shell .code-language-label {
    color: #4eaa25;
}

.hljs.language-json .code-language-label {
    color: #000000;
}

.hljs.language-html .code-language-label {
    color: #e34c26;
}

.hljs.language-css .code-language-label {
    color: #1572b6;
}

.hljs.language-yaml .code-language-label,
.hljs.language-yml .code-language-label {
    color: #cb171e;
}

.hljs.language-markdown .code-language-label {
    color: #083fa1;
}

.message-content ul,
.message-content ol {
    margin: 1rem 0;
    padding-left: 1.75rem;
}

.message-content li {
    margin: 0.5rem 0;
    line-height: 1.6;
}

.message-content ul li {
    list-style-type: disc;
}

.message-content ol li {
    list-style-type: decimal;
}

.message-content li::marker {
    color: var(--primary-color);
    font-weight: 600;
}

.message-content blockquote {
    border-left: 4px solid var(--primary-color);
    background-color: var(--secondary-color);
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    border-radius: 0 4px 4px 0;
    font-style: italic;
    color: var(--text-dark);
}

.message-content hr {
    border: none;
    border-top: 2px solid var(--border-color);
    margin: 1.5rem 0;
    opacity: 0.6;
}

.message-content a {
    color: var(--primary-color);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-bottom-color 0.2s;
}

.message-content a:hover {
    border-bottom-color: var(--primary-color);
    text-decoration: none;
}

.message-content table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 1.5rem 0;
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.message-content table th,
.message-content table td {
    padding: 0.875rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.message-content table th {
    background-color: #f8fafc;
    font-weight: 600;
    color: var(--text-dark);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.message-content table tr:last-child td {
    border-bottom: none;
}

.message-content table tr:nth-child(even) {
    background-color: #fdfdfe;
}

.message-content table tr:hover {
    background-color: #f1f5f9;
}

/* Enhanced spacing for markdown elements */
.message-content>*:first-child {
    margin-top: 0;
}

.message-content>*:last-child {
    margin-bottom: 0;
}

.message-content p {
    margin: 0 0 12px 0;
    line-height: 1.6;
}

/* Special styling for Arabic text - Enhanced */
.message-content[dir="rtl"] {
    text-align: right;
    direction: rtl;
}

.message-content[dir="rtl"] ul,
.message-content[dir="rtl"] ol {
    padding-right: 1.5rem;
    padding-left: 0;
}

.message-content[dir="ltr"] {
    text-align: left;
    direction: ltr;
}

/* Responsive markdown */
@media (max-width: 768px) {
    .message-content h1 {
        font-size: 1.5rem;
    }

    .message-content h2 {
        font-size: 1.3rem;
    }

    .message-content h3 {
        font-size: 1.1rem;
    }

    .message-content pre {
        padding: 0.75rem;
        font-size: 0.85em;
    }

    .message-content table {
        font-size: 0.9em;
    }

    .message-content table th,
    .message-content table td {
        padding: 0.5rem;
    }
}

/* Stop button styling */
#stopBtn {
    transition: all 0.2s ease;
    border-radius: 50% !important;
    position: absolute !important;
    bottom: 6px !important;
    right: 60px !important;
    /* 12px gap from send (36px width + 12px gap) */
    width: 36px !important;
    height: 36px !important;
    visibility: hidden;
    /* default invisible, JS toggles */
    opacity: 0;
    /* smooth fade-in */
    pointer-events: none;
    background: rgba(220, 53, 69, 0.14) !important;
    /* soft red bubble */
    border: 1px solid rgba(220, 53, 69, 0.22) !important;
    /* thin ring */
    color: #dc3545 !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6) !important;
    /* subtle inner white ring */
    z-index: 11 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#stopBtn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(220, 53, 69, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.7) !important;
    background: rgba(220, 53, 69, 0.2) !important;
}

#stopBtn:disabled {
    opacity: 0.6;
}

/* Icon inside stop button */
#stopBtn i {
    color: #dc3545 !important;
    font-size: 18px !important;
    line-height: 1 !important;
}

/* Edit button styling */
.edit-message-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

.message:hover .edit-message-btn {
    opacity: 1;
}

.edit-interface {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.edit-interface .edit-message-input {
    resize: none;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.95rem;
    line-height: 1.4;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

.edit-interface .edit-buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.edit-message-btn:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

/* Edit interface styling */
.edit-interface {
    margin-top: 0.5rem;
    padding: 0.5rem;
    background-color: #f8f9fa;
    border-radius: 0.375rem;
    border: 1px solid #dee2e6;
}

.edit-message-input {
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    resize: vertical;
    min-height: 80px;
}

.edit-buttons {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.save-edit-btn {
    background-color: var(--success-color);
    border-color: var(--success-color);
    color: white;
}

.save-edit-btn:hover {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: white;
}

.cancel-edit-btn {
    background-color: var(--text-muted);
    border-color: var(--text-muted);
    color: white;
}

.cancel-edit-btn:hover {
    background-color: #4b5563;
    border-color: #4b5563;
    color: white;
}


.message.user.editing .edit-interface {
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 10px;
    padding: 16px;
    gap: 12px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.message.user.editing .edit-interface .edit-message-input {
    width: 100%;
    min-height: 100px;
    background: #ffffff;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-dark);
    padding: 12px 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.message.user.editing .edit-interface .edit-message-input:focus {
    outline: none;
    border: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    background: #ffffff;
    transform: translateY(-1px);
}

.message.user.editing .edit-interface .edit-buttons {
    display: flex;
    justify-content: flex-start;
    gap: 12px;
    margin-top: 8px;
}

.message.user.editing .edit-interface .save-edit-btn,
.message.user.editing .edit-interface .cancel-edit-btn {
    padding: 0.4rem 0.4rem;
    border-radius: 24px;
    font-weight: 500;
    font-size: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-width: 1px;
    min-width: 50px;
}

/* Modern button colors with accent theme */
.message.user.editing .edit-interface .save-edit-btn {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: #fff;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.message.user.editing .edit-interface .save-edit-btn:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
}

.message.user.editing .edit-interface .cancel-edit-btn {
    background-color: #ffffff;
    border-color: rgba(0, 0, 0, 0.15);
    color: var(--text-muted);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.message.user.editing .edit-interface .cancel-edit-btn:hover {
    background-color: #f8f9fa;
    border-color: rgba(0, 0, 0, 0.2);
    color: var(--text-dark);
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.message.user.editing .edit-interface .save-edit-btn:active,
.message.user.editing .edit-interface .cancel-edit-btn:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* Dark theme for message editing */
:root[data-theme="dark"] .message.user.editing .message-content,
body[data-theme="dark"] .message.user.editing .message-content {
    background: rgba(42, 42, 42, 0.95) !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
}

:root[data-theme="dark"] .message.user.editing .edit-interface,
body[data-theme="dark"] .message.user.editing .edit-interface {
    background: rgba(26, 26, 26, 0.95) !important;
    border: none !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2) !important;
}

:root[data-theme="dark"] .message.user.editing .edit-interface .edit-message-input,
body[data-theme="dark"] .message.user.editing .edit-interface .edit-message-input {
    background: rgba(42, 42, 42, 0.95) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
}

:root[data-theme="dark"] .message.user.editing .edit-interface .edit-message-input:focus,
body[data-theme="dark"] .message.user.editing .edit-interface .edit-message-input:focus {
    border: none !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2), 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    background: rgba(42, 42, 42, 0.95) !important;
}

:root[data-theme="dark"] .message.user.editing .edit-interface .cancel-edit-btn,
body[data-theme="dark"] .message.user.editing .edit-interface .cancel-edit-btn {
    background-color: rgba(42, 42, 42, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

:root[data-theme="dark"] .message.user.editing .edit-interface .cancel-edit-btn:hover,
body[data-theme="dark"] .message.user.editing .edit-interface .cancel-edit-btn:hover {
    background-color: rgba(52, 52, 52, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Ensure compact look on small screens */
@media (max-width: 576px) {
    .message.user.editing .message-content {
        padding: 0.6rem;
    }

    .message.user.editing .edit-interface {
        padding: 10px;
        border-radius: 10px;
    }

    .message.user.editing .edit-interface .edit-message-input {
        min-height: 72px;
        font-size: 0.95rem;
    }
}

.session-options-btn {
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #888;
    opacity: 0.7;
    z-index: 11;
    transition: color 0.2s, opacity 0.2s;
}

.session-options-btn:hover,
.session-options-btn:focus {
    color: var(--primary-color);
    background-color: rgba(13, 110, 253, 0.05);
    border-radius: 50%;
    opacity: 1;
}

.session-options-menu {
    min-width: 25px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 2px 0;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    animation: fadeIn 0.18s;
}

.session-options-item {
    padding: 6px 12px 6px 12px;
    color: var(--text-dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s, color 0.15s;
    position: relative;
}

.session-options-item i {
    font-size: 0.9em;
    /* margin-right: 6px; */
}

.session-options-item:hover {
    background: var(--accent-light);
    color: var(--primary-color);
}

/* Specific hover colors for Edit and Delete buttons */
.session-options-item.edit-title:hover {
    background: linear-gradient(135deg, rgb(191, 226, 207), #d9f0d9);
    color: #16a34a;
}

.session-options-item.edit-title:hover i {
    color: #16a34a;
}

.session-options-item.delete-session:hover {
    background: linear-gradient(135deg, rgb(249, 191, 191), #fbeaea);
    color: #dc2626;
}

.session-options-item.delete-session:hover i {
    color: #dc2626;
}

.session-pinned-icon {
    color: var(--primary-color);
    font-size: 14px;
    margin-right: 6px;
    flex-shrink: 0;
}

.session-button-content {
    display: flex;
    align-items: center;
}

.session-title-input {
    border: none !important;
    border-radius: 0;
    padding: 2px 4px;
    font-size: inherit;
    font-family: inherit;
    font-weight: 600;
    background: transparent !important;
    color: var(--text-dark);
    outline: none !important;
    flex: 1;
    min-width: 100px;
    box-shadow: none !important;
    text-align: inherit;
}

.save-title-btn,
.cancel-title-btn {
    font-size: 14px;
    padding: 4px 8px;
    border-radius: 4px;
    border: none;
    background: var(--primary-color);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s;
    height: 28px;
    width: 28px;
    margin: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cancel-title-btn {
    background: #6b7280;
}

.save-title-btn:hover {
    background: #0ea371;
}

.cancel-title-btn:hover {
    background: #374151;
}

.session-title-edit-group {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    margin-bottom: 2px;
    width: 50%;
    padding: 0 4px;
    box-sizing: border-box;
}

/* Chat Header Styles - Enhanced */
.chat-header {
    background-color: var(--secondary-color);
    min-height: 56px;
    flex-shrink: 0;
    z-index: 1050;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    margin-bottom: 0;
    backdrop-filter: blur(10px);
}

/* Dark theme chat header */
:root[data-theme="dark"] .chat-header,
body[data-theme="dark"] .chat-header {
    /* background: linear-gradient(135deg, #1e293b 0%, #334155 100%); */
    border-bottom-color: #475569;
    color: var(--text-dark);
}

/* Chat header content styling */
.chat-session-info {
    flex: 1;
    display: flex;
    align-items: center;
}

.session-title-display {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark);
}

:root[data-theme="dark"] .session-title-display,
body[data-theme="dark"] .session-title-display {
    color: var(--text-dark);
}

.chat-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.chat-header .btn {
    transition: all 0.2s ease;
}

.chat-header .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Modern Share Button Styling - Matches app's button design */
#shareBtn {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    box-shadow: none;
    min-width: auto;
    height: 36px;
    margin: 0;
}

#shareBtn:hover {
    background-color: #f9fafb;
    border-color: #d1d5db;
    color: #111827;
    transform: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

#shareBtn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    border-color: #3b82f6;
}

#shareBtn:active {
    transform: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

#shareBtn i {
    font-size: 14px;
    transition: color 0.2s ease;
}

#shareBtn:hover i {
    color: #0d6efd;
}

/* Chat header improvements - consolidated above */

.chat-session-info {
    flex: 1;
}

.session-title-display {
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 500;
}

.chat-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Adjust chat messages to account for header */
#chatMessages {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    /* background-color: var(--secondary-color); */
    display: block !important;
    visibility: visible !important;
    z-index: 0;
}

/* Ensure proper scrolling for shared sessions */
body.shared-session {
    height: auto !important;
    min-height: 100vh;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    position: static !important;
}

html.shared-session,
html:has(body.shared-session) {
    height: auto !important;
}

/* Override main app layout constraints for shared sessions */
.shared-session .app-container,
.shared-session .main-container,
.shared-session .chat-interface,
.shared-session .content-wrapper {
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    position: static !important;
}

/* Reset any fixed positioning that might interfere with scrolling */
.shared-session .shared-banner,
.shared-session .container,
.shared-session .chat-container,
.shared-session .conversation-header,
.shared-session .messages-container {
    position: static !important;
}

/* Override any problematic positioning from main CSS */
.shared-session .navbar,
.shared-session .sidebar,
.shared-session .chat-interface,
.shared-session .main-content {
    position: static !important;
}

/* Additional styles specific to shared sessions */
.shared-session .shared-banner {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
}

.shared-session .conversation-header {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.shared-session .chat-container {
    max-width: 800px;
    margin: 0 auto;
}

.shared-session .message-container {
    margin-bottom: 1.5rem;
}

.shared-session .message-header {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
    color: #6c757d;
    font-size: 0.9rem;
}

.shared-session .message-footer {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    flex-wrap: wrap;
}

.shared-session .user-message .message-content {
    background: rgba(11, 96, 224, 0.05) !important;
    color: #0b60e0;
    padding: 1rem;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.shared-session .assistant-message .message-content {
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    padding: 1rem;
    border-radius: 10px;
}

/* Format badge for assistant responses (Markdown/HTML/Text) */
.shared-session .message-header .format-badge {
    display: inline-block;
    margin-inline-start: 8px;
    padding: 2px 8px;
    font-size: 12px;
    line-height: 1.4;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    color: #374151;
}

.shared-session .message-header .format-badge.format-markdown {
    border-color: #93c5fd;
    background: #eff6ff;
    color: #1d4ed8;
}

.shared-session .message-header .format-badge.format-html {
    border-color: #fca5a5;
    background: #fef2f2;
    color: #b91c1c;
}

.shared-session .message-header .format-badge.format-text {
    border-color: #d1d5db;
    background: #f9fafb;
    color: #374151;
}

/* Ensure content is properly contained and scrollable */
.shared-session .container {
    width: 100%;
    max-width: none;
    padding-bottom: 2rem;
}

/* Make sure messages container doesn't have height restrictions */
.shared-session .messages-container {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

.input-group textarea.form-control {
    border: none !important;
    background: transparent !important;
    resize: none;
    outline: none;
    font-size: 16px;
    line-height: 1.0;
    /* Use consistent padding with our specific rule */
    padding: 14px 16px !important;
    min-height: 52px !important;
    /* Match our specific rule */
    max-height: 120px !important;
    /* Match our specific rule */
    /* Grow upwards (no inner scrollbar) */
    overflow-y: hidden !important;
    width: 100%;
    box-sizing: border-box;
}

.input-group textarea.form-control:focus {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

.input-group textarea.form-control::placeholder {
    color: #6b7280 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    opacity: 1 !important;
    font-family: inherit !important;
    text-shadow: none !important;
    letter-spacing: 0.025em !important;
}

/* Search Controls */
.search-controls {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    /* Anchor to bottom-left so buttons don't float up when typing */
    position: absolute !important;
    left: 12px !important;
    bottom: 12px !important;
    width: auto !important;
    margin-top: 0 !important;
}

.search-mode-indicator {
    background: #f0f9ff !important;
    color: #0369a1 !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-align: center !important;
    border: 1px solid #bae6fd !important;
    margin-bottom: 8px !important;
    display: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: none !important;
    letter-spacing: 0.025em !important;
}

.search-buttons {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
    margin-top: 8px !important;
    padding: 4px 0 !important;
}

.search-mode-btn {
    border-radius: 8px !important;
    padding: 14px 24px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border: 1px solid #e5e7eb !important;
    background: #ffffff !important;
    color: #1f2937 !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    height: 48px !important;
    white-space: nowrap !important;
    position: relative !important;
    overflow: visible !important;
    text-overflow: unset !important;
    flex-shrink: 0 !important;
    min-width: 150px !important;
    box-shadow: none !important;
}

.search-mode-btn::before {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

.search-mode-btn::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

.search-mode-btn * {
    position: relative !important;
    z-index: 10 !important;
}

.search-mode-btn {
    isolation: isolate !important;
    contain: layout style paint !important;
    transform: translateZ(0) !important;
    will-change: auto !important;
}

/* Override any Bootstrap button styles that might cause ghost text */
.search-mode-btn.btn {
    box-shadow: none !important;
    text-shadow: none !important;
    background-image: none !important;
    background-clip: initial !important;
    -webkit-background-clip: initial !important;
    border-radius: 8px !important;
    height: 36px !important;
}

.search-mode-btn.btn::before,
.search-mode-btn.btn::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

.search-mode-btn:hover {
    background: #f9fafb !important;
    border-color: #d1d5db !important;
    color: #111827 !important;
    transform: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

/* Complete CSS reset for search buttons to prevent any ghost text */
.search-mode-btn,
.search-mode-btn *,
.search-mode-btn::before,
.search-mode-btn::after {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: none !important;
    background-clip: initial !important;
    -webkit-background-clip: initial !important;
    text-shadow: none !important;
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
}

.search-mode-btn.active {
    background: #f1f5fb !important;
    border-color: #0d6efd !important;
    color: #0d6efd !important;
    box-shadow: 0 1px 3px rgba(13, 110, 253, 0.2) !important;
    transform: none !important;
}

.search-mode-btn.active:hover {
    background: #f1f5fb !important;
    border-color: #0d6efd !important;
    color: #0d6efd !important;
    transform: none !important;
    box-shadow: 0 1px 3px rgba(13, 110, 253, 0.3) !important;
}

.search-mode-btn.disabled,
.search-mode-btn:disabled {
    background: #f3f4f6 !important;
    border-color: #e5e7eb !important;
    color: #9ca3af !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
    transform: none !important;
    box-shadow: none !important;
}

.search-mode-btn.disabled:hover,
.search-mode-btn:disabled:hover {
    background: #f3f4f6 !important;
    border-color: #e5e7eb !important;
    color: #9ca3af !important;
    transform: none !important;
    box-shadow: none !important;
}

.file-attach-btn {
    border-radius: 8px !important;
    padding: 0.5rem !important;
    border: 1px solid #e5e7eb !important;
    background: #ffffff !important;
    color: #1f2937 !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 16px !important;
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    z-index: 10 !important;
    box-shadow: none !important;
}

.file-attach-btn::before {
    display: none !important;
    content: none !important;
}

.file-attach-btn::after {
    display: none !important;
    content: none !important;
}

.file-attach-btn * {
    position: relative !important;
    z-index: 1 !important;
}

.file-attach-btn:hover {
    background: #f9fafb !important;
    border-color: #d1d5db !important;
    color: #111827 !important;
    transform: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.file-attach-btn.disabled,
.file-attach-btn:disabled {
    background: #f3f4f6 !important;
    border-color: #e5e7eb !important;
    color: #9ca3af !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
    transform: none !important;
    box-shadow: none !important;
}

.file-attach-btn.disabled:hover,
.file-attach-btn:disabled:hover {
    background: #f3f4f6 !important;
    border-color: #e5e7eb !important;
    color: #9ca3af !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Send Button - DeepSeek Style */
#sendBtn {
    position: absolute !important;
    bottom: 6px !important;
    right: 12px !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
    border: none !important;
    color: white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    z-index: 10 !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4) !important;
    font-size: 1.1rem !important;
}

#sendBtn:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
    transform: scale(1.05) !important;
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5) !important;
}

#sendBtn:active {
    transform: scale(0.95) !important;
    box-shadow: 0 1px 4px rgba(99, 102, 241, 0.3) !important;
}

#sendBtn:disabled {
    background: var(--primary-light) !important;
    color: white !important;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

#newChatBtn {
    height: 36px !important;
    border-radius: 18px !important;
    /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; */
    background: linear-gradient(135deg, #427ef6 5%, #825ff6 85%) !important;
    /* border: 1px solid transparent !important; */
    color: #dae2fa !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3) !important;
}

#newChatBtn:hover {
    /* background: linear-gradient(135deg, #764ba2 0%, #667eea 100%) !important; */
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.5) !important;
    transform: translateY(-1px) !important;
    color: white !important;
    border-color: transparent !important;
}

#newChatBtn i,
#newChatBtn .bi {
    font-size: 18px !important;
}

#newChatBtn:active {
    transform: scale(0.95);
}

#newChatBtn:disabled {
    background: rgba(13, 110, 253, 0.05) !important;
    color: var(--primary-dark) !important;
}

.manual-load-sessions button {
    margin-top: 6px;
    width: 100% !important;
    height: 36px !important;
    border-radius: 8px !important;
    background: rgba(13, 110, 253, 0.05) !important;
    border: none !important;
    color: var(--primary-dark) !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}

.manual-load-sessions button:hover {
    background: rgba(13, 110, 253, 0.05) !important;
    color: var(--primary-dark) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.manual-load-sessions button:active {
    transform: scale(0.95);
}

.manual-load-sessions button:disabled {
    background: rgba(13, 110, 253, 0.05) !important;
    color: #0d6efd !important;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .chat-input-container {
        padding: 0 0.5rem;
    }

    .chat-input-wrapper {
        padding: 12px;
    }

    .search-buttons {
        flex-wrap: wrap;
        gap: 4px;
    }

    .search-mode-btn {
        font-size: 12px;
        padding: 4px 8px;
        min-height: 28px;
    }

    .file-attach-btn {
        min-width: 28px;
        height: 28px;
        padding: 4px;
    }

    #sendBtn {
        width: 32px;
        height: 32px;
        bottom: 12px;
        right: 12px;
    }

    #stopBtn {
        width: 32px !important;
        height: 32px !important;
        bottom: 12px !important;
        right: 56px !important;
        /* maintain 12px gap from send */
    }

    .search-mode-indicator {
        font-size: 11px;
        padding: 3px 6px;
    }
}

/* Session loading indicator styles */
.sessions-loading-indicator {
    margin: 10px 0;
    opacity: 0.7;
}

/* Smooth transition for session loading */
.chat-session-item {
    transition: opacity 0.3s ease-in-out;
}

/* Ensure proper scrolling for session container */
#chatSessions {
    overflow-y: auto;
    scroll-behavior: smooth;
}

/* Fix New Chat button at top of sidebar */
.sidebar .p-3 {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--secondary-color);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0;
}

/* Ensure flex-grow-1 takes remaining space */
.sidebar .flex-grow-1 {
    flex: 1;
    min-height: 0;
    /* Important for flex child to be scrollable */
}


/* Manual load sessions button */
.manual-load-sessions {
    border-top: 1px solid var(--border-color);
    background: var(--secondary-color);
    margin-top: 10px;
}

.manual-load-sessions button {
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
}

/* Message status indicators */
.message-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: #64748b;
    margin-left: 8px;
    font-weight: 500;
}

.message-status-icon {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
}

.message-status-icon.sending {
    background: #3b82f6;
    animation: pulse 1.5s ease-in-out infinite;
}

.message-status-icon.stopped {
    background: #f59e0b;
}

.message-status-icon.incomplete {
    background: #ef4444;
}

.message-status-icon.sent {
    background: #10b981;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Incomplete response styling */
.message.assistant.incomplete .message-content::after {
    content: " [Incomplete]";
    color: #ef4444;
    font-size: 0.85em;
    font-weight: 500;
}

/* Stopped message styling */
.message.user.stopped {
    border-left: 3px solid #f59e0b;
}

/* Edit button more prominent on stopped messages */
.message.user.stopped .edit-message-btn {
    opacity: 1;
    background: #f59e0b;
    color: white;
}

/* Toast Notification Styles */
.notification-toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    background: white;
    border-radius: 8px;
    padding: 12px 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 300px;
    max-width: 500px;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
}

.notification-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.notification-toast .toast-content {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #374151;
    font-size: 14px;
}

.notification-toast i {
    font-size: 20px;
}

.notification-toast-info {
    border-left: 4px solid #3b82f6;
}

.notification-toast-info i {
    color: #3b82f6;
}

.notification-toast-success {
    border-left: 4px solid #10b981;
}

.notification-toast-success i {
    color: #10b981;
}

.notification-toast-warning {
    border-left: 4px solid #f59e0b;
}

.notification-toast-warning i {
    color: #f59e0b;
}

.notification-toast-error {
    border-left: 4px solid #ef4444;
}

.notification-toast-error i {
    color: #ef4444;
}

.notification-toast-processing {
    border-left: 4px solid #8b5cf6;
}

.notification-toast-processing i {
    color: #8b5cf6;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Dark theme support */
body.dark-theme .notification-toast {
    background: #1f2937;
}

body.dark-theme .notification-toast .toast-content {
    color: #e5e7eb;
}

.file-attach-tooltip {
    display: none;
    position: absolute;
    top: 85%;
    left: 80%;
    /* transform: translateX(-20%);*/
    background: #222;
    color: #fff;
    padding: 6px 30px;
    border-radius: 2px;
    font-size: 0.85em;
    width: 440px;
    max-width: 85vw;
    text-align: left;
    z-index: 3500;
    white-space: normal;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}

/* .file-attach-tooltip::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 80%;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #222;
} */

@media (max-width: 700px) {
    .file-attach-tooltip {
        width: 95vw;
        left: 50%;
        transform: translateX(-50%);
        font-size: 0.85em;
        padding: 7px 8vw;
    }
}

.file-attach-tooltip.show {
    display: block;
}

/* Mermaid diagram support */
.mermaid {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    background: transparent;
    color: inherit;
    font-family: inherit;
    line-height: inherit;
    margin: 0.75rem 0;
    padding: 0;
}

.mermaid svg {
    max-width: 100%;
    height: auto;
    display: block;
}

.mermaid {
    font-family: 'Inter', sans-serif;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    padding: 32px 24px;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
    overflow-x: auto;
    border: 1px solid #e2e8f0;
    margin: 1.25rem 0;
    max-width: 100%;
}

/* 1. Root Node (Center) - The Anchor */
.mermaid .rootNode>content>foreignObject>div {
    background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
    /* Mango Orange */
    color: white !important;
    font-weight: 800;
    font-size: 20px;
    padding: 18px 36px;
    border-radius: 50px;
    box-shadow: 0 8px 16px rgba(245, 124, 0, 0.3);
    text-align: center;
    border: 4px solid #FFF3E0;
    /* Light border for pop */
}

/* 2. Leaf Nodes (The 6 Steps) - Uniform Cards */
.mermaid .leafNode>content>foreignObject>div {
    background: #FFFFFF;
    color: #374151 !important;
    /* Dark Gray Text */
    font-weight: 600;
    font-size: 15px;
    padding: 14px 24px;
    border-radius: 12px;
    border: 1px solid #E5E7EB;
    /* Subtle Gray Border */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    text-align: center;
    min-width: 120px;
    /* Ensures uniform size */
}

/* Hover Effect for Interactivity */
.mermaid .leafNode:hover>content>foreignObject>div {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border-color: #FF9800;
    /* Orange border on hover */
    color: #F57C00 !important;
    background: #FFF7ED;
    /* Very light orange bg */
}

/* Edges (Lines) - Soft and Curved */
.mermaid .edgePath .path {
    stroke: #D1D5DB !important;
    stroke-width: 2.5px !important;
    fill: none;
    stroke-linecap: round;
}

/* Toolbar for mermaid controls (download / copy) */
.mermaid-toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    margin: 8px 0 0 0;
}

.mermaid-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    color: #6b7280;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.mermaid-toolbar-btn svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
    display: block;
}

.mermaid-toolbar-btn.primary {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: #fff;
    border: none;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}

.mermaid-toolbar-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.mermaid-toolbar-btn.primary:hover {
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.35);
    filter: brightness(1.02);
}

.mermaid-toolbar-btn:active {
    transform: translateY(0);
}

/* Dark mode overrides */
:root[data-theme="dark"] .mermaid {
    background: linear-gradient(180deg, #141414 0%, #1a1a1a 100%);
    border: 1px solid #2a2a2a;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    border-radius: 14px;
    padding: 32px 24px;
    margin: 1.25rem 0;
    max-width: 100%;
}

:root[data-theme="dark"] .mermaid .node rect,
:root[data-theme="dark"] .mermaid .node ellipse,
:root[data-theme="dark"] .mermaid .node polygon,
:root[data-theme="dark"] .mermaid .node circle {
    fill: #1f1f1f;
    stroke: #3d3d3d;
    filter: none;
}

:root[data-theme="dark"] .mermaid .label,
:root[data-theme="dark"] .mermaid text {
    fill: #e5e5e5;
}

:root[data-theme="dark"] .mermaid .edgePath path,
:root[data-theme="dark"] .mermaid .edgePath .path {
    stroke: #4f46e5;
    stroke-width: 2;
}

:root[data-theme="dark"] .mermaid-toolbar-btn {
    background: #262626;
    color: #a3a3a3;
    border: 1px solid #404040;
    box-shadow: none;
}

:root[data-theme="dark"] .mermaid-toolbar-btn:hover {
    background: #333333;
    color: #ffffff;
    transform: translateY(-1px);
}

:root[data-theme="dark"] .mermaid-toolbar-btn.primary {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

:root[data-theme="dark"] .mermaid-toolbar-btn.primary:hover {
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
}

:root[data-theme="dark"] .mermaid-wrapper {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    border: 1px solid #2a2a2a;
    border-radius: 14px;
    margin: 1.25rem 0;
}

/* Small utility tweak for rounded rect attributes */
.mermaid .node rect[rx] {
    rx: 8px;
    ry: 8px;
}

/* ========================
   Shared Session Page Styles
   ======================== */

:root {
    --primary: #6366f1;
    --primary-dark: #4f46e5;
    --primary-light: #c7d2fe;
    --primary-bg: #e0e7ff;
    --success: #10b981;
    --success-light: #d1fae5;
    --warning: #f59e0b;
    --warning-light: #fef3c7;
    --text-dark: #1e293b;
    --text-muted: #64748b;
    --border: #e2e8f0;
    --bg-light: #f8fafc;
}

.shared-session {
    min-height: 100vh;
    background: linear-gradient(180deg, var(--bg-light) 0%, #e2e8f0 100%);
}

.shared-header {
    background: white;
    border-bottom: 3px solid var(--primary);
    padding: 1.5rem;
    color: var(--text-dark);
}

.shared-header .brand-logo {
    width: 48px;
    height: 48px;
    background: var(--primary-bg);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.session-info-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    padding: 1rem;
    margin-bottom: 1.5rem;
    margin-left: 2rem;
}

.session-title-section {
    border-bottom: 1px solid var(--border);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

.session-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.session-meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.session-meta-item i {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 0.75rem;
}

.meta-owner {
    background: #e0e7ff;
    color: var(--primary);
}

.meta-date {
    background: var(--warning-light);
    color: var(--warning);
}

.meta-view {
    background: var(--success-light);
    color: var(--success);
}

.message-bubble {
    border-radius: 16px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.message-bubble:hover {
    transform: translateY(-2px);
}

.user-message-bubble {
    background: var(--primary-bg);
    color: var(--primary-dark);
    border-bottom-right-radius: 4px;
    border-left: 3px solid var(--primary);
    margin-left: 2rem;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
}

.user-message-bubble .message-header {
    color: var(--primary);
}

.user-message-bubble .message-header i {
    color: var(--primary);
}

.assistant-message-bubble {
    margin-right: 2rem;
}

.message-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.label-user {
    background: rgba(99, 102, 241, 0.15);
    color: var(--primary);
}

.label-assistant {
    background: var(--success-light);
    color: var(--success);
}

.shared-footer {
    border-top: 1px solid #bebce3;
    padding: 1rem;
    margin-top: 1rem;
    text-align: center;
}

.shared-footer .footer-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.shared-footer .footer-brand img {
    width: 32px;
    height: 32px;
}

.read-only-badge {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

.markdown-content {
    line-height: 1.7;
}

.markdown-content table {
    width: 100%;
    margin: 1rem 0;
    border-collapse: collapse;
}

.markdown-content th,
.markdown-content td {
    padding: 0.75rem;
    border: 1px solid var(--border);
    text-align: right;
}

.markdown-content th {
    background: var(--primary-bg);
    color: var(--primary-dark);
    font-weight: 600;
}

.markdown-content tr:nth-child(even) {
    background: #f9fafb;
}

.markdown-content pre {
    background: #1e1e1e;
    color: #d4d4d4;
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
    margin: 1rem 0;
}

.markdown-content code {
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 0.875rem;
}

.markdown-content p {
    margin-bottom: 0.75rem;
}

.markdown-content ul,
.markdown-content ol {
    padding-right: 1.5rem;
    margin-bottom: 0.75rem;
}

.markdown-content li {
    margin-bottom: 0.25rem;
}

.markdown-content blockquote {
    border-right: 3px solid var(--primary);
    padding-right: 1rem;
    margin: 1rem 0;
    color: var(--text-muted);
    background: var(--primary-bg);
    padding: 0.75rem 1rem;
    border-radius: 0 8px 8px 0;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--text-dark);
}

.markdown-content a {
    color: var(--primary);
    text-decoration: none;
}

.markdown-content a:hover {
    text-decoration: underline;
}

/* ========================
   Shared Session Files Section
   ======================== */

.session-files-section {
    margin-bottom: 1rem;
}

.session-files-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 1rem;
}

.files-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.file-item-compact {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.6rem !important;
    border-radius: 8px;
    font-size: 0.8rem;
    max-width: 280px;
    transition: all 0.15s ease;
}

.file-item-compact:hover {
    background: var(--primary-bg);
}

.file-item-compact .file-name-compact {
    font-weight: 500;
    color: var(--text-dark);
    max-width: 180px;
}

.file-item-compact.file-error {
    border-color: #fca5a5;
    background: #fef2f2;
}

.file-item-compact .file-icon {
    font-size: 1rem;
    display: flex;
    align-items: center;
}

/* Old file item styling (kept for reference) */
.files-list .file-item {
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid var(--border);
    transition: all 0.2s ease;
}

.session-files-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    padding: 1rem;
    margin-left: 2rem;
}

.files-list .file-item {
    /* background: #f8fafc;
    border-radius: 12px;
    border: 1px solid var(--border); */
    transition: all 0.2s ease;
}

.files-list .file-item:hover {
    /* border-color: var(--primary); */
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
}

.files-list .file-icon {
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--primary-bg);
    border-radius: 10px;
}

.files-list .file-name {
    font-size: 0.7rem;
    word-break: break-word;
}

.file-size {
    font-size: 0.75rem;
}

/* Dark mode for shared session files */
:root[data-theme="dark"] .session-files-card,
body[data-theme="dark"] .session-files-card {
    background: #1e2028;
    border-color: #2d3139;
}

:root[data-theme="dark"] .files-list .file-item,
body[data-theme="dark"] .files-list .file-item {
    background: #2d3139;
    border-color: #3d444f;
}

:root[data-theme="dark"] .files-list .file-item:hover,
body[data-theme="dark"] .files-list .file-item:hover {
    border-color: var(--primary);
}

:root[data-theme="dark"] .files-list .file-name,
body[data-theme="dark"] .files-list .file-name {
    color: #e2e8f0;
}

/* File error styling */
.file-item.file-error {
    border-color: #fca5a5 !important;
    background: #fef2f2 !important;
}

.file-item.file-error .file-name {
    color: #dc2626 !important;
}

.file-error-message {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    background: rgba(220, 38, 38, 0.1);
    border-radius: 8px;
    margin-top: 0.5rem;
}

/* Text utilities */
.text-purple {
    color: #9333ea !important;
}