/* ============================================================================
   AbiiApp Feed (E2) — modern, mobile-first post cards, stories tray and feed
   column. Restyles WoWonder's existing post markup via its classes; token
   driven so light/dark/auto and the brand color come from abii-tokens.css.
   Scoped to logged-in app pages (body.abii-has-dock) so admin/welcome are safe.
   ========================================================================== */

/* ---- Greeting banner: not part of the AbiiApp feed look ---- */
body.abii-has-dock .greetalert { display: none !important; }

/* ---- Chrome the Stitch reference never shows on the feed: the sort/filter pill row
   (All posts / All type), and the "People you may know" card WoWonder's own JS injects
   mid-stream after the 2nd post (load-posts.phtml). Both are real WoWonder features,
   not removed -- just not part of this design, so hidden rather than deleted. Suggested
   users belong in the desktop right rail (Stitch's "Who to follow"), not mid-feed. ---- */
body.abii-has-dock .tag_home_filters.home { display: none !important; }
body.abii-has-dock .tag_post_people_know { display: none !important; }

/* ---- Left rail + feed column + right rail: centered as a unit, Stitch's 3-column
   desktop layout (3/6/3 of a 12-col, max-w-1200px grid). The previous version centered
   .middlecol alone with float:none while its Bootstrap sibling .sidebar kept
   float:left, which put the two columns fighting over the same horizontal space
   instead of sitting side by side as a centered set. ---- */
@media (min-width: 992px) {
  body.abii-has-dock .row:has(> .middlecol) {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 32px;
    max-width: 1200px;
    margin: 0 auto;
  }
  body.abii-has-dock .middlecol {
    max-width: 600px;
    width: 100%;
    float: none;
  }
  body.abii-has-dock .row:has(> .middlecol) > .sidebar.rightcol {
    float: none;
    width: 280px;
    flex: 0 0 280px;
  }
}
body.abii-has-dock .middlecol { width: 100%; }

/* ---- Desktop left nav rail (Home/Explore/Notifications/Profile + Create Post),
   Stitch's 3-column home layout. Additive alongside the existing top navbar (which
   keeps search/messages) -- not a replacement for it. ---- */
.abii-rail { display: none; }
@media (min-width: 992px) {
  body.abii-has-dock .abii-rail {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 0 0 240px;
    width: 240px;
    position: sticky;
    top: 84px;
    align-self: flex-start;
  }
  body.abii-has-dock .abii-rail__tab {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border-radius: var(--abii-r-full);
    color: var(--abii-ink-2);
    font-size: 15px;
    font-weight: 600;
    transition: background var(--abii-t-fast) var(--abii-ease), color var(--abii-t-fast) var(--abii-ease);
  }
  body.abii-has-dock .abii-rail__tab:hover { color: var(--abii-brand); text-decoration: none; }
  body.abii-has-dock .abii-rail__tab svg { width: 24px; height: 24px; flex: 0 0 auto; }
  body.abii-has-dock .abii-rail__tab .ic-fill { display: none; }
  body.abii-has-dock .abii-rail__tab.active {
    color: var(--abii-brand);
    background: var(--abii-brand-soft);
  }
  body.abii-has-dock .abii-rail__tab.active .ic-line { display: none; }
  body.abii-has-dock .abii-rail__tab.active .ic-fill { display: block; }
  body.abii-has-dock .abii-rail__create {
    margin-top: 12px;
    padding: 14px;
    border: 0;
    border-radius: var(--abii-r-full);
    background: var(--abii-brand);
    color: var(--abii-on-brand);
    font-size: 15px;
    font-weight: 700;
    transition: transform var(--abii-t-fast) var(--abii-ease), background var(--abii-t-fast) var(--abii-ease);
  }
  body.abii-has-dock .abii-rail__create:hover { background: var(--abii-brand-strong); }
  body.abii-has-dock .abii-rail__create:active { transform: scale(.97); }
}

/* ---- Post card ----
   Edge-to-edge, no border-radius, no shadow, no gap, no inset margin, separated by a
   single hairline divider -- but NOT the same color as the page. Stitch's literal
   markup is explicit: <article class="hairline-divider bg-white"> sitting on
   <body class="bg-[#FBFBF9]">, i.e. cards are --abii-surface (pure white) while the
   page itself is --abii-bg (a subtly warmer/greyer off-white) -- a deliberate, subtle
   layering cue. A prior pass made cards fully transparent (blending into the page
   with zero distinction), which was reversed once, overcorrected to boxed+shadow, then
   reversed back to transparent -- transparent was also wrong, just a different wrong
   direction than the boxed card. This is the actual Stitch value: white card, off-white
   page, hairline divider, no radius/shadow. */
