/* No `@view-transition` (the cross-page fade): on iPhones, a text field
   on a page reached through it got the cursor but no keyboard, so nobody
   could log in from the home-screen app. Pages switch instantly. */

:root {
  --bg: #f6f6fb;
  --card-bg: #ffffff;
  --border: #e7e7f0;
  --text: #16181f;
  --text-muted: #6b6f80;
  --accent: #4f7cba;
  --accent-dark: #3f65a0;
  --accent-soft: #e7edf8;
  --success: #22c55e;
  --danger: #ef4444;
  --shadow: 0 1px 2px rgba(17, 20, 45, 0.04), 0 4px 16px rgba(17, 20, 45, 0.04);
  /* FlyCord blue (logo, primary buttons, story rings, your own chat
     bubbles). Matches the app icon. */
  --brand-grad: #4f7cba;
  --brand-grad-hover: #3f65a0;
  --navbar-bg: rgba(255, 255, 255, 0.86);
  --skeleton-a: #eceef4;
  --skeleton-b: #f7f8fb;
}

html.dark {
  --bg: #0e1016;
  --card-bg: #161922;
  --border: #262a37;
  --text: #e9eaf1;
  --text-muted: #9a9fb2;
  --accent: #6f97d3;
  --accent-dark: #85a8dd;
  --accent-soft: #22304a;
  --brand-grad: #5a86c4;
  --brand-grad-hover: #6f97d3;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --navbar-bg: rgba(14, 16, 22, 0.86);
  --skeleton-a: #1d212c;
  --skeleton-b: #272c3a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  transition: background 0.2s ease, color 0.2s ease;
}

a { text-decoration: none; color: inherit; }

/* ---------- Navbar ---------- */

.navbar {
  background: var(--navbar-bg);
  border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  position: sticky;
  top: 0;
  z-index: 20;
}

.navbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}
.brand-icon { width: 30px; height: 30px; border-radius: 9px; display: block; }
.brand-name {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Line icons (the icon() macro in base.html). */
.ico { width: 20px; height: 20px; flex-shrink: 0; display: block; }

.nav-links {
  display: flex;
  gap: 4px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
}
.nav-links::-webkit-scrollbar { display: none; } /* Chrome/Safari/Edge */

.nav-link {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-link:hover { background: var(--accent-soft); color: var(--text); }
.nav-link.active { background: var(--accent-soft); color: var(--accent-dark); }

.navbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.icon-btn {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: var(--text-muted);
  padding: 6px;
  border-radius: 8px;
  transition: transform 0.15s ease, background 0.15s ease;
}
.icon-btn:active { transform: scale(0.9); }
#theme-toggle:active { transform: rotate(20deg) scale(0.9); }
.icon-btn:hover { background: var(--accent-soft); }

.navbar-right .icon-btn {
  display: inline-flex;
  padding: 9px;
  border-radius: 50%;
  color: var(--text-muted);
}
.navbar-right .icon-btn:hover { background: var(--accent-soft); color: var(--text); }
/* Moon in light mode, sun in dark mode. */
.theme-icon-sun { display: none; }
html.dark .theme-icon-sun { display: inline; }
html.dark .theme-icon-moon { display: none; }

/* Account menu: your avatar (+ name on wide screens) opens a small panel
   with My profile / Settings / Log out. */
.user-menu { position: relative; }
.user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 12px 3px 3px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.user-chip::-webkit-details-marker { display: none; }
.user-chip:hover, .user-menu[open] .user-chip { background: var(--accent-soft); }
.user-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 210px;
  padding: 6px;
  margin: 0;
  z-index: 30;
  box-shadow: 0 12px 32px rgba(17, 20, 45, 0.16);
}
.user-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.user-menu-item:hover { background: var(--accent-soft); }
.user-menu-item .ico { width: 18px; height: 18px; color: var(--text-muted); }
.user-menu-logout { color: var(--danger); }
.user-menu-form { margin: 0; }
button.user-menu-item { width: 100%; border: none; background: none; font: inherit; font-size: 14px; font-weight: 500; text-align: left; cursor: pointer; }
.user-menu-logout .ico { color: var(--danger); }
.only-mobile { display: none; }

/* Phone/tablet bottom tab bar — hidden on desktop (see the mobile block at
   the end of this file). */
.tabbar { display: none; }

/* ---------- Layout ---------- */

.page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}

.grid {
  display: grid;
  grid-template-columns: 260px 1fr 260px;
  gap: 20px;
  align-items: start;
}

.grid-single {
  grid-template-columns: 1fr;
  max-width: 620px;
  margin: 0 auto;
}

.col-left, .col-right { position: sticky; top: 76px; }
.col-center { min-width: 0; }
/* Desktop: the middle column stays in the middle even when a page has no
   left column (the feed and Explore, since Trends was removed). Only the
   3-column grid: .grid-single has one column, and pinning to column 2 there
   squeezed every single-column page (Messages, profiles, posts...) narrow. */
@media (min-width: 961px) {
  .grid:not(.grid-single) > .col-center { grid-column: 2; }
  .grid:not(.grid-single) > .col-right { grid-column: 3; }
}

@media (max-width: 960px) {
  /* minmax(0, ...): a wide child (the stories row with many friends) must
     scroll inside itself, not stretch the page wider than the phone. */
  .grid { grid-template-columns: minmax(0, 1fr); }
  .col-left, .col-right { position: static; }
  .nav-links { display: none; }
}

/* ---------- Animations ----------
   Respects prefers-reduced-motion — the decorative entrance/pop effects
   are skipped entirely for anyone who's asked for reduced motion; the
   hover/press feedback added elsewhere (via transition, not @keyframes)
   is left in place since it's small and not disorienting. */

@keyframes fade-slide-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes heart-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.35); }
  60% { transform: scale(0.92); }
  100% { transform: scale(1); }
}

@keyframes flash-slide-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes details-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Page entrances and the like pop moved to the "Motion" section at the end
   of this file (and main.js), so they run on phones too. */
@media (prefers-reduced-motion: no-preference) {
  .flash { animation: flash-slide-in 0.25s ease-out; }
  details[open] > form,
  details[open] > .report-form {
    animation: details-reveal 0.2s ease-out;
  }
}

/* ---------- Cards ---------- */

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 18px;
  margin-bottom: 16px;
}

.card-title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
}

.card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.card-title-row .card-title { margin-bottom: 0; }
.new-group-details { position: relative; }
.new-group-details .report-summary:hover { color: var(--accent-dark); }
.new-group-form {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  box-shadow: var(--shadow);
  z-index: 5;
  width: 220px;
}

.muted { color: var(--text-muted); }
.small { font-size: 13px; }


/* ---------- Composer ---------- */

.composer-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-weight: 700;
}

textarea, input[type=text], input[type=password], input[type=email], input[type=date] {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
}

textarea:focus, input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea, input[type=text], input[type=password], input[type=email], input[type=date] { transition: border-color 0.15s ease, box-shadow 0.15s ease; }
html.dark input[type=date] { color-scheme: dark; }  /* dark calendar popup */
/* Number fields and dropdowns (admin ban controls) match the other fields —
   without this they stayed browser-white in dark mode. Width is left to
   each use (e.g. .ban-amount). */
input[type=number], select {
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
}
html.dark input[type=number], html.dark select { color-scheme: dark; }
/* iPhone/iPad Safari draws date fields with its own native style, which
   ignores width: 100%, keeps a minimum width of its own and centres the
   text, so the field stuck out past the edge of narrow cards (the birthday
   step). Drop the native look so it sizes like the other fields; tapping it
   still opens the system date picker. */
input[type=date] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  min-width: 0;
  max-width: 100%;
  min-height: 46px;  /* the native look used to set the height */
  text-align: left;
}
input[type=date]::-webkit-date-and-time-value { text-align: left; }

.composer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.composer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chars-left { font-size: 13px; color: var(--text-muted); }

.image-preview {
  margin-top: 10px;
}
.image-filename {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
}

/* ---------- Buttons ---------- */

.btn {
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;  /* <button>s otherwise get the browser's own font */
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(15, 23, 42, 0.12); }
.btn:active { transform: translateY(0) scale(0.97); box-shadow: none; }

.btn-primary { background: var(--brand-grad); color: #fff; }
.btn-primary:hover { background: var(--brand-grad-hover); }
.btn-secondary { background: var(--accent-soft); color: var(--accent-dark); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #c0392b; }
.btn-full { width: 100%; margin-top: 6px; }
.btn-small { padding: 8px 14px; font-size: 13px; }

/* ---------- Tabs ---------- */

.tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.tab {
  background: var(--card-bg);
  border: 1px solid var(--border);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.tab:hover { background: var(--accent-soft); color: var(--text); }
.tab:active { transform: scale(0.95); }
.tab-active { background: var(--text); color: var(--card-bg); border-color: var(--text); }
.tab-active:hover { background: var(--text); color: var(--card-bg); }

.filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4px 12px;
  font-size: 14px;
}
.clear-filter { color: var(--accent); font-weight: 600; }

/* ---------- Posts ---------- */

.post-card {
  padding: 16px 18px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.post-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1);
}

.post-card { position: relative; }
.post-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 36px 10px 0;  /* room for the ⋯ button */
}

/* Dropdowns: <details class="dropdown"> with a .dropdown-panel (post ⋯ menu;
   main.js closes them on an outside click). */
.dropdown > summary { list-style: none; cursor: pointer; }
.dropdown > summary::-webkit-details-marker { display: none; }
.post-menu { position: absolute; top: 12px; right: 12px; z-index: 3; }
/* Keep an open menu above the next post (a hovered card is its own stacking context). */
.post-card:has(.post-menu[open]) { z-index: 4; }
.post-menu-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: var(--text-muted);
  user-select: none;
}
.post-menu-btn:hover, .post-menu[open] .post-menu-btn { background: var(--accent-soft); color: var(--text); }
.dropdown-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  width: 260px;
  padding: 6px;
  margin: 0;
  box-shadow: 0 12px 32px rgba(17, 20, 45, 0.16);
}
.dropdown-item {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 10px;
  background: none;
  text-align: left;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}
.dropdown-item::-webkit-details-marker { display: none; }
.dropdown-item:hover { background: var(--accent-soft); }
.dropdown-item.danger { color: var(--danger); }
.dropdown-panel .report-details { margin: 0; }
.dropdown-panel .report-form { flex-direction: column; margin: 4px 6px 6px; }

.post-username { font-weight: 700; font-size: 14px; }
.post-time { color: var(--text-muted); font-size: 13px; }

.post-content {
  font-size: 15px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 12px;
}

.tag-link { color: var(--accent); font-weight: 600; }
.tag-link:hover { text-decoration: underline; }

.post-image { margin-bottom: 12px; }
/* Normal photos show whole. Extreme shapes (a 1:5 screenshot, a panorama)
   used to shrink to a thin sliver or strip; the minimums keep them readable
   by trimming the middle (like Instagram), and tapping opens the full photo. */
/* Photos, videos and games run edge to edge across the card. */
.post-card .post-image, .post-card .post-video, .post-card .post-game { margin-left: -18px; margin-right: -18px; }
.post-image img {
  width: 100%;
  min-height: 160px;
  max-height: 620px;
  display: block;
  object-fit: cover;
}
.post-card .post-game .game-play { border-radius: 0; }

.post-video { margin-bottom: 12px; }
.post-video video {
  width: 100%;
  max-height: 620px;
  display: block;
  background: #000;
}

.post-footer {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-top: 2px;
  font-size: 13px;
}
/* Line-icon buttons under a post: ♡ 💬 ↗ */
.post-action, .like-btn {
  padding: 7px 9px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
}
.post-action { gap: 6px; }
.post-action:hover, .like-btn:hover { background: var(--accent-soft); }
.post-action .ico, .like-outline .ico { width: 22px; height: 22px; }
.share-btn { margin-left: auto; }
/* The like form (♡ + reactions pill) is a centred row, so the heart lines up
   with the pill and the 💬 / ↗ buttons instead of sitting on the text baseline. */
.post-footer .like-form { display: inline-flex; align-items: center; gap: 2px; }
.like-outline { display: inline-flex; }
/* Liked: the same heart, filled red (like Instagram). */
.like-btn.liked .like-outline { color: #ef4444; }
.like-btn.liked .like-outline .ico { fill: currentColor; }
.like-btn:hover .like-outline { color: #ef4444; }
/* The newest comments under a post. */
.post-comments { padding: 4px 4px 2px; font-size: 14px; }
.post-comments-all { display: block; color: var(--text-muted); font-size: 13px; margin-bottom: 4px; }
.post-comments-all:hover { color: var(--text); }
.post-comment { margin: 2px 0; line-height: 1.45; overflow-wrap: anywhere; }
.post-comment-user { font-weight: 700; margin-right: 3px; }
.post-comment-user:hover { text-decoration: underline; }

.inline-form { display: inline; }

.link-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  transition: color 0.15s ease;
}
.link-btn:hover { color: var(--text); }
.link-btn:active { transform: scale(0.95); }
.link-btn.liked { color: var(--danger); font-weight: 600; }
/* No text selection or long-press callout on the heart (quick repeated taps). */
.like-btn { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.like-count { color: var(--text-muted); font-size: 14px; font-weight: 600; min-width: 1ch; }
.clip-like .like-count { color: inherit; font-size: 12px; font-weight: 700; }  /* like the other Clips buttons: white on the video (phones), dark beside it (PC) */

.admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 2px;
}

.verified-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--brand-grad);
  font-size: 0;  /* hides the word "Verified" (still read by screen readers) */
  margin-left: 2px;
  vertical-align: middle;
}
.verified-badge::before { content: "✓"; font-size: 11px; font-weight: 800; color: #fff; line-height: 1; }

.banned-badge { margin-left: 4px; }

.empty-state { text-align: center; color: var(--text-muted); padding: 34px 20px; }
.empty-inline { padding: 18px 10px; }
.empty-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
}
.empty-title { margin: 0 0 4px; color: var(--text); font-weight: 700; font-size: 16px; }
.empty-text { margin: 0 0 14px; font-size: 14px; }
.empty-state .btn { display: inline-flex; margin-top: 4px; }
.explore-empty-icon { margin-top: 6px; }
.notif-empty { text-align: center; padding: 10px 6px; color: var(--text-muted); }
.notif-empty .empty-icon { width: 56px; height: 56px; font-size: 26px; }

/* Loading placeholders: a soft shimmer. !important beats the phone rule
   that switches animations off (shimmer is meant to move). */
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.skeleton, .post-image:not(.is-loaded), .media-thumb:not(.is-loaded) {
  background: linear-gradient(90deg, var(--skeleton-a) 30%, var(--skeleton-b) 50%, var(--skeleton-a) 70%);
  background-size: 300% 100%;
  animation: shimmer 1.3s ease-in-out infinite !important;
}
.post-image img, .media-thumb img, .media-thumb video { opacity: 0; transition: opacity 0.35s ease; }
.post-image.is-loaded img, .media-thumb.is-loaded img, .media-thumb.is-loaded video { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .skeleton, .post-image:not(.is-loaded), .media-thumb:not(.is-loaded) { animation: none !important; }
}
.skeleton { display: block; border-radius: 8px; }
.skeleton-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.skeleton-circle { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; }
.skeleton-line { height: 12px; flex: 1; }

