/**
 * KIRII // EDEN_OS CORE STYLESHEET // V3.5
 * Theme: Catppuccin Macchiato
 * Features: Dynamic Scaling, No-Scroll Viewport, TUI Ticker
 */

/* =========================================
   1. THEMES & TUI VARIABLES
   ========================================= */
:root {
    --bg: #24273a;
    --surface: #24273a;
    --text: #cad3f5;
    --muted: #494d64; 
    --accent: #8aadf4; 
    --secondary: #c6a0f6;
    --success: #a6da95;
    --warning: #eed49f;
    --error: #ed8796;
}

/* =========================================
   2. CORE RESET & VIEWPORT LOCK
   ========================================= */
* { box-sizing: border-box; margin: 0; padding: 0; border-radius: 0 !important; }

* {
    /* The 'auto' at the end is mandatory for the custom cursor to work! */
    cursor: url('assets/cursor.png'), auto !important;
}

.cursor-trail {
    position: fixed;
    top: 0;
    left: 0;
    width: 3.5%;
    height: 3.5%;  /* Match your cursor PNG size */
    /* Use the same image you chose for your cursor */
    background-image: url('assets/cursor.png');
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none; /* Crucial: stops the trail from blocking clicks */
    z-index: 10000;
    opacity: 0;
    will-change: transform;
    /* This makes it look like a CRT ghosting effect */
    filter: brightness(1.2) contrast(1.1); 
}

html, body {
    background-color: var(--bg);
    color: var(--text);
    font-family: 'JetBrains Mono', monospace;
    height: 100vh;
    width: 100%; /* Changed from 100vw to avoid scrollbar overlap */
    overflow: hidden; /* Prevent body-level scrolling */
    display: flex;
    flex-direction: column;
}
@font-face {
  font-family: 'JetBrainsMono Nerd Font';
  src: url('assets/fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


body {
    background-color: var(--bg);
    background-image: 
        linear-gradient(to right, rgba(255, 81, 182, 0.3) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(118, 72, 255, 0.3) 1px, transparent 1px);
    background-size: 50px 50px;
    
    /* THE DVD FIX: 
       'alternate' makes it go back and forth.
       'ease-in-out' makes the 'bounce' feel smoother at the turns. */
    animation: grid-bounce 10s ease-in-out infinite alternate;
}

@keyframes grid-bounce {
    0% {
        background-position: -100% 0%;
    }
    100% {
        /* Moving it by 100% of the background-size creates a smooth shift */
        background-position: 300px 500px;
    }
}
/* FORCE HIDE ALL SCROLLBARS */
html, body, div, section, iframe, * {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE/Edge */
}

/* Chrome, Safari, Opera, and Webkit-based Edge */
*::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    -webkit-appearance: none !important;
}

/* Specific fix for your scrollable containers */
.profile-scroll-box, .content-body, #chat-wrapper {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
/* FUI Overlays */
#crt-overlay, #dither-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
}
#crt-overlay { background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.05) 50%); background-size: 100% 2px; }
#dither-overlay { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABZJREFUeNpi2rVrf2QAAzHIEAEgwAQAJbAEf/Zk2YcAAAAASUVORK5CYII='); opacity: 0.03; }

/* =========================================
   3. TUI GRID LAYOUT (The Scaling Fix)
   ========================================= */
.tui-grid-container {
    display: grid; 
    /* Sidebar is 25% but never smaller than 300px; main is the rest */
    grid-template-columns: minmax(300px, 25%) 1fr; 
    height: 100vh;
    width: 100%; 
    gap: 0; 
    overflow: hidden; 
    flex-shrink: 0;
}

.left-col, .right-col {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden; /* Keeps column edges strict */
}

/* =========================================
   4. BLOCK & HEADER STYLING
   ========================================= */
.tui-block {
    position: relative; 
    /* THIS IS THE FIX: Give it a solid color so the grid doesn't bleed through */
    background: var(--surface) !important; 
    overflow: visible !important;
    border: 2px solid var(--muted); 
    margin: 15px; 
    display: flex; 
    flex-direction: column; 
    min-width: 0;  
    min-height: 0; 
}

