.phone-example { margin: 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1.75rem; }
.phone-stage { width: 100%; padding: 1rem 1rem 1.75rem; perspective: 1200px; }
.phone-device { position: relative; width: min(100%, 23rem); margin: auto; padding: .6rem; border: 1px solid #a1aaa5; border-radius: 3rem; background: linear-gradient(125deg,#a6aba9 0%,#414846 5%,#151b19 25%,#080c0a 65%,#6f7772 96%,#b8c0bb); box-shadow: 2px 2px 0 #7a847d, 5px 6px 0 #303b33, 9px 12px 0 #09100c, 18px 30px 45px #0008, -2px -2px 2px #d5e2d54d; transform: rotateY(-8deg) rotateX(3deg) rotateZ(1deg); }
.phone-device::before { content: ""; position: absolute; left: -.25rem; top: 7.5rem; width: .2rem; height: 3.5rem; border-radius: .2rem; background: linear-gradient(#809185,#1e2822,#77847c); box-shadow: 0 4.5rem 0 #48584d; }
.phone-device::after { content: ""; position: absolute; right: -.3rem; top: 10rem; width: .2rem; height: 4.5rem; border-radius: .2rem; background: linear-gradient(#87958a,#243028,#6f7e74); }
.phone-screen { position: relative; overflow: hidden; border: 3px solid #030605; border-radius: 2.45rem; background: #0b141a; color: #edf4f6; }
.phone-status { position: relative; height: 3rem; display: flex; align-items: center; justify-content: space-between; padding: 0 1.35rem; background: #111b21; font-size: .75rem; font-weight: 600; }
.phone-island { position: absolute; left: 50%; top: .65rem; transform: translateX(-50%); width: 6rem; height: 1.55rem; border-radius: 2rem; background: #020504; box-shadow: inset 0 1px 2px #000; }
.phone-island::after { content: ""; position: absolute; right: .6rem; top: .47rem; width: .55rem; height: .55rem; border: 2px solid #18272e; background: #0c152c; border-radius: 50%; }
.phone-indicators { display: flex; gap: .35rem; align-items: center; }
.phone-indicators svg { width: 1rem; height: 1rem; }
.phone-app-header { display: flex; align-items: center; gap: .5rem; padding: .65rem .75rem .85rem; background: #202c33; }
.phone-back { color: #d8e7ec; font-size: 1.8rem; line-height: 1; }
.phone-avatar { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; flex: 0 0 auto; background: #244e3c; color: #bce6ca; font-size: .75rem; font-weight: 700; }
.phone-contact { min-width: 0; flex: 1; }
.phone-contact strong { display: block; font-size: .95rem; font-weight: 600; line-height: 1.4; }
.phone-contact small { display: block; color: #c4d2d7; font-size: .75rem; min-height: 1.2rem; }
.phone-header-icons { display: flex; gap: .75rem; color: #d4e0e5; }
.phone-header-icons svg { width: 1.1rem; height: 1.1rem; }
.phone-chat { position: relative; height: 29rem; overflow-y: auto; overscroll-behavior: contain; padding: 1rem .8rem; scrollbar-width: thin; scrollbar-color: #456454 transparent; background: radial-gradient(ellipse at top right,#28443522,transparent 70%),#0b141a; }
.phone-day { display: table; margin: 0 auto 1rem; padding: .2rem .65rem; background: #202c33; border-radius: .45rem; color: #c4d2d7; font-size: .75rem; }
.phone-bubbles { display: flex; flex-direction: column; gap: .7rem; }
.phone-bubble { position: relative; max-width: 91%; padding: .65rem .7rem .4rem; border-radius: .75rem; box-shadow: 0 1px 1px #0004; }
.phone-bubble p { margin: 0; font-size: 1rem; line-height: 1.5; }
.phone-outgoing { align-self: flex-end; background: #005c4b; border-top-right-radius: .2rem; }
.phone-incoming { align-self: flex-start; background: #202c33; border-top-left-radius: .2rem; }
.phone-bubble-meta { display: flex; justify-content: flex-end; align-items: center; gap: .3rem; margin-top: .3rem; color: #bed1d5; font-size: .75rem; line-height: 1.3; }
.phone-check { color: #73d4ff; font-size: .875rem; letter-spacing: -.25em; padding-right: .2rem; }
.phone-typing { display: flex; align-self: flex-start; align-items: center; gap: .3rem; min-height: 2.6rem; width: 4.5rem; justify-content: center; background: #202c33; border-radius: .75rem; border-top-left-radius: .2rem; }
.phone-typing i { width: .4rem; height: .4rem; border-radius: 50%; background: #bbc8cc; animation: phone-dot 1.1s ease-in-out infinite; }
.phone-typing i:nth-child(2) { animation-delay: .15s; }
.phone-typing i:nth-child(3) { animation-delay: .3s; }
.phone-compose { display: flex; align-items: center; gap: .4rem; min-height: 3.7rem; padding: .4rem .5rem; background: #0b141a; }
.phone-input { display: flex; gap: .5rem; align-items: center; min-height: 2.7rem; min-width: 0; flex: 1; padding: .55rem .75rem; background: #202c33; border-radius: 1.5rem; }
.phone-draft { flex: 1; min-width: 0; color: #ebf2f5; font-size: .875rem; line-height: 1.45; max-height: 4rem; overflow: hidden; overflow-wrap: anywhere; }
.phone-draft:empty::before { content: "Mensaje"; color: #aebac1; }
.phone-compose-icon { color: #aebac1; flex-shrink: 0; }
.phone-send { display: grid; place-items: center; flex-shrink: 0; width: 2.7rem; height: 2.7rem; background: #25d366; color: #062d1a; border-radius: 50%; }
.phone-send svg { width: 1.2rem; height: 1.2rem; }
.phone-home { height: 1.35rem; background: #0b141a; display: flex; align-items: center; justify-content: center; }
.phone-home::after { content: ""; width: 6.5rem; height: .25rem; border-radius: 1rem; background: #c8d0d2; }
.phone-example [hidden] { display: none !important; }
.phone-example.is-playing .phone-bubble:not([hidden]) { animation: phone-arrive .25s ease-out; }
.phone-example.is-paused .phone-typing i { animation-play-state: paused; }
.phone-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: .65rem; }
.phone-controls button { min-height: 2.75rem; padding: .5rem 1rem; border: 1px solid #526857; border-radius: 2rem; background: var(--panel); color: var(--ink); font-size: .875rem; }
.phone-controls button:hover { border-color: var(--gold); }
.phone-example figcaption { max-width: 27rem; text-align: center; color: var(--muted); font-size: .875rem; line-height: 1.7; }
.phone-example figcaption strong { display: block; color: var(--teal); margin-bottom: .5rem; font-weight: 500; }
@keyframes phone-dot { 0%,60%,100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-.25rem); opacity: 1; } }
@keyframes phone-arrive { from { opacity: 0; transform: translateY(.4rem); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 1000px) { .phone-stage { padding-left: .25rem; padding-right: .5rem; } .phone-device { transform: rotateY(-4deg); } }
@media (max-width: 480px) { .phone-device { transform: none; border-radius: 2.7rem; } .phone-chat { height: 28rem; } .phone-status { padding: 0 1rem; } .phone-header-icons { gap: .5rem; } }
@media (prefers-reduced-motion: reduce) { .phone-device { transform: none; } .phone-typing i, .phone-bubble { animation: none !important; } }