/* =============================================================================
   beshy-system.css — Beshy Design System Upgrade
   Depends on: beshy-brand.css (tokens: --ns-* color, type, space, radius, shadow)
   M3-inspired surface hierarchy · Spring motion · Universal token coverage
   ============================================================================= */


/* =============================================================================
   1. EXTENDED TOKEN SYSTEM — M3 color roles + motion + backdrop
   ============================================================================= */

:root {
  /* --- Surface container tonal levels (M3 elevation without box-shadows) --- */
  --ns-surf-lowest:  color-mix(in srgb, var(--ns-canvas) 96%, #000 4%);
  --ns-surf-low:     var(--ns-canvas);
  --ns-surf-mid:     var(--ns-surface);
  --ns-surf-high:    var(--ns-surface-2);
  --ns-surf-highest: color-mix(in srgb, var(--ns-surface-2) 92%, var(--ns-primary) 8%);

  /* --- M3 state-layer overlays (light mode) --- */
  --ns-state-hover:  rgba(31, 26, 23, 0.06);
  --ns-state-press:  rgba(31, 26, 23, 0.10);
  --ns-state-focus:  rgba(31, 26, 23, 0.10);

  /* --- Spring motion curves --- */
  --ns-spring-bounce:  cubic-bezier(.34, 1.56, .64, 1);
  --ns-spring-snappy:  cubic-bezier(.2, .8, .2, 1);
  --ns-spring-gentle:  cubic-bezier(.4, 0, .2, 1);
  --ns-dur-slow: 360ms;

  /* --- Layered backdrop quality presets --- */
  --ns-blur-sm: blur(8px)  saturate(1.3);
  --ns-blur-md: blur(16px) saturate(1.4);
  --ns-blur-lg: blur(24px) saturate(1.5);
}

/* Dark mode extended token overrides */
[data-theme="dark"] {
  --ns-surf-lowest:  color-mix(in srgb, var(--ns-canvas) 94%, #000 6%);
  --ns-surf-low:     var(--ns-canvas);
  --ns-surf-mid:     var(--ns-surface);
  --ns-surf-high:    var(--ns-surface-2);
  --ns-surf-highest: color-mix(in srgb, var(--ns-surface-2) 90%, var(--ns-primary) 10%);

  /* Dark mode state layers — lighter scrim over dark surface */
  --ns-state-hover:  rgba(242, 236, 232, 0.08);
  --ns-state-press:  rgba(242, 236, 232, 0.12);
  --ns-state-focus:  rgba(242, 236, 232, 0.12);
}


/* =============================================================================
   2. GLOBAL MOTION SYSTEM — Keyframes + utility classes
   ============================================================================= */

@keyframes ns-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ns-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes ns-scale-in {
  from { opacity: 0; transform: scale(.95); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes ns-slide-right {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes ns-slide-up-soft {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ns-stagger-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Animation utility classes */
.ns-anim-fade-up  { animation: ns-fade-up   0.4s var(--ns-spring-gentle) both; }
.ns-anim-fade-in  { animation: ns-fade-in   0.3s ease both; }
.ns-anim-scale-in { animation: ns-scale-in  0.35s var(--ns-spring-bounce) both; }

/* Staggered children entrance — up to 12 items */
.ns-anim-stagger > *:nth-child(1)  { animation: ns-stagger-in 0.4s var(--ns-spring-gentle) 0ms   both; }
.ns-anim-stagger > *:nth-child(2)  { animation: ns-stagger-in 0.4s var(--ns-spring-gentle) 50ms  both; }
.ns-anim-stagger > *:nth-child(3)  { animation: ns-stagger-in 0.4s var(--ns-spring-gentle) 100ms both; }
.ns-anim-stagger > *:nth-child(4)  { animation: ns-stagger-in 0.4s var(--ns-spring-gentle) 150ms both; }
.ns-anim-stagger > *:nth-child(5)  { animation: ns-stagger-in 0.4s var(--ns-spring-gentle) 200ms both; }
.ns-anim-stagger > *:nth-child(6)  { animation: ns-stagger-in 0.4s var(--ns-spring-gentle) 250ms both; }
.ns-anim-stagger > *:nth-child(7)  { animation: ns-stagger-in 0.4s var(--ns-spring-gentle) 300ms both; }
.ns-anim-stagger > *:nth-child(8)  { animation: ns-stagger-in 0.4s var(--ns-spring-gentle) 350ms both; }
.ns-anim-stagger > *:nth-child(9)  { animation: ns-stagger-in 0.4s var(--ns-spring-gentle) 400ms both; }
.ns-anim-stagger > *:nth-child(10) { animation: ns-stagger-in 0.4s var(--ns-spring-gentle) 450ms both; }
.ns-anim-stagger > *:nth-child(11) { animation: ns-stagger-in 0.4s var(--ns-spring-gentle) 500ms both; }
.ns-anim-stagger > *:nth-child(12) { animation: ns-stagger-in 0.4s var(--ns-spring-gentle) 550ms both; }

/* Page content entrance — fires once on load for all major content wrappers */
.container.is-fullhd > *,
.ns-fr-wrap,
.ns-pp-wrap,
.ns-notif-wrap,
.ns-dm,
.ns-chat-page {
  animation: ns-fade-up 0.35s var(--ns-spring-gentle) both;
  animation-fill-mode: both;
}


/* =============================================================================
   3. SURFACE HIERARCHY — Universal backdrop filter + tonal surfaces
   ============================================================================= */

/* Catch-all: every topbar and tab-bar across the app */
[class*="ns-"][class*="-topbar"],
[class*="ns-"][class*="-tabs"],
[class*="ns-"][class*="-tabs-bar"] {
  background: color-mix(in srgb, var(--ns-surf-high) 85%, transparent) !important;
  backdrop-filter: var(--ns-blur-md);
  -webkit-backdrop-filter: var(--ns-blur-md);
  border-bottom: 1px solid color-mix(in srgb, var(--ns-border) 60%, transparent) !important;
}

/* Sidebars — slightly less blur, slightly more opaque */
[class*="ns-"][class*="-sidebar"],
.ns-pp-sidebar {
  background: color-mix(in srgb, var(--ns-surf-high) 88%, transparent) !important;
  backdrop-filter: var(--ns-blur-sm);
  -webkit-backdrop-filter: var(--ns-blur-sm);
}

/* Modals and popovers — highest elevation surface */
.modal-card,
.modal-content,
[class*="ns-"][class*="-modal"],
[class*="ns-"][class*="-popover"],
[class*="ns-"][class*="-dropdown"] {
  background: var(--ns-surf-highest) !important;
  backdrop-filter: var(--ns-blur-lg);
  -webkit-backdrop-filter: var(--ns-blur-lg);
}

/* Page wrapper backgrounds */
.ns-fr-wrap,
.ns-pp-wrap,
.ns-notif-wrap {
  background: var(--ns-canvas) !important;
}

/* Hover state overlays on list rows via ::after pseudo */
.ns-fr-row,
.ns-pp-card {
  position: relative;
  isolation: isolate;
}

.ns-fr-row::after,
.ns-pp-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: transparent;
  pointer-events: none;
  transition: background var(--ns-dur-fast) var(--ns-ease);
}

.ns-fr-row:hover::after,
.ns-pp-card:hover::after {
  background: var(--ns-state-hover);
}


/* =============================================================================
   4. M3 NAVIGATION RAIL UPGRADE
   ============================================================================= */

/* Animated nav item with spring physics */
.ns-nav {
  position: relative;
  overflow: visible;
  border-radius: 12px;
  transition:
    background  var(--ns-dur-fast) var(--ns-spring-snappy),
    color       var(--ns-dur-fast) var(--ns-spring-snappy),
    transform   var(--ns-dur-fast) var(--ns-spring-bounce);
}

.ns-nav:hover {
  transform: translateX(2px);
  background: var(--ns-state-hover);
}

/* Active pill */
.ns-nav.active {
  background: var(--ns-primary-soft);
  color: var(--ns-primary) !important;
}

/* M3-style left accent pip for active item */
.ns-nav.active::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 24px;
  background: var(--ns-primary);
  border-radius: 0 4px 4px 0;
  animation: ns-rail-pip .25s var(--ns-spring-bounce) both;
}

@keyframes ns-rail-pip {
  from { height: 0; opacity: 0; }
  to   { height: 24px; opacity: 1; }
}

/* Notification badge — gentle pulse */
.ns-badge {
  animation: ns-badge-pulse 2.5s cubic-bezier(.4, 0, .6, 1) infinite;
}

@keyframes ns-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0   color-mix(in srgb, var(--ns-primary) 40%, transparent); }
  50%       { box-shadow: 0 0 0 5px color-mix(in srgb, var(--ns-primary) 0%,  transparent); }
}

/* Upload CTA button — spring lift + glow */
.ns-upload {
  transition:
    transform   var(--ns-dur-fast) var(--ns-spring-bounce),
    filter      var(--ns-dur-fast) var(--ns-ease),
    box-shadow  var(--ns-dur-base) var(--ns-ease) !important;
}

.ns-upload:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ns-primary) 40%, transparent) !important;
}

