/* Hide all avatars and icons in chat messages */
.message-avatar,
.step-avatar,
[class*="avatar"],
[class*="Avatar"],
.MuiAvatar-root,
img[alt*="avatar"],
img[alt*="Avatar"],
svg[class*="avatar"],
div[class*="avatar"] {
  display: none !important;
}

/* Adjust message container spacing when avatars are hidden */
.message-container,
[class*="message-container"],
[class*="MessageContainer"] {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Hide any icon buttons and SVGs in chat */
.chat-message button svg,
.message-buttons svg,
[class*="message"] svg,
[class*="Message"] svg {
  display: none !important;
}

/* Remove avatar space from all message types */
.message-content,
[class*="message-content"],
[class*="MessageContent"] {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Hide step/tool icons */
.step svg,
[class*="step"] svg,
[class*="Step"] svg {
  display: none !important;
}

/* Ensure no avatar containers take up space */
[role="img"],
img[role="img"] {
  display: none !important;
}

/* FORCE SHARP CORNERS ON EVERYTHING */
* {
  border-radius: 0 !important;
}

/* Force sharp corners on all common elements */
div, span, button, input, textarea, select, 
section, article, aside, header, footer, nav, main, form,
ul, ol, li, p, h1, h2, h3, h4, h5, h6,
.card, .message, .input, .button, .container,
[class*="message"], [class*="Message"],
[class*="input"], [class*="Input"],
[class*="button"], [class*="Button"],
[class*="card"], [class*="Card"] {
  border-radius: 0 !important;
}

/* Override all Tailwind rounded classes */
.rounded, .rounded-sm, .rounded-md, .rounded-lg, 
.rounded-xl, .rounded-2xl, .rounded-3xl, .rounded-full,
[class*="rounded"] {
  border-radius: 0 !important;
}

/* Hide the Send button */
button#chat-submit,
button[type="submit"],
button[aria-label*="send" i],
button[aria-label*="Send" i],
[class*="send" i] button,
[class*="Send" i] button,
.send-button,
#send-button {
  display: none !important;
}

/* Make only user message bubbles transparent, not input area */
.bg-accent.max-w-\[70\%\] {
  background-color: transparent !important;
}

/* Hide the "LLMs can make mistakes" watermark and "Built with Chainlit" footer */
.watermark,
footer,
[class*="watermark"],
[class*="Watermark"],
[class*="footer"],
[class*="Footer"],
[class*="powered"],
[class*="Powered"],
[class*="built"],
[class*="Built"] {
  display: none !important;
}

/* Additional selectors for Chainlit branding */
a[href*="chainlit"],
a[href*="Chainlit"],
div:has(> a[href*="chainlit"]),
div:has(> a[href*="Chainlit"]) {
  display: none !important;
}

/* AGGRESSIVE LOGO STYLING FOR AUTH PAGE */
/* Remove pseudo-element background watermarks/images from common containers.
   Also covers auth/login-specific pseudo-elements. */
body::before,
body::after,
#root::before,
#root::after,
main::before,
main::after,
[class*="auth"]::before,
[class*="auth"]::after,
[class*="login"]::before,
[class*="login"]::after {
  display: none !important;
  content: none !important;
  background-image: none !important;
}

/* Remove any background images from body and containers */
body,
#root,
main,
[class*="auth"],
[class*="login"],
[class*="Auth"],
[class*="Login"] {
  background-image: none !important;
}

/* Make logo bigger and better styled on login/auth screen */
/* Target ALL images containing "logo" in src */
img[src*="logo"],
img[src*="Logo"],
img[alt="logo"],
img[alt*="Logo"] {
  max-width: 320px !important;
  min-width: 250px !important;
  width: 320px !important;
  height: auto !important;
  margin: 40px auto !important;
  display: block !important;
  padding: 30px !important;
  object-fit: contain !important;
}

/* Target first logo image more specifically */
body img[src*="logo"]:first-of-type,
#root img[src*="logo"]:first-of-type,
main img[src*="logo"]:first-of-type,
div img[src*="logo"]:first-of-type {
  max-width: 320px !important;
  min-width: 250px !important;
  width: 320px !important;
  margin: 40px auto !important;
  padding: 30px !important;
}

/* Center the logo container */
div:has(> img[src*="logo"]),
div:has(> img[alt*="logo"]) {
  text-align: center !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 30px !important;
  width: 100% !important;
}

/* Make main app header logo appropriately sized (NOT auth page) */
header img[alt="logo"],
header img[src*="logo"],
nav img[alt="logo"],
nav img[src*="logo"],
[role="banner"] img[src*="logo"] {
  max-width: 180px !important;
  width: 180px !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 10px !important;
  margin: 0 !important;
}

/* ULTRA AGGRESSIVE - Override Chainlit's built-in logo styling */
/* Using even more specific selectors with higher specificity */
html body img[src*="logo"],
html body img[src*="Logo"],
html body #root img[src*="logo"],
html body main img[src*="logo"] {
  max-width: 320px !important;
  min-width: 250px !important;
  width: 320px !important;
  height: auto !important;
  margin: 40px auto !important;
  display: block !important;
  padding: 30px !important;
  object-fit: contain !important;
}

/* Ensure logo container takes full width and centers */
html body div:has(> img[src*="logo"]),
html body #root div:has(> img[src*="logo"]) {
  text-align: center !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 30px !important;
  width: 100% !important;
}

/* Remove favicon watermark from right side of login screen.
   NOTE: These nth-child and MuiGrid selectors are coupled to the current
   Chainlit/MUI auth page DOM structure and may need updating on Chainlit upgrades. */
body > div > div:nth-child(2),
#root > div > div:nth-child(2),
main > div > div:nth-child(2),
body > div > div:nth-child(2)::before,
body > div > div:nth-child(2)::after,
#root > div > div:nth-child(2)::before,
#root > div > div:nth-child(2)::after,
[class*="MuiGrid-root"]:nth-child(2),
[class*="MuiGrid-root"]:last-child {
  background-image: none !important;
}