:root {
    --seeu-blue: #2B7A9F;
    --seeu-blue-hover: #236585;
    --seeu-blue-light: #3A8FB5;
    --seeu-blue-lighter: #E8F4F8;
    --seeu-blue-pale: #F0F8FB;

    --primary: 202.8 78.4% 39% !important;
    --primary-foreground: 0 0% 100% !important;
    --ring: 202.8 78.4% 39% !important;

    --accent: 202.8 78.4% 95% !important;
    --accent-foreground: 202.8 78.4% 20% !important;
}

.dark {
    --seeu-blue: #3A8FB5;
    --seeu-blue-hover: #4A9FC5;
    --seeu-blue-light: #5AAFD5;
    --seeu-blue-lighter: #1A3A4A;
    --seeu-blue-pale: #0F2530;

    --primary: 202.8 78.4% 55% !important;
    --primary-foreground: 0 0% 100% !important;
    --ring: 202.8 78.4% 55% !important;

    --accent: 202.8 78.4% 15% !important;
    --accent-foreground: 202.8 78.4% 80% !important;
}

button.bg-primary,
button[class*="bg-primary"],
.bg-primary {
    background-color: hsl(var(--primary)) !important;
    color: hsl(var(--primary-foreground)) !important;
    border-color: hsl(var(--primary)) !important;
}

button.bg-primary:hover,
button[class*="bg-primary"]:hover {
    background-color: #236585 !important;
}

button.bg-primary span,
button[class*="bg-primary"] span,
button.text-primary-foreground,
button.text-primary-foreground span,
.text-primary-foreground {
    color: white !important;
}

button#confirm {
    background-color: hsl(var(--primary)) !important;
    color: white !important;
}

button#confirm span {
    color: white !important;
}

button.bg-background,
button[class*="bg-background"],
button[class*="border-input"] {
    background-color: transparent !important;
    color: #1a1a1a !important;
    border-color: #e5e5e5 !important;
}

button.bg-background span,
button[class*="bg-background"] span,
button[class*="border-input"] span {
    color: #1a1a1a !important;
}

button.bg-background:hover,
button[class*="bg-background"]:hover {
    background-color: #f5f5f5 !important;
    color: #1a1a1a !important;
}

.dark button.bg-background,
.dark button[class*="bg-background"],
.dark button[class*="border-input"] {
    background-color: transparent !important;
    color: #e5e5e5 !important;
    border-color: #404040 !important;
}

.dark button.bg-background span,
.dark button[class*="bg-background"] span,
.dark button[class*="border-input"] span {
    color: #e5e5e5 !important;
}

.dark button.bg-background:hover,
.dark button[class*="bg-background"]:hover {
    background-color: #262626 !important;
    color: #e5e5e5 !important;
}

button.absolute.right-4.top-4,
button[class*="absolute"][class*="right-4"],
button:has(svg.lucide-x) {
    background-color: transparent !important;
    color: hsl(var(--primary)) !important;
}

button.absolute.right-4.top-4:hover,
button:has(svg.lucide-x):hover {
    background-color: hsl(var(--accent)) !important;
}

button:has(svg.lucide-x) svg,
button:has(svg.lucide-x) svg path,
svg.lucide-x,
svg.lucide-x path {
    stroke: hsl(var(--primary)) !important;
    color: hsl(var(--primary)) !important;
}

.dark button.absolute.right-4.top-4,
.dark button:has(svg.lucide-x) {
    background-color: transparent !important;
    color: hsl(var(--primary)) !important;
}

.dark button:has(svg.lucide-x):hover {
    background-color: hsl(var(--accent)) !important;
}

.dark button:has(svg.lucide-x) svg,
.dark button:has(svg.lucide-x) svg path,
.dark svg.lucide-x,
.dark svg.lucide-x path {
    stroke: hsl(var(--primary)) !important;
    color: hsl(var(--primary)) !important;
}

button:focus-visible,
button.focus\:ring-2:focus,
button[class*="focus:ring"]:focus,
*:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 2px hsl(var(--ring)) !important;
    --tw-ring-color: hsl(var(--ring)) !important;
}

