/*
 * Console globale des tâches de fond (templates/_activity_console.html.twig).
 *
 * Panneau fixe en bas à droite, hors du flux, ouvert et fermé par la cloche de la barre d'état :
 * fermé, il ne montre rien ; les variables `--bs-*` du thème le font suivre le mode
 * clair/sombre sans règle dédiée.
 */

.activity-console {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1090;
    /*
     * Largeur et hauteur PILOTEES par des variables, que `activity-console.js` relit du stockage
     * local : les libelles sont des noms d'image et des chemins, souvent plus longs que la largeur
     * par defaut, et se tronquaient sans recours.
     */
    width: var(--activity-console-width, 24rem);
    max-width: calc(100vw - 2rem);
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.625rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
    font-size: 0.925rem;
}

.activity-console__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
}

.activity-console__title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/*
 * FERMÉE, la console ne recouvre plus rien : seul son annonceur vocal reste dans le document — il
 * doit continuer d'annoncer les changements d'état, console fermée comprise. On l'ouvre par la
 * cloche de la barre d'état (`_host_status_bar.html.twig`).
 */
.activity-console--collapsed {
    width: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.activity-console--collapsed > :not([data-activity-announcer]) {
    display: none;
}

.activity-console__body {
    border-top: 1px solid var(--bs-border-color);
    max-height: var(--activity-console-body-height, 40vh);
    overflow-y: auto;
    padding: 0.5rem 0.75rem;
}

/*
 * Poignee au coin HAUT-GAUCHE, seul coin libre d'un panneau ancre en bas a droite. Discrete au
 * repos, elle se revele au survol et au focus clavier — une poignee invisible n'est pas une poignee.
 */
.activity-console__resize {
    position: absolute;
    top: 0;
    left: 0;
    width: 1rem;
    height: 1rem;
    padding: 0;
    border: none;
    border-top-left-radius: 0.625rem;
    background-color: transparent;
    cursor: nwse-resize;
    touch-action: none;
}

.activity-console__resize::before {
    content: "";
    position: absolute;
    top: 0.3rem;
    left: 0.3rem;
    width: 0.45rem;
    height: 0.45rem;
    border-top: 2px solid var(--bs-gray-500);
    border-left: 2px solid var(--bs-gray-500);
    opacity: 0.45;
    transition: opacity 0.15s ease;
}

.activity-console__resize:hover::before,
.activity-console__resize:focus-visible::before {
    opacity: 1;
}

/* Pendant le glissement : pas de selection de texte parasite sous le curseur. */
.activity-console--resizing {
    user-select: none;
}

/* Réduit : seul l'en-tête reste ; le bouton d'effacement n'a de sens que la liste ouverte. */
.activity-console--collapsed .activity-console__body,
.activity-console--collapsed .activity-console__clear {
    display: none;
}

.activity-console__row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0;
    border-bottom: 1px dashed var(--bs-gray-300);
}

.activity-console__row:last-child {
    border-bottom: none;
}

/* Une seule ligne par tâche : le libellé se tronque plutôt que de passer à la ligne. */
.activity-console__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * Le detail d'une tache : bouton discret, puis le message tel quel. `pre-wrap` parce que ces
 * messages portent de VRAIS retours a la ligne — sortie de `make`, trace d'un refus — et que les
 * ecraser rendrait le texte illisible, ce qui etait tout le probleme.
 */
.activity-console__details {
    flex: 0 0 auto;
    padding: 0 0.35rem;
    border: none;
    border-radius: 0.25rem;
    background-color: transparent;
    color: var(--bs-primary);
    font-size: 0.8rem;
    text-decoration: underline;
}

.activity-console__details:hover,
.activity-console__details:focus-visible {
    background-color: var(--bs-gray-200);
}

/*
 * Copier le message sans avoir a le deplier : bouton icone, de la meme famille discrete que
 * « Detail ». La coche de confirmation emprunte la couleur de succes des lignes reussies.
 */
.activity-console__copy {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 0 0.25rem;
    border: none;
    border-radius: 0.25rem;
    background-color: transparent;
    color: var(--bs-gray-600);
    line-height: 1;
}

/*
 * `display` pose sur la classe l'emporterait sur le `[hidden]` de la feuille du navigateur : sans
 * cette regle, le bouton resterait visible sur une ligne sans message.
 */
.activity-console__copy[hidden] {
    display: none;
}

.activity-console__copy:hover,
.activity-console__copy:focus-visible {
    background-color: var(--bs-gray-200);
    color: var(--bs-primary);
}

.activity-console__copy .ki-check {
    color: var(--bs-success);
}

.activity-console__message {
    flex: 1 1 100%;
    margin: 0.35rem 0 0;
    padding: 0.5rem;
    max-height: 14rem;
    overflow: auto;
    border-radius: 0.35rem;
    background-color: var(--bs-gray-100);
    color: var(--bs-body-color);
    font-size: 0.8rem;
    white-space: pre-wrap;
    word-break: break-word;
}

/* La ligne passe a la ligne pour accueillir le message deplie, sans le comprimer. */
.activity-console__row {
    flex-wrap: wrap;
}

/* Largeur fixe pour l'icône d'état : le libellé ne bouge pas quand le spinner devient une coche. */
.activity-console__icon {
    flex: 0 0 auto;
    display: inline-flex;
    justify-content: center;
    width: 1.25rem;
}

@media (max-width: 575.98px) {
    .activity-console {
        right: 0.5rem;
        bottom: 0.5rem;
        width: calc(100vw - 1rem);
    }
}

@media print {
    .activity-console {
        display: none;
    }
}