/* public/css/chat.css */

/* Basic Reset and Font */
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: transparent;
    padding-left:0;
    padding-right:0;
}

html, body {
    overflow-x: hidden; /* Fixed: Changed from visible to hidden */
}

/* --- Orb Popup Styles --- */
#orb-popup {
    position: fixed;
    bottom: 8rem; /* Position it above the orb */
    right: 4.2rem;
    background-color: #ffffff;
    color: rgb(0, 0, 0);
    padding: 0.75rem 1.25rem;
    border-radius: 0.9rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    font-size: 1rem;
    font-weight: 600;
    z-index: 999;
    max-width: 200px; /* Added: Prevent overflow on small screens */
    word-wrap: break-word; /* Added: Better text wrapping */

    /* Initial hidden state for animation */
    opacity: 0;
    transform: translateY(3px);
    pointer-events: none;
    transition: opacity 0.6s ease-in-out, transform 3s ease-in-out;
}

/* Creates the little arrow pointing down to the orb */
#orb-popup::after {
    content: '';
    position: absolute;
    bottom: -8px; /* Position it at the bottom of the popup */
    right: 2.8rem; /* Align it with the center of the orb */
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid hsl(0, 0%, 100%);
}

/* This class will be added by JavaScript to show the popup */
#orb-popup.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- ORB REPLACES FLOATING BUTTON --- */

/* Container for the orb, positioned to float */
#orb-container {
    position: fixed;
    bottom: 1.5rem;
    right: 4rem;
    width: 6rem; /* Adjusted for better visibility */
    height: 6rem;
    cursor: pointer;
    z-index: 1000;
    transition: opacity 0.3s ease, transform 0.2s ease-in-out;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25));
}

/* Hover effect to match the old button's behavior */
#orb-container:hover {
    transform: scale(1.1);
}

/* Class to hide the orb when the chat is open */
#orb-container.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Ensure the Three.js canvas fills the container */
#orb-container canvas {
    width: 100% !important;
    height: 100% !important;
}

/* --- END OF ORB STYLES --- */

/* Chat Container */
.chat-container {
    position: fixed;
    bottom: 1.5rem;
    right: 5rem;
    width: 95%;
    max-width: 700px;
    height: 75vh;
    max-height: 600px;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    z-index: 1000;
    display: none; /* Initially hidden */
}

/* Chat Header */
.chat-header {
    background-color: #ffffff;
    padding: 1.25rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e2e8f0;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    min-height: 60px; /* Added: Consistent header height */
}

.header-content {
    display: flex;
    align-items: center;
    flex: 1; /* Added: Take available space */
    min-width: 0; /* Added: Allow shrinking */
}

.avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    border: 2px solid #e5e7eb;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.75rem;
    flex-shrink: 0; /* Added: Prevent avatar from shrinking */
}

.avatar img {
    width: 100%;
    height: 100%; /* Fixed: Changed from 80% to 100% */
    object-fit: cover;
}

.header-content2 {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: flex-start; /* Left align both items */
    justify-content: flex-start; /* Align to top */
    min-width: 0; /* Added: Allow text to wrap/truncate */
    flex: 1; /* Added: Take available space */
}

.chatbot-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: #0a69e7;
    margin: 0;
    line-height: 1.2; /* Better line spacing */
    overflow: hidden; /* Added: Prevent overflow */
    text-overflow: ellipsis; /* Added: Show ... when text is too long */
    white-space: nowrap; /* Added: Keep text on one line */
    max-width: 100%; /* Added: Constrain width */
}

.status {
    font-size: 0.875rem;
    color: #4e5055;
    font-weight: 700;
    margin: 0;
    margin-top: 0.25rem; /* Small gap between name and status */
    line-height: 1.2; /* Consistent line spacing */
    overflow: hidden; /* Added: Prevent overflow */
    text-overflow: ellipsis; /* Added: Show ... when text is too long */
    white-space: nowrap; /* Added: Keep text on one line */
    max-width: 100%; /* Added: Constrain width */
}

.close-btn {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    transition: color 0.2s ease-in-out, transform 0.2s ease-in-out; /* Added transform transition */
    flex-shrink: 0; /* Added: Prevent button from shrinking */
    padding: 0.5rem; /* Added: Better touch target */
    margin: -0.5rem; /* Added: Offset the padding */
}

.close-btn:hover {
    color: #4b5563;
    transform: scale(1.1);
}

.close-btn svg {
    width: 1.5rem;
    height: 1.5rem;
}

/* Message List */
.message-list {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
    background-color: #f9fafb;
    -webkit-overflow-scrolling: touch; /* Added: Smooth scrolling on iOS */
}

.message-row {
    display: flex;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.justify-end {
    justify-content: flex-end;
}

.justify-start {
    justify-content: flex-start;
}

.message {
    max-width: 80%;
    padding: 0.875rem 1rem;
    border-radius: 1rem;
    word-wrap: break-word; /* Added: Better text wrapping */
    overflow-wrap: break-word; /* Added: Alternative property for better support */
}

.message-text {
    margin: 0;
    font-size: 0.875rem;
    word-wrap: break-word;
    line-height: 1.4; /* Added: Better readability */
}

.user-message {
    background-color: #0a6ae7c3;
    color: #ffffff;
    border-bottom-right-radius: 0.5rem;
}

.bot-message {
    background-color: #e5e7eb;
    color: #04387cd6;
    border-bottom-left-radius: 0.5rem;
}

/* Typing Indicator */
.typing-dots {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.typing-dots span {
    width: 0.5rem;
    height: 0.5rem;
    background-color: #9ca3af;
    border-radius: 9999px;
    animation: pulse 1.4s infinite ease-in-out both;
}

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

@keyframes pulse {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1.0); }
}

