:root{color-scheme:light;--bg: #e8e8e8;--panel: #f5f5f5;--panel-2: #fafafa;--ink: #2a2a2a;--muted: #7a7a7a;--line: #d0d0d0;--line-soft: #e2e2e2;--accent: #5a5a5a;--accent-soft: #ececec;--bubble-in: #ffffff;--bubble-out: #dcdcdc;--danger: #6b6b6b;--radius: 0;--font: "Segoe UI", "Helvetica Neue", Arial, sans-serif;--mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, monospace;--sidebar-w: 320px;--header-h: 56px}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--font)}#app{height:100%;min-height:100dvh}button,input,textarea{font:inherit}button{cursor:pointer}.auth{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px 48px;background:linear-gradient(180deg,#f7f7f7,#e6e6e6)}.auth-mark{width:64px;height:64px;border-radius:16px;background:#d8d8d8;border:1px solid var(--line);margin-bottom:20px}.auth h1{margin:0;font-size:1.35rem;font-weight:600;letter-spacing:-.02em;color:var(--ink)}.auth p{margin:8px 0 28px;color:var(--muted);font-size:.95rem;text-align:center;max-width:280px}.pin-dots{display:flex;gap:12px;margin-bottom:28px}.pin-dots span{width:12px;height:12px;border-radius:50%;border:2px solid #9a9a9a;background:transparent}.pin-dots span.on{background:#5a5a5a;border-color:#5a5a5a}.pin-pad{display:grid;grid-template-columns:repeat(3,72px);gap:12px}.pin-pad button{width:72px;height:72px;border-radius:50%;border:1px solid var(--line);background:#f0f0f0;color:var(--ink);font-size:1.35rem;font-weight:500;min-height:72px}.pin-pad button:active{background:#d8d8d8}.pin-pad button.ghost{background:transparent;border-color:transparent;font-size:.85rem;color:var(--muted)}.auth-error{min-height:1.2em;margin-top:16px;color:var(--danger);font-size:.9rem}.shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr;height:100%;max-width:1100px;margin:0 auto;background:var(--panel);border-left:1px solid var(--line);border-right:1px solid var(--line)}@media(max-width:760px){.shell{grid-template-columns:1fr;border:none}.shell.chat-open .sidebar{display:none}.shell:not(.chat-open) .chat{display:none}}.sidebar{display:flex;flex-direction:column;background:var(--panel-2);border-right:1px solid var(--line);min-height:0}.side-head{height:var(--header-h);padding:0 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:#f0f0f0}.side-head h1{margin:0;font-size:1.1rem;font-weight:600}.status{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;color:var(--muted)}.status .dot{width:8px;height:8px;border-radius:50%;background:#b0b0b0}.status.online .dot{background:#5a5a5a}.me-card{padding:12px 14px;border-bottom:1px solid var(--line-soft);background:#efefef}.me-card .label{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.me-id{font-family:var(--mono);font-size:.95rem;font-weight:600;margin-top:2px;word-break:break-all}.me-link{font-size:.75rem;color:var(--muted);word-break:break-all;margin-top:2px}.qr-row{display:flex;gap:10px;align-items:center;margin-top:10px}.qr-row canvas{width:88px;height:88px;background:#fff;border:1px solid var(--line)}.add-box{padding:10px 14px;border-bottom:1px solid var(--line-soft);display:flex;gap:8px}.add-box input{flex:1;border:1px solid var(--line);background:#fff;border-radius:8px;padding:10px 12px;min-height:44px;color:var(--ink)}.add-box button{border:1px solid var(--line);background:var(--accent);color:#fff;border-radius:8px;padding:0 14px;min-height:44px;min-width:44px}.add-error{padding:0 14px 8px;color:var(--danger);font-size:.8rem;min-height:1em}.contacts{list-style:none;margin:0;padding:0;overflow:auto;flex:1}.contacts li button{width:100%;text-align:left;border:none;border-bottom:1px solid var(--line-soft);background:transparent;padding:14px;color:var(--ink);min-height:64px}.contacts li button:hover{background:#ececec}.contacts li button.active{background:#e0e0e0}.contacts li strong{display:block;font-weight:600;font-size:.95rem}.contacts li .muted{color:var(--muted);font-size:.8rem;font-family:var(--mono)}.contacts .empty{padding:24px 14px;color:var(--muted);font-size:.9rem}.chat{display:flex;flex-direction:column;min-height:0;background:var(--panel)}.chat-head{height:var(--header-h);padding:0 12px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);background:#f0f0f0}.chat-head .back{display:none;border:1px solid var(--line);background:#e8e8e8;color:var(--ink);border-radius:8px;min-width:44px;min-height:40px;padding:0 10px}@media(max-width:760px){.chat-head .back{display:inline-flex;align-items:center;justify-content:center}}.chat-head .peer{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-head .hint{font-size:.75rem;color:var(--muted)}.messages{flex:1;overflow:auto;padding:16px 14px 20px;display:flex;flex-direction:column;gap:8px;background:linear-gradient(180deg,#ebebeb,#e6e6e6)}.messages .placeholder{margin:auto;text-align:center;color:var(--muted);font-size:.9rem;max-width:260px;line-height:1.45}.bubble{max-width:78%;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--bubble-in);align-self:flex-start;white-space:pre-wrap;word-break:break-word;box-shadow:0 1px #0000000a}.bubble.out{align-self:flex-end;background:var(--bubble-out)}.bubble .meta{display:block;margin-top:4px;font-size:.7rem;color:var(--muted);text-align:right}.composer{display:grid;grid-template-columns:1fr auto;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:#f0f0f0}.composer textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff;color:var(--ink);resize:none;min-height:44px;max-height:120px}.composer button{border:1px solid var(--line);background:var(--accent);color:#fff;border-radius:10px;padding:0 16px;min-height:44px;min-width:44px}.send-error{padding:0 12px 8px;background:#f0f0f0;color:var(--danger);font-size:.8rem;min-height:0}.muted{color:var(--muted)}