*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#1a1a2e;color:#e0e0e0;min-height:100vh}.app{min-height:100vh;display:flex;flex-direction:column}.room-entry{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;gap:16px}.room-entry h1{font-size:2.5rem;color:#e94560}.room-entry p{color:#888;margin-bottom:16px}.room-entry form{display:flex;gap:8px}.room-entry input{padding:12px 16px;border:1px solid #333;border-radius:8px;background:#16213e;color:#e0e0e0;font-size:1rem;width:320px;outline:none}.room-entry input:focus{border-color:#e94560}.room-entry button{padding:12px 24px;border:none;border-radius:8px;background:#e94560;color:#fff;font-size:1rem;cursor:pointer}.room-entry button:hover{background:#c73650}.room{display:flex;flex-direction:column;height:100vh;overflow:hidden}.room-header{display:flex;justify-content:space-between;align-items:center;padding:12px 24px;background:#16213e;border-bottom:1px solid #333}.room-info{display:flex;align-items:center;gap:16px}.room-id{font-weight:600;font-size:1.1rem}.status{font-size:.85rem;padding:4px 10px;border-radius:12px}.status.connected{background:#1b4332;color:#52b788}.status.disconnected{background:#4a1c1c;color:#e07a7a}.peer-count{font-size:.85rem;color:#888}.leave-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid #e94560;border-radius:6px;background:transparent;color:#e94560;cursor:pointer;font-size:.85rem}.leave-btn:hover{background:#e94560;color:#fff}.room-controls{display:flex;justify-content:center;gap:10px;padding:10px 16px;background:#0f0f1a;border-bottom:1px solid #333;flex-shrink:0}.share-controls{display:flex}.start-share-btn,.stop-share-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:none;border-radius:6px;color:#fff;font-size:.85rem;cursor:pointer;transition:background .15s}.start-share-btn{background:#e94560}.start-share-btn:hover{background:#c73650}.stop-share-btn{background:#555}.stop-share-btn:hover{background:#777}.audio-controls{display:flex}.mic-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:none;border-radius:6px;background:#555;color:#fff;font-size:.85rem;cursor:pointer;transition:background .15s}.mic-btn:hover{background:#777}.mic-btn.active{background:#52b788}.mic-btn.active:hover{background:#40916c}.room-content{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:12px;padding:12px;max-height:40vh;background:#0f0f1a;border-bottom:1px solid #333}.video-grid.empty{display:none}.video-player{position:relative;background:#0f0f23;border-radius:12px;overflow:hidden}.video-player video{width:100%;display:block;border-radius:12px}.peer-label{position:absolute;bottom:8px;left:8px;background:#0009;color:#ccc;padding:4px 8px;border-radius:4px;font-size:.75rem;font-family:monospace}.auth-form{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;gap:16px}.auth-form h1{font-size:2.5rem;color:#e94560}.auth-form p{color:#888;margin-bottom:16px}.auth-form form{display:flex;flex-direction:column;gap:8px;width:320px}.auth-form input{padding:12px 16px;border:1px solid #333;border-radius:8px;background:#16213e;color:#e0e0e0;font-size:1rem;outline:none}.auth-form input:focus{border-color:#e94560}.auth-form button[type=submit]{padding:12px 24px;border:none;border-radius:8px;background:#e94560;color:#fff;font-size:1rem;cursor:pointer}.auth-form button[type=submit]:hover{background:#c73650}.auth-form button[type=submit]:disabled{background:#555;cursor:not-allowed}.auth-error{color:#e07a7a;font-size:.9rem;text-align:center}.auth-toggle{background:none;border:none;color:#888;cursor:pointer;font-size:.9rem}.auth-toggle:hover{color:#e94560}.user-bar{position:absolute;top:16px;right:24px;display:flex;align-items:center;gap:12px;font-size:.9rem;color:#888}.user-bar-identity{display:flex;align-items:center;gap:8px;background:none;border:none;color:inherit;font:inherit;cursor:pointer;padding:4px 8px;border-radius:6px}.user-bar-identity:hover{color:#fff}.user-bar-actions{display:flex;align-items:center;gap:8px}.user-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover}.user-avatar-placeholder{display:flex;align-items:center;justify-content:center;background:#e94560;color:#fff;font-size:.7rem;font-weight:600}.logout-btn{padding:6px 12px;border:1px solid #555;border-radius:6px;background:transparent;color:#888;cursor:pointer;font-size:.85rem}.logout-btn:hover{border-color:#e94560;color:#e94560}.account-page{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;gap:16px}.account-page h2{font-size:1.8rem;color:#e94560}.account-page form{display:flex;flex-direction:column;gap:12px;width:320px}.account-page label{display:flex;flex-direction:column;gap:4px;font-size:.85rem;color:#888}.account-page input{padding:12px 16px;border:1px solid #333;border-radius:8px;background:#16213e;color:#e0e0e0;font-size:1rem;outline:none}.account-page input:focus{border-color:#e94560}.account-page input:disabled{opacity:.5}.account-page button[type=submit]{padding:12px 24px;border:none;border-radius:8px;background:#e94560;color:#fff;font-size:1rem;cursor:pointer}.account-page button[type=submit]:hover{background:#c73650}.account-page button[type=submit]:disabled{background:#555;cursor:not-allowed}.back-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid #555;border-radius:6px;background:transparent;color:#888;cursor:pointer;font-size:.85rem}.back-btn:hover{border-color:#e94560;color:#e94560}.avatar-preview{width:80px;height:80px;border-radius:50%;overflow:hidden;position:relative}.avatar-image{width:100%;height:100%;object-fit:cover}.avatar-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#e94560;color:#fff;font-size:1.5rem;font-weight:600}.avatar-placeholder.hidden{display:none}.avatar-upload-section{display:flex;justify-content:center}.upload-avatar-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:1px solid #e94560;border-radius:8px;background:transparent;color:#e94560;font-size:.9rem;cursor:pointer}.upload-avatar-btn:hover{background:#e94560;color:#fff}.upload-avatar-btn:disabled{border-color:#555;color:#555;cursor:not-allowed}.save-success{color:#52b788;font-size:.9rem;text-align:center}.room-header-actions{display:flex;gap:8px}.notification-btn{display:inline-flex;align-items:center;justify-content:center;padding:8px;border:1px solid #555;border-radius:6px;background:transparent;color:#888;cursor:pointer;font-size:.85rem;transition:all .2s}.notification-btn:hover{border-color:#e94560;color:#e94560}.notification-btn.enabled{border-color:#52b788;color:#52b788}.notification-btn.enabled:hover{background:#52b788;color:#fff}.save-room-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid #52b788;border-radius:6px;background:transparent;color:#52b788;cursor:pointer;font-size:.85rem}.save-room-btn:hover{background:#52b788;color:#fff}.save-room-btn:disabled{border-color:#555;color:#555;cursor:default}.saved-rooms{width:400px;margin-top:16px}.saved-rooms h3{color:#888;font-size:.95rem;margin-bottom:8px}.saved-rooms-empty{color:#555;font-size:.9rem;margin-top:16px}.saved-room-item{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:#16213e;border-radius:8px;margin-bottom:6px}.saved-room-info{display:flex;flex-direction:column;gap:2px}.saved-room-name{font-size:.95rem}.saved-room-id{font-size:.8rem;color:#666;font-family:monospace}.saved-room-actions{display:flex;gap:6px}.join-btn{padding:6px 12px;border:none;border-radius:6px;background:#e94560;color:#fff;cursor:pointer;font-size:.85rem}.join-btn:hover{background:#c73650}.delete-btn{padding:6px 12px;border:1px solid #555;border-radius:6px;background:transparent;color:#888;cursor:pointer;font-size:.85rem}.delete-btn:hover{border-color:#e07a7a;color:#e07a7a}.chat-panel{flex:1;display:flex;flex-direction:column;background:#16213e;min-height:0}.chat-header{padding:16px 24px;font-weight:600;font-size:1.2rem;border-bottom:1px solid #333;flex-shrink:0}.chat-messages{flex:1;overflow-y:auto;padding:16px 24px;display:flex;flex-direction:column;gap:12px;min-height:0;position:relative}.chat-messages.dragging{border:2px dashed #e94560;background:#e945600d}.chat-drag-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#1a1a2ef2;display:flex;align-items:center;justify-content:center;z-index:50;pointer-events:none}.chat-drag-content{display:flex;flex-direction:column;align-items:center;gap:16px;color:#e94560}.chat-drag-content p{font-size:1.2rem;font-weight:600}.chat-message{background:#1a1a2e;border-radius:10px;padding:12px 16px;max-width:900px}.chat-message.own{background:#1b2a4a;border-left:3px solid #e94560}.chat-message-meta{display:flex;justify-content:space-between;margin-bottom:6px}.chat-sender{font-size:.85rem;color:#e94560;font-family:monospace;font-weight:600}.chat-time{font-size:.75rem;color:#666}.chat-message-content{font-size:1rem;line-height:1.5;color:#e0e0e0;word-break:break-word}.chat-attachments{display:flex;flex-direction:column;gap:8px;margin-top:8px}.chat-attachment{display:inline-block}.chat-attachment-image{max-width:400px;max-height:300px;border-radius:8px;cursor:pointer;transition:opacity .15s}.chat-attachment-image:hover{opacity:.9}.chat-attachment-file{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#1a1a2e;border:1px solid #333;border-radius:8px;color:#e0e0e0;text-decoration:none;transition:all .15s;max-width:300px}.chat-attachment-file:hover{border-color:#e94560;background:#1b2a4a}.chat-attachment-info{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.chat-attachment-name{font-size:.9rem;color:#e0e0e0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-attachment-size{font-size:.75rem;color:#888}.chat-typing-indicator{padding:8px 24px;font-size:.85rem;font-style:italic;color:#888;flex-shrink:0}.chat-attachment-preview{padding:12px 24px;background:#16213e;border-top:1px solid #333;display:flex;gap:12px;flex-wrap:wrap;flex-shrink:0}.chat-attachment-preview-item{position:relative}.chat-attachment-preview-image{position:relative;width:120px;height:120px;border-radius:8px;overflow:hidden;background:#1a1a2e}.chat-attachment-preview-image img{width:100%;height:100%;object-fit:cover}.chat-attachment-preview-file{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#1a1a2e;border-radius:8px;border:1px solid #333;min-width:200px}.chat-attachment-preview-info{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.chat-attachment-preview-name{font-size:.85rem;color:#e0e0e0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-attachment-preview-size{font-size:.75rem;color:#888}.chat-attachment-preview-remove{padding:4px;border:none;border-radius:4px;background:#e9456033;color:#e94560;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}.chat-attachment-preview-remove:hover{background:#e94560;color:#fff}.chat-input-area{display:flex;gap:12px;padding:16px 24px;border-top:1px solid #333;background:#16213e;flex-shrink:0}.chat-attach-btn{padding:12px;border:1px solid #333;border-radius:8px;background:transparent;color:#888;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}.chat-attach-btn:hover{border-color:#e94560;color:#e94560}.chat-attach-btn:disabled{opacity:.5;cursor:not-allowed}.chat-input{flex:1;padding:12px 16px;border:1px solid #333;border-radius:8px;background:#1a1a2e;color:#e0e0e0;font-size:1rem;outline:none}.chat-input:focus{border-color:#e94560}.chat-send-btn{padding:12px 24px;border:none;border-radius:8px;background:#e94560;color:#fff;font-size:.95rem;cursor:pointer;font-weight:600}.chat-send-btn:hover{background:#c73650}.chat-send-btn:disabled{background:#555;cursor:not-allowed}.chat-message-actions{display:none;gap:6px;margin-top:4px}.chat-message:hover .chat-message-actions{display:flex}.chat-message-actions button{padding:2px 8px;border:1px solid #555;border-radius:4px;background:transparent;color:#888;cursor:pointer;font-size:.7rem}.chat-message-actions button:hover{border-color:#e94560;color:#e94560}.chat-message-edit{display:flex;flex-direction:column;gap:4px;margin-top:4px}.chat-message-edit-input{width:100%;padding:6px 8px;border:1px solid #e94560;border-radius:4px;background:#1a1a2e;color:#e0e0e0;font-size:.85rem;outline:none}.chat-message-edit-actions{display:flex;gap:4px}.chat-edit-save-btn,.chat-edit-cancel-btn{padding:2px 10px;border:none;border-radius:4px;font-size:.7rem;cursor:pointer}.chat-edit-save-btn{background:#52b788;color:#fff}.chat-edit-save-btn:hover{background:#40916c}.chat-edit-cancel-btn{background:#555;color:#ccc}.chat-edit-cancel-btn:hover{background:#777}.chat-edited-tag{margin-left:4px;font-size:.65rem;color:#888;font-style:italic}.chat-reactions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.chat-reaction-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border:1px solid #333;border-radius:12px;background:#1a1a2e;color:#e0e0e0;font-size:.85rem;cursor:pointer;transition:all .15s}.chat-reaction-badge:hover{border-color:#e94560;background:#1b2a4a}.chat-reaction-badge.reacted{border-color:#e94560;background:#2a1a2e}.reaction-emoji{font-size:1rem;line-height:1}.reaction-count{font-size:.75rem;font-weight:600;color:#e94560}.chat-message-footer{display:flex;align-items:center;gap:8px;margin-top:6px}.emoji-picker-container{position:relative}.emoji-picker-trigger{display:inline-flex;align-items:center;justify-content:center;padding:4px;border:1px solid #333;border-radius:4px;background:transparent;color:#888;cursor:pointer;transition:all .15s}.emoji-picker-trigger:hover{border-color:#e94560;color:#e94560}.emoji-picker-popup{position:absolute;bottom:100%;left:0;margin-bottom:8px;background:#16213e;border:1px solid #333;border-radius:8px;box-shadow:0 4px 12px #00000080;z-index:100;width:340px;padding:8px}.emoji-picker-search{display:flex;align-items:center;gap:8px;padding:6px 8px;background:#1a1a2e;border:1px solid #333;border-radius:6px;margin-bottom:8px}.emoji-search-icon{color:#888;flex-shrink:0}.emoji-search-input{flex:1;background:transparent;border:none;color:#e0e0e0;font-size:.9rem;outline:none}.emoji-search-input::placeholder{color:#666}.emoji-picker-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}.emoji-option{padding:6px;border:none;background:transparent;font-size:1.2rem;cursor:pointer;border-radius:4px;transition:background .15s;display:flex;align-items:center;justify-content:center}.emoji-option:hover{background:#1b2a4a}