/**
 * Revma AI Assistant - Widget Styles
 * Premium Design matching ui-system.css
 * Version: 1.3.0
 */

/* ============================================
   GLOBAL BOX-SIZING RESET (Critical for overflow)
============================================ */
.revma-ai-widget,
.revma-ai-widget *,
.revma-ai-widget *::before,
.revma-ai-widget *::after {
    box-sizing: border-box;
}

/* ============================================
   CSS VARIABLES (use ui-system tokens)
============================================ */
:root {
    /* Inherit from ui-system.css, with fallbacks */
    --revma-ai-primary: var(--revma-primary, #2563eb);
    --revma-ai-primary-dark: var(--revma-primary-dark, #1d4ed8);
    --revma-ai-primary-light: var(--revma-primary-light, #3b82f6);
    --revma-ai-primary-bg: var(--revma-primary-bg, #eff6ff);

    --revma-ai-secondary: var(--revma-secondary, #10b981);
    --revma-ai-secondary-dark: var(--revma-secondary-dark, #059669);

    --revma-ai-text-dark: var(--revma-text-dark, #0f172a);
    --revma-ai-text-medium: var(--revma-text-medium, #475569);
    --revma-ai-text-light: var(--revma-text-light, #64748b);

    --revma-ai-bg-white: var(--revma-bg-white, #ffffff);
    --revma-ai-bg-light: var(--revma-bg-light, #f8fafc);

    --revma-ai-border: var(--revma-border, #e2e8f0);
    --revma-ai-border-light: var(--revma-border-light, #f1f5f9);

    --revma-ai-shadow-sm: var(--revma-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1));
    --revma-ai-shadow-md: var(--revma-shadow-md, 0 4px 15px rgba(0, 0, 0, 0.08));
    --revma-ai-shadow-lg: var(--revma-shadow-lg, 0 10px 40px rgba(0, 0, 0, 0.12));
    --revma-ai-shadow-xl: var(--revma-shadow-xl, 0 20px 50px rgba(0, 0, 0, 0.15));

    --revma-ai-radius-sm: var(--revma-radius-sm, 8px);
    --revma-ai-radius-md: var(--revma-radius-md, 12px);
    --revma-ai-radius-lg: var(--revma-radius-lg, 16px);
    --revma-ai-radius-xl: var(--revma-radius-xl, 24px);

    --revma-ai-transition: var(--revma-transition, 0.3s ease);
    --revma-ai-transition-fast: var(--revma-transition-fast, 0.2s ease);
}

/* ============================================
   FLOATING TOGGLE BUTTON - Blue Gradient with Pulse
   Premium AI Assistant button with glow effect
============================================ */
button#revma-ai-toggle,
.revma-ai-toggle {
    position: fixed !important;
    bottom: 80px !important;
    right: 24px !important;
    z-index: 10000 !important; /* Higher than sticky bars */

    /* Size: 52px - prominent AI button */
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    border-radius: 50% !important;
    padding: 0 !important;

    /* Blue gradient - brand primary color */
    background: var(--revma-ai-primary, #2563eb) !important;
    background-image: linear-gradient(135deg, var(--revma-ai-primary, #2563eb) 0%, var(--revma-ai-primary-dark, #1d4ed8) 100%) !important;
    border: none !important;
    cursor: pointer !important;

    /* Glow shadow */
    box-shadow: var(--revma-shadow-cta-glow, 0 8px 24px rgba(37, 99, 235, 0.35)) !important;

    /* Layout */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* Always visible */
    opacity: 1 !important;
    visibility: visible !important;

    /* Smooth transitions + Pulse animation */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    animation: revma-ai-toggle-pulse 3s ease-in-out infinite;
}

/* Pulse animation */
@keyframes revma-ai-toggle-pulse {
    0%, 100% {
        box-shadow: var(--revma-shadow-cta-glow, 0 8px 24px rgba(37, 99, 235, 0.35));
    }
    50% {
        box-shadow: 0 12px 32px rgba(37, 99, 235, 0.5);
    }
}

button#revma-ai-toggle:hover,
.revma-ai-toggle:hover {
    background: var(--revma-ai-primary-dark, #1d4ed8) !important;
    background-image: linear-gradient(135deg, var(--revma-ai-primary-dark, #1d4ed8) 0%, #1e40af 100%) !important;
    box-shadow: var(--revma-shadow-cta-glow-hover, 0 12px 32px rgba(37, 99, 235, 0.45)) !important;
    transform: translateY(-3px) scale(1.05);
    animation: none; /* Stop pulse on hover */
}

.revma-ai-toggle:focus {
    outline: none;
}

.revma-ai-toggle:focus-visible {
    outline: 3px solid var(--revma-ai-primary-light, #3b82f6);
    outline-offset: 3px;
}

.revma-ai-toggle:active {
    transform: scale(0.95);
    animation: none;
}

/* Toggle icons - base */
.revma-ai-toggle-icon,
#revma-ai-toggle .revma-ai-toggle-icon,
#revma-ai-toggle svg {
    color: white !important;
    width: 22px !important;
    height: 22px !important;
    transition: opacity 0.2s ease, transform 0.3s ease;
}

/* Chat sparkle icon uses fill */
.revma-ai-icon-chat,
#revma-ai-toggle .revma-ai-icon-chat {
    fill: white !important;
    stroke: none !important;
}

/* Close X icon uses stroke lines, NOT fill */
.revma-ai-icon-close,
#revma-ai-toggle .revma-ai-icon-close {
    fill: none !important;
    stroke: white !important;
    stroke-width: 2.5 !important;
}

.revma-ai-toggle-icon.revma-ai-icon-chat {
    opacity: 1;
    transform: scale(1);
}

.revma-ai-toggle-icon.revma-ai-icon-close {
    position: absolute;
    opacity: 0;
    transform: scale(0.5) rotate(-90deg);
}

.revma-ai-toggle.is-open .revma-ai-icon-chat {
    opacity: 0;
    transform: scale(0.5) rotate(90deg);
}

.revma-ai-toggle.is-open .revma-ai-icon-close {
    opacity: 1;
    transform: scale(1) rotate(0);
}

/* Ensure toggle keeps blue background when open (close X state) */
button#revma-ai-toggle.is-open,
.revma-ai-toggle.is-open {
    background: var(--revma-ai-primary, #2563eb) !important;
    background-image: linear-gradient(135deg, var(--revma-ai-primary, #2563eb) 0%, var(--revma-ai-primary-dark, #1d4ed8) 100%) !important;
    border: none !important;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.35) !important;
}


/* AI Badge - hidden for clean enterprise look */
.revma-ai-toggle-badge {
    display: none;
}

/* Mobile: same bottom position, slightly smaller size */
@media (max-width: 768px) {
    button#revma-ai-toggle,
    .revma-ai-toggle {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        bottom: 82px !important;
        right: 16px !important;
    }

    .revma-ai-toggle-icon {
        width: 20px;
        height: 20px;
    }
}

/* ============================================
   CHAT WIDGET CONTAINER
============================================ */
.revma-ai-widget {
    position: fixed;
    bottom: 90px; /* Adjusted for 52px toggle button + gap */
    right: 24px;
    z-index: 10001; /* Higher than sticky bars (typically 9999-10000) */

    /* Size */
    width: 390px;
    max-width: calc(100vw - 48px);
    height: 560px;
    max-height: calc(100vh - 140px);

    /* Card style matching site - Unified 22px radius */
    background: var(--revma-ai-bg-white);
    border-radius: var(--revma-radius-card, 22px);
    border: 1px solid var(--revma-ai-border);
    box-shadow: var(--revma-shadow-card-hover, 0 16px 40px rgba(15, 23, 42, 0.1));

    /* Layout - flex with overflow control */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0; /* Critical for flex overflow */

    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.95);
    transition: opacity 0.25s ease,
                visibility 0.25s ease,
                transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.revma-ai-widget.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* Minimized state - desktop only */
.revma-ai-widget.is-minimized {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(0.95);
    height: auto;
    max-height: 64px;
    cursor: pointer;
    border-color: var(--revma-ai-primary-light);
}

.revma-ai-widget.is-minimized:hover {
    transform: translateY(-2px) scale(0.97);
    box-shadow: 0 8px 30px rgba(37, 99, 235, 0.2);
}

.revma-ai-widget.is-minimized .revma-ai-messages,
.revma-ai-widget.is-minimized .revma-ai-suggestions,
.revma-ai-widget.is-minimized .revma-ai-input-area {
    display: none;
}

/* ============================================
   HEADER (Premium Gradient with Status Pill)
============================================ */
.revma-ai-header {
    flex-shrink: 0; /* Prevent header from shrinking */
    /* Primary gradient (same as primary buttons) */
    background: linear-gradient(135deg, var(--revma-ai-primary), var(--revma-ai-primary-dark));
    padding: 18px 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    /* Glow shadow at bottom */
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.2);
    position: relative;
    z-index: 1;

    /* Rounded top corners matching widget */
    border-radius: var(--revma-radius-card, 22px) var(--revma-radius-card, 22px) 0 0;
}

.revma-ai-header-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.revma-ai-avatar {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--revma-ai-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.revma-ai-avatar svg {
    color: white;
    width: 22px;
    height: 22px;
}

.revma-ai-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: white;
    letter-spacing: -0.01em;
}

/* Status Pill - Glassmorphism style */
.revma-ai-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95);
    margin-top: 4px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 4px 10px;
    border-radius: var(--revma-radius-full, 50px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.revma-ai-status-dot {
    width: 6px;
    height: 6px;
    background: var(--revma-ai-secondary);
    border-radius: 50%;
    animation: revma-ai-pulse-dot 2s ease-in-out infinite;
    box-shadow: 0 0 8px var(--revma-ai-secondary);
}

@keyframes revma-ai-pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.3); }
}

/* Close button - neutral (not red) */
.revma-ai-close {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: var(--revma-ai-radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: background var(--revma-ai-transition-fast);
}

.revma-ai-close:hover {
    background: rgba(255, 255, 255, 0.25);
}

.revma-ai-close:focus {
    outline: none;
}

.revma-ai-close:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 2px;
}

/* ============================================
   MESSAGES AREA
============================================ */
.revma-ai-messages {
    flex: 1 1 auto;
    min-height: 0; /* Critical: allows flex child to shrink below content size */
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    background: var(--revma-ai-bg-light);

    display: flex;
    flex-direction: column;
    gap: 16px;

    /* Smooth scroll */
    scroll-behavior: smooth;
    overscroll-behavior: contain;
}

/* Custom scrollbar */
.revma-ai-messages::-webkit-scrollbar {
    width: 6px;
}

.revma-ai-messages::-webkit-scrollbar-track {
    background: transparent;
}

.revma-ai-messages::-webkit-scrollbar-thumb {
    background: var(--revma-ai-border);
    border-radius: 3px;
}

.revma-ai-messages::-webkit-scrollbar-thumb:hover {
    background: var(--revma-ai-text-light);
}

/* ============================================
   MESSAGE BUBBLES
============================================ */
.revma-ai-message {
    display: flex;
    gap: 10px;
    max-width: 100%;
    animation: revma-ai-message-in 0.3s ease-out;
}

@keyframes revma-ai-message-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Avatar */
.revma-ai-message-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--revma-ai-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--revma-ai-primary-bg);
}

.revma-ai-message-avatar svg {
    width: 18px;
    height: 18px;
    color: var(--revma-ai-primary);
}

/* Message content */
.revma-ai-message-content {
    max-width: 85%; /* v3.0: Increased from 80% for better readability */
    min-width: 0; /* Allow content to shrink */
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden; /* Prevent long text from breaking layout */
}

/* Bot message bubble - Brand colors */
.revma-ai-message-text {
    background: var(--revma-ai-bg-white);
    border: 1px solid var(--revma-ai-border);
    border-radius: var(--revma-radius-input, 14px);
    border-top-left-radius: 4px;
    padding: 14px 18px;
    margin: 0;

    font-size: 0.9rem;
    line-height: 1.55; /* v3.0: Reduced from 1.65 for tighter text */
    color: var(--revma-ai-text-dark);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

    /* Long text protection - handles aaaaaaaaaa... inputs */
    word-wrap: break-word;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
    max-width: 100%;
    min-width: 0;
}

/* User message */
.revma-ai-message.is-user {
    flex-direction: row-reverse;
}

.revma-ai-message.is-user .revma-ai-message-avatar {
    background: linear-gradient(135deg, var(--revma-ai-primary), var(--revma-ai-primary-dark));
}

.revma-ai-message.is-user .revma-ai-message-avatar svg {
    color: white;
}

.revma-ai-message.is-user .revma-ai-message-text {
    /* User bubble: primary gradient with white text */
    background: linear-gradient(135deg, var(--revma-ai-primary), var(--revma-ai-primary-dark));
    border: none;
    color: white;
    border-radius: var(--revma-radius-input, 14px);
    border-top-right-radius: 4px;
    box-shadow: var(--revma-shadow-cta-glow, 0 8px 24px rgba(37, 99, 235, 0.35));
}

.revma-ai-message.is-user .revma-ai-message-content {
    align-items: flex-end;
}

/* Text formatting */
.revma-ai-message-text strong {
    font-weight: 600;
    color: inherit;
}

.revma-ai-message-text .bullet {
    color: var(--revma-ai-primary);
    font-weight: 700;
}

.revma-ai-message-text .action-line {
    display: block;
    color: var(--revma-ai-primary);
    font-weight: 600;
    margin-top: 8px;
}

/* ============================================
   SMART CTA CARD (in messages) - Action Cards
============================================ */
.revma-ai-message-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;

    /* Button style (same as primary CTA with glow) */
    background: linear-gradient(135deg, var(--revma-ai-primary), var(--revma-ai-primary-dark));
    color: white;
    padding: 10px 18px;
    border-radius: var(--revma-radius-input, 14px);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;

    /* v3.0: Max height 44px for consistent CTA sizing */
    max-height: 44px;
    height: 44px;

    box-shadow: var(--revma-shadow-cta-glow, 0 8px 24px rgba(37, 99, 235, 0.35));
    transition: transform var(--revma-ai-transition-fast),
                box-shadow var(--revma-ai-transition-fast);
}

.revma-ai-message-cta:hover {
    transform: translateY(-2px);
    box-shadow: var(--revma-shadow-cta-glow-hover, 0 12px 32px rgba(37, 99, 235, 0.45));
    color: white;
    text-decoration: none;
}

.revma-ai-message-cta:focus-visible {
    outline: 2px solid var(--revma-ai-primary-light);
    outline-offset: 2px;
}

.revma-ai-message-cta svg {
    width: 16px;
    height: 16px;
    transition: transform var(--revma-ai-transition-fast);
}

.revma-ai-message-cta:hover svg {
    transform: translateX(3px);
}

/* Pulse animation for focused CTA */
.revma-ai-message-cta.pulse-cta {
    animation: revma-ai-cta-pulse 2s ease-in-out infinite;
}

@keyframes revma-ai-cta-pulse {
    0%, 100% { box-shadow: 0 3px 12px rgba(37, 99, 235, 0.3); }
    50% { box-shadow: 0 3px 20px rgba(37, 99, 235, 0.5); }
}

/* ============================================
   TYPING INDICATOR
============================================ */
.revma-ai-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 14px 18px;
    background: var(--revma-ai-bg-white);
    border: 1px solid var(--revma-ai-border);
    border-radius: var(--revma-ai-radius-lg);
    border-top-left-radius: 4px;
    opacity: 0.5; /* v3.0: Reduced opacity for subtle indicator */
}

.revma-ai-typing-dot {
    width: 8px;
    height: 8px;
    background: var(--revma-ai-text-light);
    border-radius: 50%;
    animation: revma-ai-typing-bounce 1.4s ease-in-out infinite;
}

.revma-ai-typing-dot:nth-child(1) { animation-delay: 0s; }
.revma-ai-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.revma-ai-typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes revma-ai-typing-bounce {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-6px);
        opacity: 1;
    }
}

/* ============================================
   QUICK REPLY PILLS (Suggestions)
============================================ */
.revma-ai-suggestions {
    flex-shrink: 0; /* Prevent suggestions from shrinking */
    padding: 0 16px 12px;
    background: var(--revma-ai-bg-light);
    width: 100%;
    max-width: 100%;

    display: flex;
    gap: 8px;
    flex-wrap: wrap; /* Wrap to next line instead of overflow */
}

.revma-ai-suggestions:empty {
    display: none;
}

.revma-ai-suggestion {
    /* Allow shrinking and wrapping */
    flex: 0 1 auto;
    max-width: 100%;

    /* Pill style - Full radius for premium look */
    height: 40px;
    padding: 0 18px;
    border-radius: var(--revma-radius-full, 50px);

    /* Style */
    background: var(--revma-ai-bg-white);
    border: 1.5px solid var(--revma-ai-border);
    color: var(--revma-ai-text-medium);

    font-size: 0.85rem;
    font-weight: 600;
    white-space: normal; /* Allow text to wrap if needed */
    word-break: break-word;
    cursor: pointer;

    transition: all var(--revma-ai-transition-fast);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.revma-ai-suggestion:hover {
    background: var(--revma-ai-primary-bg);
    border-color: var(--revma-ai-primary);
    color: var(--revma-ai-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

.revma-ai-suggestion:focus {
    outline: none;
}

.revma-ai-suggestion:focus-visible {
    outline: 2px solid var(--revma-ai-primary);
    outline-offset: 2px;
}

.revma-ai-suggestion:active {
    transform: scale(0.98);
}

/* Primary suggestion (CTA style) */
.revma-ai-suggestion-primary {
    background: linear-gradient(135deg, var(--revma-ai-primary), var(--revma-ai-primary-dark));
    border-color: var(--revma-ai-primary);
    color: white;
    box-shadow: var(--revma-shadow-cta-glow, 0 8px 24px rgba(37, 99, 235, 0.35));
}

.revma-ai-suggestion-primary:hover {
    background: linear-gradient(135deg, var(--revma-ai-primary-dark), #1e40af);
    border-color: var(--revma-ai-primary-dark);
    color: white;
    box-shadow: var(--revma-shadow-cta-glow-hover, 0 12px 32px rgba(37, 99, 235, 0.45));
}

/* Disabled state (while loading) */
.revma-ai-suggestion:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Action buttons - Primary CTA (callback, lead conversion) */
.revma-ai-action-primary {
    background: linear-gradient(135deg, var(--revma-ai-primary), var(--revma-ai-primary-dark)) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35) !important;
    padding: 0 24px !important;
}

.revma-ai-action-primary:hover {
    background: linear-gradient(135deg, var(--revma-ai-primary-dark), #1e40af) !important;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45) !important;
    transform: translateY(-2px);
    color: #ffffff !important;
}

/* Action buttons - Secondary CTA */
.revma-ai-action-secondary {
    background: var(--revma-ai-bg-white) !important;
    border: 2px solid var(--revma-ai-primary) !important;
    color: var(--revma-ai-primary) !important;
    font-weight: 500 !important;
}

.revma-ai-action-secondary:hover {
    background: var(--revma-ai-primary-bg) !important;
    border-color: var(--revma-ai-primary-dark) !important;
    color: var(--revma-ai-primary-dark) !important;
    transform: translateY(-2px);
}

/* ============================================
   INPUT AREA (Footer)
============================================ */
.revma-ai-input-area {
    flex-shrink: 0; /* Prevent input area from shrinking */
    padding: 16px;
    background: var(--revma-ai-bg-white);
    border-top: 1px solid var(--revma-ai-border-light);
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.revma-ai-form {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 100%;
    max-width: 100%;
}

.revma-ai-input {
    flex: 1 1 auto;
    min-width: 0; /* Critical: allows input to shrink below content size */
    height: 52px;
    padding: 0 18px;
    border-radius: var(--revma-radius-input, 14px);
    border: 1.5px solid var(--revma-ai-border);
    background: var(--revma-ai-bg-light);

    font-size: 0.95rem;
    color: var(--revma-ai-text-dark);

    transition: border-color var(--revma-ai-transition-fast),
                box-shadow var(--revma-ai-transition-fast);
}

.revma-ai-input::placeholder {
    color: var(--revma-ai-text-light);
}

.revma-ai-input:hover {
    border-color: var(--revma-ai-text-light);
}

.revma-ai-input:focus {
    outline: none;
    border-color: var(--revma-ai-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    background: var(--revma-ai-bg-white);
}

/* Highlight state (from calculator scroll) */
.revma-ai-input.rsk-highlight {
    border-color: var(--revma-ai-primary);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
    animation: revma-ai-input-highlight 0.6s ease;
}

@keyframes revma-ai-input-highlight {
    0%, 100% { box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15); }
    50% { box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.25); }
}

/* Send button (primary style with glow) */
.revma-ai-send {
    width: 52px;
    height: 52px;
    flex-shrink: 0;

    background: linear-gradient(135deg, var(--revma-ai-primary), var(--revma-ai-primary-dark));
    border: none;
    border-radius: var(--revma-radius-input, 14px);
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: var(--revma-shadow-cta-glow, 0 8px 24px rgba(37, 99, 235, 0.35));
    transition: transform var(--revma-ai-transition-fast),
                box-shadow var(--revma-ai-transition-fast);
}

.revma-ai-send:hover {
    transform: translateY(-2px);
    box-shadow: var(--revma-shadow-cta-glow-hover, 0 12px 32px rgba(37, 99, 235, 0.45));
}

.revma-ai-send:focus {
    outline: none;
}

.revma-ai-send:focus-visible {
    outline: 3px solid var(--revma-ai-primary-light);
    outline-offset: 2px;
}

.revma-ai-send:active {
    transform: scale(0.96);
}

.revma-ai-send svg {
    color: white;
    width: 20px;
    height: 20px;
}

/* Disclaimer */
.revma-ai-disclaimer {
    margin-top: 10px;
    font-size: 0.7rem;
    color: var(--revma-ai-text-light);
    text-align: center;
    line-height: 1.4;
}

/* ============================================
   MOBILE BOTTOM SHEET
============================================ */
@media (max-width: 768px) {
    .revma-ai-widget {
        /* Full width bottom sheet */
        position: fixed;
        bottom: 0;
        right: 0;
        left: 0;

        width: 100%;
        max-width: 100%;
        height: 80vh;
        max-height: 80vh;

        /* Bottom sheet style - 22px top radius */
        border-radius: var(--revma-radius-card, 22px) var(--revma-radius-card, 22px) 0 0;
        border-bottom: none;

        /* Animation from bottom */
        transform: translateY(100%);
    }

    .revma-ai-widget.is-open {
        transform: translateY(0);
    }

    /* Handle bar indicator */
    .revma-ai-widget::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 2px;
        z-index: 10;
    }

    .revma-ai-header {
        padding-top: 24px;
        border-radius: var(--revma-radius-card, 22px) var(--revma-radius-card, 22px) 0 0;
    }

    /* No minimized state on mobile */
    .revma-ai-widget.is-minimized {
        display: none;
    }

    /* Suggestions: wrap mode */
    .revma-ai-suggestions {
        padding: 0 16px 16px;
    }

    /* Safe area for notched devices */
    .revma-ai-input-area {
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0));
    }
}

/* Extra small screens - 1 button per row */
@media (max-width: 420px) {
    .revma-ai-suggestions {
        flex-direction: column;
    }

    .revma-ai-suggestion {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    /* Smart flow buttons stay side by side if they fit */
    .revma-ai-smart-flow-btn {
        width: auto;
        min-width: calc(50% - 4px);
        flex: 1 1 calc(50% - 4px);
    }
}

/* ============================================
   STICKY BAR Z-INDEX FIX
   Ensure bot widget is always above sticky bars
============================================ */
#rlg-sticky-bar,
.rlg-sticky-bar,
.sticky-bar,
[class*="sticky-bar"] {
    z-index: 9998 !important; /* Below bot widget (10001) */
}

/* When widget is open, ensure nothing overlaps it */
body.revma-ai-widget-open #rlg-sticky-bar,
body.revma-ai-widget-open .rlg-sticky-bar {
    z-index: 9990 !important;
}

/* ============================================
   OVERLAY (Mobile)
============================================ */
.revma-ai-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999; /* Above sticky bars, below widget */

    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.revma-ai-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

/* Hide overlay on desktop */
@media (min-width: 769px) {
    .revma-ai-overlay {
        display: none;
    }
}

/* ============================================
   ACCESSIBILITY
============================================ */
@media (prefers-reduced-motion: reduce) {
    .revma-ai-toggle,
    .revma-ai-widget,
    .revma-ai-message,
    .revma-ai-suggestion,
    .revma-ai-typing-dot,
    .revma-ai-status-dot {
        animation: none;
        transition-duration: 0.01ms !important;
    }
}

/* Focus trap indicator */
.revma-ai-widget:focus-within {
    outline: none;
}

/* Screen reader only */
.revma-ai-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================
   HIGH CONTRAST MODE
============================================ */
@media (prefers-contrast: high) {
    .revma-ai-widget {
        border-width: 2px;
    }

    .revma-ai-message-text {
        border-width: 2px;
    }

    .revma-ai-suggestion {
        border-width: 2px;
    }

    .revma-ai-input {
        border-width: 2px;
    }
}

/* ============================================
   PRINT STYLES
============================================ */
@media print {
    .revma-ai-toggle,
    .revma-ai-widget,
    .revma-ai-overlay {
        display: none !important;
    }
}

/* ============================================
   SMART FLOW BUTTONS (Conversion Funnel)
============================================ */
.revma-ai-smart-flow-btn {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    padding: 12px 16px;
    text-align: left;
    min-width: 120px;
}

.revma-ai-smart-flow-btn .sf-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--revma-ai-text-dark);
    display: block;
}

.revma-ai-smart-flow-btn .sf-desc {
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--revma-ai-text-light);
    margin-top: 2px;
    display: block;
}

.revma-ai-smart-flow-btn:hover .sf-label {
    color: var(--revma-ai-primary-dark);
}

.revma-ai-smart-flow-btn:hover .sf-desc {
    color: var(--revma-ai-text-medium);
}

/* ============================================
   STEP PROGRESS BADGE (Smart Flow)
============================================ */
.revma-ai-step-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: var(--revma-ai-text-light);
    background: var(--revma-ai-border-light, #f1f5f9);
    padding: 4px 10px;
    border-radius: var(--revma-radius-full, 50px);
    opacity: 0.85;
    margin-bottom: 4px;
    letter-spacing: 0.02em;
}

/* ============================================
   SOFT COMMITMENT CTA (Results Screen)
============================================ */
.revma-ai-soft-cta-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-top: 12px;
}

.revma-ai-soft-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--revma-radius-full, 50px);
    background: var(--revma-ai-bg-white);
    border: 1.5px solid var(--revma-ai-secondary, #10b981);
    color: var(--revma-ai-secondary-dark, #059669);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--revma-ai-transition-fast);
}

.revma-ai-soft-cta:hover {
    background: var(--revma-ai-secondary, #10b981);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.revma-ai-soft-cta:focus {
    outline: none;
}

.revma-ai-soft-cta:focus-visible {
    outline: 2px solid var(--revma-ai-secondary);
    outline-offset: 2px;
}

/* Trust micro-copy */
.revma-ai-trust-copy {
    font-size: 11px;
    color: var(--revma-ai-text-light);
    opacity: 0.8;
    letter-spacing: 0.01em;
}

/* ============================================
   LEAD CAPTURE MODAL
============================================ */
.revma-ai-lead-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10001;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.revma-ai-lead-modal.is-visible {
    display: flex;
}

.revma-ai-lead-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.revma-ai-lead-modal-content {
    position: relative;
    background: var(--revma-ai-bg-white, white);
    border-radius: var(--revma-radius-card, 22px);
    padding: 32px 28px;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    animation: revma-modal-in 0.3s ease-out;
}

@keyframes revma-modal-in {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.revma-ai-lead-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: none;
    background: var(--revma-ai-border-light, #f1f5f9);
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    color: var(--revma-ai-text-medium);
    cursor: pointer;
    transition: all var(--revma-ai-transition-fast);
}

.revma-ai-lead-modal-close:hover {
    background: var(--revma-ai-bg-hover);
    color: var(--revma-ai-text-dark);
}

.revma-ai-lead-modal-content h3 {
    margin: 0 0 8px;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--revma-ai-text-dark);
}

.revma-ai-lead-modal-subtitle {
    margin: 0 0 24px;
    font-size: 0.9rem;
    color: var(--revma-ai-text-medium);
    line-height: 1.5;
}

.revma-ai-lead-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.revma-ai-lead-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.revma-ai-lead-field label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--revma-ai-text-dark);
}

.revma-ai-lead-field input,
.revma-ai-lead-field select {
    padding: 12px 16px;
    border: 1.5px solid var(--revma-ai-border-light, #e2e8f0);
    border-radius: var(--revma-radius-input, 12px);
    font-size: 1rem;
    color: var(--revma-ai-text-dark);
    background: var(--revma-ai-bg-white);
    transition: border-color var(--revma-ai-transition-fast);
}

.revma-ai-lead-field input:focus,
.revma-ai-lead-field select:focus {
    outline: none;
    border-color: var(--revma-ai-primary);
}

.revma-ai-lead-field input::placeholder {
    color: var(--revma-ai-text-light);
}

.revma-ai-lead-submit {
    margin-top: 8px;
    padding: 14px 24px;
    background: var(--revma-ai-primary);
    color: white;
    border: none;
    border-radius: var(--revma-radius-full, 50px);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--revma-ai-transition-fast);
}

.revma-ai-lead-submit:hover {
    background: var(--revma-ai-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
}

.revma-ai-lead-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* Consent checkbox */
.revma-ai-lead-consent {
    margin-top: 12px;
}

.revma-ai-consent-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--revma-ai-text-medium);
    cursor: pointer;
}

.revma-ai-consent-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    flex-shrink: 0;
    accent-color: var(--revma-ai-primary);
}

.revma-ai-consent-label a {
    color: var(--revma-ai-primary);
    text-decoration: underline;
}

.revma-ai-consent-label a:hover {
    color: var(--revma-ai-primary-dark);
}

.revma-ai-lead-footer {
    margin: 8px 0 0;
    text-align: center;
    font-size: 11px;
    color: var(--revma-ai-text-light);
}

/* Lead success state */
.revma-ai-lead-success {
    text-align: center;
    padding: 20px 0;
}

.revma-ai-lead-success svg {
    margin-bottom: 16px;
}

.revma-ai-lead-success h4 {
    margin: 0 0 8px;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--revma-ai-secondary-dark, #059669);
}

.revma-ai-lead-success p {
    margin: 0;
    color: var(--revma-ai-text-medium);
}

/* Lead form error state */
.revma-ai-lead-error {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--revma-ai-radius-md, 12px);
    margin-bottom: 12px;
}

.revma-ai-lead-error-icon {
    flex-shrink: 0;
    color: #ef4444;
}

.revma-ai-lead-error-message {
    flex: 1;
    font-size: 0.9rem;
    color: #991b1b;
    line-height: 1.4;
}

.revma-ai-lead-retry-btn {
    flex-shrink: 0;
    padding: 6px 14px;
    background: #ef4444;
    color: #ffffff;
    border: none;
    border-radius: var(--revma-ai-radius-full, 999px);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.revma-ai-lead-retry-btn:hover {
    background: #dc2626;
}

/* Mobile responsiveness for modal */
@media (max-width: 480px) {
    .revma-ai-lead-modal-content {
        padding: 24px 20px;
        margin: 0 10px;
    }

    .revma-ai-lead-modal-content h3 {
        font-size: 1.1rem;
        padding-right: 30px;
    }
}

/* ============================================
   ADMIN BAR HANDLING
============================================ */
body.admin-bar .revma-ai-toggle {
    bottom: 56px;
}

body.admin-bar .revma-ai-widget {
    bottom: 128px;
}

@media (max-width: 782px) {
    body.admin-bar .revma-ai-toggle {
        bottom: 66px;
    }

    body.admin-bar .revma-ai-widget {
        bottom: 0;
        height: calc(75vh - 46px);
    }
}

/* ============================================
   CALCULATOR INTEGRATION STYLES
============================================ */

/* Autofill highlight animation for calculator inputs */
.rpc-autofilled {
    animation: revma-ai-autofill-pulse 0.6s ease-out;
    box-shadow: 0 0 0 3px var(--revma-ai-secondary, #10b981) !important;
    border-color: var(--revma-ai-secondary, #10b981) !important;
}

@keyframes revma-ai-autofill-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.3);
    }
    100% {
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.5);
    }
}

/* Optional label in lead form */
.revma-ai-optional {
    font-size: 0.8em;
    color: var(--revma-ai-text-light);
    font-weight: normal;
}

/* ============================================
   VALIDATION NOTICES
============================================ */
.revma-ai-notice {
    padding: 10px 14px;
    border-radius: var(--revma-ai-radius-sm);
    margin: 8px 0;
    font-size: 0.85rem;
    animation: revma-ai-notice-fade-in 0.3s ease;
}

.revma-ai-notice-error {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.revma-ai-notice-info {
    background: var(--revma-ai-primary-bg);
    color: var(--revma-ai-primary);
    border: 1px solid var(--revma-ai-border);
}

.revma-ai-notice-success {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

@keyframes revma-ai-notice-fade-in {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   FORM FIELD VALIDATION
============================================ */
.revma-ai-field-error {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2) !important;
}

.revma-ai-error-message {
    display: block;
    font-size: 0.75rem;
    color: #dc2626;
    margin-top: 4px;
    animation: revma-ai-notice-fade-in 0.2s ease;
}

/* ============================================
   SEND BUTTON DISABLED STATE (Empty Input)
============================================ */
.revma-ai-send:disabled,
.revma-ai-send[disabled],
.revma-ai-send.is-disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
    pointer-events: none;
}

/* ============================================
   NETWORK ERROR / RETRY UI
============================================ */
.revma-ai-network-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--revma-ai-radius-md);
    text-align: center;
    animation: revma-ai-notice-fade-in 0.3s ease;
}

