/* Custom CSS */

/* Define our color variables for easy reference */
:root {
  /* Our brand colors */
  --brand-blue: #0079C1;
  --brand-dark-blue: #005487;
  --brand-light-blue: #E8F5FA;
  --brand-yellow: #FFC72C;
  --brand-white: #FFFFFF;
  --brand-light-grey: #F8F8F8;
  --brand-menu-bg: #E8EEF4;
  --brand-menu-text: #2D3B4A;
  --brand-sent-message-bg: #005487;
  --brand-sent-message-text: #8BAAC7;
  --brand-border: #DDDDDD;
  --brand-text: #1D1C1D;
  --brand-secondary-text: #616061;
}

/* Base styles for the entire app */
body {
  font-family: 'Lato', 'Helvetica Neue', sans-serif;
}

/* Light mode theme variables */
:root {
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  
  /* Primary color - blue */
  --primary: 200 100% 38%;
  --primary-foreground: 0 0% 100%;
  
  /* Secondary color - light blue */
  --secondary: 195 67% 95%;
  --secondary-foreground: 240 3% 11%;
  
  /* Accent color - yellow */
  --accent: 45 100% 59%;
  --accent-foreground: 240 5.9% 10%;
  
  /* Destructive color - red */
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  
  /* Muted color - light grey */
  --muted: 0 0% 96.1%;
  --muted-foreground: 0 0% 45.1%;
  
  /* Card colors */
  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;
  
  /* Popover colors */
  --popover: 0 0% 100%;
  --popover-foreground: 240 10% 3.9%;
  
  /* Border, input, and ring colors */
  --border: 240 5.9% 90%;
  --input: 240 5.9% 90%;
  --ring: 45 100% 50%; /* Yellow in HSL format */
  
  /* Border radius */
  --radius: 0.5rem;
  
  /* Sidebar variables */
  --sidebar-background: 195 67% 95%;
  --sidebar-foreground: 240 3% 11%;
  --sidebar-border: 240 5.9% 90%;
  --sidebar-accent: 195 43% 88%;
  --sidebar-accent-foreground: 240 3% 11%;
}

/* Dark mode colors */
.dark {
  --background: 210 60% 10%;
  --foreground: 0 0% 98%;
  
  /* Primary color - blue */
  --primary: 200 100% 38%;
  --primary-foreground: 0 0% 100%;
  
  /* Secondary color - dark blue */
  --secondary: 210 60% 10%;
  --secondary-foreground: 0 0% 98%;
  
  /* Accent color - yellow */
  --accent: 45 100% 59%;
  --accent-foreground: 240 5.9% 10%;
  
  /* Destructive color - red */
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;
  
  /* Muted color - dark blue */
  --muted: 210 60% 15%;
  --muted-foreground: 240 5% 84.9%;
  
  /* Card colors */
  --card: 210 60% 10%;
  --card-foreground: 0 0% 98%;
  
  /* Popover colors */
  --popover: 210 60% 10%;
  --popover-foreground: 0 0% 98%;
  
  /* Border, input, and ring colors */
  --border: 203 100% 28%;
  --input: 203 100% 28%;
  --ring: 45 100% 59%;
  
  /* Sidebar variables */
  --sidebar-background: 210 60% 10%;
  --sidebar-foreground: 0 0% 98%;
  --sidebar-border: 203 100% 28%;
  --sidebar-accent: 45 100% 59%;
  --sidebar-accent-foreground: 240 5.9% 10%;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
}

/* Sidebar styling */
.bg-sidebar,
[data-sidebar="sidebar"],
div[data-sidebar="sidebar"] {
  background-color: var(--brand-menu-bg) !important;
  border-right: 1px solid var(--brand-border) !important;
}

/* Sidebar header with dark blue */
.sidebar-header {
  background-color: var(--brand-dark-blue) !important;
  color: var(--brand-white) !important;
}

/* Sidebar text color */
[data-sidebar="menu-item"] button,
[data-sidebar="menu-button"],
[data-sidebar="group-label"],
[data-sidebar="content"] {
  color: var(--brand-menu-text) !important;
  font-weight: normal !important;
}

/* Sidebar item hover state */
[data-sidebar] button:hover,
[data-sidebar="menu-button"]:hover,
[data-sidebar="menu-item"] button:hover {
  background-color: var(--brand-yellow) !important;
  color: var(--brand-text) !important;
}

/* Active thread in sidebar - use yellow as background */
[data-sidebar="menu-item"] button[data-active="true"],
[data-active="true"],
.peer/menu-button[data-active="true"],
button[data-active="true"] {
  background-color: var(--brand-yellow) !important;
  color: var(--brand-text) !important;
  font-weight: bold !important;
}

