/*
  ╔══════════════════════════════════════════════════════════════╗
  ║   LSF ENHANCEMENTS — All Bug Fix + New Feature Styles       ║
  ║   Load AFTER lsf-pro.css. Overrides nothing in core.        ║
  ╚══════════════════════════════════════════════════════════════╝
*/

/* ══════════════════════════════════
   0. GLOBAL TOUCH PERFORMANCE FIX
   Eliminates 300ms tap delay on all
   interactive elements.
══════════════════════════════════ */
a, button, input, select, textarea,
.btn, .res-item, .faculty-btn, .glass-card,
.nav-links a, .bnav-item, .dropdown-toggle,
.bookmark-btn, .share-btn-sm, .bookmark-btn-sm,
.rating-star, .gs-result-item, .modal-close-btn {
  touch-action: manipulation;
}

/* ══════════════════════════════════
   1. DARK MODE — DAILY QUOTE FIX
   The quote band had invisible text
   in dark mode.
══════════════════════════════════ */
[data-theme="dark"] .quote-section,
[data-theme="dark"] .daily-quote,
[data-theme="dark"] [class*="quote-section"],
[data-theme="dark"] [id*="daily-quote"],
[data-theme="dark"] .quote-band,
[data-theme="dark"] [class*="quote-band"] {
  background: var(--card) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .quote-text,
[data-theme="dark"] .quote-band blockquote,
[data-theme="dark"] .quote-band p,
[data-theme="dark"] [class*="quote-text"],
[data-theme="dark"] .quote-section p,
[data-theme="dark"] .daily-quote p,
[data-theme="dark"] .daily-quote blockquote {
  color: var(--text-main) !important;
}
[data-theme="dark"] .quote-author,
[data-theme="dark"] [class*="quote-author"],
[data-theme="dark"] .quote-band cite,
[data-theme="dark"] .daily-quote cite {
  color: var(--text-dim) !important;
}

/* ══════════════════════════════════
   2. NAV LINKS — OVERFLOW FIX
   Prevents wrapping on very small
   screens (< 360px).
══════════════════════════════════ */
.nav-links {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  max-width: 100%;
  padding: 8px 12px;
}
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a {
  width: 44px;
  height: 44px;
  font-size: 1.1rem;
  flex-shrink: 0;
}
@media (max-width: 380px) {
  .nav-links a { width: 38px; height: 38px; font-size: 1rem; }
  .nav-links { gap: 4px; padding: 6px 10px; }
}

/* ══════════════════════════════════
   3. MODAL CLOSE BUTTON — TOUCH TARGET FIX
   Min 44×44px for accessibility.
══════════════════════════════════ */
.modal-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  background: var(--bg-alt);
  border: 1.5px solid var(--border);
  border-radius: 50%;
  font-size: 1rem;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
.modal-close-btn:hover {
  background: var(--coral-light);
  color: var(--coral);
  border-color: var(--coral);
  transform: scale(1.08);
}

/* ══════════════════════════════════
   4. THEME FAB — FIX POSITION
   Was overlapping top-right content.
   Now sits bottom-left, away from
   bottom-nav on mobile.
══════════════════════════════════ */
.lsf-theme-fab {
  position: fixed;
  bottom: 88px;     /* above bottom nav on mobile */
  left: 20px;
  right: auto;
  top: auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--card);
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  cursor: pointer;
  z-index: 1200;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s;
}
.lsf-theme-fab:hover {
  transform: scale(1.12);
  box-shadow: var(--shadow-lg);
}
@media (min-width: 769px) {
  .lsf-theme-fab { bottom: 32px; left: 28px; }
}

/* ══════════════════════════════════
   5. SCROLL-TO-TOP BUTTON
══════════════════════════════════ */
.lsf-scroll-top {
  position: fixed;
  bottom: 88px;
  right: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gradient);
  color: #fff;
  border: none;
  font-size: 1.3rem;
  font-weight: 700;
  cursor: pointer;
  z-index: 1200;
  box-shadow: var(--shadow-coral);
  opacity: 0;
  transform: translateY(16px) scale(0.8);
  transition: opacity 0.3s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
.lsf-scroll-top.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.lsf-scroll-top:hover { transform: scale(1.1); }
@media (min-width: 769px) {
  .lsf-scroll-top { bottom: 32px; right: 28px; }
}

/* ══════════════════════════════════
   6. PAGE TRANSITION BAR
   (Styles are mostly inline in JS,
    but this ensures it's on top)
══════════════════════════════════ */
#lsf-progress-bar { z-index: 99999 !important; }

