/* ============================================================
   B-viewer — Page Agent IA (AGENT_UI_V3)
   Refonte de disposition en CSS Grid : conversation à gauche
   en colonne collante, réglages empilés à droite, barre
   d'actions fixée en bas.
   Aucune modification de app.py, aucun callback impacté.

   Ordre des enfants de agent_layout (nth-child) :
     1 en-tête · 2 message de sauvegarde · 3 Activation
     4 Conversation · 5 Sources · 6 Planning · 7 Canal
     8 Graphiques · 9 Boutons d'action · 10 Résultat de test
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

#agent-content {
    --bv-indigo:  #667eea;
    --bv-violet:  #764ba2;
    --bv-blue:    #3182ce;
    --bv-green:   #38a169;
    --bv-ink:     #1a202c;
    --bv-heading: #2d3748;
    --bv-body:    #4a5568;
    --bv-muted:   #718096;
    --bv-faint:   #a0aec0;
    --bv-line:    #e2e8f0;
    --bv-canvas:  #f7fafc;
    --bv-fill:    #f1f4f9;

    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

/* ============================================================
   1. DISPOSITION EN DEUX COLONNES
   ============================================================ */

@media (min-width: 1024px) {

    #agent-content > div {
        display: grid !important;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) !important;
        align-items: start !important;
        column-gap: 20px !important;
        row-gap: 16px !important;
        max-width: 1280px !important;
        padding-bottom: 96px !important;
    }

    /* La grille gère les espacements : on neutralise les marges héritées */
    #agent-content > div > div { margin-bottom: 0 !important; }

    /* Pleine largeur */
    #agent-content > div > :nth-child(1),
    #agent-content > div > :nth-child(2),
    #agent-content > div > :nth-child(9),
    #agent-content > div > :nth-child(10) {
        grid-column: 1 / -1 !important;
    }

    /* Colonne gauche : la conversation, collante et pleine hauteur */
    #agent-content > div > :nth-child(4) {
        grid-column: 1 !important;
        grid-row: 3 / span 5 !important;
        position: sticky !important;
        top: 16px !important;
        display: flex !important;
        flex-direction: column !important;
        max-height: calc(100vh - 130px) !important;
    }

    /* Colonne droite : les réglages, dans l'ordre d'usage */
    #agent-content > div > :nth-child(3) { grid-column: 2 !important; grid-row: 3 !important; }
    #agent-content > div > :nth-child(5) { grid-column: 2 !important; grid-row: 4 !important; }
    #agent-content > div > :nth-child(6) { grid-column: 2 !important; grid-row: 5 !important; }
    #agent-content > div > :nth-child(7) { grid-column: 2 !important; grid-row: 6 !important; }
    #agent-content > div > :nth-child(8) { grid-column: 2 !important; grid-row: 7 !important; }

    /* La conversation occupe l'espace restant de sa carte */
    #agent-content > div > :nth-child(4) > #agent-config-chat-history {
        flex: 1 1 auto !important;
        height: auto !important;
        min-height: 260px !important;
    }

    /* Barre d'actions fixée en bas de l'écran */
    #agent-content > div > :nth-child(9) {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 20;
        background: rgba(247, 250, 252, 0.92) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-top: 1px solid var(--bv-line) !important;
        border-radius: 16px 16px 0 0;
        padding: 14px 18px !important;
        margin: 0 !important;
        justify-content: flex-end !important;
    }
}

/* ============================================================
   2. CARTES
   ============================================================ */

#agent-content > div > div {
    border-radius: 18px !important;
    transition: box-shadow .2s ease, border-color .2s ease;
}

#agent-content > div > :nth-child(3):hover,
#agent-content > div > :nth-child(5):hover,
#agent-content > div > :nth-child(6):hover,
#agent-content > div > :nth-child(7):hover,
#agent-content > div > :nth-child(8):hover {
    border-color: rgba(102, 126, 234, .32) !important;
    box-shadow: 0 10px 28px -12px rgba(102, 126, 234, .34) !important;
}

#agent-content h3,
#agent-content h4 {
    color: var(--bv-heading) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

#agent-content p,
#agent-content span,
#agent-content div {
    line-height: 1.55;
}

/* ============================================================
   3. CONVERSATION
   ============================================================ */

#agent-config-chat-history {
    height: 460px;
    padding: 20px !important;
    border: 1px solid var(--bv-line) !important;
    border-radius: 16px !important;
    background:
        radial-gradient(28rem 18rem at 100% 0%, rgba(102, 126, 234, .05), transparent 62%),
        #ffffff !important;
    box-shadow: inset 0 1px 3px rgba(26, 32, 44, .04) !important;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
}

