/* ===========================================================================
   BLEND — phone-first app. Design system ported from the CF Volunteer Hub
   ("elevated & warm"), re-skinned: deep navy + gold identity.
   Montserrat (display) + Mulish (body).
   =========================================================================== */

:root {
  /* brand — change these six lines to re-skin the whole app */
  --brand:#2B5D8C; --brand-dark:#234E77; --brand-deep:#1B3D5E; --brand-bright:#5FA8D8;
  --brand-tint:#E8F1F8; --brand-tint-2:#F3F8FC;
  --sun:#D9A441; --sun-deep:#7A5410;               /* warm gold accent (leaders); deep tone darkened for small-text contrast */
  /* ink + surfaces */
  /* --ink-soft darkened 2026-08-04: the old #8595A6 measured ~2.7-3.1:1 on
     the app's light surfaces — below the 4.5:1 readability floor */
  --ink:#14212E; --ink-2:#46586A; --ink-soft:#5B6B7C; --on-brand:#EAF2FA;
  --bg:#EEF2F6; --card:#FFFFFF; --card-2:#F5F8FB; --line:#E2E9F0; --line-2:#ECF1F6;
  /* state */
  --good:#15803D; --good-bg:#E7F6EE; --good-line:#C4E7D2;
  --warn:#B4552A; --warn-bg:#FBEDE3; --quiet-bg:#FFF6E8; --quiet-ink:#8A5A12; --quiet-line:#F3E1BE;
  --bad:#C2334D;
  /* type */
  --display:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --body:"Mulish",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  /* radius + shadow */
  --r-sm:12px; --r:16px; --r-lg:20px; --r-xl:26px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(15,33,53,.05), 0 2px 6px rgba(15,33,53,.05);
  --sh-2:0 2px 6px rgba(15,33,53,.06), 0 10px 24px rgba(15,33,53,.08);
  --sh-3:0 8px 20px rgba(15,33,53,.10), 0 20px 44px rgba(15,33,53,.12);
  --sh-brand:0 6px 18px rgba(35,78,119,.34);
  /* motion */
  --ease:cubic-bezier(.22,.61,.36,1); --ease-soft:cubic-bezier(.22,1,.36,1);
  /* z */
  --z-tabbar:40; --z-hero:5; --z-sheet:60; --z-overlay:55; --z-toast:80;

  /* aliases the thread page's inline styles use */
  --app-brand:var(--brand); --app-brand-deep:var(--brand-deep); --app-brand-tint:var(--brand-tint);
  --app-ink:var(--ink); --app-muted:var(--ink-2); --app-soft:var(--ink-soft);
  --app-bg:var(--bg); --app-card:var(--card); --app-line:var(--line);
  --app-good:var(--good); --app-ease:var(--ease);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{ -webkit-text-size-adjust:100%; touch-action:manipulation; }  /* no double-tap zoom — feels like an app */
body{
  font-family:var(--body); color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  line-height:1.5; min-height:100vh; overflow-x:hidden;
}
a{ color:inherit; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; }

/* ---- motion primitives ---- */
@keyframes rise { from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} }
@keyframes fade { from{opacity:0;} to{opacity:1;} }
@keyframes pop  { 0%{opacity:0; transform:scale(.6);} 60%{opacity:1; transform:scale(1.06);} 100%{transform:scale(1);} }
.rise{ animation:rise .5s var(--ease) both; }
.stagger > *{ animation:rise .5s var(--ease) both; }
.stagger > *:nth-child(1){animation-delay:.03s;} .stagger > *:nth-child(2){animation-delay:.08s;}
.stagger > *:nth-child(3){animation-delay:.13s;} .stagger > *:nth-child(4){animation-delay:.18s;}
.stagger > *:nth-child(5){animation-delay:.23s;} .stagger > *:nth-child(6){animation-delay:.28s;}
.stagger > *:nth-child(7){animation-delay:.33s;} .stagger > *:nth-child(n+8){animation-delay:.36s;}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001s !important; animation-delay:0 !important;
    transition-duration:.001s !important; }
}

/* ===========================================================================
   APP SHELL — hero band + body that floats over it
   =========================================================================== */
.screen{ max-width:600px; margin:0 auto; min-height:100vh; position:relative;
  padding-bottom:calc(78px + env(safe-area-inset-bottom,0)); }

