/**
 * Mediapilote AI Chatbot Client - Frontend Styles
 */

:root {
    --mediapilote-chat-primary: #007bff;
    --mediapilote-chat-primary-dark: #0056b3;
    --mediapilote-chat-bg: #ffffff;
    --mediapilote-chat-border: #e0e0e0;
    --mediapilote-chat-text: #333333;
    --mediapilote-chat-text-light: #666666;
    --mediapilote-chat-user-bg: var(--mediapilote-chat-primary);
    --mediapilote-chat-bot-bg: #f5f5f5;
    --mediapilote-chat-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* Allow customization via CSS variables from PHP */
#mediapilote-chatbot-widget {
    --mediapilote-chat-primary: var(--mpai-primary-color, #007bff);
    --mediapilote-chat-primary-dark: var(--mpai-primary-dark, #0056b3);
    --mediapilote-chat-user-bg: var(--mpai-primary-color, #007bff);
    --mediapilote-chat-btn-text: var(--mpai-text-color, #ffffff);
    /* Police système moderne */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    /* Hidden by default, JS will show after status check */
    display: none;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Chat Button */
.mediapilote-chat-button {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--mediapilote-chat-primary);
    border: none;
    cursor: pointer;
    box-shadow: var(--mediapilote-chat-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, background-color 0.3s ease;
    z-index: 9999999;
}

.mediapilote-chat-button:hover {
    transform: scale(1.1);
    background: var(--mediapilote-chat-primary-dark);
}

.mediapilote-chat-button svg {
    width: 28px;
    height: 28px;
    fill: var(--mediapilote-chat-btn-text, white);
}

.mediapilote-chat-button.active .chat-icon {
    display: none;
}

.mediapilote-chat-button.active .close-icon {
    display: block;
}

.mediapilote-chat-button .close-icon {
    display: none;
}

/* Chat Window */
.mediapilote-chat-window {
    position: fixed;
    bottom: 100px;
    right: 24px;
    width: 380px;
    max-width: calc(100vw - 48px);
    height: 520px;
    max-height: calc(100vh - 150px);
    background: var(--mediapilote-chat-bg);
    border-radius: 16px;
    box-shadow: var(--mediapilote-chat-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 9999998;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.95);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    /* Police système moderne - isolation du thème WP */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

.mediapilote-chat-window.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* Chat Header */
.mediapilote-chat-header {
    background: var(--mediapilote-chat-primary);
    color: var(--mediapilote-chat-btn-text, white);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.mediapilote-chat-header-avatar {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mediapilote-chat-header-avatar svg,
.mediapilote-chat-header-avatar img {
    width: 32px;
    height: 32px;
    fill: var(--mediapilote-chat-primary);
    background: #fff;
    border-radius: 50%;
    padding: 2px;
    object-fit: cover;
}

.mediapilote-chat-header-avatar svg {
    width: 24px;
    height: 24px;
    fill: white;
}

.mediapilote-chat-header-info h4 {
    margin: 0 0 2px 0;
    font-size: 16px;
    font-weight: 600;
}

.mediapilote-chat-header-info p {
    margin: 0;
    font-size: 12px;
    opacity: 0.8;
}

.mediapilote-chat-header-info {
    flex: 1;
}

/* Close Button (in header, mobile only) */
.mediapilote-chat-close {
    display: none; /* Hidden on desktop */
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.mediapilote-chat-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.mediapilote-chat-close svg {
    width: 20px;
    height: 20px;
    fill: white;
}

/* New Conversation Button */
.mediapilote-chat-new {
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.mediapilote-chat-new:hover {
    background: rgba(255, 255, 255, 0.3);
}

.mediapilote-chat-new svg {
    width: 20px;
    height: 20px;
    fill: white;
}

/* Chat Messages */
.mediapilote-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mediapilote-chat-message {
    max-width: 85%;
    animation: messageSlideIn 0.3s ease;
}

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

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

.mediapilote-chat-message.user {
    align-self: flex-end;
}

.mediapilote-chat-message.bot {
    align-self: flex-start;
}

.mediapilote-chat-message-content {
    padding: 12px 16px;
    border-radius: 16px;
    line-height: 1.5;
    font-size: 14px;
}

.mediapilote-chat-message.user .mediapilote-chat-message-content {
    background: var(--mediapilote-chat-user-bg);
    color: var(--mediapilote-chat-btn-text, white);
    border-bottom-right-radius: 4px;
}

.mediapilote-chat-message.bot .mediapilote-chat-message-content {
    background: var(--mediapilote-chat-bot-bg);
    color: var(--mediapilote-chat-text);
    border-bottom-left-radius: 4px;
}

/* Typing cursor effect */
.mediapilote-chat-message-content.typing::after {
    content: '|';
    display: inline;
    animation: blink-cursor 0.8s infinite;
    color: var(--mediapilote-chat-primary);
    font-weight: 300;
    margin-left: 2px;
}

@keyframes blink-cursor {

    0%,
    50% {
        opacity: 1;
    }

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

/* Message Content Styling */
.mediapilote-chat-message-content p {
    margin: 0 0 8px 0;
}

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

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

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

.mediapilote-chat-message-content h3,
.mediapilote-chat-message-content h4 {
    margin: 16px 0 8px 0;
    font-size: 1.1em;
    font-weight: 600;
}

.mediapilote-chat-message-content h3:first-child,
.mediapilote-chat-message-content h4:first-child {
    margin-top: 0;
}

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

.mediapilote-chat-message.user .mediapilote-chat-message-content a {
    color: var(--mediapilote-chat-btn-text, white);
}

/* Custom Button */
#mediapilote-chatbot-widget a.mediapilote-chat-custom-button,
#mediapilote-chatbot-widget .mediapilote-chat-message-content a.mediapilote-chat-custom-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 16px !important;
    background: linear-gradient(135deg, var(--mediapilote-chat-primary) 0%, var(--mediapilote-chat-primary-dark) 100%) !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    margin-top: 10px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
    text-align: center !important;
    box-shadow: 0 10px 22px rgba(79, 70, 229, 0.22) !important;
    border: 0 !important;
}

#mediapilote-chatbot-widget a.mediapilote-chat-custom-button:hover,
#mediapilote-chatbot-widget .mediapilote-chat-message-content a.mediapilote-chat-custom-button:hover {
    text-decoration: none !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    filter: brightness(1.03);
    box-shadow: 0 14px 28px rgba(79, 70, 229, 0.28) !important;
}

#mediapilote-chatbot-widget a.mediapilote-chat-custom-button:active,
#mediapilote-chatbot-widget .mediapilote-chat-message-content a.mediapilote-chat-custom-button:active {
    transform: translateY(1px);
    box-shadow: 0 8px 18px rgba(79, 70, 229, 0.2) !important;
}

#mediapilote-chatbot-widget a.mediapilote-chat-custom-button::after,
#mediapilote-chatbot-widget .mediapilote-chat-message-content a.mediapilote-chat-custom-button::after {
    content: '→';
    font-size: 14px;
    line-height: 1;
}

.mediapilote-chat-inline-cta {
    margin-left: 0;
}

.mediapilote-chat-message-content p > .mediapilote-chat-inline-cta:last-child {
    margin-top: 12px;
}

/* Markdown code */
.mediapilote-chat-message-content code {
    background: rgba(0, 0, 0, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
    font-family: monospace;
}

/* Bot message extras */
.mediapilote-chat-message-extras {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

.mediapilote-chat-rich-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mediapilote-chat-rich-block {
    width: 100%;
}

.mediapilote-chat-message-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* Sources */
.mediapilote-chat-sources {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mediapilote-chat-sources-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.mediapilote-chat-sources-toggle:hover {
    background: rgba(255, 255, 255, 0.94);
    color: #334155;
    border-color: rgba(79, 70, 229, 0.2);
}

.mediapilote-chat-sources-chevron {
    font-size: 11px;
    transition: transform 0.2s ease;
}

.mediapilote-chat-sources.open .mediapilote-chat-sources-chevron {
    transform: rotate(180deg);
}

.mediapilote-chat-sources-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.66);
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.mediapilote-chat-sources-list[hidden] {
    display: none !important;
}

.mediapilote-chat-sources-list a {
    color: #64748b;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.mediapilote-chat-sources-list a:hover {
    color: var(--mediapilote-chat-primary);
    text-decoration: none;
}

.mediapilote-chat-sources-list a svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
    flex-shrink: 0;
}

/* Typing Indicator */
.mediapilote-chat-typing {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--mediapilote-chat-bot-bg);
    border-radius: 16px;
    border-bottom-left-radius: 4px;
    width: fit-content;
}

.mediapilote-chat-typing-dots {
    display: flex;
    gap: 4px;
}

.mediapilote-chat-typing-dot {
    width: 8px;
    height: 8px;
    background: var(--mediapilote-chat-text-light);
    border-radius: 50%;
    animation: typingBounce 1.4s infinite ease-in-out;
}

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

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

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

@keyframes typingBounce {

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

    30% {
        transform: translateY(-6px);
    }
}

/* Chat Input */
.mediapilote-chat-input-container {
    padding: 16px 20px;
    border-top: 1px solid var(--mediapilote-chat-border);
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

.mediapilote-chat-input {
    flex: 1;
    border: 1px solid var(--mediapilote-chat-border);
    border-radius: 24px;
    padding: 12px 20px;
    font-size: 16px;
    outline: none;
    transition: border-color 0.3s ease;
    resize: none;
    max-height: 100px;
    font-family: inherit;
}

.mediapilote-chat-input:focus {
    border-color: var(--mediapilote-chat-primary);
}

.mediapilote-chat-input::placeholder {
    color: var(--mediapilote-chat-text-light);
}

.mediapilote-chat-send {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--mediapilote-chat-primary);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, transform 0.2s ease;
    flex-shrink: 0;
}

.mediapilote-chat-send:hover {
    background: var(--mediapilote-chat-primary-dark);
}

.mediapilote-chat-send:active {
    transform: scale(0.95);
}

.mediapilote-chat-send:disabled {
    background: var(--mediapilote-chat-border);
    cursor: not-allowed;
}

.mediapilote-chat-send svg {
    width: 20px;
    height: 20px;
    fill: white;
}

/* Microphone Button */
.mediapilote-chat-mic {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid var(--mediapilote-chat-border);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.mediapilote-chat-mic svg {
    width: 20px;
    height: 20px;
    fill: var(--mediapilote-chat-text-light);
    transition: fill 0.3s ease;
}

.mediapilote-chat-mic:hover {
    border-color: var(--mediapilote-chat-primary);
}

.mediapilote-chat-mic:hover svg {
    fill: var(--mediapilote-chat-primary);
}

.mediapilote-chat-mic.recording {
    background: #dc3545;
    border-color: #dc3545;
    animation: pulse-recording 1.5s infinite;
}

.mediapilote-chat-mic.recording svg {
    fill: white;
}

.mediapilote-chat-mic.recording .mic-icon {
    display: none;
}

.mediapilote-chat-mic.recording .stop-icon {
    display: block !important;
}

.mediapilote-chat-mic.transcribing {
    background: var(--mediapilote-chat-primary);
    border-color: var(--mediapilote-chat-primary);
    opacity: 0.7;
    pointer-events: none;
}

.mediapilote-chat-mic.transcribing svg {
    fill: white;
    animation: spin 1s linear infinite;
}

@keyframes pulse-recording {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.4);
    }

    50% {
        box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Message Content with Space for Speaker Button */
.mediapilote-chat-message.bot .mediapilote-chat-message-content {
    position: relative;
    padding-bottom: 36px;
    min-width: 60px;
}

/* TTS Speak Button */
.mediapilote-chat-speak {
    position: absolute;
    bottom: 4px;
    right: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--mediapilote-chat-border);
    cursor: pointer;
    margin: 0;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.mediapilote-chat-speak svg {
    width: 14px;
    height: 14px;
    fill: var(--mediapilote-chat-text-light);
    transition: fill 0.2s ease;
}

.mediapilote-chat-speak:hover {
    border-color: var(--mediapilote-chat-primary);
    background: rgba(0, 123, 255, 0.1);
}

.mediapilote-chat-speak:hover svg {
    fill: var(--mediapilote-chat-primary);
}

.mediapilote-chat-speak.playing {
    background: var(--mediapilote-chat-primary);
    border-color: var(--mediapilote-chat-primary);
}

.mediapilote-chat-speak.playing svg {
    fill: white;
}

.mediapilote-chat-speak.loading {
    opacity: 0.6;
    pointer-events: none;
}

.mediapilote-chat-speak.loading svg {
    animation: spin 1s linear infinite;
}

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

    .mediapilote-chat-button {
        bottom: 16px;
        right: 16px;
    }

    /* Hide floating button when chat is open on mobile */
    .mediapilote-chat-button.active {
        display: none !important;
    }

    .mediapilote-chat-header {
        padding: 20px;
    }

    /* Show close button in header on mobile */
    .mediapilote-chat-close {
        display: flex;
    }
}

/* Scrollbar styling */
.mediapilote-chat-messages::-webkit-scrollbar {
    width: 6px;
}

.mediapilote-chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

.mediapilote-chat-messages::-webkit-scrollbar-thumb {
    background: var(--mediapilote-chat-border);
    border-radius: 3px;
}

.mediapilote-chat-messages::-webkit-scrollbar-thumb:hover {
    background: var(--mediapilote-chat-text-light);
}

/* Rating Buttons */
.mediapilote-chat-rating {
    display: flex;
    gap: 4px;
    margin-top: 6px;
}

.mediapilote-chat-rate {
    background: transparent;
    border: 1px solid var(--mediapilote-chat-border);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    opacity: 0.5;
    padding: 0;
    line-height: 1;
}

.mediapilote-chat-rate:hover {
    opacity: 1;
    transform: scale(1.1);
}

.mediapilote-chat-rate.selected {
    opacity: 1;
    border-color: var(--mediapilote-chat-primary);
    background: rgba(0, 123, 255, 0.1);
}

.mediapilote-chat-rate.selected[data-rating="up"] {
    border-color: #10B981;
    background: rgba(16, 185, 129, 0.1);
}

.mediapilote-chat-rate.selected[data-rating="down"] {
    border-color: #EF4444;
    background: rgba(239, 68, 68, 0.1);
}

/* Conversation Rating Banner */
.mediapilote-chat-conv-rating {
    text-align: center;
    padding: 12px;
    border-top: 1px solid var(--mediapilote-chat-border);
    background: var(--mediapilote-chat-bot-bg);
    border-radius: 12px;
    margin-top: 8px;
}

/* ==========================================================================
   PrestaShop Theme Override
   Increases specificity to prevent PS theme from overriding chatbot styles.
   PS themes apply global styles on p, h4, ul, a, button etc. that leak
   into the widget. We reset everything with !important here.
   ========================================================================== */

/* Reset all base HTML elements inside widget */
#mediapilote-chatbot-widget * {
    box-sizing: border-box;
}
#mediapilote-chatbot-widget p,
#mediapilote-chatbot-widget h3,
#mediapilote-chatbot-widget h4,
#mediapilote-chatbot-widget ul,
#mediapilote-chatbot-widget ol,
#mediapilote-chatbot-widget li,
#mediapilote-chatbot-widget a,
#mediapilote-chatbot-widget span {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
}
#mediapilote-chatbot-widget ul,
#mediapilote-chatbot-widget ol {
    padding-left: 20px !important;
    margin: 8px 0 !important;
}
#mediapilote-chatbot-widget li {
    margin: 2px 0 !important;
}
#mediapilote-chatbot-widget a {
    text-decoration: underline !important;
}

/* Header */
#mediapilote-chatbot-widget .mediapilote-chat-header {
    color: var(--mediapilote-chat-btn-text, white) !important;
}
#mediapilote-chatbot-widget .mediapilote-chat-header-info h4 {
    font-size: 16px !important;
    font-weight: 600 !important;
    margin: 0 0 2px 0 !important;
}
#mediapilote-chatbot-widget .mediapilote-chat-header-info p {
    font-size: 12px !important;
    font-weight: 400 !important;
    opacity: 0.8;
}

