/* ==========================================================================
   PROTOCOLE ZÉRO SALLE — Coach IA (chat + avatars)
   ========================================================================== */

.coach-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 12, 0.4);
  backdrop-filter: blur(4px);
  z-index: 700;
  opacity: 0;
  /* Fermé : « visibility: hidden » une fois le fondu fini, pour que le téléphone ne calcule plus
     le flou plein écran d'un voile invisible (il le faisait à chaque image, même coach fermé). */
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-smooth), visibility 0s linear 0.3s;
}

.coach-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.3s var(--ease-smooth), visibility 0s;
}

.coach-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 701;
  background: var(--color-bg);
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -10px 40px rgba(10, 10, 12, 0.25);
  max-width: 560px;
  margin: 0 auto;
  height: min(88dvh, 720px);
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  /* ease-out (et non spring) : le rebond du spring faisait dépasser la feuille
     au-dessus du bas de l'écran, laissant apparaître un vide pendant l'ouverture. */
  transition: transform 0.45s var(--ease-out);
}

.coach-panel.is-open {
  transform: translateY(0);
}

/* Fermée (après la descente) : tout son contenu est caché pour de bon. Sinon le téléphone continuait de
   dessiner, hors de l'écran, le portrait, son fond flouté, les boutons en verre dépoli et les animations.
   La feuille elle-même reste là (son ombre douce dépasse en bas de l'écran, derrière la barre d'onglets). */
.coach-panel > * { visibility: hidden; transition: visibility 0s linear 0.45s; }
.coach-panel.is-open > * { visibility: visible; transition: visibility 0s; }

/* --------------------------------------------------------------------------
   Grand visuel du coach ("stage") — remplace l'ancien petit avatar de header.
   Conçu pour accueillir soit un portrait carré, soit une image plein corps :
   object-fit: cover + object-position: top garantit que le visage/haut du
   corps reste toujours visible et net, même si l'image déborde vers le bas.
   -------------------------------------------------------------------------- */
.coach-avatar-stage {
  position: relative;
  width: 100%;
  height: 380px;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--color-black);
  border-radius: 28px 28px 0 0;
}

.coach-avatar-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transition: opacity 0.4s var(--ease-smooth);
}

.coach-avatar-stage img.is-active {
  opacity: 1;
}

.coach-panel-handle {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 5px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 1px 4px rgba(10, 10, 12, 0.35);
  z-index: 3;
}

