/*
 * JovAI Prototype CSS Override
 * Based on /home/lais/prototype/jov-ux-redesign-v7.html
 *
 * This file customizes app.jov.ai to match the prototype design.
 * Changes take effect immediately on hard refresh (Ctrl+Shift+R).
 */

/* ═══════════════════════════════════════════════════════════════════
   CSS VARIABLE DEFAULTS (Dark Mode Fallbacks)
   Per handoff doc: Set as fallbacks, not with !important
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Dark mode defaults (Ben's app will override these based on user theme choice) */
  --preset-bg: #1b2436;
  --preset-surface: #1f2a3c;  /* Middle tone for content areas */
  --preset-card: #232d3b;
  --preset-primary: #f4ac39;
  --preset-accent: #e56f2b;
  --preset-text: #d5d5d4;
  --preset-text-muted: #83877f;
  --preset-border: rgba(255, 255, 255, 0.07);
  --preset-border-light: rgba(255, 255, 255, 0.12);
  --preset-hover: rgba(244, 172, 57, 0.08);
  --preset-user-bubble: #f4ac39;
  --preset-user-bubble-text: #1b2436;
  --preset-ai-bubble: #1f2a3c;
  --preset-code: #151d2e;

  /* Link color — distinct from primary to avoid yellow-on-yellow */
  --preset-link: #5ba8f5;
  --preset-link-hover: #7dbdff;

  /* Utility colors */
  --preset-success: #4ade80;
  --preset-error: #ef4444;
  --preset-info: #4285f4;

  /* Material Design tokens */
  --mdc-theme-primary: #f4ac39;
  --mat-sys-primary: #f4ac39;

  /* Panel resize handles */
  --resize-divider-color: rgba(244, 172, 57, 0.2);
}

/* Override surface and border colors dynamically based on theme
   We detect light mode when --preset-bg is the beige color #f5f3ef
   This requires using container queries or computed values, but we'll use a simpler approach:
   Set light mode values directly since Ben's brandColors overrides the dark defaults */

/* ═══════════════════════════════════════════════════════════════════
   STRUCTURAL OVERRIDES (Safe to use !important)
   Per handoff doc: Typography, spacing, border-radius are safe
   ═══════════════════════════════════════════════════════════════════ */

/* Typography - System font stack */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Typography hierarchy */
h1, .h1 { font-size: 22px !important; font-weight: 600 !important; line-height: 1.3 !important; }
h2, .h2 { font-size: 18px !important; font-weight: 600 !important; line-height: 1.3 !important; }
h3, .h3 { font-size: 16px !important; font-weight: 600 !important; line-height: 1.4 !important; }
h4, .h4 { font-size: 14px !important; font-weight: 600 !important; line-height: 1.4 !important; }
small { font-size: 12px !important; line-height: 1.4 !important; }

/* Border radius - Rounded corners throughout */
.mat-mdc-card,
gridster-item,
.chat-widget,
.heartbeat-widget,
.agent-settings-widget {
  border-radius: 10px !important;
}

.mat-mdc-button,
.mat-mdc-raised-button,
.mat-mdc-unelevated-button {
  border-radius: 8px !important;
}

.mat-mdc-dialog-container,
.mat-mdc-menu-panel {
  border-radius: 12px !important;
}

/* Toolbar - Compact 40px height */
.mat-toolbar {
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 12px !important;
}

/* Logo styling */
.mat-toolbar .logo-text {
  font-weight: 600 !important;
  letter-spacing: -0.3px !important;
  font-size: 17px !important;
}

/* Menu button - Match prototype styling */
app-menubar button.mat-icon-button,
app-menubar button.mat-mdc-icon-button,
app-menubar .mat-icon-button,
app-menubar .mat-mdc-icon-button {
  padding: 7px !important;
  border-radius: 8px !important;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
}

app-menubar button.mat-icon-button .mat-icon,
app-menubar button.mat-mdc-icon-button .mat-icon,
app-menubar .mat-icon-button .mat-icon,
app-menubar .mat-mdc-icon-button .mat-icon {
  width: 20px !important;
  height: 20px !important;
  font-size: 20px !important;
}

app-menubar button.mat-icon-button:hover,
app-menubar button.mat-mdc-icon-button:hover,
app-menubar .mat-icon-button:hover,
app-menubar .mat-mdc-icon-button:hover {
  background-color: var(--preset-hover) !important;
}

