/* Neurolex Dashboard Styles - Consolidated from all HTML templates */

/* Base CSS Variables and Root Styles from base.html */
:root {
    /* Enhanced Color Palette with Better Contrast */
    --discord-dark: #1a1c20;
    --discord-darker: #0f1012;
    --discord-blurple: #5865F2;
    --discord-bright-blurple: #7289da;
    --discord-green: #43b581;
    --discord-bright-green: #57F287;
    --discord-yellow: #faa61a;
    --discord-red: #f04747;
    --discord-light-text: #ffffff;
    --discord-muted-text: #ffffff; /* Changed from light gray to white for better visibility */
    --discord-highlight: #2f3136;
    --discord-separator: #40444b;
    --discord-glow: 0 0 10px rgba(120, 160, 255, 0.5); /* Softer blue glow */
    --text-glow: 0 0 8px rgba(120, 160, 255, 0.4); /* Subtle blue glow */
    --heading-color: #00e5ff; /* Cyan for headings */
    --link-color: #bb86fc; /* Purple for links */
    --highlight-color: #ffeb3b; /* Yellow for highlighted text */
    --button-text: #ffffff; /* White for button text */
    --info-color: #29b6f6; /* Light blue for info text */
    --owner-highlight: #ff9d00; /* Orange highlight for owner elements */
    --owner-glow: 0 0 12px rgba(255, 157, 0, 0.6); /* Orange glow for owner elements */
}

