/**
 * Escort Erotica LiveChat Styles
 * Beautiful, modern chat widget design
 */

/* CSS Variables - All customizable via plugin settings */
:root {
    /* Base colors */
    --ee-primary-color: #e91e63;
    --ee-secondary-color: #c2185b;
    --ee-icon-color: #ffffff;
    
    /* Text colors */
    --ee-text-color: #333;
    --ee-text-light: #666;
    --ee-chat-text: #333;
    
    /* Background colors */
    --ee-bg-color: #fff;
    --ee-bg-light: #f8f9fa;
    --ee-chat-bg: #f8f9fa;
    
    /* Border */
    --ee-border-color: #e0e0e0;
    
    /* Header (fallback to gradient) */
    --ee-header-bg: linear-gradient(135deg, var(--ee-primary-color) 0%, var(--ee-secondary-color) 100%);
    --ee-header-text: #fff;
    
    /* Close button */
    --ee-close-btn-bg: rgba(0, 0, 0, 0.25);
    --ee-close-btn-color: #fff;
    
    /* Send button */
    --ee-send-btn-bg: linear-gradient(135deg, var(--ee-primary-color) 0%, var(--ee-secondary-color) 100%);
    --ee-send-btn-color: #fff;
    
    /* Message bubbles */
    --ee-user-bubble-bg: linear-gradient(135deg, var(--ee-primary-color) 0%, var(--ee-secondary-color) 100%);
    --ee-bot-bubble-bg: #fff;
    
    /* Action buttons */
    --ee-btn-text: #333;
    --ee-btn-bg: #fff;
    --ee-btn-border: #e0e0e0;
    --ee-btn-hover-bg: var(--ee-primary-color);
    --ee-btn-hover-text: #fff;
    
    /* Input */
    --ee-input-border: #e0e0e0;
    
    /* Shadows & Effects */
    --ee-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    --ee-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --ee-radius: 16px;
    --ee-radius-sm: 12px;
    --ee-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Container */
.ee-livechat-container {
    position: fixed;
    z-index: 999999;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

.ee-livechat-container * {
    box-sizing: border-box;
}

.ee-position-bottom-right {
    bottom: 20px;
    right: 20px;
}

.ee-position-bottom-left {
    bottom: 20px;
    left: 20px;
}

/* Toggle Button */
.ee-livechat-toggle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ee-primary-color) 0%, var(--ee-secondary-color) 100%);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--ee-shadow);
    transition: var(--ee-transition);
    position: relative;
    color: var(--ee-icon-color);
    /* Pulsing animation */
    animation: ee-toggle-pulse 2s infinite;
}

.ee-livechat-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 40px rgba(233, 30, 99, 0.4);
    animation: none; /* Stop pulse on hover */
}

.ee-livechat-toggle:active {
    transform: scale(0.95);
}

/* Pulsing animation for toggle button */
@keyframes ee-toggle-pulse {
    0%, 100% {
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 0 0 0 rgba(233, 30, 99, 0.4);
    }
    50% {
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 0 0 12px rgba(233, 30, 99, 0);
    }
}

.ee-toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--ee-transition);
    width: 28px;
    height: 28px;
}

.ee-toggle-icon svg {
    width: 100%;
    height: 100%;
    color: var(--ee-icon-color);
}

.ee-notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #ff4444;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: ee-pulse 2s infinite;
}

@keyframes ee-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Chat Window */
.ee-livechat-window {
    position: absolute;
    bottom: 80px;
    width: 380px;
    max-width: calc(100vw - 40px);
    height: 600px;
    max-height: calc(100vh - 120px);
    background: var(--ee-bg-color);
    border-radius: var(--ee-radius);
    box-shadow: var(--ee-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: ee-slideUp 0.3s ease-out;
}

.ee-position-bottom-right .ee-livechat-window {
    right: 0;
}

.ee-position-bottom-left .ee-livechat-window {
    left: 0;
}

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

/* Header - uses --ee-header-bg and --ee-header-text if set */
.ee-livechat-header {
    background: var(--ee-header-bg, linear-gradient(135deg, var(--ee-primary-color) 0%, var(--ee-secondary-color) 100%));
    color: var(--ee-header-text, #fff);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.ee-header-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ee-header-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ee-avatar-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.9);
}

.ee-header-info {
    flex: 1;
    min-width: 0;
}

.ee-header-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ee-header-status {
    font-size: 12px;
    opacity: 0.9;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ee-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4caf50;
    animation: ee-pulse 2s infinite;
}

/* Close button - uses --ee-close-btn-bg and --ee-close-btn-color if set */
/* Close button - high specificity to override themes */
.ee-livechat-container .ee-header-close,
#ee-livechat-container .ee-header-close {
    background: var(--ee-close-btn-bg, rgba(0, 0, 0, 0.25)) !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    color: var(--ee-close-btn-color, #ffffff) !important;
    flex-shrink: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    padding: 0 !important;
}

.ee-livechat-container .ee-header-close:hover,
#ee-livechat-container .ee-header-close:hover {
    filter: brightness(1.2);
    transform: scale(1.1);
}

/* Messages Container */
/* Messages area - uses --ee-chat-bg for background */
.ee-livechat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: var(--ee-chat-bg, var(--ee-bg-light));
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ee-livechat-messages::-webkit-scrollbar {
    width: 6px;
}

.ee-livechat-messages::-webkit-scrollbar-track {
    background: transparent;
}

.ee-livechat-messages::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

.ee-livechat-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.2);
}