/* Tab bar - Compact 34px height */
.mat-mdc-tab-header {
  height: 34px !important;
  min-height: 34px !important;
  background-color: var(--preset-surface) !important;
  border-bottom: 1px solid var(--preset-border) !important;
}

.mat-mdc-tab {
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}

/* Active tab indicator - Golden accent */
.mat-mdc-tab .mdc-tab-indicator__content--underline {
  border-color: var(--preset-primary) !important;
  border-width: 2px !important;
}

/* Shadows - Subtle depth */
.mat-mdc-card,
gridster-item {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}

.mat-mdc-dialog-container {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
}

/* Icons - 20px sizing */
.mat-icon {
  width: 20px !important;
  height: 20px !important;
  font-size: 20px !important;
}

/* Buttons - Refined padding */
.mat-mdc-button,
.mat-mdc-raised-button,
.mat-mdc-unelevated-button {
  padding: 6px 14px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}

/* Code blocks (fenced) */
pre {
  background: var(--preset-code) !important;
  border-radius: 6px !important;
  padding: 12px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

/* Inline code — distinct from fenced blocks, readable against message bubbles */
:not(pre) > code {
  background: color-mix(in srgb, var(--preset-text) 12%, var(--preset-ai-bubble, var(--preset-card))) !important;
  color: var(--preset-text) !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
  font-size: 13px !important;
}

/* Scrollbars - Thin and subtle */
::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

::-webkit-scrollbar-track {
  background: transparent !important;
}

::-webkit-scrollbar-thumb {
  background: var(--preset-border) !important;
  border-radius: 3px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--preset-text-muted) !important;
}

/* Transitions - Smooth 150ms (only on interactive elements) */
.mat-mdc-button,
.mat-mdc-list-item,
.mat-mdc-tab {
  transition: all 150ms ease !important;
}

/* List items - Compact spacing */
.mat-mdc-list-item {
  padding: 6px 12px !important;
  margin: 2px 0 !important;
  font-size: 14px !important;
}

/* Hover states */
.mat-mdc-button:hover,
.mat-mdc-list-item:hover {
  background-color: var(--preset-hover) !important;
}

/* Input fields */
.mat-mdc-form-field,
.mat-mdc-text-field-wrapper {
  border-radius: 8px !important;
}