/* navy hero band */
.hero{
  position:relative; z-index:var(--z-hero); color:#fff; overflow:hidden;
  padding:calc(20px + env(safe-area-inset-top,0)) 20px 46px;
  background:
    radial-gradient(120% 90% at 88% -20%, var(--brand-bright) 0%, rgba(95,168,216,0) 55%),
    linear-gradient(150deg, var(--brand) 0%, var(--brand-deep) 100%);
}
.hero::after{ /* soft light sweep */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(80% 60% at 10% 120%, rgba(255,255,255,.14), transparent 60%);
}
.hero-top{ display:flex; align-items:center; gap:12px; position:relative; z-index:1; }
.hero-top .logo{ height:34px; width:auto; }   /* the mark needs room to read */
.hero-top .brandline{ font-family:var(--display); font-weight:800; font-size:1.02rem;
  letter-spacing:-.01em; line-height:1; }
.hero-top .brandline small{ display:block; font-family:var(--body); font-weight:600;
  font-size:.72rem; opacity:.82; letter-spacing:.01em; margin-top:3px; }
.hero-top .spacer{ flex:1; }
.icon-btn{ width:44px; height:44px; border-radius:var(--r-pill); border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:#fff;
  background:rgba(255,255,255,.14); text-decoration:none; transition:background .16s var(--ease); }
.icon-btn:active{ background:rgba(255,255,255,.26); }
.icon-btn svg{ width:19px; height:19px; }

.hero-title{ position:relative; z-index:1; margin-top:22px; }
.hero-title h1{ font-family:var(--display); font-weight:800; font-size:1.6rem;
  letter-spacing:-.02em; line-height:1.12; text-wrap:balance; }
.hero-title p{ color:var(--on-brand); font-weight:500; font-size:.95rem; margin-top:6px; opacity:.92; }

/* back-style compact hero (detail screens) */
.hero.compact{ padding-bottom:40px; }
.hero .back{ display:inline-flex; align-items:center; gap:6px; color:#fff; text-decoration:none;
  font-weight:700; font-size:.9rem; opacity:.9; position:relative; z-index:1;
  padding:11px 10px; margin:-11px -10px 3px; }   /* looks the same, taps like 44px */
.hero .back svg{ width:18px; height:18px; }
.hero .eyebrow{ color:var(--on-brand); font-weight:700; font-size:.76rem; letter-spacing:.03em;
  text-transform:uppercase; opacity:.85; }

/* body floats up over the hero's lower edge */
.body{ position:relative; z-index:10; margin-top:-28px;
  background:var(--bg); border-radius:22px 22px 0 0; padding:22px 16px 8px; min-height:40vh; }

/* section labels */
.sec{ font-family:var(--display); font-weight:800; font-size:.82rem; color:var(--ink-2);
  letter-spacing:.02em; text-transform:uppercase; margin:20px 4px 10px; }
.sec:first-child{ margin-top:2px; }

/* little count badge (flagged messages, unread chats) */
.tab-badge{ position:absolute; min-width:17px; height:17px; padding:0 4px;
  border-radius:999px; background:var(--bad); color:#fff; font-family:var(--display); font-weight:800;
  font-size:.62rem; line-height:17px; text-align:center; box-shadow:0 0 0 2px rgba(255,255,255,.9); }

/* ---- bottom tab bar (the "it's a real app" element) ---- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:var(--z-tabbar);
  display:flex; justify-content:space-around; align-items:stretch;
  max-width:600px; margin:0 auto;
  padding:8px 8px calc(8px + env(safe-area-inset-bottom,0));
  background:rgba(255,255,255,.86); backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-top:1px solid var(--line); box-shadow:0 -4px 20px rgba(15,33,53,.06);
}
.tab{ flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  text-decoration:none; color:#4A5A6A; font-weight:700; font-size:.68rem;
  padding:6px 2px 4px; border-radius:var(--r-sm); transition:color .16s var(--ease); }
.tab svg{ width:23px; height:23px; stroke-width:2; transition:transform .2s var(--ease-soft); }
.tab.on{ color:var(--brand-deep); }
.tab.on svg{ transform:translateY(-1px); }
.tab:active svg{ transform:scale(.9); }

/* ---- collapsed admin forms ("+ New room", "+ Add a person") ---- */
.newroom{ margin:14px 2px 0; }
.newroom summary{ cursor:pointer; font-family:var(--display); font-weight:800; font-size:.9rem;
  color:var(--brand-deep); list-style:none; padding:10px 4px; }
