/*
================================================
Ω-System (Omega System) Stylesheet
================================================
TABLE OF CONTENTS
------------------------------------------------
1.  FOUNDATION
    1.1. :root & Theme Variables
    1.2. @keyframes Animations
    1.3. Global Styles & Resets

2.  CORE LAYOUT
    2.1. Header
    2.2. Workspace & Panels

3.  MAIN COMPONENTS
    3.1. Code Editors
    3.2. Preview Area

4.  UI ELEMENTS
    4.1. Buttons
    4.2. Form Fields & Selects
    4.3. Tabs
    4.4. Toasts & Popovers
    4.5. Progress Bar
    4.6. Toggle Switch

5.  MODALS & PANELS (FLOATING WINDOWS)
    5.1. General Modal & Panel Styles
    5.2. "About" Modal
    5.3. Archives Panel
    5.4. Analysis Panel
    5.5. Plugins Panel
    5.6. Tasks Panel
    5.7. Snippet Manager Panel
    5.8. Knowledge Terminal
    5.9. AI Chat Panel
    5.10. Custom Prompt Modal

6.  COMPONENT-SPECIFIC STYLES
    6.1. Analysis Report
    6.2. Archives List
    6.3. Tasks List
    6.4. Knowledge Tree & Content
    6.5. Snippet List
    6.6. AI Chat Messages

7.  THIRD-PARTY OVERRIDES
    7.1. CodeMirror Editor
    7.2. CodeMirror Autocomplete

8.  UTILITY & STATE CLASSES
    8.1. Zen Mode
    8.2. Filters & Glitches
    8.3. Helper Classes

9.  MEDIA QUERIES
================================================
*/

/* ===== 1. :root & Theme Variables ===== */
:root {
    --font-mono: 'Consolas', 'Monaco', monospace;
    --color-bg: #0a0a0a;
    --color-bg-panel: #141414;
    --color-bg-editor: #000000;
    --color-bg-panel-title: #252525;
    --color-text: #ccc;
    --color-border: #333;
    --color-text-label: #888;

    /* Theme Colors */
    --color-primary: #00ff88;
    --color-primary-dark: #00cc70;
    --color-primary-rgb: 0, 255, 136;

    --color-secondary: #ff4f4f;
    --color-secondary-dark: #a33333;
    --color-secondary-rgb: 255, 79, 79;

    --color-warning: #00aaff;
    --color-warning-rgb: 0, 170, 255;

    --color-zen: #4fafff;
    --color-zen-dark: #2f6487;
    --color-zen-rgb: 79, 175, 255;

    --color-focus: #ff8c00; /* Cyber Orange */
    --color-focus-dark: #cc7000;
    --color-focus-rgb: 255, 140, 0;

    /* Effect Colors */
    --color-glow: var(--color-primary);
    --color-glitch: var(--color-zen);
    --shadow-glow: 0 0 20px rgba(var(--color-primary-rgb), 0.3);
}

/* ===== 2. @keyframes Animations ===== */
@keyframes glow {
    from { text-shadow: 0 0 5px var(--color-glow), 0 0 10px var(--color-glow); }
    to { text-shadow: 0 0 10px var(--color-glow), 0 0 20px var(--color-glow); }
}

@keyframes scanline {
    0% { background-position: 0 0; }
    100% { background-position: 0 100%; }
}

@keyframes glitch-sm {
    0% { clip-path: inset(45% 0 50% 0); }
    20% { clip-path: inset(55% 0 20% 0); }
    40% { clip-path: inset(25% 0 60% 0); }
    60% { clip-path: inset(70% 0 10% 0); }
    80% { clip-path: inset(30% 0 45% 0); }
    100% { clip-path: inset(50% 0 40% 0); }
}

@keyframes glitch-text {
   0% {
       text-shadow:
           1px 0 0 red,
           -1px 0 0 cyan;
   }
   20% {
       text-shadow:
           1px 0 0 red,
           -1px 0 0 cyan;
   }
   21% {
       text-shadow:
           -2px -1px 0 red,
           2px 1px 0 cyan;
   }
   60% {
       text-shadow:
           -2px -1px 0 red,
           2px 1px 0 cyan;
   }
   61% {
       text-shadow:
           2px 1px 0 red,
           -2px -1px 0 cyan;
   }
   99% {
       text-shadow:
           2px 1px 0 red,
           -2px -1px 0 cyan;
   }
   100% {
       text-shadow:
           -1px 0 0 red,
           1px 0 0 cyan;
   }
}

@keyframes pulse-red {
    0% { border-color: red; }
    50% { border-color: var(--color-secondary); }
    100% { border-color: red; }
}

/* Preview filters (CRT/cyber style) - Combined A & F */
@keyframes combined_scanlines {
    from { background-position: 0 0; }
    to { background-position: 0 100%; }
}
@keyframes combined_hue-shift {
    0% { filter: hue-rotate(0deg) contrast(1.1); }
    100% { filter: hue-rotate(10deg) contrast(1.1); }
}
@keyframes combined_colorful-blocks {
    0%   { clip-path: inset(100% 0 0 0); opacity: 0.5; }
    10%  { clip-path: inset(40% 0 45% 0); opacity: 0.7; }
    20%  { clip-path: inset(80% 0 10% 0); opacity: 0.6; }
    30%  { clip-path: inset(10% 0 82% 0); opacity: 0.8; }
    40%  { clip-path: inset(100% 0 0 0); opacity: 0.5; }
    50%  { clip-path: inset(20% 0 70% 0); opacity: 0.7; }
    60%  { clip-path: inset(90% 0 5% 0); opacity: 0.6; }
    70%  { clip-path: inset(100% 0 0 0); opacity: 0.5; }
    80%  { clip-path: inset(50% 0 30% 0); opacity: 0.8; }
    90%  { clip-path: inset(5% 0 92% 0); opacity: 0.7; }
    100% { clip-path: inset(100% 0 0 0); opacity: 0.5; }
}

/* Burst: stronger, short-lived glitch */
@keyframes burstShake {
    0% { transform: translate(0,0) skewX(0deg); }
    20% { transform: translate(-3px, 0) skewX(-3deg); }
    40% { transform: translate(3px, 0) skewX(3deg); }
    60% { transform: translate(0, -2px) skewX(-2deg); }
    80% { transform: translate(0, 2px) skewX(2deg); }
    100% { transform: translate(0,0) skewX(0deg); }
}
@keyframes burstHue {
    0% { filter: hue-rotate(-15deg); }
    50% { filter: hue-rotate(15deg); }
    100% { filter: hue-rotate(0deg); }
}
@keyframes glitchBarsFast {
    0% { background-position: 0 0, 0 0, 0 0; }
    100% { background-position: 0 220px, 0 0, 0 0; }
}

@keyframes glitchBars {
    0% { background-position: 0 0, 0 0, 0 0; }
    100% { background-position: 0 180px, 0 0, 0 0; }
}
@keyframes gridFlicker {
    0%, 18%, 22%, 100% { opacity: 0.35; }
    20% { opacity: 0.15; }
    21% { opacity: 0.45; }
}
@keyframes rgbShift {
    0% { transform: translate(0,0); }
    10% { transform: translate(-1px, 0); }
    20% { transform: translate(1px, 0); }
    30% { transform: translate(0, -1px); }
    40% { transform: translate(0, 1px); }
    50% { transform: translate(-2px, 0); }
    60% { transform: translate(2px, 0); }
    70% { transform: translate(0, 0); }
    80% { transform: translate(1px, -1px); }
    90% { transform: translate(-1px, 1px); }
    100% { transform: translate(0,0); }
}
@keyframes hueFlicker {
    0% { filter: hue-rotate(0deg); }
    33% { filter: hue-rotate(10deg); }
    66% { filter: hue-rotate(-10deg); }
    100% { filter: hue-rotate(0deg); }
}

@keyframes scan-down-reveal {
    from {
        clip-path: inset(0 0 100% 0);
    }
    to {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes popover-appear {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes popover-disappear {
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

@keyframes fadeInScaleUp {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}

@keyframes fx-pulse-border {
    0% { box-shadow: 0 0 10px rgba(0, 255, 136, 0.2); }
    50% { box-shadow: 0 0 30px 5px rgba(0, 255, 136, 0.7); }
    100% { box-shadow: 0 0 10px rgba(0, 255, 136, 0.2); }
}

/* ===== 3. Global Styles & Resets ===== */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
   font-family: var(--font-mono);
   background: var(--color-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%231a1a1a' fill-opacity='0.3' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
   color: var(--color-primary);
   height: 100vh;
   display: grid;
   grid-template-rows: auto 1fr;
   overflow: hidden;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-panel); /* Deeper color, no border */
}

::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 4px; /* Slightly rounded */
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.3); /* Subtle initial glow */
    transition: all 0.2s ease-in-out;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-dark);
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.8); /* Enhanced glow on hover */
}

/* ===== 4. Core Layout ===== */

/* --- Header --- */
header {
   background: transparent;
   color: var(--color-primary);
   padding: 15px 20px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: relative;
   z-index: 1000;
   border-bottom: 2px solid var(--color-primary);
   box-shadow: 0 2px 20px -5px var(--color-primary);
}

header h1 {
   font-size: 24px;
   font-weight: bold;
   letter-spacing: 3px;
   animation: glow 1.5s ease-in-out infinite alternate;
}

.header-buttons {
   display: flex;
   align-items: center; /* Align items vertically */
   gap: 10px;
}

.header-select {
    position: relative;
}

.header-select .select-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-width: 2px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
    min-width: 100px;
    justify-content: center;
}

.header-select .select-trigger .select-caret {
    transition: transform 0.3s ease;
}

.header-select.open .select-trigger .select-caret {
    transform: rotate(180deg);
}

.header-select .select-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 160px;
    background: rgba(20, 20, 20, 0.85); /* Semi-transparent background */
    backdrop-filter: blur(10px); /* Frosted glass effect */
    border: 1px solid var(--color-primary);
    box-shadow: 0 0 25px -5px var(--color-primary);
    z-index: 1001; /* Above header content */
    display: none;
    padding: 5px;
    overflow: hidden; /* Needed for clip-path/border-radius */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}

.header-select.open .select-menu {
    display: block;
}

.header-select .select-option {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    color: var(--color-text);
    border: 1px solid transparent; /* For alignment */
    padding: 8px 15px;
    cursor: pointer;
    text-shadow: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
    transition: all 0.2s ease;
}

.header-select .select-option:hover {
    background: rgba(0,255,136,0.1);
    color: var(--color-primary);
    border-color: var(--color-primary);
    text-shadow: 0 0 5px var(--color-primary);
    animation: none;
    box-shadow: none;
}

