/* ═══════════════════════════════════════════════════════════════
   VYOMA AI — ThinkAI/ChatGPT-Inspired UI Redesign v2.0
   
   Clean • Minimal • Professional
   
   Dual theme: Dark (default) + Light
   No neon, no glassmorphism, no purple glow
   ═══════════════════════════════════════════════════════════════ */

/* ─── DARK THEME (DEFAULT) ────────────────────────────────── */
:root.dark,
:root:not(.light) {
  --bg-body: #0b0b0b;
  --bg-sidebar: #111111;
  --bg-main: #0b0b0b;
  --bg-surface: #161616;
  --bg-surface-hover: #1e1e1e;
  --bg-input: #1a1a1a;

  --border: #2a2a2a;
  --border-hover: #3a3a3a;
  --border-accent: #404040;

  --text-primary: #e5e5e5;
  --text-secondary: #9ca3af;
  --text-muted: #6b7280;
  --text-faint: #4b5563;

  --accent: #e5e5e5;
  --accent-soft: #1a1a1a;

  --msg-user-bg: #1f1f1f;
  --msg-user-border: #2a2a2a;
  --msg-ai-bg: #141414;
  --msg-ai-border: #2a2a2a;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);

  color-scheme: dark;
}

/* ─── LIGHT THEME ─────────────────────────────────────────── */
:root.light {
  --bg-body: #f5f5f5;
  --bg-sidebar: #ffffff;
  --bg-main: #f5f5f5;
  --bg-surface: #ffffff;
  --bg-surface-hover: #f0f0f0;
  --bg-input: #ffffff;

  --border: #e5e5e5;
  --border-hover: #d1d5db;
  --border-accent: #c0c0c0;

  --text-primary: #111111;
  --text-secondary: #6b7280;
  --text-muted: #9ca3af;
  --text-faint: #c0c0c0;

  --accent: #111111;
  --accent-soft: #f0f0f0;

  --msg-user-bg: #ffffff;
  --msg-user-border: #e5e5e5;
  --msg-ai-bg: #fafafa;
  --msg-ai-border: #e5e5e5;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1);

  color-scheme: light;
}

