/* 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-label { margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--mute); overflow-wrap: anywhere; }

.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[type="password"] { 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; } }