/* ============================================
   Neura UI v1.2 — Premium Chat Interface
   Fixes: search padding, new-chat ring, mobile
   floating, Safari safe-area, icon contrast,
   welcome 2-line, mobile chat delete
   ============================================ */

/* ---- Floating Input Panel (ChatGPT-style) ---- */
div[class*="rounded-t-3xl"][class*="border"][class*="flex-grow"] {
  border-radius: 24px !important;
  box-shadow:
    0 0 0 1px rgba(167, 139, 250, 0.08),
    0 4px 24px rgba(0, 0, 0, 0.10),
    0 1px 4px rgba(0, 0, 0, 0.05);
  border-color: rgba(167, 139, 250, 0.12) !important;
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
  margin-bottom: 4px;
}

.dark div[class*="rounded-t-3xl"][class*="border"][class*="flex-grow"] {
  box-shadow:
    0 0 0 1px rgba(167, 139, 250, 0.15),
    0 4px 32px rgba(0, 0, 0, 0.30),
    0 1px 4px rgba(0, 0, 0, 0.12);
  border-color: rgba(167, 139, 250, 0.18) !important;
}

div[class*="rounded-t-3xl"][class*="border"][class*="flex-grow"]:focus-within {
  box-shadow:
    0 0 0 1.5px rgba(167, 139, 250, 0.3),
    0 8px 32px rgba(139, 92, 246, 0.10),
    0 2px 8px rgba(0, 0, 0, 0.06);
  border-color: rgba(167, 139, 250, 0.35) !important;
  transform: translateY(-1px);
}

.dark div[class*="rounded-t-3xl"][class*="border"][class*="flex-grow"]:focus-within {
  box-shadow:
    0 0 0 1.5px rgba(167, 139, 250, 0.4),
    0 8px 40px rgba(139, 92, 246, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.15);
  border-color: rgba(167, 139, 250, 0.45) !important;
}

/* Textarea */
textarea {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}

textarea::placeholder {
  color: rgba(156, 163, 175, 0.6) !important;
  font-weight: 400 !important;
}

/* ---- FIX #1: Search bar — more space between icon and text ---- */
/* Target the search container: has my-1, h-10, cursor-pointer, gap-3, px-3 */
[class*="my-1"][class*="h-10"][class*="cursor-pointer"][class*="gap-3"] {
  padding-left: 16px !important;
  gap: 10px !important;
}

/* Also the group/relative wrapper */
[class*="group"][class*="relative"][class*="my-1"][class*="flex"][class*="h-10"] {
  padding-left: 16px !important;
  gap: 10px !important;
}

/* When search input appears after click */
input[placeholder*="earch"] {
  padding-left: 36px !important;
  border-radius: 12px !important;
  transition: all 0.2s ease !important;
}

input[placeholder*="earch"]:focus {
  border-color: rgba(167, 139, 250, 0.4) !important;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.08) !important;
}

/* ---- FIX #2: New Chat button — remove purple ring/outline completely ---- */
a[aria-label*="New chat"],
a[aria-label*="New Chat"],
button[aria-label*="New chat"],
button[aria-label*="New Chat"] {
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-color: transparent !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
}

a[aria-label*="New chat"]:focus,
a[aria-label*="New Chat"]:focus,
a[aria-label*="New chat"]:focus-visible,
a[aria-label*="New Chat"]:focus-visible,
button[aria-label*="New chat"]:focus,
button[aria-label*="New Chat"]:focus,
button[aria-label*="New chat"]:focus-visible,
button[aria-label*="New Chat"]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-color: transparent !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
  border: none !important;
  background: transparent !important;
}

a[aria-label*="New chat"]:hover,
a[aria-label*="New Chat"]:hover,
button[aria-label*="New chat"]:hover,
button[aria-label*="New Chat"]:hover {
  background: rgba(167, 139, 250, 0.1) !important;
}

/* Also remove ring from ALL sidebar header buttons */
[class*="ring-offset-background"][class*="focus-visible"] {
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-color: transparent !important;
}


/* ---- FIX #5: Toolbar icons — muted bg, bright icons ---- */
/* Use !important to override branding.js global styles */
button[aria-label="Attach File Options"],
button[aria-label="Tools Options"] {
  border-radius: 50% !important;
  transition: all 0.15s ease !important;
  background: rgba(99, 102, 241, 0.18) !important;
}

button[aria-label="Attach File Options"] svg,
button[aria-label="Tools Options"] svg {
  color: rgba(255, 255, 255, 0.9) !important;
}

