/* Composer-takeover approval panel (draft approval.png): the same floating
   capsule footprint as the InputBar card, with an amber header band, the
   justification headline, a muted command line, and right-aligned actions.
   Warn semantics ride the alias state tokens; no hardcoded colors. */

/* Mirrors InputBar .root so the takeover is a content swap, not a layout jump. */
.root {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Sides = clearance + 16px so the card lands on the shared content width
     (input card - 32) at every viewport. */
  padding: 8px calc(var(--dsh-composer-side-clearance) + 16px) 12px;
}

.card {
  overflow: hidden;
  width: 100%;
  max-width: var(--dsh-chat-content-width);
  border: 1px solid var(--dsw-alias-state-warn-secondary);
  border-radius: 20px;
  background: var(--dsw-specific-input-major);
  box-shadow: var(--dsw-shadow-lv2);
  /* Elevated surface in dark, same as the menus: `.body` inside scrolls once
     the justification or command passes the cap, so the thumb takes the l2
     pair. Declared on the card because the elevation belongs to the surface,
     and the custom properties inherit down to the region that actually
     scrolls (see ui-theme styles/scrollbar.css for the rebinding contract). */
  --dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l2);
  --dsh-scrollbar-thumb-hover: var(--dsw-alias-scrollbar-hover-l2);
}

/* Tinted full-width header band. */
.strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--dsw-alias-state-warn-tertiary);
  color: var(--dsw-alias-state-warn-primary);
  font-size: 13px;
  line-height: 18px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dsw-alias-state-warn-primary);
}

/* Scroll region: an agent's justification and its command are unbounded model
   text (a one-line `cd` or a 40-line heredoc), and the seat sits in a
   fixed-height column — uncapped, a long command pushed the action row past
   the viewport and the approval could not be answered at all. The strip and
   the action row stay outside, so the buttons are always on screen. */
.body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* border-box so the cap is the region's OUTER height: the composer's draft
     area counts its padding inside the same number, and the two seats are
     only interchangeable if they occupy the same box. */
  box-sizing: border-box;
  max-height: var(--dsh-composer-text-max-height);
  overflow-y: auto;
  padding: 12px 16px 0;
}

/* The model's justification is the panel's message, not a footnote. */
.headline {
  color: var(--dsw-alias-label-primary);
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
}

.command {
  color: var(--dsw-alias-label-tertiary);
  font-family: var(--ds-font-family-code);
  font-size: 13px;
  line-height: 20px;
  word-break: break-all;
}

/* Card-level row, not body content. Its padding reproduces the metrics the row
   had inside the body: 14px above (the flex gap of 6 plus the row's 8px top
   margin, neither of which reaches it out here) and the body's former 14px
   bottom pad below, so the resting card is unchanged. Buttons are the shared
   outline/primary capsules (Button atom, matching QuestionComposer's footer);
   only the reject's danger hover is local. */
.actionRow {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 16px 14px;
}

.reject:hover:not(:disabled) {
  background: var(--dsw-alias-interactive-bg-hover-danger);
  color: var(--dsw-alias-state-error-primary);
  border-color: transparent;
}
