/* ═══════════════════════════════════════════════════════════════════════════
   Islahate Chatbot Widget — chatbot.css
   All selectors are namespaced under .isl-* to avoid global collisions.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────────────────────────────────────── */
:root {
    --isl-accent       : #E65C00;
    --isl-accent-dark  : #C04E00;
    --isl-accent-light : #FFF3EC;
    --isl-bg           : #ffffff;
    --isl-bg-soft      : #F7F6F3;
    --isl-bg-muted     : #EFEDE8;
    --isl-text         : #1A1A1A;
    --isl-text-sub     : #6B6B6B;
    --isl-text-hint    : #ABABAB;
    --isl-border       : rgba(0, 0, 0, 0.11);
    --isl-border-med   : rgba(0, 0, 0, 0.20);
    --isl-shadow       : 0 8px 32px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.08);
    --isl-shadow-btn   : 0 4px 16px rgba(230, 92, 0, 0.40);
    --isl-r-sm         : 6px;
    --isl-r-md         : 10px;
    --isl-r-lg         : 16px;
    --isl-r-xl         : 20px;
    --isl-font         : 'DM Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --isl-w            : 380px;
    --isl-h            : 600px;
    --isl-transition   : 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Google Font (DM Sans) ──────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&display=swap');

/* ── Floating Trigger Button ────────────────────────────────────────────────── */
#isl-trigger {
    position         : fixed;
    bottom           : 28px;
    right            : 28px;
    z-index          : 9998;
    width            : 58px;
    height           : 58px;
    border-radius    : 50%;
    background       : var(--isl-accent);
    border           : none;
    cursor           : pointer;
    display          : flex;
    align-items      : center;
    justify-content  : center;
    box-shadow       : var(--isl-shadow-btn);
    transition       : transform var(--isl-transition), background var(--isl-transition);
    outline          : none;
}
#isl-trigger:hover  { background: var(--isl-accent-dark); transform: scale(1.08); }
#isl-trigger:active { transform: scale(0.95); }

#isl-trigger .isl-icon-chat,
#isl-trigger .isl-icon-close { transition: opacity 0.2s, transform 0.2s; position: absolute; }
#isl-trigger .isl-icon-close { opacity: 0; transform: rotate(-90deg) scale(0.7); }

#isl-trigger.is-open .isl-icon-chat  { opacity: 0; transform: rotate(90deg) scale(0.7); }
#isl-trigger.is-open .isl-icon-close { opacity: 1; transform: rotate(0deg) scale(1); }

/* Notification badge */
#isl-badge {
    position      : absolute;
    top           : -2px;
    right         : -2px;
    width         : 18px;
    height        : 18px;
    border-radius : 50%;
    background    : #E53935;
    color         : #fff;
    font-size     : 10px;
    font-weight   : 600;
    display       : flex;
    align-items   : center;
    justify-content: center;
    border        : 2px solid #fff;
    font-family   : var(--isl-font);
    transition    : opacity 0.2s;
}
#isl-badge[hidden] { display: none; }

/* ── Chat Panel ─────────────────────────────────────────────────────────────── */
#isl-panel {
    position       : fixed;
    bottom         : 100px;
    right          : 28px;
    z-index        : 9999;
    width          : var(--isl-w);
    height         : var(--isl-h);
    background     : var(--isl-bg);
    border-radius  : var(--isl-r-xl);
    box-shadow     : var(--isl-shadow);
    border         : 0.5px solid var(--isl-border);
    display        : flex;
    flex-direction : column;
    overflow       : hidden;
    font-family    : var(--isl-font);
    /* Entry animation */
    opacity        : 0;
    transform      : translateY(20px) scale(0.97);
    pointer-events : none;
    transition     : opacity var(--isl-transition), transform var(--isl-transition);
}
#isl-panel.is-open {
    opacity        : 1;
    transform      : translateY(0) scale(1);
    pointer-events : auto;
}

/* Mobile */
@media (max-width: 480px) {
    #isl-panel {
        width          : 100vw;
        height         : 100dvh;
        bottom         : 0;
        right          : 0;
        border-radius  : 0;
    }
    #isl-trigger { bottom: 18px; right: 18px; }
}

