/* 
 * WLIQ Chatbot - Modern Icon Overrides
 * 
 * Custom SVG icons and icon enhancements for a more elegant look
 */

/* ===============================================
   SVG Icon Definitions
   =============================================== */

/* Send Icon */
/* #chatbot-chatgpt-submit img {
    display: none;
} */

#chatbot-chatgpt-submit::after {
    content: '';
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Attach/Upload Icon */
#chatbot-chatgpt-upload-file img,
#chatbot-chatgpt-upload-mp3 img {
    display: none;
}

#chatbot-chatgpt-upload-file::after,
#chatbot-chatgpt-upload-mp3::after {
    content: '';
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234a5568'%3E%3Cpath d='M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#chatbot-chatgpt-upload-file:hover::after,
#chatbot-chatgpt-upload-mp3:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z'/%3E%3C/svg%3E");
}

/* Erase/Clear Icon */
#chatbot-chatgpt-erase-btn img {
    display: none;
}

#chatbot-chatgpt-erase-btn::after {
    content: '';
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234a5568'%3E%3Cpath d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#chatbot-chatgpt-erase-btn:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z'/%3E%3C/svg%3E");
}

/* Read Aloud Icon */
#chatbot-chatgpt-text-to-speech-btn img {
    display: none;
}

#chatbot-chatgpt-text-to-speech-btn::after {
    content: '';
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234a5568'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#chatbot-chatgpt-text-to-speech-btn:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'/%3E%3C/svg%3E");
}

/* Microphone Icon */
#chatbot-chatgpt-speech-recognition-btn img {
    display: none;
}

#chatbot-chatgpt-speech-recognition-btn::after {
    content: '';
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234a5568'%3E%3Cpath d='M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#chatbot-chatgpt-speech-recognition-btn:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z'/%3E%3C/svg%3E");
}

/* Download Icon */
#chatbot-chatgpt-download-transcript-btn img {
    display: none;
}

#chatbot-chatgpt-download-transcript-btn::after {
    content: '';
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234a5568'%3E%3Cpath d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#chatbot-chatgpt-download-transcript-btn:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z'/%3E%3C/svg%3E");
}

/* Open Chat Icon */
#chatgpt-open-btn img,
.chatbot-open-icon {
    display: none !important;
}

#chatgpt-open-btn::after {
    content: '';
    width: 32px;
    height: 32px;
    background-image: url("https://elementortest.devtest.center/wp-content/uploads/2025/11/Rivulet_chat_logo.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Close/Collapse Icon */
.chatbot-collapse-btn img,
.chatbot-collapse-icon {
    display: none !important;
}

.chatbot-collapse-btn::after {
    content: '';
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* ===============================================
   Enhanced Avatar Styles
   =============================================== */
.bot-message .chatbot-avatar,
.bot-message::before {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 16px;
}

.bot-message .chatbot-avatar::before,
.bot-message::before {
    content: 'AI';
    color: white;
    font-size: 14px;
    font-weight: 600;
}

/* ===============================================
   Animated Gradient Background for Header
   =============================================== */
#chatbot-chatgpt-header,
#chatbot-chatgpt-header-embedded {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
}

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

/* ===============================================
   Pulse Animation for Open Button
   =============================================== */
#chatgpt-open-btn {
    position: relative;
}

#chatgpt-open-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
    opacity: 0.7;
    animation: pulse 2s infinite;
}

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

/* ===============================================
   Modern Glassmorphism Effect
   =============================================== */
#chatbot-chatgpt.chatbot-wide,
#chatbot-chatgpt.chatbot-narrow,
#chatbot-chatgpt.chatbot-full,
.chatbot-embedded-style {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

@media (prefers-color-scheme: dark) {
    #chatbot-chatgpt.chatbot-wide,
    #chatbot-chatgpt.chatbot-narrow,
    #chatbot-chatgpt.chatbot-full,
    .chatbot-embedded-style {
        background: rgba(26, 32, 44, 0.95) !important;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
}

/* ===============================================
   Elegant Focus States
   =============================================== */
#chatbot-chatgpt-message:focus {
    animation: inputGlow 2s ease-in-out infinite alternate;
}

@keyframes inputGlow {
    0% {
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }
    100% {
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3);
    }
}

/* ===============================================
   Message Entry Animation
   =============================================== */
.chat-message {
    animation: slideInMessage 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes slideInMessage {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ===============================================
   Premium Shadow Effects
   =============================================== */
.chatbot-user-text {
    box-shadow: 0 4px 6px -1px rgba(102, 126, 234, 0.2), 
                0 2px 4px -1px rgba(102, 126, 234, 0.1);
}

.chatbot-bot-text {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 
                0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

#chatbot-chatgpt-buttons-container button:hover {
    box-shadow: 0 10px 15px -3px rgba(102, 126, 234, 0.3), 
                0 4px 6px -2px rgba(102, 126, 234, 0.2);
}

#chatbot-chatgpt-buttons-container button:hover {
    background: red !important;
}