/* nostrings theme — per-site scheme tokens, extracted from the pocket-gf mockup.
   Base tokens live in the shared stylesheets' :root (they ARE the nostrings dark
   scheme); this file adds the dark-specific tweaks and the light scheme. */



[data-scheme="dark"] .action-btn {
    box-shadow: var(--shadow-pink);
}



[data-scheme="dark"] .action-btn:hover {
    box-shadow: var(--shadow-pink), var(--shadow-2);
}



[data-scheme="dark"] .action-btn.secondary {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    box-shadow: none;
    color: var(--text-primary);
}



[data-scheme="dark"] .action-btn.secondary:hover {
    background: var(--bg-surface);
    border-color: var(--border-normal);
    box-shadow: none;
}



[data-scheme="dark"] .gallery-teaser {
    background: var(--primary-subtle);
    border: 1px solid var(--primary-border);
}



[data-scheme="dark"] .gallery-teaser-btn:hover {
    box-shadow: var(--shadow-pink);
}



[data-scheme="dark"] .mobile-action-btn {
    background: var(--primary-subtle);
}



[data-scheme="dark"] .mobile-action-btn:hover,
[data-scheme="dark"] .mobile-action-btn:focus {
    background: rgba(237, 55, 186, 0.20);
}





[data-scheme="dark"] .action-btn.heart {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    box-shadow: none;
}



[data-scheme="dark"] .action-btn.heart:hover {
    background: var(--bg-surface);
    border-color: var(--border-normal);
    box-shadow: none;
}


html[data-scheme="light"] {
  --splash-line-fill:  #2aa7d8;
  --splash-line-track: rgba(31, 41, 51, 0.14);
}