#agent-config-chat-history::-webkit-scrollbar { width: 8px; }
#agent-config-chat-history::-webkit-scrollbar-track { background: transparent; }
#agent-config-chat-history::-webkit-scrollbar-thumb { background: #d7dde7; border-radius: 99px; }
#agent-config-chat-history::-webkit-scrollbar-thumb:hover { background: var(--bv-faint); }

#agent-config-chat-history > div {
    animation: bvMsgIn .26s ease both;
}

@keyframes bvMsgIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* Écran d'accueil quand la conversation est vide */
#agent-config-chat-history:empty::before {
    content: 'Racontez votre activité, vos clients et ce que vous voulez suivre. L’agent en déduira sa mission et ses indicateurs.';
    display: block;
    max-width: 340px;
    margin: 22% auto 0;
    color: var(--bv-faint);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.65;
    text-align: center;
}

/* ============================================================
   4. ZONE DE SAISIE
   ============================================================ */

/* Le composeur reste au fond de la carte de conversation */
#agent-content > div > :nth-child(4) > div:has(> #agent-config-message-input) {
    flex: 0 0 auto !important;
    margin-top: 14px !important;
}

#agent-config-message-input {
    box-sizing: border-box !important;
    height: 52px !important;
    padding: 0 18px !important;
    border: 1.5px solid var(--bv-line) !important;
    border-radius: 14px !important;
    background: var(--bv-fill) !important;
    box-shadow: none !important;
    color: var(--bv-ink) !important;
    font-family: inherit !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease !important;
}

#agent-config-message-input::placeholder { color: var(--bv-faint) !important; font-weight: 400 !important; }
#agent-config-message-input:hover        { background: #eaeff6 !important; }

#agent-config-message-input:focus {
    outline: none !important;
    background: #ffffff !important;
    border-color: var(--bv-indigo) !important;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, .17) !important;
}

#agent-config-send-btn {
    background: linear-gradient(120deg, var(--bv-indigo) 0%, var(--bv-violet) 100%) !important;
    background-size: 175% 100% !important;
    background-position: 0% 50% !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 18px -5px rgba(102, 126, 234, .45) !important;
    font-family: inherit !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    height: 52px !important;
    padding: 0 26px !important;
    white-space: nowrap;
    transition: background-position .5s ease, transform .16s ease, box-shadow .16s ease !important;
}

#agent-config-send-btn:hover {
    background-position: 100% 50% !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 14px 26px -7px rgba(102, 126, 234, .52) !important;
}

#agent-config-send-btn:active { transform: translateY(0) !important; }

#agent-config-chat-status:not(:empty) {
    background: linear-gradient(120deg, rgba(102, 126, 234, .08), rgba(118, 75, 162, .08)) !important;
    border: 1.5px solid rgba(102, 126, 234, .22) !important;
    border-radius: 12px !important;
    color: var(--bv-heading) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    padding: 12px 15px !important;
    margin-top: 12px !important;
}

/* ============================================================
   5. FORMULAIRES DE RÉGLAGE
   ============================================================ */

#agent-content select,
#agent-content input[type="text"],
#agent-content input[type="email"],
#agent-content input[type="time"],
#agent-content input[type="number"],
#agent-content .Select-control {
    box-sizing: border-box !important;
    min-height: 44px !important;
    border-radius: 11px !important;
    border: 1.5px solid var(--bv-line) !important;
    background: var(--bv-fill) !important;
    color: var(--bv-ink) !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: border-color .16s ease, box-shadow .16s ease !important;
}

#agent-content select:focus,
#agent-content input:focus,
#agent-content .is-focused .Select-control {
    outline: none !important;
    background: #ffffff !important;
    border-color: var(--bv-indigo) !important;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, .15) !important;
}

#agent-content label {
    color: var(--bv-heading) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

/* ============================================================
   6. BOUTONS D'ACTION
   ============================================================ */

#agent-save-btn,
#agent-test-btn {
    border-radius: 12px !important;
    font-family: inherit !important;
    font-weight: 700 !important;
    transition: transform .16s ease, box-shadow .16s ease !important;
}

#agent-save-btn:hover,
#agent-test-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 24px -8px rgba(102, 126, 234, .45) !important;
}

#agent-save-message:not(:empty),
#agent-test-result:not(:empty) {
    border-radius: 12px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
}

#agent-content a {
    color: var(--bv-indigo) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: color .16s ease;
}
#agent-content a:hover { color: var(--bv-violet) !important; }

/* ============================================================
   7. MOBILE ET TABLETTE
   ============================================================ */

