/**
 * RE::DACT Mobile Styles
 * 
 * This file contains all responsive styles and media queries.
 * Breakpoint: 768px
 */

/* --- MOBILE STYLES (max-width: 768px) --- */
@media (max-width: 768px) {
    
    /* Header */
    header {
        padding: 0 16px;
    }
    
    /* Toast position */
    #toast-container {
        bottom: 80px;
    }
    
    /* Sidebar */
    .mobile-overlay {
        top: 56px;
    }
    
    .news-panel {
        display: none;
    }
    
    aside {
        height: calc(100vh - 56px);
        max-height: calc(100vh - 56px);
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    
    .sidebar-content {
        flex: 1;
        overflow-y: auto;
        min-height: 0;
        padding-bottom: 120px;
    }
    
    .sidebar-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1001;
        max-width: var(--sidebar-width);
    }
    
    /* Split view */
    .split {
        flex-direction: column;
        width: 100%;
    }
    
    .column {
        flex: 0 0 100%;
        display: none;
    }
    
    .column.active {
        display: flex;
    }
    
    /* Toolbar */
    .toolbar-trigger {
        height: 8px;
    }
    
    .editor-controls.expanded {
        max-height: 100px;
        overflow: visible;
    }
    
    .toolbar {
        gap: 2px;
        padding: 8px 12px;
        flex-wrap: nowrap;
        overflow-x: auto;
    }
    
    .toolbar button {
        width: 32px;
        height: 32px;
        min-width: 32px;
        border-radius: 6px;
    }
    
    .toolbar button:active {
        background: var(--color-bg-tertiary);
    }
    
    .toolbar .print-btn {
        display: none !important;
    }
    
    .toolbar-separator {
        margin: 0 4px;
    }
    
    .color-picker {
        left: auto;
        right: 0;
    }
    
    /* Editor */
    .editor {
        padding: 24px 20px;
        padding-bottom: 80px !important;
        font-size: 16px;
    }
    
    .column:nth-child(2) .editor {
        padding-left: 44px;
    }
    
    .column:nth-child(1) .editor {
        padding-right: 44px;
    }
    
    /* Chat */
    .chat {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: auto;
        max-height: 70vh;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
        z-index: 900;
        transform: translateY(calc(100% - 52px));
        transition: transform var(--transition-fast);
    }
    
    .chat.open {
        transform: translateY(0);
    }
    
    .chat-resizer {
        display: none;
    }
    
    /* View gradient switcher */
    .view-gradient-switcher {
        display: flex;
        top: 48px;
        bottom: 0;
        height: auto;
    }
    
    /* Mode tabs */
    .tab {
        padding: 6px 8px;
        font-size: 11px;
        flex: 1;
        text-align: center;
        max-width: 33%;
    }
    
    /* Mode hints */
    .mode-hint {
        display: flex;
    }
    
    .mode-hint-desktop {
        display: none;
    }
    
    /* Editor stats */
    .editor-stats {
        position: absolute;
        bottom: 80px;
        right: 20px;
        justify-content: flex-end;
        z-index: 800;
    }
    
    /* --- MOBILE MODAL FIXES (POPUP STYLE) --- */
    .modal {
        top: auto;
        bottom: 24px;
        left: 16px;
        right: 16px;
        width: auto;
        max-width: none;
        max-height: 75vh;
        border-radius: 20px;
        transform: translateY(120%);
    }
    
    .modal.active {
        transform: translateY(0);
    }
    
    .modal-body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .modal-footer {
        padding: 16px 24px;
        flex-shrink: 0;
        background: inherit;
    }
    
    /* UNIFIED DARK THEME FOR MODALS ON MOBILE */
    #loginModal,
    #disclaimerModal {
        background: #0A0A0A;
        border: 1px solid rgba(255,255,255,0.15);
        color: #FFFFFF;
    }
    
    #loginModal .modal-header {
        border-bottom-color: rgba(255,255,255,0.1);
    }
    
    #loginModal .modal-close {
        color: rgba(255,255,255,0.6);
    }
    
    #loginModal h3 {
        color: #FFFFFF;
    }
    
    #loginModal p {
        color: rgba(255,255,255,0.6) !important;
    }
    
    #loginModal .login-btn {
        background: rgba(255,255,255,0.1);
        border-color: rgba(255,255,255,0.2);
        color: #FFFFFF;
    }
    
    #loginModal .login-btn:hover,
    #loginModal .login-btn:active,
    #loginModal .login-btn:focus {
        background: rgba(255,255,255,0.2);
    }
    
    #loginModal .login-btn-google {
        background: #FFFFFF;
        color: #000000;
        border-color: #FFFFFF;
    }
    
    #loginModal .login-btn-google:hover,
    #loginModal .login-btn-google:active,
    #loginModal .login-btn-google:focus {
        background: #f0f0f0;
    }
    
    #loginModal .login-divider {
        color: rgba(255,255,255,0.3);
    }
    
    #loginModal .login-divider::before,
    #loginModal .login-divider::after {
        background: rgba(255,255,255,0.1);
    }
    
    #loginModal .login-guest-note {
        border-top-color: rgba(255,255,255,0.1);
        color: rgba(255,255,255,0.4);
    }
}

/* --- DESKTOP STYLES (min-width: 769px) --- */
@media (min-width: 769px) {
    .chat-peek-bar {
        display: none !important;
    }
    
    .column {
        display: flex !important;
    }
}