/* * Cyber News Agent - Terminal Theme (v14.1 High-Fidelity Responsive Fix)
 * Status: STABLE // ASYNC SYSTEM STATUS // FULL FEATURE RESTORATION
 * * Changelog:
 * 1. Global CRT Scanlines & TV Noise Overlay (Detailed Implementation)
 * 2. Stealth Scrollbars & Custom Layout Wrappers (Verbose Mode)
 * 3. Multi-layer Glitch Animation for Site Title (Enhanced 10% Steps)
 * 4. Asynchronous Header System Status (Fixed):
 * - "SYSTEM:" label forced to pure white (#ffffff).
 * - "Status Light" uses slow organic non-linear breathing (4s cycle).
 * - "ONLINE" text uses high-frequency flicker + micro-jitter (Independent frequency).
 * 5. Intro Animation: Sequential Loading Dots + Double-Blink [CONNECTED] tag.
 * 6. High Contrast Buttons & Micro-Jitter Hover Effects (Kept).
 * 7. Dynamic Watermarks & Detailed Markdown Typography Restoration.
 * 8. Mobile Responsiveness Fix (v14.1):
 * - Added z-index to .site-title to prevent overlap from content masks.
 * - Refined glitch background behavior for better visibility.
 * - Optimized clip-paths and fluid typography.
 */

 :root {
    /* --- Base Colors: Deep Space Foundation --- */
    --bg-color: #050505;
    --terminal-black: #0d1117;
    --text-color: #b0b0b0; 
    
    /* --- Identity Colors: The Matrix Green --- */
    --neon-green: #00ff41; 
    --dim-green: #008f11;
    
    /* [Interface] Standard UI */
    --neon-cyan: #00ff41;  
    --dim-cyan: rgba(0, 255, 65, 0.2);
    
    /* --- Threat Level Colors --- */
    --neon-pink: #ff003c;   /* Critical */
    --neon-orange: #ff9d00; /* High */
    --neon-yellow: #ffee00; /* Medium */
    --neon-blue: #0088ff;   /* Info */

    /* --- Effects --- */
    --font-stack: 'Share Tech Mono', 'Courier New', monospace;
    --scanline-color: rgba(0, 0, 0, 0.5);
    
    /* Base64 Noise for TV Static Effect */
    --noise-bg: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.04'/%3E%3C/svg%3E");
}

/* --- Global Reset & TV Static --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-color);
    background-image: var(--noise-bg); /* ENHANCEMENT 1: Noise */
    color: var(--text-color);
    font-family: var(--font-stack);
    line-height: 1.8;
    font-size: 18px;
    overflow-x: hidden; /* CRITICAL: Prevent horizontal scroll */
    min-height: 100vh;
    text-shadow: none; 
    word-wrap: break-word; /* Mobile Fix: Prevent long strings from breaking layout */
}

/* --- 🔥 1. STEALTH SCROLLBARS (Webkit) 🔥 --- */
::-webkit-scrollbar {
    width: 8px; /* Thin */
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #050505; 
}
::-webkit-scrollbar-thumb {
    background: #333; /* Dark Grey Stealth */
    border-radius: 0px; /* Square/Tech look */
    border: 1px solid #000;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--neon-green); 
    border-color: var(--neon-green);
}

/* Code Block Scrollbars - Even Thinner */
pre::-webkit-scrollbar {
    height: 6px; 
}
pre::-webkit-scrollbar-thumb {
    background: #444; 
}

/* --- 🔥 3. JITTER HOVER EFFECTS (Links & Buttons) 🔥 --- */
@keyframes text-jitter {
    0% { transform: translate(0,0); }
    25% { transform: translate(1px, 1px); }
    50% { transform: translate(-1px, 0); }
    75% { transform: translate(0, -1px); }
    100% { transform: translate(0,0); }
}

a {
    color: var(--neon-green);
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-block; /* Required for transform */
}

a:hover {
    color: #fff;
    /* Digital Noise Gradient instead of solid color */
    background: repeating-linear-gradient(
        45deg,
        rgba(0, 255, 65, 0.1),
        rgba(0, 255, 65, 0.1) 2px,
        rgba(0, 255, 65, 0.2) 2px,
        rgba(0, 255, 65, 0.2) 4px
    );
    box-shadow: 0 0 5px var(--neon-green);
    animation: text-jitter 0.2s infinite; /* Text Shaking */
}

