/* ===========================================================================
   SolutionsSales preview -- 特長, part 2: crops 01-02. Base = compact crop
   (stacked panes); @container (min-width: 460px) = wide crop (side panes,
   fixed window height, see sales-feat.css). All text here >= 4.5:1.
   =========================================================================== */

/* ---- 01: two AI drafts for two not-yet-contacted companies, side by side --
   Same template, different words: the words AI changed per company are
   marked (.sa-feat-hl, navy #102A43 on #E3CCEC 10.0:1). Cards are white on a
   grey body (#EEF1F5), no border: nothing here is clickable. */
.sa-feat-v1__body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 10px; padding: 12px; background: #EEF1F5; }
@container (min-width: 460px) { .sa-feat-v1__body { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sa-feat-card { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 10px; border-radius: 6px; background: var(--white); }
.sa-feat-card__h { display: flex; align-items: center; gap: 8px; }
.sa-feat-card__h .sa-feat-2l { flex: 1 1 auto; }
.sa-feat-pri { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.sa-feat-pri .sa-score { min-width: 28px; font-size: 13px; }
/* Narrow cards keep the score chip (the page's AI優先度 mark) and drop its label. */
@container (min-width: 460px) and (max-width: 539.98px) { .sa-feat-pri__l { display: none; } }
.sa-feat-card__st { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* Waiting for the person in charge: --muted on --sa-flat 4.93:1. */
.sa-feat-wait { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 0 8px 0 6px; border-radius: 999px; background: var(--sa-flat); font-size: 13px; font-weight: 700; line-height: 20px; color: var(--muted); white-space: nowrap; }
.sa-feat-shot .sa-feat-wait svg { width: 12px; height: 12px; }
.sa-feat-subj { display: flex; gap: 8px; padding-bottom: 7px; border-bottom: 1px solid var(--sa-hair); font-size: 13px; font-weight: 700; line-height: 1.6; color: var(--navy); }
.sa-feat-subj small { flex: none; font-size: 13px; font-weight: 400; line-height: 17.6px; color: var(--muted); }
/* The AI-written body sits on the AI tint (navy on #F4EAF6 13.4:1). */
.sa-feat-body { padding: 7px 9px; border-radius: 4px; background: var(--sa-tint); font-size: 13px; line-height: 1.6; color: var(--navy); }
.sa-feat-body p + p { margin-top: 2px; }
@container (min-width: 540px) { .sa-feat-v1 p.sa-feat-more { display: block; } }
/* Marked words: short phrases kept on one line so the mark stays one box. */
.sa-feat-hl { position: relative; z-index: 0; display: inline-block; padding: 0 2px; margin: 0 -1px; background: none; color: inherit; white-space: nowrap; }
.sa-feat-hl::before { content: ""; position: absolute; inset: 1px 0; z-index: -1; border-radius: 2px; background: #E3CCEC; transform-origin: left center; }
.sa-win .sa-feat-foot { flex: none; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-top: 1px solid var(--sa-hair); font-size: 13px; color: var(--muted); white-space: nowrap; }
.sa-feat-foot svg { color: var(--st-nur); }

/* ---- 02: replies sorted from auto-replies, AI reads one and proposes ------
   Group bars on --surface-2 (#F4F7FA): navy 14.9:1, --muted 5.3:1. */
.sa-feat-v2__body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.sa-feat-inbox { overflow: hidden; border-bottom: 1px solid var(--sa-hair); }
.sa-feat-grp { position: relative; z-index: 0; display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 14px; border-bottom: 1px solid var(--sa-hair); background: var(--surface-2); font-size: 13px; font-weight: 700; color: var(--navy); white-space: nowrap; }
.sa-feat-grp span { overflow: hidden; font-weight: 400; color: var(--muted); text-overflow: ellipsis; }
.sa-feat-inbox li { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-bottom: 1px solid var(--sa-hair); background: var(--white); }
.sa-feat-inbox ul:last-child li:last-child { border-bottom: 0; }
.sa-feat-inbox .sa-feat-2l { flex: 1 1 auto; }
.sa-feat-v2__read { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px 14px 14px; }
@container (min-width: 460px) {
  .sa-feat-v2__body { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .sa-feat-inbox { border-bottom: 0; border-right: 1px solid var(--sa-hair); }
  .sa-feat-inbox ul:last-child li:last-child { border-bottom: 1px solid var(--sa-hair); }
}
.sa-feat-from { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.sa-feat-from b { overflow: hidden; font-size: 13px; color: var(--navy); text-overflow: ellipsis; }
.sa-feat-from time { margin-left: auto; font-variant-numeric: tabular-nums; }
.sa-feat-mail { font-size: 13px; line-height: 1.7; color: var(--ink); }
.sa-feat-aip { margin-top: 4px; padding: 10px 12px 6px; border-radius: 6px; background: var(--sa-tint); }
.sa-win .sa-feat-aip__h { margin-bottom: 6px; }
.sa-feat-aip__tx { font-size: 13px; line-height: 1.65; color: var(--navy); }
.sa-win .sa-feat-next { margin-top: 6px; }
.sa-feat-next li { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid rgba(110, 69, 133, 0.2); }
.sa-feat-next li > b { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--white); font-size: 12px; color: var(--sa-acc-ink); }
.sa-feat-next .sa-feat-2l > * { white-space: normal; }
.sa-feat-next .sa-feat-2l > span { font-size: 13px; font-weight: 700; color: var(--navy); }
.sa-feat-next .sa-feat-2l small { color: var(--sa-acc-ink); }