/**
 * H2JChat - Frontend CSS
 *
 * Styles pour le widget flottant et le mode sidebar
 * Les variables de couleur sont injectées via JS depuis h2jChatConfig.primaryColor
 *
 * @author H2J Ecosystem <info@2klove.fr>
 * @copyright 2024-2026 H2J sas RCS 978391720
 */

/* Variables par défaut (overrides via JS) */
:root {
    --h2jchat-primary: #00bcd4;
    --h2jchat-primary-dark: #0097a7;
    --h2jchat-bg: #ffffff;
    --h2jchat-shadow: 0 8px 32px rgba(0,0,0,0.18);
    --h2jchat-radius: 16px;
    --h2jchat-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Reset dans le widget */
.h2jchat-widget *,
.h2jchat-sidebar * {
    box-sizing: border-box;
    font-family: var(--h2jchat-font);
}

/* =============================================
   WIDGET FLOTTANT
   ============================================= */

.h2jchat-bubble {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    cursor: pointer;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--h2jchat-primary);
    box-shadow: var(--h2jchat-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
    outline: none;
}

.h2jchat-bubble:hover {
    transform: scale(1.08);
    box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}

.h2jchat-bubble--bottom-left {
    right: auto;
    left: 24px;
}

.h2jchat-widget {
    position: fixed;
    bottom: 96px;
    right: 24px;
    z-index: 9998;
    width: 360px;
    max-width: calc(100vw - 32px);
    background: var(--h2jchat-bg);
    border-radius: var(--h2jchat-radius);
    box-shadow: var(--h2jchat-shadow);
    display: none;
    flex-direction: column;
    overflow: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease;
    max-height: calc(100vh - 120px);
}

.h2jchat-widget--open {
    display: flex;
}

.h2jchat-widget--bottom-left {
    right: auto;
    left: 24px;
}

/* Header du widget */
.h2jchat-header {
    background: var(--h2jchat-primary);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.h2jchat-header__info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.h2jchat-header__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.h2jchat-header__name {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
}

.h2jchat-header__status {
    color: rgba(255,255,255,0.85);
    font-size: 12px;
}

.h2jchat-header__actions {
    display: flex;
    gap: 4px;
}

.h2jchat-header__btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: background 0.2s;
}

.h2jchat-header__btn:hover {
    background: rgba(255,255,255,0.35);
}

/* Liens header (FAQ / Contact) */
.h2jchat-header__links {
    display: flex;
    gap: 8px;
    padding: 6px 16px;
    background: var(--h2jchat-primary-dark);
}

.h2jchat-header__link {
    color: rgba(255,255,255,0.9);
    font-size: 12px;
    text-decoration: none;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(255,255,255,0.15);
    transition: background 0.2s;
}

.h2jchat-header__link:hover {
    background: rgba(255,255,255,0.25);
    color: #fff;
    text-decoration: none;
}

/* Zone de messages */
.h2jchat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 200px;
    max-height: 350px;
    background: #f8f9fa;
}

/* Bulles de messages */
.h2jchat-msg {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    max-width: 85%;
}

.h2jchat-msg--user {
    flex-direction: row-reverse;
    margin-left: auto;
}

.h2jchat-msg__bubble {
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word;
}

.h2jchat-msg--eve .h2jchat-msg__bubble {
    background: #ffffff;
    color: #333;
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.h2jchat-msg--user .h2jchat-msg__bubble {
    background: var(--h2jchat-primary);
    color: #fff;
    border-bottom-right-radius: 4px;
}

/* Feedback FAQ */
.h2jchat-feedback {
    display: flex;
    gap: 8px;
    margin-top: 6px;
    font-size: 12px;
    color: #666;
    align-items: center;
}

.h2jchat-feedback__btn {
    padding: 3px 10px;
    border-radius: 12px;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}

.h2jchat-feedback__btn:hover {
    border-color: var(--h2jchat-primary);
    color: var(--h2jchat-primary);
}

.h2jchat-feedback__btn--active {
    background: var(--h2jchat-primary);
    color: #fff;
    border-color: var(--h2jchat-primary);
}

/* Zone d'escalade */
.h2jchat-escalation {
    padding: 12px 16px;
    background: #fff;
    border-top: 1px solid #eee;
}

.h2jchat-escalation__title {
    font-size: 12px;
    color: #666;
    margin-bottom: 8px;
    text-align: center;
}

.h2jchat-escalation__buttons {
    display: flex;
    gap: 8px;
}

.h2jchat-escalation__btn {
    flex: 1;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    text-align: center;
    text-decoration: none;
    color: #333;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.h2jchat-escalation__btn--whatsapp {
    border-color: #25D366;
    color: #25D366;
}

.h2jchat-escalation__btn--whatsapp:hover {
    background: #25D366;
    color: #fff;
}

.h2jchat-escalation__btn--email:hover {
    background: #f0f0f0;
}

/* Zone de saisie */
.h2jchat-input {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid #eee;
    background: #fff;
}

.h2jchat-input__field {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    font-size: 14px;
    outline: none;
    resize: none;
    font-family: var(--h2jchat-font);
    transition: border-color 0.2s;
    min-height: 40px;
    max-height: 100px;
}

.h2jchat-input__field:focus {
    border-color: var(--h2jchat-primary);
}

.h2jchat-input__send {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--h2jchat-primary);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: background 0.2s, transform 0.2s;
    flex-shrink: 0;
    align-self: flex-end;
}

