/* =====================================================================
   VISION PME — La barre d'appel

   Elle est fixée en bas de l'écran et vit HORS de #root : le routeur
   réécrit #root à chaque changement de route, et un appel en cours ne
   doit pas mourir parce que l'agent ouvre sa file.
   ===================================================================== */

.tel-barre {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  /* Au-dessus des toasts, sous les modales : un appel en cours doit
     rester visible pendant qu'une notification passe, mais ne doit pas
     recouvrir une boîte de dialogue qui attend une décision. */
  z-index: 60;
  pointer-events: none;
}
.tel-barre[hidden] { display: none; }

/* La barre latérale fait 264 px à partir de 981 px (voir .app dans
   app.css) : sans ce décalage, la barre d'appel passerait dessous. */
@media (min-width: 981px) {
  .tel-barre { left: 264px; }
}

/* ⚠️ ELLE EST FIXE, DONC ELLE NE POUSSE RIEN — ET ELLE RECOUVRE.
   41 px de bandeau posés par-dessus les derniers pixels de la page,
   alors que `#page-content` n'a que 32 px de marge basse. Sur la
   plupart des écrans ça ne se remarque pas ; sur le tableau des appels,
   c'est EXACTEMENT la barre de défilement horizontale qui disparaît
   dessous — d'où « on ne voit pas toutes les colonnes ».

   On réserve donc sa hauteur, et seulement quand elle est là :
   `[hidden]` la retire du calcul comme de l'écran. 84 px et non 41 :
   le bandeau passe à deux lignes quand un appel affiche son minuteur et
   ses boutons, et une marge trop courte ne se voit qu'en production. */
body:has(#tel-barre:not([hidden])) #page-content { padding-bottom: 84px; }

.tel-bandeau {
  pointer-events: auto;
  display: flex; align-items: center; gap: var(--s-3);
  flex-wrap: wrap;
  padding: 10px var(--s-4);
  background: var(--surface-1);
  border-top: 2px solid var(--green);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, .08);
  font: 500 var(--fs-sm)/1.4 var(--font-body);
}

.tel-bandeau--instable { border-top-color: var(--warn); }
.tel-bandeau--panne {
  border-top-color: var(--danger);
  background: var(--danger-soft);
  color: var(--danger);
}
.tel-bandeau--panne .icon { width: 16px; height: 16px; flex: none; }

/* La pastille bat pendant l'appel. `prefers-reduced-motion` l'arrête :
   un point qui clignote en permanence est épuisant pour qui y est
   sensible, et l'information reste lisible sans l'animation. */
.tel-pastille {
  width: 9px; height: 9px; flex: none;
  border-radius: 50%;
  background: var(--green);
  animation: tel-battement 1.6s ease-in-out infinite;
}
@keyframes tel-battement {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}
@media (prefers-reduced-motion: reduce) {
  .tel-pastille { animation: none; }
}

.tel-titre { font-weight: 700; }
.tel-qui   { color: var(--text-muted); }

.tel-chrono {
  font: 600 var(--fs-base)/1 var(--font-mono, ui-monospace, monospace);
  /* Les chiffres alignés : sans ça, « 09:59 » puis « 10:00 » font sauter
     tout ce qui suit d'un pixel à chaque seconde. */
  font-variant-numeric: tabular-nums;
}

.tel-note {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--warn); font-size: var(--fs-xs);
}
.tel-note--alerte { color: var(--danger); font-weight: 600; }
.tel-note .icon { width: 14px; height: 14px; }

.tel-espace { flex: 1 1 auto; min-width: var(--s-2); }

/* =====================================================================
   AU REPOS — le sélecteur de ligne

   Pas un bandeau pleine largeur : une pastille dans le coin. Elle est
   présente en permanence, donc elle doit coûter le moins de place
   possible tout en répondant à la seule question qu'on ne peut pas
   deviner autrement qu'en appelant quelqu'un : « quel numéro s'affiche
   chez la personne que j'appelle ? »
   ===================================================================== */
.tel-repos {
  pointer-events: none;
  display: flex; justify-content: flex-start;
  padding: 0 var(--s-4) var(--s-3);
}

.tel-lignes { pointer-events: auto; position: relative; }

