/* Reset & basic styles */
/** {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}*/

/* Hide previous floating chat bubble */
/*.chat-toggle {
    display: none !important;
}*/

/* Centered modern chat container */
/*#ai-widget.chat-widget,
.chat-widget {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;*/ /* center it */
    /*width: 100% !important;
    max-width: 900px !important;
    height: 80vh !important;
    background: #fff !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.25) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    z-index: 999 !important;
    animation: fadeIn 0.3s ease-in-out;
}*/

    /* Chat header */
    /*#ai-widget .widget-content h3,
    .chat-widget .widget-content h3 {
        padding: 16px !important;
        font-size: 24px !important;
        font-weight: 600 !important;
        color: #fff !important;
        background: linear-gradient(90deg, #24827c, #32a8a2);
        text-align: center;
        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    }*/

    /* Chat history */
    /*#ai-widget .chat-history,
    .chat-widget .chat-history {
        flex: 1 1 auto !important;
        padding: 16px !important;
        overflow-y: auto !important;
        background: #f9f9f9;
    }*/

/* Messages */
/* Make chat history a flex column */
/*.chat-history {
    display: flex !important;
    flex-direction: column !important;*/ /* stack messages vertically */
    /*gap: 8px;*/ /* optional spacing between messages */
    /*width: 100% !important;
}*/

/* Messages styling */
/*.message {
    padding: 12px 16px !important;
    border-radius: 16px !important;
    line-height: 1.5 !important;
    word-break: break-word !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    max-width: 75% !important;
}*/

/* User messages right-aligned */
/*.user-message {
    background: #24827c !important;
    color: #fff !important;
    align-self: flex-end !important;*/ /* push to right */
    /*border-bottom-right-radius: 4px !important;
    border-bottom-left-radius: 16px !important;*/ /* smooth corners */
/*}*/

/* AI messages left-aligned */
/*.ai-message {
    background: #e5e7eb !important;
    color: #111 !important;
    align-self: flex-start !important;*/ /* push to left */
    /*border-bottom-left-radius: 4px !important;
    border-bottom-right-radius: 16px !important;*/ /* smooth corners */
/*}

.user-message {
    position: relative !important;*/ /* needed for absolute button positioning */
    /*background: #24827c !important;
    color: #fff !important;
    align-self: flex-end !important;
    border-bottom-right-radius: 4px !important;
    border-bottom-left-radius: 16px !important;
    padding-right: 36px !important;*/ /* space for edit button */
/*}

    .user-message .edit-btn {
        position: absolute !important;
        top: 50% !important;
        right: 8px !important;
        transform: translateY(-50%) !important;
        border: none !important;
        background: transparent !important;
        color: #fff !important;
        cursor: pointer !important;
        display: none;*/ /* show on hover */
        /*z-index: 5 !important;
    }

    .user-message:hover .edit-btn {
        display: inline-block !important;
    }

    .user-message .edit-btn i {
        font-size: 14px !important;
    }

.chat-input-container {
    display: flex !important;
    width: 100% !important;*/ /* full width */
    /*gap: 10px !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    border-top: 1px solid #ddd !important;
    background: #f5f5f5 !important;
}*/

/*textarea#agent-question {
    flex: 1 1 auto !important;
    height: 60px !important;
    resize: none !important;
    padding: 10px !important;
    border-radius: 12px !important;
    border: 1px solid #ccc !important;
    font-size: 16px !important;
}*/

/* Send button */
/*textarea#agent-question {
    flex: 1 1 auto !important;*/ /* grow to fill available space */
    /*height: 60px !important;
    max-height: 120px !important;
    resize: none !important;
    padding: 10px !important;
    border-radius: 12px !important;
    border: 1px solid #ccc !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
}*/

/* Button stays fixed size at end */
/*#buttonAi {
    flex: 0 0 auto !important;*/ /* fixed width */
    /*height: 60px !important;
    min-width: 60px !important;
    border: none !important;
    border-radius: 12px !important;
    background: #2563eb !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(37,99,235,0.3);
    transition: all 0.2s ease-in-out;
}

    #buttonAi:hover {
        background: #1e40af !important;
    }*/

    /* Icon inside button should not block clicks */
    /*#buttonAi i {
        pointer-events: none !important;
    }*//* Typing animation */
