/* ==========================================================================
   GPSS AI Torii — Stylish Midnight Purple (v3)
   Match reference: atmospheric chat gradient + crisp white UI text
   ========================================================================== */

:root {
	--mado-void: #050508;
	--mado-bg: #0a0a0f;
	--mado-sidebar: #0d0d0d;
	--mado-panel: #121218;
	--mado-panel-elevated: #18181f;
	--mado-surface: #1c1c24;
	--mado-border: rgba(255, 255, 255, 0.08);
	--mado-border-strong: rgba(255, 255, 255, 0.14);
	--mado-text: #ffffff;
	--mado-text-secondary: #d4d4d8;
	--mado-muted: #a1a1aa;
	--mado-accent: #a78bfa;
	--color-gray-800: #1c1c24;
	--color-gray-850: #14141a;
	--color-gray-900: #121218;
	--color-gray-950: #0d0d0d;
}

html.dark,
html.mado-purple:not(.mado-purple-light) {
	color-scheme: dark;
	background: #0a0a0f !important;
}

/*
  Main chat canvas — exact feel from screenshot:
  soft luminous violet-indigo glow in the center, deeper near-black at edges
*/
html.dark body,
html.mado-purple:not(.mado-purple-light) body {
	background:
		radial-gradient(
			ellipse 85% 75% at 58% 42%,
			#2a1f4a 0%,
			#1a1530 28%,
			#100e1c 55%,
			#0a0a10 78%,
			#07070b 100%
		) !important;
	background-attachment: fixed !important;
	color: #ffffff !important;
}

/* Let the gradient show through the main app shell (not every gray-900 panel) */
html.dark .text-gray-700.dark\:text-gray-100.bg-white.dark\:bg-gray-900,
html.mado-purple .text-gray-700.dark\:text-gray-100.bg-white.dark\:bg-gray-900,
html.dark .h-screen.max-h-\[100dvh\].overflow-auto.flex.flex-row,
html.mado-purple .h-screen.max-h-\[100dvh\].overflow-auto.flex.flex-row,
html.dark .h-screen.max-h-\[100dvh\],
html.mado-purple .h-screen.max-h-\[100dvh\] {
	background-color: transparent !important;
	background: transparent !important;
}

/* Chat / page content wrappers should not paint over the gradient */
html.dark #sidebar + div,
html.mado-purple #sidebar + div,
html.dark .flex.flex-col.flex-auto,
html.mado-purple .flex.flex-col.flex-auto,
html.dark .flex-1.flex.flex-col.h-full,
html.mado-purple .flex-1.flex.flex-col.h-full {
	background: transparent !important;
	background-color: transparent !important;
}


/* Generic elevated panels (modals, cards) stay solid — not the full-page shell */
html.dark .dark\:bg-gray-800,
html.dark .dark\:bg-gray-850,
html.dark .dark\:bg-gray-700,
html.mado-purple .dark\:bg-gray-800,
html.mado-purple .dark\:bg-gray-850,
html.mado-purple .dark\:bg-gray-700 {
	background-color: var(--mado-panel-elevated) !important;
}

html.dark .bg-white:not(.dark\:bg-gray-900),
html.mado-purple .bg-white:not(.dark\:bg-gray-900) {
	background-color: var(--mado-panel-elevated) !important;
}

html.dark .dark\:from-gray-800,
html.dark .dark\:from-gray-900,
html.mado-purple .dark\:from-gray-800,
html.mado-purple .dark\:from-gray-900 {
	--tw-gradient-from: transparent var(--tw-gradient-from-position) !important;
}

html.dark .bg-gradient-to-t,
html.mado-purple .bg-gradient-to-t {
	background-image: linear-gradient(to top, rgba(7, 7, 11, 0.75), transparent) !important;
}

/* -------------------------------------------------------------------------- */
/* Typography — white primary, soft gray secondary (NOT purple)               */
/* -------------------------------------------------------------------------- */

html.dark,
html.mado-purple,
html.dark body,
html.mado-purple body {
	color: #ffffff !important;
}

html.dark .dark\:text-white,
html.dark .dark\:text-gray-100,
html.dark .dark\:text-gray-200,
html.dark .text-gray-850,
html.dark .text-gray-900,
html.mado-purple .dark\:text-white,
html.mado-purple .dark\:text-gray-100,
html.mado-purple .dark\:text-gray-200,
html.mado-purple .text-gray-850,
html.mado-purple .text-gray-900 {
	color: #ffffff !important;
}

html.dark .dark\:text-gray-300,
html.mado-purple .dark\:text-gray-300 {
	color: #e4e4e7 !important;
}

html.dark .dark\:text-gray-400,
html.dark .dark\:text-gray-500,
html.dark .text-gray-500,
html.dark .text-gray-600,
html.mado-purple .dark\:text-gray-400,
html.mado-purple .dark\:text-gray-500,
html.mado-purple .text-gray-500,
html.mado-purple .text-gray-600 {
	color: #a1a1aa !important;
}

html.dark .dark\:text-gray-600,
html.mado-purple .dark\:text-gray-600 {
	color: #71717a !important;
}

/* Critical: UI links must be white (sidebar New Chat, Workspace, chat titles…) */
html.dark a,
html.mado-purple a {
	color: #ffffff !important;
}

html.dark a:hover,
html.mado-purple a:hover {
	color: #ffffff !important;
	opacity: 0.92;
}

/* Keep markdown / message content links slightly accented only inside prose */
html.dark .prose a,
html.mado-purple .prose a,
html.dark .markdown-prose a,
html.mado-purple .markdown-prose a {
	color: #c4b5fd !important;
}

html.dark .text-3xl,
html.mado-purple .text-3xl {
	letter-spacing: -0.02em;
	font-weight: 600;
	color: #ffffff !important;
}

/* -------------------------------------------------------------------------- */
/* Sidebar — transparent glass blur, crisp white text/icons                   */
/* -------------------------------------------------------------------------- */

html.dark #sidebar,
html.mado-purple #sidebar {
	background: rgba(12, 10, 20, 0.42) !important;
	backdrop-filter: blur(28px) saturate(1.35) !important;
	-webkit-backdrop-filter: blur(28px) saturate(1.35) !important;
	border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
	box-shadow: 8px 0 40px rgba(0, 0, 0, 0.25);
	color: #ffffff !important;
}

/* Kill opaque fills inside sidebar so blur shows through */
html.dark #sidebar.bg-gray-50,
html.dark #sidebar.dark\:bg-gray-950,
html.mado-purple #sidebar.bg-gray-50,
html.mado-purple #sidebar.dark\:bg-gray-950,
html.dark #sidebar .dark\:bg-gray-950,
html.dark #sidebar .dark\:bg-gray-900,
html.dark #sidebar .dark\:bg-gray-850,
html.mado-purple #sidebar .dark\:bg-gray-950,
html.mado-purple #sidebar .dark\:bg-gray-900,
html.mado-purple #sidebar .dark\:bg-gray-850 {
	background: transparent !important;
	background-color: transparent !important;
}

html.dark #sidebar > div,
html.mado-purple #sidebar > div {
	background: transparent !important;
}

