:root{--bg: #f6f5f2;--panel: #ffffff;--text: #1d1d1b;--muted: #6b6a66;--border: #e3e1dc;--accent: #0f7b6c;--accent-text: #ffffff;--mine: #dff3ee;--danger: #b3261e;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text);background:var(--bg)}@media(prefers-color-scheme:dark){:root{--bg: #161615;--panel: #1f1f1d;--text: #ecebe7;--muted: #a3a29d;--border: #34332f;--accent: #3fb8a4;--accent-text: #0d1f1c;--mine: #1d3a35;--danger: #f2827a}}*{box-sizing:border-box}body{margin:0;background:var(--bg)}button,input,select{font:inherit;color:inherit}input,select{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--panel)}button{padding:8px 12px;border:1px solid var(--border);border-radius:8px;background:var(--panel);cursor:pointer}button:disabled{opacity:.5;cursor:default}button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-text);font-weight:600}button.link{border:none;background:none;padding:4px 0;color:var(--accent);text-align:left}button.danger{color:var(--danger)}code{font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:12px;word-break:break-all}.error{color:var(--danger);font-size:14px}.welcome{max-width:420px;margin:12vh auto;padding:0 16px;display:flex;flex-direction:column;gap:16px}.welcome h1{font-size:40px;margin:0}.restore{display:flex;flex-direction:column;gap:8px;margin-top:16px;color:var(--muted)}.app{display:grid;grid-template-columns:320px 1fr;height:100vh}aside{display:flex;flex-direction:column;gap:16px;padding:16px;border-right:1px solid var(--border);background:var(--panel);overflow-y:auto}aside header{display:flex;align-items:center;justify-content:space-between}aside h1{margin:0;font-size:24px}.status{font-size:12px;color:var(--muted)}.status.online{color:var(--accent)}.status.offline{color:var(--danger)}.row{display:flex;gap:8px;align-items:center}.id{flex:1;max-height:3.2em;overflow:hidden}.add-contact{display:flex;flex-direction:column;gap:8px}.contacts{list-style:none;margin:0;padding:0;flex:1}.contacts button{width:100%;text-align:left;border:none;border-radius:8px;background:none}.contacts button.active{background:var(--mine)}.contacts .empty{color:var(--muted);font-size:14px}.placeholder{display:grid;place-items:center;color:var(--muted);padding:16px}.conversation{display:flex;flex-direction:column;min-height:0}.conversation header{padding:16px;border-bottom:1px solid var(--border)}.conversation h2{flex:1;margin:0;font-size:18px}.messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px}.bubble{max-width:70%;padding:8px 12px;border-radius:12px;background:var(--panel);border:1px solid var(--border)}.bubble.mine{align-self:flex-end;background:var(--mine);border-color:transparent}.bubble p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}.bubble time{font-size:11px;color:var(--muted)}.composer{display:flex;gap:8px;padding:16px;border-top:1px solid var(--border)}@media(max-width:720px){.app{grid-template-columns:1fr;grid-template-rows:auto 1fr;height:auto;min-height:100vh}aside{border-right:none;border-bottom:1px solid var(--border)}.conversation{min-height:70vh}}.crash{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;padding:12px;border:1px solid var(--border);border-radius:8px;background:var(--panel);-webkit-user-select:all;user-select:all}.hint{margin:0;font-size:13px;color:var(--accent)}aside header button.active{background:var(--mine)}.settings{display:flex;flex-direction:column;min-height:0}.settings>header{padding:16px;border-bottom:1px solid var(--border)}.settings h2{flex:1;margin:0;font-size:18px}.settings-body{overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:24px;max-width:560px}.settings-body section{display:flex;flex-direction:column;gap:8px}.settings-body h3{margin:0;font-size:15px}.settings-body label,.muted{font-size:13px;color:var(--muted);margin:0}.backup-key{padding:8px;border:1px solid var(--border);border-radius:8px;background:var(--panel);-webkit-user-select:all;user-select:all}aside header{gap:8px}aside header h1{flex:1}aside header .status,aside header button{white-space:nowrap}.settings .id{max-height:none}.my-code{margin:0;font-size:14px;color:var(--muted)}.my-code strong{color:var(--text);letter-spacing:.05em}.big-code{margin:0;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:28px;letter-spacing:.08em}.welcome>label{margin-bottom:-10px;font-size:14px;color:var(--muted)}.choose-id{display:flex;flex-direction:column;gap:8px}.choose-id button{white-space:nowrap}