/* Portrait-lock on phones. The manifest locks the PWA; this CSS locks
   plain-browser sessions by physically rotating the body -90° when the
   phone is held landscape, so visually the layout never changes — it
   behaves like the native iOS "orientation lock" toggle. Only fires at
   phone dimensions (max-height: 520px in landscape); tablets and desktops
   in landscape are unaffected. */
@media screen and (orientation: landscape) and (max-height: 520px) {
  html { overflow: hidden; }
  body {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    height: 100vw;
    overflow-x: hidden; overflow-y: auto;
    position: absolute;
    top: 100%;
    left: 0;
  }
}

:root {
  /* Yodi brand palette — pulled from the logo. */
  --yodi-cyan: #00e9f6;
  --yodi-purple: #8852f7;
  --yodi-pink: #f2299e;
  --yodi-magenta: #cd2bb5;
  --yodi-indigo: #6333b0;
  --yodi-gradient: linear-gradient(90deg, var(--yodi-cyan) 0%, var(--yodi-purple) 50%, var(--yodi-pink) 100%);

  --bg: #fafaf7;
  --surface: #ffffff;
  --ink: #1f1629;
  --muted: #6b7280;
  --line: #ece9f3;
  --accent: var(--yodi-purple);
  --accent-soft: #efe8ff;
  --danger: #e11d48;
  --warn: #b45309;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(50,20,90,0.05), 0 8px 24px rgba(136,82,247,0.08);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); }
body { min-height: 100vh; display: flex; flex-direction: column; }
/* Kill the 300ms click delay on iOS for all tappable things — feels instant. */
button, a, .game-card, .bs-cell, .c4-col, .chess-square, .wwf-cell, [data-drawer] { touch-action: manipulation; }
/* ── Active-row + next-cell cues so the user knows where they're typing ── */
.wordle-row-active .wordle-cell {
  background: rgba(136,82,247,0.04);
  border-color: rgba(136,82,247,0.25);
}
.wordle-row-active.wordle-row-ready .wordle-cell {
  animation: wordle-ready-pulse 1.2s infinite;
}
@keyframes wordle-ready-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(136,82,247,0.45); border-color: rgba(136,82,247,0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(136,82,247,0); border-color: rgba(136,82,247,0.85); }
}
.wordle-cell.wordle-cell-next {
  border-color: var(--yodi-purple) !important;
  position: relative;
}
.wordle-cell.wordle-cell-next:empty::after {
  content: ''; position: absolute;
  left: 50%; top: 18%; bottom: 18%; width: 2px;
  background: var(--yodi-purple); transform: translateX(-50%);
  animation: wordle-caret 0.9s steps(2, end) infinite;
}
@keyframes wordle-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.wordle-family {
  margin-top: 8px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px;
}
.wordle-family-list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 8px; }
.wordle-family-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.wordle-family-row .avatar-sm { width: 32px; height: 32px; border-radius: 50%; background: var(--line); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; color: var(--ink); overflow: hidden; flex-shrink: 0; }
.wordle-family-row .avatar-sm.photo img { width: 100%; height: 100%; object-fit: cover; }
.wordle-family-name { font-weight: 600; flex: 1; }
.wordle-family-stat { font-size: 12px; }

/* TTAL invite picker — selected tile gets a clear border + bg tint */
.ttal-person-tile { cursor: pointer; transition: transform 0.08s, background 0.12s; }
.ttal-person-tile.selected {
  background: #d1fae5;
  outline: 2px solid #059669;
  outline-offset: -2px;
}
.ttal-person-tile.selected::after {
  content: "✓";
  position: absolute; top: 4px; right: 6px;
  color: #059669; font-weight: 800; font-size: 16px;
}
/* Lock overscroll bounce inside game panes so a fat-fingered swipe on the
   board doesn't drag the whole page around. */
.game-page-layout { overscroll-behavior-y: contain; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; width: 100%; }

/* Header */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  /* Top padding honors the iPhone notch / Dynamic Island. When the PWA is
     launched from the home screen, iOS reports that inset via env() — we
     add it on top of our normal 16px so the logo/nav never sit under the
     status bar. On desktop the inset is 0, so nothing changes. */
  padding: calc(16px + env(safe-area-inset-top, 0px)) env(safe-area-inset-right, 0px) 16px env(safe-area-inset-left, 0px);
}
.site-header .wrap { max-width: 1600px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: flex; align-items: center; text-decoration: none; color: var(--ink); font-weight: 600; }
.brand-logo { height: 52px; width: auto; display: block; }

/* Tabler icons baseline. All icons inherit currentColor and stay monochrome. */
.ti { display: inline-block; vertical-align: -3px; flex-shrink: 0; color: currentColor; }
.ti-inline { vertical-align: -2px; margin-right: 4px; }
.icon-btn { display: inline-flex; align-items: center; gap: 6px; }

/* Feed layout: left nav / center feed / right widgets */
.feed-layout {
  display: grid;
  grid-template-columns: 240px 1fr 320px;
  gap: 24px;
  align-items: start;
  margin-top: 8px;
}
.feed-side { position: sticky; top: 70px; }
.feed-center { min-width: 0; }

.side-profile-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 6px; padding: 20px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  text-decoration: none; color: var(--ink); margin-bottom: 12px;
}
.side-profile-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--accent); color: white; font-weight: 600; font-size: 22px;
  text-transform: uppercase; overflow: hidden;
}
.side-profile-avatar.photo { background: var(--line); }
.side-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.side-profile-name { font-weight: 600; font-size: 15px; margin-top: 4px; }
.side-profile-sub { color: var(--muted); font-size: 12px; }

.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500;
  transition: background 0.1s;
}
.side-nav a:hover { background: var(--line); }
.side-nav a .ti { color: var(--muted); }

.side-widget {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 12px;
}
.side-widget-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); font-weight: 600; margin: 0 0 10px;
}
.side-widget-list { list-style: none; padding: 0; margin: 0; }
.side-widget-list li { padding: 6px 0; font-size: 14px; line-height: 1.4; }
.side-widget-list li a { color: var(--ink); text-decoration: none; display: flex; flex-direction: column; }
.side-widget-list li a:hover strong { color: var(--accent); }
.side-widget-list li .muted { font-size: 12px; }
.side-widget-more { display: inline-block; margin-top: 6px; font-size: 12px; color: var(--accent); text-decoration: none; }

.lead-mini { list-style: none; padding: 0; margin: 0; }
.lead-mini li {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; font-size: 13px; border-bottom: 1px solid var(--line);
}
.lead-mini li:last-child { border-bottom: 0; }
.lead-rank { color: var(--muted); font-weight: 600; width: 18px; text-align: right; font-size: 12px; }
.lead-name { color: var(--ink); text-decoration: none; flex: 1; min-width: 0; }
.lead-name:hover { color: var(--accent); }
.lead-score { font-size: 12px; font-weight: 600; color: var(--accent); }

.activity-mini { list-style: none; padding: 0; margin: 0; }
.activity-mini-row {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 8px 0; border-bottom: 1px solid var(--line);
  font-size: 13px; line-height: 1.35;
}
.activity-mini-row:last-child { border-bottom: 0; }
.activity-mini-row.unread { color: var(--ink); }
.activity-mini-text { flex: 1; min-width: 0; }
.activity-mini-text strong { font-weight: 600; }

.feed-empty {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 32px 20px; text-align: center;
}

@media (max-width: 1080px) {
  .feed-layout { grid-template-columns: 1fr 320px; }
  .feed-side-left { display: none; }
}
@media (max-width: 780px) {
  .feed-layout { grid-template-columns: 1fr; }
  .feed-side-right { display: none; }
  .feed-side { position: static; }
}
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--accent); color: white; font-weight: 700; font-size: 13px;
}
.brand-text { font-size: 16px; letter-spacing: -0.01em; }
.site-nav { display: flex; gap: 4px; align-items: center; }
.site-nav .nav-me-dropdown { margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--line); }
.site-nav a, .site-nav .nav-dropdown > summary { color: var(--muted); text-decoration: none; font-size: 14px; }
.site-nav a:hover, .site-nav .nav-dropdown > summary:hover { color: var(--ink); }
.site-nav .nav-link, .site-nav .nav-dropdown > summary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 8px;
  transition: background 0.1s, color 0.1s;
  position: relative;
  cursor: pointer; list-style: none;
}
.site-nav .nav-dropdown > summary::-webkit-details-marker { display: none; }
.site-nav .nav-link:hover, .site-nav .nav-dropdown > summary:hover { background: var(--line); }
.nav-label { font-size: 13px; font-weight: 500; }
.nav-me { padding: 4px !important; }
.nav-me-avatar, .nav-me-initials {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: white; font-weight: 600; font-size: 11px;
  text-transform: uppercase; overflow: hidden;
}
.nav-me-avatar { object-fit: cover; background: var(--line); }
@media (max-width: 820px) {
  .nav-label { display: none; }
  .site-nav { gap: 2px; }
  .site-nav .nav-link, .site-nav .nav-dropdown > summary { padding: 8px; }
}

.main { flex: 1; padding: 32px 20px 56px; }

.site-footer { border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; padding: 20px 0 calc(20px + env(safe-area-inset-bottom, 0px)); }

/* Hero / section */
.hero { margin-bottom: 28px; }
.hero h1 { font-size: 28px; margin: 0 0 6px; letter-spacing: -0.02em; }
h2 { font-size: 18px; margin: 28px 0 12px; letter-spacing: -0.01em; }
.muted { color: var(--muted); }
.center { text-align: center; }

.back-link { color: var(--muted); text-decoration: none; font-size: 13px; display: inline-block; margin-bottom: 12px; }
.back-link:hover { color: var(--ink); }

/* Dashboard */
.dash-hero { margin-bottom: 20px; }
.dash-hero-eyebrow {
  font-size: 11px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px;
}
.dash-hero h1 { font-size: 30px; margin: 0 0 4px; letter-spacing: -0.02em; }
.dash-hero-sub { color: var(--muted); font-size: 14px; margin: 0; }

.dash-cta-row { display: flex; gap: 10px; margin-bottom: 28px; flex-wrap: wrap; }
.dash-cta { padding: 12px 20px; font-size: 15px; font-weight: 500; }

.dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 24px;
}
.dash-main { min-width: 0; }
.dash-side { min-width: 0; }
@media (max-width: 900px) {
  .dash-grid { grid-template-columns: 1fr; }
}

.dash-section { margin-bottom: 28px; }
.dash-section-label {
  font-size: 13px; font-weight: 600;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em;
  margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.dash-simple-list { list-style: none; padding: 0; margin: 0; }
.dash-simple-list li { padding: 6px 0; font-size: 14px; }
.dash-simple-list a { color: var(--ink); text-decoration: none; font-weight: 500; }
.dash-simple-list a:hover { color: var(--accent); }

.btn-link-small {
  display: inline-block; margin-top: 10px;
  color: var(--accent); text-decoration: none; font-size: 13px; font-weight: 500;
}
.btn-link-small:hover { text-decoration: underline; }

/* Event date-block cards */
.event-cards { display: flex; flex-direction: column; gap: 10px; }
.event-card {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  gap: 14px; align-items: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 14px;
  text-decoration: none; color: var(--ink);
  transition: border-color 0.12s ease, transform 0.08s ease;
}
.event-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.event-date-block {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent);
  border-radius: 10px; padding: 10px 6px; width: 72px;
}
.edb-month { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.edb-day { font-size: 26px; font-weight: 700; line-height: 1; margin: 2px 0; letter-spacing: -0.02em; }
.edb-weekday { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.event-card-title { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.event-card-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.event-card-meta .meta-item::after { content: '·'; margin-left: 8px; color: var(--line); }
.event-card-meta .meta-item:last-child::after { display: none; }
.event-card-rsvp { display: flex; gap: 6px; align-items: center; font-size: 12px; }
.event-card-arrow { color: var(--muted); font-size: 22px; padding: 0 6px; }
.events-empty { padding: 20px; background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); text-align: center; }

/* Spotlight card */
.spotlight-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center;
}
.spotlight-label {
  font-size: 11px; font-weight: 600; color: var(--accent);
  text-transform: uppercase; letter-spacing: 0.08em; align-self: flex-start;
}
.spotlight-body {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-decoration: none; color: var(--ink); padding: 6px 0 0;
}
.spotlight-avatar {
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--accent); color: white; font-weight: 700; font-size: 26px;
  display: flex; align-items: center; justify-content: center;
  text-transform: uppercase; overflow: hidden;
  margin-bottom: 6px;
}
.spotlight-avatar img { width: 100%; height: 100%; object-fit: cover; }
.spotlight-name { font-size: 17px; font-weight: 600; }
.spotlight-household { font-size: 13px; color: var(--muted); }
.spotlight-place { font-size: 12px; color: var(--muted); }
.spotlight-bio { font-size: 13px; color: var(--ink); margin-top: 6px; line-height: 1.4; }
.spotlight-linkedin {
  margin-top: 12px; padding: 10px 18px;
  background: #0A66C2; color: white; text-decoration: none; font-weight: 500; font-size: 13px;
  border-radius: 6px; width: 100%; text-align: center;
}
.spotlight-linkedin:hover { background: #084b92; }

/* LinkedIn hero on profile */
.linkedin-hero {
  display: flex; flex-direction: column; gap: 2px;
  background: linear-gradient(135deg, #0A66C2, #084b92);
  color: white; text-decoration: none;
  padding: 14px 18px; border-radius: var(--radius);
  margin-bottom: 20px;
}
.linkedin-hero:hover { filter: brightness(1.06); }
.linkedin-hero-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
.linkedin-hero-headline { font-size: 16px; font-weight: 600; margin-top: 2px; }
.linkedin-hero-cta { font-size: 13px; opacity: 0.95; margin-top: 4px; }

/* Small in-line LinkedIn icon */
.linkedin-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 3px;
  background: #0A66C2; color: white; font-size: 10px; font-weight: 700;
  text-decoration: none; margin-left: 6px; vertical-align: middle;
  font-family: -apple-system, sans-serif;
}
.linkedin-ico:hover { background: #084b92; }

/* Cards */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  text-decoration: none;
  color: var(--ink);
  display: block;
  transition: transform 0.08s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.card:hover { transform: translateY(-1px); box-shadow: var(--shadow); border-color: #d1d5db; }
.card-title { font-weight: 600; font-size: 15px; margin-bottom: 2px; }
.card-sub { color: var(--muted); font-size: 13px; }
.card-meta { color: var(--muted); font-size: 12px; margin-top: 8px; }

/* Search */
.scope-toggle { display: flex; gap: 4px; margin-bottom: 14px; padding: 4px; background: #f3f4f6; border-radius: 10px; width: fit-content; }
.scope-tab { padding: 6px 14px; border-radius: 7px; text-decoration: none; color: var(--muted); font-size: 13px; font-weight: 500; }
.scope-tab:hover { color: var(--ink); }
.scope-tab.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,0.05); }

.search-bar { display: flex; gap: 8px; margin-bottom: 16px; }
.search-bar input[type=search] {
  flex: 1; padding: 10px 12px; font-size: 14px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--ink);
}
.search-bar input[type=search]:focus { outline: none; border-color: var(--accent); }
.search-bar button {
  padding: 10px 16px; background: var(--accent); color: white;
  border: none; border-radius: 8px; font-size: 14px; font-weight: 500;
  cursor: pointer;
}
.search-bar button:hover { filter: brightness(1.08); }
.btn-link { padding: 10px 12px; color: var(--muted); text-decoration: none; font-size: 14px; align-self: center; }

/* Roster table */
.roster {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.roster th, .roster td {
  padding: 10px 14px; text-align: left; font-size: 14px;
  border-bottom: 1px solid var(--line);
}
.roster thead th { background: #f3f4f1; font-weight: 600; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.roster tr:last-child td { border-bottom: none; }
.roster .contact a { color: var(--accent); text-decoration: none; }
.roster .contact a:hover { text-decoration: underline; }
.roster .phone { color: var(--muted); font-size: 13px; }
.person-link { color: var(--ink); text-decoration: none; font-weight: 500; }
.person-link:hover { color: var(--accent); }

/* Tags */
.tag {
  display: inline-block; font-size: 10px; font-weight: 600; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px; margin-left: 6px; vertical-align: middle;
  letter-spacing: 0.05em;
}
.tag-guest { background: #fef3c7; color: var(--warn); }
.tag-minor { background: #dbeafe; color: #1e40af; }
.tag-deceased { background: #e5e7eb; color: #4b5563; font-style: italic; }

/* Member list (household page) */
.member-list { list-style: none; padding: 0; margin: 0; }
.member-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.member-row:last-child { border-bottom: none; }
.role-badge {
  font-size: 10px; text-transform: uppercase; font-weight: 600; letter-spacing: 0.05em;
  padding: 2px 8px; border-radius: 12px; background: var(--accent-soft); color: var(--accent);
}
.role-badge.role-child { background: #fef9c3; color: #854d0e; }
.inline-email { color: var(--muted); font-size: 13px; text-decoration: none; }
.inline-email:hover { color: var(--ink); }
.inline-phone { color: var(--muted); font-size: 13px; }

/* Person page */
.person-hero {
  display: flex; align-items: center; gap: 20px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px; margin-bottom: 20px;
}
.avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--accent); color: white; font-weight: 700; font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  text-transform: uppercase; flex-shrink: 0; overflow: hidden;
}
.avatar.avatar-photo { background: var(--line); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

.avatar-mini {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: white; font-weight: 600; font-size: 11px;
  text-transform: uppercase; flex-shrink: 0; overflow: hidden;
  margin-right: 8px; vertical-align: middle;
}
.avatar-mini.avatar-mini-photo { background: var(--line); }
.avatar-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.person-link-with-avatar { display: inline-flex; align-items: center; }

.headshot-edit {
  display: flex; align-items: center; gap: 16px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; margin-bottom: 20px;
}
.headshot-edit-preview {
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--accent); color: white; font-weight: 700; font-size: 32px;
  display: flex; align-items: center; justify-content: center;
  text-transform: uppercase; overflow: hidden; flex-shrink: 0;
}
.headshot-edit-preview img { width: 100%; height: 100%; object-fit: cover; }
.headshot-edit-initials { line-height: 1; }
.headshot-edit-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.headshot-upload-form { display: inline; }
.headshot-file-label { cursor: pointer; display: inline-block; }
.headshot-file-label input[type="file"] { display: none; }

.template-mgmt-list { list-style: none; padding: 0; margin: 0; }
.template-mgmt-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 10px;
}
.template-mgmt-body { flex: 1; min-width: 0; }
.template-mgmt-label { font-weight: 600; }
.template-mgmt-title { font-size: 13px; margin-top: 2px; }
.template-mgmt-desc { font-size: 13px; margin-top: 4px; color: var(--ink); }

.nav-notifs { position: relative; }

.notif-list { list-style: none; padding: 0; margin: 0; }
.notif-row {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 8px;
}
.notif-row.notif-unread {
  background: #f0f7ef; border-color: #a9c9ad;
}
.notif-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent); color: white; font-weight: 600; font-size: 13px;
  text-transform: uppercase; flex-shrink: 0; overflow: hidden;
  text-decoration: none;
}
.notif-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.notif-body { flex: 1; min-width: 0; }
.notif-text { font-size: 14px; line-height: 1.4; }
.notif-time { font-size: 11px; margin-top: 4px; }
.person-hero h1 { margin: 0 0 4px; font-size: 22px; }

.two-col {
  display: grid; gap: 24px;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 20px;
}
@media (max-width: 720px) { .two-col { grid-template-columns: 1fr; } }

.kv { margin: 0; }
.kv dt { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 10px; }
.kv dt:first-child { margin-top: 0; }
.kv dd { margin: 2px 0 0; font-size: 14px; }
.kv a { color: var(--accent); text-decoration: none; }
.kv a:hover { text-decoration: underline; }

.rel-list { list-style: none; padding: 0; margin: 0; }
.rel-list li { padding: 6px 0; font-size: 14px; }
.rel-kind {
  display: inline-block; width: 110px; color: var(--muted);
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em;
}
.rel-list a { color: var(--ink); text-decoration: none; }
.rel-list a:hover { color: var(--accent); }

.rel-dl { margin: 0; }
.rel-dl dt {
  color: var(--muted); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.05em; margin-top: 12px;
}
.rel-dl dt:first-child { margin-top: 0; }
.rel-dl dd { margin: 2px 0 0; font-size: 14px; line-height: 1.5; }
.rel-dl a { color: var(--ink); text-decoration: none; }
.rel-dl a:hover { color: var(--accent); }

/* Gift chips */
.gift-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.gift-chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 6px 12px; border-radius: 16px; text-decoration: none;
  background: var(--accent-soft); color: var(--accent); font-size: 13px;
  border: 1px solid transparent;
}
.gift-chip:hover { border-color: var(--accent); }
.gift-kind { font-weight: 600; text-transform: capitalize; }
.gift-label { color: var(--ink); font-size: 12px; }

/* Nav */
.nav-me { color: var(--ink) !important; font-weight: 500; }
.nav-muted { color: var(--muted) !important; font-size: 12px; }

/* Dropdown in nav (using <details>/<summary>) */
.nav-dropdown { position: relative; }
.nav-dropdown > summary {
  list-style: none; cursor: pointer;
  color: var(--muted); text-decoration: none; font-size: 14px;
  padding: 0;
}
.nav-dropdown > summary::-webkit-details-marker { display: none; }
.nav-dropdown > summary::after {
  content: ' ▾'; font-size: 10px; color: var(--muted);
}
.nav-dropdown > summary:hover,
.nav-dropdown[open] > summary { color: var(--ink); }
.nav-dropdown .dropdown-menu {
  position: absolute; top: 100%; left: 0;
  margin-top: 10px; min-width: 160px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.08);
  padding: 6px; z-index: 100;
  display: flex; flex-direction: column;
}
.nav-dropdown .dropdown-menu a {
  padding: 8px 12px; border-radius: 6px;
  color: var(--ink); text-decoration: none; font-size: 14px;
}
.nav-dropdown .dropdown-menu a:hover { background: var(--accent-soft); color: var(--accent); }