body.abii-has-dock .post-container {
  margin-bottom: 0;
  content-visibility: auto;
  contain-intrinsic-size: 0 600px;
}
body.abii-has-dock .post-container .panel.panel-white {
  background: var(--abii-surface);
  border: 0;
  border-bottom: 1px solid var(--abii-line);
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  margin: 0;
}

/* ---- Card header (avatar, name, time, menu) ---- */
body.abii-has-dock .panel-white .post-heading,
body.abii-has-dock .panel-white .panel-heading {
  padding: 12px 16px !important;
  border: 0 !important;
  background: transparent !important;
}
body.abii-has-dock .panel-white .post-heading .image img,
body.abii-has-dock .panel-white .post-heading .avatar img {
  width: 42px !important; height: 42px !important;
  border-radius: 50% !important; object-fit: cover;
}
body.abii-has-dock .panel-white .name,
body.abii-has-dock .panel-white .name a {
  color: var(--abii-ink) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
}
body.abii-has-dock .panel-white .meta,
body.abii-has-dock .panel-white .ajax-time,
body.abii-has-dock .panel-white .meta a,
body.abii-has-dock .panel-white .middot {
  color: var(--abii-muted) !important;
  font-size: 11px !important;
}
/* Activity text ("changed profile picture", "shared X's post", event/album names, etc.)
   split onto its own line by script.js (Wo_SplitPostActivityLine) -- a dedicated
   subtitle row below name+badges, matching the Stitch reference, instead of wrapping
   mid-sentence into the name row when it's long. */
body.abii-has-dock .panel-white .abii-post-activity {
  display: block;
  margin-top: 1px;
  color: color-mix(in srgb, var(--abii-ink-2) 70%, transparent);
  font-size: 11px !important;
}
body.abii-has-dock .panel-white .tag_post_hdr_menu .dropdown-toggle {
  color: var(--abii-muted) !important;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--abii-t-fast) var(--abii-ease);
}
body.abii-has-dock .panel-white .tag_post_hdr_menu .dropdown-toggle:active,
body.abii-has-dock .panel-white .tag_post_hdr_menu .dropdown-toggle:hover {
  background: var(--abii-surface-2);
}

/* ---- Post text ---- */
body.abii-has-dock .post-description { padding: 2px 16px 16px !important; }
body.abii-has-dock .post-description .edited_text,
body.abii-has-dock .post-description p {
  color: var(--abii-ink) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
/* Bold publisher-name prefix inline before the caption (feeling.phtml), matching
   Stitch's "**Name** caption text" convention. */
body.abii-has-dock .post-description .abii-caption-name {
  font-weight: 700 !important;
  color: var(--abii-ink) !important;
}

/* ---- Media ----
   Stitch's media div is a sibling of the padded header/actions/caption sections, not
   nested inside them, so it's naturally full-bleed. WoWonder's real markup nests media
   INSIDE .post-description (which carries the 16px side padding those other sections
   need), so the photo was inheriting that padding as unwanted left/right gutters
   instead of running edge-to-edge. Break out of the parent's padding with a negative
   margin instead of restructuring the template (media appears in many conditional
   branches of post-layout.phtml shared across every page, not just this one). */
body.abii-has-dock .post-description .tag_post_full_img,
body.abii-has-dock .post-description .tag_post_full_albm {
  margin: 4px calc(-1 * var(--abii-sp-4)) 0 !important;
  width: calc(100% + (2 * var(--abii-sp-4))) !important;
}
/* Single-photo posts: Stitch shows uniform, cropped media (aspect-square or 4:5),
   never a post's raw native aspect ratio -- a feed of mixed-height images breaks the
   card rhythm the reference relies on. 4:5 (portrait) is the more common of the two
   reference examples and reads well for both landscape and portrait source photos.
   Scoped to plain <img> only (not video/iframe embeds sharing the same wrapper div),
   so live video, file shares, and map embeds keep their own natural sizing. */
body.abii-has-dock .post-description .tag_post_full_img img,
body.abii-has-dock .post_img img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  border-radius: 0;
}
@media (min-width: 992px) {
  body.abii-has-dock .post-description .tag_post_full_img img { border-radius: var(--abii-r-md); }
}

/* ---- Action bar (like / comment / share) ----
   Real markup: like is WoWonder's "reaction" button (.wo-reaction-post > .like-btn-post,
   not .tag_post_foot_acticon), comment/share are .tag_post_foot_acticon. Flat outline icons,
   no filled/circular badges, one continuous row with real spacing between icon+count pairs —
   matching a plain "♡ 2.1M  ⓒ 3,573  ⤴ 48.4K" reference exactly, not WoWonder's boxed-button
   default look. Save sits alone on the far right (own flex child, justify-content:space-between
   on the outer row keeps it pinned there). */
