* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    background-color: var(--color-background);
    color: var(--color-text);
    line-height: 1.6;
    overflow-x: hidden;
}

.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

/* Complex Line Background */
.geometric-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    opacity: 0.06;
    overflow: hidden;
}

.geometric-shape {
    position: absolute;
}

/* Diagonal Grid Lines */
.shape-1 {
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(45deg, transparent 49%, rgba(0,0,0,0.3) 49.5%, rgba(0,0,0,0.3) 50.5%, transparent 51%),
        linear-gradient(-45deg, transparent 49%, rgba(0,0,0,0.2) 49.5%, rgba(0,0,0,0.2) 50.5%, transparent 51%);
    background-size: 120px 120px, 80px 80px;
    animation: gridShift 30s linear infinite;
}

/* Connecting Lines Network */
.shape-2 {
    width: 300px;
    height: 200px;
    top: 15%;
    right: 10%;
    background-image:
        linear-gradient(30deg, transparent 49%, rgba(0,0,0,0.4) 49.5%, rgba(0,0,0,0.4) 50.5%, transparent 51%),
        linear-gradient(150deg, transparent 49%, rgba(0,0,0,0.3) 49.5%, rgba(0,0,0,0.3) 50.5%, transparent 51%),
        linear-gradient(90deg, transparent 49%, rgba(0,0,0,0.2) 49.5%, rgba(0,0,0,0.2) 50.5%, transparent 51%);
    background-size: 60px 60px, 40px 40px, 80px 80px;
    transform: rotate(15deg);
    animation: networkPulse 20s ease-in-out infinite;
}

/* Vertical Line Array */
.shape-3 {
    width: 200px;
    height: 300px;
    top: 50%;
    left: 5%;
    background-image: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 8px,
        rgba(0,0,0,0.3) 8px,
        rgba(0,0,0,0.3) 9px,
        transparent 9px,
        transparent 20px,
        rgba(0,0,0,0.2) 20px,
        rgba(0,0,0,0.2) 21px
    );
    transform: rotate(-10deg);
    animation: verticalShift 25s ease-in-out infinite;
}

/* Radial Line Pattern */
.shape-4 {
    width: 250px;
    height: 250px;
    top: 60%;
    right: 15%;
    background-image:
        conic-gradient(from 0deg, 
            transparent 0deg, rgba(0,0,0,0.3) 2deg, transparent 4deg,
            transparent 30deg, rgba(0,0,0,0.2) 32deg, transparent 34deg,
            transparent 60deg, rgba(0,0,0,0.3) 62deg, transparent 64deg,
            transparent 90deg, rgba(0,0,0,0.2) 92deg, transparent 94deg,
            transparent 120deg, rgba(0,0,0,0.3) 122deg, transparent 124deg,
            transparent 150deg, rgba(0,0,0,0.2) 152deg, transparent 154deg,
            transparent 180deg, rgba(0,0,0,0.3) 182deg, transparent 184deg,
            transparent 210deg, rgba(0,0,0,0.2) 212deg, transparent 214deg,
            transparent 240deg, rgba(0,0,0,0.3) 242deg, transparent 244deg,
            transparent 270deg, rgba(0,0,0,0.2) 272deg, transparent 274deg,
            transparent 300deg, rgba(0,0,0,0.3) 302deg, transparent 304deg,
            transparent 330deg, rgba(0,0,0,0.2) 332deg, transparent 334deg
        );
    border-radius: 50%;
    animation: radialSpin 40s linear infinite;
}

/* Intersecting Lines */
.shape-5 {
    width: 400px;
    height: 300px;
    top: 25%;
    left: 40%;
    background-image:
        linear-gradient(22deg, transparent 49%, rgba(0,0,0,0.25) 49.5%, rgba(0,0,0,0.25) 50.5%, transparent 51%),
        linear-gradient(68deg, transparent 49%, rgba(0,0,0,0.2) 49.5%, rgba(0,0,0,0.2) 50.5%, transparent 51%),
        linear-gradient(112deg, transparent 49%, rgba(0,0,0,0.25) 49.5%, rgba(0,0,0,0.25) 50.5%, transparent 51%),
        linear-gradient(158deg, transparent 49%, rgba(0,0,0,0.2) 49.5%, rgba(0,0,0,0.2) 50.5%, transparent 51%);
    background-size: 100px 100px, 150px 150px, 120px 120px, 80px 80px;
    animation: intersectFloat 18s ease-in-out infinite;
}

