/* Burbujas de diálogo de la nube (copiado de la extensión) */
:root { --ease: cubic-bezier(.22, 1, .36, 1); --border: var(--line); }
.cloud-bubble { position: relative; margin: 10px auto 8px; padding: 10px 14px; max-width: 320px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 6px 18px rgba(124, 58, 237, .12); }
.cloud-bubble::before { content: ""; position: absolute; top: -6px; left: 50%; width: 10px; height: 10px; margin-left: -5px; transform: rotate(45deg); background: var(--surface); border-left: 1px solid var(--border); border-top: 1px solid var(--border); border-top-left-radius: 3px; }
.hero .cloud-bubble h1 { font-size: 16px; margin: 0; line-height: 1.35; }
.hero .cloud-bubble .greet-sub { margin: 4px auto 0; max-width: none; min-height: 1.3em; }
.bubble-line.swap-out { opacity: 0; transform: translateY(-6px); transition: opacity .16s ease, transform .16s ease; }
.bubble-line.swap-in { animation: bubble-in .45s var(--ease) both; }
.cloud-bubble.mini { position: absolute; z-index: 12; top: 52px; left: 12px; width: fit-content; max-width: calc(100% - 24px); margin: 0; padding: 7px 12px; font-size: 12px; line-height: 1.35; visibility: hidden; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .3s var(--ease), transform .35s var(--ease), visibility 0s linear .35s; }
.cloud-bubble.mini::before { left: 20px; margin-left: 0; }
.cloud-bubble.mini.show { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.app:not(.has-chat) .cloud-bubble.mini { display: none; }

@keyframes bubble-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* ---- Efectos de habla de la nube: cada frase entra con uno distinto (ui/speech-bubble.js elige fx-*) ---- */
.bubble-line.swap-in.fx-pop    { animation: fx-pop .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.bubble-line.swap-in.fx-float  { animation: fx-float .7s var(--ease) both; }
.bubble-line.swap-in.fx-pulse  { animation: fx-pulse .65s ease-out both; }
.bubble-line.swap-in.fx-slide  { animation: fx-slide .5s var(--ease) both; }
.bubble-line.swap-in.fx-blur   { animation: fx-blur .6s ease-out both; }
.bubble-line.swap-in.fx-bounce { animation: fx-bounce .75s var(--ease) both; }
.bubble-line.swap-in.fx-swing  { animation: fx-swing .7s ease-out both; transform-origin: top center; }
.bubble-line.swap-in.fx-zoom   { animation: fx-zoom .55s var(--ease) both; }
.bubble-line.swap-in.fx-wave   { animation: fx-wave .8s ease-out both; }
.bubble-line.swap-in.fx-flip   { animation: fx-flip .6s var(--ease) both; transform-origin: center bottom; }
@keyframes fx-pop    { 0% { opacity: 0; transform: scale(.6); } 100% { opacity: 1; transform: none; } }
@keyframes fx-float  { 0% { opacity: 0; transform: translateY(14px); } 60% { opacity: 1; transform: translateY(-3px); } 100% { transform: none; } }
@keyframes fx-pulse  { 0% { opacity: 0; transform: scale(.94); text-shadow: 0 0 0 transparent; } 45% { opacity: 1; transform: scale(1.05); text-shadow: 0 0 14px rgba(167, 139, 250, .8); } 100% { transform: none; text-shadow: none; } }
@keyframes fx-slide  { 0% { opacity: 0; transform: translateX(-22px); } 100% { opacity: 1; transform: none; } }
@keyframes fx-blur   { 0% { opacity: 0; filter: blur(8px); letter-spacing: .12em; } 100% { opacity: 1; filter: none; letter-spacing: normal; } }
@keyframes fx-bounce { 0% { opacity: 0; transform: translateY(-16px); } 45% { opacity: 1; transform: translateY(4px); } 70% { transform: translateY(-3px); } 100% { transform: none; } }
@keyframes fx-swing  { 0% { opacity: 0; transform: rotate(-7deg); } 40% { opacity: 1; transform: rotate(4deg); } 70% { transform: rotate(-2deg); } 100% { transform: none; } }
@keyframes fx-zoom   { 0% { opacity: 0; transform: scale(1.35); filter: blur(3px); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes fx-wave   { 0% { opacity: 0; transform: translateY(8px) skewX(-8deg); } 35% { opacity: 1; transform: translateY(-4px) skewX(5deg); } 65% { transform: translateY(2px) skewX(-2deg); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .bubble-line.swap-in { animation: none !important; } }
@keyframes fx-flip   { 0% { opacity: 0; transform: perspective(300px) rotateX(75deg); } 100% { opacity: 1; transform: none; } }
:root { --accent-secondary: var(--accent2); }