/* ==========================================
   Theme System & Design System
   ========================================== */

/* 
   Fonts:
   - Primary: Schibsted Grotesk (Clean, airy grotesque - Apfel alternative)
   - Mono: JetBrains Mono (Berkeley Mono alternative)
   - Serif: Newsreader (Original)
*/
@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&family=Newsreader:ital,wght@0,400;0,500;0,600;1,400&display=swap');

/* CSS Houdini property for animated gradient border (must be after @import) */
@property --border-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

:root {
    /* Default to Dark Mode (Night) - Perplexity-inspired */
    --bg-app: #1a1a1a;
    --bg-sidebar: #141414; /* Just a tad darker than app bg */
    --bg-surface: #262626;
    --bg-surface-hover: #333333;
    --border-color: rgba(255, 255, 255, 0.08);
    
    --text-main: #ffffff; /* Crisp white */
    --text-secondary: #a3a3a3;
    --text-muted: #737373;
    --text-inverse: #111111;

    --accent-primary: #14b8a6;
    --accent-hover: #0d9488;
    --accent-light: #5eead4;
    --accent-glow: rgba(20, 184, 166, 0.2);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.2);

    --scrollbar-color: #404040;
    --pagination-active-bg: rgba(20, 184, 166, 0.15);
    --pagination-active-text: #14b8a6;

    --anim-fast: 0.15s;
    --anim-medium: 0.3s;
    --anim-slow: 0.5s;

    --sidebar-rail-width: 72px;
    --sidebar-drawer-width: 260px;
    --chat-top-gap: 32px;
    --chat-footer-height: 165px;/* Space for input panel */
}

[data-theme="light"] {
    --bg-app: #ffffff;
    --bg-sidebar: #f9f9f9;
    --bg-surface: #ffffff;
    --bg-surface-hover: #f0f0f0;
    --border-color: #e5e5e5;
    
    --text-main: #2d2d2d;
    --text-secondary: #666666;
    --text-muted: #999999;
    --text-inverse: #ffffff;

    --accent-primary: #0d9488;
    --accent-hover: #0f766e;
    --accent-light: #ccfbf1;
    --accent-glow: rgba(13, 148, 136, 0.1);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08);

    --scrollbar-color: #d4d4d4;
    --pagination-active-bg: #ccfbf1;
    --pagination-active-text: #0f766e;
}

[data-theme="ocean"] {
    --bg-app: #0a1628;
    --bg-sidebar: rgba(10, 28, 52, 0.75);
    --bg-surface: #152d4a;
    --bg-surface-hover: #1a3555;
    --border-color: rgba(20, 184, 166, 0.15);
    
    --text-main: #f0fdfa;
    --text-secondary: #99f6e4;
    --text-muted: #5eead4;
    --text-inverse: #0a1628;

    --accent-primary: #14b8a6;
    --accent-hover: #0d9488;
    --accent-light: #5eead4;
    --accent-glow: rgba(20, 184, 166, 0.2);

    --scrollbar-color: rgba(94, 234, 212, 0.2);
    --pagination-active-bg: rgba(20, 184, 166, 0.2);
    --pagination-active-text: #99f6e4;
}

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

html {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-color) var(--bg-app);
}

html::-webkit-scrollbar {
    width: 10px;
}

html::-webkit-scrollbar-track {
    background: var(--bg-app);
}

html::-webkit-scrollbar-thumb {
    background: var(--scrollbar-color);
    border-radius: 999px;
    border: 2px solid var(--bg-app);
}

body {
    font-family: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-app);
    color: var(--text-main);

    letter-spacing: 0.01em; /* Slight breathing room */
    line-height: 1.6; /* Airy feel */
    margin: 0;
    padding: 0;
    display: block;
    position: relative;
    padding-left: var(--sidebar-rail-width);
    transition: background-color var(--anim-medium), color var(--anim-medium);
}

/* Ocean-specific Background Effect */
[data-theme="ocean"] body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 50%, rgba(20, 184, 166, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(94, 234, 212, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 40% 90%, rgba(13, 148, 136, 0.05) 0%, transparent 50%);
    animation: gradient-shift 20s ease infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes gradient-shift {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
}

/* Glass Utility */
.glass {
    background: var(--bg-surface);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
}

/* Sidebar Rail + Drawer */
.sidebar-shell {
    position: fixed;
    inset: 0 auto 0 0;
    height: 100vh;
    width: var(--sidebar-rail-width);
    display: flex;
    z-index: 25;
    overflow: visible;
    transition: width var(--anim-medium);
}

.sidebar-shell.drawer-open {
    width: calc(var(--sidebar-rail-width) + var(--sidebar-drawer-width));
}

.nav-rail {
    width: var(--sidebar-rail-width);
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
    padding: 20px 0 24px;
    pointer-events: auto;
    z-index: 30;
    flex-shrink: 0;
    position: relative;
}

[data-theme="ocean"] .nav-rail {
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.rail-logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    margin-bottom: 12px;
    flex-shrink: 0;
}

.rail-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
    border-radius: 50%;
}

.rail-chats {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--text-secondary);
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: all var(--anim-medium);
    font-size: 11px;
    letter-spacing: 0.02em;
    width: 56px;
    /* Removed 'Text' style since text is gone */
}

.rail-chats:hover,
.sidebar-shell.drawer-open .rail-chats {
    background: var(--bg-surface-hover);
    color: var(--text-main);
}

.rail-chats svg {
    display: block;
    width: 24px;
    height: 24px;
}

/* Tasks button (Rail) */
.rail-tasks-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--text-secondary);
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: all var(--anim-medium);
    font-size: 11px;
    letter-spacing: 0.02em;
    width: 56px;
}

.rail-tasks-btn:hover,
.rail-tasks-btn.active {
    background: var(--bg-surface-hover);
    color: var(--text-main);
}

.rail-tasks-btn svg {
    display: block;
    width: 24px;
    height: 24px;
}

/* Feedback Button (Bottom of Rail, above profile) */
.rail-feedback-container {
    margin-top: auto;
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 12px;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.rail-feedback-btn, .rail-guide-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 8px;
    border-radius: 12px;
    transition: all var(--anim-medium);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 56px;
}

.rail-feedback-btn:hover, 
.rail-feedback-btn.active,
.rail-guide-btn:hover,
.rail-guide-btn.active {
    background: var(--bg-surface-hover);
    color: var(--text-main);
}

.rail-feedback-btn svg, .rail-guide-btn svg {
    width: 20px;
    height: 20px;
}

.rail-btn-label {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-align: center;
}

/* Profile Button (Bottom of Rail) */
.rail-profile-container {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
}

.rail-profile-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 10px;
    border-radius: 50%;
    transition: all var(--anim-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
}

.rail-profile-btn:hover, 
.rail-profile-btn.active {
    background: var(--bg-surface-hover);
    color: var(--text-main);
}

.rail-profile-btn svg {
    width: 24px;
    height: 24px;
}

/* Sidebar Drawer */
.sidebar {
    width: var(--sidebar-drawer-width);
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: absolute;
    top: 0;
    left: var(--sidebar-rail-width);
    transform: translateX(calc(-100% - var(--sidebar-rail-width)));
    transition: transform var(--anim-medium) ease, box-shadow var(--anim-medium);
    box-shadow: none;
    pointer-events: none;
}

.sidebar-shell.drawer-open .sidebar {
    transform: translateX(0);
    box-shadow: var(--shadow-md);
    pointer-events: auto;
}

@media (max-width: 768px) {
    :root {
        --sidebar-rail-width: 60px;
        --sidebar-drawer-width: 240px;
    }
    body { padding-left: var(--sidebar-rail-width); }
    .sidebar-shell { z-index: 40; }
}

.sidebar-header {
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.conversation-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

.conversation-item {
    padding: 10px 12px;
    margin-bottom: 4px;
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--anim-medium);
    position: relative;
    color: var(--text-secondary);
    border: 1px solid transparent;
}

.conversation-item:hover {
    background: var(--bg-surface-hover);
    color: var(--text-main);
}

.conversation-item.active {
    background: var(--bg-surface-hover);
    color: var(--text-main);
    border-color: var(--border-color);
}

.delete-conversation-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 18px;
    padding: 4px;
    border-radius: 4px;
    opacity: 0;
    transition: all var(--anim-fast);
}

.conversation-item:hover .delete-conversation-btn { opacity: 1; }
.delete-conversation-btn:hover { background: rgba(255, 0, 0, 0.1); color: #ff4d4d; }

.conversation-title {
    font-size: 14px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conversation-time {
    font-size: 11px;
    color: var(--text-muted);
}

/* Main Layout */
.main-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: var(--chat-top-gap) 20px 0 20px;
    position: relative;
    z-index: 1;
    /* Scroll properties moved to html/body default */
}

/* Entry Page */
.entry-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%; /* Changed from 100vh to avoid overflow with padding */
    min-height: 0; /* Important for nested flex containers */
    padding: 20px 20px var(--chat-footer-height) 20px;
    opacity: 1;
    transition: opacity var(--anim-slow);
    flex: 1; /* Ensure it fills the container */
}

.entry-page.fade-out { opacity: 0; pointer-events: none; }