@keyframes gridShift {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-20px, -20px); }
}

@keyframes networkPulse {
    0%, 100% { opacity: 0.06; transform: rotate(15deg) scale(1); }
    50% { opacity: 0.1; transform: rotate(15deg) scale(1.05); }
}

@keyframes verticalShift {
    0%, 100% { transform: rotate(-10deg) translateX(0); }
    50% { transform: rotate(-10deg) translateX(10px); }
}

@keyframes radialSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes intersectFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    33% { transform: translateY(-8px) rotate(1deg); }
    66% { transform: translateY(5px) rotate(-1deg); }
}

/* Navigation */
nav {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    z-index: var(--z-nav);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-border-light);
    transition: all var(--transition-base);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

.logo {
    font-size: var(--font-size-xl);
    font-weight: 800;
    letter-spacing: -0.02em;
    position: relative;
}

.logo::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--color-primary);
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
}

.nav-links {
    display: flex;
    list-style: none;
    gap: var(--space-lg);
}

.nav-links a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
    transition: all var(--transition-base);
    letter-spacing: 0.02em;
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background: var(--color-primary);
    transition: width var(--transition-base);
}

.nav-links a:hover::after {
    width: 100%;
}

/* Hero Section */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    background: var(--color-background);
}

.hero::before {
    content: '';
    position: absolute;
    top: 20%;
    right: 10%;
    width: 200px;
    height: 200px;
    background-image:
        linear-gradient(0deg, transparent 49%, rgba(0,0,0,0.15) 49.5%, rgba(0,0,0,0.15) 50.5%, transparent 51%),
        linear-gradient(45deg, transparent 49%, rgba(0,0,0,0.1) 49.5%, rgba(0,0,0,0.1) 50.5%, transparent 51%),
        linear-gradient(90deg, transparent 49%, rgba(0,0,0,0.15) 49.5%, rgba(0,0,0,0.15) 50.5%, transparent 51%),
        linear-gradient(135deg, transparent 49%, rgba(0,0,0,0.1) 49.5%, rgba(0,0,0,0.1) 50.5%, transparent 51%);
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    animation: heroGrid 12s ease-in-out infinite;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: 15%;
    left: 10%;
    width: 150px;
    height: 150px;
    background-image:
        repeating-linear-gradient(
            30deg,
            transparent,
            transparent 8px,
            rgba(0,0,0,0.1) 8px,
            rgba(0,0,0,0.1) 10px
        );
    transform: rotate(-15deg);
    animation: heroLines 15s linear infinite;
}

@keyframes heroGrid {
    0%, 100% { transform: rotate(0deg) scale(1); opacity: 0.8; }
    50% { transform: rotate(5deg) scale(1.1); opacity: 1; }
}

@keyframes heroLines {
    0% { transform: rotate(-15deg); }
    100% { transform: rotate(345deg); }
}

.hero-content h1 {
    font-size: var(--font-size-hero);
    font-weight: 900;
    margin-bottom: var(--space-sm);
    letter-spacing: -0.03em;
    animation: fadeInUp 1s ease-out;
    position: relative;
}

.hero-content h1::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: var(--color-primary);
    top: 0;
    right: -30px;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.hero-content p {
    font-size: var(--font-size-xl);
    color: var(--color-text-muted);
    margin-bottom: var(--space-lg);
    font-weight: 400;
    letter-spacing: 0.02em;
    animation: fadeInUp 1s ease-out 0.2s both;
}

/* Legacy CTA button - now handled by component classes */
.cta-button {
    animation: fadeInUp 1s ease-out 0.4s both;
}

/* Legacy section styles - keeping for compatibility */
.section-title {
    font-size: var(--font-size-4xl);
    font-weight: 800;
    text-align: center;
    margin-bottom: var(--space-2xl);
    letter-spacing: -0.02em;
    position: relative;
}

.section-title::before {
    content: '';
    position: absolute;
    width: 50px;
    height: 3px;
    background: var(--color-primary);
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
}

/* About Section */
.about {
    background: var(--color-background-alt);
    position: relative;
}

.about::before {
    content: '';
    position: absolute;
    top: 10%;
    right: 5%;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 2px solid #000000;
    opacity: 0.1;
}

.about-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.about-content p {
    font-size: var(--font-size-lg);
    color: #555555;
    margin-bottom: var(--space-lg);
    font-weight: 400;
}