@media (max-width: 680px) {
  .nav-dropdown .dropdown-menu {
    position: static; margin-top: 6px; box-shadow: none;
    border: 1px dashed var(--line);
  }
}

/* My-account dropdown sits in the top-right corner — align the menu to
   that edge so it drops straight down without spilling off screen. */
.nav-dropdown .dropdown-menu-right { left: auto; right: 0; }
.nav-me-dropdown > summary::after { content: ''; }
.nav-me-dropdown > summary { padding: 0 !important; background: none !important; }
.dropdown-menu .dropdown-danger { color: var(--danger); }
.dropdown-menu .dropdown-danger:hover { background: #fee2e2; color: var(--danger); }

.nav-admin {
  color: var(--accent) !important; font-weight: 600;
  border: 1px solid var(--accent-soft); padding: 2px 8px; border-radius: 6px;
}
.nav-admin:hover { background: var(--accent-soft); }

/* Auth */
/* ═══ Welcome / login screen ═════════════════════════════════════════════ */
/* ── Auth pages: full-bleed dark, gradient glow, no boxes ───────────────── */
.auth-page {
  position: relative; overflow: hidden;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
  background: radial-gradient(circle at 20% 10%, rgba(0,233,246,0.25), transparent 55%),
              radial-gradient(circle at 85% 90%, rgba(242,41,158,0.28), transparent 55%),
              radial-gradient(circle at 60% 40%, rgba(136,82,247,0.35), transparent 60%),
              #020208;
  color: #fff;
  margin: -24px -20px;  /* Cancel the .wrap padding so background is full-bleed. */
}
.auth-card {
  width: 100%; max-width: 440px;
  background: transparent;
  border: none; border-radius: 0;
  padding: 0;
  box-shadow: none;
  text-align: center;
  position: relative; z-index: 1;
}
.auth-logo {
  display: block;
  width: 100%; max-width: 340px; height: auto;
  margin: 0 auto 20px;
  object-fit: contain;
  filter: drop-shadow(0 12px 40px rgba(136,82,247,0.45));
}
.auth-title {
  font-size: 28px; font-weight: 800; margin: 0 0 10px; color: #fff;
  letter-spacing: -0.02em;
}
.auth-sub {
  color: rgba(255,255,255,0.72); font-size: 15px; line-height: 1.5;
  margin: 0 0 26px; max-width: 360px; margin-left: auto; margin-right: auto;
}
.auth-alert {
  text-align: left; margin: 0 0 20px;
  border-radius: 14px; font-size: 14px; line-height: 1.5;
  background: rgba(255,255,255,0.08); color: #fff; border: none;
}
.auth-alert.alert-ok { background: rgba(0,233,246,0.14); color: #00e9f6; }
.auth-alert.alert-warn { background: rgba(242,41,158,0.14); color: #f2299e; }
.auth-alert code { background: rgba(255,255,255,0.12); color: #fff; padding: 2px 8px; border-radius: 6px; }
.auth-form {
  display: flex; flex-direction: column; gap: 12px;
  text-align: left;
}
.auth-label {
  display: flex; flex-direction: column; gap: 8px;
  font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.65);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.auth-label input {
  padding: 16px 18px;
  font-size: 16px;  /* 16px stops iOS from zooming on focus */
  border: 1.5px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: #fff;
  -webkit-appearance: none; appearance: none;
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.auth-label input::placeholder { color: rgba(255,255,255,0.4); }
.auth-label input:focus {
  outline: none;
  border-color: var(--yodi-cyan);
  background: rgba(255,255,255,0.12);
  box-shadow: 0 0 0 4px rgba(0,233,246,0.18);
}
.auth-submit {
  padding: 16px 20px;
  font-size: 16px; font-weight: 800;
  border-radius: 999px;
  margin-top: 8px;
  background: var(--yodi-gradient);
  color: #fff; border: none; cursor: pointer;
  box-shadow: 0 8px 24px rgba(136,82,247,0.35);
  transition: transform .12s ease, box-shadow .18s;
  letter-spacing: 0.01em;
}
.auth-submit:hover { transform: translateY(-1px); box-shadow: 0 12px 32px rgba(242,41,158,0.45); }
.auth-submit:active { transform: translateY(0); }
.auth-fineprint {
  font-size: 12.5px; line-height: 1.55; text-align: center;
  margin: 14px 0 0; color: rgba(255,255,255,0.5);
}
.auth-secondary {
  display: inline-block; margin-top: 18px;
  color: var(--yodi-cyan); font-size: 13px; text-decoration: none;
  font-weight: 600;
}
.auth-secondary:hover { text-decoration: underline; }

@media (max-width: 480px) {
  .auth-page { padding: 28px 18px; }
  .auth-card { padding: 0; }
  .auth-title { font-size: 24px; }
  .auth-logo { max-width: 280px; }
}

/* Legacy class — kept so other auth surfaces don't break, but the login page
   uses the new .auth-page / .auth-card layout above. */
.auth-wrap { max-width: 440px; margin: 40px auto; }
.auth-wrap h1 { font-size: 24px; margin: 0 0 8px; }

.game-turn-banner {
  display: flex; align-items: center; gap: 12px;
  background: var(--accent); color: #fff; border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 14px; text-decoration: none;
  transition: opacity .15s;
}
.game-turn-banner:hover { opacity: .92; }
.game-turn-banner strong { display: block; font-size: 15px; }
.game-turn-banner-sub { font-size: 12px; opacity: .85; }
.game-turn-banner-cta { margin-left: auto; font-size: 13px; font-weight: 600; white-space: nowrap; display: flex; align-items: center; gap: 2px; }

.alert { padding: 12px 14px; border-radius: 8px; font-size: 14px; margin: 16px 0; }
.alert-ok { background: var(--accent-soft); color: var(--accent); }
.alert-warn { background: #fef3c7; color: var(--warn); }
.alert-info { background: #dbeafe; color: #1e40af; }
.alert code { background: rgba(0,0,0,0.05); padding: 1px 6px; border-radius: 4px; }

/* Buttons */
.btn-primary {
  display: inline-block; padding: 10px 18px;
  background: var(--yodi-purple); color: #fff;
  border: none; border-radius: 999px; font-size: 14px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background .15s ease, transform .12s ease;
}
.btn-primary:hover { background: #7342e6; transform: translateY(-1px); }
/* Hero CTA that wants the gradient shine — only use sparingly. */
.btn-primary.btn-gradient { background: var(--yodi-gradient); font-weight: 700; box-shadow: 0 4px 14px rgba(136,82,247,0.25); }
.btn-outline {
  display: inline-block; padding: 8px 16px; background: transparent; color: var(--yodi-purple);
  border: 1.5px solid var(--yodi-purple); border-radius: 999px; font-size: 13px; font-weight: 600;
  text-decoration: none; cursor: pointer;
}
.btn-outline:hover { background: var(--accent-soft); }
.btn-tiny-danger {
  padding: 4px 10px; background: transparent; border: 1px solid var(--line);
  color: var(--danger); border-radius: 6px; font-size: 11px; cursor: pointer;
}
.btn-tiny-danger:hover { border-color: var(--danger); background: #fef2f2; }

.flex-between { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }

/* Event template picker */
.template-picker { margin-bottom: 22px; }
.template-picker-heading {
  display: grid; grid-template-columns: 1fr auto 2fr; gap: 14px; align-items: stretch;
  margin-bottom: 12px;
}
.template-or {
  align-self: center; color: var(--muted); font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.template-big {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; text-align: left; cursor: pointer; font: inherit; color: var(--ink);
  transition: border-color 0.12s ease, transform 0.08s ease;
}
.template-big:hover { border-color: var(--accent); transform: translateY(-1px); }
.template-big.active { border-color: var(--accent); background: var(--accent-soft); }
.tb-icon { font-size: 22px; }
.tb-label { font-weight: 600; font-size: 15px; }
.tb-sub { color: var(--muted); font-size: 12px; }

.template-category-box {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px;
}
.template-category-label {
  font-size: 11px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px;
}
.template-categories { display: flex; gap: 8px; flex-wrap: wrap; }
.template-cat-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; background: var(--bg); border: 1px solid var(--line);
  border-radius: 20px; cursor: pointer; font: inherit; color: var(--ink); font-size: 13px;
}
.template-cat-btn:hover { border-color: var(--accent); }
.template-cat-btn.active { background: var(--accent); color: white; border-color: var(--accent); }
.tc-icon { font-size: 15px; }

.template-list {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; margin-top: 10px;
}
.template-list-label { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.04em; }
.template-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.template-chip {
  padding: 8px 14px; background: var(--bg); border: 1px solid var(--line);
  border-radius: 16px; cursor: pointer; font: inherit; font-size: 13px; color: var(--ink);
}
.template-chip:hover { border-color: var(--accent); color: var(--accent); }
.template-chip.active { background: var(--accent); color: white; border-color: var(--accent); }

@media (max-width: 680px) {
  .template-picker-heading { grid-template-columns: 1fr; }
  .template-or { text-align: center; padding: 6px 0; }
}

/* `hidden` should actually hide even when a rule sets display */
[hidden] { display: none !important; }

/* Fieldset sections in the form */
.form-fieldset {
  grid-column: 1 / -1;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; margin: 0;
  background: var(--bg);
}
.form-fieldset legend {
  font-size: 11px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em; padding: 0 6px;
}
.radio-row { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 4px; }
.form-grid .radio-opt,
.radio-opt {
  display: flex; flex-direction: row; align-items: center; gap: 8px;
  font-size: 14px; cursor: pointer;
  text-transform: none; letter-spacing: normal; color: var(--ink);
  font-weight: normal;
}
.radio-opt input[type=radio] { width: 16px; height: 16px; cursor: pointer; }
.radio-opt small { font-weight: normal; }
.loc-sub {
  margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--line);
  display: flex; flex-direction: column; gap: 10px;
}
.form-grid .loc-sub label,
.loc-sub label {
  display: flex; flex-direction: column; gap: 4px;
  text-transform: uppercase; letter-spacing: 0.04em; font-size: 12px; color: var(--muted);
}

/* Invite scope pills */
.scope-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 12px; }
.form-grid .scope-pill,
.scope-pill {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 8px 14px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 20px; font-size: 13px; text-transform: none; letter-spacing: normal;
  font-weight: normal; color: var(--ink);
}
.scope-pill input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.scope-pill:hover { border-color: var(--accent); }
.scope-pill:has(input:checked) { background: var(--accent); color: white; border-color: var(--accent); }

/* Custom invite picker */
.custom-picker {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line);
}
@media (max-width: 680px) { .custom-picker { grid-template-columns: 1fr; } }
.cp-label { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.household-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  max-height: 260px; overflow-y: auto; padding: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
}
@media (max-width: 680px) { .household-grid { grid-template-columns: 1fr; } }
.form-grid .household-check,
.household-check {
  display: flex; flex-direction: row; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: 4px;
  font-size: 13px; cursor: pointer;
  text-transform: none; letter-spacing: normal; color: var(--ink); font-weight: normal;
}
.household-check:hover { background: var(--accent-soft); }
.household-check input { flex-shrink: 0; }

.picker-search {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px;
  font-size: 13px; background: var(--surface); margin-bottom: 6px;
}
.picker-results {
  max-height: 230px; overflow-y: auto; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
}
.form-grid .picker-row,
.picker-row {
  display: flex; flex-direction: row; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: 4px; cursor: pointer;
  font-size: 13px; text-transform: none; letter-spacing: normal; color: var(--ink); font-weight: normal;
}
.picker-row:hover { background: var(--accent-soft); }

/* Forms */
.form-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px; margin-bottom: 24px;
}
.form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
@media (max-width: 680px) { .form-grid { grid-template-columns: 1fr; } }
.form-grid label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em;
}
.form-grid label.full { grid-column: 1 / -1; }
.form-grid input,
.form-grid select,
.form-grid textarea {
  padding: 9px 11px; font-size: 14px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--surface); color: var(--ink);
  text-transform: none; letter-spacing: normal;
  font-family: inherit;
}
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus { outline: none; border-color: var(--accent); }
.form-grid .inline-check {
  flex-direction: row; align-items: center; gap: 8px; text-transform: none; font-size: 14px; color: var(--ink);
}
.form-actions { margin-top: 16px; display: flex; gap: 12px; align-items: center; }
.form-actions button {
  padding: 10px 18px; background: var(--accent); color: white;
  border: none; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer;
}
.form-actions button:hover { filter: brightness(1.08); }

.gift-edit-list { list-style: none; padding: 0; margin: 0 0 14px 0; display: flex; flex-direction: column; gap: 8px; }
.gift-edit-list li { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.gift-add-form {
  display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap;
  padding: 14px; border: 1px dashed var(--line); border-radius: 8px; background: var(--bg);
}
.gift-add-form select,
.gift-add-form input { padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); font-size: 14px; }
.gift-add-form input[type=text] { flex: 1; min-width: 200px; }
.gift-add-form button {
  padding: 8px 16px; background: var(--accent); color: white; border: none; border-radius: 6px; font-size: 13px; cursor: pointer;
}

/* Event list */
.event-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.event-row {
  display: grid; grid-template-columns: 180px 1fr auto auto; gap: 12px; align-items: center;
  padding: 12px 14px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; text-decoration: none; color: var(--ink);
}
.event-row:hover { border-color: var(--accent); }
.event-date { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.event-title { font-weight: 500; }
.event-host { color: var(--muted); font-size: 12px; }
.event-meta { color: var(--accent); font-size: 12px; font-weight: 500; }
.event-list-muted .event-row { background: transparent; color: var(--muted); }
@media (max-width: 680px) {
  .event-row { grid-template-columns: 1fr; gap: 4px; }
}

/* Person hero extra */
.person-hero-body { flex: 1; }

/* RSVP */
.rsvp-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 18px; margin-bottom: 20px;
}
.rsvp-counts { display: flex; flex-wrap: wrap; gap: 8px; }
.rsvp-pill { padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 500; }
.rsvp-yes, .rsvp-tag-yes { background: var(--accent-soft); color: var(--accent); }
.rsvp-maybe, .rsvp-tag-maybe { background: #fef3c7; color: var(--warn); }
.rsvp-no, .rsvp-tag-no { background: #fee2e2; color: var(--danger); }
.rsvp-pending, .rsvp-tag-pending { background: #f3f4f6; color: var(--muted); }

.rsvp-form { display: flex; align-items: center; gap: 6px; }
.rsvp-label { font-size: 13px; color: var(--muted); margin-right: 4px; }
.rsvp-btn {
  padding: 8px 14px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; font-size: 13px; cursor: pointer;
}
.rsvp-btn:hover { border-color: var(--accent); }
.rsvp-btn.active { background: var(--accent); color: white; border-color: var(--accent); }

.invite-list { list-style: none; padding: 0; margin: 0; }
.invite-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--line);
}
.invite-row:last-child { border-bottom: none; }
.invite-row a { color: var(--ink); text-decoration: none; }
.invite-row a:hover { color: var(--accent); }
.rsvp-tag { padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 500; text-transform: capitalize; }

/* ═════════ Messages v2 — Instagram DM + iMessage style ═════════ */
.unread-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 6px;
  background: var(--danger); color: white; border-radius: 10px;
  font-size: 11px; font-weight: 700; margin-left: 4px;
}
.nav-messages { position: relative; }

/* ---------- Inbox ---------- */
.dm-page { max-width: 640px; margin: 0 auto; }
.dm-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0 14px; border-bottom: 1px solid var(--line); margin-bottom: 8px;
}
.dm-head h1 { margin: 0; font-size: 22px; letter-spacing: -0.02em; }
.dm-compose-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink); text-decoration: none; font-size: 18px;
  transition: background 0.1s ease, border-color 0.1s ease;
}
.dm-compose-btn:hover { border-color: var(--accent); background: var(--accent-soft); }

