/**
 * Chainlit UI tweaks: wrap long lines in element sidebar and markdown text blocks
 * (e.g. DEBUG system instructions) so content is readable without horizontal scrolling.
 */

/*
 * Element sidebar (Radix Sheet) when Mol* is present: same scoping as
 * `frontend/molstar-viewer/src/chainlit-sidebar-fix.ts` (Mol* host id `molstar-host-*`).
 * Readme / other dialogs stay untouched.
 */
[role="dialog"][data-state="open"]:has([id^="molstar-host-"]) {
  isolation: isolate;
  z-index: 5000000 !important;
}

[role="dialog"][data-state="open"]:has([id^="molstar-host-"]) > button,
[role="dialog"][data-state="open"]:has([id^="molstar-host-"]) button.absolute.right-4.top-4,
[role="dialog"][data-state="open"]:has([id^="molstar-host-"]) button[class*="right-4"][class*="top-4"] {
  z-index: 5000001 !important;
  position: absolute !important;
  opacity: 1 !important;
}

[role="dialog"][data-state="open"]:has([id^="molstar-host-"]) h1,
[role="dialog"][data-state="open"]:has([id^="molstar-host-"]) h2,
[role="dialog"][data-state="open"]:has([id^="molstar-host-"]) h3,
[role="dialog"][data-state="open"]:has([id^="molstar-host-"]) .text-lg.font-semibold,
[role="dialog"][data-state="open"]:has([id^="molstar-host-"]) [class*="SheetTitle"],
[role="dialog"][data-state="open"]:has([id^="molstar-host-"]) [class*="DialogTitle"] {
  position: relative !important;
  z-index: 5000001 !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  background-color: var(--background, Canvas) !important;
  background-clip: padding-box !important;
}

/* Mol* mounts here: left panel (structure tree) + viewport share this box */
.pdb-viewer .molstar-viewer-root {
  min-height: 440px;
  overflow: hidden;
}

/* Narrow Chainlit element sidebar: slightly shorter viewport than inline chat */
.pdb-viewer--sidebar .molstar-viewer-root {
  min-height: 280px;
}

/* highlight.js defaults use overflow-x:auto on pre code — force wrap */
pre code.hljs {
  overflow-x: hidden !important;
  white-space: pre-wrap !important;
  word-break: break-word;
  overflow-wrap: anywhere;
  max-width: 100%;
}

/* Element sidebar / sheet: avoid horizontal overflow on containers */
aside [class*="overflow-x-auto"],
aside [data-radix-scroll-area-viewport] {
  overflow-x: hidden !important;
}

/* cl.Text uses `${display}-text` (e.g. side-text in element sidebar) */
.side-text,
.inline-text {
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}

.side-text pre,
.inline-text pre {
  white-space: pre-wrap !important;
  overflow-x: hidden !important;
}

/* Markdown body in panels */
.prose pre {
  white-space: pre-wrap !important;
  overflow-x: hidden !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.prose code {
  white-space: pre-wrap !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/*
 * Readme popover panel: Chainlit renders the readme in a Radix popover with
 * `w-screen max-w-screen` which can overflow. Clamp and wrap text properly.
 */
.w-screen.max-w-screen {
  max-width: 100vw !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

.w-screen.max-w-screen .mx-auto {
  max-width: min(48rem, calc(100vw - 2rem)) !important;
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  word-break: break-word;
}