body {
    background: linear-gradient(135deg, var(--discord-darker) 0%, var(--discord-dark) 100%);
    color: var(--discord-light-text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    letter-spacing: 0.2px;
    line-height: 1.6; /* Improved line height for readability */
}

/* Base text styling */
body {
    color: var(--discord-light-text);
    font-size: 1rem; /* Base font size */
}

/* Responsive font-size scaling */
html { font-size: 100%; }
@media (max-width: 576px) { html { font-size: 90%; } }
@media (min-width: 1200px) { html { font-size: 110%; } }

/* Heading styles with better visibility */
h1, h2, h3, h4, h5, h6 {
    color: var(--heading-color) !important;
    font-weight: 600;
    margin-bottom: 1rem;
    text-shadow: var(--text-glow);
    letter-spacing: 0.5px;
}

h1 { font-size: 1.8rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.2rem; }
h5, h6 { font-size: 1rem; }

/* Paragraph and general text */
p, div, span, li, td, th {
    color: var(--discord-light-text);
    text-shadow: none; /* Remove glow from normal text for better readability */
}

/* Important text and labels */
.card-title, .fw-bold, .important-text, label {
    color: var(--highlight-color) !important;
    font-weight: 500;
}

/* Stats and numbers */
.stats-number, .member-count {
    color: var(--info-color) !important;
    font-weight: 600;
    font-size: 1.1rem;
}

/* Improved Navbar with Gradient */
.navbar {
    background: linear-gradient(90deg, var(--discord-darker) 0%, #1e2124 100%);
    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
    border-bottom: 1px solid var(--discord-separator);
    padding: 0.8rem 1rem;
}

.navbar-brand {
    font-weight: 700;
    color: var(--heading-color) !important;
    text-shadow: var(--text-glow);
    font-size: 1.4rem;
}

.nav-link {
    color: var(--discord-light-text) !important;
    transition: all 0.2s ease;
    font-weight: 500;
    border-radius: 4px;
    padding: 0.5rem 1rem;
}

.nav-link:hover {
    color: var(--highlight-color) !important;
    background-color: rgba(79, 84, 92, 0.32);
}

.nav-link.active {
    color: var(--highlight-color) !important;
    background-color: rgba(79, 84, 92, 0.16);
}

/* Enhanced Card Styling */
.card {
    background-color: #2a2d31;
    border: 1px solid var(--discord-separator);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    margin-bottom: 24px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    overflow: hidden;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.card-header {
    background-color: #222529;
    border-bottom: 1px solid var(--discord-separator);
    font-weight: 600;
    color: var(--heading-color) !important;
    padding: 1rem 1.25rem;
}

/* Improved Button Styles */
.btn {
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 0.5rem 1.25rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.btn-primary {
    background: linear-gradient(to bottom, var(--discord-bright-blurple), var(--discord-blurple));
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    color: var(--button-text) !important;
}

.btn-primary:hover {
    background: linear-gradient(to bottom, var(--discord-blurple), #4752c4);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.btn-success {
    background: linear-gradient(to bottom, var(--discord-bright-green), var(--discord-green));
    border: none;
    color: var(--button-text) !important;
}

.btn-danger {
    background: linear-gradient(to bottom, var(--discord-red), #d04343);
    border: none;
    color: var(--button-text) !important;
}

.btn-warning {
    background: var(--discord-yellow);
    color: #2a2d31 !important;
    font-weight: 600;
}

/* Enhanced Alert Styles */
.alert {
    border-radius: 4px;
    border: 0;
    font-weight: 500;
    padding: 1rem;
}

.alert-success {
    background-color: rgba(67, 181, 129, 0.2);
    border-left: 4px solid var(--discord-green);
    color: #a5f0c5 !important;
}

.alert-danger {
    background-color: rgba(240, 71, 71, 0.2);
    border-left: 4px solid var(--discord-red);
    color: #f7a5a5 !important;
}

.alert-warning {
    background-color: rgba(250, 166, 26, 0.2);
    border-left: 4px solid var(--discord-yellow);
    color: #ffd56c !important;
}

.alert-info {
    background-color: rgba(114, 137, 218, 0.2);
    border-left: 4px solid var(--discord-bright-blurple);
    color: #a5c5f7 !important;
}

/* Server Card with Enhanced Hover */
.server-card {
    transition: all 0.3s ease;
    cursor: pointer;
    border: 2px solid transparent;
}

.server-card:hover {
    transform: translateY(-5px);
    border-color: var(--discord-bright-blurple);
    box-shadow: var(--discord-glow);
}

/* Server name styling */
.server-card .card-title {
    color: var(--heading-color) !important;
    font-weight: 600;
    text-shadow: var(--text-glow);
}

/* Server ID styling */
.server-card small.text-muted {
    color: #ffffff !important;
    font-weight: 500;
}

/* Server member count */
.member-count {
    color: var(--info-color) !important;
    font-weight: 600;
}

/* Link Styling */
a {
    color: var(--link-color) !important;
    text-decoration: none;
    transition: all 0.15s ease;
    position: relative;
}

a:hover {
    color: var(--link-color) !important;
    text-decoration: underline;
    text-shadow: 0 0 8px rgba(187, 134, 252, 0.5);
}

/* Form Control Styling */
.form-control, .form-select {
    background-color: #40444b;
    color: var(--discord-light-text) !important;
    border: 1px solid var(--discord-separator);
    padding: 0.75rem 1rem;
    font-size: 1rem;
}

.form-control:focus, .form-select:focus {
    background-color: #40444b;
    color: var(--discord-light-text) !important;
    border-color: var(--discord-blurple);
    box-shadow: 0 0 0 0.25rem rgba(88, 101, 242, 0.25);
}

/* Form labels */
label.form-label {
    color: var(--highlight-color) !important;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

/* Footer Styling */
.footer {
    background-color: var(--discord-darker);
    color: #ffffff;
    padding: 20px 0;
    margin-top: auto;
    border-top: 1px solid var(--discord-separator);
}

/* Avatar Styling */
.avatar {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    margin-right: 10px;
    border: 2px solid var(--discord-bright-blurple);
    box-shadow: 0 0 8px rgba(114, 137, 218, 0.6);
}

/* Toggle Switch Styling */
.form-switch .form-check-input:checked {
    background-color: var(--discord-bright-green);
    border-color: var(--discord-green);
}

.form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(87, 242, 135, 0.25);
}

/* Server Icons */
.server-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--discord-blurple), var(--discord-bright-blurple));
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: white;
    font-weight: bold;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.server-icon-sm {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 18px;
}

/* Feature Icons with Animation */
.feature-icon {
    font-size: 2.5rem;
    color: #ffffff; /* Changed to white */
    margin-bottom: 15px;
    transition: all 0.3s ease;
    text-shadow: var(--text-glow);
}

.feature-icon:hover {
    color: #ffffff; /* Changed to white */
    transform: scale(1.1);
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.9), 0 0 30px rgba(255, 255, 255, 0.7);
}

/* Table Styling */
.table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

.table-dark {
    --bs-table-bg: #2a2d31;
    --bs-table-striped-bg: #2e3136;
}

.table-dark th {
    background-color: #222529;
    border-bottom: 2px solid var(--discord-separator);
    color: #ffffff; /* Changed to white */
    text-shadow: var(--text-glow);
}

.table-dark td {
    border-bottom: 1px solid var(--discord-separator);
}

/* Dropdown Menu */
.dropdown-menu {
    background-color: #2a2d31;
    border: 1px solid var(--discord-separator);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
    z-index: 1000; /* Ensure dropdown overlays other content */
}

.dropdown-item {
    color: #ffffff !important; /* Changed to white */
    text-shadow: var(--text-glow);
}

.dropdown-item:hover {
    background-color: var(--discord-highlight);
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.9), 0 0 30px rgba(255, 255, 255, 0.7);
}

/* List Group Styling */
.list-group-item {
    background-color: #2a2d31;
    border-color: var(--discord-separator);
    color: var(--discord-light-text);
    transition: all 0.2s ease;
    text-shadow: var(--text-glow);
}

.list-group-item:hover {
    background-color: var(--discord-highlight);
}

/* Badge Styling */
.badge {
    font-weight: 600;
    padding: 0.35em 0.65em;
    text-shadow: var(--text-glow);
}

/* Code Block Styling */
code {
    background-color: #2b2d31;
    color: #e0e1e5;
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-family: 'Consolas', monospace;
    text-shadow: var(--text-glow);
}

/* Settings Section Styling */
.settings-section {
    border-left: 3px solid var(--discord-bright-blurple);
    padding-left: 15px;
    margin-bottom: 20px;
    text-shadow: var(--text-glow);
}

/* Toast Notifications */
.toast {
    background-color: #2a2d31;
    border: 1px solid var(--discord-separator);
    text-shadow: var(--text-glow);
}

/* Fix for muted text */
.text-muted, small.text-muted, .text-secondary, .text-black-50, .text-white-50 {
    color: #ffffff !important;
    opacity: 0.95;
}

/* Fix for description text */
p.text-muted, .form-text.text-muted {
    color: #ffffff !important;
    opacity: 0.9;
}

/* Owner panel styling */
.owner-panel-link {
    color: var(--owner-highlight) !important;
    text-shadow: var(--owner-glow);
    font-weight: 700;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.owner-panel-link:hover {
    border-color: var(--owner-highlight);
    box-shadow: var(--owner-glow);
    transform: translateY(-1px);
}

/* Owner dropdown headers */
.dropdown-menu .dropdown-header {
    color: var(--heading-color) !important;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
}

/* Owner dropdown items */
.owner-dropdown-item {
    position: relative;
    font-weight: bold;
    border-left: 3px solid var(--discord-blurple);
    transition: background-color 0.3s ease;
    padding: 0.6rem 1rem; /* better spacing */
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.98rem;
    line-height: 1.1;
}

.owner-dropdown-item:hover {
    background-color: var(--discord-blurple);
    color: white;
}

.owner-dropdown-item i {
    position: relative;
    left: 0;
    top: 0;
    transform: none;
    transition: all 0.12s ease;
    font-size: 1.1rem;
    width: 1.2rem;
    text-align: center;
}

.owner-dropdown-item:hover i {
    color: var(--owner-highlight) !important;
    transform: scale(1.15);
}

/* Polished active/focus state for keyboard nav */
.owner-dropdown-item:focus, .owner-dropdown-item.active {
    outline: none;
    background-color: rgba(114,137,218,0.12);
    box-shadow: 0 0 0 3px rgba(114,137,218,0.08) inset;
}

/* Owner dropdown scroll area */
.dropdown-menu .row#ownerDropdownContent {
    max-height: 380px; /* keeps dropdown from growing too large */
    overflow: auto;
    padding-right: 6px; /* space for scrollbar */
}

/* Custom thin scrollbar for better look */
.dropdown-menu .row#ownerDropdownContent::-webkit-scrollbar { width: 8px; }
.dropdown-menu .row#ownerDropdownContent::-webkit-scrollbar-track { background: transparent; }
.dropdown-menu .row#ownerDropdownContent::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 8px; }

/* Search box visual polish */
#ownerDropdownSearch {
    background-color: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    color: var(--discord-light-text) !important;
    box-shadow: none;
}

#ownerDropdownSearch:focus {
    border-color: var(--discord-blurple);
    box-shadow: 0 0 0 0.25rem rgba(88,101,242,0.12);
    background-color: rgba(255,255,255,0.02);
}

