/* IntelinAir Custom Branding CSS
 * Loaded via client/dist/index.html <link> tag
 * Production volume mount: client/public/assets -> /app/client/public/assets
 *
 * RULES:
 * - Only override what needs fixing. Do not restyle the entire app.
 * - Every rule must have a comment explaining WHY it exists.
 * - Test every change across multiple conversations and screen widths.
 */

/* ============================================================
 * 1. STATUS LINE TEXT OVERFLOW
 * Problem: Long status descriptions get truncated at the
 *          container edge with no indication of the full text.
 * Fix: Allow text to wrap. Expand parent containers to fit.
 * ============================================================ */

.progress-text-wrapper {
  height: auto !important;
  min-height: 1.25rem;
}

.progress-text-content {
  position: relative !important;
  white-space: normal !important;
  overflow: visible !important;
  line-height: 1.4 !important;
}

/* Parent containers must also expand for wrapped status text */
div:has(> .progress-text-wrapper) {
  height: auto !important;
  min-height: 1.25rem;
}

/* ============================================================
 * 2. CHECKMARK ICON VISIBILITY
 * Problem: Completed status checkmarks use a very light fill
 *          (14% opacity green) making them nearly invisible,
 *          especially on white backgrounds.
 * Fix: Increase fill opacity and make stroke bolder.
 * ============================================================ */

/* Ensure the in-progress circle icon doesn't shrink when status text wraps.
 * Only target direct-child SVGs - NOT the Check SVG nested inside the
 * solid green completion circle (which must stay at 12px). */
.progress-text-content > button > svg {
  min-width: 18px;
  min-height: 18px;
  flex-shrink: 0;
}

/* ============================================================
 * 3. ERROR ALERT STYLING
 * Problem: Error messages show as plain red text with no visual
 *          structure. Looks broken rather than handled.
 * Fix: Add padding, border, background tint, rounded corners.
 * ============================================================ */

[role="alert"] {
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(220, 38, 38, 0.2);
  background: rgba(220, 38, 38, 0.04);
  margin: 0.5rem 0;
  font-size: 0.875rem;
  line-height: 1.5;
}

.dark [role="alert"] {
  border-color: rgba(248, 113, 113, 0.2);
  background: rgba(248, 113, 113, 0.06);
}

/* ============================================================
 * 4. MARKDOWN TABLE HORIZONTAL OVERFLOW
 * Problem: Wide data tables overflow the container. Rightmost
 *          columns get cut off with no scroll affordance.
 * Fix: Make tables scrollable with subtle scrollbar.
 * ============================================================ */

.agent-turn table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.agent-turn table::-webkit-scrollbar {
  height: 4px;
}

.agent-turn table::-webkit-scrollbar-track {
  background: transparent;
}

.agent-turn table::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 2px;
}

.dark .agent-turn table::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
}

/* ============================================================
 * 5. BREATHING ANIMATION FOR IN-PROGRESS STATUS
 * ============================================================ */

