/* Hide chat composer for manual search profile (toggled via body.form-only from the custom element) */
body.form-only .message-input-container,
body.form-only [data-testid="message-input"],
body.form-only [data-testid="composer"],
body.form-only textarea,
body.form-only [role="textbox"] {
  display: none !important;
}

/* Expand content to use available space when composer is hidden */
body.form-only main, body.form-only [data-testid="chat-main-area"] {
  padding-bottom: 0 !important;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--muted-foreground) / 0.4) transparent;
}

/* Chrome/Edge/Safari */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: hsl(var(--muted-foreground) / 0.4);
  border-radius: 8px;
  border: 2px solid transparent; /* inset effect */
  background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: hsl(var(--muted-foreground) / 0.6);
}

/* Optional: slightly visible track in light theme */
html[data-theme="light"] *::-webkit-scrollbar-track {
  background: hsl(0 0% 95%);
}

/* Optional: hide horizontal scrollbars globally */
/* * { overflow-x: hidden; } */

/* Hide Chainlit sidebar title to free space on the canvas */
#side-view-title {
  display: none !important;
}

/* Remove extra margin after hiding the title, but preserve padding */
#side-view-title + * {
  margin-top: 0 !important;
}


/* Make the app avatar square (override circular masks) */
img[alt="Avatar for Survey Creation"],
img[src$="/avatar.png"] {
  border-radius: 0 !important;
  -webkit-mask: none !important;
  mask: none !important;
  clip-path: none !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* If a rounded wrapper is clipping this image, neutralize it */
*:has(> img[alt="Avatar for Survey Creation"]),
*:has(> img[src$="/avatar.png"]) {
  border-radius: 0 !important;
  overflow: visible !important;
  -webkit-mask: none !important;
  mask: none !important;
  clip-path: none !important;
}

/* ===== BRAND COLOR OVERRIDES ===== */
/* Ensure send button and other primary buttons use brand colors */
button[data-testid="send-button"],
button[type="submit"],
.cl-send-button {
  background-color: hsl(167 69% 21%) !important;
  color: hsl(0 0% 100%) !important;
}

button[data-testid="send-button"]:hover,
button[type="submit"]:hover,
.cl-send-button:hover {
  background-color: hsl(167 69% 28%) !important;
}

/* Focus ring styling */
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline-color: hsl(167 69% 21%) !important;
}

/* Links */
a {
  color: hsl(167 69% 21%);
}

a:hover {
  color: hsl(78 73% 44%);
}

/* Selection highlight */
::selection {
  background-color: hsl(78 73% 44% / 0.3);
}

/* Chat profile selector / dropdown buttons */
[data-testid="chat-profile-selector"] button,
.chat-profile-button {
  border-color: hsl(167 69% 21%) !important;
}

[data-testid="chat-profile-selector"] button:hover,
.chat-profile-button:hover {
  background-color: hsl(167 69% 21% / 0.1) !important;
}


  /* Make the app avatar square (override circular masks) */
  img[alt="Avatar for Desk Research Chat"],
  img[src$="/avatar.png"] {
    border-radius: 0 !important;
    -webkit-mask: none !important;
    mask: none !important;
    clip-path: none !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }
  
  /* If a rounded wrapper is clipping this image, neutralize it */
  *:has(> img[alt="Avatar for Desk Research Chat"]),
  *:has(> img[src$="/avatar.png"]) {
    border-radius: 0 !important;
    overflow: visible !important;
    -webkit-mask: none !important;
    mask: none !important;
    clip-path: none !important;
  }

/* ===== MESSAGE COMPOSER — tone down in light mode ===== */
html[data-theme="light"] #message-composer,
html[data-theme="light"] #message-composer.bg-accent {
  background-color: hsl(0 0% 96%) !important;
}

/* ===== SIDEBAR — top padding so content doesn't sit flush ===== */
#side-view [class*="element"],
#side-view > div > div {
  padding-top: 16px !important;
}