/* ============================================================================
   AI Agents Ke — global design system · "Premium AI Indigo"
   ----------------------------------------------------------------------------
   Loaded last in <head> on every page (after each page's inline <style>), so
   these rules are the final word on typography, controls and surfaces.

   Palette: light app shell on #F6F7FC, white surfaces, a deep navy sidebar
   (#151735) with soft lavender nav text, and an indigo brand gradient
   (#633CF5 → #9259F6) reserved for primary actions and branding.

   1. Fonts            — Inter (UI) + Plus Jakarta Sans (display headlines)
   2. Rendering        — anti-aliasing / legibility on every container
   3. Hierarchy        — weight + rhythm remap (no more 800/900/1000 everywhere)
   4. Controls         — buttons, pills, badges, inputs, banners
   5. Interactions     — transitions, focus rings, reduced motion
   6. Sidebar nav      — 500 idle / 600 active (scoped to real sidebars)
   7. Checkbox lists   — flush-left option rows for scopes, events and toggles
   8. In-app builder   — the "Ella in mobile app" configuration blocks
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

:root{
  /* Type */
  --font-sans:'Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --font-display:'Plus Jakarta Sans','Inter',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono',monospace;

  /* Weight scale — the only weights the platform uses */
  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;
  --fw-extrabold:800;

  /* Colour — Premium AI Indigo */
  --bg:#F6F7FC;
  --surface:#FFFFFF;
  --surface-soft:#F9FAFE;
  --ink:#171A35;
  --ink-2:#4A5170;
  --line:#E7E9F2;
  --line-strong:#D9DCEA;
  --navy:#151735;
  --navy-2:#20234A;
  --brand:#633CF5;
  --brand-2:#9259F6;
  --accent:#20BFE8;
  --success:#16A579;
  --warning:#F2A93B;
  --error:#E54858;
  --grad:linear-gradient(135deg,#633CF5,#9259F6);
  --shadow-sm:0 1px 2px rgba(23,26,53,.04);
  --shadow-md:0 1px 2px rgba(23,26,53,.04),0 8px 24px rgba(23,26,53,.06);
  --shadow-lg:0 16px 48px rgba(23,26,53,.16),0 2px 8px rgba(23,26,53,.06);

  /* Soft secondary tone for muted copy on the light surfaces */
  --text-secondary:#68708A;

  /* Motion */
  --ease:cubic-bezier(.4,0,.2,1);
  --t:all .2s ease;

  /* In-app builder blocks (the "Ella in mobile app" section in the dashboards) */
  --inapp-line:rgba(23,26,53,.12);
  --inapp-line-soft:rgba(23,26,53,.07);
  --inapp-surface:#F9FAFE;
  --inapp-surface-hover:#F3F4FB;
  --inapp-accent:#633CF5;
  --inapp-accent-soft:rgba(99,60,245,.08);
  --inapp-accent-line:rgba(99,60,245,.35);
  --inapp-subhead:#8A91A9;
  --inapp-warn-bg:rgba(242,169,59,.1);
  --inapp-warn-fg:#A16D00;
  --inapp-warn-line:rgba(242,169,59,.4);
  --inapp-bubble-a-bg:#F1F2F8;
  --inapp-bubble-a-line:#E4E6F0;
  --inapp-bubble-b-bg:rgba(99,60,245,.1);
  --inapp-bubble-b-line:rgba(99,60,245,.3);
  --inapp-check:#16A579;
  --inapp-note:#A16D00;
}

/* ---------------------------------------------------------------- 2. Rendering
   Anti-aliasing is inherited, so applying it at the root plus every container
   removes jagged edges and pixelation across the whole application. */