html:not(.dark) button[aria-label="Attach File Options"],
html:not(.dark) button[aria-label="Tools Options"] {
  background: rgba(99, 102, 241, 0.22) !important;
}

button[aria-label="Attach File Options"]:hover,
button[aria-label="Tools Options"]:hover {
  background: rgba(99, 102, 241, 0.3) !important;
  transform: scale(1.08);
}

/* Microphone */
button[aria-label="Use microphone"] {
  border-radius: 50% !important;
  transition: all 0.15s ease !important;
  background: rgba(139, 92, 246, 0.15) !important;
}

button[aria-label="Use microphone"] svg {
  color: rgba(255, 255, 255, 0.88) !important;
}

html:not(.dark) button[aria-label="Use microphone"] {
  background: rgba(139, 92, 246, 0.2) !important;
}

button[aria-label="Use microphone"]:hover {
  background: rgba(139, 92, 246, 0.28) !important;
  transform: scale(1.08);
}

/* Mic recording pulse */
@keyframes neura-mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.3); }
  50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}

button[aria-label="Use microphone"][class*="text-red"],
button[aria-label="Use microphone"][style*="color: red"] {
  background: rgba(239, 68, 68, 0.15) !important;
  animation: neura-mic-pulse 1.5s ease-in-out infinite;
}

/* ---- Send Button ---- */
button[aria-label="Send message"] {
  background: linear-gradient(135deg, #a78bfa 0%, #818cf8 100%) !important;
  border: none !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3) !important;
}

button[aria-label="Send message"]:hover {
  background: linear-gradient(135deg, #9f5ff0 0%, #6366f1 100%) !important;
  transform: scale(1.06);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4) !important;
}

button[aria-label="Send message"]:active { transform: scale(0.95); }

button[aria-label="Send message"]:disabled {
  background: rgba(167, 139, 250, 0.2) !important;
  box-shadow: none !important;
  opacity: 0.5;
}

/* Stop generating */
button[aria-label="Stop generating"] {
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1.5px solid rgba(239, 68, 68, 0.3) !important;
  border-radius: 50% !important;
  transition: all 0.2s ease !important;
}

/* ---- Message Animations ---- */
@keyframes neura-msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

[data-message-id] { animation: neura-msg-in 0.3s ease-out; }
.agent-turn { animation: neura-msg-in 0.35s ease-out; }

/* ---- Sidebar ---- */
nav a[href*="/c/"] {
  border-radius: 10px !important;
  margin: 1px 6px !important;
  transition: all 0.15s ease !important;
}

nav a[href*="/c/"]:hover {
  background: rgba(167, 139, 250, 0.08) !important;
}

nav a[href*="/c/"][class*="bg-surface-active"],
nav a[href*="/c/"].bg-surface-active {
  background: rgba(167, 139, 250, 0.12) !important;
  border-left: 2px solid #a78bfa;
}

