:root {
    /* Light theme (default) */
    --background-color: linear-gradient(180deg, #fafafa, #ededed);
    --text-color: #1a1a1a;
    --border-color: #e0e0e0;
    --input-bg: #f5f5f5;
    --card-bg: #ffffff;
    --highlight-color: #6a5acd;
    --button-bg: #f0f0f0;
    --button-hover: #e0e0e063;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --maximize-btn-color: #f3f3f3de;
    --icon-size: 32px;
    --mobile-breakpoint: 768px;

    /* Additional colors for automations modal */
    --text-secondary: #6b7280;
    --text-tertiary: #9ca3af;
    --background-secondary: #f9fafb;
    --hover-bg: #f3f4f6;
    --primary-color: #6366f1;
    --primary-color-hover: #5855eb;
    --success-color: #10b981;
    --success-bg: #d1fae5;
    --warning-color: #f59e0b;
    --warning-bg: #fef3c7;
    --error-color: #ef4444;
    --error-bg: #fee2e2;

    /* Terminal-specific light theme variables */
    --terminal-bg: #ffffff;
    --terminal-text: #000000;
    --terminal-border: #d0d0d0;
    --terminal-font: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    --terminal-path-color: #007acc;
    --terminal-user-color: #666666;

    /* Mobile-specific variables */
    --mobile-popup-border-radius: 32px;
    --mobile-drag-handle-width: 36px;
    --mobile-margin: 15px;
    --mobile-icon-size: 25px;
    --mobile-padding: 15px;
    --mobile-message-padding: 12px;
}

[data-theme="dark"] {
    --background-color: #272728;
    --text-color: #f0f0f0;
    --border-color: #333333;
    --input-bg: #1e1e1e;
    --card-bg: #1e1e1e;
    --highlight-color: #9b8aff;
    --button-bg: #333333;
    --button-hover: #444444;
    --shadow-color: rgba(0, 0, 0, 0.3);

    /* Additional colors for automations modal - dark theme */
    --text-secondary: #9ca3af;
    --text-tertiary: #6b7280;
    --background-secondary: #1f2937;
    --hover-bg: #374151;
    --primary-color: #6366f1;
    --primary-color-hover: #5855eb;
    --success-color: #10b981;
    --success-bg: #064e3b;
    --warning-color: #f59e0b;
    --warning-bg: #78350f;
    --error-color: #ef4444;
    --error-bg: #7f1d1d;

    /* Terminal-specific dark colors */
    --terminal-bg: #0f0f0f;
    --terminal-text: #e0e0e0;
    --terminal-border: #333333;
    --terminal-command-bg: #1a1a1a;
    --terminal-output-bg: #000000;
    --terminal-output-text: #f0f0f0;
    --terminal-font: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    --terminal-path-color: #4e9eff;
    --terminal-user-color: #999999;

    /* Search/Browser components */
    --info-bar-bg: #1a1a1a;
    --search-bar-bg: #1e1e1e;
    --browser-url-bg: #1e1e1e;
    --result-title-color: #9b8aff;
    --result-url-color: #4caf50;
    --result-icon-bg: #2a2a2a;

    /* Playback controls */
    --playback-bg: #1a1a1a;
    --playback-bar-bg: #333333;
}

@font-face {
    font-family: 'SF Pro Text';
    src: url('./assets/fonts/SF-Pro-Text-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Text';
    src: url('./assets/fonts/SF-Pro-Text-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Text';
    src: url('./assets/fonts/SF-Pro-Text-Semibold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Text';
    src: url('./assets/fonts/SF-Pro-Text-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Protect parent page styles from iframe content inheritance */
body.has-messages {
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    overflow: auto !important;
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
    isolation: isolate !important;
}

/* Hidden utility class for better maintainability */
.hidden {
    display: none !important;
}

/* Hide specific buttons on Tauri desktop only */
body.tauri-desktop .power-toggle-container,
body.tauri-desktop .header-power-toggle,
body.tauri-desktop button[data-action="workspace"],
body.tauri-desktop button[data-action="folders"] {
    display: none !important;
}
body {
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
    line-height: 1.6 !important;
    color: var(--text-color) !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: var(--background-color) !important;
    height: 100vh !important;
    display: flex;
    /* flex-direction: column; */
    box-sizing: border-box;
    transition: background-color 0.3s ease, color 0.3s ease;
    max-width: 100% !important;
}

/* Touch device specific touch-action for better gesture control */
@media (hover: none) and (pointer: coarse) {
    body {
        touch-action: manipulation; /* Prevents unintended zoom gestures on touch devices */
    }
}

.chat-main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px 12px 0px;
    margin-left: 50px;
}

.header-logo {
    display: flex;
    align-items: center;
    font-weight: 500;
    color: #333;
    width: 100%;
}

.logo-img {
    height: 22px;
    width: auto;
    margin-right: 10px;
}
[data-theme="dark"] .logo-img {
    filter: invert(1) hue-rotate(180deg);
}
.logo-img-centered{
    height: 40px;
    width: auto;
    margin-right: 10px;
}
.assistant-button {
    display: none !important;
    border: none;
    background: none;
    border-radius: 10px;
    color: currentColor;
    padding: 5px;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: baseline;
    cursor: pointer;
}

.new-chat-btn {
    background: linear-gradient(71deg, #c93891 22.69%, #0147ff 110.27%);
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.new-chat-btn:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.chat-icon {
    height: 15px;
    width: 15px;
    display: inline-block;
}

.chat-container {
    display: flex;
    height: 100vh;
    overflow: hidden;
    position: relative;
}
.chat-container-section {
    flex-direction: column;
    display: flex;
    height: 100vh;
    overflow: hidden;
    position: relative;
}
.chat-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
    flex: 1;
    transition: width 0.3s ease;
    overflow: hidden;
}

/* Disable transitions during resize for smooth dragging */
.chat-section[style*="will-change"] {
    transition: none !important;
}

.superAgent-artifact-popup[style*="will-change"] {
    transition: none !important;
}

/* Resize handle styles - Claude-like with indicator */
.resize-handle {
    width: 1px;
    background-color: #e5e7eb;
    cursor: col-resize;
    position: relative;
    flex-shrink: 0;
    transition: all 0.2s ease;
    user-select: none;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.resize-handle:hover {
    width: 1px;
    background-color: #3b82f6;
    /* box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.3); */
}

.resize-handle.dragging {
    width: 1px;
    background-color: #3b82f6;
    transition: none !important; /* Disable transitions during drag for performance */
    /* box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.3); */
}

/* Resize handle indicator button */
.resize-handle-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 9px;
    height: 26px;
    background-color: #f8f9fa;
    border: 1px solid #666;
    border-radius: 6px;
    cursor: col-resize;
    opacity: 0;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.resize-handle-indicator::before {
    content: "";
    width: 3px;
    height: 16px;
    background-color: #333333;
    border-radius: 2px;
    position: relative;
}

.resize-handle:hover .resize-handle-indicator {
    opacity: 1;
    background-color: #ffffff;
    border-color: #3b82f6;
    /* box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2); */
}

.resize-handle:hover .resize-handle-indicator::before,
.resize-handle:hover .resize-handle-indicator::after {
    background-color: #3b82f6;
}

.resize-handle.dragging .resize-handle-indicator {
    opacity: 1;
    background-color: #ffffff;
    border-color: #3b82f6;
    /* box-shadow: 0 4px 2px rgba(59, 130, 246, 0.3); */
}

.resize-handle.dragging .resize-handle-indicator::before,
.resize-handle.dragging .resize-handle-indicator::after {
    background-color: #3b82f6;
}

.resize-handle-line {
    display: none; /* Remove the line for Claude-like appearance */
}

/* Dark theme styles for resize handle */
[data-theme="dark"] .resize-handle {
    background-color: #374151;
}

[data-theme="dark"] .resize-handle:hover {
    background-color: #3b82f6;
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .resize-handle.dragging {
    background-color: #3b82f6;
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .resize-handle-indicator {
    background-color: #1f2937;
    border-color: #374151;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .resize-handle-indicator::before,
[data-theme="dark"] .resize-handle-indicator::after {
    background-color: #6b7280;
}

[data-theme="dark"] .resize-handle:hover .resize-handle-indicator {
    background-color: #111827;
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

[data-theme="dark"] .resize-handle:hover .resize-handle-indicator::before,
[data-theme="dark"] .resize-handle:hover .resize-handle-indicator::after {
    background-color: #3b82f6;
}

[data-theme="dark"] .resize-handle.dragging .resize-handle-indicator {
    background-color: #111827;
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .resize-handle.dragging .resize-handle-indicator::before,
[data-theme="dark"] .resize-handle.dragging .resize-handle-indicator::after {
    background-color: #3b82f6;
}

/* Pulse animation for when resize is available */
@keyframes pulseResize {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    50% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.05);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
}

.resize-handle.available .resize-handle-indicator {
    animation: pulseResize 2s infinite;
}

/* Show indicator when artifact is present */
.resize-handle.artifact-present .resize-handle-indicator {
    opacity: 0.3;
}

.resize-handle.artifact-present:hover .resize-handle-indicator {
    opacity: 1;
}

.messages-container {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
    padding-top: 20px;
    scrollbar-width: none;
    box-sizing: border-box;
    background-color: var(--background-color);
    position: relative;
}

.chat-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */
    height: 100%;
    width: 100%;
    position: relative;
    padding: 0 20px;
    box-sizing: border-box;
    z-index: 3;
}

.centered-inner-container {
    max-width: 800px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.greeting-container {
    text-align: center;
    margin-bottom: 30px;
    width: 100%;
    display: flex;
    justify-content: center;
    perspective: 1000px;
    padding-top: 15vh;
}

.greeting-card {
    padding: 28px 30px;
    max-width: 450px;
    width: 100%;
    transform-style: preserve-3d;
    animation: cardEntrance 1s ease-out forwards;
    position: relative;
}

.greeting-card::before {
    content: none;
}

.greeting {
    font-size: 26px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.greeting-text {
    display: inline-block;
    animation: textReveal 1s ease forwards;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.name-highlight {
    background: linear-gradient(90deg, #c93891, #0147ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 700;
}

.subgreeting {
    font-size: 20px;
    font-weight: 400;
    opacity: 0;
    animation: fadeIn 1s forwards 0.5s;
    letter-spacing: 0.3px;
    margin-top: 0;
    position: relative;
    display: inline-block;
    background: linear-gradient(90deg, #666, #888);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.05);
}

.logo-img-centered {
    height: 32px;
    width: auto;
    margin-right: 12px;
    animation: floatAnimation 3s ease-in-out infinite;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
    @media (max-width: 768px) {
        margin-right: 0px;
        margin-bottom: 17px;
    }
}

.input-container {
    max-width: 800px;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
    box-sizing: border-box;

}

.input-container.centered {
    position: relative;
    padding: 0;
    margin-top: 0;
    transform: none;
    top: auto;
    left: auto;
}

.input-box {
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background-color: var(--card-bg);
    box-shadow: 0 3px 15px var(--shadow-color);
    /* margin-bottom: 12px; */
    position: relative;
}

.input-box::before {
    /* content: ""; */
    position: absolute;
    top: 0;
    /* left: 0; */
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(201, 56, 145, 0.015), rgba(1, 71, 255, 0.02));
    z-index: 0;
}

.input-area {
    width: 100%;
    box-sizing: border-box;
    border: none;
    resize: none;
    font-family: inherit;
    font-size: 16px;
    color: var(--text-color);
    position: relative;
    z-index: 1;
    background-color: transparent;
    padding: 20px;
    outline: none;
    height: 70px; /* Initial height */
    overflow-y: auto;
    transition: height 0.3s ease;
}

.input-area.maximized {
    height: 300px;
    max-height: 300px;
}

/* Remove old maximized class - now handled by container */

.input-area:empty:before {
    content: attr(placeholder);
    color: #999;
    pointer-events: none;
}

.input-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 15px;
    position: relative;
    z-index: 1;
}

.left-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 1100;
}

.right-controls {
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
    z-index: 1100;
}

.tool-btn {
    /* background: none; */
    border: none;
    color: #555;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: transparent;
    border: 1px solid rgba(0, 0, 0, .1);
}

.tool-btn:hover {
    background-color: var(--button-hover);
}

/* Model selector styles moved to ./css/model-selector.css */

.arrow-btn {
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    margin-left: 4px;
    margin-top: 1px;
    height: 32px;
    width: 32px;
    background: linear-gradient(71deg, #c93891 22.69%, #0147ff 110.27%);
    color: #fff;
    font-weight: 600;
}
.arrow-btn-n {
    color: #666;
    border: none;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    cursor: pointer;
    display: flex
;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    margin-left: 4px;
    margin-top: 1px;
}

.arrow-btn:hover {
    opacity: 0.9;
}

.stop-btn {
    background: linear-gradient(71deg, #c93891 22.69%, #0147ff 110.27%);
    color: white;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.stop-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .stop-btn {
    background-color: #ff4a4a;
    color: white;
}

[data-theme="dark"] .arrow-btn {
    background: linear-gradient(71deg, #e04da0 22.69%, #2a66ff 110.27%);
}

/* Settings Menu Styles - dropdown-menu styles moved to dropdown-menu.css */
.settings-menu {
    position: absolute;
    top: -320px;
    left: -15px;
    width: 300px;
    background-color: var(--card-bg);
    color: var(--text-color);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: none;
    overflow: hidden;
    padding: 8px 0;
    border: 1px solid var(--border-color);
}

.dropdown-header {
    display: flex;
    justify-content: space-between;
    padding: 12px;
    align-items: center;
}

.header-title {
    font-weight: 500;
    font-size: 14px;
    color: #333;
}

.close-btn, .settings-btn {
    background: none;
    border: none;
    color: #555;
    cursor: pointer;
    font-size: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-btn:hover, .settings-btn:hover {
    background-color: #f5f5f5;
}

.toggle {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 16px;
    margin-left: auto;
}

.toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
}

input:checked + .slider {
    background-color: #2196F3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    transform: translateX(12px);
}

.slider.round {
    border-radius: 24px;
}

.slider.round:before {
    border-radius: 50%;
}

.dropdown-divider {
    height: 1px;
    background-color: #eee;
    margin: 8px 0;
}

/* Show dropdown when button is active */
.tool-btn.active + .settings-menu {
    display: block;
}

.token-count {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #555;
    font-size: 14px;
    font-weight: 500;
}

.suggestions {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 10px;
}

.suggestion-chip {
    padding: 10px 20px;
    background-color: #f5f5f5;
    border-radius: 20px;
    color: #555;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

.suggestion-chip:hover {
    background-color: #e9e9e9;
}

.message {
    padding: 8px 13px;
    margin: 10px 0;
    border-radius: 12px;
    line-height: 1.6;
    background-color: var(--card-bg);
    border: 0.5px solid var(--border-color);
    white-space: pre-wrap;
}

.user-message {
    background-color: var(--input-bg);
    align-self: flex-end;
    max-width: calc(100% - 150px);
    margin-left: auto;
    font-size: 14px;
    word-wrap: break-word;
}

.assistant-message {
    background-color: var(--card-bg);
    align-self: flex-start;
}

.typing-indicator {
    display: inline-block;
    position: relative;
    width: 50px;
    height: 20px;
}

.typing-indicator span {
    height: 6px;
    width: 6px;
    float: left;
    margin: 0 1px;
    background-color: #888;
    display: block;
    border-radius: 50%;
    opacity: 0.4;
}

.typing-indicator span:nth-of-type(1) {
    animation: 1s blink infinite 0.33s;
}

.typing-indicator span:nth-of-type(2) {
    animation: 1s blink infinite 0.66s;
}

.typing-indicator span:nth-of-type(3) {
    animation: 1s blink infinite 0.99s;
}

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

.status {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    margin-left: 10px;
}

/* Animations */
@keyframes cardEntrance {
    0% {
        opacity: 0;
        transform: translateY(20px) rotateX(5deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotateX(0);
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes textReveal {
    0% {
        transform: translateY(40px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes floatAnimation {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
    100% {
        transform: translateY(0);
    }
}

/* Add a subtle animation when focused */
.input-box:focus-within {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.agent-description {
    color: #34322d;
    font-size: 16px;
    padding: 0px 20px 12px 20px;
    border-radius: 16px;
    align-self: flex-start;
    max-width: 90%;
}
.file-type{
    font-weight: 400;
    font-size: 11px;
    color: #a7a7a7;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 150px;
}
.input-container{
    margin-bottom: 15px;
}

/* Step styles - for thinking messages */
.step-header {
    display: flex;
    align-items: flex-start;
    padding: 0px 20px 10px 20px;
    border-radius: 16px;
    align-self: flex-start;
    max-width: 90%;
}

.step-checkpoint {
    margin-right: 8px;
    margin-top: 2px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.checkpoint-dot {
    width: 13px;
    height: 13px;
    background-color: #3741514d;
    border-radius: 50%;
    display: flex
;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
    padding: 2px;
}

.checkbox-icon {
    color: white;
    font-weight: 600;
    font-size: 12px;
}

.step-body {
    border-radius: 5px;
    font-size: 15px;
    line-height: 1.5;
    color: #34322d;
    margin-left: 5px;
}

/* Action styles - for action messages */
.action-header {
    border-radius: 13px;
    border: 1px solid #E9E9E9;
    width: -webkit-fill-available;
    margin-left: 46px;
    align-items: center;
    font-size: 13px;
    padding: 10px 17px;
    background: #ffffff;
    color: rgba(35, 37, 38, 0.8);
    margin-bottom: 5px;
    align-self: flex-start;
    /* max-width: 100%;
    width: calc(100% - 46px); */
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
    position: relative;
}
.download-btn {
    display: none; /* Hidden by default */
    cursor: pointer;
}
.action-header:hover {
    background-color: #ffffff;
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); */
}

.action-header.selected {
    background-color: #ffffff;
    color: #1e8eff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 142, 255, 0.2);
}

.action-title {
    color: #4A4A4A;
    font-family: "SF Pro Text";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: -0.48px;
    display: flex;
    line-height: 0.6;
    align-items: center;
    width: 100%;
}

.action-title-text {
    margin-right: 6px;
    font-size: 13px;
    color: #535350;
    /* max-width: 658px; */
    overflow: hidden;
    flex: 1;
}

.action-maximize-button {
    height: 12px;
    width: 12px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s;
    display: none; /* Initially hidden */
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 12px;
    padding: 2px;
    margin-left: auto;
    margin-right: 4px;
    flex-shrink: 0;
}

/* Show maximize button when expandable content is open OR search dropdown is open OR on hover */
.action-header:has(.action-expandable-content[style*="display: block"]) .action-maximize-button,
.action-header:has(.search-results-dropdown[style*="display: block"]) .action-maximize-button,
.action-header:hover .action-maximize-button,
.action-header.expanded:hover .action-maximize-button {
    display: flex !important;
}

.action-maximize-button:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.completion-dot {
    color: #22c55e;
    font-size: 10px;
    margin-right: 6px;
    margin-bottom: 4px;
    line-height: 1;
}

.action-tool-terminal {
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    min-width: 200px;
    width: 100%;
}

.tool-icon {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background-color: #ffffff;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin-right: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
#typing-indicator-message{
    display: none;
}
.operation {
    color: #4A4A4A;
    /* font-family: "SF Pro Text"; */
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: -0.56px;
    /* margin-left: 5px; */
    text-transform: capitalize;
    font-weight: 400;
    /* margin-right: 5px; */
    margin-top: -3px;

}

.command {
    font-family: 'Courier New', Courier, monospace;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}

/* Arrow button for expand/collapse functionality */
.action-arrow-button {
    transform: rotate(270deg); /* Closed state: arrow points right */
    cursor: pointer;
    /* padding: 4px 8px; */
    /* margin-left: auto; */
    /* margin-right: 8px; */
    border-radius: 4px;
    display: flex;
    margin-right: 6px;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 12px;
}

.action-arrow-button.open {
    transform: rotate(0deg); /* Open state: arrow points down */
}

/* .action-arrow-button:hover {
    background-color: rgba(0, 0, 0, 0.1);
} */

.action-arrow-button i {
    transition: transform 0.2s;
}

.command-line{
    /* width: 77%; */
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
}
/* Expandable content section */
.action-expandable-content {
    background: transparent;
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    max-height: 160px;
    overflow-y: auto;
    opacity: 1;
    transform: translateY(0);
    padding: 2px 0px;
}

.action-expanded-text {
    color: #374151;
}
.action-details {
    padding: 0;
    margin: 0;
    background: transparent;
}

.action-details h4 {
    margin: 5px 0 10px 0;
    color: #1f2937;
    font-size: 13px;
    font-weight: 600;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 6px;
}

.action-details p {
    margin: 6px 0;
    display: flex;
    align-items: flex-start;
    line-height: 1.5;
}

.action-details strong {
    min-width: 120px;
    font-weight: 600;
    color: #1f2937;
    flex-shrink: 0;
}

.action-description {
    font-size: 10px;
    border-top: 1px solid #e5e7eb;
}

.action-description p {
    display: block;
    line-height: 1.6;
    color: #4b5563;
}

.artifact-preview {
    display: flex;
    flex-direction: column;
}

/* Typing animation styles */
.typing-animation .typing-reveal {
    opacity: 0;
    animation: typeReveal 0.3s ease-in-out forwards;
}

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

.action-expandable-content::-webkit-scrollbar {
    width: 6px;
}

.action-expandable-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.action-expandable-content::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.action-expandable-content::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.artifact-preview h5 {
    padding-top: 9px;
    margin: 0;
    padding-bottom: 6px;
    border-bottom: 1px solid #e5e7eb;
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
}

.artifact-content-container {
    position: relative;
}

.artifact-text-preview {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace;
    font-size: 10.5px;
    color: #374151;
    overflow-x: auto;
    white-space: pre;
    max-height: 160px;
    overflow-y: auto;
    box-shadow: none;
}

.artifact-html-preview {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    width: 100%;
    height: 400px;
    min-height: 300px;
    max-height: 500px;
    resize: vertical;
}

[data-theme="dark"] .artifact-html-preview {
    background: #1e1e1e;
    border-color: var(--border-color);
}

.artifact-image-preview {
    width: 100%;
    max-height: 300px;
    border-radius: 0;
    border: none;
    object-fit: contain;
    background: transparent;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: block;
    margin: 0;
}

.artifact-view-full-btn {
    background: transparent;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #6b7280;
    position: relative;
    text-decoration: none;
    margin-left: auto;
    align-self: flex-end;
    padding: 8px 4px 5px 7px;
}

.artifact-view-full-btn:hover {
    background: #f3f4f6;
    color: #374151;
}

.artifact-view-full-btn:active {
    transform: translateY(1px);
}

.artifact-view-full-btn::after {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    position: relative;
    transition: transform 0.15s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cpolyline points='9 21 3 21 3 15'%3E%3C/polyline%3E%3Cline x1='21' x2='14' y1='3' y2='10'%3E%3C/line%3E%3Cline x1='3' x2='10' y1='21' y2='14'%3E%3C/line%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Files message style */
.files-container {
    display: grid ;
    grid-template-columns: repeat(auto-fit, minmax(218px, 1fr));
    gap: 7px;
    padding: 15px 20px;
    border-radius: 16px;
    align-self: flex-start;
    max-width: 90%;
    margin-bottom: 15px;
}

.file-item {
    display: flex;
    align-items: center;
    padding: 5px 35px 5px 5px; /* Add right padding for view button */
    border-radius: 8px;
    cursor: pointer;
    max-width: 218px;
    border:1px solid #E9E9E9;
    position: relative;
}

.file-icon {
    margin-left: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.document-icon {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background-color: #4285F4;
    display: flex;
    align-items: center;
    justify-content: center;
}

.document-icon i {
    color: white;
    font-size: 16px;
}

.file-icon i {
    font-size: 20px;
}

.file-name {
    font-weight: 500;
    font-size: 11px;
    color: #202124;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 150px;
}

/* View all files button styles */
.view-all-files-btn {
    border: 1px solid #E7E7E7;
    border-radius: 5px;
    padding: 7px 10px;
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #444;
    font-size: 14px;
}
.file-icon{
    margin-right: 0px;
    }
    .document-icon i{
        color: #4D81E8;
        font-size: 35px;
    }
    .file-item{
        cursor: pointer;
    position: relative;
    transition: background-color 0.2s ease;
    border: 1px solid #E9E9E9;
    border-radius: 5px;
    }
    .document-icon{
    background-color: transparent;
    }
/* Main container styles */
.artifact-container {
    font-family: 'Arial', sans-serif;
    color: #333;
  }

  /* Hamburger menu button */
  .nav-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    cursor: pointer;
    color: #555;
    transition: background-color 0.2s, color 0.2s;
  }

  .nav-button:hover {
    background-color: #e0e0e0;
    color: #4D81E8;
  }

  .file-list-button {
    position: relative;
  }

  /* File index indicator (unused in this pure HTML version) */
  .file-index-indicator {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 16px;
    height: 16px;
    background-color: #4D81E8;
    color: white;
    border-radius: 50%;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* File list dropdown */
  .file-list-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 220px;
    background-color: white;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    z-index: 100;
    overflow: hidden;
    margin-top: 5px;
    display: none; /* Hide dropdown by default */
  }

  .file-list-dropdown-items {
    max-height: 300px;
    overflow-y: auto;
  }

  .file-list-item {
    padding: 10px 16px;
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
  }

  .file-list-item:hover {
    background-color: #f5f8ff;
  }

  .file-list-item.selected {
    background-color: #ebf1fc;
    color: #4D81E8;
  }

  .file-name-dropdown {
    font-weight: 400;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .no-files {
    padding: 12px 16px;
    color: #888;
    font-style: italic;
  }

  /* File name styles */
  .file-namess {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
    min-width:33px;
  }

  /* Tooltip styles */
  [title] {
    position: relative;
  }
.view-all-files-btn:hover {
    background-color: #f1f3f4;
}

.view-all-files-btn i {
    margin-right: 8px;
    font-size: 32px;
    color: #666;
}

/* Show more/less button styles */
.show-more-container {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.show-more-btn {
    background: none;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    color: #444746;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background-color 0.2s;
}

.show-more-btn:hover {
    background-color: #f1f3f4;
}

[data-theme="dark"] .file-item {
    background-color: #ffffff0f;
}

[data-theme="dark"] .file-item:hover {
    background-color: #ffffff1f;
}

[data-theme="dark"] .file-name {
    color: #e8eaed;
}

[data-theme="dark"] .show-more-btn {
    color: #e8eaed;
}

[data-theme="dark"] .show-more-btn:hover {
    background-color: #ffffff1f;
}
/* Raw message style */
.raw-container {
    padding: 15px 20px;
    border-radius: 16px;
    background-color: #ffcdd2;
    border-left: 4px solid #f44336;
    align-self: flex-start;
    max-width: 90%;
    margin-bottom: 15px;
}

/* System end message style */
.system-end-container {
    padding: 15px 20px;
    border-radius: 16px;
    align-self: flex-start;
    max-width: 90%;
    margin-bottom: 15px;
}

/* Side-by-side layout for chat and artifact popup */
.chat-artifact-wrapper {
    display: flex;
    width: 100%;
    position: relative;
    min-width: 0; /* Allow shrinking */
    overflow: hidden; /* Prevent content overflow */
}

.chat-artifact-wrapper.showing-artifact {
    flex-direction: row;
}

.chat-artifact-wrapper.showing-artifact .chat-section {
    width: 50%;
}

.chat-artifact-wrapper .superAgent-artifact-popup {
    display: none;
    width: 0;
    transition: width 0.3s ease;
}

.chat-artifact-wrapper.showing-artifact .superAgent-artifact-popup {
    border: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background-color: #ffffff;
    color: #333333;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    min-width: 0; /* Allow shrinking below natural width */
    flex-shrink: 1; /* Allow flex shrinking */
}

.superAgent-artifact-popup.side-view {
    display: flex !important;
    position: relative;
    transform: none;
    top: 0;
    left: 0;
    max-height: 100%;
}

.superAgent-artifact-popup {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.artifact-header {
    display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 1rem 0 1rem;
}

.artifact-header .result-subtitle {
    max-width: min(200px, 30vw);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex-shrink: 1;
    min-width: 0; /* Allows flex item to shrink below content size */
}

/* Responsive adjustments for different screen sizes */
@media (max-width: 768px) {
    .artifact-header .result-subtitle {
        max-width: min(150px, 40vw);
    }
}

@media (max-width: 480px) {
    .artifact-header .result-subtitle {
        max-width: min(120px, 45vw);
    }
}

.file-view-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    border-radius: 6px;
    cursor: pointer;
    color: #666;
    transition: all 0.2s ease;
    margin-right: 8px;
    flex-shrink: 0;
}

.file-view-back-btn:hover {
    background-color: #f5f5f5;
    color: #333;
}

[data-theme="dark"] .file-view-back-btn {
    color: #999;
}

[data-theme="dark"] .file-view-back-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}
.artifact-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    display: flex
;
    align-items: center;
    gap: 4px;
    position: relative;
}
.artifact-title-syia {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    display: flex
;
    align-items: center;
    gap: 4px;
    position: relative;

}
/* Main container styles */
.artifact-container {
    font-family: 'Arial', sans-serif;
    color: #333;
  }

  /* Artifact title section */
  .artifact-title {
    gap: 8px;
  }

  /* Hamburger menu button */
  .nav-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    cursor: pointer;
    color: #555;
    transition: background-color 0.2s, color 0.2s;
  }

  .nav-button:hover {
    background-color: #e0e0e0;
    color: #4D81E8;
  }

  .file-list-button {
    position: relative;
  }

  /* File index indicator (unused in this pure HTML version) */
  .file-index-indicator {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 16px;
    height: 16px;
    background-color: #4D81E8;
    color: white;
    border-radius: 50%;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* File list dropdown */
  .file-list-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 220px;
    background-color: white;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    z-index: 100;
    overflow: hidden;
    margin-top: 5px;
    /* Uncomment to hide dropdown by default */
    /* display: none; */
  }

  .file-list-dropdown-header {
    padding: 5px 16px;
    font-weight: 500;
    color: #555;
    border-bottom: 1px solid #eee;
  }
  .file-type-icon{
    height: var(--icon-size, 32px);
    width: var(--icon-size, 32px);
  }

  .file-list-dropdown-items {
    max-height: 300px;
    overflow-y: auto;
  }

  .file-list-item {
    padding: 10px 16px;
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
  }

  .file-list-item:hover {
    background-color: #f5f8ff;
  }

  .file-list-item.selected {
    background-color: #ebf1fc;
    color: #4D81E8;
  }

  .file-name-dropdown {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .no-files {
    padding: 12px 16px;
    color: #888;
    font-style: italic;
  }

  /* File name styles */
  .file-namess {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
  }

  /* Tooltip styles */
  [title] {
    position: relative;
  }

  /* File navigation controls */
  .file-navigation-controls {
    margin-left: auto;
    display: flex;
    align-items: center;
  }

  .nav-buttons {
    display: flex;
    gap: 5px;
  }

  .prev-button, .next-button {
    width: 28px;
    height: 28px;
  }

  .nav-button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }

  .prev-button:hover, .next-button:hover {
    color: #4D81E8;
    background-color: #e9f0ff;
  }
.artifact-controls {
    align-items: center;
    display: flex;
    gap: 17px;
}

.artifact-controls button {
    background: none;
    border: none;
    cursor: pointer;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #7b7b7be7;
}

.artifact-card {
    border: .5px solid rgba(0, 0, 0, .1215686275);
    /* border-radius: 12px; */
    overflow: hidden;
    display: flex
;
    flex-direction: column;
    height: 100%;
    overflow: auto;
    margin: 10px 0px 0px 0px;
    font-size: 14px;
    @media (max-width: 768px) {
        margin-top: 0px;
    }
}
.artifact-content {
    flex: 1;
    padding: 12px;
    overflow-y: auto;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scrollbar-width: none;
}

/* Remove padding when showing quick actions in preview mode */
.showing-quick-action .artifact-content.preview-view {
    padding: 0px !important;
}

/* Terminal styles */
.terminal-info-bar, .search-info-bar {
    display: none;
}

.terminal-command-bar, .search-bar {
    display: none;
}

/* Terminal styles - keep the output only */
.terminal-output {
    background-color: var(--terminal-bg);
    color: var(--terminal-text);
    padding: 12px;
    font-family: var(--terminal-font);
    border-radius: 4px;
    overflow-x: auto;
    white-space: pre-wrap;
    margin: 10px 0;
    border: 1px solid var(--terminal-border);
}

/* Monaco Editor terminal styles */
.terminal-monaco-editor {
    border: 1px solid var(--terminal-border);
    border-radius: 4px;
    overflow: hidden;
    padding: 10px;
}

.terminal-monaco-editor .monaco-editor {
    background-color: var(--terminal-bg) !important;
}

.terminal-monaco-editor .monaco-editor .view-lines {
    font-family: var(--terminal-font) !important;
}

.terminal-prompt {
    display: flex;
    margin-bottom: 0px;
    font-weight: normal;
    line-height: 1.1;
}

.path {
    color: var(--terminal-path-color);
}

.user {
    color: var(--terminal-user-color);
}

.command-text {
    color: var(--terminal-text);
    font-weight: 500;
}

.output-text {
    color: var(--terminal-text);
    margin-top: 0px;
    margin-bottom: 0px;
    line-height: 1.1;
}

/* Search styles */
.search-button {
    padding: 8px 10px;
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 13px;
    margin-bottom: 10px;
    width: 100%;
}

.search-results {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 10px;
    overflow-y: auto;
}

.search-result-item {
    display: flex;
    gap: 12px;
    padding: 8px;
    border-radius: 4px;
}

.result-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background-color: #f0f0f0;
}

.result-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.result-title {
    font-weight: 600;
    color: #1a0dab;
    font-size: 14px;
    text-decoration: none;
}

.result-url {
    font-size: 12px;
    color: #006621;
}

.result-snippet {
    font-size: 13px;
    color: #545454;
}

/* Browser styles */
.browser-info {
    font-size: 13px;
    color: #555;
}

.browser-url-bar {
    line-height: 2.3;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 8px 10px;
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 13px;
}

.browser-content {
    flex: 1;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: auto;
    padding: 10px;
}

.browser-screenshot {
    max-width: 100%;
    height: auto;
}

/* Playback controls */
.artifact-playback {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
    background: var(--playback-bg, #f5f5f5);
    border-radius: 8px;
    margin-top: 15px;
}

.playback-back-btn, .playback-play-btn, .artifact-prev-btn, .artifact-next-btn {
    background: none;
    border: none;
    color: #333;
    cursor: pointer;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.artifact-prev-btn, .artifact-next-btn {
    background: none;
    border: none;
    color: #555;
    cursor: pointer;
    font-size: 14px;
    transition: color 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.artifact-prev-btn:hover, .artifact-next-btn:hover {
    color: #333;
}

.artifact-prev-btn:disabled, .artifact-next-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    color: #aaa;
}

.artifact-prev-btn i, .artifact-next-btn i {
    font-size: 21px;
}

.artifact-prev-btn.nav-btn, .artifact-next-btn.nav-btn {
    border-radius: 0;
    background: none;
    border: none;
    box-shadow: none;
}

.nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    margin: 0 4px;
}

.artifact-close-btn,
.artifact-expand-btn,
.artifact-fullscreen-btn {
    display: flex;
    align-items: center;
}
.artifact-fullscreen-btn {
    border: 1px solid #e0e0e0;
    border-radius: 31px;
    padding: 2px 10px 0px 10px;
    display: none !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.artifact-fullscreen-btn:hover {
    background-color: #37352f0a;
}

[data-theme="dark"] .artifact-fullscreen-btn {
    border-color: #444;
}

.playback-progress-container {
    flex: 1;
    height: 7px;
    background-color: #e0e0e0;
    border-radius: 6px;
    position: relative;
    margin: 0 5px;
    cursor: pointer;
    overflow: visible;
}

.playback-progress-bar {
    height: 100%;
    background-color: #1a73e8;
    border-radius: 6px;
    position: relative;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.progress-dot {
    width: 14px;
    height: 14px;
    background-color: #fff;
    border: 2px solid #1a73e8;
    border-radius: 50%;
    position: absolute;
    right: -7px;
    top: -5px;
    z-index: 2;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: border-color 0.3s ease;
}

.view-indicator {
    width: 10px;
    height: 10px;
    background-color: #fff;
    border: 2px solid #f44336;
    border-radius: 50%;
    position: absolute;
    top: -3px;
    z-index: 2;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    display: none; /* Hidden by default, shown when paused */
}

.progress-tooltip {
    position: absolute;
    background-color: #333;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    top: -30px;
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 100;
    pointer-events: none;
}

.playback-progress-container:hover .progress-tooltip {
    opacity: 1;
    visibility: visible;
}

.message-markers {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.message-marker {
    position: absolute;
    width: 2px;
    height: 6px;
    background-color: rgba(255, 255, 255, 0.5);
    top: 3px;
    transform: translateX(-50%);
}

.lag-indicator {
    position: absolute;
    top: 0;
    height: 100%;
    background-color: rgba(244, 67, 54, 0.2);
    z-index: 1;
    border-radius: 0 6px 6px 0;
    display: none; /* Hidden by default, shown when paused */
}

.lag-count {
    position: absolute;
    background-color: #f44336;
    color: white;
    border-radius: 10px;
    font-size: 10px;
    padding: 1px 5px;
    top: -18px;
    transform: translateX(-50%);
    white-space: nowrap;
    display: none !important; /* Hidden by default, shown when paused */
}

.live-indicator {
    color: #777;
    font-size: 12px;
    font-weight: 500;
    transition: color 0.3s ease;
}

[data-theme="dark"] .playback-progress-container {
    background-color: #444;
}

[data-theme="dark"] .progress-dot {
    background-color: #333;
}

[data-theme="dark"] .view-indicator {
    background-color: #333;
}

[data-theme="dark"] .progress-tooltip {
    background-color: #555;
}

[data-theme="dark"] .message-marker {
    background-color: rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .lag-indicator {
    background-color: rgba(244, 67, 54, 0.3);
}

.jump-container {
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0;
    right: 0;
    position: absolute;
    bottom: 4rem;
}

.jump-to-live-btn {
    background-color: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 40px;
    padding: 6px 16px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

.jump-to-live-btn:hover {
    background-color: #e9e9e9;
}

.jump-to-live-btn i {
    font-size: 10px;
}

.superAgent-artifact-popup.side-view .artifact-content {
    flex: 1;
    overflow-y: auto;
}

.superAgent-artifact-popup.side-view .terminal-output,
.superAgent-artifact-popup.side-view .search-results,
.superAgent-artifact-popup.side-view .browser-content {
    flex: 1;
    max-height: none;
}

/* Add styles for expanded and fullscreen states */
.superAgent-artifact-popup.expanded {
    width: 70% !important;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    animation: expandPopup 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes expandPopup {
    0% {
        width: 50%;
    }
    100% {
        width: 70%;
    }
}

.superAgent-artifact-popup.fullscreen {
    width: 100% !important;
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    animation: slideRightToLeft 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes slideRightToLeft {
    0% {
        transform: translateX(calc(100% - 20px));
        opacity: 0.7;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.user-profile {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-top: 1px solid #e6e6e6;
    white-space: nowrap;
    transition: all 0.3s ease;
    cursor: pointer;
}

.user-profile:hover {
    background-color: #f5f5f5;
}

[data-theme="dark"] .user-profile:hover {
    background-color: #2a2a2a;
}

.profile-avatar {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #c93891 0%, #0147ff 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 500;
    font-size: 16px;
    margin-right: 12px;
    text-transform: uppercase;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.profile-info {
    flex: 1;
    overflow: hidden;
}

.profile-name {
    font-weight: 500;
    color: #333;
    margin-bottom: 2px;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
}

[data-theme="dark"] .profile-name {
    color: #e0e0e0;
}

.profile-email {
    font-size: 12px;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    margin-top: 2px;
    white-space: nowrap;
    max-width: 200px;
}

/* Transition for closing fullscreen mode */
.superAgent-artifact-popup.side-view:not(.fullscreen) {
    transition: all 0.3s ease-out;
}
/* Theme toggle styles */
.theme-toggle-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.theme-toggle-btn {
    background: none;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-color);
    background-color: var(--button-bg);
    transition: background-color 0.2s;
}

.theme-toggle-btn:hover {
    background-color: var(--button-hover);
}
.logout-btn {
    background: none;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-color);
    background-color: var(--button-bg);
    transition: background-color 0.2s, color 0.2s;
}

.logout-btn:hover {
    background-color: var(--button-hover);
}

[data-theme="dark"] .logout-btn {
    color: var(--text-color);
}

.theme-dropdown {
    position: absolute;
    right: 0;
    top: 45px;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 4px 12px var(--shadow-color);
    width: 200px;
    z-index: 1000;
    display: none;
    overflow: hidden;
}

.theme-dropdown.show {
    display: block;
}

.theme-option {
    padding: 12px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background-color 0.2s;
}

.theme-option:hover {
    background-color: var(--button-hover);
}

.theme-option i {
    margin-right: 12px;
    width: 18px;
    text-align: center;
}

.theme-option.active {
    background-color: var(--highlight-color);
    color: white;
}

.theme-divider {
    height: 1px;
    background-color: #eee;
    margin: 4px 0;
}

[data-theme="dark"] .theme-divider {
    background-color: #333;
}

.view-mode-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}

.toggle-container {
    display: flex;
    background: #f0f0f0;
    padding: 2px;
    border-radius: 20px;
    position: relative;
    width: fit-content;
}

.toggle-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    color: #666;
    border-radius: 18px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 40px;
    justify-content: center;
}

.toggle-btn.active {
    color: #000;
    font-weight: 500;
}

.toggle-container:after {
    content: "";
    position: absolute;
    width: 40px;
    height: calc(100% - 4px);
    top: 2px;
    left: 2px;
    background: white;
    border-radius: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.theme-option:hover {
    background-color: var(--button-hover);
}
/* Move indicator when code is active */
.toggle-container.code-active:after {
    transform: translateX(40px);
}
.theme-option i {
    margin-right: 12px;
    width: 18px;
    text-align: center;
}

.theme-option.active {
    background-color: var(--highlight-color);
    color: white;
}

/* Update terminal components for dark mode */
[data-theme="dark"] .terminal-info-bar,
[data-theme="dark"] .search-info-bar {
    background-color: var(--info-bar-bg);
    color: var(--text-color);
}

[data-theme="dark"] .terminal-command-bar,
[data-theme="dark"] .search-bar,
[data-theme="dark"] .browser-url-bar {
    background-color: var(--search-bar-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

[data-theme="dark"] .terminal-output {
    background-color: var(--terminal-output-bg);
    color: var(--terminal-output-text);
}

[data-theme="dark"] .search-button {
    background-color: var(--button-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

[data-theme="dark"] .result-icon {
    background-color: var(--result-icon-bg);
}

[data-theme="dark"] .result-title {
    color: var(--result-title-color);
}

[data-theme="dark"] .result-url {
    color: var(--result-url-color);
}

[data-theme="dark"] .artifact-header {
    background-color: var(--info-bar-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .artifact-content,
[data-theme="dark"] .superAgent-artifact-popup {
    background-color: var(--background-color);
    color: var(--text-color);
}

[data-theme="dark"] .artifact-title {
    color: var(--text-color);
}

[data-theme="dark"] .artifact-playback {
    background-color: var(--playback-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .playback-progress-container {
    background-color: var(--playback-bar-bg);
}

[data-theme="dark"] .jump-to-live-btn {
    background-color: var(--button-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

/* Fix any remaining system-end and file containers */
[data-theme="dark"] .system-end-container {
    background-color: #1a1a1a;
    border-left-color: #555555;
}

[data-theme="dark"] .action-header {
    background-color: #1f2937;
    color: rgba(220, 220, 220, 0.9);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .action-header:hover {
    background-color: #1f2937;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .action-header.selected {
    background-color: #1f2937;
    color: #4e9eff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 142, 255, 0.3);
}

[data-theme="dark"] .action-title-text {
    color: #b0b0b0;
}

[data-theme="dark"] .browser-content {
    background-color: var(--background-color);
    border-color: var(--border-color);
    color: var(--text-color);
}

[data-theme="dark"] .chat-artifact-wrapper.showing-artifact .superAgent-artifact-popup {
    background-color: var(--background-color);
    border-left-color: var(--border-color);
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
}
div#artifact-title {
    font-weight: 600;
    overflow: hidden;
    max-width: 100%;
    font-size: 15px;
    /* text-wrap: auto; */
    /* white-space: pre; */
    overflow: hidden;
    text-overflow: ellipsis;
    @media (max-width: 768px) {
        max-width: 83%;
    }
}
.result-display-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0px 1rem 0.3rem 1rem;

    .result-icon {
      padding: 6px;

      background: #f2f2f2;
      border-radius: 6px;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #858481;

      svg {
        width: 20px;
        height: 20px;
      }
    }

    .result-info {
      width: 100%;
      overflow: hidden;
      .result-title {
        font-size: 11px;
        margin-bottom: 5px;
        color: #858481;
      }

      .result-subtitle {
        /* width: fit-content; */
        font-size: 11px;
        color: #666;
        border-radius: 21px;
        background-color: #37352f0a;
        padding: 3px 10px;
        border: 0.5px solid rgba(0, 0, 0, 0.1215686275);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        /* width: 100%; */
        .command-text {
          color: #858481;
          padding: 2px 4px;
          border-radius: 3px;
        }
      }
    }
}

/* Theme toggle styles */
.theme-toggle-container {
    position: relative;
}

.theme-toggle-btn {
    background: none;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-color);
    background-color: var(--button-bg);
    transition: background-color 0.2s;
}

.theme-toggle-btn:hover {
    background-color: var(--button-hover);
}

.theme-dropdown {
    position: absolute;
    right: 0;
    top: 45px;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 4px 12px var(--shadow-color);
    width: 200px;
    z-index: 1000;
    display: none;
    overflow: hidden;
}

.theme-dropdown.show {
    display: block;
}

.theme-option {
    padding: 12px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background-color 0.2s;
}

.theme-option:hover {
    background-color: var(--button-hover);
}

.theme-option i {
    margin-right: 12px;
    width: 18px;
    text-align: center;
}

.theme-option.active {
    background-color: var(--highlight-color);
    color: white;
}

.theme-divider {
    height: 1px;
    background-color: #eee;
    margin: 4px 0;
}

[data-theme="dark"] .theme-divider {
    background-color: #333;
}

.view-mode-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}

.toggle-container {
    display: flex;
    background: #f0f0f0;
    padding: 2px;
    border-radius: 20px;
    position: relative;
    width: fit-content;
}

.toggle-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    color: #666;
    border-radius: 18px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 40px;
    justify-content: center;
}

.toggle-btn.active {
    color: #000;
    font-weight: 500;
}

.toggle-container:after {
    content: "";
    position: absolute;
    width: 40px;
    height: calc(100% - 4px);
    top: 2px;
    left: 2px;
    background: white;
    border-radius: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.theme-option:hover {
    background-color: var(--button-hover);
}
/* Move indicator when code is active */
.toggle-container.code-active:after {
    transform: translateX(40px);
}

.theme-option i {
    margin-right: 12px;
    width: 18px;
    text-align: center;
}

.theme-option.active {
    background-color: var(--highlight-color);
    color: white;
}

/* Update terminal components for dark mode */
[data-theme="dark"] .terminal-info-bar,
[data-theme="dark"] .search-info-bar {
    background-color: var(--info-bar-bg);
    color: var(--text-color);
}

[data-theme="dark"] .terminal-command-bar,
[data-theme="dark"] .search-bar,
[data-theme="dark"] .browser-url-bar {
    background-color: var(--search-bar-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

[data-theme="dark"] .terminal-output {
    background-color: var(--terminal-output-bg);
    color: var(--terminal-output-text);
}

[data-theme="dark"] .search-button {
    background-color: var(--button-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

[data-theme="dark"] .result-icon {
    background-color: var(--result-icon-bg);
}

[data-theme="dark"] .result-title {
    color: var(--result-title-color);
}

[data-theme="dark"] .result-url {
    color: var(--result-url-color);
}

[data-theme="dark"] .artifact-header {
    background-color: var(--info-bar-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .artifact-content,
[data-theme="dark"] .superAgent-artifact-popup {
    background-color: var(--background-color);
    color: var(--text-color);
}

[data-theme="dark"] .artifact-title {
    color: var(--text-color);
}

[data-theme="dark"] .artifact-playback {
    background-color: var(--playback-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .playback-progress-container {
    background-color: var(--playback-bar-bg);
}

[data-theme="dark"] .jump-to-live-btn {
    background-color: var(--button-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

/* Fix any remaining system-end and file containers */
[data-theme="dark"] .system-end-container {
    background-color: #1a1a1a;
    border-left-color: #555555;
}

[data-theme="dark"] .action-header {
    background-color: #202020;
    border-color: #333333;
    color: rgba(220, 220, 220, 0.7);
}

[data-theme="dark"] .action-header:hover {
    background-color: #2a2a2a;
}

[data-theme="dark"] .action-header.selected {
    background-color: rgba(30, 142, 255, 0.15);
    color: #4e9eff;
    border-color: rgba(30, 142, 255, 0.4);
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .action-title-text {
    color: #b0b0b0;
}

[data-theme="dark"] .browser-content {
    background-color: var(--background-color);
    border-color: var(--border-color);
    color: var(--text-color);
}

[data-theme="dark"] .chat-artifact-wrapper.showing-artifact .superAgent-artifact-popup {
    background-color: var(--background-color);
    border-left-color: var(--border-color);
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
}
.result-display-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0px 1rem 0.3rem 1rem;

    .result-icon {
      padding: 6px;

      background: #f2f2f2;
      border-radius: 6px;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #858481;

      svg {
        width: 20px;
        height: 20px;
      }
    }

    .result-info {
      width: 100%;
      overflow: hidden;
      .result-title {
        font-weight: 400;
        font-size: 10px;
        margin-bottom: 3px;
        color: #858481;
      }

      .result-subtitle {
        /* width: fit-content; */
        font-size: 11px;
        color: #666;
        border-radius: 21px;
        background-color: #37352f0a;
        padding: 3px 10px;
        border: 0.5px solid rgba(0, 0, 0, 0.1215686275);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        /* width: 100%; */
        .command-text {
          color: #858481;
          padding: 2px 4px;
          border-radius: 3px;
        }
      }
    }
}

.app-selector {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.app-selector-label {
    display: flex;
    align-items: center;
    gap: 2px;
}

.dropdown-arrow {
    font-size: 8px;
    color: #666;
    margin-left: 2px;
}

.app-selector-dropdown {
    position: absolute;
    top: 30px;
    right: 0;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 220px;
    display: none;
    z-index: 1000;
    overflow: hidden;
}

.select-app {
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
}

.app-option {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    cursor: pointer;
}

.app-option:hover {
    background-color: #f5f5f5;
}

.app-icon {
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.browser-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%231982FC" d="M4 5h16v10H4z"/><path fill="%231982FC" d="M20 18c0 .6-.4 1-1 1H5c-.6 0-1-.4-1-1v-2h16v2zM16 20h-8v1h8v-1z"/></svg>');
}

.app-name {
    font-size: 15px;
    color: #333;
}

/* App selection dropdown styling */
.app-dropdown {
    border: 1px solid #ddd;
    box-shadow: 0 2px 6px #0000001a;
    position: absolute;
    top: 42px;
    right: 15px;
    background-color: white;
    border-radius: 12px;
    width: 190px;
    z-index: 1200;
    overflow: hidden;
    display: none;
}

.app-dropdown.show {
    display: block;
}

.app-dropdown-header {
    padding: 9px;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
}

.app-dropdown-item {
    text-align: center;
    display: flex
;
    align-items: center;
    padding: 5px 9px;
    cursor: pointer;
    transition: background-color 0.15s;
}

.app-dropdown-item:hover {
    background-color: #f5f5f5;
}

.app-icon {
    text-align: center;
    display: flex;
    align-items: center;
    padding: 1px 9px;
    cursor: pointer;
    transition: background-color 0.15s;
    justify-content: center;
}

.vscode-icon {
    color: #0078d7;
}

.computer-icon {
    color: #1982FC;
}

.app-name {
    font-size: 12px;
    color: #333;
}

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

[data-theme="dark"] .app-dropdown {
    background-color: #272728;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    border: 1px solid #333;
}

[data-theme="dark"] .app-dropdown-header {
    color: #f0f0f0;
    border-bottom: 1px solid #333;
}

[data-theme="dark"] .app-dropdown-item:hover {
    background-color: #333;
}

[data-theme="dark"] .app-name {
    color: #f0f0f0;
}

/* VNC Remote Desktop styles */
.vnc-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 9999;
    display: none;
}

.vnc-container.active {
    display: flex;
    flex-direction: column;
}

.vnc-iframe {
    flex: 1;
    width: 100%;
    height: 100%;
    border: none;
}

.vnc-footer {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 10px;
    z-index: 10000;
    pointer-events: none;
}

.exit-vnc-btn {
    background-color: #1a8cff;
    color: white;
    border: none;
    border-radius: 22px;
    padding: 8px 20px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    transition: background-color 0.2s, transform 0.1s;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    pointer-events: auto;
}

.exit-vnc-btn:hover {
    background-color: #0070dd;
    transform: translateY(-1px);
}
.exit-insights-btn {
    background-color: #1a8cff;
    color: white;
    border: none;
    border-radius: 22px;
    padding: 8px 20px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    transition: background-color 0.2s, transform 0.1s;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    pointer-events: auto;
    position: absolute;
    top: 10px;
    right: 7rem;
}

.exit-insights-btn:hover {
    background-color: #0070dd;
    transform: translateY(-1px);
}

.file-content-container{
    height: 100%;
    width: 100%;
}

.action-title {
    display: flex;
    width: 100%;
    align-items: center;
}

[data-theme="dark"] .result-count-badge {
    color: #fff;
}

.results-summary {
    margin: 12px 0;
    font-size: 0.9rem;
    color: #5f6368;
    font-weight: 500;
}

[data-theme="dark"] .results-summary {
    color: #9aa0a6;
}

.results-toggle {
    cursor: pointer;
    padding: 8px 12px;
    margin: 8px 0;
    background-color: #f1f3f4;
    border-radius: 18px;
    display: inline-block;
    font-size: 0.85rem;
    color: #5f6368;
    transition: background-color 0.2s;
}

[data-theme="dark"] .results-toggle {
    background-color: #303134;
    color: #e8eaed;
}

[data-theme="dark"] .results-toggle:hover {
    background-color: #3c4043;
}

/* Search results dropdown styles */
.search-results-dropdown {
    max-height: 18.75rem;
    overflow-y: auto;
    margin-top: 3px;
}

.search-query-info {
    font-size: 0.9rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
}

.search-count-info {
    font-size: 0.8rem;
    color: #5f6368;
    margin-bottom: 10px;
}

.search-results-list {
    display: flex;
    flex-direction: column;
}

.search-result-item-compact {
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: 4px;
    text-decoration: none;
}

.result-icon-small {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    color: #5f6368;
}

.result-icon-small img {
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

.result-title-small {
    font-size: 0.85rem;
    color: #1a0dab;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    z-index: 0;
}

.result-count-badge {
    font-size: 0.75rem;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    padding-right: 15px;
    white-space: nowrap;
}

.result-count-text {
    color: #535350b3;
    font-size: 13px;
}

.result-favicons {
    display: inline-flex;
    align-items: center;
    margin-left: 5px;
    position: relative;
    z-index: 1;
}

.result-favicon-small {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid white;
    object-fit: cover;
    position: relative;
    z-index: 1;
}

.result-favicon-small:not(:first-child) {
    margin-left: -6px;
}

.result-favicon-small:nth-child(2) {
    z-index: 2;
}

.result-favicon-small:nth-child(3) {
    z-index: 3;
}

.result-favicon-small:nth-child(4) {
    z-index: 4;
}

/* Dark theme styles for search results dropdown */
[data-theme="dark"] .search-results-dropdown {
    background-color: #202124;
    border-color: #3c4043;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .search-query-info {
    color: #e8eaed;
    border-bottom-color: #3c4043;
}

[data-theme="dark"] .search-count-info {
    color: #9aa0a6;
}

[data-theme="dark"] .search-result-item-compact {
    background-color: #303134;
}

ß

[data-theme="dark"] .result-title-small {
    color: #8ab4f8;
}

[data-theme="dark"] .result-icon-small {
    color: #9aa0a6;
}

[data-theme="dark"] .view-all-files-btn {
    background-color: #303134;
    border-color: #444;
    color: #e8eaed;
}

[data-theme="dark"] .view-all-files-btn:hover {
    background-color: #3c4043;
}

[data-theme="dark"] .view-all-files-btn i {
    color: #aaa;
}

[data-theme="dark"] .show-more-btn {
    color: #e8eaed;
}

[data-theme="dark"] .show-more-btn:hover {
    background-color: #ffffff1f;
}

/* View all files modal styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: none;
    justify-content: center;
    align-items: center;
}

.files-modal {
    background-color: #ffffff;
    border-radius: 23px;
    width: 90%;
    max-width: 800px;
    height: 85vh;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
}

.modal-title {
    font-size: 18px;
    font-weight: 500;
    color: #333;
    margin: 0;
}

.close-modal-btn {
    background: none;
    border: none;
    color: #666;
    font-size: 16px;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}

.close-modal-btn:hover {
    background-color: #f1f1f1;
}

.modal-tabs {
    display: flex;
    padding: 0 10px;

}

.tab-btn {
    padding: 12px 16px;
    background: none;
    border: none;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    position: relative;
    font-weight: 500;
}

.tab-btn.active {
    color: #1a73e8;
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #1a73e8;
}
.modal-content {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.files-list {
    display: flex;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    flex-wrap: wrap;
    flex-direction: column;
    @media (max-width: 768px) {
        flex-wrap: unset;
        flex-direction: unset;
    }
}

.modal-file-item {
    display: flex;
    align-items: center;
    padding: 12px 40px 12px 12px; /* Add right padding for view button */
    border-radius: 8px;
    cursor: pointer;
    position: relative;
}
.modal-file-icon {
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-file-name {
    font-weight: 500;
    font-size: 14px;
    color: #202124;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Dark theme styles for the modal */
[data-theme="dark"] .files-modal {
    background-color: #272728;
    border: 1px solid #3d3d3d;
}

[data-theme="dark"] .modal-header {
    border-bottom-color: #3d3d3d;
}

[data-theme="dark"] .modal-title {
    color: #e8eaed;
}

[data-theme="dark"] .close-modal-btn {
    color: #aaa;
}

[data-theme="dark"] .close-modal-btn:hover {
    background-color: #3d3d3d;
}

[data-theme="dark"] .modal-tabs {
    background-color: #1e1e1e;
    border-bottom-color: #3d3d3d;
}

[data-theme="dark"] .tab-btn {
    color: #aaa;
}

[data-theme="dark"] .tab-btn.active {
    color: #8ab4f8;
}

[data-theme="dark"] .tab-btn.active::after {
    background-color: #8ab4f8;
}

[data-theme="dark"] .modal-file-item {
    background-color: #1e1e1e;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

[data-theme="dark"] .modal-file-item:hover {
    background-color: #333;
}

[data-theme="dark"] .modal-file-name {
    color: #e8eaed;
}

/* File preview and download dropdown */
.file-action-menu {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background-color: white;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    z-index: 10;
    display: none;
}

.modal-file-item:hover .file-action-menu-trigger {
    display: flex;
}

.file-action-menu-trigger {
    display: none;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    padding: 5px;
    cursor: pointer;
    color: #666;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
}

.file-action-menu-trigger:hover {
    background: #f1f1f1;
}

.file-action-menu.show {
    display: block;
}

.file-action-menu-item {
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    cursor: pointer;
    color: #333;
    transition: background-color 0.2s;
}

.file-action-menu-item:hover {
    background-color: #f5f5f5;
}

.file-action-menu-item i,
.file-action-menu-item svg {
    width: 20px;
    color: #666;
}

/* File preview dropdown */
.file-preview-dropdown {
    position: absolute;
    right: 15px;
    top: 45px;
    width: 150px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    z-index: 10;
    animation: slideDown 0.2s ease-out;
    border: 1px solid #eee;
}

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

.modal-file-item {
    display: flex;
    align-items: center;
    padding: 12px 40px 12px 12px; /* Add right padding for view button */
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;  /* Add this for absolute positioning of dropdown */
    width: -webkit-fill-available;
}

/* Dark theme styles for the file preview dropdown */
[data-theme="dark"] .file-action-menu,
[data-theme="dark"] .file-preview-dropdown {
    background-color: #333;
    border-color: #444;
}

[data-theme="dark"] .file-action-menu-item {
    color: #e8eaed;
}

[data-theme="dark"] .file-action-menu-item:hover {
    background-color: #444;
}

[data-theme="dark"] .file-action-menu-trigger {
    background: rgba(51, 51, 51, 0.8);
    color: #ccc;
}

[data-theme="dark"] .file-action-menu-trigger:hover {
    background: #444;
}

.view-btn {
    background: none;
    border: none;
    color: #555;
    cursor: pointer;
    padding: 5px;
    display: none; /* Hide by default */
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    margin-left: auto;
    transition: background-color 0.2s;
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    flex-shrink: 0;
}

.view-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.view-btn svg {
    width: 20px;
    height: 20px;
}

/* Show the view button only when hovering over the file item */
.file-item:hover .view-btn,
.modal-file-item:hover .view-btn {
    display: flex;
}

[data-theme="dark"] .view-btn {
    color: #888;
}

[data-theme="dark"] .view-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* ... existing file-item styles ... */
.file-item.selected, .modal-file-item.selected {
    background-color: rgba(30, 142, 255, 0.1);
}

[data-theme="dark"] .file-item.selected, [data-theme="dark"] .modal-file-item.selected {
    background-color: rgba(30, 142, 255, 0.15);
    border: 1px solid rgba(30, 142, 255, 0.3);
}

.file-item.selected .view-btn,
.modal-file-item.selected .view-btn {
    display: flex;
    color: #1e8eff;
}

.view-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.view-btn svg {
    width: 20px;
    height: 20px;
}

/* Show the view button only when hovering over the file item */
.file-item:hover .view-btn,
.modal-file-item:hover .view-btn {
    display: flex;
}

[data-theme="dark"] .view-btn {
    color: #888;
}

[data-theme="dark"] .file-item.selected .view-btn,
[data-theme="dark"] .modal-file-item.selected .view-btn {
    color: #4e9eff;
}

[data-theme="dark"] .view-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.image-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    max-width: 25rem;
}

.image-gallery-item {
    width: 120px;
    height: 90px;
    overflow: hidden;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid #e8e8e8bd;
    background: transparent;
    position: relative;
}

.image-gallery-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.show-more-btn-text{
    font-size: 12px;
    color: #504e4e;
    font-weight: 600;
    position: absolute;
    z-index: 2;
}

/* Show more button image opacity */
.image-gallery-item button img {
    opacity: 0.2;
}

/* Fix this selector - the button is the .image-gallery-item itself, not a child */
.image-gallery-item img[alt^="+"] {
    opacity: 0.2;
}

/* Add hover effect for the show more button */
.image-gallery-item:hover {
    background-color: #f5f5f5;
    border-color: #ccc;
}

[data-theme="dark"] .show-more-btn-text {
    color: #aaa;
}

[data-theme="dark"] .image-gallery-item:hover {
    background-color: #333;
    border-color: #555;
}

/* Artifact popup image display */
.artifact-content img {
    max-height: 100%;
    object-fit: contain;
}

/* Custom image viewer modal styles */
#custom-image-viewer-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(30,30,30,0.97);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 99999;
}

#custom-image-viewer-modal button.close-btn {
    position: absolute;
    top: 18px;
    right: 28px;
    font-size: 2.2rem;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    z-index: 100002;
}

#custom-image-viewer-modal .main-img-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    position: relative;
}

#custom-image-viewer-modal .main-img {
    max-height: 65vh;
    max-width: 80vw;
    transition: transform 0.2s;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 16px #0006;
    user-select: none;
    cursor: grab;
}

#custom-image-viewer-modal .main-img.dragging {
    cursor: grabbing;
}

#custom-image-viewer-modal .nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2.2rem;
    background: rgba(0,0,0,0.3);
    border: none;
    color: #fff;
    cursor: pointer;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    z-index: 100001;
}

#custom-image-viewer-modal .prev-btn {
    left: 30px;
}

#custom-image-viewer-modal .next-btn {
    right: 30px;
}

#custom-image-viewer-modal .zoom-controls {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translate(-50%);
    background: #95929273;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 14px;
    z-index: 1102;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-direction: row;
    border-radius: .5rem;
}

#custom-image-viewer-modal .zoom-btn {
    background: transparent;
    border: none;
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .2s;
    font-size: 1.5rem;
}

#custom-image-viewer-modal .zoom-value {
    color: #fff;
    font-weight: bold;
    font-size: 1.1rem;
}

#custom-image-viewer-modal .thumb-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    overflow-x: auto;
    padding: 8px 0;
    width: 100vw;
    position: absolute;
    bottom: 3rem;
}

#custom-image-viewer-modal .thumb {
    height: 65px;
    width: 80px;
    border-radius: 4px;
    cursor: pointer;
    background: #fff;
    box-shadow: 0 1px 4px #0003;
    transition: outline 0.2s, opacity 0.2s;
}

#custom-image-viewer-modal .thumb.selected {
    outline: 2px solid #fff;
    opacity: 1;
}

#custom-image-viewer-modal .thumb:not(.selected) {
    opacity: 0.7;
}

/* Dark theme for custom image viewer */
[data-theme="dark"] #custom-image-viewer-modal .main-img {
    background: #333;
}

[data-theme="dark"] #custom-image-viewer-modal .thumb {
    background: #222;
}

.card-count {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    background: rgba(0,0,0,0.5);
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    font-size: 0.9rem;
}

/* Add styling for disabled navigation buttons */
.nav-button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Make file navigation controls more visible */
.file-navigation-controls {
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-buttons {
    display: flex;
    gap: 8px;
}

.nav-button {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 23px;
    border-radius: 4px;
    border: 0.5px solid #ddd;
}

[data-theme="dark"] .nav-button {
    background-color: #333;
}

.nav-button:hover:not(.disabled) {
    background-color: #e5e5e5;
}

[data-theme="dark"] .nav-button:hover:not(.disabled) {
    background-color: #444;
}

.settings-menu {
    position: absolute;
    background-color: var(--card-bg);
    color: var(--text-color);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    z-index: 1001;
    display: none;
    overflow: hidden;
    padding: 8px 0;
    border: 1px solid var(--border-color);
    max-height: 350px;
    overflow-y: auto;
    top: 31px;
    left: 30px;
    transition: max-height 0.3s ease;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.settings-menu.position-top {
    top: auto;
    bottom: 30px;
    margin-bottom: 8px;
    transition: max-height 0.3s ease;
}
.letter-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #f0f0f0;
    color: #666;
    font-weight: 500;
    font-size: 14px;
    margin-right: 10px;
}

.item-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: 10px;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    border-radius: 12px;
    background-color: #f0f0f0;
    color: #666;
    font-size: 13px;
    font-weight: normal;
}

.dropdown-item {
    font-size: 14px;
    display: flex;
    align-items: center;
    padding: 10px 16px;
    text-decoration: none;
    color: #333;
    transition: background-color 0.2s;
    position: relative;
}

[data-theme="dark"] .letter-icon {
    background-color: #333;
    color: #ddd;
}

[data-theme="dark"] .item-count {
    background-color: #333;
    color: #ddd;
}

[data-theme="dark"] .count-chevron-wrapper .fa-chevron-right {
    color: #aaa;
}

.mcp-submenu {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--card-bg);
    z-index: 1100;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: none;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.settings-menu.position-top .mcp-submenu,
.model-dropdown.position-top .mcp-submenu {
    top: auto;
    bottom: 0;
    max-height: none !important;
    height: 100% !important;
}
.mcp-submenu::-webkit-scrollbar {
    width: 6px;
}

.mcp-submenu::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
}

.mcp-submenu::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

[data-theme="dark"] .mcp-submenu::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .mcp-submenu::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Ensure the parent container doesn't scroll when mcp-submenu is open */
.settings-menu.has-active-submenu,
.model-dropdown.has-active-submenu {
    overflow: hidden;
}

.submenu-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    background-color: var(--card-bg);
    z-index: 1200;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .submenu-header {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.submenu-header .back-btn {
    background: none;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    margin-right: 10px;
}

.submenu-header .header-title {
    font-weight: 600;
}

.mcp-tools {
    padding: 8px 0;
    overflow-y: auto;
    height: calc(100% - 50px);
    -webkit-overflow-scrolling: touch;
    padding-top: 4px;
}
.tool-item {
    display: flex;
    align-items: center;
    padding: 4px 16px;
    transition: background-color 0.2s;
    cursor: pointer;
}

.tool-item:hover {
    background-color: #f5f9ff;
}

.tool-item.selected {
    background-color: #f5f9ff;
}

[data-theme="dark"] .tool-item:hover,
[data-theme="dark"] .tool-item.selected {
    background-color: rgba(33, 150, 243, 0.1);
}

.tool-icon {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background-color: #ffffff;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin-right: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.tool-name {
    flex: 1;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80%;
}

.count-chevron-wrapper {
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: -10px;
}

.count-chevron-wrapper .item-count {
    margin-left: 0;
    margin-right: 25px;
}

.count-chevron-wrapper .fa-chevron-right {
    font-size: 12px;
    color: #999;
}

.item-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: 10px;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    border-radius: 12px;
    background-color: #f0f0f0;
    color: #666;
    font-size: 13px;
    font-weight: normal;
}

.main-layout {
    width: 100vw;
     height: 100vh;
 display: flex;
 flex-direction: column;
     /* margin-left: 50px; */
     overflow: hidden;
 }

 .chat-artifact-wrapper {
    display: flex;
    width: 100%;
    height: calc(100vh - 60px);
    position: relative;
    overflow: hidden;
}

.chat-section {
    height: 100vh;
    flex: 1;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.messages-container {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Fix sidebar expansion */
.chat-artifact-wrapper.showing-artifact {
    flex-direction: row;
}

.chat-artifact-wrapper.showing-artifact .chat-section {
    width: 52%;
    flex: 0 0 52%;
}

.superAgent-artifact-popup.side-view {
    /* flex: 0 0 50%; */
    width: 48%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    contain: layout;
}

.artifact-content {
    flex: 1;
    overflow: auto;
    padding: 12px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    min-width: 0; /* Allow content to shrink below natural width */
    word-wrap: break-word;
    overflow-wrap: break-word;
    /* Ensure this doesn't interfere with input box positioning */
    position: relative;
}

/* Ensure images and iframes fit properly */
.artifact-content img,
.artifact-content iframe {
    height: auto;
    display: block;
    margin: 0 auto;
}
.chat-artifact-wrapper{
    height: 100% !important;
}

.maximize-btn{
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: 1px solid rgba(0, 0, 0, .1);
    color: #555;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: transparent;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 10;
    visibility: hidden;
    box-sizing: border-box;
}

.maximize-btn.visible {
    opacity: 1;
    visibility: visible;
}

.maximize-btn:hover {
    background-color: #e9ecef;
}

.maximize-btn.temporarily-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Ensure maximize button is always visible when needed, even with flex layouts */
.input-box:focus-within .maximize-btn.visible,
.input-box:hover .maximize-btn.visible {
    z-index: 15;
}

/* Prevent artifact content flex from affecting input positioning */
.input-container {
    position: relative;
    z-index: 5;
}

/* Hide maximize button when specific dropdowns are open to prevent overlap */
body:has(.select-agent-box.show) .maximize-btn,
body:has(.select-agent-box.position-top.show) .maximize-btn,
body:has(.model-dropdown.show) .maximize-btn,
body:has(.model-dropdown.position-top.show) .maximize-btn {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.step-body p {
    margin: 0 !important;
}
.agent-description p {
    margin: 0 !important;
    font-size: 14px;
}
.step-body h2,
.step-body h1,
.step-body ul,
.step-body li {
    margin: 0 !important;
}

.dropdown-item img {
    width: 18px !important;
    height: 18px !important;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 10px;
}

[data-theme="dark"] .tool-item:hover,
[data-theme="dark"] .tool-item.selected {
    background-color: rgba(33, 150, 243, 0.1);
    border: 1px solid #2196F3;
}
.tool-item:hover {
    background-color: #f5f9ff;
}

.tool-item.selected {
    background-color: #f5f9ff;
}

[data-theme="dark"] .tool-item:hover,
[data-theme="dark"] .tool-item.selected {
    background-color: rgba(33, 150, 243, 0.1);
}

.tool-icon {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background-color: #ffffff;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin-right: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.new-btn-background{
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    margin-left: 4px;
    margin-top: 1px;
    height: 28px;
    width: 28px;
    background: linear-gradient(71deg, #c93891 22.69%, #0147ff 110.27%);
    color: #fff;
    font-weight: 600;
}

.container {
    display: flex;
    flex: 1;
    min-height: 100vh;
}

.sidebar {
    width: 220px;
    padding-top: 30px;
    flex-shrink: 0;

    height: 100vh;
    z-index: 10;
    overflow-y: auto;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    border: unset;
}

body.dark-mode .sidebar {
    background: linear-gradient(135deg, rgba(201, 56, 145, 0.03), rgba(1, 71, 255, 0.04));
    border-color: #3a3a3a;
}

.layout-content {
    flex: 1;
    padding: 30px 48px;
    transition: background-color 0.3s ease;
    overflow: scroll;
}

body.dark-mode .layout-content {
    background-color: #232323 !important;
}

.sidebar nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

body.dark-mode .sidebar nav ul li {
    color: #e0e0e0;
}

.sidebar nav ul li:hover {
    background: #eae9e3;
}

body.dark-mode .sidebar nav ul li.active {
    background: #333333;
}
[data-theme="dark"] .dark-mode .appearance-card-wrapper ,.privacy-card,.code-card,.plan-card,.profile-form,.claude-capabilities,.feature-preview,.integrations,.info-box{
    background: linear-gradient(135deg, rgba(201, 56, 145, 0.03), rgba(1, 71, 255, 0.04)) !important;
    border: 1px solid #3a3a3a;
}
[data-theme="dark"]  .dark-mode .preferences,.desc,.feature-item,.plan-title,.plan-subtitle,.privacy-bullet-item,.privacy-section-title,.privacy-paragraph,.privacy-title,.privacy-title,.controls-title,.export-label,.metadata-description,.code-title,.ode-subtitle,.code-description,.upgrade-link,.usage-title,.info-text,.code-subtitle,.nickname,.fullName,.workFunction,label,.claude-capabilities,.cap-desc,.feature-preview,.feature-desc,.feature-tool-title,.feature-tool-desc,.integrations-desc,.integration-desc,.feature-title,.cap-title,.integrations-title{
    color: #fafafa;
}

.account-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    padding: 40px;
    max-width: 1000px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

body.dark-mode .account-card {
    background: #333333;
    border-color: #3a3a3a;
}

.page-title {
    font-size: 28px;
    font-weight: 600;
    color: #222;
    margin-bottom: 40px;
    transition: color 0.3s ease;
}

body.dark-mode .page-title {
    color: #ffffff;
}

.account-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    margin-bottom: 16px;
}

.account-label {
    font-size: 18px;
    font-weight: 500;
    color: #222;
    transition: color 0.3s ease;
}

body.dark-mode .account-label {
    color: #e0e0e0;
}

.logout-button {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    color: #222;
    font-size: 16px;
    font-weight: 500;
    padding: 12px 24px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.3s;
}

body.dark-mode .logout-button {
    background: #333333;
    border-color: #4a4a4a;
    color: #e0e0e0;
}

.logout-button:hover {
    background: #f5f4f0;
}

body.dark-mode .logout-button:hover {
    background: #444444;
}

.delete-button {
    background: #222;
    border: none;
    border-radius: 12px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    padding: 12px 24px;
    cursor: pointer;
    transition: background 0.2s;
}

.delete-button:hover {
    background: #444;
}
.main-content {
    width: 100%;
}

/* Back button styles */
.back-button {
    position: fixed;
    top: 20px;
    left: 20px;
    background-color: #f0f0f0;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: background-color 0.2s;
}

body.dark-mode .back-button {
    background-color: #333333;
    color: #ffffff;
}

.back-button:hover {
    background-color: #e0e0e0;
}

body.dark-mode .back-button:hover {
    background-color: #444444;
}
/* Agent Status Message Styles */
.agent-status-message {
    display: inline-flex;
    align-items: center;
    margin-top: 20px;
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--text-color, #333);
    font-size: 14px;
    line-height: 1.5;
    border: 1px solid #f8f8f8;
    width: fit-content;
    position: relative;
    overflow: hidden;
    height: 20px;
}

.agent-status-message .status-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 8px;
}

.agent-status-message .status-icon img {
    width: 16px;
    height: 16px;
}

.analyzing-message::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 80%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.8) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: sweep 3s linear infinite;
}

@keyframes sweep {
    0% { left: -80px; }
    100% { left: 100%; }
}

/* Dark theme support */
[data-theme="dark"] .agent-status-message {
    border-color: #333;
}

[data-theme="dark"] .analyzing-message::after {
    background: linear-gradient(
        90deg,
        rgba(51, 51, 51, 0) 0%,
        rgba(51, 51, 51, 0.8) 50%,
        rgba(51, 51, 51, 0) 100%
    );
}
.settings-title {
    padding: 5px;
    font-weight: 600;
    font-size: 1.5rem;
    color: #3D3D3A;
    text-transform: capitalize;
    /* border-bottom: 1px solid #eaeaea; */
}

body.dark-mode .settings-title {
    color: #e0e0e0;
}
.settings-container{
    height: 100%;
    width: 100%;
    overflow-y: auto;
}

.model-dropdown.position-top {
    top: auto;
    bottom: 30px;
    transition: max-height 0.3s ease;
}
.model-dropdown {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    transition: max-height 0.3s ease;
    max-height: 350px;
}
.container-layout{
    height: 100%;
}
.main-layout{
    height: 100%;
    overflow: auto;
}

[data-theme="dark"] .view-indicator {
    background-color: #333;
    width: 10px;
    height: 10px;
}
/* Fix for nested lists in markdown content */
.no-tools-message {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    margin: 10px;
    color: #666;
    font-size: 14px;
    border-radius: 8px;
    text-align: center;
}

[data-theme="dark"] .no-tools-message {
    background-color: #2a2a2a;
    color: #aaa;
    border-color: #444;
}

/* Markdown symbols styling in code-active mode */
.artifact-content.code-view pre.code-content {
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  border-radius: 6px;
  padding: 16px;
  overflow: auto;
  position: relative;
  counter-reset: line;
}

/* Style heading markers # */
.artifact-content.code-view .code-content {
  position: relative;
  color: #0c0c0d;
}

/* Style markdown headings */
.artifact-content.code-view pre.code-content strong {
  color: #0066cc;
  font-weight: bold;
}

/* Style markdown headings with # */
.artifact-content.code-view .code-content > code {
  display: block;
  position: relative;
}

/* Markdown heading markers */
.artifact-content.code-view .code-content > code::before {
  counter-increment: line;
  content: counter(line);
  position: absolute;
  left: -3em;
  width: 2.5em;
  text-align: right;
  color: #999;
}

/* Heading symbols # */
.artifact-content.code-view .code-content strong:first-child,
.artifact-content.code-view .code-content b:first-child {
  color: #005cc5;
  font-weight: bold;
}

/* Style for specific markdown symbols */
.artifact-content.code-view .code-content h1,
.artifact-content.code-view .code-content h2,
.artifact-content.code-view .code-content h3,
.artifact-content.code-view .code-content h4,
.artifact-content.code-view .code-content h5,
.artifact-content.code-view .code-content h6 {
  display: inline;
  font-weight: normal;
}

/* Specific style for markdown symbols in code-view */
.artifact-content.code-view pre.code-content::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-color: transparent;
}

/* Specific style for each markdown symbol type - updated to match the colors in the screenshot */
.md-heading {
    /* font-weight: 700; */
    color: #0000ff;
    font-weight: bold;
}

.md-list-item {
    font-weight: 700;
    color: #0000ff;
}
.md-task-box-empty {
    font-weight: 600;
    color: #a31515;
}
.md-task-box-checked {
  color: #0000ff; /* Blue for checked checkboxes [x] */
}

.md-emphasis {
  color: #6f42c1;
  font-style: italic;
}

.md-strong {
  color: #005cc5;
  font-weight: bold;
}

.md-link {
  color: #0366d6;
}

.md-code {
  color: #24292e;
  background-color: #f6f8fa;
  padding: 0.2em 0.4em;
  border-radius: 3px;
}

.md-codeblock {
  color: #24292e;
  background-color: #f6f8fa;
  display: block;
  padding: 16px;
  margin: 0 0 16px;
  border-radius: 3px;
}

/* Make entire headline text blue, not just the # symbol */
.artifact-content.code-view pre.code-content {
    line-height: 1.5;
}

/* Style for main headers (# and ##) */
.artifact-content.code-view pre.code-content h1,
.artifact-content.code-view pre.code-content h2,
.artifact-content.code-view pre.code-content h3 {
    color: #0000ff !important;
}

/* Apply blue color to lines that start with # */
.artifact-content.code-view .code-content {
    color: inherit;
}

.artifact-content.code-view .code-content span:has(.md-heading) {
    color: #0000ff;
}

.md-list-item {
    color: #333333;
}
.md-task-box-empty {
    font-weight: 600;
    color: #a31515;
}
 .artifact-content ul li::marker {
    color: transparent;
    font-size: 0;
}
.file-container ul li::marker {
    color: transparent;
    font-size: 0;
}
.command {
    p {
        margin: 0 !important;
    }
    a {
        color: #535350;
        text-decoration: none;
        pointer-events: none;
    }
    a.allow-redirect {
        pointer-events: auto;
    }
}
.agent-description h2,h1,h3,h4,h5,h6{
    font-size: 20px;
    font-weight: 600;
  }
table {
    border-collapse: collapse;
    width: 100%;
    margin: 10px 0;
    font-size: 14px;
    border: 1px solid var(--border-color);
}

th {
    background-color: var(--button-bg);
    border: 1px solid var(--border-color);
    padding: 8px 12px;
    text-align: left;
    font-weight: 600;
    color: var(--text-color);
}

td {
    border: 1px solid var(--border-color);
    padding: 8px 12px;
    color: var(--text-color);
}

tr:nth-child(even) {
    background-color: var(--input-bg);
}

tr:hover {
    background-color: var(--button-hover);
}

/* Dark theme table styles */
[data-theme="dark"] table {
    border-color: var(--border-color);
}

[data-theme="dark"] th {
    background-color: var(--button-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] td {
    border-color: var(--border-color);
}

[data-theme="dark"] tr:nth-child(even) {
    background-color: var(--input-bg);
}

[data-theme="dark"] tr:hover {
    background-color: var(--button-hover);
}
.chat_reply_icon{
    display: flex;
    align-items: center;
     gap: 8px;
        width: fit-content;
}
.reply_icon_image{
    width: 20px;
    height: 20px;
}
.reply_icon_text{
    font-size: 17px;
    /* font-weight: 900; */
    color: #222;
}
.agent-reply-section{
    width: fit-content;
}

/* Select Agent Dropdown */
.agent-selector-dropdown {
    position: relative;
    /* margin-right: 8px; */
}

.agent-selector-btn {
    padding: 5px;
    font-size: 12px;
    color: #232526;
    border-radius: 18px;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .1);
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background 0.2s;
}

.agent-selector-btn:hover {
    background: #e9ecef;
}

.agent-selector-btn .edit-icon,
.agent-selector-btn .agent-name,
.agent-selector-btn .icon-text {
    margin-right: 5px;
}

.dropdown-arrow {
    font-size: 10px;
    color: #666;
}

.select-agent-box {
    position: absolute;
    top: 35px;
    left: 0;
    width: 200px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    z-index: 1000;
}

.select-agent-box.position-top {
    top: auto;
    bottom: 41px;
}

.select-agent-header {
    padding: 2px 13px;
    font-weight: 600;
       color: #2c2c2c;
    font-size: 14px;
    border-bottom: 1px solid #f0f0f0;
}

.agent-option {
    display: flex;
    align-items: center;
    padding: 4px 13px;
    color: #2c2c2cbf;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s;
}

.agent-option:hover {
    background: #f5f5f5;
}

.agent-option.active {
    background: #f0f7ff;
}

.infinity-icon, .chat-icon, .edit-icon, .icon-text {
    font-size: 18px;
    margin-right: 12px;
    width: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-text i {
   font-size: 13px;
}

.agent-name {
    flex-grow: 1;
}

.active-check {
    color: #0066ff;
    font-weight: bold;
    margin-left: auto;
    visibility: visible;
    display: block;
}

.agent-option:not(.active) .active-check {
    display: none;
}
.link-result-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-right: 8px;
}
.fa-file{
    color: #1982FC;
    font-weight: 600;
}
.data-insights-btn{
    margin: 10px 10px 10px 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    cursor: pointer;
    padding: 10px;
    border: none;
    border-radius: 6px;
    background: linear-gradient(90deg, #f8cdda, #a18cd1, #b7c8f6);
}

pre code.hljs{
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-all;
}

pre {
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100%;
}

/* Model selector loading and status states */
.model-option.loading {
    opacity: 0.7;
    pointer-events: none;
}

.model-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-color);
    margin-left: auto;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.status-dot.status-running {
    background-color: #27ae60;
    box-shadow: 0 0 8px rgba(39, 174, 96, 0.4);
}

.status-dot.status-stopped {
    background-color: #e74c3c;
}

.status-dot.status-loading {
    background-color: #3498db;
    animation: pulse 1.5s ease-in-out infinite;
}

.status-text {
    font-size: 11px;
    text-transform: capitalize;
    font-weight: 500;
}

.model-action-btn {
    background: none;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    transition: background-color 0.2s ease;
    margin-left: 8px;
}

.model-action-btn:hover:not(:disabled) {
    background-color: var(--button-hover);
}

.model-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.model-action-btn .fa-spinner {
    animation: spin 1s linear infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Dark theme support for model status */
[data-theme="dark"] .model-status {
    color: var(--text-color);
}

[data-theme="dark"] .model-action-btn {
    color: var(--text-color);
}

[data-theme="dark"] .model-action-btn:hover:not(:disabled) {
    background-color: var(--button-hover);
}

/* Model notification styles */
.model-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 12px 16px;
    border-radius: 6px;
    color: white;
    font-size: 14px;
    z-index: 10000;
    max-width: 300px;
    word-wrap: break-word;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.model-notification-error {
    background-color: #e74c3c;
}

.model-notification-success {
    background-color: #27ae60;
}

.model-notification-info {
    background-color: #3498db;
}
.system-error-message{
    color: #ee4e4e;
}
/* File card styles */
.file-pill {
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: 8px;
  padding: 12px 16px;
  max-width: 300px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  position: relative;
  border: 1px solid #e5e7eb;
  transition: all 0.15s ease;
  gap: 12px;
}

.file-pill:last-child {
  margin-bottom: 0;
}

.file-pill:hover {
  border-color: #d1d5db;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.file-info-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    overflow: hidden;
    min-width: 0;
}

.file-pill-img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  margin-right: 10px;
  border-radius: 4px;
}

.file-pill-span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 500;
  color: #111827;
  line-height: 1.2;
}

.file-pill-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  color: #6b7280;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
  opacity: 0;
  position: absolute;
  top: -8px;
  right: -8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.file-pill:hover .file-pill-btn {
  opacity: 1;
}

.file-pill-btn:hover {
  background: #ffffff;
  color: #ef4444;
  transform: scale(1.1);
}

[data-theme="dark"] .file-pill {
  background: #374151;
  border-color: #4b5563;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .file-pill-span {
  color: #f9fafb;
}

[data-theme="dark"] .file-pill-status {
  color: #9ca3af;
}

[data-theme="dark"] .file-pill-icon {
  background: #4b5563;
}

[data-theme="dark"] .file-pill.mcp-pending .file-pill-icon {
  background: #1e3a8a;
}

[data-theme="dark"] .file-pill.mcp-result .file-pill-icon {
  background: #14532d;
}

[data-theme="dark"] .file-pill.mcp-result:hover {
  border-color: #60a5fa;
  background: #2d3748;
}

[data-theme="dark"] .file-pill-btn {
  background: rgba(55, 65, 81, 0.9);
  color: #9ca3af;
}

[data-theme="dark"] .file-pill-btn:hover {
  background: #374151;
  color: #ef4444;
  transform: scale(1.1);
}

[data-theme="dark"] .clean-loader {
  border-color: #4b5563;
  border-top-color: #60a5fa;
}

/* MCP-specific file pill styles */
.file-pill.mcp-pending {
  background: #ffffff;
  border: 1px solid #e5e7eb;
}

.file-pill.mcp-result {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  cursor: pointer;
}

.file-pill.mcp-result:hover {
  border-color: #3b82f6;
  background: #f8fafc;
}

.file-pill-status {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
  line-height: 1.2;
}

.file-pill-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: #f9fafb;
  flex-shrink: 0;
}

.file-pill-icon svg {
  width: 20px;
  height: 20px;
  color: #6b7280;
}

.file-pill.mcp-pending .file-pill-icon {
  background: #eff6ff;
}

.file-pill.mcp-pending .file-pill-icon svg {
  color: #3b82f6;
}

.file-pill.mcp-result .file-pill-icon {
  background: #f0fdf4;
}

.file-pill.mcp-result .file-pill-icon svg {
  color: #22c55e;
}

.clean-loader {
  width: 16px;
  height: 16px;
  border: 2px solid #e5e7eb;
  border-top: 2px solid #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.file-preview-container {
  position: relative;
}

.file-preview-scroll {
    display: none;
    overflow-y: auto;
    flex-direction: row;
    gap: 12px;
    padding: 15px 15px 0px 15px;
    position: relative;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* background: #fafbfc; */
    border-radius: 8px;
    max-height: 400px;
}

.file-preview-scroll::-webkit-scrollbar {
  display: none;
}

.file-preview-scroll:not(:empty) {
  display: flex;
}

.file-preview-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 10;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: auto;
}

.file-preview-nav.left {
  left: 2px;
}

.file-preview-nav.right {
  right: 2px;
}

.file-preview-nav.visible {
  opacity: 1;
}

.file-preview-nav:hover {
  background-color: rgba(255, 255, 255, 0.95);
}

[data-theme="dark"] .file-preview-nav {
  background-color: rgba(50, 50, 50, 0.8);
}

[data-theme="dark"] .file-preview-nav:hover {
  background-color: rgba(70, 70, 70, 0.95);
}

[data-theme="dark"] .file-preview-scroll {
  background: #374151;
  border-color: #4b5563;
}

.zoom-controls {
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgb(76 76 76 / 70%);
  border-radius: 20px;
  padding: 5px 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.file-image {
  max-height: 80vh;
  max-width: 90%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.file-image-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 100px;
}

.file-iframe-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(30, 30, 30, 0.97);
    display: flex;
    flex-direction: column;
    z-index: 99999;
}

.file-iframe-modal .close-btn-image {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    z-index: 100000;
    background: #626262;
    border-radius: 50px;
    width: 40px;
    height: 40px;
    justify-content: center;
    display: flex;
    align-items: center;
}

.file-iframe-modal .zoom-controls {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.file-iframe-modal .zoom-btn {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    width: 30px;
    height: 30px;
}

.file-iframe-modal .zoom-value {
    color: white;
    font-weight: bold;
}

.file-iframe-modal .file-image-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 100px;
}

.file-iframe-modal .file-image {
    max-height: 80vh;
    max-width: 90%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    cursor: grab;
}

.file-iframe-modal .file-image.dragging {
    cursor: grabbing;
}

/* File Card Display Styles */
.file-container {
    height: 100%;
    width: 100%;
}

.file-content {
    height: 100%;
}

.artifact-title.hidden,
.jump-container.hidden,
.artifact-playback.hidden,
#artifact-title.hidden,
.nav-buttons.hidden,
.view-mode-controls.hidden,
.artifact-fullscreen-btn.hidden,
.nav-button.hidden {
    display: none;
}

.artifact-title {
    display: flex;
}

.file-iframe {
    width: 100%;
    height: 100% !important;
    border: none;
}
.drop-icon{
    font-size: 24px;
}

.drag-drop-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    border: 2px dashed #e7e7e7;
    border-radius: 12px;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    pointer-events: none;
    transition: all 0.2s ease;
}

.drop-message {
    text-align: center;
    color: #d6d3d3;
    font-size: 18px;
    font-weight: 600;
}

.drop-icon {
    font-size: 24px;
    margin-bottom: 10px;
    opacity: 0.8;
}

.drop-text {
    font-size: 18px;
    font-weight: 600;
}

[data-theme="dark"] .drag-drop-overlay {
    background: #2a2a2a;
    border-color: #4a9eff;
}

[data-theme="dark"] .drop-message {
    color: #4a9eff;
}

[data-theme="dark"] .drop-icon {
    opacity: 0.9;
}

.header-quick-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 16px;
    position: relative;
    z-index: 99;
}

.header-quick-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    color: #232526;
    font-size: 20px;
    align-items: center;
    justify-content: center;
    position: relative;
}

.header-quick-action-btn svg {
    width: 18px;
    height: 18px;
    color: var(--text-color);
}

.header-quick-action-btn svg path {
    stroke: currentColor;
    fill: none;
}

.header-quick-action-btn[data-action="usecases"] svg path {
    fill: currentColor;
    stroke: none;
}

/* Custom tooltip styles for header quick actions */
.header-quick-action-tooltip {
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    background-color: #333;
    color: white;
    padding: 3px 5px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 100001;
    pointer-events: none;
}

.header-quick-action-tooltip::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-bottom-color: #333;
}

.header-quick-action-btn:hover .header-quick-action-tooltip {
    opacity: 1;
    visibility: visible;
}

[data-theme="dark"] .header-quick-action-tooltip {
    background-color: #555;
    color: #f0f0f0;
}

[data-theme="dark"] .header-quick-action-tooltip::after {
    border-top-color: #555;
}
.header-menu {
    position: relative;
    margin-left: auto;
}

.chat-options-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: #232526;
    font-size: 20px;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
}
.chat-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: white;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    min-width: 180px;
    display: none;
    z-index: 1000;
    padding: 4px 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.chat-dropdown-menu.show {
    display: block;
}

.chat-dropdown-menu .dropdown-item {
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    color: #232526;
    transition: background-color 0.2s;
    font-size: 14px;
    font-weight: 400;
}

.chat-dropdown-menu .dropdown-item:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.chat-dropdown-menu .dropdown-item .item-left {
    display: flex;
    align-items: center;
}

.chat-dropdown-menu .dropdown-item .item-right {
    color: #8E8E93;
    display: flex;
    align-items: center;
}

.chat-dropdown-menu .dropdown-item i {
    font-size: 16px;
    width: 20px;
    text-align: center;
    color: #8E8E93;
    margin: auto;
}

.chat-dropdown-menu .dropdown-item.delete {
    color: #FF3B30;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chat-dropdown-menu .dropdown-item.delete .item-right {
    margin-left: auto;
}

.chat-dropdown-menu .dropdown-item.delete .item-right i {
    color: #FF3B30;
}

[data-theme="dark"] .three-dot-menu {
    color: #ffffff;
}

[data-theme="dark"] .chat-dropdown-menu {
    background: #2c2c2e;
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .chat-dropdown-menu .dropdown-item {
    color: #ffffff;
}

[data-theme="dark"] .chat-dropdown-menu .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .chat-dropdown-menu .dropdown-item.delete,
[data-theme="dark"] .chat-dropdown-menu .dropdown-item.delete .item-right i {
    color: #FF453A;
    .artifact-title-syia{
        display: none;
    }
}

/* Hide mobile-only items on desktop */
.mobile-only-item {
    display: none;
}

.mobile-only-separator {
    display: none;
}

/* Dropdown separator styling */
.dropdown-separator {
    height: 1px;
    background-color: #e0e0e0;
    margin: 4px 0;
}

[data-theme="dark"] .dropdown-separator {
    background-color: #333;
}
/* Dark theme styles for file options */
[data-theme="dark"] .file-options-icon {
    color: #ccc;
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .file-options-icon:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

[data-theme="dark"] .file-options-popup {
    background: #2d2d2d;
    border-color: #404040;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .file-option-item {
    border-bottom-color: #404040;
}

[data-theme="dark"] .file-option-item:hover {
    background-color: #3a3a3a;
}

[data-theme="dark"] .file-option-item svg {
    color: #ccc;
}

[data-theme="dark"] .file-option-item span {
    color: #fff;
}
.file-navigation-controls {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Skip Button Styles */
.skip-to-results-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 12px;
    margin-top: 8px;
    position: relative;
    z-index: 2000;
    cursor: pointer;
    border-radius: 25px;
    transition: all 0.2s ease;
    pointer-events: auto;
}

.skip-to-results-btn {
    background-color: #007bff;
    color: white;
    border: 2px solid #007bff;
    border-radius: 8px;
    padding: 6px 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
    position: fixed;
    bottom: 10rem;
    z-index: 2001;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    pointer-events: auto;
}

.skip-to-results-btn:hover {
    background-color: #007bff;
    border-color: #007bff;
    transform: scale(1.05) translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 86, 179, 0.4);
}

.skip-to-results-btn:active {

    transform: scale(0.98) translateY(0);
    box-shadow: 0 1px 4px rgba(0, 123, 255, 0.3);
}

/* Replay Button Styles */
.replay-icon-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 12px;
    margin-top: 8px;
}

.replay-icon {
    width: 25px;
    height: 25px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.replay-icon:hover {
    opacity: 1;
}

/* Monaco Editor Styles - Light Mode */
.monaco-editor-container {
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: #ffffff;
    font-family: monospace;
}

.monaco-editor-container .monaco-editor {
    background: #ffffff !important;
}

.monaco-editor-container .monaco-editor .margin {
    background: #ffffff !important;
}

.monaco-editor-container .monaco-editor .monaco-editor-background {
    background: #ffffff !important;
}

.monaco-editor-container .monaco-editor .line-numbers {
    color: #999999 !important;
    font-family: monospace;
}

.monaco-editor-container .monaco-editor .current-line {
    background: rgba(0, 0, 0, 0.04) !important;
}

.monaco-editor-container .monaco-editor .view-line {
    font-family: monospace;
}

/* Dark theme Monaco Editor adjustments */
[data-theme="dark"] .monaco-editor-container {
    border-color: #333333;
    background: #1e1e1e;
}

[data-theme="dark"] .monaco-editor-container .monaco-editor {
    background: #1e1e1e !important;
}

[data-theme="dark"] .monaco-editor-container .monaco-editor .margin {
    background: #1e1e1e !important;
}

[data-theme="dark"] .monaco-editor-container .monaco-editor .monaco-editor-background {
    background: #1e1e1e !important;
}

/* Additional Monaco Editor enhancements - Light Mode */
.monaco-editor-container .monaco-editor .cursor {
    color: #000000 !important;
}

.monaco-editor-container .monaco-editor .selected-text {
    background: rgba(173, 214, 255, 0.25) !important;
}

.monaco-editor-container .monaco-editor .focused .selected-text {
    background: rgba(173, 214, 255, 0.35) !important;
}

.monaco-editor-container .monaco-editor .bracket-match {
    background: rgba(0, 0, 0, 0.1) !important;
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
}

/* Light mode text colors */
.monaco-editor-container .monaco-editor .view-line {
    color: #000000 !important;
}

/* Monaco Editor responsive adjustments */
@media (max-width: 768px) {
    .monaco-editor-container {
        height: 300px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .monaco-editor-container {
        height: 250px;
        font-size: 11px;
    }
}

.new-tab-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    margin-left: 8px;
    position: relative;
}

.new-tab-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.new-tab-btn:active {
    background-color: rgba(0, 0, 0, 0.1);
}

.new-tab-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}

.new-tab-btn:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

.new-tab-btn svg {
    transition: transform 0.2s ease;
    stroke: #666;
}

.new-tab-btn:hover svg {
    transform: scale(1.1);
}

/* Dark mode styles */
body.dark-mode .new-tab-btn:hover,
[data-theme="dark"] .new-tab-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .new-tab-btn:active,
[data-theme="dark"] .new-tab-btn:active {
    background-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode .new-tab-btn svg,
[data-theme="dark"] .new-tab-btn svg {
    stroke: #ffffff;
}

body.dark-mode .new-tab-btn:focus,
[data-theme="dark"] .new-tab-btn:focus {
    box-shadow: 0 0 0 2px rgba(147, 197, 253, 0.5);
}

body.dark-mode .new-tab-btn:focus-visible,
[data-theme="dark"] .new-tab-btn:focus-visible {
    outline-color: #93c5fd;
}
/* ===== UPLOADED FILES MESSAGE CONTAINER ===== */
.uploaded-files-message {
    align-self: flex-end;
    max-width: 300px;
    margin: 0 0 0 auto;
    padding: 0;
    background-color: transparent;
    border: unset;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all 0.2s ease;
}

/* ===== IMAGES GRID SECTION ===== */
.uploaded-images-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.uploaded-images-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    max-width: 100%;
    justify-content: flex-start;
}

.uploaded-image-item {
    position: relative;
    height: 90px;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid #fff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.uploaded-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ===== FILES LIST SECTION ===== */
.uploaded-files-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.uploaded-files-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.uploaded-file-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 1px 5px;
    background-color: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    transition: all 0.2s ease;
    cursor: pointer;
    min-height: 44px;
    min-width:  220px;
}

.uploaded-file-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.uploaded-file-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.uploaded-file-name {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: #1a1a1a;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -0.01em;
}

/* ===== SECTION HEADERS (OPTIONAL) ===== */
.uploaded-section-header {
    font-size: 12px;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    padding-left: 2px;
}

/* ===== ANIMATION ENHANCEMENTS ===== */
.uploaded-files-message {
    animation: slideInFromRight 0.3s ease-out;
}

@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ===== ACCESSIBILITY ===== */
.uploaded-image-item:focus,
.uploaded-file-item:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

.uploaded-image-item:focus {
    border-color: #007bff;
}

/* ===== LOADING STATES ===== */
.uploaded-file-item.loading .uploaded-file-icon {
    opacity: 0.6;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* ===== DARK THEME STYLES ===== */
[data-theme="dark"] .uploaded-files-message {
    background-color: #2a2a2a;
    border: 1px solid #404040;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .uploaded-files-message:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .uploaded-image-item {
    border-color: #404040;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .uploaded-image-item:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .uploaded-file-item {
    background-color: #333333;
    border-color: #404040;
}

[data-theme="dark"] .uploaded-file-item:hover {
    background-color: #3a3a3a;
    border-color: #505050;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .uploaded-file-name {
    color: #e9ecef;
}

[data-theme="dark"] .uploaded-section-header {
    color: #9ca3af;
}

[data-theme="dark"] .uploaded-image-item:focus,
[data-theme="dark"] .uploaded-file-item:focus {
    outline-color: #0ea5e9;
}

[data-theme="dark"] .uploaded-image-item:focus {
    border-color: #0ea5e9;
}

/* ===== CHAT HISTORY LOADING OVERLAY ===== */
:root {
    --loading-overlay-bg-light: rgba(255, 255, 255, 0.9);
    --loading-overlay-bg-dark: rgba(31, 41, 55, 0.9);
    --loading-spinner-border-light: #e5e7eb;
    --loading-spinner-accent-light: #0066cc;
    --loading-spinner-border-dark: #374151;
    --loading-spinner-accent-dark: #60a5fa;
    --loading-text-color-light: #374151;
    --loading-text-color-dark: #f9fafb;
    --loading-subtext-color-light: #6b7280;
    --loading-subtext-color-dark: #9ca3af;
    --loading-transition-duration: 0.3s;
    --loading-spinner-duration: 1s;
}

.chat-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--loading-overlay-bg-light);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 50; /* Lower z-index to not cover sidebar (sidebar has z-index: 100) */
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--loading-transition-duration) ease, visibility var(--loading-transition-duration) ease;
}

.chat-loading-overlay.active {
    opacity: 1;
    visibility: visible;
}

.chat-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--loading-spinner-border-light);
    border-top: 3px solid var(--loading-spinner-accent-light);
    border-radius: 50%;
    animation: spin var(--loading-spinner-duration) linear infinite;
    margin-bottom: 16px;
}

.chat-loading-text {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: var(--loading-text-color-light);
    text-align: center;
}

.chat-loading-subtext {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    color: var(--loading-subtext-color-light);
    margin-top: 8px;
    text-align: center;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Dark theme support */
[data-theme="dark"] .chat-loading-overlay {
    background-color: var(--loading-overlay-bg-dark);
}

[data-theme="dark"] .chat-loading-spinner {
    border-color: var(--loading-spinner-border-dark);
    border-top-color: var(--loading-spinner-accent-dark);
}

[data-theme="dark"] .chat-loading-text {
    color: var(--loading-text-color-dark);
}

[data-theme="dark"] .chat-loading-subtext {
    color: var(--loading-subtext-color-dark);
}

/* Responsive adjustments for view button - improved specificity without !important */
@media (max-width: var(--mobile-breakpoint)) {
    .chat-container .file-item,
    .modal-content .file-item {
        padding: 5px 30px 5px 5px; /* Reduced right padding on mobile */
    }

    .chat-container .modal-file-item,
    .modal-content .modal-file-item {
        padding: 12px 35px 12px 12px; /* Reduced right padding on mobile */
    }

    .file-item .view-btn,
    .modal-file-item .view-btn {
        right: 3px; /* Closer to edge on mobile */
        padding: 3px; /* Smaller padding on mobile */
    }

    .file-item .view-btn svg,
    .modal-file-item .view-btn svg {
        width: 16px; /* Smaller icon on mobile */
        height: 16px;
    }
}
.docx-preview-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 400px;
    text-align: center;
    background-color: #fafafa;
    border-radius: 8px;
}

.docx-icon {
    margin-bottom: 20px;
}

.docx-title {
    color: #333;
    margin: 0 0 12px 0;
    font-size: 20px;
    font-weight: 600;
}

.docx-message {
    color: #666;
    margin: 0 0 24px 0;
    font-size: 16px;
    line-height: 1.5;
    max-width: 400px;
}

.docx-download-btn {
    background-color: #007bff;
    color: white;
    padding: 12px 24px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.2s;
    display: inline-block;
}

.docx-download-btn:hover {
    background-color: #0056b3;
}
.file-iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* MCP Prompt Modal Styles */
.mcp-prompt-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.mcp-prompt-modal-content {
    background: var(--surface-color, #ffffff);
    border-radius: 12px;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color, #e2e8f0);
}

.mcp-prompt-modal-header {
    padding: 20px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mcp-prompt-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color, #1a202c);
}

.mcp-prompt-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-muted, #64748b);
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.mcp-prompt-modal-close:hover {
    background-color: var(--hover-bg, #f1f5f9);
    color: var(--text-color, #1a202c);
}

.mcp-prompt-modal-body {
    padding: 20px;
}

.mcp-prompt-description {
    margin: 0 0 20px 0;
    color: var(--text-muted, #64748b);
    font-size: 14px;
    line-height: 1.5;
}

.mcp-prompt-arg {
    margin-bottom: 16px;
}

.mcp-prompt-arg label {
    display: block;
    font-weight: 500;
    color: var(--text-color, #1a202c);
    margin-bottom: 6px;
    font-size: 14px;
}

.mcp-prompt-arg .required {
    color: #ef4444;
    margin-left: 2px;
}

.mcp-prompt-arg input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.2s ease;
    background: var(--input-bg, #ffffff);
    color: var(--text-color, #1a202c);
    box-sizing: border-box;
}

.mcp-prompt-arg input:focus {
    outline: none;
    border-color: var(--primary-color, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.mcp-prompt-arg .arg-description {
    display: block;
    color: var(--text-muted, #64748b);
    font-size: 12px;
    margin-top: 4px;
    line-height: 1.4;
}

.mcp-prompt-modal-footer {
    padding: 20px;
    border-top: 1px solid var(--border-color, #e2e8f0);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.mcp-prompt-cancel,
.mcp-prompt-execute {
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.mcp-prompt-cancel {
    background: var(--surface-color, #f8fafc);
    color: var(--text-muted, #64748b);
    border: 1px solid var(--border-color, #e2e8f0);
}

.mcp-prompt-cancel:hover {
    background: var(--hover-bg, #f1f5f9);
    color: var(--text-color, #1a202c);
}

.mcp-prompt-execute {
    background: var(--primary-color, #3b82f6);
    color: white;
}

.mcp-prompt-execute:hover {
    background: var(--primary-hover, #2563eb);
}

.mcp-loader {
    display: inline-block;
    margin-right: 8px;
    color: currentColor;
}

/* Dark mode support for modal */
[data-theme="dark"] .mcp-prompt-modal-content {
    background: #2a2a2a;
    border-color: #404040;
    --text-color: #ffffff;
    --text-muted: #999999;
    --border-color: #404040;
    --input-bg: #1a1a1a;
    --hover-bg: #333333;
    --surface-color: #333333;
}

[data-theme="dark"] .mcp-prompt-arg input {
    background: #1a1a1a;
    color: #ffffff;
    border-color: #404040;
}

[data-theme="dark"] .mcp-prompt-cancel {
    background: #333333;
    color: #999999;
    border-color: #404040;
}

[data-theme="dark"] .mcp-prompt-cancel:hover {
    background: #404040;
    color: #ffffff;
}

/* MCP Prompts Autocomplete Styles */
.mcp-autocomplete-container {
    position: relative;
    display: inline-block;
    width: 100%;
}

.mcp-autocomplete-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 8px 32px var(--shadow-color);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    margin-bottom: 8px;
    display: none;
    backdrop-filter: blur(10px);
}

.mcp-autocomplete-dropdown.visible {
    display: block;
}

.mcp-autocomplete-header {
    padding: 12px 16px 8px 16px;
    border-bottom: 1px solid var(--border-color);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--background-secondary);
    border-radius: 12px 12px 0 0;
}

.mcp-autocomplete-item {
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.mcp-autocomplete-item:last-child {
    border-bottom: none;
    border-radius: 0 0 12px 12px;
}

.mcp-autocomplete-item:hover,
.mcp-autocomplete-item.selected {
    background: var(--hover-bg);
    transform: translateX(2px);
}

.mcp-autocomplete-item-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: white;
    font-weight: 600;
    margin-top: 2px;
}

.mcp-autocomplete-item-content {
    flex: 1;
    min-width: 0;
}

.mcp-autocomplete-item-name {
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 2px;
    font-size: 14px;
}

.mcp-autocomplete-item-description {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mcp-autocomplete-item-server {
    font-size: 10px;
    color: var(--text-tertiary);
    background: var(--background-secondary);
    padding: 2px 6px;
    border-radius: 4px;
    margin-top: 4px;
    display: inline-block;
    font-weight: 500;
}

.mcp-autocomplete-no-results {
    padding: 20px 16px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 14px;
}

.mcp-autocomplete-loading {
    padding: 20px 16px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.mcp-autocomplete-loading-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-color);
    border-top: 2px solid var(--primary-color);
    border-radius: 50%;
    animation: mcp-spin 1s linear infinite;
}

@keyframes mcp-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Dark theme overrides for MCP autocomplete */
[data-theme="dark"] .mcp-autocomplete-dropdown {
    background: #2a2a2a;
    border-color: #404040;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .mcp-autocomplete-header {
    background: #333333;
    border-bottom-color: #404040;
    color: #999999;
}

[data-theme="dark"] .mcp-autocomplete-item {
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .mcp-autocomplete-item:hover,
[data-theme="dark"] .mcp-autocomplete-item.selected {
    background: #333333;
}

[data-theme="dark"] .mcp-autocomplete-item-server {
    background: #333333;
    color: #888888;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .mcp-autocomplete-dropdown {
        margin-bottom: 4px;
        border-radius: 8px;
        max-height: 250px;
    }

    .mcp-autocomplete-item {
        padding: 10px 12px;
        gap: 10px;
    }

    .mcp-autocomplete-item-icon {
        width: 18px;
        height: 18px;
        font-size: 11px;
    }

    .mcp-autocomplete-item-name {
        font-size: 13px;
    }

    .mcp-autocomplete-item-description {
        font-size: 11px;
    }

}

/* Tauri Desktop-specific styles - Hide specific buttons on desktop only */
body.tauri-desktop .power-toggle-container,
body.tauri-desktop button[data-action="workspace"],
body.tauri-desktop button[data-action="folders"],
body.tauri-desktop .web-quick-actions[data-action="workspace"],
body.tauri-desktop .web-quick-actions[data-action="folders"] {
    display: none !important;
}