/* =========================================================
   Trial mode (お試し版) — loaded only by try.html.
   Reuses the mock's tokens and components; this file adds the
   compact trial header, the sample notice and the completion CTA,
   and moves sticky offsets under the taller header.
   ========================================================= */
.is-trial { --trial-hdr: 79px; } /* 52px row + 26px notice + 1px border */
/* JS checks this before exposing club; stale pre-club CSS has no marker. */
:root { --otk-trial-club-style: 1; }

/* ---------- Header ---------- */
.hdr--trial .hdr__in { height: 52px; gap: var(--s-2); }
.hdr--trial .lg { height: 26px; }
.trial-badge {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px;
  border-radius: var(--r-xs); background: var(--c-brand-tint); color: var(--c-brand-ink);
  font-size: 11px; font-weight: var(--w-black); letter-spacing: .08em; white-space: nowrap;
}
.trial-exit {
  margin-left: auto; display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px;
  border: 1.5px solid var(--c-line-2); border-radius: var(--r-pill);
  color: var(--c-ink); font-size: var(--t-xs); font-weight: var(--w-bold); text-decoration: none; white-space: nowrap;
}
.trial-exit:hover { border-color: var(--c-ink); }
@media (min-width: 900px) { .hdr--trial .hdr__nav + .trial-exit { margin-left: var(--s-3); } } /* desktop nav (mobile uses the bottom menu) */
.trial-bar {
  height: 26px; display: flex; align-items: center; justify-content: center; gap: 2px;
  padding: 0 var(--gutter); background: var(--c-ink); color: var(--c-white);
  font-size: clamp(10.5px, 3.1vw, 12px); font-weight: var(--w-bold); white-space: nowrap; overflow: hidden;
}
.trial-bar b { color: #ffb3d4; }

/* Sticky elements sit under the taller trial header */
.is-trial .filters { top: calc(env(safe-area-inset-top, 0px) + var(--trial-hdr)); }
@media (max-width: 1023px) {
  .is-trial .dt-hero { top: calc(env(safe-area-inset-top, 0px) + var(--trial-hdr)); }
}
@media (min-width: 1024px) {
  .is-trial .book-card { top: calc(var(--trial-hdr) + var(--s-6)); }
  .hdr--trial .hdr__in { height: 60px; }
  .hdr--trial .lg { height: 30px; }
  .trial-exit { font-size: var(--t-sm); }
  .is-trial { --trial-hdr: 87px; }
}

/* Tokyo only: shown as a label, not a picker */
.pref-btn--static { cursor: default; }
.pref-btn--static:hover { border-color: var(--c-line-2); }

/* Your own row in the member list is not a link */
.people-list button.is-self { cursor: default; grid-template-columns: 44px minmax(0, 1fr); }
.people-list button.is-self:hover b { text-decoration: none; }

/* ---------- Demo notices ---------- */
.trial-alert {
  display: flex; gap: var(--s-2); align-items: flex-start;
  margin-top: var(--s-4); padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm); border: 1.5px solid var(--c-brand); background: var(--c-brand-tint);
  color: var(--c-ink) !important; font-size: var(--t-md) !important; line-height: 1.6; text-align: left;
}
.trial-alert .icon { width: 20px; height: 20px; color: var(--c-brand-ink); margin-top: 2px; }
.trial-alert b { color: var(--c-brand-ink); }
.trial-alert--sheet { margin-top: 0; font-size: var(--t-sm) !important; }

