/* wallet-panel.css — R66 (rebuilt to scan ALL <style> blocks).
 * Extracted from public/index.html so the wallet panel renders
 * identically on /chat, /me and /explore. /chat keeps its inline
 * copy of these rules; the cascade ties.
 */

/* R68 fix: the `.wallet-key-modal` and `.wallet-panel` rules below
 * declare `display: flex` and `position: fixed` unconditionally —
 * which overrides the user-agent `[hidden] { display: none }` from
 * the HTML presentational-hints layer. On /chat the bug went
 * unnoticed; on /explore the export-private-key modal POPPED UP
 * empty on page load (user screenshot, R68). Force `display: none`
 * whenever the `hidden` attribute is set so the JS-controlled
 * `keyModal.hidden = true/false` toggle actually hides/shows. */
.wallet-panel[hidden],
.wallet-key-modal[hidden],
.wallet-picker[hidden] {
  display: none !important;
}

/* ===========================================================
   Wallet picker — modern web3-style modal. Replaces the old
   /login intermediate page. Shows a list of installed wallets
   with their brand colour + name; clicking one runs the SIWE
   flow inline and reloads to the authed view on success.
   =========================================================== */
.wallet-picker {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 90;
  background: rgba(10, 9, 8, 0.62);
  backdrop-filter: blur(6px);
  animation: wallet-picker-fade 200ms var(--ease-out-expo) forwards;
}

[data-theme="light"] .wallet-picker {
  background: rgba(26, 23, 20, 0.36);
}

.wallet-picker-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  /* R58 bug-3: was `var(--surface-1)` which is not defined in the
   * R54+ token scheme — fell back to transparent so the whole modal
   * read as "blurry text floating on the blurred backdrop". Now a
   * solid `--bg-paper` with a stronger border + a top-edge sheen to
   * keep the glass-look the user asked for without dropping
   * legibility. */
  background: var(--bg-paper);
  border: 1px solid var(--ink-line-strong);
  border-radius: 20px;
  padding: 28px 24px 18px;
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 color-mix(in oklab, var(--ink-primary) 8%, transparent);
  animation: wallet-picker-rise 280ms var(--ease-out-expo) forwards;
}

.wallet-picker-head { text-align: center; margin-bottom: 18px; }

.wallet-picker-head h3 {
  /* R58 bug-3: was 'EB Garamond' which isn't loaded anywhere — browser
   * silently fell back to Georgia, giving the heading a different
   * voice from the rest of the page. Use the design-system serif
   * token (Newsreader) for parity with /onboarding, /me, etc. */
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 500;
  margin: 0 0 8px;
  color: var(--ink-primary);
  letter-spacing: -0.012em;
}

.wallet-picker-sub {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-secondary);
  margin: 0;
  max-width: 32ch;
  margin-left: auto;
  margin-right: auto;
}

.wallet-picker-sub strong { color: var(--ink-primary); font-weight: 500; }

.wallet-picker-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 0;
  color: var(--ink-secondary);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
}

.wallet-picker-close:hover { background: var(--ink-line); color: var(--ink-primary); }

.wallet-picker-list { display: flex; flex-direction: column; gap: 8px; }

.wallet-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: 1px solid var(--ink-line);
  border-radius: 12px;
  color: var(--ink-primary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background 120ms, border-color 120ms, transform 120ms;
}

.wallet-row:hover {
  background: var(--ink-line);
  border-color: var(--ink-line-strong);
  transform: translateY(-1px);
}

.wallet-row:disabled, .wallet-row.is-loading {
  opacity: 0.5;
  cursor: progress;
  transform: none;
}

