/* AI Insights Panel Styles */
/* assets/ui/ai-insights.css */

/* ============================================
   CSS Custom Properties for AI Insights Panel
   ============================================ */
:root {
  --ai-panel-width: 340px;
  --ai-panel-collapsed-width: 48px;
  --ai-panel-bg: rgb(var(--color-background));
  --ai-panel-border: rgb(var(--color-surface-2));
  --ai-panel-transition: 300ms ease;
  --mobile-header-height: 64px;
}

/* ============================================
   Body Layout Adjustments
   ============================================ */
/* Panel is fixed positioned, so no padding needed - it floats like notifications */

/* Hide toggle button when panel is open (reduces clutter) */
body.ai-insights-open .ai-insights-toggle {
  display: none;
}

/* Position notification panel to left of AI insights panel when open */
body.ai-insights-open #notification-list {
  right: calc(var(--ai-panel-width) + 16px);
}

/* Add spacing between header items and the panel edge */
body.ai-insights-open #notification-center-container {
  margin-right: 12px;
}

/* ============================================
   AI Insights Panel Container
   ============================================ */
#ai-insights-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  height: 100dvh; /* Safari fix */
  width: var(--ai-panel-width);
  background: var(--ai-panel-bg);
  border-left: 1px solid var(--ai-panel-border);
  display: flex;
  flex-direction: column;
  z-index: 40;
  transition: transform var(--ai-panel-transition);
  overflow: hidden;
}

/* Hidden state - slides off screen to the right */
#ai-insights-panel.translate-x-full {
  transform: translateX(100%);
}

/* Visible state */
#ai-insights-panel.translate-x-0 {
  transform: translateX(0);
}

/* ============================================
   Panel Header
   ============================================ */
.ai-insights-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ai-panel-border);
  flex-shrink: 0;
}

.ai-insights-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-insights-title {
  font-weight: 600;
  font-size: 14px;
  color: white;
  margin: 0;
}

.ai-insights-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 500;
  border-radius: 9999px;
  background: rgb(var(--color-primary) / 0.2);
  color: rgb(var(--color-primary));
}

.ai-insights-badge--live {
  background: rgb(16 185 129 / 0.2);
  color: rgb(52 211 153);
}

.ai-insights-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ai-insights-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: rgb(var(--color-text-secondary));
  cursor: pointer;
  border-radius: 6px;
  transition: color 150ms, background 150ms;
}

.ai-insights-btn:hover {
  color: white;
  background: rgb(var(--color-surface-1));
}

.ai-insights-btn svg {
  width: 16px;
  height: 16px;
}

.ai-insights-btn--refresh.loading {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ============================================
   Panel Content Area
   ============================================ */
.ai-insights-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ============================================
   Status/Loading Area
   ============================================ */
.ai-insights-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  margin-bottom: 12px;
  background: rgb(var(--color-surface-1));
  border-radius: 8px;
  font-size: 12px;
  color: rgb(var(--color-text-secondary));
}

.ai-insights-status.hidden {
  display: none;
}

.ai-insights-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgb(var(--color-surface-2));
  border-top-color: rgb(var(--color-primary));
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ============================================
   Health Score Section
   ============================================ */
.ai-health-score {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--ai-panel-border);
}

.ai-health-score svg circle {
  transition: stroke-dashoffset 0.5s ease;
}

/* ============================================
   Insights List
   ============================================ */
.ai-insights-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.ai-insights-empty {
  padding: 24px 16px;
  text-align: center;
}

/* ============================================
   Insight Card Styles
   ============================================ */
.ai-insight-card {
  transition: background 150ms, border-color 150ms;
}

.ai-insight-card:hover {
  background: rgb(var(--color-surface-1) / 0.5);
}

.ai-insight-action-btn {
  font-size: 11px;
  padding: 4px 8px;
  border: none;
  cursor: pointer;
}

.ai-insight-action-btn:focus {
  outline: 2px solid rgb(var(--color-primary) / 0.5);
  outline-offset: 2px;
}

/* ============================================
   Toggle Button (in header)
   ============================================ */
.ai-insights-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: 8px; /* Spacing from notification bell */
  margin-top: -8px; /* Align vertically with bell icon */
  border: none;
  background: transparent;
  color: rgb(var(--color-text-secondary));
  cursor: pointer;
  border-radius: 6px;
  transition: color 150ms, background 150ms;
}

.ai-insights-toggle:hover {
  color: white;
  background: rgb(var(--color-surface-1));
}

/* Active state - panel is open */
.ai-insights-toggle.ai-insights-active {
  color: rgb(var(--color-primary));
  background: rgb(var(--color-primary) / 0.15);
}

/* New insights available - yellow filled bulb */
.ai-insights-toggle.has-new-insights svg {
  fill: rgb(250 204 21); /* yellow-400 */
  stroke: rgb(234 179 8); /* yellow-500 */
}

/* No new insights - grey outline only */
.ai-insights-toggle:not(.has-new-insights) svg {
  fill: none;
  stroke: rgb(var(--color-text-secondary));
}

.ai-insights-toggle svg {
  width: 24px;
  height: 24px;
}