/*.message.ai-message.typing {
    display: flex !important;
    align-items: center !important;
    background: #e5e7eb !important;
    border-radius: 20px !important;
    padding: 6px 12px !important;
}

    .message.ai-message.typing span {
        height: 8px;
        width: 8px;
        margin: 0 3px;
        background-color: #555;
        border-radius: 50%;
        display: inline-block;
        animation: typing 1.2s infinite ease-in-out;
    }

        .message.ai-message.typing span:nth-child(1) {
            animation-delay: 0s;
        }

        .message.ai-message.typing span:nth-child(2) {
            animation-delay: 0.2s;
        }

        .message.ai-message.typing span:nth-child(3) {
            animation-delay: 0.4s;
        }

@keyframes typing {
    0%, 80%, 100% {
        transform: scale(0.6);
        opacity: 0.5;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}*/

/* Fade-in animation */
/*@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}*/

/* Responsive */
/*@media (max-width: 768px) {
    #ai-widget.chat-widget,
    .chat-widget {
        width: 95% !important;
        height: 85vh !important;
    }
}

@media (max-width: 480px) {
    #ai-widget.chat-widget,
    .chat-widget {
        width: 100% !important;
        height: 90vh !important;
        border-radius: 0 !important;
    }
}*/
/* Make widget content fill entire container */
/*#ai-widget .widget-content,
.chat-widget .widget-content {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    box-sizing: border-box !important;
}*/

/* Chat history grows with container */
/*#ai-widget .chat-history,
.chat-widget .chat-history {
    flex: 1 1 auto !important;*/ /* grow to fill space */
    /*min-height: 0 !important;*/ /* required for flex */
    /*padding: 16px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #f9f9f9 !important;
}*/

/* Chat input container stays at bottom */


/* Textarea grows in width, fixed height */
/*#ai-widget textarea#agent-question,
.chat-widget textarea#agent-question {
    flex: 1 1 auto !important;
    height: 60px !important;
    max-height: 120px !important;
    resize: none !important;
    padding: 10px !important;
    border-radius: 12px !important;
    border: 1px solid #ccc !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
}*/

/* Send button fixed size */
/*#ai-widget button#buttonAi,
.chat-widget button#buttonAi {
    flex: 0 0 auto !important;
    padding: 0 18px !important;
}
.ai-message .response-time {
    display: none !important;
    font-size: 12px !important;
    color: #6c757d !important;*/ /* muted gray */
    /*margin-left: 8px !important;
}*/

/* Show on hover */
/*.ai-message:hover .response-time {
    display: inline !important;
}*/

/* Style AI images inside chat */
/*.ai-message img.chat-thumbnail {
    max-width: 220px;*/ /* keep images a nice size */
    /*max-height: 160px;*/ /* control height */
    /*width: auto;*/ /* scale proportionally */
    /*height: auto;
    border-radius: 10px;*/ /* smooth rounded corners */
    /*margin-top: 8px;*/ /* spacing from text */
    /*cursor: pointer;
    object-fit: cover;*/ /* crop nicely */
    /*box-shadow: 0 2px 8px rgba(0,0,0,0.15);*/ /* subtle shadow */
    /*transition: transform 0.2s ease, box-shadow 0.2s ease;
}*/

    /* On hover, give modern zoom effect */
    /*.ai-message img.chat-thumbnail:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    }*/


   /* ///////////////////////////////*/

/* Reset & basic styles */
/** {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}*/

/* Hide previous floating chat bubble */
/*.chat-toggle {
    display: none !important;
}*/

/* Modern gradient background */
/*body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
    z-index: -2;
}*/

/* Animated background particles */
/*body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 80%, rgba(39, 130, 124, 0.15) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(55, 178, 170, 0.1) 0%, transparent 50%), radial-gradient(circle at 40% 40%, rgba(39, 130, 124, 0.08) 0%, transparent 50%);
    z-index: -1;
    animation: particleMove 20s ease-in-out infinite;
}

@keyframes particleMove {
    0%, 100% {
        transform: translateY(0px) scale(1);
    }

    50% {
        transform: translateY(-20px) scale(1.02);
    }
}*/