/* ---- FIX #7: Mobile chat delete — show 3-dot menu on touch ---- */
/* On mobile, make the ... menu always accessible via tap */
@media (hover: none) and (pointer: coarse) {
  /* Show action buttons on conversation items */
  nav a[href*="/c/"] [class*="absolute"][class*="right"] {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Make menu dots bigger for touch */
  nav a[href*="/c/"] button[class*="icon"] {
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 6px !important;
  }
}

/* ---- Custom Scrollbar ---- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(167, 139, 250, 0.15);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(167, 139, 250, 0.3); }

/* ---- Dropdown Menus ---- */
@keyframes neura-dropdown-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

[role="menu"], [role="listbox"] {
  border-radius: 14px !important;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(167, 139, 250, 0.08) !important;
  animation: neura-dropdown-in 0.15s ease-out;
}

[role="menuitem"], [role="option"] {
  border-radius: 8px !important;
  margin: 2px 4px !important;
  transition: background 0.12s ease !important;
}

[role="menuitem"]:hover, [role="option"]:hover {
  background: rgba(167, 139, 250, 0.1) !important;
}

/* ---- Temp Chat, Bookmarks ---- */
button[aria-label="Temporary Chat"] {
  border-radius: 10px !important;
  transition: all 0.15s ease !important;
}

button[aria-label="Temporary Chat"]:hover { background: rgba(167, 139, 250, 0.1) !important; }
button[aria-label="Bookmarks"]:hover svg { color: #a78bfa !important; }

/* ---- Code, Markdown ---- */
pre { border-radius: 12px !important; border: 1px solid rgba(167, 139, 250, 0.1) !important; }
pre code { font-size: 13px !important; line-height: 1.6 !important; }
[class*="markdown"] { line-height: 1.7 !important; }
[class*="markdown"] p { margin-bottom: 0.8em !important; }

/* ---- Footer ---- */
footer, [class*="footer"] {
  font-size: 11px !important;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}
footer:hover, [class*="footer"]:hover { opacity: 1; }

/* ---- Right Panel ---- */
[class*="side-panel"] button, button[class*="group/button"] {
  border-radius: 8px !important;
  transition: all 0.15s ease !important;
}

/* ---- Loading ---- */
@keyframes neura-skeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

[class*="skeleton"], [class*="animate-pulse"] {
  background: linear-gradient(90deg, rgba(167,139,250,0.05), rgba(167,139,250,0.12), rgba(167,139,250,0.05)) !important;
  background-size: 200% 100%;
  animation: neura-skeleton 1.5s ease-in-out infinite !important;
  border-radius: 8px !important;
}

[role="tooltip"] { border-radius: 8px !important; font-size: 12px !important; }

/* Page Transition */
#root > div { animation: neura-page-in 0.25s ease-out; }
@keyframes neura-page-in { from { opacity: 0.85; } to { opacity: 1; } }

/* ---- Mobile Sidebar Overlay — darker backdrop ---- */
@media (max-width: 768px) {
  /* The backdrop overlay when sidebar opens */
  div[class*="fixed"][class*="inset-0"][class*="transition-opacity"] {
    background-color: rgba(0, 0, 0, 0.65) !important;
  }

  .dark div[class*="fixed"][class*="inset-0"][class*="transition-opacity"] {
    background-color: rgba(0, 0, 0, 0.75) !important;
  }
}

/* ---- Sidebar border & shadow when open ---- */
[class*="bg-token-sidebar-surface-primary"] {
  border-right: 1px solid rgba(167, 139, 250, 0.12) !important;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12) !important;
}

.dark [class*="bg-token-sidebar-surface-primary"] {
  border-right: 1px solid rgba(167, 139, 250, 0.15) !important;
  box-shadow: 4px 0 32px rgba(0, 0, 0, 0.4) !important;
}

/* ---- Welcome text & logo ---- */
.neura-welcome-text {
  text-align: center;
}

/* Welcome logo — bigger on mobile */
.neura-welcome-logo {
  display: block;
  margin: 0 auto;
}

@media (max-width: 640px) {
  .neura-welcome-logo {
    width: 96px !important;
    height: 96px !important;
    margin-bottom: 16px !important;
    margin-top: -20px !important;
  }

  .neura-welcome-text {
    max-width: 260px !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ---- Theme toggle button — position varies by device ---- */
@media (max-width: 640px) {
  /* On mobile: next to New Chat button, minimalist style */
  #neura-theme-toggle {
    top: 10px !important;
    right: 88px !important;
    bottom: auto !important;
    left: auto !important;
    width: 32px !important;
    height: 32px !important;
    border: none !important;
    background: transparent !important;
  }
}

@media (min-width: 641px) {
  /* On desktop: bottom-left corner */
  #neura-theme-toggle {
    bottom: 12px !important;
    left: 12px !important;
  }
}

/* ---- FIX #3 + #4: Mobile — floating input + Safari safe area ---- */
@media (max-width: 768px) {
  /* Floating input on mobile — ALL corners rounded, not just top */
  div[class*="rounded-t-3xl"][class*="border"][class*="flex-grow"],
  div[class*="rounded-3xl"][class*="border"][class*="flex-grow"] {
    border-radius: 22px !important; /* ALL corners, not just top */
    margin: 0 10px 16px 10px !important;
    padding-bottom: 8px !important;
    box-shadow:
      0 0 0 1px rgba(167, 139, 250, 0.12),
      0 4px 24px rgba(0, 0, 0, 0.18) !important;
  }

  .dark div[class*="rounded-t-3xl"][class*="border"][class*="flex-grow"],
  .dark div[class*="rounded-3xl"][class*="border"][class*="flex-grow"] {
    box-shadow:
      0 0 0 1px rgba(167, 139, 250, 0.18),
      0 4px 28px rgba(0, 0, 0, 0.35) !important;
  }

  /* The form wrapper — add bottom padding for safe area */
  form[class*="mx-auto"] {
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* The entire bottom section container */
  div[class*="flex-col"][class*="items-center"][class*="justify-end"],
  div[class*="justify-center"][class*="flex-col"][class*="flex-1"] {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  /* Remove black bar — ensure body matches theme */
  body, html {
    background-color: var(--main-surface-primary, #ffffff) !important;
  }

  .dark body, html.dark body,
  .dark html, html.dark {
    background-color: #0d0d0d !important;
  }

  /* The main content area — no contrasting background */
  div[class*="relative"][class*="flex"][class*="h-full"][class*="flex-1"][class*="flex-col"] {
    background: transparent !important;
  }

  /* Also ensure the flex container at bottom doesn't add dark bg */
  div[class*="md:flex-col"][class*="items-stretch"] {
    background: transparent !important;
    padding-bottom: 4px !important;
  }

  textarea { font-size: 16px !important; }

  button[aria-label="Send message"] {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }

  nav a[href*="/c/"] {
    margin: 1px 4px !important;
    padding: 10px 8px !important;
  }

  [data-message-id] { animation: none; }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
  div[class*="rounded-t-3xl"][class*="border"][class*="flex-grow"] {
    border-radius: 22px !important;
  }
}

/* ============================================
   LOGIN PAGE — Split-screen (Claude-style)
   Left: hero image, Right: login form
   ============================================ */

/* The login page wrapper — make it a two-column grid */
body.neura-login-page {
  overflow: hidden;
}

/* Left panel — injected via JS as #neura-login-hero */
#neura-login-hero {
  position: fixed;
  left: 0;
  top: 0;
  width: 50%;
  height: 100vh;
  background: url('./login-bg.png') center center / cover no-repeat;
  z-index: 50;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 48px;
}

#neura-login-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(15, 10, 30, 0.1) 0%,
    rgba(15, 10, 30, 0.6) 70%,
    rgba(15, 10, 30, 0.85) 100%
  );
  z-index: 1;
}

#neura-login-hero .hero-content {
  position: relative;
  z-index: 2;
  color: #fff;
}