/* ---------- Completion: hand over to the real service ---------- */
.trial-cta {
  display: grid; gap: var(--s-3); padding: var(--s-6) var(--s-5);
  border-radius: var(--r-md); background: var(--c-surface);
  max-width: 640px; margin: 0 auto;
}
.trial-cta h2 { font-size: var(--t-xl); line-height: var(--lh-tight); text-wrap: balance; }
.trial-cta p { color: var(--c-ink-2); font-size: var(--t-md); line-height: var(--lh-body); }
.trial-cta .btn--primary { margin-top: var(--s-2); text-decoration: none; }
.trial-sub { margin: var(--s-10) auto 0; max-width: 640px; font-size: var(--t-lg); }
.is-trial .done-wrap .stack, .is-trial .stack.done-wrap { padding-top: var(--s-4); }
@media (min-width: 1024px) {
  .is-trial .done-hero .wrap, .trial-cta, .trial-sub { max-width: 1040px; }
  .trial-cta { padding: var(--s-8); }
  .trial-cta .btn { justify-self: start; min-width: 360px; width: auto; }
}

/* No footer in the trial: keep content clear of the fixed bottom bars */
.is-trial.has-tabbar #main { padding-bottom: calc(var(--s-12) + max(72px, var(--trial-tabbar-height, 72px))); }
.is-trial.has-cta #main { padding-bottom: calc(var(--s-12) + 96px); }
@media (min-width: 1024px) {
  .is-trial.has-tabbar #main, .is-trial.has-cta #main { padding-bottom: var(--s-16); }
}

/* ---------- Someone's profile: floating actions (replaces the bottom menu) ---------- */
.pf-float {
  position: fixed; z-index: 45; left: 0; right: 0;
  bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
  display: flex; justify-content: center; gap: var(--s-3);
  padding: 0 var(--gutter); pointer-events: none;
  animation: slideUp var(--d-slow) var(--ease-out) both .15s;
}
.pf-float > * { pointer-events: auto; }
.pf-float__star {
  flex: none; width: 68px; height: 64px; display: grid; justify-items: center; align-content: center; gap: 2px;
  border-radius: var(--r-lg); border: 1.5px solid var(--c-line-2); background: var(--c-bg);
  color: var(--c-ink); font-size: 11px; font-weight: var(--w-bold); cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .14); /* floats over photos and text */
}
.pf-float__star .icon { width: 28px; height: 28px; }
.pf-float__star.is-on { border-color: var(--c-brand); color: var(--c-brand-ink); }
.pf-float__star.is-on .icon { fill: currentColor; }
.pf-float__invite {
  flex: 1; max-width: 400px; min-height: 64px; border-radius: var(--r-lg);
  font-size: 1.125rem; gap: var(--s-2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .14);
}
.pf-float__invite .icon { width: 24px; height: 24px; }
.pf-float__invite.btn--secondary { background: var(--c-bg); }
.is-trial.has-float #main { padding-bottom: calc(var(--s-12) + 96px); }

/* Invite sheet */
.inv-list { display: grid; gap: var(--s-2); }
.inv-opt {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) 22px; gap: var(--s-3); align-items: center;
  width: 100%; padding: var(--s-2); border: 1.5px solid var(--c-line-2); border-radius: var(--r-md);
  background: var(--c-bg); text-align: left; cursor: pointer;
}
.inv-opt img { width: 64px; height: 48px; border-radius: var(--r-sm); object-fit: cover; }
.inv-opt b { display: block; font-size: var(--t-md); line-height: 1.4; }
.inv-opt small { display: block; font-size: var(--t-xs); color: var(--c-ink-2); }
.inv-opt em { display: inline-block; margin-top: 2px; font-style: normal; font-size: var(--t-xs); font-weight: var(--w-bold); color: var(--c-brand-ink); }
.inv-opt__radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--c-line-2); }
.inv-opt[aria-checked="true"] { border-color: var(--c-brand); background: var(--c-brand-tint); }
.inv-opt[aria-checked="true"] .inv-opt__radio { border: 7px solid var(--c-brand); }
.inv-msg { display: flex; gap: var(--s-2); align-items: flex-start; padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); background: var(--c-surface); font-size: var(--t-md); line-height: 1.6; }
.inv-msg .icon { width: 20px; height: 20px; margin-top: 2px; }