.dm-list { list-style: none; padding: 0; margin: 0; }
.dm-item {
  display: grid; grid-template-columns: 52px 1fr auto; gap: 12px;
  align-items: center; padding: 10px 8px; border-radius: 12px;
  text-decoration: none; color: var(--ink);
}
.dm-item:hover { background: var(--bg); }
.dm-item.unread .dm-name { font-weight: 700; }
.dm-item.unread .dm-preview { color: var(--ink); font-weight: 500; }
.dm-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--accent); color: white; font-weight: 700; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  text-transform: uppercase; overflow: hidden;
}
.dm-content { min-width: 0; }
.dm-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.dm-name { font-size: 15px; line-height: 1.2; }
.dm-time { font-size: 11px; color: var(--muted); flex-shrink: 0; }
.dm-preview {
  font-size: 13px; color: var(--muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dm-preview strong { color: var(--muted); font-weight: 500; }
.dm-badge-col { display: flex; align-items: center; gap: 4px; }
.dm-eye { font-size: 14px; opacity: 0.6; }

.dm-empty {
  padding: 40px 20px; text-align: center;
  background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius);
}
.dm-empty p { color: var(--muted); margin-bottom: 14px; }

/* ---------- Compose ---------- */
.dm-compose-page { max-width: 640px; margin: 0 auto; }
.dm-compose-head {
  display: grid; grid-template-columns: 40px 1fr 80px; align-items: center; gap: 10px;
  padding: 6px 0 10px; border-bottom: 1px solid var(--line); margin-bottom: 12px;
}
.dm-back {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink); text-decoration: none; font-size: 20px; background: var(--surface);
  border: 1px solid var(--line);
}
.dm-back:hover { border-color: var(--accent); }
.dm-compose-title { font-weight: 600; font-size: 16px; }
.dm-compose-next {
  padding: 8px 16px; background: var(--accent); color: white; border: none;
  border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 14px;
}
.dm-compose-next:disabled { background: var(--line); color: var(--muted); cursor: not-allowed; }
.dm-compose-mode {
  color: var(--muted); font-size: 12px; text-align: right; white-space: nowrap;
}

.dm-composer {
  position: sticky; bottom: 0; z-index: 2;
  display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end;
  padding: 10px 12px; margin-top: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
}
.dm-composer textarea {
  width: 100%; min-height: 40px; max-height: 160px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 14px; font-family: inherit; resize: vertical; background: var(--bg);
}
.dm-send {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px; background: var(--accent); color: white; border: none;
  border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 14px; white-space: nowrap;
}
.dm-send:disabled { background: var(--line); color: var(--muted); cursor: not-allowed; }
.dm-person-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.dm-person-nick { color: var(--muted); font-weight: 400; font-style: italic; }
.dm-people-empty { padding: 20px 12px; text-align: center; color: var(--muted); font-size: 13px; }

.dm-channel-name-row {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 14px; border-bottom: 1px solid var(--line);
  background: var(--surface); border-radius: 12px 12px 0 0;
}
.dm-channel-hash {
  font-size: 22px; font-weight: 700; color: var(--yodi-purple); line-height: 1; flex-shrink: 0;
}
.dm-channel-name-row input[type=text] {
  flex: 1; border: none; background: transparent; outline: none;
  font-size: 18px; font-weight: 600; color: var(--ink); padding: 2px 0;
}
.dm-channel-name-row input[type=text]::placeholder { color: var(--muted); font-weight: 400; }
.dm-to-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface);
  border-radius: 0;
}
.dm-to-label { color: var(--muted); font-size: 13px; }
.dm-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.dm-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 6px 4px 10px; background: var(--accent-soft); color: var(--accent);
  border-radius: 14px; font-size: 13px;
}
.dm-chip button { background: transparent; border: none; color: var(--accent); cursor: pointer; font-size: 16px; padding: 0 4px; }
.dm-to-row input[type=text] { flex: 1; min-width: 120px; padding: 4px 0; border: none; background: transparent; font-size: 14px; outline: none; }
.dm-group-name { padding: 10px 12px; background: var(--surface); border-bottom: 1px solid var(--line); }
.dm-group-name input { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }

.dm-people {
  background: var(--surface); border: 1px solid var(--line);
  border-top: none; border-radius: 0 0 12px 12px;
  max-height: 58vh; overflow-y: auto;
}
.dm-person {
  display: grid; grid-template-columns: 40px 1fr 20px; gap: 10px; align-items: center;
  padding: 8px 12px; cursor: pointer;
  text-transform: none; letter-spacing: normal; font-size: 14px; color: var(--ink); font-weight: normal;
  border-bottom: 1px solid var(--line);
}
.dm-person:last-child { border-bottom: none; }
.dm-person:hover { background: var(--bg); }
.dm-person input[type=checkbox] { position: absolute; opacity: 0; }
.dm-person-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent); color: white; font-weight: 700; font-size: 12px;
  display: flex; align-items: center; justify-content: center; text-transform: uppercase;
}
.dm-person-meta { min-width: 0; }
.dm-person-name { font-weight: 500; font-size: 14px; }
.dm-person-sub { font-size: 12px; }
.dm-person-check {
  width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line);
  display: flex; align-items: center; justify-content: center; color: transparent; font-size: 12px;
}
.dm-person:has(input:checked) .dm-person-check { background: var(--accent); border-color: var(--accent); color: white; }

/* ---------- Chat view (iMessage/Instagram style) ---------- */
.chat-page {
  display: flex; flex-direction: column; max-width: 760px; margin: 0 auto;
  min-height: calc(100vh - 160px);
}
.chat-bar {
  display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 10px;
  padding: 6px 0 10px; border-bottom: 1px solid var(--line); margin-bottom: 8px;
  position: sticky; top: 0; z-index: 10; background: var(--bg);
}
.chat-back {
  width: 36px; height: 36px; border-radius: 50%; background: var(--surface);
  border: 1px solid var(--line); color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; font-size: 20px;
}
.chat-back:hover { border-color: var(--accent); }
.chat-peer { display: flex; align-items: center; gap: 10px; min-width: 0; }
.chat-peer-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--accent); color: white; font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.chat-peer-meta { min-width: 0; }
.chat-peer-name { font-weight: 600; font-size: 15px; line-height: 1.2; }
.chat-peer-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }

.chat-info { position: relative; }
.chat-info summary {
  list-style: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 16px; color: var(--muted);
}
.chat-info summary::-webkit-details-marker { display: none; }
.chat-info summary:hover { border-color: var(--accent); color: var(--accent); }
.chat-info-pop {
  position: absolute; right: 0; top: 44px; z-index: 15;
  min-width: 240px; max-height: 400px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,0.08);
  padding: 10px;
}
.chat-info-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 6px; }
.chat-info-member {
  display: flex; align-items: center; gap: 8px; padding: 6px;
  text-decoration: none; color: var(--ink); font-size: 13px; border-radius: 8px;
}
.chat-info-member:hover { background: var(--accent-soft); }
.chat-info-avatar {
  width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: white;
  font-weight: 700; font-size: 10px; display: flex; align-items: center; justify-content: center;
  overflow: hidden; text-transform: uppercase;
}
.chat-info-avatar img { width: 100%; height: 100%; object-fit: cover; }

.chat-stream {
  flex: 1; overflow-y: auto; padding: 8px 4px 16px;
  display: flex; flex-direction: column; gap: 2px;
}
.chat-empty-state { text-align: center; padding: 60px 20px; color: var(--muted); }
.chat-empty-icon { font-size: 40px; margin-bottom: 10px; }
.chat-empty-text { font-size: 14px; }

.chat-time-divider {
  text-align: center; font-size: 11px; color: var(--muted);
  margin: 14px 0 6px;
}

.msg-row { display: flex; gap: 6px; align-items: flex-end; margin-top: 6px; }
.msg-row.stacked { margin-top: 1px; }
.msg-row.out { flex-direction: row-reverse; }
.msg-avatar-slot { width: 28px; flex-shrink: 0; }
.msg-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: white; font-weight: 700; font-size: 10px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; text-transform: uppercase;
  text-decoration: none;
}
.msg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.msg-wrap { max-width: 75%; display: flex; flex-direction: column; }
.msg-row.out .msg-wrap { align-items: flex-end; }
.msg-author-label {
  font-size: 11px; color: var(--muted); font-weight: 500; padding: 0 10px; margin-bottom: 2px;
}
.msg-bubble {
  padding: 8px 14px; border-radius: 18px; background: var(--surface);
  border: 1px solid var(--line); font-size: 15px; line-height: 1.35;
  word-wrap: break-word; overflow-wrap: anywhere;
}
.msg-row.out .msg-bubble {
  background: var(--accent); color: white; border-color: var(--accent);
}
.msg-row.stacked.in .msg-bubble { border-top-left-radius: 6px; }
.msg-row.stacked.out .msg-bubble { border-top-right-radius: 6px; }
.msg-body { white-space: pre-wrap; }
.msg-bubble audio { display: block; max-width: 100%; margin-top: 2px; }
.msg-row.out .msg-bubble audio { filter: invert(1) hue-rotate(180deg); }

/* ---------- Composer ---------- */
.chat-input {
  display: flex; gap: 8px; align-items: center;
  padding: 8px 4px 10px;
  position: sticky; bottom: 0; background: var(--bg); z-index: 5;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}
.chat-input-box {
  flex: 1; display: flex; align-items: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 22px; padding: 6px 4px 6px 14px; min-height: 40px;
}
.chat-input-box input[type=text] {
  flex: 1; border: none; background: transparent; outline: none;
  font-size: 15px; padding: 6px 0;
}
.chat-mic, .chat-send {
  width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.chat-mic { background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.chat-mic:hover { border-color: var(--accent); }
.chat-send {
  background: var(--yodi-gradient, linear-gradient(90deg,#00e9f6 0%,#8852f7 50%,#f2299e 100%));
  color: white; font-weight: 700;
}
.chat-send:hover { filter: brightness(1.08); }

/* ─── Mobile/desktop visibility helpers ────────────────────────────────────
   Elements marked .desktop-hide are for desktop only — they vanish on
   touch/mobile viewports so the mobile composer doesn't double up its
   actions (Call, Image, Video, GIF, Challenge are now inside the + sheet). */
.desktop-hide { display: inline-flex; }
@media (max-width: 719px) {
  .desktop-hide { display: none !important; }
}
@media (min-width: 720px) {
  /* And the + button + its sheet only exist on mobile — hide on desktop */
  .chat-plus, .chat-plus-sheet, .chat-plus-backdrop { display: none !important; }
}

/* ─── Long-press message action sheet (mobile) ─────────────────────────────
   On touch devices, a long press on any message bubble opens this bottom
   sheet with emoji reactions + reply/edit/pin/delete actions. Triple-dot
   menus on every bubble are hidden on touch to make room for the long-press
   pattern (see .msg-actions hide below). */
.msg-sheet-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.35);
  opacity: 0; pointer-events: none;
  transition: opacity 0.18s ease;
  z-index: 160;
}
.msg-sheet-backdrop.open { opacity: 1; pointer-events: auto; }
.msg-action-sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--surface);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 28px rgba(0,0,0,0.18);
  padding: 10px 18px 24px;
  transform: translateY(105%);
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 170;
}
.msg-action-sheet.open { transform: translateY(0); }
.msg-sheet-handle {
  width: 40px; height: 4px; border-radius: 999px;
  background: var(--line); margin: 4px auto 14px;
}
.msg-sheet-emojis {
  display: flex; gap: 8px; justify-content: space-around;
  padding: 6px 0 12px;
}
.msg-sheet-emojis button {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--line); border: 0; font-size: 22px;
  cursor: pointer;
}
.msg-sheet-emojis button:hover,
.msg-sheet-emojis button:active { background: var(--accent-soft, #ece3fb); }
.msg-sheet-divider {
  height: 1px; background: var(--line); margin: 4px 0;
}
.msg-sheet-actions {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 0 0;
}
.msg-sheet-actions button, .msg-sheet-actions form button {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 12px 10px;
  background: transparent; border: 0; cursor: pointer;
  font-size: 15px; color: var(--ink); text-align: left;
  border-radius: 8px;
}
.msg-sheet-actions button:hover { background: var(--line); }
.msg-sheet-actions .msg-sheet-danger { color: #dc2626; }

/* Hide the per-message triple-dot trigger on touch devices — long-press
   on the bubble opens the action sheet instead, freeing the bubble of
   clutter. The real class in the template is `.msg-actions-trigger`. */
@media (hover: none) and (pointer: coarse) {
  .msg-actions-trigger,
  .msg-actions,
  .msg-menu-btn,
  .msg-bubble-menu { display: none !important; }
}
/* Also disable iOS long-press text-selection/callout on message bubbles. */
.msg-bubble, .msg-body {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}

.rec-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: var(--surface); border: 1px solid var(--danger);
  border-radius: 22px;
}
.chat-input { position: relative; }
.rec-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--danger); animation: pulse 1s infinite;
}
.rec-timer { flex: 1; font-variant-numeric: tabular-nums; color: var(--danger); font-weight: 600; font-size: 14px; }
.rec-cancel, .rec-send {
  width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer; font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center;
}
.rec-cancel { background: var(--surface); border: 1px solid var(--line); color: var(--muted); }
.rec-send { background: var(--accent); color: white; font-weight: 700; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.chat-readonly {
  padding: 12px; background: var(--accent-soft); color: var(--accent);
  border-radius: var(--radius); text-align: center; font-size: 13px;
}

/* Person profile: Message button action row */
.person-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 680px) {
  .dm-item { padding: 8px 4px; }
  .chat-bar { padding: 6px 0; }
  .chat-stream { padding: 6px 0 12px; }
  .msg-wrap { max-width: 82%; }
  .chat-input-box input[type=text] { font-size: 16px; }
  .chat-peer-name { font-size: 14px; }
}

/* ═════════ Messages v3 — LinkedIn/Messenger two-column shell ═════════ */
/* Shell breaks out of .main padding (32px top, 20px sides, 56px bottom).
   `dvh` = dynamic viewport height — accounts for iOS Safari's collapsing
   URL bar so the composer is always anchored to the actual bottom edge,
   not the static layout height where it can be scrolled off-screen. */
.msg-shell {
  /* Break out of the 1080px-capped .wrap so messaging spans the full
     viewport width on desktop — gives the thread pane breathing room and
     keeps the rail flush-left instead of floating in the middle. */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: -32px;
  margin-bottom: -56px;
  /* Fallback first, then precise measured value. JS in base.html sets
     --yodi-header-h to the real rendered site-header height so the shell
     anchors the composer to the true viewport bottom on mobile Safari. */
  height: calc(100vh - 65px);
  height: calc(100dvh - var(--yodi-header-h, 65px));
  display: flex;
  overflow: hidden;
  background: var(--bg);
}

/* Left rail */
.msg-rail {
  width: 320px;
  min-width: 240px;
  flex-shrink: 0;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  overflow: hidden;
}
.msg-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 14px 10px;
  flex-shrink: 0;
}
.msg-rail-title { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.msg-rail-compose {
  width: 36px; height: 36px; border-radius: 50%;
  background: transparent; border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); text-decoration: none; transition: border-color 0.15s, color 0.15s;
}
.msg-rail-compose:hover { border-color: var(--accent); color: var(--accent); }
.msg-rail-search { padding: 0 12px 10px; flex-shrink: 0; }
.msg-rail-search input {
  width: 100%; background: var(--bg); border: 1px solid var(--line);
  border-radius: 20px; padding: 7px 14px; font-size: 14px; outline: none;
  box-sizing: border-box; color: var(--ink);
}
.msg-rail-search input:focus { border-color: var(--accent); }
.msg-rail-list { flex: 1; overflow-y: auto; padding-bottom: 12px; }
.msg-rail-section { margin-top: 6px; }
.msg-rail-section:first-child { margin-top: 0; }
.msg-rail-section-head {
  display: flex; align-items: center; gap: 6px; padding: 8px 14px 4px;
  cursor: pointer; user-select: none; list-style: none;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); font-weight: 700;
}
.msg-rail-section-head::-webkit-details-marker { display: none; }
.msg-rail-section-head:hover { color: var(--ink); }
.msg-rail-section-caret {
  display: inline-flex; transition: transform 0.15s;
}
.msg-rail-section:not([open]) .msg-rail-section-caret { transform: rotate(-90deg); }
.msg-rail-section-label { flex: 1; }
.msg-rail-section-count {
  color: var(--muted); opacity: 0.6; font-weight: 500;
  font-size: 10px; font-variant-numeric: tabular-nums;
}
.msg-rail-section-add {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 5px;
  color: var(--muted); font-size: 18px; font-weight: 300; line-height: 1;
  text-decoration: none;
  opacity: 0; transition: opacity 0.15s, background 0.12s, color 0.12s;
  flex-shrink: 0;
}
.msg-rail-section-head:hover .msg-rail-section-add { opacity: 1; }
.msg-rail-section-add:hover { background: var(--line); color: var(--ink) !important; }
.msg-rail-section-body { display: flex; flex-direction: column; }
.msg-rail-section-empty { padding: 4px 14px 10px; font-size: 12px; }
.msg-rail-section-empty a { color: var(--yodi-purple); text-decoration: none; font-weight: 600; }
.msg-rail-section-empty a:hover { text-decoration: underline; }
.msg-rail-hash { color: var(--muted); font-weight: 600; margin-right: 1px; }
.msg-rail-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; text-decoration: none; color: var(--ink);
  border-left: 3px solid transparent; position: relative;
  transition: background 0.1s;
}
.msg-rail-item:hover { background: var(--bg); }
.msg-rail-item.active { background: var(--accent-soft); border-left-color: var(--accent); }
.msg-rail-item.unread .msg-rail-name { font-weight: 700; }
.msg-rail-item.unread .msg-rail-preview { color: var(--ink); font-weight: 500; }
.msg-rail-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent); color: white; font-weight: 700; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden; text-transform: uppercase;
}
.msg-rail-avatar img { width: 100%; height: 100%; object-fit: cover; }
.msg-rail-avatar.icon-av { background: var(--line); color: var(--muted); font-size: 0; }
.msg-rail-body { flex: 1; min-width: 0; }
.msg-rail-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-bottom: 2px; }
.msg-rail-name { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-rail-time { font-size: 11px; color: var(--muted); flex-shrink: 0; }
.msg-rail-preview {
  font-size: 13px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.msg-rail-preview strong { color: var(--muted); font-weight: 500; }
.msg-rail-badge {
  background: var(--accent); color: white; font-size: 11px; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: 9px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.msg-rail-eye { color: var(--muted); opacity: 0.6; flex-shrink: 0; }
.msg-rail-empty { padding: 40px 16px; color: var(--muted); font-size: 14px; text-align: center; }

/* Right pane */
.msg-main {
  flex: 1; display: flex; flex-direction: column;
  overflow: hidden; min-width: 0;
}
/* Welcome state when no thread selected */
.msg-welcome {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; color: var(--muted);
}
.msg-welcome-icon { opacity: 0.25; color: var(--accent); }
.msg-welcome-title { font-size: 18px; font-weight: 600; color: var(--ink); }
.msg-welcome-sub { font-size: 14px; }
.msg-welcome .btn-primary { margin-top: 8px; }
/* Override chat-page positioning inside the shell */
.msg-main .chat-page {
  max-width: none; margin: 0; min-height: 0; flex: 1;
  height: 100%; overflow: hidden; display: flex; flex-direction: column;
}
.msg-main .chat-bar { padding: 10px 16px 10px; margin: 0; grid-template-columns: 1fr 40px; }
.msg-main .chat-stream { padding: 8px 20px 16px; }
.msg-main .chat-input { padding: 8px 20px 10px; }

/* Mobile: only show one pane at a time */
.mobile-only { display: none; }
@media (max-width: 720px) {
  .mobile-only { display: inline-flex; }
  .msg-shell { height: calc(100vh - 57px); height: calc(100dvh - var(--yodi-header-h, 57px)); margin: -16px -14px -48px; }
  .msg-shell.thread-open .msg-rail { display: none; }
  .msg-shell.inbox-open .msg-main { display: none; }
  .msg-rail { width: 100%; min-width: 0; }
  /* Restore the 3-column chat-bar on mobile so the back button, peer name,
     and info button each land in their own slot. The desktop override
     assumes only 2 visible children (back button is hidden on desktop). */
  .msg-main .chat-bar {
    grid-template-columns: 40px 1fr 40px;
    padding: 10px 12px;
  }
  .msg-main .chat-stream { padding: 8px 12px 12px; }
  .msg-main .chat-input { padding: 8px 12px 10px; }
}

/* ═════════ Post composer + post cards ═════════ */
.post-composer {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px; margin-bottom: 20px;
}
.composer-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent); color: white; font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  text-transform: uppercase; overflow: hidden; flex-shrink: 0;
}
.composer-avatar img { width: 100%; height: 100%; object-fit: cover; }
.composer-body { flex: 1; min-width: 0; }
.composer-body textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
  font: inherit; font-size: 14px; background: var(--bg); resize: vertical;
}
.composer-body textarea:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.composer-tools { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.composer-photo {
  cursor: pointer; color: var(--muted); font-size: 13px;
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px;
  display: inline-flex; align-items: center; gap: 4px;
}
.composer-photo:hover { border-color: var(--accent); color: var(--accent); }
.composer-photo input[type=file] { display: none; }
.composer-scope {
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface); font-size: 13px;
}
.composer-post { margin-left: auto; padding: 8px 18px; font-size: 14px; }

