/* ============================================================
   Forum styles. Relies on the CSS custom properties already
   defined in index.php's :root (--bg, --card, --accent, etc.)
   so light/dark theme switching works automatically with zero
   duplicated color logic here.
   ============================================================ */

/* ---------- Tab switcher ---------- */
.view-switcher {
  max-width: 1180px; margin: 0 auto; padding: 14px 20px 18px;
  display: flex; gap: 8px; align-items: center;
}
.view-tab {
  display: flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--card-border); color: var(--text-dim);
  font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 14px; cursor: pointer;
  transition: all .2s ease; flex: 1; justify-content: center;
}
.view-tab.active { background: var(--accent); color: var(--btn-text); border-color: var(--accent); }
.view-tab svg { flex-shrink: 0; }

/* ---------- Screen transition system ---------- */
/* transform/opacity only — compositor-driven, stays smooth even on weak phones */
#shopView, #forumView {
  transition: opacity .25s ease, transform .3s cubic-bezier(.2,.9,.3,1);
}
/* An absolutely positioned element is removed from layout FLOW but still
   contributes to the document's SCROLLABLE OVERFLOW — so an invisible
   shop view full of phone cards was still creating thousands of pixels of
   empty scroll height below the forum. display:none is what actually
   removes it. The .hiding state keeps it visible (but out of flow) just
   long enough for the fade-out transition to play, then JS applies
   display:none once it's finished. */
#shopView.hide-left { opacity: 0; transform: translateX(-16px); pointer-events: none; position: absolute; width: 100%; }
#shopView.hide-left.hidden-done { display: none; }
#forumView.hide-right { opacity: 0; transform: translateX(16px); pointer-events: none; position: absolute; width: 100%; }
#forumView { display: none; }
#forumView.active { display: block; }

.forum-screen-stack { position: relative; overflow: hidden; max-width: 1180px; margin: 0 auto; padding: 0 20px; min-height: 50vh; width: 100%; box-sizing: border-box; }
.forum-screen {
  transition: transform .3s cubic-bezier(.2,.9,.3,1), opacity .25s ease;
  width: 100%; box-sizing: border-box;
}
/* Only the active screen participates in normal layout flow (so the stack's
   height tracks it correctly). Every other screen is pulled out of flow via
   position:absolute — this is what actually keeps exactly one screen visible
   at a time instead of every pushed screen stacking on top of the last. */
.forum-screen.active { position: relative; transform: translateX(0); opacity: 1; }
.forum-screen.entering { position: absolute; top: 0; left: 0; right: 0; transform: translateX(100%); opacity: 0; }
.forum-screen.slide-out-left { position: absolute; top: 0; left: 0; right: 0; transform: translateX(-100%); opacity: 0; }
.forum-screen.slide-out-right { position: absolute; top: 0; left: 0; right: 0; transform: translateX(100%); opacity: 0; }

.forum-back-btn {
  display: inline-flex; align-items: center; gap: 6px; background: transparent; border: none;
  color: var(--text-dim); font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 13.5px;
  cursor: pointer; padding: 10px 0; margin-bottom: 8px; transition: color .15s ease;
}
.forum-back-btn:hover { color: var(--accent); }

/* ---------- Categories / accordion ---------- */
.forum-category {
  background: var(--card); border: 1px solid var(--card-border); border-radius: 16px;
  margin-bottom: 10px; overflow: hidden;
}
.forum-category-head {
  display: flex; align-items: center; justify-content: space-between; padding: 16px 18px;
  cursor: pointer; user-select: none;
}
.forum-category-name { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 10px; }
.forum-count-pill {
  background: var(--chip); color: var(--text-dim); font-size: 11.5px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px;
}
.forum-category-head .chevron { transition: transform .25s ease; color: var(--text-dim); flex-shrink: 0; }
.forum-category.open .chevron { transform: rotate(180deg); }

.forum-subcat-list {
  max-height: 0; overflow: hidden; transition: max-height .3s cubic-bezier(.2,.9,.3,1);
}
.forum-category.open .forum-subcat-list { max-height: 800px; }
.forum-subcat-item {
  display: flex; align-items: center; justify-content: space-between; padding: 13px 18px 13px 34px;
  border-top: 1px solid var(--card-border); cursor: pointer; transition: background .15s ease;
}
.forum-subcat-item:hover { background: var(--bg-elevated, var(--chip)); }
.forum-subcat-name { font-size: 14px; color: var(--text); display: flex; align-items: center; gap: 8px; }

.forum-add-btn {
  display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 12px;
  background: transparent; border: 1.5px dashed var(--card-border); color: var(--text-dim);
  font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 13.5px; cursor: pointer;
  width: 100%; justify-content: center; margin-top: 6px; transition: all .15s ease;
}
.forum-add-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Topics list ---------- */
/* A COLUMN, not a row.
   The old layout put the title and the moderator buttons on one flex line, so
   on a phone the buttons took their width first and squeezed the title into
   three or four wrapped lines. Title and count share the top line; the tools
   get a line of their own underneath. */
.forum-topic-item {
  background: var(--card); border: 1px solid var(--card-border); border-radius: 14px;
  padding: 15px 16px; margin-bottom: 10px; cursor: pointer;
  transition: transform .15s ease, border-color .15s ease;
  display: flex; flex-direction: column; gap: 10px;
}
.forum-topic-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.forum-topic-main { flex: 1; min-width: 0; }

/* Tools row. Separated by a hairline so it reads as a control strip rather
   than more content. */
