/* AuditMatic AI — Brand Override (Monochrome) */

/* Raleway font from landing page */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700&display=swap');

/* ===== LIGHT MODE (default) ===== */
:root {
  /* Primary accent: Charcoal */
  --brand-purple: #444444;

  /* Green scale → Gray scale (buttons, toggles, success states) */
  --green-50: #F8F8F8;
  --green-100: #F0F0F0;
  --green-200: #E0E0E0;
  --green-300: #CCCCCC;
  --green-400: #999999;
  --green-500: #555555;
  --green-600: #444444;
  --green-700: #333333;
  --green-800: #222222;
  --green-900: #111111;
}

html:not(.dark) {
  /* Gray scale — cool neutral tones */
  --white: #FAFAFA;
  --gray-50: #F5F5F5;
  --gray-100: #EEEEEE;
  --gray-200: #E0E0E0;
  --gray-300: #D0D0D0;

  /* Surface overrides */
  --surface-primary: var(--white);
  --surface-primary-alt: var(--gray-50);
  --surface-primary-contrast: var(--gray-100);
  --surface-secondary: var(--gray-50);
  --surface-secondary-alt: var(--gray-200);
  --surface-tertiary: var(--gray-100);
  --surface-tertiary-alt: var(--white);
  --surface-dialog: var(--white);
  --surface-chat: var(--white);
  --surface-submit: var(--green-700);
  --surface-submit-hover: var(--green-800);
}

/* Font override — Raleway from AuditMatic landing page */
html, body, #root,
input, textarea, select, button {
  font-family: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* ===== LIGHT MODE BACKGROUNDS ===== */
html:not(.dark) body,
html:not(.dark) #root {
  background-color: #FAFAFA !important;
}

html:not(.dark) .bg-white,
html:not(.dark) [class*="bg-surface-primary"] {
  background-color: #FAFAFA !important;
}

html:not(.dark) .bg-gray-50,
html:not(.dark) [class*="bg-surface-secondary"] {
  background-color: #F5F5F5 !important;
}

html:not(.dark) nav.bg-surface-primary-alt,
html:not(.dark) nav[class*="bg-surface-primary-alt"] {
  background-color: #EBEBEB !important;
}

html:not(.dark) nav a:hover,
html:not(.dark) nav button:hover {
  background-color: #DDDDDD !important;
}

html:not(.dark) .bg-gray-100,
html:not(.dark) [class*="bg-surface-tertiary"],
html:not(.dark) [class*="bg-surface-primary-contrast"] {
  background-color: #EEEEEE !important;
}

html:not(.dark) [class*="bg-login"] {
  background-color: #F5F5F5 !important;
}

html:not(.dark) input,
html:not(.dark) textarea,
html:not(.dark) select {
  background-color: #FAFAFA !important;
}

html:not(.dark) .hover\:bg-gray-100:hover,
html:not(.dark) .hover\:bg-surface-hover:hover {
  background-color: #EEEEEE !important;
}

html:not(.dark) [class*="bg-surface-chat"] {
  background-color: #FAFAFA !important;
}

html:not(.dark) ::-webkit-scrollbar-track {
  background: #F5F5F5;
}
html:not(.dark) ::-webkit-scrollbar-thumb {
  background: #CCCCCC;
  border-radius: 4px;
}
html:not(.dark) ::-webkit-scrollbar-thumb:hover {
  background: #999999;
}

/* ===== DARK MODE ===== */
html.dark {
  --surface-submit: #444444;
  --surface-submit-hover: #333333;
}

/* ===== SHARED (both themes) — Monochrome accent colors ===== */

/* Login page "Continue" button */
.bg-green-600,
button[type="submit"][class*="bg-green"] {
  background-color: #333333 !important;
}
.bg-green-600:hover,
button[type="submit"][class*="bg-green"]:hover {
  background-color: #222222 !important;
}

