/* UBT Brain – Chainlit UI layout fixes
   Loaded via [UI] custom_css = "/public/custom.css" in config.toml
   ------------------------------------------------------------------ */

/* ── 1. Message Composer (Lexical rich-text editor) ─────────────────────── */
/* When users type markdown (headings, code-fences, bold, etc.) the editor
   auto-formats content, which can make the input grow without bound and push
   the send button / action bar off-screen.  Cap the editor height and allow
   internal scrolling so the surrounding layout is never affected.            */

[data-lexical-editor="true"] {
  max-height: 200px;
  overflow-y: auto;
}

/* Belt-and-suspenders: also target by contenteditable in case the data-attr
   changes across Chainlit minor versions.                                    */
#message-composer [contenteditable="true"] {
  max-height: 200px;
  overflow-y: auto; 
}

/* ── Paste protection: show raw text in composer, never render formatting ── */
/* When users paste markdown, CSV, or other structured text the Lexical editor
   converts it to rich DOM nodes with inline styles.  Use !important on every
   property so CSS wins over Lexical's inline styles.  Target both semantic
   tags AND Lexical's own class-prefixed spans/divs.                          */

/* --- Headings --- */
[data-lexical-editor="true"] h1,
[data-lexical-editor="true"] h2,
[data-lexical-editor="true"] h3,
[data-lexical-editor="true"] h4,
[data-lexical-editor="true"] h5,
[data-lexical-editor="true"] h6,
[data-lexical-editor="true"] [class*="heading"],
#message-composer h1,
#message-composer h2,
#message-composer h3,
#message-composer h4,
#message-composer h5,
#message-composer h6 {
  font-size: 0.875rem !important;
  font-weight: normal !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.5 !important;
  min-height: unset !important;
}

/* --- Bold / italic / underline / strikethrough --- */
[data-lexical-editor="true"] strong,
[data-lexical-editor="true"] b,
[data-lexical-editor="true"] em,
[data-lexical-editor="true"] i,
[data-lexical-editor="true"] u,
[data-lexical-editor="true"] s,
[data-lexical-editor="true"] del,
[data-lexical-editor="true"] [class*="bold"],
[data-lexical-editor="true"] [class*="italic"],
[data-lexical-editor="true"] [class*="underline"],
[data-lexical-editor="true"] [class*="strikethrough"],
#message-composer strong,
#message-composer b,
#message-composer em,
#message-composer i,
#message-composer u,
#message-composer s,
#message-composer del {
  font-weight: normal !important;
  font-style: normal !important;
  text-decoration: none !important;
}

/* --- Inline code --- */
[data-lexical-editor="true"] code,
[data-lexical-editor="true"] [class*="code"],
#message-composer code {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  color: inherit !important;
}

/* --- Code blocks / pre --- */
[data-lexical-editor="true"] pre,
[data-lexical-editor="true"] [class*="codeBlock"],
#message-composer pre {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  white-space: pre-wrap !important;
}

/* --- Block-quotes --- */
[data-lexical-editor="true"] blockquote,
[data-lexical-editor="true"] [class*="quote"],
#message-composer blockquote {
  border: none !important;
  border-left: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-style: normal !important;
  color: inherit !important;
  background: none !important;
}

/* --- Lists --- */
[data-lexical-editor="true"] ul,
[data-lexical-editor="true"] ol,
[data-lexical-editor="true"] li,
[data-lexical-editor="true"] [class*="list"],
[data-lexical-editor="true"] [class*="listItem"],
#message-composer ul,
#message-composer ol,
#message-composer li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* --- Tables (CSV paste) --- */
[data-lexical-editor="true"] table,
[data-lexical-editor="true"] thead,
[data-lexical-editor="true"] tbody,
[data-lexical-editor="true"] tr,
[data-lexical-editor="true"] th,
[data-lexical-editor="true"] td,
[data-lexical-editor="true"] [class*="table"],
#message-composer table,
#message-composer thead,
#message-composer tbody,
#message-composer tr,
#message-composer th,
#message-composer td {
  display: inline !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-weight: normal !important;
  background: none !important;
}

/* --- Horizontal rules --- */
[data-lexical-editor="true"] hr,
#message-composer hr {
  display: none !important;
}

/* --- Images pasted into composer --- */
[data-lexical-editor="true"] img,
#message-composer img {
  display: none !important;
}

/* --- Links --- */
[data-lexical-editor="true"] a,
[data-lexical-editor="true"] [class*="link"],
#message-composer a {
  color: inherit !important;
  text-decoration: none !important;
  pointer-events: none !important;
}