button.absolute:focus-visible,
button:has(svg.lucide-x):focus-visible {
    box-shadow: 0 0 0 2px hsl(var(--ring)) !important;
}

.dark button:focus-visible,
.dark *:focus-visible {
    box-shadow: 0 0 0 2px hsl(var(--ring)) !important;
}

button#chat-submit,
button[type="submit"],
button[aria-label*="send"],
button[aria-label*="Send"] {
    background-color: hsl(var(--primary)) !important;
    color: white !important;
}

button#chat-submit:hover,
button[type="submit"]:hover {
    background-color: #236585 !important;
}

button#chat-submit svg,
button#chat-submit svg *,
button[type="submit"] svg,
button[type="submit"] svg * {
    stroke: white !important;
    color: white !important;
}

.MuiButton-containedPrimary,
.MuiButton-root.MuiButton-containedPrimary {
    background-color: hsl(var(--primary)) !important;
    color: white !important;
}

.MuiButton-containedPrimary:hover {
    background-color: #236585 !important;
}

.MuiButton-textPrimary,
.MuiButton-outlinedPrimary {
    color: hsl(var(--primary)) !important;
    border-color: hsl(var(--primary)) !important;
}

.MuiButton-textPrimary:hover,
.MuiButton-outlinedPrimary:hover {
    background-color: hsl(var(--accent)) !important;
}

a,
a:visited {
    color: hsl(var(--primary)) !important;
}

a:hover {
    color: #236585 !important;
}

.MuiCheckbox-colorPrimary.Mui-checked,
.MuiRadio-colorPrimary.Mui-checked {
    color: hsl(var(--primary)) !important;
}

.MuiSwitch-colorPrimary.Mui-checked .MuiSwitch-thumb {
    background-color: hsl(var(--primary)) !important;
}

.MuiSlider-root {
    color: hsl(var(--primary)) !important;
}

.MuiTab-textColorPrimary.Mui-selected {
    color: hsl(var(--primary)) !important;
}

.MuiTabs-indicator {
    background-color: hsl(var(--primary)) !important;
}

.MuiCircularProgress-colorPrimary,
.MuiLinearProgress-colorPrimary .MuiLinearProgress-bar {
    color: hsl(var(--primary)) !important;
    background-color: hsl(var(--primary)) !important;
}

.MuiBadge-colorPrimary,
.MuiChip-colorPrimary {
    background-color: hsl(var(--primary)) !important;
    color: white !important;
}

.MuiIconButton-colorPrimary {
    color: hsl(var(--primary)) !important;
}

.MuiIconButton-root:hover {
    background-color: hsl(var(--accent)) !important;
}

button[aria-label*="attach"],
button[aria-label*="upload"] {
    color: hsl(var(--primary)) !important;
}

button[aria-label*="attach"]:hover,
button[aria-label*="upload"]:hover {
    background-color: hsl(var(--accent)) !important;
}

::selection {
    background-color: hsl(var(--accent)) !important;
}

::-moz-selection {
    background-color: hsl(var(--accent)) !important;
}

::-webkit-scrollbar-thumb {
    background-color: hsl(var(--primary)) !important;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #236585 !important;
}

.MuiTooltip-tooltip {
    background-color: hsl(var(--primary)) !important;
}

[style*="rgb(244, 63, 94)"],
[style*="#f43f5e"],
[style*="rgb(251, 113, 133)"],
[style*="#fb7185"] {
    color: hsl(var(--primary)) !important;
    background-color: hsl(var(--primary)) !important;
    stroke: hsl(var(--primary)) !important;
    border-color: hsl(var(--primary)) !important;
}

.bg-rose-500,
.bg-rose-600,
.bg-pink-500,
.bg-pink-600,
.text-rose-500,
.text-rose-600,
.text-pink-500,
.text-pink-600,
.border-rose-500,
.border-rose-600,
.border-pink-500,
.border-pink-600,
.ring-rose-500,
.ring-rose-600,
.ring-pink-500,
.ring-pink-600 {
    background-color: hsl(var(--primary)) !important;
    color: hsl(var(--primary)) !important;
    stroke: hsl(var(--primary)) !important;
    border-color: hsl(var(--primary)) !important;
    --tw-ring-color: hsl(var(--primary)) !important;
}

