/**
 * MINIMAL APPEARANCE MODE
 * Pure flat design - No gradients, no animations, no borders, no fancy effects
 * Contrast through solid background colors only
 * Inspired by modern SaaS applications
 */

/* ==================== MINIMAL APPEARANCE VARIABLES ==================== */
[data-appearance="minimal"] {
    /* NO shadows at all */
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;

    /* Slightly larger radius for modern feel */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;

    /* Instant transitions only for colors */
    --transition-fast: 50ms ease;
    --transition-normal: 50ms ease;
    --transition-slow: 50ms ease;
}

/* Dark theme minimal - clean, modern colors */
[data-theme="dark"][data-appearance="minimal"] {
    --bg-primary: #0f0f14;
    --bg-secondary: #18181f;
    --bg-tertiary: #212129;
    --bg-elevated: #2a2a33;

    /* No borders - use background contrast instead */
    --border-subtle: transparent;
    --border-medium: transparent;
    --border-strong: transparent;
}

/* Light theme minimal - ultra clean with subtle contrast */
[data-theme="light"][data-appearance="minimal"] {
    --bg-primary: #ffffff;
    --bg-secondary: #f7f8fa;
    --bg-tertiary: #eef0f3;
    --bg-elevated: #e3e5e8;

    /* Very subtle borders for critical elements only */
    --border-subtle: rgba(0, 0, 0, 0.06);
    --border-medium: rgba(0, 0, 0, 0.08);
    --border-strong: rgba(0, 0, 0, 0.12);
}

/* ==================== REMOVE ALL PSEUDO-ELEMENTS ==================== */
[data-appearance="minimal"] .icon-btn::before,
[data-appearance="minimal"] .primary-btn::before,
[data-appearance="minimal"] .secondary-btn::after,
[data-appearance="minimal"] .ai-btn::before {
    display: none !important;
}

/* ==================== BUTTONS - FLAT SOLID COLORS ==================== */
[data-appearance="minimal"] .primary-btn,
[data-appearance="minimal"] .ai-btn {
    background: var(--accent-primary);
    color: white;
    border: none;
    box-shadow: none;
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
    transform: none;
}

[data-appearance="minimal"] .primary-btn:hover,
[data-appearance="minimal"] .ai-btn:hover:not(.utils-btn) {
    background: var(--accent-hover);
    color: white;
    transform: none;
    box-shadow: none;
}

[data-appearance="minimal"] .primary-btn:active,
[data-appearance="minimal"] .ai-btn:active {
    background: var(--accent-active);
    color: white;
    transform: none;
}

[data-appearance="minimal"] .secondary-btn {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: none;
    box-shadow: none;
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
    transform: none;
}

[data-appearance="minimal"] .secondary-btn:hover {
    background: var(--bg-elevated);
    transform: none;
    box-shadow: none;
}

[data-appearance="minimal"] .icon-btn {
    background: var(--bg-tertiary);
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    transition: background var(--transition-fast);
    transform: none;
}

[data-appearance="minimal"] .icon-btn:hover {
    background: var(--bg-elevated);
    transform: none;
    box-shadow: none;
}

/* ==================== PANELS & CONTAINERS - NO BORDERS ==================== */
[data-appearance="minimal"] .panel {
    background: var(--bg-secondary);
    border: none;
    box-shadow: none;
}

[data-appearance="minimal"] .left-panel {
    background: var(--bg-secondary);
    border-right: none;
}

[data-appearance="minimal"] .middle-panel {
    background: var(--bg-primary);
}

[data-appearance="minimal"] .right-panel {
    background: var(--bg-secondary);
    border-left: none;
}

[data-appearance="minimal"] .panel-header {
    background: var(--bg-tertiary);
    border: none;
    box-shadow: none;
}

[data-appearance="minimal"] .context-slider-container {
    background: var(--bg-tertiary);
    border: none;
}

/* ==================== CARDS - FLAT BACKGROUNDS ==================== */
[data-appearance="minimal"] .document-card {
    background: var(--bg-tertiary);
    border: none;
    border-radius: var(--radius-md);
    box-shadow: none;
    transition: background var(--transition-fast);
    transform: none;
}

[data-appearance="minimal"] .document-card:hover {
    background: var(--bg-elevated);
    transform: none;
    box-shadow: none;
}

[data-appearance="minimal"] .document-card.active {
    background: var(--accent-primary);
    color: white;
}

[data-appearance="minimal"] .document-card.active * {
    color: white;
}

/* ==================== CHAT MESSAGES - FLAT ==================== */
[data-appearance="minimal"] .chat-message {
    background: transparent;
    /* Preserve animations even in minimal mode */
}

