/* ─────────────────────────────────────────────────────────────────────────
   Kossivi — ecran d'appel premium (Lot 3 du sous-chantier "appel pur").

   Direction : "Le Calme premium". Un orbe vivant au centre, etats par le
   mouvement. iOS dans l'ame (safe areas, ressort). Tokens derives du theme
   app courant (--bg / --text / --muted / --surface / --border) : l'ecran
   s'adapte au theme choisi par l'utilisateur. Accents verts Kossivi fixes.
   ───────────────────────────────────────────────────────────────────────── */

.kossivi-call-root[hidden] { display: none; }

.kossivi-call {
  /* Derives du theme courant : s'adapte automatiquement (clair/sombre/bleu/rose). */
  --kv-bg:       var(--bg);
  --kv-deep:     color-mix(in srgb, var(--bg) 88%, #000 12%);
  --kv-text:     var(--text);
  --kv-muted:    var(--muted);
  --kv-muted2:   var(--muted2);
  --kv-surface:  var(--surface);
  --kv-border:   var(--border);
  --kv-glass-bg: color-mix(in srgb, var(--bg) 92%, transparent);
  /* Accents verts Kossivi — fixes quelque soit le theme. */
  --kv-green:    #22c55e;
  --kv-green-hi: #4ade80;
  --kv-glow:     rgba(34, 197, 94, .30);
  --kv-glow-dim: rgba(34, 197, 94, .11);

  position: fixed;
  inset: 0;
  z-index: 9000; /* au-dessus du FAB/tiroir Apte (8500), sous les toasts (9999) */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding:
    calc(env(safe-area-inset-top, 0px) + 18px)
    env(safe-area-inset-right, 0px)
    calc(env(safe-area-inset-bottom, 0px) + 26px)
    env(safe-area-inset-left, 0px);
  background: var(--kv-bg);
  color: var(--kv-text);
  isolation: isolate;
  overflow: hidden;
  /* Entree : la feuille monte (ressort iOS). */
  opacity: 0;
  transform: translateY(20px) scale(.985);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}
.kossivi-call.is-open { opacity: 1; transform: translateY(0) scale(1); }
.kossivi-call.is-leaving { opacity: 0; transform: translateY(8px) scale(.99); }

/* Fond profond + matiere : halo vert haut + assise sombre bas. */
.kossivi-call-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 80% 55% at 50% 28%, var(--kv-glow) 0%, transparent 62%),
    radial-gradient(ellipse 120% 70% at 50% 112%, var(--kv-deep) 0%, transparent 55%),
    var(--kv-bg);
}

/* ─── Barre haute : marque (gauche) / minuteur (centre) / etat (droite) ─── */
.kossivi-call-top {
  width: 100%;
  max-width: 520px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
}
.kossivi-eyebrow {
  justify-self: start;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: .04em;
  color: var(--kv-muted);
}
.kossivi-timer {
  justify-self: center;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--kv-muted);
  font-variant-numeric: tabular-nums;
}
.kossivi-state {
  justify-self: end;
  font-size: var(--text-xs);
  color: var(--kv-muted2);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
/* L'etat ne "crie" pas : surtout visible pendant la connexion. */
.kossivi-call.is-connecting .kossivi-state { opacity: 1; }

/* ─── Scene + orbe (le heros, taille reduite pour laisser place au transcript) ─── */
.kossivi-stage {
  flex-shrink: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0 4px;
}
.kossivi-orb {
  --orb-scale: 1;
  --orb-glow: .4;
  position: relative;
  width: min(56vw, 220px);
  height: min(56vw, 220px);
  display: grid;
  place-items: center;
  transition: opacity var(--dur-slow) var(--ease-out);
}
/* Halo ambiant : pilote par le niveau (--orb-glow / --orb-scale via JS). */
.kossivi-orb-glow {
  position: absolute;
  inset: -28%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--kv-green) 0%, transparent 62%);
  opacity: calc(var(--orb-glow) * .7);
  filter: blur(32px);
  transform: scale(var(--orb-scale));
  transition: opacity var(--dur-base) linear;
}
/* Coeur CSS : rendu predictible et premium meme si le canvas echoue. */
.kossivi-orb-core {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, var(--kv-green-hi) 0%, var(--kv-green) 48%, transparent 72%);
  box-shadow: 0 0 80px var(--kv-glow), inset 0 0 50px var(--kv-glow-dim);
  transform: scale(var(--orb-scale));
  animation: kossivi-breathe 6s var(--ease-out) infinite;
}
/* Blob vivant audio-reactif (par-dessus, additif). */
.kossivi-orb-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
@keyframes kossivi-breathe {
  0%, 100% { transform: scale(calc(var(--orb-scale) * .97)); }
  50%      { transform: scale(calc(var(--orb-scale) * 1.03)); }
}
/* Kossivi parle -> l'orbe fleurit (respire plus vif). */
.kossivi-call.is-speaking .kossivi-orb-core { animation-duration: 2.4s; }
/* Connexion -> l'orbe se forme (legerement en retrait). */
.kossivi-call.is-connecting .kossivi-orb { opacity: .62; }