/* Style the sidebar toggle button */
.cl-sidebar-toggle-btn,
button[class*="cl-sidebar-toggle-btn"] {
  color: var(--brand-dark-blue) !important;
  background-color: transparent !important;
}

.cl-sidebar-toggle-btn:hover,
button[class*="cl-sidebar-toggle-btn"]:hover {
  background-color: rgba(0, 0, 0, 0.05) !important; /* Light hover effect */
}

/* Keep the highlight styling as is */
.cl-sidebar-toggle-btn[data-state="open"],
button[class*="cl-sidebar-toggle-btn"][data-state="open"] {
  background-color: var(--brand-yellow) !important;
  color: var(--brand-text) !important;
}

/* Style the sidebar buttons with dark blue text and transparent background */
.cl-sidebar button,
.cl-header button:not(#chat-submit):not(#upload-button):not(.cl-user-menu-button):not(.cl-user-menu-trigger),
button.hover\:bg-accent {
  color: var(--brand-dark-blue) !important;
  background-color: transparent !important;
}

.cl-sidebar button:hover,
.cl-header button:not(#chat-submit):not(#upload-button):not(.cl-user-menu-button):not(.cl-user-menu-trigger):hover,
button.hover\:bg-accent:hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
}

/* Override hover:bg-accent for specific buttons */
button.hover\:bg-accent.text-muted-foreground {
  color: var(--brand-dark-blue) !important;
  background-color: transparent !important;
}

button.hover\:bg-accent.text-muted-foreground:hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
}

/* Style the avatar button with yellow background */
.cl-user-menu-trigger,
button[id^="radix-"]:has(span.rounded-full) {
  background-color: var(--brand-yellow) !important;
  color: var(--brand-text) !important;
}

.cl-user-menu-trigger:hover,
button[id^="radix-"]:has(span.rounded-full):hover {
  background-color: #E6B327 !important; /* Slightly darker yellow on hover */
}

/* Style the logout button with yellow background and dark text */
[role="menuitem"]:has(svg.lucide-log-out) {
  background-color: var(--brand-yellow) !important;
  color: var(--brand-text) !important;
}

[role="menuitem"]:has(svg.lucide-log-out):hover {
  background-color: #E6B327 !important; /* Slightly darker yellow on hover */
}

[role="menuitem"]:has(svg.lucide-log-out) svg {
  color: var(--brand-text) !important;
}

/* Style the dropdown menu */
[data-radix-menu-content],
[id^="radix-"][role="menu"] {
  background-color: white !important;
  border-color: #e2e8f0 !important;
}

/* Message container styling */
.message-container,
[data-message="container"],
[data-message] {
  border-radius: 8px !important;
  margin-bottom: 16px !important;
  overflow: hidden !important;
}

/* User message styling - use dark blue background */
.user-message,
[data-message][data-role="user"],
[data-message="user"] {
  background-color: var(--brand-sent-message-bg) !important;
  color: var(--brand-sent-message-text) !important;
  border: 1px solid var(--brand-dark-blue) !important;
}

/* Assistant message styling */
.assistant-message,
[data-message][data-role="assistant"],
[data-message="assistant"] {
  background-color: var(--brand-white) !important;
  color: var(--brand-text) !important;
  border: 1px solid var(--brand-border) !important;
}

/* Dark mode message styling */
.dark .assistant-message {
  background-color: hsl(var(--secondary)) !important;
  color: hsl(var(--secondary-foreground)) !important;
  border: 1px solid hsl(var(--border)) !important;
}

/* Input box styling */
.input-box {
  border: 1px solid var(--brand-border) !important;
  border-radius: 8px !important;
  padding: 12px !important;
}

/* Button styling */
.primary-button {
  background-color: var(--brand-blue) !important;
  color: var(--brand-white) !important;
  border-radius: 4px !important;
  padding: 8px 16px !important;
  font-weight: 500 !important;
}

.primary-button:hover {
  background-color: var(--brand-dark-blue) !important;
}

/* Secondary button styling */
.secondary-button {
  background-color: transparent !important;
  color: var(--brand-blue) !important;
  border: 1px solid var(--brand-blue) !important;
  border-radius: 4px !important;
  padding: 8px 16px !important;
  font-weight: 500 !important;
}

.secondary-button:hover {
  background-color: var(--brand-light-blue) !important;
}

/* New chat button styling */
button#new-chat-button,
button[id="new-chat-button"],
#new-chat-button,
[id="new-chat-button"] {
  background-color: var(--brand-blue) !important;
  color: white !important;
  border-radius: 4px !important;
  padding: 8px 16px !important;
  font-weight: 500 !important;
  margin: 8px !important;
}

button#new-chat-button:hover,
button[id="new-chat-button"]:hover,
#new-chat-button:hover,
[id="new-chat-button"]:hover {
  background-color: var(--brand-dark-blue) !important;
}