.forum-topic-tools {
  display: flex; flex-wrap: wrap; gap: 7px;
  padding-top: 10px; border-top: 1px solid var(--card-border);
}
.forum-tool-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px; border-radius: 8px;
  background: var(--bg-elevated); border: 1px solid var(--card-border);
  color: var(--text-dim); font-family: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer; touch-action: manipulation;
  transition: color .15s ease, border-color .15s ease;
}
.forum-tool-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.forum-tool-btn.is-on { color: var(--accent); border-color: var(--accent-dim); }
.forum-tool-btn.is-danger:active { color: var(--warn, #FF5B6E); border-color: var(--warn, #FF5B6E); }
.forum-tool-btn:active { border-color: var(--accent); }

/* The comment icon inside the count pill, sized to sit on the number's
   baseline instead of stretching the pill. */
.forum-count-pill .pill-icon { display: inline-flex; margin-left: 4px; }
.forum-count-pill .pill-icon svg { width: 12px; height: 12px; }
.forum-topic-item:hover { transform: translateY(-2px); border-color: var(--accent-dim); }
.forum-topic-title { font-weight: 700; font-size: 14.5px; margin-bottom: 4px; }

/* ---- Pin & lock (chunk AN) ---- */
/* A pinned row needs to read as "held above the rest" without shouting. A
   left accent edge and a faint tint do that; a coloured background would
   fight the new-activity badge already sitting in the same row. */
.forum-topic-item.is-pinned {
  border-color: var(--accent-dim);
  box-shadow: inset 3px 0 0 var(--accent);
  background: linear-gradient(90deg, rgba(94,230,196,.05), transparent 40%);
}
/* Markers sit inline before the title. vertical-align keeps the lock glyph on
   the text baseline instead of riding above it. */
.forum-topic-flag {
  display: inline-flex; align-items: center; vertical-align: -2px;
  margin-right: 5px; color: var(--text-dim); flex-shrink: 0;
}
/* Same reason as the reply bar: ICONS.pin has no width attribute, so without
   this it would stretch to the title's full width. lockIconSvg() carries its
   own attributes and is unaffected, which is why only pinned rows broke. */
.forum-topic-flag svg { width: 13px; height: 13px; display: block; }
/* Small reply arrow before the last commenter's name, so the line reads as
   "someone replied" rather than "someone created this". */
.forum-topic-last { display: inline-flex; vertical-align: -2px; margin-right: 4px; opacity: .75; }
.forum-topic-last svg { width: 11px; height: 11px; }
.forum-topic-item.is-pinned .forum-topic-flag { color: var(--accent); }

/* The "this topic is locked" strip above the comments. */
.forum-lock-notice {
  display: flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--card-border);
  border-left: 3px solid var(--text-dim);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 12px;
  color: var(--text-dim); font-size: 13px; line-height: 1.45;
}

/* ---- Profile card slider (chunk AT) ---- */
/* Two panes on one track: the profile, and whichever list was tapped. The
   track is 200% wide with two 50% slides, so moving it -50% brings the second
   into view. Height is set from JS on every switch — the two panes differ a
   lot in height, and a flex track otherwise takes the height of the taller
   one and leaves a gap under the shorter. */
.forum-slider {
  position: relative; overflow: hidden;
  transition: height .3s cubic-bezier(.4, 0, .2, 1);
}
.forum-slider::after { content: ''; display: table; clear: both; }
.forum-slide {
  float: left; width: 100%;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
#profileSlideContent {
  /* Pulled up onto the same line as the main slide so the two sit side by
     side on one track without a 200%-wide wrapper that would break the
     card's own padding. */
  margin-left: -100%;
  transform: translateX(100%);
  opacity: 0; pointer-events: none;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .2s ease;
}
.forum-slider.show-content #profileSlideMain {
  transform: translateX(-100%);
  opacity: 0; pointer-events: none;
}
.forum-slider.show-content #profileSlideContent {
  transform: translateX(0);
  opacity: 1; pointer-events: auto;
}
#profileSlideMain { transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .2s ease; }

.forum-slide-back {
  display: flex; align-items: center; gap: 5px;
  background: transparent; border: none; padding: 2px 0 10px;
  color: var(--text-dim); font-family: inherit; font-size: 13px;
  font-weight: 600; cursor: pointer;
}
.forum-slide-back:active { color: var(--accent); }
.forum-slide-title {
  font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 700;
  text-align: left; margin-bottom: 10px;
}

/* The settings form inside the profile slide. Left-aligned and scroll-capped
   like the lists: the card is centred, but a form of labelled inputs reads
   badly centred. */