.coach-close-overlay {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(10, 10, 12, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.15s var(--ease-spring);
}

.coach-close-overlay:active { transform: scale(0.9); }
.coach-close-overlay svg { width: 16px; height: 16px; stroke: #fff; }

/* Bouton « Émotions · 21/95 débloquées » : explicite, façon collection */
.gallery-open-btn {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 7px;
  border-radius: var(--radius-pill);
  background: rgba(10, 10, 12, 0.55);
  border: 1px solid rgba(255, 214, 10, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  text-align: left;
  transition: transform 0.15s var(--ease-spring), background 0.2s;
}

.coach-panel.is-open .gallery-open-btn { animation: gallery-invite 2.4s ease-in-out 0.6s 2; }

.gallery-open-btn:hover { background: rgba(10, 10, 12, 0.72); }
.gallery-open-btn:active { transform: scale(0.95); }

.gallery-open-btn svg {
  width: 26px;
  height: 26px;
  padding: 5px;
  border-radius: 50%;
  background: rgba(255, 214, 10, 0.18);
  stroke: var(--color-gold);
  fill: var(--color-gold);
  flex-shrink: 0;
}

.gallery-open-text { display: flex; flex-direction: column; line-height: 1.15; }
.gallery-open-text b { font-size: 12.5px; font-weight: 800; }
.gallery-open-text small { font-size: 10.5px; font-weight: 600; color: var(--color-gold); }

/* Petite pulsation à l'ouverture (2 fois seulement) pour attirer l'œil */
@keyframes gallery-invite {
  0%, 30%, 100% { box-shadow: 0 0 0 0 rgba(255, 214, 10, 0); }
  15% { box-shadow: 0 0 0 6px rgba(255, 214, 10, 0.25); }
}

.coach-stage-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 40px var(--space-5) var(--space-4);
  background: linear-gradient(to top, rgba(10, 10, 12, 0.78), rgba(10, 10, 12, 0));
  color: #fff;
}

.coach-stage-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
}

/* Transparence : l'utilisateur doit savoir qu'il échange avec une IA */
.coach-ai-tag {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.18);
  font-family: var(--font-text);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.coach-stage-status {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.78);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

/* Lien avec le coach (Découverte → Confiance → Complicité → Alliance) */
.coach-bond {
  margin-left: 4px;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: rgba(255, 214, 10, 0.16);
  color: var(--color-gold);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

/* Émotion du moment + intensité (6 barres ; la 6ᵉ « Ultime » brille en or) */
.coach-mood {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: rgba(10, 10, 12, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
}
.coach-mood-name { font-weight: 800; }
.coach-mood-pips { display: inline-flex; gap: 3px; align-items: flex-end; }
.coach-mood-pips i {
  display: block;
  width: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.22);
}
.coach-mood-pips i:nth-child(1) { height: 6px; }
.coach-mood-pips i:nth-child(2) { height: 8px; }
.coach-mood-pips i:nth-child(3) { height: 10px; }
.coach-mood-pips i:nth-child(4) { height: 12px; }
.coach-mood-pips i:nth-child(5) { height: 14px; }
.coach-mood-pips i:nth-child(6) { height: 16px; }
.coach-mood-pips i.is-on { background: var(--color-coach, #6d5dfc); }
.coach-mood-tier { color: rgba(255, 255, 255, 0.7); font-weight: 600; }
.coach-mood.is-ultimate { border-color: rgba(255, 214, 10, 0.7); box-shadow: 0 0 14px rgba(255, 214, 10, 0.35); }
.coach-mood.is-ultimate .coach-mood-pips i.is-on { background: var(--color-gold); }
.coach-mood.is-ultimate .coach-mood-tier { color: var(--color-gold); }
.coach-mood.is-pulse { animation: mood-pulse 0.5s var(--ease-spring, ease); }
@keyframes mood-pulse { 40% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .coach-mood.is-pulse { animation: none; } }

.coach-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-green);
  flex-shrink: 0;
}

/* Onde « en ligne » autour du point vert : même dessin qu'avant (un disque qui grandit de 7 px et
   s'efface), mais fait par la carte graphique (agrandissement + fondu) au lieu de repeindre une ombre
   à chaque image. Le disque est sous le point (::before), le point vert est redessiné par-dessus (::after). */
.coach-status-dot { position: relative; }
.coach-status-dot:not(.is-thinking) { background: transparent; }
.coach-status-dot:not(.is-thinking)::before,
.coach-status-dot:not(.is-thinking)::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
}
.coach-status-dot:not(.is-thinking)::before { background: rgba(52, 199, 89, 0.55); animation: online-ring 2.4s ease-out infinite; }
.coach-status-dot:not(.is-thinking)::after { background: var(--color-green); }

@keyframes online-ring {
  0% { transform: scale(1); opacity: 1; }
  70%, 100% { transform: scale(3); opacity: 0; }
}

/* Petite présentation sous le nom (visible sur grand écran) */
.coach-stage-caption {
  display: none;
  margin-top: 12px;
  max-width: 34ch;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}

.coach-status-dot.is-thinking {
  background: var(--color-blue);
  animation: pulse-dot 1s ease infinite;
}

@keyframes pulse-dot {
  50% { opacity: 0.3; }
}

.coach-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  -webkit-overflow-scrolling: touch;
  /* léger halo violet en haut : on sent qu'on est « chez le coach » */
  background:
    radial-gradient(90% 60% at 100% 0%, var(--color-coach-tint) 0%, transparent 60%),
    var(--color-bg);
}

.msg-row {
  display: flex;
  max-width: 86%;
  animation: msg-in 0.35s var(--ease-out) both;
}

@keyframes msg-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .msg-row { animation: none; }
}

.msg-row.from-coach { align-self: flex-start; }
.msg-row.from-user { align-self: flex-end; }

.msg-bubble {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 14.5px;
  line-height: 1.5;
}

