/* System theme detection */
@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
    --bg-primary: #f5f5f5;
    --bg-secondary: #ffffff;
    --text-primary: #555555;
    --text-secondary: #666666;
    --border-color: #dddddd;
    --accent-color: #007bff;
    --hover-bg: #e9ecef;
    --tooltip-bg: rgba(0, 0, 0, 0.8);
    --tooltip-text: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --status-success: #00C851;
    --status-warning: #ffc107;
    --status-error: #ff4444;
    --icon-color: #555555;
    --menu-bg: #ffffff;
    --menu-hover: #f8f9fa;
    --menu-border: #e9ecef;
    --button-bg: #f8f9fa;
    --button-text: #333333;
    --button-border: #dddddd;
    --button-hover: #e9ecef;
    --file-bg: #ffffff;
    --code-bg: #f8f9fa;
    --message-content-bg: #FFF1E6;
    --message-content-hover-bg: #FFD4B3;
    --message-user-bg: #e6f3ff;
    --file-panel-bg: #FFC599;
    --file-panel-hover-bg: #FFE2CC;
  }
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --text-primary: #666666;
    --text-secondary: #e0e0e0;
    --border-color: #404040;
    --accent-color: #3b82f6;
    --hover-bg: #404040;
    --tooltip-bg: rgba(255, 255, 255, 0.9);
    --tooltip-text: #000000;
    --shadow-color: rgba(0, 0, 0, 0.3);
    --status-success: #22c55e;
    --status-warning: #fbbf24;
    --status-error: #ef4444;
    --icon-color: #cccccc;
    --menu-bg: #2d2d2d;
    --menu-hover: #404040;
    --menu-border: #404040;
    --button-bg: #404040;
    --button-text: #ffffff;
    --button-border: #505050;
    --button-hover: #505050;
    --file-bg: #2d2d2d;
    --code-bg: #1e1e1e;
    --message-content-bg: #3a2f26;
    --message-content-hover-bg: #4a3a2d;
    --message-user-bg: #2a3a4a;
    --file-panel-bg: #4a3a2d;
    --file-panel-hover-bg: #5a4a3d;
  }
}

/* Light Theme */
:root[data-theme="light"] {
  --bg-primary: #f5f5f5;
  --bg-secondary: #ffffff;
  --text-primary: #555555;
  --text-secondary: #666666;
  --border-color: #dddddd;
  --accent-color: #007bff;
  --hover-bg: #e9ecef;
  --tooltip-bg: rgba(0, 0, 0, 0.8);
  --tooltip-text: #ffffff;
  --shadow-color: rgba(0, 0, 0, 0.1);
  --status-success: #00C851;
  --status-warning: #ffc107;
  --status-error: #ff4444;
  --icon-color: #555555;
  --menu-bg: #ffffff;
  --menu-hover: #f8f9fa;
  --menu-border: #e9ecef;
  --button-bg: #f8f9fa;
  --button-text: #333333;
  --button-border: #dddddd;
  --button-hover: #e9ecef;
  --file-bg: #ffffff;
  --code-bg: #f8f9fa;
  --message-content-bg: #FFF1E6;
  --message-content-hover-bg: #FFE2CC;
  --message-user-bg: #e6f3ff;
  --file-panel-bg: #FFD4B3;
  --file-panel-hover-bg: #FFC599;
}

