/*!***************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./assets/css/frontend.css ***!
  \***************************************************************************/
/* Enhanced Frontend Widget Styles */
.askany-chat-widget {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 14px;
    line-height: 1.4;
    --primary-color: #4a6cf7;
    --primary-hover: #3c57d0;
    --text-color: #333;
    --light-text: #666;
    --bg-color: #fff;
    --light-bg: #f5f7fb;
    --border-color: #e3e8ef;
    --bubble-user: var(--primary-color);
    --bubble-ai: #f0f2f5;
    --bubble-user-text: #fff;
    --bubble-ai-text: #333;
    --shadow-soft: 0 5px 20px rgba(0, 0, 0, 0.08);
    --shadow-strong: 0 8px 30px rgba(0, 0, 0, 0.12);
    --radius-sm: 8px;
    --radius-lg: 16px;
    --radius-round: 50px;
    --anim-speed: 0.3s;
}

/* Widget positioning */
/* Chat Widget Container New style*/
.askany-chat-widget {
    position: fixed;
    z-index: 99999;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.askany-chat-widget.bottom-right {
    bottom: 20px;
    right: 20px;
}

.askany-chat-widget.bottom-left {
    bottom: 20px;
    left: 20px;
}

.askany-chat-widget.top-right {
    top: 20px;
    right: 20px;
}

.askany-chat-widget.top-left {
    top: 20px;
    left: 20px;
}

.askany-chat-widget.inline {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    max-width: 100%;
}

/* Enhanced Chat Toggle Button */
.askany-chat-toggle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.4), 0 4px 12px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

.askany-chat-toggle::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;
}

.askany-chat-toggle:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 12px 40px rgba(102, 126, 234, 0.5), 0 6px 20px rgba(0, 0, 0, 0.15);
    background: linear-gradient(135deg, #5a6fd8 0%, #6b42a0 100%);
}

.askany-chat-toggle:hover::before {
    left: 100%;
}

.toggle-icon-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.askany-chat-icon img {
    width: 100%;
    object-fit: contain;
	height: auto; 
}

.askany-chat-icon {
    color: white;
    transition: all 0.3s ease;
}

.askany-chat-toggle:hover .askany-chat-icon {
    transform: scale(1.1) rotate(5deg);
}

.notification-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: linear-gradient(135deg, #ff6b6b, #ff5252);
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
    animation: askany-pulse 2s infinite;
}

@keyframes askany-pulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
    }

    50% {
        transform: scale(1.1);
        box-shadow: 0 6px 20px rgba(255, 107, 107, 0.6);
    }
}

/* Enhanced Chat Container */
.askany-chat-container {
    width: 395px;
    height: 620px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.9));
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 8px 32px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: askany-slide-up 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.askany-chat-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #667eea, #764ba2, #667eea);
    background-size: 200% 100%;
    animation: askany-gradient-flow 3s ease infinite;
}

@keyframes askany-gradient-flow {

    0%,
    100% {
        background-position: 0% 50%;
    }

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

@keyframes askany-slide-up {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

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

.askany-chat-widget.inline .askany-chat-container {
    width: 100%;
    max-width: 800px;
    height: 700px;
    margin: 0 auto;
    border-radius: 16px;
}

/* Enhanced Chat Header */
.askany-chat-header {
    /* background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7)); */
    background: linear-gradient(135deg, #d1edff, rgba(255, 255, 255, 0.7));
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    position: relative;
}

.askany-chat-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 20px;
    height: 1px;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.assistant-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    transition: all 0.3s ease;
    overflow: hidden;
}

.assistant-avatar:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

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

.header-info h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #2d3748;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.status-indicator {
    font-size: 12px;
    color: #48bb78;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.status-indicator::before {
    content: '';
    width: 8px;
    height: 8px;
    background: #48bb78;
    border-radius: 50%;
    animation: askany-status-pulse 2s infinite;
}

@keyframes askany-status-pulse {

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

    50% {
        opacity: 0.7;
        transform: scale(1.2);
    }
}

.header-actions {
    display: flex;
    gap: 8px;
}

.action-btn {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #718096;
    backdrop-filter: blur(10px);
}

.action-btn:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    color: #667eea;
}

.askany-chat-close:hover {
    color: #e53e3e;
    background: linear-gradient(135deg, #fed7d7, #feb2b2);
}

/* Enhanced Content Wrapper */
.askany-content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    /* Important for flex children to scroll properly */
}

/* Get Started Page */
.askany-get-started-page {
    padding: 32px 24px;
    flex: 1;
    overflow-y: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(247, 250, 252, 0.8), rgba(255, 255, 255, 0.9));
    transition: padding 0.3s ease;
}

/* Add more padding when expanded */
.askany-chat-container.expanded .askany-get-started-page {
    padding: 40px 32px;
}

.get-started-content {
    max-width: 400px;
    width: 100%;
    transition: max-width 0.3s ease;
}

/* Expand the form when chat is expanded */
.askany-chat-container.expanded .get-started-content {
    max-width: 500px;
}

.get-started-header {
    text-align: center;
    margin-bottom: 32px;
}

.get-started-logo {
    max-width: 120px;
    height: auto;
    margin-bottom: 20px;
}

.get-started-header h2 {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin: 0 0 12px 0;
    transition: font-size 0.3s ease;
}

/* Larger heading when expanded */
.askany-chat-container.expanded .get-started-header h2 {
    font-size: 28px;
}

.get-started-header p {
    font-size: 14px;
    color: #666;
    margin: 0;
    line-height: 1.5;
    transition: font-size 0.3s ease;
}

/* Larger description when expanded */
.askany-chat-container.expanded .get-started-header p {
    font-size: 15px;
    line-height: 1.6;
}

.get-started-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Increase gap when expanded */
.askany-chat-container.expanded .get-started-form {
    gap: 24px;
}

.get-started-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.get-started-form label {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    transition: font-size 0.3s ease;
}

/* Slightly larger labels when expanded */
.askany-chat-container.expanded .get-started-form label {
    font-size: 15px;
}

.get-started-form label .required {
    color: #dc3232;
    margin-left: 2px;
}

