/* --- 1. General Reset & Wrapper --- */
    #topo-ai-wrapper, 
    #topo-ai-wrapper * {
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
        box-sizing: border-box !important;
    }

 #topo-ai-wrapper {
        position: relative;
        display: block; /* Back to normal document flow */
        font-size: 16px;
        color: #1e293b;
    }

    /* --- 2. Layout & Containers --- */
    .topo-container {
        width: 100%;
        max-width: 56rem; /* max-w-4xl */
        margin-left: auto;
        margin-right: auto;
    }

.topo-chat-history {
    padding: 1rem;
        /* Removed padding-bottom */
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    @media (min-width: 768px) {
        .topo-chat-history {
            padding: 1.5rem;
        }
    }

    /* --- 3. Chat Bubbles --- */
    .topo-msg-row {
        display: flex;
    }

    .topo-msg-left { justify-content: flex-start; }
    .topo-msg-right { justify-content: flex-end; }

    .topo-bubble {
	padding: 1rem 1.25rem;
        border-radius: 1rem;
        max-width: 90%;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        word-wrap: break-word;
    }

    @media (min-width: 768px) {
        .topo-bubble { max-width: 80%; }
    }

    /* AI Bubble */
    .topo-bubble-ai {
        background-color: #ffffff;
        border: 1px solid #e2e8f0;
        border-top-left-radius: 0.125rem; /* rounded-tl-sm */
    }

    /* User Bubble (Updated to Green) */
    .topo-bubble-user {
        background-color: #16a34a; /* Nice green */
        padding: 1rem; /* p-4 */
        border-top-right-radius: 0.125rem; /* rounded-tr-sm */
        border: none;
    }

    .topo-bubble-user p {
        color: #ffffff !important;
        margin: 0 !important;
        font-size: 15px !important;
        line-height: 1.5 !important;
        white-space: pre-wrap;
    }

    /* Error Bubble */
    .topo-bubble-error {
        background-color: #fef2f2;
        border: 1px solid #fecaca;
        border-top-left-radius: 0.125rem;
    }

    /* Full-width AI response container */
  .topo-bubble-ai-full {
        background-color: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 1rem;
        border-top-left-radius: 0.125rem; /* Adds the sharp top-left corner */
        width: 100%;
        overflow: hidden;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    }

    /* --- 4. Form & Input --- */
.topo-input-area {
        position: absolute; /* Docks normally to the bottom of the chat */
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 50;
        
        background-color: rgba(255, 255, 255, 0.85); 
        backdrop-filter: blur(8px); 
        -webkit-backdrop-filter: blur(8px);
        padding-bottom: 1.5rem;
        padding-top: 1rem;
    }

    /* Class automatically added by JavaScript when scrolling */
    .topo-input-fixed {
        position: fixed !important;
        /* Width and left are handled dynamically by JS to fit your WordPress layout */
    }
    .topo-input-flex {
        display: flex;
	flex-direction: column;
        align-items: flex-end;
        gap: 1rem; /* Added space between input and button */
        padding-left: 1rem;
        padding-right: 1rem;
    }

    @media (min-width: 768px) {
        .topo-input-flex { padding-left: 1.5rem; padding-right: 1.5rem; }
    }

    .topo-textarea-wrapper {
         width: 100%;            /* Forces the text box to take the full width */
        position: relative;
        display: flex;
        align-items: center;
    }

    .topo-textarea {
        width: 100%;
        padding: 1rem 1.25rem;
        background-color: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 0.75rem;
        outline: none;
        transition: all 0.2s;
        resize: none;
        overflow: hidden;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        color: #1e293b !important;
        min-height: 52px;
        display: block;
        margin: 0 !important;
    }

    @media (min-width: 768px) {
        .topo-textarea { padding: 1rem; }
    }

    .topo-textarea:focus {
        box-shadow: 0 0 0 2px #22c55e; /* Green focus ring */
        border-color: transparent;
    }

    /* Updated Send Button */
    .topo-submit-btn {
        background-color: #16a34a;
        color: #ffffff !important;
        font-weight: 600;
        font-size: 15px;
        border-radius: 0.75rem;
        transition: background-color 0.2s;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        border: 1px solid transparent !important;
        cursor: pointer;
        flex-shrink: 0;

        /* Mobile sizing */
        height: 44px; /* Slightly shorter on mobile looks better */
        width: auto;
        padding: 0 1.5rem !important;
        margin: 0 !important;

        /* Reset your manual nudge for mobile so it doesn't look weird sitting alone */
        transform: none;
    }

    .topo-platform-select {
        height: 44px; /* Matches the mobile Send button height */
        padding: 0 12px;
        border-radius: 0.75rem !important; /* Matches button border-radius */
        border: 1px solid #e2e8f0;
        background-color: #fff;
        font-family: inherit;
        font-size: 14px;
        cursor: pointer;
        color: #1e293b;
        outline: none;
        transition: all 0.2s;
    }

    .topo-platform-select:focus {
        border-color: #22c55e; /* Matches the textarea focus ring color */
    }

    .topo-submit-btn:hover:not(:disabled) { background-color: #15803d; /* Darker green on hover */ }
    .topo-submit-btn:disabled { opacity: 0.75; cursor: not-allowed; }

    .topo-controls-group {
        display: flex;
        align-items: center;
        gap: 0.5rem; /* Adds space between dropdown and button */
        flex-shrink: 0;
    }

    /* --- Lock Font Sizes Across All Devices --- */
    .topo-bubble,
    .topo-bubble p,
    .topo-textarea {
        font-size: 16px !important; /* 16px guarantees consistency and stops iOS zooming */
        -webkit-text-size-adjust: 100%; /* Stops mobile browsers from auto-scaling text */
        text-size-adjust: 100%;
    }

    /* --- Tablet & Desktop (Side-by-Side Layout) --- */
    @media (min-width: 768px) {
        .topo-input-flex {
            flex-direction: row; /* Snaps them back side-by-side */
            align-items: center; /* Centers them vertically */
            gap: 1rem;
        }

        .topo-textarea-wrapper {
            flex: 1 1 0%; /* Let the input box dynamically share space with the button again */
            width: auto;
        }

	.topo-controls-group {
            transform: translateY(0px); /* Move the 6px nudge to the wrapper group */
        }

        .topo-submit-btn,
        .topo-platform-select {
            height: 52px; /* Restore full height for desktop on both elements */
        }

        .topo-submit-btn {
            transform: none; /* Remove the individual nudge since the group handles it */
        }
    }

    /* --- 5. Inner Markdown Styles --- */
    #topo-ai-wrapper .prose-container {
        padding: 24px !important;
        background-color: #ffffff !important;
        border-radius: 12px !important; 
    }

    #topo-ai-wrapper .prose p,
    #topo-ai-wrapper .prose li {
        font-size: 15px !important;
        color: #1e293b !important;
        line-height: 1.6 !important;
        margin-bottom: 1rem !important;
    }
    
    #topo-ai-wrapper .prose p:last-child { margin-bottom: 0 !important; }

    #topo-ai-wrapper .prose h1,
    #topo-ai-wrapper .prose h2,
    #topo-ai-wrapper .prose h3 {
        color: #0f172a !important;
        font-weight: 600 !important;
        margin-top: 1rem !important;
        margin-bottom: 0.5rem !important;
        font-size: 1.1rem !important;
    }

    #topo-ai-wrapper .prose img {
        max-width: 100% !important;
        max-height: 400px !important;
        width: auto !important;
        height: auto !important;
        border-radius: 8px !important;
        margin: 1rem auto !important; /* NEW: 'auto' centers the block horizontally */
        display: block !important;
    }

    #topo-ai-wrapper .prose em {
        display: block !important;
        text-align: center !important; /* Centers the text */
        font-size: 0.9rem !important;  /* Makes it slightly smaller than body text */
        color: #64748b !important;     /* A nice subtle gray */
        margin-top: -0.5rem !important;/* Pulls it slightly closer to the image */
        font-style: italic !important;
    }

    #topo-ai-wrapper .prose a:has(img) {
        text-decoration: none !important;
        display: block !important;
    }

    #topo-ai-wrapper .prose ul,
    #topo-ai-wrapper .prose ol {
        margin-left: 1.5rem !important;
        margin-bottom: 1rem !important;
        padding: 0 !important;
    }

    #topo-ai-wrapper .prose li { margin-bottom: 0.4rem !important; }

	#topo-ai-wrapper .topo-source-link {
    	color: #16a34a !important;
 	    text-decoration: none !important;
    	transition: color 0.2s ease, text-decoration 0.2s ease;
	}

	#topo-ai-wrapper .topo-source-link:hover {
		color: #15803d !important;
    	text-decoration: underline !important;
    }
	
    #topo-ai-wrapper .sources-container {
        margin-top: 16px !important;
        padding: 16px 24px !important;
        border-top: 1px solid #dcfce7 !important; /* Light green border */
        background-color: #f0fdf4 !important; /* Very light green background */
        border-bottom-left-radius: 1rem !important; /* Matched to outer wrapper */
        border-bottom-right-radius: 1rem !important; /* Matched to outer wrapper */
    }

    /* --- 6. Animations --- */
    .topo-loading-dots { display: flex; space-x: 0.25rem; align-items: center; justify-content: center; gap: 4px; }
    .topo-dot { width: 8px; height: 8px; background-color: #16a34a; /* Green dots */ border-radius: 50%; animation: topo-bounce 1s infinite; }
    .topo-dot:nth-child(1) { animation-delay: -0.3s; }
    .topo-dot:nth-child(2) { animation-delay: -0.15s; }
    .topo-dot:nth-child(3) { animation-delay: 0s; }

    .topo-icon-spin { animation: topo-spin 1s linear infinite; height: 20px; width: 20px; color: white; }

    @keyframes topo-bounce {
        0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1); }
        50% { transform: none; animation-timing-function: cubic-bezier(0,0,0.2,1); }
    }
    @keyframes topo-spin {
        to { transform: rotate(360deg); }
    }


    @media (max-width: 767px) {
        #scrollUp,
	#ast-scroll-top,
        #generate-scroll-to-top,
        #scroll-up,
        .et_pb_scroll_top,
        .back-to-top,
        .scroll-to-top,
        #back-to-top,
        .to-top {
            display: none !important;
        }
    }