/* ==========================================================================
   AngelVow · Tool page skeleton (shared by several tool pages)
   -- Taken out of css/mianxiang-taohua.css: the pale cherry pink palette plus the two-column skeleton
      of "form on the left / fixed-height inner-scrolling output on the right".
      There is only one difference from the face reading page: the form rules are no longer bound to
      #faceForm but use form[data-worktool]
      as their hook, so a new tool page picks up the whole look by adding that attribute to its <form>.
      Currently loaded by: chat-assistant.html.
      The face reading page still runs its own mianxiang-taohua.css for now; once this skeleton has
      proved stable on the chat page
      it will be moved across and the rules duplicated on both sides deleted.
   ========================================================================== */

/* ==========================================================================
   Palette: the whole cream range in style.css is swapped for a pale cherry pink
   -- Only the :root variables are redefined, and the several hundred components reading them (cards,
      buttons, rules,
      nav, forms) all turn pink together; only a page loading this file is affected.
   ========================================================================== */
:root {
  --paper: #fdf3f6;        /* Card face: the palest pink */
  --cream: #fefafb;        /* Page floor: near white with a hint of pink */
  --cream-mid: #fbeaf0;    /* One step deeper: inset sections */
  --cream-deep: #f9e2ea;
  --line: #f6dde5;         /* Rules: pale pink */
  --gold: #ddabbb;         /* The old gold becomes a pale rose (hover outlines, ghost buttons) */
  --gold-soft: #fdeef3;
  --vermilion-soft: #fdf0f3;
  --fx-field: #fffcfd;     /* Inputs / output screen: the lightest, to keep body copy readable */
}
/* The frosted nav background is hard-coded cream in style.css, so it is repainted pink here */
.nav { background: rgba(254,250,251,.88); }

/* A tool page has no sidebar: the body runs as a single full-width column, matching the workbench */
.layout { grid-template-columns: minmax(0,1fr); }

/* ==========================================================================
   The two-column workbench: form on the left / output on the right
   ========================================================================== */
.fx-work.bb-form { padding: 0; border: 0; background: transparent; box-shadow: none; }
/* The outer 22px padding is gone, so the -10px lift originally on the fill-in notes is cancelled out, otherwise it would press onto the bottom of the form */
.fx-work + .bb-form-guide { margin-top: 22px; }
.bb-form form[data-worktool] {
  overflow: visible; border: 0; border-radius: 0; background: transparent; color: var(--ink);
}
/* stretch keeps the right column the same height as the left */
.fxw-grid {
  display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr);
  gap: 16px; align-items: stretch;
}
/* Left column form: white card + light rule + soft shadow (the same set as .card in style.css) */
.fxw-formcol {
  overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); box-shadow: var(--shadow-sm); color: var(--ink);
}
.fxw-formcol .block-title { margin: 0; padding: 16px 14px 0; }
.fxw-formcol .tool-adv { margin-top: 0; }
/* Right column card: the same white card as the left */
.fxw-card {
  padding: 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); box-shadow: var(--shadow-sm);
}

/* ---------- Right column: fixed height + inner scrolling ----------
   Writing height:100% on .fxw-out does not hold the content in: a grid row is as tall as the taller of
   the two columns,
   so long output pushes the whole row up and 100% grows with it. Instead: the outer .fxw-outcol is the
   positioning reference
  (it is stretched to the row height) and the output card is absolutely positioned to all four edges --
   absolute positioning takes no
   part in the row height, so this row's height is always set by the left column alone. */
.fxw-outcol { position: relative; min-height: 520px; }
.fxw-out { position: absolute; inset: 0; display: flex; flex-direction: column; }
.fxw-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.fxw-title { margin: 0; color: var(--vermilion); font-family: var(--serif); font-size: 19px; font-weight: 700; }
.fxw-screen {
  flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--fx-field);
  /* The scrollbar is always laid out, so the width does not jump when content appears */
  scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--gold-soft) transparent;
}
.fxw-screen::-webkit-scrollbar { width: 8px; }
.fxw-screen::-webkit-scrollbar-track { border-radius: 99px; background: transparent; }
.fxw-screen::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 99px; background: rgba(192,57,43,.28); background-clip: content-box; }
.fxw-screen:hover::-webkit-scrollbar-thumb { background: rgba(192,57,43,.45); background-clip: content-box; }
/* Idle state: the backdrop is laid in faintly with one line of prompt in the middle */
.fxw-idle { position: relative; display: grid; place-items: center; height: 100%; }
.fxw-idle::before {
  content: ''; position: absolute; inset: 0; opacity: .16;
  background: url("../img/hero-3.webp") center/contain no-repeat;
}
.fxw-idle p {
  position: relative; max-width: 270px; margin: 0; text-align: center;
  color: var(--vermilion); font-size: 13.5px; line-height: 2;
}
/* The compact version of the output inside a narrow column (.ai-* are the shared classes from style.css) */
.fxw-screen .ai-loading { padding: 64px 6px; }
.fxw-screen .bb-result-title { font-size: 17px; }
.fxw-screen .ai-sec { margin-top: 16px; }
.fxw-screen .ai-acts { flex-direction: column; margin-top: 18px; padding-top: 14px; }
.fxw-screen .ai-acts .btn { width: 100%; text-align: center; }