.entry-title {
    font-size: 42px;
    color: var(--text-main);
    margin-bottom: 40px;
    letter-spacing: -0.02em;
    animation: title-fade-in 0.8s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.title-brand {
    font-weight: 700;
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-light) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-theme="light"] .title-brand {
    background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.title-product {
    font-weight: 400;
    color: var(--text-secondary);
    -webkit-text-fill-color: var(--text-secondary);
}

.beta-badge {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    padding: 3px 7px;
    border-radius: 5px;
    -webkit-text-fill-color: initial;
    background-clip: border-box;
    align-self: center;
}

@keyframes title-fade-in {
    to { opacity: 1; transform: translateY(0); }
}

/* File Staging Area (Pills above input) */
.pending-files-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    width: 100%;
    max-width: 900px; /* Match input width */
}

.pending-files-container:empty {
    margin-bottom: 0;
    display: none;
}

.pending-file-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 13px;
    color: var(--text-main);
    animation: fade-in 0.2s ease;
}

@keyframes fade-in { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }

.pending-file-icon {
    color: var(--accent-primary);
    width: 16px;
    height: 16px;
}

.pending-file-remove {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border-radius: 50%;
    transition: all var(--anim-fast);
}

.pending-file-remove:hover {
    background: rgba(255, 0, 0, 0.1);
    color: #ff4d4d;
}

.entry-input-wrapper {
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px 20px;
    gap: 0;
    box-shadow: var(--shadow-sm);
    transition: all var(--anim-medium);
    width: 100%;
    max-width: 900px;
    margin-bottom: 24px;
}

.entry-input-wrapper:focus-within {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px var(--accent-glow);
    transform: translateY(-2px); /* Subtle lift on focus */
}

.entry-input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-main);
    font-size: 16px;
    min-height: 32px;
    resize: none;
    overflow-y: hidden;
    max-height: 40vh;
    font-family: inherit;
    line-height: 1.5;
    padding: 0;
    field-sizing: content; /* Progressive enhancement */
}

.entry-input-container {
    width: 100%;
    max-width: 900px; /* Match input width */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Input toolbar (shared by entry + chat wrappers) */
.input-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-top: 8px;
}

.input-toolbar-left,
.input-toolbar-right {
    display: flex;
    align-items: center;
    gap: 4px;
}



.action-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--anim-medium);
}

.action-button:hover {
    background: var(--bg-surface-hover);
    color: var(--text-main);
    border-color: var(--text-muted);
}

.action-button.agent-active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--text-inverse);
}

.action-button.agent-active:hover {
    background: var(--accent-hover);
}

/* Chat Page */
.chat-page {
    display: flex;
    flex-direction: row; /* Changed to row for split-screen */
    height: 100vh;
    margin-top: calc(-1 * var(--chat-top-gap));
    margin-left: -20px;
    margin-right: -20px;
    width: calc(100% + 40px);
    overflow: hidden;
    opacity: 0;
    transition: opacity var(--anim-slow) ease-in-out;
}

.chat-page.fade-in { opacity: 1; }

/* Chat Panel (left side when drawer is open) */
.chat-panel {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0; /* Allow shrinking */
    transition: all var(--anim-medium) ease;
    height: 100%;
    overflow-y: auto;
    position: relative; /* Makes .chat-panel an offsetParent so scrollToElement's offsetTop chain is correct */
}

.chat-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    height: auto; /* Remove fixed height calculation */
    transition: max-width var(--anim-medium) ease;
}

/* When drawer is open, reduce chat container width */
.chat-page.drawer-open .chat-container {
    max-width: 100%;
}

/* Chat Header with Artifacts Badge */
.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    min-height: 40px;
    border-bottom: 1px solid transparent;
}

.chat-header-left {
    flex: 1;
}

.chat-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.artifacts-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.artifacts-badge:hover {
    background: var(--bg-surface-hover);
    border-color: var(--accent-primary);
    color: var(--text-main);
}

.artifacts-badge svg {
    flex-shrink: 0;
}

.artifacts-badge-count {
    background: var(--accent-primary);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

/* ==========================================
   Artifact Drawer (Right Panel)
   ========================================== */
.artifact-drawer {
    width: 0;
    min-width: 0;
    opacity: 0;
    overflow: hidden;
    background: var(--bg-surface);
    border-left: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    transition: all var(--anim-medium) ease;
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    z-index: 40;
}

.artifact-drawer.open {
    width: clamp(400px, 50%, 600px);
    min-width: 400px;
    max-width: 600px;
    opacity: 1;
    overflow: hidden; /* Keep hidden, let content scroll */
}

/* When drawer is open, size chat to the left of the fixed drawer */
.chat-page.drawer-open .chat-panel {
    flex: 0 0 calc(100% - clamp(400px, 50%, 600px));
    max-width: calc(100% - clamp(400px, 50%, 600px));
}

.artifact-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-surface);
    position: sticky;
    top: 0;
    z-index: 10;
}

.artifact-drawer-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 8px;
}

.artifact-drawer-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--anim-fast);
}

.artifact-drawer-close:hover {
    background: var(--bg-surface-hover);
    color: var(--text-main);
}

.artifact-drawer-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

/* Artifact Tabs */
.artifact-tabs {
    display: flex;
    gap: 4px;
    padding: 0 20px 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-surface);
}

.artifact-tab {
    padding: 8px 16px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--anim-fast);
}

.artifact-tab:hover {
    background: var(--bg-surface-hover);
    color: var(--text-main);
}

.artifact-tab.active {
    background: var(--bg-surface-hover);
    color: var(--accent-primary);
}

/* Artifact Section */
.artifact-section {
    margin-bottom: 24px;
}

.artifact-section-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}

/* Action Items Table */
.action-items-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.action-items-table th {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 2px solid var(--border-color);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.action-items-table td {
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-main);
    vertical-align: top;
}

.action-items-table tr:hover {
    background: var(--bg-surface-hover);
}

.action-item-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--accent-primary);
    cursor: pointer;
}

.action-item-task {
    font-weight: 500;
}

.action-item-task.completed {
    text-decoration: line-through;
    color: var(--text-muted);
}

.action-item-owner {
    color: var(--text-secondary);
    font-size: 12px;
}

.action-item-due {
    font-size: 12px;
    color: var(--text-muted);
}

.action-item-due.overdue {
    color: #ef4444;
}

