/* Mobile Responsive Overrides for Abboud App */

/* Mobile viewport optimizations */
@media (max-width: 768px) {
    
    /* Body optimizations */
    body {
        -webkit-text-size-adjust: 100%;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    
    /* Prevent body scroll when sidebar is open */
    body.sidebar-open {
        overflow: hidden;
    }
    
    /* Sidebar mobile behavior - hidden by default */
    .sidebar {
        position: fixed !important;
        top: var(--header-height) !important;
        right: 0 !important;
        width: 280px !important;
        height: calc(100vh - var(--header-height)) !important;
        border-right: 1px solid var(--border-color) !important;
        border-left: none !important;
        transform: translateX(100%) !important;
        transition: transform 0.3s ease !important;
        z-index: 1000 !important;
    }
    
    /* Show sidebar when open */
    body.sidebar-open .sidebar {
        transform: translateX(0) !important;
    }
    
    /* Sidebar overlay */
    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    
    body.sidebar-open .sidebar-overlay {
        opacity: 1;
        visibility: visible;
    }
    
    /* Main content adjustments */
    .main-content {
        width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        height: calc(100vh - var(--header-height)) !important;
        overflow: hidden !important;
    }
    
    /* Header mobile optimizations */
    .top-header {
        padding: 0 0.75rem !important;
    }
    
    .sidebar-toggle {
        display: block !important;
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 0.75rem !important;
        border-radius: var(--radius-md) !important;
        background: transparent !important;
        border: none !important;
        color: var(--text-secondary) !important;
        cursor: pointer;
        touch-action: manipulation;
    }
    
    .sidebar-toggle:hover {
        background: var(--bg-hover) !important;
        color: var(--text-primary) !important;
    }
    
    .app-title {
        display: block !important;
        flex: 1 !important;
        margin: 0 0.75rem !important;
    }
    
    .app-title span {
        font-size: 0.9rem !important;
        font-weight: 600 !important;
    }
    
    /* Chat area mobile optimizations */
    .chat-area {
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .chat-messages {
        padding: 1rem 0.75rem 2rem 0.75rem !important;
        padding-bottom: calc(2rem + env(safe-area-inset-bottom, 1rem)) !important;
    }
    
    /* Input area mobile optimizations */
    .input-area {
        padding: 0.75rem !important;
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 1rem)) !important;
        background: var(--bg-secondary) !important;
        border-top: 1px solid var(--border-color) !important;
        position: relative;
        z-index: 10;
    }
    
    .input-container {
        max-width: 100% !important;
        padding: 0 !important;
    }
    
    .input-wrapper {
        padding: 0.75rem 1rem !important;
        min-height: 52px !important;
    }
    
    /* Prevent iOS zoom on input focus */
    .message-input {
        font-size: 16px !important;
        min-height: 48px !important;
        touch-action: manipulation;
    }
    
    /* Touch-friendly send button */
    .send-button {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        touch-action: manipulation;
    }
    
    /* Message optimizations */
    .message.user-message,
    .message.assistant-message {
        padding-left: 12px !important;
        padding-right: 12px !important;
        margin-bottom: 1rem !important;
    }
    
    .user-message .message-content,
    .assistant-message .message-content {
        max-width: 85% !important;
    }
    
    .message-bubble {
        font-size: 0.875rem !important;
        padding: 0.75rem 1rem !important;
        line-height: 1.6 !important;
    }
    
    .message-avatar {
        width: 36px !important;
        height: 36px !important;
        flex-shrink: 0;
    }
    
    .assistant-avatar {
        width: 36px !important;
        height: 36px !important;
        flex-shrink: 0;
    }
    
    /* Sidebar elements touch-friendly */
    .new-chat-btn {
        min-height: 44px !important;
        padding: 0.75rem 1rem !important;
        touch-action: manipulation;
    }
    
    .user-profile-sidebar {
        min-height: 44px !important;
        padding: 0.75rem !important;
        touch-action: manipulation;
    }
    
    /* Error message mobile */
    .error-message {
        margin: 0.75rem !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem !important;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    
    .top-header {
        padding: 0 0.5rem !important;
    }
    
    .sidebar-toggle {
        min-width: 40px !important;
        min-height: 40px !important;
        padding: 0.5rem !important;
    }
    
    .app-title span {
        font-size: 0.8rem !important;
    }
    
    .chat-messages {
        padding: 0.75rem 0.5rem 2rem 0.5rem !important;
        padding-bottom: calc(2rem + env(safe-area-inset-bottom, 1.5rem)) !important;
    }
    
    .input-area {
        padding: 0.5rem !important;
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 1.5rem)) !important;
    }
    
    .input-wrapper {
        padding: 0.75rem !important;
        min-height: 52px !important;
    }
    
    .send-button {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }
    
    .message.user-message,
    .message.assistant-message {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    .user-message .message-content,
    .assistant-message .message-content {
        max-width: 90% !important;
    }
    
    .message-avatar {
        width: 32px !important;
        height: 32px !important;
    }
    
    .assistant-avatar {
        width: 32px !important;
        height: 32px !important;
    }
    
    .message-bubble {
        font-size: 0.85rem !important;
        padding: 0.75rem 0.875rem !important;
    }
    
    .sidebar {
        width: 260px !important;
    }
}

/* Landscape phones */
@media (max-width: 768px) and (orientation: landscape) {
    .chat-messages {
        padding: 0.5rem 0.75rem 1.5rem 0.75rem !important;
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0.5rem)) !important;
    }
    
    .input-area {
        padding: 0.5rem !important;
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0.5rem)) !important;
    }
    
    .input-wrapper {
        min-height: 44px !important;
        padding: 0.5rem 0.75rem !important;
    }
    
    .message-input {
        min-height: 40px !important;
    }
    
    .send-button {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }
}