.newroom summary::-webkit-details-marker{ display:none; }
.newroom form{ display:flex; gap:9px; margin-top:8px; }
.newroom input{ flex:1; min-width:0; font-size:16px; font-family:var(--body); color:var(--ink);
  padding:12px 14px; border:1.5px solid var(--line); border-radius:var(--r-sm); outline:none; background:var(--card); }
.newroom input:focus{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-tint); }

/* ---- one control height everywhere (the judges measured 46/48/50px drift) ---- */
.field input, .field select, .profile-form select, .bday select,
.add-person input, .newroom input{ height:48px; }

/* desktop: frame the phone column as a deliberate card, not a floating strip */
@media (min-width: 700px){
  body{ background:#E2E8EF; }
  /* the column is one continuous surface — no gray void under short pages */
  .screen{ box-shadow:0 0 44px rgba(15,33,53,.14); background:var(--bg); }
  .composer, .composer-dock, .tabbar{ max-width:600px; }
}

/* ---- birthdays: the month/day picker and the "this month" list ---- */
.bday{ display:flex; gap:9px; }
.bday select{ flex:1; min-width:0; font-size:16px; font-family:var(--body); color:var(--ink);
  padding:13px 12px; border:1.5px solid var(--line); border-radius:var(--r-sm);
  outline:none; background:var(--card-2); }
.bday select:focus{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-tint); background:#fff; }
.hint{ display:block; font-size:11.5px; color:var(--ink-soft); font-weight:600;
  line-height:1.45; margin-top:7px; }
.bday-list{ background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh-1); overflow:hidden; }
.bday-row{ display:flex; align-items:center; gap:12px; padding:10px 14px;
  border-bottom:1px solid var(--line-2); }
.bday-row:last-child{ border-bottom:none; }
.bday-row.today{ background:var(--quiet-bg); }
.bd-day{ flex:0 0 auto; width:30px; height:30px; border-radius:9px; background:var(--brand-tint);
  color:var(--brand-deep); font-family:var(--display); font-weight:800; font-size:.85rem;
  display:flex; align-items:center; justify-content:center; }
.bday-row.today .bd-day{ background:var(--sun); color:#fff; }
.bd-name{ flex:1; font-weight:700; font-size:.92rem; color:var(--ink); }
.bd-tag{ font-size:.62rem; font-weight:800; color:var(--quiet-ink); background:#fff;
  border:1px solid var(--quiet-line); padding:2px 8px; border-radius:var(--r-pill); }

/* ---- directory search + person rows ---- */
.dir-search{ display:flex; align-items:center; gap:9px; padding:3px 14px; margin-bottom:6px;
  border-radius:var(--r-pill); background:var(--card); border:1.5px solid var(--line); }
.dir-search:focus-within{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-tint); }
.dir-search svg{ width:17px; height:17px; color:var(--ink-soft); flex-shrink:0; }
.dir-search input{ flex:1; min-width:0; border:none; outline:none; background:none;
  font-size:16px; font-family:var(--body); color:var(--ink); padding:11px 0; }
.dir-search a{ color:var(--ink-soft); text-decoration:none; font-size:14px; padding:4px; }

.person{ display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); padding:12px 14px; margin-bottom:9px; box-shadow:var(--sh-1); }
.avatar{ width:42px; height:42px; border-radius:50%; flex:0 0 auto; color:#fff; font-weight:800;
  display:flex; align-items:center; justify-content:center; font-family:var(--display); font-size:.95rem;
  background:linear-gradient(135deg,var(--brand),var(--brand-deep)); box-shadow:var(--sh-1); }
.person .who{ flex:1; min-width:0; }
.person .who .nm{ font-weight:700; font-size:.95rem; color:var(--ink);
  display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.person .who .dt{ font-size:.8rem; color:var(--ink-soft); font-weight:600; margin-top:1px;
  line-height:1.35; }   /* wraps — the trade is the point of the directory, never chop it */
.person .msg-tag{ font-size:.62rem; font-weight:800; color:var(--sun-deep); background:var(--quiet-bg);
  border:1px solid var(--quiet-line); padding:1px 7px; border-radius:var(--r-pill); }
.p-actions{ display:flex; gap:8px; flex:0 0 auto; }
.p-act{ width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--brand-deep); background:var(--brand-tint); text-decoration:none; transition:transform .12s var(--ease); }
.p-act:active{ transform:scale(.92); }
.p-act svg{ width:17px; height:17px; }

