.demo { max-width: 560px; margin: 0 auto; padding: 18px 16px 30px; }
.demo header h1 { font-size: 24px; margin: 4px 0 6px; }
.demo header p { margin: 0 0 8px; }
.telefono { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; height: min(72vh, 640px); }
.telefono .cabecera { display: flex; gap: 10px; align-items: center; padding: 10px 14px; background: var(--marca); color: #fff; }
.telefono .cabecera .chico { color: #e6f4ee; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: #fff3; display: grid; place-items: center; font-size: 18px; }
.charla { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 6px; background: var(--fondo); }
.charla .burbuja.yo { background: var(--bot); align-self: flex-end; }
.charla .burbuja.negocio { background: var(--cliente); align-self: flex-start; }
.charla .escribiendo { color: var(--suave); font-size: 13px; font-style: italic; }
.escribir { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--linea); }
.ideas { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 8px 10px; }
.ideas button { font-size: 12.5px; padding: 4px 10px; border-radius: 99px; }
.pie { text-align: center; margin-top: 12px; }