:root {
  --brand-1: #667eea;
  --brand-2: #764ba2;
  --pink-1: #ff006e;
  --pink-2: #ff4081;
  --ok: #28a745;
  --bg: #f4f5fb;
  --card: #ffffff;
  --ink: #2b2d42;
  --muted: #7b8194;
  --line: #e7e9f3;
  --shadow: 0 10px 30px rgba(102, 126, 234, 0.14);
  --radius: 18px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 10% -10%, #eef0ff 0%, var(--bg) 55%);
  color: var(--ink);
  min-height: 100vh;
}

/* ---------- Header ---------- */
.topbar {
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color: #fff;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  box-shadow: 0 6px 20px rgba(118, 75, 162, 0.3);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 22px; letter-spacing: -0.3px; }
.brand .heart { filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)); }
.badge {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.22);
}
.badge.crypto { background: linear-gradient(45deg, var(--pink-1), var(--pink-2)); }
.spacer { flex: 1; }

/* ---------- Identity switcher ---------- */
.idbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: rgba(255,255,255,.14); padding: 6px 8px; border-radius: 999px;
}
.idbar .me { font-weight: 700; }
.chip {
  border: 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
  padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.9); color: var(--brand-2);
  transition: transform .08s ease, box-shadow .15s ease;
}
.chip:hover { transform: translateY(-1px); }
.chip.active { background: #fff; box-shadow: 0 0 0 2px var(--pink-2) inset; color: var(--pink-1); }
.chip.ghost { background: rgba(255,255,255,.2); color: #fff; }
.idbar input {
  border: 0; border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 13px;
  width: 130px; outline: none;
}

/* ---------- Layout ---------- */
.wrap { max-width: 1080px; margin: 22px auto; padding: 0 16px; display: grid; grid-template-columns: 340px 1fr; gap: 18px; }
@media (max-width: 820px) { .wrap { grid-template-columns: 1fr; } }

.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--line); overflow: hidden; }
.card .hd { padding: 16px 18px 6px; }
.card .hd h2 { margin: 0; font-size: 16px; }
.card .hd p { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; }
.card .bd { padding: 14px 18px 18px; }

/* ---------- Send crush ---------- */
.send-row { display: flex; gap: 8px; }
.send-row input {
  flex: 1; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; font: inherit; font-size: 15px; outline: none;
}
.send-row input:focus { border-color: var(--brand-1); }
.btn {
  border: 0; cursor: pointer; font: inherit; font-weight: 700; color: #fff; border-radius: 12px; padding: 12px 16px;
  background: linear-gradient(45deg, var(--pink-1), var(--pink-2)); transition: transform .08s ease, filter .15s ease;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn.secondary { background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); }
.btn.ghost { background: #f0f1fa; color: var(--brand-2); }
.btn.sm { padding: 7px 11px; font-size: 12.5px; border-radius: 999px; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ---------- Connections list ---------- */
.conn { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 14px; cursor: pointer; border: 1.5px solid transparent; }
.conn:hover { background: #f7f8ff; }
.conn.active { background: #f2f0ff; border-color: #ddd6ff; }
.avatar { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; background: linear-gradient(135deg, #eef1ff, #f7ecff); flex: none; }
.conn .meta { flex: 1; min-width: 0; }
.conn .meta .name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conn .meta .sub { font-size: 11.5px; color: var(--muted); }
.pill { font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 999px; text-transform: uppercase; letter-spacing: .4px; }
.pill.sent { background: #eef1ff; color: var(--brand-2); }
.pill.recv { background: #ffeef6; color: var(--pink-1); }
.pill.mutual { background: linear-gradient(45deg, var(--pink-1), var(--pink-2)); color: #fff; }
.sec-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); padding: 12px 4px 4px; }
.sec-label:first-child { padding-top: 2px; }
.conn.locked { cursor: default; opacity: .82; }
.conn.locked:hover { background: transparent; }
.admirer-teaser { margin-top: 8px; padding: 14px 14px; border-radius: 14px; text-align: center; font-size: 14px; color: var(--pink-1); background: linear-gradient(135deg, #fff0f6, #f4f0ff); border: 1px dashed #f3c6dd; }
.admirer-teaser span { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.empty { text-align: center; color: var(--muted); padding: 26px 10px; font-size: 13.5px; }

/* ---------- Chat ---------- */
.chat { display: flex; flex-direction: column; height: min(72vh, 640px); }
.chat .chat-hd { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.chat .chat-hd .name { font-weight: 800; }
.chat .chat-hd .sub { font-size: 12px; color: var(--muted); }
.chat-actions { margin-left: auto; display: flex; gap: 7px; }
.stream { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; background: #fafbff; }
.bubble { max-width: 74%; padding: 9px 13px; border-radius: 15px; font-size: 14.5px; line-height: 1.35; word-wrap: break-word; }
.bubble.them { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.bubble.me { align-self: flex-end; color: #fff; background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); border-bottom-right-radius: 5px; }
.sys { align-self: center; text-align: center; font-size: 12px; color: var(--muted); background: #eef0fb; padding: 6px 12px; border-radius: 999px; }
.sys.reveal { background: #fff4e5; color: #b26a00; display: flex; gap: 8px; align-items: center; }
.composer { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); }
.composer input { flex: 1; border: 1.5px solid var(--line); border-radius: 999px; padding: 11px 16px; font: inherit; font-size: 14.5px; outline: none; }
.composer input:focus { border-color: var(--brand-1); }

/* ---------- Crypto inspector ---------- */
.inspector { margin: 0 16px 22px; max-width: 1080px; }
.inspector details { background: #0f1024; color: #cfd3ff; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
.inspector summary { cursor: pointer; padding: 12px 16px; font-weight: 700; list-style: none; display: flex; align-items: center; gap: 8px; }
.inspector summary::-webkit-details-marker { display: none; }
.inspector .log { max-height: 240px; overflow: auto; padding: 4px 16px 16px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; }
.inspector .log .entry { padding: 8px 0; border-top: 1px solid rgba(255,255,255,.08); white-space: pre-wrap; word-break: break-all; }
.inspector .log .k { color: #ff8fc4; }

/* ---------- Toast ---------- */
#toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px); opacity: 0; transition: all .25s ease; z-index: 50; }
#toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
#toast .t { background: #2b2d42; color: #fff; padding: 12px 18px; border-radius: 12px; font-size: 14px; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,.25); }

.hidden { display: none !important; }