/* Ultra-modern chat container */
/*#ai-widget.chat-widget,
.chat-widget {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 95% !important;
    max-width: 1000px !important;
    height: 85vh !important;
    background: rgba(15, 23, 42, 0.85) !important;
    backdrop-filter: blur(40px) saturate(180%) !important;
    border-radius: 32px !important;
    border: 1px solid rgba(39, 130, 124, 0.3) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 80px rgba(39, 130, 124, 0.2) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    z-index: 999 !important;
    animation: modernSlideIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}*/

    /* Premium header with animated gradient */
    /*#ai-widget .widget-content h3,
    .chat-widget .widget-content h3 {
        padding: 28px 24px !important;
        font-size: 28px !important;
        font-weight: 700 !important;
        color: #fff !important;
        background: linear-gradient(135deg, #27827c 0%, #37b2aa 25%, #2d968f 50%, #37b2aa 75%, #27827c 100%) !important;
        background-size: 200% 200% !important;
        text-align: center !important;
        position: relative !important;
        overflow: hidden !important;
        animation: gradientShift 3s ease infinite !important;
        box-shadow: 0 4px 20px rgba(39, 130, 124, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
        letter-spacing: -0.5px !important;
    }

@keyframes gradientShift {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}*/

/* Add subtle shine effect to header */
/*#ai-widget .widget-content h3::after,
.chat-widget .widget-content h3::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.7s ease;
}

#ai-widget .widget-content h3:hover::after,
.chat-widget .widget-content h3:hover::after {
    left: 100%;
}*/

/* Premium chat history */
/*#ai-widget .chat-history,
.chat-widget .chat-history {
    flex: 1 1 auto !important;
    padding: 24px !important;
    overflow-y: auto !important;
    background: radial-gradient(circle at top left, rgba(39, 130, 124, 0.05) 0%, transparent 50%), radial-gradient(circle at bottom right, rgba(55, 178, 170, 0.05) 0%, transparent 50%), rgba(15, 23, 42, 0.7) !important;
    backdrop-filter: blur(20px) !important;
}*/

/* Messages container */
/*.chat-history {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    width: 100% !important;
}*/

/* Premium message bubbles */
/*.message {
    padding: 20px 24px !important;
    border-radius: 24px !important;
    line-height: 1.6 !important;
    word-break: break-word !important;
    max-width: 78% !important;
    position: relative !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    animation: messageFloatIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
}*/

/* AI messages - Dark glass */
/*.ai-message {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(51, 65, 85, 0.8) 100%) !important;
    color: #f1f5f9 !important;
    align-self: flex-start !important;
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 24px !important;
    border-left: 3px solid #37b2aa !important;
}*/

/* User messages - Premium gradient */
/*.user-message {
    position: relative !important;
    background: linear-gradient(135deg, #27827c 0%, #37b2aa 50%, #2d968f 100%) !important;
    color: #fff !important;
    align-self: flex-end !important;
    border-bottom-right-radius: 8px !important;
    border-bottom-left-radius: 24px !important;
    padding-right: 56px !important;
    box-shadow: 0 8px 32px rgba(39, 130, 124, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    border-right: 3px solid #47c2b9 !important;
}*/

    /* Enhanced edit button */
    /*.user-message .edit-btn {
        position: absolute !important;
        top: 50% !important;
        right: 20px !important;
        transform: translateY(-50%) !important;
        border: none !important;
        background: rgba(255, 255, 255, 0.2) !important;
        color: #fff !important;
        cursor: pointer !important;
        display: none;
        z-index: 5 !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 12px !important;
        backdrop-filter: blur(10px) !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        font-size: 14px !important;
    }

    .user-message:hover .edit-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .user-message .edit-btn:hover {
        background: rgba(255, 255, 255, 0.3) !important;
        transform: translateY(-50%) scale(1.15) !important;
        box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2) !important;
    }*/

/* Premium input container */
/*.chat-input-container {
    display: flex !important;
    width: 100% !important;
    gap: 16px !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    border-top: 1px solid rgba(39, 130, 124, 0.2) !important;
    background: rgba(15, 23, 42, 0.8) !important;
    backdrop-filter: blur(30px) !important;
    position: relative !important;
}

    .chat-input-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background: linear-gradient(90deg, transparent, #37b2aa, transparent) !important;
    }*/

