/*
 * Thème Cyllene Assistant IA : barre latérale marine, zone de saisie flottante.
 * Les couleurs passent par des variables --cy-* redéfinies en sombre via [data-bs-theme="dark"]
 * (posé avant rendu par base.html.twig, piloté par theme_controller.js).
 */

:root,
[data-bs-theme="light"] {
    --cy-bg: #ffffff;
    --cy-surface: #f4f7fa;
    --cy-text: #1a2332;
    --cy-muted: #5b6b80;
    --cy-line: #e2e8f0;
    --cy-accent: #2d6dbb;
    --cy-accent-hover: #245a9c;
    --cy-accent-soft: rgba(45, 109, 187, .10);
    --cy-composer-bg: #ffffff;
    --cy-composer-line: #dbe3ec;
    --cy-composer-shadow: 0 8px 28px rgba(26, 35, 50, .08), 0 1px 3px rgba(26, 35, 50, .06);
    --cy-send-idle: #c6d3e3;
    --cy-switch-off: #c9d3e0;
    --cy-chart: #2d6dbb;
    --cy-chart-grid: #e2e8f0;

    --cy-side: #1a2332;
    --cy-side-text: #c9d3e0;
    --cy-side-muted: #8a9ab0;
    --cy-side-line: #243045;
    --cy-side-line-2: #34445e;
    --cy-side-hover: #222e42;
    --cy-side-active: #26385a;

    --bs-body-bg: var(--cy-bg);
    --bs-body-color: var(--cy-text);
    --bs-secondary-color: var(--cy-muted);
    --bs-border-color: var(--cy-line);
    --bs-primary: #2d6dbb;
    --bs-primary-rgb: 45, 109, 187;
    --bs-link-color: #2d6dbb;
    --bs-link-color-rgb: 45, 109, 187;
    --bs-link-hover-color: #245a9c;
    --bs-link-hover-color-rgb: 36, 90, 156;
    --bs-body-font-family: 'Inter Variable', system-ui, -apple-system, sans-serif;
}

[data-bs-theme="dark"] {
    --cy-bg: #0f1623;
    --cy-surface: #162030;
    --cy-text: #e6ecf3;
    --cy-muted: #9aa8ba;
    --cy-line: #243146;
    --cy-accent: #5b9be0;
    --cy-accent-hover: #7fb2ea;
    --cy-accent-soft: rgba(91, 155, 224, .16);
    --cy-composer-bg: #162030;
    --cy-composer-line: #2c3a52;
    --cy-composer-shadow: 0 8px 28px rgba(0, 0, 0, .35);
    --cy-send-idle: #33445e;
    --cy-switch-off: #3a4a63;
    /* Barres du graphique : plus sombre que l'accent pour rester dans la bande de clarté validée sur fond sombre. */
    --cy-chart: #4a8fdc;
    --cy-chart-grid: #243146;

    --cy-side: #0a1019;
    --cy-side-text: #c3cede;
    --cy-side-muted: #8b9ab0;
    --cy-side-line: #18212f;
    --cy-side-line-2: #2a3850;
    --cy-side-hover: #141d2b;
    --cy-side-active: #1c2a3e;

    --bs-body-bg: var(--cy-bg);
    --bs-body-color: var(--cy-text);
    --bs-secondary-color: var(--cy-muted);
    --bs-border-color: var(--cy-line);
    --bs-primary: #5b9be0;
    --bs-primary-rgb: 91, 155, 224;
    --bs-link-color: #7fb2ea;
    --bs-link-color-rgb: 127, 178, 234;
    --bs-link-hover-color: #a8cbf2;
    --bs-link-hover-color-rgb: 168, 203, 242;
}

body {
    font-size: .9375rem;
}

/* Éléments à n'afficher que dans un thème (logos clair/sombre, icône du bouton de thème). */
[data-bs-theme="light"] .theme-only-dark,
[data-bs-theme="dark"] .theme-only-light,
[data-bs-theme="light"] .theme-icon-dark,
[data-bs-theme="dark"] .theme-icon-light {
    display: none !important;
}

/* Code en ligne (raccourcis /commande, noms de modèles) : l'accent de l'appli plutôt que le rose de Bootstrap. */
:root,
[data-bs-theme] {
    --bs-code-color: var(--cy-accent);
}

.btn-primary {
    --bs-btn-bg: var(--cy-accent);
    --bs-btn-border-color: var(--cy-accent);
    --bs-btn-hover-bg: var(--cy-accent-hover);
    --bs-btn-hover-border-color: var(--cy-accent-hover);
    --bs-btn-active-bg: var(--cy-accent-hover);
    --bs-btn-active-border-color: var(--cy-accent-hover);
}

.btn-outline-primary {
    --bs-btn-color: var(--cy-accent);
    --bs-btn-border-color: var(--cy-accent);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--cy-accent);
    --bs-btn-hover-border-color: var(--cy-accent);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--cy-accent-hover);
    --bs-btn-active-border-color: var(--cy-accent-hover);
    --bs-btn-disabled-color: var(--cy-accent);
    --bs-btn-disabled-border-color: var(--cy-accent);
}

/* Bouton secondaire (Annuler, Tester, Partager…) : fond bleu léger plutôt que le gris de Bootstrap, dans les deux thèmes. */
.btn-outline-secondary {
    --bs-btn-color: var(--cy-accent);
    --bs-btn-bg: var(--cy-accent-soft);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--cy-accent-hover);
    --bs-btn-hover-bg: color-mix(in srgb, var(--cy-accent) 20%, transparent);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--cy-accent-hover);
    --bs-btn-active-bg: color-mix(in srgb, var(--cy-accent) 28%, transparent);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--cy-accent);
    --bs-btn-disabled-bg: var(--cy-accent-soft);
    --bs-btn-disabled-border-color: transparent;
}

/* ---------- Boutons icône ---------- */

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    padding: 0;
    border: 0;
    border-radius: .625rem;
    background: transparent;
    color: var(--cy-muted);
    font-size: 1.125rem;
    text-decoration: none;
    cursor: pointer;
}

.btn-icon:hover {
    background: var(--cy-surface);
    color: var(--cy-text);
}

.btn-icon:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.btn-icon--bordered {
    border: 1px solid var(--cy-line);
}

.btn-icon--sidebar {
    width: 2rem;
    height: 2rem;
    border-radius: .5rem;
    background: var(--cy-side-hover);
    color: var(--cy-side-text);
    font-size: 1rem;
}

.btn-icon--sidebar:hover {
    background: var(--cy-side-active);
    color: #fff;
}

/* ---------- Coquille de l'appli ---------- */

.app-shell {
    /* Référence des éléments en position absolue sans ancêtre positionné (libellés .visually-hidden des formulaires) :
       sans elle, ils se placent par rapport à la page, l'allongent et font apparaître la barre de défilement du
       navigateur, qui fait remonter toute l'interface. */
    position: relative;
    display: flex;
    height: 100dvh;
    /* clip et non hidden : un scrollIntoView pouvait faire défiler la coque elle-même et laisser une bande vide en bas. */
    overflow: clip;
}

/* ---------- Barres de défilement : fines et discrètes ----------
   scrollbar-width et scrollbar-color pour Firefox, Chrome et Edge récents ; ::-webkit-scrollbar pour Safari et les
   versions plus anciennes (ignoré par Chrome dès que les propriétés standard s'appliquent). */

:root {
    --cy-scroll: rgb(100 116 139 / .35);
    --cy-scroll-hover: rgb(100 116 139 / .6);
    scrollbar-color: var(--cy-scroll) transparent;
}

* {
    scrollbar-width: thin;
}

.app-sidebar {
    --cy-scroll: rgb(255 255 255 / .16);
    --cy-scroll-hover: rgb(255 255 255 / .32);
    scrollbar-color: var(--cy-scroll) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 10px;
    background: var(--cy-scroll) padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--cy-scroll-hover);
}

.app-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* ---------- Barre latérale ---------- */

.app-sidebar {
    --bs-offcanvas-width: 18rem;
    --bs-offcanvas-bg: var(--cy-side);
    --bs-offcanvas-color: var(--cy-side-text);
    display: flex;
    flex-direction: column;
    background: var(--cy-side);
    color: var(--cy-side-text);
}

@media (min-width: 992px) {
    /* `.offcanvas-lg` force un fond transparent (!important) à partir de lg : on rétablit le marine. */
    .app-sidebar {
        flex: 0 0 17rem;
        width: 17rem;
        background-color: var(--cy-side) !important;
    }

    .is-sidebar-collapsed .app-sidebar {
        display: none !important;
    }
}

.app-sidebar__head {
    height: 4rem;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem 0 1.25rem;
    border-bottom: 1px solid var(--cy-side-line);
}

/* Logo : Cyllene, et « Assistant IA » dessous en petites capitales espacées, calé à droite. --brand-h : hauteur du
   mot Cyllene. */
.brand-lockup {
    --brand-h: 1.625rem;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: calc(var(--brand-h) * .2);
    line-height: 1;
}

.brand-lockup img {
    display: block;
    height: var(--brand-h);
    width: auto;
}

.brand-lockup__tag {
    /* L'espacement des lettres finit par un blanc : la marge négative le compense pour caler le texte à droite. */
    margin-right: -.32em;
    color: #5b9be0;
    font-size: calc(var(--brand-h) * .34);
    font-weight: 600;
    letter-spacing: .32em;
    text-transform: uppercase;
}

.app-sidebar__actions {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.btn-sidebar-new {
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border: 1px solid var(--cy-side-line-2);
    border-radius: .625rem;
    color: #fff;
    font-weight: 600;
    font-size: .875rem;
}

.btn-sidebar-new:hover,
.btn-sidebar-new:focus-visible {
    background: var(--cy-side-active);
    border-color: var(--cy-side-line-2);
    color: #fff;
}

.app-sidebar__search {
    height: 2.25rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0 .75rem;
    border-radius: .5rem;
    background: var(--cy-side-hover);
    color: var(--cy-side-muted);
    margin: 0;
}

.app-sidebar__search input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--cy-side-text);
    font-size: .8125rem;
}

.app-sidebar__search input::placeholder {
    color: var(--cy-side-muted);
}

.app-sidebar__section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .25rem 1.25rem .5rem;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cy-side-muted);
}

.app-sidebar__section--inline {
    padding: .625rem .625rem .375rem;
}

/* Corps de la barre latérale : actions, espaces et onglets, puis le panneau de l'onglet, qui défile seul. */
.app-sidebar__body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.app-sidebar__nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: .5rem .625rem;
}

/* Espaces de l'appli : une rangée d'icônes, leur nom au survol ou au focus. */
.app-sidebar__shortcuts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .25rem;
}

.app-sidebar__shortcut {
    position: relative;
    display: grid;
    place-items: center;
    height: 2.125rem;
    border-radius: .5rem;
    color: var(--cy-side-text);
}

.app-sidebar__shortcut:hover,
.app-sidebar__shortcut:focus-visible {
    background: var(--cy-side-hover);
    color: #fff;
}

.app-sidebar__shortcut.is-active {
    background: var(--cy-side-active);
    color: #fff;
}

.app-sidebar__shortcut svg {
    width: 1.0625rem;
    height: 1.0625rem;
}

.app-sidebar__shortcut .app-sidebar__count {
    position: absolute;
    top: .125rem;
    right: .375rem;
    min-width: 1rem;
    padding: 0 .25rem;
    font-size: .625rem;
    line-height: 1rem;
}