/* ─── BASE ────────────────────────────────────────────────── */
body {
  background: var(--bg-body) !important;
  color: var(--text-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR — ChatGPT-style
   ═══════════════════════════════════════════════════════════════ */

.sidebar {
  background: var(--bg-sidebar) !important;
  border-right: 1px solid var(--border) !important;
  box-shadow: none !important;
  transition: width 0.25s ease, opacity 0.2s ease !important;
}

/* Sidebar Header */
.sidebar-header {
  border-bottom: none !important;
  padding: 16px !important;
}

.brand-logo {
  width: 28px !important;
  height: 28px !important;
}

.brand-logo .app-logo {
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
  filter: none !important;
  box-shadow: none !important;
}

.brand-name {
  color: var(--text-primary) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
}

.brand-tag {
  color: var(--text-muted) !important;
  font-size: 0.6rem !important;
}

/* Close button → toggle icon */
.sidebar-close {
  color: var(--text-muted) !important;
  background: transparent !important;
  border: none !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
}

.sidebar-close:hover {
  background: var(--bg-surface-hover) !important;
  color: var(--text-primary) !important;
}

/* New Chat Button */
.new-chat-btn {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
  font-size: 0.84rem !important;
  transition: background 0.15s ease !important;
}

.new-chat-btn:hover {
  background: var(--bg-surface-hover) !important;
  border-color: var(--border-hover) !important;
  box-shadow: none !important;
}

.new-chat-btn svg {
  color: var(--text-muted) !important;
}

/* Search */
.search-wrapper {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
  border-radius: 10px !important;
}

.search-wrapper input {
  color: var(--text-primary) !important;
  background: transparent !important;
}

.search-wrapper input::placeholder {
  color: var(--text-muted) !important;
}

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

/* Chat List Items */
.chat-item {
  color: var(--text-secondary) !important;
  border-radius: 8px !important;
  transition: background 0.15s ease !important;
}

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

.chat-item.active {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border: none !important;
  box-shadow: none !important;
}

.chat-item-title {
  color: inherit !important;
}

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

/* Sidebar Footer */
.sidebar-footer .settings-btn {
  color: var(--text-secondary) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  transition: background 0.15s ease !important;
}

.sidebar-footer .settings-btn:hover {
  background: var(--bg-surface-hover) !important;
  color: var(--text-primary) !important;
}

.footer-text {
  color: var(--text-faint) !important;
}

/* ═══════════════════════════════════════════════════════════════
   COLLAPSED SIDEBAR
   ═══════════════════════════════════════════════════════════════ */
.sidebar.collapsed {
  width: 64px !important;
  min-width: 64px !important;
  overflow: hidden !important;
}

.sidebar.collapsed .brand-text,
.sidebar.collapsed .new-chat-btn span,
.sidebar.collapsed .search-wrapper,
.sidebar.collapsed .chat-item-title,
.sidebar.collapsed .chat-item-actions,
.sidebar.collapsed .settings-btn span,
.sidebar.collapsed .footer-text,
.sidebar.collapsed .chat-item-date,
.sidebar.collapsed .chat-item .chat-icon-label {
  display: none !important;
  opacity: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}

.sidebar.collapsed .sidebar-header {
  justify-content: center !important;
  padding: 16px 8px !important;
}

.sidebar.collapsed .brand {
  justify-content: center !important;
}

.sidebar.collapsed .new-chat-btn {
  justify-content: center !important;
  padding: 10px !important;
  margin: 0 8px !important;
}

.sidebar.collapsed .chat-item {
  justify-content: center !important;
  padding: 10px !important;
}

.sidebar.collapsed .chat-list {
  padding: 4px 4px !important;
}

.sidebar.collapsed .sidebar-footer .settings-btn {
  justify-content: center !important;
  padding: 10px !important;
}

.sidebar.collapsed .sidebar-footer {
  padding: 8px !important;
}

/* ═══════════════════════════════════════════════════════════════
   MAIN HEADER
   ═══════════════════════════════════════════════════════════════ */

.main-header {
  background: var(--bg-main) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}

/* Hamburger / Sidebar Toggle */
.hamburger {
  color: var(--text-muted) !important;
  background: transparent !important;
  border: none !important;
}

.hamburger:hover {
  color: var(--text-primary) !important;
  background: var(--bg-surface-hover) !important;
  border-radius: 8px !important;
}

.chat-title {
  color: var(--text-primary) !important;
  font-weight: 500 !important;
  font-size: 0.9rem !important;
}

.header-actions .icon-btn {
  color: var(--text-muted) !important;
  background: transparent !important;
  border: none !important;
}

.header-actions .icon-btn:hover {
  color: var(--text-primary) !important;
  background: var(--bg-surface-hover) !important;
  border-radius: 8px !important;
}

/* ═══════════════════════════════════════════════════════════════
   WELCOME SCREEN — ThinkAI Inspired
   ═══════════════════════════════════════════════════════════════ */

.welcome-screen {
  background: var(--bg-main) !important;
}

/* Remove all decorative elements */
.welcome-screen::before,
.welcome-screen::after,
.hero-particles,
.hero-glow,
.hero-radial,
[class*="glow"],
[class*="radial-bg"],
[class*="ring"],
[class*="shimmer"],
[class*="aurora"] {
  display: none !important;
  opacity: 0 !important;
}

/* Logo */
.hero-logo-wrapper {
  margin-bottom: 24px !important;
}

.hero-logo-wrapper img,
.hero-logo-img,
.welcome-logo-img {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  filter: none !important;
  box-shadow: none !important;
}

.hero-logo-ring {
  display: none !important;
}

/* Greeting */
.hero-headline {
  font-size: 32px !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.3 !important;
  margin-bottom: 8px !important;
  text-shadow: none !important;
  background: none !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
}

.hero-subtitle {
  font-size: 15px !important;
  color: var(--text-muted) !important;
  margin-bottom: 32px !important;
  max-width: 480px !important;
  line-height: 1.5 !important;
  background: none !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
}

.hero-brand-label {
  color: var(--text-faint) !important;
  letter-spacing: 0.1em !important;
}

/* Suggestion Cards — single horizontal row */
.hero-suggestions,
.suggestions {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 16px !important;
  justify-content: center !important;
  overflow-x: auto !important;
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

.hero-suggestions::-webkit-scrollbar,
.suggestions::-webkit-scrollbar {
  display: none !important;
}

.suggestion-chip,
.hero-chip {
  flex: 0 0 200px !important;
  width: 200px !important;
  min-width: 200px !important;
  max-width: 200px !important;
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  color: var(--text-secondary) !important;
  box-shadow: none !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
  padding: 14px 18px !important;
}

.suggestion-chip:hover,
.hero-chip:hover {
  background: var(--bg-surface-hover) !important;
  border-color: var(--border-hover) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
  transform: none !important;
}

.hero-chip-icon {
  color: var(--text-muted) !important;
}

.hero-chip-icon svg {
  filter: none !important;
}

.hero-chip-title {
  color: var(--text-primary) !important;
}

.hero-chip-desc {
  color: var(--text-muted) !important;
}

/* ═══════════════════════════════════════════════════════════════
   MESSAGES
   ═══════════════════════════════════════════════════════════════ */

.messages-container {
  background: var(--bg-main) !important;
}

/* Message bubbles */
.message {
  margin-bottom: 16px !important;
}

.user-message {
  background: var(--msg-user-bg) !important;
  border: 1px solid var(--msg-user-border) !important;
  border-radius: 14px !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}

.assistant-message {
  background: var(--msg-ai-bg) !important;
  border: 1px solid var(--msg-ai-border) !important;
  border-radius: 14px !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}

.assistant-message .message-text {
  color: var(--text-secondary) !important;
  line-height: 1.75 !important;
}

/* Message action buttons */
.message-actions button,
.msg-action-btn {
  color: var(--text-muted) !important;
  background: transparent !important;
  border: none !important;
}

.message-actions button:hover,
.msg-action-btn:hover {
  color: var(--text-primary) !important;
  background: var(--bg-surface-hover) !important;
  border-radius: 6px !important;
}

/* Important badge on messages */
.message .importance-badge {
  background: transparent !important;
  color: var(--text-muted) !important;
  border: none !important;
  box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   THINKING INDICATOR
   ═══════════════════════════════════════════════════════════════ */

.typing-indicator {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.thinking-bubble {
  background: transparent !important;
  border: none !important;
}

.thinking-text {
  color: var(--text-muted) !important;
  font-size: 13px !important;
}

.thinking-spinner {
  color: var(--text-muted) !important;
}

/* ═══════════════════════════════════════════════════════════════
   INPUT BAR
   ═══════════════════════════════════════════════════════════════ */

.input-bar {
  background: var(--bg-main) !important;
  border-top: none !important;
  box-shadow: none !important;
}

.input-wrapper {
  background: var(--bg-input) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  padding: 8px 12px !important;
  transition: border-color 0.15s ease !important;
}

.input-wrapper:focus-within {
  border-color: var(--border-hover) !important;
  box-shadow: none !important;
}

.input-wrapper textarea,
#message-input {
  color: var(--text-primary) !important;
  background: transparent !important;
  caret-color: var(--text-secondary) !important;
  font-size: 14px !important;
}

.input-wrapper textarea::placeholder,
#message-input::placeholder {
  color: var(--text-muted) !important;
}

/* File upload button */
.input-icon-btn,
#file-upload-btn {
  color: var(--text-muted) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
}

.input-icon-btn:hover,
#file-upload-btn:hover {
  color: var(--text-primary) !important;
  background: var(--bg-surface-hover) !important;
}

/* Send button */
.send-btn {
  background: var(--text-primary) !important;
  color: var(--bg-main) !important;
  border: none !important;
  border-radius: 10px !important;
  transition: opacity 0.15s ease !important;
  box-shadow: none !important;
}

.send-btn:hover {
  opacity: 0.85 !important;
}

.send-btn:disabled {
  opacity: 0.3 !important;
  background: var(--text-muted) !important;
}

.send-btn svg {
  width: 18px !important;
  height: 18px !important;
}

/* Thinking Mode Selector */
.thinking-select {
  position: relative !important;
}

.thinking-toggle {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
  border-radius: 20px !important;
  padding: 4px 12px !important;
  font-size: 12px !important;
  transition: all 0.15s ease !important;
}

.thinking-toggle:hover {
  border-color: var(--border-hover) !important;
  color: var(--text-primary) !important;
}

.thinking-dropdown {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-lg) !important;
}

