/* ========================================
AI Avatar CSS
Full Stack AI Developer Portfolio
======================================== */

:root {
    --avatar-primary: #2E9EF7;
    --avatar-secondary: #1a5f8f;
    --avatar-accent: #00D9FF;
    --bg-dark: #0D1117;
    --bg-card: #161B22;
    --text-primary: #FFFFFF;
    --text-secondary: #8B949E;
    --success: #00C853;
    --warning: #FF6D00;
    --glow: rgba(46, 158, 247, 0.6);
}

/* ========================================
Main Avatar Container
======================================== */

.ai-avatar-container {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 9999;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-avatar-container[data-avatar-mode="mini"] .avatar-wrapper {
    width: 80px;
    height: 80px;
}

.ai-avatar-container[data-avatar-mode="full"] .avatar-wrapper {
    width: 120px;
    height: 120px;
}

.ai-avatar-container.minimized .avatar-wrapper {
    transform: scale(0.7);
}

.ai-avatar-container.hidden {
    transform: translateX(200px);
    opacity: 0;
    pointer-events: none;
}

/* ========================================
Avatar Wrapper & SVG
======================================== */

.avatar-wrapper {
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    animation: avatarFloat 3s ease-in-out infinite;
}

.avatar-wrapper:hover {
    transform: scale(1.1) translateY(-5px);
    filter: drop-shadow(0 10px 30px var(--glow));
}

.avatar-svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 5px 15px rgba(46, 158, 247, 0.3));
}

/* ========================================
Avatar Animations - Rings
======================================== */

.avatar-ring-outer {
    animation: ringPulse 2s ease-in-out infinite;
    transform-origin: center;
}

.avatar-ring-middle {
    animation: ringPulse 2s ease-in-out infinite 0.5s;
    transform-origin: center;
}

@keyframes ringPulse {
    0%, 100% {
        r: 90;
        opacity: 0.3;
    }
    50% {
        r: 95;
        opacity: 0.6;
    }
}

/* ========================================
Avatar Head & Body
======================================== */

.avatar-head {
    animation: headTilt 4s ease-in-out infinite;
    transform-origin: center;
}

@keyframes headTilt {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-2deg);
    }
    75% {
        transform: rotate(2deg);
    }
}

/* ========================================
Antenna Animation
======================================== */

.avatar-antenna {
    animation: antennaWave 2s ease-in-out infinite;
    transform-origin: 100px 45px;
}

.avatar-antenna-bulb {
    animation: antennaPulse 1s ease-in-out infinite;
}

@keyframes antennaWave {
    0%, 100% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(5deg);
    }
}

@keyframes antennaPulse {
    0%, 100% {
        opacity: 1;
        r: 6;
    }
    50% {
        opacity: 0.6;
        r: 8;
    }
}

/* ========================================
Eyes Animation
======================================== */

.avatar-eyes {
    animation: eyeTrack 8s ease-in-out infinite;
}

@keyframes eyeTrack {
    0%, 100% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(2px, -1px);
    }
    50% {
        transform: translate(0, 0);
    }
    75% {
        transform: translate(-2px, 1px);
    }
}

/* Eye Blink Animation */
.eye-outer-left,
.eye-outer-right,
.eye-pupil-left,
.eye-pupil-right,
.eye-shine-left,
.eye-shine-right {
    animation: eyeBlink 4s ease-in-out infinite;
}

@keyframes eyeBlink {
    0%, 46%, 50%, 100% {
        transform: scaleY(1);
    }
    48% {
        transform: scaleY(0.1);
    }
}

/* Eye Glow */
.eye-glow-left,
.eye-glow-right {
    animation: eyeGlowPulse 2s ease-in-out infinite;
}

@keyframes eyeGlowPulse {
    0%, 100% {
        opacity: 0.4;
        r: 15;
    }
    50% {
        opacity: 0.8;
        r: 18;
    }
}

/* ========================================
Mouth Animations
======================================== */

.avatar-mouth {
    animation: mouthTalk 0.5s ease-in-out infinite;
    transform-origin: 100px 105px;
}

