path: root/src/style.css

/* Bitcoin Wallet — hand-rolled CSS. Clean light "paper wallet" look. */

:root {
  --bg: #eef0f3;
  --paper: #ffffff;
  --ink: #15171a;
  --muted: #6b7280;
  --faint: #9aa1ac;
  --line: #e6e8ec;
  --line-strong: #d4d8de;
  --accent: #15171a; /* coinos black */
  --accent-hover: #2c3037; /* accent, slightly lifted */
  --accent-fg: #ffffff; /* text on accent */
  --accent-ink: #000000;
  --accent-soft: #ececef;
  --green: #14935a;
  --green-soft: #e7f6ee;
  --green-line: #c4e7d4;
  --red: #c43b3b;
  --red-soft: #fbeaea;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 30px rgba(16, 24, 40, 0.07);
  --surface2: #f7f8fa; /* subtle raised surface (hover, mnemonic cells) */
  --toast-bg: #15171a; /* dark toast on light page */
  --toast-fg: #ffffff;
  --tab-bg: #e9ebef; /* tab strip background */
  --info: #3949ab;
  --info-soft: #eef2ff;
  --info-line: #d4ddfb;
  --radius: 16px;
  --wash: rgba(247, 147, 26, 0.05); /* warm glow behind the page top */
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Dark theme — applied via data-theme="dark" on <html>. */
:root[data-theme="dark"] {
  --bg: #0f1216;
  --paper: #181b21;
  --ink: #e7e9ee;
  --muted: #9aa1ac;
  --faint: #6f7782;
  --line: #2a2f37;
  --line-strong: #3a414b;
  --accent: #ffffff; /* coinos white on dark */
  --accent-hover: #d9dce1; /* accent, slightly dimmed */
  --accent-fg: #0f1216; /* text on accent */
  --accent-ink: #e7e9ee;
  --accent-soft: #262b33;
  --green: #2dbd80;
  --green-soft: #14271d;
  --green-line: #235340;
  --red: #e66a6a;
  --red-soft: #2c1a1a;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 30px rgba(0, 0, 0, 0.5);
  --surface2: #20242b;
  --toast-bg: #2c323b; /* raised toast that reads against the dark page */
  --toast-fg: #f3f5f8;
  --tab-bg: #20242b;
  --wash: rgba(247, 147, 26, 0.07);
  --info: #9db4ff;
  --info-soft: #1a2030;
  --info-line: #2c3a5e;
}

* { box-sizing: border-box; }

html {
  /* Reserve the scrollbar's gutter always, so it doesn't appear the instant
     the history list fills the page and shrink the viewport — that width
     change re-centered the balance carousel's snapped card, the "slight move
     one last time" after a switch. Stable gutter = no reflow when content
     grows. */
  scrollbar-gutter: stable;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.45;
}

#app {
  max-width: 560px;
  margin: 0 auto;
  padding: 24px 16px 24px;
  /* A column the height of the window, so the footer sits at the bottom of
     short screens instead of floating under the content. svh, not dvh: dvh
     can resolve to the tall viewport (URL bar hidden) at first paint, which
     puts the footer just below the fold until you scroll — the phone browser
     showing its address bar is the case that has to fit. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

/* ---- typography ---- */
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 13px; }
.mono { font-family: var(--mono); }
.center { text-align: center; }
.break { word-break: break-all; }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
summary { cursor: pointer; }

/* breathing room when an input is scrolled to the top for the keyboard */
input { scroll-margin-top: 12px; }
/* room below the recipient candidates so the field can scroll to the top
   even when the page would otherwise be too short (the margin sits under
   the keyboard, never seen) */
@media (pointer: coarse) { .send-suggest { margin-bottom: 45vh; } }

/* ---- layout helpers ---- */
.row { display: flex; align-items: center; gap: 10px; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 10px; }
.grow { flex: 1; }
.gap6 { gap: 6px; }
.mt8 { margin-top: 8px; } .mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; }
.hidden { display: none !important; }

/* ---- brand / header ---- */
.brand { display: flex; align-items: center; gap: 10px; }
.logo-full { height: 40px; flex: none; color: var(--ink); display: grid; place-items: center; }
.logo-full svg { height: 40px; width: auto; display: block; }
.brand h1 { font-size: 19px; }

.badge {
  font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--line-strong); color: var(--muted); white-space: nowrap;
}
.badge.dot::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--green); margin-right: 6px; vertical-align: middle;
}
.badge.off.dot::before { background: var(--faint); }
.badge.live { color: var(--green); border-color: var(--green-line); background: var(--green-soft); }
.badge.live.dot::before { animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.badge.testnet { color: var(--accent-ink); border-color: var(--accent); background: var(--accent-soft); }

/* ---- card ---- */
.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 20px;
}
.card + .card { margin-top: 16px; }

/* ---- balance card ---- */
/* Account identity at a glance: a symbol beside the label and a colored
   hairline across the card's crown — spending wears lightning + the ark
   mark (violet), savings the bitcoin disc (orange). Inset shadow stacks
   with the card's own and clips to the radius; no layout shift. */