/* Light mode overrides */
[data-scheme="light"] {
  /* ── Backgrounds ──────────────────────────────────────────── */
  --bg-page:           #f0f4f8;
  --bg-page-2:         #e8eef4;
  --bg-surface:        #ffffff;
  --bg-surface-raised: #f5f7fa;
  --bg-surface-soft:   #eaeff4;
  --bg-overlay:        rgba(0, 0, 0, 0.55);
  --bg-input:          #f0f4f8;
  --bg-modal:          #ffffff;
  --bg-tooltip:        #1a222b;

  /* ── Text ─────────────────────────────────────────────────── */
  --text-primary:    #0e1419;
  --text-secondary:  #3d4f60;
  --text-muted:      #6a7d8f;
  --text-disabled:   #a0b0be;
  --text-inverse:    #e8eff7;
  --text-on-primary: #09242d;

  /* ── Borders ──────────────────────────────────────────────── */
  --border-subtle:  rgba(20, 40, 60, 0.07);
  --border-color:   rgba(20, 40, 60, 0.13);
  --border-normal:  rgba(20, 40, 60, 0.22);
  --border-strong:  rgba(20, 40, 60, 0.38);

  /* ── Shadows ──────────────────────────────────────────────── */
  --shadow-1:      0 1px 2px rgba(0, 0, 0, 0.10);
  --shadow-2:      0 2px 6px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.10);
  --shadow-3:      0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.10);
  --shadow-4:      0 8px 22px rgba(0, 0, 0, 0.09), 0 2px 5px rgba(0, 0, 0, 0.10);
  --shadow-5:      0 16px 36px rgba(0, 0, 0, 0.10), 0 4px 8px rgba(0, 0, 0, 0.10);
  --shadow-raised: inset 0 1px 0 rgba(255, 255, 255, 0.80),
                   0 2px 6px rgba(0, 0, 0, 0.08),
                   0 1px 2px rgba(0, 0, 0, 0.10);
  --shadow-press:  inset 0 1px 3px rgba(0, 0, 0, 0.12),
                   inset 0 0 0 1px rgba(0, 0, 0, 0.06);

  /* ── Surface gradients ────────────────────────────────────── */
  --grad-surface:     linear-gradient(160deg, #ffffff 0%, #f5f7fa 55%, #eaeff4 100%);
  --grad-surface-alt: linear-gradient(135deg, #ffffff 0%, #f5f8fb 40%, #edf1f5 100%);
  --grad-raised:      linear-gradient(160deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.5) 40%, rgba(0,0,0,0.02) 100%);
  --grad-shimmer:     linear-gradient(90deg, #f5f7fa 0%, #ffffff 30%, #eaeff4 50%, #ffffff 70%, #f5f7fa 100%);

  /* ── Legacy aliases ───────────────────────────────────────── */
  --background:          var(--bg-page);
  --surface:             var(--bg-surface);
  --text:                var(--text-primary);
  --end-shadow:          rgba(0, 0, 0, 0.08);
  --end-shadow-hover:    rgba(0, 0, 0, 0.12);
  --message-received-bg: var(--bg-surface-raised);
  --message-sent-color:  var(--text-on-primary);
  --dropdown-bg:         var(--bg-surface);
  --input-bg:            var(--bg-input);
  --toggle-bg:           var(--bg-surface-raised);
  --toggle-active-bg:    var(--bg-surface-soft);
  --chat-header-border:  var(--border-color);
}



[data-scheme="light"] .chat-input:focus,
[data-scheme="dark"] .chat-input:focus {
    box-shadow: 0 4px 12px var(--primary-glow);
}



[data-scheme="light"] {
  /* ── Primary → blue in light mode ────────────────────────── */
  --primary-color:        #58b6d2;
  --primary-color-hover:  #7fcade;
  --primary-color-active: #3c96b1;
  --primary-border:       rgba(88, 182, 210, 0.40);
  --primary-subtle:       rgba(88, 182, 210, 0.10);
  --primary-glow:         rgba(88, 182, 210, 0.25);
  --primary-soft:         #58b6d2;
  --shadow-pink:          0 4px 14px rgba(88, 182, 210, 0.26), 0 1px 4px rgba(88, 182, 210, 0.16);
  --grad-primary:         linear-gradient(135deg, #58b6d2 0%, #3c96b1 100%);
  --grad-primary-h:       linear-gradient(135deg, #7fcade 0%, #58b6d2 40%, #3c96b1 100%);
  --grad-primary-soft:    linear-gradient(135deg, rgba(88,182,210,0.20) 0%, rgba(60,150,177,0.10) 60%, rgba(42,122,145,0.06) 100%);

  /* ── Secondary → pink in light mode ──────────────────────── */
  --secondary:      #ff4d85;

  /* ── Legacy aliases ───────────────────────────────────────── */
  --primary:          #58b6d2;
  --primary-light:    #7fcade;
  --primary-dark:     #3c96b1;
  --primary-darker:   #2a7a91;
  --gradient:         linear-gradient(135deg, #58b6d2 0%, #3c96b1 100%);
  --message-sent-bg:  linear-gradient(135deg, #58b6d2 0%, #3c96b1 100%);
  --action-btn-hover: rgba(88, 182, 210, 0.05);
}



[data-scheme="light"] .dropdown-icon,
[data-scheme="light"] .settings-dropdown > .settings-item:not(:hover):not(:focus-visible) > .settings-icon,
[data-scheme="light"] .theme-switcher-icon {
    color: var(--primary);
}



[data-scheme="light"] .upgrade-banner {
    background:
        linear-gradient(120deg, rgba(255, 76, 136, 0.24) 0%, rgba(88, 182, 210, 0.22) 52%, rgba(112, 215, 255, 0.18) 100%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(245, 251, 255, 0.74) 100%) !important;
    border: 1px solid rgba(88, 182, 210, 0.28) !important;
    color: #154255 !important;
    box-shadow: 0 18px 38px rgba(88, 182, 210, 0.14), 0 8px 20px rgba(255, 76, 136, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(16px) saturate(1.45);
    -webkit-backdrop-filter: blur(16px) saturate(1.45);
}



[data-scheme="light"] .upgrade-banner-content,
[data-scheme="spiritual"] .upgrade-banner-content,
[data-scheme="nature"] .upgrade-banner-content {
    color: inherit !important;
    font-weight: 600;
}



[data-scheme="light"] .upgrade-banner-btn {
    background: linear-gradient(135deg, #7fd3ea 0%, #58b6d2 45%, #4aa0be 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.65) !important;
    border-radius: 10px;
    padding: 10px 18px;
    box-shadow: 0 12px 26px rgba(88, 182, 210, 0.26), 0 4px 10px rgba(60, 150, 177, 0.18) !important;
}



[data-scheme="light"] .upgrade-banner-btn:hover {
    background: linear-gradient(135deg, #8ddaf0 0%, #63c0da 45%, #53abc9 100%) !important;
    box-shadow: 0 16px 32px rgba(88, 182, 210, 0.32), 0 6px 14px rgba(60, 150, 177, 0.22) !important;
    transform: translateY(-1px);
}



[data-scheme="light"] .upgrade-banner-close,
[data-scheme="spiritual"] .upgrade-banner-close,
[data-scheme="nature"] .upgrade-banner-close {
    color: var(--text-muted);
}



[data-scheme="light"] .upgrade-banner-close:hover,
[data-scheme="spiritual"] .upgrade-banner-close:hover,
[data-scheme="nature"] .upgrade-banner-close:hover {
    background: var(--primary-subtle);
    color: var(--primary);
}



[data-scheme="light"] .character-tab-indicator {
    box-shadow: 0 1px 2px rgba(20, 40, 60, 0.06);
    border-color: var(--border-color);
}



[data-scheme="light"] .ns-splash-logo-img--light,
[data-scheme="spiritual"] .ns-splash-logo-img--light,
[data-scheme="nature"] .ns-splash-logo-img--light,
[data-scheme="light"] .ns-logo-img--light,
[data-scheme="spiritual"] .ns-logo-img--light,
[data-scheme="nature"] .ns-logo-img--light {
    display: none;
}



[data-scheme="light"] .ns-splash-logo-img--dark,
[data-scheme="spiritual"] .ns-splash-logo-img--dark,
[data-scheme="nature"] .ns-splash-logo-img--dark,
[data-scheme="light"] .ns-logo-img--dark,
[data-scheme="spiritual"] .ns-logo-img--dark,
[data-scheme="nature"] .ns-logo-img--dark {
    display: block;
}



html[data-scheme="light"] {
  --primary-color: #58b6d2;
  --primary-color-hover: #3c96b1;
  --primary-color-active: #2f829b;
  --primary-soft: #58b6d2;
  --primary-subtle: rgba(88, 182, 210, 0.14);
  --primary-glow: rgba(88, 182, 210, 0.24);
  --primary-border: rgba(88, 182, 210, 0.42);
  --bg-page: #f0f4f8;
  --bg-page-2: #e8eef4;
  --bg-surface: #ffffff;
  --bg-surface-raised: #f5f7fa;
  --bg-surface-soft: #eaeff4;
  --bg-input: #f0f4f8;
  --bg-modal: #ffffff;
  --bg-tooltip: #17212b;
  --text-primary: #0e1419;
  --text-secondary: #3d4f60;
  --text-muted: #6a7d8f;
  --text-disabled: #a0b0be;
  --text-on-primary: #ffffff;
  --border-subtle: rgba(61, 79, 96, 0.08);
  --border-color: rgba(61, 79, 96, 0.16);
  --border-normal: rgba(61, 79, 96, 0.26);
  --border-strong: rgba(61, 79, 96, 0.40);
  --grad-surface: linear-gradient(160deg, #ffffff 0%, #f5f7fa 55%, #e8eef4 100%);
  --grad-primary: linear-gradient(135deg, #7fd3ea 0%, #58b6d2 44%, #3c96b1 100%);
  --grad-primary-h: linear-gradient(135deg, #8ddaf0 0%, #63c0da 44%, #53abc9 100%);
  --shadow-pink: 0 4px 18px rgba(88, 182, 210, 0.26), 0 1px 6px rgba(60, 150, 177, 0.18);
}



html[data-scheme="light"] .create-page {
  --create-page-top: #dfe8f0;
  --create-card-surface: color-mix(in srgb, var(--bg-surface) 94%, transparent);
  --create-card-surface-strong: var(--bg-surface);
  --create-card-border: color-mix(in srgb, var(--text-primary) 13%, transparent);
  --create-card-border-hover: color-mix(in srgb, var(--primary-color) 58%, transparent);
  --create-option-shadow: 0 18px 42px rgba(31, 41, 51, 0.12), 0 2px 8px rgba(31, 41, 51, 0.08);
  --create-account-photo-overlay: linear-gradient(180deg, color-mix(in srgb, var(--bg-page) 64%, transparent), color-mix(in srgb, var(--bg-page) 90%, transparent));
  --create-account-scrim: color-mix(in srgb, var(--bg-page) 86%, transparent);
}



html[data-scheme="light"] .create-logo-img--dark-bg,
html[data-scheme="spiritual"] .create-logo-img--dark-bg,
html[data-scheme="nature"] .create-logo-img--dark-bg {
  display: none;
}



html[data-scheme="light"] .create-logo-img--light-bg,
html[data-scheme="spiritual"] .create-logo-img--light-bg,
html[data-scheme="nature"] .create-logo-img--light-bg {
  display: block;
}


[data-scheme="light"] .ns-app-brand-logo--light,
[data-scheme="spiritual"] .ns-app-brand-logo--light,
[data-scheme="nature"] .ns-app-brand-logo--light { display: none; }


[data-scheme="light"] .ns-app-brand-logo--dark,
[data-scheme="spiritual"] .ns-app-brand-logo--dark,
[data-scheme="nature"] .ns-app-brand-logo--dark { display: block; }



/* Light canvases need premium actions to read as paid CTAs, not low-contrast tints. */
[data-scheme="light"] .ns-app,
[data-scheme="spiritual"] .ns-app,
[data-scheme="nature"] .ns-app {
  --app-premium-text: #6a4300;
  --app-premium-soft: #fff1c2;
  --app-premium-border: rgba(154, 99, 0, 0.42);
  --app-premium-gradient: linear-gradient(135deg, #ffe071 0%, #e8b436 48%, #cb8e18 100%);
  --text-on-premium: #261400;
}



[data-scheme="light"] .ns-app-upgrade,
[data-scheme="spiritual"] .ns-app-upgrade,
[data-scheme="nature"] .ns-app-upgrade {
  color: var(--app-premium-text);
  background: linear-gradient(180deg, #fff7dc 0%, #f6d87f 100%);
  border-color: var(--app-premium-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 2px 8px rgba(142, 91, 0, 0.12);
}



[data-scheme="light"] .ns-app-upgrade i,
[data-scheme="spiritual"] .ns-app-upgrade i,
[data-scheme="nature"] .ns-app-upgrade i {
  color: #8a5b00;
}



[data-scheme="light"] .ns-profile-menu-item--accent,
[data-scheme="spiritual"] .ns-profile-menu-item--accent,
[data-scheme="nature"] .ns-profile-menu-item--accent {
  background: linear-gradient(180deg, #fff6d8 0%, #f8df95 100%);
  color: var(--app-premium-text);
  box-shadow: inset 0 0 0 1px var(--app-premium-border);
}



[data-scheme="light"] .ns-app .chat-model-backdrop::before {
  opacity: 0.11;
  filter: blur(32px) grayscale(0.36) saturate(0.62) brightness(1.02);
}



[data-scheme="light"] .context-upgrade,
[data-scheme="spiritual"] .context-upgrade,
[data-scheme="nature"] .context-upgrade {
  background: linear-gradient(180deg, #fff8e3 0%, #f7e5b2 100%);
  border-color: var(--app-premium-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 2px 8px rgba(131, 84, 0, 0.10);
}



[data-scheme="light"] .context-upgrade-head,
[data-scheme="spiritual"] .context-upgrade-head,
[data-scheme="nature"] .context-upgrade-head {
  color: var(--app-premium-text);
}



[data-scheme="light"] .context-upgrade-text,
[data-scheme="spiritual"] .context-upgrade-text,
[data-scheme="nature"] .context-upgrade-text {
  color: #684f23;
}



[data-scheme="light"] .context-upgrade-btn,
[data-scheme="spiritual"] .context-upgrade-btn,
[data-scheme="nature"] .context-upgrade-btn {
  color: var(--text-on-premium);
  background: var(--app-premium-gradient);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 2px 8px rgba(149, 95, 0, 0.18);
}



[data-scheme="light"] .context-upgrade-btn:focus-visible,
[data-scheme="spiritual"] .context-upgrade-btn:focus-visible,
[data-scheme="nature"] .context-upgrade-btn:focus-visible {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 0 0 3px rgba(154, 99, 0, 0.22);
}