/* closing-conversation.css — cierre conversacional (portado de ~/allbase-landing/landing-flow.css, solo la sección del cierre) */
/* ===================== SCENE 5 — cierre conversacional · liquid glass ===================== */
.close.close-final{width:min(620px,92vw);text-align:center;position:relative;overflow:visible}

/* ===== el INTERIOR DEL SISTEMA: vignette profundo (foco total en el núcleo) +
   glow base detrás del orbe (respaldo sin canvas). El bloom vivo y las partículas
   los dibuja cf-field.js encima. Full-bleed, centrado en la columna del cierre. ===== */
.cf-bg{position:absolute;left:50%;top:50%;width:152vw;height:150vh;transform:translate(-50%,-50%);
  z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 66% 64% at 50% 44%, transparent 40%, rgba(8,4,18,.46) 72%, rgba(3,1,8,.84) 100%)}
.cf-glow{display:none}   /* sin círculos violeta de fondo */
/* campo de energía vivo (cf-field.js): partículas que orbitan el núcleo + bloom del orbe */
.cf-field{position:absolute;left:50%;top:50%;width:128vw;height:124vh;transform:translate(-50%,-50%);
  z-index:1;pointer-events:none;mix-blend-mode:screen}

.cf-convo{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:22px}

/* título orientativo — jerarquía media, Sora con identidad de marca */
.cf-kicker{font-family:var(--font);font-size:clamp(15px,1.9vw,18px);font-weight:600;
  letter-spacing:.04em;color:var(--violet-2);
  text-shadow:0 0 18px rgba(168,85,247,.45),0 1px 2px rgba(20,6,40,.5)}

/* wrappers de coreografía (no pelean con flote ni hover) */
.cf-orb-wrap{display:block}
.cf-reply-wrap{width:100%}

/* estado base oculto + secuencia de entrada */
.cf-kicker,.cf-thread,.cf-reply-wrap,.cf-whisper{opacity:0}
.cf-convo.play .cf-kicker,
.cf-convo.play .cf-thread,
.cf-convo.play .cf-reply-wrap,
.cf-convo.play .cf-whisper{opacity:1}
/* orbe: entrada por TRANSICIÓN (la animación CSS no commiteaba por el backdrop-filter url del hijo);
   el estado final opacity:1 queda garantizado por regla, no por fill de keyframe */
.cf-orb-wrap{opacity:0;transform:translateY(34px) scale(.92);
  transition:opacity .85s ease,transform .9s cubic-bezier(.22,.61,.36,1)}
