/**
 * FLUX.HAWK Bot Expression Styles
 * Supports the 5 robot expressions from sprite sheet
 * Includes CSS fallbacks for missing assets
 * 
 * @package WienIndex
 * @version 1.0.0
 */

/* ===== Base Bot Container ===== */
.hawk-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hawk-bot {
    width: 80px;
    height: 80px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

/* Halo effect behind bot */
.hawk-bot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--hawk-glow, rgba(0, 212, 255, 0.3)) 0%, transparent 70%);
    z-index: -1;
    transition: all 0.3s ease;
}

.hawk-bot:hover::before {
    width: 120px;
    height: 120px;
}

/* ===== Expression States ===== */

/* Neutral - Friendly smile, orange+cyan eyes */
.hawk-bot.bot-neutral {
    background-image: url('/assets/img/bot/bot_neutral.png');
}

.hawk-bot.bot-neutral::before {
    --hawk-glow: rgba(0, 212, 255, 0.4);
}

/* Flux Mode - Cool/focused, cyan eyes */
.hawk-bot.bot-flux {
    background-image: url('/assets/img/bot/bot_flux.png');
}

.hawk-bot.bot-flux::before {
    --hawk-glow: rgba(255, 0, 110, 0.4);
}

/* Alert - Angry/warning, red eyes */
.hawk-bot.bot-alert {
    background-image: url('/assets/img/bot/bot_alert.png');
    animation: alertPulse 1s ease-in-out infinite;
}

.hawk-bot.bot-alert::before {
    --hawk-glow: rgba(255, 51, 102, 0.5);
}

/* Excited - Good news, mixed warm eyes */
.hawk-bot.bot-excited {
    background-image: url('/assets/img/bot/bot_excited.png');
    animation: excitedBounce 0.5s ease-in-out infinite;
}

.hawk-bot.bot-excited::before {
    --hawk-glow: rgba(255, 200, 0, 0.4);
}

/* Sad - Error state, droopy expression */
.hawk-bot.bot-sad {
    background-image: url('/assets/img/bot/bot_sad.png');
}

.hawk-bot.bot-sad::before {
    --hawk-glow: rgba(100, 100, 100, 0.3);
}

/* Premium - Gold sparkle eyes */
.hawk-bot.bot-premium {
    background-image: url('/assets/img/bot/bot_premium.png');
}

.hawk-bot.bot-premium::before {
    --hawk-glow: rgba(255, 215, 0, 0.5);
    animation: premiumGlow 2s ease-in-out infinite;
}

/* Thinking - Processing state */
.hawk-bot.bot-thinking {
    background-image: url('/assets/img/bot/bot_thinking.png');
}

/* Sleeping - Idle state */
.hawk-bot.bot-sleeping {
    background-image: url('/assets/img/bot/bot_sleeping.png');
    opacity: 0.7;
}

/* ===== CSS Fallbacks for Missing Assets ===== */

/* Generic fallback structure */
.hawk-bot.fallback {
    background: none !important;
    position: relative;
}

.hawk-bot.fallback::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50% 50% 45% 45%;
    background: radial-gradient(
        ellipse at center,
        rgba(220, 220, 220, 0.95) 0%,
        rgba(180, 180, 180, 0.9) 60%,
        rgba(150, 150, 150, 0.85) 100%
    );
    box-shadow: 
        inset 0 -5px 15px rgba(0, 0, 0, 0.2),
        0 5px 20px rgba(0, 0, 0, 0.3);
}

