:root{--bg:#0b1020;--phone:#111a2e;--surface:#23314e;--surface2:#2b3a5c;--text:#eef2ff;--muted:#a7b5d1;--border:#425171;--accent:#9878ef;--accent2:#7057b5;--bubble:#2b3856;--ok:#5fd39a;--warn:#f3c56b;--bad:#f06d6d;--font:16px;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
*{box-sizing:border-box}[hidden]{display:none!important}
html{font-size:var(--font)}
body{margin:0;color:var(--text);background:radial-gradient(circle at 15% 0%,#263258,var(--bg) 50%);min-height:100vh}
body.light{--bg:#e8edf7;--phone:#fafbff;--surface:#e4e9f5;--surface2:#d8dff0;--text:#1b2743;--muted:#61708b;--border:#bfcbdf;--bubble:#e0e7f4;background:#e8edf7}
body.large{--font:19px}
body.reduced *{transition:none!important;animation:none!important}
body.contrast{--muted:#d7defa;--border:#8a9ac0}
body.light.contrast{--muted:#2b3a5c;--border:#5d6f95}
a{color:#b9a6ff}
code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85em;background:#0003;padding:1px 4px;border-radius:4px}
.muted{color:var(--muted)}.small{font-size:.8rem}.center{text-align:center}
.layout{max-width:1250px;margin:auto;padding:24px 16px 60px;display:grid;grid-template-columns:270px minmax(300px,430px) minmax(240px,1fr);gap:22px;align-items:start}
.rail,.guide-panel{background:#ffffff0a;border:1px solid var(--border);border-radius:20px;padding:16px;font-size:.85rem;line-height:1.5}
.rail h1{font-size:1.6rem;letter-spacing:-.04em;margin:0 0 6px}.rail h1 span{color:#b29aff;font-weight:500;font-size:1rem}
.rail h2,.guide-panel h2{font-size:.95rem;margin:14px 0 8px}
.lead{color:var(--muted);margin:0 0 6px}
.devbox{display:flex;flex-direction:column;gap:8px}
.devbox .toggle{display:flex;gap:8px;align-items:center;cursor:pointer}
.guide{padding-left:18px;margin:0;color:var(--muted)}.guide li{margin:5px 0}
.linkbtn{text-decoration:none;text-align:center}

/* phone */
.phone{width:100%;height:760px;background:var(--phone);border:7px solid #374363;border-radius:39px;overflow:hidden;position:relative;box-shadow:0 20px 50px #0006;transition:filter .25s,transform .25s;display:flex;flex-direction:column}
.phone:before{content:"";position:absolute;top:6px;left:calc(50% - 37px);height:6px;width:74px;background:#080c1a;border-radius:10px;z-index:5}
.phone.side{transform:perspective(800px) rotateY(-25deg);filter:brightness(.28) contrast(1.6);transform-origin:center}
.phone.side:after{content:"";position:absolute;inset:0;z-index:9;pointer-events:none;background:repeating-linear-gradient(95deg,#0000 0px,#000b 5px,#0000 9px)}
.status{height:37px;flex:none;padding:14px 17px 0;font-size:11px;display:flex;justify-content:space-between;color:var(--muted);cursor:pointer;user-select:none}
#notifDot{color:var(--accent);font-size:12px;margin-right:6px}
.screen-root{flex:1;min-height:0;position:relative;display:flex;flex-direction:column}
.screen{flex:1;min-height:0;overflow-y:auto;padding:13px 15px 70px;display:flex;flex-direction:column;gap:0}
.screen.with-composer{padding-bottom:96px}
.navbar{position:absolute;bottom:7px;left:calc(50% - 44px);width:88px;height:4px;border-radius:4px;background:#91a0c1}
.shade{position:absolute;top:37px;left:0;right:0;z-index:20;background:#0f1628f2;backdrop-filter:blur(6px);padding:10px 12px 14px;border-bottom:1px solid var(--border);max-height:70%;overflow:auto}
body.light .shade{background:#f3f5fcf2}
.shade h4{margin:0 0 8px;font-size:.75rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.notif{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:10px 12px;margin:6px 0;cursor:pointer;display:flex;gap:10px;align-items:flex-start}
.notif .ic{width:30px;height:30px;border-radius:9px;background:var(--accent2);flex:none;display:grid;place-items:center;font-size:14px}
.notif .nt{font-size:.85rem;font-weight:600}.notif .nb{font-size:.8rem;color:var(--muted)}
.notif .dismiss{margin-left:auto;background:none;border:0;color:var(--muted);cursor:pointer;font-size:16px}
.bgcover{position:absolute;inset:0;z-index:30;background:#0b1020;display:grid;place-items:center;text-align:center;color:var(--text);padding:30px;line-height:1.6}
.bgcover .action{margin-top:14px}
.bottomnav{position:absolute;bottom:14px;left:0;right:0;display:flex;justify-content:space-around;padding:6px 10px;background:var(--phone);border-top:1px solid var(--border)}
.bottomnav button{background:none;border:0;color:var(--muted);font:inherit;font-size:.7rem;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;padding:4px 8px;border-radius:10px;min-width:56px}
.bottomnav button span{font-size:1.1rem}
.bottomnav button.on{color:var(--text);background:var(--surface)}

/* common controls */
.head{display:flex;justify-content:space-between;align-items:center;margin:2px 0 14px;gap:8px}
.head strong{font-size:1.4rem;letter-spacing:-.03em;display:flex;align-items:center;gap:8px;min-width:0}
.head strong .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.back{background:none;border:0;color:var(--text);font-size:1.4rem;cursor:pointer;padding:0 4px;line-height:1}
.icon,.small,.action,.danger{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:13px;padding:8px 10px;font:inherit;cursor:pointer;font-size:.85rem}
.small{font-size:.78rem}
.action{background:var(--accent);border-color:var(--accent);color:#fff}
.action:disabled,.small:disabled{opacity:.5;cursor:not-allowed}
.danger{background:#4a2330;border-color:#7a3446;color:#ffc9c9}
.search,input[type=search],input[type=text],input[type=number],input[type=tel],input[type=password],textarea,select{width:100%;background:var(--surface);color:var(--text);border:1px solid var(--border);padding:11px;border-radius:12px;font:inherit;font-size:.85rem;outline:none}
input:focus,textarea:focus{border-color:var(--accent)}
.search{color:var(--muted);cursor:pointer}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}
.pill{border:0;border-radius:22px;padding:7px 11px;background:var(--surface);color:var(--text);font:inherit;font-size:.72rem;cursor:pointer}
.pill.on{background:var(--accent);color:#fff}
.row{display:flex;align-items:center;gap:10px;padding:12px 1px;border-bottom:1px solid var(--border);cursor:pointer;text-align:left;background:none;border-left:0;border-right:0;border-top:0;color:inherit;font:inherit;width:100%}
.row:focus-visible{outline:2px solid var(--accent);border-radius:8px}
.avatar{width:38px;height:38px;flex:none;border-radius:14px;background:#6d58a8;color:#fff;display:grid;place-items:center;font-weight:bold;text-transform:uppercase}
.avatar.private{background:#473969}
.meta{min-width:0;flex:1}.meta b{font-size:.9rem;display:flex;gap:6px;align-items:center}.meta div{font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.time{color:var(--muted);font-size:.65rem;align-self:flex-start;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.unread{background:var(--accent);color:#fff;border-radius:10px;font-size:.6rem;padding:2px 6px;font-weight:700}
.fab{position:absolute;bottom:70px;right:17px;background:var(--accent);border:0;color:white;padding:13px 15px;border-radius:17px;cursor:pointer;font:inherit;font-weight:600;box-shadow:0 8px 20px #0005}
.badge{font-size:.62rem;color:#d3c2ff;border:1px solid #7562a4;padding:5px 8px;border-radius:11px;white-space:nowrap;letter-spacing:.03em}
.badge.ok{color:#bff0d5;border-color:#3f8a62}.badge.warn{color:#ffe1a6;border-color:#9a7a3a}.badge.bad{color:#ffb9b9;border-color:#a04848}
.label{font-size:.68rem;color:var(--muted);margin:12px 0 6px;letter-spacing:.05em;text-transform:uppercase}
.box{background:var(--surface);padding:12px;border-radius:13px;font-size:.8rem;margin:10px 0;line-height:1.45}
.box.warn{background:#4a3d1f;border:1px solid #9a7a3a}
.box.bad{background:#4a2330;border:1px solid #a04848}
.box.ok{background:#1f4a35;border:1px solid #3f8a62}
.stack{display:flex;flex-direction:column;gap:10px}
.setting{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);font-size:.85rem}
.setting select,.setting input[type=text]{width:auto;max-width:55%}
.setting label.sw{display:flex;align-items:center;gap:8px;cursor:pointer}
.err{color:#ffb9b9;font-size:.8rem;margin:6px 0}
.ok-text{color:#bff0d5;font-size:.8rem}
.empty{color:var(--muted);text-align:center;padding:40px 10px;font-size:.85rem;line-height:1.5}

/* vault gate */
.vault{margin:60px auto 0;max-width:260px;text-align:center}
.lockicon{font-size:34px;background:#473969;color:#d4c6ff;display:grid;place-items:center;border-radius:24px;width:70px;height:70px;margin:auto}
.vault h2{font-size:1.2rem;margin:14px 0 6px}.vault p{font-size:.8rem;color:var(--muted);margin:0 0 12px}
.vault input{text-align:center;letter-spacing:.3em;font-size:1.1rem}
.vault .action{display:block;margin:12px auto 6px;width:100%}

/* conversation */
.bubble{background:var(--bubble);border-radius:18px;padding:11px 13px;margin:8px 0;width:max-content;max-width:86%;font-size:.9rem;line-height:1.45;word-wrap:break-word;position:relative}
.bubble.mine{margin-left:auto;background:var(--accent2);color:#fff}
.bubble .st{display:block;font-size:.62rem;opacity:.75;margin-top:4px;text-align:right}
.bubble .st.failed{color:#ffb9b9;opacity:1}
.bubble img.thumb{display:block;max-width:220px;border-radius:12px;margin:2px 0 6px;cursor:pointer}
.bubble .file{display:flex;gap:8px;align-items:center;font-size:.8rem}
.bubble .file button{margin-left:6px}
.composer{position:absolute;left:12px;right:12px;bottom:14px;background:var(--phone);padding:6px 0 0;display:flex;gap:6px;align-items:flex-end}
.composer textarea{flex:1;resize:none;min-height:42px;max-height:120px}
.transport{position:absolute;left:12px;right:12px;bottom:66px;font-size:.66rem;display:flex;justify-content:space-between;align-items:center;color:var(--muted);padding:0 4px}
.transport .badge{cursor:pointer}
.attachments{position:absolute;left:12px;right:12px;bottom:100px;background:var(--surface);padding:12px;border:1px solid var(--border);border-radius:14px;z-index:3;display:flex;gap:7px;flex-wrap:wrap}
.keybanner{background:#4a3d1f;border:1px solid #9a7a3a;border-radius:12px;padding:10px;font-size:.78rem;margin-bottom:10px;line-height:1.4}
.keybanner .btns{display:flex;gap:6px;margin-top:8px}
.daylabel{font-size:.66rem;color:var(--muted);text-align:center;margin:10px 0 4px;letter-spacing:.05em}

/* scratch reveal */
.reveal{position:relative;border-radius:19px;overflow:hidden;border:1px solid #8b72c1;background:#302653;touch-action:none;user-select:none;margin:8px 0;max-width:92%;min-height:120px}
.reveal .message{padding:16px;color:#fff;font-size:1rem;font-weight:600;line-height:1.55;min-height:120px}
.reveal canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
.reveal.plain canvas{display:none}

/* media tiles */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tile{border:0;border-radius:13px;min-height:95px;background:linear-gradient(135deg,#647eb1,#24395e);color:#fff;text-align:left;padding:9px;font:inherit;font-size:.72rem;display:flex;flex-direction:column;justify-content:flex-end;cursor:pointer;overflow:hidden;position:relative}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.tile span{position:relative;background:#0008;padding:3px 6px;border-radius:6px;align-self:flex-start;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.result{display:flex;gap:8px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--border);cursor:pointer;background:none;border-left:0;border-right:0;border-top:0;color:inherit;font:inherit;width:100%;text-align:left}
.result b{font-size:.8rem}.result div{font-size:.78rem;color:var(--muted)}
mark{background:#f3c56b66;color:inherit;border-radius:3px}

/* share */
.qr{display:grid;place-items:center;margin:10px auto}
.qr canvas,.qr img{background:#fff;padding:8px;border-radius:12px;max-width:180px}
.fieldlist label{display:flex;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--border);font-size:.85rem}
.fieldlist input[type=text]{margin-left:auto;max-width:55%}

/* safety number */
.sn{font-family:ui-monospace,Menlo,monospace;font-size:.95rem;letter-spacing:.06em;line-height:1.8;text-align:center;background:var(--surface);border-radius:12px;padding:12px;word-spacing:.3em}

.progress{height:6px;background:var(--surface);border-radius:4px;overflow:hidden;margin:6px 0}
.progress div{height:100%;background:var(--accent);transition:width .2s}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

@media (max-width:980px){.layout{grid-template-columns:1fr;max-width:520px}.guide-panel{order:3}.rail{order:2}}
@media (max-width:560px){.layout{padding:0;max-width:none}.phone{height:100vh;height:100dvh;border:0;border-radius:0;box-shadow:none}.phone:before{display:none}.rail,.guide-panel{margin:12px;border-radius:14px}}