/* AI Assistant Chat Window - Super Liquid Glass Style */

/* Base Variables */
:root {
    --glass-border: rgba(255, 255, 255, 0.2);
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.ai-chat-window {
    position: fixed;
    /* PC Defaults: Centered, Landscape-ish aspect but responsive */
    top: 50%;
    left: 50%;
    width: 600px;
    height: 400px;
    
    /* Super Liquid Glassmorphism */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.01));
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    
    border: 1px solid var(--glass-border);
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    
    border-radius: 30px;
    box-shadow: 
        0 25px 60px rgba(0, 0, 0, 0.5),
        inset 0 0 20px rgba(255, 255, 255, 0.05);
        
    display: flex;
    flex-direction: column;
    z-index: 2000; /* Higher than everything */
    overflow: hidden;
    
    /* Animation State: Hidden */
    transform-origin: center center;
    transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.85) perspective(1000px) rotateX(10deg);
    pointer-events: none;
    visibility: hidden;
}

/* Add an organic blob background for liquid feel */
.ai-chat-window::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1), transparent 60%);
    pointer-events: none;
    z-index: -1;
    transform: rotate(30deg);
}

/* Animation State: Visible */
.ai-chat-window.visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) perspective(1000px) rotateX(0deg);
    pointer-events: all;
    visibility: visible;
}

/* Header */
.ai-chat-header {
    padding: 20px 56px 20px 24px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #fff;
    font-size: 18px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
    z-index: 2;
}

.ai-chat-header i {
    color: var(--dynamic-accent, #1db954);
    margin-right: 12px;
    filter: drop-shadow(0 0 8px rgba(29, 185, 84, 0.6));
}

.ai-chat-header .glass-close-btn {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    min-width: 64px;
    height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.25s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
}

.ai-chat-header .glass-close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-50%) scale(1.05);
}

/* Messages Area */
.ai-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    scroll-behavior: smooth;
    /* Custom Scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}

.ai-chat-messages::-webkit-scrollbar {
    width: 6px;
}
.ai-chat-messages::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 10px;
}

/* Message Bubbles */
.ai-message {
    max-width: 80%;
    padding: 14px 20px;
    border-radius: 20px;
    font-size: 15px;
    line-height: 1.6;
    word-wrap: break-word;
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    backdrop-filter: blur(5px);
    
    /* Entry Animation */
    animation: messagePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    opacity: 0;
    transform: translateY(20px) scale(0.9);
}

@keyframes messagePop {
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.ai-message.system {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom-left-radius: 4px;
    color: rgba(255, 255, 255, 0.95);
    transform-origin: bottom left;
}

.ai-message.user {
    align-self: flex-end;
    background: var(--dynamic-accent, #1db954);
    background-image: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, transparent 100%);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    border-bottom-right-radius: 4px;
    font-weight: 500;
    transform-origin: bottom right;
    box-shadow: 0 8px 20px rgba(29, 185, 84, 0.3);
}

/* Input Area */
.ai-chat-input-area {
    padding: 20px;
    background: rgba(0, 0, 0, 0.1);
    display: flex;
    gap: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    z-index: 2;
    align-items: flex-end;
}

#ai-chat-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 14px 24px;
    color: #fff;
    outline: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    font-size: 15px;
    backdrop-filter: blur(10px);
}

#ai-chat-input:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--dynamic-accent, #1db954);
    box-shadow: 0 0 0 4px rgba(29, 185, 84, 0.15);
}

#ai-chat-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

#ai-chat-send {
    background: var(--dynamic-accent, #1db954);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    font-size: 18px;
}

#ai-chat-send:hover {
    transform: scale(1.15) rotate(-10deg);
    box-shadow: 0 10px 25px rgba(29, 185, 84, 0.5);
}

#ai-chat-send:active {
    transform: scale(0.95);
}

/* Typing Indicator */
.typing-indicator {
    display: flex;
    gap: 6px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    border-bottom-left-radius: 4px;
    width: fit-content;
    align-items: center;
}

.typing-dot {
    width: 7px;
    height: 7px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    animation: typingBounce 1.4s infinite ease-in-out both;
}

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

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

/* --- Responsive & Mobile Adaptation --- */

/* Mobile Portrait - Vertical Dialog */
@media (max-width: 768px) {
    .ai-chat-window {
        width: 100%;
        height: 100%; /* Full screen vertical */
        max-width: none;
        max-height: none;
        top: 0;
        left: 0;
        transform: translate(0, 0) scale(0.9);
        border-radius: 0;
        border: none;
        
        /* Mobile Specific Animation */
        transform-origin: bottom center;
        transition: all 0.5s cubic-bezier(0.32, 0.72, 0, 1);
    }
    
    .ai-chat-window.visible {
        transform: translate(0, 0) scale(1);
    }
    
    /* Maybe Bottom Sheet Style for Mobile? 
       User said "Vertical dialog window", could mean full screen or bottom sheet. 
       Let's go with a very tall bottom sheet or full screen with rounded top corners.
    */
    .ai-chat-window {
        height: 90vh; /* 90% height */
        top: auto; /* Unset top */
        bottom: 0; /* Stick to bottom */
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
        border-top: 1px solid rgba(255,255,255,0.3);
        
        /* Animation for bottom sheet */
        transform: translateY(100%);
    }
    
    .ai-chat-window.visible {
        transform: translateY(0);
    }
    
    .ai-chat-header {
        padding: 24px;
        font-size: 20px;
    }
    
    .ai-chat-input-area {
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }
}

/* PC Landscape - Horizontal Dialog (Wider) */
@media (min-width: 769px) {
    /* Ensure it handles zoom gracefully by using relative units if needed, 
       but fixed px with center positioning usually works well for modals.
       User requested "Horizontal screen dialogue window", 600x400 is landscape.
    */
    .ai-chat-window {
        width: 820px;
        height: 520px;
        max-width: 95vw;
        max-height: 90vh;
    }
}

/* Handle different zoom levels / small PC screens */
@media (max-height: 600px) and (min-width: 769px) {
    .ai-chat-window {
        height: 80vh;
        top: 50%;
        transform: translate(-50%, -50%) scale(0.85);
    }
    .ai-chat-window.visible {
        transform: translate(-50%, -50%) scale(1);
    }
}