/*
 * dock.css — Calzedonia Maroc · Encoche flottante (rail d'assistance)
 * Rail vertical ancré à droite (gauche en RTL), 2 agents : Conseiller IA + WhatsApp.
 * Présence premium : halo rose signature, pulse or (IA), point vert (WhatsApp).
 * Mobile : pill horizontale en bas, labels lisibles. Propriétés logiques — RTL natif.
 * z-index : dock(180) < méga-menu(200) < modales(300).
 */

.clz-dock {
  position: fixed;
  inset-block-start: 50%;             /* PAS inset-block (top+bottom → hauteur 0) */
  inset-inline-end: 0;
  transform: translateY(-50%);
  z-index: var(--z-dock);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.clz-dock__rail {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding-block: 0.5rem;
  background: var(--color-white);
  border-radius: 20px 0 0 20px;        /* arrondi côté intérieur */
  box-shadow: -6px 0 32px rgba(215, 31, 86, 0.12),   /* halo rose signature */
              -2px 0 8px rgba(0, 0, 0, 0.06);
  /* État au repos = visible. Entrée jouée en fill `backwards` (robuste). */
  animation: dock-enter-end 600ms cubic-bezier(0.34, 1.56, 0.64, 1) 800ms backwards;
}

@keyframes dock-enter-end {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ── Items ── */
.clz-dock__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  width: 5rem;
  padding-block: 1.25rem;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  color: var(--color-text-secondary);
  overflow: hidden;
  transition: color 180ms ease,
              background-color 180ms ease,
              transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Micro-animation : légère poussée vers l'intérieur au survol */
.clz-dock__item:hover {
  background: var(--color-neutral-50);
  transform: translateX(-3px);
}

[dir="rtl"] .clz-dock__item:hover {
  transform: translateX(3px);
}

/* Feedback press */
.clz-dock__item:active {
  transform: translateX(-1px) scale(0.97);
  transition-duration: 80ms;
}

/* Chat IA : rouge Calzedonia */
.clz-dock__item--chat:hover,
.clz-dock__item--chat.is-active {
  color: var(--color-primary);
  background: rgba(215, 31, 86, 0.06);
}

/* Barre d'état actif (chat ouvert) */
.clz-dock__item--chat.is-active::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block: 20%;
  width: 3px;
  background: var(--color-primary);
  border-radius: 0 3px 3px 0;
}

/* WhatsApp : vert officiel */
.clz-dock__item--whatsapp:hover {
  color: var(--whatsapp-color);
  background: rgba(37, 211, 102, 0.06);
}

.clz-dock__icon {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.clz-dock__icon svg {
  width: 100%;
  height: 100%;
}

/* Étincelle IA (cercle) du Conseiller — or chérifien, sans contour */
.clz-dock__item--chat .clz-dock__icon svg circle {
  fill: var(--color-accent-maroc);
  stroke: none;
}

.clz-dock__label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

/* ── Séparateur ── */
.clz-dock__sep {
  width: 2rem;
  height: 1px;
  margin-inline: auto;
  background: var(--color-neutral-100);
  flex-shrink: 0;
}

/* ── Pulse or : IA toujours disponible (animé) ── */
.clz-dock__pulse {
  position: absolute;
  inset-block-start: 0.85rem;
  inset-inline-end: 1rem;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--radius-full);
  background: var(--color-accent-maroc);
  border: 2px solid var(--color-white);
}

.clz-dock__pulse::before {
  content: '';
  position: absolute;
  inset: -0.2rem;
  border-radius: var(--radius-full);
  background: var(--color-accent-maroc);
  opacity: 0.5;
  animation: dock-pulse-ring 2.5s ease-out infinite;
}

@keyframes dock-pulse-ring {
  0%   { transform: scale(1);   opacity: 0.5; }
  60%  { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* ── Point vert WhatsApp : équipe disponible (fixe, non animé) ── */
.clz-dock__online {
  position: absolute;
  inset-block-start: 0.85rem;
  inset-inline-end: 1rem;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--radius-full);
  background: var(--whatsapp-color);
  border: 2px solid var(--color-white);
}

/* ── Tooltip (desktop hover/focus uniquement) ── */
.clz-dock__tooltip {
  position: absolute;
  inset-inline-end: calc(100% + 0.625rem);
  inset-block-start: 50%;
  transform: translateY(-50%);
  background: var(--color-neutral-900);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: var(--fw-regular);
  white-space: nowrap;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

/* Flèche du tooltip pointant vers le dock */
.clz-dock__tooltip::after {
  content: '';
  position: absolute;
  inset-inline-start: 100%;
  inset-block-start: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-inline-start-color: var(--color-neutral-900);
}

.clz-dock__item:hover .clz-dock__tooltip,
.clz-dock__item:focus-visible .clz-dock__tooltip {
  opacity: 1;
}

/* ── Le dock remplace l'ancien lanceur flottant du chatbot ── */
.clz-chatbot__trigger {
  display: none !important;
}

/* Le conteneur chatbot ne doit pas intercepter les clics quand fermé. */
.clz-chatbot {
  pointer-events: none;
}
.clz-chatbot.is-open {
  pointer-events: auto;
}

/* ── Mobile : pill horizontale en bas, lisible ── */
@media (max-width: 767px) {
  .clz-dock {
    inset-block: auto;
    inset-block-end: 1.5rem;
    inset-inline-end: 1rem;
    transform: none;
  }
  .clz-dock__rail {
    flex-direction: row;
    align-items: center;
    padding: 0;
    border-radius: 50px;               /* pill complète */
    box-shadow: 0 8px 32px rgba(215, 31, 86, 0.15),
                0 2px 8px rgba(0, 0, 0, 0.08);
    animation-name: dock-enter-bottom;
  }
  @keyframes dock-enter-bottom {
    from { transform: translateY(120%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }
  .clz-dock__item {
    width: auto;
    flex-direction: row;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
  }
  .clz-dock__icon {
    width: 1.75rem;
    height: 1.75rem;
  }
  .clz-dock__label {
    display: block;
    font-size: 0.75rem;
  }
  .clz-dock__tooltip { display: none; }   /* jamais en tactile */
  .clz-dock__sep {
    width: 1px;
    height: 2rem;
    align-self: center;
  }
  .clz-dock__pulse,
  .clz-dock__online {
    inset-block-start: 0.5rem;
    inset-inline-end: 0.85rem;
  }
  /* Pas de glissement latéral au tap sur mobile */
  .clz-dock__item:hover { transform: none; }
}

/* ── RTL : position via inset-inline-end (auto → gauche). Présentationnel basculé. ── */
[dir="rtl"] .clz-dock__rail {
  border-radius: 0 20px 20px 0;
  box-shadow: 6px 0 32px rgba(215, 31, 86, 0.12),
              2px 0 8px rgba(0, 0, 0, 0.06);
  animation-name: dock-enter-left;
}

@keyframes dock-enter-left {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

@media (max-width: 767px) {
  [dir="rtl"] .clz-dock__rail { animation-name: dock-enter-bottom; }
}

/* ── prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  .clz-dock__rail {
    animation: none;
    transform: none;
    opacity: 1;
  }
  .clz-dock__pulse::before { animation: none; }
  .clz-dock__item { transition: color 180ms ease, background-color 180ms ease; }
}