.msg-row.from-coach .msg-bubble {
  background: var(--color-card);
  box-shadow: var(--shadow-card), inset 0 0 0 1px var(--color-hairline);
  border-bottom-left-radius: 6px;
}

.msg-row.from-user .msg-bubble {
  background: linear-gradient(135deg, #6d5dfc 0%, #4a37d1 100%);
  color: #fff;
  border-bottom-right-radius: 6px;
}

.msg-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  color: var(--color-red-dark);
}

.msg-typing {
  display: flex;
  gap: 4px;
  padding: 14px 16px;
}

.msg-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text-tertiary);
  animation: typing-bounce 1.1s ease infinite;
}

.msg-typing span:nth-child(2) { animation-delay: 0.15s; }
.msg-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-5px); opacity: 1; }
}

/* Suggestions : sur plusieurs lignes, toutes visibles (avant : une ligne
   défilante invisible à la souris, la 3e suggestion était inaccessible). */
.coach-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 var(--space-4) var(--space-3);
  flex-shrink: 0;
}

.coach-suggestions[hidden] { display: none; }

/* Sur téléphone (tactile) : une seule ligne qu'on fait défiler au doigt,
   pour laisser la place à la conversation. */
@media (hover: none) and (max-width: 767px) {
  .coach-suggestions {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-top: var(--space-2);
  }
  .coach-suggestions::-webkit-scrollbar { display: none; }
  .coach-chip { flex-shrink: 0; }
}

.coach-chip {
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-coach-tint);
  color: var(--color-coach);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, transform 0.15s var(--ease-spring);
}

.coach-chip:hover { border-color: var(--color-coach); }
.coach-chip:active { transform: scale(0.96); }

/* Messages : mini-avatar, heure, photo */
.msg-row.from-coach { align-items: flex-end; gap: 8px; }

.msg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.msg-avatar svg { width: 15px; height: 15px; }

.msg-time {
  display: block;
  margin-top: 4px;
  font-size: 10.5px;
  font-weight: 600;
  opacity: 0.6;
  text-align: right;
}

.msg-photo {
  width: 100%;
  max-width: 220px;
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
}

/* Zone de saisie */
.coach-composer {
  flex-shrink: 0;
  border-top: 1px solid var(--color-hairline);
  background: var(--color-bg);
  padding-bottom: max(var(--space-2), var(--safe-bottom));
}

/* Barre de saisie unifiée : photo + texte + envoi dans une seule « pilule » */
.coach-composer .coach-input-bar {
  align-items: flex-end;
  margin: var(--space-3) var(--space-4) 6px;
  padding: 5px;
  border: 1.5px solid var(--color-hairline-strong);
  border-radius: 26px;
  background: var(--color-card);
  box-shadow: var(--shadow-card);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.coach-composer .coach-input-bar:focus-within {
  border-color: var(--color-coach);
  box-shadow: 0 0 0 4px var(--color-coach-tint);
}

.coach-composer .coach-textarea {
  min-height: 40px;
  padding: 10px 6px;
  border: none;
  border-radius: 0;
  background: transparent;
}

.coach-composer .coach-textarea:focus { box-shadow: none; }

.coach-composer .coach-attach-btn,
.coach-composer .coach-send { width: 40px; height: 40px; }

.coach-composer .coach-attach-btn { border: none; background: var(--color-coach-tint); }
.coach-composer .coach-send { background: linear-gradient(135deg, #6d5dfc 0%, #4a37d1 100%); box-shadow: 0 4px 12px rgba(91, 75, 219, 0.35); }

.coach-attach-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-card);
  border: 1.5px solid var(--color-hairline-strong);
  color: var(--color-coach);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}

.coach-attach-btn svg { width: 20px; height: 20px; }
.coach-attach-btn:active { transform: scale(0.92); }

.coach-attachment {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: var(--space-3) var(--space-4) 0;
  padding: 8px;
  border-radius: var(--radius-md);
  background: var(--color-coach-tint);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-coach);
}

.coach-attachment img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
.coach-attachment span { flex: 1; }
.coach-attachment button { width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, 0.7); font-size: 12px; }

.coach-input-meta {
  padding: 0 var(--space-4);
  font-size: 11.5px;
  color: var(--color-text-secondary);
  text-align: center;
}

