/* Réglages > Canaux de discussion : parler à ses agents depuis son téléphone (WhatsApp, Telegram).

   Même langage que l'écran Applications : relief par la seule clarté (aucune bordure au repos, une marche
   de ton plus claire pour ce qui est relié), aucune ombre sauf la fenêtre qui flotte. Le turquoise est
   réservé à l'état « connecté » ; l'action principale est en inversion (ivoire sur marine). Les survols
   et appuis des boutons .btn viennent de buttons.css, pas d'ici.

   Deux grandes tuiles. Le nombre de colonnes suit la largeur du bloc (requête de conteneur) :
     ≥ 640 px : 2 colonnes (écran 1440 : bloc 1000 = 2 × 496 + 8 ; écran 768 : bloc 704 = 2 × 348 + 8)
     sinon    : 1 colonne (écran 390 : bloc 358) */

.ch, .ch-modal {
  --ch-gap: 8px;
  --ch-rest: rgba(246,242,234,.045);
  --ch-raised: rgba(246,242,234,.075);
  --ch-hover: rgba(246,242,234,.10);
  --ch-press: rgba(246,242,234,.13);
}

/* ── Bloc dans Réglages ─────────────────────────────────────────────────── */

.ch { container: ch / inline-size; margin-top: 44px; min-width: 0; }
.ch-head { margin-bottom: 20px; }
.ch-title.display { margin: 0; font-size: 24px; line-height: 1.15; letter-spacing: -.01em; }
.ch-lead { margin: 8px 0 0; max-width: 560px; color: var(--mute); font-size: 14px; line-height: 1.5; }

.ch-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ch-gap); }
@container ch (min-width: 640px) { .ch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* La tuile : logo et nom, une phrase, les agents déjà reliés, un seul bouton (en bas, quelle que soit la hauteur). */
.ch-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; width: 100%; min-width: 0; min-height: 224px; margin: 0;
  padding: 20px; background: var(--ch-rest); border: 0; color: var(--ivory);
  font: inherit; text-align: left; cursor: pointer; transition: background .15s ease; }
.ch-tile:hover { background: var(--ch-hover); }
.ch-tile:active { background: var(--ch-press); }
.ch-tile:focus-visible { outline: 2px solid var(--turq); outline-offset: 2px; }
.ch-tile.on { background: var(--ch-raised); }
.ch-tile.on:hover { background: var(--ch-press); }

