/* ============================================================================
   DEMO · followup · estilos especificos (2.2 AI Implementation, especialidad
   Systems). Nota del lead con foto, telefono central con la
   conversacion, tarjeta flotante con la escalera de contactos + calendario
   que voltea, y el mini telefono de noche del dueno. Prefijo .demo--followup.
   R4 · C15: azul iMessage, EXCEPCION FIRMADA POR CESAR SOLO PARA ESTA ESCENA.
   Las variables --fu-blue* viven aqui con prefijo propio; no son tokens de la
   casa y ninguna otra hoja debe usarlas.
   ========================================================================== */

.demo--followup {
  --fu-blue: #0a6fe8;        /* burbuja saliente y chrome fuerte (blanco AA 4.7:1) */
  --fu-blue-bright: #0a84ff; /* azul iOS puro: avatar y acentos chicos */
  --fu-blue-ink: #0b5ec6;    /* texto mono chico sobre superficies claras (AA) */
}

.demo--followup .demo__cluster {
  width: min(30rem, 100%);
  padding: 1.8rem 3.6rem 1.9rem;
}

/* placeholder de foto: azul tenue mientras carga (nunca se ve roto) */
/* r10 (Cesar): el azul es SOLO de los globos de mensajería y del chrome de
   esa conversación (avatar, sello de entregado, puntitos de escritura). Todo
   lo que vive FUERA del hilo vuelve al teal de la Specialty 02, que es el
   grupo al que pertenece este slide. */
.demo--followup .dm-photo { background: color-mix(in srgb, var(--teal) 16%, var(--paper)); }

/* ---- iMessage chrome (C15) ------------------------------------------------------ */
/* el mark de Summit Roofing dentro de la bolita azul */
.demo--followup .dm-avatar--summit svg {
  width: 17px;
  height: 17px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* sello de fecha centrado, como abre toda conversacion de iMessage */
.demo--followup .fu-stamp {
  align-self: center;
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.42);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.demo--followup .fu-stamp.is-on { opacity: 1; transform: none; }

/* "Delivered" bajo la burbuja enviada: la firma del iPhone */
.demo--followup .fu-delivered {
  align-self: flex-end;
  margin-top: -0.25rem;
  padding-right: 0.2rem;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.45);
  opacity: 0;
  transition: opacity 0.35s var(--ease-out);
}
.demo--followup .fu-delivered.is-on { opacity: 1; }

/* el typing es el CLIENTE escribiendo: gris iMessage, lado izquierdo */
.demo--followup .dm-typing {
  align-self: flex-start;
  background: #2c2c2a;
}

/* ---- nota: el lead entrante ---------------------------------------------------- */
.demo--followup .fu-lead {
  position: absolute;
  top: 0.1rem;
  right: -1.3rem;
  z-index: 2;
  max-width: 12.5rem;
  background: var(--paper-raised);
  color: var(--ink);
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
  border-radius: 14px;
  box-shadow: var(--shadow-lift);
  padding: 0.6rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  opacity: 0;
  transform: translateY(10px) scale(0.94);
  transition: opacity 0.32s var(--ease-out), transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.demo--followup .fu-lead.is-on { opacity: 1; transform: none; }
.demo--followup .fu-lead__copy { display: grid; line-height: 1.3; min-width: 0; }
.demo--followup .fu-lead__copy b { font-size: 0.78rem; font-weight: 640; }
.demo--followup .fu-lead__copy small {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.03em;
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- nota: escalera de contactos + calendario ----------------------------------
   r3 fix V-03: la escalera vive en el aire de la izquierda y solo solapa el
   BISEL del telefono; nunca vuelve a tapar el texto de las burbujas. */
.demo--followup .fu-card {
  position: absolute;
  bottom: 4.4rem;
  left: -6rem;
  z-index: 2;
  width: 12.5rem;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-lift);
  padding: 0.65rem 0.7rem 0.75rem;
  display: grid;
  gap: 0.6rem;
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  transition: opacity 0.32s var(--ease-out), transform 0.42s var(--ease-scene);
}
.demo--followup .fu-card.is-on { opacity: 1; transform: none; }

.demo--followup .fu-steps { display: grid; gap: 0.32rem; }
.demo--followup .fu-step {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s var(--ease-out), transform 0.35s var(--ease-scene);
}
.demo--followup .fu-step.is-on { opacity: 1; transform: none; }
.demo--followup .fu-step b {
  font-size: 0.66rem;
  font-weight: 560;
  color: var(--ink-soft);
}
.demo--followup .fu-step__check {
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--teal) 14%, transparent);
  color: var(--teal);
  display: grid;
  place-items: center;
}
.demo--followup .fu-step__check svg {
  width: 9px;
  height: 9px;
  overflow: visible;
}
.demo--followup .fu-step__check path {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.5s var(--ease-out);
}
.demo--followup .fu-step.is-on .fu-step__check path { stroke-dashoffset: 0; }

