/* ===== Watermark & Footer Hiding ===== */
footer {
  display: none !important;
}

#incontext-footer {
  display: block !important;
  position: relative;
  margin: 12px 16px 8px;
  font-size: 12px;
  color: #666;
  background: transparent !important;
  text-align: center;
}

a.watermark,
.watermark,
a[href^="https://chainlit.io"],
footer:has(a.watermark),
[class*="watermark"] {
  display: none !important;
}

div.watermark,
div.watermark[style],
div.watermark[style*="display: flex"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  max-height: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

div.watermark * {
  display: none !important;
}

button:has(svg.lucide-copy),
svg.lucide-copy {
  display: none !important;
}

a img[alt="watermark"] {
  display: none;
}

a[href*='https://github.com/Chainlit/chainlit'] {
  visibility: hidden;
}

.ai-message .rounded-full {
  border-radius: 0px;
}

/* ===== Login Page Styling ===== */

/* Hide the right-side image panel */
.lg\:block:has(img[alt="Image"]) {
  display: none !important;
}

/* Full-width centered layout with gradient */
.lg\:grid-cols-2 {
  grid-template-columns: 1fr !important;
  min-height: 100vh !important;
  background: linear-gradient(135deg, #eff6ff 0%, #e0e7ff 100%) !important;
}

/* Hide the default Chainlit logo */
.flex.items-center.gap-2.md\:justify-start {
  display: none !important;
}

/* Expand the inner container for our card */
.w-full.max-w-xs {
  max-width: 28rem !important;
}

/* Style the form as the white card */
.w-full.max-w-xs > form {
  background: white !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.12) !important;
  padding: 2.5rem !important;
}

/* Hide Chainlit's default "Login to access the app" text */
.w-full.max-w-xs > form > .text-center,
.w-full.max-w-xs > form > p,
.w-full.max-w-xs > form > div:first-child:not(#smx-login-header) {
  display: none !important;
}

/* But keep OUR header visible */
#smx-login-header {
  display: block !important;
}

/* Style the OAuth provider button — ShopperMX Login */
.w-full.max-w-xs form button[type="button"]:not(#corporate-login-btn):not(#back-to-smx-btn) {
  background: linear-gradient(to right, #2563eb, #1d4ed8) !important;
  color: white !important;
  border: none !important;
  border-radius: 0.5rem !important;
  padding: 0.75rem 1.5rem !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35) !important;
  transition: all 0.2s ease !important;
  height: auto !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

.w-full.max-w-xs form button[type="button"]:not(#corporate-login-btn):not(#back-to-smx-btn):hover {
  background: linear-gradient(to right, #1d4ed8, #1e40af) !important;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45) !important;
  transform: translateY(-1px) !important;
}

.w-full.max-w-xs form button[type="button"]:not(#corporate-login-btn):not(#back-to-smx-btn) svg {
  color: white !important;
  stroke: white !important;
}

/* ===== Custom Elements ===== */

/* Logo above the card */
#smx-login-logo {
  text-align: center;
  margin-bottom: 2rem;
}

#smx-login-logo img {
  height: 4rem;
  width: auto;
  margin: 0 auto;
  display: block;
}

/* Header inside the card */
#smx-login-header {
  text-align: center;
  margin-bottom: 1.5rem;
  font-family: 'Inter', -apple-system, sans-serif !important;
}

#smx-login-header h2 {
  font-size: 1.875rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 0.5rem;
  line-height: 1.3;
  font-family: 'Inter', -apple-system, sans-serif !important;
}

#smx-login-header p {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0;
  font-family: 'Inter', -apple-system, sans-serif !important;
}

/* Corporate Login — outline style */
#corporate-login-btn {
  display: block;
  width: 100%;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  font-family: 'Inter', -apple-system, sans-serif !important;
  color: #2563eb;
  background: white;
  border: 2px solid #2563eb;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 0.75rem;
  text-align: center;
}

#corporate-login-btn:hover {
  background: #eff6ff;
}

/* Corporate SSO email form */
#corporate-sso-form {
  margin-top: 0.5rem;
}

#corporate-sso-form label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.375rem;
  font-family: 'Inter', -apple-system, sans-serif !important;
}

#corporate-sso-form input[type="email"] {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  font-size: 0.95rem;
  font-family: 'Inter', -apple-system, sans-serif !important;
  color: #111827 !important;
  background: white !important;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}

#corporate-sso-form input[type="email"]::placeholder {
  color: #9ca3af !important;
}

#corporate-sso-form input[type="email"]:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

#corporate-sso-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  font-family: 'Inter', -apple-system, sans-serif !important;
  color: white;
  background: #2563eb;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  margin-top: 0.75rem;
  transition: background 0.15s ease;
}

#corporate-sso-submit:hover {
  background: #1d4ed8;
}

#back-to-smx-btn {
  display: block;
  width: 100%;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  font-family: 'Inter', -apple-system, sans-serif !important;
  color: #6b7280;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  cursor: pointer;
  margin-top: 0.5rem;
  text-align: center;
  transition: background 0.15s ease;
}

#back-to-smx-btn:hover {
  background: #f9fafb;
}

/* Footer */
#smx-login-footer {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.875rem;
  color: #6b7280;
  font-family: 'Inter', -apple-system, sans-serif !important;
}

#smx-login-footer a {
  color: #2563eb;
  font-weight: 500;
  text-decoration: none;
}

#smx-login-footer a:hover {
  color: #1d4ed8;
}