/* ==========================================================================
   The form: the palette is aligned with the theme the site runs now
   -- The #f4e8d4 / #e8d8c0 / #d4a85d in baobao.css belong to the naming site's old skin,
      and they are overridden here with paper-white cards, cinnabar accents and the palest rules;
      baobao.css itself is untouched.
   ========================================================================== */
/* Section fills are all left to the white card, with only the palest rule kept */
.bb-form [data-worktool] .tool-row { border-bottom: 1px solid var(--line); background: transparent; }
.bb-form [data-worktool] .tool-row .field + .field::before { border-left-color: var(--line); }
.bb-form [data-worktool] .tool-adv { background: transparent; }
/* A row of option buttons always lays out flat and never wraps: .tool-row .seg is flex-wrap: wrap in style.css,
   so a slightly narrow column pushes a short button onto the next line */
.bb-form [data-worktool] .tool-row .seg { flex-wrap: nowrap; }
.bb-form [data-worktool] .tool-row .seg-item { padding: 5px 10px; white-space: nowrap; }
/* Option buttons: cream fill + a tiny corner radius; selected is a soft cinnabar fill with cinnabar type, kept to a single 1px border */
.bb-form [data-worktool] .seg-item {
  border: 1px solid var(--line); border-radius: 3px;
  background: var(--cream); color: var(--ink-soft);
}
.bb-form [data-worktool] .seg-item:not(.active):hover { border-color: var(--gold); color: var(--ink); }
.bb-form [data-worktool] .seg-item.active {
  border-color: var(--vermilion); background: var(--vermilion-soft);
  color: var(--vermilion);
}
/* When there are too many options for one row (usually on a phone) it scrolls sideways instead of wrapping or clipping.
   This line has to be block: otherwise .segm as a flex child is stretched by its content, overflow never gets a definite width, and nothing scrolls */
.bb-form [data-worktool] .fx-scroll-line { display: block; }
.bb-form [data-worktool] .segm[data-scroll] {
  display: flex; width: 100%; max-width: 100%; flex-wrap: nowrap;
  overflow-x: auto; padding-bottom: 2px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.bb-form [data-worktool] .segm[data-scroll]::-webkit-scrollbar { display: none; }
.bb-form [data-worktool] .segm[data-scroll] .seg-item { padding: 5px 10px; font-size: 12px; white-space: nowrap; }
/* The optional input turns rice-paper white; the primary button goes back to the theme's pill shape and is pushed to the right edge */
.bb-form [data-worktool] .tool-adv .field input {
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--cream);
}
.bb-form [data-worktool] .tool-adv .field input:focus { background: var(--paper); }
.bb-form [data-worktool] .tool-submit { justify-content: space-between; }
.bb-form [data-worktool] .tool-submit .btn { margin-left: auto; border-radius: 999px; box-shadow: 0 6px 18px rgba(192,57,43,.3); }

/* The fill-in notes card: the old skin's gold-brown border and double cream layer are dropped, so it is a white card like the two columns */
.fx-work + .bb-form-guide {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  /* Once single-column there is no "match the left column", so it goes back to a fixed height (given to the outer box, with the card absolutely positioned to fill it) */
  .fxw-grid { grid-template-columns: 1fr; }
  .fxw-outcol { height: 560px; min-height: 0; }
}
@media (max-width: 900px) {
  /* When a narrow screen cannot fit this row of buttons: it must not wrap (the outer .fxw-formcol is
     overflow: hidden,
     and below 640px baobao.css stretches the buttons to equal width), so it scrolls sideways like the tone row above.
     .field has to carry min-width: 0 -- a grid item's minimum width defaults to min-content, or this column
     would be stretched by the total button width, the scroll container could never be narrower than its
     content, and nothing would scroll while the overflow was clipped. */
  .bb-form [data-worktool] .tool-row .field { min-width: 0; }
  .bb-form [data-worktool] .tool-row .seg {
    width: 100%; max-width: 100%; overflow-x: auto; padding-bottom: 2px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .bb-form [data-worktool] .tool-row .seg::-webkit-scrollbar { display: none; }
  .bb-form [data-worktool] .tool-row .seg-item { flex: 0 0 auto; }
}
@media (max-width: 760px) {
  .fx-work + .bb-form-guide { margin-top: 14px; }
  .fxw-outcol { height: 480px; }
}
/* Printing undoes the fixed height and inner scrolling entirely, otherwise the paper only carries the one screen that was visible */
@media print {
  .fxw-outcol { position: static; height: auto; min-height: 0; }
  .fxw-out { position: static; inset: auto; display: block; box-shadow: none; }
  .fxw-screen { overflow: visible; padding: 0; border: 0; background: none; }
}