.forum-settings-pane {
  text-align: left; max-height: 52vh; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.forum-settings-pane input[type="text"],
.forum-settings-pane input[type="password"] {
  width: 100%; box-sizing: border-box;
}

/* ---- Profile pane inside the popover (chunk AS) ---- */
/* Capped and scrollable: the popover is a card floating over the forum, and
   an uncapped list would push it past the top of the screen with no way to
   reach the buttons underneath. */
.forum-profile-pane {
  max-height: 46vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  margin: 0 0 4px; text-align: left;
}
.forum-profile-pane.is-images {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.forum-pane-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-elevated); border: 1px solid var(--card-border);
  border-radius: 10px; padding: 10px 11px; margin-bottom: 7px; cursor: pointer;
}
.forum-pane-row:active { border-color: var(--accent); }
.forum-pane-row-main { flex: 1; min-width: 0; }
.forum-pane-row-title {
  font-weight: 700; font-size: 13.5px; margin-bottom: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.forum-pane-row-topic {
  font-size: 11px; color: var(--accent); font-weight: 700; margin-bottom: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Two-line clamp: comment excerpts vary wildly in length and an unclamped
   one would dominate the list it sits in. */
.forum-pane-row-body {
  font-size: 13px; line-height: 1.4; margin-bottom: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.forum-pane-row-meta { font-size: 11px; color: var(--text-dim); }

/* ---- Profile screen (chunk AR) ---- */
.forum-profile-card {
  position: relative;
  background: linear-gradient(160deg, rgba(94,230,196,.08), rgba(94,230,196,.01));
  border: 1px solid var(--card-border);
  border-radius: 16px; padding: 18px 16px; margin-bottom: 14px;
}
.forum-profile-top { display: flex; align-items: center; gap: 14px; }
.forum-profile-ident { min-width: 0; flex: 1; }
.forum-profile-name {
  font-family: 'Space Grotesk', sans-serif; font-size: 19px; font-weight: 700;
  margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.forum-profile-username { font-size: 13px; color: var(--text-dim); margin-bottom: 8px; }
.forum-profile-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.forum-profile-tag {
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px;
  background: var(--bg-elevated); border: 1px solid var(--card-border);
  color: var(--text-dim);
}
.forum-profile-tag.is-seller { color: var(--accent); border-color: var(--accent-dim); }
.forum-profile-tag.is-online { color: #5EE6C4; }
.forum-profile-banned {
  margin-top: 12px; padding: 9px 11px; border-radius: 9px;
  background: rgba(255,91,110,.09); border: 1px solid rgba(255,91,110,.3);
  color: var(--warn, #FF5B6E); font-size: 12.5px;
}
/* The gear sits in the card's corner rather than the page header: settings
   belong TO the profile, and putting it back in the header would just
   recreate the button we replaced. */
.forum-profile-gear {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--bg-elevated); border: 1px solid var(--card-border);
  color: var(--text-dim); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.forum-profile-gear:active { color: var(--accent); border-color: var(--accent); }

/* Three equal tiles. grid, not flex, so the columns stay equal even when one
   number is 4 digits and another is 1. */
.forum-stat-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px;
  margin-bottom: 12px;
}
.forum-stat-tile {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: 13px; padding: 15px 6px; cursor: pointer;
  font-family: inherit; text-align: center;
  transition: border-color .15s ease, transform .12s ease;
}
.forum-stat-tile:active { transform: scale(.97); border-color: var(--accent); }
.forum-stat-num {
  font-family: 'Space Grotesk', sans-serif; font-size: 21px; font-weight: 700;
  color: var(--accent); line-height: 1.1; margin-bottom: 3px;
}
.forum-stat-label {
  font-size: 11px; color: var(--text-dim); font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em;
}
.forum-profile-meta { font-size: 12px; color: var(--text-dim); text-align: center; padding-bottom: 6px; }

.forum-content-sub { font-size: 12.5px; color: var(--text-dim); margin-bottom: 12px; }
.forum-content-comment {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: 12px; padding: 12px 13px; margin-bottom: 9px; cursor: pointer;
}
.forum-content-comment:active { border-color: var(--accent); }
.forum-content-comment-topic {
  font-size: 11.5px; color: var(--accent); font-weight: 700;
  margin-bottom: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.forum-content-comment-body { font-size: 13.5px; line-height: 1.45; margin-bottom: 5px; }

/* Square image grid. aspect-ratio keeps the cells square regardless of the
   pictures' own shapes, so the grid stays a grid. */
.forum-image-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.forum-grid-img {
  aspect-ratio: 1/1; padding: 0; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--card-border); background: var(--bg-elevated);
  cursor: pointer;
}
.forum-grid-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.forum-grid-img:active { border-color: var(--accent); }

/* ---- Comment images: display (chunk AQ) ---- */
/* Four across, always. A grid rather than a wrapping flex row: with flex, a
   comment carrying the full four images wrapped onto two lines on a narrow
   phone, and the tiles changed size depending on how many there were. Fixed
   columns mean four fit on one row by construction, and one image is the same
   size as one of four. */
.forum-comment-images {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  margin-top: 8px; max-width: 340px;
}
/* SQUARE, regardless of the picture's own shape. A row of mixed portrait and
   landscape thumbnails has no common edge to line up on and reads as
   clutter; object-fit:cover crops to the centre so every tile matches.
   aspect-ratio here also removes the need for the inline one the markup used
   to set — the tile no longer depends on the stored dimensions to have a
   shape, so nothing collapses if they are missing. */
.forum-comment-img {
  padding: 0; border: 1px solid var(--card-border); border-radius: 10px;
  overflow: hidden; cursor: pointer; background: var(--bg-elevated);
  width: 100%; aspect-ratio: 1 / 1;
  transition: border-color .15s ease, transform .12s ease;
}
.forum-comment-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.forum-comment-img:active { transform: scale(.97); border-color: var(--accent); }

/* ---- Full-size viewer ---- */
.forum-img-viewer {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(0,0,0,.94);
  display: none; flex-direction: column;
  align-items: center; justify-content: center;
  /* Top padding clears Telegram's floating header; bottom clears the home
     indicator. The image is centred in what is left. */
  padding: calc(76px + env(safe-area-inset-top, 0px)) 20px
           calc(20px + env(safe-area-inset-bottom, 0px));
  gap: 16px;
}
.forum-img-viewer.open { display: flex; }
.forum-img-viewer-card {
  max-width: 86%; max-height: 100%;
  display: flex; align-items: center; justify-content: center;
  min-height: 0;   /* lets the flex child actually shrink instead of overflowing */
}
.forum-img-viewer-body {
  display: flex; align-items: center; justify-content: center;
  max-width: 100%; max-height: 100%;
}
.forum-img-viewer-body img {
  max-width: 100%; max-height: 100%;
  border-radius: 10px; display: block;
  object-fit: contain;
}
/* A labelled pill at the bottom rather than a corner X: it is out from under
   Telegram's chrome, and it is where a thumb rests. */
.forum-img-viewer-close {
  flex: 0 0 auto;
  padding: 11px 30px; border-radius: 999px;
  background: rgba(255,255,255,.14); color: #fff; border: none;
  font-family: inherit; font-size: 14.5px; font-weight: 600;
  cursor: pointer; touch-action: manipulation;
}
.forum-img-viewer-close:active { background: rgba(255,255,255,.24); }
.forum-img-viewer-spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.18); border-top-color: var(--accent);
  animation: forum-img-spin .75s linear infinite;
}
.forum-img-viewer-error { color: #fff; font-size: 14px; text-align: center; }

/* ---- Comment images: composer (chunk AP) ---- */
.forum-img-grid {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 10px 12px 2px;
}
.forum-img-tile {
  position: relative; width: 62px; height: 62px; flex-shrink: 0;
  border-radius: 10px; overflow: hidden;
  background: var(--bg-elevated); border: 1px solid var(--card-border);
}
.forum-img-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.forum-img-tile.is-uploading { opacity: .6; }

/* The "+" tile matches the thumbnails exactly, so the row reads as one strip
   rather than a grid plus a stray button. */
.forum-img-add {
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 300; line-height: 1;
  color: var(--text-dim); cursor: pointer;
  border-style: dashed; font-family: inherit; padding: 0;
}
.forum-img-add:active { border-color: var(--accent); color: var(--accent); }

.forum-img-remove {
  position: absolute; top: 3px; right: 3px;
  width: 19px; height: 19px; border-radius: 50%;
  background: rgba(0,0,0,.66); color: #fff; border: none;
  font-size: 15px; line-height: 1; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
}

.forum-img-spinner {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.forum-img-spinner::after {
  content: ''; width: 17px; height: 17px; border-radius: 50%;
  border: 2px solid var(--card-border); border-top-color: var(--accent);
  animation: forum-img-spin .7s linear infinite;
}
@keyframes forum-img-spin { to { transform: rotate(360deg); } }

/* The create-topic dialog's picker is a labelled button, not a bare icon:
   there is no composer row to sit inside, and an unlabelled square in a form
   full of labelled fields reads as decoration rather than a control. */
.forum-prompt-img-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; padding: 10px; margin-bottom: 14px;
  background: var(--bg-elevated); border: 1px dashed var(--card-border);
  border-radius: 10px; color: var(--text-dim);
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.forum-prompt-img-btn:active { color: var(--accent); border-color: var(--accent); }
/* Inside the dialog the grid has no composer padding to inherit. */
#promptImages { padding: 0 0 10px; }

/* The camera button sits inside the composer row, left of the textarea.
   align-self:flex-end keeps it on the bottom line as the textarea grows,
   next to the send button rather than drifting up with the first line. */
.forum-img-btn {
  flex-shrink: 0; align-self: flex-end;
  background: transparent; border: none; padding: 7px;
  color: var(--text-dim); cursor: pointer; display: flex;
  border-radius: 8px; touch-action: manipulation;
}
.forum-img-btn:active { color: var(--accent); }

/* ---- Announcements (chunk AO) ---- */
/* The strip sits above every category on the forum home. Given a tinted card
   and an accent border so it reads as "notice", not as another category —
   without borrowing the pinned-topic treatment, which means something else. */
.forum-ann-block {
  background: linear-gradient(160deg, rgba(94,230,196,.07), rgba(94,230,196,.02));
  border: 1px solid var(--accent-dim);
  border-radius: 14px; padding: 12px 14px; margin-bottom: 16px;
}
.forum-ann-head {
  display: flex; align-items: center; gap: 7px;
  font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--accent); margin-bottom: 10px;
}
.forum-ann-item {
  padding: 9px 0; cursor: pointer;
  border-top: 1px solid rgba(255,255,255,.05);
}
.forum-ann-item:first-of-type { border-top: none; padding-top: 2px; }
.forum-ann-item:active { opacity: .6; }
.forum-ann-title { font-weight: 700; font-size: 14px; margin-bottom: 3px; }
.forum-ann-meta { font-size: 11.5px; color: var(--text-dim); }

/* ---- Create-topic dialog: announcement + lock controls ---- */
.forum-ann-field { margin-bottom: 12px; }
.forum-ann-check {
  display: flex; align-items: center; gap: 9px;
  font-size: 14px; cursor: pointer; user-select: none;
}
.forum-ann-check input { width: 17px; height: 17px; accent-color: var(--accent); flex-shrink: 0; }
.forum-ann-days { display: flex; gap: 8px; margin-top: 10px; }
.forum-ann-day {
  flex: 1; padding: 9px 0; border-radius: 9px;
  background: var(--bg-elevated); border: 1px solid var(--card-border);
  color: var(--text-dim); font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .15s ease;
}
.forum-ann-day.active {
  border-color: var(--accent); color: var(--accent);
  background: rgba(94,230,196,.08);
}

/* The padlock button: open by default, visibly shut once pressed. The label
   below it spells out the consequence — an icon alone leaves the user
   guessing which state means which. */
.forum-lock-toggle {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 11px 13px; margin-bottom: 14px;
  background: var(--bg-elevated); border: 1px solid var(--card-border);
  border-radius: 10px; cursor: pointer; text-align: left;
  color: var(--text-dim); font-family: inherit; font-size: 13px;
  transition: all .15s ease;
}
.forum-lock-toggle-icon { display: flex; flex-shrink: 0; }
.forum-lock-toggle.is-locked {
  border-color: var(--warn, #FF5B6E);
  color: var(--warn, #FF5B6E);
  background: rgba(255,91,110,.06);
}

/* A pinned comment, so it is distinguishable from the topic's first post
   (which is pinned by position, not by a moderator's choice). */
.forum-comment.is-pinned-comment {
  border-left: 2px solid var(--accent);
  padding-left: 10px;
}
.forum-topic-meta { font-size: 11.5px; color: var(--text-dim); }

/* ---------- Comments / chat area ---------- */
/* A REAL scroll container (chunk BE).
   It used to just grow with its content, so the whole PAGE scrolled and the
   scroll listener attached to this element never fired — which is why the
   windowing, the load-older trigger and the scroll-to-newest all did nothing.
   Its height is set from JS on mount (see sizeCommentsViewport), because the
   space above it varies with the title's line count and Telegram's header.

   The bottom mask fades comments out as they leave the viewport instead of
   cutting them off at a hard edge. */
.forum-comments-wrap {
  display: flex; flex-direction: column;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;   /* don't let the page scroll once this ends */
  padding-bottom: 90px;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 130px), transparent 100%);
          mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 130px), transparent 100%);
}
/* ---- Top block: first comment + pinned, collapsible (chunk BC) ---- */
/* The opening post and any pinned replies are visually a separate block from
   the conversation, with a divider under them — otherwise the thread reads as
   one undifferentiated list and it is unclear which post the topic is about. */
/* STICKY, so the conversation scrolls BEHIND the opening post rather than
   pushing it away. An opaque background and a shadow give the depth cue that
   says the comments are passing underneath, not disappearing. */
#pinnedComment, #pinnedExtra {
  position: sticky;
  z-index: 3;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 4px 12px;
  margin-bottom: 8px;
  box-shadow: 0 6px 18px -6px rgba(0,0,0,.55);
}
#pinnedComment { top: 0; }
/* Offset so a pinned reply sits just under the opening post rather than on
   top of it when both are stuck. Animated, so it slides up into the vacated
   slot when the opening post is dismissed instead of snapping. */
#pinnedExtra { top: 8px; z-index: 2; transition: top .28s cubic-bezier(.4,0,.2,1); }
#pinnedExtra.is-promoted { top: 0; }

/* Dismissed: no longer held above the conversation. It keeps its place in the
   scroll content — first in the thread — so it scrolls away and reappears at
   the top like any other comment. The card treatment goes with it, since it
   is now part of the stream rather than a fixture over it. */
#pinnedComment.is-unpinned, #pinnedExtra.is-unpinned {
  position: static;
  box-shadow: none;
  background: transparent;
  border-color: transparent;
  padding-left: 4px; padding-right: 4px;
}