.cf-convo.play .cf-orb-wrap{opacity:1;transform:none;transition-delay:.15s}
@media (prefers-reduced-motion:reduce){.cf-orb-wrap{transition:none}}
@media (prefers-reduced-motion:no-preference){
  .cf-convo.play .cf-kicker{animation:cfSoftUp .7s cubic-bezier(.22,.61,.36,1) .05s both}
  .cf-convo.play .cf-reply-wrap{animation:cfDrop .75s cubic-bezier(.22,.61,.36,1) .85s both}
  .cf-convo.play .cf-thread{animation:cfSoft .9s ease 1.1s both}
  .cf-convo.play .cf-whisper{animation:cfSoft .7s ease 1.35s both}
}
@keyframes cfRise{from{opacity:0;transform:translateY(38px) scale(.9)}to{opacity:1;transform:none}}
@keyframes cfDrop{from{opacity:0;transform:translateY(-22px)}to{opacity:1;transform:none}}
@keyframes cfSoft{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes cfSoftUp{from{opacity:0;transform:translateY(-9px)}to{opacity:1;transform:none}}

/* LOGO = presencia de la IA · máxima jerarquía, esfera de vidrio 3D */
.cf-orb{width:122px;height:122px;border-radius:50%;display:grid;place-items:center;
  animation:cfFloat 5.5s ease-in-out infinite;
  box-shadow:
    0 0 56px rgba(168,85,247,.42),
    0 26px 50px rgba(0,0,0,.45),
    inset 0 3px 4px rgba(255,255,255,.55),
    inset 0 -16px 28px rgba(120,60,200,.30),
    inset 0 16px 26px rgba(255,255,255,.10)}
.cf-orb img{width:auto;height:60px;display:block;filter:drop-shadow(0 4px 14px rgba(0,0,0,.45));
  animation:cfBob 5.5s ease-in-out infinite}
@keyframes cfFloat{50%{transform:translateY(-9px)}}
@keyframes cfBob{50%{transform:translateY(-2px) scale(1.015)}}

/* ===== HILO DE CHAT — modo hero (1 pregunta protagonista) → modo conversación ===== */
.cf-thread{width:100%;display:flex;flex-direction:column;align-items:center;gap:13px}
.cf-msg{max-width:15ch;font-size:clamp(26px,4vw,40px);line-height:1.16;font-weight:700;
  letter-spacing:-.02em;color:#fff;text-wrap:balance;text-align:center;
  text-shadow:0 1px 2px rgba(20,6,40,.55),0 2px 30px rgba(0,0,0,.35);
  transition:max-width .45s ease,font-size .45s ease,padding .45s ease,background .45s ease,border-radius .45s ease}
.cf-q-typed{color:#fff;text-shadow:0 0 24px rgba(190,130,255,.22)}   /* blindado: blanco, no hereda negro */
.cf-q-rest{color:transparent;text-shadow:none}   /* fantasma: reserva el layout SIN proyectar silueta oscura */
/* cada letra entra con un fade suave → escritura fluida (sin "pop" desde el fantasma) */
.cf-ch{animation:cfChar .24s ease both}
@keyframes cfChar{from{opacity:0}to{opacity:1}}
.cf-cursor{display:inline-block;width:3px;height:.92em;margin-left:4px;border-radius:2px;
  background:var(--violet-2);transform:translateY(.10em);
  box-shadow:0 0 10px rgba(192,132,252,.8);animation:blink 1s steps(1) infinite}

/* modo conversación: burbujas, alineadas, scroll interno */
.cf-convo.chatting .cf-thread{align-items:stretch;gap:10px;max-height:42vh;overflow-y:auto;
  padding:2px 4px;scrollbar-width:thin;scrollbar-color:rgba(192,132,252,.4) transparent}
.cf-convo.chatting .cf-thread::-webkit-scrollbar{width:6px}
.cf-convo.chatting .cf-thread::-webkit-scrollbar-thumb{background:rgba(192,132,252,.4);border-radius:3px}
.cf-convo.chatting .cf-msg{max-width:82%;font-size:15.5px;font-weight:500;line-height:1.45;
  letter-spacing:-.005em;padding:12px 16px;border-radius:16px;text-align:left;text-wrap:pretty;text-shadow:none}
.cf-convo.chatting .cf-msg.ai{align-self:flex-start;border-bottom-left-radius:5px;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);color:#f3eefe}
.cf-convo.chatting .cf-msg.user{align-self:flex-end;border-bottom-right-radius:5px;color:#fff;
  background:linear-gradient(135deg,rgba(168,85,247,.92),rgba(190,50,194,.92));
  box-shadow:0 8px 22px rgba(120,40,180,.32)}
.cf-convo.chatting .cf-msg.ai .cf-cursor{height:1.05em;transform:translateY(.18em)}
/* entrada suave de cada mensaje nuevo (premium) — sin tocar el morph del hero (data-first) */
.cf-convo.chatting .cf-msg.user,
.cf-convo.chatting .cf-msg.thinking,
.cf-convo.chatting .cf-msg.ai:not([data-first]){animation:cfMsgIn .42s cubic-bezier(.22,.61,.36,1) both}
@keyframes cfMsgIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}

/* indicador de "pensando" */
.cf-msg.thinking{display:flex;gap:6px;align-items:center;padding:15px 18px}
.cf-msg.thinking .dot{width:7px;height:7px;border-radius:50%;background:var(--violet-2);opacity:.5;
  animation:cfDots 1.2s ease-in-out infinite}
.cf-msg.thinking .dot:nth-child(2){animation-delay:.18s}
.cf-msg.thinking .dot:nth-child(3){animation-delay:.36s}
@keyframes cfDots{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}

/* el orbe se achica al entrar en conversación */
.cf-orb{transition:width .5s cubic-bezier(.22,.61,.36,1),height .5s cubic-bezier(.22,.61,.36,1)}
.cf-convo.chatting .cf-orb{width:56px;height:56px}
.cf-convo.chatting .cf-orb img{height:27px}
.cf-convo.chatting .cf-kicker{display:none}

/* base liquid glass: la transparencia/refracción manda, no el brillo */
.lg{position:relative;isolation:isolate;
  background:rgba(255,255,255,.025);
  -webkit-backdrop-filter:blur(2px) saturate(2.1) brightness(1.05);
  backdrop-filter:blur(2px) saturate(2.1) brightness(1.05) url(#lg-distort);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 14px 44px rgba(0,0,0,.32),inset 0 1px 1px rgba(255,255,255,.35),inset 0 -10px 22px rgba(120,60,200,.10)}
.lg::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 40%);opacity:.5}
/* reflejo especular: filo de luz suave que viaja lento por la superficie */
.lg::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  mix-blend-mode:screen;opacity:.55;
  background:linear-gradient(118deg,transparent 42%,rgba(255,255,255,.16) 48%,rgba(255,255,255,.04) 52%,transparent 60%);
  background-size:220% 100%;background-repeat:no-repeat;
  animation:lgGlide 8.5s ease-in-out infinite}