/* Toggle switches and active states */
.bg-green-500 {
  background-color: #555555 !important;
}
.bg-green-400 {
  background-color: #777777 !important;
}

/* Text accents */
.text-green-500,
.text-green-600,
.text-green-700 {
  color: #444444 !important;
}

/* Brand purple overrides */
.bg-brand-purple {
  background-color: #444444 !important;
}
.text-brand-purple {
  color: #444444 !important;
}

/* Ring/focus states */
.ring-green-500,
.focus\:ring-green-500:focus {
  --tw-ring-color: #555555 !important;
}
.border-green-500 {
  border-color: #555555 !important;
}

/* Send button */
html:not(.dark) button[data-testid="send-button"] {
  background-color: #333333 !important;
}
html.dark button[data-testid="send-button"] {
  background-color: #CCCCCC !important;
}

/* Selected/active sidebar items */
.bg-surface-active-alt {
  border-left-color: #444444 !important;
}


/* ===== Role-based: hide Agent Builder, Create Agent, MCP Settings for USER ===== */
/* Users see only Router / Disco / Matlock — no builder, no MCP config. */
body[data-user-role="USER"] [data-testid="agent-builder-link"],
body[data-user-role="USER"] [data-testid="create-agent-button"],
body[data-user-role="USER"] [data-am-hide="mcp"] {
  display: none !important;
}

/* ===== Universal: hide "Search models" input + its floating label ===== */
/* The label is rendered as the immediate sibling of the input (not via `for`).
   Use ADJACENT sibling `+` only — `~` accidentally matched agent items in the
   ComboboxList and made them collapse on hover. */
#model-search,
#model-search + label {
  display: none !important;
}

/* Dark mode: swap to white logo everywhere (Chrome, Safari, Edge) */
html.dark img[src*="logo.svg"]:not([src*="white"]) {
  content: url('/assets/logo-white.svg') !important;
}

/* Hide Google, OpenAI, Anthropic, Assistants endpoint options from chat endpoint picker */
/* These endpoints exist server-side so admins can attach agent providers,
   but no one needs to pick them directly from the chat menu. */
#endpoint-google-menu,
#endpoint-openAI-menu,
#endpoint-anthropic-menu,
#endpoint-assistants-menu,
#endpoint-azureOpenAI-menu,
#endpoint-bedrock-menu {
  display: none !important;
}

/* Hide "Upload to Provider" option from attach file menu */
#attach-file-menu > div[role="menuitem"]:first-of-type {
  display: none !important;
}

/* Rename "Upload for File Search" to "Upload file" */
#attach-file-menu > div[role="menuitem"]:last-of-type {
  font-size: 0;
}
#attach-file-menu > div[role="menuitem"]:last-of-type > span {
  font-size: 0.875rem;
}
#attach-file-menu > div[role="menuitem"]:last-of-type::after {
  content: 'Upload file';
  font-size: 0.875rem;
}

/* ===== GOOGLE DRIVE CONNECT BUTTON ===== */

button#am-gdrive-btn.am-gdrive-btn {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  padding: 0 !important;
  color: #666 !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
  transition: background 0.15s, color 0.15s;
}
html.dark button#am-gdrive-btn.am-gdrive-btn {
  color: #999 !important;
}
button#am-gdrive-btn.am-gdrive-btn:hover {
  background: #E0E0E0 !important;
  color: #333 !important;
}
html.dark button#am-gdrive-btn.am-gdrive-btn:hover {
  background: #333 !important;
  color: #ccc !important;
}
button#am-gdrive-btn.am-gdrive-connected {
  opacity: 0.7 !important;
}
button#am-gdrive-btn.am-gdrive-connected:hover {
  opacity: 1 !important;
  background: #E0E0E0 !important;
  color: #333 !important;
}
html.dark button#am-gdrive-btn.am-gdrive-connected:hover {
  background: #333 !important;
  color: #ccc !important;
}
#am-gdrive-btn .am-gdrive-check {
  position: absolute !important;
  bottom: 2px !important;
  right: 2px !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: #34A853 !important;
  color: white !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* Tooltip — body-level portal, matches LibreChat .tooltip */
