/* ============================================================================
   DREADLIST v1.41.0 — ENHANCEMENTS LAYER
   Additive visual + motion polish. Loads AFTER app.css.
   Targets the REAL class names used across the views.
   Nothing here changes layout or color identity — only depth, motion, focus.
   Safe to delete: the app is fully functional without this file.
   ========================================================================= */

:root {
    --dl-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dl-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dl-glow-amber: 0 0 24px rgba(212, 150, 58, 0.18);
    --dl-glow-teal: 0 0 20px rgba(95, 208, 214, 0.15);
    --dl-glow-blood: 0 0 22px rgba(214, 68, 47, 0.20);
    --dl-lift: 0 8px 28px rgba(0, 0, 0, 0.45);
    --dl-lift-sm: 0 4px 14px rgba(0, 0, 0, 0.35);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---- crisper focus ring everywhere (a11y) ------------------------------ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--amber, #d4963a);
    outline-offset: 2px;
    border-radius: 6px;
}

/* ============================================================================
   ENTRANCE — posts drift up gently as the feed mounts
   ========================================================================= */
@keyframes dlFadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes dlScaleIn {
    from { opacity: 0; transform: scale(0.97); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes dlFadeIn { from { opacity: 0; } to { opacity: 1; } }

.dl-post {
    animation: dlFadeUp 0.4s var(--dl-ease-out) both;
}
.dl-post:nth-child(1) { animation-delay: 0.02s; }
.dl-post:nth-child(2) { animation-delay: 0.06s; }
.dl-post:nth-child(3) { animation-delay: 0.10s; }
.dl-post:nth-child(4) { animation-delay: 0.14s; }
.dl-post:nth-child(5) { animation-delay: 0.18s; }

/* ============================================================================
   POST CARD — hover lift + warmer shadow
   ========================================================================= */
.dl-post {
    transition:
        transform 0.2s var(--dl-ease-out),
        box-shadow 0.2s var(--dl-ease-out),
        border-color 0.2s var(--dl-ease-out);
    will-change: transform;
}
.dl-post:hover {
    transform: translateY(-2px);
    box-shadow: var(--dl-lift);
}
/* vaulted + night posts keep their identity, just lift a touch less */
.dl-post.is-vaulted:hover,
.dl-post.is-night:hover {
    transform: translateY(-1px);
}

/* ============================================================================
   POST ACTIONS — candle / echo / flag counters
   ========================================================================= */
.dl-post-actions a,
.dl-post-actions button,
.dl-action-count,
.dl-reaction-count {
    transition: transform 0.14s var(--dl-ease-spring), color 0.16s var(--dl-ease-out);
}
.dl-post-actions a:hover,
.dl-post-actions button:hover {
    transform: scale(1.12);
}
.dl-post-actions a:active,
.dl-post-actions button:active {
    transform: scale(0.92);
}

/* ============================================================================
   FEED LENS TABS — The World / Kindred sliding underline
   ========================================================================= */
.dl-feed-tab {
    position: relative;
    transition: color 0.2s var(--dl-ease-out);
}
.dl-feed-tab::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 2px;
    background: var(--amber, #d4963a);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s var(--dl-ease-out);
    border-radius: 2px;
}
.dl-feed-tab.is-active::after,
.dl-feed-tab[aria-selected="true"]::after {
    transform: scaleX(1);
}

/* ============================================================================
   COMPOSER — "What moved, just now?" warms on focus + grows
   ========================================================================= */
.dl-composer-input,
.dl-composer textarea {
    transition:
        border-color 0.2s var(--dl-ease-out),
        box-shadow 0.2s var(--dl-ease-out),
        background 0.2s var(--dl-ease-out);
}
.dl-composer-input:focus,
.dl-composer textarea:focus {
    box-shadow: var(--dl-glow-amber);
}

/* composer tool buttons (emoji / gif / location) */
.dl-composer-btn,
.dl-composer-emoji,
.dl-composer-gif,
.dl-composer-location {
    transition: transform 0.15s var(--dl-ease-spring), color 0.16s var(--dl-ease-out);
}
.dl-composer-btn:hover,
.dl-composer-emoji:hover,
.dl-composer-gif:hover {
    transform: scale(1.14);
}

/* char counter warms as it fills */
.dl-charcount-display {
    transition: color 0.2s var(--dl-ease-out);
}
.dl-charcount-display.is-warn { color: #e6ad42; }
.dl-charcount-display.is-over { color: #d6442f; }

/* ============================================================================
   PRIMARY BUTTON — "Release into the dark", submits
   ========================================================================= */
.dl-btn-primary {
    transition:
        transform 0.12s var(--dl-ease-spring),
        box-shadow 0.2s var(--dl-ease-out),
        filter 0.2s var(--dl-ease-out);
}
.dl-btn-primary:hover {
    box-shadow: var(--dl-glow-amber);
    filter: brightness(1.06);
}
.dl-btn-primary:active {
    transform: scale(0.97);
}

/* ============================================================================
   AVATAR SPECIES PICKER — Sigil / Specter / Mask / Rune / Weave / Vévé
   ========================================================================= */
.dl-species-opt {
    transition:
        transform 0.18s var(--dl-ease-out),
        box-shadow 0.18s var(--dl-ease-out),
        border-color 0.18s var(--dl-ease-out);
}
.dl-species-opt:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: var(--dl-lift-sm);
}
.dl-species-opt.is-on {
    box-shadow: var(--dl-glow-blood);
}

/* ============================================================================
   MOOD BADGE ROW — skull / candle / eye / blood-drop chips
   ========================================================================= */
.dl-mood-opt {
    transition: transform 0.16s var(--dl-ease-spring), box-shadow 0.16s var(--dl-ease-out);
}
.dl-mood-opt:hover {
    transform: scale(1.16) rotate(-4deg);
}
.dl-mood-opt.is-on {
    box-shadow: var(--dl-glow-amber);
}

/* ============================================================================
   COVER / ATMOSPHERE SWATCHES
   ========================================================================= */
.dl-cover-opt {
    transition:
        transform 0.18s var(--dl-ease-out),
        box-shadow 0.18s var(--dl-ease-out);
}
.dl-cover-opt:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: var(--dl-lift-sm);
}
.dl-cover-opt.is-on {
    box-shadow: 0 0 0 2px var(--amber, #d4963a), var(--dl-lift-sm);
}

/* ============================================================================
   PRESENCE DOTS — the breathing green "available" indicator
   ========================================================================= */
.dl-presence-dot,
.dl-accent-dot,
.dl-lights-dot {
    animation: dlBreathe 2.4s var(--dl-ease-out) infinite;
}
@keyframes dlBreathe {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.6; transform: scale(0.92); }
}

/* notification pip pops when it appears */
.dl-notif-dot {
    animation: dlBadgePop 0.3s var(--dl-ease-spring) both;
}
@keyframes dlBadgePop {
    from { transform: scale(0); }
    to   { transform: scale(1); }
}

/* ============================================================================
   DREAD WIRE — the live ticker strip gets a slow shimmer
   ========================================================================= */
.dl-wire, .dl-ticker, [class*="dread-wire"], [class*="dl-wire"] {
    position: relative;
    overflow: hidden;
}
.dl-wire::after, .dl-ticker::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent 0%, rgba(212,150,58,0.04) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: dlWireShimmer 8s linear infinite;
    pointer-events: none;
}
@keyframes dlWireShimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* ============================================================================
   AI ORACLE — provider/persona inputs get teal focus depth
   ========================================================================= */
.dl-oracle select:focus,
.dl-oracle input:focus,
.dl-oracle textarea:focus,
[class*="oracle"] select:focus,
[class*="oracle"] input:focus,
[class*="oracle"] textarea:focus {
    box-shadow: var(--dl-glow-teal);
}

/* ============================================================================
   MODALS / OVERLAYS — scale-in instead of a hard cut
   ========================================================================= */
.dl-modal, .dl-dialog, [role="dialog"] {
    animation: dlScaleIn 0.22s var(--dl-ease-out) both;
}
.dl-modal-backdrop, .dl-overlay {
    animation: dlFadeIn 0.2s var(--dl-ease-out) both;
}

/* ============================================================================
   ADMIN ACTION GRID — guarantee the 7 buttons wrap (mobile cut-off fix)
   ========================================================================= */
.dl-admin-actions,
.dl-admin-action-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    align-items: stretch;
}
.dl-admin-actions > a,
.dl-admin-actions > button,
.dl-admin-action-btn {
    transition:
        transform 0.16s var(--dl-ease-out),
        box-shadow 0.16s var(--dl-ease-out);
}
.dl-admin-actions > a:hover,
.dl-admin-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--dl-lift-sm);
}
@media (max-width: 640px) {
    .dl-admin-actions { gap: 0.55rem; }
}