.ns-upload:active {
  transform: scale(.96);
}

/* Logo dot — subtle breathing on hover */
.ns-logo:hover .ns-dot {
  animation: ns-dot-pulse .5s var(--ns-spring-bounce);
}

@keyframes ns-dot-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* Profile row at rail bottom */
.ns-me {
  transition:
    background  var(--ns-dur-fast) var(--ns-ease),
    transform   var(--ns-dur-fast) var(--ns-spring-bounce);
}

.ns-me:hover {
  transform: translateX(2px);
  background: var(--ns-state-hover);
}


/* =============================================================================
   5. GLOBAL INTERACTIVE REFINEMENTS — Buttons, cards, inputs, avatars
   ============================================================================= */

/* Buttons — spring lift + press scale */
.button,
[class*="ns-"][class*="-btn"] {
  transition:
    transform   var(--ns-dur-fast) var(--ns-spring-bounce),
    box-shadow  var(--ns-dur-base) var(--ns-ease),
    opacity     var(--ns-dur-fast) var(--ns-ease) !important;
}

.button:hover,
[class*="ns-"][class*="-btn"]:hover {
  transform: translateY(-2px);
}

.button:active,
[class*="ns-"][class*="-btn"]:active {
  transform: scale(.96) translateY(0);
}

/* Cards — spring lift with gentle curve */
.card,
[class*="ns-"][class*="-card"] {
  transition:
    transform     var(--ns-dur-base) var(--ns-spring-gentle),
    box-shadow    var(--ns-dur-base) var(--ns-spring-gentle),
    border-color  var(--ns-dur-fast) var(--ns-ease) !important;
}

