/* ─────────────────────────────────────────────────────────────────────────────
   theme.css — THE shared design-token layer (systemic-check #21, v351).
   One source for the palette, font stacks, and the radius/space/shadow scales.
   Linked by every app page BEFORE its own <style>, so page-local rules still win.

   Structure (why the light palette appears twice):
     :root                       → LIGHT defaults + the theme-agnostic scales
     @media (prefers-color-scheme: dark) :root
                                 → DARK for ATTRIBUTE-LESS pages (the public share
                                   landing follows the OS; it has no toggle)
     html[data-theme="light"] / html[data-theme="dark"]
                                 → the app pages: the in-app toggle sets the
                                   attribute pre-paint and must beat the OS media.
   Values are the room-ui canon (docs/style-guide.html). Page-specific tokens
   (admin vendor hues, builder --red/--yellow, seen --gold, layout dims) stay in
   their own page. The md-viewers deliberately keep their own reading palette
   (a dedicated persona viewer is planned) — they do not link this file yet.
   ───────────────────────────────────────────────────────────────────────────── */

:root{
  /* font stacks — Latin primaries + the CJK cascade; the final generic MUST stay
     sans-serif (Android resolves a trailing `serif` to Song-style Noto Serif CJK) */
  --serif:'Source Serif 4',Georgia,'PingFang SC','Microsoft YaHei','Noto Sans CJK SC','Noto Sans SC',system-ui,sans-serif;
  --sans:'Inter','PingFang SC','Microsoft YaHei','Noto Sans CJK SC','Noto Sans SC',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'PingFang SC','Microsoft YaHei',monospace;

  /* scales (theme-agnostic; ADDITIVE — components adopt as they're touched, #22+) */
  --radius-s:8px; --radius-m:10px; --radius-l:12px; --radius-xl:16px; --radius-pill:999px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  /* avatar scale (#27) — xs inline/byline · s row/card · m writer/browser · l profile head · xl Me hero */
  --av-xs:24px; --av-s:30px; --av-m:40px; --av-l:64px; --av-xl:84px;
  --shadow-1:0 3px 12px rgba(0,0,0,.12);
  --shadow-2:0 10px 30px rgba(0,0,0,.16);
  --shadow-3:0 24px 60px rgba(0,0,0,.22);

  /* LIGHT (default — attribute-less pages start here) */
  --bg:#F0EEE6; --surface:#F7F5EE; --surface-2:#E9E6DC; --ink:#20201D; --muted:#6E6A60; --line:#D9D5C8;
  --coral:#CC785C; --coral-soft:#F2DFD6; --slate:#5F7186; --slate-soft:#DDE3EA;
  --toast-bg:#5C574E; --toast-fg:#F3F1EA; --toast-cta:#EDB49E; --toast-muted:#C9C4B8; --toast-bd:rgba(0,0,0,.16); --toast-sh:0 4px 16px rgba(0,0,0,.12);   /* the softened toast pill — warm taupe, was a near-black inverted-ink slab */
  --green:#5E8B6E; --green-soft:#DBE7DC; --gold:#A9802F; --gold-soft:#ECE2C9;
  --teal:#4C8AAB; --teal-soft:#DCEAF0; --lilac:#8579A8; --lilac-soft:#E6E1EE; --plum:#8C6E96; --plum-soft:#E9DEEC; --rose:#C0708A; --rose-soft:#F2DEE5; --drawer:#EFEADF;
  --seat-0:#CC785C; --seat-0-soft:#F2DFD6; --seat-1:#4C8AAB; --seat-1-soft:#DCEAF0; --seat-2:#5E8B6E; --seat-2-soft:#DBE7DC; --seat-3:#9E6593; --seat-3-soft:#EFDCEC; --seat-4:#A9802F; --seat-4-soft:#ECE2C9; --seat-5:#5F7186; --seat-5-soft:#DDE3EA; --seat-6:#7E78B5; --seat-6-soft:#E3E0F0; --seat-7:#C0708A; --seat-7-soft:#F2DEE5;
  --egg:#8A867B; --egg-soft:#E7E4DB; --egg-glow:rgba(138,134,123,.18);
  --sk:#E3E0D4; --sk-shine:rgba(255,255,255,.6);
}

