@charset "UTF-8";
/*
 *  Copyright IBM Corp. 2026, 2026
 *
 *  This source code is licensed under the Apache-2.0 license found in the
 *  LICENSE file in the root directory of this source tree.
 */
/**
 * AI Explainability Popover content styles for Carbon AI Chat.
 * Following @carbon/styles component patterns where styles are wrapped in mixins.
 *
 * These styles provide consistent typography and spacing for AI explainability
 * popover content used in AI Chat.
 *
 * Usage (Sass — mixin, for composing into your own stylesheet):
 * @use "@carbon/ai-chat/scss/chat-explainability-popover";
 * @include chat-explainability-popover.explainability-popover-content;
 *
 * Usage (CSS — pre-compiled, no Sass pipeline needed):
 * @import "@carbon/ai-chat/css/chat-explainability-popover.css";
 *
 * Classes generated:
 * - .cds-aichat-explainability-popover--content                — container wrapper
 * - .cds-aichat-explainability-popover--content__header        — header section
 * - .cds-aichat-explainability-popover--content__eyebrow-row   — top header row with label and tag
 * - .cds-aichat-explainability-popover--content__label         — eyebrow label text
 * - .cds-aichat-explainability-popover--content__title         — main heading
 * - .cds-aichat-explainability-popover--content__description   — description text below title
 * - .cds-aichat-explainability-popover--content__section       — content section with spacing
 */
/* 
 *  Copyright IBM Corp. 2025
 *  
 *  This source code is licensed under the Apache-2.0 license found in the
 *  LICENSE file in the root directory of this source tree.
 */
/* 
 *  Copyright IBM Corp. 2025
 *  
 *  This source code is licensed under the Apache-2.0 license found in the
 *  LICENSE file in the root directory of this source tree.
 */
/* 
 *  Copyright IBM Corp. 2025
 *  
 *  This source code is licensed under the Apache-2.0 license found in the
 *  LICENSE file in the root directory of this source tree.
 */
/* ============================================================================
   EXPLAINABILITY POPOVER - CONTENT WRAPPER
   Container for all explainability popover content
   ============================================================================ */
.cds-aichat-explainability-popover--content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-block-start: 0.5rem;
}

/* ============================================================================
   EXPLAINABILITY POPOVER - HEADER
   Header containing eyebrow label, confidence score, title, and description
   ============================================================================ */
.cds-aichat-explainability-popover--content__header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* ============================================================================
   EXPLAINABILITY POPOVER - EYEBROW ROW
   Top row containing label and optional tag/badge
   ============================================================================ */
.cds-aichat-explainability-popover--content__eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ============================================================================
   EXPLAINABILITY POPOVER - LABEL
   Secondary text label (eyebrow text)
   ============================================================================ */
.cds-aichat-explainability-popover--content__label {
  font-size: var(--cds-label-02-font-size, 0.875rem);
  font-weight: var(--cds-label-02-font-weight, 400);
  line-height: var(--cds-label-02-line-height, 1.28572);
  letter-spacing: var(--cds-label-02-letter-spacing, 0.16px);
  color: var(--cds-text-secondary, #525252);
}

/* ============================================================================
   EXPLAINABILITY POPOVER - TITLE
   Main heading for the explainability content
   ============================================================================ */
.cds-aichat-explainability-popover--content__title {
  font-size: var(--cds-heading-04-font-size, 1.75rem);
  font-weight: var(--cds-heading-04-font-weight, 400);
  line-height: var(--cds-heading-04-line-height, 1.28572);
  letter-spacing: var(--cds-heading-04-letter-spacing, 0);
}

/* ============================================================================
   EXPLAINABILITY POPOVER - DESCRIPTION
   Text description below header title
   ============================================================================ */
.cds-aichat-explainability-popover--content__description {
  font-size: var(--cds-body-01-font-size, 0.875rem);
  font-weight: var(--cds-body-01-font-weight, 400);
  line-height: var(--cds-body-01-line-height, 1.42857);
  letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
  color: var(--cds-text-secondary, #525252);
}

/* ============================================================================
   EXPLAINABILITY POPOVER - CONTENT SECTION
   Reusable section container for markdown or other content blocks
   ============================================================================ */
.cds-aichat-explainability-popover--content__section {
  display: flex;
  flex-direction: column;
  border-block-start: 1px solid var(--cds-border-subtle-00, #e0e0e0);
  gap: 1.5rem;
  padding-block-start: 1.5rem;
}

.cds-aichat-explainability-popover--content__section:last-of-type {
  padding-block-end: 1.5rem;
}

.cds-aichat-explainability-popover--content__section h3,
.cds-aichat-explainability-popover--content__section h4,
.cds-aichat-explainability-popover--content__section h5,
.cds-aichat-explainability-popover--content__section h6 {
  font-size: var(--cds-body-01-font-size, 0.875rem);
  font-weight: var(--cds-body-01-font-weight, 400);
  line-height: var(--cds-body-01-line-height, 1.42857);
  letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
  color: var(--cds-text-secondary, #525252);
}

.cds-aichat-explainability-popover--content__section p {
  font-size: var(--cds-body-01-font-size, 0.875rem);
  font-weight: var(--cds-body-01-font-weight, 400);
  line-height: var(--cds-body-01-line-height, 1.42857);
  letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
}

.cds-aichat-explainability-popover--content__section .cds--list--ordered .cds--list__item::before {
  position: static;
  display: inline-block;
  margin-inline-end: 0.5rem;
}

/* ============================================================================
   EXPLAINABILITY POPOVER - ACTIONS
   Container for action buttons in the popover
   ============================================================================ */
.cds-aichat-explainability-popover--actions {
  display: flex;
}