#am-gdrive-tooltip {
  position: fixed !important;
  z-index: 150 !important;
  pointer-events: none !important;
  border-radius: 0.275rem !important;
  background-color: var(--surface-primary, #FAFAFA) !important;
  padding: 0.25rem 0.5rem !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  color: black !important;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.25) !important;
  white-space: nowrap !important;
  opacity: 0;
  transition: opacity 0.12s ease;
}
#am-gdrive-tooltip.am-tip-visible {
  opacity: 1;
}
html.dark #am-gdrive-tooltip {
  color: white !important;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.35) !important;
}

/* ===== MODEL PICKER (AuditMatic / AuditMatic Pro) ===== */

#am-model-picker {
  display: flex;
  justify-content: center;
  padding: 6px 0 2px;
}
.am-picker-toggle {
  display: inline-flex;
  border-radius: 6px;
  overflow: hidden;
}
.am-picker-btn {
  padding: 5px 14px;
  border: 1px solid #D0D0D0;
  background: transparent;
  color: #777;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  font-family: inherit;
  line-height: 1.4;
}
.am-picker-btn:first-child {
  border-radius: 6px 0 0 6px;
  border-right: none;
}
.am-picker-btn:last-child {
  border-radius: 0 6px 6px 0;
}
.am-picker-btn.active {
  background: #333;
  color: white;
  border-color: #333;
}
.am-picker-btn:hover:not(.active) {
  background: #F0F0F0;
  color: #333;
}
html.dark .am-picker-btn {
  border-color: #444;
  color: #999;
}
html.dark .am-picker-btn.active {
  background: #555;
  color: white;
  border-color: #555;
}
html.dark .am-picker-btn:hover:not(.active) {
  background: #2a2a2a;
  color: #ccc;
}

/* ===== MATTERS SIDEBAR PANEL ===== */

/* Hide BookmarkNav button visually (keep in DOM for programmatic clicks) */
#bookmark-nav-menu-button {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* --- Matters Panel Container --- */
#am-matters-panel {
  flex-shrink: 0;
  border-bottom: 1px solid #E0E0E0;
  padding: 8px 8px 4px;
}
html.dark #am-matters-panel {
  border-bottom-color: #333;
}