.thinking-option {
  background: transparent !important;
  border: none !important;
  color: var(--text-primary) !important;
}

.thinking-option:hover {
  background: var(--bg-surface-hover) !important;
}

.thinking-opt-title {
  color: var(--text-primary) !important;
}

.thinking-opt-desc {
  color: var(--text-muted) !important;
}

.thinking-opt-check {
  color: var(--text-primary) !important;
}

/* Smart Mode Pills */
.sqm-bar {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.sqm-pill {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
  border-radius: 20px !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
  transition: all 0.15s ease !important;
  box-shadow: none !important;
}

.sqm-pill::after {
  display: none !important;
}

.sqm-pill:hover {
  background: var(--bg-surface-hover) !important;
  border-color: var(--border-hover) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
  transform: none !important;
}

.sqm-pill.active {
  background: var(--text-primary) !important;
  color: var(--bg-main) !important;
  border-color: var(--text-primary) !important;
}

.sqm-pill svg {
  width: 14px !important;
  height: 14px !important;
}

/* Scroll to bottom button */
.scroll-down-btn {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
  box-shadow: var(--shadow-sm) !important;
  border-radius: 50% !important;
}

.scroll-down-btn:hover {
  background: var(--bg-surface-hover) !important;
  color: var(--text-primary) !important;
}

/* Disclaimer */
.input-disclaimer {
  color: var(--text-faint) !important;
  font-size: 11px !important;
}

/* ═══════════════════════════════════════════════════════════════
   SHARE DROPDOWN
   ═══════════════════════════════════════════════════════════════ */

.share-dropdown {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-lg) !important;
  border-radius: 12px !important;
  backdrop-filter: none !important;
}

