/* =====================================================
   Mammouth IA Chatbot — Frontend Styles
   ===================================================== */

:root {
    --mc-primary:    #6c3fc8;
    --mc-primary-dk: #5a34a8;
    --mc-radius:     16px;
    --mc-shadow:     0 8px 32px rgba(0,0,0,.18);
    --mc-bg:         #ffffff;
    --mc-bg-user:    var(--mc-primary);
    --mc-bg-ai:      #f1f3f9;
    --mc-text:       #1a1a2e;
    --mc-text-light: #6b7280;
    --mc-border:     #e5e7eb;
    --mc-font:       -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Widget base ── */
.mammouth-widget {
    --mc-primary:    #6c3fc8; /* overridden inline */
    --mc-primary-dk: color-mix(in srgb, var(--mc-primary) 85%, black);
    font-family:     var(--mc-font);
    flex-direction:  column;
    background:      var(--mc-bg);
    border-radius:   var(--mc-radius);
    box-shadow:      var(--mc-shadow);
    overflow:        hidden;
    position:        relative;
    z-index:         9990;
}

.mammouth-inline {
    display:    flex;
    max-width:  700px;
    width:      100%;
    height:     580px;
    margin:     24px auto;
}

/* ── Floating ── */
.mammouth-floating {
    display:   flex;
    position:  fixed;
    bottom:    90px;
    right:     24px;
    width:     380px;
    height:    560px;
    animation: mmSlideUp .25s ease;
}

@keyframes mmSlideUp {
    from { opacity:0; transform:translateY(20px); }
    to   { opacity:1; transform:translateY(0); }
}

.mammouth-fab {
    position:        fixed;
    bottom:          24px;
    right:           24px;
    width:           56px;
    height:          56px;
    border-radius:   50%;
    background:      var(--mc-primary);
    color:           #fff;
    border:          none;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    box-shadow:      var(--mc-shadow);
    z-index:         9999;
    transition:      background .2s, transform .2s;
}
.mammouth-fab:hover { background:var(--mc-primary-dk); transform:scale(1.08); }
.mammouth-fab svg { width:26px; height:26px; }
.mammouth-fab-chat { display:block; }

/* ── Header ── */
.mammouth-header {
    background:      var(--mc-primary);
    color:           #fff;
    padding:         14px 16px;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-shrink:     0;
}

.mammouth-header-info {
    display:     flex;
    align-items: center;
    gap:         12px;
}

.mammouth-avatar {
    font-size:        24px;
    width:            40px;
    height:           40px;
    background:       rgba(255,255,255,.2);
    border-radius:    50%;
    display:          flex;
    align-items:      center;
    justify-content:  center;
}

.mammouth-header strong { display:block; font-size:15px; font-weight:700; }

.mammouth-status-dot {
    font-size:  11px;
    color:      rgba(255,255,255,.8);
    font-weight:400;
}

.mammouth-close-btn {
    background:    transparent;
    border:        none;
    color:         #fff;
    font-size:     18px;
    cursor:        pointer;
    padding:       4px 8px;
    border-radius: 6px;
    line-height:   1;
    transition:    background .2s;
}
.mammouth-close-btn:hover { background:rgba(255,255,255,.2); }

/* ── Messages area ── */
.mammouth-messages {
    flex:       1;
    overflow-y: auto;
    padding:    16px;
    display:    flex;
    flex-direction: column;
    gap:        12px;
    scroll-behavior: smooth;
}

.mammouth-msg { display:flex; flex-direction:column; max-width:85%; }
.mammouth-msg-assistant { align-self:flex-start; }
.mammouth-msg-user      { align-self:flex-end; }

.mammouth-bubble {
    padding:       10px 14px;
    border-radius: 18px;
    font-size:     14px;
    line-height:   1.55;
    word-break:    break-word;
}

.mammouth-msg-assistant .mammouth-bubble {
    background:         var(--mc-bg-ai);
    color:              var(--mc-text);
    border-bottom-left-radius: 4px;
}

.mammouth-msg-user .mammouth-bubble {
    background:              var(--mc-bg-user);
    color:                   #fff;
    border-bottom-right-radius: 4px;
}

/* Typing indicator */
.mammouth-typing .mammouth-bubble {
    background: var(--mc-bg-ai);
    padding:    12px 18px;
}

.mammouth-dots span {
    display:       inline-block;
    width:         6px;
    height:        6px;
    border-radius: 50%;
    background:    var(--mc-text-light);
    margin:        0 2px;
    animation:     mmDot 1.2s infinite ease-in-out;
}
.mammouth-dots span:nth-child(2) { animation-delay:.2s; }
.mammouth-dots span:nth-child(3) { animation-delay:.4s; }

@keyframes mmDot {
    0%,80%,100% { transform:scale(.6); opacity:.4; }
    40%         { transform:scale(1);  opacity:1; }
}

/* ── Input area ── */
.mammouth-input-area {
    display:       flex;
    align-items:   flex-end;
    gap:           8px;
    padding:       12px 14px;
    border-top:    1px solid var(--mc-border);
    background:    #fafafa;
    flex-shrink:   0;
}

#mammouth-input {
    flex:          1;
    border:        1px solid var(--mc-border);
    border-radius: 12px;
    padding:       10px 14px;
    font-family:   var(--mc-font);
    font-size:     14px;
    resize:        none;
    outline:       none;
    max-height:    120px;
    overflow-y:    auto;
    transition:    border-color .2s;
    background:    #fff;
}
#mammouth-input:focus { border-color:var(--mc-primary); }

