:root{
  --bg-space:#07090e;
  --bg-panel-solid:#151d2e;
  --bg-panel-surface:#1d273e;
  --bg-bubble-bot:#1e2840;
  --bg-bubble-user:linear-gradient(135deg,#4f46e5,#7c3aed);
  --border-panel:rgba(255,255,255,.16);
  --border-accent:rgba(99,102,241,.45);
  --text-main:#f8fafc;
  --text-secondary:#94a3b8;
  --text-muted:#64748b;
  --accent-cyan:#06b6d4;
  --accent-indigo:#6366f1;
  --accent-purple:#8b5cf6;
  --accent-emerald:#10b981;
  --accent-amber:#f59e0b;
  --accent-rose:#f43f5e;
  --glass-nav:rgba(13,17,27,.72);
  --glass-card:rgba(19,25,41,.65);
  --glass-border:rgba(255,255,255,.08);
  --radius-md:14px;
  --radius-lg:20px;
  --radius-xl:28px;
  --font-sans:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --font-display:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-mono:"Cascadia Mono",Consolas,"Courier New",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
/* El CSS de la casa no puede pisar el atributo hidden (un botón "Salir" que
   se ve sin sesión es una mentira visual). */
[hidden]{display:none!important}
body{
  background-color:var(--bg-space);color:var(--text-main);
  font-family:var(--font-sans);font-size:16px;line-height:1.55;
  min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
a{color:#a5b4fc}
.tenue{color:var(--text-muted);font-size:.86rem}

/* ── El cielo: lienzo 3D + nebulosa (del 4d6868b) ────────── */
#space-canvas{position:fixed;inset:0;z-index:0;pointer-events:none}
.nebula-glow{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(circle at 15% 15%, rgba(99,102,241,.12) 0%, transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(139,92,246,.10) 0%, transparent 50%),
    radial-gradient(circle at 50% 100%, rgba(6,182,212,.08) 0%, transparent 40%);
}
.app-container{
  position:relative;z-index:2;display:flex;flex-direction:column;
  min-height:100vh;max-width:1440px;margin:0 auto;padding:0 20px;
}

/* ── Barra superior de vidrio ────────────────────────────── */
header.top-bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:10px;padding:9px 18px;
  background:var(--glass-nav);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--glass-border);border-radius:var(--radius-lg);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand-text{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.brand-icon{
  width:34px;height:34px;flex:0 0 auto;border-radius:10px;
  background:linear-gradient(135deg,#4f46e5,#06b6d4);
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;
  box-shadow:0 0 20px rgba(99,102,241,.45);
}
.brand-text h1{
  font-family:var(--font-display);font-size:1.12rem;font-weight:700;letter-spacing:-.02em;
  background:linear-gradient(100deg,#ffffff 40%,#a5b4fc 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.brand-badge{
  font-family:var(--font-mono);font-size:.7rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  margin-top:0;padding:2px 8px;border-radius:6px;display:inline-flex;align-items:center;gap:6px;
  background:rgba(16,185,129,.15);border:1px solid rgba(16,185,129,.3);color:#34d399;
}
.brand-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:#10b981;box-shadow:0 0 8px #10b981;animation:latido 2s infinite ease-in-out}
.brand-badge.apagado{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.3);color:#fbbf24}
.brand-badge.apagado::before{background:var(--accent-amber);box-shadow:0 0 8px var(--accent-amber)}
@keyframes latido{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.55}}
.top-bar-derecha{display:flex;align-items:center;gap:10px;min-width:0}
.quien{font-size:.82rem;color:var(--text-secondary);max-width:32vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ── Rejilla principal ───────────────────────────────────── */
main.studio-grid{display:grid;grid-template-columns:2.2fr .8fr;gap:24px;margin:12px 0 16px;flex:1}
.chat-section{
  display:flex;flex-direction:column;min-width:0;
  background:var(--bg-panel-solid);
  border:1px solid var(--border-panel);border-radius:var(--radius-xl);
  box-shadow:0 24px 50px rgba(0,0,0,.7),0 0 0 1px rgba(99,102,241,.25);
  overflow:hidden;height:calc(100vh - 132px);height:calc(100dvh - 132px);min-height:740px;
}
.chat-header{padding:11px 20px;background:var(--bg-panel-surface);border-bottom:1px solid var(--border-panel);display:flex;align-items:center;justify-content:space-between;gap:12px}
.chat-header-title{display:flex;align-items:center;gap:12px;min-width:0}
.bot-status-icon{width:38px;height:38px;flex:0 0 auto;border-radius:10px;background:linear-gradient(135deg,#6366f1,#8b5cf6);display:flex;align-items:center;justify-content:center;font-size:1.15rem}
.chat-header-title h2{font-family:var(--font-display);font-size:1.05rem;font-weight:700}
.chat-header-title p{font-size:.8rem;color:var(--text-secondary)}
.chat-mode-pill{font-family:var(--font-mono);font-size:.72rem;padding:4px 10px;border-radius:20px;background:rgba(99,102,241,.12);border:1px solid rgba(99,102,241,.25);color:#a5b4fc;white-space:nowrap}

/* ── Los dos carruseles: dentro de un desplegable del lateral ── */
/* El 24/09/2026 el dueño los bajó del chat al lateral con un dibujo (una
   flecha): aquí el TÍTULO del desplegable es el resumen, y el cuadro pierde
   el fondo de ancho completo, el borde inferior y la franja de color que sí
   tenían sentido dentro de la conversación. Avanzan solos y con las flechas,
   igual que antes, pero se paran si su desplegable está cerrado. */
details.lateral-menu{margin:0;padding:0;background:var(--glass-card);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--glass-border);border-radius:var(--radius-lg);overflow:hidden}
details.lateral-menu>summary{margin:0;padding:15px 18px;font-family:var(--font-display);font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:#a5b4fc;transition:color .2s}
details.lateral-menu>summary:hover{color:#c7d2fe}
details.lateral-menu[open]>summary{color:#c7d2fe;border-bottom:1px solid var(--glass-border)}
.cuadro-tips{padding:12px 18px 14px}
.carrusel-cabecera{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.carrusel-cuenta{font-family:var(--font-mono);font-size:.7rem;color:var(--text-muted);margin-right:auto}
.carrusel-flecha{width:26px;height:26px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#cbd5e1;font-size:1rem;line-height:1;cursor:pointer;transition:all .2s}
.carrusel-flecha:hover{border-color:var(--accent-indigo);background:rgba(99,102,241,.18);color:#fff}
.tips-carousel{display:grid;min-height:40px}
.tip-slide{grid-area:1/1;display:flex;align-items:flex-start;gap:10px;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .18s ease,transform .18s ease}
.tip-slide.activa{opacity:1;visibility:visible;transform:translateY(0);transition-delay:.18s}
.tip-slide.saliendo{opacity:0;transform:translateY(-10px)}
.tip-icon{font-size:1.3rem;flex:0 0 auto;filter:drop-shadow(0 0 6px rgba(6,182,212,.5))}
.tip-text{font-size:.84rem;line-height:1.45;color:#cbd5e1}
.tip-text strong{color:#67e8f9}
.tip-text em{color:#fbbf24;font-style:normal;font-weight:600}

/* Lo que falta para la primera app se dice en la cuenta, con su aviso. */
.legal-pendiente{outline:1px solid rgba(129,140,248,.55);outline-offset:6px;border-radius:16px}

/* ── Apps listas: el mismo carrusel, dentro de su desplegable ── */
.cuadro-sugerencias{padding:12px 18px 14px}
details.lateral-menu .preset-chip{font-size:.8rem;padding:7px 11px}
.presets-carousel{display:grid}
.preset-slide{grid-area:1/1;display:flex;align-items:center;opacity:0;visibility:hidden;transform:translateX(26px);transition:opacity .18s ease,transform .18s ease}
.preset-slide.activa{opacity:1;visibility:visible;transform:translateX(0);transition-delay:.18s}
.preset-slide.saliendo{opacity:0;transform:translateX(-26px)}
.preset-chip{width:100%;text-align:left;display:flex;align-items:center;gap:10px;cursor:pointer;font-size:.86rem;font-weight:600;padding:8px 14px;border-radius:12px;background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.32);color:#c7d2fe;transition:all .25s ease}
.preset-chip:hover{background:linear-gradient(135deg,rgba(79,70,229,.28),rgba(6,182,212,.14));border-color:#a5b4fc;color:#fff;transform:translateY(-2px);box-shadow:0 6px 20px rgba(99,102,241,.28)}
.preset-chip .chip-cta{font-size:.7rem;font-weight:500;color:#818cf8;margin-left:auto;white-space:nowrap;opacity:.85;flex-shrink:0}
.carrusel-pie{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:5px}
.carousel-dots{display:flex;gap:6px;justify-content:center}
.carousel-dot{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.15);cursor:pointer;transition:all .3s ease}
.carousel-dot:hover{background:rgba(255,255,255,.35)}
.carousel-dot.active{width:22px;border-radius:3px;background:var(--accent-indigo);box-shadow:0 0 8px rgba(99,102,241,.6)}
.carousel-dot.tips-dot.active{background:var(--accent-cyan);box-shadow:0 0 8px rgba(6,182,212,.6)}
.nota-carrusel{text-align:center;margin-top:3px}
/* Palabras largas (correos, URLs, nombres de modelo) no pueden empujar la
   página de lado: se parten solas. */
.tip-text,.preset-chip,.perfil-valor,.pasos li,.burbuja,.pie{overflow-wrap:anywhere}
/* ── La conversación ─────────────────────────────────────── */
.chat-messages{flex:1;min-height:0;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:16px;background:#101726}
.chat-messages::-webkit-scrollbar{width:6px}
.chat-messages::-webkit-scrollbar-thumb{background:#1e293b;border-radius:10px}
.burbuja{
  position:relative;margin:0 0 4px 52px;max-width:calc(100% - 52px);padding:14px 18px;
  border-radius:18px;border-top-left-radius:4px;background:var(--bg-bubble-bot);
  border:1px solid rgba(255,255,255,.08);color:#e2e8f0;font-size:.95rem;line-height:1.6;
  animation:aparece .25s ease-out;
}
.burbuja::before{
  content:"AI";position:absolute;left:-52px;top:0;width:34px;height:34px;border-radius:10px;
  background:linear-gradient(135deg,#4f46e5,#06b6d4);color:#fff;
  font-family:var(--font-mono);font-size:.74rem;font-weight:700;line-height:34px;text-align:center;
}
.burbuja.mia{
  margin:0 52px 4px auto;background:var(--bg-bubble-user);border-color:transparent;
  border-radius:18px;border-top-right-radius:4px;color:#fff;box-shadow:0 4px 15px rgba(79,70,229,.35);
}
.burbuja.mia::before{content:"TÚ";left:auto;right:-52px;background:#334155;color:#f1f5f9}
@keyframes aparece{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.burbuja h3{font-family:var(--font-display);font-size:1rem;margin-bottom:8px;color:#fff}
.burbuja p{margin-bottom:8px}
.burbuja p:last-child{margin-bottom:0}
.burbuja b{color:#fff}
.pasos{list-style:none;margin:10px 0 0;font-size:.85rem}
.pasos li{padding:3px 0;color:var(--text-secondary)}
.pasos li.hecho{color:#34d399}
.pasos li.mal{color:#fb7185}
.datos{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{font-family:var(--font-mono);font-size:.72rem;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:var(--text-secondary)}
.chip.bien{background:rgba(16,185,129,.15);border-color:rgba(16,185,129,.32);color:#34d399}
.chip.mal{background:rgba(244,63,94,.14);border-color:rgba(244,63,94,.32);color:#fb7185}
.boton{
  display:inline-block;margin:8px 8px 0 0;padding:11px 18px;font:inherit;font-size:.9rem;font-weight:700;
  border:0;border-radius:12px;background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;cursor:pointer;
  transition:transform .15s,filter .15s;
}
.boton:hover{filter:brightness(1.12);transform:translateY(-1px)}
.boton:disabled{opacity:.55;cursor:default;transform:none;filter:none}
.boton.secundario{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#e2e8f0}
.boton.secundario:hover{background:rgba(255,255,255,.15);color:#fff}
.boton.grande{display:block;width:100%;margin:10px 0 0;padding:14px}
.boton.mini{margin:0;padding:7px 12px;font-size:.8rem;border-radius:10px}
.tarjeta{margin-top:14px;padding:16px;background:#0d1424;border:1px solid rgba(99,102,241,.3);border-radius:14px}
.tarjeta h3{margin-bottom:10px;font-size:1rem;color:#38bdf8}
label.casilla{display:flex;gap:12px;align-items:flex-start;margin:12px 0;font-size:.88rem;cursor:pointer}
label.casilla input{width:22px;height:22px;margin-top:1px;flex:0 0 auto;accent-color:var(--accent-indigo)}
label.casilla b{display:block;color:#fff}
label.casilla span{color:var(--text-secondary);font-size:.82rem}
.enlaces{font-size:.8rem;color:var(--text-muted);margin-top:10px}
details{margin-top:12px;padding:10px 12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:12px;font-size:.84rem}
summary{cursor:pointer;color:var(--text-secondary)}
pre{margin-top:8px;background:#070a12;color:#cbd5e1;border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:10px;overflow:auto;max-height:280px;font-family:var(--font-mono);font-size:.74rem}
.aviso{margin-top:10px;padding:9px 12px;border-radius:10px;font-size:.84rem;background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.28);color:#fbbf24}
.aviso.malo{background:rgba(244,63,94,.13);border-color:rgba(244,63,94,.3);color:#fb7185}
.aviso.bien{background:rgba(16,185,129,.13);border-color:rgba(16,185,129,.3);color:#34d399}
label{color:#e2e8f0}
select{margin-top:5px;padding:7px 10px;border-radius:9px;background:#0b1120;border:1px solid rgba(255,255,255,.14);color:#e2e8f0;font:inherit;font-size:.85rem}

/* ── La entrada ──────────────────────────────────────────── */
.chat-input-wrapper{padding:10px 16px;background:var(--bg-panel-surface);border-top:1px solid var(--border-panel)}
.chat-input-form{display:flex;align-items:flex-end;gap:10px;background:#090d16;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-lg);padding:6px 6px 6px 16px;transition:border-color .2s,box-shadow .2s}
.chat-input-form:focus-within{border-color:var(--accent-indigo);box-shadow:0 0 0 3px rgba(99,102,241,.2)}
.chat-input{flex:1;min-height:44px;max-height:150px;resize:none;background:transparent;border:0;outline:none;color:var(--text-main);font:inherit;font-size:.95rem;padding:10px 0}
.chat-input::placeholder{color:var(--text-muted)}
.btn-send{flex:0 0 auto;width:46px;height:46px;display:flex;align-items:center;justify-content:center;border:0;border-radius:14px;background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;cursor:pointer;transition:transform .15s,filter .15s}
.btn-send:hover{filter:brightness(1.12);transform:scale(1.04)}
.btn-send:disabled{opacity:.5;cursor:default;transform:none}
/* ── Lateral: las cajas de la casa ───────────────────────── */
.catalog-section{display:flex;flex-direction:column;gap:16px;min-width:0}
.lateral-card{padding:16px 18px;background:var(--glass-card);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--glass-border);border-radius:var(--radius-lg)}
.lateral-titulo{font-family:var(--font-display);font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:#a5b4fc;margin-bottom:10px}
.lateral-botones{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.perfil-fila{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px dashed rgba(255,255,255,.07);font-size:.85rem}
.perfil-fila:last-of-type{border-bottom:0}
.check{width:22px;height:22px;flex:0 0 auto;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:var(--text-muted)}
.check.si{background:rgba(16,185,129,.16);border-color:rgba(16,185,129,.35);color:#34d399}
.check.no{background:rgba(244,63,94,.14);border-color:rgba(244,63,94,.32);color:#fb7185}
.perfil-nombre{margin-right:auto;color:var(--text-secondary)}
.perfil-valor{color:#e2e8f0;font-weight:600}

.pasos-laterales{list-style:none;font-size:.85rem;color:var(--text-secondary);display:flex;flex-direction:column;gap:8px}
.pasos-laterales b{color:#67e8f9;font-family:var(--font-mono)}
.novedades-lista{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:.84rem;color:var(--text-secondary)}
.novedades-lista li{padding-left:16px;position:relative}
.novedades-lista li::before{content:"✦";position:absolute;left:0;color:#a78bfa}

/* ── Las novedades leídas de la base (27/09/2026) ─────────────────────────
   Lo que cuenta la casa viene de D1 (tabla `noticias`) y el JS lo pinta con
   textContent: aquí solo se le da forma. El «✦» de la lista ya estaba arriba
   (.novedades-lista); lo nuevo es la fecha y el texto de cada renglón. */
.novedad-cuando{font-family:var(--font-sans);font-size:.76rem;font-weight:600;color:var(--text-muted)}
.novedad-texto{margin:3px 0 0;color:var(--text-secondary)}
.lateral-card details{margin-top:12px;padding:8px 11px;background:rgba(255,255,255,.02)}
.lateral-card summary{font-size:.82rem;font-weight:600;color:#a5b4fc}

/* ── El panel de la casa: plegado, con pestañas (27/09/2026) ───────────────
   A la derecha va lo que hay que LEER (cómo trabaja la casa, qué te llevas, los
   números del plan, lo que aquí no se hace), y todo eso vive dentro de un
   desplegable cerrado de salida: la conversación manda. Las tres pestañas
   (Información, Novedades, Marketplace) son botones de verdad, con su papel de
   pestaña, para que se pueda navegar con el teclado sin ratón.
   Lo que NO vive aquí es la casilla «es un cambio» ni la cuenta de mejoras: eso
   es el mando de enviar y va pegado a la caja de escribir (.franja-plan). */
.panel-tabs{display:flex;flex-wrap:wrap;gap:6px;padding:12px 14px 0}
.panel-tab{
  flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 8px;font:inherit;font-size:.76rem;font-weight:700;line-height:1.2;
  border:1px solid rgba(255,255,255,.12);border-radius:10px;
  background:rgba(255,255,255,.04);color:var(--text-secondary);cursor:pointer;
  transition:color .2s,background .2s,border-color .2s;
}
.panel-tab:hover{color:#fff;border-color:var(--accent-indigo);background:rgba(99,102,241,.14)}
.panel-tab.activa{background:linear-gradient(135deg,rgba(79,70,229,.3),rgba(6,182,212,.16));border-color:#a5b4fc;color:#fff}
.panel-tab:focus-visible{outline:2px solid #a5b4fc;outline-offset:2px}
.panel-caras{padding:12px 14px 14px}
.panel-cara{display:flex;flex-direction:column;gap:16px}
.panel-cara:focus-visible{outline:2px solid rgba(165,180,252,.6);outline-offset:4px;border-radius:14px}
.panel-resumen-pista{font-family:var(--font-sans);font-size:.74rem;font-weight:500;letter-spacing:0;text-transform:none;color:var(--text-muted)}

/* El botón «Información» de la barra de arriba: es la segunda puerta al mismo
   panel (la primera es su propia fila). Su aria-expanded dice lo que pasa de
   verdad: lo escribe el JS cuando el desplegable se abre o se cierra. */
.boton-panel{
  display:flex;align-items:center;gap:8px;padding:7px 12px;font:inherit;
  font-size:.82rem;font-weight:600;border:1px solid rgba(99,102,241,.32);
  border-radius:999px;background:rgba(99,102,241,.12);color:#c7d2fe;
  cursor:pointer;transition:background .2s,border-color .2s,color .2s;
}
.boton-panel:hover{background:rgba(99,102,241,.22);border-color:#a5b4fc;color:#fff}
.boton-panel[aria-expanded="true"]{background:linear-gradient(135deg,rgba(79,70,229,.3),rgba(6,182,212,.16));border-color:#a5b4fc;color:#fff}
.boton-panel svg{flex:0 0 auto}
.boton-panel-flecha{font-size:.7rem;line-height:1;transition:transform .2s}
.boton-panel[aria-expanded="true"] .boton-panel-flecha{transform:rotate(180deg)}

/* ── La franja del plan: el mando de enviar, siempre a la vista ────────────
   Aquí van las dos cosas que NO se pueden esconder: si lo que se escribe es un
   cambio sobre la app de delante (mejora) o una app nueva, y cuántas mejoras
   lleva gastadas el proyecto. Van pegadas a la caja de escribir, en su misma
   caja de vidrio, para que la respuesta esté donde se escribe. */
.franja-plan{
  display:flex;flex-direction:column;gap:3px;padding:8px 12px;margin-bottom:8px;
  border-radius:14px;background:rgba(99,102,241,.09);border:1px solid rgba(99,102,241,.22);
}
.franja-plan label.casilla{margin:0;gap:10px;font-size:.84rem}
.franja-plan label.casilla input{width:20px;height:20px}
.franja-plan #mejoras-de-proyecto{margin:0}

/* ── Pie ─────────────────────────────────────────────────── */
.pie{padding:8px 16px 12px;text-align:center;color:var(--text-muted);font-size:.8rem}
.pie a{color:var(--text-secondary)}

/* ── Pantallas pequeñas y gente que pide quietud ─────────── */
@media (max-width:1024px){
  main.studio-grid{grid-template-columns:1fr}
  .chat-section{height:auto;min-height:0}
  .chat-messages{max-height:62vh}
}
@media (max-width:640px){
  .app-container{padding:0 12px}
  header.top-bar{padding:12px 14px}
  .quien{display:none}
  .chat-header{padding:14px 16px}
  .chat-mode-pill{display:none}
  .burbuja{margin-left:44px;max-width:calc(100% - 44px)}
  .burbuja::before{left:-44px;width:30px;height:30px;line-height:30px}
  .burbuja.mia{margin-right:44px}
  .burbuja.mia::before{right:-44px}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
}