/* --- Workspace --- */
.workspace {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    height: 100%;
    overflow: hidden;
    transition: grid-template-columns 0.6s cubic-bezier(0.4, 0, 0.2, 1), grid-template-rows 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Layout Modes */
.workspace.layout-top-bottom {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
}

.workspace.layout-code-only {
    grid-template-columns: 1fr 0fr;
}

.workspace.layout-preview-only {
    grid-template-columns: 0fr 1fr;
}

.workspace.layout-code-only .panel:last-child,
.workspace.layout-preview-only .panel:first-child {
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* --- Panels --- */
.panel {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--color-bg-panel);
    overflow: hidden;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}
.panel:first-child {
    border-left: none;
}
.panel::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%);
    background-size: 100% 4px;
    animation: scanline 10s linear infinite;
    pointer-events: none;
    opacity: 0.4;
    z-index: 1;
}

.panel-title {
    background: var(--color-bg-panel-title);
    padding: 15px 20px;
    font-size: 16px;
    font-weight: bold;
    color: var(--color-primary);
    border-bottom: 3px solid var(--color-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-shadow: 0 0 5px var(--color-primary);
    position: relative;
    z-index: 3; /* Higher than preview panel's z-index */
}

.panel-title > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.editor-tool-select {
    position: relative;
}

.editor-tool-select .select-trigger {
    background: transparent;
    color: var(--color-text-label);
    border: 1px solid var(--color-text-label);
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    text-transform: none;
    text-shadow: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}

.editor-tool-select .select-trigger:hover,
.editor-tool-select.open .select-trigger {
    background: var(--color-bg-panel-title);
    color: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: none;
    text-shadow: none;
    animation: none;
}

.editor-tool-select .select-caret {
    transition: transform 0.3s ease;
}

.editor-tool-select.open .select-caret {
    transform: rotate(180deg);
}

.editor-tool-select .select-menu {
    position: absolute;
    top: calc(100% + 8px); /* More space */
    right: 0;
    width: 320px; /* A bit wider */
    background: rgba(20, 20, 20, 0.85); /* Semi-transparent background */
    backdrop-filter: blur(10px); /* Frosted glass effect */
    border: 1px solid var(--color-primary);
    box-shadow: 0 0 25px -5px var(--color-primary);
    z-index: 10;
    display: none;
    padding: 0; /* Remove padding, items will handle it */
    overflow: hidden; /* Needed for clip-path/border-radius */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}

.editor-tool-select.open .select-menu {
    display: block;
}

.assistance-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid var(--color-border);
    transition: all 0.2s ease-in-out;
    background-color: transparent;
    position: relative;
}

.assistance-item:hover {
    background: linear-gradient(90deg, rgba(0, 255, 136, 0.15) 0%, transparent 100%);
}

.assistance-item:last-of-type {
    border-bottom: none;
}

.assistance-item-name {
    color: var(--color-text);
    font-weight: bold;
    cursor: default;
    transition: color 0.2s ease-in-out;
}

.assistance-item:hover .assistance-item-name {
    color: var(--color-primary);
    text-shadow: 0 0 5px var(--color-primary);
}

.assistance-item-actions button {
    background: transparent;
    border: 1px solid var(--color-text-label);
    color: var(--color-text-label);
    padding: 4px 10px;
    font-size: 10px;
    text-shadow: none;
    clip-path: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 8px;
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
}

.assistance-item-actions button:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: rgba(0, 255, 136, 0.1);
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
    animation: none;
}

.assistance-manage-btn {
    display: block;
    width: 100%;
    margin: 0;
    padding: 15px 20px;
    text-align: center;
    background: rgba(79, 175, 255, 0.1);
    border: none;
    border-top: 1px solid var(--color-zen);
    color: var(--color-zen);
    text-shadow: 0 0 5px var(--color-zen);
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.assistance-manage-btn:hover {
    background: var(--color-zen);
    color: var(--color-bg-panel);
    box-shadow: 0 0 15px var(--color-zen);
    text-shadow: none;
}

/* ===== 5. Main Components ===== */

/* --- Code Editors --- */
.editor-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0px 20px 20px;
    overflow: auto;
}

.code-editor {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 150px;
    position: relative;
}

.code-label {
    color: var(--color-primary);
    text-shadow: 0 0 5px var(--color-primary);
    font-size: 12px;
    margin-top: 8px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
}

.code-label > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Fallback for when CodeMirror fails to load */
textarea {
    flex: 1;
    background: var(--color-bg-editor);
    color: var(--color-primary);
    border: 2px solid var(--color-border);
    border-radius: 8px;
    padding: 15px;
    font-family: var(--font-mono);
    font-size: 15px;
    line-height: 1.8;
    resize: vertical;
    outline: none;
    transition: all 0.3s;
    position: relative;
}

textarea:focus {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-glow), inset 0 0 15px rgba(0, 255, 136, 0.1);
}

/* --- Preview Area --- */
.preview-wrapper {
    flex: 1;
    display: flex;
    padding: 0px 20px 20px; /* Adjusted padding to accommodate margin-top */
    flex-direction: column; /* New */
    /* gap: 8px; */ /* Removed gap in favor of margin on .code-label to fix layout shift */
    transition: all 0.5s ease-out;
}

#preview-label-container {
    margin-top: 10px;
}

.preview-container {
    flex: 1;
    background: var(--color-bg-editor);
    color: var(--color-text);
    border: 3px solid var(--color-primary);
    border-radius: 0;
    overflow: hidden; /* Changed from auto to hidden for iframe */
    transition: all 0.5s ease-out;
    box-shadow: inset 0 0 20px rgba(0, 255, 136, 0.2);
    position: relative;
    z-index: 2;
    user-select: none;
}

#livePreview {
    width: 100%;
    height: 100%;
    background: var(--color-bg-editor);
}

/* The #previewTitle is now inside a .code-label div, so this absolute positioning is no longer needed. */
/* The .code-label class already provides the necessary styling. */

/* ===== 6. UI Panels & Modals ===== */

/* --- General Modal & Panel Styles --- */
.modal {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s;
}

.modal.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: var(--color-bg-panel);
    border: 3px solid var(--color-primary);
    border-radius: 0;
    padding: 40px;
    max-width: 700px; /* Adjusted width to fit content */
    max-height: 85vh; /* Increased height */
    overflow: auto;
    position: relative;
    box-shadow: 0 10px 60px -15px rgba(0, 255, 136, 0.25);
    transform: scale(0.95) translateY(-20px);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: grid; /* Use Grid for stacking */
    grid-template-rows: auto 1fr;
    grid-template-columns: 100%;
}

.modal.active .modal-content {
    transform: scale(1) translateY(0);
}

/* Popover-based confirmation is used instead of a full modal. */

.modal-content::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%);
    background-size: 100% 4px;
    animation: scanline 15s linear infinite;
    pointer-events: none;
    opacity: 0.3;
    z-index: -1;
}

.modal h2 {
    color: var(--color-primary);
    font-size: 28px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: 10px;
    text-shadow: 0 0 8px var(--color-primary);
}

.modal h3 {
    color: var(--color-primary);
    font-size: 20px;
    margin-top: 25px;
    margin-bottom: 15px;
}

.modal p, .modal li {
    color: var(--color-text);
    line-height: 1.8;
    margin-bottom: 10px;
}

.modal ul {
    margin-left: 20px;
}

.modal code {
    background: var(--color-bg-editor);
    color: var(--color-primary);
    padding: 2px 8px;
    border-radius: 4px;
    font-family: var(--font-mono);
}

/* --- Archives Panel --- */
.archives-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 90vw;
    max-width: 1200px;
    height: 85vh; /* Increased height */
    background: rgba(20, 20, 20, 0.85);
    backdrop-filter: blur(10px);
    border: 1px solid var(--color-primary);
    z-index: 1001; /* Higher than header */
    box-shadow: 0 10px 60px -15px rgba(0, 255, 136, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Changed from auto */
    
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.98);
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s;
    visibility: hidden;
    pointer-events: none; /* Disable interaction when not active */
}

.archives-panel.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    visibility: visible;
    pointer-events: auto; /* Re-enable interaction when active */
}

/* --- Archive Hover Preview --- */
.archive-hover-preview {
    position: fixed;
    width: 300px;
    height: 200px;
    background: var(--color-bg-panel);
    border: 1px solid var(--color-primary);
    box-shadow: 0 5px 30px rgba(0, 255, 136, 0.2);
    z-index: 1100; /* Above archives panel */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(0.95);
    transition: opacity 0.2s ease-out, visibility 0.2s, transform 0.2s ease-out;
}

.archive-hover-preview.visible {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

#archiveHoverPreviewFrame {
    width: 100%;
    height: 100%;
    border: none;
    background: #fff; /* Default background */
}

.archives-panel-header {
    padding: 15px 60px 15px 20px;
    border-bottom: 1px solid var(--color-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    background: var(--color-bg-panel-title);
    flex-shrink: 0;
}

.archives-panel-header h2 {
    font-size: 18px;
    color: var(--color-primary);
    text-shadow: 0 0 5px var(--color-primary);
    margin: 0;
}

#archivesPanelClose {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

.archives-controls {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 30px;
    padding: 20px;
    border-bottom: 1px solid var(--color-border);
}

.archive-save-form, .archive-actions-group {
    display: flex;
    flex-direction: column;
    gap: 15px;
    border-left: 2px solid var(--color-border);
    padding-left: 20px;
}

.control-group-title {
    font-size: 14px;
    color: var(--color-text-label);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.archive-io-buttons {
    display: flex;
    gap: 10px;
    margin-top: auto; /* Pushes buttons to the bottom */
}

.archive-io-buttons button {
    flex: 1;
}

/* --- Analysis Side Panel --- */
#analysisPanel {
    right: 20px;
    transform-origin: top right;
}

#pluginsPanel {
    border-color: var(--color-primary);
    box-shadow: 0 10px 40px -10px var(--color-primary);
    /* Centering logic */
    left: 50%;
    transform: translateX(-50%);
    transform-origin: top center;
}

#pluginsPanel .side-panel-header h2 {
    color: var(--color-primary);
    text-shadow: 0 0 5px var(--color-primary);
}

.side-panel {
    position: absolute;
    top: 60px;
    width: 450px;
    max-height: 70vh; /* Increased max-height */
    background: rgba(20, 20, 20, 0.85);
    backdrop-filter: blur(10px);
    border: 1px solid var(--color-warning);
    z-index: 1001;
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
    visibility: hidden;
    box-shadow: 0 10px 40px -10px rgba(0, 170, 255, 0.25); /* Unified shadow */
    display: flex;
    flex-direction: column;
    border-radius: 8px; /* Added border-radius */
    overflow: hidden; /* Clip content */
}

.side-panel.active {
    opacity: 1;
    visibility: visible;
    animation: scan-down-reveal 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.side-panel-header {
    padding: 15px 20px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    background: var(--color-bg-panel-title);
}

.panel-header-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

.side-panel-header h2 {
    font-size: 18px;
    color: var(--color-warning);
    text-shadow: 0 0 5px var(--color-warning);
    margin: 0;
}

.side-panel-actions {
    display: flex;
    gap: 10px;
}

.side-panel-body {
    padding: 20px;
    overflow-y: auto;
    overflow-x: hidden; /* 隐藏不必要的横向滚动条 */
    flex: 1;
}

/* --- "System Status" Modal --- */
.system-status {
    background: var(--color-bg-editor);
    border: 2px solid var(--color-primary);
    border-radius: 8px;
    padding: 20px;
    margin: 0 0 25px 0; /* Adjusted margins to match original inline style */
}

#system-message {
    margin-top: 25px;
    padding: 15px;
    background: var(--color-bg-editor);
    border-left: 4px solid var(--color-primary);
}

