.conversation-widget {
    position: relative;
    /*
     * Au-dessus de la barre de navigation, qui porte z-index: 1.
     *
     * Les deux sont positionnes ; a niveau egal, c'est l'ordre du document qui
     * tranchait, et la barre passait par-dessus la conversation. Une barre de
     * navigation est du decor permanent, une conversation est ce qu'on est en
     * train de lire : c'est elle qui doit rester lisible.
     */
    z-index: 3;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    border-radius: 18px;
    margin: 0;
    background: rgba(var(--slate-mid-rgb), 0.72);
    border: 1px solid rgba(var(--journey-accent-rgb), 0.42);
    box-shadow: 0 0 0 1px rgba(var(--journey-accent-rgb), 0.05) inset,
        0 10px 28px rgba(var(--black-rgb), 0.16);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    flex: 1;
}

.conversation-widget::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
            circle at top right,
            rgba(var(--journey-accent-rgb), 0.10),
            transparent 38%
        );
    pointer-events: none;
}

.conversation-widget > * {
    position: relative;
    z-index: 1;
}

.conversation-widget__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.conversation-widget__heading {
    min-width: 0;
    flex: 1;
}

.conversation-widget__title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    color: rgba(var(--white-rgb), 0.96);
}

.conversation-widget__subtitle {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.45;
    color: rgba(var(--white-rgb), 0.82);
}

/* --- 7. L'etat de la liaison prend la couleur de ce qu'il dit -------------
   -------------------------------------------------------------------------
   La pastille en haut du fil affichait « Echec de la connexion » en CYAN. Le
   cyan dit « le produit », jamais « tout va bien » : il habillait un echec de
   la meme teinte qu'un succes.

   LA COULEUR REVIENT, MAIS ELLE DOIT DIRE VRAI. Une liaison rompue est
   exactement le cas ou une alerte est justifiee : tant qu'elle dure, les
   messages n'arrivent plus, et le lecteur croit que personne ne lui repond
   alors que personne ne recoit ce qu'il ecrit. C'est un des rares endroits du
   produit ou le rouge a sa place.

   TROIS ETATS, TROIS TEINTES DEJA DEFINIES dans la recette de pastille :

     `--ok`       vert, la liaison tient
     `--attente`  ambre, elle se retablit
     `--echec`    rouge, elle est rompue

   Le neutre reste le defaut : tant qu'aucune classe n'est posee, la pastille
   ne raconte rien plutot que de raconter n'importe quoi.

   LE BALISAGE DE LA MAQUETTE PORTE DEJA `--echec`, parce que le texte affiche
   est « Echec de la connexion ». Une maquette qui montrerait un gris la ou la
   decision est un rouge ne servirait pas de reference.

   A L APPLICATION : le script qui ecrit le libelle pose la classe en meme
   temps. Les trois teintes existent, il n'y a qu'une classe a ecrire.
   ------------------------------------------------------------------------- */
.conversation-widget__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border-radius: 7px;
    white-space: nowrap;
    font-size: 11.5px;
    line-height: 1;
    font-weight: var(--graisse-moyenne);
    color: rgba(var(--white-rgb), 0.82);
    background: rgba(var(--white-rgb), 0.06);
    border: var(--filet-epaisseur) solid rgba(var(--white-rgb), 0.14);
    --pastille-rgb: 226, 232, 240;
}

/* LE FIL N EST PAS UNE CASE. Il portait `rgba(15,23,42,0.28)` et un filet blanc
   a 0,08 dans un bloc qui a deja les siens : une case dans une case, pour
   contenir du texte qui n'a pas besoin d'etre contenu deux fois. Il garde sa
   place et son defilement, il perd sa surface. */
.conversation-widget__messages {
    min-height: 0;
    max-height: 420px;
    overflow-y: auto;
    padding: 12px;
    border-radius: 0;
    background: none;
    border: 0;
    box-shadow: inset 0 1px 0 rgba(var(--white-rgb),0.03);
    flex: 1;
    padding-left: 0;
    padding-right: 0;
}