html.dark #sidebar *,
html.mado-purple #sidebar * {
	color: inherit;
}

html.dark #sidebar,
html.dark #sidebar a,
html.dark #sidebar button,
html.dark #sidebar span,
html.dark #sidebar div,
html.mado-purple #sidebar,
html.mado-purple #sidebar a,
html.mado-purple #sidebar button,
html.mado-purple #sidebar span,
html.mado-purple #sidebar div {
	color: #ffffff !important;
}

/* Muted labels in sidebar (Timestamps, section headers) */
html.dark #sidebar .dark\:text-gray-400,
html.dark #sidebar .dark\:text-gray-500,
html.dark #sidebar .text-gray-400,
html.dark #sidebar .text-gray-500,
html.dark #sidebar .text-gray-600,
html.mado-purple #sidebar .dark\:text-gray-400,
html.mado-purple #sidebar .dark\:text-gray-500,
html.mado-purple #sidebar .text-gray-400,
html.mado-purple #sidebar .text-gray-500,
html.mado-purple #sidebar .text-gray-600 {
	color: #a1a1aa !important;
}

html.dark #sidebar svg,
html.mado-purple #sidebar svg {
	color: #ffffff !important;
	stroke: #ffffff;
}

html.dark #sidebar .hover\:bg-gray-100:hover,
html.dark #sidebar .dark\:hover\:bg-gray-850:hover,
html.dark #sidebar .dark\:hover\:bg-gray-900:hover,
html.mado-purple #sidebar .hover\:bg-gray-100:hover,
html.mado-purple #sidebar .dark\:hover\:bg-gray-850:hover,
html.mado-purple #sidebar .dark\:hover\:bg-gray-900:hover {
	background-color: rgba(255, 255, 255, 0.08) !important;
	filter: none !important;
}

html.dark #sidebar-new-chat-button:hover,
html.mado-purple #sidebar-new-chat-button:hover {
	background-color: rgba(255, 255, 255, 0.08) !important;
}

/* -------------------------------------------------------------------------- */
/* Borders                                                                    */
/* -------------------------------------------------------------------------- */

html.dark .dark\:border-gray-700,
html.dark .dark\:border-gray-800,
html.dark .dark\:border-gray-850,
html.mado-purple .dark\:border-gray-700,
html.mado-purple .dark\:border-gray-800,
html.mado-purple .dark\:border-gray-850 {
	border-color: var(--mado-border) !important;
}

html.dark hr,
html.mado-purple hr {
	border-color: var(--mado-border) !important;
}

/* -------------------------------------------------------------------------- */
/* Chat input — glass pill; focus ring wraps the FULL rounded container       */
/* -------------------------------------------------------------------------- */

html.dark .flex-1.flex.flex-col.relative.w-full.rounded-3xl,
html.mado-purple .flex-1.flex.flex-col.relative.w-full.rounded-3xl,
html.dark .rounded-3xl.px-1\.5,
html.mado-purple .rounded-3xl.px-1\.5 {
	background: rgba(20, 18, 30, 0.72) !important;
	backdrop-filter: blur(22px) saturate(1.2);
	-webkit-backdrop-filter: blur(22px) saturate(1.2);
	border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
	box-shadow:
		0 16px 48px rgba(0, 0, 0, 0.45),
		inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
	border-radius: 1.75rem !important;
	outline: none !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Full-pill violet highlight when any child (textarea/buttons) is focused */
html.dark .flex-1.flex.flex-col.relative.w-full.rounded-3xl:focus-within,
html.mado-purple .flex-1.flex.flex-col.relative.w-full.rounded-3xl:focus-within,
html.dark .rounded-3xl.px-1\.5:focus-within,
html.mado-purple .rounded-3xl.px-1\.5:focus-within {
	border-color: rgba(167, 139, 250, 0.85) !important;
	outline: none !important;
	box-shadow:
		0 0 0 3px rgba(167, 139, 250, 0.28),
		0 0 28px rgba(124, 58, 237, 0.35),
		0 16px 48px rgba(0, 0, 0, 0.4),
		inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Never draw a partial focus ring on the textarea or inner controls */
html.dark #chat-textarea,
html.dark #chat-textarea:focus,
html.dark #chat-textarea:focus-visible,
html.mado-purple #chat-textarea,
html.mado-purple #chat-textarea:focus,
html.mado-purple #chat-textarea:focus-visible {
	background: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	color: #ffffff !important;
}

html.dark .rounded-3xl.px-1\.5 *:focus,
html.dark .rounded-3xl.px-1\.5 *:focus-visible,
html.dark .flex-1.flex.flex-col.relative.w-full.rounded-3xl *:focus,
html.dark .flex-1.flex.flex-col.relative.w-full.rounded-3xl *:focus-visible,
html.mado-purple .rounded-3xl.px-1\.5 *:focus,
html.mado-purple .rounded-3xl.px-1\.5 *:focus-visible,
html.mado-purple .flex-1.flex.flex-col.relative.w-full.rounded-3xl *:focus,
html.mado-purple .flex-1.flex.flex-col.relative.w-full.rounded-3xl *:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

html.dark #chat-textarea::placeholder,
html.mado-purple #chat-textarea::placeholder {
	color: #a1a1aa !important;
}

/* White circular send button (reference style) */
html.dark .bg-black.text-white,
html.dark .dark\:bg-white.dark\:text-black,
html.mado-purple .bg-black.text-white,
html.mado-purple .dark\:bg-white.dark\:text-black {
	background: #ffffff !important;
	color: #111111 !important;
	border: none !important;
	box-shadow: 0 2px 12px rgba(255, 255, 255, 0.15) !important;
}

html.dark .bg-black.text-white:hover,
html.mado-purple .bg-black.text-white:hover {
	background: #f4f4f5 !important;
	filter: none !important;
}

/* -------------------------------------------------------------------------- */
/* Empty / hero state — same layout in dark + light                          */
/* -------------------------------------------------------------------------- */

html.dark .m-auto.w-full.max-w-6xl.px-8,
html.dark .m-auto.w-full.max-w-3xl,
html.mado-purple .m-auto.w-full.max-w-6xl.px-8,
html.mado-purple .m-auto.w-full.max-w-3xl,
html.mado-purple-light .m-auto.w-full.max-w-6xl.px-8,
html.mado-purple-light .m-auto.w-full.max-w-3xl,
html.light.mado-purple-light .m-auto.w-full.max-w-6xl.px-8,
html.light.mado-purple-light .m-auto.w-full.max-w-3xl {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-top: auto !important;
	margin-bottom: auto !important;
	background: transparent !important;
}

html.dark .m-auto.w-full.max-w-6xl .flex.justify-start,
html.mado-purple .m-auto.w-full.max-w-6xl .flex.justify-start,
html.mado-purple-light .m-auto.w-full.max-w-6xl .flex.justify-start {
	justify-content: center !important;
}

html.dark .m-auto.w-full.max-w-6xl .text-left,
html.mado-purple .m-auto.w-full.max-w-6xl .text-left,
html.mado-purple-light .m-auto.w-full.max-w-6xl .text-left {
	text-align: center !important;
	align-items: center !important;
	justify-content: center !important;
	flex-direction: column !important;
}

