:root {
  color-scheme: dark;
  --bg: #10131a;
  --panel: #181d27;
  --panel-2: #202735;
  --text: #f3f5fa;
  --muted: #9ca8bb;
  --accent: #a6e3c5;
  --accent-text: #10251d;
  --border: #2a3342;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); min-height: 100dvh; }
button, input { font: inherit; }
button { cursor: pointer; }
.app-shell { max-width: 760px; margin: 0 auto; min-height: 100dvh; background: var(--bg); }
.view { display: none; min-height: 100dvh; }
.view.active { display: flex; flex-direction: column; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding: 26px 22px 18px; }
.eyebrow { margin:0 0 8px; color:var(--muted); font-size:11px; letter-spacing:.16em; font-weight:700; }
.lock-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--accent); margin-right:6px; }
h1 { margin:0; font-size:32px; letter-spacing:-.04em; }
.icon-btn { width:42px; height:42px; border:1px solid var(--border); border-radius:14px; background:var(--panel); color:var(--text); font-size:27px; display:grid; place-items:center; }
.search-wrap { margin:0 20px 22px; padding:0 14px; min-height:48px; display:flex; align-items:center; gap:10px; border:1px solid var(--border); background:var(--panel); border-radius:15px; color:var(--muted); }
.search-wrap input { width:100%; background:transparent; border:0; outline:0; color:var(--text); min-width:0; }
.section-label { margin:0 22px 10px; color:var(--muted); font-size:11px; font-weight:750; letter-spacing:.14em; }
.chat-list { padding:0 12px; }
.chat-item { display:flex; gap:13px; align-items:center; padding:13px 10px; border:0; width:100%; text-align:left; color:var(--text); background:transparent; border-radius:17px; }
.chat-item:active, .chat-item:hover { background:var(--panel); }
.avatar { flex:0 0 auto; width:52px; height:52px; border-radius:18px; display:grid; place-items:center; font-weight:800; font-size:18px; background:linear-gradient(145deg,#354a61,#283243); color:#eaf3ff; position:relative; }
.avatar.online::after { content:""; position:absolute; width:10px; height:10px; border:2px solid var(--bg); background:var(--accent); border-radius:50%; bottom:0; right:0; }
.chat-copy { min-width:0; flex:1; }
.chat-name-row { display:flex; justify-content:space-between; gap:8px; align-items:center; margin-bottom:5px; }
.chat-name { font-weight:700; }
.chat-time { font-size:11px; color:var(--muted); white-space:nowrap; }
.chat-preview { color:var(--muted); font-size:13px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.unread { min-width:19px; height:19px; padding:0 5px; border-radius:10px; background:var(--accent); color:var(--accent-text); display:grid; place-items:center; font-size:11px; font-weight:800; }
.demo-note { margin:auto 20px 18px; padding-top:20px; color:#788499; font-size:11px; text-align:center; }
.chat-view { height:100dvh; max-height:100dvh; }
.chat-header { display:flex; align-items:center; gap:11px; padding:12px 14px; border-bottom:1px solid var(--border); background:rgba(16,19,26,.96); }
.chat-header .icon-btn { flex:0 0 auto; }
.small-avatar { width:39px; height:39px; border-radius:14px; font-size:15px; }
.chat-person { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.chat-person strong { font-size:14px; }
.chat-person span { font-size:11px; color:var(--muted); }
.lock-icon { font-size:23px; color:var(--accent); padding:0 8px; }
.security-banner { background:#3a2b18; color:#ffdba5; padding:9px 14px; font-size:11px; text-align:center; }
.messages { flex:1; overflow-y:auto; padding:18px 14px 24px; display:flex; flex-direction:column; gap:11px; }
.day-label { align-self:center; color:var(--muted); font-size:10px; padding:6px 10px; background:var(--panel); border-radius:10px; margin:4px 0 8px; }
.message-row { display:flex; flex-direction:column; max-width:84%; gap:4px; }
.message-row.mine { align-self:flex-end; align-items:flex-end; }
.message-row.theirs { align-self:flex-start; align-items:flex-start; }
.bubble { padding:11px 14px; border-radius:18px; line-height:1.4; overflow-wrap:anywhere; font-size:14px; white-space:pre-wrap; }
.mine .bubble { background:var(--accent); color:var(--accent-text); border-bottom-right-radius:5px; }
.theirs .bubble { background:var(--panel-2); color:var(--text); border-bottom-left-radius:5px; }
.message-meta { color:var(--muted); font-size:10px; padding:0 4px; }
.photo { max-width:min(240px, 65vw); max-height:320px; display:block; border-radius:12px; }
.composer { display:flex; align-items:flex-end; gap:8px; padding:10px 12px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--border); background:var(--bg); }
.message-input-wrap { min-height:48px; flex:1; min-width:0; display:flex; align-items:center; gap:5px; padding:0 8px; border:1px solid var(--border); background:var(--panel); border-radius:17px; }
.message-input-wrap input { flex:1; width:100%; min-width:0; padding:11px 4px; border:0; outline:0; background:transparent; color:var(--text); }
.inline-btn { color:var(--muted); font-size:22px; padding:4px 7px; background:transparent; border:0; }
.image-button { cursor:pointer; }
.send-btn { width:48px; height:48px; border:0; border-radius:17px; background:var(--accent); color:var(--accent-text); font-size:22px; }
@media (min-width: 600px) { .app-shell { margin-top:20px; min-height:calc(100dvh - 40px); border:1px solid var(--border); border-radius:24px; overflow:hidden; } .view { min-height:calc(100dvh - 42px); } .chat-view { height:calc(100dvh - 42px); } }