/* Chat Widget Styles */
:root {
    --ai-chatbot-primary: #0073aa;
    /* Default */
    --ai-chatbot-text: #333;
    --ai-chatbot-bg: #ffffff;
    --ai-chatbot-bg-secondary: #f4f6f8;
    --ai-chatbot-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    --ai-chatbot-radius: 16px;
    --ai-chatbot-icon-size: 64px;
    --ai-chatbot-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --ai-chatbot-right: 24px;
    --ai-chatbot-left: auto;
    --ai-chatbot-bottom: 24px;
    --ai-chatbot-origin: bottom right;
    --ai-chatbot-user-msg-bg: #0073aa;
    --ai-chatbot-bot-msg-bg: #f4f6f8;
    --ai-chatbot-window-bottom: 80px;
    --ai-chatbot-window-side-offset: 0;
}

.ai-chatbot-widget {
    position: fixed;
    bottom: var(--ai-chatbot-bottom);
    right: var(--ai-chatbot-right);
    left: var(--ai-chatbot-left);
    z-index: 99999;
    font-family: var(--ai-chatbot-font);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* Align CTA and button */
}

/* If left positioned, align items to start */
.ai-chatbot-widget.left-aligned {
    align-items: flex-start;
}

/* CTA Bubble */
.ai-chatbot-cta {
    background: var(--ai-chatbot-cta-bg);
    color: var(--ai-chatbot-cta-text);
    padding: 10px 15px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 500;
    position: relative;
    animation: fade-in-up 0.5s ease-out 1s both;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 200px;
}

.ai-chatbot-cta::after {
    content: '';
    position: absolute;
    bottom: -6px;
    right: 20px;
    /* Default right */
    width: 12px;
    height: 12px;
    background: var(--ai-chatbot-cta-bg);
    transform: rotate(45deg);
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.03);
}

/* Adjust caret for left alignment via JS or just generic CSS if we can detect it */
/* Since we don't have a class on widget for left yet, we rely on the variable or JS. 
   Let's assume the widget container width is auto. */

#ai-chatbot-cta-close {
    background: none;
    border: none;
    color: inherit;
    opacity: 0.7;
    font-size: 16px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    margin-left: 5px;
}

#ai-chatbot-cta-close:hover {
    opacity: 1;
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* Toggle Button - Premium Style */
.ai-chatbot-toggle {
    width: var(--ai-chatbot-icon-size);
    height: var(--ai-chatbot-icon-size);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ai-chatbot-icon-gradient-start) 0%, var(--ai-chatbot-icon-gradient-end) 100%);
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 115, 170, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: visible;
    padding: 0;
}

.ai-chatbot-toggle:hover {
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 6px 25px rgba(0, 115, 170, 0.4);
}

.ai-chatbot-toggle:active {
    transform: scale(0.98);
}

.ai-chatbot-toggle svg {
    width: calc(var(--ai-chatbot-icon-size) * 0.5);
    height: calc(var(--ai-chatbot-icon-size) * 0.5);
    transition: transform 0.3s ease;
    /* Added for rotation */
}

/* Added for toggle button avatar and status */
.ai-chatbot-widget.ai-chatbot-open .ai-chatbot-toggle svg {
    transform: rotate(180deg);
}

/* Toggle Avatar Container */
.ai-chatbot-toggle-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
}

.ai-chatbot-toggle-avatar svg {
    width: 32px;
    height: 32px;
    color: white;
    transition: transform 0.3s ease;
}

.ai-chatbot-toggle-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Online Status Indicator - Premium */
.ai-chatbot-status-indicator {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 16px;
    height: 16px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: 3px solid white;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
    animation: pulse-status 2s ease-in-out infinite;
    z-index: 1;
}

.ai-chatbot-status-indicator.offline {
    background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
    box-shadow: 0 2px 8px rgba(156, 163, 175, 0.4);
    animation: none;
}

