/* ==========================================================================
   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 {
    --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-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: 'Inter', -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: var(--faq-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

@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: inherit;
    filter: drop-shadow(0 1px 2px rgba(15, 23, 42, .22));
}

.my-faq-chatbot-toggle-icon path {
    fill: currentColor;
}

@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);
}

#chatboxContainer.has-notification .my-faq-chatbot-toggle-icon::after {
    content: "";
    position: absolute;
    top: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--faq-danger);
    border: 2px solid #fff;
    box-shadow: 0 2px 6px color-mix(in oklab, var(--faq-danger) 50%, transparent);
    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;
    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
   ========================================================================== */
.message-bubble {
    display: flex;
    flex-direction: column;
    max-width: 88%;
    animation: faq-message-in var(--faq-dur-slow) var(--faq-ease-out);
}

.bot-message  { align-self: flex-start; }
.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); }
}

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

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

.message-content {
    position: relative;
    padding: 11px 15px;
    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);
}

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

.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); }
}

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

.message-content > *:last-child { margin-bottom: 0; }
.message-content ul,
.message-content ol { padding-left: 20px; }
.message-content li { margin-bottom: 3px; }

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

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

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

.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;
}

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

.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);
}

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

.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.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
   ========================================================================== */
.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;
}

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

.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;
}

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

@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;
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    background: var(--faq-surface);
    border-top: 1px solid var(--faq-border);
    scrollbar-width: none;
}

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

.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;
    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);
}

.quick-reply-button:hover {
    color: var(--faq-launcher-icon-color);
    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);
}

.quick-reply-button:active {
    transform: translateY(0) scale(.97);
}

.my-faq-chatbot-quick-replies-nav {
    position: absolute;
    top: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--faq-border);
    border-radius: 50%;
    background: var(--faq-surface);
    color: var(--faq-text);
    box-shadow: var(--faq-shadow-sm);
    cursor: pointer;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) scale(.9);
    transition:
        opacity var(--faq-dur) var(--faq-ease),
        transform var(--faq-dur) var(--faq-ease),
        background var(--faq-dur) var(--faq-ease),
        color var(--faq-dur) var(--faq-ease);
}

.my-faq-chatbot-quick-replies-nav.is-prev { left: 6px; }
.my-faq-chatbot-quick-replies-nav.is-next { right: 6px; }

.my-faq-chatbot-quick-replies:hover .my-faq-chatbot-quick-replies-nav:not([hidden]),
.my-faq-chatbot-quick-replies:focus-within .my-faq-chatbot-quick-replies-nav:not([hidden]) {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) scale(1);
}

.my-faq-chatbot-quick-replies-nav:hover {
    background: var(--faq-color-50);
    color: var(--faq-color-700);
    border-color: var(--faq-color-200);
    transform: translateY(-50%) scale(1.08);
}

.my-faq-chatbot-quick-replies-nav[hidden] { display: none; }

.my-faq-chatbot-quick-replies-nav .dashicons {
    width: 14px;
    height: 14px;
    font-size: 14px;
    line-height: 1;
}

/* Sur les appareils sans :hover (tactile), on rend les flèches toujours
   visibles tant qu'il y a du contenu à parcourir. */
@media (hover: none) {
    .my-faq-chatbot-quick-replies-nav:not([hidden]) {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(-50%) scale(1);
    }
}

.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;
    gap: 9px;
    padding: 13px 15px 15px;
    border-top: 1px solid var(--faq-border);
    background: var(--faq-surface);
}

#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);
}

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

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

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

#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);
}

#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);
}

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

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

#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);
}

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

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

#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);
        max-height: none;
        border-radius: 20px;
    }

    .my-faq-chatbot-input-area {
        padding: 10px;
        gap: 7px;
    }

    #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; }

    #chatboxContainer.has-notification .my-faq-chatbot-toggle-icon::after {
        width: 10px;
        height: 10px;
        border-width: 1.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);
        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-toggle-icon::after,
    .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); }

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

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

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

    #messageInput:hover:not(:disabled) { border-color: #475569; }
    #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-toggle-icon::after {
        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);
    }

    .my-faq-chatbot-quick-replies-nav {
        background: #1f2937;
        border-color: var(--faq-border);
        color: #e5e7eb;
    }

    .my-faq-chatbot-quick-replies-nav:hover {
        background: #293246;
        color: #c7d2fe;
        border-color: #475569;
    }
}

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

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

    #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;
    }

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