:root{--bg-primary:#0f172a;--bg-secondary:#1e293b;--text-primary:#f8fafc;--text-secondary:#94a3b8;--accent-color:#3b82f6;--accent-hover:#2563eb;--danger:#ef4444;--success:#22c55e}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-primary);color:var(--text-primary);flex-direction:column;height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;display:flex}main#app{flex:1;place-items:center;height:100%;display:grid}.auth-container{text-align:center;background:var(--bg-secondary);border-radius:12px;padding:2rem;box-shadow:0 4px 6px -1px #0000001a}.btn{background:var(--accent-color);color:#fff;cursor:pointer;border:none;border-radius:6px;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-weight:600;text-decoration:none;transition:background-color .2s;display:inline-flex}.btn:hover{background:var(--accent-hover)}chat-app{grid-template-columns:300px 1fr;width:100%;height:100%;display:grid;overflow:hidden}@media (width<=768px){chat-app{grid-template-columns:1fr}chat-app[viewing-chat=true] friend-list,chat-app[viewing-chat=false] chat-area{display:none}}friend-list{background:var(--bg-secondary);border-right:1px solid #ffffff1a;flex-direction:column;display:flex}.friend-header{border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;padding:1rem;display:flex}.friend-item{cursor:pointer;align-items:center;gap:1rem;padding:1rem;transition:background-color .2s;display:flex}.friend-item:hover,.friend-item.active{background:#ffffff0d}.avatar{background:#333;border-radius:50%;width:40px;height:40px}.status-indicator{background:var(--text-secondary);border-radius:50%;width:10px;height:10px}.status-indicator.online{background:var(--success)}chat-area{background:var(--bg-primary);flex-direction:column;display:flex}.chat-header{background:var(--bg-secondary);border-bottom:1px solid #ffffff1a;align-items:center;gap:1rem;padding:1rem;display:flex}.chat-messages{flex-direction:column;flex:1;gap:.5rem;padding:1rem;display:flex;overflow-y:auto}.message{background:var(--bg-secondary);border-radius:8px;max-width:70%;padding:.75rem}.message.self{background:var(--accent-color);align-self:flex-end}.chat-input{background:var(--bg-secondary);gap:.5rem;padding:1rem;display:flex}.chat-input input[type=text]{background:var(--bg-primary);color:#fff;border:1px solid #fff3;border-radius:6px;flex:1;padding:.75rem}.chat-input input[type=text]:focus{border-color:var(--accent-color);outline:none}dialog{background:var(--bg-secondary);color:#fff;border:1px solid #fff3;border-radius:8px;margin:auto;padding:1.5rem;box-shadow:0 10px 15px -3px #0000001a}dialog::backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#00000080}.dialog-form{flex-direction:column;gap:1rem;margin-top:1rem;display:flex}.dialog-form input{border:none;border-radius:4px;padding:.5rem}.video-grid{background:var(--bg-primary);border-bottom:1px solid #ffffff1a;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;padding:1rem;display:grid}.video-grid video{aspect-ratio:16/9;object-fit:cover;background:#000;border-radius:8px;width:100%;box-shadow:0 4px 6px -1px #0000001a}.video-grid video.local-video{transform:scaleX(-1)}