/**
 * =============================================================================
 * ORACLE DOMAIN STYLES
 * =============================================================================
 * 
 * Domain-isolated CSS for Oracle SME guidance system.
 * Extracted from styles.css for maintainability.
 * 
 * SECTIONS:
 *   1. Spade Button (header trigger)
 *   2. Panel (chat container)
 *   3. Tabs & Quick Actions
 *   4. Context Menu
 *   5. Dock (left panel integration)
 *   6. Tutorial Messages
 *   7. P0 Features (stop button, context ring)
 * 
 * DEPENDENCIES:
 *   - CSS variables from :root (--cyan-*, --dark-bg-*, --text-*)
 *   - Inherits KNOMAD theme via CSS custom properties
 */

/* =============================================================================
   1. SPADE BUTTON - Header SME Guidance Trigger
   States: inactive (red), initializing (green), active (luminova), ollama (warm)
   ============================================================================= */
/* Button container - invisible, only holds the icon */
/* Must override .btn base styles from bem-button.css */
.btn.btn--oracle-spade {
  width: 36px;
  height: 36px;
  padding: 0;
  margin-left: 8px;
  border: none !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn.btn--oracle-spade:hover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* The icon - natural appearance by default */
.oracle-spade-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  transition:
    transform 0.2s ease,
    filter 0.3s ease;
}

/* Default/Inactive state - logo is just itself, no effects */
.btn--oracle-spade .oracle-spade-icon {
  filter: none;
  opacity: 1;
}

.btn--oracle-spade:hover .oracle-spade-icon {
  transform: scale(1.06);
}

/* Active state (luminova glow) - Oracle online/in use */
/* Using drop-shadow filter so glow follows the icon shape, not bounding box */
/* Luminova color: --luminova-primary #00E5FF (0, 229, 255) - Crisp cyan-blue */
.btn--oracle-spade.oracle-active .oracle-spade-icon,
.btn--oracle-spade.oracle-ollama .oracle-spade-icon {
  filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.7)) drop-shadow(0 0 12px rgba(0, 229, 255, 0.5))
    drop-shadow(0 0 20px rgba(0, 229, 255, 0.3));
}

.btn--oracle-spade.oracle-active:hover .oracle-spade-icon,
.btn--oracle-spade.oracle-ollama:hover .oracle-spade-icon {
  transform: scale(1.08);
  filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.9)) drop-shadow(0 0 16px rgba(0, 229, 255, 0.6))
    drop-shadow(0 0 28px rgba(0, 229, 255, 0.4));
}

/* Focus state for keyboard navigation */
.btn--oracle-spade:focus-visible .oracle-spade-icon {
  outline: 2px solid var(--cyan, rgb(0, 200, 255));
  outline-offset: 4px;
}

/* =============================================================================
   2. PANEL - SME Guidance Chat Container
   Production typography: inherits font-family, uses theme tokens
   ============================================================================= */
#oraclePanel {
  position: fixed;
  bottom: 60px;
  right: 20px;
  width: 380px;
  height: 580px;
  max-height: 620px;

  /* Typography - establish font context for all children */
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  color: var(--text-primary);

  /* Appearance */
  background: var(--dark-bg-1-solid, rgba(15, 25, 35, 0.95));
  border: var(--border-thin) solid var(--cyan-30, rgba(0, 200, 255, 0.3));
  border-radius: var(--radius-lg); /* 12px */
  box-shadow: var(--shadow-lg);
  z-index: 10001;
  display: none;
  flex-direction: column;
  overflow: hidden;
}

#oraclePanel.visible {
  display: flex;
}

/* Panel States */
#oraclePanel.docked {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 100% !important;
  height: 100%; /* Fill the dock slot */
  max-height: 500px;
  border-radius: 0;
  border: none;
  box-shadow: none;
  display: flex; /* Ensure flex layout active */
  flex-direction: column;
}

#oraclePanel.floating {
  position: fixed;
  cursor: move;
  resize: both;
  overflow: hidden; /* Children handle their own scrolling via flex layout */
  min-width: 320px;
  min-height: 280px;
  max-width: 600px;
  max-height: 80vh;
}