/* Buttons */
#mediapilote-chatbot-widget .mediapilote-chat-button {
    color: var(--mediapilote-chat-btn-text, white) !important;
    background: var(--mediapilote-chat-primary) !important;
}
#mediapilote-chatbot-widget .mediapilote-chat-send {
    color: var(--mediapilote-chat-btn-text, white) !important;
    background: var(--mediapilote-chat-primary) !important;
}

/* Input */
#mediapilote-chatbot-widget .mediapilote-chat-input {
    color: #333 !important;
    background: #fff !important;
    font-size: 16px !important;
    -webkit-text-size-adjust: 100% !important;
}

/* Chat window */
#mediapilote-chatbot-widget .mediapilote-chat-window {
    background: var(--mediapilote-chat-bg, #ffffff) !important;
}

/* User messages — white text on primary bg */
#mediapilote-chatbot-widget .mediapilote-chat-message.user .mediapilote-chat-message-content {
    color: var(--mediapilote-chat-btn-text, white) !important;
    background: var(--mediapilote-chat-user-bg) !important;
}
#mediapilote-chatbot-widget .mediapilote-chat-message.user .mediapilote-chat-message-content p,
#mediapilote-chatbot-widget .mediapilote-chat-message.user .mediapilote-chat-message-content span,
#mediapilote-chatbot-widget .mediapilote-chat-message.user .mediapilote-chat-message-content a {
    color: var(--mediapilote-chat-btn-text, white) !important;
}