.face-ico { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; line-height: 1; flex-shrink: 0; }
.face-ico.save { color: #f7931a; }
.face-ico.spend { color: #7c3aed; }
.balance.face-spending { box-shadow: inset 0 3px 0 rgba(124, 58, 237, .55), var(--shadow); }
.balance.face-savings { box-shadow: inset 0 3px 0 rgba(247, 147, 26, .6), var(--shadow); }
.balance .amt { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; font-family: var(--mono); }
.balance .amt .unit { font-size: 18px; color: var(--muted); margin-left: 6px; font-weight: 600; }
.balance .usd { color: var(--muted); margin-top: 2px; }
.balance .split { margin-top: 14px; display: flex; gap: 22px; }
.balance .split .k { font-size: 12px; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; }
.balance .split .v { font-family: var(--mono); font-size: 14px; }
.balance .split .v.pending { color: var(--accent-ink); }

/* ---- tabs ---- */
.tabs { display: flex; gap: 4px; background: var(--tab-bg); border-radius: 12px; padding: 4px; margin: 16px 0; }
.tabs button {
  flex: 1; border: 0; background: transparent; padding: 9px 4px; border-radius: 9px;
  font: inherit; font-weight: 600; font-size: 14px; color: var(--muted); cursor: pointer;
}
.tabs button.active { background: var(--paper); color: var(--ink); box-shadow: var(--shadow); }

/* ---- buttons ---- */
button, .btn {
  font: inherit; font-weight: 600; cursor: pointer; border-radius: 11px;
  border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink);
  padding: 11px 16px; transition: filter .12s, background .12s, border-color .12s;
  /* no double-tap-zoom arbitration: taps commit immediately on mobile */
  touch-action: manipulation;
}
button:hover { background: var(--surface2); }
button:active { transform: translateY(1px); }
button:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-ghost { background: transparent; }
.btn-sm { padding: 7px 11px; font-size: 13px; border-radius: 9px; }
.btn-block { width: 100%; display: block; }
.btn-danger { color: var(--red); border-color: var(--red); background: var(--red-soft); }
.iconbtn { padding: 9px 11px; line-height: 1; }

/* ---- inputs ---- */
label.field { display: block; }
.field .lab { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 6px; display: block; }
input[type=text], input[type=password], input[type=number], textarea, select {
  width: 100%; font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line-strong); border-radius: 11px; padding: 11px 13px;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
/* Custom caret so it isn't crammed against the right border (native is fixed). */
select {
  -webkit-appearance: none; appearance: none; padding-right: 38px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%236b7280" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
  background-repeat: no-repeat; background-position: right 14px center;
}
textarea { resize: vertical; min-height: 84px; font-family: var(--mono); font-size: 15px; }
.mono-input { font-family: var(--mono); }
.input-group { display: flex; gap: 8px; }
.input-group input { flex: 1; }

/* unit toggle */
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; }
.seg button { border: 0; border-radius: 0; padding: 9px 14px; background: var(--paper); }
.seg button.active { background: var(--accent-soft); color: var(--accent-ink); }

/* ---- address / qr ---- */
.qr { width: 220px; height: 220px; display: block; border-radius: 12px; border: 1px solid var(--line); }
.addr-box {
  font-family: var(--mono); font-size: 15px; color: var(--ink); background: var(--surface2); border: 1px dashed var(--line-strong);
  border-radius: 11px; padding: 12px 14px; word-break: break-all; text-align: center;
}
/* quiet edit/copy affordances living inside the address box */
.addr-editable { position: relative; padding-right: 62px; }
.addr-actions {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center;
}
.addr-actions button {
  background: none; border: none; box-shadow: none; padding: 5px; line-height: 0;
  color: var(--muted); cursor: pointer;
}
.addr-actions button:hover { color: var(--ink); background: none; }
.addr-actions button:active { transform: none; }
.path { font-family: var(--mono); font-size: 12px; color: var(--faint); }
.addr-check { font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--muted); word-break: break-all; padding: 0 2px; }
.addr-check .hl { color: var(--ink); font-weight: 700; }