/* Premium textarea */
/*textarea#agent-question {
    flex: 1 1 auto !important;
    height: 70px !important;
    max-height: 140px !important;
    resize: none !important;
    padding: 20px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(39, 130, 124, 0.3) !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
    background: rgba(30, 41, 59, 0.7) !important;
    backdrop-filter: blur(20px) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    color: #f1f5f9 !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 4px 20px rgba(0, 0, 0, 0.2) !important;
    font-weight: 500 !important;
}

    textarea#agent-question::placeholder {
        color: #94a3b8 !important;
        font-weight: 500 !important;
    }

    textarea#agent-question:focus {
        outline: none !important;
        background: rgba(30, 41, 59, 0.9) !important;
        border: 1px solid #37b2aa !important;
        box-shadow: inset 0 2px 8px rgba(39, 130, 124, 0.3), 0 8px 32px rgba(39, 130, 124, 0.3) !important;
        transform: translateY(-2px) !important;
    }*/

/* Ultra-premium send button */
/*#buttonAi {
    flex: 0 0 auto !important;
    height: 70px !important;
    min-width: 70px !important;
    border: none !important;
    border-radius: 20px !important;
    background: linear-gradient(135deg, #27827c 0%, #37b2aa 50%, #47c2b9 100%) !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 8px 32px rgba(39, 130, 124, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

    #buttonAi::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transition: left 0.6s ease;
    }

    #buttonAi:hover::before {
        left: 100%;
    }

    #buttonAi:hover {
        transform: translateY(-3px) scale(1.05) !important;
        box-shadow: 0 12px 40px rgba(39, 130, 124, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
        background: linear-gradient(135deg, #37b2aa 0%, #47c2b9 50%, #57d2c9 100%) !important;
    }

    #buttonAi:active {
        transform: translateY(-1px) scale(1.02) !important;
    }

    #buttonAi i {
        pointer-events: none !important;
        transition: transform 0.3s ease !important;
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)) !important;
    }

    #buttonAi:hover i {
        transform: translateX(3px) scale(1.1) !important;
    }*/

/* Premium typing animation */
/*.message.ai-message.typing {
    display: flex !important;
    align-items: center !important;
    background: rgba(30, 41, 59, 0.9) !important;
    border-radius: 24px !important;
    padding: 16px 24px !important;
    gap: 8px !important;
}

    .message.ai-message.typing span {
        height: 12px;
        width: 12px;
        background: linear-gradient(135deg, #37b2aa, #47c2b9) !important;
        border-radius: 50%;
        display: inline-block;
        animation: premiumBounce 1.4s infinite ease-in-out;
        box-shadow: 0 4px 8px rgba(39, 130, 124, 0.3);
    }

        .message.ai-message.typing span:nth-child(1) {
            animation-delay: 0s;
        }

        .message.ai-message.typing span:nth-child(2) {
            animation-delay: 0.2s;
        }

        .message.ai-message.typing span:nth-child(3) {
            animation-delay: 0.4s;
        }

@keyframes premiumBounce {
    0%, 80%, 100% {
        transform: translateY(0) scale(0.8);
        opacity: 0.7;
    }

    40% {
        transform: translateY(-10px) scale(1.2);
        opacity: 1;
    }
}*/

/* Premium animations */
/*@keyframes modernSlideIn {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8) rotateX(-10deg);
        filter: blur(20px);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotateX(0deg);
        filter: blur(0);
    }
}

@keyframes messageFloatIn {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.9);
        filter: blur(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}*/

/* Premium AI images */
/*.ai-message img.chat-thumbnail {
    max-width: 280px;
    max-height: 200px;
    width: auto;
    height: auto;
    border-radius: 16px;
    margin-top: 12px;
    cursor: pointer;
    object-fit: cover;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 0 1px rgba(39, 130, 124, 0.3);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
}

    .ai-message img.chat-thumbnail:hover {
        transform: scale(1.08) rotate(1deg);
        box-shadow: 0 12px 40px rgba(39, 130, 124, 0.4), 0 0 0 1px rgba(39, 130, 124, 0.6);
    }*/