.mammouth-send-btn {
    background:    var(--mc-primary);
    color:         #fff;
    border:        none;
    border-radius: 50%;
    width:         40px;
    height:        40px;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content:center;
    flex-shrink:   0;
    transition:    background .2s, transform .15s;
}
.mammouth-send-btn:hover   { background:var(--mc-primary-dk); transform:scale(1.05); }
.mammouth-send-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.mammouth-send-btn svg { width:18px; height:18px; }

/* ── Submit form ── */
.mammouth-submit-form {
    padding:       16px;
    border-top:    1px solid var(--mc-border);
    flex-shrink:   0;
    background:    #f8f9ff;
}
.mammouth-submit-form p { margin:0 0 10px; font-size:13px; color:var(--mc-text-light); }

.mammouth-field {
    display:       block;
    width:         100%;
    box-sizing:    border-box;
    border:        1px solid var(--mc-border);
    border-radius: 8px;
    padding:       9px 12px;
    font-size:     13px;
    margin-bottom: 8px;
    font-family:   var(--mc-font);
    outline:       none;
    transition:    border-color .2s;
}
.mammouth-field:focus { border-color:var(--mc-primary); }

.mammouth-primary-btn {
    width:         100%;
    background:    var(--mc-primary);
    color:         #fff;
    border:        none;
    border-radius: 8px;
    padding:       10px;
    font-size:     14px;
    font-weight:   600;
    cursor:        pointer;
    transition:    background .2s;
    margin-bottom: 6px;
}
.mammouth-primary-btn:hover { background:var(--mc-primary-dk); }

.mammouth-secondary-btn {
    width:         100%;
    background:    transparent;
    color:         var(--mc-text-light);
    border:        1px solid var(--mc-border);
    border-radius: 8px;
    padding:       8px;
    font-size:     13px;
    cursor:        pointer;
    transition:    background .2s;
}
.mammouth-secondary-btn:hover { background:#f0f0f0; }

/* ── Footer ── */
.mammouth-footer {
    padding:         8px 14px;
    border-top:      1px solid var(--mc-border);
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    background:      #fafafa;
    flex-shrink:     0;
}

.mammouth-ticket-btn {
    background:    transparent;
    border:        1px solid var(--mc-primary);
    color:         var(--mc-primary);
    border-radius: 20px;
    padding:       5px 12px;
    font-size:     12px;
    cursor:        pointer;
    font-weight:   600;
    transition:    all .2s;
}
.mammouth-ticket-btn:hover {
    background:    var(--mc-primary);
    color:         #fff;
}

.mammouth-branding { font-size:11px; color:var(--mc-text-light); }
.mammouth-branding a { color:var(--mc-text-light); text-decoration:none; }
.mammouth-branding a:hover { text-decoration:underline; }

/* ── Success message ── */
.mammouth-success {
    text-align:  center;
    padding:     24px 16px;
    flex:        1;
    display:     flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:         12px;
    color:       var(--mc-text);
}
.mammouth-success-icon { font-size:48px; }
.mammouth-success h3   { margin:0; font-size:18px; }
.mammouth-success p    { margin:0; color:var(--mc-text-light); font-size:14px; }

/* ── Scrollbar ── */
.mammouth-messages::-webkit-scrollbar { width:4px; }
.mammouth-messages::-webkit-scrollbar-track  { background:transparent; }
.mammouth-messages::-webkit-scrollbar-thumb  { background:var(--mc-border); border-radius:2px; }

/* ── Erreur bubble ── */
.mammouth-bubble-error {
    background:  #fee2e2 !important;
    color:       #991b1b !important;
    border:      1px solid #fca5a5;
}

/* ── Animation message entrant ── */
.mammouth-msg-new {
    animation: mmFadeIn .3s ease;
}
@keyframes mmFadeIn {
    from { opacity:0; transform:translateY(6px); }
    to   { opacity:1; transform:translateY(0); }
}

/* ── Shake champ invalide ── */
.mammouth-shake {
    animation: mmShake .4s ease;
    border-color: #dc2626 !important;
}
@keyframes mmShake {
    0%,100% { transform:translateX(0); }
    20%     { transform:translateX(-6px); }
    40%     { transform:translateX(6px); }
    60%     { transform:translateX(-4px); }
    80%     { transform:translateX(4px); }
}

/* ── Erreur champ ── */
.mammouth-field-error {
    color:       #dc2626;
    font-size:   12px;
    margin:      0 0 8px;
}

/* ── Responsive mobile ── */
@media (max-width: 480px) {
    .mammouth-floating {
        width:  100vw;
        height: 100dvh;
        bottom: 0;
        right:  0;
        border-radius: 0;
    }
    .mammouth-fab {
        bottom: 16px;
        right:  16px;
    }
}