.h2jchat-input__send:hover {
    background: var(--h2jchat-primary-dark);
    transform: scale(1.05);
}

/* Typing indicator */
.h2jchat-typing {
    display: flex;
    gap: 4px;
    padding: 10px 14px;
    background: #fff;
    border-radius: 16px;
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    width: 60px;
}

.h2jchat-typing__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ccc;
    animation: h2jchat-bounce 1.2s infinite;
}

.h2jchat-typing__dot:nth-child(2) { animation-delay: 0.2s; }
.h2jchat-typing__dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes h2jchat-bounce {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-8px); }
}

/* Badge de notification */
.h2jchat-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
}

/* =============================================
   MODE SIDEBAR
   ============================================= */

.h2jchat-sidebar-btn {
    cursor: pointer;
    background: var(--h2jchat-primary);
    color: #fff;
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: box-shadow 0.2s, transform 0.2s;
    margin-bottom: 12px;
    border: none;
    width: 100%;
    text-align: left;
}

.h2jchat-sidebar-btn:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    transform: translateY(-1px);
}

.h2jchat-sidebar-btn__icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.h2jchat-sidebar-btn__text {
    flex: 1;
}

.h2jchat-sidebar-btn__label {
    font-size: 14px;
    font-weight: 700;
    display: block;
}

.h2jchat-sidebar-btn__status {
    font-size: 11px;
    opacity: 0.85;
    display: flex;
    align-items: center;
    gap: 4px;
}

.h2jchat-sidebar-btn__status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ade80;
    animation: h2jchat-pulse 2s infinite;
}

.h2jchat-sidebar-btn__status-dot--offline {
    background: #94a3b8;
    animation: none;
}

@keyframes h2jchat-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(0.85); }
}

/* Panel sidebar (panneau coulissant) */
.h2jchat-panel {
    position: fixed;
    top: 0;
    right: -400px;
    width: 380px;
    max-width: 100vw;
    height: 100vh;
    background: #fff;
    box-shadow: -4px 0 24px rgba(0,0,0,0.15);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
}

.h2jchat-panel--open {
    right: 0;
}

.h2jchat-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    z-index: 99998;
    display: none;
}

.h2jchat-overlay--visible {
    display: block;
}

/* Responsive */
@media (max-width: 480px) {
    .h2jchat-widget {
        width: calc(100vw - 16px);
        right: 8px;
        bottom: 80px;
    }

    .h2jchat-panel {
        width: 100vw;
    }
}

/* =============================================
   v2.0.2 — MODE EMBEDDED MEGAMENU (compact)
   =============================================

   Quand le widget EVE est rendu dans un drawer megamenu via
   H2JWidgetRegistry::render('h2jchat_eve'), le template megamenu.tpl
   émet un wrapper .h2jchat-megamenu-widget qui sert de container
   à .og-sidebar-btn (créé dynamiquement par h2jchat-sidebar.js).

   v2.0.2 — Largeurs réduites : padding horizontal sur le li parent
   pour créer une marge dans le drawer, SVG EVE réduit 45→38px,
   badges et typos plus compacts, padding interne réduit. L'objectif :
   occuper moins de largeur visuelle et laisser respirer le drawer.

   Les règles adoptent les CSS vars du design system CUBX
   (--cubx-sidebar-*, --cubx-accent) avec fallback gracieux vers les
   valeurs par défaut du JS sidebar.
   ============================================= */

/* Padding horizontal sur le <li> parent pour aligner le widget sur les
   autres items du drawer (qui ont un padding via .h2j-mm-tree__row). */
.h2j-mm-tree__item--module-widget {
    padding: 0 12px;
}

.h2jchat-megamenu-widget {
    display: block;
    width: 100%;
    margin: 0;
}

/* Bouton sidebar EVE dans le drawer megamenu :
   padding interne réduit + marges latérales retirées (le padding du
   <li> parent prend le relais) + style drawer CUBX. */
.h2jchat-megamenu-widget .og-sidebar-btn {
    margin: 8px 0 0 0;
    padding: 10px 12px;
    gap: 10px;
    border-radius: 10px;
    background: var(--cubx-sidebar-card, var(--og-card, rgba(255, 255, 255, 0.05)));
    border: 1px solid var(--cubx-sidebar-border, rgba(255, 255, 255, 0.12));
}

