@import "tailwindcss";
@import "highlight.js/styles/github-dark.css";

/* UiPath Dark Theme (default) */
:root,
[data-theme="dark"] {
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-tertiary: #334155;
  --bg-hover: #1e293b;
  --text-primary: #cbd5e1;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --border: #334155;
  --accent: #fa4616;
  --accent-hover: #e03d12;
  --accent-light: #ff6a3d;
  --success: #22c55e;
  --warning: #eab308;
  --error: #ef4444;
  --info: #3b82f6;
  --sidebar-bg: #0c1222;
  --card-bg: #1e293b;
  --input-bg: #0f172a;
  --tab-active: #fa4616;
  --tab-text: #94a3b8;
  --tab-text-active: #fa4616;
  --node-bg: #1e293b;
  --node-border: #475569;
  color-scheme: dark;
}

/* UiPath Light Theme */
[data-theme="light"] {
  --bg-primary: #f8fafc;
  --bg-secondary: #ffffff;
  --bg-tertiary: #cbd5e1;
  --bg-hover: #f1f5f9;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --border: #e2e8f0;
  --accent: #fa4616;
  --accent-hover: #e03d12;
  --accent-light: #ff6a3d;
  --success: #22c55e;
  --warning: #ca8a04;
  --error: #ef4444;
  --info: #2563eb;
  --sidebar-bg: #ffffff;
  --card-bg: #ffffff;
  --input-bg: #f8fafc;
  --tab-active: #fa4616;
  --tab-text: #64748b;
  --tab-text-active: #fa4616;
  --node-bg: #ffffff;
  --node-border: #cbd5e1;
  color-scheme: light;
}

body {
  margin: 0;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  transition: background-color 0.2s, color 0.2s;
}

#root {
  height: 100vh;
  height: 100dvh;
  display: flex;
}

/* React Flow overrides */
.react-flow__node {
  font-size: 12px;
}

.react-flow__node-default {
  background: var(--node-bg) !important;
  color: var(--text-primary) !important;
  border-color: var(--node-border) !important;
}

.react-flow__background {
  background: var(--bg-primary) !important;
}

.react-flow__controls button {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}

.react-flow__controls button:hover {
  background: var(--bg-hover) !important;
}

.react-flow__controls button svg {
  fill: var(--text-primary) !important;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

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

::-webkit-scrollbar-thumb {
  background: var(--bg-tertiary);
  border-radius: 3px;
}

/* Select dropdown fix */
select {
  appearance: auto;
}

select option {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

/* Chat markdown styles */
.chat-markdown p {
  margin: 0.25em 0;
}

.chat-markdown p:first-child {
  margin-top: 0;
}

.chat-markdown p:last-child {
  margin-bottom: 0;
}

.chat-markdown code {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.1em 0.35em;
  font-size: 0.85em;
}

.chat-markdown pre {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.75em;
  overflow-x: auto;
  margin: 0.5em 0;
}

.chat-markdown pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.85em;
}

.chat-markdown ul,
.chat-markdown ol {
  padding-left: 1.5em;
  margin: 0.25em 0;
}

.chat-markdown li {
  margin: 0.1em 0;
}

.chat-markdown h1,
.chat-markdown h2,
.chat-markdown h3 {
  margin: 0.5em 0 0.25em;
  font-weight: 600;
}

.chat-markdown h1 { font-size: 1.2em; }
.chat-markdown h2 { font-size: 1.1em; }
.chat-markdown h3 { font-size: 1em; }

.chat-markdown blockquote {
  border-left: 3px solid var(--border);
  padding-left: 0.75em;
  margin: 0.25em 0;
  color: var(--text-secondary);
}

.chat-markdown strong {
  font-weight: 600;
}

.chat-markdown a {
  color: var(--accent);
  text-decoration: underline;
}

.chat-markdown table {
  border-collapse: collapse;
  margin: 0.5em 0;
  width: 100%;
}

.chat-markdown th,
.chat-markdown td {
  border: 1px solid var(--border);
  padding: 0.3em 0.6em;
  text-align: left;
}

.chat-markdown th {
  background: var(--bg-primary);
  font-weight: 600;
}

.chat-markdown tr:nth-child(even) {
  background: var(--bg-primary);
}

/* Highlight.js: let our pre styles control background */
.chat-markdown .hljs {
  background: transparent;
}

/* Highlight.js: light theme token overrides (github light colors) */
[data-theme="light"] .chat-markdown .hljs { color: #24292e }
[data-theme="light"] .chat-markdown .hljs-doctag,
[data-theme="light"] .chat-markdown .hljs-keyword,
[data-theme="light"] .chat-markdown .hljs-meta .hljs-keyword,
[data-theme="light"] .chat-markdown .hljs-template-tag,
[data-theme="light"] .chat-markdown .hljs-template-variable,
[data-theme="light"] .chat-markdown .hljs-type,
[data-theme="light"] .chat-markdown .hljs-variable.language_ { color: #d73a49 }
[data-theme="light"] .chat-markdown .hljs-title,
[data-theme="light"] .chat-markdown .hljs-title.class_,
[data-theme="light"] .chat-markdown .hljs-title.class_.inherited__,
[data-theme="light"] .chat-markdown .hljs-title.function_ { color: #6f42c1 }
[data-theme="light"] .chat-markdown .hljs-attr,
[data-theme="light"] .chat-markdown .hljs-attribute,
[data-theme="light"] .chat-markdown .hljs-literal,
[data-theme="light"] .chat-markdown .hljs-meta,
[data-theme="light"] .chat-markdown .hljs-number,
[data-theme="light"] .chat-markdown .hljs-operator,
[data-theme="light"] .chat-markdown .hljs-variable,
[data-theme="light"] .chat-markdown .hljs-selector-attr,
[data-theme="light"] .chat-markdown .hljs-selector-class,
[data-theme="light"] .chat-markdown .hljs-selector-id { color: #005cc5 }
[data-theme="light"] .chat-markdown .hljs-regexp,
[data-theme="light"] .chat-markdown .hljs-string,
[data-theme="light"] .chat-markdown .hljs-meta .hljs-string { color: #032f62 }
[data-theme="light"] .chat-markdown .hljs-built_in,
[data-theme="light"] .chat-markdown .hljs-symbol { color: #e36209 }
[data-theme="light"] .chat-markdown .hljs-comment,
[data-theme="light"] .chat-markdown .hljs-code,
[data-theme="light"] .chat-markdown .hljs-formula { color: #6a737d }
[data-theme="light"] .chat-markdown .hljs-name,
[data-theme="light"] .chat-markdown .hljs-quote,
[data-theme="light"] .chat-markdown .hljs-selector-tag,
[data-theme="light"] .chat-markdown .hljs-selector-pseudo { color: #22863a }
[data-theme="light"] .chat-markdown .hljs-subst { color: #24292e }
[data-theme="light"] .chat-markdown .hljs-section { color: #005cc5 }
[data-theme="light"] .chat-markdown .hljs-bullet { color: #735c0f }
[data-theme="light"] .chat-markdown .hljs-addition { color: #22863a; background-color: #f0fff4 }
[data-theme="light"] .chat-markdown .hljs-deletion { color: #b31d28; background-color: #ffeef0 }
