/* ==================== MOBILE-ONLY STYLES ==================== */
/* Note: Mobile-only elements (.mobile-tabs, .mobile-turn-navigation, .mobile-only) */
/* are hidden by default in shared.css and only shown here within media queries */

/* ==================== TABLET/MEDIUM SCREENS ==================== */
@media (max-width: 1200px) {
    .panels-container {
        flex-direction: column;
    }

    .panel {
        min-height: 400px;
    }

    .panel::before {
        width: 100%;
        height: 3px;
        top: 0;
        bottom: auto;
    }

    .panel:not(:last-child)::after {
        width: 100%;
        height: 1px;
        bottom: 0;
        top: auto;
    }
}

/* ==================== MOBILE TAB NAVIGATION STYLES ==================== */
/* These styles are defined here but only applied when .mobile-tabs is shown */
.mobile-tabs {
    background: linear-gradient(to bottom,
        rgba(13, 13, 31, 0.98),
        rgba(20, 20, 40, 0.95)
    );
    border-bottom: 2px solid var(--electric-cyan);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 10;
    /* Support iPhone notch at top */
    padding-top: env(safe-area-inset-top);
}

.mobile-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 8px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-dim);
    font-family: var(--font-mono);
    cursor: pointer;
    transition: all 0.3s ease;
}

.mobile-tab:hover {
    background: rgba(0, 255, 255, 0.05);
    color: var(--text-mid);
}

.mobile-tab.active {
    background: rgba(0, 255, 255, 0.1);
    border-bottom-color: var(--electric-cyan);
    color: var(--electric-cyan);
}

.tab-icon {
    display: none; /* Hide emoji icons */
}

.tab-label {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ==================== MOBILE TURN NAVIGATION STYLES ==================== */
.mobile-turn-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap !important;
    gap: 8px;
    padding: 8px;
    background: rgba(10, 10, 25, 0.6);
    border: 1px solid var(--electric-cyan);
    border-radius: 4px;
    margin-top: 12px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.mobile-turn-btn {
    padding: 8px 12px;
    background: rgba(0, 255, 255, 0.1);
    border: 1px solid var(--electric-cyan);
    border-radius: 4px;
    color: var(--electric-cyan);
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 36px;
    flex: 0 0 auto;
    width: 40px;
}

.mobile-turn-btn:hover:not(:disabled) {
    background: rgba(0, 255, 255, 0.2);
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.3);
}

.mobile-turn-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.mobile-turn-counter {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--electric-cyan);
    letter-spacing: 0.05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-turn-counter.viewing-past {
    color: var(--hot-pink);
}

