/* ============================== FEED PAGE ================================ */
.page-header {
  margin-bottom: 2rem;
}

.page-header h1 {
  margin: 0;
  color: var(--site-accent);
  font-size: 2.5rem;
  letter-spacing: 2px;
}

.page-note {
  display: block;
  color: var(--text-muted);
  font-size: 0.9rem;
  letter-spacing: 1px;
  margin-top: 0.25rem;
}

.feed-controls {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1.5rem;
}

.refresh-btn {
  background: transparent;
  border: 1px solid var(--site-accent);
  color: var(--site-accent);
  padding: 0.5rem 1rem;
  font-family: 'VT323', monospace;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
}

.refresh-btn:hover {
  background: var(--site-accent);
  color: #000;
}

.feed-posts {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.feed-post {
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--border-medium);
  border-left: 3px solid var(--site-accent);
  border-radius: 4px;
  padding: 1.25rem;
  transition: transform 0.2s, box-shadow 0.2s;
}

.feed-post:hover {
  transform: translateX(2px);
  box-shadow: 0 0 15px rgba(var(--site-accent-rgb), 0.15);
}

.feed-post-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.feed-post-author {
  color: var(--site-accent);
  font-weight: bold;
  letter-spacing: 1px;
  flex: 1;
}

.feed-post-time {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.feed-post-content {
  color: var(--text-main);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.feed-post-actions {
  display: flex;
  gap: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-light);
}

.feed-empty {
  text-align: center;
  padding: 3rem;
  color: var(--text-muted);
}

/* Mobile */
@media (max-width: 620px) {
  .sidebar {
    width: 100%;
    position: static;
  }

  .main-content {
    margin-left: 0;
    padding: 1rem;
  }
}


/* ==========================================================================
   FEED PAGE SHELL — app frame for /feed/
   --------------------------------------------------------------------------
   Append to the END of feed.css.
   Reads the theme variables declared in style.css:
     --site-accent / --site-accent-rgb / --border-medium / --border-subtle
     --panel-bg / --panel-bg-strong / --bg-primary..tertiary / --text-*
   ========================================================================== */

:root {
  --sidebar-w:   236px;
  --bottombar-h: 58px;
}

/* Reserve room for the fixed player bar. Done on <body> rather than
   .main-content so feed.css's mobile `padding: 1rem` shorthand can't
   wipe it out. */
body {
  padding-bottom: var(--bottombar-h);
}

.app-shell {
  display: flow-root;
  min-height: calc(100vh - var(--bottombar-h));
}


/* ==========================================================================
   SIDEBAR
   ========================================================================== */

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: var(--bottombar-h);      /* stops above the player bar */
  width: var(--sidebar-w);
  z-index: 950;                    /* below .scanlines (990) so the CRT
                                      wash covers it uniformly */
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem 1.25rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--site-accent) #0a0a0a;
  background:
    linear-gradient(180deg, rgba(var(--site-accent-rgb), 0.07), rgba(0, 0, 0, 0) 42%),
    var(--bg-secondary);
  border-right: 1px solid var(--border-medium);
  box-shadow: 0 0 30px rgba(var(--site-accent-rgb), 0.08);
}

.sidebar::-webkit-scrollbar       { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: #0a0a0a; }
.sidebar::-webkit-scrollbar-thumb {
  background: var(--site-accent);
  border-radius: 4px;
}


/* --- Brand ------------------------------------------------------------- */

.brand {
  display: block;
  font-family: 'VT323', monospace;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: 4px;
  text-decoration: none;
  color: var(--site-accent);
  text-shadow:
    0 0 10px var(--site-accent),
    0 0 24px rgba(var(--site-accent-rgb), 0.5);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-subtle);
}

.brand:hover,
.brand:focus-visible {
  color: #fff;
  text-shadow: 0 0 12px #fff;
  outline: none;
}


/* --- Navigation -------------------------------------------------------- */