/* Legacy skill styles - now handled by component classes */

/* Projects Section */
.projects {
    background: var(--color-background);
    position: relative;
}

.projects::after {
    content: '';
    position: absolute;
    bottom: 10%;
    left: 8%;
    width: 100px;
    height: 3px;
    background: #000000;
    opacity: 0.1;
    transform: rotate(-45deg);
}

/* Legacy project styles - now handled by component classes */

.project-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: var(--space-sm);
    letter-spacing: -0.01em;
}

.project-description {
    color: var(--color-text-muted);
    margin-bottom: var(--space-md);
    font-weight: 400;
    line-height: 1.7;
}

/* Legacy project link styles - now handled by component classes */

/* Article Section */
.article {
    background: var(--color-background);
    position: relative;
}

.article::before {
    content: '';
    position: absolute;
    top: 15%;
    right: 8%;
    width: 120px;
    height: 120px;
    background-image:
        linear-gradient(45deg, transparent 49%, rgba(0,0,0,0.1) 49.5%, rgba(0,0,0,0.1) 50.5%, transparent 51%),
        linear-gradient(-45deg, transparent 49%, rgba(0,0,0,0.08) 49.5%, rgba(0,0,0,0.08) 50.5%, transparent 51%);
    background-size: 20px 20px, 30px 30px;
    animation: articlePattern 20s ease-in-out infinite;
}

@keyframes articlePattern {
    0%, 100% { transform: rotate(0deg) scale(1); opacity: 0.8; }
    50% { transform: rotate(10deg) scale(1.1); opacity: 1; }
}

.article-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.article-excerpt {
    color: var(--color-text-muted);
    font-size: var(--font-size-lg);
    line-height: 1.7;
    margin-bottom: var(--space-lg);
}

/* Contact Section */
.contact {
    background: var(--color-background-alt);
    text-align: center;
    position: relative;
}

.contact::before {
    content: '';
    position: absolute;
    top: 15%;
    left: 10%;
    width: 80px;
    height: 80px;
    background: #000000;
    opacity: 0.1;
    transform: rotate(45deg);
}

.contact-content {
    max-width: 600px;
    margin: 0 auto;
}

.contact-content p {
    font-size: var(--font-size-lg);
    color: #555555;
    margin-bottom: var(--space-2xl);
}

.contact-info {
    margin: 2rem 0;
}

.contact-item {
    margin: var(--space-md) 0;
    font-size: var(--font-size-lg);
    color: var(--color-primary);
    font-weight: 500;
}

.contact-item a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    transition: all var(--transition-base);
    position: relative;
}

.contact-item a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background: var(--color-primary);
    transition: width var(--transition-base);
}

.contact-item a:hover::after {
    width: 100%;
}

/* Footer */
.footer {
    background: var(--color-background);
    padding: var(--space-lg) 0;
    text-align: center;
    border-top: 2px solid var(--color-border-light);
}

.footer p {
    color: var(--color-text-light);
    font-size: 0.9rem;
    font-weight: 500;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile Navigation */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: 0.5rem;
    gap: 4px;
}