/* --- Visual Effects (Scanlines & Flicker) --- */
.scanlines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 0) 50%,
        rgba(0, 0, 0, 0.2) 50%,
        rgba(0, 0, 0, 0.2)
    );
    background-size: 100% 4px;
    pointer-events: none;
    z-index: 999;
    opacity: 0.4;
}

@keyframes flicker {
    0% { opacity: 0.98; }
    5% { opacity: 0.96; }
    10% { opacity: 0.98; }
    15% { opacity: 0.99; }
    50% { opacity: 0.96; }
    100% { opacity: 0.99; }
}

.terminal-wrapper {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    animation: flicker 0.15s infinite;
}

/* --- 🔥 2. HEADER GLITCH (Maximum Glitch) 🔥 --- */
.site-header {
    border-bottom: 2px solid var(--neon-green);
    padding-bottom: 20px;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    position: relative;
    /* Removed overflow: hidden to allow absolute glitch components to breathe if needed, 
       but keeping it contained via parent wrappers */
}

/* Moving Scanline for Header */
.site-header::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: rgba(0, 255, 65, 0.7);
    animation: header-scan 3s linear infinite;
    opacity: 0.5;
    pointer-events: none;
    z-index: 15; /* Above glitch */
}

@keyframes header-scan {
    0% { top: 0%; }
    100% { top: 100%; }
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; 
    gap: 15px;
    position: relative;
    z-index: 20; /* Ensure header content is above site body */
}

.site-title {
    font-size: clamp(1.6rem, 8vw, 2.5rem); 
    font-weight: bold;
    color: var(--neon-green);
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 0 8px var(--dim-green);
    position: relative;
    z-index: 30; /* Higher priority to prevent being covered */
}

/* New Verbose Animation */
.glitch-wrapper { 
    position: relative; 
    z-index: 30;
}

.glitch::before, .glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-color);
    z-index: -1; /* Layer behind main text but above header background */
}

.glitch::before {
    left: 2px;
    text-shadow: -2px 0 var(--neon-pink);
    clip: rect(24px, 550px, 90px, 0);
    animation: glitch-anim-3 4s infinite linear alternate-reverse;
}

.glitch::after {
    left: -2px;
    text-shadow: -2px 0 var(--neon-green);
    clip: rect(85px, 550px, 140px, 0);
    animation: glitch-anim 2.5s infinite linear alternate-reverse;
}

/* Original Glitch */
@keyframes glitch-anim {
    0% { clip: rect(10px, 9999px, 30px, 0); }
    20% { clip: rect(50px, 9999px, 80px, 0); }
    40% { clip: rect(20px, 9999px, 60px, 0); }
    60% { clip: rect(80px, 9999px, 100px, 0); }
    80% { clip: rect(10px, 9999px, 40px, 0); }
    100% { clip: rect(60px, 9999px, 90px, 0); }
}

/* NEW: Verbose Glitch Animation (10% Steps) */
@keyframes glitch-anim-3 {
    0% { clip: rect(5px, 9999px, 10px, 0); transform: skew(0.5deg); }
    10% { clip: rect(80px, 9999px, 100px, 0); transform: skew(-0.5deg); }
    20% { clip: rect(20px, 9999px, 60px, 0); transform: skew(0.1deg); }
    30% { clip: rect(50px, 9999px, 90px, 0); }
    40% { clip: rect(10px, 9999px, 20px, 0); transform: skew(1deg); }
    50% { clip: rect(70px, 9999px, 75px, 0); }
    60% { clip: rect(30px, 9999px, 40px, 0); transform: skew(-1deg); }
    70% { clip: rect(90px, 9999px, 95px, 0); }
    80% { clip: rect(15px, 9999px, 25px, 0); transform: skew(0.2deg); }
    90% { clip: rect(60px, 9999px, 65px, 0); }
    100% { clip: rect(40px, 9999px, 50px, 0); }
}

/* --- 🔥 UPDATED: HEADER SYSTEM STATUS (FINAL ASYNC FIX) 🔥 --- */
.system-status { 
    font-size: 0.9rem; 
    color: #ffffff !important; 
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 12px;
    letter-spacing: 1px;
    user-select: none;
    flex-shrink: 0;
    z-index: 25;
}