.action-item-priority {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.action-item-priority.high {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.action-item-priority.medium {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.action-item-priority.low {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

/* Decision Cards */
.decision-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.decision-card {
    background: var(--bg-app);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 16px;
    transition: all var(--anim-fast);
}

.decision-card:hover {
    border-color: var(--text-muted);
}

.decision-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 8px;
}

.decision-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    flex: 1;
}

.decision-card-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.decision-card-status.draft {
    background: rgba(156, 163, 175, 0.2);
    color: var(--text-secondary);
}

.decision-card-status.approved {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.decision-card-status.rejected {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.decision-card-rationale {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 12px;
}

.decision-card-actions {
    display: flex;
    gap: 8px;
}

.decision-card-btn {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--anim-fast);
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
}

.decision-card-btn:hover {
    background: var(--bg-surface-hover);
    color: var(--text-main);
}

.decision-card-btn.approve {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
}

.decision-card-btn.approve:hover {
    background: var(--accent-hover);
}

/* Assumption Cards */
.assumption-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.assumption-card {
    background: var(--bg-app);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 16px;
    transition: all var(--anim-fast);
}

.assumption-card:hover {
    border-color: var(--text-muted);
}

.assumption-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 8px;
    gap: 12px;
}

.assumption-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    flex: 1;
}

.assumption-card-badges {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.assumption-card-risk,
.assumption-card-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.assumption-card-risk.risk-high {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.assumption-card-risk.risk-medium {
    background: rgba(234, 179, 8, 0.15);
    color: #eab308;
}

.assumption-card-risk.risk-low {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.assumption-card-status.unvalidated {
    background: rgba(156, 163, 175, 0.2);
    color: var(--text-secondary);
}

.assumption-card-status.validated {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.assumption-card-status.invalidated {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.assumption-card-rationale {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 12px;
}

.assumption-card-category {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    color: var(--text-muted);
    background: var(--bg-surface);
    margin-bottom: 10px;
}

.assumption-card-actions {
    display: flex;
    gap: 8px;
}

.assumption-card-btn {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--anim-fast);
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
}

.assumption-card-btn:hover {
    background: var(--bg-surface-hover);
    color: var(--text-main);
}

.assumption-card-btn.validate {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.3);
    color: #22c55e;
}

.assumption-card-btn.validate:hover {
    background: rgba(34, 197, 94, 0.25);
}

.assumption-card-btn.invalidate {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.assumption-card-btn.invalidate:hover {
    background: rgba(239, 68, 68, 0.25);
}

/* Artifact Buttons Container (in chat messages) */
.artifact-buttons-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

/* Artifact Reference Button (in chat) */
.artifact-ref-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--accent-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--anim-fast);
    margin-top: 0; /* Remove margin when in container */
}

.artifact-ref-btn:hover {
    background: var(--bg-surface-hover);
    border-color: var(--accent-primary);
}

.artifact-ref-btn svg {
    width: 16px;
    height: 16px;
}

/* Snapshot Card Styles (per-message artifact buttons) */
.artifact-snapshot-card {
    position: relative;
}

.artifact-snapshot-card[data-change-type="items_added"]::after {
    content: '+';
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--status-success);
    color: white;
    font-size: 10px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.artifact-snapshot-card[data-change-type="updated"]::after {
    content: '✎';
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--accent-primary);
    color: white;
    font-size: 10px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Snapshot Indicator in Drawer Title */
.snapshot-indicator {
    font-size: 12px;
    font-weight: normal;
    color: var(--text-muted);
    font-style: italic;
}

/* Artifact Buttons Container */
.artifact-buttons-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

/* Empty State */
.artifact-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted);
}

.artifact-empty-state svg {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.artifact-empty-state p {
    font-size: 14px;
    max-width: 250px;
}

.chat-messages {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow: visible; /* Remove scroll from here */
    /* Small base bottom-padding; scrollToElement() dynamically expands it
       when a message needs to be pushed to the top of the viewport.
       This avoids a permanent scrollbar on short conversations. */
    padding-bottom: 24px;
}

/* Remove scrollbar styles from .chat-messages since they are now on .main-container */
.chat-messages::-webkit-scrollbar { display: none; }
.chat-messages::-webkit-scrollbar-track { display: none; }
.chat-messages::-webkit-scrollbar-thumb { display: none; }

.chat-message {
    display: flex;
    gap: 16px;
    line-height: 1.6;
}

.chat-message.user {
    justify-content: flex-end;
}

.message-content {
    max-width: 85%;
}

.chat-message.user .message-content {
    background: var(--bg-surface);
    padding: 12px 16px;
    border-radius: 12px;
    color: var(--text-main);
}

/* Ensure symmetric padding by removing bottom margin from last element */
.message-content > *:last-child {
    margin-bottom: 0;
}

/* Light Mode override for user messages to ensure bounding box visibility */
[data-theme="light"] .chat-message.user .message-content {
    background: #f5f5f5; /* Slightly darker than white surface */
    border: 1px solid #e0e0e0;
}

.chat-message.assistant .message-content {
    color: var(--text-main);
    padding: 0 16px; /* Align text with input panel text */
}

/* Subtle horizontal rules inside assistant messages */
.chat-message.assistant .message-content hr {
    border: none;
    height: 1px;
    background: rgba(255,255,255,0.12);
    margin: 1em 0;
}

.chat-message.agent-badge {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Input Area */
.input-container {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 0 20px 20px;
    background: var(--bg-app); /* Solid background to hide content scrolling behind */
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    transition: right var(--anim-medium) ease;
}

/* Adjust input when drawer is open */
.chat-page.drawer-open .input-container {
    right: 0;
}

[data-theme="ocean"] .input-container {
    background: transparent; /* Glass effect needs transparent bg */
}

.input-wrapper {
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 8px 16px;
    gap: 0;
    width: 100%;
    max-width: 1000px;
    box-shadow: var(--shadow-sm);
    transition: all var(--anim-medium);
}

.input-wrapper:focus-within {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px var(--accent-glow);
}

/* ── Voice Recording Active State ── */

@keyframes shimmer-rotate {
    to { --border-angle: 360deg; }
}

@keyframes recording-pulse {
    0%, 100% { box-shadow: 0 0 0 2px var(--accent-glow), 0 0 12px rgba(20, 184, 166, 0.15); }
    50%      { box-shadow: 0 0 0 3px var(--accent-glow), 0 0 20px rgba(20, 184, 166, 0.3); }
}

.entry-input-wrapper.recording-active,
.input-wrapper.recording-active {
    border: 2px solid transparent;
    background:
        linear-gradient(var(--bg-surface), var(--bg-surface)) padding-box,
        conic-gradient(
            from var(--border-angle),
            transparent 40%,
            rgba(255, 255, 255, 0.08) 55%,
            var(--accent-primary) 70%,
            rgba(255, 255, 255, 0.35) 75%,
            var(--accent-primary) 80%,
            rgba(255, 255, 255, 0.08) 90%,
            transparent 100%
        ) border-box;
    animation: shimmer-rotate 2.5s linear infinite;
    box-shadow: 0 0 0 2px var(--accent-glow), 0 0 14px rgba(20, 184, 166, 0.2);
}

/* Suppress the normal focus-within glow while shimmer is active */
.entry-input-wrapper.recording-active:focus-within,
.input-wrapper.recording-active:focus-within {
    box-shadow: 0 0 0 2px var(--accent-glow), 0 0 14px rgba(20, 184, 166, 0.2);
    transform: none;
}

/* Fallback for browsers without @property (pulsing glow instead of rotating gradient) */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
    .entry-input-wrapper.recording-active,
    .input-wrapper.recording-active {
        border: 2px solid var(--accent-primary);
        background: var(--bg-surface);
        animation: recording-pulse 2s ease-in-out infinite;
    }
}

/* Hide non-essential toolbar buttons during recording, keep remaining buttons pinned right */
.recording-active .input-toolbar-left,
.recording-active .dropdown-container {
    display: none;
}

.recording-active .input-toolbar-right {
    margin-left: auto;
}

.chat-input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-main);
    font-size: 15px;
    resize: none;
    overflow-y: hidden;
    max-height: 40vh;
    min-height: 24px;
    font-family: inherit;
    line-height: 1.5;
    padding: 4px 0;
    field-sizing: content; /* Progressive enhancement */
}

/* Simplified, blended icons */
.icon-button {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-muted); /* Subtle color */
    padding: 8px;
    border-radius: 8px;
    transition: all var(--anim-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-button:hover {
    background: var(--bg-surface-hover);
    color: var(--text-main);
}

.icon-button svg {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

/* Submit / Stop button */
.submit-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: var(--accent-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s ease, opacity 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    flex-shrink: 0;
}

.submit-btn:hover:not(:disabled) {
    background: var(--accent-hover);
    transform: scale(1.05);
}

.submit-btn:active:not(:disabled) {
    transform: scale(0.95);
}

.submit-btn:disabled {
    background: var(--bg-surface-hover);
    color: var(--text-muted);
    cursor: default;
    opacity: 0.4;
}

.submit-btn.stop-mode {
    background: var(--bg-surface);
    color: var(--text-main);
    border: 1.5px solid var(--border-color);
    animation: stopPulse 2s ease-in-out infinite;
}

.submit-btn.stop-mode:hover {
    background: var(--bg-surface-hover);
    border-color: var(--text-muted);
    animation: none;
}

.submit-btn.stop-mode:active {
    transform: scale(0.92);
}

@keyframes stopPulse {
    0%, 100% { border-color: var(--border-color); }
    50% { border-color: var(--text-muted); }
}

.submit-btn .stop-icon {
    display: none;
}

.submit-btn.stop-mode .submit-icon {
    display: none;
}

.submit-btn.stop-mode .stop-icon {
    display: block;
}

/* Interrupted message badge */
.interrupted-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-muted);
    background: var(--bg-surface-hover);
    padding: 3px 10px;
    border-radius: 12px;
    margin-top: 8px;
}

.interrupted-badge svg {
    width: 12px;
    height: 12px;
    stroke-width: 2;
}

/* .chat-actions removed — toolbar is now inside .input-wrapper */

/* Dropdowns & Menus */
.dropdown-container {
    position: relative;
    display: inline-block;
}

/* Click-based dropdown (default hidden) */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 6px;
    box-shadow: var(--shadow-lg);
    display: none; /* Hidden by default */
    z-index: 1000;
    min-width: 200px;
    transform-origin: top left;
}

.dropdown-menu.show {
    display: block;
    animation: menu-scale-in var(--anim-fast) ease-out;
}

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

/* Dropup Variation */
.dropdown-menu.drop-up {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 12px;
    transform-origin: bottom left;
}

/* Sidebar Dropup specific adjustment */
.rail-profile-container .dropdown-menu.drop-up {
    left: 100%; /* Open to the right of the rail */
    bottom: 0;
    margin-bottom: 0;
    margin-left: 12px;
    transform-origin: bottom left;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-main);
    font-size: 14px;
    transition: background var(--anim-fast);
}

.dropdown-item:hover {
    background: var(--bg-surface-hover);
}

/* Active Model State - No Checkmark */
.dropdown-item.active-model {
    background: var(--bg-surface-hover);
    color: var(--accent-primary);
    font-weight: 500;
}

/* Agent Badge (e.g., "Default") */
.agent-badge {
    margin-left: auto;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    background: var(--accent-primary);
    color: var(--bg-app);
    border-radius: 4px;
}

.dropdown-section-title {
    padding: 8px 12px 4px;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* Preferences Overlay */
.preferences-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 200;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    backdrop-filter: blur(4px);
}

.preferences-overlay.show { display: flex; }

.preferences-container {
    width: 100%;
    max-width: 500px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 32px;
    box-shadow: var(--shadow-lg);
    animation: menu-scale-in var(--anim-fast) ease-out;
}

.preferences-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.preferences-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-main);
}

.close-prefs-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
}

.close-prefs-btn:hover {
    color: var(--text-main);
}

.pref-group {
    margin-bottom: 20px;
}

.pref-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.pref-input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--bg-app);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    font-size: 14px;
    outline: none;
}

.pref-input:focus {
    border-color: var(--accent-primary);
}

.pref-input::placeholder {
    color: var(--text-muted);
}

.pref-select {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--bg-app);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    font-size: 14px;
    outline: none;
    cursor: pointer;
}

.pref-select:focus {
    border-color: var(--accent-primary);
}

.pref-textarea {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    background: var(--bg-app);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    resize: vertical;
    min-height: 120px;
}

.pref-textarea:focus {
    border-color: var(--accent-primary);
}

.pref-submit-btn {
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    background: var(--accent-primary);
    border: none;
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--anim-medium);
}

