/* Accent: Blue overrides for shell (styles.css + index.html inline styles).
   Activated by body[data-accent="blue"] (set by app.js → Settings → Внешний вид).

   Design philosophy: not a flat hex swap — a designed twin that matches pink's
   visual depth. Multi-stop gradients (sky → blue → indigo) replicate pink's
   3-stop magenta-fuchsia ladders. Glow shadows preserve identical alpha values.
   Animated keyframes get blue variants. Hover states use sky-100 pastel.

   v=07may_blue2 */

/* ===== Brand-token cascade ===== */
body[data-accent="blue"] {
    /* SEO/main accent family */
    --seo-pink: #38bdf8;
    --seo-pink-hot: #0ea5e9;
    --seo-pink-soft: #bae6fd;
    --seo-fuchsia: #60a5fa;
    --seo-magenta: #3b82f6;
    --seo-gradient-a: #bae6fd;
    --seo-gradient-b: #0ea5e9;
    --seo-gradient-c: #3b82f6;
    --seo-pink-glow: rgba(14,165,233,.38);
    --seo-pink-glow-soft: rgba(56,189,248,.22);
    --seo-border-soft: rgba(56,189,248,.22);
    --seo-border-strong: rgba(56,189,248,.42);

    /* Generic accent */
    --accent-primary: #0ea5e9;
    --accent-secondary: #38bdf8;
    --accent-gradient: linear-gradient(135deg, #0ea5e9, #38bdf8);
    --accent-glow: rgba(14,165,233,.2);

    /* Landing / hero ladders */
    --l-accent-1: #38bdf8;
    --l-accent-2: #0ea5e9;
    --l-accent-3: #3b82f6;
    --l-gradient: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%);
    --h-accent-1: #38bdf8;
    --h-accent-2: #0ea5e9;
    --h-gradient: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%);
}

[data-theme="light"] body[data-accent="blue"],
body[data-accent="blue"][data-theme="light"] {
    --seo-border-soft: rgba(14,165,233,.2);
    --seo-border-strong: rgba(14,165,233,.38);
    --seo-pink-glow: rgba(14,165,233,.22);
    --seo-pink-glow-soft: rgba(56,189,248,.14);
}

