/* BBind App Styles - ShadCN Dark Mode Design System */

/* Define CSS custom properties for consistent ShadCN theming */
:root {
    --background: 0 0% 3.9%;     /* ShadCN background */
    --foreground: 0 0% 98%;      /* ShadCN foreground */
    --card: 0 0% 3.9%;              /* ShadCN card — slightly lighter than background */
    --card-foreground: 0 0% 98%; /* ShadCN card-foreground */
    --primary: 0 0% 98%;         /* ShadCN primary (white) */
    --primary-foreground: 0 0% 9%; /* ShadCN primary-foreground (black) */
    --secondary: 0 0% 14.9%;     /* ShadCN secondary */
    --secondary-foreground: 0 0% 98%; /* ShadCN secondary-foreground */
    --muted: 0 0% 14.9%;         /* ShadCN muted */
    --muted-foreground: 0 0% 63.9%; /* ShadCN muted-foreground */
    --accent: 0 0% 14.9%;        /* ShadCN accent */
    --accent-foreground: 0 0% 98%; /* ShadCN accent-foreground */
    --border: 0 0% 14.9%;        /* ShadCN border */
    --input: 0 0% 14.9%;         /* ShadCN input */
    --ring: 0 0% 83.1%;          /* ShadCN ring */
    --radius: 0.5rem;
    
    /* BBind accent colors (pour les touches de couleur) */
    --blue-light: 199 100% 50%;  /* #00aeff */
    --blue-dark: 188 100% 39.6%; /* #00c6c8 */
}

/* Base Styles */
body {
    background: hsl(var(--background));
    overflow-x: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ShadCN-inspired Navbar Styles */
.navbar {
    background: hsl(var(--background) / 0.95);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid hsl(var(--border));
}

.app-navbar,
nav.app-navbar {
    background: #121212 !important;
    backdrop-filter: blur(8px) !important;
    border-bottom: 1px solid hsl(var(--border)) !important;
}

/* ShadCN-inspired Sidebar Styles */
aside#sidebar {
    background: hsl(var(--card) / 0.95) !important;
    backdrop-filter: blur(8px) !important;
    border-right: 1px solid hsl(var(--border)) !important;
}

/* Navigation items in sidebar */
.sidebar-nav-item {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius);
    color: hsl(var(--muted-foreground));
    transition: all 0.2s ease;
}

.sidebar-nav-item:hover {
    background: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
    border-color: hsl(var(--border));
}

.sidebar-nav-item.active {
    background: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
    border-color: hsl(var(--border));
}

/* Search input in navbar */
#global-search,
input[type="text"], 
input[type="search"] {
    background: #121212 !important;
    border: 1px solid hsl(var(--border)) !important;
    border-radius: var(--radius) !important;
    color: hsl(var(--foreground)) !important;
    transition: all 0.2s ease !important;
}

input[type="text"]:focus,
input[type="search"]:focus {
    outline: none !important;
    border-color: hsl(var(--ring)) !important;
    box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2) !important;
}

input[type="text"]::placeholder,
input[type="search"]::placeholder {
    color: hsl(var(--muted-foreground)) !important;
}

/* Buttons in navbar */
.navbar-button {
    background: hsl(var(--secondary));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    color: hsl(var(--secondary-foreground));
    transition: all 0.2s ease;
}

.navbar-button:hover {
    background: hsl(var(--accent));
    border-color: hsl(var(--ring));
    color: hsl(var(--accent-foreground));
}

/* Dropdown menus */
.dropdown-menu {
    background: hsl(var(--popover)) !important;
    border: 1px solid hsl(var(--border)) !important;
    border-radius: calc(var(--radius) + 2px) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}

.dropdown-item {
    color: hsl(var(--popover-foreground));
    border-radius: calc(var(--radius) / 2);
    transition: all 0.2s ease;
}

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

/* Notification badges */
.notification-badge {
    background: hsl(var(--destructive));
    color: hsl(var(--destructive-foreground));
    border-radius: 50%;
}

/* Profile avatar */
.profile-avatar {
    background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary)));
    border: 1px solid hsl(var(--border));
}

/* Glass card modern effect */
.glass-card {
    background: hsl(var(--card) / 0.95) !important;
    border: 1px solid hsl(var(--border)) !important;
    border-radius: calc(var(--radius) + 2px) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2) !important;
    backdrop-filter: blur(8px) !important;
    transition: all 0.2s ease !important;
}

.glass-card:hover {
    border-color: hsl(var(--border) / 0.8) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2) !important;
}