/* Reduce heavy glow on text for this dropdown to improve readability */
.dropdown-menu .owner-dropdown-item, .dropdown-menu .dropdown-header {
    text-shadow: none;
}

/* Header spacing */
.dropdown-menu .dropdown-header {
    padding-top: 0.6rem;
    padding-bottom: 0.35rem;
    font-size: 0.78rem;
    color: var(--info-color) !important;
}

/* Notification indicator */
.notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--discord-red);
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 0.7rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    box-shadow: 0 0 5px rgba(240, 71, 71, 0.7);
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(240, 71, 71, 0.7); }
    70% { box-shadow: 0 0 0 6px rgba(240, 71, 71, 0); }
    100% { box-shadow: 0 0 0 0 rgba(240, 71, 71, 0); }
}

/* Owner panel style override */
#ownerDropdown {
    background-color: rgba(255, 157, 0, 0.15);
    border: 1px solid var(--owner-highlight);
    color: var(--owner-highlight) !important;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 0.5rem 1.25rem;
    position: relative;
}

#ownerDropdown:hover {
    background-color: rgba(255, 157, 0, 0.25);
    box-shadow: var(--owner-glow);
    transform: translateY(-1px);
}

/* Mobile optimized adjustments */
@media (max-width: 576px) {
    .navbar { padding: 0.5rem 0.5rem; }
    .navbar-brand { font-size: 1.2rem; }
    .nav-link { padding: 0.4rem 0.6rem; font-size: 0.85rem; }
    .container-fluid { padding-left: 0.5rem; padding-right: 0.5rem; }
    .card { margin-bottom: 1rem; }
    h1 { font-size: 1.4rem; }
    table { font-size: 0.85rem; }
    .btn { font-size: 0.85rem; padding: 0.4rem 0.8rem; }
    .form-control, .form-select { font-size: 0.85rem; }
    .alert { font-size: 0.9rem; padding: 0.75rem; }
}