.mobile-menu-toggle span {
    width: 25px;
    height: 3px;
    background: var(--color-primary);
    transition: all 0.3s ease;
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

.nav-links.mobile-open {
    display: flex;
    position: fixed;
    top: 70px;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    flex-direction: column;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    z-index: 999;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .container, .nav-container, .section__content {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }
    
    .hero-content h1 {
        font-size: clamp(2.5rem, 6vw, 4rem);
    }
    
    .section__title {
        font-size: clamp(2rem, 5vw, 3rem);
    }
}

@media (max-width: 768px) {
    .nav-links {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: flex;
    }

    .hero {
        padding: 0 1rem;
        text-align: center;
    }

    .hero-content h1 {
        font-size: clamp(2rem, 8vw, 3rem);
        line-height: 1.1;
    }

    .hero-content h1::after {
        display: none;
    }

    .hero-content p {
        font-size: clamp(1rem, 4vw, 1.2rem);
        margin-bottom: 2rem;
    }

    .section {
        padding: 3rem 0;
    }

    .section__title {
        font-size: clamp(1.8rem, 6vw, 2.5rem);
        margin-bottom: 2rem;
    }

    .grid--auto-fit {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .card {
        padding: 1.5rem;
    }

    .skills {
        gap: 0.5rem;
    }

    .tag--skill {
        padding: 0.5rem 1rem;
        font-size: 0.75rem;
    }

    .geometric-shape {
        display: none;
    }
    
    .hero::before,
    .hero::after,
    .about::before,
    .projects::after,
    .article::before,
    .contact::before {
        display: none;
    }
}

@media (max-width: 480px) {
    .container, .nav-container, .section__content {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .hero-content h1 {
        font-size: 2rem;
        margin-bottom: 1rem;
    }
    
    .hero-content p {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
    }
    
    .section {
        padding: 2rem 0;
    }
    
    .section__title {
        font-size: 1.8rem;
        margin-bottom: 1.5rem;
    }
    
    .card {
        padding: 1rem;
    }
    
    .project-title {
        font-size: 1.2rem;
    }
    
    .project-description {
        font-size: 0.9rem;
        line-height: 1.5;
    }
    
    .skills {
        gap: 0.3rem;
    }
    
    .tag--skill {
        padding: 0.4rem 0.8rem;
        font-size: 0.7rem;
    }
    
    .contact-item {
        font-size: 1rem;
        word-break: break-word;
    }
    
    .footer {
        padding: 1.5rem 0;
    }
    
    .footer p {
        font-size: 0.8rem;
    }
}

/* Scroll animations and vanishing effects */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Section transition effects */
.section {
    position: relative;
    opacity: 1;
    transform: translateY(0);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.section.vanishing {
    opacity: 0.3;
    transform: translateY(-30px) scale(0.99);
}

.section.appearing {
    opacity: 0;
    transform: translateY(50px) scale(1.02);
}

.section.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Gradient overlay for smooth transitions */
.section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,0.1) 50%, transparent 100%);
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
    z-index: 2;
}

.section.transitioning::before {
    opacity: 1;
}

/* Hero section specific transitions */
.hero {
    transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero.vanishing {
    opacity: 0;
    transform: translateY(-100px) scale(0.95);
    filter: blur(2px);
}

/* About section specific transitions */
.about {
    background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.about.appearing {
    background: linear-gradient(135deg, rgba(250,250,250,0) 0%, rgba(255,255,255,0.5) 100%);
}

/* Projects section gradient reveal */
.projects {
    background: linear-gradient(135deg, #ffffff 0%, #f8f8f8 100%);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.projects.appearing {
    background: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(248,248,248,0.5) 100%);
}

/* Contact section gradient reveal */
.contact {
    background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.contact.appearing {
    background: linear-gradient(135deg, rgba(250,250,250,0) 0%, rgba(245,245,245,0.5) 100%);
}

/* Smooth reveal animation for content within sections */
.section-content {
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.section.appearing .section-content {
    opacity: 0;
    transform: translateY(30px);
}

.section.visible .section-content {
    opacity: 1;
    transform: translateY(0);
}

/* Interactive Project Overlay */
.project-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-background);
    z-index: var(--z-overlay);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-slow) var(--transition-smooth);
    transform: scale(0.8);
}

.project-overlay.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.project-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    position: relative;
}

.close-btn {
    position: absolute;
    top: 2rem;
    left: 2rem;
    font-size: 2rem;
    font-weight: bold;
    cursor: pointer;
    color: #666;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 10001;
}

.project-container:hover .close-btn {
    opacity: 1;
}

.close-btn:hover {
    color: #000;
    transform: scale(1.1);
}

.search-interface {
    text-align: center;
    max-width: 600px;
    width: 100%;
    transition: all 0.5s ease;
}

.search-interface h2 {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    margin-bottom: var(--space-lg);
    letter-spacing: -0.02em;
}

.search-box {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    align-items: center;
}

#prompt-input {
    flex: 1;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-lg);
    border: 2px solid var(--color-border);
    background: var(--color-background);
    font-family: var(--font-family);
    transition: all var(--transition-base);
}

#prompt-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.1);
}

#submit-btn {
    padding: var(--space-sm) var(--space-md);
    background: var(--color-primary);
    color: var(--color-secondary);
    border: none;
    font-size: var(--font-size-lg);
    cursor: pointer;
    transition: all var(--transition-base);
    font-family: var(--font-family);
    font-weight: 600;
}

#submit-btn:hover {
    background: #333333;
    transform: translateY(-2px);
}

#submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.response-area {
    width: 100%;
    max-width: 800px;
    min-height: 200px;
    padding: var(--space-lg);
    background: var(--color-background-alt);
    border: 2px solid var(--color-border);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.6;
    opacity: 0;
    transform: translateY(20px);
    transition: all var(--transition-slow);
    white-space: pre-wrap;
    overflow-y: auto;
    max-height: 60vh;
}

.response-area.visible {
    opacity: 1;
    transform: translateY(0);
}

.response-area.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    border: none;
    padding: 3rem;
    background: #ffffff;
    z-index: 10002;
    font-size: 1.2rem;
}

.back-btn {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    padding: 0.8rem var(--space-md);
    background: var(--color-primary);
    color: var(--color-secondary);
    border: none;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    z-index: 1000;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
}

.back-btn:hover {
    background: #333333;
    transform: translateY(-2px);
}

.response-text {
    margin-top: 4rem;
    width: 100%;
    height: calc(100% - 4rem);
    overflow-y: auto;
}

.interactive-demo {
    cursor: pointer;
}

.typing-cursor::after {
    content: '|';
    animation: blink 1s infinite;
}

.response-area:not(.fullscreen) .back-btn {
    position: relative;
    top: auto;
    left: auto;
    margin-bottom: 1rem;
    display: block;
    box-shadow: none;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* Full-screen Loading Overlay */
#cryptid-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.9);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease-in;
}

/* Loading Animation */
.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    color: white;
}

.loading-text {
    font-size: var(--font-size-xl);
    color: rgba(255, 255, 255, 0.9);
    font-style: italic;
    letter-spacing: 0.5px;
    animation: fadeInOut 2s ease-in-out infinite;
    text-align: center;
}

.loading-dots {
    display: flex;
    gap: 8px;
}

.loading-dots span {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    animation: dotPulse 1.4s ease-in-out infinite;
}

.loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes fadeInOut {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes dotPulse {
    0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    40% {
        transform: scale(1.2);
        opacity: 1;
    }
}

/* Document Q&A Specific Styles */
.upload-interface, .qa-interface {
    text-align: center;
    max-width: 600px;
    width: 100%;
    transition: all 0.5s ease;
}

.upload-interface h2, .qa-interface h2 {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    margin-bottom: var(--space-lg);
    letter-spacing: -0.02em;
}

.upload-box {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    align-items: center;
}

#pdf-upload {
    padding: var(--space-sm);
    border: 2px solid var(--color-border);
    background: var(--color-background);
    font-family: var(--font-family);
    width: 100%;
    max-width: 400px;
}

#upload-btn, #ask-btn {
    padding: var(--space-sm) var(--space-md);
    background: var(--color-primary);
    color: var(--color-secondary);
    border: none;
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: all var(--transition-base);
    font-family: var(--font-family);
    font-weight: 600;
}

#upload-btn:hover, #ask-btn:hover {
    background: #333333;
    transform: translateY(-2px);
}

#question-input {
    flex: 1;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-lg);
    border: 2px solid var(--color-border);
    background: var(--color-background);
    font-family: var(--font-family);
    transition: all var(--transition-base);
}

#question-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.1);
}

#qa-response-area {
    width: 100%;
    max-width: 800px;
    min-height: 300px;
    max-height: 60vh;
    padding: var(--space-lg);
    background: var(--color-background-alt);
    border: 2px solid var(--color-border);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.6;
    overflow-y: auto;
    margin-top: var(--space-lg);
}

.message {
    margin-bottom: var(--space-md);
    padding: var(--space-sm);
    border-radius: 8px;
}

.user-message {
    background: #e3f2fd;
    text-align: right;
    margin-left: 20%;
}

.assistant-message {
    background: #f5f5f5;
    text-align: left;
    margin-right: 20%;
}

.message-content {
    word-wrap: break-word;
}