/* Message Bubbles */
.ee-message {
    display: flex;
    gap: 8px;
    max-width: 85%;
    animation: ee-fadeIn 0.3s ease-out;
}

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

.ee-message-user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.ee-message-bot {
    align-self: flex-start;
}

.ee-message-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.ee-message-bot .ee-message-avatar {
    background: linear-gradient(135deg, var(--ee-primary-color) 0%, var(--ee-secondary-color) 100%);
    color: #fff;
}

.ee-message-user .ee-message-avatar {
    background: var(--ee-border-color);
    color: var(--ee-text-light);
}

.ee-message-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ee-message-bubble {
    padding: 12px 16px;
    border-radius: var(--ee-radius-sm);
    word-wrap: break-word;
    white-space: pre-wrap;
}

/* Message bubbles - use --ee-bot-bubble-bg, --ee-user-bubble-bg, --ee-chat-text if set */
/* Bot bubble - uses --ee-bot-bubble-text for text color */
.ee-livechat-container .ee-message-bot .ee-message-bubble,
#ee-livechat-container .ee-message-bot .ee-message-bubble {
    background: var(--ee-bot-bubble-bg, var(--ee-bg-color)) !important;
    color: var(--ee-bot-bubble-text, var(--ee-chat-text, #333333)) !important;
    border-bottom-left-radius: 4px;
    box-shadow: var(--ee-shadow-sm);
}

/* User bubble - uses --ee-user-bubble-text for text color */
.ee-livechat-container .ee-message-user .ee-message-bubble,
#ee-livechat-container .ee-message-user .ee-message-bubble {
    background: var(--ee-user-bubble-bg, linear-gradient(135deg, var(--ee-primary-color) 0%, var(--ee-secondary-color) 100%)) !important;
    color: var(--ee-user-bubble-text, #ffffff) !important;
    border-bottom-right-radius: 4px;
}

/* Message time - uses --ee-time-color */
.ee-livechat-container .ee-message-time,
#ee-livechat-container .ee-message-time {
    font-size: 11px !important;
    color: var(--ee-time-color, #999999) !important;
    padding: 0 4px !important;
}

.ee-livechat-container .ee-message-user .ee-message-time,
#ee-livechat-container .ee-message-user .ee-message-time {
    text-align: right;
}

/* Typing Indicator */
.ee-typing-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 16px;
    background: var(--ee-bg-color);
    border-radius: var(--ee-radius-sm);
    border-bottom-left-radius: 4px;
    box-shadow: var(--ee-shadow-sm);
    width: fit-content;
}

.ee-typing-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ee-primary-color);
    animation: ee-typing 1.4s infinite;
}

.ee-typing-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.ee-typing-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes ee-typing {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-8px); opacity: 1; }
}