.pref-submit-btn:hover:not(:disabled) {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.pref-submit-btn:active:not(:disabled) {
    transform: translateY(0);
}

.pref-submit-btn:disabled {
    background: var(--bg-surface-hover);
    color: var(--text-muted);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Welcome Modal */
.welcome-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 500;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
    opacity: 0;
    transition: opacity var(--anim-medium);
}

.welcome-modal-overlay.show {
    display: flex;
    opacity: 1;
}

.welcome-modal-container {
    width: 100%;
    max-width: 820px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    transform: scale(0.95);
    transition: transform var(--anim-medium);
    display: flex;
    flex-direction: column;
}

.welcome-modal-overlay.show .welcome-modal-container {
    transform: scale(1);
}

.welcome-header {
    padding: 28px 30px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-surface);
    position: sticky;
    top: 0;
    z-index: 10;
    border-radius: 20px 20px 0 0;
}

.welcome-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-main);
    letter-spacing: -0.01em;
}

.welcome-title-brand {
    font-weight: 700;
    color: var(--accent-primary);
}

.welcome-content {
    padding: 28px 30px;
    color: var(--text-main);
    line-height: 1.6;
}

.welcome-intro p {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.7;
}

.welcome-section {
    margin-bottom: 24px;
}

.welcome-section:last-child {
    margin-bottom: 0;
}

.welcome-divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 4px 0 24px;
    opacity: 0.6;
}

.welcome-section-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 14px;
    color: var(--accent-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.welcome-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 12px;
}

.welcome-card-grid-2x2 {
    grid-template-columns: repeat(2, 1fr);
}

.welcome-card {
    background: var(--bg-app);
    padding: 18px 20px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    position: relative;
}

.welcome-card-accent {
    overflow: hidden;
    position: relative;
}

.welcome-card-accent::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-light));
}

.welcome-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    border-color: var(--accent-primary);
}

.welcome-card-icon {
    margin-bottom: 10px;
    color: var(--accent-primary);
    display: flex;
    align-items: center;
}

.welcome-card-icon svg {
    opacity: 0.85;
}

.welcome-card h4 {
    margin-bottom: 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 8px;
}

.welcome-card p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.55;
}

.welcome-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-primary) 25%, transparent);
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1.4;
    vertical-align: middle;
}

.welcome-tips-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 12px;
}

.welcome-tip {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.55;
    padding: 12px 14px;
    background: var(--bg-app);
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

.welcome-tip strong {
    color: var(--text-main);
    font-weight: 600;
}

.welcome-footer {
    padding: 18px 30px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    background: var(--bg-surface);
    position: sticky;
    bottom: 0;
    border-radius: 0 0 20px 20px;
}

.welcome-btn {
    padding: 11px 28px;
    background: var(--accent-primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
    letter-spacing: 0.01em;
    transition: background var(--anim-fast), transform 0.15s ease;
}

.welcome-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

@media (max-width: 600px) {
    .welcome-card-grid,
    .welcome-card-grid-2x2,
    .welcome-tips-grid {
        grid-template-columns: 1fr;
    }
    .welcome-content {
        padding: 20px;
    }
    .welcome-header {
        padding: 20px;
    }
}

/* Utility classes for text and Markdown */
.chat-message h1, .chat-message h2, .chat-message h3 {
    color: var(--text-main);
    margin: 16px 0 8px;
    font-weight: 600;
    font-family: 'Newsreader', serif; /* Editorial touch for headings */
    letter-spacing: -0.01em;
}

.chat-message p {
    color: var(--text-main);
    margin-bottom: 12px;
}

.chat-message ul, .chat-message ol {
    margin: 8px 0 16px 0;
    padding-left: 24px;
    color: var(--text-main);
}

.chat-message li {
    margin-bottom: 6px;
    line-height: 1.5;
}

.chat-message li:last-child {
    margin-bottom: 0;
}

.chat-message code {
    background: var(--bg-surface-hover);
    padding: 2px 4px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.85em; /* Slightly smaller for mono to match x-height */
    color: var(--accent-primary);
}

.chat-message pre {
    background: #1e1e1e; /* Default Dark */
    padding: 12px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 12px 0;
    border: 1px solid var(--border-color);
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

[data-theme="light"] .chat-message pre {
    background: #f5f5f5; /* Light Grey for Light Mode */
    border-color: #e5e5e5;
}

.chat-message pre code {
    background: transparent;
    color: #d4d4d4; /* Default Dark Text */
    padding: 0;
}

[data-theme="light"] .chat-message pre code {
    color: #333333; /* Dark Text for Light Mode */
}

.chat-message a { color: var(--accent-primary); text-decoration: none; }
.chat-message a:hover { text-decoration: underline; }

/* Loading Animation */
.loading::after {
    content: '...';
    animation: dots 1.5s infinite;
}

/* Hide loading spinner when user prefers it hidden (if added class) or simply ensure it hides properly */
.conversation-loader:not(.visible) {
    display: none !important;
}

/* Tool Styles */
.tool-execution-section {
    margin: 16px 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    overflow: hidden;
}

.tool-section-header {
    padding: 10px 0;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    position: relative;
    overflow: hidden;
    transition: color 0.2s;
}

.tool-section-header:hover {
    color: var(--text-main);
}

.tool-section-icon {
    display: none; /* Remove default icon */
}

.tool-section-chevron {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
    color: var(--text-muted);
}

/* Default state (Expanded for Analyzing) - Pointing Up (per user request) or Down? 
   User said: "dropdown marker should be facing sideways instead of down [default collapsed?]"
   and "drop up can be same facing upward". 
   
   Let's interpret: 
   Collapsed: Right (>)
   Expanded: Up (^) or Down (v). 
   
   If "Analyzing" is expanding, it should show the "Close" action, which is typically Up. 
   But standard accordion is Down = Open. 
   Let's stick to: 
   Collapsed: 0deg (Right)
   Expanded: 90deg (Down) OR -90deg (Up)
*/

/* We will use an SVG in JS. Here we just handle rotation. */
/* Assuming the icon is a Right Chevron (>) by default */

.tool-execution-section:not(.collapsed) .tool-section-chevron {
    transform: rotate(90deg); /* Points Down */
}

.tool-item.expanded .tool-item-chevron {
    transform: rotate(90deg); /* Points Down */
}

/* Shimmer effect for loading tools */
.tool-section-header.loading::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 100%
    );
    transform: translateX(-100%);
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    100% { transform: translateX(100%); }
}

.tool-section-content {
    padding: 8px 0 12px 16px;
    display: block;
    border-left: 2px solid var(--border-color);
    margin-left: 6px;
    /* Animation for smooth open/close */
    max-height: 2000px; /* Large enough to fit content */
    opacity: 1;
    transform: translateY(0);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

/* Removed slide-down keyframe animation in favor of transition */

.tool-execution-section.collapsed .tool-section-content {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    transform: translateY(-10px);
}

.tool-item {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-bottom: 8px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.tool-item:hover {
    border-color: var(--text-muted);
}

.tool-item-header {
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    cursor: pointer;
    color: var(--text-secondary);
}

.tool-item-details {
    padding: 8px 12px;
    border-top: 1px solid var(--border-color);
    font-size: 12px;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    display: none; /* Explicitly hidden unless expanded */
}

.tool-item.expanded .tool-item-details {
    display: block;
}

.tool-detail-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tool-detail-description {
    font-size: 12px;
    color: var(--text-main);
    margin-bottom: 8px;
    font-family: var(--font-family);
    font-style: italic;
}

.tool-detail-value {
    font-size: 12.5px;
    color: var(--text-main);
    line-height: 1.5;
    font-family: var(--font-family);
    white-space: pre-wrap;
    word-break: break-word;
}

/* File Upload Chips in Chat */
.file-attachment-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    padding: 10px 14px;
    border-radius: 10px;
    margin-bottom: 12px;
    width: fit-content;
}

.file-download-btn {
    margin-left: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: var(--text-secondary);
    border: 1px solid transparent;
    background: transparent;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.file-download-btn:hover {
    background: var(--bg-surface-hover);
    border-color: var(--border-color);
    color: var(--text-main);
    transform: translateY(-1px);
}

.file-download-btn:active {
    transform: translateY(0);
}

.file-group-item-link {
    font-size: 13px;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
}

.file-group-item-link:hover {
    text-decoration: underline;
}

.file-icon {
    color: #10a37f; /* ChatGPT green default */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(16, 163, 127, 0.1);
    padding: 8px;
    border-radius: 8px;
}

.file-icon.pdf {
    color: #ef4444; /* Red for PDF */
    background: rgba(239, 68, 68, 0.1);
}

.file-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.file-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-main);
}

.file-type {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* File Grouping (Multiple Uploads) */
.file-group-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-bottom: 12px;
    width: fit-content;
    min-width: 200px;
    overflow: hidden;
}

.file-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    background: var(--bg-surface);
    transition: background 0.2s;
}

.file-group-header:hover {
    background: var(--bg-surface-hover);
}

.file-group-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-main);
    flex: 1;
}

.file-group-chevron {
    font-size: 10px;
    color: var(--text-secondary);
    transition: transform 0.2s;
}

.file-group-list {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background: var(--bg-app);
    border-top: 1px solid var(--border-color);
}

.file-group-list.expanded {
    max-height: 500px; /* Arbitrary limit for animation */
    overflow-y: auto;
}

.file-group-list.expanded ~ .file-group-header .file-group-chevron {
    transform: rotate(180deg);
}

/* Correct rotation selector */
.file-group-card:has(.file-group-list.expanded) .file-group-chevron {
    transform: rotate(180deg);
}
/* Fallback if :has not supported (though mostly is) - javascript toggle on header is better */

.file-group-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border-color);
}

