/* ════════════════════════════════════════════════════════════════════
   Mini chatbot L.U.M.A. (préfixe lvw-) : le personnage flotte dans le coin, le panneau est sobre.
   Réutilise les styles de messages de luma_v2.css (lv2-msg, lv2-bubble, lv2-srcs...).
   ════════════════════════════════════════════════════════════════════ */

.lvw {
    --lv2-radius: 16px;
    --lv2-radius-sm: 10px;
    --lv2-tint: color-mix(in srgb, var(--primary) 10%, transparent);
    --lv2-tint-strong: color-mix(in srgb, var(--primary) 18%, transparent);
    --lv2-line: color-mix(in srgb, var(--border-color) 85%, transparent);
    --lv2-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ── Le personnage lui-même sert de bulle ── */
.lvw-bubble {
    position: fixed;
    right: 14px;
    bottom: 6px;
    z-index: 800;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    user-select: none;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.28));
    transition: transform 0.2s var(--lv2-ease), filter 0.2s;
}
.lvw-bubble:hover { transform: translateY(-4px); filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.34)); }
.lvw-bubble:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 16px; }
.lvw-bubble > svg { display: block; overflow: visible; }

/* ── Panneau ── */
.lvw-panel {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 800;
    display: flex;
    flex-direction: column;
    width: min(380px, calc(100vw - 24px));
    height: min(580px, calc(100vh - 80px));
    border: 1px solid var(--lv2-line);
    border-radius: 18px;
    background: var(--bg-card);
    color: var(--text-main);
    box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    animation: lvw-pop 0.24s var(--lv2-ease);
}
@keyframes lvw-pop { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }

.lvw-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--lv2-line); flex-shrink: 0; }
.lvw-head { position: relative; }
.lvw-switch { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 6px; align-items: center; padding: 3px 8px; border: none; border-radius: 10px; background: transparent; color: var(--text-main); font: inherit; text-align: left; cursor: pointer; transition: background 0.15s; }
.lvw-switch:hover { background: var(--lv2-tint); }
.lvw-switch-title { grid-row: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.88rem; font-weight: 700; }
.lvw-switch small { grid-row: 2; font-size: 0.66rem; color: var(--text-muted); }
.lvw-switch i { grid-column: 2; grid-row: 1 / span 2; font-size: 1.1rem; color: var(--text-muted); }

/* Liste des discussions déroulée sous l'en-tête (réutilise le gestionnaire de /luma : épingler, supprimer, 10 maximum) */
.lvw-convs { position: absolute; top: 61px; left: 8px; right: 8px; z-index: 5; display: flex; max-height: min(360px, calc(100% - 90px)); border-radius: 14px; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.35); animation: lvw-pop 0.18s var(--lv2-ease); }
.lvw-convs > .lv2-convs { flex: 1; min-height: 0; margin: 0; }
.lvw-head-avatar { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; }
.lvw-iconbtn { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: none; border-radius: 50%; background: transparent; color: var(--text-muted); font-size: 1.05rem; cursor: pointer; transition: background 0.15s, color 0.15s; }
.lvw-iconbtn:hover:not(:disabled) { background: var(--lv2-tint); color: var(--text-main); }
.lvw-iconbtn:disabled { opacity: 0.4; cursor: default; }

.lvw-thread { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth; }

/* Messages façon discussion : bulles simples, sans avatar */
.lvw .lv2-msg { gap: 0; }
.lvw .lv2-bot { display: none; }
.lvw .lv2-msg-ai .lv2-msg-main { max-width: 100%; }
.lvw .lv2-bubble { padding: 9px 13px; border-radius: 14px; font-size: 0.85rem; line-height: 1.45; }
.lvw .lv2-msg-ai .lv2-bubble { border-bottom-left-radius: 4px; }
/* Le pourcentage se met sur l'enveloppe (largeur de référence stable) : sur la bulle, il se calculait sur son propre contenu et coupait les messages courts. */
.lvw .lv2-user-wrap { max-width: 88%; }
.lvw .lv2-bubble-user { border-bottom-right-radius: 4px; }
.lvw .lv2-srcchip span { max-width: 170px; }

/* ── Saisie en pilule ── */
.lvw-composer { display: flex; align-items: flex-end; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--lv2-line); flex-shrink: 0; }
.lvw-composer textarea {
    flex: 1;
    min-width: 0;
    max-height: 110px;
    padding: 9px 15px;
    border: 1px solid var(--lv2-line);
    border-radius: 20px;
    background: var(--bg-body);
    color: var(--text-main);
    font: inherit;
    font-size: 0.85rem;
    line-height: 1.35;
    resize: none;
    transition: border-color 0.15s;
}
.lvw-composer textarea:focus { outline: none; border-color: var(--primary); }
.lvw-send, .lvw-rt { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; padding: 0; border: none; border-radius: 50%; font-size: 1rem; cursor: pointer; transition: opacity 0.15s, background 0.15s; }
.lvw-send { background: var(--primary); color: var(--text-on-primary, #fff); }
.lvw-rt { background: transparent; border: 1px solid var(--lv2-line); color: var(--text-muted); }
.lvw-rt:hover:not(:disabled) { color: var(--text-main); border-color: var(--primary); }
.lvw-send:disabled, .lvw-rt:disabled { opacity: 0.4; cursor: not-allowed; }

@media (max-width: 600px) {
    .lvw-bubble { right: 6px; }
    .lvw-panel { right: 8px; left: 8px; bottom: 8px; width: auto; height: calc(100vh - 60px); }
}
@media (prefers-reduced-motion: reduce) { .lvw-panel { animation: none; } }

/* Partie en cours : le mini chatbot reste au-dessus de la fenêtre du jeu (z-index 10000), net et non flouté */
.lvw.is-gaming .lvw-bubble, .lvw.is-gaming .lvw-panel { z-index: 10020; }