/* Chat Footer */
.chat-footer {
    background-color: #ffffff;
    padding: 1rem;
    border-top: 1px solid #e2e8f0;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

.input-container {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Added: Better spacing */
}

.message-input {
    flex: 1;
    padding: 0.75rem 1rem; /* Increased padding for better touch targets */
    background-color: #f3f4f6;
    border: 1px solid transparent;
    border-radius: 9999px;
    outline: none;
    transition: all 0.2s ease-in-out;
    font-size: 0.875rem; /* Added: Consistent font size */
    min-width: 0; /* Added: Allow input to shrink */
}

.message-input::placeholder {
    font-size: 0.875rem; /* Larger placeholder text */
    color: #9ca3af;
    line-height: 1.2; /* Prevent text cutoff */
}

.message-input:focus {
    box-shadow: 0 0 0 2px #0976b0;
    background-color: #ffffff; /* Added: Better focus state */
}

.send-button {
    background-color: #0a69e7;
    color: #ffffff;
    padding: 0.75rem;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.2s ease-in-out; /* Simplified transition */
    flex-shrink: 0; /* Added: Prevent button from shrinking */
    display: flex; /* Added: Better icon centering */
    align-items: center;
    justify-content: center;
}

.send-button:hover {
    background-color: white; /* Added: Hover state */
    color: #0a69e7;
    transform: scale(1.05);
}

.send-button:active {
    background-color: #062245;
    transform: scale(0.95); /* Fixed: Scale down on active */
}

.send-button svg {
    width: 1.5rem;
    height: 1.3rem;
}

/* Enhanced Media Queries for Better Responsiveness */

/* Large tablets and small desktops */
@media (max-width: 1024px) {
    .chat-container {
        right: 2rem;
        width: calc(100% - 4rem);
        max-width: 600px;
    }
    
    #orb-container {
        right: 2rem;
    }
    
    #orb-popup {
        right: 2.2rem;
    }
}

/* Tablets */
@media (max-width: 768px) {
    .chat-container {
        right: 1rem;
        width: calc(100% - 2rem);
        height: 80vh;
        max-height: 500px;
    }
    
    .chat-header {
        padding: 1rem 0.75rem;
    }
    
    .avatar {
        width: 2.5rem;
        height: 2.5rem;
        margin-right: 0.5rem;
    }
    
    .chatbot-name {
        font-size: 1rem;
    }
    
    .status {
        font-size: 0.8rem;
    }
    
    .message-list {
        padding: 0.75rem;
    }
    
    .message {
        max-width: 85%;
        padding: 0.75rem;
    }
    
    .chat-footer {
        padding: 0.75rem;
    }
    
    #orb-container {
        right: 1.5rem;
        width: 5.5rem;
        height: 5.5rem;
    }
    
    #orb-popup {
        right: 1.7rem;
        bottom: 7.5rem;
        font-size: 0.9rem;
        padding: 0.6rem 1rem;
    }
}

/* Mobile phones */
@media (max-width: 480px) {
    .chat-container {
        width: 100%;
        height: 100%;
        max-height: 100vh;
        bottom: 0;
        right: 0;
        left: 0; /* Added: Ensure full width */
        border-radius: 0;
        border: none; /* Added: Remove border on mobile */
    }
    
    .chat-header {
        padding: 1rem;
        border-radius: 0; /* Added: Remove border radius on mobile */
    }
    
    .avatar {
        width: 2.25rem;
        height: 2.25rem;
    }
    
    .chatbot-name {
        font-size: 0.95rem;
    }
    
    .status {
        font-size: 0.75rem;
    }
    
    .message-list {
        padding: 1rem 0.75rem;
    }
    
    .message {
        max-width: 90%;
        font-size: 0.85rem;
    }
    
    .chat-footer {
        padding: 1rem;
        border-radius: 0; /* Added: Remove border radius on mobile */
    }
    
    .message-input {
        padding: 0.75rem 1rem;
        font-size: 16px; /* Added: Prevent zoom on iOS */
    }
    
    .send-button {
        padding: 0.75rem;
    }

    /* Adjust orb position on mobile */
    #orb-container {
        bottom: 1rem;
        right: 1rem;
        width: 5rem;
        height: 5rem;
    }

    #orb-popup {
        bottom: 6.5rem; /* Reposition above the smaller orb */
        right: 1rem;
        font-size: 0.85rem; /* Slightly smaller text */
        padding: 0.5rem 0.75rem; /* Smaller padding */
        max-width: calc(100vw - 2rem); /* Added: Prevent overflow */
    }
    
    #orb-popup::after {
        right: 1.5rem; /* Added: Adjust arrow position */
    }
}

/* Very small screens */
@media (max-width: 320px) {
    .chat-header {
        padding: 0.75rem;
    }
    
    .avatar {
        width: 2rem;
        height: 2rem;
    }
    
    .chatbot-name {
        font-size: 0.9rem;
    }
    
    .status {
        font-size: 0.7rem;
    }
    
    .message-list {
        padding: 0.5rem;
    }
    
    .chat-footer {
        padding: 0.75rem;
    }
    
    #orb-container {
        width: 4.5rem;
        height: 4.5rem;
    }
    
    #orb-popup {
        font-size: 0.8rem;
        padding: 0.4rem 0.6rem;
        bottom: 6rem;
    }
}