* { box-sizing: border-box; margin:0; padding:0; }
:root { --bg:#000; --card:#111; --card2:#161616; --border:#232323; --muted:#9a9a9a; --accent:#fff; --radius:20px; }
html,body { height:100%; background:#000; color:#fff; font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
a { color:inherit; text-decoration:none; }
button { cursor:pointer; font-family:inherit; }

h1,h2,h3,h4,.auth-card h1,.welcome-title { font-weight:600; }

.topbar { height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 24px; border-bottom:1px solid var(--border); background:#000; position:fixed; top:0; left:0; right:0; z-index:10; transition: transform 0.3s ease; }
.topbar.hidden { transform: translateY(-100%); }
.logo { font-family:'Righteous',sans-serif; letter-spacing:-0.04em; font-size:22px; display:flex; align-items:center; gap:8px; }
.logo i { width:28px; height:28px; background:#fff; color:#000; display:grid; place-items:center; border-radius:8px; font-style:normal; font-weight:900; font-size:14px; }
.nav-right { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--muted); }
.nav-right b { color:#fff; font-weight:600; }
.btn-ghost { background:transparent; border:1px solid var(--border); color:#fff; padding:8px 14px; border-radius:999px; font-size:13px; transition: all .15s ease; }
.btn-ghost:hover { background:#111; border-color:#2a2a2a; }
.avatar-btn { width:36px; height:36px; border-radius:999px; background:#1a1a1a; border:1px solid var(--border); display:grid; place-items:center; font-size:16px; cursor:pointer; transition: transform .15s ease, border-color .15s ease, background .15s ease; flex-shrink:0; }
.avatar-btn:hover { transform: scale(1.05); border-color:#333; background:#222; }
.avatar-btn:active { transform: scale(0.96); }

.container { max-width:980px; margin:0 auto; padding:32px 20px; padding-top:76px; }
.auth-wrap { min-height:calc(100vh - 58px); display:grid; place-items:center; padding:24px; padding-top:82px; }
.auth-card { width:100%; max-width:380px; background:var(--card); border:1px solid var(--border); border-radius:24px; padding:28px; animation: pop .35s ease both; }
.auth-card h1 { font-size:22px; font-weight:700; margin-bottom:6px; }
.auth-card p { color:var(--muted); font-size:13px; margin-bottom:20px; line-height:1.5; }
.tabs { display:flex; background:#0a0a0a; border:1px solid var(--border); border-radius:999px; padding:3px; margin-bottom:20px; }
.tabs button { flex:1; padding:12px 14px; min-height:44px; border-radius:999px; border:none; background:transparent; color:var(--muted); font-weight:600; font-size:13px; cursor:pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.tabs button.active { background:#fff; color:#000; }
.field { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.field label { font-size:12px; color:var(--muted); font-weight:500; letter-spacing:0.02em; text-transform:uppercase; }
.field input, .field select { background:#0a0a0a; border:1px solid var(--border); color:#fff; padding:12px 14px; border-radius:12px; outline:none; font-size:14px; }
.field input:focus { border-color:#333; }
.field input.input-ok { border-color:#1f6b2a; }
.field input.input-err { border-color:#7a1f1f; }
#usernameStatus.free { color:#34c759; }
#usernameStatus.taken { color:#ff3b30; }
#usernameStatus.checking { color:#8a8a8a; }
#passwordHint.ok { color:#34c759; }
#passwordHint.err { color:#ff3b30; }
.btn-primary { width:100%; background:#fff; color:#000; border:none; padding:13px; border-radius:999px; font-weight:700; font-size:14px; margin-top:6px; }
.btn-primary:hover { background:#e8e8e8; }
.btn-primary:disabled { opacity:0.5; cursor:not-allowed; }
.hint { text-align:center; font-size:12px; color:var(--muted); margin-top:12px; }
.error { background:#1a0f0f; border:1px solid #3a2020; color:#ff8a8a; padding:10px 12px; border-radius:12px; font-size:13px; margin-bottom:14px; display:none; }
.error.show { display:block; }

.lobby { display:none; }
.lobby.show { display:block; }
.hero { margin:10px 0 28px; animation: fadeUp .6s ease both; }
.hero h1 { font-size:32px; font-weight:800; letter-spacing:-0.03em; line-height:1.1; }
.hero p { color:var(--muted); margin-top:8px; font-size:14px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:700px){ .grid2{grid-template-columns:1fr} }
.card { background:var(--card); border:1px solid var(--border); border-radius:20px; padding:24px; display:flex; flex-direction:column; gap:14px; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; animation: fadeUp .6s ease both; }
.card:nth-child(1){ animation-delay:.08s; } .card:nth-child(2){ animation-delay:.16s; }
.card:hover { border-color:#2d2d2d; transform:translateY(-3px); box-shadow:0 10px 30px rgba(0,0,0,.5); }
.card-icon { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:#1c1c1c; border:1px solid var(--border); font-size:18px; transition: transform .2s ease; }
.card:hover .card-icon { transform: scale(1.05) rotate(3deg); }
.card h3 { font-size:17px; font-weight:700; }
.card p { color:var(--muted); font-size:13px; line-height:1.5; margin-top:2px; }
.card .btn-primary { margin-top:auto; transition: transform .15s ease, background .15s ease; }
.card .btn-primary:active { transform: scale(0.97); }
@keyframes fadeUp { from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)} }
@keyframes pop { from{transform:scale(.97); opacity:0} to{transform:scale(1); opacity:1}}
@keyframes slideIn { from{opacity:0; transform:translateY(6px) scale(.98)} to{opacity:1; transform:translateY(0) scale(1)} }
@keyframes pulseCrown { 0%,100%{transform:scale(1)} 50%{transform:scale(1.12)} }
@keyframes livePulse { 0%{box-shadow:0 0 0 0 rgba(52,199,89,.5)} 70%{box-shadow:0 0 0 6px rgba(52,199,89,0)} 100%{box-shadow:0 0 0 0 rgba(52,199,89,0)} }
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }

.modal-bg { position:fixed; inset:0; background:rgba(0,0,0,0.7); backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center; z-index:50; padding:20px; }
.modal-bg.show { display:flex; }
.modal { width:100%; max-width:440px; background:#111; border:1px solid var(--border); border-radius:24px; padding:24px; animation:pop .18s ease; }
@keyframes pop { from{transform:scale(.97); opacity:0} to{transform:scale(1); opacity:1}}
.modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.modal-head h3 { font-size:18px; font-weight:700; }
.x { width:32px; height:32px; border-radius:999px; border:1px solid var(--border); background:#0a0a0a; color:#fff; display:grid; place-items:center; }
.platforms { display:flex; gap:8px; margin-bottom:14px; }
.plat { flex:1; padding:12px 8px; border-radius:14px; border:1px solid var(--border); background:#0a0a0a; color:var(--muted); font-weight:600; font-size:13px; text-align:center; }
.plat.active { background:#fff; color:#000; border-color:#fff; }
.room-meta { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.badge { font-size:12px; padding:6px 10px; border-radius:999px; background:#1c1c1c; border:1px solid var(--border); color:#cfcfcf; }

/* room page */
.room-layout { display:flex; flex-direction:column; height:calc(100vh - 58px); height:calc(100dvh - 58px); overflow:hidden; margin-top:58px; }
.player-wrap { background:#000; border-bottom:1px solid var(--border); display:grid; place-items:center; padding:10px 14px; flex-shrink:0; }
.player { width:100%; max-width:860px; aspect-ratio:16/9; max-height:46vh; background:#0a0a0a; border:1px solid var(--border); border-radius:16px; overflow:hidden; position:relative; }
.player iframe { width:100%; height:100%; border:0; }
.player-placeholder { position:absolute; inset:0; display:grid; place-items:center; color:var(--muted); font-size:14px; text-align:center; padding:20px; }
.controls { position:absolute; bottom:12px; left:12px; right:12px; display:flex; gap:8px; flex-wrap:wrap; }
.ctrl-btn { background:rgba(255,255,255,0.95); color:#000; border:none; padding:8px 12px; border-radius:999px; font-weight:700; font-size:12px; }
.room-bottom { display:grid; grid-template-columns:1fr 340px; gap:0; flex:1; min-height:0; overflow:hidden; }
@media(max-width:860px){ .room-bottom{grid-template-columns:1fr; overflow:auto;} }
.chat { display:flex; flex-direction:column; min-height:0; border-right:1px solid var(--border); background:#000; overflow:hidden; }
.chat-head { padding:10px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.chat-head h4 { font-size:13px; font-weight:700; }
.online { font-size:11px; color:var(--muted); display:flex; align-items:center; gap:6px; }
.online::before{ content:''; width:7px; height:7px; border-radius:999px; background:#34c759; display:inline-block; animation: livePulse 2s infinite; }
.messages { flex:1; overflow:auto; padding:12px 16px; display:flex; flex-direction:column; gap:10px; min-height:80px; }
.msg { display:flex; gap:8px; align-items:flex-start; max-width:86%; animation: slideIn .22s ease both; }
.msg.me { align-self:flex-end; flex-direction:row-reverse; }
.msg-avatar { width:28px; height:28px; border-radius:999px; background:#1a1a1a; border:1px solid #232323; display:grid; place-items:center; font-size:13px; flex-shrink:0; overflow:hidden; cursor:pointer; transition: transform .15s ease, border-color .15s ease; margin-top:2px; }
.msg-avatar:hover { transform: scale(1.08); border-color:#444; }
.msg-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.msg-content { display:flex; flex-direction:column; gap:4px; flex:1; min-width:0; }
.msg .meta { font-size:11px; color:var(--muted); }
.msg .bubble { background:#111; border:1px solid var(--border); padding:9px 12px; border-radius:14px; font-size:13px; line-height:1.45; transition: transform .15s ease, border-color .15s ease; word-break:break-word; cursor:pointer; position:relative; user-select:none; }
.msg .bubble:hover { border-color:#2a2a2a; }
.msg:hover .bubble { transform: none; }
.msg.me .bubble { background:#fff; color:#000; border-color:#fff; }
.reactions { display:flex; flex-wrap:wrap; gap:4px; min-height:0; }
.reaction-pill { display:inline-flex; align-items:center; gap:4px; background:#1a1a1a; border:1px solid #2a2a2a; border-radius:999px; padding:2px 8px; font-size:12px; cursor:pointer; transition: all .15s ease; }
.reaction-pill:hover { background:#222; border-color:#333; transform: scale(1.05); }
.reaction-pill.mine { background:#fff; color:#000; border-color:#fff; }
.reaction-pill img { width:14px; height:14px; border-radius:999px; object-fit:cover; }
.typing { font-size:12px; color:#8a8a8a; padding:6px 16px; font-style:italic; display:flex; align-items:center; gap:6px; min-height:22px; }
.typing .dots { display:inline-flex; gap:2px; }
.typing .dots i { width:4px; height:4px; background:#8a8a8a; border-radius:999px; animation: typingDot 1.2s infinite; }
.typing .dots i:nth-child(2){ animation-delay:.2s; } .typing .dots i:nth-child(3){ animation-delay:.4s; }
@keyframes typingDot { 0%,60%,100%{opacity:.3; transform:translateY(0)} 30%{opacity:1; transform:translateY(-2px)} }
@keyframes heartPop { 0%{transform:scale(0.5); opacity:0} 50%{transform:scale(1.2); opacity:1} 100%{transform:scale(1); opacity:0; transform:translateY(-10px)} }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
.shake { animation: shake 0.35s ease; }
.chat-input { display:flex; gap:8px; padding:12px; border-top:1px solid var(--border); }
.chat-input input { flex:1; background:#0a0a0a; border:1px solid var(--border); color:#fff; padding:11px 14px; border-radius:999px; outline:none; font-size:13px; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.chat-input input:focus { border-color:#333; background:#0f0f0f; box-shadow:0 0 0 3px rgba(255,255,255,0.06); }
.chat-input input::placeholder { color:#5a5a5a; }
@media (max-width: 860px) {
  .chat-input input { font-size:16px; }
}
.chat-input #sendBtn { background:#fff; color:#000; border:none; padding:11px 18px; border-radius:999px; font-weight:700; font-size:13px; transition: transform .12s ease, background .15s ease; }
.chat-input #sendBtn:active { transform: scale(0.97); }
.chat-input #sendBtn:hover { background:#eaeaea; }
.side { background:#000; padding:16px; display:flex; flex-direction:column; gap:16px; overflow:auto; border-left:1px solid var(--border); }
.side-card { background:#0a0a0a; border:1px solid #1e1e1e; border-radius:20px; padding:18px; transition:border-color .15s; }
.side-card:hover { border-color:#2a2a2a; }
.side-card h4 { font-size:13px; font-weight:700; letter-spacing:-0.01em; margin-bottom:10px; display:flex; align-items:center; gap:6px; }
.side-card p { font-size:12.5px; color:#8a8a8a; line-height:1.5; }
.code-box { display:flex; align-items:center; gap:10px; background:#000; border:1px solid #1e1e1e; border-radius:14px; padding:6px 6px 6px 14px; margin-top:12px; }
.code-box code { flex:1; font-size:15px; letter-spacing:0.14em; font-weight:800; text-align:left; color:#fff; }
.icon-btn { background:#fff; color:#000; border:none; padding:8px 14px; border-radius:999px; font-weight:700; font-size:12.5px; white-space:nowrap; transition:background .15s, transform .1s; }
.icon-btn:hover { background:#e9e9e9; }
.icon-btn:active { transform:scale(0.97); }
.link-row { display:flex; gap:8px; margin-top:10px; }
.link-row input { flex:1; background:#000; border:1px solid #1e1e1e; color:#8a8a8a; padding:9px 12px; border-radius:999px; font-size:11.5px; letter-spacing:-0.01em; }
.participant { display:flex; align-items:center; gap:10px; background:#000; border:1px solid #1e1e1e; border-radius:999px; padding:6px 12px 6px 6px; transition:border-color .15s; }
.participant:hover { border-color:#2a2a2a; }
.participant .ava { width:32px; height:32px; border-radius:999px; background:#1a1a1a; border:1px solid #232323; display:grid; place-items:center; font-weight:800; font-size:12px; flex-shrink:0; color:#fff; }
.participant.host .ava { background:#fff; color:#000; border-color:#fff; }
.participant .name { font-size:13px; font-weight:600; flex:1; letter-spacing:-0.01em; }
.participant .crown { font-size:13px; animation: pulseCrown 2s ease-in-out infinite; }
.participant.host { border-color:#262626; background:#0a0a0a; }
.participant.me .name::after { content:' • ты'; color:#6a6a6a; font-weight:500; font-size:11px; }
.side-card { animation: fadeUp .4s ease both; }
.side-card:nth-child(1){ animation-delay:.04s; } .side-card:nth-child(2){ animation-delay:.08s; } .side-card:nth-child(3){ animation-delay:.12s; }
#hostHint { background:#fff !important; color:#000 !important; border-color:#fff !important; font-weight:600; border-radius:14px; line-height:1.45; transition: all .2s ease;}
#hostHint.guest { background:#0a0a0a !important; color:#8a8a8a !important; border-color:#1e1e1e !important; font-weight:500; }
.icon-btn { position:relative; overflow:hidden; }
.icon-btn::after{ content:''; position:absolute; inset:0; background:radial-gradient(circle at center, rgba(255,255,255,.35) 0%, transparent 60%); opacity:0; transform:scale(.5); transition: opacity .3s, transform .3s; pointer-events:none; }
.icon-btn:active::after{ opacity:1; transform:scale(1.2); }
.player { transition: box-shadow .3s ease, border-color .3s ease; }
.player:hover { border-color:#2a2a2a; box-shadow:0 8px 40px rgba(0,0,0,.6); }

#globalMilana { position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
#milanaLayer { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:1; }
.milana {
  position:absolute;
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-weight:400;
  font-size:15px;
  letter-spacing:0.03em;
  color:rgba(255,255,255,0.24);
  pointer-events:none;
  white-space:nowrap;
  text-shadow:0 1px 14px rgba(0,0,0,0.7);
  animation: milanaFloat 14s cubic-bezier(0.25, 0.4, 0.25, 1) forwards;
  will-change: transform, opacity;
  filter: blur(0.15px);
}
@keyframes milanaFloat {
  0% { opacity:0; transform: translateY(16px) translateX(0) scale(0.98); filter: blur(0.6px); }
  18% { opacity:0.24; filter: blur(0px); }
  78% { opacity:0.22; }
  100% { opacity:0; transform: translateY(-70px) translateX(8px) scale(1); filter: blur(0.4px); }
}

/* profile modal */
.profile-modal { max-width:420px; }
.profile-ava-wrap { display:flex; flex-direction:column; align-items:center; gap:12px; margin-bottom:18px; position:relative; }
.profile-ava-large { width:78px; height:78px; border-radius:999px; background:#1a1a1a; border:2px solid #232323; display:grid; place-items:center; font-size:34px; transition: transform .2s ease; overflow:hidden; position:relative; }
.profile-ava-large:hover { transform: scale(1.04); }
.profile-ava-large img { width:100%; height:100%; object-fit:cover; display:block; }
.profile-ava-large.has-photo { font-size:0; border-color:#fff; }

/* Badge system - всё оформление привязано к бейджу */
.badge-founder, .badge-developer { position:relative; }
.badge-founder .profile-ava-large,
.badge-developer .profile-ava-large { 
  border-color:#e0f2ff !important; 
  box-shadow: 0 0 20px rgba(224,242,255,0.4);
  animation: crownGlow 3s ease-in-out infinite;
}
.badge-snow .profile-ava-large {
  border-color:#e0f2ff !important;
  box-shadow: 0 0 20px rgba(224,242,255,0.4);
  animation: crownGlow 3s ease-in-out infinite;
}
@keyframes crownGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(224,242,255,0.4); }
  50% { box-shadow: 0 0 30px rgba(224,242,255,0.6); }
}
.crown-icon {
  position:absolute;
  top:-18px;
  left:50%;
  transform:translateX(-50%);
  width:32px;
  height:32px;
  animation: crownFloat 3s ease-in-out infinite;
  z-index:10;
  filter: drop-shadow(0 2px 8px rgba(224,242,255,0.5));
}
@keyframes crownFloat {
  0%, 100% { transform: translateX(-50%) translateY(0px); }
  50% { transform: translateX(-50%) translateY(-4px); }
}
.badge-text {
  display:inline-block;
  padding:4px 12px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.05em;
  text-transform:uppercase;
  margin-top:6px;
}
.badge-founder .badge-text,
.badge-founder .creator-badge-text,
.badge-developer .badge-text,
.badge-developer .creator-badge-text,
.badge-snow .badge-text {
  background: linear-gradient(135deg, #e0f2ff, #bae6ff) !important;
  color:#0a3a52 !important;
  box-shadow: 0 2px 10px rgba(224,242,255,0.4) !important;
}
.badge-founders_wife { position:relative; }
.badge-founders_wife .profile-ava-large {
  border-color:#FFB6D9 !important;
  box-shadow: 0 0 22px rgba(255,182,217,.55), 0 0 40px rgba(255,158,191,.25);
  animation: sakuraGlow 3s ease-in-out infinite;
}
.badge-founders_wife .badge-text,
.badge-founders_wife .creator-badge-text {
  background: linear-gradient(135deg, #FFD0E8, #FF9EBF) !important;
  color:#5a1430 !important;
  box-shadow: 0 2px 12px rgba(255,158,191,.45), 0 0 20px rgba(255,182,217,.3) !important;
  border-color: rgba(255,182,217,.4) !important;
}
@keyframes sakuraGlow {
  0%,100% { box-shadow: 0 0 22px rgba(255,182,217,.45), 0 0 40px rgba(255,158,191,.18); }
  50% { box-shadow: 0 0 30px rgba(255,182,217,.65), 0 0 50px rgba(255,158,191,.3); }
}
.heart-icon {
  position:absolute;
  top:-18px;
  left:50%;
  transform:translateX(-50%);
  width:30px;
  height:30px;
  z-index:10;
  animation: heartFloat 2.8s ease-in-out infinite;
  filter: drop-shadow(0 2px 8px rgba(255,105,140,.55)) drop-shadow(0 0 14px rgba(255,182,217,.5));
}
@keyframes heartFloat {
  0%,100% { transform: translateX(-50%) translateY(0) scale(1); }
  50% { transform: translateX(-50%) translateY(-4px) scale(1.06); }
}
/* legacy alias */
.creator-badge-text { display:inline-block; background: linear-gradient(135deg, #e0f2ff, #bae6ff); color:#0a3a52; padding:4px 12px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; margin-top:6px; box-shadow: 0 2px 10px rgba(224,242,255,0.4); }
.creator-badge { position:relative; }
.creator-badge .profile-ava-large { border-color:#e0f2ff !important; box-shadow: 0 0 20px rgba(224,242,255,0.4); animation: crownGlow 3s ease-in-out infinite; }

/* Petals animation - tied to founders_wife badge */
.profile-ava-wrap.badge-founders_wife {
  position: relative;
  overflow: visible;
  width: 280px;
  margin: 0 auto;
}
.petal {
  position: absolute;
  pointer-events: none;
  z-index: 5;
  top: -50px;
  animation-name: petalFall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform, opacity;
  opacity: 0;
  filter: drop-shadow(0 1px 6px rgba(255,105,140,.45)) drop-shadow(0 0 10px rgba(255,182,217,.4));
}
@keyframes petalFall {
  0% { transform: translateY(0) translateX(0) rotate(0deg) scale(0.9); opacity: 0; }
  10% { opacity: 0.95; transform: translateY(28px) translateX(calc(var(--drift, 18px) * 0.1)) rotate(35deg) scale(1); }
  85% { opacity: 0.95; }
  100% { transform: translateY(340px) translateX(var(--drift, 18px)) rotate(420deg) scale(1); opacity: 0; }
}

/* Snowflakes animation - tied to badge */
.profile-ava-wrap.badge-founder,
.profile-ava-wrap.badge-developer,
.profile-ava-wrap.badge-snow,
.profile-ava-wrap.creator-badge {
  position: relative;
  overflow: visible;
  width: 260px;
  margin: 0 auto;
}
.profile-view-modal {
  overflow: visible !important;
  position: relative;
}
.profile-view-modal .profile-ava-wrap {
  overflow: visible;
}
.snowflake {
  position: absolute;
  color: #e0f2ff;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 8px rgba(224,242,255,0.9), 0 0 12px rgba(186,230,255,0.5);
  pointer-events: none;
  z-index: 5;
  top: -50px;
  animation-name: fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform, opacity;
  opacity: 0;
}
@keyframes fall {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg) scale(0.9);
    opacity: 0;
  }
  8% {
    opacity: 0.85;
    transform: translateY(22px) translateX(calc(var(--drift, 20px) * 0.08)) rotate(25deg) scale(1);
  }
  85% {
    opacity: 0.85;
  }
  100% {
    transform: translateY(320px) translateX(var(--drift, 20px)) rotate(360deg) scale(1);
    opacity: 0;
  }
}
.ava-grid { display:grid; grid-template-columns: repeat(8, 1fr); gap:8px; margin-top:6px; }
.ava-grid button { width:36px; height:36px; border-radius:999px; border:1px solid #1e1e1e; background:#000; font-size:18px; display:grid; place-items:center; cursor:pointer; transition: all .15s ease; overflow:hidden; }
.ava-grid button:hover { border-color:#333; transform: scale(1.08); background:#111; }
.ava-grid button.active { border-color:#fff; background:#fff; transform: scale(1.1); box-shadow:0 0 0 3px rgba(255,255,255,.12); }
.ava-grid button.upload-btn { font-size:14px; background:#111; border-style:dashed; }
.ava-grid button.upload-btn:hover { background:#1a1a1a; }
.avatar-btn { overflow:hidden; padding:0; }
.avatar-btn img { width:100%; height:100%; object-fit:cover; display:block; }
.avatar-btn.has-photo { border-color:#fff; background:#000; }
.profile-modal textarea { background:#0a0a0a; border:1px solid var(--border); color:#fff; padding:12px 14px; border-radius:12px; outline:none; font-size:13px; width:100%; resize:none; font-family:inherit; transition: border-color .2s; }
.profile-modal textarea:focus { border-color:#333; }
.profile-modal .field input { font-size:14px; }

/* chat photo in message */
.msg-image { max-width:240px; max-height:240px; border-radius:12px; margin-top:6px; display:block; cursor:pointer; transition:transform .15s; object-fit:cover; }
.msg-image:hover { transform:scale(1.02); }
.msg.me .msg-image { margin-left:auto; }

/* chat input photo button */
.chat-icon-btn { width:40px; height:40px; border-radius:999px; border:1px solid var(--border); background:#0a0a0a; color:#fff; font-size:16px; display:grid; place-items:center; cursor:pointer; transition:all .15s; flex-shrink:0; }
.chat-icon-btn:hover { background:#1a1a1a; border-color:#333; }
.chat-icon-btn:active { transform:scale(0.93); }

/* context menu */
.msg-context-menu { position:fixed; z-index:200; background:#1a1a1a; border:1px solid #2a2a2a; border-radius:16px; padding:6px; display:none; flex-direction:column; gap:0; box-shadow:0 8px 32px rgba(0,0,0,.8); backdrop-filter:blur(16px); min-width:180px; animation:ctxPop .15s ease; }
.msg-context-menu.show { display:flex; }
@keyframes ctxPop { from{opacity:0; transform:scale(.92) translateY(6px)} to{opacity:1; transform:scale(1) translateY(0)} }

.ctx-reactions { display:flex; gap:2px; padding:4px; justify-content:center; }
.ctx-react-btn { width:38px; height:38px; border-radius:10px; border:none; background:transparent; font-size:20px; cursor:pointer; display:grid; place-items:center; transition:all .12s; }
.ctx-react-btn:hover { background:#2a2a2a; transform:scale(1.18); }
.ctx-react-btn:active { transform:scale(0.88); }
.ctx-more-btn { font-size:18px; font-weight:700; color:#8a8a8a; background:#161616; border-radius:10px; }
.ctx-more-btn:hover { background:#2a2a2a; color:#fff; transform:none; }

/* full emoji picker */
.emoji-picker-full { position:fixed; z-index:250; background:#1a1a1a; border:1px solid #2a2a2a; border-radius:16px; padding:8px; display:none; flex-wrap:wrap; gap:2px; box-shadow:0 8px 32px rgba(0,0,0,.8); backdrop-filter:blur(16px); width:320px; max-height:220px; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; animation:ctxPop .15s ease; }
.emoji-picker-full.show { display:flex; }
.emoji-picker-full::-webkit-scrollbar { width:4px; }
.emoji-picker-full::-webkit-scrollbar-track { background:transparent; }
.emoji-picker-full::-webkit-scrollbar-thumb { background:#333; border-radius:4px; }
.emoji-picker-full .emoji-item { width:36px; height:36px; border-radius:8px; border:none; background:transparent; font-size:20px; cursor:pointer; display:grid; place-items:center; transition:all .12s; flex-shrink:0; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.emoji-picker-full .emoji-item:hover { background:#2a2a2a; transform:scale(1.2); }

.ctx-divider { height:1px; background:#2a2a2a; margin:2px 8px; }

.ctx-actions { display:flex; flex-direction:column; padding:4px; }
.ctx-action-btn { display:flex; align-items:center; gap:8px; padding:10px 14px; border:none; background:transparent; color:#fff; font-size:13px; border-radius:10px; cursor:pointer; transition:background .12s; text-align:left; width:100%; }
.ctx-action-btn:hover { background:#2a2a2a; }
.ctx-action-btn:active { background:#333; }
.ctx-action-btn.ctx-delete { color:#ff3b30; }
.ctx-action-btn.ctx-delete:hover { background:#2a1215; }

/* welcome modal */
.welcome-modal { max-width:420px; width:100%; background:linear-gradient(145deg,#111,#0a0a0a); border:1px solid #1e1e1e; border-radius:24px; padding:40px 32px 32px; text-align:center; animation:pop .3s ease; }
.welcome-icon { margin-bottom:16px; }
.welcome-icon svg { display:block; margin:0 auto; }
.welcome-title { font-size:26px; font-weight:800; letter-spacing:-0.03em; margin-bottom:18px; background:linear-gradient(135deg,#fff,#999); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.welcome-text { font-size:13px; color:#8a8a8a; line-height:1.7; margin-bottom:10px; }
.welcome-text a { color:#fff; text-decoration:underline; text-underline-offset:3px; text-decoration-color:#333; transition:text-decoration-color .2s; }
.welcome-text a:hover { text-decoration-color:#fff; }
.welcome-footer { font-size:11px; color:#444; margin:24px 0 24px; line-height:1.6; letter-spacing:0.02em; }
.welcome-btn { width:100%; background:#fff; color:#000; border:none; padding:14px; border-radius:999px; font-weight:700; font-size:14px; cursor:pointer; transition:all .2s; }
.welcome-btn:hover { background:#e8e8e8; transform:translateY(-1px); box-shadow:0 4px 20px rgba(255,255,255,.15); }
.welcome-btn:active { transform:scale(0.98); }