.phone-mockup *,.phone-mockup *:before,.phone-mockup *:after{box-sizing:border-box;margin:0;padding:0}.phone-mockup{display:flex;flex-direction:column;align-items:center;font-family:-apple-system,Helvetica Neue,Arial,sans-serif}.phone-frame{position:relative;width:340px;height:680px;border-radius:44px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 0 0 8px #fff,0 0 0 9px #d1d1d1,0 24px 56px #0000002e;background:#fff}@media(prefers-color-scheme:dark){.phone-frame{box-shadow:0 0 0 8px #111,0 0 0 9px #333,0 24px 56px #00000080;background:#111}}.dynamic-island{position:absolute;top:11px;left:50%;transform:translate(-50%);width:96px;height:28px;background:#000;border-radius:16px;z-index:30;display:flex;align-items:center;justify-content:center}.di-dot{width:7px;height:7px;border-radius:50%;background:#1a1a1a;border:1.5px solid #2e2e2e}.status-bar{height:48px;flex-shrink:0;background:#075e54;display:flex;align-items:flex-end;justify-content:space-between;padding:0 14px 8px;position:relative;z-index:10;color:#fff}.status-time{font-size:11px;font-weight:600;letter-spacing:.01em}.status-icons{display:flex;align-items:center;gap:4px}.chat-header{background:#075e54;padding:6px 12px 10px;display:flex;align-items:center;gap:9px;flex-shrink:0;border-bottom:.5px solid rgba(255,255,255,.1)}.chat-back{background:none;border:none;color:#fff;font-size:22px;line-height:1;cursor:pointer;padding:2px 4px}.chat-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#25d366,#128c7e);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}.chat-info{flex:1}.chat-name{font-size:14px;font-weight:600;color:#fff;line-height:1.2}.chat-status{font-size:11px;color:#ffffffb3;transition:color .3s}.chat-status.typing-active{color:#25d366}.chat-actions{display:flex;gap:4px;color:#fff}.chat-action-btn{background:none;border:none;color:#fff;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;opacity:.85;transition:opacity .15s}.chat-action-btn:hover{opacity:1}.messages{flex:1;overflow-y:auto;padding:10px 8px;display:flex;flex-direction:column;gap:2px;scroll-behavior:smooth;background:#ece5dd}@media(prefers-color-scheme:dark){.messages{background:#0b141a}}.messages::-webkit-scrollbar{width:0}.date-sep{text-align:center;margin:6px 0}.date-sep span{display:inline-block;background:#e1ddd8e6;color:#555;font-size:11px;padding:3px 9px;border-radius:6px}@media(prefers-color-scheme:dark){.date-sep span{background:#0b141ad9;color:#8696a0}}.bubble-row{display:flex;margin:1px 0;opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease}.bubble-row.visible{opacity:1;transform:translateY(0)}.bubble-row.bot{justify-content:flex-start}.bubble-row.user{justify-content:flex-end}.bubble{max-width:78%;padding:6px 9px 4px;border-radius:8px;font-size:13px;line-height:1.45;word-break:break-word}.bubble.bot{background:#fff;color:#111;border-top-left-radius:2px}@media(prefers-color-scheme:dark){.bubble.bot{background:#202c33;color:#e9edef}}.bubble.user{background:#dcf8c6;color:#111;border-top-right-radius:2px}@media(prefers-color-scheme:dark){.bubble.user{background:#005c4b;color:#e9edef}}.bubble-voice{min-width:200px}.voice-note{display:flex;align-items:center;gap:8px;padding:2px 0 1px}.vn-play{width:28px;height:28px;border-radius:50%;background:#25d366;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:none;padding:0;cursor:pointer;transition:transform .1s ease,background .15s ease}.vn-play:hover{background:#1eb958}.vn-play:active{transform:scale(.92)}.vn-play.is-loading{opacity:.6;cursor:progress}.vn-play svg{width:13px;height:13px;margin-left:1px}.vn-wave{position:relative;flex:1;display:flex;align-items:center;gap:2px;height:22px}.vn-wave i{flex:1;background:#c4ccd1;border-radius:2px;height:35%}.vn-wave i:nth-child(3n){height:70%}.vn-wave i:nth-child(4n){height:90%}.vn-wave i:nth-child(5n){height:50%}.vn-wave i:nth-child(2n){height:60%}@media(prefers-color-scheme:dark){.vn-wave i{background:#54656f}}.vn-dot{position:absolute;left:4%;top:50%;transform:translateY(-50%);width:9px;height:9px;border-radius:50%;background:#25d366;transition:left .12s linear}.vn-dur{font-size:10px;color:#00000073;flex-shrink:0}@media(prefers-color-scheme:dark){.vn-dur{color:#e9edef80}}.bubble-meta{display:flex;align-items:center;justify-content:flex-end;gap:3px;margin-top:2px}.bubble-time{font-size:9.5px;color:#00000061}@media(prefers-color-scheme:dark){.bubble-time{color:#e9edef73}}.bubble-ticks{display:flex;align-items:center}.bubble-ticks svg{width:14px;height:10px}.typing-bubble{background:#fff;border-radius:2px 8px 8px;padding:8px 12px;display:flex;align-items:center;gap:4px}@media(prefers-color-scheme:dark){.typing-bubble{background:#202c33}}.dot{width:6px;height:6px;background:#8696a0;border-radius:50%;animation:typing-bounce 1s infinite}.dot:nth-child(2){animation-delay:.2s}.dot:nth-child(3){animation-delay:.4s}@keyframes typing-bounce{0%,60%,to{transform:scale(1);opacity:.5}30%{transform:scale(1.3);opacity:1}}.input-bar{background:#f0f0f0;padding:6px 8px;display:flex;align-items:center;gap:6px;border-top:.5px solid rgba(0,0,0,.08);flex-shrink:0}@media(prefers-color-scheme:dark){.input-bar{background:#1f2c33}}.input-emoji{font-size:18px;cursor:pointer}.input-fake{flex:1;background:#fff;border-radius:18px;height:34px;display:flex;align-items:center;padding:0 12px;font-size:12px;color:#aaa}@media(prefers-color-scheme:dark){.input-fake{background:#2a3942;color:#8696a0}}.input-send{width:32px;height:32px;border-radius:50%;background:#00a884;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer}.home-bar{height:22px;background:#000;display:flex;align-items:center;justify-content:center;flex-shrink:0}.home-pill{width:100px;height:4px;background:#ffffff40;border-radius:3px}.replay-btn{margin-top:20px;padding:9px 28px;background:transparent;border:1px solid #d1d1d1;border-radius:100px;color:#555;font-size:13px;font-family:inherit;cursor:pointer;transition:background .2s,color .2s}.replay-btn:hover{background:#f5f5f5}@media(prefers-color-scheme:dark){.replay-btn{border-color:#333;color:#aaa}.replay-btn:hover{background:#1a1a1a}}@media(prefers-reduced-motion:reduce){.bubble-row{transition:none;opacity:1;transform:none}.dot{animation:none}}@media(max-width:400px){.phone-frame{width:300px;height:600px;border-radius:38px}}