/* ---- mnemonic grid ---- */
.words { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.words .w {
  display: flex; align-items: baseline; gap: 7px; background: var(--surface2);
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; font-family: var(--mono);
}
.words .w .n { color: var(--faint); font-size: 12px; width: 18px; text-align: right; }
.words .w .t { font-weight: 600; }
.warn-box {
  background: var(--accent-soft); border: 1px solid var(--accent); color: var(--accent-ink);
  border-radius: 11px; padding: 12px 14px; font-size: 14px;
}

/* ---- lists (tx / utxo) ---- */
.list { display: flex; flex-direction: column; }
.item { display: flex; align-items: center; gap: 12px; padding: 13px 2px; border-top: 1px solid var(--line); }
.item:first-child { border-top: 0; }
.ico { width: 34px; height: 34px; border-radius: 9px; flex: none; display: grid; place-items: center; font-size: 16px; }
.ico.in { background: var(--green-soft); color: var(--green); }
.ico.out { background: var(--red-soft); color: var(--red); }
.amount-pos { color: var(--green); font-family: var(--mono); font-weight: 600; }
.amount-neg { color: var(--red); font-family: var(--mono); font-weight: 600; }
.amount { font-family: var(--mono); font-weight: 600; }
.tag { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; }
.tag.pending { background: var(--accent-soft); color: var(--accent-ink); }
.tag.conf { background: var(--green-soft); color: var(--green); }

/* coin control rows */
.coin { display: flex; align-items: center; gap: 11px; padding: 11px 2px; border-top: 1px solid var(--line); }
.coin:first-child { border-top: 0; }
.coin input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); }
/* per-coin fact pills: each datum wears its own little labeled chip */
.coin-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.coin-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 11.5px; color: var(--muted); white-space: nowrap;
}
.coin-chip.warn { color: var(--accent-ink); border-color: var(--accent); }

