/* Modern Minimalist Styling for Chatbot */

/* Chatbot Icon Container */
#chatbot-icon-container {
    position: fixed;
    bottom: 20px; /* Position from bottom of viewport */
    right: 20px;
    top: auto; /* Explicitly override any top positioning */
    left: auto; /* Explicitly override any left positioning */
    cursor: pointer;
    z-index: 9999; /* Ensure it's above all other content */
    width: 50px; /* Container size */
    height: 50px; /* Container size */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s ease;
    background-color: #008080; /* Teal color */
    border-radius: 50%; /* Make it circular */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    -webkit-transform: translateZ(0); /* Fix for iOS Safari */
    transform: translateZ(0); /* Fix for iOS Safari */
}

/* iOS Safari specific fix for chat icon */
@supports (-webkit-touch-callout: none) {
    #chatbot-icon-container {
        position: absolute; /* Use absolute instead of fixed for iOS */
        bottom: 20px;
        right: 20px;
        top: auto; /* Explicitly override any top positioning */
        left: auto; /* Explicitly override any left positioning */
    }
}

#chatbot-icon-container:hover {
    transform: scale(1.1);
}

/* Shake Animation */
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-2px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(2px);
    }
}

.shake-animation {
    animation: shake 3s cubic-bezier(.36,.07,.19,.97) infinite;
    animation-delay: 5s; /* Start shaking after 5 seconds of inactivity */
}

.shake-animation:hover {
    animation-play-state: paused; /* Pause animation on hover */
    transform: scale(1.1); /* Keep the hover effect */
}

/* Chatbot Icon Image */
#chatbot-icon-container img {
    max-width: 65%;
    max-height: 65%;
    display: block; /* Ensure it behaves as a block element for centering */
    filter: invert(1); /* Make the SVG white */
}


/* Chatbot Popup Container */
#chatbot-popup-container {
    position: fixed;
    bottom: 90px; /* Position above the icon */
    right: 20px;
    width: 500px; /* Increased initial width */
    height: 800px !important; /* Force a very large fixed height */
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 9000; /* Ensure it's above other content */
    display: none; /* Hidden by default */
    flex-direction: column;
    overflow: hidden; /* Hide overflow from messages */
    -webkit-transform: translateZ(0); /* Fix for iOS Safari */
    transform: translateZ(0); /* Fix for iOS Safari */
}

/* Safari-specific styles */
@media not all and (min-resolution:.001dpcm) { 
    @supports (-webkit-appearance:none) {
        #chatbot-popup-container {
            position: fixed !important;
            inset: 0 !important; /* shorthand for top, right, bottom, left */
            width: 100vw !important;
            height: 100vh !important;
            max-width: none !important;
            max-height: none !important;
            margin: 0 !important;
            padding: 0 !important;
            border-radius: 0 !important;
            display: none;
            flex-direction: column;
            z-index: 999999 !important;
            background-color: #ffffff !important;
            overflow: hidden !important;
        }
        
        #chatbot-popup-container.visible {
            display: flex !important;
        }
        
        #chatbot-popup-container #openai-chatbot-header {
            height: 56px !important;
            padding: 0 16px !important;
            border-radius: 0 !important;
            position: sticky !important;
            top: 0 !important;
            z-index: 10001 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }
        
        #chatbot-popup-container #openai-chatbot-messages {
            flex: 1 !important;
            height: auto !important;
            overflow-y: auto !important;
            -webkit-overflow-scrolling: touch !important;
        }
        
        #chatbot-popup-container #openai-chatbot-input-area {
            position: sticky !important;
            bottom: 0 !important;
            margin: 10px !important;
            z-index: 10001 !important;
        }
        
/* Add a close button for all devices */
#chatbot-popup-container #openai-chatbot-close {
    position: absolute !important;
    right: 16px !important;
    top: 18px !important; /* Fixed position from top */
    cursor: pointer !important;
    z-index: 10002 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    background-color: transparent !important; /* Remove background */
    border-radius: 0 !important; /* Remove circular shape */
    padding: 0 !important; /* Remove padding */
    box-shadow: none !important; /* Remove shadow */
    width: auto !important; /* Auto width */
    height: auto !important; /* Auto height */
}