/* Settings > Theme: Light / Dark / Auto. */
.segmented { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); }
.segmented label, .card .segmented label { display: block; margin: 0; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span { display: block; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.segmented input:checked + span { background: var(--card-bg); color: var(--text); box-shadow: 0 1px 3px rgba(17, 20, 45, 0.12); }
.segmented input:focus-visible + span { outline: 2px solid var(--accent); }

/* Buttons give a little feedback when pressed (works on phones too). */
.btn:active, .link-btn:active { filter: brightness(0.94); }

/* ---------- Profile (profile.html) ---------- */
.profile-hero { padding: 0; overflow: hidden; }
.profile-hero-body { padding: 0 22px 18px; }
.profile-hero-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: -54px; }
.profile-avatar { position: relative; flex-shrink: 0; }
.profile-avatar .avatar-xl { border: 4px solid var(--card-bg); box-shadow: 0 4px 16px rgba(17, 20, 45, 0.12); }
.profile-avatar .presence-dot { right: 8px; bottom: 8px; width: 22px; height: 22px; border-width: 4px; }
.profile-hero-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; padding-bottom: 4px; }
.profile-hero-actions form, .profile-sticky-actions form { margin: 0; }
.profile-more { position: relative; }
.profile-more .post-menu-btn { border: 1px solid var(--border); }
.profile-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 12px 0 2px;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.maker-badge { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-dark); letter-spacing: 0; }
.profile-bio { margin: 6px 0; font-size: 15px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.profile-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 0; color: var(--text-muted); font-size: 13px; }
.profile-meta .ico { width: 16px; height: 16px; }
.profile-stats { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.profile-stat { display: flex; flex-direction: column; align-items: center; gap: 1px; color: var(--text); }
.profile-stat strong { font-size: 20px; font-weight: 800; }
.profile-stat span { font-size: 12px; color: var(--text-muted); }
a.profile-stat:hover strong { color: var(--accent); }
.profile-tabs { display: flex; margin: 0 0 16px; border-bottom: 1px solid var(--border); }
.profile-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px 6px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.profile-tab .ico { width: 18px; height: 18px; }
.profile-tab:hover { color: var(--text); }
.profile-tab.active { color: var(--text); border-bottom-color: var(--accent); }
/* With JS, one underline slides between the tabs (initProfileTabs). */
.profile-tabs { position: relative; }
.profile-tab-indicator { display: none; }
.profile-tabs.js-tabs .profile-tab.active { border-bottom-color: transparent; }
.profile-tabs.js-tabs .profile-tab-indicator {
  display: block;
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}
.media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 16px; border-radius: 16px; overflow: hidden; }
.media-thumb { position: relative; display: block; aspect-ratio: 1; overflow: hidden; }
.media-thumb img, .media-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-thumb-play, .media-thumb-likes { position: absolute; color: #fff; font-weight: 700; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); }
.media-thumb-play { top: 8px; right: 10px; font-size: 14px; }
.media-thumb-likes { left: 8px; bottom: 6px; font-size: 12px; opacity: 0; transition: opacity 0.15s ease; }
.media-thumb:hover .media-thumb-likes, .media-thumb:focus-visible .media-thumb-likes { opacity: 1; }
.profile-games { padding: 14px 14px 8px; }
.profile-sticky {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 19;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 660px;
  margin: 0 auto;
  padding: 8px 14px;
  background: var(--navbar-bg);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 6px 18px rgba(17, 20, 45, 0.08);
}
.profile-sticky[hidden] { display: none; }
.profile-sticky-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-sticky-actions { display: flex; gap: 6px; }
details.admin-panel > .admin-panel-summary { cursor: pointer; list-style: none; margin: 0; }
details.admin-panel > .admin-panel-summary::-webkit-details-marker { display: none; }
details.admin-panel[open] > .admin-panel-summary { margin-bottom: 12px; }
.feed-pager { text-align: center; margin: 12px 0 24px; }

/* ---------- Reports ---------- */

.report-details { margin-top: 10px; }
.report-details-card {
  margin-top: 0;
  padding: 12px 18px;
}
.report-summary {
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  list-style: none;
  display: inline-block;
}
.report-summary::-webkit-details-marker { display: none; }
.report-summary:hover { color: var(--danger); }

.report-form {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.report-form input { flex: 1; }

.report-card { display: flex; flex-direction: column; gap: 8px; }
.report-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.report-target { margin: 0; font-size: 14px; }
.report-target a { color: var(--accent); }
.report-reason {
  margin: 0;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: 8px;
  font-size: 14px;
  font-style: italic;
}
.report-actions { display: flex; gap: 8px; }

.report-status-badge {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
}
.report-status-open { background: #fee2e2; color: #b91c1c; }
.report-status-resolved { background: #dcfce7; color: #15803d; }
html.dark .report-status-open { background: #3a1616; color: #f87171; }
html.dark .report-status-resolved { background: #14311f; color: #4ade80; }

/* ---------- Avatars ---------- */

.avatar-sm, .avatar-md, .avatar-lg, .avatar-xl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-soft);
  transition: transform 0.15s ease;
}
a:hover > .avatar-sm, a:hover > .avatar-md, a:hover > .avatar-lg,
a:hover .avatar-img { transform: scale(1.08); }
.avatar-sm { width: 30px; height: 30px; font-size: 16px; }
.avatar-md { width: 40px; height: 40px; font-size: 20px; }
.avatar-lg { width: 64px; height: 64px; font-size: 32px; }
.avatar-xl { width: 108px; height: 108px; font-size: 42px; }

.avatar-img { object-fit: cover; display: block; }

.group-avatar {
  background: var(--brand-grad);
  color: #fff;
  font-weight: 700;
}

.avatar-guest { color: var(--text-muted); }
/* No photo: first letter on a colour picked from the name (avatar_html). */
.avatar-initial { color: #fff; font-weight: 700; line-height: 1; user-select: none; }
.avatar-sm.avatar-initial { font-size: 13px; }
.avatar-md.avatar-initial { font-size: 17px; }
.avatar-lg.avatar-initial { font-size: 26px; }
.avatar-story.avatar-initial { font-size: 24px; }
.avatar-guest svg { width: 60%; height: 60%; }

/* ---------- Auth pages ---------- */

.auth-wrap {
  display: flex;
  justify-content: center;
  padding-top: 40px;
}
.auth-card { width: 100%; max-width: 380px; }
.brand-lg { color: var(--text); margin: 0 0 4px; text-align: center; letter-spacing: -0.02em; }
.auth-logo { display: block; margin: 4px auto 12px; border-radius: 16px; }
.auth-card .muted { text-align: center; }
.card label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 6px; }
.card label:first-child { margin-top: 0; }
.field-hint { margin: 4px 0 0; }
.field-hint + .btn { margin-top: 14px; }  /* e.g. Settings: "Save profile" under the birthday hint */

/* Error pages (templates/error.html) */
.error-card { text-align: center; }
.error-icon { font-size: 44px; line-height: 1; margin-bottom: 8px; }
.error-title { margin: 0 0 6px; }
.auth-card.error-card a.btn-primary { color: #fff; }
.error-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.auth-card .small { text-align: center; margin-top: 14px; }
.auth-card a { color: var(--accent); font-weight: 600; }
.auth-card .field-hint { text-align: left; margin-top: 6px; }

/* Login and sign-up: on wide screens the form sits beside a FlyCord-blue
   panel (_auth_side.html); phones get just the card. */
.auth-split { align-items: stretch; gap: 0; max-width: 920px; margin: 0 auto; padding: 32px 0 40px; }
.auth-split .auth-card { max-width: 420px; padding: 32px 30px; margin: 0; border-radius: 0 24px 24px 0; display: flex; flex-direction: column; justify-content: center; }
.auth-side {
  position: relative; overflow: hidden; flex: 1; min-width: 0; padding: 40px 36px 0; border-radius: 24px 0 0 24px; color: #fff;
  background: linear-gradient(155deg, #5b88c6 0%, #4f7cba 45%, #3f65a0 100%);
}
.auth-side-brand { display: flex; align-items: center; gap: 10px; margin: 0 0 28px; font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em; }
.auth-side-brand img { border-radius: 10px; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35); }
.auth-side-title { margin: 0 0 22px; font-size: 2rem; line-height: 1.1; letter-spacing: -0.03em; font-weight: 800; }
.auth-side-points { display: grid; gap: 12px; margin: 0 0 28px; padding: 0; list-style: none; font-size: 1.02rem; font-weight: 500; }
.auth-side-points li { display: flex; align-items: center; gap: 10px; }
.auth-side-points .ico { width: 20px; height: 20px; padding: 6px; box-sizing: content-box; border-radius: 10px; background: rgba(255, 255, 255, 0.16); }
.auth-side-phone { width: 220px; margin: 0 auto -150px; padding: 8px; border-radius: 36px; background: #111; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.45); }
.auth-side-phone img { display: block; width: 100%; height: auto; border-radius: 29px; background: #f6f6fb; }  /* light screen, not the black frame, until the picture loads */
@media (max-width: 960px) {
  .auth-side { display: none; }
  .auth-split { padding: 16px 0 24px; }
  .auth-split .auth-card { border-radius: 18px; padding: 26px 20px; }
}

/* Password fields with a Show / Hide button inside (initPasswordToggles) */
.pw-field { position: relative; }
.pw-field input { padding-right: 64px; }
.pw-toggle {
  position: absolute; top: 50%; right: 6px; translate: 0 -50%; min-width: 44px; min-height: 36px; padding: 0 10px;
  border: none; border-radius: 8px; background: none; color: var(--accent); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.pw-toggle:hover { background: var(--accent-soft); }
.pw-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- Profile ---------- */

.profile-header-card { padding: 0; overflow: hidden; }

.profile-cover {
  width: 100%;
  aspect-ratio: 4 / 1;
  max-height: 220px;
  background: linear-gradient(135deg, rgba(79, 124, 186, 0.35), rgba(79, 124, 186, 0.15));
}
.profile-cover > img, .profile-cover > video, .profile-cover > .cover-slideshow {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profile-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 18px;
}
.profile-username { margin: 0; }

.avatar-status-wrap {
  position: relative;
  flex-shrink: 0;
}
/* A friend's status next to their name on a post card (inline sibling of
   the avatar .status-bubble on profiles). */
.post-status {
  display: inline-block;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  background: var(--card-bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 999px;
}

.status-bubble {
  position: absolute;
  bottom: -8px;
  left: 50%;
  translate: -50% 0;
  max-width: 130px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  box-shadow: var(--shadow);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-bio { margin: 4px 0; }

/* ---------- Cover photo painter (Settings) ---------- */

.cover-canvas-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin: 10px 0;
}
.cover-tool {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0;
}
.cover-tool input[type="color"] {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: none;
  cursor: pointer;
}
.cover-tool input[type="range"] { cursor: pointer; }

.cover-canvas {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 4 / 1;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  cursor: crosshair;
  touch-action: none;
}

.profile-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.friend-request-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}
.friend-request-row .post-username { flex: 1; }

.cover-current-preview {
  width: 100%;
  max-width: 260px;
  height: 65px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.cover-current-row { margin-top: 12px; }

/* Settings: make one of your stories your cover. */
.cover-from-story { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.cover-story-title { margin: 0 0 4px; font-size: 15px; }
.cover-story-list { display: flex; gap: 10px; overflow-x: auto; padding: 8px 2px 4px; }
.cover-story-btn {
  position: relative; flex: 0 0 auto; display: block; width: 84px; height: 150px; padding: 0; border: 3px solid transparent;
  border-radius: 12px; overflow: hidden; background: var(--surface-2); cursor: pointer;
  box-shadow: var(--shadow); transition: scale var(--dur-fast) var(--ease-out);
}
.cover-story-btn:active { scale: 0.95; }
.cover-story-btn img, .cover-story-btn video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.cover-story-badge {
  position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 10px; color: #fff; background: rgba(0, 0, 0, 0.55);
}
/* The tick box sits on the picture; a ticked story gets a blue frame. */
.cover-story-check { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cover-story-tick {
  position: absolute; left: 6px; top: 6px; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid #fff; background: rgba(0, 0, 0, 0.35); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 700;
  transition: scale var(--dur-fast) var(--ease-spring), background var(--dur-fast);
}
.cover-story-btn:has(.cover-story-check:checked) { border-color: var(--accent); }
.cover-story-check:checked ~ .cover-story-tick { background: var(--accent); scale: 1.1; }
.cover-story-check:checked ~ .cover-story-tick:empty::after { content: "✓"; }
.cover-story-check:focus-visible ~ .cover-story-tick { outline: 2px solid var(--accent); outline-offset: 2px; }
.cover-story-submit { margin-top: 10px; }
.cover-from-device { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.cover-upload-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.cover-upload-pick { position: relative; cursor: pointer; }
/* The real file box covers the button, so it still works without JS. */
.cover-upload-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }

.cover-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

/* ---------- Settings ---------- */

.current-avatar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
}
.current-avatar-row .image-preview { margin-top: 8px; }

.remove-picture-check {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
}

/* The text takes the free space; a switch never shrinks, and a button
   that doesn't fit next to the text moves under it (phones). */
.setting-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; }
.setting-row > span:first-child { flex: 1 1 200px; min-width: 0; }
.setting-row > form, .setting-row > .btn, .setting-row > .switch { flex: 0 0 auto; }
.setting-row .btn { white-space: nowrap; }

.switch { position: relative; display: inline-block; width: 50px; height: 30px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute; cursor: pointer; inset: 0;
  background: var(--border); border-radius: 999px; transition: 0.2s;
}
.slider::before {
  content: ""; position: absolute; height: 24px; width: 24px; left: 3px; bottom: 3px;
  background: white; border-radius: 50%; transition: 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.switch input:checked + .slider { background: var(--accent); }
.switch input:checked + .slider::before { transform: translateX(20px); }

form { margin: 0; }
.card form + form { margin-top: 4px; }

/* ---------- Explore ---------- */

.explore-empty { margin: 8px 0 0; }
.explore-empty a { color: var(--accent); font-weight: 600; }
.user-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.user-tile {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--border); border-radius: 10px; padding: 10px;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.user-tile:hover {
  background: var(--accent-soft);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

/* ---------- Comments ---------- */

.comment-form { display: flex; gap: 8px; margin-bottom: 14px; }
.comment-form input { flex: 1; }

.comment-list { display: flex; flex-direction: column; gap: 12px; }
.comment { display: flex; gap: 10px; }
.comment-meta { display: flex; gap: 8px; align-items: baseline; margin-bottom: 2px; }
.comment-text { font-size: 14px; }

.back-link { display: inline-block; margin-bottom: 12px; color: var(--accent); font-weight: 600; font-size: 14px; }

/* ---------- Flash messages ---------- */

.flash-wrap { max-width: 620px; margin: 0 auto 16px; }
.flash {
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 14px;
  margin-bottom: 8px;
}
.flash-error { background: #fee2e2; color: #b91c1c; }
.flash-success { background: #dcfce7; color: #15803d; }
html.dark .flash-error { background: #3a1616; color: #f87171; }
html.dark .flash-success { background: #14311f; color: #4ade80; }

/* ---------- Search bar ---------- */

.search-form {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 14px;
  flex: 0 1 260px;
  color: var(--text-muted);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.search-form:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search-form .ico { width: 17px; height: 17px; }
.search-form input {
  border: none;
  background: none;
  padding: 0;
  font-size: 14px;
  font-family: inherit;
  width: 100%;
  color: var(--text);
}
.search-form input::placeholder { color: var(--text-muted); }
.search-form input:focus { outline: none; }

/* The Search page's own box (on phones the navbar search is hidden and the
   tab bar's Search opens this page). */
.page-search-form { display: flex; gap: 8px; margin-bottom: 12px; }
.page-search-form input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 15px;
  font-family: inherit;
}
.page-search-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search-results-title { margin: 4px 0 0; }

/* ---------- Games (block editor, ▶ Play in posts) ---------- */

.post-game { margin-bottom: 12px; }
.game-play {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  aspect-ratio: 16 / 7;
  padding: 0 22px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #4f7cba, #2f5d9a);
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.game-play:hover { filter: brightness(1.06); }
.game-play-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: #4f7cba;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  padding-left: 4px;
}
.game-play-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.game-play-text strong { font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-play-text span { font-size: 13px; opacity: 0.85; }
.game-play-badge {
  position: absolute;
  top: 10px;
  right: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  font-size: 12px;
  font-weight: 700;
}
.game-frame {
  display: block;
  width: 100%;
  aspect-ratio: 480 / 400;  /* 4:3 stage + the player's 40px bar */
  border: none;
  border-radius: 14px;
  background: #0e1016;
}

/* ---------- Clips (TikTok-style, /clips) ---------- */

.page:has(.clips) { max-width: none; padding: 0; }
.navbar-right .nav-search-btn { display: none; }
.clips {
  height: calc(100vh - 59px);  /* main.js sets the exact height */
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  overscroll-behavior: contain;
  scrollbar-width: none;
  outline: none;
}
.clips::-webkit-scrollbar { display: none; }
.clip {
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 14px;
  padding: 16px 0;
}
.clip-stage {
  position: relative;
  height: 100%;
  aspect-ratio: 9 / 16;
  max-width: calc(100vw - 110px);
  background: #000;
  border-radius: 18px;
  overflow: hidden;
  color: #fff;
}
.clip-media {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.clip-video, .clip-photo { width: 100%; height: 100%; object-fit: contain; display: block; }
.clip-media.is-paused::after {
  content: "▶";
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -36px 0 0 -36px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 6px;
  pointer-events: none;
}
.clip-media .game-frame { border-radius: 0; }
.clip-sound {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  font-size: 18px;
  cursor: pointer;
}
.clip-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 70px 16px 16px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.clip-info a { pointer-events: auto; }
.clip-byline { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.clip-user { font-weight: 800; font-size: 15px; color: #fff; }
.clip-time { font-size: 13px; opacity: 0.8; }
.clip-caption {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.4;
  max-height: 5.6em;
  overflow: hidden;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.clip-caption .tag-link { color: #fff; font-weight: 800; }
.clip-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-bottom: 8px;
}
.clip-avatar .avatar-md { width: 48px; height: 48px; font-size: 19px; border: 2px solid #fff; }
.clip-like, .clip-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}
.clip-like .like-btn, .clip-action-icon, .clip-actions .post-menu-btn {
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  background: var(--card-bg);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
button.clip-action { border: none; background: none; padding: 0; font-family: inherit; cursor: pointer; }
.clip-actions .share-btn { margin-left: 0; }
.clip-actions .post-menu { position: relative; top: auto; right: auto; }
.clip-actions .dropdown-panel { top: auto; bottom: calc(100% + 6px); right: 0; color: var(--text); text-shadow: none; }
/* A game: its starting picture + ▶ Play; Play swaps in the sandboxed frame. */
.clip-game {
  position: absolute;
  inset: 0;
  border: none;
  padding: 0 0 40px;
  background: #0e1016;
  color: #fff;
  font: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.clip-game .game-preview { border-radius: 0; border: none; }
.clip-game-title { font-weight: 800; font-size: 18px; }
.clip-game-play { padding: 12px 26px; border-radius: 999px; background: var(--brand-grad); font-weight: 800; font-size: 16px; }
.clips-empty { max-width: 360px; margin: 18vh auto 0; padding: 0 20px; text-align: center; color: var(--text-muted); }
.clips-empty[hidden] { display: none; }
.clips-empty-icon { font-size: 52px; }

/* Explore arcade: a sideways-scrolling row of game cards. */
.arcade { padding-bottom: 12px; }
.arcade-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.arcade-make { color: var(--accent); font-size: 13px; font-weight: 600; }
.arcade-second { margin-top: 14px; }
.arcade-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
  margin: 0 -4px;
  padding-left: 4px;
  scrollbar-width: thin;
}
.arcade-card {
  flex: 0 0 200px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0;
  border: none;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.arcade-title { font-weight: 700; font-size: 14px; margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arcade-meta { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A game's starting picture (game_preview in app.py): sprites are placed
   in % of the 4:3 stage and sized in cqw so they scale with the card. */
.game-preview {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  border: 1px solid var(--border);
  overflow: hidden;
  container-type: inline-size;
}
.game-preview-sprite {
  position: absolute;
  translate: -50% -50%;   /* not transform: phones clear transforms on tap (see the mobile block) */
  line-height: 1;
  pointer-events: none;
}
.arcade-play {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(17, 20, 31, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 3px;
  font-size: 18px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.arcade-card:hover .arcade-play, .arcade-card:focus-visible .arcade-play { opacity: 1; }
@media (hover: none) { .arcade-play { opacity: 1; } }

/* The arcade's game, on top of the page. */
.game-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(8, 10, 16, 0.9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
/* As wide as fits: the frame is 480:400, plus the title row above it. */
.game-overlay-box { width: min(760px, 100%, calc((100vh - 110px) * 1.2)); }
.game-overlay-head { display: flex; align-items: center; justify-content: space-between; color: #fff; margin-bottom: 8px; font-size: 16px; }
.game-overlay-close {
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}
.game-overlay-close:hover { background: rgba(255, 255, 255, 0.28); }
body.overlay-open { overflow: hidden; }

/* Double-tap a photo to ❤️ it (main.js, initDoubleTapLike). */
.post-image { position: relative; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.heart-burst {
  position: absolute;
  font-size: 84px;
  line-height: 1;
  pointer-events: none;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.3));
}

/* "↑ 3 new posts" (main.js, initFeedLivePoll). */
.new-posts-pill {
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  width: max-content;
  margin: 0 auto;  /* centred without transform: phones reset transforms on tap */
  z-index: 22;
  padding: 9px 18px;
  border: none;
  border-radius: 999px;
  background: var(--brand-grad);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(17, 20, 45, 0.25);
  cursor: pointer;
}
.new-posts-pill[hidden] { display: none; }

/* ---------- Multiplayer ---------- */
.game-together {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 14px;
  font-weight: 700;
}
.game-together:hover { filter: brightness(0.97); }
.game-overlay-head { gap: 12px; }
.game-overlay-head strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-overlay-together { padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; }
.game-overlay-together:hover { background: rgba(255, 255, 255, 0.28); }
.ge-p2 { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; font-weight: 600; color: var(--text-muted); white-space: nowrap; cursor: pointer; }
.ge-stage-controls { flex-wrap: wrap; }
/* Lobby (game_together.html) */
.together-card { display: flex; align-items: center; gap: 18px; }
.together-preview { width: 200px; flex-shrink: 0; }
.together-info { min-width: 0; }
.together-kicker { margin: 0 0 4px; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); }
.together-title { margin: 0 0 6px; font-size: 22px; letter-spacing: -0.02em; }
.together-friend { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.together-friend:first-of-type { border-top: none; }
.together-friend-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.together-friend form { margin: 0; }
/* Match (match.html) */
.page:has(.match) { max-width: 860px; }
.match-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; }
.match-player { display: flex; align-items: center; gap: 10px; min-width: 0; }
.match-player div { display: flex; flex-direction: column; min-width: 0; }
.match-player-2 { justify-content: flex-end; text-align: right; }
.match-role { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.match-vs { flex: 1; text-align: center; min-width: 0; }
.match-title { font-weight: 800; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-status { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.match-stage { margin-bottom: 12px; }
.match-frame { width: 100%; }
.match-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.match-foot form { margin: 0; }
@media (max-width: 600px) {
  .together-card { flex-direction: column; align-items: stretch; }
  .together-preview { width: 100%; }
  .match-head { padding: 12px; }
  .match-head .avatar-md { width: 32px; height: 32px; font-size: 14px; }
}

.games-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.games-head .card-title { margin-bottom: 4px; }
.games-head p { margin: 0; }
.game-row { display: flex; align-items: center; gap: 12px; padding: 14px 18px; }
.game-row-icon { font-size: 26px; }
.game-row-info { flex: 1; min-width: 0; }
.game-row .inline-form { margin: 0; }
.game-delete:hover { color: var(--danger); }
.games-empty-btn { margin-top: 12px; display: inline-flex; }

/* Editor */
.page:has(.game-editor) { max-width: 1400px; }
.ge-topbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.ge-back { font-size: 20px; color: var(--text-muted); padding: 4px 8px; border-radius: 8px; }
.ge-back:hover { background: var(--accent-soft); }
.ge-title {
  flex: 1;
  min-width: 0;
  max-width: 320px;
  border: 1px solid transparent;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 10px;
}
.ge-title:hover, .ge-title:focus { border-color: var(--border); background: var(--bg); outline: none; }
.ge-status { white-space: nowrap; }
.ge-actions { display: flex; gap: 8px; margin-left: auto; }
.ge-main { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; align-items: start; }
.ge-blocks { padding: 0; overflow: hidden; height: calc(100vh - 190px); min-height: 480px; }
.ge-blockly { width: 100%; height: 100%; }
/* Blockly puts its category list at z-index 70 and the block flyout at 20,
   which would draw over the navbar (20) and the phone tab bar (25) when the
   page scrolls. Its pop-ups (dropdowns, right-click menu) stay on top. */
.ge-blockly .blocklyToolboxDiv, .ge-blockly .blocklyFlyout { z-index: 10 !important; }
.ge-side { display: flex; flex-direction: column; gap: 0; }
.ge-stage-card { padding: 12px; }
.ge-stage-controls { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ge-go, .ge-stop {
  border: none;
  border-radius: 999px;
  padding: 7px 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  color: #fff;
}
.ge-go { background: #22c55e; }
.ge-stop { background: #ef4444; }
.ge-hint { margin-left: auto; }
.game-editor.is-running .ge-hint { visibility: hidden; }
.game-canvas {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  border: 1px solid var(--border);
  touch-action: none;
  outline: none;
}
.game-pad { display: none; gap: 6px; margin-top: 10px; justify-content: center; }
.game-pad button {
  min-width: 48px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.game-pad .game-pad-space { padding: 0 16px; font: inherit; font-weight: 600; }
@media (pointer: coarse) { .game-pad { display: flex; } }

.ge-sprite-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ge-sprite {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 72px;
  padding: 8px 4px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.ge-sprite.active { border-color: var(--accent); background: var(--accent-soft); }
.ge-sprite-emoji { font-size: 26px; line-height: 1.1; }
.ge-sprite-name { font-size: 11px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ge-sprite-add { justify-content: center; font-size: 13px; font-weight: 700; color: var(--accent-dark); border-style: dashed; }
.ge-sprite-add:disabled { opacity: 0.5; cursor: default; }
.ge-sprite-edit label { margin-top: 10px; }
.ge-emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 4px; max-height: 128px; overflow-y: auto; }
.ge-emoji-grid button {
  height: 36px;
  border: 2px solid transparent;
  border-radius: 8px;
  background: var(--bg);
  font-size: 20px;
  cursor: pointer;
}
.ge-emoji-grid button.active { border-color: var(--accent); }
.ge-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.ge-row .ge-inline-label { margin: 0; }
.ge-row input[type=color] { width: 42px; height: 32px; padding: 2px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
.ge-delete { margin-left: auto; }
.ge-delete:hover:not(:disabled) { color: var(--danger); }
.ge-delete:disabled { opacity: 0.5; }
.ge-dialog {
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px;
  width: min(440px, calc(100vw - 32px));
  background: var(--card-bg);
  color: var(--text);
  box-shadow: 0 20px 50px rgba(17, 20, 45, 0.25);
}
.ge-dialog::backdrop { background: rgba(10, 12, 20, 0.45); }
.ge-dialog textarea { width: 100%; }
.ge-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

/* Build together: the session pill, the friend's pointer and selection. */
.ge-build-list { max-height: 50vh; overflow-y: auto; margin-top: 8px; }
.ge-collab {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 4px 4px 4px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  font-size: 13px;
  font-weight: 600;
}
.ge-collab #ge-collab-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ge-collab-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #f59e0b; }
.ge-collab[data-state=live] .ge-collab-dot { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25); }
.ge-collab[data-state=gone] .ge-collab-dot,
.ge-collab[data-state=ended] .ge-collab-dot { background: var(--text-muted); }
.ge-collab .btn { border-radius: 999px; }
.ge-blockly { position: relative; }
.ge-peer-cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: flex-start;
  pointer-events: none;
  color: #ff3d7f;
  transition: transform 90ms linear;
}
.ge-peer-cursor[hidden] { display: none; }
.ge-peer-cursor svg { margin: -2px 0 0 -2px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); }
.ge-peer-cursor path { fill: currentColor; stroke: #fff; stroke-width: 1.2; stroke-linejoin: round; }
.ge-peer-cursor span {
  margin: 14px 0 0 -3px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #ff3d7f;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.ge-peer-sel > .blocklyPath { stroke: #ff3d7f !important; stroke-width: 3px !important; }
.ge-sprite { position: relative; }
.ge-peer-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid var(--card-bg);
  border-radius: 50%;
  background: #ff3d7f;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}
.ge-main { position: relative; }
.ge-sync-cover { display: none; }
.game-editor.is-syncing .ge-sync-cover {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(3px);
}
.ge-sync-box {
  max-width: 340px;
  margin: 16px;
  padding: 22px 26px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--card-bg);
  text-align: center;
  box-shadow: 0 20px 50px rgba(17, 20, 45, 0.18);
}
.ge-sync-icon { font-size: 34px; }
.ge-sync-box p { margin: 8px 0 12px; font-weight: 600; }

@media (max-width: 960px) {
  .ge-main { grid-template-columns: 1fr; }
  .ge-side { order: -1; }
  .ge-blocks { height: 70vh; min-height: 380px; }
  .ge-status { display: none; }
  .ge-topbar { flex-wrap: wrap; }
  .ge-title { flex: 1 1 calc(100% - 60px); max-width: none; }
  .ge-actions { width: 100%; margin-left: 0; }
  .ge-actions .btn { flex: 1; }
  .ge-collab { width: 100%; }
  .ge-collab #ge-collab-text { flex: 1; }
}

/* ---------- "My account" card (feed's right column) ---------- */

.me-card { padding: 0; overflow: hidden; text-align: center; }
/* Same 4:1 shape covers are painted in (Settings canvas is 800x200), so the
   card shows the whole cover instead of cropping its top and bottom. */
.me-cover { aspect-ratio: 4 / 1; background: linear-gradient(135deg, rgba(79, 124, 186, 0.35), rgba(79, 124, 186, 0.15)); }
.me-cover > img, .me-cover > video, .me-cover > .cover-slideshow { width: 100%; height: 100%; object-fit: cover; display: block; }
/* An almost blank white cover (cover_is_blank): white shows the blue under it. */
.cover-blank { mix-blend-mode: multiply; }
.me-body { padding: 0 18px 18px; }
.me-card .avatar-status-wrap { display: inline-block; margin-top: -40px; }
.me-card .avatar-lg {
  width: 80px;
  height: 80px;
  font-size: 40px;
  box-shadow: 0 0 0 4px var(--card-bg);
}
.me-name { font-weight: 700; font-size: 16px; margin-top: 14px; }
.me-bio { font-size: 14px; margin: 6px 0 0; overflow-wrap: anywhere; }
.me-hint { margin: 6px 0 0; }
.me-birthday { margin: 6px 0 0; }
.me-birthday-today { font-weight: 700; color: var(--accent); }
.birthday-explain { margin: 0 0 14px; }
.auth-card .btn-full + .btn-full { margin-top: 8px; }
.me-hint a { color: var(--accent); font-weight: 600; }
.me-actions { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }

/* One-column layout on phones/tablets: move the card above the
   feed (it would otherwise land below every post) and make it compact —
   a cover strip on top, then the photo with its top level with the name
   beside it (not pulled up into the cover as on desktop). */
@media (max-width: 960px) {
  .col-right { order: -1; }
  .me-card { text-align: left; }
  .me-body { display: flex; align-items: flex-start; gap: 14px; padding: 16px 16px 18px; }
  .me-card .avatar-status-wrap { margin-top: 0; }
  .me-card .avatar-lg { width: 68px; height: 68px; font-size: 34px; box-shadow: none; }
  .me-info { flex: 1; min-width: 0; }
  .me-name { margin-top: 0; }
  .me-actions { justify-content: flex-start; margin-top: 10px; }
}

/* ---------- Stories (row above the feed + full-screen viewer) ---------- */

.story-tray { padding: 14px 16px 10px; }
.story-row {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 4px;
}
.story-item {
  position: relative;
  flex: 0 0 auto;
  width: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.story-circle {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
}
.story-circle:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* The ring: brand gradient = new stories, grey = all seen, accent = your own. */
.story-ring {
  display: inline-flex;
  padding: 3px;
  border-radius: 50%;
  background: var(--brand-grad);
}
.story-ring-seen { background: var(--border); }
.story-ring-mine { background: var(--accent); }
.story-ring-empty { background: transparent; }
.avatar-story {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 3px solid var(--card-bg);
}
.story-add-badge {
  position: absolute;
  top: 48px;
  left: 48px;
  width: 22px;
  height: 22px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--card-bg);
  background: var(--brand-grad);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.story-name {
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--text);
}

.story-upload-form { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.story-upload-body { display: flex; gap: 14px; align-items: flex-start; }
.story-upload-preview {
  width: 84px;
  height: 150px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 10px;
  background: var(--bg);
}
.story-upload-fields { flex: 1; min-width: 0; }
.story-upload-fields p { margin: 6px 0 10px; }
.story-upload-actions { display: flex; gap: 8px; }

/* One copy of the row for phones (above everything), one for desktop. */
.story-tray-mobile { display: none; }
@media (max-width: 960px) {
  .story-tray-mobile { display: block; order: -2; }
  .story-tray-desktop { display: none; }
}

html.sv-open { overflow: hidden; }
.story-viewer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.92);
}
.story-viewer[hidden] { display: none; }
.sv-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100vw, 460px);
  height: min(100vh, 820px);
  height: min(100dvh, 820px);
  overflow: hidden;
  border-radius: 14px;
  background: #000;
  color: #fff;
}
@media (max-width: 600px) {
  .sv-frame { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; }
}
.sv-progress {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  z-index: 3;
  display: flex;
  gap: 4px;
}
.sv-bar { flex: 1; height: 3px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, 0.35); }
.sv-bar i { display: block; width: 0; height: 100%; background: #fff; }
.sv-header {
  position: absolute;
  top: 20px;
  left: 10px;
  right: 6px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.sv-user { display: flex; align-items: center; gap: 8px; min-width: 0; color: #fff; text-decoration: none; }
.sv-name { font-size: 14px; }
.sv-time { font-size: 12px; opacity: 0.8; }
.sv-spacer { flex: 1; }
.sv-btn {
  border: none;
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}
.sv-btn:focus-visible { outline: 2px solid #fff; }
.sv-stage {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  cursor: pointer;
  touch-action: none;  /* taps, holds and swipes are handled in main.js */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.sv-image, .sv-video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
}
.sv-image[hidden], .sv-video[hidden], .story-upload-preview[hidden] { display: none; }
.sv-sound { font-size: 18px; }
.sv-missing { padding: 24px; color: rgba(255, 255, 255, 0.8); text-align: center; }
.sv-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 40px 16px 24px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  font-size: 15px;
  text-align: center;
  overflow-wrap: anywhere;
  pointer-events: none;
}
.sv-paused-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.45);
  font-size: 18px;
  opacity: 0;
  pointer-events: none;
}
.sv-paused .sv-paused-badge { opacity: 0.8; }
.sv-viewers {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 4;
  max-height: 45%;
  overflow: auto;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(20, 22, 28, 0.95);
  font-size: 14px;
}
.sv-viewers ul { margin: 6px 0 0; padding-left: 18px; }

/* ---------- Online status (green dot) + "Seen" in DMs ---------- */

.avatar-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.story-circle { position: relative; }
.presence-dot {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #22c55e;
  border: 2.5px solid var(--card-bg);
}
.story-circle .presence-dot { right: 4px; bottom: 4px; width: 16px; height: 16px; border-width: 3px; }
.presence-dot[hidden] { display: none; }
.presence-label { margin: 2px 0 0; font-size: 12px; color: var(--text-muted); }
.presence-label.online { color: #16a34a; font-weight: 600; }
html.dark .presence-label.online { color: #4ade80; }
.presence-label[hidden] { display: none; }
.chat-header-info { display: flex; flex-direction: column; min-width: 0; }
.seen-status { align-self: flex-end; margin: 2px 16px 6px; font-size: 12px; color: var(--text-muted); }
.seen-status[hidden] { display: none; }

/* ---------- Toasts (new message / request / invite pop-ups) ---------- */

.toast-stack {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(360px, calc(100vw - 24px));
  pointer-events: none;  /* only the toasts themselves take clicks */
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  padding: 10px 8px 10px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card-bg);
  color: var(--text);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.2);
  pointer-events: auto;
}
.toast-body { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.toast-text { font-size: 14px; overflow-wrap: anywhere; }
.toast-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent-soft);
  font-size: 16px;
}
.toast-close {
  flex-shrink: 0;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 13px;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
}
.toast-close:hover { background: var(--accent-soft); }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 600px) {
  .toast-stack { left: 12px; right: 12px; bottom: 12px; width: auto; }
}

/* ---------- Notifications (🔔 in the navbar) ---------- */

.notif-wrap { position: relative; }
#notif-btn { position: relative; }
.notif-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 2px var(--card-bg);
}
.notif-dot[hidden] { display: none; }

.notif-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 340px;
  max-height: 70vh;
  overflow-y: auto;
  z-index: 30;
  color: var(--text);
  text-align: left;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
}
.notif-panel[hidden] { display: none; }
.notif-list { display: flex; flex-direction: column; gap: 12px; }
.notif-empty { margin: 4px 0; }
.notif-item { display: flex; gap: 10px; align-items: flex-start; }
.notif-body { flex: 1; min-width: 0; }
.notif-text { font-size: 14px; }
.notif-text a { color: inherit; }
.notif-preview { color: var(--text-muted); font-style: italic; overflow-wrap: anywhere; }
.notif-actions { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
/* Side-by-side buttons: cancel the stacked-forms spacing (.card form + form). */
.notif-actions form, .notif-actions form + form { margin: 0; }

/* Phones: full-width panel under the navbar instead of a small dropdown. */
@media (max-width: 600px) {
  .notif-panel {
    position: fixed;
    top: 60px;
    left: 8px;
    right: 8px;
    width: auto;
  }
}

/* ---------- "bob is typing…" (direct messages) ---------- */

/* Looks like one of the other person's chat bubbles: compact, on the left. */
.typing-indicator {
  display: inline-flex;
  align-self: flex-start;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin: 4px 16px 10px;
  padding: 8px 12px;
  border-radius: 16px;
  background: var(--accent-soft);
  color: var(--text-muted);
  font-size: 13px;
}
.typing-indicator[hidden] { display: none; }
.typing-dots { display: inline-flex; gap: 3px; }
.typing-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}
/* The bouncing dots are the point of this, so they keep moving even on
   phones (where other animations are switched off) — unless the person
   asked their device for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .typing-indicator .typing-dots i { animation: typing-bounce 1.2s ease-in-out infinite !important; }
  .typing-indicator .typing-dots i:nth-child(2) { animation-delay: 0.15s !important; }
  .typing-indicator .typing-dots i:nth-child(3) { animation-delay: 0.3s !important; }
}
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ---------- Unread badge ---------- */

.unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.nav-link .unread-badge { margin-left: 2px; }
/* display:inline-flex above would otherwise override the hidden attribute
   (the mobile menu's Messages badge showed a red "0"). */
.unread-badge[hidden] { display: none; }

/* ---------- Live-update flash ---------- */

@keyframes new-post-flash {
  from { background: var(--accent-soft); }
  to { background: var(--card-bg); }
}
.new-post-flash { animation: new-post-flash 1.6s ease-out; }

/* Placed after the rule above on purpose — see the cascade-order note by
   the mobile-only overrides at the end of this file. A media-query rule
   earlier in the file can get silently beaten by a later unconditional
   rule targeting the same selector/property; this one has to come after
   the plain .new-post-flash rule to actually win for non-reduced-motion
   users. */
@media (prefers-reduced-motion: no-preference) {
  .new-post-flash { animation: fade-slide-up 0.35s ease-out, new-post-flash 1.6s ease-out; }
}

/* ---------- Conversations (inbox) ---------- */

.conversation-list { display: flex; flex-direction: column; }
.conversation-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s ease;
}
.conversation-item:last-child { border-bottom: none; }
.conversation-item:hover { background: var(--accent-soft); border-radius: 10px; }
.conversation-info { flex: 1; min-width: 0; }
.conversation-top { display: flex; justify-content: space-between; align-items: baseline; }
.conversation-preview {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Chat thread ---------- */

.chat-card { display: flex; flex-direction: column; height: 70vh; padding: 0; overflow: hidden; }
.chat-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.group-leave-form { margin-left: auto; }

.group-invite-actions { display: flex; gap: 10px; margin-top: 12px; }

.group-header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.group-invite-toggle { position: relative; }
.group-invite-toggle .report-summary:hover { color: var(--accent-dark); }
.group-members-toggle { position: relative; }
.group-members-toggle .report-summary:hover { color: var(--accent-dark); }
.group-manage-toggle { position: relative; }
.group-manage-toggle .report-summary {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  padding: 0 4px;
}
.group-manage-toggle .report-summary:hover { color: var(--accent-dark); }
.group-manage-divider { border-top: 1px solid var(--border); margin: 10px 0; }
.group-invite-row .group-remove-btn,
.group-member-row .group-remove-btn { margin-left: auto; color: var(--danger); }
.group-invite-panel {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 8px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  box-shadow: var(--shadow);
  z-index: 5;
  width: 260px;
}
.group-invite-panel input[type="text"] { width: 100%; margin-bottom: 8px; }
.group-invite-results { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.group-invite-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
}
.group-invite-row .post-username { flex: 1; }

.group-members-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.group-member-row { display: flex; align-items: center; gap: 8px; }

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-bubble {
  max-width: 70%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
}
.chat-bubble.theirs {
  align-self: flex-start;
  background: var(--bg);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.chat-bubble.mine {
  align-self: flex-end;
  background: var(--brand-grad);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-bubble.mine .bubble-time { color: rgba(255,255,255,0.75); }
.bubble-sender { font-size: 12px; font-weight: 700; color: var(--accent); margin-bottom: 2px; }
.bubble-text { white-space: pre-wrap; word-break: break-word; }
.bubble-footer { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.bubble-time { font-size: 11px; color: var(--text-muted); }
.bubble-delete-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 11px;
  cursor: pointer;
  opacity: 0.6;
  color: inherit;
}
.bubble-delete-btn:hover { opacity: 1; }

.bubble-media { margin: -2px -6px 6px; }
.bubble-media img, .bubble-media video {
  display: block;
  width: 100%;
  max-width: 240px;
  max-height: 320px;
  border-radius: 12px;
  background: #000;
  object-fit: contain;  /* keep the photo's shape (it was squashed when the height cap applied) */
}

.chat-form {
  border-top: 1px solid var(--border);
  padding: 12px 16px;
}
.chat-input-row { display: flex; align-items: center; gap: 8px; }
.chat-input-row input[type=text] { flex: 1; }

/* ---------- Profile header layout tweak for message button ---------- */

.profile-header-info { flex: 1; }

/* ---------- Admin ban panel ---------- */

.admin-panel { border: 1px solid var(--accent-soft); }
.admin-panel p { margin: 0 0 12px; font-size: 14px; }

.admin-panel-divider {
  height: 1px;
  background: var(--border);
  margin: 16px 0;
}

.ban-form { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.ban-action-row { display: flex; gap: 10px; align-items: center; }
.ban-duration-row { display: flex; align-items: center; gap: 8px; }
.ban-amount { width: 70px; }
.ban-unit { padding: 10px 12px; }

/* ---------- Mobile-only overrides ----------
   Kept at the very end of the file on purpose: with equal CSS specificity,
   later rules win regardless of whether an earlier rule was inside a
   @media block, so a mobile override placed earlier in the file can get
   silently beaten by a later unconditional rule (e.g. .search-form's base
   `display: flex` used to load after this and win on real phones). Adding
   new mobile-only rules? Put them here, not further up. */
@media (max-width: 960px) {
  .search-form { display: none; }
  .chars-left { display: none; }
  /* App-style bottom tab bar (base.html). The page gets room at the bottom
     so the last post isn't hidden behind it. */
  .tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 25;
    display: flex;
    justify-content: space-around;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    background: var(--navbar-bg);
    border-top: 1px solid var(--border);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
  }
  .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 4px 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
  }
  .tab-item .ico { width: 24px; height: 24px; }
  .tab-item.active { color: var(--accent-dark); }
  .tab-icon { position: relative; display: block; }
  .tab-icon .unread-badge {
    position: absolute;
    top: -5px;
    left: 15px;
    min-width: 18px;
    padding: 1px 5px;
    font-size: 10px;
    border: 2px solid var(--card-bg);
  }
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .toast-stack { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .navbar-inner { padding: 8px 14px; gap: 8px; }
  .user-chip { padding: 2px; }
  .user-chip .username { display: none; }
  /* Phone feed: posts start right after stories. Your profile card is
     desktop-only here (the Profile tab has it). */
  .feed-side { display: none; }
  .post-card .post-image, .post-card .post-video, .post-card .post-game { margin-left: -18px; margin-right: -18px; }
  .profile-hero-body { padding: 0 16px 16px; }
  .profile-hero-top { margin-top: -46px; gap: 10px; }
  .profile-hero-actions { gap: 6px; flex-wrap: nowrap; }
  .profile-hero-actions .btn { padding: 8px 13px; font-size: 13px; white-space: nowrap; }
  .profile-more .post-menu-btn { width: 34px; height: 34px; }
  .avatar-xl { width: 92px; height: 92px; font-size: 36px; }
  .profile-name { font-size: 22px; }
  .profile-tab .ico { display: none; }
  .profile-tab { font-size: 13px; }
  .media-grid { gap: 2px; border-radius: 12px; }
  .media-thumb-likes { opacity: 1; }
  /* Search lives in the navbar on phones (Clips is in the tab bar). */
  .navbar-right .nav-search-btn { display: inline-flex; }
  /* Clips on phones: full screen, no top bar, dark tab bar; the buttons sit
     on the video like TikTok. */
  body.clips-page { padding-bottom: 0; background: #000; }
  body.clips-page .navbar { display: none; }
  body.clips-page .tabbar { background: #000; border-top-color: #1f1f1f; }
  body.clips-page .tab-item { color: #9a9a9a; }
  body.clips-page .tab-item.active { color: #fff; }
  .clip { padding: 0; gap: 0; position: relative; }
  .clip-stage { width: 100%; max-width: none; aspect-ratio: auto; border-radius: 0; }
  .clip-actions { position: absolute; right: 8px; bottom: 90px; z-index: 3; }
  .clip-media.fill .clip-video, .clip-media.fill .clip-photo { object-fit: cover; }
  .clip-info { padding-right: 76px; }
  .clip-like, .clip-action { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
  .clip-like .like-btn, .clip-action-icon, .clip-actions .post-menu-btn {
    background: rgba(0, 0, 0, 0.35);
    border-color: transparent;
    color: #fff;
  }
  /* Narrower page margins on phones: more room for posts (and the post
     box's Photo / Video / Game / Post row fits on one line). */
  .page { padding: 16px 12px; }
  /* Chats fill the screen down to the tab bar (70vh left an empty strip
     under the message box). 177px = navbar 55 + page padding 16 + the
     "Back to messages" link 32 + tab bar 62 + a 12px gap. */
  .page:has(.chat-card) { padding-bottom: 0; }
  .chat-card { height: calc(100dvh - 177px - env(safe-area-inset-bottom)); min-height: 320px; margin-bottom: 0; }
  .composer .btn-small { padding: 8px 12px; }
  .only-mobile { display: flex; }

  /* Dark mode works on phones too (🌙 in the navbar, or Settings >
     Appearance). The theme is rendered server-side from the flycord_theme
     cookie, so there's no flash of the wrong theme on load. The navbar is
     tight on narrow phones, so the icons get a little less padding. */
  .navbar-right { gap: 2px; }

  /* Phones get the same motion as computers since the rebuild (ux-11): the
     old "every animation and transition off" rule is gone. What stays is
     this: iPhones keep :hover on whatever was tapped last, so a hover lift
     or press scale done with `transform` stuck. It only clears
     `transform`, so anything placed or animated by CSS uses the translate /
     rotate / scale properties instead (welcome phones, the status bubble,
     press feedback, entrances...), or a tap moves it. */
  *:hover, *:active {
    transform: none !important;
  }

  /* Group chat header: Invite people / Members sit side-by-side on
     desktop, but stack vertically on mobile — same reasoning as the
     cover-photo buttons: not enough width to keep them in a row next to
     the group name without overflowing. */
  .group-header-actions { flex-direction: column; align-items: flex-end; gap: 4px; }
}

/* ======================================================================
   Activity, @mentions, replies, save / repost / pin / edit
   ====================================================================== */
.page-title { font-size: 1.5rem; margin: 4px 0 2px; }
.avatar-xs { width: 22px; height: 22px; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.avatar-xs.avatar-initial { font-size: 11px; }

/* Post header extras */
.pinned-label { font-size: 12px; font-weight: 700; color: var(--text-muted); margin: -4px 0 8px; }
.repost-label { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-muted); }
.repost-label .ico { width: 14px; height: 14px; }
.post-edited { color: var(--text-muted); font-size: 13px; }
.mention-link { color: var(--accent); font-weight: 600; }
.mention-link:hover { text-decoration: underline; }

/* A repost: the original inside a frame */
.post-quote { border: 1px solid var(--border); border-radius: 14px; padding: 10px 12px; margin: 4px 0 12px; overflow: hidden; }
.post-quote-header { display: flex; align-items: center; gap: 6px; color: var(--text); margin-bottom: 4px; }
.post-quote-header .post-username { font-weight: 700; font-size: 14px; }
.post-quote-text { font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.post-quote-media { display: block; margin: 8px -12px -10px; }
.post-quote-media img, .post-quote-media video { display: block; width: 100%; max-height: 420px; object-fit: cover; background: #000; }
.game-play.game-play-small { aspect-ratio: auto; padding: 12px 14px; margin-top: 8px; }
.game-play-small .game-play-icon { width: 40px; height: 40px; }

/* Footer: like · comment · repost …… share · save */
.repost-btn.reposted { color: #16a34a; }
.repost-count:empty { display: none; }
.save-form { display: inline-flex; margin: 0; }
.save-btn.saved { color: var(--accent); }
.save-btn.saved .ico path { fill: currentColor; }

/* Repost dialog + inline edit */
.repost-dialog { border: none; padding: 18px; width: min(440px, calc(100vw - 32px)); color: var(--text); }
.repost-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
.repost-dialog .card-title { display: flex; align-items: center; gap: 8px; }
.repost-preview { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; font-size: 14px; margin-bottom: 10px; }
.repost-preview span { color: var(--text-muted); overflow-wrap: anywhere; }
.repost-dialog textarea, .post-edit-form textarea { width: 100%; box-sizing: border-box; resize: vertical; }
.repost-error { color: var(--danger); font-size: 14px; margin: 6px 0 0; }
.repost-actions, .post-edit-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.post-edit-form { margin-bottom: 12px; }

/* @mention suggestions */
.mention-popup { position: fixed; z-index: 500; width: 260px; padding: 4px; display: flex; flex-direction: column; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18); }
.mention-popup[hidden] { display: none; }
.mention-item { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--text); }
.mention-item[aria-selected="true"], .mention-item:hover { background: var(--accent-soft); }
.mention-item span:first-of-type { flex: 1; font-weight: 600; }
.mention-friend { font-size: 11px; color: var(--accent); font-weight: 700; }

/* Comments: threads and replies */
.comment-thread { display: flex; flex-direction: column; gap: 10px; }
.comment-replies { display: flex; flex-direction: column; gap: 10px; margin-left: 40px; }
.comment-replies:empty { display: none; }
.comment-replies .comment .avatar-sm { width: 24px; height: 24px; font-size: 11px; }
.comment-meta a { color: inherit; }
.comment-reply-btn { all: unset; cursor: pointer; font-size: 12px; font-weight: 700; color: var(--text-muted); margin-top: 3px; }
.comment-reply-btn:hover { color: var(--accent); }
.comment:target, .comment.is-target { background: var(--accent-soft); border-radius: 10px; box-shadow: 0 0 0 6px var(--accent-soft); }
.comment-form { flex-wrap: wrap; }
.replying-to { flex-basis: 100%; font-size: 13px; color: var(--text-muted); }
.replying-to[hidden] { display: none; }

/* 🔔 Activity */
.notif-section { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-top: 4px; }
.notif-activity { color: var(--text); text-decoration: none; border-radius: 10px; padding: 6px; margin: 0 -2px; }
.notif-activity:hover { background: var(--accent-soft); }
.notif-activity.is-unread { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.notif-activity.is-unread .notif-text::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 6px; vertical-align: 2px; }
.notif-thumb { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.notif-list { max-height: min(70vh, 560px); overflow-y: auto; overflow-x: hidden; padding: 0 2px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.notif-list::-webkit-scrollbar { width: 6px; }
.notif-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* Private accounts and blocking */
.private-badge { display: inline-flex; vertical-align: middle; color: var(--text-muted); }
.private-badge svg { width: 18px; height: 18px; }
.private-state .empty-icon svg { width: 40px; height: 40px; }
.blocked-state { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.profile-more form { margin: 0; }
.chat-blocked { text-align: center; padding: 14px 8px; }

/* ---------- Welcome page (logged-out home, welcome.html) ----------
   Calm and roomy, like the brand film: big type, one accent, phones with
   soft shadows. Self-contained: its own phone rules come right after. */
.nav-guest-btn { white-space: nowrap; }
/* overflow-x: nothing in the hero (tilted phones, cards) may poke past the
   page edge, or phones (iPhones especially) let the page pan sideways.
   clip doesn't make a scroll box; hidden is the fallback for old Safari. */
.welcome { max-width: 1080px; margin: 0 auto; overflow-x: hidden; overflow-x: clip; }
.wl-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; padding: 40px 0 72px; }
.wl-eyebrow, .wl-kicker { margin: 0 0 12px; color: var(--accent); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.01em; }
.wl-title { margin: 0 0 18px; font-size: clamp(2.6rem, 5.6vw, 4.2rem); line-height: 1.04; letter-spacing: -0.035em; font-weight: 800; }
.wl-grad { background: linear-gradient(90deg, #4f7cba, #8a6fe0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wl-lead { margin: 0 0 28px; max-width: 30em; color: var(--text-muted); font-size: 1.2rem; line-height: 1.55; }
.wl-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.wl-actions-center { justify-content: center; }
.wl-btn { padding: 14px 30px; font-size: 1.05rem; border-radius: 999px; }

.wl-hero-art { position: relative; height: 560px; }
.wl-phone {
  width: 250px; padding: 9px; border-radius: 42px; background: #111318;
  box-shadow: 0 0 0 1.5px #9a9ca3 inset, 0 30px 60px -18px rgba(20, 30, 60, 0.35), 0 12px 24px -12px rgba(20, 30, 60, 0.25);
}
.wl-phone img { display: block; width: 100%; height: auto; border-radius: 33px; background: #f6f6fb; }  /* light screen while loading */
/* The phones are placed with translate/rotate/scale, not `transform`: the
   phone CSS below sets `transform: none !important` on anything tapped
   (:hover/:active), which made a tapped phone jump out of place, and an
   animated transform would replace these too. */
.wl-phone-front { position: absolute; left: 50%; top: 10px; translate: -40% 0; z-index: 2; }
.wl-phone-back { position: absolute; left: 50%; top: 60px; translate: -110% 0; rotate: -6deg; scale: 0.9; opacity: 0.95; }
.wl-bubble {
  position: absolute; z-index: 3; padding: 12px 16px; border-radius: 18px; background: var(--card-bg);
  border: 1px solid var(--border); box-shadow: 0 14px 30px -12px rgba(20, 30, 60, 0.3); font-size: 0.92rem; white-space: nowrap;
}
.wl-bubble-1 { top: 150px; right: -6px; }
.wl-bubble-2 { bottom: 70px; left: -10px; }

.wl-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 56px 0; border-top: 1px solid var(--border); }
.wl-feature-flip .wl-feature-text { order: 2; }
.wl-feature-art { display: flex; justify-content: center; }
.wl-h2 { margin: 0 0 14px; font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1.08; letter-spacing: -0.03em; font-weight: 800; }
.wl-text { margin: 0; max-width: 28em; color: var(--text-muted); font-size: 1.12rem; line-height: 1.6; }

.wl-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 56px 0; border-top: 1px solid var(--border); }
.wl-point { padding: 26px; border-radius: 22px; background: var(--card-bg); border: 1px solid var(--border); }
.wl-point h3 { margin: 12px 0 6px; font-size: 1.1rem; letter-spacing: -0.01em; }
.wl-point p { margin: 0; color: var(--text-muted); line-height: 1.55; }
.wl-point-icon { font-size: 1.7rem; }

.wl-cta { text-align: center; padding: 64px 24px; margin: 8px 0 24px; border-radius: 32px; background: var(--accent-soft); }
.wl-cta-icon { border-radius: 18px; margin-bottom: 18px; box-shadow: 0 14px 30px -12px rgba(20, 30, 60, 0.35); }
.wl-cta .wl-text { margin: 0 auto 26px; }
.wl-footer { display: flex; justify-content: center; gap: 22px; padding: 10px 0 30px; color: var(--text-muted); font-size: 0.9rem; }
.wl-footer a { color: var(--text-muted); }

/* Polish: a soft blue glow behind the hero and
   feature phones, three true facts under the hero buttons, line icons
   instead of emoji, and check-mark bullets on each feature. */
.wl-hero-art::before, .wl-feature-art::before {
  content: ""; position: absolute; inset: 8% 4%; z-index: 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(79, 124, 186, 0.22), rgba(79, 124, 186, 0));
  pointer-events: none;
}
.wl-feature-art { position: relative; }
.wl-feature-art .wl-phone, .wl-hero-art .wl-phone { z-index: 1; }
.wl-hero-art .wl-phone-front { z-index: 2; }
.wl-bubble { z-index: 3; }
.wl-trust { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 22px 0 0; padding: 0; list-style: none; color: var(--text-muted); font-size: 0.95rem; font-weight: 500; }
.wl-trust li { display: inline-flex; align-items: center; gap: 6px; }
.wl-trust .ico, .wl-bullets .ico { width: 18px; height: 18px; color: var(--success); stroke-width: 2.6; }
.wl-kicker { display: inline-flex; align-items: center; gap: 8px; }
.wl-kicker-icon { display: inline-flex; padding: 7px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.wl-kicker-icon .ico { width: 18px; height: 18px; }
.wl-bullets { display: grid; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; font-size: 1.02rem; font-weight: 500; }
.wl-bullets li { display: flex; align-items: center; gap: 10px; }
.wl-point-icon { display: inline-flex; padding: 10px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); font-size: 0; }
.wl-point-icon .ico { width: 24px; height: 24px; }
.wl-point { transition: translate 0.2s ease, box-shadow 0.2s ease; }
@media (hover: hover) { .wl-point:hover { translate: 0 -3px; box-shadow: 0 14px 32px -18px rgba(20, 30, 60, 0.35); } }
.wl-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .wl-point, .wl-point:hover { transition: none; translate: none; } }

@media (max-width: 960px) {
  .wl-hero { grid-template-columns: 1fr; gap: 8px; padding: 12px 0 40px; text-align: center; }
  .wl-trust { justify-content: center; }
  .wl-bullets { justify-content: center; justify-items: start; width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; text-align: left; }
  .wl-lead { margin-left: auto; margin-right: auto; font-size: 1.08rem; }
  .wl-actions { justify-content: center; }
  .wl-hero-art { height: 470px; }
  .wl-phone { width: 210px; border-radius: 36px; padding: 8px; }
  .wl-phone img { border-radius: 28px; }
  .wl-phone-back { translate: -80% 0; scale: 0.86; }   /* stays on screen */
  .wl-bubble { font-size: 0.82rem; padding: 10px 13px; }
  .wl-bubble-1 { right: 0; top: 120px; }
  .wl-bubble-2 { left: 0; bottom: 40px; }
  .wl-feature { grid-template-columns: 1fr; gap: 28px; padding: 44px 0; text-align: center; }
  .wl-feature-flip .wl-feature-text { order: 0; }
  .wl-text { margin: 0 auto; }
  .wl-points { grid-template-columns: 1fr; padding: 40px 0; }
  .wl-cta { border-radius: 24px; padding: 48px 18px; }
}
@media (max-width: 420px) {
  .nav-guest-btn.btn-secondary { display: none; }   /* phones: "Join free" only; Log in is on the page */
  .wl-bubble { white-space: normal; max-width: 210px; text-align: left; }
}

/* Admin: device bans (profile Admin controls and /admin/device-bans) */
.dev-row { padding: 10px 0; border-top: 1px solid var(--border); }
.dev-row:first-of-type { border-top: 0; }
.dev-row-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.dev-name { font-weight: 600; font-size: 14px; }
.dev-banned-tag { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: rgba(239, 68, 68, 0.12); color: var(--danger); }
.admin-panel p.dev-shared { font-size: 13px; margin: 0 0 8px; }
.dev-ban-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dev-ban-form input[type="text"] { flex: 1 1 180px; min-width: 0; }

/* Launch updates: first-time checklist, invites, people you may know,
   legal pages, sign-up stats */
.onboarding { position: relative; }
.onboarding-close { position: absolute; top: 10px; right: 10px; margin: 0; }
.onboarding-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.onboarding-steps li { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.onboarding-steps li a { color: var(--accent); font-weight: 600; }
.onboarding-steps li.is-done { color: var(--text-muted); text-decoration: line-through; }
.onboarding-check { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; background: var(--accent-soft); color: var(--accent); }
.onboarding-steps li.is-done .onboarding-check { background: var(--success); color: #fff; }
.invite-row { display: flex; gap: 8px; align-items: center; }
.invite-row input { flex: 1; min-width: 0; font-size: 14px; }
.suggest-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); }
.suggest-row:first-of-type { border-top: 0; }
.suggest-row form { margin: 0; }
.suggest-who { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; }
.suggest-who > span { display: flex; flex-direction: column; min-width: 0; }
.suggest-why { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.invite-banner, .wl-invited { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 6px 0 14px; }
.wl-invited { justify-content: flex-start; margin: 0 0 12px; color: var(--accent); font-weight: 600; }
.agree-row { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 14px; line-height: 1.45; margin: 14px 0; padding: 4px 0; cursor: pointer; }
.agree-row input { width: 20px; height: 20px; flex-shrink: 0; margin: 0; accent-color: var(--accent); cursor: pointer; }
.cf-turnstile { margin: 10px 0; }
.legal-links { margin-top: 6px; }
.legal { line-height: 1.6; }
.legal h1 { margin: 0 0 4px; letter-spacing: -0.02em; }
.legal h2 { font-size: 1.1rem; margin: 22px 0 6px; }
.legal ul { padding-left: 20px; margin: 6px 0; }
.legal li { margin: 4px 0; }
.danger-zone { border: 1px solid rgba(239, 68, 68, 0.35); }
.danger-zone form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.danger-zone input[type="password"] { flex: 1 1 180px; min-width: 0; }
.stat-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.stat-tile { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0; padding: 16px 8px; text-align: center; }
.stat-num { font-size: 1.8rem; font-weight: 800; letter-spacing: -0.02em; }
.stat-row { display: flex; justify-content: space-between; padding: 7px 0; border-top: 1px solid var(--border); font-size: 14px; }
.stat-row:first-of-type { border-top: 0; }
@media (max-width: 560px) { .stat-tiles { grid-template-columns: repeat(2, 1fr); } }

/* 📊 Polls (_poll.html / pollHtml in main.js, and the post box) */
.poll { display: grid; gap: 8px; margin: 10px 0 4px; }
.poll-form { margin: 0; }
.poll-option {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 44px; padding: 10px 14px; overflow: hidden; text-align: left; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--text); background: var(--card-bg);
  border: 1.5px solid var(--border); border-radius: 12px;
}
.poll:not(.show-results) .poll-option:hover { border-color: var(--accent); color: var(--accent); }
.poll-bar { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: var(--accent-soft); z-index: 0; }
.poll-option.is-mine { border-color: var(--accent); }
.poll-option.is-mine .poll-bar { background: color-mix(in srgb, var(--accent) 28%, var(--card-bg)); }
.poll-text, .poll-pct { position: relative; z-index: 1; }
.poll-text { min-width: 0; overflow-wrap: anywhere; }
.poll-pct { font-variant-numeric: tabular-nums; color: var(--text-muted); }
.poll-check { color: var(--accent); }
.poll-meta { color: var(--text-muted); font-size: 13px; }
.composer-poll { display: grid; gap: 8px; margin: 8px 0 4px; }
.composer-poll[hidden] { display: none; }   /* display: grid would beat the hidden attribute */
.chat-poll { margin: 0 0 8px; }
/* A poll bubble is wider than a text one (still inside the 70% limit), and
   the poll fills it, so options never poke out past the bubble. */
.chat-bubble:has(.poll) { width: min(320px, 70%); box-sizing: border-box; }
.chat-bubble .poll { width: 100%; margin: 6px 0 2px; }
.chat-bubble.mine .poll-option { color: var(--text); }
.chat-bubble.mine .poll-meta { color: rgba(255, 255, 255, 0.8); }
.composer-poll input[hidden], .composer-poll-actions .link-btn[hidden] { display: none; }
.composer-poll-actions { display: flex; justify-content: space-between; }
.composer-poll-actions .link-btn { color: var(--accent); font-weight: 600; font-size: 14px; }
#poll-remove { color: var(--text-muted); }
#poll-toggle.active { background: var(--accent); color: #fff; }

/* Admin: all accounts (/admin/users) */
.admin-users-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.admin-users-filters input[type="text"] { flex: 1 1 180px; min-width: 0; width: auto; margin: 0; }
.admin-user-row { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--border); }
.admin-user-row:first-of-type { border-top: 0; }
.admin-user-main { min-width: 0; flex: 1; }
.admin-user-main > div:first-child { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.admin-user-name { font-weight: 600; }
.admin-users-pages { display: flex; justify-content: center; align-items: center; gap: 12px; padding-top: 12px; }

/* Shown only inside the app added to the home screen (the login page's
   keyboard test link). */
.standalone-only { display: none; }
@media (display-mode: standalone) { .standalone-only { display: block; } }
/* Login / sign-up beside the blue panel: the panel already shows the logo,
   and the terms sentence is normal text, not a bold field label. */
@media (min-width: 961px) { .auth-split .auth-logo { display: none; } }
.card .agree-row { font-weight: 400; font-size: 14px; margin: 14px 0; }

/* ================= Redesign trial (feed, messages, chat, explore,
   settings, notifications) =================
   Polish only: FlyCord blue and the layout stay; everything here uses the
   existing colour variables, so dark mode follows. Kept as one block at the
   end of the file so it overrides the rules above. */

/* Section titles a little stronger everywhere */
.card-title { font-size: 1.06rem; font-weight: 800; letter-spacing: -0.01em; }

/* ---- Feed and post cards ----
   (Phones keep rounded post cards: the edge-to-edge look from ux-9 was
   dropped at the owner's request.) */
.post-card { padding: 16px 18px 10px; }
.post-card:hover { transform: none; translate: none; box-shadow: var(--shadow); }  /* no jumping cards */
.post-header { gap: 10px; }
.post-header .avatar-sm { width: 38px; height: 38px; font-size: 17px; }
.post-header .post-username { font-size: 15px; font-weight: 700; }
.post-content { font-size: 15.5px; line-height: 1.5; }
.post-action, .like-btn { min-height: 40px; padding: 8px 10px; }
.post-action .ico, .like-outline .ico { width: 24px; height: 24px; }
.post-footer { flex-wrap: nowrap; }
.composer textarea { border-radius: 14px; font-size: 15px; }

/* ---- Messages list ---- */
.conversation-item { gap: 14px; padding: 11px 10px; margin: 0 -10px; border-bottom: 0; border-radius: 14px; }
.conversation-item:hover { border-radius: 14px; }
.conversation-item .avatar-md { width: 52px; height: 52px; font-size: 22px; }
.conversation-item .post-username { font-size: 15.5px; font-weight: 700; }
.conversation-preview { font-size: 14px; margin-top: 2px; }
.conversation-item:has(.unread-badge) .conversation-preview { color: var(--text); font-weight: 600; }
.conversation-item:has(.unread-badge) .post-time { color: var(--accent); font-weight: 700; }
.conversation-item .group-avatar {
  border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: linear-gradient(135deg, #6a98d6, #3b5f98); color: #fff;
}

/* ---- Chat ---- */
.chat-messages { gap: 6px; padding: 16px 14px; }
.chat-bubble { border-radius: 20px; padding: 9px 14px; font-size: 15px; line-height: 1.4; max-width: 78%; }
.chat-bubble.theirs { background: var(--card-bg); border-bottom-left-radius: 6px; }
.chat-bubble.mine { border-bottom-right-radius: 6px; }
.bubble-time, .bubble-delete-btn { font-size: 10.5px; }
@media (hover: hover) {
  /* Mouse: "Delete" only shows on the bubble you point at. */
  .bubble-delete-btn { opacity: 0; transition: opacity 0.15s ease; }
  .chat-bubble:hover .bubble-delete-btn, .bubble-delete-btn:focus-visible { opacity: 0.8; }
}
.chat-form { padding: 10px 12px; }
.chat-input-row { gap: 4px; }
.chat-input-row input[type=text] { border-radius: 999px; padding: 11px 16px; font-size: 15px; }
.chat-input-row .icon-btn { width: 40px; height: 40px; color: var(--text-muted); flex-shrink: 0; }
.chat-input-row .icon-btn:hover, .chat-input-row .icon-btn.active { color: var(--accent); }
.chat-input-row .icon-btn .ico { width: 22px; height: 22px; }
.chat-send { width: 42px; height: 42px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-left: 4px; }
.chat-send .ico { width: 20px; height: 20px; translate: -1px 1px; }

/* ---- Settings ---- */
.settings-title { margin: 2px 0 10px; }
.settings-nav {
  position: sticky; top: 64px; z-index: 6; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  margin: 0 0 14px; padding: 8px 0; background: var(--bg);
}
.settings-nav::-webkit-scrollbar { display: none; }
.settings-chip {
  flex-shrink: 0; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--card-bg);
  color: var(--text); font-size: 14px; font-weight: 600; white-space: nowrap;
}
.settings-chip:hover { border-color: var(--accent); color: var(--accent); }
.col-center > .card[id^="set-"] { scroll-margin-top: 130px; }
@media (max-width: 960px) { .settings-nav { top: 56px; } }

/* ---- Notifications panel ---- */
.notif-panel { width: min(400px, calc(100vw - 24px)); }
.notif-item .avatar-sm { width: 40px; height: 40px; font-size: 18px; }
.notif-activity { padding: 8px; border-radius: 12px; }
.notif-text { font-size: 14px; line-height: 1.4; }
.notif-thumb { width: 46px; height: 46px; border-radius: 10px; }

/* ---- Explore ---- */
.card-title:has(.title-icon) { display: flex; align-items: center; gap: 10px; }
.title-icon { display: inline-flex; padding: 7px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.title-icon .ico { width: 18px; height: 18px; }
.user-tile { border: 0; background: var(--bg); border-radius: 14px; padding: 12px; }
.user-tile:hover { transform: none; translate: none; box-shadow: none; }
.user-tile .avatar-md { width: 46px; height: 46px; }
.suggest-row { padding: 10px 0; }

/* ---- Full version: the remaining screens ---- */
.page-title-icon { display: flex; align-items: center; gap: 10px; }
.page-title-icon .title-icon .ico { width: 20px; height: 20px; }

/* Group chat header: avatar, name, then Invite / Members / ⋮ as one tidy row of pills */
.chat-header .group-avatar {
  border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: linear-gradient(135deg, #6a98d6, #3b5f98); color: #fff;
}
.group-header-actions { gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.group-header-actions .report-summary {
  padding: 6px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-dark);
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
.group-header-actions .report-summary:hover { color: var(--accent-dark); background: color-mix(in srgb, var(--accent) 18%, transparent); }
.group-manage-toggle .report-summary { padding: 6px 10px; }

/* Game studio: "+ New game" stays on one line */
.btn { white-space: nowrap; }

/* Accessibility (the skill's checklist): a clear focus ring for keyboard
   users everywhere, and calmer motion for people who ask for it. */
a:focus-visible, button:focus-visible, summary:focus-visible, .btn:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
@media (max-width: 600px) {
  /* phones: the group's Invite / Members / ⋮ pills sit in one row under the name */
  .chat-header .group-header-actions { width: 100%; margin-left: 0; justify-content: flex-start; }
}

/* ---------- Cords: the friendship map (/cords, cords.html) ----------
   A square map; friends are placed by the server in percent of its width
   (left/top + translate, never transform: phones reset transform on tap).
   Cords are SVG paths in a 0..100 viewBox; .cord-flow is the moving light
   that initCords animates with element.animate. */
.cords-lead { margin: 0 0 14px; }
.cords-card { padding: 14px; }
.cords-map {
  position: relative; width: 100%; max-width: 560px; aspect-ratio: 1; margin: 0 auto;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%);
}
.cords-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cord { fill: none; stroke: url(#cord-grad); stroke-linecap: round; }
.cord-quiet { stroke: var(--text-muted); stroke-dasharray: 0.8 1.6; opacity: 0.45; }
.cord-flow { fill: none; stroke: rgba(255, 255, 255, 0.9); stroke-linecap: round; stroke-dasharray: 0.4 6; }
html.dark .cord-flow { stroke: rgba(255, 255, 255, 0.75); }
.cords-me, .cords-friend { position: absolute; translate: -50% -50%; display: flex; flex-direction: column; align-items: center; }
.cords-me { left: 50%; top: 50%; z-index: 3; font-size: 12px; font-weight: 800; gap: 4px; }
.cords-me .avatar-lg { width: clamp(56px, 17vw, 84px); height: clamp(56px, 17vw, 84px); box-shadow: 0 0 0 4px var(--card-bg), 0 0 0 7px var(--accent); }
.cords-friend { width: var(--size); z-index: 2; color: var(--text); text-decoration: none; }
.cords-bob { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; }
.cords-friend .avatar-md { width: 100%; height: auto; aspect-ratio: 1; font-size: clamp(14px, 3.4vw, 22px); box-shadow: 0 0 0 3px var(--card-bg); }
.cords-strong .avatar-md { box-shadow: 0 0 0 3px var(--card-bg), 0 0 0 5px #4f7cba; }
.cords-quiet .avatar-md { filter: grayscale(0.6); opacity: 0.75; }
.cords-name { font-size: clamp(10px, 2.6vw, 12.5px); font-weight: 700; max-width: 120%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.cords-friend:hover .cords-name, .cords-friend:focus-visible .cords-name { color: var(--accent); }
.cords-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-top: 10px; font-size: 13px; color: var(--text-muted); }
.cords-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lg { display: inline-block; width: 22px; border-radius: 3px; }
.lg-strong { height: 5px; background: linear-gradient(90deg, #6a98d6, #3b5f98); }
.lg-growing { height: 3px; background: linear-gradient(90deg, #6a98d6, #3b5f98); opacity: 0.75; }
.lg-light { height: 2px; background: #6a98d6; opacity: 0.5; }
.lg-quiet { height: 0; border-top: 2px dashed var(--text-muted); opacity: 0.6; }
.cords-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); }
.cords-row:first-of-type { border-top: 0; }
.cords-row-who { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; }
.cords-row-who > span { display: flex; flex-direction: column; min-width: 0; }
.cords-teaser { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; }
.cords-teaser:hover { border-color: var(--accent); }
.cords-teaser .title-icon .ico { width: 22px; height: 22px; }
.cords-teaser-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.cords-teaser-go { font-size: 20px; color: var(--accent); }

/* ======================================================================
   FlyCord rebuild (ux-11): one design system + motion for every screen.
   FlyCord blue (#4f7cba) and the rounded cards stay; what changed is the
   depth, spacing, type, every control's feedback, and motion that now
   also runs on phones. Motion rules:
     - only opacity, translate, rotate and scale move (never transform,
       which phones clear on tap; never width/height/top/left, except the
       desktop nav pill's width);
     - entrances rise with --ease-out, presses spring back with
       --ease-spring, exits are quicker than entrances;
     - everything is skipped for prefers-reduced-motion (the global rule
       above cuts durations to ~0, and main.js checks reduceMotion()).
   main.js's "Motion" section does what CSS can't (likes, toasts, panels,
   new messages, the loading bar, pull to refresh...).
   ====================================================================== */
:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 0.75, 0.2);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 140ms;
  --dur: 220ms;
  --dur-slow: 420ms;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --surface-2: #f1f3f9;
  --surface-hover: #eaeef7;
  --hairline: rgba(20, 30, 60, 0.07);
  --shadow: 0 1px 2px rgba(20, 30, 60, 0.04), 0 2px 10px -3px rgba(20, 30, 60, 0.07);
  --shadow-2: 0 2px 4px rgba(20, 30, 60, 0.04), 0 14px 32px -14px rgba(20, 30, 60, 0.2);
  --shadow-3: 0 4px 12px rgba(20, 30, 60, 0.06), 0 24px 56px -16px rgba(20, 30, 60, 0.32);
  --shadow-accent: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 8px 18px -8px rgba(79, 124, 186, 0.75);
  --glow: radial-gradient(1100px 420px at 50% -160px, rgba(79, 124, 186, 0.13), transparent 70%);
}
/* A real spring where the browser can do it (Safari 17.2+, Chrome 113+). */
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --ease-spring: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85.9%, 1);
  }
}
html.dark {
  --surface-2: #1b1f2a;
  --surface-hover: #212734;
  --hairline: rgba(255, 255, 255, 0.06);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 14px -6px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.35), 0 16px 36px -14px rgba(0, 0, 0, 0.7);
  --shadow-3: 0 4px 14px rgba(0, 0, 0, 0.4), 0 28px 60px -16px rgba(0, 0, 0, 0.8);
  --shadow-accent: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 8px 20px -8px rgba(40, 80, 150, 0.9);
  --glow: radial-gradient(1100px 420px at 50% -160px, rgba(111, 151, 211, 0.14), transparent 70%);
}

/* ---- Base ---- */
html { -webkit-tap-highlight-color: transparent; }
body {
  background: var(--glow) no-repeat, var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }
h1, h2, h3, .page-title, .card-title, .profile-name { letter-spacing: -0.02em; }
.page-title { font-size: 1.65rem; font-weight: 800; letter-spacing: -0.03em; }
/* Theme switch: everything crossfades for a moment (main.js adds the class). */
html.theme-fade, html.theme-fade *, html.theme-fade *::before, html.theme-fade *::after {
  transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease, fill 0.35s ease, box-shadow 0.35s ease !important;
}

/* ---- Cards ---- */
.card {
  border-radius: var(--r-lg);
  border-color: var(--hairline);
  box-shadow: var(--shadow);
}
html.dark .card { border-color: var(--border); }
@media (hover: hover) {
  .post-card { transition: box-shadow var(--dur) ease, border-color var(--dur) ease; }
  .post-card:hover { box-shadow: var(--shadow-2); border-color: color-mix(in srgb, var(--accent) 22%, transparent); }
}

/* ---- Navbar ---- */
.navbar {
  border-bottom-color: transparent;
  transition: box-shadow var(--dur) ease, border-color var(--dur) ease;
}
.navbar.is-scrolled { border-bottom-color: var(--hairline); box-shadow: 0 6px 24px -14px rgba(20, 30, 60, 0.35); }
html.dark .navbar.is-scrolled { border-bottom-color: var(--border); box-shadow: 0 6px 24px -10px rgba(0, 0, 0, 0.8); }
.brand-icon { transition: rotate var(--dur-slow) var(--ease-spring), scale var(--dur-slow) var(--ease-spring); box-shadow: 0 4px 12px -4px rgba(59, 95, 152, 0.55); }
@media (hover: hover) { .brand:hover .brand-icon { rotate: -10deg; scale: 1.08; } }
/* Desktop links: one pill slides to the active / pointed-at link (main.js,
   initNavPill). Without JS the active link keeps its own background. */
.nav-links { position: relative; isolation: isolate; }
.nav-pill {
  position: absolute; z-index: -1; top: 0; left: 0; height: 100%; width: 0;
  border-radius: 999px; background: var(--accent-soft); opacity: 0;
  transition: translate 0.4s var(--ease-out), width 0.4s var(--ease-out), opacity var(--dur) ease;
  pointer-events: none;
}
.nav-links.has-pill .nav-link, .nav-links.has-pill .nav-link:hover, .nav-links.has-pill .nav-link.active { background: transparent; }
.nav-links.has-pill .nav-link.is-pointed, .nav-links.has-pill .nav-link.active { color: var(--accent-dark); }
.icon-btn { transition: background var(--dur-fast) ease, color var(--dur-fast) ease, scale 0.35s var(--ease-spring); border-radius: 12px; }
.icon-btn:active { scale: 0.88; transition-duration: 0.08s; }
@media (hover: hover) { .icon-btn:hover { background: var(--accent-soft); color: var(--text); } }
.navbar-right .icon-btn { align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; }
.navbar-right .icon-btn:not(.nav-search-btn) { display: inline-flex; }  /* the 🔍 button is phones-only */
.navbar-right .icon-btn[hidden] { display: none; }
.notif-dot { top: 8px; right: 9px; }
.user-chip { transition: background var(--dur-fast) ease, scale 0.35s var(--ease-spring); }
.user-chip:active { scale: 0.92; transition-duration: 0.08s; }
.user-chip .avatar-sm { box-shadow: 0 0 0 2px var(--card-bg), 0 0 0 3.5px color-mix(in srgb, var(--accent) 45%, transparent); }

/* The loading bar along the top edge while the next page loads. */
.nav-progress {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, #6a98d6, #4f7cba 60%, #8fb6ea);
  box-shadow: 0 0 10px rgba(79, 124, 186, 0.6);
  transform-origin: 0 50%; scale: 0 1; opacity: 0;
}

/* ---- Search box (desktop navbar) ---- */
.search-form { transition: box-shadow var(--dur) ease, background-color var(--dur) ease; }
.search-form:focus-within { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }

/* ---- Buttons ---- */
.btn {
  border-radius: 12px;
  transition: background var(--dur-fast) ease, box-shadow var(--dur) ease, scale 0.4s var(--ease-spring), filter var(--dur-fast) ease, color var(--dur-fast) ease;
}
.btn:hover { transform: none; }
.btn:active { transform: none; scale: 0.95; transition-duration: 0.08s; }
.btn-primary { box-shadow: var(--shadow-accent); }
.btn-primary:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 12px 24px -10px rgba(79, 124, 186, 0.85); }
.btn-secondary:hover { background: color-mix(in srgb, var(--accent) 18%, var(--card-bg)); box-shadow: none; }
.btn-small { border-radius: 10px; }
.btn[disabled], .btn:disabled { opacity: 0.55; cursor: default; scale: 1; }
/* Waiting for the server after a normal form submit (main.js, initButtonLoading). */
@keyframes fc-spin { to { rotate: 360deg; } }
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading > * { visibility: hidden; }
.btn.is-loading::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.45); border-top-color: #fff;
  animation: fc-spin 0.7s linear infinite;
}
.btn-secondary.is-loading::after { border-color: color-mix(in srgb, var(--accent) 30%, transparent); border-top-color: var(--accent); }
.link-btn { transition: color var(--dur-fast) ease, background var(--dur-fast) ease, scale 0.4s var(--ease-spring); }
.link-btn:active { transform: none; scale: 0.88; transition-duration: 0.08s; }

/* ---- Fields ---- */
textarea, input[type=text], input[type=password], input[type=email], input[type=date], input[type=number], select {
  background: var(--surface-2);
  border-color: transparent;
  border-radius: 12px;
  transition: border-color var(--dur) ease, box-shadow var(--dur) ease, background-color var(--dur) ease;
}
textarea:hover, input[type=text]:hover, input[type=password]:hover, input[type=email]:hover { background-color: var(--surface-hover); }
textarea:focus, input:focus, select:focus {
  background-color: var(--card-bg);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
}
html.dark textarea, html.dark input[type=text], html.dark input[type=password], html.dark input[type=email] { border-color: var(--border); }
html.dark textarea:focus, html.dark input:focus { border-color: var(--accent); }
/* The navbar search box keeps its own look (its wrapper shows the focus). */
.search-form input, .search-form input:hover, .search-form input:focus { background: transparent; box-shadow: none; border-color: transparent; }

/* ---- Tabs: Everyone / My posts as one segmented control ---- */
.tabs-segmented {
  display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--card-bg);
  box-shadow: var(--shadow); border: 1px solid var(--hairline);
}
html.dark .tabs-segmented { border-color: var(--border); }
.tabs-segmented .tab { border: 0; background: transparent; padding: 8px 18px; font-size: 14px; }
.tabs-segmented .tab:hover { background: var(--surface-2); }
.tab { transition: background var(--dur) ease, color var(--dur) ease, scale 0.35s var(--ease-spring), box-shadow var(--dur) ease; }
.tab:active { transform: none; scale: 0.94; transition-duration: 0.08s; }
.tab-active, .tab-active:hover, .tabs-segmented .tab-active, .tabs-segmented .tab-active:hover {
  background: var(--brand-grad); color: #fff; border-color: transparent; box-shadow: var(--shadow-accent);
}

/* ---- Feed: the post box ---- */
.composer { padding: 14px 16px 12px; }
.composer-main { display: flex; align-items: flex-start; gap: 12px; }
.composer-main .avatar-md { width: 42px; height: 42px; margin-top: 2px; }
.composer-main textarea {
  flex: 1; min-width: 0; min-height: 46px; resize: none; overflow: hidden;
  padding: 12px 16px; border-radius: 22px; font-size: 15.5px; line-height: 1.45;
  transition: border-color var(--dur) ease, box-shadow var(--dur) ease, background-color var(--dur) ease, border-radius var(--dur) ease, min-height 0.3s var(--ease-out);
}
.composer-main textarea:focus { border-radius: 16px; }
/* One line until you tap it, then room to write (main.js, initComposerGrow). */
.composer.is-open .composer-main textarea { min-height: 92px; }
.composer .composer-footer { margin-top: 10px; padding-left: 54px; }
.composer .composer-poll, .composer .image-preview { margin-left: 54px; }
.composer-actions { gap: 4px; }
.composer-tool {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 0; border-radius: 999px;
  background: transparent; color: var(--text-muted); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease, scale 0.4s var(--ease-spring);
}
.composer-tool .ico { width: 20px; height: 20px; }
.composer-tool.image-trigger .ico { color: #16a34a; }
.composer-tool.video-trigger .ico { color: #db4f93; }
#poll-toggle.composer-tool .ico { color: #d98a14; }
.composer-tool:hover, .composer-tool.active { background: var(--surface-2); color: var(--text); }
.composer-tool:active { scale: 0.92; transition-duration: 0.08s; }
.composer-post { padding: 9px 22px; border-radius: 999px; }
.image-preview:not([hidden]) { display: flex; align-items: center; gap: 10px; }
.preview-thumb { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; box-shadow: var(--shadow); }
@media (max-width: 960px) {
  .composer .composer-footer, .composer .composer-poll, .composer .image-preview { padding-left: 0; margin-left: 0; }
  .composer-tool { padding: 8px 10px; }
}
@media (max-width: 380px) {
  .composer-tool span { display: none; }
  .composer-tool { padding: 9px; }
}

/* ---- Stories: new stories get a slowly turning blue ring ---- */
@property --ring-turn { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes fc-ring-turn { to { --ring-turn: 360deg; } }
.story-ring:not(.story-ring-seen):not(.story-ring-mine):not(.story-ring-empty) {
  background: conic-gradient(from var(--ring-turn), #9cc0ef, #4f7cba, #2f5590, #6a98d6, #9cc0ef);
  animation: fc-ring-turn 5s linear infinite;
}
.story-circle { transition: scale 0.4s var(--ease-spring); }
.story-circle:active { scale: 0.9; transition-duration: 0.08s; }
.story-row { scrollbar-width: none; }
.story-row::-webkit-scrollbar { display: none; }
.story-name { font-weight: 600; }
.story-add-badge { box-shadow: 0 3px 8px -2px rgba(59, 95, 152, 0.6); transition: scale 0.4s var(--ease-spring); }
.story-add-badge:active { scale: 0.85; transition-duration: 0.08s; }

/* ---- Post cards ---- */
.post-header .avatar-sm { box-shadow: 0 0 0 2px var(--card-bg); }
.post-menu-btn { transition: background var(--dur-fast) ease, color var(--dur-fast) ease, scale 0.35s var(--ease-spring); }
.post-menu-btn:active { scale: 0.88; transition-duration: 0.08s; }
.post-footer { gap: 2px; margin: 0 -6px; }
.post-action, .like-btn { transition: background var(--dur-fast) ease, color var(--dur-fast) ease, scale 0.4s var(--ease-spring); }
.like-count, .comment-count, .repost-count { font-variant-numeric: tabular-nums; display: inline-block; }
@media (hover: hover) {
  .like-btn:hover { background: color-mix(in srgb, #ef4444 12%, transparent); }
  a.post-action:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-dark); }
  .repost-btn:hover { background: color-mix(in srgb, #16a34a 12%, transparent); color: #16a34a; }
  .share-btn:hover, .save-btn:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-dark); }
}
/* The little dots that fly off a heart / bookmark (main.js, burstDots). */
.like-btn, .save-btn, .repost-btn, .clip-like .like-btn { position: relative; }
.burst-dot { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; pointer-events: none; }
.post-comment-user { color: var(--text); }
.pinned-label { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-dark); }
.pinned-label .ico { width: 14px; height: 14px; }
/* Photos fade and settle in once they've loaded. */
.post-image { overflow: hidden; }
.post-image img, .media-thumb img { scale: 1.03; transition: opacity 0.45s ease, scale 0.8s var(--ease-out); }
.post-image.is-loaded img, .media-thumb.is-loaded img { scale: 1; }
.post-quote { background: var(--surface-2); border-color: transparent; }
html.dark .post-quote { border-color: var(--border); }
.verified-badge { box-shadow: 0 2px 6px -2px rgba(59, 95, 152, 0.7); }

/* ---- Menus (the ⋯ on posts, the account menu, New group) ---- */
.dropdown-panel, .user-menu-panel, .new-group-form {
  border-radius: 16px; box-shadow: var(--shadow-3); border: 1px solid var(--hairline); padding: 6px;
}
.new-group-form { padding: 12px; }
html.dark .dropdown-panel, html.dark .user-menu-panel, html.dark .new-group-form { border-color: var(--border); }
.dropdown-item, .user-menu-item { border-radius: 10px; transition: background var(--dur-fast) ease, color var(--dur-fast) ease; }
.dropdown-item:hover, .user-menu-item:hover { background: var(--surface-2); }
/* Line icons for the ⋯ menu items, drawn with a mask so main.js can keep
   changing the label (Pin / Unpin) with textContent. */
.dropdown-item[class*="di-"] { display: flex; align-items: center; gap: 10px; }
.dropdown-item[class*="di-"]::before {
  content: ""; width: 18px; height: 18px; flex-shrink: 0; background: currentColor; opacity: 0.7;
  -webkit-mask: var(--di) center / contain no-repeat; mask: var(--di) center / contain no-repeat;
}
.di-edit { --di: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9a2.8 2.8 0 0 0-4-4L4 16z'/%3E%3Cpath d='m13.5 6.5 4 4'/%3E%3C/svg%3E"); }
.di-pin { --di: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3.5h6l-1 5 3.5 3.5v1.5h-11V12L10 8.5z'/%3E%3Cpath d='M12 13.5V21'/%3E%3C/svg%3E"); }
.di-delete { --di: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12M9 7V4h6v3'/%3E%3C/svg%3E"); }
.di-report { --di: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4'/%3E%3Cpath d='M5 4h11l-2 4 2 4H5'/%3E%3C/svg%3E"); }
.dropdown-item.danger::before { opacity: 1; }
.user-menu-item .ico { transition: color var(--dur-fast) ease, translate 0.3s var(--ease-spring); }
@media (hover: hover) { .user-menu-item:hover .ico { color: var(--accent); translate: 2px 0; } }

/* ---- Notifications panel ---- */
.notif-panel { border-radius: 20px; box-shadow: var(--shadow-3); border: 1px solid var(--hairline); }
html.dark .notif-panel { border-color: var(--border); }
.notif-activity { transition: background var(--dur-fast) ease; }

/* ---- Toasts: frosted, with a line showing when they'll go ---- */
.toast {
  border-radius: 18px; box-shadow: var(--shadow-3); border-color: var(--hairline);
  background: color-mix(in srgb, var(--card-bg) 90%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
  position: relative; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
html.dark .toast { border-color: var(--border); }
.toast-timer { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--accent); opacity: 0.55; transform-origin: 0 50%; }

/* ---- Badges ---- */
.unread-badge { box-shadow: 0 2px 6px -1px rgba(239, 68, 68, 0.5); font-variant-numeric: tabular-nums; }

/* ---- Messages: list and chat ---- */
.conversation-item { transition: background var(--dur-fast) ease, scale 0.4s var(--ease-spring); }
.conversation-item:active { scale: 0.985; transition-duration: 0.08s; }
.conversation-item:hover { background: var(--surface-2); }
.back-link {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; padding: 6px 14px 6px 12px;
  border-radius: 999px; background: var(--card-bg); box-shadow: var(--shadow); color: var(--text);
  font-size: 14px; font-weight: 600; transition: scale 0.35s var(--ease-spring), background var(--dur-fast) ease;
}
.back-link:active { scale: 0.94; transition-duration: 0.08s; }
@media (hover: hover) { .back-link:hover { background: var(--surface-2); } }
.chat-card { overflow: hidden; }
.chat-header { position: relative; z-index: 2; }
.chat-messages { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, var(--bg)), var(--bg)); }
.chat-bubble.theirs { box-shadow: 0 1px 2px rgba(20, 30, 60, 0.06); }
.chat-bubble.mine { background: linear-gradient(180deg, #5a87c6, #4a74b2); box-shadow: 0 4px 12px -6px rgba(59, 95, 152, 0.7); }
html.dark .chat-bubble.mine { background: linear-gradient(180deg, #5e8acb, #4a76b6); }
/* Bubbles in a row from the same person hug each other, like iMessage. */
.chat-bubble.mine + .chat-bubble.mine { margin-top: -2px; border-top-right-radius: 8px; }
.chat-bubble.theirs + .chat-bubble.theirs { margin-top: -2px; border-top-left-radius: 8px; }
.chat-send { transition: scale 0.4s var(--ease-spring), box-shadow var(--dur) ease; }
.chat-send:active { scale: 0.86; transition-duration: 0.08s; }
.typing-indicator { background: var(--card-bg); box-shadow: var(--shadow); }

/* ---- Profile ---- */
.profile-stat { transition: scale 0.35s var(--ease-spring); }
a.profile-stat:active { scale: 0.94; transition-duration: 0.08s; }
.media-thumb { transition: filter var(--dur) ease; }
@media (hover: hover) { .media-thumb:hover { filter: brightness(0.92); } }

/* ---- Explore, search, lists ---- */
.user-tile, .settings-chip, .cords-teaser { transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease, scale 0.4s var(--ease-spring), box-shadow var(--dur) ease; }
.user-tile:active, .settings-chip:active, .cords-teaser:active { scale: 0.97; transition-duration: 0.08s; }
@media (hover: hover) { .user-tile:hover { background: var(--surface-hover); } .cords-teaser:hover { box-shadow: var(--shadow-2); } }
.cords-teaser-go { transition: translate 0.35s var(--ease-spring); }
@media (hover: hover) { .cords-teaser:hover .cords-teaser-go { translate: 4px 0; } }
.title-icon { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent); }
/* Settings: the chip for the section you're reading (main.js, initSettingsSpy). */
.settings-chip.is-current { background: var(--brand-grad); border-color: transparent; color: #fff; box-shadow: var(--shadow-accent); }
.settings-nav { background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* ---- Empty states: the icon floats ---- */
@keyframes fc-float { 50% { translate: 0 -6px; } }
.empty-icon { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent); animation: fc-float 3.6s ease-in-out infinite; }

/* ---- Segmented control (Settings > Theme) ---- */
.segmented span { transition: background var(--dur) ease, color var(--dur) ease, box-shadow var(--dur) ease; }

/* ---- Login / sign-up ---- */
.auth-card { border-radius: 24px; box-shadow: var(--shadow-2); }

/* ---- Pull to refresh (home-screen app only, main.js initPullRefresh) ---- */
.ptr {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 8px); z-index: 40; width: 42px; height: 42px;
  margin-left: -21px; border-radius: 50%; background: var(--card-bg); box-shadow: var(--shadow-2);
  display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; translate: 0 -64px;
}
.ptr img { width: 26px; height: 26px; border-radius: 7px; }

/* ---- Page entrances ----
   Each page's cards rise into place one after another (CSS, so it works
   before main.js and without it; phones too). Not on profiles
   (initProfileIntro has its own) or Clips; the welcome page has no .grid.
   `backwards`, so nothing is held afterwards; translate, so a tap can't
   knock it. */
@keyframes fc-rise { from { opacity: 0; translate: 0 16px; } }
@media (prefers-reduced-motion: no-preference) {
  body:not([data-page="user_profile"]):not([data-page="profile_redirect"]) .page > .grid > .col-center > :not(#post-list):nth-child(-n+7),
  body:not([data-page="user_profile"]):not([data-page="profile_redirect"]) .page > .grid > .col-right > *,
  .page > .grid > .story-tray-mobile,
  .page > .grid > .col-center > #post-list > .post-card:nth-child(-n+5),
  .page > .auth-split {
    animation: fc-rise 0.55s var(--ease-out) backwards;
  }
  .page > .grid > .col-center > :nth-child(2) { animation-delay: 50ms; }
  .page > .grid > .col-center > :nth-child(3) { animation-delay: 100ms; }
  .page > .grid > .col-center > :nth-child(4) { animation-delay: 150ms; }
  .page > .grid > .col-center > :nth-child(5) { animation-delay: 200ms; }
  .page > .grid > .col-center > :nth-child(6) { animation-delay: 250ms; }
  .page > .grid > .col-center > :nth-child(7) { animation-delay: 300ms; }
  .page > .grid > .col-center > #post-list > .post-card:nth-child(1) { animation-delay: 180ms; }
  .page > .grid > .col-center > #post-list > .post-card:nth-child(2) { animation-delay: 240ms; }
  .page > .grid > .col-center > #post-list > .post-card:nth-child(3) { animation-delay: 300ms; }
  .page > .grid > .col-center > #post-list > .post-card:nth-child(4) { animation-delay: 360ms; }
  .page > .grid > .col-center > #post-list > .post-card:nth-child(5) { animation-delay: 420ms; }
  .page > .grid > .col-right > * { animation-delay: 160ms; }
  /* Rows in the Messages list follow their card in. */
  .conversation-list > .conversation-item:nth-child(-n+8) { animation: fc-rise 0.5s var(--ease-out) backwards; }
  .conversation-list > .conversation-item:nth-child(1) { animation-delay: 60ms; }
  .conversation-list > .conversation-item:nth-child(2) { animation-delay: 110ms; }
  .conversation-list > .conversation-item:nth-child(3) { animation-delay: 160ms; }
  .conversation-list > .conversation-item:nth-child(4) { animation-delay: 210ms; }
  .conversation-list > .conversation-item:nth-child(5) { animation-delay: 260ms; }
  .conversation-list > .conversation-item:nth-child(6) { animation-delay: 310ms; }
  .conversation-list > .conversation-item:nth-child(7) { animation-delay: 360ms; }
  .conversation-list > .conversation-item:nth-child(8) { animation-delay: 410ms; }
}
@media (prefers-reduced-motion: reduce) {
  .story-ring, .empty-icon { animation: none !important; }
}

/* ---- Phones: the tab bar ----
   The active tab's icon sits in a soft blue pill and is tinted in; tapping
   another tab moves the pill there straight away (main.js, initTabbar),
   before the next page arrives. */
@media (max-width: 960px) {
  .tabbar { padding-top: 7px; box-shadow: 0 -8px 24px -18px rgba(20, 30, 60, 0.35); border-top-color: var(--hairline); }
  html.dark .tabbar { border-top-color: var(--border); }
  .tab-item { gap: 4px; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
  .tab-icon { isolation: isolate; display: flex; align-items: center; justify-content: center; }
  .tab-icon::before {
    content: ""; position: absolute; z-index: -1; inset: -4px -17px; border-radius: 999px;
    background: var(--accent-soft); opacity: 0; scale: 0.4 0.8;
    transition: opacity 0.2s ease, scale 0.45s var(--ease-spring);
  }
  .tab-item.active .tab-icon::before { opacity: 1; scale: 1; }
  .tab-item .ico { transition: fill 0.2s ease; }
  .tab-item.active .ico { fill: color-mix(in srgb, currentColor 16%, transparent); }
  .tab-item.active { font-weight: 700; }
  body.clips-page .tab-icon::before { background: rgba(255, 255, 255, 0.16); }
  .composer-post { padding: 8px 18px; }
  .back-link { margin-bottom: 8px; }
}

/* ---- Rebuild: page details ---- */
.btn-icon { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn-icon .ico { width: 16px; height: 16px; stroke-width: 2.4; }
.di-block { --di: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m5.6 5.6 12.8 12.8'/%3E%3C/svg%3E"); }

/* Explore: the Cords card is a blue feature card with a tiny live map. */
.cords-teaser {
  position: relative; overflow: hidden; gap: 14px; padding: 16px 16px 16px 14px; color: #fff; border: 0;
  background: linear-gradient(135deg, #6f9cdb 0%, #4f7cba 48%, #375b95 100%);
  box-shadow: 0 16px 32px -18px rgba(47, 85, 144, 0.85);
}
html.dark .cords-teaser { background: linear-gradient(135deg, #5a86c4 0%, #3f67a6 50%, #2c4a7d 100%); }
.cords-teaser::before {
  content: ""; position: absolute; inset: -40% -10% auto auto; width: 70%; height: 160%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.22), transparent);
}
.cords-teaser:hover { border-color: transparent; }
.cords-teaser-art { position: relative; flex-shrink: 0; width: 92px; }
.cords-teaser-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.tz-cord { fill: none; stroke: rgba(255, 255, 255, 0.8); stroke-width: 3; stroke-linecap: round; }
.tz-thin { stroke-width: 1.6; stroke-dasharray: 2 4; opacity: 0.6; }
.tz-flow { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 2 16; animation: tz-flow 1.5s linear infinite; }
.tz-slow { animation-duration: 2.3s; }
@keyframes tz-flow { to { stroke-dashoffset: -18; } }
.tz-friend { fill: #fff; }
.tz-dim { fill: rgba(255, 255, 255, 0.55); }
.tz-me { fill: #fff; stroke: rgba(255, 255, 255, 0.35); stroke-width: 7; }
.cords-teaser-text { position: relative; }
.cords-teaser-text strong { font-size: 17px; letter-spacing: -0.01em; }
.cords-teaser-text .small { color: rgba(255, 255, 255, 0.86); line-height: 1.4; }
.cords-teaser-go {
  position: relative; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.18);
}
.cords-teaser-go .ico { width: 18px; height: 18px; }
@media (max-width: 380px) { .cords-teaser-art { width: 72px; } }

/* Explore: friends as a grid of picture tiles. */
.friends-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.friends-grid .user-tile { flex-direction: column; justify-content: center; text-align: center; gap: 8px; padding: 14px 6px 12px; min-width: 0; }
.friends-grid .user-tile > div { min-width: 0; max-width: 100%; }
.friends-grid .user-tile .avatar-md { width: 60px; height: 60px; font-size: 24px; }
.friends-grid .user-tile .avatar-wrap .presence-dot { right: 1px; bottom: 1px; }
.friends-grid .post-username { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; overflow-wrap: anywhere; }
.suggest-row .btn-icon { padding: 7px 12px 7px 10px; }

/* Profile: the picture floats on a soft shadow; the numbers sit in a tray. */
.profile-avatar .avatar-xl { box-shadow: 0 12px 28px -12px rgba(20, 30, 60, 0.55); }
/* The parallax (initCoverParallax) moves the photo inside its frame, so
   the frame clips it; otherwise it slid down over the name and buttons. */
.profile-cover { overflow: hidden; }
/* The photo is 48px taller and starts 48px up, so as it moves down
   while you scroll there's never an empty strip above it. */
.profile-cover > img, .profile-cover > video, .profile-cover > .cover-slideshow { height: calc(100% + 48px); translate: 0 -48px; }

/* A slideshow cover: the slides sit on top of each other and crossfade. */
.cover-slideshow { position: relative; overflow: hidden; }
.cover-slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; transition: opacity 0.9s var(--ease-out);
}
.cover-slide.is-active { opacity: 1; }
.profile-stats { margin-top: 16px; padding: 12px 4px; border-top: 0; border-radius: 16px; background: var(--surface-2); }
.profile-stat + .profile-stat { border-left: 1px solid var(--border); }
.profile-stat strong { font-variant-numeric: tabular-nums; }
.profile-tab { transition: color var(--dur) ease; }
.profile-tabs.js-tabs .profile-tab-indicator { height: 3px; border-radius: 3px 3px 0 0; }
.profile-more .post-menu-btn { background: var(--card-bg); }

/* Post page: the comment box and comments. */
.comment .avatar-sm { box-shadow: 0 0 0 2px var(--card-bg); }
.comment-form input[type=text] { border-radius: 999px; }

/* Search: the box on the Search page. */
.page-search-form input[type=text] { border-radius: 999px; padding-left: 18px; }
.toast a { -webkit-user-drag: none; }
@media (max-width: 960px) {
  /* Group chat: Invite / Members / ⋮ as one row of pills under the name
     (an older phone rule stacked them in a column on the right). */
  .chat-header .group-header-actions { flex-direction: row; align-items: center; }
}
@media (max-width: 600px) {
  /* The pills sit on the left there, so a panel anchored to its pill's
     right edge ran off the card. Anchor it to the whole header instead. */
  .chat-header .group-header-actions details { position: static; }
  .chat-header .group-invite-panel { left: 12px; right: 12px; width: auto; margin-top: 0; }
}

/* ---- Photo viewer (main.js, initPhotoViewer) ---- */
html.pv-open { overflow: hidden; }
.post-image img, .bubble-media img { cursor: zoom-in; }
.photo-viewer { position: fixed; inset: 0; z-index: 900; touch-action: none; }
.pv-backdrop { position: absolute; inset: 0; background: rgba(6, 9, 16, 0.94); }
.pv-img { position: absolute; display: block; object-fit: contain; cursor: zoom-out; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.pv-close {
  position: absolute; top: calc(env(safe-area-inset-top) + 12px); right: 12px; width: 44px; height: 44px; padding: 0;
  display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, 0.16); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.pv-close .ico { width: 22px; height: 22px; }

/* ---- Login / sign-up: the logo pops in; dialogs dim the page softly ---- */
@keyframes fc-logo-in { from { opacity: 0; scale: 0.5; rotate: -25deg; } }
@media (prefers-reduced-motion: no-preference) {
  .auth-card .auth-logo { animation: fc-logo-in 0.7s var(--ease-spring) 0.15s backwards; }
}
.auth-card .auth-logo { border-radius: 16px; box-shadow: 0 10px 24px -10px rgba(47, 85, 144, 0.7); }
dialog::backdrop { background: rgba(10, 14, 24, 0.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
dialog.card { border-radius: 22px; box-shadow: var(--shadow-3); }
@media (max-width: 960px) {
  /* The phone stories row: the grid gap is enough space below it. */
  .story-tray-mobile { margin-bottom: 0; }
}

/* ---- Security: new-login alerts (🔔 panel + Settings → Devices) and the
   admin password step (login_admin.html) ---- */
.notif-login-icon, .login-alert-icon, .admin-step-icon {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  border-radius: 50%; background: var(--accent-soft); color: var(--accent-dark);
}
.notif-login-icon .ico, .login-alert-icon .ico { width: 18px; height: 18px; }
.login-alert-icon { width: 40px; height: 40px; }
.login-alerts { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.login-alert {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px;
  border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--hairline);
}
.login-alert-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.login-alert-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.admin-step-icon { display: flex; width: 56px; height: 56px; margin: 0 auto 8px; }
.admin-step-icon .ico { width: 26px; height: 26px; }
.admin-step-card code { overflow-wrap: anywhere; }

/* ---- Chain stories (chains.html, chain.html, chain_new.html) ---- */
.chains-lead { margin: 0 0 14px; }
.chain-back { display: inline-block; margin-bottom: 4px; }
.chain-start { margin-bottom: 14px; }
.chain-start .ico, .chain-submit .ico, .chain-actions .ico { width: 16px; height: 16px; }
.chain-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 0; color: var(--text); text-decoration: none;
  border-top: 1px solid var(--hairline);
}
.card-title + .chain-row { border-top: 0; }
.chain-row:hover strong { color: var(--accent); }
.chain-row-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.chain-writers { display: flex; flex-shrink: 0; min-width: 30px; }
.chain-writers > * + * { margin-left: -10px; }
.chain-writers > * { box-shadow: 0 0 0 2px var(--card-bg); border-radius: 50%; }
.chain-new {
  display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700;
  background: var(--accent); color: #fff;
}

/* Writing: labels, the length choice and the friend picker. */
.chain-form { display: flex; flex-direction: column; gap: 8px; }
.chain-form textarea, .chain-form input[type=text] { width: 100%; }
.chain-label { display: block; font-weight: 700; margin-top: 6px; }
.chain-length, .chain-friends { border: 0; padding: 0; margin: 6px 0 0; min-width: 0; }
.chain-length-options { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chain-length-options label { position: relative; }
.chain-length-options input, .chain-friend input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chain-length-options span {
  display: inline-block; padding: 8px 14px; border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 600;
  background: var(--surface-2); border: 1px solid var(--hairline);
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease, scale 0.4s var(--ease-spring);
}
.chain-length-options input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.chain-length-options input:focus-visible + span, .chain-friend input:focus-visible ~ .avatar-wrap { outline: 2px solid var(--accent); outline-offset: 2px; }
.chain-friends-legend { font-weight: 700; padding: 0; margin-bottom: 6px; }
.chain-friends-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px;
  max-height: 290px; overflow-y: auto; padding: 2px;
}
.chain-friend {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px;
  border-radius: var(--r-md); background: var(--surface-2); border: 2px solid transparent; cursor: pointer; min-width: 0;
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease, scale 0.4s var(--ease-spring);
}
.chain-friend:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.chain-friend:active, .chain-length-options label:active span { scale: 0.95; transition-duration: 0.1s; }
.chain-friend-name { font-size: 13px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chain-submit { align-self: flex-start; margin-top: 8px; }

/* Progress: one dot per line. */
.chain-progress { display: flex; gap: 6px; margin: -4px 0 14px; }
.chain-dot { flex: 1; max-width: 42px; height: 6px; border-radius: 3px; background: var(--surface-2); border: 1px solid var(--hairline); }
.chain-dot.is-done { background: var(--accent); border-color: var(--accent); }
.chain-dot.is-now { background: var(--accent-soft); border-color: var(--accent); }

/* Your turn: blurred bars for the hidden lines, then the line before yours. */
.chain-hidden { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.chain-hidden-line {
  display: block; height: 12px; width: 88%; border-radius: 6px; filter: blur(2px);
  background: linear-gradient(90deg, var(--surface-2), var(--hairline), var(--surface-2));
}
.chain-hidden-line:nth-child(2n) { width: 70%; }
.chain-previous { padding: 12px 14px; border-radius: var(--r-md); background: var(--accent-soft); margin-bottom: 8px; }
.chain-previous-who { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.chain-previous .chain-line-text { margin: 8px 0 0; }
.chain-turn-title { font-weight: 700; margin: 0; }
.chain-skip { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 12px; }

/* The story. */
.chain-line-text { margin: 4px 0 0; font-size: 17px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; }
.chain-story { display: flex; flex-direction: column; gap: 16px; }
.chain-line-who { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text-muted); }
a.chain-line-who:hover { color: var(--accent); }
.chain-waiting .chain-line .chain-hidden-line { margin: 6px 0; }
.chain-line-mine { padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); }
.chain-wait, .chain-end { margin: 0; color: var(--text-muted); font-size: 14px; }
.chain-end { font-style: italic; text-align: center; }
.chain-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
@keyframes chain-line-in { from { opacity: 0; translate: 0 10px; scale: 0.98; } }
@media (prefers-reduced-motion: no-preference) {
  /* The first time a finished story is opened, its lines appear one by one. */
  .chain-story.is-reveal > * { animation: chain-line-in 0.6s var(--ease-out) backwards; animation-delay: calc(0.35s + var(--i, 0) * 0.7s); }
}

/* Explore: the Chain stories card, with a little page whose middle lines are hidden. */
.chains-teaser { display: flex; align-items: center; gap: 14px; color: var(--text); text-decoration: none; }
.chains-teaser:hover { border-color: var(--accent); }
.chains-teaser-art {
  flex-shrink: 0; width: 72px; display: flex; flex-direction: column; gap: 6px; padding: 10px 9px;
  border-radius: 12px; background: var(--accent-soft); rotate: -4deg;
}
.ct-line { display: block; height: 5px; border-radius: 3px; background: var(--accent); }
.ct-hidden { background: var(--accent); opacity: 0.35; filter: blur(1.5px); }
.ct-short { width: 60%; }
.chains-teaser-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.chains-teaser-text strong { font-size: 17px; letter-spacing: -0.01em; }
.chains-teaser-text .small { line-height: 1.4; }
.chains-teaser-go {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft);
}
.chains-teaser-go .ico { width: 18px; height: 18px; }
/* .card label (the form-field label style) would otherwise stack these. */
.card .chain-friend { display: flex; margin: 0; font-size: inherit; font-weight: inherit; }
.card .chain-length-options label { display: block; margin: 0; }
.card .chain-label { font-size: 14px; font-weight: 700; margin: 10px 0 2px; }
.card .chain-label:first-of-type { margin-top: 0; }
.chain-friend .avatar-wrap { position: relative; display: inline-flex; }
.chain-start, .chain-submit, .chain-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }

/* ---------- AI moderation (admin_moderation.html) ---------- */
.mod-content { margin: 4px 0 6px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--surface-2); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
.mod-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.mod-tag.mod-warn { background: rgba(245, 158, 11, 0.15); color: #b45309; }
html.dark .mod-tag.mod-warn { color: #fbbf24; }
.mod-tag.mod-self_harm { background: var(--surface-2); color: var(--accent); }
.mod-tag.mod-block { background: var(--surface-2); color: var(--text-muted); }
.mod-tag.mod-review { background: var(--surface-2); color: var(--accent); }
.mod-row + .mod-row { margin-top: 2px; }

/* Continue with Google (_google_button.html, Settings → Google): Google's
   white button with the coloured G, then an "or" line before the form. */
.btn-google {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: #fff; color: #1f1f1f; border: 1px solid #dadce0; font-weight: 600;
  text-decoration: none;
}
.auth-card a.btn-google { color: #1f1f1f; }
.btn-google .google-g { flex: none; }
@media (hover: hover) { .btn-google:hover { background: #f7f8fa; box-shadow: var(--shadow); } }
html.dark .btn-google, html.dark .auth-card a.btn-google { background: #131314; color: #e3e3e3; border-color: #8e918f; }
@media (hover: hover) { html.dark .btn-google:hover { background: #1f2023; } }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 16px 0 4px; color: var(--text-muted); font-size: 0.85rem; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* ======================================================================
   ux-12 "Bigger and easier" (computers only): the menu is a sidebar on
   the left (big links and a New post button), the search box is wide, and
   text, avatars, buttons and the post box are a size larger.
   Only for logged-in pages (body.has-nav) at computer width: the welcome,
   login and sign-up pages and every phone keep the look from before
   (the owner asked for that after 2.1.0). Still FlyCord blue.
   ====================================================================== */
.app-shell { width: 100%; }
.sidebar { display: none; }

@media (min-width: 961px) {
  /* ---- Top bar: logo, a big search box in the middle, icons on the right ---- */
  .has-nav .navbar-inner { max-width: 1400px; padding: 12px 24px; gap: 20px; }
  .has-nav .brand-icon { width: 36px; height: 36px; border-radius: 11px; }
  .has-nav .brand-name { font-size: 23px; }
  .has-nav .search-form { flex: 1 1 auto; max-width: 560px; margin: 0 auto; padding: 11px 18px; gap: 10px; background: var(--surface-2); border-color: transparent; }
  .has-nav .search-form .ico { width: 20px; height: 20px; }
  .has-nav .search-form input { font-size: 16px; }
  .has-nav .navbar-right { gap: 8px; margin-left: 0; }
  .has-nav .navbar-right .icon-btn { width: 46px; height: 46px; border-radius: 14px; }
  .has-nav .navbar-right .icon-btn .ico { width: 24px; height: 24px; }
  .has-nav .user-chip .avatar-sm { width: 40px; height: 40px; font-size: 18px; }
  .has-nav .user-chip .username { font-size: 15px; font-weight: 700; }
  .has-nav .user-menu-panel { min-width: 240px; }
  .has-nav .user-menu-item { padding: 12px 14px; font-size: 15.5px; }

  /* ---- The page: sidebar + content ---- */
  .app-shell.has-sidebar {
    display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 12px;
    max-width: 1400px; margin: 0 auto; padding-left: 16px;
  }
  .app-shell.has-sidebar > .page { max-width: none; margin: 0; padding-left: 8px; }
  .sidebar {
    display: flex; flex-direction: column; gap: 14px;
    position: sticky; top: 71px; height: calc(100vh - 71px); overflow-y: auto; scrollbar-width: none;
    padding: 20px 4px 24px;
  }
  .sidebar::-webkit-scrollbar { display: none; }
  .nav-links.nav-vertical { flex-direction: column; flex: 0 0 auto; gap: 4px; overflow: visible; }
  .nav-vertical .nav-link {
    gap: 16px; padding: 13px 18px; border-radius: 16px;
    font-size: 17px; font-weight: 600; color: var(--text);
  }
  .nav-vertical .nav-link .ico { width: 26px; height: 26px; }
  .nav-vertical .nav-link.active { font-weight: 800; }
  .nav-vertical .nav-link .unread-badge { margin-left: auto; }
  .nav-vertical .nav-pill { border-radius: 16px; }

  /* Pages with a right column (Home, Explore): a wide middle column beside it. */
  .has-sidebar .grid:not(.grid-single) { grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; max-width: 1080px; }
  .has-sidebar .grid:not(.grid-single) > .col-center { grid-column: 1; }
  .has-sidebar .grid:not(.grid-single) > .col-right { grid-column: 2; top: 92px; }
  .has-sidebar .grid-single { max-width: 720px; }

  /* ---- Bigger (logged-in pages only) ---- */
  .has-sidebar .btn { min-height: 44px; padding: 11px 22px; font-size: 15.5px; border-radius: 14px; }
  .has-sidebar .btn-small { min-height: 38px; padding: 8px 16px; font-size: 14.5px; border-radius: 12px; }
  .has-sidebar .btn.sidebar-post {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 54px; border-radius: 999px; font-size: 17px; font-weight: 800; margin: 4px 6px 0;
  }
  .sidebar-post .ico { width: 24px; height: 24px; stroke-width: 2.4; }
  .has-sidebar .card-title { font-size: 1.2rem; }
  .has-sidebar .page-title { font-size: 1.9rem; }
  .has-sidebar :is(textarea, input[type=text], input[type=password], input[type=email], input[type=date], input[type=number], select) { font-size: 16px; }
  .has-sidebar .post-header .avatar-sm { width: 46px; height: 46px; font-size: 20px; }
  .has-sidebar .post-header .post-username { font-size: 16.5px; }
  .has-sidebar .post-content { font-size: 17px; line-height: 1.55; }
  .has-sidebar :is(.post-action, .like-btn) { min-height: 46px; padding: 10px 12px; font-size: 15px; }
  .has-sidebar :is(.post-action, .like-outline) .ico { width: 26px; height: 26px; }
  .has-sidebar .post-time { white-space: nowrap; }
  .has-sidebar .tabs-segmented .tab { padding: 10px 24px; font-size: 15.5px; }
  .has-sidebar .chat-bubble { font-size: 16px; }
  .has-sidebar .conversation-item .avatar-md { width: 58px; height: 58px; }
  .has-sidebar .post-card { padding: 20px 24px 12px; }
  .has-sidebar .post-card :is(.post-image, .post-video, .post-game) { margin-left: -24px; margin-right: -24px; }
  /* Stories: bigger circles. */
  .has-sidebar .story-item { width: 90px; }
  .has-sidebar .avatar-story { width: 78px; height: 78px; }
  .has-sidebar .story-add-badge { top: 62px; left: 62px; width: 26px; height: 26px; font-size: 18px; }
  .has-sidebar .story-name { max-width: 90px; font-size: 14px; }
  /* Profiles: a bigger name and numbers. */
  .has-sidebar .profile-name { font-size: 32px; }
  .has-sidebar .profile-stat strong { font-size: 24px; }
  .has-sidebar .profile-stat span { font-size: 14px; }
  /* Chat: the box fills the screen, with a bigger header. */
  .has-sidebar .chat-card { height: calc(100vh - 190px); min-height: 480px; }
  .has-sidebar .chat-header { padding: 16px 20px; gap: 14px; }
  .has-sidebar .chat-header .avatar-md { width: 52px; height: 52px; font-size: 22px; }
  .has-sidebar .chat-header-info :is(strong, a) { font-size: 17px; }

  /* ---- The post box: bigger, with big coloured Photo / Video / Poll buttons ---- */
  .has-sidebar .composer { padding: 18px 20px 16px; }
  .has-sidebar .composer-main { gap: 14px; }
  .has-sidebar .composer-main .avatar-md { width: 50px; height: 50px; font-size: 22px; }
  .has-sidebar .composer-main textarea { min-height: 54px; padding: 14px 20px; border-radius: 27px; font-size: 17px; }
  .has-sidebar .composer.is-open .composer-main textarea { min-height: 120px; }
  .has-sidebar .composer .composer-footer { margin-top: 14px; padding-left: 64px; gap: 10px; }
  .has-sidebar .composer :is(.composer-poll, .image-preview) { margin-left: 64px; }
  .has-sidebar .composer-actions { gap: 8px; }
  .has-sidebar .composer-tool { padding: 10px 16px; font-size: 15px; background: var(--surface-2); }
  .has-sidebar .composer-tool .ico { width: 22px; height: 22px; }
  .has-sidebar .btn.composer-post { min-height: 46px; padding: 11px 30px; font-size: 16px; border-radius: 999px; }
}
/* Smaller computers and tablets in landscape: the sidebar is icons only. */
@media (min-width: 961px) and (max-width: 1239px) {
  .app-shell.has-sidebar { grid-template-columns: 84px minmax(0, 1fr); }
  .nav-vertical .nav-link { position: relative; justify-content: center; padding: 14px 0; }
  .nav-vertical .nav-link > span:not(.unread-badge) { display: none; }
  .nav-vertical .nav-link .unread-badge { position: absolute; top: 4px; right: 10px; margin: 0; }
  .has-sidebar .btn.sidebar-post { width: 56px; height: 56px; min-height: 0; padding: 0; margin: 4px auto 0; border-radius: 50%; }
  .sidebar-post span { display: none; }
  .has-sidebar .grid:not(.grid-single) { grid-template-columns: minmax(0, 1fr) 290px; }
}
@media (min-width: 961px) and (max-width: 1060px) {
  .has-sidebar .grid:not(.grid-single) { grid-template-columns: minmax(0, 1fr); }
  .has-sidebar .grid:not(.grid-single) > .col-right { display: none; }
}

/* ---- Messages from the server: toasts, like notifications ----
   The red / green .flash bars are turned into toasts in the corner by
   main.js (initFlashToasts); html.js hides the bars so they never blink in
   first. Without JS the bars show as before. */
.js .flash-wrap { display: none; }
.toast { padding: 12px 10px 12px 14px; border-radius: 18px; }
.toast-text { font-size: 15px; line-height: 1.4; }
.toast-icon { width: 34px; height: 34px; font-size: 17px; }
.toast-error, .toast-success { border-left-width: 4px; }
html .toast.toast-error { border-left-color: #ef4444; }
html .toast.toast-success { border-left-color: #22c55e; }
.toast-error .toast-icon { background: #fee2e2; }
.toast-success .toast-icon { background: #dcfce7; }
html.dark .toast-error .toast-icon { background: #3a1616; }
html.dark .toast-success .toast-icon { background: #14311f; }
.toast-error .toast-timer { background: #ef4444; }
.toast-success .toast-timer { background: #22c55e; }

/* ======================================================================
   Aero day (AERO_DAY in app.py): for one day FlyCord looks like 2007,
   "Frutiger Aero": a sunny sky with green hills and floating bubbles,
   glass panels with a shine across the top, glossy gel buttons. Everything
   is under html.aero, so the normal look is untouched the rest of the year.
   Dark mode gets Vista's black glass under a night sky.
   ====================================================================== */
html.aero {
  --bg: #d6eeff;
  --card-bg: #fbfdff;
  --border: #b9d6ee;
  --hairline: rgba(120, 175, 220, 0.55);
  --text: #0f2a44;
  --text-muted: #4f6f8c;
  --accent: #1f86d6;
  --accent-dark: #0f63a8;
  --accent-soft: #dcefff;
  --surface-2: #eef7ff;
  --surface-hover: #e2f1ff;
  --brand-grad: linear-gradient(180deg, #8fd3ff 0%, #42a6ee 47%, #1d82d4 53%, #39a3f0 100%);
  --brand-grad-hover: linear-gradient(180deg, #a6ddff 0%, #55b2f3 47%, #2a8fdf 53%, #4cb0f5 100%);
  --navbar-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(214, 238, 255, 0.6) 51%, rgba(240, 249, 255, 0.75) 100%);
  --glass: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(246, 252, 255, 0.86) 45%, rgba(236, 247, 255, 0.82) 100%);
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 2px 4px rgba(0, 60, 120, 0.08), 0 10px 26px -12px rgba(0, 70, 140, 0.35);
  --shadow-2: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 4px 8px rgba(0, 60, 120, 0.1), 0 18px 40px -14px rgba(0, 70, 140, 0.45);
  --shadow-3: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 8px 18px rgba(0, 60, 120, 0.14), 0 30px 60px -18px rgba(0, 70, 140, 0.5);
  --shadow-accent: 0 1px 0 rgba(255, 255, 255, 0.75) inset, 0 -1px 0 rgba(0, 60, 130, 0.25) inset, 0 3px 8px -2px rgba(0, 90, 170, 0.5);
  --glow: none;
  background: #bfe4ff;
}
html.aero.dark {
  --bg: #061426;
  --card-bg: #10233b;
  --border: #24476b;
  --hairline: rgba(130, 195, 255, 0.22);
  --text: #e6f3ff;
  --text-muted: #9bb9d4;
  --accent: #4fb3ff;
  --accent-dark: #8dcfff;
  --accent-soft: #143456;
  --surface-2: #0c1d33;
  --surface-hover: #12294a;
  --navbar-bg: linear-gradient(180deg, rgba(70, 90, 115, 0.8) 0%, rgba(30, 42, 58, 0.78) 50%, rgba(8, 14, 24, 0.85) 51%, rgba(18, 30, 46, 0.85) 100%);
  --glass: linear-gradient(180deg, rgba(36, 62, 96, 0.9) 0%, rgba(16, 34, 58, 0.86) 45%, rgba(10, 26, 46, 0.86) 100%);
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 10px 26px -12px rgba(0, 0, 0, 0.8);
  --shadow-2: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 18px 40px -14px rgba(0, 0, 0, 0.85);
  --shadow-3: 0 1px 0 rgba(255, 255, 255, 0.14) inset, 0 30px 60px -18px rgba(0, 0, 0, 0.9);
  background: #061426;
}
html.aero body {
  background: transparent;
  font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Lucida Grande", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}
/* The sky: sun top right, soft clouds, green hills along the bottom. */
html.aero body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(260px 260px at 86% 6%, rgba(255, 255, 255, 0.95), rgba(255, 252, 220, 0.5) 35%, transparent 70%),
    radial-gradient(520px 140px at 22% 18%, rgba(255, 255, 255, 0.75), transparent 70%),
    radial-gradient(420px 110px at 64% 30%, rgba(255, 255, 255, 0.55), transparent 70%),
    radial-gradient(130% 42% at 18% 112%, #3fae2f 0%, #79cf3e 38%, rgba(150, 220, 90, 0.75) 55%, transparent 72%),
    radial-gradient(120% 38% at 92% 116%, #2e9a3a 0%, #6cc742 40%, rgba(140, 215, 90, 0.6) 58%, transparent 74%),
    linear-gradient(180deg, #2d8fe0 0%, #61b4f2 28%, #a9dcff 58%, #dff4ff 78%, #eefbe6 100%);
}
html.aero.dark body::before {
  background:
    radial-gradient(70% 40% at 20% 8%, rgba(40, 200, 170, 0.28), transparent 70%),
    radial-gradient(60% 35% at 80% 18%, rgba(60, 120, 255, 0.3), transparent 70%),
    radial-gradient(130% 40% at 18% 114%, #0d4a3a 0%, rgba(14, 80, 60, 0.7) 45%, transparent 72%),
    radial-gradient(120% 36% at 92% 118%, #0b3d52 0%, rgba(12, 70, 95, 0.6) 48%, transparent 74%),
    linear-gradient(180deg, #020a18 0%, #071a35 45%, #0a2748 80%, #0b2e45 100%);
}
/* Bubbles drifting up behind everything (a 200vh strip that slides up one
   screen and starts again; its bubbles repeat every 100vh, so it's seamless). */
@keyframes aero-drift { from { translate: 0 0; } to { translate: 0 -100vh; } }
html.aero body::after {
  content: ""; position: fixed; left: 0; right: 0; top: 0; height: 200vh; z-index: -1; pointer-events: none;
  --b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3CradialGradient id='g' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.08'/%3E%3Cstop offset='.7' stop-color='%23bfe8ff' stop-opacity='.16'/%3E%3Cstop offset='.93' stop-color='%23fff' stop-opacity='.7'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='49' fill='url(%23g)'/%3E%3Cellipse cx='34' cy='28' rx='16' ry='9' transform='rotate(-35 34 28)' fill='%23fff' fill-opacity='.85'/%3E%3Ccircle cx='70' cy='74' r='5' fill='%23fff' fill-opacity='.35'/%3E%3C/svg%3E");
  background-image: var(--b), var(--b), var(--b), var(--b), var(--b), var(--b), var(--b), var(--b), var(--b), var(--b), var(--b), var(--b);
  background-repeat: no-repeat;
  background-size: 90px 90px, 46px 46px, 130px 130px, 60px 60px, 34px 34px, 76px 76px, 90px 90px, 46px 46px, 130px 130px, 60px 60px, 34px 34px, 76px 76px;
  background-position: 6% 70vh, 18% 20vh, 78% 55vh, 91% 10vh, 52% 82vh, 36% 40vh, 6% 170vh, 18% 120vh, 78% 155vh, 91% 110vh, 52% 182vh, 36% 140vh;
  opacity: 0.85;
  animation: aero-drift 40s linear infinite;
}
html.aero.dark body::after { opacity: 0.35; }
@media (prefers-reduced-motion: reduce) { html.aero body::after { animation: none; } }

/* Glass panels: cards, menus, the notifications panel, toasts. */
html.aero .card, html.aero .tabs-segmented {
  background: var(--glass);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow);
}
html.aero .dropdown-panel, html.aero .user-menu-panel, html.aero .notif-panel, html.aero .toast, html.aero .new-group-form {
  background: var(--glass);
  border: 1px solid var(--hairline);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
}
@media (hover: hover) {
  html.aero .post-card:hover { border-color: rgba(80, 170, 240, 0.7); box-shadow: var(--shadow-2), 0 0 0 3px rgba(120, 200, 255, 0.25); }
}

/* Navbar and phone tab bar: one strip of glass with the Vista shine line. */
html.aero .navbar, html.aero .tabbar {
  background: var(--navbar-bg);
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 0 rgba(0, 70, 140, 0.18), 0 6px 22px -10px rgba(0, 70, 140, 0.45);
}
html.aero .tabbar { box-shadow: 0 -1px 0 rgba(0, 70, 140, 0.18), 0 -6px 22px -10px rgba(0, 70, 140, 0.45); }
html.aero.dark .navbar, html.aero.dark .tabbar { border-color: rgba(255, 255, 255, 0.14); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.6), 0 6px 22px -10px rgba(0, 0, 0, 0.8); }
html.aero body.clips-page .tabbar { background: linear-gradient(180deg, #2a2f38 0%, #111 50%, #000 51%, #0b0b0b 100%); }
html.aero .brand-icon { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7), 0 4px 12px -2px rgba(0, 90, 170, 0.6); }
html.aero .nav-pill, html.aero .nav-link.active, html.aero .nav-link:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(200, 232, 255, 0.85) 50%, rgba(170, 215, 250, 0.85) 51%, rgba(210, 238, 255, 0.9));
  box-shadow: 0 0 0 1px rgba(90, 165, 225, 0.55) inset, 0 1px 0 #fff inset;
}
html.aero .nav-links.has-pill .nav-link, html.aero .nav-links.has-pill .nav-link:hover, html.aero .nav-links.has-pill .nav-link.active { background: transparent; box-shadow: none; }
html.aero.dark .nav-pill, html.aero.dark .nav-link.active, html.aero.dark .nav-link:hover {
  background: linear-gradient(180deg, rgba(110, 160, 220, 0.45), rgba(40, 90, 150, 0.45) 50%, rgba(20, 60, 110, 0.5) 51%, rgba(50, 110, 180, 0.45));
  box-shadow: 0 0 0 1px rgba(120, 190, 255, 0.35) inset;
}
html.aero .tab-item.active .tab-icon::before { background: linear-gradient(180deg, #e9f6ff, #bfe2ff 50%, #a6d5fb 51%, #d4ecff); box-shadow: 0 0 0 1px rgba(90, 165, 225, 0.5) inset; }
html.aero.dark .tab-item.active .tab-icon::before { background: linear-gradient(180deg, rgba(110, 160, 220, 0.5), rgba(30, 80, 140, 0.5)); }

/* Gel buttons: a pill with the light on its top half. */
html.aero .btn-primary, html.aero .tab-active, html.aero .tabs-segmented .tab-active, html.aero .settings-chip.is-current, html.aero .chat-send {
  background: var(--brand-grad);
  color: #fff;
  border: 1px solid #1668ad;
  text-shadow: 0 -1px 0 rgba(0, 50, 110, 0.45);
  box-shadow: var(--shadow-accent);
}
html.aero .btn-primary:hover, html.aero .chat-send:hover { background: var(--brand-grad-hover); box-shadow: var(--shadow-accent), 0 0 14px rgba(90, 190, 255, 0.7); }
html.aero .btn { border-radius: 999px; }
html.aero .btn-secondary, html.aero .settings-chip:not(.is-current), html.aero .composer-tool {
  background: linear-gradient(180deg, #ffffff 0%, #f1f7fc 48%, #dfeaf4 52%, #f3f8fc 100%);
  border: 1px solid #a7c3dc;
  color: #164d7c;
  box-shadow: 0 1px 0 #fff inset, 0 1px 3px rgba(0, 60, 120, 0.15);
}
html.aero .btn-secondary:hover, html.aero .settings-chip:not(.is-current):hover, html.aero .composer-tool:hover {
  background: linear-gradient(180deg, #ffffff 0%, #e6f4ff 48%, #c9e5fb 52%, #e3f2ff 100%);
  border-color: #6fb0e4;
}
html.aero.dark .btn-secondary, html.aero.dark .settings-chip:not(.is-current), html.aero.dark .composer-tool {
  background: linear-gradient(180deg, #3a4d66 0%, #22344b 48%, #142439 52%, #1c2f47 100%);
  border-color: #3a5c82;
  color: #dcefff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset;
}
html.aero.dark .btn-secondary:hover, html.aero.dark .settings-chip:not(.is-current):hover, html.aero.dark .composer-tool:hover { border-color: #5fa8e6; }

/* Fields: white and slightly sunken, with a blue glow when typing. */
html.aero textarea, html.aero input[type=text], html.aero input[type=password], html.aero input[type=email],
html.aero input[type=date], html.aero input[type=number], html.aero select {
  background: #fff;
  border: 1px solid #a9c6de;
  box-shadow: 0 1px 2px rgba(0, 50, 100, 0.15) inset;
}
html.aero textarea:focus, html.aero input:focus, html.aero select:focus {
  border-color: #3a9be6;
  box-shadow: 0 1px 2px rgba(0, 50, 100, 0.12) inset, 0 0 0 3px rgba(80, 180, 255, 0.28), 0 0 12px rgba(80, 180, 255, 0.45);
}
html.aero.dark textarea, html.aero.dark input[type=text], html.aero.dark input[type=password], html.aero.dark input[type=email],
html.aero.dark input[type=date], html.aero.dark input[type=number], html.aero.dark select {
  background: #081a2e; border-color: #2c4f75; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) inset;
}
html.aero .search-form input, html.aero .search-form input:hover, html.aero .search-form input:focus { background: transparent; border-color: transparent; box-shadow: none; }

/* Chat: your bubbles are aqua gel, theirs are white glass. */
html.aero .chat-bubble.mine {
  background: linear-gradient(180deg, #7dccff 0%, #3ea2ee 48%, #2189da 52%, #3aa2ef 100%);
  border: 1px solid #1b72ba;
  text-shadow: 0 -1px 0 rgba(0, 50, 110, 0.35);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 3px 8px -3px rgba(0, 90, 170, 0.6);
}
html.aero .chat-bubble:not(.mine) {
  background: linear-gradient(180deg, #ffffff 0%, #f3f9fe 50%, #e5f1fb 51%, #f4f9fd 100%);
  border: 1px solid #bcd5ea;
  box-shadow: 0 1px 0 #fff inset, 0 2px 6px -3px rgba(0, 60, 120, 0.35);
}
html.aero.dark .chat-bubble:not(.mine) { background: linear-gradient(180deg, #2c4462, #182b44 50%, #10213a 51%, #182c46); border-color: #2f5379; }

/* Story rings turn lime-to-aqua, like an Aero orb. */
html.aero .story-ring:not(.story-ring-seen):not(.story-ring-mine):not(.story-ring-empty) {
  background: conic-gradient(from var(--ring-turn), #b8f060, #4cc93c, #27b4e8, #1f7fd0, #7fe0ff, #b8f060);
}
html.aero .story-ring-mine { background: linear-gradient(180deg, #8fd3ff, #1d82d4); }

/* Covers without a photo, and the Explore feature cards: sky glass. */
html.aero .profile-cover, html.aero .me-cover {
  background: radial-gradient(60% 120% at 80% 0%, rgba(255, 255, 255, 0.9), transparent 60%), linear-gradient(180deg, #4aa6ee, #a8dcff 70%, #8fd66a);
}
html.aero .cords-teaser {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.05) 50%, transparent 51%), linear-gradient(135deg, #3fa9f5 0%, #1f7fd0 55%, #1b5fa8 100%);
  border: 1px solid #1668ad;
}

/* The unread badge and the loading bar get the gloss too. */
html.aero .unread-badge { background: linear-gradient(180deg, #ff8a7a, #e8322a 52%, #c81e18); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 1px 3px rgba(120, 0, 0, 0.4); }
html.aero .nav-progress { background: linear-gradient(90deg, #8ff06a, #27b4e8 50%, #1f7fd0); box-shadow: 0 0 12px rgba(60, 200, 255, 0.8); }
html.aero ::selection { background: rgba(80, 180, 255, 0.35); }