/* css/uschat.css — one stylesheet, mobile first.

   Layout model: the page is exactly the viewport tall (dvh, so a phone's collapsing address bar
   doesn't leave a dead strip), the chat scrolls inside it, and the tab bar sits on the safe-area
   inset so it clears the home indicator. Everything else is cards in a scrolling column.
*/

:root{
  --bg:#101613;
  --panel:#18211d;
  --panel-2:#1e2a24;
  --ink:#e7efe9;
  --muted:#93a49a;
  --line:#26332c;
  --accent:#7ec8a0;        /* the family green: buttons, your own dot, the active tab */
  --accent-ink:#0d1512;
  --mine:#25453a;          /* your own chat bubbles */
  --up:#7ec8a0;            /* they owe you */
  --down:#e0a35c;          /* you owe them */
  --bad:#d97a63;
  --radius:14px;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.18);
}
:root[data-theme="light"]{
  --bg:#f3f6f3;
  --panel:#ffffff;
  --panel-2:#eef3ef;
  --ink:#17231d;
  --muted:#5f7267;
  --line:#dde5df;
  --accent:#2f7d5b;
  --accent-ink:#ffffff;
  --mine:#d6ecdf;
  --up:#2f7d5b;
  --down:#a5651c;
  --bad:#b04a33;
  --shadow:0 1px 2px rgba(20,40,30,.06), 0 8px 24px rgba(20,40,30,.07);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust:100%;
  overscroll-behavior-y:none;
}
button, input, select, textarea{ font:inherit; color:inherit; }
a{ color:var(--accent); }
.mono{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; }
.muted{ color:var(--muted); }
small.muted{ font-size:12px; }
.fine{ font-size:12px; color:var(--muted); line-height:1.5; margin:10px 0 0; }
.warn{ font-size:13px; color:var(--down); background:color-mix(in srgb, var(--down) 12%, transparent);
       padding:9px 11px; border-radius:10px; margin:10px 0 0; }
.live{ font-size:13px; color:var(--accent); margin:0 0 10px; }
.pill{ font-size:10px; letter-spacing:.06em; text-transform:uppercase; background:var(--panel-2);
       border:1px solid var(--line); color:var(--muted); padding:1px 6px; border-radius:99px; vertical-align:2px; }

/* ---------- shell ---------- */
.app{ display:none; flex-direction:column; height:100dvh; }
.app.on{ display:flex; }
.top{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:calc(env(safe-area-inset-top) + 10px) 16px 10px;
  border-bottom:1px solid var(--line); background:var(--panel);
}
.brand{ font-weight:700; letter-spacing:.01em; display:flex; align-items:center; gap:8px; }
.brand .mark{ font-size:20px; }
.top .right{ display:flex; align-items:center; gap:10px; }
.status{ font-size:12px; color:var(--muted); }
.status.bad{ color:var(--bad); }
.flag{ font-size:11px; color:var(--muted); }
.flag.on{ color:var(--accent); }

/* The sharing switch: one control, and its state is readable at a glance from across a room. */
.toggle{
  display:flex; align-items:center; gap:11px; width:100%; cursor:pointer; text-align:left;
  background:var(--panel-2); border:1px solid var(--line); border-radius:13px; padding:12px 14px;
}
.toggle .knob{
  flex:0 0 44px; height:26px; border-radius:99px; background:var(--line); position:relative;
  transition:background .15s;
}
.toggle .knob::after{
  content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background:var(--panel); transition:transform .15s;
}
.toggle.on{ border-color:var(--accent); }
.toggle.on .knob{ background:var(--accent); }
.toggle.on .knob::after{ transform:translateX(18px); }
.toggle .lbl{ font-weight:600; }
.pill.live{ color:var(--accent); border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); }
@media (prefers-reduced-motion:reduce){ .toggle .knob, .toggle .knob::after{ transition:none; } }

