/* ==========================================================================
   Chatbot FAQ — Widget frontend
   ========================================================================== */

/* ==========================================================================
   Design Tokens
   Le PHP injecte sur #chatboxContainer :
   --faq-brand, --faq-brand-2, --faq-bot-bubble, --faq-bot-text,
   --faq-user-bubble, --faq-user-text, --faq-launcher-icon
   ========================================================================== */
#chatboxContainer {
    isolation: isolate;
    max-width: 100vw;
    --faq-control-height: 44px;
    --faq-color: var(--faq-brand, #6A82FB);
    --faq-color-secondary: var(--faq-brand-2, var(--faq-color-600));

    --faq-color-50: color-mix(in oklab, var(--faq-color) 8%, #ffffff);
    --faq-color-100: color-mix(in oklab, var(--faq-color) 16%, #ffffff);
    --faq-color-200: color-mix(in oklab, var(--faq-color) 30%, #ffffff);
    --faq-color-300: color-mix(in oklab, var(--faq-color) 50%, #ffffff);
    --faq-color-400: color-mix(in oklab, var(--faq-color) 75%, #ffffff);
    --faq-color-500: var(--faq-color);
    --faq-color-600: color-mix(in oklab, var(--faq-color) 82%, #0b1220);
    --faq-color-700: color-mix(in oklab, var(--faq-color) 68%, #0b1220);
    --faq-color-800: color-mix(in oklab, var(--faq-color) 55%, #0b1220);
    --faq-color-900: color-mix(in oklab, var(--faq-color) 42%, #0b1220);
    --faq-color-dark: var(--faq-color-600);
    --faq-color-soft: var(--faq-color-50);

    --faq-ring: 0 0 0 3px color-mix(in oklab, var(--faq-color) 32%, transparent);
    --faq-ring-glow: 0 5px 14px color-mix(in oklab, var(--faq-color) 28%, transparent),
        0 14px 30px rgba(15, 23, 42, .18);

    --faq-text: #1e293b;
    --faq-text-strong: #0b1220;
    --faq-muted: #64748b;
    --faq-muted-soft: #94a3b8;
    --faq-border: color-mix(in oklab, var(--faq-color) 10%, #e2e8f0);
    --faq-border-strong: color-mix(in oklab, var(--faq-color) 18%, #cbd5e1);
    --faq-surface: #ffffff;
    --faq-soft: color-mix(in oklab, var(--faq-color) 4%, #f8fafc);
    --faq-soft-2: color-mix(in oklab, var(--faq-color) 6%, #fbfcfe);

    --bot-bubble-color: var(--faq-bot-bubble, #ffffff);
    --bot-text-color: var(--faq-bot-text, #0f172a);
    --user-bubble-color: var(--faq-user-bubble, var(--faq-color));
    --user-text-color: var(--faq-user-text, #ffffff);

    --faq-launcher-icon-color: var(--faq-launcher-icon, #ffffff);
    --faq-font-family-default: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --faq-font-size-default: 14px;

    --faq-success: #10b981;
    --faq-success-soft: #d1fae5;
    --faq-success-dark: #047857;
    --faq-warning: #f59e0b;
    --faq-warning-soft: #fef3c7;
    --faq-warning-dark: #92400e;
    --faq-danger: #ef4444;
    --faq-danger-soft: #fee2e2;
    --faq-danger-dark: #b91c1c;

    --faq-radius-lg: 24px;
    --faq-radius-md: 18px;
    --faq-radius-sm: 12px;
    --faq-radius-xs: 8px;
    --faq-radius-full: 999px;

    --faq-shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);
    --faq-shadow-sm: 0 1px 3px rgba(15, 23, 42, .06),
        0 1px 2px rgba(15, 23, 42, .04);
    --faq-shadow-md: 0 4px 12px rgba(15, 23, 42, .07),
        0 2px 4px rgba(15, 23, 42, .04);
    --faq-shadow-lg: 0 12px 32px rgba(15, 23, 42, .10),
        0 4px 12px rgba(15, 23, 42, .06);
    --faq-shadow-xl: 0 24px 60px rgba(15, 23, 42, .18),
        0 8px 24px rgba(15, 23, 42, .10);

    --faq-ease: cubic-bezier(.22, 1, .36, 1);
    --faq-ease-out: cubic-bezier(.16, 1, .3, 1);
    --faq-ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
    --faq-dur-fast: .15s;
    --faq-dur: .25s;
    --faq-dur-slow: .4s;

    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 999999;
    font-family: var(--faq-font-family, var(--faq-font-family-default));
    font-size: var(--faq-font-size, var(--faq-font-size-default));
    line-height: 1.55;
    color: var(--faq-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.my-faq-chatbot-live-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    color: var(--faq-muted);
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

.my-faq-chatbot-live-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #94a3b8;
}

.my-faq-chatbot-live-status.is-online .my-faq-chatbot-live-status-dot {
    background: #22c55e;
}

.my-faq-chatbot-live-status.is-offline .my-faq-chatbot-live-status-label {
    color: var(--faq-muted-soft);
}

.my-faq-chatbot-human-btn {
    position: relative;
}

.my-faq-chatbot-human-status-dot {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 7px;
    height: 7px;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .18);
}

.my-faq-chatbot-human-status-dot.is-online {
    background: #22c55e;
}

.my-faq-chatbot-human-status-dot.is-offline {
    background: #ef4444;
}

#chatboxContainer[data-reduce-motion="1"] *,
#chatboxContainer[data-reduce-motion="1"] *::before,
#chatboxContainer[data-reduce-motion="1"] *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
}

@supports not (color: color-mix(in oklab, red, blue)) {
    #chatboxContainer {
        --faq-color-50: #f5f7ff;
        --faq-color-100: #e8ecff;
        --faq-color-200: #cdd6ff;
        --faq-color-300: #a3b1ff;
        --faq-color-400: #7d8cff;
        --faq-color-600: #3a52d6;
        --faq-color-700: #2c3eb0;
        --faq-color-800: #1f2b80;
        --faq-color-900: #141a4d;
        --faq-ring: 0 0 0 3px rgba(106, 130, 251, .28);
        --faq-border: #e7eaf1;
        --faq-border-strong: #dce2ec;
        --faq-soft: #f7f8fc;
        --faq-soft-2: #fbfcfe;
    }
}

/* ==========================================================================
   Reset scopé
   ========================================================================== */
#chatboxContainer *,
#chatboxContainer *::before,
#chatboxContainer *::after {
    box-sizing: border-box;
}

#chatboxContainer button,
#chatboxContainer input,
#chatboxContainer textarea {
    font: inherit;
    color: inherit;
}

#chatboxContainer button:focus-visible,
#chatboxContainer input:focus-visible,
#chatboxContainer textarea:focus-visible,
#chatboxContainer a:focus-visible {
    outline: 2px solid var(--faq-color);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ==========================================================================
   Launcher flottant
   ========================================================================== */
.my-faq-chatbot-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    padding: 0;
    color: var(--faq-launcher-icon-color);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    background: linear-gradient(145deg,
            var(--faq-color) 0%,
            var(--faq-color-secondary) 100%);
    box-shadow: var(--faq-ring-glow);
    transition:
        transform var(--faq-dur-slow) var(--faq-ease-bounce),
        box-shadow var(--faq-dur) var(--faq-ease),
        filter var(--faq-dur) var(--faq-ease);
    will-change: transform;
}

.my-faq-chatbot-toggle::before {
    content: "";
    position: absolute;
    inset: -2px;
    border: 1px solid color-mix(in oklab, var(--faq-launcher-icon-color) 45%, transparent);
    border-radius: inherit;
    opacity: .65;
    pointer-events: none;
}

.my-faq-chatbot-toggle::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: inherit;
    z-index: -1;
    animation: faq-launcher-halo 3s ease-out infinite;
}

.my-faq-chatbot-toggle:hover {
    transform: translateY(-3px) scale(1.05);
    filter: brightness(1.06);
    box-shadow:
        0 7px 20px color-mix(in oklab, var(--faq-color) 32%, transparent),
        0 20px 42px rgba(15, 23, 42, .22);
}

.my-faq-chatbot-toggle:active {
    transform: scale(.96);
}

#chatboxContainer.show .my-faq-chatbot-toggle {
    opacity: 0;
    transform: scale(.4);
    pointer-events: none;
}

.my-faq-chatbot-toggle-icon {
    position: relative;
    z-index: 1;
    display: block;
    width: 30px;
    height: 30px;
    color: #fff !important;
    filter: drop-shadow(0 1px 2px rgba(15, 23, 42, .22));
}

.my-faq-chatbot-toggle-icon path {
    fill: #fff !important;
}

@keyframes faq-launcher-halo {
    0% {
        transform: scale(1);
        opacity: .28;
    }

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

#chatboxContainer.has-notification .my-faq-chatbot-toggle {
    animation: faq-launcher-nudge 1.4s ease-in-out infinite;
}

#chatboxContainer.has-notification .my-faq-chatbot-toggle::before {
    border-color: var(--faq-danger);
}

.my-faq-chatbot-notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #dc2626;
    box-shadow: 0 2px 8px rgba(127, 29, 29, .45);
    z-index: 3;
}

#chatboxContainer.has-notification .my-faq-chatbot-notification-badge {
    display: inline-flex;
    animation: faq-notification-pulse 1.6s ease-in-out infinite;
}

@keyframes faq-notification-pulse {

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

    50% {
        transform: scale(1.25);
        opacity: .75;
    }
}

@keyframes faq-launcher-nudge {

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

    50% {
        transform: translateY(-3px);
    }
}

/* ==========================================================================
   Fenêtre
   ========================================================================== */
.my-faq-chatbot-window {
    position: absolute;
    right: 0;
    bottom: 74px;
    display: flex;
    flex-direction: column;
    width: 400px;
    height: 600px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 120px);
    overflow: hidden;
    background: var(--faq-surface);
    border: 1px solid var(--faq-border);
    border-radius: var(--faq-radius-lg);
    box-shadow: var(--faq-shadow-xl);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(16px) scale(.94);
    transform-origin: bottom right;
    transition:
        opacity var(--faq-dur-slow) var(--faq-ease),
        transform var(--faq-dur-slow) var(--faq-ease-out),
        visibility var(--faq-dur-slow) var(--faq-ease);
}

#chatboxContainer.show .my-faq-chatbot-window {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

/* ==========================================================================
   En-tête
   ========================================================================== */
.my-faq-chatbot-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 72px;
    padding: 16px 18px;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(135deg,
            var(--faq-color) 0%,
            var(--faq-color-secondary) 100%);
}

.my-faq-chatbot-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 100% 0%, rgba(255, 255, 255, .18), transparent 55%),
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 100% 100%, 22px 22px, 22px 22px;
    pointer-events: none;
}

.my-faq-chatbot-bot-identity {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.my-faq-chatbot-header-avatar {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, .22);
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .85);
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, .18),
        0 4px 12px rgba(15, 23, 42, .25);
    transition: transform var(--faq-dur) var(--faq-ease);
}

.my-faq-chatbot-header-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    pointer-events: none;
    user-select: none;
}

.my-faq-chatbot-header-avatar.is-fallback::before {
    content: "";
    position: absolute;
    inset: 6px;
    background-color: #fff;
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M7 5.5h18a4.5 4.5 0 0 1 4.5 4.5v10a4.5 4.5 0 0 1-4.5 4.5h-7.3l-5.9 3.7a.85.85 0 0 1-1.3-.72V24.5H7A4.5 4.5 0 0 1 2.5 20V10A4.5 4.5 0 0 1 7 5.5Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M7 5.5h18a4.5 4.5 0 0 1 4.5 4.5v10a4.5 4.5 0 0 1-4.5 4.5h-7.3l-5.9 3.7a.85.85 0 0 1-1.3-.72V24.5H7A4.5 4.5 0 0 1 2.5 20V10A4.5 4.5 0 0 1 7 5.5Z'/%3E%3C/svg%3E");
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    pointer-events: none;
}

.my-faq-chatbot-header:hover .my-faq-chatbot-header-avatar {
    transform: scale(1.05);
}

.my-faq-chatbot-bot-name {
    position: relative;
    z-index: 1;
    max-width: 220px;
    margin: 0;
    overflow: hidden;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.my-faq-chatbot-bot-name::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 9px 1px 0;
    border-radius: 50%;
    background: #6ee7b7;
    box-shadow: 0 0 0 4px rgba(110, 231, 183, .16);
    animation: faq-online-pulse 2.4s ease-in-out infinite;
}

@keyframes faq-online-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 4px rgba(110, 231, 183, .16);
    }

    50% {
        box-shadow: 0 0 0 7px rgba(110, 231, 183, .06);
    }
}

.my-faq-chatbot-header-actions {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 7px;
}

.my-faq-chatbot-header-actions button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    color: #fff;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    cursor: pointer;
    transition:
        background var(--faq-dur) var(--faq-ease),
        transform var(--faq-dur) var(--faq-ease),
        opacity var(--faq-dur) var(--faq-ease);
}

.my-faq-chatbot-header-actions button:hover {
    background: rgba(255, 255, 255, .28);
}

.my-faq-chatbot-header-actions button:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.my-faq-chatbot-header-actions button.is-loading .dashicons {
    animation: faq-icon-pulse 1s ease-in-out infinite;
}

@keyframes faq-icon-pulse {

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

    50% {
        opacity: .5;
        transform: scale(.85);
    }
}

.my-faq-chatbot-new-btn.is-spinning .dashicons {
    animation: faq-icon-spin .8s linear infinite;
}

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

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