/* ============================================================================
   FOOTER — wrap links on narrow screens so nothing clips
   ========================================================================= */
@media (max-width: 640px) {
    footer nav,
    footer .dl-foot-links {
        flex-wrap: wrap;
        gap: 0.5rem 0.9rem;
    }
}

/* ============================================================================
   SKELETON SHIMMER — any element marked data-loading
   ========================================================================= */
[data-loading="true"], .dl-skeleton {
    background: linear-gradient(90deg,
        rgba(255,255,255,0.03) 25%,
        rgba(255,255,255,0.06) 50%,
        rgba(255,255,255,0.03) 75%);
    background-size: 200% 100%;
    animation: dlSkeleton 1.4s linear infinite;
    border-radius: 8px;
}
@keyframes dlSkeleton {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* ============================================================================
   SCROLLBAR — themed amber-on-dark
   ========================================================================= */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(212, 150, 58, 0.3) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: rgba(212, 150, 58, 0.25);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
    background: rgba(212, 150, 58, 0.45);
    background-clip: padding-box;
}



/* ===== v1.41 SETTINGS PAGE FIX — resolve .dl-card name clash ===== */
.dl-settings .dl-settings-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
}
.dl-settings .dl-settings-grid .dl-card {
    position: static;
    inset: auto;
    width: 100%;
    overflow: visible;
    padding: 1.25rem 1.4rem;
    border-radius: 14px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.09);
    box-shadow: none;
    will-change: auto;
}
.dl-settings .dl-settings-grid .dl-card-danger {
    background: rgba(191,48,37,.07);
    border-color: rgba(191,48,37,.32);
}
.dl-settings .dl-settings-grid .dl-card-title {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: .95rem;
    margin: 0 0 .85rem;
    color: #edeae6;
}
.dl-settings .dl-setting-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.4rem;
    border-radius: 14px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.09);
    color: #edeae6;
    text-decoration: none;
}
.dl-settings .dl-setting-link:hover { background: rgba(255,255,255,.05); }