body.abii-has-dock .tag_post_actions,
body.abii-has-dock .post-footer .stats {
  padding: 12px 16px !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  justify-content: space-between !important;
}
body.abii-has-dock .tag_post_actions > div.valign { gap: 24px; }
body.abii-has-dock .abii-stat-group { gap: 6px; }

/* Icons: plain, no background fill, no circular badge — the badge/pill look upstream
   (min-width/height + border-radius + padding) is exactly what the reference does NOT have. */
body.abii-has-dock .wo-reaction-post,
body.abii-has-dock .tag_post_foot_acticon,
body.abii-has-dock .post-actions .stat-item {
  color: var(--abii-ink) !important;
  background: none !important;
  min-width: 0;
  min-height: 0;
  padding: 0 !important;
  font-weight: 600;
  transition: color var(--abii-t-fast) var(--abii-ease), transform .12s ease;
}
body.abii-has-dock .wo-reaction-post,
body.abii-has-dock .like-btn-post { justify-content: center; }
/* Stock style.css puts a background circle directly on the <svg> (not just the wrapper),
   with its own margin and fixed 40px box — !important on all four so it can't win by load
   order or specificity, matching the earlier pattern of stock rules needing explicit override. */
body.abii-has-dock .tag_post_foot_acticon svg,
body.abii-has-dock .wo-reaction-post svg {
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border-radius: 0 !important;
}
body.abii-has-dock .tag_post_foot_acticon:active,
body.abii-has-dock .wo-reaction-post:active,
body.abii-has-dock .like-btn-post:active { transform: scale(.88); }

/* Icon-only: drop the inline "Like"/"Comment"/"Share" text labels WoWonder bakes into the
   markup. .like-btn-mobile is a real wrapper we can hide; the reaction text ("Like"/"Liked")
   is a bare text node with no wrapper, so font-size:0 collapses it without touching the SVG
   (its size comes from width/height attributes, not em units). */
body.abii-has-dock .like-btn-mobile { display: none !important; }
body.abii-has-dock .tag_post_react_btn { font-size: 0; }

/* Like heart: the default (unreacted) heart-outline icon is themed in buttons/like-wonder.phtml
   (an inline SVG, colored via currentColor below). The REACTED state for the common "Like"
   reaction is WoWonder's own raster icon (a colored circular badge baked into the image file
   itself — cannot be recolored/reshaped via CSS), which is exactly the "duplicate colored
   circle" look that doesn't match a plain reference. Replace it with the same heart-outline
   glyph, filled solid and brand-colored, so liking a post just fills in the same heart rather
   than swapping to a different-looking badge. Other reaction types (Love/HaHa/etc.) keep
   WoWonder's own colored emoji, since a plain heart can't represent six distinct reactions. */
body.abii-has-dock .wo-reaction-post svg { color: var(--abii-ink); }
body.abii-has-dock .active-like-1 .inline_post_count_emoji { display: none !important; }
body.abii-has-dock .active-like-1::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 24px;
  background: var(--abii-brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54z'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.abii-has-dock .like-stat.active-like,
body.abii-has-dock .active-like,
body.abii-has-dock .active-like svg { color: var(--abii-brand) !important; }
body.abii-has-dock .like-btn-post[data_react="1"] svg:not(.active-like) { color: var(--abii-brand); }
body.abii-has-dock .inline_post_count_emoji img { width: 24px !important; height: 24px !important; }

/* Save/bookmark: outline by default, filled ink when saved (a save is a private "keep this",
   not an engagement signal, so it takes the neutral ink color rather than brand red). */
body.abii-has-dock .abii-save-btn.active-save svg { fill: var(--abii-ink); }

/* Reaction picker (long-press on the like icon, Facebook-style). The <ul class="reactions-box">
   + 6 <li class="reaction"> markup already existed in buttons/like-wonder.phtml, wired to
   Wo_RegisterReaction, but nothing in the codebase ever revealed it (style.css hardcodes
   display:none with no JS trigger anywhere) -- it was dead UI. script.js now shows it on a
   long-press via the .abii-reactions-open class; a plain tap/click still just toggles
   Like/Unlike (Wo_ToggleQuickLike), matching how Instagram/Facebook split the two gestures.
   Kept permanently display:flex and hidden via opacity/transform/visibility instead of
   display:none, so the reveal and dismiss can actually animate. */
body.abii-has-dock .wo-reaction-post { position: relative; }
body.abii-has-dock .reactions-box {
  display: flex !important;
  align-items: center;
  gap: 2px;
  left: 0;
  bottom: calc(100% + 10px) !important;
  background: var(--abii-surface) !important;
  border: 1px solid var(--abii-line) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.18) !important;
  border-radius: var(--abii-r-full) !important;
  padding: 6px 8px !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px) scale(.85);
  transform-origin: left bottom;
  transition: opacity .15s ease, transform .15s cubic-bezier(.34,1.56,.64,1), visibility .15s;
}
body.abii-has-dock .reactions-box.abii-reactions-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
body.abii-has-dock .reactions-box .reaction {
  padding: 4px !important;
  border-radius: 50%;
  transition: transform .12s ease;
}
body.abii-has-dock .reactions-box .reaction:active,
body.abii-has-dock .reactions-box .reaction:hover { transform: scale(1.22) translateY(-3px); }
body.abii-has-dock .reactions-box .reaction img { width: 30px !important; height: 30px !important; padding: 0 !important; }

