/* --- START OF FILE style-scoped.css --- */

/* Global Variables */
#chatbot-app :root {
    --prepory-green: #0C6E46; /* Darker green from the mockup */
    --prepory-green-light: #e4f0ea; /* Light green background for user messages */
    --prepory-dark-blue: #003A61;
    --prepory-blue-light: #edf3f8; /* Light blue background for assistant messages */
    --text-primary: #2d3748; /* Warmer than pure black */
    --text-secondary: #718096; /* Warmer than pure gray */
    --background-page: #f5f7fa; /* Softer background than pure white */
    --background-container: #f8fafc; /* Softer chat area background */
    --border-color: #e2e8f0; /* Warmer border color */
    --shadow-color: rgba(0, 0, 0, 0.07); /* Softer shadow */
    --shadow-soft: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 5px 10px -5px rgba(0, 0, 0, 0.02);
    --shadow-medium: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --user-message-bg: var(--prepory-green-light);
    --assistant-message-bg: var(--prepory-blue-light);
    --error-color: #e53e3e;
    --transition-standard: all 0.2s ease-in-out;
    --avatar-size: 40px; /* Size for the chatbot avatar - increased for visibility */

    /* Input focus ring */
    --focus-ring: 0 0 0 3px rgba(12, 110, 70, 0.4);
}

/* Global Styles */
#chatbot-app *,
#chatbot-app *::before,
#chatbot-app *::after { /* Added ::before, ::after for thorough reset */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Consider a more targeted reset if needed, 'all: unset' can be too broad */
}


#chatbot-app body { /* Note: This likely won't apply as expected if #chatbot-app is not the body */
    font-family: 'Gotham Book', sans-serif !important; /* Add !important to combat theme */
    color: var(--text-primary);
    background-color: var(--background-page);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#chatbot-app { /* Apply base font to the container */
    font-family: 'Gotham Book', sans-serif !important; /* Add !important to combat theme */
    color: var(--text-primary);
    line-height: 1.6;
}


#chatbot-app .container {
    max-width: 1200px;
    margin: 1.5rem auto;
    padding: 0 1rem;
    height: calc(100vh - 3rem);
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Header Styles */
#chatbot-app .header {
    background-color: transparent;
    padding: 1rem 1.5rem;
    box-shadow: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    transition: var(--transition-standard);
}

#chatbot-app .logo {
    display: flex;
    align-items: center;
    gap: 1rem;
}

#chatbot-app .logo-image {
    max-height: 40px;
    max-width: 140px;
    object-fit: contain;
}

#chatbot-app .logo h1 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--prepory-dark-blue);
}

#chatbot-app .logo span {
    color: var(--prepory-green);
}

#chatbot-app .header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* User info display */
#chatbot-app .user-info-display {
    display: none;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-radius: 2rem;
    background-color: var(--prepory-green-light);
    font-size: 0.825rem;
    font-weight: 500;
    color: var(--prepory-dark-blue);
}

#chatbot-app .user-info-display.visible {
    display: flex;
}

#chatbot-app .user-info-display i {
    margin-right: 0.5rem;
    color: var(--prepory-green);
}

/* Status Indicator Redesign */
#chatbot-app .status-indicator {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-radius: 2rem;
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    font-size: 0.825rem;
    font-weight: 500;
    transition: var(--transition-standard);
    animation: pulse 2s infinite ease-in-out;
}

#chatbot-app .connected .status-dot {
    background-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3);
}

#chatbot-app .connecting .status-dot {
    background-color: #fbbf24;
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.3);
    animation: blink 1.5s infinite;
}

#chatbot-app .disconnected .status-dot {
    background-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3);
}

#chatbot-app .status-dot {
    height: 8px;
    width: 8px;
    border-radius: 50%;
    margin-right: 0.5rem;
    transition: var(--transition-standard);
}

#chatbot-app .connected .status-text {
    color: #10b981;
}

#chatbot-app .connecting .status-text {
    color: #fbbf24;
}

#chatbot-app .disconnected .status-text {
    color: #ef4444;
}

@keyframes blink {
0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.1); }
    70% { box-shadow: 0 0 0 5px rgba(16, 185, 129, 0); }
100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* Button Styles */
#chatbot-app .btn {
    border: none;
    border-radius: 0.5rem;
    padding: 0.75rem 1.25rem;
    font-family: 'Gotham Book', sans-serif !important; /* Add !important */
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-standard);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

#chatbot-app .btn:focus {
    outline: none;
    box-shadow: var(--focus-ring);
}

#chatbot-app .primary-btn {
    background-color: var(--prepory-green);
    color: white;
    box-shadow: 0 4px 6px rgba(40, 213, 128, 0.2);
}

#chatbot-app .primary-btn:hover {
    background-color: #25c676;
    transform: translateY(-1px);
    box-shadow: 0 6px 10px rgba(40, 213, 128, 0.3);
}

#chatbot-app .primary-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 3px rgba(40, 213, 128, 0.2);
}

#chatbot-app .btn i {
    margin-right: 0.5rem;
}

/* Chat Container */
#chatbot-app .chat-container {
    flex: 1;
    background-color: transparent;
    border-radius: 1rem;
    box-shadow: none;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: var(--transition-standard);
    position: relative;
    border: none;
}

/* Messages Area - Enhanced Scrolling */
#chatbot-app .messages {
    flex: 1;
    overflow-y: auto;
    padding-right: 0.75rem;
    margin-bottom: 1.5rem;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

#chatbot-app .messages::-webkit-scrollbar {
    width: 6px;
}

#chatbot-app .messages::-webkit-scrollbar-track {
    background: transparent;
}

#chatbot-app .messages::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 6px;
}

#chatbot-app .messages::-webkit-scrollbar-thumb:hover {
    background-color: #cbd5e0;
}

/* Scroll to bottom button */
#chatbot-app .scroll-bottom-btn {
    position: absolute;
    right: 1.5rem;
    bottom: 7.5rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: white;
    color: var(--text-secondary);
    box-shadow: var(--shadow-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-standard);
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    z-index: 10;
}

#chatbot-app .scroll-bottom-btn.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

#chatbot-app .scroll-bottom-btn:hover {
    background-color: var(--prepory-green-light);
    color: var(--prepory-green);
    transform: translateY(-2px);
}

/* Message Bubbles Redesign with Avatar */
#chatbot-app .message {
    max-width: 95%;
    margin-bottom: 1.5rem;
    position: relative;
    transition: var(--transition-standard);
    animation: fadeIn 0.3s ease-out;
    display: flex;
    align-items: flex-start;
}

#chatbot-app .message-avatar {
    width: var(--avatar-size);
    height: var(--avatar-size);
    border-radius: 50%;
    margin-right: 12px;
    flex-shrink: 0;
    overflow: hidden;
    background-color: white;
    border: 2px solid var(--border-color);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
	display: none; /* Keep hidden unless specifically needed */
}

#chatbot-app .message-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#chatbot-app .message-content-wrapper {
    flex: 1;
    min-width: 0; /* Needed for text overflow to work properly */
}

#chatbot-app .user-message {
    margin-left: auto;
    flex-direction: row-reverse;
	max-width: 66%;
}

#chatbot-app .user-message .message-content-wrapper {
    background-color: #f0f0f0; /* plain gray background */
    border-radius: 10px; /* uniform rounded corners */
    padding: 1rem 1.25rem;
    color: var(--text-primary);
    box-shadow: none;
    border: none;
	flex: initial;
}

#chatbot-app .user-message .message-avatar {
    margin-right: 0;
    margin-left: 12px;
    display: none; /* Hide user avatar by default */
}

#chatbot-app .assistant-message {
    margin-right: auto;
}

#chatbot-app .assistant-message .message-content-wrapper {
    background-color: transparent;
    border: none;
    padding: 0.5rem 1rem;
    color: var(--text-primary);
    box-shadow: none;
}

/* Assistant Avatar should be shown */
#chatbot-app .assistant-message .message-avatar {
    display: none; /* Show assistant avatar */
}


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

#chatbot-app .message-content {
    white-space: normal;
    word-break: break-word;
	line-height: 1.8; /* Base line-height for content */
}

/* === MODIFICATION START === */
/* Increased specificity & explicit styles for paragraphs inside message content */
#chatbot-app .chat-container .messages .message .message-content p {
    font-family: 'Gotham Book', sans-serif !important; /* Override theme !important */
    font-size: 0.95rem; /* Specific size */
    line-height: 1.8; /* Specific line height */
    color: var(--text-primary); /* Specific color */
    margin: 0 0 1.2rem 0; /* Explicit margin (T, R, B, L) */
    padding: 0; /* Reset padding */
    background: none; /* Reset background */
    border: none; /* Reset border */
    letter-spacing: normal; /* Reset spacing */
    text-transform: none; /* Reset transform */
}