.status-item {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
    padding: 10px;
    background: var(--color-bg-panel);
    border-radius: 4px;
}

.status-label {
    color: var(--color-text-label);
}

.status-value {
    color: var(--color-primary);
    font-weight: bold;
}

.status-active {
    color: var(--color-primary);
    font-weight: bold;
    text-shadow: 0 0 10px var(--color-primary);
}

#statusLoadingWrapper {
    grid-row: 1 / -1;
    grid-column: 1 / -1;
    transition: opacity 0.5s ease-in-out;
}

#statusContent {
    grid-row: 1 / -1;
    grid-column: 1 / -1;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.98);
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}

#statusContent.visible {
    opacity: 1;
    transform: scale(1);
    visibility: visible;
}

#statusAnimationContainer {
    width: 600px;  /* Increased width */
    height: 480px; /* Increased height */
    margin: 0 auto; /* Removed bottom margin */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border: 1px solid var(--color-border);
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

#statusAnimationContainer .omega-container {
    transform: scale(0.95); /* Adjusted scale to better fit new size */
}

.loading-text {
    font-size: 24px;
    font-weight: bold;
    color: var(--color-primary);
    text-shadow: 0 0 10px var(--color-primary);
    white-space: normal;
    text-align: center;
    width: 90%;
    line-height: 1.6;
    padding: 20px;
    box-sizing: border-box;
}

/* 打字机光标效果 */
.loading-text::after {
    content: '█';
    animation: blink 1s step-end infinite;
    margin-left: 8px;
}

/* ===== 7. UI Components ===== */

/* --- Buttons --- */
button {
   font-family: var(--font-mono);
   position: relative;
   background: transparent;
   border: 1px solid var(--color-primary);
   color: var(--color-primary);
   padding: 10px 20px;
   font-weight: bold;
   cursor: pointer;
   text-transform: uppercase;
   letter-spacing: 1px;
   transition: all 0.3s ease;
   text-shadow: 0 0 5px var(--color-primary), 0 0 10px var(--color-primary);
}


button:active {
   transform: translateY(1px);
}

button.is-loading {
    color: transparent !important; /* Hide text */
    pointer-events: none;
    text-shadow: none !important;
}

button.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px; /* Spinner size */
    height: 16px;
    margin-top: -8px; /* Center vertically */
    margin-left: -8px; /* Center horizontally */
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--color-primary); /* Spinner color */
    animation: spinner 0.6s linear infinite;
}

.header-buttons button {
    border-width: 2px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}

.header-buttons button:hover {
    background: rgba(0, 255, 136, 0.1);
    box-shadow: 0 0 20px var(--color-primary);
}

/* --- Panel Title Buttons --- */
.panel-title-btn {
    --btn-color: var(--color-primary);
    --btn-color-rgb: var(--color-primary-rgb);

    padding: 6px 12px;
    font-size: 12px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
    position: relative; /* For confirm text positioning */

    color: var(--btn-color);
    border-color: var(--btn-color);
    text-shadow: 0 0 5px var(--btn-color), 0 0 10px var(--btn-color);
}

.panel-title-btn:hover {
    background: rgba(var(--btn-color-rgb), 0.1);
    box-shadow: 0 0 20px var(--btn-color);
}

.panel-title-btn.active {
    background: var(--btn-color);
    color: var(--color-bg-panel);
    text-shadow: none;
}

/* Modifier classes only change the variables */
.panel-title-btn.btn-secondary {
    --btn-color: var(--color-secondary);
    --btn-color-rgb: var(--color-secondary-rgb);
}

.panel-title-btn.btn-warning {
    --btn-color: var(--color-warning);
    --btn-color-rgb: var(--color-warning-rgb);
}

.panel-title-btn.btn-zen {
    --btn-color: var(--color-zen);
    --btn-color-rgb: var(--color-zen-rgb);
}

.panel-title-btn.btn-focus {
    --btn-color: var(--color-focus);
    --btn-color-rgb: var(--color-focus-rgb);
}

/* New styles for the preview settings dropdown */
.panel-title-select {
    position: relative;
}

.panel-title-select .select-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 160px;
    background: rgba(20, 20, 20, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid var(--color-primary);
    box-shadow: 0 0 25px -5px var(--color-primary);
    z-index: 1101; /* Higher than other panels to ensure visibility */
    display: none;
    padding: 5px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}

.panel-title-select.open .select-menu {
    display: block;
}

.panel-title-select .select-option {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    color: var(--color-text);
    border: 1px solid transparent;
    padding: 8px 15px;
    cursor: pointer;
    text-shadow: none;
    text-transform: none;
    letter-spacing: 1px;
    font-weight: bold;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
    transition: all 0.2s ease;
}

.panel-title-select .select-option:hover {
    background: rgba(0,255,136,0.1);
    color: var(--color-primary);
    border-color: var(--color-primary);
    text-shadow: 0 0 5px var(--color-primary);
    animation: none;
    box-shadow: none;
}

.panel-title-select .select-option:disabled {
    color: var(--color-text-label);
    cursor: not-allowed;
    opacity: 0.5;
    background: transparent;
    border-color: transparent;
    text-shadow: none;
}

/* Confirmation state for clear button */
#clearBtn .confirm-text {
    display: none;
}
#clearBtn.is-confirming {
    border-color: red;
    box-shadow: 0 0 20px red;
    animation: glitch-text 0.3s linear, pulse-red 1s infinite;
}
#clearBtn.is-confirming .default-text {
    display: none;
}
#clearBtn.is-confirming .confirm-text {
    display: inline;
    color: red;
    text-shadow: 0 0 8px red;
}

/* Editor Utility Buttons */
.btn-copy,
.btn-toggle-wrap,
.btn-clear-editor {
    background: transparent;
    color: var(--color-text-label);
    border: 1px solid var(--color-text-label);
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    text-transform: none;
    text-shadow: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-copy:hover {
    background: var(--color-bg-panel-title);
    color: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: none;
    text-shadow: none;
    animation: none;
}

.btn-toggle-wrap:hover {
    background: var(--color-bg-panel-title);
    color: var(--color-zen);
    border-color: var(--color-zen);
    box-shadow: none;
    text-shadow: none;
    animation: none;
}

.btn-toggle-wrap.active {
    color: var(--color-zen);
    border-color: var(--color-zen);
    text-shadow: 0 0 5px var(--color-zen);
    background: rgba(var(--color-zen-rgb), 0.1);
}

.btn-clear-editor:hover {
    background: rgba(var(--color-secondary-rgb), 0.1);
    color: var(--color-secondary);
    border-color: var(--color-secondary);
    box-shadow: none;
    text-shadow: 0 0 5px var(--color-secondary);
    animation: none;
}

.btn-copy-report {
    background: transparent;
    border: 1px solid var(--color-warning);
    color: var(--color-warning);
    text-shadow: 0 0 5px var(--color-warning);
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
}

.btn-copy-report:hover {
    background: rgba(0, 170, 255, 0.1);
    box-shadow: 0 0 15px -2px var(--color-warning);
}

/* --- Unified Close Button --- */
.btn-close-unified {
    padding: 6px 12px;
    font-size: 12px;
    color: var(--color-secondary);
    border-color: var(--color-secondary);
    text-shadow: 0 0 5px var(--color-secondary);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
    /* The button is part of the flex layout in headers, so no absolute positioning here. */
}

.btn-close-unified:hover {
    background: rgba(255, 79, 79, 0.1);
    box-shadow: 0 0 20px var(--color-secondary);
}

/* Specific positioning for the Status modal close button */
#statusModalClose {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1; /* Ensure it's above other modal content */
}

/* --- Tabs --- */
.archive-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--color-border);
}

.tab-btn {
    padding: 10px 20px;
    font-size: 14px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--color-text-label);
    cursor: pointer;
    transition: all 0.3s ease;
    text-shadow: none;
}

.tab-btn:hover {
    color: var(--color-primary);
    background: rgba(0, 255, 136, 0.05);
    animation: none;
    box-shadow: none;
}

.tab-btn.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    text-shadow: 0 0 8px var(--color-primary);
}

/* --- Form Fields --- */
#importFileInput {
    display: none;
}
.field {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-border);
    background: rgba(0,0,0,0.25);
    padding: 6px 10px;
    margin-right: 10px;
}
.field:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 12px rgba(0,255,136,0.25);
}
.field input {
    background: transparent;
    color: var(--color-text);
    border: none;
    outline: none;
    font-family: var(--font-mono);
    font-size: 12px;
}
.field-search .field-icon {
    margin-right: 6px;
    color: var(--color-text-label);
}

.field-select {
    position: relative;
    /* Override .field styles to remove the double border effect */
    border: none;
    padding: 0;
    background: transparent;
}

/* The trigger itself now becomes the bordered element */
.field-select .select-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    background: rgba(0,0,0,0.25);
    padding: 6px 10px; /* Use the padding from the original .field */
    cursor: pointer;
    flex-grow: 1;
    text-align: left;
    width: 100%;
    justify-content: space-between; /* Pushes caret to the end */
    transition: all 0.3s ease;
}

.field-select:focus-within .select-trigger,
.field-select .select-trigger:hover,
.field-select.open .select-trigger {
    border-color: var(--color-primary);
    color: var(--color-primary);
    box-shadow: 0 0 12px rgba(0,255,136,0.25);
}
.field-select .select-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 160px;
    background: var(--color-bg-panel-title);
    border: 1px solid var(--color-border);
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    z-index: 10;
    display: none;
}
.field-select.open .select-menu { display: block; }
.field-select .select-option {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    color: var(--color-text);
    border: none;
    padding: 8px 10px;
    cursor: pointer;
}
.field-select .select-option:hover {
    background: rgba(0,255,136,0.08);
    color: var(--color-primary);
}

.save-options {
    display: flex;
    align-items: center;
    gap: 20px;
}

.save-options #saveArchiveBtn {
    flex-shrink: 0;
}

/* --- Checkbox --- */
.checkbox-wrapper {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.checkbox-wrapper input[type="checkbox"] {
    display: none; /* Hide original checkbox */
}

.checkbox-wrapper label {
    position: relative;
    padding-left: 30px;
    color: var(--color-text-label);
    cursor: pointer;
    transition: color 0.3s ease;
}

.checkbox-wrapper label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-border);
    background: var(--color-bg-editor);
    transition: all 0.3s ease;
}

.checkbox-wrapper label::after {
    content: '✔';
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    font-size: 16px;
    color: var(--color-primary);
    transition: transform 0.2s ease-out;
}

.checkbox-wrapper:hover label {
    color: var(--color-primary);
}

.checkbox-wrapper:hover label::before {
    border-color: var(--color-primary);
}