/* Eye containers for fallback */
.hawk-bot.fallback .eye {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    top: 35%;
    z-index: 10;
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        0 0 10px var(--eye-color, #00d4ff);
    background: radial-gradient(circle at 30% 30%, var(--eye-color, #00d4ff), rgba(0, 0, 0, 0.8));
    animation: eyeGlow 2s ease-in-out infinite;
}

.hawk-bot.fallback .eye.left {
    left: 25%;
}

.hawk-bot.fallback .eye.right {
    right: 25%;
}

/* Fallback expression variations */
.hawk-bot.fallback.bot-neutral .eye { --eye-color: #00d4ff; }
.hawk-bot.fallback.bot-neutral .eye.left { --eye-color: #ff8c00; }

.hawk-bot.fallback.bot-flux .eye { --eye-color: #00d4ff; }

.hawk-bot.fallback.bot-alert .eye { 
    --eye-color: #ff3366;
    animation: eyeGlow 0.5s ease-in-out infinite;
}

.hawk-bot.fallback.bot-excited .eye.left { --eye-color: #ff3366; }
.hawk-bot.fallback.bot-excited .eye.right { --eye-color: #ff8c00; }

.hawk-bot.fallback.bot-sad .eye { 
    --eye-color: #666;
    top: 40%;
}

.hawk-bot.fallback.bot-premium .eye { 
    --eye-color: #ffd700;
    animation: premiumEye 1.5s ease-in-out infinite;
}

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

@keyframes eyeGlow {
    0%, 100% { 
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 10px var(--eye-color);
    }
    50% { 
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 20px var(--eye-color);
    }
}

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

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

@keyframes premiumGlow {
    0%, 100% { 
        background: radial-gradient(circle, rgba(255, 215, 0, 0.3) 0%, transparent 70%);
    }
    50% { 
        background: radial-gradient(circle, rgba(255, 215, 0, 0.6) 0%, transparent 70%);
    }
}

@keyframes premiumEye {
    0%, 100% { 
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 15px #ffd700;
    }
    50% { 
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 25px #ffd700, 0 0 35px rgba(255, 215, 0, 0.5);
    }
}

/* Thinking animation */
.hawk-bot.thinking {
    animation: thinkingPulse 1.5s ease-in-out infinite;
}

@keyframes thinkingPulse {
    0%, 100% { 
        transform: scale(1);
        filter: brightness(1);
    }
    50% { 
        transform: scale(1.02);
        filter: brightness(1.1);
    }
}

/* Talking animation */
.hawk-bot.talking {
    animation: talking 0.15s ease-in-out infinite;
}

@keyframes talking {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(0.98); }
}

/* ===== Size Variants ===== */

.hawk-bot.small {
    width: 48px;
    height: 48px;
}

.hawk-bot.small::before {
    width: 60px;
    height: 60px;
}

.hawk-bot.medium {
    width: 80px;
    height: 80px;
}

.hawk-bot.large {
    width: 120px;
    height: 120px;
}

.hawk-bot.large::before {
    width: 150px;
    height: 150px;
}

.hawk-bot.xlarge {
    width: 160px;
    height: 160px;
}

/* ===== Chat Interface Integration ===== */

.hawk-chat-avatar {
    flex-shrink: 0;
}

.hawk-chat-avatar .hawk-bot {
    width: 40px;
    height: 40px;
}

.hawk-chat-avatar .hawk-bot::before {
    width: 50px;
    height: 50px;
}

/* Message typing indicator */
.hawk-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
}

.hawk-typing .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-color, #00d4ff);
    animation: typingDot 1.4s ease-in-out infinite;
}

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

@keyframes typingDot {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30% { transform: translateY(-5px); opacity: 1; }
}

/* ===== Theme Variations ===== */

/* Delux Theme */
[data-theme="delux"] .hawk-bot::before {
    --hawk-glow: rgba(0, 212, 255, 0.3);
}

[data-theme="delux"] .hawk-bot.bot-alert::before {
    --hawk-glow: rgba(255, 51, 102, 0.4);
}

/* Flux Theme */
[data-theme="flux"] .hawk-bot::before {
    --hawk-glow: rgba(255, 0, 110, 0.3);
}

[data-theme="flux"] .hawk-bot.bot-neutral::before {
    --hawk-glow: rgba(255, 0, 110, 0.4);
}

/* ===== Accessibility ===== */

@media (prefers-reduced-motion: reduce) {
    .hawk-bot,
    .hawk-bot::before,
    .hawk-bot.bot-alert,
    .hawk-bot.bot-excited,
    .hawk-bot.thinking,
    .hawk-bot.talking,
    .hawk-typing .dot {
        animation: none !important;
        transition: none !important;
    }
}

/* ===== Admin Preview Grid ===== */

.bot-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 20px;
    padding: 20px;
}

.bot-preview-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.bot-preview-item:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-3px);
}

.bot-preview-item .status {
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 4px;
}

.bot-preview-item .status.found {
    background: rgba(0, 200, 100, 0.2);
    color: #00c864;
}

.bot-preview-item .status.missing {
    background: rgba(255, 100, 100, 0.2);
    color: #ff6464;
}

.bot-preview-item .expression-name {
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: capitalize;
}
/* =====================================================
   WIENINDEX.AT - HAWK-BOT CSS PATCH
   Füge diesen Code am ENDE von /assets/css/hawk-bot.css hinzu
   
   FIXES:
   1. Bot-Avatar Größe begrenzen
   2. Position im Viewport fixieren
   3. Chat-Fenster Größe
   ===================================================== */

/* =====================================================
   BOT FLOATING BUTTON - Unten rechts fixiert
   ===================================================== */

/* Haupt-Container für den Bot-Button */
.hawk-floating,
.hawk-widget,
.flux-hawk-widget,
#hawk-widget,
#flux-hawk-container {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    z-index: 9998 !important;
    width: auto !important;
    height: auto !important;
    max-width: 100px !important;
    max-height: 100px !important;
}

/* Der Bot selbst - auf 60px begrenzt */
.hawk-floating .hawk-bot,
.hawk-widget .hawk-bot,
.flux-hawk-widget .hawk-bot,
#hawk-widget .hawk-bot,
.hawk-trigger,
.hawk-avatar-btn,
.flux-hawk-trigger {
    width: 60px !important;
    height: 60px !important;
    max-width: 60px !important;
    max-height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hawk-floating .hawk-bot:hover,
.hawk-trigger:hover,
.hawk-avatar-btn:hover {
    transform: scale(1.1) !important;
}

/* Bot Halo/Glow - auch begrenzt */
.hawk-floating .hawk-bot::before,
.hawk-widget .hawk-bot::before,
.hawk-trigger::before {
    width: 75px !important;
    height: 75px !important;
}

/* Bot Image falls als <img> tag */
.hawk-floating img,
.hawk-widget img,
.hawk-trigger img,
.hawk-avatar-btn img,
img[src*="bot_neutral"],
img[src*="bot_flux"],
img[src*="bot_alert"],
img[src*="bot_excited"],
img[src*="bot_sad"],
img[src*="bot_premium"],
img[src*="bot_thinking"],
img[src*="bot_sleeping"] {
    width: 60px !important;
    height: 60px !important;
    max-width: 60px !important;
    max-height: 60px !important;
    object-fit: contain !important;
}

/* Notification Badge */
.hawk-badge,
.hawk-notification,
.hawk-widget .badge,
.notification-badge {
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    min-width: 20px !important;
    height: 20px !important;
    padding: 0 6px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    text-align: center !important;
    border-radius: 10px !important;
    background: #ff3366 !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(255, 51, 102, 0.4) !important;
}

/* =====================================================
   CHAT FENSTER
   ===================================================== */

.hawk-chat,
.hawk-chat-window,
.flux-hawk-chat,
#hawk-chat-container {
    position: fixed !important;
    bottom: 100px !important;
    right: 20px !important;
    width: 380px !important;
    max-width: calc(100vw - 40px) !important;
    max-height: 500px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    z-index: 9999 !important;
    box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1) !important;
}

