:root{color-scheme:dark;--bg:#101827;--surface:#1b293d;--surface2:#142238;--line:#30415b;--text:#eef3fb;--muted:#aab8ca;--accent:#38a7a0;--accent2:#53c2b8;--danger:#9a4052;--bubble:#2b405a;--mine:#176b69;--input:#0f1a2a;--shadow:#0003;--radius:20px}
:root[data-theme="light"]{color-scheme:light;--bg:#edf2f7;--surface:#fff;--surface2:#f4f7fb;--line:#d7e0ea;--text:#1b2938;--muted:#64758a;--accent:#168d86;--accent2:#25a99e;--danger:#b84a5c;--bubble:#e6edf5;--mine:#d2f1eb;--input:#fff;--shadow:#1a2b4015}
*{box-sizing:border-box}html{min-height:100%;background:var(--bg)}body{margin:0;min-height:100vh;min-height:100dvh;background:radial-gradient(ellipse at top,#1a2b43 0%,var(--bg) 58%);color:var(--text);font:16px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;display:flex;justify-content:center;padding:max(12px,env(safe-area-inset-top)) 12px max(14px,env(safe-area-inset-bottom))}:root[data-theme="light"] body{background:radial-gradient(ellipse at top,#fff 0%,var(--bg) 65%)}button,input,select{font:inherit}button{min-height:44px;border:0;border-radius:13px;padding:10px 15px;font-weight:750;cursor:pointer;transition:transform .12s,filter .12s}button:active{transform:scale(.98);filter:brightness(.95)}input,select{width:100%;min-height:47px;padding:12px 13px;margin:7px 0 14px;border-radius:12px;border:1px solid var(--line);background:var(--input);color:var(--text);outline:none}input:focus,select:focus{border-color:var(--accent2);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}input::placeholder{color:var(--muted)}label{display:block;color:var(--text);font-size:13px;font-weight:650;margin-top:8px}.app-shell{width:100%;max-width:560px;margin:auto}.brand{display:flex;align-items:center;gap:13px;padding:18px 5px}.brand-mark{width:52px;height:52px;flex:0 0 52px;display:grid;place-items:center;border-radius:17px;background:linear-gradient(145deg,var(--accent2),var(--accent));color:#061b20;font-size:29px;font-weight:900;box-shadow:0 8px 24px #38a7a033}.brand h1{margin:0;letter-spacing:4px;font-size:25px;line-height:1.2}.brand p{margin:4px 0 0;color:var(--muted);font-size:13px}.secure-badge{margin-left:auto;border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);color:var(--accent2);border-radius:999px;padding:5px 9px;font-size:10px;letter-spacing:1px;font-weight:800}.card{background:linear-gradient(180deg,var(--surface),var(--surface));border:1px solid var(--line);border-radius:var(--radius);padding:21px;margin:10px 0 16px;box-shadow:0 18px 45px var(--shadow)}.card h2{margin:3px 0 5px;font-size:22px;letter-spacing:-.3px}.section-kicker{color:var(--accent2);font-size:10px;letter-spacing:1.6px;font-weight:850}.intro{margin:5px 0 17px;color:var(--muted);font-size:14px}.primary{width:100%;margin:7px 0;color:#061b20;background:linear-gradient(135deg,var(--accent2),var(--accent));box-shadow:0 8px 20px #38a7a022}.secondary{color:var(--text);background:var(--bubble)}.danger{color:#fff;background:var(--danger)}.full-width{width:100%;margin:7px 0}.notice{color:var(--muted);font-size:12px;line-height:1.55;margin:13px 0 0}.notice code{color:var(--accent2)}.hidden{display:none!important}.chat-card{padding:13px}.chat-topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:3px 2px 12px;border-bottom:1px solid var(--line)}.identity{display:flex;align-items:center;gap:10px;min-width:0}.identity b{overflow-wrap:anywhere}.online-dot{width:10px;height:10px;border-radius:50%;background:#51d69a;box-shadow:0 0 0 4px #51d69a1c;flex:0 0 auto}.online-dot.offline{background:#8794a5;box-shadow:0 0 0 4px #8794a51c}.muted{color:var(--muted);font-size:12px}.typing{color:var(--accent2);font-weight:700}.top-actions{display:flex;gap:5px}.icon-button{width:39px;min-width:39px;height:39px;min-height:39px;padding:0;display:grid;place-items:center;background:var(--surface2);border:1px solid var(--line);color:var(--text);font-size:20px}.invite-result{overflow-wrap:anywhere}.status-note{font-size:10px;color:var(--muted);padding:7px 5px 0;text-align:center}.chatlog{height:min(53vh,570px);min-height:290px;overflow:auto;padding:12px 7px;margin:8px 0;background:var(--surface2);border:1px solid var(--line);border-radius:14px;overscroll-behavior:contain;scroll-behavior:smooth}.msg{position:relative;padding:10px 12px;border-radius:15px 15px 15px 5px;background:var(--bubble);margin:8px 0;max-width:88%;overflow-wrap:anywhere;box-shadow:0 2px 7px var(--shadow);color:var(--text)}.msg.mine{margin-left:auto;background:var(--mine);border-radius:15px 15px 5px 15px}.time{color:var(--muted);font-size:10px;margin-top:5px;text-align:right}.msg-status{font-size:10px;color:var(--muted);margin-left:6px}.empty-state{height:100%;min-height:240px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--muted);gap:5px;text-align:center}.empty-state b{color:var(--text);font-size:14px}.empty-icon{font-size:30px;color:var(--accent2);margin-bottom:5px}.composer{display:flex;align-items:center;gap:7px;padding-top:2px}.composer input{flex:1;min-width:0;margin:0}.attach-button,.send-button{width:47px;min-width:47px;height:47px;min-height:47px;padding:0;font-size:23px;color:#061b20;background:var(--accent2)}.attach-button{background:var(--surface2);border:1px solid var(--line);color:var(--text);font-size:25px}.encryption-note{padding:0 3px}.reply-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--surface2);border-left:3px solid var(--accent);padding:8px 10px;margin:7px 0;border-radius:8px}.reply-bar div{min-width:0;display:flex;flex-direction:column}.reply-bar small{font-size:10px;color:var(--accent2)}.reply-bar span{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.small-icon{width:30px;min-width:30px;height:30px;min-height:30px}.media-preview{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px;margin:8px 0;background:var(--surface2);border-radius:10px}.preview-items{display:flex;gap:7px;overflow:auto}.preview-item{width:58px;height:58px;flex:0 0 58px;border-radius:8px;overflow:hidden;background:var(--bubble);display:grid;place-items:center;font-size:10px;color:var(--muted)}.preview-item img,.preview-item video{width:100%;height:100%;object-fit:cover}.text-button{background:transparent;color:var(--accent2);padding:7px 9px;min-height:34px;font-size:12px}.app-footer{display:flex;justify-content:space-between;color:var(--muted);opacity:.7;font-size:10px;letter-spacing:.5px;padding:7px 5px 12px}.modal-backdrop,.lock-screen{position:fixed;inset:0;z-index:20;background:#07111ee8;display:flex;align-items:flex-end;justify-content:center;padding:12px;backdrop-filter:blur(9px)}.settings-sheet{width:100%;max-width:560px;max-height:92dvh;overflow:auto;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:22px;padding:19px;box-shadow:0 20px 70px #0007}.sheet-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:12px}.sheet-head h2{margin:2px 0 0}.setting-group{padding:14px 0;border-bottom:1px solid var(--line)}.setting-group:last-child{border-bottom:0}.setting-group h3{margin:0 0 7px;font-size:15px}.setting-help{color:var(--muted);font-size:12px;margin:5px 0 10px}.switch-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;font-size:13px}.switch-row input{width:20px;min-height:20px;margin:0;accent-color:var(--accent)}.lock-screen{z-index:50;align-items:center;background:#07111ef5}.lock-card{width:100%;max-width:360px;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:26px;text-align:center;box-shadow:0 20px 70px #0008}.lock-mark{margin:0 auto 15px}.lock-card h2{margin:5px 0}.lock-card p{color:var(--muted);font-size:13px}.lock-error{color:#ff8797!important;min-height:18px}.lock-screen input{text-align:center;letter-spacing:8px;font-size:22px}.lock-screen .primary{margin-top:3px}@media(min-width:600px){.modal-backdrop{align-items:center}.settings-sheet{max-height:85vh}}@media(max-width:380px){.card{padding:15px}.brand h1{font-size:22px}.secure-badge{font-size:9px}.compact{padding:7px 9px}.top-actions{gap:3px}.chatlog{min-height:250px}}