@media (max-width: 1023px) {
    #agent-config-chat-history { height: 400px; padding: 16px !important; }
    #agent-config-chat-history:empty::before { margin-top: 90px; }
    #agent-config-send-btn { padding: 0 18px !important; }
}

/* ============================================================
   8. CORRECTIF — carte pleine hauteur et composeur ancré
   ============================================================ */

/* Le composeur : une vraie ligne flex, champ élastique, bouton fixe */
#agent-content div:has(> #agent-config-message-input),
#agent-content div:has(> div.dash-input > #agent-config-message-input) {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 14px !important;
    padding: 0 !important;
}

/* Le wrapper Dash ne doit plus imposer 100 % de large */
#agent-content div.dash-input:has(> #agent-config-message-input) {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    display: block !important;
}

#agent-config-message-input {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

#agent-config-send-btn {
    flex: 0 0 auto !important;
    margin-left: 0 !important;
    min-width: 110px !important;
}

@media (min-width: 1024px) {

    /* Hauteur imposée, pas seulement plafonnée : la carte remplit l'écran */
    #agent-content > div > :nth-child(4) {
        height: calc(100vh - 132px) !important;
        max-height: none !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 18px !important;
        box-sizing: border-box !important;
    }

    /* L'en-tête et le statut gardent leur taille naturelle */
    #agent-content > div > :nth-child(4) > div:first-of-type,
    #agent-content > div > :nth-child(4) > #agent-config-chat-status {
        flex: 0 0 auto !important;
    }

    /* Le fil occupe tout l'espace restant. min-height:0 est
       indispensable pour qu'un enfant flex puisse défiler. */
    #agent-content > div > :nth-child(4) > #agent-config-chat-history {
        flex: 1 1 auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin-bottom: 0 !important;
    }
}

/* ============================================================
   9. COMPOSEUR UNIFIÉ + COLONNES ALIGNÉES ET DÉFILANTES
   ============================================================ */

/* ---- Le composeur devient un cadre unique ---- */

#agent-content div:has(> #agent-config-message-input),
#agent-content div:has(> div.dash-input > #agent-config-message-input) {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 14px !important;
    padding: 0 !important;
    border: 1.5px solid var(--bv-line) !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(26, 32, 44, .05) !important;
    transition: border-color .16s ease, box-shadow .16s ease !important;
}

#agent-content div:has(> div.dash-input > #agent-config-message-input):focus-within {
    border-color: var(--bv-indigo) !important;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, .15) !important;
}

#agent-content div.dash-input:has(> #agent-config-message-input) {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    display: block !important;
}

/* Le champ perd son cadre : c'est le conteneur qui le porte */
#agent-config-message-input {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    box-sizing: border-box !important;
    padding: 0 122px 0 18px !important;
    border: none !important;
    border-radius: 16px !important;
    background: transparent !important;
    box-shadow: none !important;
}

#agent-config-message-input:hover,
#agent-config-message-input:focus {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Bouton logé dans le cadre */
#agent-config-send-btn {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    height: 40px !important;
    min-width: 100px !important;
    padding: 0 18px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    z-index: 3;
}

#agent-config-send-btn:hover {
    transform: translateY(-50%) translateY(-1px) !important;
}

@media (min-width: 1024px) {

    /* ---- Les deux colonnes démarrent au même niveau ---- */

    #agent-content > div > :nth-child(3),
    #agent-content > div > :nth-child(4) {
        margin-top: 0 !important;
        align-self: start !important;
    }

    #agent-content > div > :nth-child(4) {
        top: 0 !important;
        height: calc(100vh - 116px) !important;
    }

    /* ---- Filet de séparation entre les colonnes ---- */

    #agent-content > div > :nth-child(4)::after {
        content: '';
        position: absolute;
        top: 8px;
        bottom: 8px;
        right: -11px;
        width: 1px;
        background: linear-gradient(180deg,
            transparent 0%, var(--bv-line) 12%,
            var(--bv-line) 88%, transparent 100%);
        pointer-events: none;
    }

    /* ---- Colonne de droite : respiration et défilement ---- */

    #agent-content > div {
        column-gap: 32px !important;
        scrollbar-gutter: stable;
    }

    #agent-content > div > :nth-child(5),
    #agent-content > div > :nth-child(6),
    #agent-content > div > :nth-child(7),
    #agent-content > div > :nth-child(8) {
        scroll-margin-top: 16px;
    }
}

/* ---- Barres de défilement fines et cohérentes ---- */

#agent-content ::-webkit-scrollbar { width: 9px; }
#agent-content ::-webkit-scrollbar-track { background: transparent; }
#agent-content ::-webkit-scrollbar-thumb {
    background: #d3dae4;
    border: 2px solid transparent;
    background-clip: content-box;
    border-radius: 99px;
}
#agent-content ::-webkit-scrollbar-thumb:hover { background-clip: border-box; background: var(--bv-faint); }
#agent-content { scrollbar-width: thin; scrollbar-color: #d3dae4 transparent; }

