* { box-sizing: border-box; }

:root {
    --ogbl-red: var(--chat-buttons, #e30613);
    --ogbl-blue: var(--chat-header, #323d83);
    --ogbl-blue-dark: var(--chat-primary, #24306f);
    --chat-bg: var(--chat-background, #f6f8fc);
    --page-bg: #eef2f7;
    --text: var(--chat-text, #202938);
    --muted: #667085;
    --border: var(--chat-border, #d9e0ea);
}

html, body { min-height: 100%; }

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: var(--page-bg);
    color: var(--text);
}

.page-frame {
    width: min(1180px, calc(100% - 32px));
    margin: 20px auto 8px;
}

.chat-shell {
    min-height: 690px;
    display: flex;
    flex-direction: column;
    overflow: visible;
    background: var(--chat-assistant-bubble, #fff);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 12px 40px rgba(24,39,75,.12);
}

.chat-header {
    position: relative;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 22px;
    border-radius: 18px 18px 0 0;
    background: linear-gradient(135deg, var(--ogbl-blue), var(--ogbl-blue-dark));
    color: #fff;
}

.mascot-anchor {
    position: relative;
    flex: 0 0 auto;
    cursor: default;
    outline: none;
}

.mascot-anchor.is-interactive { cursor: pointer; }
.mascot-anchor:focus-visible .chat-avatar {
    box-shadow: 0 0 0 4px rgba(255,255,255,.35);
}

.chat-avatar {
    display: block;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 20%;
    background: #fff;
    border: 3px solid rgba(255,255,255,.95);
    cursor: inherit;
}

.avatar-breathe {
    animation: avatarBreathe 3.4s ease-in-out infinite;
}

@keyframes avatarBreathe {
    0%,100% { transform: scale(1); }
    50% { transform: scale(1.045); }
}

.chat-title {
    margin: 0;
    font-size: 22px;
}

.chat-subtitle {
    margin: 4px 0 0;
    opacity: .9;
    font-size: 14px;
}

.chat-conversation {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 0 0 18px 18px;
}

.chat-main {
    flex: 1;
    min-height: 560px;
    padding: 22px;
    overflow-y: auto;
    background: var(--chat-bg);
}

.message {
    max-width: 72%;
    margin: 0 0 16px;
    padding: 13px 15px;
    border-radius: 16px;
    line-height: 1.45;
    white-space: pre-line;
}

.message-assistant {
    background: var(--chat-assistant-bubble, #fff);
    border: 1px solid var(--border);
    border-bottom-left-radius: 5px;
}

.message-user {
    margin-left: auto;
    background: var(--chat-user-bubble);
    color: var(--chat-text, #202938);
    border-bottom-right-radius: 5px;
}

.message-title {
    font-weight: 700;
    margin-bottom: 6px;
}

.options {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 0 0 22px;
}

.option-button {
    border: 1px solid var(--ogbl-red);
    border-radius: 999px;
    padding: 10px 15px;
    background: #fff;
    color: var(--ogbl-red);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.option-button:hover,
.option-button:focus-visible {
    background: var(--ogbl-red);
    color: #fff;
}

.chat-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    background: #fff;
    color: var(--muted);
    font-size: 13px;
}

.reset-button {
    border: 0;
    background: transparent;
    color: var(--ogbl-blue);
    cursor: pointer;
    font-weight: 700;
}

.site-copyright {
    padding: 11px 4px 5px;
    color: #677085;
    font-size: 13px;
    text-align: center;
}

.error-banner {
    margin: 12px 0;
    padding: 12px;
    border: 1px solid #e7a0a6;
    border-radius: 8px;
    background: #fdecee;
    color: #8e1820;
}

.typing {
    color: var(--muted);
    font-size: 14px;
    margin: 8px 0 15px;
}

/* Aucune carte, aucun fond, aucune bordure :
   uniquement le personnage transparent qui sort de l'avatar. */
.mascot-stage {
    position: fixed;
    left: 80px;
    top: 80px;
    z-index: 100;
    width: 250px;
    height: 300px;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform-origin: 52px 0;
}

.mascot-stage.is-visible {
    opacity: 1;
    visibility: visible;
}

.mascot-figure {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left top;
    opacity: 0;
    filter: drop-shadow(0 13px 15px rgba(24,39,75,.18));
}

/* Un seul comportement animé : sortie, rebond et gestes aux événements clés. */
.mascot-stage.mode-expressive {
    width: 265px;
    height: 315px;
    animation: expressiveStage 2.6s cubic-bezier(.2,.86,.25,1.16) both;
}

.mascot-stage.mode-expressive .mascot-selected {
    opacity: 1;
    animation: expressiveFigure 2.6s ease-in-out both;
}

@keyframes expressiveStage {
    0% { opacity: 0; transform: translate(-18px,-18px) scale(.55) rotate(-8deg); }
    18% { opacity: 1; transform: translate(4px,6px) scale(1.08) rotate(2deg); }
    30% { transform: translate(0,0) scale(1) rotate(-1deg); }
    76% { opacity: 1; transform: translate(3px,0) scale(1.02) rotate(1deg); }
    100% { opacity: 0; transform: translate(-4px,-7px) scale(.9) rotate(-2deg); }
}

@keyframes expressiveFigure {
    0%,100% { transform: translateX(0); }
    42% { transform: translateX(7px) rotate(1.5deg); }
    58% { transform: translateX(-4px) rotate(-1deg); }
}

/* RÉSOLUTION :
   véritable illustration du personnage faisant le pouce,
   pas un emoji posé au-dessus. */
.mascot-stage.mode-resolved {
    width: 285px;
    height: 320px;
    animation: resolvedStage 3.2s cubic-bezier(.2,.86,.25,1.16) both;
}

.mascot-stage.mode-resolved .mascot-resolved {
    opacity: 1;
    animation: resolvedFigure 3.2s ease-in-out both;
}

.mascot-stage.mode-failure {
    width: 220px;
    height: 265px;
    animation: failureStage 2.7s ease-in-out both;
}
.mascot-stage.mode-failure .mascot-failure {
    opacity: 1;
    animation: failureFigure 2.7s ease-in-out both;
}
@keyframes failureStage {
    0% { opacity: 0; transform: translateY(-8px) scale(.82); }
    17%, 78% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-4px) scale(.93); }
}
@keyframes failureFigure {
    0%, 100% { transform: rotate(0); }
    35% { transform: rotate(-3deg); }
    55% { transform: rotate(2deg); }
}
.language-test { display: flex; justify-content: flex-end; gap: 5px; padding: 7px 16px; background: #fff; }
.message.assistant, .chat-message.assistant { background: var(--chat-assistant-bubble, #fff); }
.message.user, .chat-message.user { background: var(--chat-user-bubble); }
.language-test button { border: 1px solid var(--border); border-radius: 5px; background: #fff; padding: 5px 9px; cursor: pointer; }
.language-test button.is-active { background: var(--ogbl-blue); border-color: var(--ogbl-blue); color: #fff; font-weight: 700; }
.language-test button:hover, .language-test button:focus-visible { border-color: var(--ogbl-blue); }
.support-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px 20px; max-height: 45vh; overflow-y: auto; border-top: 1px solid var(--border); }
.support-form[hidden] { display: none; }
.support-form label { display: grid; gap: 4px; font-size: 13px; }
.support-form input, .support-form textarea { width: 100%; padding: 9px; border: 1px solid var(--border); border-radius: 6px; font: inherit; }
.support-form label:nth-child(n+4) { grid-column: 1 / -1; }
.support-form button { justify-self: start; }
.guide-open { display: block; margin-top: 10px; padding: 0; border: 0; background: none; color: var(--ogbl-blue); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.guide-full { display: inline-block; margin-top: 10px; color: var(--ogbl-blue); font-size: .9em; }
.guide-dialog { width: min(610px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 12px; border: 0; border-radius: 14px; box-shadow: 0 18px 60px #17213b55; }
.guide-dialog::backdrop { background: #17213ba8; }
.guide-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.guide-dialog h2 { margin:0 0 10px; font-size:1.1rem; }
.guide-dialog img { display: block; width: 100%; height: auto; max-height: calc(100vh - 110px); object-fit: contain; cursor:zoom-in; }
.guide-dialog img.is-zoomed { width:auto; max-width:none; max-height:none; cursor:zoom-out; }
.guide-dialog:has(img.is-zoomed) { overflow:auto; }
.guide-close { display: block; margin-left: auto; padding: 6px 10px; border: 0; background: transparent; color: var(--ogbl-blue); font: inherit; font-weight: 700; cursor: pointer; }
.support-privacy { grid-column:1 / -1; font-size:.85rem; color:var(--muted); margin:0; }
:focus-visible { outline:3px solid #f0b323; outline-offset:3px; }

@keyframes resolvedStage {
    0% { opacity: 0; transform: translate(-20px,-10px) scale(.55); }
    16% { opacity: 1; transform: translate(8px,7px) scale(1.10); }
    27% { transform: translate(2px,1px) scale(1); }
    78% { opacity: 1; transform: translate(2px,1px) scale(1.02); }
    100% { opacity: 0; transform: translate(-3px,-5px) scale(.92); }
}

@keyframes resolvedFigure {
    0%,100% { transform: rotate(0); }
    28% { transform: rotate(-2deg); }
    38% { transform: rotate(2deg); }
    48% { transform: rotate(-1deg); }
}

/* Confettis CSS uniquement pour la résolution. */
.confetti {
    position: absolute;
    width: 8px;
    height: 16px;
    border-radius: 2px;
    opacity: 0;
}

.mode-resolved .confetti {
    opacity: 1;
    animation: confettiFall 1.7s ease-out 1;
}

.confetti-a { left: 16%; top: 18%; background: #e30613; transform: rotate(18deg); }
.confetti-b { left: 78%; top: 22%; background: #2086d4; transform: rotate(-20deg); animation-delay: .08s !important; }
.confetti-c { left: 28%; top: 5%; background: #f0b323; transform: rotate(35deg); animation-delay: .14s !important; }
.confetti-d { left: 86%; top: 8%; background: #38a169; transform: rotate(-35deg); animation-delay: .20s !important; }

@keyframes confettiFall {
    0% { opacity: 0; transform: translateY(-18px) rotate(0); }
    22% { opacity: 1; }
    100% { opacity: 0; transform: translateY(105px) rotate(250deg); }
}

@media (prefers-reduced-motion: reduce) {
    .avatar-breathe,
    .mascot-stage,
    .mascot-figure,
    .confetti {
        animation: none !important;
        transition: none !important;
    }

    .mascot-stage.is-visible {
        opacity: 1;
    }
}

body[data-animation-enabled="0"] .mascot-stage.mode-resolved,
body[data-animation-enabled="0"] .mascot-stage.mode-resolved .mascot-figure,
body[data-animation-enabled="0"] .mascot-stage.mode-resolved .confetti {
    animation: none !important;
}

/* Tablette */
@media (max-width: 900px) {
    .page-frame {
        width: min(880px, calc(100% - 20px));
        margin-top: 10px;
    }

    .chat-main {
        min-height: 520px;
    }

    .message {
        max-width: 82%;
    }
}

/* Smartphone */
@media (max-width: 640px) {
    .support-form { grid-template-columns: 1fr; }
    .support-form label { grid-column: 1 / -1; }
    .page-frame {
        width: 100%;
        margin: 0;
    }

    .chat-shell {
        min-height: 100vh;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .chat-header {
        padding: 11px 14px;
        border-radius: 0;
    }

    .chat-avatar {
        width: 49px;
        height: 49px;
    }

    .chat-title {
        font-size: 19px;
    }

    .chat-main {
        min-height: 0;
        padding: 15px;
    }

    .message {
        max-width: 92%;
    }

    .options {
        gap: 7px;
    }

    .option-button {
        padding: 9px 12px;
        font-size: 14px;
    }

    .chat-footer {
        align-items: flex-start;
        flex-direction: column;
        padding: 11px 15px;
    }

    .mascot-stage { transform-origin: 28px 0; }

    .mascot-stage.mode-expressive,
    .mascot-stage.mode-resolved,
    .mascot-stage.mode-failure {
        width: 205px;
        height: 240px;
    }
}