.coach-input-meta.is-warning { color: var(--color-red-dark); font-weight: 700; }

.coach-input-bar {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  padding-bottom: max(var(--space-3), var(--safe-bottom));
  border-top: 1px solid var(--color-hairline);
  flex-shrink: 0;
  background: var(--color-bg);
}

.coach-textarea {
  flex: 1;
  resize: none;
  max-height: 120px;
  min-height: 46px;
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--color-hairline-strong);
  background: var(--color-card);
  font-size: 14.5px;
  line-height: 1.4;
}

.coach-textarea:focus {
  outline: none;
  border-color: var(--color-coach);
  box-shadow: 0 0 0 4px var(--color-coach-tint);
}

.coach-send {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-coach);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.15s var(--ease-spring), opacity 0.2s;
}

.coach-send:active { transform: scale(0.9); }
.coach-send:disabled { opacity: 0.35; pointer-events: none; }
.coach-send svg { width: 19px; height: 19px; stroke: #fff; }

/* Bannière d'ajustement de programme (hors-piste) */
.msg-adjustment {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--color-bg-elevated);
  border-left: 3px solid var(--color-black);
  border-radius: var(--radius-xs);
  font-size: 12.5px;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Toast de déblocage d'émotion (façon trophée débloqué)
   -------------------------------------------------------------------------- */
.toast-unlock {
  background: linear-gradient(135deg, #1c1c1e, #0a0a0c);
  border: 1px solid rgba(255, 214, 10, 0.4);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 10px 10px;
}

.toast-unlock-thumb {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  object-fit: cover;
  object-position: top center;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--color-gold);
}

.toast-unlock-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12.5px;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.toast-unlock-sub {
  font-size: 13px;
  font-weight: 600;
  margin-top: 1px;
}

/* --------------------------------------------------------------------------
   Galerie des émotions (overlay plein écran, façon trophées)
   -------------------------------------------------------------------------- */
.gallery-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 12, 0.55);
  backdrop-filter: blur(6px);
  z-index: 800;
  opacity: 0;
  visibility: hidden; /* fermée : plus de flou plein écran ni de 114 portraits à dessiner */
  pointer-events: none;
  transition: opacity 0.3s var(--ease-smooth), visibility 0s linear 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.gallery-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.3s var(--ease-smooth), visibility 0s;
}

.gallery-panel {
  background: var(--color-bg);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 560px;
  max-height: 86dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-float);
  transform: scale(0.95);
  transition: transform 0.3s var(--ease-spring);
}

.gallery-overlay.is-open .gallery-panel {
  transform: scale(1);
}

.gallery-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5);
  border-bottom: 1px solid var(--color-hairline);
  flex-shrink: 0;
}

.gallery-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
}

.gallery-count {
  font-size: 12.5px;
  color: var(--color-text-secondary);
  font-weight: 600;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.gallery-intro {
  margin: 0;
  padding: var(--space-3) var(--space-5);
  background: var(--color-bg-elevated);
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.gallery-close {
  position: static;
  background: var(--color-bg-elevated) !important;
}
.gallery-close svg { stroke: var(--color-black) !important; }

.gallery-body {
  padding: var(--space-5);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.gallery-emotion-row {}

.gallery-emotion-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14.5px;
  margin-bottom: var(--space-3);
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.gallery-emotion-progress {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 11px;
  color: var(--color-text-tertiary);
}

.gallery-tiles {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-2);
}

/* Intensité 6 « Ultime » : liseré doré, on la reconnaît tout de suite dans la collection. */
.gallery-tile.is-ultimate { box-shadow: inset 0 0 0 2px var(--color-gold), 0 0 10px rgba(255, 214, 10, 0.35); }
.gallery-tile.is-ultimate .gallery-tile-tier { color: var(--color-gold); }

.gallery-tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-bg-elevated);
}

.gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Intensités verrouillées : entièrement en gris (y compris celles réservées à Coach+). */
.gallery-tile.is-locked { background: color-mix(in srgb, var(--color-text) 14%, var(--color-card)); }
.gallery-tile.is-locked img {
  filter: grayscale(1) contrast(0.85) brightness(1.05);
  opacity: 0.4;
}
/* Intensités Coach+ : cadenas + image floutée, pour garder la surprise. */
.gallery-tile.is-plus-only img {
  filter: grayscale(1) blur(9px);
  transform: scale(1.25);
  opacity: 0.55;
}

