*{box-sizing:border-box}html,body,#root{margin:0;padding:0;height:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:#0f172a;color:#e2e8f0}button{font:inherit;cursor:pointer}input,textarea{font:inherit;color:inherit;background:#1e293b;border:1px solid #334155;border-radius:6px;padding:8px 10px}input:focus,textarea:focus{outline:2px solid #60a5fa;outline-offset:-1px}.app{display:grid;grid-template-rows:1fr;height:100%}.login-card{max-width:380px;margin:8vh auto;padding:24px;background:#1e293b;border-radius:12px;border:1px solid #334155}.login-card h1{margin-top:0}.login-card .row{display:grid;gap:8px;margin-bottom:12px}.login-card button{width:100%;padding:10px;border:0;border-radius:6px;background:#2563eb;color:#fff;font-weight:600}.login-card button:disabled{opacity:.5;cursor:not-allowed}.login-card .switch{text-align:center;margin-top:12px;color:#94a3b8}.login-card .switch a{color:#60a5fa;cursor:pointer}.error{color:#fca5a5;margin-top:8px;font-size:13px}.hint{color:#94a3b8;margin-top:8px;font-size:13px}.notice{color:#fde68a;margin-top:8px;font-size:13px;padding:8px;background:#422006;border-radius:6px;border:1px solid #78350f}.admin{display:grid;grid-template-rows:auto auto 1fr;height:100%;padding:20px;gap:16px;overflow:hidden}.admin-header{display:flex;align-items:center;gap:16px}.admin-header h1{margin:0;flex:1;font-size:18px}.admin-me{color:#94a3b8;font-size:13px}.admin-me a{color:#60a5fa;cursor:pointer}.admin-filters{display:flex;gap:8px;flex-wrap:wrap}.admin-filters button{padding:6px 12px;border:1px solid #334155;border-radius:6px;background:#1e293b;color:#cbd5e1;font-size:13px}.admin-filters button.on{background:#2563eb;color:#fff;border-color:#2563eb}.admin-filters button.refresh{margin-left:auto;background:transparent}.admin-table{background:#0b1426;border:1px solid #1e293b;border-radius:8px;overflow-y:auto;font-size:13px}.admin-table .row{display:grid;grid-template-columns:60px 1.4fr 1.4fr 80px 130px 1fr 1fr 1.2fr;align-items:center;padding:10px 14px;border-bottom:1px solid #1e293b;gap:10px}.admin-table .row.head{background:#1e293b;color:#94a3b8;font-weight:600;font-size:12px;position:sticky;top:0}.admin-table .row .time{color:#94a3b8;font-size:12px}.admin-table .row .role{color:#fde68a;font-family:monospace;font-size:12px}.admin-table .row .badge{padding:3px 8px;border-radius:999px;font-size:11px;font-weight:600;display:inline-block}.admin-table .badge.pending{background:#422006;color:#fde68a}.admin-table .badge.active{background:#14532d;color:#bbf7d0}.admin-table .badge.disabled{background:#450a0a;color:#fca5a5}.admin-table .actions{display:flex;gap:6px}.admin-table .actions button{padding:5px 10px;border:0;border-radius:6px;font-size:12px;color:#fff;font-weight:600}.admin-table .actions .approve{background:#16a34a}.admin-table .actions .disable{background:#dc2626}.admin-table .actions .enable{background:#2563eb}.admin-table .empty{padding:30px;text-align:center;color:#64748b}.chat{display:grid;grid-template-columns:260px 1fr;height:100%}.sidebar{background:#0b1426;border-right:1px solid #1e293b;display:grid;grid-template-rows:auto auto 1fr auto}.sidebar h2{margin:0;padding:16px;font-size:14px;color:#94a3b8}.sidebar .me{padding:12px 16px;border-top:1px solid #1e293b;font-size:13px}.user-list{overflow-y:auto}.user-list .user{padding:10px 16px;cursor:pointer;border-bottom:1px solid #1e293b;display:flex;gap:10px;align-items:center}.user-list .user:hover{background:#1e293b}.user-list .user.active{background:#1e3a8a}.user-list .avatar{width:36px;height:36px;border-radius:50%;background:#475569;display:grid;place-items:center;font-weight:600;font-size:14px}.user-list .name{font-weight:500}.user-list .username{font-size:12px;color:#94a3b8}.main{display:grid;grid-template-rows:auto 1fr auto}.main .header{padding:12px 20px;border-bottom:1px solid #1e293b;display:flex;align-items:center;gap:12px}.main .header h3{margin:0;flex:1}.main .header button{padding:8px 14px;border:0;border-radius:6px;background:#16a34a;color:#fff}.main .header button.danger{background:#dc2626}.main .messages{padding:16px 20px;overflow-y:auto;display:flex;flex-direction:column;gap:10px}.msg{max-width:70%;padding:8px 12px;border-radius:14px;word-wrap:break-word;position:relative}.msg.in{background:#334155;align-self:flex-start;border-bottom-left-radius:4px}.msg.out{background:#2563eb;align-self:flex-end;border-bottom-right-radius:4px}.msg.deleted{opacity:.7}.msg .time{display:block;font-size:11px;color:#ffffffb3;margin-top:4px}.msg-reactions{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}.reaction-chip{background:#ffffff2e;padding:2px 8px;border-radius:10px;font-size:12px;cursor:pointer;user-select:none}.reaction-chip:hover{background:#ffffff47}.reaction-chip.mine{background:#facc15;color:#0b1426;font-weight:600}.msg-actions{display:none;gap:6px;align-items:center;position:absolute;top:-16px;right:4px;background:#0b1426;border:1px solid #334155;border-radius:999px;padding:3px 8px;font-size:14px}.msg-actions span{cursor:pointer;user-select:none}.msg-actions span:hover{transform:scale(1.2)}.msg:hover .msg-actions{display:flex}.msg.out .msg-actions{right:auto;left:4px}.msg.pinned{border:1px solid #facc15}.pin-badge{font-size:11px;color:#facc15;margin-bottom:4px}.reply-preview{font-size:12px;padding:4px 8px;margin-bottom:6px;background:#0003;border-left:3px solid #60a5fa;border-radius:4px}.reply-strip{padding:8px 16px;background:#0b1426;border-top:1px solid #1e293b;font-size:13px;color:#cbd5e1;display:flex;align-items:center}.reply-cancel{margin-left:auto;cursor:pointer;padding:0 8px}.pinned-bar{background:#1a2942;border-bottom:1px solid #facc15;padding:6px 16px;font-size:13px}.pinned-bar-head{cursor:pointer;user-select:none;color:#facc15}.pinned-item{display:flex;gap:8px;align-items:center;padding:4px 0;border-top:1px dashed #334155}.pinned-preview{flex:1;color:#cbd5e1}.pinned-by{color:#94a3b8;font-size:11px}.pinned-unpin{cursor:pointer;color:#94a3b8;padding:0 6px}.pinned-unpin:hover{color:#fca5a5}.presence{font-size:12px;color:#94a3b8}.presence.online{color:#4ade80}.presence.typing{color:#60a5fa;font-style:italic}.search-wrap{position:relative;min-width:240px;max-width:360px}.search-input-row{display:flex;align-items:center;gap:4px;background:#1e293b;border:1px solid #334155;border-radius:6px;padding:4px 8px}.search-input-row input{flex:1;background:transparent;border:0;outline:none;padding:4px 0;font-size:13px;color:inherit}.search-icon{color:#94a3b8}.search-clear{background:none;border:none;color:#94a3b8;font-size:18px;padding:0 4px;cursor:pointer;line-height:1}.search-clear:hover{color:#fca5a5}.search-dropdown{position:absolute;left:0;right:auto;top:100%;margin-top:4px;width:28rem;max-width:80vw;max-height:60vh;overflow-y:auto;background:#0b1426;border:1px solid #334155;border-radius:6px;box-shadow:0 12px 40px #00000080;z-index:200}.search-head{padding:6px 12px;font-size:11px;color:#94a3b8;background:#1e293b99;border-bottom:1px solid #1e293b;position:sticky;top:0}.search-empty{padding:20px;text-align:center;font-size:13px;color:#64748b}.search-item{padding:8px 12px;cursor:pointer;border-bottom:1px solid #1e293b}.search-item:hover{background:#1e293b}.search-item-head{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#94a3b8;margin-bottom:3px}.search-sender{color:#cbd5e1;font-weight:600}.search-time{color:#94a3b8}.search-snippet{font-size:13px;color:#e2e8f0;line-height:1.4}.msg-attachments{display:flex;flex-direction:column;gap:4px;margin-top:6px}.attachment-chip{display:inline-block;padding:4px 10px;border-radius:8px;background:#ffffff26;color:#fde68a;font-size:13px;cursor:pointer;user-select:none;border:1px dashed rgba(253,230,138,.5)}.attachment-chip:hover{background:#ffffff40}.search-snippet mark{background:#facc15;color:#0b1426;padding:0 2px;border-radius:2px;font-weight:600}.search-more{padding:8px 12px;text-align:center;font-size:11px;color:#64748b}.msg.flash{animation:msg-flash 1.5s ease-out}@keyframes msg-flash{0%{box-shadow:0 0 0 3px #facc15}to{box-shadow:0 0 0 0 transparent}}.composer{display:flex;gap:8px;padding:12px 20px;border-top:1px solid #1e293b}.composer input{flex:1}.composer button{padding:8px 18px;border:0;border-radius:6px;background:#2563eb;color:#fff;font-weight:600}.composer button:disabled{opacity:.4;cursor:not-allowed}.empty{color:#64748b;text-align:center;margin:60px}.call-overlay{position:fixed;inset:0;background:#000000d9;display:grid;place-items:center;z-index:100}.call-modal{background:#1e293b;padding:24px;border-radius:12px;min-width:320px;text-align:center}.call-modal h2{margin-top:0}.call-modal .actions{display:flex;gap:12px;justify-content:center;margin-top:18px}.call-modal button{padding:10px 20px;border:0;border-radius:6px;color:#fff;font-weight:600}.call-modal .accept{background:#16a34a}.call-modal .reject{background:#dc2626}.call-view{position:fixed;inset:0;background:#000;display:grid;grid-template-rows:1fr auto;z-index:90}.call-tiles{position:relative;display:grid;place-items:center;overflow:hidden}.call-tiles video.remote{width:100%;height:100%;object-fit:contain;background:#111}.call-tiles video.local{position:absolute;right:16px;bottom:16px;width:200px;max-width:30vw;border:2px solid #334155;border-radius:8px;background:#000}.call-controls{padding:16px;display:flex;gap:12px;justify-content:center;background:#0b1426}.call-controls button{padding:10px 16px;border:0;border-radius:24px;min-width:90px;background:#334155;color:#fff}.call-controls button.off,.call-controls button.end{background:#dc2626}.call-status{position:absolute;top:16px;left:16px;color:#cbd5e1;background:#00000080;padding:6px 10px;border-radius:6px}