#oraclePanel.floating .oracle-header {
  cursor: move;
}

/* =============================================================================
   CHAT TAB & MESSAGES - Moved from inline styles for maintainability
   ============================================================================= */
.oracle-chat-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.oracle-messages {
  flex: 1 1 0;
  overflow-y: auto;
  padding: 12px;
  min-height: 0;
  background: var(--dark-bg-1, rgba(15, 25, 35, 0.9));
}

/* =============================================================================
   COLLAPSED STATE - Compact mode showing only header + chat input
   Expands to full panel when user interacts with chat input
   ============================================================================= */
#oraclePanel.oracle-collapsed {
  height: auto !important;
  max-height: none !important;
  min-height: unset !important;
}

#oraclePanel.oracle-collapsed.docked {
  max-height: none !important;
}

/* Collapsed: Chat tab loses flex, becomes auto-height */
#oraclePanel.oracle-collapsed .oracle-chat-tab {
  flex: none !important;
  min-height: unset !important;
}

/* Hide chat messages area in collapsed state - keep input visible */
#oraclePanel.oracle-collapsed .oracle-messages {
  display: none !important;
}

/* Hide all non-chat tabs in collapsed state */
#oraclePanel.oracle-collapsed #oracleSettingsTab,
#oraclePanel.oracle-collapsed #oracleJournalTab,
#oraclePanel.oracle-collapsed #oracleWorkflowTab,
#oraclePanel.oracle-collapsed #oracleMacrosTab,
#oraclePanel.oracle-collapsed #oracleGoalsTab,
#oraclePanel.oracle-collapsed #oraclePendingAction {
  display: none !important;
}

/* Compact input area in collapsed state */
#oraclePanel.oracle-collapsed .oracle-input-area {
  border-top: none;
  padding: 8px 12px;
}

/* Hide context ring in collapsed state */
#oraclePanel.oracle-collapsed #oracleContextRing {
  display: none;
}

/* Smooth expand transition */
#oraclePanel {
  transition:
    height 0.2s ease-out,
    max-height 0.2s ease-out;
}

/* =============================================================================
   DATA-CHAT-STATE - Collapses welcome message until user types
   Toggles via: _panel.dataset.chatState = 'empty' | 'active'
   Note: !important needed to override inline styles in oracle_ui.js templates
   ============================================================================= */
#oraclePanel[data-chat-state='empty'] {
  height: auto !important;
  max-height: none !important;
}

#oraclePanel[data-chat-state='empty'] .oracle-messages {
  display: none !important;
}

#oraclePanel[data-chat-state='empty'] .oracle-chat-tab {
  flex: none !important;
  min-height: unset !important;
}

#oraclePanel[data-chat-state='empty'] #oracleContent {
  flex: none !important;
  overflow: visible !important;
}

#oraclePanel[data-chat-state='empty'] .oracle-input-area {
  border-top: none !important;
}

#oraclePanel[data-chat-state='empty'] #oracleContextRing {
  display: none !important;
}

/* Active state - restore proper layout when user types */
#oraclePanel[data-chat-state='active'] {
  height: 580px !important;
  max-height: 620px !important;
}

#oraclePanel[data-chat-state='active'].docked {
  height: 100% !important;
  max-height: 500px !important;
}

#oraclePanel[data-chat-state='active'] .oracle-messages {
  display: block !important;
}

#oraclePanel[data-chat-state='active'] .oracle-chat-tab {
  flex: 1 !important;
  min-height: 0 !important;
}

#oraclePanel[data-chat-state='active'] #oracleContent {
  flex: 1 !important;
  overflow: hidden !important;
}

/* Resize handle visual cue */
#oraclePanel.floating::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 16px;
  height: 16px;
  background: linear-gradient(135deg, transparent 50%, var(--cyan-30, rgba(0, 200, 255, 0.3)) 50%);
  cursor: se-resize;
  pointer-events: none;
}

/* =============================================================================
   3. TABS & QUICK ACTIONS
   Production typography: uses theme.css tokens
   ============================================================================= */