/* Quick like/unlike bounce -- script.js toggles .abii-like-pop on .status-reaction-{id}
   for every state change (like AND unlike), so a plain tap always feels responsive, not
   just the long-press path. Covers both visual states: the masked heart (::before, once
   liked) and the plain outline SVG (once unliked). */
@keyframes abii-like-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.35); }
  60%  { transform: scale(.92); }
  100% { transform: scale(1); }
}
body.abii-has-dock .abii-like-pop.active-like-1::before,
body.abii-has-dock .abii-like-pop svg {
  animation: abii-like-pop .32s cubic-bezier(.34,1.56,.64,1);
}

/* Counts: inline with each icon (like a reference "♡ 2.1M  ⓒ 3,573  ⤴ 48.4K"), not a separate
   summary line underneath, and not a second icon next to the count — just the number. Each
   icon + its count is one .abii-stat-group; .abii-stat-count is the number itself, reusing
   the exact spans WoWonder's own JS live-updates after a like/comment/share
   (#likes/#comments/#post_share/.post-reactions-icons-X), just repositioned next to the icon. */
body.abii-has-dock .abii-stat-count .how_reacted,
body.abii-has-dock .abii-stat-count .inline_post_count_emoji { display: none !important; }
body.abii-has-dock .abii-stat-count {
  color: var(--abii-ink-2) !important;
  font-size: 13.5px !important;
  font-weight: 600;
  margin-left: -4px;
}
body.abii-has-dock .abii-stat-count--empty { display: none; }
body.abii-has-dock .abii-stat-count .like-emo,
body.abii-has-dock .abii-stat-count .how_reacted { display: inline-flex; align-items: center; }
body.abii-has-dock .abii-stat-count .inline_post_count_emoji img { width: 18px !important; height: 18px !important; }
body.abii-has-dock .abii-stat-count .how_many_reacts { margin-left: 2px; }
body.abii-has-dock .abii-video-views {
  padding: 2px 16px 0;
  color: var(--abii-muted);
  font-size: 11px;
}
body.abii-has-dock .abii-video-views svg { width: 14px !important; height: 14px !important; margin-right: 2px; }

/* Comment preview: one line, username bold + text, truncated, IG style */
body.abii-has-dock .abii-comment-preview {
  padding: 2px 16px 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--abii-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.abii-has-dock .abii-comment-preview__user { font-weight: 700; margin-right: 5px; }
body.abii-has-dock .abii-comment-preview__text { color: var(--abii-ink-2); }
body.abii-has-dock .abii-comment-preview__viewall {
  padding: 2px 16px 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--abii-muted);
}

/* ---- Feed filter (All/Photos/Videos/Sounds/Files/Maps/...): one compact trigger showing the
   active filter, opening the exact same list (script.js wraps it, same onclick handlers) as a
   dropdown card instead of a horizontally scrolling pill row. No scroll-hunting on a phone,
   scales cleanly to however many filter types this site's config enables. ---- */
/* Transparent, not --abii-bg: the page body's actual dark-mode background is a slightly
   different value than the token (a pre-existing stock mismatch), so a solid fill here read
   as a visibly mismatched rectangle with empty space to the right of the compact trigger. */
body.abii-has-dock .tag_home_filters.home {
  padding: 10px 16px;
  margin: 0;
  background: none !important;
  gap: 8px;
}
body.abii-has-dock .abii-filter-dropdown { position: relative; }

/* Sort-order control (All posts / Following): was a bare, unlabeled icon on stock
   (light-only) styling, unrelated in appearance to the filter pill right beside it.
   Same pill treatment, same height, so the two read as one control group. */