@keyframes pulse-status {

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

    50% {
        opacity: 0.8;
        transform: scale(1.15);
    }
}

/* Chat Window */
.ai-chatbot-window {
    position: fixed;
    bottom: var(--ai-chatbot-window-bottom);
    right: calc(var(--ai-chatbot-right) + var(--ai-chatbot-window-side-offset));
    left: calc(var(--ai-chatbot-left) + var(--ai-chatbot-window-side-offset));
    width: 380px;
    max-width: calc(100vw - 40px);
    height: 600px;
    max-height: calc(100vh - 140px);
    background: var(--ai-chatbot-bg);
    border-radius: var(--ai-chatbot-radius);
    box-shadow: var(--ai-chatbot-shadow);
    display: flex;
    flex-direction: column;
    font-family: var(--ai-chatbot-font);
    overflow: hidden;
    transform-origin: var(--ai-chatbot-origin);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    opacity: 1;
    transform: scale(1) translateY(0);
    z-index: 99998;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.ai-chatbot-window.hidden {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
    pointer-events: none;
}

/* Smooth fade-in on first load */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }

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

/* Fix window alignment if left */
/* We need to handle left alignment in CSS. 
   If --ai-chatbot-left is set, we might want to align left. 
   But 'right: 0' above forces right. 
   Let's use a class 'left' on the widget if possible, or just set right/left on the window too.
   Actually, since the widget container is fixed positioned, the window is absolute relative to it.
   If the widget is on the left, the window should be left: 0.
   If on the right, right: 0.
*/

.ai-chatbot-widget.left .ai-chatbot-window {
    right: auto;
    left: var(--ai-chatbot-window-side-offset);
}

.ai-chatbot-widget.left .ai-chatbot-cta::after {
    right: auto;
    left: 20px;
}

.ai-chatbot-widget.left {
    align-items: flex-start;
}

.ai-chatbot-window.active {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: all;
}

.ai-chatbot-window.hidden {
    display: flex;
    /* Keep layout but hide visually via opacity/transform */
}

/* Header */
.ai-chatbot-header {
    background: linear-gradient(135deg, var(--ai-chatbot-primary), #005177);
    /* Gradient fallback */
    background: var(--ai-chatbot-primary);
    color: white;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.ai-chatbot-session-notice {
    text-align: center;
    font-size: 0.85em;
    color: #888;
    margin-bottom: 10px;
    padding: 0 10px;
}

.ai-chatbot-title {
    font-weight: 600;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

#ai-chatbot-avatar-container img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.8);
}

#ai-chatbot-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 20px;
    line-height: 1;
}

#ai-chatbot-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Messages Area */
.ai-chatbot-messages {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background-color: var(--ai-chatbot-bg-secondary);
    display: flex;
    flex-direction: column;
    gap: 12px;
    scroll-behavior: smooth;
}

.ai-message {
    max-width: 85%;
    padding: 12px 16px;
    border-radius: 18px;
    font-size: 15px;
    line-height: 1.5;
    word-wrap: break-word;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    animation: message-pop 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

@keyframes message-pop {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.95);
    }

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

.ai-message.bot {
    background-color: white;
    color: var(--ai-chatbot-text);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}

.ai-message.user {
    background-color: var(--ai-chatbot-primary);
    color: white;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

.ai-message.system {
    align-self: center;
    font-size: 13px;
    color: #888;
    background: none;
    box-shadow: none;
    padding: 5px;
    text-align: center;
}

/* Input Area */
.ai-chatbot-input-area {
    padding: 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    gap: 10px;
    background: white;
    align-items: flex-end;
}

#ai-chatbot-input {
    flex: 1;
    border: 1px solid #e0e0e0;
    border-radius: 24px;
    padding: 12px 16px;
    resize: none;
    outline: none;
    font-size: 15px;
    max-height: 120px;
    background: #f9f9f9;
    transition: border-color 0.2s, background 0.2s;
}

#ai-chatbot-input:focus {
    border-color: var(--ai-chatbot-primary);
    background: white;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1);
    /* Fallback color, ideally use var with opacity */
}