/* DARK for attribute-less pages (the share landing follows the OS) */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#1C1B18; --surface:#26241F; --surface-2:#211F1B; --ink:#ECE9E0; --muted:#9A9488; --line:#3A372F;
    --coral:#E0917A; --coral-soft:#382A24; --slate:#92A6BC; --slate-soft:#232C34;
  --toast-bg:#C6C2B6; --toast-fg:#2B2925; --toast-cta:#9A4E32; --toast-muted:#5F5B52; --toast-bd:rgba(0,0,0,.10); --toast-sh:0 6px 18px rgba(0,0,0,.38);   /* the softened toast pill — quiet bone, was a near-white inverted-ink slab */
    --green:#8FB59A; --green-soft:#222F27; --gold:#D6AE63; --gold-soft:#322B1C;
    --teal:#82A8C2; --teal-soft:#1E2A31; --lilac:#BBB2D0; --lilac-soft:#272431; --plum:#B49EC0; --plum-soft:#2B2430; --rose:#CE93A4; --rose-soft:#33242A; --drawer:#211F1A;
    --seat-0:#E0917A; --seat-0-soft:#382A24; --seat-1:#82A8C2; --seat-1-soft:#1E2A31; --seat-2:#8FB59A; --seat-2-soft:#222F27; --seat-3:#C495BC; --seat-3-soft:#2C2430; --seat-4:#D6AE63; --seat-4-soft:#322B1C; --seat-5:#92A6BC; --seat-5-soft:#232C34; --seat-6:#B0AAD6; --seat-6-soft:#232232; --seat-7:#CE93A4; --seat-7-soft:#33242A;
    --egg:#928D81; --egg-soft:#2C2A25; --egg-glow:rgba(146,141,129,.16);
    --sk:#322F29; --sk-shine:rgba(255,255,255,.07);
  }
}

/* the app toggle — the data-theme attribute is set pre-paint and beats the OS */
html[data-theme="light"]{
  --bg:#F0EEE6; --surface:#F7F5EE; --surface-2:#E9E6DC; --ink:#20201D; --muted:#6E6A60; --line:#D9D5C8;
  --coral:#CC785C; --coral-soft:#F2DFD6; --slate:#5F7186; --slate-soft:#DDE3EA;
  --toast-bg:#5C574E; --toast-fg:#F3F1EA; --toast-cta:#EDB49E; --toast-muted:#C9C4B8; --toast-bd:rgba(0,0,0,.16); --toast-sh:0 4px 16px rgba(0,0,0,.12);   /* the softened toast pill — warm taupe, was a near-black inverted-ink slab */
  --green:#5E8B6E; --green-soft:#DBE7DC; --gold:#A9802F; --gold-soft:#ECE2C9;
  --teal:#4C8AAB; --teal-soft:#DCEAF0; --lilac:#8579A8; --lilac-soft:#E6E1EE; --plum:#8C6E96; --plum-soft:#E9DEEC; --rose:#C0708A; --rose-soft:#F2DEE5; --drawer:#EFEADF;
  --seat-0:#CC785C; --seat-0-soft:#F2DFD6; --seat-1:#4C8AAB; --seat-1-soft:#DCEAF0; --seat-2:#5E8B6E; --seat-2-soft:#DBE7DC; --seat-3:#9E6593; --seat-3-soft:#EFDCEC; --seat-4:#A9802F; --seat-4-soft:#ECE2C9; --seat-5:#5F7186; --seat-5-soft:#DDE3EA; --seat-6:#7E78B5; --seat-6-soft:#E3E0F0; --seat-7:#C0708A; --seat-7-soft:#F2DEE5;
  --egg:#8A867B; --egg-soft:#E7E4DB; --egg-glow:rgba(138,134,123,.18);
  --sk:#E3E0D4; --sk-shine:rgba(255,255,255,.6);
}
html[data-theme="dark"]{
  --bg:#1C1B18; --surface:#26241F; --surface-2:#211F1B; --ink:#ECE9E0; --muted:#9A9488; --line:#3A372F;
  --coral:#E0917A; --coral-soft:#382A24; --slate:#92A6BC; --slate-soft:#232C34;
  --toast-bg:#C6C2B6; --toast-fg:#2B2925; --toast-cta:#9A4E32; --toast-muted:#5F5B52; --toast-bd:rgba(0,0,0,.10); --toast-sh:0 6px 18px rgba(0,0,0,.38);   /* the softened toast pill — quiet bone, was a near-white inverted-ink slab */
  --green:#8FB59A; --green-soft:#222F27; --gold:#D6AE63; --gold-soft:#322B1C;
  --teal:#82A8C2; --teal-soft:#1E2A31; --lilac:#BBB2D0; --lilac-soft:#272431; --plum:#B49EC0; --plum-soft:#2B2430; --rose:#CE93A4; --rose-soft:#33242A; --drawer:#211F1A;
  --seat-0:#E0917A; --seat-0-soft:#382A24; --seat-1:#82A8C2; --seat-1-soft:#1E2A31; --seat-2:#8FB59A; --seat-2-soft:#222F27; --seat-3:#C495BC; --seat-3-soft:#2C2430; --seat-4:#D6AE63; --seat-4-soft:#322B1C; --seat-5:#92A6BC; --seat-5-soft:#232C34; --seat-6:#B0AAD6; --seat-6-soft:#232232; --seat-7:#CE93A4; --seat-7-soft:#33242A;
  --egg:#928D81; --egg-soft:#2C2A25; --egg-glow:rgba(146,141,129,.16);
  --sk:#322F29; --sk-shine:rgba(255,255,255,.07);
}

