/* Flippy Gallery — styles */
/* Uses the Flippy Win98 palette and typography. */

:root {
  --win98-bg:       #c0c0c0;
  --win98-dark:     #808080;
  --win98-darker:   #404040;
  --win98-title:    #000080;
  --win98-title-fg: #ffffff;
  --accent:         #000080;
  --body-bg:        #a0a0a0;  /* page background under headers/spacers — darker than --win98-bg so foreground cards/windows stand out */
  --tile-bg:        #d4d0c8;
  --tile-hover:     #e2e2e2;
  --text:           #000000;
  --text-dim:       #404040;
  --font:           'MS Sans Serif', 'Microsoft Sans Serif', Tahoma, Arial, sans-serif;
  /* Win98 bevel — matches the Flippy edit page */
  --bevel-ll: #ffffff;
  --bevel-l:  #dfdfdf;
  --bevel-d:  #808080;
  --bevel-dd: #404040;
  --btn-bg:   #c0c0c0;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--body-bg);
  color: #000;
  font-family: 'MS Sans Serif', 'Microsoft Sans Serif', Tahoma, Arial, sans-serif;
  font-size: 11px;
  min-height: 100vh;
}

/* ── Header ── */
.gallery-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--safe-area-top, 0px) 4px 0;
  height: calc(56px + var(--safe-area-top, 0px));
  background: var(--win98-bg);
  border-bottom: 2px solid;
  border-color: #fff #808080 #808080 #fff;
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-logo { display: flex; align-items: center; gap: 10px; color: #000; text-decoration: none; position: relative; }
.header-logo a { color: #000; text-decoration: none; }
.header-title { font-size: 18px; font-weight: bold; letter-spacing: 0.5px; color: #000; }
.header-controls { display: flex; align-items: center; gap: 4px; }

.gallery-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  padding: 6px 16px 12px;
}

.gallery-refresh-btn {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 4px;
  color: #444;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.gallery-refresh-btn:hover { background: #d0d0d0; }
.gallery-refresh-btn:active { background: #bcbcbc; }

#search-input {
  flex: 0 1 260px;
  padding: 4px 8px;
  border: 2px inset var(--win98-bg);
  background: #fff;
  /* >=16px stops iOS/WKWebView from auto-zooming when the field is focused */
  font-size: 16px;
  width: min(260px, 100%);
}

.btn-auth {
  height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  background: var(--btn-bg);
  border: 2px solid;
  border-color: var(--bevel-ll) var(--bevel-d) var(--bevel-d) var(--bevel-ll);
  box-shadow: inset 1px 1px 0 var(--bevel-l), inset -1px -1px 0 var(--bevel-dd);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.btn-auth:active {
  border-color: var(--bevel-d) var(--bevel-ll) var(--bevel-ll) var(--bevel-d);
  box-shadow: inset 1px 1px 0 var(--bevel-dd), inset -1px -1px 0 var(--bevel-l);
}
.btn-auth-sm { font-size: 11px; padding: 2px 6px; }

#user-info { position: relative; display: flex; align-items: center; }
#user-avatar { width: 28px; height: 28px; border-radius: 0; border: 1px solid var(--bevel-d); object-fit: cover; background: var(--btn-bg); }
.user-avatar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  height: 38px;
  width: 38px;
  background: var(--btn-bg);
  border: 2px solid;
  border-color: var(--bevel-ll) var(--bevel-d) var(--bevel-d) var(--bevel-ll);
  box-shadow: inset 1px 1px 0 var(--bevel-l), inset -1px -1px 0 var(--bevel-dd);
  cursor: pointer;
}
.user-avatar-btn:active,
.user-avatar-btn.is-open {
  border-color: var(--bevel-d) var(--bevel-ll) var(--bevel-ll) var(--bevel-d);
  box-shadow: inset 1px 1px 0 var(--bevel-dd), inset -1px -1px 0 var(--bevel-l);
}

/* Header menu button; shared site-header.css supplies the final icon button chrome. */
.header-logo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  height: 28px;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
}

/* Logo dropdown — opens to the left (right:auto, left:0) */
.logo-menu-dropdown {
  left: 0;
  right: auto;
}

/* Fullscreen + help icon buttons in gallery header */
.btn-gallery-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  width: 38px;
  padding: 2px;
  background: var(--btn-bg);
  border: 2px solid;
  border-color: var(--bevel-ll) var(--bevel-d) var(--bevel-d) var(--bevel-ll);
  box-shadow: inset 1px 1px 0 var(--bevel-l), inset -1px -1px 0 var(--bevel-dd);
  cursor: pointer;
  color: #000;
}
.btn-gallery-icon:active {
  border-color: var(--bevel-d) var(--bevel-ll) var(--bevel-ll) var(--bevel-d);
  box-shadow: inset 1px 1px 0 var(--bevel-dd), inset -1px -1px 0 var(--bevel-l);
}
.user-menu-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 150px;
  background: var(--win98-bg);
  border: 2px outset var(--win98-bg);
  box-shadow: 2px 2px 0 #000;
  padding: 2px;
  z-index: 260;
}
.user-menu-item {
  display: block;
  width: 100%;
  padding: 7px 10px;
  background: transparent;
  border: 0;
  color: #000;
  text-align: left;
  text-decoration: none;
  font-size: 12px;
  cursor: pointer;
}
.user-menu-item:hover,
.user-menu-item:focus {
  background: linear-gradient(to right, #000080, #1084d0);
  color: #fff;
  outline: none;
}

/* ── Gallery main ── */
.gallery-main {
  width: 100%;
  padding: 0 0 calc(16px + var(--safe-bottom, 0px));
  box-sizing: border-box;
}

/* Collapsing "quick-return" toolbar. The toolbar sticks to the top edge of the
   gallery scroll area (#gallery-view, which sits just under the workspace tabs),
   so as you scroll down it slides up out of view and as you scroll up it slides
   back in — keeping search/filter/sort reachable from any depth without leaving
   it permanently parked at the top. It's clipped by #gallery-view's overflow, so
   it disappears at / reappears from the gallery's top edge and never overlaps the
   tabs. initCollapsingToolbar() (gallery.js) drives --toolbar-hide from 0 (fully
   shown) up to the bar's own height (fully hidden). The solid background masks
   grid tiles scrolling behind it. */
.gallery-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--body-bg, var(--surface-bg));
  padding: 12px 16px;
  box-sizing: border-box;
  margin-bottom: 16px;
  box-shadow: 0 5px 6px -3px rgba(0, 0, 0, 0.22);
  /* JS (initCollapsingToolbar) drives --toolbar-hide from 0 (fully shown) up to
     the bar's height as you scroll, so the bar moves 1:1 with the scroll (no
     transition — it tracks the finger's speed). #gallery-view clips it at the
     gallery's top edge, under the tabs, so it disappears/reappears there. */
  transform: translateY(calc(var(--toolbar-hide, 0px) * -1));
}
/* The controls' own bottom gap is folded into the bar's padding above so the
   background/shadow stay tight to the bar instead of floating a margin below. */
