*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}#root{display:contents}body.index-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#f8f9fa;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.card{background:#fff;border-radius:16px;box-shadow:0 8px 32px #0000001a;padding:40px 28px;max-width:440px;width:100%;text-align:center}.card h1{font-size:1.8rem;margin-bottom:12px}.sub{color:#666;margin-bottom:28px;line-height:1.55;font-size:1rem}.card ul{list-style:none;text-align:left;margin-bottom:28px}.card ul li{padding:5px 0;color:#555;font-size:.95rem}.btn{background:#0084ff;color:#fff;border:none;border-radius:10px;padding:14px 32px;font-size:1.05rem;cursor:pointer;width:100%;transition:opacity .15s}.btn:disabled{opacity:.6;cursor:not-allowed}.btn:hover:not(:disabled){opacity:.9}.err{color:#e74c3c;margin-top:12px;font-size:.9rem;display:none}body.room-page{height:100vh;height:100dvh;display:flex;flex-direction:column;background:#f0f2f5;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;overflow:hidden}.header{background:#fff;border-bottom:1px solid #e5e7eb;padding:10px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 1px 4px #0000000f;z-index:10;flex-shrink:0}.header-info{flex:1;min-width:0}.header-title{display:flex;align-items:center;gap:8px;font-weight:700;font-size:1rem;color:#111}.ws-dot{width:9px;height:9px;border-radius:50%;background:#f59e0b;flex-shrink:0}.ws-dot.connected{background:#22c55e}.ws-dot.disconnected{background:#ef4444}.online-count{font-size:.82rem;color:#888}.header-link{display:flex;align-items:center;gap:6px;margin-top:3px}.room-url{font-size:.72rem;color:#666;background:#f3f4f6;padding:2px 7px;border-radius:4px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:monospace}.copy-btn{background:none;border:1px solid #d1d5db;border-radius:6px;padding:3px 9px;font-size:.72rem;cursor:pointer;color:#555;white-space:nowrap}.copy-btn.copied{color:#22c55e;border-color:#22c55e}.timer-box{text-align:right;min-width:80px;flex-shrink:0}.timer-label{font-size:.7rem;color:#888}.timer-value{font-size:.9rem;font-weight:600;color:#f59e0b}.timer-value.inf{color:#22c55e}.menu-wrap{position:relative}.menu-btn{background:none;border:none;cursor:pointer;font-size:1.4rem;padding:4px 8px;border-radius:8px;color:#555;line-height:1}.menu-btn:hover{background:#f3f4f6}.dropdown{position:absolute;right:0;top:100%;background:#fff;border:1px solid #e5e7eb;border-radius:10px;box-shadow:0 8px 24px #0000001f;z-index:100;min-width:220px;overflow:hidden;display:none}.dropdown.open{display:block}.menu-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:99;display:none}.menu-overlay.open{display:block}.dropdown-item{display:block;width:100%;padding:13px 16px;background:none;border:none;text-align:left;cursor:pointer;font-size:1rem;color:#333}.dropdown-item:hover{background:#f9fafb}.dropdown-item.red{color:#ef4444}.messages{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px;min-height:0}.empty-hint{text-align:center;color:#aaa;margin-top:40px;font-size:1rem}.sys-msg{text-align:center;color:#9ca3af;font-size:.85rem;font-style:italic;padding:4px 0}.msg-row{display:flex;align-items:flex-end;gap:8px}.msg-row.mine{flex-direction:row-reverse}.avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:#fff;flex-shrink:0}.msg-col{max-width:75%;display:flex;flex-direction:column}.msg-row.mine .msg-col{align-items:flex-end}.msg-sender{font-size:.8rem;color:#6b7280;margin-bottom:2px;padding-left:4px}.bubble{border-radius:18px 18px 18px 4px;background:#f0f0f0;color:#111;padding:9px 14px;font-size:1rem;line-height:1.45;word-break:break-word}.msg-row.mine .bubble{border-radius:18px 18px 4px;background:#0084ff;color:#fff}.msg-time{font-size:.72rem;color:#9ca3af;margin-top:3px;padding:0 4px}.file-card{display:flex;align-items:center;gap:10px;background:#ffffff26;border-radius:10px;padding:10px 14px;min-width:180px;text-decoration:none;color:inherit}.bubble:not(.mine-bubble) .file-card{background:#e5e7eb}.file-icon{font-size:1.8rem;flex-shrink:0}.file-info{flex:1;min-width:0}.file-name{font-size:.9rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-size{font-size:.8rem;opacity:.75}.file-dl{font-size:1rem;opacity:.7}.preview-img{max-width:280px;max-height:200px;border-radius:8px;display:block;cursor:pointer}.preview-video{max-width:280px;max-height:200px;border-radius:8px;display:block}.file-caption{font-size:.78rem;margin-top:4px;opacity:.85}.file-caption a{color:#fff}.bubble:not(.mine-bubble) .file-caption a{color:#0084ff}.upload-bar{background:#fff;border-top:1px solid #f0f0f0;padding:6px 14px;flex-shrink:0}.upload-label{font-size:.85rem;color:#555;margin-bottom:4px;text-align:center}.progress-track{background:#e5e7eb;border-radius:999px;height:6px;max-width:300px;margin:0 auto;overflow:hidden}.progress-fill{background:#0084ff;height:100%;border-radius:999px;transition:width .3s}.typing-bar{display:flex;align-items:center;gap:8px;padding:4px 16px;background:#fff;flex-shrink:0;min-height:28px}.typing-text{font-size:.82rem;color:#9ca3af}.typing-dots{display:flex;gap:3px;align-items:center}.typing-dots span{width:6px;height:6px;border-radius:50%;background:#9ca3af;animation:typingBounce 1.2s ease-in-out infinite}.typing-dots span:nth-child(2){animation-delay:.2s}.typing-dots span:nth-child(3){animation-delay:.4s}@keyframes typingBounce{0%,80%,to{transform:translateY(0);opacity:.4}40%{transform:translateY(-5px);opacity:1}}.input-area{background:#fff;border-top:1px solid #e5e7eb;padding:10px 14px;padding-bottom:calc(10px + env(safe-area-inset-bottom));flex-shrink:0}.legacy-row{display:flex;align-items:center;gap:6px;margin-bottom:8px;font-size:.82rem;color:#888}.input-row{display:flex;align-items:flex-end;gap:8px}.name-avatar{border:none;border-radius:50%;width:40px;height:40px;cursor:pointer;font-size:.8rem;font-weight:700;color:#fff;flex-shrink:0}textarea.msg-input{flex:1;border:1px solid #d1d5db;border-radius:20px;padding:10px 16px;resize:none;outline:none;line-height:1.4;max-height:120px;overflow-y:auto;font-family:inherit;font-size:16px}textarea.msg-input:focus{border-color:#0084ff}.icon-btn{background:#f3f4f6;border:none;border-radius:50%;width:40px;height:40px;cursor:pointer;font-size:1.2rem;flex-shrink:0;display:flex;align-items:center;justify-content:center}.send-btn{background:#0084ff;color:#fff;border:none;border-radius:50%;width:40px;height:40px;cursor:pointer;font-size:1.2rem;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:background .15s}.send-btn:disabled{background:#d1d5db;cursor:default}.modal-bg{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000073;display:none;align-items:center;justify-content:center;z-index:200;padding:16px}.modal-bg.open{display:flex}.modal{background:#fff;border-radius:16px;padding:24px;width:100%;max-width:340px;box-shadow:0 20px 60px #0003}.modal h3{margin-bottom:14px;font-size:1.1rem}.modal input{width:100%;border:1px solid #d1d5db;border-radius:8px;padding:12px 14px;font-size:16px;outline:none}.modal input:focus{border-color:#0084ff}.modal-btns{display:flex;gap:8px;margin-top:14px;justify-content:flex-end;flex-wrap:wrap}.modal-cancel{background:none;border:1px solid #d1d5db;border-radius:8px;padding:9px 16px;cursor:pointer;font-size:.95rem}.modal-save{background:#0084ff;color:#fff;border:none;border-radius:8px;padding:9px 16px;cursor:pointer;font-size:.95rem}.modal-remove{background:#ef4444;color:#fff;border:none;border-radius:8px;padding:9px 16px;cursor:pointer;font-size:.95rem}.pin-status{font-size:.9rem;color:#6b7280;margin-bottom:14px}.pin-status.set{color:#22c55e;font-weight:600}.toasts{position:fixed;bottom:80px;right:16px;display:flex;flex-direction:column;gap:8px;z-index:300;pointer-events:none}.toast{color:#fff;border-radius:10px;padding:11px 16px;font-size:.9rem;box-shadow:0 4px 16px #0003;max-width:300px;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}#pinScreen{position:fixed;top:0;right:0;bottom:0;left:0;background:#f0f2f5;z-index:1000;display:none;align-items:center;justify-content:center}.pin-card{background:#fff;border-radius:16px;padding:36px 28px;width:100%;max-width:320px;text-align:center;box-shadow:0 8px 32px #0000001f}.pin-icon{font-size:2.4rem;margin-bottom:14px}.pin-card h2{font-size:1.2rem;margin-bottom:6px}.pin-card>p{color:#666;font-size:.95rem;margin-bottom:20px}.pin-error{color:#ef4444;font-size:.88rem;min-height:1.2em;margin-bottom:8px}.pin-input{width:100%;border:2px solid #d1d5db;border-radius:12px;padding:13px;font-size:16px;text-align:center;letter-spacing:10px;outline:none;margin-bottom:12px;font-family:monospace;transition:border-color .15s}.pin-input:focus{border-color:#0084ff}.pin-input.error{border-color:#ef4444}.pin-submit{width:100%;background:#0084ff;color:#fff;border:none;border-radius:10px;padding:13px;font-size:1rem;cursor:pointer;transition:opacity .15s}.pin-submit:disabled{opacity:.45;cursor:not-allowed}.pin-back{display:block;margin-top:16px;color:#9ca3af;font-size:.88rem;text-decoration:none}.pin-back:hover{color:#555}#expiredOverlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#f8f9fa;z-index:999;display:none;align-items:center;justify-content:center}.expired-card{text-align:center;background:#fff;border-radius:16px;padding:40px 28px;max-width:320px;width:100%;box-shadow:0 8px 32px #0000001a}.expired-icon{font-size:3rem;margin-bottom:16px}.expired-card h2{margin-bottom:12px;font-size:1.2rem}.expired-card p{color:#666;margin-bottom:24px;font-size:.95rem}.expired-card a{background:#0084ff;color:#fff;border:none;border-radius:10px;padding:12px 32px;font-size:1rem;cursor:pointer;text-decoration:none;display:inline-block}.pin-option{margin-bottom:20px;text-align:left}.pin-toggle{display:flex;align-items:center;gap:8px;font-size:.92rem;color:#555;cursor:pointer;-webkit-user-select:none;user-select:none;margin-bottom:8px}.pin-create-input{width:100%;border:1px solid #d1d5db;border-radius:8px;padding:11px 14px;font-size:16px;letter-spacing:6px;font-family:monospace;text-align:center;outline:none;transition:border-color .15s;margin-top:6px}.pin-create-input:focus{border-color:#0084ff}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}@media (min-width: 600px){body.room-page{max-width:760px;margin:0 auto}.msg-col{max-width:68%}.preview-img,.preview-video{max-width:340px;max-height:240px}}