#chatbot-popup-container #openai-chatbot-close svg {
    width: 16px !important;
    height: 16px !important;
    color: white !important;
    stroke-width: 2.5 !important;
}
    }
}

/* iOS Safari specific fix for chat popup - full screen approach */
@supports (-webkit-touch-callout: none) {
    #chatbot-popup-container {
        position: fixed !important; /* Force fixed positioning */
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important; /* Full width */
        height: 100% !important; /* Full height */
        max-width: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important; /* No rounded corners for full screen */
        display: none; /* Hidden by default */
        flex-direction: column;
        z-index: 9999; /* Higher z-index for iOS */
        -webkit-overflow-scrolling: touch; /* Enable momentum scrolling on iOS */
        background-color: #ffffff !important;
    }
    
    /* Ensure the popup is visible when shown */
    #chatbot-popup-container.visible {
        display: flex !important; /* Force display when visible class is added */
    }
    
    /* Adjust header for iOS full screen */
    #chatbot-popup-container #openai-chatbot-header {
        height: 56px !important;
        padding: 0 16px !important;
        border-radius: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Add a close button for iOS */
    #chatbot-popup-container #openai-chatbot-close {
        position: absolute !important;
        right: 16px !important;
        top: 18px !important; /* Fixed position from top */
        cursor: pointer !important;
        z-index: 10000 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: white !important;
        background-color: transparent !important; /* Remove background */
        border-radius: 0 !important; /* Remove circular shape */
        padding: 0 !important; /* Remove padding */
        box-shadow: none !important; /* Remove shadow */
        width: auto !important; /* Auto width */
        height: auto !important; /* Auto height */
    }
    
    #chatbot-popup-container #openai-chatbot-close svg {
        width: 16px;
        height: 16px;
        color: white;
        stroke-width: 2.5;
    }
}

/* Adjust existing chatbot container for popup */
#openai-chatbot-container {
    border: none;
    padding: 0; /* Remove padding as it's on the popup container */
    max-width: none; /* Remove max-width */
    margin: 0; /* Remove margin */
    font-family: 'Arial', sans-serif;
    background-color: transparent; /* Make background transparent */
    border-radius: 0; /* Remove border-radius */
    box-shadow: none; /* Remove box-shadow */
    display: flex;
    flex-direction: column;
    height: 100%; /* Fill the popup container height */
    overflow: hidden; /* Prevent overflow */
}

/* Chatbot header styling */
#openai-chatbot-header {
    height: 56px; /* Fixed height for header */
    padding: 0 16px; /* Horizontal padding only */
    font-size: 18px;
    color: white;
    font-weight: 600;
    text-align: center;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center; /* Vertical centering */
    justify-content: center; /* Horizontal centering */
    position: relative;
}

/* Close button styling for all devices */
#openai-chatbot-close {
    position: absolute !important;
    right: 16px !important;
    top: 18px !important; /* Fixed position from top */
    cursor: pointer !important;
    z-index: 10000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    background-color: transparent !important; /* Remove background */
    border-radius: 0 !important; /* Remove circular shape */
    padding: 0 !important; /* Remove padding */
    box-shadow: none !important; /* Remove shadow */
    width: auto !important; /* Auto width */
    height: auto !important; /* Auto height */
}

#openai-chatbot-close svg {
    width: 16px;
    height: 16px;
    color: white;
    stroke-width: 2.5;
}

/* Expand icon styling */
#openai-chatbot-expand {
    position: absolute;
    left: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: transform 0.2s ease;
}

#openai-chatbot-expand:hover {
    transform: scale(1.1);
}

/* Expanded chat window styles */
#chatbot-popup-container.expanded {
    width: 1000px; /* Double the initial width (500px) */
    height: 1600px !important; /* Double the initial height (800px) */
}

/* When expanded, adjust the messages container height */
#chatbot-popup-container.expanded #openai-chatbot-messages {
    max-height: 1450px !important; /* Increased fixed height for messages area when expanded */
}