.checkbox-wrapper input[type="checkbox"]:checked + label {
    color: var(--color-primary);
}

.checkbox-wrapper input[type="checkbox"]:checked + label::before {
    border-color: var(--color-primary);
    background: rgba(0, 255, 136, 0.1);
}

.checkbox-wrapper input[type="checkbox"]:checked + label::after {
    transform: translateY(-50%) scale(1);
}

/* --- Info Boxes (Collapsible) --- */
.info-box {
    border: 1px solid var(--color-border);
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.info-box:hover {
    border-color: var(--color-primary);
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.2);
}

.info-box-header {
    background: var(--color-bg-panel-title);
    padding: 15px 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.info-box-header h3 {
    margin: 0;
    font-size: 18px;
    color: var(--color-primary);
    text-shadow: 0 0 5px var(--color-primary);
}

.info-box-header::after {
    content: '[+]';
    font-size: 24px;
    color: var(--color-primary);
    transition: transform 0.3s ease;
}

.info-box.open .info-box-header::after {
    content: '[-]';
    transform: rotate(180deg);
}

.info-box-content {
    max-height: 0;
    overflow: hidden;
    padding: 0 20px;
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1), padding 0.5s ease;
}

.info-box.open .info-box-content {
    max-height: 1000px; /* A large enough value */
    padding: 20px;
    transition: max-height 1s cubic-bezier(0.9, 0, 0.1, 1), padding 0.5s ease;
}

/* --- Progress Bar --- */
.progress-bar-container {
    width: 100%; /* It will be constrained by its parent */
    height: 20px;
    background-color: var(--color-bg-editor);
    border: 2px solid var(--color-primary);
    padding: 3px;
    position: relative; /* For the percentage text */
}

.progress-bar {
    width: 0;
    height: 100%;
    background-color: var(--color-primary);
    box-shadow: 0 0 10px var(--color-primary);
    transition: width 0.1s linear;
}

.progress-percentage {
    position: absolute;
    top: -25px;
    right: 0;
    font-size: 16px;
    color: var(--color-primary);
    text-shadow: 0 0 5px var(--color-primary);
}

#loading-status-text {
    color: var(--color-text-label);
    font-size: 14px;
    text-align: center;
    margin-top: 15px; /* Space between bar and text */
}

#loading-info-container {
    width: 60%;
    margin: 35px auto 0 auto;
}

/* --- Popovers & Toasts --- */
.action-popover {
    position: absolute;
    background: var(--color-bg-panel-title);
    border: 1px solid var(--color-secondary);
    border-radius: 0;
    padding: 20px;
    z-index: 1010; /* Above archives panel */
    width: 300px;
    box-shadow: 0 10px 40px -10px rgba(255, 79, 79, 0.4);
    transform-origin: top center; /* Default: animates from the top */
    animation: popover-appear 0.2s ease-out;
}

.action-popover.is-upward {
    transform-origin: bottom center; /* When flipped, animates from the bottom */
}

.action-popover.is-leaving {
    animation: popover-disappear 0.2s forwards;
}

.action-popover-message {
    font-size: 14px;
    color: var(--color-text);
    margin-bottom: 20px;
    line-height: 1.7;
    text-align: center;
}

.action-popover-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.action-popover-actions button {
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    font-size: 12px;
    min-width: 90px;
}

.action-popover .popover-ok {
    background-color: var(--color-secondary);
    color: white;
    text-shadow: none;
}
.action-popover .popover-ok:hover {
    background-color: var(--color-secondary-dark);
}

.action-popover .popover-cancel {
    background-color: var(--color-bg-panel);
    color: var(--color-text-label);
    text-shadow: none;
}
.action-popover .popover-cancel:hover {
    background-color: var(--color-border);
    color: var(--color-text);
}

#toastContainer {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    background: var(--color-bg-panel-title);
    color: var(--color-text);
    padding: 15px 20px;
    border-radius: 6px;
    border-left: 4px solid var(--color-primary);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    opacity: 0;
    transform: translateX(100%);
    animation: slideIn 0.5s forwards, fadeOut 0.5s 2.5s forwards;
}

/* ===== 8. Component-Specific Styles ===== */

/* --- Analysis Report --- */
#analysisReportContainer {
    display: grid;
    gap: 25px; /* Increased gap */
}

.analysis-section {
    border-left: 3px solid var(--color-border);
    padding-left: 15px;
    transition: border-color 0.3s ease;
}

.analysis-section:hover {
    border-left-color: var(--color-warning);
}

#analysisReportContainer h4 {
    color: var(--color-warning);
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 15px 0; /* Adjusted margin */
    position: relative;
}

.color-palette {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(35px, 1fr)); /* Slightly larger swatches */
    gap: 10px;
}

.color-swatch {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 4px;
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.color-swatch::before {
    content: attr(title);
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-bg-panel-title);
    color: var(--color-primary);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s ease, bottom 0.2s ease;
    pointer-events: none;
    z-index: 10;
}

.color-swatch:hover {
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(0, 170, 255, 0.3);
    border-color: var(--color-warning);
}

.color-swatch:hover::before {
    opacity: 1;
    bottom: 120%;
}

#analysisReportContainer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 8px;
}

#analysisReportContainer li {
    background: var(--color-bg-editor);
    padding: 10px 15px;
    border-radius: 4px; /* Added radius */
    border-left: 3px solid var(--color-text-label);
    font-size: 14px;
    transition: all 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#analysisReportContainer li:hover {
    background: var(--color-bg-panel-title);
    border-left-color: var(--color-warning);
    transform: translateX(5px);
}

ul.is-empty {
    display: block; /* Override grid layout */
}

.color-palette.is-empty {
    display: block; /* Override grid layout for color palette */
}

.empty-state {
    color: var(--color-text-label);
    font-style: italic;
    padding: 10px 15px;
    background: var(--color-bg-editor);
    border-radius: 4px;
    border-left: 3px solid var(--color-text-label);
    text-align: center;
}

#analysisReportContainer li:hover .stat-label,
#analysisReportContainer li:hover .stat-value {
    color: var(--color-warning);
}

.stat-label {
    color: var(--color-text-label);
    transition: color 0.2s ease;
}

.stat-value {
    color: var(--color-primary);
    font-weight: bold;
    transition: color 0.2s ease;
}

/* --- Archives List --- */
#archiveNameInput, #archiveDescriptionInput {
    background: var(--color-bg-editor);
    color: var(--color-primary);
    border: 1px solid var(--color-border);
    border-radius: 0;
    padding: 10px 15px;
    font-family: var(--font-mono);
    font-size: 14px;
    outline: none;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.5);
    width: 100%;
    transition: all 0.3s ease;
}

#archiveDescriptionInput {
    resize: vertical;
    min-height: 58px; /* 2 rows + padding */
}

#archiveNameInput:focus, #archiveDescriptionInput:focus {
    border-color: var(--color-primary);
    box-shadow: inset 0 0 10px rgba(0, 255, 136, 0.2);
}

#saveArchiveBtn {
    font-size: 14px;
    padding: 10px 20px;
    border-width: 2px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}

#saveArchiveBtn:hover,
.archive-io-buttons button:hover {
    background: rgba(var(--color-primary-rgb), 0.1);
    box-shadow: 0 0 20px var(--color-primary);
}

.mini-preview-container {
    margin-top: 15px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-editor);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mini-preview-title {
    font-size: 12px;
    color: var(--color-text-label);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
}

.mini-preview-wrapper {
    width: 100%;
    height: 120px; /* A fixed, compact height */
    border: 1px solid var(--color-border);
    overflow: hidden;
    background: #fff; /* Default background for the iframe content */
}

#archiveMiniPreview {
    width: 100%;
    height: 100%;
    border: none;
    transform-origin: 0 0;
    /* The scaling will be handled by JS if needed, but for now, let's keep it 1:1 */
}

#archivesListContainer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    overflow-y: auto;
    flex: 1; /* Takes remaining space */
}

.archive-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-bg-panel-title);
    padding: 15px;
    border-radius: 0;
    border-left: 4px solid var(--color-primary-dark);
    transition: all 0.2s ease;
    position: relative; /* Create stacking context */
    z-index: 1; /* Default z-index */
}
.archive-item:hover {
    transform: translateX(5px);
    background: var(--color-bg-panel-title);
    border-left-color: var(--color-primary);
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.2);
}

.archive-item.is-on-top {
    z-index: 2; /* Bring to front when select is open */
}

.archive-item-content {
    flex: 1;
    margin-right: 15px;
}

.archive-item-description {
    font-size: 12px;
    color: var(--color-text-label);
    margin-top: 6px;
    opacity: 0.9;
    letter-spacing: 0.3px;
    line-height: 1.7;
    font-style: italic;
}

.archive-item-name {
    font-weight: bold;
    color: var(--color-primary);
    text-shadow: 0 0 6px rgba(0,255,136,0.4);
    letter-spacing: 0.8px;
}

.archive-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 6px;
    border: 1px solid var(--color-zen);
    color: var(--color-zen);
    font-size: 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    opacity: 0.9;
}

.archive-item-actions {
    display: flex;
    gap: 10px;
}

.archive-item-actions button {
    padding: 6px 12px 6px 28px;
    border-radius: 4px;
    font-size: 12px;
    text-shadow: none;
    color: var(--color-text-label);
    border-color: var(--color-border);
    position: relative;
}

.archive-item-actions button:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
    text-shadow: 0 0 5px var(--color-primary);
    animation: none; /* Override general button animation if needed */
}

/* Button icons */
.archive-item-actions .btn-copy-archive::before {
    content: '⧉';
}
.archive-item-actions .btn-load-archive::before {
    content: '▶';
}
.archive-item-actions .btn-edit-archive::before {
    content: '✎';
}
.archive-item-actions .btn-update-code::before {
    content: '⟳';
}
.archive-item-actions .btn-delete-archive::before {
    content: '⌫';
}
.archive-item-actions .btn-save-changes::before {
    content: '✔';
}
.archive-item-actions .btn-cancel-edit::before {
    content: '✖';
}
.archive-item-actions .btn-copy-archive::before,
.archive-item-actions .btn-load-archive::before,
.archive-item-actions .btn-update-code::before,
.archive-item-actions .btn-edit-archive::before,
.archive-item-actions .btn-delete-archive::before,
.archive-item-actions .btn-save-changes::before,
.archive-item-actions .btn-cancel-edit::before {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.8;
}

.btn-load-archive:hover {
    color: var(--color-zen);
    border-color: var(--color-zen);
    text-shadow: 0 0 5px var(--color-zen);
}

.btn-edit-archive:hover {
    color: var(--color-warning);
    border-color: var(--color-warning);
    text-shadow: 0 0 5px var(--color-warning);
}

.btn-update-code:hover {
    color: var(--color-warning);
    border-color: var(--color-warning);
    text-shadow: 0 0 5px var(--color-warning);
}

.btn-delete-archive:hover {
    color: var(--color-secondary);
    border-color: var(--color-secondary);
    text-shadow: 0 0 5px var(--color-secondary);
}