/* ---------- クラブ (favourite artists / genres) ---------- */
/* Keep every bottom-menu item in the same row, including the new message tab. */
.is-trial .tabbar {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}
.is-trial .tabbar button {
  min-width: 0;
  text-align: center;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
@media (max-width: 350px) {
  .is-trial .tabbar:has(> button:nth-child(5)) button { font-size: 9px; }
}
.club .club-grid { padding-top: var(--s-5); }
/* イベント (my events): no visible heading in the trial, tabs start at the top */
.is-trial .wrap--my > .tabs:first-of-type { margin-top: var(--s-3); }
.is-trial .wrap--my .my-list { padding-top: var(--s-5); } /* 20px between the tabs and the list / empty box */
/* four tabs (予約中・お気に入り・おさそい・参加済み) fit one row at 390px */
.is-trial .wrap--my .tabs { gap: clamp(10px, 3.6vw, 18px); }
.is-trial .wrap--my .tabs button { font-size: 14px; white-space: nowrap; height: 44px; }
.is-trial .wrap--my .tabs .count { margin-left: 4px; }
@media (min-width: 768px) { .is-trial .wrap--my .tabs { gap: var(--s-6); } .is-trial .wrap--my .tabs button { font-size: var(--t-base); } }
/* Cards pop up from just below as they enter the view (class set in app.js) */
.club-grid .club-card { opacity: 0; transform: translateY(22px) scale(.94); }
.club-grid .club-card.is-in { animation: clubPop .55s cubic-bezier(.2, .9, .3, 1.35) var(--d, 0ms) both; }
@keyframes clubPop {
  from { opacity: 0; transform: translateY(22px) scale(.94); }
  45% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .club-grid .club-card, .club-grid .club-card.is-in { opacity: 1; transform: none; animation: none; }
}
/* Pinterest-style masonry: CSS columns, cards of mixed heights */
.club-grid { display: flex; gap: 10px; align-items: flex-start; }
.club-col { flex: 1; min-width: 0; }
@media (min-width: 768px) { .club-grid { gap: 14px; } }
.club-card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; width: 100%; margin: 0 0 10px; padding: 0; border: 0;
  border-radius: 16px; overflow: hidden; background: #1c1c1c; color: var(--c-white);
  text-align: left; cursor: pointer; break-inside: avoid; isolation: isolate;
}
@media (min-width: 768px) { .club-card { margin-bottom: 14px; } }
.club-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; transform: scale(var(--zoom, 1)); transition: transform var(--d-med) var(--ease-out); }
/* stock-photo cards: a colour wash per card so repeated photos read as different banners */
.club-card--duo::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--tint); mix-blend-mode: color; opacity: .55; }
.club-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.78) 100%); }
.club-card--tint { background: radial-gradient(120% 90% at 20% 10%, color-mix(in srgb, var(--tint) 70%, #fff) 0%, var(--tint) 45%, color-mix(in srgb, var(--tint) 55%, #000) 100%); }
.club-card--tint::after { background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.45) 100%); }
/* hover zoom only for the grid cards (on the page header it would undo the banner's centring) */
.club-grid .club-card:hover img { transform: scale(calc(var(--zoom, 1) * 1.04)); }
.club-card:focus-visible { outline: 3px solid var(--c-brand); outline-offset: 2px; }
.club-card__meta { margin: 0 12px; font-size: 11px; font-weight: var(--w-bold); color: rgba(255,255,255,.85); }
.club-card__name {
  margin: 0 12px 10px;
  color: #d9ff3d; font-size: clamp(1.125rem, 5.2vw, 1.5rem); font-weight: var(--w-black); line-height: 1.25;
  letter-spacing: -.01em; text-shadow: 0 1px 6px rgba(0,0,0,.35); overflow-wrap: anywhere;
}
@media (min-width: 1024px) { .club-card__name { font-size: 1.375rem; } }

/* Artist banners: square, navy gradient, white name with the count under it */
/* --h: per-artist hue, set in app.js (dark corner bottom-left, lighter top-right) */
.club-card--artist { background: linear-gradient(to top right, hsl(var(--h, 225) 65% 6%) 0%, hsl(var(--h, 225) 62% 15%) 55%, hsl(var(--h, 225) 55% 31%) 100%); box-shadow: 0 6px 18px hsl(var(--h, 225) 60% 8% / .2); }
/* film-grain texture over the gradient (inline SVG noise, no image file) */
.club-card--artist::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px; mix-blend-mode: overlay; opacity: .55;
}
.club-card--artist::after { background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.35) 100%); }
.club-card--artist .club-card__name { color: var(--c-white); text-shadow: none; margin: 0 14px 6px; font-size: clamp(1.25rem, 5.6vw, 1.625rem); }
.club-card--artist .club-card__meta { color: var(--c-white); font-size: var(--t-sm); margin: 0 14px 14px; text-align: left; }
.club-card--hero.club-card--artist .club-card__name { margin: 0 var(--gutter) var(--s-1); font-size: clamp(1.5rem, 6.6vw, 2rem); }
.club-card--hero.club-card--artist .club-card__meta { margin: 0 var(--gutter) var(--s-4); }