/* Server Dashboard Specific Styles */
.toggle-label {
    font-weight: 600;
    margin-bottom: 0;
}

.settings-section {
    border-left: 3px solid var(--discord-blurple);
    padding-left: 15px;
}

.channel-select {
    background-color: #36393f;
    color: white;
    border: 1px solid #202225;
}

.channel-select:focus {
    background-color: #36393f;
    color: white;
    border-color: var(--discord-blurple);
    box-shadow: 0 0 0 0.25rem rgba(88, 101, 242, 0.25);
}

/* Index Page Specific Styles */
.hero-section {
    background: linear-gradient(145deg, #2a2d31 0%, #1a1c20 100%);
    border-radius: 12px;
    padding: 3rem 2rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--discord-separator);
    margin-bottom: 3rem;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(88, 101, 242, 0.2) 0%, rgba(114, 137, 218, 0) 70%);
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 1;
}

.feature-card {
    height: 100%;
    border-top: 4px solid transparent;
    transition: all 0.3s ease;
    background: linear-gradient(145deg, #2d3035 0%, #252529 100%);
    border: 1px solid rgba(114, 137, 218, 0.3);
}

.feature-card:hover {
    border-top-color: var(--discord-bright-blurple);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4), 0 0 15px rgba(114, 137, 218, 0.4);
}

.feature-card .feature-icon {
    font-size: 2.8rem;
    background: linear-gradient(135deg, #8ea1ff, #5865F2);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    filter: drop-shadow(0 2px 4px rgba(88, 101, 242, 0.8));
}

.cta-section {
    background: linear-gradient(135deg, rgba(88, 101, 242, 0.25) 0%, rgba(67, 181, 129, 0.15) 100%);
    border-radius: 12px;
    padding: 2.5rem;
    border: 2px solid rgba(114, 137, 218, 0.4);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 15px rgba(88, 101, 242, 0.3);
}

.btn-cta {
    padding: 0.75rem 2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: linear-gradient(to right, var(--discord-bright-blurple), #4752c4);
    box-shadow: 0 4px 15px rgba(88, 101, 242, 0.5);
    border: none;
    transition: all 0.3s ease;
}

.btn-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(88, 101, 242, 0.7);
    background: linear-gradient(to right, #8ea1ff, var(--discord-bright-blurple));
}

.command-example {
    background-color: #1e2124;
    border-radius: 8px;
    padding: 1rem;
    font-family: 'Consolas', monospace;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--discord-separator);
    margin-bottom: 1rem;
    color: #e0e1e5;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
}

.command-example::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, var(--discord-bright-blurple), var(--discord-bright-green));
}

.command-example code {
    color: #e0e1e5;
    font-weight: 500;
}

.feature-section {
    padding: 2rem 0;
}