.file-group-item:last-child {
    border-bottom: none;
}

.file-group-item-icon {
    color: #10a37f;
    display: flex;
}
.file-group-item-icon.pdf {
    color: #ef4444;
}

.file-group-item-name {
    font-size: 13px;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Modernized DataTables Buttons */
.structured-table-wrapper {
    margin-top: 24px; /* Added spacing */
    width: 100%;
    overflow: hidden;
    background: transparent; /* Removed background */
    border: none; /* Removed border */
    border-top: 1px solid var(--border-color); /* Add top border for separation */
    padding-top: 24px; /* Add padding to separate from text */
}

.dt-button, .structured-table-load-full {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-main);
    transition: all 0.2s;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}

.dt-button:hover, .structured-table-load-full:hover {
    background: var(--bg-surface-hover);
    border-color: var(--accent-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* DataTables overrides for themes */
.dataTables_wrapper { 
    color: var(--text-secondary);
    margin-top: 12px;
}

/* Modern Search Bar */
.dataTables_filter {
    margin-bottom: 20px;
}

.dataTables_filter label {
    font-size: 0; /* Hide "Search:" text */
    position: relative;
    display: flex;
    align-items: center;
}

.dataTables_filter input {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
    border-radius: 99px !important; /* Pill shape */
    padding: 10px 16px 10px 40px !important; /* Space for icon */
    font-size: 14px !important;
    line-height: 1.5;
    width: 260px;
    outline: none;
    transition: all 0.2s ease;
    /* Search Icon SVG (Gray) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 14px center !important;
    background-size: 18px !important;
}

.dataTables_filter input:focus {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 2px var(--accent-glow) !important;
    width: 320px;
}

/* Modern Buttons */
.dt-buttons {
    margin-bottom: 20px;
}

.dt-button, .structured-table-load-full {
    background: transparent !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--text-main) !important;
    transition: all 0.2s !important;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    gap: 8px;
}

/* Add chevron to Column Visibility button - ONLY for the main button, not the dropdown items */
.dt-buttons > .dt-button.buttons-columnVisibility::after {
    content: '';
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.7;
    transition: transform 0.2s;
}

/* Rotate chevron when active/open */
.dt-buttons > .dt-button.buttons-columnVisibility:hover::after {
    opacity: 1;
}

.dt-button:hover, .structured-table-load-full:hover {
    background: var(--bg-surface-hover) !important;
    border-color: var(--text-secondary) !important;
    transform: translateY(-1px);
}

.dataTables_length select {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 6px 24px 6px 10px;
    border-radius: 6px;
    cursor: pointer;
}

table.dataTable tbody tr { background: var(--bg-app); }
table.dataTable tbody tr:hover { background: var(--bg-surface-hover) !important; }
table.dataTable tbody td { border-color: var(--border-color); color: var(--text-main); }
table.dataTable thead th { border-bottom-color: var(--accent-primary); color: var(--text-main); font-weight: 600; padding-bottom: 12px; }
.dataTables_paginate .paginate_button {
    color: var(--text-main) !important;
    border-radius: 6px !important;
    border: 1px solid transparent !important;
    margin-left: 4px;
}
.dataTables_paginate .paginate_button.current {
    background: var(--pagination-active-bg) !important;
    color: var(--pagination-active-text) !important;
    border: 1px solid transparent;
    font-weight: 600;
}
.dataTables_paginate .paginate_button:hover:not(.current) {
    background: var(--bg-surface-hover) !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}

/* DataTables Column Visibility Dropdown Styling */
div.dt-button-collection {
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    padding: 8px !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5) !important;
    min-width: 220px !important;
}

div.dt-button-collection .dt-button {
    background: transparent !important;
    color: var(--text-main) !important;
    border: none !important;
    border-radius: 6px !important;
    margin-bottom: 4px !important;
    box-shadow: none !important;
    text-align: left !important;
    padding: 8px 12px !important;
    justify-content: flex-start !important;
}

div.dt-button-collection .dt-button:hover {
    background: var(--bg-surface-hover) !important;
}

div.dt-button-collection .dt-button.active {
    background: var(--bg-surface-hover) !important;
    color: var(--accent-primary) !important;
    font-weight: 500 !important;
    position: relative;
}

/* Checkmark for active columns */
div.dt-button-collection .dt-button.active::after {
    content: '✓';
    position: absolute;
    right: 12px;
    color: var(--accent-primary);
    background: none; /* Reset background from main button rule */
    width: auto; height: auto;
}

/* Background for the buttons collection overlay */
div.dt-button-background {
    background: rgba(0, 0, 0, 0.5) !important; /* Dimmed overlay */
    backdrop-filter: blur(2px);
}

/* ==========================================
   File Upload Loading States
   ========================================== */

/* Spinner Animation */
@keyframes file-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.file-icon.loading {
    position: relative;
}

/* Keep the icon visible during loading — just slightly dimmed */
.file-icon.loading svg {
    opacity: 0.35;
}

/* Spinner ring overlays the icon instead of replacing it */
.file-icon.loading::after {
    content: '';
    position: absolute;
    width: 34px;
    height: 34px;
    border: 2px solid rgba(255,255,255,0.08);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: file-spin 0.8s linear infinite;
}

/* Spinner for group header */
.file-group-header.loading .file-icon svg {
    opacity: 0.35;
}

.file-group-header.loading .file-icon {
    position: relative;
}

.file-group-header.loading .file-icon::after {
    content: '';
    position: absolute;
    width: 28px;
    height: 28px;
    border: 2px solid rgba(255,255,255,0.08);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: file-spin 0.8s linear infinite;
}

/* Uploading text indicator */
.file-type.uploading {
    color: var(--accent-primary);
}

.file-group-title.uploading {
    color: var(--accent-primary);
}

/* ==========================================
   Message Feedback UI
   ========================================== */
.message-feedback {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 12px;
    opacity: 1; /* Always visible */
    justify-content: flex-start;
}

.feedback-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-secondary); /* Subtle by default */
    padding: 6px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.feedback-btn:hover {
    background: var(--bg-surface-hover);
    color: var(--text-main);
}

.feedback-btn.active {
    color: var(--accent-primary);
    background: rgba(20, 184, 166, 0.1);
}

.feedback-btn svg {
    width: 16px;
    height: 16px;
}

.feedback-btn.copy.copied {
    color: var(--accent-primary);
}

/* Feedback Modal */
.feedback-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.feedback-modal-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.feedback-modal {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    width: 100%;
    max-width: 400px;
    padding: 20px;
    box-shadow: var(--shadow-lg);
    transform: scale(0.95);
    transition: transform 0.2s;
}

.feedback-modal-overlay.visible .feedback-modal {
    transform: scale(1);
}

.feedback-modal-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-main);
}

.feedback-modal textarea {
    width: 100%;
    min-height: 100px;
    padding: 12px;
    background: var(--bg-app);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-main);
    font-family: inherit;
    resize: vertical;
    margin-bottom: 16px;
}

.feedback-modal textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.feedback-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.feedback-modal-btn {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    border: none;
    font-weight: 500;
    transition: background 0.2s;
}

.feedback-modal-btn.cancel {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.feedback-modal-btn.cancel:hover {
    background: var(--bg-app);
    color: var(--text-main);
}

.feedback-modal-btn.submit {
    background: var(--accent-primary);
    color: white;
}

.feedback-modal-btn.submit:hover {
    background: var(--accent-hover);
}

/* ==========================================
   Floating Table Scrollbar
   ========================================== */
.table-floating-scrollbar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    background: var(--bg-surface);
    border-top: 1px solid var(--border-color);
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 100; /* Increased z-index */
}

.table-floating-scrollbar.visible {
    opacity: 1;
}

.table-floating-scrollbar.fixed {
    position: fixed;
    z-index: 9999; /* Ensure it's above everything */
    border-radius: 0;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
}

.table-floating-scrollbar-inner {
    height: 1px;
}

/* Scrollbar styling for floating bar */
.table-floating-scrollbar::-webkit-scrollbar {
    height: 10px;
}

.table-floating-scrollbar::-webkit-scrollbar-track {
    background: var(--bg-surface);
}

.table-floating-scrollbar::-webkit-scrollbar-thumb {
    background: var(--scrollbar-color);
    border-radius: 5px;
}

.table-floating-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--accent-hover);
}

/* ==========================================
   Toast Notifications
   ========================================== */
.toast-notification {
    position: fixed;
    bottom: 100px;
    right: 24px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: var(--shadow-lg);
    z-index: 10000;
    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    max-width: 400px;
}

.toast-notification.show {
    transform: translateX(0);
    opacity: 1;
}

.toast-notification.toast-success {
    border-left: 4px solid var(--accent-primary);
}

.toast-notification.toast-info {
    border-left: 4px solid var(--text-muted);
}

.toast-notification.toast-error {
    border-left: 4px solid #ef4444;
}

.toast-message {
    flex: 1;
    color: var(--text-main);
    font-size: 14px;
}

.toast-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    border-radius: 4px;
    transition: all 0.2s;
}

.toast-close:hover {
    background: var(--bg-surface-hover);
    color: var(--text-main);
}

/* ============================================
   GLOBAL ARTIFACTS PAGE
   ============================================ */

/* Rail Artifacts Button */
.rail-artifacts-btn {
    width: 100%;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 8px;
    transition: all var(--anim-fast);
    margin-bottom: 8px;
}

.rail-artifacts-btn:hover {
    background: var(--bg-surface-hover);
    color: var(--text-main);
}

