/* ============================================================
   IWCP Co-Pilot — Brand Stylesheet
   Primary:  Institute Purple #584E94
   Accent:   Institute Red    #912546
   Support:  Institute Teal   #107B78  (links, icons, badges)
   Highlight: Institute Gold  #BEA03B  (accents, dividers)
   Navy:     Dark Navy        #1D3051  (dark backgrounds)
   Fonts:    Montserrat (headings/UI) | Open Sans (body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Open+Sans:wght@400;600&display=swap');

/* --- Global Font --- */
body, #root {
  font-family: 'Open Sans', sans-serif !important;
  font-size: 16px;
  line-height: 1.5;
}

/* --- Header / Navbar --- */
header, nav, [class*="MuiToolbar"] {
  border-bottom: 3px solid #BEA03B !important;
}

/* App title — Montserrat, Institute Purple */
[class*="MuiTypography-h6"],
[class*="watermark"] {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #584E94 !important;
}

/* --- Logo sizing — keep it crisp in the header --- */
header img, nav img {
  max-height: 48px !important;
  width: auto !important;
  object-fit: contain;
}

/* --- Chat background --- */
[class*="MuiBox-root"] main,
.cl-page,
[class*="threadContainer"] {
  background-color: #FAFAF8 !important;
}

/* ============================================================
   MESSAGE ELEVATION & ENTRANCE ANIMATIONS
   ============================================================ */

@keyframes messageEnter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

[class*="message"],
[class*="Message"] {
  animation: messageEnter 0.25s ease-out both;
}

/* --- Bot message bubble — purple left border + elevation --- */
[data-author]:not([data-author="Human"]) [class*="MuiPaper"],
[class*="assistant"] [class*="MuiPaper"],
[class*="message"][class*="bot"] {
  border-left: 4px solid #584E94 !important;
  border-radius: 0 8px 8px 0 !important;
  box-shadow: 0 2px 8px rgba(88, 78, 148, 0.10),
              0 1px 3px rgba(29, 48, 81, 0.06) !important;
}

/* Human message — gold accent, light elevation */
[data-author="Human"] [class*="MuiPaper"],
[class*="message"][class*="human"] {
  border-left: 4px solid #DDCD8E !important;
  border-radius: 0 8px 8px 0 !important;
  box-shadow: 0 1px 4px rgba(29, 48, 81, 0.07) !important;
}

/* ============================================================
   STEP INDICATORS — purple accent, workflow premium feel
   ============================================================ */

[class*="StepButton"],
[class*="step"] [class*="MuiTypography"],
[class*="Step"] [class*="label"] {
  color: #584E94 !important;
  font-weight: 600;
}

[class*="Step"] [class*="icon"],
[class*="step"] svg {
  color: #BEA03B !important;
}

[class*="StepButton"],
[class*="step"][class*="container"],
[class*="Step"][class*="root"] {
  border-left: 3px solid #7b72b0;
  padding-left: 10px !important;
  margin-left: 4px;
  transition: border-color 0.2s ease;
}

[class*="StepButton"]:hover,
[class*="step"][class*="container"]:hover {
  border-left-color: #584E94;
}

/* ============================================================
   INPUT BAR — purple focus ring
   ============================================================ */

[class*="MuiOutlinedInput-root"] {
  transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
}

[class*="MuiOutlinedInput-root"].Mui-focused {
  box-shadow: 0 0 0 3px rgba(88, 78, 148, 0.18) !important;
}

[class*="MuiOutlinedInput-root"].Mui-focused [class*="MuiOutlinedInput-notchedOutline"],
[class*="MuiInput-underline"]:after {
  border-color: #584E94 !important;
  border-width: 2px !important;
}

/* --- Primary buttons & send button — Institute Purple --- */
[class*="MuiButton-containedPrimary"],
[class*="MuiFab"],
[class*="sendButton"] {
  background-color: #584E94 !important;
  color: #ffffff !important;
  transition: background-color 0.18s ease, box-shadow 0.18s ease !important;
}

[class*="MuiButton-containedPrimary"]:hover,
[class*="MuiFab"]:hover,
[class*="sendButton"]:hover {
  background-color: #3d3568 !important;
  box-shadow: 0 4px 12px rgba(88, 78, 148, 0.35) !important;
}

/* --- Links — Institute Teal (supporting role per brand spec) --- */
a { color: #107B78 !important; }
a:hover { color: #2F5851 !important; }

/* --- Chips / badges — Teal (supporting) --- */
[class*="MuiChip-colorPrimary"] {
  background-color: #107B78 !important;
}

/* ============================================================
   TYPOGRAPHY SCALE — Montserrat headings, Open Sans body
   ============================================================ */

.markdown h1 {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 1.75rem;
  font-weight: 700;
  color: #584E94 !important;
  border-bottom: 2px solid #BEA03B;
  padding-bottom: 8px;
  margin-bottom: 16px;
  letter-spacing: 0.02em;
}

.markdown h2 {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 1.25rem;
  font-weight: 600;
  color: #584E94 !important;
  margin-top: 24px;
  margin-bottom: 8px;
}

.markdown h3 {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 1.05rem;
  font-weight: 600;
  color: #3d3568 !important;
  margin-top: 16px;
  margin-bottom: 6px;
}

.markdown p {
  line-height: 1.65;
  max-width: 72ch;
}

.markdown ul, .markdown ol {
  padding-left: 1.4em;
  line-height: 1.7;
}

.markdown strong {
  color: #1D3051;
}

/* --- Divider / horizontal rule --- */
hr {
  border-color: #DDCD8E !important;
  border-width: 1px 0 0 0;
  margin: 16px 0;
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f0f0ee; }
::-webkit-scrollbar-thumb { background: #7b72b0; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #584E94; }

/* ============================================================
   NEW CHAT BUTTON — prominent label in header
   ============================================================ */

/* Target by ID (confirmed from DOM inspection) — also keep aria-label fallbacks */
#new-chat-button,
button[aria-label="New chat"],
button[aria-label="New Chat"],
button[aria-label="New Conversation"] {
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  background-color: #584E94 !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  padding: 5px 12px 5px 8px !important;
  width: auto !important;
  min-width: unset !important;
  transition: background-color 0.18s ease, box-shadow 0.18s ease !important;
}

#new-chat-button:hover,
button[aria-label="New chat"]:hover,
button[aria-label="New Chat"]:hover,
button[aria-label="New Conversation"]:hover {
  background-color: #3d3568 !important;
  box-shadow: 0 4px 12px rgba(88, 78, 148, 0.35) !important;
}

#new-chat-button::after,
button[aria-label="New chat"]::after,
button[aria-label="New Chat"]::after,
button[aria-label="New Conversation"]::after {
  content: "New Chat";
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  margin-left: 6px;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

/* Ensure the icon inside stays white */
#new-chat-button svg,
button[aria-label="New chat"] svg,
button[aria-label="New Chat"] svg,
button[aria-label="New Conversation"] svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* ============================================================
   REDUCED MOTION — respect accessibility preference
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  [class*="message"],
  [class*="Message"] {
    animation: none;
  }
  [class*="MuiButton-containedPrimary"],
  [class*="MuiFab"],
  [class*="sendButton"],
  [class*="MuiOutlinedInput-root"] {
    transition: none !important;
  }
}