aboutsummaryrefslogtreecommitdiffstats
Commit message (Expand)AuthorAgeFilesLines
* routing failure messageAdam Soltys2024-10-0112-21/+49
* pass token to invoice layoutAdam Soltys2024-10-011-2/+3
* use username field for resetsAdam Soltys2024-10-011-1/+1
* fix generate redirectAdam Soltys2024-09-291-1/+1
* password resetAdam Soltys2024-09-282-1/+8
* disable account preloadAdam Soltys2024-09-272-31/+9
* tap links for accountsAdam Soltys2024-09-271-8/+30
* preloadingAdam Soltys2024-09-272-6/+6
* borderAdam Soltys2024-09-261-1/+1
* xlAdam Soltys2024-09-261-1/+1
* stylesAdam Soltys2024-09-262-5/+5
* wait a tickAdam Soltys2024-09-261-0/+1
* scan page layoutAdam Soltys2024-09-262-12/+26
* fix tip prompt issueAdam Soltys2024-09-261-1/+1
* dvhAdam Soltys2024-09-261-1/+1
* list stylesAdam Soltys2024-09-261-3/+3
* list dimensionsAdam Soltys2024-09-261-2/+2
* move list to bottom rightAdam Soltys2024-09-261-2/+2
* list scrollingAdam Soltys2024-09-261-5/+40
* sticky searchAdam Soltys2024-09-261-2/+2
* list heightAdam Soltys2024-09-261-2/+2
* map improvementsAdam Soltys2024-09-263-48/+80
* rates for tip pageAdam Soltys2024-09-252-0/+5
* mnemonic stylesAdam Soltys2024-09-252-14/+12
* revert xss screenAdam Soltys2024-09-254-23/+22
* prevent mnemonic wrappingAdam Soltys2024-09-252-4/+7
* reveal styleAdam Soltys2024-09-251-7/+4
* fix balance buttonAdam Soltys2024-09-252-2/+2
* clear mnemonic before redirectAdam Soltys2024-09-251-1/+3
* move nwc stringAdam Soltys2024-09-254-51/+51
* styles, hide followers and messagesAdam Soltys2024-09-257-77/+81
* prevent double submit on account creationAdam Soltys2024-09-2511-16/+33
* payments buttonAdam Soltys2024-09-253-5/+8
* invoice fixesAdam Soltys2024-09-2510-22/+143
* cleanup homepageAdam Soltys2024-09-252-23/+14
* fix ecash redirectAdam Soltys2024-09-241-1/+1
* post to server endpointAdam Soltys2024-09-242-1/+13
* spacingAdam Soltys2024-09-242-2/+2
* prod networkAdam Soltys2024-09-241-1/+1
* spacingAdam Soltys2024-09-242-18/+13
* stylesAdam Soltys2024-09-243-41/+43
* Merge branch 'self-custody'Adam Soltys2024-09-24141-3780/+2793
|\
| * translationsself-custodyAdam Soltys2024-09-249-54/+333
| * stylesAdam Soltys2024-09-249-46/+23
| * stylinAdam Soltys2024-09-2414-123/+90
| * fix signingAdam Soltys2024-09-2412-57/+113
| * account importAdam Soltys2024-09-2320-123/+218
| * qr pageAdam Soltys2024-09-204-19/+79
| * rename account_idAdam Soltys2024-09-2012-26/+26
| * import keyAdam Soltys2024-09-206-19/+23
generated by cgit v1.2.3 (git 2.51.0) at 2026-10-25 07:23:38 +0000
562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 
/* 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; }
}
generated by cgit v1.2.3 (git 2.51.0) at 2026-10-25 07:23:38 +0000