/* PRODUCTION CSS FIXES - Dec 2025 */
/* 
   FIXES:
   1. Eliminate nested scrollbars
   2. Full window display for all responses
   3. Responsive game grid
   4. Mobile-optimized layouts
   5. FORM FIELD SIZING - Title LONG, Duration SHORT
*/

/* ==========================================
   GLOBAL SCROLLBAR FIX - OUTER ONLY
   ========================================== */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    overflow-y: auto; /* Main scroll only */
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto; /* Outer scroll only */
    min-height: 100vh;
}

/* Remove ALL inner container scrollbars */
.tab-pane,
.response-container,
.output-container,
#chatOutput,
#malangaOutput,
#speechOutput,
#letterOutput,
#pptOutput {
    overflow: visible !important; /* No inner scroll */
    max-height: none !important; /* No height restriction */
    height: auto !important;
}

/* ==========================================
   FULL WINDOW DISPLAY - NO NESTED SCROLL
   ========================================== */
.response-wrapper {
    width: 100%;
    max-width: 100%;
    overflow: visible !important;
}

.response-area,
#chat-out,
#letter-out,
#malanga-out,
#speech-out {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
}

/* ==========================================
   FORM FIELD SIZING FIXES - EXACT TARGETING
   Fix: Title/Theme fields LONG, Duration fields SHORT
   ========================================== */

/* ===== TITLE/THEME FIELDS - LONG (Full Width) ===== */

/* Malanga Tab - Theme Field */
#malanga-theme {
    width: 100% !important;
    max-width: 600px !important;
    min-width: 300px !important;
}

/* Speech Tab - Theme Field */
#speech-theme {
    width: 100% !important;
    max-width: 600px !important;
    min-width: 300px !important;
}

/* PPT Tab - Title Field */
#ppt-title {
    width: 100% !important;
    max-width: 600px !important;
    min-width: 300px !important;
}

/* Letter Tab - Subject/Title Fields (dynamically created) */
input[name="subject"],
input[placeholder*="subject" i],
input[placeholder*="title" i],
#letterSubject,
#letter-subject {
    width: 100% !important;
    max-width: 600px !important;
    min-width: 300px !important;
}

/* Generic fallback for any field with "title" or "theme" in ID */
input[id*="title"],
input[id*="Title"],
input[id*="theme"],
input[id*="Theme"],
input[id*="subject"],
input[id*="Subject"] {
    width: 100% !important;
    max-width: 600px !important;
    min-width: 300px !important;
}

/* ===== DURATION FIELDS - SHORT (120px) ===== */

/* Malanga Tab - Duration Field */
#malanga-minutes {
    width: 120px !important;
    max-width: 150px !important;
    min-width: 80px !important;
}

/* Speech Tab - Duration Field */
#speech-minutes {
    width: 120px !important;
    max-width: 150px !important;
    min-width: 80px !important;
}

/* Generic fallback for any field with "minutes" or "duration" in ID */
input[id*="minutes"],
input[id*="Minutes"],
input[id*="duration"],
input[id*="Duration"],
input[type="number"][placeholder*="min" i],
input[type="number"][placeholder*="duration" i] {
    width: 120px !important;
    max-width: 150px !important;
    min-width: 80px !important;
}

/* ===== AUDIENCE FIELDS - MEDIUM WIDTH ===== */
input[id*="audience"],
input[id*="Audience"],
input[placeholder*="audience" i] {
    width: 100% !important;
    max-width: 400px !important;
    min-width: 250px !important;
}

/* Ensure input groups maintain proper spacing */
.input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 15px;
}

.input-group label {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
}

/* ==========================================
   RESPONSIVE DESIGN - MOBILE OPTIMIZATION
   ========================================== */