/* Genre banners: supplied artwork with the name drawn in, so no overlay text or shade */
.club-card--banner { background: transparent; }
.club-card--banner::after { content: none; }
.club-card__count {
  position: absolute; left: 10px; bottom: 10px; padding: 2px 10px; border-radius: var(--r-pill);
  background: rgba(0, 0, 0, .55); color: var(--c-white); font-size: var(--t-sm); font-weight: var(--w-bold);
}

.club-card--hero .club-card__count { left: var(--gutter); bottom: var(--s-3); }
/* Genre page header: the whole banner, centred, over a blurred copy of itself */
.club-card--hero.club-card--banner > img:first-child { filter: blur(40px) saturate(1.2); transform: scale(1.3); }
.club-card--hero .club-card__fit {
  position: absolute; top: 12px; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: -1;
  height: calc(100% - 24px); width: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; transition: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}

/* Club page */
.club-hero { position: relative; max-width: 1200px; margin-inline: auto; }
.club-card--hero { aspect-ratio: auto !important; height: 152px; border-radius: 0; cursor: default; margin: 0; }
.club-card--hero .club-card__name { font-size: clamp(1.5rem, 6.6vw, 2rem); margin: 0 var(--gutter) var(--s-4); }
.club-card--hero .club-card__meta { margin: 0 var(--gutter); font-size: var(--t-sm); }
.club-hero__back { position: absolute; top: var(--s-4); left: var(--gutter); }
@media (min-width: 1024px) {
  .club-hero { padding: var(--s-6) var(--gutter) 0; }
  .club-card--hero { height: 200px; border-radius: 16px; }
  .club-hero__back { top: calc(var(--s-6) + var(--s-4)); left: calc(var(--gutter) + var(--s-4)); }
}
.club-d__title { font-size: var(--t-xl); margin: var(--s-6) 0 var(--s-4); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.club-d__title small { font-size: var(--t-md); color: var(--c-ink-2); font-weight: var(--w-bold); }
.club-members { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 768px) { .club-members { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .club-members { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.club-members button { display: grid; gap: 6px; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.club-member__ph { display: block; aspect-ratio: 4 / 5; border-radius: var(--r-md); overflow: hidden; background: #d6d6d6; color: #a3a3a3; }
.club-member__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.club-member__ph .av__none { width: 100%; height: 100%; display: block; fill: currentColor; }
.club-member__tx b { display: block; font-size: var(--t-base); }
.club-member__tx small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--t-xs); color: var(--c-ink-2); line-height: 1.5; }
.club-members button:hover b { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- メッセージ (DM demo) ---------- */
/* unread badge: bottom menu and desktop header */
.tabbar__msg { position: relative; }
.dm-badge {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill);
  background: var(--c-brand); color: var(--c-white); font-size: 11px; font-weight: var(--w-black); line-height: 1; font-variant-numeric: tabular-nums;
}
.dm-badge--tab { position: absolute; top: 2px; left: calc(50% + 6px); border: 2px solid var(--c-bg); min-width: 20px; height: 20px; }
.dm-badge--hdr { margin-left: 6px; vertical-align: 2px; }

.dm__title { font-size: var(--t-2xl); padding-top: var(--s-5); }
.dm__tabs { margin-top: var(--s-3); }
.dm-list { display: grid; padding-top: var(--s-2); }
.dm-row {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--s-3); align-items: center;
  width: 100%; min-height: 84px; padding: var(--s-3) 0; border: 0; border-bottom: 1px solid var(--c-line);
  background: none; text-align: left; cursor: pointer;
}
.dm-row__av { position: relative; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: #d6d6d6; color: #a3a3a3; display: block; }
.dm-row__av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dm-row__tx { display: grid; gap: 4px; min-width: 0; }
.dm-row__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.dm-row__top b { font-size: var(--t-base); }
.dm-row__top b small { margin-left: 6px; font-size: var(--t-sm); font-weight: var(--w-body); color: var(--c-ink-2); }
.dm-row__top time { flex: none; font-size: var(--t-xs); color: var(--c-ink-2); }
.dm-row__last { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.dm-row__last > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-md); color: var(--c-ink-2); font-weight: var(--w-body); }
.dm-row__n {
  flex: none; display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: var(--r-pill);
  background: var(--c-brand); color: var(--c-white); font-style: normal; font-size: var(--t-xs); font-weight: var(--w-black);
}
/* unread: darker, bolder text, a pink ring on the photo and the count */
.dm-row.is-unread .dm-row__last > span { color: var(--c-ink); font-weight: var(--w-bold); }
.dm-row.is-unread .dm-row__top time { color: var(--c-brand-ink); font-weight: var(--w-bold); }
.dm-row.is-unread .dm-row__av { box-shadow: 0 0 0 2.5px var(--c-bg), 0 0 0 4.5px var(--c-brand); }
.dm-row:hover .dm-row__top b { text-decoration: underline; text-underline-offset: 3px; }
.dm-note { display: flex; gap: 6px; align-items: center; margin-top: var(--s-4); font-size: var(--t-xs); color: var(--c-ink-2); }
.dm-note .icon { width: 16px; height: 16px; }
.dm-empty { margin-top: var(--s-5); }

/* chat */
.chat { max-width: 760px; margin-inline: auto; }
/* header + event card stay pinned under the trial header */
.chat-top { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--trial-hdr)); z-index: 30; background: var(--c-bg); border-bottom: 1px solid var(--c-line); }
.chat-hdr {
  display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--gutter) var(--s-2) calc(var(--gutter) - 8px);
}
.chat-hdr__who { display: flex; align-items: center; gap: var(--s-3); min-width: 0; padding: 4px; border: 0; background: none; text-align: left; cursor: pointer; border-radius: var(--r-sm); }
.chat-hdr__av { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex: none; background: #d6d6d6; color: #a3a3a3; display: block; }
.chat-hdr__av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-hdr__who b { display: block; font-size: var(--t-lg); line-height: 1.3; }
.chat-hdr__who b small { margin-left: 6px; font-size: var(--t-sm); font-weight: var(--w-body); color: var(--c-ink-2); }
.chat-hdr__link { display: inline-flex; align-items: center; gap: 2px; font-size: var(--t-xs); font-weight: var(--w-bold); color: var(--c-brand-ink); }
.chat-hdr__link .icon { width: 14px; height: 14px; }
.chat-ev {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) 18px; gap: var(--s-3); align-items: center;
  width: calc(100% - var(--gutter) * 2); margin: 0 var(--gutter) var(--s-3); padding: var(--s-2) var(--s-3) var(--s-2) var(--s-2);
  border: 1px solid var(--c-line-2); border-radius: var(--r-md); background: var(--c-bg); text-align: left; cursor: pointer;
}
.chat-ev img { width: 64px; height: 48px; border-radius: var(--r-sm); object-fit: cover; }
.chat-ev small { display: block; font-size: var(--t-xs); color: var(--c-brand-ink); font-weight: var(--w-bold); }
.chat-ev b { display: block; font-size: var(--t-md); line-height: 1.4; }
.chat-ev .icon { width: 18px; height: 18px; }
.chat-log { display: grid; gap: var(--s-4); padding: var(--s-5) var(--gutter) var(--s-4); }
.bubble { display: flex; align-items: flex-end; gap: var(--s-2); }
.bubble__av { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex: none; background: #d6d6d6; color: #a3a3a3; display: block; }
.bubble__av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bubble__col { display: grid; gap: 4px; max-width: min(78%, 480px); }
.bubble__tx {
  padding: 10px 14px; border-radius: 18px 18px 18px 6px; background: #f1f1f3; color: var(--c-ink);
  font-size: var(--t-base); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere;
}
.bubble time { font-size: 11px; color: var(--c-ink-2); padding-left: 4px; }
.bubble--me { justify-content: flex-end; }
.bubble--me .bubble__tx { background: var(--c-brand); color: var(--c-white); border-radius: 18px 18px 6px 18px; }
.bubble--me time { text-align: right; padding: 0 4px 0 0; }
.chat-in {
  position: fixed; z-index: 45; left: 0; right: 0; bottom: 0;
  display: flex; align-items: flex-end; gap: var(--s-2);
  padding: var(--s-2) max(var(--gutter), calc((100% - 760px) / 2 + var(--gutter))) calc(var(--s-2) + env(safe-area-inset-bottom, 0px));
  background: var(--c-bg); border-top: 1px solid var(--c-line);
}
.chat-in textarea {
  flex: 1; min-height: 46px; max-height: 140px; padding: 11px 16px; resize: none;
  border: 1.5px solid var(--c-line-2); border-radius: 23px; background: var(--c-bg);
  font: inherit; font-size: 16px; line-height: 1.5; color: var(--c-ink);
}
.chat-in textarea:focus { outline: none; border-color: var(--c-brand); }
.chat-in__send {
  flex: none; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--c-brand); color: var(--c-white);
  display: grid; place-items: center; cursor: pointer;
}
.chat-in__send .icon { width: 22px; height: 22px; stroke-width: 2.4; }
.is-trial.has-composer #main { padding-bottom: calc(var(--s-6) + 70px); }