.conversation-widget__messages::-webkit-scrollbar {
    width: 10px;
}

.conversation-widget__messages::-webkit-scrollbar-track {
    background: transparent;
}

.conversation-widget__messages::-webkit-scrollbar-thumb {
    background: linear-gradient(
        180deg,
        rgba(var(--white-rgb),0.18),
        rgba(var(--white-rgb),0.08)
    );
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.conversation-widget__messages::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
        180deg,
        rgba(var(--white-rgb),0.28),
        rgba(var(--white-rgb),0.14)
    );
    border: 2px solid transparent;
    background-clip: padding-box;
}

.conversation-widget__placeholder {
    font-size: 14px;
    line-height: 1.5;
    color: rgba(var(--white-rgb), 0.68);
}

.conversation-widget__message {
    display: flex;
    margin-bottom: 10px;
}

.conversation-widget__message:last-child {
    margin-bottom: 0;
}

.conversation-widget__message--own {
    justify-content: flex-end;
}

.conversation-widget__bubble {
    max-width: 88%;
    padding: 11px 12px;
    border-radius: 16px;
    background: rgba(var(--white-rgb), 0.04);
    border: 1px solid rgba(var(--white-rgb),0.08);
    box-shadow:
        0 8px 18px rgba(var(--black-rgb),0.12),
        inset 0 1px 0 rgba(var(--white-rgb),0.03);
}

.conversation-widget__message--own .conversation-widget__bubble {
    background: linear-gradient(
            135deg,
            rgba(var(--journey-accent-rgb), 0.18),
            rgba(var(--white-rgb),0.03) 55%
        );
    border-color: rgba(var(--journey-accent-rgb), 0.24);
    box-shadow: 0 10px 20px rgba(var(--black-rgb),0.14),
        0 0 0 1px rgba(var(--journey-accent-rgb), 0.06) inset;
}

.conversation-widget__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
    font-size: 12px;
    line-height: 1.2;
}

.conversation-widget__author {
    font-weight: 700;
    color: rgba(var(--white-rgb),0.92);
}

.conversation-widget__time {
    color: rgba(var(--white-rgb), var(--voile-mention, 0.55));
    white-space: nowrap;
}

.conversation-widget__body {
    font-size: 14px;
    line-height: 1.55;
    color: rgba(var(--white-rgb),0.88);
    white-space: pre-wrap;
    word-break: break-word;
}

.conversation-widget__form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* La zone de saisie porte deja le creux, herite de la couche commune. Elle
   n'a plus qu'a cesser de grandir toute seule. */
.conversation-widget__textarea {
    width: 100%;
    min-height: 64px;
    margin: 0;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(var(--white-rgb),0.12);
    background: rgba(var(--slate-rgb), 0.85);
    color: var(--ink-200);
    box-sizing: border-box;
    font: inherit;
    resize: vertical;
    max-height: 140px;
    font-size: 14px;
}

.conversation-widget__textarea::placeholder {
    color: var(--ink-400);
}

.conversation-widget__textarea:focus {
    outline: none;
    border-color: rgba(var(--journey-accent-rgb), 0.45);
    box-shadow: 0 0 0 3px rgba(var(--journey-accent-rgb), 0.12);
}

.conversation-widget__footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

/* LA MENTION DU CLAVIER, discrete et au ras du bouton.
   -------------------------------------------------------------------------
   Elle dit ou est passe l'envoi au clavier depuis qu'Entree va a la ligne.
   C'est une indication, pas une consigne : elle prend le role de mention et le
   plus petit cran de la page.

   `min-width: 0` parce que le pied est un conteneur flex : sans lui, la mention
   refuse de se replier et pousse le bouton d'envoi hors du cadre dans une
   colonne etroite. */
