/**
 * 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
 */

/* ── 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;
}

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

/* ── 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);
}

/* ── 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-border); box-shadow: var(--vibe-shadow) }

/* Avatar — subtle ring, no default blue glow */
.vibe-comment-avatar img {
  border-radius: 50%;
  border: 1px solid var(--vibe-border);
  background: var(--vibe-bg-alt);
}

/* 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) }

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

/* ── 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 {
  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: linear-gradient(135deg, rgba(0, 255, 145, .14), rgba(0, 255, 145, .05)) !important;
  border: 1px solid rgba(0, 255, 145, .3) !important;
  border-radius: 999px !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);
}

/* ── "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;
}

/* ── 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-reply-trigger:hover, .vibe-like-btn:hover, .vibe-btn-cancel:hover, .vibe-retry-btn:hover, .vibe-view-replies-btn:hover, .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;
}

/* 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);
}

/* ── 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;
  font-size: 14px;
  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);
}

/* 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 }

/* "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;
}

/* 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) }

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

/* ── 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;
}

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

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

/* Facebook-style overlapping emoji stack in the summary — bubbles overlap
   cleanly with NO ring/border (like Facebook's merged reaction faces).
   Just the emoji glyph on a transparent bubble; -7px overlap + z-index
   gives the layered look. */
.vibe-rx-bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  width: 22px !important;
  height: 22px !important;
  background: none !important;
  border: none !important;
  border-radius: 50%;
  margin-left: -7px;
  position: relative;
  flex-shrink: 0;
}
.vibe-rx-bubble:first-child { margin-left: 0 }
.vibe-rx-stack .vibe-rx-bubble:nth-child(1) { z-index: 3 }
.vibe-rx-stack .vibe-rx-bubble:nth-child(2) { z-index: 2 }
.vibe-rx-stack .vibe-rx-bubble:nth-child(3) { z-index: 1 }

.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; }
}

/* 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 }
/* 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);
}
.vibe-reaction-option:hover {
  transform: translateY(-4px) scale(1.35);
  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 }

/* ── States the plugin hardcodes in light colors ──────────────────────── */
/* 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 badge */
.vibe-pinned-badge {
  background: rgba(0, 255, 145, .1);
  border: 1px solid rgba(0, 255, 145, .25);
  color: #00ff91;
}

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

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