/* ==========================================================================
   AiConversationView — ergonomie mobile
   --------------------------------------------------------------------------
   Trois problèmes traités ici :
   1. Hauteur : la coquille prend la hauteur RÉELLE du viewport (100dvh) et ne
      déborde pas, pour que la barre de saisie reste toujours visible. `100vh`
      vaut le viewport « large » (barre d'URL masquée) sur Chrome Android : la
      barre de saisie tombait systématiquement sous le pli.
   2. Largeur : sur mobile, les paddings imbriqués (page → surface → fil →
      avatar → bulle) mangeaient ~47 % de la largeur. On les dégraisse.
   3. Cibles tactiles : les boutons de lecture audio passent de 22px à 40px
      sur mobile.
   ========================================================================== */

/* Une marge de body (8px par défaut dans l'UA) suffirait à rendre le document
   plus haut que le viewport et à refaire passer la barre de saisie sous le pli.
   `:has()` cible uniquement les pages qui portent la coquille : aucun effet de
   bord sur le reste de l'application. */
html:has(.aicv-shell),
body:has(.aicv-shell) {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

/* ── Animations du composant ─────────────────────────────────────────────── */
/* Nommées `aicv-*` : le composant utilisait `pulse` / `bounce`, définies nulle part
   dans les feuilles chargées par ces pages — les points d'attente et le voyant
   « Génération en cours… » restaient donc figés. */
@keyframes aicv-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

@keyframes aicv-bounce {
    0%, 80%, 100% { transform: translateY(0); }
    40%           { transform: translateY(-4px); }
}

/* ── Coquille plein écran : seul le fil de messages défile ────────────────── */
.aicv-shell {
    display: flex;
    flex-direction: column;
    background: #f8f9fa;
    height: 100vh;   /* repli pour les navigateurs sans unités dynamiques */
    height: 100dvh;
    overflow: hidden;
}

.aicv-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 16px;
}

/* Écrans « chargement » et « erreur » : contenu court, centré, scrollable si besoin. */
.aicv-body--center {
    justify-content: center;
    overflow-y: auto;
}

.aicv-stage {
    width: 100%;
    max-width: 780px;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.aicv-surface {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
}

/* ── Bandeau d'état (connexion / mains-libres / génération) ───────────────── */
.aicv-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-background);
    flex-shrink: 0;
}

.aicv-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Bloc droit du bandeau : code de reprise + actions de la page hôte (« arrêter
   l'entretien »…). Toujours au bout de la ligne, jamais coupé par le libellé de
   connexion qui, lui, peut être tronqué sur un écran étroit. */
.aicv-status-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Fil de messages ──────────────────────────────────────────────────────── */
.aicv-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.aicv-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.aicv-row--user {
    flex-direction: row-reverse;
}

.aicv-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.85rem;
    background: #e0e7ff;
}

/* Messages consécutifs du même émetteur : on garde la gouttière mais on masque
   l'avatar, pour que les bulles restent alignées sans répéter le picto. */
.aicv-avatar--ghost {
    visibility: hidden;
}

.aicv-bubble {
    max-width: 85%;
    border-radius: 12px;
    padding: 10px 14px;
    min-width: 0;
}

.aicv-bubble--bot {
    background: #f5f5f5;
    border: 1px solid var(--mud-palette-divider);
    border-top-left-radius: 3px;
}

.aicv-bubble--user {
    background: #186EB6;
    border-top-right-radius: 3px;
}

.aicv-bubble--error {
    background: #fdecea;
    border: 1px solid #f5c6cb;
    border-top-left-radius: 3px;
}

/* Un mot très long (URL, identifiant) ne doit pas élargir la bulle. */
.aicv-text {
    white-space: pre-wrap;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.aicv-meta {
    font-size: 0.65rem;
    color: var(--mud-palette-text-disabled);
}

/* Bouton de lecture audio dans la bulle. */
.aicv-speak-btn {
    padding: 2px;
    width: 28px;
    height: 28px;
}

/* ── Barre de saisie ──────────────────────────────────────────────────────── */
.aicv-composer {
    border-top: 1px solid var(--mud-palette-divider);
    padding: 12px 16px;
    /* Encoche / barre gestuelle iOS : vaut 0 tant que le document n'est pas en
       viewport-fit=cover, donc sans effet de bord ailleurs. */
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--mud-palette-background);
    flex-shrink: 0;
}

.aicv-composer-row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

/* Micro et envoi sont affichés en permanence : on leur garantit une cible tactile
   pleine et on les empêche de rétrécir quand le champ s'allonge. */
.aicv-composer-row .mud-icon-button {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
}

/* ── Bandeau de dictée continue ───────────────────────────────────────────── */
/* Posé AU-DESSUS du champ de saisie (et non à sa place) : pendant la dictée le texte
   arrive morceau par morceau, l'utilisateur doit pouvoir le lire pendant qu'il parle. */
.aicv-dictation {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 4px 8px;
}

.aicv-rec-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    flex-shrink: 0;
    animation: aicv-pulse 1.2s infinite;
}

.aicv-dictation-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Onde de capture : repère visuel discret, calé à droite du libellé. */
.aicv-wave-canvas {
    margin-left: auto;
    width: 90px;
    height: 22px;
    display: block;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE — on récupère la largeur perdue dans l'emboîtement
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

    /* Plein écran bord-à-bord : la page et la surface ne rognent plus rien. */
    .aicv-body { padding: 0; }
    .aicv-surface { border-radius: 0; }

    .aicv-scroll { padding: 10px; }

    /* Les pictos d'émetteur (🤖 / 👤) n'apportent rien ici : la couleur de la bulle et
       le côté où elle est alignée suffisent à savoir qui parle. Ils coûtaient en
       revanche ~10 % de la largeur utile (30px + la gouttière de 10px du flex `gap`),
       d'où un texte inutilement étroit. `display:none` supprime aussi la gouttière. */
    .aicv-row .aicv-avatar { display: none; }

    .aicv-bubble { max-width: 94%; }

    .aicv-status { padding: 8px 12px; }

    .aicv-composer {
        padding: 8px 10px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    }

    /* Cible tactile : 40px au lieu de 22px (compromis lisible dans une bulle,
       la recommandation de 44px rendrait le bouton disproportionné). */
    .aicv-speak-btn {
        width: 40px;
        height: 40px;
    }

    /* Micro et envoi restent tous deux affichés, y compris ici : c'est la place des
       boutons qui est réduite, pas leur nombre. On resserre la gouttière plutôt que
       d'en masquer un. */
    .aicv-composer-row { gap: 6px; }
}