/* ---- meeting cards (calendar block + title, like a real events app) ---- */
.meet-card{ display:flex; align-items:center; gap:14px; text-decoration:none; color:inherit;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:14px 15px; margin-bottom:11px; box-shadow:var(--sh-2);
  transition:transform .14s var(--ease), box-shadow .18s var(--ease); }
.meet-card:active{ transform:scale(.985); box-shadow:var(--sh-1); }
.meet-card .cal{ width:52px; height:56px; flex:0 0 auto; border-radius:var(--r-sm); overflow:hidden;
  text-align:center; box-shadow:var(--sh-1); border:1px solid var(--line); display:block; }
.meet-card .cal .m{ display:block; background:var(--brand); color:#fff; font-family:var(--display);
  font-weight:800; font-size:.62rem; letter-spacing:.06em; padding:3px 0; text-transform:uppercase; }
.meet-card .cal .d{ display:block; font-family:var(--display); font-weight:800; font-size:1.45rem;
  color:var(--ink); line-height:1.5; }
.meet-card .txt{ flex:1; min-width:0; display:flex; flex-direction:column; }
.meet-card .txt .t{ font-family:var(--display); font-weight:800; font-size:1.02rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink); }
.meet-card .txt .s{ font-size:.8rem; color:var(--ink-2); font-weight:600; margin-top:1px; }
.meet-card .txt .going-line b{ color:var(--good); }
.meet-card .chev{ color:var(--ink-soft); flex:0 0 auto; }

/* ---- stat tiles (meeting page) ---- */
.tiles{ display:grid; grid-template-columns:repeat(2,1fr); gap:11px; }
.tile{ background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:15px; box-shadow:var(--sh-1); }
.tile .n{ font-family:var(--display); font-weight:800; font-size:1.7rem; line-height:1; color:var(--ink); }
.tile .l{ font-size:.74rem; color:var(--ink-soft); font-weight:800; text-transform:uppercase;
  letter-spacing:.04em; margin-top:6px; }
.tile.good .n{ color:var(--good); } .tile.brand .n{ color:var(--brand-deep); }

/* ===========================================================================
   BUTTONS
   =========================================================================== */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:0; cursor:pointer; font-family:var(--display); font-weight:800; font-size:.95rem;
  padding:13px 18px; border-radius:var(--r-sm); text-decoration:none; text-align:center;
  transition:transform .12s var(--ease), box-shadow .18s var(--ease), background .16s var(--ease); }
.btn:active{ transform:translateY(1px) scale(.995); }
.btn-primary{ color:#fff; background:linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  box-shadow:var(--sh-brand); }
.btn-primary:active{ box-shadow:0 3px 10px rgba(35,78,119,.34); }
.btn-ghost{ background:var(--card-2); color:var(--ink-2); border:1px solid var(--line); }
.btn-danger{ color:#fff; background:linear-gradient(135deg, #D24C66 0%, var(--bad) 100%);
  box-shadow:0 6px 18px rgba(194,51,77,.3); }
.btn-block{ width:100%; }
.btn-lg{ padding:15px 20px; font-size:1rem; border-radius:var(--r); }

/* ---- empty states ---- */
.empty{ text-align:center; padding:34px 20px; color:var(--ink-soft); }
.empty .ill{ width:66px; height:66px; margin:0 auto 14px; border-radius:50%;
  background:var(--brand-tint); display:flex; align-items:center; justify-content:center; color:var(--brand); }
.empty .ill svg{ width:30px; height:30px; }
.empty h3{ font-family:var(--display); font-weight:800; font-size:1.05rem; color:var(--ink-2); }
.empty p{ font-size:.88rem; margin-top:4px; }

.foot{ text-align:center; color:var(--ink-soft); font-size:.78rem; margin:26px 0 8px; }
.foot a{ color:var(--brand-dark); font-weight:800; text-decoration:none; }

/* ---- "we've missed you" banner + the leaders' absence list ---- */
.lapse-banner{ background:var(--quiet-bg); border:1px solid var(--quiet-line); color:var(--quiet-ink);
  border-radius:var(--r); padding:13px 15px; font-size:.9rem; line-height:1.5; margin-bottom:13px; }
.lapse-banner b{ display:block; font-family:var(--display); }
.lapse-banner a{ color:var(--brand-dark); font-weight:800; text-decoration:none; display:inline-block; margin-top:4px; }
.lapse-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  background:var(--card); border:1px solid var(--quiet-line); border-radius:var(--r);
  padding:12px 14px; margin-bottom:9px; box-shadow:var(--sh-1); }
