/* Cartes dans le fil de l'agent : connexion d'une application, clé secrète demandée,
   et lignes d'événement des messages automatiques (« Airtable est connecté. »).
   Règles : pas de bordure au repos, élévation par un ton plus clair, ni ombre ni dégradé,
   turquoise réservé au statut « connecté ». */

.turn-cards { display: flex; flex-direction: column; gap: 16px; margin-top: 14px; }

.cc-wrap { display: flex; flex-direction: column; gap: 8px; max-width: 580px; }
.cc { display: flex; flex-direction: column; gap: 14px; padding: 16px; background: rgba(246,242,234,.05); }
.cc-main { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 14px; }

.cc-logo { width: 48px; height: 48px; display: grid; place-items: center; overflow: hidden; background: var(--ivory); }
.cc-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cc-logo span { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--navy); line-height: 1; }
.cc-logo-wait { background: rgba(246,242,234,.08); }

.cc-id { min-width: 0; }
.cc-title { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--ivory); overflow-wrap: anywhere; }
.cc-status { display: flex; align-items: center; gap: 7px; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--mute); }
.cc-status.on { color: var(--turq); font-weight: 600; }
.cc-status.err { color: var(--danger); }
.cc-loading .cc-title { color: var(--mute); font-weight: 600; }

.cc-act { display: flex; justify-content: flex-end; }
.cc-btn { min-height: 40px; padding: 10px 18px; }
/* Bouton principal par inversion (comme « Arrêter ») : fond ivoire, texte marine. */
.cc-primary { background: var(--ivory); color: var(--navy); }
.cc-primary:hover:not(:disabled) { opacity: .88; }

.cc-hint { font-size: 13px; line-height: 1.5; color: var(--sand); }
.cc-hint a, .cc-unknown a { color: var(--ivory); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(246,242,234,.4); }
.cc-hint a:hover, .cc-unknown a:hover { text-decoration-color: var(--ivory); }

.cc-agents { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: rgba(246,242,234,.07); font-size: 12.5px; font-weight: 600; color: var(--sand); }
.cc-chip .ico { color: var(--turq); }
.cc-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 4px; background: none; border: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--sand); cursor: pointer; }
.cc-link:hover { color: var(--ivory); }

.cc-note { margin: -8px 0 0; padding: 0 2px; font-size: 12px; line-height: 1.5; color: var(--mute); max-width: 580px; }
.cc-unknown { display: flex; align-items: baseline; gap: 8px; font-size: 13px; line-height: 1.5; color: var(--mute); }
.cc-unknown .ico { flex: none; transform: translateY(2px); }

/* Les indicateurs d'attente des cartes restent neutres (le turquoise dit « connecté »). */
.cc .spinner { border-color: rgba(246,242,234,.22); border-top-color: var(--ivory); }
.cc .cc-primary .spinner { border-color: rgba(36,51,93,.25); border-top-color: var(--navy); }
.cc button:focus-visible, .cc a:focus-visible, .cc-unknown a:focus-visible { outline: 2px solid var(--ivory); outline-offset: 2px; }

/* ── Clé secrète ─────────────────────────────────────────────────────────── */
.kc-main { grid-template-columns: 48px minmax(0, 1fr); }
.kc-ico { width: 48px; height: 48px; display: grid; place-items: center; background: rgba(246,242,234,.07); color: var(--sand); }