.app-sidebar__shortcut::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + .375rem);
    left: 50%;
    z-index: 5;
    padding: .1875rem .5rem;
    border-radius: .375rem;
    background: #000;
    color: #fff;
    font-size: .75rem;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-50%);
    transition: opacity .1s;
}

.app-sidebar__shortcut:hover::after,
.app-sidebar__shortcut:focus-visible::after {
    opacity: 1;
}

/* Onglets : Récents, Favoris, Projets, Agents. */
.app-sidebar__tabs {
    display: flex;
    gap: .125rem;
    padding: .1875rem;
    border-radius: .5625rem;
    background: var(--cy-side-hover);
}

.app-sidebar__tabs button {
    flex: 1;
    min-width: 0;
    height: 1.625rem;
    padding: 0 .125rem;
    border: 0;
    border-radius: .4375rem;
    background: none;
    color: var(--cy-side-muted);
    font-size: .6875rem;
    white-space: nowrap;
}

.app-sidebar__tabs button:hover {
    color: var(--cy-side-text);
}

.app-sidebar__tabs button[aria-selected="true"] {
    background: var(--cy-side-active);
    color: #fff;
    font-weight: 600;
}

.app-sidebar__new-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--cy-side-muted);
}

.app-sidebar__more {
    display: block;
    margin-top: .5rem;
    padding: .25rem .625rem;
    color: var(--cy-side-muted);
    font-size: .75rem;
    text-decoration: none;
}

.app-sidebar__more:hover {
    color: var(--cy-side-text);
}

@media (prefers-reduced-motion: reduce) {
    .app-sidebar__shortcut::after {
        transition: none;
    }
}

.app-sidebar__empty {
    padding: .25rem .625rem;
    font-size: .8125rem;
    color: var(--cy-side-muted);
}

.conversation-item {
    position: relative;
    border-radius: .5rem;
}

.conversation-item:hover,
.conversation-item:focus-within {
    background: var(--cy-side-hover);
}

.conversation-item.is-active {
    background: var(--cy-side-active);
}

