@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600&display=swap";:root{--bg-base:#0d0f14;--bg-surface:#13161e;--bg-elevated:#1a1d27;--bg-hover:#1e2130;--bg-active:#21263a;--border:#ffffff0f;--text-primary:#e8eaf0;--text-secondary:#7c82a0;--text-muted:#4a4f6a;--accent:#6366f1;--accent-soft:#6366f126;--accent-glow:#6366f14d;--blue:#3b82f6;--green:#10b981;--red:#ef4444;--amber:#f59e0b;--radius-sm:8px;--radius-md:14px;--radius-lg:20px;--radius-full:9999px;--font:"Outfit", system-ui, sans-serif;--sidebar-w:320px;--header-h:60px;--input-h:64px;--sat:env(safe-area-inset-top,0px);--sar:env(safe-area-inset-right,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--transition:.15s cubic-bezier(.4, 0, .2, 1)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;height:-webkit-fill-available;margin:0;padding:0;overflow:hidden}body{font-family:var(--font);background:var(--bg-base);color:var(--text-primary);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}#root{height:100%;flex-direction:column;width:100%;height:-webkit-fill-available;display:flex;overflow:hidden}.icon-btn{border-radius:var(--radius-sm);width:34px;height:34px;color:var(--text-secondary);cursor:pointer;transition:background var(--transition), color var(--transition);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;display:flex}.icon-btn:hover{background:var(--bg-elevated);color:var(--text-primary)}.btn{border-radius:var(--radius-sm);height:38px;font-size:14px;font-weight:500;font-family:var(--font);cursor:pointer;transition:opacity var(--transition);border:none;padding:0 16px}.btn:disabled{opacity:.4;cursor:not-allowed}.btn--primary{background:var(--accent);color:#fff}.btn--secondary{background:var(--bg-surface);color:var(--text-secondary);border:1px solid var(--border)}.btn--danger{color:#fca5a5;background:#ef444426;border:1px solid #ef444433}.btn:hover:not(:disabled){opacity:.85}.status-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.status-dot--online{background:var(--green);box-shadow:0 0 6px var(--green)}.status-dot--connecting{background:var(--amber)}.status-dot--reconnecting{background:var(--amber);animation:1.5s infinite pulse}.status-dot--offline{background:var(--red)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}@keyframes spin{to{transform:rotate(360deg)}}.loading-screen{background:var(--bg-base);color:var(--text-muted);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:16px;font-size:14px;display:flex}.loading-screen__spinner{border:2px solid var(--bg-elevated);border-top-color:var(--accent);border-radius:50%;width:28px;height:28px;animation:.8s linear infinite spin}.app-shell{flex:1;width:100%;height:100%;min-height:0;display:flex;overflow:hidden}.sidebar{width:var(--sidebar-w);background:var(--bg-surface);border-right:1px solid var(--border);flex-direction:column;flex-shrink:0;display:flex;overflow:hidden}.main-content{background:var(--bg-base);flex-direction:column;flex:1;display:flex;overflow:hidden}.empty-state{color:var(--text-muted);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:12px;display:flex}.empty-state__icon{opacity:.3}.empty-state__text{font-size:15px}@media (width<=680px){:root{--sidebar-w:100%}.app-shell{position:relative}.sidebar,.main-content{z-index:10;width:100%;transition:transform .28s cubic-bezier(.4,0,.2,1);position:absolute;inset:0;overflow:hidden}.sidebar{transform:translate(0)}.sidebar--hidden{pointer-events:none;transform:translate(-100%)}.sidebar--visible{transform:translate(0)}.main-content{transform:translate(100%)}.main-content--visible{transform:translate(0)}}.sidebar-header{height:calc(var(--header-h) + env(safe-area-inset-top,0px));min-height:var(--header-h);border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:flex-end;padding:0 16px 14px;display:flex}.sidebar-header__logo{align-items:center;gap:10px;display:flex}.sidebar-header__title{color:var(--text-primary);letter-spacing:-.2px;font-size:17px;font-weight:600}.sidebar-header__actions{align-items:center;gap:8px;display:flex}.search-bar{background:var(--bg-elevated);border-radius:var(--radius-md);border:1px solid var(--border);color:var(--text-muted);cursor:text;flex-shrink:0;align-items:center;gap:8px;margin:10px 12px;padding:9px 14px;display:flex}.search-bar__placeholder{color:var(--text-muted);font-size:14px}.room-list{padding:4px 0;padding-bottom:env(safe-area-inset-bottom,0px);flex:1;overflow-y:auto}.room-list::-webkit-scrollbar{width:3px}.room-list::-webkit-scrollbar-track{background:0 0}.room-list::-webkit-scrollbar-thumb{background:var(--bg-active);border-radius:3px}.room-item{cursor:pointer;border-radius:var(--radius-md);transition:background var(--transition);-webkit-user-select:none;user-select:none;align-items:center;gap:12px;margin:1px 8px;padding:10px 14px;display:flex}.room-item:active,.room-item--active{background:var(--bg-active)}@media (hover:hover){.room-item:hover{background:var(--bg-hover)}.room-item--active:hover{background:var(--bg-active)}}.room-avatar{flex-shrink:0;width:50px;height:50px;position:relative}.room-avatar__img{object-fit:cover;border-radius:50%;width:50px;height:50px;display:block}.room-avatar__placeholder{color:#fff;letter-spacing:.5px;border-radius:50%;justify-content:center;align-items:center;width:50px;height:50px;font-size:16px;font-weight:600;display:flex}.room-avatar__badge{background:var(--accent);color:#fff;border-radius:var(--radius-full);border:2px solid var(--bg-surface);justify-content:center;align-items:center;min-width:18px;height:18px;padding:0 5px;font-size:11px;font-weight:600;display:flex;position:absolute;bottom:-1px;right:-1px}.room-info{flex:1;min-width:0}.room-info__top{justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:3px;display:flex}.room-info__name{color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:15px;font-weight:500;overflow:hidden}.room-info__time{color:var(--text-muted);flex-shrink:0;font-size:12px}.room-info__preview{color:var(--text-secondary);text-overflow:ellipsis;white-space:nowrap;font-size:13px;overflow:hidden}.room-info__empty{color:var(--text-muted);font-style:italic}.timeline{flex-direction:column;flex:1;min-height:0;display:flex;position:relative;overflow:hidden}.timeline-header{height:calc(var(--header-h) + env(safe-area-inset-top,0px));min-height:var(--header-h);border-bottom:1px solid var(--border);background:var(--bg-surface);flex-shrink:0;align-items:flex-end;gap:8px;padding:0 16px 14px;display:flex}.timeline-header__back{display:none}.timeline-header__info{flex:1;min-width:0}.timeline-header__name{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:16px;font-weight:600;display:block;overflow:hidden}@media (width<=680px){.timeline-header__back{display:flex}}.scroll-to-bottom{bottom:calc(var(--input-h) + 12px + env(safe-area-inset-bottom,0px));z-index:10;border:1px solid var(--border);background:var(--bg-elevated);width:40px;height:40px;color:var(--text-secondary);cursor:pointer;transition:background var(--transition), color var(--transition), transform var(--transition);border-radius:50%;justify-content:center;align-items:center;animation:.18s fade-in-up;display:flex;position:absolute;right:16px;box-shadow:0 4px 16px #0006}.scroll-to-bottom:hover{background:var(--bg-active);color:var(--text-primary);transform:translateY(-1px)}.scroll-to-bottom:active{transform:scale(.93)}.scroll-to-bottom__badge{border-radius:var(--radius-full);background:var(--accent);color:#fff;min-width:18px;height:18px;font-size:10px;font-weight:600;font-family:var(--font);box-shadow:0 0 0 2px var(--bg-surface);pointer-events:none;justify-content:center;align-items:center;padding:0 4px;line-height:1;display:flex;position:absolute;top:-6px;right:-6px}@keyframes fade-in-up{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.messages-list{overflow-anchor:none;flex-direction:column;flex:1;gap:2px;padding:16px 16px 8px;display:flex;overflow-y:auto}.messages-list::-webkit-scrollbar{width:3px}.messages-list::-webkit-scrollbar-track{background:0 0}.messages-list::-webkit-scrollbar-thumb{background:var(--bg-active);border-radius:3px}.messages-list__sentinel{flex-shrink:0;width:100%;height:1px}.messages-list__loading-more{flex-shrink:0;justify-content:center;padding:12px 0 4px;display:flex}.messages-list__loading-spinner{border:2px solid var(--bg-elevated);border-top-color:var(--text-muted);border-radius:50%;width:20px;height:20px;animation:.8s linear infinite spin}.message-input-bar{padding:10px calc(12px + env(safe-area-inset-right,0px)) 10px calc(12px + env(safe-area-inset-left,0px));padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--border);background:var(--bg-surface);flex-shrink:0;align-items:center;gap:8px;display:flex}.message-input{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-full);height:42px;color:var(--text-primary);font-size:16px;font-family:var(--font);transition:border-color var(--transition);outline:none;flex:1;padding:0 14px}.message-input::placeholder{color:var(--text-muted)}.message-input:focus{border-color:var(--accent)}.send-btn{background:var(--bg-elevated);width:42px;height:42px;color:var(--text-muted);cursor:pointer;transition:background var(--transition), color var(--transition), transform var(--transition);border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex}.send-btn--active{background:var(--accent);color:#fff}.send-btn--active:active{transform:scale(.92)}.bubble-wrap{flex-direction:column;align-items:flex-start;margin-bottom:6px;display:flex}.bubble-wrap--own{align-items:flex-end}.bubble-sender{color:var(--text-muted);margin-bottom:3px;padding:0 4px;font-size:11px}.bubble-meta{align-items:center;gap:3px;margin-top:3px;padding:0 4px;display:flex}.bubble-time{color:var(--text-muted);font-size:10px;line-height:1}.bubble-status{flex-shrink:0;display:block}.msg-status--sending{color:var(--text-muted);animation:1.2s steps(8,end) infinite status-tick}@keyframes status-tick{to{transform:rotate(360deg)}}.msg-status--sent{color:#ffffff8c}.msg-status--read{color:var(--accent);filter:drop-shadow(0 0 3px var(--accent-glow))}.bubble{word-break:break-word;white-space:pre-wrap;max-width:min(72%,420px);padding:9px 13px;font-size:14px;line-height:1.5}.bubble--own{background:var(--accent);color:#fff;border-radius:16px 16px 4px}.bubble--other{background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border);border-radius:16px 16px 16px 4px}.bubble--muted{font-style:italic;color:var(--text-muted)!important}.bubble--audio{padding:8px 10px}.bubble-audio{max-width:240px;height:34px;display:block}.bubble-media{background:var(--bg-elevated);border:1px solid var(--border);border-radius:16px 16px 16px 4px;max-width:min(72%,300px);overflow:hidden}.bubble-media--own{border-radius:16px 16px 4px}.bubble-media__img,.bubble-media__video{object-fit:cover;max-width:100%;max-height:280px;display:block}.bubble-media__placeholder{width:200px;height:140px;color:var(--text-muted);justify-content:center;align-items:center;font-size:20px;display:flex}.bubble-videonote{background:var(--bg-elevated);border:2px solid var(--border);border-radius:50%;flex-shrink:0;width:180px;height:180px;overflow:hidden}.bubble-videonote__video{object-fit:cover;width:100%;height:100%}.bubble-videonote__placeholder{width:100%;height:100%;color:var(--text-muted);justify-content:center;align-items:center;display:flex}.login-page{background:var(--bg-base);padding:24px;padding-top:calc(24px + var(--sat));padding-bottom:calc(24px + var(--sab));flex:1;justify-content:center;align-items:center;display:flex}.login-card{flex-direction:column;align-items:center;width:100%;max-width:360px;display:flex}.login-logo{background:var(--bg-elevated);border:1px solid var(--border);border-radius:22px;margin-bottom:16px;padding:14px}.login-title{letter-spacing:-.5px;color:var(--text-primary);margin-bottom:6px;font-size:28px;font-weight:600}.login-subtitle{color:var(--text-muted);margin-bottom:32px;font-size:14px}.login-form{flex-direction:column;gap:14px;width:100%;display:flex}.input-group{flex-direction:column;gap:6px;display:flex}.input-label{color:var(--text-secondary);font-size:13px;font-weight:500}.input-field{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);height:46px;color:var(--text-primary);font-size:16px;font-family:var(--font);transition:border-color var(--transition);outline:none;width:100%;padding:0 14px}.input-field::placeholder{color:var(--text-muted)}.input-field:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.login-error{border-radius:var(--radius-sm);color:#fca5a5;background:#ef44441a;border:1px solid #ef444433;padding:10px 14px;font-size:13px}.login-btn{border-radius:var(--radius-md);background:var(--accent);color:#fff;height:48px;font-size:15px;font-weight:600;font-family:var(--font);cursor:pointer;transition:opacity var(--transition), transform var(--transition);border:none;justify-content:center;align-items:center;margin-top:4px;display:flex}.login-btn:hover:not(:disabled){opacity:.9}.login-btn:active:not(:disabled){transform:scale(.98)}.login-btn:disabled{opacity:.4;cursor:not-allowed}.login-btn__spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:18px;height:18px;animation:.7s linear infinite spin}.dialog-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;padding:16px;padding-top:calc(16px + var(--sat));padding-bottom:calc(16px + var(--sab));background:#000000b3;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.dialog{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-lg);flex-direction:column;gap:14px;width:100%;max-width:400px;padding:24px;display:flex}.dialog h3{color:var(--text-primary);font-size:17px;font-weight:600}.dialog p{color:var(--text-secondary);font-size:14px;line-height:1.5}.dialog-actions{justify-content:flex-end;gap:8px;display:flex}.emoji-grid{flex-wrap:wrap;gap:10px;display:flex}.emoji-item{text-align:center;width:52px}.emoji-item__char{font-size:28px}.emoji-item__name{color:var(--text-muted);margin-top:2px;font-size:10px}