/* Styles specifiques a l'ecran d'appel (app.html) - s'appuie sur design.css pour les tokens.
   Refonte "Jarvis" : aucun changement dans app.js autre que du classList/dataset toggling sur
   des elements deja existants - la latence du chemin temps reel (audio/WebSocket) n'est jamais
   affectee par ce fichier. */

.consent-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  font-size: 13.5px;
  color: #fde68a;
  line-height: 1.5;
  margin-bottom: 22px;
  cursor: pointer;
}

.consent-card input {
  margin-top: 2px;
  flex-shrink: 0;
}

.controls-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

/* --- Outils admin (mode debug) : reserves aux comptes admin, voir app.js/ARCHITECTURE.md
   "Mode admin". Volontairement discret (petit encart en retrait), pas un element central de
   l'ecran puisque quasiment personne ne le voit jamais. --- */
.admin-tools {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 22px;
}

.admin-tools-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.debug-toggle {
  font-size: 13px;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* --- Bascule vendeur/prospect : mecanisme principal, visible pour tous (voir ARCHITECTURE.md
   "Qui parle ?") - juste au-dessus du transcript, a cote de la suggestion IA, pour rester visible
   avec les deux sans scroller. Volontairement compact (une seule ligne) plutot qu'une grande
   carte a part, contrairement a sa position precedente. --- */
.role-toggle {
  margin-bottom: 14px;
}

.role-btn-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.role-toggle-hint {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-left: 4px;
}

.role-toggle-hint kbd {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 11px;
}

.pill-btn {
  background: var(--color-surface);
  color: var(--color-text-secondary);
  border: 1.5px solid var(--color-border);
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all 0.15s ease;
}

.pill-btn:hover {
  border-color: var(--color-primary);
}

.pill-btn-active {
  background: var(--gradient-brand);
  color: white;
  border-color: transparent;
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 8px;
}

.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: center;
}

.stat-label {
  display: block;
  font-size: 11px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
}

/* --- L'orbe : coeur visuel "Jarvis" de l'ecran. Purement decoratif/CSS (aucun canvas/WebGL,
   aucune lecture reelle du niveau audio) - pilote par l'attribut data-state, mis a jour par
   app.js aux points ou il mettait deja a jour connectionStatusEl/suggestionTextEl (aucune
   nouvelle logique metier). Etats : idle (defaut) / connecting / listening / active (flash bref
   a chaque suggestion recue). --- */
.orb-wrap {
  display: flex;
  justify-content: center;
  padding: 18px 0 26px;
}

.orb {
  position: relative;
  width: 96px;
  height: 96px;
}

.orb-core {
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #6ee7b7, var(--color-accent) 55%, var(--color-accent-dark) 100%);
  box-shadow: 0 0 20px rgba(52, 211, 153, 0.35);
  transition: box-shadow 0.4s ease, background 0.4s ease, transform 0.3s ease;
}

.orb-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  opacity: 0.6;
}

.orb-ring-2 {
  inset: 12%;
}

/* idle : anneaux ternes, coeur faiblement lumineux - "en attente d'appel" */
.orb[data-state='idle'] .orb-core {
  background: radial-gradient(circle at 35% 30%, #475569, #334155 100%);
  box-shadow: none;
}

/* connecting : pulsation rapide pendant qu'on attend la confirmation du service de transcription */
.orb[data-state='connecting'] .orb-ring-1 {
  animation: orb-spin 1.4s linear infinite;
  border-top-color: var(--color-accent);
}

/* listening : respiration continue et douce - l'etat "normal" pendant l'ecoute d'un appel */
.orb[data-state='listening'] .orb-core,
.orb[data-state='active'] .orb-core {
  animation: pulse-glow 2.6s ease-in-out infinite;
}

.orb[data-state='listening'] .orb-ring-1,
.orb[data-state='active'] .orb-ring-1 {
  animation: orb-spin 8s linear infinite;
  border-top-color: var(--glow-ring-color);
}

.orb[data-state='listening'] .orb-ring-2,
.orb[data-state='active'] .orb-ring-2 {
  animation: orb-spin 6s linear infinite reverse;
  border-top-color: var(--color-primary);
}

/* active : flash bref au moment ou une suggestion arrive - le coeur "reagit" */
.orb[data-state='active'] .orb-core {
  box-shadow: var(--shadow-glow-accent);
  transform: scale(1.08);
}

@keyframes orb-spin {
  to { transform: rotate(360deg); }
}

.suggestion-zone {
  background: linear-gradient(160deg, rgba(52, 211, 153, 0.07) 0%, rgba(99, 102, 241, 0.05) 100%);
  border: 1px solid var(--color-border);
  backdrop-filter: blur(20px);
  border-radius: var(--radius-lg);
  padding: 28px;
  text-align: center;
  margin-bottom: 22px;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

.suggestion-zone::before {
  content: '';
  position: absolute;
  top: -60%;
  right: -20%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(52, 211, 153, 0.14) 0%, transparent 70%);
  pointer-events: none;
}

.suggestion-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}