/* 左側狀態燈：4s 慢速非對稱有機呼吸 (非同步頻率) */
.status-light {
    display: inline-block;
    width: 10px; 
    height: 10px;
    background-color: var(--neon-green);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--neon-green);
    animation: light-breathing-organic-v13 4s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
}

@keyframes light-breathing-organic-v13 {
    0%, 100% { opacity: 1; filter: brightness(1.2); transform: scale(1); box-shadow: 0 0 10px var(--neon-green); }
    45% { opacity: 0.2; filter: brightness(0.6); transform: scale(0.9); box-shadow: 0 0 2px var(--neon-green); }
    55% { opacity: 0.2; } 
}

/* 右側 ONLINE 文字：綠色 + 高頻亮度閃爍 + 不規則微顫動 (獨立頻率) */
.system-status .online-text {
    color: var(--neon-green) !important;
    text-shadow: 0 0 5px var(--neon-green);
    display: inline-block;
    animation: 
        header-text-flicker-fx 0.12s infinite alternate,
        header-text-jitter-micro-fx 0.45s infinite !important;
}

/* 亮度振盪：模擬數位顯示器電力輸出不穩 */
@keyframes header-text-flicker-fx {
    0%, 100% { opacity: 1; filter: brightness(1.1); text-shadow: 0 0 12px var(--neon-green); }
    33% { opacity: 0.88; filter: brightness(1); text-shadow: 0 0 6px var(--neon-green); }
    66% { opacity: 0.95; filter: brightness(0.9); text-shadow: 0 0 4px var(--neon-green); }
    80% { opacity: 0.82; }
}

/* 不規則微幅隨機位移 (0.3px 級別) */
@keyframes header-text-jitter-micro-fx {
    0% { transform: translate(0, 0); }
    10% { transform: translate(-0.3px, 0.3px); }
    20% { transform: translate(0.3px, -0.2px); }
    30% { transform: translate(-0.2px, -0.4px); }
    40% { transform: translate(0.4px, 0.2px); }
    50% { transform: translate(-0.4px, 0.1px); }
    60% { transform: translate(0.2px, -0.3px); }
    70% { transform: translate(-0.3px, -0.1px); }
    80% { transform: translate(0.3px, 0.3px); }
    90% { transform: translate(-0.1px, 0.1px); }
    100% { transform: translate(0, 0); }
}

/* --- Navigation --- */
.site-nav { 
    display: flex; 
    gap: 15px; 
    flex-wrap: wrap; 
}

.nav-link {
    font-size: 1.1rem;
    color: var(--text-color);
    border: 1px solid transparent;
    padding: 2px 5px;
    display: inline-block; 
}

.nav-link:hover {
    border-color: var(--neon-green);
    color: var(--neon-green);
    text-shadow: none;
    animation: text-jitter 0.3s infinite;
}

/* --- Content & Typography --- */
.content-container { 
    flex: 1; 
    position: relative;
    z-index: 5; /* Lower than header */
}

.command-line {
    display: flex;
    align-items: baseline;
    margin-bottom: 30px;
    border-bottom: 1px dashed #333;
    padding-bottom: 10px;
    flex-wrap: wrap; 
    position: relative;
    z-index: 5;
}

.prompt {
    color: var(--neon-pink);
    margin-right: 15px;
    font-weight: bold;
    word-break: break-all;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--neon-green);
    text-transform: uppercase;
    margin-bottom: 1rem;
    line-height: 1.3;
    text-shadow: none;
}

h1.page-heading { 
    color: var(--neon-green) !important;
    text-shadow: 0 0 10px var(--neon-green); 
    letter-spacing: 2px;
    font-size: clamp(1.4rem, 6vw, 2.2rem); 
}

h1.post-title {
    text-shadow: none !important; 
    font-weight: 700;
    letter-spacing: 1px;
}

.post-content {
    position: relative; 
    width: 100%;
    overflow-x: hidden; 
}

/* 🔥 4. UPDATED: DYNAMIC WATERMARK SUPPORT (Mobile Fix) 🔥 */
.post-content[data-watermark]::after {
    content: attr(data-watermark);
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, 0) rotate(-30deg);
    font-size: clamp(2rem, 12vw, 5rem); 
    font-weight: 900;
    color: var(--current-severity-color, var(--neon-pink));
    opacity: 0.1;
    pointer-events: none;
    white-space: nowrap;
    border: 5px solid var(--current-severity-color, var(--neon-pink));
    padding: 20px 40px;
    z-index: 0;
    mask-image: linear-gradient(black 50%, transparent 100%);
    max-width: 90vw; 
}