.oracle-tab-btn {
  /* Typography - typo-control pattern */
  font-family: var(--font-primary);
  font-size: var(--font-size-base); /* 13px */
  font-weight: var(--font-weight-medium);

  /* Appearance */
  background: var(--cyan-15, rgba(0, 200, 255, 0.15));
  border: var(--border-thin) solid var(--cyan-30, rgba(0, 200, 255, 0.3));
  border-radius: var(--radius-base); /* 6px */
  padding: var(--space-1) var(--space-2); /* 4px 8px */
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.oracle-tab-btn:hover:not(:disabled) {
  background: var(--cyan-25, rgba(0, 200, 255, 0.25));
  border-color: var(--cyan-50, rgba(0, 200, 255, 0.5));
  box-shadow: var(--glow-sm);
}

.oracle-tab-btn:focus-visible {
  outline: 2px solid var(--accent-primary, var(--cyan));
  outline-offset: 2px;
}

.oracle-tab-btn:disabled {
  opacity: var(--opacity-muted);
  cursor: not-allowed;
  pointer-events: none;
}

.oracle-tab-btn.active {
  background: var(--cyan-30, rgba(0, 200, 255, 0.3));
  border-color: var(--accent-primary, var(--cyan));
}

.oracle-quick-btn {
  /* Typography - typo-label pattern */
  font-family: var(--font-primary);
  font-size: var(--font-size-sm); /* 11px */
  font-weight: var(--font-weight-medium);

  /* Appearance */
  background: var(--cyan-10, rgba(0, 200, 255, 0.1));
  border: var(--border-thin) solid var(--cyan-25, rgba(0, 200, 255, 0.25));
  border-radius: var(--radius-sm); /* 4px */
  padding: var(--space-1) var(--space-2); /* 4px 8px */
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.oracle-quick-btn:hover:not(:disabled) {
  background: var(--cyan-20, rgba(0, 200, 255, 0.2));
  border-color: var(--cyan-40, rgba(0, 200, 255, 0.4));
  color: var(--text-primary);
  box-shadow: var(--glow-sm);
}

.oracle-quick-btn:focus-visible {
  outline: 2px solid var(--accent-primary, var(--cyan));
  outline-offset: 2px;
}

.oracle-quick-btn:disabled {
  opacity: var(--opacity-muted);
  cursor: not-allowed;
  pointer-events: none;
}

/* Accept/Reject action buttons (pending action banner) */
.oracle-accept-btn,
.oracle-reject-btn {
  font-family: var(--font-primary);
  font-size: var(--font-size-sm); /* 11px */
  font-weight: var(--font-weight-semibold);
  padding: var(--space-1) var(--space-3); /* 4px 12px */
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}

.oracle-accept-btn {
  background: rgba(50, 205, 50, 0.3);
  border: var(--border-thin) solid rgba(50, 205, 50, 0.5);
  color: #5f5;
}

.oracle-accept-btn:hover:not(:disabled) {
  background: rgba(50, 205, 50, 0.4);
  border-color: rgba(50, 205, 50, 0.7);
  box-shadow: 0 0 8px rgba(50, 205, 50, 0.3);
}

.oracle-accept-btn:focus-visible {
  outline: 2px solid #5f5;
  outline-offset: 2px;
}

.oracle-reject-btn {
  background: rgba(255, 80, 80, 0.2);
  border: 1px solid rgba(255, 80, 80, 0.4);
  color: #f88;
}

.oracle-reject-btn:hover {
  background: rgba(255, 80, 80, 0.3);
  border-color: rgba(255, 80, 80, 0.6);
  box-shadow: 0 0 8px rgba(255, 80, 80, 0.3);
}

.oracle-reject-btn:focus-visible {
  outline: 2px solid #f88;
  outline-offset: 2px;
}

.oracle-accept-btn:disabled,
.oracle-reject-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.oracle-tab-content {
  display: none;
}

.oracle-tab-content.active {
  display: flex;
  flex-direction: column;
}

/* =============================================================================
   4. CONTEXT MENU (right-click on spade)
   Pattern: Matches #oraclePanel for visual consistency
   ============================================================================= */
#oracleContextMenu {
  position: fixed;
  z-index: 10002;
  display: none;

  /* Typography - inherit from pattern */
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  color: var(--text-primary);

  /* Appearance - matches Oracle panel */
  min-width: 220px;
  padding: var(--space-2) 0; /* 8px vertical */
  background: var(--dark-bg-1-solid, rgba(15, 25, 35, 0.98));
  border: var(--border-thin) solid var(--cyan-30, rgba(0, 200, 255, 0.3));
  border-radius: var(--radius-lg); /* 12px - matches panel */
  box-shadow: var(--shadow-lg);
}

#oracleContextMenu.visible {
  display: block;
}