/* ══════════════════════════════════
   7. GLOBAL SEARCH COMMAND PALETTE
══════════════════════════════════ */
.gs-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 5, 20, 0.7);
  backdrop-filter: blur(12px);
  z-index: 10000;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 20px 20px;
}
.gs-overlay.open {
  display: flex;
  animation: gsIn 0.22s ease;
}
@keyframes gsIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.gs-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  width: 100%;
  max-width: 620px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.3);
  overflow: hidden;
  animation: gsPanelIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes gsPanelIn {
  from { transform: translateY(-20px) scale(0.96); }
  to   { transform: none; }
}
.gs-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.gs-icon { color: var(--text-muted); font-size: 1rem; flex-shrink: 0; }
.gs-input {
  flex: 1;
  min-width: 160px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 1rem;
  color: var(--text-main);
  outline: none;
}
.gs-input::placeholder { color: var(--text-muted); }
.gs-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.gs-filter {
  padding: 5px 14px;
  border-radius: 99px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.2s;
  touch-action: manipulation;
}
.gs-filter.active, .gs-filter:hover {
  background: var(--coral-light);
  border-color: var(--coral);
  color: var(--coral);
}
.gs-close {
  min-width: 36px;
  min-height: 36px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gs-results {
  max-height: 420px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.gs-hint, .gs-empty {
  padding: 32px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}
.gs-result-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.gs-result-item:hover, .gs-result-item:focus {
  background: var(--coral-light);
}
.gs-result-icon { font-size: 1.4rem; flex-shrink: 0; }
.gs-result-body { flex: 1; min-width: 0; }
.gs-result-label { font-size: 0.9rem; font-weight: 600; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-result-sub { font-size: 0.75rem; color: var(--text-dim); margin-top: 2px; }
.gs-result-type {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.gs-footer {
  padding: 10px 20px;
  border-top: 1px solid var(--border);
  font-size: 0.72rem;
  color: var(--text-muted);
  text-align: center;
}
.gs-footer kbd {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  font-family: monospace;
}

/* ══════════════════════════════════
   8. NOTIFICATION CENTRE (BELL)
══════════════════════════════════ */
.lsf-notif-bell {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--card);
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 1100;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.lsf-notif-bell:hover { transform: scale(1.1); }
.bell-icon { line-height: 1; }
.bell-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 18px;
  height: 18px;
  background: var(--coral);
  color: #fff;
  border-radius: 99px;
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid var(--card);
}
.lsf-notif-panel {
  position: fixed;
  top: 76px;
  right: 20px;
  width: 320px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  z-index: 1099;
  display: none;
  flex-direction: column;
  max-height: 480px;
  overflow: hidden;
  animation: notifPanelIn 0.22s ease;
}
.lsf-notif-panel.open { display: flex; }
@keyframes notifPanelIn {
  from { opacity: 0; transform: translateY(-10px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
.notif-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
}
.notif-panel-header h4 { font-size: 0.9rem; font-weight: 700; color: var(--text-main); }
.notif-list { overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; }
.notif-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
}
.notif-item.unread { background: var(--coral-light); }
.notif-item:hover { background: var(--bg-alt); }
.notif-msg { font-size: 0.85rem; color: var(--text-main); line-height: 1.5; }
.notif-time { font-size: 0.72rem; color: var(--text-muted); margin-top: 4px; }
.notif-empty { padding: 32px 16px; text-align: center; color: var(--text-muted); font-size: 0.88rem; }

@media (max-width: 480px) {
  .lsf-notif-panel { right: 10px; width: calc(100vw - 20px); }
  .lsf-notif-bell  { top: 14px; right: 14px; }
}

/* Bell shake animation — plays when a new notification arrives in real time */
@keyframes lsfBellShake {
  0%,100% { transform: rotate(0deg)   scale(1); }
  15%     { transform: rotate(-18deg) scale(1.15); }
  30%     { transform: rotate(14deg)  scale(1.12); }
  45%     { transform: rotate(-10deg) scale(1.08); }
  60%     { transform: rotate(7deg)   scale(1.04); }
  75%     { transform: rotate(-4deg)  scale(1.02); }
}
.lsf-notif-bell.shake { animation: lsfBellShake 0.55s cubic-bezier(0.36,0.07,0.19,0.97); }

/* Badge always red with a subtle pulse on new arrivals */
.bell-badge {
  background: #ef4444 !important;
  box-shadow: 0 0 0 2px var(--card);
  animation: none;
}
.bell-badge.new-notif {
  animation: badgePop 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes badgePop {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

/* ══════════════════════════════════
   9. BOOKMARKS — SUBJECT CARDS
══════════════════════════════════ */
.bookmark-btn {
  min-width: 36px;
  min-height: 36px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  opacity: 0.4;
  transition: opacity 0.2s, transform 0.2s;
  padding: 4px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bookmark-btn:hover, .bookmark-btn.bookmarked {
  opacity: 1;
  transform: scale(1.15);
}
.bookmark-btn-sm {
  min-width: 36px;
  min-height: 36px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  opacity: 0.55;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}
.bookmark-btn-sm:hover, .bookmark-btn-sm.bookmarked {
  opacity: 1;
  background: var(--coral-light);
  border-color: var(--coral);
}
.share-btn-sm {
  min-width: 36px;
  min-height: 36px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  opacity: 0.55;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}
.share-btn-sm:hover {
  opacity: 1;
  background: var(--emerald-light);
  border-color: var(--emerald);
}

/* Material item row (file + actions) */
.material-item-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin-bottom: 10px;
}
.material-item-row .res-item { margin-bottom: 0 !important; }
.material-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

/* ══════════════════════════════════
   10. STUDY PROGRESS INDICATOR
══════════════════════════════════ */
.subject-progress-bar {
  height: 6px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 4px;
  position: relative;
}
.subject-progress-fill {
  height: 100%;
  background: var(--gradient, linear-gradient(90deg, #ff6b35, #6c3ce1));
  border-radius: 99px;
  transition: width 0.6s ease;
}
.subject-progress-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  display: block;
  margin-top: 2px;
}

/* ══════════════════════════════════
   11. MATERIALS RATING STARS
══════════════════════════════════ */
.material-rating {
  display: flex;
  gap: 4px;
  padding: 6px 0 10px;
}
.rating-star {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--border);
  transition: color 0.15s, transform 0.15s;
  padding: 2px;
  min-width: 28px;
  min-height: 28px;
}
.rating-star.filled { color: var(--sun, #fbbf24); }
.rating-star:hover  { transform: scale(1.2); color: var(--sun, #fbbf24); }

/* ══════════════════════════════════
   12. PROFILE COMPLETION INDICATOR
══════════════════════════════════ */
.profile-completion-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px;
}
.completion-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dim);
  text-align: center;
}

/* Profile nudge banner on homepage */
.profile-nudge-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-left: 4px solid var(--coral);
  border-radius: var(--r-md);
  margin-bottom: 24px;
  flex-wrap: wrap;
  box-shadow: var(--shadow-sm);
}
.nudge-icon { font-size: 1.4rem; flex-shrink: 0; }
.profile-nudge-banner > div { flex: 1; min-width: 160px; font-size: 0.85rem; color: var(--text-dim); }
.profile-nudge-banner strong { color: var(--text-main); }
.nudge-dismiss {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  padding: 4px 8px;
  border-radius: 50%;
  min-width: 32px;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ══════════════════════════════════
   13. PWA INSTALL BADGE
══════════════════════════════════ */
.lsf-pwa-badge {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px 18px;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 340px;
  width: calc(100% - 40px);
  z-index: 2000;
  opacity: 0;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.lsf-pwa-badge.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.pwa-icon { font-size: 1.8rem; flex-shrink: 0; }
.pwa-text { flex: 1; min-width: 0; }
.pwa-text strong { display: block; font-size: 0.88rem; color: var(--text-main); }
.pwa-text small { font-size: 0.75rem; color: var(--text-dim); }
.pwa-install-btn {
  background: var(--gradient);
  color: #fff;
  border: none;
  border-radius: 99px;
  padding: 8px 18px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  touch-action: manipulation;
}
.pwa-dismiss-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 0.8rem;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ══════════════════════════════════
   14. RESTORE TOAST (modal context)
   Brief toast to reopen last modal
══════════════════════════════════ */
.lsf-restore-toast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 99px;
  padding: 12px 20px;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.85rem;
  color: var(--text-dim);
  z-index: 2000;
  opacity: 0;
  transition: all 0.3s ease;
  white-space: nowrap;
}
.lsf-restore-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.lsf-restore-toast button {
  background: var(--gradient);
  color: #fff;
  border: none;
  border-radius: 99px;
  padding: 6px 16px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}

/* ══════════════════════════════════
   15. SKELETON LOADER ENHANCEMENTS
   (builds on existing skeleton styles
    in lsf-pro.css)
══════════════════════════════════ */
.skeleton {
  background: linear-gradient(90deg, var(--border) 25%, rgba(255,255,255,0.08) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--r-sm);
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}
.skeleton-line { height: 16px; border-radius: 4px; margin-bottom: 10px; }
.skeleton-line.wide   { width: 80%; }
.skeleton-line.medium { width: 60%; }
.skeleton-line.narrow { width: 40%; }

/* ══════════════════════════════════
   16. DROPDOWN — DESKTOP FIX
   Ensure dropdown uses position:fixed
   correctly and doesn't have hover CSS
   trigger that causes dual behaviour.
══════════════════════════════════ */
/* Remove any CSS-based hover trigger for dropdown on desktop */
@media (min-width: 769px) {
  .dropdown:hover > .dropdown-menu { display: none !important; }
  .dropdown-menu.show              { display: block !important; }
}

/* ══════════════════════════════════
   17. DARK MODE — ADDITIONAL FIXES
══════════════════════════════════ */
[data-theme="dark"] .gs-panel,
[data-theme="dark"] .lsf-notif-panel,
[data-theme="dark"] .lsf-pwa-badge,
[data-theme="dark"] .lsf-restore-toast {
  background: var(--card) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .gs-input { color: var(--text-main); }
[data-theme="dark"] .gs-result-label { color: var(--text-main); }
[data-theme="dark"] .gs-result-item:hover { background: var(--coral-light); }
[data-theme="dark"] .lsf-theme-fab {
  background: var(--card) !important;
  border-color: var(--border) !important;
}

/* ══════════════════════════════════
   18. READING PROGRESS BAR (Articles)
══════════════════════════════════ */
#lsf-article-reading-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  z-index: 9998;
  background: var(--gradient, linear-gradient(90deg, #ff6b35, #6c3ce1));
  pointer-events: none;
  transition: width 0.1s linear;
}

/* ══════════════════════════════════
   19. HAPTIC VISUAL FEEDBACK
   Brief scale pulse on tap for mobile
══════════════════════════════════ */
@media (hover: none) {
  .btn:active { transform: scale(0.96) !important; }
  .modal-close-btn:active { transform: scale(0.92) !important; }
  .bookmark-btn:active, .bookmark-btn-sm:active, .share-btn-sm:active {
    transform: scale(0.88) !important;
  }
  .rating-star:active { transform: scale(1.3) !important; }
}

/* ══════════════════════════════════
   20. COUNT POP ANIMATION
   (for like/comment count updates)
══════════════════════════════════ */
.count-popped {
  animation: countPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes countPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.4); color: var(--coral); }
  100% { transform: scale(1); }
}

/* ══════════════════════════════════
   21. NEWS CARD IMAGE OPTIMISATION
   Proper aspect-ratio to prevent
   layout shift before images load.
══════════════════════════════════ */
.news-card img,
.article-card img,
[class*="news-card"] img,
[class*="article-card"] img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
  display: block;
  border-radius: var(--r-md) var(--r-md) 0 0;
}

/* ══════════════════════════════════
   22. DARK MODE ADDITIONAL SURFACES
══════════════════════════════════ */
[data-theme="dark"] .profile-nudge-banner {
  background: var(--card) !important;
  border-color: var(--border) !important;
  border-left-color: var(--coral) !important;
}
[data-theme="dark"] .lsf-scroll-top { box-shadow: 0 4px 16px rgba(255,107,53,0.4); }
[data-theme="dark"] .notif-item.unread { background: var(--coral-light) !important; }
[data-theme="dark"] .material-rating .rating-star { color: rgba(255,255,255,0.12); }
[data-theme="dark"] .material-rating .rating-star.filled { color: var(--sun, #fbbf24); }

/* ══════════════════════════════════
   23. FACULTY BAR SCROLL — MOBILE
   Allow faculty toggle to scroll
   horizontally without wrapping.
══════════════════════════════════ */
@media (max-width: 600px) {
  .faculty-bar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100% !important;
    border-radius: var(--r-lg) !important;
    justify-content: flex-start !important;
  }
  .faculty-bar::-webkit-scrollbar { display: none; }
  .faculty-btn { white-space: nowrap; flex-shrink: 0; }
}
/* ══════════════════════════════════
   24. BOTTOM NAV — FULLY REMOVED
   Hidden at all sizes. The top navbar
   now handles all navigation.
══════════════════════════════════ */
.lsf-bottom-nav,
.lsf-bottom-nav *,
.mobile-quick-bar,
.mobile-quick-bar *,
.bottom-quick-bar,
.bottom-quick-bar *,
#courses-sheet,
.courses-sheet-overlay,
#ptr-indicator {
  display: none !important;
  pointer-events: none !important;
}

/* Remove body padding that was reserved for bottom nav */
body.has-bottom-nav {
  padding-bottom: 0 !important;
}

/* ══════════════════════════════════
   25. MENTORSHIP — HORIZONTAL SCROLL
   Makes the category filter bar scroll
   horizontally on small screens instead
   of wrapping into multiple rows.
   Covers every class name the mentorship
   page might use for its filter strip.
══════════════════════════════════ */
.mentor-categories,
.mentor-cats,
.mentorship-categories,
.mentor-filter-bar,
.cat-filter-bar,
.filter-tabs,
.mentor-tabs,
.mentorship-tabs,
.mentor-filters,
.tab-filters,
.category-tabs,
[class*="mentor-cat"],
[class*="mentor-filter"],
[class*="filter-tabs"],
[id*="mentor-cat"],
[id*="mentorship-cat"],
[id*="mentor-filter"],
[id*="filter-tabs"] {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 8px !important;
  padding-bottom: 4px;
  /* fade edges to hint there's more content */
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 16px, black calc(100% - 16px), transparent 100%);
  mask-image:         linear-gradient(to right, transparent 0, black 16px, black calc(100% - 16px), transparent 100%);
}
.mentor-categories::-webkit-scrollbar,
.mentor-cats::-webkit-scrollbar,
.mentorship-categories::-webkit-scrollbar,
.mentor-filter-bar::-webkit-scrollbar,
.cat-filter-bar::-webkit-scrollbar,
.filter-tabs::-webkit-scrollbar,
.mentor-tabs::-webkit-scrollbar,
.mentorship-tabs::-webkit-scrollbar,
.mentor-filters::-webkit-scrollbar,
.tab-filters::-webkit-scrollbar,
.category-tabs::-webkit-scrollbar { display: none; }

/* Every category chip / tab must never shrink */
.mentor-categories > *,
.mentor-cats > *,
.mentorship-categories > *,
.mentor-filter-bar > *,
.cat-filter-bar > *,
.filter-tabs > *,
.mentor-tabs > *,
.mentorship-tabs > *,
.mentor-filters > *,
.tab-filters > *,
.category-tabs > * {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

/* ══════════════════════════════════
   26. PORTALS DROPDOWN — DARK MODE
══════════════════════════════════ */
[data-theme="dark"] #lsf-portals-menu {
  background: var(--card) !important;
  border-color: var(--border) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5) !important;
}
[data-theme="dark"] #lsf-portals-menu a { color: var(--text-dim) !important; }

/* ══════════════════════════════════
   27. AVATAR COMPLETION RING
   The SVG ring overlays the profile pic
   and must not clip on mobile sizes.
══════════════════════════════════ */
.avatar-wrapper {
  overflow: visible !important;  /* allow ring SVG to extend outside */
}

/* ══════════════════════════════════
   28. ARTICLE NEWS CARDS — 15-DAY FILTER
   JS applies data-stale="true" to old
   cards; this hides them smoothly.
══════════════════════════════════ */
.article-card[data-stale="true"],
.news-card[data-stale="true"] {
  display: none !important;
}

/* ══════════════════════════════════
   29. NAVBAR — GLOBAL OVERFLOW LOCK
   Ensure nothing inside the navbar
   causes horizontal page scroll.
   overflow-y stays visible so
   position:fixed dropdown menus
   are not clipped on any browser.
══════════════════════════════════ */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}
.container.navbar {
  overflow-x: hidden;   /* block side-scroll */
  overflow-y: visible;  /* never clip dropdown */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* ══════════════════════════════════
   30. NAVBAR — RESPONSIVE ICON SIZES
   Icons scale DOWN on smaller screens
   instead of being hidden or clipped.
   Minimum 40px tap target maintained.
══════════════════════════════════ */

/* 768px – 600px */
@media (max-width: 768px) and (min-width: 601px) {
  .nav-links { gap: 4px; padding: 6px 12px; }
  .nav-links a, .nav-links li > button {
    width: 44px; height: 44px; font-size: 1.1rem;
  }
  .logo { font-size: 1.1rem; }
}

/* 600px – 480px */
@media (max-width: 600px) and (min-width: 481px) {
  .nav-links { gap: 3px; padding: 5px 10px; }
  .nav-links a, .nav-links li > button {
    width: 42px; height: 42px; font-size: 1.05rem;
  }
  .logo { font-size: 1rem; white-space: nowrap; }
}

/* 480px – 380px */
@media (max-width: 480px) and (min-width: 381px) {
  .nav-links { gap: 2px; padding: 5px 8px; }
  .nav-links a, .nav-links li > button {
    width: 40px; height: 40px; font-size: 1rem;
  }
  .logo { font-size: 0.95rem; }
}

/* Below 380px */
@media (max-width: 380px) {
  .nav-links { gap: 1px; padding: 4px 6px; }
  .nav-links a, .nav-links li > button {
    width: 38px; height: 38px; font-size: 0.92rem;
  }
  .logo { font-size: 0.88rem; }
}

/* Portals button */
@media (max-width: 600px) {
  #lsf-portals-btn { width: 42px !important; height: 42px !important; font-size: 1rem !important; }
}
@media (max-width: 480px) {
  #lsf-portals-btn { width: 40px !important; height: 40px !important; font-size: 0.95rem !important; }
}

/* ══════════════════════════════════
   31. ARTICLE SHARE BUTTON
   Styles for the injected share btn
   on article cards and in modals.
══════════════════════════════════ */
.article-share-btn {
  touch-action: manipulation;
  transition: all 0.2s !important;
}
.nm-share-btn, .article-modal-share-btn {
  touch-action: manipulation;
  flex-shrink: 0;
}

/* ══════════════════════════════════
   32. ARTICLE MODAL SCROLL — ensure
   the modal body is scrollable so the
   reading progress bar can track it.
══════════════════════════════════ */
#news-modal-body,
#nm-scroll,
.nm-scroll,
.news-modal-body,
.article-modal-body {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  max-height: 100%;
}

/* ══════════════════════════════════
   33. AVATAR COMPLETION RING — HIDDEN
   Circular progress ring disabled.
   JS no longer injects it either
   (renderProfileCompletion is a no-op).
══════════════════════════════════ */
.avatar-completion-ring {
  display: none !important;
}
/* ══════════════════════════════════
   34. DROPDOWN MENU — BODY-LEVEL STYLES
   Menus are moved to <body> by JS so
   they can never be clipped. Ensure
   correct z-index and appearance.
══════════════════════════════════ */
body > .dropdown-menu {
  z-index: 99998 !important;
}
body > .dropdown-menu.show {
  display: block !important;
}
/* Dark mode for body-level menus */
[data-theme="dark"] body > .dropdown-menu {
  background: var(--card) !important;
  border-color: var(--border) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6) !important;
}
[data-theme="dark"] body > .dropdown-menu li a {
  color: var(--text-dim) !important;
}
[data-theme="dark"] body > .dropdown-menu li a:hover {
  background: var(--coral-light) !important;
  color: var(--coral) !important;
}

/* ══════════════════════════════════
   35. PROFILE PAGE — MOBILE LAYOUT
   Comprehensive fix: all elements
   clamped to viewport width so nothing
   overflows the body's overflow-x:hidden
   and content is never invisible.
══════════════════════════════════ */

/* ── Root containment: profile page ── */
.profile-page,
body.profile-page {
  max-width: 100vw !important;
}

/* ── Every direct child of profile page
   must stay within viewport ── */
.profile-page *,
.profile-main * {
  box-sizing: border-box !important;
  max-width: 100% !important;
}

/* ── Main content area ── */
.profile-page main,
main.profile-main,
.profile-main {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ── Container inside profile ── */
.profile-page .container,
.profile-main .container {
  padding-left: 16px !important;
  padding-right: 16px !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* ── Show/hide password wrapper ── */
.pw-field-wrap {
  position: relative;
  width: 100%;
}
.pw-toggle-btn {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 1rem;
  padding: 4px;
  line-height: 1;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}
.pw-toggle-btn:hover { color: var(--coral); }
.pw-toggle-btn:focus { outline: none; }
/* Prevent icon from being selectable */
.pw-toggle-btn i { pointer-events: none; }

@media (max-width: 768px) {
  /* ── Avatar / photo container ── */
  .avatar-wrapper,
  .profile-photo-container {
    position: relative !important;
    flex-shrink: 0 !important;
    align-self: center !important;
    margin: 0 auto 16px !important;
  }

  /* ── Profile hero / header rows ── */
  .profile-header,
  .profile-top-row,
  .profile-info-row,
  .profile-action-row,
  .profile-hero,
  .profile-hero-inner,
  [class*="profile-header"],
  [class*="profile-top"],
  [class*="profile-hero"] {
    flex-direction: column !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    text-align: center !important;
    min-width: 0 !important;
    width: 100% !important;
    gap: 12px !important;
  }

  /* ── Profile card / section panels ── */
  .profile-card,
  .profile-section,
  .profile-panel,
  .profile-box,
  .settings-card,
  .settings-panel,
  .settings-section,
  [class*="profile-card"],
  [class*="profile-section"],
  [class*="settings-card"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    border-radius: var(--r-xl) !important;
    padding: 20px 16px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* ── Stat cards grid ── */
  .bento-grid,
  .stats-grid,
  .profile-stats,
  [class*="stats-grid"],
  [class*="stat-grid"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  /* Stat cards themselves */
  .stat-card {
    padding: 18px 14px !important;
    min-width: 0 !important;
  }

  /* ── Form inputs and selects ── */
  .profile-page input,
  .profile-page select,
  .profile-page textarea,
  .profile-page .auth-input,
  .settings-card input,
  .settings-panel input,
  .settings-card select,
  .settings-panel select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-right: 44px !important; /* space for eye icon */
  }

  /* ── Form rows that go side by side ── */
  .form-row,
  .input-row,
  .field-row,
  [class*="form-row"],
  [class*="input-row"] {
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* ── Tabs / pill nav inside profile ── */
  .profile-tabs,
  .settings-tabs,
  [class*="profile-tab"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    padding-bottom: 4px !important;
    justify-content: flex-start !important;
    scrollbar-width: none !important;
    width: 100% !important;
  }
  .profile-tabs::-webkit-scrollbar,
  .settings-tabs::-webkit-scrollbar { display: none; }

  /* ── Action buttons row ── */
  .profile-actions,
  .profile-btn-row,
  [class*="profile-action"] {
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }
  .profile-actions .btn,
  .profile-btn-row .btn,
  [class*="profile-action"] .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* ── Text overflow protection ── */
  .profile-name,
  .profile-email,
  .profile-bio,
  .profile-institution,
  .profile-role,
  [class*="profile-name"],
  [class*="profile-email"],
  [class*="profile-bio"] {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* ── Profile page bottom spacing
     (clear bottom-nav if lsf-pro is active) ── */
  .profile-page main,
  main.profile-main {
    padding-bottom: 90px !important;
  }
}

/* ── Extra tight: 375px and below ── */
@media (max-width: 375px) {
  .profile-page .container,
  .profile-main .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .stat-card {
    padding: 14px 10px !important;
  }

  /* Stack stats in single column on very small phones */
  .bento-grid,
  .stats-grid,
  .profile-stats,
  [class*="stats-grid"] {
    grid-template-columns: 1fr !important;
  }
}
/* ══════════════════════════════════
   36. FOOTER — MOBILE COMPACT
   The footer-grid uses minmax(240px,1fr)
   which stacks into 3 tall rows on small
   screens, making the footer nearly
   full-viewport height. This collapses
   it to a compact single-column layout.
══════════════════════════════════ */
@media (max-width: 768px) {
  footer {
    padding: 36px 0 24px !important;
    margin-top: 48px !important;
  }

  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    margin-bottom: 24px !important;
  }

  .footer-section h4 {
    margin-bottom: 10px !important;
    font-size: 0.72rem !important;
  }

  .footer-section ul {
    gap: 8px !important;
  }

  .footer-section p {
    font-size: 0.82rem !important;
    margin-top: 10px !important;
    line-height: 1.6 !important;
  }

  /* Compact the "Direct Access" button column */
  .footer-section > div[style*="flex-direction:column"],
  .footer-section > div[style*="flex-direction: column"] {
    gap: 8px !important;
  }

  .footer-bottom {
    padding-top: 16px !important;
    font-size: 0.72rem !important;
  }
}

@media (max-width: 480px) {
  footer {
    padding: 28px 0 16px !important;
    margin-top: 32px !important;
  }

  .footer-grid {
    gap: 20px !important;
    margin-bottom: 20px !important;
  }
}
/* ══════════════════════════════════
   37. PROFILE PHOTO — PERFECT RING ALIGNMENT
   The gradient .profile-photo-container acts
   as the spinning/animated ring. The photo
   inside must be precisely centred regardless
   of any CSS animation on the parent, border
   widths, or the global max-width:100% rule.
══════════════════════════════════ */

/* Centre the container itself so flexbox
   parents don't shift it off-axis */
.profile-photo-container,
.avatar-wrapper {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
  overflow: visible !important;   /* ring glow must not be clipped */
}

/* The profile image — locked absolutely to the
   exact centre of the container.
   max-width: none overrides the .profile-page *
   { max-width:100% } rule that causes shrinkage. */
.profile-photo-container > .profile-photo,
.profile-photo-container > img,
.avatar-wrapper > .profile-photo,
.avatar-wrapper > img {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  /* translate keeps it centred when the parent
     has a CSS spin animation (the img itself
     is NOT animated so it stays upright) */
  transform: translate(-50%, -50%) !important;
  /* 4px container padding × 2 sides = 8px inset */
  width: calc(100% - 8px) !important;
  height: calc(100% - 8px) !important;
  max-width: none !important;    /* critical — escape the global 100% cap */
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center center !important;
  border: 3px solid var(--bg) !important;  /* clean gap between photo & ring */
  display: block !important;
}

/* If the profile page wraps the photo in an
   additional <div> before the <img>, handle that too */
.profile-photo-container > div > img,
.avatar-wrapper > div > img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}/* ══════════════════════════════════════════════════════════════
   APPEND THIS ENTIRE BLOCK TO THE BOTTOM OF lsf-enhancements.css
   ══════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════
   38. GOOGLE PROFILE COMPLETION MODAL
   Shows when Google users haven't
   filled university / phone details.
══════════════════════════════════ */
.lsf-gpm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 5, 20, 0.68);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.lsf-gpm-overlay.visible { opacity: 1; }

.lsf-gpm-sheet {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 36px 32px 28px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 107, 53, 0.08);
  transform: translateY(24px) scale(0.95);
  transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}
.lsf-gpm-overlay.visible .lsf-gpm-sheet {
  transform: translateY(0) scale(1);
}

/* Decorative top accent */
.lsf-gpm-sheet::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--gradient, linear-gradient(90deg, #ff6b35, #e840a0, #6c3ce1));
  border-radius: 28px 28px 0 0;
}

/* Soft glow behind the sheet */
.lsf-gpm-sheet::after {
  content: '';
  position: absolute;
  top: -60px; left: 50%;
  transform: translateX(-50%);
  width: 200px; height: 120px;
  background: radial-gradient(ellipse, rgba(255, 107, 53, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

.lsf-gpm-header {
  text-align: center;
  margin-bottom: 24px;
}

.lsf-gpm-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--gradient, linear-gradient(135deg, #ff6b35, #e840a0));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  box-shadow: 0 8px 24px rgba(255, 107, 53, 0.3);
  overflow: hidden;
  border: 3px solid var(--bg);
  outline: 2px solid var(--coral, #ff6b35);
}

.lsf-gpm-title {
  font-family: 'Syne', sans-serif;
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0 0 8px;
  line-height: 1.2;
  /* Gradient text */
  background: var(--gradient, linear-gradient(135deg, #ff6b35, #e840a0));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.lsf-gpm-subtitle {
  color: var(--text-dim);
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 0;
}

.lsf-gpm-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}

.lsf-gpm-field-wrap { display: flex; flex-direction: column; gap: 6px; }

.lsf-gpm-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.3px;
}

.lsf-gpm-input {
  width: 100%;
  padding: 13px 16px;
  border-radius: 14px;
  border: 1.5px solid var(--border);
  background: var(--bg-alt);
  color: var(--text-main);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.93rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
.lsf-gpm-input::placeholder { color: var(--text-muted); }
.lsf-gpm-input:focus {
  border-color: var(--coral, #ff6b35);
  box-shadow: 0 0 0 4px var(--coral-light, rgba(255, 107, 53, 0.12));
}

.lsf-gpm-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.lsf-gpm-btn-primary {
  width: 100%;
  padding: 14px;
  border-radius: 99px;
  border: none;
  background: var(--gradient, linear-gradient(135deg, #ff6b35, #e840a0));
  color: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
  box-shadow: 0 6px 20px rgba(255, 107, 53, 0.35);
}
.lsf-gpm-btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(255, 107, 53, 0.45);
}
.lsf-gpm-btn-primary:active { transform: scale(0.98); }
.lsf-gpm-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.lsf-gpm-btn-skip {
  width: 100%;
  padding: 12px;
  border-radius: 99px;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all 0.2s;
}
.lsf-gpm-btn-skip:hover {
  border-color: var(--coral, #ff6b35);
  color: var(--coral, #ff6b35);
  background: var(--coral-light, rgba(255, 107, 53, 0.06));
}

.lsf-gpm-note {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.75rem;
  margin: 0;
  line-height: 1.5;
}

/* Mobile tweaks */
@media (max-width: 480px) {
  .lsf-gpm-sheet { padding: 28px 20px 22px; border-radius: 24px; }
  .lsf-gpm-title { font-size: 1.3rem; }
  .lsf-gpm-avatar { width: 60px; height: 60px; }
}


/* ══════════════════════════════════
   39. SOCIAL MEDIA LINK PREVIEW CARDS
   Transforms plain social URLs into
   rich, platform-branded preview cards.
══════════════════════════════════ */

/* Wrapper injected around each social <a> */
.lsf-social-preview {
  display: inline-block;
  text-decoration: none !important;
  border-radius: 18px;
  overflow: hidden;
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow-sm, 0 2px 12px rgba(0,0,0,0.08));
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.22s ease,
              border-color 0.22s ease;
  background: var(--card);
  max-width: 320px;
  min-width: 200px;
  cursor: pointer;
  vertical-align: middle;
  margin: 4px 0;
  /* Remove any inherited underline / color */
  color: inherit;
  outline: none;
}
.lsf-social-preview:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: var(--shadow-md, 0 8px 28px rgba(0,0,0,0.14));
  text-decoration: none !important;
}
.lsf-social-preview:active { transform: scale(0.98); }

/* Coloured banner strip at top */
.lsf-sp-banner {
  height: 6px;
  width: 100%;
  display: block;
  border-radius: 18px 18px 0 0;
}

/* Inner padding area */
.lsf-sp-body {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px 18px;
}

/* Platform icon circle — now used only as fallback bg when favicon fails */
.lsf-sp-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.15rem;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Favicon image wrapper — replaces the old solid-colour icon circle */
.lsf-sp-favicon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  overflow: hidden;
  position: relative;
}

/* The actual <img> favicon */
.lsf-sp-favicon-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
  /* crisp rendering at all scales */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Text area */
.lsf-sp-text {
  flex: 1;
  min-width: 0;
}
.lsf-sp-platform {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 2px;
  opacity: 0.5;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lsf-sp-handle {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* NEW — description line */
.lsf-sp-desc {
  font-size: 0.76rem;
  color: var(--text-dim);
  margin: 0 0 5px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lsf-sp-cta {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
}

/* Arrow chevron on the right */
.lsf-sp-arrow {
  color: var(--text-muted);
  font-size: 0.75rem;
  flex-shrink: 0;
  transition: transform 0.2s, color 0.2s;
}
.lsf-social-preview:hover .lsf-sp-arrow {
  transform: translateX(3px);
  color: var(--text-main);
}

/* Platform-specific banner + icon colours */
/* Twitter/X */
.lsf-sp-banner.sp-twitter { background: #000; }
.lsf-sp-icon.sp-twitter   { background: #000; }

/* Instagram */
.lsf-sp-banner.sp-instagram { background: linear-gradient(90deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.lsf-sp-icon.sp-instagram   { background: linear-gradient(135deg, #f09433, #dc2743, #bc1888); }

/* Facebook */
.lsf-sp-banner.sp-facebook { background: #1877f2; }
.lsf-sp-icon.sp-facebook   { background: #1877f2; }

/* LinkedIn */
.lsf-sp-banner.sp-linkedin { background: #0a66c2; }
.lsf-sp-icon.sp-linkedin   { background: #0a66c2; }

/* YouTube */
.lsf-sp-banner.sp-youtube { background: #ff0000; }
.lsf-sp-icon.sp-youtube   { background: #ff0000; }

/* TikTok */
.lsf-sp-banner.sp-tiktok { background: linear-gradient(90deg, #010101 50%, #fe2c55); }
.lsf-sp-icon.sp-tiktok   { background: #010101; }

/* GitHub */
.lsf-sp-banner.sp-github { background: #24292f; }
.lsf-sp-icon.sp-github   { background: #24292f; }

/* WhatsApp */
.lsf-sp-banner.sp-whatsapp { background: #25d366; }
.lsf-sp-icon.sp-whatsapp   { background: #25d366; }

/* Telegram */
.lsf-sp-banner.sp-telegram { background: #2aabee; }
.lsf-sp-icon.sp-telegram   { background: #2aabee; }

/* Snapchat */
.lsf-sp-banner.sp-snapchat { background: #fffc00; }
.lsf-sp-icon.sp-snapchat   { background: #fffc00; color: #000 !important; }

/* Pinterest */
.lsf-sp-banner.sp-pinterest { background: #e60023; }
.lsf-sp-icon.sp-pinterest   { background: #e60023; }

/* Threads */
.lsf-sp-banner.sp-threads { background: #000; }
.lsf-sp-icon.sp-threads   { background: #000; }

/* Dark-mode card lift */
[data-theme="dark"] .lsf-social-preview {
  background: var(--card);
  border-color: rgba(255,255,255,0.10);
}
[data-theme="dark"] .lsf-social-preview:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  border-color: rgba(255,255,255,0.18);
}

/* Inline display mode — when used inside a paragraph/sentence */
.lsf-social-preview-inline {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 8px;
  border-radius: 99px;
  border: 1.5px solid var(--border);
  background: var(--card);
  text-decoration: none !important;
  color: var(--text-main) !important;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.2s;
  vertical-align: middle;
  white-space: nowrap;
  cursor: pointer;
}
.lsf-social-preview-inline:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.lsf-social-preview-inline .lsf-sp-icon-sm {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: #fff;
  flex-shrink: 0;
}