/* Modern Glass Effects for landing page */
.glass-effect {
    backdrop-filter: blur(8px);
    background: hsl(var(--card) / 0.95);
    border: 1px solid hsl(var(--border));
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

/* Unified gradient text - ShadCN inspired */
.gradient-text {
    background: linear-gradient(135deg, hsl(var(--foreground)) 0%, hsl(var(--muted-foreground)) 50%, hsl(var(--secondary-foreground)) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 200%;
    animation: gradientShift 6s ease-in-out infinite;
}

/* Unified button styles - inherit from home.css approach */
.btn-glass {
    backdrop-filter: blur(8px);
    background: hsl(var(--secondary));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    color: hsl(var(--secondary-foreground));
    transition: all 0.2s ease;
}

.btn-glass:hover {
    background: hsl(var(--accent));
    border-color: hsl(var(--ring));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.btn-primary {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    transition: all 0.2s ease;
}

.btn-primary:hover {
    background: hsl(var(--primary) / 0.9);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Unified card hover effects */
.card-hover {
    transition: all 0.2s ease;
    backdrop-filter: blur(8px);
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: calc(var(--radius) + 2px);
    transform: translateY(20px);
    opacity: 0;
}

.card-hover.reveal {
    transform: translateY(0);
    opacity: 1;
}

.card-hover:hover {
    transform: translateY(-2px);
    background: hsl(var(--card) / 0.8);
    border-color: hsl(var(--border) / 0.8);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* Section backgrounds */
.section-dark {
    background: hsl(var(--background) / 0.8);
    backdrop-filter: blur(8px);
}

/* Unified glow effects */
.blue-glow {
    box-shadow: 0 0 20px hsl(var(--ring) / 0.3);
    border: 1px solid hsl(var(--ring) / 0.5);
}

/* Text effects */
.text-glow {
    text-shadow: 0 0 10px hsl(var(--ring) / 0.3);
}

/* Hero Section - Toned down for dark mode */
.hero-bg {
    background: radial-gradient(ellipse at center top, hsl(var(--secondary) / 0.3) 0%, hsl(var(--background)) 70%);
    position: relative;
    overflow: hidden;
    min-height: 100vh;
}

/* Minimalistic animated background */
.animated-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 80% 20%, hsl(var(--muted) / 0.3) 0%, transparent 40%),
        radial-gradient(circle at 20% 80%, hsl(var(--accent) / 0.2) 0%, transparent 40%);
    animation: subtleDrift 12s ease-in-out infinite;
}

/* Minimalistic Floating Elements */
.floating-orbs {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.orb {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, hsl(var(--muted) / 0.2) 0%, transparent 70%);
    animation: subtleFloat 8s ease-in-out infinite;
}

.orb-1 {
    width: 200px;
    height: 200px;
    top: 20%;
    right: 20%;
    animation-delay: 0s;
}

.orb-2 {
    width: 150px;
    height: 150px;
    bottom: 30%;
    left: 20%;
    animation-delay: 3s;
    background: radial-gradient(circle, hsl(var(--accent) / 0.15) 0%, transparent 70%);
}

/* Simple dots for subtle decoration */
.dot {
    position: absolute;
    background: hsl(var(--muted-foreground) / 0.4);
    border-radius: 50%;
    animation: pulse 3s ease-in-out infinite;
}

.dot-1 { 
    width: 4px; 
    height: 4px; 
    top: 25%; 
    left: 75%; 
    animation-delay: 0s; 
}

.dot-2 { 
    width: 3px; 
    height: 3px; 
    top: 60%; 
    left: 15%; 
    animation-delay: 1.5s; 
}

.dot-3 { 
    width: 2px; 
    height: 2px; 
    top: 40%; 
    left: 85%; 
    animation-delay: 3s; 
}

/* Scrollbar improvements */
.scrollbar-thin::-webkit-scrollbar {
    width: 4px;
}

.scrollbar-thin::-webkit-scrollbar-track {
    background: hsl(var(--muted));
    border-radius: calc(var(--radius) / 2);
}

.scrollbar-thumb-gray-700::-webkit-scrollbar-thumb {
    background: hsl(var(--muted-foreground) / 0.3);
    border-radius: calc(var(--radius) / 2);
}

.scrollbar-thumb-gray-700::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--muted-foreground) / 0.5);
}

/* Override Tailwind classes for consistency */
.bg-black\/80 {
    background: hsl(var(--card) / 0.95) !important;
}

.bg-black\/90 {
    background: hsl(var(--background) / 0.95) !important;
}

.bg-black\/50 {
    background: hsl(var(--secondary) / 0.8) !important;
}

.border-gray-800 {
    border-color: hsl(var(--border)) !important;
}

.border-gray-700 {
    border-color: hsl(var(--border)) !important;
}

.text-gray-400 {
    color: hsl(var(--muted-foreground)) !important;
}

.text-gray-300 {
    color: hsl(var(--foreground) / 0.9) !important;
}