/* --- Catch-all: any Lexical paragraph/text node with inline font-size --- */
[data-lexical-editor="true"] p,
[data-lexical-editor="true"] [class*="paragraph"],
[data-lexical-editor="true"] span {
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  margin: 0 !important;
}

/* ── 2. Rendered messages – overflow safety ──────────────────────────────── */
/* Code blocks and tables in AI/user messages must not stretch the message
   bubble beyond the chat column width.                                       */

.markdown pre,
.markdown table {
  max-width: 100%;
  overflow-x: auto;
  display: block;
}

/* Keep code inline wrapping clean */
.markdown code {
  white-space: pre-wrap;
  word-break: break-all;
}

/* Images should never exceed their container */
.markdown img {
  max-width: 100%;
  height: auto;
}

/* General word-wrap so long URLs / identifiers don't overflow */
.markdown {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ── 3. UBT Brand Theme Overrides ───────────────────────────────────────── */
/* Align chatbot UI with UBT corporate identity:
   Navy #1A1C63, Red #EE202E, Light BG #F5F5F5                              */

/* Primary action buttons (send, new chat, etc.) */
button[class*="primary"],
button[class*="Primary"],
.MuiButton-containedPrimary,
[data-testid="send-button"] {
  background-color: #EE202E !important;
}
button[class*="primary"]:hover,
button[class*="Primary"]:hover,
.MuiButton-containedPrimary:hover,
[data-testid="send-button"]:hover {
  background-color: #c91a26 !important;
}

/* Accent link colors */
a[class*="accent"],
.MuiLink-root {
  color: #EE202E !important;
}

/* Header / sidebar brand background */
[class*="header"],
[data-testid="header"] {
  border-bottom-color: #1A1C63 !important;
}

/* Side panel active item highlight */
[class*="active"][class*="thread"],
[class*="selected"] {
  border-left-color: #EE202E !important;
}

/* ── 4. Bug Report FAB + Modal ───────────────────────────────────────────── */

/* Floating action button */
#ubt-bug-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px 10px 14px;
  background: #EE202E;
  color: #fff;
  border: none;
  border-radius: 24px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 14px rgba(238,32,46,0.45);
  z-index: 9000;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
#ubt-bug-fab:hover {
  background: #c91a26;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(238,32,46,0.55);
}
#ubt-bug-fab:active {
  transform: translateY(0);
}

/* Modal backdrop */
#ubt-bug-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 9100;
  align-items: center;
  justify-content: center;
  animation: ubt-fade-in 0.18s ease;
}
@keyframes ubt-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Modal card */
#ubt-bug-modal {
  background: #1A1C63;
  border-radius: 14px;
  width: 440px;
  max-width: 92vw;
  box-shadow: 0 24px 64px rgba(0,0,0,0.55);
  overflow: hidden;
  animation: ubt-slide-up 0.2s ease;
}
@keyframes ubt-slide-up {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Modal header */
#ubt-bug-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: #EE202E;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}
#ubt-bug-close {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 0 2px;
  opacity: 0.85;
  transition: opacity 0.15s;
}
#ubt-bug-close:hover { opacity: 1; }

/* Modal body */
#ubt-bug-body {
  padding: 20px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#ubt-bug-body label {
  color: #a0aacc;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ubt-required { color: #EE202E; margin-left: 2px; }

/* Inputs */
#ubt-bug-title,
#ubt-bug-desc {
  background: #0e1029;
  border: 1.5px solid #2d3380;
  color: #e8eaf6;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
#ubt-bug-desc { resize: vertical; }
#ubt-bug-title:focus,
#ubt-bug-desc:focus {
  outline: none;
  border-color: #EE202E;
}

/* Submit button */
#ubt-bug-submit {
  background: #EE202E;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  width: 100%;
  margin-top: 4px;
  transition: background 0.15s, transform 0.12s;
}
#ubt-bug-submit:hover:not(:disabled) { background: #c91a26; }
#ubt-bug-submit:active:not(:disabled) { transform: scale(0.99); }
#ubt-bug-submit:disabled { opacity: 0.55; cursor: not-allowed; }

/* Status line */
#ubt-bug-status {
  font-size: 13px;
  text-align: center;
  min-height: 18px;
}
#ubt-bug-status.ubt-error   { color: #ff7080; }
#ubt-bug-status.ubt-success { color: #00c8a8; }