.dropdown-item {
  color: var(--text-secondary) !important;
}

.dropdown-item:hover {
  background: var(--bg-surface-hover) !important;
  color: var(--text-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════
   MODALS — unified neutral style
   ═══════════════════════════════════════════════════════════════ */

.modal-overlay,
.settings-overlay,
.dialog-overlay,
.merge-overlay,
.recycle-overlay,
.recycle-confirm-overlay,
.movechat-overlay {
  background: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(4px) !important;
}

.settings-modal,
.merge-modal,
.recycle-modal,
.recycle-confirm-modal,
.movechat-modal {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-lg) !important;
  border-radius: 16px !important;
}

.settings-modal h3,
.merge-modal h3,
.recycle-modal h3,
.movechat-modal h3 {
  color: var(--text-primary) !important;
}

.merge-subtitle,
.recycle-subtitle,
.movechat-subtitle {
  color: var(--text-muted) !important;
}

.settings-close-btn {
  color: var(--text-muted) !important;
}

.settings-close-btn:hover {
  color: var(--text-primary) !important;
}

/* Theme option buttons */
.theme-option {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-secondary) !important;
  border-radius: 8px !important;
}

.theme-option:hover,
.theme-option.active {
  background: var(--bg-surface-hover) !important;
  border-color: var(--border-hover) !important;
  color: var(--text-primary) !important;
}