.conversation-widget__aide {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 12px;
    line-height: 1.35;
    /* `--texte-discret` et non `--ink-400` : le barreau d'encre se retourne
       avec le theme et tombe a 4,20 en clair a 12 px, alors que le role de
       mention est calibre des deux cotes. */
    color: var(--texte-discret);
}

.conversation-widget__error {
    font-size: 13px;
    line-height: 1.4;
    color: var(--red-soft);
}

/* --- 5. « Envoyer » prend l'aplat retenu ---------------------------------
   -------------------------------------------------------------------------
   Il etait en cyan plein, le fluo ecarte au banc des boutons. Mais c'est bien
   LE bouton d'appel de cet ecran, le seul geste que la page demande : il a
   donc droit a l'aplat, pas au cyan pur. Meme recette que « Continuer » et
   « Traiter les demandes d'acces ».
   ------------------------------------------------------------------------- */
.conversation-widget__send {
    flex: 0 0 auto;
    min-width: 140px;
    padding: 10px 18px;
    border: var(--filet-epaisseur) solid rgba(var(--portal-accent-rgb), 0.58);
    border-radius: 12px;
    background: var(--accent-aplat);
    /* L APLAT EST PROFOND DANS LES DEUX THEMES : cyan assombri en sombre, or
       profond en clair. Son libelle ne suit donc pas le retournement -- ecrit
       `rgba(var(--white-rgb), .98)` il devenait ENCRE SOMBRE sur l'or et
       tombait a 3,46. Il reste blanc, fixe, comme l'aplat qu'il traverse. */
    color: var(--encre-sur-fond-fixe);
    font: inherit;
    font-weight: var(--graisse-moyenne);
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(var(--journey-accent-rgb), 0.18);
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        opacity 0.18s ease;
    font-size: 14px;
}

.conversation-widget__send:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(var(--journey-accent-rgb), 0.24);
    background: var(--accent-aplat-survol);
    border-color: rgba(var(--portal-accent-rgb), 0.72);
}

.conversation-widget__send:disabled {
    opacity: 0.65;
    cursor: default;
    transform: none;
    box-shadow: none;
}

@media (max-width: 1100px) {
    .conversation-widget__messages {
        max-height: 340px;
    }
}

@media (max-width: 640px) {
    .conversation-widget {
        padding: 14px;
        border-radius: 16px;
        gap: 12px;
    }

    .conversation-widget__header {
        flex-direction: column;
        align-items: stretch;
    }

    .conversation-widget__status {
        align-self: flex-start;
    }

    /* C EST LA LISTE QUI CEDE, JAMAIS LA ZONE D ECRITURE.

       Le bloc est une colonne a hauteur contrainte, en `overflow: hidden` :
       ce qui ne tient pas n'est pas seulement cache, il est INATTEIGNABLE --
       aucune barre ne le rattrape. A 390 px, la liste refusait de descendre
       sous 220 px, et les 107 derniers pixels du formulaire passaient sous le
       bord : le bouton « Envoyer » n'existait plus, sur la page dont c'est le
       seul geste.

       96 px montrent encore deux messages, et la liste DEFILE deja
       (`overflow-y: auto`) : ce qu'elle perd en hauteur se retrouve au
       defilement, ce que le formulaire perdait ne se retrouvait nulle part. */
    .conversation-widget__messages {
        min-height: 96px;
        max-height: 300px;
        padding: 10px;
        border-radius: 14px;
    }

    .conversation-widget__bubble {
        max-width: 94%;
        padding: 10px 11px;
        border-radius: 14px;
    }

    .conversation-widget__footer {
        flex-direction: column;
        align-items: stretch;
    }

    .conversation-widget__send {
        width: 100%;
        min-width: 0;
    }
}


/* ==== parcours : ce que le produit n'avait pas ====
   Ces regles n'ont pas d'equivalent plus haut : elles ne remplacent rien,
   elles ajoutent. Elles restent donc ou elles sont. ==== */