.gallery-toolbar .gallery-controls { margin-bottom: 0; }
.gallery-toolbar .gallery-search-bar { padding: 0; }

.gallery-main > .scope-pills,
.gallery-main > .anim-grid,
.gallery-main > #load-more-sentinel {
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
}

.gallery-main > .scope-pills,
.gallery-main > .anim-grid {
  width: calc(100% - 32px);
}

/* ── Controls bar ── */
.gallery-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.sort-controls, .filter-controls, .limit-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #000;
}
.sort-select {
  padding: 5px 8px;
  background: #fff;
  border: 2px inset var(--win98-bg);
  font-size: 14px;
  cursor: pointer;
  color: #000;
}

.sort-dir-btn {
  padding: 3px 8px;
  background: var(--win98-bg);
  border: 2px outset var(--win98-bg);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  color: #000;
}
.sort-dir-btn.active {
  border-style: inset;
  background: #dcdcdc;
}
.sort-dir-btn:hover:not(.active) { background: #dcdcdc; }

#page-limit {
  padding: 2px 4px;
  background: #fff;
  border: 2px inset var(--win98-bg);
  font-size: 12px;
}

/* Below the width where the toolbar's single row would touch both edges of the
   display (~605px), stack it on two lines: give the search bar the full display
   width, centered, and center the filter/sort/reverse controls as a full-width
   block instead of right-aligning. The .gallery-toolbar wrapper is a plain block
   here, so its search bar and controls stack. */