/* Increased specificity for last-child paragraph */
#chatbot-app .chat-container .messages .message .message-content p:last-child {
    margin-bottom: 0 !important; /* Ensure no margin on last p - use !important if needed */
}

/* Increased specificity & explicit styles for lists inside message content */
#chatbot-app .chat-container .messages .message .message-content ul,
#chatbot-app .chat-container .messages .message .message-content ol {
   font-family: 'Gotham Book', sans-serif !important; /* Override theme !important */
   font-size: 0.95rem; /* Match paragraph size or adjust */
   line-height: 1.8; /* Match paragraph line-height */
   color: var(--text-primary);
   margin: 0 0 0.75rem 1.5rem; /* Original margins (T, R, B, L) - keeping left indent */
   padding: 0; /* Reset padding */
   list-style-position: outside; /* Default list style position */
}

/* Increased specificity & explicit styles for list items inside message content */
#chatbot-app .chat-container .messages .message .message-content li {
   font-family: 'Gotham Book', sans-serif !important; /* Override theme !important */
   font-size: 0.95rem; /* Match list size */
   line-height: 1.8; /* Match list line-height */
   color: var(--text-primary);
   margin: 0 0 0.5rem 0; /* Spacing below list item (T, R, B, L) */
   padding: 0; /* Reset padding */
   text-align: left; /* Override potential theme centering */
}
/* === MODIFICATION END === */


#chatbot-app .message-time {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
    text-align: right;
    opacity: 0.8;
}

/* Enhanced Typing Indicator with Status Messages */
#chatbot-app .typing-indicator {
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    position: relative;
    opacity: 1; /* Visible by default */
    transition: opacity 0.5s ease-out;
    padding: 0.75rem 1.5rem;
	gap: 8px;
}

/* Use this class to hide the indicator when not needed */
#chatbot-app .typing-indicator.hidden {
    opacity: 0;
    display: none !important; /* Ensure it takes no space and is hidden */
}

/* Fixed container for typing messages to avoid layout reflow */
#chatbot-app .typing-indicator .message-container {
    position: relative;
    flex: 1;
    height: 40px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* Status message container */
/* #chatbot-app .typing-status { } */ /* Removed, redundant */

/* Typing message animations */
#chatbot-app .typing-message {
    opacity: 0;
    position: absolute;
    top: 50%; /* Center vertically */
    left: 0;
    transform: translateY(-50%); /* Adjust for vertical centering */
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
    width: 100%;
    font-size: 0.9rem;
    color: var(--text-primary);
}


#chatbot-app .typing-message.active {
    opacity: 1;
    transform: translateY(-50%);
}

#chatbot-app .typing-message.inactive {
    opacity: 0;
    transform: translateY(-50%) translateY(-10px); /* Move up when inactive */
    position: absolute;
}


/* Typing dots animation */
/* #chatbot-app .typing-dots { } */ /* Removed - using LDS spinner instead */

/* Welcome Message */
#chatbot-app .welcome-message {
    text-align: center;
    padding: 2rem;
    animation: fadeIn 0.6s ease-out;
    max-width: 900px;
    margin: 0 auto;
}

#chatbot-app .welcome-icon {
    font-size: 3rem;
    color: var(--prepory-green);
    margin-bottom: 1.5rem;
    animation: float 3s infinite ease-in-out;
}

@keyframes float {
0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

#chatbot-app .welcome-message h2 {
    color: var(--prepory-dark-blue);
    margin-bottom: 1.25rem;
    font-weight: 600;
	font-size: 1.75rem;
}

#chatbot-app .welcome-message p {
    color: var(--text-secondary);
    margin-bottom: 1.75rem;
    font-size: 1.05rem;
    /* Ensure theme doesn't override welcome message p tags */
    font-family: 'Gotham Book', sans-serif !important;
    line-height: 1.6;
}

#chatbot-app .sample-questions {
    margin-top: 2.5rem;
    text-align: left;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    background-color: transparent;
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: none;
}

#chatbot-app .sample-questions p {
    margin-bottom: 1rem;
    font-weight: 500;
    /* Ensure theme doesn't override sample question p tags */
    font-family: 'Gotham Book', sans-serif !important;
    font-size: 1rem; /* Adjust if needed */
    line-height: 1.6;
    color: var(--text-primary);
}

#chatbot-app .sample-questions ul {
    list-style: none;
}

#chatbot-app .sample-questions li {
    margin-bottom: 0.75rem;
}

#chatbot-app .sample-btn {
    background: none;
    border: none;
    color: var(--prepory-dark-blue);
    text-align: left;
    font-size: 0.95rem;
    cursor: pointer;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    transition: var(--transition-standard);
    width: 100%;
    text-decoration: none;
    display: flex;
    align-items: center;
    font-family: 'Gotham Book', sans-serif !important; /*Add !important */
	text-transform: none !important;
}

#chatbot-app .sample-btn:before {
    content: "→";
    margin-right: 0.75rem;
    color: var(--prepory-green);
    font-weight: bold;
    transition: var(--transition-standard);
}

#chatbot-app .sample-btn:hover {
    background-color: var(--prepory-green-light);
    transform: translateX(3px);
}

#chatbot-app .sample-btn:hover:before {
    transform: translateX(3px);
}

/* Error message style */
#chatbot-app .error-message {
    color: var(--error-color);
    margin: 0.75rem 0;
    padding: 0.75rem 1rem;
    background-color: rgba(229, 62, 62, 0.1);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    max-width: 85%;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Gotham Book', sans-serif !important; /* Add !important */
}

#chatbot-app .error-message i {
    margin-right: 0.5rem;
}

/* Input Area - Modern Design */
#chatbot-app .input-container {
    display: flex;
    background-color: var(--background-page);
    border-radius: 1rem;
    padding: 0.75rem;
    margin-top: auto;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.03);
    position: relative;
    transition: var(--transition-standard);
}

#chatbot-app .input-container:focus-within {
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.07);
}

#chatbot-app textarea {
    flex: 1;
    border: none;
    background: white;
    padding: 1rem 1.25rem;
    resize: none;
    font-family: 'Gotham Book', sans-serif !important; /* Add !important */
    font-size: 0.95rem;
    min-height: 60px;
    max-height: 150px;
    outline: none;
    border-radius: 0.75rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
    transition: var(--transition-standard);
    color: var(--text-primary); /* Ensure text color */
    line-height: 1.6; /* Ensure line height */
}

#chatbot-app textarea:focus {
    box-shadow: var(--focus-ring);
}

#chatbot-app .send-btn { /* Kept for potential other uses, but mockup style uses svg-btn */
    background-color: var(--prepory-green);
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 1rem;
    padding: 0;
    margin-left: 0.75rem;
    align-self: center;
    box-shadow: 0 4px 6px rgba(40, 213, 128, 0.2);
}

#chatbot-app .send-btn i {
    margin: 0;
    transition: var(--transition-standard);
}

#chatbot-app .send-btn:hover {
    background-color: #25c676;
    transform: translateY(-2px);
    box-shadow: 0 6px 10px rgba(40, 213, 128, 0.3);
}

#chatbot-app .send-btn:hover i {
    transform: translateX(2px);
}

#chatbot-app .send-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 3px rgba(40, 213, 128, 0.2);
}

#chatbot-app .send-btn:disabled {
    background-color: #cbd5e0;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

#chatbot-app .input-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-secondary);
    padding: 0.75rem 0.5rem 0;
    opacity: 0.7;
}

/* Source Information */
#chatbot-app .message-sources {
    margin-top: 0.75rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    border-top: 1px solid var(--border-color);
    padding-top: 0.5rem;
}

#chatbot-app .sources-toggle {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    transition: var(--transition-standard);
    font-family: 'Gotham Book', sans-serif !important; /* Add !important */
}

#chatbot-app .sources-toggle:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

#chatbot-app .sources-toggle i {
    margin-right: 0.35rem;
    transition: transform 0.2s;
}

#chatbot-app .sources-toggle.open i {
    transform: rotate(90deg);
}

#chatbot-app .sources-list {
    display: none;
    margin-top: 0.5rem;
    padding-left: 1.25rem;
    opacity: 0;
    transition: var(--transition-standard);
}

#chatbot-app .sources-list.open {
    display: block;
    opacity: 1;
    animation: fadeIn 0.3s ease-out;
}

#chatbot-app .sources-list li {
    margin-bottom: 0.35rem;
    padding: 0.25rem 0;
    /* Ensure font overrides */
    font-family: 'Gotham Book', sans-serif !important;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* --- MODAL STYLES --- */