/* --- Header --- */
.am-matters-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 6px;
}
.am-matters-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #888;
}
html.dark .am-matters-title {
  color: #999;
}
.am-matters-add {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: #888;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}
.am-matters-add:hover {
  background: #E0E0E0;
  color: #333;
}
html.dark .am-matters-add:hover {
  background: #333;
  color: #ccc;
}

/* --- Matter List --- */
.am-matters-list {
  max-height: 200px;
  overflow-y: auto;
}
.am-matters-empty {
  padding: 8px 4px;
  font-size: 12px;
  color: #999;
  text-align: center;
}

/* --- Matter Item --- */
.am-matter-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
}
.am-matter-item:hover {
  background: #E0E0E0;
}
html.dark .am-matter-item:hover {
  background: #2a2a2a;
}
.am-matter-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #999;
}
html.dark .am-matter-icon {
  color: #777;
}
.am-matter-name {
  flex: 1;
  font-size: 13px;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html.dark .am-matter-name {
  color: #ddd;
}
.am-matter-count {
  font-size: 11px;
  color: #aaa;
  flex-shrink: 0;
}
html.dark .am-matter-count {
  color: #666;
}

/* Delete button on hover */
.am-matter-delete {
  display: none;
  position: absolute;
  right: 6px;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: #999;
  font-size: 14px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.1s, color 0.1s;
}
.am-matter-item:hover .am-matter-delete {
  display: flex;
}
.am-matter-item:hover .am-matter-count {
  display: none;
}
.am-matter-delete:hover {
  background: #e55;
  color: white;
}
html.dark .am-matter-delete:hover {
  background: #c44;
}

/* --- Breadcrumb --- */
.am-matters-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 4px 4px;
}
.am-breadcrumb-back {
  border: none;
  background: transparent;
  color: #888;
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.am-breadcrumb-back:hover {
  background: #E0E0E0;
  color: #333;
}
html.dark .am-breadcrumb-back:hover {
  background: #333;
  color: #ccc;
}
.am-breadcrumb-name {
  font-size: 13px;
  font-weight: 600;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html.dark .am-breadcrumb-name {
  color: #ddd;
}

/* === RIGHT-CLICK CONTEXT MENU === */
#am-context-menu {
  position: fixed;
  z-index: 9999;
  background: white;
  border: 1px solid #E0E0E0;
  border-radius: 10px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
  padding: 4px;
  min-width: 180px;
  max-width: 260px;
}
html.dark #am-context-menu {
  background: #1a1a1a;
  border-color: #333;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5);
}
.am-ctx-header {
  padding: 6px 10px 4px;
  font-size: 11px;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.am-ctx-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: #333;
  transition: background 0.1s;
}
html.dark .am-ctx-item {
  color: #ddd;
}
.am-ctx-item:hover {
  background: #F0F0F0;
}
html.dark .am-ctx-item:hover {
  background: #2a2a2a;
}
.am-ctx-active {
  font-weight: 500;
}
.am-ctx-check {
  width: 16px;
  text-align: center;
  color: #555;
  font-size: 12px;
  flex-shrink: 0;
}
html.dark .am-ctx-check {
  color: #aaa;
}
.am-ctx-divider {
  height: 1px;
  background: #E8E8E8;
  margin: 4px 8px;
}
html.dark .am-ctx-divider {
  background: #333;
}
.am-ctx-new {
  color: #888;
}
.am-ctx-empty {
  padding: 8px 10px;
  font-size: 12px;
  color: #999;
}

/* === OAUTH SUCCESS/ERROR PAGES (MCP connection popups) === */
.text-indigo-500 {
  color: #444444 !important;
}
.focus\:border-indigo-500:focus {
  border-color: #555555 !important;
}
.focus\:ring-indigo-500:focus {
  --tw-ring-color: #555555 !important;
}