@media (max-width: 604px) {
  .gallery-search-bar { justify-content: center; width: 100%; }
  #search-input { flex: 1 1 auto; width: auto; min-width: 0; }
  .gallery-controls { justify-content: center; }
}

/* At/above that width, lay the toolbar out as a single inline row: search first,
   then the filter/sort/reverse controls, all right-aligned together. */
@media (min-width: 605px) {
  .gallery-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
  }
  .gallery-controls { margin-bottom: 0; }
}

/* Very narrow phones (e.g. 344–360px Samsung Galaxy widths) can't fit the
   filter/sort/reverse row at full size, so shrink the control fonts and tighten
   the gaps. The search input keeps its 16px font — it sits full-width on its own
   line here (so it doesn't overflow) and <16px would trigger iOS focus zoom. */
@media (max-width: 380px) {
  .gallery-controls { gap: 10px; }
  .sort-controls, .filter-controls { gap: 4px; font-size: 11px; }
  .sort-select { font-size: 12px; padding: 4px 6px; }
  .sort-dir-btn { font-size: 11px; }
}

/* ── Animation grid ── */
.anim-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

/* ── Animation tile ── */
.anim-tile {
  position: relative;
  background: var(--tile-bg);
  border: 2px solid;
  border-color: #fff #808080 #808080 #fff;
  box-shadow: 2px 2px 0 #000;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.1s;
  /* Every gallery item is letterboxed to 1.73:1 at submission, so the tile matches the
     media exactly and nothing is cropped. Legacy items uploaded before that change are
     the reason the media below is contain, not cover. */
  aspect-ratio: 1.73 / 1;
}
.anim-tile:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 #000; }
.anim-tile video, .anim-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* No fill of its own: the tile face (--tile-bg) shows through instead, so an
     item whose ratio is not exactly 1.73:1 — and the transparent letterbox bars
     in the WebP tiles — sit on the button face rather than on a black card. */
  background: transparent;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.anim-tile .tile-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.8));
  padding: 24px 8px 6px;
  opacity: 0;
  transition: opacity 0.15s;
}
.anim-tile:hover .tile-overlay { opacity: 1; }
/* Touch devices have no hover: keep the title/creator labels visible on every
   thumbnail at all times, except the currently-selected (playing) tile. */
@media (hover: none) {
  .anim-tile .tile-overlay { opacity: 1; }
}
.anim-tile.selected .tile-overlay { opacity: 0; }
/* A selected tile fuses with the shade below it into one window: it drops its
   bottom edge and keeps only a right-side hard shadow (no bottom shadow, so no
   seam line), which lines up with the shade's right+bottom shadow to form a
   single, consistent drop shadow around the whole unit. */