/* ── #22 · the ONE close/back treatment for dialogs, sheets, drawers (v352) ────
   .dialog-x        absolute top-right (positioned parent) — 40×40 hit box, 20px ×
   .dialog-x.flow   flex-bar placement (profile/Me/library headers, zoom bars) — 34×34
   .dialog-back     the ‹ back chevron, same box as .flow
   The image-lightbox keeps its own circular dark × (.lb-x) by design. */
.dialog-x{position:absolute; top:12px; right:12px; z-index:2; width:40px; height:40px;
  display:flex; align-items:center; justify-content:center; appearance:none; border:0;
  background:transparent; color:var(--muted); font-size:20px; line-height:1; padding:0; cursor:pointer}
.dialog-x:hover{color:var(--coral)}
.dialog-x.flow{position:static; width:34px; height:34px; flex:0 0 auto}
.dialog-back{width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  appearance:none; border:0; background:transparent; color:var(--muted); line-height:0; padding:0;
  cursor:pointer; flex:0 0 auto}
.dialog-back:hover{color:var(--coral)}

/* ── #22b · the DISMISSAL GRAMMAR (gap 10, v516) — where the glyph sits, by surface type.
   Native muscle memory differentiates: a PAGE goes back top-left; a TASK DIALOG cancels
   top-left and COMMITS top-right; only OVERLAYS close top-right; SHEETS swipe down.
   THE CONTRACT: the DEFAULT above is unchanged — x stays top-right — so any surface that
   does not opt in cannot shift. A surface opts in by adding .task (or .hide-narrow) to its
   own .dialog-x. Every rule here is PHONE-ONLY: in wide mode x top-right is fully correct
   (that is where a window closes) for every type, so desktop is byte-identical to v515. */
@media(max-width:760px){
  .dialog-x.task{left:12px; right:auto}          /* task dialog — dismissal is a form of going back */
  .dialog-x.flow.task{order:-1}                  /*   …the flow variant sits in a flex bar: first child */
  .hide-narrow{display:none !important}          /* a PAGE that also carried an x — the ‹ is the only door */
}
/* ⚠ PAIRING RULE: if the header also carries a TITLE, .task/.corner MUST be paired with .hbar
   below. Absolute glyphs over a flowing title is exactly the v516 bug — the title has no width
   to shrink into and the glyph lands on top of it. Bare .task is only safe on a titleless head. */
/* the ‹ in a block .modal-head, where .dialog-back (a flow element) can't reach. A surface that
   reads as a PAGE on the phone but must stay a desktop window shows BOTH, one per breakpoint:
   the x carries .hide-narrow, this carries the mirror. Same close fn behind each. */
