/*
 * Sana Al-Furqan Academy — AI chat widget
 * File: academy-ai-chat.css
 * Version: 1.28
 */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap');

.academy-ai{--ai-navy:#071a3a;--ai-blue:#0f5db8;--ai-gold:#e7b63a;--ai-soft:#f4f7fb;--ai-line:#dfe8f3;--ai-text:#132238;--ai-muted:#6b778c;position:fixed;inset:auto 18px 18px auto;z-index:9998;font-family:"Cairo",Arial,sans-serif}.academy-ai *{box-sizing:border-box}.academy-ai__fab{border:0;border-radius:999px;background:linear-gradient(135deg,var(--ai-navy),var(--ai-blue));color:#fff;display:flex;align-items:center;gap:9px;padding:12px 17px;box-shadow:0 14px 36px rgba(7,26,58,.28);font:800 14px/1.2 inherit;cursor:pointer}.academy-ai__fab-icon{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.15);font-size:18px}.academy-ai__panel{position:absolute;right:0;bottom:64px;width:min(390px,calc(100vw - 24px));height:min(650px,calc(100vh - 100px));background:#fff;border:1px solid var(--ai-line);border-radius:24px;box-shadow:0 24px 70px rgba(7,26,58,.24);overflow:hidden;display:flex;flex-direction:column;color:var(--ai-text)}.academy-ai__panel[hidden]{display:none}.academy-ai__header{background:linear-gradient(135deg,var(--ai-navy),#0a4e9a);color:#fff;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px}.academy-ai__header strong{display:block;font-size:17px;font-weight:900}.academy-ai__header small{display:block;margin-top:3px;opacity:.82;font-size:11px;font-weight:700}.academy-ai__close{width:34px;height:34px;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font:500 26px/1 Arial;cursor:pointer}.academy-ai__messages{flex:1;overflow:auto;padding:16px;background:linear-gradient(#fff,#fbfcfe);scroll-behavior:smooth}.academy-ai__row{display:flex;margin:0 0 12px}.academy-ai__row.is-user{justify-content:flex-end}.academy-ai__bubble{max-width:86%;padding:11px 13px;border-radius:16px;font-size:13px;line-height:1.75;font-weight:600;white-space:pre-wrap;overflow-wrap:anywhere}.academy-ai__row.is-assistant .academy-ai__bubble{background:var(--ai-soft);border:1px solid var(--ai-line);border-top-right-radius:5px}.academy-ai__row.is-user .academy-ai__bubble{background:var(--ai-blue);color:#fff;border-top-left-radius:5px}.academy-ai__result{margin-top:9px;padding:11px;border:1px solid #e4eaf2;border-radius:14px;background:#fff}.academy-ai__result-title{font-weight:900;font-size:13px}.academy-ai__result-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.academy-ai__tag{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;background:#eef4fb;color:#315273;font-size:11px;font-weight:800}.academy-ai__actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}.academy-ai__action{border:0;border-radius:10px;background:var(--ai-navy);color:#fff;padding:8px 11px;font:800 12px/1.2 inherit;cursor:pointer}.academy-ai__action.is-gold{background:var(--ai-gold);color:#2b220a}.academy-ai__chips{display:flex;gap:7px;overflow:auto;padding:8px 12px;border-top:1px solid #edf1f6;background:#fff}.academy-ai__chips button{flex:0 0 auto;border:1px solid #dce5ef;background:#fff;border-radius:999px;padding:7px 10px;font:800 11px/1.2 inherit;color:#29425f;cursor:pointer}.academy-ai__composer{display:flex;align-items:flex-end;gap:8px;padding:10px 12px;border-top:1px solid #edf1f6;background:#fff}.academy-ai__composer textarea{flex:1;resize:none;max-height:100px;border:1px solid #d7e1ec;border-radius:14px;padding:10px 12px;outline:none;font:600 13px/1.5 inherit;color:var(--ai-text);background:#fbfdff}.academy-ai__composer textarea:focus{border-color:#86aee0;box-shadow:0 0 0 3px rgba(15,93,184,.08)}.academy-ai__composer button{width:42px;height:42px;border:0;border-radius:13px;background:var(--ai-blue);color:#fff;font-size:18px;cursor:pointer}.academy-ai__notice{padding:0 14px 10px;text-align:center;font-size:10px;color:#8a95a5;background:#fff}.academy-ai__typing{display:inline-flex;gap:4px;align-items:center}.academy-ai__typing i{width:6px;height:6px;border-radius:50%;background:#7d8da2;animation:academyAiBounce 1.1s infinite ease-in-out}.academy-ai__typing i:nth-child(2){animation-delay:.14s}.academy-ai__typing i:nth-child(3){animation-delay:.28s}@keyframes academyAiBounce{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-4px);opacity:1}}@media(max-width:520px){.academy-ai{right:12px;bottom:12px}.academy-ai__fab-label{display:none}.academy-ai__fab{padding:10px}.academy-ai__panel{position:fixed;inset:10px;width:auto;height:auto;border-radius:20px}.academy-ai__bubble{max-width:92%}}


/* V1.6 — Arabic typography */
.academy-ai,
.academy-ai button,
.academy-ai input,
.academy-ai textarea,
.academy-ai select,
.academy-ai__fab,
.academy-ai__fab-label,
.academy-ai__chips button,
.academy-ai__action {
    font-family: "Cairo", Tahoma, Arial, sans-serif !important;
}


/* =========================================================
   V1.15 — Résultats sans double encadrement + boutons 3D
   ========================================================= */

/* Résultat dont le titre de l'activité est directement le bouton */
.academy-ai__result.is-action-only {
    margin-top: 10px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* Pas d'espace interne inutile */
.academy-ai__result.is-action-only .academy-ai__actions {
    margin-top: 0;
    display: block;
}

/* Le bouton occupe toute la largeur du résultat */
.academy-ai__result.is-action-only .academy-ai__action {
    width: 100%;
    min-height: 54px;
    padding: 11px 16px 13px;
    border-radius: 13px;

    /* effet 3D */
    background:
        linear-gradient(
            180deg,
            #ffd55a 0%,
            #f2bb31 58%,
            #dfa01a 100%
        );
    color: #2f2203;

    border: 1px solid #e1a51e;
    border-top-color: #ffe28c;

    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.55),
        inset 0 -2px 0 rgba(132,84,0,.12),
        0 5px 0 #b97c08,
        0 8px 14px rgba(7,26,58,.18);

    font-weight: 800;
    line-height: 1.55;
    text-align: center;

    transform: translateY(0);
    transition:
        transform .12s ease,
        box-shadow .12s ease,
        filter .12s ease;
}

/* Survol */
.academy-ai__result.is-action-only .academy-ai__action:hover {
    filter: brightness(1.035);
    transform: translateY(-1px);
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.6),
        inset 0 -2px 0 rgba(132,84,0,.12),
        0 6px 0 #b97c08,
        0 10px 16px rgba(7,26,58,.20);
}