@media (max-width: 768px) {
    /* Title/Theme fields remain full width on mobile */
    #malanga-theme,
    #speech-theme,
    #ppt-title,
    input[id*="title"],
    input[id*="theme"],
    input[id*="subject"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 200px !important;
    }
    
    /* Duration fields stay compact on mobile */
    #malanga-minutes,
    #speech-minutes,
    input[id*="minutes"],
    input[id*="duration"],
    input[type="number"][id*="minutes"] {
        width: 100px !important;
        max-width: 120px !important;
    }
    
    /* Audience fields adapt to mobile */
    input[id*="audience"] {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ==========================================
   CHATBOT SPECIFIC - ONLY CHATBOT SCROLLS
   ========================================== */
#chatbotBody {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: calc(100vh - 300px) !important;
}

/* ==========================================
   CROSSWORD GAME - RESPONSIVE GRID
   ========================================== */
.crossword-grid {
    display: grid;
    gap: 2px;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .crossword-grid {
        gap: 1px;
        font-size: 12px;
    }
}

/* ==========================================
   PRINT STYLES
   ========================================== */
@media print {
    body {
        overflow: visible !important;
    }
    
    .tab-pane,
    .response-area {
        overflow: visible !important;
        max-height: none !important;
        page-break-inside: avoid;
    }
}

/* ==========================================
   ADMIN DASHBOARD FIXES (if enabled)
   ========================================== */
.admin-dashboard .tab-pane {
    overflow-y: auto !important; /* Admin needs scrolling for logs */
    max-height: 70vh !important;
}

.admin-logs {
    overflow-y: auto !important;
    max-height: 400px !important;
}
/* ==========================================
   CHATBOT INPUT ENHANCEMENT
   Makes input field LARGE and fully visible
   ========================================== */

/* Main input row - reorganized layout */
#chatbotInputRow {
    display: flex;
    padding: 14px;
    background: #1e1e1e;
    border-top: 1px solid #333;
    gap: 10px;
    flex-direction: column !important; /* Stack vertically */
    align-items: stretch !important;
}

/* Language selectors - top row */
.chatbot-lang-row {
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
}

#chatbotInputLang,
#chatbotOutputLang {
    background: #2d2d2d !important;
    color: white !important;
    border: 2px solid var(--theme-primary) !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    flex: 1 !important;
    min-width: 120px !important;
}

#chatbotInputRow select option {
    background: #2d2d2d !important;
    color: white !important;
}

/* Message input row - bottom row with LARGE input */
.chatbot-message-row {
    display: flex !important;
    gap: 10px !important;
    width: 100% !important;
    align-items: flex-end !important;
}

/* LARGE INPUT FIELD - Full visibility! */
#chatbotInput {
    flex: 1 !important;
    background: #2d2d2d !important;
    color: white !important;
    border: 2px solid var(--theme-primary) !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    min-height: 80px !important;  /* Tall enough for 3-4 lines */
    max-height: 120px !important;
    resize: vertical !important;  /* Let user resize if needed */
    font-family: inherit !important;
    
    /* Better text wrapping */
    word-wrap: break-word !important;
    white-space: pre-wrap !important;
    overflow-y: auto !important;
}

#chatbotInput::placeholder {
    color: #888 !important;
    opacity: 0.8 !important;
}

#chatbotInput:focus {
    outline: none !important;
    border-color: #E63946 !important;
    box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.2) !important;
}

/* Send button */
#chatbotInputRow button {
    background: var(--theme-primary) !important;
    color: white !important;
    border: none !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    font-size: 18px !important;
    font-weight: bold !important;
    box-shadow: 0 4px 15px rgba(196,30,58,0.5) !important;
    transition: all 0.2s !important;
    flex-shrink: 0 !important;
}

#chatbotInputRow button:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 6px 20px rgba(196,30,58,0.7) !important;
}

#chatbotInputRow button:active {
    transform: scale(0.98) !important;
}

/* Mobile optimization */
@media (max-width: 768px) {
    #chatbotInput {
        min-height: 70px !important;
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
    
    .chatbot-lang-row {
        flex-direction: column !important;
    }
    
    #chatbotInputLang,
    #chatbotOutputLang {
        width: 100% !important;
    }
    
    #chatbotInputRow button {
        width: 52px !important;
        height: 52px !important;
    }
}

/* Improve chatbot body spacing with new larger input */
#chatbotBody {
    padding-bottom: 20px !important;
    margin-bottom: 10px !important;
}