/* ==================== MOBILE OPTIMIZATIONS ==================== */
@media (max-width: 768px) {
    /* Prevent body scroll on mobile - only allow panel body scroll */
    body {
        overflow: hidden;
        position: fixed;
        width: 100%;
        height: 100vh;
        height: 100dvh;
    }

    /* Show mobile tabs - override shared.css hiding */
    .mobile-tabs {
        display: flex !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
    }

    /* Desktop/Mobile visibility on mobile */
    /* Allow inline display:none to work for conditional visibility */
    .mobile-only:not([style*="display: none"]):not([style*="display:none"]) {
        display: block !important;
    }

    .desktop-only {
        display: none !important;
    }

    /* Show mobile turn navigation - override both shared.css AND .mobile-only rule */
    /* Match specificity of .mobile-only:not([style*="display: none"]) */
    .mobile-turn-navigation.mobile-only:not([style*="display: none"]):not([style*="display:none"]) {
        display: flex !important;
    }

    /* Panels container - don't stack, show side by side */
    .panels-container {
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        /* Space for mobile tabs (52px base) + safe area notch */
        padding-top: calc(52px + env(safe-area-inset-top, 0px));
    }

    /* Hide all panels by default on mobile */
    .panel {
        display: none;
        flex: 1;
        min-width: 100%;
        scroll-snap-align: start;
        position: relative;
        height: 100%;
    }

    /* Show only the active panel */
    .panel.active {
        display: flex;
    }

    /* Allow conversations panel to be shown on mobile when active */
    .panel[data-panel="conversations"].active {
        display: flex;
    }

    /* Hide panel toggle button on mobile */
    .panel-toggle-tab {
        display: none;
    }

    /* Header - hide completely on mobile */
    .header-bar {
        display: none;
    }

    /* Panel headers - hide on mobile since tabs handle navigation */
    .panel-header {
        display: none;
    }

    /* Panels should take full viewport - fix iOS scroll bounce */
    .app-container {
        height: 100vh;
        height: 100dvh; /* Use dynamic viewport height for mobile */
        overflow: hidden;
        position: fixed;
        width: 100%;
    }

    /* Panel body should fill available space - prevent overscroll bounce */
    .panel-body {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: scroll; /* Force scrollbar to exist */
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: none; /* Completely disable overscroll */
        overscroll-behavior-y: none; /* iOS specific */
        touch-action: pan-y; /* Only allow vertical scroll, no bounce */
        padding: 12px;
        /* Add top padding to prevent content from going under mobile tabs */
        padding-top: calc(12px + env(safe-area-inset-top, 0px));
    }

    /* Panel footer - fixed to screen bottom (not absolute) */
    .panel-footer {
        position: fixed;  /* Fixed to screen bottom, not absolute */
        bottom: 0;
        left: 0;
        right: 0;
        padding: 10px 12px;
        /* Respect iOS safe area for home indicator */
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        background: linear-gradient(to top,
            rgba(20, 20, 40, 0.98),
            rgba(26, 26, 53, 0.95)
        );
        border-top: 2px solid var(--electric-cyan);
        z-index: 10;
    }

    /* Adjust panel body to account for footer */
    .panel:has(.panel-footer) .panel-body {
        bottom: 0;
        /* Space for footer + safe area (increased for iPhone) */
        padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px));
        margin-bottom: 0;
    }

    /* Remove bottom whitespace gaps */
    body {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .app-container {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .panels-container {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Mobile context footer adjustments */
    .context-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 12px;
        /* Respect iOS safe area for home indicator */
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        background: linear-gradient(to top,
            rgba(20, 20, 40, 0.98),
            rgba(26, 26, 53, 0.95)
        );
        border-top: 2px solid var(--electric-cyan);
        z-index: 10;
    }

    /* Hide notes status on mobile */
    .notes-status {
        display: none;
    }

    /* Compress Instruction Notes section on mobile - match Turn Notes styling */
    .instruction-notes-section {
        padding: 0;
        margin-bottom: 8px; /* Small buffer between Instruction Notes and Turn Notes */
        background: none;
        border: none;
    }

    /* Keep instruction buttons on same line, equal sizing */
    .instruction-buttons {
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
    }

    /* Match button size to Save Notes button - reduced height by 33% */
    .apply-next-btn,
    .regenerate-instruction-btn {
        flex: 1;
        padding: 7px 8px; /* Reduced from 10px to 7px (33% reduction) */
        font-size: 10px;
        white-space: normal; /* Allow text wrap if needed */
        line-height: 1.2;
    }

    /* End Scene toggle on mobile */
    .end-scene-toggle {
        font-size: 9px;
        padding: 3px 8px;
    }

    /* Compress instruction input on mobile */
    .instruction-input {
        min-height: 60px;
        font-size: 12px;
        padding: 10px;
    }

    /* Compress turn notes input on mobile - match instruction input */
    .notes-input {
        font-size: 12px;
        padding: 10px;
    }

    /* Adjust context panel body for footer */
    #characterPanelContainer .panel-body {
        bottom: 0;
        /* Space for instruction notes + turn notes + save button + turn navigation + safe area */
        padding-bottom: calc(360px + env(safe-area-inset-bottom, 0px));
    }

    /* Message cards */
    .message {
        padding: 16px 18px;
        margin-bottom: 16px;
    }

    .message:last-child {
        margin-bottom: 24px; /* Extra space for last message */
    }

    .message-content {
        font-size: 15px;
        line-height: 1.6;
    }

    /* Input form - compact on mobile */
    .input-form {
        flex-direction: column;
        gap: 8px;
        margin: 0;
    }

    .input-field {
        min-height: 36px;
        max-height: 80px;
        font-size: 12px;
        overflow-y: auto;
        resize: none;
        padding: 8px 12px;
        line-height: 1.4;
        margin-bottom: 8px; /* Small gap above buttons */
    }

    /* Footer buttons - fill width properly */
    .footer-buttons {
        display: flex;
        gap: 0;
        width: 100%;
        margin: 0; /* Remove any margins */
    }

    .submit-btn,
    .parse-btn {
        flex: 1;
        margin: 0;
        padding: 14px 16px;
        font-size: 14px;
        min-height: 48px; /* Touch-friendly */
        border-radius: 4px;
    }

    /* Mode controls */
    .mode-override-buttons {
        grid-template-columns: 1fr;
    }

    /* Narrative style */
    .narrative-style-dropdown {
        font-size: 14px;
    }

    /* Touch-friendly buttons */
    .turn-nav-btn {
        padding: 10px 14px;
        font-size: 16px;
    }

    .panel-toggle-tab {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }

    /* Scrollbar adjustments */
    .panel-body::-webkit-scrollbar {
        width: 6px;
    }

    /* Turn counter */
    .turn-counter {
        font-size: 12px;
        padding: 8px 12px;
    }

    /* Section content */
    .section-content {
        font-size: 12px;
    }

    .info-box {
        font-size: 12px;
    }
}

