.watermark {
    display: none !important;
  }

/* Hide copy/feedback button containers until JavaScript marks them complete */
.ai-message div.-ml-1\.5.flex.items-center.flex-wrap:not(.chainlit-buttons-complete) {
  display: none !important;
}

.ai-message div.-ml-1\.5.flex.items-center.flex-wrap.chainlit-buttons-complete {
  display: flex !important;
}

div.flex.flex-col.gap-2.p-2.py-3 {
  position: relative; /* allow positioning of pseudo-element */
}

div.flex.flex-col.gap-2.p-2.py-3::before {
  content: '';
  display: block;
  width: 100px;
  height: 60px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin: 0 auto;
}

/* Light theme (default) */
div.flex.flex-col.gap-2.p-2.py-3::before {
  background-image: url('/public/logo_light.png');
}

/* Dark theme - when html has 'dark' class */
html.dark div.flex.flex-col.gap-2.p-2.py-3::before {
  background-image: url('/public/logo_dark.png');
}


#chat-profiles span div span {
  /* Basic ellipsis setup */
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* -------- HACKS TO REPOSITION CHAINLIT DIALOG CLOSE BUTTON (X) ----------- */
div[role="dialog"] button[aria-label="Close lightbox"] {
  position: relative !important;
  order: 9999 !important;
  place-self: start !important;
  top: 0 !important;
  right: 0 !important;
}
/* ------------------- */

/* Only enforce a fixed width on smaller screens */
@media (max-width: 600px) {
  #chat-profiles span div span {
    width: 7ch; /* enough for ~"Customer" */
  }

  div[role="dialog"] > button.absolute.right-4.top-4.rounded-sm.opacity-70.ring-offset-background.transition-opacity {
    margin-top: 40px;
  }

  div.absolute.top-1\/2.left-1\/2.-translate-x-1\/2.-translate-y-1\/2 {
    /* Your custom styles here */
    /* For example: */
    margin-top:50px;
  }
  #chat-profile-description {
    display: none;
  }

  #message-input-required-warning {
    display:none;
  }

  #command-Research {
    font-size: 0; /* Hides text */
  }

  #command-Research svg {
    font-size: 16px; /* Or any readable size you want for the icon */
  }

  /* Add margin to shareable link on mobile */
  .text-blue-600.hover\:text-blue-800.underline {
    margin-right: 120px;
  }
}

/* Larger screens can show the full text */
@media (min-width: 601px) {
  #chat-profiles span div span {
    width: auto;  /* or remove any fixed width */
  }
}


div.flex.flex-col.gap-2.mb-2.items-center div.prose p.leading-7.whitespace-pre-wrap.break-words {
  text-align: center;
}

div[data-radix-popper-content-wrapper] >
  div[data-side="top"][data-align="center"][data-state="instant-open"].bg-popover {
  display:none;
}
/*
:root {
  --readme-icon: url('/public/svg_icons/read-me-light.svg');
}

html.dark {
  --readme-icon: url('/public/svg_icons/read-me-dark.svg');
}

#readme-button span {
  background-image: var(--readme-icon);
  background-size: 26px;
  background-repeat: no-repeat;
  background-position: center;
  width: 18px;
  height: 18px;
  font-size: 0;
  display: inline-block;
} */

#readme-button {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}





/* Hide the .rounded-lg element only if the page DOES NOT have an <img> with alt="ChatGPT" */
body:not(:has(img[alt="Work-Safe LLM"])).rounded-lg.border.bg-card.text-card-foreground.shadow-sm.relative {
  display: none;
}

.selector_dropdown {
  border:1px solid rgb(59 130 246 / .5) !important;
  width:100%;
  border-radius:5px;
}


/* #delete-thread {
  display: none !important;
} */

#series-select{
  color:black;
}

#material-select{
  color:black;
}

#color-select{
  color:black;
}

#type-select{
  color:black;
}

#style-select{
  color:black;
}

button[role="combobox"]#Model:focus {
  box-shadow: none !important;
}

/* Ensure the container allows wrapping */
.flex.flex-col.gap-4.items-end .flex.items-center.gap-2 {
  flex-wrap: wrap !important;
}

/* Stack vertically and align each attachment to the right */
.flex.flex-col.gap-4.items-end .flex.items-center.gap-2 > div {
  align-self: flex-end !important;
  margin-bottom: 8px;
}


:root {
  --icon-color: rgb(92, 92, 92);     /* Light mode icon color */
  --icon-hover: rgb(60, 60, 60);     /* Light mode hover color - slightly darker */
}

html.dark {
  --icon-color: rgb(181, 181, 181);  /* Dark mode icon color */
  --icon-hover: rgb(200, 200, 200);  /* Dark mode hover color - slightly lighter */
}

.inline-flex button svg {
  stroke: var(--icon-color);
  transition: stroke 0.2s ease-in-out;
}

.inline-flex button:hover svg {
  stroke: var(--icon-hover);
}

