/* =====================================================
   Vagocat AI: brand layer on top of the chat app (loaded by index.html).
   Square corners, hard offset shadows, brand purple, Outfit + Inter - same as vagocat.com.
   ===================================================== */
:root, html.dark {
    --surface-submit: #673da6 !important;
    --surface-submit-hover: #55308c !important;
}
.btn-primary { background-color: #673da6 !important; border-color: #673da6 !important; color: #fff !important; }
.btn-primary:hover { background-color: #55308c !important; }
/* The app's focus colour is green: brand purple instead */
.focus\:border-green-500:focus, .focus-visible\:border-green-500:focus-visible { border-color: #673da6 !important; }
.peer:focus ~ .peer-focus\:text-green-600, .peer:focus ~ .dark\:peer-focus\:text-green-500 { color: #673da6 !important; }

/* ---------- Sign-in page (only the screen that has the login form) ----------
   Light by default, dark when the app is in dark mode (html.dark): the theme switch at the bottom left works. */
#root > div:has(form[aria-label="Login form"]) {
    --vl-bg: #f6f4fb; --vl-grid: rgba(103, 61, 166, .09); --vl-link: #673da6; --vl-muted: #6b7280; --vl-icon: #374151;
    --vl-logo: url(/vagocat-logo-light.png);
    background-color: var(--vl-bg) !important;
    background-image: linear-gradient(var(--vl-grid) 1px, transparent 1px), linear-gradient(90deg, var(--vl-grid) 1px, transparent 1px);
    background-size: 40px 40px;
    font-family: 'Inter', system-ui, sans-serif;
}
html.dark #root > div:has(form[aria-label="Login form"]) {
    --vl-bg: #0d1117; --vl-grid: rgba(103, 61, 166, .12); --vl-link: #b79edb; --vl-icon: #d1d5db;
    --vl-logo: url(/vagocat-logo-dark.png);
}
/* Full Vagocat logo (dark or white wordmark to match the theme) */
#root > div:has(form[aria-label="Login form"]) > div:first-child {
    height: 64px; margin-top: 48px;
    background: var(--vl-logo) center / contain no-repeat;
}
#root > div:has(form[aria-label="Login form"]) > div:first-child img { visibility: hidden; }
#root > div:has(form[aria-label="Login form"]) main > div {
    background: #fff !important; color: #111827 !important;
    border: 2px solid #111827; border-radius: 0 !important;
    box-shadow: 10px 10px 0 #673da6;
    padding: 36px 32px 32px !important;
    width: min(440px, calc(100vw - 40px)) !important; max-width: 440px !important;
}
#root > div:has(form[aria-label="Login form"]) main h1 {
    font-family: 'Outfit', 'Inter', sans-serif !important; font-weight: 800 !important;
    font-size: 30px !important; letter-spacing: -.5px; color: #111827 !important; margin-bottom: 4px !important;
}
#root > div:has(form[aria-label="Login form"]) main input {
    border-radius: 0 !important; border: 2px solid #111827 !important;
    background: #fff !important; color: #111827 !important;
    /* the app paints dark-mode and autofilled inputs with an inner shadow: paint them white the same way */
    box-shadow: inset 0 0 0 1000px #fff !important; -webkit-text-fill-color: #111827 !important; caret-color: #111827;
}
#root > div:has(form[aria-label="Login form"]) main input:focus { border-color: #673da6 !important; box-shadow: inset 0 0 0 1000px #fff, 3px 3px 0 #673da6 !important; }
#root > div:has(form[aria-label="Login form"]) main label { background: #fff !important; color: #4b5563 !important; }
#root > div:has(form[aria-label="Login form"]) main .peer:focus ~ label { color: #673da6 !important; }
#root > div:has(form[aria-label="Login form"]) main button[type="submit"] {
    border-radius: 0 !important; border: 2px solid #111827;
    background: #673da6 !important; color: #fff !important;
    font-family: 'Outfit', 'Inter', sans-serif; font-size: 16px; font-weight: 700;
    box-shadow: 4px 4px 0 #111827; transition: transform .1s, box-shadow .1s;
}
#root > div:has(form[aria-label="Login form"]) main button[type="submit"]:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #111827; }
#root > div:has(form[aria-label="Login form"]) main [aria-label="Show secret"] { color: #4b5563 !important; }
/* Errors (wrong password) */
#root > div:has(form[aria-label="Login form"]) main [role="alert"]:not(.sr-only) {
    border-radius: 0 !important; border: 2px solid #b91c1c !important; background: #fef2f2 !important; color: #991b1b !important;
}
/* Footer links and the theme switch sit on the page background */
#root > div:has(form[aria-label="Login form"]) [role="contentinfo"] { color: var(--vl-muted); }
#root > div:has(form[aria-label="Login form"]) [role="contentinfo"] a { color: var(--vl-link) !important; }
#root > div:has(form[aria-label="Login form"]) [aria-label="Toggle theme"] { color: var(--vl-icon) !important; }
#root > div:has(form[aria-label="Login form"]) > div.absolute div.bg-white { background: transparent !important; }
@media (max-width: 480px) {
    #root > div:has(form[aria-label="Login form"]) > div:first-child { margin-top: 28px; height: 52px; }
    #root > div:has(form[aria-label="Login form"]) main > div { padding: 28px 22px 24px !important; box-shadow: 7px 7px 0 #673da6; }
}

/* Switches (Settings) in brand purple instead of black */
button[role="switch"][data-state="checked"] { background-color: #673da6 !important; border-color: #673da6 !important; }