/* Color variables for light/dark mode */
:root {
  /* Visa Design System Sizing & Radius Tokens (Example values, adjust to VDS) */
  --vds-border-radius-sm: 0.5rem;
  --vds-border-radius-md: 1rem;
  --vds-border-radius-lg: 2rem;
  /* Visa Design System color tokens (light) */
  --vds-color-bg: #f8fafc;
  --vds-color-surface: #ffffff;
  --vds-color-surface-alt: #f1f5f9;
  --vds-color-border: #e5e7eb;
  --vds-color-primary: #0051a8;
  --vds-color-success: #43b02a;
  --vds-color-danger: #e23d3d;
  --vds-color-info: #00b8e0;
  --vds-color-warning: #ffb600;
  --vds-color-neutral-900: #181a1b;
  --vds-color-neutral-800: #23272b;
  --vds-color-neutral-700: #343a40;
  --vds-color-text: #212529;
  --vds-color-text-muted: #6c757d;
  --vds-color-label: #495057;
  --vds-color-placeholder: #adb5bd;
  --vds-sidebar-bg: var(--vds-color-primary);
  --vds-sidebar-text: #fff;
  --vds-title: var(--vds-color-text);
  --vds-header-text: var(--vds-color-text);
  --vds-card-header-bg: var(--vds-color-surface-alt);
  --vds-card-header-text: var(--vds-color-text);
  --vds-form-label: var(--vds-color-label);
  --vds-form-input: var(--vds-color-text);
  --vds-form-placeholder: var(--vds-color-placeholder);
  --vds-chat-bg: var(--vds-color-surface);
  --vds-chat-header-bg: var(--vds-color-surface-alt);
  --vds-chat-window-bg: var(--vds-color-bg);
  --vds-sidebar-section-bg: rgba(255, 255, 255, 0.05);
  --vds-sidebar-active-link-bg: rgba(255, 255, 255, 0.15);
}
[data-bs-theme="dark"] {
  /* Visa Design System color tokens (dark) */
  --vds-color-bg: #181a1b;
  --vds-color-surface: #23272b;
  --vds-color-surface-alt: #23272b;
  --vds-color-border: #343a40;
  --vds-color-primary: #0051a8; /* Assuming primary color remains same for dark mode, adjust if needed */
  --vds-color-success: #43b02a;
  --vds-color-danger: #e23d3d;
  --vds-color-info: #00b8e0;
  --vds-color-warning: #ffb600;
  --vds-color-neutral-900: #181a1b; /* This is also dark bg, might need adjustment if used for other elements */
  --vds-color-neutral-800: #23272b; /* This is also dark surface, might need adjustment */
  --vds-color-neutral-700: #343a40; /* This is also dark border, might need adjustment */
  --vds-color-text: #f8fafc;
  --vds-color-text-muted: #adb5bd;
  --vds-color-label: #dee2e6;
  --vds-color-placeholder: #adb5bd;
  --vds-sidebar-bg: var(--vds-color-neutral-900);
  --vds-sidebar-text: #f8fafc;
  --vds-title: var(--vds-color-text);
  --vds-header-text: var(--vds-color-text);
  --vds-card-header-bg: var(--vds-color-surface-alt);
  --vds-card-header-text: var(--vds-color-text);
  --vds-form-label: var(--vds-color-label);
  --vds-form-input: var(--vds-color-text);
  --vds-form-placeholder: var(
    --vds-color-text-muted
  ); /* Changed from --vds-color-text to --vds-color-text-muted for better contrast in dark */
  --vds-chat-bg: var(--vds-color-surface);
  --vds-chat-header-bg: var(--vds-color-surface-alt);
  --vds-chat-window-bg: var(--vds-color-bg);
  /* Ensure these are defined for dark mode too */
  --vds-sidebar-section-bg: rgba(
    0,
    /* Black base for dark mode */ 0,
    0,
    0.1 /* Adjust opacity as needed */
  ); /* Adjusted for a subtle dark mode background */
  --vds-sidebar-active-link-bg: rgba(
    0,
    /* Black base for dark mode */ 0,
    0,
    0.2 /* Adjust opacity as needed */
  ); /* Slightly more prominent on dark sidebar */
}

