/* ==========================================================================
   Vincola — prototype de démo commerciale
   Styles custom en complément de Tailwind (CDN) : police de base, focus,
   navigation active, animations de bulles/typing/qualification, utilitaires.
   ========================================================================== */

html, body {
  height: 100%;
}

body {
  font-family: "Public Sans", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------------
   Focus clavier — anneau visible partout, jamais supprimé sans remplacement
   ------------------------------------------------------------------------ */

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid #0B7A6966; /* focus-ring, signal-700 à 40% d'opacité */
  outline-offset: 2px;
  border-radius: 4px;
}

/* ------------------------------------------------------------------------
   Sidebar — item de navigation (§4.9)
   ------------------------------------------------------------------------ */

.nav-item {
  position: relative;
  background: transparent;
}

.nav-item:hover {
  background-color: #1C2530; /* ink-800 */
}

.nav-item-active {
  background-color: #1C2530; /* ink-800 */
  color: #fff;
}

.nav-item-active span {
  color: #fff;
  opacity: 1 !important;
}

.nav-item-active svg {
  opacity: 1;
}

.nav-item-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 999px;
  background-color: #12B39C; /* signal-500 */
}

/* ------------------------------------------------------------------------
   Écran vedette — bulles de message
   ------------------------------------------------------------------------ */

.msg-in {
  animation: message-in 220ms ease-out;
}

@keyframes message-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Indicateur de frappe (§4.3) */

.typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background-color: #12B39C; /* signal-400/500 approx */
  display: inline-block;
  animation: typing-bounce 900ms ease-in-out infinite;
}

.typing-dot:nth-child(2) { animation-delay: 160ms; }
.typing-dot:nth-child(3) { animation-delay: 320ms; }

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

#typing-indicator {
  transition: opacity 150ms ease-out;
}

#typing-indicator.typing-out {
  opacity: 0;
}

/* ------------------------------------------------------------------------
   Fiche de qualification en direct (§4.5) — apparitions progressives
   ------------------------------------------------------------------------ */

.qual-fade-in {
  animation: qual-fade-in 220ms ease-out;
}

@keyframes qual-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.qual-field-in {
  animation: qual-fade-in 220ms ease-out;
}

/* ------------------------------------------------------------------------
   Toast (retours d'actions mockées)
   ------------------------------------------------------------------------ */

#toast {
  opacity: 0;
  transition: opacity 200ms ease-out, transform 200ms ease-out;
  transform: translate(-50%, 8px);
}

#toast.toast-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ------------------------------------------------------------------------
   Divers utilitaires
   ------------------------------------------------------------------------ */

.clamp-2-lines {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Scrollbar discrète pour les colonnes internes (fil, kanban, planning) */
#conv-messages::-webkit-scrollbar,
#conv-list-items::-webkit-scrollbar,
#qual-panel::-webkit-scrollbar,
#kanban-scroll::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

#conv-messages::-webkit-scrollbar-thumb,
#conv-list-items::-webkit-scrollbar-thumb,
#qual-panel::-webkit-scrollbar-thumb,
#kanban-scroll::-webkit-scrollbar-thumb {
  background-color: #D8DEE5; /* ink-200 */
  border-radius: 999px;
}

/* ------------------------------------------------------------------------
   Respect de prefers-reduced-motion : aucune animation, transitions courtes
   uniquement pour les changements d'état non narratifs (dropdowns, hover).
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .msg-in,
  .qual-fade-in,
  .qual-field-in,
  .typing-dot {
    animation: none !important;
  }

  #typing-indicator {
    display: none !important;
  }

  * {
    scroll-behavior: auto !important;
  }

  #toast,
  #qual-score-bar,
  .transition-colors,
  .transition-all {
    transition-duration: 1ms !important;
  }
}