.rail-artifacts-btn.active {
    background: var(--accent-primary);
    color: white;
}

/* Artifacts Page */
.artifacts-page {
    position: fixed;
    top: 0;
    left: var(--sidebar-rail-width);
    right: 0;
    bottom: 0;
    background: var(--bg-app);
    z-index: 100;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.artifacts-page-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 30px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-surface);
}

.back-to-chat-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all var(--anim-fast);
}

.back-to-chat-btn:hover {
    background: var(--bg-surface-hover);
    color: var(--text-main);
    border-color: var(--text-muted);
}

.artifacts-page-title {
    flex: 1;
    font-size: 24px;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
}

.artifacts-page-filters {
    display: flex;
    gap: 12px;
}

.artifact-filter-select {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-app);
    color: var(--text-main);
    font-size: 14px;
    cursor: pointer;
    min-width: 140px;
}

.artifact-filter-select:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.artifacts-page-content {
    flex: 1;
    overflow-y: auto;
    padding: 30px;
}

.artifacts-loading,
.artifacts-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px;
    color: var(--text-muted);
    text-align: center;
}

.artifacts-loading .loader {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.artifacts-empty svg {
    opacity: 0.3;
    margin-bottom: 16px;
}

.artifacts-empty h3 {
    font-size: 18px;
    color: var(--text-secondary);
    margin: 0 0 8px;
}

.artifacts-empty p {
    font-size: 14px;
    max-width: 400px;
}

/* Artifacts Grid */
.artifacts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
}

/* Global Artifact Card */
.global-artifact-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    transition: all var(--anim-fast);
}

.global-artifact-card:hover {
    border-color: var(--text-muted);
    box-shadow: var(--shadow-md);
}

.global-artifact-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 12px;
}

.global-artifact-card-type {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--accent-primary);
}

.global-artifact-card-type svg {
    width: 16px;
    height: 16px;
}

.global-artifact-card-date {
    font-size: 12px;
    color: var(--text-muted);
}

.global-artifact-card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 8px;
}

.global-artifact-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.global-artifact-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 500;
}

.global-artifact-card-badge.type-action {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.global-artifact-card-badge.type-decision {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
}

.global-artifact-card-badge.type-assumption {
    background: rgba(234, 179, 8, 0.15);
    color: #eab308;
}

.global-artifact-card-badge.status-pending {
    background: rgba(156, 163, 175, 0.2);
    color: var(--text-secondary);
}

.global-artifact-card-badge.status-completed {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.global-artifact-card-badge.status-approved {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.global-artifact-card-badge.status-draft {
    background: rgba(156, 163, 175, 0.2);
    color: var(--text-secondary);
}

.global-artifact-card-items {
    border-top: 1px solid var(--border-color);
    padding-top: 12px;
    margin-top: 12px;
}

.global-artifact-card-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    font-size: 13px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
}

.global-artifact-card-item:last-child {
    border-bottom: none;
}

.global-artifact-card-item-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--accent-primary);
}

.global-artifact-card-item.completed {
    text-decoration: line-through;
    opacity: 0.6;
}

.global-artifact-card-thread {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--anim-fast);
}

.global-artifact-card-thread:hover {
    color: var(--accent-primary);
}

.global-artifact-card-thread svg {
    width: 14px;
    height: 14px;
}

/* ─── Generated Plot Container ─── */
.plot-container {
    margin: 12px 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    max-width: 680px;
}

.plot-container img {
    display: block;
    width: 100%;
    height: auto;
    border-bottom: 1px solid var(--border-color);
    background: #fff;
    cursor: pointer;
    transition: filter 0.2s ease;
}

.plot-container {
    position: relative;
}

.plot-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' fill='none' stroke='white' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cline x1='18' y1='18' x2='25' y2='25'/%3E%3Cline x1='9' y1='12' x2='15' y2='12'/%3E%3Cline x1='12' y1='9' x2='12' y2='15'/%3E%3C/svg%3E") no-repeat center center;
    border-radius: 10px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.plot-container:hover::after {
    opacity: 1;
}

/* ─── Image Lightbox ─── */
.image-lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    animation: lightbox-fade-in 0.2s ease;
}

.image-lightbox-overlay img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    object-fit: contain;
}

@keyframes lightbox-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.plot-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    gap: 12px;
}

.plot-title {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.plot-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--accent-color);
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--accent-color);
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.plot-download-btn:hover {
    background: var(--accent-color);
    color: #fff;
}

.plot-download-btn svg {
    flex-shrink: 0;
}

/* ─── Export Download Card ─── */
.export-card {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px 0;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    max-width: 420px;
    transition: border-color 0.15s;
}

.export-card:hover {
    border-color: var(--accent-color);
}

.export-card-icon {
    flex-shrink: 0;
    color: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(var(--accent-color-rgb, 99, 102, 241), 0.1);
}

.export-card-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.export-card-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.export-card-label {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.export-card-download {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: var(--accent-color);
    border: 1px solid var(--accent-color);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.export-card-download:hover {
    background: var(--accent-color);
    color: #fff;
}

.export-card-download svg {
    flex-shrink: 0;
}

/* ==========================================
   Tasks / Jobs UI
   ========================================== */

/* Tasks Page Layout */
.tasks-page {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 40px;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    animation: fadeIn var(--anim-medium) ease;
}

.tasks-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.tasks-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tasks-builder-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: transparent;
    color: var(--text-main);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--anim-fast), border-color var(--anim-fast), transform var(--anim-fast);
}

.tasks-builder-btn:hover {
    background: var(--bg-surface-hover);
    border-color: var(--text-muted);
    transform: translateY(-1px);
}

.tasks-builder-btn:active {
    transform: translateY(0);
}

.tasks-builder-shell {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 18px;
}

.tasks-builder-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-sidebar);
}

.tasks-builder-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tasks-builder-title span:first-child {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
}

.tasks-builder-subtitle {
    font-size: 12px;
    color: var(--text-secondary);
}

.tasks-builder-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background var(--anim-fast), border-color var(--anim-fast), color var(--anim-fast);
}

.tasks-builder-close:hover {
    background: var(--bg-surface-hover);
    border-color: var(--border-color);
    color: var(--text-main);
}

.tasks-builder-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px 16px;
}

.tasks-builder-chat {
    min-height: 160px;
    max-height: 320px;
    overflow: auto;
    padding-right: 6px;
}

.tasks-builder-msg {
    display: flex;
    margin: 10px 0;
}

.tasks-builder-msg.user {
    justify-content: flex-end;
}

.tasks-builder-bubble {
    max-width: 80%;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 13.5px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    border: 1px solid var(--border-color);
}

.tasks-builder-msg.user .tasks-builder-bubble {
    background: rgba(16, 163, 127, 0.10);
    border-color: rgba(16, 163, 127, 0.25);
    color: var(--text-main);
}

.tasks-builder-msg.assistant .tasks-builder-bubble {
    background: var(--bg-app);
    color: var(--text-main);
}

.tasks-builder-spec {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-app);
    overflow: hidden;
}

.tasks-builder-spec-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tasks-builder-spec-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tasks-builder-planner {
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-surface);
}

.tasks-builder-planner-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.tasks-builder-planner-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tasks-builder-planner-row {
    display: flex;
    gap: 10px;
    align-items: baseline;
}

.tasks-builder-planner-label {
    width: 90px;
    flex-shrink: 0;
    font-size: 12px;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

.tasks-builder-planner-value {
    font-size: 13px;
    color: var(--text-main);
    min-width: 0;
}

.tasks-builder-planner-questions {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

.tasks-builder-planner-questions ul {
    margin: 6px 0 0 16px;
    padding: 0;
}

.tasks-builder-plan-card {
    border: 1px dashed var(--border-color);
    background: var(--bg-surface);
}

.tasks-builder-plan-card h4 {
    margin: 0 0 6px 0;
    font-size: 13px;
    color: var(--text-main);
}

.tasks-builder-planner-artifacts,
.tasks-builder-planner-tablelist {
    margin: 0;
    padding-left: 18px;
}

.tasks-builder-planner-artifacts li,
.tasks-builder-planner-tablelist li {
    margin: 4px 0;
}

.tasks-builder-plan-artifacts {
    margin: 8px 0 12px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.16);
}

.tasks-builder-plan-artefact-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.tasks-builder-plan-questions {
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}

.tasks-builder-snapshot-preview {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.18);
    border-radius: 12px;
    padding: 10px;
}

.tasks-builder-snapshot-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

.tasks-builder-snapshot-btn {
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-main);
    padding: 6px 10px;
    border-radius: 10px;
    font-size: 12px;
    cursor: pointer;
}

.tasks-builder-snapshot-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.tasks-builder-snapshot-open {
    border: 1px solid rgba(20, 184, 166, 0.3);
    background: rgba(20, 184, 166, 0.12);
    color: var(--text-main);
    padding: 6px 10px;
    border-radius: 10px;
    font-size: 12px;
    cursor: pointer;
}

.tasks-builder-snapshot-select {
    border: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.25);
    color: var(--text-main);
    padding: 6px 10px;
    border-radius: 10px;
    font-size: 12px;
    min-width: 160px;
}