:root,
html,
body,
*,
*::before,
*::after{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

html,
body,
.app,
.wrap,
.container,
.container-fluid,
.main,
.content,
.page,
.panel,
.card,
.sidebar,
.topbar,
.modal,
.auth,
.hero,
section,
header,
footer,
nav,
aside,
main,
form,
table{
  font-family:var(--font-sans);
  font-weight:var(--fw-regular);
  line-height:1.5;
}

/* Form controls and badges must inherit the UI font, never a browser default. */
button,
input,
select,
textarea,
optgroup,
.btn,
.pill,
.tag,
.badge,
.chip,
.tab,
.alert,
.banner,
.workspace-pill{
  font-family:inherit;
  font-synthesis-weight:none;
}

code,
pre,
kbd,
samp,
textarea.code{
  font-family:var(--font-mono);
}

/* --------------------------------------------------------------- 3. Hierarchy */

/* Display headlines: ExtraBold, tight leading, tight tracking. */
h1,
h2,
.page-title h1,
.page-title h2,
.brand h1,
.brand h2,
.card h1,
.card h2,
.hero h1,
h1.grad,
.headline{
  font-family:var(--font-display);
  font-weight:var(--fw-extrabold);
  line-height:1.12;
  letter-spacing:-0.02em;
}

/* Wordmarks follow the display face and the same tight tracking. */
.brand,
.brand b,
.brand strong,
.mark,
.logo,
.logo b{
  font-family:var(--font-display);
  font-weight:var(--fw-extrabold);
  line-height:1.15;
  letter-spacing:-0.02em;
}

h3,
h4,
h5,
h6,
.card h3,
.card h4,
.section-title{
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  line-height:1.15;
  letter-spacing:-0.02em;
}

/* Body copy, descriptions and empty states: regular, relaxed, secondary tone. */
body,
p,
li,
dd,
dt,
td,
.muted,
.sub,
.hint,
.help,
.desc,
.empty,
.empty-state,
.small,
small{
  font-weight:var(--fw-regular);
  line-height:1.5;
}

.muted,
.sub,
.hint,
.help,
.desc,
.empty,
.empty-state,
small{
  color:var(--text-secondary);
}

p a,
.muted a{
  font-weight:var(--fw-medium);
}

/* Micro labels (eyebrows, field labels, stat captions) stay compact. */
label,
.label,
.eyebrow,
.field label,
.stat .label,
.hero-label,
.cal-dow,
th{
  font-weight:var(--fw-semibold);
  letter-spacing:.02em;
}

/* ------------------------------------------- 4. Buttons, pills, badges, banners
   One standard: SemiBold, optically spaced, sentence case, fits its content. */
button,
.btn,
.btn-secondary,
.btn.primary,
.button,
input[type='submit'],
input[type='button'],
input[type='reset'],
.tab,
.pill,
.tag,
.badge,
.chip,
.actionbar button,
.action-bar button,
.toolbar button{
  font-weight:var(--fw-semibold);
  letter-spacing:.01em;
  text-transform:none;
  transition:var(--t);
}

.btn,
button.btn,
.btn.primary,
.btn.secondary,
.btn.danger,
a.btn,
input[type='submit'],
input[type='button']{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:auto;                 /* fit content — no arbitrary full-bleed stretching */
  max-width:100%;
  padding:10px 18px;
  border-radius:10px;
  line-height:1.2;
  text-align:center;
  cursor:pointer;
}

/* Opt-in full-width: stacked form submits and modals only. */
.btn-block,
.btn.block,
.btn.full,
.auth .btn,
.modal .btn,
.modal-footer .btn,
form.stack .btn{
  width:100%;
  flex:0 0 100%;
}

.pill,
.tag,
.badge,
.chip,
.status,
.workspace-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  width:auto;
  padding:4px 10px;
  line-height:1.45;
  border-radius:999px;
}

/* Full-width banner bars: capped height, tight vertical padding, clean radius.
   Only genuine single-line bars are listed — cards and positioning wrappers keep
   their own geometry. `overflow:auto` is the guard so a long message scrolls
   inside the bar instead of spilling out of it. */
.banner,
.notice,
.alert,
.ok,
.error,
.info,
.warn,
.warning,
.bar-notice,
#trialCountdown{
  max-height:96px;
  overflow:auto;
  padding:10px 14px;
  border-radius:10px;
  font-weight:var(--fw-medium);
  letter-spacing:.01em;
  line-height:1.45;
  text-transform:none;
}

.pill,
.tag,
.badge,
.chip{
  max-height:none;
  width:auto;
}

/* Inputs: inherit the UI font, calm placeholder tone, smooth states. */
input,
select,
textarea,
.input{
  font-family:inherit;
  font-size:inherit;
  font-weight:var(--fw-regular);
  letter-spacing:0;
  line-height:1.5;
  transition:var(--t);
}

input::placeholder,
textarea::placeholder{
  font-weight:var(--fw-regular);
  letter-spacing:0;
}