main{ flex:1; min-height:0; position:relative; }
.view{ display:none; position:absolute; inset:0; flex-direction:column; }
.view.on{ display:flex; }
.view.scroll{ overflow-y:auto; padding:14px 14px 22px; display:none; }
.view.scroll.on{ display:block; }

.tabs{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line); background:var(--panel);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabs button{
  position:relative; background:none; border:0; padding:9px 4px 8px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  font-size:11px; color:var(--muted);
}
.tabs button.on{ color:var(--accent); }
.tabs .ic{ font-size:19px; line-height:1; }
.tabs .dot:not(:empty){
  position:absolute; top:4px; right:calc(50% - 22px); min-width:17px; height:17px; padding:0 4px;
  background:var(--bad); color:#fff; border-radius:99px; font-size:10px; line-height:17px;
}

/* ---------- cards & controls ---------- */
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px; margin:0 0 14px; box-shadow:var(--shadow);
}
.card h2{ font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
          margin:0 0 12px; font-weight:600; }
.card.danger{ border-color:color-mix(in srgb, var(--bad) 35%, var(--line)); }
.card p{ margin:0 0 6px; }

.fld{ display:block; margin:0 0 10px; }
.fld span{ display:block; font-size:12px; color:var(--muted); margin-bottom:4px; }
.fld input, .fld select{
  width:100%; padding:11px 12px; border-radius:11px; border:1px solid var(--line);
  background:var(--panel-2); outline:none;
}
.fld input:focus, .fld select:focus{ border-color:var(--accent); }
.check{ display:flex; gap:9px; align-items:flex-start; margin:4px 0 12px; font-size:14px; }
.check input{ margin-top:3px; accent-color:var(--accent); }
.check small{ display:block; color:var(--muted); font-size:12px; }

button.primary, button.wide, .btns button, .rail, .mini{
  border:1px solid var(--line); background:var(--panel-2); color:var(--ink);
  border-radius:11px; padding:10px 14px; cursor:pointer;
}
button.primary{ background:var(--accent); color:var(--accent-ink); border-color:transparent; font-weight:600; }
button.ghost{ background:transparent; color:var(--muted); }
button.wide{ display:block; width:100%; margin-top:6px; }
button:disabled{ opacity:.55; }
.btns{ display:flex; flex-wrap:wrap; gap:8px; }
.seg{ display:flex; gap:0; margin:0 0 12px; border:1px solid var(--line); border-radius:11px; overflow:hidden; }
.seg button{ flex:1; border:0; background:var(--panel-2); padding:9px; cursor:pointer; color:var(--muted); }
.seg button.on{ background:var(--accent); color:var(--accent-ink); font-weight:600; }

.rows{ list-style:none; margin:0; padding:0; }
.rows li{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 0; border-top:1px solid var(--line);
}
.rows li:first-child{ border-top:0; }
.rows .amt{ font-weight:700; white-space:nowrap; }
.rows .amt.up{ color:var(--up); }
.rows .amt.down{ color:var(--down); }
.acts{ display:flex; gap:6px; flex-shrink:0; }
.mini{ padding:6px 10px; font-size:13px; text-decoration:none; }
.empty{ text-align:center; color:var(--muted); padding:36px 20px; line-height:1.7; }

.emoji{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px; }
.emoji button{ border:1px solid var(--line); background:var(--panel-2); border-radius:10px;
               font-size:19px; padding:5px 7px; cursor:pointer; }
.emoji button.on{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 22%, transparent); }

/* ---------- chat ---------- */
.chat{ flex:1; overflow-y:auto; padding:14px 12px 6px; display:flex; flex-direction:column; gap:3px; }
.day{ align-self:center; font-size:11px; color:var(--muted); background:var(--panel);
      border:1px solid var(--line); border-radius:99px; padding:3px 11px; margin:12px 0 8px; }
