/* Responsive Styles */
@media (min-width: 768px) {
    .content-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 1200px) {
    .dashboard-grid {
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    }
}

@media (max-width: 992px) {
    .app-container {
        flex-direction: column;
    }
    .sidebar {
        position: fixed;
        top: 0;
        right: -280px; /* Hide sidebar off-screen */
        height: 100vh;
        z-index: 1100;
        transition: right 0.3s ease-in-out;
        box-shadow: 0 0 30px rgba(0,0,0,0.5);
    }
    .sidebar.mobile-open {
        right: 0;
    }
    .content-wrapper {
        width: 100%;
    }
    .main-content {
        padding: 1.5rem;
    }
    .main-top-header {
        position: sticky;
        top: 0;
        z-index: 100;
    }
     .hamburger-menu {
        display: block;
    }
    .mobile-menu-overlay.mobile-open {
        display: block;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-chart-card {
        grid-column: span 1;
    }

    /* Make charts scrollable on mobile */
    .dashboard-chart-container, .chart-wrapper {
        overflow-x: auto;
    }

    .chart-wrapper.line-chart {
        aspect-ratio: 2 / 1; /* Make chart taller on mobile for better readability */
    }

    /* Hide scrollbar but keep functionality */
    .dashboard-chart-container::-webkit-scrollbar, .chart-wrapper::-webkit-scrollbar {
        height: 6px;
    }
    .dashboard-chart-container::-webkit-scrollbar-track, .chart-wrapper::-webkit-scrollbar-track {
        background: transparent;
    }
    .dashboard-chart-container::-webkit-scrollbar-thumb, .chart-wrapper::-webkit-scrollbar-thumb {
        background: var(--primary);
        border-radius: 3px;
    }

    .chart-wrapper svg {
        min-width: 600px; /* Ensure chart is readable */
    }

    .bar-chart-container {
        min-width: 600px;
    }

    .view-header {
        flex-direction: column;
        align-items: stretch;
    }
    .view-header .view-controls {
        flex-direction: column;
        width: 100%;
        align-items: stretch;
        order: 2;
    }
    .view-header > .modal-btn {
        order: 1;
    }
}

@media (max-width: 768px) {
    .main-top-header h2 {
        font-size: 1.2rem;
    }
    .chatbot-list {
        grid-template-columns: 1fr; /* Single column for bots on mobile */
    }
    .modal-content {
        width: 95%;
        padding: 1.5rem 1rem; /* Optimized vertical padding */
        max-height: 95vh;
    }
    .modal-tabs {
        padding-bottom: 0.5rem;
    }
    .modal-tab {
        padding: 0.75rem 1rem;
    }
    .modal-footer {
        flex-direction: row; /* Display buttons side-by-side */
        gap: 1rem; /* Increase gap between buttons */
    }
    .modal-btn {
        flex: 1; /* Make buttons share the width */
    }
    
    /* Fix: Reset negative margin on modal body for mobile to prevent it overlapping the footer */
    .modal-body {
        margin-right: 0;
        overflow-x: hidden; /* Also hide horizontal overflow to ensure it doesn't cover the footer */
        min-height: 0; /* Fix for flexbox overflow issue where the body doesn't shrink to allow scrolling */
    }

    .settings-form-grid, .content-grid {
        grid-template-columns: 1fr;
    }
    .settings-form-grid .span-2 {
        grid-column: span 1;
    }
    
    .api-key-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .api-key-grid .form-group {
        margin-bottom: 0.5rem;
    }
    .api-key-grid .form-group:nth-child(2n) {
        margin-bottom: 1.5rem;
    }
    
    /* Edit Modal vertical spacing fixes */
    .modal-body .form-group {
        margin-bottom: 1rem;
    }
    .modal-body .settings-section-header {
        font-size: 1.1rem;
        margin-top: 1.5rem;
        margin-bottom: 0.75rem;
    }

    /* Chat Archive mobile view */
    .chat-archive-view {
        flex-direction: column;
        height: 100%;
    }

    /* By default on mobile, only show the session list */
    .chat-archive-view .sessions-list-column {
        width: 100%;
        height: 100%;
        border-right: none;
        display: flex; /* keep flex for inner layout */
        flex-direction: column;
    }
    .chat-archive-view .messages-view-column {
        display: none;
    }
    
    /* Mobile full-screen chat modal */
    .mobile-chat-modal-overlay {
        display: flex;
        flex-direction: column;
        position: fixed; /* Take over the screen */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--background-dark);
        z-index: 1001; /* Sit on top of the edit modal */
        animation: mobile-modal-fade-in 0.3s ease-out;
    }

    @keyframes mobile-modal-fade-in {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .mobile-chat-modal-overlay .message-view-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 1.5rem;
        border-bottom: 1px solid var(--primary);
        flex-shrink: 0;
    }
    
    .mobile-chat-modal-overlay .header-content {
        flex-grow: 1;
        /* To align text correctly in RTL */
        text-align: right; 
    }

    .mobile-chat-modal-overlay .close-btn {
        position: static; /* Override default modal positioning */
        transform: none;
        padding: 0.5rem;
        margin-left: 1rem; /* Space from title */
    }

    .mobile-chat-modal-overlay .messages-container {
        flex-grow: 1;
        overflow-y: auto;
    }
}

@media (max-width: 480px) {
    .main-content {
        padding: 1rem;
    }
    .login-main {
        padding: 1rem;
    }
    .login-box {
        padding: 2rem 1.5rem;
        width: 100%;
        border: none;
        box-shadow: none;
        background-color: transparent;
    }
    .dashboard-grid {
        gap: 1rem;
    }
    .dashboard-card {
        padding: 1rem;
    }
    .stat-value {
        font-size: 2rem;
    }
    .payment-info-box {
        padding: 1rem;
    }
    .card-number-container {
        flex-direction: column;
        gap: 0.75rem;
        padding: 1rem;
    }
    .card-number-display {
        font-size: 1.2rem;
        letter-spacing: 2px;
        white-space: normal;
        line-height: 1.5;
    }
    .copy-card-number-btn {
        width: 100%;
        padding: 0.75rem;
        font-size: 1rem;
    }
    /* Make Edit Modal full-screen on small devices */
    .modal-content.wide {
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        border: none;
    }
}