/* Dense controls keep their compact geometry, only the typography is unified. */
.btn-sm,
.btn.small,
.btn.compact{
  padding:7px 12px;
  font-size:.8rem;
}

/* --------------------------------------------------------------- 6. Sidebar nav
   The premium shell keeps its navy rail, so the nav typography rule is scoped to
   real sidebars (.sidebar, .side, .sidebar-nav). Static pages carry their own
   light top linkbars under the same `.nav` class — they keep their own colours.
   Idle: Medium on a soft lavender tone. Active: SemiBold, full white.
   The rail is the one dark surface on light pages, so it re-declares the soft
   tone locally: inherited text (brand, metadata) goes light, and every
   var(--text-secondary) inside it resolves to the light value. */
.sidebar,
.side,
.sidebar-nav{
  color:#F4F5FB;
  --text-secondary:#A0AEC0;
}

.sidebar .nav button,
.side .nav button,
.sidebar-nav button,
.sidebar .nav a,
.side .nav a,
.sidebar-nav a,
.sidebar .nav-item,
.side .nav-item{
  font-family:var(--font-sans);
  font-weight:var(--fw-medium);
  color:var(--text-secondary);
  letter-spacing:0;
  transition:var(--t);
}

.sidebar .nav button:hover,
.side .nav button:hover,
.sidebar-nav button:hover,
.sidebar .nav a:hover,
.side .nav a:hover,
.sidebar-nav a:hover,
.sidebar .nav-item:hover,
.side .nav-item:hover{
  color:#E2E8F0;
}

.sidebar .nav button.active,
.side .nav button.active,
.sidebar-nav button.active,
.sidebar .nav a.active,
.side .nav a.active,
.sidebar-nav a.active,
.sidebar .nav-item.active,
.side .nav-item.active,
.sidebar .nav button[aria-current='page'],
.side .nav button[aria-current='page'],
.sidebar .nav button[aria-selected='true'],
.side .nav button[aria-selected='true']{
  font-weight:var(--fw-semibold);
  color:#FFFFFF;
}

/* ------------------------------------------------ 7. Checkbox & option lists
   Every option list in the app (API permissions/scopes, outbound webhook events,
   Meta webhook fields, consent checkboxes) is a flush-left stack: the box is
   anchored at the top-left of its row and the text always starts immediately
   after it, however many lines it wraps to. Page CSS that centres a field
   (`text-align:center`, `place-items:center`) no longer bleeds into these rows,
   and the `input{width:100%}` rules used for text fields never stretch a box. */
.check-list,
.option-list,
.checkbox-list,
.check-list-group,
.scope-list{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  width:100%;
  text-align:left;
}

.check-row,
.check-list > label,
.option-list > label,
.checkbox-list > label,
.scope-list > label{
  display:flex;
  align-items:flex-start;
  gap:10px;
  width:100%;
  text-align:left;
  cursor:pointer;
}

/* A checkbox is never a full-width text input: fixed 16px box, top-anchored. */
input[type='checkbox'],
input[type='radio']{
  flex:0 0 auto;
  width:16px;
  height:16px;
  min-width:16px;
  max-width:16px;
  margin:2px 0 0;
  padding:0;
  vertical-align:top;
  accent-color:var(--brand, #633CF5);
  cursor:pointer;
}
.check-row > input[type='checkbox'],
.check-row > input[type='radio'],
.check-list > label > input[type='checkbox'],
.option-list > label > input[type='checkbox']{
  margin-top:2px;
}

/* Label titles and descriptions always read left-to-right from the box. */
.check-row > span,
.check-row > b,
.check-row > div,
.check-list > label > span,
.option-list > label > span,
.check-label,
.check-row-title,
.check-row-desc{
  display:block;
  flex:1 1 auto;
  min-width:0;
  text-align:left;
  justify-self:start;
}
.check-row > span,
.check-list > label > span,
.check-label,
.check-row-title{
  font-weight:var(--fw-medium);
  line-height:1.45;
}
.check-row-desc,
.check-row .muted,
.check-list > label .muted,
.option-list > label .muted{
  display:block;
  font-weight:var(--fw-regular);
  font-size:12px;
  line-height:1.5;
  color:var(--text-secondary);
  text-align:left;
}

/* Toggle rows: description on the left, the switch anchored on the right. */
.toggle-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  width:100%;
  text-align:left;
  cursor:pointer;
}
.toggle-row > span{
  display:block;
  min-width:0;
  text-align:left;
}
.toggle-row > span > b{
  display:block;
  font-weight:var(--fw-medium);
  line-height:1.45;
}
.toggle-row > input[type='checkbox']{
  flex:0 0 auto;
  margin:2px 0 0;
}