.revma-ai-network-error-icon {
    width: 32px;
    height: 32px;
    color: #dc2626;
}

.revma-ai-network-error-text {
    font-size: 0.85rem;
    color: #dc2626;
    line-height: 1.4;
}

.revma-ai-retry-btn {
    padding: 8px 16px;
    background: #dc2626;
    color: white;
    border: none;
    border-radius: var(--revma-radius-full, 50px);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--revma-ai-transition-fast);
}

.revma-ai-retry-btn:hover {
    background: #b91c1c;
    transform: translateY(-1px);
}

.revma-ai-retry-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Rate limit warning */
.revma-ai-rate-limit {
    padding: 12px 16px;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: var(--revma-ai-radius-md);
    color: #92400e;
    font-size: 0.85rem;
    text-align: center;
    animation: revma-ai-notice-fade-in 0.3s ease;
}

/* ============================================
   EMOJI SUPPORT & UNICODE RENDERING
============================================ */
.revma-ai-message-text,
.revma-ai-suggestion,
.revma-ai-soft-cta,
.revma-ai-step-badge {
    /* Ensure emojis render correctly */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Color Emoji", "Segoe UI Emoji", sans-serif;
}

/* Emoji specific sizing */
.revma-ai-message-text .emoji,
.revma-ai-suggestion .emoji {
    font-style: normal;
    font-size: 1.1em;
    vertical-align: middle;
}

