:root {
  --background: 48 20% 98%;
  --foreground: 0 0% 4%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 4%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 4%;
  --primary: 0 0% 4%;
  --primary-foreground: 0 0% 100%;
  --secondary: 45 8% 91%;
  --secondary-foreground: 0 0% 4%;
  --muted: 45 8% 92%;
  --muted-foreground: 0 0% 38%;
  --accent: 0 0% 4%;
  --accent-foreground: 0 0% 100%;
  --border: 45 7% 83%;
  --input: 45 7% 83%;
  --ring: 0 0% 4%;
  --radius: 0.35rem;
}

html,
body {
  background: #fafaf7 !important;
  color: #090909 !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

* {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: #202020 #efeee9;
}

button,
input,
[role="button"] {
  border-radius: 6px !important;
}

input,
textarea {
  background: #ffffff !important;
  color: #090909 !important;
  border-color: #d4d2ca !important;
}

textarea#system_prompt,
textarea[name="system_prompt"],
.MuiDrawer-paper textarea#system_prompt,
.MuiDrawer-paper textarea[name="system_prompt"],
[role="dialog"] textarea#system_prompt,
[role="dialog"] textarea[name="system_prompt"] {
  min-height: min(45vh, 32rem) !important;
  resize: vertical !important;
}

pre,
code {
  font-family: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
}

pre {
  max-height: 360px;
  overflow: auto;
  border: 1px solid #d4d2ca !important;
  background: #f4f3ee !important;
}

.markdown-body,
.prose {
  line-height: 1.55 !important;
}

[data-testid*="message"],
[class*="message"] {
  scroll-margin-top: 72px;
}

[data-testid*="step"],
[class*="step"],
[class*="Step"] {
  border-radius: 8px !important;
}

[data-testid*="step"] button,
[data-testid*="step"] [role="button"],
[class*="step"] button,
[class*="step"] [role="button"] {
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  text-shadow: none !important;
}

[data-testid*="step"] pre,
[data-testid*="step"] .codehilite,
[class*="step"] pre,
[class*="step"] .codehilite {
  max-height: min(78vh, 72rem) !important;
  overflow-y: auto !important;
  overflow-x: auto !important;
  overscroll-behavior: contain !important;
  scroll-behavior: smooth !important;
}

[data-testid*="step"] [class*="content"],
[class*="step"] [class*="content"] {
  scroll-margin-top: 24px !important;
}

[data-testid*="step"] [class*="header"],
[class*="step"] [class*="header"] {
  font-weight: 700 !important;
  color: #111111 !important;
}

[data-testid*="step"] pre,
[class*="step"] pre {
  background: #f4f3ee !important;
  border: 1px solid #e2dfd6 !important;
  box-shadow: none !important;
  color: inherit !important;
  padding: 12px 14px !important;
}

[data-testid*="step"] code,
[class*="step"] code {
  background: transparent !important;
  color: inherit !important;
}

.tool-step-body {
  display: grid;
  gap: 10px;
}

.tool-step-input {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #e2dfd6;
  border-radius: 10px;
  background: #f7f6f2;
  color: #111111;
  font-size: 13px;
  line-height: 1.35;
}

.tool-step-input strong,
.tool-step-output-label strong {
  flex: 0 0 auto;
}

.tool-step-input span {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tool-step-output-label {
  color: #111111;
  font-size: 13px;
  line-height: 1.2;
}

.tool-step-output {
  margin: 0 !important;
  max-height: min(52vh, 30rem) !important;
  overflow: auto !important;
  padding: 12px 14px !important;
  border: 1px solid #e2dfd6 !important;
  border-radius: 12px !important;
  background: #f4f3ee !important;
  color: #111111 !important;
}

[data-testid*="step"] svg,
[class*="step"] svg {
  color: inherit !important;
}

table,
pre,
code {
  max-width: 100%;
}

.chainlit-app,
#root {
  letter-spacing: 0;
}

/* ----------------------------- */
/* Reasoning and tool steps      */
/* ----------------------------- */

.markdown-body blockquote,
.prose blockquote {
  margin: 10px 0 6px !important;
  padding: 8px 0 8px 14px !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #111111 !important;
  line-height: 1.55 !important;
  white-space: normal !important;
  border-left: 3px solid rgba(0, 0, 0, 0.18) !important;
}

.markdown-body blockquote p,
.prose blockquote p {
  margin: 0 !important;
}

[data-testid*="step"],
[class*="step"],
[class*="Step"] {
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

[data-testid*="step"] [class*="header"],
[class*="step"] [class*="header"],
[class*="Step"] [class*="header"],
[data-testid*="step"] button,
[class*="step"] button,
[class*="Step"] button {
  min-height: 28px !important;
  padding: 0 !important;
  gap: 10px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 18px !important;
  line-height: 1.18 !important;
  font-weight: 700 !important;
  color: #181818 !important;
  opacity: 1 !important;
  white-space: normal !important;
}

[data-testid*="step"] button:disabled,
[class*="step"] button:disabled,
[class*="Step"] button:disabled,
.MuiAccordionSummary-root,
.MuiAccordionSummary-root.Mui-disabled,
.MuiAccordionSummary-root.Mui-expanded,
.MuiButtonBase-root.Mui-disabled {
  color: #181818 !important;
  -webkit-text-fill-color: #181818 !important;
  opacity: 1 !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  text-shadow: none !important;
}

.MuiAccordionSummary-root .MuiTypography-root,
.MuiAccordionSummary-root [class*="Typography"],
.MuiAccordionSummary-root svg {
  color: #181818 !important;
  opacity: 1 !important;
}

.MuiAccordionSummary-root .MuiTypography-root,
.MuiAccordionSummary-root [class*="Typography"],
[data-testid*="step"] button span,
[class*="step"] button span,
[class*="Step"] button span {
  -webkit-text-fill-color: #181818 !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  text-shadow: none !important;
}

[data-testid*="step"] button span,
[class*="step"] button span,
[class*="Step"] button span,
[data-testid*="step"] button [class*="opacity-"],
[class*="step"] button [class*="opacity-"],
[class*="Step"] button [class*="opacity-"] {
  color: #181818 !important;
  opacity: 1 !important;
}

[data-testid*="step"] svg,
[class*="step"] svg,
[class*="Step"] svg {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 2 !important;
  color: #303030 !important;
}

[data-testid*="step"] [class*="content"],
[class*="step"] [class*="content"],
[class*="Step"] [class*="content"],
[data-testid*="step"] [class*="body"],
[class*="step"] [class*="body"],
[class*="Step"] [class*="body"] {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  font-size: 18px !important;
  line-height: 1.5 !important;
  color: #3f3f3f !important;
}

[data-testid*="step"] [class*="content"] > *,
[class*="step"] [class*="content"] > *,
[class*="Step"] [class*="content"] > * {
  margin-top: 3px !important;
}

.MuiAccordion-root:has(svg),
.MuiAccordion-root {
  margin: 0 !important;
}

.MuiAccordionSummary-root {
  min-height: 28px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.MuiAccordionSummary-content {
  margin: 0 !important;
  min-width: 0 !important;
}

.MuiAccordionDetails-root {
  padding-top: 0 !important;
  padding-bottom: 2px !important;
}

.MuiAccordionDetails-root .markdown-body,
.MuiAccordionDetails-root .prose,
[data-testid*="step"] [class*="content"] .markdown-body,
[class*="step"] [class*="content"] .markdown-body,
[class*="Step"] [class*="content"] .markdown-body {
  margin: 4px 0 4px 34px !important;
  padding-left: 22px !important;
  border-left: 3px solid #222222 !important;
  font-size: 18px !important;
  line-height: 1.55 !important;
  color: #414141 !important;
}

.MuiAccordionDetails-root p,
.MuiAccordionDetails-root .markdown-body p,
.MuiAccordionDetails-root .prose p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.MuiAccordionSummary-content.Mui-expanded,
.MuiAccordionSummary-root.Mui-expanded,
.MuiAccordion-root.Mui-expanded {
  margin: 0 !important;
  min-height: 28px !important;
}

.MuiStack-root:has(.MuiAccordion-root) {
  gap: 2px !important;
}

/* ----------------------------- */
/* Stable chat width             */
/* ----------------------------- */

main,
[class*="chat"],
[class*="thread"],
[class*="messages"] {
  min-width: 0 !important;
}

/* ----------------------------- */
/* Chat composer                 */
/* ----------------------------- */

/*
  IMPORTANT:
  Do NOT use:
  form div:has(textarea)

  It catches too many parent divs and causes shrinking while streaming.
*/

/* Outer composer form */
form:has(textarea) {
  width: min(1200px, calc(100vw - 360px)) !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 18px 0 26px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Real input shell: only direct textarea parent */
div:has(> textarea),
#message-composer {
  width: 100% !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  border: 1px solid #d4d2ca !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.07) !important;
}

#message-composer > .flex.items-center.justify-between {
  margin-top: 6px !important;
}

/* Text input */
div:has(> textarea) > textarea,
#message-composer #chat-input {
  min-height: 42px !important;
  max-height: 140px !important;

  /* right padding leaves room for the wider "Enviar" button */
  padding: 12px 12px 12px 14px !important;

  font-size: 16px !important;
  line-height: 1.35 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  resize: none !important;
}

/* Space between textarea and the real send button only */
div:has(> textarea) > textarea + button,
div:has(> textarea) button[type="submit"],
#message-composer #chat-submit {
  margin-top: 6px !important;
  margin-left: 12px !important;
  margin-right: 4px !important;
  padding: 0 14px !important;
  min-width: 86px !important;
  min-height: 34px !important;
  border-radius: 12px !important;
}