.side-nav {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.nav-link {
  position: relative;
  display: block;
  padding: 0.7rem 0.9rem;
  color: var(--site-accent);
  text-decoration: none;
  font-family: 'VT323', monospace;
  font-size: 1.15rem;
  letter-spacing: 2px;
  border: 1px solid transparent;
  border-left: 3px solid transparent;
  transition: background 0.18s ease, border-color 0.18s ease,
              color 0.18s ease, transform 0.18s ease;
}

.nav-link:hover,
.nav-link:focus-visible {
  background: rgba(var(--site-accent-rgb), 0.12);
  border-left-color: var(--site-accent);
  transform: translateX(2px);
  outline: none;
}

.nav-link.active {
  background: rgba(var(--site-accent-rgb), 0.18);
  border: 1px solid var(--border-medium);
  border-left: 3px solid var(--site-accent);
  color: #fff;
  text-shadow: 0 0 10px var(--site-accent);
  box-shadow: 0 0 14px rgba(var(--site-accent-rgb), 0.25);
}


/* --- User panel --------------------------------------------------------
   margin-top: auto pins it to the foot of the sidebar.
   NOTE: `:empty` only matches if the element truly has no child nodes —
   a whitespace text node counts as content. feed.html currently has
   indentation plus an HTML comment inside #user-panel, so :empty will NOT
   fire. Write it as <div class="user-panel" id="user-panel"></div> on one
   line if you want the collapse behaviour. */

.user-panel {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-family: 'VT323', monospace;
  font-size: 1rem;
  letter-spacing: 1px;
}

.user-panel:empty {
  display: none;
}

.user-panel a {
  color: var(--site-accent);
  text-decoration: none;
}

.user-panel a:hover {
  color: #fff;
  text-shadow: 0 0 10px var(--site-accent);
}


/* ==========================================================================
   MAIN COLUMN
   ========================================================================== */

.main-content {
  margin-left: var(--sidebar-w);
  padding: 2.5rem 2rem 3rem;
  max-width: 920px;               /* raise/remove for a wider feed */
  min-height: calc(100vh - var(--bottombar-h));
}


/* ==========================================================================
   PLAYER BAR
   --------------------------------------------------------------------------
   feed.html uses <footer class="bottom-bar">, so style.css's bare
   `footer { padding: 2rem 0; text-align: center; ... }` also applies.
   The class selector outranks the element selector, so these win on merit.
   ========================================================================== */

.bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--bottombar-h);
  z-index: 945;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  margin: 0;
  text-align: center;
  background: rgba(13, 13, 13, 0.95);
  border-top: 1px solid var(--border-medium);
  box-shadow: 0 -6px 24px rgba(var(--site-accent-rgb), 0.12);
  backdrop-filter: blur(6px);
}

/* .now-playing is styled in style.css as a block inside .player-wrapper;
   this scopes it down to a single centred line in the bar. */
