/* ============================================
   CRITICAL FIXES - Chat Footer + Quiz Integration
   Fixes overlay issues, image upload, quiz modal
   ============================================ */

/* ========================================
   FIX 1: CHAT MESSAGES - CORRECT FOOTER SPACING
   ======================================== */

/* Chat messages must account for footer height + bottom nav */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    padding-bottom: 150px !important; /* Footer (70px) + Bottom Nav (60px) + buffer (20px) */
    background: #FAFAFA;
    margin-bottom: 0 !important; /* Remove margin, use padding instead */
}

/* Ensure messages don't get cut off */
#chatMessages {
    padding-bottom: 150px !important;
}

/* ========================================
   FIX 2: FOOTER - PROPER ATTACHMENT (NOT OVERLAY)
   ======================================== */

.chat-input-container {
    position: fixed;
    bottom: 60px; /* Above bottom nav */
    left: 0;
    right: 0;
    background: white;
    border-top: 1px solid #E0E0E0;
    padding: 12px 16px;
    z-index: 100; /* Below quiz modal (z-index: 9999) */
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05); /* Subtle elevation */
}

/* Ensure footer doesn't overlap content */
.chat-input-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

/* ========================================
   FIX 3: QUIZ AS FULLSCREEN MODAL (TOP LAYER)
   ======================================== */

/* Quiz overlay - covers EVERYTHING including footer */
#quizFlow {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    z-index: 9999 !important; /* Above everything */
    display: none; /* Hidden by default */
    flex-direction: column;
    overflow-y: auto;
}

#quizFlow.active {
    display: flex !important;
}

/* Quiz container fills screen */
.quiz-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Quiz content is scrollable if needed */
.quiz-content {
    flex: 1;
    overflow-y: auto;
    padding: 32px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========================================
   FIX 4: UNLOCK MODAL (ABOVE QUIZ)
   ======================================== */

#unlockModal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 10000 !important; /* Above quiz */
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(12px);
}

/* ========================================
   FIX 5: IMAGE UPLOAD - ENSURE VISIBILITY
   ======================================== */

/* Photo button must be visible and clickable */
.photo-btn {
    z-index: 1; /* Above input */
    position: relative;
    pointer-events: auto !important;
}

/* File input must be accessible */
#photoInput {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Upload progress must be above footer */
.photo-upload-progress {
    z-index: 101 !important; /* Above footer */
    bottom: 150px !important; /* Above footer + bottom nav */
}

/* ========================================
   FIX 6: PROFILE SELECTION (BEFORE QUIZ)
   ======================================== */

/* Profile selection is part of chat, not overlay */
#profileSelection {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    padding-bottom: 150px; /* Account for footer + bottom nav */
}

/* ========================================
   FIX 7: Z-INDEX HIERARCHY (DOCUMENTED)
   ======================================== */

/*
  Z-Index Hierarchy:

  0 - Default (chat content, messages)
  100 - Chat footer
  101 - Upload progress indicator
  1000 - Lightbox overlay
  9999 - Quiz modal (fullscreen)
  10000 - Unlock modal (above quiz)
*/

/* Lightbox */
#imageLightbox {
    z-index: 1000 !important;
}

/* ========================================
   FIX 8: MOBILE KEYBOARD COMPENSATION
   ======================================== */

/* When keyboard opens on mobile, ensure content is visible */
@media (max-width: 768px) {
    .chat-messages {
        padding-bottom: 160px !important; /* Extra space for mobile keyboard */
    }

    /* Prevent iOS zoom on input focus */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    textarea {
        font-size: 16px !important;
    }
}

/* ========================================
   FIX 9: ACTUALCHAT PROPER LAYOUT
   ======================================== */

#actualChat {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

/* Chat header */
#actualChat .chat-header {
    flex-shrink: 0;
    z-index: 10; /* Above messages, below footer */
}

/* Chat messages area */
#actualChat .chat-messages {
    flex: 1;
    overflow-y: auto;
    min-height: 0; /* Allow flex shrink */
}

/* ========================================
   FIX 10: QUIZ BACK BUTTON FUNCTIONALITY
   ======================================== */

/* Quiz back button must be above content */
.quiz-back-btn {
    z-index: 10;
    position: relative;
}

/* ========================================
   FIX 11: PREVENT FOOTER OVERLAP ON QUIZ
   ======================================== */

/* When quiz is active, hide footer (it's under the modal anyway) */
body:has(#quizFlow.active) .chat-input-container {
    display: none !important;
}

body:has(#quizFlow.active) .app-nav {
    display: none !important;
}

/* Alternative for older browsers */
.quiz-active .chat-input-container,
.quiz-active .app-nav {
    display: none !important;
}

/* ========================================
   FIX 12: SMOOTH TRANSITIONS
   ======================================== */

#quizFlow {
    transition: opacity 0.3s ease;
}

#quizFlow.active {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ========================================
   FIX 13: SCROLL BEHAVIOR
   ======================================== */

/* Prevent body scroll when quiz is open */
body.quiz-open {
    overflow: hidden;
}

/* Quiz container allows internal scroll */
#quizFlow {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ========================================
   FIX 14: TOUCH TARGETS (MOBILE)
   ======================================== */

/* Ensure buttons are easily tappable */
.quiz-choice {
    min-height: 60px;
    touch-action: manipulation; /* Prevent double-tap zoom */
}

.photo-btn,
.send-btn {
    touch-action: manipulation;
}

/* ========================================
   FIX 15: PREVENT LAYOUT SHIFT
   ======================================== */

/* Fixed heights to prevent jumping */
.chat-input-container {
    min-height: 70px;
    max-height: 70px;
}

.chat-header {
    min-height: 70px;
}

/* ========================================
   DEBUGGING (REMOVE IN PRODUCTION)
   ======================================== */

/* Uncomment to visualize layers */
/*
#quizFlow { border: 3px solid red !important; }
.chat-input-container { border: 3px solid blue !important; }
.chat-messages { border: 3px solid green !important; }
*/