/**
 * Oracle Collective Interface - Mobile Styles
 * Responsive design and mobile optimizations
 * Copyright © 2025 Tammy L Casey
 */

/* ============================================================================
   Mobile Breakpoints
   ============================================================================ */

/* Tablet and below (768px) */
@media (max-width: 768px) {

    /* Header */
    .app-header {
        padding: 0 var(--space-md);
    }

    .app-title {
        font-size: var(--font-size-lg);
    }

    .header-nav {
        gap: var(--space-xs);
    }

    .icon-btn {
        width: 36px;
        height: 36px;
    }

    /* Main Layout - Sidebar becomes drawer */
    .main-content {
        flex-direction: column;
    }

    .sidebar {
        position: fixed;
        top: var(--header-height);
        left: 0;
        bottom: 0;
        width: 280px;
        max-width: 80vw;
        transform: translateX(-100%);
        transition: transform var(--transition-base);
        z-index: var(--z-dropdown);
        box-shadow: var(--shadow-lg);
    }

    .sidebar.open {
        transform: translateX(0);
    }

    /* Sidebar Overlay */
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: var(--header-height);
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        z-index: calc(var(--z-dropdown) - 1);
    }

    .sidebar-overlay.active {
        display: block;
    }

    /* Sidebar Toggle Button */
    .sidebar-toggle {
        position: fixed;
        bottom: var(--space-lg);
        left: var(--space-lg);
        width: 56px;
        height: 56px;
        border-radius: var(--border-radius-full);
        background: var(--text-white);
        color: var(--bg-black);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--font-size-2xl);
        box-shadow: var(--shadow-lg);
        z-index: var(--z-dropdown);
    }

    .sidebar-toggle:active {
        transform: scale(0.9);
    }

    /* Conversation Area */
    .conversation-area {
        width: 100%;
    }

    /* Messages */
    .messages-container {
        padding: var(--space-md);
    }

    .message {
        max-width: 90%;
        font-size: var(--font-size-sm);
    }

    .welcome-message {
        padding: var(--space-lg);
    }

    /* Voice Orb */
    .voice-orb-container {
        top: 40%;
    }

    .voice-orb {
        width: 150px;
        height: 150px;
    }

    .voice-status {
        bottom: -30px;
    }

    /* Input Area */
    .input-area {
        padding: var(--space-sm);
    }

    .user-input {
        min-height: 44px;
        font-size: var(--font-size-base);
    }

    .send-btn {
        width: 50px;
        height: 50px;
        font-size: var(--font-size-xl);
    }

    .voice-btn {
        width: 44px;
        height: 44px;
    }

    /* Modal */
    .modal {
        padding: 0;
    }

    .modal-content {
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
        height: 100%;
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding: var(--space-md);
    }

    /* Settings Tabs */
    .settings-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tab-btn {
        flex-shrink: 0;
        padding: var(--space-sm);
        font-size: var(--font-size-sm);
    }

    /* Form Elements */
    .form-group {
        margin-bottom: var(--space-md);
    }

    .form-actions {
        flex-direction: column;
    }

    .form-actions button {
        width: 100%;
    }

    /* Footer */
    .app-footer {
        font-size: var(--font-size-xs);
        padding: var(--space-xs) var(--space-sm);
        height: auto;
    }
}

/* Mobile Portrait (max-width: 480px) */
@media (max-width: 480px) {

    .app-title {
        font-size: var(--font-size-base);
    }

    .sidebar {
        width: 100%;
        max-width: 100%;
    }

    .message {
        max-width: 95%;
        padding: var(--space-sm) var(--space-md);
    }

    .perspective-card {
        padding: var(--space-sm);
    }

    .voice-orb {
        width: 120px;
        height: 120px;
    }

    .warning-banner {
        margin: var(--space-md);
        padding: var(--space-md);
    }
}

/* ============================================================================
   Touch Optimizations
   ============================================================================ */

@media (hover: none) and (pointer: coarse) {

    /* Larger touch targets (minimum 44x44px) */
    button,
    input,
    select,
    textarea,
    a {
        min-height: 44px;
        min-width: 44px;
    }

    /* Remove hover states on touch devices */
    .collective-btn:hover,
    .service-btn:hover,
    .icon-btn:hover,
    .voice-btn:hover {
        transform: none;
        background: var(--bg-medium);
    }

    /* Active states for touch feedback */
    .collective-btn:active {
        transform: scale(0.98);
        background: var(--bg-black);
    }

    .btn-primary:active {
        transform: scale(0.98);
    }

    /* Swipe gesture indicators */
    .swipeable {
        touch-action: pan-y;
    }

    /* Prevent text selection on double-tap */
    .no-select {
        -webkit-user-select: none;
        user-select: none;
    }
}

/* ============================================================================
   Landscape Mobile
   ============================================================================ */

@media (max-width: 768px) and (orientation: landscape) {

    .main-content {
        flex-direction: row;
    }

    .sidebar {
        width: 200px;
    }

    .voice-orb-container {
        top: 50%;
    }

    .voice-orb {
        width: 100px;
        height: 100px;
    }

    .messages-container {
        padding: var(--space-sm);
    }
}

/* ============================================================================
   Safe Areas (iOS Notch Support)
   ============================================================================ */

@supports (padding: env(safe-area-inset-top)) {
    .app-header {
        padding-top: env(safe-area-inset-top);
        height: calc(var(--header-height) + env(safe-area-inset-top));
    }

    .main-content {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    .input-area {
        padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom));
    }
}

/* ============================================================================
   PWA Standalone Mode
   ============================================================================ */

@media (display-mode: standalone) {
    .app-header {
        -webkit-app-region: drag;
    }

    .header-nav button {
        -webkit-app-region: no-drag;
    }

    /* Hide browser UI hints */
    .browser-hint {
        display: none;
    }
}

/* ============================================================================
   Dark Mode (System Preference)
   ============================================================================ */

@media (prefers-color-scheme: dark) {
    /* Already dark by default, but ensure consistency */
    :root {
        color-scheme: dark;
    }
}

/* ============================================================================
   High Contrast Mode
   ============================================================================ */

@media (prefers-contrast: high) {
    :root {
        --border-silver: rgba(255, 255, 255, 0.6);
        --border-bright: rgba(255, 255, 255, 0.9);
        --text-silver: #FFFFFF;
    }

    .btn-primary {
        border: 2px solid var(--bg-black);
    }

    .collective-btn.active {
        border-width: 3px;
    }
}

/* ============================================================================
   Reduced Data Mode (Save Bandwidth)
   ============================================================================ */

@media (prefers-reduced-data: reduce) {
    /* Disable particle background on slow connections */
    .particles-background {
        display: none;
    }

    /* Simplify animations */
    * {
        animation-duration: 0.1s !important;
    }
}

/* ============================================================================
   Print Styles
   ============================================================================ */

@media print {
    .app-header,
    .sidebar,
    .input-area,
    .app-footer,
    .modal,
    .voice-orb-container {
        display: none !important;
    }

    .main-content {
        display: block;
        height: auto;
    }

    .conversation-area {
        padding: 0;
    }

    .message {
        max-width: 100%;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .perspective-card {
        border: 1px solid #000;
        break-inside: avoid;
    }

    * {
        color: #000 !important;
        background: #fff !important;
    }
}

/* ============================================================================
   Foldable Devices
   ============================================================================ */

@media (horizontal-viewport-segments: 2) {
    .main-content {
        grid-template-columns: env(viewport-segment-width 0 0) env(viewport-segment-width 1 0);
    }

    .sidebar {
        grid-column: 1;
    }

    .conversation-area {
        grid-column: 2;
    }
}