/* Chat Styles */
#inquiry-history {
    scrollbar-width: thin;
    scrollbar-color: #9caf88 #f5f1e8;
}

#inquiry-history::-webkit-scrollbar {
    width: 8px;
}

#inquiry-history::-webkit-scrollbar-track {
    background: #f5f1e8;
    border-radius: 4px;
}

#inquiry-history::-webkit-scrollbar-thumb {
    background: #9caf88;
    border-radius: 4px;
}

#inquiry-history::-webkit-scrollbar-thumb:hover {
    background: #8ba077;
}

#chat-messages {
    scrollbar-width: thin;
    scrollbar-color: #9caf88 #f5f1e8;
}

#chat-messages::-webkit-scrollbar {
    width: 8px;
}

#chat-messages::-webkit-scrollbar-track {
    background: #f5f1e8;
    border-radius: 4px;
}

#chat-messages::-webkit-scrollbar-thumb {
    background: #9caf88;
    border-radius: 4px;
}

#chat-messages::-webkit-scrollbar-thumb:hover {
    background: #8ba077;
}

/* Responsive Navigation Styles */
/* Prevent horizontal scroll on mobile */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

* {
    box-sizing: border-box;
}

/* Navigation responsive fixes */
nav {
    width: 100%;
    max-width: 100vw;
}

/* Mobile menu styles - integrated with ResponsiveNav component */
#mobile-menu {
    transition: all 0.3s ease-in-out;
    animation: slideDown 0.3s ease-out;
}

#mobile-menu.hidden {
    display: none !important;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Language selector mobile fixes */
@media (max-width: 768px) {
    .language-selector {
        width: 100%;
    }
    
    .language-selector button {
        width: 100%;
        justify-content: space-between;
    }
    
    .language-selector #language-menu {
        position: absolute;
        left: 0;
        right: 0;
        width: 100%;
        margin-top: 0.5rem;
    }
    
    /* Better text truncation on mobile */
    .truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    /* Responsive text sizes */
    .text-responsive {
        font-size: clamp(0.875rem, 2.5vw, 1rem);
    }
}

/* Additional responsive fixes */
@media (max-width: 640px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Make sure images don't overflow */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Fix hero section padding on mobile */
    section {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Ensure buttons are full width on mobile when stacked */
    .flex-col button,
    .flex-col a {
        width: 100%;
    }
}

/* Fix for chat containers on mobile */
@media (max-width: 768px) {
    #chat-messages,
    #inquiry-history {
        max-height: 400px !important;
        padding: 0.75rem !important;
    }
    
    /* Better spacing for chat messages on mobile */
    .space-y-4 > * + * {
        margin-top: 0.75rem;
    }
    
    /* Make sure input fields don't overflow */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    textarea {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
    
    /* Fix table overflow on mobile */
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
    }
    
    table {
        min-width: 100%;
        font-size: 0.875rem;
    }
    
    th, td {
        padding: 0.5rem !important;
        font-size: 0.75rem;
    }
}

/* Mobile-specific responsive improvements */
@media (max-width: 640px) {
    /* Container padding on very small screens */
    .container {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    /* Responsive card padding */
    .bg-white.rounded-lg {
        padding: 1rem !important;
    }
    
    /* Button sizes on mobile */
    button,
    .btn,
    a.btn {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
    
    /* Make headings responsive */
    h1 {
        font-size: 1.5rem !important;
    }
    
    h2 {
        font-size: 1.25rem !important;
    }
    
    h3 {
        font-size: 1.1rem !important;
    }
    
    /* Responsive flexbox on mobile - stack items */
    .flex.justify-between {
        flex-direction: column;
        gap: 0.75rem;
        align-items: stretch !important;
    }
    
    /* Fix for session title */
    #session-title {
        font-size: 1.25rem !important;
        line-height: 1.5;
    }
    
    /* Message input area responsive */
    #chat-form textarea {
        min-height: 80px;
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
    
    /* Dashboard cards responsive */
    .grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }
    
    /* Role toggle buttons on mobile */
    .role-btn {
        font-size: 0.75rem !important;
        padding: 0.5rem 0.75rem !important;
    }
    
    /* Better spacing for mobile */
    .space-x-4 {
        gap: 0.5rem !important;
    }
    
    /* Avatar sizes on mobile */
    .rounded-full {
        flex-shrink: 0;
    }
    
    /* Prevent text from breaking layout */
    .truncate {
        max-width: 100%;
    }
}

/* Landscape mobile fixes */
@media (max-width: 896px) and (orientation: landscape) {
    nav {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
    
    #chat-messages,
    #inquiry-history {
        max-height: 250px !important;
    }
}

/* Very large screens */
@media (min-width: 1536px) {
    .container {
        max-width: 1400px;
    }
}