/* Bot messages — dark text on light bg */
#mediapilote-chatbot-widget .mediapilote-chat-message.bot .mediapilote-chat-message-content {
    color: #333 !important;
    background: var(--mediapilote-chat-bot-bg, #f5f5f5) !important;
}
#mediapilote-chatbot-widget .mediapilote-chat-message.bot .mediapilote-chat-message-content p,
#mediapilote-chatbot-widget .mediapilote-chat-message.bot .mediapilote-chat-message-content span {
    color: #333 !important;
}
#mediapilote-chatbot-widget .mediapilote-chat-message.bot .mediapilote-chat-message-content strong {
    color: #111 !important;
    font-weight: 700 !important;
}

/* Message content spacing */
#mediapilote-chatbot-widget .mediapilote-chat-message-content p {
    margin: 0 0 8px 0 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}
#mediapilote-chatbot-widget .mediapilote-chat-message-content p:last-child {
    margin-bottom: 0 !important;
}

/* Ratings */
#mediapilote-chatbot-widget .mediapilote-chat-rating {
    display: flex !important;
    gap: 4px !important;
    margin-top: 6px !important;
}

/* ============ PRODUCT CARDS ============ */

.mpai-product-carousel {
    display: flex;
    /* `stretch` is the flex default, but customer themes occasionally
       override it via cascading rules — make it explicit so every card in
       the row ends up the same height regardless of internal content. */
    align-items: stretch;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 0;
    scroll-snap-type: x mandatory;
}