body.abii-has-dock .tag_home_post_order { margin: 0 !important; padding: 0 !important; }
body.abii-has-dock .tag_home_post_order > .btn-mat {
  display: flex !important;
  align-items: center;
  gap: 6px;
  height: 38px;
  line-height: normal !important;
  min-width: 0 !important;
  padding: 0 12px !important;
  border-radius: var(--abii-r-full) !important;
  background: var(--abii-surface-2) !important;
  border: 1px solid var(--abii-line);
  color: var(--abii-ink) !important;
  box-shadow: none !important;
}
body.abii-has-dock .tag_home_post_order > .btn-mat svg { width: 18px !important; height: 18px !important; margin: 0 !important; color: var(--abii-brand); }
body.abii-has-dock .abii-sort-trigger__label { font-size: 14px; font-weight: 600; white-space: nowrap; }
body.abii-has-dock .tag_home_post_order .dropdown-menu { background: var(--abii-surface) !important; border: 1px solid var(--abii-line); }
body.abii-has-dock .tag_home_post_order .dropdown-menu > li > a { color: var(--abii-ink-2) !important; }
body.abii-has-dock .tag_home_post_order .dropdown-menu > li.active > a,
body.abii-has-dock .tag_home_post_order .dropdown-menu > li > a:hover { color: var(--abii-brand) !important; background: var(--abii-brand-soft) !important; }
body.abii-has-dock .abii-filter-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border-radius: var(--abii-r-full);
  background: var(--abii-surface-2) !important;
  border: 1px solid var(--abii-line);
  color: var(--abii-ink) !important;
  font-weight: 600;
  font-size: 14px;
}
body.abii-has-dock .abii-filter-trigger__icon { display: flex; }
body.abii-has-dock .abii-filter-trigger__icon svg { width: 18px !important; height: 18px !important; color: var(--abii-brand); }
body.abii-has-dock .abii-filter-trigger__chevron {
  color: var(--abii-muted);
  transition: transform var(--abii-t-fast) var(--abii-ease);
}
body.abii-has-dock .abii-filter-trigger.open .abii-filter-trigger__chevron { transform: rotate(180deg); }

body.abii-has-dock .filterby#filterby-post {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 40;
  flex-direction: column;
  width: max-content;
  min-width: 200px;
  max-width: calc(100vw - 28px);
  margin: 0 !important;
  padding: 6px !important;
  background: var(--abii-surface);
  border: 1px solid var(--abii-line);
  border-radius: var(--abii-r-lg);
  box-shadow: var(--abii-shadow-3, 0 12px 32px rgba(0,0,0,.4));
  overflow: visible !important;
  white-space: normal !important;
}
body.abii-has-dock .abii-filter-dropdown:has(.abii-filter-trigger.open) .filterby#filterby-post {
  display: flex;
}
body.abii-has-dock .filterby#filterby-post li.filter-by-li {
  margin: 0 !important;
  width: 100%;
}
body.abii-has-dock .filterby#filterby-post li.filter-by-li a {
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 40px;
  padding: 0 12px !important;
  border-radius: var(--abii-r-md);
  color: var(--abii-ink-2) !important;
  font-weight: 500;
  font-size: 14px;
}
body.abii-has-dock .filterby#filterby-post li.filter-by-li a svg { width: 18px !important; height: 18px !important; }
body.abii-has-dock .filterby#filterby-post li.filter-by-li.active a {
  color: var(--abii-brand) !important;
  background: var(--abii-brand-soft);
  font-weight: 700;
}
body.abii-has-dock .filterby#filterby-post li.filter-by-li a::before { display: none; }

/* ---- Comment input ---- */
body.abii-has-dock .comment-textarea {
  background: var(--abii-surface-2) !important;
  border: 1px solid var(--abii-line) !important;
  border-radius: var(--abii-r-full) !important;
  color: var(--abii-ink) !important;
  font-size: 14px !important;
}
/* The stock char-count badge is a semi-transparent circle positioned directly
   on top of the avatar (deliberately, in the original design), meant to dim
   the avatar while typing. With a limit as high as it is, it always reads a
   static, near-meaningless number (e.g. "640") rather than a real low-count
   warning, so it just looks like a stray badge overlapping the avatar. Hide
   it; the avatar and input speak for themselves. */
body.abii-has-dock .wo_comment_combo > .charsLeft-post { display: none !important; }

/* ---- Comment list: username + bubble + Like/Reply/time meta row ---- */
body.abii-has-dock .comments-list .comment .avatar,
body.abii-has-dock .comments-list .reply .avatar { width: 32px; min-width: 32px; height: 32px; }
body.abii-has-dock .comments-list .comment .comment-heading .user {
  color: var(--abii-ink) !important;
  font-weight: 700;
  font-size: 13.5px !important;
}
body.abii-has-dock .comments-list .tag_comm_body .comment-text {
  background: var(--abii-surface-2) !important;
  color: var(--abii-ink) !important;
  font-size: 14px;
}
body.abii-has-dock .comments-list .comment-options,
body.abii-has-dock .comments-list .comment-options .middot,
body.abii-has-dock .comments-list .comment-options .pointer,
body.abii-has-dock .comments-list .wo-reaction-comment .like-btn-comment {
  color: var(--abii-muted) !important;
  font-size: 12.5px !important;
}
body.abii-has-dock .comments-list .comment-options .pointer.bold { font-weight: 700 !important; }