/* ---- review / summary ---- */
.summary { background: var(--surface2); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.summary .line { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 14px; align-items: baseline; }
.summary .line .k { color: var(--muted); flex: none; }
.summary .line .v { font-family: var(--mono); text-align: right; min-width: 0; word-break: break-word; }

/* ---- misc ---- */
.notice { border-radius: 11px; padding: 11px 13px; font-size: 14px; }
.notice.err { background: var(--red-soft); color: var(--red); border: 1px solid #f1c9c9; }
.notice.ok { background: var(--green-soft); color: var(--green); border: 1px solid var(--green-line); }
.notice.info { background: var(--info-soft); color: var(--info); border: 1px solid var(--info-line); }
.spinner {
  width: 18px; height: 18px; border: 2px solid var(--line-strong); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; vertical-align: middle;
}
.spinner.sm { width: 13px; height: 13px; border-width: 2px; }

/* ---- qr scanner overlay ---- */
.scan-overlay { position: fixed; inset: 0; z-index: 60; background: #000; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.scan-overlay video { width: 100%; height: 100%; object-fit: cover; }
.scan-frame { position: absolute; width: min(70vw, 260px); height: min(70vw, 260px); border: 3px solid #fff; border-radius: 18px; box-shadow: 0 0 0 9999px rgba(0,0,0,0.45); }
.scan-hint { position: absolute; bottom: 70px; left: 0; right: 0; text-align: center; color: #fff; font-size: 14px; padding: 0 24px; text-shadow: 0 1px 3px rgba(0,0,0,0.7); }
.scan-close {
  position: absolute; top: 16px; right: 16px; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(0,0,0,0.5); color: #fff; border: 1px solid rgba(255,255,255,0.4);
  font-size: 18px; line-height: 1; cursor: pointer;
  /* the base button rule's 11px/16px padding shoved the glyph off-center
     inside this fixed circle — center it properly and drop the padding */
  display: flex; align-items: center; justify-content: center; padding: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: var(--toast-bg); color: var(--toast-fg); padding: 10px 16px; border-radius: 10px;
  font-size: 14px; box-shadow: var(--shadow); z-index: 50; opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.words .w.masked .t { color: var(--faint); letter-spacing: 2px; }

.check-badge {
  width: 64px; height: 64px; border-radius: 50%; flex: none;
  background: var(--green-soft); color: var(--green);
  display: grid; place-items: center; font-size: 34px; font-weight: 700;
}
.footer { margin-top: auto; padding-top: 28px; padding-bottom: 8px; }
.footer a { color: var(--accent-ink); font-weight: 600; }

/* Clickable unit labels (BTC/sats) — look like text, toggle the global unit. */
.unit-tag {
  background: none; border: 0; padding: 0; margin: 0; font: inherit; cursor: pointer;
  color: var(--muted); font-weight: 600;
  border-radius: 0;
  border-bottom: 1px dotted var(--line-strong);
}
.unit-tag:hover { background: none; color: var(--accent-ink); border-bottom-color: var(--accent); }
.unit-tag:active { transform: none; }
.divider { height: 1px; background: var(--line); margin: 16px 0; border: 0; }
hr.divider { margin: 16px 0; }
.linklike { background: none; border: 0; padding: 0; color: var(--accent-ink); font-weight: 600; cursor: pointer; }
.linklike:hover { text-decoration: underline; background: none; }

/* ---- how it works ---- */

@media (max-width: 420px) {
  .words { grid-template-columns: repeat(2, 1fr); }
  .balance .amt { font-size: 28px; }
}

/* Icon dropdown (receive mode) — a <select> can't render SVG in options. */
.icon-select-btn {
  width: 100%; display: flex; align-items: center; gap: 9px;
  font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line-strong); border-radius: 11px; padding: 11px 13px; cursor: pointer;
}
.icon-select-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
.icon-select-menu {
  background: var(--paper); border: 1px solid var(--line-strong); border-radius: 11px;
  padding: 5px; box-shadow: 0 10px 28px rgba(0,0,0,.18); display: flex; flex-direction: column; gap: 2px;
}
.icon-select-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  font: inherit; color: var(--ink); background: transparent;
  border: 0; border-radius: 8px; padding: 10px 10px; cursor: pointer; text-align: left;
}
.icon-select-item:hover { background: var(--hover, rgba(128,128,128,.12)); }
.icon-select-item.active { background: var(--accent-soft, rgba(247,147,26,.14)); }
.sel-ico { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; font-size: 16px; line-height: 1; }
.sel-ico svg { display: block; }

/* Messages — Concord community chat. */
/* The composer must never be below the fold. The card is sized to the
   viewport and the message log is the only part that flexes, so opening the
   invite or member panel shrinks the scroll area instead of pushing the input
   off the bottom of the screen. The subtracted space is what sits around the
   card: #app's padding plus the brand header and its gap. */
.chat-card {
  padding: 0; overflow: hidden; display: flex; flex-direction: column;
  height: calc(100vh - 144px); max-height: calc(100vh - 144px);
  height: calc(100dvh - 144px); max-height: calc(100dvh - 144px);
  min-height: 320px;
}
.chat-head { padding: 14px 16px 10px; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.chat-title { font-weight: 650; }
.chat-log {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px; background: var(--surface2);
}
.chat-row { display: flex; gap: 9px; align-items: flex-start; }
.chat-row.grouped { margin-top: -6px; }
.chat-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; object-fit: cover;
  background: var(--accent-soft);
}
.ava-img { background-size: cover; background-position: center; }
.chat-avatar.fallback {
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 650; color: var(--muted); text-transform: uppercase;
}
.chat-avatar.spacer { background: transparent; height: 0; }
.chat-body { min-width: 0; flex: 1; }
.chat-meta { display: flex; align-items: baseline; gap: 7px; margin-bottom: 2px; }
.chat-name { font-size: 14px; font-weight: 650; }
.chat-badge {
  font-size: 10px; font-weight: 650; color: var(--accent-fg); background: var(--accent);
  border-radius: 5px; padding: 1px 5px; margin-left: 5px; vertical-align: 1px;
}
.chat-time { font-size: 12px; color: var(--faint); }
.chat-bubble {
  position: relative; display: inline-block; max-width: 100%;
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  padding: 7px 11px; font-size: 15px; line-height: 1.45;
  overflow-wrap: break-word; white-space: pre-wrap;
}
/* the messages surfaces run edge to edge on phones, like the notes feed —
   the card walls step outside #app's padding and the borders/radius go */
@media (max-width: 520px) {
  .chat-page {
    margin-left: -16px; margin-right: -16px;
    border-left: none; border-right: none; border-radius: 0;
  }
}
.chat-edited { font-size: 11px; color: var(--faint); }
.chat-del {
  position: absolute; top: -7px; right: -7px; width: 18px; height: 18px;
  display: none; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); border-radius: 50%;
  background: var(--paper); color: var(--muted); font-size: 12px; line-height: 1; cursor: pointer;
  /* the global button padding (11px 16px) floors the border-box past 18px
     wide and turns the circle into an oval — a fixed-size round button
     must zero it */
  padding: 0;
}
.chat-row:hover .chat-del { display: flex; }
/* Telegram-style message action sheet: quick reactions + actions, opened by
   a tap on any bubble (rides the confirm-pop backdrop). */
.msg-sheet { width: 100%; max-width: 300px; gap: 2px; }
.msg-sheet-emojis { display: flex; gap: 4px; margin-bottom: 8px; }
.msg-sheet-emojis button {
  flex: 1; font-size: 19px; line-height: 1; padding: 8px 0;
  border: 1px solid var(--line); border-radius: 10px; background: var(--paper);
}
.msg-sheet-emojis button.on { border-color: var(--accent); }
.msg-sheet-item {
  display: flex; gap: 12px; align-items: center; text-align: left;
  border: none; background: none; padding: 11px 8px; font-weight: 550; border-radius: 10px;
}
.msg-sheet-item:hover { background: var(--surface2); }
.msg-sheet-ico { width: 20px; text-align: center; color: var(--muted); flex-shrink: 0; }
/* the quoted message a reply carries, and the composer's replying-to bar */
.chat-quote {
  display: flex; flex-direction: column; gap: 0; margin-bottom: 4px;
  border-left: 3px solid var(--accent); background: var(--surface2);
  border-radius: 6px; padding: 3px 8px; font-size: 12px; max-width: 100%;
}
.chat-quote-name { font-weight: 650; }
.chat-quote-text {
  color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.reply-bar {
  display: flex; align-items: center; gap: 8px; padding: 7px 12px;
  border-top: 1px solid var(--line); background: var(--surface2); flex: 0 0 auto;
}
.chat-reacts { display: flex; gap: 5px; margin-top: 3px; flex-wrap: wrap; }
.chat-react {
  font-size: 12px; background: var(--paper); border: 1px solid var(--line);
  border-radius: 9px; padding: 1px 7px;
}
.chat-react.clickable { cursor: pointer; }
.chat-react.on { border-color: var(--accent); color: var(--accent); }
.chat-compose {
  display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line);
  align-items: center; flex: 0 0 auto;
}
.chat-compose input, .chat-compose textarea {
  flex: 1; min-width: 0; font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line-strong); border-radius: 11px; padding: 10px 13px;
}
.chat-compose textarea { resize: none; max-height: 120px; overflow-y: auto; line-height: 1.4; }
.chat-compose input:focus-visible, .chat-compose textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }

/* Messages v2 — home lists, DM threads, invite panel. */
.chat-back { font-size: 22px; line-height: 1; padding: 2px 10px 4px; flex-shrink: 0; }
.chat-thread-row { display: flex; gap: 10px; align-items: center; cursor: pointer; }
/* list rows read at message size: names 15, previews/member counts 14 —
   the generic .small (12px) made the inbox feel like fine print */
.chat-thread-row .chat-name { font-size: 15px; }
.chat-thread-row .small { font-size: 14px; }
.chat-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-when { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.thread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex-shrink: 0; }
.chat-thread-row.unread .chat-name { font-weight: 700; }
.chat-thread-row.unread .chat-preview { color: var(--ink); }
.chat-invite { padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface2); flex: 0 0 auto; max-height: 40vh; overflow-y: auto; }
.chat-invite input { font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--line-strong); border-radius: 9px; padding: 7px 10px; min-width: 0; }
.chat-row.dm { justify-content: flex-start; }
.chat-row.dm.mine { justify-content: flex-end; }
.chat-row.dm .chat-body { max-width: 82%; }
.chat-row.dm.mine .chat-body { text-align: right; }
.chat-bubble.me { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); text-align: left; }
/* a link inside the accent-colored own bubble: the page's link color is
   calibrated against the PAGE background, not the bubble's (in dark mode a
   near-white link sat on the white bubble) — take the bubble's own
   foreground and let the underline say "link" */