/* Use new class name and !important flags to override theme's .modal */
/* NOTE: Selectors related to #password-modal are removed */
#user-info-modal,
.chatbot-modal { /* Use the new class name */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    display: flex !important; /* Crucial for showing */
    justify-content: center !important;
    align-items: center !important;
    z-index: 99999 !important;
    overflow: hidden !important; /* Changed from scroll to hidden */
    background-color: transparent !important; /* Overlay handles dimming */
    padding: 0 !important; /* Override theme padding */
    border: none !important; /* Override theme border */
    box-shadow: none !important; /* Override theme shadow */
    text-align: initial !important; /* Override theme text-align */
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important; /* Allow interaction */
    animation: fadeIn 0.3s ease-out !important; /* Ensure fade-in */
    /* Ensure base font is applied within modal context */
    font-family: 'Gotham Book', sans-serif !important;
    color: var(--text-primary) !important;
    line-height: 1.6 !important;
}

/* Hide modal using new class name */
#user-info-modal.hidden,
.chatbot-modal.hidden {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}


/* Modal Overlay - Scoped to new class */
#user-info-modal .modal-overlay,
.chatbot-modal .modal-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(5px) !important;
    z-index: 1 !important; /* Below modal-content */
    animation: fadeIn 0.3s ease-out !important;
}

/* Modal Content - Scoped to new class */
#user-info-modal .modal-content,
.chatbot-modal .modal-content {
    background-color: white !important;
    padding: 2.5rem !important;
    border-radius: 1.25rem !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15), 0 5px 15px rgba(0, 0, 0, 0.08) !important;
    max-width: 500px !important; /* Adjust as needed */
    width: 90% !important; /* Adjust as needed */
    z-index: 2 !important; /* Above overlay */
    position: relative !important; /* Content positioning */
    max-height: 90vh !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
    animation: modalSlideIn 0.4s ease-out !important;
    display: block !important; /* Or flex etc. */
    visibility: visible !important;
    opacity: 1 !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important; /* Example border */
    text-align: center !important; /* Adjust alignment */
    /* Ensure base font is applied */
    font-family: 'Gotham Book', sans-serif !important;
    color: var(--text-primary) !important;
    line-height: 1.6 !important;
}

/* --- End Modal Style Overrides --- */


#chatbot-app .modal-content::-webkit-scrollbar { /* Keep this specific to chatbot */
    width: 6px;
}

#chatbot-app .modal-content::-webkit-scrollbar-track { /* Keep this specific to chatbot */
    background: transparent;
}

#chatbot-app .modal-content::-webkit-scrollbar-thumb { /* Keep this specific to chatbot */
    background-color: var(--border-color);
    border-radius: 6px;
}

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

/* Adjust header/paragraph styles WITHIN your modal content */
.chatbot-modal .modal-content h2 {
    margin-bottom: 1rem !important;
    color: var(--prepory-dark-blue) !important;
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    font-family: 'Gotham Book', sans-serif !important; /* Explicit font */
}

.chatbot-modal .modal-content p {
    margin-bottom: 1.75rem !important;
    color: var(--text-secondary) !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    font-family: 'Gotham Book', sans-serif !important; /* Explicit font */
}

/* Adjust INPUT styles WITHIN your modal content */
/* Use more specific selector to override broad theme input styles */
.chatbot-modal .modal-content input[type="text"],
.chatbot-modal .modal-content input[type="email"],
.chatbot-modal .modal-content input[type="tel"],
/* Removed password input type styling as it's no longer needed */
.chatbot-modal .modal-content select {
    width: 100% !important;
    padding: 0.9rem 1.1rem !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 0.75rem !important; /* Overrides theme's rounded */
    margin-bottom: 1.75rem !important;
    font-family: 'Gotham Book', sans-serif !important; /* Override theme font */
    font-size: 16px !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03) !important;
    transition: var(--transition-standard) !important;
    background-color: white !important;
    color: var(--text-primary) !important; /* Ensure text color is correct */
    height: auto !important; /* Override theme height */
    appearance: none !important; /* Override theme appearance */
    outline: none !important; /* Override theme outline */
    line-height: normal !important; /* Reset line height for inputs */
}


/* Specific focus style for modal inputs */
.chatbot-modal .modal-content input[type="text"]:focus,
.chatbot-modal .modal-content input[type="email"]:focus,
.chatbot-modal .modal-content input[type="tel"]:focus,
/* Removed password input type styling */
.chatbot-modal .modal-content select:focus {
    outline: none !important;
    border-color: var(--prepory-green) !important;
    box-shadow: var(--focus-ring) !important;
}

/* Modal Actions - Scoped */
.chatbot-modal .modal-actions {
    display: flex;
    justify-content: flex-end;
}

.chatbot-modal .modal-actions button { /* Ensure buttons inside are styled correctly */
    padding: 0.9rem 1.75rem;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    font-family: 'Gotham Book', sans-serif !important; /* Add !important */
    /* Add other button styles if needed */
}

/* Password Error - Scoped (Removed as #password-modal is gone) */
/* .chatbot-modal .password-error { ... } */

/* Password Success Animation - Scoped (Kept for User Info success) */
.chatbot-modal .password-success-animation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: white;
    border-radius: 1.25rem; /* Match modal content */
    opacity: 0;
    pointer-events: none;
    z-index: 1002; /* Above modal content */
    transition: opacity 0.4s ease;
}

.chatbot-modal .password-success-animation.show {
    opacity: 1;
    pointer-events: auto; /* Allow seeing it */
}

.chatbot-modal .success-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(145deg, #28d580, #21bd71);
    margin-bottom: 1.75rem;
    transform: scale(0);
    opacity: 0;
    box-shadow: 0 10px 25px rgba(40, 213, 128, 0.25),
                inset 0 2px 5px rgba(255, 255, 255, 0.5),
                inset 0 -3px 5px rgba(0, 0, 0, 0.1);
}

.chatbot-modal .success-text {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--prepory-dark-blue);
    transform: translateY(20px);
    opacity: 0;
    text-align: center;
    letter-spacing: 0.5px;
    font-family: 'Gotham Book', sans-serif !important; /* Add !important */
}

.chatbot-modal .password-success-animation.show .success-icon {
    animation: elegantFade 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}

.chatbot-modal .password-success-animation.show .success-text {
    animation: elegantText 0.5s ease forwards 0.5s;
}