/* ---- Publisher trigger row (the "What's happening?" bar on the feed that
   opens the #tagPostBox modal). Note: .publisher-box and .postText are NOT
   this trigger — they are the modal's own form/textarea (see
   story/publisher-box.phtml); styling them here previously leaked into the
   modal itself. Composer modal chrome lives in abii-composer.css instead. ---- */
/* Same "no floating card" correction as the post cards and story tray above: the
   outer row blends into the page (transparent, hairline below), not a separate boxed
   surface. The inner text trigger keeps its pill shape -- X's own composer prompt is
   styled exactly this way, a pill INSIDE a plain row, not a card around the whole row. */
body.abii-has-dock .tag_pub_box_bg {
  background: var(--abii-surface) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--abii-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
body.abii-has-dock .tag_pub_box_bg_text {
  background: var(--abii-surface-2) !important;
  border: 1px solid color-mix(in srgb, var(--abii-line) 60%, transparent) !important;
  color: var(--abii-muted) !important;
  text-align: left;
  padding: 0 16px !important;
}
body.abii-has-dock .tag_publisher .avatar img,
body.abii-has-dock .publisher-box .avatar img {
  width: 40px !important; height: 40px !important;
  border-radius: 50% !important; object-fit: cover;
}
/* Camera trigger: stock style.css hardcodes Material green (#4CAF50, `.camera` class)
   -- a color with zero relationship to the rest of the palette. Reference design
   (Stitch's rendered mockup, not just its exported HTML): a solid brand-indigo
   circular button, white icon -- confirmed against the actual screenshot, which
   shows a filled circle here even though the Stitch HTML export itself had left
   this button unstyled. */
body.abii-has-dock .tag_pub_box_bg_camlve.camera {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: var(--abii-on-brand) !important;
  background: var(--abii-brand) !important;
  transition: background var(--abii-t-fast) var(--abii-ease), transform var(--abii-t-fast) var(--abii-ease);
}
body.abii-has-dock .tag_pub_box_bg_camlve.camera svg {
  width: 20px !important;
  height: 20px !important;
}
body.abii-has-dock .tag_pub_box_bg_camlve.camera:hover,
body.abii-has-dock .tag_pub_box_bg_camlve.camera:active {
  background: var(--abii-brand-strong) !important;
}

/* ---- Stories tray: premium circles, richer than a plain IG clone ----
   Real Instagram never boxes the story tray in its own card -- it sits directly on the
   page background, just a row of ringed circles with a hairline below. The previous
   version gave it a --abii-surface background, which on this warm-neutral page reads as
   a separate floating white/dark box (confirmed against reference screenshots) -- the
   same "boxed card" mistake fixed on post cards above. Transparent everywhere now, one
   hairline divider, no per-breakpoint bordered-card variant. */
body.abii-has-dock .tag_stories_on_home {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--abii-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 14px 0 12px !important;
  margin-bottom: 0 !important;
}
body.abii-has-dock .tag_lbox_stories { overflow: visible !important; }
body.abii-has-dock .status-list {
  display: flex !important;
  gap: 16px !important;
  overflow-x: auto !important;
  padding: 4px 16px !important;
  margin: 0 !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 14px, black calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 14px, black calc(100% - 28px), transparent 100%);
}
body.abii-has-dock .status-list::-webkit-scrollbar { display: none; }
/* remove the filler placeholder boxes entirely */
body.abii-has-dock .status-list .story_empty { display: none !important; }

body.abii-has-dock .status-list > li {
  flex: 0 0 auto !important;
  width: 70px !important;
  min-width: 70px !important;
  max-width: 70px !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center;
  background: transparent !important;
  scroll-snap-align: start;
}
body.abii-has-dock .status-list > li > a {
  display: block !important;
  width: 70px !important;
  height: 70px !important;
  border-radius: 50% !important;
  padding: 1px !important;
  position: relative;
  /* Stitch's default (no active story) ring: a thin neutral outline, not the
     gradient -- DESIGN.md's outline-variant token, not a "no ring at all" state. */
  border: 1px solid var(--abii-line);
  background: transparent;
  overflow: visible !important;
  transition: transform .15s ease;
}
body.abii-has-dock .status-list > li > a:active { transform: scale(.92); }
/* Unseen-story ring: Stitch design system spec (DESIGN.md, "Story Rings") -- a 2px
   stroke, linear-gradient(135deg, coral -> amber), with a 2px inner gap between the
   ring and the avatar in the PAGE background color (the tray sits directly on the
   page, not on a card surface, so the gap must match --abii-bg, not --abii-surface). */