/* Prevent emoji line-height issues */
.revma-ai-message-text br + span,
.revma-ai-message-text span:first-child {
    vertical-align: baseline;
}

/* ============================================
   LOADING/CONNECTING STATE
============================================ */
.revma-ai-connecting {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--revma-ai-bg-light);
    border-radius: var(--revma-ai-radius-md);
    font-size: 0.85rem;
    color: var(--revma-ai-text-medium);
}

.revma-ai-connecting-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--revma-ai-border);
    border-top-color: var(--revma-ai-primary);
    border-radius: 50%;
    animation: revma-ai-spin 0.8s linear infinite;
}

@keyframes revma-ai-spin {
    to { transform: rotate(360deg); }
}

/* ============================================
   INPUT AREA ENHANCEMENTS
============================================ */
/* Prevent zoom on iOS when focusing input */
@media (max-width: 768px) {
    .revma-ai-input {
        font-size: 16px; /* Prevents iOS zoom */
    }
}

/* Character counter (optional) */
.revma-ai-char-counter {
    position: absolute;
    right: 70px;
    bottom: 22px;
    font-size: 0.7rem;
    color: var(--revma-ai-text-light);
    opacity: 0;
    transition: opacity var(--revma-ai-transition-fast);
}

.revma-ai-input:focus ~ .revma-ai-char-counter {
    opacity: 1;
}

