/* ==========================================================================
   AngelVow · Chat Reply Helper (the components belonging to this page)
   -- The skeleton, the palette and the two-column workbench all come from css/worktool.css;
      this file only holds what this page alone has: the paste area, the reply option cards and the
      counter-example card.
   ========================================================================== */

/* The large watermark glyph behind the hero and the CTA (the face reading page and the site default each use their own) */
.cta-band::after { content: "语"; }

/* ==========================================================================
   Left column: pasting in their message
   -- baobao.css only styles the inputs inside .tool-row without a border and has no rule at all for a
      textarea,
      so it is brought into line with the inputs here (same fill, radius and type size).
   ========================================================================== */
.ca-paste { padding: 14px 14px 4px; border-bottom: 1px solid var(--line); }
.ca-paste-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px; }
/* The heading is kept out of the squeeze: otherwise the note on the right breaks it onto two lines (obvious on a phone) */
.ca-paste-head b { flex: 0 0 auto; color: var(--ink); font-family: var(--serif); font-size: 15px; white-space: nowrap; }
.ca-paste-head b i { color: var(--vermilion); font-style: normal; font-weight: 800; }
.ca-paste-head span { color: var(--ink-soft); font-size: 12px; }
.ca-paste textarea {
  display: block; width: 100%; min-height: 104px; padding: 11px 12px 24px; resize: vertical;
  border: 1px solid var(--line); border-radius: 7px; background: var(--fx-field);
  color: var(--ink); font-family: inherit; font-size: 16px; line-height: 1.85;
  transition: border-color .2s, background .2s;
}
.ca-paste textarea::placeholder { color: rgba(32,29,43,.34); }
.ca-paste textarea:focus { outline: none; border-color: var(--vermilion); background: var(--paper); }
.ca-paste textarea.ca-bg { min-height: 60px; padding-bottom: 11px; font-size: 16px; }
/* The character count sits in the bottom right of the input: it clears the resize handle in that corner,
   hence right at 21px;
   the textarea's content can scroll, so the count carries a layer in the same colour as the input to stop text passing behind and overlapping it. */
.ca-ta { position: relative; }
.ca-count {
  position: absolute; right: 21px; bottom: 8px; padding: 1px 4px; border-radius: 4px;
  background: var(--fx-field); color: var(--muted);
  font-size: 11.5px; font-variant-numeric: tabular-nums; pointer-events: none;
}
.ca-ta:focus-within .ca-count { background: var(--paper); }
.ca-count.over { color: var(--vermilion); font-weight: 700; }
/* The hint line (with the count moved inside the box, only the hint text is left on this line) */
.ca-meta { margin: 6px 2px 0; }
.ca-meta p { margin: 0; color: var(--muted); font-size: 11.5px; line-height: 1.7; }
.ca-meta p b { color: var(--vermilion); font-weight: 700; }
/* The extra background is collapsed: most people will not fill it in, so it should not take half the screen on arrival */
.ca-more { margin-top: 10px; }
.ca-more > summary {
  cursor: pointer; list-style: none; width: fit-content;
  color: var(--ink-soft); font-size: 12px; font-weight: 600;
}
.ca-more > summary::marker, .ca-more > summary::-webkit-details-marker { display: none; }
.ca-more > summary::after { content: ' ＋'; color: var(--vermilion); font-weight: 800; }
.ca-more[open] > summary::after { content: ' －'; }
.ca-more > summary:hover { color: var(--vermilion); }
.ca-more .ca-bg { margin-top: 8px; }
/* All three option rows on this page hold six or seven short buttons, with column widths laid out by content and no wrapping */
.bb-form #chatForm .tool-row { grid-template-columns: repeat(2, max-content); }

/* ==========================================================================
   Right column: the suggested replies
   ========================================================================== */