body.abii-has-dock .status-list > li.not_seen_story > a {
  border: 0;
  padding: 2px !important;
  background: linear-gradient(135deg, var(--abii-story-1) 0%, var(--abii-story-2) 100%);
}
body.abii-has-dock .abii-story__ring {
  display: block !important;
  width: 100% !important; height: 100% !important;
  border-radius: 50% !important;
  overflow: hidden;
  position: static !important;
  /* WoWonder's own stylesheet has a rule for the legacy small avatar-badge span
     (.tag_lbox_stories .status-list li span) with left:50%/bottom/transform/z-index
     for absolute positioning. It still matches this span by tag, so reset all of it
     explicitly or the ring renders shifted off to one side. */
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  transform: none !important;
  z-index: auto !important;
  margin: 0 !important;
  background: var(--abii-surface-2);
}
body.abii-has-dock .status-list > li.not_seen_story .abii-story__ring {
  border: 2px solid var(--abii-bg);
}
body.abii-has-dock .abii-story__ring img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block !important;
}
/* Create-story / no active story: Stitch keeps the thin neutral outline ring here too
   (it's the "Your Story" create slot, not a plain unringed avatar) -- only the
   gradient treatment is reserved for an actual unseen story. */
body.abii-has-dock .status-list > li.create_new > a {
  padding: 1px !important;
}
/* The "+" badge: same legacy `.tag_lbox_stories .status-list li span` rule noted
   above for .abii-story__ring ALSO matches this span (any span inside the list),
   forcing it to 46x46px absolute-centered — nearly two-thirds of the 72px avatar,
   which is the oversized, overlapping badge that was the actual bug here (not a
   design opinion — the intended size was always 24px, it just never won the
   cascade). Reset the same properties explicitly, and recolor to the primary
   indigo gradient (identical formula to the E1 hero mark and the dock's Create
   button) since this is an action ("add a story"), not story content — keeping
   it visually distinct from the content-accent ring above ties it to every other
   primary action in the app instead of borrowing the ring's color for a
   different job. */
body.abii-has-dock .abii-story__plus {
  position: absolute !important;
  top: auto !important; left: auto !important;
  bottom: -1px !important; right: -1px !important;
  transform: none !important;
  width: 24px !important; height: 24px !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, color-mix(in srgb, var(--abii-brand) 85%, var(--abii-on-brand)), var(--abii-brand) 45%, var(--abii-brand-strong)) !important;
  color: var(--abii-on-brand);
  border-radius: 50%;
  border: 2.5px solid var(--abii-surface);
  box-shadow: 0 2px 8px -1px color-mix(in srgb, var(--abii-brand) 55%, transparent);
  pointer-events: none;
  z-index: 2 !important;
}
/* WoWonder's own stylesheet has `.status-list li.create_new a svg { background: white;
   padding: 7px; width/height: 100%; color: #000; }` for the old plain "+" glyph. It still
   matches this new SVG icon and outranks the rule above on specificity, so it must be
   overridden explicitly rather than relying on source order. */