input,
textarea {
  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   COLOR APPLICATION (Using CSS Variables)
   These rules make components actually USE the variables above
   ═══════════════════════════════════════════════════════════════════ */

/* Background colors - Use CSS variables (Ben's app sets these at runtime) */
html,
body,
.mat-app-background,
.bg-fill {
  background-color: var(--preset-bg) !important;
  color: var(--preset-text) !important;
}

/* Main content and dockview - Use surface color to match prototype */
.main-content,
.dockview-container {
  background-color: var(--preset-surface) !important;
  color: var(--preset-text) !important;
}

/* Force background on common Angular Material containers */
.mat-drawer-container,
.mat-sidenav-container {
  background-color: var(--preset-bg) !important;
}

/* Main content area and sidebar - Surface color */
.mat-drawer-content,
.mat-sidenav-content {
  background-color: var(--preset-surface) !important;
}

/* Override colors when in light theme - detect by checking text color */
/* When text is dark (#1b2436 / rgb(27,36,54)), we're in light mode */
html[style*="--preset-text: #1b2436"],
html[style*="--preset-text: rgb(27, 36, 54)"],
html[style*="--preset-text:#1b2436"] {
  --preset-surface: #ffffff !important;
  --preset-border: rgba(27, 36, 54, 0.07) !important;
  --preset-border-light: rgba(27, 36, 54, 0.12) !important;
  --preset-ai-bubble: #f8f8f6 !important;
}

/* Cards and panels */
.mat-mdc-card,
gridster-item,
.chat-widget,
.heartbeat-widget,
.agent-settings-widget,
.dockview-panel-host {
  background-color: var(--preset-card) !important;
  border: 1px solid var(--preset-border) !important;
}

/* Toolbar/Header */
.mat-toolbar,
.menubar {
  background-color: var(--preset-bg) !important;
  border-bottom: 1px solid var(--preset-border) !important;
  color: var(--preset-text) !important;
}

/* Primary buttons - Use theme primary color */
.mat-mdc-raised-button.mat-primary,
.mat-mdc-unelevated-button.mat-primary {
  background-color: var(--preset-primary) !important;
  color: var(--preset-bg) !important;
}

/* Text colors */
body, p, span, div {
  color: var(--preset-text);
}

.mat-mdc-tab,
.mat-mdc-list-item,
label,
.mat-mdc-form-field-label {
  color: var(--preset-text) !important;
}

/* Muted text */
small,
.text-muted,
.mat-mdc-form-field-hint {
  color: var(--preset-text-muted) !important;
}

/* Active/Selected states */
.mat-mdc-tab.mdc-tab--active,
.mat-mdc-list-item.mat-mdc-list-item-active,
[aria-selected="true"] {
  color: var(--preset-primary) !important;
}

/* Links — blue for contrast. Triple :root for unbeatable specificity (0,3,1) */
:root:root:root a {
  color: #5ba8f5 !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(91, 168, 245, 0.4) !important;
  text-underline-offset: 2px !important;
}

:root:root:root a:hover {
  color: #7dbdff !important;
  text-decoration-color: #7dbdff !important;
}

/* Borders */
.mat-mdc-card,
.mat-mdc-dialog-container,
.mat-mdc-menu-panel,
gridster-item {
  border-color: var(--preset-border) !important;
}

/* Chat input - Simple styling to match prototype */
.prompt-box .mat-mdc-form-field {
  background-color: var(--preset-card) !important;
  border: 1px solid !important;
  border-color: color-mix(in srgb, var(--preset-text) 12%, transparent) !important;
  border-radius: 10px !important;
}

.prompt-box textarea {
  font-size: 13px !important;
  color: var(--preset-text) !important;
}

.prompt-box button mat-icon {
  color: var(--preset-primary) !important;
}

/* Other input fields - Standard styling */
input:not(.prompt-box input),
textarea:not(.prompt-box textarea) {
  background-color: var(--preset-card) !important;
  color: var(--preset-text) !important;
  border: 1px solid !important;
  border-color: color-mix(in srgb, var(--preset-text) 12%, transparent) !important;
  border-radius: 8px !important;
}

/* Dialogs and menus */
.mat-mdc-dialog-container,
.mat-mdc-menu-panel {
  background-color: var(--preset-card) !important;
  color: var(--preset-text) !important;
}

/* Success/Error/Info colors */
.mat-success,
.success {
  color: var(--preset-success) !important;
}

.mat-error,
.error {
  color: var(--preset-error) !important;
}

.mat-info,
.info {
  color: var(--preset-info) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   MESSAGE BUBBLES - Prototype styling
   ═══════════════════════════════════════════════════════════════════ */

/* User message bubble - Golden gradient with dark text */
.message-bubble.self-message {
  background: linear-gradient(135deg, #f4ac39, #e56f2b) !important;
  color: #1b2436 !important;
  padding: 12px 18px !important;
  border-radius: 16px 16px 4px 16px !important;
}

/* Force dark text on all elements inside user bubble */
.message-bubble.self-message * {
  color: #1b2436 !important;
}

/* Links inside user bubble — dark blue for contrast against gold */
:root:root .message-bubble.self-message a {
  color: #1a4f8b !important;
  text-decoration-color: rgba(26, 79, 139, 0.5) !important;
}

:root:root .message-bubble.self-message a:hover {
  color: #0d3563 !important;
  text-decoration-color: #0d3563 !important;
}

/* Inline code inside user bubble — semi-transparent dark bg */
.message-bubble.self-message :not(pre) > code {
  background: rgba(27, 36, 54, 0.15) !important;
  color: #1b2436 !important;
}

/* Code blocks (pre) inside user bubble — dark bg with light text for readability */
.message-bubble.self-message pre,
.message-bubble.self-message pre code,
.message-bubble.self-message pre * {
  background: rgba(27, 36, 54, 0.85) !important;
  color: #e2e8f0 !important;
  border-radius: 6px;
}

/* AI message bubble - Use theme variable */
.message-bubble.other-message,
app-chat-screen .message-bubble.other-message,
.turn .message-bubble.other-message {
  background: var(--preset-ai-bubble) !important;
  color: var(--preset-text) !important;
  padding: 12px 18px !important;
  border-radius: 16px 16px 16px 4px !important;
  /* Use semi-transparent text color for border - adapts to light/dark themes automatically */
  border: 1px solid !important;
  border-color: color-mix(in srgb, var(--preset-text) 12%, transparent) !important;
  box-sizing: border-box !important;
}

/* Chat input area - Match heartbeat widget styling */
app-chat-widget .user-input {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   END OF OVERRIDE
   ═══════════════════════════════════════════════════════════════════ */