.gallery-lock {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 12, 0.25);
}

.gallery-lock svg {
  width: 16px;
  height: 16px;
  stroke: rgba(255, 255, 255, 0.85);
}

.gallery-tile-tier {
  position: absolute;
  bottom: 2px;
  right: 4px;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* --------------------------------------------------------------------------
   Modale "Mettre à jour mon profil" (mise à jour du passif)
   -------------------------------------------------------------------------- */
.history-modal {
  position: fixed;
  /* Centrage par marges auto (et non translate(-50%)) : sur une largeur
     impaire, le -50% tombait sur un demi-pixel et tout le texte de la modale
     était rendu flou ("on dirait une image en faible qualité"). */
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 0;
  transform: translateY(100%);
  z-index: 701;
  background: var(--color-bg);
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -10px 40px rgba(10, 10, 12, 0.25);
  width: 100%;
  max-width: 520px;
  padding: var(--space-5);
  padding-bottom: max(var(--space-5), env(safe-area-inset-bottom, 0px));
  max-height: 92dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  transition: transform 0.45s var(--ease-out);
}

.history-modal.is-open {
  transform: translateY(0);
}

/* Vibration d'erreur (ex. trop peu de jours cochés) — reste centrée */
@keyframes shakeModal {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}

.history-modal.shake-modal { animation: shakeModal 0.4s ease-in-out; }

/* Rappel quand on tente de quitter un formulaire sans l'enregistrer */
.sheet-guard-hint {
  margin: -4px 0 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--color-reward-tint);
  color: var(--color-reward);
  font-size: 13px;
  font-weight: 700;
  animation: fade-up 0.25s var(--ease-out);
}

/* Poignée visuelle en haut des feuilles */
.history-modal::before {
  content: "";
  display: block;
  width: 38px;
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--color-hairline-strong);
  margin: -8px auto var(--space-3);
}

/* Bouton fermer des modales (n'avait aucun style : l'icône SVG sans taille
   prenait des dimensions imprévisibles selon le navigateur) — même rendu que
   le bouton fermer de la galerie. */
.coach-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.15s var(--ease-spring);
}

.coach-close:active { transform: scale(0.9); }
.coach-close svg { width: 16px; height: 16px; stroke: var(--color-black); }

.history-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.history-modal-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
}

.history-modal-hint {
  font-size: 12.5px;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-bottom: var(--space-4);
}

#historyNoteInput {
  margin-bottom: var(--space-4);
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 420px) {
  .coach-avatar-stage { height: min(340px, 36dvh); }
  .history-modal { padding: var(--space-4); padding-bottom: max(var(--space-4), env(safe-area-inset-bottom, 0px)); }
  .gallery-overlay { padding: var(--space-2); }
  .gallery-body, .gallery-header { padding: var(--space-4); }
}

/* --------------------------------------------------------------------------
   Portrait du coach : image entière (jamais coupée), sur un fond flouté
   aux couleurs de l'image + halo de projecteur
   -------------------------------------------------------------------------- */
.coach-avatar-stage { background: #0c0c12; isolation: isolate; }
.coach-avatar-stage::before {
  content: ""; position: absolute; inset: -30px; z-index: 0;
  background: var(--coach-bg, none) center / cover no-repeat;
  filter: blur(30px) brightness(0.5) saturate(1.3);
}
.coach-avatar-stage::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(55% 60% at 50% 42%, rgba(255, 255, 255, 0.12), transparent 70%);
}
.coach-avatar-stage img {
  z-index: 1;
  object-fit: contain;
  object-position: center 40%;
  padding: 44px 24px 64px;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.55));
}
.coach-avatar-stage img.is-active { animation: coach-breathe 5s ease-in-out infinite; }
@keyframes coach-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
/* Coach fermé : ses animations en boucle s'arrêtent (rien n'est visible) et reprennent à l'ouverture. */
.coach-panel:not(.is-open) .coach-avatar-stage img,
.coach-panel:not(.is-open) .coach-status-dot,
.coach-panel:not(.is-open) .coach-status-dot::before,
.coach-panel:not(.is-open) .coach-quota-track i::before,
.coach-panel:not(.is-open) .coach-quota-track i::after,
.coach-panel:not(.is-open) .msg-typing span { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .coach-avatar-stage img.is-active { animation: none; } }