.tel-ligne-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-1);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .10);
  font: 600 var(--fs-xs)/1 var(--font-body);
  color: var(--text);
  cursor: pointer;
}
.tel-ligne-btn:hover { border-color: var(--green); }
.tel-ligne-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.tel-ligne-btn .icon { width: 14px; height: 14px; flex: none; color: var(--green); }
.tel-ligne-btn .icon:last-child { color: var(--text-muted); }

.tel-ligne-num {
  color: var(--text-muted); font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.tel-menu {
  position: absolute; bottom: calc(100% + 8px); left: 0;
  min-width: 260px;
  padding: var(--s-2);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md, 10px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .16);
  display: flex; flex-direction: column; gap: 2px;
}

.tel-menu-titre {
  margin: 0 0 4px; padding: 0 8px;
  font: 600 var(--fs-xs)/1.4 var(--font-body);
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em;
}

.tel-menu-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px;
  border: 0; border-radius: 8px;
  background: transparent; text-align: left; cursor: pointer;
  font: 500 var(--fs-sm)/1.3 var(--font-body);
  color: var(--text);
}
.tel-menu-item:hover { background: var(--surface-2); }
.tel-menu-item:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.tel-menu-item span {
  color: var(--text-muted); font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}
/* La ligne active porte un filet, pas une couleur de fond : le fond est
   déjà pris par le survol, et deux signaux au même endroit se lisent mal. */
.tel-menu-item.est-courante { box-shadow: inset 3px 0 0 var(--green); }
.tel-menu-item.est-courante b { color: var(--green); }

/* =====================================================================
   LE NUMÉROTEUR ET LE CLAVIER DTMF

   Empilés DANS LE FLUX au-dessus des boutons, jamais en position
   absolue : douze touches en absolu débordent de l'écran d'un
   téléphone, alors qu'empilées elles poussent simplement la barre vers
   le haut.
   ===================================================================== */
.tel-pile {
  pointer-events: auto;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--s-2);
}

.tel-repos-boutons { display: flex; gap: var(--s-2); flex-wrap: wrap; }

.tel-ligne-btn--action .icon:last-child { color: var(--green); }

.tel-panneau {
  width: 260px; max-width: calc(100vw - 2 * var(--s-4));
  padding: var(--s-3);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md, 10px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .16);
  display: flex; flex-direction: column; gap: var(--s-3);
}

.tel-panneau-tete { display: flex; align-items: center; gap: 6px; }

.tel-champ {
  flex: 1; min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font: 600 1.05rem/1.2 var(--font-body);
  /* Les chiffres alignés : sans ça, chaque frappe fait sauter le champ. */
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.tel-champ:focus { outline: 2px solid var(--green); outline-offset: 1px; }

.tel-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.tel-touche {
  padding: 11px 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font: 600 1.05rem/1 var(--font-mono, ui-monospace, monospace);
  cursor: pointer;
  /* Sur un téléphone, une touche de moins de 44 px se rate. */
  min-height: 44px;
  /* Le surlignage bleu d'Android à chaque appui rend le clavier
     clignotant : on garde le retour visuel, pas le rectangle. */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.tel-touche:hover { border-color: var(--green); }
.tel-touche:active { background: var(--green); color: #fff; border-color: var(--green); }
.tel-touche:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }

.tel-appeler { width: 100%; justify-content: center; }
.tel-appeler[disabled] { opacity: .5; cursor: not-allowed; }

@media (max-width: 720px) {
  .tel-repos { padding: 0 var(--s-3) var(--s-2); }
  .tel-menu { min-width: 0; width: calc(100vw - 2 * var(--s-3)); }
  .tel-panneau { max-width: calc(100vw - 2 * var(--s-3)); }
}

@media (max-width: 720px) {
  .tel-espace { display: none; }
  .tel-bandeau { gap: var(--s-2); padding: 10px var(--s-3); }
  .tel-qui { width: 100%; order: 3; }
}

/* ── Le renvoi de ligne (0159) ──────────────────────────────────────── */
.tel-ligne-btn--renvoi {
  border-color: var(--green);
  color: var(--green);
}
.tel-ligne-btn--renvoi .icon:first-child { color: var(--green); }

.tel-aide {
  margin: 0;
  font: 400 var(--fs-xs)/1.55 var(--font-body);
  color: var(--text-muted);
}
.tel-aide b { color: var(--text); }

.tel-renvoi-actions { display: flex; flex-direction: column; gap: 6px; }