/* Premium response time */
/*.ai-message .response-time {
    display: none !important;
    font-size: 11px !important;
    color: rgba(148, 163, 184, 0.8) !important;
    margin-left: 8px !important;
    background: rgba(30, 41, 59, 0.8);
    padding: 4px 8px;
    border-radius: 10px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(39, 130, 124, 0.3);
    font-weight: 600;
}

.ai-message:hover .response-time {
    display: inline !important;
}*/

/* Ultra-premium scrollbar */
/*.chat-history::-webkit-scrollbar {
    width: 8px;
}

.chat-history::-webkit-scrollbar-track {
    background: rgba(30, 41, 59, 0.5);
    border-radius: 4px;
    margin: 4px;
}

.chat-history::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #27827c, #37b2aa);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

    .chat-history::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg, #37b2aa, #47c2b9);
    }*/

/* Premium responsiveness */
/*@media (max-width: 768px) {
    #ai-widget.chat-widget,
    .chat-widget {
        width: 98% !important;
        height: 90vh !important;
        border-radius: 24px !important;
    }

    .message {
        max-width: 90% !important;
        padding: 18px 20px !important;
        font-size: 14px !important;
    }

    #ai-widget .widget-content h3,
    .chat-widget .widget-content h3 {
        padding: 24px 20px !important;
        font-size: 24px !important;
    }
}

@media (max-width: 480px) {
    #ai-widget.chat-widget,
    .chat-widget {
        width: 100% !important;
        height: 100vh !important;
        border-radius: 0 !important;
        border: none !important;
    }

    .chat-input-container {
        padding: 16px !important;
        gap: 12px !important;
    }

    textarea#agent-question {
        padding: 16px !important;
        height: 60px !important;
    }

    #buttonAi {
        height: 60px !important;
        min-width: 60px !important;
    }
}*/

/* Premium widget content */
/*#ai-widget .widget-content,
.chat-widget .widget-content {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    box-sizing: border-box !important;
}*/

/* Premium chat history */
/*#ai-widget .chat-history,
.chat-widget .chat-history {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 24px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}*/

/* Premium textarea */
/*#ai-widget textarea#agent-question,
.chat-widget textarea#agent-question {
    flex: 1 1 auto !important;
    height: 70px !important;
    max-height: 140px !important;
    resize: none !important;
    padding: 20px !important;
    border-radius: 20px !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
}*/

/* Premium send button */
/*#ai-widget button#buttonAi,
.chat-widget button#buttonAi {
    flex: 0 0 auto !important;
    padding: 0 20px !important;
}*/

/* ///////////////////////////////*/

/* Reset & basic styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Karla", sans-serif;
}

/* Hide previous floating chat bubble */
.chat-toggle {
    display: none !important;
}

/* Clean white background with subtle texture */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 15% 50%, rgba(39, 130, 124, 0.03) 0%, transparent 50%), radial-gradient(circle at 85% 30%, rgba(39, 130, 124, 0.02) 0%, transparent 50%), linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    z-index: -1;
}

