:root{--blue:#1ba0e1;--blue-shadow:#167fc0;--red:#e53d3e;--red-shadow:#b43030;--green:#50c606;--green-shadow:#4da002;--gray:#eeeeee;--gray-shadow:#d4d4d4;--divider:#f2f2f2;--line:rgba(0,0,0,0.05)}*{margin:0;padding:0;box-sizing:border-box}body,html{height:100%}body{background:#fff;color:#000;font-family:-apple-system,BlinkMacSystemFont,SF Pro,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}body,button{-webkit-user-select:none;-moz-user-select:none;user-select:none}button{font:inherit;border:none;background:none;cursor:pointer;color:inherit;touch-action:manipulation}.phone{position:relative;max-width:420px;margin:0 auto;height:100dvh}.join{flex-direction:column;justify-content:center;gap:24px;height:100%;padding:24px}.codeBox,.join{display:flex;align-items:center}.codeBox{justify-content:space-between;width:100%;height:104px;padding:16px;border:4px solid var(--line);border-radius:28px;cursor:text}.codeCell{flex:1 0;display:flex;align-items:center;justify-content:center;height:100%;font-size:56px;font-weight:600;color:#000}.codeCell.empty{color:var(--divider)}.codeDivider{width:4px;height:64px;border-radius:2px;background:var(--divider);flex-shrink:0}.hiddenInput{position:absolute;opacity:0;width:1px;height:1px;border:none;pointer-events:none}.joinBtn{display:flex;align-items:center;justify-content:center;width:100%;height:104px;border:4px solid var(--line);border-radius:28px;background:var(--gray);color:#fff;transition:background .15s ease,transform .06s ease}.joinBtn:active{transform:scale(.98)}.joinBtn.ready{background:var(--blue)}.joinBtn.create{background:var(--green)}.joinBtn.error{background:var(--red);animation:shake .35s ease}@keyframes shake{0%,to{translate:0 0}20%{translate:-8px 0}40%{translate:8px 0}60%{translate:-5px 0}80%{translate:5px 0}}.room{height:100%;overflow:hidden}.roomCode{position:absolute;top:max(20px,env(safe-area-inset-top));left:50%;translate:-50% 0;display:flex;align-items:center;justify-content:center;min-height:32px;font-size:15px;font-weight:700;letter-spacing:6px;color:#d5d5d5;padding:6px 10px 6px 16px;transition:color .15s ease,transform .06s ease}.roomCode:active{transform:scale(.92)}.roomCode.copied{color:var(--green)}.emojiChip{position:absolute;top:17%;left:50%;translate:-50% 0;width:104px;height:104px;display:flex;align-items:center;justify-content:center;background:var(--gray);border:3px solid var(--line);border-radius:26px;font-size:44px;line-height:1;transition:transform .06s ease}.emojiChip:active{transform:scale(.95)}.pickerBackdrop{position:absolute;inset:0;z-index:5}.picker{position:absolute;top:calc(17% + 116px);left:50%;translate:-50% 0;z-index:6;display:grid;grid-template-columns:repeat(6,48px);grid-gap:4px;gap:4px;padding:12px;background:#fff;border:3px solid var(--line);border-radius:26px;box-shadow:0 12px 0 0 var(--line)}.picker button{width:48px;height:48px;display:flex;align-items:center;justify-content:center;font-size:28px;line-height:1;border-radius:14px}.picker button.selected,.picker button:active{background:var(--divider)}.bigBtn{position:absolute;top:50%;left:50%;translate:-50% -50%;width:208px;height:200px;display:flex;align-items:center;justify-content:center;border:4px solid var(--line);border-radius:56px;color:#fff;background:var(--red);box-shadow:0 12px 0 0 var(--red-shadow);transition:background .15s ease,box-shadow .08s ease,translate .08s ease}.bigBtn.recording{translate:-50% calc(-50% + 12px);box-shadow:0 0 0 0 var(--red-shadow),inset 0 8px 8px 0 var(--red-shadow)}.bigBtn.uploading{background:var(--blue);box-shadow:0 12px 0 0 var(--blue-shadow)}.bigBtn.done{background:var(--green);box-shadow:0 12px 0 0 var(--green-shadow)}.bigBtn.failed{background:var(--red);box-shadow:0 12px 0 0 var(--red-shadow);animation:shake .35s ease}.spin{animation:spin 1.6s linear infinite;transform-origin:center}@keyframes spin{to{transform:rotate(1turn)}}.recDot{position:absolute;top:max(20px,env(safe-area-inset-top));right:24px;width:14px;height:14px;border-radius:50%;background:var(--red);animation:blink 1.1s ease infinite}@keyframes blink{50%{opacity:.25}}.messages{position:absolute;top:calc(50% + 196px);bottom:0;left:0;right:0;overflow-y:auto;padding:8px 24px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:24px;scrollbar-width:none}.messages::-webkit-scrollbar{display:none}.msg{position:relative;gap:16px;height:88px;padding:16px;border:3px solid var(--line);border-radius:26px;background:#fff}.msg,.playBtn{display:flex;align-items:center;flex-shrink:0}.playBtn{width:56px;height:56px;justify-content:center;background:var(--blue);border:2px solid var(--line);border-radius:16px;color:#fff;transition:transform .06s ease}.playBtn:active{transform:scale(.94)}.wave{flex:1 0;min-width:0;height:32px;display:flex;align-items:center;justify-content:space-between;overflow:hidden}.bar{width:4px;flex-shrink:0;border-radius:2px;background:var(--blue);opacity:.2}.bar.played{opacity:1}.msgEmoji{width:56px;height:56px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--gray);border:3px solid var(--line);border-radius:16px;font-size:32px;line-height:1}.unreadDot{position:absolute;top:-6px;right:-6px;width:19px;height:19px;border-radius:50%;background:var(--red)}.empty-hint{color:#ccc;font-size:15px;font-weight:600;text-align:center;margin-top:16px}