/* Appui : le bouton descend comme un vrai bouton */
.academy-ai__result.is-action-only .academy-ai__action:active {
    transform: translateY(4px);
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,.35),
        inset 0 -1px 0 rgba(132,84,0,.10),
        0 1px 0 #b97c08,
        0 4px 7px rgba(7,26,58,.14);
}

/* Évite un rendu "encadré dans un encadré" autour de la liste */
.academy-ai__row.is-assistant .academy-ai__bubble:has(.academy-ai__result.is-action-only) {
    background: transparent;
    border: 0;
    padding-left: 0;
    padding-right: 0;
}

/* On garde le texte introductif lisible s'il y en a un */
.academy-ai__row.is-assistant .academy-ai__bubble:has(.academy-ai__result.is-action-only) {
    max-width: 92%;
}

/* Mobile */
@media (max-width: 520px) {
    .academy-ai__result.is-action-only .academy-ai__action {
        min-height: 50px;
        padding: 10px 13px 12px;
        font-size: 12px;
    }
}


/* =========================================================
   V1.16 — Actions de même taille + logos des plateformes
   ========================================================= */

/* Toutes les actions d'une activité ont exactement la même largeur/hauteur */
.academy-ai__result:not(.is-action-only) .academy-ai__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
}

.academy-ai__result:not(.is-action-only) .academy-ai__action {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    height: 48px;
    padding: 8px 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 11px;
}

/* Logos uniquement pour Zoom / WhatsApp / Telegram */
.academy-ai__action.is-brand {
    padding: 5px;
}