.my-faq-chatbot-header-actions .dashicons {
    width: 18px;
    height: 18px;
    font-size: 18px;
    line-height: 1;
    color: #fff !important;
}

.my-faq-chatbot-human-btn:hover {
    transform: translateY(-1px);
}

.my-faq-chatbot-new-btn:hover:not(.is-spinning) {
    transform: rotate(-30deg);
}

.my-faq-chatbot-close-btn:hover {
    transform: rotate(90deg);
}

/* ==========================================================================
   Zone des messages
   ========================================================================== */
.my-faq-chatbot-messages {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
    gap: 14px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 20px 16px;
    background: var(--faq-soft);
    scroll-behavior: smooth;
    scrollbar-color: rgba(15, 23, 42, .14) transparent;
    scrollbar-width: thin;
}

.my-faq-chatbot-messages::-webkit-scrollbar {
    width: 6px;
}

.my-faq-chatbot-messages::-webkit-scrollbar-thumb {
    border-radius: var(--faq-radius-full);
    background: rgba(15, 23, 42, .13);
}

/* ==========================================================================
   Bulles de message
   ========================================================================== */
#chatboxContainer .message-bubble {
    display: flex;
    flex-direction: column;
    max-width: 88%;
    margin: 4px 0;
    animation: faq-message-in var(--faq-dur-slow) var(--faq-ease-out);
}

#chatboxContainer .bot-message {
    align-self: flex-start;
}

#chatboxContainer .user-message {
    align-self: flex-end;
}

@keyframes faq-message-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.96);
    }

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

#chatboxContainer .message-body {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
}

#chatboxContainer .user-message .message-body {
    align-items: flex-end;
}

#chatboxContainer .message-content {
    position: relative;
    margin: 0 2px;
    padding: 13px 16px;
    color: var(--bot-text-color, #0f172a);
    border: 1px solid var(--faq-border);
    border-radius: var(--faq-radius-md);
    background: var(--bot-bubble-color, #ffffff);
    box-shadow: var(--faq-shadow-xs);
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    cursor: default;
    transition:
        box-shadow var(--faq-dur) var(--faq-ease),
        transform var(--faq-dur) var(--faq-ease);
}

#chatboxContainer .message-content:hover {
    box-shadow: var(--faq-shadow-md);
}

#chatboxContainer .message-content.is-copied {
    animation: faq-copied-flash .6s var(--faq-ease);
}

@keyframes faq-copied-flash {
    0% {
        box-shadow: 0 0 0 0 color-mix(in oklab, var(--faq-success) 60%, transparent);
    }

    50% {
        box-shadow: 0 0 0 6px color-mix(in oklab, var(--faq-success) 20%, transparent);
    }

    100% {
        box-shadow: var(--faq-shadow-xs);
    }
}

#chatboxContainer .message-content p,
#chatboxContainer .message-content ul,
#chatboxContainer .message-content ol,
#chatboxContainer .message-content blockquote,
#chatboxContainer .message-content h1,
#chatboxContainer .message-content h2,
#chatboxContainer .message-content h3,
#chatboxContainer .message-content h4,
#chatboxContainer .message-content h5,
#chatboxContainer .message-content h6,
#chatboxContainer .message-content pre {
    margin: 0 0 8px;
    white-space: normal;
}

#chatboxContainer .message-content>*:last-child {
    margin-bottom: 0;
}

#chatboxContainer .message-content ul,
#chatboxContainer .message-content ol {
    padding-left: 20px;
}

#chatboxContainer .message-content li {
    margin-bottom: 3px;
}

#chatboxContainer .message-content a {
    color: var(--faq-color);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--faq-dur-fast) var(--faq-ease);
}

#chatboxContainer .message-content a:hover {
    color: var(--faq-color-700);
    text-decoration-thickness: 2px;
}

#chatboxContainer .message-content strong,
#chatboxContainer .message-content b {
    font-weight: 700;
}

#chatboxContainer .message-content code {
    padding: 1px 5px;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: .92em;
    background: rgba(15, 23, 42, .06);
    border-radius: 4px;
}

#chatboxContainer .bot-message .message-content {
    border-bottom-left-radius: 6px;
}

#chatboxContainer .user-message .message-content {
    color: var(--user-text-color, #fff);
    border: 0;
    border-bottom-right-radius: 6px;
    background: linear-gradient(145deg,
            var(--user-bubble-color, var(--faq-color)) 0%,
            color-mix(in oklab, var(--user-bubble-color, var(--faq-color)) 82%, #0b1220) 100%);
    box-shadow: 0 4px 14px color-mix(in oklab, var(--user-bubble-color, var(--faq-color)) 28%, transparent);
}

#chatboxContainer .user-message .message-content:hover {
    box-shadow: 0 6px 20px color-mix(in oklab, var(--user-bubble-color, var(--faq-color)) 36%, transparent);
}

#chatboxContainer .message-time {
    display: block;
    margin: 5px 4px 0;
    color: var(--faq-muted);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Notifications inline
   ========================================================================== */
.my-faq-chatbot-inline-notification {
    align-self: center;
    max-width: 92%;
    padding: 10px 16px;
    border-radius: var(--faq-radius-full);
    font-size: 12.5px;
    line-height: 1.5;
    font-weight: 550;
    text-align: center;
    animation: faq-notif-in var(--faq-dur-slow) var(--faq-ease-out);
    transition:
        opacity var(--faq-dur) var(--faq-ease),
        transform var(--faq-dur) var(--faq-ease);
    word-wrap: break-word;
}

@keyframes faq-notif-in {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(.92);
    }

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

.my-faq-chatbot-inline-notification.is-fading {
    opacity: 0;
    transform: translateY(-6px) scale(.96);
}

.my-faq-chatbot-inline-notification.is-error {
    color: var(--faq-danger-dark);
    background: var(--faq-danger-soft);
    border: 1px solid color-mix(in oklab, var(--faq-danger) 30%, transparent);
}

.my-faq-chatbot-inline-notification.is-warning {
    color: #fff;
    background: #d97706;
    border: 1px solid #b45309;
}

.my-faq-chatbot-inline-notification.is-success {
    color: var(--faq-success-dark);
    background: var(--faq-success-soft);
    border: 1px solid color-mix(in oklab, var(--faq-success) 30%, transparent);
}

.my-faq-chatbot-inline-notification.is-info {
    color: var(--faq-color-800);
    background: var(--faq-color-50);
    border: 1px solid var(--faq-color-100);
}

/* ==========================================================================
   Feedback (👍 / 👎)
   ========================================================================== */
.my-faq-chatbot-feedback {
    display: flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin: 0;
    color: var(--faq-muted);
    font-size: 11px;
    animation: faq-message-in var(--faq-dur) var(--faq-ease-out);
}

.my-faq-chatbot-feedback button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--faq-border);
    border-radius: 50%;
    background: var(--faq-surface);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    opacity: .75;
    transition:
        opacity var(--faq-dur) var(--faq-ease),
        transform var(--faq-dur) var(--faq-ease-bounce),
        box-shadow var(--faq-dur) var(--faq-ease),
        background var(--faq-dur) var(--faq-ease);
}

.my-faq-chatbot-feedback button:hover:not(:disabled) {
    opacity: 1;
    transform: translateY(-2px) scale(1.08);
    box-shadow: var(--faq-shadow-md);
    background: var(--faq-soft-2);
}

.my-faq-chatbot-feedback button:active:not(:disabled) {
    transform: translateY(0) scale(.96);
}

.my-faq-chatbot-feedback button:disabled {
    opacity: .5;
    cursor: wait;
}

.my-faq-chatbot-feedback button .dashicons {
    width: 14px;
    height: 14px;
    font-size: 14px;
    line-height: 14px;
}

.my-faq-chatbot-feedback.is-sent button {
    display: none;
}

.my-faq-chatbot-feedback.is-sent span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--faq-success-dark);
    font-weight: 650;
    animation: faq-feedback-thanks var(--faq-dur-slow) var(--faq-ease-bounce);
}

.my-faq-chatbot-feedback.is-sent span::before {
    content: "✓";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--faq-success-soft);
    color: var(--faq-success-dark);
    font-size: 11px;
    font-weight: 800;
}

@keyframes faq-feedback-thanks {
    from {
        opacity: 0;
        transform: scale(.8);
    }

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

/* ==========================================================================
   Indicateur de saisie
   ========================================================================== */
#chatboxContainer .my-faq-chatbot-typing-indicator .message-content {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 24px;
    padding: 12px 16px;
    color: var(--faq-muted) !important;
    font-style: normal;
    white-space: nowrap;
    cursor: default;
}

#chatboxContainer .my-faq-chatbot-typing-indicator .message-content:hover {
    box-shadow: var(--faq-shadow-xs);
    transform: none;
}

#chatboxContainer .my-faq-chatbot-typing-indicator .message-content span {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: .4;
    animation: faq-typing-bounce 1.4s infinite ease-in-out;
}

#chatboxContainer .my-faq-chatbot-typing-indicator .message-content span:nth-child(2) {
    animation-delay: .18s;
}

#chatboxContainer .my-faq-chatbot-typing-indicator .message-content span:nth-child(3) {
    animation-delay: .36s;
}

#chatboxContainer .my-faq-chatbot-related-questions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 8px 4px 4px;
    padding: 9px 10px;
    border-left: 3px solid var(--faq-color);
    border-radius: 8px;
    background: color-mix(in srgb, var(--faq-color) 7%, var(--faq-surface));
}

#chatboxContainer .my-faq-chatbot-related-label {
    color: var(--faq-muted);
    font-size: 11px;
    font-weight: 700;
}

#chatboxContainer .my-faq-chatbot-related-question {
    width: 100%;
    padding: 6px 8px;
    color: var(--faq-color);
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--faq-color) 30%, var(--faq-border));
    border-radius: 7px;
    font-size: 12px;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}

#chatboxContainer .my-faq-chatbot-related-question:hover,
#chatboxContainer .my-faq-chatbot-related-question:focus-visible {
    color: #fff;
    background: var(--faq-color);
}

#chatboxContainer .my-faq-chatbot-products {
    display: grid;
    gap: 10px;
    margin: 10px 4px 4px;
}

#chatboxContainer .my-faq-chatbot-product-card {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 4px 9px;
    padding: 9px;
    border: 1px solid var(--faq-border);
    border-radius: 10px;
    background: var(--faq-surface);
}

#chatboxContainer .my-faq-chatbot-product-card img {
    grid-row: 1 / span 4;
    width: 58px;
    height: 58px;
    object-fit: cover;
    border-radius: 7px;
}

#chatboxContainer .my-faq-chatbot-product-price {
    color: var(--faq-color);
    font-weight: 700;
}

#chatboxContainer .my-faq-chatbot-product-card small {
    color: var(--faq-muted);
}

#chatboxContainer .my-faq-chatbot-product-actions,
#chatboxContainer .my-faq-chatbot-cart-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

#chatboxContainer .my-faq-chatbot-product-actions a,
#chatboxContainer .my-faq-chatbot-product-actions button,
#chatboxContainer .my-faq-chatbot-cart-summary {
    display: inline-block;
    padding: 5px 8px;
    border: 1px solid var(--faq-color);
    border-radius: 6px;
    color: var(--faq-color);
    background: transparent;
    font-size: 11px;
    text-decoration: none;
    cursor: pointer;
}

#chatboxContainer .my-faq-chatbot-product-actions button {
    background: var(--faq-color);
    color: #fff;
}

#chatboxContainer .my-faq-chatbot-cart-summary {
    margin: 8px 4px 0;
}

@keyframes faq-typing-bounce {

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

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

/* ==========================================================================
   Réponses rapides — slider horizontal
   ========================================================================== */
.my-faq-chatbot-quick-replies {
    position: relative;
    z-index: 2;
    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    min-height: 58px;
    gap: 12px;
    padding: 12px 20px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    background: var(--faq-surface);
    border-top: 1px solid var(--faq-border);
    scrollbar-width: none;
}

.my-faq-chatbot-quick-replies::-webkit-scrollbar {
    display: none;
}

.my-faq-chatbot-quick-replies.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
    user-select: none;
}

.my-faq-chatbot-quick-replies.is-dragging .quick-reply-button {
    cursor: grabbing;
}

.my-faq-chatbot-quick-replies.is-trending::before {
    content: "Questions fréquemment demandées";
    flex: 0 0 auto;
    align-self: center;
    color: var(--faq-muted);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

#chatboxContainer .quick-reply-button {
    scroll-snap-align: start;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 14px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
    color: #fff !important;
    background: var(--faq-color);
    border: 1px solid var(--faq-color);
    border-radius: var(--faq-radius-full);
    cursor: pointer;
    transition:
        background var(--faq-dur) var(--faq-ease),
        color var(--faq-dur) var(--faq-ease),
        border-color var(--faq-dur) var(--faq-ease),
        transform var(--faq-dur) var(--faq-ease-bounce),
        box-shadow var(--faq-dur) var(--faq-ease);
}

#chatboxContainer .quick-reply-button:first-child {
    margin-left: 2px;
}

#chatboxContainer .quick-reply-button:last-child {
    margin-right: 2px;
}

#chatboxContainer .quick-reply-button:hover {
    color: #fff !important;
    background: var(--faq-color);
    border-color: var(--faq-color);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px color-mix(in oklab, var(--faq-color) 32%, transparent);
}

#chatboxContainer .quick-reply-button:active {
    color: #fff !important;
    transform: translateY(0) scale(.97);
}

.my-faq-chatbot-live-controls {
    display: flex;
    justify-content: center;
    padding: 8px 15px 0;
    background: var(--faq-surface);
}