/* ── Header ─────────────────────────────────────────────────────────────────── */
.isl-header {
    background     : var(--isl-accent);
    padding        : 16px 18px;
    display        : flex;
    align-items    : center;
    gap            : 12px;
    flex-shrink    : 0;
}
.isl-header-avatar {
    width          : 40px;
    height         : 40px;
    border-radius  : 50%;
    background     : rgba(255,255,255,0.18);
    display        : flex;
    align-items    : center;
    justify-content: center;
    flex-shrink    : 0;
}
.isl-header-info { flex: 1; min-width: 0; }
.isl-header-name {
    color          : #fff;
    font-size      : 14px;
    font-weight    : 600;
    line-height    : 1.3;
    white-space    : nowrap;
    overflow       : hidden;
    text-overflow  : ellipsis;
}
.isl-header-tag  { color: rgba(255,255,255,0.72); font-size: 11.5px; margin-top: 1px; }
.isl-status-dot  {
    width          : 9px;
    height         : 9px;
    border-radius  : 50%;
    background     : #6EF574;
    box-shadow     : 0 0 0 2px rgba(255,255,255,0.3);
    flex-shrink    : 0;
}

/* ── Messages area ──────────────────────────────────────────────────────────── */
.isl-messages {
    flex           : 1;
    overflow-y     : auto;
    padding        : 18px 14px;
    display        : flex;
    flex-direction : column;
    gap            : 14px;
    background     : var(--isl-bg);
    scroll-behavior: smooth;
    min-height     : 0; 
    overflow-anchor: auto;
}
.isl-messages::-webkit-scrollbar       { width: 4px; }
.isl-messages::-webkit-scrollbar-thumb { background: var(--isl-bg-muted); border-radius: 4px; }

/* ── Message bubbles ────────────────────────────────────────────────────────── */
.isl-msg         { display: flex; flex-direction: column; max-width: 86%; gap: 4px; }
.isl-msg.bot     { align-self: flex-start; }
.isl-msg.user    { align-self: flex-end; }

.isl-bubble {
    padding        : 10px 14px;
    border-radius  : 16px;
    font-size      : 13.5px;
    line-height    : 1.55;
    word-break     : break-word;
}
.isl-msg.bot  .isl-bubble {
    background     : var(--isl-bg-soft);
    color          : var(--isl-text);
    border         : 0.5px solid var(--isl-border);
    border-bottom-left-radius: 4px;
}
.isl-msg.user .isl-bubble {
    background     : var(--isl-accent);
    color          : #fff;
    border-bottom-right-radius: 4px;
}
.isl-time {
    font-size      : 10.5px;
    color          : var(--isl-text-hint);
}
.isl-msg.bot  .isl-time { margin-left: 4px; }
.isl-msg.user .isl-time { align-self: flex-end; margin-right: 4px; }

/* Typing indicator */
.isl-typing {
    display        : flex;
    align-items    : center;
    gap            : 5px;
    padding        : 12px 14px;
}
.isl-typing span {
    width          : 7px;
    height         : 7px;
    border-radius  : 50%;
    background     : var(--isl-text-hint);
    animation      : isl-bounce 1.2s infinite;
}
.isl-typing span:nth-child(2) { animation-delay: 0.2s; }
.isl-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes isl-bounce {
    0%, 60%, 100% { transform: translateY(0); }
    30%           { transform: translateY(-6px); }
}