#ai-chatbot-send {
    background: var(--ai-chatbot-primary);
    border: none;
    color: white;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, background 0.2s;
    flex-shrink: 0;
}

#ai-chatbot-send:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

#ai-chatbot-send:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
}

/* Footer */
.ai-chatbot-footer {
    padding: 10px;
    text-align: center;
    background: white;
    font-size: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.03);
}

.text-btn {
    background: none;
    border: none;
    color: #666;
    text-decoration: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 4px;
    transition: background 0.2s;
}

.text-btn:hover {
    background: #f0f0f0;
    color: var(--ai-chatbot-primary);
}

/* Modal */
.ai-chatbot-modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.ai-chatbot-modal:not(.hidden) {
    opacity: 1;
    pointer-events: all;
}

.ai-chatbot-modal-content {
    background: white;
    padding: 30px;
    border-radius: 16px;
    width: 85%;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.ai-chatbot-modal-content h3 {
    margin-top: 0;
    font-size: 18px;
    color: #333;
    margin-bottom: 10px;
}

.ai-chatbot-modal-content p {
    color: #666;
    font-size: 14px;
    margin-bottom: 20px;
}

.ai-chatbot-modal-content input {
    width: 100%;
    padding: 12px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    box-sizing: border-box;
}

.ai-chatbot-modal-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.primary-btn,
.secondary-btn {
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    flex: 1;
    font-weight: 600;
    font-size: 14px;
    transition: transform 0.1s;
}

.primary-btn:active,
.secondary-btn:active {
    transform: scale(0.98);
}

.primary-btn {
    background-color: var(--ai-chatbot-primary);
    color: white;
}

.secondary-btn {
    background-color: #f0f0f0;
    color: #333;
}

/* Typing Indicator */
.typing-indicator {
    display: flex;
    gap: 5px;
    padding: 12px 16px;
    background: white;
    border-radius: 18px;
    align-self: flex-start;
    border-bottom-left-radius: 4px;
    width: fit-content;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.typing-dot {
    width: 6px;
    height: 6px;
    background: #bbb;
    border-radius: 50%;
    animation: typing 1.4s infinite ease-in-out both;
}

.typing-dot:nth-child(1) {
    animation-delay: -0.32s;
}

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

/* Mobile Responsive */
@media (max-width: 480px) {
    .ai-chatbot-window {
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    .ai-chatbot-widget {
        bottom: 15px;
        right: 15px;
    }
}

/* Premium Markdown Styles */
.ai-message strong {
    font-weight: 600;
}

.ai-message em {
    font-style: italic;
}

.ai-message ul,
.ai-message ol {
    margin: 8px 0;
    padding-left: 20px;
}

.ai-message li {
    margin-bottom: 4px;
}

.ai-message p {
    margin: 0 0 8px 0;
}

.ai-message p:last-child {
    margin-bottom: 0;
}

.ai-message code {
    background: rgba(0, 0, 0, 0.06);
    padding: 2px 5px;
    border-radius: 4px;
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
    font-size: 0.9em;
    color: #d63384;
}

.ai-message pre {
    background: #1e1e1e;
    color: #d4d4d4;
    padding: 12px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 10px 0;
    font-size: 13px;
    line-height: 1.4;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ai-message pre code {
    background: none;
    color: inherit;
    padding: 0;
    border-radius: 0;
}

.ai-message a {
    color: var(--ai-chatbot-primary);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

.ai-message a:hover {
    opacity: 0.8;
}

/* Enhanced Premium UI Overrides */
.ai-chatbot-window {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15), 0 5px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.ai-chatbot-header {
    backdrop-filter: blur(10px);
}

.ai-message {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
}

/* Controls */
.ai-chatbot-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

#ai-chatbot-end-session {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    width: 32px;
    height: 32px;
}

#ai-chatbot-end-session:hover {
    background: rgba(255, 255, 255, 0.4);
}

#ai-chatbot-end-session:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#ai-chatbot-end-session svg {
    width: 18px;
    height: 18px;
}

/* === PREMIUM FEATURES === */

/* Glassmorphism */
.ai-chatbot-glassmorphism .ai-chatbot-window {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
}

.ai-chatbot-glassmorphism .ai-chatbot-header {
    background: linear-gradient(135deg, var(--ai-chatbot-primary), rgba(var(--ai-chatbot-primary-rgb), 0.8));
    backdrop-filter: blur(4px);
}

/* Animations */
@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.ai-chatbot-animated .ai-chatbot-message {
    animation: slideUpFade 0.3s ease-out forwards;
}

/* Typing Effect Cursor */
.typing-cursor::after {
    content: '|';
    animation: blink 1s step-start infinite;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

/* Quick Replies (Chips) */
.ai-chatbot-quick-replies {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 15px;
    background: transparent;
}

.ai-chatbot-chip {
    background: #f0f2f5;
    border: 1px solid #e4e6eb;
    border-radius: 16px;
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--ai-chatbot-text);
}

.ai-chatbot-chip:hover {
    background: var(--ai-chatbot-primary);
    color: #fff;
    border-color: var(--ai-chatbot-primary);
}

/* Voice Input */
.ai-chatbot-voice-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #888;
    padding: 8px;
    transition: color 0.2s;
}

.ai-chatbot-voice-btn:hover {
    color: var(--ai-chatbot-primary);
}

.ai-chatbot-voice-btn.listening {
    color: #ff4444;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

/* Lead Collection Form */
.ai-chatbot-lead-form {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    background: #fff;
    height: 100%;
    justify-content: center;
}

.ai-chatbot-lead-form h3 {
    margin: 0 0 10px;
    font-size: 18px;
    text-align: center;
}

.ai-chatbot-lead-form input {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
}

.ai-chatbot-lead-form button {
    background: var(--ai-chatbot-primary);
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}

/* Markdown Styling */
.ai-message-content ul,
.ai-message-content ol {
    margin: 10px 0;
    padding-left: 20px;
    list-style-position: inside;
}

.ai-message-content ul {
    list-style-type: disc;
}

.ai-message-content ol {
    list-style-type: decimal;
}

.ai-message-content li {
    margin-bottom: 5px;
}

.ai-message-content p {
    margin-bottom: 10px;
}

.ai-message-content p:last-child {
    margin-bottom: 0;
}

.ai-message-content strong {
    font-weight: 600;
}

.ai-message-content em {
    font-style: italic;
}

.ai-message-content code {
    background: rgba(0, 0, 0, 0.06);
    padding: 2px 5px;
    border-radius: 4px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.9em;
    color: #d63384;
}

.ai-message-content pre {
    background: #1e1e1e;
    color: #d4d4d4;
    padding: 12px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 10px 0;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.85em;
    line-height: 1.5;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ai-message-content pre code {
    background: none;
    padding: 0;
    color: inherit;
    border-radius: 0;
}

.ai-message-content blockquote {
    border-left: 4px solid var(--ai-chatbot-primary);
    margin: 10px 0;
    padding: 5px 15px;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 0 4px 4px 0;
    color: #555;
    font-style: italic;
}

.ai-message-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
    font-size: 0.9em;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.ai-message-content th,
.ai-message-content td {
    border: 1px solid #e1e4e8;
    padding: 8px 12px;
    text-align: left;
}

.ai-message-content th {
    background: #f6f8fa;
    font-weight: 600;
    color: #24292e;
}

.ai-message-content tr:nth-child(even) {
    background-color: #fcfcfc;
}

.ai-message-content a {
    color: var(--ai-chatbot-primary);
    text-decoration: underline;
}

.ai-message-content a:hover {
    text-decoration: none;
}