/* =========================
   MOBILE RESPONSIVE STYLES
   ========================= */

/* Tablet and smaller */
@media (max-width: 1024px) {
    .sidebar {
        width: 260px;
        min-width: 240px;
    }
    
    .chat-header-actions {
        gap: 8px;
    }
    
    .topbar-link span:not(.topbar-link-icon) {
        display: none;
    }
    
    .topbar-link {
        padding: 8px;
    }
}

/* Mobile breakpoint */
@media (max-width: 768px) {
    /* Hide sidebar by default on mobile */
    .sidebar {
        position: fixed;
        left: -100%;
        top: 0;
        width: 280px;
        height: 100vh;
        z-index: 1000;
        transition: left 0.3s ease;
        box-shadow: 2px 0 20px rgba(0,0,0,0.5);
    }
    
    .sidebar.open {
        left: 0;
    }
    
    /* Mobile menu toggle button */
    .mobile-menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: var(--panel-2);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        color: var(--text);
        font-size: 1.2rem;
        cursor: pointer;
        margin-right: 10px;
    }
    
    /* Sidebar overlay */
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.6);
        z-index: 999;
        backdrop-filter: blur(2px);
    }
    
    .sidebar-overlay.open {
        display: block;
    }
    
    /* Chat layout adjustments */
    .chat-layout {
        width: 100%;
        margin-left: 0;
    }
    
    .chat-header {
        padding: 10px 12px;
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .chat-header-left {
        flex: 1;
        min-width: 0;
    }
    
    .chat-title {
        font-size: 0.95rem;
    }
    
    .chat-subtitle {
        display: none;
    }
    
    /* Simplified header actions */
    .chat-header-actions {
        gap: 6px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        max-width: 100%;
    }
    
    .chat-header-actions::-webkit-scrollbar {
        display: none;
    }
    
    .topbar-link {
        padding: 6px 10px;
        font-size: 0.8rem;
        white-space: nowrap;
    }
    
    .topbar-link-icon {
        font-size: 1rem;
    }
    
    /* Hide text in buttons, show only icons */
    .topbar-link span:not(.topbar-link-icon),
    .pack-btn span:not(.topbar-link-icon) {
        display: none;
    }
    
    /* Prompt pack selector */
    .prompt-pack-selector {
        gap: 4px;
    }
    
    .pack-btn {
        padding: 6px 8px;
    }
    
    /* Chat window */
    .chat-window {
        padding: 12px;
        padding-bottom: 140px;
    }
    
    .message-row {
        gap: 8px;
    }
    
    .message-bubble {
        max-width: 92%;
        padding: 12px 14px;
        font-size: 0.95rem;
    }
    
    .avatar {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }
    
    /* Chat input - fixed at bottom */
    .chat-input-wrap {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 10px 12px;
        background: var(--bg);
        border-top: 1px solid var(--border);
        z-index: 100;
    }
    
    .chat-form {
        gap: 8px;
    }
    
    .chat-input {
        min-height: 44px;
        max-height: 120px;
        padding: 10px 14px;
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    .send-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }
    
    /* Mode selector compact */
    .mode-dropdown-wrap {
        padding: 6px 10px;
    }
    
    .mode-dropdown {
        font-size: 0.85rem;
    }
    
    /* Provider status bar */
    .provider-status-bar {
        padding: 6px 10px;
        font-size: 0.8rem;
    }
    
    .provider-status-tooltip {
        width: 280px;
        right: -10px;
        left: auto;
    }
    
    /* Docs drawer */
    .docs-drawer-panel {
        width: 100%;
        max-width: 100%;
    }
    
    /* Attunement panel */
    .attunement-panel {
        width: 100%;
        right: -100%;
    }
    
    .attunement-panel.open {
        right: 0;
    }
    
    /* Histo panel */
    .histo-panel-content {
        width: 100%;
        max-width: 100%;
    }
    
    /* Image upload preview */
    .image-preview-container {
        max-width: 120px;
        max-height: 120px;
    }
    
    /* Upload progress */
    .upload-progress-container {
        width: 100%;
    }
    
    /* User badge */
    .user-badge {
        display: none;
    }
    
    /* Precision mode button */
    .precision-btn {
        padding: 6px 8px;
    }
    
    .precision-indicator {
        display: none;
    }
    
    /* Logout button - hide text */
    .logout span:not(.topbar-link-icon) {
        display: none;
    }
    
    /* Consensus progress */
    .consensus-progress {
        margin: 8px 12px;
        padding: 10px 12px;
    }
    
    .consensus-progress-steps {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    
    .consensus-step {
        padding: 8px 10px;
        font-size: 0.85rem;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .chat-window {
        padding: 8px;
        padding-bottom: 130px;
    }
    
    .message-bubble {
        max-width: 95%;
        padding: 10px 12px;
        font-size: 0.9rem;
        border-radius: var(--radius-md);
    }
    
    .avatar {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }
    
    .chat-header {
        padding: 8px 10px;
    }
    
    .topbar-link {
        padding: 5px 8px;
    }
    
    .topbar-link-icon {
        font-size: 1.1rem;
    }
    
    .chat-input {
        min-height: 40px;
        padding: 8px 12px;
    }
    
    .send-btn {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }
    
    .mode-dropdown-wrap {
        padding: 5px 8px;
    }
    
    .mode-dropdown {
        font-size: 0.8rem;
    }
    
    .consensus-progress-steps {
        grid-template-columns: 1fr;
    }
    
    .upload-file-label {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }
    
    .upload-file-name {
        max-width: 100%;
    }
}

/* Landscape mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .sidebar {
        width: 240px;
    }
    
    .chat-input-wrap {
        position: relative;
    }
    
    .chat-window {
        padding-bottom: 20px;
    }
}

/* Safe area for notched phones */
@supports (padding-top: env(safe-area-inset-top)) {
    @media (max-width: 768px) {
        .chat-header {
            padding-top: max(10px, env(safe-area-inset-top));
        }
        
        .chat-input-wrap {
            padding-bottom: max(10px, env(safe-area-inset-bottom));
        }
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    .message-bubble {
        -webkit-tap-highlight-color: transparent;
    }
    
    .chat-input {
        -webkit-appearance: none;
        border-radius: var(--radius-md);
    }
    
    button, select {
        -webkit-tap-highlight-color: transparent;
    }
}

/* Print styles */
@media print {
    .sidebar,
    .chat-header-actions,
    .chat-input-wrap {
        display: none !important;
    }
    
    .chat-window {
        padding: 0;
        height: auto;
        overflow: visible;
    }
    
    .message-bubble {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ccc;
    }
}