/* body:has(img[alt="VeyR (Multi-Expert)"]) button[data-state="closed"]:has(svg path[d="M9.5 4C8.67157 4 8 4.67157 8 5.5V18.5C8 19.3284 8.67157 20 9.5 20C10.3284 20 11 19.3284 11 18.5V5.5C11 4.67157 10.3284 4 9.5 4Z"]) {
  display: none;
} */
/* button[data-state="closed"]:has(svg path[d="M9.5 4C8.67157 4 8 4.67157 8 5.5V18.5C8 19.3284 8.67157 20 9.5 20C10.3284 20 11 19.3284 11 18.5V5.5C11 4.67157 10.3284 4 9.5 4Z"]) {
  display: none;
} */

.welcome-screen [role="article"] {
  text-align: center;
}


button[class*="close"],
button[aria-label="Close"],
button[class*="lucide-x"],
.close-button,
button[class*="right-4"][class*="top-4"] {
  /* Remove the blue circle background on hover */
  background-color: transparent !important;
  /* Ensure no background color is applied on any state */
  &:hover, &:focus, &:active {
    background-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
  }
}


/* Hide Chainlit's default close button */
#side-view-title {
  display: none !important;
}




/* ========================================
INLINED IMAGES
======================================== */
/* Remove the background color that creates the visual “border” effect */
.bg-muted {
  background-color: transparent !important;
}

/* Remove any rounding if not desired */
/*
.rounded-md {
  border-radius: 0 !important;
}*/

/* Remove the forced aspect ratio behavior */
[data-radix-aspect-ratio-wrapper] {
  /* Remove the padding that forces a fixed aspect ratio */
  padding-bottom: 0 !important;
  height: auto !important;
  position: static !important;
}

/* Adjust the inner container that is positioned absolutely */
[data-radix-aspect-ratio-wrapper] > div {
  position: static !important;
  inset: unset !important;
  overflow: visible !important;
  background: transparent !important;
}

/* Ensure the image fills the container without extra borders */
[data-radix-aspect-ratio-wrapper] img {
  width: 100%;
  height: auto;
  object-fit: contain; /* Use 'cover' if you prefer the image to fill and crop */
  cursor: pointer; /* Preserve the pointer if needed */
}

/* (Optional) Remove max-width restrictions if the outer container is limiting size */
/*
.sm\:max-w-sm,
.md\:max-w-md {
  max-width: none !important;
}

*/




#header {
  gap:0 !important;
}




.group {
  /* Stack elements vertically, aligning everything to the right */
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
}

/* Chat bubble styling */
.group > .bg-accent {
  order: 1;
  margin-left: auto !important;
  text-align: left; /* Adjust as needed (left or right) */
}

/* Edit button now always visible and placed below the bubble */
.edit-message {
  order: 2;
  align-self: flex-end;
  margin-left: 0 !important;
  margin-top: 4px;  /* Adjust spacing as needed */
  visibility: visible !important;
}



/* Common to all scrollbars */
::-webkit-scrollbar {
  width: 12px;
}

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

/* Thumb (the part that moves) */
::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb); /* use CSS variables for theme */
  border-radius: 6px;
}

/* Optional: Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

/* Light theme overrides */
html.light {
  --scrollbar-thumb: #ccc;
}

/* Dark theme overrides */
html.dark {
  --scrollbar-thumb: #555;
}



.truncate-x {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 600px;  /*Change this to your desired max width */
  display: block;   /* or inline-block, depending on your needs */
}














.dropdown {
  position: relative;
  font-family: sans-serif;
  width:100%;
  margin-bottom:-20px;
}

.dropdown-toggle {
  cursor: pointer;
  border-radius:5px;
  border:1px solid gray;
  padding-left:5px;
  padding-right:5px;
  background-color: hsl(var(--accent));
  display:inline-flex;
  margin-top:5px;
}

.dropdown-menu {
  display: none;
  position: absolute;
  background-color: hsl(var(--sidebar-background));
  border: 1px solid #ccc;
  border-radius:5px;
  padding: 10px;
  margin-top: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  z-index: 1;
  min-width: 300px;
}

.dropdown-close {
  position: absolute;
  top: 6px;
  right: 6px;
  cursor: pointer;
  line-height: 1;
}

/* ---- Outlook email pills ---- */
:root {
  --email-pill-bg: rgba(37, 99, 235, 0.10);
  --email-pill-bg-hover: rgba(37, 99, 235, 0.18);
  --email-pill-border: rgba(37, 99, 235, 0.30);
  --email-pill-text: rgb(29, 78, 191);
}

html.dark {
  --email-pill-bg: rgba(96, 165, 250, 0.12);
  --email-pill-bg-hover: rgba(96, 165, 250, 0.22);
  --email-pill-border: rgba(96, 165, 250, 0.35);
  --email-pill-text: rgb(147, 197, 253);
}