/* Model avatars only — never shrink the main welcome logo */
html.dark .m-auto.w-full.max-w-6xl img.size-\[2\.7rem\],
html.mado-purple .m-auto.w-full.max-w-6xl img.size-\[2\.7rem\],
html.mado-purple-light .m-auto.w-full.max-w-6xl img.size-\[2\.7rem\],
html.dark .m-auto.w-full.max-w-3xl img:not(.mado-chat-main-logo),
html.mado-purple .m-auto.w-full.max-w-3xl img:not(.mado-chat-main-logo),
html.mado-purple-light .m-auto.w-full.max-w-3xl img:not(.mado-chat-main-logo) {
	width: 4.5rem !important;
	height: 4.5rem !important;
	border-radius: 1.25rem !important;
	box-shadow:
		0 0 0 1px rgba(167, 139, 250, 0.3),
		0 0 48px rgba(124, 58, 237, 0.4),
		0 12px 32px rgba(0, 0, 0, 0.45) !important;
	border: none !important;
}

html.dark .mado-chat-main-logo,
html.mado-purple .mado-chat-main-logo,
html.mado-purple-light .mado-chat-main-logo {
	width: 22rem !important;
	height: auto !important;
	max-width: min(22rem, 85vw) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* -------------------------------------------------------------------------- */
/* Hovers / selection                                                         */
/* -------------------------------------------------------------------------- */

html.dark button:not([disabled]):hover,
html.mado-purple button:not([disabled]):hover {
	filter: none;
}

html.dark .hover\:bg-gray-900:hover,
html.mado-purple .hover\:bg-gray-900:hover,
html.dark .dark\:hover\:bg-gray-800:hover,
html.mado-purple .dark\:hover\:bg-gray-800:hover,
html.dark .dark\:hover\:bg-gray-850:hover,
html.mado-purple .dark\:hover\:bg-gray-850:hover {
	background-color: rgba(255, 255, 255, 0.06) !important;
}

html.dark .bg-gray-900,
html.mado-purple .bg-gray-900 {
	background-color: rgba(255, 255, 255, 0.06) !important;
}

html.dark ::selection,
html.mado-purple ::selection {
	background: rgba(139, 92, 246, 0.35);
	color: #fff;
}

html.dark,
html.mado-purple:not(.mado-purple-light) {
	scrollbar-width: thin;
	scrollbar-color: rgba(167, 139, 250, 0.45) rgba(255, 255, 255, 0.04);
}

html.dark ::-webkit-scrollbar,
html.mado-purple:not(.mado-purple-light) ::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

html.dark ::-webkit-scrollbar-track,
html.mado-purple:not(.mado-purple-light) ::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.04) !important;
	border-radius: 999px;
}

html.dark ::-webkit-scrollbar-thumb,
html.mado-purple:not(.mado-purple-light) ::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, rgba(167, 139, 250, 0.45), rgba(124, 58, 237, 0.55)) !important;
	border: 2px solid transparent !important;
	background-clip: padding-box !important;
	border-radius: 999px !important;
}

html.dark ::-webkit-scrollbar-thumb:hover,
html.mado-purple:not(.mado-purple-light) ::-webkit-scrollbar-thumb:hover {
	background: rgba(196, 181, 253, 0.7) !important;
}

/* -------------------------------------------------------------------------- */
/* Modals / nav / auth                                                        */
/* -------------------------------------------------------------------------- */

html.dark .shadow-3xl,
html.mado-purple .shadow-3xl {
	background: rgba(18, 18, 24, 0.94) !important;
	backdrop-filter: blur(24px);
	border: 1px solid var(--mado-border-strong) !important;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55) !important;
	border-radius: 1.25rem !important;
	color: #ffffff !important;
}

html.dark #nav,
html.mado-purple #nav {
	background: transparent !important;
	backdrop-filter: blur(8px);
	color: #ffffff !important;
}

html.dark #splash-screen,
html.mado-purple #splash-screen {
	background:
		radial-gradient(ellipse 70% 50% at 50% 40%, #2a1f4a, #07070b 70%) !important;
}

html.dark #splash-screen img,
html.mado-purple #splash-screen img {
	filter: none !important;
	box-shadow: 0 0 60px rgba(124, 58, 237, 0.45);
}

html.dark .bg-teal-600,
html.dark .bg-violet-600,
html.mado-purple .bg-teal-600,
html.mado-purple .bg-violet-600 {
	background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
	color: #ffffff !important;
	box-shadow: 0 8px 28px rgba(124, 58, 237, 0.35) !important;
}

html.dark *:focus-visible,
html.mado-purple *:focus-visible {
	outline: 2px solid rgba(167, 139, 250, 0.55) !important;
	outline-offset: 2px;
}

/* Input box handles its own full-pill focus ring — suppress child outlines */
html.dark .rounded-3xl.px-1\.5 *:focus-visible,
html.dark .flex-1.flex.flex-col.relative.w-full.rounded-3xl *:focus-visible,
html.mado-purple .rounded-3xl.px-1\.5 *:focus-visible,
html.mado-purple .flex-1.flex.flex-col.relative.w-full.rounded-3xl *:focus-visible,
html.dark #chat-textarea:focus-visible,
html.mado-purple #chat-textarea:focus-visible {
	outline: none !important;
	outline-offset: 0 !important;
}

html.dark .rounded-full,
html.mado-purple .rounded-full {
	box-shadow: none;
}

/* Workspace / admin / settings pages: white text on transparent/gradient shell */
html.dark .min-h-screen,
html.mado-purple .min-h-screen {
	color: #ffffff;
}

