/* ComputeMesh neutral theme contract shared by desktop NodeOS and Android.
   Luxury, understated, high-end matte dark grey aesthetic (no cheap neon gloss or blue tints). */
:root {
  color-scheme: light;
  --cm-bg: #f5f7fa; --cm-surface: #ffffff; --cm-surface-raised: #ffffff;
  --cm-card: #eef2f6; --cm-card-hover: #e2e8f0; --cm-border: #cbd5e1;
  --cm-border-strong: #94a3b8; --cm-text: #172033; --cm-muted: #526176;
  --cm-accent: #374151; --cm-accent-hover: #1f2937; --cm-accent-soft: #f3f4f6;
  --cm-on-accent: #ffffff; --cm-danger: #b42332; --cm-danger-soft: #fde8eb;
  --cm-shadow: 0 16px 40px rgba(15, 23, 42, .08);
}
:root.dark {
  color-scheme: dark;
  --cm-bg: #181a1c; --cm-surface: #202325; --cm-surface-raised: #272a2c;
  --cm-card: #272a2c; --cm-card-hover: #303537; --cm-border: #3c4146;
  --cm-border-strong: #5a626a; --cm-text: #f0f1f2; --cm-muted: #9da3a8;
  --cm-accent: #e4e5e7; --cm-accent-hover: #ffffff; --cm-accent-soft: rgba(255, 255, 255, 0.08);
  --cm-on-accent: #181a1c; --cm-danger: #ef4444; --cm-danger-soft: rgba(239, 68, 68, 0.15);
  --cm-shadow: 0 20px 48px rgba(0, 0, 0, .55);

  /* Global Tailwind/shadcn overrides for dark mode: replace blue with refined monochrome grey */
  --background: #181a1c !important;
  --foreground: #f0f1f2 !important;
  --card: #202325 !important;
  --card-foreground: #f0f1f2 !important;
  --popover: #24272a !important;
  --popover-foreground: #f0f1f2 !important;
  --primary: #e4e5e7 !important;
  --primary-foreground: #181a1c !important;
  --secondary: #272a2d !important;
  --secondary-foreground: #f0f1f2 !important;
  --muted: #24272a !important;
  --muted-foreground: #9da3a8 !important;
  --accent: #2c2f32 !important;
  --accent-foreground: #f0f1f2 !important;
  --border: rgba(255, 255, 255, 0.1) !important;
  --input: rgba(255, 255, 255, 0.1) !important;
  --ring: rgba(255, 255, 255, 0.18) !important;
}
.dark {
  --background: #181a1c !important;
  --foreground: #f0f1f2 !important;
  --card: #202325 !important;
  --border: rgba(255, 255, 255, 0.1) !important;
  --input: rgba(255, 255, 255, 0.1) !important;
  --ring: rgba(255, 255, 255, 0.18) !important;
  --primary: #e4e5e7 !important;
  --primary-foreground: #181a1c !important;
}

html, html body {
  background: var(--cm-bg) !important;
  background-color: var(--cm-bg) !important;
  color: var(--cm-text) !important;
}

[class*="text-muted-foreground"], [data-slot="dialog-description"],
[data-slot="alert-dialog-description"] { color: var(--cm-muted) !important; }
[class*="border-border"], hr { border-color: var(--cm-border) !important; }

/* ==============================================================================
   High-End Gediegene Dialoge & Modals (Model Information, Settings, etc.)
   No cheap blue border, no blue glow, no glossy sheen, velvety dark grey surfaces.
   ============================================================================== */
[role="dialog"],
[data-slot="dialog-content"],
[data-slot="alert-dialog-content"],
.dialog-content,
[data-dialog-content] {
  background: #1e2023 !important;
  background-color: #1e2023 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.75) !important;
  color: #f0f1f2 !important;
  outline: none !important;
}

/* Eradicate any neon blue borders, rings, or outlines across all modals, dialogs, popovers */
[role="dialog"],
[role="dialog"] div,
[role="dialog"] span,
[role="dialog"] input,
[role="dialog"] select,
[role="menu"],
[role="menu"] div,
div[role="dialog"],
div[role="menu"],
[data-slot="dialog-content"],
[data-slot="dropdown-menu-content"],
[data-slot="dropdown-menu-sub-content"],
[data-slot="popover-content"],
[data-bits-menu-content],
[data-bits-dropdown-menu-content],
[data-radix-menu-content],
[data-radix-popper-content-wrapper],
[data-radix-popper-content-wrapper] > div,
[data-floating-ui-portal] > div,
[data-bits-floating-content-switcher] > div {
  --tw-ring-color: transparent !important;
  --tw-ring-offset-color: transparent !important;
  --tw-ring-shadow: none !important;
  outline-color: transparent !important;
  outline: none !important;
}