/* Bouton micro (dictée vocale) */
.coach-mic-btn {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-coach-tint); color: var(--color-coach);
  transition: transform 0.15s var(--ease-spring), background 0.2s, color 0.2s;
}
.coach-mic-btn svg { width: 19px; height: 19px; }
.coach-mic-btn:active { transform: scale(0.92); }
.coach-mic-btn.is-listening { background: #e5484d; color: #fff; animation: mic-pulse 1.2s ease-out infinite; }
@keyframes mic-pulse { 0% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0.55); } 100% { box-shadow: 0 0 0 12px rgba(229, 72, 77, 0); } }

/* Mode créateur (compte développeur) : bouton doré, zone d'écriture dorée, message signé « Créateur ». */
.coach-creator-btn {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 196, 0, 0.14); color: #c99a00;
  transition: transform 0.15s var(--ease-spring), background 0.2s, color 0.2s, box-shadow 0.2s;
}
.coach-creator-btn svg { width: 18px; height: 18px; }
.coach-creator-btn:active { transform: scale(0.92); }
.coach-creator-btn.is-on { background: linear-gradient(135deg, #ffe27a, #e0a400); color: #1a1300; box-shadow: 0 0 0 3px rgba(255, 196, 0, 0.3), 0 0 16px rgba(255, 196, 0, 0.45); }
.coach-panel.is-creator .coach-composer .coach-input-bar,
.coach-panel.is-creator .coach-composer .coach-input-bar:focus-within {
  border-color: #e0a400;
  box-shadow: 0 0 0 4px rgba(255, 196, 0, 0.22), 0 0 22px rgba(255, 196, 0, 0.25);
  background: linear-gradient(180deg, rgba(255, 214, 10, 0.08), var(--color-card));
}
.msg-row.is-creator .msg-bubble {
  background: linear-gradient(135deg, #3a2c00, #6b5000);
  color: #fff6d6;
  box-shadow: 0 0 0 1px rgba(255, 214, 10, 0.55), 0 4px 16px rgba(255, 196, 0, 0.25);
}
.msg-creator-tag { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; color: #ffd84a; margin-bottom: 3px; text-transform: uppercase; }

/* Barre des messages du jour (panneau du coach) */
.coach-quota {
  display: block; width: calc(100% - 2 * var(--space-4)); margin: 0 var(--space-4) 8px; padding: 0; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer;
}
.coach-quota-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.coach-quota-plan {
  padding: 2px 8px; border-radius: 999px; font: 800 10.5px/1.4 system-ui, sans-serif; letter-spacing: 0.04em;
  background: var(--color-card-alt); color: var(--color-text-secondary);
}
.coach-quota.is-plus .coach-quota-plan { background: linear-gradient(135deg, #f5c542, #ff8a3d); color: #2a1a06; }
.coach-quota-label { font-size: 11.5px; font-weight: 700; color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }
.coach-quota-label b { font-size: 13px; font-weight: 800; color: var(--color-text); margin-right: 3px; }
.coach-quota-track { position: relative; display: block; height: 10px; border-radius: 999px; background: var(--color-card-alt); overflow: hidden; }
.coach-quota-track i {
  position: relative; display: block; height: 100%; width: 0; border-radius: inherit; overflow: hidden;
  background: linear-gradient(90deg, var(--color-coach), #b18cff);
  transition: width 0.9s cubic-bezier(0.34, 1.4, 0.64, 1), background 0.4s;
}
/* Vagues douces qui ondulent dans le remplissage (deux couches à des vitesses différentes). */
.coach-quota-track i::before,
.coach-quota-track i::after {
  content: ""; position: absolute; inset: -2px 0 -2px -40px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='14' viewBox='0 0 40 14'%3E%3Cpath d='M0 7 Q10 1 20 7 T40 7 V14 H0Z' fill='white'/%3E%3C/svg%3E") repeat-x 0 50% / 40px 14px;
  opacity: 0.22; animation: quota-wave 2.8s linear infinite;
}
.coach-quota-track i::after { opacity: 0.14; background-position: 20px 30%; animation-duration: 4.6s; animation-direction: reverse; }
@keyframes quota-wave { to { transform: translateX(40px); } }
.coach-quota.is-plus .coach-quota-track i { background: linear-gradient(90deg, #f5c542, #ff8a3d); }
.coach-quota.is-mid .coach-quota-track i { background: linear-gradient(90deg, #ff9a3d, #ff6a2b); }
.coach-quota.is-high .coach-quota-track i { background: linear-gradient(90deg, #ff5a4d, #d70015); }
.coach-quota.is-bump .coach-quota-track { animation: quota-bump 0.6s ease; }
@keyframes quota-bump { 0% { transform: scaleY(1); } 35% { transform: scaleY(1.9); box-shadow: 0 0 10px rgba(154, 143, 255, 0.55); } 100% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .coach-quota-track i { transition: none; } .coach-quota-track i::before, .coach-quota-track i::after { animation: none; } .coach-quota.is-bump .coach-quota-track { animation: none; } }

/* Vidéo envoyée au coach */
.msg-video { display: block; max-height: 260px; background: #000; }
.coach-attachment video { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: #000; }

/* Accord : ce que le coach peut voir */
.coach-access-card {
  width: 100%; max-width: 360px; padding: 16px; border-radius: var(--radius-md);
  background: var(--color-card); box-shadow: var(--shadow-card), inset 0 0 0 1px var(--color-hairline);
  animation: access-in 0.35s var(--ease-spring, ease) both;
}
.msg-row.is-leaving .coach-access-card { animation: access-out 0.26s ease both; }
@keyframes access-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
@keyframes access-out { to { opacity: 0; transform: translateY(-6px) scale(0.98); } }
.coach-access-title { font-weight: 800; font-size: 15px; margin-bottom: 6px; }
.coach-access-card p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--color-text-secondary); }
.coach-access-opt {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 8px; border-radius: 12px;
  background: var(--color-card-alt); cursor: pointer;
}
.coach-access-opt input { width: 20px; height: 20px; accent-color: var(--color-coach); flex-shrink: 0; }
.coach-access-opt span { display: flex; flex-direction: column; font-size: 14px; }
.coach-access-opt small { font-size: 12px; color: var(--color-text-tertiary); }
.coach-access-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.coach-access-actions .btn { width: auto; padding: 10px 18px; }

/* Dictée vocale : bande d'onde au-dessus de la zone de saisie */
.coach-voice-band {
  display: flex; align-items: center; gap: 10px;
  margin: 0 var(--space-4) 8px; padding: 8px 8px 8px 14px; border-radius: 999px;
  background: var(--color-coach-tint); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--color-coach) 35%, transparent);
  animation: voice-in 0.28s var(--ease-spring, ease) both;
}
.coach-voice-band.is-leaving { animation: voice-out 0.2s ease both; }
@keyframes voice-in { from { opacity: 0; transform: translateY(8px) scaleY(0.6); } }
@keyframes voice-out { to { opacity: 0; transform: translateY(6px) scaleY(0.7); } }
.voice-rec-dot { width: 9px; height: 9px; border-radius: 50%; background: #e5484d; flex-shrink: 0; animation: rec-blink 1.2s ease-in-out infinite; }
@keyframes rec-blink { 50% { opacity: 0.35; } }
.voice-timer { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--color-coach); min-width: 34px; }
/* width:0 + contain : la taille interne du dessin ne doit JAMAIS élargir la mise en page
   (sinon, sur un écran à 125 %, la bande grandissait à chaque image et repoussait tout le panneau). */
.voice-wave { flex: 1 1 0; width: 0; height: 34px; min-width: 0; contain: size; }
.voice-done { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--color-coach); color: #fff; }
.voice-done svg { width: 18px; height: 18px; }
.coach-panel.is-dictating .coach-textarea { border-color: var(--color-coach); }
@media (prefers-reduced-motion: reduce) { .voice-rec-dot, .coach-voice-band { animation: none; } }