/* =======================================================================
   RESPONSIVE DESIGN
   =======================================================================
   Media queries and responsive utilities for different screen sizes.
   ======================================================================= */

/* ============================================
   TABLET (768px and below)
   ============================================ */
@media (max-width: 768px) {
    /* Layout adjustments */
    .ai-page-layout {
        flex-direction: column;
        padding: 10px;
        gap: var(--spacing-md);
        height: auto;
        max-height: none;
    }
    
    /* Sidebar adjustments */
    .sidebar {
        width: 100%;
        height: auto;
        max-height: none;
        order: 1;
        border-radius: var(--radius-xl);
    }
    
    /* Chat main adjustments */
    .chat-main {
        width: 100%;
        min-height: 400px;
        order: 2;
        border-radius: var(--radius-xl);
    }
    
    /* Message bubbles */
    .message-bubble {
        max-width: 85%;
    }
    
    /* Modal/dialog adjustments */
    .modal-view,
    .document-upload-view,
    .case-settings-view,
    .document-settings-view,
    .new-document-editor-view,
    .delete-confirmation-view,
    .permanent-delete-confirmation-view,
    .restore-confirmation-view,
    .rename-document-view,
    .simple-delete-confirmation-view {
        width: 95%;
        max-width: 95%;
        margin: 10px auto;
        padding: 20px;
    }
    
    /* Form adjustments */
    .form-actions {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .form-actions .btn {
        width: 100%;
    }
    
    /* Button groups */
    .btn-group {
        flex-direction: column;
        width: 100%;
    }
    
    .btn-group .btn {
        border-radius: var(--radius-md);
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .btn-group .btn:last-child {
        border-bottom: none;
    }
}

/* ============================================
   MOBILE (480px and below)
   ============================================ */
@media (max-width: 480px) {
    /* Typography adjustments */
    .sidebar-section-header h2 {
        font-size: var(--font-size-lg);
    }
    
    .sidebar-item, .document-item {
        font-size: var(--font-size-sm);
        padding: var(--spacing-sm) 10px;
    }
    
    /* Chat adjustments */
    .chat-messages {
        padding: var(--spacing-sm);
    }
    
    .message-bubble {
        padding: 10px var(--spacing-md);
        max-width: 90%;
    }
    
    .chat-input-area {
        padding: 10px var(--spacing-md);
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .chat-input {
        width: 100%;
        margin-bottom: var(--spacing-sm);
    }
    
    .chat-send-button {
        width: 100%;
        border-radius: var(--radius-md);
    }
    
    /* Modal adjustments */
    .modal-view,
    .document-upload-view,
    .case-settings-view,
    .document-settings-view,
    .new-document-editor-view,
    .delete-confirmation-view,
    .permanent-delete-confirmation-view,
    .restore-confirmation-view,
    .rename-document-view,
    .simple-delete-confirmation-view {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: var(--spacing-md);
        border-radius: 0;
    }
    
    /* Metadata grid */
    .document-metadata {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
        padding: var(--spacing-md);
    }
    
    /* Toolbar adjustments */
    .rich-text-toolbar {
        padding: var(--spacing-xs);
        gap: 1px;
    }
    
    .toolbar-btn {
        min-width: 28px;
        height: 28px;
        padding: 4px 6px;
    }
    
    /* File upload adjustments */
    .custom-file-input-wrapper {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-sm);
    }
    
    .custom-file-input-wrapper .btn-primary {
        width: 100%;
        text-align: center;
    }
    
    /* Notification adjustments */
    #notification-container {
        top: 10px;
        width: 95%;
        max-width: none;
    }
    
    .notification {
        padding: 10px var(--spacing-md);
        font-size: var(--font-size-sm);
    }
}

/* ============================================
   LARGE SCREENS (1200px and above)
   ============================================ */
@media (min-width: 1200px) {
    /* Container adjustments */
    .ai-page-layout {
        max-width: 1400px;
        margin: 0 auto;
    }
    
    /* Sidebar adjustments */
    .sidebar {
        width: 360px;
    }
    
    /* Modal adjustments for larger screens */
    .modal-view,
    .document-upload-view,
    .case-settings-view,
    .document-settings-view,
    .new-document-editor-view,
    .delete-confirmation-view,
    .permanent-delete-confirmation-view,
    .restore-confirmation-view,
    .rename-document-view,
    .simple-delete-confirmation-view {
        width: 900px;
        max-width: 900px;
    }
}

/* ============================================
   EXTRA LARGE SCREENS (1600px and above)
   ============================================ */
@media (min-width: 1600px) {
    /* Container adjustments */
    .ai-page-layout {
        max-width: 1600px;
        padding: 20px;
        gap: 24px;
    }
    
    /* Sidebar adjustments */
    .sidebar {
        width: 400px;
    }
    
    /* Modal adjustments */
    .modal-view,
    .document-upload-view,
    .case-settings-view,
    .document-settings-view,
    .new-document-editor-view,
    .delete-confirmation-view,
    .permanent-delete-confirmation-view,
    .restore-confirmation-view,
    .rename-document-view,
    .simple-delete-confirmation-view {
        width: 1000px;
        max-width: 1000px;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    /* Hide interactive elements */
    .sidebar,
    .chat-input-area,
    .btn,
    .icon-button,
    .action-icon,
    .notification {
        display: none !important;
    }
    
    /* Optimize chat messages for print */
    .chat-main {
        box-shadow: none;
        border: 1px solid #ccc;
    }
    
    .message-bubble {
        max-width: 100%;
        break-inside: avoid;
    }
    
    /* Ensure good contrast for print */
    .message.assistant .message-bubble {
        border: 1px solid #ccc;
        background: #f9f9f9 !important;
        color: #000 !important;
    }
    
    .message.user .message-bubble {
        background: #e3e3e3 !important;
        color: #000 !important;
    }
}

/* ============================================
   HIGH CONTRAST MODE
   ============================================ */
@media (prefers-contrast: high) {
    /* Increase border visibility */
    .sidebar,
    .chat-main,
    .modal-view,
    .document-upload-view,
    .case-settings-view,
    .document-settings-view,
    .new-document-editor-view {
        border: 2px solid currentColor;
    }
    
    /* Increase button contrast */
    .btn {
        border: 2px solid currentColor;
    }
    
    /* Increase focus indicators */
    :focus-visible {
        outline: 3px solid currentColor;
        outline-offset: 2px;
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    /* Disable animations */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    /* Keep essential loading indicators but make them static */
    .loading-spinner {
        animation: none;
        border-top-color: var(--brand-accent-orange);
    }
    
    .thinking-dots::after {
        animation: none;
        content: '...';
    }
}