/* ===============================
   FONTS
   =============================== */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@600;700;800&display=swap");

:root {
  --x-blue: #014690;
  --x-blue-dark: #003d82;
  --x-orange: #ff5500;

  --x-gradient-main: linear-gradient(
    135deg,
    #014690 0%,
    #014690 30%,
    #ff5500 100%
  );

  --x-gradient-hover: linear-gradient(
    135deg,
    #003d82 0%,
    #014690 25%,
    #ff5500 100%
  );
}

* {
  font-family: "Inter", sans-serif !important;
}

/* ===============================
   GLOBAL BACKGROUND (theme-aware)
   =============================== */
body {
  background: hsl(var(--background)) !important;
  color: hsl(var(--foreground)) !important;
}

/* ===============================
   HEADER — CLEANED (NO RIGHT PANEL)
   =============================== */

/* Remove all right-side header content */
.cl-header-actions {
  display: none !important;
}

/* Gradient header background */
header,
.MuiAppBar-root {
  background: var(--x-gradient-main) !important;
}

/* App title */
#app-name {
  font-family: "Space Grotesk", sans-serif !important;
  color: #ffffff !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
}

/* Maintain spacing on left side */
header .cl-header,
.MuiAppBar-root .cl-header {
  padding: 0.75rem 1.25rem !important;
}

/* ===============================
   PRIMARY BUTTONS
   =============================== */
.bg-primary {
  background: var(--x-gradient-main) !important;
}

.bg-primary\/90 {
  background: var(--x-gradient-hover) !important;
}

button.bg-primary,
button[class*="bg-primary"] {
  background: var(--x-gradient-main) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  padding: 0.65rem 1.25rem !important;
  font-size: 0.95rem !important;
  border: none !important;
  transition: all 0.2s ease-in-out !important;
}

button.bg-primary:hover,
button[class*="bg-primary"]:hover {
  background: var(--x-gradient-hover) !important;
  transform: translateY(-1px) !important;
}

button.bg-primary:disabled,
button[class*="bg-primary"]:disabled {
  background: linear-gradient(135deg, #b0c4d9 0%, #b0c4d9 100%) !important;
  color: #ffffff !important;
  opacity: 0.85 !important;
}

/* ===============================
   CHAT BAR (gradient strip)
   =============================== */
.bg-accent {
  background: var(--x-gradient-main) !important;
}

.dark .bg-accent {
  background: var(--x-gradient-main) !important;
}

#message-composer {
  border-radius: 24px !important;
  padding: 0.75rem 1rem !important;
}

/* ===============================
   TEXTAREA (theme-aware)
   =============================== */
#message-composer textarea,
textarea[placeholder*="Type your message here"],
textarea#chat-input {
  background: transparent !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 18px !important;
  padding: 0.7rem 1rem !important;
  resize: none !important;
}

#message-composer textarea::placeholder,
textarea#chat-input::placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
}

#message-composer textarea:focus,
textarea#chat-input:focus {
  outline: none !important;
}

/* ===============================
   SEND + ATTACHMENT BUTTONS
   =============================== */
button[type="submit"] {
  color: #ffffff !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 50% !important;
  transition: all 0.2s ease !important;
}

button[type="submit"] svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

button:not([type="submit"]) {
  color: #64748b !important;
}

button:not([type="submit"]):hover {
  color: var(--x-blue) !important;
}

/* ===============================
   ASSISTANT MESSAGES
   =============================== */
div[data-author="assistant"] {
  background: linear-gradient(
    135deg,
    #014690 0%,
    #014690 25%,
    rgba(255, 85, 0, 0.35) 100%
  ) !important;
  color: #ffffff !important;
  border-radius: 20px !important;
  padding: 1rem 1.5rem !important;
  box-shadow: 0 2px 8px rgba(1, 70, 144, 0.12) !important;
}

/* ===============================
   USER MESSAGES (GRADIENT + WHITE TEXT)
   =============================== */
.bg-accent.rounded-3xl {
  background: var(--x-gradient-main) !important;
  border: 2px solid hsl(var(--border)) !important;
  box-shadow: 0 2px 8px rgba(1, 70, 144, 0.2) !important;
}

/* Force white text ONLY inside the gradient bubble */
.bg-accent.rounded-3xl,
.bg-accent.rounded-3xl *,
.bg-accent.rounded-3xl .prose,
.bg-accent.rounded-3xl .prose *,
.bg-accent.rounded-3xl [role="article"] {
  color: #ffffff !important;
}

/* Default user message bubble (if gradient isn't used) */
div[data-author="user"] {
  background: hsl(var(--card)) !important;
  color: hsl(var(--card-foreground)) !important;
  border: 1.5px solid hsl(var(--border)) !important;
  border-radius: 20px !important;
  padding: 1rem 1.5rem !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

/* ===============================
   SCROLLBAR
   =============================== */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: hsl(var(--muted)) !important;
}

::-webkit-scrollbar-thumb {
  background: #94a3b8 !important;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #64748b !important;
}