@keyframes elegantFade {
0% {
        transform: scale(0);
        opacity: 0;
    }
100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes elegantText {
0% {
        transform: translateY(10px);
        opacity: 0;
    }
100% {
        transform: translateY(0);
        opacity: 1;
    }
}


/* --- Checkmark and other animations remain the same --- */
.checkmark { /* Assuming these are inside .success-icon */
    width: 60px;
    height: 60px;
    position: relative;
}
.checkmark-circle { /* Assuming these are inside .success-icon */
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 3;
    stroke-miterlimit: 10;
    stroke: white;
    fill: none;
    animation: elegantStroke 0.8s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark-check { /* Assuming these are inside .success-icon */
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    stroke-width: 5;
    stroke: white;
    fill: none;
    animation: elegantStroke 0.5s cubic-bezier(0.65, 0, 0.45, 1) 0.4s forwards;
}
@keyframes elegantStroke { 100% { stroke-dashoffset: 0; } }


/* --- User Info Form Styles (Scoped to chatbot-modal) --- */
/* Form group not used in HTML, styling inputs directly */

/* Scoped role selector */
.chatbot-modal .role-selector {
    display: flex;
    gap: 1rem;
}
.chatbot-modal .role-option {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    transition: var(--transition-standard);
    flex: 1;
    /* Ensure font */
    font-family: 'Gotham Book', sans-serif !important;
    font-size: 0.9rem;
    color: var(--text-primary);
}
.chatbot-modal .role-option:hover { background-color: var(--prepory-green-light); }
.chatbot-modal .role-option input[type="radio"] {
    width: auto !important; /* Override theme */
    margin-right: 0.5rem !important;
}
.chatbot-modal .role-option input[type="radio"]:checked + span { color: var(--prepory-green); font-weight: 600; }
.chatbot-modal .role-option:has(input[type="radio"]:checked) {
    border-color: var(--prepory-green);
    background-color: var(--prepory-green-light);
    box-shadow: 0 0 0 1px var(--prepory-green);
}

/* Scoped user info error */
.chatbot-modal .user-info-error {
    color: var(--error-color) !important;
    margin-bottom: 1.5rem !important;
    font-size: 0.9rem !important;
    padding: 0.9rem !important;
    background-color: rgba(229, 62, 62, 0.1) !important;
    border-radius: 0.75rem !important;
    display: none; /* Changed from flex to none, use JS to show */
    align-items: center !important;
    animation: fadeIn 0.3s ease-out;
    border: 1px solid rgba(229, 62, 62, 0.2) !important;
    font-family: 'Gotham Book', sans-serif !important; /* Ensure font */
    text-align: left !important; /* Ensure alignment */
}
.chatbot-modal .user-info-error.visible {
    display: flex !important; /* Use class to show */
}
.chatbot-modal .user-info-error i { margin-right: 0.5rem; }

/* Loading animation - Scoped */
.chatbot-modal .user-info-loading {
    /* display handled by JS */
    display: none; /* Hidden by default */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 0;
}
.chatbot-modal .user-info-loading.visible {
    display: flex !important; /* Use class to show */
}
.chatbot-modal .loading-spinner { /* If you use this class */
    width: 60px;
    height: 60px;
    border: 5px solid rgba(40, 213, 128, 0.1);
    border-radius: 50%;
    border-top-color: var(--prepory-green);
    animation: spin 1s linear infinite;
    margin-bottom: 2rem;
    box-shadow: 0 4px 10px rgba(40, 213, 128, 0.1);
}
.chatbot-modal .loading-text {
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 500;
    font-family: 'Gotham Book', sans-serif !important; /* Ensure font */
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* reCAPTCHA container - Scoped */
.chatbot-modal .recaptcha-container {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.chatbot-modal .g-recaptcha { margin-bottom: 0.5rem; }
.chatbot-modal .recaptcha-error {
    color: var(--error-color);
    font-size: 0.8rem;
    margin-top: 0.5rem;
    transition: var(--transition-standard);
    font-family: 'Gotham Book', sans-serif !important; /* Ensure font */
    display: none; /* Hide by default, show with JS */
}
.chatbot-modal .recaptcha-error.visible {
    display: block !important;
}


/* --- Rate Limit Message Styles (Keep scoped within #chatbot-app) --- */
#chatbot-app .rate-limit-message {
    display: flex;
    align-items: flex-start;
    margin: 1.5rem auto;
    padding: 1.5rem;
    max-width: 85%;
    border-radius: 1rem;
    background-color: #fff8f8;
    border-left: 3px solid #f4a100;
    box-shadow: 0 5px 15px rgba(244, 161, 0, 0.1);
    animation: fadeIn 0.4s ease-out;
    transition: opacity 1s ease-out;
    font-family: 'Gotham Book', sans-serif !important; /* Ensure font */
}
#chatbot-app .rate-limit-message.fading-out { opacity: 0; }
#chatbot-app .rate-limit-icon { font-size: 2.5rem; color: #f4a100; margin-right: 1.5rem; flex-shrink: 0; }
#chatbot-app .rate-limit-content { flex: 1; }
#chatbot-app .rate-limit-content h3 {
    color: #e67e00;
    margin-bottom: 0.75rem;
    font-weight: 600;
    font-family: 'Gotham Book', sans-serif !important;
}
#chatbot-app .rate-limit-content p {
    margin-bottom: 0.75rem;
    color: var(--text-primary);
    font-family: 'Gotham Book', sans-serif !important;
    font-size: 0.95rem;
    line-height: 1.6;
}
#chatbot-app .rate-limit-timer { margin-top: 1.25rem; padding: 1rem; background-color: #fff0d9; border-radius: 0.75rem; display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; transition: background-color 0.5s ease; }
#chatbot-app .rate-limit-timer.timer-ready { background-color: var(--prepory-green-light); }
#chatbot-app .timer-label {
    font-weight: 500;
    color: var(--text-primary);
    font-family: 'Gotham Book', sans-serif !important;
}
#chatbot-app .timer-countdown { font-weight: 700; color: #e67e00; font-family: monospace !important; font-size: 1.1rem; padding: 0.25rem 0.5rem; background-color: rgba(255, 255, 255, 0.5); border-radius: 0.5rem; transition: color 0.3s ease; }
#chatbot-app .timer-ready .timer-countdown { color: var(--prepory-green); }

@media (max-width: 768px) {
    #chatbot-app .rate-limit-message { flex-direction: column; align-items: center; text-align: center; padding: 1.25rem; }
    #chatbot-app .rate-limit-icon { margin-right: 0; margin-bottom: 1rem; }
    #chatbot-app .rate-limit-timer { flex-direction: column; gap: 0.5rem; }
}

/* Utility Classes - Kept scoped */
#chatbot-app .hidden { /* General hidden class for elements within chatbot */
    display: none !important;
}

/* Responsive Styles - Adjust modal content specifically if needed */
@media (max-width: 768px) {
    #chatbot-app .container { margin: 0; height: 100vh; padding: 0.75rem; }
    #chatbot-app .header { flex-direction: column; align-items: flex-start; margin-bottom: 1rem; padding: 1rem; }
    #chatbot-app .logo { margin-bottom: 0.75rem; }
    #chatbot-app .header-actions { width: 100%; justify-content: space-between; }
    #chatbot-app .message { max-width: 90%; }
    #chatbot-app .chat-container { padding: 1rem; border-radius: 0.75rem; }
    #chatbot-app .typing-indicator { margin-bottom: 1rem; }
    #chatbot-app .input-container { padding: 0.5rem; }
    #chatbot-app .send-btn { width: 45px; height: 45px; }
    #chatbot-app textarea { padding: 0.75rem; }

    /* Adjust modal content for mobile */
    .chatbot-modal .modal-content { /* Target new class */
        width: 95% !important;
        padding: 1.75rem !important;
        max-height: 85vh !important;
    }

    #chatbot-app .welcome-message { padding: 1rem; }
    #chatbot-app .sample-questions { padding: 1rem; }
    /* Don't define :root vars inside scoped selector */
    /* :root { --avatar-size: 32px; } */ /* Define globally if needed */
    #chatbot-app { --avatar-size: 32px; } /* Or directly on the container */

    /* Adjust user info form for mobile - Scoped */
    .chatbot-modal .role-selector { flex-direction: column; gap: 0.5rem; }
    .chatbot-modal .role-option { padding: 0.8rem 1rem; }

    /* reCAPTCHA responsive adjustments - Scoped */
    .chatbot-modal .recaptcha-container {
        transform: scale(0.85);
        transform-origin: center;
        margin-left: -20px; /* Check if this is still needed */
        margin-right: -20px; /* Center compensation */
    }
}


/* Improved Focus Styles for Accessibility */
#chatbot-app *:focus { outline: none; }
#chatbot-app *:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Ensure modal focus styles are correct */
.chatbot-modal *:focus { outline: none; }
.chatbot-modal *:focus-visible { outline: none; box-shadow: var(--focus-ring) !important; }


/* --- Registration Form Styling (Scoped to chatbot-modal) --- */
.chatbot-modal .registration-form {
    max-width: 400px !important; /* Ensure width is constrained */
    padding: 2rem !important;
	text-align: center !important;
 	margin: 0 auto !important; /* Center within modal-content */
    width: 100% !important; /* Take width of parent */
}

.chatbot-modal .registration-form h2 {
    margin-bottom: 2rem !important;
    font-size: 1.25rem !important;
    text-align: center !important;
    font-weight: 600 !important;
    color: #333 !important;
    font-family: 'Gotham Book', sans-serif !important; /* Ensure font */
}

.chatbot-modal .registration-form form {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
}

/* Override theme styles for inputs WITHIN the registration form */
.chatbot-modal .registration-form input[type="text"],
.chatbot-modal .registration-form input[type="email"],
.chatbot-modal .registration-form input[type="tel"],
.chatbot-modal .registration-form select {
    width: 100% !important;
    padding: 1.3rem 1rem !important;
    border: none !important;
    border-radius: 9999px !important; /* Your specific rounded style */
    font-size: 16px !important;
    background-color: #f0f0f0 !important;
 	color: #1a1a1a !important;
    margin-bottom: 0 !important; /* Override potential spacing */
    appearance: none !important;
    font-family: 'Gotham Book', sans-serif !important; /* Ensure font */
    height: auto !important; /* Override theme height */
    box-shadow: none !important; /* Override other shadows */
    outline: none !important;
    line-height: normal !important; /* Reset line height */
}

.chatbot-modal .registration-form input::placeholder {
    color: #4a4a4a !important;
    font-family: 'Gotham Book', sans-serif !important; /* Ensure font */
}
.chatbot-modal .registration-form select:invalid {
    color: #4a4a4a !important; /* Placeholder color for select */
}
.chatbot-modal .registration-form select option {
    color: #1a1a1a !important; /* Color for dropdown options */
    background-color: white !important; /* Background for dropdown options */
    font-family: 'Gotham Book', sans-serif !important; /* Ensure font */
}


/* Style for dropdown arrows - Scoped */
.chatbot-modal .registration-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23718096' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    background-size: 1em !important;
    padding-right: 2.5rem !important;
	color: #1a1a1a !important; /* Ensure text color when option selected */
}

.chatbot-modal .registration-form .form-row {
    display: flex !important;
    gap: 0.75rem !important;
    width: 100% !important;
}

.chatbot-modal .registration-form #graduation-year, /* Selectors should be fine */
.chatbot-modal .registration-form #role-selector {
    flex: 1;
}

.chatbot-modal .registration-form .registration-logo {
     display: block !important;
     margin: 0 auto 20px !important;
     max-width: 60px !important;
 }