.my-faq-chatbot-live-end-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    color: var(--faq-muted);
    border: 1px solid var(--faq-border);
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition:
        color var(--faq-dur) var(--faq-ease),
        border-color var(--faq-dur) var(--faq-ease),
        background var(--faq-dur) var(--faq-ease);
}

.my-faq-chatbot-live-end-btn:hover:not(:disabled) {
    color: #b42318;
    border-color: #f0a7a0;
    background: #fff5f4;
}

.my-faq-chatbot-live-end-btn:disabled {
    opacity: .55;
    cursor: wait;
}

.my-faq-chatbot-live-end-btn .dashicons {
    width: 15px;
    height: 15px;
    font-size: 15px;
    line-height: 1;
}

/* ==========================================================================
   Zone de saisie
   ========================================================================== */
.my-faq-chatbot-input-area {
    display: flex;
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
    gap: 9px;
    padding: 13px 15px 15px;
    border-top: 1px solid var(--faq-border);
    background: var(--faq-surface);
}

#chatboxContainer #messageInput {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding: 10px 14px;
    color: var(--faq-text);
    border: 1px solid var(--faq-border-strong);
    border-radius: var(--faq-radius-sm);
    outline: 0;
    background: var(--faq-soft-2);
    transition:
        border-color var(--faq-dur) var(--faq-ease),
        box-shadow var(--faq-dur) var(--faq-ease),
        background var(--faq-dur) var(--faq-ease);
}

#chatboxContainer #messageInput::placeholder {
    color: var(--faq-muted-soft);
}

#chatboxContainer #messageInput:hover:not(:disabled) {
    border-color: var(--faq-muted-soft);
}

#chatboxContainer #messageInput:focus {
    border-color: var(--faq-color);
    box-shadow: var(--faq-ring);
    background: var(--faq-surface);
}

#chatboxContainer #messageInput:disabled {
    opacity: .65;
    cursor: not-allowed;
}

#chatboxContainer #sendMessageBtn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: #fff;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(140deg,
            var(--faq-color) 0%,
            var(--faq-color-secondary) 100%);
    box-shadow: 0 4px 12px color-mix(in oklab, var(--faq-color) 30%, transparent);
    cursor: pointer;
    font-weight: 700;
    transition:
        transform var(--faq-dur-fast) var(--faq-ease-bounce),
        filter var(--faq-dur-fast) var(--faq-ease),
        box-shadow var(--faq-dur-fast) var(--faq-ease);
}

#chatboxContainer #sendMessageBtn:hover:not(:disabled) {
    filter: brightness(1.06);
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 8px 20px color-mix(in oklab, var(--faq-color) 40%, transparent);
}

#chatboxContainer #sendMessageBtn:active:not(:disabled) {
    transform: translateY(0) scale(.96);
}

#chatboxContainer #sendMessageBtn:disabled {
    opacity: .5;
    cursor: not-allowed;
    box-shadow: none;
}

#chatboxContainer #sendMessageBtn .my-faq-chatbot-send-icon {
    flex: 0 0 auto;
    display: block;
    width: 19px;
    height: 19px;
    color: #fff;
    fill: #fff;
    transform: translateX(-1px);
    transition: transform var(--faq-dur-fast) var(--faq-ease);
}

#chatboxContainer #sendMessageBtn .my-faq-chatbot-send-icon path {
    fill: #fff;
}

#chatboxContainer #sendMessageBtn:hover:not(:disabled) .my-faq-chatbot-send-icon {
    transform: translateX(0) translateY(-1px) rotate(-6deg);
}

#chatboxContainer #sendMessageBtn .my-faq-chatbot-send-label {
    display: none;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 480px) {
    #chatboxContainer {
        right: 12px;
        bottom: 12px;
    }

    .my-faq-chatbot-toggle {
        width: 54px;
        height: 54px;
    }

    .my-faq-chatbot-toggle-icon {
        width: 26px;
        height: 26px;
    }

    .my-faq-chatbot-window {
        right: -2px;
        bottom: 64px;
        width: calc(100vw - 24px);
        height: calc(100vh - 96px);
        height: calc(100dvh - 96px);
        max-height: none;
        border-radius: 20px;
    }

    .my-faq-chatbot-input-area {
        padding: 10px;
        padding-bottom: max(10px, env(safe-area-inset-bottom));
        gap: 7px;
    }

    #chatboxContainer #messageInput {
        min-width: 0;
        font-size: 16px;
    }

    #chatboxContainer #sendMessageBtn {
        width: 44px;
        height: 44px;
    }

    .my-faq-chatbot-header-actions button {
        width: 32px;
        height: 32px;
    }

    .my-faq-chatbot-header-actions .dashicons {
        width: 16px;
        height: 16px;
        font-size: 16px;
    }

    .my-faq-chatbot-header-avatar {
        width: 34px;
        height: 34px;
        border-width: 1.5px;
    }

    .my-faq-chatbot-bot-name {
        max-width: 170px;
    }

    .my-faq-chatbot-feedback {
        font-size: 10.5px;
    }

    .my-faq-chatbot-inline-notification {
        font-size: 11.5px;
        padding: 8px 12px;
    }
}

@media (max-width: 360px) {
    .my-faq-chatbot-window {
        width: calc(100vw - 16px);
        height: calc(100vh - 80px);
        height: calc(100dvh - 80px);
        border-radius: 16px;
    }

    .my-faq-chatbot-bot-name {
        max-width: 180px;
        font-size: 14px;
    }

    .my-faq-chatbot-messages {
        padding: 15px 10px;
    }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

    #chatboxContainer *,
    #chatboxContainer *::before,
    #chatboxContainer *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    #chatboxContainer.has-notification .my-faq-chatbot-toggle,
    #chatboxContainer.has-notification .my-faq-chatbot-notification-badge,
    .my-faq-chatbot-bot-name::before {
        animation: none !important;
    }
}

/* ==========================================================================
   Dark mode
   ========================================================================== */
@media (prefers-color-scheme: dark) {
    #chatboxContainer {
        --faq-text: #e5e7eb;
        --faq-text-strong: #f1f5f9;
        --faq-muted: #94a3b8;
        --faq-muted-soft: #64748b;
        --faq-border: #293246;
        --faq-border-strong: #354158;
        --faq-surface: #111827;
        --faq-soft: #182131;
        --faq-soft-2: #111827;
        --bot-bubble-color: #1f2937;
        --bot-text-color: #e5e7eb;
        --faq-success-soft: rgba(16, 185, 129, .16);
        --faq-warning-soft: rgba(245, 158, 11, .16);
        --faq-danger-soft: rgba(239, 68, 68, .16);
    }

    .my-faq-chatbot-messages,
    .my-faq-chatbot-quick-replies,
    .my-faq-chatbot-input-area {
        background: var(--faq-soft);
    }

    .my-faq-chatbot-quick-replies,
    .my-faq-chatbot-input-area {
        border-color: var(--faq-border);
    }

    #chatboxContainer .message-content {
        border-color: var(--faq-border);
    }

    #chatboxContainer .message-content code {
        background: rgba(255, 255, 255, .08);
    }

    #chatboxContainer #messageInput {
        color: #e5e7eb;
        border-color: var(--faq-border-strong);
        background: var(--faq-soft-2);
    }

    #chatboxContainer #messageInput:hover:not(:disabled) {
        border-color: #475569;
    }

    #chatboxContainer #messageInput:focus {
        background: #0b1220;
    }

    .my-faq-chatbot-feedback button {
        background: #1f2937;
        border-color: var(--faq-border);
    }

    .my-faq-chatbot-feedback button:hover:not(:disabled) {
        background: #293246;
    }

    .my-faq-chatbot-window {
        box-shadow:
            0 10px 20px rgba(0, 0, 0, .3),
            0 32px 64px rgba(0, 0, 0, .5);
    }

    #chatboxContainer.has-notification .my-faq-chatbot-notification-badge {
        border-color: #111827;
    }

    .my-faq-chatbot-inline-notification.is-error {
        color: #fca5a5;
        border-color: rgba(239, 68, 68, .35);
    }

    .my-faq-chatbot-inline-notification.is-warning {
        color: #fff;
        background: #d97706;
        border-color: #b45309;
    }

    .my-faq-chatbot-inline-notification.is-success {
        color: #6ee7b7;
        border-color: rgba(16, 185, 129, .35);
    }

    .my-faq-chatbot-inline-notification.is-info {
        color: #a5b4fc;
        border-color: rgba(99, 91, 255, .35);
    }

}

/* ==========================================================================
   High contrast mode (Windows)
   ========================================================================== */
@media (prefers-contrast: more) {
    #chatboxContainer {
        --faq-border: #000;
        --faq-border-strong: #000;
    }

    .my-faq-chatbot-toggle,
    .my-faq-chatbot-window,
    #chatboxContainer .message-content,
    #chatboxContainer #sendMessageBtn,
    #chatboxContainer .quick-reply-button {
        border: 2px solid currentColor !important;
    }

    #chatboxContainer #messageInput {
        border: 2px solid currentColor !important;
    }
}

/* ==========================================================================
   Impression
   ========================================================================== */
@media print {
    #chatboxContainer {
        position: static !important;
        max-width: 100% !important;
        box-shadow: none !important;
    }

    .my-faq-chatbot-toggle,
    .my-faq-chatbot-header-actions,
    .my-faq-chatbot-quick-replies,
    .my-faq-chatbot-input-area,
    .my-faq-chatbot-feedback {
        display: none !important;
    }

    .my-faq-chatbot-window {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }

    .my-faq-chatbot-messages {
        overflow: visible !important;
        max-height: none !important;
        background: #fff !important;
    }

    #chatboxContainer .message-content {
        background: #fff !important;
        color: #000 !important;
        border: 1px solid #ccc !important;
        box-shadow: none !important;
    }
}


/* ==========================================================================
   Premium UX layer — finition conviviale et commerce
   ========================================================================== */
#chatboxContainer {
    --faq-premium-glass: color-mix(in srgb, var(--faq-surface) 88%, transparent);
    --faq-premium-line: color-mix(in srgb, var(--faq-color) 14%, var(--faq-border));
    --faq-premium-shadow: 0 28px 70px rgba(15, 23, 42, .22), 0 8px 24px rgba(15, 23, 42, .09);
}

.my-faq-chatbot-window {
    border-color: var(--faq-premium-line);
    box-shadow: var(--faq-premium-shadow);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.my-faq-chatbot-header {
    min-height: 78px;
    padding: 17px 18px;
    background:
        radial-gradient(circle at 88% -20%, rgba(255, 255, 255, .30), transparent 42%),
        linear-gradient(135deg, var(--faq-color) 0%, var(--faq-color-secondary) 100%);
}

.my-faq-chatbot-header::after {
    content: "";
    position: absolute;
    right: -44px;
    bottom: -68px;
    width: 150px;
    height: 150px;
    border: 1px solid rgba(255, 255, 255, .17);
    border-radius: 50%;
    box-shadow: 0 0 0 22px rgba(255, 255, 255, .05), 0 0 0 44px rgba(255, 255, 255, .035);
    pointer-events: none;
}

.my-faq-chatbot-bot-name {
    font-size: 15.5px;
    letter-spacing: -.02em;
}

.my-faq-chatbot-bot-name::before {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .14), 0 0 12px rgba(255, 255, 255, .42);
}

.my-faq-chatbot-header-actions {
    gap: 6px;
}

.my-faq-chatbot-header-actions button {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .12);
    box-shadow: 0 2px 8px rgba(15, 23, 42, .10);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.my-faq-chatbot-header-actions button:hover:not(:disabled) {
    border-color: rgba(255, 255, 255, .5);
    background: rgba(255, 255, 255, .23);
    box-shadow: 0 6px 16px rgba(15, 23, 42, .16);
}

.my-faq-chatbot-messages {
    gap: 16px;
    padding: 22px 17px;
    background:
        radial-gradient(circle at 0 0, color-mix(in srgb, var(--faq-color) 5%, transparent), transparent 42%),
        linear-gradient(180deg, var(--faq-soft) 0%, var(--faq-soft-2) 100%);
}

#chatboxContainer .message-bubble {
    max-width: 90%;
}

#chatboxContainer .message-content {
    padding: 13px 16px;
    border-color: color-mix(in srgb, var(--faq-color) 12%, var(--faq-border));
    box-shadow: 0 3px 10px rgba(15, 23, 42, .045);
}

#chatboxContainer .bot-message .message-content {
    border-top-left-radius: 7px;
    box-shadow: 0 4px 15px color-mix(in srgb, var(--faq-color) 7%, transparent);
}

#chatboxContainer .user-message .message-content {
    border-top-right-radius: 7px;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--user-bubble-color, var(--faq-color)) 24%, transparent);
}

#chatboxContainer .message-time {
    opacity: .78;
}

.my-faq-chatbot-quick-replies {
    min-height: 64px;
    gap: 9px;
    padding: 13px 17px;
    border-top-color: var(--faq-premium-line);
    background: var(--faq-premium-glass);
    box-shadow: 0 -5px 16px rgba(15, 23, 42, .035);
}

#chatboxContainer .quick-reply-button {
    min-height: 38px;
    padding: 0 15px;
    color: var(--faq-color-800) !important;
    background: var(--faq-color-50);
    border-color: var(--faq-color-200);
    box-shadow: 0 2px 7px color-mix(in srgb, var(--faq-color) 8%, transparent);
}

#chatboxContainer .quick-reply-button:hover,
#chatboxContainer .quick-reply-button:focus-visible {
    color: #fff !important;
    background: linear-gradient(135deg, var(--faq-color), var(--faq-color-secondary));
    border-color: transparent;
    box-shadow: 0 7px 17px color-mix(in srgb, var(--faq-color) 28%, transparent);
}

