/* Our moments — the moments page (app/momentsPage.js) and the bell's moment rows
   (app/notifications.js), 2026-10-16, second round.

   Calmer since 2026-10-19 (the product owner: "too busy — tidy and minimal, like picture 3"):
   the app's paper with one soft wash at the top, the two of you in one quiet row, this week's
   score and the streak card (app/app.css .sk-*) as white cards, light bubbles in each sender's
   colour, and a white composer at the foot — six pastel round actions over one pink pill.
   Pretendard, Lucide marks, no emoji. Home's moments card lives in app/app.css (.hmc-*).
   2026-10-20: the history ("who you've shared moments with", .mph-*), the connect card for an
   account connected to no one (.mpc-*, Home's card wears it too), the read-only page of someone
   before (.mp-page.is-archive), and from 1024px TWO columns — the two of you, this week, the
   streak and the history on the left (sticky), the moments with the composer as one white panel
   on the right. Below that, one column: the head, the moments, the history, the composer.
   2026-10-20, later: tidier bubbles (a picture moment is the picture in its own shape + a
   compact caption, .mp-stack / .mp-pic / .mp-bubble.is-cap), the STRIP kind, and the sheet that
   picks one of my strips (client/core/momentCompose.js openStripPicker, .mws-*).
   2026-10-20, later still: a CHAT like WhatsApp — the newest at the foot, the day chips sticky,
   runs of one person close together, the "New" pill (.mp-new), the bar naming them on a phone
   (.mp-bar-who), the panel a fixed-height chat window from 1024px — and the CALL LOG bubble
   (.mp-bubble.is-call, .mp-cb-*).
   .mp-*  the page    .mpc-*  connect    .mph-*  the history    .mws-*  the strip sheet
   .nt-moment  the bell's picture */

