/**
 * Dark Mode - Vibe Comments plugin overrides
 *
 * Overrides the plugin's --vibe-* CSS custom properties to match the
 * gwill-tech-theme's green/terminal brand (exact brand tokens - the
 * plugin defaults to blue #3b82f6 and the older override used a
 * non-brand green #00cc7a; the brand green is #00ff91).
 * Also covers components the plugin hardcodes (avatars, badges,
 * buttons, textarea, pinned/awaiting states).
 *
 * @package GWill_Tech
 */

/*
Table of Contents
1. dark tokens for vibe-comments surfaces
2. dark tokens for vibe-comments surfaces
3. Variable overrides - exact brand tokens
4. Title - terminal-styled like the theme's section headers
5. Comment body - brand card surface
6. Badges - brand category-style pills
7. "Load Comments" button - theme's green btn-primary
8. Reply / action buttons - ghost-style brand buttons
9. Comment form
10. Reaction buttons (JS-generated)
11. States the plugin hardcodes in light colors
*/
/* ── 1. dark tokens for vibe-comments surfaces── */

/* ── 2. dark tokens for vibe-comments surfaces── */

/* ── 3. Variable overrides - exact brand tokens────────────────────────── */
[data-theme="dark"] .vibe-comments-section,
.vibe-comments-section {
  --vibe-primary:       #00ff91;          /* brand --green */
  --vibe-primary-hover: #33ffa8;          /* brand --green-hover */
  --vibe-bg:            #111318;          /* brand --surface */
  --vibe-bg-alt:        #181c24;          /* brand --surface-2 */
  --vibe-surface:       #181c24;          /* brand --surface-2 */
  --vibe-border:        #1e2028;          /* brand --border */
  --vibe-text:          #e2e8f0;          /* brand --text */
  --vibe-text-muted:    #8896aa;          /* brand --mid */
  --vibe-success-bg:    rgba(0, 255, 145, 0.1);
  --vibe-success-text:  #00ff91;
  --vibe-error-bg:      #450a0a;
  --vibe-error-text:    #f87171;
  --vibe-warn-bg:       #3a1a00;
  --vibe-warn-text:     #fcd34d;
  --vibe-info-bg:       rgba(0, 255, 145, 0.06);
  --vibe-info-text:     #00ff91;
  --vibe-focus-ring:    2px solid #00ff91;
  --vibe-shadow:        0 1px 3px rgba(0, 0, 0, 0.4);
  --vibe-shadow-hover:  0 4px 12px rgba(0, 0, 0, 0.5);
  --vibe-radius:        8px;              /* brand --r */
  --vibe-gap:           1rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── 1a. Section wrapper - brand spacing + max-width from style.css ── */
.vibe-comments-section { max-width: 100%; margin: var(--sp-8) 0 0 }

/* ── 4. Title - terminal-styled like the theme's section headers───────── */
.vibe-comments-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--dim, #8896aa);
  border-bottom: 1px solid var(--border, #1e2028);
  padding-bottom: 12px;
  margin-bottom: var(--sp-6);
}

/* ── 5. Comment body - brand card surface──────────────────────────────── */
.vibe-comment-body {
  background: var(--vibe-bg);
  border: 1px solid var(--vibe-border);
  border-radius: var(--vibe-radius);
  padding: 1.25rem;
  margin-bottom: var(--vibe-gap);
  transition: border-color .2s, box-shadow .2s;
}
.vibe-comment-body:hover { border-color: var(--vibe-primary) !important; box-shadow: var(--vibe-shadow) }

/* Avatar - SQUARE with green ring + glow (King: upgrade the comments)
   The plugin sets an INLINE style="border-radius:50%" on the <img>, so only
   !important beats it. Target the real rendered selector .vibe-comment-avatar img. */
.vibe-comment-avatar img {
  border-radius: 0 !important;
  border: 2px solid var(--vibe-primary) !important;
  box-shadow: 0 0 0 1px rgba(0,255,145,.25), 0 0 10px rgba(0,255,145,.18) !important;
  background: var(--vibe-bg-alt);
}

/* ── 3a. Author / meta ───────────────────────── */
.vibe-comment-author a { color: var(--vibe-text); font-weight: 600 }
.vibe-comment-author a:hover { color: var(--vibe-primary) }
.vibe-comment-time { color: var(--vibe-text-muted) }

/* ── 3b. Comment content ─────────────────────── */
.vibe-comment-content { color: var(--vibe-text); font-size: 15px; line-height: 1.7 }

/* ── 6. Badges - brand category-style pills────────────────────────────── */
.vibe-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 2px 8px;
  border: 1px solid transparent;
}
.vibe-badge:not(.vibe-badge-mod) {
  background: rgba(0, 255, 145, .1);
  border-color: rgba(0, 255, 145, .22);
  color: #00ff91;
}
.vibe-badge-mod {
  background: rgba(124, 58, 237, .1);
  border-color: rgba(124, 58, 237, .22);
  color: #a78bfa;
}