.conversation-link {
    display: block;
    padding: .4375rem 2.25rem .4375rem .625rem;
    border-radius: .5rem;
    color: var(--cy-side-text);
    font-size: .8125rem;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversation-item:hover .conversation-link {
    color: #fff;
}

.conversation-item.is-active .conversation-link {
    color: #fff;
    font-weight: 500;
}

/* Bouton « … » : visible au survol, au focus et sur la conversation ouverte (toujours sur écran tactile). */
.conversation-item__menu {
    position: absolute;
    top: 50%;
    right: .25rem;
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: .375rem;
    background: transparent;
    color: var(--cy-side-muted);
    opacity: 0;
    transform: translateY(-50%);
}

.conversation-item:hover .conversation-item__menu,
.conversation-item:focus-within .conversation-item__menu,
.conversation-item.is-active .conversation-item__menu,
.conversation-item__menu[aria-expanded="true"] {
    opacity: 1;
}

@media (hover: none) {
    .conversation-item__menu {
        opacity: 1;
    }
}

.conversation-item__menu:hover {
    color: #fff;
    background: var(--cy-side-line-2);
}

.conversation-list ul + .app-sidebar__section {
    margin-top: .5rem;
}

.app-sidebar__foot {
    padding: .75rem;
    border-top: 1px solid var(--cy-side-line);
}

.app-sidebar__user {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .5rem;
    border: 0;
    border-radius: .625rem;
    background: transparent;
    color: var(--cy-side-text);
    text-align: left;
}

.app-sidebar__user:hover {
    background: var(--cy-side-hover);
}

.app-sidebar__user-text {
    flex: 1;
    min-width: 0;
    line-height: 1.25;
}

.app-sidebar__user-name {
    display: block;
    color: #fff;
    font-weight: 500;
    font-size: .8125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-sidebar__user-caret {
    color: var(--cy-side-muted);
}

.avatar {
    width: 2rem;
    height: 2rem;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--cy-accent);
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
}

.dropdown-item svg {
    margin-right: .375rem;
}

/* ---------- Barre du haut ---------- */

.app-topbar {
    height: 4rem;
    flex: none;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0 1.5rem;
    border-bottom: 1px solid var(--cy-line);
}

.app-topbar__title {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* « Déplier » : seulement sur ordinateur, barre repliée (sur mobile, la barre est un panneau qui s'ouvre au menu). */
.app-topbar__expand {
    display: none;
}

@media (min-width: 992px) {
    .is-sidebar-collapsed .app-topbar__expand {
        display: inline-flex;
    }
}

@media (max-width: 991px) {
    /* Mobile : barre marine comme la barre latérale, logo centré. */
    .app-topbar {
        height: 3.5rem;
        padding: 0 .5rem;
        background: var(--cy-side);
        border-bottom-color: var(--cy-side-line);
    }

    .app-topbar__title {
        text-align: center;
        color: #fff;
    }

    .app-topbar__logo {
        height: 1.125rem;
        width: auto;
    }

    .app-topbar .btn-icon {
        width: 2.75rem;
        height: 2.75rem;
        color: #fff;
        border-color: transparent;
    }

    .app-topbar .btn-icon:hover {
        background: var(--cy-side-hover);
    }
}

/* ---------- Accueil (nouvelle conversation) ---------- */

.chat-welcome {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem 3rem;
}

.chat-welcome__inner {
    width: 100%;
    max-width: 47.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
}

.chat-welcome__hello {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .875rem;
    text-align: center;
}

.chat-welcome__logo {
    --brand-h: 2.75rem;
    margin-bottom: .625rem;
}

/* Logo sur le fond de la page : « Assistant IA » prend l'accent du thème (bleu en clair). */
.brand-lockup--themed .brand-lockup__tag {
    color: var(--cy-accent);
}

.agent-icon {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
    background: var(--cy-accent-soft);
    color: var(--cy-accent);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
}

.agent-icon--card {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .625rem;
    font-size: 1.125rem;
}

.agent-icon--lg {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    font-size: 1.75rem;
}

.chat-welcome__hello h1 {
    margin: 0;
    font-size: 1.875rem;
    font-weight: 600;
    letter-spacing: -.02em;
}

.chat-welcome__hello p {
    margin: 0;
    color: var(--cy-muted);
}

.chat-suggestions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
}

.chip {
    min-height: 2.25rem;
    padding: 0 .875rem;
    border: 1px solid var(--cy-line);
    border-radius: 99px;
    background: var(--cy-composer-bg);
    color: var(--cy-text);
    font-size: .8125rem;
    font-weight: 500;
}

.chip:hover {
    border-color: var(--cy-accent);
    color: var(--cy-accent);
}

.chat-disclaimer {
    flex: none;
    margin: 0;
    padding: 0 1.5rem 1rem;
    text-align: center;
    font-size: .75rem;
    color: var(--cy-muted);
}

/* ---------- Fil de discussion ---------- */

.chat-thread {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 2rem 1.5rem 1rem;
}

/* « Citer » au-dessus d'un passage sélectionné dans une réponse. */
.quote-button {
    position: absolute;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .25rem .625rem;
    border: 0;
    border-radius: .5rem;
    background: var(--cy-accent);
    color: #fff;
    font-size: .8125rem;
    box-shadow: 0 4px 12px rgb(0 0 0 / .2);
}

.quote-button svg {
    width: .875rem;
    height: .875rem;
}

.chat-thread__inner {
    max-width: 47.5rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Séparateur après les messages que l'IA ne lit plus qu'en résumé (ContextCompactor). */
.chat-summary {
    border-top: 1px dashed var(--cy-line);
    border-bottom: 1px dashed var(--cy-line);
    padding: .5rem 0;
    color: var(--cy-muted);
    font-size: .875rem;
}

.chat-summary > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    cursor: pointer;
    list-style: none;
}

.chat-summary > summary::-webkit-details-marker {
    display: none;
}

.chat-summary > summary svg {
    width: 1rem;
    height: 1rem;
}

.chat-summary__body {
    margin-top: .75rem;
    padding: .75rem 1rem;
    border-radius: .5rem;
    background: var(--cy-surface);
    color: var(--bs-body-color);
}

.chat-summary__note {
    color: var(--cy-muted);
}

.msg--user {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .5rem;
}

/* Pièces jointes d'une question. */
.msg__files {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-end;
    gap: .5rem;
    max-width: 85%;
}

/* Fichiers produits par l'IA, sous sa réponse. */
.msg--assistant .msg__files {
    justify-content: flex-start;
    max-width: none;
    margin-top: .75rem;
}

.file-chip {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    max-width: 16rem;
    padding: .5rem .75rem;
    border: 1px solid var(--cy-line);
    border-radius: .75rem;
    background: var(--cy-composer-bg);
    color: var(--cy-text);
    text-decoration: none;
}

/* Classeur Excel : étiquette de téléchargement et bouton d'aperçu collés. */
.file-chip-group {
    display: inline-flex;
}

.file-chip-group .file-chip {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.file-chip__preview {
    display: inline-flex;
    align-items: center;
    padding: 0 .75rem;
    border: 1px solid var(--cy-line);
    border-left: 0;
    border-radius: 0 .75rem .75rem 0;
    background: var(--cy-composer-bg);
    color: var(--cy-accent);
}

.file-chip__preview:hover {
    background: var(--cy-accent-soft);
}

.file-chip:hover {
    border-color: var(--cy-accent);
}

.file-chip__icon {
    flex: none;
    font-size: 1.25rem;
    color: var(--cy-accent);
}

.file-chip__text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.file-chip__name {
    overflow: hidden;
    font-size: .8125rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-chip__meta {
    color: var(--cy-muted);
    font-size: .75rem;
}

.file-thumb img {
    display: block;
    width: 8rem;
    height: 8rem;
    object-fit: cover;
    border: 1px solid var(--cy-line);
    border-radius: .75rem;
}

/* Image créée par l'IA : en grand, dans ses proportions ; un clic l'ouvre en taille réelle. */
.file-thumb--produced {
    max-width: 100%;
}

.file-thumb--produced img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 24rem;
    object-fit: contain;
}

/* Sous une question : ses versions (question modifiée) et le crayon. */
.msg__question-actions {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin-top: -.25rem;
}

.chat-thread.is-streaming .msg__question-actions .msg__versions {
    display: none;
}

.msg__edit {
    opacity: 0;
    transition: opacity .15s;
}

.msg--user:hover .msg__edit,
.msg__edit:focus-visible {
    opacity: 1;
}

.chat-thread.is-streaming .msg__edit {
    display: none;
}

@media (hover: none) {
    .msg__edit {
        opacity: 1;
    }
}

.msg__edit-form {
    width: min(100%, 44rem);
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.msg__edit-form textarea {
    resize: vertical;
}

.msg__edit-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
}

.msg__edit-foot .form-text {
    flex: 1 1 14rem;
    font-size: .75rem;
}

/* Passage cité d'une réponse (« Citer »), en tête de la question. */
.msg__quote {
    margin: 0 0 .5rem;
    padding-left: .75rem;
    border-left: 3px solid var(--cy-line);
    color: var(--cy-muted);
}

.msg__bubble {
    max-width: 85%;
    padding: .75rem 1rem;
    border-radius: 1.125rem 1.125rem .375rem 1.125rem;
    background: var(--cy-surface);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.msg--assistant {
    display: flex;
    gap: .875rem;
    align-items: flex-start;
}

.msg__avatar {
    width: 1.75rem;
    height: auto;
    flex: none;
    margin-top: .125rem;
}

.msg__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .625rem;
}

.msg__text {
    line-height: 1.65;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.msg__thinking summary {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    width: fit-content;
    padding: .25rem .625rem;
    border: 1px solid var(--cy-line);
    border-radius: 99px;
    color: var(--cy-muted);
    font-size: .8125rem;
    cursor: pointer;
}

.msg__thinking-text {
    margin-top: .625rem;
    padding: .25rem 0 .25rem .875rem;
    border-left: 2px solid var(--cy-line);
    color: var(--cy-muted);
    font-size: .875rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.msg__error {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    padding: .75rem 1rem;
    border-radius: .75rem;
    border: 1px solid var(--bs-danger-border-subtle);
    background: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
    font-size: .875rem;
}

.msg__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: -.25rem;
}

.msg__action {
    width: 1.875rem;
    height: 1.875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    color: var(--cy-muted);
}

.msg__action:hover {
    background: var(--cy-surface);
    color: var(--cy-text);
}

.msg__note {
    font-size: .75rem;
    color: var(--cy-muted);
    font-style: italic;
}

/* Sources web d'une réponse (pages lues, résultats cités). */
.msg__sources {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .375rem;
    padding: .75rem .875rem;
    border: 1px solid var(--cy-line);
    border-radius: .75rem;
    font-size: .8125rem;
}

/* Réponse d'un assistant de la base documentaire, affichée telle quelle au-dessus de ce que l'IA ajoute. */
.msg__docanswer {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .75rem 1rem;
    border: 1px solid var(--cy-line);
    border-left: 3px solid var(--cy-accent);
    border-radius: .75rem;
    background: var(--cy-surface);
}

.msg__docanswer-head {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    color: var(--cy-muted);
    font-size: .8125rem;
    font-weight: 600;
}

.msg__docanswer .msg__text > :last-child {
    margin-bottom: 0;
}

.msg__docanswer-sources {
    list-style: decimal inside;
    margin: 0;
    padding: .5rem 0 0;
    border-top: 1px solid var(--cy-line);
    color: var(--cy-muted);
    font-size: .8125rem;
}

.msg__docanswer-sources li {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.msg__sources-label {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    color: var(--cy-muted);
    font-weight: 600;
}

.msg__sources ol {
    margin: 0;
    padding-left: 1.25rem;
    display: grid;
    /* minmax(0, …) : un titre long se coupe (points de suspension) au lieu d'élargir l'encadré. */
    grid-template-columns: minmax(0, 1fr);
    gap: .25rem;
}

.msg__sources li {
    min-width: 0;
}

.msg__sources a {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--cy-text);
    text-decoration: none;
}

.msg__sources a:hover {
    text-decoration: underline;
}

.msg__source-host {
    color: var(--cy-muted);
    margin-right: .25rem;
}

.msg__rating {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .5rem;
}

.msg__action[aria-pressed="true"] {
    color: var(--cy-accent);
}

.msg__thanks,
.msg__reasons-label {
    color: var(--cy-muted);
    font-size: .75rem;
}

.msg__reasons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem;
}

.msg__reason {
    padding: .1875rem .625rem;
    border: 1px solid var(--cy-line);
    border-radius: 999px;
    background: transparent;
    color: var(--cy-text);
    font-size: .75rem;
}

.msg__reason:hover {
    background: var(--cy-surface);
}

.msg__reason[aria-pressed="true"] {
    border-color: var(--cy-accent);
    background: var(--cy-accent);
    color: #fff;
}

/* Réponses en Markdown (rendu serveur ou provisoire pendant le streaming). */
.markdown {
    white-space: normal;
}

.markdown > :first-child {
    margin-top: 0;
}

.markdown > :last-child {
    margin-bottom: 0;
}

.markdown p,
.markdown ul,
.markdown ol,
.markdown blockquote,
.markdown table,
.markdown .code-block,
.markdown pre {
    margin: 0 0 .875rem;
}

.markdown h1,
.markdown h2,
.markdown h3,
.markdown h4 {
    margin: 1.25rem 0 .625rem;
    font-weight: 600;
    line-height: 1.3;
}

.markdown h1 { font-size: 1.375rem; }
.markdown h2 { font-size: 1.1875rem; }
.markdown h3 { font-size: 1.0625rem; }
.markdown h4 { font-size: 1rem; }

.markdown ul,
.markdown ol {
    padding-left: 1.5rem;
}

.markdown li + li {
    margin-top: .25rem;
}

.markdown blockquote {
    padding-left: .875rem;
    border-left: 3px solid var(--cy-line);
    color: var(--cy-muted);
}

.markdown a {
    color: var(--cy-accent);
}

.markdown hr {
    border-color: var(--cy-line);
    opacity: 1;
}

.markdown table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: .875rem;
}

.markdown th,
.markdown td {
    min-width: 7.5rem;
    padding: .4375rem .75rem;
    border: 1px solid var(--cy-line);
    /* Pas de coupure au milieu des mots dans un tableau : il défile horizontalement sur mobile. */
    overflow-wrap: normal;
}

.markdown th {
    background: var(--cy-surface);
    font-weight: 600;
}

.markdown :not(pre) > code {
    padding: .125rem .375rem;
    border-radius: .3125rem;
    background: var(--cy-surface);
    font-size: .875em;
}

.markdown pre {
    padding: 1rem;
    border-radius: .75rem;
    background: #0f1623;
    color: #e6ecf3;
    font-size: .8125rem;
    line-height: 1.55;
    overflow-x: auto;
}

.code-block pre {
    margin: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.code-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .375rem .5rem .375rem 1rem;
    border-radius: .75rem .75rem 0 0;
    background: #1a2332;
    color: #9aa8ba;
    font-size: .75rem;
}

.code-head__actions {
    display: flex;
    gap: .125rem;
}

.code-head__btn {
    padding: .1875rem .5rem;
    border: 0;
    border-radius: .375rem;
    background: transparent;
    color: #c9d3e0;
    font-size: .75rem;
}

.code-head__btn:hover,
.code-head__btn:focus-visible {
    background: #26385a;
    color: #fff;
}

/* Aperçu d'un SVG ou d'un diagramme Mermaid : fond blanc dans les deux thèmes, comme l'image exportée. */
.code-preview {
    display: flex;
    justify-content: center;
    padding: 1rem;
    border: 1px solid var(--cy-line);
    border-top: 0;
    border-radius: 0 0 .75rem .75rem;
    background: #fff;
    overflow-x: auto;
}

.code-preview img {
    max-width: 100%;
    max-height: 32rem;
    height: auto;
}

.code-preview.is-loading {
    min-height: 6rem;
    background: #fff linear-gradient(90deg, #fff, #f4f7fa, #fff) 0 0 / 200% 100%;
    animation: cy-shimmer 1.2s linear infinite;
}

@keyframes cy-shimmer {
    to { background-position: -200% 0; }
}

.code-preview__error {
    margin: 0;
    padding: .5rem 1rem;
    background: var(--bs-warning-bg-subtle);
    color: var(--bs-warning-text-emphasis);
    font-size: .8125rem;
}

/* Coloration syntaxique (highlight.js) : les blocs de code ont un fond sombre dans les deux thèmes,
   une seule palette suffit, contrastée sur ce fond. */
.hljs-comment,
.hljs-quote {
    color: #7f8ea3;
    font-style: italic;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-doctag,
.hljs-section {
    color: #82aaff;
}

.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-symbol {
    color: #a5d6a7;
}

.hljs-number,
.hljs-literal,
.hljs-bullet,
.hljs-link {
    color: #f78c6c;
}

.hljs-title,
.hljs-title.function_,
.hljs-function .hljs-title {
    color: #ffcb6b;
}

.hljs-type,
.hljs-title.class_,
.hljs-built_in,
.hljs-selector-class,
.hljs-selector-id {
    color: #89ddff;
}

.hljs-attr,
.hljs-attribute,
.hljs-property,
.hljs-meta,
.hljs-variable.language_ {
    color: #c792ea;
}

.hljs-name,
.hljs-tag,
.hljs-template-tag,
.hljs-deletion {
    color: #f07178;
}

.hljs-variable,
.hljs-template-variable,
.hljs-params,
.hljs-subst {
    color: #e6ecf3;
}

.hljs-addition {
    background: rgba(165, 214, 167, .12);
}

.hljs-deletion {
    background: rgba(240, 113, 120, .12);
}

.hljs-emphasis {
    font-style: italic;
}

.hljs-strong {
    font-weight: 600;
}

[data-bs-theme="dark"] .markdown pre {
    background: #0a1019;
}

[data-bs-theme="dark"] .code-head {
    background: #141d2b;
}

.msg__pending {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--cy-muted);
    font-size: .875rem;
}

.msg__dots {
    display: inline-flex;
    gap: .1875rem;
}

.msg__dots i {
    width: .375rem;
    height: .375rem;
    border-radius: 50%;
    background: var(--cy-accent);
    animation: cy-blink 1.2s infinite ease-in-out;
}

.msg__dots i:nth-child(2) {
    animation-delay: .2s;
}

.msg__dots i:nth-child(3) {
    animation-delay: .4s;
}

@keyframes cy-blink {
    0%, 80%, 100% { opacity: .25; }
    40% { opacity: 1; }
}

.chat-dock {
    flex: none;
    width: 100%;
    max-width: 50.5rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: .5rem 1.5rem 1.25rem;
}

/* Bandeau « il manque ta clé API ». */
.setup-callout {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .875rem 1rem;
    border: 1px solid var(--cy-line);
    border-radius: .875rem;
    background: var(--cy-accent-soft);
    font-size: .875rem;
}

.setup-callout > div {
    flex: 1;
}

.setup-callout p {
    margin: .125rem 0 0;
    color: var(--cy-muted);
}

/* ---------- Zone de saisie ---------- */

.composer {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .875rem;
    padding: 1rem .875rem .625rem 1.25rem;
    border: 1px solid var(--cy-composer-line);
    border-radius: 1.375rem;
    background: var(--cy-composer-bg);
    box-shadow: var(--cy-composer-shadow);
}

.composer:focus-within {
    border-color: var(--cy-accent);
}

/* Fichier glissé au-dessus de la zone de saisie. */
.composer.is-dragging {
    border-color: var(--cy-accent);
    border-style: dashed;
    background: var(--cy-accent-soft);
}

.composer__files {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.composer__file {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    max-width: 15rem;
    padding: .3125rem .375rem .3125rem .625rem;
    border: 1px solid var(--cy-line);
    border-radius: .625rem;
    background: var(--cy-surface);
    font-size: .8125rem;
}

.composer__file img {
    width: 1.75rem;
    height: 1.75rem;
    margin-left: -.25rem;
    object-fit: cover;
    border-radius: .375rem;
}

.composer__file-name {
    min-width: 0;
    overflow: hidden;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.composer__file-size {
    flex: none;
    color: var(--cy-muted);
    font-size: .75rem;
}

.composer__file-remove {
    flex: none;
    width: 1.375rem;
    height: 1.375rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--cy-muted);
    font-size: 1rem;
    line-height: 1;
}

.composer__file-remove:hover {
    background: var(--cy-line);
    color: var(--cy-text);
}

.composer__file-error {
    width: 100%;
    color: var(--bs-danger-text-emphasis);
    font-size: .8125rem;
}

.composer__input {
    width: 100%;
    max-height: 12rem;
    border: 0;
    outline: 0;
    resize: none;
    background: transparent;
    color: var(--cy-text);
    font-size: 1rem;
    line-height: 1.5;
}

.composer__input::placeholder {
    color: var(--cy-muted);
}

.composer__toolbar {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.composer__toolbar .btn-icon {
    width: 2.25rem;
    height: 2.25rem;
}

.switch-track {
    position: relative;
    width: 1.875rem;
    height: 1.125rem;
    border-radius: 99px;
    background: var(--cy-switch-off);
    transition: background .15s;
}

.switch-thumb {
    position: absolute;
    top: .125rem;
    left: .125rem;
    width: .875rem;
    height: .875rem;
    border-radius: 50%;
    background: #fff;
    transition: transform .15s;
}

/* Menu « + » de la zone de saisie : premier niveau, puis un sous-menu ouvert à côté (sur téléphone, à la place). */
.composer__menu {
    min-width: 16rem;
    max-width: min(20rem, calc(100vw - 2rem));
    padding: 0;
    font-size: .875rem;
}

.composer__panel {
    padding: .375rem 0;
}

.composer__panel--sub {
    position: absolute;
    left: calc(100% + .375rem);
    bottom: 0;
    width: 18rem;
    max-width: calc(100vw - 2rem);
    border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);
    border-radius: var(--bs-dropdown-border-radius);
    background: var(--bs-dropdown-bg);
    box-shadow: var(--bs-dropdown-box-shadow);
}

.composer__menu-sub.is-open {
    background: var(--bs-dropdown-link-hover-bg);
}

.composer__menu-chevron {
    flex: none;
    color: var(--cy-muted);
}

.composer__menu-count {
    flex: none;
    min-width: 1.25rem;
    padding: .125rem .375rem;
    border-radius: 99px;
    background: var(--cy-accent-soft);
    color: var(--cy-accent);
    font-size: .75rem;
    font-weight: 600;
    text-align: center;
}

.composer__menu-hint {
    flex: none;
    color: var(--cy-muted);
    font-size: .75rem;
}

.composer__menu-key {
    flex: none;
    padding: 0 .375rem;
    border: 1px solid var(--cy-line);
    border-radius: .25rem;
    background: none;
    color: var(--cy-muted);
    font-size: .75rem;
}

.composer__menu-switch small {
    display: block;
    color: var(--cy-muted);
    font-size: .75rem;
    white-space: normal;
}

.composer__menu-switch[data-locked] {
    cursor: default;
    color: var(--cy-muted);
}

.composer__menu-switch[data-locked]:hover {
    background: none;
}

/* Niveaux de réflexion : un seul coché à la fois. */
.composer__radio {
    flex: none;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--cy-line);
    border-radius: 50%;
}

.composer__effort[aria-checked="true"] .composer__radio {
    border: 5px solid var(--cy-accent);
}

.composer__menu .dropdown-header svg {
    width: 1em;
    height: 1em;
    vertical-align: -.125em;
}

.composer__menu-row {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .25rem 1rem;
}

.composer__menu-row label {
    flex: 1;
}

/* Sur téléphone, le sous-menu remplace le premier niveau, avec « ‹ » pour revenir. */
@media (max-width: 575.98px) {
    .composer__menu.has-panel .composer__panel--root {
        display: none;
    }

    .composer__panel--sub {
        position: static;
        width: auto;
        border: 0;
        box-shadow: none;
    }

    .composer__panel-back {
        font-weight: 600;
    }
}

/* Ligne de contexte : ce qui servira à la réponse, sur une seule ligne. */
.composer__context {
    display: flex;
    align-items: center;
    gap: .25rem .375rem;
    min-width: 0;
    overflow: hidden;
    margin: -.25rem 0 -.25rem -.375rem;
    font-size: .75rem;
    white-space: nowrap;
}

.composer__context.is-expanded {
    flex-wrap: wrap;
    margin-block: -.125rem;
}

.composer__ctx {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    flex: none;
    height: 1.5rem;
    padding: 0 .45rem 0 .375rem;
    border: 0;
    border-radius: .5rem;
    background: none;
    color: var(--cy-muted);
}

.composer__ctx.is-locked:hover {
    background: var(--cy-surface);
    color: var(--cy-text);
}

.composer__ctx.is-chosen {
    padding-right: .125rem;
    background: var(--cy-accent-soft);
    color: var(--cy-accent);
    font-weight: 500;
}

.composer__ctx-mark {
    flex: none;
    width: .8125rem;
    height: .8125rem;
}

.composer__ctx .agent-icon {
    width: 1.125rem;
    height: 1.125rem;
    font-size: .5625rem;
}

.composer__ctx-remove {
    width: 1.125rem;
    height: 1.125rem;
    padding: 0;
    border: 0;
    border-radius: .375rem;
    background: none;
    color: inherit;
    line-height: 1;
}

.composer__ctx-remove:hover {
    background: color-mix(in srgb, var(--cy-accent) 15%, transparent);
}

.composer__ctx-more {
    flex: none;
    height: 1.5rem;
    padding: 0 .5rem;
    border: 0;
    border-radius: .5rem;
    background: var(--cy-surface);
    color: var(--cy-text);
    font-weight: 500;
}

.composer__menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: .625rem;
}

.composer__menu .dropdown-item > span:not(.switch-track, .composer__radio, .composer__menu-count, .composer__menu-hint) {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.composer__menu .dropdown-header {
    font-size: .75rem;
}

/* Jauge du contexte (sous-menu Réponse d'une conversation). */
.composer__gauge {
    display: grid;
    gap: .375rem;
    padding: .125rem 1rem .375rem;
    max-width: 18rem;
}

.composer__gauge small {
    color: var(--cy-muted);
    line-height: 1.35;
}

.composer__gauge-bar {
    height: .375rem;
    border-radius: 1rem;
    background: var(--cy-line);
    overflow: hidden;
}

.composer__gauge-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--cy-accent);
}