.post-content p {
    color: #b0b0b0; 
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1; 
}

.terminal-output p { 
    margin-bottom: 1.5rem; 
    color: #ccc;
    text-shadow: none;
}

/* --- 🔥 3. ENHANCED CARD HOVER (Scale & Shake) 🔥 --- */
@keyframes card-jitter {
    0% { transform: scale(1.01) translate(0,0); }
    25% { transform: scale(1.01) translate(1px, 1px); }
    50% { transform: scale(1.01) translate(-1px, 0); }
    75% { transform: scale(1.01) translate(0, -1px); }
    100% { transform: scale(1.01) translate(0,0); }
}

ul.post-list {
    list-style: none;
    padding: 0;
}

ul.post-list li, 
.card, 
.post-list-item {
    background: rgba(13, 17, 23, 0.8);
    border: 1px solid var(--dim-cyan);
    border-left: 5px solid var(--neon-green);
    margin-bottom: 20px;
    padding: 20px;
    position: relative;
    transition: all 0.2s cubic-bezier(0, 1.18, 1, 1); 
    clip-path: polygon(
        0 0, 
        100% 0, 
        100% calc(100% - 15px), 
        calc(100% - 15px) 100%, 
        0 100%
    );
}

ul.post-list li:hover, .card:hover {
    border-color: var(--item-color, var(--neon-green)) !important;
    border-left-color: var(--item-color, var(--neon-green)) !important;
    box-shadow: 0 0 15px var(--item-color, rgba(0, 255, 65, 0.2));
    transform: scale(1.01);
    animation: card-jitter 0.3s infinite;
    z-index: 10;
}

ul.post-list li h3 a, .card h3 a {
    color: var(--neon-green);
    font-size: 1.5rem;
    display: inline; 
    background: none !important; 
    box-shadow: none !important;
}

/* --- Code Blocks --- */
pre, code {
    font-family: 'Fira Code', 'Roboto Mono', monospace;
    background-color: #0a0a0a;
    color: #a8ffc3; 
    border: 1px solid #333;
    border-radius: 3px;
}

pre {
    padding: 15px;
    overflow-x: auto;
    margin-bottom: 20px;
    box-shadow: inset 0 0 10px #000;
    max-width: 100%; 
}

code { padding: 2px 5px; }

pre code {
    background-color: transparent;
    padding: 0;
    color: inherit;
    border: none;
    white-space: pre; 
}

blockquote {
    border-left: 4px solid var(--neon-pink);
    background: rgba(255, 0, 60, 0.05);
    padding: 15px;
    margin: 20px 0;
    font-style: italic;
    color: #bbb;
}

/* --- Footer --- */
.site-footer {
    margin-top: 50px;
    border-top: 2px solid var(--neon-green);
    padding-top: 20px;
    font-size: 0.8rem;
    text-align: center;
    color: #666;
}

.ai-credit { margin-top: 5px; letter-spacing: 1px; }

/* --- 🔥 5. TABLES (Transparency & Glare Reduction) 🔥 --- */
html body .post-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background: transparent !important; 
    border: 1px solid #333 !important;
}

html body .post-content th,
html body .post-content td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #333 !important;
}

html body .post-content th {
    background-color: transparent !important; 
    color: var(--current-severity-color, var(--neon-green)) !important;
    border-bottom: 2px solid var(--current-severity-color, var(--neon-green)) !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: none !important;
}