/* ===== Commercial auth / login page (always dark — ignore light theme) ===== */
html:has(.mado-auth-page),
html:has(.mado-auth-page) body,
body:has(.mado-auth-page) {
	background:
		radial-gradient(ellipse 90% 75% at 50% 35%, #2a1f4a 0%, #16122a 32%, #0c0c12 68%, #07070b 100%) !important;
	color: #ffffff !important;
	color-scheme: dark !important;
}

body .bg-white.dark\:bg-black.min-h-screen,
body .dark\:bg-black.min-h-screen.w-full.flex.justify-center.font-mona,
.mado-auth-page,
html.mado-purple-light .mado-auth-page,
html.light .mado-auth-page,
html.light.mado-purple-light .mado-auth-page {
	background:
		radial-gradient(ellipse 90% 75% at 50% 35%, #2a1f4a 0%, #16122a 32%, #0c0c12 68%, #07070b 100%) !important;
	color: #ffffff !important;
}

body .bg-white.dark\:bg-black.min-h-screen .text-4xl,
body .dark\:bg-black .text-4xl,
.mado-auth-page h1,
.mado-auth-page .text-white,
.mado-auth-page .text-2xl,
.mado-auth-page .text-4xl,
html.mado-purple-light .mado-auth-page h1,
html.mado-purple-light .mado-auth-page .text-white,
html.light .mado-auth-page h1,
html.light .mado-auth-page .text-white {
	color: #ffffff !important;
}

.mado-auth-page p,
.mado-auth-page .text-white\/55,
html.mado-purple-light .mado-auth-page p,
html.light .mado-auth-page p {
	color: rgba(255, 255, 255, 0.55) !important;
}

/* Title line on production auth is a <p class="text-3xl ..."> */
.mado-auth-page p.text-3xl,
.mado-auth-page p.text-4xl,
.mado-auth-page .text-3xl,
.mado-auth-page .text-4xl,
.mado-auth-page .text-2xl,
html.mado-purple-light .mado-auth-page p.text-3xl,
html.mado-purple-light .mado-auth-page .text-3xl,
html.light .mado-auth-page p.text-3xl,
html.light .mado-auth-page .text-3xl {
	color: #ffffff !important;
}

.mado-auth-page .text-white\/35,
.mado-auth-page .text-xs,
html.mado-purple-light .mado-auth-page .text-xs,
html.light .mado-auth-page .text-xs {
	color: rgba(255, 255, 255, 0.35) !important;
}

body .footer.mt-10 {
	color: rgba(255,255,255,.35) !important;
}
body .bg-violet-600,
body .mado-auth-btn,
html.mado-purple-light .mado-auth-btn,
html.light .mado-auth-btn {
	background: linear-gradient(135deg, #7c3aed 0%, #9333ea 45%, #a855f7 100%) !important;
	box-shadow: 0 12px 36px rgba(124, 58, 237, 0.4) !important;
	color: #ffffff !important;
}

/* Range / slider controls — purple thumb + track (Embedding Batch Size, etc.) */
html.mado-purple input[type='range'],
html.mado-purple-light input[type='range'],
html.dark input[type='range'],
html.light input[type='range'] {
	accent-color: #7c3aed !important;
	-webkit-appearance: none;
	appearance: none;
	height: 0.5rem !important;
	border-radius: 999px !important;
	background: rgba(124, 58, 237, 0.22) !important;
	border: 0 !important;
	box-shadow: none !important;
	outline: none !important;
}

html.mado-purple-light input[type='range'] {
	background: rgba(124, 58, 237, 0.18) !important;
}

html.mado-purple input[type='range']::-webkit-slider-runnable-track,
html.mado-purple-light input[type='range']::-webkit-slider-runnable-track,
html.dark input[type='range']::-webkit-slider-runnable-track,
html.light input[type='range']::-webkit-slider-runnable-track {
	height: 0.5rem;
	border-radius: 999px;
	background: rgba(124, 58, 237, 0.22);
}

html.mado-purple input[type='range']::-webkit-slider-thumb,
html.mado-purple-light input[type='range']::-webkit-slider-thumb,
html.dark input[type='range']::-webkit-slider-thumb,
html.light input[type='range']::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 1.05rem;
	height: 1.05rem;
	margin-top: -0.28rem;
	border-radius: 999px;
	background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
	border: 2px solid #ede9fe;
	box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.28), 0 4px 12px rgba(76, 29, 149, 0.35);
	cursor: pointer;
}

html.mado-purple input[type='range']::-moz-range-track,
html.mado-purple-light input[type='range']::-moz-range-track {
	height: 0.5rem;
	border-radius: 999px;
	background: rgba(124, 58, 237, 0.22);
}

html.mado-purple input[type='range']::-moz-range-thumb,
html.mado-purple-light input[type='range']::-moz-range-thumb {
	width: 1.05rem;
	height: 1.05rem;
	border-radius: 999px;
	background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
	border: 2px solid #ede9fe;
	box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.28);
	cursor: pointer;
}


/* ===== Auth commercial polish (v4) ===== */
.mado-auth-page {
	background:
		radial-gradient(ellipse 90% 75% at 50% 35%, #2a1f4a 0%, #16122a 32%, #0c0c12 68%, #07070b 100%) !important;
	min-height: 100vh;
	color: #fff !important;
}
.mado-auth-logo,
img.mado-auth-logo {
	width: 22rem !important;
	height: auto !important;
	max-width: min(22rem, 85vw) !important;
	object-fit: contain !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.mado-auth-corner-logo {
	width: 8rem !important;
	height: auto !important;
	display: none !important;
}

.mado-logo-swap {
	display: grid;
	justify-items: center;
	align-items: center;
	line-height: 0;
}
.mado-logo-swap > img {
	grid-area: 1 / 1;
	transition: none !important;
}
html:not(.mado-purple-light) .mado-logo-swap .mado-logo-light {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}
html.mado-purple-light .mado-logo-swap .mado-logo-dark {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

.mado-chat-main-logo {
	width: 22rem !important;
	height: auto !important;
	max-width: min(22rem, 85vw);
	object-fit: contain !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	filter: drop-shadow(0 0 28px rgba(139, 92, 246, 0.26));
}

.mado-sidebar-brand {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0.15rem 0.9rem 0.55rem;
}

img.mado-sidebar-logo {
	width: 11rem !important;
	max-width: calc(100% - 1rem) !important;
	height: auto !important;
	object-fit: contain !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	transform: none !important;
}

/* Keep disabled web-search controls visible in dark mode. */
button[role='switch'][data-state='unchecked'] {
	background: rgba(75, 85, 99, 0.72) !important;
	outline-color: rgba(156, 163, 175, 0.55) !important;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}

button[role='switch'][data-state='unchecked'] > [data-state='unchecked'] {
	background: #e5e7eb !important;
}

div.flex.gap-2.items-center:has(button[role='switch'][data-state='unchecked']) {
	background: rgba(255, 255, 255, 0.035);
}

/* Sidebar search: one complete pill, with icon and input inside it. */
html.mado-purple #chat-search {
	display: flex;
	align-items: center;
	overflow: hidden;
	min-height: 2.35rem;
	border: 1px solid rgba(167, 139, 250, 0.18);
	border-radius: 0.8rem;
	background: rgba(24, 19, 38, 0.64);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
	transition:
		border-color 160ms ease,
		box-shadow 160ms ease,
		background-color 160ms ease;
}

html.mado-purple #chat-search:focus-within {
	border-color: rgba(167, 139, 250, 0.72);
	background: rgba(31, 24, 49, 0.82);
	box-shadow:
		0 0 0 3px rgba(139, 92, 246, 0.12),
		0 6px 20px rgba(0, 0, 0, 0.14);
}

html.mado-purple #chat-search > div:first-child {
	flex: 0 0 auto;
	padding-left: 0.75rem;
	padding-right: 0;
	background: transparent !important;
}

html.mado-purple #chat-search input {
	min-width: 0;
	height: 2.25rem;
	padding: 0.35rem 0.8rem 0.35rem 0.6rem !important;
	color: rgba(255, 255, 255, 0.88) !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	outline: none !important;
	box-shadow: none !important;
}

html.mado-purple #chat-search input:focus {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* Workspace and settings search fields use the same complete-pill pattern. */
html.mado-purple .mado-section-search {
	display: flex;
	align-items: center;
	overflow: hidden;
	min-height: 2.5rem;
	border: 1px solid rgba(167, 139, 250, 0.2);
	border-radius: 0.8rem;
	background: rgba(24, 19, 38, 0.68);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.025),
		0 5px 16px rgba(0, 0, 0, 0.1);
	transition:
		border-color 160ms ease,
		box-shadow 160ms ease,
		background-color 160ms ease;
}