/* Badge indicator on toggle button */
.ai-insights-toggle-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 8px;
  height: 8px;
  background: rgb(239 68 68); /* red-500 */
  border-radius: 50%;
  display: none;
}

.ai-insights-toggle-badge.has-alerts {
  display: block;
}

/* ============================================
   Scrollbar Styling
   ============================================ */
.ai-insights-content::-webkit-scrollbar {
  width: 6px;
}

.ai-insights-content::-webkit-scrollbar-track {
  background: transparent;
}

.ai-insights-content::-webkit-scrollbar-thumb {
  background: var(--ai-panel-border);
  border-radius: 3px;
}

.ai-insights-content::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--color-text-secondary) / 0.5);
}

/* ============================================
   Mobile Styles
   ============================================ */
@media (max-width: 768px) {
  :root {
    --ai-panel-width: 100%;
  }

  body.ai-insights-open .dash-container,
  body.has-sidebar.ai-insights-open .dash-container {
    padding-right: 0;
  }

  #ai-insights-panel {
    /* Full width on mobile, positioned below header */
    width: 100%;
    max-width: 100vw;
    border-left: none;
    border-top: 1px solid var(--ai-panel-border);
    /* Position below header (matches notification-list top position) */
    top: var(--mobile-header-height);
    bottom: auto;
    height: calc(100vh - var(--mobile-header-height));
    height: calc(100dvh - var(--mobile-header-height));
    border-radius: 0;
  }

  #ai-insights-panel.translate-x-full {
    transform: translateX(100%);
  }

  #ai-insights-panel.translate-x-0 {
    transform: translateX(0);
  }

  .ai-insights-header {
    position: relative;
  }
}

/* ============================================
   Tablet Styles
   ============================================ */
@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    --ai-panel-width: 300px;
  }
}

/* ============================================
   Large Screens
   ============================================ */
@media (min-width: 1440px) {
  :root {
    --ai-panel-width: 380px;
  }
}

/* ============================================
   Panel Overlay (mobile)
   ============================================ */
.ai-insights-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 35;
  opacity: 0;
  transition: opacity var(--ai-panel-transition);
}

.ai-insights-overlay--visible {
  display: block;
  opacity: 1;
}

@media (min-width: 769px) {
  .ai-insights-overlay {
    display: none !important;
  }
}

/* ============================================
   Theme Support
   ============================================ */
[data-theme='sky'] #ai-insights-panel {
  background: rgb(var(--color-background));
  border-color: rgb(var(--color-surface-2));
}

[data-theme='sky'] .ai-insights-header {
  border-color: rgb(var(--color-surface-2));
}

[data-theme='sky'] .ai-insights-title {
  color: rgb(var(--color-text-primary));
}

[data-theme='sky'] .ai-insights-btn:hover {
  background: rgb(var(--color-surface-1));
  color: rgb(var(--color-text-primary));
}

/* ============================================
   Reduced Motion Support
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ai-panel-transition: 0ms;
  }

  .ai-insights-btn--refresh.loading,
  .ai-insights-spinner {
    animation: none;
  }
}

/* ============================================
   Print Styles - Hide panel
   ============================================ */
@media print {
  #ai-insights-panel,
  .ai-insights-toggle,
  .ai-insights-toggle-mobile {
    display: none !important;
  }

  body.ai-insights-open .dash-container {
    padding-right: 0 !important;
  }
}

/* ============================================
   Mobile Toggle Button Styles
   ============================================ */
.ai-insights-toggle-mobile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Match bell button sizing - no explicit width/height, let padding determine size */
  margin-left: 8px; /* Spacing from notification bell in mobile layout */
  align-self: center; /* Match vertical alignment with bell icon */
  transform: translateY(-5px); /* Fine-tune vertical alignment to match bell icon */
  border: none;
  background: transparent;
  color: rgb(var(--color-text-secondary));
  cursor: pointer;
  border-radius: 6px;
  transition: color 150ms, background 150ms;
  -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
}

.ai-insights-toggle-mobile:active {
  background: rgb(var(--color-surface-1));
}

/* Active state - panel is open */
.ai-insights-toggle-mobile.ai-insights-active {
  color: rgb(var(--color-primary));
  background: rgb(var(--color-primary) / 0.15);
}

/* New insights available - yellow filled bulb */
.ai-insights-toggle-mobile.has-new-insights svg {
  fill: rgb(250 204 21); /* yellow-400 */
  stroke: rgb(234 179 8); /* yellow-500 */
}

/* No new insights - grey outline only */
.ai-insights-toggle-mobile:not(.has-new-insights) svg {
  fill: none;
  stroke: rgb(var(--color-text-secondary));
}

.ai-insights-toggle-mobile svg {
  width: 24px;
  height: 24px;
}

/* Badge indicator on mobile toggle button */
.ai-insights-toggle-badge-mobile {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 8px;
  height: 8px;
  background: rgb(239 68 68); /* red-500 */
  border-radius: 50%;
  display: none;
}

.ai-insights-toggle-badge-mobile.has-alerts {
  display: block;
}