/* --- Global & Layout --- */
.visa-bg {
  background: var(--vds-color-bg) !important;
}
.visa-main-content {
  background: var(--vds-color-surface) !important;
  border-radius: var(--vds-border-radius-md);
}

/* --- Sidebar --- */
.visa-sidebar {
  min-height: 100vh;
  background: var(--vds-sidebar-bg) !important;
  color: var(--vds-sidebar-text) !important;
  font-family: "VisaFont", Arial, sans-serif;
}
.sidebar-menu .nav-link,
.sidebar-menu .nav-link.active,
.sidebar-menu .nav-link:focus {
  color: var(--vds-sidebar-text) !important;
}
.sidebar-menu .nav-link.active,
.sidebar-menu .nav-link:focus {
  background: var(--vds-sidebar-active-link-bg) !important;
  font-weight: 600;
  border-radius: var(--vds-border-radius-sm);
}
.visa-sidebar-section {
  background: var(--vds-sidebar-section-bg);
  border-radius: 0 0 var(--vds-border-radius-md) var(--vds-border-radius-md); /* Example for specific corners */
}

/* Style for active/focused links within the AI Tools section */
.visa-sidebar-section .nav-link.active,
.visa-sidebar-section .nav-link:focus {
  background: var(--vds-sidebar-active-link-bg) !important;
  font-weight: 600;
  border-radius: var(--vds-border-radius-sm);
}

/* --- Headers & Titles --- */
.visa-header {
  background: var(--vds-color-surface-alt) !important;
  border-radius: var(--vds-border-radius-md);
}
.visa-card-title,
.visa-title {
  font-weight: 700;
  color: var(--vds-title) !important;
  font-family: "VisaFont", Arial, sans-serif;
}
/* More specific selectors for header text elements */
.visa-header h1,
.visa-header h2,
.visa-header h3,
.visa-header h4,
.visa-header h5,
.visa-header h6,
.visa-header p,
.visa-header span {
  color: var(
    --vds-header-text
  ) !important; /* Still might need !important if Bootstrap is too strong */
  font-family: "VisaFont", Arial, sans-serif; /* Font family might be inherited, but explicit for safety */
}
.visa-card-header,
.card-header.visa-card-header {
  background: var(--vds-card-header-bg) !important;
  color: var(--vds-card-header-text) !important;
  border-bottom: 1px solid var(--vds-color-border) !important;
  font-family: "VisaFont", Arial, sans-serif;
}

/* --- Cards --- */
.visa-card,
.dashboard-card,
.dashboard-nav-card {
  border-radius: var(--vds-border-radius-md);
  background: var(--vds-color-surface) !important;
  border-color: var(--vds-color-border) !important;
}

/* --- Chat Components --- */
.visa-chat-card {
  border-radius: var(--vds-border-radius-md);
  background: var(--vds-chat-bg) !important;
}
.visa-chat-header {
  border-bottom: 1px solid var(--vds-color-border);
  background: var(--vds-chat-header-bg) !important;
}
.visa-chat-window {
  min-height: 200px;
  max-height: 400px; /* Or use vh units like 30vh or 40vh for viewport-relative height */
  background: var(--vds-chat-window-bg) !important;
  /* overflow-auto is already on the element via HTML class, but good to note it's needed */
}
.message-bubble {
  min-width: 0; /* Allows shrinking if space is very tight */
  word-break: break-word; /* Handles long words/strings without breaking layout */
  overflow-wrap: break-word;
  flex-grow: 1; /* Allows the bubble to take available space in its flex container (the innerContentWrapper) */
}
.visa-chat-input {
  border-radius: var(--vds-border-radius-md);
}
/* .chat-avatar i {
  Uncomment and add styles here if needed in the future
} */

.chat-timestamp {
  flex-shrink: 0; /* Prevent the timestamp from shrinking */
  white-space: nowrap; /* Prevent the time itself from wrapping */
}