/* Sign up button styling - Scoped */
.chatbot-modal .registration-form .signup-btn {
    width: 100% !important;
    margin-top: 0.5rem !important;
    padding: 1.3rem 1rem !important;
    background-color: #0B473B !important;
    color: white !important;
    border-radius: 2rem !important;
    border: none !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 0.95rem !important;
    font-family: 'Gotham Book', sans-serif !important; /* Ensure font */
}

.chatbot-modal .registration-form .signup-btn:hover {
    background-color: #093C33 !important;
}

/* reCAPTCHA container adjustments - Scoped */
.chatbot-modal .registration-form .recaptcha-container {
    margin: 1rem 0 0.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.chatbot-modal .registration-form .g-recaptcha {
    transform-origin: center !important;
    margin: 0 auto !important;
}

/* Error styles - Scoped */
.chatbot-modal .registration-form .user-info-error {
    margin-bottom: 1rem !important;
    font-size: 0.85rem !important;
    padding: 0.75rem !important;
    /* Ensure font */
    font-family: 'Gotham Book', sans-serif !important;
    /* Other styles inherited from general .user-info-error */
}

/* Mobile adjustments for registration form - Scoped */
@media (max-width: 450px) {
    .chatbot-modal .registration-form {
        padding: 1.5rem !important;
        width: 94% !important; /* Adjust if needed */
    }
    .chatbot-modal .registration-form .form-row {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    .chatbot-modal .registration-form .g-recaptcha {
        transform: scale(0.85) !important;
        margin-left: auto !important; /* Use auto margins for centering */
        margin-right: auto !important;
    }
}


/* --- lds-spinner (Keep scoped to #chatbot-app or specific areas) --- */
#chatbot-app .lds-spinner,
#chatbot-app .lds-spinner div,
#chatbot-app .lds-spinner div:after {
  box-sizing: border-box;
}
#chatbot-app .lds-spinner { color: #0B473B; display: inline-block; position: relative; width: 80px; height: 80px; transform: scale(0.8); transform-origin: center; }
#chatbot-app .lds-spinner::before { content: ""; position: absolute; width: 26px; height: 26px; top: 50%; left: 50%; transform: translate(-50%, -50%); background-image: url('../img/leaf.png'); background-size: contain; background-repeat: no-repeat; background-position: center; z-index: 2; }
#chatbot-app .lds-spinner div { transform-origin: 40px 40px; animation: lds-spinner 1.2s linear infinite; }
#chatbot-app .lds-spinner div:after { content: " "; display: block; position: absolute; top: 3.2px; left: 36.8px; width: 7.8px; height: 16px; border-radius: 38%; background: currentColor; }
#chatbot-app .lds-spinner div:nth-child(1) { transform: rotate(0deg); animation-delay: -1.1s; }
#chatbot-app .lds-spinner div:nth-child(2) { transform: rotate(30deg); animation-delay: -1s; }
#chatbot-app .lds-spinner div:nth-child(3) { transform: rotate(60deg); animation-delay: -0.9s; }
#chatbot-app .lds-spinner div:nth-child(4) { transform: rotate(90deg); animation-delay: -0.8s; }
#chatbot-app .lds-spinner div:nth-child(5) { transform: rotate(120deg); animation-delay: -0.7s; }
#chatbot-app .lds-spinner div:nth-child(6) { transform: rotate(150deg); animation-delay: -0.6s; }
#chatbot-app .lds-spinner div:nth-child(7) { transform: rotate(180deg); animation-delay: -0.5s; }
#chatbot-app .lds-spinner div:nth-child(8) { transform: rotate(210deg); animation-delay: -0.4s; }
#chatbot-app .lds-spinner div:nth-child(9) { transform: rotate(240deg); animation-delay: -0.3s; }
#chatbot-app .lds-spinner div:nth-child(10) { transform: rotate(270deg); animation-delay: -0.2s; }
#chatbot-app .lds-spinner div:nth-child(11) { transform: rotate(300deg); animation-delay: -0.1s; }
#chatbot-app .lds-spinner div:nth-child(12) { transform: rotate(330deg); animation-delay: 0s; }
@keyframes lds-spinner { 0% { opacity: 1; } 100% { opacity: 0; } }

/* User info loading spinner (Scoped within modal) */
.chatbot-modal .user-info-loading .lds-spinner {
  margin-bottom: 2rem !important;
  color: var(--prepory-green) !important;
  transform: scale(1.5) !important; /* Scale within loading container */
}
.chatbot-modal #user-info-loading { /* Ensure loading container fills space */
   display: none; /* Keep hidden by default */
   flex-direction: column;
   align-items: center;
   justify-content: center;
   /* height: 100%; */ /* Remove fixed height, let content determine */
   gap: 1rem;
 }
.chatbot-modal #user-info-loading.visible {
    display: flex !important;
}


/* --- Mockup style for input container (Keep scoped within #chatbot-app) --- */
#chatbot-app .mockup-style { background-color: #f3f3f3; border-radius: 0.75rem; padding: 1.25rem; position: relative; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); margin-top: auto; }
#chatbot-app .mockup-style:focus-within { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); }
#chatbot-app .mockup-style textarea {
    border: none;
    background: transparent;
    padding: 0.5rem 1rem 0.5rem 0.5rem !important;
    resize: none;
    font-family: 'Gotham Book', sans-serif !important; /* Ensure font */
    font-size: 16px;
    min-height: 70px;
    max-height: 150px;
    outline: none;
    box-shadow: none;
    width: 100%;
    margin-bottom: 15px;
    color: var(--text-primary); /* Ensure color */
    line-height: 1.6; /* Ensure line height */
}
#chatbot-app .mockup-style textarea:focus { box-shadow: none; }
#chatbot-app .model-label { position: absolute; bottom: 1.25rem; left: 1.25rem; font-size: 0.8rem; color: #718096; opacity: 0.8; font-family: 'Gotham Book', sans-serif !important; /* Ensure font */ }
#chatbot-app .mockup-style .svg-btn { position: absolute; bottom: 1.25rem; right: 1.5rem; background: transparent; border: none; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: none; }
#chatbot-app .mockup-style .svg-btn:hover { transform: scale(1.1); transition: transform 0.2s ease; }
#chatbot-app .mockup-style .svg-btn:active { transform: scale(0.95); }
#chatbot-app .mockup-style .svg-btn svg { width: 22px; height: 22px; }
#chatbot-app .mockup-style .svg-btn:focus { outline: none; box-shadow: none; }
#chatbot-app .mockup-style textarea::placeholder {
    color: #9ca3af;
    font-family: 'Gotham Book', sans-serif !important; /* Ensure font */
    opacity: 1; /* Ensure placeholder visible */
}
#chatbot-app .mockup-style textarea:focus::placeholder { opacity: 0; transition: opacity 0.1s; }
#chatbot-app .mockup-style textarea:focus::-moz-placeholder { opacity: 0; transition: opacity 0.1s; }
#chatbot-app .mockup-style textarea:focus:-ms-input-placeholder { opacity: 0; transition: opacity 0.1s; }
#chatbot-app .mockup-style textarea:focus::-ms-input-placeholder { opacity: 0; transition: opacity 0.1s; }


/* --- Prepory Navbar Style (Static) - REMOVE OR COMMENT OUT if not needed --- */
/*
#chatbot-app .fusion-header { ... }
#chatbot-app .fusion-row { ... }
... etc ...
*/

/* --- Constrain Leaf Image (Scoped) --- */
#chatbot-app img[src*="leaf.png"] {
  height: 48px;
  width: auto;
  max-width: 100%;
  display: inline-block;
  object-fit: contain;
}

#chatbot-app .chat-container .messages .message .message-content strong,
#chatbot-app .chat-container .messages .message .message-content b {
    font-weight: bold !important; /* Force bold and override theme */
    /* You might also need to ensure the font-family is correct if Gotham is interfering */
    /* font-family: 'Gotham Book', sans-serif !important; */ /* Uncomment if necessary */
}