[class*="primaryButton"],
[class*="messageAction"],
[class*="toolButton"] {
    color: hsl(var(--primary)) !important;
}

[class*="messageAction"]:hover,
[class*="toolButton"]:hover {
    background-color: hsl(var(--accent)) !important;
}

.watermark,
[class*="watermark"] {
    display: none !important;
}

/* ============================================
   LOGIN PAGE BACKGROUND - CENTERED LOGO
   ============================================ */

/* Remove grayscale and brightness filters */
.bg-muted img[alt="Image"],
img[class*="grayscale"],
img[class*="brightness"] {
    filter: none !important;
    grayscale: 0 !important;
    brightness: 1 !important;
}

.relative.bg-muted img,
div[class*="bg-muted"] img {
    filter: none !important;
    opacity: 1 !important;
}

.grayscale {
    filter: none !important;
}

.brightness-\[0\.2\] {
    filter: none !important;
}

img.grayscale.brightness-\[0\.2\] {
    filter: none !important;
}

/* Center the logo and make background white */
.relative.bg-muted,
div.relative.bg-muted.lg\:block {
    background-color: white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.relative.bg-muted img,
div.relative.bg-muted img {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    max-width: 80% !important;
    max-height: 80% !important;
    object-fit: contain !important;
}

/* ============================================
   INPUT FIELDS - REMOVE BORDERS
   ============================================ */

input:focus,
textarea:focus,
.MuiInputBase-root:focus-within,
.MuiOutlinedInput-root:focus-within {
    outline: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.MuiOutlinedInput-notchedOutline {
    border-color: transparent !important;
}

textarea#chat-input,
textarea[id="chat-input"] {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

textarea#chat-input:focus,
textarea[id="chat-input"]:focus,
textarea#chat-input:focus-visible,
textarea[id="chat-input"]:focus-visible {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    ring: none !important;
    --tw-ring-shadow: none !important;
}

textarea.border-input,
textarea[class*="border-input"] {
    border: none !important;
}

textarea.border-input:focus,
textarea[class*="border-input"]:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

[class*="active"],
[class*="selected"],
.Mui-selected {
    color: hsl(var(--primary)) !important;
}

[class*="loading"],
[class*="spinner"] {
    color: hsl(var(--primary)) !important;
    border-color: hsl(var(--primary)) !important;
}

*[class*="bg-primary"]:not(button) {
    background-color: hsl(var(--primary)) !important;
}

*[class*="text-primary"]:not([class*="foreground"]) {
    color: hsl(var(--primary)) !important;
}

/* ============================================
   WELCOME SCREEN / README TEXT COLORS
   ============================================ */

/* Light theme text colors */
.prose,
.prose h1,
.prose h2,
.prose h3,
.prose p,
.prose div,
.prose ul,
.prose li,
.prose span {
    color: inherit !important;
}

/* Dark theme - ensure text is visible */
.dark .prose,
.dark .prose h1,
.dark .prose h2,
.dark .prose h3,
.dark .prose p,
.dark .prose div,
.dark .prose ul,
.dark .prose li,
.dark .prose span:not(.font-bold) {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Welcome screen headings */
.prose h1,
.prose h2 {
    color: inherit !important;
}

/* Code blocks in welcome screen */
.prose code {
    background-color: rgba(0, 0, 0, 0.05) !important;
    color: #1a1a1a !important;
    padding: 0.2em 0.4em !important;
    border-radius: 3px !important;
}

.dark .prose code {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #e5e5e5 !important;
}

/* Links in welcome screen - keep SEEU blue */
.prose a,
.prose a.text-primary {
    color: hsl(var(--primary)) !important;
}

.prose a:hover {
    color: #236585 !important;
    text-decoration: underline !important;
}

/* Border under headings */
.prose h2.border-b {
    border-bottom-color: rgba(0, 0, 0, 0.1) !important;
}

.dark .prose h2.border-b {
    border-bottom-color: rgba(255, 255, 255, 0.2) !important;
}