.archive-item .edit-form {
    display: none;
    flex: 1;
    gap: 10px;
}

.archive-item.is-editing .edit-form {
    display: flex;
    flex-direction: column;
}

.archive-item.is-editing .archive-item-content,
.archive-item.is-editing .archive-item-actions .btn-copy-archive,
.archive-item.is-editing .archive-item-actions .btn-load-archive,
.archive-item.is-editing .archive-item-actions .btn-edit-archive,
.archive-item.is-editing .archive-item-actions .btn-delete-archive {
    display: none;
}

.archive-item-actions .btn-save-changes,
.archive-item-actions .btn-cancel-edit {
    display: none;
}

.archive-item.is-editing .archive-item-actions .btn-save-changes,
.archive-item.is-editing .archive-item-actions .btn-cancel-edit {
    display: inline-block;
}

.archive-item-edit-input {
    width: 100%;
    background: var(--color-bg-editor);
    color: var(--color-primary);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 8px;
    font-family: var(--font-mono);
    box-shadow: inset 0 0 10px rgba(0,255,136,0.08);
}

/* --- Window Panel (for Tasks) --- */
.window-panel {
    position: fixed;
    top: 150px;
    left: 150px;
    width: 500px;
    min-width: 350px;
    height: 600px;
    min-height: 300px;
    background: rgba(20, 20, 20, 0.85);
    backdrop-filter: blur(10px);
    border: 1px solid var(--color-primary);
    box-shadow: 0 10px 60px -15px rgba(0, 255, 136, 0.25);
    z-index: 1002;
    display: none; /* Hidden by default */
    flex-direction: column;
    resize: both;
    overflow: hidden; /* Important for resize */
}

.window-panel.active {
    display: flex;
    animation: fadeInScaleUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.window-panel-header {
    padding: 10px 15px;
    background: var(--color-bg-panel-title);
    border-bottom: 1px solid var(--color-primary);
    cursor: move;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.window-panel-header h2 {
    font-size: 16px;
    color: var(--color-primary);
    text-shadow: 0 0 5px var(--color-primary);
    margin: 0;
}

.window-panel-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

.window-panel-tool-btn {
    background: transparent;
    border: 1px solid var(--color-text-label);
    color: var(--color-text-label);
    padding: 6px 12px;
    font-size: 12px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
    cursor: pointer;
    text-align: center;
    transition: all 0.3s ease;
    text-shadow: none; /* Override general button text-shadow */
}

.window-panel-tool-btn:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
}


.window-panel-body {
    padding: 0; /* Remove padding to allow full-height flex */
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Parent controls overflow */
}

.mini-note-window {
    width: 350px;
    height: 400px;
    min-width: 250px;
    min-height: 200px;
    z-index: 1006; /* Ensure it's above the knowledge terminal */
}

.mini-note-window .note-content-area {
    font-size: 13px;
    line-height: 1.7;
    color: var(--color-text);
    padding: 15px 20px;
    overflow-y: auto;
    overflow-wrap: break-word; /* 强制长单词换行 */
}



.window-panel-resize-handle {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 15px;
    height: 15px;
    cursor: nwse-resize;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 4px,
        var(--color-border) 4px,
        var(--color-border) 5px
    );
    opacity: 0.5;
    transition: opacity 0.3s;
}

.window-panel-resize-handle:hover {
    opacity: 1;
}


/* --- Tasks List --- */
#tasksList {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto; /* This is now the primary scroll container */
    padding: 15px; /* Add padding here instead of the body */
}

.task-add-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-panel-title);
    flex-shrink: 0; /* Prevent the form from shrinking */
    
    /* Collapsible styles */
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    border-top: none;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out, border 0.4s;
}

#tasksPanel.task-input-visible .task-add-form {
    max-height: 300px; /* A reasonable max height */
    padding-top: 15px;
    padding-bottom: 15px;
    border-top: 1px solid var(--color-border);
    transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out, border 0.5s;
}

#tasksPanel.task-input-visible #toggleTaskInputBtn {
    background: var(--color-primary);
    color: var(--color-bg-panel);
    border-color: var(--color-primary);
    /* transform: rotate(45deg); */ /* Removed rotation */
}

.markdown-toolbar {
    display: flex;
    gap: 5px;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 10px;
}

.md-btn {
    background: transparent;
    border: 1px solid var(--color-text-label);
    color: var(--color-text-label);
    padding: 4px 8px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-shadow: none;
    min-width: 30px;
}

.md-btn:hover {
    background: var(--color-bg-panel-title);
    color: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: none;
    animation: none;
}

#newTaskInput {
    background: var(--color-bg-editor);
    color: var(--color-primary);
    border: 2px solid var(--color-border);
    border-radius: 0;
    padding: 10px 15px;
    font-family: var(--font-mono);
    font-size: 14px;
    outline: none;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.5);
    resize: vertical;
    min-height: 60px;
}

#newTaskInput:focus {
    border-color: var(--color-primary);
    box-shadow: inset 0 0 10px rgba(0, 255, 136, 0.2);
}

#addTaskBtn {
    font-size: 14px;
    padding: 10px 20px;
    border-width: 2px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}

#tasksList {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.task-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: var(--color-bg-panel-title);
    padding: 15px;
    border-left: 4px solid var(--color-primary-dark);
    transition: all 0.2s ease;
}

.task-item:hover {
    transform: translateX(5px);
    border-left-color: var(--color-primary);
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.2);
}

/* Drag and Drop Styles */
.task-item.dragging {
    opacity: 0.5;
    background: var(--color-bg-editor);
}

.task-item.drag-over {
    border-top: 2px dashed var(--color-primary);
}

.task-item-text {
    flex: 1;
    color: #0f0;
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
    transition: all 0.3s ease;
    line-height: 1.7;
    font-family: var(--font-mono);
}

.task-item-text > *:first-child {
    margin-top: 0;
}
.task-item-text > *:last-child {
    margin-bottom: 0;
}

.task-item-text h1,
.task-item-text h2,
.task-item-text h3 {
    color: var(--color-primary);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 5px;
    margin-top: 15px;
    margin-bottom: 10px;
}
.task-item-text h1 { font-size: 1.4em; }
.task-item-text h2 { font-size: 1.2em; }
.task-item-text h3 { font-size: 1.1em; }

.task-item-text p {
    margin-bottom: 10px;
}

.task-item-text ul,
.task-item-text ol {
    margin-left: 20px;
    margin-bottom: 10px;
}

.task-item-text li {
    margin-bottom: 5px;
}

.task-item-text code {
    background: var(--color-bg-editor);
    color: var(--color-secondary);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--font-mono);
}

.task-item-text pre {
    background: var(--color-bg-editor);
    padding: 10px;
    margin-bottom: 10px;
    overflow-x: auto;
    border: 1px solid var(--color-border);
}

.task-item-text pre code {
    padding: 0;
    background: transparent;
    border: none;
}

.task-item-text blockquote {
    border-left: 3px solid var(--color-primary);
    padding-left: 15px;
    margin: 15px 0;
    color: var(--color-text-label);
    font-style: italic;
}

.task-item.completed .task-item-text {
    text-decoration: line-through;
    color: var(--color-text-label);
    opacity: 0.7;
}

.task-item-actions {
    gap:10px;
    display: flex;
}

/* The old icon style for the delete button is now removed. */
/* It is replaced by the unified text button style below. */

/* Task Item Edit Styles */
.task-item {
    position: relative;
    flex-wrap: wrap;
}

.task-item-view,
.task-item-edit {
    flex: 1 1 100%;
    min-width: 0; /* Fix for flexbox overflow */
}

.task-item-edit {
    display: none;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.task-item-edit-input {
    width: 100%;
    background: var(--color-bg-editor);
    color: var(--color-primary);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 8px;
    font-family: var(--font-mono);
    font-size: 14px;
    resize: vertical;
    min-height: 80px;
}

.task-item-edit-input:focus {
    border-color: var(--color-primary);
    box-shadow: inset 0 0 10px rgba(0, 255, 136, 0.2);
    outline: none;
}

.task-item-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.task-item-edit-actions button {
    padding: 6px 12px;
    font-size: 12px;
    text-shadow: none;
}

.task-item-save {
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.task-item-save:hover {
    background: var(--color-primary);
    color: var(--color-bg-panel);
    text-shadow: none;
}

.task-item-cancel {
    color: var(--color-text-label);
    border-color: var(--color-border);
}
.task-item-cancel:hover {
    color: var(--color-text);
    border-color: var(--color-text-label);
}

/* State switching */
.task-item.is-editing .task-item-view,
.task-item.is-editing .task-item-actions .task-item-edit-btn,
.task-item.is-editing .task-checkbox { /* Hide checkbox in edit mode */
    display: none;
}

.task-item.is-editing .task-item-edit {
    display: flex;
}

/* Unified style for Edit and Delete buttons in task items */
.task-item-actions .task-item-edit-btn,
.task-item-actions .task-item-delete {
    background: transparent;
    border: 1px solid var(--color-text-label);
    color: var(--color-text-label);
    cursor: pointer;
    font-size: 12px;
    padding: 4px 10px;
    transition: all 0.3s ease;
    text-shadow: none;
    border-radius: 4px;
}

.task-item-actions .task-item-edit-btn:hover {
    color: var(--color-warning);
    border-color: var(--color-warning);
    background-color: rgba(0, 170, 255, 0.1);
    text-shadow: 0 0 5px var(--color-warning);
    box-shadow: 0 0 10px rgba(0, 170, 255, 0.2);
    animation: none;
}

.task-item-actions .task-item-delete:hover {
    color: var(--color-secondary);
    border-color: var(--color-secondary);
    background-color: rgba(255, 79, 79, 0.1);
    text-shadow: 0 0 5px var(--color-secondary);
    box-shadow: 0 0 10px rgba(255, 79, 79, 0.2);
    animation: none;
}

/* Custom checkbox for tasks */
.task-checkbox {
    position: relative;
    width: 22px;
    height: 22px;
    cursor: pointer;
    flex-shrink: 0;
}

.task-checkbox input {
    opacity: 0;
    width: 0;
    height: 0;
}

.task-checkbox .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 22px;
    width: 22px;
    background-color: var(--color-bg-editor);
    border: 1px solid var(--color-border);
    transition: all 0.3s ease;
}

.task-checkbox:hover .checkmark {
    border-color: var(--color-primary);
}

.task-checkbox input:checked ~ .checkmark {
    background-color: rgba(0, 255, 136, 0.1);
    border-color: var(--color-primary);
}

.task-checkbox .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.task-checkbox input:checked ~ .checkmark:after {
    display: block;
}

.task-checkbox .checkmark:after {
    left: 6px;
    top: 2px;
    width: 6px;
    height: 12px;
    border: solid var(--color-primary);
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
    transition: all 0.2s ease-out;
}

/* --- Knowledge Terminal --- */
.knowledge-terminal {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(20, 20, 20, 0.85);
    backdrop-filter: blur(10px);
    z-index: 1005; /* High z-index */
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.5s;
    visibility: hidden;
    opacity: 0;
}

.knowledge-terminal.active {
    transform: translateY(0);
    visibility: visible;
    opacity: 1;
}

.knowledge-terminal-header {
    padding: 15px;
    border-bottom: 1px solid var(--color-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    background: var(--color-bg-panel-title);
    flex-shrink: 0;
}

.knowledge-terminal-header h2 {
    font-size: 18px;
    color: var(--color-primary);
    text-shadow: 0 0 5px var(--color-primary);
    margin: 0;
}

.knowledge-terminal-body {
    flex: 1;
    display: grid;
    grid-template-columns: 300px 1fr;
    overflow: hidden;
}

.knowledge-sidebar {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--color-border);
    overflow: hidden;
}

.knowledge-sidebar-header {
    padding: 15px;
    border-bottom: 1px solid var(--color-border);
}

#knowledgeSearchInput {
    width: 100%;
    background: var(--color-bg-editor);
    color: var(--color-primary);
    border: 1px solid var(--color-border);
    padding: 8px 12px;
    font-family: var(--font-mono);
    outline: none;
}
#knowledgeSearchInput:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.2);
}

