/**
 * Refact AI Chat Widget Styles
 * WordPress Plugin Integration
 */

/* ========================================
   CSS CUSTOM PROPERTIES (THEME SYSTEM)
   ======================================== */

:root {
    /* Primary Colors */
    --chat-primary-color: #1a365d;
    --chat-primary-hover: #153451;
    --chat-primary-light: #ebf8ff;
    
    /* Background Colors */
    --chat-background: #f8fafc;
    --chat-messages-background: #f8f9fa;
    --chat-input-background: #ffffff;
    
    /* Message Colors */
    --chat-user-bg: #1a365d;
    --chat-user-text: #ffffff;
    --chat-user-border: #1a365d;
    --chat-ai-bg: #fff;
    --chat-ai-text: #333;
    --chat-ai-border: #e1e5e9;
    
    /* Border Colors */
    --chat-border-color: #cbd5e0;
    --chat-border-radius: 6px;
    --chat-message-radius: 18px;
    
    /* Text Colors */
    --chat-text-primary: #333333;
    --chat-text-secondary: #666666;
    --chat-text-muted: #999999;
    --chat-timestamp-color: #676767;

    --chat-send-button-color: #1a365d;
    --chat-send-button-hover-color: #2d3748;
    --chat-send-button-disabled-color: #999999;
    
    /* Shadows */
    --chat-shadow: 0 5px 25px rgba(0,0,0,0.2);
    --chat-shadow-light: 0 2px 8px rgba(0,0,0,0.1);
    
    /* Spacing */
    --chat-padding: 15px;
    --chat-margin: 15px;
    
    /* Font */
    --chat-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --chat-font-size: 1em;
    --chat-font-size-small: 0.9em;
    --chat-font-size-tiny: 0.7em;
}

/* ========================================
   BRAND THEMES
   ======================================== */

/* Custom Brand Theme - Based on Your Color Palette */
[data-theme="brand"] {
    /* Primary Colors - Using Primary 600 as main, Primary 700 as hover */
    --chat-primary-color: #265DEA;
    --chat-primary-hover: #1E48D7;
    --chat-primary-light: #DBE9FE;
    
    /* Background Colors - Using Soapstone and light neutrals */
    --chat-background: #FDF8F5;
    --chat-messages-background: #FDF8F5;
    --chat-input-background: #FFFFFF;
    
    /* Message Colors */
    --chat-user-bg: #265DEA;
    --chat-user-text: #FFFFFF;
    --chat-user-border: #265DEA;
    --chat-ai-bg: #DBE9FE;
    --chat-ai-text: #172354;
    --chat-ai-border: #BFD9FE;
    
    /* Border Colors - Using neutral tones */
    --chat-border-color: #CFCCC0;
    --chat-border-radius: 12px;
    --chat-message-radius: 16px;
    
    /* Text Colors - Using neutral palette */
    --chat-text-primary: #1D1D16;
    --chat-text-secondary: #5F5D49;
    --chat-text-muted: #737159;
    --chat-timestamp-color: #737159;

    /* Send Button Colors */
    --chat-send-button-color: #265DEA;
    --chat-send-button-hover-color: #1E48D7;
    --chat-send-button-disabled-color: #CFCCC0;
    
    /* Shadows - Softer, more elegant */
    --chat-shadow: 0 4px 20px rgba(38, 93, 234, 0.15);
    --chat-shadow-light: 0 2px 8px rgba(38, 93, 234, 0.08);
}