[data-appearance="minimal"] .message-content {
    background: var(--bg-tertiary);
    border: none;
    border-radius: var(--radius-md);
    box-shadow: none;
}

[data-appearance="minimal"] .message-content.user {
    background: var(--accent-primary);
    color: white;
}

[data-appearance="minimal"] .message-content.user * {
    color: white;
}

[data-appearance="minimal"] .message-btn {
    background: var(--bg-elevated);
    border: none;
    border-radius: var(--radius-sm);
    backdrop-filter: none;
    transition: background var(--transition-fast);
    transform: none;
}

[data-appearance="minimal"] .message-btn:hover {
    background: var(--bg-tertiary);
    transform: none;
    box-shadow: none;
}

/* ==================== MODALS - FLAT ==================== */
[data-appearance="minimal"] .modal-overlay {
    backdrop-filter: none;
    background: rgba(0, 0, 0, 0.5);
}

[data-appearance="minimal"] .modal {
    background: var(--bg-secondary);
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: none;
}

[data-appearance="minimal"] .modal-header {
    background: var(--bg-tertiary);
    border-bottom: none;
}

/* ==================== INPUTS & FORM ELEMENTS - SUBTLE BORDERS ==================== */
[data-appearance="minimal"] input[type="text"],
[data-appearance="minimal"] input[type="number"],
[data-appearance="minimal"] textarea,
[data-appearance="minimal"] select {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: none;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

[data-appearance="minimal"] input[type="text"]:focus,
[data-appearance="minimal"] input[type="number"]:focus,
[data-appearance="minimal"] textarea:focus,
[data-appearance="minimal"] select:focus {
    background: var(--bg-elevated);
    border-color: var(--accent-primary);
    box-shadow: none;
    outline: none;
}

/* ==================== SLIDERS - FLAT WITH CONTRAST ==================== */
[data-appearance="minimal"] input[type="range"] {
    height: 6px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
}

[data-appearance="minimal"] input[type="range"]::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-primary);
    border: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}

[data-appearance="minimal"] input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-primary);
    border: none;
    box-shadow: none;
}

[data-appearance="minimal"] input[type="range"]::-webkit-slider-runnable-track {
    background: var(--bg-elevated);
    border-radius: 10px;
}

[data-appearance="minimal"] input[type="range"]::-moz-range-track {
    background: var(--bg-elevated);
    border-radius: 10px;
}

/* Font size display - ensure visibility */
[data-appearance="minimal"] #font-size-display {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
}

/* ==================== HEADER - FLAT ==================== */
[data-appearance="minimal"] .app-header {
    background: var(--bg-tertiary);
    border-bottom: none;
    box-shadow: none;
}

[data-appearance="minimal"] .model-selector select {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    box-shadow: none;
}

[data-appearance="minimal"] .model-selector select:hover {
    background: var(--bg-tertiary);
}

/* ==================== TOAST NOTIFICATIONS - FLAT ==================== */
[data-appearance="minimal"] .toast {
    background: var(--bg-elevated);
    border: none;
    border-radius: var(--radius-md);
    box-shadow: none;
    backdrop-filter: none;
    cursor: pointer;
}

[data-appearance="minimal"] .toast.success {
    background: var(--success);
    color: white;
}

[data-appearance="minimal"] .toast.success * {
    color: white;
}

[data-appearance="minimal"] .toast.error {
    background: var(--error);
    color: white;
}

[data-appearance="minimal"] .toast.error * {
    color: white;
}

[data-appearance="minimal"] .toast.info {
    background: var(--info);
    color: white;
}

[data-appearance="minimal"] .toast.info * {
    color: white;
}

/* ==================== DISABLE ALL ANIMATIONS & TRANSFORMS ==================== */
[data-appearance="minimal"] * {
    animation: none !important;
    animation-duration: 0ms !important;
    transition-duration: 50ms !important;
    transform: none !important;
}

[data-appearance="minimal"] *:hover {
    transform: none !important;
}

[data-appearance="minimal"] *:active {
    transform: none !important;
}

/* Only allow color transitions */
[data-appearance="minimal"] button,
[data-appearance="minimal"] input,
[data-appearance="minimal"] select,
[data-appearance="minimal"] textarea {
    transition: background 50ms ease, color 50ms ease !important;
}