.lr-name{ font-weight:700; font-size:.95rem; color:var(--ink); display:flex; align-items:center; gap:7px; }
.lr-tag{ font-size:.62rem; font-weight:800; color:var(--quiet-ink); background:var(--quiet-bg);
  border:1px solid var(--quiet-line); padding:1px 7px; border-radius:var(--r-pill); }
.lr-when{ font-size:.78rem; color:var(--ink-soft); font-weight:600; margin-top:1px; }
.lr-actions{ display:flex; gap:7px; flex-wrap:wrap; }
.lr-btn{ padding:9px 12px; font-size:.78rem; }

/* ===========================================================================
   FLASH
   =========================================================================== */
.flash{ border-radius:var(--r-sm); padding:11px 14px; font-size:.86rem; font-weight:700; margin-bottom:13px; }
.flash.error{ background:#FCE7EC; color:var(--bad); border:1px solid #F6C9D3; }
.flash.success{ background:var(--good-bg); color:var(--good); border:1px solid var(--good-line); }

/* ===========================================================================
   AUTH (login) — warm navy front door
   =========================================================================== */
.auth{ min-height:100vh; display:flex; flex-direction:column; justify-content:center;
  padding:32px 20px calc(32px + env(safe-area-inset-bottom,0));
  background:
    radial-gradient(120% 80% at 85% -10%, var(--brand-bright) 0%, rgba(95,168,216,0) 55%),
    linear-gradient(160deg, var(--brand) 0%, var(--brand-deep) 100%);
}
.auth-brand{ text-align:center; margin-bottom:22px; color:#fff; }
.auth-brand img{ height:46px; width:auto; margin:0 auto 16px; }
.auth-brand .auth-logo{ height:172px; margin-bottom:18px; }
@media (max-height: 700px){ .auth-brand .auth-logo{ height:132px; } }
.auth-brand h1{ font-family:var(--display); font-weight:800; font-size:1.7rem; letter-spacing:-.02em; }
.auth-brand p{ color:var(--on-brand); font-weight:500; margin-top:6px; opacity:.92; }
.auth-card{ width:100%; max-width:410px; margin:0 auto; background:#fff; border-radius:var(--r-xl);
  padding:22px 20px 24px; box-shadow:var(--sh-3); }
.field{ margin-bottom:14px; }
.field label{ display:block; font-weight:800; font-size:.82rem; margin-bottom:7px; color:var(--ink-2); }
.field input{ width:100%; font-size:16px; font-family:var(--body); color:var(--ink);
  padding:13px 14px; border:1.5px solid var(--line); border-radius:var(--r-sm); outline:none;
  background:var(--card-2); transition:border-color .15s var(--ease), box-shadow .15s var(--ease), background .15s; }
.field input::placeholder{ color:var(--ink-soft); }
.field input:focus{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-tint); background:#fff; }
.auth-foot{ text-align:center; color:var(--on-brand); font-size:.8rem; margin-top:20px; opacity:.9; }

/* ===========================================================================
   CHAT — room list + thread + composer (ported intact from the CF app)
   =========================================================================== */
.push-cta{ display:flex; align-items:center; gap:10px; margin:2px 0 12px; padding:11px 14px;
  border-radius:14px; background:var(--brand-tint); border:1px solid rgba(43,93,140,.22); }
.push-cta[hidden]{ display:none; }   /* the hidden attribute must beat display:flex */
.push-cta .pc-bell{ font-size:18px; flex-shrink:0; }
.push-cta .pc-text{ flex:1; font-size:13.5px; font-weight:600; color:var(--brand-deep); }
.push-cta .pc-btn{ border:none; background:var(--brand); color:#fff; font-weight:700;
  font-size:13px; padding:7px 14px; border-radius:999px; cursor:pointer; }
.push-cta .pc-x{ border:none; background:none; color:var(--ink-soft); cursor:pointer; font-size:14px; }

.convo{ display:flex; align-items:center; gap:13px; text-decoration:none; color:inherit;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:13px 14px; margin-bottom:10px; box-shadow:var(--sh-1); transition:transform .12s var(--ease); }
.convo:active{ transform:scale(.99); }
.convo-av{ width:47px; height:47px; border-radius:50%; flex:0 0 auto; color:#fff; font-weight:800;
  display:flex; align-items:center; justify-content:center; font-family:var(--display); font-size:1.05rem;
  background:linear-gradient(135deg,var(--brand),var(--brand-deep)); box-shadow:var(--sh-1); }
.convo-main{ flex:1; min-width:0; }
.convo-top{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.convo-name{ font-family:var(--display); font-weight:800; font-size:.98rem; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.convo-time{ font-size:.72rem; color:var(--ink-soft); font-weight:700; flex:0 0 auto; }
.convo-preview{ display:block; font-size:.85rem; color:var(--ink-2); font-weight:500; margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.convo-preview b{ color:var(--ink); font-weight:800; }
.convo-preview .muted{ color:var(--ink-soft); font-weight:600; }
.convo .chev{ color:var(--ink-soft); flex:0 0 auto; }

/* unread conversation on the room list — the crimson badge + bold text carry
   the signal; no special border (one card treatment everywhere) */
.convo.unread .convo-name{ color:var(--brand-deep); }
.convo.unread .convo-preview{ color:var(--ink); font-weight:700; }
.convo-count{ flex:0 0 auto; min-width:20px; height:20px; padding:0 6px; border-radius:999px;
  background:var(--bad); color:#fff; font-family:var(--display); font-weight:800; font-size:.7rem;
  line-height:20px; text-align:center; }   /* crimson = "needs your attention", app-wide */

/* thread */
.thread-body{ padding-bottom:84px; background:var(--bg); }
.thread{ display:flex; flex-direction:column; padding:6px 2px 8px; }
.msg{ display:flex; flex-direction:column; max-width:82%; margin-bottom:9px; }
.msg.theirs{ align-self:flex-start; align-items:flex-start; }
.msg.mine{ align-self:flex-end; align-items:flex-end; }
.msg-author{ font-size:.74rem; font-weight:800; color:var(--brand-deep); margin:0 0 3px 12px;
  display:flex; align-items:center; gap:6px; }
.msg-author .msg-tag{ font-size:.62rem; font-weight:800; color:var(--sun-deep); background:var(--quiet-bg);
  border:1px solid var(--quiet-line); padding:1px 7px; border-radius:var(--r-pill); }
.bubble{ padding:10px 13px; border-radius:17px; font-size:.92rem; line-height:1.4;
  word-wrap:break-word; overflow-wrap:anywhere; }
.msg.theirs .bubble{ background:var(--card); border:1px solid var(--line); color:var(--ink);
  border-bottom-left-radius:5px; box-shadow:var(--sh-1); }
.msg.mine .bubble{ background:linear-gradient(135deg,var(--brand),var(--brand-dark)); color:#fff;
  border-bottom-right-radius:5px; box-shadow:var(--sh-brand); }
.msg.theirs.admin .bubble{ background:var(--brand-tint); border-color:#CFE2F0; color:var(--brand-deep); }
/* messages the app itself posts (birthdays) — warm, clearly not a person */
.msg.theirs.system .msg-author{ color:var(--sun-deep); }
.msg.theirs.system .bubble{ background:var(--quiet-bg); border-color:var(--quiet-line);
  color:var(--quiet-ink); font-weight:700; }
.msg-time{ font-size:.66rem; color:var(--ink-soft); font-weight:700; margin:4px 12px 0; }

/* composer (fixed at the bottom, over the safe area) */
.composer{ position:fixed; left:0; right:0; bottom:0; z-index:var(--z-tabbar);
  max-width:600px; margin:0 auto; display:flex; gap:9px; align-items:center;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom,0));
  background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px); border-top:1px solid var(--line); }
.composer input{ flex:1; min-width:0; font-size:16px; font-family:var(--body); color:var(--ink);
  padding:12px 15px; border:1.5px solid var(--line); border-radius:var(--r-pill); outline:none; background:var(--card-2); }
.composer input:focus{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-tint); background:#fff; }
.composer button{ width:46px; height:46px; flex:0 0 auto; border:0; border-radius:50%; cursor:pointer;
  background:linear-gradient(135deg,var(--brand),var(--brand-dark)); color:#fff; box-shadow:var(--sh-brand);
  display:flex; align-items:center; justify-content:center; transition:transform .12s var(--ease); }
.composer button:active{ transform:scale(.94); }
.composer button svg{ width:20px; height:20px; }