.bottom-bar .now-playing {
  width: 100%;
  max-width: 720px;
  margin: 0;
  padding: 0;
  gap: 1rem;
  justify-content: center;
  font-family: 'VT323', monospace;
  font-size: 1rem;
  letter-spacing: 2px;
  color: var(--site-accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ==========================================================================
   NARROW VIEWPORTS
   --------------------------------------------------------------------------
   Must stay LAST in this block. feed.css's own 620px rules are earlier in
   the file, so these win the ties.
   ========================================================================== */

@media (max-width: 860px) {
  .sidebar {
    position: static;
    width: 100%;
    bottom: auto;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    overflow-x: auto;
    overflow-y: visible;
    border-right: none;
    border-bottom: 1px solid var(--border-medium);
    box-shadow: none;
  }

  .brand {
    font-size: 1.5rem;
    letter-spacing: 3px;
    padding: 0;
    border-bottom: none;
    white-space: nowrap;
  }

  .side-nav {
    flex-direction: row;
    gap: 0.5rem;
  }

  .nav-link {
    padding: 0.5rem 0.75rem;
    white-space: nowrap;
  }

  .nav-link:hover,
  .nav-link:focus-visible {
    transform: none;
  }

  .user-panel {
    margin: 0 0 0 auto;
    padding: 0;
    border-top: none;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
  }

  .main-content {
    margin-left: 0;
    max-width: none;
    padding: 1.5rem 1rem 2.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-link { transition: none; }
}


/* ==========================================================================
   OPTIONAL — floating buttons vs. sidebar
   --------------------------------------------------------------------------
   .chat-toggle-btn (bottom: 20px, left: 20px) and .bg-slideshow-toggle
   (bottom: 108px, left: 20px) are both pinned bottom-left, so on /feed/
   they sit on top of the sidebar. Add class="feed-page" to <body> in
   feed.html and uncomment this to shift them clear.

   !important is required because style.css declares .bg-slideshow-toggle
   with !important throughout.
   ========================================================================== */

/*
body.feed-page .chat-toggle-btn,
body.feed-page .bg-slideshow-toggle {
  left: calc(var(--sidebar-w) + 20px + env(safe-area-inset-left, 0px)) !important;
}

@media (max-width: 860px) {
  body.feed-page .chat-toggle-btn,
  body.feed-page .bg-slideshow-toggle {
    left: calc(16px + env(safe-area-inset-left, 0px)) !important;
  }
}
*/


   /* ==================== REACTIONS (ported from wall.css) ==================== */

.reaction-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.emoji-btn {
  position: relative;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  filter: grayscale(0.65);
  opacity: 0.55;
  transition: transform 0.15s ease, opacity 0.15s ease,
              filter 0.15s ease, background 0.15s ease,
              border-color 0.15s ease;
}

.emoji-btn:hover {
  opacity: 1;
  filter: grayscale(0);
  background: rgba(var(--site-accent-rgb), 0.12);
  transform: scale(1.14);
}

.emoji-btn:focus-visible {
  outline: 2px solid var(--site-accent);
  outline-offset: 2px;
}

.emoji-btn.is-on {
  opacity: 1;
  filter: grayscale(0);
  border-color: var(--border-medium);
  background: rgba(var(--site-accent-rgb), 0.18);
  box-shadow: 0 0 10px rgba(var(--site-accent-rgb), 0.35);
}

.emoji-btn.just-hit {
  animation: emoji-pop 0.32s cubic-bezier(0.2, 1.4, 0.4, 1);
}

@keyframes emoji-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.42); }
  100% { transform: scale(1); }
}

.emoji-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--site-accent);
  color: #000;
  font-size: 0.7rem;
  line-height: 16px;
  text-align: center;
  font-weight: bold;
  display: none;
}

.emoji-btn.is-on .emoji-count,
.emoji-btn.has-count .emoji-count { display: block; }

.reaction-row.at-limit .emoji-btn:not(.is-on) {
  opacity: 0.2;
  pointer-events: none;
}

