/* vietnamese */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("./vendor/d43a448a-7e15-48b1-987c-d28d79a106fa.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("./vendor/493f10c7-19f5-4f02-abbb-6e51e548092a.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("./vendor/dc184b7e-16b4-4178-87f8-6e186d4c25c6.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("./vendor/d43a448a-7e15-48b1-987c-d28d79a106fa.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("./vendor/493f10c7-19f5-4f02-abbb-6e51e548092a.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("./vendor/dc184b7e-16b4-4178-87f8-6e186d4c25c6.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("./vendor/d43a448a-7e15-48b1-987c-d28d79a106fa.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("./vendor/493f10c7-19f5-4f02-abbb-6e51e548092a.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("./vendor/dc184b7e-16b4-4178-87f8-6e186d4c25c6.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./vendor/88fd0956-b652-417f-ab93-c5b34c741efa.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./vendor/307439b1-a1ee-422e-addf-3b2ba4b90a7e.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./vendor/b76bfbeb-2d8d-44fb-8869-4e9e299e8025.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./vendor/9da7d40d-ac8c-4bca-b8b8-4561c690b713.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./vendor/88fd0956-b652-417f-ab93-c5b34c741efa.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./vendor/307439b1-a1ee-422e-addf-3b2ba4b90a7e.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./vendor/b76bfbeb-2d8d-44fb-8869-4e9e299e8025.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./vendor/9da7d40d-ac8c-4bca-b8b8-4561c690b713.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./vendor/88fd0956-b652-417f-ab93-c5b34c741efa.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./vendor/307439b1-a1ee-422e-addf-3b2ba4b90a7e.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./vendor/b76bfbeb-2d8d-44fb-8869-4e9e299e8025.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./vendor/9da7d40d-ac8c-4bca-b8b8-4561c690b713.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./vendor/88fd0956-b652-417f-ab93-c5b34c741efa.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./vendor/307439b1-a1ee-422e-addf-3b2ba4b90a7e.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./vendor/b76bfbeb-2d8d-44fb-8869-4e9e299e8025.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./vendor/9da7d40d-ac8c-4bca-b8b8-4561c690b713.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("./vendor/88fd0956-b652-417f-ab93-c5b34c741efa.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("./vendor/307439b1-a1ee-422e-addf-3b2ba4b90a7e.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("./vendor/b76bfbeb-2d8d-44fb-8869-4e9e299e8025.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("./vendor/9da7d40d-ac8c-4bca-b8b8-4561c690b713.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ───────────────────────────── Pro Social — design tokens ───────────────────────────── */
:root {
  --bg:        #FBF3E8;   /* warm cream app background */
  --bg-2:      #F4EAD9;   /* slightly deeper cream */
  --surface:   #FFFFFF;
  --surface-2: #FFFBF4;
  --ink:       #2C2722;
  --ink-soft:  #6B6258;
  --ink-faint: #A99E90;
  --line:      rgba(44,39,34,0.10);
  --line-2:    rgba(44,39,34,0.06);

  --accent:      #5B8C6E;  /* sage */
  --accent-deep: #467458;
  --accent-soft: #E6EFE8;
  --accent-ink:  #2F4A3A;
  --on-accent:   #FFFFFF;

  --caramel:   #C98A4B;    /* boba/tapioca motif accent (sparingly) */
  --caramel-soft: #F6E9D6;

  --bubble-them: #FFFFFF;
  --bubble-them-ink: #2C2722;
  --bubble-me:   #5B8C6E;
  --bubble-me-ink: #FFFFFF;

  --shadow-sm: 0 1px 2px rgba(44,39,34,0.06), 0 2px 8px rgba(44,39,34,0.05);
  --shadow-md: 0 4px 14px rgba(44,39,34,0.08), 0 12px 34px rgba(44,39,34,0.07);
  --shadow-lg: 0 20px 60px rgba(44,39,34,0.16);

  --r-sm: 12px; --r-md: 18px; --r-lg: 26px; --r-xl: 34px;

  --font: "Plus Jakarta Sans", -apple-system, system-ui, sans-serif;
  --display: "Bricolage Grotesque", var(--font);
}
[data-theme="dark"] {
  --bg:        #16140F;
  --bg-2:      #1E1B14;
  --surface:   #232019;
  --surface-2: #2A261D;
  --ink:       #F3ECE0;
  --ink-soft:  #B7AC9B;
  --ink-faint: #7B7263;
  --line:      rgba(255,255,255,0.10);
  --line-2:    rgba(255,255,255,0.055);

  --accent:      #7FB295;
  --accent-deep: #6AA081;
  --accent-soft: rgba(127,178,149,0.15);
  --accent-ink:  #CFE6D7;
  --on-accent:   #16271D;

  --caramel:   #D6A368;
  --caramel-soft: rgba(214,163,104,0.16);

  --bubble-them: #2A261D;
  --bubble-them-ink: #F3ECE0;
  --bubble-me:   #5F9277;
  --bubble-me-ink: #FFFFFF;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.45);
  --shadow-lg: 0 24px 70px rgba(0,0,0,0.6);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--page-bg, #E9E2D6);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* ───────────────────────────── full-screen app root ───────────────────────────── */
/* The app fills the whole viewport - no device frame, logo bar, or theme toggle.
   .scr (position: absolute; inset: 0) anchors to this fixed, positioned root. */
.app-root {
  position: fixed; inset: 0;
  background: var(--bg); color: var(--ink);
  overflow: hidden;
}

/* ───────────────────────────── reusable inside-phone bits ───────────────────────────── */
.scr { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); }
.scr-body { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; }
.scr-body::-webkit-scrollbar { width: 0; }

.ps-btn {
  font-family: var(--font); font-weight: 700; font-size: 17px;
  border: none; cursor: pointer; border-radius: var(--r-md);
  padding: 16px 20px; width: 100%;
  background: var(--accent); color: var(--on-accent);
  box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .12s ease, filter .15s ease;
}
.ps-btn:active { transform: translateY(1px) scale(0.992); }
.ps-btn:hover { filter: brightness(1.04); }
.ps-btn.ghost { background: transparent; color: var(--accent-deep); box-shadow: none; }
[data-theme="dark"] .ps-btn.ghost { color: var(--accent); }
.ps-btn.soft { background: var(--accent-soft); color: var(--accent-ink); box-shadow: none; }
.ps-btn.dark-line { background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }

.ps-field {
  width: 100%; font-family: var(--font); font-size: 17px; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: var(--r-md); padding: 15px 16px; outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ps-field::placeholder { color: var(--ink-faint); }
.ps-field:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.field-label { font-size: 13px; font-weight: 700; color: var(--ink-soft); margin: 0 0 8px 4px; letter-spacing: 0.01em; }

.ps-card {
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}

.eyebrow { font-size: 12.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-deep); }
[data-theme="dark"] .eyebrow { color: var(--accent); }
.h-display { font-family: var(--display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; color: var(--ink); }
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }

/* avatar */
.av { border-radius: 999px; display: grid; place-items: center; font-weight: 800; color: #fff; flex-shrink: 0; font-family: var(--font); }

/* chips */
.chip {
  font-family: var(--font); font-weight: 600; font-size: 14px;
  border: 1.5px solid var(--line); background: var(--surface);
  color: var(--ink-soft); padding: 9px 14px; border-radius: 999px; cursor: pointer;
  transition: all .14s ease; display: inline-flex; align-items: center; gap: 6px;
}
.chip:hover { border-color: var(--accent); }
.chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }

/* boba pearls motif */
.pearls { display: inline-flex; gap: 4px; align-items: flex-end; }
.pearls i { width: 6px; height: 6px; border-radius: 999px; background: var(--caramel); display: block; }

/* chat */
.chat-row { display: flex; gap: 8px; padding: 1px 16px; align-items: flex-end; }
.chat-row.me { justify-content: flex-end; }
.bubble {
  /* fit-content + a viewport-relative cap so the bubble hugs its text. A percentage max-width here
     resolves against the auto-sized flex column and, with break-word, collapses to ~1ch per line. */
  width: fit-content; max-width: min(76vw, 34rem);
  padding: 10px 14px; border-radius: 20px; font-size: 15.5px; line-height: 1.34;
  position: relative; word-wrap: break-word; white-space: pre-line;
}
.bubble.them { background: var(--bubble-them); color: var(--bubble-them-ink); border: 1px solid var(--line-2); border-bottom-left-radius: 7px; box-shadow: var(--shadow-sm); }
.bubble.me { background: var(--bubble-me); color: var(--bubble-me-ink); border-bottom-right-radius: 7px; }
.sender { font-size: 11.5px; font-weight: 700; color: var(--ink-faint); margin: 10px 0 3px 54px; }
.day-sep { text-align: center; font-size: 12px; font-weight: 600; color: var(--ink-faint); padding: 14px 0 8px; }
.day-sep b { color: var(--ink-soft); }

/* AI (Pro) bubble */
.bubble.pro {
  background: linear-gradient(180deg, var(--accent-soft), var(--accent-soft));
  border: 1.5px solid color-mix(in oklab, var(--accent) 35%, transparent);
  color: var(--accent-ink); border-bottom-left-radius: 7px;
  max-width: min(82vw, 34rem);
}
.pro-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; color: var(--accent-deep); margin-bottom: 4px; text-transform: uppercase; }
[data-theme="dark"] .pro-tag { color: var(--accent); }

/* plan card in chat */
.plan-card { width: fit-content; max-width: min(86vw, 34rem); overflow: hidden; }
.plan-photo { height: 116px; position: relative; }
.plan-rsvp { display: flex; gap: 8px; }
.rsvp-btn { flex: 1; font-weight: 700; font-size: 14px; border-radius: 12px; padding: 11px; cursor: pointer; border: 1.5px solid var(--line); background: var(--surface-2); color: var(--ink); display:flex; align-items:center; justify-content:center; gap:6px; }
.rsvp-btn.in { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.rsvp-btn.out { background: transparent; }

/* striped placeholder */
.ph-stripe {
  background-image: repeating-linear-gradient(45deg, var(--bg-2) 0 11px, var(--surface-2) 11px 22px);
}

/* groups list */
.group-row { display: flex; gap: 14px; padding: 13px 18px; align-items: center; cursor: pointer; position: relative; transition: background .12s ease; }
.group-row:hover { background: var(--surface-2); }
.group-emoji { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 26px; flex-shrink: 0; }
.unread-badge {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent); display: grid; place-items: center;
  font-size: 11px; font-weight: 800; line-height: 1; flex-shrink: 0;
}
.list-divider { height: 1px; background: var(--line-2); margin-left: 84px; }

/* segmented */
.seg { display: flex; background: var(--bg-2); border-radius: 999px; padding: 4px; gap: 4px; }
.seg button { flex: 1; border: none; background: none; cursor: pointer; font-family: var(--font); font-weight: 700; font-size: 14px; color: var(--ink-soft); padding: 9px; border-radius: 999px; }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

/* slider */
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 999px; background: var(--bg-2); outline: none; }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 999px; background: var(--accent); cursor: pointer; box-shadow: var(--shadow-md); border: 3px solid var(--surface); }

/* top bar inside phone */
.scr-top { display: flex; align-items: center; gap: 12px; padding: 56px 16px 12px; }
.icon-btn { width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line-2); color: var(--ink); cursor: pointer; box-shadow: var(--shadow-sm); flex-shrink: 0; }
.icon-btn:hover { color: var(--accent-deep); }

/* progress dots for onboarding */
.steps { display: flex; gap: 6px; }
.steps i { width: 7px; height: 7px; border-radius: 999px; background: var(--line); display:block; }
.steps i.on { background: var(--accent); width: 20px; }

.td { width: 7px; height: 7px; border-radius: 999px; background: var(--accent-deep); display: block; animation: td 1.2s infinite ease-in-out; }
.td:nth-child(2) { animation-delay: .15s; }
.td:nth-child(3) { animation-delay: .3s; }
@keyframes td { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.fade-in { animation: fadeIn .4s ease both; }
@keyframes fadeIn { from { transform: translateY(7px); } to { transform: none; } }
.pop { animation: pop .35s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes pop { from { transform: scale(.92); } to { transform: scale(1);} }
.sheet-pop { animation: sheetPop .26s cubic-bezier(.2,.9,.3,1) both; }
@keyframes sheetPop { from { transform: translateY(26px); } to { transform: translateY(0); } }
.no-anim-end {}