.ch-top { display: flex; align-items: center; gap: 14px; min-width: 0; max-width: 100%; }
.ch-name { min-width: 0; font-size: 20px; font-weight: 600; line-height: 26px; color: var(--ivory); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-blurb { font-size: 14px; line-height: 21px; color: var(--sand); }

/* Logo : tuile de la marque (SVG 48 × 48). */
.ch-logo { flex: none; width: 48px; height: 48px; display: grid; place-items: center; overflow: hidden; background: var(--ivory); }
.ch-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ch-logo.lg { width: 48px; height: 48px; }

/* Les agents déjà reliés : une pastille par agent (teinte, prénom, point d'état). */
.ch-agents { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.ch-chip { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; height: 30px; padding: 0 11px 0 6px;
  background: rgba(246,242,234,.07); font-size: 13px; line-height: 18px; color: var(--ivory); }
.ch-chip.more { padding: 0 10px; color: var(--sand); font-variant-numeric: tabular-nums; }
.ch-chip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-av { flex: none; width: 20px; height: 20px; display: grid; place-items: center;
  font-family: var(--serif); font-style: italic; font-size: 12px; font-weight: 600; line-height: 1; color: var(--navy); }

.ch-sdot { flex: none; width: 6px; height: 6px; background: var(--mute); }
.ch-sdot.ok { background: var(--turq); }
.ch-sdot.wait { background: var(--sand); }
.ch-sdot.err { background: var(--danger); }

/* Le bouton : ivoire sur marine pour connecter, une marche de ton pour gérer. Toute la tuile est cliquable. */
.ch-cta { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; min-width: 156px; height: 44px; padding: 0 24px;
  background: var(--ivory); color: var(--navy); font-size: 15px; font-weight: 600; transition: background .15s ease; }
.ch-tile:hover .ch-cta, .ch-tile:focus-visible .ch-cta { background: #fff; }
.ch-cta.alt { background: rgba(246,242,234,.10); color: var(--ivory); }
.ch-tile:hover .ch-cta.alt, .ch-tile:focus-visible .ch-cta.alt { background: rgba(246,242,234,.18); }

/* États : chargement, erreur, vide */
.ch-tile.is-skel, .ch-tile.is-skel:hover { cursor: default; background: var(--ch-rest); }
.ch-tile.is-skel .ch-logo { background: rgba(246,242,234,.08); }
.ch-sk { display: block; background: rgba(246,242,234,.08); }
.ch-sk-name { width: 36%; height: 14px; }
.ch-sk-desc { width: 80%; height: 11px; }
.ch-sk-desc.short { width: 55%; }

.ch-empty, .ch-error { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; min-height: 60px; padding: 12px 16px;
  background: var(--ch-rest); color: var(--sand); font-size: 14px; line-height: 1.5; }
.ch-empty p, .ch-error p { margin: 0; }
.ch-error .ico { color: var(--danger); }
.ch-link { display: inline-flex; align-items: center; min-height: 32px; padding: 0; margin: 0; background: none; border: 0;
  color: var(--ivory); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  text-decoration: underline; text-decoration-color: rgba(246,242,234,.4); text-underline-offset: 3px; }
.ch-link:hover { text-decoration-color: var(--ivory); }
.ch-link:focus-visible { outline: 2px solid var(--turq); outline-offset: 2px; }

/* ── Fenêtre « Connecter / Gérer » ──────────────────────────────────────── */

.modal.ch-modal { max-width: 600px; gap: 18px; background: #16214A; border: 0; box-shadow: 0 24px 64px rgba(4,8,22,.55); }
.ch-modal .btn:focus-visible, .ch-modal a:focus-visible, .ch-act:focus-visible { outline: 2px solid var(--turq); outline-offset: 2px; }
.ch-m-head { display: flex; align-items: center; gap: 16px; min-width: 0; }
.ch-m-title { min-width: 0; }
.ch-modal .ch-m-title .display { margin: 0; font-size: 24px; line-height: 1.15; overflow-wrap: anywhere; }
.ch-m-desc { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: var(--sand); }

.ch-sec-head { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--ivory); }
.ch-lede { margin: 0; font-size: 15px; line-height: 1.5; color: var(--sand); }
.ch-lede:empty { display: none; }
.ch-hint { margin: 0; font-size: 13px; line-height: 1.5; color: var(--mute); }

/* Une ligne par agent : choix (bouton radio) ou état et actions. */
.ch-list { display: flex; flex-direction: column; gap: 4px; }
.ch-modal .ch-arow { display: flex; flex-direction: row; align-items: center; gap: 12px; min-height: 60px; margin: 0; padding: 10px 14px;
  background: var(--ch-rest); color: var(--ivory); font-size: 14px; font-weight: 400; }
.ch-modal .ch-arow.pick { cursor: pointer; transition: background .15s ease; }
.ch-modal .ch-arow.pick:hover, .ch-modal .ch-arow.pick:has(input:checked) { background: var(--ch-raised); }
.ch-modal .ch-arow:has(input:focus-visible) { outline: 2px solid var(--turq); outline-offset: -2px; }
.ch-modal .ch-arow input[type="radio"]:focus-visible { outline: 0; }
.ch-modal .ch-arow.confirming { align-items: flex-start; padding: 14px; background: var(--ch-raised); }
.ch-id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ch-aname { font-size: 14.5px; font-weight: 600; color: var(--ivory); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-asub { font-size: 12.5px; line-height: 1.35; color: var(--mute); }
.ch-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--sand); }
.ch-tag.ok { color: var(--turq); }
.ch-tag.err { color: var(--danger); }

.ch-acts { flex: none; display: flex; align-items: center; gap: 4px 14px; }
.ch-act { display: inline-flex; align-items: center; min-height: 32px; margin: 0; padding: 0 2px; background: none; border: 0;
  color: var(--ivory); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-align: right;
  text-decoration: underline; text-decoration-color: rgba(246,242,234,.4); text-underline-offset: 3px; transition: color .15s ease; }
.ch-act:hover:not(:disabled) { text-decoration-color: currentColor; }
.ch-act.quiet { color: var(--mute); text-decoration-color: rgba(169,176,198,.5); }
.ch-act.quiet:hover:not(:disabled) { color: var(--danger); }

/* Déconnecter : la confirmation se fait dans la ligne de l'agent. */
.ch-confirm { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.ch-confirm p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--sand); }
.ch-confirm strong { color: var(--ivory); font-weight: 600; }
.ch-confirm .ch-confirm-err { color: var(--danger); font-size: 13px; }
.ch-confirm-btns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

/* Le code à scanner : blanc sur fond sombre, net, avec sa marge blanche. Sur grand écran, le code est à gauche
   et les trois gestes à droite ; sur téléphone, tout s'empile. */
.ch-pair { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.ch-pair-side { align-self: stretch; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ch-qr-box { flex: none; width: min(264px, 100%); aspect-ratio: 1; background: #fff; }
.ch-qr-box svg { display: block; width: 100%; height: 100%; }
.ch-qr-box.wait { display: grid; place-items: center; background: rgba(246,242,234,.06); }
.ch-qr-box .ch-busy { background: none; }

.ch-steps { margin: 0; padding: 0; list-style: none; counter-reset: ch-step; display: flex; flex-direction: column; gap: 12px;
  font-size: 15px; line-height: 1.45; color: var(--ivory); }
.ch-steps li { counter-increment: ch-step; display: flex; align-items: flex-start; gap: 12px; overflow-wrap: anywhere; }
.ch-steps li::before { content: counter(ch-step); flex: none; width: 24px; height: 24px; display: grid; place-items: center;
  background: rgba(246,242,234,.12); color: var(--ivory); font-size: 13px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.ch-wait { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; color: var(--sand); }

/* Messages : connexion en cours, erreur, réussite. */
.ch-status:empty { display: none; }
.ch-busy { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: rgba(246,242,234,.06); font-size: 14.5px; line-height: 1.5; color: var(--sand); }
.ch-busy p { margin: 0; }
.ch-busy strong { color: var(--ivory); font-weight: 600; }
.ch-alert { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; background: rgba(255,158,138,.10); color: var(--ivory); font-size: 14.5px; line-height: 1.5; }
.ch-alert .ico { flex: none; margin-top: 3px; color: var(--danger); }
.ch-alert p { margin: 0; }
.ch-ok { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 12px 14px; background: rgba(246,242,234,.06); font-size: 13.5px; line-height: 1.5; color: var(--sand); }
.ch-ok .ico { flex: none; margin-top: 3px; color: var(--turq); }

.ch-done { display: flex; align-items: flex-start; gap: 14px; padding: 4px 0 0; }
.ch-done-mark { flex: none; width: 40px; height: 40px; display: grid; place-items: center; background: var(--turq); color: var(--navy); }
.ch-done.warn .ch-done-mark { background: var(--ochre-light); }
.ch-done-title { margin: 0; font-family: var(--serif); font-size: 21px; font-weight: 500; line-height: 1.25; letter-spacing: -.01em; color: var(--ivory); }
.ch-done-sub { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--sand); }
.ch-ext { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: 14px; font-weight: 600; color: var(--ivory);
  text-decoration: underline; text-decoration-color: rgba(246,242,234,.4); text-underline-offset: 3px; }
.ch-ext:hover { text-decoration-color: var(--ivory); }
.ch-ext .ico { color: var(--mute); }

/* Boutons : l'action principale est grande, elle prend la place qui reste à côté de « Fermer ». */
.ch-modal .actions { justify-content: flex-end; margin-top: 0; }
.ch-modal .btn.ch-big { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px;
  font-size: 16px; font-weight: 600; text-decoration: none; }
.ch-pair-side .btn.ch-big { align-self: stretch; }

/* ── Grand écran : le code à gauche, les gestes à droite ────────────────── */

@media (min-width: 640px) {
  .ch-pair { flex-direction: row; align-items: flex-start; gap: 28px; }
  .ch-pair-side { align-self: flex-start; flex: 1 1 0; padding-top: 2px; }
}

/* ── Tablette et téléphone ──────────────────────────────────────────────── */

@media (max-width: 860px) {
  .ch { margin-top: 36px; }
  .ch-head { margin-bottom: 16px; }
  .ch-link, .ch-ext { min-height: 44px; }
  /* Feuille pleine largeur en bas de l'écran, comme les autres fenêtres du produit. */
  .modal.ch-modal { max-width: none; gap: 14px; }
  .ch-modal .ch-arow { min-height: 64px; }
  .ch-modal .actions .btn, .ch-confirm-btns .btn { min-height: 44px; }
  .ch-modal .btn.ch-big { min-height: 52px; }
  .ch-act { min-height: 44px; padding: 0 6px; }
}
@media (max-width: 560px) {
  .ch-tile { min-height: 0; padding: 18px; }
  .ch-cta { align-self: stretch; margin-top: 4px; }
  .ch-modal .actions .btn { flex: 1 1 auto; white-space: normal; }
  .ch-modal .actions .btn-text { flex: 0 0 auto; }
  /* Deux actions ne tiennent pas à côté du nom : elles passent dessous. */
  .ch-modal .ch-arow:has(.ch-act + .ch-act) { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: start; }
  .ch-modal .ch-arow:has(.ch-act + .ch-act) .ch-acts { grid-column: 2; justify-content: flex-start; }
  .ch-act { text-align: left; }
  .ch-confirm-btns .btn { flex: 1 1 0; white-space: normal; }
  .ch-done-title { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .ch-tile, .ch-cta { transition: none; }
}