/* ── Quick action buttons ───────────────────────────────────────────────────── */
.isl-quick-btns {
    padding        : 8px 14px 6px;
    display        : flex;
    flex-wrap      : wrap;
    gap            : 6px;
    background     : var(--isl-bg);
    border-top     : 0.5px solid var(--isl-border);
    flex-shrink    : 0;
    min-height     : 0;
    max-height     : 140px; /* ✅ limite la hauteur */
    overflow-y     : auto;  /* ✅ scroll si trop de boutons */
}
.isl-qbtn {
    font-size      : 12px;
    padding        : 5px 12px;
    border-radius  : 20px;
    border         : 0.5px solid var(--isl-border-med);
    background     : var(--isl-bg);
    color          : var(--isl-text-sub);
    cursor         : pointer;
    font-family    : var(--isl-font);
    transition     : all 0.15s;
    white-space    : nowrap;
    line-height    : 1.4;
}
.isl-qbtn:hover  { background: var(--isl-accent-light); color: var(--isl-accent); border-color: var(--isl-accent); }
.isl-qbtn:active { transform: scale(0.96); }

/* ── Text input row ─────────────────────────────────────────────────────────── */
.isl-input-row {
    display        : flex;
    align-items    : center;
    gap            : 8px;
    padding        : 10px 12px;
    background     : var(--isl-bg);
    border-top     : 0.5px solid var(--isl-border);
    flex-shrink    : 0;
}
.isl-input {
    flex           : 1;
    border         : 0.5px solid var(--isl-border-med);
    border-radius  : 22px;
    padding        : 9px 16px;
    font-size      : 13px;
    background     : var(--isl-bg-soft);
    color          : var(--isl-text);
    outline        : none;
    font-family    : var(--isl-font);
    transition     : border-color 0.15s;
    min-width      : 0;
}
.isl-input:focus        { border-color: var(--isl-accent); }
.isl-input::placeholder { color: var(--isl-text-hint); }

