:root {
  --sofi-navy: #2c3550;
  --sofi-navy-soft: #49546f;
  --sofi-ivory: #fffaf2;
  --sofi-beige: #f6ead7;
  --sofi-gold: #d8b56d;
  --sofi-gold-soft: #ead19a;
  --sofi-text: #2a3344;
  --sofi-muted: #616b78;
  --sofi-surface: rgba(255, 248, 238, 0.95);
  --sofi-surface-strong: rgba(255, 252, 246, 0.98);
  --sofi-border: rgba(216, 181, 109, 0.42);
  --sofi-shadow: 0 14px 42px rgba(87, 63, 28, 0.12);
  --sofi-shadow-soft: 0 8px 22px rgba(87, 63, 28, 0.08);
  --sofi-radius-xl: 24px;
  --sofi-radius-lg: 18px;
  --sofi-radius-md: 14px;
}

body {
  background:
    linear-gradient(rgba(33, 25, 16, 0.48), rgba(33, 25, 16, 0.48)),
    url("/public/sofi-bg.png");
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  color: var(--sofi-text);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 248, 238, 0.16) 0%, rgba(255, 248, 238, 0.05) 30%, rgba(255, 248, 238, 0.22) 100%);
  pointer-events: none;
}

body::after {
  content: "Sofi";
  position: fixed;
  right: 42px;
  bottom: 28px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 56px;
  color: rgba(84, 63, 35, 0.26);
  font-weight: 700;
  letter-spacing: -0.03em;
  pointer-events: none;
}

/* Hide the small top-left login favicon/logo */
img[src*="favicon.png"],
img[src*="/public/favicon"] {
  display: none !important;
}

/* Hide Chainlit top-left logo served from /logo?theme=... */
img[alt="logo"],
img[src*="/logo?theme="] {
  display: none !important;
}

/* Cloud login variant: logo image rendered with Tailwind utility classes */
img.logo.w-\[150px\][alt="logo"],
div.flex.justify-center.gap-2.md\:justify-start > img.logo {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
}

h1,
h2,
h3 {
  letter-spacing: -0.02em;
}

