@import"https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap";:root{--s1: 4px;--s2: 8px;--s3: 12px;--s4: 16px;--s5: 20px;--s6: 24px;--s8: 32px;--s10: 40px;--s12: 48px;--s16: 64px;--fs-xs: 11px;--fs-sm: 13px;--fs-md: 15px;--fs-lg: 18px;--fs-xl: 21px;--fs-2xl: 26px;--bg: #eef1f7;--surface: #ffffff;--surface-2: #eef1f7;--ink: #18222f;--dim: #4d5868;--mut: #6b7588;--hair: rgba(20, 32, 55, .09);--hair-2: rgba(20, 32, 55, .15);--accent: #2563eb;--accent-hi: #1d4ed8;--accent-ink: #ffffff;--accent-soft: rgba(37, 99, 235, .1);--ok: #2bb673;--warn: #d99a2b;--bubble-them: #ffffff;--bubble-mine: #2563eb;--sans: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;--r1: 12px;--r2: 16px;--r3: 22px;--r-pill: 999px;--shadow: 0 1px 2px rgba(20, 32, 55, .06), 0 8px 24px -16px rgba(20, 32, 55, .22);--shadow-soft: 0 1px 2px rgba(20, 32, 55, .07);--shadow-pop: 0 16px 48px -16px rgba(20, 32, 55, .3);--ease: cubic-bezier(.22, 1, .36, 1);--z-modal-backdrop: 40;--z-modal: 50;color-scheme:light}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100dvh}body{font-family:var(--sans);font-size:var(--fs-md);line-height:1.5;color:var(--ink);background-color:var(--bg);background-attachment:fixed;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-synthesis:none}#root{display:flex}input{font:inherit;color:inherit}button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}svg{display:block}ul{list-style:none}code{font-family:var(--mono)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}::selection{background:#2563eb2e}*{scrollbar-width:thin;scrollbar-color:var(--hair-2) transparent}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);height:42px;padding:0 var(--s5);font-size:var(--fs-md);font-weight:600;border:1px solid transparent;border-radius:var(--r1);color:var(--ink);transition:transform .15s var(--ease),background .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease}.btn.sm{height:36px;padding:0 var(--s4);font-size:var(--fs-sm)}.btn.lg{height:50px;padding:0 var(--s6)}.btn.primary{color:var(--accent-ink);background:var(--accent);box-shadow:0 1px 2px #2563eb59}.btn.primary:hover{background:var(--accent-hi)}.btn.primary:active{transform:translateY(1px)}.btn.ghost{background:var(--surface);border-color:var(--hair-2);color:var(--dim)}.btn.ghost:hover{background:var(--surface-2);color:var(--ink)}.btn.danger-ghost{color:#d2453f;border-color:#d2453f4d;background:#d2453f12}.btn.danger-ghost:hover{background:#d2453f21}.btn:disabled{opacity:.45;cursor:default;box-shadow:none}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--r1);color:var(--mut);transition:background .15s ease,color .15s ease,transform .15s var(--ease)}.icon-btn:hover{background:var(--surface-2);color:var(--ink)}.icon-btn:active{transform:scale(.92)}.icon-btn.solid{color:var(--accent-ink);background:var(--accent);box-shadow:0 1px 2px #2563eb59}.icon-btn.solid:hover{background:var(--accent-hi)}.link-btn{color:var(--accent);font-size:var(--fs-sm);font-weight:600}.link-btn:hover{text-decoration:underline}.link-btn.muted{color:var(--mut)}.link-btn.muted:hover{color:var(--dim)}.chip-btn{flex:none;height:30px;padding:0 var(--s3);border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:600;color:var(--accent);background:var(--accent-soft);transition:background .15s ease}.chip-btn:hover{background:#2563eb29}input:not([type=file]){width:100%;background:var(--surface);border:1px solid var(--hair-2);color:var(--ink);padding:12px 14px;border-radius:var(--r1);font-size:var(--fs-md);outline:none;transition:border-color .15s ease,box-shadow .15s ease}input::placeholder{color:var(--mut)}input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.avatar{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-weight:700;line-height:1}.avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}.avatar-initials{-webkit-user-select:none;user-select:none;letter-spacing:.2px}.presence-dot{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:var(--mut);border:2px solid var(--surface)}.presence-dot.on{background:var(--ok)}.onboard{width:100%;display:flex;align-items:center;justify-content:center;padding:var(--s6)}.onboard-card{width:100%;max-width:384px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--s4);background:var(--surface);border:1px solid var(--hair);border-radius:var(--r3);padding:var(--s12) var(--s8);box-shadow:var(--shadow);animation:rise .45s var(--ease) both}.onboard-brand{display:flex;align-items:center;gap:var(--s3)}.onboard-brand h1{font-size:var(--fs-2xl);font-weight:700;letter-spacing:-.5px}.onboard .muted{color:var(--dim);font-size:var(--fs-md);line-height:1.55}.onboard-input{text-align:center}.onboard .btn.lg{width:100%}.app-shell{width:100%;height:100dvh;display:flex;flex-direction:column}.panes{flex:1;min-height:0;display:grid;grid-template-columns:348px 1fr}.sidebar{min-width:0;display:flex;flex-direction:column;background:var(--surface);border-right:1px solid var(--hair)}.side-head{display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s4);border-bottom:1px solid var(--hair)}.profile-row{flex:1;min-width:0;display:flex;align-items:center;gap:var(--s3);padding:var(--s2);border-radius:var(--r1);transition:background .15s ease}.profile-row:hover{background:var(--surface-2)}.profile-name{flex:1;min-width:0;text-align:left;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.profile-edit{color:var(--mut);flex:none;opacity:0;transition:opacity .15s ease}.profile-row:hover .profile-edit{opacity:1}.conv-list{flex:1;overflow-y:auto;padding:var(--s2)}.side-empty{text-align:center;color:var(--dim);padding:var(--s12) var(--s5);display:flex;flex-direction:column;gap:var(--s4);align-items:center}.side-empty p{font-size:var(--fs-sm)}.conv{position:relative;width:100%;display:flex;align-items:center;gap:var(--s3);padding:var(--s3);border-radius:var(--r2);text-align:left;transition:background .14s ease}.conv:hover{background:var(--surface-2)}.conv.selected{background:var(--accent-soft)}.conv-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}.conv-top{display:flex;align-items:baseline;gap:var(--s2)}.conv-name{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.conv-time{flex:none;font-size:var(--fs-xs);color:var(--mut)}.conv-sub{display:flex;align-items:center;gap:var(--s2)}.conv-preview{flex:1;min-width:0;font-size:var(--fs-sm);color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.badge{flex:none;min-width:19px;height:19px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:700}.main-pane{min-width:0;display:flex;flex-direction:column}.no-active{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--s8)}.no-active-inner{text-align:center;max-width:360px;display:flex;flex-direction:column;align-items:center;gap:var(--s3)}.no-active-inner h1{font-size:var(--fs-2xl);font-weight:700;letter-spacing:-.5px;margin-top:var(--s3)}.no-active-inner p{color:var(--dim);font-size:var(--fs-md);line-height:1.55;margin-bottom:var(--s3);text-wrap:balance}.chat{flex:1;min-height:0;display:flex;flex-direction:column}.chat-head{display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s4);border-bottom:1px solid var(--hair);background:var(--surface)}.chat-id{flex:1;min-width:0;display:flex;align-items:center;gap:var(--s3);padding:var(--s1) var(--s2);border-radius:var(--r1);transition:background .15s ease}.chat-id:hover{background:var(--surface-2)}.chat-id-text{min-width:0;display:flex;flex-direction:column;gap:2px;text-align:left}.chat-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.presence-pill{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--mut)}.presence-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--mut)}.presence-pill.online .dot{background:var(--ok)}.presence-pill.connecting .dot,.presence-pill.error .dot{background:var(--warn);animation:pulse 1.4s ease-in-out infinite}.back{display:none}.messages{flex:1;overflow-y:auto;padding:var(--s5) var(--s5) var(--s4);display:flex;flex-direction:column;gap:3px}.row{display:flex;gap:var(--s2);align-items:flex-end;max-width:min(74%,540px);animation:msgIn .26s var(--ease) both}.row.start{margin-top:var(--s3)}.row.mine{align-self:flex-end}.row:not(.mine){align-self:flex-start}.row-avatar{width:28px;flex:none}.bubble{position:relative;padding:9px 13px 7px;border-radius:var(--r2);background:var(--bubble-them);color:var(--ink);border:1px solid var(--hair);box-shadow:var(--shadow-soft);font-size:var(--fs-md);line-height:1.45;white-space:pre-wrap;word-break:break-word}.row:not(.start):not(.mine) .bubble{border-top-left-radius:7px}.row.start:not(.mine) .bubble{border-bottom-left-radius:7px}.row.mine .bubble{background:var(--bubble-mine);color:var(--accent-ink);border-color:transparent;box-shadow:0 1px 2px #2563eb47}.row.mine.start .bubble{border-bottom-right-radius:7px}.sender{display:block;font-size:var(--fs-xs);font-weight:700;color:var(--accent);margin-bottom:3px}.time{float:right;margin:5px 0 0 var(--s3);font-size:10px;color:var(--mut)}.row.mine .time{color:#fffc}.chat-empty{margin:auto;text-align:center;max-width:340px;display:flex;flex-direction:column;align-items:center;gap:var(--s3);color:var(--dim)}.chat-empty-title{font-size:var(--fs-lg);font-weight:600;color:var(--ink);margin-top:var(--s2)}.chat-empty-sub{font-size:var(--fs-sm);line-height:1.55;text-wrap:balance}.composer{display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s4);border-top:1px solid var(--hair);background:var(--surface)}.composer-input{flex:1;border-radius:var(--r-pill);background:var(--bg)}.send-btn{flex:none;width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--accent-ink);background:var(--accent);box-shadow:0 1px 2px #2563eb59;transition:transform .15s var(--ease),background .15s ease,opacity .15s ease}.send-btn:hover:not(:disabled){background:var(--accent-hi)}.send-btn:disabled{opacity:.4;cursor:default;box-shadow:none}.send-btn:active:not(:disabled){transform:scale(.92)}.modal{margin:auto;border:none;padding:0;background:transparent;max-width:420px;width:calc(100% - var(--s8));color:var(--ink)}.modal::backdrop{background:#14203766}.modal[open]::backdrop{animation:fade .2s ease both}.modal-body{background:var(--surface);border-radius:var(--r3);padding:var(--s6);box-shadow:var(--shadow-pop)}.modal[open] .modal-body{animation:pop .22s var(--ease) both}.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s5)}.modal-head h2{font-size:var(--fs-lg);font-weight:700;letter-spacing:-.3px}.form{display:flex;flex-direction:column;gap:var(--s4)}.form-avatar{display:flex;justify-content:center}.field{display:flex;flex-direction:column;gap:var(--s2)}.field>span{font-size:var(--fs-sm);color:var(--dim);font-weight:500}.muted{color:var(--mut)}.hint{font-size:var(--fs-sm);color:var(--mut);line-height:1.5}.warn-text{color:var(--warn)}.form-actions{display:flex;justify-content:flex-end;gap:var(--s3);margin-top:var(--s2)}.form-actions.split{justify-content:space-between}.form-actions .btn{min-width:96px}.segmented{display:flex;gap:4px;padding:4px;background:var(--bg);border-radius:var(--r1);margin-bottom:var(--s5)}.segmented button{flex:1;height:36px;border-radius:9px;font-size:var(--fs-sm);font-weight:600;color:var(--mut);transition:background .15s ease,color .15s ease}.segmented button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-soft)}.member-list{display:flex;flex-direction:column;gap:var(--s2);max-height:168px;overflow-y:auto}.member-list li{display:flex;align-items:center;gap:var(--s3)}.member-name{font-size:var(--fs-sm)}.invite{display:flex;flex-direction:column;align-items:center;gap:var(--s3);padding:var(--s4);background:var(--bg);border-radius:var(--r2)}.invite-hint{font-size:var(--fs-sm);color:var(--dim)}.invite-qr{display:flex;flex-direction:column;align-items:center;gap:6px}.invite-qr img{border-radius:var(--r1);background:#fff;padding:8px;box-shadow:var(--shadow-soft)}.invite-qr span{font-size:var(--fs-xs);color:var(--mut)}.invite .btn.primary{width:100%}.invite-row{width:100%;display:flex;align-items:center;gap:var(--s2)}.invite-link{flex:1;min-width:0;font-size:var(--fs-sm);color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.invite-or{font-size:var(--fs-xs);color:var(--mut)}.invite-code{flex:1;font-family:var(--mono);font-size:var(--fs-md);letter-spacing:1.5px;color:var(--ink)}.avatar-picker{display:flex;flex-direction:column;align-items:center;gap:var(--s2)}.avatar-picker-target{position:relative;border-radius:50%}.avatar-picker-overlay{position:absolute;right:-2px;bottom:-2px;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;border:2.5px solid var(--surface);box-shadow:var(--shadow-soft);transition:transform .15s var(--ease)}.avatar-picker-target:hover .avatar-picker-overlay{transform:scale(1.08)}.avatar-picker-actions{display:flex;gap:var(--s3)}@keyframes rise{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes msgIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@keyframes pop{0%{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}@keyframes fade{0%{opacity:0}to{opacity:1}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.35}}@media(max-width:859px){.panes{grid-template-columns:1fr}.sidebar,.main-pane{grid-column:1;grid-row:1}.app-shell[data-view=list] .main-pane,.app-shell[data-view=chat] .sidebar{display:none}.back{display:inline-flex}.row{max-width:82%}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}:root[data-theme=dark]{--bg: #0f1620;--surface: #19222e;--surface-2: #243042;--ink: #e7ecf3;--dim: #9aa7b8;--mut: #717f93;--hair: rgba(255, 255, 255, .08);--hair-2: rgba(255, 255, 255, .15);--accent: #4f8df9;--accent-hi: #6ba0fb;--accent-soft: rgba(79, 141, 249, .16);--bubble-them: #243042;--bubble-mine: #3a78f0;--shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 28px -16px rgba(0, 0, 0, .7);--shadow-soft: 0 1px 2px rgba(0, 0, 0, .35);--shadow-pop: 0 18px 50px -16px rgba(0, 0, 0, .75);color-scheme:dark}.bg-scene{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none}.app-shell,.onboard{position:relative;z-index:1}:root[data-bg=waves] body{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='48' viewBox='0 0 60 48'%3E%3Cg fill='none' stroke='%234f8df9' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M0 16 q 15 -11 30 0 t 30 0' stroke-opacity='0.13'/%3E%3Cpath d='M0 40 q 15 -11 30 0 t 30 0' stroke-opacity='0.09'/%3E%3C/g%3E%3C/svg%3E");background-size:60px 48px}:root[data-bg=dots] body{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%234f8df9' stroke-opacity='0.06' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='28' cy='30' r='9'/%3E%3Cpath d='M84 22v14M77 29h14'/%3E%3Cpath d='M52 66q7-9 14 0t14 0'/%3E%3Ccircle cx='98' cy='84' r='5'/%3E%3C/g%3E%3Cg fill='%234f8df9' fill-opacity='0.05'%3E%3Ccircle cx='100' cy='26' r='3'/%3E%3Ccircle cx='20' cy='92' r='4'/%3E%3Ccircle cx='60' cy='100' r='2.5'/%3E%3C/g%3E%3C/svg%3E");background-size:120px 120px}.seg-cards{display:flex;gap:var(--s2)}.seg-card{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--s2);padding:var(--s3);border:1.5px solid var(--hair-2);border-radius:var(--r2);font-size:var(--fs-sm);font-weight:600;color:var(--dim);transition:border-color .15s ease,background .15s ease,color .15s ease}.seg-card:hover{background:var(--surface-2)}.seg-card.on{border-color:var(--accent);color:var(--ink);background:var(--accent-soft)}.theme-swatch{width:100%;height:34px;border-radius:var(--r1);border:1px solid var(--hair)}.theme-swatch.light{background:linear-gradient(135deg,#eef1f7 58%,#2563eb 58%)}.theme-swatch.dark{background:linear-gradient(135deg,#0f1620 58%,#4f8df9 58%)}.bg-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}.bg-card{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s2);border:1.5px solid var(--hair-2);border-radius:var(--r2);transition:border-color .15s ease,background .15s ease}.bg-card:hover{background:var(--surface-2)}.bg-card.on{border-color:var(--accent);background:var(--accent-soft)}.bg-label{font-size:var(--fs-sm);font-weight:600;color:var(--dim);text-align:center}.bg-preview{height:54px;border-radius:var(--r1);border:1px solid var(--hair);background-color:var(--bg)}.bg-preview.bg-waves{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='48' viewBox='0 0 60 48'%3E%3Cg fill='none' stroke='%234f8df9' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M0 16 q 15 -11 30 0 t 30 0' stroke-opacity='0.4'/%3E%3Cpath d='M0 40 q 15 -11 30 0 t 30 0' stroke-opacity='0.28'/%3E%3C/g%3E%3C/svg%3E");background-size:50px 40px}.bg-preview.bg-dots{background-image:radial-gradient(var(--accent) 1.4px,transparent 1.4px);background-size:16px 16px;opacity:.5}.bg-preview.bg-ascii{background:radial-gradient(circle at 70% 32%,rgba(235,225,180,.6),transparent 24%),linear-gradient(180deg,#0b0e17,#1b2236)}.bg-preview.bg-plain{background:var(--bg)}.cropper{position:relative;width:100%;height:258px;border-radius:var(--r2);overflow:hidden;background:var(--surface-2);margin-bottom:var(--s3)}.crop-zoom{display:flex;align-items:center;gap:var(--s3);color:var(--mut);padding:0 var(--s1)}.crop-zoom input[type=range]{flex:1}.hint.center{text-align:center}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:6px;border-radius:var(--r-pill);background:var(--hair-2);outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);cursor:pointer;box-shadow:var(--shadow-soft)}input[type=range]::-moz-range-thumb{width:18px;height:18px;border:none;border-radius:50%;background:var(--accent);cursor:pointer}