.wallet-row-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.wallet-row-icon.wallet-icon-metamask { background: #f6851b; color: #fff; }

.wallet-row-icon.wallet-icon-coinbase { background: #0052ff; color: #fff; }

.wallet-row-icon.wallet-icon-rabby   { background: #7084ff; color: #fff; }

.wallet-row-icon.wallet-icon-brave   { background: #fb542b; color: #fff; }

.wallet-row-icon.wallet-icon-generic { background: var(--ink-line-strong); color: var(--ink-primary); }

.wallet-row-icon.wallet-icon-none    { background: transparent; border: 1px dashed var(--ink-line-strong); color: var(--ink-secondary); }

.wallet-row-name { flex: 1; }

.wallet-row-hint {
  font-size: 11px;
  color: var(--ink-secondary);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.wallet-picker-status {
  font-size: 12px;
  color: var(--ink-secondary);
  text-align: center;
  margin-top: 14px;
  min-height: 18px;
}

.wallet-picker-status.is-error { color: #e07b6b; }

.wallet-picker-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--ink-line-strong);
  /* R58 bug-3: pre-R58 the foot used --ink-secondary at 12px which
   * was too faint against the card surface on light theme — the
   * "New to wallets? Get featured" link rendered as a ghost. Bump
   * to 13px, primary ink, link is jade. */
  font-size: 13px;
  color: var(--ink-secondary);
}

.wallet-picker-foot a {
  color: var(--jade);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--jade) 40%, transparent);
  text-underline-offset: 3px;
  font-weight: 500;
}

.wallet-picker-foot a:hover {
  color: var(--jade-soft);
  text-decoration-color: var(--jade-soft);
}

@keyframes wallet-picker-fade { from { opacity: 0; } to { opacity: 1; } }

@keyframes wallet-picker-rise {
  from { transform: translateY(12px) scale(0.98); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

/* When the user is browsing as a guest, HIDE the avatar and wallet
   pill entirely (they're meaningless without an account) and surface
   the dedicated Connect-wallet CTA in their place. The Passport tab
   is similarly account-only — hide it for guests so a fresh visitor
   sees only Chat / Explore on the marketing surface. */
body[data-guest="true"] .wallet-chip,
body[data-guest="true"] #avatarBtn,
body[data-guest="true"] .tab-passport { display: none !important; }

/* Wallet-picker modal also benefits from a punchier accent on the
   hover row in light mode — keeps the picker rows visible against
   the surface-1 cream tone. */
[data-theme="light"] .wallet-row {
  background: rgba(0, 0, 0, 0.015);
}

[data-theme="light"] .wallet-row:hover {
  background: rgba(27, 106, 93, 0.08);
  border-color: rgba(27, 106, 93, 0.35);
}

.wallet-chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;
  background:var(--bg-elevated);border:1px solid var(--ink-line-strong);border-radius:var(--r-pill);
  color:var(--ink-primary);font-family:var(--font-mono);font-size:12.5px;cursor:pointer;
  transition:border-color 160ms var(--ease-out-expo),transform 120ms var(--ease-out-expo);}

.wallet-chip:hover{border-color:var(--jade);}

.wallet-chip-dot{width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,var(--ochre),#7a5418);box-shadow:0 0 6px var(--ochre-glow);}

.wallet-chip-bal{font-weight:500;letter-spacing:.2px;}

.wallet-chip-unit{color:var(--ink-muted);font-size:10px;}

.wallet-chip-low{border-color:var(--vermilion);}

.wallet-chip-low .wallet-chip-dot{background:radial-gradient(circle at 30% 30%,var(--vermilion),#5e2018);}

.wallet-chip-pulse{transform:scale(1.08);border-color:var(--ochre);}

/* R51 frontend-LOW-5: `.wallet-chip-error` was set/unset by JS but
   never defined — chip stayed default-styled on /api/wallet errors,
   silently hiding the degradation signal from the user. Distinct
   amber/orange so it doesn't get confused with `.wallet-chip-low`
   (vermilion = low balance, different problem). */
.wallet-chip-error{border-color:var(--ochre);}

.wallet-chip-error .wallet-chip-dot{
  background:radial-gradient(circle at 30% 30%,var(--ochre),#7a5418);}

.wallet-flash{position:fixed;z-index:1200;transform:translateX(-50%);font-family:var(--font-mono);
  font-size:13px;font-weight:600;color:var(--ochre);pointer-events:none;
  animation:wallet-float-up 1s var(--ease-out-expo) forwards;}

@keyframes wallet-float-up{0%{opacity:0;transform:translate(-50%,4px);}20%{opacity:1;}
  100%{opacity:0;transform:translate(-50%,-26px);}}

/* R75 Living Ledger — the coin that arcs from the send button to the
   wallet chip on a confirmed on-chain micropayment. 14px jade disc
   with a soft top sheen + a tiny ochre core (the "value"). Positioned
   fixed at the start point; JS drives the arc via the Web Animations
   API. transform-origin center so the scale keyframes feel like it
   spins toward you and lands. */
.wallet-coin{
  position:fixed;z-index:1250;width:14px;height:14px;margin:-7px 0 0 -7px;
  border-radius:50%;pointer-events:none;
  background:
    radial-gradient(circle at 34% 30%, rgba(255,255,255,0.65), transparent 42%),
    radial-gradient(circle at 50% 60%, var(--ochre) 0 28%, transparent 32%),
    radial-gradient(circle at 50% 50%, var(--jade-soft), var(--jade) 70%);
  box-shadow:0 0 0 2px color-mix(in oklab, var(--jade) 40%, transparent),
    0 4px 12px rgba(0,0,0,0.45),
    0 0 14px 2px var(--jade-glow);
  transform:translate(0,0) scale(0.55);
}

/* R75 spend-tape: status dot on each ledger row. Amber pulse while the
   debit's on-chain leg is pending; steady jade once the tx hash lands
   (settled on Arc). Makes the pending → on-chain ✓ progression legible
   at a glance instead of only via the tiny "pending…" text. */
.wl-status{display:inline-block;width:7px;height:7px;border-radius:50%;
  margin-right:7px;flex-shrink:0;vertical-align:middle;}
.wl-status--settled{background:var(--jade-soft);
  box-shadow:0 0 6px var(--jade-glow);}
.wl-status--pending{background:var(--ochre);
  animation:wl-status-pulse 1.4s ease-in-out infinite;}
.wl-status--offchain{background:var(--ink-line-strong);}
@keyframes wl-status-pulse{0%,100%{opacity:0.35;}50%{opacity:1;}}

/* R87: the panel is a dropdown anchored UNDER the topbar pill's right
   cluster (where the balance chip that opens it lives) — was glued to
   the viewport corner at a height that overlapped the pill. Glass
   material + a top-right origin pop so it visibly grows out of the
   chip instead of teleporting in. */
.wallet-panel{position:fixed;top:78px;right:18px;z-index:1100;width:360px;
  max-width:calc(100vw - 28px);
  background:color-mix(in oklab, var(--bg-paper) 92%, transparent);
  backdrop-filter:blur(22px) saturate(1.25);
  -webkit-backdrop-filter:blur(22px) saturate(1.25);
  border:1px solid var(--ink-line-strong);
  border-radius:var(--r-lg);
  box-shadow:0 30px 80px -28px rgba(0,0,0,.7),
             0 1px 0 rgba(255,255,255,.05) inset;
  padding:18px;
  font-family:var(--font-sans);max-height:calc(100dvh - 96px);overflow-y:auto;
  transform-origin:top right;
  scrollbar-width:thin;
  scrollbar-color:color-mix(in oklab, var(--ink-muted) 35%, transparent) transparent;}
.wallet-panel::-webkit-scrollbar{width:6px;}
.wallet-panel::-webkit-scrollbar-track{background:transparent;}
.wallet-panel::-webkit-scrollbar-thumb{
  background:color-mix(in oklab, var(--ink-muted) 35%, transparent);
  border-radius:3px;}
.wallet-panel:not([hidden]){animation:wallet-pop 240ms var(--ease-out-expo);}
@keyframes wallet-pop{
  from{opacity:0;transform:translateY(-10px) scale(0.97);}
  to{opacity:1;transform:none;}}
@media (prefers-reduced-motion: reduce){
  .wallet-panel:not([hidden]){animation:none;}}

/* R47.5 UX: panel header now carries the custodial address as a
   green-bordered chip next to the "Wallet" title — replaces the
   separate `walletAddrRow` that used to live below the big balance
   number. User-requested layout match (screenshot reference). */
.wallet-panel-head{display:flex;justify-content:space-between;align-items:center;
  gap:10px;margin-bottom:12px;}

.wallet-panel-head-left{display:flex;align-items:center;gap:10px;min-width:0;flex:1;}

.wallet-panel-title{font-family:var(--font-serif);font-size:16px;color:var(--ink-primary);
  flex-shrink:0;}

.wallet-panel-close{background:none;border:none;color:var(--ink-muted);font-size:20px;
  cursor:pointer;line-height:1;padding:0 4px;flex-shrink:0;}

.wallet-panel-close:hover{color:var(--ink-primary);}

.wallet-bal-big{font-family:var(--font-mono);font-size:26px;color:var(--ink-primary);font-weight:500;}

.wallet-bal-unit{font-size:13px;color:var(--ink-muted);}

.wallet-bal-sub{font-size:12px;color:var(--ink-secondary);margin-top:2px;}

/* Custodial-address chip lives in the panel header. Click (or Enter
   / Space via the keydown handler in JS) to copy. R48 M3: shrinkable
   so a 320px panel still renders cleanly — flex-shrink:1 lets it
   collapse, overflow:hidden + text-overflow trims the truncated
   address even further if needed. */
.wallet-addr{font-family:var(--font-mono);font-size:11px;color:var(--jade-soft);cursor:pointer;
  border:1px solid color-mix(in oklab, var(--jade-soft) 35%, transparent);
  border-radius:var(--r-pill);padding:3px 9px;display:inline-flex;align-items:center;
  background:color-mix(in oklab, var(--jade-soft) 8%, transparent);
  letter-spacing:0.02em;line-height:1.2;
  min-width:0;flex-shrink:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:border-color .15s ease, background .15s ease;}

.wallet-addr:hover{border-color:var(--jade);
  background:color-mix(in oklab, var(--jade-soft) 14%, transparent);}

.wallet-addr:focus-visible{outline:2px solid var(--jade);outline-offset:2px;}

/* R46 UX: collapsed the two-row deposit UX (preset $1 + custom field)
   into a single always-custom amount input + Sync button side-by-side.
   The old "Deposit $1" button was an arbitrary preset that confused
   users into thinking they had to deposit exactly $1, and the second
   row repeated the same control. One row is cleaner and obvious. */
.wallet-actions{display:flex;gap:8px;margin-top:12px;}

.wallet-amt{flex:1;display:flex;align-items:center;gap:0;border:1px solid var(--ink-line-strong);
  border-radius:var(--r-md);background:var(--bg-elevated);height:36px;padding:0 0 0 12px;
  font-family:var(--font-mono);font-size:13px;color:var(--ink-primary);
  transition:border-color .15s ease;}

.wallet-amt:focus-within{border-color:var(--jade);}

.wallet-amt-sign{color:var(--ink-muted);font-weight:500;}

.wallet-amt input{flex:1;border:none;background:none;color:inherit;font:inherit;
  outline:none;padding:0 8px;width:100%;min-width:0;-moz-appearance:textfield;
  font-family:var(--font-mono);font-size:13px;}

.wallet-amt input::placeholder{color:var(--ink-muted);font-weight:400;}

.wallet-amt input::-webkit-outer-spin-button,
.wallet-amt input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}

.wallet-amt-send{background:var(--jade);border:none;color:#fff;min-width:74px;height:34px;
  cursor:pointer;font-size:13px;font-family:var(--font-sans);font-weight:500;padding:0 14px;
  display:inline-flex;align-items:center;justify-content:center;letter-spacing:0.02em;
  border-top-right-radius:calc(var(--r-md) - 1px);border-bottom-right-radius:calc(var(--r-md) - 1px);
  transition:background .15s ease;}

.wallet-amt-send:hover:not(:disabled){background:var(--jade-soft);}

.wallet-amt-send:disabled{opacity:.45;cursor:wait;}

.wallet-btn{height:36px;border-radius:var(--r-md);
  border:1px solid var(--ink-line-strong);background:var(--bg-elevated);color:var(--ink-primary);
  font-size:13px;cursor:pointer;text-decoration:none;font-family:var(--font-sans);
  padding:0 14px;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  transition:border-color .15s ease,color .15s ease;}

.wallet-btn:hover:not(:disabled){border-color:var(--ink-secondary);color:var(--ink-secondary);}

.wallet-btn:disabled{opacity:.55;cursor:wait;}
/* Icon-only Refresh — square, no text (declutters the narrow deposit row).
   R58: was --ink-secondary (near-invisible on the dark button) → read as an
   "empty" button. Brighter icon + a hover cue so it's clearly a button. */
.wallet-btn-icon{width:38px;min-width:38px;padding:0;gap:0;flex:none;color:var(--ink-primary);}
.wallet-btn-icon svg{width:17px;height:17px;}
.wallet-btn-icon:hover{color:var(--jade-soft);}

/* R47.5: .wallet-faucet-link CSS retired with the markup removal. */
.wallet-onchain-pill{display:flex;align-items:baseline;gap:8px;margin-top:14px;margin-bottom:8px;
  padding:8px 12px;border-radius:var(--r-md);
  background:linear-gradient(135deg,rgba(74,157,142,0.10),rgba(201,146,62,0.06));
  border:1px solid rgba(74,157,142,0.25);}

.wallet-onchain-count{font-family:var(--font-mono);font-size:18px;font-weight:600;
  color:var(--jade-soft);letter-spacing:-0.01em;}

.wallet-onchain-lbl{font-size:11px;color:var(--ink-secondary);letter-spacing:0.02em;}

.wallet-show-more{background:none;border:none;color:var(--ink-muted);font-size:11px;
  cursor:pointer;padding:6px 0 0;text-align:center;width:100%;
  font-family:var(--font-mono);letter-spacing:0.04em;text-transform:uppercase;}

.wallet-show-more:hover{color:var(--ink-secondary);}

/* R47.5: .wallet-details CSS retired — the settlement-batches
   dropdown was replaced by the on-chain pill above the ledger.
   The <ul id="walletSettlements"> still exists hidden in the
   markup as a placeholder for a future operator-mode reveal. */
.wallet-note{font-size:11px;color:var(--ink-muted);margin-top:8px;min-height:14px;line-height:1.4;}

/* Account section at the bottom of the wallet panel — withdraw,
 * export key, log out, delete account. Replaces the old separate
 * avatar dropdown. */
.wallet-account-section{margin-top:18px;padding-top:14px;border-top:1px solid var(--ink-line-strong);}

.wallet-account-addr{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-muted);margin-bottom:10px;}

.wallet-account-addr .wallet-account-addr-val{font-family:var(--font-mono);color:var(--ink-secondary);user-select:all;}

/* R46 UX: the bottom action list previously read like a multi-color
   garland — solid-jade "Withdraw" CTA, neutral export/logout rows, a
   vermilion-tinted "Delete" row. Made every row visually identical:
   ink-line border, neutral text, matching ink-secondary icon on the
   left, monospace aside on the right. The destructive intent of
   Delete is conveyed only through the icon glyph + aside ("erases"),
   not by re-tinting the whole row red. Hover still subtly hints the
   semantic — jade for benign actions, vermilion only on the delete-
   row hover state. */
.wallet-account-actions{display:flex;flex-direction:column;gap:4px;}

.wallet-action{width:100%;display:flex;align-items:center;justify-content:space-between;
  background:transparent;border:1px solid transparent;border-radius:var(--r-md);
  padding:10px 12px;color:var(--ink-primary);font-size:13.5px;cursor:pointer;
  font-family:var(--font-sans);text-align:left;
  transition:border-color .15s ease,background .15s ease,color .15s ease;}

.wallet-action:hover:not(:disabled){
  border-color:var(--ink-line-strong);background:var(--bg-elevated);}

.wallet-action:disabled{opacity:.55;cursor:wait;}

.wallet-action-label{display:inline-flex;align-items:center;gap:10px;}

/* Single unified icon style — all account-action icons share the
   same stroke color (ink-secondary) and stroke weight so the row
   reads as a list, not a Christmas tree. */
.wallet-action-icon{width:16px;height:16px;color:var(--ink-secondary);flex-shrink:0;
  transition:color .15s ease;}

.wallet-action:hover .wallet-action-icon{color:var(--ink-primary);}

.wallet-action .wallet-action-aside{font-size:11px;color:var(--ink-muted);font-family:var(--font-mono);
  letter-spacing:0.02em;}

/* Withdraw stays the primary CTA but as an outlined chip rather than
   a solid jade fill — keeps it discoverable without screaming at the
   user every time they open the panel. */
.wallet-action-primary{border-color:var(--ink-line-strong);}

.wallet-action-primary:hover:not(:disabled){border-color:var(--jade);
  background:color-mix(in oklab, var(--jade) 8%, transparent);}

.wallet-action-primary:hover:not(:disabled) .wallet-action-icon{color:var(--jade);}

.wallet-action-primary:hover:not(:disabled) .wallet-action-aside{color:var(--jade-soft);}

/* Delete uses ink color at rest; only the hover state reveals
   vermilion. The icon glyph (trash can) is the at-rest semantic cue. */
.wallet-action-danger:hover:not(:disabled){border-color:var(--vermilion);
  background:color-mix(in oklab, var(--vermilion) 6%, transparent);}

.wallet-action-danger:hover:not(:disabled),
.wallet-action-danger:hover:not(:disabled) .wallet-action-icon{color:var(--vermilion);}

.wallet-key-modal{position:fixed;inset:0;background:rgba(0,0,0,0.55);
  display:flex;align-items:center;justify-content:center;z-index:1500;padding:24px;}

.wallet-key-modal-card{background:var(--bg-paper);border:1px solid var(--ink-line-strong);
  border-radius:var(--r-lg);padding:22px 24px;width:100%;max-width:520px;
  font-family:var(--font-sans);}

.wallet-key-modal-card h3{font-family:var(--font-serif);font-size:20px;margin:0 0 8px;}

.wallet-key-modal-card .warn{color:var(--vermilion);font-size:13px;margin-bottom:12px;line-height:1.5;}

.wallet-key-modal-card .key-box{font-family:var(--font-mono);font-size:12px;background:var(--bg-deep);
  border:1px solid var(--ink-line);border-radius:var(--r-sm);padding:10px 12px;
  word-break:break-all;color:var(--ink-primary);user-select:all;margin-bottom:14px;}

.wallet-key-modal-card .addr-box{font-family:var(--font-mono);font-size:11px;color:var(--ink-muted);margin-bottom:14px;user-select:all;}

.wallet-key-modal-card .actions{display:flex;gap:8px;justify-content:flex-end;}

.wallet-section-label{font-size:10.5px;text-transform:uppercase;letter-spacing:1px;
  color:var(--ink-muted);margin:14px 0 6px;}

.wallet-list{list-style:none;margin:0;padding:0;}

.wallet-row{display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:5px 0;border-bottom:1px solid var(--ink-line);font-size:12.5px;}

.wallet-row:last-child{border-bottom:none;}

.wallet-empty{color:var(--ink-muted);font-size:12px;padding:5px 0;}

/* R79 #11 — cross-chain (CCTP) funding block. Hidden until config enables. */
.wallet-cctp{margin-top:10px;border-top:1px solid var(--ink-line);padding-top:10px;}
.wallet-cctp-toggle{display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;background:transparent;border:0;cursor:pointer;padding:4px 0;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-secondary);}
.wallet-cctp-toggle:hover{color:var(--ink-primary);}
.wallet-cctp-chev{transition:transform .3s var(--ease-out-expo);flex:none;}
.wallet-cctp.open .wallet-cctp-chev{transform:rotate(180deg);}
.wallet-cctp-body{margin-top:8px;display:flex;flex-direction:column;gap:8px;}
.wallet-cctp-row{display:flex;gap:8px;align-items:stretch;}
.wallet-cctp-select{flex:1 1 46%;min-width:0;background:var(--bg-elevated);
  color:var(--ink-primary);border:1px solid var(--ink-line);border-radius:var(--r-sm,8px);
  padding:8px 10px;font-family:var(--font-sans);font-size:13px;cursor:pointer;}
.wallet-cctp-amt{flex:1 1 54%;}
.wallet-cctp-send{width:100%;justify-content:center;}

/* R79 #9 — self-custody block. Reuses the cctp toggle/body/row/amt classes. */
.wallet-sc{margin-top:10px;border-top:1px solid var(--ink-line);padding-top:10px;}
.wallet-sc-explain{margin:2px 0 10px;font-size:12px;line-height:1.5;color:var(--ink-secondary);}
.wallet-sc-enable{width:100%;justify-content:center;}
.wallet-sc-stat{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  font-size:12.5px;color:var(--ink-secondary);padding:3px 0;}
.wallet-sc-stat strong{color:var(--ink-primary);font-variant-numeric:tabular-nums;font-weight:600;}
.wallet-sc-settle{width:100%;justify-content:center;margin-top:4px;
  background:var(--jade);color:var(--bg-paper);border-color:transparent;}
.wallet-sc-settle:hover{filter:brightness(1.06);}
.wallet-sc-disable{margin-top:6px;opacity:.7;font-size:10.5px;}
.wallet-sc-disable:hover{opacity:1;}