/* ===================================
   CUSTOM FIXES FOR TRAIN WITH GEO
   =================================== */

/* Force full screen on all devices */
body.page-template-page-template-chatbot {
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

html {
    margin: 0 !important;
    padding: 0 !important;
}

.train-with-geo-wrapper {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.train-with-geo-wrapper .container {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
}

.train-with-geo-wrapper .chat-container {
    height: calc(100vh - 80px) !important;
}

/* Fix send button visibility */
#sendBtn,
.input-wrapper button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    background: linear-gradient(135deg, #2D6A4F, #40916C) !important;
    border: none !important;
    color: white !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    border-radius: 12px !important;
    cursor: pointer !important;
}

/* Ensure send button SVG is always visible */
#sendBtn svg,
.input-wrapper button svg,
#sendBtn svg *,
.input-wrapper button svg * {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    stroke: white !important;
    stroke-width: 2 !important;
    fill: none !important;
    pointer-events: none !important;
}

#sendBtn svg line,
#sendBtn svg polygon,
.input-wrapper button svg line,
.input-wrapper button svg polygon {
    stroke: white !important;
    stroke-width: 2 !important;
    fill: none !important;
}

/* Ensure input container is properly styled */
.input-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Header improvements */
.train-with-geo-wrapper .header-content {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 15px 30px !important;
    width: 100% !important;
}

/* Logo section - clickable, stays on left */
.train-with-geo-wrapper .logo {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    transition: opacity 0.3s ease !important;
}

.train-with-geo-wrapper .logo:hover {
    opacity: 0.8 !important;
}

/* Logo icon - ensure image displays properly */
.train-with-geo-wrapper .logo-icon {
    width: 50px !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.train-with-geo-wrapper .logo-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
}

/* Clear Chat button styling - on the right */
.clear-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 20px !important;
    background: rgba(45, 106, 79, 0.2) !important;
    border: 1px solid rgba(45, 106, 79, 0.3) !important;
    border-radius: 8px !important;
    color: white !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    margin-left: auto !important;
}

.clear-btn:hover {
    background: rgba(45, 106, 79, 0.3) !important;
    border-color: rgba(45, 106, 79, 0.4) !important;
}

/* ===================================
   MOBILE RESPONSIVE STYLES
   =================================== */

@media (max-width: 768px) {
    /* Force full screen on mobile - remove ALL padding/margins */
    html {
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    body,
    body.page,
    body.page-template,
    body.page-template-default {
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
    }

    /* Hide WordPress admin bar on mobile */
    #wpadminbar {
        display: none !important;
    }

    .train-with-geo-wrapper {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 999999 !important;
    }

    /* Compact header on mobile - just logo and clear button */
    .train-with-geo-wrapper .header {
        padding: 10px 15px !important;
        min-height: 60px !important;
        max-height: 60px !important;
    }

    .train-with-geo-wrapper .header-content {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 10px 15px !important;
    }

    /* Logo - clickable, compact */
    .train-with-geo-wrapper .logo {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        flex: 1 !important;
        min-width: 0 !important;
    }

    .train-with-geo-wrapper .logo-icon {
        width: 42px !important;
        height: 42px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    .train-with-geo-wrapper .logo-icon img,
    .train-with-geo-wrapper .logo-icon svg {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        object-fit: contain !important;
    }

    .train-with-geo-wrapper .logo h1 {
        font-size: 1.2em !important;
        margin: 0 !important;
        line-height: 1 !important;
    }

    .train-with-geo-wrapper .tagline {
        font-size: 0.6em !important;
        white-space: nowrap !important;
        line-height: 1 !important;
    }

    /* Clear Chat button - compact, icon only on mobile */
    .clear-btn {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding: 12px !important;
        font-size: 12px !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
        background: rgba(45, 106, 79, 0.2) !important;
        border: 1px solid rgba(45, 106, 79, 0.3) !important;
        border-radius: 8px !important;
        color: white !important;
        white-space: nowrap !important;
        min-width: 44px !important;
        min-height: 44px !important;
        justify-content: center !important;
    }

    .clear-btn span {
        display: none !important; /* Hide text on mobile, show only icon */
    }

    .clear-btn svg {
        width: 16px !important;
        height: 16px !important;
        stroke: white !important;
        flex-shrink: 0 !important;
    }

    /* Chat container adjustments - use dynamic viewport height */
    /* Account for header (60px) + input area */
    .chat-container,
    .train-with-geo-wrapper .chat-container {
        height: calc(100dvh - 60px) !important;
        display: flex !important;
        flex-direction: column !important;
        position: relative !important;
    }

    /* Input container fixed at bottom */
    .input-container {
        flex-shrink: 0 !important;
        z-index: 100 !important;
    }

    .messages {
        padding: 15px 10px 80px 10px !important; /* Extra padding at bottom */
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important; /* Smooth scrolling on iOS */
        scroll-behavior: smooth !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Message bubbles */
    .message {
        max-width: 85% !important;
    }

    .message-text {
        font-size: 14px !important;
        padding: 12px 15px !important;
    }

    /* Input area */
    .input-container {
        padding: 10px !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: rgba(30, 30, 30, 0.95) !important;
        backdrop-filter: blur(10px) !important;
    }

    .input-wrapper {
        width: 100% !important;
    }

    .input-wrapper input {
        font-size: 16px !important; /* Prevent zoom on iOS */
        padding: 12px 15px !important;
        flex: 1 !important;
    }

    #sendBtn,
    .input-wrapper button {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Ensure send button SVG icon is visible */
    #sendBtn svg,
    .input-wrapper button svg {
        width: 20px !important;
        height: 20px !important;
        display: block !important;
        stroke: white !important;
        fill: none !important;
        stroke-width: 2 !important;
    }

    /* Avatar */
    .avatar {
        width: 35px !important;
        height: 35px !important;
        font-size: 16px !important;
    }
}

/* Small phones */
@media (max-width: 480px) {
    .train-with-geo-wrapper .logo h1 {
        font-size: 1.1em !important;
    }

    .message {
        max-width: 90% !important;
    }

    .message-text {
        font-size: 13px !important;
    }

    .input-wrapper input {
        font-size: 13px !important;
    }

    /* Make chatbot full screen on small phones */
    .train-with-geo-wrapper {
        border-radius: 0 !important;
    }

    .chat-container {
        height: calc(100vh - 100px) !important;
    }
}

/* Landscape mobile */
@media (max-width: 896px) and (orientation: landscape) {
    .chat-container {
        height: calc(100vh - 100px) !important;
    }

    .messages {
        padding: 10px !important;
    }
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
    /* Larger tap targets for touch devices */
    #sendBtn,
    .clear-btn,
    #backToWebsiteBtn {
        min-height: 44px !important; /* Apple's recommended minimum tap target */
        min-width: 44px !important;
    }

    /* Prevent text selection on buttons */
    .clear-btn,
    #backToWebsiteBtn {
        -webkit-user-select: none !important;
        user-select: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    /* Better input focus on mobile */
    .input-wrapper input:focus {
        font-size: 16px !important; /* Prevents iOS zoom on input focus */
    }
}