.my-faq-chatbot-input-area {
    gap: 10px;
    padding: 13px 15px 15px;
    background: var(--faq-premium-glass);
    border-top-color: var(--faq-premium-line);
}

#chatboxContainer #messageInput {
    height: 46px;
    padding: 11px 15px;
    border-color: color-mix(in srgb, var(--faq-color) 18%, var(--faq-border-strong));
    border-radius: 15px;
    background: color-mix(in srgb, var(--faq-surface) 78%, var(--faq-color-50));
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .025);
}

#chatboxContainer #messageInput:focus {
    box-shadow: var(--faq-ring), inset 0 1px 2px rgba(15, 23, 42, .02);
}

#chatboxContainer #sendMessageBtn {
    width: 46px;
    height: 46px;
    border-radius: 15px;
    box-shadow: 0 7px 17px color-mix(in srgb, var(--faq-color) 27%, transparent);
}

#chatboxContainer .my-faq-chatbot-related-questions {
    margin-top: 10px;
    padding: 11px 12px;
    border-left-width: 4px;
    border-radius: 11px;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--faq-color) 7%, transparent);
}

#chatboxContainer .my-faq-chatbot-related-question {
    border-radius: 9px;
    background: color-mix(in srgb, var(--faq-surface) 54%, transparent);
}

#chatboxContainer .my-faq-chatbot-products {
    gap: 11px;
    margin: 12px 2px 4px;
}

#chatboxContainer .my-faq-chatbot-product-card {
    grid-template-columns: 68px 1fr;
    gap: 5px 11px;
    padding: 11px;
    border-color: var(--faq-premium-line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--faq-surface) 92%, var(--faq-color-50));
    box-shadow: 0 4px 14px rgba(15, 23, 42, .06);
    transition: transform var(--faq-dur) var(--faq-ease), box-shadow var(--faq-dur) var(--faq-ease), border-color var(--faq-dur) var(--faq-ease);
}

#chatboxContainer .my-faq-chatbot-product-card:hover {
    transform: translateY(-2px);
    border-color: var(--faq-color-200);
    box-shadow: 0 10px 23px color-mix(in srgb, var(--faq-color) 12%, transparent);
}

#chatboxContainer .my-faq-chatbot-product-card img {
    width: 68px;
    height: 68px;
    border-radius: 10px;
    background: var(--faq-soft);
}

#chatboxContainer .my-faq-chatbot-product-price {
    font-size: 14px;
}

#chatboxContainer .my-faq-chatbot-product-actions a,
#chatboxContainer .my-faq-chatbot-product-actions button,
#chatboxContainer .my-faq-chatbot-cart-summary {
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 8px;
    font-weight: 650;
    transition: transform var(--faq-dur-fast) var(--faq-ease-bounce), box-shadow var(--faq-dur-fast) var(--faq-ease), background var(--faq-dur-fast) var(--faq-ease);
}

#chatboxContainer .my-faq-chatbot-product-actions a:hover,
#chatboxContainer .my-faq-chatbot-product-actions button:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 12px color-mix(in srgb, var(--faq-color) 19%, transparent);
}

#chatboxContainer .my-faq-chatbot-product-actions button {
    background: linear-gradient(135deg, var(--faq-color), var(--faq-color-secondary));
    border-color: transparent;
}

#chatboxContainer .my-faq-chatbot-cart-links {
    grid-column: 2;
}

#chatboxContainer .my-faq-chatbot-cart-summary {
    background: var(--faq-color-50);
}

@media (max-width: 480px) {
    .my-faq-chatbot-header {
        min-height: 70px;
        padding: 14px 14px;
    }

    .my-faq-chatbot-messages {
        padding: 18px 12px;
    }

    .my-faq-chatbot-quick-replies {
        min-height: 60px;
        padding: 11px 12px;
    }

    .my-faq-chatbot-input-area {
        padding: 10px 10px max(10px, env(safe-area-inset-bottom));
    }

    #chatboxContainer .my-faq-chatbot-product-card {
        grid-template-columns: 56px 1fr;
        padding: 9px;
    }

    #chatboxContainer .my-faq-chatbot-product-card img {
        width: 56px;
        height: 56px;
    }

    #chatboxContainer .my-faq-chatbot-cart-links {
        grid-column: 2;
    }
}

@media (prefers-reduced-motion: reduce) {

    #chatboxContainer .my-faq-chatbot-product-card:hover,
    #chatboxContainer .my-faq-chatbot-product-actions a:hover,
    #chatboxContainer .my-faq-chatbot-product-actions button:hover {
        transform: none;
    }
}


@media print {

    #chatboxContainer .my-faq-chatbot-product-card,
    #chatboxContainer .my-faq-chatbot-window {
        box-shadow: none !important;
    }
}

@media print {

    .my-faq-chatbot-toggle,
    .my-faq-chatbot-header-actions,
    .my-faq-chatbot-quick-replies,
    .my-faq-chatbot-input-area,
    .my-faq-chatbot-feedback {
        display: none !important;
    }
}


/* Cartes produits — modèle boutique compact */
#chatboxContainer .my-faq-chatbot-products {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

#chatboxContainer .my-faq-chatbot-product-card {
    display: block;
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    background: var(--faq-surface);
    border: 1px solid var(--faq-premium-line, var(--faq-border));
    box-shadow: 0 4px 15px color-mix(in srgb, var(--faq-text-strong) 16%, transparent);
}

#chatboxContainer .my-faq-chatbot-product-card img {
    display: block;
    width: 100%;
    height: 145px;
    margin: 0 0 12px;
    object-fit: contain;
    border-radius: 8px;
    background: var(--faq-soft);
}

#chatboxContainer .my-faq-chatbot-product-title {
    margin: 0 0 4px;
    color: var(--faq-text-strong);
    font-size: 15px;
    font-weight: 750;
    line-height: 1.25;
}

#chatboxContainer .my-faq-chatbot-product-price {
    margin: 0 0 12px;
    color: var(--faq-success-dark);
    font-size: 14px;
    font-weight: 750;
}

#chatboxContainer .my-faq-chatbot-product-actions {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

#chatboxContainer .my-faq-chatbot-quantity-selector {
    display: inline-flex;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 6px;
    background: var(--faq-color);
}

#chatboxContainer .my-faq-chatbot-qty-btn {
    width: 30px;
    padding: 0;
    color: #fff;
    border: 0;
    background: transparent;
    font-size: 17px;
    font-weight: 750;
    cursor: pointer;
}

#chatboxContainer .my-faq-chatbot-qty-btn:hover {
    background: color-mix(in srgb, var(--faq-color-800) 70%, transparent);
}

#chatboxContainer .my-faq-chatbot-qty-input {
    width: 30px;
    padding: 0;
    color: var(--faq-text);
    border: 0;
    background: var(--faq-surface);
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    outline: 0;
}

#chatboxContainer .my-faq-chatbot-add-to-cart {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 36px;
    padding: 8px 10px;
    color: #fff !important;
    border: 0;
    border-radius: 6px;
    background: var(--faq-color);
    font-size: 11px;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--faq-dur-fast) var(--faq-ease), transform var(--faq-dur-fast) var(--faq-ease-bounce);
}

#chatboxContainer .my-faq-chatbot-add-to-cart:hover:not(:disabled) {
    background: var(--faq-color-700);
    transform: translateY(-1px);
}

#chatboxContainer .my-faq-chatbot-add-to-cart:disabled {
    opacity: .72;
    cursor: wait;
}

#chatboxContainer .my-faq-chatbot-load-more {
    display: block;
    width: 100%;
    min-height: 38px;
    margin: 12px 0 4px;
    padding: 8px 14px;
    color: var(--faq-color);
    border: 1px solid var(--faq-color-300);
    border-radius: 8px;
    background: var(--faq-color-50);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    cursor: pointer;
    transition: background var(--faq-dur-fast) var(--faq-ease), color var(--faq-dur-fast) var(--faq-ease);
}

#chatboxContainer .my-faq-chatbot-load-more:hover:not(:disabled) {
    color: #fff;
    background: var(--faq-color);
}

#chatboxContainer .my-faq-chatbot-load-more:disabled {
    opacity: .7;
    cursor: wait;
}

@media (max-width: 480px) {
    #chatboxContainer .my-faq-chatbot-product-card img {
        height: 132px;
    }
}


/* Prix propres et rappel panier */
#chatboxContainer .my-faq-chatbot-product-regular-price {
    display: block;
    margin: 0 0 2px;
    color: var(--faq-muted);
    font-size: 12px;
    font-weight: 600;
}

#chatboxContainer .my-faq-chatbot-product-price {
    margin-top: 0;
    color: var(--faq-color-700);
    font-size: clamp(14px, 3.5vw, 16px);
}

#chatboxContainer .my-faq-chatbot-cart-reminder {
    margin-top: 10px;
    padding: 11px 12px;
    border: 1px solid var(--faq-color-200);
    border-left: 4px solid var(--faq-color);
    border-radius: 10px;
    background: var(--faq-color-50);
    color: var(--faq-text);
    font-size: 12px;
    line-height: 1.45;
}

#chatboxContainer .my-faq-chatbot-cart-reminder p {
    margin: 0 0 9px;
}

#chatboxContainer .my-faq-chatbot-cart-reminder.is-complete {
    color: var(--faq-success-dark);
    border-color: color-mix(in srgb, var(--faq-success) 30%, var(--faq-border));
    background: var(--faq-success-soft);
}

#chatboxContainer .my-faq-chatbot-cart-reminder-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

#chatboxContainer .my-faq-chatbot-cart-reminder-actions a,
#chatboxContainer .my-faq-chatbot-cart-reminder-actions button {
    min-height: 30px;
    padding: 6px 9px;
    border: 1px solid var(--faq-color);
    border-radius: 7px;
    color: var(--faq-color-800);
    background: var(--faq-surface);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

#chatboxContainer .my-faq-chatbot-cart-reminder-actions a:hover,
#chatboxContainer .my-faq-chatbot-cart-reminder-actions button:hover:not(:disabled) {
    color: #fff;
    background: var(--faq-color);
}

#chatboxContainer .my-faq-chatbot-cart-reminder-actions button {
    color: #fff;
    background: var(--faq-color);
}

@media (max-width: 360px) {

    #chatboxContainer .my-faq-chatbot-cart-reminder-actions a,
    #chatboxContainer .my-faq-chatbot-cart-reminder-actions button {
        flex: 1 1 100%;
        text-align: center;
    }

    #chatboxContainer .my-faq-chatbot-product-actions {
        gap: 5px;
    }

    #chatboxContainer .my-faq-chatbot-qty-btn {
        width: 27px;
    }

    #chatboxContainer .my-faq-chatbot-qty-input {
        width: 27px;
    }
}


/* Produits de la même catégorie — recommandations */
#chatboxContainer .my-faq-chatbot-related-products {
    margin-top: 14px;
    padding-top: 11px;
    border-top: 1px solid var(--faq-border);
}

#chatboxContainer .my-faq-chatbot-related-products h4 {
    margin: 0 0 8px;
    color: var(--faq-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .02em;
}

#chatboxContainer .my-faq-chatbot-related-products>div {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

#chatboxContainer .my-faq-chatbot-related-products .my-faq-chatbot-product-card {
    padding: 9px;
}

#chatboxContainer .my-faq-chatbot-related-products .my-faq-chatbot-product-card img {
    height: 108px;
    margin-bottom: 8px;
}

#chatboxContainer .my-faq-chatbot-related-products .my-faq-chatbot-product-title {
    font-size: 13px;
}

#chatboxContainer .my-faq-chatbot-related-products .my-faq-chatbot-product-price {
    margin-bottom: 8px;
    font-size: 13px;
}


/* ==========================================================================
   Professional UI refresh — couche finale cohérente
   ========================================================================== */
#chatboxContainer {
    --faq-ui-ink: #172033;
    --faq-ui-muted: #6b778c;
    --faq-ui-line: color-mix(in srgb, var(--faq-color) 12%, #dbe2ec);
    --faq-ui-panel: color-mix(in srgb, var(--faq-surface) 96%, var(--faq-color-50));
    --faq-ui-shadow: 0 18px 46px rgba(20, 32, 53, .16), 0 3px 12px rgba(20, 32, 53, .07);
    --faq-ui-radius: 18px;
}

/* Fenêtre et header */
#chatboxContainer .my-faq-chatbot-window {
    width: min(420px, calc(100vw - 32px));
    height: min(680px, calc(100vh - 112px));
    border: 1px solid var(--faq-ui-line);
    border-radius: var(--faq-ui-radius);
    box-shadow: var(--faq-ui-shadow);
    background: var(--faq-surface);
}

#chatboxContainer .my-faq-chatbot-header {
    min-height: 70px;
    padding: 14px 16px;
    background: linear-gradient(135deg, var(--faq-color) 0%, var(--faq-color-secondary) 100%);
}

#chatboxContainer .my-faq-chatbot-header::before {
    opacity: .55;
}

#chatboxContainer .my-faq-chatbot-header-avatar {
    width: 38px;
    height: 38px;
    border-width: 1px;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .14), 0 4px 12px rgba(15, 23, 42, .16);
}

#chatboxContainer .my-faq-chatbot-bot-name {
    font-size: 15px;
    letter-spacing: -.01em;
}

#chatboxContainer .my-faq-chatbot-header-actions {
    gap: 4px;
}

#chatboxContainer .my-faq-chatbot-header-actions button {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 9px;
    background: rgba(255, 255, 255, .12);
}

#chatboxContainer .my-faq-chatbot-header-actions button:hover:not(:disabled) {
    background: rgba(255, 255, 255, .24);
}