[data-testid="cl-sidebar"] {
  background: rgba(20, 31, 55, 0.78) !important;
  backdrop-filter: blur(14px);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

[data-testid="cl-sidebar"],
[data-testid="sidebar"] {
  display: none !important;
}

button[aria-label*="sidebar" i],
button[title*="sidebar" i],
[role="button"][aria-label*="sidebar" i],
[role="button"][title*="sidebar" i] {
  display: none !important;
}

[data-testid="cl-chat-view"],
[data-testid="chat-container"],
main {
  background: transparent !important;
}

div.flex.flex-col.mx-auto.w-full.p-4.pt-0 {
  transform: translateX(150px) !important;
}

div.flex.flex-col.mx-auto.w-full.flex-grow.p-4 {
  transform: translateX(130px) !important;
}

div.relative.flex.flex-col.items-center.gap-2.w-full {
  align-items: flex-start !important;
}

[data-testid="cl-message-list"],
[data-testid="messages-container"] {
  max-width: 980px;
  margin: 28px auto 20px auto;
  transform: translateX(120px) !important;
  padding: 28px 28px 140px 28px !important;
  background: linear-gradient(180deg, rgba(255, 250, 242, 0.98) 0%, rgba(247, 235, 214, 0.94) 100%);
  border: 1px solid rgba(216, 181, 109, 0.34);
  border-radius: var(--sofi-radius-xl);
  box-shadow: var(--sofi-shadow);
  backdrop-filter: blur(16px);
}

[data-testid="cl-message-list"]::before,
[data-testid="messages-container"]::before {
  content: none !important;
  display: none !important;
}

[data-testid="cl-message-list"]::after,
[data-testid="messages-container"]::after {
  content: none !important;
  display: none !important;
}

[data-testid="message"] {
  margin-bottom: 16px;
}

[data-testid="message"] [data-testid="assistant-message"],
[data-testid="assistant-message"] {
  background: linear-gradient(135deg, #fff9ef 0%, #f5e9d5 100%) !important;
  border: 2px solid rgba(216, 181, 109, 0.92) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 24px rgba(87, 63, 28, 0.10) !important;
  color: #2a3344 !important;
  padding: 14px 16px !important;
}

.ai-message .message-content,
.ai-message [data-testid="message-content"],
[data-testid="message-content"] .markdown-body {
  background: linear-gradient(135deg, #fff9ef 0%, #f5e9d5 100%) !important;
  border: 2px solid rgba(216, 181, 109, 0.92) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 24px rgba(87, 63, 28, 0.08) !important;
  color: #2a3344 !important;
  padding: 14px 16px !important;
}

.ai-message .message-content p,
.ai-message .message-content li,
.ai-message .message-content strong,
.ai-message [data-testid="message-content"] p,
.ai-message [data-testid="message-content"] li,
.ai-message [data-testid="message-content"] strong,
[data-testid="message-content"] .markdown-body p,
[data-testid="message-content"] .markdown-body li,
[data-testid="message-content"] .markdown-body strong {
  color: #152544 !important;
}

.ai-message .message-content a,
.ai-message [data-testid="message-content"] a,
[data-testid="message-content"] .markdown-body a {
  color: #a46a00 !important;
  font-weight: 600 !important;
}

.ai-message .message-content hr,
.ai-message [data-testid="message-content"] hr,
[data-testid="message-content"] .markdown-body hr {
  border: none !important;
  border-top: 1px solid rgba(199, 168, 107, 0.65) !important;
  margin: 14px 0 !important;
}

/* Assistant message action row: Copy button lives here in the live DOM */
.ai-message .-ml-1\.5.flex.items-center.flex-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 10px !important;
  padding: 4px 6px !important;
  background: rgba(255, 249, 239, 0.78) !important;
  border: 1px solid rgba(216, 181, 109, 0.22) !important;
  border-radius: 999px !important;
}

.ai-message .-ml-1\.5.flex.items-center.flex-wrap > button {
  background: linear-gradient(135deg, #fff9ef 0%, #f4e5c9 100%) !important;
  color: #2a3344 !important;
  border: 1px solid rgba(216, 181, 109, 0.95) !important;
  border-radius: 999px !important;
  box-shadow: 0 5px 16px rgba(87, 63, 28, 0.14) !important;
  min-width: 34px !important;
  min-height: 34px !important;
  padding: 6px !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  cursor: pointer !important;
}

.ai-message .-ml-1\.5.flex.items-center.flex-wrap > button svg,
.ai-message .-ml-1\.5.flex.items-center.flex-wrap > button svg * {
  fill: currentColor !important;
  stroke: currentColor !important;
  color: currentColor !important;
}

.ai-message .-ml-1\.5.flex.items-center.flex-wrap > button:hover {
  background: linear-gradient(135deg, #f7eecd 0%, #e4c27a 100%) !important;
  border-color: rgba(186, 137, 46, 0.98) !important;
  box-shadow: 0 6px 18px rgba(87, 63, 28, 0.18) !important;
  transform: translateY(-1px) !important;
}

.ai-message .-ml-1\.5.flex.items-center.flex-wrap > button[data-state],
.ai-message .-ml-1\.5.flex.items-center.flex-wrap > button[title*="helpful" i],
.ai-message .-ml-1\.5.flex.items-center.flex-wrap > button[aria-label*="helpful" i],
.ai-message .-ml-1\.5.flex.items-center.flex-wrap > button[title*="not helpful" i],
.ai-message .-ml-1\.5.flex.items-center.flex-wrap > button[aria-label*="not helpful" i] {
  min-width: 34px !important;
  min-height: 34px !important;
  padding: 6px !important;
  border-radius: 999px !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}

.ai-message .-ml-1\.5.flex.items-center.flex-wrap > button[title*="helpful" i],
.ai-message .-ml-1\.5.flex.items-center.flex-wrap > button[aria-label*="helpful" i] {
  background: linear-gradient(135deg, #f1f8ec 0%, #dcecc8 100%) !important;
  color: #2f4f33 !important;
  border: 1px solid rgba(119, 158, 85, 0.98) !important;
  box-shadow: 0 5px 16px rgba(62, 92, 49, 0.12) !important;
}

.ai-message .-ml-1\.5.flex.items-center.flex-wrap > button[title*="not helpful" i],
.ai-message .-ml-1\.5.flex.items-center.flex-wrap > button[aria-label*="not helpful" i] {
  background: linear-gradient(135deg, #fff0f0 0%, #f0cfcf 100%) !important;
  color: #6c2f2f !important;
  border: 1px solid rgba(180, 92, 92, 0.98) !important;
  box-shadow: 0 5px 16px rgba(109, 52, 52, 0.12) !important;
}

.ai-message .-ml-1\.5.flex.items-center.flex-wrap > button[title*="helpful" i]:hover,
.ai-message .-ml-1\.5.flex.items-center.flex-wrap > button[aria-label*="helpful" i]:hover {
  background: linear-gradient(135deg, #e7f2df 0%, #cde0b2 100%) !important;
  border-color: rgba(94, 133, 60, 1) !important;
  box-shadow: 0 6px 18px rgba(62, 92, 49, 0.18) !important;
}

.ai-message .-ml-1\.5.flex.items-center.flex-wrap > button[title*="not helpful" i]:hover,
.ai-message .-ml-1\.5.flex.items-center.flex-wrap > button[aria-label*="not helpful" i]:hover {
  background: linear-gradient(135deg, #ffdede 0%, #f2bcbc 100%) !important;
  border-color: rgba(170, 72, 72, 1) !important;
  box-shadow: 0 6px 18px rgba(109, 52, 52, 0.18) !important;
}

.ai-message .-ml-1\.5.flex.items-center.flex-wrap > button[title*="helpful" i] svg,
.ai-message .-ml-1\.5.flex.items-center.flex-wrap > button[title*="helpful" i] svg *,
.ai-message .-ml-1\.5.flex.items-center.flex-wrap > button[aria-label*="helpful" i] svg,
.ai-message .-ml-1\.5.flex.items-center.flex-wrap > button[aria-label*="helpful" i] svg *,
.ai-message .-ml-1\.5.flex.items-center.flex-wrap > button[title*="not helpful" i] svg,
.ai-message .-ml-1\.5.flex.items-center.flex-wrap > button[title*="not helpful" i] svg *,
.ai-message .-ml-1\.5.flex.items-center.flex-wrap > button[aria-label*="not helpful" i] svg,
.ai-message .-ml-1\.5.flex.items-center.flex-wrap > button[aria-label*="not helpful" i] svg * {
  fill: currentColor !important;
  stroke: currentColor !important;
  color: currentColor !important;
}

[data-testid="message"] [data-testid="user-message"],
[data-testid="user-message"] {
  background: linear-gradient(135deg, #fffdf8 0%, #f7ead7 100%) !important;
  border: 2px solid rgba(216, 181, 109, 0.90) !important;
  border-radius: 18px !important;
  color: #2a3344 !important;
  box-shadow: 0 8px 22px rgba(87, 63, 28, 0.08) !important;
  padding: 14px 16px !important;
}

[data-testid="chat-input"],
textarea,
.MuiInputBase-root,
.MuiOutlinedInput-root {
  background: rgba(255, 252, 247, 0.99) !important;
  border-radius: 18px !important;
  border: 1px solid rgba(216, 181, 109, 0.34) !important;
  box-shadow: var(--sofi-shadow-soft);
  min-height: 58px !important;
  padding: 14px 16px !important;
}

[data-testid="chat-input-container"] {
  max-width: 980px;
  margin: 0 auto 26px auto !important;
  padding: 14px !important;
  background: linear-gradient(180deg, rgba(255, 252, 247, 0.99) 0%, rgba(247, 235, 214, 0.95) 100%);
  border: 1px solid rgba(216, 181, 109, 0.30);
  border-radius: 22px;
  box-shadow: var(--sofi-shadow);
  backdrop-filter: blur(16px);
}

button,
.MuiButton-root {
  border-radius: 14px !important;
}

button[type="submit"],
[data-testid="send-button"] {
  background: linear-gradient(180deg, #ead7ae 0%, #d8b56d 100%) !important;
  color: #2a3344 !important;
  box-shadow: 0 10px 20px rgba(87, 63, 28, 0.12);
  border: none !important;
}

button[type="submit"]:hover,
[data-testid="send-button"]:hover {
  filter: brightness(1.03);
}

/* Message action icons: copy / feedback / small inline controls */
.ai-message button,
[data-testid="assistant-message"] button,
[data-testid="message-content"] button,
.message-content button,
.ai-message [role="button"],
[data-testid="assistant-message"] [role="button"] {
  color: #2a3344 !important;
}

.ai-message button svg,
[data-testid="assistant-message"] button svg,
[data-testid="message-content"] button svg,
.message-content button svg,
.ai-message button svg *,
[data-testid="assistant-message"] button svg *,
[data-testid="message-content"] button svg * {
  fill: currentColor !important;
  stroke: currentColor !important;
  color: inherit !important;
}

button[title*="copy" i],
button[aria-label*="copy" i],
button[title*="helpful" i],
button[aria-label*="helpful" i],
button[title*="feedback" i],
button[aria-label*="feedback" i],
[title*="copy" i],
[aria-label*="copy" i],
[title*="helpful" i],
[aria-label*="helpful" i],
[title*="feedback" i],
[aria-label*="feedback" i],
[role="button"][title*="copy" i],
[role="button"][aria-label*="copy" i],
[role="button"][title*="helpful" i],
[role="button"][aria-label*="helpful" i],
[role="button"][title*="feedback" i],
[role="button"][aria-label*="feedback" i] {
  background: linear-gradient(135deg, #fff9ef 0%, #f4e5c9 100%) !important;
  border: 1px solid rgba(216, 181, 109, 0.95) !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 14px rgba(87, 63, 28, 0.10) !important;
  padding: 6px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  color: #2a3344 !important;
  filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

button[title*="copy" i]:hover,
button[aria-label*="copy" i]:hover,
button[title*="helpful" i]:hover,
button[aria-label*="helpful" i]:hover,
button[title*="feedback" i]:hover,
button[aria-label*="feedback" i]:hover,
[role="button"][title*="copy" i]:hover,
[role="button"][aria-label*="copy" i]:hover,
[role="button"][title*="helpful" i]:hover,
[role="button"][aria-label*="helpful" i]:hover,
[role="button"][title*="feedback" i]:hover,
[role="button"][aria-label*="feedback" i]:hover {
  filter: brightness(1.04);
}

button[title*="copy" i] svg,
button[title*="copy" i] svg *,
button[aria-label*="copy" i] svg,
button[aria-label*="copy" i] svg *,
[title*="copy" i] svg,
[title*="copy" i] svg *,
[aria-label*="copy" i] svg,
[aria-label*="copy" i] svg *,
[role="button"][title*="copy" i] svg,
[role="button"][title*="copy" i] svg *,
[role="button"][aria-label*="copy" i] svg,
[role="button"][aria-label*="copy" i] svg *,
button[title*="helpful" i] svg,
button[title*="helpful" i] svg *,
button[aria-label*="helpful" i] svg,
button[aria-label*="helpful" i] svg *,
[title*="helpful" i] svg,
[title*="helpful" i] svg *,
[aria-label*="helpful" i] svg,
[aria-label*="helpful" i] svg *,
button[title*="feedback" i] svg,
button[title*="feedback" i] svg *,
button[aria-label*="feedback" i] svg,
button[aria-label*="feedback" i] svg *,
[title*="feedback" i] svg,
[title*="feedback" i] svg *,
[aria-label*="feedback" i] svg,
[aria-label*="feedback" i] svg *,
[role="button"][title*="helpful" i] svg,
[role="button"][title*="helpful" i] svg *,
[role="button"][aria-label*="helpful" i] svg,
[role="button"][aria-label*="helpful" i] svg *,
[role="button"][title*="feedback" i] svg,
[role="button"][title*="feedback" i] svg *,
[role="button"][aria-label*="feedback" i] svg,
[role="button"][aria-label*="feedback" i] svg * {
  fill: #2a3344 !important;
  stroke: #2a3344 !important;
  color: #2a3344 !important;
}

/* Top header actions (Readme / Contact / icons) */
[data-testid="header"],
header,
.MuiAppBar-root {
  background: rgba(255, 251, 244, 0.86) !important;
  border-bottom: 1px solid rgba(216, 181, 109, 0.35) !important;
  backdrop-filter: blur(12px) !important;
}

[data-testid="header"] a,
header a,
.MuiAppBar-root a {
  color: #2a3344 !important;
  background: linear-gradient(135deg, #fff9ef 0%, #f4e5c9 100%) !important;
  border: 1px solid rgba(216, 181, 109, 0.58) !important;
  border-radius: 10px !important;
  padding: 6px 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

[data-testid="header"] a:hover,
header a:hover,
.MuiAppBar-root a:hover {
  background: linear-gradient(135deg, #f8e7c0 0%, #ddb96e 100%) !important;
  color: #1f2533 !important;
}

[data-testid="header"] button,
header button,
.MuiAppBar-root button {
  color: #2a3344 !important;
  background: linear-gradient(135deg, #fff9ef 0%, #f4e5c9 100%) !important;
  border: 1px solid rgba(216, 181, 109, 0.58) !important;
  border-radius: 10px !important;
}

button#new-chat-button,
button#new-chat-button:hover,
button#new-chat-button:focus,
button#new-chat-button:active,
button#new-chat-button[data-state] {
  background: linear-gradient(135deg, #fff9ef 0%, #f4e5c9 100%) !important;
  color: #2a3344 !important;
  border: 1px solid rgba(216, 181, 109, 0.68) !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 12px rgba(87, 63, 28, 0.10) !important;
}

button#new-chat-button:hover,
button#new-chat-button:focus,
button#new-chat-button:active {
  background: linear-gradient(135deg, #f7eecd 0%, #e5c684 100%) !important;
  border-color: rgba(186, 137, 46, 0.98) !important;
  box-shadow: 0 6px 16px rgba(87, 63, 28, 0.16) !important;
}

button#new-chat-button svg,
button#new-chat-button svg * {
  fill: currentColor !important;
  stroke: currentColor !important;
  color: currentColor !important;
}

[data-testid="header"] button:hover,
header button:hover,
.MuiAppBar-root button:hover {
  background: linear-gradient(135deg, #f8e7c0 0%, #ddb96e 100%) !important;
  color: #1f2533 !important;
}

img[alt="assistant"],
[data-testid="assistant-avatar"] img,
[data-testid="message-avatar"] img {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  object-fit: cover;
  display: block;
  border-radius: 999px !important;
  border: 2px solid rgba(199, 168, 107, 0.45);
  box-shadow: 0 4px 16px rgba(16, 28, 50, 0.14);
}

[data-testid="assistant-avatar"],
[data-testid="message-avatar"] {
  margin-left: 0 !important;
  margin-right: 10px !important;
  align-self: flex-start;
}

[data-testid="message"] [data-testid="assistant-message"] {
  margin-left: 0 !important;
}

.MuiChip-root,
[data-testid="quick-reply"] {
  background: rgba(255, 252, 247, 0.98) !important;
  color: var(--sofi-navy) !important;
  border: 1px solid rgba(216, 181, 109, 0.30) !important;
  border-radius: 999px !important;
}

pre,
code {
  border-radius: 14px !important;
}

pre {
  background: #fff9f0 !important;
  border: 1px solid rgba(216, 181, 109, 0.22);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--sofi-gold) rgba(44, 53, 80, 0.18);
}

::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

::-webkit-scrollbar-track {
  background: rgba(44, 53, 80, 0.16);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb {
  min-height: 48px;
  background: linear-gradient(180deg, #d8b56d 0%, #b98f3f 100%);
  border-radius: 999px;
  border: 3px solid rgba(255, 250, 242, 0.9);
  box-shadow: 0 0 8px rgba(140, 100, 40, 0.55);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ead19a 0%, #d8b56d 100%);
  box-shadow: 0 0 12px rgba(140, 100, 40, 0.85);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

@media (max-width: 900px) {
  body {
    background-position: 18% center;
  }

  body::after {
    font-size: 40px;
    right: 20px;
    bottom: 20px;
  }

  [data-testid="cl-message-list"],
  [data-testid="messages-container"],
  [data-testid="chat-input-container"] {
    margin-left: 12px !important;
    margin-right: 12px !important;
    border-radius: 18px !important;
  }

  div.flex.flex-col.mx-auto.w-full.p-4.pt-0 {
    margin-left: 40px !important;
    margin-right: 40px !important;
  }

  [data-testid="cl-message-list"],
  [data-testid="messages-container"] {
    padding: 18px 16px 120px 16px !important;
  }

  img[alt="assistant"],
  [data-testid="assistant-avatar"] img,
  [data-testid="message-avatar"] img {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
  }
}