/* ============================================================
   Google Fonts – Inter for clean, modern typography
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ============================================================
   Design Tokens
   ============================================================ */
:root {
  --surface: #f5f1ea;
  --surface-strong: #ffffff;
  --accent: #0e7c86;
  --accent-dark: #0a5c63;
  --accent-soft: #e0f3f1;
  --accent-glow: rgba(14, 124, 134, 0.12);
  --ink: #1a1a2e;
  --ink-secondary: #2d3748;
  --muted: #4a5568;
  --edge: rgba(14, 124, 134, 0.18);
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 12px 32px rgba(14, 124, 134, 0.10);
  --shadow-lg: 0 20px 60px rgba(14, 124, 134, 0.15);
}

/* ============================================================
   Animations
   ============================================================ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ============================================================
   Global Styles
   ============================================================ */
body, .gradio-container {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  background:
    radial-gradient(ellipse at 10% 0%, rgba(14, 124, 134, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 0%, rgba(250, 204, 140, 0.12) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 100%, rgba(14, 124, 134, 0.05) 0%, transparent 50%),
    linear-gradient(180deg, #f0ece4 0%, #f6f3ed 40%, #faf8f4 100%);
  color: var(--ink) !important;
}

/* ============================================================
   App Shell
   ============================================================ */
.app-shell {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 16px;
  animation: fadeInUp 0.5s ease-out;
}

/* ============================================================
   Hero Card
   ============================================================ */
.hero-card {
  background:
    linear-gradient(135deg, #0a5c63 0%, #0e7c86 40%, #11959f 70%, #0e7c86 100%);
  color: #ffffff;
  border-radius: var(--radius-lg);
  padding: 32px 34px 26px 34px;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}

.hero-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.06) 40%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0.06) 60%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 6s ease-in-out infinite;
  pointer-events: none;
}

.hero-card h1 {
  margin: 0 0 10px 0;
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.hero-card p {
  margin: 0;
  max-width: 780px;
  line-height: 1.65;
  font-size: 1.05rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.95) !important;
}

/* ============================================================
   Panel Cards (status, feedback, etc.)
   ============================================================ */
.panel-card {
  background: var(--surface-strong) !important;
  border: 1.5px solid var(--edge) !important;
  border-radius: var(--radius-lg) !important;
  padding: 20px 22px !important;
  box-shadow: var(--shadow-md) !important;
  animation: fadeInUp 0.6s ease-out;
}

/* Force ALL text inside panels to be dark and readable */
.panel-card,
.panel-card *,
.panel-card h1, .panel-card h2, .panel-card h3,
.panel-card h4, .panel-card h5, .panel-card h6,
.panel-card p, .panel-card li, .panel-card span,
.panel-card strong, .panel-card em, .panel-card code {
  color: var(--ink) !important;
}

.panel-card h3 {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
}

.panel-card li {
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
}

.panel-card code {
  background: var(--accent-soft) !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: var(--accent-dark) !important;
}

/* ============================================================
   Chatbot Column
   ============================================================ */
.chatbot-shell {
  overflow: visible;
}

.chatbot-shell .wrap {
  border-radius: var(--radius-lg);
}

/* Force chatbot container and messages area to have a light background */
.chatbot-shell .chatbot,
.chatbot-shell .chatbot > div,
.chatbot-shell .messages-wrapper,
.chatbot-shell .message-wrap,
.chatbot-shell [class*="chatbot"],
.chatbot-shell [data-testid="chatbot"],
.chatbot-shell [role="log"],
.chatbot-shell .wrap,
.chatbot-shell .wrap > div {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* Ensure chatbot messages have readable dark text */
.chatbot-shell .message,
.chatbot-shell .message *,
.chatbot-shell .bot,
.chatbot-shell .bot *,
.chatbot-shell .user,
.chatbot-shell .user *,
.chatbot-shell p,
.chatbot-shell span {
  color: var(--ink) !important;
}

/* User message bubble - slightly tinted */
.chatbot-shell .user .message-bubble-border,
.chatbot-shell .user .message-content {
  background: var(--accent-soft) !important;
  color: var(--ink) !important;
}

/* Bot message bubble - white */
.chatbot-shell .bot .message-bubble-border,
.chatbot-shell .bot .message-content {
  background: #f8f9fa !important;
  color: var(--ink) !important;
}

/* Chatbot label */
.chatbot-shell label,
.chatbot-shell .label-wrap span {
  color: var(--ink) !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
}

/* Chatbot empty state / placeholder */
.chatbot-shell .placeholder,
.chatbot-shell .empty {
  background: #ffffff !important;
  color: var(--muted) !important;
}

/* ============================================================
   Textbox Input
   ============================================================ */
.app-shell textarea,
.app-shell input[type="text"] {
  font-family: 'Inter', sans-serif !important;
  color: var(--ink) !important;
  background: var(--surface-strong) !important;
  border: 1.5px solid var(--edge) !important;
  border-radius: var(--radius-sm) !important;
  font-size: 0.95rem !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.app-shell textarea:focus,
.app-shell input[type="text"]:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
  outline: none !important;
}

.app-shell textarea::placeholder {
  color: var(--muted) !important;
  opacity: 0.7;
}

/* Textbox labels */
.app-shell .input-label,
.app-shell label span {
  color: var(--ink) !important;
  font-weight: 600 !important;
}

/* ============================================================
   Buttons – Send & Clear
   ============================================================ */
.app-shell button.primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 28px !important;
  font-size: 0.95rem !important;
  box-shadow: 0 4px 16px rgba(14, 124, 134, 0.25) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.app-shell button.primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 22px rgba(14, 124, 134, 0.35) !important;
}

.app-shell button.primary:active {
  transform: translateY(0) !important;
}

.app-shell button.secondary,
.app-shell button:not(.primary):not(.example-btn) {
  color: var(--ink) !important;
  font-weight: 500 !important;
  border: 1.5px solid var(--edge) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--surface-strong) !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
}

.app-shell button.secondary:hover,
.app-shell button:not(.primary):not(.example-btn):hover {
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
}


/* ============================================================
   Global Gradio Overrides – Ensure All Labels & Text Visible
   ============================================================ */
.gradio-container label,
.gradio-container .label-wrap,
.gradio-container .label-wrap span,
.gradio-container .block label span {
  color: var(--ink) !important;
}

/* Markdown rendered inside any block */
.gradio-container .prose,
.gradio-container .prose * {
  color: var(--ink) !important;
}

/* Ensure tab labels and accordion headers are visible */
.gradio-container .tab-nav button,
.gradio-container .accordion .label-wrap {
  color: var(--ink) !important;
}