/* Menu des compétences : la liste défile au-delà d'une douzaine, avec un filtre au-dessus. */
.composer__menu-list {
    max-height: min(18rem, 40vh);
    overflow-y: auto;
}

.composer__menu-filter {
    padding: 0 .75rem .5rem;
}

.composer__menu .composer__menu-link {
    color: var(--cy-muted);
    font-size: .8125rem;
}

[aria-checked="true"] > .switch-track {
    background: var(--cy-accent);
}

[aria-checked="true"] > .switch-track .switch-thumb {
    transform: translateX(.75rem);
}

.composer__model {
    max-width: 12rem;
    height: 2.25rem;
    padding: 0 .625rem;
    border: 0;
    text-overflow: ellipsis;
    cursor: pointer;
    border-radius: .625rem;
    background: transparent;
    color: var(--cy-muted);
    font-size: .8125rem;
    font-weight: 500;
}

.composer__model:hover,
.composer__model:focus-visible {
    background: var(--cy-surface);
    color: var(--cy-text);
    outline: 0;
}

.composer__stop {
    background: var(--cy-text);
}

.composer__stop svg {
    fill: currentColor;
    font-size: .875rem;
}

.composer__send {
    width: 2.375rem;
    height: 2.375rem;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: .75rem;
    background: var(--cy-accent);
    color: #fff;
    font-size: 1.125rem;
}

.composer__send:disabled {
    background: var(--cy-send-idle);
}

/* Attente de la réponse : flèche remplacée par une roue. */
.composer.is-pending .composer__send {
    background: var(--cy-accent);
}

.composer.is-pending .composer__send svg {
    display: none;
}

.composer.is-pending .composer__send::after {
    content: "";
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: cy-spin .8s linear infinite;
}

@keyframes cy-spin {
    to { transform: rotate(360deg); }
}

/* Réponse en cours : anneau qui tourne dans le bouton Stop, arrêté (orange) quand l'IA attend un accord. */
.composer.is-streaming .composer__stop {
    position: relative;
}

.composer.is-streaming .composer__stop::after {
    content: "";
    position: absolute;
    inset: .3125rem;
    border: 2px solid rgb(255 255 255 / .25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: cy-spin .9s linear infinite;
}

.composer.is-waiting .composer__stop::after {
    border-color: var(--bs-warning);
    animation: none;
}

/* Au bout de la réponse en cours : elle écrit encore, ou attend un accord. */
.msg__working {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: .375rem;
    color: var(--cy-muted);
    font-size: .8125rem;
}

.msg__working.is-waiting {
    color: var(--bs-warning-text-emphasis);
    font-weight: 500;
}

.msg__working.is-waiting .msg__dots i {
    background: var(--bs-warning);
}

@media (prefers-reduced-motion: reduce) {
    .composer.is-streaming .composer__stop::after {
        animation: none;
    }
}

@media (max-width: 575.98px) {
    .chat-thread {
        padding: 1.25rem 1rem .5rem;
    }

    .chat-dock {
        padding: .5rem .75rem .75rem;
    }

    .settings {
        padding: 1.5rem 1rem;
    }

    .setup-callout {
        flex-direction: column;
        align-items: stretch;
    }
    .chat-welcome__hello h1 {
        font-size: 1.5rem;
    }

}

/* ---------- Réglages ---------- */

.settings {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 2.5rem 1.5rem;
}

.settings__inner {
    max-width: 40rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.settings__panel {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.settings__panel[hidden] {
    display: none;
}

.settings__status {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--bs-success);
    font-weight: 600;
}

.settings__status svg {
    font-size: 1.25rem;
}

.settings__status--off {
    color: var(--cy-muted);
    font-weight: 400;
}

.settings__title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.settings__lead {
    margin: 0;
    color: var(--cy-muted);
    font-size: .875rem;
}

.settings-card {
    padding: 1.5rem;
    border: 1px solid var(--cy-line);
    border-radius: 1rem;
    background: var(--cy-composer-bg);
}

.settings-card__head {
    display: flex;
    align-items: center;
    gap: .875rem;
    margin-bottom: 1.25rem;
}

/* Sur un téléphone, le bouton ou l'état de la carte passe sous le titre au lieu d'écraser le texte. */
@media (max-width: 575.98px) {
    .settings-card__head {
        flex-wrap: wrap;
    }

    .settings-card__head > div {
        flex: 1 1 calc(100% - 3.125rem);
        min-width: 0;
    }

    .settings__tabs .admin-tabs__link {
        padding-inline: .5rem;
    }

    .settings__tabs .admin-tabs__link svg {
        display: none;
    }

    .stat-tile__value {
        font-size: 1.375rem;
    }
}

.settings-card__logo {
    flex-shrink: 0;
    width: 2.25rem;
    height: auto;
}

.settings-card__head h2 {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
}

.settings-card__head p {
    margin: 0;
    color: var(--cy-muted);
    font-size: .8125rem;
}

/* ---------- Serveurs MCP ---------- */

.settings__back {
    width: fit-content;
    color: var(--cy-muted);
    font-size: .8125rem;
    text-decoration: none;
}

.settings__back:hover {
    color: var(--cy-text);
}

.settings-card__title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .75rem;
    font-size: 1rem;
    font-weight: 600;
}

.settings-card--danger {
    border-color: var(--bs-danger-border-subtle);
}

.mcp-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.mcp-list__item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .625rem .875rem;
    border: 1px solid var(--cy-line);
    border-radius: .75rem;
}

.mcp-list__item.is-disabled {
    opacity: .6;
}

.mcp-list__icon {
    flex: none;
    font-size: 1.125rem;
    color: var(--cy-accent);
}