@keyframes progress-breathe {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* ============================================================
 * 6. EMPTY IFRAME / FAILED STATS PANEL GAP
 * Problem: When a query tool returns no UI resources or the
 *          stats panel fails to render, an empty iframe stays
 *          in the DOM with 0px or minimal height, but its
 *          parent container still takes up vertical space.
 * Fix: Collapse empty iframes and their parents.
 * ============================================================ */

/* Collapse the transparent wrapper div when UI resources have no content */
.agent-turn div[style*="background: transparent"][style*="border: none"]:empty {
  display: none;
}

/* ============================================================
 * 7. CONSISTENT SPACING - THE VERTICAL RHYTHM SYSTEM
 * Problem: Gaps between status lines, data cards, text, and
 *          iframes are inconsistent. Some have 0px gap, others
 *          have 16px+, depending on trailing newlines in agent output.
 * Fix: Single spacing system for all agent message content.
 *
 * Layout rules:
 *   - Between consecutive status lines: 2px (tight stack)
 *   - Status line -> content (text/iframe): 8px
 *   - Content -> status line: 8px
 *   - Between paragraphs: 12px
 *   - Iframe (data card): 8px top/bottom
 * ============================================================ */

/* Consecutive status lines only - remove gap between them.
 * Uses negative margin to counteract the parent flex gap-1 (4px)
 * without removing gap globally (which breaks loading state). */
.agent-turn .my-1\.5 + .my-1\.5 {
  margin-top: -4px !important;
}

/* ============================================================
 * 8. STATUS LINE TEXT - CONSISTENT FONT SIZE AND WEIGHT
 * Problem: Status text can vary in size when wrapping or when
 *          different tools have different label lengths.
 * Fix: Lock the font to 14px medium weight for all status text.
 * ============================================================ */

.progress-text-content span {
  font-size: 0.875rem;
  font-weight: 500;
}

/* The completed text (not animating) - slightly lighter weight */
.progress-text-content > span[style*="color: rgb(55, 65, 81)"] {
  font-weight: 400;
}

/* ============================================================
 * 9. BRANDED AGENT TEXT TABLES
 * Uses CSS variables from style.css so tables adapt to any
 * whitelabel theme (agmri, myfs, hdnsights, etc.) and dark mode.
 * ============================================================ */

.agent-turn .prose table {
  font-size: 0.8125rem;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border-medium);
  border-radius: 8px;
  overflow: hidden;
  margin: 16px 0;
  width: 100%;
}

.agent-turn .prose thead th {
  background: var(--surface-submit);
  color: var(--white);
  font-weight: 600;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 8px 12px;
  border-bottom: none;
  white-space: nowrap;
  vertical-align: middle;
}

.agent-turn .prose thead th:first-child { padding-left: 14px; }
.agent-turn .prose thead th:last-child  { padding-right: 14px; }

.agent-turn .prose tbody td {
  padding: 6px 12px;
  font-size: 0.8125rem;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-primary);
  vertical-align: middle;
}

.agent-turn .prose tbody td:first-child { padding-left: 14px; }
.agent-turn .prose tbody td:last-child  { padding-right: 14px; }

.agent-turn .prose tbody tr:nth-child(even) {
  background: var(--surface-secondary);
}
.agent-turn .prose tbody tr:hover {
  background: var(--surface-tertiary);
}
.agent-turn .prose tbody tr:last-child td { border-bottom: none; }

/* Reset text color after branded headers to prevent green bleed.
 * The h2 rule in section 10 sets color: var(--surface-submit) (green).
 * Without this reset, subsequent paragraphs inherit green from
 * CSS cascade in certain render paths. Use !important to override
 * any Tailwind utility that might re-apply the heading color. */
.agent-turn .prose p,
.agent-turn .prose li,
.agent-turn .prose td {
  color: var(--text-primary);
}
.markdown p,
.prose p,
[class*="prose"] p,
[class*="markdown"] p {
  color: #1e293b !important;
}
.dark .markdown p,
.dark .prose p,
.dark [class*="prose"] p,
.dark [class*="markdown"] p {
  color: var(--text-primary) !important;
}

/* Ensure paragraph spacing - prevents consecutive <p> collapse.
 * LibreChat's Tailwind prose reset can strip margin from <p> tags,
 * causing paragraphs to merge into a single visual block. */
.markdown p,
.prose p,
[class*="prose"] p {
  display: block;
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}
.markdown p + p,
.prose p + p {
  margin-top: 1em;
}

/* ============================================================
 * 10. BRANDED AGENT TEXT HEADERS
 * Uses --surface-submit (the branded action color) for h2 accent.
 * Adapts automatically per whitelabel + dark mode.
 * ============================================================ */

.agent-turn .prose h2 {
  color: var(--surface-submit);
  font-size: 1.15rem;
  font-weight: 700;
  margin-top: 1.5em;
  margin-bottom: 0.6em;
  padding-bottom: 0.4em;
  border-bottom: 1px solid var(--border-light);
}

.agent-turn .prose h3 {
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 700;
  margin-top: 1.25em;
  margin-bottom: 0.5em;
}