.mpai-product-card {
    /* Flex column so we can pin the CTA button to the bottom and let the
       name section grow into the gap. Without this, cards with shorter
       names (or no combinations dropdown) collapse and the button sits
       at a different vertical position than its neighbours. */
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    min-width: 200px;
    max-width: 260px;
    scroll-snap-align: start;
}

.mpai-product-image {
    /* `!important` defends against host-theme rules like `img { height: auto }`
       (Elementor, Astra, OceanWP and similar all ship with this). aspect-ratio
       fixes the image box at a predictable square regardless of the source
       photo's dimensions; `contain` keeps the whole product visible even when
       photos have radically different proportions (a tall feeder vs a long
       beam). The flat background fills the letterbox padding so the card
       still reads as a single coherent surface. */
    display: block !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    background: #f3f4f6;
}

.mpai-product-info {
    /* Fill remaining vertical space so flex `margin-top: auto` on the CTA
       can push it to the bottom of the card. */
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 10px;
}

.mpai-product-name {
    /* Reserve exactly two lines for every card. Short names (one word) get
       a phantom second line of whitespace so cards line up regardless of
       label length. -webkit-line-clamp truncates anything beyond two lines
       with an ellipsis. */
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
    margin-bottom: 4px;
    color: #111;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.3em * 2);
}