/* ===== Toasts (info/error/success) ===== */
body[data-accent="blue"] .toast-icon { background: linear-gradient(135deg, #38bdf8, #0ea5e9) !important; box-shadow: 0 6px 14px -4px rgba(14,165,233,.35) !important; }
body[data-accent="blue"] .toast.error .toast-icon { background: linear-gradient(135deg, #60a5fa, #2563eb) !important; }
body[data-accent="blue"] .toast.success .toast-icon { background: linear-gradient(135deg, #38bdf8, #0ea5e9) !important; }
body[data-accent="blue"] .toast.error { box-shadow: 0 18px 40px -12px rgba(96,165,250,.4), 0 0 0 1px rgba(96,165,250,.1) inset !important; }

/* ===== Telegram auth blocks (multi-stop hero gradient) ===== */
body[data-accent="blue"] .tg-icon { background: linear-gradient(135deg, #38bdf8, #0ea5e9) !important; box-shadow: 0 8px 20px rgba(14,165,233,.35) !important; }
body[data-accent="blue"] .tg-login-deeplink { background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 25%, #2563eb 75%, #1e40af 100%) !important; box-shadow: 0 14px 32px -10px rgba(14,165,233,.45), inset 0 1px 0 rgba(255,255,255,.18) !important; }

/* ===== Welcome / pill / nav modals ===== */
body[data-accent="blue"] .welcome-title,
body[data-accent="blue"] .welcome-cta,
body[data-accent="blue"] .welcome-dot.is-active,
body[data-accent="blue"] .welcome-pill-dot.is-active { background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%) !important; }
body[data-accent="blue"] .welcome-cta { box-shadow: 0 14px 36px -18px rgba(14,165,233,.45), inset 0 1px 0 rgba(255,255,255,.18) !important; }
body[data-accent="blue"] .welcome-modal,
body[data-accent="blue"] .welcome-pill-modal { border-color: rgba(14,165,233,.55) !important; box-shadow: 0 26px 70px -28px rgba(14,165,233,.38), 0 0 0 1px rgba(56,189,248,.18) inset !important; }
body[data-accent="blue"] .welcome-nav-primary { background: rgba(14,165,233,.12) !important; border-color: rgba(14,165,233,.5) !important; color: #bae6fd !important; }
body[data-accent="blue"] .welcome-nav-primary:hover { background: rgba(14,165,233,.2) !important; border-color: rgba(14,165,233,.7) !important; }
body[data-accent="blue"] .welcome-dot:hover { background: rgba(14,165,233,.5) !important; }
body[data-accent="blue"] .welcome-pill-dot { background: rgba(14,165,233,.25) !important; }
body[data-accent="blue"][data-theme="light"] .welcome-nav-primary,
[data-theme="light"] body[data-accent="blue"] .welcome-nav-primary { color: #075985 !important; }

/* Light+blue: solid dark title — gradient-text under blue kicker reads as a hard blue stripe. */
body[data-accent="blue"][data-theme="light"] .welcome-title,
[data-theme="light"] body[data-accent="blue"] .welcome-title {
    background: none !important;
    -webkit-background-clip: initial !important;
            background-clip: initial !important;
    -webkit-text-fill-color: #0f172a !important;
    color: #0f172a !important;
}

/* welcome subtitles / chips with #be185d / #fbcfe8 */
body[data-accent="blue"] [style*="be185d"],
body[data-accent="blue"][data-theme="light"] .welcome-subtitle,
[data-theme="light"] body[data-accent="blue"] .welcome-subtitle,
body[data-accent="blue"] .welcome-pill-subtitle,
body[data-accent="blue"] .welcome-step-meta { color: #075985 !important; }

/* ===== Welcome onboarding pulse (animated halo on tutorial spotlight) ===== */
@keyframes welcomeOnboardingPulseBlue {
    0%, 100% { box-shadow: 0 0 0 0 rgba(14,165,233,0); }
    40%      { box-shadow: 0 0 0 8px rgba(14,165,233,.35); }
}
body[data-accent="blue"] .welcome-onboarding-spotlight,
body[data-accent="blue"] [class*="onboarding-pulse"] { animation-name: welcomeOnboardingPulseBlue !important; }

/* ===== Settings hero (gradient text) + close-button pulse ===== */
body[data-accent="blue"] .settings-hero-name {
    background: linear-gradient(110deg, var(--text-primary) 0%, var(--text-primary) 40%, #38bdf8 70%, #0ea5e9 100%) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
}
body[data-accent="blue"][data-theme="light"] .settings-hero-name,
[data-theme="light"] body[data-accent="blue"] .settings-hero-name {
    background: linear-gradient(110deg, #1f2937 0%, #1f2937 35%, #3b82f6 75%, #0ea5e9 100%) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
}

@keyframes settingsModalPulseBlue {
    0%, 100% { box-shadow: 0 0 10px var(--seo-fuchsia, #60a5fa), 0 0 0 3px rgba(96,165,250,0.18); }
    50%      { box-shadow: 0 0 14px var(--seo-fuchsia, #60a5fa), 0 0 0 6px rgba(96,165,250,0.08); }
}
body[data-accent="blue"] .settings-modal-close { animation-name: settingsModalPulseBlue !important; }

/* ===== Auth landing forms ===== */
body[data-accent="blue"] #auth-screen #reset-code-input:focus { border-color: #38bdf8 !important; box-shadow: 0 0 0 3px rgba(56,189,248,.22) !important; }
body[data-accent="blue"] #auth-screen .auth-input:focus,
body[data-accent="blue"] #auth-screen input:focus-visible { border-color: #0ea5e9 !important; box-shadow: 0 0 0 3px rgba(14,165,233,.2) !important; outline: none !important; }
body[data-accent="blue"] .landing-avatars span:nth-child(1) { background: linear-gradient(135deg, #38bdf8, #0ea5e9) !important; box-shadow: 0 6px 14px -4px rgba(14,165,233,.35) !important; }

/* ===== Home action buttons (icons + focus) ===== */
body[data-accent="blue"] .home-action-btn--labeled svg,
body[data-accent="blue"] .home-action-btn--labeled:hover svg,
body[data-accent="blue"] [data-theme="light"] .home-action-btn--labeled svg,
[data-theme="light"] body[data-accent="blue"] .home-action-btn--labeled svg,
body[data-accent="blue"] [data-theme="light"] .home-action-btn--labeled:hover svg,
[data-theme="light"] body[data-accent="blue"] .home-action-btn--labeled:hover svg { color: #0ea5e9 !important; }
body[data-accent="blue"] #home-action-bell:focus-visible svg,
[data-theme="light"] body[data-accent="blue"] #home-action-bell:focus-visible svg { color: #0ea5e9 !important; }
body[data-accent="blue"] .home-action-btn--labeled:focus-visible { outline: 2px solid #0ea5e9 !important; outline-offset: 2px !important; }

/* ===== Hero ribbon (large home banner — radial stack) ===== */
body[data-accent="blue"] [class*="hero-ribbon"],
body[data-accent="blue"] .home-hero-strip { background-image: linear-gradient(135deg, #1e3a8a 0%, #0ea5e9 50%, #f59e0b 100%) !important; }

/* ===== Home recommendations (animated dot + cta + gradient overlay) ===== */
@keyframes homeRecDotBlue {
    0%, 100% { transform: scale(1);     box-shadow: 0 0 0 0 rgba(14,165,233,.55), 0 0 12px rgba(14,165,233,.6); }
    50%      { transform: scale(1.18);  box-shadow: 0 0 0 6px rgba(14,165,233,0),  0 0 18px rgba(56,189,248,.85); }
}
body[data-accent="blue"] .home-rec-dot,
body[data-accent="blue"] [class*="rec-dot"] { animation-name: homeRecDotBlue !important; background: #0ea5e9 !important; }

body[data-accent="blue"] .home-rec-item { border-color: rgba(14,165,233,.45) !important; }
body[data-accent="blue"] .home-rec-item::before,
body[data-accent="blue"] .home-rec-item .home-rec-cta-bg,
body[data-accent="blue"] .home-rec-cta-bg { background: linear-gradient(135deg, #0ea5e9, #3b82f6) !important; }
body[data-accent="blue"] .home-rec-item:hover { box-shadow: 0 14px 36px -18px rgba(14,165,233,.45), 0 0 0 1px rgba(56,189,248,.25) inset !important; }
body[data-accent="blue"] .home-rec-item:hover::after { color: #38bdf8 !important; }
body[data-accent="blue"] .home-rec-item:hover .home-rec-cta { color: #38bdf8 !important; }
[data-theme="light"] body[data-accent="blue"] .home-rec-item:hover .home-rec-cta { color: #075985 !important; }
body[data-accent="blue"] .home-recommendations { background: linear-gradient(160deg, rgba(14,165,233,.08), rgba(59,130,246,.04) 55%, rgba(15,16,32,0) 100%), var(--seo-glass) !important; border-color: rgba(56,189,248,.22) !important; }

/* ===== Sidebar accent: nav items, active pill, premium chip ===== */
body[data-accent="blue"] .nav-item.active,
body[data-accent="blue"] .nav-item-active,
body[data-accent="blue"] [class*="nav-item"][aria-current="true"] { background: linear-gradient(135deg, rgba(14,165,233,.18), rgba(59,130,246,.12)) !important; border-color: rgba(56,189,248,.42) !important; }
body[data-accent="blue"] .premium-chip,
body[data-accent="blue"] .nav-premium-chip { background: linear-gradient(135deg, #0ea5e9, #3b82f6) !important; box-shadow: 0 6px 14px -4px rgba(14,165,233,.4) !important; }

/* ===== User-plan pulse (animated indicator) ===== */
@keyframes userPlanPulseBlue {
    0%, 100% { box-shadow: 0 0 0 0 rgba(14,165,233,.55); }
    50%      { box-shadow: 0 0 0 6px rgba(14,165,233,0); }
}
body[data-accent="blue"] .user-plan-pulse,
body[data-accent="blue"] [class*="plan-pulse"] { animation-name: userPlanPulseBlue !important; }

/* ===== Premium / shimmer buttons (replace pink shimmer with sky) ===== */
@keyframes btnPremiumShimmerBlue {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
body[data-accent="blue"] .btn-premium,
body[data-accent="blue"] [class*="premium-shimmer"] {
    background: linear-gradient(110deg, #0ea5e9 0%, #38bdf8 25%, #bae6fd 50%, #38bdf8 75%, #0ea5e9 100%) !important;
    background-size: 200% 100% !important;
    animation-name: btnPremiumShimmerBlue !important;
}

/* ===== Send-fly (chat send button) — keep core animation, recolor stroke ===== */
body[data-accent="blue"] .send-btn svg,
body[data-accent="blue"] .send-btn:hover svg { color: #0ea5e9 !important; stroke: #0ea5e9 !important; }
body[data-accent="blue"] .send-btn { box-shadow: 0 8px 20px -8px rgba(14,165,233,.4) !important; }

/* ===== Avatar ripple ===== */
@keyframes userAvatarRippleBlue {
    0%   { box-shadow: 0 0 0 0 rgba(14,165,233,.55); }
    100% { box-shadow: 0 0 0 14px rgba(14,165,233,0); }
}
body[data-accent="blue"] .user-avatar-ripple,
body[data-accent="blue"] [class*="avatar-ripple"] { animation-name: userAvatarRippleBlue !important; }

/* ===== Typing indicator dot color ===== */
body[data-accent="blue"] .typing-dot,
body[data-accent="blue"] [class*="typing-bounce"] span { background: #38bdf8 !important; }

/* ===== Confirm modal (delete chats etc.) ===== */
body[data-accent="blue"] .confirm-modal-confirm:not(.confirm-modal-danger .confirm-modal-confirm) { background: linear-gradient(135deg, #0ea5e9, #3b82f6) !important; }
body[data-accent="blue"] .confirm-modal-confirm:not(.confirm-modal-danger .confirm-modal-confirm):hover { box-shadow: 0 4px 12px rgba(14,165,233,.4) !important; }

/* ===== Pro/premium spin rings (settings + home) ===== */
@keyframes settingsProShimmerBlue {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
body[data-accent="blue"] .settings-pro-shimmer,
body[data-accent="blue"] .home-pro-shimmer {
    background: linear-gradient(110deg, transparent 0%, rgba(56,189,248,.4) 50%, transparent 100%) !important;
    animation-name: settingsProShimmerBlue !important;
}
body[data-accent="blue"] .settings-pro-twinkle,
body[data-accent="blue"] .home-pro-twinkle { color: #38bdf8 !important; }
@keyframes settingsProPulseBlue {
    0%, 100% { box-shadow: 0 0 0 0 rgba(14,165,233,.45); }
    50%      { box-shadow: 0 0 0 8px rgba(14,165,233,0); }
}
body[data-accent="blue"] .settings-pro-pulse,
body[data-accent="blue"] .home-pro-pulse { animation-name: settingsProPulseBlue !important; }

/* ===== Inline-styled pink fallbacks (sidebar etc.) — delegated to runtime ===== */
/* Runtime patcher walks [style] attrs and rewrites #ec4899/#f472b6/rgba(236,72,153) */

/* ===== Focus-visible global ring (keyboard a11y) ===== */
body[data-accent="blue"] *:focus-visible:not(input):not(textarea):not(select) {
    outline-color: #0ea5e9 !important;
}

/* ===== Light theme companion: deep blue replaces deep pink (#be185d → #075985) ===== */
[data-theme="light"] body[data-accent="blue"] [style*="be185d"] { color: #075985 !important; }
[data-theme="light"] body[data-accent="blue"] [style*="db2777"] { color: #0284c7 !important; }