/* =========================================
   PROFILE SCROLL FIX (No Gaps)
   ========================================= */

/* Enables scrolling for the internal box, overriding the outer content-body padding */
.profile-scroll-box {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    /* This box now touches the 1px muted border of the tui-block */
    border-radius: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--muted) ;
}

/* Ensure the Discord structure doesn't force widths */
.discord-profile {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Apply padding ONLY to the text content, keeping the banner and avatar 'gapless' */
.content-padded {
    padding: 10px 15px 15px 15px; 
}

/* Optional: Ensure avatar doesn't get squished if zoomed */
.discord-avatar-wrapper {
    flex-shrink: 0;
}

/* Flex distribution for EDEN_OS modules */
#block-profile, #block-webring, #block-feed, #block-chat { flex-grow: 1; }
#block-search, #block-status, #block-rtn, #block-tags { flex-grow: 0; flex-shrink: 0; }

.block-header {
    position: absolute; 
    top: -10px; 
    left: 15px; 
    background: var(--bg); 
    padding: 0 10px; 
    font-size: 11px; 
    font-weight: bold;
    color: var(--secondary); 
    z-index: 20; 
    text-transform: uppercase;
    letter-spacing: 1px;
}

.content-body {
    padding: 25px 15px 15px 15px; 
    flex-grow: 1; 
    overflow-y: auto; 
    overflow-x: hidden; /* Block horizontal bleeding */
    scrollbar-width: thin;
    scrollbar-color: var(--muted) transparent;
}

/* =========================================
   5. PROFILE & SOCIALS (NET_LINKS)
   ========================================= */
.discord-banner { 
    height: 70px; 
    background-image: url('../assets/1500x500.webp'); 
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid var(--muted);
}

.discord-avatar-wrapper { position: relative; margin-top: -35px; margin-left: 15px; }
.discord-avatar { 
    width: 70px; 
    height: 70px; 
    border: 2px solid var(--accent);
    object-fit: cover; 
    image-rendering: pixelated;
}

.discord-content { padding: 10px 15px; }
.discord-name { font-size: 20px; font-weight: bold; letter-spacing: 1px; color: var(--accent); }
.discord-tag { color: var(--muted); font-size: 14px; }
.discord-section-label { font-size: 10px; font-weight: bold; color: var(--muted); margin-top: 15px; text-transform: uppercase; }

.social-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: var(--text);
    text-decoration: none;
    padding: 6px 8px;
    border-left: 2px solid transparent;
    transition: 0.2s ease;
}

.social-item:hover {
    background: rgba(138, 173, 244, 0.05);
    border-left: 2px solid var(--accent);
    color: var(--accent);
}

/* =========================================
   6. POSTS & THUMBNAILS (Light-Up Effect)
   ========================================= */
.post-thumb {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: brightness(0.7) contrast(1.1) saturate(0.8);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.9;
}

.post-thumb:hover {
    filter: brightness(1.1) contrast(1.0) saturate(1.1);
    opacity: 1;
    box-shadow: 0 0 15px rgba(138, 173, 244, 0.2); 
}

/* Link Resets & Visited Fix */
.blog-content-inner a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px dashed var(--accent);
}

.blog-content-inner a:visited {
    color: var(--accent); 
    opacity: 0.8;
}

.blog-content-inner a:hover {
    color: var(--bg);
    background: var(--accent);
}

/* =========================================
   7. MANUAL TICKER (EXT_FEED)
   ========================================= */
