/* quantix AI — Global Base Styles */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

body,
* {
  font-family: 'Inter', sans-serif !important;
}

code,
pre,
.hljs,
.artifact-file-code,
kbd {
  font-family: 'JetBrains Mono', 'Courier New', monospace !important;
}

body {
  background: var(--bg) !important;
  color: var(--text) !important;
  margin: 0;
  padding: 0;
}

.artifact-card,
.input-container,
.modal,
.custom-modal,
.auth-container,
.section-card,
.stat-card,
.endpoint-card,
.token-panel {
  background: var(--bg2) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}

/* Headers */
.header,
.top-bar-container,
.navbar {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border) !important;
}

.message {
  background: transparent !important;
}

.message.assistant {
  background: transparent !important;
  border: none !important;
}

/* Code blocks */
pre {
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  backdrop-filter: none !important;
}

/* Sidebar Collapsed */
.sidebar.collapsed {
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
}

.sidebar.collapsed * {
  display: none !important;
}

/* Form Elements */
textarea,
input[type="text"],
input[type="password"] {
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  backdrop-filter: none !important;
}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus {
  border-color: var(--text-dim) !important;
  outline: none !important;
}

/* GLOBAL LOWERCASE */
body * {
  text-transform: lowercase !important;
}

/* Typed content — keep original case */
input,
textarea,
.message-content,
.artifact-file-code,
.hljs,
pre,
code {
  text-transform: none !important;
}

/* Chat Input */
#userInput {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.bottom-area {
  background: var(--bg) !important;
}

/* Layout Shell (Shared) */
.app {
  display: flex;
  height: 100vh !important;
  height: 100dvh !important;
  width: 100vw;
  overflow: hidden;
  background: var(--bg) !important;
}

.sidebar {
  width: 240px;
  min-width: 180px;
  max-width: 350px;
  background: var(--bg2) !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  border-right: 1px solid var(--border) !important;
  flex-shrink: 0 !important;
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.main-container {
  flex: 1 !important;
  display: flex !important;
  height: 100% !important;
  overflow: hidden !important;
  position: relative !important;
  align-items: stretch !important;
}

.main {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  position: relative !important;
  background: var(--bg) !important;
}

.header, .header-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 16px !important;
  height: 52px !important;
  border-bottom: 1px solid var(--border) !important;
  flex-shrink: 0 !important;
  background: var(--bg) !important;
}

.header-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
}

/* Scrollbars */
* {
  scrollbar-width: thin !important;
  scrollbar-color: #2a2a2a transparent !important;
}

::-webkit-scrollbar {
  width: 5px !important;
  height: 5px !important;
}

::-webkit-scrollbar-track {
  background: transparent !important;
}

::-webkit-scrollbar-thumb {
  background: var(--border) !important;
  border-radius: 6px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-dim) !important;
}

::-webkit-scrollbar-corner {
  background: transparent !important;
}

/* Global Component Overrides for Theming */
.sidebar,
.canvas-sidebar {
  background: var(--bg2) !important;
  border-right: 1px solid var(--border) !important;
}

.sidebar-footer .sidebar-avatar {
  background: var(--bg3) !important;
  color: var(--text-muted) !important;
}

.header,
.canvas-header {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border) !important;
}

.header-title,
#userNameDisplay {
  color: var(--text) !important;
}

.input-box {
  background: var(--bg2) !important;
  border-color: var(--border) !important;
}

.input-box:focus-within {
  background: var(--bg) !important;
  border-color: var(--text-dim) !important;
}

textarea#userInput {
  color: var(--text) !important;
}

.onlysq-promo-bar {
  background: var(--bg3) !important;
  border-color: var(--border) !important;
}

.onlysq-promo-bar .promo-left {
  color: var(--text) !important;
}

.chat-item {
  color: var(--text-muted) !important;
}

.chat-item:hover {
  background: var(--hover) !important;
  color: var(--text) !important;
}

.chat-item.active {
  background: var(--bg3) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

.sidebar-icon {
  color: var(--text-muted) !important;
  border-color: var(--border) !important;
}

.sidebar-icon:hover {
  background: var(--hover) !important;
  color: var(--text) !important;
}

.folder-item {
  color: var(--text-muted) !important;
}

.folder-item:hover {
  background: var(--hover) !important;
  color: var(--text) !important;
}

.action-btn,
.hamburger,
.chat-action-btn {
  color: var(--text-muted) !important;
}

.action-btn:hover,
.hamburger:hover,
.chat-action-btn:hover {
  background: var(--hover) !important;
  color: var(--text) !important;
}

.model-picker .model-trigger {
  color: var(--text-muted) !important;
}

.model-picker .model-trigger:hover {
  background: var(--hover) !important;
  color: var(--text) !important;
}

.model-dropdown {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
}

.model-option {
  color: var(--text-muted) !important;
}

.model-option:hover {
  background: var(--hover) !important;
  color: var(--text) !important;
}

.model-option.selected {
  background: var(--bg3) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

.quick-btn {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
}

.quick-btn:hover {
  background: var(--hover) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

.welcome-logo>div {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

h1,
h2,
h3,
.welcome-title,
.message-content {
  color: var(--text) !important;
}

hr {
  border-top-color: var(--border) !important;
}