/* Media query for mobile devices */
@media (max-width: 768px) {
    /* Full screen styling for mobile devices */
    #chatbot-popup-container {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important; /* Full width on mobile */
        height: 100% !important; /* Full height on mobile */
        max-width: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        z-index: 999999 !important;
    }
    
    /* Ensure header is properly positioned in fullscreen mode */
    #chatbot-popup-container #openai-chatbot-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 10001 !important;
        border-radius: 0 !important;
    }
    
    /* Ensure messages container takes available space */
    #chatbot-popup-container #openai-chatbot-messages {
        flex: 1 !important;
        height: auto !important;
        max-height: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Ensure input area remains accessible on mobile */
    #openai-chatbot-input-area {
        padding-bottom: env(safe-area-inset-bottom, 10px); /* Add safe area for notched phones */
    }
    
    /* Ensure input area is properly positioned in fullscreen mode */
    #chatbot-popup-container #openai-chatbot-input-area {
        position: sticky !important;
        bottom: 0 !important;
        margin: 10px !important;
        z-index: 10001 !important;
    }
    
    /* Hide expand button on mobile */
    #openai-chatbot-expand {
        display: none !important;
    }
}

#openai-chatbot-messages {
    height: auto; /* Let the content determine the height */
    overflow-y: auto; /* Enable vertical scrolling */
    border: none;
    margin-bottom: 16px;
    padding: 10px;
    background-color: #fff;
    scrollbar-width: thin;
    scrollbar-color: #e0e0e0 transparent;
    flex-grow: 1; /* Allow messages to take available space */
    max-height: 650px !important; /* Fixed large height for messages area */
    display: flex;
    flex-direction: column;
    position: relative; /* Establish positioning context */
}

/* Ensure each message is properly contained within the scrollable area */
#openai-chatbot-messages > div {
    width: 100%; /* Ensure messages take appropriate width */
    box-sizing: border-box; /* Include padding in width calculation */
}

#openai-chatbot-messages::-webkit-scrollbar {
    width: 6px;
}

#openai-chatbot-messages::-webkit-scrollbar-track {
    background: transparent;
}

#openai-chatbot-messages::-webkit-scrollbar-thumb {
    background-color: #e0e0e0;
    border-radius: 10px;
}

.user-message,
.assistant-message {
    margin-bottom: 12px;
    padding: 12px 16px;
    border-radius: 18px;
    line-height: 1.6; /* Increased line height for better readability */
    max-width: 85%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    word-wrap: break-word;
    font-size: 13px; /* Smaller font size for chat messages */
    font-weight: 500; /* Slightly bolder text for better readability */
    letter-spacing: 0.01em; /* Slightly increased letter spacing */
    text-shadow: 0 0.1px 0 rgba(0, 0, 0, 0.1); /* Subtle text shadow for better readability */
}

.user-message {
    background-color: #f0f7ff;
    color: #1a2533; /* Darker text color for better contrast */
    margin-left: auto;
    border-bottom-right-radius: 4px;
}

.assistant-message {
    background-color: #f7f7f9;
    color: #1a2533; /* Darker text color for better contrast */
    margin-right: auto;
    border-bottom-left-radius: 4px;
}

.user-message strong,
.assistant-message strong {
    display: block;
    font-size: 0.8em;
    margin-bottom: 4px;
    color: #7f8c8d;
    font-weight: 500;
}

/* Typing Indicator */
.typing-indicator {
    background-color: #f7f7f9;
    padding: 10px 16px;
    border-radius: 18px;
    border-bottom-left-radius: 4px;
    margin-right: auto;
    margin-bottom: 12px;
    max-width: 85%;
    display: inline-flex;
    align-items: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.typing-indicator strong {
    display: block;
    font-size: 0.8em;
    margin-right: 8px;
    color: #7f8c8d;
    font-weight: 500;
}

.typing-indicator .dots {
    display: inline-flex;
}

.typing-indicator .dot {
    width: 8px;
    height: 8px;
    background-color: #95a5a6;
    border-radius: 50%;
    margin: 0 2px;
    opacity: 0.6;
    animation: typingAnimation 1.4s infinite ease-in-out;
}

.typing-indicator .dot:nth-child(1) {
    animation-delay: 0s;
}

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

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

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

#openai-chatbot-input-area {
    display: flex;
    border: 1px solid #eaeaea;
    border-radius: 24px;
    overflow: hidden;
    padding: 4px;
    background-color: #f9f9fb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) inset;
    margin: 0 10px 10px 10px; /* Add some margin around the input area */
    position: relative; /* Ensure proper positioning context */
    min-height: 48px; /* Minimum height for the input area */
}