.tasks-builder-snapshot-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.tasks-builder-snapshot-sheet-wrap {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.tasks-builder-snapshot-sheet {
    min-width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    white-space: nowrap;
}

.tasks-builder-snapshot-sheet th {
    position: sticky;
    top: 0;
    background: rgba(20, 184, 166, 0.12);
    color: var(--text-secondary);
    font-weight: 600;
    text-align: left;
    padding: 6px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.tasks-builder-snapshot-sheet td {
    padding: 6px 10px;
    color: var(--text-main);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tasks-builder-snapshot-text {
    font-size: 12px;
    color: var(--text-main);
    white-space: pre-wrap;
    word-break: break-word;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    max-height: 200px;
    overflow: auto;
}

.tasks-builder-snapshot-empty {
    font-size: 12px;
    color: var(--text-muted);
    padding: 6px 0;
}

.tasks-builder-output-row .tasks-builder-plan-label {
    align-self: flex-start;
    padding-top: 4px;
}

.tasks-builder-output-note {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.tasks-builder-output-card {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.18);
    border-radius: 10px;
    padding: 8px 10px;
    margin-bottom: 8px;
}

.tasks-builder-output-title {
    display: flex;
    gap: 8px;
    align-items: baseline;
    font-size: 12px;
    color: var(--text-main);
    font-weight: 600;
}

.tasks-builder-output-title span {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
}

.tasks-builder-output-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.tasks-builder-output-columns span {
    font-size: 11px;
    color: var(--text-secondary);
    padding: 4px 6px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.03);
}

.tasks-builder-output-empty {
    font-size: 12px;
    color: var(--text-muted);
    padding: 6px 0;
}

.tasks-builder-planner-details {
    margin-top: 2px;
}

.tasks-builder-planner-details summary {
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 12px;
}

.tasks-builder-planner-detail {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.tasks-builder-planner-why {
    margin: 0;
    padding-left: 18px;
}

.tasks-builder-planner-why li {
    margin: 4px 0;
}

/* Task Builder snapshot viewer (OCR/layout snapshot) -------------------------- */
.tasks-builder-plan-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.tasks-builder-snapshot-btn {
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    color: var(--text-main);
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 13px;
    cursor: pointer;
    transition: background var(--anim-fast), border-color var(--anim-fast);
}

.tasks-builder-snapshot-btn:hover {
    background: var(--bg-surface-hover);
    border-color: rgba(20, 184, 166, 0.35);
}

.tasks-snapshot-overlay {
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.tasks-snapshot-modal {
    width: 98vw;
    max-width: 98vw;
    max-height: 92vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Override base modal sizing from .preferences-container */
.preferences-container.tasks-snapshot-modal {
    width: 98vw !important;
    max-width: 98vw !important;
}

.tasks-snapshot-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.02);
}

.tasks-snapshot-meta {
    font-size: 13px;
    color: var(--text-secondary);
}

.tasks-snapshot-raw-link {
    color: var(--accent-primary);
    text-decoration: none;
    font-size: 13px;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid rgba(20, 184, 166, 0.25);
    background: rgba(20, 184, 166, 0.08);
}

.tasks-snapshot-raw-link:hover {
    background: rgba(20, 184, 166, 0.14);
}

.tasks-snapshot-body {
    display: grid;
    grid-template-columns: 180px 1fr;
    height: 100%;
    min-height: 0;
}

.tasks-snapshot-sidebar {
    border-right: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.01);
    padding: 14px 12px;
    overflow: auto;
}

.tasks-snapshot-hint {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.35;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.18);
    border-radius: 12px;
    margin-bottom: 12px;
}

.tasks-snapshot-sidebar-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.tasks-snapshot-pages {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tasks-snapshot-toc {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tasks-snapshot-toc-btn {
    width: 100%;
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.18);
    color: var(--text-secondary);
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 12px;
    cursor: pointer;
}

.tasks-snapshot-toc-btn:hover {
    background: rgba(0, 0, 0, 0.28);
    color: var(--text-main);
}

.tasks-snapshot-toc-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.tasks-snapshot-toc-name {
    color: var(--text-main);
    font-weight: 600;
}

.tasks-snapshot-toc-meta {
    color: var(--text-muted);
    font-size: 11px;
}

.tasks-snapshot-toc-sub {
    margin-top: 4px;
    color: var(--text-secondary);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tasks-snapshot-page-btn {
    width: 100%;
    text-align: left;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    color: var(--text-main);
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 13px;
    cursor: pointer;
}

.tasks-snapshot-page-btn:hover {
    background: var(--bg-surface-hover);
}

.tasks-snapshot-page-btn.active {
    border-color: rgba(20, 184, 166, 0.4);
    box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.12);
}

.tasks-snapshot-main {
    padding: 14px 16px;
    overflow: auto;
    min-height: 0;
}

.tasks-snapshot-main-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.tasks-snapshot-main-title {
    min-width: 0;
}

.tasks-snapshot-page-title {
    font-size: 14px;
    font-weight: 700;
}

.tasks-snapshot-page-subtitle {
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-muted);
}

.tasks-snapshot-main-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.tasks-snapshot-nav-btn {
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-main);
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 12px;
    cursor: pointer;
}

.tasks-snapshot-nav-btn:hover {
    background: var(--bg-surface-hover);
}

.tasks-snapshot-page-select {
    border: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.18);
    color: var(--text-main);
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 12px;
}

.tasks-snapshot-tabs {
    display: inline-flex;
    gap: 6px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.18);
    border-radius: 12px;
    margin-bottom: 12px;
}

.tasks-snapshot-tab {
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 12px;
    cursor: pointer;
}

.tasks-snapshot-tab.active {
    color: var(--text-main);
    border-color: rgba(20, 184, 166, 0.35);
    background: rgba(20, 184, 166, 0.10);
}

.tasks-snapshot-tabpanel {
    display: none;
}

.tasks-snapshot-tabpanel.active {
    display: block;
}

.tasks-snapshot-page-text {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12px;
    color: var(--text-main);
    background: rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    max-height: 54vh;
    overflow: auto;
}

.tasks-snapshot-panel {
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.02);
    padding: 12px;
    margin-bottom: 12px;
    overflow-x: auto;
}

.tasks-snapshot-panel-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
}

.tasks-snapshot-text summary {
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 13px;
    margin-bottom: 6px;
}

.tasks-snapshot-text pre {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12px;
    color: var(--text-main);
    background: rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.tasks-snapshot-table {
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.22);
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    overflow-x: auto;
}

.tasks-snapshot-table.active {
    border-color: rgba(20, 184, 166, 0.45);
    box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.14);
}

.tasks-snapshot-table-title {
    display: flex;
    gap: 10px;
    align-items: baseline;
    margin-bottom: 8px;
}

.tasks-snapshot-table-meta {
    font-size: 12px;
    color: var(--text-muted);
}

.tasks-snapshot-sheet-wrap {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.tasks-snapshot-sheet {
    min-width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    white-space: nowrap;
}

.tasks-snapshot-sheet th {
    position: sticky;
    top: 0;
    background: rgba(20, 184, 166, 0.08);
    color: var(--text-secondary);
    font-weight: 600;
    text-align: left;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    min-width: 120px;
}

.tasks-snapshot-sheet td {
    padding: 7px 12px;
    color: var(--text-main);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    min-width: 120px;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tasks-snapshot-sheet tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.tasks-snapshot-sheet tbody tr:last-child td {
    border-bottom: none;
}

.tasks-snapshot-empty {
    font-size: 13px;
    color: var(--text-muted);
    padding: 8px 0;
}

.tasks-builder-toggle {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12px;
    color: var(--text-main);
    cursor: pointer;
}

.tasks-builder-toggle:hover {
    background: var(--bg-surface-hover);
}

.tasks-builder-plan {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-bottom: 1px solid var(--border-color);
}

.tasks-builder-plan-row {
    display: flex;
    gap: 10px;
    align-items: baseline;
}

.tasks-builder-plan-label {
    width: 90px;
    flex-shrink: 0;
    font-size: 12px;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

.tasks-builder-plan-value {
    font-size: 13px;
    color: var(--text-main);
    min-width: 0;
}

.tasks-builder-plan-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tasks-builder-plan-tag {
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    color: var(--text-main);
}

.tasks-builder-copy {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12px;
    color: var(--text-main);
    cursor: pointer;
}

.tasks-builder-copy:hover {
    background: var(--bg-surface-hover);
}

.tasks-builder-spec-code {
    margin: 0;
    padding: 12px;
    font-size: 12px;
    color: var(--text-main);
    overflow: auto;
    max-height: 220px;
}

.tasks-builder-spec-actions {
    display: flex;
    gap: 10px;
    padding: 12px;
    border-top: 1px solid var(--border-color);
    justify-content: flex-end;
}

.tasks-builder-save-template {
    background: transparent;
    color: var(--text-main);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.tasks-builder-save-template:hover {
    background: var(--bg-surface-hover);
}

.tasks-builder-approve {
    background: var(--accent-primary);
    color: var(--bg-app);
    border: none;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.tasks-builder-approve:hover {
    background: var(--accent-hover);
}

.tasks-builder-edit {
    background: transparent;
    color: var(--text-main);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.tasks-builder-edit:hover {
    background: var(--bg-surface-hover);
}

.tasks-builder-footer {
    border-top: 1px solid var(--border-color);
    padding: 12px 16px 14px 16px;
    background: var(--bg-surface);
}

.tasks-builder-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.tasks-builder-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-main);
    font-size: 12.5px;
    cursor: pointer;
    transition: background var(--anim-fast), transform var(--anim-fast);
}

.tasks-builder-chip:hover {
    background: var(--bg-surface-hover);
    transform: translateY(-1px);
}

.tasks-builder-input-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.tasks-builder-attach {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-app);
    color: var(--text-main);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--anim-fast), transform var(--anim-fast);
}

.tasks-builder-attach:hover {
    background: var(--bg-surface-hover);
    transform: translateY(-1px);
}

.tasks-builder-attach:active {
    transform: translateY(0);
}

.tasks-builder-input {
    flex: 1;
    resize: none;
    min-height: 40px;
    max-height: 120px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-app);
    color: var(--text-main);
    outline: none;
    font-size: 13.5px;
    line-height: 1.45;
}

.tasks-builder-send {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-app);
    color: var(--text-main);
    cursor: pointer;
    transition: background var(--anim-fast), transform var(--anim-fast);
}

