/* styles/sections/evidence-chat.css
 * Brief's answer, transcribed as live HTML in an elevated window, beside the video frames it points
 * at. Frames: Evidence nZDuW (1440), IPEbH (390), CYsuw (1920); chat panel DnQiM, evidence frames X1tPM.
 *
 * <div class="evidence">
 *   <figure class="evidence-chat"><div class="artifact-window artifact-window--elevated evidence-chat__panel">
 *     header, log (user bubble, reply with .chat-reqs and sources, composer)</div><figcaption>...</figcaption></figure>
 *   <div class="evidence-frames"><figure class="evidence-frame">label row, shot</figure> x3</div>
 * </div>
 *
 * D and W: the chat column is 760 (62.1% of the row below 1280) and the frames take the rest after a
 * 56 gap (464 at 1440, 864 at 1920). M stacks them 32 apart. The chat's app colors are the --app-*
 * tokens; the requirement ids use --shot-text-2 (the frame's #919191 is 3.1:1 on white). */
@layer sections {
  .evidence {
    display: flex;
    flex-direction: column;
    gap: var(--space-32);
  }

  .evidence p { margin: 0; }

  .evidence-chat {
    display: flex;
    flex-direction: column;
    gap: var(--space-14);
    min-width: 0;
    margin: 0;
  }

  .evidence-chat__panel {
    font-family: var(--font-body);
    color: var(--app-ink);
  }

  .evidence-chat__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-12);
    /* Pencil strokes sit inside the box: the rule takes the last px of the 16 padding */
    padding: var(--space-16) var(--space-16) 15px;
    border-bottom: 1px solid var(--app-line);
  }

  .evidence-chat__name {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  .evidence-chat__name strong {
    font-size: 15px;
    font-weight: 600;
    line-height: 18px;
  }

  .evidence-chat__name span {
    font-size: 12px;
    line-height: 14px;
    color: var(--app-ink-2);
  }

  .evidence-chat__log {
    display: flex;
    flex-direction: column;
    gap: var(--space-20);
    padding: 28px var(--space-20) var(--space-32);
  }

  .evidence-chat__user {
    align-self: flex-end;
    width: min(100%, 460px);
    padding: var(--space-10) var(--space-16);
    border-radius: 14px 14px 4px;
    background: var(--app-fern-soft);
    font-size: 15px;
    line-height: 23px;
  }

  .evidence-chat__reply {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }

  .evidence-chat__lead {
    font-size: 16px;
    font-weight: 600;
    line-height: 23px;
  }

  /* Requirement rows: id, title and text, then the discs naming the frames that hold the evidence.
     M puts the id and the discs on one line over the body. */
  .chat-reqs {
    margin: 0;
    padding: 10px 0 0;
    list-style: none;
  }

  .chat-req {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "id refs" "body body";
    gap: var(--space-10) var(--space-16);
    padding-block: 13px var(--space-14);
    border-top: 1px solid var(--app-line);
  }

  /* M: centred in the 22px row the discs set, as IPEbH draws it */
  .chat-req__id {
    grid-area: id;
    align-self: center;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 14px;
    color: var(--shot-text-2);
  }

  .chat-req__body {
    grid-area: body;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .chat-req__title {
    font-size: 15px;
    font-weight: 600;
    line-height: 18px;
  }

  .chat-req__text {
    font-size: 14px;
    line-height: 22px;
    color: var(--app-ink-2);
  }

  .chat-req__refs {
    grid-area: refs;
    display: flex;
    justify-content: flex-end;
    gap: var(--space-6);
  }

  .evidence-marker {
    display: block;
    flex: none;
    width: 22px;
    height: 22px;
  }

  .evidence-chat__sources {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-8);
    padding-top: 13px;
    border-top: 1px solid var(--app-line);
  }

  .evidence-chat__sources > p {
    font-size: 12px;
    font-weight: 600;
    line-height: 14px;
    color: var(--app-ink-2);
  }

  .evidence-chat__sources ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-8);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .evidence-chat__sources li {
    padding: 2px 7px;
    border: 1px solid var(--app-line);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 14px;
    color: var(--fern-app);
  }

  /* Composer: drawn, not a control (aria-hidden in the markup) */
  .evidence-chat__composer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-16);
    padding: 0 var(--space-8) 0 18px;
    /* The edge sits inside the box, as Pencil draws strokes, so the composer is 69 tall on M */
    border-radius: var(--radius-lg);
    box-shadow: inset 0 0 0 1px var(--app-line-strong);
    font-size: 14px;
    line-height: 17px;
    color: var(--app-placeholder);
  }

  .evidence-chat__send {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--fern-app);
  }

  .evidence-chat__send img { display: block; }

  .evidence-chat__caption {
    font-size: 13px;
    line-height: 16px;
    color: var(--ink-55);
  }

  /* Evidence frames: disc, label, time over the frame's crop of the video */
  .evidence-frames {
    display: flex;
    flex-direction: column;
    gap: 28px;
    min-width: 0;
  }

  .evidence-frame {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    margin: 0;
  }

  .evidence-frame__label {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 14px;
    letter-spacing: 1px;
  }

  .evidence-frame__name {
    flex: 1;
    color: var(--fern);
  }

  .evidence-frame__time { color: var(--ink-55); }

  .evidence-frame__shot {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 8 / 5;
    border-radius: var(--radius-md);
    outline: 1px solid var(--line-2);
    outline-offset: -1px;
  }

  @media (min-width: 900px) {
    .evidence {
      display: grid;
      grid-template-columns: min(760px, 62.1%) minmax(0, 1fr);
      align-items: start;
      gap: var(--space-56);
    }

    .evidence-chat__header {
      flex-direction: row;
      align-items: center;
      padding: var(--space-16) 28px 15px;
    }

    .evidence-chat__log { padding-inline: var(--space-40); }

    .chat-req {
      grid-template-columns: 40px minmax(0, 1fr) 80px;
      grid-template-areas: "id body refs";
      gap: var(--space-16);
    }

    /* The AC id sits on the requirement title's baseline (BRI-7805 J49) */
    .chat-req__id,
    .chat-req__body { align-self: baseline; }

    .evidence-chat__sources,
    .evidence-chat__sources ul {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
    }

    .evidence-chat__composer {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      height: 52px;
    }

    .evidence-frames { gap: 36px; }
  }

  @media (forced-colors: active) {
    .evidence-chat__composer {
      outline: 1px solid;
      outline-offset: -1px;
    }
  }
}