/* Apply these styles only on screens smaller than 768px */
@media (max-width: 768px) {

    /* Ensure the main app container takes full width and manages overflow */
    #chatbot-app {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important; /* Remove padding from the outermost wrapper if it exists */
        margin: 0 !important; /* Remove margin */
        overflow-x: hidden !important; /* Prevent horizontal scroll on the app wrapper itself */
        box-sizing: border-box !important;
    }

    /* Force the inner container to respect boundaries */
    #chatbot-app .container {
        width: 100% !important; /* Take full width of parent (#chatbot-app) */
        max-width: 100vw !important; /* Explicitly use viewport width as max */
        padding-left: 0.75rem !important; /* Adjust padding as needed, ensure override */
        padding-right: 0.75rem !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
        margin: 0 !important; /* Override theme margins */
        height: 100% !important; /* Ensure it uses the full available height */
        /* Use 100dvh for dynamic viewport height if supported and needed */
        /* height: 100dvh !important; */
        min-height: 0 !important; /* Override potential theme min-height */
        overflow: hidden !important; /* Prevent container content itself from spilling */
        box-sizing: border-box !important; /* Crucial */
        display: flex !important; /* Ensure flex behavior is maintained */
        flex-direction: column !important;
    }

    /* Ensure the chat container itself behaves */
    #chatbot-app .chat-container {
        width: 100% !important; /* Fill the .container */
        max-width: 100% !important;
        padding: 0.75rem !important; /* Adjust padding, override theme */
        flex: 1 !important; /* Allow it to grow and shrink correctly */
        min-height: 0 !important; /* Allow shrinking */
        overflow: hidden !important; /* Contains messages and input */
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Ensure messages area scrolls vertically, not horizontally */
    #chatbot-app .messages {
        flex: 1 !important; /* Take available space */
        overflow-x: hidden !important; /* Prevent messages themselves causing horizontal scroll */
        overflow-y: auto !important; /* Allow vertical scroll */
        padding-right: 0.5rem !important; /* Slightly reduce scrollbar padding */
        min-height: 0 !important; /* Allow shrinking */
        box-sizing: border-box !important;
    }

    /* Adjust user messages if they contribute to width */
    #chatbot-app .user-message {
         max-width: 85% !important; /* Reduce max width slightly more if needed */
    }

    /* Input area adjustments */
    #chatbot-app .input-container {
        width: 100% !important;
        padding: 0.5rem !important;
        box-sizing: border-box !important;
    }

    /* Specific adjustments for the mockup style input */
    #chatbot-app .mockup-style {
        padding: 0.75rem !important;
        box-sizing: border-box !important;
    }
    #chatbot-app .mockup-style textarea {
        min-height: 50px !important; /* Adjust minimum height */
        max-height: 100px !important; /* Reduce max height */
        margin-bottom: 40px !important; /* Ensure space for button/label below */
        box-sizing: border-box !important;
    }
    #chatbot-app .mockup-style .model-label {
        left: 0.75rem !important;
        bottom: 0.75rem !important; /* Adjust position */
        font-size: 0.7rem !important;
    }
    #chatbot-app .mockup-style .svg-btn {
        right: 0.75rem !important;
        bottom: 0.75rem !important; /* Adjust position */
    }
     #chatbot-app .mockup-style .svg-btn svg {
         width: 20px !important; /* Slightly smaller button */
         height: 20px !important;
     }


    /* Adjust header elements if needed */
    #chatbot-app .header {
        padding: 0.75rem !important; /* Reduce padding */
        margin-bottom: 0.5rem !important;
    }
     #chatbot-app .header-actions {
        gap: 0.5rem !important; /* Reduce gap between header items */
        flex-wrap: wrap; /* Allow wrapping if space is tight */
     }
    #chatbot-app .status-indicator {
        padding: 0.4rem 0.6rem !important; /* Smaller status indicator */
        font-size: 0.75rem !important;
    }
    #chatbot-app .user-info-display {
        padding: 0.4rem 0.6rem !important; /* Smaller user info */
        font-size: 0.75rem !important;
    }


    /* Force body/html overflow-x hidden as a last resort */
    /* This can mask underlying issues but often works for theme overrides */
    /* Use cautiously, test if it breaks other site elements */
    /*
    body, html {
        overflow-x: hidden !important;
    }
    */

}

/* --- style-scoped.css --- */

/* Add this rule */
.chatbot-modal .registration-form input.invalid,
.chatbot-modal .registration-form select.invalid {
    border: 1px solid var(--error-color) !important; /* Add a red border */
    /* Optional: Add a subtle background hint */
    /* background-color: rgba(229, 62, 62, 0.05) !important; */
}

/* Optional: Style the focus state of invalid fields */
.chatbot-modal .registration-form input.invalid:focus,
.chatbot-modal .registration-form select.invalid:focus {
    border-color: var(--error-color) !important;
    box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.3) !important; /* Red focus ring */
}

.chatbot-modal .registration-form form.form-submitting {
    opacity: 0.6; /* Adjust opacity level as desired (0.5 to 0.7 is usually good) */
    pointer-events: none; /* Prevent further interaction while submitting */
    transition: opacity 0.3s ease-out; /* Smooth fade transition */
}

#chatbot-app .messages:has(> .welcome-message):not(:has(> .message)):not(:has(> .typing-indicator:not(.hidden))) {
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertical centering */
  align-items: center;     /* horizontal centering */
}

/* 1. Remove all horizontal rules inside message content */
#chatbot-app .message-content hr {
  display: none !important;
}

/* 2. Neutralize any border-based separators the theme might inject */
#chatbot-app .message-content .separator,
#chatbot-app .message-content .fusion-sep {
  display: none !important;
}

/* 3. Override theme heading styles (h1–h4) inside the bot messages */
#chatbot-app .message-content h1,
#chatbot-app .message-content h2,
#chatbot-app .message-content h3,
#chatbot-app .message-content h4 {
  color: var(--text-primary) !important;
  font-family: 'Gotham Book', sans-serif !important;
  font-weight: 600 !important;
  margin: 0 0 0.75rem 0 !important;
  padding: 0 !important;
  border: none !important;
  text-transform: none !important;
  line-height: 1.3 !important;
}

/* 4. Tame the theme’s “blue” headings on messages/replies */
#chatbot-app .assistant-message .message-content h3,
#chatbot-app .user-message .message-content h3 {
  color: var(--text-primary) !important;
}

/* 5. Enforce uniform paragraph spacing */
#chatbot-app .message-content p {
  margin: 0 0 1rem 0 !important;
  line-height: 1.8 !important;
}

/* 6. Reset and restyle lists for consistent indent & spacing */
#chatbot-app .message-content ul,
#chatbot-app .message-content ol {
  margin: 0 0 1rem 1.5rem !important;
  padding: 0 !important;
  list-style-position: outside !important;
}

#chatbot-app .message-content li {
  margin: 0 0 0.5rem 0 !important;
  line-height: 1.6 !important;
}

/* 7. Kill any stray borders or box-shadows in the content wrapper */
#chatbot-app .assistant-message .message-content-wrapper,
#chatbot-app .assistant-message .message-content {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* 8. Make inline <strong> & <b> actually bold */
#chatbot-app .message-content strong,
#chatbot-app .message-content b {
  font-weight: 600 !important;
}

/* 9. If your theme is still bleeding through, bump specificity: */
body #chatbot-app .message-content h3 {
  color: var(--text-primary) !important;
}

/* Make all hyperlinks bold and #06182f */
#chatbot-app a,
#chatbot-app a:link,
#chatbot-app a:visited {
  font-weight: bold !important;
  color: #06182f !important;
}

/* (Optionally) keep the same on hover/active */
#chatbot-app a:hover,
#chatbot-app a:active {
  color: #06182f !important;
  text-decoration: underline; /* or none, as you prefer */
}

.chatbot-modal .registration-form .consent-container {
    margin-top: 1rem;
    margin-bottom: 0 !important; 

    /* Remove the conflicting/redundant rules */
    /* padding: 0.5rem 0.25rem; */
    /* padding-top: 1rem; */

    /* Apply the desired padding cleanly */
    padding: 0.5rem 0.25rem 0.25rem; /* TOP: 0.5rem, LEFT/RIGHT: 0.25rem, BOTTOM: 0.25rem */

    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.chatbot-modal .registration-form .consent-text {
    font-size: .8rem !important; /* Reduced font size */
    color: var(--text-secondary);
    /* margin-bottom: 1rem; */ /* Removed, spacing handled by container */
    margin-bottom: 0 !important; /* Reset bottom margin */
    font-family: 'Gotham Book', sans-serif !important;
    /* text-align: center; */ /* Removed */
    text-align: left; /* Ensure text is left-aligned */
    flex: 1; /* Allow text to take remaining space */
}

.chatbot-modal .registration-form .consent-link {
    color: var(--prepory-dark-blue);
    text-decoration: underline !important;
    font-weight: 500;
}

.chatbot-modal .registration-form .consent-link:hover {
    color: var(--prepory-green);
}

.chatbot-modal .registration-form .consent-checkbox-group {
    /*display: inline-flex; 
    align-items: center;
    justify-content: center; 
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    width: auto; 
    margin-left: auto; 
    margin-right: auto;  */
	margin-top:1px;
}

.chatbot-modal .registration-form .consent-checkbox-group input[type="checkbox"] {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    appearance: checkbox !important;
    cursor: pointer;
    accent-color: #25d36b !important; /* Specific green color */
    width: 16px !important;
    height: 16px !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: none !important;
    flex-shrink: 0;
}


/* Consent Error Message Styling */
.chatbot-modal .registration-form .consent-error {
    color: var(--error-color);
    font-size: 0.8rem;
    margin-top: 0.5rem; /* Add space above error */
    transition: var(--transition-standard);
    font-family: 'Gotham Book', sans-serif !important;
    /* text-align: center; */ /* Changed */
    text-align: left; /* Align error text left */
    display: none;
    width: 100%; /* Make error take full width */
    padding-left: calc(16px + 0.75rem); /* Indent error to align with text (checkbox width + gap) */
    box-sizing: border-box;
}
.chatbot-modal .registration-form .consent-error.visible {
    display: block !important;
}

/* Invalid state for checkbox */
/* Remove label part of this selector */
.chatbot-modal .registration-form input[type="checkbox"].invalid {
     outline: 1px solid var(--error-color);
     border-color: var(--error-color) !important; /* Ensure border also changes */
}
/*
.chatbot-modal .registration-form input[type="checkbox"].invalid + label {
    color: var(--error-color);
}
*/

.cuTJXi {
  display: none !important;
  visibility: hidden !important; /* Optional extra guarantee */
  position: static !important;  /* Optional: Prevent positioning issues if display:none fails */
  width: 0 !important;          /* Optional: Collapse dimensions */
  height: 0 !important;         /* Optional: Collapse dimensions */
  overflow: hidden !important;  /* Optional: Hide content */
  opacity: 0 !important;        /* Optional: Make invisible */
  pointer-events: none !important; /* Prevent interaction */
}

#chatbot-app .demo-trigger-btn {
    position: fixed; /* Fixed position relative to viewport */
    bottom: 1.5rem;
    right: 1.5rem;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    /* Ensure the green background color is applied and overrides other potential styles */
    background-color: #25D36B !important;
    color: white; /* For the icon inside */
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem; /* Adjust icon size */
    cursor: pointer;
    box-shadow: var(--shadow-medium); /* Default shadow */
    /* Transition only the properties that are intended to change on hover */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    z-index: 999; /* Below modal, above most content */
    opacity: 1; /* Ensure full opacity */
    visibility: visible; /* Ensure visibility */
}

