/**

 * @file

 * AI Overview Card & Citation Tooltips

 * SMIP EC Knowledge Hub module.

 */


/* ==========================================================================
   AI Overview Card (Matching Screenshot 2 & User Specs)
   ========================================================================== */
.ecl-ai-overview {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  min-height: 204px !important;
  padding: 24px 24px 28px 24px !important;
  background: var(--Surface-surface-lowest, #FFF3E980) !important;
  border-left: none !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: 1px solid var(--ec-color-filter-border, #EDEDF0) !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  position: relative !important;
  overflow: hidden !important; /* contain content when the map narrows the column */
}

.ecl-ai-overview__header-row {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.ecl-ai-overview__title-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.ecl-ai-overview__sparkle-icon {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
  color: var(--On-surface-on-surface-ai-overview, var(--ec-color-ai-overview-title, #471B00)) !important;
}

.ecl-ai-overview__sparkle-icon path {
  stroke: currentColor !important;
}

.ecl-ai-overview__title {
  margin: 0 !important;
  font-family: var(--Font-family-inter), 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  letter-spacing: 0 !important;
  color: var(--On-surface-on-surface-ai-overview, var(--ec-color-ai-overview-title, #471B00)) !important;
}

.ecl-ai-overview__body,
.ecl-ai-overview__text-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  padding: 0 !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

.ecl-ai-overview__text-wrapper {
  gap: 0 !important;
}

.ecl-ai-overview__text {
  margin: 0 !important;
  max-width: 100% !important;
  min-width: 0 !important;
  font-family: var(--Font-family-inter), 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  letter-spacing: 0 !important;
  color: var(--On-surface-on-surface-brand, #00002E) !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
}

.ecl-ai-overview__base-text,
.ecl-ai-overview__remainder,
.ecl-ai-overview__ellipsis {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* Inline Citation Numbering Badge (e.g. 1) */
.ecl-ai-citation {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 20px !important;
  width: auto !important;
  height: 19px !important;
  box-sizing: border-box !important;
  padding: 0 4px !important;
  background: var(--Surface-surface-low-1, #FFDBBA) !important;
  border: none !important;
  border-radius: 2px !important;
  font-family: var(--Font-family-inter), 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 19px !important;
  letter-spacing: 0 !important;
  color: var(--On-surface-on-surface-brand, #00002E) !important;
  cursor: pointer !important;
  vertical-align: baseline !important;
  margin: 0 2px !important;
  user-select: none !important;
  transition: background-color 0.15s ease, transform 0.15s ease !important;
}

.ecl-ai-citation:hover,
.ecl-ai-citation:focus-visible {
  background: var(--Border-border, #FF8A20) !important;
  transform: translateY(-1px) !important;
  outline: none !important;
}

/* Source row temporarily hidden (template commented; keep CSS hide as backup). */
.ecl-ai-overview__sources-row,
#ecl-ai-overview-sources {
  display: none !important;
}

/* Read more — inline at end of 4th preview line (never a lone 5th row). */
.ecl-ai-overview__read-more-link {
  display: inline !important;
  font-family: var(--Font-family-inter), 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: inherit !important;
  letter-spacing: 0 !important;
  color: var(--ec-color-primary, #004494) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  margin-left: 6px !important;
  white-space: nowrap !important;
  vertical-align: baseline !important;
}

.ecl-ai-overview__ellipsis {
  display: inline !important;
  white-space: nowrap !important;
}

.ecl-ai-overview__read-more-link:hover {
  text-decoration: underline !important;
}

.ecl-ai-overview__read-more-link[hidden] {
  display: none !important;
}

/* Collapsed: preview + "..." + Read more (respect [hidden] when no remainder) */
.ecl-ai-overview:not(.is-expanded) #ecl-ai-overview-read-more:not([hidden]) {
  display: inline !important;
}

.ecl-ai-overview:not(.is-expanded) #ecl-ai-overview-read-more[hidden] {
  display: none !important;
}

.ecl-ai-overview:not(.is-expanded) #ecl-ai-overview-typing-target,
.ecl-ai-overview:not(.is-expanded) #ecl-ai-overview-expanded-text,
.ecl-ai-overview:not(.is-expanded) #ecl-ai-overview-read-less {
  display: none !important;
}

.ecl-ai-overview:not(.is-expanded) #ecl-ai-overview-ellipsis:not([hidden]) {
  display: inline !important;
}

/* Expanded: remove ellipsis, continue remainder inline, show Read less */
.ecl-ai-overview.is-expanded #ecl-ai-overview-read-more,
.ecl-ai-overview.is-expanded #ecl-ai-overview-ellipsis,
.ecl-ai-overview.is-expanded #ecl-ai-overview-expanded-text {
  display: none !important;
}

.ecl-ai-overview.is-expanded #ecl-ai-overview-typing-target {
  display: inline !important;
}

.ecl-ai-overview.is-expanded #ecl-ai-overview-read-less {
  display: inline !important;
}

.ecl-ai-overview__ellipsis,
.ecl-ai-overview__remainder,
.ecl-ai-overview__typing-target {
  display: inline !important;
}

.ecl-ai-overview__ellipsis[hidden],
.ecl-ai-overview__remainder[hidden],
.ecl-ai-overview__typing-target[hidden] {
  display: none !important;
}

/* Hide ellipsis + toggles while the preview typewriter runs */
.ecl-ai-overview.is-typing #ecl-ai-overview-ellipsis,
.ecl-ai-overview.is-typing #ecl-ai-overview-read-more,
.ecl-ai-overview.is-typing #ecl-ai-overview-read-less,
.ecl-ai-overview.is-typing #ecl-ai-overview-typing-target {
  display: none !important;
}

/* AI Typing Blinking Cursor */
.ecl-ai-typing-cursor {
  display: inline-block !important;
  margin-left: 2px !important;
  color: var(--ec-color-primary, #004494) !important;
  font-weight: 700 !important;
  animation: ecl-typing-blink 0.7s infinite !important;
}

@keyframes ecl-typing-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Source Row — fixed label + wrapping tags with +N expand toggle */
.ecl-ai-overview__sources-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  margin-top: 6px !important;
  width: 100% !important;
  position: relative !important;
  overflow: visible !important;
}

.ecl-ai-overview__sources-label {
  font-family: var(--Font-family-inter), 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  height: 32px !important;
  letter-spacing: 0 !important;
  color: var(--On-surface-on-surface-brand, #00002E) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

.ecl-ai-overview__sources-wrap,
.ecl-ai-overview__sources-scroll-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: flex-start !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: visible !important;
}

.ecl-ai-overview__sources-list {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  white-space: nowrap !important;
  width: 100% !important;
  overflow: hidden !important;
  padding: 0 !important;
}

/* Expanded: allow tags to wrap onto following rows */
.ecl-ai-overview__sources-list.is-expanded {
  flex-wrap: wrap !important;
  white-space: normal !important;
  overflow: visible !important;
}

.ecl-ai-overview__sources-list::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Floating scroll chevron buttons removed */
.ecl-ai-overview__scroll-btn {
  display: none !important;
}

.ecl-ai-source-tag {
  /* Same size/height as keyword badges; keep AI overview peach pill design. */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 28px !important;
  border-radius: var(--Radius-pill, 12px) !important;
  padding: 4px 12px !important;
  background: var(--Surface-surface-low-1, #FFDBBA) !important;
  color: var(--On-surface-on-surface-brand, #00002E) !important;
  font-family: var(--Font-family-inter), 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  transition: background-color 0.15s ease, transform 0.15s ease !important;
  box-sizing: border-box !important;
}

.ecl-ai-source-tag:hover {
  background: var(--Border-border, #FF8A20) !important;
  color: var(--On-surface-on-surface-brand, #00002E) !important;
  transform: translateY(-1px) !important;
}

.ecl-ai-source-tag[hidden] {
  display: none !important;
}

/* "+N more" / Less — same plain primary text as card keyword +N more (not a pill). */
.ecl-ai-overview__sources-list .ecl-ai-source-tag--count,
button.ecl-ai-source-tag.ecl-ai-source-tag--count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  outline: none !important;
  background: transparent !important;
  color: var(--ec-color-primary, #004494) !important;
  font-family: var(--Font-family-inter), 'Inter', sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 21px !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
  text-overflow: clip !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  user-select: none !important;
  box-sizing: border-box !important;
  transform: none !important;
  transition: opacity 0.15s ease !important;
}

/* After display:inline-flex — hide when no overflow (never show +0). */
.ecl-ai-source-tag--count[hidden],
.ecl-ai-source-tag--count[aria-hidden="true"],
.ecl-ai-source-tag--count[data-count="0"]:not([aria-expanded="true"]) {
  display: none !important;
}

.ecl-ai-overview__sources-list .ecl-ai-source-tag--count:hover,
button.ecl-ai-source-tag.ecl-ai-source-tag--count:hover,
.ecl-ai-overview__sources-list .ecl-ai-source-tag--count:focus-visible,
button.ecl-ai-source-tag.ecl-ai-source-tag--count:focus-visible {
  background: transparent !important;
  color: var(--ec-color-primary, #004494) !important;
  text-decoration: none !important;
  opacity: 0.85 !important;
  transform: none !important;
}

.ecl-ai-sources-toggle__text {
  color: inherit !important;
  font: inherit !important;
}


/* ==========================================================================
   AI Citation Tooltip Popup
   Fixed to the viewport and JS-mounted on <body> so tips paint above the
   sticky filter rail (z-index:40) and are not clipped by
   .ecl-ai-overview / .ecl-results-content-stack overflow:hidden.
   Stays below the detail drawer / filter modal overlays.
   ========================================================================== */
.ecl-ai-tooltip {
  position: fixed !important;
  z-index: 5000 !important;
  width: 480px !important;
  max-width: calc(100vw - 24px) !important;
  height: auto !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  padding: 32px !important;
  gap: 8px !important;
  background: var(--Surface-surface-inverted, #FFFFFF) !important;
  border: 0 !important;
  border-radius: var(--Radius-s, 4px) !important;
  box-shadow:
    0 12px 32px 0 var(--ECEffectElevation03, rgba(0, 0, 46, 0.16)),
    0 0 0.5px 0.5px var(--ECEffectElevation05, rgba(0, 0, 46, 0.18)) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  text-align: left !important;
  opacity: 1 !important;
  transition: opacity 0.18s ease, transform 0.18s ease !important;
  pointer-events: auto !important;
}

.ecl-ai-tooltip[hidden] {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Tooltip opens on click — no hover bridge needed. */
.ecl-ai-tooltip::before {
  display: none !important;
  content: none !important;
}

.ecl-ai-tooltip__arrow {
  position: absolute !important;
  left: 50% !important;
  width: 14px !important;
  height: 14px !important;
  background: var(--Surface-surface-inverted, #FFFFFF) !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

/* Opens below the trigger (citations mid-card, sources with room below). */
.ecl-ai-tooltip--below .ecl-ai-tooltip__arrow,
.ecl-ai-tooltip:not(.ecl-ai-tooltip--above) .ecl-ai-tooltip__arrow {
  top: -7px !important;
  bottom: auto !important;
  transform: translateX(-50%) rotate(45deg) !important;
  border-top: 1px solid var(--ECEffectElevation01, rgba(0, 0, 46, 0.12)) !important;
  border-left: 1px solid var(--ECEffectElevation01, rgba(0, 0, 46, 0.12)) !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  box-shadow: -2px -2px 4px var(--ECEffectElevation01, rgba(0, 0, 46, 0.12)) !important;
}

/* Opens above the trigger (source badges near the bottom of the card). */
.ecl-ai-tooltip--above .ecl-ai-tooltip__arrow {
  top: auto !important;
  bottom: -7px !important;
  transform: translateX(-50%) rotate(45deg) !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 1px solid var(--ECEffectElevation01, rgba(0, 0, 46, 0.12)) !important;
  border-bottom: 1px solid var(--ECEffectElevation01, rgba(0, 0, 46, 0.12)) !important;
  box-shadow: 2px 2px 4px var(--ECEffectElevation01, rgba(0, 0, 46, 0.12)) !important;
}

.ecl-ai-tooltip__inner {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  text-align: left !important;
}

.ecl-ai-tooltip__title {
  margin: 0 !important;
  max-width: 100% !important;
  font-family: var(--Font-family-inter), 'Inter', sans-serif !important;
  font-size: 18px !important;
  line-height: 24px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  color: var(--ec-color-primary, #004494) !important;
  text-align: left !important;
  text-decoration: none !important;
  cursor: pointer !important;
  display: block !important;
  transition: color 0.15s ease, text-decoration 0.15s ease !important;
}

.ecl-ai-tooltip__title:hover,
.ecl-ai-tooltip__title:focus-visible {
  color: var(--ec-color-primary, #004494) !important;
  text-decoration: underline !important;
  outline: none !important;
}

.ecl-ai-tooltip__visit-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 123px !important;
  height: 32px !important;
  padding: 8px var(--Spacing-s, 10px) !important;
  border: 0 !important;
  border-radius: var(--Radius-s, 4px) !important;
  background: var(--ec-color-search-button, #FFBE5C) !important;
  color: var(--ec-color-text, #00002E) !important;
  font-family: var(--Font-family-inter), 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 16px !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease, opacity 0.15s ease !important;
}

.ecl-ai-tooltip__visit-btn:hover,
.ecl-ai-tooltip__visit-btn:focus-visible {
  text-decoration: none !important;
  color: var(--ec-color-text, #00002E) !important;
  background: var(--Surface-surface-secondary, #FFBE5C) !important;
  opacity: 0.92 !important;
  outline: none !important;
}

.ecl-ai-tooltip__visit-icon {
  width: 12px !important;
  height: 12px !important;
  flex-shrink: 0 !important;
  stroke: var(--ec-color-text, #00002E) !important;
  color: var(--ec-color-text, #00002E) !important;
}

/* Legacy class kept so older markup/JS does not break during cache refresh */
.ecl-ai-tooltip__link {
  font-family: var(--Font-family-inter), 'Inter', sans-serif !important;
  font-size: 18px !important;
  line-height: 24px !important;
  font-weight: 500 !important;
  color: var(--ec-color-primary, #004494) !important;
  text-decoration: none !important;
  text-align: left !important;
}

/* Card highlight pulse when navigated from AI citation */
.ecl-result-card--highlighted {
  border-color: var(--ec-color-primary, #004494) !important;
  box-shadow: 0 0 0 2px var(--ec-color-primary, #004494) !important;
  transition: all 0.3s ease !important;
}