.ticker-container {
    height: 100%;
    width: 100%;
    padding-top: 10px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.ticker-scroll {
    display: flex;
    width: fit-content;
    animation: ticker-move 60s linear infinite;
}

.ticker-content {
    display: flex;
    white-space: nowrap;
}

.ticker-item {
    padding: 0 40px;
    font-weight: bold;
    color: var(--warning);
    font-size: 11px;
    letter-spacing: 1px;
}

@keyframes ticker-move {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* =========================================
   8. PERSONAL BUTTON MODULE
   ========================================= */
.tui-pixel-art {
    image-rendering: pixelated; 
    border: 1px solid var(--muted);
    padding: 2px;
    width: 168px; /* Fixed size to prevent grid overflow */
    height: 111px;
    object-fit: contain;
    cursor: pointer;
    transition: 0.2s;
}

.tui-pixel-art:hover {
    border-color: var(--accent);
    transform: scale(1.05);
}

/* =========================================
   9. NOTIFICATIONS (Bottom Status)
   ========================================= */
.notif {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--bg);
    border: 1px solid var(--muted);
    color: var(--accent);
    padding: 10px 15px;
    font-size: 11px;
    z-index: 10000;
    animation: notif-slide 0.3s ease-out;
}

@keyframes notif-slide {
    from { transform: translateX(50px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.notif-progress {
    position: absolute;
    top: 0; left: 0;
    height: 2px;
    width: 100%;
    background: var(--accent);
    animation: drain 3s linear forwards;
}

@keyframes drain {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

.discord-copy-trigger {
    position: relative;
    cursor: pointer;
}

.tooltip-text {
    margin-left: 10px;
    font-size: 10px;
    color: var(--accent);
    text-transform: uppercase;
    /* Invisible by default */
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

/* Only show on hover */
.discord-copy-trigger:hover .tooltip-text {
    opacity: 1;
}

/* Success color for "copied!" state */
.tooltip-text.success-state {
    color: var(--success);
    opacity: 1;
}
/* --- THE MAIN WRAPPER (EDEN_OS FLOATING MODULE) --- */
.floating-terminal {
    position: fixed;
    top: 70%; 
    left: 50px;
    z-index: 9999;
    /* fit-content ensures the box wraps tightly around the 88px buttons */
    width: fit-content; 
    min-width: 140px; /* Buffer to keep header text from feeling cramped */
    background: var(--bg);
    border: 1px solid var(--muted);
    font-family: 'JetBrains Mono', monospace;
    user-select: none;
    transition: opacity 0.3s ease;
}

/* --- THE HEADER (DRAG HANDLE) --- */
.terminal-header {
    background: var(--surface);
    color: var(--secondary);
    padding: 8px 12px;
    font-size: 10px;
    font-weight: bold;
    white-space: nowrap; 
    cursor: grab;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid transparent;
}

.terminal-header:active {
    cursor: grabbing;
}

.floating-terminal.active .terminal-header {
    border-bottom: 1px solid var(--muted);
    color: var(--accent);
}

/* --- STATUS INDICATOR --- */
.status-dot {
    width: 6px;
    height: 6px;
    background: var(--muted);
    display: inline-block;
    transition: 0.3s;
}

.floating-terminal.active .status-dot {
    background: var(--success);
    box-shadow: 0 0 5px var(--success);
}

/* --- THE SCROLLABLE WINDOW --- */
.terminal-window {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.floating-terminal.active .terminal-window {
    max-height: 220px; /* Shows ~4 buttons before scrolling starts */
    overflow-y: auto;
    border-bottom: 1px solid var(--muted);
}

/* --- THE BUTTON COLUMN --- */
.net-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 12px; /* Tight horizontal padding for that "hug" look */
    gap: 12px;
}

.net-grid img {
    width: 88px;
    height: 31px;
    display: block;
    border: 1px solid var(--muted);
    image-rendering: pixelated; /* Keeps pixel art sharp */
    filter: brightness(0.8);
    transition: 0.2s ease-in-out;
}

.net-grid img:hover {
    filter: brightness(1.2);
    border-color: var(--accent);
    transform: scale(1.1);
}

/* --- TACTICAL SCROLLBAR STYLE --- */
.terminal-window::-webkit-scrollbar {
    width: 3px; 
    display: block !important;
}

.terminal-window::-webkit-scrollbar-track {
    background: transparent;
}

.terminal-window::-webkit-scrollbar-thumb {
    background: var(--muted);
}

.terminal-window::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}