/* --- 1. L accent revient au produit -------------------------------------
   On reecrit la meme valeur que `jetons.css` plutot que d'esperer un heritage :
   une propriete personnalisee posee sur un element ne se « desactive » pas, il
   faut la reposer. Les six selecteurs sont repris a l'identique pour que la
   specificite soit la meme et qu'aucun ordre ne surprenne.
   ------------------------------------------------------------------------ */

.journey-shell, .journey-theme--demo, .journey-theme--testing, .journey-theme--results, .journey-theme--course, .journey-theme--retesting {
    --journey-accent-rgb: var(--portal-accent-rgb);

    /* LA VERSION OPAQUE EST UNE ENCRE, ET LE THEME LA SEPARE DE L APLAT.
       `--portal-accent-rgb` est l'or des surfaces en theme clair ;
       `--accent-texte-rgb`, porte par `--texte-accent`, est l'or des encres,
       bien plus sombre. Ce jeton-ci n'apparait jamais derriere `background` :
       ce qu'il nomme est une encre, et « Текущий шаг » s'ecrivait en or de
       surface sur un voile du meme or -- 1,35.

       EN SOMBRE RIEN NE CHANGE : les deux jetons y sont le meme cyan, et c'est
       exactement pourquoi l'ecart a pu vivre ici sans se voir. Le repli garde
       la valeur d'avant pour les pages servies sans les couches retenues. */
    --journey-accent-solid: var(--texte-accent, rgb(var(--portal-accent-rgb)));
}

/* --- 2. Le support ET les etapes perdent leur cadre ---------------------------------------
   La carte exterieure disparait : plus de fond, plus de bordure, plus d'ombre,
   plus de rembourrage. Les deux cartes de contact, elles, gardent le leur.

   `background: none` et pas `transparent` : la regle d'origine pose un
   `linear-gradient`, qui est une image de fond et survivrait a une simple
   couleur transparente.
   ------------------------------------------------------------------------ */

.journey-section-card--support, .journey-section-card--path {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;

    /* La coupe du conteneur rognait le halo de l'etape en cours. Le degrade
       qu'elle contenait n'existe plus. */
    overflow: visible;
}

/* Le liseré decoratif, pose en `::after`, n'a plus de carte a souligner. */

.journey-section-card--support::after, .journey-section-card--path::after {
    display: none;
}

.journey-step__actions > .btn {
    margin-top: 0;
}

/* `.journey-pill` a QUITTE cette liste. Elle y figurait quand la pastille
   n'etait qu'une petite surface parmi d'autres ; elle a maintenant sa recette
   dans `elements-retenus.css`, ou son filet vaut 0,42 de SA teinte. La laisser
   ici lui imposait un filet cyan quelle que soit sa couleur, et cette feuille
   se chargeant apres, elle gagnait en silence. Deux feuilles qui peignent le
   meme element, c'est precisement ce que la couche d'elements existe pour
   eviter. */

/* `.conversation-widget__send` a QUITTE cette liste a son tour. C'est le
   bouton d'envoi : il porte l'aplat d'accent et un filet a 0,58, pose
   trente lignes plus haut. Cette regle-ci, plus bas dans la meme feuille,
   le ramenait a 0,24 sans rien dire, et le bouton perdait le seul trait
   qui le designait comme l'action de la zone de saisie. */
.journey-support-item, .journey-support-icon-btn, .conversation-widget,
.conversation-widget__status {
    border-color: var(--filet-petit);
}

