/**
 * EchoWall Master Theme CSS - Unified High-Fidelity
 * Optimized for persistent Identity highlights in both Light and Dark modes.
 */
@layer base {
    :root {
        /* Deep Night (Default) */
        --bg-main: #020617;
        --bg-card: rgba(15, 23, 42, 0.7);
        --text-main: #f1f5f9;
        --text-dim: #64748b;
        --border: rgba(255, 255, 255, 0.08);
        --glass-blur: blur(20px);
        
        /* Neon Highlight Colors for Dark Mode */
        --wc-cyan: #22d3ee;
        --wc-purple: #a855f7;
        --glow-strength: 0.3;
    }

    body.light-mode {
        /* Premium Frost (Light) */
        --bg-main: #f1f5f9;
        --bg-card: rgba(255, 255, 255, 0.8);
        --text-main: #0f172a;
        --text-dim: #475569;
        --border: rgba(15, 23, 42, 0.08);
        
        /* Polished Highlight Colors for Light Mode */
        --wc-cyan: #0891b2;
        --wc-purple: #9333ea;
        --glow-strength: 0.15;
    }

    body {
        background-color: var(--bg-main);
        color: var(--text-main);
        @apply transition-colors duration-500 antialiased;
        background-image: radial-gradient(circle at top right, rgba(34, 211, 238, 0.05), transparent);
    }
}

/* --- UNIVERSAL GLASS MORPHISM --- */
.glass-panel, .echo-card {
    background: var(--bg-card) !important;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border) !important;
    @apply transition-all duration-500;
}

/* Light Mode Depth Logic (Soft Shadows) */
body.light-mode .glass-panel, 
body.light-mode .echo-card {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02) !important;
}

/* --- THE SIGNATURE HIGHLIGHTS --- */

/* Visible Mode Glow (Cyan) */
.wall-entry[data-identity="visible"], 
#echo-composer[data-identity="visible"] {
    border: 1.5px solid var(--wc-cyan) !important;
    box-shadow: 0 0 25px -5px rgba(34, 211, 238, var(--glow-strength)) !important;
}

/* Shadow (Purple) Highlight */
.wall-entry[data-identity="shadow"], 
#echo-composer[data-identity="shadow"] {
    border: 1.5px solid var(--wc-purple) !important;
    box-shadow: 0 0 25px -5px rgba(168, 85, 247, var(--glow-strength)) !important;
}



@layer components {
    .echo-card {
        @apply rounded-[2.5rem] p-8 mb-6;
    }

    .fractal-trail { 
        @apply border-l-2 ml-6 pl-8 mt-6 transition-colors;
        border-color: var(--border);
    }
}

/* --- UTILITY & TEXT OVERRIDES --- */

/* Force correct text visibility in Light Mode */
body.light-mode .text-slate-100,
body.light-mode .text-slate-200,
body.light-mode .text-white,
body.light-mode .post-author,
body.light-mode h1, body.light-mode h4 {
    color: var(--text-main) !important;
}

body.light-mode .text-slate-400,
body.light-mode .text-slate-500 {
    color: var(--text-dim) !important;
}

/* Fix for Button text and icons in Light Mode */
body.light-mode .resonate-btn .score-count {
    color: var(--text-main) !important;
}

body.light-mode .post-avatar-box {
    background-color: #e2e8f0 !important;
    color: var(--text-dim) !important;
}

/* Input & Search Bar Polishing */
body.light-mode input, 
body.light-mode textarea {
    color: var(--text-main) !important;
    background-color: rgba(0,0,0,0.03) !important;
}




/* ==========================================================================
   ECHO WALL: THE INFINITE FLAT-LINE CAP (Anti-Drift Engine)
   ========================================================================== */

/* 1. Base Tree (Level 1 to Level 2) */
.fractal-trail {
    border-left: 2px solid var(--border); 
    margin-left: 1.5rem !important; 
    padding-left: 1.25rem !important; 
    margin-top: 1rem;
}

.wall-entry {
    padding: 1.25rem !important; 
}

/* Mobile Base Indent */
@media (max-width: 768px) {
    .fractal-trail {
        margin-left: 0.75rem !important;
        padding-left: 0.75rem !important;
    }
    .wall-entry {
        padding: 1rem !important;
    }
}

/* 2. THE ANTI-DRIFT ENGINE (Level 3 to Infinity) */
/* Target any nested trail (L3 container, L4 container, etc.) */
.fractal-trail .fractal-trail {
    border-left: none !important;
    padding-left: 0 !important;
    /* MATH: This negative margin exactly neutralizes the padding of the post above it. 
       It completely stops the recursive rightward drift! */
    margin-left: -1rem !important; 
    margin-top: 0 !important;
}

/* Strip the boxes for Level 3+ and apply the vertical thread line */
.fractal-trail .fractal-trail .wall-entry {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    
    /* The Continuous Thread Line */
    border-left: 2px solid rgba(34, 211, 238, 0.4) !important;
    /* MATH: 1rem padding perfectly balances the -1rem margin above! */
    padding-left: 1rem !important; 
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 0.75rem !important;
}

/* Identity color lines for flat text */
.fractal-trail .fractal-trail .wall-entry[data-identity="shadow"],
.fractal-trail .fractal-trail .wall-entry[data-identity="ambiguous"] {
    border-left-color: rgba(168, 85, 247, 0.4) !important;
}
/* Removed the separate var(--border) rule for shadow so it inherits the purple */


/* ==========================================================================
   ECHO RESONANCE UI - DONUT RING ARCHITECTURE
   ========================================================================== */

/* 1. Base Ring Construction (The Donut Border) */
.wall-entry .impact-circle {
    /* Draws the progress border */
    background: conic-gradient(#22d3ee calc(var(--percent) * 1%), #334155 0) !important;
    border-radius: 50%;
    transition: box-shadow 0.3s ease;
}

body.light-mode .wall-entry .impact-circle {
    /* Light mode progress border uses a slightly darker cyan for visibility */
    background: conic-gradient(#0891b2 calc(var(--percent) * 1%), #e2e8f0 0) !important;
}

/* 2. Inner Hole (Must perfectly match card background to look hollow) */
.wall-entry .impact-circle > div {
    background-color: #0f172a !important; /* Dark mode card color */
    border: none !important; /* Removes any stray lines */
}

body.light-mode .wall-entry .impact-circle > div {
    background-color: #ffffff !important; /* Light mode card color */
}

/* 3. Default Text States */
.wall-entry .score-count,
.wall-entry .resonate-btn span.uppercase {
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* 4. ACTIVE RESONATED STATE (Dark Mode) */
.wall-entry.is-resonated .score-count,
.wall-entry.is-resonated .resonate-btn span.uppercase { 
    color: #22d3ee !important; /* Neon Cyan */
    text-shadow: 0 0 8px rgba(34, 211, 238, 0.4);
}
.wall-entry.is-resonated .impact-circle {
    box-shadow: 0 0 12px rgba(34, 211, 238, 0.4) !important; /* Outer glow on the ring itself */
}

/* 5. ACTIVE RESONATED STATE (Light Mode) */
body.light-mode .wall-entry.is-resonated .score-count,
body.light-mode .wall-entry.is-resonated .resonate-btn span.uppercase { 
    color: #0891b2 !important; /* Darker Cyan 600 for contrast on white */
    text-shadow: none !important; /* Drop shadow looks muddy on white */
    font-weight: 800 !important;
}
body.light-mode .wall-entry.is-resonated .impact-circle {
    box-shadow: 0 0 8px rgba(8, 145, 178, 0.3) !important;
}