/* Zone de conversation */
#chatboxContainer .my-faq-chatbot-messages {
    gap: 13px;
    padding: 18px 16px;
    background: #f6f8fb;
}

#chatboxContainer .message-bubble {
    max-width: 91%;
    margin: 2px 0;
}

#chatboxContainer .message-content {
    padding: 11px 14px;
    border: 1px solid var(--faq-ui-line);
    border-radius: 14px;
    box-shadow: 0 2px 7px rgba(20, 32, 53, .04);
    color: var(--bot-text-color, var(--faq-ui-ink));
    font-size: 13.5px;
    line-height: 1.55;
}

#chatboxContainer .bot-message .message-content {
    border-bottom-left-radius: 4px;
}

#chatboxContainer .user-message .message-content {
    border: 0;
    border-bottom-right-radius: 4px;
    background: var(--user-bubble-color, var(--faq-color));
    box-shadow: 0 5px 14px color-mix(in srgb, var(--user-bubble-color, var(--faq-color)) 22%, transparent);
}

#chatboxContainer .message-content:hover {
    box-shadow: 0 4px 12px rgba(20, 32, 53, .08);
}

#chatboxContainer .message-time {
    margin-top: 4px;
    color: var(--faq-ui-muted);
    font-size: 10px;
}

/* Questions pertinentes */
#chatboxContainer .my-faq-chatbot-related-questions {
    gap: 5px;
    margin: 8px 2px 2px;
    padding: 10px;
    border: 1px solid var(--faq-ui-line);
    border-left: 3px solid var(--faq-color);
    border-radius: 10px;
    background: var(--faq-ui-panel);
}

#chatboxContainer .my-faq-chatbot-related-label {
    color: var(--faq-ui-muted);
    font-size: 10.5px;
    letter-spacing: .02em;
    text-transform: uppercase;
}

#chatboxContainer .my-faq-chatbot-related-question {
    padding: 7px 9px;
    border-color: var(--faq-ui-line);
    border-radius: 7px;
    color: var(--faq-color-800);
    font-size: 11.5px;
    background: transparent;
}

#chatboxContainer .my-faq-chatbot-related-question:hover,
#chatboxContainer .my-faq-chatbot-related-question:focus-visible {
    color: #fff;
    background: var(--faq-color);
}

/* Réponses rapides et saisie */
#chatboxContainer .my-faq-chatbot-quick-replies {
    min-height: 58px;
    gap: 7px;
    padding: 10px 14px;
    border-top: 1px solid var(--faq-ui-line);
    background: var(--faq-surface);
}

#chatboxContainer .quick-reply-button {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--faq-color-200);
    border-radius: 8px;
    color: var(--faq-color-800) !important;
    background: var(--faq-color-50);
    box-shadow: none;
    font-size: 11.5px;
    font-weight: 650;
}

#chatboxContainer .quick-reply-button:hover,
#chatboxContainer .quick-reply-button:focus-visible {
    color: #fff !important;
    border-color: var(--faq-color);
    background: var(--faq-color);
    box-shadow: none;
}

#chatboxContainer .my-faq-chatbot-input-area {
    gap: 8px;
    padding: 11px 13px 13px;
    border-top: 1px solid var(--faq-ui-line);
    background: var(--faq-surface);
}

#chatboxContainer #messageInput {
    height: 44px;
    padding: 10px 13px;
    border: 1px solid #d5dce7;
    border-radius: 10px;
    color: var(--faq-ui-ink);
    background: #fbfcfe;
    box-shadow: none;
    font-size: 14px;
}

#chatboxContainer #messageInput:focus {
    border-color: var(--faq-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--faq-color) 18%, transparent);
    background: #fff;
}

#chatboxContainer #sendMessageBtn {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    box-shadow: 0 5px 12px color-mix(in srgb, var(--faq-color) 22%, transparent);
}

/* Produits : grille propre, lisible et adaptable */
#chatboxContainer .my-faq-chatbot-products {
    gap: 10px;
    margin: 10px 2px 2px;
}

#chatboxContainer .my-faq-chatbot-product-card {
    padding: 10px;
    border: 1px solid var(--faq-ui-line);
    border-radius: 12px;
    background: var(--faq-surface);
    box-shadow: 0 3px 11px rgba(20, 32, 53, .06);
}

#chatboxContainer .my-faq-chatbot-product-card:hover {
    transform: translateY(-1px);
    border-color: var(--faq-color-200);
    box-shadow: 0 7px 18px color-mix(in srgb, var(--faq-color) 10%, transparent);
}

#chatboxContainer .my-faq-chatbot-product-card img {
    height: 138px;
    margin-bottom: 10px;
    border-radius: 8px;
    background: #f3f5f8;
}

#chatboxContainer .my-faq-chatbot-product-title {
    margin-bottom: 5px;
    color: var(--faq-ui-ink);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
}

#chatboxContainer .my-faq-chatbot-product-regular-price {
    color: var(--faq-ui-muted);
    font-size: 11px;
}

#chatboxContainer .my-faq-chatbot-product-price {
    margin-bottom: 10px;
    color: var(--faq-color-800);
    font-size: 14px;
    font-weight: 750;
}

#chatboxContainer .my-faq-chatbot-product-actions {
    gap: 6px;
}

#chatboxContainer .my-faq-chatbot-quantity-selector {
    border-radius: 7px;
}

#chatboxContainer .my-faq-chatbot-qty-btn {
    width: 28px;
}

#chatboxContainer .my-faq-chatbot-qty-input {
    width: 28px;
}

#chatboxContainer .my-faq-chatbot-add-to-cart {
    min-height: 34px;
    padding: 7px 9px;
    border-radius: 7px;
    background: var(--faq-color);
    font-size: 10.5px;
    letter-spacing: .02em;
}

#chatboxContainer .my-faq-chatbot-add-to-cart:hover:not(:disabled) {
    background: var(--faq-color-700);
}

#chatboxContainer .my-faq-chatbot-load-more {
    min-height: 36px;
    margin: 10px 2px 2px;
    border-radius: 8px;
    background: var(--faq-color-50);
    font-size: 11px;
}

/* Produits recommandés et rappel panier */
#chatboxContainer .my-faq-chatbot-related-products {
    margin: 13px 2px 0;
    padding-top: 10px;
    border-top: 1px solid var(--faq-ui-line);
}

#chatboxContainer .my-faq-chatbot-related-products h4 {
    margin-bottom: 8px;
    color: var(--faq-ui-muted);
    font-size: 10.5px;
    letter-spacing: .03em;
    text-transform: uppercase;
}

#chatboxContainer .my-faq-chatbot-related-products .my-faq-chatbot-product-card img {
    height: 104px;
}

#chatboxContainer .my-faq-chatbot-cart-reminder {
    margin-top: 9px;
    padding: 10px 11px;
    border: 1px solid var(--faq-color-200);
    border-left: 3px solid var(--faq-color);
    border-radius: 9px;
    background: var(--faq-color-50);
    font-size: 11.5px;
}

#chatboxContainer .my-faq-chatbot-cart-reminder-actions {
    gap: 5px;
}

#chatboxContainer .my-faq-chatbot-cart-reminder-actions a,
#chatboxContainer .my-faq-chatbot-cart-reminder-actions button {
    min-height: 29px;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 10.5px;
}

@media (max-width: 480px) {
    #chatboxContainer {
        right: 10px;
        bottom: 10px;
    }

    #chatboxContainer .my-faq-chatbot-window {
        width: calc(100vw - 20px);
        height: calc(100dvh - 86px);
        max-height: none;
        border-radius: 15px;
    }

    #chatboxContainer .my-faq-chatbot-header {
        min-height: 64px;
        padding: 12px 13px;
    }

    #chatboxContainer .my-faq-chatbot-messages {
        padding: 15px 11px;
    }

    #chatboxContainer .message-bubble {
        max-width: 94%;
    }

    #chatboxContainer .my-faq-chatbot-product-card img {
        height: 126px;
    }

    #chatboxContainer .my-faq-chatbot-quick-replies {
        padding-inline: 11px;
    }

    #chatboxContainer .my-faq-chatbot-input-area {
        padding: 9px 10px max(9px, env(safe-area-inset-bottom));
    }
}

@media (prefers-color-scheme: dark) {
    #chatboxContainer .my-faq-chatbot-messages {
        background: #111827;
    }

    #chatboxContainer #messageInput {
        border-color: var(--faq-border-strong);
        background: #182131;
    }

    #chatboxContainer #messageInput:focus {
        background: #111827;
    }

    #chatboxContainer .my-faq-chatbot-product-card {
        background: #1f2937;
    }

    #chatboxContainer .my-faq-chatbot-product-card img {
        background: #182131;
    }
}

@media (prefers-reduced-motion: reduce) {
    #chatboxContainer .my-faq-chatbot-product-card:hover {
        transform: none;
    }
}


/* Orientation initiale de la conversation */
#chatboxContainer .my-faq-chatbot-orientation {
    margin-top: 11px;
    padding: 11px;
    border: 1px solid var(--faq-ui-line, var(--faq-border));
    border-radius: 11px;
    background: var(--faq-ui-panel, var(--faq-surface));
}

#chatboxContainer .my-faq-chatbot-orientation>p {
    margin: 0 0 9px;
    color: var(--faq-ui-ink, var(--faq-text));
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

#chatboxContainer .my-faq-chatbot-orientation-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

#chatboxContainer .my-faq-chatbot-orientation-choice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 42px;
    padding: 7px 8px;
    border: 1px solid var(--faq-color-200);
    border-radius: 8px;
    color: var(--faq-color-800);
    background: var(--faq-color-50);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
    transition: background var(--faq-dur-fast) var(--faq-ease), color var(--faq-dur-fast) var(--faq-ease), transform var(--faq-dur-fast) var(--faq-ease);
}

#chatboxContainer .my-faq-chatbot-orientation-choice:hover:not(:disabled),
#chatboxContainer .my-faq-chatbot-orientation-choice:focus-visible {
    color: #fff;
    border-color: var(--faq-color);
    background: var(--faq-color);
    transform: translateY(-1px);
}

#chatboxContainer .my-faq-chatbot-orientation-choice.is-selected {
    color: #fff;
    border-color: var(--faq-color);
    background: var(--faq-color);
}

#chatboxContainer .my-faq-chatbot-orientation-choice:disabled {
    cursor: default;
    opacity: .62;
}

#chatboxContainer .my-faq-chatbot-orientation-choice.is-selected:disabled {
    opacity: 1;
}

#chatboxContainer .my-faq-chatbot-orientation-choice .dashicons {
    width: 16px;
    height: 16px;
    font-size: 16px;
    line-height: 16px;
}

@media (max-width: 360px) {
    #chatboxContainer .my-faq-chatbot-orientation-actions {
        grid-template-columns: 1fr;
    }
}


/* Navigation de canal, catégories et variantes WooCommerce */
.my-faq-chatbot-channel-switcher,
.my-faq-chatbot-no-product-actions,
.my-faq-chatbot-product-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.my-faq-chatbot-channel-switcher button,
.my-faq-chatbot-no-product-actions button,
.my-faq-chatbot-product-categories button,
.my-faq-chatbot-no-product-actions a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 11px;
    color: var(--faq-color-dark);
    background: var(--faq-color-soft);
    border: 1px solid var(--faq-border-strong);
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
}

.my-faq-chatbot-channel-switcher button:hover,
.my-faq-chatbot-no-product-actions button:hover,
.my-faq-chatbot-product-categories button:hover,
.my-faq-chatbot-no-product-actions a:hover {
    background: var(--faq-color-100);
}

.my-faq-chatbot-product-categories {
    align-items: center;
}

.my-faq-chatbot-product-categories strong {
    flex: 0 0 100%;
    color: var(--faq-text-strong);
    font-size: 12px;
}

.my-faq-chatbot-variation-select {
    width: 100%;
    min-height: 34px;
    padding: 6px 8px;
    color: var(--faq-text);
    background: #fff;
    border: 1px solid var(--faq-border-strong);
    border-radius: 8px;
}

.my-faq-chatbot-human-suggestion {
    display: inline-flex;
    margin-top: 10px;
    padding: 8px 12px;
    color: #fff;
    background: var(--faq-color-dark);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 700;
}

.my-faq-chatbot-cart-links+.my-faq-chatbot-cart-links {
    margin-left: 6px;
}


/* Position configurable du widget */
#chatboxContainer.is-position-left {
    right: auto;
    left: 24px;
}

#chatboxContainer.is-position-left .my-faq-chatbot-window {
    right: auto;
    left: 0;
    transform-origin: bottom left;
}

#chatboxContainer.is-position-right {
    right: 24px;
    left: auto;
}

#chatboxContainer.is-position-right .my-faq-chatbot-window {
    right: 0;
    left: auto;
    transform-origin: bottom right;
}

/* Animation d’apparition des messages, actions et produits */
@keyframes faq-message-in-left {
    from {
        opacity: 0;
        transform: translate3d(-12px, 8px, 0) scale(.98);
    }

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

@keyframes faq-message-in-right {
    from {
        opacity: 0;
        transform: translate3d(12px, 8px, 0) scale(.98);
    }

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

@keyframes faq-action-pop {
    from {
        opacity: 0;
        transform: translateY(7px) scale(.96);
    }

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

@keyframes faq-online-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--faq-success) 0%, transparent);
    }

    50% {
        box-shadow: 0 0 0 5px color-mix(in srgb, var(--faq-success) 22%, transparent);
    }
}

#chatboxContainer.is-position-left .bot-message {
    animation: faq-message-in-left .38s var(--faq-ease-out) both;
}