.knowledge-tree-container {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
}

.knowledge-tree-item {
    padding-left: 20px;
    position: relative;
}

.knowledge-tree-item .tree-item-label {
    display: block;
    padding: 8px 0;
    cursor: pointer;
    color: var(--color-text-label);
    transition: color 0.2s;
}

.knowledge-tree-item.is-folder > .tree-item-label::before {
    content: '📁';
    margin-right: 8px;
}

.knowledge-tree-item.is-note > .tree-item-label::before {
    content: '📄';
    margin-right: 8px;
}

.knowledge-tree-item .tree-item-label:hover {
    color: var(--color-primary);
}

.knowledge-tree-item.is-folder.open > .tree-item-label::before {
    content: '📂';
}

.knowledge-tree-item.is-folder.open > .tree-item-label {
    color: var(--color-primary);
    font-weight: bold;
}

.knowledge-tree-children {
    display: none;
}

.knowledge-tree-item.is-folder.open > .knowledge-tree-children {
    display: block;
}

.knowledge-tree-item.is-note.active > .tree-item-label {
    color: var(--color-primary);
    background-color: rgba(0, 255, 136, 0.1);
}

.knowledge-content {
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 15px; /* Add padding to the parent container */
    gap: 15px; /* Add gap between header and content body */
}

.knowledge-content-header {
    position: absolute;
    top: 15px;
    right: 20px;
    z-index: 10;
}

.hang-note-btn {
    background: transparent;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-shadow: 0 0 5px var(--color-primary);
}

.hang-note-btn:hover {
    background: var(--color-primary);
    color: var(--color-bg-panel);
    box-shadow: 0 0 15px var(--color-primary);
    text-shadow: none;
}

.knowledge-content-display {
    color: var(--color-text);
    line-height: 1.8;
    flex: 1; /* Allow it to grow */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Hide overflow from children */
}

.knowledge-content-body {
    padding: 20px 30px;
    overflow-y: auto;
    flex: 1;
}

.knowledge-content-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: var(--color-text-label);
    font-size: 1.2em;
}

/* Shared Markdown styles for knowledge content and mini-notes */
.knowledge-content-display h1, .mini-note-window .note-content-area h1,
.knowledge-content-display h2, .mini-note-window .note-content-area h2,
.knowledge-content-display h3, .mini-note-window .note-content-area h3 {
    color: var(--color-primary);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 10px;
    margin-top: 20px;
    margin-bottom: 15px;
}
.knowledge-content-display h1, .mini-note-window .note-content-area h1 { font-size: 2em; }
.knowledge-content-display h2, .mini-note-window .note-content-area h2 { font-size: 1.6em; }
.knowledge-content-display h3, .mini-note-window .note-content-area h3 { font-size: 1.3em; }

.knowledge-content-display p, .mini-note-window .note-content-area p {
    margin-bottom: 15px;
}

.knowledge-content-display ul, .mini-note-window .note-content-area ul,
.knowledge-content-display ol, .mini-note-window .note-content-area ol {
    margin-left: 25px;
    margin-bottom: 15px;
}

.knowledge-content-display li, .mini-note-window .note-content-area li {
    margin-bottom: 8px;
}

.knowledge-content-display code, .mini-note-window .note-content-area code {
    background: var(--color-bg-editor);
    color: var(--color-secondary);
    padding: 3px 8px;
    border-radius: 4px;
    font-family: var(--font-mono);
}

.knowledge-content-display pre, .mini-note-window .note-content-area pre {
    background: var(--color-bg-editor);
    padding: 15px;
    margin-bottom: 15px;
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: 4px;
}

.knowledge-content-display pre code, .mini-note-window .note-content-area pre code {
    padding: 0;
    background: transparent;
    border: none;
}

.knowledge-content-display blockquote, .mini-note-window .note-content-area blockquote {
    border-left: 4px solid var(--color-primary);
    padding-left: 20px;
    margin: 20px 0;
    color: var(--color-text-label);
    font-style: italic;
}


/* ===== 9. Third-Party Overrides ===== */

/* --- CodeMirror Editor --- */
.CodeMirror {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 15px;
    line-height: 1.8;
    background: var(--color-bg-editor);
    color: var(--color-text);
    border: 2px solid var(--color-border);
    border-radius: 8px;
    transition: all 0.3s ease;
    background-image: none !important; /* Ensure no background image is inherited */
}

.CodeMirror-focused {
    outline: none !important;
    border-image: none; /* Ensure no border image is applied on focus */
}

/* CodeMirror placeholder styling */
.CodeMirror-empty .CodeMirror-placeholder {
    color: var(--color-text-label) !important;
    opacity: 0.75;
    transition: color 0.25s ease, text-shadow 0.25s ease;
}

/* Placeholder theme: Hacker (default) */
body.placeholder-theme-hacker .CodeMirror-empty .CodeMirror-placeholder,
.CodeMirror-empty .CodeMirror-placeholder {
    color: #00ff88 !important;
    text-shadow: 0 0 6px rgba(0, 255, 136, 0.6), 0 0 10px rgba(0, 255, 136, 0.25);
    letter-spacing: 0.5px;
}

/* Optional: textarea fallback placeholders for consistency */
body.placeholder-theme-hacker textarea::placeholder,
textarea::placeholder {
    color: #00ff88;
}

/* Theme Overrides for Dracula */
.cm-s-dracula.CodeMirror {
    background: var(--color-bg-editor) !important;
    color: var(--color-text);
}

.cm-s-dracula .CodeMirror-gutters {
    background: var(--color-bg-editor) !important;
    border-right: 1px solid var(--color-border);
    transition: all 0.3s ease; /* Add transition for smooth effect */
}

/* Gutter Focus Style */
.CodeMirror-focused .CodeMirror-gutters {
    background: var(--color-bg-editor) !important; /* Keep background consistent */
}

.cm-s-dracula .CodeMirror-linenumber {
    color: var(--color-text-label);
}

.cm-s-dracula .CodeMirror-cursor {
    border-left: 2px solid rgba(0, 255, 136, 0.7) !important;
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.5) !important;
}

.cm-s-dracula .CodeMirror-activeline-background {
    background: rgba(0, 255, 136, 0.05);
}

.cm-s-dracula .CodeMirror-selected {
    background: rgba(0, 255, 136, 0.25) !important;
}

/* Ensure CodeMirror scrollbar fillers match the theme. */
.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
    background-color: var(--color-bg-panel); /* Match the new track color */
}

/* ===== 10. Utility & State Classes ===== */

/* --- Zen Mode --- */
#zenOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    opacity: 0;
    transition: opacity 0.5s ease-out;
    pointer-events: none;
    z-index: 800;
}

body.zen-mode #zenOverlay {
    opacity: 0;
    pointer-events: none;
}

body.zen-mode .workspace {
    grid-template-columns: 0fr 1fr;
}

/* The preview wrapper and panels no longer need special styling in zen mode, the grid does the work */

body.zen-mode .preview-container {
    border-width: 0;
}

/* Zen mode polish: edge-to-edge preview, subtle vignette and hint */
body.zen-mode .preview-wrapper {
    padding: 0;
}
/* Zen mode polish: use dedicated divs to avoid pseudo-element conflicts */
#zenVignette, #zenHint {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease-out;
    z-index: 5;
}

#zenVignette {
    inset: 0;
    background: radial-gradient(120% 100% at 50% 50%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.25) 100%);
}

#zenHint {
    bottom: 12px;
    right: 16px;
    font-size: 11px;
    color: rgba(200, 200, 200, 0.5);
    background: rgba(0,0,0,0.35);
    padding: 4px 8px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
}

#zenHint::before {
    content: '按 ESC 退出禅定';
}

body.zen-mode #zenVignette,
body.zen-mode #zenHint {
    opacity: 1;
}

/* Zen mode no longer hides the title automatically. This is now controlled by the user via the .hidden class. */

/* --- Filters & Glitches --- */
.preview-container.filter-active {
    position: relative;
}
.preview-container.filter-active::after { /* Scanlines from A */
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%);
    background-size: 100% 3px;
    animation: combined_scanlines 10s linear infinite;
    opacity: 0.3;
    z-index: 2;
}
.preview-container.filter-active::before { /* Colorful blocks inspired by F */
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(45deg, hsla(180, 100%, 50%, 0.3), hsla(300, 100%, 50%, 0.3), hsla(60, 100%, 50%, 0.3));
    mix-blend-mode: screen;
    z-index: 3;
    animation: combined_colorful-blocks 4s steps(12) infinite;
}

.preview-container.filter-active #livePreview { /* Hue shift from A */
    animation: combined_hue-shift 10s linear infinite;
}

/* Burst: stronger, short-lived glitch */
.preview-container.glitch-burst #livePreview {
    filter: contrast(1.28) saturate(1.6) brightness(1.08) drop-shadow(2px 0 0 rgba(255,0,100,0.55)) drop-shadow(-2px 0 0 rgba(0,200,255,0.55));
    animation: burstShake 0.35s steps(3) 1, burstHue 0.35s linear 1;
}
.preview-container.glitch-burst::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* replicate the colorful moving bars + scanlines + vignette used in filter-active */
    background:
        linear-gradient(
            180deg,
            rgba(255,0,90,0.18) 0%,
            rgba(0,255,200,0.14) 8%,
            rgba(0,0,0,0) 10%,
            rgba(0,0,0,0) 18%,
            rgba(0,180,255,0.14) 20%,
            rgba(255,255,0,0.16) 28%,
            rgba(0,0,0,0) 30%,
            rgba(0,0,0,0) 38%,
            rgba(255,0,90,0.14) 40%,
            rgba(0,0,0,0) 100%
        ) 0 0/100% 180px,
        linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,0.12) 50%) 0 0/100% 3px,
        radial-gradient(120% 100% at 50% 50%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.35) 100%);
    mix-blend-mode: multiply;
    animation: glitchBarsFast 0.35s linear 1;
}
.preview-container.glitch-burst::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(90deg, rgba(0,255,136,0.1) 0 1px, transparent 1px 2px);
    opacity: 0.5;
}