.get-started-form input {
    padding: 12px 16px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.2s ease;
}

/* Larger inputs when expanded */
.askany-chat-container.expanded .get-started-form input {
    padding: 14px 18px;
    font-size: 15px;
}

.get-started-form input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.1);
}

.get-started-submit-btn {
    padding: 14px 24px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 8px;
}

/* Larger button when expanded */
.askany-chat-container.expanded .get-started-submit-btn {
    padding: 16px 28px;
    font-size: 16px;
}

.get-started-submit-btn:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(74, 108, 247, 0.3);
}

.get-started-submit-btn:active {
    transform: translateY(0);
}

.get-started-submit-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
}

/* Enhanced Home Page Content */
.askany-home-content {
    padding: 24px;
    flex: 1;
    overflow-y: auto;
    background: linear-gradient(180deg, rgba(247, 250, 252, 0.8), rgba(255, 255, 255, 0.9));
}

.askany-home-content::-webkit-scrollbar {
    width: 6px;
}

.askany-home-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
}

.askany-home-content::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 3px;
}

.home-logo-section {
    text-align: center;
    margin-bottom: 24px;
}

.home-logo {
    max-width: 120px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.home-agents-section {
    text-align: center;
    margin-bottom: 20px;
}

.agents-avatars {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
}

.agent-avatar-wrapper {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin-left: -8px;
    z-index: 1;
}

.agent-avatar-wrapper:first-child {
    margin-left: 0;
}

.agent-avatar-wrapper:hover {
    z-index: 20;
}

.agent-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.agent-avatar-wrapper:hover .agent-avatar {
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 8px 22px rgba(102, 126, 234, 0.35);
    border-color: #667eea;
}

.agent-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Agent Name Tooltip with Pointer Arrow Below Avatar */
.agent-name-tooltip {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px) scale(0.92);
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    white-space: nowrap;
    z-index: 99;
}

.agent-avatar-wrapper:hover .agent-name-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) scale(1);
}

.agent-name-tooltip .tooltip-arrow {
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid rgba(15, 23, 42, 0.92);
}

.agent-name-tooltip .tooltip-name {
    display: inline-block;
    background: rgba(15, 23, 42, 0.92);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    letter-spacing: 0.2px;
}

/* Curved Agent Avatar Layout */
.agents-avatars.curved-avatars {
    gap: 4px;
    align-items: flex-end;
    padding-top: 8px;
    padding-bottom: 4px;
}

.agents-avatars.curved-avatars .agent-avatar-wrapper {
    margin-left: -10px;
    transition: all 0.3s ease;
}

.agents-avatars.curved-avatars .agent-avatar-wrapper:first-child {
    margin-left: 0;
}

.agents-avatars.curved-avatars .lead-avatar {
    z-index: 10;
    margin-top: -8px;
}

.agents-avatars.curved-avatars .lead-avatar .agent-avatar {
    width: 48px;
    height: 48px;
    border-color: #ffffff;
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.agents-avatars.curved-avatars .flank-avatar {
    z-index: 5;
    transform: translateY(4px);
}

.agents-avatars.curved-avatars .flank-avatar .agent-avatar {
    width: 38px;
    height: 38px;
    opacity: 0.92;
}

.agents-avatars.curved-avatars .flank-avatar:hover {
    transform: translateY(0);
}

.home-welcome-section {
    text-align: center;
    margin-bottom: 32px;
}

/* Social Share Block Styling */
.askany-social-share-block {
    margin: 16px 0 20px;
    padding: 12px 14px;
    background: rgba(243, 244, 246, 0.85);
    border: 1px solid rgba(229, 231, 235, 0.8);
    border-radius: 16px;
    backdrop-filter: blur(8px);
}

.askany-social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.askany-si-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff !important;
    text-decoration: none !important;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease;
    box-shadow: 0 3px 8px rgba(20, 30, 60, 0.15);
    outline: none;
}

.askany-si-btn:hover {
    transform: translateY(-3px) scale(1.08);
    box-shadow: 0 6px 14px rgba(20, 30, 60, 0.25);
}

.askany-si-btn .askany-si-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.askany-si-btn svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

