/* ==========================================
   MOBILE FIXES - Coaching People
   Correctifs pour très petits écrans (≤360px)
   ========================================== */

/* Extra small devices (400px and below) */
@media (max-width: 400px) {
    /* ==========================================
       GÉNÉRAL
       ========================================== */

    /* Prevent text overflow */
    body {
        overflow-x: hidden;
    }

    /* Ensure all interactive elements are touch-friendly */
    button,
    .btn,
    a.btn,
    input[type="submit"] {
        min-height: 44px;
        min-width: 44px;
    }

    /* Prevent iOS zoom on input focus */
    input,
    textarea,
    select {
        font-size: 16px !important;
    }

    /* ==========================================
       LOGIN PAGE
       ========================================== */

    .login-container {
        padding: 8px;
        /* Solid color instead of gradient for better performance */
        background: var(--primary-color);
    }

    .login-card {
        padding: 12px;
        max-width: 100%;
    }

    .logo-section h1 {
        font-size: 1.25rem;
        word-break: break-word;
    }

    .tagline {
        font-size: 0.875rem;
    }

    /* Language Selector */
    .language-selector {
        top: 8px;
        right: 8px;
        gap: 6px;
    }

    .lang-btn {
        width: 32px;
        height: 32px;
        font-size: 18px;
    }

    /* Login Form */
    .login-form h2 {
        font-size: 1.125rem;
    }

    .subtitle {
        font-size: 0.8125rem;
    }

    #accessCode {
        font-size: 16px;
        padding: 12px;
    }

    .primary-btn {
        font-size: 0.9375rem;
        padding: 12px 20px;
    }

    /* ==========================================
       CHAT INTERFACE
       ========================================== */

    /* Header */
    .app-header {
        padding: 6px 8px;
        flex-wrap: wrap;
    }

    .header-left h1 {
        font-size: 0.9375rem;
    }

    .user-greeting {
        font-size: 0.6875rem;
    }

    .header-right {
        gap: 6px;
    }

    .icon-btn {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    /* Messages */
    .chat-main {
        padding: 6px;
    }

    .message {
        gap: 6px;
        margin-bottom: 12px;
    }

    .message-content {
        max-width: 92%;
        padding: 8px 12px;
        font-size: 0.875rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .message-avatar {
        width: 26px;
        height: 26px;
        font-size: 0.8125rem;
        flex-shrink: 0;
    }

    .message-time {
        font-size: 0.625rem;
    }

    /* Welcome Message */
    .welcome-message {
        padding: 12px;
    }

    .welcome-icon {
        font-size: 1.25rem;
        margin-bottom: 12px;
    }

    .welcome-message h2 {
        font-size: 1.125rem;
        margin-bottom: 8px;
    }

    .welcome-message p {
        font-size: 0.8125rem;
    }

    .welcome-cta {
        font-size: 0.875rem;
        padding: 10px 16px;
    }

    /* Input Area */
    .input-area {
        padding: 6px;
    }

    .input-container {
        gap: 6px;
    }

    #messageInput {
        font-size: 16px;
        padding: 10px 12px;
        min-height: 44px;
    }

    .send-btn {
        width: 44px;
        height: 44px;
        font-size: 1.125rem;
        flex-shrink: 0;
    }

    /* ==========================================
       ADMIN DASHBOARD
       ========================================== */

    /* Sidebar */
    .dashboard-sidebar {
        width: 60px;
    }

    .sidebar-icon {
        font-size: 1.25rem;
    }

    /* Main Content */
    .dashboard-main {
        padding: 12px;
    }

    .page-header h1 {
        font-size: 1.25rem;
    }

    /* Stats */
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .stat-card {
        padding: 12px;
    }

    .stat-value {
        font-size: 1.5rem;
    }

    .stat-label {
        font-size: 0.8125rem;
    }

    /* Client Cards */
    .client-card {
        padding: 12px;
    }

    .client-name {
        font-size: 1rem;
    }

    .client-code {
        font-size: 0.75rem;
    }

    .client-info {
        font-size: 0.8125rem;
    }

    .client-actions {
        flex-direction: column;
        gap: 8px;
    }

    .client-actions .btn {
        width: 100%;
    }

    /* Modal Form */
    .modal-content {
        max-height: 90vh;
        margin: 8px;
    }

    .modal-header {
        padding: 12px;
    }

    .modal-title {
        font-size: 1.125rem;
    }

    .modal-body {
        padding: 12px;
    }

    /* Form Elements */
    .form-group {
        margin-bottom: 16px;
    }

    .form-group label {
        font-size: 0.875rem;
        margin-bottom: 6px;
    }

    /* Radio Group PCC/MCC */
    .radio-group {
        flex-direction: column;
        gap: 10px;
    }

    .level-option {
        width: 100%;
        padding: 12px;
        border: 2px solid var(--border-color);
        border-radius: var(--radius-md);
        transition: all 0.2s ease;
    }

    .level-option:has(input:checked) {
        border-color: var(--accent-color);
        background-color: rgba(52, 152, 219, 0.05);
    }

    .level-badge {
        font-size: 0.875rem;
        padding: 4px 12px;
    }

    .level-option small {
        font-size: 0.75rem;
        display: block;
        margin-top: 4px;
    }

    /* Textarea - Prompt */
    #clientPrompt {
        min-height: 200px;
        font-size: 14px;
        line-height: 1.5;
    }

    /* Textarea - Objectifs */
    #clientObjectives {
        min-height: 100px;
        font-size: 14px;
    }

    /* Select */
    select {
        font-size: 16px;
        padding: 10px;
    }

    /* Compliance Indicators */
    .compliance-indicators {
        gap: 6px;
        padding: 8px;
    }

    .indicator {
        font-size: 0.6875rem;
        padding: 4px 8px;
    }

    /* Prompt Actions */
    .prompt-actions {
        flex-direction: column;
        gap: 8px;
        margin-bottom: 8px;
    }

    .prompt-actions .btn {
        width: 100%;
    }

    /* ==========================================
       MODALS
       ========================================== */

    .modal {
        padding: 8px;
    }

    .close-modal {
        width: 36px;
        height: 36px;
        font-size: 1.25rem;
    }

    /* ==========================================
       UTILITIES
       ========================================== */

    /* Ensure buttons are touch-friendly */
    .btn-small {
        min-height: 44px;
        padding: 10px 16px;
        font-size: 0.875rem;
    }

    /* Responsive tables */
    table {
        font-size: 0.8125rem;
    }

    /* Prevent horizontal scroll */
    pre,
    code {
        overflow-x: auto;
        word-wrap: break-word;
    }
}