/* イベント → おさそい */
/* min-width: 0 lets the card shrink to the screen (grid items default to their content width) */
.is-trial .wrap--my .my-list > * { min-width: 0; }
.inv-card { display: grid; gap: var(--s-3); min-width: 0; padding: var(--s-4); border: 1px solid var(--c-line-2); border-radius: var(--r-md); background: var(--c-bg); overflow-wrap: anywhere; }
.inv-card__from { display: flex; align-items: center; gap: var(--s-3); padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.inv-card__av { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex: none; background: #d6d6d6; color: #a3a3a3; display: block; }
.inv-card__av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.inv-card__from b { display: block; font-size: var(--t-base); }
.inv-card__from b small { margin-left: 6px; font-size: var(--t-sm); font-weight: var(--w-body); color: var(--c-ink-2); }
.inv-card__from > span > small { display: block; font-size: var(--t-xs); color: var(--c-brand-ink); font-weight: var(--w-bold); }
.inv-card__msg { position: relative; padding: var(--s-3) var(--s-4); border-radius: 6px 18px 18px 18px; background: #f1f1f3; font-size: var(--t-md); line-height: 1.6; }
.inv-card__ev { border-bottom: 0; padding: 0; grid-template-columns: 96px minmax(0, 1fr) 20px; }
/* buttons stacked full width on phones (large tap targets), side by side from tablet up */
.inv-card__btns { display: grid; gap: var(--s-2); }
.inv-card__btns .btn { min-height: 48px; font-size: var(--t-md); padding-inline: var(--s-3); }
.inv-card__btns .btn .icon { width: 18px; height: 18px; }
@media (min-width: 600px) { .inv-card__btns { grid-template-columns: 1fr 1fr; } }