.dialog-back.corner{position:absolute; top:12px; left:12px; z-index:2; width:40px; height:40px}
@media(min-width:761px){ .dialog-back.corner{display:none} }   /* wide keeps its x top-right */
/* the restored COMMIT SLOT — a task dialog's real verb, top-right in the header, in the slot
   the x vacates. Text button, not a pill: it lives in chrome, not in the content. Geometry
   MIRRORS .dialog-x exactly (absolute by default for the block .modal-head; .flow for the
   flex bars), so the two are interchangeable corners rather than two different systems. */
.dialog-commit{position:static; appearance:none; border:0; cursor:pointer; flex:0 0 auto;
  background:var(--coral); color:#fff; border-radius:var(--radius-m, 8px); padding:7px 13px;
  font-family:var(--sans); font-size:13.5px; font-weight:600; line-height:1.25;
  -webkit-tap-highlight-color:transparent; white-space:nowrap}
.dialog-commit:disabled{background:var(--line); color:var(--muted); cursor:default}
.dialog-commit:not(:disabled):active{filter:brightness(.93)}
.dialog-commit:not(:disabled):hover{filter:brightness(1.04)}
@media(min-width:761px){ .dialog-commit{display:none} }   /* wide keeps its footer buttons — unchanged */

/* ── the HEADER BAR (v517) · ✕ — title — CTA on ONE row ────────────────────────────────────
   v516 shipped the ✕ and the CTA as ABSOLUTE corners over a still-flowing title, which on a
   real phone overlapped it, sat off its baseline, and left the title no width to shrink into
   (owner-caught on device — the emulator never showed it because the mock had always drawn a
   flex BAR, and the code hadn't built one).
   The fix needs no markup surgery on any surface: flex `order` composes the bar out of the
   head's EXISTING children. The glyphs go static and take the ends, the title flexes and
   truncates between them, and everything else — kicker, sub, search, sort — wraps below.
   Opt in by putting .hbar on the head; phone-only, like the rest of #22b. */
@media(max-width:760px){
  .modal-head.hbar{display:flex; flex-wrap:wrap; align-items:center; column-gap:10px}
  .modal-head.hbar>*{flex:0 0 100%; order:4}                    /* default: its own row, under the bar */
  .modal-head.hbar>.modal-kicker{order:0}                       /* the kicker rides ABOVE the bar */
  .modal-head.hbar>.dialog-x.task,
  .modal-head.hbar>.dialog-back.corner{position:static; order:1; flex:0 0 auto;
    top:auto; left:auto; right:auto; width:32px; height:32px; margin-left:-7px}
  .modal-head.hbar>.modal-title{order:2; flex:1 1 0; min-width:0; margin:0; font-size:17.5px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis}   /* the ONLY thing allowed to shrink */
  .modal-head.hbar>.dialog-commit{order:3; flex:0 0 auto}
  .modal-head.hbar>.modal-sub{margin-top:6px}
  /* a flex bar that already exists in markup (the library overlay) only needs its title to yield */
  .lib-htop>.lib-title{min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
}
/* the footer verbs a header commit replaces — .hide-narrow above does the hiding (it is
   !important because these footers carry display:flex/inline-flex of their own). */

/* ── #23 · the ONE search-box chrome (v353) — built by PersonaSearch.attachChrome:
   a clear-× at the input's right edge + the "Try searching" focus panel. Shared by
   room-ui's three pickers, the console's Personas view, and the Studio browser. */
.search-box{position:relative; display:block}
.search-box>input{padding-right:34px}
.search-x{position:absolute; top:50%; right:6px; transform:translateY(-50%); appearance:none; border:0; background:transparent;
  color:var(--muted); font-size:18px; line-height:1; cursor:pointer; padding:4px 7px; display:none; z-index:2}
.search-x:hover{color:var(--coral)}
.search-x.on{display:block}
.ps-suggest{margin-top:13px}
.ps-lab{display:block; font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:10px}
.ps-terms{display:flex; flex-wrap:wrap; gap:10px 18px}
.ps-term{-webkit-tap-highlight-color:transparent; cursor:pointer; appearance:none; border:0; background:transparent; padding:0;
  font-family:var(--sans); font-size:13.5px; color:var(--ink); display:inline-flex; align-items:center; gap:6px; white-space:nowrap; transition:color .12s}
.ps-term:hover{color:var(--coral)}
.ps-term svg{opacity:.5; flex:0 0 auto}

/* ── #32 · THE ONE SCROLLBAR (v525) ───────────────────────────────────────────────────────
   A thin floating pill in the soft --line colour (→ --muted on hover), a transparent track
   that blends into the surface, and no arrow buttons. Theme-driven, so it follows light/dark
   for free. This lived only in room-ui, which left every OTHER page — most visibly the Studio,
   a separate document inside an iframe — with the platform's default chunky grey bar sitting
   against our chrome (owner-caught on desktop). Moving it to the shared layer is the whole fix:
   every page that links this file now matches, embedded frames included. Pages keep only their
   own EXCEPTIONS (room-ui still hides the bar on its in-message scrollers on narrow). */
*{ scrollbar-width:thin; scrollbar-color:var(--line) transparent; }            /* Firefox */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--line); border:2px solid transparent;
  background-clip:padding-box; border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:var(--muted); }
