/* Live ring exchange UI (public/live.js). Prefixed .lv- to avoid clashing with
   exchange.css. Uses the app's theme tokens from style.css (--accent, --ok…). */
#liveMount{ margin:0 0 12px; padding:0 8px; }  /* match #listings inset so banner width == listing cards */
#liveMount[hidden]{ display:none; }

.lv-ic{ width:16px; height:16px; flex:0 0 auto; }
.lv-ic.acc{ color:var(--accent); }

.lv-card{
  border:1px solid var(--border);
  background:var(--card);
  border-radius:16px;
  padding:13px 13px 15px;
  color:var(--text);
  font-family:inherit;
}

/* live banner */
.lv-live{ border-color:rgba(74,222,128,.32); background:linear-gradient(180deg,rgba(74,222,128,.09),rgba(28,36,32,.5)); }
.lv-live.lv-hot{ border-color:rgba(255,138,31,.4); background:linear-gradient(180deg,rgba(255,138,31,.09),rgba(28,36,32,.5)); }
.lv-live-top{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:#d7ddd6; line-height:1.35; }
.lv-live-top b{ color:#fff; font-weight:700; }
.lv-gdot{ width:9px; height:9px; border-radius:50%; background:var(--ok); flex:0 0 auto; animation:lvpulse 1.9s infinite; }
.lv-gdot.lv-off{ background:var(--mute); animation:none; }
@keyframes lvpulse{ 0%{box-shadow:0 0 0 0 rgba(74,222,128,.5)} 70%{box-shadow:0 0 0 9px rgba(74,222,128,0)} 100%{box-shadow:0 0 0 0 rgba(74,222,128,0)} }
.lv-sub{ font-size:11px; color:var(--mute); text-align:center; margin-top:8px; }
.lv-np{ font-size:11px; color:var(--mute); text-align:center; margin-top:11px; padding-top:10px; border-top:1px solid rgba(255,255,255,.06); }
.lv-np b{ color:#c3ccc3; }

/* whole-row button (cold / anon idle state) — dark card with a soft orange
   glowing outline, all tappable */
.lv-rowbtn{
  position:relative;
  display:flex; align-items:center; gap:11px; width:100%;
  padding:12px 13px; border-radius:14px;
  border:1px solid rgba(255,138,31,.45); background:var(--card); color:var(--text);
  font-family:inherit; text-align:left; cursor:pointer;
  box-shadow:0 0 11px rgba(255,138,31,.18);
  animation:lvglow 2.8s ease-in-out infinite;
  transition:transform .06s, border-color .15s;
}
.lv-new{
  position:absolute; top:-8px; right:12px; z-index:2;
  background:linear-gradient(135deg,#ff4a2b 0%,#c2261b 100%);
  color:#fff; font-size:9px; font-weight:900; letter-spacing:.9px;
  padding:3px 7px; border-radius:5px; line-height:1;
  box-shadow:0 0 10px rgba(255,74,43,.45),0 1px 4px rgba(0,0,0,.45);
  pointer-events:none;
}
@keyframes lvglow{
  0%,100%{ box-shadow:0 0 8px rgba(255,138,31,.12);  border-color:rgba(255,138,31,.32); }
  50%{     box-shadow:0 0 17px rgba(255,138,31,.32); border-color:rgba(255,138,31,.62); }
}
.lv-rowbtn:hover{ border-color:rgba(255,138,31,.75); }
.lv-rowbtn:active{ transform:scale(.99); }
.lv-rb-ic{ display:grid; place-items:center; width:34px; height:34px; flex:0 0 auto;
  border-radius:10px; color:var(--accent); background:rgba(255,138,31,.1); border:1px solid rgba(255,138,31,.22); }
.lv-rb-ic .lv-ic{ width:19px; height:19px; }
.lv-rb-txt{ flex:1 1 auto; min-width:0; font-size:14px; font-weight:700; }
.lv-rb-arw{ flex:0 0 auto; color:var(--mute); display:grid; place-items:center; }
.lv-rb-arw .lv-ic{ width:18px; height:18px; }

/* searching */
.lv-orb-wrap{ display:flex; flex-direction:column; align-items:center; gap:11px; padding:8px 0 2px; }
.lv-orb{ width:60px; height:60px; border-radius:50%; display:grid; place-items:center; color:var(--accent); background:rgba(255,138,31,.08); border:1px solid rgba(255,138,31,.32); position:relative; }
.lv-orb .lv-ic{ width:26px; height:26px; animation:lvspin 3s linear infinite; }
@keyframes lvspin{ to{ transform:rotate(360deg) } }
.lv-orb::before,.lv-orb::after{ content:""; position:absolute; inset:-1px; border-radius:50%; border:1px solid rgba(255,138,31,.4); animation:lvripple 2.2s ease-out infinite; }
.lv-orb::after{ animation-delay:1.1s; }
@keyframes lvripple{ 0%{transform:scale(1);opacity:.55} 100%{transform:scale(1.85);opacity:0} }
.lv-search-h{ text-align:center; }
.lv-search-h .lv-t{ font-size:15px; font-weight:800; }
.lv-meta{ display:flex; justify-content:center; gap:18px; margin-top:12px; font-size:11.5px; color:var(--mute); }
.lv-meta span{ display:flex; align-items:center; gap:5px; }
.lv-meta .lv-ic{ width:13px; height:13px; }

/* buttons — the site's glass language (see nav.css chips): translucent fill +
   tinted border + glow + blur, NOT solid gradient fills. */
.lv-btn{ width:100%; border:0; border-radius:11px; padding:12px; font-size:14px; font-weight:800; font-family:inherit; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; }
.lv-btn .lv-ic{ width:15px; height:15px; }
.lv-primary{
  color:var(--accent2);
  background:rgba(255,138,31,.18);
  border:1px solid rgba(255,138,31,.6);
  box-shadow:0 0 16px rgba(255,138,31,.45), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter:blur(10px) saturate(1.2); -webkit-backdrop-filter:blur(10px) saturate(1.2);
}
.lv-primary:hover{ background:rgba(255,138,31,.26); }
.lv-ghost{ border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.04); color:var(--text); font-weight:600; margin-top:11px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(10px) saturate(1.1); -webkit-backdrop-filter:blur(10px) saturate(1.1); }
.lv-ghost:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.26); }
/* Small, non-full-width «Відмінити» under a locked ring */
.lv-dissolve{ width:fit-content; margin:11px auto 0; padding:7px 16px; font-size:12.5px; font-weight:600; }
.lv-danger{ background:rgba(212,96,79,.16); border:1px solid rgba(212,96,79,.5); color:#ff9a9a;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.lv-danger:hover{ background:rgba(212,96,79,.24); }
.lv-skip{ width:auto; padding:12px 15px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.16); color:var(--mute); font-weight:600; flex:0 0 auto;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07); }
.lv-skip:hover{ background:rgba(255,255,255,.1); }
.lv-live .lv-primary{ margin-top:11px; }
.lv-cta-row{ display:flex; gap:8px; }
.lv-cta-row .lv-primary{ margin-top:0; }

