:root{--pink: #f8577f;--pink-soft: #ff7aa2;--violet: #9b47e5;--bg: #140c1c;--bg-2: #1e1430;--card: #241a38;--card-2: #2d2145;--text: #f3eef9;--muted: #b4a7c9;--bubble-me: linear-gradient(135deg, #f8577f, #9b47e5);--bubble-them: #2d2145;--ok: #38d39f;--danger: #ff5c7a;--radius: 20px;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%;margin:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:radial-gradient(130% 100% at 50% 0%,var(--bg-2) 0%,var(--bg) 60%);color:var(--text);overscroll-behavior:none;-webkit-user-select:none;user-select:none}input,textarea{-webkit-user-select:text;user-select:text}button{font-family:inherit;cursor:pointer;border:none}.app{height:100%;display:flex;flex-direction:column;max-width:560px;margin:0 auto;position:relative}.center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center}.btn{background:var(--bubble-me);color:#fff;font-weight:700;font-size:16px;padding:15px 20px;border-radius:16px;width:100%;transition:transform .08s ease,opacity .2s}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.5}.btn.ghost{background:transparent;color:var(--muted);font-weight:600}.btn.danger{background:var(--danger)}.btn.ok{background:var(--ok)}.field{width:100%;background:var(--card);border:1px solid rgba(255,255,255,.08);color:var(--text);padding:15px 16px;border-radius:14px;font-size:16px;margin-bottom:12px;outline:none}.field:focus{border-color:var(--pink)}.logo-heart{font-size:54px;margin-bottom:8px}h1.title{font-size:28px;margin:4px 0 2px}.subtitle{color:var(--muted);margin:0 0 28px;font-size:15px}.error{color:var(--danger);font-size:14px;margin:6px 0 10px;min-height:18px}.linkbtn{background:none;color:var(--pink-soft);font-weight:700;padding:6px}.topbar{display:flex;align-items:center;gap:12px;padding:calc(var(--safe-top) + 10px) 14px 10px;background:#140c1cbf;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.06);position:sticky;top:0;z-index:5}.topbar .avatar{width:42px;height:42px}.topbar .who{flex:1;min-width:0}.topbar .who .name{font-weight:700;font-size:16px}.topbar .who .status{font-size:12px;color:var(--muted)}.topbar .who .status.online{color:var(--ok)}.iconbtn{background:var(--card);width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:19px}.iconbtn:active{transform:scale(.92)}.avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;background:var(--card-2);display:inline-grid;place-items:center;overflow:hidden;font-size:22px;color:#fff}.messages{flex:1;overflow-y:auto;padding:16px 12px 8px;display:flex;flex-direction:column;gap:4px}.daysep{text-align:center;color:var(--muted);font-size:12px;margin:14px 0 8px}.row{display:flex;margin:1px 0}.row.me{justify-content:flex-end}.bubble{max-width:76%;padding:10px 14px;border-radius:20px;font-size:16px;line-height:1.35;word-wrap:break-word;white-space:pre-wrap;position:relative}.row.me .bubble{background:var(--bubble-me);color:#fff;border-bottom-right-radius:6px}.row.them .bubble{background:var(--bubble-them);border-bottom-left-radius:6px}.bubble img{max-width:100%;border-radius:14px;display:block}.bubble .time{font-size:10px;opacity:.7;margin-top:3px;text-align:right}.bubble .time .tick{margin-left:4px}.composer{display:flex;align-items:flex-end;gap:8px;padding:8px 10px calc(var(--safe-bottom) + 8px);background:#140c1cd9;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid rgba(255,255,255,.06)}.composer textarea{flex:1;resize:none;max-height:120px;background:var(--card);color:var(--text);border:1px solid rgba(255,255,255,.08);border-radius:22px;padding:11px 16px;font-size:16px;outline:none;line-height:1.3}.composer textarea:focus{border-color:var(--pink)}.sendbtn{width:46px;height:46px;border-radius:50%;background:var(--bubble-me);color:#fff;font-size:20px;display:grid;place-items:center;flex:none}.sendbtn:active{transform:scale(.9)}.sendbtn:disabled{opacity:.4}.avatar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;width:100%;margin:10px 0 18px}.avatar-grid .opt{aspect-ratio:1;border-radius:50%;overflow:hidden;border:3px solid transparent;background:var(--card)}.avatar-grid .opt.sel{border-color:var(--pink)}.avatar-grid .opt img{width:100%;height:100%;object-fit:cover}.bigavatar{width:110px;height:110px;margin-bottom:14px;font-size:44px}.call-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:radial-gradient(120% 90% at 50% 10%,var(--violet) 0%,var(--bg) 70%);display:flex;flex-direction:column;align-items:center;padding:calc(var(--safe-top) + 60px) 24px calc(var(--safe-bottom) + 40px)}.call-overlay .label{color:var(--muted);letter-spacing:1px;text-transform:uppercase;font-size:13px}.call-overlay .peer-name{font-size:30px;font-weight:700;margin:8px 0 4px}.call-overlay .timer{color:var(--muted);font-size:16px}.call-overlay .bigavatar{margin:40px 0;box-shadow:0 0 0 10px #ffffff12}.call-actions{margin-top:auto;display:flex;gap:40px;align-items:center}.call-btn{width:70px;height:70px;border-radius:50%;display:grid;place-items:center;font-size:28px;color:#fff}.call-btn.decline{background:var(--danger)}.call-btn.accept{background:var(--ok)}.call-btn.mute{background:#ffffff26;width:60px;height:60px;font-size:24px}.call-btn.mute.on{background:#fff;color:var(--bg)}.pulse{animation:pulse 1.6s infinite}@keyframes pulse{0%{box-shadow:0 0 #f8577f80}70%{box-shadow:0 0 0 26px #f8577f00}to{box-shadow:0 0 #f8577f00}}.sheet{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;background:#0000008c;display:flex;align-items:flex-end}.sheet .panel{background:var(--bg-2);width:100%;max-width:560px;margin:0 auto;border-radius:24px 24px 0 0;padding:20px 20px calc(var(--safe-bottom) + 24px);max-height:85%;overflow-y:auto}.sheet h2{margin:4px 0 16px}.muted{color:var(--muted)}.spinner{width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.2);border-top-color:var(--pink);animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.banner{position:sticky;top:0;z-index:6;background:var(--pink);color:#fff;text-align:center;padding:10px;font-size:14px;font-weight:600}