/* Individual Channel Brand Background Colors */
.askany-si-btn.si-fb { background: #1877F2; }
.askany-si-btn.si-x { background: #111827; }
.askany-si-btn.si-pin { background: #E60023; }
.askany-si-btn.si-reddit { background: #FF4500; }
.askany-si-btn.si-copy { background: #6B7280; }
.askany-si-btn.si-gemini { background: linear-gradient(135deg, #1A73E8, #8E24AA); }
.askany-si-btn.si-claude { background: #D97706; }
.askany-si-btn.si-li { background: #0A66C2; }
.askany-si-btn.si-tg { background: #26A5E4; }
.askany-si-btn.si-wa { background: #25D366; }
.askany-si-btn.si-email { background: #EA4335; }
.askany-si-btn.si-print { background: #4B5563; }
.askany-si-btn.si-msg { background: linear-gradient(135deg, #00B2FF, #006AFF); }
.askany-si-btn.si-ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.askany-si-btn.si-sms { background: #10B981; }
.askany-si-btn.si-tumblr { background: #35465C; }
.askany-si-btn.si-stumble { background: #EB4924; }
.askany-si-btn.si-delic { background: #336699; }
.askany-si-btn.si-evernote { background: #00A82D; }
.askany-si-btn.si-wp { background: #21759B; }
.askany-si-btn.si-pocket { background: #EE4056; }

.welcome-title {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 8px 0;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    background-clip: text;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.wave-emoji {
    animation: askany-wave 2s infinite;
}

@keyframes askany-wave {

    0%,
    50%,
    100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(20deg);
    }
}

.welcome-subtitle {
    color: #718096;
    font-size: 16px;
    margin: 0;
    font-weight: 500;
}

.home-actions-section {
    space-y: 12px;
}

.home-action-item {
    margin-bottom: 12px;
}

.action-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    width: 100%;
    cursor: pointer;
}

/* Button-specific styling for report issue and feature request */
button.action-link {
    font-family: inherit;
    font-size: inherit;
    text-align: left;
}

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

.action-link:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    border-color: rgba(102, 126, 234, 0.3);
    text-decoration: none;
}

.action-link:hover::before {
    left: 100%;
}

.action-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    transition: all 0.3s ease;
}

.action-link:hover .action-icon {
    transform: scale(1.05) rotate(5deg);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.action-content {
    flex: 1;
}

.action-title {
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 4px;
    font-size: 15px;
}

.action-subtitle {
    color: #718096;
    font-size: 13px;
    font-weight: 500;
}

/* Enhanced FAQ Section */
.home-faq-section {
    margin-top: 24px;
}

.faq-title {
    font-size: 18px;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 16px;
    text-align: center;
}

.faq-list {
    space-y: 8px;
}

.faq-item {
    margin-bottom: 8px;
}

.faq-question {
    width: 100%;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 12px 16px;
    border-radius: 10px;
    text-align: left;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: #2d3748;
    backdrop-filter: blur(10px);
}

.faq-question:hover {
    background: rgba(255, 255, 255, 0.9);
    color: #393939;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.faq-question svg {
    transition: transform 0.3s ease;
    color: #667eea;
}

.faq-question.active svg {
    transform: rotate(180deg);
}

.faq-answer {
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    margin-top: 4px;
    color: #4a5568;
    font-size: 14px;
    line-height: 1.5;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

/* Enhanced Main Navigation Tabs */
.askany-main-tabs {
    display: flex;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    position: relative;
}

.askany-main-tabs::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.3), transparent);
}

.main-tab-btn {
    flex: 1;
    background: none;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #718096;
    font-weight: 600;
    font-size: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.main-tab-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 0 0 3px 3px;
    transition: width 0.3s ease;
}

.main-tab-btn:hover {
    color: #667eea;
    background: rgba(102, 126, 234, 0.05);
}

.main-tab-btn.active {
    color: #667eea;
    background: rgba(102, 126, 234, 0.1);
}

.main-tab-btn.active::before {
    width: 60%;
}

.main-tab-btn svg {
    transition: all 0.3s ease;
}

.main-tab-btn:hover svg,
.main-tab-btn.active svg {
    transform: scale(1.1);
}


/* Enhanced Messages Area */
.askany-chat-messages {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background: linear-gradient(180deg, rgba(247, 250, 252, 0.8), rgba(255, 255, 255, 0.9));
    position: relative;
}

.askany-chat-messages::-webkit-scrollbar {
    width: 6px;
}

.askany-chat-messages::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
}

.askany-chat-messages::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 3px;
}

.suggested-prompts {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
    animation: askany-fade-in 0.4s ease;
}


.prompt-header {
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.prompt-label {
    font-size: 12px;
    font-weight: 700;
    color: #667eea;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.close-prompts-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #718096;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.close-prompts-btn:hover {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    transform: scale(1.1);
}

.prompt-items {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.prompt-item {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    font-size: 13px;
    font-weight: 500;
    color: #4a5568;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
}

.prompt-item:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
    border-color: rgba(102, 126, 234, 0.3);
    color: #667eea;
}


/* Chat Messages Area */
.askany-chat-messages {
    height: 400px;
    overflow-y: auto;
    padding: 20px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.askany-chat-messages::-webkit-scrollbar {
    width: 6px;
}

.askany-chat-messages::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

.askany-chat-messages::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
    transition: background 0.3s ease;
}

.askany-chat-messages::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Chat Message Bubbles */
.chat-message {
    display: flex;
    margin-bottom: 12px;
    animation: slideIn 0.3s ease-out;
}

/* .chat-message.user-message {
    justify-content: flex-end;
} */

.chat-message.assistant-message {
    justify-content: flex-start;
}

.message-bubble {
    max-width: 75%;
    padding: 12px 16px;
    border-radius: 18px;
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* User Message Styling */
.chat-message.user-message .message-bubble {
    background: linear-gradient(135deg, #ffffff, #f2f2f2);
    border-bottom-right-radius: 4px;
    color: #353535;
}

/* Assistant Message Styling */
.chat-message.assistant-message .message-bubble {
    background: #f8fafc;
    color: #334155;
    border: 1px solid #e2e8f0;
    border-bottom-left-radius: 4px;
}

/* Typing Effect Cursor */
.message-bubble.typing-effect-bubble::after {
    content: '▋';
    animation: typingCursorBlink 1s infinite;
    margin-left: 2px;
    color: #6366f1;
    font-weight: 300;
}

@keyframes typingCursorBlink {

    0%,
    49% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: 0;
    }
}


/* Enhanced Chat Input */
.askany-chat-input {
    padding: 16px 20px 20px 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    position: relative;
}

.input-container {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(102, 126, 234, 0.2);
    border-radius: 10px;
    padding: 0px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    margin-bottom: 12px;
    position: relative;
}

.input-container:focus-within {
    border-color: rgba(102, 126, 234, 0.5);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    transform: translateY(-1px);
}

.attachment-btn,
.emoji-btn {
    background: none;
    border: none;
    padding: 0 0 9px 4px;
    cursor: pointer;
    color: #718096;
    border-radius: 8px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; 
    margin-bottom: 3px;
}

.submit-btn {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: #718096;
    border-radius: 8px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    top: -5px;
}

.attachment-btn:hover,
.emoji-btn:hover {
    background: rgb(198 207 248 / 10%);
    color: #667eea;
    transform: scale(1.1);
}

.submit-btn:hover {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    transform: scale(1.1);
}

.send-btn {
    background-color: rgba(102, 126, 234, 0.1);
    color: #718096;
    border: none;
    border-radius: var(--radius-round);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: var(--shadow-soft);
    flex-shrink: 0;
    height: 32px;
    margin-left: 8px;
    margin-right: 5px;
    min-width: 32px;
    transition: var(--transition);
    width: 32px;
    margin-top: 7px;

}

.send-btn:hover {
    background-color: rgba(86, 116, 248, 0.1);
    transform: scale(1.05);
    box-shadow: var(--shadow-strong);
}

.input-container input {
    flex: 1;
    display: flex; 
    align-self: stretch;
    border: none;
    outline: none;
    padding: 10px 12px;
    background: transparent;
    color: #2d3748;
    font-size: 14px;
    font-weight: 500;
   line-height: normal;
   height: auto;
}

.input-container input::placeholder {
    color: #a0aec0;
    font-weight: 500;
}

.send-btn svg {
    transform: rotate(90deg);   
    transition: transform 0.3s ease;
}
.send-btn:hover svg {
    transform: rotate(90deg) scale(1.1);
}
input#fe-submit {
    margin-bottom: 3px;
}

/* chat conversation style  */


/* -----------------------------END New Style for Chat Widget------------------------------------- */



/* Emoji picker */
.emoji-picker {
    position: absolute;
    bottom: 70px;
    right: 20px;
    background-color: white;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-strong);
    padding: 10px;
    display: none;
    z-index: 100;
    border: 1px solid var(--border-color);
    opacity: 0;
    transform: translateY(10px);
    animation: fade-in 0.2s forwards;
}

@keyframes fade-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.emoji-group {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.emoji {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.2s;
}

.emoji:hover {
    background-color: var(--light-bg);
    transform: scale(1.1);
}

/* Chat footer */
.chat-footer {
    padding: 8px 15px;
    border-top: 1px solid var(--border-color);
    background-color: var(--bg-color);
}

.footer-by {
    font-size: 11px;
    color: var(--light-text);
    text-align: center;
    display: block;
}

/* Loading indicator */
.typing-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    gap: 4px;
}

.typing-dot {
    width: 8px;
    height: 8px;
    background-color: var(--light-text);
    border-radius: 50%;
    opacity: 0.6;
    animation: typing-dot-animation 1s infinite;
}

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

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

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

@keyframes typing-dot-animation {
    0% {
        transform: translateY(0);
        opacity: 0.6;
    }

    50% {
        transform: translateY(-5px);
        opacity: 1;
    }

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

/* Remote typing indicators */
.remote-typing-indicator {
    margin-bottom: 12px;
    animation: slideIn 0.3s ease-out;
}

.remote-typing-indicator .message-bubble {
    background: rgba(102, 126, 234, 0.1);
    border: 1px solid rgba(102, 126, 234, 0.2);
    color: #667eea;
    font-style: italic;
    padding: 8px 12px;
    border-radius: 18px;
    border-bottom-left-radius: 4px;
}

.remote-typing-indicator-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.typing-text {
    font-size: 13px;
    font-weight: 500;
}

.typing-dots {
    display: flex;
    gap: 3px;
}

.typing-dots .typing-dot {
    width: 6px;
    height: 6px;
    background-color: #667eea;
    border-radius: 50%;
    animation: typing-dot-animation 1.2s infinite;
}

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

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

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

@keyframes typing-dot-animation {

    0%,
    60%,
    100% {
        transform: translateY(0);
        opacity: 0.4;
    }

    30% {
        transform: translateY(-8px);
        opacity: 1;
    }
}

/* Search indicator */
.search-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    gap: 8px;
    background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(102, 126, 234, 0.2);
}

.search-icon {
    color: var(--primary-color);
    animation: search-spin 2s linear infinite;
    flex-shrink: 0;
}

.search-text {
    color: var(--primary-color);
    font-weight: 500;
    font-size: 13px;
    margin-right: 4px;
}

.search-dots {
    display: flex;
    gap: 3px;
}

.search-dots .typing-dot {
    width: 6px;
    height: 6px;
    background-color: var(--primary-color);
}

@keyframes search-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Responsive adjustments */
@media (max-width: 480px) {

    .askany-chat-toggle {}

    .input-container {
        width: 80%;
    }

    .askany-chat-header h3 {
        font-size: 13px;
    }

    .send-btn {
        font-size: 13px;
    }

    .askany-chat-container {
        width: 325px;
        height: 522px;
    }

    .product-image {
        width: 50px;
        height: 50px;
    }

    .askany-chat-container {
        width: 95vw;
        max-width: 380px;
        height: 85vh;
        max-height: 600px;
        bottom: 10px;
        right: 10px;
        left: 10px;
        margin: 0 auto;
    }

    /* Input container mobile responsiveness */
    .input-container {
        width: 100% !important;
        flex-wrap: nowrap;
        align-items: center;
        padding: 8px;
        margin-bottom: 8px;
    }

    .input-container input {
        flex: 1;
        min-width: 0;
        padding: 8px 10px;
        font-size: 14px;
        margin: auto;
    }

    /* Ensure buttons are visible */
    .attachment-btn,
    .emoji-btn,
    .submit-btn,
    .send-btn {
        flex-shrink: 0;
        width: 36px;
        height: 36px;
        padding: 6px;
        margin: 0 2px;
    }

    /* Chat input area */
    .askany-chat-input {
        padding: 12px 15px 15px 15px;
    }

    /* Messages area height adjustment */
    .askany-chat-messages {
        height: calc(100% - 200px);
        min-height: 250px;
    }

    /* Suggested prompts mobile */
    .suggested-prompts {
        margin-bottom: 8px;
    }

    .prompt-items {
        padding: 8px;
        gap: 6px;
    }

    .prompt-item {
        padding: 8px 12px;
        font-size: 12px;
    }

    /* Product images */
    .product-image {
        width: 50px;
        height: 50px;
    }
}

/* Tab System Styling */
.askany-chat-tabs {
    display: flex;
    background-color: var(--bg-color);
    border-bottom: 1px solid var(--border-color);
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 5;
}

.tab-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tab-btn svg {
    margin-right: 5px;
    flex-shrink: 0;
}

.tab-btn span {
    display: inline-block;
    line-height: 1;
}

.tab-btn.active {
    color: #3182ce;
    border-bottom-color: #3182ce;
}

.tab-btn.active svg {
    stroke: #3182ce;
}

.tab-btn:focus {
    outline: none;
}

.askany-chat-tabs .tab-btn {
    flex: 1;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 12px 15px;
    font-size: 14px;
    font-weight: 500;
    color: var(--light-text);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    text-align: center;
}

.askany-chat-tabs .tab-btn:hover {
    color: var(--primary-color);
}

.askany-chat-tabs .tab-btn.active {
    color: var(--primary-color);
    font-weight: 600;
}

.askany-chat-tabs .tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--primary-color);
    animation: tab-highlight 0.3s ease forwards;
}

@keyframes tab-highlight {
    from {
        transform: scaleX(0.5);
        opacity: 0.5;
    }

    to {
        transform: scaleX(1);
        opacity: 1;
    }
}

.askany-chat-tab-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    /* Important for flex child to shrink */
}

/* -----------------Contact form tab styling------------------- */
.askany-contact-form {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    background-color: var(--light-bg);
}

/* Ensure contact form looks good within the widget */
.askany-contact-form form {
    max-width: 100% !important;
}

.askany-contact-form input[type="text"],
.askany-contact-form input[type="email"],
.askany-contact-form input[type="tel"],
.askany-contact-form textarea {
    width: 100%;
    margin-bottom: 12px;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background-color: var(--bg-color);
    color: var(--text-color);
}

.askany-contact-form textarea {
    min-height: 120px;
    resize: vertical;
}

.askany-contact-form input[type="submit"] {
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    padding: 10px 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

.askany-contact-form input[type="submit"]:hover {
    background-color: var(--primary-hover);
}

/* Adjust message container height for tabs */
.askany-chat-widget.with-tabs .askany-chat-messages {
    /* max-height: calc(100% - 115px); */
    /* height: calc(70% - 115px); */
    height: 80%;
}

/* END  */


/* Product message styling */
.message-bubble.product-message {
    padding: 0;
    overflow: hidden;
    max-width: 100%;
    background-color: #fff;
}

.message-bubble.product-message .product-item {
    display: flex;
    padding: 12px;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
}

.message-bubble.product-message .product-image {
    width: 80px;
    height: 80px;
    margin-right: 12px;
}

.message-bubble.product-message .product-details {
    flex: 1;
    min-width: 0;
}

.message-bubble.product-message .product-title {
    font-size: 14px;
    margin-bottom: 4px;
}

.message-bubble.product-message .product-description {
    font-size: 12px;
    color: #666;
    margin-bottom: 8px;
}

.message-bubble.product-message .product-price {
    font-weight: 600;
    color: #e63946;
    margin-bottom: 8px;
}

.message-bubble.product-message .product-actions {
    display: flex;
    gap: 8px;
}

.message-bubble.product-message .view-button,
.message-bubble.product-message .add-to-cart-button {
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    transition: all 0.2s ease;
}

.message-bubble.product-message .view-button {
    background-color: #f1f1f1;
    color: #333;
}

.message-bubble.product-message .add-to-cart-button {
    background-color: #4CAF50;
    color: white;
}

.message-bubble.product-message .view-button:hover {
    background-color: #e5e5e5;
}

.message-bubble.product-message .add-to-cart-button:hover {
    background-color: #43a047;
}

/* Enhanced product styling */
.message-bubble.product-message .product-item.enhanced {
    flex-direction: column;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    margin-bottom: 8px;
    padding: 16px;
}

.message-bubble.product-message .product-item.enhanced .product-image {
    width: 100px;
    height: 100px;
    align-self: flex-start;
    margin-right: 0;
    margin-bottom: 12px;
}

.message-bubble.product-message .product-sku {
    font-size: 11px;
    color: #888;
    margin-bottom: 4px;
}

.message-bubble.product-message .sale-badge {
    background: #ff4444;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 8px;
}

.message-bubble.product-message .product-stock {
    font-size: 11px;
    margin-bottom: 4px;
    font-weight: 500;
}

.message-bubble.product-message .product-stock.in-stock {
    color: #28a745;
}

.message-bubble.product-message .product-stock.out-of-stock {
    color: #dc3545;
}

.message-bubble.product-message .product-categories {
    font-size: 11px;
    color: #666;
    margin-bottom: 4px;
}

.message-bubble.product-message .product-rating {
    font-size: 11px;
    color: #ffa500;
    margin-bottom: 6px;
}

/* Responsive adjustments for product messages */
@media (max-width: 480px) {
    .message-bubble.product-message .product-item {
        flex-direction: column;
    }

    .message-bubble.product-message .product-image {
        width: 100%;
        height: 120px;
        margin-right: 0;
        margin-bottom: 12px;
    }

    .message-bubble.product-message .product-details {
        padding: 0;
    }
}

/* Simple Form Support  */
button.submit-button.sf-form-submit {
    width: 100%;
}

.simple_form_content .text-fields {
    display: flex;
    flex-direction: column;
    margin-top: 5px;
    overflow: hidden;
    text-align: left;
    justify-content: left;
    align-items: baseline;
}

/*===== HOME PAGE STYLES ===== */

/* Content wrapper for proper layout */
.askany-content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

/* Main tabs (Home/Messages) - positioned at bottom above footer */
.askany-main-tabs {
    display: flex;
    background: var(--light-bg);
    border-top: 1px solid var(--border-color);
    padding: 0;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}



.main-tab-btn svg {
    width: 16px;
    height: 16px;
}

/* Main tab content */
.askany-main-tab-content {
    display: none;
    flex: 1;
    overflow: hidden;
}

.askany-main-tab-content.active {
    display: flex;
    flex-direction: column;
}

/* Home tab specific styling */
.askany-main-tab-content#home-tab {
    display: flex;
    flex-direction: column;
}

.askany-main-tab-content#home-tab:not(.active) {
    display: none;
}

/* Messages tab specific styling */
.askany-main-tab-content#messages-tab {
    display: none;
    flex-direction: column;
}

.askany-main-tab-content#messages-tab.active {
    display: flex;
    flex-direction: column;
}


/* News tab specific styling */
.askany-main-tab-content#news-tab {
    display: none;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.askany-main-tab-content#news-tab.active {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* Direct chat content (when home page is disabled) */
.askany-direct-chat-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

/* Home page content */
.askany-home-content {
    padding: 20px;
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Home logo section */
.home-logo-section {
    text-align: center;
    margin-bottom: 10px;
}

.home-logo {
    max-width: 120px;
    max-height: 60px;
    height: auto;
}

/* Home agents section */
.home-agents-section {
    text-align: center;
    margin-bottom: 10px;
}

.agents-avatars {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.agent-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--border-color);
    transition: transform var(--anim-speed) ease;
}

.agent-avatar:hover {
    transform: scale(1.1);
    border-color: var(--primary-color);
}

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

/* Home welcome section */
.home-welcome-section {
    text-align: center;
    margin-bottom: 20px;
}

.welcome-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.welcome-title .user-name {
    color: var(--primary-color);
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.wave-emoji {
    font-size: 24px;
    animation: wave 2s ease-in-out infinite;
}

@keyframes wave {

    0%,
    100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(20deg);
    }

    75% {
        transform: rotate(-10deg);
    }
}

.welcome-subtitle {
    font-size: 16px;
    color: var(--light-text);
    margin: 0;
    line-height: 1.5;
}

/* Home actions section */
.home-actions-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.home-action-item {
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: transform var(--anim-speed) ease;
}

.home-action-item:hover {
    transform: translateY(-2px);
}

.action-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--light-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--text-color);
    transition: all var(--anim-speed) ease;
}

.action-link:hover {
    background: var(--bg-color);
    border-color: var(--primary-color);
    box-shadow: var(--shadow-soft);
    color: var(--text-color);
    text-decoration: none;
}

.action-icon {
    width: 40px;
    height: 40px;
    background: var(--primary-color);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.action-icon svg {
    width: 20px;
    height: 20px;
}

.action-content {
    flex: 1;
}

.action-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 4px;
}

.action-subtitle {
    font-size: 12px;
    color: var(--light-text);
    line-height: 1.4;
}

/* FAQ section */
.home-faq-section {
    margin-top: 10px;
}

.faq-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 12px 0;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.faq-item {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: border-color var(--anim-speed) ease;
}

.faq-item:hover {
    border-color: var(--primary-color);
}

.faq-question {
    width: 100%;
    background: var(--light-bg);
    border: none;
    padding: 12px 16px;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color);
    transition: all var(--anim-speed) ease;
}

.faq-question:hover {
    background: rgba(74, 108, 247, 0.05);
}

.faq-question svg {
    width: 16px;
    height: 16px;
    color: var(--light-text);
    transition: transform var(--anim-speed) ease;
}

.faq-answer {
    padding: 16px;
    background: var(--bg-color);
    border-top: 1px solid var(--border-color);
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-color);
}

.faq-answer p {
    margin: 0 0 8px 0;
}

.faq-answer p:last-child {
    margin-bottom: 0;
}

/* Markdown content styling in FAQ answers */
.askany-faq-markdown h1,
.askany-faq-markdown h2,
.askany-faq-markdown h3,
.askany-faq-markdown h4,
.askany-faq-markdown h5,
.askany-faq-markdown h6 {
    margin-top: 10px;
    margin-bottom: 6px;
    font-weight: 600;
    line-height: 1.3;
}

.askany-faq-markdown h1 {
    font-size: 18px;
}

.askany-faq-markdown h2 {
    font-size: 16px;
}

.askany-faq-markdown h3 {
    font-size: 15px;
}

.askany-faq-markdown h4 {
    font-size: 14px;
}

.askany-faq-markdown h5 {
    font-size: 13px;
}

.askany-faq-markdown h6 {
    font-size: 12px;
}

.askany-faq-markdown p {
    margin: 6px 0;
    line-height: 1.6;
}

.askany-faq-markdown strong {
    font-weight: 600;
}

.askany-faq-markdown em {
    font-style: italic;
}

.askany-faq-markdown del {
    text-decoration: line-through;
    opacity: 0.7;
}

.askany-faq-markdown code {
    padding: 2px 4px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 3px;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 12px;
}

.askany-faq-markdown pre {
    background: rgba(0, 0, 0, 0.05);
    padding: 8px;
    border-radius: 4px;
    overflow-x: auto;
    margin: 8px 0;
}

.askany-faq-markdown pre code {
    padding: 0;
    background: transparent;
    font-size: 12px;
}

.askany-faq-markdown ul,
.askany-faq-markdown ol {
    margin: 8px 0;
    padding-left: 20px;
}

.askany-faq-markdown li {
    margin: 3px 0;
    line-height: 1.5;
}

.askany-faq-markdown blockquote {
    margin: 8px 0;
    padding: 8px 12px;
    border-left: 3px solid var(--primary-color);
    background: rgba(0, 0, 0, 0.03);
    font-style: italic;
}

.askany-faq-markdown a {
    color: var(--primary-color);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}

.askany-faq-markdown a:hover {
    border-bottom-color: var(--primary-color);
}

.askany-faq-markdown br {
    display: block;
    content: "";
    margin: 2px 0;
}


/* Responsive adjustments for home page */
@media (max-width: 480px) {
    .askany-home-content {
        padding: 16px;
        gap: 16px;
    }

    .welcome-title {
        font-size: 20px;
    }

    .welcome-subtitle {
        font-size: 14px;
    }

    .action-link {
        padding: 12px;
    }

    .action-icon {
        width: 36px;
        height: 36px;
    }

    .agents-avatars {
        gap: 6px;
    }

    .agent-avatar {
        width: 36px;
        height: 36px;
    }
}


/* Clear Chat Confirmation Modal Styles */
.askany-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    animation: fadeIn 0.2s ease-in-out;
}

.askany-modal {
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    max-width: 400px;
    width: 90%;
    animation: slideUp 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

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

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

.askany-modal-header {
    padding: 20px;
    border-bottom: 1px solid #e3e8ef;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.askany-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.askany-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.askany-modal-close:hover {
    background: #f5f7fb;
    color: #333;
}

.askany-modal-body {
    padding: 20px;
}

.askany-modal-body p {
    margin: 0 0 12px 0;
    color: #333;
    font-size: 14px;
    line-height: 1.5;
}

.askany-modal-body p:last-child {
    margin-bottom: 0;
}

.askany-modal-note {
    color: #666;
    font-size: 13px;
    background: #f9fafb;
    padding: 10px 12px;
    border-radius: 6px;
    border-left: 3px solid #4a6cf7;
}

.askany-modal-footer {
    padding: 16px 20px;
    border-top: 1px solid #e3e8ef;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.askany-btn {
    padding: 10px 16px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.askany-btn-secondary {
    background: #f5f7fb;
    color: #333;
    border: 1px solid #e3e8ef;
}

.askany-btn-secondary:hover {
    background: #e8ecf1;
    border-color: #d0d8e0;
}

.askany-btn-danger {
    background: #ef4444;
    color: white;
}

.askany-btn-danger:hover {
    background: #dc2626;
}

.askany-btn-danger:active {
    transform: scale(0.98);
}

/* ========================================
   CTA Panel Styles (PRO Feature)
   ======================================== */
/* ========================================================================
   CTA Panel Styles (PRO Feature) — RESPONSIVE FIX
   Replace everything from your original
   "/* Positioning variables ...
   ======================================================================== */

.askany-chat-widget {
    --aa-launcher-size: 60px; /* diameter of the round toggle button */
    --aa-margin: 20px;        /* distance of the launcher from the screen edge */
    --aa-gap: 10px;           /* breathing room between launcher and CTA/pill */
    --aa-pill-height: 44px;   /* approx height of the contact pill */
}

/* Smaller launcher margin on very small screens so nothing gets cramped
   against the edge. Everything below still uses the same variables, so
   panel + pill + tail all stay perfectly in sync automatically. */
@media screen and (max-width: 480px) {
    .askany-chat-widget {
        --aa-margin: 12px;
        --aa-gap: 8px;
    }
}

/* ---------------------------------------------------------------------
   Base CTA Panel
   --------------------------------------------------------------------- */
.askany-cta-panel {
    position: fixed;
    z-index: 99998; /* one below chat widget (99999) */
    width: max-content;
    max-width: min(320px, calc(100vw - (2 * var(--aa-margin))));
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.askany-cta-panel.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

/* Anchor the CTA panel to the launcher — identical formula at every
   breakpoint (mobile / tablet / laptop / desktop). Nothing here changes
   based on screen width, so the panel is always the same distance from
   the launcher regardless of device. */
.askany-chat-widget.bottom-right .askany-cta-panel {
    bottom: calc(var(--aa-margin) + var(--aa-launcher-size) + var(--aa-gap));
    right: var(--aa-margin);
    left: auto;
}

.askany-chat-widget.bottom-left .askany-cta-panel {
    bottom: calc(var(--aa-margin) + var(--aa-launcher-size) + var(--aa-gap));
    left: var(--aa-margin);
    right: auto;
}

.askany-chat-widget.top-right .askany-cta-panel {
    top: calc(var(--aa-margin) + var(--aa-launcher-size) + var(--aa-gap));
    right: var(--aa-margin);
    left: auto;
}

.askany-chat-widget.top-left .askany-cta-panel {
    top: calc(var(--aa-margin) + var(--aa-launcher-size) + var(--aa-gap));
    left: var(--aa-margin);
    right: auto;
}

/* Close button */
.askany-cta-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
    z-index: 10;
}

.askany-cta-close:hover {
    color: #374151;
    background: #f2f2f2;
}

/* ========================================
   Mode 1: Speech Bubble Style
   ======================================== */

.askany-cta-bubble {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: clamp(14px, 4vw, 18px) clamp(14px, 4vw, 20px);
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
}

.askany-cta-bubble:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.cta-bubble-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cta-emoji {
    font-size: 24px;
    line-height: 1;
    margin-bottom: 4px;
}

.cta-bubble-content .cta-title {
    font-size: clamp(13px, 3.5vw, 15px);
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
    line-height: 1.4;
}

.cta-bubble-content .cta-description {
    font-size: clamp(12px, 3vw, 13px);
    font-weight: 400;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
}

/* Speech bubble tail (pointer) — anchored to the launcher's horizontal
   center via the same variables, so it lines up at every screen size. */
.cta-bubble-tail {
    position: absolute;
    bottom: -8px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #ffffff;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.06));
}

.askany-chat-widget.bottom-right .cta-bubble-tail,
.askany-chat-widget.top-right .cta-bubble-tail {
    right: calc((var(--aa-launcher-size) / 2) - 10px);
    left: auto;
}

.askany-chat-widget.bottom-left .cta-bubble-tail,
.askany-chat-widget.top-left .cta-bubble-tail {
    left: calc((var(--aa-launcher-size) / 2) - 10px);
    right: auto;
}

.askany-chat-widget.top-right .cta-bubble-tail,
.askany-chat-widget.top-left .cta-bubble-tail {
    bottom: auto;
    top: -8px;
    border-top: none;
    border-bottom: 10px solid #ffffff;
}

/* ========================================
   Mode 2: Card with Button Style
   ======================================== */

.askany-cta-card {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: clamp(14px, 4vw, 20px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all 0.2s ease;
}

.askany-cta-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.cta-card-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 8px;
    flex-shrink: 0;
}

.cta-card-icon-default {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(74, 108, 247, 0.1);
    border-radius: 8px;
    color: var(--primary-color, #4a6cf7);
    flex-shrink: 0;
}

.cta-card-icon-default svg {
    width: 20px;
    height: 20px;
}

.askany-cta-card .cta-title {
    font-size: clamp(13px, 3.5vw, 15px);
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
    line-height: 1.4;
}

.askany-cta-card .cta-description {
    font-size: clamp(12px, 3vw, 13px);
    font-weight: 400;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
}

.cta-action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--primary-color, #4a6cf7);
    color: #ffffff;
    border: none;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 4px;
    min-height: 44px; /* tap-target friendly at every size, not just mobile */
}

.cta-action-btn:hover {
    background: var(--primary-hover, #3c57d0);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(74, 108, 247, 0.3);
}

.cta-action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    flex-shrink: 0;
}

.cta-action-icon svg {
    width: 14px;
    height: 14px;
}

.cta-action-label {
    flex: 1;
}

/* ========================================
   Contact Us Pill
   ======================================== */

.askany-contact-pill {
    position: fixed;
    z-index: 99997; /* below CTA panel (99998) */
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #ffffff;
    color: #1a1a1a;
    text-decoration: none;
    border-radius: 50px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: 1px solid #e5e7eb;
    white-space: nowrap;
    opacity: 1;
    pointer-events: all;
    /* Room for the pill between the launcher and the screen edge, at any
       viewport width — replaces the old fixed "hide on mobile" behavior. */
    max-width: calc(100vw - var(--aa-launcher-size) - (2 * var(--aa-margin)) - var(--aa-gap));
    overflow: hidden;
}

.askany-contact-pill:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    text-decoration: none;
    color: #1a1a1a;
    transform: translateX(-2px);
    background: #f2f2f2;
}

.contact-pill-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contact-pill-icon,
.contact-pill-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: #667eea;
    flex-shrink: 0;
}

.contact-pill-icon svg,
.contact-pill-arrow svg {
    width: 16px;
    height: 16px;
}

.contact-pill-arrow svg {
    width: 14px;
    height: 14px;
}

/* Right-side widgets: pill sits to the LEFT of the launcher, arrow points RIGHT.
   Same anchor math at every breakpoint — this is what keeps it "beside" the
   launcher on mobile/tablet exactly like desktop. */
.askany-chat-widget.bottom-right .askany-contact-pill,
.askany-chat-widget.top-right .askany-contact-pill {
    padding-right: 8px;
}

.askany-chat-widget.bottom-right .askany-contact-pill {
    bottom: calc(var(--aa-margin) + (var(--aa-launcher-size) / 2) - (var(--aa-pill-height) / 2));
    right: calc(var(--aa-margin) + var(--aa-launcher-size) + var(--aa-gap));
    left: auto;
    top: auto;
}

.askany-chat-widget.top-right .askany-contact-pill {
    top: calc(var(--aa-margin) + (var(--aa-launcher-size) / 2) - (var(--aa-pill-height) / 2));
    right: calc(var(--aa-margin) + var(--aa-launcher-size) + var(--aa-gap));
    left: auto;
    bottom: auto;
}

/* Left-side widgets: pill sits to the RIGHT of the launcher, arrow points LEFT. */
.askany-chat-widget.bottom-left .askany-contact-pill,
.askany-chat-widget.top-left .askany-contact-pill {
    padding-left: 8px;
    flex-direction: row-reverse;
}

.askany-chat-widget.bottom-left .askany-contact-pill {
    bottom: calc(var(--aa-margin) + (var(--aa-launcher-size) / 2) - (var(--aa-pill-height) / 2));
    left: calc(var(--aa-margin) + var(--aa-launcher-size) + var(--aa-gap));
    right: auto;
    top: auto;
}

.askany-chat-widget.top-left .askany-contact-pill {
    top: calc(var(--aa-margin) + (var(--aa-launcher-size) / 2) - (var(--aa-pill-height) / 2));
    left: calc(var(--aa-margin) + var(--aa-launcher-size) + var(--aa-gap));
    right: auto;
    bottom: auto;
}

.askany-chat-widget.bottom-left .askany-contact-pill:hover,
.askany-chat-widget.top-left .askany-contact-pill:hover {
    transform: translateX(2px);
}

.askany-chat-widget.bottom-left .contact-pill-arrow svg,
.askany-chat-widget.top-left .contact-pill-arrow svg {
    transform: scaleX(-1);
}

/* Hide contact pill when chat container is open */
.askany-chat-widget .askany-chat-container[style*="display: block"],
.askany-chat-widget .askany-chat-container[style*="display: flex"] {
    ~ .askany-contact-pill {
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
    }
}

/* Alternative: Hide pill when widget doesn't have display:none on container */
.askany-chat-widget:not(:has(.askany-chat-container[style*="display: none"])) .askany-contact-pill {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

form#askany-chat-form input[type=text], input[type=email], input[type=url], input[type=password], input[type=search], input[type=number], input[type=tel], input[type=range], input[type=date], input[type=month], input[type=week], input[type=time], input[type=datetime], input[type=datetime-local], input[type=color], textarea {
    border: none;
    box-shadow: none;
    outline: unset !important;
}

/* ========================================================================
   NOTE — deliberately removed vs. the original stylesheet:

   1. The ":has(.askany-cta-panel.show) .askany-contact-pill { opacity: 0 }"
      rule at max-width:767px. That's what was making the pill vanish/
      reappear underneath the panel on mobile/tablet — panel and pill now
      anchor to different edges of the launcher (panel above, pill beside)
      so they never overlap and don't need to be hidden from each other.

   2. The max-width:480px block that re-centered the panel and pill to the
      middle/bottom of the screen. That's what caused the "too far from
      the widget" drift you saw — centering ignores the launcher's actual
      position. The anchor formula above already clamps max-width against
      100vw, so it stays close to the launcher and never overflows the
      screen, without needing a separate centered layout.
   ======================================================================== */

@media screen and (max-width: 360px) {
    .cta-bubble-content .cta-title,
    .askany-cta-card .cta-title {
        font-size: 13px;
    }

    .cta-bubble-content .cta-description,
    .askany-cta-card .cta-description {
        font-size: 11px;
    }

    .askany-contact-pill {
        font-size: 13px;
        padding: 8px 14px;
    }
}

/* ========================================================================
   Custom Table Styling for AskAny Chat Messages
   ======================================================================== */
.askany-table-wrapper {
    width: 100%;
    margin: 12px 0;
    overflow-x: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(226, 232, 240, 0.9);
}

.askany-chat-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    text-align: left;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
}

.askany-chat-table th {
    background-color: #f1f5f9;
    color: #1e293b;
    font-weight: 600;
    padding: 9px 12px;
    border-bottom: 2px solid #cbd5e1;
    white-space: nowrap;
}

.askany-chat-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    line-height: 1.45;
}

.askany-chat-table tbody tr:nth-child(even) {
    background-color: #f8fafc;
}

.askany-chat-table tbody tr:hover {
    background-color: #f1f5f9;
}