:root {
    --primary-color: #6366f1;
    --primary-hover: #4f46e5;
    --bg-color: #f3f4f6;
    --chat-bg: #ffffff;
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --message-user-bg: #6366f1;
    --message-user-text: #ffffff;
    --message-bot-bg: #f3f4f6;
    --message-bot-text: #1f2937;
    --message-admin-bg: #f3ece7;
    --message-admin-text: #4a3f35;
    --message-admin-label: #8a7b6a;
    --border-color: #e5e7eb;
    --shadow-color: rgba(0, 0, 0, 0.1);
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #e5e5e5;
    /* Contrast background to show the widget clearly */
    overflow: hidden;
    /* Prevent body scroll if the widget needs to be fixed */
}

.chatbot-container {
    /* Position is handled by .main-layout flex now */
    width: 375px;
    height: 550px;
    max-height: calc(100vh - 40px);
    background-color: var(--chat-bg);
    border-radius: 20px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1000;
    border: 1px solid var(--border-color);
}

/* For when it's NOT in the fixed window (optional but good for iframe) */
body.embedded {
    background-color: transparent;
}

/* Main Overlay Layout */
.main-layout {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 100000;
    /* High z-index to sit on top */
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 20px;
    gap: 20px;
    pointer-events: none;
    /* CLICK-THROUGH: vital for overlay */
}

/* Children pointer events */
.main-layout>* {
    pointer-events: auto;
    /* Re-enable clicks for the actual content */
    position: relative;
    /* No longer fixed */
    margin: 0 !important;
    /* Reset margins */
    bottom: auto !important;
    right: auto !important;
    flex-shrink: 0;
    /* Prevent squishing */
}

/* Specific embedded overrides only needed for background transparency */
body.embedded {
    background-color: transparent;
}

body.embedded .main-layout {
    /* Ensure padding matches what we want in iframe */
    padding: 0;
    /* Widget.js handles the iframe padding/sizing now */
    width: 100%;
    height: 100%;
}