/* ==================== BUDGET BAR - SUBTLE CONTRAST ==================== */
[data-appearance="minimal"] .budget-bar {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

[data-appearance="minimal"] .budget-progress {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

[data-appearance="minimal"] .budget-fill {
    border-radius: var(--radius-md);
}

[data-appearance="minimal"] .budget-stats-btn {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    backdrop-filter: none;
}

[data-appearance="minimal"] .budget-stats-btn:hover {
    background: var(--bg-elevated);
}

/* ==================== PROVIDER CARDS - FLAT ==================== */
[data-appearance="minimal"] .provider-card {
    background: var(--bg-tertiary);
    border: none;
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
}

[data-appearance="minimal"] .provider-card.active {
    background: var(--accent-primary);
    color: white;
}

[data-appearance="minimal"] .provider-card.active * {
    color: white;
}

[data-appearance="minimal"] .provider-card:hover {
    background: var(--bg-elevated);
}

/* ==================== ROLEPLAY PANEL - FLAT ==================== */
[data-appearance="minimal"] .roleplay-panel {
    background: var(--bg-secondary);
    border-left: none;
}

[data-appearance="minimal"] .character-card {
    background: var(--bg-tertiary);
    border: none;
    border-radius: var(--radius-md);
    box-shadow: none;
    transition: background var(--transition-fast);
}

[data-appearance="minimal"] .character-card:hover {
    background: var(--bg-elevated);
}

[data-appearance="minimal"] .character-card.active {
    background: var(--accent-primary);
    color: white;
}

[data-appearance="minimal"] .character-card.active * {
    color: white;
}

/* ==================== TOOLBAR - FLAT ==================== */
[data-appearance="minimal"] .canvas-toolbar {
    background: var(--bg-tertiary);
    border-bottom: none;
}

[data-appearance="minimal"] .toolbar-btn {
    background: var(--bg-secondary);
    border: none;
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
}

[data-appearance="minimal"] .toolbar-btn:hover {
    background: var(--bg-tertiary);
}

[data-appearance="minimal"] .toolbar-btn:active,
[data-appearance="minimal"] .toolbar-btn.active {
    background: var(--accent-primary);
    color: white;
}

/* ==================== DOCUMENT VIEWER - FLAT ==================== */
[data-appearance="minimal"] .document-viewer-window {
    background: var(--bg-secondary);
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: none;
}

[data-appearance="minimal"] .document-viewer-overlay {
    backdrop-filter: none;
    background: rgba(0, 0, 0, 0.6);
}

/* ==================== SCROLLBARS - FLAT ==================== */
[data-appearance="minimal"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-appearance="minimal"] ::-webkit-scrollbar-track {
    background: transparent;
}

[data-appearance="minimal"] ::-webkit-scrollbar-thumb {
    background: var(--bg-elevated);
    border-radius: 10px;
}

[data-appearance="minimal"] ::-webkit-scrollbar-thumb:hover {
    background: var(--bg-tertiary);
}

/* ==================== CANVAS EDITOR - FLAT ==================== */
[data-appearance="minimal"] .canvas-editor {
    background: var(--bg-primary);
    border: none;
}

/* ==================== LOADING SPINNER - SIMPLIFIED ==================== */
[data-appearance="minimal"] .spinner {
    border-color: var(--bg-tertiary);
    border-top-color: var(--accent-primary);
}

/* ==================== STATUS INDICATORS - FLAT ==================== */
[data-appearance="minimal"] .status-indicator {
    box-shadow: none;
}

/* ==================== DROPDOWNS - FLAT ==================== */
[data-appearance="minimal"] .dropdown-menu {
    background: var(--bg-secondary);
    border: none;
    border-radius: var(--radius-md);
    box-shadow: none;
}

[data-appearance="minimal"] .dropdown-item:hover {
    background: var(--bg-tertiary);
}

/* ==================== TABS - FLAT ==================== */
[data-appearance="minimal"] .tab {
    background: transparent;
    border: none;
}

[data-appearance="minimal"] .tab.active {
    background: var(--accent-primary);
    color: white;
}

[data-appearance="minimal"] .tab:hover:not(.active) {
    background: var(--bg-tertiary);
}

/* ==================== SEARCH & HIGHLIGHTING - SUBTLE CONTRAST ==================== */
[data-appearance="minimal"] .search-container {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

[data-appearance="minimal"] .search-input {
    background: transparent;
    border: none;
}

/* Dark mode - use darker highlight with white text */
[data-theme="dark"][data-appearance="minimal"] .search-highlight {
    background: var(--accent-primary);
    color: white;
    border-radius: 2px;
}

/* Light mode - use warning color with dark text */
[data-theme="light"][data-appearance="minimal"] .search-highlight {
    background: var(--warning);
    color: #1a1a1a;
    border-radius: 2px;
}

/* ==================== BADGES & LABELS - FLAT ==================== */
[data-appearance="minimal"] .badge,
[data-appearance="minimal"] .active-badge,
[data-appearance="minimal"] .status-badge {
    background: var(--accent-primary);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    box-shadow: none;
}

[data-appearance="minimal"] .badge.success {
    background: var(--success);
}

[data-appearance="minimal"] .badge.warning {
    background: var(--warning);
}

[data-appearance="minimal"] .badge.error {
    background: var(--error);
}

/* ==================== FORM GROUPS - FLAT ==================== */
[data-appearance="minimal"] .form-group {
    background: transparent;
    border: none;
}

[data-appearance="minimal"] .form-group label {
    color: var(--text-primary);
}

/* ==================== CHECKBOXES & RADIO - FLAT ==================== */
[data-appearance="minimal"] input[type="checkbox"],
[data-appearance="minimal"] input[type="radio"] {
    border: 2px solid var(--bg-elevated);
    background: var(--bg-tertiary);
    box-shadow: none;
}

[data-appearance="minimal"] input[type="checkbox"]:checked,
[data-appearance="minimal"] input[type="radio"]:checked {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

/* ==================== CONTEXT MENU - FLAT ==================== */
[data-appearance="minimal"] .context-menu {
    background: var(--bg-secondary);
    border: none;
    border-radius: var(--radius-md);
    box-shadow: none;
}

[data-appearance="minimal"] .context-menu-item:hover {
    background: var(--bg-tertiary);
}

/* ==================== SEPARATORS - INVISIBLE ==================== */
[data-appearance="minimal"] hr,
[data-appearance="minimal"] .separator {
    border-color: transparent;
    background: transparent;
    opacity: 0;
}

/* ==================== PROGRESS BARS - FLAT ==================== */
[data-appearance="minimal"] .progress-bar {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    box-shadow: none;
}

[data-appearance="minimal"] .progress-fill {
    background: var(--accent-primary);
    border-radius: var(--radius-md);
}

/* ==================== TOOLTIPS - FLAT ==================== */
[data-appearance="minimal"] .tooltip {
    background: var(--bg-elevated);
    border: none;
    border-radius: var(--radius-sm);
    box-shadow: none;
}

/* ==================== AVATAR/PROFILE - FLAT ==================== */
[data-appearance="minimal"] .avatar {
    border: none;
    box-shadow: none;
}

/* ==================== LISTS - FLAT ==================== */
[data-appearance="minimal"] .list-item {
    background: transparent;
    border: none;
}

[data-appearance="minimal"] .list-item:hover {
    background: var(--bg-tertiary);
}

[data-appearance="minimal"] .list-item.active {
    background: var(--accent-primary);
    color: white;
}

/* ==================== UTILITY BUTTON CONTAINER - FLAT ==================== */
[data-appearance="minimal"] .utils-container {
    background: transparent;
    border: none;
}

[data-appearance="minimal"] .utils-btn:hover {
    background: var(--bg-elevated);
}

/* ==================== NAV BUTTONS - FLAT ==================== */
[data-appearance="minimal"] .nav-btn {
    background: var(--bg-tertiary);
    border: none;
    backdrop-filter: none;
}

[data-appearance="minimal"] .nav-btn:hover {
    background: var(--bg-elevated);
}

/* ==================== PROMPT DISPLAY - FLAT ==================== */
[data-appearance="minimal"] .prompt-display {
    background: var(--bg-tertiary);
    border: none;
    border-radius: var(--radius-md);
}

/* ==================== TAG HIGHLIGHTING - MINIMAL ==================== */
[data-appearance="minimal"] .tag-highlight {
    background: var(--accent-primary);
    color: white;
    border-radius: 3px;
    padding: 1px 4px;
}

/* ==================== COMPLETIONS LIST - FLAT ==================== */
[data-appearance="minimal"] .completions-list {
    background: var(--bg-secondary);
    border: none;
    border-radius: var(--radius-md);
    box-shadow: none;
}

[data-appearance="minimal"] .completion-item {
    border: none;
}

[data-appearance="minimal"] .completion-item:hover {
    background: var(--bg-tertiary);
}

/* ==================== FINAL OVERRIDES - ENSURE FLATNESS ==================== */
[data-appearance="minimal"] * {
    /* Remove any box-shadows */
    box-shadow: none !important;

    /* Remove text shadows */
    text-shadow: none !important;

    /* Remove backdrop filters */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ==================== PERFORMANCE OPTIMIZATIONS ==================== */
[data-appearance="minimal"] * {
    /* Disable GPU acceleration for animations */
    will-change: auto !important;

    /* Simplify rendering */
    backface-visibility: visible !important;
    perspective: none !important;
}