/* ============================================================================
   av-themes.css — Modulo CSS estratto da av.html
   AIVEK Vision — Generato automaticamente
   ============================================================================ */

/* ===================================
   COLOR THEMES SYSTEM
   =================================== */

/* Theme Menu Styles */
.theme-menu-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
    margin: 8px 6px;
}

.theme-menu-title {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 14px 4px;
    font-weight: 600;
}

.theme-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.theme-option:hover {
    background: rgba(102, 126, 234, 0.25);
}

.theme-option.active {
    background: rgba(102, 126, 234, 0.4);
}

.theme-color-preview {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}

/* Theme Selector in Dropdown Menu */
.dropdown-theme-section {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.theme-selector-grid {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 8px 0;
    pointer-events: auto;
    position: relative;
    z-index: 10;
}

.theme-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    z-index: 11;
}

.theme-btn:hover {
    transform: scale(1.15);
}

.theme-btn.active {
    border-color: #667eea;
    box-shadow: 0 0 12px rgba(102, 126, 234, 0.5);
}

.theme-color-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    pointer-events: none;
}

/* Theme Section in Header Menu */
.header-theme-section {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    pointer-events: auto;
    position: relative;
    z-index: 10;
}

.header-theme-title {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    text-align: center;
}

/* Common theme selectors for all gradient elements */
body[class*="theme-"] .chat-header,
body[class*="theme-"] .dropdown-content,
body[class*="theme-"] .mode-status,
body[class*="theme-"] .mode-pill,
body[class*="theme-"] .chat-input,
body[class*="theme-"] .input-menu-content,
body[class*="theme-"] .modal-header,
body[class*="theme-"] .btn-send,
body[class*="theme-"] .btn-primary,
body[class*="theme-"] .menu-button-item,
body[class*="theme-"] .header-menu-item,
body[class*="theme-"] .studio-add-btn,
body[class*="theme-"] .studio-add-btn-secondary,
body[class*="theme-"] .studio-menu,
body[class*="theme-"] .studio-lite-side-btn,
body[class*="theme-"] .studio-lite-menu,
body[class*="theme-"] .studio-lite-header-menu,
body[class*="theme-"] .studio-panel-header,
body[class*="theme-"] .av-status-pill {
    background: linear-gradient(135deg, var(--theme-gradient-start), var(--theme-gradient-end)) !important;
    color: var(--theme-text) !important;
    box-shadow: 0 8px 32px var(--theme-shadow) !important;
}

body[class*="theme-"] .main-logo,
body[class*="theme-"] .header-content h2,
body[class*="theme-"] .dropdown-content span,
body[class*="theme-"] .menu-button-item span,
body[class*="theme-"] .header-menu-item span,
body[class*="theme-"] .studio-menu-item span,
body[class*="theme-"] .studio-lite-menu-item span,
body[class*="theme-"] .studio-panel-header h3 {
    color: var(--theme-text) !important;
}

body[class*="theme-"] .menu-button-item i,
body[class*="theme-"] .header-menu-item i,
body[class*="theme-"] .studio-menu-item i,
body[class*="theme-"] .studio-lite-menu-item i,
body[class*="theme-"] .studio-panel-header h3 i,
body[class*="theme-"] .studio-panel-close,
body[class*="theme-"] .studio-add-btn i,
body[class*="theme-"] .studio-add-btn-secondary i {
    color: var(--theme-text) !important;
    opacity: 0.85;
}

body[class*="theme-"] .chat-input textarea {
    color: var(--theme-text) !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
}

body[class*="theme-"] .chat-input textarea::placeholder {
    color: var(--theme-text) !important;
    opacity: 0.6;
}

body[class*="theme-"] .btn-menu {
    color: var(--theme-text) !important;
}

/* Theme: Mint AI Fresh */
body.theme-mint {
    --theme-gradient-start: #A8FFCE;
    --theme-gradient-end: #3AD8A3;
    --theme-text: #0A3A2A;
    --theme-shadow: rgba(58, 216, 163, 0.35);
}
body.theme-mint.dark-mode {
    --theme-gradient-start: #0E2A21;
    --theme-gradient-end: #134E3A;
    --theme-text: #3AD8A3;
    --theme-shadow: rgba(58, 216, 163, 0.25);
}
body.theme-mint .studio-lite-av-badge {
    background: rgba(58, 216, 163, 0.25) !important;
}
body.theme-mint .av-badge-dot {
    background: #3AD8A3 !important;
}