/* Avatar styling */
.avatar {
  border-radius: 50% !important;
  background-color: var(--brand-blue) !important;
  color: var(--brand-white) !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 500 !important;
}

/* Main content area */
.flex.flex-col.flex-1.overflow-hidden {
  background-color: white !important;
}

.dark .flex.flex-col.flex-1.overflow-hidden {
  background-color: hsl(var(--background)) !important;
}

/* Code blocks */
pre {
  background-color: #f6f8fa !important;
  border-radius: 6px !important;
  padding: 16px !important;
  overflow-x: auto !important;
}

.dark pre {
  background-color: #1e1e1e !important;
}

/* Inline code */
code:not(pre code) {
  background-color: #f6f8fa !important;
  border-radius: 3px !important;
  padding: 2px 4px !important;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace !important;
}

.dark code:not(pre code) {
  background-color: #1e1e1e !important;
}

/* Links */
a {
  color: var(--brand-blue) !important;
  text-decoration: none !important;
}

a:hover {
  text-decoration: underline !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  color: var(--brand-text) !important;
  margin-top: 24px !important;
  margin-bottom: 16px !important;
}

.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
  color: hsl(var(--foreground)) !important;
}

/* Override Chainlit's theme variables directly */
:root {
  --cl-primary-hue: 200 !important;
  --cl-primary-saturation: 100% !important;
  --cl-primary-lightness: 38% !important;
  
  --cl-secondary-hue: 45 !important;
  --cl-secondary-saturation: 100% !important;
  --cl-secondary-lightness: 59% !important;
}

/* Force light mode throughout the application */
html, 
html.dark,
body,
body.dark,
#root,
#root.dark,
[data-theme="dark"] {
  color-scheme: light !important;
  background-color: var(--brand-white) !important;
  color: var(--brand-text) !important;
}

/* Force all dark mode specific styles to use light mode values */
html.dark .dark\:bg-background,
html.dark [class*="dark:bg-"],
.dark\:bg-background,
[class*="dark:bg-"] {
  background-color: var(--brand-white) !important;
}

html.dark .dark\:text-foreground,
html.dark [class*="dark:text-"],
.dark\:text-foreground,
[class*="dark:text-"] {
  color: var(--brand-text) !important;
}

html.dark .dark\:border-border,
html.dark [class*="dark:border-"],
.dark\:border-border,
[class*="dark:border-"] {
  border-color: var(--brand-border) !important;
}

/* Force main content area to use light colors */
.bg-background,
main,
[data-content="content"],
[data-content="main"] {
  background-color: var(--brand-white) !important;
  color: var(--brand-text) !important;
}

/* Force message bubbles to use light colors */
[data-message],
[data-message="container"],
[data-message] {
  background-color: var(--brand-light-grey) !important;
  border-color: var(--brand-border) !important;
  color: var(--brand-text) !important;
}

/* Force input area to use light colors */
[data-input],
[data-input="container"],
textarea,
.textarea-container {
  background-color: var(--brand-white) !important;
  border-color: var(--brand-border) !important;
  color: var(--brand-text) !important;
}

/* Ensure buttons use correct colors */
button[type="submit"],
[data-button="primary"] {
  background-color: var(--brand-blue) !important;
  color: white !important;
}

button[type="submit"]:hover,
[data-button="primary"]:hover {
  background-color: var(--brand-dark-blue) !important;
}

/* Override any pink colors in the UI with our brand colors */
[data-sonner-toast],
[data-sonner-toast][data-type="success"],
[data-sonner-toast][data-type="info"],
[data-sonner-toast][data-type="warning"],
[data-sonner-toast][data-type="error"] {
  --success-bg: var(--brand-light-blue) !important;
  --success-border: var(--brand-blue) !important;
  --success-text: var(--brand-dark-blue) !important;
  
  --info-bg: var(--brand-light-blue) !important;
  --info-border: var(--brand-blue) !important;
  --info-text: var(--brand-dark-blue) !important;
  
  --warning-bg: var(--brand-yellow) !important;
  --warning-border: #E6B327 !important;
  --warning-text: var(--brand-text) !important;
  
  --error-bg: #FFE8E8 !important;
  --error-border: #FF5252 !important;
  --error-text: #D32F2F !important;
}

/* Style the message input area with dark blue background and white text */
[data-content="input-box"],
.cl-input-box,
.cl-input-container,
form[data-content="chat-input"],
.bg-accent,
textarea.flex.w-full.border.border-input,
textarea#chat-input,
textarea.bg-transparent {
  background-color: var(--brand-dark-blue) !important;
  color: white !important;
  border: 2px solid var(--brand-dark-blue) !important;
  border-radius: 8px !important;
}