/* Mobile Overlay Improvements */
@media (max-width: 1024px) {
    .project-container {
        padding: 1.5rem;
    }
    
    .close-btn {
        top: 1rem;
        left: 1rem;
        font-size: 1.8rem;
        opacity: 1;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .search-interface h2, .upload-interface h2, .qa-interface h2, .chatbot-interface h2 {
        font-size: clamp(1.5rem, 5vw, 2rem);
        margin-bottom: 1.5rem;
    }
    
    .search-box, .upload-box, .chat-input-box {
        flex-direction: column;
        gap: 1rem;
    }
    
    #prompt-input, #submit-btn, #question-input, #ask-btn, #message-input, #send-btn, #doc-message-input, #doc-send-btn {
        width: 100%;
        padding: 1rem;
        font-size: 1rem;
        min-height: 44px;
    }
    
    .response-area, #qa-response-area, .chat-area, #doc-chat-area {
        min-height: 250px;
        max-height: 50vh;
        padding: 1rem;
        font-size: 0.9rem;
    }
    
    .response-area.fullscreen {
        padding: 1.5rem 1rem;
        font-size: 1rem;
    }
    
    .user-message, .assistant-message, .chat-message {
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
        padding: 0.75rem;
        font-size: 0.9rem;
    }
    
    .project-container {
        padding: 1rem;
        height: 100vh;
        overflow-y: auto;
    }
    
    .close-btn {
        position: fixed;
        top: 1rem;
        right: 1rem;
        left: auto;
        background: rgba(0,0,0,0.8);
        color: white;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10001;
    }
    
    .chatbot-interface, .doc-chat-interface {
        height: calc(100vh - 2rem);
    }
}

@media (max-width: 480px) {
    .search-interface h2, .upload-interface h2, .qa-interface h2, .chatbot-interface h2 {
        font-size: 1.3rem;
        margin-bottom: 1rem;
    }
    
    .project-container {
        padding: 0.5rem;
    }
    
    .response-area, #qa-response-area, .chat-area, #doc-chat-area {
        min-height: 200px;
        max-height: 40vh;
        padding: 0.75rem;
        font-size: 0.85rem;
    }
    
    .close-btn {
        width: 35px;
        height: 35px;
        font-size: 1.2rem;
    }
}

/* Chatbot Specific Styles */
.chatbot-interface {
    display: flex;
    flex-direction: column;
    height: 80vh;
    max-width: 800px;
    width: 100%;
}

.chatbot-interface h2 {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    margin-bottom: var(--space-lg);
    text-align: center;
}

.chat-area {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-lg);
    background: var(--color-background-alt);
    border: 2px solid var(--color-border);
    margin-bottom: var(--space-md);
}

.chat-input-box {
    display: flex;
    gap: var(--space-sm);
}

#message-input {
    flex: 1;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-lg);
    border: 2px solid var(--color-border);
    background: var(--color-background);
    font-family: var(--font-family);
}

#message-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

#send-btn {
    padding: var(--space-sm) var(--space-md);
    background: var(--color-primary);
    color: var(--color-secondary);
    border: none;
    font-size: var(--font-size-lg);
    cursor: pointer;
    font-family: var(--font-family);
    font-weight: 600;
}

#send-btn:hover {
    background: #333333;
}

.chat-message {
    margin-bottom: var(--space-md);
    padding: var(--space-sm);
    border-radius: 8px;
    max-width: 80%;
}

.user-message {
    background: #007bff;
    color: white;
    margin-left: auto;
    text-align: right;
}

.bot-message {
    background: #f1f1f1;
    color: #333;
    margin-right: auto;
    text-align: left;
}

.system-message {
    background: #e8f5e8;
    color: #2d5a2d;
    margin: 0 auto;
    text-align: center;
    font-style: italic;
    max-width: 90%;
}

.doc-chat-interface {
    display: flex;
    flex-direction: column;
    height: 80vh;
    max-width: 800px;
    width: 100%;
}

.doc-chat-interface h2 {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    margin-bottom: var(--space-lg);
    text-align: center;
}

.progress-message {
    background: #e3f2fd;
    color: #1976d2;
    padding: var(--space-sm);
    margin: var(--space-sm) 0;
    border-radius: 4px;
    text-align: center;
    font-style: italic;
}

#doc-chat-area {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-lg);
    background: var(--color-background-alt);
    border: 2px solid var(--color-border);
    margin-bottom: var(--space-md);
}

#doc-message-input {
    flex: 1;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-lg);
    border: 2px solid var(--color-border);
    background: var(--color-background);
    font-family: var(--font-family);
}

#doc-message-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

#doc-send-btn {
    padding: var(--space-sm) var(--space-md);
    background: var(--color-primary);
    color: var(--color-secondary);
    border: none;
    font-size: var(--font-size-lg);
    cursor: pointer;
    font-family: var(--font-family);
    font-weight: 600;
}

#doc-send-btn:hover {
    background: #333333;
}