.lg>*{position:relative;z-index:2}
@keyframes lgGlide{0%{background-position:135% 0}50%{background-position:-35% 0}100%{background-position:135% 0}}

/* el orbe = vidrio esférico: brillo superior que deriva + luz cáustica abajo */
.cf-orb{background:
  radial-gradient(58% 46% at 50% 116%,rgba(192,132,252,.55),rgba(192,132,252,0) 62%),
  rgba(255,255,255,.03)}
.cf-orb::before{opacity:.75;animation:cfDrift 6.5s ease-in-out infinite;
  background:radial-gradient(38% 30% at 33% 24%,rgba(255,255,255,.65),rgba(255,255,255,0) 62%)}
.cf-orb::after{opacity:.45;mix-blend-mode:screen;
  background:linear-gradient(125deg,transparent 44%,rgba(255,255,255,.2) 50%,transparent 57%);
  background-size:200% 100%;background-repeat:no-repeat;
  animation:lgGlide 7s ease-in-out infinite}
@keyframes cfDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(5%,4%)}}

/* el usuario responde — vidrio realzado (bisel + levante) */
/* input y botón = DOS elementos SEPARADOS (antes una sola píldora) */
.cf-reply{width:100%;display:flex;align-items:stretch;gap:12px;margin-top:2px;text-align:left}
/* el input es un UMBRAL de autoría: el momento en que tu negocio entra al agente.
   Tiene peso (no una píldora suelta) y al enfocar emite luz hacia el núcleo. */
.cf-input-field{flex:1;min-width:0;display:flex;align-items:center;border-radius:17px;padding:18px 22px;cursor:text;
  min-height:64px;
  box-shadow:0 18px 44px rgba(0,0,0,.40),inset 0 2px 2px rgba(255,255,255,.40),inset 0 -10px 24px rgba(120,60,200,.18);
  transition:border-color .25s,transform .25s,box-shadow .25s}
.cf-input-field:focus-within{border-color:rgba(200,150,255,.62);transform:translateY(-2px);
  box-shadow:
    0 -16px 40px -12px rgba(190,120,255,.45),   /* luz que SUBE hacia el orbe */
    0 24px 60px rgba(0,0,0,.46),
    0 0 0 1px rgba(190,120,255,.30),
    inset 0 2px 2px rgba(255,255,255,.58),inset 0 -10px 24px rgba(150,90,230,.26)}
.cf-input{flex:1;min-width:0;border:none;outline:none;background:transparent;
  font-family:var(--font);font-size:17px;line-height:1.45;color:#fff;padding:0;caret-color:var(--violet-2)}
.cf-input::placeholder{color:rgba(255,255,255,.5);text-overflow:ellipsis}

/* botón ENVIAR: separado, acento de marca + animación de envío */
.cf-send{flex:none;width:70px;min-height:64px;border-radius:16px;cursor:pointer;position:relative;overflow:hidden;
  display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,rgba(168,85,247,.96),rgba(190,50,194,.96));
  box-shadow:0 10px 26px rgba(120,40,180,.45),inset 0 2px 2px rgba(255,255,255,.5),inset 0 -6px 12px rgba(80,30,140,.35);
  transition:transform .18s,filter .18s,box-shadow .18s}
.cf-send:hover{transform:translateY(-2px) scale(1.04);filter:brightness(1.1);
  box-shadow:0 16px 34px rgba(120,40,180,.6),inset 0 2px 2px rgba(255,255,255,.7),inset 0 -6px 12px rgba(80,30,140,.4)}
.cf-send:active{transform:translateY(0) scale(.97)}
.cf-send-arrow{width:25px;height:25px;position:relative;z-index:3;filter:drop-shadow(0 1px 3px rgba(0,0,0,.45));will-change:transform}
.cf-send-fx{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;opacity:0;
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.62) 50%,transparent 66%)}
/* ENVÍO (absorción/barrido): la flecha empuja y sale en UNA dirección, un barrido de luz
   cruza el botón una vez y el botón absorbe con un squash sutil. Sin anillo, sin teleport, sin rebote. */
.cf-send.sending{pointer-events:none;animation:cfAbsorb .5s ease}
.cf-send.sending .cf-send-arrow{animation:cfSend .5s cubic-bezier(.4,0,.2,1)}
.cf-send.sending .cf-send-fx{animation:cfSweep .5s ease-out}
@keyframes cfSend{
  0%{transform:translateX(0);opacity:1}
  38%{transform:translateX(24px);opacity:0}
  39%{transform:translateX(-12px);opacity:0}   /* reset invisible: reaparece sin teleport visible */
  100%{transform:translateX(0);opacity:1}}