.mcp-list__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.mcp-list__name {
    font-weight: 500;
    color: var(--cy-text);
    text-decoration: none;
}

a.mcp-list__name:hover {
    color: var(--cy-accent);
}

.mcp-list__meta,
.mcp-list__empty {
    margin: 0;
    color: var(--cy-muted);
    font-size: .8125rem;
}

.mcp-list__meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mcp-list__status {
    flex: none;
    font-size: 1.125rem;
}

.mcp-tools {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.mcp-tools__item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .625rem .5rem;
    border-radius: .625rem;
}

.mcp-tools__item:hover {
    background: var(--cy-surface);
}

.mcp-tools__item .form-check-input {
    flex: none;
    margin-top: .25rem;
}

.mcp-tools__all {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem;
    margin-bottom: .25rem;
    border-bottom: 1px solid var(--cy-line);
    font-weight: 500;
    cursor: pointer;
}

.mcp-tools__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .125rem;
}

.mcp-tools__name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem;
    font-weight: 500;
    cursor: pointer;
}

.mcp-tools__details summary {
    width: fit-content;
    color: var(--cy-muted);
    font-size: .75rem;
    cursor: pointer;
}

.mcp-tools__details[open] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.mcp-tools__name .badge {
    font-weight: 500;
}

.mcp-tools__description {
    margin: 0;
    color: var(--cy-muted);
    font-size: .8125rem;
    /* Les descriptions des serveurs contiennent parfois de longues URL sans espace. */
    overflow-wrap: anywhere;
}

.mcp-tools__id {
    width: fit-content;
    font-size: .75rem;
    color: var(--cy-muted);
}

/* Appels d'outils pendant une réponse, puis leur historique replié. */
.msg__tools {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .375rem;
}

.msg__tool {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    width: fit-content;
    padding: .25rem .625rem;
    border: 1px solid var(--cy-line);
    border-radius: 99px;
    color: var(--cy-muted);
    font-size: .8125rem;
}

.msg__tool-state {
    width: .75rem;
    height: .75rem;
    border-radius: 50%;
    flex: none;
}

.msg__tool.is-running .msg__tool-state {
    border: 2px solid var(--cy-line);
    border-top-color: var(--cy-accent);
    animation: cy-spin .8s linear infinite;
}

.msg__tool.is-done .msg__tool-state {
    background: var(--bs-success);
}

.msg__tool.is-error .msg__tool-state {
    background: var(--bs-danger);
}

.msg__tool.is-pending .msg__tool-state {
    background: var(--bs-warning);
    animation: cy-pulse 1.2s ease-in-out infinite;
}

.msg__tool.is-refused .msg__tool-state {
    border: 2px solid var(--cy-muted);
}

.msg__tool.is-refused .msg__tool-label {
    text-decoration: line-through;
}

@keyframes cy-pulse {
    50% { opacity: .35; }
}

.msg__approval {
    max-width: 36rem;
    padding: .875rem 1rem;
    border: 1px solid var(--cy-line);
    border-left: 3px solid var(--bs-warning);
    border-radius: .75rem;
    background: var(--cy-surface);
}

.msg__approval.is-destructive {
    border-left-color: var(--bs-danger);
}

.msg__approval-title {
    margin: 0;
    font-weight: 600;
}

.msg__approval-hint {
    margin: .25rem 0 0;
    color: var(--cy-muted);
    font-size: .8125rem;
}

.msg__approval-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .75rem;
}

.msg__tool-calls summary {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    width: fit-content;
    padding: .25rem .625rem;
    border: 1px solid var(--cy-line);
    border-radius: 99px;
    color: var(--cy-muted);
    font-size: .8125rem;
    cursor: pointer;
}

.msg__tool-calls ol {
    margin: .625rem 0 0;
    padding-left: 1.25rem;
    font-size: .8125rem;
}

.msg__tool-calls li + li {
    margin-top: .625rem;
}

.msg__tool-data {
    max-height: 12rem;
    margin: .25rem 0 0;
    padding: .5rem .75rem;
    border-radius: .5rem;
    background: var(--cy-surface);
    color: var(--cy-text);
    font-size: .75rem;
    white-space: pre-wrap;
    overflow: auto;
}

/* ---------- Projets ---------- */

.project-link {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-right: .625rem;
}

.project-link > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-link__icon {
    flex: none;
    color: var(--cy-side-muted);
}

.project-link__shared {
    flex: none;
    margin-left: auto;
    color: var(--cy-side-muted);
    font-size: .8125rem;
}

.conversation-link__project {
    color: var(--cy-side-muted);
}

/* Résultat de recherche trouvé dans une pièce jointe ou un artefact. */
.conversation-link__hit {
    display: flex;
    align-items: center;
    gap: .3125rem;
    margin-top: .125rem;
    color: var(--cy-side-muted);
    font-size: .75rem;
}

.conversation-link__hit svg {
    flex: none;
}

.conversation-link__hit span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Conversation temporaire : rappel de sa date d'effacement, et « Garder ». */
.app-topbar__temporary {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex: none;
}

.app-topbar__temporary .app-topbar__project {
    max-width: none;
    border-style: dashed;
}

.app-topbar__project {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    max-width: 40%;
    flex: none;
    padding: .25rem .625rem;
    border: 1px solid var(--cy-line);
    border-radius: 99px;
    color: var(--cy-muted);
    font-size: .8125rem;
    text-decoration: none;
}

.app-topbar__project span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.app-topbar__project:hover {
    color: var(--cy-text);
    border-color: var(--cy-muted);
}

.project-create {
    display: flex;
    gap: .5rem;
}

.project-cards {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: .75rem;
}

.project-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    height: 100%;
    padding: 1rem 1.125rem;
    border: 1px solid var(--cy-line);
    border-radius: 1rem;
    background: var(--cy-composer-bg);
    color: var(--cy-text);
    text-decoration: none;
}

.project-card:hover {
    border-color: var(--cy-accent);
}

.project-card__icon {
    flex: none;
    font-size: 1.375rem;
    color: var(--cy-accent);
}