/* ============================================================
 * 11. AGENT TEXT HR + BLOCKQUOTE POLISH
 * ============================================================ */

.agent-turn .prose hr {
  margin: 1.5em 0;
  border: none;
  height: 1px;
  background: var(--border-light);
}

.agent-turn .prose blockquote {
  background: var(--surface-secondary);
  border-left: 3px solid var(--surface-submit);
  border-radius: 0 6px 6px 0;
  padding: 10px 16px;
  margin: 12px 0;
}

.agent-turn .prose blockquote p {
  color: var(--text-secondary);
  margin: 2px 0;
}

/* ============================================================
 * 12. SUBTLE INLINE CODE
 * Problem: Inline code (<code> not inside <pre>) uses heavy
 *          background + monospace font that disrupts reading flow
 *          in analytical prose. It should blend, not shout.
 * Fix: Minimal background tint, inherit surrounding font metrics,
 *      slightly bolder weight for differentiation.
 * ============================================================ */

.markdown code:not(pre code),
.prose code:not(pre code),
[class*="prose"] code:not(pre code) {
  background: rgba(0, 0, 0, 0.04);
  font-size: inherit;
  line-height: inherit;
  padding: 1px 4px;
  border-radius: 3px;
  color: inherit;
  font-family: inherit;
  font-weight: 500;
}

.dark .markdown code:not(pre code),
.dark .prose code:not(pre code),
.dark [class*="prose"] code:not(pre code) {
  background: rgba(255, 255, 255, 0.08);
}

/* ============================================================
 * 13. THINKING / REASONING BLOCK - BRANDED STYLING
 * Problem: The collapsible thinking/reasoning panel (Reasoning.tsx
 *          + Thinking.tsx) renders as a plain gray rectangle with
 *          no visual connection to the IntelinAir brand.
 * Fix: White background, subtle border with branded green left
 *      accent, matching box shadow and typography.
 * ============================================================ */

/* Reasoning wrapper - the modern structured content path */
.agent-turn .group\/reasoning {
  margin: 8px 0;
}

/* ThinkingContent panel - override Tailwind defaults for branded look.
 * Targets the rounded-3xl + bg-surface-tertiary div inside both
 * the Reasoning wrapper and the legacy Thinking component. */
.agent-turn .group\/reasoning .rounded-3xl,
.agent-turn .bg-surface-tertiary.rounded-3xl {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-left: 4px solid var(--surface-submit, #2e7d32) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  padding: 12px 16px !important;
}

.dark .agent-turn .group\/reasoning .rounded-3xl,
.dark .agent-turn .bg-surface-tertiary.rounded-3xl {
  background: var(--surface-secondary) !important;
  border-color: var(--border-medium) !important;
  border-left-color: #4caf50 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Lightbulb icon - brand green instead of default gray */
.agent-turn .group\/reasoning svg.icon-sm,
.agent-turn .group\/reasoning .icon-sm {
  color: var(--surface-submit, #2e7d32) !important;
}

.dark .agent-turn .group\/reasoning svg.icon-sm,
.dark .agent-turn .group\/reasoning .icon-sm {
  color: var(--surface-submit, #4caf50) !important;
}

/* Reasoning text inside ThinkingContent - clean typography */
.agent-turn .group\/reasoning .rounded-3xl p,
.agent-turn .bg-surface-tertiary.rounded-3xl p {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: #475569;
}

.dark .agent-turn .group\/reasoning .rounded-3xl p,
.dark .agent-turn .bg-surface-tertiary.rounded-3xl p {
  color: var(--text-secondary);
}

/* Sticky header background - match page background for clean overlap */
.agent-turn .group\/reasoning > .sticky {
  background: var(--surface-primary);
}

/* ============================================================
 * 13. AUTH PAGE - HIDE DUPLICATE HEADER LOGO
 * The AuthLayout component renders a small logo.svg inside a
 * BlinkAnimation wrapper with display:none. Now that branding
 * CSS loads after Tailwind, ensure it stays hidden.
 * ============================================================ */

img[src*="assets/logo.svg"][class*="object-contain"] {
  display: none !important;
}