.revma-ai-char-counter.is-warning {
    color: #f59e0b;
}

.revma-ai-char-counter.is-error {
    color: #dc2626;
}

/* ============================================
   v3.1 - CHATBOT CONVERSION POLISH
   - Header subtitle
   - Filled primary quick reply
   - Human tone styling
   - Bold savings highlight
   - Mobile full modal
   - No overlap with CTAs
============================================ */

/* Header with subtitle */
.revma-ai-header {
    padding: 16px 20px !important;
}

.revma-ai-header-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    margin-bottom: 2px !important;
}

.revma-ai-header-subtitle {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
}

/* Quick replies - same height */
.revma-ai-suggestions {
    min-height: 52px !important;
}

.revma-ai-suggestion {
    height: 38px !important;
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Primary quick reply - FILLED, not outline */
.revma-ai-suggestion-primary,
.revma-ai-suggestion:first-child {
    background: linear-gradient(135deg, #2563EB 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
}

.revma-ai-suggestion-primary:hover,
.revma-ai-suggestion:first-child:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%) !important;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4) !important;
    color: #ffffff !important;
}

/* Human-friendly message styling */
.revma-ai-message-text .emoji {
    font-size: 1.1em;
    margin-right: 2px;
}

/* Savings highlight - bold green with background */
.revma-ai-savings-highlight,
.revma-ai-message-text .savings-amount {
    display: inline-block;
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #166534 !important;
    font-weight: 800 !important;
    font-size: 1.1em !important;
    padding: 4px 12px;
    border-radius: 8px;
    margin: 4px 0;
}