/* Author badge - pro-style brand pill (plugin default is blue-on-light-blue
   #eff6ff/#bfdbfe, which reads as a white blob on dark; this matches the
   theme's badge anatomy with a subtle gradient + glow). ALL properties need
   !important - the plugin's CSS loads AFTER this file, so equal-specificity
   overrides lose (same rule as the OAuth buttons). */
.vibe-author-badge {
  /* Same border style as the pinned badge for consistency (King: "author badge
     same border style as pinned"). Outline green, squared 4px, matches .vibe-pinned-badge. */
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  font-family: 'JetBrains Mono', monospace !important;
  color: #00ff91 !important;
  background: rgba(0, 255, 145, .1) !important;
  border: 1px solid rgba(0, 255, 145, .25) !important;
  border-radius: 4px !important;
  padding: 2px 10px !important;
  margin-left: 8px !important;
  vertical-align: middle !important;
  box-shadow: 0 0 8px rgba(0, 255, 145, .12) !important;
  white-space: nowrap !important;
}
.vibe-author-badge::before {
  content: '★';
  font-size: 8px;
  line-height: 1;
  color: #00ff91;
  text-shadow: 0 0 6px rgba(0, 255, 145, .6);
}

/* ── 7. "Load Comments" button - theme's green btn-primary─────────────── */
.vibe-btn-load-comments {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 12px 22px !important;
  border-radius: 4px !important;
  background: var(--vibe-primary) !important;
  color: #08160f !important;
  border: 1px solid var(--vibe-primary) !important;
}

.vibe-btn-load-comments:hover {
  background: var(--vibe-primary-hover) !important;
}

/* ── 8. Reply / action buttons - ghost-style brand buttons─────────────── */
.vibe-reply-trigger, .vibe-like-btn, .vibe-btn-cancel, .vibe-retry-btn, .vibe-view-replies-btn, .vibe-sort-icon-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 4px;
  border: 1px solid var(--vibe-border);
  background: transparent;
  color: var(--vibe-text-muted);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.vibe-comments-section .vibe-reply-trigger:hover, .vibe-comments-section .vibe-like-btn:hover, .vibe-comments-section .vibe-btn-cancel:hover, .vibe-comments-section .vibe-retry-btn:hover, .vibe-comments-section .vibe-view-replies-btn:hover, .vibe-comments-section .vibe-comments-toolbar .vibe-sort-icon-btn:hover {
  border-color: var(--vibe-primary);
  color: var(--vibe-primary);
  background: var(--vibe-info-bg);
}

/* Reply button - WHITE text in every state (user: "make text white").
   Plugin base gives green text, hover gives green bg + white; both lose
   to these !important rules. Ghost look: white text + green border,
   solid green fill on hover with BLACK text (user: "hover text should
   be black" - matches .vibe-btn-primary's #08160f on green). */
.vibe-comment-footer .comment-reply-link,
.vibe-reply-trigger {
  color: #fff !important;
  border-color: var(--vibe-primary) !important;
}
.vibe-comment-footer .comment-reply-link:hover,
.vibe-reply-trigger:hover {
  background: var(--vibe-primary) !important;
  color: #08160f !important;
  border-color: var(--vibe-primary) !important;
}

/* ── 7a. Hardcoded blue focus ring in plugin CSS → brand green ── */
.vibe-field input:focus,
.vibe-field textarea:focus {
  border-color: var(--vibe-primary);
  box-shadow: 0 0 0 3px rgba(0, 255, 145, 0.14);
}

