/* styles/sections/chat-answer.css
 * A Brief chat answer as the app draws it (Revisiting Decisions U0pqN, its M and W instances):
 * header with the Brief AI avatar (.brief-avatar), then the answer: the faded line scrolled up out
 * of view, headings, bullets with a bold lead, the orange summary highlight and the Sources footer.
 * Long passages are cropped to the frame's lines (.shot-crop). On M the header stacks the avatar
 * over the name, as CRqcW draws it. */
@layer sections {
  .chat-answer p { margin: 0; }

  .chat-answer__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-12);
    padding: var(--space-16);
    box-shadow: inset 0 -1px var(--shot-divider);
  }

  .chat-answer__who {
    display: grid;
    gap: 1px;
  }

  .chat-answer__name {
    font-size: 15px;
    font-weight: 600;
    line-height: round(1.2em, 1px);
    color: var(--shot-text);
  }

  .chat-answer__sub {
    font-size: 12px;
    line-height: round(1.2em, 1px);
    color: var(--shot-text-2);
  }

  .chat-answer__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-14);
    padding: var(--space-24) var(--space-20) 36px;
    font-size: 15px;
    line-height: 24px;
    color: var(--shot-text);
  }

  /* The line scrolled up out of view: the frame draws it at 35% (a 65% white veil here) */
  .chat-answer__context { position: relative; }

  .chat-answer__context::after {
    content: "";
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--white) 65%, transparent);
  }

  .chat-answer__h {
    font-size: 20px;
    font-weight: 700;
    line-height: round(1.2em, 1px);
    letter-spacing: -0.46px;
    color: var(--app-ink);
  }

  /* The frame puts a 10px spacer before these headings */
  .chat-answer .chat-answer__h--spaced { margin-top: var(--space-24); }

  .chat-answer__bullets {
    display: grid;
    gap: var(--space-12);
    margin: 0;
    padding: 2px 0;
    list-style: none;
  }

  .chat-answer__bullets > li {
    display: flex;
    gap: var(--space-12);
  }

  /* The frame's bullet glyph, drawn by CSS so the list reads (and converts to Markdown) once */
  .chat-answer__bullets > li::before {
    content: "•" / "";
  }

  .chat-answer__bullets > li > div,
  .chat-answer__approved {
    display: grid;
    flex: 1 1 0;
    gap: 2px;
    min-width: 0;
  }

  .chat-answer__lead {
    font-weight: 600;
    color: var(--app-ink);
  }

  .chat-answer__lead--marked {
    display: flex;
    align-items: baseline;
    gap: var(--space-12);
  }

  .chat-answer .chat-answer__highlight {
    display: flex;
    align-items: baseline;
    gap: var(--space-12);
    margin-left: -1.5px;
    padding: var(--space-12) var(--space-16);
    border-left: 3px solid var(--orange);
    border-radius: var(--radius-sm);
    background: var(--orange-7);
  }

  .chat-answer__sources {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    padding-top: var(--space-10);
    font-size: 14px;
    line-height: round(1.2em, 1px);
    color: var(--app-ink-2);
  }

  .chat-answer__chip {
    padding: 3px var(--space-10);
    border-radius: 10px;
    background: var(--shot-chip);
    font-size: 12px;
    font-weight: 500;
    line-height: round(1.2em, 1px);
  }

  @media (min-width: 900px) {
    .chat-answer__head {
      flex-direction: row;
      align-items: center;
      padding-inline: 28px;
    }

    .chat-answer__body { padding-inline: var(--space-40); }

    .chat-answer__h {
      font-size: 26px;
      letter-spacing: -0.6px;
    }
  }

  @media (forced-colors: active) {
    .chat-answer__context::after { display: none; }
  }
}