.stat-card {
    text-align: center;
    padding: 1.5rem;
    background: linear-gradient(145deg, #2d3035 0%, #252529 100%);
    border: 1px solid rgba(114, 137, 218, 0.3);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0.5rem 0;
    background: linear-gradient(135deg, #8ea1ff, #65f795);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 3px rgba(114, 137, 218, 0.7));
}

.stat-label {
    color: #e0e1e5;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.glow-border {
    position: relative;
}

.glow-border::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    box-shadow: 0 0 20px rgba(114, 137, 218, 0.6);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.glow-border:hover::after {
    opacity: 1;
}

.features-title {
    font-weight: 700;
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
    color: #ffffff;
    text-shadow: 0 0 15px rgba(114, 137, 218, 0.7), 0 0 5px rgba(0, 0, 0, 0.5);
    position: relative;
    display: inline-block;
    background-clip: text;
    -webkit-background-clip: text;
    padding-bottom: 10px;
}

.features-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 4px;
    background: linear-gradient(to right, var(--discord-bright-blurple), var(--discord-bright-green));
    border-radius: 4px;
}

.features-subtitle {
    color: var(--discord-muted-text);
    font-size: 1.1rem;
    margin-bottom: 2.5rem;
    text-align: center;
}

.feature-card h4 {
    color: #ffffff;
    font-weight: 600;
    margin-top: 1rem;
    margin-bottom: 1rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.feature-card p {
    color: #b9bbbe;
    line-height: 1.6;
}

/* Server AI Page Specific Styles */
.ai-page { 
    height: calc(100vh - 160px); 
    display:flex; 
    gap:18px; 
    background:transparent; 
}

.ai-sidebar { 
    width:300px; 
    min-width:220px; 
    max-width:340px; 
    background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent); 
    border-radius:12px; 
    padding:0; 
    display:flex; 
    flex-direction:column; 
    box-shadow: 0 8px 30px rgba(2,6,23,0.65); 
}

.ai-sidebar .px-3 { 
    padding-left:14px; 
    padding-right:14px; 
}

.ai-sessions { 
    padding:0.6rem; 
    overflow:auto; 
}

.ai-session-btn { 
    display:flex; 
    align-items:center; 
    gap:.6rem; 
    padding:.6rem .75rem; 
    border-radius:.7rem; 
    background:transparent; 
    border:0; 
    text-align:left; 
    width:100%; 
    color: rgba(255,255,255,0.55); 
}

.ai-session-btn:hover { 
    background: rgba(88,101,242,0.06); 
    color: #fff; 
}

.ai-session-btn.active { 
    background: rgba(88,101,242,0.14); 
    font-weight:600; 
    color:#fff; 
}

.ai-main { 
    flex:1; 
    display:flex; 
    flex-direction:column; 
    border-radius:12px; 
    overflow:hidden; 
    background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00)); 
    box-shadow: 0 8px 40px rgba(2,6,23,0.6); 
}

.ai-header { 
    padding:18px 20px; 
    display:flex; 
    align-items:center; 
    justify-content:space-between; 
    gap:12px; 
    border-bottom:1px solid rgba(255,255,255,0.03); 
}

.ai-title { 
    margin:0; 
    font-weight:600; 
    letter-spacing: -0.2px; 
}

.ai-sub { 
    color: rgba(255,255,255,0.55); 
    font-size:0.88rem; 
}

.chat-box { 
    flex:1; 
    padding:28px; 
    overflow:auto; 
    display:flex; 
    flex-direction:column; 
    gap:14px; 
    background: radial-gradient(1200px 400px at 10% 10%, rgba(88,101,242,0.02), transparent); 
}

.chat-row { 
    display:flex; 
    gap:12px; 
    align-items:flex-end; 
}

.chat-row.user { 
    justify-content:flex-end; 
}

.chat-bubble { 
    max-width:74%; 
    padding:12px 16px; 
    border-radius:12px; 
    font-size:0.98rem; 
    line-height:1.4; 
    position:relative; 
    overflow:visible; 
}

.chat-bubble .bubble-content { 
    white-space:pre-wrap; 
    word-break:break-word; 
}