@media (max-width: 620px) {
  .emoji-btn { width: 40px; height: 40px; font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .emoji-btn.just-hit { animation: none; }
}


/* ==========================================================================
   FEED PAGE — SITE NAV INTEGRATION
   --------------------------------------------------------------------------
   Append to the END of feed.css.

   The rail now carries the full site nav (10 links) plus the language
   switcher, so it needs a tighter rhythm than the 3-link version it was
   originally built for. Everything here is additive — nothing above is
   deleted, just outranked on merit (source order, same specificity).
   ========================================================================== */

/* --- Nav group headings --- */
.side-section-title {
  display: block;
  padding: 0 0.9rem;
  margin: 0.35rem 0 0.1rem;
  color: var(--text-muted);
  font-family: 'VT323', monospace;
  font-size: 0.78rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Three nav groups + brand + langs + user panel need less air between them */
.sidebar {
  gap: 1rem;
}

/* Tighter rows now that there are ten of them */
.sidebar .nav-link {
  padding: 0.55rem 0.9rem;
  font-size: 1.05rem;
}

/* --- Language switcher, de-stickied for the rail ---
   style.css declares .lang-selector as position: sticky / top: 65px with its
   own opaque background and bottom border — that's built for the page-level
   bar sitting under .main-header, not for a box inside the sidebar. */
.sidebar .lang-selector {
  position: static;
  top: auto;
  z-index: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0;
  background: transparent;
  border-bottom: none;
}

.sidebar .lang-selector .lang-btn {
  flex: 1 1 auto;
  padding: 0.35rem 0.5rem;
  font-size: 0.85rem;
  letter-spacing: 1px;
}

/* --- Site footer, living inside the content column ---
   Element-level `footer` rules in style.css already supply the background,
   border and centring; this just spaces it off the last post. */
.site-footer {
  margin-top: 3rem;
}

.site-footer .social-links a {
  margin: 0 0.6rem;
}

/* ==========================================================================
   NARROW VIEWPORTS — rail becomes a WRAPPED top strip
   --------------------------------------------------------------------------
   Ten links on one horizontally-scrolling line is miserable on a phone, so
   wrap instead. Overrides feed.css's 860px block, which assumed 3 links.
   Must stay LAST in the file.
   ========================================================================== */

@media (max-width: 860px) {
  .side-section-title { display: none; }

  .sidebar {
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;      /* row column */
    overflow-x: visible;      /* wrap replaces the scroll strip */
    overflow-y: visible;
  }

  .side-nav {
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .sidebar .nav-link {
    padding: 0.45rem 0.7rem;
    font-size: 1rem;
    letter-spacing: 1px;
  }

  .sidebar .lang-selector {
    flex-wrap: nowrap;
  }

  .sidebar .lang-selector .lang-btn {
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
  }
}

/* ==========================================================================
   FEED PAGE — TOP HEADER LAYOUT BRIDGE
   --------------------------------------------------------------------------
   Replace sidebar-app-shell with full-site layout (header + lang bar).
   Ported from index.html structure.
   ========================================================================== */

/* --- Page Hero Section --- */
.page-hero {
  background: linear-gradient(rgba(13,13,13,0.7), rgba(13,13,13,0.9));
  color: var(--site-accent);
  padding: 4rem 0;
  text-align: center;
  border-bottom: 1px solid var(--border-medium);
}

.page-hero h1 {
  font-size: 6.4rem;
  margin: 0 0 0.5rem;
  text-shadow: 0 0 10px var(--site-accent);
  letter-spacing: 3px;
}

.page-hero .tagline {
  opacity: 0.9;
  font-size: 1.3rem;
  margin: 0;
  color: var(--site-accent);
  letter-spacing: 3px;
}

/* --- Main Feed Container --- */
.feed-content {
  padding: 3rem 0;
  background: var(--bg-primary);
}

.feed-controls {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1.5rem;
}

.refresh-btn {
  background: transparent;
  border: 1px solid var(--site-accent);
  color: var(--site-accent);
  padding: 0.5rem 1rem;
  font-family: 'VT323', monospace;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
}

.refresh-btn:hover {
  background: var(--site-accent);
  color: #000;
}

.feed-posts {
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.feed-empty {
  text-align: center;
  padding: 3rem;
  color: var(--text-muted);
  font-size: 1.1rem;
  letter-spacing: 1px;
}

/* --- Site Footer --- */
.site-footer {
  background: var(--bg-secondary);
  padding: 2rem 0;
  text-align: center;
  border-top: 1px solid var(--border-subtle);
}

.site-footer p {
  margin: 0.25rem 0;
  color: var(--text-muted);
  font-size: 0.9rem;
  letter-spacing: 1px;
}

.site-footer .social-links a {
  color: var(--site-accent);
  margin: 0 0.75rem;
  text-decoration: none;
  font-size: 0.9rem;
  letter-spacing: 1px;
  transition: all 0.3s;
}

.site-footer .social-links a:hover {
  color: #fff;
  text-shadow: 0 0 10px var(--site-accent);
}

/* ==========================================================================
   BACKGROUND SLIDESHOW TOGGLE (port from style.css)
   ========================================================================== */

.bg-slideshow-toggle {
  position: fixed !important;
  left: calc(20px + env(safe-area-inset-left, 0px)) !important;
  bottom: calc(108px + env(safe-area-inset-bottom, 0px)) !important;
  top: auto !important;
  right: auto !important;

  width: 62px !important;
  height: 62px !important;
  border-radius: 50% !important;
  padding: 0 !important;

  background: #ff8c00 !important;
  color: #000 !important;
  border: 2px solid #ff8c00 !important;

  font-size: 1.7rem !important;
  line-height: 1 !important;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  box-shadow: 0 0 15px rgba(255, 140, 0, 0.6);
  transition: transform 0.25s ease, box-shadow 0.25s ease,
              background 0.25s ease, border-color 0.25s ease;
  z-index: 9100;
}

.bg-slideshow-toggle:hover {
  transform: scale(1.08);
  box-shadow: 0 0 26px rgba(255, 140, 0, 0.9);
}

.bg-slideshow-toggle.is-on {
  background: #ff8c00 !important;
  color: #000 !important;
  animation: pulse-glow-orange 4s infinite;
}

@keyframes pulse-glow-orange {
  0%, 100% { box-shadow: 0 0 14px rgba(255, 140, 0, 0.55); }
  50%      { box-shadow: 0 0 32px rgba(255, 140, 0, 0.90); }
}

@media (prefers-reduced-motion: reduce) {
  .bg-slideshow-toggle.is-on { animation: none; }
}

@media (max-width: 768px) {
  .bg-slideshow-toggle {
    width: 56px !important;
    height: 56px !important;
    font-size: 1.5rem !important;
    left: calc(16px + env(safe-area-inset-left, 0px)) !important;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ==========================================================================
   BACKGROUND SLIDESHOW LAYER
   wall-bg.js injects <div class="wall-bg-layer"> and depends on these rules.
   Missing on /feed/ = slideshow "runs" but renders a zero-height box.
   ========================================================================== */

.wall-bg-layer {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 1;
  pointer-events: none;
  transition: opacity 4.8s ease-in-out;
}

.wall-bg-layer--fade { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .wall-bg-layer { transition-duration: 0.001ms !important; }
}

/* Let the slideshow layer show through, same as /wall/ */
.feed-content { background: transparent; }
.site-footer  { background: transparent; }

/* Footer socials as accent chips (mirrors .social-link on /wall/) */
.site-footer .social-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

.site-footer .social-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1rem;
  margin: 0;
  background: rgba(var(--site-accent-rgb), 0.1);
  border: 1px solid var(--border-medium);
  border-radius: 4px;
  color: var(--site-accent);
  font-family: 'VT323', monospace;
  font-size: 0.95rem;
  letter-spacing: 1px;
  text-decoration: none;
  transition: all 0.2s;
}

.site-footer .social-links a:hover {
  background: var(--site-accent);
  color: #000;
  text-shadow: none;
  box-shadow: 0 0 12px var(--site-accent);
}

/* ==========================================================================
   BACKGROUND SLIDESHOW LAYER — MISSING ON /FEED/
   wall-bg.js injects <div class="wall-bg-layer"> and depends on these rules.
   ========================================================================== */

.wall-bg-layer {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 1;
  pointer-events: none;
  transition: opacity 4.8s ease-in-out;
}

.wall-bg-layer--fade { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .wall-bg-layer { transition-duration: 0.001ms !important; }
}

/* Let slideshow show through — remove opaque backgrounds */
.feed-content { background: transparent; }
.site-footer  { background: transparent; }

/* Highlighted social chips in footer (matches wall.css .social-link) */
.site-footer .social-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

.site-footer .social-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1rem;
  background: rgba(var(--site-accent-rgb), 0.1);
  border: 1px solid var(--border-medium);
  border-radius: 4px;
  color: var(--site-accent);
  font-family: 'VT323', monospace;
  font-size: 0.95rem;
  letter-spacing: 1px;
  text-decoration: none;
  transition: all 0.2s;
}

.site-footer .social-links a:hover {
  background: var(--site-accent);
  color: #000;
  text-shadow: none;
  box-shadow: 0 0 12px var(--site-accent);
}
/* ==========================================================================
   BACKGROUND SLIDESHOW BUBBLE
   Mirrors .bg-slideshow-toggle in style.css so /feed/ and / match.
   Script hooks preserved: #wall-bg-bubble + .wall-bg-bubble (+ .is-on/.active)
   No !important needed — this is now the only .wall-bg-bubble definition,
   and the .bg-slideshow-toggle ports elsewhere in feed.css don't match
   this element at all.
   ========================================================================== */

.wall-bg-bubble {
  position: fixed;
  left: calc(20px + env(safe-area-inset-left, 0px));
  right: auto;
  top: auto;
  bottom: calc(108px + env(safe-area-inset-bottom, 0px));
  z-index: 9100;

  width: 62px;
  height: 62px;
  border-radius: 50%;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  background: #ff8c00;
  color: #000;
  border: 2px solid #ff8c00;

  font-size: 1.7rem;
  line-height: 1;

  cursor: pointer;

  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  user-select: none;

  box-shadow: 0 0 15px rgba(255, 140, 0, 0.6);
  transition: transform 0.25s ease, box-shadow 0.25s ease,
              background 0.25s ease, border-color 0.25s ease;
}

.wall-bg-bubble:hover {
  transform: scale(1.08);
  box-shadow: 0 0 26px rgba(255, 140, 0, 0.9);
}

.wall-bg-bubble:active { transform: scale(0.96); }

.wall-bg-bubble:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ON state — same pulse as the main site.
   Both classes listed so it lights up whichever one wall-bg.js toggles. */
.wall-bg-bubble.is-on,
.wall-bg-bubble.active {
  background: #ff8c00;
  border-color: #ff8c00;
  color: #000;
  animation: pulse-glow-orange 4s infinite;
}

@media (prefers-reduced-motion: reduce) {
  .wall-bg-bubble.is-on,
  .wall-bg-bubble.active { animation: none; }
}

@media (max-width: 768px) {
  .wall-bg-bubble {
    width: 56px;
    height: 56px;
    font-size: 1.5rem;
    left: calc(16px + env(safe-area-inset-left, 0px));
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }
}
/* ==== post comments — transplanted from wall.css 4701-4718, Deploy E 2026-11-11 ==== */
.post-comments { margin-top: 10px; border-top: 1px dashed #333; padding-top: 8px; }
.post-comments-toggle { background: none; border: 1px solid var(--site-accent, #43ff91); color: var(--site-accent, #43ff91); font-family: inherit; font-size: .8rem; letter-spacing: 1px; padding: 4px 10px; cursor: pointer; border-radius: 4px; }
.post-comments-toggle:hover { background: var(--site-accent, #43ff91); color: #000; }
.post-comments-panel { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.pc-row { display: flex; gap: 8px; align-items: flex-start; background: rgba(255,255,255,.04); border: 1px solid #2a2a2a; border-radius: 6px; padding: 6px 8px; }
.pc-avatar { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto; object-fit: cover; }
.pc-avatar-txt { display: inline-flex; align-items: center; justify-content: center; background: #222; font-size: .85rem; }
.pc-body { flex: 1 1 auto; min-width: 0; }
.pc-head { display: flex; gap: 8px; align-items: baseline; }
.pc-name { color: var(--site-accent, #43ff91); font-size: .8rem; }
.pc-time { color: #777; font-size: .7rem; }
.pc-text { color: #ddd; font-size: .85rem; margin-top: 2px; word-break: break-word; white-space: pre-wrap; }
.pc-del { flex: 0 0 auto; background: none; border: none; color: #ff5577; font-size: .7rem; cursor: pointer; letter-spacing: 1px; }
.pc-del:hover { text-decoration: underline; }
.pc-composer { display: flex; gap: 6px; }
.pc-composer textarea { flex: 1; background: rgba(0,0,0,.6); border: 1px solid #333; color: #eee; font-family: inherit; font-size: .85rem; padding: 6px 8px; border-radius: 4px; resize: vertical; min-height: 34px; }
.pc-send { background: var(--site-accent, #43ff91); color: #000; border: none; font-weight: bold; padding: 0 14px; cursor: pointer; border-radius: 4px; letter-spacing: 1px; }
.pc-empty { color: #777; font-size: .8rem; }

/* ==== feed comment slot layout fix — Deploy E polish 2026-11-12 ====
   the slot lives inside .feed-post-actions (a flex ROW) — reclaim
   full width so comments stretch under the post like on the wall */
.feed-comments-slot { flex: 1 1 100%; width: 100%; }
.feed-comments-slot .post-comments { margin-top: 12px; }
.feed-comments-slot .post-comments-panel { max-width: 100%; }
.feed-comments-slot .pc-composer textarea { min-height: 44px; }

/* ==== slot fix v2 — nowrap was squeezing the slot beside the emojis ====
   allow the actions row to wrap; slot declares 100% basis and now
   ACTUALLY takes the whole line instead of being shrunk onto theirs */
.feed-post-actions { flex-wrap: wrap; }
.feed-comments-slot { flex: 0 0 100%; max-width: 100%; }