/* Quick Actions - uses button color variables with high specificity */
.ee-livechat-container .ee-livechat-quick-actions {
    padding: 12px 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    background: var(--ee-bg-color, #fff);
    border-top: 1px solid var(--ee-border-color, #e0e0e0);
}

.ee-livechat-container .ee-quick-action,
.ee-livechat-container button.ee-quick-action {
    padding: 8px 14px !important;
    font-size: 13px !important;
    border: 1px solid var(--ee-btn-border, #e0e0e0) !important;
    background: var(--ee-btn-bg, #fff) !important;
    color: var(--ee-btn-text, #333) !important;
    border-radius: 20px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    font-family: inherit !important;
}

.ee-livechat-container .ee-quick-action:hover,
.ee-livechat-container button.ee-quick-action:hover {
    background: var(--ee-btn-hover-bg, var(--ee-primary-color)) !important;
    border-color: var(--ee-btn-hover-bg, var(--ee-primary-color)) !important;
    color: var(--ee-btn-hover-text, #fff) !important;
    transform: translateY(-2px);
}

/* Input Container */
/* Input Container - high specificity to override themes */
.ee-livechat-container .ee-livechat-input-container,
#ee-livechat-container .ee-livechat-input-container {
    padding: 12px 16px 16px !important;
    background: var(--ee-input-bg, #ffffff) !important;
    border-top: 1px solid var(--ee-border-color, #e0e0e0) !important;
    flex-shrink: 0 !important;
}

.ee-livechat-container .ee-livechat-form,
#ee-livechat-container .ee-livechat-form {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
}

/* Input wrapper - high specificity */
.ee-livechat-container .ee-input-wrapper,
#ee-livechat-container .ee-input-wrapper {
    flex: 1 !important;
    display: flex !important;
    background: var(--ee-input-bg, #f8f9fa) !important;
    border-radius: 28px !important;
    border: 2px solid var(--ee-input-border, #e0e0e0) !important;
    transition: all 0.3s ease !important;
    overflow: hidden;
    min-height: 48px;
}

/* Input wrapper focus state */
.ee-livechat-container .ee-input-wrapper:focus-within,
#ee-livechat-container .ee-input-wrapper:focus-within {
    border-color: var(--ee-primary-color) !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05) !important;
}

/* Input field - high specificity */
.ee-livechat-container .ee-livechat-input,
#ee-livechat-container .ee-livechat-input,
.ee-livechat-container input.ee-livechat-input {
    flex: 1 !important;
    padding: 12px 20px !important;
    border: none !important;
    background: transparent !important;
    font-size: 15px !important;
    color: var(--ee-input-text, #333333) !important;
    outline: none !important;
    min-height: 44px !important;
    box-shadow: none !important;
}

.ee-livechat-container .ee-livechat-input::placeholder,
#ee-livechat-container .ee-livechat-input::placeholder {
    color: var(--ee-input-placeholder, #999999) !important;
    opacity: 1 !important;
}

/* Send button - uses --ee-send-btn-bg and --ee-send-btn-color if set */
/* Send button - high specificity to override themes */
.ee-livechat-container .ee-send-button,
#ee-livechat-container .ee-send-button,
.ee-livechat-container button.ee-send-button {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    background: var(--ee-send-btn-bg, linear-gradient(135deg, var(--ee-primary-color) 0%, var(--ee-secondary-color) 100%)) !important;
    border: none !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--ee-send-btn-color, #ffffff) !important;
    transition: all 0.3s ease !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.ee-livechat-container .ee-send-button:hover,
#ee-livechat-container .ee-send-button:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !important;
    filter: brightness(1.1);
}

.ee-livechat-container .ee-send-button:active,
#ee-livechat-container .ee-send-button:active {
    transform: scale(0.95);
}

.ee-livechat-container .ee-send-button:disabled,
#ee-livechat-container .ee-send-button:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

.ee-livechat-container .ee-send-button svg,
#ee-livechat-container .ee-send-button svg {
    width: 20px !important;
    height: 20px !important;
    color: inherit !important;
    display: block !important;
    margin: auto !important;
}

/* Powered By */
.ee-powered-by {
    text-align: center;
    font-size: 11px;
    color: var(--ee-text-light);
    margin-top: 8px;
}

.ee-powered-by a {
    color: var(--ee-primary-color);
    text-decoration: none;
}

.ee-powered-by a:hover {
    text-decoration: underline;
}

/* Image Gallery in Messages */
.ee-message-images {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 8px;
    margin-top: 8px;
}

.ee-message-image {
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: var(--ee-transition);
}

.ee-message-image:hover {
    transform: scale(1.02);
}

.ee-message-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Inline images from Markdown */
.ee-inline-image {
    display: inline-block;
    max-width: 200px;
    margin: 4px;
    vertical-align: top;
}

.ee-inline-image img {
    border-radius: 8px;
    max-width: 100%;
    height: auto;
}

/* Multiple inline images in a row */
.ee-message-bubble .ee-inline-image + .ee-inline-image {
    margin-left: 4px;
}

/* Grid layout for multiple images in message */
.ee-message-bubble:has(.ee-inline-image:nth-child(2)) {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ee-message-bubble:has(.ee-inline-image:nth-child(2)) .ee-inline-image {
    flex: 1 1 calc(50% - 4px);
    max-width: calc(50% - 4px);
}

/* Action Buttons in Messages */
/* Message buttons - uses button color variables with high specificity */
.ee-livechat-container .ee-message-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.ee-livechat-container .ee-message-button,
.ee-livechat-container button.ee-message-button {
    padding: 8px 16px !important;
    font-size: 13px !important;
    background: var(--ee-btn-bg, #fff) !important;
    border: 1px solid var(--ee-btn-border, #e0e0e0) !important;
    border-radius: 20px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    color: var(--ee-btn-text, #333) !important;
    text-decoration: none !important;
    font-family: inherit !important;
    line-height: 1.4 !important;
}

.ee-livechat-container .ee-message-button:hover,
.ee-livechat-container button.ee-message-button:hover {
    background: var(--ee-btn-hover-bg, var(--ee-primary-color)) !important;
    border-color: var(--ee-btn-hover-bg, var(--ee-primary-color)) !important;
    color: var(--ee-btn-hover-text, #fff) !important;
}

/* Girl Buttons with Profile Photos - BIGGER CARDS for better visibility */
.ee-livechat-container .ee-girl-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 12px;
    width: 100%;
}

.ee-livechat-container .ee-girl-button,
.ee-livechat-container button.ee-girl-button {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px !important;
    background: var(--ee-btn-bg, #fff) !important;
    border: 2px solid var(--ee-btn-border, #e0e0e0) !important;
    border-radius: 16px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.ee-livechat-container .ee-girl-button:hover,
.ee-livechat-container button.ee-girl-button:hover {
    border-color: var(--ee-btn-hover-bg, var(--ee-primary-color)) !important;
    background: var(--ee-btn-hover-bg, var(--ee-primary-color)) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ee-livechat-container .ee-girl-button:active {
    transform: translateY(0);
}

.ee-livechat-container .ee-girl-btn-photo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--ee-primary-color, #e91e63);
    transition: all 0.3s ease;
}

.ee-livechat-container .ee-girl-button:hover .ee-girl-btn-photo {
    border-color: var(--ee-btn-hover-text, #fff);
}

.ee-livechat-container .ee-girl-btn-name {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--ee-btn-text, #333) !important;
    text-align: center !important;
    line-height: 1.2 !important;
    word-break: break-word !important;
}

.ee-livechat-container .ee-girl-button:hover .ee-girl-btn-name {
    color: var(--ee-btn-hover-text, #fff) !important;
}

/* ============================================
   MOBILE RESPONSIVE - Vollbild Chat mit Tastatur-Fix
   ============================================ */
@media (max-width: 600px) {
    /* Container auf Mobile */
    .ee-livechat-container {
        bottom: 16px !important;
        right: 16px !important;
    }
    
    .ee-position-bottom-left.ee-livechat-container {
        left: 16px !important;
        right: auto !important;
    }
    
    /* Chat Window - Mobile FULLSCREEN */
    #ee-livechat-window,
    .ee-livechat-window,
    body > .ee-livechat-window,
    body > #ee-livechat-window,
    .ee-window-in-body,
    div.ee-livechat-window,
    div#ee-livechat-window {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        height: 100dvh !important;
        max-height: 100% !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        z-index: 2147483647 !important;
        box-shadow: none !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        background: var(--ee-bg-color, #fff) !important;
    }
    
    /* Keyboard open state */
    .ee-livechat-window.ee-keyboard-open,
    #ee-livechat-window.ee-keyboard-open {
        height: var(--ee-viewport-height, 100dvh) !important;
        max-height: var(--ee-viewport-height, 100dvh) !important;
    }
    
    /* Header - Mobile */
    #ee-livechat-window .ee-livechat-header,
    .ee-livechat-window .ee-livechat-header,
    div.ee-livechat-window .ee-livechat-header {
        background: var(--ee-header-bg, linear-gradient(135deg, var(--ee-primary-color, #e91e63) 0%, var(--ee-secondary-color, #c2185b) 100%)) !important;
        color: var(--ee-header-text, #fff) !important;
        padding: 16px 20px !important;
        flex-shrink: 0 !important;
        padding-top: max(16px, env(safe-area-inset-top)) !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        overflow: visible !important;
        position: relative !important;
        z-index: 10 !important;
    }
    
    /* Messages Container - Mobile */
    #ee-livechat-window .ee-livechat-messages,
    .ee-livechat-window .ee-livechat-messages,
    div.ee-livechat-window .ee-livechat-messages,
    #ee-livechat-messages {
        flex: 1 !important;
        overflow-y: auto !important;
        background: var(--ee-chat-bg, var(--ee-bg-light, #f8f9fa)) !important;
        padding: 16px !important;
        -webkit-overflow-scrolling: touch !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    /* ======== INPUT CONTAINER - MOBILE - KRITISCH ======== */
    #ee-livechat-window .ee-livechat-input-container,
    .ee-livechat-window .ee-livechat-input-container,
    div.ee-livechat-window .ee-livechat-input-container,
    .ee-livechat-input-container {
        flex-shrink: 0 !important;
        background: var(--ee-input-bg, var(--ee-bg-color, #ffffff)) !important;
        border-top: 1px solid var(--ee-border-color, #e0e0e0) !important;
        padding: 12px 16px 16px 16px !important;
        padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
    }
    
    /* ======== FORM LAYOUT - MOBILE - KRITISCH ======== */
    #ee-livechat-window .ee-livechat-form,
    .ee-livechat-window .ee-livechat-form,
    div.ee-livechat-window .ee-livechat-form,
    #ee-livechat-form,
    .ee-livechat-form,
    form.ee-livechat-form {
        display: flex !important;
        flex-direction: row !important;
        gap: 12px !important;
        align-items: center !important;
        width: 100% !important;
    }
    
    /* ======== INPUT WRAPPER - MOBILE - KRITISCH ======== */
    #ee-livechat-window .ee-input-wrapper,
    .ee-livechat-window .ee-input-wrapper,
    div.ee-livechat-window .ee-input-wrapper,
    .ee-livechat-form .ee-input-wrapper,
    .ee-input-wrapper,
    div.ee-input-wrapper {
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: row !important;
        background: var(--ee-input-bg, var(--ee-bg-light, #f8f9fa)) !important;
        border: 2px solid var(--ee-input-border, #e0e0e0) !important;
        border-radius: 28px !important;
        overflow: hidden !important;
        min-height: 48px !important;
        max-width: calc(100% - 60px) !important;
    }
    
    #ee-livechat-window .ee-input-wrapper:focus-within,
    .ee-livechat-window .ee-input-wrapper:focus-within,
    .ee-input-wrapper:focus-within {
        border-color: var(--ee-primary-color, #e91e63) !important;
        box-shadow: 0 0 0 3px rgba(233, 30, 99, 0.1) !important;
    }
    
    /* ======== INPUT FIELD - MOBILE - KRITISCH ======== */
    #ee-livechat-window .ee-livechat-input,
    .ee-livechat-window .ee-livechat-input,
    div.ee-livechat-window .ee-livechat-input,
    #ee-livechat-input,
    .ee-livechat-input,
    input.ee-livechat-input,
    input#ee-livechat-input {
        flex: 1 1 auto !important;
        width: 100% !important;
        border: none !important;
        background: transparent !important;
        padding: 12px 20px !important;
        font-size: 16px !important;
        color: var(--ee-input-text, var(--ee-chat-text, #333333)) !important;
        outline: none !important;
        box-shadow: none !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        min-height: 44px !important;
        margin: 0 !important;
        line-height: 1.4 !important;
    }
    
    #ee-livechat-window .ee-livechat-input::placeholder,
    .ee-livechat-window .ee-livechat-input::placeholder,
    .ee-livechat-input::placeholder,
    input.ee-livechat-input::placeholder {
        color: var(--ee-input-placeholder, #999999) !important;
        opacity: 1 !important;
    }
    
    /* ======== SEND BUTTON - MOBILE - KRITISCH ======== */
    #ee-livechat-window .ee-send-button,
    .ee-livechat-window .ee-send-button,
    div.ee-livechat-window .ee-send-button,
    .ee-livechat-form .ee-send-button,
    .ee-send-button,
    button.ee-send-button {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;
        background: var(--ee-send-btn-bg, linear-gradient(135deg, var(--ee-primary-color, #e91e63) 0%, var(--ee-secondary-color, #c2185b) 100%)) !important;
        border: none !important;
        border-radius: 50% !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: var(--ee-send-btn-color, #fff) !important;
        flex: 0 0 48px !important;
        box-shadow: 0 4px 12px rgba(233, 30, 99, 0.3) !important;
        padding: 0 !important;
        margin: 0 !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        position: relative !important;
    }
    
    #ee-livechat-window .ee-send-button svg,
    .ee-livechat-window .ee-send-button svg,
    .ee-send-button svg,
    button.ee-send-button svg {
        width: 22px !important;
        height: 22px !important;
        color: var(--ee-send-btn-color, #fff) !important;
        fill: currentColor !important;
        display: block !important;
        margin: auto !important;
    }
    
    /* Close Button - Mobile - HIGH Z-INDEX */
    #ee-livechat-window .ee-header-close,
    .ee-livechat-window .ee-header-close,
    .ee-header-close,
    button.ee-header-close {
        background: var(--ee-close-btn-bg, rgba(0, 0, 0, 0.25)) !important;
        border: 2px solid rgba(255, 255, 255, 0.4) !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: var(--ee-close-btn-color, #fff) !important;
        font-size: 18px !important;
        font-weight: bold !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        padding: 0 !important;
        z-index: 2147483647 !important;
        position: relative !important;
        pointer-events: auto !important;
        -webkit-tap-highlight-color: rgba(255,255,255,0.3) !important;
    }
    
    /* Message Bubbles - Mobile */
    #ee-livechat-window .ee-message-bot .ee-message-bubble,
    .ee-livechat-window .ee-message-bot .ee-message-bubble,
    .ee-message-bot .ee-message-bubble {
        background: var(--ee-bot-bubble-bg, #fff) !important;
        color: var(--ee-bot-bubble-text, var(--ee-chat-text, #333)) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }
    
    #ee-livechat-window .ee-message-user .ee-message-bubble,
    .ee-livechat-window .ee-message-user .ee-message-bubble,
    .ee-message-user .ee-message-bubble {
        background: var(--ee-user-bubble-bg, linear-gradient(135deg, var(--ee-primary-color, #e91e63) 0%, var(--ee-secondary-color, #c2185b) 100%)) !important;
        color: var(--ee-user-bubble-text, #fff) !important;
    }
    
    /* Quick Actions - Mobile */
    #ee-livechat-window .ee-livechat-quick-actions,
    .ee-livechat-window .ee-livechat-quick-actions,
    .ee-livechat-quick-actions {
        background: var(--ee-bg-color, #fff) !important;
        border-top: 1px solid var(--ee-border-color, #e0e0e0) !important;
        padding: 14px 16px !important;
        flex-shrink: 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    
    #ee-livechat-window .ee-quick-action,
    .ee-livechat-window .ee-quick-action,
    .ee-quick-action,
    button.ee-quick-action {
        background: var(--ee-btn-bg, #fff) !important;
        color: var(--ee-btn-text, #333) !important;
        border: 1px solid var(--ee-btn-border, #e0e0e0) !important;
        font-size: 14px !important;
        padding: 10px 18px !important;
        border-radius: 20px !important;
        margin: 0 !important;
        min-height: 40px !important;
    }
    
    /* Message Buttons Container - Mobile */
    #ee-livechat-window .ee-message-buttons,
    .ee-livechat-window .ee-message-buttons,
    .ee-message-buttons {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        margin-top: 12px !important;
    }
    
    /* Message Buttons - Mobile */
    #ee-livechat-window .ee-message-button,
    .ee-livechat-window .ee-message-button,
    .ee-message-button,
    button.ee-message-button {
        background: var(--ee-btn-bg, #fff) !important;
        color: var(--ee-btn-text, #333) !important;
        border: 1px solid var(--ee-btn-border, #e0e0e0) !important;
        padding: 10px 18px !important;
        border-radius: 20px !important;
        font-size: 14px !important;
        margin: 0 !important;
        min-height: 40px !important;
    }
    
    /* Girl Buttons Container - Mobile - 2x Grid for bigger photos */
    #ee-livechat-window .ee-girl-buttons,
    .ee-livechat-window .ee-girl-buttons,
    .ee-girl-buttons {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        margin-top: 12px !important;
        width: 100% !important;
    }
    
    /* Girl Buttons - Mobile - Bigger Cards */
    #ee-livechat-window .ee-girl-button,
    .ee-livechat-window .ee-girl-button,
    .ee-girl-button,
    button.ee-girl-button {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        background: var(--ee-btn-bg, #fff) !important;
        border: 2px solid var(--ee-btn-border, #e0e0e0) !important;
        border-radius: 16px !important;
        padding: 12px !important;
        margin: 0 !important;
        min-width: 0 !important;
        max-width: 100% !important;
        gap: 8px !important;
    }
    
    /* Girl Button Photo - Mobile - BIGGER */
    #ee-livechat-window .ee-girl-btn-photo,
    .ee-livechat-window .ee-girl-btn-photo,
    .ee-girl-btn-photo {
        width: 90px !important;
        height: 90px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        border: 3px solid var(--ee-primary-color, #e91e63) !important;
    }
    
    /* Girl Button Name - Mobile */
    #ee-livechat-window .ee-girl-btn-name,
    .ee-livechat-window .ee-girl-btn-name,
    .ee-girl-btn-name {
        font-size: 13px !important;
        font-weight: 600 !important;
        text-align: center !important;
        line-height: 1.2 !important;
        word-break: break-word !important;
        max-width: 100% !important;
        color: var(--ee-btn-text, #333) !important;
    }
    
    /* Powered By - Mobile */
    #ee-livechat-window .ee-powered-by,
    .ee-livechat-window .ee-powered-by,
    .ee-powered-by {
        color: var(--ee-text-light, #999) !important;
        text-align: center !important;
        font-size: 11px !important;
        margin-top: 8px !important;
    }
    
    #ee-livechat-window .ee-powered-by a,
    .ee-livechat-window .ee-powered-by a,
    .ee-powered-by a {
        color: var(--ee-primary-color, #e91e63) !important;
    }
    
    /* Message Avatar - Mobile */
    #ee-livechat-window .ee-message-bot .ee-message-avatar,
    .ee-livechat-window .ee-message-bot .ee-message-avatar,
    .ee-message-bot .ee-message-avatar {
        background: linear-gradient(135deg, var(--ee-primary-color, #e91e63) 0%, var(--ee-secondary-color, #c2185b) 100%) !important;
        color: #fff !important;
    }
    
    /* Time - Mobile */
    #ee-livechat-window .ee-message-time,
    .ee-livechat-window .ee-message-time,
    .ee-message-time {
        color: var(--ee-time-color, #999) !important;
        font-size: 11px !important;
    }
    
    /* Header Info - Mobile */
    .ee-header-info {
        flex: 1 !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }
    
    .ee-header-title {
        font-size: 16px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    .ee-header-status {
        font-size: 12px !important;
    }
    
    /* Message Bubble - Mobile */
    .ee-message-bubble {
        padding: 12px 16px !important;
        font-size: 15px !important;
        border-radius: 12px !important;
    }
    
    /* Toggle Button Position - Mobile */
    .ee-livechat-toggle {
        width: 56px !important;
        height: 56px !important;
    }
    
    /* Message Layout - Mobile */
    .ee-message {
        max-width: 90% !important;
    }
    
    .ee-message-avatar {
        width: 28px !important;
        height: 28px !important;
        font-size: 14px !important;
    }
}

/* Animation for opening/closing */
.ee-livechat-window.ee-closing {
    animation: ee-slideDown 0.2s ease-in forwards;
}

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

/* Loading state */
.ee-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.ee-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--ee-border-color);
    border-top-color: var(--ee-primary-color);
    border-radius: 50%;
    animation: ee-spin 0.8s linear infinite;
}

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

/* Error state */
.ee-error-message {
    background: #ffebee;
    color: #c62828;
    padding: 12px 16px;
    border-radius: var(--ee-radius-sm);
    font-size: 13px;
    text-align: center;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .ee-livechat-container {
        --ee-text-color: #e0e0e0;
        --ee-text-light: #9e9e9e;
        --ee-bg-color: #1e1e1e;
        --ee-bg-light: #2d2d2d;
        --ee-border-color: #404040;
    }
}

/* ============================================
   EXTERNAL CHAT TRIGGER BUTTONS
   Use these classes on any element to open chat
   ============================================ */

/* Basic chat trigger button */
.ee-open-chat,
.ee-chat-trigger,
[data-ee-chat] {
    cursor: pointer;
    transition: var(--ee-transition);
}

.ee-open-chat:hover,
.ee-chat-trigger:hover,
[data-ee-chat]:hover {
    transform: scale(1.05);
}

/* Chat Icon Button - can replace WhatsApp icons */
.ee-chat-icon-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    border-radius: 50% !important;
    /* Default colors - can be overridden by inline styles with !important */
    background: linear-gradient(135deg, var(--ee-primary-color, #e91e63) 0%, var(--ee-secondary-color, #c2185b) 100%);
    color: var(--ee-icon-color, #fff);
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(233, 30, 99, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    padding: 0 !important;
    line-height: 1;
    aspect-ratio: 1 / 1;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

.ee-chat-icon-btn:hover {
    transform: scale(1.1);
    /* Don't override color on hover - keep inline styles */
}

.ee-chat-icon-btn svg {
    width: 26px !important;
    height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
    display: block !important;
    margin: auto !important;
    flex-shrink: 0 !important;
}

/* Small variant */
.ee-chat-icon-btn.ee-btn-sm {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
}

.ee-chat-icon-btn.ee-btn-sm svg {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
}

/* Large variant */
.ee-chat-icon-btn.ee-btn-lg {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
}

.ee-chat-icon-btn.ee-btn-lg svg {
    width: 32px !important;
    height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
}

/* Chat button with text */
.ee-chat-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    /* Default colors - can be overridden by inline styles with !important */
    background: linear-gradient(135deg, var(--ee-primary-color, #e91e63) 0%, var(--ee-secondary-color, #c2185b) 100%);
    color: var(--ee-icon-color, #fff);
    border: none;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(233, 30, 99, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
}

.ee-chat-btn:hover {
    transform: translateY(-2px);
    /* Don't override color on hover - keep inline styles */
}

.ee-chat-btn svg {
    width: 20px;
    height: 20px;
}

/* Outline variant */
/* Outline variant - inline styles with !important will override these */
.ee-chat-btn.ee-btn-outline {
    background: transparent;
    border: 2px solid var(--ee-primary-color, #e91e63);
    color: var(--ee-primary-color, #e91e63);
    box-shadow: none;
}

.ee-chat-btn.ee-btn-outline:hover {
    /* Only apply transform on hover, don't override inline colors */
    transform: translateY(-2px);
}

/* Card overlay chat button - for girl cards */
.ee-chat-card-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ee-primary-color, #e91e63) 0%, var(--ee-secondary-color, #c2185b) 100%);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    z-index: 10;
}

.ee-chat-card-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(233, 30, 99, 0.5);
}

.ee-chat-card-btn svg {
    width: 22px;
    height: 22px;
}

/* Pulse animation for attention - uses --ee-glow-color CSS variable */
.ee-chat-pulse {
    --ee-glow-color: #e91e63; /* Default, can be overridden via inline style */
    animation: ee-attention-pulse 2s infinite;
}

@keyframes ee-attention-pulse {
    0% {
        box-shadow: 0 0 0 0 var(--ee-glow-color, rgba(233, 30, 99, 0.6));
        filter: drop-shadow(0 0 0 var(--ee-glow-color));
    }
    70% {
        box-shadow: 0 0 0 15px transparent;
        filter: drop-shadow(0 0 8px var(--ee-glow-color));
    }
    100% {
        box-shadow: 0 0 0 0 transparent;
        filter: drop-shadow(0 0 0 var(--ee-glow-color));
    }
}

/* Inline chat link */
.ee-chat-link {
    color: var(--ee-primary-color, #e91e63);
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s ease;
}

.ee-chat-link:hover {
    color: var(--ee-secondary-color, #c2185b);
    text-decoration: underline;
}

/* ============================================
   INLINE CHAT WIDGET (via Shortcode)
   ============================================ */
   
.ee-inline-chat {
    width: 100%;
    border-radius: var(--ee-radius);
    overflow: hidden;
    box-shadow: var(--ee-shadow);
    background: var(--ee-bg-color);
}

.ee-inline-chat .ee-livechat-window {
    position: relative;
    bottom: auto;
    right: auto;
    left: auto;
    width: 100%;
    max-width: none;
    display: flex !important;
    animation: none;
    border-radius: 0;
}

.ee-inline-chat .ee-livechat-toggle {
    display: none;
}

/* ============================================
   MOBILE TOUCH FIX
   Remove 300ms touch delay and improve touch responsiveness
   ============================================ */

/* Apply touch-action: manipulation to all clickable elements */
.ee-livechat-toggle,
.ee-header-close,
.ee-send-button,
.ee-message-button,
.ee-girl-button,
.ee-quick-action,
.ee-chat-icon-btn,
.ee-chat-btn,
.ee-chat-link,
.ee-open-chat,
.ee-chat-trigger,
.ee-livechat-shortcode-button,
[data-ee-chat] {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    /* ANDROID FIX: Ensure clickable */
    cursor: pointer !important;
    -webkit-appearance: none !important;
}

/* ANDROID SAMSUNG FIX: Ensure buttons are always on top and clickable */
.ee-livechat-toggle,
.ee-chat-icon-btn,
.ee-livechat-shortcode-button,
.ee-open-chat,
.ee-chat-trigger {
    position: relative !important;
    z-index: 999999 !important;
    /* Force GPU acceleration for better touch response */
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
}

/* Ensure buttons are clickable on mobile */
@media (max-width: 768px) {
    .ee-livechat-toggle,
    .ee-chat-icon-btn,
    .ee-livechat-shortcode-button {
        /* Larger touch target on mobile */
        min-width: 48px !important;
        min-height: 48px !important;
        /* Ensure visibility */
        z-index: 999999 !important;
        position: relative !important;
    }
    
    /* Ensure buttons don't get covered by other elements */
    .ee-livechat-container .ee-livechat-toggle {
        pointer-events: auto !important;
    }
    
    /* Fix for iOS Safari touch issues */
    .ee-livechat-toggle:active,
    .ee-chat-icon-btn:active,
    .ee-livechat-shortcode-button:active {
        transform: scale(0.95) !important;
        opacity: 0.9 !important;
    }
}

/* ============================================
   ELEMENTOR COMPATIBILITY
   Support for Elementor Motion Effects & Animations
   ============================================ */

/* Allow Elementor container to control animations */
.elementor-widget-ee_livechat_button,
.elementor-widget-shortcode,
.elementor-element {
    /* Ensure widget respects Elementor animations */
}

/* Elementor widget container - ensure proper sizing and animation inheritance */
.elementor-widget-ee_livechat_button .elementor-widget-container {
    display: inline-flex !important;
    justify-content: inherit;
    align-items: center;
    /* Don't block animations from parent */
}

/* Ensure chat buttons inside Elementor widgets inherit animations properly */
.elementor-element .ee-chat-icon-btn,
.elementor-element .ee-chat-btn,
.elementor-element .ee-open-chat {
    /* Allow parent animation to take effect */
    animation: inherit;
    /* Ensure visibility during entrance animations */
    will-change: transform, opacity;
}

/* Prevent transform conflicts with Elementor entrance animations */
.elementor-element[data-settings*="animation"] .ee-chat-icon-btn,
.elementor-element[data-settings*="motion"] .ee-chat-icon-btn,
.elementor-invisible .ee-chat-icon-btn {
    /* Don't apply our hover transform during entrance animation */
}

/* When Elementor element is animating, disable our pulse animation temporarily */
.elementor-invisible .ee-chat-pulse {
    animation: none !important;
}

/* Re-enable pulse after Elementor animation completes */
.elementor-element:not(.elementor-invisible) .ee-chat-pulse {
    animation: ee-attention-pulse 2s infinite;
}

/* Fix for Elementor grid/flex containers */
.elementor-grid .ee-chat-icon-btn,
.e-con .ee-chat-icon-btn,
.e-con-inner .ee-chat-icon-btn {
    /* Ensure button doesn't stretch in flex/grid containers */
    align-self: center !important;
    justify-self: center !important;
}

/* Ensure proper display in Elementor columns */
.elementor-column .ee-chat-icon-btn,
.elementor-widget-wrap .ee-chat-icon-btn {
    margin: 0 auto;
}