/* ======================================================
   ALISIOS EXPERIENCES — Assistant (chatbot)
   Widget autonome : bulle flottante + panneau de chat.
   N'utilise que les variables déjà définies dans style.css.
   ====================================================== */

.chatbot {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 950;
}

/* Masqué pendant que le menu mobile plein écran est ouvert,
   pour éviter un chevauchement visuel confus (#chatbot est
   un frère direct de #menuMobile sous <body>). */
#menuMobile.is-open ~ .chatbot {
    display: none;
}

/* ---------- Bulle ---------- */
.chatbot__bubble {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--dore);
    color: var(--noir);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(11, 11, 13, 0.45);
    transition: background 0.4s var(--ease-doux), transform 0.4s var(--ease-doux);
}

.chatbot__bubble:hover {
    background: var(--dore-clair);
    transform: translateY(-3px);
    animation-play-state: paused;
}

/* Petit sautillement périodique pour attirer l'œil vers le chatbot,
   tant que le panneau est fermé. */
@keyframes chatbotHop {
    0%, 82%, 100% { transform: translateY(0); }
    86% { transform: translateY(-9px); }
    90% { transform: translateY(0); }
    93% { transform: translateY(-5px); }
    96% { transform: translateY(0); }
}

.chatbot__bubble {
    animation: chatbotHop 6s ease-in-out 3;
    animation-delay: 2s;
}

.chatbot__bubble[aria-expanded="true"] {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .chatbot__bubble {
        animation: none;
    }
}

.chatbot__bubble-icon svg {
    width: 26px;
    height: 26px;
    stroke: currentColor;
    fill: none;
}

/* ---------- Panneau ----------
   Plein écran sur toutes les tailles : plus esthétique qu'une
   petite boîte flottante, et évite tout calcul de hauteur en vh
   (voir le commentaire dans la media query plus bas concernant
   la fiabilité de ces unités sur Safari iOS). */
.chatbot {
    z-index: 1001;
}

.chatbot__panel {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: 100%;
    background: var(--noir-volcan);
    border: 1px solid rgba(201, 162, 75, 0.18);
    border-radius: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(11, 11, 13, 0.55);
    opacity: 0;
    transform: translateY(16px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s var(--ease-doux),
        transform 0.4s var(--ease-doux),
        visibility 0.4s var(--ease-doux);
}

.chatbot__panel.is-open {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
}

.chatbot__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.3rem;
    border-bottom: 1px solid rgba(201, 162, 75, 0.18);
    flex-shrink: 0;
}

.chatbot__brand {
    font-family: var(--serif);
    font-size: 1.1rem;
    letter-spacing: 0.04em;
    color: var(--blanc-casse);
}

.chatbot__brand em {
    font-style: italic;
    color: var(--dore-clair);
}

.chatbot__close {
    font-size: 1.4rem;
    line-height: 1;
    color: var(--gris);
    padding: 0.2rem 0.5rem;
    transition: color 0.3s var(--ease-doux);
}

.chatbot__close:hover {
    color: var(--dore-clair);
}

/* ---------- Journal des messages ---------- */
.chatbot__log {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.chatbot__msg {
    max-width: 84%;
    padding: 0.7rem 1rem;
    border-radius: 14px;
    font-size: 0.88rem;
    line-height: 1.55;
    white-space: pre-line;
}

.chatbot__msg--bot {
    align-self: flex-start;
    background: rgba(244, 239, 230, 0.06);
    color: var(--blanc-casse);
    border-bottom-left-radius: 4px;
}

.chatbot__msg--user {
    align-self: flex-end;
    background: var(--ocean-clair);
    color: var(--blanc-casse);
    border-bottom-right-radius: 4px;
}

.chatbot__msg--typing {
    font-family: var(--serif);
    font-style: italic;
    letter-spacing: 0.08em;
    animation: chatbotTyping 1.2s ease-in-out infinite;
}

@keyframes chatbotTyping {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
    .chatbot__msg--typing {
        animation: none;
        opacity: 0.7;
    }
}

.chatbot__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.3rem;
}

.chatbot__chip {
    font-family: var(--sans);
    font-size: 0.76rem;
    letter-spacing: 0.04em;
    padding: 0.55rem 1rem;
    border: 1px solid var(--dore);
    border-radius: 100px;
    color: var(--dore-clair);
    background: transparent;
    transition: background 0.4s var(--ease-doux), color 0.4s var(--ease-doux);
}

.chatbot__chip:hover {
    background: var(--dore);
    color: var(--noir);
}

/* ---------- Saisie ---------- */
.chatbot__input-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 1.1rem;
    border-top: 1px solid rgba(201, 162, 75, 0.18);
    flex-shrink: 0;
}

.chatbot__input-row input {
    flex: 1;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(244, 239, 230, 0.25);
    padding: 0.5rem 0;
    color: var(--blanc-casse);
    font-family: var(--sans);
    /* 16px minimum, pas en rem : sous ce seuil, Safari iOS zoome
       automatiquement la page au focus du champ (et ne dézoome pas
       tout seul) — bug très connu, corrigé en fixant une taille
       absolue qui ne dépend d'aucune variable de mise à l'échelle. */
    font-size: 16px;
    transition: border-color 0.4s var(--ease-doux);
}

.chatbot__input-row input:focus {
    outline: none;
    border-color: var(--dore);
}

.chatbot__send {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--dore);
    color: var(--noir);
    font-size: 1rem;
    flex-shrink: 0;
    transition: background 0.4s var(--ease-doux);
}

.chatbot__send:hover {
    background: var(--dore-clair);
}

/* ---------- Accessibilité : mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
    .chatbot__panel,
    .chatbot__bubble {
        transition: none !important;
    }
}