.forum-badge-dismiss {
  margin-left: auto;               /* pushes it to the right end of the row */
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--text-dim); flex-shrink: 0;
}
.forum-badge-dismiss:active { color: var(--accent); background: var(--chip); }
/* The badge row must span the block for margin-left:auto to have room. */
.forum-comment-badge { width: 100%; }
#pinnedExtra:empty { display: none; }

/* Collapsed body. max-height comes from a custom property set in JS, so the
   two thresholds live in one place (the JS constants) rather than being
   duplicated here and drifting apart. */
.forum-comment.is-collapsible.is-collapsed .forum-comment-text-wrap {
  max-height: var(--collapse-max, 80px);
  overflow: hidden;
  /* Faded bottom edge: a hard cut looks like the text ended, a fade says
     there is more. The opaque stop is high (80%) because the collapsed box is
     now only one line tall — at 60% the single visible line was itself half
     faded and hard to read. */
  -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 80%, transparent 100%);
}
.forum-comment.is-collapsible .forum-comment-text-wrap { transition: max-height .25s ease; }

/* Sits in the gutter under the avatar — empty space on any comment taller
   than one line, so the button costs no vertical room. */
/* The avatar's column. Fixed width so the text beside it always starts at the
   same x, with or without a button underneath. */
.forum-comment-gutter {
  display: flex; flex-direction: column; align-items: center;
  flex-shrink: 0; width: 38px;
}
/* The compact stacked control, at the bottom-LEFT of the block. Narrow and
   quiet: it is a secondary action on a block that should stay small, and the
   pill version drew more attention than the post it was attached to. */