/* Brand Theme with Accent Colors - Green Version */
[data-theme="brand-accent"] {
    /* Using Green Yellow as accent */
    --chat-primary-color: #5C8A03;
    --chat-primary-hover: #4a7002;
    --chat-primary-light: #C5FB5D;
    
    --chat-background: #FDF8F5;
    --chat-messages-background: #FDF8F5;
    --chat-input-background: #FFFFFF;
    
    /* Mix of accent colors for variety */
    --chat-user-bg: linear-gradient(135deg, #5C8A03, #265DEA);
    --chat-user-text: #FFFFFF;
    --chat-ai-bg: #DBE9FE;
    --chat-ai-text: #172354;
    --chat-ai-border: #BFD9FE;
    
    --chat-border-color: #CFCCC0;
    --chat-border-radius: 12px;
    --chat-message-radius: 20px;
    
    --chat-text-primary: #1D1D16;
    --chat-text-secondary: #5F5D49;
    --chat-text-muted: #737159;
    --chat-timestamp-color: #737159;

    --chat-send-button-color: #5C8A03;
    --chat-send-button-hover-color: #4a7002;
    --chat-send-button-disabled-color: #CFCCC0;
    
    --chat-shadow: 0 4px 20px rgba(92, 138, 3, 0.15);
    --chat-shadow-light: 0 2px 8px rgba(92, 138, 3, 0.08);
}

/* Brand Theme with Pink Accent - Warm Version */
[data-theme="brand-warm"] {
    /* Using Carnation Pink as accent */
    --chat-primary-color: #D20154;
    --chat-primary-hover: #b8014a;
    --chat-primary-light: #FFA9CC;
    
    --chat-background: #FDF8F5;
    --chat-messages-background: #FDF8F5;
    --chat-input-background: #FFFFFF;
    
    /* Pink accent for user messages */
    --chat-user-bg: linear-gradient(135deg, #D20154, #FFA9CC);
    --chat-user-text: #FFFFFF;
    --chat-ai-bg: #DBE9FE;
    --chat-ai-text: #172354;
    --chat-ai-border: #BFD9FE;
    
    --chat-border-color: #CFCCC0;
    --chat-border-radius: 14px;
    --chat-message-radius: 18px;
    
    --chat-text-primary: #1D1D16;
    --chat-text-secondary: #5F5D49;
    --chat-text-muted: #737159;
    --chat-timestamp-color: #737159;

    --chat-send-button-color: #D20154;
    --chat-send-button-hover-color: #b8014a;
    --chat-send-button-disabled-color: #CFCCC0;
    
    --chat-shadow: 0 4px 20px rgba(210, 1, 84, 0.15);
    --chat-shadow-light: 0 2px 8px rgba(210, 1, 84, 0.08);
}







/* Dark mode adaptation for default theme */
/* @media (prefers-color-scheme: dark) {
    :root {
        --chat-primary-color: #4dabf7;
        --chat-primary-hover: #339af0;
        --chat-primary-light: #1a1a1a;
        
        --chat-background: #1a1a1a;
        --chat-messages-background: #2d2d2d;
        --chat-input-background: #2d2d2d;
        
        --chat-user-bg: #4dabf7;
        --chat-user-text: #ffffff;
        --chat-ai-bg: #404040;
        --chat-ai-text: #e9e9e9;
        
        --chat-border-color: #404040;
        --chat-text-primary: #e9e9e9;
        --chat-text-secondary: #b9b9b9;
        --chat-text-muted: #888888;
        --chat-timestamp-color: #888888;
    }
} */

/* ========================================
   THEME VARIATIONS
   ======================================== */





/* WordPress Integration Specific Styles */
#refact-chat-container {
    position: fixed;
    z-index: 999999; /* High z-index to stay above WordPress themes */
    font-family: var(--chat-font-family);
    font-size: 14px;
}

/* Position variants */
.refact-chat-position-bottom-right {
    bottom: 20px;
    right: 20px;
}

.refact-chat-position-bottom-left {
    bottom: 20px;
    left: 20px;
}

.refact-chat-position-top-right {
    top: 20px;
    right: 20px;
}

.refact-chat-position-top-left {
    top: 20px;
    left: 20px;
}

/* Floating chat button */
.refact-chat-box-header{
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #000;
}
.refact-chat-box{
    background-color: #fff;
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 0 #0000, 0 0 #0000, 0 2px 24px 1px rgba(0, 0, 0, .16);
}
.refact-chat-icon{
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #fff;
}
.refact-floating-chat-button {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 12px;
    background: var(--chat-primary-color);
    color: white;
    width: 100%;
    height: 36px;
    padding: 0 12px;
    border-radius: 12px;
    align-items: center;
    cursor: pointer;
    transition: background 0.2s;
    border: none;
    font-size: 14px;
    position: relative;
}

.refact-floating-chat-button:hover {
    background: var(--chat-primary-hover);
}

/* Special gradient styling for accent themes */
[data-theme="brand-accent"] .refact-floating-chat-button {
    background: linear-gradient(135deg, #5C8A03, #265DEA);
}

[data-theme="brand-accent"] .refact-floating-chat-button:hover {
    background: linear-gradient(135deg, #4a7002, #1E48D7);
}

[data-theme="brand-warm"] .refact-floating-chat-button {
    background: linear-gradient(135deg, #D20154, #FFA9CC);
}

[data-theme="brand-warm"] .refact-floating-chat-button:hover {
    background: linear-gradient(135deg, #b8014a, #ff8fb8);
}

.refact-floating-chat-button.hidden {
    transform: scale(0);
    opacity: 0;
}

.refact-floating-chat-button svg {
    fill: white;
}

/* Chat widget iframe */
.refact-chat-widget-iframe {
    border: none;
    border-radius: 15px;
    box-shadow: var(--chat-shadow);
    width: 400px;
    height: 600px;
    background: transparent;
    pointer-events: auto;
    transition: width 0.3s ease, height 0.3s ease, bottom 0.3s ease, right 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
    display: none;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    bottom: 0;
    right: 0;
}

.refact-chat-widget-iframe.active {
    display: block;
    opacity: 1;
    visibility: visible;
}

/* Fullscreen mode */
.refact-chat-widget-iframe.fullscreen {
    width: 500px !important;
    height: calc(100vh - 40px) !important;
    bottom: 20px !important;
    right: 20px !important;
    border-radius: 0 !important;
    position: fixed !important;
}

/* Mobile responsive styles */
@media (max-width: 640px) {
    .refact-chat-widget-iframe.fullscreen,
    .refact-chat-widget-iframe {
        width: 100% !important;
        height: 100% !important;
        bottom: 0 !important;
        right: 0 !important;
        border-radius: 0 !important;
        position: fixed !important;
    }
    
}


/* Accessibility improvements */
.refract-floating-chat-button:focus {
    outline: 2px solid var(--chat-primary-color);
    outline-offset: 2px;
}

/* Animation for smooth appearance */
@keyframes refactChatSlideIn {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.refact-chat-widget-iframe.animate-in {
    animation: refactChatSlideIn 0.3s ease-out;
}

/* Ensure proper stacking context */
#refact-chat-container * {
    box-sizing: border-box;
}

/* Theme customization support */
.refact-chat-custom-colors {
    --chat-primary-color: var(--refact-custom-primary, #1a365d);
    --chat-primary-hover: var(--refact-custom-primary-hover, #153451);
}