.kc-row { display: flex; align-items: stretch; gap: 10px; }
.kc-field { flex: 1; min-width: 0; display: flex; background: rgba(15,23,51,.55); border: 1px solid var(--line-strong); transition: border-color .15s ease; }
.kc-field:focus-within { border-color: rgba(246,242,234,.6); }
.kc-input { flex: 1; min-width: 0; height: 42px; padding: 0 12px; background: transparent; border: 0; outline: none; color: var(--ivory); font-size: 15px; }
.kc-input.is-masked { letter-spacing: .12em; }
.kc-input::placeholder { color: var(--mute); letter-spacing: normal; }
.kc-eye { flex: none; width: 44px; display: grid; place-items: center; padding: 0; background: transparent; border: 0; color: var(--mute); cursor: pointer; }
.kc-eye:hover, .kc-eye[aria-pressed="true"] { color: var(--ivory); }
.kc-eye:focus-visible { outline: 2px solid var(--ivory); outline-offset: -2px; }
.kc-save { flex: none; min-height: 44px; }
.kc-error { font-size: 13px; line-height: 1.45; color: var(--danger); }
.kc-keep { align-self: flex-start; padding-left: 0; }
.kc-wait { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mute); }

.kc-saved { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.kc-saved-text { flex: 1 1 260px; display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--sand); }
.kc-saved-text .ico { color: var(--ready); transform: translateY(2px); }
.kc-saved-text strong { color: var(--ivory); font-weight: 700; }
.kc-saved .cc-link { margin-left: auto; }

/* ── Message automatique : ligne d'événement centrée ─────────────────────── */
.chat-event { display: flex; justify-content: center; }
.chat-event-in { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 8px; max-width: 90%; padding: 7px 14px;
  background: rgba(246,242,234,.05); font-size: 12.5px; line-height: 1.45; color: var(--sand); text-align: center; }
.chat-event-in .ico { color: var(--mute); }
.chat-event-meta { color: var(--mute); }
.chat-event-meta::before { content: "·"; margin-right: 8px; }

