/*
 * Abakhus Researcher - Custom CSS
 * 
 * Design tokens:
 *   --bg-primary: #0F1117 (dark background)
 *   --bg-card: #1A1D27 (card background)
 *   --accent-teal: #00B4A6 (signature teal)
 *   --border-color: #2A2D3A
 *   --text-primary: #E5E7EB
 *   --text-secondary: #9CA3AF
 */

:root {
  /* Test rule - if you see a red outline, CSS injection is working */
  /* outline: 3px solid red !important; */
  
  /* Design tokens */
  --bg-primary: #0F1117;
  --bg-card: #1A1D27;
  --accent-teal: #00B4A6;
  --border-color: #2A2D3A;
  --text-primary: #E5E7EB;
  --text-secondary: #9CA3AF;
}

/* Session Report Card Styles */
.session-report-card {
  background: linear-gradient(135deg, #1A1D27 0%, #151821 100%);
  border: 1px solid #2A2D3A;
  border-radius: 12px;
  padding: 24px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  max-width: 560px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
  margin: 16px 0;
}

.session-report-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.session-report-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #E5E7EB;
  display: flex;
  align-items: center;
  gap: 8px;
}

.complete-badge {
  background: #00B4A6;
  color: #FFFFFF;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Stacked bar */
.stacked-bar-container {
  margin-bottom: 12px;
}

.stacked-bar {
  display: flex;
  height: 24px;
  border-radius: 6px;
  overflow: hidden;
  background: #1F2937;
}

.stacked-bar-segment {
  height: 100%;
  transition: width 0.5s ease-out;
}

.stacked-bar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: #9CA3AF;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

/* Plan vs Actual table */
.plan-actual-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  margin-top: 20px;
  margin-bottom: 16px;
}

.plan-actual-table th {
  text-align: left;
  padding: 8px 10px;
  color: #9CA3AF;
  font-weight: 500;
  border-bottom: 1px solid #2A2D3A;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.plan-actual-table th:last-child,
.plan-actual-table td:last-child {
  text-align: right;
}

.plan-actual-table td {
  padding: 8px 10px;
  color: #E5E7EB;
  border-bottom: 1px solid #1F2937;
}

.delta-positive {
  color: #10B981;
  font-size: 0.75rem;
}

.delta-negative {
  color: #F59E0B;
  font-size: 0.75rem;
}

/* Totals */
.totals-container {
  display: flex;
  gap: 32px;
  margin-bottom: 12px;
  padding-top: 16px;
  border-top: 1px solid #2A2D3A;
  margin-top: 16px;
}

.total-block {
  flex: 1;
}

.total-label {
  font-size: 0.7rem;
  color: #9CA3AF;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.total-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
}

.total-unit {
  font-size: 0.8rem;
  color: #9CA3AF;
  font-weight: 400;
  margin-left: 4px;
}

.reading-time {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: #9CA3AF;
  margin-top: 8px;
}

/* Credits section */
.credits-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #2A2D3A;
}

.credits-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.credits-label {
  font-size: 0.7rem;
  color: #9CA3AF;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.credits-fraction {
  font-size: 0.8rem;
  color: #9CA3AF;
  font-variant-numeric: tabular-nums;
}

.credits-bar {
  width: 100%;
  height: 8px;
  background: #1F2937;
  border-radius: 4px;
  overflow: hidden;
}

.credits-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease-out;
}

/* Hide message toolbar icons */
div:has(> [class*="-feedback-"]) {
    display: none !important;
}

button:has(+ div > [class*="-feedback-"]) {
    display: none !important;
}

/* Login page password placeholder */
input[type="password"]::placeholder {
    font-size: 0.54rem !important;
    letter-spacing: 0;
}

/* ChatSettings panel headers */
label[for="_db_header"],
label[for="_search_header"] {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    margin-top: 0.25rem;
}

label[for="_db_header"] + div,
label[for="_search_header"] + div {
    display: none !important;
}

/* Sidebar shared-thread indicators */
li[data-shared-out="true"] {
    border-left: 3px solid #89b4fa !important;
    padding-left: 4px;
}
li[data-shared-out="true"] span.truncate {
    font-style: italic;
}

li[data-shared-in="true"] {
    border-left: 3px solid #a6e3a1 !important;
    padding-left: 4px;
}
li[data-shared-in="true"] span.truncate {
    font-style: italic;
}