#chatboxContainer.is-position-left .user-message {
    animation: faq-message-in-right .32s var(--faq-ease-out) both;
}

#chatboxContainer.is-position-right .bot-message {
    animation: faq-message-in-right .38s var(--faq-ease-out) both;
}

#chatboxContainer.is-position-right .user-message {
    animation: faq-message-in-left .32s var(--faq-ease-out) both;
}

#chatboxContainer .my-faq-chatbot-orientation,
#chatboxContainer .my-faq-chatbot-channel-switcher,
#chatboxContainer .my-faq-chatbot-human-suggestion,
#chatboxContainer .my-faq-chatbot-product-categories,
#chatboxContainer .my-faq-chatbot-no-product-actions {
    animation: faq-action-pop .35s var(--faq-ease-out) both;
}

#chatboxContainer .my-faq-chatbot-orientation-choice:nth-child(2),
#chatboxContainer .my-faq-chatbot-channel-switcher button:nth-child(2),
#chatboxContainer .my-faq-chatbot-product-categories button:nth-child(3) {
    animation-delay: .06s;
}

#chatboxContainer .my-faq-chatbot-human-status-dot.is-online {
    animation: faq-online-pulse 2.2s ease-in-out infinite;
}

#chatboxContainer .my-faq-chatbot-product-card {
    animation: faq-action-pop .35s var(--faq-ease-out) both;
}

#chatboxContainer .my-faq-chatbot-product-card:nth-child(2) {
    animation-delay: .05s;
}

#chatboxContainer .my-faq-chatbot-product-card:nth-child(3) {
    animation-delay: .10s;
}

#chatboxContainer .my-faq-chatbot-product-card:nth-child(4) {
    animation-delay: .15s;
}

@media (max-width: 480px) {
    #chatboxContainer.is-position-left {
        right: auto;
        left: 10px;
    }

    #chatboxContainer.is-position-right {
        right: 10px;
        left: auto;
    }

    #chatboxContainer.is-position-left .my-faq-chatbot-window {
        right: auto;
        left: 0;
    }

    #chatboxContainer.is-position-right .my-faq-chatbot-window {
        right: 0;
        left: auto;
    }
}

@media (prefers-reduced-motion: reduce) {

    #chatboxContainer .bot-message,
    #chatboxContainer .user-message,
    #chatboxContainer .my-faq-chatbot-orientation,
    #chatboxContainer .my-faq-chatbot-channel-switcher,
    #chatboxContainer .my-faq-chatbot-human-suggestion,
    #chatboxContainer .my-faq-chatbot-product-categories,
    #chatboxContainer .my-faq-chatbot-no-product-actions,
    #chatboxContainer .my-faq-chatbot-product-card,
    #chatboxContainer .my-faq-chatbot-human-status-dot.is-online {
        animation: none !important;
    }
}


/* ========================================================================== 
   Correctif de cohérence visuelle — couche finale
   ========================================================================== */
#chatboxContainer {
    --faq-ui-gap: 12px;
    --faq-ui-radius: 16px;
    --faq-ui-line: color-mix(in srgb, var(--faq-color) 14%, #d9e1ec);
    --faq-ui-muted: #64748b;
    isolation: isolate;
}

#chatboxContainer .my-faq-chatbot-window {
    width: min(420px, calc(100vw - 32px));
    height: min(680px, calc(100vh - 112px));
    min-height: 420px;
    overflow: hidden;
    border: 1px solid var(--faq-ui-line);
    border-radius: var(--faq-ui-radius);
    background: var(--faq-surface);
    box-shadow: 0 24px 60px rgba(15, 23, 42, .18), 0 5px 16px rgba(15, 23, 42, .08);
}

#chatboxContainer .my-faq-chatbot-header {
    flex: 0 0 auto;
    min-height: 68px;
    padding: 13px 15px;
    background: linear-gradient(135deg, var(--faq-color), var(--faq-color-secondary));
}

#chatboxContainer .my-faq-chatbot-header-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
}

#chatboxContainer .my-faq-chatbot-header-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 9px;
    color: #fff;
    background: rgba(255, 255, 255, .14);
}

#chatboxContainer .my-faq-chatbot-header-actions button:hover,
#chatboxContainer .my-faq-chatbot-header-actions button:focus-visible {
    background: rgba(255, 255, 255, .27);
}

#chatboxContainer .my-faq-chatbot-messages {
    flex: 1 1 auto;
    min-height: 0;
    gap: var(--faq-ui-gap);
    padding: 18px 15px;
    overflow-x: hidden;
    overflow-y: auto;
    background: linear-gradient(180deg, var(--faq-soft) 0%, var(--faq-soft-2) 100%);
    scrollbar-width: thin;
    scrollbar-color: var(--faq-color-200) transparent;
}

#chatboxContainer .message-bubble {
    width: fit-content;
    max-width: min(92%, 360px);
    margin: 0;
}

#chatboxContainer .message-content {
    padding: 11px 14px;
    border: 1px solid var(--faq-ui-line);
    border-radius: 14px;
    color: var(--bot-text-color);
    font-size: 13.5px;
    line-height: 1.55;
    overflow-wrap: anywhere;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .05);
}

#chatboxContainer .bot-message .message-content {
    border-bottom-left-radius: 5px;
}

#chatboxContainer .user-message {
    margin-left: auto;
}

#chatboxContainer .user-message .message-content {
    border: 0;
    border-bottom-right-radius: 5px;
    color: var(--user-text-color);
    background: var(--user-bubble-color);
}

#chatboxContainer .message-time {
    color: var(--faq-ui-muted);
    font-size: 10px;
}

#chatboxContainer .my-faq-chatbot-quick-replies {
    flex: 0 0 auto;
    min-height: 54px;
    gap: 7px;
    padding: 9px 13px;
    border-top: 1px solid var(--faq-ui-line);
    background: var(--faq-surface);
}

#chatboxContainer .quick-reply-button {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--faq-color-200);
    border-radius: 999px;
    color: var(--faq-color-800) !important;
    background: var(--faq-color-50);
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

#chatboxContainer .quick-reply-button:hover,
#chatboxContainer .quick-reply-button:focus-visible {
    color: #fff !important;
    border-color: var(--faq-color);
    background: var(--faq-color);
}

#chatboxContainer .my-faq-chatbot-input-area {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    padding: 10px 12px max(12px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--faq-ui-line);
    background: var(--faq-surface);
}

#chatboxContainer #messageInput {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding: 10px 13px;
    border: 1px solid #d5dce7;
    border-radius: 11px;
    color: var(--faq-text-strong);
    background: #fbfcfe;
    font-size: 14px;
}

#chatboxContainer #messageInput:focus {
    border-color: var(--faq-color);
    background: #fff;
    box-shadow: var(--faq-ring);
}

#chatboxContainer #sendMessageBtn {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 11px;
}

#chatboxContainer .my-faq-chatbot-send-label {
    display: none;
}

/* Cartes produit : une seule présentation fiable sur mobile et desktop. */
#chatboxContainer .my-faq-chatbot-products,
#chatboxContainer .my-faq-chatbot-related-products>div {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
    margin: 10px 0 2px;
}

#chatboxContainer .my-faq-chatbot-product-card {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 11px;
    border: 1px solid var(--faq-ui-line);
    border-radius: 13px;
    background: var(--faq-surface);
    box-shadow: 0 3px 12px rgba(15, 23, 42, .06);
}

#chatboxContainer .my-faq-chatbot-product-card img {
    display: block;
    width: 100%;
    height: 132px;
    margin: 0 0 10px;
    object-fit: contain;
    border-radius: 9px;
    background: var(--faq-soft);
}

#chatboxContainer .my-faq-chatbot-product-title {
    display: -webkit-box;
    margin: 0 0 5px;
    overflow: hidden;
    color: var(--faq-text-strong);
    font-size: 14px;
    font-weight: 750;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

#chatboxContainer .my-faq-chatbot-product-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

#chatboxContainer .my-faq-chatbot-variation-select {
    flex: 1 1 100%;
    min-width: 0;
}

#chatboxContainer .my-faq-chatbot-add-to-cart {
    flex: 1 1 130px;
    min-width: 0;
}

#chatboxContainer .my-faq-chatbot-cart-links {
    grid-column: auto;
}

/* Orientation et actions : boutons lisibles même sur petits écrans. */
#chatboxContainer .my-faq-chatbot-orientation-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

#chatboxContainer .my-faq-chatbot-orientation-choice {
    min-width: 0;
    min-height: 44px;
    padding: 8px 7px;
    overflow-wrap: anywhere;
}

#chatboxContainer .my-faq-chatbot-channel-switcher,
#chatboxContainer .my-faq-chatbot-no-product-actions,
#chatboxContainer .my-faq-chatbot-product-categories {
    align-items: center;
}

@media (max-width: 480px) {
    #chatboxContainer .my-faq-chatbot-window {
        width: calc(100vw - 20px);
        height: calc(100dvh - 86px);
        min-height: 380px;
        border-radius: 15px;
    }

    #chatboxContainer .my-faq-chatbot-messages {
        padding: 15px 11px;
    }

    #chatboxContainer .message-bubble {
        max-width: 95%;
    }

    #chatboxContainer .my-faq-chatbot-header {
        min-height: 62px;
        padding: 11px 12px;
    }

    #chatboxContainer .my-faq-chatbot-bot-name {
        max-width: 145px;
    }

    #chatboxContainer .my-faq-chatbot-product-card img {
        height: 118px;
    }
}

@media (max-width: 360px) {
    #chatboxContainer .my-faq-chatbot-orientation-actions {
        grid-template-columns: 1fr;
    }

    #chatboxContainer .my-faq-chatbot-header-actions button {
        width: 29px;
        height: 29px;
    }

    #chatboxContainer .my-faq-chatbot-bot-name {
        max-width: 112px;
    }
}

@media (prefers-color-scheme: dark) {
    #chatboxContainer .my-faq-chatbot-messages {
        background: #111827;
    }

    #chatboxContainer #messageInput {
        color: #e5e7eb;
        border-color: #374151;
        background: #182131;
    }

    #chatboxContainer #messageInput:focus {
        background: #111827;
    }

    #chatboxContainer .my-faq-chatbot-product-card {
        background: #1f2937;
    }

    #chatboxContainer .my-faq-chatbot-product-card img {
        background: #182131;
    }
}


/* Couleur configurable du lanceur — priorité sur les anciennes couches CSS */
#chatboxContainer .my-faq-chatbot-toggle-icon {
    color: var(--faq-launcher-icon-color) !important;
}

#chatboxContainer .my-faq-chatbot-toggle-icon path {
    fill: currentColor !important;
}


/* ==========================================================================
   POLISH LAYER — Animations raffinées & micro-interactions
   ==========================================================================
   Cette couche finale apporte une finition cohérente sans casser les
   couches existantes :
   - Physique "spring" pour les mouvements d'entrée
   - Staggering pour les listes (messages, produits, questions)
   - Micro-interactions satisfaisantes sur les boutons
   - Focus rings unifiés et accessibles
   - Corrections de z-index et de tokens conflictuels
   ========================================================================== */

#chatboxContainer {
    /* Physique "spring" — plus naturelle que les easing génériques */
    --faq-spring-tight: cubic-bezier(.34, 1.56, .64, 1);
    --faq-spring-soft: cubic-bezier(.25, 1.15, .5, 1);
    --faq-ease-out-soft: cubic-bezier(.22, 1, .36, 1);
    --faq-ease-in-soft: cubic-bezier(.55, 0, .68, .19);

    /* Durées sémantiques */
    --faq-dur-instant: .1s;
    --faq-dur-quick: .18s;
    --faq-dur-smooth: .32s;
    --faq-dur-enter: .45s;
    --faq-dur-exit: .22s;

    /* Ombres raffinées — 3 niveaux cohérents + glow */
    --faq-depth-1: 0 1px 2px rgba(15, 23, 42, .06),
        0 1px 1px rgba(15, 23, 42, .04);
    --faq-depth-2: 0 4px 10px rgba(15, 23, 42, .07),
        0 2px 4px rgba(15, 23, 42, .05);
    --faq-depth-3: 0 12px 28px rgba(15, 23, 42, .11),
        0 4px 10px rgba(15, 23, 42, .06);
    --faq-depth-4: 0 24px 56px rgba(15, 23, 42, .16),
        0 8px 20px rgba(15, 23, 42, .08);

    /* Couleurs d'interaction (basées sur la marque) */
    --faq-interactive: color-mix(in oklab, var(--faq-color) 88%, #000);
    --faq-focus-ring: 0 0 0 3px color-mix(in oklab, var(--faq-color) 45%, transparent),
        0 0 0 5px rgba(255, 255, 255, .9);
}

/* ------------------------------------------------------------------------
   LAUNCHER — respiration, halo, press
   ------------------------------------------------------------------------ */
#chatboxContainer .my-faq-chatbot-toggle {
    box-shadow:
        0 8px 20px color-mix(in oklab, var(--faq-color) 32%, transparent),
        0 20px 44px rgba(15, 23, 42, .2);
    transition:
        transform var(--faq-dur-smooth) var(--faq-spring-tight),
        box-shadow var(--faq-dur-smooth) var(--faq-ease-out-soft),
        filter var(--faq-dur-quick) var(--faq-ease-out-soft);
}

/* Respiration subtile — attire l'œil sans agresser */
#chatboxContainer:not(.show):not(.has-notification) .my-faq-chatbot-toggle::after {
    animation: faq-launcher-breathe 4.8s var(--faq-ease-out-soft) infinite;
}