.project-card__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.project-card__name {
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.project-card__meta {
    color: var(--cy-muted);
    font-size: .8125rem;
}

.project {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 2rem 1.5rem 3rem;
}

.project__inner {
    max-width: 64rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.project__head {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.project__icon {
    flex: none;
    font-size: 1.75rem;
    color: var(--cy-accent);
}

.project__title {
    margin: 0;
    min-width: 0;
    font-size: 1.5rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.project__shared {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .25rem .625rem;
    border-radius: 999px;
    background: var(--cy-surface);
    color: var(--cy-muted);
    font-size: .8125rem;
}

.project__instructions {
    margin: 0 0 .5rem;
    white-space: pre-line;
    font-size: .875rem;
}

.project-members {
    margin: 0 0 .75rem;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.project-members__item {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 2rem;
}

.project-members__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: .875rem;
}

.project-members__role {
    flex: none;
    color: var(--cy-muted);
    font-size: .75rem;
}

.project-members__add {
    display: flex;
    gap: .5rem;
    margin-bottom: .375rem;
}

.avatar--sm {
    width: 1.625rem;
    height: 1.625rem;
    font-size: .6875rem;
}

.project__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    gap: 1.5rem;
    align-items: start;
    margin-top: .5rem;
}

.project__subtitle {
    margin: 0 0 .75rem;
    font-size: 1rem;
    font-weight: 600;
}

.project__aside {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.project__aside .settings-card {
    padding: 1.125rem;
}

.project-conversations {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--cy-line);
}

.project-conversations__item {
    display: flex;
    align-items: center;
    gap: .25rem;
    border-bottom: 1px solid var(--cy-line);
}

.project-conversations__link {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: .75rem .5rem;
    color: var(--cy-text);
    text-decoration: none;
}

.project-conversations__link:hover {
    background: var(--cy-surface);
}

.project-conversations__title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.project-conversations__date {
    flex: none;
    color: var(--cy-muted);
    font-size: .8125rem;
}

.project-files {
    margin: 0 0 .75rem;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.project-files__item {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.project-files__item .file-chip {
    flex: 1;
    min-width: 0;
    max-width: none;
}

.project-files__usage {
    margin: 0 0 .75rem;
    color: var(--cy-muted);
    font-size: .75rem;
}

.project-files__usage.is-full {
    color: var(--bs-danger);
}

@media (max-width: 991px) {
    .project__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575.98px) {
    .project {
        padding: 1.25rem 1rem 2rem;
    }

    .app-topbar__project span {
        display: none;
    }

    /* Les étiquettes restent dans l'Historique : sur téléphone, la place va au titre. */
    .app-topbar__tag {
        display: none;
    }
}

/* ---------- Artefacts ---------- */

.conversation-layout {
    flex: 1;
    min-height: 0;
    display: flex;
}

.conversation-layout__chat {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.artifact-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    max-width: 30rem;
    padding: .75rem .875rem;
    border: 1px solid var(--cy-line);
    border-radius: .875rem;
    background: var(--cy-composer-bg);
    color: var(--cy-text);
    text-align: left;
}

.artifact-card:hover,
.artifact-card:focus-visible {
    border-color: var(--cy-accent);
}

.artifact-card__icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .625rem;
    background: var(--cy-accent-soft);
    color: var(--cy-accent);
    font-size: 1.125rem;
}

.artifact-card__spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--cy-line);
    border-top-color: var(--cy-accent);
    border-radius: 50%;
    animation: cy-spin .8s linear infinite;
}

.artifact-card__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.artifact-card__title {
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.artifact-card__meta {
    color: var(--cy-muted);
    font-size: .8125rem;
}

.artifact-card__open {
    flex: none;
    color: var(--cy-accent);
    font-size: .8125rem;
    font-weight: 500;
}

.msg__text .artifact-card {
    margin: .75rem 0;
}

.artifact-panel {
    flex: 0 0 min(48%, 46rem);
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--cy-line);
    background: var(--cy-bg);
}

.artifact-panel[hidden] {
    display: none;
}

.artifact-panel__head {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem .75rem .75rem 1.25rem;
    border-bottom: 1px solid var(--cy-line);
}

.artifact-panel__heading {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.artifact-panel__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.artifact-panel__meta {
    color: var(--cy-muted);
    font-size: .75rem;
}

.artifact-panel__versions {
    display: inline-flex;
    align-items: center;
    gap: .125rem;
    flex: none;
}

.artifact-panel__versions[hidden] {
    display: none;
}

.artifact-panel__version {
    min-width: 5.5rem;
    color: var(--cy-muted);
    font-size: .8125rem;
    text-align: center;
}

.artifact-panel__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .625rem 1.25rem;
    border-bottom: 1px solid var(--cy-line);
}

.artifact-panel__toolbar[hidden],
.artifact-panel__tabs[hidden] {
    display: none;
}

.artifact-panel__tabs {
    display: inline-flex;
    padding: .1875rem;
    border-radius: .625rem;
    background: var(--cy-surface);
}

.artifact-panel__tabs button {
    padding: .25rem .75rem;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    color: var(--cy-muted);
    font-size: .8125rem;
    font-weight: 500;
}

.artifact-panel__tabs button[aria-selected="true"] {
    background: var(--cy-composer-bg);
    color: var(--cy-text);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

.artifact-panel__toolbar .btn {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
}

.artifact-panel__body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

.artifact-panel__document {
    padding: 1.25rem 1.5rem 2rem;
}

.artifact-panel__code {
    flex: 1;
    margin: 0;
    padding: 1rem 1.25rem;
    background: var(--cy-surface);
    font-size: .8125rem;
    white-space: pre;
    overflow: visible;
}

.artifact-panel__code code {
    background: transparent;
    padding: 0;
}

.artifact-panel__frame {
    flex: 1;
    width: 100%;
    min-height: 20rem;
    border: 0;
    background: #fff;
}

/* Aperçu Word ou PowerPoint : même fond que sa page, pas d'éclair blanc avant le chargement en thème sombre. */
.artifact-panel__frame--office {
    background: #eef1f5;
}

[data-bs-theme="dark"] .artifact-panel__frame--office {
    background: #0f1724;
}

.artifact-panel__canvas {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 1.5rem;
}

.artifact-panel__image {
    max-width: 100%;
    height: auto;
    padding: 1rem;
    border-radius: .75rem;
    background: #fff;
}

.artifact-panel__note {
    margin: 0;
    padding: .625rem 1.25rem;
    color: var(--cy-muted);
    font-size: .8125rem;
}

.artifact-panel__list {
    margin: 0;
    padding: .75rem;
    list-style: none;
}

.artifact-panel__list-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: .75rem;
    border: 0;
    border-radius: .625rem;
    background: transparent;
    color: var(--cy-text);
    text-align: left;
}

.artifact-panel__list-item:hover {
    background: var(--cy-surface);
}

.artifact-panel__list-title {
    font-weight: 500;
}

.artifact-panel__list-meta {
    color: var(--cy-muted);
    font-size: .8125rem;
}

.artifact-panel__editor {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .625rem;
    padding: 1rem 1.25rem;
}

.artifact-panel__editor textarea {
    flex: 1;
    min-height: 16rem;
    font-family: var(--bs-font-monospace);
    font-size: .8125rem;
    resize: none;
}

.artifact-panel__editor-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.artifact-panel__editor-hint {
    flex: 1;
    min-width: 12rem;
    color: var(--cy-muted);
    font-size: .75rem;
}

.artifact-shares {
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.artifact-shares__item {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    padding: .75rem;
    border: 1px solid var(--cy-line);
    border-radius: .625rem;
}

.artifact-shares__meta {
    color: var(--cy-muted);
    font-size: .75rem;
}

.artifact-shares__actions {
    display: flex;
    gap: .5rem;
}

.shared-artifact {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 2rem 1.5rem 3rem;
}

.shared-artifact__inner {
    max-width: 60rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.shared-artifact__banner {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    margin: 0;
    padding: .75rem 1rem;
    border-radius: .75rem;
    background: var(--cy-accent-soft);
    color: var(--cy-text);
    font-size: .875rem;
}

.shared-artifact__banner svg {
    flex: none;
    margin-top: .1875rem;
    color: var(--cy-accent);
}

.shared-artifact__head {
    display: flex;
    align-items: center;
    gap: .875rem;
}

.shared-artifact__heading {
    flex: 1;
    min-width: 0;
}

.shared-artifact__title {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.shared-artifact__meta {
    margin: 0;
    color: var(--cy-muted);
    font-size: .8125rem;
}

.shared-artifact__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.shared-artifact__body {
    padding: 1.5rem;
    border: 1px solid var(--cy-line);
    border-radius: 1rem;
    background: var(--cy-composer-bg);
}

.shared-artifact__frame {
    display: block;
    width: 100%;
    height: 70vh;
    border: 0;
    border-radius: .5rem;
    background: #fff;
}

@media (max-width: 575.98px) {
    .shared-artifact {
        padding: 1.25rem 1rem 2rem;
    }

    .shared-artifact__head {
        flex-wrap: wrap;
    }

    .shared-artifact__actions {
        flex-basis: 100%;
    }

    .shared-artifact__body {
        padding: 1rem;
    }
}

/* Sous lg : le panneau couvre l'écran, par-dessus la conversation. */
@media (max-width: 991px) {
    .artifact-panel {
        position: fixed;
        inset: 0;
        z-index: 1040;
        border-left: 0;
    }
}

/* ---------- Pages de liste (artefacts, bibliothèque, historique, projets, tâches…) ---------- */

.library {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 2.5rem 1.5rem;
}

.library__inner {
    max-width: 60rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.library__tabs {
    display: flex;
    gap: .25rem;
    border-bottom: 1px solid var(--cy-line);
}

.library__tab {
    margin-bottom: -1px;
    padding: .5rem .875rem;
    border-bottom: 2px solid transparent;
    color: var(--cy-muted);
    font-size: .875rem;
    font-weight: 500;
    text-decoration: none;
}

.library__tab:hover {
    color: var(--cy-text);
}

.library__tab[aria-current="page"] {
    border-bottom-color: var(--cy-accent);
    color: var(--cy-text);
}

/* Trois onglets sur un téléphone : plus serrés, et la ligne défile plutôt que de déborder. */
@media (max-width: 991px) {
    .library__tabs {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .library__tab {
        flex-shrink: 0;
        padding: .5rem .625rem;
        white-space: nowrap;
    }
}

.library__filters {
    display: flex;
    gap: .5rem;
}

.library__filters .form-select {
    flex: 0 0 12rem;
}

.library__grid {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
    gap: .75rem;
}

.library-card {
    display: flex;
    align-items: flex-start;
    gap: .25rem;
    padding: .875rem .5rem .875rem 1rem;
    border: 1px solid var(--cy-line);
    border-radius: 1rem;
    background: var(--cy-composer-bg);
}

.library-card:hover {
    border-color: var(--cy-accent);
}

.library-card__link {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    color: var(--cy-text);
    text-decoration: none;
}

.library-card__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .125rem;
}

.library-card__title {
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.library-card__meta {
    display: flex;
    align-items: center;
    gap: .25rem;
    color: var(--cy-muted);
    font-size: .75rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.library-card__meta--wrap {
    flex-wrap: wrap;
    white-space: normal;
}

/* Étiquettes d'une carte (sur l'accueil, dans la barre latérale, catégorie d'un agent). */
.library-card__tag {
    margin-left: .25rem;
    padding: .0625rem .45rem;
    border-radius: 999px;
    background: var(--cy-accent-soft);
    color: var(--cy-accent);
    font-size: .6875rem;
    font-weight: 600;
    white-space: nowrap;
}

.library-card__tag--neutral {
    background: var(--cy-surface);
    color: var(--cy-muted);
    box-shadow: inset 0 0 0 1px var(--cy-line);
}

.library-card__meta svg {
    flex: none;
}

.library-card__conversation {
    overflow: hidden;
    text-overflow: ellipsis;
}

.artifact-panel__toolbar .btn.is-done {
    border-color: var(--bs-success);
    color: var(--bs-success);
}

@media (max-width: 575.98px) {
    .library__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .library {
        padding: 1.5rem 1rem;
    }

    .library__filters {
        flex-direction: column;
    }

    .library__filters .form-select {
        flex-basis: auto;
    }
}

/* ---------- Donner un avis ---------- */

.feedback-panel {
    --bs-offcanvas-width: 26rem;
    background: var(--cy-bg);
    color: var(--cy-text);
}

.feedback-panel__types {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.feedback-panel__type {
    padding: .3rem .8rem;
    border: 1px solid var(--cy-line);
    border-radius: 999px;
    background: var(--cy-surface);
    color: var(--cy-muted);
    font-size: .8125rem;
    cursor: pointer;
    transition: border-color .15s, background-color .15s, color .15s;
}

.feedback-panel__type:hover {
    border-color: var(--cy-accent);
    color: var(--cy-text);
}

.btn-check:checked + .feedback-panel__type {
    border-color: var(--cy-accent);
    background: var(--cy-accent-soft);
    color: var(--cy-accent);
    font-weight: 600;
}

.btn-check:focus-visible + .feedback-panel__type {
    outline: 2px solid var(--cy-accent);
    outline-offset: 2px;
}

.feedback-panel__error {
    margin: 0 0 .75rem;
    color: var(--bs-danger);
    font-size: .8125rem;
}

.feedback-panel__done {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 0;
    text-align: center;
}

.feedback-panel__done[hidden] {
    display: none;
}

.feedback-panel__done svg {
    margin-bottom: .75rem;
    font-size: 2.5rem;
    color: var(--bs-success);
}

/* ---------- Ma consommation ---------- */

.stat-tile__meta {
    color: var(--cy-muted);
    font-size: .75rem;
}

.usage-quota {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    font-size: .8125rem;
}

.usage-quota__head {
    display: flex;
    justify-content: space-between;
    color: var(--cy-muted);
}

.usage-quota__bar {
    height: .5rem;
    border-radius: 99px;
    background: var(--cy-surface);
    overflow: hidden;
}

.usage-quota__bar span {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: var(--cy-accent);
}

.usage-quota__bar span.is-high {
    background: var(--bs-warning);
}

.usage-breakdown {
    display: grid;
    /* minmax(0, …) : sans lui, la carte s'élargit à la taille de son tableau au lieu de le faire défiler. */
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.usage-breakdown .admin-card {
    margin: 0;
}

/* Chiffres sur une ligne : « 1 839 627 » ou « < 0,01 € » ne se coupent pas. */
.usage-breakdown .admin-table .text-end,
.usage-chart__table .admin-table .text-end {
    white-space: nowrap;
}

/* ---------- Dictée vocale ---------- */

.composer__mic {
    width: auto;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 .5rem;
    border-radius: .625rem;
    color: var(--cy-muted);
}

.composer__mic:hover {
    color: var(--cy-text);
}

/* Dictée en cours : micro rouge, avec un halo qui pulse doucement. */
.composer__mic.is-recording {
    background: var(--bs-danger);
    color: #fff;
    animation: cy-mic-pulse 1.6s ease-out infinite;
}

@keyframes cy-mic-pulse {
    0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, .45); }
    100% { box-shadow: 0 0 0 .5rem rgba(220, 53, 69, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .composer__mic.is-recording {
        animation: none;
    }
}

.composer__mic-busy[hidden] {
    display: none;
}

.composer__mic-busy {
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--cy-line);
    border-top-color: var(--cy-accent);
    border-radius: 50%;
    animation: cy-spin .8s linear infinite;
}

.composer__notice {
    margin: .375rem 0 0;
    color: var(--bs-danger);
    font-size: .8125rem;
    text-align: center;
}

/* ---------- Tâches planifiées ---------- */

.app-sidebar__count {
    margin-left: auto;
    min-width: 1.25rem;
    padding: 0 .375rem;
    border-radius: 99px;
    background: var(--cy-accent);
    color: #fff;
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1.25rem;
    text-align: center;
}

.tasks__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.tasks__head .btn,
.tasks__actions .btn {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
}

.tasks__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.tasks__empty {
    padding: 1.25rem 1.5rem;
    border: 1px dashed var(--cy-line);
    border-radius: 1rem;
    color: var(--cy-muted);
    font-size: .875rem;
}

.tasks {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .625rem;
}

/* Compteur sous une zone de texte limitée (char_count_controller.js). */
.char-count {
    margin-top: .25rem;
    color: var(--cy-muted);
    font-size: .75rem;
    text-align: right;
}

.char-count.is-near {
    color: var(--bs-warning-text-emphasis);
}

.char-count.is-cut {
    color: var(--bs-danger-text-emphasis);
    text-align: left;
}

/* Mes documents : guides et charte, à lire dans l'appli ou en PDF. */
.documents {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .625rem;
}

.document-row {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: .875rem 1rem;
    border: 1px solid var(--cy-line);
    border-radius: 1rem;
    background: var(--cy-composer-bg);
}

.document-row.is-pending {
    border-style: dashed;
}

.document-row__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
}

.document-row__title a {
    color: var(--cy-text);
    text-decoration: none;
}

.document-row__title a:hover {
    color: var(--cy-accent);
}

.document-row__meta {
    color: var(--cy-muted);
    font-size: .8125rem;
}

.document-row__actions {
    flex: none;
    display: flex;
    gap: .5rem;
}

.document-row__soon {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    color: var(--cy-muted);
    font-size: .8125rem;
}

.document__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.library__inner.document {
    max-width: 48rem;
}

.document__head .btn {
    flex: none;
    white-space: nowrap;
}

.document__body {
    line-height: 1.65;
}

.document__body :not(pre) > code {
    overflow-wrap: anywhere;
}

.document__body img {
    max-width: 100%;
    height: auto;
    margin: .5rem 0;
    border: 1px solid var(--cy-line);
    border-radius: .625rem;
}

.document__body h2 {
    margin-top: 2rem;
    padding-bottom: .375rem;
    border-bottom: 1px solid var(--cy-line);
}

@media (max-width: 991px) {
    .document-row {
        flex-wrap: wrap;
    }

    .document-row__actions {
        width: 100%;
        justify-content: flex-end;
    }
}

.task-row {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: .875rem 1rem;
    border: 1px solid var(--cy-line);
    border-radius: 1rem;
    background: var(--cy-composer-bg);
    color: var(--cy-text);
    text-decoration: none;
}

.task-row:hover {
    border-color: var(--cy-accent);
}

.task-row.is-paused {
    opacity: .7;
}

.task-row__state {
    flex: none;
}

.task-row__next {
    color: var(--cy-muted);
    font-size: .8125rem;
}

.task-form__schedule {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    column-gap: 1rem;
}

.task-form__schedule [hidden] {
    display: none;
}

.task-prompt {
    margin: 0 0 .75rem;
    white-space: pre-wrap;
}

.task-run__status {
    flex: none;
    align-self: center;
    width: .625rem;
    height: .625rem;
    border-radius: 50%;
    background: var(--cy-muted);
}

.task-run__status.is-success {
    background: var(--bs-success);
}

.task-run__status.is-error {
    background: var(--bs-danger);
}

.task-run__status.is-running,
.task-run__status.is-queued {
    background: var(--bs-warning);
    animation: cy-pulse 1.2s ease-in-out infinite;
}

.task-run__error {
    display: block;
    color: var(--bs-danger);
    font-size: .8125rem;
    white-space: normal;
}

.min-w-0 {
    min-width: 0;
}

@media (max-width: 575.98px) {
    .task-row {
        flex-wrap: wrap;
    }
}

.task-api__token {
    margin-bottom: 1rem;
    padding: .875rem 1rem;
    border: 1px solid var(--bs-warning);
    border-radius: .75rem;
    background: var(--cy-surface);
    font-size: .875rem;
}

.task-api__example {
    margin: 0 0 .5rem;
    padding: .75rem 1rem;
    border-radius: .625rem;
    background: var(--cy-surface);
    font-size: .75rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.admin-switch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-left: 4px solid var(--bs-success);
}

.admin-switch.is-off {
    border-left-color: var(--bs-danger);
}

.admin-switch .btn {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
}

/* Réglages de la génération d'images, sous son interrupteur : deux colonnes, une seule sur téléphone. */
.image-settings {
    flex-basis: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--cy-line);
}

.image-settings__wide {
    grid-column: 1 / -1;
}

@media (max-width: 991px) {
    .image-settings {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Page vide ou indisponible ---------- */

.empty-state {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem 4rem;
}

.empty-state__inner {
    max-width: 34rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

.empty-state__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    background: var(--cy-accent-soft);
    color: var(--cy-accent);
    font-size: 1.5rem;
}

.empty-state__title {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 600;
}

.empty-state__text {
    margin: 0;
    color: var(--cy-muted);
}

.empty-state__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-top: .5rem;
}

.empty-state__actions .btn {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
}

/* ---------- Administration ---------- */

.admin {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1.5rem 1.5rem 2.5rem;
}

.admin__inner {
    max-width: 70rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.admin__lead,
.admin__meta,
.admin__empty {
    margin: 0;
    color: var(--cy-muted);
    font-size: .875rem;
}

.admin-tabs {
    display: flex;
    gap: .25rem;
    /* Trait dessiné en ombre : une bordure, avec la marge négative des onglets, faisait défiler la barre d'un pixel. */
    box-shadow: inset 0 -1px var(--cy-line);
    overflow-x: auto;
}

.admin-tabs__link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .625rem .875rem;
    border-bottom: 2px solid transparent;
    color: var(--cy-muted);
    font-size: .875rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.admin-tabs__link:hover {
    color: var(--cy-text);
}

.admin-tabs__link.is-active {
    border-bottom-color: var(--cy-accent);
    color: var(--cy-text);
}

.admin-card {
    margin: 0;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--cy-line);
    border-radius: 1rem;
    background: var(--cy-composer-bg);
}

/* Avis sur les réponses (pouce levé ou baissé). */
.ratings {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.5rem;
}

.ratings__score {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.ratings__value {
    font-size: 1.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ratings__label {
    color: var(--cy-muted);
    font-size: .875rem;
}

.ratings__bar {
    height: .5rem;
    margin-top: .5rem;
    border-radius: 999px;
    background: var(--bs-danger-bg-subtle);
    overflow: hidden;
}

.ratings__bar-up {
    display: block;
    height: 100%;
    background: var(--bs-success);
}

.ratings__subtitle {
    margin: 0 0 .5rem;
    font-size: .875rem;
    font-weight: 600;
}

.ratings__list {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .875rem;
}

.ratings__list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .375rem 0;
    border-bottom: 1px solid var(--cy-line);
    font-variant-numeric: tabular-nums;
}

.ratings svg {
    vertical-align: -.125em;
}

@media (max-width: 767.98px) {
    .ratings {
        grid-template-columns: minmax(0, 1fr);
    }
}

.admin-card__title {
    margin: 0 0 1rem;
    font-size: 1rem;
    font-weight: 600;
}

/* Texte d'explication d'une carte : un espace avant le formulaire ou le tableau qui suit. */
.admin-card > .admin__lead:not(:last-child) {
    margin-bottom: 1rem;
}

.stat-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 1rem;
}

.stat-tile {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--cy-line);
    border-radius: 1rem;
    background: var(--cy-composer-bg);
}

.stat-tile__label {
    color: var(--cy-muted);
    font-size: .8125rem;
}

.stat-tile__value {
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

/* Graphique « tokens par jour » : une série, barres fines arrondies côté données, grille discrète. */
.usage-chart__head h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.usage-chart__head p {
    margin: .125rem 0 1.25rem;
    color: var(--cy-muted);
    font-size: .8125rem;
}

.usage-chart__plot {
    position: relative;
    height: 13rem;
    margin-left: 3.5rem;
}

.usage-chart__grid span {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid var(--cy-chart-grid);
}

.usage-chart__grid b {
    position: absolute;
    top: 0;
    right: calc(100% + .5rem);
    transform: translateY(-50%);
    color: var(--cy-muted);
    font-size: .75rem;
    font-weight: 400;
    white-space: nowrap;
}

.usage-chart__bars {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    gap: 2px;
}

.usage-chart__col {
    position: relative;
    flex: 1;
    height: 100%;
    display: flex;
    align-items: flex-end;
    border-radius: 4px 4px 0 0;
    outline: 0;
}

.usage-chart__bar {
    width: 100%;
    max-width: 1.25rem;
    margin: 0 auto;
    border-radius: 4px 4px 0 0;
    background: var(--cy-chart);
}

.usage-chart__col:hover,
.usage-chart__col:focus-visible {
    background: var(--cy-accent-soft);
}

.usage-chart__col:hover::after,
.usage-chart__col:focus-visible::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + .375rem);
    left: 50%;
    z-index: 2;
    transform: translateX(-50%);
    padding: .375rem .625rem;
    border-radius: .5rem;
    background: var(--cy-text);
    color: var(--cy-bg);
    font-size: .75rem;
    white-space: nowrap;
    pointer-events: none;
}

.usage-chart__col:first-child:hover::after,
.usage-chart__col:first-child:focus-visible::after {
    left: 0;
    transform: none;
}

.usage-chart__col:last-child:hover::after,
.usage-chart__col:last-child:focus-visible::after {
    left: auto;
    right: 0;
    transform: none;
}

.usage-chart__x {
    display: flex;
    justify-content: space-between;
    margin: .5rem 0 0 3.5rem;
    color: var(--cy-muted);
    font-size: .75rem;
}

.usage-chart__table {
    margin-top: 1rem;
    font-size: .875rem;
}

.usage-chart__table summary {
    color: var(--cy-muted);
    cursor: pointer;
}

.usage-chart__table .admin-table {
    margin-top: .75rem;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}

.admin-table th {
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--cy-line);
    color: var(--cy-muted);
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

.admin-table--wrap-head th {
    white-space: normal;
}

.admin-table__me {
    margin-left: .25rem;
    padding: .0625rem .4rem;
    border-radius: 999px;
    background: var(--cy-accent-soft);
    color: var(--cy-accent);
    font-size: .6875rem;
    font-weight: 600;
}

.admin-table__roles {
    display: flex;
    gap: .375rem;
}

.admin-table td {
    padding: .625rem .75rem;
    border-bottom: 1px solid var(--cy-line);
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}

.admin-table tr:last-child td {
    border-bottom: 0;
}

.admin-table__name {
    display: block;
    font-weight: 500;
    white-space: nowrap;
}

.admin-table__meta {
    display: block;
    color: var(--cy-muted);
    font-size: .75rem;
}

.admin-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-top: 1rem;
}

.admin-pagination__count {
    color: var(--cy-muted);
    font-size: .875rem;
}

.admin-pagination .page-link {
    display: flex;
    align-items: center;
    min-height: 2rem;
}

.admin-pagination .page-link svg {
    width: 1rem;
    height: 1rem;
}

.admin-table tr.is-disabled .admin-table__name {
    color: var(--cy-muted);
    text-decoration: line-through;
}

.quota-form {
    display: flex;
    gap: .375rem;
    min-width: 10rem;
}

.quota-form .form-control {
    width: 7rem;
}

/* ---------- Version imprimable (export PDF) ---------- */

.print-page {
    background: #fff;
}

.print-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 50rem;
    margin: 0 auto;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--cy-line);
}

.print-head__logo {
    height: 1.5rem;
    width: auto;
}

.print-head__toolbar {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--cy-muted);
    font-size: .8125rem;
}

.print-body {
    max-width: 50rem;
    margin: 0 auto;
    padding: 1.5rem;
}

.print-title {
    margin: 0 0 .25rem;
    font-size: 1.5rem;
    font-weight: 600;
}

.print-meta {
    margin: 0 0 2rem;
    color: var(--cy-muted);
    font-size: .8125rem;
}

@media print {
    @page {
        margin: 15mm;
    }

    .print-head__toolbar,
    .msg__actions,
    .code-head__actions,
    .msg__error form {
        display: none !important;
    }

    .print-head,
    .print-body {
        max-width: none;
        padding-inline: 0;
    }

    /* Comme l'export Markdown, le PDF ne garde pas la réflexion. Blocs et images non coupés entre deux pages si possible. */
    .msg__thinking {
        display: none !important;
    }

    .msg,
    .code-block,
    .code-preview,
    .markdown table {
        break-inside: avoid;
    }

    .markdown pre {
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }

    .chat-thread__inner {
        max-width: none;
    }
}

/* ---------- Connexion ---------- */

.login {
    min-height: 100dvh;
    display: flex;
    flex-wrap: wrap;
}

.login__brand {
    flex: 1 1 30rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 3rem;
    padding: 3rem 3.5rem;
    background: #1a2332;
    color: #fff;
}

.login__logo {
    --brand-h: 2rem;
    align-self: flex-start;
}

.login__pitch {
    max-width: 28rem;
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
}

.login__mark {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}

/* Mêmes proportions que l'icône de l'appli : « IA » 1,34 fois la hauteur du « C: ». */
.login__mark img {
    height: 3.25rem;
    width: auto;
}

.login__mark span {
    padding-top: .1rem;
    color: #5b9be0;
    font-size: 4.375rem;
    font-weight: 600;
    line-height: .74;
    letter-spacing: -.01em;
}

.login__pitch h1 {
    margin: 0;
    font-size: 2.5rem;
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -.02em;
}

.login__pitch p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: #c9d3e0;
}

.login__foot {
    margin: 0;
    font-size: .8125rem;
    color: #8a9ab0;
}

.login__form {
    flex: 1 1 30rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
}

.login__card {
    width: 100%;
    max-width: 23.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.login__card h2 {
    margin: 0 0 .5rem;
    font-size: 1.75rem;
    font-weight: 600;
}

.login__sso {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .625rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: .75rem;
    padding-block: .875rem;
}

.login__note {
    margin: 0;
    padding: .875rem 1rem;
    border-radius: .75rem;
    background: var(--cy-surface);
    border: 1px solid var(--cy-line);
    font-size: .8125rem;
    color: var(--cy-muted);
}

@media (max-width: 767.98px) {
    .login__brand {
        padding: 2rem 1.5rem;
        gap: 2rem;
    }

    .login__pitch h1 {
        font-size: 1.75rem;
    }
}

/* Messages en direct en bas de l'écran (fin d'une tâche planifiée), voir live_controller.js. */
.live-toasts {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right, 0px));
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-width: min(24rem, calc(100vw - 2rem));
}