/* Header */
.chat-header {
    padding: 16px 20px;
    background-color: var(--chat-bg);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

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

.avatar {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 14px;
}

.status-container h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.status {
    font-size: 12px;
    color: #10b981;
    display: flex;
    align-items: center;
    gap: 4px;
}

.status::before {
    content: '';
    width: 6px;
    height: 6px;
    background-color: #10b981;
    border-radius: 50%;
    display: inline-block;
}

.close-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.close-btn:hover {
    background-color: #f3f4f6;
    color: var(--text-primary);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.delete-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.delete-btn:hover {
    background-color: #fee2e2;
    color: #ef4444;
}

/* Messages Area */
.chat-messages {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    scroll-behavior: smooth;
    background-color: #ffffff;
}

.message {
    max-width: 80%;
    padding: 12px 16px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
    animation: fadeIn 0.3s ease;
}

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

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

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

.user-message {
    background-color: var(--message-user-bg);
    color: var(--message-user-text);
    border-bottom-right-radius: 4px;
    align-self: flex-end;
}

.admin-message {
    background-color: var(--message-admin-bg);
    color: var(--message-admin-text);
    border-bottom-left-radius: 4px;
    align-self: flex-start;
}

.admin-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 4px;
    color: var(--message-admin-label);
    letter-spacing: 0.05em;
    opacity: 0.9;
}

/* Markdown Styles */
.message p {
    margin: 0 0 8px 0;
}

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

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

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

.message code {
    background-color: rgba(0, 0, 0, 0.05);
    padding: 2px 4px;
    border-radius: 4px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
}

.bot-message code {
    background-color: rgba(0, 0, 0, 0.05);
}

.user-message code {
    background-color: rgba(255, 255, 255, 0.2);
}

.message pre {
    background-color: rgba(0, 0, 0, 0.05);
    padding: 12px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 8px 0;
}

.user-message pre {
    background-color: rgba(255, 255, 255, 0.1);
}

.message pre code {
    background-color: transparent;
    padding: 0;
    display: block;
}

.message h1,
.message h2,
.message h3,
.message h4 {
    margin: 12px 0 8px 0;
    line-height: 1.2;
}

.message blockquote {
    border-left: 3px solid var(--border-color);
    margin: 8px 0;
    padding-left: 12px;
    color: var(--text-secondary);
}

/* Input Area */
.chat-input-area {
    padding: 16px 20px;
    background-color: var(--chat-bg);
    border-top: 1px solid var(--border-color);
}

.quick-followups {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 12px;
    /* Hide scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.quick-followups::-webkit-scrollbar {
    display: none;
}

.followup-chip {
    padding: 6px 12px;
    background-color: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    user-select: none;
}

.followup-chip:hover {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.input-wrapper {
    display: flex;
    gap: 8px;
    position: relative;
}

#user-input {
    flex: 1;
    padding: 12px 16px;
    padding-right: 48px;
    border: 1px solid var(--border-color);
    border-radius: 24px;
    font-family: inherit;
    font-size: 14px;
    background-color: #f9fafb;
    transition: all 0.2s;
    outline: none;
}

#user-input:focus {
    background-color: white;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

#send-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

#send-btn:hover {
    background-color: var(--primary-hover);
    transform: translateY(-50%) scale(1.05);
}

#send-btn:active {
    transform: translateY(-50%) scale(0.95);
}

/* Loading Dots */
.typing-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 16px;
    background-color: var(--message-bot-bg);
    border-radius: 16px;
    border-bottom-left-radius: 4px;
    align-self: flex-start;
    width: fit-content;
}

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

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

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

@keyframes bounce {

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

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

/* Artifacts */
.artifact-container {
    align-self: flex-start;
    max-width: 90%;
    margin-top: 8px;
    animation: fadeIn 0.3s ease;
}

.premium-calculator-card {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    width: 100%;
}

.premium-calculator-card h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.calculator-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.input-group label {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.input-group input,
.input-group select {
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}

.input-group input:focus,
.input-group select:focus {
    border-color: var(--primary-color);
}

.results-area {
    background-color: #f9fafb;
    border-radius: 8px;
    padding: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.result-item {
    display: flex;
    flex-direction: column;
}

.result-label {
    font-size: 10px;
    color: var(--text-secondary);
}

.result-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
}

/* Product Details Artifact */
.product-body {
    padding: 20px;
    overflow-y: auto;
    font-size: 13px;
    height: 100%;
}

.product-description {
    color: var(--text-secondary);
    margin-top: 0;
    margin-bottom: 16px;
    line-height: 1.5;
}

.product-section {
    margin-bottom: 20px;
}

.product-section:last-child {
    margin-bottom: 0;
}

.product-section h5 {
    margin: 0 0 8px 0;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 600;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 4px;
}

.features-table {
    width: 100%;
    border-collapse: collapse;
}

.features-table td {
    padding: 6px 0;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: top;
}

.features-table tr:last-child td {
    border-bottom: none;
}

.features-table td:first-child {
    color: var(--text-secondary);
    width: 50%;
    font-weight: 500;
}

.features-table td:last-child {
    color: var(--text-primary);
    text-align: right;
    font-weight: 600;
}

.benefit-block {
    margin-top: 12px;
    background: #f9fafb;
    padding: 10px;
    border-radius: 8px;
}

.benefit-block h6 {
    margin: 0 0 6px 0;
    font-size: 12px;
    color: var(--primary-color);
}

.benefit-block ul {
    margin: 0;
    padding-left: 18px;
}

.benefit-block li {
    margin-bottom: 4px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.riders-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rider-tag {
    background: #eff6ff;
    color: var(--primary-color);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid #dbeafe;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.rider-tag:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(99, 102, 241, 0.2);
}

.rider-tag:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(99, 102, 241, 0.2);
}


/* Feature text (non-table features) */
.feature-text {
    color: var(--text-secondary);
    margin: 8px 0;
    line-height: 1.5;
    padding: 8px 0;
    border-bottom: 1px solid #f3f4f6;
}

.feature-text:last-child {
    border-bottom: none;
}

/* Collapsible benefit items */
.collapsible-item {
    list-style: none;
    margin-left: -18px;
    margin-bottom: 8px;
}

.collapsible-title {
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px;
    border-radius: 6px;
    transition: background-color 0.2s;
    user-select: none;
}

.collapsible-title:hover {
    background-color: rgba(99, 102, 241, 0.05);
}

.toggle-icon {
    color: var(--primary-color);
    font-size: 10px;
    line-height: 1.4;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.collapsible-detail {
    margin-top: 8px;
    margin-left: 26px;
    padding: 10px;
    background-color: white;
    border-left: 2px solid var(--primary-color);
    border-radius: 4px;
    color: var(--text-secondary);
    line-height: 1.5;
    white-space: pre-line;
}


/* External Artifact Container */
.external-artifact-container {
    /* Position handled by main-layout flex */
    width: 375px;
    height: 550px;
    max-height: calc(100vh - 40px);
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    z-index: 100001;

    /* Visibility handling - Use display none/flex for flow */
    display: none;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.external-artifact-container.visible {
    display: flex;
    animation: slideInLeft 0.3s ease;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

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

.external-artifact-header {
    padding: 16px 20px;
    background-color: var(--bg-color);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.external-artifact-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
}

/* Product Selector Title */
.product-selector-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 4px 8px;
    margin-left: -8px;
    border-radius: 6px;
    transition: background-color 0.2s;
    position: relative;
    user-select: none;
}

.product-selector-title:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.dropdown-icon {
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    transition: transform 0.3s ease;
}

.product-selector-title.active .dropdown-icon {
    transform: rotate(180deg);
}

.product-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    min-width: 220px;
    z-index: 100002;
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.product-dropdown-menu.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.dropdown-item {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
}

.dropdown-item:hover {
    background-color: #f3f4f6;
    color: var(--primary-color);
}

.dropdown-item.active {
    background-color: #eff6ff;
    color: var(--primary-color);
    font-weight: 600;
}

.external-close-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.external-close-btn:hover {
    background-color: #f3f4f6;
    color: var(--text-primary);
}

.external-artifact-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

/* Hide external container when embedded in iframe - DISABLED, we want it now */
/* body.embedded .external-artifact-container {
    display: none;
} */

/* Responsive adjustments */
@media (max-width: 768px) {
    .main-layout {
        padding: 10px;
    }

    .chatbot-container,
    .external-artifact-container {
        width: 100%;
        max-width: none;
    }

    /* On mobile, artifact overlays chatbot */
    .external-artifact-container.visible {
        position: absolute;
        bottom: 10px;
        left: 10px;
        right: 10px;
        height: calc(100% - 20px);
        z-index: 20;
        margin: 0;
    }
}

/* 
   CRITICAL OVERRIDES FOR EMBEDDED MODE 
   The iframe width starts small (e.g. 450px), which triggers the mobile media query above.
   We must force 'desktop' behavior for the embedded widget unless the ACTUAL device is mobile 
   (which we can't easily detect via CSS alone without viewport units, looking into widget.js).
   For now, we enforce the fixed width layout which is what we want for the widget on desktop screens.
*/
body.embedded .main-layout {
    padding: 20px !important;
    /* Restore desktop padding */
    align-items: flex-end !important;
}

body.embedded .chatbot-container {
    width: 375px !important;
    /* Force fixed width */
    max-width: calc(100vw - 40px) !important;
    /* Safety constraint */
}

body.embedded .external-artifact-container {
    /* Restore flex flow, disable absolute positioning from mobile query */
    position: relative !important;
    width: 375px !important;
    height: 550px !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    margin: 0 !important;
    z-index: auto !important;
}

/* Show Products Artifact */
.products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 8px;
}

.product-box {
    background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.product-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(129, 140, 248, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.product-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(99, 102, 241, 0.15);
    border-color: var(--primary-color);
}

.product-box:hover::before {
    opacity: 1;
}

.product-box:active {
    transform: translateY(-2px);
}

.product-box-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.product-icon {
    font-size: 32px;
    line-height: 1;
    margin-bottom: 4px;
    filter: grayscale(0.3);
    transition: all 0.3s ease;
}

.product-box:hover .product-icon {
    filter: grayscale(0);
    transform: scale(1.1);
}

.product-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    transition: color 0.3s ease;
}

.product-box:hover .product-name {
    color: var(--primary-color);
}

input:invalid {
    border-color: red;
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
    /* Optional: change background color as well */
    /* background-color: #ffe5e5; */
}