/* tarjeta de calendario: voltea de "Pick a time" a "Booked" */
.demo--followup .fu-cal {
  position: relative;
  height: 3rem;
  perspective: 900px;
  opacity: 0;
  transform: translateY(8px) scale(0.95);
  transition: opacity 0.32s var(--ease-out), transform 0.4s var(--ease-scene);
}
.demo--followup .fu-cal.is-on { opacity: 1; transform: none; }
.demo--followup .fu-cal__inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.6s var(--ease-scene);
}
.demo--followup .fu-cal.is-flipped .fu-cal__inner { transform: rotateX(180deg); }
.demo--followup .fu-cal__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 10px;
  background: var(--mist);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.6rem;
}
.demo--followup .fu-cal__face svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: var(--teal);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.demo--followup .fu-cal__face--front span {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}
.demo--followup .fu-cal__face--back {
  transform: rotateX(180deg);
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.04rem;
}
.demo--followup .fu-cal__face--back b { font-size: 0.72rem; font-weight: 640; color: var(--ink); }
.demo--followup .fu-cal__face--back small {
  font-family: var(--font-mono);
  font-size: 0.54rem;
  color: var(--teal-deep);
}

/* ---- mini telefono del dueno, modo noche ---------------------------------------- */
.demo--followup .fu-phone {
  position: absolute;
  bottom: -0.6rem;
  right: -1.4rem;
  z-index: 2;
  width: 8.75rem; /* r4 QA: "1 new appointment" completo, sin ellipsis */
  aspect-ratio: 9 / 15;
  background: #0d0d0c;
  border-radius: 18px;
  padding: 0.6rem 0.4rem;
  box-shadow: 0 20px 44px rgba(17, 17, 16, 0.3);
  opacity: 0;
  transform: translateY(12px) scale(0.94);
  transition: opacity 0.4s var(--ease-out), transform 0.48s var(--ease-scene);
}
.demo--followup .fu-phone.is-on { opacity: 1; transform: none; }
.demo--followup .fu-phone__screen {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.3rem;
}
.demo--followup .fu-phone__clock {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.55);
}
.demo--followup .fu-phone__notif {
  width: 100%;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 9px;
  padding: 0.35rem 0.45rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(-8px) scale(0.9);
  transition: opacity 0.3s var(--ease-out), transform 0.36s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.demo--followup .fu-phone__notif.is-on { opacity: 1; transform: none; }
.demo--followup .fu-phone__notif-icon {
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--teal) 14%, transparent);
  color: var(--teal);
  display: grid;
  place-items: center;
}
.demo--followup .fu-phone__notif-icon svg {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.demo--followup .fu-phone__notif-copy { display: grid; line-height: 1.2; min-width: 0; }
.demo--followup .fu-phone__notif-copy b {
  font-size: 0.54rem;
  font-weight: 640;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.demo--followup .fu-phone__notif-copy small {
  font-family: var(--font-mono);
  font-size: 0.44rem;
  color: var(--ink-faint);
}

@media (max-width: 720px) {
  .demo--followup .demo__cluster { padding: 1.2rem 0.7rem 1.6rem; }
  .demo--followup .fu-lead { top: -0.3rem; right: -0.2rem; max-width: 11.2rem; }
  .demo--followup .fu-lead__copy small { font-size: 0.52rem; }
  .demo--followup .fu-card { bottom: auto; top: 5.4rem; left: -0.2rem; width: 10.2rem; }
  .demo--followup .fu-phone { bottom: -1rem; right: -0.2rem; width: 8rem; }
  .demo--followup .fu-phone__notif-copy b { font-size: 0.5rem; }
}