/* ─── Transcript conversationnel (remplace l'ancienne caption) ─── */
.kossivi-transcript {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
  padding: 0 22px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Fondu du bord haut : donne de la profondeur a l'historique */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 36px, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 36px, #000 100%);
  scrollbar-width: thin;
  scrollbar-color: var(--kv-border) transparent;
}
.kossivi-transcript:empty { flex: 0; min-height: 8px; }
.kossivi-transcript[hidden] { display: none; }

/* ─── Bulle Kossivi : pleine largeur, texte confortable ─── */
.kv-bubble--kossivi {
  align-self: flex-start;
  width: 100%;
  color: var(--kv-text);
  font-size: var(--text-base, 15px);
  line-height: 1.7;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
/* Markdown dans les bulles Kossivi */
.kv-bubble--kossivi p { margin: 0 0 .55em; }
.kv-bubble--kossivi p:last-child { margin-bottom: 0; }
.kv-bubble--kossivi strong { font-weight: 600; color: var(--kv-text); }
.kv-bubble--kossivi em { font-style: italic; }
.kv-bubble--kossivi ul,
.kv-bubble--kossivi ol { margin: .3em 0 .6em 1.3em; padding: 0; }
.kv-bubble--kossivi li { margin-bottom: .2em; }
/* Code inline */
.kv-bubble--kossivi code:not(pre code) {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
  background: var(--kv-surface);
  border: 1px solid var(--kv-border);
  padding: 1px 6px;
  border-radius: 5px;
  font-size: .87em;
  word-break: break-all;
}
/* Bloc de code */
.kv-bubble--kossivi pre {
  margin: .5em 0;
  padding: 11px 14px;
  background: var(--kv-surface);
  border: 1px solid var(--kv-border);
  border-radius: 10px;
  overflow-x: auto;
}
.kv-bubble--kossivi pre code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre;
  color: var(--kv-text);
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
}
/* hljs neutralise — conserve les couleurs du theme */
.kv-bubble--kossivi .hljs { background: transparent; color: inherit; }

/* ─── Puce de contexte : document/note actif, centree, discrete ─── */
.kv-bubble--context {
  align-self: center;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px 4px 8px;
  background: var(--kv-surface);
  border: 1px solid var(--kv-border);
  border-radius: 999px;
  color: var(--kv-muted);
  font-size: var(--text-xs, 12px);
  max-width: 88%;
  overflow: hidden;
  white-space: nowrap;
  flex-shrink: 0;
}
.kv-bubble--context svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  opacity: .7;
}
.kv-bubble--context span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─── Bulle utilisateur : pill, droite, discret ─── */
.kv-bubble--user {
  align-self: flex-end;
  max-width: 78%;
  padding: 9px 15px;
  background: var(--kv-surface);
  border: 1px solid var(--kv-border);
  border-radius: 20px 20px 5px 20px;
  color: var(--kv-muted);
  font-size: var(--text-sm, 13px);
  line-height: 1.5;
  word-wrap: break-word;
}

/* ─── Bulle erreur : centree, fond rouge attenué ─── */
.kv-bubble--error {
  align-self: center;
  max-width: 92%;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--red, #ef4444) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--red, #ef4444) 22%, transparent);
  border-radius: 12px;
  color: var(--kv-text);
  font-size: var(--text-sm);
  text-align: center;
  line-height: 1.5;
}

/* ─── Barre de controle iOS ─── */
.kossivi-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding-top: 8px;
}
.kossivi-ctrl {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--kv-border);
  background: var(--kv-surface);
  color: var(--kv-text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.kossivi-ctrl:active { transform: scale(.92); } /* ressort iOS au toucher */
.kossivi-ctrl.is-muted { background: var(--kv-glow-dim); color: var(--kv-green-hi); }
.kossivi-ctrl.is-off { color: var(--kv-muted2); }
.kossivi-ctrl--end {
  width: 68px;
  height: 68px;
  background: var(--red);
  border-color: transparent;
  color: var(--white);
}
.kossivi-ctrl--end svg { transform: rotate(135deg); } /* combine "raccrocher" iOS */

/* ─── Etat d'echec : l'orbe se calme, la bulle erreur s'affiche dans le transcript ─── */
.kossivi-call.is-error .kossivi-orb-core {
  background: radial-gradient(circle at 38% 32%, var(--kv-surface) 0%, var(--kv-bg) 62%, transparent 76%);
  box-shadow: none;
  animation: none;
}
.kossivi-call.is-error .kossivi-orb-glow { opacity: .12; }

/* Respecte le confort de mouvement. */
@media (prefers-reduced-motion: reduce) {
  .kossivi-orb-core { animation: none; }
  .kossivi-call,
  .kossivi-call.is-open,
  .kossivi-call.is-leaving { transform: none; transition: opacity var(--dur-base) linear; }
}

/* ─── Bouton appel Kossivi (tiroir assistant) ─── */
.asst-kossivi-cta[hidden] { display: none; }
.asst-kossivi-cta {
  padding: 10px 0 2px;
}
.asst-kossivi-call-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 20px;
  border-radius: var(--radius-lg, 14px);
  background: var(--green);
  color: var(--white, #fff);
  font-weight: 600;
  font-size: var(--text-base);
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity var(--dur-fast, 120ms) linear, transform var(--dur-fast, 120ms) var(--ease-out);
}
.asst-kossivi-call-btn:active { opacity: .82; transform: scale(.97); }