:root{color-scheme:dark;--bg: #0f1117;--surface: #1a1e2e;--surface-2: #232840;--surface-3: #2d3352;--text: #e6e9f0;--muted: #8a91a8;--accent: #4f7cff;--accent-hover: #6b90ff;--danger: #ff6b6b;--success: #4ade80}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang TC,Microsoft JhengHei,sans-serif;overflow:hidden}.container{max-width:640px;margin:0 auto;height:100%;display:flex;flex-direction:column;padding:12px 16px}.home{margin:auto;width:100%;max-width:360px;display:flex;flex-direction:column;gap:16px;text-align:center}.home h1{font-size:40px;margin:0;letter-spacing:4px}.tagline{color:var(--muted);margin:0 0 16px;font-size:14px;line-height:1.6}.divider{color:var(--muted);font-size:13px;display:flex;align-items:center;gap:12px}.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--surface-2)}.join-form{display:flex;gap:8px}.join-form input{flex:1;background:var(--surface);border:1px solid var(--surface-2);border-radius:10px;padding:12px;color:var(--text);font-size:18px;letter-spacing:4px;text-align:center;text-transform:uppercase}button{font:inherit;cursor:pointer;border:none;border-radius:10px;padding:10px 18px;display:inline-flex;align-items:center;justify-content:center;gap:6px}button:disabled{opacity:.4;cursor:not-allowed}.primary{background:var(--accent);color:#fff;font-weight:600}.primary:hover:not(:disabled){background:var(--accent-hover)}.secondary{background:var(--surface-2);color:var(--text)}.link-btn{background:none;color:var(--accent);padding:4px 8px;font-size:14px}.icon-btn{background:var(--surface);color:var(--text);border:1px solid var(--surface-2);padding:10px;border-radius:10px}.icon-btn:hover:not(:disabled){background:var(--surface-2)}.room{gap:10px}.room-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:4px;border-bottom:1px solid rgba(255,255,255,.06)}.room-header-left{display:flex;align-items:center;gap:12px}.status{color:var(--muted);font-size:13px;display:flex;align-items:center;gap:8px}.status:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--muted)}.status.online:before{background:#4ade80;box-shadow:0 0 8px #4ade8099}.qr-toggle-btn{background:var(--surface);border:1px solid var(--surface-2);color:var(--text);border-radius:20px;padding:4px 10px;font-size:12px;display:flex;align-items:center;gap:6px}.qr-toggle-btn:hover{background:var(--surface-2)}.leave-btn{color:var(--danger);font-size:13px}.peer-bar{display:flex;flex-direction:column;gap:8px;background:var(--surface);border:1px solid rgba(255,255,255,.05);border-radius:12px;padding:10px 12px}.my-profile-card{display:flex;align-items:center;gap:10px}.profile-avatar{width:24px;height:24px;border-radius:6px;flex-shrink:0;box-shadow:0 2px 5px #0003}.profile-info-row{display:flex;align-items:center;gap:6px;cursor:pointer}.profile-name{font-size:15px;font-weight:600;color:var(--text)}.edit-icon-btn{background:none;border:none;padding:2px;color:var(--muted);display:flex;align-items:center}.edit-icon-btn:hover{color:var(--text)}.profile-edit-row{display:flex;align-items:center;gap:6px;flex:1}.profile-edit-row input{background:var(--surface-2);border:1px solid var(--accent);border-radius:6px;color:#fff;padding:4px 8px;font-size:14px;outline:none}.small-btn{padding:4px 10px;font-size:12px;border-radius:6px}.peers-selector{display:flex;align-items:center;gap:8px;overflow-x:auto;padding-top:4px}.peers-selector-label{font-size:12px;color:var(--muted);white-space:nowrap}.peer-chips-scroll{display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none}.peer-chips-scroll::-webkit-scrollbar{display:none}.peer-chip{background:var(--surface-2);border:1px solid transparent;color:var(--text);border-radius:8px;padding:4px 10px;display:flex;align-items:center;gap:6px;font-size:13px;white-space:nowrap;transition:all .15s ease}.peer-chip:hover{background:var(--surface-3)}.peer-chip.active{border-color:var(--accent);background:#4f7cff26}.chip-avatar{width:14px;height:14px;border-radius:4px;font-size:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}.chip-avatar.globe{font-size:12px}.chip-name{font-weight:500}.chip-count{color:var(--muted);font-size:11px}.qr-wrapper{margin-bottom:4px}.room-code{background:var(--surface);border-radius:14px;padding:14px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.05)}.room-code canvas{border-radius:8px}.code-row{display:flex;align-items:center;gap:10px}.code{font-size:24px;font-weight:700;letter-spacing:5px}.hint{color:var(--muted);font-size:12px;margin:0}.timeline{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:8px 0;position:relative}.empty-state{margin:auto;text-align:center;color:var(--muted)}.empty-icon{font-size:40px;margin-bottom:8px;opacity:.8}.empty-state h3{color:var(--text);margin:0 0 6px;font-size:16px}.empty-state p{margin:0;font-size:13px}.bubble-wrapper{display:flex;flex-direction:column;max-width:82%}.bubble-wrapper.in{align-self:flex-start}.bubble-wrapper.out{align-self:flex-end;align-items:flex-end}.bubble-header{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);margin-bottom:3px;padding:0 4px}.sender-dot{width:8px;height:8px;border-radius:2px}.sender-name{font-weight:600}.bubble-time{opacity:.75}.target-badge{background:var(--surface-2);padding:1px 5px;border-radius:4px;font-size:10px;color:var(--accent-hover)}.bubble{padding:10px 14px;border-radius:14px;word-break:break-word;position:relative}.bubble.in{background:var(--surface);border:1px solid rgba(255,255,255,.05);border-bottom-left-radius:4px}.bubble.out{background:var(--accent);color:#fff;border-bottom-right-radius:4px}.bubble.text{display:flex;align-items:flex-start;gap:10px;justify-content:space-between}.text-content{white-space:pre-wrap;line-height:1.45;flex:1}.copy-btn{background:#ffffff14;border:none;color:#ffffffb3;padding:5px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s ease;margin-top:-2px;margin-right:-4px}.bubble.in .copy-btn{background:var(--surface-2);color:var(--muted)}.copy-btn:hover{color:#fff;background:#ffffff2e}.copy-btn.copied{background:#4ade8033}.floating-toast{position:fixed;bottom:80px;left:20px;background:#232840;color:#fff;border:1px solid rgba(74,222,128,.4);box-shadow:0 4px 14px #0006;padding:8px 14px;border-radius:20px;font-size:13px;display:flex;align-items:center;gap:6px;z-index:1000;animation:toastFadeIn .2s ease-out}@keyframes toastFadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.bubble.file{min-width:220px;display:flex;flex-direction:column;gap:8px}.image-preview-container{position:relative;width:100%;max-width:260px;max-height:200px;border-radius:8px;overflow:hidden;background:#000;cursor:pointer;display:flex;align-items:center;justify-content:center}.image-preview{width:100%;height:auto;object-fit:cover;display:block;transition:filter .2s ease}.image-preview.transferring{filter:blur(4px) brightness(.7)}.image-progress-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0006}.image-progress-text{font-size:18px;font-weight:700;color:#fff;background:#0009;padding:4px 10px;border-radius:12px}.file-info-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.file-name{font-weight:600;word-break:break-all;font-size:14px}.file-meta{font-size:12px;opacity:.8;white-space:nowrap}.file-progress-box{display:flex;flex-direction:column;gap:4px}.bubble progress{width:100%;height:6px;border-radius:4px;overflow:hidden}.file-progress-footer{display:flex;justify-content:space-between;align-items:center}.cancel-btn{color:#ffffffd9;font-size:12px;padding:0}.file-status{font-size:12px;font-weight:600}.file-status.done{color:#4ade80}.file-status.cancelled{color:var(--danger)}.download-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#000;padding:6px 12px;border-radius:6px;font-size:13px;font-weight:600;text-decoration:none;align-self:flex-start;margin-top:2px}.download-btn:hover{background:#f0f0f0}.file-meta-group{display:flex;align-items:center;gap:6px;flex-shrink:0}.file-copy-btn{padding:4px;background:#ffffff1a;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;color:var(--text);border:none;cursor:pointer;transition:all .15s ease}.file-copy-btn:hover{background:#fff3}.file-copy-btn.copied{background:#4ade8040}.copy-img-link-btn{display:inline-flex;align-items:center;gap:4px;background:var(--surface-2);color:var(--text);border:1px solid rgba(255,255,255,.1);padding:6px 12px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s ease;margin-top:2px}.copy-img-link-btn:hover{background:var(--surface-3)}.copy-img-link-btn.copied{color:#4ade80;border-color:#4ade80}.lightbox-backdrop{position:fixed;inset:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:2000;padding:20px}.lightbox-content{position:relative;max-width:90vw;max-height:90vh;display:flex;align-items:center;justify-content:center}.lightbox-img{max-width:100%;max-height:90vh;border-radius:8px;box-shadow:0 8px 30px #000c}.lightbox-close-btn{position:absolute;top:-16px;right:-16px;background:#fff3;border:1px solid rgba(255,255,255,.4);color:#fff;width:32px;height:32px;border-radius:50%;font-size:16px;padding:0}.composer{display:flex;gap:8px;padding-top:6px;align-items:center}.text-input{flex:1;background:var(--surface);border:1px solid var(--surface-2);border-radius:10px;padding:12px;color:var(--text);font-size:15px;outline:none}.text-input:focus{border-color:var(--accent)}.attach-btn{padding:10px;border-radius:10px}.send-btn{padding:10px 14px;border-radius:10px}.room.dragging{outline:2px dashed var(--accent);outline-offset:-6px;border-radius:14px}.drop-hint{position:fixed;inset:auto 0 80px;text-align:center;color:var(--accent);font-weight:600;pointer-events:none}.error{color:var(--danger);font-size:13px;margin:0;text-align:center}