/* Menu Items */
#oracleContextMenu .oracle-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-3); /* 12px */
  padding: var(--space-2) var(--space-4); /* 8px 16px */
  cursor: pointer;
  transition: background 0.15s ease;
  position: relative;
}

#oracleContextMenu .oracle-menu-item:hover {
  background: var(--cyan-15, rgba(0, 200, 255, 0.15));
}

#oracleContextMenu .oracle-menu-item:focus-visible {
  outline: 2px solid var(--accent-primary, var(--cyan));
  outline-offset: -2px;
}

/* Menu Item Icon */
#oracleContextMenu .oracle-menu-icon {
  font-size: var(--font-size-md); /* 15px */
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

/* Menu Item Text */
#oracleContextMenu .oracle-menu-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#oracleContextMenu .oracle-menu-title {
  font-size: var(--font-size-base); /* 13px */
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

#oracleContextMenu .oracle-menu-desc {
  font-size: var(--font-size-xs); /* 10px */
  color: var(--text-muted);
}

/* Menu Divider */
#oracleContextMenu .oracle-menu-divider {
  height: 1px;
  margin: var(--space-1) 0; /* 4px */
  background: var(--cyan-20, rgba(0, 200, 255, 0.15));
}

/* Active/Selected State */
#oracleContextMenu .oracle-menu-item[data-active='true']::after {
  content: '✓';
  position: absolute;
  right: var(--space-3); /* 12px */
  color: var(--accent-primary, var(--cyan));
  font-weight: var(--font-weight-bold);
}

/* =============================================================================
   5. DOCK - Left panel docking container
   Pattern: Matches #oraclePanel for visual consistency
   ============================================================================= */
.oracle-dock {
  margin-top: var(--space-2); /* 8px - tighter spacing with button row */

  /* Typography - establish font context */
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  color: var(--text-primary);

  /* Appearance - subtle, blends with button row area */
  background: transparent;
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: none;
  overflow: visible;
}

.oracle-dock-header {
  display: flex;
  align-items: center;
  gap: var(--space-2); /* 8px */
  padding: var(--space-2) var(--space-3); /* 8px 12px */
  background: var(--dark-bg-2, rgba(25, 35, 45, 0.9));
  border-bottom: var(--border-thin) solid var(--cyan-20, rgba(0, 200, 255, 0.2));
}

.oracle-dock-icon {
  font-size: var(--font-size-md); /* 15px */
}

.oracle-dock-title {
  font-family: var(--font-primary);
  font-size: var(--font-size-base); /* 13px */
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  flex: 1;
}

.oracle-dock-status {
  font-family: var(--font-primary);
  font-size: var(--font-size-xs); /* 10px */
  font-weight: var(--font-weight-medium);
  color: var(--text-muted);
  padding: 2px var(--space-2); /* 2px 8px */
  background: var(--cyan-10, rgba(0, 200, 255, 0.1));
  border-radius: var(--radius-sm); /* 4px */
}

.oracle-dock-slot {
  /* PRD-44: Collapse-first — no height reserved until Oracle has active chat */
  height: 0;
  min-height: 0;
  max-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: height 0.25s ease, min-height 0.25s ease, max-height 0.25s ease;
}

/* Expand dock only when Oracle panel exists with active chat */
.oracle-dock-slot:has(#oraclePanel[data-chat-state='active']) {
  height: 450px;
  min-height: 300px;
  max-height: 550px;
}