/* A field wrapper that contains an option list must never centre its content. */
.field:has(.check-list),
.field:has(.option-list),
.field:has(.checkbox-list),
.field:has(.scope-list),
.field:has(.check-row),
.field:has(.toggle-row){
  text-align:left;
  align-items:stretch;
}

/* ------------------------------------------------------------- Interactions */
a,
button,
select,
summary,
[role='button'],
[tabindex]:not([tabindex='-1']),
.tab,
.pill,
.tag,
.upgrade-card,
.integration-card,
.nav button,
.nav a{
  transition:var(--t);
}

a:hover,
button:hover,
.nav a:hover{
  transition-duration:.2s;
}

:focus-visible{
  outline:2px solid rgba(99,60,245,.55);
  outline-offset:2px;
}

/* ------------------------------------------------- Responsive / a11y guards */
@media (max-width:760px){
  .btn{
    padding:10px 14px;
  }
  .banner,
  .notice,
  .alert,
  .ok,
  .error,
  .info,
  .warn,
  .warning,
  .bar-notice{
    max-height:none;
  }
}

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
  }
}

/* ------------------------------------------- Ella in mobile app: the menu ---- */
/* One collapsed block per job, so a long panel reads as a short list of
   headings until somebody opens the one they came for. */
.inapp-menu{display:grid;gap:10px}
.inapp-block{
  border:1px solid var(--inapp-line);
  border-radius:14px;
  background:var(--inapp-surface);
  overflow:hidden;
}
.inapp-block>summary{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;
  cursor:pointer;
  list-style:none;
}
.inapp-block>summary::-webkit-details-marker{display:none}
.inapp-block>summary:hover{background:var(--inapp-surface-hover)}
.inapp-block-icon{font-size:1.15rem;line-height:1}
.inapp-block-copy{display:grid;gap:2px;flex:1;min-width:0}
.inapp-block-copy b{font-size:.92rem}
.inapp-block-copy .muted{font-size:.76rem}
.inapp-block-arrow{transition:transform .18s ease;opacity:.55}
.inapp-block[open]>.inapp-block-arrow{transform:rotate(90deg)}
.inapp-block-body{padding:0 16px 16px;border-top:1px solid var(--inapp-line-soft)}
.inapp-block-body>*:first-child{margin-top:14px}
/* A block whose feature is not on the plan is dimmed, not hidden: the heading
   still explains what it would add, and the pill names the plans that unlock it. */
.inapp-block.is-locked{opacity:.55;border-style:dashed}
.inapp-block.is-locked>summary{cursor:not-allowed}
.inapp-block.is-locked>summary:hover{background:var(--inapp-surface)}
.inapp-block.is-locked .inapp-block-body{display:none}
.inapp-lock-pill{padding:2px 9px;border-radius:99px;border:1px solid var(--inapp-warn-line);
  background:var(--inapp-warn-bg);color:var(--inapp-warn-fg);font-size:.66rem;font-weight:700;white-space:nowrap}
.inapp-card.is-locked{opacity:.55;filter:saturate(.65)}
.inapp-card.is-locked:hover{opacity:.62}

/* Avatar catalogue + the three chat-button styles. */
.inapp-face-group{margin:0 0 12px}
.inapp-face-group h5{margin:0 0 8px;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;opacity:.6}
.inapp-face-row{display:flex;gap:10px;flex-wrap:wrap}
.inapp-face{display:grid;gap:6px;justify-items:center;padding:9px 8px;min-width:82px;
  border:1px solid var(--inapp-line);border-radius:14px;background:var(--inapp-surface);
  color:inherit;font:inherit;font-size:.7rem;cursor:pointer}