.forum-collapse-btn {
  align-self: flex-start;
  width: 38px; margin: 0 0 4px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: none; border: none; padding: 3px 0; cursor: pointer;
  color: var(--text-dim); font-family: inherit; font-size: 9px;
  font-weight: 700; line-height: 1.1; text-align: center;
  white-space: normal; word-break: break-word;
}
.forum-collapse-btn:active { color: var(--accent); }
.forum-collapse-btn svg { transition: transform .25s ease; }
.forum-comment:not(.is-collapsed) .forum-collapse-btn svg { transform: rotate(180deg); }
.forum-collapse-btn:active { color: var(--accent); }

/* ---- So'nggi faoliyat (chunk BB) ---- */
.forum-screen-title {
  font-family: 'Space Grotesk', sans-serif; font-size: 19px; margin: 0 0 12px;
}

/* Two footer blocks sharing the row. Activity is wider because its label is
   words while the online block is a pair of numbers. */
.forum-footer-row { display: flex; gap: 8px; margin-top: 14px; }
.forum-footer-block {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: 12px; padding: 12px 10px;
  font-size: 12.5px; color: var(--text-dim); cursor: pointer;
  transition: border-color .15s ease;
}
#activityFooterBtn { flex: 1.4; }
#onlineFooterBtn { flex: 1; }
.forum-footer-block:active { border-color: var(--accent); }
.forum-footer-icon { display: inline-flex; opacity: .8; }

/* Period chips */
.forum-period-row { display: flex; gap: 7px; margin-bottom: 12px; }
.forum-period-btn {
  flex: 1; padding: 8px 0; border-radius: 9px;
  background: var(--bg-elevated); border: 1px solid var(--card-border);
  color: var(--text-dim); font-family: inherit; font-size: 12.5px;
  font-weight: 600; cursor: pointer; transition: all .15s ease;
}
.forum-period-btn.active {
  border-color: var(--accent); color: var(--accent);
  background: rgba(94,230,196,.08);
}

/* One card per comment, matching the topic rows so the two lists feel like
   the same kind of thing. */
.forum-activity-row {
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: 12px; padding: 11px 13px; margin-bottom: 8px; cursor: pointer;
  transition: border-color .15s ease, transform .12s ease;
}
.forum-activity-row:active { border-color: var(--accent); transform: scale(.995); }
/* The head line is bolder than the body, as asked: it says WHO and WHERE,
   which is what the eye scans for; the comment text is the detail. */
.forum-activity-head {
  display: flex; align-items: baseline; gap: 5px;
  font-size: 12.5px; font-weight: 700; margin-bottom: 4px;
  overflow: hidden; white-space: nowrap;
}
.forum-activity-author { flex-shrink: 0; }
.forum-activity-sep { color: var(--text-dim); flex-shrink: 0; }
.forum-activity-topic {
  color: var(--accent); min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
/* Two lines maximum: a long comment must not turn one row into a wall. */
.forum-activity-body {
  font-size: 13px; font-weight: 400; line-height: 1.45; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin-bottom: 4px;
}
.forum-activity-imgs {
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--text-dim); font-size: 12px; vertical-align: -2px;
}
.forum-activity-time { font-size: 11px; color: var(--text-dim); }

/* Shown while a server page is in flight, in place of the button. */
.forum-loading-older {
  text-align: center; padding: 12px; font-size: 12.5px; color: var(--text-dim);
}

.forum-load-older { text-align: center; padding: 10px; }
.forum-load-older button {
  background: var(--chip); border: 1px solid var(--card-border); color: var(--text-dim);
  border-radius: 999px; padding: 8px 18px; font-size: 12.5px; font-weight: 700; cursor: pointer;
}