.mpai-product-price {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #111;
}

.mpai-price-old {
    text-decoration: line-through;
    color: #999;
    font-weight: 400;
    font-size: 13px;
}

.mpai-price-new {
    color: #dc2626;
}

.mpai-price-discount {
    background: #dc2626;
    color: #fff;
    font-size: 11px;
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 600;
}

.mpai-combo-select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 8px;
    background: #fff;
}

.mpai-combo-select.mpai-flash {
    border-color: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2);
}

.mpai-add-to-cart-btn {
    /* margin-top: auto pushes the CTA to the bottom of the flex column so
       cards stay visually aligned even when one has a combinations select
       and another doesn't. */
    margin-top: auto;
    width: 100%;
    padding: 8px 12px;
    background: var(--mpai-primary-color, #4F46E5);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.mpai-add-to-cart-btn:hover {
    background: var(--mpai-primary-dark, #4338CA);
}

/* ============ CART CARD ============ */

.mpai-cart-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px;
    max-width: 320px;
}

.mpai-cart-empty {
    text-align: center;
    color: #6b7280;
    padding: 20px;
}

.mpai-cart-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid #f3f4f6;
}

.mpai-cart-item:last-child {
    border-bottom: none;
}

.mpai-cart-item-image {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
}

.mpai-cart-item-info {
    flex: 1;
    min-width: 0;
}