/* ==========================================
   VERY SMALL DEVICES (360px and below)
   ========================================== */

@media (max-width: 360px) {
    /* Further reduce spacing */
    .login-container {
        padding: 6px;
    }

    .chat-main {
        padding: 4px;
    }

    .dashboard-main {
        padding: 8px;
    }

    /* Smaller fonts */
    html {
        font-size: 13px;
    }

    /* Language buttons */
    .lang-btn {
        width: 30px;
        height: 30px;
        font-size: 16px;
    }

    /* Message content */
    .message-content {
        max-width: 95%;
        font-size: 0.8125rem;
    }

    /* Input area */
    .send-btn {
        width: 40px;
        height: 40px;
    }

    /* Client cards */
    .client-actions .btn {
        font-size: 0.8125rem;
        padding: 8px;
    }
}

/* ==========================================
   LANDSCAPE ORIENTATION
   ========================================== */

@media (max-height: 500px) and (orientation: landscape) {
    /* Reduce header height */
    .app-header {
        padding: 4px 8px;
    }

    /* Reduce input area */
    .input-area {
        padding: 4px;
    }

    /* Optimize chat space */
    .welcome-message {
        padding: 8px;
    }

    .welcome-icon {
        margin-bottom: 8px;
    }

    /* Modal adjustments */
    .modal-content {
        max-height: 95vh;
    }
}

/* ==========================================
   iOS SPECIFIC FIXES
   ========================================== */

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

    /* Prevent bounce scroll */
    body {
        position: fixed;
        width: 100%;
        overflow: hidden;
    }

    .chat-main {
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    }

    /* Fix input focus zoom */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea,
    select {
        font-size: 16px !important;
    }

    /* Safe area for notch */
    .app-header {
        padding-top: max(8px, env(safe-area-inset-top));
    }

    .input-area {
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }
}

/* ==========================================
   ANDROID SPECIFIC FIXES
   ========================================== */

@media screen and (max-width: 400px) and (-webkit-min-device-pixel-ratio: 2) {
    /* High DPI Android devices */

    /* Ensure text is crisp */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* Fix button tap highlight */
    button,
    .btn,
    a {
        -webkit-tap-highlight-color: rgba(52, 152, 219, 0.2);
    }
}