/* =========================================
   1. CORE CONTAINER (FLEX ROW)
   ========================================= */
.binaryph-chatbot-container {
    --bg-light-sidebar: #f9f9f9;
    --bg-dark-sidebar: #171717;
    --bg-dark-main: #212121;
    --accent-color: #3b82f6;

    display: flex;
    flex-direction: row; /* Side-by-side layout */
    height: 600px;       /* Fallback height */
    position: relative;
    
    /* FIX: ISOLATION creates a new stacking context. */
    isolation: isolate;
    z-index: 1; 

    overflow: hidden;
    border: 1px solid #ccc;
    border-radius: 12px;
    background: #fff;
    color: #333;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    max-width: 100%; /* Ensure it doesn't overflow width */
    box-sizing: border-box;
}

/* FULLSCREEN FIX */
.binaryph-chatbot-container.fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important; 
    bottom: 0 !important; 
    width: auto !important;
    height: auto !important;
    z-index: 2147483647 !important; 
    border-radius: 0 !important;
    margin: 0 !important;
    border: none !important;
    isolation: auto; 
}

.binaryph-chatbot-container * { box-sizing: border-box; }

/* Dark Mode Vars */
.binaryph-chatbot-dark {
    background: var(--bg-dark-main);
    color: #fff;
    border: 1px solid #333;
}

/* =========================================
   2. SIDEBAR (FIXED WIDTH)
   ========================================= */
.binaryph-chatbot-sidebar {
    width: 260px;          
    min-width: 260px;      
    flex-shrink: 0;        
    background: var(--bg-light-sidebar);
    border-right: 1px solid rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    z-index: 100; 
    position: relative;
}
.binaryph-chatbot-dark .binaryph-chatbot-sidebar {
    background: var(--bg-dark-sidebar);
    border-right: 1px solid rgba(255,255,255,0.1);
}

.binaryph-chatbot-sidebar.closed {
    width: 0;
    min-width: 0;
    overflow: hidden;
    border: none;
}

.binaryph-chatbot-sidebar-header {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sidebar-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sidebar-title { font-weight: 600; font-size: 14px; opacity: 0.8; }

.binaryph-mobile-close-sidebar {
    display: none; 
    background: transparent;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: inherit;
    line-height: 1;
    padding: 0 5px;
}

.sidebar-actions { display: flex; gap: 8px; }

/* New Chat Button */
.binaryph-new-chat {
    flex: 1;
    padding: 8px 12px;
    background: var(--accent-color);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}
.binaryph-new-chat:hover { opacity: 0.9; }

.binaryph-clear-all-conversations {
    background: transparent;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 6px;
    color: inherit;
    width: 36px; 
    font-size: 19px; 
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.binaryph-chatbot-dark .binaryph-clear-all-conversations { border-color: rgba(255,255,255,0.2); }
.binaryph-clear-all-conversations:hover { color: #ef4444; border-color: #ef4444; }

.binaryph-chatbot-history {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}
.binaryph-chatbot-log-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.binaryph-chatbot-log-list li {
    padding: 10px;
    font-size: 13px;
    cursor: pointer;
    border-radius: 6px;
    margin-bottom: 2px;
    display: flex; 
    justify-content: space-between;
    align-items: center;
}
.binaryph-chatbot-log-list li:hover { background: rgba(0,0,0,0.05); }
.binaryph-chatbot-dark .binaryph-chatbot-log-list li:hover { background: rgba(255,255,255,0.1); }

.conversation-title {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 8px;
}

/* Delete Icon */
.conversation-delete {
    flex-shrink: 0;
    opacity: 0.7;
    transition: all 0.2s;
    font-size: 16px; 
    padding: 5px; 
    margin-right: -5px; 
    cursor: pointer;
}
.conversation-delete:hover {
    opacity: 1;
    color: #ef4444;
}

/* Two-tap delete confirmation (confirm() dialogs don't fire in iOS webviews) */
.conversation-delete.confirm-state {
    opacity: 1;
    color: #ef4444;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.binaryph-clear-all-conversations.confirm-state {
    color: #ef4444;
    border-color: #ef4444;
    font-weight: 600;
}

/* Inline sidebar notice (replaces alert(), also suppressed in iOS webviews) */
.binaryph-sidebar-notice {
    margin: 0 0 8px;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.4;
    border-radius: 6px;
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
}
.binaryph-chatbot-dark .binaryph-sidebar-notice { color: #fca5a5; }

/* =========================================
   3. MAIN CONTENT (FLEX COL)
   ========================================= */
.binaryph-chatbot-main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    min-width: 0; 
    overflow: hidden; 
    z-index: 10; 
    background-color: inherit; /* FIX: Ensure main container inherits theme color */
}

/* Header */
.binaryph-chatbot-header {
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    z-index: 50;
    transition: opacity 0.3s ease;
    position: relative;
}

/* Sidebar Toggle */
.binaryph-sidebar-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
    padding: 5px;
}
.binaryph-sidebar-toggle:hover { opacity: 1; }

/* Fullscreen Toggle */
.binaryph-fullscreen-toggle {
    position: absolute;
    top: 10px;
    right: 15px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
    padding: 5px;
    z-index: 60;
    font-size: 24px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.binaryph-fullscreen-toggle:hover { opacity: 1; }

/* Messages Container */
.binaryph-chatbot-messages {
    flex: 1;
    overflow-y: auto;
    /* FIX: Force hide horizontal scrollbar */
    overflow-x: hidden !important;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    opacity: 1;
    transition: opacity 0.3s;
    background-color: inherit; /* FIX: Ensure scrollable area inherits theme color */
}
.binaryph-chatbot-container.is-hero-mode .binaryph-chatbot-messages {
    opacity: 0;
    pointer-events: none;
}

/* =========================================
   4. SCROLLBAR STYLING
   ========================================= */
.binaryph-chatbot-messages::-webkit-scrollbar,
.binaryph-chatbot-history::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.binaryph-chatbot-messages::-webkit-scrollbar-track,
.binaryph-chatbot-history::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.05);
    border-radius: 0;
}

.binaryph-chatbot-messages::-webkit-scrollbar-thumb,
.binaryph-chatbot-history::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.binaryph-chatbot-messages::-webkit-scrollbar-thumb:hover,
.binaryph-chatbot-history::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0,0,0,0.4);
}