/* Theme: Honey Glow */
body.theme-honey {
    --theme-gradient-start: #FFE29F;
    --theme-gradient-end: #FFA99F;
    --theme-text: #473A2A;
    --theme-shadow: rgba(255, 169, 159, 0.35);
}
body.theme-honey.dark-mode {
    --theme-gradient-start: #3A2C18;
    --theme-gradient-end: #5A3B25;
    --theme-text: #FFA99F;
    --theme-shadow: rgba(255, 169, 159, 0.25);
}
body.theme-honey .studio-lite-av-badge {
    background: rgba(255, 169, 159, 0.25) !important;
}
body.theme-honey .av-badge-dot {
    background: #FFA99F !important;
}

/* Theme: Ice to Navy */
body.theme-ice {
    --theme-gradient-start: #E0F3FF;
    --theme-gradient-end: #2980B9;
    --theme-text: #0E2A42;
    --theme-shadow: rgba(41, 128, 185, 0.35);
}
body.theme-ice.dark-mode {
    --theme-gradient-start: #0C1620;
    --theme-gradient-end: #1C3350;
    --theme-shadow: rgba(41, 128, 185, 0.25);
    --theme-text: #2980B9;
}
body.theme-ice .studio-lite-av-badge {
    background: rgba(41, 128, 185, 0.25) !important;
}
body.theme-ice .av-badge-dot {
    background: #2980B9 !important;
}

/* Theme: Moss Cloud */
body.theme-moss {
    --theme-gradient-start: #E8EEE8;
    --theme-gradient-end: #CDD5CD;
    --theme-text: #3D4A3D;
    --theme-shadow: rgba(61, 74, 61, 0.25);
}
body.theme-moss.dark-mode {
    --theme-gradient-start: #1E241E;
    --theme-gradient-end: #2E362E;
    --theme-text: #CDD5CD;
    --theme-shadow: rgba(205, 213, 205, 0.2);
}
body.theme-moss .studio-lite-av-badge {
    background: rgba(205, 213, 205, 0.25) !important;
}
body.theme-moss .av-badge-dot {
    background: #CDD5CD !important;
}

/* Theme: Latte Cream */
body.theme-latte {
    --theme-gradient-start: #F9F5F0;
    --theme-gradient-end: #E5DED7;
    --theme-text: #463D35;
    --theme-shadow: rgba(70, 61, 53, 0.25);
}
body.theme-latte.dark-mode {
    --theme-gradient-start: #2A2521;
    --theme-gradient-end: #3B332E;
    --theme-text: #E5DED7;
    --theme-shadow: rgba(229, 222, 215, 0.2);
}
body.theme-latte .studio-lite-av-badge {
    background: rgba(229, 222, 215, 0.25) !important;
}
body.theme-latte .av-badge-dot {
    background: #E5DED7 !important;
}

/* Theme: Arctic Fog */
body.theme-arctic {
    --theme-gradient-start: #E2EBF0;
    --theme-gradient-end: #C7D0D9;
    --theme-text: #2E3A45;
    --theme-shadow: rgba(46, 58, 69, 0.25);
}
body.theme-arctic.dark-mode {
    --theme-gradient-start: #1A2229;
    --theme-gradient-end: #27333C;
    --theme-text: #C7D0D9;
    --theme-shadow: rgba(199, 208, 217, 0.2);
}
body.theme-arctic .studio-lite-av-badge {
    background: rgba(199, 208, 217, 0.25) !important;
}
body.theme-arctic .av-badge-dot {
    background: #C7D0D9 !important;
}

/* Theme accent colors for icons and interactive elements */
body[class*="theme-"] .studio-lite-menu-item i,
body[class*="theme-"] .studio-file-item i,
body[class*="theme-"] .studio-card-header,
body[class*="theme-"] .welcome-kicker,
body[class*="theme-"] .input-menu-item i,
body[class*="theme-"] .dropdown-item i,
body[class*="theme-"] .header-menu-item i,
body[class*="theme-"] .menu-button i,
body[class*="theme-"] .studio-panel-empty p,
body[class*="theme-"] .studio-card-value,
body[class*="theme-"] .studio-dropzone p,
body[class*="theme-"] .studio-dropzone small,
body[class*="theme-"] .studio-toggle-label,
body[class*="theme-"] .studio-file-name,
body[class*="theme-"] .studio-file-size,
body[class*="theme-"] .studio-btn-secondary {
    color: var(--theme-text) !important;
}