/* ring card */
.lv-ring{ border-color:rgba(255,138,31,.3); background:linear-gradient(180deg,rgba(255,138,31,.06),rgba(28,36,32,.92)); }
.lv-rc-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:4px; }
.lv-rc-head .lv-t{ font-size:14px; font-weight:800; display:flex; align-items:center; gap:7px; }
.lv-count{ font-family:ui-monospace,monospace; font-size:11px; font-weight:700; color:var(--accent); background:rgba(255,138,31,.11); border:1px solid rgba(255,138,31,.32); padding:2px 8px; border-radius:6px; font-variant-numeric:tabular-nums; }
.lv-pin{ font-size:10px; color:var(--mute); display:flex; align-items:center; gap:4px; text-transform:uppercase; letter-spacing:.04em; }
.lv-pin .lv-ic{ width:11px; height:11px; }
.lv-graph{ width:100%; height:auto; display:block; margin:4px 0; }
.lv-flow{ stroke-dasharray:5 7; animation:lvdash 1.15s linear infinite; }
@keyframes lvdash{ to{ stroke-dashoffset:-24 } }

.lv-cc{ font-family:ui-monospace,monospace; font-size:11.5px; padding:1px 5px; border-radius:5px; border:1px solid var(--border); background:rgba(255,255,255,.03); color:#c3ccc3; white-space:nowrap; }
.lv-cc.get{ color:var(--ok); border-color:rgba(74,222,128,.38); background:rgba(74,222,128,.07); }
.lv-cc.give{ color:var(--dup); border-color:rgba(96,165,250,.38); background:rgba(96,165,250,.07); }

.lv-you{ background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.06); border-radius:11px; padding:9px 11px; display:flex; flex-direction:column; gap:7px; margin-bottom:11px; }
.lv-you-row{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:#d0d7cf; flex-wrap:wrap; }
.lv-you-row .lv-lab{ font-family:ui-monospace,monospace; font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--mute); width:64px; }
.lv-you-row .lv-nm{ color:var(--mute); font-size:11px; }