.suggestion-text {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.01em;
  min-height: 38px;
  text-shadow: 0 0 24px rgba(52, 211, 153, 0.25);
  transition: opacity 0.2s ease;
}

.suggestion-detail {
  margin-top: 10px;
  font-size: 16px;
  color: var(--color-text-secondary);
  font-style: italic;
  line-height: 1.5;
}

.suggestion-category {
  margin-top: 10px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.transcript-zone {
  background: var(--color-surface);
  backdrop-filter: blur(20px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 18px;
  margin-bottom: 20px;
}

.transcript-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}

.transcript-text {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--color-text);
  max-height: 220px;
  overflow-y: auto;
  white-space: pre-wrap;
}

.debug-panel {
  background: var(--color-dark-surface);
  border: 1px solid var(--color-dark-border);
  color: #b8c0e0;
  border-radius: var(--radius-md);
  padding: 18px;
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 12px;
}

.debug-panel .transcript-label {
  color: #7c86b8;
}

#debug-log {
  max-height: 220px;
  overflow-y: auto;
  white-space: pre-wrap;
}

#call-state-log {
  white-space: pre-wrap;
  margin-bottom: 16px;
  color: #6ee7b7;
  line-height: 1.6;
}

/* --- Verrou de quota (voir app.js / app.html) --- */
.quota-lock {
  text-align: center;
  padding: 40px 28px;
  border-color: rgba(251, 191, 36, 0.35);
}

.quota-lock h2 {
  margin-bottom: 10px;
}

.quota-lock .page-subtitle {
  margin-bottom: 22px;
}

/* --- Tutoriel du premier appel (voir public/tour.js) ------------------------
   Le voile sombre n'est pas un fond pose sur toute la page mais l'ombre portee
   du halo : une ombre de 9999px vers l'exterieur assombrit tout SAUF le
   rectangle de la cible, qui reste net et en couleur. Un vrai trou, sans avoir
   a decouper quoi que ce soit ni a deplacer l'element mis en avant. */
.tour {
  position: fixed;
  inset: 0;
  z-index: 80;
}

.tour-halo {
  position: absolute;
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 9999px rgba(5, 7, 13, 0.78);
  border: 2px solid var(--color-accent);
  transition: top 0.18s ease, left 0.18s ease, width 0.18s ease, height 0.18s ease;
  pointer-events: none;
}

/* Derniere etape : plus rien a pointer sur cet ecran, on assombrit tout et la
   carte passe au centre. */
.tour-centre .tour-halo {
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border: 0;
}

.tour-card {
  position: absolute;
  width: min(360px, calc(100vw - 24px));
  background: var(--color-surface-solid);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-lg);
}

.tour-centre .tour-card {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* La fleche pointe le centre de la cible : --tour-fleche est calculee en JS,
   car la carte est ramenee dans l'ecran et n'est donc pas toujours centree
   sur ce qu'elle designe. */
.tour-card-below::before,
.tour-card-above::before {
  content: '';
  position: absolute;
  left: var(--tour-fleche, 50%);
  margin-left: -7px;
  border: 7px solid transparent;
}

.tour-card-below::before {
  top: -14px;
  border-bottom-color: var(--color-surface-solid);
}

.tour-card-above::before {
  bottom: -14px;
  border-top-color: var(--color-surface-solid);
}

.tour-step {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 8px;
}

.tour-title {
  font-size: 17px;
  margin: 0 0 8px;
}

.tour-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0 0 18px;
}

.tour-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* .btn est un inline-flex : sans cette regle, l'attribut hidden pose sur le bouton
   "Passer" a la derniere etape resterait sans effet. */
.tour-skip[hidden] {
  display: none;
}

.tour-dots {
  display: flex;
  gap: 6px;
}

.tour-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-border);
}

.tour-dot-active {
  background: var(--color-accent);
}