/* Style the textarea placeholder */
textarea::placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Style the text input container */
.bg-accent.rounded-3xl.p-3.px-4.w-full {
  background-color: var(--brand-dark-blue) !important;
  border-radius: 1.5rem !important;
}

/* Make sure the input text is white */
textarea#chat-input {
  color: white !important;
}

/* Style the send button to match */
button#chat-submit,
button[id="chat-submit"] {
  background-color: var(--brand-yellow) !important;
  color: var(--brand-text) !important;
}

button#chat-submit:hover,
button[id="chat-submit"]:hover {
  background-color: #E6B327 !important; /* Slightly darker yellow on hover */
}

/* Style the disabled submit button */
button#chat-submit:disabled,
button[id="chat-submit"]:disabled,
button#chat-submit[disabled],
button[id="chat-submit"][disabled] {
  background-color: var(--brand-light-blue) !important;
  opacity: 0.7 !important;
  cursor: not-allowed !important;
}

/* Style the attachment button */
#upload-button,
button#upload-button {
  color: white !important;
}

#upload-button:hover,
button#upload-button:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Login page styling */
#root > div > .MuiBox-root {
  background-color: var(--brand-white);
}

/* Login page logo and background */
.relative.hidden.bg-muted.lg\:block {
  background-color: var(--brand-light-blue) !important;
}

/* Login form styling */
.auth-form {
  background-color: var(--brand-white);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 24px;
}

/* Login page inputs */
.auth-form input {
  border: 1px solid var(--brand-border);
  border-radius: 4px;
  padding: 10px;
  width: 100%;
}

/* Login page button */
.auth-form button[type="submit"] {
  background-color: var(--brand-blue);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 16px;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  margin-top: 16px;
}

.auth-form button[type="submit"]:hover {
  background-color: var(--brand-dark-blue);
}

/* Login page right side styling */
.relative.hidden.bg-muted.lg\:block img.absolute.inset-0.h-full.w-full.object-cover {
  display: none !important;
}

.relative.hidden.bg-muted.lg\:block::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('/lextam_ai/public/favicon.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 60%;
  opacity: 0.8;
}

/* Ensure the login page uses light theme */
.auth-container,
.auth-page,
.auth-form-container {
  background-color: var(--brand-white) !important;
  color: var(--brand-text) !important;
}

/* Style the login page header */
.auth-header {
  color: var(--brand-dark-blue) !important;
  font-weight: bold !important;
  font-size: 24px !important;
  margin-bottom: 24px !important;
}

/* Override any pink accent colors */
.text-primary,
.text-accent-foreground,
.text-primary-foreground,
[class*="text-primary"],
[class*="text-accent"] {
  color: var(--brand-blue) !important;
}

/* Only use yellow for specific UI elements */
/* Thumb up/down buttons, copy button, edit pencil */
[data-message-actions] button,
button[data-action="thumbs-up"],
button[data-action="thumbs-down"],
button[data-action="copy"],
button[data-action="edit"] {
  background-color: var(--brand-yellow) !important;
  color: var(--brand-text) !important;
}

/* All other buttons should use blue */
.bg-primary, .bg-accent, [class*="bg-primary"], [class*="bg-accent"] {
  background-color: var(--brand-blue) !important;
  color: var(--brand-white) !important;
}

/* Override any pink border colors */
.border-primary,
.border-accent,
[class*="border-primary"],
[class*="border-accent"] {
  border-color: var(--brand-blue) !important;
}

/* Specifically target Chainlit's accent colors */
[data-accent-color="pink"] {
  --accent-color: var(--brand-blue) !important;
}

/* Style the loading spinner with our brand colors */
.sonner-loading-bar {
  background: var(--brand-blue) !important;
}

/* Style the buttons in the chat interface */
button.MuiButton-root,
button.MuiButtonBase-root {
  background-color: var(--brand-blue) !important;
  color: var(--brand-white) !important;
}

button.MuiButton-root:hover,
button.MuiButtonBase-root:hover {
  background-color: var(--brand-dark-blue) !important;
}

/* Style any progress indicators */
.MuiLinearProgress-root,
.MuiCircularProgress-root {
  color: var(--brand-blue) !important;
}

/* Ensure all links use our brand blue */
a, a:visited {
  color: var(--brand-blue) !important;
}

a:hover {
  color: var(--brand-dark-blue) !important;
}

/* Change focus ring color to brand yellow */
.focus-visible\:ring-ring:focus-visible,
*:focus-visible {
  --tw-ring-color: var(--brand-yellow) !important;
}

.watermark,
#message-composer #upload-button {
  display: none !important;
}

.empty\:before\:text-muted-foreground:empty:before {
  color:#E8EEF4 !important;
}