.avatar-mouth.talking {
    animation: mouthTalk 0.3s ease-in-out infinite;
}

.avatar-mouth.happy {
    animation: mouthSmile 0.5s ease forwards;
}

.avatar-mouth.thinking {
    animation: mouthThink 0.5s ease forwards;
}

@keyframes mouthTalk {
    0%, 100% {
        d: path("M 70 100 Q 100 110 130 100");
    }
    50% {
        d: path("M 70 100 Q 100 105 130 100");
    }
}

@keyframes mouthSmile {
    to {
        d: path("M 70 95 Q 100 115 130 95");
    }
}

@keyframes mouthThink {
    to {
        d: path("M 70 100 L 130 100");
    }
}

/* ========================================
Ear Animations
======================================== */

.avatar-ear-left,
.avatar-ear-right {
    animation: earWiggle 3s ease-in-out infinite;
}

.avatar-ear-left {
    transform-origin: 47.5px 75px;
}

.avatar-ear-right {
    transform-origin: 152.5px 75px;
    animation-delay: 1.5s;
}

@keyframes earWiggle {
    0%, 100% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(5deg);
    }
}

/* ========================================
Emotion States
======================================== */

.ai-avatar-container.emotion-idle .avatar-head {
    fill: url(#bodyGradient);
}

.ai-avatar-container.emotion-happy .avatar-head {
    animation: headBounce 0.5s ease;
}

.ai-avatar-container.emotion-thinking .avatar-antenna-bulb {
    animation: thinkingPulse 0.5s ease-in-out infinite;
}

.ai-avatar-container.emotion-excited .avatar-wrapper {
    animation: excitedShake 0.5s ease;
}

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

@keyframes thinkingPulse {
    0%, 100% {
        fill: #2E9EF7;
    }
    50% {
        fill: #FF6D00;
    }
}

@keyframes excitedShake {
    0%, 100% {
        transform: translateX(0) rotate(0deg);
    }
    25% {
        transform: translateX(-5px) rotate(-3deg);
    }
    75% {
        transform: translateX(5px) rotate(3deg);
    }
}

/* ========================================
Emotion Indicator
======================================== */

.emotion-indicator {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-card);
    border: 2px solid var(--avatar-primary);
    border-radius: 20px;
    padding: 0.4rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--avatar-primary);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.avatar-wrapper:hover .emotion-indicator,
.emotion-indicator.show {
    opacity: 1;
}

/* ========================================
Chat Bubble
======================================== */

.chat-bubble {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 1rem;
    background: var(--bg-card);
    border: 2px solid var(--avatar-primary);
    border-radius: 16px;
    padding: 1rem 1.5rem;
    max-width: 280px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transform: translateY(10px) scale(0.95);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.chat-bubble.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    animation: bubbleBounce 0.6s ease;
}

@keyframes bubbleBounce {
    0% {
        transform: translateY(10px) scale(0.95);
    }
    60% {
        transform: translateY(-5px) scale(1.02);
    }
    100% {
        transform: translateY(0) scale(1);
    }
}

.bubble-content p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-primary);
    font-family: 'Fira Code', monospace;
}

.bubble-tail {
    position: absolute;
    bottom: -10px;
    right: 20px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid var(--avatar-primary);
}

.bubble-tail::before {
    content: '';
    position: absolute;
    bottom: 2px;
    left: -8px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid var(--bg-card);
}

/* ========================================
Mini Chat Interface
======================================== */

.mini-chat {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 380px;
    max-height: 600px;
    background: var(--bg-card);
    border: 2px solid var(--avatar-primary);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10000;
}

.mini-chat.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* ========================================
Chat Header
======================================== */

.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(46, 158, 247, 0.2);
    background: linear-gradient(135deg, rgba(46, 158, 247, 0.1), transparent);
}

.chat-header-left {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.status-dot {
    width: 10px;
    height: 10px;
    background: var(--success);
    border-radius: 50%;
    animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.2);
    }
}

.chat-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1rem;
}

.chat-close {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-close:hover {
    background: rgba(46, 158, 247, 0.1);
    color: var(--avatar-primary);
}

/* ========================================
Chat Messages
======================================== */

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 300px;
    max-height: 400px;
}