@keyframes faq-launcher-breathe {

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

    50% {
        transform: scale(1.38);
        opacity: 0;
    }
}

/* Halo lumineux au survol (remplace le hover générique) */
#chatboxContainer .my-faq-chatbot-toggle:hover {
    transform: translateY(-4px) scale(1.06);
    filter: brightness(1.08) saturate(1.05);
    box-shadow:
        0 10px 24px color-mix(in oklab, var(--faq-color) 42%, transparent),
        0 24px 52px rgba(15, 23, 42, .28);
}

#chatboxContainer .my-faq-chatbot-toggle:active {
    transform: translateY(-1px) scale(.96);
    transition-duration: var(--faq-dur-instant);
}

/* Icône : léger rebond au survol */
#chatboxContainer .my-faq-chatbot-toggle:hover .my-faq-chatbot-toggle-icon {
    animation: faq-launcher-icon-nudge .6s var(--faq-spring-tight);
}

@keyframes faq-launcher-icon-nudge {
    0% {
        transform: scale(1) rotate(0deg);
    }

    40% {
        transform: scale(1.15) rotate(-8deg);
    }

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

/* Pastille de notification : entrée élastique */
#chatboxContainer.has-notification .my-faq-chatbot-notification-badge {
    animation:
        faq-badge-pop var(--faq-dur-enter) var(--faq-spring-tight) both,
        faq-notification-pulse 1.8s var(--faq-ease-out-soft) 0.45s infinite;
}

@keyframes faq-badge-pop {
    0% {
        transform: scale(0) rotate(-45deg);
        opacity: 0;
    }

    60% {
        transform: scale(1.25) rotate(8deg);
        opacity: 1;
    }

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

/* ------------------------------------------------------------------------
   WINDOW — ouverture "spring", fond flouté progressif
   ------------------------------------------------------------------------ */
#chatboxContainer .my-faq-chatbot-window {
    transform: translateY(24px) scale(.92);
    transition:
        opacity var(--faq-dur-enter) var(--faq-ease-out-soft),
        transform var(--faq-dur-enter) var(--faq-spring-tight),
        visibility 0s linear var(--faq-dur-enter);
}

#chatboxContainer.show .my-faq-chatbot-window {
    transform: translateY(0) scale(1);
    transition:
        opacity var(--faq-dur-enter) var(--faq-ease-out-soft),
        transform var(--faq-dur-enter) var(--faq-spring-tight),
        visibility 0s;
}

/* Le launcher disparaît avec une rotation légère pour un effet "poignée" */
#chatboxContainer.show .my-faq-chatbot-toggle {
    transform: scale(.35) rotate(35deg);
    transition:
        transform var(--faq-dur-smooth) var(--faq-spring-tight),
        opacity var(--faq-dur-smooth) var(--faq-ease-out-soft);
}

/* ------------------------------------------------------------------------
   HEADER — shimmer gradient subtil
   ------------------------------------------------------------------------ */
#chatboxContainer .my-faq-chatbot-header {
    background-size: 200% 100%;
    animation: faq-header-shimmer 12s ease-in-out infinite;
}

@keyframes faq-header-shimmer {

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

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

/* Bouton d'action du header : retour satisfaisant */
#chatboxContainer .my-faq-chatbot-header-actions button {
    transition:
        background var(--faq-dur-quick) var(--faq-ease-out-soft),
        transform var(--faq-dur-quick) var(--faq-spring-tight),
        border-color var(--faq-dur-quick) var(--faq-ease-out-soft);
}

#chatboxContainer .my-faq-chatbot-header-actions button:active:not(:disabled) {
    transform: scale(.92);
    transition-duration: var(--faq-dur-instant);
}

/* ------------------------------------------------------------------------
   MESSAGES — entrée avec physique distincte bot/user
   ------------------------------------------------------------------------ */
#chatboxContainer .bot-message {
    animation: faq-message-enter-bot var(--faq-dur-enter) var(--faq-spring-soft) both;
}

#chatboxContainer .user-message {
    animation: faq-message-enter-user var(--faq-dur-smooth) var(--faq-spring-soft) both;
}

@keyframes faq-message-enter-bot {
    0% {
        opacity: 0;
        transform: translate3d(-14px, 8px, 0) scale(.94);
    }

    60% {
        opacity: 1;
        transform: translate3d(2px, -1px, 0) scale(1.01);
    }

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

@keyframes faq-message-enter-user {
    0% {
        opacity: 0;
        transform: translate3d(14px, 8px, 0) scale(.94);
    }

    60% {
        opacity: 1;
        transform: translate3d(-2px, -1px, 0) scale(1.01);
    }

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

/* Override des animations de position (left/right) pour rester cohérent */
#chatboxContainer.is-position-left .bot-message,
#chatboxContainer.is-position-right .bot-message {
    animation-name: faq-message-enter-bot;
}

#chatboxContainer.is-position-left .user-message,
#chatboxContainer.is-position-right .user-message {
    animation-name: faq-message-enter-user;
}

/* Le contenu du message a une transition douce sur hover */
#chatboxContainer .message-content {
    transition:
        box-shadow var(--faq-dur-quick) var(--faq-ease-out-soft),
        transform var(--faq-dur-quick) var(--faq-spring-soft),
        border-color var(--faq-dur-quick) var(--faq-ease-out-soft);
}

#chatboxContainer .bot-message .message-content:hover {
    transform: translateX(2px);
}

#chatboxContainer .user-message .message-content:hover {
    transform: translateX(-2px);
}

/* Horodatage révélé en douceur au survol du message */
#chatboxContainer .message-time {
    opacity: .55;
    transition: opacity var(--faq-dur-quick) var(--faq-ease-out-soft);
}

#chatboxContainer .message-bubble:hover .message-time {
    opacity: 1;
}

/* ------------------------------------------------------------------------
   TYPING INDICATOR — vague plus organique
   ------------------------------------------------------------------------ */
#chatboxContainer .my-faq-chatbot-typing-indicator .message-content span {
    animation: faq-typing-wave 1.5s var(--faq-ease-out-soft) infinite;
    will-change: transform, opacity;
}

@keyframes faq-typing-wave {

    0%,
    70%,
    100% {
        transform: translateY(0) scale(1);
        opacity: .35;
    }

    30% {
        transform: translateY(-6px) scale(1.15);
        opacity: 1;
    }
}

/* ------------------------------------------------------------------------
   QUICK REPLIES — entrée séquencée, retour tactile
   ------------------------------------------------------------------------ */
#chatboxContainer .quick-reply-button {
    animation: faq-quick-reply-in var(--faq-dur-smooth) var(--faq-spring-soft) both;
}

#chatboxContainer .quick-reply-button:nth-child(1) {
    animation-delay: .02s;
}

#chatboxContainer .quick-reply-button:nth-child(2) {
    animation-delay: .06s;
}

#chatboxContainer .quick-reply-button:nth-child(3) {
    animation-delay: .10s;
}

#chatboxContainer .quick-reply-button:nth-child(4) {
    animation-delay: .14s;
}

#chatboxContainer .quick-reply-button:nth-child(5) {
    animation-delay: .18s;
}

@keyframes faq-quick-reply-in {
    0% {
        opacity: 0;
        transform: translateY(12px) scale(.9);
    }

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

#chatboxContainer .quick-reply-button:active:not(:disabled) {
    transform: translateY(1px) scale(.95);
    transition-duration: var(--faq-dur-instant);
}

/* ------------------------------------------------------------------------
   CARTES PRODUITS — cascade élégante
   ------------------------------------------------------------------------ */
#chatboxContainer .my-faq-chatbot-product-card {
    animation: faq-product-cascade var(--faq-dur-enter) var(--faq-spring-soft) both;
    transition:
        transform var(--faq-dur-smooth) var(--faq-spring-soft),
        box-shadow var(--faq-dur-smooth) var(--faq-ease-out-soft),
        border-color var(--faq-dur-smooth) var(--faq-ease-out-soft);
}

#chatboxContainer .my-faq-chatbot-product-card:nth-child(1) {
    animation-delay: .04s;
}

#chatboxContainer .my-faq-chatbot-product-card:nth-child(2) {
    animation-delay: .10s;
}

#chatboxContainer .my-faq-chatbot-product-card:nth-child(3) {
    animation-delay: .16s;
}

#chatboxContainer .my-faq-chatbot-product-card:nth-child(4) {
    animation-delay: .22s;
}

#chatboxContainer .my-faq-chatbot-product-card:nth-child(5) {
    animation-delay: .28s;
}

#chatboxContainer .my-faq-chatbot-product-card:nth-child(6) {
    animation-delay: .34s;
}

@keyframes faq-product-cascade {
    0% {
        opacity: 0;
        transform: translateY(16px) scale(.94);
    }

    60% {
        opacity: 1;
        transform: translateY(-2px) scale(1.005);
    }

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

#chatboxContainer .my-faq-chatbot-product-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--faq-depth-3);
}

/* Image : zoom subtil au survol */
#chatboxContainer .my-faq-chatbot-product-card img {
    transition: transform var(--faq-dur-smooth) var(--faq-ease-out-soft);
}

#chatboxContainer .my-faq-chatbot-product-card:hover img {
    transform: scale(1.03);
}

/* Bouton d'ajout panier : transition satisfaisante */
#chatboxContainer .my-faq-chatbot-add-to-cart {
    position: relative;
    overflow: hidden;
    transition:
        background var(--faq-dur-quick) var(--faq-ease-out-soft),
        transform var(--faq-dur-quick) var(--faq-spring-soft),
        box-shadow var(--faq-dur-quick) var(--faq-ease-out-soft);
}

#chatboxContainer .my-faq-chatbot-add-to-cart:active:not(:disabled) {
    transform: scale(.97);
    transition-duration: var(--faq-dur-instant);
}

/* Éclair lumineux quand on ajoute au panier */
#chatboxContainer .my-faq-chatbot-add-to-cart.is-added {
    animation: faq-add-flash .8s var(--faq-ease-out-soft);
}

@keyframes faq-add-flash {
    0% {
        box-shadow: 0 0 0 0 color-mix(in oklab, var(--faq-success) 70%, transparent);
    }

    60% {
        box-shadow: 0 0 0 8px color-mix(in oklab, var(--faq-success) 0%, transparent);
    }

    100% {
        box-shadow: 0 0 0 0 transparent;
    }
}

/* ------------------------------------------------------------------------
   SÉLECTEURS DE VARIATION — feedback discret
   ------------------------------------------------------------------------ */
#chatboxContainer .my-faq-chatbot-variation-select {
    transition:
        border-color var(--faq-dur-quick) var(--faq-ease-out-soft),
        background var(--faq-dur-quick) var(--faq-ease-out-soft),
        box-shadow var(--faq-dur-quick) var(--faq-ease-out-soft);
}

#chatboxContainer .my-faq-chatbot-variation-select:focus {
    border-color: var(--faq-color);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--faq-color) 20%, transparent);
    outline: none;
}

/* ------------------------------------------------------------------------
   SÉLECTEUR DE QUANTITÉ — transition des chiffres
   ------------------------------------------------------------------------ */
#chatboxContainer .my-faq-chatbot-qty-btn {
    transition:
        background var(--faq-dur-quick) var(--faq-ease-out-soft),
        transform var(--faq-dur-quick) var(--faq-spring-tight);
}

#chatboxContainer .my-faq-chatbot-qty-btn:active {
    transform: scale(.88);
    transition-duration: var(--faq-dur-instant);
}

#chatboxContainer .my-faq-chatbot-qty-input {
    transition: color var(--faq-dur-quick) var(--faq-ease-out-soft);
}

/* ------------------------------------------------------------------------
   FEEDBACK — micro-interaction satisfaisante
   ------------------------------------------------------------------------ */
#chatboxContainer .my-faq-chatbot-feedback button {
    transition:
        opacity var(--faq-dur-quick) var(--faq-ease-out-soft),
        transform var(--faq-dur-quick) var(--faq-spring-tight),
        box-shadow var(--faq-dur-quick) var(--faq-ease-out-soft),
        background var(--faq-dur-quick) var(--faq-ease-out-soft);
}

#chatboxContainer .my-faq-chatbot-feedback button:active:not(:disabled) {
    transform: scale(.9);
    transition-duration: var(--faq-dur-instant);
}

/* Animation satisfaisante après vote */
#chatboxContainer .my-faq-chatbot-feedback.is-sent {
    animation: faq-feedback-confirm .6s var(--faq-spring-tight);
}

@keyframes faq-feedback-confirm {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.08);
    }

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

/* ------------------------------------------------------------------------
   INPUT — focus élégant avec ring progressif
   ------------------------------------------------------------------------ */
#chatboxContainer #messageInput {
    transition:
        border-color var(--faq-dur-quick) var(--faq-ease-out-soft),
        box-shadow var(--faq-dur-smooth) var(--faq-ease-out-soft),
        background var(--faq-dur-quick) var(--faq-ease-out-soft);
}

#chatboxContainer #messageInput:focus {
    box-shadow:
        0 0 0 3px color-mix(in oklab, var(--faq-color) 22%, transparent),
        inset 0 1px 2px rgba(15, 23, 42, .02);
}

/* Bouton d'envoi : micro-bounce au clic */
#chatboxContainer #sendMessageBtn:active:not(:disabled) {
    transform: scale(.9) translateY(0);
    transition-duration: var(--faq-dur-instant);
}

/* ------------------------------------------------------------------------
   ORIENTATION / CHANNEL SWITCHER — apparition orchestrée
   ------------------------------------------------------------------------ */
#chatboxContainer .my-faq-chatbot-orientation,
#chatboxContainer .my-faq-chatbot-channel-switcher {
    animation: faq-block-enter var(--faq-dur-enter) var(--faq-spring-soft) both;
}