.mpai-cart-item-name {
    font-size: 13px;
    font-weight: 500;
    color: #111;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mpai-cart-item-qty {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.mpai-qty-btn {
    width: 22px;
    height: 22px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #374151;
}

.mpai-qty-btn:hover {
    background: #f3f4f6;
}

.mpai-cart-item-price {
    font-size: 13px;
    font-weight: 600;
    color: #111;
}

.mpai-cart-item-remove {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    font-size: 14px;
    padding: 4px;
}

.mpai-cart-item-remove:hover {
    color: #dc2626;
}

.mpai-cart-discount {
    font-size: 13px;
    color: #059669;
    padding: 4px 0;
}

.mpai-cart-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0 8px;
    border-top: 2px solid #e5e7eb;
    margin-top: 8px;
    font-size: 15px;
}

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

.mpai-checkout-btn {
    flex: 1;
    padding: 10px;
    background: var(--mpai-primary-color, #4F46E5);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.mpai-checkout-btn:hover {
    background: var(--mpai-primary-dark, #4338CA);
}

/* ============ CHECKOUT CARD ============ */

.mpai-checkout-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px;
    max-width: 320px;
}

.mpai-checkout-title {
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 10px;
    color: #111;
}

.mpai-checkout-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    font-size: 13px;
    padding: 10px 0;
    color: #374151;
    border-bottom: 1px solid #eef2f7;
}

.mpai-checkout-item:last-child {
    border-bottom: none;
}

.mpai-checkout-item-main {
    min-width: 0;
    flex: 1;
}

.mpai-checkout-item-name {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: #111827;
}

.mpai-checkout-item-variant {
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
}

.mpai-checkout-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 7px;
}

.mpai-checkout-item-qty {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    background: #eef2ff;
    color: var(--mpai-primary-dark, #4338CA);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.mpai-checkout-item-price {
    flex-shrink: 0;
    padding-top: 1px;
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
}

.mpai-checkout-discount {
    font-size: 13px;
    color: #059669;
    padding: 3px 0;
}

.mpai-checkout-line {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding: 3px 0;
    color: #6b7280;
}

.mpai-checkout-savings {
    color: #059669;
    font-weight: 500;
}

.mpai-checkout-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    padding: 10px 0 12px;
    border-top: 2px solid #e5e7eb;
    margin-top: 6px;
    color: #111;
}

#mediapilote-chatbot-widget .mpai-order-btn,
#mediapilote-chatbot-widget .mediapilote-chat-message-content a.mpai-order-btn {
    display: block;
    width: 100%;
    padding: 12px !important;
    background: var(--mpai-primary-color, #4F46E5) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: background 0.2s;
    margin: 0 !important;
}

#mediapilote-chatbot-widget .mpai-order-btn:hover,
#mediapilote-chatbot-widget .mediapilote-chat-message-content a.mpai-order-btn:hover {
    background: var(--mpai-primary-dark, #4338CA) !important;
    text-decoration: none !important;
    color: #fff !important;
}