.anim-tile.selected {
  border-bottom: 0;
  transform: none;
  z-index: 2;
  box-shadow: 2px 0 0 #000;
}
.anim-tile.selected:hover {
  transform: none;
  box-shadow: 2px 0 0 #000;
}
/* Leave room under the sticky header when a tapped tile is scrolled into view. */
.anim-tile { scroll-margin-top: calc(64px + var(--safe-area-top, 0px)); }
.tile-title { font-size: 12px; font-weight: bold; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-creator { font-size: 11px; color: #fff; display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.tile-creator img { width: 16px; height: 16px; border-radius: 0; }
/* On tiles the avatar is tiny, so sit the Pro badge beside it (to the right)
   instead of overlaying the bottom-right corner and covering the face. */
.tile-creator .avatar-wrap { display: inline-flex; flex-direction: row-reverse; align-items: center; gap: 3px; }
.tile-creator .pro-badge { position: static; bottom: auto; right: auto; box-shadow: none; }

/* ── Inline detail dropdown (single-column / mobile feed) ──
   Inserted right after the selected tile; spans the full feed width and pushes
   the rest of the feed down. In the gallery feed, JS caps the open shade to the
   viewport and the comments area scrolls independently; the dedicated unlisted
   page overrides that so the page itself is the only vertical scroller. */
.inline-detail {
  grid-column: 1 / -1;
  /* Window-shade roll: the single grid row animates from 0fr (collapsed) to
     1fr (its natural content height). The .inline-detail-shade child clips the
     content during the roll. */
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1);
  /* Cancel the grid row-gap above the box (-12px) plus 2px more so the panel's
     right-edge shadow (offset down 2px) meets the tile's right shadow with no
     break. Sits behind the selected tile so the shade emerges from underneath. */
  margin-top: -14px;
  z-index: 1;
}
.inline-detail.open { grid-template-rows: 1fr; }
.inline-detail-shade {
  min-height: 0;
  overflow: hidden;
  background: var(--win98-bg);
  color: #000;
  /* No top border: the shade continues the bevel of the selected tile above it
     so the tile + shade read as one unified window. */
  border: 2px solid;
  border-top: 0;
  border-color: #fff #808080 #808080 #fff;
  box-shadow: 2px 2px 0 #000;
  display: flex;
  flex-direction: column;
}
@media (prefers-reduced-motion: reduce) {
  .inline-detail { transition: none; }
}
.inline-detail-loading { padding: 16px; font-size: 12px; color: var(--win98-darker); }
.inline-detail-info {
  flex: 0 0 auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.inline-detail-info h2 { font-size: 16px; }
.inline-detail-info p { font-size: 12px; }
.inline-detail-comments {
  flex: 1 1 auto;
  min-height: 0;
  border-top: 2px inset var(--win98-bg);
  padding: 8px 12px 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.inline-detail-comments h3 { font-size: 13px; margin-bottom: 6px; }
.inline-detail-comments textarea {
  width: 100%;
  font-family: inherit;
  /* 16px keeps iOS Safari/WKWebView from auto-zooming the page on focus. */
  font-size: 16px;
  border: 2px inset var(--win98-bg);
  padding: 4px;
  margin-top: 6px;
}
.inline-detail-comments .btn-post { margin-top: 4px; padding: 3px 12px; border: 2px outset var(--win98-bg); background: var(--win98-bg); cursor: pointer; font-size: 12px; }
.inline-detail-comments .btn-post:active { border-style: inset; }

/* ── Load more ── */
.btn-load-more {
  display: block;
  margin: 0 auto 32px;
  padding: 8px 32px;
  background: var(--win98-bg);
  border: 2px outset var(--win98-bg);
  font-size: 13px;
  cursor: pointer;
}
.btn-load-more:active { border-style: inset; }

/* ── Win98 window chrome ── */
.win98-window {
  background: var(--win98-bg);
  border: 2px outset var(--win98-bg);
  box-shadow: 2px 2px 0 #000;
}
.win98-titlebar {
  background: linear-gradient(to right, #000080, #1084d0);
  color: var(--win98-title-fg);
  padding: 3px 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: bold;
  user-select: none;
}
.win98-close {
  background: var(--win98-bg);
  border: 1px outset var(--win98-bg);
  width: 18px; height: 16px;
  font-size: 11px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  color: #000;
}
.win98-close:active { border-style: inset; }

/* ── Overlay / backdrop ── */
.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  pointer-events: auto;
  background: rgba(0,0,0,0.42);
  overflow: hidden;
}
.overlay > * { pointer-events: all; }

.overlay-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.42);
  z-index: 199;
}
/* Sits above the detail viewer (z 200) so the profile popup (z 300) dims both
   the gallery and the viewer behind it. */
.profile-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.42);
  z-index: 250;
}

