:root{color-scheme:dark;--bg: #0b0b0f;--panel: #15151c;--fg: #f5f5f7;--muted: #8a8a94;--accent: #6f6fff;--bubble-me: #6f6fff;--bubble-them: #23232e;--line: #23232e}*{box-sizing:border-box}html,body{height:100%;margin:0}#root{height:100dvh;height:var(--app-height, 100dvh)}body{background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;overscroll-behavior:none}button{font:inherit;cursor:pointer}input{font:inherit}.btn{border:1px solid var(--line);background:var(--panel);color:var(--fg);border-radius:999px;padding:.6rem 1.1rem;transition:transform .05s ease,opacity .2s ease}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.5}.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}.btn.ghost{background:transparent}.btn.sm{padding:.4rem .8rem;font-size:.85rem}.btn.big{padding:.9rem 1.6rem;font-size:1.05rem}.home{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:2rem 1.25rem calc(2rem + env(safe-area-inset-bottom));text-align:center}.logo{font-size:clamp(2.5rem,12vw,4.5rem);font-weight:800;letter-spacing:.05em;background:linear-gradient(135deg,var(--fg),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}.logo.small{font-size:2rem}.tag{color:var(--muted);margin:0 0 .5rem}.error{color:#ff6b6b;font-size:.9rem}.recent{width:100%;max-width:420px;margin-top:1rem;text-align:left}.recent-title{color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.5rem}.recent-item{width:100%;display:flex;justify-content:space-between;align-items:center;background:var(--panel);border:1px solid var(--line);color:var(--fg);border-radius:12px;padding:.75rem 1rem;margin-bottom:.5rem}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9rem}.chev{color:var(--muted)}.room{height:100%;display:flex;flex-direction:column;overflow:hidden}.hint{width:100%;text-align:left;background:#2a2a1a;color:#f0e6a0;border:none;border-bottom:1px solid var(--line);padding:.6rem .9rem;font-size:.85rem;line-height:1.3;cursor:pointer}.room-head{display:flex;align-items:center;gap:.5rem;padding:calc(.6rem + env(safe-area-inset-top)) .75rem .6rem;border-bottom:1px solid var(--line);background:var(--bg)}.icon{background:transparent;border:none;color:var(--fg);font-size:1.6rem;line-height:1;padding:0 .4rem}.room-title{flex:1;display:flex;align-items:center;gap:.5rem;font-weight:600}.dot{width:8px;height:8px;border-radius:50%;background:var(--muted)}.dot[data-on=true]{background:#35c759}.head-actions{display:flex;gap:.4rem}.messages{flex:1;overflow-y:auto;padding:1rem .85rem;display:flex;flex-direction:column;gap:.35rem}.empty{margin:auto;text-align:center;color:var(--muted);display:flex;flex-direction:column;gap:1rem;align-items:center}.msg{max-width:78%;align-self:flex-start}.msg.mine{align-self:flex-end}.who{font-size:.72rem;color:var(--muted);margin:0 0 .15rem .6rem}.bubble{background:var(--bubble-them);padding:.55rem .8rem;border-radius:16px 16px 16px 5px;line-height:1.35;word-break:break-word}.msg.mine .bubble{background:var(--bubble-me);color:#fff;border-radius:16px 16px 5px}.tick{font-size:.7rem;opacity:.7;margin-left:.4rem}.typing{align-self:flex-start;color:var(--muted);font-size:.8rem;padding:.2rem .6rem}.composer{display:flex;gap:.5rem;padding:.6rem .75rem calc(.6rem + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--bg)}.composer input{flex:1;background:var(--panel);border:1px solid var(--line);color:var(--fg);border-radius:999px;padding:.7rem 1rem;outline:none}.composer input:focus{border-color:var(--accent)}.btn.send{width:44px;padding:0;font-size:1.2rem}.name-input{width:100%;max-width:320px;background:var(--panel);border:1px solid var(--line);color:var(--fg);border-radius:999px;padding:.7rem 1.1rem;text-align:center;outline:none}.name-input:focus{border-color:var(--accent)}.day-sep{align-self:center;margin:.5rem 0;color:var(--muted);font-size:.72rem}.day-sep span{background:var(--panel);padding:.15rem .7rem;border-radius:999px}.sys-line{align-self:center;color:var(--muted);font-size:.75rem;padding:.15rem 0}.bubble .body{white-space:pre-wrap}.bubble .body a{color:inherit;text-decoration:underline}.bubble .meta{display:block;text-align:right;font-size:.65rem;opacity:.6;margin-top:.15rem}.msg.mine .bubble .meta{color:#eaeaff}.sheet-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;display:flex;align-items:flex-end;justify-content:center;z-index:50}.sheet{width:100%;max-width:420px;background:var(--panel);border:1px solid var(--line);border-radius:20px 20px 0 0;padding:1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:.9rem}.sheet-title{font-weight:600}.qr{width:200px;height:200px;border-radius:12px;background:#fff;padding:8px}.share-url{font-size:.8rem;color:var(--muted);word-break:break-all;text-align:center}.sheet-actions{display:flex;gap:.6rem;width:100%}.sheet-actions .btn{flex:1}.sheet-close{background:transparent;border:none;color:var(--muted);padding:.3rem}.bubble{cursor:pointer}.bubble.deleted{font-style:italic;color:var(--muted);background:transparent;border:1px dashed var(--line);cursor:default}.quote{display:flex;flex-direction:column;border-left:3px solid rgba(255,255,255,.4);padding:.1rem .5rem;margin-bottom:.3rem;font-size:.8rem;opacity:.85}.quote-who{font-weight:600}.quote-body{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60vw}.meta .edited{margin-right:.35rem;font-style:italic}.compose-ctx{display:flex;align-items:center;gap:.5rem;padding:.5rem .9rem;border-top:1px solid var(--line);background:var(--panel)}.compose-ctx .ctx-text{flex:1;min-width:0;display:flex;flex-direction:column;font-size:.8rem}.compose-ctx .ctx-text b{color:var(--accent)}.compose-ctx .ctx-text span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}.sheet.menu{gap:0;padding:.5rem .5rem calc(.5rem + env(safe-area-inset-bottom))}.menu-item{width:100%;text-align:left;background:transparent;border:none;color:var(--fg);padding:.9rem 1rem;font-size:1rem;border-radius:12px}.menu-item:active{background:var(--bubble-them)}.menu-item.danger{color:#ff6b6b}.who{display:flex;align-items:center;gap:.35rem}.avatar{width:18px;height:18px;border-radius:50%;color:#fff;font-size:.62rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