body[class*="theme-"] .studio-panel-empty i,
body[class*="theme-"] .studio-dropzone i {
    background: linear-gradient(135deg, var(--theme-gradient-start) 0%, var(--theme-gradient-end) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

body[class*="theme-"] .studio-panel {
    background: linear-gradient(180deg, 
        color-mix(in srgb, var(--theme-gradient-start) 15%, transparent) 0%, 
        color-mix(in srgb, var(--theme-gradient-end) 10%, transparent) 50%,
        rgba(255, 255, 255, 0.02) 100%) !important;
    border-color: color-mix(in srgb, var(--theme-gradient-end) 30%, transparent) !important;
    box-shadow: 0 0 60px var(--theme-shadow) !important;
}

body[class*="theme-"] .studio-card {
    background: linear-gradient(135deg, 
        color-mix(in srgb, var(--theme-gradient-start) 15%, transparent),
        color-mix(in srgb, var(--theme-gradient-end) 12%, transparent)
    ) !important;
    border-color: color-mix(in srgb, var(--theme-gradient-end) 25%, transparent) !important;
}

body[class*="theme-"] .studio-dropzone {
    border-color: color-mix(in srgb, var(--theme-gradient-end) 50%, transparent) !important;
    background: linear-gradient(135deg, 
        color-mix(in srgb, var(--theme-gradient-start) 10%, transparent),
        color-mix(in srgb, var(--theme-gradient-end) 8%, transparent)
    ) !important;
}

body[class*="theme-"] .studio-dropzone:hover {
    border-color: var(--theme-gradient-end) !important;
    background: linear-gradient(135deg, 
        color-mix(in srgb, var(--theme-gradient-start) 15%, transparent),
        color-mix(in srgb, var(--theme-gradient-end) 12%, transparent)
    ) !important;
}

body[class*="theme-"] .studio-toggle-item {
    border-color: color-mix(in srgb, var(--theme-gradient-end) 20%, transparent) !important;
}

body[class*="theme-"] .studio-btn {
    background: linear-gradient(135deg, var(--theme-gradient-start) 0%, var(--theme-gradient-end) 100%) !important;
    color: var(--theme-text) !important;
    box-shadow: 0 4px 16px var(--theme-shadow) !important;
}

body[class*="theme-"] .studio-btn:hover {
    box-shadow: 0 6px 24px var(--theme-shadow) !important;
}

body[class*="theme-"] .studio-btn i {
    color: var(--theme-text) !important;
}

body[class*="theme-"] .studio-btn-secondary {
    background: color-mix(in srgb, var(--theme-gradient-end) 15%, transparent) !important;
    border-color: color-mix(in srgb, var(--theme-gradient-end) 35%, transparent) !important;
}

body[class*="theme-"] .studio-btn-secondary:hover {
    background: color-mix(in srgb, var(--theme-gradient-end) 25%, transparent) !important;
    box-shadow: 0 4px 12px var(--theme-shadow) !important;
}

body[class*="theme-"] .studio-lite-menu-item:hover,
body[class*="theme-"] .input-menu-item:hover,
body[class*="theme-"] .dropdown-item:hover,
body[class*="theme-"] .header-menu-item:hover {
    background: linear-gradient(135deg, 
        color-mix(in srgb, var(--theme-gradient-start) 20%, transparent),
        color-mix(in srgb, var(--theme-gradient-end) 30%, transparent)
    ) !important;
}

body[class*="theme-"] .studio-card:hover {
    border-color: color-mix(in srgb, var(--theme-gradient-end) 35%, transparent) !important;
    box-shadow: 0 4px 20px var(--theme-shadow) !important;
}

body[class*="theme-"] .studio-bar {
    background: linear-gradient(90deg, var(--theme-gradient-start) 0%, var(--theme-gradient-end) 100%) !important;
}

body[class*="theme-"] .studio-file-item {
    background: linear-gradient(135deg, 
        color-mix(in srgb, var(--theme-gradient-start) 15%, transparent),
        color-mix(in srgb, var(--theme-gradient-end) 10%, transparent)
    ) !important;
    border-color: color-mix(in srgb, var(--theme-gradient-end) 25%, transparent) !important;
}

body[class*="theme-"] .menu-button {
    background: linear-gradient(135deg, 
        color-mix(in srgb, var(--theme-gradient-start) 60%, transparent),
        color-mix(in srgb, var(--theme-gradient-end) 50%, transparent)
    ) !important;
    box-shadow: 0 12px 24px var(--theme-shadow) !important;
}

body[class*="theme-"] .menu-button:hover {
    box-shadow: 0 18px 32px var(--theme-shadow) !important;
}

/* Theme rules for Heatmap Drawer */
body[class*="theme-"] #heatmapDrawer {
    background: linear-gradient(180deg, 
        color-mix(in srgb, var(--theme-gradient-end) 15%, #0a0f1a) 0%, 
        color-mix(in srgb, var(--theme-gradient-end) 10%, #0d1421) 50%, 
        #111827 100%) !important;
    border-color: color-mix(in srgb, var(--theme-gradient-end) 40%, transparent) !important;
}

body[class*="theme-"] .heatmap-header {
    background: linear-gradient(90deg, var(--theme-gradient-start) 0%, var(--theme-gradient-end) 100%) !important;
    border-color: color-mix(in srgb, var(--theme-gradient-end) 50%, transparent) !important;
}

body[class*="theme-"] .heatmap-header h2 {
    color: var(--theme-text) !important;
}

body[class*="theme-"] .heatmap-metric-card {
    background: linear-gradient(135deg, 
        color-mix(in srgb, var(--theme-gradient-start) 20%, transparent),
        color-mix(in srgb, var(--theme-gradient-end) 15%, transparent)
    ) !important;
    border-color: color-mix(in srgb, var(--theme-gradient-end) 30%, transparent) !important;
}

body[class*="theme-"] .heatmap-metric-card:hover {
    box-shadow: 0 8px 20px var(--theme-shadow) !important;
}

body[class*="theme-"] .heatmap-metric-value {
    color: var(--theme-gradient-end) !important;
}

body[class*="theme-"] .heatmap-metric-label {
    color: var(--theme-text) !important;
    opacity: 0.7;
}

body[class*="theme-"] .heatmap-touches-section {
    background: color-mix(in srgb, var(--theme-gradient-end) 10%, rgba(17, 24, 39, 0.6)) !important;
    border-color: color-mix(in srgb, var(--theme-gradient-end) 30%, transparent) !important;
}

body[class*="theme-"] .heatmap-touches-header {
    background: color-mix(in srgb, var(--theme-gradient-end) 15%, transparent) !important;
}

body[class*="theme-"] .heatmap-touches-header:hover {
    background: color-mix(in srgb, var(--theme-gradient-end) 25%, transparent) !important;
}

body[class*="theme-"] .heatmap-touches-header h3 {
    color: var(--theme-text) !important;
}

body[class*="theme-"] .heatmap-touch-agent {
    background: linear-gradient(135deg, var(--theme-gradient-start) 0%, var(--theme-gradient-end) 100%) !important;
    color: var(--theme-text) !important;
}

body[class*="theme-"] .heatmap-touch-item:hover {
    background: color-mix(in srgb, var(--theme-gradient-end) 10%, transparent) !important;
}

body[class*="theme-"] .heatmap-touch-snippet {
    color: var(--theme-text) !important;
    opacity: 0.7;
}

body[class*="theme-"] .heatmap-btn-export {
    background: linear-gradient(135deg, var(--theme-gradient-start) 0%, var(--theme-gradient-end) 100%) !important;
    color: var(--theme-text) !important;
    border-color: var(--theme-gradient-end) !important;
}

body[class*="theme-"] .heatmap-btn-export:hover {
    box-shadow: 0 4px 16px var(--theme-shadow) !important;
}

body[class*="theme-"] .heatmap-canvas-container {
    border-color: color-mix(in srgb, var(--theme-gradient-end) 30%, transparent) !important;
}

body[class*="theme-"] #heatmapCanvas {
    background: linear-gradient(135deg, 
        color-mix(in srgb, var(--theme-gradient-end) 8%, #0f172a),
        color-mix(in srgb, var(--theme-gradient-end) 12%, #1e293b)
    ) !important;
}

body[class*="theme-"] .heatmap-footer {
    border-color: color-mix(in srgb, var(--theme-gradient-end) 30%, transparent) !important;
}

/* Theme rules for Context Inspector */
body[class*="theme-"] #contextInspector {
    background: color-mix(in srgb, var(--theme-gradient-end) 8%, #0d0d0d) !important;
    border-color: color-mix(in srgb, var(--theme-gradient-end) 30%, transparent) !important;
}

body[class*="theme-"] #contextInspector h3 {
    color: var(--theme-text) !important;
}

body[class*="theme-"] #contextInspector .ci-bar {
    background: linear-gradient(90deg, var(--theme-gradient-start), var(--theme-gradient-end)) !important;
}

body[class*="theme-"] #contextInspector .ci-label {
    color: var(--theme-text) !important;
    opacity: 0.6;
}

body[class*="theme-"] #contextInspector .ci-value,
body[class*="theme-"] #contextInspector .ci-list {
    color: var(--theme-text) !important;
    opacity: 0.85;
}

body[class*="theme-"] #contextInspector .ci-small {
    color: var(--theme-text) !important;
    opacity: 0.5;
}