.card:hover,
[class*="ns-"][class*="-card"]:hover {
  transform: translateY(-3px);
}

/* Input focus ring using brand primary token */
input:focus,
textarea:focus,
select:focus {
  outline: 2px solid var(--ns-primary) !important;
  outline-offset: 0 !important;
  border-color: var(--ns-primary) !important;
  box-shadow: 0 0 0 4px var(--ns-primary-soft) !important;
}

/* Avatar images — crisp ring + brand hover state */
img.is-rounded,
img[style*="border-radius: 50%"],
.ns-fr-ava img,
.ns-pp-card-ava img,
.ns-me img {
  box-shadow: 0 0 0 2px var(--ns-border);
  transition: box-shadow var(--ns-dur-fast) var(--ns-ease);
}

img.is-rounded:hover,
.ns-fr-ava img:hover,
.ns-pp-card-ava img:hover {
  box-shadow: 0 0 0 2.5px var(--ns-primary);
}

/* =============================================================================
   7. GLOBAL HERO BANNER ELIMINATION
   One rule kills all Bulma .hero.is-link/.is-info/.is-primary banners on every
   logged-in page (rail present), replacing them with slim token-based headers.
   No template edits needed — this fixes 50+ pages instantly.
   ============================================================================= */

/* :not(#header-hero-preview) excludes the live color-picker preview in settings/look.html */
body:has(.ns-rail) .hero.is-link:not(#header-hero-preview),
body:has(.ns-rail) .hero.is-info:not(#header-hero-preview),
body:has(.ns-rail) .hero.is-primary:not(#header-hero-preview),
body:has(.ns-rail) .hero.is-success:not(#header-hero-preview),
body:has(.ns-rail) .hero.is-warning:not(#header-hero-preview),
body:has(.ns-rail) .hero.is-danger:not(#header-hero-preview) {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
body:has(.ns-rail) .hero.is-link:not(#header-hero-preview) .hero-body,
body:has(.ns-rail) .hero.is-info:not(#header-hero-preview) .hero-body,
body:has(.ns-rail) .hero.is-primary:not(#header-hero-preview) .hero-body,
body:has(.ns-rail) .hero.is-success:not(#header-hero-preview) .hero-body,
body:has(.ns-rail) .hero.is-warning:not(#header-hero-preview) .hero-body,
body:has(.ns-rail) .hero.is-danger:not(#header-hero-preview) .hero-body {
  padding: 28px 0 10px !important;
}
body:has(.ns-rail) .hero .title {
  color: var(--ns-fg) !important;
  font-family: var(--ns-font-display) !important;
  font-weight: 800 !important;
  font-size: clamp(1.3rem, 2vw, 1.7rem) !important;
  letter-spacing: -0.025em !important;
}
body:has(.ns-rail) .hero .title i,
body:has(.ns-rail) .hero .title .ph,
body:has(.ns-rail) .hero .title .ph-fill { color: var(--ns-primary) !important; }
body:has(.ns-rail) .hero .subtitle {
  color: var(--ns-muted) !important;
  font-size: 0.9rem !important;
}
/* Danger heroes (errors) get a red left accent */
body:has(.ns-rail) .hero.is-danger .hero-body {
  border-left: 4px solid var(--ns-danger, #E5484D);
  padding-left: 16px !important;
}
body:has(.ns-rail) .hero.is-danger .title { color: var(--ns-danger, #E5484D) !important; }

/* =============================================================================
   8. FLASH MESSAGE SYSTEM — Replace Bulma .notification blocks with toasts
   ============================================================================= */

.ns-flash-stack {
  position: fixed; top: 16px; right: 20px; z-index: 9000;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none; max-width: 380px;
}
.ns-flash {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 16px; border-radius: 14px;
  font-size: 13.5px; font-weight: 600; line-height: 1.45;
  pointer-events: all; box-shadow: var(--ns-shadow-3);
  animation: ns-flash-in .35s var(--ns-spring-bounce) both;
  backdrop-filter: var(--ns-blur-md); -webkit-backdrop-filter: var(--ns-blur-md);
  border: 1px solid transparent;
  font-family: var(--ns-font-body);
}
@keyframes ns-flash-in {
  from { opacity: 0; transform: translateX(24px) scale(.96); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes ns-flash-out {
  to   { opacity: 0; transform: translateX(24px) scale(.96); max-height: 0; margin: 0; padding: 0; }
}
.ns-flash-success {
  background: color-mix(in srgb, #1FB877 12%, var(--ns-surface));
  border-color: color-mix(in srgb, #1FB877 30%, transparent);
  color: #0D6E4B;
}
.ns-flash-error {
  background: color-mix(in srgb, #E5484D 10%, var(--ns-surface));
  border-color: color-mix(in srgb, #E5484D 28%, transparent);
  color: #9B1E22;
}
.ns-flash-info {
  background: color-mix(in srgb, #3B82F6 10%, var(--ns-surface));
  border-color: color-mix(in srgb, #3B82F6 28%, transparent);
  color: #1E40AF;
}
[data-theme="dark"] .ns-flash-success { color: #4ADE80; }
[data-theme="dark"] .ns-flash-error   { color: #F87171; }
[data-theme="dark"] .ns-flash-info    { color: #93C5FD; }
.ns-flash i { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.ns-flash-body { flex: 1; }
.ns-flash-close {
  background: none; border: none; cursor: pointer; padding: 0;
  font-size: 14px; opacity: .5; color: inherit; flex-shrink: 0;
  transition: opacity .12s;
}
.ns-flash-close:hover { opacity: 1; }

/* =============================================================================
   9. MOBILE BOTTOM NAV — M3-style replacement for gosocial-mobile-notification
   ============================================================================= */

.ns-mobile-nav {
  display: none;
}
.ns-mn-drawer { display: none; }
.ns-mn-overlay { display: none; }
@media (max-width: 900px) {
  .gosocial-mobile-notification { display: none !important; }
  .ns-mobile-nav {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
    height: 64px; align-items: stretch;
    background: color-mix(in srgb, var(--ns-surface) 88%, transparent);
    backdrop-filter: var(--ns-blur-md); -webkit-backdrop-filter: var(--ns-blur-md);
    border-top: 1px solid color-mix(in srgb, var(--ns-border) 60%, transparent);
  }
  .ns-mn-item {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px; text-decoration: none;
    color: var(--ns-muted); position: relative; min-width: 0;
    transition: color var(--ns-dur-fast) var(--ns-spring-snappy);
    -webkit-tap-highlight-color: transparent;
    border: none; background: none; cursor: pointer; font-family: inherit;
  }
  .ns-mn-item:active { transform: scale(.92); }
  .ns-mn-item.active { color: var(--ns-primary); }
  .ns-mn-item.active::before {
    content: ""; position: absolute; top: 0; left: 50%;
    transform: translateX(-50%);
    width: 32px; height: 3px; border-radius: 0 0 3px 3px;
    background: var(--ns-primary);
    animation: ns-mn-pip .2s var(--ns-spring-bounce) both;
  }
  @keyframes ns-mn-pip {
    from { width: 0; opacity: 0; }
    to   { width: 32px; opacity: 1; }
  }
  .ns-mn-ico { font-size: 22px; line-height: 1; position: relative; }
  .ns-mn-dot {
    position: absolute; top: -2px; right: -5px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--ns-primary); border: 2px solid var(--ns-surface);
  }
  .ns-mn-dot.has-count {
    width: auto; height: 16px; min-width: 16px; border-radius: 8px;
    padding: 0 4px; font-size: 9px; font-weight: 800; color: #fff;
    display: flex; align-items: center; justify-content: center;
    top: -4px; right: -8px;
  }
  .ns-mn-label { font-size: 10px; font-weight: 700; letter-spacing: .01em; }

  /* More drawer */
  .ns-mn-drawer {
    position: fixed; bottom: 64px; left: 0; right: 0; z-index: 49;
    background: color-mix(in srgb, var(--ns-surface) 96%, transparent);
    backdrop-filter: var(--ns-blur-lg); -webkit-backdrop-filter: var(--ns-blur-lg);
    border-top: 1px solid var(--ns-border);
    border-radius: 20px 20px 0 0;
    padding: 8px 0 12px;
    transform: translateY(100%); transition: transform .3s var(--ns-spring-gentle);
    display: none;
  }
  .ns-mn-drawer.open { transform: translateY(0); display: block; }
  .ns-mn-drawer-item {
    display: flex; align-items: center; gap: 14px;
    padding: 13px 24px; font-size: 15px; font-weight: 600;
    color: var(--ns-fg); text-decoration: none;
    transition: background var(--ns-dur-fast) var(--ns-ease);
  }
  .ns-mn-drawer-item i { color: var(--ns-muted); font-size: 18px; width: 22px; }
  .ns-mn-drawer-item:hover { background: var(--ns-state-hover); }
  .ns-mn-drawer-item.danger { color: var(--ns-danger, #E5484D); }
  .ns-mn-drawer-item.danger i { color: var(--ns-danger, #E5484D); }
  .ns-mn-drawer-sep { height: 1px; background: var(--ns-border); margin: 6px 0; }
  .ns-mn-overlay {
    display: none; position: fixed; inset: 0; z-index: 48;
    background: rgba(0,0,0,.3);
  }
  .ns-mn-overlay.open { display: block; }
}

/* Reduced motion — respect user OS setting */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
  }
}


/* =============================================================================
   6. TOKEN-BASED COLOR FIXES — Page template overrides
   Replaces hardcoded hex values in friends, people, notifications templates
   ============================================================================= */

/* --- Friends page --- */
.ns-fr-wrap         { background: var(--ns-canvas)   !important; }
.ns-fr-topbar       { background: color-mix(in srgb, var(--ns-surface) 88%, transparent) !important; }
.ns-fr-row:hover    { background: var(--ns-state-hover) !important; }
.ns-fr-badge        { background: var(--ns-primary) !important; }
.ns-fr-tab.active   { color: var(--ns-primary) !important; border-bottom-color: var(--ns-primary) !important; }
.ns-fr-name         { color: var(--ns-fg) !important; }
.ns-fr-msg          { background: var(--ns-surface-2) !important; border-left-color: var(--ns-primary) !important; }

/* --- People / search page --- */
.ns-pp-wrap              { background: var(--ns-canvas) !important; }
.ns-pp-sidebar           { background: color-mix(in srgb, var(--ns-surface) 92%, transparent) !important; }
.ns-pp-topbar            { background: color-mix(in srgb, var(--ns-surface) 88%, transparent) !important; }
.ns-pp-card              { background: var(--ns-surface) !important; border-color: var(--ns-border) !important; }
.ns-pp-card:hover        { border-color: color-mix(in srgb, var(--ns-primary) 30%, var(--ns-border)) !important; }
.ns-pp-card-name         { color: var(--ns-fg) !important; }
.ns-pp-chip.active       { background: var(--ns-primary) !important; border-color: var(--ns-primary) !important; color: white !important; }
.ns-pp-btn-search        { background: var(--ns-primary) !important; }
.ns-pp-btn-search:hover  { background: var(--ns-primary-press) !important; }

/* --- Notifications page --- */
.ns-notif-wrap,
.ns-notif-page      { background: var(--ns-canvas) !important; }
.ns-notif-topbar    { background: color-mix(in srgb, var(--ns-surface) 88%, transparent) !important; }
.ns-notif-row:hover { background: var(--ns-state-hover) !important; }
.ns-n-unread        { border-left-color: var(--ns-primary) !important; }
.ns-n-dot           { background: var(--ns-primary) !important; }

/* --- Paginators — uniform token treatment --- */
.ns-fr-pager a:hover,
.ns-pp-pager a:hover {
  border-color: var(--ns-primary) !important;
  color: var(--ns-primary) !important;
}

.ns-fr-pager .current,
.ns-pp-pager .current {
  background: var(--ns-primary) !important;
  border-color: var(--ns-primary) !important;
  color: white !important;
}

/* =============================================================================
   10. GLOBAL CSS CONFLICT FIXES — Override beshy-redesign-bold.css issues
   ============================================================================= */

/* FIX 1: Dark mode headings
   beshy-redesign-bold.css forces .title/.h1 to #1A1A1A !important — invisible on dark bg.
   [data-theme="dark"] .title has higher specificity (0-2-0) so wins over .title (0-1-0). */
[data-theme="dark"] .title,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5 {
  color: var(--ns-fg) !important;
}
[data-theme="dark"] .subtitle {
  color: var(--ns-fg-soft) !important;
}

/* FIX 2: App-context subtitles — redesign-bold makes ALL .subtitle red.
   Inside the app (ns-rail present) subtitles should use the muted token, not always red. */
body:has(.ns-rail) .subtitle {
  color: var(--ns-fg-soft) !important;
}
body:has(.ns-rail) .bs-pagehead .subtitle {
  color: var(--ns-muted) !important;
}

/* FIX 3: Card headers — redesign-bold forces all .card-header to black.
   In the app, card headers inside content areas should use surface tokens. */
body:has(.ns-rail) .card-header:not(.ns-masonry .card-header):not(.ns-profile .card-header) {
  background: var(--ns-surface-2) !important;
  border-bottom: 1px solid var(--ns-border) !important;
}
body:has(.ns-rail) .card-header:not(.ns-masonry .card-header):not(.ns-profile .card-header) .card-header-title {
  color: var(--ns-fg) !important;
}
[data-theme="dark"] .card-header {
  background: var(--ns-surface-2) !important;
}
[data-theme="dark"] .card-header-title {
  color: var(--ns-fg) !important;
}

/* FIX 4: Body background — ensure dark canvas wins in dark mode */
[data-theme="dark"] body {
  background: var(--ns-canvas) !important;
  color: var(--ns-fg) !important;
}

/* ── Photo Detail Modal — split layout ───────────────────────── */
#detail-modal .modal-content {
  max-width: min(1160px, 96vw) !important;
  max-height: 92vh !important;
  width: 90vw !important;
  display: flex !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  background: transparent !important;
  margin: 0 auto !important;
  box-shadow: 0 24px 72px rgba(0,0,0,.6) !important;
}
/* Left: photo */
.ns-pm-left {
  position: relative;
  flex: 1 1 60%;
  min-width: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ns-pm-left #detailImg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  min-height: 280px;
}
.ns-pm-left img,
.ns-pm-left video {
  max-width: 100%;
  max-height: 88vh;
  object-fit: contain;
}
/* ALT overlay */
.ns-pm-alt-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0,0,0,.55);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 11px;
  cursor: pointer;
  z-index: 2;
}
/* Nav arrows */
.ns-pm-arrow-left,
.ns-pm-arrow-right {
  position: absolute;
  top: 0; bottom: 0;
  display: flex;
  align-items: center;
  padding: 0 6px;
  z-index: 2;
}
.ns-pm-arrow-left { left: 0; }
.ns-pm-arrow-right { right: 0; }
.ns-pm-arrow-left button,
.ns-pm-arrow-right button {
  background: rgba(0,0,0,.45);
  border: none;
  border-radius: 50%;
  width: 36px; height: 36px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.ns-pm-arrow-left button:hover,
.ns-pm-arrow-right button:hover { background: rgba(0,0,0,.75); }

/* Right panel */
.ns-pm-right {
  flex: 0 0 360px;
  width: 360px;
  background: var(--ns-surface);
  border-left: 1px solid var(--ns-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Header */
.ns-pm-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--ns-border);
  flex-shrink: 0;
}
.ns-pm-user-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--ns-fg);
  flex: 1;
  min-width: 0;
}
.ns-pm-user-link:hover #ns-pm-username { text-decoration: underline; }
.ns-pm-av {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  background: var(--ns-primary);
}
#ns-pm-username {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ns-fg);
}
.ns-pm-vis {
  font-size: 11px;
  color: var(--ns-muted);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  white-space: nowrap;
}
/* Close button inside header (plain button, NOT .modal-close to avoid Bulma's position:fixed) */
.ns-pm-close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,.12);
  color: var(--ns-fg);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: background .15s;
}
.ns-pm-close:hover { background: rgba(0,0,0,.25); }
[data-theme="dark"] .ns-pm-close { background: rgba(255,255,255,.12); }
[data-theme="dark"] .ns-pm-close:hover { background: rgba(255,255,255,.22); }
/* Caption */
.ns-pm-caption {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--ns-fg);
  border-bottom: 1px solid var(--ns-border);
  flex-shrink: 0;
  line-height: 1.5;
  max-height: 80px;
  overflow-y: auto;
}
/* Scrollable body */
.ns-pm-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* Likes row */
.ns-pm-likes-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  flex-shrink: 0;
}
.ns-pm-like-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: none !important;
  border: 1.5px solid var(--ns-border) !important;
  border-radius: 20px !important;
  padding: 5px 14px !important;
  font-size: 13px !important;
  cursor: pointer !important;
  color: var(--ns-fg) !important;
  transition: border-color .15s, color .15s !important;
  font-family: var(--ns-font-body) !important;
}
.ns-pm-like-btn:hover,
.ns-pm-like-btn.ns-liked {
  border-color: var(--ns-primary) !important;
  color: var(--ns-primary) !important;
}
.ns-pm-expand-likes {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  font-size: 13px;
  color: var(--ns-fg-soft);
  cursor: pointer;
  padding: 5px 6px;
  font-family: var(--ns-font-body);
}
.ns-pm-expand-likes:hover { color: var(--ns-fg); }
/* Likers list */
.ns-pm-likers {
  padding: 4px 14px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 1px solid var(--ns-border);
}
.ns-pm-liker-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  padding: 3px 9px 3px 4px;
  background: var(--ns-surface-2);
  border-radius: 12px;
  text-decoration: none;
  color: var(--ns-fg);
  border: 1px solid var(--ns-border);
  transition: background .1s;
}
.ns-pm-liker-chip:hover { background: var(--ns-border); }
.ns-pm-liker-av {
  width: 20px; height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
}
/* Divider */
.ns-pm-divider {
  height: 1px;
  background: var(--ns-border);
  flex-shrink: 0;
}
/* Comments header */
.ns-pm-comments-hd {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ns-fg);
  flex-shrink: 0;
}
/* Comments body */
#ns-pm-comments-content {
  flex: 1;
  padding: 0 14px 14px;
  min-height: 80px;
  font-size: 13px;
}
/* Override the heavy avatar-based comment layout inside the modal */
#ns-pm-comments-content .columns { margin: 0 !important; }
#ns-pm-comments-content .column.is-2 {
  width: auto !important;
  flex: none !important;
  padding: 8px 8px 0 0 !important;
}
#ns-pm-comments-content .column.is-2 img,
#ns-pm-comments-content .column.is-2 .ns-avatar {
  width: 28px !important;
  height: 28px !important;
}
#ns-pm-comments-content .column.content {
  padding: 8px 0 0 !important;
  font-size: 13px !important;
}

/* Mobile: stack vertically */
@media (max-width: 760px) {
  #detail-modal .modal-content {
    flex-direction: column !important;
    max-height: 95vh !important;
    width: 100vw !important;
    border-radius: 0 !important;
  }
  .ns-pm-left { flex: 0 0 auto !important; max-height: 52vw; }
  .ns-pm-right {
    flex: 1 !important;
    width: 100% !important;
    border-left: none !important;
    border-top: 1px solid var(--ns-border);
    max-height: 50vh;
    overflow-y: auto;
  }
}