/* --- Forms & Buttons --- */
.visa-btn {
  border-radius: var(--vds-border-radius-lg);
  font-family: "VisaFont", Arial, sans-serif; /* Font family will be addressed later */
  padding: 0.625rem 1.25rem; /* Example: Adjusted padding (10px 20px if 1rem=16px) - review against VDS */
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}

/* Primary Button - Standard Bootstrap .btn-primary will be styled by variables */
.btn-primary.visa-btn,
.visa-btn-primary {
  background-color: var(
    --vds-color-primary
  ); /* Removed !important, assuming higher specificity or load order handles it */
  border-color: var(--vds-color-primary); /* Removed !important */
  color: #fff; /* Removed !important */
}
.btn-primary.visa-btn:hover,
.visa-btn-primary:hover {
  background-color: #003d80;
  border-color: #003d80;
}

/* Secondary Button - Using Bootstrap .btn-secondary as a base */
.btn-secondary.visa-btn,
.visa-btn-secondary {
  background-color: var(--vds-color-surface-alt); /* Removed !important */
  border-color: var(--vds-color-border); /* Removed !important */
  color: var(--vds-color-text); /* Removed !important */
}
.btn-secondary.visa-btn:hover,
.visa-btn-secondary:hover {
  background-color: var(--vds-color-border);
  border-color: var(--vds-color-border);
}

/* Outline Button - Standard Bootstrap .btn-outline-primary */
.btn-outline-primary.visa-btn,
.visa-btn-outline,
.visa-btn-outline-primary {
  color: var(--vds-color-primary); /* Removed !important */
  border-color: var(--vds-color-primary); /* Removed !important */
}
.btn-outline-primary.visa-btn:hover,
.visa-btn-outline:hover,
.visa-btn-outline-primary:hover {
  background-color: var(--vds-color-primary);
  color: #fff;
}

/* Info Button - Standard Bootstrap .btn-info */
.btn-info.visa-btn,
.visa-btn-info {
  background-color: var(--vds-color-info); /* Removed !important */
  border-color: var(--vds-color-info); /* Removed !important */
  color: #fff; /* Removed !important */
}
.btn-info.visa-btn:hover,
.visa-btn-info:hover {
  background-color: #00a0c0;
  border-color: #00a0c0;
}

/* Danger Button - Standard Bootstrap .btn-danger */
.btn-danger.visa-btn,
.visa-btn-danger {
  background-color: var(--vds-color-danger); /* Removed !important */
  border-color: var(--vds-color-danger); /* Removed !important */
  color: #fff; /* Removed !important */
}
.btn-danger.visa-btn:hover,
.visa-btn-danger:hover {
  background-color: #c82333;
  border-color: #bd2130;
}

/* Icon Button - for buttons that only contain an icon */
.visa-btn-icon {
  padding: 0.375rem 0.75rem; /* Adjust padding for icon buttons */
  line-height: 1; /* Ensure icon is centered */
  border-radius: var(
    --vds-border-radius-sm
  ) !important; /* Smaller radius for icon buttons often looks better */
}
.visa-btn-icon.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.875em; /* Ensure icon size scales if needed */
}
.visa-btn-icon i {
  vertical-align: middle;
}

/* Ensure dark mode compatibility for buttons if not covered by Bootstrap variables */
[data-bs-theme="dark"] .btn-secondary.visa-btn,
[data-bs-theme="dark"] .visa-btn-secondary {
  background-color: var(--vds-color-surface-alt); /* Removed !important */
  border-color: var(--vds-color-border); /* Removed !important */
  color: var(--vds-color-text); /* Removed !important */
}
[data-bs-theme="dark"] .btn-secondary.visa-btn:hover,
[data-bs-theme="dark"] .visa-btn-secondary:hover {
  background-color: var(--vds-color-neutral-700);
  border-color: var(--vds-color-neutral-700);
}

/* Refactored label styling: VisaFont applied only via .visa-label */
.visa-label {
  color: var(--vds-form-label) !important;
  font-family: "VisaFont", Arial, sans-serif;
}
.form-label {
  /* Standard Bootstrap form labels get themed color, default font */
  color: var(--vds-form-label) !important;
}
/* End refactored label styling */

