deepseek-harness/packages/client/ui-question/src/client/PlanReviewPanel.module.css

/* Plan-review takeover: the waiting-approval card language (amber strip on a
   floating capsule, right-aligned actions) applied to a reviewed plan. Kept as
   its own module rather than shared with ui-conversation's ApprovalPanel: the
   two takeovers agree on tokens and geometry, not on content — this one's body
   is scrollable markdown, that one's is a headline plus a command line. Warn
   semantics ride the alias state tokens; no hardcoded colors. */

/* Mirrors the question card's frame so the takeover is a content swap. */
.frame {
  display: flex;
  justify-content: center;
  padding: 6px 24px 10px;
}

.card {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  width: 100%;
  max-width: 776px;
  /* Composer seat sits in a fixed-height conversation column (overflow
     hidden): cap the card against the viewport and scroll the plan, so the
     strip and the decision row stay reachable on a long plan. */
  max-height: min(60vh, 520px);
  border: 1px solid var(--dsw-alias-state-warn-secondary);
  border-radius: 20px;
  background: var(--dsw-specific-input-major);
  box-shadow: var(--dsw-shadow-lv2);
  color: var(--dsw-alias-label-primary);
  /* Elevated surface in dark: the plan body inside scrolls once the card hits
     the cap above, so the thumb takes the l2 pair (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);
}

.card,
.card * {
  box-sizing: border-box;
}

/* Tinted full-width header band, as on the approval takeover. */
.strip {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  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);
}

/* The plan is the panel's message: it takes the whole body and the scroll. */
.body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 16px 4px;
  font-size: 14px;
  line-height: 22px;
}

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: 12px;
  padding: 8px 16px 12px;
}

.feedback {
  min-height: 16px;
  color: var(--dsw-alias-state-error-primary);
  font-size: 11px;
  line-height: 16px;
}

.actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
}

@media (max-width: 720px) {
  .frame {
    padding: 6px 10px 10px;
  }

  .card {
    border-radius: 16px;
  }

  .body {
    padding: 10px 12px 4px;
  }

  .footer {
    align-items: flex-end;
    padding: 8px 12px 10px;
  }
}