/* Merge / Recycle list items */
.merge-chat-item,
.recycle-item,
.movechat-item {
  background: var(--bg-body) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  border-radius: 10px !important;
}

.merge-chat-item:hover,
.recycle-item:hover,
.movechat-item:hover {
  background: var(--bg-surface-hover) !important;
  border-color: var(--border-hover) !important;
}

/* Modal buttons */
.merge-btn-primary,
.recycle-btn-accent {
  background: var(--text-primary) !important;
  color: var(--bg-body) !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 500 !important;
}

.merge-btn-primary:hover,
.recycle-btn-accent:hover {
  opacity: 0.85 !important;
}

.merge-btn-secondary,
.rcf-btn-cancel {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-secondary) !important;
  border-radius: 10px !important;
}

.merge-btn-secondary:hover,
.rcf-btn-cancel:hover {
  background: var(--bg-surface-hover) !important;
}

.recycle-btn-danger,
.rcf-btn-delete {
  background: #b91c1c !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
}

/* ═══════════════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════════════ */

.toast {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-md) !important;
  border-radius: 10px !important;
}

/* ═══════════════════════════════════════════════════════════════
   SELECTION TOOLBAR
   ═══════════════════════════════════════════════════════════════ */

.selection-toolbar {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-md) !important;
  border-radius: 12px !important;
}

.sel-toolbar-btn {
  border-radius: 8px !important;
}

.sel-btn-primary {
  background: var(--text-primary) !important;
  color: var(--bg-body) !important;
}

.sel-btn-accent {
  background: var(--bg-surface-hover) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
}

.sel-btn-ghost {
  background: transparent !important;
  color: var(--text-muted) !important;
}

/* ═══════════════════════════════════════════════════════════════
   CODE BLOCKS — neutral theme
   ═══════════════════════════════════════════════════════════════ */

pre,
code {
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace !important;
}

pre {
  background: var(--bg-body) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  color: var(--text-primary) !important;
}

code:not(pre code) {
  background: var(--bg-surface-hover) !important;
  border: 1px solid var(--border) !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
  color: var(--text-primary) !important;
  font-size: 0.88em !important;
}

/* Copy code button */
.copy-code-btn {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
  border-radius: 6px !important;
}