/* === CREATE MATTER MODAL === */
#am-create-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.am-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.4);
}
.am-modal-card {
  position: relative;
  background: white;
  border-radius: 12px;
  padding: 24px;
  width: 340px;
  max-width: 90vw;
  box-shadow: 0 8px 32px rgba(0,0,0,0.16);
}
html.dark .am-modal-card {
  background: #1e1e1e;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.am-modal-title {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 600;
  color: #222;
}
html.dark .am-modal-title {
  color: #eee;
}
.am-modal-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #D0D0D0;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
  color: #222;
}
html.dark .am-modal-input {
  border-color: #444;
  background: #2a2a2a !important;
  color: #eee;
}
.am-modal-input:focus {
  border-color: #888;
}
html.dark .am-modal-input:focus {
  border-color: #666;
}
.am-modal-hint {
  margin-top: 8px;
  font-size: 12px;
  color: #888;
}
html.dark .am-modal-hint {
  color: #777;
}
.am-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
.am-modal-cancel,
.am-modal-create {
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.am-modal-cancel {
  background: #E8E8E8;
  color: #555;
}
html.dark .am-modal-cancel {
  background: #333;
  color: #ccc;
}
.am-modal-cancel:hover {
  background: #DDD;
}
html.dark .am-modal-cancel:hover {
  background: #444;
}
.am-modal-create {
  background: #333;
  color: white;
}
html.dark .am-modal-create {
  background: #555;
  color: white;
}
.am-modal-create:hover {
  background: #222;
}
html.dark .am-modal-create:hover {
  background: #666;
}
.am-modal-create:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* === FILTERING STATE === */
/* Hide popovers/menus during programmatic BookmarkNav clicks */
body.am-filtering [data-radix-popper-content-wrapper],
body.am-filtering [role="listbox"],
body.am-filtering .popover-ui {
  opacity: 0 !important;
  pointer-events: none !important;
  position: fixed !important;
  left: -9999px !important;
}
/* Dim conversation list during filter transition */
body.am-filtering .flex-grow {
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 0.15s;
}

/* ===== Hide RAG / file_search UI surfaces =====
   Agents are instructed not to discuss RAG, so the chat UI must not expose
   the retrieval mechanics (tool indicators, chevron, expanding file list,
   sources panel). Pure-CSS override — no client rebuild needed.
   NOTE: pinned to current LibreChat version; revisit selectors on upgrade. */

/* 1) Inline retrieval indicator ("Used Retrieval" / "Searching my knowledge")
      rendered by RetrievalCall → ProgressText with disabled, non-expandable button.
      Target the parent ROW (not just the wrapper) to avoid leaving a ~30px
      empty gap from the row's h-5 + my-2.5 styles. */
div:has(> .progress-text-wrapper:has(button:disabled:not([aria-expanded]))) {
  display: none !important;
}

/* 2) Function tool-call rows from ToolCall.tsx — pure-CSS approach, no JS
      tagging required. Targets buttons with [aria-expanded] which are
      ToolCall-only (RetrievalCall uses disabled buttons without that attr).
      NOTE: this affects ALL function-tool invocations (file_search, web
      search, plugins, etc.), not just file_search — to scope tighter we'd
      need runtime text-match tagging. User accepted this trade-off. */

/* Hide label text + chevron inside the tool-call button, but preserve the
   Spinner. The native Spinner (packages/client/src/svgs/Spinner.tsx)
   renders as <svg class="spinner">, so :not(.spinner) keeps it visible
   while still hiding the chevron (a lucide <svg> with no .spinner class). */
.progress-text-wrapper button[aria-expanded] > span,
.progress-text-wrapper button[aria-expanded] > svg:not(.spinner) {
  display: none !important;
}
.progress-text-wrapper button[aria-expanded] {
  pointer-events: none !important;
  cursor: default !important;
}

/* Hide the expanding sub-panel. ToolCall.tsx renders two sibling divs: the
   trigger row (containing the progress-text-wrapper) and the expanding
   panel as its next sibling with className="relative". */
div:has(> .progress-text-wrapper > .progress-text-content > button[aria-expanded])
  + div.relative {
  display: none !important;
}

/* Once finished, FinishedIcon renders a div with bg-brand-purple as the
   button's first child. Collapse the parent ROW (not just the wrapper)
   to avoid a ~30px empty gap from the row's h-5 + my-2.5. */
div:has(> .progress-text-wrapper:has(> .progress-text-content > button[aria-expanded] > .bg-brand-purple)) {
  display: none !important;
}

/* 4) AuditMatic catch-all: collapse EVERY tool-call row (in-progress + finished)
      so the chat shows just the agent's prose, not a column of anonymous icons.
      A single rotating-text "thinking" indicator is injected via
      auditmatic-custom.js while the message is streaming. */
div:has(> .progress-text-wrapper > .progress-text-content > button) {
  display: none !important;
}

/* The rotating-text indicator injected by auditmatic-custom.js */
.am-thinking-indicator {
  padding: 6px 0 4px;
  font-size: 14px;
  color: #6b7280;
  font-style: italic;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
  animation: am-thinking-pulse 2.4s ease-in-out infinite;
}
html.dark .am-thinking-indicator {
  color: #9ca3af;
}
@keyframes am-thinking-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/* 3) Sources region below assistant messages (agent Files tab, citations, etc.)
      Targeted via the English aria-label. If we enable other locales, switch to
      a structural selector or patch a hook class into Sources.tsx. */
[role="region"][aria-label="Search results and sources"] {
  display: none !important;
}