[role="dialog"],
div[role="dialog"],
[data-slot="dialog-content"],
[role="menu"],
div[role="menu"],
[data-slot="dropdown-menu-content"],
[data-slot="dropdown-menu-sub-content"],
[data-slot="popover-content"],
[data-bits-menu-content],
[data-bits-dropdown-menu-content],
[data-radix-menu-content],
[data-radix-popper-content-wrapper] > div,
[data-floating-ui-portal] > div,
[data-bits-floating-content-switcher] > div {
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  background-color: #18191c !important;
  background: #18191c !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

[role="dialog"] [class*="border-"],
[role="dialog"] div[class*="border"],
[role="dialog"] [class*="ring-"],
[role="dialog"] input,
[role="dialog"] .border-primary {
  border-color: rgba(255, 255, 255, 0.12) !important;
  outline: none !important;
}

/* Modal Close Button */
[data-slot="dialog-close"],
button.dialog-close,
[role="dialog"] button:has(svg.lucide-x) {
  background: rgba(255, 255, 255, 0.05) !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  color: #9da3a8 !important;
  box-shadow: none !important;
  transition: all 0.15s ease !important;
}

[data-slot="dialog-close"]:hover,
button.dialog-close:hover,
[role="dialog"] button:has(svg.lucide-x):hover {
  background: rgba(255, 255, 255, 0.1) !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

/* Modal Inner Input Rows & Field Chips (replaces harsh blue with subtle dark grey) */
[role="dialog"] [class*="badge"],
[role="dialog"] .badge,
[role="dialog"] div:has(> .lucide-copy),
[role="dialog"] [data-slot="badge"],
#cm-model-info-fallback,
[role="dialog"] .rounded-md {
  background: #25282b !important;
  background-color: #25282b !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #f0f1f2 !important;
  box-shadow: none !important;
}

[role="dialog"] pre,
[role="dialog"] code {
  background: #17181a !important;
  background-color: #17181a !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  color: #d1d5db !important;
  box-shadow: none !important;
}

/* Outer input area: completely transparent, no border, no nested box */
[data-slot="input-area"],
.chat-input-wrapper {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Form wrapper itself is completely transparent and borderless */
form:has(textarea),
form.relative,
[data-slot="chat-container"] form {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Unified ChatGPT-style pill capsule in gediegenem dark grey (no blue frame) */
[data-slot="input-area"] > div,
.chat-input:has(textarea),
[data-slot="input-area"] .relative {
  background: #1e2023 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 24px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

[data-slot="input-area"] > div:focus-within,
.chat-input:has(textarea):focus-within,
[data-slot="input-area"] .relative:focus-within {
  border-color: rgba(255, 255, 255, 0.28) !important;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.6) !important;
}

/* Any inner wrappers must NOT have borders, backgrounds or box-shadows */
[data-slot="input-area"] > div div:not([data-slot="button"]):not(button),
[data-slot="chat-container"] form div div:not([data-slot="button"]):not(button) {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Seamless inner textarea without redundant inner border */
form.relative:has(textarea) textarea,
form textarea,
.chat-input textarea,
[data-slot="input-area"] textarea,
[data-slot="chat-input"] textarea,
textarea[placeholder*="Nachricht"],
textarea[placeholder*="Message"],
textarea[placeholder*="Ask"] {
  border: none !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  color: #f1f5f9 !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  padding: 4px 6px !important;
  resize: none !important;
  width: 100% !important;
}

input::placeholder, textarea::placeholder { color: var(--cm-muted) !important; opacity: .88; }

/* Base button reset: clean neutral surface */
button:not(.bg-primary):not([class*="bg-primary"]):not([data-variant="default"]):not([data-variant="destructive"]):not(.text-primary-foreground),
[role="button"]:not(.bg-primary):not([class*="bg-primary"]):not([data-variant="default"]):not([data-variant="destructive"]):not(.text-primary-foreground) {
  background-image: none !important;
  color: var(--cm-text) !important;
}

button:not(.bg-destructive):not([data-variant="destructive"]),
[role="button"]:not(.bg-destructive):not([data-variant="destructive"]) {
  border-color: transparent !important;
}

/* Clean, un-boxed dropdown menus & popups */
[class*="bg-popover"],
[role="menu"],
[data-bits-menu-content],
[data-bits-dropdown-menu-content],
[data-bits-dropdown-menu-sub-content],
[data-bits-popover-content],
[data-slot="dropdown-menu-content"],
[data-slot="dropdown-menu-sub-content"],
[data-slot="popover-content"],
[data-slot="command"] {
  background: #1e2023 !important;
  background-color: #1e2023 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  color: var(--cm-text) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6) !important;
  padding: 6px !important;
}

/* Search inputs inside dropdowns & popovers (e.g. MCP Server suchen...) */
[data-slot="dropdown-menu-content"] input,
[data-slot="dropdown-menu-sub-content"] input,
[data-slot="popover-content"] input,
[data-slot="command"] input,
[role="menu"] input {
  background: #141517 !important;
  background-color: #141517 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  color: #f8fafc !important;
  outline: none !important;
  box-shadow: none !important;
  font-size: 13px !important;
  padding: 6px 10px !important;
}

[data-slot="dropdown-menu-content"] input:focus,
[data-slot="dropdown-menu-sub-content"] input:focus,
[data-slot="popover-content"] input:focus,
[data-slot="command"] input:focus,
[role="menu"] input:focus {
  border-color: rgba(255, 255, 255, 0.28) !important;
}

/* Toggle Switches */
[role="switch"][data-state="checked"],
button[role="switch"][data-state="checked"] {
  background-color: #4b5563 !important;
}
[role="switch"][data-state="unchecked"],
button[role="switch"][data-state="unchecked"] {
  background-color: #27272a !important;
}

/* Menu items: Clean, un-boxed rows with soft hover (NOT eingekastelt!) */
[role="menuitem"],
[role="option"],
[data-slot="dropdown-menu-item"],
[data-slot="dropdown-menu-sub-trigger"],
[data-slot="command-item"],
.dropdown-menu-item {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 6px !important;
  padding: 7px 10px !important;
  margin: 1px 0 !important;
  background: transparent !important;
  color: var(--cm-text) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease !important;
}

[role="menuitem"]:hover,
[role="menuitem"]:focus,
[role="menuitem"][data-highlighted],
[data-slot="dropdown-menu-item"]:hover,
[data-slot="dropdown-menu-item"]:focus,
[data-slot="dropdown-menu-sub-trigger"]:hover,
[data-slot="dropdown-menu-sub-trigger"]:focus,
[data-slot="dropdown-menu-sub-trigger"][data-state="open"],
[data-slot="command-item"]:hover,
[data-slot="command-item"]:focus {
  background: var(--cm-card-hover) !important;
  background-color: var(--cm-card-hover) !important;
  color: var(--cm-text) !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

[data-slot="dropdown-menu-content"],
[data-bits-dropdown-menu-content],
[data-slot="dropdown-menu-sub-content"],
[data-bits-dropdown-menu-sub-content] {
  z-index: 2147482000 !important;
  pointer-events: auto !important;
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  min-width: 190px !important;
}

/* General interactive hover */
button:not(:disabled):hover, [role="button"]:not([aria-disabled="true"]):hover {
  background-color: var(--cm-card-hover) !important;
}

/* Small message action buttons, composer controls, and icon buttons */
.actions button,
.chat-message button,
.code-block-actions button,
.mermaid-preview-btn,
button.cm-action-icon,
[data-slot="input-area"] button:not([type="submit"]):not(:has(svg.lucide-arrow-up)):not(:has(svg.lucide-send)),
.chat-message button:not(.bg-destructive) {
  background-color: transparent !important;
  border: 1px solid transparent !important;
  color: var(--cm-muted) !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

.actions button svg,
.chat-message button svg,
[data-slot="input-area"] button svg {
  color: inherit !important;
  stroke: currentColor !important;
}

/* Hover on icon buttons: Clean subtle dark card hover */
.actions button:not(:disabled):hover,
.chat-message button:not(:disabled):hover,
.code-block-actions button:not(:disabled):hover,
[data-slot="input-area"] button:not([type="submit"]):not(:has(svg.lucide-arrow-up)):not(:has(svg.lucide-send)):not(:disabled):hover {
  background-color: var(--cm-card-hover) !important;
  border-color: transparent !important;
  color: var(--cm-text) !important;
  box-shadow: none !important;
}

/* ==============================================================================
   Settings Page Sticky Action Dock & Primary/Outline Buttons
   ============================================================================== */

/* Prevent settings content from hiding underneath the sticky action dock */
.mx-auto.max-w-3xl.flex-1 {
  padding-bottom: 32px !important;
}
.mx-auto.max-w-3xl.flex-1 > div.space-y-6 {
  padding-bottom: 64px !important;
}

div.sticky.bottom-0,
div[class*="sticky"][class*="bottom-0"] {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 30 !important;
  background-color: #141618 !important;
  background: rgba(20, 22, 24, 0.96) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.75) !important;
  padding: 14px 24px !important;
  margin-top: auto !important;
  border-radius: 0 0 8px 8px !important;
}

/* Primary buttons (e.g. "Einstellungen speichern" / "Save settings"):
   High contrast vibrant sapphire blue with crisp pure white text */
.bg-primary,
button.bg-primary,
[data-slot="button"].bg-primary,
button[class*="bg-primary"],
button[data-variant="default"],
div.sticky.bottom-0 > button,
div[class*="sticky"][class*="bottom-0"] > button,
div.sticky.bottom-0 button:last-child,
div[class*="sticky"][class*="bottom-0"] button:last-child,
.text-primary-foreground,
[class*="text-primary-foreground"],
.bg-primary *,
button.bg-primary *,
[data-slot="button"].bg-primary *,
button[class*="bg-primary"] *,
button[data-variant="default"] *,
div.sticky.bottom-0 > button *,
div[class*="sticky"][class*="bottom-0"] > button *,
div.sticky.bottom-0 button:last-child *,
div[class*="sticky"][class*="bottom-0"] button:last-child * {
  color: #ffffff !important;
}

.bg-primary,
button.bg-primary,
[data-slot="button"].bg-primary,
button[class*="bg-primary"],
button[data-variant="default"],
div.sticky.bottom-0 > button,
div[class*="sticky"][class*="bottom-0"] > button,
div.sticky.bottom-0 button:last-child,
div[class*="sticky"][class*="bottom-0"] button:last-child {
  background-color: #2563eb !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35) !important;
  transition: all 0.15s ease-in-out !important;
  min-height: 38px !important;
  padding: 8px 20px !important;
}

.bg-primary:hover,
button.bg-primary:hover,
[data-slot="button"].bg-primary:hover,
button[class*="bg-primary"]:hover,
button[data-variant="default"]:hover,
div.sticky.bottom-0 > button:hover,
div[class*="sticky"][class*="bottom-0"] > button:hover,
div.sticky.bottom-0 button:last-child:hover,
div[class*="sticky"][class*="bottom-0"] button:last-child:hover {
  background-color: #1d4ed8 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.5) !important;
}

.bg-primary:hover *,
button.bg-primary:hover *,
[data-slot="button"].bg-primary:hover *,
button[class*="bg-primary"]:hover *,
button[data-variant="default"]:hover *,
div.sticky.bottom-0 > button:hover *,
div[class*="sticky"][class*="bottom-0"] > button:hover *,
div.sticky.bottom-0 button:last-child:hover *,
div[class*="sticky"][class*="bottom-0"] button:last-child:hover * {
  color: #ffffff !important;
}

/* Outline buttons (e.g. "Auf Standard zurücksetzen" / "Reset to default"):
   Clean subtle transparent surface with light grey text */
div.sticky.bottom-0 div.flex button,
div[class*="sticky"][class*="bottom-0"] div.flex button,
div.sticky.bottom-0 button:first-child:not(:last-child),
div.sticky.bottom-0 button[class*="outline"],
button[data-variant="outline"] {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  min-height: 38px !important;
  padding: 8px 16px !important;
}

div.sticky.bottom-0 div.flex button:hover,
div[class*="sticky"][class*="bottom-0"] div.flex button:hover,
div.sticky.bottom-0 button:first-child:not(:last-child):hover,
div.sticky.bottom-0 button[class*="outline"]:hover,
button[data-variant="outline"]:hover {
  background-color: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
}

/* ==============================================================================
   Refined Monochrome Luxury Send Button (No cheap neon cyan/blue)
   ============================================================================== */

/* Send / Submit Button base: Circular pill strictly scoped to chat input area */
[data-slot="input-area"] form button[type="submit"],
[data-slot="input-area"] button[type="submit"],
form:has(textarea) button[type="submit"],
button.rounded-full:has(svg.lucide-arrow-up),
button.rounded-full:has(svg.lucide-send),
button:has(svg.lucide-arrow-up),
button:has(svg.lucide-send),
[data-slot="chat-container"] button.rounded-full:last-child {
  border-radius: 9999px !important;
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
}

/* 1. Disabled / Inactive: sleek dark grey circle */
[data-slot="input-area"] form button[type="submit"]:disabled,
[data-slot="input-area"] button[type="submit"]:disabled,
form:has(textarea) button[type="submit"]:disabled,
button:disabled:has(svg.lucide-arrow-up),
button:disabled:has(svg.lucide-send),
[data-slot="chat-container"] button.rounded-full:last-child:disabled {
  background: rgba(255, 255, 255, 0.06) !important;
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
}

[data-slot="input-area"] form button[type="submit"]:disabled svg,
[data-slot="input-area"] button[type="submit"]:disabled svg,
form:has(textarea) button[type="submit"]:disabled svg,
button:disabled:has(svg.lucide-arrow-up) svg,
button:disabled:has(svg.lucide-send) svg {
  color: rgba(255, 255, 255, 0.25) !important;
  stroke: rgba(255, 255, 255, 0.25) !important;
}

/* 2. Active / Ready: Crisp Platinum / Off-White (Apple/ChatGPT/Linear Luxury) */
[data-slot="input-area"] form button[type="submit"]:not(:disabled),
[data-slot="input-area"] button[type="submit"]:not(:disabled),
form:has(textarea) button[type="submit"]:not(:disabled),
button:not(:disabled):has(svg.lucide-arrow-up),
button:not(:disabled):has(svg.lucide-send),
[data-slot="chat-container"] button.rounded-full:last-child:not(:disabled) {
  background: #e4e5e7 !important;
  background-color: #e4e5e7 !important;
  color: #181a1c !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
  cursor: pointer !important;
  opacity: 1 !important;
}

[data-slot="input-area"] form button[type="submit"]:not(:disabled) svg,
[data-slot="input-area"] button[type="submit"]:not(:disabled) svg,
form:has(textarea) button[type="submit"]:not(:disabled) svg,
button:not(:disabled):has(svg.lucide-arrow-up) svg,
button:not(:disabled):has(svg.lucide-send) svg {
  color: #181a1c !important;
  stroke: #181a1c !important;
  stroke-width: 2.5px !important;
}

/* Hover on active button */
[data-slot="input-area"] form button[type="submit"]:not(:disabled):hover,
[data-slot="input-area"] button[type="submit"]:not(:disabled):hover,
form:has(textarea) button[type="submit"]:not(:disabled):hover,
button:not(:disabled):has(svg.lucide-arrow-up):hover,
button:not(:disabled):has(svg.lucide-send):hover {
  background: #ffffff !important;
  background-color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5) !important;
  transform: scale(1.05) !important;
}

/* Stop Streaming Button (when generating) */
button.stop-button,
.stop-button,
button:has(.stop-icon),
button:has(svg.lucide-square) {
  background: rgba(239, 68, 68, 0.15) !important;
  border: 1.5px solid #ef4444 !important;
  color: #ef4444 !important;
  border-radius: 9999px !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.3) !important;
}
button.stop-button svg,
.stop-button svg {
  color: #ef4444 !important;
  fill: #ef4444 !important;
}

/* Model Selector Pill inside chat input (Refined matte grey) */
form [data-slot="dropdown-menu-trigger"]:has(svg),
form button:has(svg.lucide-box),
form button:has(svg.lucide-cuboid) {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 9999px !important;
  color: #9da3a8 !important;
  font-size: 12px !important;
  padding: 4px 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.18s ease !important;
}

form [data-slot="dropdown-menu-trigger"]:has(svg):hover,
form button:has(svg.lucide-box):hover {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #f0f1f2 !important;
}

/* ChatGPT-style Attachment (+) Button */
.file-upload-button,
button.file-upload-button,
button.images-button,
button.camera-button,
button.audio-button,
button.video-button,
form button:has(svg.lucide-plus) {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 9999px !important;
  color: #9da3a8 !important;
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.18s ease !important;
}

.file-upload-button:hover,
button.file-upload-button:hover,
button.images-button:hover,
button.camera-button:hover,
button.audio-button:hover,
button.video-button:hover,
form button:has(svg.lucide-plus):hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #f1f5f9 !important;
}

/* Scroll-to-bottom floating pill button (matte dark grey) */
button:has(svg.lucide-arrow-down) {
  background: #202325 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #d0d4d8 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5) !important;
  border-radius: 9999px !important;
  transition: all 0.2s ease !important;
}
button:has(svg.lucide-arrow-down):hover {
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

/* Icon-only navigation rail */
:is(aside, [data-slot="sidebar"]) button:is(
  [aria-label="Neuer Chat"], [aria-label="New chat"],
  [aria-label="Suchen"], [aria-label="Search"],
  [aria-label="MCP-Server"], [aria-label="MCP servers"],
  [aria-label="Einstellungen"], [aria-label="Settings"]
) {
  background: var(--cm-surface-raised) !important;
  background-color: var(--cm-surface-raised) !important;
  border: 1px solid var(--cm-border) !important;
  color: var(--cm-muted) !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease !important;
}

:is(aside, [data-slot="sidebar"]) button:is(
  [aria-label="Neuer Chat"], [aria-label="New chat"],
  [aria-label="Suchen"], [aria-label="Search"],
  [aria-label="MCP-Server"], [aria-label="MCP servers"],
  [aria-label="Einstellungen"], [aria-label="Settings"]
):not(:disabled):hover {
  background: var(--cm-card-hover) !important;
  background-color: var(--cm-card-hover) !important;
  border-color: var(--cm-border-strong) !important;
  color: var(--cm-text) !important;
  box-shadow: none !important;
}

/* Destructive actions (e.g. Delete message) */
.actions button[aria-label*="Löschen"]:not(:disabled):hover,
.actions button[aria-label*="löschen"]:not(:disabled):hover,
.actions button[aria-label*="Delete"]:not(:disabled):hover,
.actions button[aria-label*="delete"]:not(:disabled):hover,
.chat-message button[aria-label*="Löschen"]:not(:disabled):hover,
.chat-message button[aria-label*="Delete"]:not(:disabled):hover,
button:has(svg.lucide-trash):not(:disabled):hover,
button:has(svg.lucide-trash-2):not(:disabled):hover {
  background-color: var(--cm-danger-soft) !important;
  border-color: var(--cm-danger) !important;
  color: var(--cm-danger) !important;
  box-shadow: none !important;
}

/* Disabled state */
button:disabled, [role="button"][aria-disabled="true"] {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

[data-slot="alert-dialog-action"], [data-slot="dialog-footer"] button:last-child,
[data-slot="sheet-footer"] button:last-child {
  background: #e4e5e7 !important; border-color: #e4e5e7 !important;
  color: #181a1c !important; box-shadow: none !important;
}
[data-slot="alert-dialog-action"].bg-destructive,
button.bg-destructive,
button[data-variant="destructive"] {
  background: var(--cm-danger) !important; border-color: var(--cm-danger) !important;
  color: #fff !important; box-shadow: none !important;
}
a { color: var(--cm-text) !important; text-decoration-color: var(--cm-border-strong) !important; }

/* Completely hide the floating + Agents button and weird popup in AI Chat */
#cm-agent-toggle {
  display: none !important;
}
#cm-agent-session-panel,
#cm-agent-session-panel[hidden] {
  display: none !important;
}

/* ==============================================================================
   Top Navigation Link to ComputeMesh Agent Workspace
   ============================================================================== */
.cm-nav-agent-btn {
  position: fixed !important;
  top: 14px !important;
  right: 18px !important;
  z-index: 1000 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: rgba(24, 26, 28, 0.88) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #f0f1f2 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  border-radius: 9999px !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important;
  transition: all 0.15s ease-in-out !important;
  cursor: pointer !important;
  line-height: 1 !important;
}

.cm-nav-agent-btn:hover {
  background: #25282c !important;
  border-color: rgba(0, 229, 255, 0.5) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 0 10px rgba(0, 229, 255, 0.15) !important;
  transform: translateY(-1px) !important;
}

@media (max-width: 640px) {
  .cm-nav-agent-btn {
    top: 10px !important;
    right: 12px !important;
    padding: 5px 11px !important;
    font-size: 11px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}