/* --- Base Styles & Fonts --- */
body {
    font-family: 'Roboto Mono', monospace;
    background-color: #111827; /* gray-900 */
    color: #67e8f9; /* cyan-300 */
    overflow-x: hidden; /* Prevent horizontal scroll */
    position: relative;
}
.font-display { font-family: 'VT323', monospace; }
.font-mono { font-family: 'Roboto Mono', monospace; }

/* --- Theme Transition Overlay --- */
#theme-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(to bottom, #10b981 50%, #111827 50%);
    background-size: 100% 200%;
    background-position: top;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
#theme-transition-overlay.active {
    opacity: 1;
    animation: scan-down 1s forwards cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes scan-down {
    0% { background-position: top; }
    100% { background-position: bottom; }
}


/* --- Particles.js Background --- */
#particles-js {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
}

/* --- AI Companion --- */
#ai-companion {
    position: fixed;
    top: -40px; /* Offset to center */
    left: -40px;
    width: 80px;
    height: 80px;
    z-index: 1000;
    pointer-events: none;
    will-change: transform;
    transition: opacity 0.5s ease-in-out;
    opacity: 0;
}
.ai-body {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease-out;
}
.ai-face {
    font-size: 40px;
    transition: all 0.3s ease;
    background: #34d399;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 15px #34d399, 0 0 25px #34d399;
    font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
}
.ai-hand {
    position: absolute;
    font-size: 30px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
}
#ai-hand-left { left: 0px; top: 25px; }
#ai-hand-right { right: 0px; top: 25px; }

/* --- AI Gestures --- */
.ai-state-greeting #ai-hand-right {
    animation: wave 1.5s ease-in-out;
}
.ai-state-thinking #ai-hand-left {
    transform: translate(20px, 15px) scaleX(-1) rotate(-20deg);
}
.ai-state-joking #ai-hand-left, .ai-state-joking #ai-hand-right {
    transform: translateY(-10px);
}
.ai-state-describing #ai-hand-left, .ai-state-describing #ai-hand-right,
.ai-state-guiding #ai-hand-right {
    transform: scale(1.1);
}
.ai-state-dizzy .ai-face {
    animation: spin 1s linear infinite;
}
.ai-state-dizzy .ai-body {
    animation: wobble 0.5s ease-in-out infinite alternate;
}

.ai-speech-bubble {
    position: absolute;
    bottom: 110%; 
    left: 50%;
    transform: translateX(-50%);
    background: rgba(17, 24, 39, 0.95);
    border: 2px solid #34d399;
    color: white;
    padding: 10px 15px;
    border-radius: 10px;
    width: max-content;
    max-width: 250px;
    font-size: 14px;
    opacity: 0;
    visibility: hidden; 
    transition: all 0.3s ease-in-out;
    pointer-events: none;
    z-index: 10;
}
.ai-speech-bubble.visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-10px);
}
.ai-speech-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #34d399 transparent transparent transparent;
    transition: left 0.3s ease;
}