.chat-bubble.me a { color: inherit; text-decoration: underline; }
.chat-row.dm .chat-time { font-size: 10px; color: var(--faint); margin-top: 2px; }

/* Profile note feed: inline images stay contained, links wrap. */
.note-img { display: block; max-width: 100%; max-height: 320px; border-radius: 10px; margin-top: 6px; object-fit: contain; }
.note-video { display: block; max-width: 100%; max-height: 360px; border-radius: 10px; margin-top: 6px; background: #000; }
/* the profile notes feed: page-scrolled (no inner scrollbox); on phones it
   runs edge to edge — the card walls step outside #app's padding */
.notes-feed { padding: 2px 14px; }
@media (max-width: 520px) {
  .notes-feed {
    margin-left: -16px; margin-right: -16px;
    border-left: none; border-right: none; border-radius: 0;
  }
}


/* Inline move-money panel on the balance card. */
.balance-move { gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); text-align: left; }
/* balance carousel: the other face peeks at the card's edge and drags into
   place — native scroll-snap does the physics. Full-bleed inside the card
   so the peeking neighbor touches the card wall. */
/* A page-level strip of whole balance CARDS: full-bleed past the app column
   so the neighbor card peeks in from the screen edge. The negative margins +
   matching padding enlarge the clip box so card shadows aren't cropped. */
.bal-carousel {
  position: relative; /* offsetParent for the slides: offsetLeft math stays container-relative */
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin: -16px; padding: 16px; scrollbar-width: none; -ms-overflow-style: none;
  touch-action: pan-x pan-y;
}
.bal-carousel::-webkit-scrollbar { display: none; }
/* Isolate each card's layout + paint from the rest of the page: the history
   list building in below (and the balance number ticking) can't invalidate
   the carousel's layer, and the scroll stays on the compositor even while the
   main thread is busy with boot work. */
.bal-slide {
  flex: 0 0 calc(100% - 40px); scroll-snap-align: center; min-width: 0;
  /* layout containment (not paint — that would clip the card's own shadow):
     the history list building in below and the balance ticking can't force
     the slide to reflow, so the scroll stays on the compositor during boot */
  contain: layout;
}
.bal-carousel .card + .card { margin-top: 0; }
.bal-carousel { cursor: grab; } /* touch never shows a cursor — no media-query hedging */
.bal-carousel.grabbing, .bal-carousel.grabbing * { cursor: grabbing; user-select: none; }
.balance-move .seg { display: flex; width: 100%; }
.balance-move .seg button { flex: 1; }
.send-suggest { max-height: 260px; overflow-y: auto; }
.clickable { cursor: pointer; }
.profile-avatar { width: 64px; height: 64px; font-size: 18px; }
/* profile cover: full-bleed across the top of the profile card; the avatar
   row overlaps it so the face sits half on the cover, half on paper */
.profile-banner {
  height: 118px; margin: -20px -20px 0; background-size: cover; background-position: center;
  border-radius: var(--radius) var(--radius) 0 0;
}
/* The overlap must move the row's DIRECT child: when a hat is worn that's
   the .hat-wrap — pulling the avatar up inside the wrap left the hat
   behind, planted on the face. */