/* ── Detail popup ── */
.detail-window {
  width: min(90vw, 900px);
  max-height: 80vh;
  max-height: 80dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.detail-body {
  display: flex;
  gap: 0;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}
.detail-left {
  flex: 0 0 auto;
  /* Matches the window, not the video: the column is only as tall as the clip
     (align-self below), and any remainder beside a non-1.73:1 clip reads as part
     of the popup instead of as a black mat under it. */
  background: var(--win98-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 480px;
  position: relative;
  /* Without this the column stretches to the height of the info/comments beside
     it and centres the video in that, which is where the black band above and
     below a 1.73:1 clip came from — a 4:3 clip is tall enough to hide it. */
  align-self: center;
}
.detail-left video {
  max-width: 480px;
  max-height: calc(80vh - 60px);
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.detail-delete-animation {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 26px;
  height: 26px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 2px outset var(--win98-bg);
  background: var(--win98-bg);
  color: #000;
  cursor: pointer;
}
.detail-delete-animation:active { border-style: inset; }
.detail-right {
  flex: 1;
  padding: 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--win98-bg);
  color: #000;
  min-width: 0;
}

/* Portrait / narrow-screen: stack video above info */
@media (max-width: 600px), (orientation: portrait) and (max-width: 900px) {
  .detail-window {
    width: 100%;
    max-width: 100%;
    max-height: 80vh;
    max-height: 80dvh;
  }
  /* Keep the video pinned at the top and let the info + comments scroll within
     the window, rather than scrolling the whole body (which let the popup grow
     past the viewport). */
  .detail-body {
    flex-direction: column;
    overflow: hidden;
  }
  .detail-left {
    max-width: 100%;
    width: 100%;
    flex-shrink: 0;
  }
  .detail-left video {
    /* Sized by its own ratio inside the caps — no width:100% + object-fit, which
       letterboxed INSIDE the element (black side bars on a 4:3 clip, top/bottom
       on a 1.73:1 one). 58vw is 1/1.73 of the full width, so a 1.73:1 clip fills
       the phone edge to edge with nothing left over; anything else is centred on
       the window grey. */
    max-width: 100%;
    max-height: 58vw;
    height: auto;
    margin: 0 auto;
  }
  .detail-right {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
  }
}
.detail-right h2 { font-size: 16px; }
.detail-creator { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.detail-creator img { width: 28px; height: 28px; border-radius: 50%; border: 1px solid #000; }
.detail-meta { font-size: 12px; color: var(--win98-darker); }
.detail-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tag-chip {
  background: var(--win98-title);
  color: #fff;
  padding: 1px 6px;
  font-size: 11px;
  cursor: pointer;
  border: 1px solid #000;
}
.tag-chip:hover { background: #1084d0; color: #fff; }
.detail-actions { display: flex; gap: 8px; align-items: center; }
.btn-like {
  padding: 3px 10px;
  border: 2px outset var(--win98-bg);
  background: var(--win98-bg);
  cursor: pointer;
  font-size: 13px;
}
.btn-like.liked { background: #ffaaaa; }
.btn-like.bookmarked { background: #aaccff; }
.btn-like:active { border-style: inset; }

/* Unlisted badge on gallery tiles (My Unlisted filter / opened unlisted links). */
.tile-unlisted-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  z-index: 2;
  pointer-events: none;
}

/* "Under review" placeholder card for queued submissions in My Flipbooks. */
.pending-review-tile {
  background: #d4d0c8;
  border: 2px inset #c0c0c0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  box-sizing: border-box;
  cursor: default;
}
.pending-review-tile .pending-icon { font-size: 28px; line-height: 1; }
.pending-review-tile .pending-title { font-size: 12px; font-weight: bold; text-align: center; word-break: break-word; max-width: 100%; }
.pending-review-tile .pending-status { font-size: 10px; color: #666; text-align: center; }
.pending-review-tile .pending-date { font-size: 10px; color: #999; }

/* Stackable gallery scope pills (creator, staff picks, bookmarks, mine). */
.scope-pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
  max-width: 100%;
}
.scope-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 4px 12px;
  max-width: 100%;
  background: var(--win98-bg, #c0c0c0);
  border: 1px solid var(--bevel-d, #808080);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  font-size: 12px;
}
.scope-pill-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scope-pill-clear {
  flex: none;
  width: 18px;
  height: 18px;
  line-height: 1;
  padding: 0;
  border: 1px solid var(--bevel-d, #808080);
  border-radius: 50%;
  background: var(--win98-bg, #c0c0c0);
  cursor: pointer;
  font-size: 11px;
}
.scope-pill-clear:active { background: #b0b0b0; }

/* ── Comments ── */
.comments-section { border-top: 2px inset var(--win98-bg); padding-top: 8px; }
.comments-section h3 { font-size: 13px; margin-bottom: 6px; }
.comment-item { font-size: 12px; border-bottom: 1px solid var(--win98-dark); padding: 4px 0; }
.comment-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.comment-item .comment-author { font-weight: bold; color: var(--win98-title); text-decoration: none; background: none; border: none; padding: 0; font: inherit; cursor: pointer; }
.comment-item .comment-author:hover { text-decoration: underline; }
.comment-item .comment-body { margin-top: 2px; }
.comment-delete-btn {
  border: 1px outset var(--win98-bg);
  background: var(--win98-bg);
  color: #000;
  cursor: pointer;
  width: 22px;
  height: 22px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.comment-delete-btn:active { border-style: inset; }
#comment-form textarea {
  width: 100%;
  border: 2px inset var(--win98-bg);
  background: #fff;
  padding: 4px;
  /* 16px keeps iOS Safari/WKWebView from auto-zooming the page on focus. */
  font-size: 16px;
  resize: vertical;
  min-height: 48px;
  margin-top: 6px;
}
#comment-form button {
  margin-top: 4px;
  padding: 2px 12px;
  background: var(--win98-bg);
  border: 2px outset var(--win98-bg);
  font-size: 12px;
  cursor: pointer;
}

/* ── Profile mini-popup ── */
.profile-popup {
  position: fixed;
  z-index: 300;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
}
.profile-popup-body { padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--win98-bg); }
.profile-popup-body img { width: 64px; height: 64px; border-radius: 0; border: 2px solid #000; object-fit: cover; }
.profile-popup-body .avatar-wrap { align-self: flex-start; }
.profile-popup-body .pp-name { font-size: 14px; font-weight: bold; }
.profile-popup-body .pp-bio { font-size: 12px; color: var(--win98-darker); }
.profile-popup-body .pp-stats { font-size: 11px; }
.btn-subscribe {
  align-self: center;
  width: auto;
  min-width: 82px;
  padding: 3px 12px;
  background: var(--win98-bg);
  border: 2px outset var(--win98-bg);
  font-size: 12px;
  cursor: pointer;
}
.btn-subscribe.subscribed { background: #aaffaa; }
.btn-subscribe:active { border-style: inset; }

/* ── Profile page ── */
.profile-main { max-width: 900px; margin: 24px auto; padding: 0 16px; }
.profile-card { margin-bottom: 24px; }
.profile-card-body { display: flex; gap: 16px; padding: 12px; background: var(--win98-bg); }
.profile-avatar-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.profile-avatar-wrap img { width: 96px; height: 96px; border-radius: 0; border: 2px solid #000; object-fit: cover; }
.profile-info { flex: 1; display: flex; flex-direction: column; gap: 6px; color: #000; }
.profile-name-wrap { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: bold; }
.profile-stats { font-size: 12px; color: var(--win98-darker); }
.stat-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: inherit;
  color: inherit;
  cursor: default;
}
.stat-btn.clickable {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}
.stat-btn.clickable:hover { color: #000080; }

.suspension-notice {
  background: #fff3cd;
  border: 1px solid #856404;
  color: #856404;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 12px;
}
.danger-zone {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid #c0c0c0;
}
.btn-delete-account {
  background: #c0c0c0;
  border: 2px outset #c0c0c0;
  color: #800000;
  font-weight: bold;
  font-size: 13px;
  padding: 4px 14px;
  cursor: pointer;
}
.btn-delete-account:active { border-style: inset; }
.btn-delete-account:hover { background: #d0d0d0; }

.gallery-load-error,
.gallery-empty,
#profile-loading {
  padding: 12px;
  color: #333;
  font-size: 13px;
}
.gallery-load-error button,
#profile-loading button {
  margin-top: 8px;
  padding: 3px 12px;
  background: var(--win98-bg);
  border: 2px outset var(--win98-bg);
  font-size: 12px;
  cursor: pointer;
}
.gallery-load-error button:active,
#profile-loading button:active {
  border-style: inset;
}

.gallery-offline {
  grid-column: 1 / -1;
  padding: 40px 16px;
  text-align: center;
  color: #333;
}
.gallery-offline-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 6px;
}
.gallery-offline-msg {
  font-size: 13px;
  line-height: 1.5;
  max-width: 340px;
  margin: 0 auto 14px;
}
.gallery-offline-retry {
  padding: 4px 14px;
  background: var(--win98-bg);
  border: 2px outset var(--win98-bg);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.gallery-offline-retry:active { border-style: inset; }

.profile-field-input {
  font: inherit;
  font-size: inherit;
  font-family: inherit;
  padding: 1px 4px;
  border: 1px solid #000080;
  background: #fff;
  color: #000;
  outline: none;
  resize: vertical;
}
.section-heading { font-size: 13px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; color: #000; margin-bottom: 10px; }

/* Flipbook view: tap-to-mute for a post's sound effects (src/sound/flipbook-sound.js). */
#flipbook-view .fb-sound[hidden] { display: none !important; }
#flipbook-view .fb-sound[aria-pressed="true"] { opacity: 0.75; }