/* COMPLETE pill for finished research sessions */
li[data-complete="true"] span.truncate {
    position: relative;
    padding-right: 52px;
}
li[data-complete="true"] span.truncate::after {
    content: "DONE";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: #00B4A6;
    color: #FFFFFF;
    font-size: 0.58rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 8px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-family: 'Inter', sans-serif;
    line-height: 1.4;
}

/* De-emphasize slash-command threads */
li[data-slash="true"] {
    opacity: 0.35 !important;
}
li[data-slash="true"]:hover {
    opacity: 0.6 !important;
}

/* ============================================
   LIGHT THEME CARD OVERRIDES
   Chainlit uses Tailwind darkMode:'class' —
   html.dark = dark mode, html:not(.dark) = light mode
   ============================================ */

/* Card container backgrounds and borders */
html:not(.dark) .sr-card,
html:not(.dark) .cb-card,
html:not(.dark) .wp-card {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
}

/* Session Report: override the dark gradient specifically */
html:not(.dark) .sr-card {
  background: linear-gradient(135deg,#FFFFFF 0%,#F8F9FA 100%) !important;
}

/* Row dividers and cell text in Session Report table */
html:not(.dark) .sr-table td,
html:not(.dark) .sr-table th {
  border-color: #E2E8F0 !important;
  color: #4A5568 !important;
}
html:not(.dark) .sr-table th {
  color: #718096 !important;
}

/* Title, meta, stats text in Session Report */
html:not(.dark) .sr-title,
html:not(.dark) .sr-stats-value {
  color: #1A202C !important;
}
html:not(.dark) .sr-stats-label,
html:not(.dark) .sr-reading,
html:not(.dark) .sr-meta {
  color: #718096 !important;
}

/* Session Report badge (COMPLETE) — keep teal */
html:not(.dark) .sr-badge {
  background: #00B4A6 !important;
  color: #FFFFFF !important;
}

/* Session Report pills (journal, word count) */
html:not(.dark) .sr-pill {
  background: #EDF2F7 !important;
  color: #4A5568 !important;
  border: 1px solid #E2E8F0 !important;
}

/* Generic span text in cb-card and wp-card (dark inline colors → readable) */
html:not(.dark) .cb-card span,
html:not(.dark) .wp-card span {
  color: #2D3748;
}

/* Preserve teal accents — both spacing variants of the inline style */
html:not(.dark) .cb-card span[style*="color:#00B4A6"],
html:not(.dark) .cb-card span[style*="color: #00B4A6"],
html:not(.dark) .wp-card span[style*="color:#00B4A6"],
html:not(.dark) .wp-card span[style*="color: #00B4A6"] {
  color: #00B4A6 !important;
}

/* Preserve red status color (low credits bar) */
html:not(.dark) .cb-card span[style*="color:#EF4444"],
html:not(.dark) .cb-card span[style*="color: #EF4444"] {
  color: #EF4444 !important;
}

/* Preserve amber status color */
html:not(.dark) .cb-card span[style*="color:#F59E0B"],
html:not(.dark) .cb-card span[style*="color: #F59E0B"] {
  color: #F59E0B !important;
}

/* Section row dividers in wp-card (inline border-bottom:#1F2937) */
html:not(.dark) .wp-card div[style*="border-bottom"] {
  border-color: #E2E8F0 !important;
}

/* Active section row highlight — match browser-normalised rgb() form */
html:not(.dark) .wp-card div[style*="background:#1F2937"],
html:not(.dark) .wp-card div[style*="background: rgb(31, 41, 55)"] {
  background: #F0FDF4 !important;
}

/* Footer dividers (inline border-top:#2A2D3A) */
html:not(.dark) .wp-card div[style*="border-top"],
html:not(.dark) .cb-card div[style*="border-top"] {
  border-color: #E2E8F0 !important;
}

/* Section counter pill (inline background:#252836) */
html:not(.dark) .wp-card span[style*="background:#252836"] {
  background: #EDF2F7 !important;
  color: #4A5568 !important;
}

/* Credit key pill (teal monospace) — lighten background */
html:not(.dark) .cb-card span[style*="color:#00B4A6"][style*="monospace"] {
  background: #E6FFFA !important;
}

/* Progress bar track in cb-card (inline background:#1F2937) */
html:not(.dark) .cb-card div[style*="height:8px"] {
  background: #E2E8F0 !important;
}

/* Low credits warning box */
html:not(.dark) .cb-card div[style*="background:#2D1F1F"] {
  background: #FFF5F5 !important;
  border-color: #FEB2B2 !important;
  color: #C53030 !important;
}

/* Used/Total column divider line in cb-card */
html:not(.dark) .cb-card div[style*="width:1px"] {
  background: #E2E8F0 !important;
}

/* Muted label text in cb-card ("Used", "Total", "Lifetime") */
html:not(.dark) .cb-card div[style*="color:#6B7280"],
html:not(.dark) .cb-card span[style*="color:#6B7280"] {
  color: #718096 !important;
}
html:not(.dark) .cb-card div[style*="color:#9CA3AF"],
html:not(.dark) .cb-card span[style*="color:#9CA3AF"] {
  color: #4A5568 !important;
}

/* Muted text in wp-card footer */
html:not(.dark) .wp-card span[style*="color:#9CA3AF"] {
  color: #4A5568 !important;
}
html:not(.dark) .wp-card span[style*="color:#6B7280"] {
  color: #718096 !important;
}

/* DONE pill in sidebar — teal, unchanged in both themes */
html:not(.dark) li[data-complete="true"] span.truncate::after {
  background: #00B4A6;
  color: #FFFFFF;
}

/* ============================================
   MERGED FROM hide_message_icons.css
   ============================================ */

/* Suppress copy / helpful / not-helpful icons on assistant messages */
div:has(> [class*="-feedback-"]) {
    display: none !important;
}
button:has(+ div > [class*="-feedback-"]) {
    display: none !important;
}

/* Login page — password placeholder font */
input[type="password"]::placeholder {
    font-size: 0.54rem !important;
    letter-spacing: 0;
}

/* ChatSettings section header labels */
label[for="_db_header"],
label[for="_search_header"] {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    margin-top: 0.25rem;
}
label[for="_db_header"] + div,
label[for="_search_header"] + div {
    display: none !important;
}

/* ChatSettings item labels */
label[for="use_ncbi"],
label[for="use_arxiv_db"],
label[for="use_openalex_db"],
label[for="use_pubmed"],
label[for="use_europepmc"],
label[for="use_tavily"],
label[for="use_brave"],
label[for="use_arxiv"],
label[for="use_openalex"] {
    font-size: 0.78rem !important;
    font-weight: 500 !important;
}

/* Sidebar shared-thread indicators */
li[data-shared-out="true"] {
    border-left: 3px solid #89b4fa !important;
    padding-left: 4px;
}
li[data-shared-out="true"] span.truncate {
    font-style: italic;
}
li[data-shared-in="true"] {
    border-left: 3px solid #a6e3a1 !important;
    padding-left: 4px;
}
li[data-shared-in="true"] span.truncate {
    font-style: italic;
}

/* ============================================
   CARD A (cb-card) — backup selectors for
   progress bar track + key ID pill.
   Attribute selectors target the literal style
   strings from the Python HTML builder.
   ============================================ */

html:not(.dark) .cb-card div[style*="background:#1F2937"] {
  background: #E2E8F0 !important;
}

html:not(.dark) .cb-card span[style*="background:#252836"] {
  background: #E6FFFA !important;
  border: 1px solid #B2DFDB !important;
}

/* ============================================
   CARDS B + C (ep-card) — PlanEditor light theme
   React serialises inline styles via the CSSOM so
   colours are normalised to rgb(); structural
   selectors are used instead of style-attr matching.
   ============================================ */

/* Outer container */
html:not(.dark) .ep-card {
  background: #FFFFFF !important;
  border-color: #CBD5E0 !important;
  color: #2D3748;
}

/* Clear dark backgrounds from all inner divs */
html:not(.dark) .ep-card div {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
}

/* Textarea */
html:not(.dark) .ep-card textarea {
  background: #F0F4F8 !important;
  color: #2D3748 !important;
  border-color: #CBD5E0 !important;
}
html:not(.dark) .ep-card textarea:focus {
  border-color: #4299E1 !important;
}

/* All buttons — neutral light default */
html:not(.dark) .ep-card button {
  background: #EDF2F7 !important;
  color: #4A5568 !important;
  border-color: #CBD5E0 !important;
}

/* Action row — Confirm Plan */
html:not(.dark) .ep-card > div:last-child > button:first-child {
  background: #38A169 !important;
  color: #FFFFFF !important;
  border-color: #2F855A !important;
}

/* Action row — Reset */
html:not(.dark) .ep-card > div:last-child > button:nth-child(2) {
  background: #EDF2F7 !important;
  color: #4A5568 !important;
  border-color: #A0AEC0 !important;
}

/* Action row — Cancel */
html:not(.dark) .ep-card > div:last-child > button:last-child {
  background: #FEB2B2 !important;
  color: #C53030 !important;
  border-color: #FC8181 !important;
}

/* Confirmed / locked state */
html:not(.dark) .ep-confirmed {
  background: #F0FFF4 !important;
  border-color: #9AE6B4 !important;
}
html:not(.dark) .ep-confirmed span {
  color: #276749 !important;
}

/* ============================================
   CB-CARD STRUCTURAL v2
   Replaces brittle [style*="value"] selectors.
   Chrome normalises inline style attrs by adding
   spaces after colons — attr-value selectors miss
   unless they match the canonical serialised form.
   Structural nth-child selectors are immune.
   .cb-react  = React component (post-activation)
   :not(.cb-react) = Python HTML string (startup)
   ============================================ */

/* Header title — #E5E7EB is near-white, invisible on white background */
html:not(.dark) .cb-card:not(.cb-react) > div:first-child > span:first-child {
  color: #1A202C !important;
}

/* Key ID pill — teal-tinted background + readable text */
html:not(.dark) .cb-card:not(.cb-react) > div:first-child > span:last-child {
  background: #E6FFFA !important;
  color: #007a72 !important;
  border: 1px solid #B2DFDB !important;
}

/* Progress bar track — Python HTML card (2nd direct child of outer) */
html:not(.dark) .cb-card:not(.cb-react) > div:nth-child(2) {
  background: #E2E8F0 !important;
}

/* Stats row top border */
html:not(.dark) .cb-card:not(.cb-react) > div:nth-child(4) {
  border-top-color: #E2E8F0 !important;
}

/* Stats row column divider (2nd child inside stats row) */
html:not(.dark) .cb-card:not(.cb-react) > div:nth-child(4) > div:nth-child(2) {
  background: #E2E8F0 !important;
}

/* Low-credits warning box (6th child — only present when pct < 10%) */
html:not(.dark) .cb-card:not(.cb-react) > div:nth-child(6) {
  background: #FFF5F5 !important;
  border-color: #FEB2B2 !important;
  color: #C53030 !important;
}

/* Progress bar track — React card (3rd direct child of outer) */
html:not(.dark) .cb-card.cb-react > div:nth-child(3) {
  background: #E2E8F0 !important;
}

/* ============================================
   SR-TOTAL-VALUE — Session/Lifetime total numbers
   totalValue in SessionReport.jsx uses color:#FFFFFF
   (hardcoded white) — invisible in light mode.
   Override via className sr-total-value.
   ============================================ */
html:not(.dark) .sr-total-value {
  color: #1A202C !important;
}
html:not(.dark) .sr-total-value span {
  color: #718096 !important;
}

/* ============================================
   RV-DOC — PaperViewer document pane
   ============================================ */
html:not(.dark) .rv-doc {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  border-left-color: #00B4A6 !important;
}
html:not(.dark) .rv-doc > div {
  background: #F7FAFC !important;
  border-color: #E2E8F0 !important;
  color: #2D3748 !important;
}
html:not(.dark) .rv-doc * {
  color: #2D3748;
}
html:not(.dark) .rv-doc [style*="color: rgb(0, 180, 166)"],
html:not(.dark) .rv-doc [style*="color:#00B4A6"],
html:not(.dark) .rv-doc [style*="color: #00B4A6"] {
  color: #00B4A6 !important;
}

html:not(.dark) .rv-doc p,
html:not(.dark) .rv-doc .doc-p {
  color: #2D3748 !important;
}

html:not(.dark) .rv-doc {
  color: #2D3748 !important;
}

html:not(.dark) .sr-card div[style*="border-radius:4px"],
html:not(.dark) .sr-card div[style*="border-radius: 4px"] {
  background: #E2E8F0 !important;
}

/* ============================================
  ANALYTICS DASHBOARD — summary cards
  Dark theme defaults are expressed inline in the HTML.
  These rules provide light theme adaptation.
  ============================================ */

/* Shared card polish */
.db-summary-card {
  width: 100%;
  box-sizing: border-box;
}

/* Ensure links inside summary cards inherit the intended emphasis */
.db-summary-card a {
  text-decoration: none;
}
.db-summary-card a:hover {
  text-decoration: underline;
}

/* Light theme — database summary cards */
html:not(.dark) .db-summary-card {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  border-left-color: #00B4A6 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

html:not(.dark) .db-summary-card div[style*="border-bottom:1px solid #2A2D3A"],
html:not(.dark) .db-summary-card div[style*="border-bottom: 1px solid #2A2D3A"] {
  border-color: #E2E8F0 !important;
}

html:not(.dark) .db-summary-card div[style*="border-bottom:1px solid #1F2937"],
html:not(.dark) .db-summary-card div[style*="border-bottom: 1px solid #1F2937"] {
  border-color: #E2E8F0 !important;
}

html:not(.dark) .db-summary-card span,
html:not(.dark) .db-summary-card div,
html:not(.dark) .db-summary-card a {
  color: #2D3748 !important;
}

html:not(.dark) .db-summary-card a {
  color: inherit !important;
}

html:not(.dark) .db-summary-card [style*="EF4444"] {
  color: #C53030 !important;
}

html:not(.dark) .db-summary-card [style*="F59E0B"] {
  color: #B7791F !important;
}

html:not(.dark) .db-summary-card [style*="00B4A6"] {
  color: #00897B !important;
}

html:not(.dark) .db-summary-card [style*="6B7280"] {
  color: #718096 !important;
}

html:not(.dark) .db-summary-card span[style*="background:rgba(255,255,255,0.06)"],
html:not(.dark) .db-summary-card span[style*="background: rgba(255,255,255,0.06)"] {
  background: #F7FAFC !important;
}

/* Preserve color-coded result numbers and badges */
html:not(.dark) .db-summary-card a[style*="color:#EF4444"],
html:not(.dark) .db-summary-card a[style*="color: #EF4444"],
html:not(.dark) .db-summary-card span[style*="color:#EF4444"],
html:not(.dark) .db-summary-card span[style*="color: #EF4444"] {
  color: #C53030 !important;
}

html:not(.dark) .db-summary-card a[style*="color:#F59E0B"],
html:not(.dark) .db-summary-card a[style*="color: #F59E0B"],
html:not(.dark) .db-summary-card span[style*="color:#F59E0B"],
html:not(.dark) .db-summary-card span[style*="color: #F59E0B"] {
  color: #B7791F !important;
}

html:not(.dark) .db-summary-card a[style*="color:#00B4A6"],
html:not(.dark) .db-summary-card a[style*="color: #00B4A6"],
html:not(.dark) .db-summary-card span[style*="color:#00B4A6"],
html:not(.dark) .db-summary-card span[style*="color: #00B4A6"] {
  color: #00897B !important;
}

/* Fix: PaperViewer section headings and document title in light mode */
html:not(.dark) .rv-doc h2,
html:not(.dark) .rv-doc .doc-heading {
  color: #1A202C !important;
  border-color: #E2E8F0 !important;
}

html:not(.dark) .rv-doc .doc-title,
html:not(.dark) .rv-doc [style*="textTransform"][style*="uppercase"] {
  color: #4A5568 !important;
}

/* ==========================================================================
   Dark-mode secondary-text contrast (AA) — bump inline #6B7280 spans in the
   custom HTML cards to the #9CA3AF token. Light theme keeps its own mappings.
   ========================================================================== */
.dark .cb-card span[style*="color:#6B7280"],
.dark .cb-card div[style*="color:#6B7280"],
.dark .wp-card span[style*="color:#6B7280"],
.dark .wp-card div[style*="color:#6B7280"],
.dark .db-summary-card span[style*="color:#6B7280"],
.dark .db-summary-card div[style*="color:#6B7280"] {
  color: #9CA3AF !important;
}

/* ==========================================================================
   Message action buttons — the welcome-message "Reset settings" button
   (Chainlit renders actions as muted outline buttons; filled teal works
   on both dark and light themes). Hook = the Action's id → DOM id.
   ========================================================================== */
#reset-settings-action {
  background: #00B4A6 !important;
  color: #04211C !important;
  border: 1px solid #00B4A6 !important;
  font-weight: 600 !important;
}

#reset-settings-action:hover {
  background: #0AC2B2 !important;
  border-color: #0AC2B2 !important;
  color: #04211C !important;
}