.post-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px;
}
.post-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.post-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent); color: white; font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  text-transform: uppercase; overflow: hidden; flex-shrink: 0;
  text-decoration: none;
}
.post-avatar img { width: 100%; height: 100%; object-fit: cover; }
.post-video { margin-top: 10px; border-radius: var(--radius); overflow: hidden; background: #000; }
.post-video video { width: 100%; max-height: 520px; display: block; background: #000; }

.composer-attach-row { margin: 6px 0 0; }
.composer-attach-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #efe8ff; border: 1px solid #d6c7ff; color: #8852f7;
  border-radius: 999px; padding: 4px 10px; font-size: 12px;
}
.composer-attach-clear {
  background: none; border: 0; color: #8852f7; cursor: pointer; font-size: 13px; line-height: 1;
}
.composer-record-btn {
  background: #fff; border: 1px solid var(--line); color: var(--ink);
  border-radius: 999px; padding: 6px 12px; font-size: 13px; cursor: pointer;
}
.composer-record-btn:hover { background: #fef2f2; border-color: #ef4444; color: #991b1b; }

.record-dialog { border: 0; border-radius: var(--radius); padding: 0; max-width: 480px; width: 94%; }
.record-dialog::backdrop { background: rgba(0,0,0,0.5); }
.record-dialog-body { padding: 20px; }
.record-preview { width: 100%; background: #000; border-radius: 8px; max-height: 320px; display: block; }
.record-timer { text-align: center; margin-top: 10px; font-weight: 600; color: #991b1b; font-variant-numeric: tabular-nums; }
.record-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; justify-content: center; }

.msg-video { max-width: 260px; max-height: 320px; border-radius: 10px; display: block; background: #000; margin-top: 4px; }

.chat-attach {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: #fff; border: 1px solid var(--line); cursor: pointer; font-size: 16px;
  flex-shrink: 0;
}
.chat-attach:hover { border-color: var(--accent); }

/* ─── Mobile "+" attach sheet ────────────────────────────────────────────
   Launched by the chat-plus button next to the Message input. Slides up
   from the bottom with a dimming backdrop. Sheet + backdrop are hidden by
   default; .open class reveals. Critical: without this CSS the markup
   renders inline under the composer and every action button shows twice. */
.chat-plus {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--line); color: var(--ink);
  border: 0; cursor: pointer;
  font-size: 22px; font-weight: 500; line-height: 1;
  flex-shrink: 0;
}
.chat-plus:hover { background: var(--accent); color: #fff; }

.chat-plus-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.35);
  opacity: 0; pointer-events: none;
  transition: opacity 0.18s ease;
  z-index: 140;
}
.chat-plus-backdrop.open { opacity: 1; pointer-events: auto; }

.chat-plus-sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--surface);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 28px rgba(0,0,0,0.18);
  padding: 10px 18px 24px;
  transform: translateY(105%);
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 150;
}
.chat-plus-sheet.open { transform: translateY(0); }
.chat-plus-sheet-handle {
  width: 40px; height: 4px; border-radius: 999px;
  background: var(--line); margin: 4px auto 14px;
}
.chat-plus-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px 10px;
}
.chat-plus-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 6px;
  background: transparent; border: 0; cursor: pointer;
  color: var(--ink); font-size: 13px; font-weight: 500;
}
.chat-plus-item-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--line); color: var(--accent);
}
.chat-plus-item:hover .chat-plus-item-icon {
  background: var(--accent); color: #fff;
}
.chat-plus-item-label { font-size: 12px; color: var(--muted); }

/* On desktop the composer has room for inline action buttons, so hide the
   + entry point and rely on the always-visible icons. */
@media (min-width: 720px) {
  .chat-plus, .chat-plus-sheet, .chat-plus-backdrop { display: none; }
}

.video-attach {
  position: absolute; left: 12px; right: 12px; bottom: 60px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 10px; display: flex; align-items: center; gap: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.video-attach > span { flex: 1; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-attach-send {
  background: var(--accent); color: white; border: 0; border-radius: 50%;
  width: 30px; height: 30px; cursor: pointer; font-size: 16px;
}
.video-attach-clear {
  background: none; border: 0; color: #6b7280; cursor: pointer; font-size: 18px;
}

.games-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  margin: 16px 0;
}
.game-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px; text-decoration: none; color: var(--ink);
  transition: transform 0.1s, border-color 0.1s;
  display: flex; flex-direction: column;
}
.game-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.game-card-icon { margin-bottom: 6px; color: var(--accent); display: block; }
.game-card-icon .ti { width: 24px; height: 24px; }
.game-card-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.game-card-body { font-size: 13px; line-height: 1.4; }
.game-card-meta { font-size: 11px; margin-top: 6px; }
.games-admin-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.game-card-disabled { opacity: 0.55; pointer-events: none; }

.section-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); font-weight: 600; margin: 20px 0 10px;
}

.game-thread-list { list-style: none; padding: 0; margin: 0 0 16px; }
.game-thread-list li { margin-bottom: 8px; }
.game-thread-row {
  display: flex; gap: 12px; align-items: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px;
  text-decoration: none; color: var(--ink);
  transition: border-color 0.1s, transform 0.1s;
}
.game-thread-row:hover { border-color: var(--accent); }

/* ── "Your turn" banner at the top of /games ────────────────────────────── */
.your-turn-banner {
  background: linear-gradient(135deg, rgba(0,233,246,0.08) 0%, rgba(136,82,247,0.12) 50%, rgba(242,41,158,0.10) 100%);
  border: 1.5px solid rgba(136,82,247,0.28);
  border-radius: 16px; padding: 14px 16px; margin: 0 0 18px;
}
.your-turn-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.your-turn-header h2 {
  margin: 0; font-size: 18px; font-weight: 800; color: var(--ink);
  letter-spacing: -0.01em;
}
.your-turn-count { margin-left: auto; font-size: 12px; color: var(--muted); font-weight: 600; }
.your-turn-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--yodi-pink);
  box-shadow: 0 0 0 0 rgba(242,41,158,0.6);
  animation: yodi-pulse 1.6s infinite;
}
@keyframes yodi-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(242,41,158,0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(242,41,158,0); }
  100% { box-shadow: 0 0 0 0 rgba(242,41,158,0); }
}
.game-thread-row-turn {
  background: #fff; border-color: rgba(136,82,247,0.35);
}
.game-thread-row-turn:hover {
  transform: translateY(-1px);
  border-color: var(--yodi-purple);
  box-shadow: 0 6px 16px rgba(136,82,247,0.2);
}
.game-thread-row-turn .game-thread-icon {
  background: var(--yodi-gradient); color: #fff;
}
.game-thread-row-turn .game-thread-sub { color: var(--yodi-purple); font-weight: 700; }
.game-thread-row-turn .game-thread-arrow { color: var(--yodi-purple); }
.game-thread-icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--line); display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent); flex-shrink: 0;
}
.game-thread-body { display: flex; flex-direction: column; }
.game-thread-title { font-weight: 500; font-size: 14px; }
.game-thread-sub { font-size: 12px; margin-top: 2px; }

.leaderboard {
  width: 100%; border-collapse: collapse; background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
}
.leaderboard thead th {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); font-weight: 600;
  text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line);
}
.leaderboard tbody td {
  padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 14px;
}
.leaderboard tbody tr:last-child td { border-bottom: 0; }
.leaderboard .rank { font-weight: 600; color: var(--muted); width: 32px; }

/* New responsive card-style leaderboard */
.lb-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.lb-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px;
  min-width: 0;
}
.lb-first { border-color: #f59e0b; background: #fffbeb; }
.lb-rank { width: 22px; text-align: center; font-weight: 700; color: var(--muted); flex-shrink: 0; }
.lb-first .lb-rank { color: #d97706; }
.lb-player { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; text-decoration: none; color: var(--ink); }
.lb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.lb-stats { display: flex; gap: 8px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.lb-stat { display: flex; flex-direction: column; align-items: center; min-width: 28px; line-height: 1.1; }
.lb-stat strong { font-size: 15px; color: var(--ink); font-weight: 700; }
.lb-stat em { font-size: 10px; color: var(--muted); font-style: normal; text-transform: uppercase; letter-spacing: 0.04em; }
.lb-stat-w strong { color: var(--accent); }

.composer-scope-info { padding: 4px 6px; cursor: pointer; color: var(--muted); background: none; border: none; }
.composer-scope-info:hover { color: var(--accent); }
.scope-info-popover {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; margin-top: 6px; font-size: 13px; line-height: 1.45;
  box-shadow: 0 4px 18px rgba(0,0,0,0.06);
}
.scope-info-popover strong { display: block; margin-bottom: 6px; font-size: 13px; }
.scope-info-popover p { margin: 4px 0; }

@media (max-width: 480px) {
  .lb-stats { gap: 6px; }
  .lb-stat { min-width: 22px; }
  .lb-name { font-size: 13px; }
}

.c4-game { max-width: min(720px, 92vw); margin: 0 auto; }
.c4-head {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 14px;
}
.c4-players { display: flex; align-items: center; gap: 14px; justify-content: center; }
.c4-player { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 999px; }
.c4-player.active { background: #efe8ff; color: #8852f7; font-weight: 600; }
.c4-pname { font-size: 14px; }
.c4-vs { color: var(--muted); font-size: 12px; }
.c4-status { margin-top: 8px; text-align: center; font-size: 14px; color: var(--ink); }

.c4-board-wrap { background: #1e40af; padding: 8px; border-radius: 14px; }
.c4-board {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
  background: #1e40af; border-radius: 8px;
}
.c4-col {
  display: grid; grid-template-rows: repeat(6, 1fr); gap: 6px;
  background: #1e40af; border: 0; padding: 0; cursor: pointer;
  border-radius: 8px; transition: background 0.1s;
}
.c4-col:hover:not([disabled]) { background: #1d3da3; }
.c4-col[disabled] { cursor: default; }
.c4-cell {
  aspect-ratio: 1 / 1;
  background: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
.c4-token {
  display: inline-block; width: 80%; height: 80%; border-radius: 50%;
  box-shadow: inset -3px -4px 0 rgba(0, 0, 0, 0.18);
}
.c4-token-1 { background: #e11d48; }
.c4-token-2 { background: #fbbf24; }
.c4-actions { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }

.c4-start-form .form-actions { margin-top: 8px; }

/* 3-column game page layout: switcher | board | chat */
/* Max-board layout: center-pane takes full width, side panes become overlay drawers. */
.game-page-layout {
  display: block;
  margin: 0;
  position: relative;
}
.game-pane {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 0;
  display: flex; flex-direction: column;
}
.game-pane-center {
  min-width: 0;
  max-width: 1080px;
  margin: 0 auto;
}

/* Side drawers — hidden by default, slide in over the board when toggled */
.game-pane-left, .game-pane-right {
  position: fixed; top: 0; bottom: 0;
  width: min(340px, 88vw);
  z-index: 100;
  box-shadow: 0 0 24px rgba(0,0,0,0.18);
  max-height: 100vh;
  transition: transform 0.22s ease;
}
.game-pane-left { left: 0; border-right: 1px solid var(--line); transform: translateX(-100%); }
.game-pane-right { right: 0; border-left: 1px solid var(--line); transform: translateX(100%); }
.game-pane-left.open, .game-pane-right.open { transform: translateX(0); }

.game-drawer-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.35);
  z-index: 99; opacity: 0; pointer-events: none;
  transition: opacity 0.18s;
}
.game-drawer-backdrop.open { opacity: 1; pointer-events: auto; }

/* Generic in-game chat toggle — floating action button at bottom-right.
   Used by Guess Who (.gw-chat-toggle-wrap), Rummikub (.rk-chat-toggle-wrap)
   and any future games that want a quick-open chat affordance. */
.gw-chat-toggle-wrap, .rk-chat-toggle-wrap {
  position: fixed; right: 14px; bottom: 18px; z-index: 50;
}
.gw-chat-toggle, .rk-chat-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink); font-size: 13px; font-weight: 600;
  padding: 10px 16px; border-radius: 999px;
  cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}
.gw-chat-toggle:hover, .rk-chat-toggle:hover { background: var(--line); }

/* Top action bar on every game page */
.game-top-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 8px 0 12px; margin: 0 auto;
  max-width: 1080px;
}
.game-top-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink); font-size: 13px; font-weight: 500;
  padding: 8px 14px; border-radius: 999px;
  cursor: pointer; position: relative;
}
.game-top-btn:hover { background: var(--line); }
.game-top-btn .turn-dot { margin-left: 2px; }
.game-top-btn .unread-badge { position: static; margin-left: 4px; }
.game-top-title {
  font-size: 13px; color: var(--muted); font-weight: 500;
  text-align: center; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.game-top-fullscreen {
  background: transparent; border: 0; color: var(--muted); cursor: pointer;
  padding: 6px; border-radius: 6px;
}
.game-top-fullscreen:hover { color: var(--ink); background: var(--line); }

/* When fullscreen is active, kill the site header and margins for max real estate */
.game-page-layout:fullscreen,
.game-page-layout.is-fullscreen { background: var(--bg); padding: 12px; }

/* ═══ Max-board two-column layout ═══════════════════════════════════════
   Persistent left rail (game context + switcher) + center board.
   Used on Connect 4 game pages; lifts the board above the fold. */
.game-page-layout.max-board {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  margin-top: -12px;  /* pull the layout up under the site nav */
}
.game-page-layout.max-board .game-pane-center {
  max-width: none;
  width: 100%;
  display: flex; justify-content: center;
  padding-top: 4px;
}
.game-page-layout.max-board .c4-game {
  max-width: min(720px, 100%);
  width: 100%;
  margin: 0;
}

.game-side-rail {
  display: flex; flex-direction: column; gap: 10px;
  position: sticky; top: 12px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
}
.game-rail-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 2px;
}
.game-rail-back {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--muted); font-size: 13px; font-weight: 500;
  text-decoration: none;
}
.game-rail-back:hover { color: var(--ink); }
.game-rail-fs {
  background: transparent; border: 0; color: var(--muted);
  padding: 6px; border-radius: 6px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.game-rail-fs:hover { color: var(--ink); background: var(--line); }

/* Compact action cluster (Pass / Resign / Fullscreen) that lives in the
   rail top bar so the rail card doesn't need a big button row below. */
.game-rail-top-actions {
  display: inline-flex; align-items: center; gap: 4px;
}
.game-rail-iconbtn {
  background: transparent; border: 0; color: var(--muted);
  padding: 6px; border-radius: 6px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit;
}
.game-rail-iconbtn:hover:not(:disabled) { color: var(--ink); background: var(--line); }
.game-rail-iconbtn:disabled { opacity: 0.35; cursor: default; }
.game-rail-iconbtn-danger:hover:not(:disabled) { color: #b91c1c; background: #fee2e2; }
.game-rail-top-actions form { margin: 0; display: inline-flex; }

.game-rail-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.game-rail-kicker {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); font-weight: 700;
}
.rail-players {
  display: flex; flex-direction: column; gap: 4px;
  align-items: stretch;
}
.rail-players .c4-player {
  justify-content: flex-start;
  padding: 8px 10px; border-radius: 8px;
  background: var(--bg); border: 1px solid var(--line);
}
.rail-players .c4-player.active {
  background: #efe8ff; border-color: #d6c7ff; color: #8852f7; font-weight: 600;
}
.rail-players .c4-vs-row {
  text-align: center; color: var(--muted); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.08em;
  margin: -2px 0;
}
.rail-status {
  text-align: left; margin: 0;
  font-size: 13px; color: var(--muted);
  padding-top: 8px; border-top: 1px solid var(--line);
}
.rail-status strong { color: var(--ink); }
.rail-actions { display: block; margin: 0; }
.btn-block { display: block; width: 100%; text-align: center; }

.game-rail-note {
  font-size: 12px; color: var(--muted); line-height: 1.45;
  padding: 10px 12px; background: var(--surface);
  border: 1px dashed var(--line); border-radius: 10px;
}
.game-rail-note strong { color: var(--ink); }

.game-rail-chat-btn {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px;
  display: flex; align-items: center; gap: 8px;
  color: var(--ink); cursor: pointer; font-size: 13px;
  font-family: inherit;
}
.game-rail-chat-btn:hover { background: var(--line); }
.game-rail-chat-count { margin-left: auto; font-size: 11px; }

.game-rail-section {
  margin-top: 6px;
}
.game-rail-section-head {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); font-weight: 700;
  padding: 8px 2px 6px;
}
.rail-switch-list {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 4px 0;
}
.rail-switch-list .game-switch-row { padding: 8px 12px; }
.rail-switch-list .game-switch-avatar { width: 28px; height: 28px; font-size: 11px; }
.rail-switch-list .game-switch-name { font-size: 13px; }
.rail-switch-list .game-switch-meta { font-size: 11px; }
.rail-switch-list .game-switch-empty { padding: 10px 12px; font-size: 12px; }

/* Mobile / narrow: stack the rail above the board */
@media (max-width: 900px) {
  .game-page-layout.max-board {
    display: block;
    margin-top: 0;
  }
  .game-side-rail {
    position: static;
    max-height: none;
    margin-bottom: 10px;
    gap: 6px;  /* was 10 */
  }
  /* Kill the things that waste vertical real estate on phones. On a 15×15
     WWF board on a 6-inch screen, every pixel above the board hurts. */
  .game-side-rail .game-rail-section { display: none; }  /* "Your games" list */
  .game-side-rail .game-rail-note { display: none; }     /* Practice mode blurb */
  .game-side-rail .game-rail-kicker { display: none; }   /* "WORDS WITH FAMILY" title */

  /* The game-rail-card was a spacious vertical card; on mobile it becomes a
     single dense row: score · score · status · [pass] [resign]. */
  .game-side-rail .game-rail-card {
    padding: 8px 10px;
    gap: 6px;
    border-radius: 10px;
  }

  /* Score pills inline on one row with a tiny separator */
  .rail-wwf-scores {
    flex-direction: row !important;
    align-items: center;
    gap: 6px !important;
  }
  .rail-wwf-scores .wwf-score {
    flex: 1;
    padding: 4px 8px !important;
    font-size: 12px;
  }
  .rail-wwf-scores .wwf-score-label { font-size: 11px; }
  .rail-wwf-scores .wwf-score-value { font-size: 16px !important; }
  .wwf-bag-row { font-size: 11px !important; padding: 0 2px; }

  /* Player pills (Connect 4 / Chess / Battleship) go side-by-side */
  .rail-players {
    flex-direction: row !important;
    align-items: center;
    gap: 6px !important;
  }
  .rail-players .c4-player { flex: 1; padding: 4px 8px !important; font-size: 12px; }
  .rail-players .c4-vs-row { margin: 0 2px !important; font-size: 10px; }

  /* Status strip shorter */
  .rail-status {
    font-size: 12px;
    padding-top: 4px !important;
    text-align: center;
  }
  /* Actions row: Pass + Resign side by side, small pills */
  .rail-actions-stack {
    flex-direction: row !important;
    gap: 6px !important;
  }
  .rail-actions-stack .btn-block,
  .rail-actions .btn-block {
    padding: 8px 10px !important;
    font-size: 13px !important;
  }

  /* Top row (Back + Fullscreen) can be tiny */
  .game-rail-top { padding: 2px 0; }
  .game-rail-back { font-size: 12px; }

  .game-page-layout.max-board .c4-game { max-width: min(720px, 92vw); margin: 0 auto; }
}

/* Fullscreen — hide rail + chat, blow up the board.
   iOS Safari doesn't support the Fullscreen API on non-video elements, and
   PWAs are already in standalone mode, so the visual effect is driven by the
   .is-fullscreen class being position:fixed over the whole viewport. The
   :fullscreen selector is a bonus that applies on desktop when real
   fullscreen works. Needs the highest z-index so it covers the site header. */
.game-page-layout.max-board:fullscreen,
.game-page-layout.max-board.is-fullscreen {
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); padding: 16px; margin: 0;
}
.game-page-layout.max-board.is-fullscreen {
  position: fixed !important;
  inset: 0;
  z-index: 9999;
  overflow: auto;
  padding: calc(8px + env(safe-area-inset-top, 0px)) calc(8px + env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) calc(8px + env(safe-area-inset-left, 0px));
}
/* Dedicated exit-fullscreen button that lives OUTSIDE the rail so it keeps
   rendering even when the rail is display:none in fullscreen mode. Each
   game template adds a `<button class="game-fs-exit">` inside the layout
   (sibling of the rail). Hidden by default; shown only in fullscreen. */
