/* ============================================================
   ZenBudget — Coach IA v2 : styles
   ============================================================ */

/* Bouton flottant */
#coach-toggle {
  position: fixed;
  bottom: 90px; /* au-dessus des éventuels autres boutons flottants */
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: #10B981;
  color: #fff;
  font-size: 1.5em;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  z-index: 9998;
  transition: transform .15s ease;
}
#coach-toggle:hover { transform: scale(1.08); }

/* Panneau */
#coach-panel {
  position: fixed;
  bottom: 90px;
  right: 20px;
  width: 370px;
  max-width: calc(100vw - 24px);
  height: 520px;
  max-height: calc(100vh - 120px);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,.3);
  display: none;
  flex-direction: column;
  overflow: hidden;
  z-index: 9999;
}
#coach-panel.coach-ouvert { display: flex; }

/* En-tête */
#coach-header {
  background: #10B981;
  color: #fff;
  padding: 12px 16px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#coach-header button {
  background: none;
  border: none;
  color: #fff;
  font-size: 1em;
  cursor: pointer;
  margin-left: 8px;
  opacity: .85;
}
#coach-header button:hover { opacity: 1; }

/* Zone messages */
#coach-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #f7f8fa;
}
.coach-msg {
  max-width: 85%;
  padding: 10px 13px;
  border-radius: 14px;
  font-size: .93em;
  line-height: 1.4;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.coach-msg-user {
  align-self: flex-end;
  background: #10B981;
  color: #fff;
  border-bottom-right-radius: 4px;
}
.coach-msg-bot {
  align-self: flex-start;
  background: #fff;
  color: #222;
  border: 1px solid #e5e7eb;
  border-bottom-left-radius: 4px;
}

/* Indicateur "en train d'écrire" */
#coach-typing {
  display: none;
  padding: 6px 16px;
  gap: 4px;
}
#coach-typing.actif { display: flex; }
#coach-typing span {
  width: 7px;
  height: 7px;
  background: #9ca3af;
  border-radius: 50%;
  animation: coachTyping 1.2s infinite ease-in-out;
}
#coach-typing span:nth-child(2) { animation-delay: .15s; }
#coach-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes coachTyping {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30% { transform: translateY(-5px); opacity: 1; }
}

/* Boutons rapides */
#coach-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px;
  background: #f7f8fa;
  border-top: 1px solid #e5e7eb;
}
.coach-quick-btn {
  border: 1px solid #d1d5db;
  background: #fff;
  border-radius: 20px;
  padding: 5px 11px;
  font-size: .78em;
  cursor: pointer;
  transition: background .15s;
}
.coach-quick-btn:hover { background: #ecfdf5; border-color: #10B981; }

/* Saisie */
#coach-input-group {
  display: flex;
  padding: 10px 12px;
  gap: 8px;
  background: #fff;
  border-top: 1px solid #e5e7eb;
}
#coach-input {
  flex: 1;
  border: 1px solid #d1d5db;
  border-radius: 22px;
  padding: 9px 14px;
  font-size: .93em;
  outline: none;
}
#coach-input:focus { border-color: #10B981; }
#coach-send {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: #10B981;
  color: #fff;
  font-size: 1.1em;
  cursor: pointer;
}
#coach-send:disabled { background: #9ca3af; cursor: default; }

/* Mobile : chat intégré en permanence, coins arrondis comme les .card
   (ID doublé pour battre le patch 2026-07-12c de style.css) */
@media (max-width: 600px) {
  html body #coach-toggle#coach-toggle {
    display: none !important;
  }
  html body #coach-panel#coach-panel {
    display: flex !important;
    position: static !important;
   width: calc(100% - 12px) !important;
    max-width: calc(100% - 12px) !important;
    height: 70vh !important;
    max-height: 70vh !important;
    margin: 0 auto 90px auto !important;
    padding: 0 !important;
    border-radius: 15px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.2) !important;
  }
  html body #coach-panel#coach-panel #coach-close {
    display: none !important;
  }
  html body #coach-panel#coach-panel #coach-header {
    padding: 7px 14px !important;
    font-size: 0.95em !important;
  }
}

/* ============================================================
   Anti-conflits avec le CSS global de l'app
   (aucun changement visuel sur PC)
   ============================================================ */
#coach-panel #coach-header {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 12px 16px !important;
  min-height: 0 !important;
  height: auto !important;
}
#coach-panel #coach-header > div {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
}
#coach-panel #coach-header button {
  width: auto !important;
  height: auto !important;
  padding: 4px 8px !important;
  margin: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: 1em !important;
  position: static !important;
  box-shadow: none !important;
}
#coach-panel .coach-quick-btn {
  width: auto !important;
  flex: 0 1 auto !important;
  display: inline-block !important;
  padding: 5px 11px !important;
  margin: 0 !important;
  background: #fff !important;
  color: #222 !important;
  border: 1px solid #d1d5db !important;
  border-radius: 20px !important;
  font-size: 0.78em !important;
  font-weight: normal !important;
  box-shadow: none !important;
}
#coach-panel #coach-send {
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 42px !important;
}
#coach-panel .coach-msg-bot {
  background: #fff !important;
  color: #222 !important;
}
#coach-panel .coach-msg-user {
  background: #10B981 !important;
  color: #fff !important;
}
#coach-panel #coach-input {
  background: #fff !important;
  color: #222 !important;
}