a[href^="https://outlook.office365.com/"],
a[href^="https://outlook.office.com/"],
a.outlook-email-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px 2px 7px;
  border-radius: 999px;
  background: var(--email-pill-bg);
  border: 1px solid var(--email-pill-border);
  color: var(--email-pill-text) !important;
  font-size: 0.875em;
  font-weight: 500;
  text-decoration: none !important;
  white-space: nowrap;
  vertical-align: middle;
}

/* Only enable hover transition once JS has finished processing the element,
   preventing a fade-in flash on every React re-render during streaming. */
a[data-email-pill] {
  transition: background 0.15s ease;
}

a[href^="https://outlook.office365.com/"]:hover,
a[href^="https://outlook.office.com/"]:hover,
a.outlook-email-pill:hover {
  background: var(--email-pill-bg-hover);
  text-decoration: none !important;
}

a[href^="https://outlook.office365.com/"] svg,
a[href^="https://outlook.office.com/"] svg,
a.outlook-email-pill svg {
  flex-shrink: 0;
  stroke: var(--email-pill-text);
}

.dropdown-close svg {
  stroke: var(--icon-color);
  transition: stroke 0.2s ease-in-out;
}

.dropdown-close:hover svg {
  stroke: var(--icon-hover);
}

.dropdown-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}


.dropdown.show .dropdown-menu {
  display: block;
}


/* File selector sidebar minimum width - apply to the panel container */
div[data-panel]:has(#file-selector-sidebar) {
  min-width: 300px !important;
  flex-basis: 300px !important;
}




/* Popout for text areas that could need to handle loads of text */
.popout-textarea {
  width: 100%;
  height: 100px;
  padding: 1em;
  padding-right: 50px;
  box-sizing: border-box;
  transition: all 0.3s ease;
  resize: vertical;
  font-size: 16px;

  box-sizing: border-box;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.popout-icon {
  position: absolute;
  right: 0.2em;
  top: 0.2em;
  cursor: pointer;
  user-select: none;
  font-size: 1.2em;
  color: #666;
  padding: 0 0.2em;
  line-height: 1;
}

.popout-fullscreen {
  position: fixed !important;
  top: 5%;
  left: 5%;
  width: 90% !important;
  height: 90% !important;
  z-index: 1000;
  background: white;
  border: 2px solid #888;
  border-radius: 6px;
  padding: 1em;
  resize: none;
  box-shadow: 0 0 20px rgba(0,0,0,0.2);
  font-size: 16px !important;
}

.input-wrapper {
  position: relative;
  display: inline-block;
  height:100% !important;
}

.restricted-source-link {
  color: #0377BA;
  text-decoration: none;
}
.restricted-source-link:hover {
  text-decoration: underline;
}

/*
 * Hides Chainlit's built in "share thread" option since
 * we have our own "share" mechanism elsewhere.
*/
#share-thread {
  display: none !important;
}

/* Custom tooltip – base (hidden) state.
   No transition here so hide is instant (avoids interfering with adjacent tooltips). */
.custom-tooltip {
  position: fixed;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transform: scale(.95) translateY(4px);
  white-space: nowrap;
}

/* Custom tooltip – visible state.
   Transition only on the .visible class gives a bubble-in on show, instant hide on remove. */
.custom-tooltip.visible {
  visibility: visible;
  opacity: 1;
  transform: scale(1) translateY(0);
  transition: opacity 150ms cubic-bezier(0, 0, .2, 1),
              transform 150ms cubic-bezier(0, 0, .2, 1);
}

/* ── Model Preset Picker ────────────────────────────────────────────────── */

/* Force the picker wrapper to the left of all other header icons */
#model-preset-wrapper {
  order: -1;
  margin-right: 14px;
}

/* Trigger button label – truncate on small screens */
#model-preset-picker .model-preset-label {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
  color: hsl(var(--foreground));
  font-size: 1rem;
  font-weight: 500;
}

#model-preset-picker svg {
  color: hsl(var(--foreground));
  opacity: 1;
}

@media (max-width: 600px) {
  #model-preset-picker .model-preset-label {
    max-width: 8ch;
  }
}

/* Dropdown panel */
.model-preset-dropdown {
  animation: model-preset-fade-in 150ms cubic-bezier(0, 0, .2, 1);
}

@keyframes model-preset-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Individual option */
.model-preset-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 100ms ease;
}

.model-preset-option:hover {
  background-color: hsl(var(--accent));
}

.model-preset-option--selected {
  background-color: hsl(var(--accent));
}

.model-preset-option-name {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25;
}

.model-preset-option-desc {
  font-size: 0.75rem;
  line-height: 1.35;
  opacity: 0.7;
}

/* Star button icon colours — re-use same variables as expert favourite */
#model-preset-star svg {
  stroke: var(--icon-color, rgb(92, 92, 92));
  transition: stroke 0.2s ease-in-out;
}
#model-preset-star:hover svg {
  stroke: var(--icon-hover, rgb(60, 60, 60));
}
html.dark #model-preset-star svg {
  stroke: var(--icon-color, rgb(181, 181, 181));
}
html.dark #model-preset-star:hover svg {
  stroke: var(--icon-hover, rgb(200, 200, 200));
}