.chat-bubble.user { 
    background: linear-gradient(180deg,#4f46e5,#5865F2); 
    color:white; 
    box-shadow: 0 6px 16px rgba(79,70,229,0.12); 
}

.chat-bubble.ai { 
    background: rgba(255,255,255,0.03); 
    color: #e6eef8; 
    border:1px solid rgba(255,255,255,0.03); 
}

.chat-avatar { 
    width:40px; 
    height:40px; 
    border-radius:50%; 
    display:inline-flex; 
    align-items:center; 
    justify-content:center; 
    background:rgba(255,255,255,0.03); 
    color:#fff; 
    font-weight:700; 
    flex-shrink:0; 
}

.chat-bubble .msg-meta { 
    margin-top:8px; 
    display:flex; 
    align-items:center; 
    justify-content:space-between; 
    gap:8px; 
    font-size:0.78rem; 
    color: rgba(255,255,255,0.55); 
}

.chat-bubble .msg-actions { 
    display:flex; 
    gap:6px; 
    align-items:center; 
    opacity:0; 
    transform:translateY(4px); 
    transition:all .12s ease; 
}

.chat-bubble .msg-actions .btn { 
    padding:4px 8px; 
    font-size:0.78rem; 
}

.chat-bubble:hover .msg-actions { 
    opacity:1; 
    transform:translateY(0); 
}

.ai-input-bar { 
    padding:14px; 
    border-top:1px solid rgba(255,255,255,0.03); 
    display:flex; 
    gap:10px; 
    align-items:center; 
    background:linear-gradient(0deg, rgba(0,0,0,0.02), rgba(0,0,0,0.04)); 
}

.ai-input { 
    flex:1; 
    padding:12px 14px; 
    border-radius:12px; 
    border:1px solid rgba(255,255,255,0.04); 
    background: rgba(255,255,255,0.02); 
    color:inherit; 
}

.ai-btn { 
    padding:8px 14px; 
    border-radius:10px; 
}

.image-upload { 
    border:2px dashed rgba(255,255,255,0.04); 
    padding:12px; 
    border-radius:8px; 
    text-align:center; 
}

/* Admin Forms Additional Styles */
.admin-ai-settings .form-select {
    max-width: 100%;
    margin-bottom: 0.5rem;
}

.admin-ai-settings .card {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    margin-bottom: 1.5rem;
}

.admin-ai-settings .form-check-label {
    cursor: pointer;
}

/* Mobile responsive adjustments for AI page */
@media (max-width: 900px) {
    .ai-sidebar { display:none; }
    .ai-page { height: calc(100vh - 120px); }
    .chat-bubble { max-width:90%; }
    .ai-header { padding:12px; }
}

/* =================================================
   ENHANCED MUSIC PAGE STYLES - ULTRA PREMIUM DESIGN
   ================================================= */

/* Music Page Container */
.music-page-container {
    background: linear-gradient(145deg, 
        rgba(26, 28, 32, 0.95) 0%, 
        rgba(15, 16, 18, 0.98) 30%, 
        rgba(20, 22, 26, 0.96) 100%);
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

.music-page-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 50%, rgba(88, 101, 242, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(114, 137, 218, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(67, 181, 129, 0.04) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* Music Player Card - Premium Design */
.music-player {
    background: linear-gradient(145deg, 
        rgba(102, 126, 234, 0.9) 0%, 
        rgba(118, 75, 162, 0.85) 50%, 
        rgba(88, 101, 242, 0.9) 100%);
    border-radius: 20px;
    color: white;
    padding: 30px;
    margin-bottom: 25px;
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 20px 40px rgba(88, 101, 242, 0.3),
        0 10px 20px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s ease;
}

.music-player::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, 
        transparent 30%, 
        rgba(255, 255, 255, 0.05) 50%, 
        transparent 70%);
    animation: shimmer 3s infinite;
    pointer-events: none;
}

@keyframes shimmer {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

.music-player:hover {
    transform: translateY(-3px);
    box-shadow: 
        0 25px 50px rgba(88, 101, 242, 0.4),
        0 15px 25px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.music-player h4 {
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 20px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.5px;
}

/* Now Playing Section */
.now-playing-info {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 20px;
    margin: 20px 0;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.now-playing-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.now-playing-artist {
    opacity: 0.9;
    font-size: 1rem;
    margin-bottom: 0;
}

/* Music Controls */
.music-controls {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.music-controls .btn {
    border-radius: 12px;
    padding: 12px 16px;
    font-weight: 600;
    border: 2px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    color: white;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    position: relative;
    overflow: hidden;
}

.music-controls .btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    transition: all 0.3s ease;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}

.music-controls .btn:hover::before {
    width: 100px;
    height: 100px;
}

.music-controls .btn:hover {
    transform: translateY(-2px) scale(1.05);
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.music-controls .btn:active {
    transform: translateY(0) scale(0.95);
}

/* Volume Slider */
.volume-control {
    margin-top: 20px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.volume-slider {
    width: 100%;
    height: 8px;
    border-radius: 8px;
    background: linear-gradient(to right, 
        rgba(255, 255, 255, 0.2) 0%, 
        rgba(255, 255, 255, 0.1) 100%);
    outline: none;
    transition: all 0.3s ease;
    -webkit-appearance: none;
    appearance: none;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(145deg, #ffffff, #f0f0f0);
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.volume-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(145deg, #ffffff, #f0f0f0);
    cursor: pointer;
    border: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Configuration Cards */
.config-card {
    background: linear-gradient(145deg, 
        rgba(42, 45, 49, 0.9) 0%, 
        rgba(37, 37, 41, 0.95) 100%);
    border: 1px solid rgba(114, 137, 218, 0.2);
    border-radius: 16px;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.15),
        0 4px 16px rgba(0, 0, 0, 0.1);
}

.config-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(114, 137, 218, 0.5), 
        transparent);
}

.config-card:hover {
    transform: translateY(-5px);
    border-color: rgba(114, 137, 218, 0.4);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.2),
        0 10px 20px rgba(114, 137, 218, 0.1),
        0 0 0 1px rgba(114, 137, 218, 0.1);
}

.config-card .card-header {
    background: linear-gradient(135deg, 
        var(--bs-primary) 0%, 
        rgba(var(--bs-primary-rgb), 0.8) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px 24px;
    position: relative;
    overflow: hidden;
}

.config-card .card-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.1), 
        transparent);
    transition: left 0.6s ease;
}

.config-card:hover .card-header::before {
    left: 100%;
}

.config-card .card-header h5 {
    margin: 0;
    font-weight: 700;
    font-size: 1.2rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    letter-spacing: 0.3px;
}

.config-card .card-body {
    padding: 24px;
    background: rgba(255, 255, 255, 0.02);
}

/* Queue Display */
.queue-item {
    background: linear-gradient(145deg, 
        rgba(248, 249, 250, 0.05) 0%, 
        rgba(248, 249, 250, 0.02) 100%);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    border-left: 4px solid transparent;
    border-image: linear-gradient(45deg, #007bff, #0056b3) 1;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(5px);
}

.queue-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(45deg, #007bff, #0056b3);
}

.queue-item:hover {
    transform: translateX(8px);
    background: linear-gradient(145deg, 
        rgba(248, 249, 250, 0.08) 0%, 
        rgba(248, 249, 250, 0.04) 100%);
    box-shadow: 
        0 8px 16px rgba(0, 0, 0, 0.1),
        -4px 0 8px rgba(0, 123, 255, 0.2);
}

.queue-item:hover::before {
    background: linear-gradient(45deg, #0056b3, #007bff);
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
}

.queue-item .track-title {
    font-weight: 600;
    font-size: 1.1rem;
    color: #ffffff;
    margin-bottom: 4px;
    line-height: 1.3;
}

.queue-item .track-info {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    line-height: 1.4;
}

.queue-item .track-position {
    background: linear-gradient(135deg, #6c757d, #495057);
    color: white;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    min-width: 35px;
    text-align: center;
}

/* Form Controls Enhancement */
.config-card .form-control,
.config-card .form-select {
    background: rgba(64, 68, 75, 0.8);
    border: 2px solid rgba(114, 137, 218, 0.2);
    border-radius: 10px;
    color: #ffffff;
    padding: 12px 16px;
    font-size: 1rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.config-card .form-control:focus,
.config-card .form-select:focus {
    background: rgba(64, 68, 75, 0.9);
    border-color: rgba(114, 137, 218, 0.6);
    box-shadow: 
        0 0 0 3px rgba(114, 137, 218, 0.15),
        0 4px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.config-card .form-label {
    color: #ffffff;
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 1rem;
    letter-spacing: 0.3px;
}

.config-card .form-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    margin-top: 6px;
    line-height: 1.4;
}

/* Checkbox and Switch Styling */
.config-card .form-check-input {
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid rgba(114, 137, 218, 0.4);
    border-radius: 6px;
    background: rgba(64, 68, 75, 0.6);
    transition: all 0.3s ease;
}

.config-card .form-check-input:checked {
    background: linear-gradient(135deg, #43b581, #57F287);
    border-color: #43b581;
    box-shadow: 0 0 10px rgba(67, 181, 129, 0.4);
}

.config-card .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(114, 137, 218, 0.15);
}

.config-card .form-check-label {
    color: #ffffff;
    font-weight: 500;
    margin-left: 8px;
    cursor: pointer;
    transition: color 0.3s ease;
}

.config-card .form-check:hover .form-check-label {
    color: rgba(255, 255, 255, 0.9);
}

/* Range Slider Styling */
.config-card .form-range {
    height: 8px;
    border-radius: 8px;
    background: linear-gradient(to right, 
        rgba(114, 137, 218, 0.3) 0%, 
        rgba(114, 137, 218, 0.1) 100%);
    border: none;
    outline: none;
}

.config-card .form-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5865F2, #7289da);
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(88, 101, 242, 0.3);
    transition: all 0.3s ease;
}

.config-card .form-range::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 6px 12px rgba(88, 101, 242, 0.4);
}

/* Button Enhancements */
.config-card .btn {
    border-radius: 10px;
    padding: 12px 24px;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.config-card .btn-primary {
    background: linear-gradient(135deg, #5865F2, #7289da);
    border: none;
    box-shadow: 0 4px 12px rgba(88, 101, 242, 0.3);
}

.config-card .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(88, 101, 242, 0.4);
    background: linear-gradient(135deg, #7289da, #5865F2);
}

.config-card .btn-success {
    background: linear-gradient(135deg, #43b581, #57F287);
    border: none;
    box-shadow: 0 4px 12px rgba(67, 181, 129, 0.3);
}

.config-card .btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(67, 181, 129, 0.4);
}

/* Alert Enhancements */
.config-card .alert {
    border-radius: 12px;
    border: none;
    padding: 16px 20px;
    margin-bottom: 0;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(5px);
}

.config-card .alert-success {
    background: linear-gradient(135deg, 
        rgba(67, 181, 129, 0.2) 0%, 
        rgba(87, 242, 135, 0.1) 100%);
    color: #57F287;
    border-left: 4px solid #43b581;
}

.config-card .alert-warning {
    background: linear-gradient(135deg, 
        rgba(250, 166, 26, 0.2) 0%, 
        rgba(255, 213, 108, 0.1) 100%);
    color: #ffd56c;
    border-left: 4px solid #faa61a;
}

.config-card .alert-info {
    background: linear-gradient(135deg, 
        rgba(114, 137, 218, 0.2) 0%, 
        rgba(165, 197, 247, 0.1) 100%);
    color: #a5c5f7;
    border-left: 4px solid #7289da;
}

/* Add to Queue Form */
.add-to-queue-form {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid rgba(114, 137, 218, 0.1);
}

.add-to-queue-form .form-control {
    border-radius: 10px;
    border: 2px solid rgba(114, 137, 218, 0.2);
    background: rgba(64, 68, 75, 0.6);
    color: white;
    padding: 12px 16px;
    transition: all 0.3s ease;
}

.add-to-queue-form .form-control:focus {
    border-color: rgba(114, 137, 218, 0.6);
    box-shadow: 0 0 0 3px rgba(114, 137, 218, 0.15);
    background: rgba(64, 68, 75, 0.8);
}

.add-to-queue-form .form-control::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* Empty State Styling */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.6);
}

.empty-state i {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.4;
    display: block;
}

.empty-state p {
    font-size: 1.1rem;
    margin: 0;
    font-weight: 500;
}

/* Status Badge */
.status-badge {
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(5px);
}

.status-badge.bg-info {
    background: linear-gradient(135deg, #17a2b8, #138496);
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Responsive Improvements */
@media (max-width: 768px) {
    .music-player {
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .music-controls {
        justify-content: center;
        gap: 6px;
    }
    
    .music-controls .btn {
        padding: 10px 12px;
        font-size: 0.9rem;
    }
    
    .config-card .card-body {
        padding: 16px;
    }
    
    .queue-item {
        padding: 12px;
    }
}

@media (max-width: 576px) {
    .music-player h4 {
        font-size: 1.3rem;
        text-align: center;
    }
    
    .now-playing-info {
        padding: 16px;
        text-align: center;
    }
    
    .music-controls {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .config-card .form-control,
    .config-card .form-select {
        padding: 10px 14px;
        font-size: 0.95rem;
    }
}

/* Animation for loading states */
@keyframes pulse-glow {
    0%, 100% { 
        box-shadow: 0 0 5px rgba(114, 137, 218, 0.3);
    }
    50% { 
        box-shadow: 0 0 20px rgba(114, 137, 218, 0.6);
    }
}

.loading-state {
    animation: pulse-glow 2s infinite;
}

/* Scrollbar Styling */
.queue-list::-webkit-scrollbar {
    width: 8px;
}

.queue-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.queue-list::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, rgba(114, 137, 218, 0.6), rgba(88, 101, 242, 0.6));
    border-radius: 4px;
}

.queue-list::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, rgba(114, 137, 218, 0.8), rgba(88, 101, 242, 0.8));
}