/* Their message echoed back: a quote block with a cinnabar bar on the left, so people can confirm this is the line they pasted */
.ca-quote {
  margin: 0 0 4px; padding: 10px 13px;
  border-left: 3px solid var(--gold); border-radius: 0 7px 7px 0;
  background: var(--cream-mid); color: var(--ink-soft);
  font-size: 13.5px; line-height: 1.85; word-break: break-word;
}
.ca-quote small { display: block; margin-bottom: 4px; color: var(--muted); font-size: 11px; font-weight: 700; }
/* The one-line read: what they are actually saying */
.ca-read {
  margin-top: 12px; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: 7px; background: var(--vermilion-soft);
  color: var(--ink); font-size: 13.5px; line-height: 1.9;
}
.ca-read b { color: var(--vermilion); font-weight: 700; }
.ca-read-picks { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; line-height: 1.4; }
.ca-read-picks .label { color: var(--muted); font-size: 11px; font-weight: 700; }
.ca-read-picks .value {
  display: inline-flex; align-items: center; padding: 2px 9px;
  border: 1px solid rgba(180,58,46,.24); border-radius: 999px; background: var(--paper);
  color: var(--vermilion); font-size: 11px; font-weight: 700;
}
/* The reply option cards */
.ca-list { display: grid; gap: 10px; margin-top: 12px; }
.ca-reply {
  position: relative; padding: 11px 12px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--paper);
  transition: border-color .2s, box-shadow .2s;
}
.ca-reply:hover { border-color: var(--gold); box-shadow: var(--shadow-sm); }
.ca-reply-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ca-reply-hd .choice,
.ca-reply-hd .tone {
  padding: 2px 9px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 11px; font-weight: 700;
}
.ca-reply-hd .choice { background: var(--vermilion-soft); color: var(--vermilion); border-color: rgba(180,58,46,.24); }
.ca-reply-hd .tone { background: var(--cream); color: var(--ink-soft); }
/* The copy button is pushed to the right end, and its label changes once it has been clicked */
.ca-copy {
  margin-left: auto; padding: 3px 11px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--cream); color: var(--ink-soft);
  font-family: inherit; font-size: 11.5px; cursor: pointer; transition: all .2s;
}
.ca-copy:hover { border-color: var(--vermilion); color: var(--vermilion); }
.ca-copy.done { border-color: var(--jade); background: rgba(63,125,110,.09); color: var(--jade); }
.ca-reply .txt {
  margin: 0; color: var(--ink); font-family: var(--serif); font-size: 14.5px; line-height: 1.95;
  word-break: break-word;
}
/* The counter-example card: greyed down overall, clearly apart from the suggested replies */
.ca-avoid {
  margin-top: 12px; padding: 11px 13px;
  border: 1px dashed var(--line); border-radius: 8px; background: var(--cream);
}
.ca-avoid > b {
  display: inline-block; margin-bottom: 7px; padding: 2px 9px; border-radius: 999px;
  background: rgba(32,29,43,.07); color: var(--muted); font-size: 11px; font-weight: 700;
}
.ca-avoid .txt { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.85; text-decoration: line-through; text-decoration-color: rgba(32,29,43,.22); }
.ca-avoid .why { margin: 7px 0 0; color: var(--ink-soft); font-size: 12px; line-height: 1.8; }
/* What to do next */
.ca-next {
  margin-top: 12px; padding: 12px 13px;
  border: 1px solid var(--line); border-left: 3px solid var(--vermilion); border-radius: 0 8px 8px 0;
  background: var(--gold-soft);
}
.ca-next > b { display: block; margin-bottom: 5px; color: var(--vermilion); font-family: var(--serif); font-size: 14px; }
.ca-next p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.9; }
.ca-disclaim { margin: 14px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.8; }

/* ==========================================================================
   Chat success stories: three columns on desktop, two on tablet, one on mobile
   ========================================================================== */