/* Keep collapsed for empty state (explicit, matches default) */
.oracle-dock-slot:has(#oraclePanel[data-chat-state='empty']) {
  height: 0;
  min-height: 0;
  max-height: 0;
}

.oracle-dock:has(#oraclePanel[data-chat-state='empty']) {
  height: auto;
  min-height: unset;
}

/* Collapse dock when panel is floating (undocked) - class added by JS */
.oracle-dock.oracle-dock--empty {
  display: none !important;
}

.oracle-dock-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--text-muted, rgba(255, 255, 255, 0.4));
  font-size: 12px;
  font-style: italic;
}

.oracle-dock.snap-target {
  border-color: var(--cyan, rgb(0, 200, 255));
  box-shadow: 0 0 20px var(--cyan-30, rgba(0, 200, 255, 0.3));
}

.oracle-dock-placeholder.hidden {
  display: none;
}

/* =============================================================================
   6. TUTORIAL MESSAGES
   ============================================================================= */
.oracle-message--tutorial {
  animation: tutorialFadeIn 0.3s ease-out;
}

@keyframes tutorialFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.oracle-message-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--cyan-20, rgba(0, 200, 255, 0.2));
}

.oracle-message-icon {
  font-size: 16px;
}

.oracle-message-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary, #fff);
  flex: 1;
}

.oracle-message-step {
  font-size: 10px;
  color: var(--text-muted, rgba(255, 255, 255, 0.5));
  padding: 2px 6px;
  background: var(--cyan-10, rgba(0, 200, 255, 0.1));
  border-radius: 4px;
}

.oracle-message-content {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary, rgba(255, 255, 255, 0.85));
}

.oracle-message-content p {
  margin: 0 0 8px 0;
}

.oracle-message-content strong {
  color: var(--cyan, rgb(0, 200, 255));
}

.oracle-message-nav {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--cyan-15, rgba(0, 200, 255, 0.15));
}

.oracle-nav-skip {
  margin-left: auto;
}

/* =============================================================================
   7. P0 FEATURES - Stop Button & Context Ring
   From oracle_chat_upgrade_spec.json
   ============================================================================= */