#sidebar a:hover,
#sidebar button:hover,
#sidebar .bg-gray-800,
#sidebar .hover\:bg-gray-800:hover {
    background-color: #121212 !important;
}

.hover\:text-white:hover {
    color: hsl(var(--foreground)) !important;
}

.hover\:bg-gray-800:hover {
    background: hsl(var(--accent)) !important;
}

.hover\:border-blue-light:hover {
    border-color: hsl(var(--ring)) !important;
}

/* Logo gradient update */
.from-blue-light.to-blue-dark {
    background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--secondary))) !important;
}

/* AI assistant button */
.from-purple-ai.to-blue-light {
    background: linear-gradient(135deg, hsl(var(--accent)), hsl(var(--primary))) !important;
}

/* Notification center modal */
#notification-center {
    background: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(4px) !important;
}

/* Progressive reveal animations */
.reveal-element {
    transform: translateY(30px);
    opacity: 0;
    transition: all 0.8s ease;
}

.reveal-element.revealed {
    transform: translateY(0);
    opacity: 1;
}

/* Immediate animations for hero elements */
.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out;
}

.reveal-delay-1 { transition-delay: 0.2s; }
.reveal-delay-2 { transition-delay: 0.4s; }
.reveal-delay-3 { transition-delay: 0.6s; }
.reveal-delay-4 { transition-delay: 0.8s; }

/* Skills specific enhancements */
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Skills grid responsiveness */
@media (max-width: 768px) {
    .glass-card {
        padding: 1rem !important;
    }
}

/* Keyframe Animations - ShadCN inspired subtle animations */
@keyframes fadeInUp {
    0% { 
        opacity: 0; 
        transform: translateY(20px); 
    }
    100% { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

@keyframes fadeInLeft {
    0% { 
        opacity: 0; 
        transform: translateX(-20px); 
    }
    100% { 
        opacity: 1; 
        transform: translateX(0); 
    }
}

@keyframes fadeInRight {
    0% { 
        opacity: 0; 
        transform: translateX(20px); 
    }
    100% { 
        opacity: 1; 
        transform: translateX(0); 
    }
}

@keyframes subtleFloat {
    0%, 100% { 
        transform: translateY(0px); 
    }
    50% { 
        transform: translateY(-8px); 
    }
}

@keyframes glow {
    0% { 
        box-shadow: 0 0 8px hsl(var(--ring) / 0.2); 
    }
    100% { 
        box-shadow: 0 0 16px hsl(var(--ring) / 0.4); 
    }
}

@keyframes subtleDrift {
    0%, 100% { 
        transform: translateX(0) translateY(0); 
    }
    25% { 
        transform: translateX(8px) translateY(-4px); 
    }
    50% { 
        transform: translateX(-4px) translateY(-8px); 
    }
    75% { 
        transform: translateX(-8px) translateY(-4px); 
    }
}

@keyframes pulse {
    0%, 100% { 
        opacity: 0.3; 
        transform: scale(1); 
    }
    50% { 
        opacity: 0.6; 
        transform: scale(1.05); 
    }
}

@keyframes gradientShift {
    0%, 100% { 
        background-position: 0% 50%; 
    }
    50% { 
        background-position: 100% 50%; 
    }
}

/* ===== Chat AI Message Styling ===== */
/* Consistent markdown rendering for streaming and loaded messages */
.chat-ai-content {
    font-size: 0.8125rem;
    line-height: 1.6;
    color: hsl(var(--foreground));
}

.chat-ai-content h1,
.chat-ai-content h2,
.chat-ai-content h3 {
    font-weight: 600;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    color: hsl(var(--foreground));
}

.chat-ai-content h1 { font-size: 1.125rem; }
.chat-ai-content h2 { font-size: 1rem; }
.chat-ai-content h3 { font-size: 0.875rem; }

.chat-ai-content p {
    margin-bottom: 0.75rem;
}

.chat-ai-content ul,
.chat-ai-content ol {
    margin-left: 1.25rem;
    margin-bottom: 0.75rem;
}

.chat-ai-content li {
    margin-bottom: 0.25rem;
}

.chat-ai-content strong {
    font-weight: 600;
    color: hsl(var(--foreground));
}

.chat-ai-content em {
    font-style: italic;
}

.chat-ai-content code {
    background: hsl(var(--muted));
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-family: 'Fira Code', 'Consolas', monospace;
}

.chat-ai-content pre {
    background: hsl(var(--muted));
    padding: 0.75rem;
    border-radius: 0.375rem;
    overflow-x: auto;
    margin-bottom: 0.75rem;
}

.chat-ai-content pre code {
    background: transparent;
    padding: 0;
}

.chat-ai-content a {
    color: hsl(199, 100%, 50%);
    text-decoration: underline;
}

.chat-ai-content a:hover {
    color: hsl(199, 100%, 60%);
}