/* Modern chat container with white theme */
#ai-widget.chat-widget,
.chat-widget {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 95% !important;
    max-width: 1000px !important;
    height: 83vh !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    border-radius: 24px !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 0 0 1px rgba(39, 130, 124, 0.1), 0 20px 40px rgba(0, 0, 0, 0.08), 0 8px 25px rgba(39, 130, 124, 0.05) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    z-index: 999 !important;
    animation: cleanSlideIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

    /* Elegant header with gradient */
    #ai-widget .widget-content h3,
    .chat-widget .widget-content h3 {
        padding: 24px 32px !important;
        font-size: 28px !important;
        font-weight: 700 !important;
        color: #fff !important;
        background: linear-gradient(135deg, #27827c 0%, #37b2aa 100%) !important;
        text-align: center !important;
        position: relative !important;
        overflow: hidden !important;
        box-shadow: 0 4px 15px rgba(39, 130, 124, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
        letter-spacing: -0.3px !important;
    }

        /* Header shine effect */
        #ai-widget .widget-content h3::after,
        .chat-widget .widget-content h3::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
            transition: left 0.6s ease;
        }

        #ai-widget .widget-content h3:hover::after,
        .chat-widget .widget-content h3:hover::after {
            left: 100%;
        }

    /* Clean white chat history */
    #ai-widget .chat-history,
    .chat-widget .chat-history {
        flex: 1 1 auto !important;
        padding: 24px !important;
        overflow-y: auto !important;
        background: linear-gradient(135deg, rgba(248, 250, 252, 0.8) 0%, rgba(255, 255, 255, 0.9) 100%) !important;
        backdrop-filter: blur(10px) !important;
    }

/* Messages container */
.chat-history {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
}

/* Modern message bubbles */
.message {
    padding: 18px 22px !important;
    border-radius: 20px !important;
    line-height: 1.5 !important;
    word-break: break-word !important;
    max-width: 78% !important;
    position: relative !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    animation: messageSlideUp 0.4s ease-out !important;
    font-size: 15px !important;
    font-weight: 500 !important;
}

/* AI messages - Light gray with teal accent */
.ai-message {
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%) !important;
    color: #334155 !important;
    align-self: flex-start !important;
    border-bottom-left-radius: 6px !important;
    border-bottom-right-radius: 20px !important;
    border-left: 4px solid #37b2aa !important;
    box-shadow: 0 2px 12px rgba(39, 130, 124, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

/* User messages - Teal gradient */
.user-message {
    position: relative !important;
    background: linear-gradient(135deg, #27827c 0%, #37b2aa 100%) !important;
    color: #fff !important;
    align-self: flex-end !important;
    border-bottom-right-radius: 6px !important;
    border-bottom-left-radius: 20px !important;
    padding-right: 52px !important;
    box-shadow: 0 4px 20px rgba(39, 130, 124, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

    /* Edit button */
    .user-message .edit-btn {
        position: absolute !important;
        top: 50% !important;
        right: 14px !important;
        transform: translateY(-50%) !important;
        border: none !important;
        background: rgba(255, 255, 255, 0.25) !important;
        color: #fff !important;
        cursor: pointer !important;
        display: none;
        z-index: 5 !important;
        width: 32px !important;
        height: 32px !important;
        border-radius: 10px !important;
        backdrop-filter: blur(10px) !important;
        transition: all 0.3s ease !important;
        font-size: 14px !important;
    }

    .user-message:hover .edit-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .user-message .edit-btn:hover {
        background: rgba(255, 255, 255, 0.35) !important;
        transform: translateY(-50%) scale(1.1) !important;
    }

/* Clean input container */
.chat-input-container {
    display: flex !important;
    width: 100% !important;
    gap: 12px !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    border-top: 1px solid rgba(226, 232, 240, 0.8) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(15px) !important;
    position: relative !important;
}

    .chat-input-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background: linear-gradient(90deg, transparent, #37b2aa, transparent) !important;
        opacity: 0.3;
    }

/* Modern textarea */
textarea#agent-question {
    flex: 1 1 auto !important;
    height: 60px !important;
    max-height: 120px !important;
    resize: none !important;
    padding: 16px 20px !important;
    border-radius: 16px !important;
    border: 1px solid #e2e8f0 !important;
    font-size: 15px !important;
    box-sizing: border-box !important;
    background: rgba(255, 255, 255, 0.9) !important;
    transition: all 0.3s ease !important;
    color: #334155 !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    font-weight: 500 !important;
}

    textarea#agent-question::placeholder {
        color: #94a3b8 !important;
        font-weight: 500 !important;
    }

    textarea#agent-question:focus {
        outline: none !important;
        background: #ffffff !important;
        border: 1px solid #37b2aa !important;
        box-shadow: inset 0 0 0 1px #37b2aa, 0 4px 15px rgba(39, 130, 124, 0.1) !important;
        transform: translateY(-1px) !important;
    }

/* Elegant send button */
#buttonAi {
    flex: 0 0 auto !important;
    height: 60px !important;
    min-width: 60px !important;
    border: none !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #27827c 0%, #37b2aa 100%) !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(39, 130, 124, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

    #buttonAi::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transition: left 0.5s ease;
    }

    #buttonAi:hover::before {
        left: 100%;
    }

    #buttonAi:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 20px rgba(39, 130, 124, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
        background: linear-gradient(135deg, #2d968f 0%, #47c2b9 100%) !important;
    }

    #buttonAi:active {
        transform: translateY(0) !important;
    }

    #buttonAi i {
        pointer-events: none !important;
        transition: transform 0.3s ease !important;
    }

    #buttonAi:hover i {
        transform: translateX(2px) !important;
    }