/* ============================================================
   9. COMPOSEUR UNIFIÉ + COLONNES ALIGNÉES ET DÉFILANTES
   ============================================================ */

/* ---- Le composeur devient un cadre unique ---- */

#agent-content div:has(> #agent-config-message-input),
#agent-content div:has(> div.dash-input > #agent-config-message-input) {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 14px !important;
    padding: 0 !important;
    border: 1.5px solid var(--bv-line) !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(26, 32, 44, .05) !important;
    transition: border-color .16s ease, box-shadow .16s ease !important;
}

#agent-content div:has(> div.dash-input > #agent-config-message-input):focus-within {
    border-color: var(--bv-indigo) !important;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, .15) !important;
}

#agent-content div.dash-input:has(> #agent-config-message-input) {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    display: block !important;
}

/* Le champ perd son cadre : c'est le conteneur qui le porte */
#agent-config-message-input {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    box-sizing: border-box !important;
    padding: 0 122px 0 18px !important;
    border: none !important;
    border-radius: 16px !important;
    background: transparent !important;
    box-shadow: none !important;
}

#agent-config-message-input:hover,
#agent-config-message-input:focus {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Bouton logé dans le cadre */
#agent-config-send-btn {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    height: 40px !important;
    min-width: 100px !important;
    padding: 0 18px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    z-index: 3;
}

#agent-config-send-btn:hover {
    transform: translateY(-50%) translateY(-1px) !important;
}

@media (min-width: 1024px) {

    /* ---- Les deux colonnes démarrent au même niveau ---- */

    #agent-content > div > :nth-child(3),
    #agent-content > div > :nth-child(4) {
        margin-top: 0 !important;
        align-self: start !important;
    }

    #agent-content > div > :nth-child(4) {
        top: 0 !important;
        height: calc(100vh - 116px) !important;
    }

    /* ---- Filet de séparation entre les colonnes ---- */

    #agent-content > div > :nth-child(4)::after {
        content: '';
        position: absolute;
        top: 8px;
        bottom: 8px;
        right: -11px;
        width: 1px;
        background: linear-gradient(180deg,
            transparent 0%, var(--bv-line) 12%,
            var(--bv-line) 88%, transparent 100%);
        pointer-events: none;
    }

    /* ---- Colonne de droite : respiration et défilement ---- */

    #agent-content > div {
        column-gap: 32px !important;
        scrollbar-gutter: stable;
    }

    #agent-content > div > :nth-child(5),
    #agent-content > div > :nth-child(6),
    #agent-content > div > :nth-child(7),
    #agent-content > div > :nth-child(8) {
        scroll-margin-top: 16px;
    }
}

/* ---- Barres de défilement fines et cohérentes ---- */

#agent-content ::-webkit-scrollbar { width: 9px; }
#agent-content ::-webkit-scrollbar-track { background: transparent; }
#agent-content ::-webkit-scrollbar-thumb {
    background: #d3dae4;
    border: 2px solid transparent;
    background-clip: content-box;
    border-radius: 99px;
}
#agent-content ::-webkit-scrollbar-thumb:hover { background-clip: border-box; background: var(--bv-faint); }
#agent-content { scrollbar-width: thin; scrollbar-color: #d3dae4 transparent; }

/* ---------- 10. Composeur multiligne ---------- */

#agent-config-message-input {
    height: 56px !important;
    min-height: 56px !important;
    max-height: 132px !important;
    padding: 17px 122px 17px 18px !important;
    line-height: 22px !important;
    resize: none !important;
    overflow-y: auto !important;
    font-family: inherit !important;
}

#agent-content div.dash-textarea:has(> #agent-config-message-input) {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    display: block !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

#agent-content div:has(> div.dash-textarea > #agent-config-message-input) {
    position: relative !important;
    display: flex !important;
    align-items: flex-end !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 14px !important;
    padding: 0 !important;
    border: 1.5px solid var(--bv-line) !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(26, 32, 44, .05) !important;
    transition: border-color .16s ease, box-shadow .16s ease !important;
}

#agent-content div:has(> div.dash-textarea > #agent-config-message-input):focus-within {
    border-color: var(--bv-indigo) !important;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, .15) !important;
}

#agent-config-send-btn {
    position: absolute !important;
    right: 8px !important;
    bottom: 8px !important;
    top: auto !important;
    transform: none !important;
    height: 40px !important;
}

#agent-config-send-btn:hover { transform: translateY(-1px) !important; }