/* Faye chat — app.css (polish pass 2026-11-10)
   Served as a real asset via the ASSETS binding; no longer inlined in the
   worker template literal. Design language: dark, violet->pink gradient; avatar bubbles sit on white, like Muse
   accent, centered header cluster, floating pill composer. */
:root {
  color-scheme: dark;
  --bg: #0b0b0f;
  --card: #101016;
  /* Her bubble (round 3, Chris): a defined mid-grey fill, Muse-app
     style, so her text is always easily visible — #f5f5f7 ink on this
     fill measures ≈10.4:1, far past the 4.5:1 floor, and the fill now
     clearly separates from the #101016 card behind it (was #23232e,
     which read as nearly bare background). */
  --bubble-her: #3a3a47;
  --ink: #f5f5f7;
  --ink-2: #a7a7b5;
  --ink-3: #8d8d9c;
  --ink-4: #5f5f70;
  --line: #262633;
  --grad: linear-gradient(45deg, #7a3cff, #e13d8f);
  --grad-muted: linear-gradient(45deg, #5b4390, #a04a76);
  /* unified motion system (iteration 1) */
  --ease: cubic-bezier(.22,.9,.28,1);
  --ease-io: cubic-bezier(.45,0,.55,1);
  --dur-1: .12s;
  --dur-2: .18s;
  --dur-3: .3s;
  --dur-4: .35s;
  /* spacing scale (iteration 2) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: radial-gradient(1100px 700px at 50% -8%, #1d1529 0%, rgba(11,11,15,0) 60%), var(--bg);
  color: var(--ink);
  display: flex; justify-content: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(225,61,143,.38); }
button, a, textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid rgba(140,90,255,.6); outline-offset: 2px; border-radius: 6px; }

.phone { position: relative; width: 100%; max-width: 560px; height: 100dvh; display: flex; flex-direction: column; background: var(--card); }
@media (min-width: 560px) {
  body { align-items: center; }
  .phone { height: min(1020px, calc(100dvh - 40px)); border-radius: 28px; overflow: hidden; box-shadow: 0 24px 70px rgba(0,0,0,.55), 0 0 0 1px #23232f; }
}

/* --- header: centered avatar, name below it, no bar --- */
header { position: absolute; top: 0; left: 0; right: 0; z-index: 5; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: var(--sp-3) var(--sp-4) 10px; background: none; }
/* Local halo only: a soft scrim hugs the avatar + name cluster so her
   identity stays legible while messages scroll to the very top edge of
   the screen everywhere else. (The old full-width gradient band read as
   a solid black banner on phones — removed 2026-11-11.) */
header::before { content: ""; position: absolute; left: 50%; top: 0; width: 300px; height: 172px; transform: translateX(-50%); background: radial-gradient(150px 86px at 50% 58px, rgba(10,10,16,.8) 0%, rgba(10,10,16,.45) 55%, rgba(10,10,16,0) 100%); pointer-events: none; }
.avatarWrap { position: relative; flex: none; }
.who { position: relative; }
.who .name { text-shadow: 0 1px 10px rgba(0,0,0,.85), 0 0 3px rgba(0,0,0,.9); }
.avatarWrap video, .welcome video { transition: opacity .2s ease; }
.avatarWrap video.swap, .welcome video.swap { opacity: 0; }
/* Header avatar 64px -> 92px (round 3, Chris: "make it a bit bigger
   like yours is at the top" — the Muse app header scale). The larger
   frame also serves motion visibility: facial movement (the blink in
   the re-cut idle) reads far better at 92px than it did at 64px. */
.avatarWrap video, .avatarWrap img { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; display: block; background: transparent; box-shadow: 0 0 0 1px #2b2b3c, 0 4px 14px rgba(0,0,0,.4); }
.who { line-height: 1.3; text-align: center; }
.who .name { font-weight: 650; font-size: 16.5px; letter-spacing: .01em; transition: opacity var(--dur-3) var(--ease); }
.who .name.busy { animation: namepulse 1.4s var(--ease-io) infinite; }
@keyframes namepulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* --- thread --- */
#thread {
  flex: 1; overflow-y: auto; padding: 148px var(--sp-4) 128px;
  display: flex; flex-direction: column; gap: var(--sp-3);
  scroll-behavior: smooth; overscroll-behavior: none;
  scrollbar-width: thin; scrollbar-color: #2e2e42 transparent;
  /* Top fade (Chris, 2026-11-11): the MESSAGE TEXT itself fades out as
     it scrolls up toward the top edge — a mask on the scrolling element,
     so the fade zone is fixed to the screen while content travels
     through it. Transparent at the very top, fully opaque by 148px
     (= the thread's top padding, so at rest the first bubble sits fully
     opaque below the header cluster). The stops scaled with the header
     when the avatar grew 64px -> 92px (round 3): the cluster now ends
     at ~141px. The header and composer are siblings, not children —
     they are never masked. */
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0, rgba(0,0,0,.22) 52px, rgba(0,0,0,.6) 99px, #000 148px, #000 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0, rgba(0,0,0,.22) 52px, rgba(0,0,0,.6) 99px, #000 148px, #000 100%);
}
#thread::-webkit-scrollbar { width: 5px; }
#thread::-webkit-scrollbar-track { background: transparent; }
#thread::-webkit-scrollbar-thumb { background: #2e2e42; border-radius: 99px; }

/* --- welcome / empty state --- */
.welcome { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-5) 10px var(--sp-4); text-align: center; transition: opacity var(--dur-3) var(--ease); }
.welcome.pending { opacity: 0; }
.welcome video, .welcome img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; background: transparent; box-shadow: 0 0 0 1px #2b2b3c, 0 12px 36px rgba(0,0,0,.5); }
.welcome .wname { font-weight: 700; font-size: 17.5px; letter-spacing: .005em; }
.welcome .wsub { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); max-width: 270px; }
.starters { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-3); max-width: 320px; }
.starter { background: #1e1e2a; border: 1px solid #33334a; color: #e8e8f0; font-size: 13.5px; padding: 8px 14px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; cursor: pointer; transition: transform var(--dur-1) var(--ease), border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease); }
.starter:hover { border-color: #5a5a78; background: #262636; }
.starter:active { transform: scale(.95); border-color: #5a5a78; background: #262636; }

/* --- in-app webview banner (2026-11-12) --- */
.wv-banner {
  display: flex; align-items: center; gap: 10px;
  margin: 10px 12px 0; padding: 9px 12px;
  background: rgba(38,38,56,.92); border: 1px solid #3d3d5c; border-radius: 14px;
  font-size: 12.5px; line-height: 1.4; color: #d8d8e6;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  animation: fadeUp var(--dur-4) var(--ease) both;
}
.wv-banner span { flex: 1; }
.wv-x {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid #4a4a68; background: #262636; color: #b9b9cc;
  font-size: 12px; line-height: 1; cursor: pointer;
}

/* --- gate card --- */
.gate {
  margin: var(--sp-4) auto; padding: var(--sp-5) var(--sp-4); max-width: 320px; width: calc(100% - 8px);
  background: rgba(27,27,40,.88); backdrop-filter: blur(12px) saturate(1.3); -webkit-backdrop-filter: blur(12px) saturate(1.3);
  border: 1px solid #34344a; border-radius: 22px;
  text-align: center; font-size: 14px; line-height: 1.45; color: #cfcfda;
  display: flex; flex-direction: column; gap: var(--sp-3); align-items: center;
  box-shadow: 0 14px 38px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.02) inset;
  animation: fadeUp var(--dur-4) var(--ease) both;
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.gate > div:first-child { font-weight: 600; font-size: 15px; color: #ececf4; }
#tsbox { min-height: 65px; display: flex; align-items: center; justify-content: center; }
.gate .gmsg { font-size: 12.5px; color: var(--ink-3); min-height: 16px; letter-spacing: .01em; }
#gateRetry { background: var(--grad); border: none; color: #fff; font-weight: 700; font-size: 13.5px; padding: 10px 20px; min-height: 40px; border-radius: 999px; cursor: pointer; box-shadow: 0 4px 14px rgba(225,61,143,.3); transition: transform var(--dur-1) var(--ease), filter var(--dur-2) var(--ease); }
#gateRetry:active { transform: scale(.95); }
#gateRetry:hover { filter: brightness(1.08); }

/* --- messages --- */
.row { display: flex; gap: var(--sp-2); align-items: flex-end; position: relative; }
.row.enter { animation: rise var(--dur-3) var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.row.me { justify-content: flex-end; }
.row.grp { margin-top: -8px; }
.row.grp img.av { visibility: hidden; }
.row img.av { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none; background: transparent; box-shadow: 0 0 0 1px #2b2b3c; }
.bub { max-width: 80%; padding: 10px 14px; border-radius: 20px; font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap; position: relative; box-shadow: 0 2px 8px rgba(0,0,0,.22); }
.her .bub { background: var(--bubble-her); }
.me .bub { background: var(--grad); }
.row.her.tail .bub { border-bottom-left-radius: 6px; }
.row.me.tail .bub { border-bottom-right-radius: 6px; }
.gtime { font-size: 10.5px; color: var(--ink-4); letter-spacing: .02em; margin-top: -8px; }
.gtime.her { margin-left: 36px; }
.gtime.me { text-align: right; margin-right: 2px; }
.gtime.off { display: none; }
/* Rows queued for a progressive reveal stay hidden until their turn. */
.row.revealWait, .gtime.revealWait { display: none; }
/* A reaction chip overhangs its bubble's bottom edge by 9px; when the row
   above the time label carries one, drop the label's negative margin so
   the two never sit on top of each other. */
.row:has(.chip) + .gtime { margin-top: 0; }
.chip { position: absolute; right: -6px; bottom: -9px; background: #2e2e3e; border: 1px solid #3d3d52; border-radius: 12px; font-size: 12px; padding: 1px 6px; z-index: 2; animation: pop .25s var(--ease); }
/* His reaction on her bubble (round 12): same bottom-right corner as
   her chips on his bubbles — straddling the corner, half on, half off
   (the promo slide's heart placement). Tappable: reopens the picker. */
.chip.mine { cursor: pointer; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* No text selection inside the thread (round 12 addendum, from Chris's
   phone): a long-press on her bubble must reach the reaction picker,
   not Android's "Select all / Copy" callout. Scoped to the thread —
   the composer textarea is a sibling, not a child, and the rest of the
   page keeps full selection and its callouts. */
#thread, #thread .bub {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* Reaction picker (round 12): a small floating pill of the fixed emoji
   set, opened by long-press / double-click on her bubble or a tap on
   the existing chip. */
.reactPicker { position: fixed; z-index: 60; display: flex; gap: 2px; align-items: center; background: #262636; border: 1px solid #3d3d52; border-radius: 999px; padding: 5px 7px; box-shadow: 0 10px 30px rgba(0,0,0,.5); animation: pop .18s var(--ease); }
.reactPicker button { background: none; border: 0; font-size: 19px; line-height: 1; padding: 4px 5px; cursor: pointer; border-radius: 999px; color: #b9b9cc; }
.reactPicker button.cur { background: #3a3a52; }
.reactPicker button.rm { font-size: 13px; padding: 4px 7px; }
.receipt { font-size: 10.5px; color: #55555f; text-align: right; padding: 0 6px 2px; margin-top: -8px; letter-spacing: .02em; }
.daysep { align-self: center; text-align: center; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-3); background: #1c1c28; border: 1px solid var(--line); padding: var(--sp-1) var(--sp-3); border-radius: 999px; margin: var(--sp-3) 0 var(--sp-1); }

/* Typing indicator: her bubble with three dots, Muse-style bounce. */
.bub.dots { display: flex; gap: 5px; align-items: center; padding: 15px 16px; }
.bub.dots span { width: 7px; height: 7px; border-radius: 50%; background: #a7a7b5; animation: dotBounce 1.15s var(--ease-io) infinite; }
.bub.dots span:nth-child(2) { animation-delay: .15s; }
.bub.dots span:nth-child(3) { animation-delay: .3s; }
@keyframes dotBounce { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }

/* --- composer --- */
form {
  /* floating composer: hovers over the thread like the Muse app's input,
     bottom-anchored so the auto-grow textarea expands upward */
  position: absolute; left: var(--sp-4); right: var(--sp-4); z-index: 6;
  bottom: calc(14px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  margin: 0;
  padding: 6px 6px 6px 10px;
  border: 1px solid #34344a; border-radius: 26px;
  background: rgba(29,29,40,.82); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 16px 42px rgba(0,0,0,.55), 0 3px 10px rgba(0,0,0,.35);
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
  animation: fadeUp var(--dur-4) var(--ease) both;
}
form:focus-within { border-color: #55557a; box-shadow: 0 12px 34px rgba(0,0,0,.5), 0 0 0 3px rgba(122,60,255,.14); }
.composerRow { display: flex; align-items: flex-end; gap: 8px; }
#attach { width: 40px; height: 40px; flex: none; border: none; border-radius: 50%; background: transparent; color: #a7a7c0; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; transition: color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease); }
#attach svg { display: block; }
#attach:hover:not(:disabled) { color: #fff; }
#attach:active:not(:disabled) { transform: scale(.92); }
#attach:disabled { color: #55556a; cursor: default; }
#attachBar { display: flex; align-items: center; gap: 10px; padding: 2px 2px 0; }
#attachBar[hidden] { display: none; }
#attachThumb { width: 44px; height: 44px; object-fit: cover; border-radius: 10px; border: 1px solid #34344a; flex: none; }
.attachLabel { flex: 1; font-size: 13px; color: #c9c9da; min-width: 0; }
#attachRemove { width: 28px; height: 28px; flex: none; border: none; border-radius: 50%; background: #2c2c3a; color: #e8e8f0; font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.photoTag { font-size: 14px; }
textarea { flex: 1; background: transparent; border: none; padding: 9px 4px 9px 8px; color: var(--ink); font: inherit; font-size: 16px; line-height: 1.4; outline: none; min-width: 0; resize: none; max-height: 120px; overflow-y: auto; scrollbar-width: none; transition: height .15s var(--ease); }
textarea::-webkit-scrollbar { width: 0; height: 0; }
textarea:focus-visible { outline: none; }
textarea::placeholder { color: #83839c; }
textarea:disabled::placeholder { color: #63637c; }
button { font: inherit; }
#send { width: 40px; height: 40px; flex: none; border: none; border-radius: 50%; background: var(--grad-muted); color: #fff; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.3); transition: transform var(--dur-1) var(--ease), filter var(--dur-2) var(--ease), background var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
#send svg { display: block; }
#send.ready { background: var(--grad); box-shadow: 0 4px 14px rgba(225,61,143,.35); animation: sendpop .28s var(--ease); }
@keyframes sendpop { 0% { transform: scale(.86); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
#send:hover:not(:disabled) { filter: brightness(1.09); }
#send:active:not(:disabled) { transform: scale(.92); }
#send:disabled { background: #2c2c3a; color: #55556a; box-shadow: none; cursor: default; animation: none; }

a { color: #ffb7cd; }

/* --- reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  #thread { scroll-behavior: auto; }
  .row, .row.enter, .chip, .reactPicker, .gate, form, #send.ready { animation: none; }
  .starter, #send, #gateRetry, form, .dot, .who .name, textarea { transition: none; }
  .who .name.busy { animation: none; }
}

/* --- account button + sheet + passkey card (auth, 2026-11-11) --- */
#acctBtn { pointer-events: auto; position: absolute; top: 10px; right: 12px; background: rgba(27,27,40,.82); border: 1px solid #34344a; color: var(--ink-2); font-size: 12px; font-weight: 600; letter-spacing: .02em; padding: 6px 12px; min-height: 32px; border-radius: 999px; cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease); }
#joinBtn { pointer-events: auto; position: absolute; top: 10px; left: 12px; background: rgba(27,27,40,.82); border: 1px solid #34344a; color: var(--ink-2); font-size: 12px; font-weight: 600; letter-spacing: .02em; padding: 6px 12px; min-height: 32px; border-radius: 999px; cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease); }
#joinBtn:hover { border-color: #55557a; color: var(--ink); }
#joinBtn:active { transform: scale(.95); }
#joinBtn[hidden] { display: none; }
body.demo #joinBtn { display: none; }
.modalSheet { align-items: center; padding: 18px; }
.modalCard { border-bottom: 1px solid #2c2c40; border-radius: 22px; max-width: 430px; }
#joinClose { background: #1e1e2a; border: 1px solid #33334a; color: var(--ink-2); width: 32px; height: 32px; border-radius: 50%; font-size: 17px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
#joinClose:active { transform: scale(.92); }
#joinGo { text-align: center; text-decoration: none; display: block; }
#acctBtn:hover { border-color: #55557a; color: var(--ink); }
#acctBtn:active { transform: scale(.95); }
.sheet { position: absolute; inset: 0; z-index: 20; background: rgba(5,5,9,.62); display: flex; align-items: flex-end; justify-content: center; }
.sheet[hidden] { display: none; }
.sheetCard { width: 100%; max-height: 88%; overflow-y: auto; background: #14141d; border: 1px solid #2c2c40; border-bottom: none; border-radius: 22px 22px 0 0; padding: 18px 18px calc(20px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: var(--sp-3); box-shadow: 0 -18px 50px rgba(0,0,0,.5); animation: fadeUp var(--dur-4) var(--ease) both; scrollbar-width: thin; scrollbar-color: #2e2e42 transparent; }
.sheetHead { display: flex; align-items: center; justify-content: space-between; }
.sheetTitle { font-weight: 700; font-size: 16.5px; }
#acctClose { background: #1e1e2a; border: 1px solid #33334a; color: var(--ink-2); width: 32px; height: 32px; border-radius: 50%; font-size: 17px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
#acctClose:active { transform: scale(.92); }
#acctBody { display: flex; flex-direction: column; gap: var(--sp-3); }
.acctNote { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.acctEmail { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.acctLabel { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); display: block; margin-bottom: 6px; }
.acctInput { width: 100%; background: #1e1e2a; border: 1px solid #34344a; border-radius: 12px; padding: 12px 14px; color: var(--ink); font: inherit; font-size: 16px; outline: none; transition: border-color var(--dur-2) var(--ease); }
.acctInput:focus { border-color: #55557a; }
.acctHint { font-size: 12px; color: var(--ink-3); margin-top: 6px; }
#otpStepEmail, #otpStepCode { display: flex; flex-direction: column; gap: var(--sp-2); }
#otpStepCode[hidden] { display: none; }
.acctPrimary { background: var(--grad); border: none; color: #fff; font-weight: 700; font-size: 14.5px; padding: 12px 18px; min-height: 44px; border-radius: 999px; cursor: pointer; box-shadow: 0 4px 14px rgba(225,61,143,.3); transition: transform var(--dur-1) var(--ease), filter var(--dur-2) var(--ease); }
.acctPrimary:active { transform: scale(.97); }
.acctPrimary:hover { filter: brightness(1.08); }
.acctGhost { background: #1e1e2a; border: 1px solid #33334a; color: #e8e8f0; font-size: 14px; font-weight: 600; padding: 11px 18px; min-height: 44px; border-radius: 999px; cursor: pointer; transition: transform var(--dur-1) var(--ease), border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease); }
.acctGhost:active { transform: scale(.97); }
.acctGhost:hover { border-color: #5a5a78; background: #262636; }
.acctDanger { background: transparent; border: 1px solid #4a2b3a; color: #ff9dbd; font-size: 14px; font-weight: 600; padding: 11px 18px; min-height: 44px; border-radius: 999px; cursor: pointer; transition: transform var(--dur-1) var(--ease), background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); }
.acctDanger:active { transform: scale(.97); }
.acctDanger.armed { background: rgba(225,61,143,.16); border-color: #e13d8f; color: #ffc2d9; }
.acctMsg { font-size: 13px; line-height: 1.45; color: #ffb7cd; min-height: 18px; }
.privacy { font-size: 12px; line-height: 1.5; color: var(--ink-3); }
.pkcard { margin: var(--sp-2) auto; }
.pkcard[hidden] { display: none; }
.pkcard .pksub { font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.pkrow { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; }
.pkrow button { background: var(--grad); border: none; color: #fff; font-weight: 700; font-size: 13.5px; padding: 10px 18px; min-height: 40px; border-radius: 999px; cursor: pointer; box-shadow: 0 4px 14px rgba(225,61,143,.3); }
.pkrow button:active { transform: scale(.95); }
.pkrow button.ghostbtn { background: #1e1e2a; border: 1px solid #33334a; color: #e8e8f0; box-shadow: none; font-weight: 600; }

/* --- preview / demo mode (?demo=1, round 3) --- */
/* The pill mirrors the account pill's position on the opposite side,
   so the mode can never be mistaken for the live chat. The cycler bar
   sits pinned under the header cluster; in demo the thread's top
   padding grows to clear it (the mask fade is keyed to the element's
   top edge, so its geometry is unaffected — at rest the first bubble
   simply starts lower, still fully opaque). The account button is
   hidden: the preview surface is the chat + animations only. */
#demoPill { position: absolute; top: 10px; left: 12px; z-index: 6; background: rgba(27,27,40,.82); border: 1px solid #34344a; color: var(--ink-2); font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; padding: 6px 11px; border-radius: 999px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
#demoBar { position: absolute; top: 148px; left: 0; right: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; pointer-events: auto; }
.demoLab { font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); text-shadow: 0 1px 8px rgba(0,0,0,.9); }
.demoBtn { background: rgba(27,27,40,.85); border: 1px solid #34344a; color: var(--ink-2); font-size: 12px; font-weight: 600; padding: 6px 12px; min-height: 30px; border-radius: 999px; cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease), background var(--dur-2) var(--ease), transform var(--dur-1) var(--ease); }
.demoBtn:hover { border-color: #55557a; color: var(--ink); }
.demoBtn:active { transform: scale(.95); }
/* Round 4: the active state's button carries the send-ready
   gradient so the current animation is identifiable at a glance,
   and the "now playing" caption wraps to its own line under the
   buttons — the four buttons + label + caption do not fit one row
   on a phone, and the state readout must never be the thing that
   gets squeezed out. */
.demoBtn.active { background: var(--grad); border-color: transparent; color: #fff; }
.demoNow { flex-basis: 100%; text-align: center; font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--ink-2); text-shadow: 0 1px 8px rgba(0,0,0,.9); }
body.demo #thread { padding-top: 208px; }
body.demo #acctBtn { display: none; }

/* (The round-11 instagram link block lived here; linking moved into
   the chat conversation itself on 2026-11-12 and the sheet block was
   removed.) */