/* --- 12. La pastille d'etat passe en haut a droite -----------------------
   -------------------------------------------------------------------------
   Elle etait sous le titre, dans le flux, ce qui la faisait lire comme une
   troisieme ligne de texte. Elle ne dit pourtant pas quelque chose SUR
   l'etape, elle dit l'ETAT de l'etape : sa place est au bord de la tuile, en
   face de la puce ronde qui ouvre la carte, pas au milieu du contenu.

   Elle sort donc du flux. La tuile est deja `position: relative` et son voile
   `::after` couvre tout : la pastille prend le meme plan que la puce, sinon le
   voile passerait dessus.

   ELLE CHANGE DE PLACE DANS LE BALISAGE, et c'est necessaire, pas cosmetique.
   `.journey-step__body` est en `position: relative` pour passer au-dessus du
   voile de la tuile ; une pastille absolue posee dedans se cale donc sur le
   CORPS, qui commence sous la puce. Mesure de la premiere version : 77 px trop
   bas. Enfant direct de la tuile, elle se cale sur la tuile.

   AUCUN RISQUE DE CHEVAUCHEMENT AVEC LE TITRE : la puce fait 32 px a gauche,
   la plus large des pastilles (« Etape actuelle ») en fait 95 a droite, et la
   tuile 255. Le titre commence sous la puce, une ligne plus bas.
   ------------------------------------------------------------------------- */

.journey-steps--horizontal .journey-step > .journey-pill {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 1;
}

/* --- 13. Les boutons d'etape ont rejoint la famille ----------------------
   -------------------------------------------------------------------------
   Leur peau etait ecrite ici : surface presque nulle, filet dans la teinte de
   l'etape. C'est exactement le dosage du fond colore de la famille du bouton
   second, dans `elements-retenus.css`. La tuile declare sa teinte, la famille
   fait le reste.

   CE QUI RESTE PROPRE AU SECOND BOUTON de la tuile, `--second`, tient en une
   ligne : son filet descend d'un cran, pour qu'on lise une hierarchie entre
   les deux sans en faire deux familles.
   ------------------------------------------------------------------------- */

.journey-step .journey-step__actions .journey-step__action--second {
    --second-filet: 0.26;
    --second-filet-survol: 0.46;
    --second-filet-appui: 0.66;
}

/* L'etape courante garde son cran de plus, et elle le dit par les VARIABLES
   de la famille plutot qu'en repeignant : une surface ecrite en dur ici
   imposait un fond que la famille n'avait pas prevu, et le releve le signalait
   comme un ecart. C'en etait un. */

.journey-steps--horizontal .journey-step.is-active .journey-step__action {
    --second-surface: 0.10;
    --second-surface-survol: 0.14;
    --second-surface-appui: 0.19;
    --second-filet: 0.72;
    --second-filet-survol: 0.90;
    --second-filet-appui: 1;
}


/* =========================================================================
   LE MOT D ACCUEIL D UNE CONVERSATION VIDE
   =========================================================================
   Quatre regles relevees le 29/10/2026 sur mimexpert.ru, qui sert la meme
   messagerie et affichait deja cette carte : on les reprend telles quelles
   plutot que d'en redessiner une qui ressemblerait.

   TROIS REGISTRES, TROIS GRAISSES ET TROIS ENCRES, et c'est ce qui fait que
   la carte se lit d'un coup d'oeil : le titre dit qui repond (14 px, gras,
   encre pleine), le corps dit quoi (13 px, encre calme), la mention dit ce
   que devient l'echange (12 px, encre sourde, derriere un filet).

   ELLE NE SORT QUE SI LE GABARIT LUI DONNE UN TEXTE, donc nulle part ailleurs
   dans le produit tant qu'on ne le demande pas.
   ========================================================================= */
.conversation-widget__intro {
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 8px;
}

.conversation-widget__intro-title {
    font-size: 14px;
    font-weight: 700;
    color: #e2e8f0;
    margin-bottom: 6px;
}

.conversation-widget__intro-text {
    font-size: 13px;
    line-height: 1.45;
    color: #94a3b8;
    margin-bottom: 10px;
}

.conversation-widget__intro-note {
    font-size: 12px;
    line-height: 1.4;
    color: #64748b;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 8px;
}