.chat-message {
    display: flex;
    gap: 0.8rem;
    animation: messageSlideIn 0.3s ease;
}

@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.user-message {
    flex-direction: row-reverse;
}

.user-message .message-content {
    background: var(--avatar-primary);
    color: white;
}

.message-avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: var(--bg-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    border: 2px solid var(--avatar-primary);
}

.message-content {
    background: var(--bg-dark);
    border: 1px solid rgba(46, 158, 247, 0.2);
    border-radius: 12px;
    padding: 0.8rem 1rem;
    max-width: 70%;
}

.message-content p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-primary);
}

.message-time {
    display: block;
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-top: 0.3rem;
}

/* Typing Indicator */
.typing-indicator {
    display: flex;
    gap: 0.3rem;
    padding: 0.5rem;
}

.typing-dot {
    width: 8px;
    height: 8px;
    background: var(--avatar-primary);
    border-radius: 50%;
    animation: typingBounce 1.4s ease-in-out infinite;
}

.typing-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typingBounce {
    0%, 60%, 100% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(-10px);
    }
}

/* ========================================
Quick Questions
======================================== */

.quick-questions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(46, 158, 247, 0.2);
}

.quick-btn {
    background: var(--bg-dark);
    border: 1px solid rgba(46, 158, 247, 0.3);
    color: var(--text-primary);
    padding: 0.7rem;
    border-radius: 8px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Fira Code', monospace;
}

.quick-btn:hover {
    background: var(--avatar-primary);
    border-color: var(--avatar-primary);
    color: white;
    transform: translateY(-2px);
}

/* ========================================
Chat Input
======================================== */

.chat-input-container {
    display: flex;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(46, 158, 247, 0.2);
    background: var(--bg-dark);
    border-radius: 0 0 14px 14px;
}

.chat-input {
    flex: 1;
    background: var(--bg-card);
    border: 1px solid rgba(46, 158, 247, 0.3);
    color: var(--text-primary);
    padding: 0.8rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: 'Fira Code', monospace;
    transition: all 0.3s ease;
}

.chat-input:focus {
    outline: none;
    border-color: var(--avatar-primary);
    box-shadow: 0 0 0 3px rgba(46, 158, 247, 0.1);
}

.chat-send {
    background: var(--avatar-primary);
    border: none;
    color: white;
    width: 45px;
    height: 45px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.chat-send:hover {
    background: var(--avatar-accent);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(46, 158, 247, 0.4);
}

.chat-send:active {
    transform: translateY(0);
}

/* ========================================
Avatar Toggle Button
======================================== */

.avatar-toggle {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 40px;
    height: 40px;
    background: var(--avatar-primary);
    border: 3px solid var(--bg-dark);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(46, 158, 247, 0.4);
}

.avatar-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 7px 20px rgba(46, 158, 247, 0.6);
}

.toggle-icon {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.avatar-toggle.active .toggle-icon {
    transform: rotate(45deg);
}

.notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
    background: var(--warning);
    border: 2px solid var(--bg-dark);
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    animation: badgePulse 2s ease-in-out infinite;
}

.notification-badge.hidden {
    display: none;
}

@keyframes badgePulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

/* ========================================
Float Animation
======================================== */

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

/* ========================================
Responsive Design
======================================== */

@media (max-width: 768px) {
    .ai-avatar-container {
        bottom: 1rem;
        right: 1rem;
    }

    .ai-avatar-container[data-avatar-mode="full"] .avatar-wrapper {
        width: 80px;
        height: 80px;
    }

    .mini-chat {
        width: calc(100vw - 2rem);
        max-width: 350px;
        bottom: 1rem;
        right: 1rem;
    }

    .chat-bubble {
        max-width: 220px;
        padding: 0.8rem 1rem;
    }

    .quick-questions {
        grid-template-columns: 1fr;
    }
}

/* ========================================
Scrollbar Styling
======================================== */

.chat-messages::-webkit-scrollbar {
    width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
    background: var(--bg-dark);
    border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb {
    background: var(--avatar-primary);
    border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
    background: var(--avatar-accent);
}