/* Chat Header */
.hawk-chat__header,
.hawk-chat-header {
    padding: 16px 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.hawk-chat__header .hawk-bot,
.hawk-chat-header .hawk-bot {
    width: 40px !important;
    height: 40px !important;
}

.hawk-chat__header .hawk-bot::before,
.hawk-chat-header .hawk-bot::before {
    display: none !important;
}

/* Chat Messages Area */
.hawk-chat__messages,
.hawk-chat-messages {
    max-height: 320px !important;
    overflow-y: auto !important;
    padding: 16px !important;
}

/* Chat Input */
.hawk-chat__input,
.hawk-chat-input {
    padding: 12px 16px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.hawk-chat__input input,
.hawk-chat-input input,
.hawk-chat__input textarea,
.hawk-chat-input textarea {
    width: 100% !important;
    padding: 12px 16px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: inherit !important;
    font-size: 14px !important;
}

/* =====================================================
   THEME-SPEZIFISCHE CHAT STYLES
   ===================================================== */

/* Delux Chat */
[data-theme="delux"] .hawk-chat,
[data-theme="delux"] .hawk-chat-window {
    background: linear-gradient(180deg, #2d2d4a 0%, #252542 100%) !important;
    border: 1px solid rgba(201, 162, 39, 0.2) !important;
}

[data-theme="delux"] .hawk-chat__header,
[data-theme="delux"] .hawk-chat-header {
    background: rgba(26, 26, 46, 0.9) !important;
    border-bottom: 1px solid rgba(201, 162, 39, 0.2) !important;
}

[data-theme="delux"] .hawk-chat__header h3,
[data-theme="delux"] .hawk-chat-header h3 {
    color: #c9a227 !important;
}

/* Flux Chat */
[data-theme="flux"] .hawk-chat,
[data-theme="flux"] .hawk-chat-window {
    background: linear-gradient(180deg, #1a1a2a 0%, #12121f 100%) !important;
    border: 1px solid rgba(255, 0, 110, 0.2) !important;
}

[data-theme="flux"] .hawk-chat__header,
[data-theme="flux"] .hawk-chat-header {
    background: rgba(10, 10, 20, 0.9) !important;
    border-bottom: 1px solid rgba(255, 0, 110, 0.2) !important;
}

[data-theme="flux"] .hawk-chat__header h3,
[data-theme="flux"] .hawk-chat-header h3 {
    color: #ff006e !important;
    text-shadow: 0 0 10px rgba(255, 0, 110, 0.5);
}

/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 768px) {
    .hawk-floating,
    .hawk-widget,
    #hawk-widget {
        bottom: 15px !important;
        right: 15px !important;
    }
    
    .hawk-floating .hawk-bot,
    .hawk-trigger,
    .hawk-avatar-btn {
        width: 50px !important;
        height: 50px !important;
        max-width: 50px !important;
        max-height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;
    }
    
    .hawk-floating img,
    .hawk-trigger img,
    img[src*="bot_"] {
        width: 50px !important;
        height: 50px !important;
        max-width: 50px !important;
        max-height: 50px !important;
    }
    
    .hawk-chat,
    .hawk-chat-window {
        bottom: 80px !important;
        right: 10px !important;
        left: 10px !important;
        width: auto !important;
        max-width: none !important;
    }
}

@media (max-width: 480px) {
    .hawk-floating .hawk-bot,
    .hawk-trigger {
        width: 45px !important;
        height: 45px !important;
    }
    
    .hawk-chat,
    .hawk-chat-window {
        bottom: 70px !important;
        max-height: 60vh !important;
    }
}

/* =====================================================
   ANIMATION OVERRIDES (für Performance)
   ===================================================== */

@media (prefers-reduced-motion: reduce) {
    .hawk-floating .hawk-bot,
    .hawk-trigger,
    .hawk-chat {
        transition: none !important;
        animation: none !important;
    }
}
/* =====================================================
   BOT DOPPELT FIX
   Füge am ENDE von /assets/css/hawk-bot.css hinzu
   
   Problem: Bot wird doppelt angezeigt weil:
   1. .hawk-bot hat background-image via CSS
   2. <img> tag zeigt das Bild auch
   
   Lösung: CSS background entfernen wenn img vorhanden
   ===================================================== */

/* Wenn img im hawk-bot ist, kein CSS background */
.hawk-bot:has(img) {
    background-image: none !important;
    background: transparent !important;
}

/* Nur das img anzeigen */
.hawk-bot img {
    display: block !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

/* Container für den Bot - fixe Größe */
.wi-hawk__avatar,
.hawk-container {
    width: 60px !important;
    height: 60px !important;
    position: relative !important;
}

.wi-hawk__avatar .hawk-bot,
.hawk-container .hawk-bot {
    width: 60px !important;
    height: 60px !important;
    background: transparent !important;
}

/* Trigger Button Größe begrenzen */
.wi-hawk__trigger {
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
}

/* Halo Effekt anpassen */
.wi-hawk__halo {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

/* Fallback falls img nicht lädt */
.hawk-bot.fallback {
    background: linear-gradient(135deg, #2d2d4a, #1a1a2e) !important;
    border-radius: 50% !important;
}

.hawk-bot.fallback img {
    display: none !important;
}