.game-fs-exit {
  display: none;
}
.game-page-layout.max-board.is-fullscreen .game-fs-exit {
  display: inline-flex;
  align-items: center; justify-content: center;
  position: fixed;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: calc(12px + env(safe-area-inset-right, 0px));
  z-index: 10001;
  width: 44px; height: 44px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  border: 0; border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.game-fs-exit:hover { background: rgba(0, 0, 0, 0.85); }
.game-page-layout.max-board:fullscreen .game-side-rail,
.game-page-layout.max-board.is-fullscreen .game-side-rail,
.game-page-layout.max-board:fullscreen .game-pane-right,
.game-page-layout.max-board.is-fullscreen .game-pane-right {
  display: none;
}
.game-page-layout.max-board:fullscreen .game-pane-center,
.game-page-layout.max-board.is-fullscreen .game-pane-center {
  max-width: none; width: 100%; padding: 0;
}
.game-page-layout.max-board:fullscreen .c4-game,
.game-page-layout.max-board.is-fullscreen .c4-game {
  /* Connect 4 board is 7 wide × 6 tall — scale to fit whichever dimension is tighter */
  max-width: min(96vw, calc(96vh * 7 / 6));
  width: 100%;
}
/* Chess: square board, scale to shortest axis */
.game-page-layout.max-board:fullscreen .chess-game,
.game-page-layout.max-board.is-fullscreen .chess-game { max-width: min(96vw, 96vh); width: 100%; }
.game-page-layout.max-board:fullscreen .chess-board,
.game-page-layout.max-board.is-fullscreen .chess-board { width: min(96vw, 96vh); }
/* WWF: board is square, but rack/actions sit below — cap to a bit less than height */
.game-page-layout.max-board:fullscreen .wwf-game,
.game-page-layout.max-board.is-fullscreen .wwf-game { max-width: min(96vw, 78vh); width: 100%; }

/* WWF board: fill available width up to 640 inside the flex center pane.
   Also cap the board's max-width by viewport height so the rack + submit
   fit in the same view without scrolling. 200px budget covers site nav
   (~71px) + top padding + rack row + bottom padding. */
.game-page-layout.max-board .wwf-game { max-width: 640px; width: 100%; margin: 0; }
.game-page-layout.max-board .wwf-board {
  max-width: min(100%, calc(100vh - 225px));
}
.game-page-layout.max-board .chess-game { max-width: 720px; width: 100%; margin: 0; }

/* ═══ Battleship ═════════════════════════════════════════════════════════ */
.bs-game { display: flex; flex-direction: column; gap: 14px; }
.bs-grid-section {
  display: flex; flex-direction: column; gap: 6px;
}
.bs-grid-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); font-weight: 700;
  padding: 2px 4px;
}
.bs-grid-label-icon { display: inline-flex; align-items: center; }
.bs-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 3px;
  background: #0b2a4a;
  padding: 6px;
  border-radius: 10px;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
}
.bs-grid-enemy { background: #0b2a4a; }
.bs-grid-own { background: #1e3a5f; }
.bs-cell {
  aspect-ratio: 1 / 1;
  background: #dbe6f3;
  border: 0;
  border-radius: 3px;
  padding: 0; margin: 0;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  transition: background 0.12s, transform 0.05s;
}
.bs-cell:hover:not([disabled]) { background: #eef5ff; transform: scale(1.05); }
.bs-cell[disabled] { cursor: default; }
.bs-grid-locked .bs-cell { cursor: default; }
.bs-grid-locked .bs-cell:hover:not([disabled]) { background: #dbe6f3; transform: none; }
.bs-cell-own { cursor: default; }
.bs-cell-own:hover { transform: none; background: #dbe6f3; }

.bs-cell.bs-miss { background: #b4c6de; }
.bs-cell.bs-miss .bs-mark-miss {
  width: 30%; height: 30%; border-radius: 50%;
  background: #2b3b54;
  opacity: 0.7;
}
.bs-cell.bs-hit { background: #fecaca; }
.bs-cell.bs-hit .bs-mark-hit {
  color: #dc2626; font-weight: 900;
  font-size: clamp(16px, 3.5vw, 28px); line-height: 1;
}
.bs-cell.bs-ship { background: #3a4a63; }
.bs-cell.bs-hit-on-own { background: #8b1e1e; }
.bs-cell.bs-hit-on-own .bs-mark-hit { color: #fff; }
.bs-cell.bs-sunk { background: #1f2937; }
.bs-cell.bs-sunk .bs-mark-hit { color: #fca5a5; }

.bs-mark { display: inline-flex; }

/* Rail fleet tracker (remaining ships per side) */
.bs-fleet-tracker {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px;
}
.bs-fleet-col { display: flex; flex-direction: column; gap: 6px; }
.bs-fleet-head {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 700;
}
.bs-fleet-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 4px; font-size: 11px; color: var(--ink);
}
.bs-fleet-row.bs-fleet-sunk {
  color: var(--muted); text-decoration: line-through;
}
.bs-fleet-name { font-size: 10.5px; }
.bs-fleet-pips { display: inline-flex; gap: 2px; }
.bs-pip {
  width: 6px; height: 6px; border-radius: 50%;
  background: #3a4a63;
}
.bs-fleet-sunk .bs-pip { background: #9ca3af; }

/* Pill tokens in the rail players card */
.bs-token {
  display: inline-flex;
  width: 22px; height: 22px;
  align-items: center; justify-content: center;
  color: #fff; background: #1e3a5f;
  border-radius: 50%;
}

/* Battleship fullscreen — each grid grows */
.game-page-layout.max-board:fullscreen .bs-game,
.game-page-layout.max-board.is-fullscreen .bs-game { max-width: min(96vw, 60vh); width: 100%; }

/* Mobile: shrink cell marker fonts so 10x10 still fits */
@media (max-width: 540px) {
  .bs-grid { max-width: 92vw; padding: 4px; gap: 2px; }
  .bs-cell.bs-hit .bs-mark-hit { font-size: 14px; }
  .bs-fleet-tracker { grid-template-columns: 1fr; }
}

/* Rail overrides for WWF score pills + bag row */
.rail-wwf-scores {
  display: flex; flex-direction: column; gap: 4px;
}
.rail-wwf-scores .wwf-score {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; border-radius: 8px;
  background: var(--bg); border: 1px solid var(--line);
}
.rail-wwf-scores .wwf-score.active {
  background: #efe8ff; border-color: #d6c7ff; color: #8852f7; font-weight: 600;
}
.rail-wwf-scores .wwf-score-label { font-size: 13px; }
.rail-wwf-scores .wwf-score-value { font-size: 18px; font-weight: 700; }
.wwf-bag-row {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px;
}
.rail-actions-stack {
  display: flex; flex-direction: column; gap: 6px;
}
.rail-actions-stack form { margin: 0; }
.game-pane-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.game-pane-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px;
}
.game-pane-cta {
  color: var(--muted); text-decoration: none;
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.1s, color 0.1s;
}
.game-pane-cta:hover { background: var(--line); color: var(--ink); }

.game-switch-list {
  list-style: none; margin: 0; padding: 6px 0;
  overflow-y: auto; flex: 1;
}
.game-switch-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; text-decoration: none; color: var(--ink);
  border-left: 3px solid transparent;
}
.game-switch-row:hover { background: var(--line); }
.game-switch-row.active { background: #efe8ff; border-left-color: var(--accent); }
.game-switch-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: white; font-weight: 600; font-size: 12px;
  text-transform: uppercase; flex-shrink: 0; overflow: hidden;
}
.game-switch-avatar.photo { background: var(--line); }
.game-switch-avatar img { width: 100%; height: 100%; object-fit: cover; }
.game-switch-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.game-switch-name { font-weight: 500; font-size: 14px; }
.game-switch-meta { font-size: 11px; }
.game-switch-empty { padding: 16px 14px; font-size: 13px; }

/* Chat sidebar */
.game-chat { }
.chat-stream-mini {
  flex: 1; overflow-y: auto;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px;
  background: var(--bg);
}
.chat-bubble-mini {
  max-width: 85%;
  padding: 8px 12px; border-radius: 16px;
  font-size: 13px; line-height: 1.4;
  word-wrap: break-word;
}
.chat-bubble-mini.mine {
  align-self: flex-end;
  background: #8852f7; color: white;
  border-bottom-right-radius: 4px;
}
.chat-bubble-mini.theirs {
  align-self: flex-start;
  background: #fff; color: var(--ink); border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
}
.chat-empty-mini { text-align: center; font-size: 13px; padding: 20px 8px; }
.chat-compose-mini {
  display: flex; gap: 6px; padding: 10px 12px;
  border-top: 1px solid var(--line); background: var(--surface);
}
.chat-compose-mini input {
  flex: 1; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg); color: var(--ink); font-size: 13px;
}
.chat-compose-mini input:focus { outline: none; border-color: var(--accent); }
.chat-mini-send {
  background: var(--accent); color: white; border: 0;
  border-radius: 50%; width: 34px; height: 34px;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.chat-mini-send:hover { background: #234a2e; }

/* Game-room roster (spectators + players) */
.game-room-roster {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.game-room-person {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  text-decoration: none; color: var(--ink); font-size: 11px;
  max-width: 56px; position: relative;
}
.game-room-person:hover { color: var(--accent); }
.game-room-person-name { font-weight: 500; font-size: 11px; text-align: center; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 56px; }
.game-room-person-tag { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }

.game-room-invite { position: relative; }
.game-room-invite > summary { list-style: none; cursor: pointer; }
.game-room-invite > summary::-webkit-details-marker { display: none; }
.game-room-invite-trigger:hover .avatar-mini { border: 1px dashed var(--accent); }
.game-room-invite-pop {
  position: absolute; top: 60px; right: 0; z-index: 20;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px; min-width: 220px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.game-room-invite-pop select {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); font-size: 13px;
}
.chat-bubble-author {
  display: block; font-size: 11px; font-weight: 600; color: var(--muted);
  margin-bottom: 2px;
}
.chat-bubble-mini.mine .chat-bubble-author { display: none; }

.game-chat-ai { }

/* Drawers are overlays; they work at all widths. No hide-on-narrow. */

/* Game hero + section blocks */
.game-hero {
  display: flex; align-items: center; gap: 18px;
  background: none; padding: 8px 0; margin-bottom: 8px;
}
.game-hero-icon {
  width: 56px; height: 56px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent); flex-shrink: 0;
}
.game-hero h1 { margin: 0 0 4px; }

.section-block { margin: 20px 0 24px; }

/* Picker cards (reusable across all 2-player games) */
.picker-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 18px 20px; margin-bottom: 14px;
}
.picker-header { margin-bottom: 14px; }
.picker-eyebrow {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); font-weight: 700; margin-bottom: 4px;
}
.picker-title { font-size: 17px; font-weight: 600; margin-bottom: 2px; }
.picker-sub { font-size: 13px; }

.picker-ai-row {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
}

.pill-group { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.pill {
  display: inline-flex; align-items: center;
  background: transparent; border: 1px solid var(--line);
  color: var(--ink); font-size: 13px; font-weight: 500;
  padding: 8px 14px; border-radius: 999px;
  cursor: pointer; transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.pill input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.pill:has(input:checked), .pill.active { background: #8852f7; border-color: #8852f7; color: white; }
.pill:hover:not(.active):not(:has(input:checked)) { background: var(--line); }

.picker-tabs { margin: 12px 0; }

.picker-search-row {
  position: relative; margin-bottom: 12px;
}
.picker-search-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--muted); pointer-events: none;
}
.picker-search {
  width: 100%; padding: 12px 14px 12px 42px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg); color: var(--ink); font-size: 14px;
  transition: border-color 0.1s, background 0.1s;
}
.picker-search:focus {
  outline: none; border-color: var(--accent); background: var(--surface);
}

/* People grid for opponent selection */
.people-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.person-tile { margin: 0; padding: 0; }
.person-tile-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 100%; padding: 14px 8px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 14px;
  color: var(--ink); cursor: pointer;
  transition: border-color 0.1s, background 0.1s, transform 0.1s;
}
.person-tile-btn:hover { border-color: var(--accent); background: var(--surface); transform: translateY(-1px); }
.person-tile-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: white; font-weight: 600; font-size: 16px;
  text-transform: uppercase; overflow: hidden;
}
.person-tile-avatar.photo { background: var(--line); }
.person-tile-avatar.small { width: 36px; height: 36px; font-size: 13px; }
.person-tile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.person-tile-name { font-size: 13px; font-weight: 500; text-align: center; line-height: 1.2; }
.person-tile-meta { font-size: 11px; text-align: center; }

/* Thread-row arrow + turn indicator */
.game-thread-arrow { margin-left: auto; color: var(--muted); }
.turn-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #16a34a; margin-right: 4px; vertical-align: 1px;
}

.challenge-prompt { font-size: 17px; font-style: italic; margin: 8px 0; }
.challenge-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  margin-top: 14px;
}
.challenge-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.challenge-photo img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.challenge-card-body { padding: 10px 12px; }
.challenge-author { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; }
.challenge-caption { font-size: 13px; margin-top: 6px; color: #4b5563; font-style: italic; }

.trivia-q-row { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; margin-bottom: 10px; }
@media (max-width: 600px) { .trivia-q-row { grid-template-columns: 1fr; } }
.trivia-result-list { list-style: none; padding: 0; margin: 0; }
.trivia-result {
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--line);
  border-radius: var(--radius); padding: 10px 14px; margin-bottom: 8px;
}
.trivia-result.correct { border-left-color: #16a34a; background: #f0fdf4; }
.trivia-result.wrong { border-left-color: #dc2626; background: #fef2f2; }
.trivia-q { font-weight: 500; }
.trivia-a { font-size: 13px; margin-top: 4px; color: #4b5563; }
.trivia-tag { margin-left: 6px; font-size: 12px; }
.trivia-tag.ok { color: #16a34a; font-weight: 600; }
.trivia-tag.no { color: #dc2626; }

.baby-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; margin: 14px 0;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.baby-photo img { max-width: 400px; width: 100%; border-radius: 10px; display: block; }
.baby-guess-form { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 360px; }
.tally-list { list-style: none; padding: 0; margin: 0; }
.tally-list li { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.tally-count {
  display: inline-block; min-width: 28px; height: 24px; line-height: 24px;
  background: var(--accent); color: white; border-radius: 4px; text-align: center;
  margin-right: 8px; font-weight: 600; font-size: 13px;
}
.baby-archive {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.baby-archive-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.baby-archive-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.baby-archive-label { padding: 6px 10px; font-size: 13px; font-weight: 500; text-align: center; }
.post-meta { flex: 1; min-width: 0; }
.post-author a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; }
.post-author a:hover { color: var(--accent); }
.post-time { font-size: 12px; }
.post-kebab { margin-left: auto; }

.btn-ghost-icon {
  background: transparent; border: none; color: var(--muted); cursor: pointer;
  font-size: 18px; padding: 0 8px; line-height: 1;
}
.btn-ghost-icon:hover { color: var(--danger); }

.post-body { font-size: 15px; line-height: 1.5; margin: 4px 0 10px; white-space: pre-wrap; word-wrap: break-word; }
.post-photo { margin: 0 -16px 10px; }
.post-photo img { width: 100%; display: block; max-height: 560px; object-fit: cover; }

.post-actions { display: flex; align-items: center; gap: 16px; padding: 6px 0 8px; border-top: 1px solid var(--line); margin-top: 8px; }
.react-btn {
  display: inline-flex; align-items: center; gap: 6px; background: transparent;
  border: none; cursor: pointer; font: inherit; color: var(--muted); font-size: 13px;
  padding: 4px 8px; border-radius: 6px;
}
.react-btn:hover { background: var(--accent-soft); }
.react-btn.liked { color: var(--danger); font-weight: 500; }
.react-icon { font-size: 14px; }
.comment-count { font-size: 13px; }

.post-comments { list-style: none; padding: 0; margin: 6px 0; border-top: 1px solid var(--line); padding-top: 8px; }
.post-comment {
  padding: 4px 0; font-size: 13px; line-height: 1.5;
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
.comment-author { font-weight: 600; color: var(--ink); }
.comment-body { color: var(--ink); }
.comment-time { font-size: 11px; }
.comment-delete { font-size: 14px; padding: 0 4px; margin-left: auto; }

.comment-form { display: flex; gap: 6px; margin-top: 6px; }
.comment-form input[type=text] {
  flex: 1; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px;
  font-size: 13px; background: var(--bg);
}
.comment-form input[type=text]:focus { outline: none; border-color: var(--accent); background: var(--surface); }

.feed-sidebar-section {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 16px; margin-bottom: 12px;
}

@media (max-width: 680px) {
  .post-composer {
    padding: 12px; gap: 10px;
    position: sticky; top: 56px; z-index: 20;
    background: var(--surface);
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  }
  .post-photo { margin: 0 -12px 10px; }
  .post-card { padding: 12px; }
  .post-photo img { max-height: 400px; }
  .composer-body textarea { min-height: 60px; font-size: 16px; }
  .composer-tools { gap: 6px; }
  .composer-photo, .composer-scope { font-size: 14px; padding: 10px 12px; }
  .composer-post { padding: 10px 18px; font-size: 15px; }
  .react-btn { padding: 8px 12px; font-size: 14px; }
  .comment-form input[type=text] { padding: 10px 12px; font-size: 16px; }
  .comment-form button { padding: 10px 14px; }
}

/* Email list */
.email-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.email-label {
  font-size: 11px; color: var(--muted); padding: 1px 7px;
  background: #f3f4f6; border-radius: 10px; text-transform: lowercase;
}
.email-primary {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  color: var(--accent); padding: 1px 6px; letter-spacing: 0.05em;
  background: var(--accent-soft); border-radius: 4px;
}

.email-edit-list { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 8px; }
.email-edit-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px;
}
.email-edit-addr { font-weight: 500; flex: 1; min-width: 200px; word-break: break-all; }
.btn-tiny {
  padding: 4px 10px; font-size: 11px; background: var(--surface); color: var(--muted);
  border: 1px solid var(--line); border-radius: 6px; cursor: pointer;
}
.btn-tiny:hover { border-color: var(--accent); color: var(--accent); }
.email-add-form {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 14px; border: 1px dashed var(--line); border-radius: 8px; background: var(--bg);
}
.email-add-form input[type=email] { flex: 1; min-width: 200px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 14px; background: var(--surface); }
.email-add-form input[type=text] { flex: 0 1 180px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 14px; background: var(--surface); }
.email-add-form button { padding: 8px 16px; background: var(--accent); color: white; border: none; border-radius: 6px; font-size: 13px; cursor: pointer; }

/* Social links */
.social-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.social-chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 6px 12px; border-radius: 16px; text-decoration: none;
  background: #eef2ff; color: #3730a3; font-size: 13px;
  border: 1px solid transparent;
}
.social-chip:hover { border-color: #3730a3; }
.social-kind { font-weight: 600; text-transform: capitalize; }
.social-label { color: var(--ink); font-size: 12px; }
.social-linkedin { background: #e0f2fe; color: #0369a1; }
.social-instagram { background: #fce7f3; color: #be185d; }
.social-facebook { background: #dbeafe; color: #1e40af; }
.social-x { background: #f3f4f6; color: #111827; }
.social-tiktok { background: #f5f5f5; color: #111827; }
.social-youtube { background: #fee2e2; color: #991b1b; }
.social-website { background: var(--accent-soft); color: var(--accent); }

/* Management card */
.manage-card {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 14px 18px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.manage-form {
  display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap;
  padding: 14px; background: var(--bg); border: 1px dashed var(--line); border-radius: 8px;
}
.manage-form label { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 220px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.manage-form select { padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 14px; }
.manage-form button { padding: 10px 18px; background: var(--accent); color: white; border: none; border-radius: 8px; font-size: 14px; cursor: pointer; }

/* Feed */
.feed-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.feed-post {
  display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: start;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 18px;
}
.feed-kind-badge {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  background: var(--accent-soft); color: var(--accent);
  padding: 4px 10px; border-radius: 12px; text-align: center; align-self: start;
}
.feed-kind-engagement .feed-kind-badge { background: #fde68a; color: #92400e; }
.feed-kind-wedding .feed-kind-badge { background: #fbcfe8; color: #9d174d; }
.feed-kind-baby .feed-kind-badge { background: #e0e7ff; color: #3730a3; }
.feed-kind-graduation .feed-kind-badge { background: #dcfce7; color: #14532d; }
.feed-kind-funeral .feed-kind-badge { background: #e5e7eb; color: #374151; }
.feed-kind-anniversary .feed-kind-badge { background: #fce7f3; color: #831843; }
.feed-kind-job .feed-kind-badge { background: #dbeafe; color: #1e40af; }
.feed-kind-move .feed-kind-badge { background: #fef3c7; color: #92400e; }

.feed-headline { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.feed-text { margin: 4px 0 8px; font-size: 14px; color: var(--ink); }
.feed-meta { color: var(--muted); font-size: 12px; }
.feed-meta a { color: var(--muted); text-decoration: none; }
.feed-meta a:hover { color: var(--ink); }
@media (max-width: 680px) {
  .feed-post { grid-template-columns: 1fr; gap: 6px; padding: 14px; }
  .feed-kind-badge { justify-self: start; }
}

/* Admin */
.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.admin-stat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px;
}
.admin-stat .stat-num { font-size: 28px; font-weight: 700; color: var(--accent); letter-spacing: -0.02em; }
.admin-stat .stat-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px; }
.admin-nav { display: flex; gap: 12px; flex-wrap: wrap; margin: 16px 0 24px; }
.admin-nav a {
  padding: 8px 14px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; text-decoration: none; color: var(--ink); font-size: 14px;
}
.admin-nav a.active { border-color: var(--accent); color: var(--accent); font-weight: 500; }
.admin-nav a:hover { border-color: var(--accent); }
.tag-admin { background: #fde68a; color: #92400e; font-size: 10px; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; margin-left: 6px; vertical-align: middle; letter-spacing: 0.05em; font-weight: 600; }

/* Family tree — indented list style */
.tree-list,
.tree-sublist {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.tree-sublist {
  padding-left: 22px;
  margin-left: 8px;
  border-left: 1px dashed var(--line);
}
.tree-li {
  position: relative;
  padding: 6px 0 6px 18px;
}
.tree-li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18px;
  width: 14px;
  height: 1px;
  background: var(--line);
}
.tree-list > .tree-li {
  padding-left: 0;
}
.tree-list > .tree-li::before {
  display: none;
}
.tree-line {
  display: inline-block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 14px;
}
.tree-person-inline {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
}
.tree-person-inline:hover { color: var(--accent); }
.tree-amp-inline { color: var(--muted); font-weight: 400; margin: 0 4px; }
.tree-memoriam { color: var(--muted); font-style: italic; font-size: 12px; font-weight: 400; }

@media (max-width: 680px) {
  .tree-sublist { padding-left: 14px; }
  .tree-li { padding-left: 12px; }
  .tree-line { padding: 5px 12px; font-size: 13px; }
}

/* Yearbook */
.gen-section { margin-bottom: 28px; }
.gen-heading {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  font-size: 18px; margin: 24px 0 14px; padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.gen-range { font-size: 12px; color: var(--muted); font-weight: 400; letter-spacing: 0.02em; }
.gen-count {
  margin-left: auto; font-size: 12px; color: var(--accent);
  background: var(--accent-soft); padding: 2px 10px; border-radius: 10px; font-weight: 500;
}

.yearbook-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.yearbook-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 10px 12px; text-decoration: none; color: var(--ink);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: transform 0.08s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.yearbook-card:hover { transform: translateY(-1px); box-shadow: var(--shadow); border-color: #d1d5db; }
.yearbook-muted { opacity: 0.6; }
.yearbook-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--accent); color: white; font-weight: 700; font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  text-transform: uppercase; overflow: hidden;
  margin-bottom: 6px;
}
.yearbook-avatar img { width: 100%; height: 100%; object-fit: cover; }
.yearbook-name { font-weight: 600; font-size: 14px; text-align: center; }
.yearbook-year { font-size: 11px; color: var(--accent); }
.yearbook-house { font-size: 11px; color: var(--muted); text-align: center; }

@media (max-width: 680px) {
  .yearbook-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
  .yearbook-avatar { width: 58px; height: 58px; font-size: 18px; }
}

/* Event header (filled + empty states) */
.event-header {
  position: relative;
  height: 240px; width: 100%;
  background-size: cover; background-position: center;
  border-radius: 16px; border: 1px solid var(--line); margin-bottom: 18px;
  overflow: visible;
}
.event-header.empty {
  background: linear-gradient(135deg, #f0f7ef 0%, #e5efe6 100%);
  border: 2px dashed #a9c9ad;
  display: flex; align-items: center; justify-content: center;
}
.event-header-empty-inner {
  text-align: center; padding: 24px 20px; max-width: 440px;
}
.event-header-empty-title { font-size: 16px; font-weight: 600; color: #8852f7; justify-content: center; margin-bottom: 6px; }
.event-header-empty-sub { font-size: 13px; margin: 0 0 14px; line-height: 1.4; }
.event-header-empty-actions { display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.event-header-empty-actions .btn-outline,
.event-header-empty-actions .btn-primary { padding: 8px 14px; font-size: 13px; }

.event-header-menu { position: absolute; top: 12px; right: 12px; }
.event-header-menu > summary {
  list-style: none; cursor: pointer;
  background: rgba(255,255,255,0.92); border-radius: 50%;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.event-header-menu > summary::-webkit-details-marker { display: none; }
.event-header-menu-pop {
  position: absolute; top: 38px; right: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 4px; min-width: 200px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.1);
  z-index: 10;
}
.event-header-menu-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 8px 10px; border: 0; background: transparent;
  color: var(--ink); font-size: 13px; text-align: left; cursor: pointer; border-radius: 6px;
}
.event-header-menu-item:hover { background: var(--line); }
.event-header-menu-item.danger { color: #b91c1c; }
.event-header-menu-item input[type="file"] { display: none; }

.upload-label { cursor: pointer; display: inline-flex; align-items: center; }
@media (max-width: 680px) {
  .event-header { height: 180px; }
  .event-header.empty { height: auto; min-height: 180px; }
  .event-header-empty-actions { flex-direction: column; align-items: stretch; width: 100%; }
}

/* Bring list */
.bring-list { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 6px; }
.bring-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
}
.bring-row.bring-claimed { background: var(--accent-soft); border-color: var(--accent); }
.bring-item { font-size: 14px; }
.bring-claimer { color: var(--accent); font-size: 13px; font-weight: 500; margin-left: auto; margin-right: 8px; }
.btn-tiny-primary {
  padding: 4px 12px; background: var(--accent); color: white;
  border: none; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer;
}
.btn-tiny-primary:hover { filter: brightness(1.08); }
.bring-add-form { display: flex; gap: 8px; }
.bring-add-form input[type=text] { flex: 1; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 14px; background: var(--surface); }
.bring-add-form button { padding: 8px 14px; background: var(--accent); color: white; border: none; border-radius: 6px; font-size: 13px; cursor: pointer; }

/* Map */
.map-canvas {
  width: 100%; height: 560px; border-radius: var(--radius);
  border: 1px solid var(--line); overflow: hidden; margin-bottom: 20px;
  background: #e5e7eb;
}
.map-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--muted); }
.map-pop-name { font-weight: 600; }
.map-pop-name a { color: var(--accent); text-decoration: none; }
.map-pop-loc { color: var(--muted); font-size: 12px; }
.map-pop-count { font-size: 12px; color: var(--accent); margin-top: 4px; }

/* Alerts near the composer */
.compose-alert { margin: 0 0 12px; }

/* Mobile */
@media (max-width: 680px) {
  .wrap { padding: 0 14px; }
  .main { padding: 16px 14px 48px; }

  /* Sticky header for easier nav on phones. Top padding honors iPhone notch /
     Dynamic Island when the app is launched as a PWA (status bar draws over
     the page, so we MUST add env(safe-area-inset-top) or the logo overlaps
     the clock). In regular Safari, the inset is 0 and padding is just 10px. */
  .site-header {
    padding: calc(10px + env(safe-area-inset-top, 0px)) env(safe-area-inset-right, 0px) 10px env(safe-area-inset-left, 0px);
    position: sticky; top: 0; z-index: 30;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .site-header .wrap { flex-wrap: wrap; gap: 8px; }
  .brand-text { display: none; }

  /* Bigger tap targets on all nav links */
  .site-nav { gap: 6px; font-size: 14px; flex-wrap: wrap; }
  .site-nav a, .nav-dropdown > summary {
    padding: 8px 10px; min-height: 36px;
    display: inline-flex; align-items: center;
  }

  .hero h1 { font-size: 22px; }
  h2 { font-size: 16px; }

  /* Directory table → card list */
  .roster thead { display: none; }
  .roster, .roster tbody, .roster tr, .roster td {
    display: block; width: 100%; border: none;
  }
  .roster { background: transparent; border: none; }
  .roster tr {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 10px; padding: 12px 14px; margin-bottom: 8px;
  }
  .roster td { padding: 2px 0 !important; border: none !important; font-size: 14px; }
  .roster td.contact { margin-top: 6px; font-size: 13px; color: var(--muted); }
  .roster td.contact a { color: var(--accent); }

  /* Event rows */
  .event-row { grid-template-columns: 1fr; gap: 2px; padding: 12px 14px; }
}

/* ─── Words With Friends ─────────────────────────────────────────────────── */
.wwf-game { max-width: 640px; margin: 0 auto; }

.wwf-head {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 14px;
}
.wwf-scores {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  justify-content: center;
}
.wwf-score {
  display: inline-flex; flex-direction: column; align-items: center;
  padding: 4px 12px; border-radius: 10px;
}
.wwf-score.active { background: #efe8ff; color: #8852f7; }
.wwf-score-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.wwf-score.active .wwf-score-label { color: #8852f7; font-weight: 600; }
.wwf-score-value { font-size: 20px; font-weight: 700; color: var(--ink); }
.wwf-score.active .wwf-score-value { color: #8852f7; }
.wwf-score-sep { color: var(--muted); font-weight: 700; }
.wwf-bag-count {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; margin-left: auto;
}
.wwf-status { margin-top: 8px; text-align: center; font-size: 14px; color: var(--ink); }
.wwf-last { margin-top: 4px; text-align: center; font-size: 12px; }

/* Board: 15x15 grid */
.wwf-board {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  gap: 2px;
  background: #0f766e;
  padding: 4px;
  border-radius: 10px;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  user-select: none;
}
.wwf-cell {
  aspect-ratio: 1 / 1;
  background: #f5f3eb;
  border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  cursor: pointer;
  font-size: 9px;
  color: #475569;
  transition: background 0.1s;
}
.wwf-board[data-my-turn="0"] .wwf-cell { cursor: default; }
.wwf-cell:hover { filter: brightness(1.04); }

/* Multiplier backgrounds (WWF colors) */
.wwf-m-tw { background: #d94a4a; color: #fff; }
.wwf-m-dw { background: #f19b3a; color: #fff; }
.wwf-m-tl { background: #2f6fdc; color: #fff; }
.wwf-m-dl { background: #6fb8e8; color: #fff; }
.wwf-center { background: #fbbf24; color: #fff; }
.wwf-has-pending { background: #f5f3eb !important; }
/* When a pending tile is dropped into a cell, hide any underlying
   multiplier label or star icon. Otherwise they compete with the pending
   tile for flex width and the tile renders at half-size. */
.wwf-cell.wwf-has-pending .wwf-mult-label,
.wwf-cell.wwf-has-pending > svg,
.wwf-cell.wwf-has-pending > .ti {
  display: none !important;
}

.wwf-mult-label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}

/* Tile (letter tile, used both on board and in rack) */
.wwf-tile {
  position: relative;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: #fff8e1;
  border: 1px solid #d4a84a;
  border-radius: 4px;
  font-weight: 700;
  color: #78350f;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  padding: 0;
  width: 100%;
  height: 100%;
}
.wwf-tile-letter {
  font-size: 20px;
  line-height: 1;
}
.wwf-tile-points {
  position: absolute;
  right: 3px; bottom: 2px;
  font-size: 9px;
  color: #a16207;
  font-weight: 600;
  line-height: 1;
}
.wwf-tile-blank { background: #fef3c7; border-style: dashed; }
/* Tiles sitting inside a board cell (either placed or pending) fill the cell
   completely so they look like the rack tile the user just dropped — no
   shrink-to-content, no size/color/border jump. */
.wwf-cell .wwf-tile-placed,
.wwf-cell .wwf-tile-pending {
  width: 100%; height: 100%;
  display: flex;
}
.wwf-tile-placed { cursor: default; }
/* Pending tile = visually identical to the rack tile. No marker, no extra
   color or outline. The Recall and Submit buttons in the rack row are the
   only affordance for "this placement isn't committed yet". */
.wwf-tile-pending {
  background: #fff8e1;
  border: 1px solid #d4a84a;
  outline: none;
}

/* Rack below the board */
.wwf-rack-wrap {
  margin-top: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 10px;
}
/* Single row: rack (fills remaining width) + play buttons (fixed) */
.wwf-rack-row {
  display: flex; align-items: center; gap: 10px;
}
.wwf-rack {
  display: flex; gap: 6px; justify-content: center;
  flex: 1; min-width: 0;
  padding: 8px;
  background: #8b4513;
  border-radius: 8px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}
.wwf-play-buttons {
  display: flex; flex-direction: column; gap: 6px;
  flex: 0 0 auto;
}
.wwf-icon-btn {
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink); border-radius: 8px;
  padding: 6px 10px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit;
}
.wwf-icon-btn:hover:not([disabled]) { background: var(--line); }
.wwf-icon-btn[disabled] { opacity: 0.5; cursor: default; }
.wwf-submit-btn {
  white-space: nowrap;
  min-width: 96px;
}
.wwf-tile-rack {
  flex: 1; max-width: 48px;
  aspect-ratio: 1 / 1;
  cursor: pointer;
  border: 1px solid #d4a84a;
  background: #fff8e1;
  transition: transform 0.1s;
}
.wwf-tile-rack:hover:not([disabled]):not(.wwf-tile-spent) { transform: translateY(-2px); }
.wwf-tile-rack.selected {
  outline: 3px solid #8852f7;
  outline-offset: 1px;
  transform: translateY(-3px);
}
.wwf-tile-rack.wwf-tile-spent {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}
.wwf-tile-rack[disabled] { opacity: 0.6; cursor: default; }
.yodi-link-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; margin: 0 0 20px;
}
.yodi-link-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px;
}
.yodi-link-row {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.yodi-link-url {
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 12px; font-size: 13px; color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  flex: 1; min-width: 180px; user-select: all;
}
.yodi-link-copy {
  background: var(--accent); color: white; border: 0; padding: 8px 14px;
  border-radius: 8px; font-size: 12px; font-weight: 500; cursor: pointer;
}
.yodi-link-copy:hover { background: #234a2e; }
.yodi-link-sub { font-size: 12px; margin: 8px 0 0; }

.slug-field-row {
  display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: 8px;
  overflow: hidden; background: var(--surface);
}
.slug-field-row:focus-within { border-color: var(--accent); }
.slug-prefix {
  padding: 10px 12px; background: var(--bg); color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
  border-right: 1px solid var(--line); display: inline-flex; align-items: center;
}
.slug-field-row input {
  flex: 1; border: 0; padding: 10px 12px; background: transparent;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px;
  outline: none; color: var(--ink);
}
.slug-help { display: block; font-size: 12px; margin-top: 6px; line-height: 1.4; }
.slug-help code { background: var(--bg); padding: 1px 5px; border-radius: 3px; font-size: 11px; }

.wwf-tile-rack:not([disabled]):not(.wwf-tile-spent) { cursor: grab; }
.wwf-tile-rack:not([disabled]):not(.wwf-tile-spent):active { cursor: grabbing; }
.wwf-tile-rack.wwf-tile-dragging { opacity: 0.4; }
.wwf-tile-rack.wwf-tile-drop-before { box-shadow: -3px 0 0 0 var(--accent); }

/* Touch drag — the rack and pending tiles must not let the browser steal
   the pointer for scroll / double-tap-zoom. Applied to the entire rack so
   a finger that lands between tiles still initiates a drag (not a scroll). */
.wwf-rack, .wwf-tile-rack, .wwf-tile-pending { touch-action: none; }
/* Cell highlight while a touch-drag ghost is hovering a valid drop cell.
   Strong outline because the finger usually obscures the cell itself. */
.wwf-cell.wwf-drop-target {
  background: #a7f3d0 !important;
  outline: 3px solid #059669;
  outline-offset: -3px;
  box-shadow: 0 0 0 3px rgba(5,150,105,0.35);
}
/* Ghost follows the finger; exists only during touch drag. */
.wwf-drag-ghost { pointer-events: none; }
/* Circular magnifier lens that floats above the finger during touch drag
   so the user can see the target cell beneath their thumb. */
.wwf-mag-lens {
  position: fixed;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #059669;
  box-shadow: 0 0 0 2px #fff, 0 10px 30px rgba(0,0,0,0.3);
  background: var(--surface);
  pointer-events: none;
  z-index: 2100;
}
.wwf-mag-cross {
  position: absolute;
  left: 50%; top: 50%;
  width: 20px; height: 20px;
  margin-left: -10px; margin-top: -10px;
  border: 2px solid #059669;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.85);
}
.wwf-tile-rack.wwf-tile-drop-after { box-shadow: 3px 0 0 0 var(--accent); }
.wwf-tile-rack .wwf-tile-letter { font-size: 20px; }
.wwf-tile-rack .wwf-tile-points { font-size: 9px; right: 3px; bottom: 2px; }

.wwf-actions {
  display: flex; justify-content: center; gap: 8px; flex-wrap: wrap;
}
.wwf-preview-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 4px 2px; font-size: 14px;
}
.wwf-preview-score {
  font-weight: 700; color: var(--accent); font-size: 16px; letter-spacing: -0.02em;
}
.wwf-preview-bar.wwf-preview-invalid .wwf-preview-score {
  color: #b91c1c;
}
.wwf-preview-words {
  color: var(--muted); font-size: 13px; letter-spacing: 0.03em; text-transform: uppercase;
}
.wwf-error {
  text-align: center;
  margin-top: 8px;
  font-size: 13px;
  min-height: 16px;
}
.wwf-error.wwf-error-active { color: #b91c1c; }

@media (max-width: 560px) {
  .wwf-board { max-width: 100%; gap: 1px; padding: 3px; }
  .wwf-cell { border-radius: 2px; font-size: 7px; }
  .wwf-mult-label { font-size: 6px; }
  .wwf-tile-letter { font-size: 11px; }
  .wwf-tile-points { font-size: 5px; }
  .wwf-tile-rack .wwf-tile-letter { font-size: 18px; }
  .wwf-tile-rack .wwf-tile-points { font-size: 8px; }
}

@media (max-width: 780px) {
  .event-date { font-size: 12px; }
  .event-meta { font-size: 12px; }

  /* Person hero */
  .person-hero { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; }
  .avatar { width: 52px; height: 52px; font-size: 18px; }

  /* RSVP */
  .rsvp-bar { flex-direction: column; align-items: stretch; padding: 12px 14px; }
  .rsvp-form { justify-content: space-between; }
  .rsvp-btn { flex: 1; text-align: center; }

  /* Forms */
  .form-card { padding: 14px; }
  .form-grid { grid-template-columns: 1fr; gap: 12px; }
  .form-actions { flex-wrap: wrap; }

  /* Email editor */
  .email-edit-row { flex-direction: column; align-items: flex-start; }
  .email-edit-addr { min-width: 0; width: 100%; }
  .email-add-form { flex-direction: column; align-items: stretch; }
  .email-add-form input,
  .email-add-form button { width: 100%; }

  /* Gift add form */
  .gift-add-form { flex-direction: column; align-items: stretch; }
  .gift-add-form select,
  .gift-add-form input,
  .gift-add-form button { width: 100%; }

  /* Household address card */
  .auth-wrap { margin: 20px auto; }

  /* Admin cards */
  .admin-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .admin-stat { padding: 12px 14px; }
  .admin-stat .stat-num { font-size: 22px; }

  /* Map */
  .map-canvas { height: 400px; }
}

/* ── Camera recording modal ─────────────────────────────────────────────── */
.cam-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 9999;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 24px;
}
.cam-modal[hidden] { display: none; }
.cam-modal video {
  width: min(560px, 96vw);
  aspect-ratio: 16/9;
  border-radius: 12px;
  background: #111;
  object-fit: cover;
}
.cam-hud {
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px; color: #fff; font-size: 15px;
  min-height: 24px;
}
.cam-timer { font-variant-numeric: tabular-nums; }
.cam-btns {
  display: flex; gap: 12px; margin-top: 18px;
}
.cam-btn-cancel {
  background: rgba(255,255,255,0.15); color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  padding: 10px 22px; border-radius: 8px;
  cursor: pointer; font-size: 15px;
}
.cam-btn-cancel:hover { background: rgba(255,255,255,0.25); }
.cam-btn-record {
  background: #dc2626; color: #fff;
  border: none; padding: 10px 24px; border-radius: 8px;
  cursor: pointer; font-size: 15px; font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
.cam-btn-record:hover { background: #b91c1c; }
.cam-btn-stop {
  background: var(--accent); color: #fff;
  border: none; padding: 10px 24px; border-radius: 8px;
  cursor: pointer; font-size: 15px; font-weight: 600;
}
.cam-btn-stop:hover { opacity: 0.85; }

/* Push notification bell in nav */
.nav-bell {
  background: none; border: none; cursor: pointer;
  color: var(--muted); padding: 4px;
  display: flex; align-items: center;
  border-radius: 6px;
}
.nav-bell:hover { color: var(--accent); }

/* ═══ Game rules button + dialog ════════════════════════════════════════
   Rendered inline (NOT fixed) inside the main content area, absolute to it,
   so it tucks into the top-right of the page under the nav without
   overlapping any game controls or on-screen keyboards. */
.main { position: relative; }
.game-rules-btn {
  /* Minimal round "?" — small and visible without crowding game UI. */
  position: absolute;
  top: 8px;
  right: 12px;
  z-index: 4;
  width: 30px; height: 30px; padding: 0;
  background: var(--surface);
  color: var(--accent);
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow);
  cursor: pointer;
}
.game-rules-btn:hover { border-color: var(--accent); background: var(--accent); color: #fff; }
.game-rules-btn:hover .ti { color: #fff; }
.game-rules-btn .ti { color: var(--accent); }

.game-rules-dialog {
  border: none; border-radius: 14px; padding: 0;
  max-width: 440px; width: calc(100% - 32px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.game-rules-dialog::backdrop {
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(2px);
}
.game-rules-body {
  padding: 20px 22px 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.game-rules-body h3 {
  margin: 0 0 2px; font-size: 18px; color: var(--accent);
}
.game-rules-body ul {
  margin: 0; padding-left: 20px;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 15px; line-height: 1.45;
}
.game-rules-close-form { display: flex; justify-content: flex-end; margin-top: 4px; }

/* Nudge the rules button out of the way when a game is in fullscreen mode. */
.is-fullscreen .game-rules-btn { display: none; }

/* ═══ Chat: GIF picker (GIPHY) ═══════════════════════════════════════ */
.chat-gif-btn {
  font-weight: 700; font-size: 11px; letter-spacing: 0.06em;
  padding: 0 8px; line-height: 1; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--accent);
}
.chat-gif-btn:hover { background: var(--accent); color: #fff; }

.msg-gif {
  display: block; max-width: 260px; max-height: 280px;
  border-radius: 10px; margin-top: 4px;
}

/* ── Game invite cards ─────────────────────────────────────────────────── */
.game-invite-card {
  display: flex; flex-direction: column; gap: 8px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--yodi-purple) 8%, var(--surface)), var(--surface));
  border: 1.5px solid color-mix(in srgb, var(--yodi-purple) 30%, var(--line));
  border-radius: 14px; padding: 14px 16px; max-width: 280px; margin-top: 4px;
}
.game-invite-card.gi-accepted { border-color: #22c55e; }
.game-invite-card.gi-declined { opacity: 0.55; }
.gi-head { display: flex; align-items: center; gap: 8px; }
.gi-icon { color: var(--yodi-purple); display: flex; }
.gi-title { font-weight: 700; font-size: 15px; }
.gi-sub { font-size: 13px; color: var(--muted); }
.gi-actions { display: flex; gap: 8px; margin-top: 2px; }
.gi-btn { padding: 7px 18px; border-radius: 20px; border: none; font-size: 13px; font-weight: 600; cursor: pointer; }
.gi-btn-accept { background: var(--yodi-purple); color: #fff; }
.gi-btn-accept:hover { opacity: 0.88; }
.gi-btn-decline { background: var(--line); color: var(--muted); }
.gi-btn-decline:hover { background: var(--bg); color: var(--ink); }
.gi-status { font-size: 13px; display: flex; align-items: center; gap: 5px; }
.gi-status-accepted { color: #22c55e; font-weight: 600; }
.gi-status-accepted a { color: var(--yodi-purple); text-decoration: none; font-weight: 700; }
.gi-status-accepted a:hover { text-decoration: underline; }
.gi-status-declined { color: var(--muted); }
.game-result-card {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: 14px; padding: 12px 16px; max-width: 280px; margin-top: 4px;
}
.gr-head { display: flex; align-items: center; gap: 8px; }
.gr-icon { color: #f59e0b; display: flex; }
.gr-title { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.gr-body { font-size: 14px; font-weight: 600; color: var(--ink); }
.gr-link { font-size: 13px; color: var(--yodi-purple); text-decoration: none; font-weight: 600; }
.gr-link:hover { text-decoration: underline; }
/* ── Game picker modal ──────────────────────────────────────────────────── */
.game-picker-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  display: flex; align-items: flex-end; justify-content: center; z-index: 900;
}
.game-picker-modal[hidden] { display: none; }
.game-picker-inner {
  background: var(--surface); border-radius: 20px 20px 0 0;
  width: 100%; max-width: 540px; padding: 0 0 env(safe-area-inset-bottom, 16px);
  box-shadow: 0 -4px 32px rgba(0,0,0,0.18); animation: gpSlideUp 0.22s ease;
}
@keyframes gpSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.game-picker-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 12px; font-weight: 700; font-size: 15px;
  border-bottom: 1px solid var(--line);
}
.game-picker-close {
  background: var(--line); border: none; border-radius: 50%;
  width: 28px; height: 28px; font-size: 18px; cursor: pointer; color: var(--muted);
  display: flex; align-items: center; justify-content: center;
}
.game-picker-close:hover { color: var(--ink); }
.game-picker-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px; padding: 16px;
}
.game-pick-form { display: contents; }
.game-pick-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 8px; border-radius: 14px; border: 1.5px solid var(--line);
  background: var(--bg); cursor: pointer; transition: border-color 0.15s, background 0.15s; width: 100%;
}
.game-pick-btn:hover { border-color: var(--yodi-purple); background: var(--surface); }
.game-pick-icon { color: var(--yodi-purple); }
.game-pick-label { font-size: 12px; font-weight: 600; text-align: center; color: var(--ink); line-height: 1.3; }

.gif-modal {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(15, 23, 42, 0.55);
  display: flex; align-items: flex-end; justify-content: center;
  backdrop-filter: blur(2px);
}
.gif-modal-inner {
  width: 100%; max-width: 560px; max-height: 80vh;
  background: var(--surface); border-radius: 14px 14px 0 0;
  display: flex; flex-direction: column; overflow: hidden;
}
@media (min-width: 720px) {
  .gif-modal { align-items: center; }
  .gif-modal-inner { border-radius: 14px; max-height: 640px; }
}
.gif-modal-head {
  display: flex; gap: 8px; padding: 12px;
  border-bottom: 1px solid var(--line); background: var(--bg);
}
.gif-modal-head input[type="search"] {
  flex: 1; padding: 10px 12px; font-size: 15px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
}
.gif-close {
  background: none; border: 0; font-size: 24px; line-height: 1;
  color: var(--muted); cursor: pointer; padding: 0 10px; border-radius: 8px;
}
.gif-close:hover { background: var(--line); color: var(--ink); }

.gif-grid {
  flex: 1; overflow-y: auto; padding: 10px;
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.gif-empty {
  grid-column: 1 / -1;
  text-align: center; padding: 32px 12px;
}
.gif-tile {
  /* .gif-tile is now the <img> itself, not a wrapping <button>. Replaced
     elements honor aspect-ratio in CSS Grid where <button> didn't. */
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  background: var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: transform 80ms, box-shadow 120ms;
}
.gif-tile:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.gif-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.gif-modal-foot {
  padding: 8px 14px; font-size: 11px; text-align: center;
  border-top: 1px solid var(--line);
}

/* ═══ Chat: pinned messages ═══════════════════════════════════════════ */
.pin-glyph { font-size: 13px; line-height: 1; filter: grayscale(0.4); }
.msg-action-pinned .pin-glyph { filter: none; }
.msg-pin-form { margin: 0; display: inline-flex; }
.msg-pinned-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; margin-bottom: 4px;
}

.pinned-strip {
  background: #fffbeb; border: 1px solid #f59e0b; border-radius: 8px;
  margin: 0 0 8px; padding: 0;
  font-size: 13px;
}
.pinned-strip summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; color: #92400e; font-weight: 600;
}
.pinned-strip summary::-webkit-details-marker { display: none; }
.pinned-strip summary::after { content: "▸"; margin-left: auto; font-size: 10px; opacity: 0.7; }
.pinned-strip[open] summary::after { content: "▾"; }
.pinned-list {
  list-style: none; margin: 0; padding: 4px 8px 8px;
  display: flex; flex-direction: column; gap: 4px;
}
.pinned-list li {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; background: var(--surface);
  border: 1px solid #fde68a; border-radius: 6px;
}
.pinned-row {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 6px;
  text-decoration: none; color: var(--ink);
}
.pinned-row:hover { color: var(--accent); }
.pinned-author { font-weight: 600; flex-shrink: 0; }
.pinned-body {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pinned-by { font-size: 11px; flex-shrink: 0; }
.pinned-unpin-form { margin: 0; }
.pinned-unpin-form .btn-link { font-size: 12px; color: var(--muted); }
.pinned-unpin-form .btn-link:hover { color: var(--danger); }

/* ═══ Chat: typing indicator ══════════════════════════════════════════ */
.typing-strip {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 14px;
  font-size: 12px; color: var(--muted);
}
.typing-dots {
  display: inline-flex; align-items: center; gap: 3px;
}
.typing-dots span {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--muted);
  animation: typing-bounce 1.1s infinite ease-in-out;
}
.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.30s; }
@keyframes typing-bounce {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* ═══ Messages: full-text search ══════════════════════════════════════ */
.msg-rail-head-actions { display: inline-flex; gap: 4px; align-items: center; }

.msg-search-page {
  max-width: 720px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 12px;
}
.msg-search-header h1 { margin: 6px 0 0; font-size: 22px; }
.msg-search-form {
  display: flex; gap: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px;
}
.msg-search-form input[type="search"] {
  flex: 1; padding: 10px 12px; font-size: 16px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
}
.msg-search-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.msg-search-row {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  text-decoration: none; color: var(--ink);
  transition: border-color 120ms, background 120ms;
}
.msg-search-row:hover { border-color: var(--accent); background: var(--accent-soft); }
.msg-search-avatar {
  width: 36px; height: 36px; border-radius: 50%; overflow: hidden;
  background: var(--accent); color: white; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.msg-search-avatar img { width: 100%; height: 100%; object-fit: cover; }
.msg-search-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.msg-search-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.msg-search-date { margin-left: auto; font-size: 12px; font-variant-numeric: tabular-nums; }
.msg-search-snippet {
  font-size: 14px; line-height: 1.4; color: var(--muted);
  white-space: pre-wrap;
}
.msg-search-snippet mark {
  background: #fef3c7; color: var(--ink); padding: 0 2px; border-radius: 2px;
}

/* ═══ Chat: reply threading ═══════════════════════════════════════════ */
.msg-reply-parent {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; line-height: 1.3;
  padding: 4px 8px; margin-bottom: 6px;
  background: rgba(0,0,0,0.04); border-left: 3px solid var(--muted);
  border-radius: 4px;
  text-decoration: none; color: inherit;
  opacity: 0.85;
}
.msg-reply-parent:hover { opacity: 1; background: rgba(0,0,0,0.07); }
.msg-reply-arrow { font-weight: 700; }
.msg-reply-parent-author { font-weight: 600; flex-shrink: 0; }
.msg-reply-parent-body {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
}
.msg-row.out .msg-reply-parent {
  background: rgba(255,255,255,0.16);
  border-left-color: rgba(255,255,255,0.6);
  color: #fff;
}

.reply-strip {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; margin: 0 0 4px;
  background: var(--accent-soft); border-top: 2px solid var(--accent);
  font-size: 13px;
}
.reply-strip-label { flex-shrink: 0; }
.reply-strip-preview {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--muted);
}
.reply-strip-cancel {
  background: none; border: 0; cursor: pointer;
  padding: 4px 8px; border-radius: 999px; color: var(--muted);
  font-size: 14px;
}
.reply-strip-cancel:hover { background: rgba(0,0,0,0.06); color: var(--ink); }

/* ═══ Chat: inline rich text (bold / italic / code / links) ═══════════ */
.msg-body strong { font-weight: 700; }
.msg-body em { font-style: italic; }
.msg-body code {
  background: rgba(0,0,0,0.06); padding: 0 4px; border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.95em;
}
.msg-row.out .msg-body code { background: rgba(255,255,255,0.22); }
.msg-link { color: inherit; text-decoration: underline; }
.msg-link:hover { text-decoration: none; opacity: 0.85; }

/* ═══ Chat: @mentions + autocomplete popover ══════════════════════════ */
.msg-mention {
  display: inline; padding: 0 3px; border-radius: 4px;
  color: var(--accent); background: var(--accent-soft);
  font-weight: 600; text-decoration: none;
}
.msg-mention:hover { background: #d1fae5; }
/* When the mention is in an outgoing bubble (green bubble in iMessage-style),
   flip colors so the tag stays legible. */
.msg-row.out .msg-mention {
  background: rgba(255,255,255,0.22); color: #fff;
}

.chat-input-box { position: relative; }
.mention-popover {
  position: absolute; bottom: calc(100% + 6px); left: 0; right: 0;
  max-height: 240px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 4px; z-index: 40;
}
.mention-opt {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 8px 10px; border-radius: 8px;
  background: none; border: 0; cursor: pointer;
  color: var(--ink); font-family: inherit; font-size: 14px; text-align: left;
}
.mention-opt:hover, .mention-opt-active { background: var(--accent-soft); }
.mention-avatar {
  width: 28px; height: 28px; border-radius: 50%; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: white; font-weight: 700; font-size: 12px;
  flex-shrink: 0;
}
.mention-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mention-name { font-weight: 500; }

/* ═══ Chat: reactions, inline actions, edit, deleted ══════════════════ */
.msg-bubble { position: relative; }
.msg-deleted .msg-body-deleted { color: var(--muted); font-style: italic; }
.msg-edited { font-size: 10px; margin-top: 2px; opacity: 0.7; }

/* Reaction pills row under each bubble. */
.msg-reactions {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 6px;
}
.msg-reaction-form { margin: 0; }
.msg-reaction {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; font-size: 12px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 999px;
  cursor: pointer; font-family: inherit; color: var(--ink);
  transition: background 120ms, border-color 120ms;
}
.msg-reaction:hover { background: var(--accent-soft); border-color: var(--accent); }
.msg-reaction-mine {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent);
  font-weight: 700;
}

/* Floating action row on the bubble — react, edit, delete. Only pops on
   hover (desktop) / tap-hold interaction already works because summary is
   a native button. */
.msg-actions {
  /* Incoming messages sit on the left side of the thread, so anchor the
     action bar to the bubble's LEFT edge — it then extends rightward into
     empty space instead of running off to the left of the avatar column.
     Outgoing messages (below) flip this so the bar extends leftward from
     the right edge for the same reason. */
  position: absolute; top: -18px; left: 8px;
  display: none; gap: 2px; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 6px; box-shadow: 0 4px 16px rgba(31,22,41,0.12);
  z-index: 5;
}
.msg-bubble:hover .msg-actions,
.msg-bubble:focus-within .msg-actions,
.msg-actions:focus-within,
.msg-actions.is-open { display: inline-flex; }
.msg-actions-sep {
  display: inline-block; width: 1px; height: 18px;
  background: var(--line); margin: 0 4px;
}
.msg-react-inline {
  background: none; border: none; padding: 2px 6px; cursor: pointer;
  font-size: 18px; line-height: 1; border-radius: 999px;
  transition: transform 0.1s, background 0.1s;
}
.msg-react-inline:hover { background: var(--accent-soft); transform: scale(1.2); }

/* Touch: a tiny always-visible trigger on each bubble so kids/grandparents
   who can't hover can still react. Tapping it toggles the full action bar
   for that bubble (JS adds .is-open). Hidden on hover-capable devices. */
.msg-actions-trigger {
  position: absolute; top: -10px; right: 8px;
  width: 24px; height: 24px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--muted); cursor: pointer; padding: 0;
  display: none; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1; z-index: 4;
}
@media (hover: none) {
  .msg-actions-trigger { display: inline-flex; }
  .msg-bubble:hover .msg-actions { display: none; }
  .msg-actions.is-open { display: inline-flex; }
}
.msg-row.out .msg-actions { left: auto; right: 8px; }
.msg-action-btn {
  background: none; border: none; padding: 4px 6px; cursor: pointer;
  color: var(--muted); border-radius: 999px; font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center;
}
.msg-action-btn:hover { background: var(--bg); color: var(--ink); }
.msg-action-danger:hover { color: var(--danger); background: #fee2e2; }
.msg-delete-form { margin: 0; display: inline-flex; }

/* Reaction picker popover — anchored by <details> */
.msg-react-picker { position: relative; }
.msg-react-picker > summary { list-style: none; cursor: pointer; }
.msg-react-picker > summary::-webkit-details-marker { display: none; }
.msg-react-menu {
  position: absolute; top: calc(100% + 4px); right: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  display: inline-flex; gap: 2px; z-index: 20;
}
.msg-row.out .msg-react-menu { right: auto; left: 0; }
.msg-react-opt {
  background: none; border: none; font-size: 18px; cursor: pointer;
  padding: 4px 6px; border-radius: 999px; line-height: 1;
}
.msg-react-opt:hover { background: var(--accent-soft); }

/* Inline edit form, shown in-place inside the bubble */
.msg-edit-form {
  display: flex; flex-direction: column; gap: 8px; margin-top: 6px;
}
.msg-edit-form textarea {
  width: 100%; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 8px;
  font-family: inherit; font-size: 14px; resize: vertical;
  background: var(--bg);
}
.msg-edit-actions {
  display: flex; justify-content: flex-end; gap: 8px; align-items: center;
}
.msg-edit-actions .btn-primary { padding: 6px 14px; font-size: 13px; }

/* ═══ Parental activity feed ════════════════════════════════════════════ */
.activity-page {
  max-width: 680px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 14px;
}
.activity-header h1 {
  margin: 6px 0 4px; font-size: 22px;
  display: inline-flex; align-items: center; gap: 8px;
}
.activity-header p { margin: 0; font-size: 14px; }
.activity-empty {
  background: var(--surface); border: 1px dashed var(--line); border-radius: 12px;
  padding: 32px 16px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.activity-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.activity-item {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 6px;
}
.activity-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 12px;
}
.activity-kind-pill {
  background: var(--accent-soft); color: var(--accent);
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.activity-context { font-weight: 500; }
.activity-date { margin-left: auto; font-variant-numeric: tabular-nums; }
.activity-body { white-space: pre-wrap; word-break: break-word; font-size: 15px; }
.activity-jump { font-size: 12px; text-decoration: none; }
.activity-jump:hover { color: var(--accent); }

/* ═══ Profile switching (kids without email/phone) ═════════════════════ */
.playing-as-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 8px 14px; margin: 8px auto 0;
  background: var(--accent-soft); border: 1px solid var(--accent);
  border-radius: 999px; color: var(--accent);
  font-size: 14px; font-weight: 600;
}
.playing-as-banner .btn-link { color: var(--accent); }

.switch-page {
  max-width: 560px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 16px;
}
.switch-header h1 { margin: 0 0 4px; font-size: 24px; }
.switch-header p { margin: 0; }
.switch-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.switch-tile-form { margin: 0; }
.switch-tile {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 100%; padding: 18px 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  cursor: pointer; font-family: inherit; color: var(--ink);
  transition: border-color 120ms, background 120ms, transform 80ms;
}
.switch-tile:hover { border-color: var(--accent); background: var(--accent-soft); }
.switch-tile:active { transform: scale(0.98); }
.switch-tile-active { border-color: var(--accent); background: var(--accent-soft); }
.switch-tile-avatar {
  width: 72px; height: 72px; border-radius: 50%; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: white; font-weight: 700; font-size: 22px;
}
.switch-tile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.switch-initials { text-transform: uppercase; }
.switch-tile-name { font-weight: 600; font-size: 15px; }
.switch-tile-meta { font-size: 11px; display: inline-flex; align-items: center; gap: 4px; }

.switch-pin-card {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 24px;
}
.switch-pin-avatar {
  width: 96px; height: 96px; border-radius: 50%; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: white; font-weight: 700; font-size: 30px;
}
.switch-pin-avatar img { width: 100%; height: 100%; object-fit: cover; }
.switch-pin-card h2 { margin: 0; font-size: 18px; }
.switch-pin-form { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 240px; }
.switch-pin-input {
  font-size: 28px; text-align: center; letter-spacing: 12px;
  padding: 14px; border: 1px solid var(--line); border-radius: 10px;
  font-family: inherit; background: var(--bg);
}
.switch-error { color: var(--danger); margin: 0; font-weight: 600; }
.switch-empty { text-align: center; padding: 24px 16px; }
.switch-hint { text-align: center; }

/* ── PIN management card on /person/{id} ──────────────────────────────── */
.pin-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
  margin: 16px 0;
}
.pin-card-head { display: flex; flex-direction: column; gap: 2px; }
.pin-form { display: flex; gap: 8px; flex-wrap: wrap; }
.pin-input {
  flex: 1; min-width: 140px; max-width: 200px;
  padding: 10px 12px; font-size: 16px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); font-family: inherit;
  letter-spacing: 6px; text-align: center;
}
.pin-clear-form { margin: 0; }

/* ═══ Audience picker (shared by Pictionary + Charades) ════════════════ */
.audience-picker-section { display: flex; flex-direction: column; gap: 12px; }
.audience-fs {
  border: 0; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
  width: 100%;
}
.audience-fs legend { margin-bottom: 2px; }
.audience-picker {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 4px; text-align: left;
}
.audience-picker-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-top: 2px;
}
.audience-picker-footer .btn-primary {
  display: inline-flex; align-items: center; gap: 6px;
}
.audience-picker input[type="search"] {
  width: 100%; padding: 10px 12px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); font-size: 14px;
}
.audience-picker .people-grid {
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  max-height: 260px; overflow-y: auto;
  padding: 4px;
}
/* Tile: card with avatar + name, checkbox hidden. Selected tile gets an
   accent outline + checkmark badge. */
.audience-picker .person-tile {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 6px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  cursor: pointer;
  transition: border-color 120ms, background 120ms, transform 80ms;
}
.audience-picker .person-tile:hover {
  border-color: var(--accent); background: var(--surface);
}
.audience-picker .audience-invite-check {
  position: absolute; opacity: 0; pointer-events: none;
}
.audience-picker .person-tile.selected {
  background: var(--accent-soft);
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.audience-picker .person-tile.selected::after {
  content: "✓";
  position: absolute; top: 4px; right: 6px;
  color: var(--accent); font-weight: 800; font-size: 16px;
}
.audience-picker .person-tile-avatar { width: 44px; height: 44px; }

/* ── Draft card ─────────────────────────────────────────────── */
.pict-draft-card {
  background: var(--accent-soft);
  border: 1.5px solid var(--accent);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.pict-draft-prompt { display: flex; flex-direction: column; gap: 2px; }
.pict-draft-prompt strong { font-size: 20px; letter-spacing: 0.5px; }

/* ── Round (active or mine) ─────────────────────────────────── */
.pict-round {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px; display: flex; flex-direction: column; gap: 10px;
  box-shadow: var(--shadow);
}
.pict-round-won { border-color: var(--accent); background: var(--accent-soft); }
.pict-round-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.pict-drawer { display: flex; align-items: center; gap: 10px; }
.pict-drawer img {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
}
.pict-avatar-fallback {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent); color: white;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
}
.pict-won-tag {
  background: var(--accent); color: white; font-size: 12px;
  padding: 4px 10px; border-radius: 999px; font-weight: 700;
}
.pict-image-wrap {
  width: 100%; aspect-ratio: 1 / 1;
  background: #fff; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.pict-image-wrap img { width: 100%; height: 100%; object-fit: contain; }

.pict-guess-form { display: flex; gap: 8px; }
.pict-guess-form input[type="text"] {
  flex: 1; padding: 10px 12px; font-size: 16px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg);
}
.pict-guess-log {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
  max-height: 180px; overflow-y: auto;
}
.pict-guess-log li {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; background: var(--bg); border-radius: 8px;
  font-size: 14px;
}
.pict-g-name { font-weight: 600; min-width: 60px; }
.pict-g-text { flex: 1; }
.pict-g-correct { background: var(--accent-soft); border: 1px solid var(--accent); }
.pict-g-check { color: var(--accent); font-weight: 700; }

/* ── Gallery ────────────────────────────────────────────────── */
.pict-gallery {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.pict-gallery-card {
  margin: 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden;
  display: flex; flex-direction: column;
}
.pict-gallery-card img {
  width: 100%; aspect-ratio: 1/1; object-fit: contain; background: #fff;
}
.pict-gallery-card figcaption {
  padding: 8px 10px; display: flex; flex-direction: column; gap: 2px;
}
.pict-gallery-card strong { font-size: 14px; }

/* ── Draw page ──────────────────────────────────────────────── */
.pict-tools {
  display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center;
  padding: 10px 12px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px;
}
.pict-tool { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.pict-tool input[type="color"] { width: 36px; height: 32px; border: none; background: none; padding: 0; }
.pict-tool input[type="range"] { width: 90px; }
.pict-swatches { display: flex; gap: 4px; }
.pict-swatch {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0;
}
.pict-swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pict-actions-inline { display: flex; gap: 6px; margin-left: auto; }
.pict-actions-inline .btn-secondary { padding: 6px 10px; font-size: 13px; }
#pict-eraser.active { background: var(--ink); color: white; border-color: var(--ink); }

.pict-canvas-wrap {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 2px; width: 100%; aspect-ratio: 1 / 1;
  overflow: hidden; touch-action: none;
}
#pict-canvas {
  width: 100%; height: 100%; display: block;
  cursor: crosshair; touch-action: none;
}
.pict-submit-form { display: flex; justify-content: center; }
.pict-submit-form .btn-primary { font-size: 16px; padding: 12px 24px; }
.pict-abandon-form { text-align: center; margin-top: -4px; }
.btn-link {
  background: none; border: none; color: var(--muted);
  font-size: 13px; text-decoration: underline; cursor: pointer;
}
.btn-link:hover { color: var(--danger); }

@media (max-width: 480px) {
  .pict-gallery { grid-template-columns: 1fr; }
  .pict-actions-inline { margin-left: 0; width: 100%; justify-content: flex-start; }
}

/* ── Record page ────────────────────────────────────────────── */
.char-prompt-card {
  background: var(--accent-soft); border: 1.5px solid var(--accent);
  border-radius: 12px; padding: 16px; text-align: center;
  display: flex; flex-direction: column; gap: 6px; align-items: center;
}
.char-prompt { font-size: 24px; letter-spacing: 0.5px; color: var(--accent); }
.char-stage {
  position: relative; width: 100%; background: #000;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  aspect-ratio: 9/16; max-height: 70vh;
}
.char-stage video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.char-stage-overlay {
  position: absolute; top: 10px; left: 10px; right: 10px;
  display: flex; align-items: center; justify-content: space-between;
  pointer-events: none;
}
.char-timer {
  background: rgba(0,0,0,0.55); color: white;
  font-variant-numeric: tabular-nums; font-size: 14px;
  padding: 4px 10px; border-radius: 999px;
}
.char-dot {
  width: 12px; height: 12px; border-radius: 50%; background: #ef4444;
  box-shadow: 0 0 0 4px rgba(239,68,68,0.25);
  animation: char-pulse 1s infinite ease-in-out;
}
@keyframes char-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}
.char-controls {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.char-controls .btn-primary, .char-controls .btn-secondary {
  font-size: 16px; padding: 12px 20px;
  display: inline-flex; align-items: center; gap: 6px;
}
#char-submit-form {
  display: flex; justify-content: center;
}
#char-submit-btn { font-size: 16px; padding: 12px 24px; }
.char-abandon-form { text-align: center; margin-top: -4px; }
.char-error { text-align: center; color: var(--danger); }

@media (max-width: 480px) {
  .char-gallery { grid-template-columns: 1fr; }
  .char-video-wrap, .char-stage { aspect-ratio: 4 / 5; }
}

/* ═══ Story builder ═════════════════════════════════════════════════════ */
.story-builder-hero { text-align: center; margin: 8px 0 24px; }
.story-builder-hero h1 { margin: 0 0 4px; font-size: 28px; letter-spacing: -0.02em; }
.story-builder-progress {
  margin: 12px auto 6px; max-width: 400px; height: 8px;
  background: var(--line); border-radius: 999px; overflow: hidden;
}
.story-builder-progress-bar {
  height: 100%; background: var(--yodi-gradient);
  border-radius: 999px; transition: width 0.4s ease;
}
.story-builder-cat { margin: 24px 0 12px; }
.story-q {
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: 14px; padding: 14px 16px; margin-bottom: 10px;
}
.story-q[open] { border-color: rgba(136,82,247,0.4); box-shadow: 0 4px 14px rgba(136,82,247,0.08); }
.story-q summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 15px; font-weight: 600; color: var(--ink);
}
.story-q summary::-webkit-details-marker { display: none; }
.story-q-state {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  white-space: nowrap;
}
.story-q-done { background: var(--accent-soft); color: var(--yodi-purple); }
.story-q-pending { background: var(--line); color: var(--muted); }
.story-q-form { margin-top: 12px; }
.story-q-form textarea {
  width: 100%; padding: 10px 14px; border: 1.5px solid var(--line);
  border-radius: 10px; font-size: 15px; line-height: 1.5; font-family: inherit;
  background: var(--bg); color: var(--ink); resize: vertical; outline: none;
}
.story-q-form textarea:focus { border-color: var(--yodi-purple); background: var(--surface); }
.story-q-actions { display: flex; gap: 8px; align-items: center; margin-top: 10px; }

/* Story Q&A rendered on profile */
.story-qa-list { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; }
.story-qa-item {
  padding: 14px 16px; border-radius: 12px;
  background: rgba(255,255,255,0.6); border: 1px solid var(--line);
}
.story-qa-q {
  font-size: 13px; font-weight: 700; color: var(--yodi-purple);
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px;
}
.story-qa-a { font-size: 15px; line-height: 1.55; color: var(--ink); white-space: pre-wrap; }

/* Home-page daily prompt card */
.story-prompt-card {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, rgba(0,233,246,0.10), rgba(136,82,247,0.14), rgba(242,41,158,0.10));
  border: 1.5px solid rgba(136,82,247,0.28);
  border-radius: 16px; padding: 16px 18px; margin: 12px 0 16px;
}
.story-prompt-label {
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--yodi-purple); margin-bottom: 6px;
}
.story-prompt-q { font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.story-prompt-form textarea {
  width: 100%; padding: 10px 14px; border-radius: 12px;
  border: 1.5px solid rgba(136,82,247,0.25); background: #fff;
  font-size: 15px; line-height: 1.5; font-family: inherit; outline: none; resize: vertical;
}
.story-prompt-form textarea:focus { border-color: var(--yodi-purple); }
.story-prompt-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; gap: 10px; }
.story-prompt-skip { color: var(--muted); font-size: 13px; text-decoration: none; }
.story-prompt-skip:hover { color: var(--yodi-purple); text-decoration: underline; }

.story-card-head-actions { display: inline-flex; gap: 6px; }

/* ═══ My Story (profile) ═══════════════════════════════════════════════ */
.story-card {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 16px;
  padding: 20px 22px;
  margin: 16px 0 24px;
  position: relative;
}
.story-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(135deg, rgba(0,233,246,0.06), rgba(136,82,247,0.08), rgba(242,41,158,0.06));
  pointer-events: none; z-index: 0;
}
.story-card > * { position: relative; z-index: 1; }
.story-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.story-card-head h2 { margin: 0; font-size: 18px; letter-spacing: -0.01em; }
.story-body p {
  margin: 0 0 12px; line-height: 1.6; font-size: 15.5px; color: var(--ink);
}
.story-body p:last-child { margin-bottom: 0; }
.story-empty { text-align: center; padding: 10px 0 4px; }
.story-empty p { margin: 0 0 12px; font-size: 14px; line-height: 1.55; }
.story-empty .btn-primary { display: inline-flex; align-items: center; gap: 6px; }
.story-edit-toggle { cursor: pointer; }
.story-editor textarea {
  width: 100%; min-height: 160px;
  padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 14px;
  font-size: 15px; line-height: 1.55; font-family: inherit;
  background: var(--bg); color: var(--ink); resize: vertical; outline: none;
  transition: border-color 0.15s;
}
.story-editor textarea:focus { border-color: var(--yodi-purple); background: var(--surface); }
.story-prompts {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin: 10px 0 4px; font-size: 12px;
}
.story-prompts-label { margin-right: 4px; font-weight: 600; }
.story-chip {
  padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--yodi-purple); font-weight: 600; font-size: 12px;
  cursor: pointer; transition: background 0.12s, border-color 0.12s, transform 0.1s;
}
.story-chip:hover { background: var(--accent-soft); border-color: var(--yodi-purple); transform: translateY(-1px); }
.story-editor-actions { display: flex; gap: 8px; margin-top: 14px; }