.live-toast {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem .875rem;
    border: 1px solid var(--cy-line);
    border-left: 3px solid var(--cy-accent);
    border-radius: .75rem;
    background: var(--cy-composer-bg);
    box-shadow: 0 .75rem 2rem -1rem rgba(10, 20, 40, .5);
    font-size: .875rem;
}

.live-toast.is-warning {
    border-left-color: var(--bs-warning);
}

.live-toast__text {
    flex: 1;
    min-width: 0;
}

.live-toast__link {
    flex: none;
    font-weight: 600;
}

.live-toast .btn-close {
    flex: none;
    font-size: .625rem;
}

/* Fenêtre des raccourcis clavier. */
.shortcuts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .625rem 1.25rem;
    margin: 0;
}

.shortcuts dt {
    font-weight: 400;
    white-space: nowrap;
}

.shortcuts dd {
    margin: 0;
    align-self: center;
}

.shortcuts kbd {
    padding: .125rem .375rem;
    border: 1px solid var(--cy-line);
    border-radius: .375rem;
    background: var(--cy-composer-bg);
    color: var(--cy-text);
    font-size: .8125rem;
    box-shadow: 0 1px 0 var(--cy-line);
}

/* Dernière réponse : versions (1/2, 2/2) et Régénérer, masqués pendant qu'une réponse s'écrit. */
.msg__versions {
    display: inline-flex;
    align-items: center;
    gap: .125rem;
}