#chatbot-app .demo-trigger-btn:hover {
    /* The background-color will remain var(--prepory-green) from the default state */
    transform: scale(1.05); /* Button grows slightly on hover */
    box-shadow: var(--shadow-soft); /* Optional: change shadow for more feedback, kept from previous */
}

#chatbot-app .demo-trigger-btn:focus {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* --- Demo Video Modal Styling --- */
/* Reuse existing modal styles by targeting the new ID */
#demo-videos-modal {
    /* Inherits styles from .chatbot-modal */
}

#demo-videos-modal .modal-content {
    max-width: 700px; /* Adjust width as needed */
    text-align: left; /* Override centered text if needed */
    /* Allow more height for video */
    max-height: 85vh;
}

#demo-videos-modal .modal-close-btn {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    line-height: 1;
    transition: color 0.2s ease;
}

#demo-videos-modal .modal-close-btn:hover {
    color: var(--text-primary);
}

#demo-videos-modal h2 {
    margin-top: 0; /* Adjust spacing if close button is present */
    margin-bottom: 0.75rem;
    text-align: center;
     font-family: 'Gotham Book', sans-serif !important;
}
#demo-videos-modal p {
    margin-bottom: 1.5rem;
     font-family: 'Gotham Book', sans-serif !important;
     font-size: 0.95rem;
     text-align: center;
     color: var(--text-secondary);
}


#demo-videos-modal .demo-video-section {
    display: flex;
    flex-direction: column; /* Stack list and player */
    gap: 1.5rem;
}

#demo-videos-modal #demo-video-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 200px; /* Limit height if many videos */
    overflow-y: auto; /* Add scroll if needed */
    padding-right: 0.5rem; /* Space for scrollbar */
     scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

#demo-videos-modal #demo-video-list::-webkit-scrollbar { width: 5px; }
#demo-videos-modal #demo-video-list::-webkit-scrollbar-track { background: transparent; }
#demo-videos-modal #demo-video-list::-webkit-scrollbar-thumb { background-color: var(--border-color); border-radius: 5px; }

#demo-videos-modal .demo-video-btn {
    /* Style similarly to sample-btn or primary-btn */
    background-color: white;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: var(--transition-standard);
    font-family: 'Gotham Book', sans-serif !important;
    font-size: 0.9rem;
     box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

#demo-videos-modal .demo-video-btn:hover {
    background-color: var(--prepory-green-light);
    border-color: var(--prepory-green);
    transform: translateX(2px);
}

#demo-videos-modal .demo-video-btn.active {
     background-color: var(--prepory-green-light);
     border-color: var(--prepory-green);
     font-weight: 600;
     box-shadow: 0 0 0 1px var(--prepory-green);
}

#demo-videos-modal #demo-video-player-container {
    background-color: #f0f0f0; /* Light background for the player area */
    border-radius: 0.5rem;
    overflow: hidden; /* Ensures video corners are rounded */
    padding: 5px; /* Small padding around the video */
     border: 1px solid var(--border-color);
}

#demo-videos-modal #demo-video-player {
    display: block; /* Prevents extra space below video */
    width: 100%;
    height: auto;
    max-height: 50vh; /* Limit video height */
    border-radius: 0.3rem; /* Slightly rounded corners for the video */
}

#demo-videos-modal #demo-video-placeholder {
    text-align: center;
    color: var(--text-secondary);
    padding: 2rem 0;
    margin-bottom: 0;
    font-style: italic;
}

/* Responsive adjustments for the demo modal */
@media (max-width: 768px) {
    #chatbot-app .demo-trigger-btn {
        width: 50px;
        height: 50px;
        font-size: 1.3rem;
        bottom: 1rem;
        right: 1rem;
    }

    #demo-videos-modal .modal-content {
        max-width: 95%;
        padding: 1.5rem 1rem;
    }
    #demo-videos-modal .modal-close-btn {
        top: 0.5rem;
        right: 0.8rem;
        font-size: 1.8rem;
    }

     #demo-videos-modal #demo-video-list {
         max-height: 150px; /* Adjust for smaller screens */
     }
}

#hubspot-messages-iframe-container {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;   /* Override min-width */
  min-height: 0 !important;  /* Override min-height */
  position: static !important; /* Override fixed/absolute */
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important; /* Remove any shadow */
  overflow: hidden !important;
  pointer-events: none !important; /* Prevent interaction */
  z-index: -9999 !important;       /* Push far behind */
}

/* --- HIDE SOURCES --- */
#chatbot-app .message-sources {
  display: none !important;
}