/* Lock price CTA - prominent */
.revma-ai-lock-cta,
.revma-ai-message-cta.lock-cta {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.4) !important;
    animation: revma-ai-cta-pulse-green 2s ease-in-out infinite;
}

@keyframes revma-ai-cta-pulse-green {
    0%, 100% { box-shadow: 0 4px 14px rgba(34, 197, 94, 0.4); }
    50% { box-shadow: 0 6px 20px rgba(34, 197, 94, 0.6); }
}

.revma-ai-lock-cta:hover,
.revma-ai-message-cta.lock-cta:hover {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    animation: none;
}

/* Mobile: Full-width modal */
@media (max-width: 480px) {
    .revma-ai-widget {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 85vh !important;
        max-height: 85vh !important;
        border-radius: 20px 20px 0 0 !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }

    .revma-ai-widget.is-open {
        animation: revma-ai-slide-up-mobile 0.3s ease-out;
    }

    @keyframes revma-ai-slide-up-mobile {
        from {
            transform: translateY(100%);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    /* Toggle button position - above mobile navigation bars */
    .revma-ai-toggle {
        bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* Ensure chatbot doesn't cover CTAs */
.revma-ai-widget {
    z-index: 10001 !important;
}

.revma-ai-toggle {
    z-index: 10000 !important;
}

/* When sticky CTA bar is present */
body.has-sticky-cta .revma-ai-toggle {
    bottom: 90px !important;
}

@media (max-width: 768px) {
    body.has-sticky-cta .revma-ai-toggle {
        bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.has-sticky-cta .revma-ai-widget {
        bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* Desktop: Widget positioned higher */
@media (min-width: 769px) {
    .revma-ai-widget {
        bottom: 100px !important;
    }
}