/* ==========================================================================
   WP Social Network – Engagement Pack Styles
   Mobile-first, RTL-ready, dark-mode aware
   ========================================================================== */

/* ── Variables ────────────────────────────────────────────────────────────── */
/* Piggyback on the main plugin's --wpsn-* tokens so dark mode is automatic. */
:root {
  --sn-eng-primary:   var(--wpsn-primary, #2563eb);
  --sn-eng-radius:    var(--wpsn-radius, 8px);
  --sn-eng-shadow:    var(--wpsn-shadow, 0 2px 8px rgba(0,0,0,.12));
  --sn-eng-bg:        var(--wpsn-surface,   #ffffff);
  --sn-eng-bg-alt:    var(--wpsn-surface-2, #f9fafb);
  --sn-eng-border:    var(--wpsn-border,    #e5e7eb);
  --sn-eng-text:      var(--wpsn-text,      #111827);
  --sn-eng-muted:     var(--wpsn-text-muted,#6b7280);
  --sn-eng-success:   #16a34a;
  --sn-eng-danger:    #dc2626;
}

/* ── Shared ───────────────────────────────────────────────────────────────── */
.wpsn-eng-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px; border-radius:var(--sn-eng-radius);
  font-size:.875rem; font-weight:500; cursor:pointer;
  border:1px solid transparent; transition:background .15s, color .15s;
}
.wpsn-eng-btn-primary { background:var(--sn-eng-primary); color:#fff; }
.wpsn-eng-btn-primary:hover { filter:brightness(1.1); }
.wpsn-eng-btn-ghost { background:transparent; border-color:var(--sn-eng-border); color:var(--sn-eng-text); }
.wpsn-eng-btn-ghost:hover { background:var(--sn-eng-bg-alt); }
.wpsn-eng-btn-danger { background:var(--sn-eng-danger); color:#fff; }

.wpsn-eng-icon { width:18px; height:18px; }

/* ── Hashtags ─────────────────────────────────────────────────────────────── */
.wpsn-hashtag-link { color:var(--sn-eng-primary); text-decoration:none; font-weight:500; }
.wpsn-hashtag-link:hover { text-decoration:underline; }
.wpsn-trending-hashtags { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.wpsn-trending-hashtags li a {
  display:inline-block; padding:4px 10px;
  background:var(--sn-eng-bg-alt); border:1px solid var(--sn-eng-border);
  border-radius:999px; color:var(--sn-eng-primary); font-size:.8rem;
  text-decoration:none;
}
.wpsn-tag-count { color:var(--sn-eng-muted); font-size:.75rem; }

/* Hashtag autocomplete dropdown */
.wpsn-hashtag-dropdown, .wpsn-mention-dropdown {
  position:absolute; z-index:999; background:var(--sn-eng-bg);
  border:1px solid var(--sn-eng-border); border-radius:var(--sn-eng-radius);
  box-shadow:var(--sn-eng-shadow); max-height:200px; overflow-y:auto; min-width:180px;
}
.wpsn-hashtag-dropdown li, .wpsn-mention-dropdown li {
  padding:8px 12px; cursor:pointer; display:flex; align-items:center; gap:8px;
  font-size:.875rem; color:var(--sn-eng-text);
}
.wpsn-hashtag-dropdown li:hover, .wpsn-mention-dropdown li:hover { background:var(--sn-eng-bg-alt); }
.wpsn-mention-avatar { width:24px; height:24px; border-radius:50%; object-fit:cover; }
.wpsn-mention-link { color:var(--sn-eng-primary); font-weight:600; text-decoration:none; }
.wpsn-mention-link:hover { text-decoration:underline; }

/* ── Bookmarks ────────────────────────────────────────────────────────────── */
.wpsn-bookmark-btn { background:none; border:none; cursor:pointer; padding:4px; }
.wpsn-bookmark-btn svg { width:20px; height:20px; transition:fill .15s; }
.wpsn-bookmark-btn.saved svg { fill:var(--sn-eng-primary); }
.wpsn-bookmarks-page { max-width:700px; margin:0 auto; }
.wpsn-bookmarks-search { display:flex; gap:8px; margin-bottom:16px; }
.wpsn-bookmarks-search input { flex:1; padding:8px 12px; border:1px solid var(--sn-eng-border); border-radius:var(--sn-eng-radius); background:var(--sn-eng-bg); color:var(--sn-eng-text); }
.wpsn-collection-list { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.wpsn-collection-chip {
  padding:4px 12px; border-radius:999px; font-size:.8rem;
  border:1px solid var(--sn-eng-border); cursor:pointer; background:var(--sn-eng-bg-alt);
}
.wpsn-collection-chip.active { background:var(--sn-eng-primary); color:#fff; border-color:var(--sn-eng-primary); }

/* ── Sticky Posts ─────────────────────────────────────────────────────────── */
.wpsn-sticky-indicator {
  display:inline-flex; align-items:center; gap:4px;
  font-size:.75rem; color:var(--sn-eng-primary); font-weight:600;
  margin-bottom:4px;
}
.wpsn-activity-item.is-sticky { border-left:3px solid var(--sn-eng-primary); }

/* ── Share ────────────────────────────────────────────────────────────────── */
.wpsn-share-menu { position:relative; display:inline-block; }
.wpsn-share-dropdown {
  position:absolute; bottom:calc(100% + 8px); left:0;
  background:var(--sn-eng-bg); border:1px solid var(--sn-eng-border);
  border-radius:var(--sn-eng-radius); box-shadow:var(--sn-eng-shadow);
  min-width:200px; z-index:100; display:none;
}
.wpsn-share-dropdown.open { display:block; }
.wpsn-share-dropdown button, .wpsn-share-dropdown a {
  display:flex; align-items:center; gap:8px; width:100%; padding:10px 14px;
  background:none; border:none; cursor:pointer; font-size:.875rem;
  color:var(--sn-eng-text); text-decoration:none;
}
.wpsn-share-dropdown button:hover, .wpsn-share-dropdown a:hover { background:var(--sn-eng-bg-alt); }
.wpsn-share-original { border-left:3px solid var(--sn-eng-border); padding:8px 12px; margin:8px 0; color:var(--sn-eng-muted); font-size:.875rem; }
.wpsn-share-quote { font-style:italic; margin-bottom:6px; }

/* ── Polls ────────────────────────────────────────────────────────────────── */
/* Explicit colours — not inherited from parent so polls always look correct. */
.wpsn-poll {
  background:#f8fafc !important; border:1px solid #e2e8f0 !important;
  border-radius:8px; padding:16px; margin:12px 0;
  color:#0f172a !important;
}
.wpsn-poll * { color:#0f172a; }
.wpsn-poll-question { font-weight:600; font-size:1rem; margin-bottom:12px; color:#0f172a !important; }
.wpsn-poll-option { margin-bottom:8px; }
.wpsn-poll-option label { display:flex; align-items:center; gap:10px; cursor:pointer; color:#0f172a !important; }
.wpsn-poll-option-text { color:#0f172a !important; }
.wpsn-poll-option-image { width:48px; height:48px; object-fit:cover; border-radius:4px; }
.wpsn-poll-bar-wrap { margin-top:4px; }
.wpsn-poll-bar-track {
  height:6px; background:#e2e8f0; border-radius:3px; overflow:hidden;
}
.wpsn-poll-bar-fill {
  height:100%; background:var(--sn-eng-primary,#2563eb); border-radius:3px;
  transition:width .5s ease;
}
.wpsn-poll-bar-label { font-size:.75rem; color:#64748b !important; margin-top:2px; }
.wpsn-poll-footer { display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap; }
.wpsn-poll-meta { font-size:.75rem; color:#64748b !important; }
.wpsn-poll-btn { margin-top:10px; }
.wpsn-poll-correct { color:#16a34a !important; font-weight:600; }
.wpsn-poll-wrong   { color:#dc2626 !important; }
.wpsn-poll-closed  { opacity:.7; }
/* Dark mode override */
[data-wpsn-dark="true"] .wpsn-poll {
  background:#1e293b !important; border-color:#334155 !important; color:#f1f5f9 !important;
}
[data-wpsn-dark="true"] .wpsn-poll * { color:#f1f5f9; }
[data-wpsn-dark="true"] .wpsn-poll-question,
[data-wpsn-dark="true"] .wpsn-poll-option label,
[data-wpsn-dark="true"] .wpsn-poll-option-text { color:#f1f5f9 !important; }
[data-wpsn-dark="true"] .wpsn-poll-bar-label,
[data-wpsn-dark="true"] .wpsn-poll-meta { color:#94a3b8 !important; }
[data-wpsn-dark="true"] .wpsn-poll-bar-track { background:#334155; }

/* ── GIF Picker ───────────────────────────────────────────────────────────── */
.wpsn-gif-picker {
  position:absolute; bottom:calc(100% + 8px); left:0;
  width:320px; background:var(--sn-eng-bg);
  border:1px solid var(--sn-eng-border); border-radius:var(--sn-eng-radius);
  box-shadow:var(--sn-eng-shadow); z-index:200; display:none;
}
.wpsn-gif-picker.open { display:block; }
.wpsn-gif-search { width:100%; padding:8px 12px; border:none; border-bottom:1px solid var(--sn-eng-border); background:var(--sn-eng-bg); color:var(--sn-eng-text); font-size:.875rem; }
.wpsn-gif-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:8px; max-height:240px; overflow-y:auto; }
.wpsn-gif-item { cursor:pointer; border-radius:4px; overflow:hidden; }
.wpsn-gif-item img { width:100%; height:80px; object-fit:cover; display:block; transition:opacity .2s; }
.wpsn-gif-item img.lazy { opacity:0; }
.wpsn-gif-item img.loaded { opacity:1; }
.wpsn-gif-placeholder { background:var(--sn-eng-border); height:80px; animation:shimmer 1.5s infinite; }
@keyframes shimmer { 0%{opacity:.6} 50%{opacity:1} 100%{opacity:.6} }
.wpsn-gif-empty { text-align:center; padding:20px; color:var(--sn-eng-muted); font-size:.875rem; }
.wpsn-gif-no-key { padding:12px; text-align:center; color:var(--sn-eng-muted); font-size:.8rem; }

/* ── Attachments ──────────────────────────────────────────────────────────── */
.wpsn-att-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.wpsn-att-item { position:relative; }
.wpsn-att-thumb { width:80px; height:80px; object-fit:cover; border-radius:var(--sn-eng-radius); border:1px solid var(--sn-eng-border); cursor:pointer; }
.wpsn-att-file {
  display:flex; align-items:center; gap:6px; padding:6px 10px;
  border:1px solid var(--sn-eng-border); border-radius:var(--sn-eng-radius);
  font-size:.8rem; color:var(--sn-eng-text); text-decoration:none;
  background:var(--sn-eng-bg-alt);
}
.wpsn-att-audio { width:200px; }
.wpsn-att-remove {
  position:absolute; top:-6px; right:-6px; width:18px; height:18px;
  background:var(--sn-eng-danger); color:#fff; border-radius:50%;
  border:none; cursor:pointer; font-size:10px; display:flex; align-items:center; justify-content:center;
}
.wpsn-drop-zone {
  border:2px dashed var(--sn-eng-border); border-radius:var(--sn-eng-radius);
  padding:16px; text-align:center; color:var(--sn-eng-muted); font-size:.875rem;
  transition:border-color .2s;
}
.wpsn-drop-zone.dragover { border-color:var(--sn-eng-primary); }

/* Lightbox */
.wpsn-lightbox-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:9999;
  display:flex; align-items:center; justify-content:center;
}
.wpsn-lightbox-overlay img { max-width:90vw; max-height:90vh; border-radius:4px; }
.wpsn-lightbox-close { position:absolute; top:16px; right:16px; background:rgba(255,255,255,.2); border:none; color:#fff; border-radius:50%; width:36px; height:36px; cursor:pointer; font-size:18px; }

/* ── RTL overrides ────────────────────────────────────────────────────────── */
[dir="rtl"] .wpsn-share-dropdown  { left:auto; right:0; }
[dir="rtl"] .wpsn-gif-picker       { left:auto; right:0; }
[dir="rtl"] .wpsn-hashtag-dropdown,
[dir="rtl"] .wpsn-mention-dropdown { left:auto; right:0; }
[dir="rtl"] .wpsn-activity-item.is-sticky { border-left:none; border-right:3px solid var(--sn-eng-primary); }
[dir="rtl"] .wpsn-share-original { border-left:none; border-right:3px solid var(--sn-eng-border); }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .wpsn-gif-picker { width:280px; }
  .wpsn-gif-grid   { grid-template-columns:repeat(2,1fr); }
  .wpsn-share-dropdown { min-width:160px; }
}