#neura-login-hero .hero-title {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

#neura-login-hero .hero-subtitle {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
  max-width: 420px;
}

/* Right panel — push the existing form to the right half */
body.neura-login-page .relative.flex.min-h-screen {
  margin-left: 50% !important;
  width: 50% !important;
  min-height: 100vh;
}

/* Center the form vertically in right panel */
body.neura-login-page .w-authPageWidth {
  max-width: 400px !important;
}

/* Logo on login — make it bigger */
body.neura-login-page img[src*="logo"] {
  height: 48px !important;
  width: auto !important;
  margin-bottom: 8px !important;
}

/* "Sign in" header — custom style */
body.neura-login-page h1 {
  font-size: 1.75rem !important;
  font-weight: 600 !important;
  color: inherit !important;
}

/* Submit button — purple gradient */
body.neura-login-page button[type="submit"] {
  background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 14px !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  padding: 12px 24px !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 2px 12px rgba(124, 58, 237, 0.25) !important;
}

body.neura-login-page button[type="submit"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 24px rgba(124, 58, 237, 0.4) !important;
}

/* Input fields */
body.neura-login-page input[name="email"],
body.neura-login-page input[name="password"],
body.neura-login-page input[type="email"],
body.neura-login-page input[type="password"] {
  border-radius: 12px !important;
  padding: 14px 16px !important;
  font-size: 0.95rem !important;
  transition: all 0.2s ease !important;
}

body.neura-login-page input:focus {
  border-color: rgba(124, 58, 237, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1) !important;
}

/* Non-login pages — keep existing styles */
button[type="submit"] {
  border-radius: 16px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

button[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.3) !important;
}

input[name="email"], input[name="password"],
input[type="email"], input[type="password"] {
  border-radius: 12px !important;
  transition: border-color 0.2s ease !important;
}

input[name="email"]:focus, input[name="password"]:focus {
  border-color: rgba(167, 139, 250, 0.4) !important;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.08) !important;
}

/* ---- Mobile: stack vertically ---- */
@media (max-width: 768px) {
  #neura-login-hero {
    position: relative;
    width: 100%;
    height: 35vh;
    padding: 24px;
  }

  #neura-login-hero .hero-title {
    font-size: 1.5rem;
  }

  #neura-login-hero .hero-subtitle {
    font-size: 0.9rem;
  }

  body.neura-login-page .relative.flex.min-h-screen {
    margin-left: 0 !important;
    width: 100% !important;
    min-height: 65vh;
  }
}