@keyframes faq-block-enter {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(.97);
    }

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

/* Bouton d'orientation : press satisfaisant */
#chatboxContainer .my-faq-chatbot-orientation-choice {
    transition:
        background var(--faq-dur-quick) var(--faq-ease-out-soft),
        color var(--faq-dur-quick) var(--faq-ease-out-soft),
        border-color var(--faq-dur-quick) var(--faq-ease-out-soft),
        transform var(--faq-dur-quick) var(--faq-spring-tight);
}

#chatboxContainer .my-faq-chatbot-orientation-choice:active:not(:disabled) {
    transform: scale(.97);
    transition-duration: var(--faq-dur-instant);
}

/* ------------------------------------------------------------------------
   RELATED QUESTIONS — apparition en cascade
   ------------------------------------------------------------------------ */
#chatboxContainer .my-faq-chatbot-related-question {
    animation: faq-related-in var(--faq-dur-smooth) var(--faq-ease-out-soft) both;
    transition:
        background var(--faq-dur-quick) var(--faq-ease-out-soft),
        color var(--faq-dur-quick) var(--faq-ease-out-soft),
        border-color var(--faq-dur-quick) var(--faq-ease-out-soft),
        transform var(--faq-dur-quick) var(--faq-spring-soft);
}

#chatboxContainer .my-faq-chatbot-related-question:nth-child(2) {
    animation-delay: .04s;
}

#chatboxContainer .my-faq-chatbot-related-question:nth-child(3) {
    animation-delay: .08s;
}

#chatboxContainer .my-faq-chatbot-related-question:nth-child(4) {
    animation-delay: .12s;
}

@keyframes faq-related-in {
    from {
        opacity: 0;
        transform: translateX(-6px);
    }

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

#chatboxContainer .my-faq-chatbot-related-question:hover {
    transform: translateX(2px);
}

/* ------------------------------------------------------------------------
   NOTIFICATIONS INLINE — entrée/sortie harmonisées
   ------------------------------------------------------------------------ */
#chatboxContainer .my-faq-chatbot-inline-notification {
    animation: faq-notif-enter var(--faq-dur-smooth) var(--faq-spring-soft) both;
    transition:
        opacity var(--faq-dur-quick) var(--faq-ease-out-soft),
        transform var(--faq-dur-quick) var(--faq-ease-out-soft);
}

@keyframes faq-notif-enter {
    0% {
        opacity: 0;
        transform: translateY(-10px) scale(.94);
    }

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

#chatboxContainer .my-faq-chatbot-inline-notification.is-fading {
    opacity: 0;
    transform: translateY(-4px) scale(.96);
}

/* ------------------------------------------------------------------------
   FOCUS RING UNIFIÉ — accessibilité
   ------------------------------------------------------------------------ */
#chatboxContainer button:focus-visible,
#chatboxContainer a:focus-visible,
#chatboxContainer input:focus-visible,
#chatboxContainer select:focus-visible,
#chatboxContainer textarea:focus-visible,
#chatboxContainer [tabindex]:focus-visible {
    outline: 2px solid var(--faq-color);
    outline-offset: 2px;
    border-radius: inherit;
    box-shadow: 0 0 0 5px color-mix(in oklab, var(--faq-color) 18%, transparent);
    transition: box-shadow var(--faq-dur-quick) var(--faq-ease-out-soft);
}

/* ------------------------------------------------------------------------
   CORRECTIFS DE COHÉRENCE — tokens conflituels
   ------------------------------------------------------------------------ */
/* Un seul token --faq-ui-line, valeur cohérente (la 3ᵉ couche primait) */
#chatboxContainer {
    --faq-ui-line: color-mix(in srgb, var(--faq-color) 14%, #d9e1ec);
}

/* Réduire les layers d'ombre à 3 niveaux cohérents */
#chatboxContainer .my-faq-chatbot-messages {
    background: linear-gradient(180deg,
            color-mix(in oklab, var(--faq-color) 3%, #f8fafc) 0%,
            color-mix(in oklab, var(--faq-color) 6%, #fbfcfe) 100%);
}

/* ------------------------------------------------------------------------
   PERFORMANCES — will-change ciblé
   ------------------------------------------------------------------------ */
#chatboxContainer .my-faq-chatbot-toggle {
    will-change: transform;
}

#chatboxContainer.show .my-faq-chatbot-window {
    will-change: transform, opacity;
}

#chatboxContainer .message-bubble {
    /* Éviter le compositing forcé sur toute la conversation */
    contain: layout style;
}

/* Après animation d'entrée, libérer la mémoire */
#chatboxContainer .message-bubble:not(:last-child),
#chatboxContainer .my-faq-chatbot-product-card {
    will-change: auto;
}

/* ------------------------------------------------------------------------
   REDUCED MOTION — respect strict des préférences
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {

    #chatboxContainer .my-faq-chatbot-toggle::after,
    #chatboxContainer .my-faq-chatbot-toggle:hover .my-faq-chatbot-toggle-icon,
    #chatboxContainer.has-notification .my-faq-chatbot-toggle,
    #chatboxContainer.has-notification .my-faq-chatbot-notification-badge,
    #chatboxContainer .my-faq-chatbot-header,
    #chatboxContainer .bot-message,
    #chatboxContainer .user-message,
    #chatboxContainer .quick-reply-button,
    #chatboxContainer .my-faq-chatbot-product-card,
    #chatboxContainer .my-faq-chatbot-related-question,
    #chatboxContainer .my-faq-chatbot-inline-notification,
    #chatboxContainer .my-faq-chatbot-typing-indicator .message-content span,
    #chatboxContainer .my-faq-chatbot-orientation,
    #chatboxContainer .my-faq-chatbot-channel-switcher {
        animation: none !important;
        transition-duration: .01ms !important;
    }

    #chatboxContainer .my-faq-chatbot-toggle:hover,
    #chatboxContainer .my-faq-chatbot-window,
    #chatboxContainer.show .my-faq-chatbot-window,
    #chatboxContainer .my-faq-chatbot-product-card:hover,
    #chatboxContainer .message-content:hover {
        transform: none !important;
    }
}

/* ------------------------------------------------------------------------
   HAUTE CONTRASTE — override propre
   ------------------------------------------------------------------------ */
@media (prefers-contrast: more) {
    #chatboxContainer .my-faq-chatbot-toggle {
        border: 2px solid currentColor;
    }

    #chatboxContainer .message-content,
    #chatboxContainer .my-faq-chatbot-product-card,
    #chatboxContainer .quick-reply-button,
    #chatboxContainer .my-faq-chatbot-related-question {
        border-width: 2px;
    }

    #chatboxContainer .my-faq-chatbot-source,
    #chatboxContainer .my-faq-chatbot-related-label {
        text-decoration: underline;
    }
}

/* ========================================================================
   CARTES PRODUITS — thème configurable et animation douce
   ======================================================================== */
#chatboxContainer .my-faq-chatbot-product-categories {
    margin-top: 12px;
    padding: 12px;
    border-left: 4px solid var(--faq-color);
    border-radius: 13px;
    background: color-mix(in srgb, var(--faq-surface) 88%, var(--faq-color-50));
    box-shadow: 0 4px 14px color-mix(in srgb, var(--faq-color) 9%, transparent);
    animation: faq-products-section-in .42s var(--faq-spring-soft, cubic-bezier(.2,.8,.2,1)) both;
}

#chatboxContainer .my-faq-chatbot-product-categories .my-faq-chatbot-related-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 9px;
    color: var(--faq-text-strong);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
}

#chatboxContainer .my-faq-chatbot-product-categories .my-faq-chatbot-related-title::before {
    content: '▦';
    display: inline-grid;
    width: 23px;
    height: 23px;
    place-items: center;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(135deg, var(--faq-color), var(--faq-color-secondary));
    box-shadow: 0 4px 10px color-mix(in srgb, var(--faq-color) 22%, transparent);
}

#chatboxContainer .my-faq-chatbot-product-categories .my-faq-chatbot-related-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

#chatboxContainer .my-faq-chatbot-product-category-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid color-mix(in srgb, var(--faq-color) 20%, var(--faq-border));
    border-radius: 999px;
    color: var(--faq-text-strong);
    background: var(--faq-surface);
    box-shadow: 0 2px 7px color-mix(in srgb, var(--faq-color) 7%, transparent);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .2s var(--faq-ease-out-soft), color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

#chatboxContainer .my-faq-chatbot-product-category-button::before {
    content: '›';
    color: var(--faq-color);
    font-size: 17px;
    line-height: 0;
    transition: transform .2s ease;
}

#chatboxContainer .my-faq-chatbot-product-category-button:hover,
#chatboxContainer .my-faq-chatbot-product-category-button:focus-visible {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--faq-color), var(--faq-color-secondary));
    box-shadow: 0 7px 15px color-mix(in srgb, var(--faq-color) 24%, transparent);
    transform: translateY(-2px);
}

#chatboxContainer .my-faq-chatbot-product-category-button:hover::before,
#chatboxContainer .my-faq-chatbot-product-category-button:focus-visible::before {
    color: #fff;
    transform: translateX(2px);
}

#chatboxContainer .my-faq-chatbot-product-card {
    position: relative;
    overflow: hidden;
    background: var(--faq-product-card, var(--faq-surface));
    border-color: var(--faq-product-border, var(--faq-premium-line));
    box-shadow: 0 7px 18px color-mix(in srgb, var(--faq-text-strong) 9%, transparent);
    animation: faq-product-card-in .46s var(--faq-spring-soft, cubic-bezier(.2,.8,.2,1)) both;
}

#chatboxContainer .my-faq-chatbot-product-card::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 25%, color-mix(in srgb, #fff 35%, transparent) 50%, transparent 75%);
    transform: translateX(-125%);
    transition: transform .65s ease;
}

#chatboxContainer .my-faq-chatbot-product-card:hover::after {
    transform: translateX(125%);
}

#chatboxContainer .my-faq-chatbot-product-card:hover {
    transform: translateY(-4px) scale(1.008);
    border-color: var(--faq-product-button, var(--faq-color));
    box-shadow: 0 14px 28px color-mix(in srgb, var(--faq-product-button, var(--faq-color)) 18%, transparent);
}

#chatboxContainer .my-faq-chatbot-product-card img {
    transition: transform .35s var(--faq-ease-out-soft), filter .35s ease;
}

#chatboxContainer .my-faq-chatbot-product-card:hover img {
    transform: scale(1.035);
    filter: saturate(1.06);
}

#chatboxContainer .my-faq-chatbot-product-actions .my-faq-chatbot-add-to-cart,
#chatboxContainer .my-faq-chatbot-product-actions .my-faq-chatbot-cart-links,
#chatboxContainer .my-faq-chatbot-load-more {
    border-color: var(--faq-product-button, var(--faq-color));
    color: var(--faq-product-button-text, #fff);
    background: var(--faq-product-button, var(--faq-color));
    box-shadow: 0 5px 12px color-mix(in srgb, var(--faq-product-button, var(--faq-color)) 22%, transparent);
    transition: transform .2s var(--faq-ease-out-soft), background .2s ease, box-shadow .2s ease, filter .2s ease;
}

#chatboxContainer .my-faq-chatbot-product-actions .my-faq-chatbot-add-to-cart:hover,
#chatboxContainer .my-faq-chatbot-product-actions .my-faq-chatbot-cart-links:hover,
#chatboxContainer .my-faq-chatbot-load-more:hover {
    color: var(--faq-product-button-text, #fff);
    background: var(--faq-product-button-hover, var(--faq-color-secondary));
    border-color: var(--faq-product-button-hover, var(--faq-color-secondary));
    box-shadow: 0 8px 17px color-mix(in srgb, var(--faq-product-button-hover, var(--faq-color-secondary)) 28%, transparent);
    filter: brightness(1.03);
    transform: translateY(-2px);
}

#chatboxContainer .my-faq-chatbot-product-actions .my-faq-chatbot-add-to-cart:active,
#chatboxContainer .my-faq-chatbot-product-actions .my-faq-chatbot-cart-links:active,
#chatboxContainer .my-faq-chatbot-load-more:active {
    transform: translateY(0) scale(.98);
}

@keyframes faq-products-section-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes faq-product-card-in {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

#chatboxContainer .my-faq-chatbot-product-card:nth-child(2) { animation-delay: .05s; }
#chatboxContainer .my-faq-chatbot-product-card:nth-child(3) { animation-delay: .1s; }
#chatboxContainer .my-faq-chatbot-product-card:nth-child(4) { animation-delay: .15s; }
#chatboxContainer .my-faq-chatbot-product-card:nth-child(5) { animation-delay: .2s; }

@media (prefers-reduced-motion: reduce) {
    #chatboxContainer .my-faq-chatbot-product-card,
    #chatboxContainer .my-faq-chatbot-product-categories,
    #chatboxContainer .my-faq-chatbot-product-category-button {
        animation: none !important;
        transition: none !important;
    }
    #chatboxContainer .my-faq-chatbot-product-card:hover,
    #chatboxContainer .my-faq-chatbot-product-category-button:hover,
    #chatboxContainer .my-faq-chatbot-product-actions .my-faq-chatbot-add-to-cart:hover,
    #chatboxContainer .my-faq-chatbot-load-more:hover {
        transform: none;
    }
}


/* Images produits — couverture complète de la zone */
#chatboxContainer .my-faq-chatbot-product-card img {
    display: block;
    width: 100%;
    height: 145px;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
}

@media (max-width: 520px) {
    #chatboxContainer .my-faq-chatbot-product-card img {
        height: 132px;
    }
}