*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #E8E8EE;--bg-warm: #EEEEF4;--light: #FFFFFF;--dark: #C8C8D4;--primary: #5C6BC0;--primary-dim: #DDE0F5;--text: #2A2A3A;--text-sub: #8888A8;--text-muted: #AAAAC0;--danger: #C62828;--raised: 6px 6px 14px var(--dark), -6px -6px 14px var(--light);--raised-sm: 3px 3px 8px var(--dark), -3px -3px 8px var(--light);--raised-xs: 2px 2px 5px var(--dark), -2px -2px 5px var(--light);--inset: inset 4px 4px 10px var(--dark), inset -4px -4px 10px var(--light);--inset-sm: inset 2px 2px 6px var(--dark), inset -2px -2px 6px var(--light);--radius-xs: 8px;--radius-sm: 12px;--radius-md: 18px;--radius-lg: 24px;--radius-xl: 30px;--radius-full: 999px;--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}#root{display:contents}body.index-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);font-family:var(--font)}.card{background:var(--bg);border-radius:var(--radius-xl);box-shadow:var(--raised);padding:40px 32px;max-width:440px;width:100%;text-align:center}.card h1{font-size:1.75rem;margin-bottom:12px;color:var(--text);font-weight:700}.sub{color:var(--text-sub);margin-bottom:26px;line-height:1.6;font-size:.95rem}.card ul{list-style:none;text-align:left;margin-bottom:26px}.card ul li{padding:5px 0;color:var(--text-sub);font-size:.92rem}.btn{background:var(--bg);color:var(--primary);border:none;border-radius:var(--radius-full);padding:15px 32px;font-size:1rem;font-weight:700;cursor:pointer;width:100%;box-shadow:var(--raised);transition:box-shadow .15s;font-family:var(--font);letter-spacing:.3px}.btn:hover:not(:disabled){box-shadow:var(--raised-sm)}.btn:active:not(:disabled){box-shadow:var(--inset-sm)}.btn:disabled{opacity:.5;cursor:not-allowed}.err{color:var(--danger);margin-top:12px;font-size:.88rem;display:none}body.room-page{height:100vh;height:100dvh;display:flex;flex-direction:column;background:var(--bg);font-family:var(--font);overflow:hidden;width:100%}.header{background:var(--bg);padding:12px 16px;display:flex;align-items:center;gap:12px;box-shadow:0 4px 10px var(--dark),0 -1px 0 var(--light);z-index:10;flex-shrink:0;border-radius:21px;box-shadow:var(--raised-sm)}.header-info{flex:1;min-width:0}.header-title{display:flex;align-items:center;gap:8px;font-weight:700;font-size:1.1rem;color:var(--text)}.ws-dot{width:8px;height:8px;border-radius:50%;background:#ffb300;flex-shrink:0}.ws-dot.connected{background:#43a047}.ws-dot.disconnected{background:#e53935}.online-count{font-size:.82rem;color:var(--primary);font-weight:700;background:var(--bg);padding:2px 10px;border-radius:var(--radius-full);box-shadow:var(--inset-sm)}.header-link{display:flex;align-items:center;gap:6px;margin-top:4px}.room-url{font-size:.68rem;color:var(--text-sub);padding:3px 10px;border-radius:var(--radius-full);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:monospace;box-shadow:var(--inset-sm);background:var(--bg)}.copy-btn{background:var(--bg);border:none;border-radius:var(--radius-full);padding:3px 12px;font-size:.68rem;cursor:pointer;color:var(--primary);font-weight:700;white-space:nowrap;box-shadow:var(--raised-xs);transition:box-shadow .12s;font-family:var(--font)}.copy-btn:hover{box-shadow:var(--raised-sm)}.copy-btn:active{box-shadow:var(--inset-sm)}.copy-btn.copied{color:#43a047}.timer-box{text-align:right;min-width:76px;flex-shrink:0}.timer-label{font-size:.64rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.timer-value{font-size:.9rem;font-weight:700;color:#ffa000}.timer-value.inf{color:#43a047}.menu-wrap{position:relative}.menu-btn{background:var(--bg);border:none;cursor:pointer;font-size:1.4rem;padding:6px 9px;border-radius:var(--radius-full);color:var(--text-sub);line-height:1;box-shadow:var(--raised-xs);transition:box-shadow .12s}.menu-btn:hover{box-shadow:var(--raised-sm)}.menu-btn:active{box-shadow:var(--inset-sm)}.dropdown{position:absolute;right:0;top:calc(100% + 8px);background:var(--bg);border-radius:var(--radius-lg);box-shadow:var(--raised);z-index:100;min-width:230px;overflow:hidden;display:none;padding:6px 0}.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 20px;background:none;border:none;text-align:left;cursor:pointer;font-size:.95rem;color:var(--text);font-family:var(--font);transition:color .12s}.dropdown-item:active{color:var(--primary)}.dropdown-item.red{color:var(--danger)}.messages{flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:6px;min-height:0}.empty-hint{text-align:center;color:var(--text-muted);margin-top:60px;font-size:.95rem}.sys-msg{display:flex;align-items:center;justify-content:center;margin:6px auto;max-width:fit-content;font-size:.85rem;font-style:normal;color:var(--text-sub);font-weight:500;background:var(--bg);border-radius:var(--radius-full);padding:4px 14px;box-shadow:var(--inset-sm);white-space:nowrap}.sys-time{font-size:.7rem;margin-left:6px;opacity:.7}.msg-row{display:flex;align-items:flex-end;gap:8px}.msg-row.mine{flex-direction:row-reverse}.avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:700;color:#fff;flex-shrink:0;box-shadow:var(--raised-xs)}.msg-col{max-width:78%;display:flex;flex-direction:column}.msg-row.mine .msg-col{align-items:flex-end}.msg-sender{font-size:.82rem;color:var(--primary);font-weight:700;margin-bottom:4px;padding-left:14px}.bubble{border-radius:22px 22px 22px 6px;background:var(--bg);color:var(--text);padding:10px 16px;font-size:1.05rem;line-height:1.5;word-break:break-word;box-shadow:var(--raised-sm)}.msg-row.mine .bubble{border-radius:22px 22px 6px;color:#af9044}.msg-time{font-size:.75rem;color:var(--text-muted);margin-top:4px;padding:0 6px;display:flex;align-items:center;gap:3px}.msg-row.mine .msg-time{justify-content:flex-end}.read-tick{font-size:.67rem;color:var(--text-muted)}.read-tick.read{color:#b39b3e}.date-sep{display:flex;align-items:center;justify-content:center;padding:10px 0 6px}.date-sep span{font-size:.72rem;color:var(--text-sub);font-weight:600;background:var(--bg);border-radius:var(--radius-full);padding:4px 16px;box-shadow:var(--inset-sm);white-space:nowrap}.file-card{display:flex;align-items:center;gap:10px;background:var(--bg);border-radius:var(--radius-md);padding:10px 14px;min-width:180px;text-decoration:none;color:inherit;box-shadow:var(--raised-xs)}.msg-row.mine .file-card{box-shadow:var(--inset-sm);background:var(--primary-dim)}.file-icon{font-size:1.8rem;flex-shrink:0}.file-info{flex:1;min-width:0}.file-name{font-size:.88rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}.file-size{font-size:.78rem;color:var(--text-sub)}.file-dl{font-size:1rem;color:var(--text-muted)}.preview-img{max-width:260px;max-height:200px;border-radius:var(--radius-sm);display:block;cursor:pointer;box-shadow:var(--raised-sm)}.preview-video{max-width:260px;max-height:200px;border-radius:var(--radius-sm);display:block;box-shadow:var(--raised-sm)}.file-caption{font-size:.76rem;margin-top:4px}.file-caption a,.msg-row.mine .file-caption a{color:var(--primary)}.upload-bar{background:var(--bg);padding:6px 16px;flex-shrink:0;box-shadow:inset 0 1px 0 var(--dark)}.upload-label{font-size:.82rem;color:var(--text-sub);margin-bottom:4px;text-align:center}.progress-track{background:var(--bg);border-radius:var(--radius-full);height:6px;max-width:300px;margin:0 auto;overflow:hidden;box-shadow:var(--inset-sm)}.progress-fill{background:var(--primary);height:100%;border-radius:var(--radius-full);transition:width .3s}.typing-bar{display:flex;align-items:center;gap:8px;padding:4px 16px 6px;background:var(--bg);flex-shrink:0;min-height:30px}.typing-text{font-size:.78rem;color:var(--text-muted)}.typing-dots{display:flex;gap:4px;align-items:center}.typing-dots span{width:7px;height:7px;border-radius:50%;background:var(--bg);box-shadow:var(--raised-xs);animation:typingBounce 1.3s ease-in-out infinite}.typing-dots span:nth-child(2){animation-delay:.18s}.typing-dots span:nth-child(3){animation-delay:.36s}@keyframes typingBounce{0%,80%,to{transform:translateY(0);box-shadow:var(--raised-xs)}40%{transform:translateY(-5px);box-shadow:var(--raised-sm)}}.input-area{background:var(--bg);box-shadow:0 -4px 10px var(--dark),0 1px 0 var(--light);padding:10px 14px;padding-bottom:calc(10px + env(safe-area-inset-bottom));flex-shrink:0;border-radius:21px;box-shadow:var(--raised-sm)}.legacy-row{display:flex;align-items:center;gap:6px;margin-bottom:8px;font-size:.76rem;color:var(--text-muted)}.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:.75rem;font-weight:700;color:#fff;flex-shrink:0;box-shadow:var(--raised-sm);transition:box-shadow .15s}.name-avatar:active{box-shadow:var(--inset-sm)}textarea.msg-input{flex:1;border:none;border-radius:var(--radius-full);padding:11px 18px;resize:none;outline:none;line-height:1.4;max-height:120px;overflow-y:auto;font-family:var(--font);font-size:18px;background:var(--bg);color:var(--text);box-shadow:var(--inset);transition:box-shadow .15s}textarea.msg-input::placeholder{color:var(--text-muted)}textarea.msg-input:focus{box-shadow:var(--inset),0 0 0 2px #5c6bc026}.icon-btn{background:var(--bg);border:none;border-radius:50%;width:40px;height:40px;cursor:pointer;font-size:1.15rem;flex-shrink:0;display:flex;align-items:center;justify-content:center;box-shadow:var(--raised-sm);transition:box-shadow .12s}.icon-btn:hover{box-shadow:var(--raised)}.icon-btn:active{box-shadow:var(--inset-sm)}.send-btn{background:var(--bg);color:var(--primary);border:none;border-radius:50%;width:42px;height:42px;cursor:pointer;font-size:1.1rem;flex-shrink:0;display:flex;align-items:center;justify-content:center;box-shadow:var(--raised-sm);transition:box-shadow .15s;font-weight:700}.send-btn:hover:not(:disabled){box-shadow:var(--raised)}.send-btn:active:not(:disabled){box-shadow:var(--inset-sm)}.send-btn:disabled{color:var(--text-muted);box-shadow:var(--raised-xs);cursor:default}.modal-bg{position:fixed;top:0;right:0;bottom:0;left:0;background:#28283c59;display:none;align-items:center;justify-content:center;z-index:200;padding:20px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.modal-bg.open{display:flex}.modal{background:var(--bg);border-radius:var(--radius-xl);padding:28px 24px;width:100%;max-width:360px;box-shadow:var(--raised)}.modal h3{margin-bottom:18px;font-size:1.1rem;color:var(--text);font-weight:700}.modal input{width:100%;border:none;border-radius:var(--radius-sm);padding:13px 16px;font-size:18px;outline:none;font-family:var(--font);color:var(--text);background:var(--bg);box-shadow:var(--inset)}.modal input:focus{box-shadow:var(--inset),0 0 0 2px #5c6bc026}.modal-btns{display:flex;gap:8px;margin-top:18px;justify-content:flex-end;flex-wrap:wrap}.modal-cancel{background:var(--bg);border:none;border-radius:var(--radius-full);padding:9px 18px;cursor:pointer;font-size:.9rem;color:var(--text-sub);font-family:var(--font);font-weight:600;box-shadow:var(--raised-xs);transition:box-shadow .12s}.modal-cancel:hover{box-shadow:var(--raised-sm)}.modal-cancel:active{box-shadow:var(--inset-sm)}.modal-save{background:var(--bg);color:var(--primary);border:none;border-radius:var(--radius-full);padding:9px 20px;cursor:pointer;font-size:.9rem;font-family:var(--font);font-weight:700;box-shadow:var(--raised-sm);transition:box-shadow .12s}.modal-save:hover{box-shadow:var(--raised)}.modal-save:active{box-shadow:var(--inset-sm)}.modal-remove{background:var(--bg);color:var(--danger);border:none;border-radius:var(--radius-full);padding:9px 20px;cursor:pointer;font-size:.9rem;font-family:var(--font);font-weight:700;box-shadow:var(--raised-sm);transition:box-shadow .12s}.modal-remove:active{box-shadow:var(--inset-sm)}.pin-status{font-size:.88rem;color:var(--text-sub);margin-bottom:16px;font-weight:500}.pin-status.set{color:#43a047}.toasts{position:fixed;bottom:80px;right:16px;display:flex;flex-direction:column;gap:8px;z-index:300;pointer-events:none}.toast{background:var(--bg);color:var(--text);border-radius:var(--radius-sm);padding:13px 18px;font-size:.88rem;box-shadow:var(--raised);max-width:300px;animation:fadeInUp .22s ease;font-family:var(--font);font-weight:600}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}#pinScreen{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--bg);z-index:1000;display:none;align-items:center;justify-content:center}.pin-card{background:var(--bg);border-radius:var(--radius-xl);padding:40px 32px;width:100%;max-width:320px;text-align:center;box-shadow:var(--raised)}.pin-icon{font-size:2.6rem;margin-bottom:16px}.pin-card h2{font-size:1.25rem;margin-bottom:8px;color:var(--text);font-weight:700}.pin-card>p{color:var(--text-sub);font-size:.92rem;margin-bottom:24px}.pin-error{color:var(--danger);font-size:.85rem;min-height:1.2em;margin-bottom:10px;font-weight:500}.pin-input{width:100%;border:none;border-radius:var(--radius-md);padding:14px;font-size:22px;text-align:center;letter-spacing:12px;outline:none;margin-bottom:14px;font-family:monospace;background:var(--bg);color:var(--text);box-shadow:var(--inset);transition:box-shadow .15s}.pin-input:focus{box-shadow:var(--inset),0 0 0 2px #5c6bc026}.pin-input.error{box-shadow:var(--inset),0 0 0 2px #c6282840}.pin-submit{width:100%;background:var(--bg);color:var(--primary);border:none;border-radius:var(--radius-full);padding:14px;font-size:1rem;font-weight:700;cursor:pointer;box-shadow:var(--raised-sm);transition:box-shadow .15s;font-family:var(--font)}.pin-submit:hover:not(:disabled){box-shadow:var(--raised)}.pin-submit:active:not(:disabled){box-shadow:var(--inset-sm)}.pin-submit:disabled{opacity:.45;cursor:not-allowed}.pin-back{display:block;margin-top:18px;color:var(--text-muted);font-size:.85rem;text-decoration:none}.pin-back:hover{color:var(--primary)}#expiredOverlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--bg);z-index:999;display:none;align-items:center;justify-content:center}.expired-card{text-align:center;background:var(--bg);border-radius:var(--radius-xl);padding:44px 32px;max-width:320px;width:100%;box-shadow:var(--raised)}.expired-icon{font-size:3.2rem;margin-bottom:18px}.expired-card h2{margin-bottom:12px;font-size:1.3rem;font-weight:700;color:var(--text)}.expired-card p{color:var(--text-sub);margin-bottom:28px;font-size:.92rem;line-height:1.55}.expired-card a{background:var(--bg);color:var(--primary);border:none;border-radius:var(--radius-full);padding:13px 36px;font-size:.97rem;font-weight:700;cursor:pointer;text-decoration:none;display:inline-block;box-shadow:var(--raised-sm);transition:box-shadow .15s}.expired-card a:hover{box-shadow:var(--raised)}.expired-card a:active{box-shadow:var(--inset-sm)}.pin-option{margin-bottom:22px;text-align:left}.pin-toggle{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--text-sub);cursor:pointer;-webkit-user-select:none;user-select:none;margin-bottom:10px;font-weight:500}.pin-create-input{width:100%;border:none;border-radius:var(--radius-md);padding:12px 16px;font-size:18px;letter-spacing:8px;font-family:monospace;text-align:center;outline:none;background:var(--bg);color:var(--text);box-shadow:var(--inset);transition:box-shadow .15s;margin-top:6px}.pin-create-input:focus{box-shadow:var(--inset),0 0 0 2px #5c6bc026}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--dark);border-radius:var(--radius-full)}@media (min-width: 600px){body.room-page{max-width:780px;margin:0 auto}.msg-col{max-width:68%}.preview-img,.preview-video{max-width:340px;max-height:240px}.sys-msg{font-size:16px!important}}