.isl-send-btn {
    width          : 38px;
    height         : 38px;
    border-radius  : 50%;
    background     : var(--isl-accent);
    border         : none;
    cursor         : pointer;
    display        : flex;
    align-items    : center;
    justify-content: center;
    flex-shrink    : 0;
    transition     : background 0.15s, transform 0.15s;
    outline        : none;
}
.isl-send-btn:hover  { background: var(--isl-accent-dark); }
.isl-send-btn:active { transform: scale(0.92); }
.isl-send-btn svg    { width: 16px; height: 16px; fill: #fff; }

/* ── Inline Cards ───────────────────────────────────────────────────────────── */
.isl-card {
    background     : var(--isl-bg-soft);
    border         : 0.5px solid var(--isl-border);
    border-radius  : var(--isl-r-md);
    padding        : 11px 13px;
    margin-top     : 8px;
    font-size      : 12.5px;
    color          : var(--isl-text-sub);
}
.isl-card-row {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    margin-bottom  : 5px;
    gap            : 8px;
}
.isl-card-row:last-child { margin-bottom: 0; }
.isl-card-row span:last-child { color: var(--isl-text); font-size: 12px; text-align: right; }
.isl-card-id   { font-weight: 600; color: var(--isl-accent); font-size: 13px; }
.isl-card-sep  {
    border         : none;
    border-top     : 0.5px solid var(--isl-border);
    margin         : 7px 0;
}
.isl-card-note { font-size: 11.5px; color: var(--isl-text-hint); }

/* Status badges */
.isl-badge {
    font-size      : 10.5px;
    padding        : 2px 9px;
    border-radius  : 10px;
    font-weight    : 600;
    white-space    : nowrap;
}
.isl-badge.encours { background: #FFF0E6; color: #C04E00; }
.isl-badge.attente { background: #FFFBE6; color: #7A5D00; }
.isl-badge.termine { background: #E8F5E9; color: #1B5E20; }

/* ── FAQ list ───────────────────────────────────────────────────────────────── */
.isl-faq-list { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.isl-faq-item {
    padding        : 9px 12px;
    border         : 0.5px solid var(--isl-border-med);
    border-radius  : var(--isl-r-md);
    background     : var(--isl-bg);
    cursor         : pointer;
    font-size      : 13px;
    color          : var(--isl-text);
    font-family    : var(--isl-font);
    text-align     : left;
    width          : 100%;
    transition     : all 0.15s;
    line-height    : 1.4;
}
.isl-faq-item:hover { background: var(--isl-accent-light); border-color: var(--isl-accent); color: var(--isl-accent); }

/* ── Agence list ────────────────────────────────────────────────────────────── */
.isl-agence-list { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.isl-agence-item {
    padding        : 10px 13px;
    border         : 0.5px solid var(--isl-border-med);
    border-radius  : var(--isl-r-md);
    background     : var(--isl-bg);
    cursor         : pointer;
    transition     : all 0.15s;
}
.isl-agence-item:hover       { border-color: var(--isl-accent); background: var(--isl-accent-light); }
.isl-agence-item-name        { font-size: 13px; font-weight: 500; color: var(--isl-text); }
.isl-agence-item-loc         { font-size: 12px; color: var(--isl-text-hint); margin-top: 2px; }

/* ── Slot picker ────────────────────────────────────────────────────────────── */
.isl-slots { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 6px; }
.isl-slot {
    font-size      : 12px;
    padding        : 6px 11px;
    border-radius  : var(--isl-r-sm);
    border         : 0.5px solid var(--isl-border-med);
    background     : var(--isl-bg-soft);
    cursor         : pointer;
    color          : var(--isl-text);
    font-family    : var(--isl-font);
    transition     : all 0.15s;
}
.isl-slot:hover, .isl-slot.selected { background: var(--isl-accent-light); border-color: var(--isl-accent); color: var(--isl-accent); font-weight: 500; }
.isl-slot-confirm { font-size: 12px; color: var(--isl-accent); font-weight: 500; margin-top: 6px; min-height: 16px; }

/* ── Devis table ────────────────────────────────────────────────────────────── */
.isl-devis-row {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    padding        : 5px 0;
    border-bottom  : 0.5px solid var(--isl-border);
    font-size      : 12.5px;
    gap            : 8px;
}
.isl-devis-row:last-of-type { border-bottom: none; }
.isl-devis-price { color: var(--isl-accent); font-weight: 500; white-space: nowrap; }
.isl-disclaimer  { font-size: 11px; color: var(--isl-text-hint); margin-top: 8px; }

/* ── Emoji rating ───────────────────────────────────────────────────────────── */
.isl-rating { display: flex; gap: 12px; font-size: 24px; margin-top: 6px; }
.isl-rating span { cursor: pointer; transition: transform 0.15s; }
.isl-rating span:hover { transform: scale(1.25); }
.isl-rating-msg { font-size: 12px; color: var(--isl-accent); font-weight: 500; min-height: 16px; margin-top: 6px; }

/* ── Utility ────────────────────────────────────────────────────────────────── */
.isl-text-accent { color: var(--isl-accent); }
.isl-mt-6        { margin-top: 6px; }
.isl-loader      {
    display     : inline-block;
    width       : 14px;
    height      : 14px;
    border      : 2px solid rgba(230,92,0,0.2);
    border-top  : 2px solid var(--isl-accent);
    border-radius: 50%;
    animation   : isl-spin 0.7s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}
@keyframes isl-spin { to { transform: rotate(360deg); } }

/* ───────── FIX MOBILE CHATBOT ───────── */
@media (max-width: 768px) {

    /* bouton flottant — toujours visible */
    #isl-trigger {
        bottom: 16px !important;
        right: 16px !important;
        width: 54px !important;
        height: 54px !important;
        z-index: 9999 !important;
    }

    /* panel fermé — caché en bas */
    #isl-panel {
        width: 100vw !important;
        height: 100dvh !important;
        right: 0 !important;
        bottom: 0 !important;
        border-radius: 0 !important;
        z-index: 9998 !important;

        
        opacity: 0 !important;
        transform: translateY(100%) !important;   
        pointer-events: none !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.3s ease !important;
    }

    
    #isl-panel.is-open {
        opacity: 1 !important;
        transform: translateY(0) !important;      
        pointer-events: auto !important;
    }

   
    .isl-messages {
        padding: 12px 10px;
        min-height: 0;
    }

    
    .isl-input-row {
        padding-bottom: calc(8px + env(safe-area-inset-bottom));
    }

    
    .isl-quick-btns {
        max-height: 120px;
        overflow-y: auto;
    }
}

html, body { overflow-x: hidden; }