.academy-ai__brand-icon {
    width: 31px;
    height: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.academy-ai__brand-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Couleurs officielles approximatives des plateformes */
.academy-ai__action.is-zoom {
    background: #2d8cff;
    color: #fff;
}

.academy-ai__action.is-whatsapp {
    background: #25d366;
    color: #fff;
}

.academy-ai__action.is-telegram {
    background: #229ed9;
    color: #fff;
}

/* Effet léger 3D cohérent pour tous les boutons de la fiche */
.academy-ai__result:not(.is-action-only) .academy-ai__action {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        0 3px 0 rgba(4,25,56,.18),
        0 5px 9px rgba(4,25,56,.11);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.academy-ai__result:not(.is-action-only) .academy-ai__action:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.academy-ai__result:not(.is-action-only) .academy-ai__action:active {
    transform: translateY(2px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 1px 0 rgba(4,25,56,.16),
        0 2px 5px rgba(4,25,56,.10);
}

@media (max-width: 360px) {
    .academy-ai__result:not(.is-action-only) .academy-ai__action {
        min-height: 46px;
        height: 46px;
        font-size: 11px;
    }

    .academy-ai__brand-icon {
        width: 28px;
        height: 28px;
    }
}


/* =========================================================
   V1.17 — Modèle retenu :
   2 colonnes, 6 boutons de même taille,
   logos + noms Zoom / WhatsApp / Telegram
   ========================================================= */

.academy-ai__result:not(.is-action-only) .academy-ai__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.academy-ai__result:not(.is-action-only) .academy-ai__action {
    height: 58px;
    min-height: 58px;
    padding: 7px 9px;
}

/* Les boutons plateformes affichent logo + nom */
.academy-ai__action.is-brand {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 5px 7px;
}

.academy-ai__brand-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
}

.academy-ai__brand-label {
    display: block;
    font-family: "Cairo", Tahoma, Arial, sans-serif;
    font-size: 11px;
    line-height: 1.1;
    font-weight: 800;
    color: currentColor;
    white-space: nowrap;
}

/* On garde la page de l'activité au même format que les autres actions */
.academy-ai__action-label {
    display: block;
    line-height: 1.35;
}

@media (max-width: 360px) {
    .academy-ai__result:not(.is-action-only) .academy-ai__action {
        height: 54px;
        min-height: 54px;
    }

    .academy-ai__brand-icon {
        width: 22px;
        height: 22px;
        flex-basis: 22px;
    }

    .academy-ai__brand-label {
        font-size: 10px;
    }
}


/* =========================================================
   V1.18 — Organisation retenue de la fiche activité
   1) titre pleine largeur = lien vers la page activité
   2) informations + horaires = 2 colonnes
   3) Zoom + WhatsApp + Telegram = 3 colonnes
   ========================================================= */

.academy-ai__result.is-program-card {
    padding: 10px;
}

/* Titre = vrai bouton vers la page de l'activité */
.academy-ai__result.is-program-card .academy-ai__action.is-program-title {
    width: 100%;
    min-height: 42px;
    height: auto;
    padding: 9px 12px;
    margin: 0 0 9px;
    border-radius: 11px;

    background: #fff;
    color: #10294a;
    border: 1px solid #dce5ef;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.85),
        0 2px 5px rgba(7,26,58,.08);

    font-size: 12px;
    font-weight: 900;
    line-height: 1.5;
}

/* La zone d'actions devient une grille à 6 colonnes.
   Info/Horaires prennent chacun 3 colonnes.
   Les trois liens prennent chacun 2 colonnes. */
.academy-ai__result.is-program-card .academy-ai__actions {
    display: grid;
    grid-template-columns: repeat(6, minmax(0,1fr));
    gap: 8px;
    width: 100%;
    margin-top: 0;
}

.academy-ai__result.is-program-card .academy-ai__action {
    width: 100%;
    min-width: 0;
    height: 58px;
    min-height: 58px;
    margin: 0;
}

/* Ligne 1 : Informations / Horaires */
.academy-ai__result.is-program-card .academy-ai__action.is-info-action {
    grid-column: span 3;
}

/* Ligne 2 : Zoom / WhatsApp / Telegram */
.academy-ai__result.is-program-card .academy-ai__action.is-link-action {
    grid-column: span 2;
}

/* Les plateformes gardent logo + nom */
.academy-ai__result.is-program-card .academy-ai__action.is-brand {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.academy-ai__result.is-program-card .academy-ai__brand-icon {
    width: 24px;
    height: 24px;
}

.academy-ai__result.is-program-card .academy-ai__brand-label {
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}

/* Couleurs des boutons */
.academy-ai__result.is-program-card .academy-ai__action.is-info-action:not(.is-gold) {
    background: linear-gradient(180deg,#123d74 0%,#08254c 100%);
    color: #fff;
}

.academy-ai__result.is-program-card .academy-ai__action.is-info-action.is-gold {
    background: linear-gradient(180deg,#ffd45a 0%,#eeb526 100%);
    color: #332400;
}

/* Les liens sont clairement séparés visuellement */
.academy-ai__result.is-program-card .academy-ai__action.is-zoom {
    background: linear-gradient(180deg,#328fff 0%,#1769d5 100%);
}
.academy-ai__result.is-program-card .academy-ai__action.is-whatsapp {
    background: linear-gradient(180deg,#30d86f 0%,#17a94f 100%);
}
.academy-ai__result.is-program-card .academy-ai__action.is-telegram {
    background: linear-gradient(180deg,#34b3e9 0%,#198dc4 100%);
}

@media (max-width:360px){
    .academy-ai__result.is-program-card .academy-ai__action {
        height: 54px;
        min-height: 54px;
        font-size: 11px;
    }

    .academy-ai__result.is-program-card .academy-ai__action.is-program-title {
        height: auto;
        min-height: 40px;
    }
}


/* =========================================================
   V1.21 — Guide pas à pas : création de compte
   ========================================================= */

.academy-ai__result.is-guide-step {
    padding: 8px;
    overflow: hidden;
}

.academy-ai__guide-figure {
    margin: 0 0 9px;
    padding: 0;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    background: #eef3f8;
    border: 1px solid #d9e3ee;
}

.academy-ai__guide-image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 330px;
    object-fit: contain;
    object-position: center top;
    background: #fff;
}

.academy-ai__result.is-guide-step .academy-ai__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    width: 100%;
    margin-top: 7px;
}

.academy-ai__result.is-guide-step .academy-ai__action {
    flex: 1 1 90px;
    min-height: 40px;
    height: auto;
    padding: 8px 10px;
    line-height: 1.35;
}

@media (max-width: 390px) {
    .academy-ai__guide-image {
        max-height: 290px;
    }

    .academy-ai__result.is-guide-step .academy-ai__action {
        font-size: 11px;
    }
}


/* =========================================================
   V1.27 — Mobile : réduire le chat après ouverture activité
   et afficher « متابعة المحادثة »
   ========================================================= */

.academy-ai__resume {
    display: none;
}

@media (max-width: 768px) {
    .academy-ai__resume {
        position: fixed;
        z-index: 2147483000;

        right: 16px;
        bottom: calc(18px + env(safe-area-inset-bottom));

        min-height: 46px;
        max-width: calc(100vw - 32px);
        padding: 9px 16px;

        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;

        border: 1px solid rgba(255,255,255,.22);
        border-radius: 999px;

        background: linear-gradient(180deg,#176fd1 0%,#0b4f9d 100%);
        color: #fff;

        font-family: "Cairo", Tahoma, Arial, sans-serif;
        font-size: 13px;
        font-weight: 800;
        line-height: 1;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.2),
            0 4px 0 rgba(4,44,91,.28),
            0 8px 18px rgba(3,25,55,.24);

        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .academy-ai__resume[hidden] {
        display: none !important;
    }

    .academy-ai__resume-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
        line-height: 1;
    }

    .academy-ai__resume-text {
        white-space: nowrap;
    }

    .academy-ai__resume:active {
        transform: translateY(2px);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.15),
            0 2px 0 rgba(4,44,91,.24),
            0 4px 10px rgba(3,25,55,.18);
    }
}


/* =========================================================
   V1.28 — bouton reprise visible au-dessus des bandeaux mobiles
   ========================================================= */

@media (max-width: 900px), (pointer: coarse) {
    .academy-ai__resume {
        display: inline-flex !important;
        position: fixed !important;
        z-index: 2147483646 !important;

        right: 14px !important;
        bottom: calc(88px + env(safe-area-inset-bottom)) !important;

        min-height: 48px;
        padding: 10px 16px;
    }

    .academy-ai__resume[hidden] {
        display: none !important;
    }
}