/* ── 9. Comment form───────────────────────────────────────────────────── */
.vibe-comments-section textarea,
.vibe-comments-section input[type="text"],
.vibe-comments-section input[type="email"],
.vibe-comments-section input[type="url"],
.vibe-comments-section input[type="password"] {
  width: 100%;
  background: var(--vibe-bg);
  border: 1px solid var(--vibe-border);
  border-radius: 4px;
  padding: 12px 14px;
  /* 16px: iOS Safari auto-zooms any form control below 16px on focus
     (responsive audit v1.16.38). */
  font-size: 16px;
  color: var(--vibe-text);
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.vibe-comments-section textarea:focus,
.vibe-comments-section input:focus {
  outline: none;
  border-color: var(--vibe-primary);
  box-shadow: 0 0 0 3px rgba(0, 255, 145, .14);
}

/* Primary submit - brand green (plugin CSS loads after this file and
   forces color:white - !important needed to hold the dark text) */
.vibe-btn-primary, .vibe-btn-submit {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: 4px;
  border: 1px solid var(--vibe-primary);
  background: var(--vibe-primary);
  color: #08160f !important;
  cursor: pointer;
  transition: background .15s;
}
.vibe-btn-primary:hover, .vibe-btn-submit:hover {
  background: var(--vibe-primary-hover);
  border-color: var(--vibe-primary-hover);
}

/* ── 7b. Secondary / guest / login - ghost ───── */
.vibe-btn-guest, .vibe-btn-ghost, .vibe-btn-cancel, .vibe-login-btn {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 10px 18px !important;
  border-radius: 4px !important;
  border: 1px solid var(--vibe-border);
  background: transparent;
  color: var(--vibe-text-muted);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.vibe-btn-guest:hover, .vibe-btn-ghost:hover, .vibe-btn-cancel:hover, .vibe-login-btn:hover {
  border-color: var(--vibe-primary);
  color: var(--vibe-primary);
}

/* OAuth / login method buttons - full brand treatment (v1.6.5). The
   plugin's `.vibe-btn` base (0.9rem font, 8px radius, 0.6/1.2rem padding)
   loads AFTER this file, so EVERY visual property needs !important. */
.vibe-btn-wp, .vibe-btn-google {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 10px 18px !important;
  border-radius: 4px !important;
  background: #181c24 !important;
  border: 1px solid var(--vibe-border) !important;
  color: var(--vibe-text) !important;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.vibe-btn-wp:hover, .vibe-btn-google:hover { border-color: var(--vibe-primary) !important; color: var(--vibe-primary) !important }

/* ── 7e. "or" separator in the auth bar - mono, brand muted ────── */
.vibe-or {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .09em !important;
  color: var(--vibe-text-muted) !important;
}

/* ── 7c. Load more - surface button ──────────── */
.vibe-btn-load-more {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 4px;
  border: 1px solid var(--vibe-border);
  background: var(--vibe-bg-alt);
  color: var(--vibe-text);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.vibe-btn-load-more:hover { border-color: var(--vibe-primary); color: var(--vibe-primary) }

/* ── 7d. Guest recall strip ──────────────────── */
.vibe-guest-recall {
  background: var(--vibe-bg-alt);
  border: 1px solid var(--vibe-border);
  border-radius: var(--vibe-radius);
}

/* ── 10. Reaction buttons (JS-generated)────────────────────────────────── */
.vibe-reactions {
  display: inline-flex;
  align-items: center;
  margin-left: 0; /* was auto - pushing it to the far right while Reply
                     sat left scattered the footer row; keep it in flow */
}

.vibe-reaction-summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  border: 1px solid var(--vibe-border) !important;
  background: var(--vibe-surface) !important;
  color: var(--vibe-text-muted);
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  line-height: 1;
  white-space: nowrap;
  transition: border-color .15s, background .15s;
}

@media (hover: hover) {
  .vibe-reaction-summary:hover {
    border-color: var(--vibe-primary);
    background: var(--vibe-info-bg);
    color: var(--vibe-primary);
  }
}

.vibe-reaction-summary:active {
  background: var(--vibe-info-bg);
  color: var(--vibe-primary);
}

.vibe-rx-stack {
  display: inline-flex;
  align-items: center;
}

/* Facebook Lite reaction stack (King ref 9/8): COLORED discs per reaction
   (like=FB blue, heart=red, fire=gold, laugh=yellow), 2px pill-colored ring
   separator, tight cascade with the LAST (top-count) disc on top. Glyphs
   render WHITE on the disc. Replaces v1.22's transparent-emoji stack -
   the King wants real discs, not floating glyphs. Type colors need the
   plugin's .vibe-rx-t-<type> classes (vibe 3.20.20); until a cached JS
   omits them, discs fall back to --vibe-bg-alt so nothing ever looks broken. */
.vibe-rx-bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  width: 22px !important;
  height: 22px !important;
  background: var(--vibe-bg-alt);
  border: 2px solid var(--vibe-surface);
  border-radius: 50%;
  margin-left: -8px;
  position: relative;
  flex-shrink: 0;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  /* v1.22.27 (King: "make sure each icon doesn't bleed outside its circle"):
     hard clip at the disc edge + centered 12px glyph (the rxSvg default is
     18px with vertical-align:-4px - too big for a 22px disc). */
  overflow: hidden;
}
.vibe-comments-section .vibe-reaction-summary .vibe-rx-bubble svg {
  width: 12px !important;
  height: 12px !important;
  display: block;
}
.vibe-rx-bubble:first-child { margin-left: 0 }
/* King 9/8 round 2: fire = ORANGE; all hues brand-harmonized - saturated
   enough to keep their reaction identity, muted ~12% so they sit in the
   dark terminal palette instead of screaming FB neon. Laugh keeps #f6c445
   (its disc IS the emoji face - tears render in brand-family blue). */
.vibe-rx-bubble.vibe-rx-t-like  { background: #2f7de1; }
.vibe-rx-bubble.vibe-rx-t-heart { background: #e5484d; }
.vibe-rx-bubble.vibe-rx-t-fire  { background: #f2711c; }
.vibe-rx-bubble.vibe-rx-t-laugh { background: #f6c445; }
/* white glyphs on colored discs - (0,4,1) to beat the v1.22.0 green-stroke
   rule by SPECIFICITY, not source order. `color:#fff` too: the SVG paths use
   stroke/fill="currentColor", which resolves to CSS color - stroke alone left
   fills green. Reactions are ALL-SVG now (summary + picker, vibe 3.20.20). */
.vibe-comments-section .vibe-reaction-summary .vibe-rx-stack .vibe-rx-bubble svg { stroke: #fff; color: #fff; }
.vibe-comments-section .vibe-rx-stack .vibe-rx-bubble { margin-left: -8px; }
.vibe-comments-section .vibe-rx-stack .vibe-rx-bubble:first-child { margin-left: 0; }
/* FB cascade: the TOP-COUNT disc (first child - getSortedReactions is
   count-desc) sits ON TOP; lower-count discs recede behind it. (0,3,0)
   beats the plugin's (0,2,0) tie by specificity, not source order. */
.vibe-comments-section .vibe-rx-stack .vibe-rx-bubble:nth-child(1) { z-index: 3 }
.vibe-comments-section .vibe-rx-stack .vibe-rx-bubble:nth-child(2) { z-index: 2 }
.vibe-comments-section .vibe-rx-stack .vibe-rx-bubble:nth-child(3) { z-index: 1 }
/* v1.22.27 (King: "remove the green border from the reaction I selected,
   the highlighted pop-up should be the only highlight"): no ring on the
   own-reaction disc - the picker's .vibe-active-reaction stays lit. */

.vibe-rx-total {
  font-weight: 700;
  font-size: 12px;
  min-width: 14px;
  text-align: center;
  line-height: 1;
  align-self: center;
}

.vibe-rx-icon { font-size: 14px; line-height: 1; }
.vibe-rx-label { font-size: 12px; font-weight: 600; line-height: 1; }

/* Facebook-style reaction picker - HORIZONTAL pill with a spring popup
   animation, shown just above the footer where the React button sits.
   Emojis sit in a row and enlarge on hover as you sweep across. */
.vibe-reaction-picker {
  display: flex;
  flex-direction: row;             /* horizontal - NOT the old vertical list */
  align-items: center;
  gap: 2px;
  width: fit-content;
  margin: 8px 0;
  padding: 6px 10px;
  border: 1px solid var(--vibe-border);
  border-radius: 999px;
  background: var(--vibe-surface);
  box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3);
  white-space: nowrap;
  z-index: 20;
  transform-origin: bottom center;
  animation: vibe-fb-pop .2s cubic-bezier(.34,1.56,.64,1);
}
.vibe-reaction-picker[hidden] { display: none; }
.vibe-reaction-picker.open { display: flex; }
@keyframes vibe-fb-pop {
  from { transform: scale(.6); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}

/* ── 8a. Each emoji option - pill button; enlarges + lifts on hover (Facebook) ── */
.vibe-reaction-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 40px;
  padding: 4px 2px 2px;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  transition: transform .16s cubic-bezier(.34,1.56,.64,1), background .1s;
  -webkit-tap-highlight-color: transparent;
}
.vibe-reaction-option .vibe-rx-picker-emoji { display: block; font-size: 26px; line-height: 1 }
/* ── 8b. per-reaction count under each emoji - shown while the picker is OPEN ──── */
.vibe-reaction-option .vibe-rx-picker-n {
  display: block;
  min-width: 14px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  color: var(--vibe-text-muted);
}
@media (hover: hover) {
  .vibe-reaction-option:hover {
    transform: translateY(-4px) scale(1.35);
    background: var(--vibe-info-bg);
  }
}
@media (hover: none) {
  .vibe-reaction-option:hover {
    transform: none;
    background: var(--vibe-info-bg);
  }
}
.vibe-reaction-option:active { transform: translateY(-2px) scale(1.15) }
.vibe-reaction-option.vibe-active-reaction {
  background: rgba(0, 255, 145, 0.12) !important;
  border-radius: 8px;
}
.vibe-reaction-option:disabled { opacity: .5; cursor: default; transform: none }
.vibe-reaction-option:focus-visible { outline: 2px solid var(--vibe-primary); outline-offset: 2px }

/* ── 11. States the plugin hardcodes in light colors────────────────────── */
/* ── 9a. Awaiting moderation notice ──────────── */
.vibe-awaiting {
  background: rgba(252, 211, 77, .08);
  border: 1px solid rgba(252, 211, 77, .25);
  color: #fcd34d;
  border-radius: 6px;
  font-size: .85rem;
}

/* Pinned comment - brand green (King: only pinned comments get the green).
   Plugin hardcodes orange/amber (#fbbf24 left border, #fef3c7/#fde68a/#b45309
   badge) and its stylesheet loads AFTER ours, so !important is required. */
.vibe-comments-section .vibe-comment-pinned > article {
  border-left: 3px solid var(--vibe-primary) !important;
  padding-left: 0.75rem;
}
.vibe-comments-section .vibe-pinned-badge {
  /* ── 9b. Outline green - brand badge family (King: reverted to this simpler green). ── */
  background: rgba(0, 255, 145, .1) !important;
  border: 1px solid rgba(0, 255, 145, .25) !important;
  color: #00ff91 !important;
}

/* ── 9c. Pin button hover - swap plugin's amber for brand green (consistency) ── */
.vibe-comments-section .vibe-pin-btn:hover {
  background: rgba(0, 255, 145, .1) !important;
  border-color: rgba(0, 255, 145, .35) !important;
  color: #00ff91 !important;
}

/* ── 9d. Character counter warning/over ──────── */
.vibe-char-counter.vibe-char-warn { color: #fcd34d }
.vibe-char-counter.vibe-char-over  { color: #f87171 }

/* ── 9e. New comment banner ──────────────────── */
.vibe-new-banner {
  background: var(--vibe-info-bg);
  border: 1px solid var(--vibe-border);
  color: var(--vibe-primary);
}

/* Error / success messages - plugin hardcodes light pastel boxes
   (#fee2e2/#991b1b and #dcfce7/#166534); these dark-brand overrides
   use .vibe-comments-section scoping so they beat the plugin's plain
   selectors even though the plugin stylesheet loads after ours. */
.vibe-comments-section .vibe-message-error {
  background: rgba(248, 113, 113, .1);
  border: 1px solid rgba(248, 113, 113, .3);
  color: #f87171;
  border-radius: 6px;
}
.vibe-comments-section .vibe-message-success {
  background: rgba(0, 255, 145, .08);
  border: 1px solid rgba(0, 255, 145, .25);
  color: #00ff91;
  border-radius: 6px;
}


/* ══ v1.21.20 - CASCADE ARMOR: the plugin stylesheet loads AFTER this skin
   (and twice), so equal-specificity rules would lose. Every 3.15+ override is
   re-declared with doubled prefix - beats plugin order without !important. ══ */
.vibe-comments-section .vibe-accepted-badge {
  color: var(--vibe-success-text) !important;
  background: var(--vibe-success-bg) !important;
  border: 1px solid rgba(0, 255, 145, .25);
}
.vibe-comments-section .vibe-accept-btn:hover:not(:disabled) {
  background: rgba(0, 255, 145, .12);
  border-color: rgba(0, 255, 145, .3);
  color: var(--vibe-success-text) !important;
}
.vibe-comments-section .vibe-accept-btn[data-accepted="1"] {
  background: rgba(0, 255, 145, .12);
  border-color: rgba(0, 255, 145, .3);
  color: var(--vibe-success-text) !important;
}
.vibe-comments-section .vibe-edit-textarea.vibe-edit-error {
  border-color: var(--vibe-error-text);
}
.vibe-comments-section .vibe-char-counter.vibe-char-warn { color: var(--vibe-warn-text); }
.vibe-comments-section .vibe-char-counter.vibe-char-over { color: var(--vibe-error-text); }
.vibe-comments-section .vibe-mention { color: var(--vibe-primary); }

/* ══ v1.21.27 - plugin 3.18.x Notify pill brand alignment (King's order: style
   the new vibecomments feature to blend with the tech theme design).
   The pill rides on one's own comment footer: 🔔 On / 🔕 Off reply-alerts
   toggle. Plugin ships light-mode colors (#f0fdf4/#15803d/#86efac) - reskinned
   with the skin's token family, cascade-armored (doubled prefix beats the
   plugin's after-load stylesheet), R5-gated hover. ══ */

/* OFF state - muted terminal pill */
.vibe-comments-section .vibe-notify-btn {
  background: transparent;
  border: 1px solid var(--vibe-border);
  color: var(--vibe-primary);
  opacity: .8;
}
/* ON state - green verdict pill, dark-native (was light green #f0fdf4) */
.vibe-comments-section .vibe-notify-btn[data-on="1"] {
  background: var(--vibe-success-bg) !important;
  border-color: rgba(0, 255, 145, .25) !important;
  color: var(--vibe-success-text) !important;
}
/* disabled - honest dim */
.vibe-comments-section .vibe-notify-btn:disabled {
  opacity: .55;
  cursor: default;
}
/* hover - gated for touch (R5 law) */
@media (hover: hover) {
  .vibe-comments-section .vibe-notify-btn:hover:not(:disabled) {
    border-color: rgba(0, 255, 145, .35);
    color: var(--vibe-primary);
  }
  .vibe-comments-section .vibe-notify-btn[data-on="1"]:hover:not(:disabled) {
    color: var(--vibe-primary);
    border-color: rgba(0, 255, 145, .45);
  }
}

/* ══ v1.21.62 - CASCADE ARMOR: load-more / edit / banner hovers.
   King's phone screenshot: "load more comments button looks blank green on
   hover". Root cause: the plugin stylesheet loads AFTER this skin, so its
   equal-specificity .vibe-btn-load-more:hover { background: var(--vibe-primary);
   color: white } beat the skin's §7c ghost hover - hover painted a SOLID
   brand-green slab with white text (invisible), and on touch press-and-hold
   it STUCK. Same unarmored class in the sweep: .vibe-edit-btn:hover (solid
   green + white), .vibe-new-banner-btn:hover (hardcoded BLUE #1d4ed8 on the
   brand-green pill), .vibe-edit-cancel:hover (light pastel #fee2e2 chip on
   dark). Doubled prefix beats the plugin without !important; hovers are
   UNGATED plain :hover per the touch law (press-and-hold paints, tapping
   elsewhere clears - never a stuck slab). ══ */

/* Load more - the §7c ghost hover (green border + green text on surface),
   now at winning specificity. */
.vibe-comments-section .vibe-btn-load-more:hover {
  background: var(--vibe-bg-alt);
  border-color: var(--vibe-primary);
  color: var(--vibe-primary);
}

/* Edit (pencil) - plugin fills solid green + white on hover; the skin's
   fill-hover anatomy is brand green + BLACK text (same as reply buttons). */
.vibe-comments-section .vibe-edit-btn:hover {
  background: var(--vibe-primary);
  border-color: var(--vibe-primary);
  color: #08160f;
}

/* New-comments banner button - brand-green pill; plugin hover hardcodes
   blue #1d4ed8. Idle + hover both carry the brand's black-on-green text
   (matches .vibe-btn-primary / .vibe-btn-load-comments anatomy). */
.vibe-comments-section .vibe-new-banner-btn {
  color: #08160f;
}
.vibe-comments-section .vibe-new-banner-btn:hover {
  background: var(--vibe-primary-hover);
  border-color: var(--vibe-primary-hover);
  color: #08160f;
}

/* Edit-cancel - plugin hovers a light pastel chip (#fee2e2) on dark. */
.vibe-comments-section .vibe-edit-cancel:hover {
  background: transparent;
  border-color: var(--vibe-border);
  color: var(--vibe-error-text);
}


/* ═══ v1.21.95 - TOUCH-HOVER STICK (King's phone screenshot 9/6): the border-color hovers above
   carry !important and iOS Safari paints :hover on FIRST TAP, keeping the green border stuck
   after the tap completes (the "green boxes" in the report). The theme's own two-tier doctrine:
   paint-changing hovers get gated, touch gets tap-state via :active only. The gate must carry
   the same !important to win the cascade against the plugin sheet. ═══ */
@media (hover: none) {
  .vibe-comment-body:hover {
    border-color: var(--vibe-border, #e2e8f0) !important;
    box-shadow: none !important;
  }
  .vibe-reaction-summary:hover {
    border-color: var(--vibe-border, #e2e8f0);
    background: none;
    color: inherit;
  }
}

/* ══ v1.21.99 (King): reaction/notify pill container - brand-blend guarantee ══
   The pill family (reaction summary, reply buttons, bell) must NEVER fall back to the
   plugin's light tokens on any load order. Explicit dark paint, doubled prefix wins. */
.vibe-comments-section .vibe-reaction-summary,
.vibe-comments-section .vibe-notify-btn,
.vibe-comments-section .vibe-reply-trigger,
.vibe-comments-section .vibe-like-btn {
  background: transparent;
  border-color: var(--vibe-border);
  color: var(--vibe-primary);
}
.vibe-comments-section .vibe-reaction-summary .vibe-rx-bubble svg,
.vibe-comments-section .vibe-rx-picker-emoji svg {
  stroke: var(--vibe-primary);
}

/* v1.22.27 (King directive 4): the green selected-reaction indicators are ALL
   gone - disc ring, pill border, the mine-glyph green stroke (it also lost to
   the white-glyph (0,4,1) rule anyway), AND the green count tint (plugin
   .vibe-has-reaction .vibe-rx-total rule) - the count stays neutral like FB.
   The picker pop-up's .vibe-active-reaction wash is the ONLY "my reaction"
   highlight. */
.vibe-comments-section .vibe-reaction-summary.vibe-has-reaction .vibe-rx-total {
  color: var(--vibe-text-muted);
}




/* v1.22.0 (King): the bell must look EXACTLY like the Reply ghost button */
.vibe-comments-section .vibe-notify-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 4px;
}
.vibe-comments-section .vibe-notify-btn {
  color: #fff;
  border-color: rgba(0, 255, 145, .35);
  background: #181c24 !important;
}
.vibe-comments-section .vibe-notify-btn:hover:not(:disabled) {
  background: #181c24 !important;
}
.vibe-comments-section .vibe-notify-btn[data-on="1"] {
  background: rgba(0, 255, 145, .12);
  border-color: rgba(0, 255, 145, .45);
  color: var(--vibe-primary);
}

/* ══ v1.22.5 - FOOTER FAMILY ANATOMY LAW (King screenshot 9/7): after v1.22.4 revived the
   armor, the footer actions rendered THREE different shapes - Reply kept the plugin's 999px
   pill (its (0,2,0) selector beats the skin family rule), the bell went 4px square (its armor
   won), the reaction summary stayed its own !important 999px oval. One row, one anatomy:
   the bell's approved v1.22.1 ghost (JetBrains Mono 12px/600, 6px 14px, 4px radius, 1px
   border) is the reference - now enforced on the whole family at winning specificity.
   Shape-only law: idle/hover/active COLORS are not redefined here. ══ */
.vibe-comments-section .vibe-comment-footer .comment-reply-link,
.vibe-comments-section .vibe-reply-trigger,
.vibe-comments-section .vibe-like-btn,
.vibe-comments-section .vibe-reaction-summary,
.vibe-comments-section .vibe-notify-btn {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  border-radius: 4px !important;
  border-width: 1px !important;
  border-style: solid !important;
  line-height: 1.2 !important;
}
/* v1.22.6 cross-browser audit: reduced-motion guard (house pattern, section-scoped) */
@media (prefers-reduced-motion: reduce) {
  .vibe-comments-section *, .vibe-comments-section *::before, .vibe-comments-section *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important;
  }
}

/* ══ v1.22.15 - TOOLBAR ARMOR CORRECTION (King 9/8: "the filter box is now bigger and
   still the unalignment still there unmoved, you changed nothing"). He was right AGAIN:
   v1.22.14 doubled every v1.22.12/13 toolbar selector to
   `.vibe-comments-section .vibe-comments-section <target>` expecting (0,3,0), but the
   template nests exactly ONE section (comments.php:55) - proven live: nested=0 - so all
   18 rules matched NOTHING and the plugin's 38px/8px-radius/native-iOS-search fallback
   reigned: exactly the bigger misaligned box the King saw. DEAD ARMOR LAW (v1.22.4)
   violated a second time by the same guess. CORRECT ARMOR: the toolbar is the REAL
   middle ancestor - initSearch() appends the search wrap into #vibe-comments-toolbar
   (vibe-comments.js:2620), so every toolbar control descends from
   `.vibe-comments-section .vibe-comments-toolbar` = (0,3,0): matches the live DOM and
   beats the plugin's (0,1,0) shared rules in ANY load order. ══ */
.vibe-comments-section .vibe-comments-toolbar {
  flex-wrap: wrap;
  gap: 8px;
  align-items: center; /* v1.22.18: row height is fixed by the 44px controls again - the hint no longer lives in the flow */
}
.vibe-comments-section .vibe-comments-toolbar .vibe-sort-icon-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  flex-shrink: 0;
  padding: 0;
  justify-content: center;
  align-items: center;
  gap: 0;
  border: 1px solid var(--vibe-border);
  border-radius: 4px;
  background: transparent;
  color: var(--vibe-text-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  box-sizing: border-box;
  align-self: center; /* v1.22.18: fixed 44x44 - the hint is out of the flow so nothing inflates the row */
}
.vibe-comments-section .vibe-comments-toolbar .vibe-sort-icon-btn svg {
  display: none; /* the arrow label alone is the mode cue - no double glyph */
}
.vibe-comments-section .vibe-comments-toolbar .vibe-sort-icon-btn:hover:not(:disabled),
.vibe-comments-section .vibe-comments-toolbar .vibe-sort-icon-btn:active {
  border-color: var(--vibe-primary);
  color: var(--vibe-primary);
}
.vibe-comments-section .vibe-comments-toolbar .vibe-search-wrap {
  flex: 1 1 220px;
  min-width: 0;
  gap: 8px;
  align-items: center;
  position: relative; /* v1.22.18: anchor for the mobile hint below */
}
.vibe-comments-section .vibe-comments-toolbar .vibe-search-input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  padding: 0 14px;
  font-size: 16px;
  font-family: inherit;
  line-height: 1;
  text-align: left;
  border-radius: 4px;
  background: var(--vibe-bg);
  color: var(--vibe-text);
  -webkit-appearance: textfield;
  appearance: textfield;
  box-sizing: border-box;
  vertical-align: middle;
  align-self: center;
  margin: 0;
}
.vibe-comments-section .vibe-comments-toolbar .vibe-search-status {
  flex-shrink: 0;
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--vibe-text-muted);
}
@media (max-width: 640px) {
  .vibe-comments-section .vibe-comments-toolbar {
    margin-bottom: 2.5rem; /* v1.22.20: 2rem + the 6px the hint's bigger top gap eats - keeps v1.22.19's below-clearance (10 top + 18 hint + 12 below = 40px) */
  }
  /* v1.22.21 (King: "is there any reason for this excess space"): the 2.5rem lane was
     reserved on EVERY mobile view, even idle when the hint is empty - ~36px of dead
     space. :has() shrinks the margin back to the plugin's 0.75rem UNLESS the status
     hint actually has text (search running). Browsers without :has() ignore the whole
     rule and keep v1.22.20's fixed lane - graceful. */
  .vibe-comments-section .vibe-comments-toolbar:not(:has(.vibe-search-status:not(:empty))) {
    margin-bottom: 0.75rem;
  }
  .vibe-comments-section .vibe-comments-toolbar .vibe-search-wrap {
    flex-wrap: nowrap; /* v1.22.18: one line only - no stacking inside the wrap */
  }
  .vibe-comments-section .vibe-comments-toolbar .vibe-search-status {
    position: absolute; /* v1.22.18: the hint floats BELOW the row - it can never inflate the row height again (King: "the filter box should not stretch like that") */
    top: 100%;
    left: 0;
    right: auto;
    margin-top: 10px; /* v1.22.20: gap ABOVE the hint too - 4px was crowding the search row (King: "there should be space above, between the search form and the 5 found") */
    max-width: 100%;
    flex-basis: auto; /* kills the old 100% stacking - out of the flow entirely */
    padding-left: 2px;
  }
}
.vibe-comments-section .vibe-comments-toolbar input[type="search"]::-webkit-search-decoration,
.vibe-comments-section .vibe-comments-toolbar input[type="search"]::-webkit-search-cancel-button,
.vibe-comments-section .vibe-comments-toolbar input[type="search"]::-webkit-search-results-button,
.vibe-comments-section .vibe-comments-toolbar input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
}