/* If Chainlit positions the button absolute, this still creates visual breathing room */
div:has(> textarea) > textarea + button,
div:has(> textarea) button[type="submit"],
#message-composer #chat-submit {
  margin-left: 14px !important;
  margin-top: 6px !important;
}

div:has(> textarea) > textarea + button svg,
div:has(> textarea) button[type="submit"] svg,
#message-composer #chat-submit svg {
  display: none !important;
}

div:has(> textarea) > textarea + button::after,
div:has(> textarea) button[type="submit"]::after,
#message-composer #chat-submit::after {
  content: "Enviar";
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

/* Prevent disabled/streaming state from shrinking the composer */
form:has(textarea),
form:has(textarea) > *,
div:has(> textarea),
#message-composer {
  flex-shrink: 0 !important;
}

/* ----------------------------- */
/* Settings panel                */
/* ----------------------------- */

/* Wider settings drawer/dialog */
[role="dialog"]:has(textarea),
aside:has(textarea) {
  width: min(640px, calc(100vw - 40px)) !important;
  max-width: calc(100vw - 40px) !important;
  right: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

aside:has(#system_prompt) {
  margin-right: 0 !important;
  margin-left: 0 !important;
  padding-right: 32px !important;
  padding-left: 8px !important;
}

aside:has(#system_prompt) > div {
  margin-right: 0 !important;
  width: calc(100% - 12px) !important;
  max-width: calc(100% - 12px) !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}

/* Reset settings forms so they do not inherit composer dimensions */
[role="dialog"] form:has(textarea),
aside form:has(textarea) {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#chat-settings-sidebar-content,
aside:has(textarea) #chat-settings-sidebar-content {
  overflow-x: hidden !important;
}

/* Settings textarea */
[role="dialog"] textarea,
aside textarea {
  min-height: 200px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  background: #ffffff !important;
  border: 1px solid #d4d2ca !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  resize: vertical !important;
}

/* Settings inputs */
[role="dialog"] input,
aside input {
  min-height: 36px !important;
  padding: 8px 10px !important;
  font-size: 13px !important;
}

/* ----------------------------- */
/* Laptop only fallback          */
/* ----------------------------- */

@media (max-width: 1100px) {
  form:has(textarea) {
    width: calc(100vw - 280px) !important;
  }
}

@media (max-width: 900px) {
  form:has(textarea) {
    width: calc(100vw - 48px) !important;
  }
}