.bub{
  max-width:min(76%, 520px); align-self:flex-start; background:var(--panel);
  border:1px solid var(--line); border-radius:15px 15px 15px 5px; padding:7px 11px 5px; margin-top:5px;
}
.bub.mine{ align-self:flex-end; background:var(--mine); border-color:transparent; border-radius:15px 15px 5px 15px; }
.bub.pending{ opacity:.6; }
.bub .who{ font-size:11px; color:var(--accent); font-weight:600; margin-bottom:2px; }
.bub .txt{ white-space:pre-wrap; word-break:break-word; }
.bub .meta{ font-size:10px; color:var(--muted); text-align:right; margin-top:2px; }
.bub .del{ background:none; border:0; color:var(--muted); cursor:pointer; padding:0 2px; font-size:13px; }
.card-msg{
  align-self:center; display:flex; gap:10px; align-items:flex-start; max-width:min(88%, 560px);
  background:var(--panel-2); border:1px solid var(--line); border-radius:13px;
  padding:9px 12px; margin:6px 0; font-size:14px;
}
.card-msg .ic{ font-size:17px; }
.card-msg .meta{ font-size:11px; color:var(--muted); margin-top:3px; }

.composer{
  display:flex; gap:8px; align-items:flex-end; padding:9px 10px calc(env(safe-area-inset-bottom) + 9px);
  border-top:1px solid var(--line); background:var(--panel);
}
.composer textarea{
  flex:1; resize:none; max-height:140px; padding:10px 13px; border-radius:19px;
  border:1px solid var(--line); background:var(--panel-2); outline:none; line-height:1.4;
}
.composer textarea:focus{ border-color:var(--accent); }
.send{
  flex:0 0 42px; height:42px; border-radius:50%; border:0; cursor:pointer;
  background:var(--accent); color:var(--accent-ink); font-size:17px;
}

/* ---------- where ---------- */
.radar{ width:100%; display:block; margin:0 0 10px; }
.note{ margin:8px 0 0; }
.note summary{ font-size:12px; color:var(--accent); cursor:pointer; list-style:none; }
.note summary::-webkit-details-marker{ display:none; }
.note summary::before{ content:'ⓘ '; }
.note p{ font-size:12px; color:var(--muted); line-height:1.55; margin:7px 0 0; }

/* ---------- money ---------- */
.rails{ display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 10px; }
.rail{ display:flex; flex-direction:column; align-items:flex-start; gap:1px; text-align:left; }
.rail small{ color:var(--muted); font-size:11px; }
.qr{ display:block; margin:12px auto 0; border-radius:8px; }

/* ---------- invite ---------- */
.invite{
  font-size:12px; word-break:break-all; background:var(--panel-2); border:1px solid var(--line);
  border-radius:11px; padding:10px; margin:0 0 10px; color:var(--muted);
}

/* ---------- onboarding ---------- */
.onboard{ display:none; min-height:100dvh; padding:calc(env(safe-area-inset-top) + 8vh) 18px 40px;
          max-width:520px; margin:0 auto; }
.onboard.on{ display:block; }
.hero{ text-align:center; margin:0 0 26px; }
.hero .mark{ font-size:46px; }
.hero h1{ margin:6px 0 8px; font-size:30px; letter-spacing:-.01em; }
.hero p{ color:var(--muted); margin:0; }
.or{ text-align:center; color:var(--muted); font-size:12px; margin:14px 0; }

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom) + 78px); transform:translate(-50%, 14px);
  max-width:min(92vw, 460px); background:var(--panel); color:var(--ink);
  border:1px solid var(--line); border-radius:12px; padding:11px 15px; font-size:14px;
  box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:opacity .18s, transform .18s; z-index:50;
}
.toast.on{ opacity:1; transform:translate(-50%, 0); }

/* ---------- wider screens: the same app, given room ---------- */
@media (min-width:760px){
  .app{ max-width:820px; margin:0 auto; border-left:1px solid var(--line); border-right:1px solid var(--line); }
  .view.scroll{ padding:18px 18px 30px; }
  .tabs button{ flex-direction:row; gap:7px; font-size:13px; padding:12px; }
}
@media (prefers-reduced-motion:reduce){ .toast{ transition:none; } }