/* A COLUMN now: the badge is a full-width line above everything, and the
   avatar + text sit in a row beneath it. Previously the badge lived inside
   the text column, so it started level with the name rather than above the
   avatar, and looked attached to the name instead of to the whole comment. */
.forum-comment {
  display: flex; flex-direction: column; padding: 10px 4px;
  animation: commentIn .25s ease; scroll-margin-top: 80px;
}
.forum-comment-row { display: flex; gap: 10px; }
@keyframes commentIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.forum-comment.highlight { animation: highlightPulse 1.4s ease; }
@keyframes highlightPulse {
  0%, 100% { background: transparent; }
  25% { background: rgba(94,230,196,0.14); }
}
.forum-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; background: var(--chip);
  object-fit: cover; cursor: pointer; border: 1px solid var(--card-border);
}
.forum-avatar-fallback {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; background: var(--accent-dim);
  color: var(--btn-text); display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; cursor: pointer;
}
.forum-comment-body { flex: 1; min-width: 0; }
/* Name and time on the left, actions pinned right. NOT wrapping: the whole
   point of icon-only actions is that they fit on one line, and a wrap here
   would put them back on a line of their own. */
.forum-comment-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 3px;
}
/* The identity block is the part allowed to shrink — a long name ellipsizes
   rather than pushing the actions off the edge, which is exactly what the
   old layout did to "O'chirish". */
.forum-comment-who {
  display: flex; align-items: baseline; gap: 8px;
  flex-wrap: wrap; min-width: 0; flex: 1;
}

/* ---- Icon-only comment actions (chunk AY) ---- */
.forum-comment-acts {
  display: flex; align-items: center; gap: 1px; flex-shrink: 0;
}
.forum-act {
  display: inline-flex; align-items: center; gap: 3px;
  background: none; border: none; padding: 6px; border-radius: 8px;
  color: var(--text-dim); cursor: pointer;
  font-family: inherit; font-size: 11px; font-weight: 700; line-height: 1;
  /* 30px square minimum: below that these become hard to hit accurately with
     a thumb, which matters more here than saving a few pixels. */
  min-width: 30px; min-height: 30px; justify-content: center;
  touch-action: manipulation;
  transition: color .15s ease, background .15s ease;
}
.forum-act svg { width: 15px; height: 15px; display: block; flex-shrink: 0; }
.forum-act:hover { color: var(--text); background: var(--chip); }
.forum-act:active { transform: scale(.92); }
/* Destructive actions stay neutral until touched, so a row of icons does not
   read as a row of warnings. */
