:root{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5;font-weight:400;color:#f5f7fb;background-color:#050505;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at top,#111,#050505 45%,#000);-webkit-text-size-adjust:100%}#app{min-height:100vh}h1{margin:0;font-size:2.4rem;letter-spacing:.5px}.subtitle{margin:0;color:#9aa3b2}.splash{min-height:100vh;display:grid;place-items:center;gap:18px;text-align:center;padding:60px 20px 80px}.logo-button{position:relative;width:260px;height:260px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:grid;place-items:center}.logo-button:focus-visible{outline:2px solid #5ee1ff;outline-offset:6px}.logo-wrap{position:relative;width:200px;height:200px;border-radius:50%;display:grid;place-items:center;background:#0a0a0a;box-shadow:0 0 40px #5ee1ff33}.logo-wrap img{width:86px;height:86px;filter:drop-shadow(0 0 18px rgba(94,225,255,.4))}.pulse-ring{position:absolute;inset:10px;border-radius:50%;border:2px solid rgba(94,225,255,.25);animation:pulse 3.5s ease-out infinite}.pulse-ring.delay{animation-delay:1.2s}.logo-button.pulse-once .pulse-ring,.logo-button.pulse-once .logo-wrap{animation:clickPulse .45s ease-out}.logo-button.pulse-once .logo-wrap{box-shadow:0 0 60px #5ee1ff73}.rooms{min-height:100vh;padding:40px 24px 70px;display:grid;gap:28px;max-width:980px;margin:0 auto}.rooms-header{display:flex;align-items:center;gap:18px}.rooms-header.sticky{position:sticky;top:0;background:#07080b;padding:12px 0;z-index:10}.logo-button.mini{width:64px;height:64px;border-radius:18px;background:#0f1115;box-shadow:0 0 18px #5ee1ff40}.logo-button.mini img{width:40px;height:40px}.room-list{display:grid;gap:12px}.room-item{padding:14px 18px;border-radius:14px;border:1px solid #1b1f2a;background:#0f1115;color:#f5f7fb;text-align:left;cursor:pointer;transition:transform .2s ease,border .2s ease,box-shadow .2s ease}.room-item:hover{transform:translateY(-2px);border-color:#2a3142;box-shadow:0 8px 20px #00000059}.room-item.active{border-color:#5ee1ff;box-shadow:0 0 24px #5ee1ff33}.chat{min-height:100vh;display:grid;grid-template-columns:260px 1fr;background:#07080b}.sidebar{padding:32px 18px;border-right:1px solid #141823;display:grid;gap:18px;background:#06070a}.sidebar-header{display:flex;align-items:center;gap:12px;font-weight:600;color:#f5f7fb}.sidebar-header img{width:32px;height:32px}.sidebar-list{display:grid;gap:10px}.sidebar-item{padding:10px 12px;border-radius:12px;border:1px solid transparent;background:transparent;color:#cfd6e4;text-align:left;cursor:pointer;transition:all .2s ease}.sidebar-item:hover{background:#0f1115}.sidebar-item.active{border-color:#5ee1ff;background:#0f1115;color:#f5f7fb;box-shadow:0 0 12px #5ee1ff33}.chat-panel{padding:36px 30px 50px;display:grid;gap:18px}.chat-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.chat-header.sticky{position:sticky;top:0;background:#07080b;padding:12px 0;z-index:10}.back-btn{border:1px solid #1f2635;background:#0f1115;color:#cfd6e4;border-radius:10px;padding:8px 12px;cursor:pointer}.chat-window{background:#0f1115;border:1px solid #1b1f2a;border-radius:20px;min-height:420px;padding:22px;display:grid;gap:12px;overflow-y:auto}.chat-empty{color:#6f7a8f}.message{background:#151b26;color:#f5f7fb;border-radius:0 12px 12px;padding:10px 12px 8px;display:grid;gap:8px;position:relative;max-width:520px;box-shadow:0 8px 16px #00000059;border:1px solid #1f2635}.message:before{content:"";position:absolute;left:-10px;top:0;width:14px;height:14px;background:#151b26;clip-path:polygon(100% 0,100% 100%,0 0)}.message.mine{background:#1c2a33;border-radius:12px 0 12px 12px;margin-left:auto;border-color:#243645}.message.mine:before{left:auto;right:-10px;transform:scaleX(-1);background:#1c2a33}.message-header{display:flex;justify-content:space-between;color:#8a94a8;font-size:.75rem}.message p{margin:0;color:#f5f7fb;font-size:.95rem;line-height:1.45}.reply-chip{font-size:.75rem;color:#0ea5e9}.media-card{display:grid;grid-template-columns:42px 1fr;gap:12px;align-items:center;background:#0f141c;border:1px solid #1c2433;border-radius:12px;padding:8px 10px}.media-icon{width:42px;height:42px;border-radius:12px;background:radial-gradient(circle at top,#5ee1ff59,#5ee1ff1a)}.media-card.voice .media-icon{background:radial-gradient(circle at top,#58ffb766,#58ffb71a)}.media-card.video .media-icon{background:radial-gradient(circle at top,#ffb25866,#ffb2581a)}.media-label{font-weight:600;color:#f5f7fb}.media-meta{color:#8a94a8;font-size:.8rem}.reply-action{justify-self:end;background:transparent;border:none;color:#5ee1ff;cursor:pointer;font-size:.85rem}.status-banner{background:#0f1115;border:1px solid #1f2433;border-radius:999px;padding:6px 12px;color:#5ee1ff;font-size:.85rem;width:fit-content}.reply-banner{background:#0f1115;border:1px solid #1f2433;border-radius:14px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;color:#9aa3b2}.reply-close{background:transparent;border:none;color:#9aa3b2;cursor:pointer}.chat-input{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}.input-left{display:flex;gap:8px}.icon-btn{background:#0f1115;border:1px solid #1b1f2a;border-radius:12px;color:#f5f7fb;width:40px;height:40px;cursor:pointer}.chat-input input{background:#0f1115;border:1px solid #1b1f2a;border-radius:12px;padding:12px 14px;color:#f5f7fb;font-size:16px}.send-btn{background:#1b1f2a;border:1px solid #2a3142;border-radius:12px;color:#f5f7fb;padding:0 18px;height:44px;cursor:pointer}@media(max-width:900px){.chat{grid-template-columns:1fr}.sidebar{display:none}.chat-panel{padding:28px 18px 40px}.chat-input{grid-template-columns:1fr}.input-left{order:2;justify-content:space-between}.send-btn{width:100%}}@media(max-width:640px){.logo-button{width:220px;height:220px}.logo-wrap{width:170px;height:170px}.rooms{padding:28px 16px 50px}.room-item{padding:16px}}.hint{color:#6f7a8f;font-size:.95rem}@keyframes pulse{0%{transform:scale(.86);opacity:0}30%{opacity:1}to{transform:scale(1.08);opacity:0}}@keyframes clickPulse{0%{transform:scale(1)}50%{transform:scale(1.04)}to{transform:scale(1)}}@media(prefers-reduced-motion:reduce){n .pulse-ring{animation:none}}