/* Send/Stop toggle button - embedded in textarea container */
.oracle-send-btn {
  position: absolute;
  right: var(--space-2); /* 8px, adjusted for visual balance */
  bottom: var(--space-2);
  width: 28px;
  height: 28px;
  padding: 0;

  /* Typography */
  font-family: var(--font-primary);
  font-size: var(--font-size-sm); /* 11px */

  /* Appearance */
  border: var(--border-thin) solid var(--cyan-30, rgba(0, 200, 255, 0.3));
  border-radius: var(--radius-base);
  background: var(--cyan-20, rgba(0, 200, 255, 0.2));
  color: var(--accent-primary, var(--cyan));
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.oracle-send-btn:hover:not(:disabled) {
  background: var(--cyan-30, rgba(0, 200, 255, 0.3));
  border-color: var(--cyan-50, rgba(0, 200, 255, 0.5));
  color: var(--text-primary);
  box-shadow: var(--glow-sm);
}

/* Processing state: arrow → glowing red stop square */
.oracle-send-btn.processing,
.oracle-send-btn.oracle-send-btn--processing {
  background: rgba(255, 80, 80, 0.15);
  color: #ff6b6b;
  animation: oracle-stop-glow 1.5s ease-in-out infinite;
}

.oracle-send-btn.processing:hover,
.oracle-send-btn.oracle-send-btn--processing:hover {
  background: rgba(255, 80, 80, 0.3);
  color: #ff4444;
}

@keyframes oracle-stop-glow {
  0%,
  100% {
    box-shadow: 0 0 4px rgba(255, 80, 80, 0.3);
  }
  50% {
    box-shadow: 0 0 12px rgba(255, 80, 80, 0.6);
  }
}

.oracle-send-icon {
  font-size: var(--font-size-sm); /* 11px */
  line-height: 1;
}

/* Focus state for keyboard navigation */
.oracle-send-btn:focus-visible {
  outline: 2px solid var(--accent-primary, var(--cyan));
  outline-offset: 2px;
}

.oracle-send-btn.processing:focus-visible {
  outline-color: var(--color-danger, #ff4444);
}

/* Disabled state */
.oracle-send-btn:disabled {
  opacity: var(--opacity-muted);
  cursor: not-allowed;
  pointer-events: none;
}

/* Context ring indicator */
.oracle-context-ring {
  position: relative;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.oracle-context-ring__progress {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(
    var(--cyan, rgb(0, 200, 255)) 0%,
    var(--cyan, rgb(0, 200, 255)) var(--context-percent, 0%),
    rgba(255, 255, 255, 0.1) var(--context-percent, 0%),
    rgba(255, 255, 255, 0.1) 100%
  );
  transform: rotate(-90deg);
  -webkit-mask: radial-gradient(white 55%, transparent 55%);
  mask: radial-gradient(white 55%, transparent 55%);
}

.oracle-context-ring__inner {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: var(--dark-bg-1, rgba(15, 25, 35, 0.95));
  border-radius: 50%;
}

.oracle-context-ring__tooltip {
  visibility: hidden;
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--dark-bg-1-solid, rgba(15, 25, 35, 0.98));
  color: var(--text-primary, #fff);
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 11px;
  border: 1px solid var(--cyan-30, rgba(0, 200, 255, 0.3));
  z-index: 10002;
}

.oracle-context-ring:hover .oracle-context-ring__tooltip {
  visibility: visible;
}

/* Warning state at 90%+ */
.oracle-context-ring.warning .oracle-context-ring__progress {
  background: conic-gradient(
    #ff9500 0%,
    #ff9500 var(--context-percent, 90%),
    rgba(255, 255, 255, 0.1) var(--context-percent, 90%),
    rgba(255, 255, 255, 0.1) 100%
  );
  animation: contextPulse 1.5s ease-in-out infinite;
}

@keyframes contextPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* =========================================================================
   P2/P3: MESSAGE TIMESTAMPS AND FEEDBACK
   ========================================================================= */

/* Message content wrapper */
.oracle-msg__content {
  flex: 1;
  word-wrap: break-word;
}

/* P3: Timestamp display */
.oracle-msg__time {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
  margin-left: 8px;
  flex-shrink: 0;
  align-self: flex-end;
}

/* P2: Thumbs feedback buttons */
.oracle-msg__feedback {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.oracle-msg:hover .oracle-msg__feedback {
  opacity: 1;
}

.oracle-feedback-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.oracle-feedback-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.oracle-feedback-btn.selected {
  background: rgba(0, 200, 255, 0.2);
  border-color: var(--accent-cyan, #00d4ff);
}

.oracle-feedback-btn[data-feedback='up'].selected {
  background: rgba(0, 200, 100, 0.2);
  border-color: var(--accent-green, #00c864);
  animation: feedbackPulse 0.3s ease-out;
}

.oracle-feedback-btn[data-feedback='down'].selected {
  background: rgba(255, 100, 100, 0.2);
  border-color: #ff6464;
  animation: feedbackPulse 0.3s ease-out;
}

/* Feedback confirmation animation */
@keyframes feedbackPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

/* Show checkmark on selected feedback */
.oracle-feedback-btn.selected::after {
  content: ' ✓';
  font-size: 10px;
  margin-left: 2px;
}

/* Adjust message layout for timestamp/feedback */
.oracle-msg {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.oracle-msg--oracle,
.oracle-msg--user {
  flex-direction: column;
}

.oracle-msg--oracle .oracle-msg__time,
.oracle-msg--user .oracle-msg__time {
  align-self: flex-end;
  margin-left: 0;
  margin-top: 4px;
}

/* =========================================================================
   ORACLE PERSONALITY: Rich Text Formatting
   =========================================================================

   Oracle messages have personality - they're not cold instruction manuals.
   *Emotes* feel like text message actions: *nods*, *checks notes*
   **Bold** draws attention to key concepts
   Bullets are clean, not cluttered
*/

/* Oracle emotes - italicized action text like *checks notes* */
.oracle-emote {
  font-style: italic;
  color: var(--cyan, rgb(0, 200, 255));
  opacity: 0.85;
}

/* Bold emphasis for key terms */
.oracle-msg__content strong {
  color: var(--text-primary, #fff);
  font-weight: 600;
}

/* Inline code styling */
.oracle-code {
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  background: rgba(0, 200, 255, 0.1);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 0.9em;
  color: var(--cyan, rgb(0, 200, 255));
}

/* Bullet points - cleaner than raw dashes */
.oracle-bullet {
  display: block;
  padding-left: 8px;
  margin: 4px 0;
  color: var(--text-secondary, rgba(255, 255, 255, 0.85));
}

/* Numbered list items */
.oracle-numbered {
  display: block;
  padding-left: 4px;
  margin: 4px 0;
}

.oracle-num {
  color: var(--cyan, rgb(0, 200, 255));
  font-weight: 600;
  margin-right: 4px;
}

/* Message content paragraphs - breathable spacing */
.oracle-msg__content p {
  margin: 0 0 8px 0;
  line-height: 1.5;
}

.oracle-msg__content p:last-child {
  margin-bottom: 0;
}

/* Oracle messages have warmer, more conversational styling */
.oracle-msg--oracle .oracle-msg__content {
  color: var(--text-primary, rgba(255, 255, 255, 0.95));
  font-size: 20px;
  line-height: 1.55;
}

/* User messages - same size as Oracle for consistency */
.oracle-msg--user .oracle-msg__content {
  font-size: 20px;
  line-height: 1.55;
}

/* =========================================================================
   THINKING UI - Collapsible panel showing agent reasoning steps
   =========================================================================
   Shows what the agent is "thinking" - tool calls, reasoning, etc.
   Similar to ChatGPT's thinking display for transparency.
*/

.oracle-thinking-panel {
  margin: 8px 0;
  padding: 0;
  border-radius: 8px;
  background: var(--dark-bg-3, rgba(30, 30, 46, 0.8));
  border: 1px solid var(--cyan-20, rgba(0, 200, 255, 0.2));
  font-size: 12px;
  max-width: 90%;
}

.oracle-thinking-summary {
  cursor: pointer;
  padding: 8px 12px;
  color: var(--text-secondary, rgba(255, 255, 255, 0.7));
  font-weight: 500;
  -webkit-user-select: none; /* Safari/iOS support */
  user-select: none;
  list-style: none; /* Remove default marker */
  display: flex;
  align-items: center;
  gap: 6px;
}

.oracle-thinking-summary::-webkit-details-marker {
  display: none;
}

.oracle-thinking-summary::before {
  content: '▶';
  font-size: 10px;
  transition: transform 0.15s ease;
  color: var(--cyan-50, rgba(0, 200, 255, 0.5));
}

.oracle-thinking-panel[open] .oracle-thinking-summary::before {
  transform: rotate(90deg);
}

.oracle-thinking-summary:hover {
  color: var(--text-primary, rgba(255, 255, 255, 0.95));
}

.oracle-thinking-count {
  font-size: 11px;
  color: var(--text-muted, rgba(255, 255, 255, 0.5));
  font-weight: 400;
}

.oracle-thinking-steps {
  padding: 6px 12px 10px 12px;
  border-top: 1px solid var(--cyan-10, rgba(0, 200, 255, 0.1));
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.oracle-thinking-step {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--dark-bg-2, rgba(37, 37, 53, 0.6));
}

.oracle-thinking-step--tool_call {
  border-left: 2px solid var(--cyan-50, rgba(0, 200, 255, 0.5));
}

.oracle-thinking-step--reasoning {
  border-left: 2px solid var(--oracle-accent, rgba(136, 68, 170, 0.5));
}

.oracle-thinking-icon {
  flex-shrink: 0;
  font-size: 12px;
  line-height: 1.4;
}

.oracle-thinking-text {
  color: var(--text-secondary, rgba(255, 255, 255, 0.8));
  line-height: 1.4;
  word-break: break-word;
}

/* =========================================================================
   ORACLE TAB - DOPE Modal Integration
   =========================================================================
   Styles for the Oracle tab in the DOPE modal - bullet performance analysis
*/

.oracle-tab-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px;
}

.oracle-section {
  background: var(--dark-bg-2, rgba(25, 35, 45, 0.9));
  border: 1px solid var(--cyan-20, rgba(0, 200, 255, 0.2));
  border-radius: 10px;
  padding: 14px;
}

.oracle-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #fff);
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.oracle-warning-badge {
  font-size: 10px;
  background: rgba(255, 180, 0, 0.2);
  color: #ffb400;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
}

.oracle-empty {
  color: var(--text-muted, rgba(255, 255, 255, 0.5));
  font-style: italic;
  font-size: 12px;
}

/* MVP Questions Grid */
.oracle-mvp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.oracle-mvp-item {
  background: var(--dark-bg-3, rgba(15, 25, 35, 0.8));
  border: 1px solid var(--cyan-15, rgba(0, 200, 255, 0.15));
  border-radius: 8px;
  padding: 10px;
  text-align: center;
}

.oracle-mvp-label {
  display: block;
  font-size: 10px;
  color: var(--text-muted, rgba(255, 255, 255, 0.5));
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}

.oracle-mvp-value {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--cyan, rgb(0, 200, 255));
}

/* Facts Cards */
.oracle-facts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.oracle-fact-card {
  background: var(--dark-bg-3, rgba(15, 25, 35, 0.8));
  border: 1px solid var(--cyan-15, rgba(0, 200, 255, 0.15));
  border-radius: 8px;
  padding: 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.oracle-fact-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.oracle-fact-content {
  flex: 1;
}

.oracle-fact-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary, #fff);
  line-height: 1.1;
}

.oracle-fact-label {
  font-size: 11px;
  color: var(--text-muted, rgba(255, 255, 255, 0.5));
  margin-top: 2px;
}

.oracle-fact-detail {
  font-size: 10px;
  color: var(--cyan-60, rgba(0, 200, 255, 0.6));
  margin-top: 2px;
}

/* Unverified Warning Box */
.oracle-unverified-box {
  margin-top: 12px;
  background: rgba(255, 180, 0, 0.08);
  border: 1px solid rgba(255, 180, 0, 0.3);
  border-radius: 8px;
  padding: 10px;
}

.oracle-unverified-header {
  font-size: 11px;
  font-weight: 600;
  color: #ffb400;
  margin-bottom: 6px;
}

.oracle-unverified-item {
  font-size: 11px;
  color: var(--text-secondary, rgba(255, 255, 255, 0.8));
  margin: 4px 0;
}

.oracle-unverified-source {
  color: var(--text-muted, rgba(255, 255, 255, 0.5));
}

.oracle-unverified-tool {
  color: var(--cyan, rgb(0, 200, 255));
  font-weight: 500;
}

/* What-If Cards */
.oracle-whatif-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.oracle-whatif-card {
  background: var(--dark-bg-3, rgba(15, 25, 35, 0.8));
  border: 1px solid var(--cyan-15, rgba(0, 200, 255, 0.15));
  border-radius: 8px;
  padding: 12px;
  text-align: center;
}

.oracle-whatif-title {
  font-size: 11px;
  color: var(--text-muted, rgba(255, 255, 255, 0.5));
  margin-bottom: 8px;
}

.oracle-whatif-result {
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.oracle-whatif-old {
  color: var(--text-muted, rgba(255, 255, 255, 0.5));
  text-decoration: line-through;
}

.oracle-whatif-arrow {
  color: var(--text-muted, rgba(255, 255, 255, 0.3));
}

.oracle-whatif-new {
  color: var(--text-primary, #fff);
}

.oracle-whatif-new.oracle-improved {
  color: #4ade80;
}

.oracle-whatif-detail {
  font-size: 10px;
  color: var(--text-muted, rgba(255, 255, 255, 0.5));
  margin-top: 4px;
}

/* Agent Prompt Section */
.oracle-agent-prompt {
  background: var(--dark-bg-3, rgba(15, 25, 35, 0.6));
  border-style: dashed;
}

.oracle-agent-hint {
  font-size: 12px;
  color: var(--text-secondary, rgba(255, 255, 255, 0.7));
  line-height: 1.6;
  margin: 0;
}