.msg__versions form {
    display: contents;
}

.msg__version-label {
    min-width: 2.5rem;
    color: var(--cy-muted);
    font-size: .8125rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.is-streaming .msg__versions {
    display: none;
}

/* Liste « / » des commandes de la bibliothèque, au-dessus de la zone de saisie. */
.slash-menu {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + .5rem);
    z-index: 20;
    max-height: min(24rem, 60vh);
    overflow-y: auto;
    padding: .375rem;
    border: 1px solid var(--cy-line);
    border-radius: .875rem;
    background: var(--cy-composer-bg);
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .12);
}

.slash-menu__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.slash-menu.is-below {
    top: calc(100% + .5rem);
    bottom: auto;
}

.slash-menu__group {
    padding: .5rem .625rem .25rem;
    color: var(--cy-muted);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.slash-menu__item {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    padding: .5rem .625rem;
    border-radius: .5rem;
    cursor: pointer;
}

.slash-menu__item.is-active,
.slash-menu__item:hover {
    background: var(--cy-accent-soft);
}

.slash-menu__head {
    display: flex;
    align-items: baseline;
    gap: .5rem;
}

.slash-menu__head code {
    color: var(--cy-accent);
    font-size: .875rem;
}

.slash-menu__name {
    font-weight: 500;
    font-size: .875rem;
}

.slash-menu__description {
    color: var(--cy-muted);
    font-size: .8125rem;
}

.slash-menu__description:empty {
    display: none;
}

.slash-menu__footer {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: .25rem 0 0;
    padding: .375rem .625rem 0;
    border-top: 1px solid var(--cy-line);
    color: var(--cy-muted);
    font-size: .75rem;
}

.slash-menu__form {
    display: grid;
    gap: .25rem;
    padding: .375rem .5rem;
}

.slash-menu__form .form-label {
    margin: .375rem 0 0;
    font-size: .8125rem;
}

.slash-menu__title {
    margin: 0;
    font-weight: 600;
}

.slash-menu__actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: .5rem;
}

/* Bibliothèque : choix entre commandes, compétences et agents, au-dessus des onglets. */
.library__kinds {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .75rem;
}

.library__kind {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .375rem .875rem;
    border: 1px solid var(--cy-line);
    border-radius: 99px;
    color: var(--cy-text);
    font-size: .875rem;
    text-decoration: none;
}

.library__kind[aria-current="page"] {
    border-color: var(--cy-accent);
    background: var(--cy-accent-soft);
    color: var(--cy-accent);
}

.library__kind svg {
    width: 1rem;
    height: 1rem;
}

/* Réglages, Mémoire : un fait retenu par ligne, avec sa date et la croix pour l'oublier. */
.memory-list {
    display: grid;
    gap: .25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.memory-list li {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .375rem .5rem .375rem .75rem;
    border: 1px solid var(--cy-line);
    border-radius: .5rem;
}

.memory-list li > span {
    flex: 1;
    min-width: 0;
}

.memory-list small {
    color: var(--cy-muted);
    white-space: nowrap;
}

/* Message en attente de la fin de la réponse en cours. */
.composer__queued {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem .25rem 0;
    color: var(--cy-muted);
    font-size: .8125rem;
}

.composer__queued svg {
    width: .875rem;
    height: .875rem;
}

.composer__queued[hidden] {
    display: none;
}

/* Réponses toutes faites proposées par l'IA sous sa dernière réponse. */
.msg__choices {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.msg__choice {
    padding: .375rem .875rem;
    border: 1px solid var(--cy-accent);
    border-radius: 99px;
    background: transparent;
    color: var(--cy-accent);
    font-size: .875rem;
}

.msg__choice:hover,
.msg__choice:focus-visible {
    background: var(--cy-accent);
    color: #fff;
}

.chat-thread.is-streaming .msg__choices {
    display: none;
}

/* Repère d'une source de la base documentaire, avec sa carte au survol. */
.cite {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.125rem;
    margin: 0 .125rem;
    padding: 0 .25rem;
    border: 0;
    border-radius: .375rem;
    background: var(--cy-surface);
    color: var(--cy-accent);
    font-size: .6875rem;
    font-weight: 600;
    vertical-align: .125em;
    cursor: help;
}

.cite:hover,
.cite:focus-visible {
    background: var(--cy-accent);
    color: #fff;
}

/* Menu Partager d'une conversation : le lien à copier, puis les actions. */
.share-menu {
    width: min(22rem, calc(100vw - 2rem));
}

.share-menu__link {
    display: flex;
    gap: .375rem;
    padding: .25rem 1rem .5rem;
}

.share-menu__note {
    margin: 0;
    padding: 0 1rem .5rem;
    color: var(--cy-muted);
    font-size: .8125rem;
    white-space: normal;
}

.btn-icon.is-on {
    border-color: var(--cy-accent);
    color: var(--cy-accent);
}

/* Historique : une conversation par ligne, avec ses étiquettes et « Archiver ». */
.history-list {
    display: grid;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.history-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .625rem .75rem;
    border: 1px solid var(--cy-line);
    border-radius: .75rem;
}

.history-item__link {
    display: grid;
    flex: 1;
    min-width: 0;
    gap: .125rem;
    color: inherit;
    text-decoration: none;
}

.history-item__title {
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-item__meta {
    color: var(--cy-muted);
    font-size: .8125rem;
}

.history-item__meta svg {
    width: .875rem;
    height: .875rem;
    vertical-align: -.125em;
}

.history-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin-bottom: 1rem;
}

.history-tag {
    padding: .25rem .625rem;
    border: 1px solid var(--cy-line);
    border-radius: 99px;
    color: inherit;
    font-size: .8125rem;
    text-decoration: none;
}

.history-tag span {
    color: var(--cy-muted);
}

.history-tag.is-active {
    border-color: var(--cy-accent);
    background: var(--cy-accent);
    color: #fff;
}

.history-tag.is-active span {
    color: inherit;
}

.history-tag--small {
    padding: 0 .375rem;
    font-size: .75rem;
}

/* Dans .shared-artifact__inner (flex en colonne), les marges auto de .chat-thread__inner empêchent l'étirement :
   sans largeur explicite, le fil prenait la largeur de son plus long contenu et débordait sur téléphone. */
.shared-conversation {
    width: 100%;
    margin-top: 1.5rem;
}

/* Versions d'une commande, d'une compétence ou d'un agent. */
.library-versions {
    display: grid;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.library-versions > li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .5rem .75rem;
    border: 1px solid var(--cy-line);
    border-radius: .5rem;
}

.library-versions details {
    flex: 1;
    min-width: 0;
}

.library-versions summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
}

.library-versions__content {
    max-height: 16rem;
    margin: .5rem 0 0;
    padding: .5rem;
    overflow: auto;
    border-radius: .375rem;
    background: var(--cy-surface);
    font-size: .8125rem;
    white-space: pre-wrap;
}

/* Outil d'un serveur MCP personnel utilisé sans demander l'accord (« Toujours »). */
.mcp-tools__auto {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: .375rem;
    color: var(--cy-muted);
    font-size: .8125rem;
    white-space: nowrap;
}

/* Donnée sensible repérée avant l'envoi : avertissement, ou refus. */
.composer__sensitive {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: .375rem;
    padding: .5rem .75rem;
    border-radius: .5rem;
    background: var(--bs-warning-bg-subtle);
    color: var(--bs-warning-text-emphasis);
    font-size: .875rem;
}

.composer__sensitive[hidden] {
    display: none;
}

.composer__sensitive > span:first-of-type {
    flex: 1;
    min-width: 12rem;
}

.composer__sensitive-actions {
    display: inline-flex;
    gap: .375rem;
}