/* ==================== EXTRA SMALL MOBILE ==================== */
@media (max-width: 480px) {
    .header-bar h1 {
        font-size: 14px;
    }

    .panel-body {
        padding: 12px;
    }

    .message {
        padding: 12px 14px;
    }

    .submit-btn {
        font-size: 12px;
    }
}

/* ==================== iOS SAFARI SPECIFIC FIXES ==================== */
/* Prevent iOS keyboard from pushing content up */
@supports (-webkit-touch-callout: none) {
    /* iOS Safari only */
    @media (max-width: 768px) {
        body {
            position: fixed;
            width: 100%;
        }

        .panel-footer {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
        }
    }
}

/* ==================== KEYBOARD OPEN OPTIMIZATION ==================== */
/* Minimize footer when keyboard is visible (detected by small viewport height) */
@media (max-width: 768px) and (max-height: 600px) {
    /* Hide button container to save space */
    .footer-buttons {
        position: fixed;
        bottom: 16px;
        right: 16px;
        left: auto;
        width: auto;
        flex-direction: column;
        gap: 8px;
        z-index: 1001;
    }

    /* Make buttons circular floating action buttons */
    .submit-btn,
    .parse-btn,
    .font-size-btn {
        width: 56px;
        height: 56px;
        min-height: 56px;
        border-radius: 50%;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: 900;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6),
                    0 0 20px rgba(255, 20, 147, 0.4);
        border: 2px solid var(--electric-cyan);
    }

    /* Keep orange color for font size button even when circular */
    .font-size-btn {
        border-color: rgba(255, 140, 0, 0.8);
        font-size: 14px; /* Smaller font for the size label */
    }

    /* Make input take more space */
    .input-field {
        width: 100%;
        border-radius: 8px;
        padding-right: 80px; /* Space for floating buttons */
    }

    /* Adjust panel footer */
    .panel-footer {
        padding: 8px 12px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom));
    }
}

/* ==================== LANDSCAPE ORIENTATION WARNING ==================== */
/* Show a warning overlay when phone is in landscape mode */
@media (max-width: 768px) and (orientation: landscape) {
    body::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.95);
        z-index: 999999;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Rotate phone icon message */
    body::before {
        content: '📱\A\APlease rotate your device\Ato portrait mode';
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 9999999;
        color: var(--electric-cyan);
        font-size: 20px;
        text-align: center;
        white-space: pre-wrap;
        font-family: var(--font-mono);
        line-height: 1.6;
        text-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
    }
}