/* Dark Theme */
:root[data-theme="dark"] {
  --bg-primary: #1a1a1a;
  --bg-secondary: #2d2d2d;
  --text-primary: #666666;
  --text-secondary: #e0e0e0;
  --border-color: #404040;
  --accent-color: #3b82f6;
  --hover-bg: #404040;
  --tooltip-bg: rgba(255, 255, 255, 0.9);
  --tooltip-text: #000000;
  --shadow-color: rgba(0, 0, 0, 0.3);
  --status-success: #22c55e;
  --status-warning: #fbbf24;
  --status-error: #ef4444;
  --icon-color: #cccccc;
  --menu-bg: #2d2d2d;
  --menu-hover: #404040;
  --menu-border: #404040;
  --button-bg: #404040;
  --button-text: #ffffff;
  --button-border: #505050;
  --button-hover: #505050;
  --file-bg: #2d2d2d;
  --code-bg: #1e1e1e;
  --message-content-bg: #3a2f26;
  --message-content-hover-bg: #4a3a2d;
  --message-user-bg: #2a3a4a;
  --file-panel-bg: #4a3a2d;
  --file-panel-hover-bg: #5a4a3d;
}

/* Apply theme variables */
/* Global styles */
body {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

/* Main content area */
#main-content {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

/* Chat container */
#chat-container {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
}

/* Dark theme specific chat container */
[data-theme="dark"] #chat-container {
  background-color: #363636;  /* Slightly lighter than sidebar's #2d2d2d */
}

#chat-messages {
  background-color: var(--bg-secondary);
}

[data-theme="dark"] #chat-messages {
  background-color: #363636;  /* Match container */
}

/* Message styles */
.message {
  background-color: var(--bg-primary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

/* Dark theme message styles */
[data-theme="dark"] .message {
  color: var(--text-primary);
  background-color: var(--bg-primary);
}

/* Input area */
#chat-input {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
}

#message-input {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-color);
}

/* Dark theme specific overrides */
[data-theme="dark"] #sidebar {
  background-color: #2d2d2d;
}

[data-theme="dark"] #chat-input {
  background-color: #363636;  /* Match chat container */
}

[data-theme="dark"] #message-input {
  background-color: #363636;  /* Match chat container */
}

/* Buttons and controls */
.control-btn,
.file-control-btn,
.toggle-btn {
  background-color: var(--button-bg);
  color: var(--text-primary);
  border-color: var(--button-border);
}

.control-btn:hover,
.file-control-btn:hover,
.toggle-btn:hover {
  background-color: var(--button-hover);
}

/* File viewer */
#file-viewer {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
}

#file-header {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
}

#file-content {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

/* Sidebar */
#sidebar {
  background: var(--bg-primary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

#sidebar h2 {
  color: var(--text-primary);
}

#sidebar h2 i,
#sidebar h2 .user-icon {
  color: var(--icon-color);
}

#sidebar li {
  color: var(--accent-color);
}

#sidebar li:hover {
  background-color: var(--hover-bg);
}

.connection-text {
  color: var(--text-secondary);
}

/* Popups and menus */
.popup-overlay {
  background-color: rgba(0, 0, 0, 0.5);
}

.popup-content {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  border-color: var(--border-color);
}

#user-menu {
  background: var(--menu-bg);
  box-shadow: 0 2px 10px var(--shadow-color);
  border: 1px solid var(--menu-border);
}

#user-menu button {
  color: var(--text-primary);
  background: var(--button-bg);
  border-color: var(--button-border);
}

#user-menu button:hover {
  background: var(--button-hover);
}

/* Settings popup */
.setting-group {
  border-color: var(--border-color);
}

.theme-options label,
.setting-option {
  color: var(--text-primary);
}

/* File list */
#file-list-container {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
}

.file-list-item {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
}

.file-list-item:hover {
  background-color: var(--hover-bg);
}

/* Splitters */
#chat-splitter,
#file-list-splitter {
  background-color: var(--border-color);
}

/* Tooltip styles */
#sidebar.minimized h2::after {
  background: var(--tooltip-bg);
  color: var(--tooltip-text);
}

/* Status indicators */
.led-indicator {
  background-color: var(--status-error);
}

.led-indicator.connected {
  background-color: var(--status-success);
}

/* Code blocks and syntax highlighting */
pre, code {
  background-color: var(--code-bg);
  color: var(--text-primary);
  border-color: var(--border-color);
}