.lv-roster{ display:flex; flex-direction:column; margin:4px 0 10px; }
.lv-mrow{ display:flex; align-items:center; gap:10px; padding:8px 2px; border-bottom:1px solid rgba(255,255,255,.06); }
.lv-mrow:last-child{ border-bottom:0; }
.lv-av{ width:28px; height:28px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; font-size:11px; font-weight:800; background:linear-gradient(135deg,#3a4740,#222b26); color:#cdd4cc; }
.lv-av.me{ background:linear-gradient(135deg,var(--accent2,#ffb347),var(--accent)); color:#1a0e00; }
.lv-mnm{ flex:1; font-size:12.5px; font-weight:600; }
.lv-st{ font-family:ui-monospace,monospace; font-size:9.5px; letter-spacing:.04em; text-transform:uppercase; display:inline-flex; align-items:center; gap:5px; font-weight:600; }
.lv-st .lv-ic{ width:12px; height:12px; }
.lv-st.ok{ color:var(--ok); } .lv-st.wait{ color:var(--accent); } .lv-st.no{ color:#f0603a; }

.lv-note{ font-size:11.5px; color:var(--mute); line-height:1.5; display:flex; align-items:center; gap:6px; justify-content:center; text-align:center; padding:4px 0; }
.lv-note .lv-ic{ width:13px; height:13px; }

.lv-swap{ background:rgba(240,96,58,.07); border:1px solid rgba(240,96,58,.3); border-radius:12px; padding:11px; display:flex; flex-direction:column; gap:9px; }
.lv-swap-h{ font-size:12px; color:#f0b9ab; display:flex; align-items:flex-start; gap:7px; line-height:1.4; }
.lv-swap-h .lv-ic{ width:14px; height:14px; color:#f0603a; margin-top:1px; }
.lv-swap-note{ font-size:10.5px; color:var(--ok); display:flex; align-items:center; gap:6px; justify-content:center; }
.lv-swap-note .lv-ic{ width:12px; height:12px; }

/* chat */
.lv-sys{ font-size:11px; line-height:1.5; color:var(--mute); background:rgba(255,138,31,.06); border:1px solid rgba(255,138,31,.28); padding:9px 11px; border-radius:11px; margin-bottom:10px; }
.lv-sys b{ color:#e8ece6; }
.lv-sys .lv-ic{ width:13px; height:13px; vertical-align:-2px; margin-right:4px; }
.lv-ledger{ display:flex; flex-direction:column; gap:5px; margin-top:8px; font-family:ui-monospace,monospace; }
.lv-lr{ font-size:11px; color:#c3ccc3; }
.lv-action{ background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.06); border-radius:11px; padding:10px; display:flex; flex-direction:column; gap:9px; margin-bottom:10px; }
.lv-ar-lab{ font-family:ui-monospace,monospace; font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--mute); }
.lv-chat{ max-height:280px; overflow-y:auto; display:flex; flex-direction:column; gap:7px; padding:2px; }
.lv-msg{ max-width:82%; padding:8px 12px; font-size:14px; line-height:1.45; border-radius:14px; white-space:pre-wrap; }
.lv-msg.them{ align-self:flex-start; background:var(--card); border:1px solid var(--border); border-bottom-left-radius:4px; }
.lv-msg.me{ align-self:flex-end; background:rgba(255,138,31,.14); border:1px solid rgba(255,138,31,.28); border-bottom-right-radius:4px; }
.lv-msg-nm{ display:block; font-family:ui-monospace,monospace; font-size:9px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); margin-bottom:3px; }
.lv-composer{ border-top:1px solid var(--border); padding-top:9px; margin-top:9px; display:flex; gap:9px; align-items:center; }
.lv-composer input{ flex:1; background:var(--card); border:1px solid var(--border); border-radius:999px; padding:9px 13px; color:var(--text); font-size:12.5px; font-family:inherit; outline:none; }
.lv-composer input:focus{ border-color:rgba(255,138,31,.4); }
.lv-send{ width:35px; height:35px; border-radius:50%; cursor:pointer; flex:0 0 auto; display:grid; place-items:center;
  color:var(--accent2); background:rgba(255,138,31,.18); border:1px solid rgba(255,138,31,.6);
  box-shadow:0 0 12px rgba(255,138,31,.35), inset 0 1px 0 rgba(255,255,255,.12); }
.lv-send:hover{ background:rgba(255,138,31,.26); }
.lv-send .lv-ic{ width:16px; height:16px; }

/* ── chat page (/chat, public/chat.js) ─────────────────────────── */
.cp-wrap{ max-width:560px; margin:0 auto; padding:12px 12px 20px; display:flex; flex-direction:column; gap:12px; }

/* Empty / placeholder state — frosted glass card (matches the site controls). */
.cp-empty{
  margin:7vh auto 0; max-width:400px; width:100%;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:13px;
  padding:30px 24px 26px; color:var(--mute);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:20px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 20px 44px -26px rgba(0,0,0,.65);
  backdrop-filter:blur(14px) saturate(1.1); -webkit-backdrop-filter:blur(14px) saturate(1.1);
}
.cp-empty-ic{
  width:62px; height:62px; display:grid; place-items:center; border-radius:50%;
  color:var(--accent); background:rgba(255,138,31,.1);
  border:1px solid rgba(255,138,31,.28); box-shadow:0 0 16px rgba(255,138,31,.15);
}
.cp-empty-ic .lv-ic{ width:28px; height:28px; }
.cp-empty-ic.pulse{ animation:cpGlow 2s ease-in-out infinite; }
@keyframes cpGlow{ 0%,100%{ box-shadow:0 0 13px rgba(255,138,31,.14) } 50%{ box-shadow:0 0 26px rgba(255,138,31,.42) } }
.cp-empty h2{ margin:0; font-size:18px; font-weight:800; color:var(--text); }
.cp-empty p{ margin:0; font-size:13px; max-width:34ch; line-height:1.55; }
.cp-empty .lv-btn{ margin-top:2px; }
@media(prefers-reduced-motion:reduce){ .cp-empty-ic.pulse{ animation:none } }
/* Sticky chat header: page scrolls with the window, so pin the peer/username bar
   to the top (opaque bg so messages scroll behind it, not through it). */
.cp-head{ position:sticky; top:var(--cp-head-top,56px); z-index:20; display:flex; align-items:center; gap:10px;
  padding:10px 2px; background:var(--bg);
  border-bottom:1px solid rgba(255,255,255,.07);
  box-shadow:0 6px 14px -10px rgba(0,0,0,.7); }
.cp-head .lv-av{ width:34px; height:34px; }
.cp-htext{ min-width:0; }
.cp-htext .t{ font-size:14px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cp-htext .s{ font-family:ui-monospace,monospace; font-size:10px; color:var(--mute); letter-spacing:.03em; }
.cp-back{ flex:0 0 auto; display:grid; place-items:center; width:32px; height:32px; border-radius:9px;
  border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04); color:var(--text); cursor:pointer; }
.cp-back:hover{ background:rgba(255,255,255,.09); }
.cp-back .lv-ic{ width:18px; height:18px; }
/* DM header quick actions (social + report) */
.cp-head > .cp-htext{ flex:1 1 auto; }
.cp-hacts{ margin-left:auto; display:flex; gap:6px; flex:0 0 auto; }
.cp-hact{ width:32px; height:32px; border-radius:9px; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04);
  cursor:pointer; text-decoration:none; font-size:13px; color:var(--mute); padding:0; font-family:inherit; }
.cp-hact:hover{ background:rgba(255,255,255,.09); }
.cp-hact img{ width:16px; height:16px; object-fit:contain; display:block; }
/* the ⚠ glyph sits below optical center — nudge it up */
.cp-hact.warn{ line-height:1; padding-bottom:3px; }
.cp-hact.warn:hover{ color:#ff9a6a; border-color:#5a2828; background:#2a1414; }

/* ring header = button → members list */
.cp-htbtn{ flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:10px;
  background:none; border:0; padding:0; font:inherit; color:inherit; text-align:left; cursor:pointer;
  border-radius:10px; }
.cp-htbtn:hover .cp-htext .t{ color:#fff; }
.cp-htbtn .cp-htext{ flex:1 1 auto; }
.cp-hchev{ flex:0 0 auto; color:var(--mute); display:grid; place-items:center; transform:rotate(90deg); }
.cp-hchev .lv-ic{ width:15px; height:15px; }

/* inbox loading skeleton (auth restore + first rooms fetch) */
.cp-skel{ display:flex; flex-direction:column; gap:6px; }
.cp-skel-row{ display:flex; align-items:center; gap:11px; padding:10px 11px;
  border-radius:13px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); }
.skc{ display:block; border-radius:6px;
  background:linear-gradient(90deg, rgba(255,255,255,.045) 25%, rgba(255,255,255,.10) 50%, rgba(255,255,255,.045) 75%);
  background-size:200% 100%; animation:cpShimmer 1.3s linear infinite; }
@keyframes cpShimmer{ to{ background-position:-200% 0 } }
.skc.av{ width:40px; height:40px; border-radius:50%; flex:0 0 auto; }
.skc-mid{ flex:1 1 auto; display:flex; flex-direction:column; gap:7px; }
.skc.l1{ width:45%; height:13px; }
.skc.l2{ width:70%; height:11px; }
/* ghost message bubbles (room open / history loading) */
.cp-mskel{ display:flex; flex-direction:column; gap:8px; padding-top:4px; }
.skb{ display:block; height:38px; border-radius:14px;
  background:linear-gradient(90deg, rgba(255,255,255,.045) 25%, rgba(255,255,255,.10) 50%, rgba(255,255,255,.045) 75%);
  background-size:200% 100%; animation:cpShimmer 1.3s linear infinite; }
.skb.them{ align-self:flex-start; border-bottom-left-radius:4px; }
.skb.me{ align-self:flex-end; border-bottom-right-radius:4px; }
.skb.short{ height:30px; }
@media(prefers-reduced-motion:reduce){ .skc,.skb{ animation:none } }

/* inbox (conversation list) */
.cp-inbox-head{ font-size:18px; font-weight:800; color:var(--text); padding:2px 2px 2px; }
.cp-hint{ font-size:13px; color:var(--mute); text-align:center; padding:24px; }
.cp-inbox{ display:flex; flex-direction:column; gap:6px; }
@keyframes cpRowIn{ from{ opacity:0; transform:translateY(5px) } to{ opacity:1; transform:none } }
.cp-row{ display:flex; align-items:center; gap:11px; width:100%; text-align:left; cursor:pointer;
  padding:10px 11px; border-radius:13px; font-family:inherit; color:var(--text);
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  transition:background .15s, border-color .15s;
  animation:cpRowIn .28s ease both; }
.cp-row:nth-child(2){ animation-delay:.04s } .cp-row:nth-child(3){ animation-delay:.08s }
.cp-row:nth-child(4){ animation-delay:.12s } .cp-row:nth-child(n+5){ animation-delay:.16s }
.cp-row:hover{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); }
.cp-row.unread{ background:rgba(255,138,31,.07); border-color:rgba(255,138,31,.28); }
.cp-row-mid{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.cp-row-t{ font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cp-row.unread .cp-row-t{ color:#fff; }
.cp-row-last{ font-size:12.5px; color:var(--mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cp-row.unread .cp-row-last{ color:#c9d1c6; }
.cp-row-end{ flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:5px; }
.cp-row-time{ font-size:10px; color:var(--mute); font-family:ui-monospace,monospace; white-space:nowrap; }
.cp-row-dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 6px rgba(255,138,31,.7); }
/* Inbox archive controls */
.cp-inbox-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.cp-arch-toggle{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600;
  color:var(--mute); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  border-radius:999px; padding:4px 11px; cursor:pointer; font-family:inherit;
  transition:color .15s, background .15s, border-color .15s; }
.cp-arch-toggle:hover{ color:var(--text); background:rgba(255,255,255,.09); }
.cp-arch-toggle .lv-ic{ width:14px; height:14px; }
.cp-rowwrap{ display:flex; align-items:stretch; gap:6px; animation:cpRowIn .28s ease both; }
.cp-rowwrap:nth-child(2){ animation-delay:.04s } .cp-rowwrap:nth-child(3){ animation-delay:.08s }
.cp-rowwrap:nth-child(4){ animation-delay:.12s } .cp-rowwrap:nth-child(n+5){ animation-delay:.16s }
.cp-inbox .cp-row{ flex:1 1 auto; min-width:0; animation:none; }
.cp-rowarch{ flex:0 0 auto; width:46px; display:grid; place-items:center; border-radius:13px; cursor:pointer;
  color:var(--mute); background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  transition:color .15s, background .15s, border-color .15s; }
.cp-rowarch:hover{ color:var(--text); background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); }
.cp-rowarch:active{ transform:scale(.94); }
.cp-rowarch .lv-ic{ width:19px; height:19px; }
.cp-av{ flex:0 0 auto; width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  font-size:15px; font-weight:800; color:var(--text);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06); }
.cp-av.big{ width:38px; height:38px; font-size:14px; }
.cp-av.ring{ color:#1a0e00; background:linear-gradient(135deg,var(--accent2,#ffb347),var(--accent)); border:0;
  box-shadow:0 0 12px rgba(255,138,31,.28); }
.cp-av.ring .lv-ic{ width:22px; height:22px; }
.cp-av.ring.big .lv-ic{ width:20px; height:20px; }

/* day separators + per-message timestamps inside bubbles */
.cp-day{ display:flex; align-items:center; gap:10px; margin:8px 0 2px; }
.cp-day::before,.cp-day::after{ content:""; flex:1; height:1px; background:rgba(255,255,255,.06); }
.cp-day span{ font-family:ui-monospace,monospace; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); white-space:nowrap; }
.cp-mtime{ display:inline-block; margin-left:8px; font-family:ui-monospace,monospace; font-size:9px; color:currentColor; opacity:.55; transform:translateY(1px); }
.lv-msg{ box-shadow:0 1px 5px -3px rgba(0,0,0,.55); }
.lv-msg.grp{ margin-top:-3px; }

/* message row: mini avatar + bubble (others only; own messages render bare) */
.cp-mrow{ display:flex; align-items:flex-end; gap:7px; align-self:flex-start; max-width:88%; }
.cp-mrow.grp{ margin-top:-3px; }
.cp-mrow .lv-msg{ max-width:100%; }
.cp-mrow .lv-msg.grp{ margin-top:0; }
.cp-av img, .cp-mav img{ width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
.cp-mav{ flex:0 0 auto; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  font-size:10px; font-weight:800; border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05); cursor:pointer; }
.cp-mav:not(.sp):hover{ box-shadow:0 0 0 2px rgba(255,138,31,.35); }
.cp-mav.sp{ visibility:hidden; border:0; box-shadow:none; cursor:default; }
.cp-avbtn{ background:none; border:0; padding:0; cursor:pointer; display:grid; font:inherit; }

/* ── profile modal (avatar tap) ─────────────────────────────────── */
.cp-pf-ovl{ position:fixed; inset:0; z-index:60; padding:20px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(8,10,7,.55);
  backdrop-filter:blur(8px) saturate(1.05); -webkit-backdrop-filter:blur(8px) saturate(1.05); }
.cp-pf{ position:relative; width:100%; max-width:340px;
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
  background:rgba(18,24,16,.85); border:1px solid rgba(255,255,255,.1); border-radius:20px;
  padding:26px 20px 20px;
  backdrop-filter:blur(24px) saturate(1.15); -webkit-backdrop-filter:blur(24px) saturate(1.15);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.7);
  animation:cpRowIn .22s ease both; }
.cp-pf-x{ position:absolute; top:10px; right:10px; width:28px; height:28px; border-radius:8px;
  border:0; background:rgba(255,255,255,.06); color:var(--mute); cursor:pointer; font-size:13px; line-height:1; }
.cp-pf-x:hover{ background:rgba(255,255,255,.12); color:var(--text); }
.cp-av.big.pf{ width:56px; height:56px; font-size:20px; }
.cp-pf-tag{ font-size:16px; font-weight:800; color:var(--text); }
.cp-pf-city{ font-family:ui-monospace,monospace; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--mute); margin-top:-6px; }
.cp-pf-cards{ width:100%; display:flex; flex-direction:column; gap:8px; margin:4px 0 2px;
  padding:10px; border:1px solid rgba(255,255,255,.08); border-radius:12px; background:rgba(255,255,255,.03); }
.cp-pf-row{ display:flex; align-items:flex-start; gap:8px; text-align:left; }
.cp-pf-row .cp-lbl{ flex:0 0 52px; padding-top:2px; }
.cp-pf-row > div{ display:flex; flex-wrap:wrap; gap:4px; }
.cp-pf .lv-btn{ width:100%; }
.cp-pf .lv-ghost{ margin-top:0; }
/* beta pill above the inbox → feedback modal */
.cp-beta{ display:flex; align-items:center; gap:9px; width:100%; margin-bottom:8px;
  padding:8px 11px; border-radius:999px; cursor:pointer; font-family:inherit; text-align:left;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.16); color:var(--mute);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(10px) saturate(1.1); -webkit-backdrop-filter:blur(10px) saturate(1.1); }
.cp-beta:hover{ background:rgba(255,255,255,.08); color:var(--text); }
.cp-beta-b{ flex:0 0 auto; font-family:ui-monospace,monospace; font-size:9px; font-weight:800; letter-spacing:.1em;
  color:var(--accent2); background:rgba(255,138,31,.18); border:1px solid rgba(255,138,31,.6);
  border-radius:5px; padding:2px 6px; }
.cp-beta-t{ flex:1 1 auto; min-width:0; font-size:11.5px; line-height:1.35; }

/* push row above the inbox */
.cp-pushrow{ display:flex; align-items:center; gap:10px; padding:10px 11px; margin-bottom:8px;
  border:1px solid rgba(255,138,31,.28); border-radius:13px; background:rgba(255,138,31,.06); }
.cp-push-ic{ flex:0 0 auto; display:grid; place-items:center; color:var(--accent); }
.cp-push-ic .lv-ic{ width:17px; height:17px; }
.cp-pushrow-t{ flex:1 1 auto; min-width:0; font-size:12px; color:#d7ddd6; line-height:1.4; }
.cp-pushrow-h{ font-size:10.5px; color:var(--mute); margin-top:3px; }
.cp-pushrow .cp-btn-sm{ flex:0 0 auto; white-space:nowrap; }
.cp-pushrow-x{ flex:0 0 auto; background:none; border:0; color:var(--mute); cursor:pointer; font-size:12px; padding:4px; line-height:1; }
.cp-pushrow-x:hover{ color:var(--text); }

/* iOS install-steps modal */
.cp-pwa-lead{ margin:0; font-size:12.5px; color:var(--mute); line-height:1.5; }
.cp-pwa-steps{ list-style:none; margin:2px 0 4px; padding:0; display:flex; flex-direction:column; gap:11px; width:100%; text-align:left; }
.cp-pwa-steps li{ display:flex; align-items:flex-start; gap:10px; font-size:13px; line-height:1.45; color:var(--text); }
.cp-pwa-steps li .lv-ic{ width:14px; height:14px; vertical-align:-2px; }
.cp-pwa-n{ flex:none; width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  font-size:11px; font-weight:800; color:var(--accent2); background:rgba(255,138,31,.18); border:1px solid rgba(255,138,31,.6); }
.cp-pwa-steps b{ color:var(--accent2); font-weight:600; }

/* DM trade context — pinned above messages */
.cp-trade{ display:flex; flex-direction:column; gap:8px; padding:10px 11px;
  border:1px solid rgba(255,255,255,.08); border-radius:12px; background:rgba(255,255,255,.03); }
.cp-trade-row{ display:flex; gap:8px; align-items:flex-start; }
.cp-trade-row .cp-lbl{ flex:0 0 64px; padding-top:2px; }
.cp-trade-row > div{ display:flex; flex-wrap:wrap; gap:4px; }

/* members list modal (ring header tap) */
.cp-roster-list{ width:100%; display:flex; flex-direction:column; gap:6px; margin-top:4px; }
.cp-roster-list .cp-hchev{ transform:none; }
.cp-row.me{ cursor:default; }
.cp-row.me:hover{ background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.08); }

/* social button — same glass, brand-tinted (tg blue / ig pink / threads white) */
.cp-soc img{ width:16px; height:16px; object-fit:contain; }
.cp-soc.tg{ color:#57c0ef; background:rgba(34,158,217,.15); border:1px solid rgba(34,158,217,.55);
  box-shadow:0 0 14px rgba(34,158,217,.35), inset 0 1px 0 rgba(255,255,255,.1);
  backdrop-filter:blur(10px) saturate(1.2); -webkit-backdrop-filter:blur(10px) saturate(1.2); }
.cp-soc.tg:hover{ background:rgba(34,158,217,.24); }
.cp-soc.ig{ color:#ff7fae; background:rgba(225,48,108,.14); border:1px solid rgba(225,48,108,.5);
  box-shadow:0 0 14px rgba(225,48,108,.33), inset 0 1px 0 rgba(255,255,255,.1);
  backdrop-filter:blur(10px) saturate(1.2); -webkit-backdrop-filter:blur(10px) saturate(1.2); }
.cp-soc.ig:hover{ background:rgba(225,48,108,.22); }
.cp-soc.th{ color:#e8ece6; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.3);
  box-shadow:0 0 12px rgba(255,255,255,.15), inset 0 1px 0 rgba(255,255,255,.1);
  backdrop-filter:blur(10px) saturate(1.1); -webkit-backdrop-filter:blur(10px) saturate(1.1); }
.cp-soc.th:hover{ background:rgba(255,255,255,.13); }

.cp-pf-rep{ width:100%; display:flex; flex-direction:column; gap:8px; }
.cp-pf .cp-agree{ justify-content:center; }

/* photo attachments (reports + feedback) */
.cp-rp-row{ display:flex; flex-wrap:wrap; gap:7px; width:100%; }
.cp-rp-row:empty{ display:none; }
.cp-rp-th{ position:relative; width:52px; height:52px; border-radius:9px; overflow:hidden;
  border:1px solid rgba(255,255,255,.14); flex:0 0 auto; }
.cp-rp-th img{ width:100%; height:100%; object-fit:cover; display:block; }
.cp-rp-th button{ position:absolute; top:2px; right:2px; width:16px; height:16px; border-radius:50%;
  border:0; background:rgba(0,0,0,.68); color:#fff; font-size:9px; line-height:1; cursor:pointer;
  display:grid; place-items:center; padding:0; }
.cp-rp-add{ width:52px; height:52px; border-radius:9px; cursor:pointer; flex:0 0 auto;
  display:grid; place-items:center; color:var(--mute);
  background:rgba(255,255,255,.04); border:1px dashed rgba(255,255,255,.25); }
.cp-rp-add:hover{ color:var(--text); background:rgba(255,255,255,.08); }
.cp-rp-add .lv-ic{ width:18px; height:18px; }
/* The board's report modal lives in .modal-box, whose global `button` rule
   (solid accent, flex:1, min-width:100px) would repaint both the add button
   and the thumb ✕ — pin them back to the chat-modal look. */
.modal-box .cp-rp-add{ flex:0 0 auto; width:52px; height:52px; min-width:0; padding:0;
  background:rgba(255,255,255,.04); color:var(--mute); border:1px dashed rgba(255,255,255,.25); border-radius:9px; }
.modal-box .cp-rp-add:hover{ color:var(--text); background:rgba(255,255,255,.08); }
.modal-box .cp-rp-th button{ flex:none; width:16px; height:16px; min-width:0; padding:0;
  border-radius:50%; border:0; background:rgba(0,0,0,.68); color:#fff; font-size:9px; font-weight:400; }
.cp-pf-rep textarea{ width:100%; min-height:70px; resize:vertical;
  background:var(--card); border:1px solid var(--border); border-radius:10px;
  padding:9px 11px; color:var(--text); font-size:13px; font-family:inherit; outline:none; }
.cp-pf-rep textarea:focus{ border-color:rgba(255,138,31,.4); }
.cp-pf-ok{ font-size:12.5px; color:var(--ok); display:flex; align-items:center; gap:6px; }
.cp-pf-ok .lv-ic{ width:14px; height:14px; }
.lv-msg.them.grp{ border-top-left-radius:8px; }
.lv-msg.me.grp{ border-top-right-radius:8px; }

/* scheduler */
.cp-sched{ border:1px solid rgba(255,138,31,.28); background:linear-gradient(180deg,rgba(255,138,31,.06),rgba(28,36,32,.55)); border-radius:14px; padding:12px; display:flex; flex-direction:column; gap:10px; }
.cp-sched.locked{ border-color:rgba(74,222,128,.4); background:linear-gradient(180deg,rgba(74,222,128,.09),rgba(28,36,32,.55)); }
.cp-sched-h{ font-family:ui-monospace,monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); display:flex; align-items:center; gap:6px; }
.cp-sched-h .lv-ic{ width:13px; height:13px; color:var(--accent); }
.cp-fixed{ display:flex; align-items:flex-start; gap:9px; }
.cp-fixed .lv-ic{ width:18px; height:18px; color:var(--ok); margin-top:1px; }
.cp-fixed .a{ font-size:14px; font-weight:700; color:var(--text); line-height:1.35; }
.cp-fixed .tm{ font-family:ui-monospace,monospace; color:var(--accent); }
.cp-prop{ font-size:13px; color:#d0d7cf; line-height:1.4; }
.cp-prop b{ color:#fff; }
.cp-agree{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cp-agree .n{ font-family:ui-monospace,monospace; font-size:11px; color:var(--mute); }
.cp-btn-sm{ border:0; border-radius:9px; padding:8px 12px; font-size:12.5px; font-weight:700; font-family:inherit; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.cp-btn-sm.pri{ color:var(--accent2); background:rgba(255,138,31,.18); border:1px solid rgba(255,138,31,.6);
  box-shadow:0 0 12px rgba(255,138,31,.35), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter:blur(10px) saturate(1.2); -webkit-backdrop-filter:blur(10px) saturate(1.2); }
.cp-btn-sm.pri:hover{ background:rgba(255,138,31,.26); }
.cp-btn-sm.ok{ color:var(--ok); background:rgba(74,222,128,.12); border:1px solid rgba(74,222,128,.35); }
.cp-btn-sm.ghost{ color:var(--mute); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07); }
.cp-btn-sm.ghost:hover{ background:rgba(255,255,255,.1); }
.cp-time{ display:flex; flex-wrap:wrap; gap:6px; }
.cp-tchip{ font-family:ui-monospace,monospace; font-size:12px; padding:6px 11px; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,.03); color:#c3ccc3; cursor:pointer; }
.cp-tchip.sel{ color:var(--accent2); background:rgba(255,138,31,.18); border-color:rgba(255,138,31,.6); font-weight:700;
  box-shadow:0 0 12px rgba(255,138,31,.35), inset 0 1px 0 rgba(255,255,255,.12); }
.cp-store-search{ width:100%; background:var(--card); border:1px solid var(--border); border-radius:9px; padding:9px 11px; color:var(--text); font-size:13px; font-family:inherit; outline:none; }
.cp-store-search:focus{ border-color:rgba(255,138,31,.4); }
.cp-store-list{ max-height:170px; overflow-y:auto; display:flex; flex-direction:column; border:1px solid var(--border); border-radius:9px; }
.cp-store-item{ text-align:left; background:none; border:0; border-bottom:1px solid rgba(255,255,255,.05); color:var(--text); padding:9px 11px; font-size:12.5px; font-family:inherit; cursor:pointer; }
.cp-store-item:last-child{ border-bottom:0; }
.cp-store-item:hover,.cp-store-item.sel{ background:rgba(255,138,31,.1); }
.cp-store-item .wt{ display:block; font-size:10px; color:var(--mute); margin-top:2px; }
.cp-lbl{ font-size:11px; color:var(--mute); }

/* extra bottom padding = clearance for the fixed composer */
.cp-msgs{ display:flex; flex-direction:column; gap:7px; padding:4px 2px 64px; min-height:120px; }
/* Composer row is FIXED just above the bottom app-bar: [🤝] + glass pill.
   Same width as .cp-wrap (560 − 2×12 padding). z-index below the bar (40). */
.cp-comprow{ position:fixed; z-index:35;
  left:12px; right:12px; margin:0 auto; max-width:536px;
  bottom:calc(var(--navh,56px) + var(--safe-bot,0px) + 24px);
  display:flex; gap:8px; align-items:center; }
.cp-composer{ flex:1; min-width:0;
  background:rgba(12,16,11,.72); border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(14px) saturate(1.1); -webkit-backdrop-filter:blur(14px) saturate(1.1);
  box-shadow:0 10px 26px -14px rgba(0,0,0,.7);
  border-radius:999px; padding:5px 5px 5px 14px; display:flex; gap:8px; align-items:center;
  transition:border-color .15s; }
.cp-composer:focus-within{ border-color:rgba(255,138,31,.45); }
.cp-composer input{ flex:1; background:none; border:0; color:var(--text); font-size:14px; font-family:inherit; outline:none; }
.cp-composer input::placeholder{ color:#5f6b62; }
.cp-composer .lv-send{ width:36px; height:36px; }
.cp-composer .lv-send:hover{ filter:brightness(1.08); }
.cp-swapbtn{ flex:0 0 auto; width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  padding:0; color:#c8cfc8;
  background:rgba(12,16,11,.72); border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(14px) saturate(1.1); -webkit-backdrop-filter:blur(14px) saturate(1.1);
  box-shadow:0 10px 26px -14px rgba(0,0,0,.7); cursor:pointer;
  transition:border-color .15s, color .15s, transform .12s; }
.cp-swapbtn:hover{ border-color:rgba(255,138,31,.4); color:var(--accent); }
.cp-swapbtn:active{ transform:scale(.93); }
.cp-swapbtn .lv-ic{ width:21px; height:21px; }
.cp-swapbox{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px; padding:10px 12px;
  border:1px solid rgba(255,138,31,.28); background:rgba(255,138,31,.07); border-radius:12px; font-size:13px; line-height:1.4; }
.cp-swapbox > .lv-ic{ width:15px; height:15px; flex:0 0 auto; color:var(--accent); }
.cp-swapbox span{ flex:1; min-width:0; }
.cp-swapbox.done{ border-color:rgba(74,222,128,.3); background:rgba(74,222,128,.07); }
.cp-swapbox.done > .lv-ic{ color:#4ade80; }
.cp-swapbox .cp-agree{ width:100%; display:flex; gap:8px; }
/* Slide-to-confirm — sunken glass groove + juicy knob with a periodic nudge */
.cp-slide{ position:relative; width:100%; height:48px; border-radius:24px; overflow:hidden;
  background:rgba(0,0,0,.28); border:1px solid rgba(255,138,31,.22);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.04);
  touch-action:none; user-select:none; -webkit-user-select:none; display:flex; align-items:center; }
.cp-slide-fill{ position:absolute; left:0; top:0; bottom:0; width:0; border-radius:24px;
  background:linear-gradient(90deg, rgba(255,138,31,.05), rgba(255,138,31,.32));
  box-shadow:0 0 18px rgba(255,138,31,.28); }
.cp-slide-txt{ position:absolute; left:0; right:0; text-align:center; pointer-events:none;
  font-family:ui-monospace,Menlo,monospace; font-size:10.5px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  background:linear-gradient(90deg,#77837a 42%,#e9eee8 50%,#77837a 58%); background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent; animation:cpShimmer 2.6s linear infinite; }
@keyframes cpShimmer{ from{ background-position:190% 0 } to{ background-position:-90% 0 } }
.cp-slide-knob{ position:relative; z-index:2; width:40px; height:40px; margin-left:4px; flex:0 0 auto;
  border-radius:50%; display:grid; place-items:center; touch-action:none; color:#1a0e00; cursor:grab;
  will-change:transform;
  background:linear-gradient(150deg,#ffc46b 0%,#ff8a1f 55%,#f07300 100%);
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 3px 14px -3px rgba(255,138,31,.75), inset 0 1px 2px rgba(255,255,255,.5), inset 0 -2px 4px rgba(140,60,0,.35); }
/* Nudge hint lives on the ICON, not the knob — grabbing mid-nudge can't jump. */
.cp-slide-knob .lv-ic{ animation:cpNudge 2.6s ease-in-out infinite; }
@keyframes cpNudge{ 0%,72%,100%{ transform:translateX(0) } 80%{ transform:translateX(4px) } 88%{ transform:translateX(0) } }
.cp-slide.drag .cp-slide-knob .lv-ic, .cp-slide.ok .cp-slide-knob .lv-ic{ animation:none; }
.cp-slide.drag .cp-slide-knob{ cursor:grabbing; transition:none;
  box-shadow:0 5px 20px -4px rgba(255,138,31,.9), inset 0 1px 2px rgba(255,255,255,.5), inset 0 -2px 4px rgba(140,60,0,.35); }
.cp-slide.arm .cp-slide-knob{
  box-shadow:0 0 24px -2px rgba(255,138,31,.95), inset 0 1px 2px rgba(255,255,255,.55), inset 0 -2px 4px rgba(140,60,0,.35); }
.cp-slide:not(.drag) .cp-slide-knob{ transition:transform .3s cubic-bezier(.22,1,.36,1); }
.cp-slide.drag .cp-slide-fill{ transition:none; }
.cp-slide:not(.drag) .cp-slide-fill{ transition:width .3s cubic-bezier(.22,1,.36,1); }
.cp-slide.ok{ border-color:rgba(74,222,128,.5); }
.cp-slide.ok .cp-slide-knob{ background:linear-gradient(150deg,#a5ecad 0%,#4ade80 60%,#2fb960 100%);
  box-shadow:0 3px 14px -3px rgba(74,222,128,.65), inset 0 1px 2px rgba(255,255,255,.5), inset 0 -2px 4px rgba(10,90,40,.4); }
.cp-slide-knob .lv-ic{ width:17px; height:17px; }
.cp-banned-tag{ display:inline-block; margin-left:7px; padding:1px 7px; border-radius:7px; vertical-align:2px;
  font-size:9.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:#ff8a7a; background:rgba(255,80,60,.12); border:1px solid rgba(255,80,60,.35); }
.cp-pf-banned{ margin-top:6px; padding:6px 12px; border-radius:9px; font-size:12px; font-weight:700;
  color:#ff8a7a; background:rgba(255,80,60,.1); border:1px solid rgba(255,80,60,.3); }
.cp-composer.cp-locked{ justify-content:center; color:var(--mute); font-size:12.5px; padding:12px 14px; user-select:none; }
.cp-swapno{ width:100%; background:none; border:0; color:var(--mute); font-size:11.5px; cursor:pointer; padding:2px; font-family:inherit; }
.cp-swapno:hover{ color:#c8cfc8; }
@media(prefers-reduced-motion:reduce){
  .cp-slide-txt{ animation:none; background:none; color:#93a096; }
  .cp-slide-knob .lv-ic{ animation:none; }
}

@media(prefers-reduced-motion:reduce){ .lv-flow,.lv-gdot,.lv-orb .lv-ic,.lv-orb::before,.lv-orb::after,.lv-rowbtn,.cp-row,.cp-rowwrap{ animation:none } }