/* Mobile Layout Fixes - Enable Scrolling ONLY for Mobile/PWA */

/* 
 * Strategy: Use CSS media queries for screen size detection
 * AND add a .mobile-scroll class via JavaScript for PWA detection
 * 
 * JavaScript will add .mobile-scroll class when:
 * - Device is mobile (touch device)
 * - OR running as PWA (standalone mode)
 */

/* Base: Desktop web - NO scroll, fixed viewport */
html,
body {
    height: 100vh;
    overflow: hidden;
}

/* Mobile devices - Enable scroll */
@media (max-width: 768px) and (hover: none) and (pointer: coarse) {

    /* This targets touch devices only */
    html,
    body {
        height: auto !important;
        min-height: 100vh;
        min-height: 100dvh;
        /* Dynamic viewport height for mobile browsers */
        overflow-y: auto !important;
        overflow-x: hidden;
    }

    body {
        display: flex;
        flex-direction: column;
    }

    .header {
        padding: 0.5rem 0.75rem;
        position: sticky;
        top: 0;
        background: var(--bg-primary);
        z-index: 100;
    }

    .logo-text {
        font-size: 1rem;
    }

    .install-buttons {
        display: flex !important;
        gap: 0.25rem;
    }

    .social-links {
        gap: 0.25rem;
    }

    .social-btn {
        width: 28px;
        height: 28px;
    }

    .social-btn svg {
        width: 14px;
        height: 14px;
    }

    .nav-controls {
        gap: 0.375rem;
    }

    .main-content {
        padding: 0.5rem 1rem 1rem;
        min-height: auto;
        flex: 1 0 auto;
        justify-content: flex-start;
    }

    .hero-text {
        margin-bottom: 1rem;
    }

    .title {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }

    .subtitle {
        font-size: 0.875rem;
    }

    .boxes-container {
        flex-direction: column;
        gap: 0.75rem;
    }

    .divider {
        padding: 0.375rem 0;
    }

    .divider-text {
        font-size: 0.75rem;
    }

    .box {
        padding: 1rem;
    }

    .box-header {
        margin-bottom: 0.75rem;
    }

    .code-char {
        width: 32px;
        height: 44px;
        font-size: 1.125rem;
    }

    .code-display {
        margin-bottom: 0.5rem;
        gap: 0.25rem;
    }

    .copy-btn {
        padding: 0.5rem;
        margin-bottom: 0.5rem;
        font-size: 0.7rem;
    }

    .generate-btn {
        padding: 0.625rem;
        margin-bottom: 0.75rem;
        font-size: 0.8rem;
    }

    .secret-section {
        gap: 0.5rem;
    }

    .secret-input,
    .join-input {
        padding: 0.75rem;
        font-size: 0.875rem;
    }

    .start-chat-btn,
    .join-btn {
        padding: 0.75rem;
        font-size: 0.875rem;
    }

    .join-form {
        gap: 0.75rem;
    }

    .input-group {
        gap: 0.375rem;
    }

    .input-group label {
        font-size: 0.75rem;
    }

    .code-input {
        font-size: 1rem;
        padding: 0.75rem;
    }

    .join-box {
        margin-top: 0;
    }

    .footer {
        padding: 0.5rem 1rem;
        flex-shrink: 0;
    }

    .footer-links {
        gap: 0.5rem;
    }

    .footer-links a {
        font-size: 0.7rem;
    }

    .copyright {
        font-size: 0.65rem;
    }

    /* Theme toggle smaller */
    .theme-toggle {
        width: 36px;
        height: 36px;
    }

    .lang-btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
    }

    /* Gradient orbs smaller on mobile */
    .gradient-orb {
        opacity: 0.2;
    }

    .orb-1 {
        width: 300px;
        height: 300px;
    }

    .orb-2 {
        width: 200px;
        height: 200px;
    }
}

/* Extra small devices (phones) */
@media (max-width: 480px) and (hover: none) and (pointer: coarse) {
    .header {
        padding: 0.375rem 0.5rem;
    }

    .logo-icon {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    .logo-text {
        display: none;
    }

    .social-links {
        display: none;
    }

    /* Keep install buttons visible but compact on small screens */
    .install-buttons {
        display: flex !important;
    }

    .install-btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.65rem;
    }

    .install-btn svg {
        width: 14px;
        height: 14px;
    }

    .install-btn span {
        display: none;
    }

    .premium-btn {
        width: 32px;
        height: 32px;
    }

    .title {
        font-size: 1.25rem;
    }

    .subtitle {
        font-size: 0.8125rem;
    }

    .box {
        padding: 0.875rem;
    }

    .code-char {
        width: 28px;
        height: 40px;
        font-size: 1rem;
    }

    .theme-toggle {
        width: 32px;
        height: 32px;
    }

    .lang-btn {
        padding: 0.375rem 0.5rem;
        font-size: 0.7rem;
    }
}

/* PWA Standalone Mode - Force scroll */
@media (display-mode: standalone) {

    html,
    body {
        height: auto !important;
        min-height: 100vh;
        min-height: 100dvh;
        overflow-y: auto !important;
        overflow-x: hidden;
    }

    body {
        display: flex;
        flex-direction: column;
    }

    .main-content {
        flex: 1 0 auto;
    }

    .footer {
        flex-shrink: 0;
    }
}

/* Chat page mobile fixes */
@media (max-width: 768px) and (hover: none) and (pointer: coarse) {
    .chat-container {
        padding: 0 0.75rem;
        height: 100vh;
        height: 100dvh;
        /* Dynamic viewport height for Safari */
        max-height: 100vh;
        max-height: 100dvh;
        overflow: hidden;
    }

    .chat-header {
        padding: 0.5rem 0;
        position: sticky;
        top: 0;
        background: var(--bg-primary);
        z-index: 50;
        flex-shrink: 0;
    }

    .messages-area {
        padding: 0.5rem 0;
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        min-height: 0;
    }

    .chat-input-area {
        padding: 0.5rem 0;
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
        gap: 0.5rem;
        position: sticky;
        bottom: 0;
        background: var(--bg-primary);
        z-index: 50;
        flex-shrink: 0;
    }

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

    .message-input-wrapper {
        padding: 0.25rem 0.375rem 0.25rem 0.75rem;
    }

    .send-btn {
        width: 34px;
        height: 34px;
    }

    .chat-footer {
        padding: 0.25rem 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        flex-shrink: 0;
    }

    .room-code {
        font-size: 0.875rem;
    }

    .leave-btn {
        padding: 0.5rem !important;
    }

    .leave-btn span {
        display: none;
    }

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

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

    /* Typing indicator - fixed bottom-left above input */
    .typing-indicator {
        position: absolute;
        bottom: 70px;
        left: 0.75rem;
        z-index: 100;
    }
}