@keyframes cfSweep{
  0%{opacity:0;transform:translateX(-120%)}
  22%{opacity:.85}
  100%{opacity:0;transform:translateX(120%)}}
@keyframes cfAbsorb{
  0%,100%{transform:none;filter:brightness(1)}
  32%{transform:scale(.955);filter:brightness(1.14)}}
@media (prefers-reduced-motion:reduce){
  .cf-send.sending,.cf-send.sending .cf-send-arrow,.cf-send.sending .cf-send-fx{animation:none}}

/* CTA final — aparece al cerrar la conversación */
.cf-cta{width:100%;display:flex;justify-content:center}
.cf-cta[hidden]{display:none}
.cf-cta{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s cubic-bezier(.22,.61,.36,1)}
.cf-cta.show{opacity:1;transform:none}
.cf-create{display:inline-flex;align-items:center;gap:10px;cursor:pointer;color:#fff;
  font-family:var(--font);font-size:16px;font-weight:600;letter-spacing:-.01em;
  padding:15px 26px;border-radius:15px;
  background:linear-gradient(135deg,rgba(168,85,247,.95),rgba(190,50,194,.95));
  box-shadow:0 14px 34px rgba(120,40,180,.45),inset 0 2px 2px rgba(255,255,255,.5),inset 0 -6px 14px rgba(80,30,140,.35);
  transition:transform .18s,filter .18s,box-shadow .18s}
.cf-create svg{width:20px;height:20px}
.cf-create:hover{transform:translateY(-2px);filter:brightness(1.08);
  box-shadow:0 20px 46px rgba(120,40,180,.55),inset 0 2px 2px rgba(255,255,255,.65),inset 0 -6px 14px rgba(80,30,140,.4)}

.cf-whisper{display:flex;align-items:center;gap:9px;justify-content:center;font-size:13px;color:var(--muted);letter-spacing:.01em}
.cf-live{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(62,224,142,.16),0 0 10px rgba(62,224,142,.7)}
.cf-test-wrap{display:flex;justify-content:center;margin:14px 0 4px}
.cf-test-wrap[hidden]{display:none}
.cf-test-btn{
  border:1px dashed rgba(168,85,247,.48);
  background:rgba(168,85,247,.09);
  color:#e8deff;
  border-radius:999px;
  padding:8px 14px;
  font:600 12px/1 var(--font);
  letter-spacing:.01em;
  cursor:pointer;
  transition:transform .16s ease, filter .16s ease, border-color .16s ease;
}
.cf-test-btn:hover{transform:translateY(-1px);filter:brightness(1.08);border-color:rgba(201,149,255,.72)}

@media (max-width:560px){
  .cf-orb{width:98px;height:98px}
  .cf-orb img{height:48px}
  .cf-input-field{padding:17px 18px;min-height:62px}
  .cf-input{font-size:16px}
  .cf-send{width:66px;min-height:62px}
  .cf-convo.chatting .cf-msg{max-width:88%}
}

/* ===== el orbe ahora es un CANVAS VIVO (cf-orb.js): sin esfera de vidrio ni img ===== */
.cf-orb{background:none !important;border:0 !important;box-shadow:none !important;width:auto;height:auto;overflow:visible}
.cf-orb::before,.cf-orb::after{display:none !important}
.cf-orb canvas{filter:drop-shadow(0 0 26px rgba(168,85,247,.45))}
/* no achicar el orbe vivo al chatear (el canvas tiene tamaño fijo): queda como hero */
.cf-convo.chatting .cf-orb{width:auto;height:auto}

/* ===== landscape-mobile (apaisado, alto bajo): el orbe + pregunta + input tienen que
   entrar en ~390px de alto. Va al final para ganar por orden de fuente. ===== */
@media (orientation:landscape) and (max-height:540px){
  .close.close-final{width:min(680px,94vw)}
  .cf-convo{gap:6px}
  .cf-kicker{font-size:12px}
  .cf-convo.play .cf-orb-wrap{transform:scale(.52)}   /* achicar el orbe vivo (canvas px fijo) */
  .cf-orb-wrap{margin:-38px 0}                          /* compensar el hueco que deja el scale */
  .cf-msg{font-size:clamp(16px,2.4vw,22px);max-width:26ch;line-height:1.18}
  .cf-convo.chatting .cf-thread{max-height:30vh}
  .cf-input-field{padding:14px 16px;min-height:56px}
  .cf-input{font-size:15.5px}
  .cf-send{width:58px;min-height:56px}
  .cf-whisper{font-size:11px;gap:7px}
  .cf-test-btn{font-size:11px;padding:7px 12px}
}