html.mado-purple .mado-section-search:focus-within {
	border-color: rgba(167, 139, 250, 0.72);
	background: rgba(31, 24, 49, 0.86);
	box-shadow:
		0 0 0 3px rgba(139, 92, 246, 0.12),
		0 7px 22px rgba(0, 0, 0, 0.16);
}

html.mado-purple .mado-section-search > div:first-child {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	margin: 0 !important;
	padding: 0 0 0 0.85rem;
	color: rgba(196, 181, 253, 0.76);
	background: transparent !important;
}

html.mado-purple .mado-section-search input {
	min-width: 0;
	height: 2.4rem;
	padding: 0.4rem 0.9rem 0.4rem 0.65rem !important;
	color: rgba(255, 255, 255, 0.9) !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	outline: none !important;
	box-shadow: none !important;
}

html.mado-purple .mado-section-search input:focus {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* User guide popup */
html.mado-purple .mado-guide-modal .mado-guide-card {
	background: rgba(24, 19, 38, 0.72) !important;
	border-color: rgba(167, 139, 250, 0.2) !important;
}

html.mado-purple .mado-guide-modal .mado-guide-link {
	color: #c4b5fd !important;
	text-decoration: none;
}

html.mado-purple-light .mado-guide-modal,
html.mado-purple .mado-guide-modal.mado-guide-light {
	color: #1e1235 !important;
	background: #ffffff !important;
}

html.mado-purple-light .mado-guide-modal .mado-guide-header,
html.mado-purple .mado-guide-modal.mado-guide-light .mado-guide-header {
	color: #2e1065 !important;
	border-bottom: 1px solid rgba(124, 58, 237, 0.14);
}

html.mado-purple-light .mado-guide-modal .mado-guide-link,
html.mado-purple .mado-guide-modal.mado-guide-light .mado-guide-link {
	color: #7c3aed !important;
}

html.mado-purple-light .mado-guide-modal .mado-guide-frame,
html.mado-purple .mado-guide-modal.mado-guide-light .mado-guide-frame {
	background: #f7f5fc !important;
}

/* Keep General settings choices compact, aligned, and equal in size. */
html.mado-purple .mado-settings-panel .mado-settings-choice {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 10.5rem !important;
	min-width: 10.5rem !important;
	max-width: 10.5rem !important;
	height: 2.5rem !important;
	min-height: 2.5rem !important;
	margin: 0.2rem 0;
	padding: 0.5rem 2rem 0.5rem 0.75rem !important;
	color: rgba(237, 233, 254, 0.92) !important;
	font-size: 0.75rem !important;
	line-height: 1rem !important;
	text-align: center !important;
	text-align-last: center;
	white-space: nowrap;
	border: 1px solid rgba(167, 139, 250, 0.2) !important;
	border-radius: 0.8rem !important;
	background-color: rgba(29, 23, 45, 0.82) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

html.mado-purple .mado-settings-panel .mado-theme-choice {
	padding-right: 0.75rem !important;
}

html.mado-purple .mado-settings-panel select.mado-settings-choice:focus {
	border-color: rgba(167, 139, 250, 0.68) !important;
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12) !important;
}

html.mado-purple .mado-settings-panel select.mado-settings-choice option {
	text-align: left;
	background: #1b142d !important;
}

/* ===== Editable controls across settings, admin, and workspace ===== */
html.mado-purple form:not(:has(#chat-textarea))
	input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']),
html.mado-purple form:not(:has(#chat-textarea)) select,
html.mado-purple form:not(:has(#chat-textarea)) textarea,
html.mado-purple .mado-settings-panel input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']),
html.mado-purple .mado-settings-panel select,
html.mado-purple .mado-settings-panel textarea {
	color: rgba(255, 255, 255, 0.92) !important;
	background-color: rgba(29, 23, 45, 0.82) !important;
	border: 1px solid rgba(167, 139, 250, 0.18) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.03),
		0 4px 14px rgba(0, 0, 0, 0.1) !important;
	transition:
		border-color 160ms ease,
		box-shadow 160ms ease,
		background-color 160ms ease;
}

html.mado-purple form:not(:has(#chat-textarea)) input:focus,
html.mado-purple form:not(:has(#chat-textarea)) select:focus,
html.mado-purple form:not(:has(#chat-textarea)) textarea:focus,
html.mado-purple .mado-settings-panel input:focus,
html.mado-purple .mado-settings-panel select:focus,
html.mado-purple .mado-settings-panel textarea:focus {
	background-color: rgba(37, 28, 58, 0.94) !important;
	border-color: rgba(167, 139, 250, 0.68) !important;
	outline: none !important;
	box-shadow:
		0 0 0 3px rgba(139, 92, 246, 0.12),
		0 8px 22px rgba(0, 0, 0, 0.16) !important;
}

html.mado-purple form:not(:has(#chat-textarea)) input::placeholder,
html.mado-purple form:not(:has(#chat-textarea)) textarea::placeholder,
html.mado-purple .mado-settings-panel input::placeholder,
html.mado-purple .mado-settings-panel textarea::placeholder {
	color: rgba(255, 255, 255, 0.34) !important;
}

html.mado-purple form:not(:has(#chat-textarea)) select option,
html.mado-purple .mado-settings-panel select option {
	color: #f5f3ff !important;
	background: #1b142d !important;
}

html.mado-purple form:not(:has(#chat-textarea)) button[type='button']:not([role='switch']),
html.mado-purple button[class~='dark:bg-gray-900'] {
	color: rgba(255, 255, 255, 0.9) !important;
	background: linear-gradient(145deg, rgba(57, 43, 87, 0.72), rgba(31, 25, 47, 0.82)) !important;
	border: 1px solid rgba(167, 139, 250, 0.18) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

html.mado-purple form:not(:has(#chat-textarea)) button[type='button']:not([role='switch']):hover,
html.mado-purple button[class~='dark:bg-gray-900']:hover {
	background: linear-gradient(145deg, rgba(99, 68, 155, 0.8), rgba(55, 38, 89, 0.84)) !important;
	border-color: rgba(196, 181, 253, 0.36) !important;
}

html.mado-purple button[class~='dark:bg-gray-800'] {
	background: linear-gradient(135deg, rgba(124, 58, 237, 0.24), rgba(168, 85, 247, 0.14)) !important;
	border: 1px solid rgba(167, 139, 250, 0.14);
}

/* ===== Professional selects, section tabs, and action buttons ===== */
html.mado-purple
	:is(.mado-admin-page, .mado-workspace-page, .mado-settings-panel)
	select {
	min-height: 2.5rem;
	padding: 0.55rem 2.5rem 0.55rem 0.9rem !important;
	color: rgba(255, 255, 255, 0.92) !important;
	background-color: rgba(27, 21, 43, 0.96) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='m6 8 4 4 4-4' stroke='%23c4b5fd' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 0.8rem center !important;
	background-size: 1rem !important;
	border: 1px solid rgba(167, 139, 250, 0.22) !important;
	border-radius: 0.75rem !important;
	outline: none !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.035),
		0 6px 18px rgba(0, 0, 0, 0.14) !important;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

html.mado-purple
	:is(.mado-admin-page, .mado-workspace-page, .mado-settings-panel)
	select:hover {
	border-color: rgba(196, 181, 253, 0.4) !important;
	background-color: rgba(34, 26, 53, 0.98) !important;
}

html.mado-purple
	:is(.mado-admin-page, .mado-workspace-page, .mado-settings-panel)
	select:focus {
	border-color: rgba(167, 139, 250, 0.72) !important;
	box-shadow:
		0 0 0 3px rgba(139, 92, 246, 0.13),
		0 8px 24px rgba(0, 0, 0, 0.18) !important;
}

html.mado-purple
	:is(.mado-admin-page, .mado-workspace-page, .mado-settings-panel)
	select:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.mado-section-tabs {
	gap: 0.25rem;
	padding: 0.3rem !important;
	border: 1px solid rgba(167, 139, 250, 0.1);
	background: rgba(18, 15, 29, 0.5) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.mado-section-tabs a {
	padding: 0.45rem 0.85rem !important;
	border: 1px solid transparent;
	color: rgba(255, 255, 255, 0.65) !important;
	transition:
		color 150ms ease,
		background-color 150ms ease,
		border-color 150ms ease,
		box-shadow 150ms ease;
}

.mado-section-tabs a:hover {
	color: #fff !important;
	background: rgba(124, 58, 237, 0.1);
}

.mado-section-tabs a[class~='dark:bg-gray-850'] {
	color: #fff !important;
	background: linear-gradient(135deg, rgba(124, 58, 237, 0.3), rgba(168, 85, 247, 0.18)) !important;
	border-color: rgba(167, 139, 250, 0.2);
	box-shadow:
		0 5px 16px rgba(0, 0, 0, 0.18),
		inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html.mado-purple
	:is(.mado-admin-page, .mado-workspace-page, .mado-settings-panel)
	button[type='submit'],
html.mado-purple
	:is(.mado-admin-page, .mado-workspace-page, .mado-settings-panel)
	button.bg-emerald-700 {
	min-height: 2.4rem;
	padding: 0.55rem 1rem !important;
	color: #fff !important;
	font-weight: 600;
	border: 1px solid rgba(216, 180, 254, 0.22) !important;
	border-radius: 0.75rem !important;
	background: linear-gradient(135deg, #7c3aed 0%, #9333ea 52%, #a855f7 100%) !important;
	box-shadow:
		0 10px 26px rgba(124, 58, 237, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
	transition:
		transform 150ms ease,
		filter 150ms ease,
		box-shadow 150ms ease;
}

html.mado-purple
	:is(.mado-admin-page, .mado-workspace-page, .mado-settings-panel)
	button[type='submit']:hover,
html.mado-purple
	:is(.mado-admin-page, .mado-workspace-page, .mado-settings-panel)
	button.bg-emerald-700:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
	box-shadow:
		0 14px 32px rgba(124, 58, 237, 0.4),
		inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

html.mado-purple
	:is(.mado-admin-page, .mado-workspace-page)
	form
	button[type='button']:not([role='switch']) {
	border-radius: 0.65rem !important;
	transition:
		background-color 150ms ease,
		border-color 150ms ease,
		transform 150ms ease;
}

/* ===== Welcome modal ===== */
.fixed:has(.mado-welcome-content) {
	background: rgba(3, 2, 10, 0.72) !important;
	backdrop-filter: blur(12px) saturate(1.15);
	-webkit-backdrop-filter: blur(12px) saturate(1.15);
}

.fixed > div:has(> .mado-welcome-content) {
	width: min(30rem, calc(100vw - 2rem)) !important;
	border-radius: 1.75rem !important;
	overflow: hidden;
	background:
		radial-gradient(circle at 50% 0%, rgba(139, 92, 246, 0.3), transparent 52%),
		linear-gradient(145deg, rgba(30, 23, 51, 0.98), rgba(10, 9, 18, 0.98)) !important;
	border: 1px solid rgba(196, 181, 253, 0.2);
	box-shadow:
		0 32px 90px rgba(0, 0, 0, 0.62),
		0 0 60px rgba(124, 58, 237, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.mado-welcome-content {
	position: relative;
	padding: 2.25rem 2.25rem 2rem;
	color: #fff !important;
}

.mado-welcome-content::before,
.mado-welcome-content::after {
	content: '';
	position: absolute;
	border-radius: 999px;
	pointer-events: none;
}

.mado-welcome-content::before {
	width: 10rem;
	height: 10rem;
	top: -6rem;
	left: -4rem;
	background: rgba(168, 85, 247, 0.17);
	filter: blur(30px);
}

.mado-welcome-content::after {
	width: 8rem;
	height: 8rem;
	right: -4rem;
	bottom: -5rem;
	background: rgba(59, 130, 246, 0.14);
	filter: blur(28px);
}

.mado-welcome-row {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.75rem;
}

.mado-welcome-title {
	width: 100%;
	text-align: center;
	font-size: 1.6rem;
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: #fff !important;
}

.mado-welcome-title::before {
	content: '';
	display: block;
	width: 10rem;
	height: 4.5rem;
	margin: 0 auto 1rem;
	background: url('/static/GPSS_AI_dark.png?v=2') center / contain no-repeat;
	filter: drop-shadow(0 0 20px rgba(168, 85, 247, 0.4));
}

html.mado-purple-light .mado-welcome-title::before,
html.light .mado-welcome-title::before {
	background: url('/static/GPSS_AI_light.png?v=2') center / contain no-repeat;
	filter: drop-shadow(0 0 12px rgba(124, 58, 237, 0.25));
}

.mado-welcome-title::after {
	content: 'Your secure AI workspace is ready.';
	display: block;
	margin-top: 0.65rem;
	font-size: 0.875rem;
	line-height: 1.5;
	font-weight: 400;
	letter-spacing: 0;
	color: rgba(255, 255, 255, 0.55);
}

.mado-welcome-actions {
	width: 100%;
	font-size: 0.875rem;
	font-weight: 600;
}

.mado-welcome-btn {
	position: relative;
	width: 100%;
	padding: 0.85rem 1.25rem;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 1rem;
	color: #fff !important;
	background: linear-gradient(135deg, #7c3aed 0%, #9333ea 50%, #a855f7 100%) !important;
	box-shadow: 0 12px 32px rgba(124, 58, 237, 0.38);
	transition:
		transform 160ms ease,
		filter 160ms ease,
		box-shadow 160ms ease;
}

.mado-welcome-btn:hover {
	filter: brightness(1.1);
	transform: translateY(-1px);
	box-shadow: 0 16px 40px rgba(124, 58, 237, 0.48);
}

/* ===== App notifications ===== */
[data-sonner-toaster] {
	--width: 23rem !important;
}

[data-sonner-toast][data-styled='true'] {
	color: rgba(255, 255, 255, 0.94) !important;
	background:
		linear-gradient(135deg, rgba(35, 25, 60, 0.96), rgba(15, 12, 27, 0.97)) !important;
	border: 1px solid rgba(196, 181, 253, 0.22) !important;
	border-radius: 1rem !important;
	box-shadow:
		0 18px 55px rgba(0, 0, 0, 0.48),
		0 0 35px rgba(124, 58, 237, 0.16),
		inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
	backdrop-filter: blur(18px) saturate(1.25);
	-webkit-backdrop-filter: blur(18px) saturate(1.25);
	padding: 0.9rem 1rem !important;
}

[data-sonner-toast][data-styled='true'][data-type='success'] {
	color: #f5f3ff !important;
	background:
		radial-gradient(circle at 0% 50%, rgba(139, 92, 246, 0.28), transparent 48%),
		linear-gradient(135deg, rgba(39, 28, 68, 0.97), rgba(17, 13, 31, 0.98)) !important;
	border-color: rgba(167, 139, 250, 0.38) !important;
}

[data-sonner-toast][data-type='success'] [data-icon] {
	color: #c4b5fd !important;
}

[data-sonner-toast][data-type='success'] [data-icon] svg {
	color: #c4b5fd !important;
	fill: currentColor;
}

[data-sonner-toast] [data-title] {
	font-weight: 600 !important;
	letter-spacing: -0.01em;
}

[data-sonner-toast] [data-description] {
	color: rgba(255, 255, 255, 0.58) !important;
}

/* ===== Settings controls and actions ===== */
body button.bg-emerald-700,
body button.bg-green-700,
body button.bg-teal-700 {
	color: #fff !important;
	background: linear-gradient(135deg, #7c3aed 0%, #9333ea 52%, #a855f7 100%) !important;
	border: 1px solid rgba(196, 181, 253, 0.2) !important;
	box-shadow:
		0 8px 24px rgba(124, 58, 237, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.09) !important;
}

body button.bg-emerald-700:hover,
body button.hover\:bg-emerald-800:hover,
body button.bg-green-700:hover,
body button.hover\:bg-green-800:hover,
body button.bg-teal-700:hover,
body button.hover\:bg-teal-800:hover {
	background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 55%, #c084fc 100%) !important;
	filter: brightness(1.06);
	box-shadow:
		0 10px 30px rgba(124, 58, 237, 0.42),
		inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

body .bg-emerald-600,
body .bg-green-600,
body .bg-teal-600 {
	background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
	border-color: rgba(196, 181, 253, 0.28) !important;
	box-shadow: 0 0 14px rgba(139, 92, 246, 0.25);
}

body .text-emerald-400,
body .text-green-400,
body .text-teal-400 {
	color: #c4b5fd !important;
}

/* ===== Hide Open WebUI branding / outbound community links ===== */
div.my-16:has(a[href*="openwebui.com"]) {
	display: none !important;
}
a[href*="openwebui.com"],
a[href*="github.com/open-webui"],
a[href*="discord.gg/5rJgQTnV4s"] {
	display: none !important;
}

/* ==========================================================================
   Mado Purple LIGHT — white / soft lilac canvas, purple accents
   Class: html.light.mado-purple-light  (theme value: "light mado-purple-light")
   ========================================================================== */

html.light.mado-purple-light,
html.mado-purple-light {
	color-scheme: light;
	background: #f7f5fc !important;
}

html.light.mado-purple-light body,
html.mado-purple-light body {
	background:
		radial-gradient(
			ellipse 90% 70% at 55% 18%,
			#efe7ff 0%,
			#f5f1fc 35%,
			#faf8ff 65%,
			#ffffff 100%
		) !important;
	background-attachment: fixed !important;
	color: #1e1235 !important;
}

html.mado-purple-light {
	--mado-void: #f7f5fc;
	--mado-bg: #ffffff;
	--mado-sidebar: rgba(255, 255, 255, 0.72);
	--mado-panel: #ffffff;
	--mado-panel-elevated: #ffffff;
	--mado-surface: #f3effa;
	--mado-border: rgba(109, 40, 217, 0.14);
	--mado-border-strong: rgba(109, 40, 217, 0.28);
	--mado-text: #1e1235;
	--mado-text-secondary: #4c3b6b;
	--mado-muted: #7c6b99;
	--mado-accent: #7c3aed;
	--color-gray-800: #ede9fe;
	--color-gray-850: #f5f3ff;
	--color-gray-900: #faf8ff;
	--color-gray-950: #ffffff;
}

html.mado-purple-light .text-gray-700.dark\:text-gray-100.bg-white.dark\:bg-gray-900,
html.mado-purple-light .h-screen.max-h-\[100dvh\].overflow-auto.flex.flex-row,
html.mado-purple-light .h-screen.max-h-\[100dvh\],
html.mado-purple-light #sidebar + div,
html.mado-purple-light .flex.flex-col.flex-auto,
html.mado-purple-light .flex-1.flex.flex-col.h-full {
	background: transparent !important;
	background-color: transparent !important;
	color: #1e1235 !important;
}

html.mado-purple-light #sidebar {
	background: rgba(255, 255, 255, 0.72) !important;
	backdrop-filter: blur(24px) saturate(1.2) !important;
	-webkit-backdrop-filter: blur(24px) saturate(1.2) !important;
	border-right: 1px solid rgba(124, 58, 237, 0.14) !important;
	box-shadow: 8px 0 30px rgba(76, 29, 149, 0.06);
	color: #1e1235 !important;
}

html.mado-purple-light #sidebar,
html.mado-purple-light #sidebar * {
	color: #2a1a45 !important;
}

html.mado-purple-light #sidebar a:hover,
html.mado-purple-light #sidebar button:hover {
	background: rgba(124, 58, 237, 0.08) !important;
}

html.mado-purple-light #chat-search,
html.mado-purple-light .mado-section-search {
	background: rgba(255, 255, 255, 0.9) !important;
	border: 1px solid rgba(124, 58, 237, 0.2) !important;
	box-shadow: 0 4px 14px rgba(76, 29, 149, 0.06) !important;
}

html.mado-purple-light #chat-search input,
html.mado-purple-light .mado-section-search input {
	color: #1e1235 !important;
	background: transparent !important;
}

html.mado-purple-light #chat-search input::placeholder,
html.mado-purple-light .mado-section-search input::placeholder {
	color: rgba(76, 59, 107, 0.55) !important;
}

html.mado-purple-light .dark\:bg-gray-800,
html.mado-purple-light .dark\:bg-gray-850,
html.mado-purple-light .dark\:bg-gray-700,
html.mado-purple-light .dark\:bg-gray-900,
html.mado-purple-light .bg-gray-850,
html.mado-purple-light .bg-gray-900 {
	background-color: #ffffff !important;
}

html.mado-purple-light .dark\:text-white,
html.mado-purple-light .dark\:text-gray-100,
html.mado-purple-light .dark\:text-gray-200,
html.mado-purple-light .dark\:text-gray-300,
html.mado-purple-light .text-white {
	color: #1e1235 !important;
}

html.mado-purple-light .dark\:text-gray-400,
html.mado-purple-light .dark\:text-gray-500,
html.mado-purple-light .text-gray-400,
html.mado-purple-light .text-gray-500 {
	color: #6b5b86 !important;
}

html.mado-purple-light .dark\:border-gray-850,
html.mado-purple-light .dark\:border-gray-800,
html.mado-purple-light .dark\:border-gray-700,
html.mado-purple-light .border-gray-850 {
	border-color: rgba(124, 58, 237, 0.14) !important;
}

html.mado-purple-light .flex-1.flex.flex-col.relative.w-full.rounded-3xl,
html.mado-purple-light .rounded-3xl.px-1\.5 {
	background: rgba(255, 255, 255, 0.88) !important;
	border: 1px solid rgba(124, 58, 237, 0.18) !important;
	box-shadow: 0 10px 30px rgba(76, 29, 149, 0.08) !important;
}

html.mado-purple-light .flex-1.flex.flex-col.relative.w-full.rounded-3xl:focus-within,
html.mado-purple-light .rounded-3xl.px-1\.5:focus-within {
	border-color: rgba(124, 58, 237, 0.55) !important;
	box-shadow:
		0 0 0 3px rgba(124, 58, 237, 0.12),
		0 12px 32px rgba(76, 29, 149, 0.1) !important;
}

html.mado-purple-light #chat-textarea,
html.mado-purple-light textarea,
html.mado-purple-light input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']) {
	color: #1e1235 !important;
}

html.mado-purple-light .mado-settings-panel,
html.mado-purple-light .mado-admin-page,
html.mado-purple-light .mado-workspace-page {
	color: #1e1235 !important;
}

html.mado-purple-light .mado-settings-choice,
html.mado-purple-light form:not(:has(#chat-textarea)) input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']),
html.mado-purple-light form:not(:has(#chat-textarea)) select,
html.mado-purple-light form:not(:has(#chat-textarea)) textarea,
html.mado-purple-light .mado-settings-panel input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']),
html.mado-purple-light .mado-settings-panel select,
html.mado-purple-light .mado-settings-panel textarea {
	color: #1e1235 !important;
	background-color: #ffffff !important;
	border: 1px solid rgba(124, 58, 237, 0.22) !important;
	box-shadow: 0 2px 10px rgba(76, 29, 149, 0.05) !important;
}

html.mado-purple-light .mado-settings-panel select option,
html.mado-purple-light form:not(:has(#chat-textarea)) select option {
	color: #1e1235 !important;
	background: #ffffff !important;
}

html.mado-purple-light button.bg-emerald-700,
html.mado-purple-light button[type='submit'],
html.mado-purple-light .bg-violet-600,
html.mado-purple-light .bg-emerald-600,
html.mado-purple-light .bg-emerald-700,
html.mado-purple-light .bg-green-600,
html.mado-purple-light .bg-teal-600 {
	background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
	color: #ffffff !important;
	border-color: rgba(124, 58, 237, 0.35) !important;
}

/* Keep Microsoft sign-in button purple on login even under light theme */
html.mado-purple-light .mado-auth-page .mado-auth-btn,
html.light .mado-auth-page .mado-auth-btn {
	background: linear-gradient(135deg, #7c3aed 0%, #9333ea 45%, #a855f7 100%) !important;
	color: #ffffff !important;
}

html.mado-purple-light .mado-section-tabs a.bg-gray-50,
html.mado-purple-light .mado-section-tabs button.bg-gray-50,
html.mado-purple-light .mado-section-tabs [aria-current='page'],
html.mado-purple-light .mado-section-tabs .bg-gray-100 {
	background: linear-gradient(135deg, rgba(124, 58, 237, 0.14), rgba(168, 85, 247, 0.1)) !important;
	color: #5b21b6 !important;
	border: 1px solid rgba(124, 58, 237, 0.2);
}

html.mado-purple-light [data-sonner-toast][data-styled='true'] {
	color: #1e1235 !important;
	background: linear-gradient(135deg, #ffffff, #f5f3ff) !important;
	border-color: rgba(124, 58, 237, 0.25) !important;
}

html.mado-purple-light [data-sonner-toast][data-styled='true'][data-type='success'] {
	color: #4c1d95 !important;
	background: linear-gradient(135deg, #f5f3ff, #ede9fe) !important;
	border-color: rgba(124, 58, 237, 0.35) !important;
}

html.mado-purple-light .mado-chat-main-logo,
html.mado-purple-light .mado-sidebar-logo {
	filter: none;
}

/* Auth logo stays on the locked dark login page — keep glow */
html.mado-purple-light .mado-auth-logo {
	filter: drop-shadow(0 0 28px rgba(139, 92, 246, 0.26));
}

html.mado-purple-light .fixed > div:has(> .mado-welcome-content) {
	background: radial-gradient(circle at 50% 0%, rgba(167, 139, 250, 0.22), transparent 52%),
		linear-gradient(145deg, #ffffff, #f5f3ff) !important;
	border: 1px solid rgba(124, 58, 237, 0.18);
	color: #1e1235 !important;
}

/* Light theme stylish scrollbars */
html.mado-purple-light,
html.light.mado-purple-light {
	scrollbar-width: thin;
	scrollbar-color: rgba(124, 58, 237, 0.4) rgba(124, 58, 237, 0.06);
}

html.mado-purple-light ::-webkit-scrollbar,
html.light.mado-purple-light ::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

html.mado-purple-light ::-webkit-scrollbar-track,
html.light.mado-purple-light ::-webkit-scrollbar-track {
	background: rgba(124, 58, 237, 0.06) !important;
	border-radius: 999px;
}

html.mado-purple-light ::-webkit-scrollbar-thumb,
html.light.mado-purple-light ::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, rgba(167, 139, 250, 0.55), rgba(124, 58, 237, 0.65)) !important;
	border: 2px solid transparent !important;
	background-clip: padding-box !important;
	border-radius: 999px !important;
}

html.mado-purple-light ::-webkit-scrollbar-thumb:hover,
html.light.mado-purple-light ::-webkit-scrollbar-thumb:hover {
	background: rgba(124, 58, 237, 0.75) !important;
}

/* Welcome popup — light theme text colors */
html.mado-purple-light .mado-welcome-title,
html.light .mado-welcome-title,
html.light.mado-purple-light .mado-welcome-title {
	color: #4c1d95 !important;
}

html.mado-purple-light .mado-welcome-title::after,
html.light .mado-welcome-title::after,
html.light.mado-purple-light .mado-welcome-title::after {
	color: #6d28d9 !important;
}

html.mado-purple-light .mado-welcome-content,
html.light .mado-welcome-content,
html.light.mado-purple-light .mado-welcome-content {
	color: #4c1d95 !important;
}

/* Guide modal — fix rounded iframe overflow clipping for both themes */
html.mado-purple .mado-guide-modal,
html.mado-purple-light .mado-guide-modal,
html.light .mado-guide-modal {
	border-radius: 1rem;
	overflow: hidden;
}

html.mado-purple .mado-guide-frame,
html.mado-purple-light .mado-guide-frame,
html.light .mado-guide-frame {
	border-radius: 0 0 1rem 1rem;
	overflow: hidden;
}