.inapp-face:hover{border-color:rgba(23,26,53,.28)}
.inapp-face[aria-pressed="true"]{border-color:var(--inapp-accent);background:var(--inapp-accent-soft)}
.inapp-face img{width:44px;height:44px;border-radius:50%;display:block}
.inapp-launchers{display:flex;gap:10px;flex-wrap:wrap}
.inapp-launcher{display:grid;gap:8px;justify-items:center;padding:12px 14px;min-width:104px;
  border:1px solid var(--inapp-line);border-radius:14px;background:var(--inapp-surface);
  cursor:pointer;font-size:.76rem}
.inapp-launcher input{position:absolute;opacity:0;pointer-events:none}
.inapp-launcher.on{border-color:var(--inapp-accent);background:var(--inapp-accent-soft)}
.inapp-launcher-preview{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
  background:var(--navy);border:2px solid #fff;font-size:1.2rem;overflow:hidden;box-shadow:0 0 0 1px var(--inapp-line)}
.inapp-launcher-preview img{width:100%;height:100%;object-fit:cover;display:block}
.inapp-launcher-preview.is-name{width:auto;min-width:48px;height:34px;padding:0 10px;border-radius:99px;
  background:var(--grad);color:#fff;font-size:.64rem;font-weight:700}
.inapp-launcher-preview.is-icon{background:var(--grad);color:#fff}

/* One choice per line, the switch on the thing it changes. */
.inapp-choice{display:flex;align-items:center;gap:14px;padding:12px 0;
  border-bottom:1px solid var(--inapp-line-soft);cursor:pointer}
.inapp-choice:last-of-type{border-bottom:0}
.inapp-choice.is-off{opacity:.55}
.inapp-choice-copy{display:grid;gap:3px;flex:1;min-width:0}
.inapp-choice-copy b{font-size:.88rem}
.inapp-choice-copy .muted{font-size:.77rem;line-height:1.4}
.inapp-choice-note{font-size:.74rem;color:var(--inapp-note)}
.inapp-choice input{width:20px;height:20px;flex:0 0 auto;accent-color:var(--inapp-check)}

/* What is already connected, read-only, for the price of one glance. */
.inapp-connected-list{display:grid;gap:8px}
.inapp-connected{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 12px;
  border:1px solid var(--inapp-line);border-radius:12px;background:var(--inapp-surface);font-size:.82rem}
.inapp-connected .muted{font-size:.74rem;word-break:break-all}
.inapp-app-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 0;
  border-bottom:1px solid var(--inapp-line-soft)}
.inapp-app-row:first-child{padding-top:0}

/* ----------------------------------------------- Business Builder blocks ---- */
/* The builder is long; the parts somebody rarely touches start folded. */
.builder-block{
  border:1px solid var(--inapp-line);
  border-radius:14px;
  background:var(--inapp-surface);
  margin:12px 0;
  overflow:hidden;
}
.builder-block>summary{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px 14px;cursor:pointer;list-style:none;font-size:.9rem;
}
.builder-block>summary::-webkit-details-marker{display:none}
.builder-block>summary:hover{background:var(--inapp-surface-hover)}
.builder-block>summary .muted{font-size:.74rem;font-weight:400}
.builder-block[open]>summary{border-bottom:1px solid var(--inapp-line-soft)}
.builder-block-body{padding:12px 14px 4px}

/* ----------------------------------- Ella in mobile app: category cards ---- */
/* One size for every card: icon, name, one line, state, action. The long
   explanation belongs in the drawer, not in a card that grows taller than the
   one beside it. */
.inapp-card{
  display:flex;flex-direction:column;gap:10px;
  min-height:186px;height:100%;padding:16px;
}
.inapp-card-head{display:flex;align-items:center;gap:10px;min-width:0}
.inapp-card-icon{
  display:grid;place-items:center;flex:0 0 auto;width:40px;height:40px;border-radius:13px;
  font-size:1.15rem;background:var(--inapp-accent-soft);border:1px solid var(--inapp-accent-line);
}
.inapp-card-head h3{
  margin:0;font-size:.95rem;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.inapp-card-line{
  margin:0;font-size:.78rem;line-height:1.45;color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  min-height:3.3em;
}
.inapp-card-state{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.inapp-card-state .pill{font-size:.7rem;padding:3px 8px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inapp-card-action{margin-top:2px}
.inapp-card-action .btn{width:100%;padding:8px 12px;font-size:.82rem}
.inapp-pill.warn{color:var(--inapp-warn-fg);background:var(--inapp-warn-bg);border-color:var(--inapp-warn-line)}
.inapp-drawer-state{display:flex;gap:8px;margin-bottom:10px}

/* ------------------------------------------- Ella in mobile app: the menu --- */
.inapp-subhead{
  font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;font-weight:700;
  color:var(--inapp-subhead);margin:0 0 8px;
}
.inapp-platforms{display:flex;gap:10px;flex-wrap:wrap}
.inapp-platform{
  display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border-radius:12px;
  border:1px solid var(--inapp-line);background:var(--inapp-surface);
  cursor:pointer;font-size:.84rem;font-weight:600;
}
.inapp-platform:hover{border-color:rgba(23,26,53,.28)}
.inapp-platform input{width:18px;height:18px;accent-color:var(--inapp-check)}
.inapp-platform:has(input:checked){border-color:var(--inapp-accent-line);background:var(--inapp-accent-soft)}
.inapp-knowledge-line{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:12px;padding:10px 12px;border-radius:12px;
  border:1px solid var(--inapp-line);background:var(--inapp-surface);
}

/* ------------------------------------ Ella in mobile app: client activity --- */
/* A strip that runs across, not a page that runs down: the owner reads the
   numbers and the conversations left to right and stops when they are done. */
.inappc-head .pill{font-size:.72rem}
.inappc-strip{
  display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;
  padding:2px 2px 12px;margin:0 -2px 14px;scroll-snap-type:x proximity;
  scrollbar-width:thin;
}
.inappc-stat{
  flex:0 0 auto;min-width:150px;scroll-snap-align:start;
  display:grid;gap:4px;padding:14px 16px;border-radius:16px;
  border:1px solid var(--inapp-line);background:var(--inapp-surface);
}
.inappc-stat b{font-size:1.35rem;line-height:1.1;font-weight:800}
.inappc-stat span{font-size:.72rem;color:var(--ink-2);letter-spacing:.02em}
.inappc-convos{
  display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;
  padding:12px 2px 4px;margin:0 -2px;scroll-snap-type:x proximity;scrollbar-width:thin;
}
.inappc-convo{
  flex:0 0 250px;scroll-snap-align:start;display:grid;gap:8px;text-align:left;
  padding:14px;border-radius:16px;border:1px solid var(--inapp-line);
  background:var(--inapp-surface);color:inherit;font:inherit;cursor:pointer;
  transition:border-color .16s ease, transform .16s ease;
}
.inappc-convo:hover{border-color:var(--inapp-accent-line);transform:translateY(-2px)}
.inappc-convo-top{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.inappc-convo-top b{font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inappc-convo-top .muted{font-size:.7rem;white-space:nowrap}
.inappc-convo-text{
  font-size:.8rem;line-height:1.45;color:var(--ink-2);min-height:2.9em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.inappc-convo-foot{font-size:.7rem;color:var(--ink-2)}
.inappc-thread{border:1px solid var(--inapp-line);border-radius:16px;padding:14px}
.inappc-thread-body{display:flex;flex-direction:column;gap:8px;max-height:360px;overflow:auto}
.inappc-msg{max-width:82%;padding:8px 12px;border-radius:12px;font-size:.84rem;line-height:1.45}
.inappc-msg.them{align-self:flex-start;background:var(--inapp-bubble-a-bg);border:1px solid var(--inapp-bubble-a-line)}
.inappc-msg.her{align-self:flex-end;background:var(--inapp-bubble-b-bg);border:1px solid var(--inapp-bubble-b-line)}
@media (max-width:760px){
  .inappc-convo{flex-basis:78vw}
  .inappc-stat{min-width:42vw}
}

/* ---------------------------------- Ella in mobile app: form + live phone --- */
/* The configuration runs down the left; the phone sits on the right, high up and
   as large as the window allows, so a change is answered on screen before it is
   saved. */
.inapp-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,470px);gap:18px;align-items:start}
.inapp-menu{min-width:0}
.inapp-rail{position:sticky;top:72px;min-width:0}
.inapp-rail-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:0 0 8px}
.inapp-rail-head b{font-size:.92rem}
.inapp-rail-head .muted{font-size:.74rem}
@media (max-width:1100px){
  .inapp-layout{grid-template-columns:minmax(0,1fr)}
  .inapp-rail{position:static;order:-1}
  .inapp-rail .ipa-phone{margin:0 auto}
}