::-webkit-scrollbar-button{ display:none; width:0; height:0; }                 /* drop the up/down arrows */
::-webkit-scrollbar-corner{ background:transparent; }

/* ── #31 · NO OS TEXT-SELECTION ON TOUCH (v522) ───────────────────────────────────────────
   An accidental selection on a phone summons chrome the page cannot touch: Android Chrome
   raises a bottom bar (Translate · Search · Copy), iOS pops its callout. Neither can be
   styled, moved or dismissed by us — the ONLY lever the web has is not letting a selection
   start in the first place (the finding behind docs/text-selection.html: native selection UI
   is unsuppressable, so we gave it up and built our own).
   room-ui had already done this for its chat scroller; the Studio never did, so a tap on a
   persona card raised Chrome's bar (owner-caught on Android). Making it the APP-WIDE default
   is the fix — every page that links this file inherits it, including the embedded builder.
   THREE deliberate choices:
   • COARSE POINTERS ONLY — a mouse keeps native selection everywhere. Desktop is untouched.
   • NOT !important — every existing opt-in still wins on ordinary specificity (a code box's
     user-select:all, the text sheet's own rules). Nothing already working gets overridden.
   • Fields and READING surfaces opt back in. Text you are meant to copy must stay copyable;
     .sel-text is the hook for anything else that needs it. On touch, partial-text selection
     in the room lives in the double-tap text sheet, which owns its own selection UI. */
@media (pointer:coarse){
  body{-webkit-user-select:none; user-select:none; -webkit-touch-callout:none}
  input, textarea, [contenteditable], [contenteditable] *, .sel-text, .sel-text *{
    -webkit-user-select:text; user-select:text; -webkit-touch-callout:default}
}

/* ── #30 · the ONE toast (v354; softened v418) — a warm taupe pill (was a near-black/near-white
   inverted-ink slab: --ink/--bg was too high-contrast against the cream page); bottom-centre;
   room + console share it. Colours ride the --toast-* tokens so both themes soften in lockstep;
   the CTA counter-inverts via --toast-cta. The .lite variant (notice toasts) still overrides to a
   surface pill in room-ui. */
.toast{position:fixed; left:50%; bottom:30px; transform:translateX(-50%) translateY(8px); z-index:300;
  background:var(--toast-bg); color:var(--toast-fg); border:0.5px solid var(--toast-bd); font-family:var(--sans); font-size:13px; padding:10px 16px;
  border-radius:22px; box-shadow:var(--toast-sh); opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s; max-width:80vw; text-align:center}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* ── #28 · the pill family standard (v356) — bordered transparent pill, coral when .on;
   radius = --radius-pill, padding 4px 12px, 12px text. The named chips (.chip/.pb-pill/
   .sd-chip/.wc-chip/.fb-tag) follow this spec in their own files; .lib-mine (the
   owner-filter pill on the Studio browser) lives here. Uppercase micro-label tracking
   is two steps: .06em dense · .12em kicker. Builder status chips are a deliberate variant. */