/* ── Écrans tactiles : tout ce qui se touche fait au moins 44 px ─────────── */
@media (max-width: 860px) {
  .cc-btn, .kc-save { min-height: 44px; }
  .kc-input { height: 44px; font-size: 16px; }   /* 16 px : iOS ne zoome pas sur le champ */
  .cc-link { min-height: 44px; }
  .cc-hint a, .cc-unknown a { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (max-width: 480px) {
  .cc { padding: 14px; gap: 12px; }
  .cc-main { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; }
  .cc-act { grid-column: 1 / -1; }
  .cc-act .btn { width: 100%; }
  .kc-row { flex-wrap: wrap; }
  .kc-field { flex: 1 1 100%; }
  .kc-save { flex: 1 1 100%; }
  .kc-saved .cc-link { margin-left: 0; }
}

/* ── Réponses proposées par l'agent : une carte, une ligne par réponse (A, B, C…) ──
   Chaque ligne est le même bouton « choice » qu'avant ; seule la présentation change. */
.choice-list { display: flex; flex-direction: column; gap: 2px; max-width: 580px; margin-top: 14px; padding: 6px; background: rgba(246,242,234,.05); }
.choice-list .choice-btn { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 48px; padding: 8px 12px; background: transparent; border: 0; color: var(--ivory); font-size: 15px; font-weight: 500; line-height: 1.4; text-align: left; }
.choice-list .choice-btn::before { content: none; }
.choice-list .choice-btn:hover:not(:disabled) { background: rgba(246,242,234,.09); color: var(--ivory); translate: 0 0; }
.choice-key { flex: none; display: grid; place-items: center; width: 28px; height: 28px; background: rgba(246,242,234,.06); border: 1px solid rgba(246,242,234,.12); font-size: 13px; font-weight: 500; color: var(--mute); }
.choice-txt { min-width: 0; overflow-wrap: anywhere; }
.choice-list + .quick-actions { margin-top: 10px; }
@media (max-width: 860px) { .choice-list .choice-btn { min-height: 48px; } }

/* ── Appel vocal en bande ── */
.call-tag { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; font-size: 12px; font-weight: 500; color: var(--mute); font-variant-numeric: tabular-nums; vertical-align: 1px; }
.call-tag[hidden], .call-band[hidden], .btn-call[hidden] { display: none; }
/* Bouton « Appeler » de l'en-tête : tout à droite, après le choix d'agent. Le bouton principal du design (blanc dans le Nouveau,
   couleur d'accent dans le Classique, comme « Envoyer »), réduit à l'icône, de la même hauteur que le choix d'agent (40 px).
   « Partager » prend la même hauteur pour que tout reste aligné à toutes les largeurs. */
.chat-head .btn-call { flex: none; width: 40px; height: 40px; min-height: 40px; min-width: 40px; padding: 0; }
.chat-head .share-btn { min-height: 40px; }
.call-dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; flex: none; }
.composer-wrap.calling .composer, .composer-wrap.calling .composer-hint, .composer-wrap.calling .pending-files { display: none; }
.call-band { max-width: 820px; margin: 0 auto; display: flex; align-items: center; gap: 14px; padding: 10px 12px; border: 1px solid var(--line-strong); background: rgba(246,242,234,.05); }
.call-avatar { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; box-shadow: 0 0 0 calc(2px + 5px * var(--lvl, 0)) rgba(74,222,128,.28); transition: box-shadow .12s linear; }
.call-avatar .avatar { width: 40px; height: 40px; }
.call-band[data-status="muted"] .call-avatar, .call-band[data-status="connecting"] .call-avatar { box-shadow: 0 0 0 3px rgba(150,150,150,.28); filter: grayscale(.7); }
/* Trois états qui se voient : écoute (halo vert et barres bleues qui suivent le micro), attente (réflexion, transcription, voix en préparation :
   halo bleu qui respire, petites barres grises et calmes), parole (halo vert qui pulse, barres vertes qui bougent en rythme). */
.call-band[data-status="thinking"] .call-avatar, .call-band[data-status="hearing"] .call-avatar, .call-band[data-status="preparing"] .call-avatar { animation: call-breathe 1.8s ease-in-out infinite; }
.call-band[data-status="speaking"] .call-avatar { animation: call-pulse 1.1s ease-in-out infinite; }
@keyframes call-breathe { 50% { box-shadow: 0 0 0 7px rgba(150,170,255,.25); } }
@keyframes call-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(74,222,128,.30); } 50% { box-shadow: 0 0 0 9px rgba(74,222,128,.14); } }
.call-text { flex: 1; min-width: 0; }
.call-title { font-weight: 700; font-size: 15px; }
.call-sub { font-size: 13px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-wave { display: flex; align-items: center; gap: 3px; height: 28px; flex: none; }
.call-wave i { width: 3px; height: 6px; border-radius: 2px; background: #7ea2ff; transform-origin: center; transform: scaleY(calc(1 + var(--lvl, 0) * (1 + (var(--n, 1) * .5)))); transition: transform .1s linear; }
.call-wave i:nth-child(odd) { --n: 2; } .call-wave i:nth-child(3n) { --n: 4; } .call-wave i:nth-child(4n) { --n: 3; }
.call-band[data-status="muted"] .call-wave, .call-band[data-status="connecting"] .call-wave { opacity: .25; }
.call-wave i:nth-child(2) { --d: .1s; } .call-wave i:nth-child(3) { --d: .2s; } .call-wave i:nth-child(4) { --d: .3s; } .call-wave i:nth-child(5) { --d: .4s; }
.call-wave i:nth-child(6) { --d: .5s; } .call-wave i:nth-child(7) { --d: .6s; } .call-wave i:nth-child(8) { --d: .7s; } .call-wave i:nth-child(9) { --d: .8s; }
/* attente : pas de son encore, ni à entendre ni à dire ; une vague lente, basse et grise (pas l'agitation de la parole) */
.call-band[data-status="thinking"] .call-wave i, .call-band[data-status="hearing"] .call-wave i, .call-band[data-status="preparing"] .call-wave i { background: var(--mute); opacity: .55; animation: call-calm 2.4s ease-in-out infinite; animation-delay: calc(var(--d, 0s) * 2); }
@keyframes call-calm { 50% { transform: scaleY(1.9); } }
/* parole : barres vertes qui bougent en rythme, chacune à sa vitesse */
.call-band[data-status="speaking"] .call-wave i { background: #4ade80; animation: call-speak calc(.5s + var(--n, 1) * .09s) ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
@keyframes call-speak { from { transform: scaleY(1.1); } to { transform: scaleY(3.6); } }
.call-mute { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-strong); background: rgba(246,242,234,.08); color: var(--ivory); display: grid; place-items: center; cursor: pointer; }
.call-mute:hover { background: rgba(246,242,234,.16); }
.call-hang { flex: none; display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 11px 18px; background: #e5534b; color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; }
.call-hang:hover { background: #d6453d; }
@media (max-width: 640px) {
  .call-band { gap: 10px; padding: 10px; }
  .call-wave { display: none; }
  .call-sub { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .call-hang span { display: none; }
  .call-hang { padding: 0; width: 46px; height: 46px; justify-content: center; }
  .call-tag { display: block; margin: 2px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .call-avatar, .call-wave i { transition: none; }
  .call-wave i { transform: none !important; }
  .call-avatar { box-shadow: 0 0 0 4px rgba(74,222,128,.28) !important; }
  .call-band .call-avatar, .call-band .call-wave i { animation: none !important; }
  /* sans mouvement, les états se distinguent encore par la couleur du halo et des barres (et par le libellé) */
  .call-band[data-status="thinking"] .call-avatar, .call-band[data-status="hearing"] .call-avatar, .call-band[data-status="preparing"] .call-avatar { box-shadow: 0 0 0 4px rgba(150,170,255,.30) !important; }
  .call-band[data-status="speaking"] .call-avatar { box-shadow: 0 0 0 6px rgba(74,222,128,.40) !important; }
  .call-band[data-status="speaking"] .call-wave i { transform: scaleY(2) !important; }
}

/* ── Message en attente : texte d'état puis deux vrais boutons à droite ── */
.msg-me.queued .queued-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; }
.queued-actions { display: inline-flex; align-items: center; gap: 8px; }
.queued-btn { min-height: 32px; font-size: 12px; line-height: 1.2; }
.queued-btn:focus-visible { outline: 2px solid var(--turq); outline-offset: 2px; }
@media (max-width: 560px) {
  /* Téléphone : le texte d'état au-dessus, les boutons dessous à droite. */
  .msg-me.queued .queued-meta { flex-direction: column; align-items: flex-end; }
  .queued-btn { min-height: 40px; }
}

/* ── Lien de fichier dans un message ── */
/* Une seule pastille, alignée sur la ligne du texte ; un nom trop long se coupe avec « … » au lieu de dépasser la bulle
   (le nom complet reste dans le texte du lien et dans son infobulle). */
.file-link { box-sizing: border-box; max-width: 100%; vertical-align: middle; overflow-wrap: normal; }
.file-link .fl-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Dans un tableau, la largeur de la cellule dépend du contenu : le nom passe à la ligne (comme avant) au lieu d'être coupé. */
.tbl .file-link .fl-name { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }

/* ── Haut de la liste des conversations : une seule ligne ── */
/* La recherche (qui prend toute la place restante), puis le bouton « nouvelle discussion » à droite (icône seule, bouton principal du design : blanc dans le Nouveau, couleur d'accent dans le Classique),
   à la même hauteur (40 px, zone de clic comprise). L'ordre du HTML est celui de l'écran : pas de `order` ici. */
.conv-top { display: flex; align-items: center; gap: 8px; flex: none; min-width: 0; }
.conv-top .conv-new { flex: none; width: 40px; height: 40px; min-height: 40px; padding: 0; }
.conv-top .conv-search { flex: 1 1 auto; width: auto; min-width: 0; height: 40px; box-sizing: border-box; text-overflow: ellipsis; }