/* Mobile-specific improvements for chat interface */

/* Prevent iOS zoom on input focus */
@media screen and (max-width: 768px) {

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    textarea,
    select {
        font-size: 16px !important;
        transform: translateZ(0);
        -webkit-appearance: none;
        appearance: none;
        border-radius: 0;
    }

    /* Ensure messages don't hide behind input */
    .messages-container {
        padding-bottom: 120px !important;
        margin-bottom: 0;
    }

    /* Fixed input positioning */
    .input-area {
        position: fixed !important;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: white;
        border-top: 1px solid #e5e7eb;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }
}

/* Better touch targets for mobile */
@media (max-width: 768px) {
    .touch-target {
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Improve button accessibility */
    button,
    .cursor-pointer,
    label[for] {
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Better textarea handling */
    textarea {
        resize: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Prevent horizontal scroll */
    .messages-container {
        overflow-x: hidden;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Better message bubbles on mobile */
    .message-bubble {
        max-width: 100%;
        padding: 0 4px;
    }

    .message-bubble>div {
        max-width: 85%;
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    /* Adaptive image sizes for mobile */
    .message-image {
        max-width: 200px !important;
        max-height: 200px;
        object-fit: cover;
        border-radius: 12px;
        width: auto;
        height: auto;
        display: block;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .message-image:hover {
        transform: scale(1.02);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .message-image:active {
        transform: scale(0.98);
    }

    /* Preview image styles for mobile */
    .preview-image {
        max-height: 60px !important;
        max-width: 120px;
        object-fit: cover;
        border-radius: 8px;
        width: auto;
        height: auto;
    }

    /* Ensure images don't break message layout */
    .message-bubble .message-image {
        margin-bottom: 8px;
        display: block;
    }

    /* Better image loading states */
    .message-image[loading="lazy"] {
        background-color: #f3f4f6;
        background-image: linear-gradient(45deg, #f9fafb 25%, transparent 25%),
            linear-gradient(-45deg, #f9fafb 25%, transparent 25%),
            linear-gradient(45deg, transparent 75%, #f9fafb 75%),
            linear-gradient(-45deg, transparent 75%, #f9fafb 75%);
        background-size: 20px 20px;
        background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    }
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {

    /* Fix for iOS Safari viewport height issues */
    .chat-container {
        height: -webkit-fill-available;
        min-height: -webkit-fill-available;
    }

    @media (max-width: 768px) {
        .messages-container {
            height: calc(-webkit-fill-available - 160px);
            min-height: calc(-webkit-fill-available - 160px);
        }

        /* Handle iOS keyboard */
        .input-area {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            background: white;
            padding-bottom: env(safe-area-inset-bottom, 12px);
        }
    }
}

/* Android Chrome specific fixes */
@media screen and (max-width: 768px) {

    /* Handle Android keyboard */
    .android .messages-container {
        height: calc(100vh - 160px);
        height: calc(100svh - 160px);
    }

    .android .input-area {
        position: sticky;
        bottom: 0;
    }
}

/* Landscape mode adjustments */
@media screen and (max-width: 768px) and (orientation: landscape) {
    .messages-container {
        height: calc(100vh - 140px);
        height: calc(100svh - 140px);
    }

    .sidebar {
        width: 280px;
    }

    /* Smaller images in landscape to save vertical space */
    .message-image {
        max-width: 150px !important;
        max-height: 120px !important;
    }

    .preview-image {
        max-height: 40px !important;
        max-width: 80px;
    }
}

/* Medium mobile screens */
@media screen and (max-width: 480px) {
    .message-image {
        max-width: 160px !important;
        max-height: 160px;
    }

    .preview-image {
        max-height: 50px !important;
        max-width: 100px;
    }
}

/* Very small screens (iPhone SE, etc.) */
@media screen and (max-width: 375px) {
    .sidebar {
        width: 100vw;
    }

    .message-bubble>div {
        max-width: 90%;
        font-size: 14px;
        padding: 8px 12px;
    }

    .input-area {
        padding: 8px 12px;
    }

    .messages-container {
        padding-bottom: 140px !important;
    }

    .message-image {
        max-width: 140px !important;
        max-height: 140px;
    }

    .preview-image {
        max-height: 45px !important;
        max-width: 90px;
    }
}

/* Extra small screens */
@media screen and (max-width: 320px) {
    .message-image {
        max-width: 120px !important;
        max-height: 120px;
    }

    .preview-image {
        max-height: 40px !important;
        max-width: 80px;
    }
}

/* Ensure proper scroll behavior */
@media (max-width: 768px) {
    .messages-container {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }

    /* Prevent content from hiding behind fixed input */
    .main-chat-area::after {
        content: '';
        display: block;
        height: 100px;
        width: 100%;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .message-bubble {
        animation: none;
    }

    .sidebar {
        transition: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .input-area {
        border-top: 2px solid #000;
    }

    .message-bubble>div {
        border: 1px solid currentColor;
    }
}