/* Softphone — palette « Nuit & Cuivre », identique au reste du CRM.
   Le panneau est en position fixe : il flotte au-dessus de #app, qui est
   recréé à chaque navigation. */

#softphone {
  position: fixed; right: 18px; bottom: 18px; z-index: 200;
  width: 320px; max-width: calc(100vw - 36px);
  background: var(--nuit-2); border: 1px solid var(--nuit-3);
  border-radius: var(--radius); box-shadow: 0 14px 36px rgba(0,0,0,.5);
  font-size: 13.5px; overflow: hidden;
}
#softphone.sp-reduit { width: auto; }

.sp-barre { display: flex; align-items: center; gap: 8px; padding: 8px 10px;
            background: var(--nuit-3); }
.sp-titre { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden;
            text-overflow: ellipsis; }
.sp-canaux { color: var(--ardoise); font-size: 12px; font-variant-numeric: tabular-nums; }
.sp-demo { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
           color: var(--warn); border: 1px solid var(--warn); border-radius: 4px;
           padding: 1px 5px; }

.sp-pastille { position: relative; background: none; border: none; cursor: pointer;
               font-size: 18px; color: var(--creme); line-height: 1; padding: 2px 4px; }
.sp-pastille.en-appel { color: var(--ok); animation: sp-pulse 1.6s infinite; }
@keyframes sp-pulse { 50% { opacity: .45; } }
.sp-badge { position: absolute; top: -4px; right: -6px; background: var(--cuivre);
            color: var(--nuit); border-radius: 8px; font-size: 10px; padding: 0 4px;
            font-weight: 700; }
.sp-badge:empty { display: none; }

.sp-corps { padding: 12px; }
.sp-appel .sp-sens { color: var(--ardoise); font-size: 12px; }
.sp-appel .sp-nom { font-family: var(--font-head); font-size: 17px; margin: 2px 0; }
.sp-appel .sp-numero { font-variant-numeric: tabular-nums; color: var(--cuivre-clair); }
.sp-lien { display: inline-block; margin: 4px 0; color: var(--cuivre); font-size: 12px; }
.sp-chrono { font-variant-numeric: tabular-nums; font-size: 22px; margin: 8px 0;
             min-height: 26px; }
.sp-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.sp-actions .btn { flex: 1 1 auto; }

.sp-touches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
              margin: 10px 0; }
.sp-touche { padding: 10px 0; background: var(--nuit-3); border: 1px solid transparent;
             border-radius: 6px; color: var(--creme); font-size: 16px; cursor: pointer; }
.sp-touche:hover { border-color: var(--cuivre); }
.sp-appeler { width: 100%; }
.sp-avertit { margin-top: 8px; color: var(--warn); font-size: 12px; }

.sp-qualif { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--nuit-3); }
.sp-qualif-titre { font-size: 12px; color: var(--ardoise); margin-bottom: 6px; }
.sp-qualif select, .sp-qualif input[type="date"] { margin-bottom: 6px; }
.sp-case { display: flex; align-items: center; gap: 6px; font-size: 12.5px;
           margin-bottom: 8px; }
.sp-case input { width: auto; }

/* Numéro cliquable, partout dans le CRM */
.tel-appel { background: none; border: 1px solid var(--nuit-3); border-radius: 6px;
             color: var(--cuivre-clair); cursor: pointer; padding: 2px 8px;
             font-size: inherit; font-family: inherit; }
.tel-appel:hover { border-color: var(--cuivre); background: rgba(196,122,74,.1); }
.tel-lien { color: var(--cuivre-clair); }

@media (max-width: 640px) {
  #softphone { right: 10px; bottom: 68px; width: calc(100vw - 20px); }
}

/* Administration : état des variables d'environnement */
.tel-env { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.tel-env-item { font-family: ui-monospace, monospace; font-size: 11px;
                padding: 2px 7px; border-radius: 4px; border: 1px solid var(--nuit-3); }
.tel-env-item.ok { color: var(--ok); border-color: var(--ok); }
.tel-env-item.absent { color: var(--ardoise); }