.h2jchat-megamenu-widget .og-sidebar-btn:hover {
    /* v2.0.3 — Hover subtil cohérent avec le pattern des autres items drawer :
       léger éclaircissement du fond (pas de retournement complet), bordure accent
       comme signal visuel, et changement de couleur sur le titre uniquement.
       Évite le problème de contraste quand --cubx-accent est une couleur vive
       (or/jaune/etc.) qui rendrait les textes gris clair illisibles. */
    background: var(--cubx-sidebar-card-hover, rgba(255, 255, 255, 0.08));
    border-color: var(--cubx-accent, var(--og-primary, #00bcd4));
    transform: none; /* désactive le translateY dans le drawer étroit */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

/* Au hover, seul le titre "Une question ?" prend la couleur accent :
   signal d'interaction clair sans impacter la lisibilité des noms et badges. */
.h2jchat-megamenu-widget .og-sidebar-btn:hover .og-sidebar-btn-title {
    color: var(--cubx-accent, var(--og-primary, #00bcd4));
}

/* SVG EVE plus petit dans le drawer (45px → 38px) */
.h2jchat-megamenu-widget .og-sidebar-btn-eve {
    flex-shrink: 0;
    width: 38px;
    height: auto;
}
.h2jchat-megamenu-widget .og-sidebar-btn-eve svg {
    width: 38px !important;
    height: auto !important;
    display: block;
}

/* Titre compact */
.h2jchat-megamenu-widget .og-sidebar-btn-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--cubx-sidebar-text, var(--og-text, #fff));
}

/* Rows de status compactes (EVE + Conseiller) */
.h2jchat-megamenu-widget .og-status-row {
    font-size: 11px;
    gap: 5px;
    line-height: 1.3;
}
.h2jchat-megamenu-widget .og-status-icon {
    font-size: 12px;
}
.h2jchat-megamenu-widget .og-status-name {
    font-size: 11px;
    color: var(--cubx-sidebar-muted, var(--og-muted, #a0a0a0));
}

/* Badges plus compacts (24h/24 / EN LIGNE / HORS LIGNE) */
.h2jchat-megamenu-widget .og-status-badge {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    letter-spacing: 0.3px;
}

/* =============================================
   v2.0.4 — INVERSION LIGHT/DARK (widget EVE dans drawer megamenu)
   =============================================
   Contexte : le drawer megamenu CUBX est LIGHT par défaut (fond blanc,
   texte sombre). Le widget EVE était stylisé en DARK par défaut (hérité
   du mode sidebar hicartdrawer d'origine), ce qui créait une rupture
   visuelle avec les autres items/cartes du drawer (auth card, cart card,
   links_group, widgets wrappés, etc.) qui sont tous LIGHT.

   Cette section override la section v2.0.2 ci-dessus pour :
     - État par défaut : LIGHT (cohérent avec le drawer et les autres cartes)
     - État hover      : DARK (signal d'interaction fort, inversion visuelle)

   Les badges 24H/24 et HORS LIGNE gardent leurs couleurs sémantiques
   (vert / rouge) car ce sont des signaux de status immuables.
   Le SVG EVE garde ses couleurs internes (identité visuelle du personnage).
   ============================================= */

/* État par défaut : carte LIGHT, même style que .h2j-mm-auth-card /
   .h2j-mm-cart-card pour une cohérence parfaite avec les autres cartes
   du drawer. Overrides explicites pour neutraliser les vars CUBX qui
   pointent vers du sombre dans le préset sidebar par défaut. */
.h2jchat-megamenu-widget .og-sidebar-btn {
    background: var(--h2j-bg-light, #f8f7ff);
    border-color: var(--h2j-border, #e5e7eb);
    color: var(--h2j-text, #1a1f2c);
}
.h2jchat-megamenu-widget .og-sidebar-btn-title {
    color: var(--h2j-text, #1a1f2c);
}
.h2jchat-megamenu-widget .og-status-name {
    color: var(--h2j-text-light, #6b7280);
}

/* État hover : carte DARK avec texte clair. Remplace la règle v2.0.3
   qui faisait hover "light-plus" sur fond déjà dark. Maintenant l'hover
   est une vraie inversion contrastée. */
.h2jchat-megamenu-widget .og-sidebar-btn:hover {
    background: var(--h2j-text, #1a1f2c);
    border-color: var(--h2j-text, #1a1f2c);
    color: #ffffff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}
.h2jchat-megamenu-widget .og-sidebar-btn:hover .og-sidebar-btn-title {
    color: #ffffff;
}
.h2jchat-megamenu-widget .og-sidebar-btn:hover .og-status-name {
    color: rgba(255, 255, 255, 0.85);
}

/* Focus clavier : même apparence que hover pour l'accessibilité */
.h2jchat-megamenu-widget .og-sidebar-btn:focus-visible {
    outline: none;
    background: var(--h2j-text, #1a1f2c);
    border-color: var(--cubx-accent, var(--h2j-primary, #7c3aed));
    color: #ffffff;
    box-shadow: 0 0 0 2px var(--h2j-bg, #fff),
                0 0 0 4px var(--cubx-accent, var(--h2j-primary, #7c3aed));
}
.h2jchat-megamenu-widget .og-sidebar-btn:focus-visible .og-sidebar-btn-title,
.h2jchat-megamenu-widget .og-sidebar-btn:focus-visible .og-status-name {
    color: #ffffff;
}