.binaryph-chatbot-dark .binaryph-chatbot-messages::-webkit-scrollbar-track,
.binaryph-chatbot-dark .binaryph-chatbot-history::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.05);
}

.binaryph-chatbot-dark .binaryph-chatbot-messages::-webkit-scrollbar-thumb,
.binaryph-chatbot-dark .binaryph-chatbot-history::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,0.2);
}

.binaryph-chatbot-dark .binaryph-chatbot-messages::-webkit-scrollbar-thumb:hover,
.binaryph-chatbot-dark .binaryph-chatbot-history::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255,255,255,0.4);
}

/* FIX: Transparent Scrollbar Corner to blend with theme */
.binaryph-chatbot-messages::-webkit-scrollbar-corner,
.binaryph-chatbot-history::-webkit-scrollbar-corner {
    background: transparent;
}

/* =========================================
   5. INPUT AREA (Static & Safe)
   ========================================= */
/* In-flow footer: the messages viewport ends ABOVE the input, so message
   text can never sit hidden behind it (mobile has no visible scrollbar to
   hint that an overlaid tail is scrollable). Hero mode is the only state
   that overlays (messages are opacity:0 there); the hero<->chat slide is
   animated in JS via a FLIP transform because position changes can't
   transition in CSS. */
.binaryph-chatbot-input-wrapper {
    width: 100%;
    padding: 20px;
    box-sizing: border-box !important;
    display: flex;
    justify-content: center;
    z-index: 40;
    flex-shrink: 0;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.binaryph-chatbot-container.is-hero-mode .binaryph-chatbot-input-wrapper {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    max-width: 100%;
}

/* FIX 1: Static Input Design (Overrides Theme) */
.binaryph-chatbot-input {
    width: 100%;
    max-width: 700px !important;
    background: #f4f4f4;
    border-radius: 16px;
    /* Static Padding - Important to prevent theme overrides */
    padding: 15px 15px 6px 15px !important; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    gap: 0 !important; /* Safety against theme flex gaps */
    
    /* FIX 3: Force Auto Height */
    height: auto !important;
    min-height: 0 !important;

    transition: box-shadow 0.3s;
    /* Reset margins to prevent expansion */
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

/* FIX 4: HIDE INJECTED GHOST ELEMENTS (The "Something Added" Fix)
   .binaryph-chatbot-main is included because wpautop ghosts there would
   become flex items between the messages area and the input footer. */
.binaryph-chatbot-input > br,
.binaryph-chatbot-input > p,
.binaryph-chatbot-main > br,
.binaryph-chatbot-main > p {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 0 !important;
}

.binaryph-chatbot-dark .binaryph-chatbot-input {
    background: #2f2f2f;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

/* TextArea Reset */
.binaryph-chatbot-message-input {
    width: 100%;
    background: transparent;
    border: none !important;
    resize: none;
    
    /* FIX 2: Strict Height Enforcement */
    height: 99px !important; 
    min-height: 99px !important;
    max-height: 250px !important;
    
    outline: none !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: inherit;
    font-family: inherit;
    padding: 0 !important;
    margin: 0 0 5px 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

/* FIX 5: Increased Button Gaps */
.binaryph-chatbot-buttons {
    display: flex;
    justify-content: flex-end; 
    gap: 20px; /* Increased from 10px to prevent misclicks */
    align-items: center;
    padding-bottom: 5px; /* Slight buffer at bottom */
}

.binaryph-chatbot-buttons button {
    background: transparent;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
    padding: 8px; /* Increased hit area */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.binaryph-chatbot-buttons button:hover { background: rgba(0,0,0,0.1); opacity: 1; }
.binaryph-chatbot-dark .binaryph-chatbot-buttons button:hover { background: rgba(255,255,255,0.1); }

.binaryph-send-message {
    background: var(--accent-color) !important;
    color: white !important;
    opacity: 1 !important;
}

/* =========================================
   6. FILE PREVIEW AREA (Reference: Image Gen)
   ========================================= */
.binaryph-file-preview-container {
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 100%;
    display: flex; 
    align-items: center; /* Center vertically with the clear button */
    gap: 10px;
    /* CHANGED: Transparent background and no border */
    background: transparent;
    border: none;
    padding: 4px 0; /* Reduced padding to fit snugly */
    margin-bottom: 8px; /* Space before buttons */
    box-sizing: border-box;
    margin-top: 5px;
}

.binaryph-chatbot-dark .binaryph-file-preview-container {
    background: transparent;
    border: none;
}

.binaryph-file-list {
    flex: 0 1 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* Styled like a Chip/Label from Image Generator */
.binaryph-file-item {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #e5e7eb; /* Light mode chip */
    color: #374151;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    max-width: 100%;
    border: 1px solid transparent;
}

.binaryph-chatbot-dark .binaryph-file-item {
    background: #404040;
    color: #e5e7eb;
}

.binaryph-file-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Limit max width to prevent breaking layout on small screens */
    max-width: 250px; 
}

/* Note: Individual removal is disabled in combined view, but keeping class just in case */
.binaryph-file-remove {
    display: none; 
}

/* The X Clear All button */
.binaryph-clear-files {
    background: transparent;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    padding: 4px;
    border-radius: 50%;
    transition: all 0.2s;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.binaryph-clear-files:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

/* Mobile Tweaks for File Preview */
@media (max-width: 480px) {
    .binaryph-file-name {
        max-width: 180px;
    }
    .binaryph-file-preview-container {
        padding: 4px 0;
        margin-bottom: 8px;
        /* Ensure it doesn't break layout on very small screens */
        max-width: 100%;
    }
    .binaryph-file-item {
        font-size: 12px;
        padding: 4px 8px;
    }
}

/* =========================================
   7. HERO BRANDING & STATES
   ========================================= */
.binaryph-hero-branding {
    position: absolute;
    top: 15%; 
    left: 0; 
    width: 100%;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    transform: translateY(20px);
    z-index: 1;
}
.binaryph-hero-branding h2 { font-size: 32px; font-weight: 700; opacity: 0.9; margin: 0; }

.binaryph-chatbot-container.is-hero-mode .binaryph-hero-branding { 
    opacity: 1; 
    transform: translateY(0);
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.binaryph-user-message {
    align-self: flex-end;
    background: #e5e5e5;
    padding: 10px 16px;
    border-radius: 18px;
    border-bottom-right-radius: 4px;
    max-width: 85%;
    white-space: pre-wrap;
    /* FIX: Force wrapping to prevent horizontal scroll */
    overflow-wrap: break-word;
    word-break: break-word;
    animation: fadeInUp 0.4s ease-out forwards;
}
.binaryph-chatbot-dark .binaryph-user-message {
    background: #3f3f3f;
    color: white;
}

.binaryph-bot-message {
    align-self: flex-start;
    padding: 0 10px;
    max-width: 95%;
    line-height: 1.6;
    white-space: pre-wrap;
    /* FIX: Force wrapping to prevent horizontal scroll */
    overflow-wrap: break-word;
    word-break: break-word;
    animation: fadeInUp 0.4s ease-out forwards;
}

.user-copy-icon,
.bot-copy-icon {
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s;
    color: inherit;
    padding: 4px; 
}
.user-copy-icon:hover,
.bot-copy-icon:hover {
    opacity: 1;
}

/* =========================================
   8. GROK-STYLE LOADER
   ========================================= */
.binaryph-grok-loader {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    width: -webkit-fit-content;
    width: fit-content;
    padding: 10px;
    margin-left: 5px;
}
.binaryph-grok-loader .dot {
    width: 6px;
    height: 6px;
    background-color: #3b82f6; 
    border-radius: 50%;
    opacity: 0.3;
    animation: grokPulse 1.5s infinite ease-in-out;
}
.binaryph-chatbot-dark .binaryph-grok-loader .dot {
    background-color: #fff;
}

.binaryph-grok-loader .dot:nth-child(1) { animation-delay: 0s; }
.binaryph-grok-loader .dot:nth-child(2) { animation-delay: 0.1s; }
.binaryph-grok-loader .dot:nth-child(3) { animation-delay: 0.2s; }
.binaryph-grok-loader .dot:nth-child(4) { animation-delay: 0.1s; }
.binaryph-grok-loader .dot:nth-child(5) { animation-delay: 0.2s; }
.binaryph-grok-loader .dot:nth-child(6) { animation-delay: 0.3s; }
.binaryph-grok-loader .dot:nth-child(7) { animation-delay: 0.2s; }
.binaryph-grok-loader .dot:nth-child(8) { animation-delay: 0.3s; }
.binaryph-grok-loader .dot:nth-child(9) { animation-delay: 0.4s; }

@keyframes grokPulse {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* Mobile Tweaks */
@media (max-width: 768px) {
    .binaryph-chatbot-sidebar {
        position: absolute;
        height: 100%;
        left: 0; top: 0;
        transform: translateX(-100%);
        box-shadow: 2px 0 10px rgba(0,0,0,0.2);
        width: 63%;
        min-width: 153px;
        max-width: 320px;
        z-index: 200; 
    }
    .binaryph-chatbot-sidebar:not(.closed) {
        transform: translateX(0);
    }
    .binaryph-chatbot-sidebar.closed { 
        transform: translateX(-100%); 
        width: 63%;
    }
    
    .binaryph-mobile-close-sidebar {
        display: block;
    }
    
    .binaryph-chatbot-sidebar-header {
        gap: 30px; 
    }
    
    .binaryph-chatbot-input-wrapper { padding: 10px; }
    .binaryph-chatbot-container.is-hero-mode .binaryph-chatbot-input-wrapper { transform: translateY(-60%); width: 95%; }
}

/* =========================================
   9. MOBILE / CROSS-PLATFORM HARDENING (v3.8.3)
   ========================================= */

/* Momentum scrolling + stop scroll chaining to the page */
.binaryph-chatbot-messages,
.binaryph-chatbot-history {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Safe-area insets so the input row clears the iPhone home indicator */
.binaryph-chatbot-container.fullscreen .binaryph-chatbot-input-wrapper {
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    padding-left: calc(20px + env(safe-area-inset-left, 0px));
    padding-right: calc(20px + env(safe-area-inset-right, 0px));
}
.binaryph-chatbot-container.fullscreen .binaryph-chatbot-header {
    padding-top: env(safe-area-inset-top, 0px);
}

/* Dynamic viewport height: old WebViews take vh, modern ones take dvh */
.binaryph-chatbot-container.fullscreen {
    height: 100vh !important;
    height: 100svh !important;
    height: 100dvh !important;
}

/* Body scroll lock while fullscreen is active */
html.binaryph-fs-lock,
body.binaryph-fs-lock {
    overflow: hidden !important;
    overscroll-behavior: none;
}

/* Kill the 300ms tap delay and the grey tap flash */
.binaryph-chatbot-container button,
.binaryph-chatbot-container label,
.binaryph-chatbot-container .conversation-delete,
.binaryph-chatbot-container .user-copy-icon,
.binaryph-chatbot-container .bot-copy-icon,
.binaryph-chatbot-container .binaryph-chatbot-log-list li {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.08);
}

/* 44px tap targets on touch devices (pseudo-element halo, no layout shift) */
@media (hover: none) and (pointer: coarse) {
    .binaryph-clear-files,
    .conversation-delete,
    .binaryph-mobile-close-sidebar,
    .user-copy-icon,
    .bot-copy-icon,
    .binaryph-sidebar-toggle,
    .binaryph-chatbot-buttons button {
        position: relative;
    }
    .binaryph-clear-files::after,
    .conversation-delete::after,
    .binaryph-mobile-close-sidebar::after,
    .user-copy-icon::after,
    .bot-copy-icon::after,
    .binaryph-sidebar-toggle::after,
    .binaryph-chatbot-buttons button::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 44px;
        height: 44px;
        transform: translate(-50%, -50%);
    }
}

/* Visually-hidden file input: display:none inputs can't be opened
   programmatically in some iOS WKWebViews */
.binaryph-file-input.binaryph-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
    pointer-events: none;
}

/* overflow-wrap future-proofing (word-break: break-word is deprecated) */
.binaryph-user-message,
.binaryph-bot-message {
    overflow-wrap: anywhere;
}