.visa-card .form-label,
.visa-card label,
.visa-card .visa-label {
  /* This rule primarily sets color. Font is handled by .visa-label or default. */
  color: var(--vds-form-label) !important;
} /* Labels specifically within visa-cards */
.visa-card .form-control,
.visa-card .form-select {
  color: var(--vds-form-input) !important;
  background: var(--vds-color-surface) !important;
}
.visa-card .form-control::placeholder,
.visa-card .form-select::placeholder {
  color: var(--vds-form-placeholder) !important;
  opacity: 1;
}

/* --- Footer --- */
.visa-footer {
  background-color: var(--vds-color-surface-alt);
  color: var(--vds-color-text-muted);
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-size: 0.9rem;
}

.visa-footer a {
  color: var(--vds-color-primary);
  text-decoration: none;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.visa-footer a:hover {
  color: var(
    --vds-color-primary
  ); /* Consider a slightly darker shade on hover if primary is light */
  text-decoration: underline;
}

/* Dark mode specific adjustments for footer links if needed */
[data-bs-theme="dark"] .visa-footer {
  background-color: var(
    --vds-color-neutral-800
  ); /* Darker surface for footer */
  color: var(--vds-color-text-muted);
}

[data-bs-theme="dark"] .visa-footer a {
  color: var(
    --vds-color-info
  ); /* Using info color for better visibility on dark bg */
}

[data-bs-theme="dark"] .visa-footer a:hover {
  color: #00d4ff; /* Lighter shade of info for hover */
  text-decoration: underline;
}

/* Fix for Bootstrap floating labels overlapping placeholder/text */
.form-floating > .form-control:not(:placeholder-shown) ~ label {
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.6rem) translateX(0.15rem); /* Adjusted translateY */
}

.form-floating > .form-control:focus ~ label {
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.6rem) translateX(0.15rem); /* Adjusted translateY */
}

/* Ensure label is visible when input is filled (autofill, etc.) */
.form-floating > .form-control:-webkit-autofill ~ label {
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.6rem) translateX(0.15rem); /* Adjusted translateY */
}

/* --- Chat Message Specific Styling --- */

/* Inline code snippets within chat messages or paragraphs */
.chat-message p code, /* For inline code within a chat message paragraph */
.visa-card .card-body p code, /* More general: inline code within any card body paragraph */
.page-fragment p code /* Inline code within main page fragment paragraphs */ {
  background-color: var(--vds-color-surface-alt);
  color: var(--vds-color-text);
  padding: 0.2em 0.4em;
  margin: 0 0.1em;
  font-size: 85%;
  border-radius: var(--vds-border-radius-sm);
  border: 1px solid var(--vds-color-border);
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
}

[data-bs-theme="dark"] .chat-message p code,
[data-bs-theme="dark"] .visa-card .card-body p code,
[data-bs-theme="dark"] .page-fragment p code {
  background-color: var(--vds-color-neutral-800);
  color: var(--vds-color-text);
  border-color: var(--vds-color-neutral-700);
}

/* Code Blocks (typically <pre><code> generated by Marked.js) */
pre {
  background-color: var(--vds-color-surface-alt);
  color: var(--vds-color-text);
  border: 1px solid var(--vds-color-border);
  border-radius: var(--vds-border-radius-md);
  padding: 1rem;
  overflow: auto;
  font-size: 0.875em; /* Slightly smaller than base for code blocks */
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

pre code {
  background-color: transparent !important; /* Code element inside pre should not have its own background */
  color: inherit !important; /* Inherit text color from pre */
  padding: 0 !important; /* No padding for the code element itself */
  border-radius: 0 !important; /* No border-radius for the code element itself */
  display: block; /* Ensure it takes up space correctly */
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  white-space: pre; /* Preserve whitespace and line breaks from the snippet */
}

[data-bs-theme="dark"] pre {
  background-color: var(
    --vds-color-neutral-900
  ); /* Darker background for pre in dark mode */
  color: var(--vds-color-text);
  border-color: var(--vds-color-neutral-700);
}

/* Styles for pre code are inherited in dark mode, explicit overrides usually not needed if pre is themed */