body.abii-has-dock .status-list li.create_new a svg,
body.abii-has-dock .abii-story__plus svg {
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  width: 13px !important;
  height: 13px !important;
  color: var(--abii-on-brand) !important;
}
body.abii-has-dock .status-list > li > p {
  color: var(--abii-ink-2) !important;
  font-size: 11px !important;
  font-weight: 500;
  margin: 6px 0 0 !important;
  max-width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.abii-has-dock .status-list > li.create_new > p { color: var(--abii-ink) !important; font-weight: 600; }

/* ---- Dark-mode readability for post header/activity text ---- */
body.abii-has-dock .panel-white .post-heading .name a,
body.abii-has-dock .panel-white .post-heading b,
body.abii-has-dock .panel-white .post-heading strong { color: var(--abii-ink) !important; }
body.abii-has-dock .panel-white .post-heading a,
body.abii-has-dock .panel-white .feeling-text,
body.abii-has-dock .panel-white .fs-14,
body.abii-has-dock .panel-white .tag_post_hdr_sub,
body.abii-has-dock .panel-white .tag_post_hdr_sub * { color: var(--abii-ink-2) !important; }
body.abii-has-dock .panel-white .middot { color: var(--abii-muted) !important; }
/* PRO badge: Stitch design system spec -- a single, consistent subtle indigo tint tag
   (bg-primary/10, text-primary, small `rounded` corners, tiny bold uppercase-ish text),
   not a loud solid pill and not the admin-per-tier raw color. This intentionally
   overrides any inline tier color (with !important) to match the reference exactly:
   one consistent PRO identity, not a different color per tier. */
body.abii-has-dock .panel-white .pro-badge {
  background: color-mix(in srgb, var(--abii-brand) 12%, transparent) !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .5px !important;
  line-height: 13px !important;
  box-shadow: none !important;
}
body.abii-has-dock .panel-white .pro-badge,
body.abii-has-dock .panel-white .pro-badge a { color: var(--abii-brand) !important; }
body.abii-has-dock .panel-white .pro-badge a { padding: 2px 6px !important; margin: -2px -6px !important; }
/* Stitch's PRO badge is plain uppercase text, no icon -- header.phtml's markup
   (WoWonder's own per-tier badge) prepends a Font Awesome glyph before "PRO", which
   reads as visual clutter next to the reference's clean text-only tag. Icon hidden,
   text stays. */
body.abii-has-dock .panel-white .pro-badge a i.fa { display: none !important; }

/* Verified checkmark: the inline SVG (header.phtml) hardcodes generic blue
   (fill="#2196f3") -- brand-agnostic on most platforms, but the Stitch reference ties
   it to the app's own brand indigo instead. Mask the whole badge with a solid
   check-circle glyph in brand color rather than editing the SVG fills directly in
   every header.phtml branch (37+ occurrences across shared/normal/event/album
   variants) -- lower risk, same visual result. */
body.abii-has-dock .panel-white .verified-color {
  display: inline-flex !important;
  width: 18px; height: 18px;
  vertical-align: middle;
}
body.abii-has-dock .panel-white .verified-color svg { display: none; }
body.abii-has-dock .panel-white .verified-color::before {
  content: '';
  display: inline-block;
  width: 18px; height: 18px;
  background: var(--abii-brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M23 12l-2.44-2.79.34-3.69-3.61-.82-1.89-3.2L12 2.96 8.6 1.5 6.71 4.69 3.1 5.5l.34 3.7L1 12l2.44 2.79-.34 3.7 3.61.82L8.6 22.5l3.4-1.47 3.4 1.46 1.89-3.19 3.61-.82-.34-3.69zm-12.91 4.72l-3.8-3.81 1.48-1.48 2.32 2.33 5.85-5.87 1.48 1.48z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M23 12l-2.44-2.79.34-3.69-3.61-.82-1.89-3.2L12 2.96 8.6 1.5 6.71 4.69 3.1 5.5l.34 3.7L1 12l2.44 2.79-.34 3.7 3.61.82L8.6 22.5l3.4-1.47 3.4 1.46 1.89-3.19 3.61-.82-.34-3.69zm-12.91 4.72l-3.8-3.81 1.48-1.48 2.32 2.33 5.85-5.87 1.48 1.48z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- Skeleton loaders in dark ---- */
body.abii-has-dock .tag_post_skel { background: var(--abii-surface) !important; border: 1px solid var(--abii-line); border-radius: var(--abii-r-lg); }
body.night-mode .skel { background: linear-gradient(90deg, #1c1f24 25%, #24282e 37%, #1c1f24 63%) !important; background-size: 400% 100% !important; }

/* ---- Double-tap-to-like heart burst (Instagram/TikTok style) ---- */
.abii-heart-pop {
  position: fixed;
  z-index: 2000;
  pointer-events: none;
  color: #fff;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.35));
  transform: translate(-50%, -50%) scale(.4);
  opacity: 0;
  animation: abii-heart-pop .75s cubic-bezier(.17,.89,.32,1.28) forwards;
}
.abii-heart-pop svg { width: 92px; height: 92px; display: block; }
@keyframes abii-heart-pop {
  0%   { transform: translate(-50%, -50%) scale(.4); opacity: 0; }
  15%  { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  30%  { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  75%  { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* ---- Right rail widgets (Trending, PRO members, suggested pages/groups): Stitch's flat
   "Trending for you" / "Who to follow" card look -- hairline divider, no boxed shadow,
   tight vertical rhythm -- replacing WoWonder's boxed wow_content panel treatment. ---- */
@media (min-width: 992px) {
  body.abii-has-dock .sidebar.rightcol .tag_sidebar_widget {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--abii-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 16px 0 !important;
    margin-bottom: 0 !important;
  }
  body.abii-has-dock .sidebar.rightcol .tag_sidebar_widget_title {
    padding: 0 0 12px !important;
    margin: 0 !important;
  }
  body.abii-has-dock .sidebar.rightcol .tag_sidebar_widget_title b {
    color: var(--abii-ink) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
  }
  body.abii-has-dock .sidebar.rightcol .tag_sidebar_widget_title .refresh {
    color: var(--abii-brand) !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
  }
  body.abii-has-dock .sidebar.rightcol .wow_htag div a {
    color: var(--abii-ink-2) !important;
    font-size: 13.5px !important;
    padding: 6px 0 !important;
  }
}