/* Clean typing animation */
.message.ai-message.typing {
    display: flex !important;
    align-items: center !important;
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%) !important;
    border-radius: 20px !important;
    padding: 16px 20px !important;
    gap: 8px !important;
}

    .message.ai-message.typing span {
        height: 10px;
        width: 10px;
        background: linear-gradient(135deg, #37b2aa, #47c2b9) !important;
        border-radius: 50%;
        display: inline-block;
        animation: cleanBounce 1.4s infinite ease-in-out;
    }

        .message.ai-message.typing span:nth-child(1) {
            animation-delay: 0s;
        }

        .message.ai-message.typing span:nth-child(2) {
            animation-delay: 0.2s;
        }

        .message.ai-message.typing span:nth-child(3) {
            animation-delay: 0.4s;
        }

@keyframes cleanBounce {
    0%, 80%, 100% {
        transform: translateY(0) scale(0.8);
        opacity: 0.7;
    }

    40% {
        transform: translateY(-6px) scale(1.1);
        opacity: 1;
    }
}

/* Clean animations */
@keyframes cleanSlideIn {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes messageSlideUp {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Modern AI images */
.ai-message img.chat-thumbnail {
    max-width: 250px;
    max-height: 180px;
    width: auto;
    height: auto;
    border-radius: 12px;
    margin-top: 10px;
    cursor: pointer;
    object-fit: cover;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(39, 130, 124, 0.1);
    transition: all 0.3s ease;
}

    .ai-message img.chat-thumbnail:hover {
        transform: scale(1.03);
        box-shadow: 0 6px 20px rgba(39, 130, 124, 0.15), 0 0 0 1px rgba(39, 130, 124, 0.2);
    }

/* Response time styling */
.ai-message .response-time {
    display: none !important;
    font-size: 11px !important;
    color: #94a3b8 !important;
    margin-left: 8px !important;
    background: rgba(248, 250, 252, 0.8);
    padding: 3px 8px;
    border-radius: 8px;
    border: 1px solid rgba(226, 232, 240, 0.8);
    font-weight: 500;
}

.ai-message:hover .response-time {
    display: inline !important;
}

/* Clean scrollbar */
.chat-history::-webkit-scrollbar {
    width: 6px;
}

.chat-history::-webkit-scrollbar-track {
    background: rgba(226, 232, 240, 0.5);
    border-radius: 3px;
}

.chat-history::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #27827c, #37b2aa);
    border-radius: 3px;
}

    .chat-history::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg, #37b2aa, #47c2b9);
    }

/* Responsive design */
@media (max-width: 768px) {
    #ai-widget.chat-widget,
    .chat-widget {
        width: 98% !important;
        height: 85vh !important;
        border-radius: 20px !important;
    }

    .message {
        max-width: 90% !important;
        padding: 16px 18px !important;
    }

    #ai-widget .widget-content h3,
    .chat-widget .widget-content h3 {
        padding: 20px 24px !important;
        font-size: 24px !important;
    }
}

@media (max-width: 480px) {
    #ai-widget.chat-widget,
    .chat-widget {
        width: 100% !important;
        height: 100vh !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }

    .chat-input-container {
        padding: 16px !important;
    }

    textarea#agent-question {
        padding: 14px 16px !important;
    }

    #buttonAi {
        min-width: 55px !important;
        height: 55px !important;
    }
}

/* Widget content */
#ai-widget .widget-content,
.chat-widget .widget-content {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    box-sizing: border-box !important;
}

/* Chat history */
#ai-widget .chat-history,
.chat-widget .chat-history {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 24px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Textarea */
#ai-widget textarea#agent-question,
.chat-widget textarea#agent-question {
    flex: 1 1 auto !important;
    height: 60px !important;
    max-height: 120px !important;
    resize: none !important;
    padding: 16px 20px !important;
    border-radius: 16px !important;
    font-size: 15px !important;
    box-sizing: border-box !important;
}

/* Send button */
#ai-widget button#buttonAi,
.chat-widget button#buttonAi {
    flex: 0 0 auto !important;
    padding: 0 18px !important;
}