.lib-mine{margin-top:9px; font-family:var(--sans); font-size:12px; font-weight:600; -webkit-tap-highlight-color:transparent;
  border:1px solid var(--line); background:transparent; color:var(--muted); border-radius:var(--radius-pill); padding:4px 12px; cursor:pointer}
.lib-mine.on{border-color:var(--coral); color:var(--coral); background:var(--coral-soft)}

/* ── #29 · the ONE popover engine (v357) — kebab/row/card menus share this base; each page
   keeps only its z-index (the ladders differ) and its variants (.hz, .danger, .sep, hovers).
   The composer's bottom-anchored model-menu and the md-viewers stay variants by design. */
.popmenu, .rowmenu, .cardmenu{position:fixed; min-width:150px; max-width:240px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-l);
  box-shadow:var(--shadow-2); padding:5px; display:none; font-family:var(--sans)}
.popmenu.open, .rowmenu.open, .cardmenu.open{display:block}
.popmenu button, .rowmenu button, .cardmenu button{display:flex; align-items:center; gap:9px; width:100%;
  text-align:left; appearance:none; border:0; background:transparent; color:var(--ink); cursor:pointer;
  font-size:13.5px; padding:8px 11px; border-radius:var(--radius-s); font-family:inherit}

/* ── #25 · the ONE dialog scaffold (v358) — the scrim + the 580 card, shared by the
   main dialogs (.modal), the persona profile (.vp), and the Me sheet (.mep); the
   survey/confirm minis share the card VISUAL (own width/padding). Pages keep only
   deltas: z-ladder (80 · vp 84 · mep 68 · pb 62), heights, the sheet's --bg fill.
   Full-screen-on-narrow + hero-collapse stay with their owners in room-ui. */
.modal-scrim, .vp, .mep{position:fixed; inset:0; background:rgba(0,0,0,.40); opacity:0; visibility:hidden;
  transition:opacity .18s; display:grid; place-items:center; padding:20px}
.modal-scrim.open, .vp.open, .mep.open{opacity:1; visibility:visible}
.modal, .vp-card, .mep-card, .survey-card, .vc-card{background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-xl); box-shadow:var(--shadow-3); transform:translateY(10px) scale(.99); transition:transform .18s}
.modal, .vp-card, .mep-card{width:580px; max-width:100%; display:flex; flex-direction:column}
.modal-scrim.open .modal, .vp.open .vp-card, .mep.open .mep-card,
.modal-scrim.open .survey-card, .modal-scrim.open .vc-card{transform:none}

/* ── #26 · the TWO button languages (v359) — decided: PILL = floating CTA · RECT = in-dialog action.
   The rect pair lives here once (.btn-primary/.btn-ghost; the console's .adm-btn IS the ghost and
   its .primary modifier IS the primary). The coral CTA base is shared by the named pills below —
   each site keeps only its size/context. Variants by design: .vc-cancel (ghost pill), .vc-danger
   (red confirm), round icon-buttons (share's composer .go), the .new-nudge floating pill. */
.btn-ghost, .adm-btn{appearance:none; border:1px solid var(--line); background:transparent; color:var(--muted);
  border-radius:var(--radius-m); padding:9px 16px; cursor:pointer; font-family:var(--sans); font-size:13.5px}
.btn-ghost:hover, .adm-btn:hover{border-color:var(--coral); color:var(--coral)}
.btn-ghost:disabled, .adm-btn:disabled{opacity:.45; cursor:not-allowed}
.btn-primary, .adm-btn.primary{appearance:none; border:1px solid var(--coral); background:var(--coral); color:#fff;
  border-radius:var(--radius-m); padding:9px 18px; cursor:pointer; font-family:var(--sans); font-size:13.5px; font-weight:600}
.btn-primary:disabled{opacity:.45; cursor:not-allowed}
.cta-pill, .vp-chat, .d-chat, .dv-notif, .sel-done, .vcp-post, .sg-btn, .sd-go, .vc-go{appearance:none; cursor:pointer;
  border:1px solid var(--coral); background:var(--coral); color:#fff; border-radius:var(--radius-pill);
  font-family:var(--sans); font-weight:600; -webkit-tap-highlight-color:transparent}