/* ================================================= */
/* === START: MOBILE STYLES (Full Screen & Hide Footer) === */
/* ================================================= */
@media (max-width: 768px) {

    /* --- Force Full Screen for Chat App --- */
    #chatbot-app {
        position: fixed !important; /* Take out of normal flow */
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;    /* Force full viewport width */
        height: 100dvh !important;  /* Use Dynamic Viewport Height */
        max-height: 100dvh !important; /* Also use dvh for max-height */
        max-width: 100vw !important;
        padding: 0 !important; /* Remove padding from the outermost wrapper */
        margin: 0 !important; /* Remove margin */
        overflow: hidden !important; /* Prevent scrolling on the app wrapper itself */
        box-sizing: border-box !important;
        z-index: 9999 !important; /* Ensure it's above most page content, adjust if needed */
        background-color: var(--background-page) !important; /* Ensure it has a background */
        font-size: 16px !important; /* MODIFIED: Set default font size for mobile */
    }

    /* --- Hide AVADA Theme Footer --- */
    /* Targets common Avada footer containers */
    .fusion-tb-footer,           /* Footer built with Theme Builder */
    .fusion-footer-widget-area,  /* Standard Footer Widget Area */
    .fusion-footer,              /* Standard Copyright Footer Area */
    footer#footer                /* Fallback ID selector */
    /* Add any other specific footer selectors here if needed */ {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        position: static !important; /* Reset positioning */
    }

    /* --- Prevent Body Scrolling Underneath Fixed Chat --- */
    body {
        overflow: hidden !important;
    }

     /* --- Hide WP Admin Bar if needed --- */
     /* Uncomment the block below if the WP Admin bar is causing issues */
     /*
     .admin-bar {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        position: static !important;
     }
     */


    /* --- Structure Inside Fixed App Container --- */
    #chatbot-app .container {
        width: 100% !important; /* Take full width of parent (#chatbot-app) */
        height: 100% !important; /* Take full height of parent */
        max-width: 100% !important; /* Use full available width */
        padding: 0 !important; /* Remove container padding */
        margin: 0 !important; /* Override theme margins */
        min-height: 0 !important; /* Override potential theme min-height */
        overflow: hidden !important; /* Prevent container content itself from spilling */
        box-sizing: border-box !important; /* Crucial */
        display: flex !important; /* Use flex for vertical layout */
        flex-direction: column !important;
        position: relative !important;
    }

    /* --- App Header Adjustments --- */
    #chatbot-app .header {
        padding: 0.75rem 0.75rem !important;
        margin-bottom: 0 !important;
        flex-shrink: 0;
        width: 100% !important;
        box-sizing: border-box !important;
        position: relative !important; /* Crucial for absolute positioning of status indicator */
        /* flex-direction: column; align-items: flex-start; are inherited from earlier mobile styles,
           positioning logo above header-actions */
    }

    /* Position the status indicator to the top-right of the header on mobile */
    #chatbot-app .header .status-indicator { /* This targets #connection-status */
        position: absolute !important;
        top: 0.75rem !important;    /* Align with header's top padding */
        right: 0.75rem !important;   /* Align with header's right padding */
        z-index: 10 !important;      /* Ensure it's above other elements in the header */
        margin: 0 !important;        /* Reset any margin it might have from being a flex item */
    }

     #chatbot-app .header-actions {
         width: 100%;
         gap: 0.5rem !important;
         flex-wrap: wrap;
         /* display: flex; align-items: center; justify-content: space-between; are inherited.
            With status-indicator absolute, user-info-display will be the main in-flow item,
            aligning to the start (left) below the logo. */
     }
    #chatbot-app .status-indicator { /* General styling for padding/font-size remains applicable */
        padding: 0.4rem 0.6rem !important;
        font-size: 16px !important; /* MODIFIED: Was 0.75rem */
    }
    #chatbot-app .user-info-display {
        padding: 0.4rem 0.6rem !important;
        font-size: 16px !important; /* MODIFIED: Was 0.75rem */
    }

    /* --- Chat Container Layout --- */
    #chatbot-app .chat-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0.75rem !important;
        border-radius: 0 !important;
        flex: 1 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        border: none !important;
        box-shadow: none !important;
        background-color: var(--background-container) !important;
    }

    /* --- Messages Area Scrolling & Padding --- */
    #chatbot-app .messages {
        flex: 1 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding-right: 0.5rem !important;
        padding-left: 0.25rem !important;
        margin-bottom: 0.75rem !important;
        min-height: 0 !important;
        box-sizing: border-box !important;
        padding-bottom: 75px !important; /* Approx button height + spacing for scroll-to-bottom */
    }

    /* --- Message Bubble Width --- */
    #chatbot-app .message { max-width: 95% !important; }
    #chatbot-app .user-message { max-width: 90% !important; }

    /* --- Input Area Layout --- */
    #chatbot-app .input-container {
        width: 100% !important;
        padding: 0.5rem !important;
        margin-top: 0 !important;
        flex-shrink: 0;
        box-sizing: border-box !important;
        border-radius: 0 !important;
        box-shadow: 0 -2px 5px rgba(0,0,0,0.05) !important;
    }

    /* --- Mockup Style Input Adjustments --- */
    #chatbot-app .mockup-style {
        padding: 0.75rem !important;
        box-sizing: border-box !important;
        border-radius: 0.5rem !important;
        margin-top: 0 !important;
        flex-shrink: 0;
    }
    #chatbot-app .mockup-style textarea {
        min-height: 50px !important;
        max-height: 120px !important;
        margin-bottom: 40px !important;
        box-sizing: border-box !important;
        padding: 0.5rem 0.5rem 0.5rem 0.25rem !important;
    }
    #chatbot-app .mockup-style .model-label {
        left: 1rem !important;
        bottom: 0.75rem !important;
        font-size: 16px !important; /* MODIFIED: Was 0.7rem */
    }
    #chatbot-app .mockup-style .svg-btn {
        right: 1rem !important;
        bottom: 0.65rem !important;
    }
     #chatbot-app .mockup-style .svg-btn svg {
         width: 20px !important;
         height: 20px !important;
     }

     /* --- Typing Indicator Spacing --- */
     #chatbot-app .typing-indicator { margin-bottom: 1rem !important; }

     /* --- Send Button Size (If not using SVG button) --- */
     #chatbot-app .send-btn { width: 45px !important; height: 45px !important; }

    /* --- COMPLETELY HIDE DEMO VIDEO MODAL AND TRIGGER BUTTON ON MOBILE --- */
    #demo-videos-modal,
    #chatbot-app .demo-trigger-btn {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        position: static !important; /* Reset positioning if absolute/fixed */
    }

    /* --- Modal Adjustments --- */
    .chatbot-modal .modal-content {
        width: 95% !important;
        padding: 1.75rem !important;
        max-height: 85vh !important;
    }

    /* --- Welcome Message/Sample Questions Padding --- */
    #chatbot-app .welcome-message {
		padding-top: 2.5rem !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        padding-bottom: 1rem !important;
	}
    #chatbot-app .sample-questions { padding: 1rem !important; }

    /* --- Avatar Size --- */
    #chatbot-app { --avatar-size: 32px !important; }

    /* --- User Info Form in Modal --- */
    .chatbot-modal .role-selector { flex-direction: column !important; gap: 0.5rem !important; }
    .chatbot-modal .role-option { padding: 0.8rem 1rem !important; }

    /* --- reCAPTCHA Adjustments in Modal --- */
    .chatbot-modal .recaptcha-container {
        transform: scale(0.85) !important;
        transform-origin: center !important;
        margin-left: -20px !important; /* Keep if needed */
        margin-right: -20px !important; /* Keep if needed */
    }

    /* --- Registration Form Specific Mobile Adjustments --- */
    @media (max-width: 450px) {
        .chatbot-modal .registration-form { padding: 1.5rem !important; width: 94% !important; }
        .chatbot-modal .registration-form .form-row { flex-direction: column !important; gap: 0.75rem !important; }
        .chatbot-modal .registration-form .g-recaptcha { transform: scale(0.85) !important; margin-left: auto !important; margin-right: auto !important; }
    } /* End @media (max-width: 450px) */

}

/* =============================================== */
/* === END: MOBILE STYLES === */
/* =============================================== */
/* --- Container Width Adjustments (Keep scoped) --- */
/* These might need review depending on integration */
/* Removing potentially problematic overrides */

/* --- Hide Scroll to Bottom Button --- */
#chatbot-app .scroll-bottom-btn {
    display: none !important;
    visibility: hidden !important; /* Extra precaution */
    opacity: 0 !important;         /* Extra precaution */
    pointer-events: none !important; /* Prevent interaction */
}

/* --- START: Rory SVG Logo Style --- */
#chatbot-app .logo .logo-svg {
    height: 50px; /* Adjust height as needed to align with the text */
    width: auto;  /* Maintain aspect ratio */
    /* The 'gap: 1rem;' on the parent '.logo' div will create space between this SVG and the H1 text.
       If you need to adjust this spacing, you can change the 'gap' property on '#chatbot-app .logo'
       or add 'margin-right' here. */
}

#chatbot-app .welcome-message .welcome-icon img {
  max-height: 50px; /* Adjust this value to your desired maximum height */
  max-width: 120px; /* Adjust this value to your desired maximum width */
  width: auto;      /* Maintain aspect ratio */
  height: auto;     /* Maintain aspect ratio */
  display: inline-block; /* Ensures proper block-like behavior */
}

/* Hide the old spinner elements if they were somehow generated */
#chatbot-app .typing-indicator .spinner-container,
#chatbot-app .typing-indicator .lds-spinner {
    display: none !important;
}

/* Style the main typing-indicator container for HORIZONTAL layout */
#chatbot-app .typing-indicator {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 0.75rem 1rem;
}

/* Container for the animated logo */
#chatbot-app .typing-indicator .logo-animation-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* The animated SVG logo itself */
#chatbot-app .typing-indicator .loading-logo-svg {
    width: 32px;  /* Adjust width of the logo as desired */
    height: auto; /* Maintain aspect ratio */
    opacity: 1;   /* Set default opacity to fully visible */
    animation: roryLogoSpin 2.5s infinite linear; /* Only spin, slower (e.g., 2.5s) */
}

/* Keyframes for the spinning animation (rotation) */
@keyframes roryLogoSpin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Adjust the message container for rotating text */
#chatbot-app .typing-indicator .message-container {
    flex: 1;
    min-width: 0;
    text-align: left;
    position: relative;
    height: 40px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* Styling for the individual typing messages (mostly unchanged) */
#chatbot-app .typing-indicator .typing-message {
    width: 100%;
}
/*



#chatbot-app .container {
  max-width: 100%;
  width: 100%;
  margin-left: -10%;
  padding-left: 2rem;
  padding-right: 2rem;
}
#chatbot-app .chat-container {
  width: 100%;
  max-width: none;
  padding: 2rem 1rem;
}
*/

/* --- Remove centering for modal content via margin --- */
/* The flex centering on .chatbot-modal handles this now */
/*
#chatbot-app .modal-content {
  max-width: 600px;
  margin: 0 auto; // REMOVED
  padding: 2rem 1.5rem;
}
*/

/* Hide generic theme modal specifically, if possible */
/* CAUTION: This might hide other site modals - Use with extreme care or avoid */
/*
body > .modal {
 display: none !important;
}
*/

/* --- END OF FILE style-scoped.css --- */