/* Flipped state for speech bubble */
.ai-speech-bubble.flipped { bottom: auto; top: 110%; }
.ai-speech-bubble.flipped.visible { transform: translateX(-50%) translateY(10px); }
.ai-speech-bubble.flipped::after { top: auto; bottom: 100%; border-color: transparent transparent #34d399 transparent; }

/* Horizontal alignment for speech bubble */
.ai-speech-bubble.align-left { left: 0; transform: translateX(0); }
.ai-speech-bubble.align-left.visible { transform: translateX(0) translateY(-10px); }
.ai-speech-bubble.flipped.align-left.visible { transform: translateX(0) translateY(10px); }
.ai-speech-bubble.align-left::after { left: 40px; }
.ai-speech-bubble.align-right { left: auto; right: 0; transform: translateX(0); }
.ai-speech-bubble.align-right.visible { transform: translateX(0) translateY(-10px); }
.ai-speech-bubble.flipped.align-right.visible { transform: translateX(0) translateY(10px); }
.ai-speech-bubble.align-right::after { left: auto; right: 40px; transform: translateX(0); }


/* --- AI Interaction Button --- */
.ai-fab {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 60px;
    height: 60px;
    background-color: #10b981;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111827;
    cursor: pointer;
    z-index: 1001;
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
    user-select: none;
}
.ai-fab:hover {
    transform: scale(1.1);
    background-color: #34d399;
}


/* --- Component Styles --- */
.nav-link { color: #67e8f9; padding: 0.25rem 0.75rem; border-radius: 0.375rem; transition: all 0.3s; }
.nav-link:hover { color: white; background-color: rgba(14, 116, 144, 0.5); }
.nav-link.active { color: #34d399; font-weight: bold; }
.section-title { font-family: 'VT323', monospace; font-size: 1.875rem; text-align: center; margin-bottom: 2rem; color: #34d399; letter-spacing: 0.05em; }
.project-card { background-color: #1f2937; border: 2px solid #374151; border-radius: 0.5rem; overflow: hidden; transition: all 0.3s ease-in-out; }
.project-card:hover { transform: translateY(-8px); border-color: #34d399; box-shadow: 0 0 25px rgba(52, 211, 153, 0.2); }
.project-card img { transition: transform 0.3s ease-in-out; }
.project-card:hover img { transform: scale(1.05); }
.project-card .card-content { padding: 1.5rem; }
.btn { display: inline-block; background-color: #10b981; color: #111827; font-weight: bold; font-family: 'VT323', monospace; letter-spacing: 0.05em; font-size: 1.125rem; padding: 0.75rem 2rem; border-radius: 0.375rem; transition: all 0.3s; position: relative; overflow: hidden; }
.btn:hover { background-color: #34d399; box-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.3), 0 4px 6px -2px rgba(16, 185, 129, 0.2); transform: scale(1.05); }
.form-input { width: 100%; background-color: #111827; border: 2px solid #0e7490; border-radius: 0.375rem; padding: 0.75rem; color: white; transition: border-color 0.3s; }
.form-input:focus { outline: none; border-color: #34d399; }
.skill-tag { background-color: #1f2937; border: 2px solid #0e7490; color: #67e8f9; padding: 0.5rem 1rem; border-radius: 9999px; font-size: 0.875rem; font-weight: bold; }

/* --- Works Page Filter Styles --- */
.tag-filter-btn { background-color: #1f2937; border: 1px solid #0e7490; color: #67e8f9; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.8rem; cursor: pointer; transition: all 0.2s ease-in-out; }
.tag-filter-btn:hover { background-color: #0e7490; color: white; }
.tag-filter-btn.active { background-color: #34d399; color: #111827; border-color: #34d399; font-weight: bold; }

/* --- Chatbot Styles --- */
#chatbot-output .message { padding: 0.75rem 1rem; border-radius: 0.5rem; max-width: 80%; line-break: anywhere; }
#chatbot-output .user-message { background-color: #0e7490; color: white; align-self: flex-end; margin-left: auto; }
#chatbot-output .ai-message { background-color: #1f2937; color: #a5f3fc; align-self: flex-start; }
#chatbot-output .ai-error-message { background-color: #4c1d22; color: #fca5a5; align-self: flex-start; }

/* --- Secret Terminal & Theme --- */
#terminal-input { caret-color: #34d399; }
#matrix-rain { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; pointer-events: none; }
body.secret-theme { background: black; color: #0f0; font-family: 'VT323', monospace; }
.secret-theme .project-card, .secret-theme .form-input, .secret-theme header, .secret-theme footer { border-color: #0f0; background-color: #000; }
.secret-theme .nav-link.active, .secret-theme .text-green-400 { color: #0f0; }
.secret-theme .btn { background-color: #0f0; color: #000; }
.secret-theme #typewriter::after { content: '_'; animation: blink-secret 1s step-end infinite; }
.secret-theme #ai-companion .ai-face { background-color: #0f0; box-shadow: 0 0 15px #0f0, 0 0 25px #0f0, 0 0 35px #0f0; }
.secret-theme .ai-speech-bubble { border-color: #0f0; color: #0f0; }
.secret-theme .ai-speech-bubble::after { border-top-color: #0f0; }
.secret-theme .ai-speech-bubble.flipped::after { border-color: transparent transparent #0f0 transparent; }
.secret-theme .ai-fab { background-color: #0f0; color: #000; box-shadow: 0 4px 15px rgba(0, 255, 0, 0.4); }

/* Pink Theme */
body.pink-theme { background-color: #1c0f1a; color: #f472b6; }
.pink-theme .bg-gray-900 { background-color: #1c0f1a !important; }
.pink-theme .text-cyan-300, .pink-theme .nav-link { color: #f472b6; }
.pink-theme .nav-link:hover { background-color: rgba(219, 39, 119, 0.3); color: white; }
.pink-theme .border-green-500\/30 { border-color: rgba(219, 39, 119, 0.3); }
.pink-theme .text-green-400, .pink-theme .nav-link.active, .pink-theme .section-title { color: #ec4899; }
.pink-theme .btn { background-color: #db2777; color: #1c0f1a; }
.pink-theme .btn:hover { background-color: #ec4899; }
.pink-theme .project-card { background-color: #2e1a2a; border-color: #582d50; }
.pink-theme .project-card:hover { border-color: #ec4899; }
.pink-theme .form-input { background-color: #1c0f1a; border-color: #83407a; }
.pink-theme .form-input:focus { border-color: #ec4899; }
.pink-theme #ai-companion .ai-face { background-color: #ec4899; box-shadow: 0 0 15px #ec4899, 0 0 25px #ec4899; }
.pink-theme .ai-fab { background-color: #ec4899; box-shadow: 0 4px 15px rgba(236, 72, 153, 0.4); }

/* Solarized Theme */
body.solarized-theme { background-color: #002b36; color: #839496; }
.solarized-theme .bg-gray-900 { background-color: #002b36 !important; }
.solarized-theme .text-cyan-300, .solarized-theme .nav-link { color: #93a1a1; }
.solarized-theme .nav-link:hover { background-color: #073642; color: #fdf6e3; }
.solarized-theme .border-green-500\/30 { border-color: #586e75; }
.solarized-theme .text-green-400, .solarized-theme .nav-link.active, .solarized-theme .section-title { color: #859900; }
.solarized-theme .text-white { color: #fdf6e3 !important; }
.solarized-theme .btn { background-color: #268bd2; color: #002b36; }
.solarized-theme .btn:hover { background-color: #2aa198; }
.solarized-theme .project-card { background-color: #073642; border-color: #586e75; }
.solarized-theme .project-card:hover { border-color: #268bd2; }
.solarized-theme .form-input { background-color: #002b36; border-color: #586e75; }
.solarized-theme .form-input:focus { border-color: #268bd2; }
.solarized-theme #ai-companion .ai-face { background-color: #b58900; box-shadow: 0 0 15px #b58900, 0 0 25px #b58900; }
.solarized-theme .ai-fab { background-color: #cb4b16; box-shadow: 0 4px 15px rgba(203, 75, 22, 0.4); }


/* --- Animations & Effects --- */
@keyframes wave { 0% { transform: rotate(0deg); } 25% { transform: rotate(25deg); } 50% { transform: rotate(-15deg); } 75% { transform: rotate(25deg); } 100% { transform: rotate(0deg); } }
@keyframes spin { 100% { transform: rotate(360deg); } }
@keyframes wobble { 0%, 100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-5px) rotate(-5deg); } 75% { transform: translateX(5px) rotate(5deg); } }
.hero-section { position: relative; overflow: hidden; }
.hero-section::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(17, 24, 39, 0) 50%, rgba(17, 24, 39, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)); background-size: 100% 4px, 6px 100%; animation: scanlines 2s linear infinite; pointer-events: none; }
@keyframes scanlines { 0% { background-position: 0 0; } 100% { background-position: 0 100%; } }
@keyframes fade-in-down { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } }
.animate-fade-in-down { animation: fade-in-down 0.8s ease-out forwards; animation-delay: calc(0.2s * var(--delay, 0)); }
#typewriter::after { content: '_'; animation: blink 1s step-end infinite; }
@keyframes blink { from, to { color: transparent } 50% { color: #34D399; } }
@keyframes blink-secret { from, to { color: transparent } 50% { color: #0f0; } }
@keyframes subtle-bob { 0% { transform: translateY(0); } 50% { transform: translateY(-4px); } 100% { transform: translateY(0); } }
.ai-state-idle .ai-body { animation: subtle-bob 5s ease-in-out infinite; }