/* 
========================================
GLOBAL IMPORTS & DEFAULTS
======================================== */

/* Import Gothic Font */
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&display=swap');

/* Chat Container - Ensure it is styled correctly */
#chat-container {
    display: none !important; /* Initially hidden completely */
    position: fixed !important;
    bottom: 20px !important;
    left: 20px !important;
    width: 350px !important;
    height: 450px !important;
    background-color: #1a1a1a !important;
    border-radius: 10px !important;
    box-shadow: 0px 0px 10px rgba(255, 0, 0, 0.6) !important;
    color: white !important;
    z-index: 9999 !important;
    overflow: hidden !important;
    flex-direction: column !important;
    pointer-events: auto !important;
}

#chat-container.visible {
    display: flex !important; /* Explicitly make visible only when needed */
}


/* Chat Header */
#chat-container #chat-header {
    background: #7b0202 !important;
    padding: 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Avatar Image */
#chat-container .avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
}

/* Chat Title (Sophie’s Name) */
#chat-container h2 {
    font-size: 1.2em !important;
    font-family: 'Arial', sans-serif !important;
}

/* Minimize Button */
#chat-container .minimize-btn {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    background-color: #333 !important;
    border: none !important;
    color: white !important;
    font-size: 20px !important;
    cursor: pointer !important;
    padding: 5px 10px !important;
    border-radius: 50% !important;
}

/* ✅ Fix for Chat Window (Proper Auto-Scrolling) */
#chat-container #chat-window {
    flex-grow: 1 !important; /* Ensures messages take up full space */
    display: flex !important;
    flex-direction: column !important;
    padding: 10px !important;
    overflow-y: auto !important; /* Enables scrolling */
    background: #111 !important;
    font-family: 'Arial', sans-serif !important;
    scroll-behavior: smooth !important; /* Enables smooth scrolling */
}

/* ✅ User Messages (Right-aligned) */
#chat-container .user-message {
    margin-left: 120px !important;
    background-color: #7b0202 !important;
    text-align: left !important;
    border-top-right-radius: 0 !important;
    font-family: 'Arial', sans-serif !important;
}

/* ✅ Sophie Messages (Left-aligned) */
#chat-container .sophie-message {
    align-self: flex-start !important;
    background-color: #333 !important;
    text-align: left !important;
    border-top-left-radius: 0 !important;
    font-family: 'Arial', sans-serif !important;
}

/* Typing Indicator Dots */
#chat-container .message .typing {
    display: flex !important;
    align-items: center !important;
    padding: 5px !important;
    margin-top: 10px !important;
}

/* Dot Styling */
#chat-container .message .dot {
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    margin: 0 3px !important;
    background: white !important;
    border-radius: 50% !important;
    animation: fade 1.4s infinite;
}

/* Staggered animation delays */
#chat-container .message .dot:nth-child(1) {
    animation-delay: 0s !important;
}
#chat-container .message .dot:nth-child(2) {
    animation-delay: 0.3s !important;
}
#chat-container .message .dot:nth-child(3) {
    animation-delay: 0.6s !important;
}

/* Keyframes for fade animation */
@keyframes fade {
    0%, 80%, 100% { opacity: 0.3; }
    40% { opacity: 1; }
}

/* ✅ "Delivered" and "Seen" indicators */
#chat-container .message .seen {
    font-size: 0.8em !important;
    color: #888 !important;
    margin-top: 4px !important;
    display: block !important;
    text-align: right !important;
    font-family: 'Arial', sans-serif !important;
}

/* ✅ Fix Input Field (So It Doesn't Break Chat Layout) */
#chat-container #input-container {
    display: flex !important;
    padding: 10px !important;
    background: #222 !important;
    border-top: 2px solid #7b0202 !important;
}

#chat-container #user-input {
    flex-grow: 1 !important;
    padding: 10px !important;
    border: none !important;
    background: #333 !important;
    color: white !important;
    border-radius: 5px !important;
    font-family: 'Arial', sans-serif !important;
}

#chat-container #send-btn {
    padding: 10px !important;
    background: #7b0202 !important;
    border: none !important;
    color: white !important;
    cursor: pointer !important;
    border-radius: 5px !important;
    margin-left: 5px !important;
}

#chat-container #send-btn:hover {
    background: #a30000 !important;
}

/* ✅ Shared message styles */
.message {
    margin: 5px !important;
    position: relative !important;
    color: #fff !important;
    padding: 10px !important;
    border-radius: 8px !important;
    max-width: 70% !important;
    word-wrap: break-word !important;
}

/* ✅ Fix for Long Messages Overflow */
.message span {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    display: block !important;
}

/* ✅ Open chat button stylings */
#open-chat-btn {
    font-family: 'Cinzel Decorative', serif !important;
    flex: 1 1 calc(50% - 10px);
    padding: 12px;
    border: 1px solid #8b0000;
    border-radius: 8px;
    background-color: #9c2222;
    color: #ffffff;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    font-family: 'Cinzel', serif;
    display: block; /* Ensures button is in the document flow */
    margin: 15px auto; /* Centers button and adds spacing below */
    display: none !important; /* Fully removes the button */
}

/* 🛠 Fix: Ensure chat button is hidden properly but still accessible */
#open-chat-btn {
    display: block !important;
    opacity: 1 !important;
    transition: opacity 0.3s ease-in-out;
}

#open-chat-btn.hidden {
    opacity: 0;
    pointer-events: none; /* Prevent accidental interactions */
}

/* 🛠 Fix: Improve mobile touch recognition */
.expandable-sections details summary, 
.spoiler-sections details summary {
    touch-action: manipulation !important;
    cursor: pointer !important;
    user-select: none !important;
}



#open-chat-btn:hover {
background-color: #a30000;
    border-color: #ffc400;
}

/* ✅ Mobile-Friendly Tweaks */
@media (max-width: 600px) {
    /* #chat-container {
        width: 95% !important;
        height: 500px !important;
        left: 2.5% !important;
    } */
    #chat-container #chat-window {
        height: auto;
    }
}

/* For screens 480px wide and below */
@media only screen and (max-width: 480px) {
    #chat-container {
        width: 100%;
        max-height: 90vh;
        bottom: 0;
        right: 0;
        border-radius: 0;
    }

}