.copy-code-btn:hover {
  background: var(--bg-surface-hover) !important;
  color: var(--text-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SCROLLBAR — subtle
   ═══════════════════════════════════════════════════════════════ */

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

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

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

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

/* ═══════════════════════════════════════════════════════════════
   MISC CLEANUP
   ═══════════════════════════════════════════════════════════════ */

/* Remove any leftover accent glows from the base theme */
:root .accent-glow,
.neon-border,
.gradient-border,
[style*="box-shadow: 0 0"] {
  box-shadow: none !important;
}

/* Links in messages */
.assistant-message a {
  color: var(--text-primary) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

.assistant-message a:hover {
  opacity: 0.7 !important;
}

/* File preview bar */
.file-preview-bar {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
}

/* Continue generating button */
.continue-btn {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-secondary) !important;
  border-radius: 10px !important;
}

.continue-btn:hover {
  background: var(--bg-surface-hover) !important;
  color: var(--text-primary) !important;
}

/* Merged summary card */
.merged-summary-card {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
}

.merged-summary-collapsed {
  color: var(--text-secondary) !important;
}

.merged-summary-collapsed:hover {
  background: var(--bg-surface-hover) !important;
}

/* ═══════════════════════════════════════════════════════════════
   AGENT STUDIO — Clean Minimal Override
   ═══════════════════════════════════════════════════════════════ */

/* Studio modal */
.agent-studio-modal {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  backdrop-filter: none !important;
  box-shadow: var(--shadow-lg) !important;
  border-radius: 20px !important;
}

.agent-studio-header {
  border-bottom: 1px solid var(--border) !important;
}

.agent-studio-logo {
  background: var(--bg-surface-hover) !important;
  border: 1px solid var(--border) !important;
}

.agent-studio-logo svg {
  color: var(--text-muted) !important;
}

.agent-studio-heading {
  color: var(--text-primary) !important;
}

.agent-studio-sub {
  color: var(--text-muted) !important;
}

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

.agent-studio-close:hover {
  background: var(--bg-surface-hover) !important;
  color: var(--text-primary) !important;
}

/* Agent cards — clean surface */
.agent-studio-card,
.agent-showcase-card {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
}

.agent-studio-card::before,
.agent-showcase-card::before {
  display: none !important;
}

.agent-studio-card:hover,
.agent-showcase-card:hover {
  background: var(--bg-surface-hover) !important;
  border-color: var(--border-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-md) !important;
}

.agent-card-name,
.agent-showcase-name {
  color: var(--text-primary) !important;
}

.agent-card-features li,
.agent-showcase-features li {
  color: var(--text-muted) !important;
}

.agent-showcase-tagline {
  color: var(--text-muted) !important;
}

.agent-showcase-footer {
  border-top: 1px solid var(--border) !important;
}

.agent-card-status-label {
  color: var(--text-muted) !important;
}

/* Agent card buttons — neutral */
.agent-card-btn {
  border: 1px solid var(--border) !important;
}

.agent-card-btn.open-btn {
  background: var(--bg-surface-hover) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}

.agent-card-btn.open-btn:hover {
  background: var(--border) !important;
}

.agent-card-btn.connect-btn {
  background: transparent !important;
  color: var(--text-muted) !important;
  border-color: var(--border) !important;
}

.agent-card-btn.connect-btn:hover {
  background: var(--bg-surface-hover) !important;
  color: var(--text-primary) !important;
}

.agent-showcase-btn.explore-btn {
  background: var(--text-primary) !important;
  color: var(--bg-body) !important;
  box-shadow: none !important;
}

.agent-showcase-btn.explore-btn:hover {
  opacity: 0.85 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Studio floating button */
.agent-studio-float-btn {
  background: var(--text-primary) !important;
  color: var(--bg-body) !important;
  box-shadow: var(--shadow-md) !important;
  animation: none !important;
}

.agent-studio-float-btn:hover {
  opacity: 0.9 !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* Agents page overlay */
.agents-page-overlay {
  background: var(--bg-body) !important;
  backdrop-filter: none !important;
}

.agents-page-back {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
}

.agents-page-back:hover {
  background: var(--bg-surface-hover) !important;
  color: var(--text-primary) !important;
}

.agents-page-hero-icon {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
}

.agents-page-hero-icon svg {
  color: var(--text-muted) !important;
}

.agents-page-hero h1 {
  color: var(--text-primary) !important;
}

.agents-page-hero p {
  color: var(--text-muted) !important;
}

/* Icon wraps — neutral tones */
.gmail-card .agent-card-icon-wrap,
.gmail-card .agent-showcase-icon {
  background: rgba(239, 68, 68, 0.08) !important;
  color: #ef4444 !important;
}

.drive-card .agent-card-icon-wrap,
.drive-card .agent-showcase-icon {
  background: rgba(34, 197, 94, 0.08) !important;
  color: #22c55e !important;
}

.calendar-card .agent-card-icon-wrap,
.calendar-card .agent-showcase-icon {
  background: rgba(99, 102, 241, 0.08) !important;
  color: #6366f1 !important;
}

/* Sidebar agents section */
.va-agents-section,
[id="va-agents-section"] {
  border-top: 1px solid var(--border) !important;
  border-bottom: none !important;
}

.va-agents-header {
  color: var(--text-muted) !important;
}

.va-agent-item {
  color: var(--text-secondary) !important;
  border-radius: 8px !important;
}

.va-agent-item:hover {
  background: var(--bg-surface-hover) !important;
  color: var(--text-primary) !important;
}