html body .post-content tr:hover {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

.table-wrapper { 
    overflow-x: auto; 
    width: 100%;
    -webkit-overflow-scrolling: touch;
}

/* --- Legal Warning --- */
.legal-warning {
    margin-top: 30px;
    padding: 15px;
    border: 1px dashed var(--neon-pink);
    background-color: rgba(255, 0, 60, 0.05);
    color: #ccc;
    font-size: 0.85rem;
    text-align: left;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.legal-warning strong {
    color: var(--neon-pink);
    border-bottom: 1px solid var(--neon-pink);
}

/* --- 🔥 5. UPDATED: BUTTON COMPATIBILITY (Return to Base Fix) 🔥 --- */
.return-btn {
    display: inline-block;
    padding: 12px 30px;
    border: 1px solid var(--btn-color, var(--neon-green));
    color: var(--btn-color, var(--neon-green));
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: monospace;
    transition: all 0.2s;
    background: transparent;
    margin-top: 20px;
    text-align: center; 
}

.return-btn:hover {
    background: var(--btn-color, var(--neon-green)) !important;
    color: #000 !important; 
    box-shadow: 0 0 20px var(--btn-color, var(--neon-green));
    text-shadow: none;
    border-color: var(--btn-color, var(--neon-green));
}

/* --- 🔥 6. SUPPORT FOR INTRO ANIMATIONS 🔥 --- */

/* 終端機打字效果：游標 */
.typing-cursor::after {
    content: '█';
    animation: cursor-blink-stepped-v13 1s infinite;
    color: var(--neon-green);
    margin-left: 8px;
    font-size: 0.9em;
    vertical-align: middle;
}
@keyframes cursor-blink-stepped-v13 { 
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* 逐點加載動畫邏輯修正：. -> .. -> ... 並停留 */
@keyframes dots-progression-stepped-v13 {
    0% { content: "."; }
    33% { content: ".."; }
    66%, 100% { content: "..."; }
}
.loading-dots::after {
    content: "";
    display: inline-block;
    width: 30px;
    text-align: left;
    animation: dots-progression-stepped-v13 1.5s infinite steps(1);
}

/* 🔥 [CONNECTED] 標籤：雙次閃爍登場 + 非同步心跳脈動 🔥 */
.term-connected {
    color: var(--neon-green);
    font-weight: bold;
    text-shadow: 0 0 10px var(--neon-green);
    display: inline-block;
    opacity: 0;
    animation: connected-appear-fx 0.1s forwards 3s, connected-heartbeat-v13 3.5s infinite 3.1s;
}

@keyframes connected-appear-fx { 
    to { opacity: 1; } 
}

@keyframes connected-heartbeat-v13 {
    0%, 10%, 20% { opacity: 1; text-shadow: 0 0 25px var(--neon-green); transform: scale(1); }
    5%, 15% { opacity: 0; text-shadow: none; }
    45% { opacity: 0.5; text-shadow: 0 0 5px var(--neon-green); transform: scale(0.98); }
    55% { opacity: 1; text-shadow: 0 0 30px var(--neon-green); transform: scale(1.03); }
    100% { opacity: 1; text-shadow: 0 0 15px var(--neon-green); transform: scale(1); }
}

/* --- 🔥 7. MOBILE RESPONSIVE OVERRIDES (Comprehensive) 🔥 --- */
@media (max-width: 768px) {
    .site-title { font-size: 1.8rem; letter-spacing: 1px; z-index: 50; }
    .header-inner { flex-direction: column; align-items: flex-start; gap: 15px; }
    .system-status { 
        width: 100%; 
        justify-content: flex-start; 
        font-size: 0.8rem; 
        border-top: 1px solid #333;
        padding-top: 10px;
        z-index: 40;
    }
    .site-nav { gap: 10px; }
    .nav-link { font-size: 0.95rem; }
    .command-line { 
        flex-direction: column; 
        border-bottom: none; 
        margin-top: 10px; 
        z-index: 10;
    }
    .prompt { margin-bottom: 10px; font-size: 0.9rem; }
    
    /* 修正手機版 Glitch 層位移與覆蓋問題 */
    .glitch::before, .glitch::after {
        clip: rect(0, 0, 0, 0); 
        display: none; /* 在手機端完全隱藏 Glitch 裝飾層，避免遮擋站名 */
    }

    ul.post-list li, .card {
        padding: 15px;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
    }

    .post-content[data-watermark]::after {
        font-size: 2.5rem;
        border-width: 3px;
        padding: 10px 20px;
        opacity: 0.05;
        top: 10%;
    }

    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* 極小螢幕 (iPhone SE 等) 特殊修正 */
@media (max-width: 360px) {
    .site-title { font-size: 1.4rem; }
    .nav-link { font-size: 0.85rem; padding: 2px 4px; }
}

/* [EOF - End of Full 600+ Line Restoration with v14.1 Fixes] */