.hidden {
    display: none !important;
}

/* Override .hidden for preview title to preserve layout space */
#preview-label-container.hidden {
    display: flex !important; /* Keep it as a flex container */
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.fx-pulse-refresh {
    animation: fx-pulse-border 0.4s ease-out;
}

/* ===== 11. Media Queries ===== */
@media (max-width: 1024px) {
    .workspace {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }
}
/* ==========================================================================
   Knowledge Terminal Enhancements
   ========================================================================== */

.knowledge-sidebar-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px;
    border-bottom: 1px solid var(--color-border);
}

.knowledge-sidebar-header #knowledgeSearchInput {
    flex-grow: 1;
}

.knowledge-sidebar-actions {
    display: flex;
    gap: 10px;
}

.knowledge-content-header {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    /* Padding is now handled by the parent, so we only need horizontal padding here */
    padding: 0 15px;
    flex-shrink: 0;
}

.knowledge-sidebar-actions span,
.knowledge-content-actions span {
    background: transparent;
    border: 1px solid var(--color-text-label);
    color: var(--color-text-label);
    cursor: pointer;
    font-size: 12px;
    padding: 5px 12px;
    transition: all 0.3s ease;
    text-shadow: none;
    border-radius: 4px;
    display: inline-block;
    white-space: nowrap;
}

.knowledge-sidebar-actions span:hover,
.knowledge-content-actions span:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background-color: rgba(0, 255, 136, 0.1);
    text-shadow: 0 0 5px var(--color-primary);
}

.knowledge-content-actions span[data-action="rename"]:hover,
.knowledge-content-actions span[data-action="edit"]:hover {
    color: var(--color-warning);
    border-color: var(--color-warning);
    background-color: rgba(0, 170, 255, 0.1);
    text-shadow: 0 0 5px var(--color-warning);
}

.knowledge-content-actions span[data-action="delete"]:hover {
    color: var(--color-secondary);
    border-color: var(--color-secondary);
    background-color: rgba(255, 79, 79, 0.1);
    text-shadow: 0 0 5px var(--color-secondary);
}

/* --- In-Place Editor for Knowledge Notes --- */
.knowledge-content-editor {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20px 30px;
    box-sizing: border-box;
}

#knowledgeEditorTextarea {
    flex: 1;
    background: var(--color-bg-editor);
    color: var(--color-primary);
    border: 1px solid var(--color-border);
    padding: 15px;
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1.8;
    outline: none;
    resize: none;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.5);
    transition: all 0.3s ease;
    margin-bottom: 15px;
}

#knowledgeEditorTextarea:focus {
    border-color: var(--color-primary);
    box-shadow: inset 0 0 10px rgba(0, 255, 136, 0.2);
}

.editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    flex-shrink: 0;
}

.editor-actions button {
    min-width: 100px;
    border-width: 2px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}

#saveNoteChangesBtn {
    color: var(--color-primary);
    border-color: var(--color-primary);
}
#saveNoteChangesBtn:hover {
    background: var(--color-primary);
    color: var(--color-bg-panel);
    text-shadow: none;
}

#cancelNoteChangesBtn {
    color: var(--color-text-label);
    border-color: var(--color-border);
    text-shadow: none;
}
#cancelNoteChangesBtn:hover {
    color: var(--color-secondary);
    border-color: var(--color-secondary);
    background: rgba(255, 79, 79, 0.1);
}

/* --- Custom Prompt Modal --- */
.custom-prompt {
    z-index: 1100; /* Higher than knowledge terminal (1005) */
}

.custom-prompt .modal-content {
    max-width: 500px;
    text-align: center;
    border: 1px solid var(--color-primary);
    box-shadow: 0 10px 60px -15px rgba(0, 255, 136, 0.25);
}

#customPromptTitle {
    font-size: 22px;
    color: var(--color-primary);
    text-shadow: 0 0 8px var(--color-primary);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 15px;
    margin-bottom: 20px;
}

#customPromptMessage {
    margin-bottom: 25px;
    color: var(--color-text);
    line-height: 1.7;
    font-size: 14px;
}

#customPromptInput {
    width: 100%;
    background: var(--color-bg-editor);
    color: var(--color-primary);
    border: 1px solid var(--color-border);
    padding: 12px 15px;
    font-family: var(--font-mono);
    font-size: 16px;
    outline: none;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.5);
    margin-bottom: 30px;
    text-align: center;
    transition: all 0.3s ease;
}

#customPromptInput:focus {
    border-color: var(--color-primary);
    box-shadow: inset 0 0 10px rgba(0, 255, 136, 0.2), 0 0 15px rgba(0, 255, 136, 0.3);
}

.custom-prompt-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.custom-prompt-actions button {
    min-width: 120px;
    border-width: 2px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}

#customPromptOkBtn {
    color: var(--color-primary);
    border-color: var(--color-primary);
}
#customPromptOkBtn:hover {
    background: var(--color-primary);
    color: var(--color-bg-panel);
    text-shadow: none;
}

#customPromptCancelBtn {
    color: var(--color-text-label);
    border-color: var(--color-border);
    text-shadow: none;
}
#customPromptCancelBtn:hover {
    color: var(--color-secondary);
    border-color: var(--color-secondary);
    background: rgba(255, 79, 79, 0.1);
}

/* --- Global Save Modal --- */
.global-save-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 15px;
}

.save-module-list {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns */
    gap: 15px;
    margin: 25px 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: 20px 0;
}

.save-module-item {
    background: var(--color-bg-panel-title);
    padding: 15px;
    border-left: 3px solid var(--color-border);
    transition: all 0.3s ease;
    cursor: pointer;
    user-select: none; /* Prevent text selection on click */
}

.save-module-item:hover {
    border-left-color: var(--color-primary);
    background: var(--color-bg-editor);
}

.save-module-item .checkbox-wrapper {
    align-items: flex-start;
}

.save-module-item .checkbox-wrapper label {
    font-weight: bold;
    color: var(--color-primary);
    font-size: 16px;
    padding-left: 35px; /* More space for bigger checkbox */
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Vertically center the text with the box */
}

.save-module-item .checkbox-wrapper label::before {
    width: 24px;
    height: 24px;
}

.save-module-item .checkbox-wrapper label::after {
    font-size: 20px;
    left: 5px;
    top: 48%;
}

.save-module-item p {
    font-size: 12px;
    color: var(--color-text-label);
    margin-top: 8px;
    margin-left: 35px; /* Align with label text */
    line-height: 1.6;
}

#globalSaveModalClose {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1;
}

/* --- Snippet Manager Panel --- */
#snippetManagerPanel {
    width: 80vw;
    max-width: 900px;
    height: 70vh;
    top: 15%;
    left: 10%;
}

.snippet-manager-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-panel-title);
}

.snippet-tabs {
    display: flex;
    gap: 5px;
}

.snippet-tabs .tab-btn {
    padding: 8px 15px;
    font-size: 14px;
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-label);
    cursor: pointer;
    transition: all 0.3s ease;
    text-shadow: none;
}

.snippet-tabs .tab-btn:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: rgba(0, 255, 136, 0.1);
}

.snippet-tabs .tab-btn.active {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-bg-panel);
    text-shadow: none;
}

#addNewSnippetBtn {
    font-size: 12px;
    padding: 6px 12px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
}

#snippetListContainer {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.snippet-item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 20px;
    background: var(--color-bg-panel-title);
    padding: 15px 20px;
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary-dark);
    transition: all 0.2s ease;
}

.snippet-item:hover {
    transform: none; /* Remove horizontal shift */
    border-color: var(--color-primary);
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.2);
}

.snippet-item-content {
    min-width: 0; /* Prevent flex/grid overflow */
}

.snippet-item-name {
    font-weight: bold;
    color: var(--color-primary);
    text-shadow: 0 0 5px var(--color-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.snippet-item-description {
    font-size: 12px;
    color: var(--color-text-label);
    margin-top: 8px;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.snippet-item-actions {
    display: flex;
    gap: 10px;
}

.snippet-item-actions button {
    background: transparent;
    border: 1px solid var(--color-text-label);
    color: var(--color-text-label);
    padding: 4px 10px;
    font-size: 12px;
    text-shadow: none;
    border-radius: 4px;
}

.snippet-item-actions .btn-edit-snippet:hover {
    color: var(--color-warning);
    border-color: var(--color-warning);
}

.snippet-item-actions .btn-delete-snippet:hover {
    color: var(--color-secondary);
    border-color: var(--color-secondary);
}

#new-snippet-editor {
    border: 1px solid var(--color-primary);
    margin-bottom: 10px;
}

/* --- In-place Snippet Editor --- */
.snippet-item {
    flex-wrap: wrap; /* Allow view and edit sections to wrap */
}

.snippet-item-view,
.snippet-item-edit {
    flex: 1 1 100%;
    min-width: 0;
}

.snippet-item-edit {
    display: none;
    flex-direction: column;
    gap: 10px;
    padding: 15px;
    margin-top: 10px;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-editor);
}

.snippet-item.is-editing .snippet-item-view {
    display: none;
}

.snippet-item.is-editing .snippet-item-edit {
    display: flex;
}

.snippet-edit-input,
.snippet-edit-textarea {
    background: var(--color-bg-panel-title);
    color: var(--color-primary);
    border: 1px solid var(--color-border);
    padding: 10px;
    font-family: var(--font-mono);
    width: 100%;
}
.snippet-edit-input:focus,
.snippet-edit-textarea:focus {
    border-color: var(--color-primary);
    outline: none;
}

.snippet-edit-textarea {
    resize: vertical;
    min-height: 60px;
}

.snippet-code-editor-container {
    height: 250px; /* Give a fixed initial height */
    resize: vertical;
    overflow: auto;
    border: 1px solid var(--color-border);
    display: flex;
}

.snippet-code-editor-container .CodeMirror {
    flex: 1;
    height: 100%;
}

.snippet-editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px;
}

.snippet-editor-actions button {
    padding: 6px 12px;
    font-size: 12px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
}

.btn-save-snippet {
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn-save-snippet:hover {
    background: var(--color-primary);
    color: var(--color-bg-panel);
    text-shadow: none;
}

.btn-cancel-snippet {
    color: var(--color-text-label);
    border-color: var(--color-border);
    text-shadow: none;
}
.btn-cancel-snippet:hover {
    color: var(--color-secondary);
    border-color: var(--color-secondary);
}

/* --- Info List (for Plugins Panel) --- */
.info-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 20px;
}

.info-item {
    background: var(--color-bg-panel-title);
    padding: 20px;
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    transition: all 0.2s ease;
}

.info-item:hover {
    border-color: var(--color-primary);
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.2);
}

.info-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.info-item-title {
    font-size: 16px;
    font-weight: bold;
    color: var(--color-primary);
    text-shadow: 0 0 5px var(--color-primary);
}

.info-item-status {
    font-size: 12px;
    font-weight: bold;
}