.ca-stories {
  overflow: hidden; padding: 30px 24px 26px;
  border-color: #f2d7df;
  background: linear-gradient(160deg, #fffefe 0%, #fff7f9 58%, #fffaf5 100%);
}
.ca-stories-head { max-width: 780px; margin: 0 auto 24px; text-align: center; }
.ca-stories-kicker {
  display: inline-block; margin-bottom: 9px; padding: 4px 12px;
  border: 1px solid #f1cad6; border-radius: 999px;
  background: #fff; color: var(--vermilion);
  font-size: 10.5px; font-weight: 800; letter-spacing: .16em;
}
.ca-stories-head h2 {
  margin: 0; color: var(--ink); font-family: var(--serif);
  font-size: 25px; font-weight: 700; letter-spacing: .01em;
}
.ca-stories-head h2::after {
  content: ""; display: block; width: 48px; height: 3px; margin: 11px auto 0;
  border-radius: 3px; background: linear-gradient(90deg, #f0a9bd, var(--vermilion));
}
.ca-stories-head p { margin: 12px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.8; }
.ca-stories-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; align-items: stretch; }
.ca-story-card {
  --story-accent: #c95b79; --story-soft: #fdeaf0; --story-border: #f2ced9;
  position: relative; display: flex; flex-direction: column; min-width: 0;
  padding: 19px 18px 18px; overflow: hidden;
  border: 1px solid var(--story-border); border-radius: 16px;
  background: linear-gradient(165deg, #fff 0%, var(--story-soft) 140%);
  box-shadow: 0 12px 28px -20px rgba(111, 52, 70, .55);
  transition: transform .22s ease, box-shadow .22s ease;
}
.ca-story-card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 4px;
  background: linear-gradient(90deg, var(--story-accent), transparent 88%);
}
.ca-story-card::after {
  content: "\201C"; position: absolute; top: 60px; right: 15px;
  color: var(--story-accent); opacity: .1;
  font-family: Georgia, serif; font-size: 66px; line-height: 1; pointer-events: none;
}
.ca-story-card:hover { transform: translateY(-4px); box-shadow: 0 18px 34px -20px rgba(111, 52, 70, .62); }
.ca-story-card:nth-child(2) { --story-accent: #8b63b4; --story-soft: #f5eefb; --story-border: #e4d4ef; }
.ca-story-card:nth-child(3) { --story-accent: #c6813f; --story-soft: #fdf1e6; --story-border: #f2d8c0; }
.ca-story-card:nth-child(4) { --story-accent: #3d9682; --story-soft: #eaf7f3; --story-border: #cce8e0; }
.ca-story-card:nth-child(5) { --story-accent: #507fae; --story-soft: #edf4fb; --story-border: #d1e1f0; }
.ca-story-card:nth-child(6) { --story-accent: #b16686; --story-soft: #f8edf2; --story-border: #ead2dc; }
.ca-story-top { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ca-story-person { display: flex; align-items: center; min-width: 0; gap: 11px; }
.ca-story-person img {
  flex: 0 0 auto; width: 54px; height: 54px; object-fit: cover; object-position: center top;
  border-radius: 50%; background: #eee;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--story-border);
}
.ca-story-person b { display: block; color: var(--ink); font-size: 15px; line-height: 1.35; }
.ca-story-person span { display: block; margin-top: 4px; color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.ca-story-result {
  flex: 0 0 auto; padding: 4px 9px; border: 1px solid var(--story-border); border-radius: 999px;
  background: var(--story-soft); color: var(--story-accent);
  box-shadow: 0 3px 10px rgba(83, 54, 63, .06);
  font-size: 11px; font-weight: 800; white-space: nowrap;
}
.ca-story-card h3 {
  position: relative; z-index: 1; margin: 18px 0 9px; color: var(--ink);
  font-family: var(--serif); font-size: 17px; font-weight: 700; line-height: 1.45;
}
.ca-story-text { position: relative; z-index: 1; margin: 0; color: #66585e; font-size: 13px; line-height: 1.82; }
.ca-story-chat {
  position: relative; z-index: 1; display: grid; gap: 7px;
  margin-top: 15px; padding: 11px;
  border: 1px solid var(--story-border); border-radius: 12px;
  background: rgba(255,255,255,.72);
}
.ca-story-chat-title {
  display: flex; align-items: center; gap: 6px; margin-bottom: 1px;
  color: var(--story-accent); font-size: 11px; font-weight: 800; letter-spacing: .04em;
}
.ca-story-chat-title::before { content: ""; width: 12px; height: 2px; border-radius: 2px; background: currentColor; }
.ca-story-chat p {
  width: fit-content; max-width: 88%; margin: 0; padding: 7px 9px;
  border: 1px solid var(--story-border); border-radius: 10px 10px 10px 3px;
  background: #fff; color: #5f5358; font-size: 11.5px; line-height: 1.55;
}
.ca-story-chat p.is-me {
  justify-self: end; border-radius: 10px 10px 3px 10px;
  background: var(--story-soft); color: #55484e;
}
.ca-story-chat p span {
  display: block; margin-bottom: 2px; color: var(--story-accent);
  font-size: 9.5px; font-weight: 800; line-height: 1.2;
}
.ca-story-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; padding-top: 16px; }
.ca-story-tags span {
  padding: 4px 9px; border-radius: 999px;
  background: var(--story-soft); color: var(--story-accent);
  font-size: 10.5px; font-weight: 700;
}

/* The idle backdrop: worktool.css points at img/hero-3.webp (left over from the old site, the file does not exist),
   and this overrides it with the site's Reply.webp. This file loads after worktool.css, so it wins.
   cover fills the whole frame. The right scrollbar gutter is fairly wide, so the right inset is pushed to 32px, just past the edge;
   the excess is clipped by .fxw-screen's overflow-x:hidden, so the image reaches the right border with no white strip and no horizontal scrollbar. */
.fxw-idle::before {
  inset: -12px -32px -12px -12px;
  background: url("../img/Reply.webp") center / cover no-repeat;
  opacity: .4;
}
/* Idle area shows only the backdrop; hide the prompt line */
.fxw-idle p { display: none; }

@media (max-width: 900px) {
  .bb-form #chatForm .tool-row { grid-template-columns: 1fr; }
  .ca-stories-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
/* The two buttons in the result area always share one row (overriding the stacked narrow-screen rules in worktool.css / style.css) */
.fxw-screen .ai-acts.result-actions { flex-direction: row; flex-wrap: nowrap; gap: 10px; }
.fxw-screen .ai-acts.result-actions .btn { width: auto; flex: 1 1 0; text-align: center; }
@media (max-width: 760px) {
  /* Give the reply-preview image and its frame a little more vertical room on phones. */
  .bb-form #chatForm .fxw-outcol { height: 510px; }
  .ca-paste { padding: 12px 12px 4px; }
  .ca-paste textarea { min-height: 92px; font-size: 16px !important; }
}
/* The "Stage" and "What you want from this line" rows on a phone: below 640px worktool.css turns
   .tool-row .seg into nowrap + overflow-x for sideways scrolling, with the scrollbar hidden,
   so the options that overflow simply look half cut off at the right edge with no sign that they can be dragged into view.
   Both rows hold 6 items, English runs longer than Chinese, and the button copy has already been trimmed once but is still short of fitting;
   here the horizontal padding and gap are pulled in further, to the same values as the rules of the same name in the Chinese site's chat-assistant.css.
   Type size and vertical padding are untouched, so the button height stays in line with the Chinese site.
   "His gender" on the same row has only two items and never overflows, but is tightened along with them, or adjacent pills would carry different padding. */
@media (max-width: 640px) {
  .bb-form #chatForm .tool-row .seg { gap: 4px; }
  .bb-form #chatForm .tool-row .seg-item { padding: 5px 4px; }
  /* Match the face-analysis gender control: two equal-width buttons instead of two narrow content-width buttons on phones. */
  .bb-form #chatForm #taSeg { width: 184px; max-width: 100%; overflow: visible; }
  .bb-form #chatForm #taSeg .seg-item { flex: 1 1 0; min-width: 0; padding: 7px 10px; text-align: center; }
}
@media (max-width: 640px) {
  .ca-stories { padding: 22px 13px 18px; }
  .ca-stories-head { margin-bottom: 18px; }
  .ca-stories-head h2 { font-size: 21px; }
  .ca-stories-head p { font-size: 13px; line-height: 1.75; }
  .ca-stories-grid { grid-template-columns: minmax(0,1fr); gap: 13px; }
  .ca-story-card { padding: 18px 16px 16px; }
  .ca-story-card:hover { transform: none; }
}

/* ==========================================================================
   Site intro card (replaces the old "how to fill this in"): heading + single panel with three points
   ========================================================================== */
.ca-about.bb-form-guide { padding: 26px 26px 28px; }
.ca-about .ca-about-head { padding: 0; border: 0; text-align: center; margin-bottom: 20px; }
.ca-about .ca-about-head span {
  display: inline-block; margin-bottom: 10px; padding: 3px 12px; border-radius: 999px;
  background: var(--vermilion-soft); color: var(--vermilion);
  font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .16em;
}
.ca-about .ca-about-head h2 {
  margin: 0; color: var(--ink); font-family: var(--serif);
  font-size: 24px; font-weight: 700; letter-spacing: .01em;
}
.ca-about .ca-about-head p { margin: 10px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.7; }
.ca-about .ca-about-panel {
  padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(165deg, #ffffff 0%, var(--gold-soft) 100%);
  box-shadow: var(--shadow-sm);
}
.ca-about .ca-about-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.ca-about .ca-about-panel li { display: flex; align-items: flex-start; gap: 15px; }
.ca-about .ca-about-num {
  flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 11px; background: var(--vermilion-soft); color: var(--vermilion);
  font-family: var(--serif); font-size: 15px; font-weight: 800;
}
.ca-about .ca-about-panel h3 {
  margin: 3px 0 5px; color: var(--ink); font-family: var(--serif);
  font-size: 16px; font-weight: 700;
}
.ca-about .ca-about-panel p { margin: 0; color: #6b5c63; font-size: 13.5px; line-height: 1.8; }
@media (max-width: 760px) {
  .ca-about.bb-form-guide { padding: 18px 15px 20px; }
  .ca-about .ca-about-head h2 { font-size: 20px; }
  .ca-about .ca-about-panel { padding: 16px 15px; }
  .ca-about .ca-about-panel ul { gap: 15px; }
  .ca-about .ca-about-num { width: 34px; height: 34px; font-size: 14px; }
}