/* ---- Global: Remove all focus rings (Tailwind ring-*) ---- */
*:focus-visible {
  --tw-ring-color: transparent !important;
  --tw-ring-shadow: none !important;
}

/* ============================================
   Neura Model Selector — Premium Styling
   ============================================ */

/* ---- Endpoint/Model selector button (header area) ---- */
button[id*="endpoint"], button[data-testid*="endpoint"],
button[id*="model-selector"], button[data-testid*="model"],
[class*="endpoint-select"], [class*="model-select"] {
  border-radius: 12px !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  transition: all 0.2s ease !important;
  border: 1px solid rgba(167, 139, 250, 0.12) !important;
  background: rgba(167, 139, 250, 0.04) !important;
  backdrop-filter: blur(8px);
}

.dark button[id*="endpoint"], .dark button[data-testid*="endpoint"],
.dark button[id*="model-selector"], .dark button[data-testid*="model"],
.dark [class*="endpoint-select"], .dark [class*="model-select"] {
  background: rgba(167, 139, 250, 0.08) !important;
  border-color: rgba(167, 139, 250, 0.18) !important;
}

button[id*="endpoint"]:hover, button[data-testid*="endpoint"]:hover,
button[id*="model-selector"]:hover, button[data-testid*="model"]:hover,
[class*="endpoint-select"]:hover, [class*="model-select"]:hover {
  background: rgba(167, 139, 250, 0.12) !important;
  border-color: rgba(167, 139, 250, 0.3) !important;
  transform: translateY(-1px);
}

/* ---- Model dropdown popup ---- */
[data-radix-popper-content-wrapper] [role="listbox"],
[data-radix-popper-content-wrapper] [role="menu"] {
  border-radius: 16px !important;
  border: 1px solid rgba(167, 139, 250, 0.15) !important;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(167, 139, 250, 0.08) !important;
  backdrop-filter: blur(20px);
  animation: neura-dropdown-in 0.15s ease-out;
  overflow: hidden;
  padding: 4px !important;
}

.dark [data-radix-popper-content-wrapper] [role="listbox"],
.dark [data-radix-popper-content-wrapper] [role="menu"] {
  background: rgba(20, 20, 30, 0.95) !important;
  border-color: rgba(167, 139, 250, 0.2) !important;
  box-shadow:
    0 12px 48px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(167, 139, 250, 0.12) !important;
}

/* ---- Model option items ---- */
[data-radix-popper-content-wrapper] [role="option"],
[data-radix-popper-content-wrapper] [role="menuitem"] {
  border-radius: 10px !important;
  margin: 2px !important;
  padding: 8px 12px !important;
  transition: all 0.12s ease !important;
  font-size: 13px !important;
}

[data-radix-popper-content-wrapper] [role="option"]:hover,
[data-radix-popper-content-wrapper] [role="menuitem"]:hover {
  background: rgba(167, 139, 250, 0.1) !important;
}

[data-radix-popper-content-wrapper] [role="option"][data-state="checked"],
[data-radix-popper-content-wrapper] [role="option"][aria-selected="true"] {
  background: rgba(167, 139, 250, 0.15) !important;
  border-left: 2px solid #a78bfa;
}

/* ---- Endpoint icons ---- */
[class*="endpoint"] img[src*="icon"],
[class*="model"] img[src*="icon"] {
  width: 20px !important;
  height: 20px !important;
  border-radius: 6px !important;
}

/* ---- Agent badge (injected via JS) ---- */
.neura-agent-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(167, 139, 250, 0.15);
  color: #a78bfa;
  margin-left: 6px;
  line-height: 16px;
}

.neura-agent-badge::before {
  content: '⚡';
  font-size: 8px;
}

.dark .neura-agent-badge {
  background: rgba(167, 139, 250, 0.2);
  color: #c4b5fd;
}

/* ---- Nano Banana settings (custom panel) ---- */
.neura-image-settings {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(167, 139, 250, 0.04);
  border: 1px solid rgba(167, 139, 250, 0.1);
}

.neura-image-model-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 13px;
}

.neura-image-model-option:hover {
  background: rgba(167, 139, 250, 0.08);
}

.neura-image-model-option.active {
  background: rgba(167, 139, 250, 0.12);
  border-left: 2px solid #a78bfa;
}

.neura-image-model-price {
  font-size: 11px;
  color: rgba(156, 163, 175, 0.7);
  font-family: monospace;
}