.forum-act.is-danger:hover,
.forum-act.is-danger:active { color: var(--warn, #FF5B6E); }
.forum-act.like-btn.liked { color: var(--warn); }
.forum-act.like-btn.liked svg { fill: var(--warn); }
/* Empty when a comment has no likes. :empty collapses it so the heart is not
   followed by a stray gap — the element still EXISTS for the click handler to
   write into, which is the part that matters. */
.forum-act .like-count { font-size: 11px; }
.forum-act .like-count:empty { display: none; }
.forum-comment-name { font-weight: 700; font-size: 13.5px; cursor: pointer; }
.forum-comment-name.role-moderator { color: #8FA8C4; }
.forum-comment-name.role-admin { color: var(--accent); }
.forum-comment-name.role-supervisor { color: #7AA2FF; }
.forum-comment-name.role-seller { color: var(--warn); }
.forum-comment-name.role-superadmin { color: #FF5050; }
.forum-comment-time { font-size: 11px; color: var(--text-dim); }
.forum-comment-edited { font-size: 10.5px; color: var(--text-dim); font-style: italic; }
/* Replaced by .forum-comment-badge (chunk AZ) — kept only so the svg sizing
   rule below has something to attach to if any older markup lingers. */
.forum-pinned-tag { font-size: 10.5px; color: var(--accent); font-weight: 700; }

/* A comment's badge: its own line above the name, so it labels the comment
   instead of competing with the name and the action icons for one row. */
.forum-comment-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; margin-bottom: 4px;
}
.forum-comment-badge svg { width: 12px; height: 12px; flex-shrink: 0; }
/* The topic's opening post and a moderator-pinned reply are different things,
   so they read differently: the original post is the accent colour, a pinned
   reply is muted — it is a highlight, not the subject of the thread. */
.forum-comment-badge.is-original { color: var(--accent); }
.forum-comment-badge.is-pinned { color: var(--text-dim); }
.forum-pending-tag { font-size: 10.5px; color: var(--warn); font-weight: 700; }
.forum-comment.pending-deletion {
  background: rgba(255,138,91,0.06); border: 1px dashed rgba(255,138,91,0.35);
  border-radius: 10px; padding: 10px 8px;
}
.forum-comment-text { font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.forum-comment-text.deleted { color: var(--text-dim); font-style: italic; }

.forum-quote {
  display: flex; align-items: center; gap: 6px; background: var(--chip); border-left: 3px solid var(--accent);
  border-radius: 8px; padding: 6px 10px; font-size: 12px; color: var(--text-dim); margin-bottom: 6px;
  cursor: pointer; max-width: 100%; overflow: hidden;
}
.forum-quote b { color: var(--text); font-weight: 700; flex-shrink: 0; }
.forum-quote span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* .forum-comment-actions / .forum-action-btn removed in chunk AY — the
   comment actions are now the icon-only .forum-act row in the header.
   The sizing rules below lived inside that block and were removed with it by
   mistake; an inline icon with no rule falls back to filling its container,
   which is how the pin marker became a 200px graphic. */
.forum-edit-icon-btn svg { width: 15px; height: 15px; display: block; }
.forum-pinned-tag svg { width: 12px; height: 12px; flex-shrink: 0; }
.subcat-icon { display: inline-flex; vertical-align: -2px; margin-right: 6px; }
.subcat-icon svg { width: 14px; height: 14px; }

/* No CSS catch-all here on purpose: a scoped one like
   `.forum-screen svg { ... }` is MORE specific than the per-context rules
   above and would silently override every one of them. The safety net lives
   on the icons themselves instead — see the width/height attributes on
   ICONS in forum.js. */

/* ---------- Composer (FAB -> input morph) ---------- */
/* True viewport-fixed — this element is deliberately kept OUTSIDE the
   .forum-screen hierarchy in the DOM (appended to a dock sibling of the
   screen stack), because any transformed ancestor — which every active
   .forum-screen now permanently has, even at translateX(0) — creates a new
   containing block that would otherwise trap position:fixed and make it
   behave like position:absolute relative to that ancestor instead of the
   real screen, causing it to drift with scrolling/sliding content. */
.forum-fab-wrap {
  position: fixed; left: 0; right: 0; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex; justify-content: center; z-index: 60; pointer-events: none;
}
.forum-fab-inner { pointer-events: auto; width: 100%; max-width: 700px; padding: 0 5%; position: relative; min-height: 56px; display: flex; align-items: flex-end; }
.forum-fab {
  position: absolute; right: 0; bottom: 0;
  width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: var(--btn-text);
  border: none; display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 8px 24px -6px rgba(0,0,0,0.4); transition: all .3s cubic-bezier(.34,1.4,.64,1);
}
.forum-fab:active { transform: scale(0.92); }

.forum-composer {
  width: 100%; background: var(--card); border: 1px solid var(--card-border); border-radius: 20px;
  box-shadow: 0 8px 24px -6px rgba(0,0,0,0.4); overflow: hidden;
  max-height: 0; opacity: 0; transition: max-height .3s cubic-bezier(.2,.9,.3,1), opacity .25s ease;
}
.forum-composer.open { max-height: 200px; opacity: 1; }
.forum-composer-reply {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--chip); padding: 8px 14px; font-size: 12px; color: var(--text-dim);
}
.forum-composer-reply button { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 15px; }
/* The inline icons carry no width/height ATTRIBUTES — they are sized in CSS
   so one rule governs every place they appear. This bar was missed when the
   emoji were replaced, and an unsized SVG defaults to filling its container:
   the reply arrow expanded to the full width of the composer, which is the
   grey blob that appeared above the input and pushed the send button out of
   the row. */
.forum-composer-reply svg { width: 13px; height: 13px; vertical-align: -2px; flex-shrink: 0; }
/* The text must be allowed to shrink, or a long quoted comment forces the bar
   wider than the composer and the cancel button leaves the screen. */
.forum-composer-reply span {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.forum-composer-row { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; }
.forum-composer-row textarea {
  flex: 1; border: none; background: transparent; color: var(--text); font-family: 'Manrope', sans-serif;
  /* 16px minimum: iOS Safari auto-zooms the whole page when focusing an
     input whose font-size is under 16px, and with no maximum-scale in the
     viewport meta it stays zoomed afterwards — that's what widened the page
     when tapping the comment box. */
  font-size: 16px; resize: none; outline: none; max-height: 100px; padding: 8px 4px; line-height: 1.4;
}
.forum-composer-send {
  width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: var(--btn-text);
  border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
  transition: opacity .15s ease;
}
.forum-composer-send:disabled { opacity: .4; cursor: default; }

/* ---------- New-comments pill (shown when scrolled up during live updates) ---------- */
.forum-new-pill {
  position: sticky; bottom: 90px; display: flex; justify-content: center; z-index: 19;
  opacity: 0; transform: translateY(10px); pointer-events: none; transition: all .25s ease;
}
.forum-new-pill.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.forum-new-pill button {
  background: var(--accent); color: var(--btn-text); border: none; border-radius: 999px;
  padding: 8px 18px; font-size: 12.5px; font-weight: 700; cursor: pointer; box-shadow: 0 6px 18px -4px rgba(0,0,0,0.4);
}

/* ---------- Profile popover modal ---------- */
.forum-profile-overlay {
  position: fixed; inset: 0; background: var(--modal-overlay); backdrop-filter: blur(4px);
  z-index: 100; display: none; align-items: center; justify-content: center; padding: 20px;
}
.forum-profile-overlay.open { display: flex; }
.forum-profile-card {
  background: var(--bg-elevated, var(--card)); border: 1px solid var(--card-border); border-radius: 22px;
  width: 100%; max-width: 380px; padding: 26px; animation: profileIn .25s cubic-bezier(.2,.9,.3,1);
}
@keyframes profileIn { from { opacity: 0; transform: scale(.94) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.forum-profile-avatar {
  width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 14px; display: block; object-fit: cover;
  border: 2px solid var(--accent);
}
.forum-profile-avatar-fallback {
  width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 14px; background: var(--accent-dim);
  color: var(--btn-text); display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800;
}
.forum-profile-name { text-align: center; font-weight: 700; font-size: 18px; font-family: 'Space Grotesk', sans-serif; }
.forum-profile-username { text-align: center; color: var(--text-dim); font-size: 13px; margin-bottom: 4px; }
.forum-profile-role {
  display: block; margin: 8px auto 16px; width: fit-content; padding: 4px 12px; border-radius: 999px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: var(--chip); color: var(--text-dim);
}
.forum-profile-role.moderator { background: rgba(143,168,196,0.15); color: #8FA8C4; }
.forum-profile-role.admin { background: rgba(94,230,196,0.15); color: var(--accent); }
.forum-profile-role.supervisor { background: rgba(122,162,255,0.15); color: #7AA2FF; }
.forum-profile-role.seller { background: rgba(255,138,91,0.15); color: var(--warn); }
.forum-profile-role.superadmin { background: rgba(255,80,80,0.15); color: #FF5050; }
.forum-profile-stats { display: flex; gap: 10px; margin-bottom: 18px; }
.forum-profile-stat { flex: 1; background: var(--chip); border-radius: 12px; padding: 12px; text-align: center; }
.forum-profile-stat b { display: block; font-size: 19px; font-family: 'Space Grotesk', sans-serif; color: var(--accent); }
.forum-profile-stat span { font-size: 10.5px; color: var(--text-dim); text-transform: uppercase; }
.forum-profile-banned {
  background: rgba(255,91,110,0.1); border: 1px solid rgba(255,91,110,0.3); color: #FF9AA6;
  border-radius: 10px; padding: 10px 12px; font-size: 12.5px; margin-bottom: 14px;
}
.forum-profile-actions { display: flex; flex-direction: column; gap: 8px; }
.forum-profile-actions .btn-row { display: flex; gap: 8px; }
.forum-btn {
  flex: 1; padding: 11px; border-radius: 12px; font-weight: 700; font-size: 13px; cursor: pointer;
  border: 1.5px solid var(--card-border); background: transparent; color: var(--text); font-family: 'Manrope', sans-serif;
}
.forum-btn.primary { background: var(--accent); color: var(--btn-text); border-color: var(--accent); }
.forum-btn.danger { border-color: var(--warn); color: var(--warn); }
.forum-btn.close-only { margin-top: 4px; }

.forum-ban-duration-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0; }
.forum-ban-duration-grid button {
  padding: 8px 4px; border-radius: 10px; border: 1.5px solid var(--card-border); background: var(--chip);
  color: var(--text); font-size: 11.5px; font-weight: 700; cursor: pointer;
}
.forum-ban-duration-grid button.selected { background: var(--warn); border-color: var(--warn); color: #fff; }

/* ---------- Simple prompt/creation modal (category/subcategory/topic) ---------- */
.forum-prompt-overlay {
  position: fixed; inset: 0; background: var(--modal-overlay); backdrop-filter: blur(4px);
  z-index: 100; display: none; align-items: center; justify-content: center; padding: 20px;
}
.forum-prompt-overlay.open { display: flex; }
.forum-prompt-card {
  background: var(--bg-elevated, var(--card)); border: 1px solid var(--card-border); border-radius: 20px;
  width: 100%; max-width: 380px; padding: 22px; animation: profileIn .2s ease;
}
.forum-prompt-card h3 { margin: 0 0 14px; font-size: 16px; }
.forum-prompt-card input:not([type=checkbox]) {
  width: 100%; padding: 12px 14px; border-radius: 10px; background: var(--bg-elevated); border: 1px solid var(--card-border);
  color: var(--text); font-size: 16px; margin-bottom: 14px; font-family: 'Manrope', sans-serif; /* 16px: prevents iOS focus auto-zoom */
}
.forum-prompt-actions { display: flex; gap: 8px; }

.forum-empty-msg { text-align: center; color: var(--text-dim); padding: 40px 20px; font-size: 13.5px; }
.forum-toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(20px); opacity: 0;
  background: var(--card); border: 1px solid var(--card-border); color: var(--text); padding: 12px 20px;
  border-radius: 12px; font-size: 13px; z-index: 200; transition: all .25s ease; pointer-events: none;
  max-width: 90vw; text-align: center;
}
.forum-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Feature 1: category/subcategory edit icons ---------- */
.forum-edit-icon-btn {
  background: none; border: none; cursor: pointer; font-size: 14px; padding: 4px 6px;
  border-radius: 8px; transition: background .15s ease, color .15s ease; line-height: 1;
  /* The pen is an inline SVG drawn with `stroke="currentColor"`, and the
     button inherited the browser's default button colour — near-black, which
     vanished against the dark card. It was only visible before because it
     used to be an emoji, which carries its own colours. */
  color: var(--text-dim);
  display: inline-flex; align-items: center; justify-content: center;
}
.forum-edit-icon-btn:hover { background: var(--chip); color: var(--text); }
.forum-edit-icon-btn:active { color: var(--accent); }

/* ---------- Feature 4: online users footer + modal ---------- */
.forum-online-footer {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 18px; padding: 14px; border-radius: 14px; background: var(--card);
  border: 1px solid var(--card-border); color: var(--text-dim); font-size: 13px;
  font-weight: 600; cursor: pointer; transition: border-color .15s ease;
}
.forum-online-footer:hover { border-color: var(--accent-dim); }
.forum-online-footer b { color: var(--accent); }
.forum-online-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 3px rgba(94,230,196,0.2);
  animation: onlinePulse 2s ease-in-out infinite;
}
@keyframes onlinePulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.forum-online-user-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 6px; cursor: pointer;
  border-radius: 10px; transition: background .15s ease; font-size: 14px; font-weight: 600;
}
.forum-online-user-row:hover { background: var(--chip); }
.forum-online-badge {
  position: absolute; bottom: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--bg-elevated, var(--card));
}

/* ---------- Feature 2: profile icon in header + settings modal ---------- */
.profile-tab-btn { flex: none !important; }
.forum-settings-label {
  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-dim); font-weight: 700; margin: 14px 0 6px;
}
.forum-settings-label:first-of-type { margin-top: 0; }
.forum-settings-checkbox {
  display: flex; align-items: center; gap: 10px; margin-top: 16px; cursor: pointer;
  font-size: 13.5px; color: var(--text);
}
.forum-settings-checkbox input { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }

/* Seller badge (feature 6) - separate from the admin-rank role badge */
.forum-seller-badge {
  /* Bottom margin so the badge is not welded to the stat tiles below it. */
  display: block; margin: 8px auto 14px; width: fit-content; max-width: 100%; padding: 6px 14px;
  border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(94,230,196,0.12);
  color: var(--accent); border: 1px solid rgba(94,230,196,0.3); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.forum-seller-badge.static { cursor: default; }
.forum-seller-badge:not(.static):hover { background: rgba(94,230,196,0.2); }

/* Feature 9: "new activity in the last 12h" badge — a small glowing pill
   riding on the existing count pill, not a separate element, so it reads
   as "12 (+5 new)" rather than two unrelated numbers competing for attention. */
.forum-new-badge {
  display: inline-block; margin-left: 5px; padding: 1px 6px; border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), #4ADEBE); color: var(--btn-text);
  font-size: 10px; font-weight: 800; vertical-align: middle;
  box-shadow: 0 0 8px rgba(94,230,196,0.5);
  animation: newBadgePulse 2.4s ease-in-out infinite;
}
@keyframes newBadgePulse { 0%, 100% { opacity: 1; } 50% { opacity: .75; } }