.info-item-description {
    font-size: 14px;
    color: var(--color-text-label);
    line-height: 1.7;
}

.info-item-description code {
    background: var(--color-bg-editor);
    color: var(--color-secondary);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--font-mono);
}


/* --- CodeMirror Hint (Autocomplete) Customization --- */
.CodeMirror-hints {
    position: absolute !important;
    z-index: 10 !important;
    overflow: hidden !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important; /* Remove default padding */

    /* Cyberpunk styling */
    background: rgba(20, 20, 20, 0.9) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid var(--color-primary) !important;
    box-shadow: 0 0 25px -5px var(--color-primary) !important;
    color: var(--color-text) !important;
    font-family: var(--font-mono) !important;
    font-size: 13px !important;
    max-height: 20em !important;
    overflow-y: auto !important;
    border-radius: 0 !important; /* Override default rounded corners */
}

.CodeMirror-hint {
    margin: 0 !important;
    padding: 8px 12px !important;
    white-space: pre !important;
    color: var(--color-text) !important;
    cursor: pointer !important;
    border-bottom: 1px solid var(--color-border) !important;
    transition: all 0.2s ease-in-out !important;
    background-color: transparent !important; /* Ensure no default background */
}

li.CodeMirror-hint-active {
    background: linear-gradient(90deg, rgba(0, 255, 136, 0.2) 0%, transparent 100%) !important;
    color: #fff !important;
    text-shadow: 0 0 8px var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/* ==========================================================================
   AI Chat Panel Styles
   ========================================================================== */

#aiChatPanel .window-panel-body {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: visible;
}

#aiChatPanel {
    overflow: visible;
}


.ai-chat-body {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0 24px 20px 20px;
    gap: 18px;
    overflow: visible;
}

.ai-chat-container {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.chat-message {
    display: flex;
    max-width: 85%;
}

.message-content {
    padding: 12px 18px;
    border-radius: 8px;
    line-height: 1.7;
    font-size: 14px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* User Message */
.message-user {
    align-self: flex-end;
    margin-left: auto;
}

.message-user .message-content {
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    border-top-right-radius: 0;
}

/* Model Message */
.message-model {
    align-self: flex-start;
}

.message-model .message-content {
    background: var(--color-bg-panel-title);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    border-top-left-radius: 0;
}

.message-content p:last-child {
    margin-bottom: 0;
}

.message-content ul,
.message-content ol {
    padding-left: 20px; /* 为列表添加缩进 */
    margin-top: 10px;
    margin-bottom: 10px;
}

.message-content pre {
    background-color: var(--color-bg-editor);
    border: 1px solid var(--color-border);
    padding: 11px 10px;
    border-radius: 4px;
    margin: 10px 0;
    overflow-x: auto;
    white-space: pre-wrap; /* 修复缩进和换行问题 */
    word-wrap: break-word;   /* 确保长单词也能换行 */
}

.message-content code {
    color: var(--color-secondary);
    background-color: rgba(255, 79, 79, 0.1);
    padding: 2px 5px;
    border-radius: 3px;
}

.message-content pre code {
    background-color: transparent;
    padding: 0;
}

.message-content .ai-error-detail {
    margin-top: 8px;
    padding: 10px 12px;
    border-left: 3px solid rgba(var(--color-warning-rgb), 0.6);
    background: rgba(var(--color-warning-rgb), 0.12);
    color: var(--color-warning);
    font-size: 13px;
}

.message-content .ai-raw-response {
    margin-top: 8px;
    padding: 12px 14px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: #0e0e0e;
    color: #f5f5f5;
    font-family: var(--font-mono);
    font-size: 13px;
    max-height: 280px;
    overflow: auto;
    white-space: pre-wrap;
}

.error-message {
    color: var(--color-secondary);
    font-weight: bold;
}

.ai-chat-footer {
    display: flex;
    flex-direction: column;
    padding: 0;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-panel-title);
}

.ai-chat-input-area {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 15px;
}

#aiChatInput {
    flex: 1;
    resize: none;
    background: var(--color-bg-editor);
    color: var(--color-primary);
    border: 1px solid var(--color-border);
    padding: 10px 15px;
    font-family: var(--font-mono);
    font-size: 14px;
    outline: none;
    min-height: 42px; /* Match button height */
    max-height: 200px;
    overflow-y: auto;
}

#aiChatInput:focus {
    border-color: var(--color-primary);
    box-shadow: inset 0 0 10px rgba(0, 255, 136, 0.2);
}

#aiChatSendBtn {
    height: 42px; /* Match input height */
    padding: 10px 20px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
    flex-shrink: 0; /* Prevent button from shrinking */
}

.ai-chat-model-selector {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 15px;
    background: var(--color-bg-editor);
    border-bottom: 1px solid var(--color-border);
}

.ai-chat-model-selector label {
    font-size: 12px;
    color: var(--color-text-label);
    text-transform: uppercase;
    flex-shrink: 0;
}

.ai-chat-model-selector .select-trigger {
    flex-grow: 1;
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-primary);
    padding: 8px 12px;
    font-weight: bold;
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0.5px;
    text-shadow: 0 0 5px var(--color-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    transition: all 0.3s ease;
}

.ai-chat-model-selector .select-trigger:hover,
.ai-chat-model-selector.open .select-trigger {
    animation: none;
    background: rgba(0, 255, 136, 0.1);
    border-color: var(--color-primary);
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.2);
    color: var(--color-primary);
}

.ai-chat-model-selector .select-caret {
    transition: transform 0.3s ease;
}

.ai-chat-model-selector.open .select-caret {
    transform: rotate(180deg);
}

.ai-chat-model-selector .select-menu {
    position: absolute;
    bottom: calc(100% + 1px); /* Position above the footer */
    left: 0;
    right: 0;
    width: 100%;
    background: rgba(20, 20, 20, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid var(--color-primary);
    box-shadow: 0 0 25px -5px var(--color-primary);
    z-index: 10;
    display: none;
    padding: 5px;
    max-height: 250px;
    overflow-y: auto;
}

.ai-chat-model-selector.open .select-menu {
    display: block;
}

.ai-chat-model-selector .select-option {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    color: var(--color-text);
    border: 1px solid transparent;
    padding: 8px 15px;
    cursor: pointer;
    text-shadow: none;
    text-transform: none;
    letter-spacing: 0.5px;
    font-weight: normal;
    transition: all 0.2s ease;
}

.ai-chat-model-selector .select-option:hover,
.ai-chat-model-selector .select-option.selected {
    background: rgba(0,255,136,0.1);
    color: var(--color-primary);
    border-color: var(--color-primary);
    text-shadow: 0 0 5px var(--color-primary);
    animation: none;
    box-shadow: none;
}

/* Loading dots animation */
.loading-dots {
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
    height: 20px;
}

.loading-dots span {
    width: 8px;
    height: 8px;
    background-color: var(--color-primary);
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out both;
}

.loading-dots span:nth-child(1) {
    animation-delay: -0.32s;
}

.loading-dots span:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes bounce {
    0%, 80%, 100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1.0);
    }
}

/* AI Chat Settings Panel */
.ai-chat-settings-panel {
    position: absolute;
    top: 5px;
    right: -200px;
    width: 320px;
    max-width: 320px;
    max-height: calc(100% - 140px);
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    background: rgba(15, 20, 25, 0.92);
    border: 1px solid rgba(0, 255, 136, 0.35);
    box-shadow: 0 0 25px rgba(0, 255, 136, 0.25);
    backdrop-filter: blur(12px);
    overflow-y: auto;
    transform: none;
    opacity: 0;
    pointer-events: none;
    transition: right 0.35s ease, opacity 0.35s ease;
    z-index: 30;
}

.ai-chat-settings-panel.active {
    right: -327px;
    opacity: 1;
    pointer-events: auto;
}

.ai-chat-settings-panel h3 {
    margin: 0;
    font-size: 15px;
    color: var(--color-primary);
    letter-spacing: 1px;
    text-transform: uppercase;
}

#aiChatSystemPrompt {
    width: 100%;
    height: 100px;
    resize: vertical;
    background: var(--color-bg-editor);
    color: var(--color-primary);
    border: 1px solid var(--color-border);
    padding: 10px;
    font-family: var(--font-mono);
    font-size: 14px;
    outline: none;
}

#aiChatSystemPrompt:focus {
    border-color: var(--color-primary);
    box-shadow: inset 0 0 10px rgba(0, 255, 136, 0.2);
}

#aiChatSettingsBtn.active {
    background: var(--color-primary);
    color: var(--color-bg-panel);
    border-color: var(--color-primary);
}


.ai-chat-settings-toggle {
    position: absolute;
    top: -49px;
    right: -95px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid var(--color-border);
    background: rgba(24, 24, 24, 0.95);
    color: var(--color-text);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 12px 22px -14px rgba(0, 0, 0, 0.8);
    transition: border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    z-index: 25;
}

.ai-chat-settings-toggle .toggle-label {
    writing-mode: initial;
    pointer-events: none;
}

.ai-chat-settings-toggle .toggle-orb {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-text-label);
    box-shadow: none;
    animation: none;
    pointer-events: none;
}

.ai-chat-settings-toggle:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    box-shadow: 0 0 18px rgba(0, 255, 136, 0.25);
}

.ai-chat-settings-toggle.active {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: rgba(18, 26, 24, 0.95);
}

.ai-chat-settings-toggle.active .toggle-orb {
    background: var(--color-primary);
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.4);
}


@keyframes toggleOrbPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.85;
    }
    50% {
        transform: scale(1.25);
        opacity: 1;
    }
}

/* --- Toggle Switch for Agent Mode --- */
.settings-field-toggle {
    position: relative;
    display: flex;
    align-items: center;
}

.toggle-switch-container {
    display: inline-block;
    cursor: pointer;
}

.toggle-checkbox {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.toggle-switch {
    position: relative;
    display: block;
    width: 50px;
    height: 26px;
    background-color: var(--color-bg-editor);
    border: 1px solid var(--color-border);
    transition: all 0.3s ease-in-out;
}

.toggle-switch::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: var(--color-text-label);
    transition: all 0.3s ease-in-out;
}

.toggle-checkbox:checked + .toggle-switch {
    background-color: rgba(0, 255, 136, 0.2);
    border-color: var(--color-primary);
}

.toggle-checkbox:checked + .toggle-switch::before {
    background-color: var(--color-primary);
    transform: translateX(24px);
    box-shadow: 0 0 8px var(--color-primary);
}

.settings-field {
    display: flex;
    align-items: center;
    gap: 10px;
}

.settings-field label {
    color: var(--color-text-label);
    font-size: 14px;
    white-space: nowrap;
}

.settings-field input[type="number"] {
    background: var(--color-bg-editor);
    color: var(--color-primary);
    border: 1px solid var(--color-border);
    padding: 8px;
    font-family: var(--font-mono);
    outline: none;
    width: 100px; /* Fixed width for the number input */
}

.settings-field input[type="number"]:focus {
    border-color: var(--color-primary);
}