.profile-banner + .row > .profile-avatar,
.profile-banner + .row > .hat-wrap { margin-top: -26px; }
.profile-banner + .row .profile-avatar {
  border: 3px solid var(--paper); box-sizing: content-box;
}
.zap-chip { display: inline-flex; gap: 5px; align-items: center; cursor: pointer; background: var(--surface2); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px 1px 2px; }
.chat-avatar.mini { width: 18px; height: 18px; font-size: 8px; flex-shrink: 0; }
.chat-avatar.fallback { position: relative; overflow: hidden; }
.chat-avatar.fallback .punk { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.header-avatar { padding: 0; border: none; background: none; cursor: pointer; display: flex; }
.chat-typing { display: flex; align-items: center; gap: 7px; padding: 2px 4px 6px; min-height: 20px; }
.typing-dots { display: inline-flex; gap: 3px; align-items: center; }
.typing-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--muted); animation: typing-bounce 1.2s infinite ease-in-out; }
.typing-dots i:nth-child(2) { animation-delay: .15s; }
.typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes typing-bounce { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.chat-members { flex: 0 0 auto; max-height: min(260px, 40vh); overflow-y: auto; border-bottom: 1px solid var(--line); }
.ava-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.ava-wrap.online::after {
  content: ''; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px;
  border-radius: 50%; background: #3fbf5f; box-shadow: 0 0 0 2px var(--paper);
}
.small.is-online { color: #3fbf5f; }
.online-count { color: #3fbf5f; }
.iconbtn.bell.on { color: var(--ink); }
.header-msgs { position: relative; padding: 4px; border: none; background: none; cursor: pointer; display: flex; color: var(--muted); }
.header-msgs:hover { color: var(--ink); }
.header-msgs .hm-ico { display: flex; transition: transform .15s ease; }
.header-msgs:hover .hm-ico { transform: scale(1.08); }
.header-msgs.unread { color: var(--ink); }
.header-msgs.unread::after {
  content: ''; position: absolute; top: 2px; right: 2px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--red);
  /* No entrance animation: render() rebuilds the whole DOM, so a pop here
     replayed on every repaint and read as the dot flashing. It either says
     someone is waiting or it doesn't. */
  box-shadow: 0 0 0 2px var(--bg);
}
.chat-avatar.header-ava { width: 30px; height: 30px; font-size: 11px; }
.npub-box { display: flex; align-items: center; gap: 8px; }
.copy-ico { flex-shrink: 0; background: none; border: none; padding: 2px; color: var(--muted); cursor: pointer; display: flex; }
.copy-ico:hover { color: var(--ink); }
.settings-nav { text-align: left; font-weight: 600; padding: 14px 16px; position: relative; }
.settings-nav::after { content: '›'; position: absolute; right: 16px; color: var(--faint); font-weight: 400; }
.avatar-menu-wrap { position: relative; display: inline-flex; }
.menu-backdrop { position: fixed; inset: 0; z-index: 40; }
.avatar-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 41; min-width: 170px; }
.chat-avatar.fallback.loading { background: var(--surface2); }

/* hats: a supporter hat perched above any avatar. The wrapper takes the
   avatar's place in the layout; the hat overflows upward, clicks fall
   through it. */
.hat-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.ava-hat { position: absolute; left: 50%; z-index: 1; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .28)); }
.ava-hat svg { display: block; width: 100%; height: auto; }
.hat-row { display: flex; gap: 12px; align-items: center; padding: 9px 2px; }
.hat-row + .hat-row { border-top: 1px solid var(--line); }
.hat-demo { position: relative; display: inline-flex; width: 34px; height: 34px; flex-shrink: 0; margin-top: 12px; }
.hat-demo-head { width: 100%; height: 100%; border-radius: 50%; background: var(--accent-soft); }
.hat-btn { white-space: nowrap; flex-shrink: 0; }
.hat-btn.wearing { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.hat-btn.confirm { border-color: var(--green); color: var(--green); }

/* a small centered confirm popup over a dimmed page */
.confirm-pop-backdrop {
  position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .45);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.confirm-pop { width: 100%; max-width: 340px; }

/* staging builds: an unmissable stamp across the header logo */
.brand.staging, .brand.beta { position: relative; }
.staging-badge, .beta-badge {
  position: absolute; left: 2px; bottom: -3px; z-index: 2; pointer-events: none;
  background: #f7931a; color: #fff; font-size: 9px; font-weight: 750;
  letter-spacing: .06em; text-transform: uppercase; line-height: 1;
  padding: 2px 6px; border-radius: 5px; transform: rotate(-6deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.staging-badge { background: #6d28d9; }
.wallet-row-btn { font-size: 19px; line-height: 1; padding: 8px 12px; }
.chat-avatar.header-ava.fallback { align-items: center; justify-content: center; display: flex; color: var(--muted); }

/* ============================ motion & polish ============================ */
/* Navigation animates (the renderer adds .anim-page only when the visible
   page changed); background repaints re-create the DOM silently. */
@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } }
.anim-page { animation: rise-in .32s cubic-bezier(.16, .84, .3, 1) both; }

@keyframes menu-pop { from { opacity: 0; transform: translateY(-6px) scale(.95); } }
.anim-menu { animation: menu-pop .2s cubic-bezier(.2, .9, .3, 1.35) both; transform-origin: top right; }

@keyframes unfold-in { from { opacity: 0; transform: translateY(-10px); } }
.anim-unfold { animation: unfold-in .28s cubic-bezier(.16, .84, .3, 1) both; }

@keyframes flash-green { 0% { color: var(--green); } 100% { color: inherit; } }
.amt-flash { animation: flash-green 1.2s ease-out; }

/* the success check pops and rings, once, when its page arrives */
@keyframes check-pop { 0% { transform: scale(.3); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
@keyframes check-ring { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 45%, transparent); } to { box-shadow: 0 0 0 30px transparent; } }
.anim-page .check-badge { animation: check-pop .55s cubic-bezier(.34, 1.56, .64, 1) both, check-ring 1.1s ease-out .25s both; }

/* micro-interactions */
button, .btn { transition: filter .12s, background .15s, border-color .15s, box-shadow .15s, transform .1s; }
.btn-primary:hover { filter: brightness(1.15); }
.tabs button, .seg button { transition: background .18s, color .18s, box-shadow .18s; }
.item { transition: background .15s; border-radius: 10px; }
.item:hover { background: var(--surface2); }
.clickable { transition: transform .15s ease; }
.chat-avatar.clickable:hover { transform: scale(1.07); }
.header-avatar .chat-avatar { transition: transform .15s ease; }
.header-avatar:hover .chat-avatar { transform: scale(1.08); }
input[type=text], input[type=password], input[type=number], textarea, select { transition: border-color .15s, box-shadow .15s; }
.settings-nav::after { transition: transform .18s ease, color .18s; }
.settings-nav:hover::after { transform: translateX(3px); color: var(--ink); }

/* atmosphere: a faint warm wash pooling at the top, plus film grain */
body {
  background-image: radial-gradient(900px 420px at 50% -160px, var(--wash), transparent 70%);
  background-attachment: fixed;
  /* our swipe-nav owns horizontal gestures; keep the browser's edge-back out */
  overscroll-behavior-x: none;
}
body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 2147483647;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  .anim-page, .anim-menu, .anim-unfold, .anim-tab-left, .anim-tab-right, .amt-flash, .check-badge { animation: none !important; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}
/* tab carousel: only the content pane moves, with a soft cross-fade */
@keyframes tab-in-left { from { opacity: .2; transform: translateX(26px); } }
@keyframes tab-in-right { from { opacity: .2; transform: translateX(-26px); } }
/* will-change promotes the sliding pane to its own compositor layer BEFORE
   the animation's first frame — without it, a slow re-render mid-slide let
   Chrome expose unpainted tiles (gray strips) at the viewport edges */
.anim-tab-left { animation: tab-in-left .26s cubic-bezier(.25, .8, .35, 1) both; will-change: transform, opacity; }
.anim-tab-right { animation: tab-in-right .26s cubic-bezier(.25, .8, .35, 1) both; will-change: transform, opacity; }

/* ---- onboarding wizard + tour ---- */
/* width:100%, not just max-width: with auto margins the flex item doesn't
   stretch, and the punks strip's intrinsic width (12 avatars, ~780px — a
   scroll container still reports its full content width) would size the
   column to the 420px cap even on narrower phones, overflowing the page. */
.onb { width: 100%; max-width: 420px; margin: 8vh auto 0; padding: 0 8px; }
.onb-title { margin: 0; font-size: 26px; letter-spacing: -0.02em; }
.onb-hero { margin-bottom: 8px; }
.onb-punks { display: flex; gap: 10px; overflow-x: auto; padding: 6px 2px; }
.onb-punk { width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; cursor: pointer; border: 3px solid transparent; transition: transform .15s, border-color .15s; }
.onb-punk:hover { transform: scale(1.08); }
.onb-punk.sel { border-color: var(--accent); transform: scale(1.08); }
.onb-avatar { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; align-self: center; box-shadow: var(--shadow); transition: opacity .15s; }
.onb-confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.onb-confetti i { position: absolute; top: -12px; width: 9px; height: 14px; opacity: .9; animation: confetti-fall 2.8s ease-in forwards; }
.onb-confetti i:nth-child(4n) { background: #f7931a; }
.onb-confetti i:nth-child(4n+1) { background: #ffd166; }
.onb-confetti i:nth-child(4n+2) { background: var(--green); }
.onb-confetti i:nth-child(4n+3) { background: #b84fe8; }
.onb-confetti i:nth-child(1) { left: 6%; animation-delay: 0s; } .onb-confetti i:nth-child(2) { left: 12%; animation-delay: .3s; }
.onb-confetti i:nth-child(3) { left: 19%; animation-delay: .1s; } .onb-confetti i:nth-child(4) { left: 26%; animation-delay: .5s; }
.onb-confetti i:nth-child(5) { left: 33%; animation-delay: .2s; } .onb-confetti i:nth-child(6) { left: 40%; animation-delay: .65s; }
.onb-confetti i:nth-child(7) { left: 47%; animation-delay: .05s; } .onb-confetti i:nth-child(8) { left: 54%; animation-delay: .4s; }
.onb-confetti i:nth-child(9) { left: 61%; animation-delay: .15s; } .onb-confetti i:nth-child(10) { left: 68%; animation-delay: .55s; }
.onb-confetti i:nth-child(11) { left: 75%; animation-delay: .25s; } .onb-confetti i:nth-child(12) { left: 82%; animation-delay: .7s; }
.onb-confetti i:nth-child(13) { left: 89%; animation-delay: .35s; } .onb-confetti i:nth-child(14) { left: 95%; animation-delay: .6s; }
.onb-confetti i:nth-child(15) { left: 15%; animation-delay: .8s; } .onb-confetti i:nth-child(16) { left: 45%; animation-delay: .9s; }
.onb-confetti i:nth-child(17) { left: 70%; animation-delay: 1s; } .onb-confetti i:nth-child(18) { left: 30%; animation-delay: 1.1s; }
@keyframes confetti-fall { 0% { transform: translateY(-10px) rotate(0); } 100% { transform: translateY(105vh) rotate(560deg); } }
@media (prefers-reduced-motion: reduce) { .onb-confetti i { animation: none; display: none; } }
.onb-check { width: 96px; height: 96px; font-size: 52px; align-self: center; margin: 6px 0; }
/* the nostr mark heading the sign-in steps: big, centered, gently afloat */
.onb-mark { align-self: center; margin-bottom: -4px; animation: mark-float 4.5s ease-in-out infinite; }
.onb-mark svg { width: 72px; height: 72px; filter: drop-shadow(0 8px 22px rgba(184, 79, 232, .35)); }
@keyframes mark-float { 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .onb-mark { animation: none; } }
.onb-addr { color: var(--muted); font-family: var(--mono); font-size: 13px; }
/* balance card: one account at a time, dots to flip */
.balance-face { min-height: 78px; }
/* amount input with an inline Max affordance */
.amt-field { position: relative; display: flex; flex: 1; min-width: 0; }
.amt-field input { width: 100%; padding-right: 52px; }
.amt-max {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  padding: 4px 8px; font-size: 12px; font-weight: 600; line-height: 1;
  border: 0; border-radius: 7px; background: var(--accent-soft); color: var(--muted); cursor: pointer;
}
.amt-max:hover { background: var(--surface2); color: var(--ink); }
/* recipient chip: large variant for pay/zap screens */
.zap-chip.lg { gap: 8px; padding: 4px 12px 4px 4px; font-weight: 600; }
.chat-avatar.chip-lg { width: 30px; height: 30px; font-size: 11px; flex-shrink: 0; }
/* the clickable way to change account (swiping only helps on touch) */
.balance-switch {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 6px 12px; font-size: 13px; font-weight: 600;
  color: var(--muted); background: var(--surface2);
  border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
}
.balance-switch:hover { color: var(--ink); border-color: var(--line-strong); }
.balance-switch svg { opacity: .75; }
/* Move-money row: the action labels are long ("Move to Spending"), so let the
   row wrap to two full-width lines rather than crushing the amount field. */
.balance-move .input-group { flex-wrap: wrap; }
.balance-move .amt-field { flex: 1 1 150px; }
.balance-move .input-group > button { flex: 1 1 150px; }
.chat-signer-off { padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface2); }
.chan-pick { width: auto; min-width: 0; padding: 6px 32px 6px 10px; font-size: 13px; font-weight: 600; border-radius: 9px; background-position: right 10px center; }
.or-split { display: flex; align-items: center; gap: 10px; color: var(--faint); font-size: 13px; }
.or-split::before, .or-split::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.paste-wrap { position: relative; display: block; }
.paste-wrap textarea { display: block; }
.paste-in {
  position: absolute; right: 10px; bottom: 12px; display: flex; align-items: center; gap: 6px;
  padding: 5px 9px; font-size: 12px; font-weight: 600; border-radius: 8px;
  color: var(--muted); background: var(--paper); border: 1px solid var(--line-strong);
}
.paste-in:hover { color: var(--ink); }
.paste-wrap.has-text .paste-in { display: none; }

/* Short screens (a small phone with its address bar showing) — buy back the
   vertical room the footer needs by tightening the frame, not the content. */
@media (max-height: 620px) {
  #app { padding-top: 12px; padding-bottom: 12px; }
  .card { padding: 16px; }
  .profile-banner { margin: -16px -16px 0; }
  .footer { padding-top: 14px; padding-bottom: 0; }
  .tabs { margin: 10px 0; }
}