:root{--bg: #ffffff;--bg-soft: #f2f3f5;--panel: #ffffffee;--text: #111418;--muted: #6b7280;--border: #e5e7eb;--mine: #0b84ff;--mine-text: #ffffff;--theirs: #e9e9eb;--theirs-text: #111418;--accent: #0b84ff;--danger: #e5484d;--online: #22a559;--shadow: 0 4px 24px rgba(0, 0, 0, .12);--radius: 18px;color-scheme:light}@media(prefers-color-scheme:dark){:root{--bg: #0e0f11;--bg-soft: #1b1d21;--panel: #15171aee;--text: #eef0f3;--muted: #9aa1ab;--border: #2a2d33;--theirs: #26282d;--theirs-text: #eef0f3;--shadow: 0 4px 24px rgba(0, 0, 0, .5);color-scheme:dark}}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font:16px/1.4 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;overscroll-behavior:none}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit}.center{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px}.muted{color:var(--muted)}.error{color:var(--danger)}.btn{border:1px solid var(--border);background:var(--bg-soft);border-radius:12px;padding:10px 16px}.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}.btn:disabled{opacity:.6;cursor:default}.login{width:100%;max-width:340px;display:flex;flex-direction:column;gap:14px;align-items:stretch}.login img{align-self:center;border-radius:16px}.login h1{text-align:center;margin:0 0 4px;font-size:24px}.login label{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--muted)}.login input{font:inherit;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:var(--bg-soft);color:var(--text);outline:none}.login input:focus{border-color:var(--accent)}.login .error{margin:0;font-size:14px;text-align:center}.login .notice{margin:-4px 0 0;font-size:14px;text-align:center;color:var(--muted)}.chat{height:100%;height:100dvh;display:flex;flex-direction:column;position:relative;max-width:900px;margin:0 auto}.topbar{display:flex;align-items:center;gap:12px;padding:10px 12px;padding-top:max(10px,env(safe-area-inset-top));border-bottom:1px solid var(--border);background:var(--panel);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);z-index:5}.avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#5ab0ff,#0b6bdc);color:#fff;display:grid;place-items:center;font-weight:600;flex-shrink:0}.who{flex:1;min-width:0}.who .name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.who .status{font-size:13px;color:var(--muted)}.who .status.online{color:var(--online)}.icon-btn{border:0;background:transparent;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;fill:currentColor;color:var(--muted);text-decoration:none}.icon-btn:hover{background:var(--bg-soft)}.icon-btn.small{width:30px;height:30px;font-size:14px}.icon-btn.light{color:#fff}.icon-btn.light:hover{background:#ffffff26}.menu-wrap{position:relative}.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9}.menu{position:absolute;right:0;top:44px;z-index:10;background:var(--bg);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);min-width:230px;padding:6px;display:flex;flex-direction:column}.menu button{border:0;background:none;text-align:left;padding:10px 12px;border-radius:10px}.menu button:hover{background:var(--bg-soft)}.menu-label{font-size:13px;color:var(--muted);padding:8px 12px 6px}.notify-banner{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;background:color-mix(in srgb,var(--accent) 12%,var(--bg));border-bottom:1px solid var(--border);font-size:14px}.notify-banner span{flex:1}.btn.small{padding:6px 12px;font-size:14px;border-radius:10px}.messages{flex:1;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.messages-inner{padding:12px 12px 8px;display:flex;flex-direction:column;min-height:100%;justify-content:flex-end}.start{text-align:center;font-size:13px;color:var(--muted);padding:16px 0 8px}.day{text-align:center;margin:14px 0 8px}.day span{font-size:12px;font-weight:600;color:var(--muted);background:var(--bg-soft);padding:4px 10px;border-radius:999px}.row{display:flex;flex-direction:column;margin-top:8px;max-width:100%}.row.gp{margin-top:2px}.row.mine{align-items:flex-end}.row.theirs{align-items:flex-start}.sender{font-size:12px;color:var(--muted);margin:0 12px 2px}.bubble-wrap{position:relative;display:flex;align-items:center;max-width:min(78%,560px);transition:transform .15s}.row.mine .bubble-wrap{flex-direction:row-reverse}.swipe-hint{position:absolute;left:-28px;font-size:18px;color:var(--muted)}.bubble{position:relative;background:var(--theirs);color:var(--theirs-text);border-radius:var(--radius);padding:7px 12px 6px;min-width:0;max-width:100%;overflow-wrap:anywhere;white-space:pre-wrap;cursor:default;-webkit-user-select:text;user-select:text;-webkit-tap-highlight-color:transparent}.row.mine .bubble{background:var(--mine);color:var(--mine-text)}.row.theirs.gn .bubble{border-bottom-left-radius:6px}.row.theirs.gp .bubble{border-top-left-radius:6px}.row.mine.gn .bubble{border-bottom-right-radius:6px}.row.mine.gp .bubble{border-top-right-radius:6px}.bubble.selected{filter:brightness(.92)}.bubble.deleted{background:transparent!important;color:var(--muted)!important;border:1px dashed var(--border)}.bubble.failed{opacity:.65;cursor:pointer}.row.pending .bubble{opacity:.75}.row.flash .bubble{animation:flash 1.4s ease}@keyframes flash{0%,40%{box-shadow:0 0 0 4px #fc0a}to{box-shadow:0 0 0 0 transparent}}.bubble.emoji{background:transparent!important;font-size:44px;line-height:1.15;padding:0 2px}.bubble.emoji .meta{color:var(--muted)}.bubble.media-only{padding:3px;background:transparent!important}.bubble.media-only .meta{position:absolute;right:10px;bottom:8px;background:#00000073;color:#fff;padding:1px 6px;border-radius:999px;opacity:1}.text a{text-decoration:underline;text-underline-offset:2px}.meta{font-size:11px;opacity:.65;text-align:right;margin-top:1px;-webkit-user-select:none;user-select:none;white-space:nowrap}.hover-reply{opacity:0;border:0;background:var(--bg-soft);color:var(--muted);width:30px;height:30px;border-radius:50%;margin:0 6px;flex-shrink:0;transition:opacity .1s}@media(hover:hover){.bubble-wrap:hover .hover-reply{opacity:1}}@media(hover:none){.hover-reply{display:none}}.quote{display:flex;flex-direction:column;align-items:flex-start;text-align:left;width:100%;border:0;border-left:3px solid currentColor;background:#7f7f7f29;border-radius:8px;padding:5px 10px;margin:2px 0 6px;font-size:14px;white-space:normal}.quote strong{font-size:13px}.quote span{opacity:.85;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.row.mine .quote{background:#ffffff2e}.media-grid{display:grid;gap:3px;border-radius:14px;overflow:hidden;margin:-3px -8px 4px}.bubble.media-only .media-grid{margin:0}.media-grid.n2,.media-grid.n4,.media-grid.n3{grid-template-columns:1fr 1fr}.media-grid.n3>:first-child{grid-column:span 2;aspect-ratio:2 / 1!important}.media-item{display:block;padding:0;border:0;background:#7f7f7f33;max-height:420px;min-height:80px;width:min(320px,66vw);overflow:hidden;cursor:zoom-in}.media-grid:not(.n1) .media-item{width:100%;aspect-ratio:1;max-height:none}.media-grid:not(.n1){width:min(320px,66vw)}.media-item img,.media-item video{display:block;width:100%;height:100%;object-fit:cover}.media-item.video{cursor:default;background:#000}.media-item.video video{object-fit:contain}.video-status{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;aspect-ratio:16 / 9;font-size:14px;cursor:default}.spinner{width:26px;height:26px;border:3px solid rgba(127,127,127,.35);border-top-color:currentColor;border-radius:50%;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.file-card{display:flex;align-items:center;gap:10px;padding:8px 10px;margin:2px 0 4px;background:#7f7f7f29;border-radius:12px;text-decoration:none;white-space:normal}.file-icon{font-size:22px}.file-meta{display:flex;flex-direction:column;min-width:0}.file-name{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}.file-size{font-size:12px;opacity:.75}.preview{display:block;margin:6px -4px 2px;border-radius:12px;overflow:hidden;background:#7f7f7f29;text-decoration:none;white-space:normal;max-width:340px}.row.mine .preview{background:#ffffff29}.preview img{display:block;width:100%;max-height:180px;object-fit:cover;background:#7f7f7f33}.preview-text{display:flex;flex-direction:column;gap:2px;padding:8px 10px 9px}.preview .site{font-size:12px;opacity:.75;text-transform:uppercase;letter-spacing:.02em}.preview .title{font-weight:600;font-size:14px;line-height:1.3}.preview .desc{font-size:13px;opacity:.8;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.reactions{display:flex;flex-wrap:wrap;gap:4px;margin-top:-6px;padding:0 8px;z-index:1}.bubble-wrap:has(.bubble.emoji)+.reactions{margin-top:2px}.reaction{border:2px solid var(--bg);background:var(--bg-soft);border-radius:999px;padding:1px 7px;font-size:14px;display:flex;gap:3px;align-items:center}.reaction span{font-size:12px;color:var(--muted)}.reaction.own{background:color-mix(in srgb,var(--accent) 22%,var(--bg))}.actions{display:flex;flex-direction:column;gap:6px;margin-top:6px;background:var(--bg);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:6px;max-width:100%;animation:pop .12s ease-out}@keyframes pop{0%{transform:scale(.95);opacity:0}}.read-info{font-size:13px;color:var(--muted);padding:2px 8px 4px;border-bottom:1px solid var(--border)}.reaction-picker{display:flex;gap:2px;flex-wrap:wrap}.reaction-picker button{border:0;background:none;font-size:24px;width:42px;height:42px;border-radius:50%}.reaction-picker button:hover,.reaction-picker button.own{background:var(--bg-soft)}.action-buttons{display:flex;gap:4px;border-top:1px solid var(--border);padding-top:6px;flex-wrap:wrap}.action-buttons button{border:0;background:var(--bg-soft);border-radius:10px;padding:7px 12px;font-size:14px}.action-buttons .danger{color:var(--danger)}.receipt{font-size:12px;color:var(--muted);margin:3px 6px 0}.link{border:0;background:none;color:var(--accent);padding:0;font-size:12px}.typing-bubble{display:flex;gap:4px;padding:12px 14px}.typing-bubble span{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:blink 1.2s infinite ease-in-out}.typing-bubble span:nth-child(2){animation-delay:.15s}.typing-bubble span:nth-child(3){animation-delay:.3s}@keyframes blink{0%,60%,to{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}.jump{position:absolute;right:16px;bottom:calc(84px + env(safe-area-inset-bottom));width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:var(--bg);box-shadow:var(--shadow);display:grid;place-items:center;fill:var(--muted);z-index:4}.composer{border-top:1px solid var(--border);background:var(--panel);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);padding:8px 10px;padding-bottom:max(8px,env(safe-area-inset-bottom))}.composer-row{display:flex;align-items:flex-end;gap:6px}.composer textarea{flex:1;resize:none;font:inherit;font-size:16px;line-height:1.35;padding:9px 14px;border-radius:20px;border:1px solid var(--border);background:var(--bg);color:var(--text);outline:none;max-height:160px}.composer textarea:focus{border-color:var(--accent)}.send-btn{width:38px;height:38px;border-radius:50%;border:0;background:var(--accent);color:#fff;display:grid;place-items:center;flex-shrink:0;margin-bottom:1px}.send-btn:disabled{opacity:.35;cursor:default}.composer-context{display:flex;align-items:center;gap:8px;border-left:3px solid var(--accent);padding:2px 4px 2px 10px;margin:0 4px 8px}.ctx-text{flex:1;min-width:0;display:flex;flex-direction:column;font-size:14px}.ctx-text strong{color:var(--accent);font-size:13px}.ctx-text span{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.staged{display:flex;gap:8px;overflow-x:auto;padding:2px 4px 8px}.staged-item{position:relative;width:72px;height:72px;flex-shrink:0;border-radius:12px;overflow:hidden;background:var(--bg-soft)}.staged-item img,.staged-item video{width:100%;height:100%;object-fit:cover;display:block}.staged-file{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;font-size:22px;padding:4px}.staged-file span{font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.staged-item .remove{position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;border:0;background:#0009;color:#fff;font-size:11px;display:grid;place-items:center}.viewer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:#000000eb;display:flex;align-items:center;justify-content:center;padding:56px 8px 16px}.viewer img,.viewer video{max-width:100%;max-height:100%;object-fit:contain}.viewer-bar{position:absolute;top:max(8px,env(safe-area-inset-top));right:8px;display:flex;gap:4px}.dropzone{position:absolute;top:8px;right:8px;bottom:8px;left:8px;border:3px dashed var(--accent);border-radius:20px;background:color-mix(in srgb,var(--accent) 12%,transparent);display:grid;place-items:center;font-size:20px;font-weight:600;color:var(--accent);pointer-events:none;z-index:40}.toast{position:absolute;left:50%;transform:translate(-50%);bottom:calc(90px + env(safe-area-inset-bottom));background:#222;color:#fff;padding:10px 16px;border-radius:12px;font-size:14px;max-width:calc(100% - 32px);box-shadow:var(--shadow);z-index:60;text-align:center}