/*
 * A capped, scrolling frame around a dump. The cap is the point: a streamed tool
 * input is tens of KB, and a feed that grows to hold one is a feed nobody can
 * scroll past.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-raw-payload {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* A `View` shrinks at 0 and a CSS box at 1. */
    flex-shrink: 0;
    min-width: 0;
    gap: var(--lotics-space-4);
  }

  .lotics-raw-payload__body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-shrink: 0;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: calc(var(--lotics-radius-control) - var(--lotics-space-2));
    background-color: var(--card);
    /* The frame CLIPS so the scrollbar respects the rounded corners. */
    overflow: hidden;
  }

  /* 240 is this panel's own measure: about ten lines, enough to see the shape of
     a payload and not enough to take the screen. */
  .lotics-raw-payload__scroller {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    max-height: 240px;
    overflow: auto;
    padding-block: var(--lotics-space-8);
    padding-inline: var(--lotics-space-10);
  }

  .lotics-raw-payload__value {
    margin: 0;
    padding: 0;
    font-family: var(--font-mono);
    font-size: var(--lotics-text-xs);
    line-height: var(--lotics-leading-xs);
    letter-spacing: var(--lotics-tracking-xs);
    font-weight: var(--lotics-weight-regular);
    color: var(--lotics-ink-default);
    /* The whitespace a dump arrives with is what makes it readable, and a long
       token still has to fold rather than push the frame open. */
    white-space: pre-wrap;
    overflow-wrap: break-word;
  }
}