#openai-chatbot-input {
    flex-grow: 1;
    padding: 12px 16px;
    padding-right: 50px; /* Make space for the send button */
    border: none;
    background: transparent;
    font-size: 16px; /* Larger font size to prevent iOS zoom */
    color: #1a2533; /* Darker text color for better contrast */
    outline: none;
    font-weight: 500; /* Slightly bolder text for better readability */
    letter-spacing: 0.01em; /* Slightly increased letter spacing */
    text-shadow: 0 0.1px 0 rgba(0, 0, 0, 0.1); /* Subtle text shadow for better readability */
    width: calc(100% - 50px); /* Ensure it doesn't overflow when container is small */
    -webkit-appearance: none; /* Remove iOS styling */
    border-radius: 0; /* Remove iOS styling */
}

#openai-chatbot-input::placeholder {
    color: #95a5a6;
}

#openai-chatbot-send {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    margin: 4px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    position: absolute; /* Position absolutely */
    right: 8px; /* Position on the right side */
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Adjust for perfect centering */
    height: 36px; /* Fixed height */
    width: 36px; /* Fixed width */
    border-radius: 50%; /* Round button */
    z-index: 5; /* Ensure it's above other elements */
}

#openai-chatbot-send:hover {
    background-color: rgba(0, 0, 0, 0.05); /* Subtle background on hover */
    transform: translateY(-50%) scale(1.1); /* Scale up slightly */
}

#openai-chatbot-send:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: translateY(-50%); /* No scale effect when disabled */
}

/* Make sure SVG is visible */
#openai-chatbot-send svg {
    width: 20px;
    height: 20px;
    display: block; /* Ensure it's shown as block */
}

/* Specific adjustment for expanded mode */
#chatbot-popup-container.expanded #openai-chatbot-send {
    right: 8px; /* Maintain right positioning */
}

/* For iOS Safari - ensure button is visible and tappable */
@supports (-webkit-touch-callout: none) {
    #openai-chatbot-send {
        padding: 8px; /* Standard padding */
        right: 8px; /* Standard right position */
        width: 36px; /* Fixed width */
        height: 36px; /* Fixed height */
        background-color: rgba(0, 128, 128, 0.1); /* Very subtle teal background */
        z-index: 10; /* Higher z-index to ensure it's above other elements */
    }
    
    /* Make sure SVG is visible on iOS */
    #openai-chatbot-send svg {
        width: 24px;
        height: 24px;
        display: block;
        opacity: 1 !important; /* Force opacity */
        visibility: visible !important; /* Force visibility */
    }
}

/* For very small mobile screens */
@media (max-width: 320px) {
    #openai-chatbot-input-area {
        padding: 2px;
    }
    #openai-chatbot-input {
        padding: 10px 45px 10px 10px; /* Further reduced padding */
    }
}

/* Additional iOS fixes */
.ios-fix {
    -webkit-transform: translate3d(0,0,0); /* Force hardware acceleration */
    transform: translate3d(0,0,0);
    -webkit-backface-visibility: hidden; /* Prevent flickering */
    backface-visibility: hidden;
    -webkit-perspective: 1000; /* Improve performance */
    perspective: 1000;
    will-change: transform, opacity; /* Hint to browser for optimization */
}

/* Ensure iOS popup is fully visible */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .ios-fix {
        max-height: 70vh !important; /* Force viewport-based height */
        height: auto !important; /* Allow content to determine height */
        min-height: 300px; /* Ensure minimum height */
    }
}

#openai-chatbot-status {
    font-size: 0.8em;
    margin-top: 8px;
    color: #95a5a6;
    min-height: 1.2em;
    text-align: center;
    font-style: italic;
    margin-bottom: 10px; /* Add some margin below status */
}