body[class*="theme-"] #contextInspector .ci-section {
    border-color: color-mix(in srgb, var(--theme-gradient-end) 20%, transparent) !important;
}

/* Theme rules for modal/panel buttons and form elements */
body[class*="theme-"] .btn-primary {
    background: linear-gradient(135deg, var(--theme-gradient-start) 0%, var(--theme-gradient-end) 100%) !important;
    color: var(--theme-text) !important;
}

body[class*="theme-"] .btn-primary:hover {
    box-shadow: 0 5px 15px var(--theme-shadow) !important;
}

body[class*="theme-"] .av-switches {
    background: color-mix(in srgb, var(--theme-gradient-end) 15%, #34495e) !important;
}

body[class*="theme-"] .av-switch-item {
    border-color: color-mix(in srgb, var(--theme-gradient-end) 20%, transparent) !important;
}

body[class*="theme-"] .switch input:checked + .slider {
    background-color: var(--theme-gradient-end) !important;
}

body[class*="theme-"] .form-control:focus {
    border-color: var(--theme-gradient-end) !important;
    box-shadow: 0 0 0 2px var(--theme-shadow) !important;
}

/* Theme rules for Workspaces Panel */
body[class*="theme-"] .ws-btn-new {
    background: linear-gradient(135deg, var(--theme-gradient-start) 0%, var(--theme-gradient-end) 100%) !important;
}
body[class*="theme-"] .ws-btn-refresh {
    background: color-mix(in srgb, var(--theme-gradient-start) 15%, transparent) !important;
    border-color: color-mix(in srgb, var(--theme-gradient-end) 25%, transparent) !important;
    color: var(--theme-gradient-end) !important;
}
body[class*="theme-"] .ws-btn-refresh:hover {
    background: color-mix(in srgb, var(--theme-gradient-start) 25%, transparent) !important;
}
body[class*="theme-"] .ws-panel-item {
    background: color-mix(in srgb, var(--theme-gradient-start) 8%, transparent) !important;
    border-color: color-mix(in srgb, var(--theme-gradient-end) 15%, transparent) !important;
}
body[class*="theme-"] .ws-panel-item:hover {
    background: color-mix(in srgb, var(--theme-gradient-start) 15%, transparent) !important;
    border-color: color-mix(in srgb, var(--theme-gradient-end) 30%, transparent) !important;
}
body[class*="theme-"] .ws-role-badge {
    background: color-mix(in srgb, var(--theme-gradient-start) 20%, transparent) !important;
    color: var(--theme-gradient-end) !important;
}
body[class*="theme-"] .ws-back-btn,
body[class*="theme-"] .ws-new-chat-btn {
    background: color-mix(in srgb, var(--theme-gradient-start) 15%, transparent) !important;
    border-color: color-mix(in srgb, var(--theme-gradient-end) 25%, transparent) !important;
    color: var(--theme-gradient-end) !important;
}
body[class*="theme-"] .ws-new-chat-btn {
    background: linear-gradient(135deg, var(--theme-gradient-start) 0%, var(--theme-gradient-end) 100%) !important;
    color: white !important;
}
body[class*="theme-"] .ws-chat-icon {
    background: color-mix(in srgb, var(--theme-gradient-start) 15%, transparent) !important;
    color: var(--theme-gradient-end) !important;
}
body[class*="theme-"] .ws-member-avatar {
    background: linear-gradient(135deg, var(--theme-gradient-start) 0%, var(--theme-gradient-end) 100%) !important;
}
body[class*="theme-"] .ws-summary-badge {
    background: color-mix(in srgb, var(--theme-gradient-end) 20%, transparent) !important;
    color: var(--theme-gradient-end) !important;
}
body[class*="theme-"] .ws-use-context-btn {
    background: color-mix(in srgb, #10b981 15%, transparent) !important;
    border-color: color-mix(in srgb, #10b981 25%, transparent) !important;
}
body[class*="theme-"] .ws-summary-text {
    background: color-mix(in srgb, var(--theme-gradient-end) 10%, transparent) !important;
    border-color: var(--theme-gradient-end) !important;
}
body[class*="theme-"] .ws-btn-create {
    background: linear-gradient(135deg, var(--theme-gradient-start) 0%, var(--theme-gradient-end) 100%) !important;
}
body[class*="theme-"] .ws-message-item.user {
    border-color: var(--theme-gradient-start) !important;
}
body[class*="theme-"] .ws-message-item.assistant {
    border-color: var(--theme-gradient-end) !important;
}
body[class*="theme-"] .ws-message-author.user {
    color: var(--theme-gradient-start) !important;
}
body[class*="theme-"] .ws-message-author.assistant {
    color: var(--theme-gradient-end) !important;
}
body[class*="theme-"] .ws-form-group input,
body[class*="theme-"] .ws-form-group textarea {
    border-color: color-mix(in srgb, var(--theme-gradient-end) 25%, transparent) !important;
}
body[class*="theme-"] .ws-form-group input:focus,
body[class*="theme-"] .ws-form-group textarea:focus {
    border-color: var(--theme-gradient-end) !important;
}
body[class*="theme-"] .ws-panel-loading i {
    color: var(--theme-gradient-end) !important;
}

/* Theme rules for Market Scanner UI */
body[class*="theme-"] .market-scanner-action-btn {
    background: color-mix(in srgb, var(--theme-gradient-start) 15%, transparent) !important;
    border-color: color-mix(in srgb, var(--theme-gradient-end) 25%, transparent) !important;
    color: var(--theme-gradient-end) !important;
}
body[class*="theme-"] .market-scanner-action-btn:hover {
    background: color-mix(in srgb, var(--theme-gradient-start) 25%, transparent) !important;
}
body[class*="theme-"] .market-scanner-tabs {
    background: color-mix(in srgb, var(--theme-gradient-start) 12%, transparent) !important;
}
body[class*="theme-"] .ms-tab {
    color: var(--theme-text) !important;
    opacity: 0.6;
}
body[class*="theme-"] .ms-tab:hover {
    color: var(--theme-gradient-end) !important;
    opacity: 1;
}
body[class*="theme-"] .ms-tab.active {
    background: linear-gradient(135deg, var(--theme-gradient-start) 0%, var(--theme-gradient-end) 100%) !important;
    color: var(--theme-text) !important;
    opacity: 1;
    box-shadow: 0 2px 8px var(--theme-shadow) !important;
}
body[class*="theme-"] .ms-kpi-card {
    background: linear-gradient(135deg, 
        color-mix(in srgb, var(--theme-gradient-start) 15%, transparent),
        color-mix(in srgb, var(--theme-gradient-end) 12%, transparent)
    ) !important;
    border-color: color-mix(in srgb, var(--theme-gradient-end) 25%, transparent) !important;
}
body[class*="theme-"] .ms-kpi-icon {
    background: linear-gradient(135deg, var(--theme-gradient-start) 0%, var(--theme-gradient-end) 100%) !important;
    color: var(--theme-text) !important;
}
body[class*="theme-"] .ms-kpi-value {
    color: var(--theme-text) !important;
}
body[class*="theme-"] .ms-input,
body[class*="theme-"] .ms-select {
    background: color-mix(in srgb, var(--theme-gradient-start) 15%, rgba(255, 255, 255, 0.9)) !important;
    border-color: color-mix(in srgb, var(--theme-gradient-end) 25%, transparent) !important;
    color: var(--theme-text) !important;
}
body[class*="theme-"] .ms-input:focus,
body[class*="theme-"] .ms-select:focus {
    border-color: var(--theme-gradient-end) !important;
    box-shadow: 0 0 0 3px var(--theme-shadow) !important;
}
body[class*="theme-"] .ms-input::placeholder {
    color: var(--theme-text) !important;
    opacity: 0.5;
}
body[class*="theme-"] .ms-source-chip:has(input:checked) {
    background: color-mix(in srgb, var(--theme-gradient-start) 25%, transparent) !important;
    border-color: var(--theme-gradient-end) !important;
    color: var(--theme-gradient-end) !important;
}
body[class*="theme-"] .ms-live-feed {
    background: linear-gradient(135deg, 
        color-mix(in srgb, var(--theme-gradient-start) 12%, transparent),
        color-mix(in srgb, var(--theme-gradient-end) 8%, transparent)
    ) !important;
    border-color: color-mix(in srgb, var(--theme-gradient-end) 20%, transparent) !important;
}
body[class*="theme-"] .ms-feed-header {
    background: color-mix(in srgb, var(--theme-gradient-start) 15%, transparent) !important;
    color: var(--theme-gradient-end) !important;
}
body[class*="theme-"] .ms-feed-status {
    background: color-mix(in srgb, var(--theme-gradient-start) 20%, transparent) !important;
}
body[class*="theme-"] .ms-section-card {
    background: linear-gradient(135deg, 
        color-mix(in srgb, var(--theme-gradient-start) 12%, transparent),
        color-mix(in srgb, var(--theme-gradient-end) 8%, transparent)
    ) !important;
    border-color: color-mix(in srgb, var(--theme-gradient-end) 20%, transparent) !important;
}
body[class*="theme-"] .ms-section-header {
    color: var(--theme-gradient-end) !important;
}
body[class*="theme-"] .ms-mini-bar {
    background: linear-gradient(180deg, var(--theme-gradient-start) 0%, var(--theme-gradient-end) 100%) !important;
}
body[class*="theme-"] .ms-keyword {
    background: color-mix(in srgb, var(--theme-gradient-start) 15%, transparent) !important;
    color: var(--theme-gradient-end) !important;
}
body[class*="theme-"] .ms-suggestion-icon {
    background: linear-gradient(135deg, 
        color-mix(in srgb, var(--theme-gradient-start) 25%, transparent),
        color-mix(in srgb, var(--theme-gradient-end) 20%, transparent)
    ) !important;
    color: var(--theme-gradient-end) !important;
}
body[class*="theme-"] .ms-suggestion-item:hover {
    background: color-mix(in srgb, var(--theme-gradient-start) 15%, transparent) !important;
    border-color: color-mix(in srgb, var(--theme-gradient-end) 35%, transparent) !important;
}
body[class*="theme-"] .ms-secondary-btn {
    background: color-mix(in srgb, var(--theme-gradient-start) 15%, transparent) !important;
    border-color: color-mix(in srgb, var(--theme-gradient-end) 25%, transparent) !important;
    color: var(--theme-gradient-end) !important;
}
body[class*="theme-"] .ms-secondary-btn:hover {
    background: color-mix(in srgb, var(--theme-gradient-start) 25%, transparent) !important;
}
body[class*="theme-"] .ms-footer-actions {
    border-color: color-mix(in srgb, var(--theme-gradient-end) 20%, transparent) !important;
}

/* Theme rules for File Preview Modal */
body[class*="theme-"] .file-preview-overlay {
    background: color-mix(in srgb, var(--theme-gradient-end) 8%, rgba(0, 0, 0, 0.85)) !important;
}
body[class*="theme-"] .file-preview-modal {
    background: linear-gradient(180deg, 
        color-mix(in srgb, var(--theme-gradient-end) 12%, #0f172a) 0%, 
        color-mix(in srgb, var(--theme-gradient-end) 8%, #1e293b) 100%) !important;
    border-color: color-mix(in srgb, var(--theme-gradient-end) 35%, transparent) !important;
}
body[class*="theme-"] .file-preview-header {
    background: linear-gradient(135deg, var(--theme-gradient-start) 0%, var(--theme-gradient-end) 100%) !important;
}
body[class*="theme-"] .file-preview-title {
    color: var(--theme-text) !important;
}
body[class*="theme-"] .file-preview-title i,
body[class*="theme-"] .file-preview-title span {
    color: var(--theme-text) !important;
}
body[class*="theme-"] .file-preview-btn.primary {
    background: color-mix(in srgb, var(--theme-gradient-start) 25%, rgba(255,255,255,0.15)) !important;
    color: var(--theme-text) !important;
}
body[class*="theme-"] .file-preview-btn.primary:hover,
body[class*="theme-"] .file-preview-btn.primary.active {
    background: color-mix(in srgb, var(--theme-gradient-start) 40%, rgba(255,255,255,0.2)) !important;
}
body[class*="theme-"] .file-preview-btn.close {
    color: var(--theme-text) !important;
    opacity: 0.8;
}
body[class*="theme-"] .file-preview-toolbar {
    background: color-mix(in srgb, var(--theme-gradient-start) 12%, transparent) !important;
    border-color: color-mix(in srgb, var(--theme-gradient-end) 25%, transparent) !important;
}
body[class*="theme-"] .file-preview-toolbar-btn {
    background: color-mix(in srgb, var(--theme-gradient-start) 15%, transparent) !important;
    border-color: color-mix(in srgb, var(--theme-gradient-end) 25%, transparent) !important;
    color: var(--theme-gradient-end) !important;
}
body[class*="theme-"] .file-preview-toolbar-btn:hover,
body[class*="theme-"] .file-preview-toolbar-btn.active {
    background: color-mix(in srgb, var(--theme-gradient-start) 30%, transparent) !important;
    color: var(--theme-text) !important;
}
body[class*="theme-"] .file-preview-selection-count {
    color: var(--theme-text) !important;
    opacity: 0.7;
}
body[class*="theme-"] .file-preview-selection-count strong {
    color: var(--theme-gradient-end) !important;
}
body[class*="theme-"] .file-preview-content {
    color: var(--theme-text) !important;
}
body[class*="theme-"] .file-preview-content.pdf-mode {
    background: color-mix(in srgb, var(--theme-gradient-end) 15%, #3a3d40) !important;
}
body[class*="theme-"] .pdf-controls {
    background: color-mix(in srgb, var(--theme-gradient-end) 20%, rgba(20, 20, 20, 0.95)) !important;
}
body[class*="theme-"] .pdf-controls button {
    background: color-mix(in srgb, var(--theme-gradient-start) 20%, transparent) !important;
    border-color: color-mix(in srgb, var(--theme-gradient-end) 30%, transparent) !important;
    color: var(--theme-gradient-end) !important;
}
body[class*="theme-"] .pdf-controls button:hover {
    background: color-mix(in srgb, var(--theme-gradient-start) 35%, transparent) !important;
    color: var(--theme-text) !important;
}
body[class*="theme-"] .pdf-controls span {
    color: var(--theme-text) !important;
}
body[class*="theme-"] .pdf-page-number {
    color: var(--theme-text) !important;
    opacity: 0.7;
}
body[class*="theme-"] .pdf-page-wrapper {
    box-shadow: 0 4px 20px var(--theme-shadow) !important;
}
body[class*="theme-"] .file-preview-footer {
    background: color-mix(in srgb, var(--theme-gradient-end) 8%, rgba(15, 23, 42, 0.8)) !important;
    border-color: color-mix(in srgb, var(--theme-gradient-end) 25%, transparent) !important;
}
body[class*="theme-"] .file-preview-footer-info {
    color: var(--theme-text) !important;
    opacity: 0.6;
}
body[class*="theme-"] .file-preview-add-btn {
    background: linear-gradient(135deg, var(--theme-gradient-start) 0%, var(--theme-gradient-end) 100%) !important;
    color: var(--theme-text) !important;
}
body[class*="theme-"] .file-preview-add-btn:hover {
    box-shadow: 0 4px 16px var(--theme-shadow) !important;
}
body[class*="theme-"] .file-preview-add-all-btn {
    background: color-mix(in srgb, var(--theme-gradient-start) 20%, transparent) !important;
    border-color: color-mix(in srgb, var(--theme-gradient-end) 30%, transparent) !important;
    color: var(--theme-gradient-end) !important;
}
body[class*="theme-"] .file-preview-add-all-btn:hover {
    background: color-mix(in srgb, var(--theme-gradient-start) 35%, transparent) !important;
}
body[class*="theme-"] .selected-content-preview {
    background: color-mix(in srgb, var(--theme-gradient-start) 8%, transparent) !important;
    border-color: color-mix(in srgb, var(--theme-gradient-end) 25%, transparent) !important;
}
body[class*="theme-"] .selected-content-header {
    color: var(--theme-gradient-end) !important;
    border-color: color-mix(in srgb, var(--theme-gradient-end) 25%, transparent) !important;
}
body[class*="theme-"] .selected-content-text {
    color: var(--theme-text) !important;
}
body[class*="theme-"] .highlighted-text {
    background: linear-gradient(135deg, 
        color-mix(in srgb, var(--theme-gradient-start) 30%, transparent) 0%, 
        color-mix(in srgb, var(--theme-gradient-end) 20%, transparent) 100%) !important;
    border-left-color: var(--theme-gradient-end) !important;
}
body[class*="theme-"] .pdf-text-layer > span::selection {
    background: color-mix(in srgb, var(--theme-gradient-end) 40%, transparent) !important;
}
body[class*="theme-"] .studio-file-item .context-badge.full {
    background: color-mix(in srgb, var(--theme-gradient-start) 20%, transparent) !important;
    color: var(--theme-gradient-end) !important;
    border-color: color-mix(in srgb, var(--theme-gradient-end) 35%, transparent) !important;
}
body[class*="theme-"] .studio-file-item .context-badge.partial {
    background: color-mix(in srgb, var(--theme-gradient-start) 15%, rgba(251, 191, 36, 0.1)) !important;
    color: color-mix(in srgb, var(--theme-gradient-end) 60%, #fbbf24) !important;
    border-color: color-mix(in srgb, var(--theme-gradient-end) 30%, rgba(251, 191, 36, 0.2)) !important;
}
body[class*="theme-"] .studio-file-item.in-context {
    border-left-color: var(--theme-gradient-end) !important;
}
body[class*="theme-"] .studio-file-item .file-preview-icon {
    color: var(--theme-gradient-end) !important;
}
body[class*="theme-"] .studio-file-item .file-delete-icon {
    color: color-mix(in srgb, var(--theme-gradient-end) 50%, #ef4444) !important;
}

/* Theme for studio panel body spans and labels */
body[class*="theme-"] .studio-panel-body span,
body[class*="theme-"] .studio-panel-body label,
body[class*="theme-"] .studio-panel-body p {
    color: var(--theme-text) !important;
}

/* Force background for chat in any theme */
body[class*="theme-"].chat-page,
body[class*="theme-"].vision-page {
    background: #ffffff !important;
    transition: background-color 0.4s ease !important;
}

body[class*="theme-"] .chat-messages-container,
body[class*="theme-"] .chat-messages {
    background: #ffffff !important;
    transition: background-color 0.4s ease !important;
}

/* Dark mode: pitch black background */
body[class*="theme-"].dark-mode.chat-page,
body[class*="theme-"].dark-mode.vision-page {
    background: #000000 !important;
}

body[class*="theme-"].dark-mode .chat-messages-container,
body[class*="theme-"].dark-mode .chat-messages {
    background: #000000 !important;
}