/* ---- the page ------------------------------------------------------------------------- */
.mp-page {
  --mp-pink: #EC5F93;
  --mp-her: #FF9EC4;
  --mp-him: #8DB8FF;
  --mp-her-deep: #D6457E;
  --mp-him-deep: #3F78E8;
  --mp-line: var(--h-line, #ECEDF2);
  --mp-muted: var(--h-muted, #6B6E78);
  --mp-paper: radial-gradient(rgba(23, 24, 28, 0.07) 1px, transparent 1.4px) 0 0 / 12px 12px, #FBFAFC;
  padding-bottom: 0;
  overflow-x: hidden;
  color: var(--ink, #17181C);
  font-family: var(--font-body, "Pretendard", system-ui, -apple-system, sans-serif);
  background: radial-gradient(120% 280px at 50% 0%, #FFF1F6 0%, rgba(255, 241, 246, 0) 72%), var(--paper, #F8F9FB);
}
.mp-page *, .mp-page *::before, .mp-page *::after { box-sizing: border-box; }
.mp-page .sp-bar {
  z-index: 4; /* over the sticky day chips */
  gap: 6px;
  background: rgba(253, 249, 251, 0.86);
  padding-left: max(8px, calc((100% - 600px) / 2 + 8px));
}
/* a phone: once the head has scrolled away, the bar says who (the partner, online) */
.mp-bar-who {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.mp-bar-who.is-on { opacity: 1; transform: none; }
.mp-bar-who[hidden] { display: none; }
.mp-bar-ava {
  flex: none; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px #FFD0E0;
}
.mp-bar-ava.is-blue { box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px #C9DDFF; }
.mp-bar-ava .avatar-pic { width: 100%; height: 100%; font-size: 13px; font-weight: 800; }
.mp-bar-t { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mp-bar-t b { min-width: 0; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink, #17181C); }
.mp-bar-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #34C77B; }
.mp-bar-dot[hidden] { display: none; }
.mp-ic { display: inline-flex; flex: none; line-height: 0; }
.mp-ic svg { display: block; }

/* the two of you, in one row; then the two cards */
.mp-head {
  width: min(100%, 600px); align-self: center;
  display: flex; flex-direction: column; gap: 16px;
  padding: 4px 20px 22px;
}
.mp-head[hidden] { display: none; }
.mp-who { display: flex; align-items: center; gap: 14px; min-width: 0; }
.mp-pair { flex: none; display: flex; align-items: center; }
.mp-pair:empty { display: none; }
.mp-ava {
  position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; background: #fff;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #FFD0E0;
}
.mp-ava.is-blue { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #C9DDFF; }
.mp-ava .avatar-pic { width: 100%; height: 100%; font-size: 18px; font-weight: 800; }
.mp-ava-heart {
  position: relative; z-index: 2; flex: none; align-self: flex-end;
  width: 22px; height: 22px; margin: 0 -15px -2px; border-radius: 50%;
  display: grid; place-items: center; background: var(--mp-pink); color: #fff;
  box-shadow: 0 0 0 2px #fff;
}
.mp-ava-heart .mp-ic svg { width: 12px; height: 12px; }
.mp-head-t { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.mp-names { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; overflow-wrap: anywhere; }
.mp-online { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; font-weight: 600; color: #2F8A5B; }
.mp-online[hidden] { display: none; }
.mp-online i { width: 8px; height: 8px; border-radius: 50%; background: #34C77B; }

.mp-stats { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; width: 100%; }
.mp-stats[hidden] { display: none; }
/* this week: the label and who leads on the left, the score on the right */
.mp-stat.mp-week {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 3px;
  min-width: 0; padding: 14px 16px; border-radius: var(--h-r, 20px);
  background: #fff; border: 1px solid var(--mp-line); box-shadow: var(--h-shadow, 0 8px 24px rgba(60, 40, 60, 0.05));
}
.mp-stat-l { grid-column: 1; grid-row: 1; font-size: 15px; font-weight: 700; color: var(--ink, #17181C); }
.mp-lead { grid-column: 1; grid-row: 2; font-size: 13px; font-weight: 500; color: var(--mp-muted); }
.mp-lead:empty { display: none; }
.mp-score {
  grid-column: 2; grid-row: 1 / span 2;
  display: flex; align-items: baseline; gap: 6px; line-height: 1;
  font-size: 28px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.mp-score i { font-style: normal; font-weight: 700; color: #D3D5DC; translate: 0 -2px; }
.mp-score .is-me, .mp-score .is-them { color: var(--mp-her-deep); }
.me-blue .mp-score .is-me, .them-blue .mp-score .is-them { color: var(--mp-him-deep); }
.mp-stats.is-same .mp-score .is-them { opacity: 0.62; }
/* the streak card, a little more compact here: the history is what this page is for */
.mp-stats .sk-card { gap: 12px; padding: 14px 16px; }
.mp-stats .sk-art { width: 66px; height: 54px; }
.mp-stats .sk-title { font-size: 18px; }
.mp-stats .sk-foot { display: none; }

/* the history — tidied 2026-10-20 (the user: "tidy it"; a selfie was a WIDE pink box with the
   photo small at its left). A words moment is one compact bubble, the time on its line; a
   picture moment is the picture itself in its own shape (a selfie / a doodle square, a strip
   tall — `--ar` is set from the image once it loads) with a compact caption bubble under it,
   both on the sender's side.
   A CHAT since later that day (the user: "like WhatsApp — the newest at the bottom, the day and
   the times always visible"): oldest at the top, the newest at the foot over the composer (the
   column fills from the bottom, .mp-feed-in's margin-top: auto); each day's chip sticks to the
   top while you're in that day (under the bar on a phone, --mp-bar; at the panel's top from
   1024px); one person's moments in a row (.is-first … .is-last) sit 3px apart, their initial
   and the bubble's tail on the first, the corners on their side squarer in between; a video
   call is a call-log bubble (.mp-bubble.is-call). */
.mp-feed {
  flex: 1 0 auto; width: min(100%, 600px); align-self: center;
  display: flex; flex-direction: column; padding: 0 14px 14px;
}
.mp-feed[hidden] { display: none; }
.mp-feed-in { margin-top: auto; display: flex; flex-direction: column; min-width: 0; }
.mp-day { display: flex; flex-direction: column; min-width: 0; }
.mp-day-l {
  position: sticky; top: calc(var(--mp-bar, 56px) + 6px); z-index: 2;
  display: flex; justify-content: center; margin: 14px 0 4px; pointer-events: none;
}
.mp-day:first-child .mp-day-l { margin-top: 6px; }
.mp-day-l span {
  max-width: 80%; padding: 5px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.94); border: 1px solid var(--mp-line);
  box-shadow: 0 3px 10px -4px rgba(60, 40, 60, 0.18);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 12px; font-weight: 700; line-height: 1.2; letter-spacing: 0.01em; color: var(--mp-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.mp-row { display: flex; align-items: flex-start; gap: 8px; min-width: 0; margin-top: 3px; }
.mp-row.is-first { margin-top: 12px; }
.mp-day-l + .mp-row { margin-top: 6px; }
.mp-row.is-me { justify-content: flex-end; }
.mp-row.is-local { opacity: 0.7; }
.mp-row-ava {
  flex: none; width: 28px; height: 28px; margin-top: 2px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; font: 800 12px / 1 var(--font-body, "Pretendard", sans-serif);
  background: #FF8DB0;
}
.mp-row-ava.is-blue { background: #7FB0FF; }
.mp-row:not(.is-first) .mp-row-ava { visibility: hidden; height: 0; }

/* a words moment: the kind's mark, the words, the time — one compact bubble */
.mp-bubble {
  --bg: #FFF0F5; --edge: #FFE0EB; --soft: #8A8D97; --ic: var(--mp-her-deep);
  max-width: min(80%, 380px); min-width: 0;
  display: flex; flex-direction: column; gap: 8px;
  padding: 7px 14px 7px 7px; border-radius: 18px;
  background: var(--bg); border: 1px solid var(--edge); color: var(--ink, #17181C);
}
.mp-bubble.is-blue { --bg: #EFF5FF; --edge: #DCE8FF; --ic: var(--mp-him-deep); }
.mp-bubble.is-light.is-pink { --bg: #FFF8FA; --edge: #FFE8EF; }
.mp-bubble.is-light.is-blue { --bg: #F7FAFF; --edge: #E6EEFF; }
.mp-row.is-them > .mp-bubble { border-top-left-radius: 6px; }
.mp-row.is-me > .mp-bubble { border-top-right-radius: 6px; }
.mp-b-body { display: flex; align-items: center; gap: 9px; min-width: 0; }
.mp-b-ic {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; color: var(--ic);
}
.mp-b-ic .mp-ic svg { width: 14px; height: 14px; }
.mp-b-copy { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 1px; min-width: 0; }
.mp-b-copy b { min-width: 0; font-size: 14.5px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.mp-b-copy time { flex: none; margin-left: auto; font-size: 11.5px; font-weight: 500; line-height: 1.3; color: var(--soft); font-variant-numeric: tabular-nums; }
/* a run: the corners on the sender's side squarer where one bubble meets the next */
.mp-row.is-them:not(.is-last) > .mp-bubble,
.mp-row.is-them:not(.is-last) .mp-stack > .mp-bubble:last-child { border-bottom-left-radius: 6px; }
.mp-row.is-me:not(.is-last) > .mp-bubble,
.mp-row.is-me:not(.is-last) .mp-stack > .mp-bubble:last-child { border-bottom-right-radius: 6px; }

/* a picture moment: the picture, then its caption, on the sender's side */
.mp-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; max-width: min(80%, 380px); }
.mp-row.is-me .mp-stack { align-items: flex-end; }
.mp-pic {
  /* the box IS the picture's shape: as wide as --pic-w allows, as tall as --pic-h allows */
  --ar: 1; --pic-w: 208px; --pic-h: 300px;
  position: relative; display: block; flex: none;
  width: min(var(--pic-w), 62vw, calc(var(--pic-h) * var(--ar))); aspect-ratio: var(--ar);
  margin: 0; padding: 0; border: 0; border-radius: 18px; overflow: hidden;
  background: #FFE9F1; cursor: zoom-in; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 0 0 1px rgba(23, 24, 28, 0.06), 0 8px 18px -12px rgba(60, 40, 60, 0.45);
  transition: transform 0.14s ease;
}
.mp-pic.is-blue { background: #E6EFFF; }
.mp-row.is-them .mp-pic { border-top-left-radius: 6px; }
.mp-row.is-me .mp-pic { border-top-right-radius: 6px; }
.mp-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mp-pic:active { transform: scale(0.98); }
/* a strip: tall (or a pair, wide) — the whole strip, its own corners a little squarer */
.mp-pic.is-strip { --ar: 0.3333; --pic-h: 360px; border-radius: 10px; background: #fff; }
.mp-row.is-them .mp-pic.is-strip { border-top-left-radius: 4px; }
.mp-row.is-me .mp-pic.is-strip { border-top-right-radius: 4px; }
/* a doodle on light paper, its ink outlined so the white pen shows too */
.mp-pic.is-doodle { background: var(--mp-paper); }
.mp-pic.is-doodle img { object-fit: contain; filter: drop-shadow(0 0 0.6px rgba(23, 24, 28, 0.55)) drop-shadow(0 1px 1.5px rgba(23, 24, 28, 0.12)); }
.mp-pic.is-broken { background: #F1F2F5; }
.mp-pic.is-broken img { visibility: hidden; }
.mp-pic:focus-visible { outline: 3px solid #F48FB6; outline-offset: 2px; }
.mp-pic.is-blue:focus-visible { outline-color: #8DB8FF; }
/* the caption under it: smaller, the same tint */
.mp-bubble.is-cap { max-width: 100%; padding: 4px 11px 4px 4px; border-radius: 14px; gap: 0; }
.mp-bubble.is-cap .mp-b-body { gap: 7px; }
.mp-bubble.is-cap .mp-b-ic { width: 22px; height: 22px; }
.mp-bubble.is-cap .mp-b-ic .mp-ic svg { width: 12px; height: 12px; }
.mp-bubble.is-cap .mp-b-copy b { font-size: 13px; font-weight: 650; }
.mp-bubble.is-cap .mp-b-copy time { font-size: 11px; }

/* a video call, like WhatsApp's call log: the camera mark with an arrow (out: up-right; in:
   down-left), what happened ("Video call", "Missed video call" in red, "No answer",
   "Canceled", "Calling…", "On a call"), how long under it, the time on the right. A tap on an
   ended one opens Call back under it; ringing for me, Join. */
.mp-bubble.is-call {
  flex-direction: row; align-items: center; gap: 10px;
  min-width: min(212px, 100%); padding: 7px 12px 7px 7px; margin: 0;
  font: inherit; text-align: left; -webkit-tap-highlight-color: transparent;
}
button.mp-bubble.is-call { cursor: pointer; transition: transform 0.12s ease, filter 0.15s ease; }
button.mp-bubble.is-call:active { transform: scale(0.98); }
@media (hover: hover) { button.mp-bubble.is-call:hover { filter: brightness(0.985); } }
button.mp-bubble.is-call:focus-visible { outline: 2px solid var(--ic); outline-offset: 2px; }
.mp-row.is-them .mp-stack.is-call > .mp-bubble { border-top-left-radius: 6px; }
.mp-row.is-me .mp-stack.is-call > .mp-bubble { border-top-right-radius: 6px; }
.mp-cb-ic {
  position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; color: var(--ic);
}
.mp-cb-dir {
  position: absolute; right: -3px; bottom: -3px; width: 17px; height: 17px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ic); color: #fff; box-shadow: 0 0 0 2px var(--bg);
}
.mp-cb-dir .mp-ic svg { width: 11px; height: 11px; stroke-width: 2.6; }
.mp-cb-copy { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mp-cb-t { font-size: 14.5px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.mp-cb-sub { font-size: 12.5px; font-weight: 600; line-height: 1.2; color: var(--soft); font-variant-numeric: tabular-nums; }
.mp-bubble.is-call time {
  flex: none; align-self: flex-end; margin-left: 4px;
  font-size: 11.5px; font-weight: 500; line-height: 1.3; color: var(--soft); font-variant-numeric: tabular-nums;
}
/* I missed it: the mark and the words in red */
.mp-bubble.is-call.is-missed .mp-cb-ic { color: #D63A3A; }
.mp-bubble.is-call.is-missed .mp-cb-dir { background: #D63A3A; }
.mp-bubble.is-call.is-missed .mp-cb-t { color: #C42F2F; }
/* still ringing, or on: a soft green "live" ring on the mark */
.mp-bubble.is-call.is-ringing .mp-cb-ic, .mp-bubble.is-call.is-on .mp-cb-ic { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #9BE3BD; }
.mp-bubble.is-call.is-on .mp-cb-dir { background: #2FAE6B; }
.mp-stack.is-call { gap: 6px; }
.mp-stack.is-call > .mp-bubble { max-width: 100%; }
.mp-cb-back {
  display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 15px;
  border: 1px solid #F7C6D8; border-radius: 999px; background: #fff; color: #C2416F;
  font: 700 14px / 1 var(--font-body, "Pretendard", sans-serif); white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mp-cb-back[hidden] { display: none; }
.mp-cb-back:active { transform: scale(0.96); }

/* Join while their call / photobooth is open */
.mp-join {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
  min-height: 38px; padding: 0 16px; margin-left: 35px; border: 0; border-radius: 999px;
  background: var(--mp-pink); color: #fff; font: 700 14px / 1 var(--font-body, "Pretendard", sans-serif);
  cursor: pointer;
}
.mp-stack.is-call > .mp-join { margin-left: 0; }
.mp-row.is-me .mp-stack.is-call > .mp-join { align-self: flex-end; }
.mp-join:active { transform: scale(0.96); }

/* their newest, my turn: the two answers */
.mp-replies { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 36px; margin-top: 2px; }
.mp-reply {
  display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 15px;
  border: 1px solid #F7C6D8; border-radius: 999px; background: #fff; color: #C2416F;
  font: 700 14px / 1 var(--font-body, "Pretendard", sans-serif); white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mp-reply.is-primary { border-color: transparent; background: var(--mp-pink); color: #fff; }
.mp-reply:active { transform: scale(0.96); }

/* while the log loads; nothing yet; can't say */
.mp-skel {
  display: block; height: 56px; width: 64%; border-radius: 20px;
  background: linear-gradient(100deg, #F1F2F5 30%, #F8F9FB 50%, #F1F2F5 70%) 0 0 / 200% 100%;
}
.mp-skel.is-me { align-self: flex-end; width: 50%; }
.mp-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 20px 40px; text-align: center; }
.mp-empty img { width: 168px; height: auto; margin-bottom: 8px; }
.mp-empty b { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.mp-empty span { max-width: 280px; font-size: 14px; line-height: 1.4; color: var(--mp-muted); }
.mp-retry {
  margin-top: 10px; min-height: 46px; padding: 0 24px; border: 0; border-radius: 999px;
  display: inline-flex; align-items: center; background: var(--mp-pink); color: #fff;
  font: 700 15px / 1 var(--font-body, "Pretendard", sans-serif); text-decoration: none; cursor: pointer;
}

/* the composer, at the foot of the page: white, a hairline, the actions, one pink pill */
.mp-composer {
  position: sticky; bottom: 0; z-index: 3; margin-top: auto;
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--mp-line);
  background: #fff;
}
.mp-composer[hidden] { display: none; }
.mp-composer-in { width: min(100%, 600px); margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
/* something new landed while they read further up: one pill over the composer takes them down */
.mp-new {
  position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 1; translate: -50% 0;
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px 0 16px;
  border: 1px solid #F7C6D8; border-radius: 999px; background: #fff; color: #C2416F;
  font: 700 13.5px / 1 var(--font-body, "Pretendard", sans-serif); white-space: nowrap; cursor: pointer;
  box-shadow: 0 8px 20px -8px rgba(60, 40, 60, 0.35);
  -webkit-tap-highlight-color: transparent;
}
.mp-new[hidden] { display: none; }
.mp-new:active { transform: scale(0.96); }
.mp-new:focus-visible { outline: 2px solid #C2416F; outline-offset: 2px; }
/* eight round actions in ONE row (2026-10-20, the user: "tidy it, and add Game"): evenly
   spaced when they fit, a row you swipe sideways when they don't — the edge it goes on to fades
   (.is-more / .is-back, set from momentsPage.js) — and a label is one line, never broken: below
   600px the long words give way to short ones ("Booth", "Call", "Morning"). */
.mp-acts {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(52px, 1fr);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
  scrollbar-width: none; margin: 0 -4px; padding: 2px 4px;
}
.mp-acts::-webkit-scrollbar { display: none; }
.mp-acts.is-more { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent); }
.mp-acts.is-back { -webkit-mask-image: linear-gradient(90deg, transparent, #000 34px); mask-image: linear-gradient(90deg, transparent, #000 34px); }
.mp-acts.is-more.is-back { -webkit-mask-image: linear-gradient(90deg, transparent, #000 34px, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(90deg, transparent, #000 34px, #000 calc(100% - 34px), transparent); }
.mp-act {
  min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin: 0; padding: 0 2px; border: 0; background: none; cursor: pointer; scroll-snap-align: start;
  color: var(--mp-muted); font: 600 11.5px / 1.15 var(--font-body, "Pretendard", sans-serif);
  letter-spacing: -0.01em;
  -webkit-tap-highlight-color: transparent;
}
.mp-act-ic {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--h-tint, #FFF3F7); color: var(--h-deep, #C2416F);
  transition: transform 0.14s ease;
}
.mp-act:active .mp-act-ic { transform: scale(0.9); }
.mp-act:focus-visible { outline: none; }
.mp-act:focus-visible .mp-act-ic { outline: 2px solid var(--h-deep, #C2416F); outline-offset: 2px; }
.mp-act-l { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-act-l .is-short { display: none; }
/* a phone: the short words, the marks a size down; eight fit from ~432px wide, narrower they
   scroll (measured at 11px: "Afternoon" 50px, "Evening" 41px, "Selfie" 31px) */
@media (max-width: 599px) {
  .mp-composer { padding-left: 10px; padding-right: 10px; }
  .mp-act { font-size: 11px; }
  .mp-act-ic { width: 44px; height: 44px; }
  .mp-act-l.has-short .is-long { display: none; }
  .mp-act-l.has-short .is-short { display: inline; }
}
@media (max-width: 360px) {
  .mp-acts { grid-auto-columns: minmax(50px, 1fr); }
  .mp-act-ic { width: 40px; height: 40px; }
}
.mp-miss {
  display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%;
  min-height: 50px; margin: 0; border: 0; border-radius: 999px;
  background: var(--mp-pink); color: #fff;
  font: 700 16px / 1 var(--font-body, "Pretendard", sans-serif); cursor: pointer;
  box-shadow: 0 10px 20px -12px rgba(236, 95, 147, 0.8);
  -webkit-tap-highlight-color: transparent; transition: transform 0.12s ease;
}
.mp-miss:active { transform: scale(0.98); }
.mp-miss:focus-visible { outline: 3px solid #FFC2D8; outline-offset: 2px; }

/* a word over the composer */
.mp-toast {
  position: fixed; left: 50%; z-index: 350; translate: -50% 0;
  display: inline-flex; align-items: center; gap: 7px; max-width: calc(100vw - 40px);
  padding: 10px 16px; border-radius: 999px; background: #17181C; color: #fff;
  font: 700 14px / 1.2 var(--font-body, "Pretendard", sans-serif);
  box-shadow: 0 10px 24px rgba(23, 24, 28, 0.25);
  opacity: 0; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none;
}
.mp-toast.is-on { opacity: 1; transform: none; }
.mp-toast .mp-ic { color: #FF9EC4; }

/* the photo, big */
.mp-viewer {
  position: fixed; inset: 0; z-index: 330;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: calc(64px + env(safe-area-inset-top, 0px)) 20px calc(28px + env(safe-area-inset-bottom, 0px));
  background: rgba(20, 18, 24, 0.9); color: #fff;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-family: var(--font-body, "Pretendard", system-ui, sans-serif);
  overflow-y: auto;
}
.mp-viewer-fig { margin: 0; width: 100%; max-width: 560px; display: grid; place-items: center; }
.mp-viewer-fig img {
  display: block; max-width: 100%; max-height: 58vh; max-height: 58dvh; object-fit: contain;
  border-radius: 22px; box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45);
}
.mp-viewer.is-doodle .mp-viewer-fig img { background: var(--h-paper, #FBFAFC); filter: drop-shadow(0 0 0.6px rgba(23, 24, 28, 0.55)); }
.mp-viewer.is-strip .mp-viewer-fig img { max-height: 68vh; max-height: 68dvh; border-radius: 10px; background: #fff; }
.mp-viewer-meta { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.mp-viewer-meta b { font-size: 17px; font-weight: 800; }
.mp-viewer-meta span { font-size: 13px; color: rgba(255, 255, 255, 0.72); }
.mp-viewer-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 520px; }
.mp-v-btn {
  min-height: 48px; padding: 0 18px; border: 0; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, 0.14); color: #fff;
  font: 700 15px / 1 var(--font-body, "Pretendard", sans-serif); white-space: nowrap; cursor: pointer;
}
.mp-v-btn.is-primary { background: #EC5F93; }
.mp-v-btn:disabled { opacity: 0.6; }
.mp-viewer-x {
  position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 14px;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255, 255, 255, 0.14); color: #fff; cursor: pointer;
}

/* hearts out of the "I miss you" button */
.mp-float { position: fixed; z-index: 360; pointer-events: none; color: #EC5F93; translate: -50% 0; opacity: 0; }

/* ---- motion (only for those who want it) ------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .mp-online i { animation: mp-ping 2s ease-out infinite; }
  .mp-row.is-in { animation: mp-rise 0.4s cubic-bezier(0.2, 1, 0.4, 1) backwards; animation-delay: calc(var(--i, 0) * 35ms + 60ms); }
  .mp-row.is-new { animation: mp-pop 0.36s cubic-bezier(0.2, 1.3, 0.5, 1) backwards; }
  .mp-row.is-them.is-new { transform-origin: 0 100%; }
  .mp-row.is-me.is-new { transform-origin: 100% 100%; }
  .mp-new:not([hidden]) { animation: mp-pop 0.3s cubic-bezier(0.2, 1.3, 0.5, 1) backwards; }
  .mp-bubble.is-call.is-ringing .mp-cb-ic { animation: mp-ring 1.6s ease-in-out infinite; }
  .mp-row.is-focus .mp-bubble { animation: mp-glow 1.6s ease; }
  .mp-replies { animation: mp-rise 0.4s cubic-bezier(0.2, 1, 0.4, 1) 0.18s backwards; }
  .mp-join { animation: mp-live 1.8s ease-in-out infinite; }
  .mp-skel { animation: mp-shimmer 1.2s ease-in-out infinite; }
  .mp-head { animation: mp-rise 0.45s cubic-bezier(0.2, 1, 0.4, 1) 0.04s backwards; }
  .mp-viewer { animation: mp-fade 0.18s ease both; }
  .mp-viewer.is-leaving { animation: mp-fade 0.18s ease reverse both; }
  .mp-viewer-fig img { animation: mp-zoom 0.34s cubic-bezier(0.2, 1, 0.4, 1) both; }
  .mp-float { animation: mp-float 1.2s ease-out var(--d, 0ms) both; }
}
@media (prefers-reduced-motion: reduce) {
  .mp-viewer.is-leaving { opacity: 0; }
}
@keyframes mp-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes mp-pop { from { opacity: 0; transform: scale(0.88); } }
@keyframes mp-fade { from { opacity: 0; } }
@keyframes mp-zoom { from { opacity: 0; transform: scale(0.94) translateY(10px); } }
@keyframes mp-shimmer { to { background-position: -200% 0; } }
@keyframes mp-ping { 0% { box-shadow: 0 0 0 0 rgba(52, 199, 123, 0.45); } 100% { box-shadow: 0 0 0 7px rgba(52, 199, 123, 0); } }
@keyframes mp-glow { 0%, 100% { box-shadow: none; } 30% { box-shadow: 0 0 0 4px rgba(236, 95, 147, 0.3); } }
@keyframes mp-live { 0%, 100% { box-shadow: 0 0 0 0 rgba(236, 95, 147, 0.45); } 50% { box-shadow: 0 0 0 7px rgba(236, 95, 147, 0); } }
@keyframes mp-ring { 0%, 100% { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #9BE3BD; } 50% { box-shadow: 0 0 0 2px #fff, 0 0 0 7px rgba(155, 227, 189, 0.35); } }
@keyframes mp-float {
  0% { opacity: 0; transform: translateY(0) scale(0.4); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, 0), -130px) scale(var(--s, 1)); }
}

/* ---- the frame: one column on a phone, two from 1024px ----------------------------------- */
/* .mp-main holds .mp-side (the head, the connect card, the history) and .mp-col (the feed, the
   composer). On a phone both wrappers step aside (display: contents) and the parts take this
   order: the head, the history, the moments (a chat: the newest at its foot), the composer at
   the foot — the page opens scrolled to the bottom, so the head is what's furthest up. */
.mp-main { flex: 1 0 auto; display: flex; flex-direction: column; min-width: 0; }
.mp-side, .mp-col { display: contents; }
.mp-head, .mp-connect { order: 1; }
.mp-hist { order: 2; }
.mp-feed { order: 3; }
.mp-composer { order: 4; }

/* ---- connected to no one: say so, and connect (Home's card wears it too) ----------------- */
.mp-connect { width: min(100%, 600px); align-self: center; padding: 6px 20px 20px; }
.mp-connect[hidden] { display: none; }
.mp-connect-h { margin: 0 0 14px; font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.mp-connect .mpc {
  padding: 18px; border-radius: 22px; border: 1px solid #F2E6EE;
  background:
    radial-gradient(110% 90px at 0% 0%, rgba(255, 214, 230, .5), rgba(255, 214, 230, 0) 100%),
    radial-gradient(110% 90px at 100% 0%, rgba(214, 228, 255, .55), rgba(214, 228, 255, 0) 100%),
    #fff;
  box-shadow: var(--h-shadow, 0 8px 24px rgba(60, 40, 60, 0.05));
}
.mpc { display: flex; flex-direction: column; gap: 14px; min-width: 0; font-family: var(--font-body, "Pretendard", system-ui, sans-serif); }
.mpc-top { display: flex; align-items: center; gap: 14px; min-width: 0; }
/* me, a heart, and the empty seat */
.mpc-pair { flex: none; display: flex; align-items: center; }
.mpc-me, .mpc-slot { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; }
.mpc-me { overflow: hidden; background: #fff; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #FFD0E0; }
.mpc-me .avatar-pic { width: 100%; height: 100%; font-size: 18px; font-weight: 800; }
.mpc-heart {
  position: relative; z-index: 2; flex: none; align-self: flex-end;
  width: 20px; height: 20px; margin: 0 -7px -1px; border-radius: 50%;
  display: grid; place-items: center; background: #EC5F93; color: #fff; box-shadow: 0 0 0 2px #fff;
}
.mpc-heart .mp-ic svg { width: 11px; height: 11px; }
.mpc-slot { box-sizing: border-box; border: 2px dashed #B8CCF3; background: #F3F7FF; color: #4F7BD0; }
.mpc.is-guest .mpc-slot { border-color: #F5C4D6; background: #FFF6F9; color: #D6457E; }
.mpc-copy { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mpc-title { font-size: 16px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; color: var(--ink, #17181C); }
.mpc-line { font-size: 13.5px; line-height: 1.4; color: var(--h-muted, #6B6E78); }
.mpc-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.mpc-primary, .mpc-second {
  min-height: 48px; padding: 0 18px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 15px / 1 var(--font-body, "Pretendard", sans-serif); white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: transform .12s ease;
}
.mpc-primary {
  flex: 1 1 170px; border: 0; color: #fff;
  background: linear-gradient(135deg, #FF86B2 0%, #EC5F93 55%, #E0508A 100%);
  box-shadow: 0 10px 20px -12px rgba(236, 95, 147, .8);
}
.mpc-pic { display: inline-flex; line-height: 0; }
.mpc-second { flex: 1 1 140px; border: 1px solid #D8E4FA; background: #fff; color: #2F5FB0; }
.mpc-second[hidden] { display: none; }
.mpc-primary:active, .mpc-second:active { transform: scale(.97); }
.mpc-primary:disabled { opacity: .7; }
.mpc-primary:focus-visible { outline: 3px solid #FFC2D8; outline-offset: 2px; }
.mpc-second:focus-visible { outline: 2px solid #8DB8FF; outline-offset: 2px; }
.mpc-code { display: flex; gap: 8px; min-width: 0; }
.mpc-code[hidden] { display: none; }
.mpc-input {
  flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 0 16px; box-sizing: border-box;
  border: 1px solid #D8E4FA; border-radius: 14px; background: #fff; color: var(--ink, #17181C);
  font: 700 16px / 1 var(--font-body, "Pretendard", sans-serif); letter-spacing: .12em; text-transform: uppercase;
}
.mpc-input::placeholder { color: #A3A6B0; font-weight: 500; letter-spacing: 0; text-transform: none; }
.mpc-input:focus { outline: 2px solid #8DB8FF; outline-offset: 1px; }
.mpc-go {
  flex: none; min-height: 48px; padding: 0 20px; border: 0; border-radius: 14px;
  background: #3F78E8; color: #fff; font: 700 15px / 1 var(--font-body, "Pretendard", sans-serif); cursor: pointer;
}
.mpc-go:disabled { opacity: .45; cursor: default; }
.mpc-note { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.4; color: #C2416F; }
.mpc-note:empty { display: none; }

/* ---- who you've shared moments with -------------------------------------------------------- */
.mph { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-family: var(--font-body, "Pretendard", system-ui, sans-serif); }
.mph[hidden] { display: none; }
.mph-title { margin: 0 0 2px; font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--h-muted, #6B6E78); }
.mph-list { display: flex; flex-direction: column; gap: 2px; }
.mph-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; min-height: 56px; box-sizing: border-box;
  margin: 0; padding: 8px 6px; border: 0; border-radius: 14px; background: none;
  color: var(--ink, #17181C); font: inherit; text-align: left;
}
button.mph-row { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .15s ease; }
button.mph-row:active { background: #FFF3F7; }
@media (hover: hover) { button.mph-row:hover { background: #FBF6FA; } }
button.mph-row:focus-visible { outline: 2px solid #C2416F; outline-offset: 1px; }
.mph-ava { flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #FFD0E0; }
.mph-ava.is-blue { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #C9DDFF; }
.mph-ava .avatar-pic { width: 100%; height: 100%; font-size: 16px; font-weight: 800; }
.mph-copy { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mph-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mph-name b { min-width: 0; font-size: 15px; font-weight: 750; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mph-now {
  flex: none; padding: 2px 8px; border-radius: 999px; background: #E6F6EC; color: #237A4D;
  font-style: normal; font-size: 11px; font-weight: 750; line-height: 1.3;
}
.mph-sub { font-size: 12.5px; font-weight: 500; line-height: 1.3; color: var(--h-muted, #6B6E78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mph-go { flex: none; display: inline-flex; color: #B9BCC6; }
.mph-all {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 2px; min-height: 36px; padding: 0 6px;
  border: 0; background: none; color: #C2416F; font: 700 13.5px / 1 var(--font-body, "Pretendard", sans-serif); cursor: pointer;
}
.mph-all[hidden] { display: none; }
/* the page's: a white card at the foot of the moments (a phone) or in the side column */
.mp-hist {
  width: min(calc(100% - 32px), 568px); align-self: center; box-sizing: border-box; margin: 0 0 22px;
  padding: 14px 10px 8px; border-radius: var(--h-r, 20px);
  background: #fff; border: 1px solid var(--mp-line); box-shadow: var(--h-shadow, 0 8px 24px rgba(60, 40, 60, 0.05));
}
.mp-hist .mph-title { padding: 0 6px; }
.mp-page.is-solo .mp-hist { width: min(calc(100% - 40px), 560px); }

/* ---- someone before: their moments, read-only -------------------------------------------- */
.mp-arch-when { margin: 0; font-size: 13px; font-weight: 600; color: var(--mp-muted); }
.mp-arch-when[hidden] { display: none; }
.mp-arch-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mp-arch-stat {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; padding: 14px 16px;
  border-radius: var(--h-r, 20px); background: #fff; border: 1px solid var(--mp-line); box-shadow: var(--h-shadow, 0 8px 24px rgba(60, 40, 60, 0.05));
}
.mp-arch-n { font-size: 26px; font-weight: 800; line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--mp-her-deep); }
.mp-arch-stats.me-blue .mp-arch-stat:first-child .mp-arch-n { color: var(--mp-him-deep); }
.mp-arch-stat .mp-lead { overflow: hidden; max-width: 100%; white-space: nowrap; text-overflow: ellipsis; }
.mp-arch-note { margin: 0; padding: 12px 14px; border-radius: 16px; background: #F4F6FA; color: var(--mp-muted); font-size: 13px; line-height: 1.45; }
.mp-page.is-archive .mp-feed { padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }

/* ---- a wide screen: two columns ---------------------------------------------------------- */
@media (min-width: 1024px) {
  .mp-page { background: radial-gradient(70% 320px at 18% 0%, #FFF0F6 0%, rgba(255, 240, 246, 0) 72%), radial-gradient(60% 320px at 92% 0%, #EEF4FF 0%, rgba(238, 244, 255, 0) 72%), var(--paper, #F8F9FB); }
  .mp-page .sp-bar { padding-left: max(8px, calc((100% - 1120px) / 2 + 22px)); background: rgba(250, 249, 252, 0.86); }
  .mp-main {
    display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr); column-gap: 22px; align-items: start;
    width: min(100%, 1120px); align-self: center; box-sizing: border-box; padding: 8px 24px 32px;
  }
  .mp-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  /* the moments panel is a chat window: as tall as the screen, the moments scroll inside it
     (the day chips stick to its top), the composer at its foot */
  .mp-col {
    position: sticky; top: calc(var(--mp-bar, 56px) + 8px);
    display: flex; flex-direction: column; min-width: 0; overflow: hidden;
    height: calc(100vh - var(--mp-bar, 56px) - 40px); height: calc(100dvh - var(--mp-bar, 56px) - 40px); min-height: 440px;
    border-radius: 24px; background: #fff; border: 1px solid var(--mp-line);
    box-shadow: var(--h-shadow, 0 8px 24px rgba(60, 40, 60, 0.05));
  }
  .mp-head, .mp-connect, .mp-hist, .mp-feed { width: 100%; align-self: stretch; box-sizing: border-box; }
  .mp-head { padding: 6px 0 0; }
  .mp-names { font-size: 24px; }
  .mp-connect { padding: 6px 0 0; }
  .mp-hist { margin: 0; }
  .mp-feed {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: 0 28px 18px; scrollbar-width: thin; scrollbar-color: #E2E3EA transparent;
  }
  .mp-day-l { top: 10px; }
  .mp-bar-who { display: none; }
  .mp-bubble, .mp-stack { max-width: min(72%, 440px); }
  .mp-bubble.is-cap { max-width: 100%; }
  .mp-pic { --pic-w: 240px; --pic-h: 320px; }
  .mp-pic.is-strip { --pic-h: 400px; }
  .mp-composer { position: relative; flex: none; border-radius: 0 0 24px 24px; padding: 14px 24px 16px; }
  .mp-composer-in { width: 100%; max-width: 640px; }
  /* not connected to anyone: one centred column */
  .mp-page.is-solo .mp-main { grid-template-columns: minmax(0, 560px); justify-content: center; }
  .mp-page.is-solo .mp-col { display: none; }
  .mp-page.is-solo .mp-hist { width: 100%; }
}
@media (min-width: 1280px) {
  .mp-main { grid-template-columns: minmax(0, 350px) minmax(0, 1fr); column-gap: 28px; padding: 8px 32px 32px; }
}
/* the side column stays in view while the moments scroll — only where it fits */
@media (min-width: 1024px) and (min-height: 720px) {
  .mp-side { position: sticky; top: 68px; }
}

/* ---- "come play": the bubble wears the game's coin; the sheet that picks the game ---------
   (app/momentsPage.js openGameSheet, 2026-10-20): mine first (played here lately, Home's Jump
   in row), then every other game — the love path's coins (/photos/path/coins/) on their tints.
   A bottom sheet on a phone, a centred card from 600px. */
.mp-b-ic.is-coin { background: none; overflow: hidden; }
.mp-b-ic.is-coin img { display: block; width: 26px; height: 26px; object-fit: contain; }
.mp-join.is-play { margin-left: 35px; }
.mp-join.is-play[hidden] { display: none; }
.mp-join.is-play:disabled { opacity: 0.7; }
/* mine: "Waiting for Angie" (a soft green dot) / "Angie joined", and Open back into my room */
.mp-play-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-left: 35px; min-width: 0; }
.mp-play-st { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; font-weight: 650; color: var(--soft); }
.mp-play-st span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-play-st i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #34C77B; }
.mp-play-st.is-full i { background: var(--ic); }
.mp-play-open {
  flex: none; display: inline-flex; align-items: center; gap: 2px; min-height: 32px; padding: 0 8px 0 12px;
  border: 1px solid var(--edge); border-radius: 999px; background: #fff; color: var(--ic);
  font: 700 13px / 1 var(--font-body, "Pretendard", sans-serif); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mp-play-open:active { transform: scale(0.96); }
/* theirs, when the room has gone: one line and Invite back */
.mp-play-note { margin: 0 0 0 35px; font-size: 13px; font-weight: 600; color: var(--soft); }
.mp-play-note[hidden], .mp-play-back[hidden] { display: none; }
.mp-play-back {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px; margin-left: 35px;
  border: 1px solid #F7C6D8; border-radius: 999px; background: #fff; color: #C2416F;
  font: 700 14px / 1 var(--font-body, "Pretendard", sans-serif); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mpg-sheet {
  position: fixed; inset: 0; z-index: 330;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(20, 18, 24, 0.42);
  font-family: var(--font-body, "Pretendard", system-ui, sans-serif); color: var(--ink, #17181C);
}
.mpg-panel {
  width: min(100%, 560px); max-height: min(86vh, 720px); max-height: min(86dvh, 720px);
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 24px 24px 0 0; background: #fff;
  box-shadow: 0 -12px 40px rgba(23, 24, 28, 0.18);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mpg-head { flex: none; display: flex; align-items: flex-start; gap: 12px; padding: 20px 16px 10px 20px; }
.mpg-head-t { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mpg-title { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.mpg-line { margin: 0; font-size: 14px; line-height: 1.4; color: var(--mp-muted, #6B6E78); }
.mpg-x {
  flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: #F3F4F7; color: var(--ink, #17181C); cursor: pointer;
}
.mpg-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 4px 14px 20px; }
.mpg-group + .mpg-group { margin-top: 14px; }
.mpg-h { margin: 6px 6px 8px; font-size: 13px; font-weight: 700; color: var(--mp-muted, #6B6E78); }
.mpg-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 4px; }
.mpg-tile {
  min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin: 0; padding: 8px 2px; border: 0; border-radius: 16px; background: none; cursor: pointer;
  color: var(--ink, #17181C); font: 600 12px / 1.2 var(--font-body, "Pretendard", sans-serif);
  -webkit-tap-highlight-color: transparent; transition: background-color 0.15s ease;
}
.mpg-tile:active { background: #FFF3F7; }
@media (hover: hover) { .mpg-tile:hover { background: #FBF6FA; } }
.mpg-tile:focus-visible { outline: 2px solid #C2416F; outline-offset: 1px; }
.mpg-coin {
  width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  background: var(--tint, #FFE0EA); transition: transform 0.14s ease;
}
.mpg-tile:active .mpg-coin { transform: scale(0.94); }
.mpg-coin img { display: block; width: 52px; height: 52px; object-fit: contain; }
.mpg-name { max-width: 100%; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 600px) {
  .mpg-sheet { align-items: center; padding: 24px; }
  .mpg-panel { border-radius: 24px; box-shadow: 0 24px 60px rgba(23, 24, 28, 0.25); }
  .mpg-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: no-preference) {
  .mpg-sheet { animation: mp-fade 0.18s ease both; }
  .mpg-sheet.is-leaving { animation: mp-fade 0.18s ease reverse both; }
  .mpg-panel { animation: mpg-up 0.3s cubic-bezier(0.2, 1, 0.4, 1) both; }
}
@media (prefers-reduced-motion: reduce) { .mpg-sheet.is-leaving { opacity: 0; } }
@keyframes mpg-up { from { transform: translateY(24px); opacity: 0.6; } }

/* ---- the bell: a partner's moment ----------------------------------------------------- */
.nt-art.nt-moment { border-radius: 16px; background: #FFE4EE; color: #C2416F; }
.nt-art.nt-moment.is-blue { background: #DFEBFF; color: #2F64B8; }
.nt-art.nt-moment img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  border-radius: 16px; box-shadow: 0 3px 8px rgba(60, 40, 60, 0.16);
}
.nt-art.nt-moment.is-doodle img { object-fit: contain; background: var(--h-paper, #FBFAFC); filter: drop-shadow(0 0 0.6px rgba(23, 24, 28, 0.55)); }
.nt-art.nt-moment.is-strip.has-pic { background: transparent; }
.nt-art.nt-moment.is-strip img {
  left: 50%; right: auto; width: 30px; translate: -50% 0;
  object-fit: cover; object-position: 50% 0; border-radius: 6px; background: #fff;
}
.nt-art.nt-moment.has-pic > .icon { display: none; }

/* ---- Home's card: their newest picture, a strip standing tall (app/homeMoments.js) ------- */
.hmc-pic.is-strip { width: 32px; border-radius: 8px; background: #fff; }
.hmc-pic.is-strip img { object-position: 50% 0; }
.nt-art.nt-moment .nt-dot { z-index: 1; }

/* ---- the strip sheet: one of my photobooth strips as a moment (momentCompose.js) ---------
   On the compose sheets' dark panel (client/ui/moments.css .mw-panel): a grid of my strips,
   each in its own shape on a fixed cell, the newest first; the picked one wears a white ring
   and a tick; a locked one shows (and goes) under the watermark. The grid scrolls, the
   buttons stay. */
.mw-panel.is-strips { max-width: 520px; }
.mws-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
  max-height: min(56vh, 520px); max-height: min(56dvh, 520px); overflow-y: auto; overscroll-behavior: contain;
  margin: 0 -4px; padding: 4px;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}
@media (min-width: 480px) { .mws-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mws-grid.is-empty { display: block; max-height: none; overflow: visible; }
.mws-cell {
  display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0;
  margin: 0; padding: 0; border: 0; background: none; color: #fff; cursor: pointer;
  font: 600 12px / 1.2 var(--mw-font, "Pretendard", sans-serif);
  -webkit-tap-highlight-color: transparent;
}
.mws-art {
  position: relative; display: block; aspect-ratio: 3 / 4; min-height: 0; overflow: hidden;
  border-radius: 14px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.16);
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
.mws-cell:active .mws-art { transform: scale(0.97); }
.mws-cell.is-on .mws-art { background: rgba(255, 255, 255, 0.22); box-shadow: 0 0 0 3px #fff; }
.mws-cell:focus-visible { outline: none; }
.mws-cell:focus-visible .mws-art { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.7); }
/* the print in its own shape, as large as the cell lets it be: the picture itself, centred,
   held inside the cell by max sizes (a replaced element keeps its ratio under them) */
.mws-art.is-broken { background: rgba(255, 255, 255, 0.06); }
.mws-print {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  display: block; width: auto; height: auto; max-width: calc(100% - 16px); max-height: calc(100% - 16px);
  border-radius: 4px; background: #fff; box-shadow: 0 6px 14px -6px rgba(10, 2, 20, 0.6);
  opacity: 0; transition: opacity 0.2s ease;
}
.mws-print.is-in { opacity: 1; }
.mws-print.is-blurred { filter: blur(6px); }
.mws-tick {
  position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; color: var(--mw-pink, #EC5F93);
  box-shadow: 0 3px 8px rgba(10, 2, 20, 0.35);
  opacity: 0; transform: scale(0.6); transition: opacity 0.15s ease, transform 0.18s cubic-bezier(0.2, 1.4, 0.5, 1);
}
.mws-cell.is-on .mws-tick { opacity: 1; transform: none; }
.mws-when { text-align: center; color: rgba(255, 255, 255, 0.78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mws-skel {
  display: block; aspect-ratio: 3 / 4; border-radius: 14px;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.08) 30%, rgba(255, 255, 255, 0.18) 50%, rgba(255, 255, 255, 0.08) 70%) 0 0 / 200% 100%;
}
.mws-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 12px 6px; text-align: center; }
.mws-empty img { width: 132px; height: auto; margin-bottom: 4px; }
.mws-empty b { font-size: 17px; font-weight: 800; }
.mws-empty span { max-width: 280px; font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, 0.82); }
.mws-empty .mw-btn { margin-top: 8px; min-height: 48px; padding: 0 20px; border-radius: 999px; }
@media (prefers-reduced-motion: no-preference) {
  .mws-skel { animation: mp-shimmer 1.2s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .mws-print, .mws-art, .mws-tick { transition: none; }
}

/* ---- the chat (2026-10-23, the user: "a chat like WhatsApp — tidy, nice to look at; the
   actions as extra features; on a phone the left part is page one and the person opens page
   two"). A typed message is a bubble of words with its time tucked into the corner; the
   composer is [+] [Message…] [♥ / send] with the eight actions in a grid above it; on a phone
   page one is the two of you + this week + the streak + the CHAT ROW, page two the
   conversation (.mp-page.is-chat), and from 1024px both stay side by side. */
.mp-bubble.is-text { display: block; position: relative; padding: 7px 11px 7px 13px; }
.mp-t {
  margin: 0; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--ink, #17181C);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
/* the last line keeps room for the time, which sits in the bubble's corner */
.mp-t::after { content: ""; display: inline-block; width: 50px; height: 1px; }
.mp-t-time { position: absolute; right: 10px; bottom: 6px; line-height: 1; pointer-events: none; }
.mp-t-time time { font-size: 11px; font-weight: 600; color: var(--soft, #8A8D97); font-variant-numeric: tabular-nums; }
.mp-row.is-textrow.is-local .mp-t-time time { font-style: italic; }

/* the box: [+] [Message…] [♥ / send] */
.mp-typebar { display: flex; align-items: flex-end; gap: 8px; min-width: 0; }
.mp-plus, .mp-send {
  flex: none; width: 46px; height: 46px; margin: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: transform 0.12s ease, background 0.15s ease, color 0.15s ease;
}
.mp-plus { background: #F3F0F5; color: #57545F; }
.mp-plus .mp-ic { transition: transform 0.2s ease; }
.mp-plus.is-open { background: #FFE6EF; color: var(--mp-her-deep); }
.mp-plus.is-open .mp-ic { transform: rotate(45deg); }
.mp-send { background: var(--mp-pink); color: #fff; box-shadow: 0 8px 18px -10px rgba(236, 95, 147, 0.9); }
.mp-send.is-text .mp-ic { translate: -1px 1px; }
.mp-plus:active, .mp-send:active { transform: scale(0.92); }
.mp-plus:focus-visible, .mp-send:focus-visible { outline: 3px solid #FFC2D8; outline-offset: 2px; }
.mp-field {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-end; min-height: 46px;
  padding: 0 16px; border-radius: 23px; background: #F6F4F8; border: 1px solid var(--mp-line);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.mp-field:focus-within { background: #fff; border-color: #F7C6D8; box-shadow: 0 0 0 3px rgba(236, 95, 147, 0.12); }
.mp-input {
  flex: 1; min-width: 0; height: 44px; max-height: 132px; margin: 0; padding: 12px 0 11px;
  border: 0; outline: none; resize: none; background: transparent; overflow-y: auto;
  font: 500 15.5px / 1.35 var(--font-body, "Pretendard", sans-serif); color: var(--ink, #17181C);
}
.mp-input::placeholder { color: #9A97A3; }
/* no chat on the server yet: the + and the pink pill, as before */
.mp-typebar .mp-miss { display: none; }
.mp-typebar.is-off .mp-field, .mp-typebar.is-off .mp-send { display: none; }
.mp-typebar.is-off .mp-miss { display: flex; flex: 1 1 auto; width: auto; min-height: 46px; }

/* the extras: the eight actions in a grid above the box, each with its whole name */
.mp-extras {
  margin: 0 0 10px; padding: 14px 6px 8px; border-radius: 20px;
  background: #FCF9FB; border: 1px solid var(--mp-line);
  animation: mp-extras-in 0.18s ease both;
}
.mp-extras[hidden] { display: none; }
.mp-extras .mp-acts {
  grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 14px;
  overflow: visible; margin: 0; padding: 0; scroll-snap-type: none;
  -webkit-mask-image: none; mask-image: none;
}
.mp-extras .mp-acts.is-more, .mp-extras .mp-acts.is-back { -webkit-mask-image: none; mask-image: none; }
.mp-extras .mp-act { font-size: 12px; gap: 7px; }
.mp-extras .mp-act-ic { width: 52px; height: 52px; }
.mp-extras .mp-act-l { white-space: normal; overflow: visible; text-align: center; line-height: 1.2; }
.mp-extras .mp-act-l.has-short .is-long { display: inline; }
.mp-extras .mp-act-l.has-short .is-short { display: none; }
@keyframes mp-extras-in { from { opacity: 0; transform: translateY(8px); } }

/* the messages before these */
.mp-older {
  align-self: center; margin: 10px 0 4px; min-height: 34px; padding: 0 16px;
  border: 1px solid var(--mp-line); border-radius: 999px; background: #fff; color: var(--mp-muted);
  font: 700 13px / 1 var(--font-body, "Pretendard", sans-serif); cursor: pointer;
}
.mp-older:disabled { opacity: 0.6; cursor: default; }

/* page one's chat row: their picture, their name, the newest line, its time, how many new */
.mp-chatrow {
  order: 1; display: flex; align-items: center; gap: 13px;
  width: min(calc(100% - 40px), 560px); align-self: center; margin: 0 0 16px; padding: 12px 14px;
  border: 1px solid var(--mp-line); border-radius: 20px; background: #fff;
  box-shadow: var(--h-shadow, 0 8px 24px rgba(60, 40, 60, 0.05));
  text-align: left; font: inherit; color: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: transform 0.12s ease;
}
.mp-chatrow[hidden] { display: none; }
.mp-chatrow:active { transform: scale(0.99); }
.mp-chatrow:focus-visible { outline: 3px solid #FFC2D8; outline-offset: 2px; }
.mp-cr-ava {
  flex: none; width: 54px; height: 54px; border-radius: 50%; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #FFD0E0;
}
.mp-cr-ava.is-blue { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #C9DDFF; }
.mp-cr-ava .avatar-pic { width: 100%; height: 100%; font-size: 20px; font-weight: 800; }
.mp-cr-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.mp-cr-top, .mp-cr-bot { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mp-cr-name { flex: 1 1 auto; min-width: 0; font-size: 16.5px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-cr-time { flex: none; font-size: 12px; font-weight: 600; color: var(--mp-muted); }
.mp-chatrow.has-new .mp-cr-time { color: var(--mp-her-deep); }
.mp-cr-line { flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--mp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-chatrow.has-new .mp-cr-line { color: var(--ink, #17181C); font-weight: 600; }
.mp-cr-badge {
  flex: none; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
  display: grid; place-items: center; background: var(--mp-pink); color: #fff; font-size: 12px; font-weight: 800;
}
.mp-cr-badge[hidden] { display: none; }

/* the bar's video call, in the conversation on a phone */
.mp-bar-call {
  display: none; flex: none; margin-left: auto; width: 42px; height: 42px; border: 0; border-radius: 50%;
  place-items: center; background: transparent; color: var(--mp-her-deep); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mp-bar-call:active { background: #FFF0F5; }

/* a phone: two pages */
@media (max-width: 1023px) {
  .mp-page:not(.is-chat) .mp-feed, .mp-page:not(.is-chat) .mp-composer { display: none; }
  .mp-page.is-chat .mp-head, .mp-page.is-chat .mp-chatrow, .mp-page.is-chat .mp-connect, .mp-page.is-chat .mp-hist { display: none; }
  .mp-page.is-chat .mp-bar-who { opacity: 1; transform: none; pointer-events: auto; }
  .mp-page.is-chat .mp-bar-call { display: grid; }
  .mp-page.is-chat { padding-bottom: 0; }
}
/* the conversation's header, a row of its own under the back link (2026-10-23, the user: "keep
   Home's back apart from their name and the video call"): row one is "‹ Home" alone, row two the
   person — their picture, name, online or typing — with the call at its end, a hairline between.
   Only in the conversation: page one names them in the head and the chat row. */
.mp-bar-chat { display: none; }
@media (max-width: 1023px) {
  .mp-page.is-chat .sp-bar { flex-wrap: wrap; padding-bottom: 0; box-shadow: 0 1px 0 rgba(23, 24, 28, 0.06); }
  .mp-page.is-chat .mp-bar-chat {
    display: flex; align-items: center; gap: 10px; flex: 1 0 100%; min-width: 0;
    margin-top: 2px; padding: 8px 2px 9px 6px; border-top: 1px solid rgba(23, 24, 28, 0.07);
  }
  .mp-page.is-chat .mp-bar-who { flex: 1 1 auto; gap: 10px; }
  .mp-page.is-chat .mp-bar-ava { width: 38px; height: 38px; }
  .mp-page.is-chat .mp-bar-t b { font-size: 17px; }
}
@media (min-width: 1024px) {
  .mp-chatrow { display: none; }
  .mp-extras { margin-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) { .mp-extras { animation: none; } }

/* read and typing (2026-10-23, the user: "show when it's read, and typing, like WhatsApp"):
   my message carries one grey tick once sent and two blue ones once they've read it; while they
   write, "typing…" stands under their name (the head, the bar) and three dots bob in a bubble
   under the newest. */
.mp-t-time { display: inline-flex; align-items: center; gap: 3px; }
.mp-bubble.is-text.is-mine .mp-t::after { width: 70px; }
.mp-tick { display: inline-flex; color: #A3A6B0; }
.mp-tick.is-read { color: #2F86E8; }
.mp-tick .mp-ic svg { width: 15px; height: 15px; }
.mp-row.is-typingrow { margin-top: 10px; }
.mp-row.is-typingrow[hidden] { display: none; }
.mp-bubble.is-typing {
  flex-direction: row; align-items: center; gap: 4px; padding: 12px 15px;
  background: #fff; border-color: var(--mp-line); border-top-left-radius: 6px;
}
.mp-bubble.is-typing i { display: block; width: 7px; height: 7px; border-radius: 50%; background: #B4B7C2; animation: mp-dot 1.2s ease-in-out infinite; }
.mp-bubble.is-typing i:nth-child(2) { animation-delay: 0.15s; }
.mp-bubble.is-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes mp-dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-4px); opacity: 1; } }
.mp-online.is-typing { color: var(--mp-her-deep); }
.mp-online.is-typing i { display: none; }
.mp-bar-t { flex-direction: column; align-items: flex-start; gap: 1px; }
.mp-bar-nm { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.mp-bar-typing { font-size: 12px; font-weight: 700; line-height: 1.1; color: var(--mp-her-deep); }
.mp-bar-typing[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .mp-bubble.is-typing i { animation: none; opacity: 0.7; } }

/* the time (and my ticks) FLOAT into the last line's corner (2026-10-23, the user's screenshot:
   "hello11:50 AM" — a fixed spacer was too narrow): on the same line when there's room, under
   it when the line is full; the bubble sizes itself around both. */
.mp-bubble.is-text { padding: 6px 10px 6px 12px; }
.mp-t { display: flow-root; }
.mp-t::after, .mp-bubble.is-text.is-mine .mp-t::after { content: none; }
.mp-t-x { white-space: pre-wrap; overflow-wrap: anywhere; }
.mp-t-time { position: static; float: right; margin: 9px -2px -3px 12px; line-height: 1; white-space: nowrap; }
/* their face beside their bubbles: their own picture (the partner now) */
.mp-row-ava.has-pic { overflow: hidden; background: #fff; box-shadow: 0 0 0 1.5px #FFD0E0; }
.mp-row-ava.has-pic.is-blue { box-shadow: 0 0 0 1.5px #C9DDFF; }
.mp-row-ava.has-pic .avatar-pic { width: 100%; height: 100%; font-size: 12px; font-weight: 800; }

/* The keyboard is up (app/keyboardFit.js): the box sits on it — no home-bar gap, the keyboard
   covers that strip anyway. */
html.kb-up .mp-page .mp-composer { padding-bottom: 10px; }

/* The conversation on a phone whose notifications are still off: one card over the box that
   turns them on (momentsPage.js paintPush, 2026-10-23); the bell page's card, smaller. */
.mp-push[hidden] { display: none; }
.mp-push .nt-push { margin: 0; padding: 10px 8px 10px 12px; gap: 10px; }
.mp-push .gd-note-ic { width: 34px; height: 34px; border-radius: 11px; }
.mp-push .gd-note-copy b { font-size: 14px; }
.mp-push-x {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin-left: -4px;
  border: 0; border-radius: 50%; background: transparent; color: var(--mp-muted); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mp-push-x:active { background: rgba(23, 24, 28, 0.06); }