.tasks-builder-send:hover:not(:disabled) {
    background: var(--bg-surface-hover);
    transform: translateY(-1px);
}

.tasks-builder-send:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.tasks-builder-hint {
    margin-top: 10px;
    font-size: 12px;
    color: var(--text-muted);
}

.tasks-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
}

.tasks-history-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: transparent;
    color: var(--text-main);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--anim-fast), transform var(--anim-fast);
}

.tasks-history-btn:hover {
    background: var(--bg-surface-hover);
    transform: translateY(-1px);
}

.tasks-layout {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.tasks-page.history-open {
    max-width: none;
}

.tasks-layout.history-open .tasks-create-col {
    display: none;
}

.tasks-layout.history-open .tasks-history-col {
    width: 100%;
}

.tasks-create-col {
    flex: 1;
    min-width: 0;
}

.tasks-history-col {
    width: 560px;
    flex-shrink: 0;
}

@media (max-width: 980px) {
    .tasks-layout {
        flex-direction: column;
    }
    .tasks-history-col {
        width: 100%;
    }
}

.new-task-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--accent-primary);
    color: var(--bg-app); /* For contrast */
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--anim-fast);
}

.new-task-btn:hover {
    background: var(--accent-hover);
}

/* Empty State */
.tasks-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    color: var(--text-secondary);
    background: var(--bg-surface);
    border: 1px dashed var(--border-color);
    border-radius: 12px;
}

.tasks-empty-state svg {
    color: var(--text-muted);
    margin-bottom: 16px;
}

.tasks-empty-state h3 {
    margin: 0 0 8px 0;
    color: var(--text-main);
    font-size: 18px;
    font-weight: 500;
}

.tasks-empty-state p {
    margin: 0;
    max-width: 400px;
    font-size: 14px;
}

/* Templates */
.tasks-templates-shell {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 18px;
}

.tasks-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.tasks-section-title h2 {
    margin: 0;
    font-size: 16px;
    color: var(--text-main);
}

.tasks-section-title p {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: var(--text-secondary);
}

.tasks-template-new-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-main);
    cursor: pointer;
    transition: background var(--anim-fast), transform var(--anim-fast);
    white-space: nowrap;
}

.tasks-template-new-btn:hover {
    background: var(--bg-surface-hover);
    transform: translateY(-1px);
}

.tasks-template-new-btn:active {
    transform: translateY(0);
}

.tasks-templates-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 920px) {
    .tasks-templates-split {
        grid-template-columns: 1fr;
    }
}

.tasks-templates-group-header {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 6px 0 10px;
}

.tasks-templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}

.tasks-template-card {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px;
    background: var(--bg-app);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tasks-template-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
}

.tasks-template-desc {
    font-size: 12.5px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
    min-height: 34px;
}

.tasks-template-meta {
    font-size: 11.5px;
    color: var(--text-muted);
}

.tasks-template-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
    align-items: center;
    margin-top: auto;
}

.tasks-template-action {
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-main);
    padding: 6px 10px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 12.5px;
    transition: background var(--anim-fast);
    white-space: nowrap;
}

.tasks-template-action.primary {
    border-color: rgba(16, 163, 127, 0.35);
    background: rgba(16, 163, 127, 0.10);
}

.tasks-template-action:hover {
    background: var(--bg-surface-hover);
}

.tasks-templates-empty {
    font-size: 12.5px;
    color: var(--text-muted);
    padding: 10px 0;
}

/* Schedules */
.tasks-schedules-shell {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 16px;
    margin-top: 18px;
    margin-bottom: 18px;
}

.tasks-schedules-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tasks-schedule-row {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.02);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.tasks-schedule-title {
    font-weight: 650;
    font-size: 14px;
    color: var(--text-main);
}

.tasks-schedule-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.tasks-schedule-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.tasks-schedule-action {
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-main);
    padding: 7px 10px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 12.5px;
    transition: background var(--anim-fast);
}

.tasks-schedule-action:hover {
    background: var(--bg-surface-hover);
}

.tasks-schedule-actions .task-downloads-btn {
    border-color: var(--border-color);
    color: var(--text-main);
}

.tasks-schedule-actions .task-downloads-btn:hover,
.tasks-schedule-actions .task-downloads.open .task-downloads-btn {
    background: var(--bg-surface-hover);
}

.tasks-schedule-action.primary {
    border-color: rgba(16, 163, 127, 0.35);
    background: rgba(16, 163, 127, 0.10);
}

.tasks-schedule-action.danger {
    border-color: rgba(248, 113, 113, 0.35);
    background: rgba(248, 113, 113, 0.10);
}

.tasks-schedules-empty {
    font-size: 12.5px;
    color: var(--text-muted);
    padding: 10px 0;
}

/* Tasks Table */
.tasks-table-container {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: visible;
}

.tasks-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    table-layout: fixed;
}

.tasks-table th {
    padding: 16px;
    background: var(--bg-sidebar);
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border-color);
}

.tasks-table th:nth-child(1),
.tasks-table td:nth-child(1) {
    width: 52%;
}

.tasks-table th:nth-child(2),
.tasks-table td:nth-child(2) {
    width: 16%;
}

.tasks-table th:nth-child(3),
.tasks-table td:nth-child(3) {
    width: 14%;
}

.tasks-table th:nth-child(4),
.tasks-table td:nth-child(4) {
    width: 10%;
}

.tasks-table th:nth-child(5),
.tasks-table td:nth-child(5) {
    width: 140px;
}

.tasks-task-name {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tasks-table td {
    padding: 16px;
    color: var(--text-main);
    font-size: 14px;
    border-bottom: 1px solid var(--border-color);
}

.tasks-table tr:last-child td {
    border-bottom: none;
}

.tasks-table tr:hover td {
    background: var(--bg-surface-hover);
}

.task-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 500;
}

.task-status.pending { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.task-status.processing { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.task-status.completed { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.task-status.failed { background: rgba(239, 68, 68, 0.1); color: #ef4444; }

.task-action-btn {
    padding: 6px 12px;
    background: transparent;
    color: var(--accent-primary);
    border: 1px solid var(--accent-primary);
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all var(--anim-fast);
}

.task-action-btn:hover {
    background: var(--accent-primary);
    color: var(--bg-app);
}

.task-downloads {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
}

.task-downloads-btn {
    padding: 6px 12px;
    background: transparent;
    color: var(--accent-primary);
    border: 1px solid var(--accent-primary);
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all var(--anim-fast);
    white-space: nowrap;
}

.task-downloads-btn:hover,
.task-downloads.open .task-downloads-btn {
    background: rgba(16, 163, 127, 0.10);
}

.task-downloads-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 240px;
    max-width: 320px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    padding: 6px;
    z-index: 120;
    display: none;
}

.task-downloads:hover .task-downloads-menu,
.task-downloads.open .task-downloads-menu {
    display: block;
}

.task-downloads-menu a {
    display: block;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--text-main);
    text-decoration: none;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-downloads-menu a:hover {
    background: var(--bg-surface-hover);
}

.task-downloads-menu .task-downloads-state {
    padding: 8px 10px;
    font-size: 12px;
    color: var(--text-muted);
}

/* Modal Flow Elements */
.task-step {
    animation: fadeIn var(--anim-fast) ease;
}

.task-step h3 {
    margin: 0 0 20px 0;
    color: var(--text-main);
    font-size: 18px;
    font-weight: 500;
}

.task-type-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.task-type-card {
    padding: 20px;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: all var(--anim-fast);
    background: var(--bg-app);
}

.task-type-card:hover {
    border-color: var(--text-muted);
}

.task-type-card.selected {
    border-color: var(--accent-primary);
    background: var(--accent-glow);
}

.task-type-card svg {
    color: var(--accent-primary);
    margin-bottom: 12px;
}

.task-type-card h4 {
    margin: 0 0 8px 0;
    color: var(--text-main);
    font-size: 16px;
}

.task-type-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.4;
}

.task-upload-area {
    border: 2px dashed var(--border-color);
    border-radius: 10px;
    padding: 40px 20px;
    text-align: center;
    background: var(--bg-app);
    cursor: pointer;
    transition: all var(--anim-fast);
    margin-bottom: 24px;
}

.task-upload-area:hover, .task-upload-area.dragover {
    border-color: var(--accent-primary);
    background: var(--accent-glow);
}

.task-upload-area svg {
    color: var(--text-muted);
    margin-bottom: 12px;
}

.task-upload-area p {
    margin: 0 0 8px 0;
    color: var(--text-main);
}

.task-upload-link {
    color: var(--accent-primary);
    text-decoration: underline;
}

.task-upload-hint {
    font-size: 12px;
    color: var(--text-secondary);
}

.task-file-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
    max-height: 200px;
    overflow-y: auto;
}

.task-file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 13px;
}

.task-file-remove {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
}

.task-file-remove:hover {
    color: #ef4444;
}

.task-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}