/* ============================================================================
   redesign.css — Social Redesign v2 component layer (rides on shell.css + engine.css).
   New surfaces: single-row post header · Describe → Produce spine · produce-mode
   pick (Generate here vs Claude project) · the CHAT-ITERATIVE generate panel
   (the centerpiece) · paste-to-ideas import + enriched idea cards · brief export.
   Brand tokens come from shell.css (--primary indigo / --acc pink). The generate
   surface uses the violet "media engine" accent (--violet) shared with engine.css.
   ========================================================================== */
:root { --violet:#7c3aed; --violet-soft:#ede9fe; --violet-bg:#faf8ff; }

.pagewrap { max-width: 860px; margin: 0 auto; }
.pagewrap.wide { max-width: 1000px; }

/* ── operator meta-note (indigo dashed) ─────────────────────────────────── */
.annot { display:inline-flex; align-items:flex-start; gap:7px;
  border:1px dashed rgba(43,45,124,.40); background:rgba(43,45,124,.05);
  border-radius:var(--r); padding:7px 11px;
  font-size:11.5px; line-height:1.45; color:var(--primary); }
.annot .ic { width:13px; height:13px; flex:none; margin-top:1px; }
.annot.full { display:flex; }

/* ── single-row post header ─────────────────────────────────────────────── */
.postbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface);
  box-shadow:var(--sh-sm); padding:9px 14px; margin-bottom:14px; }
.postbar .ptype { display:inline-flex; align-items:center; gap:6px; font:700 12px/1 var(--display);
  color:var(--muted); padding:5px 9px; border-radius:var(--pill); background:var(--surface-2); border:1px solid var(--line); }
.postbar .ptitle2 { display:inline-flex; align-items:center; gap:7px; font:800 15px/1.2 var(--display); color:var(--ink); min-width:0; }
.postbar .ptitle2 .ic { width:13px; height:13px; color:var(--muted-2); cursor:pointer; }
.postbar .pstatus { width:9px; height:9px; border-radius:50%; background:var(--amber); flex:none; }
.postbar .spacer { flex:1; }
.postbar .pstep { display:inline-flex; align-items:center; gap:4px; font:700 12px/1 var(--display); }
.postbar .pstep .ps { padding:6px 12px; border-radius:var(--pill); color:var(--muted); border:1px solid transparent; cursor:pointer; }
.postbar .pstep .ps.done { color:var(--success-deep); }
.postbar .pstep .ps.on { background:linear-gradient(180deg,var(--primary),var(--primary-deep)); color:#fff; box-shadow:var(--sh-sm); }
.postbar .pstep .sep2 { color:var(--muted-2); }
.pmenu { position:relative; }
.pmenu .menu { position:absolute; right:0; top:38px; z-index:30; min-width:230px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh-md); padding:6px; }
.pmenu .mi { display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:var(--r-sm);
  font:600 12.5px/1 var(--display); color:var(--ink-2); cursor:pointer; }
.pmenu .mi:hover { background:var(--surface-2); }
.pmenu .mi .ic { width:14px; height:14px; color:var(--muted); }
.pmenu .mi .mv { margin-left:auto; font-weight:500; color:var(--muted); }
.pmenu .msep { height:1px; background:var(--line); margin:5px 4px; }

/* ── the spine diagram (Describe → Produce → Schedule) ──────────────────── */
.spine { display:flex; align-items:stretch; gap:0; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:var(--r-xl); background:var(--surface);
  box-shadow:var(--sh-sm); overflow:hidden; margin:16px 0; }
.spine .sp { flex:1; min-width:180px; padding:15px 17px; position:relative; }
.spine .sp + .sp { border-left:1px solid var(--line); }
.spine .sp .k { font:700 10.5px/1 var(--display); letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); }
.spine .sp .t { font:800 15px/1.2 var(--display); color:var(--ink); margin-top:7px; display:flex; align-items:center; gap:8px; }
.spine .sp .t .ic { width:16px; height:16px; color:var(--primary); }
.spine .sp .d { font-size:12px; color:var(--muted); margin-top:5px; line-height:1.5; }
.spine .sp.accent .t .ic { color:var(--violet); }

/* ── reference strip (Describe summary on Produce pages) ────────────────── */
.dirstrip { display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface);
  box-shadow:var(--sh-sm); padding:10px 14px; margin-top:14px; }
.dirstrip .dic { width:24px; height:24px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:var(--emerald-50); color:var(--success-deep); }
.dirstrip .dic .ic { width:13px; height:13px; }
.dirstrip .dt { font:700 13px/1.35 var(--display); color:var(--ink); min-width:0; flex:1; }
.dirstrip .dt span { font-weight:500; color:var(--ink-2); }
.rchip { display:inline-flex; align-items:center; gap:5px; padding:4px 9px;
  border-radius:var(--pill); background:var(--surface-2); border:1px solid var(--line);
  font:600 11.5px/1 var(--display); color:var(--ink-2); }
.rchip .ic { width:12px; height:12px; }

/* ── brand style row (kit travels with every generation) ────────────────── */
.stylekit { position:relative; border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface); box-shadow:var(--sh-sm); padding:13px 14px 12px; margin-top:14px; overflow:hidden; }
.stylekit::before { content:''; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--primary), var(--acc)); }
.stylekit .sklab { font:700 11px/1 var(--display); letter-spacing:.06em; text-transform:uppercase;
  color:var(--primary); margin-right:4px; }
.skchip { display:inline-flex; align-items:center; gap:6px; padding:5px 10px;
  border:1px solid var(--line-strong); border-radius:var(--pill); background:var(--surface);
  font:600 12px/1 var(--display); color:var(--ink-2); cursor:pointer; text-decoration:none;
  transition:border-color .14s, background .14s; }
.skchip:hover { border-color:#d5d2ec; }
.skchip.on { border-color:var(--acc); background:var(--acc-50); color:var(--acc-700); }
.skchip .ic { width:12px; height:12px; }
.skchip .swatches { display:inline-flex; }
.skchip .sw { width:11px; height:11px; border-radius:50%; border:1.5px solid #fff; }
.skchip .sw + .sw { margin-left:-4px; }
.skchip .thumb { width:16px; height:16px; border-radius:5px; flex:none;
  background:linear-gradient(135deg,var(--primary),var(--acc)); }
.skchip.ghost { border-style:dashed; background:transparent; color:var(--muted); }
.skchip.ghost:hover { color:var(--primary); border-color:rgba(43,45,124,.4); }
.sknote { font-size:11.5px; color:var(--muted); margin-top:9px; }

/* ════════════════════════════════════════════════════════════════════════
   PRODUCE-MODE PICK — Generate here (⚡, in-app) vs Take to a Claude project (✦)
   ════════════════════════════════════════════════════════════════════════ */
.producepick { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
@media (max-width:820px){ .producepick { grid-template-columns:1fr; } }
.modecard { position:relative; border:1px solid var(--line-strong); border-radius:var(--r-lg);
  background:var(--surface); box-shadow:var(--sh-sm); padding:15px 16px; cursor:pointer;
  transition:border-color .14s, box-shadow .14s, background .14s; }
.modecard:hover { border-color:#d5d2ec; box-shadow:var(--sh); }
.modecard .mh { display:flex; align-items:center; gap:11px; }
.modecard .mic { width:38px; height:38px; flex:none; border-radius:11px; display:grid; place-items:center; font-size:18px; }
.modecard .mt { font:800 15px/1.15 var(--display); color:var(--ink); }
.modecard .msub { font-size:11.5px; color:var(--muted); margin-top:2px; }
.modecard .mbody { font-size:12.5px; color:var(--ink-2); line-height:1.55; margin-top:11px; }
.modecard .mcheck { position:absolute; top:13px; right:13px; font-size:17px; opacity:0; transition:opacity .14s; }
.modecard .mtag { display:inline-flex; align-items:center; gap:5px; margin-top:11px;
  font:600 11px/1 var(--display); color:var(--muted); }
.modecard .mtag .ic { width:12px; height:12px; }
/* in-app (violet) */
.modecard.here .mic { background:var(--violet-soft); color:var(--violet); }
.modecard.here.on { border-color:var(--violet); background:var(--violet-bg); }
.modecard.here.on .mcheck { opacity:1; color:var(--violet); }
/* claude project (indigo) */
.modecard.claude .mic { background:rgba(43,45,124,.10); color:var(--primary); }
.modecard.claude.on { border-color:var(--primary); background:rgba(43,45,124,.04); }
.modecard.claude.on .mcheck { opacity:1; color:var(--primary); }

/* ════════════════════════════════════════════════════════════════════════
   CHAT-ITERATIVE GENERATE PANEL (the centerpiece) — describe → generate →
   "improve this" → adjust → finalize, the way you'd chat with Higgsfield.
   ════════════════════════════════════════════════════════════════════════ */
.genpanel { border:1px solid var(--violet-soft); border-radius:var(--r-xl);
  background:linear-gradient(180deg,#faf8ff 0%, #ffffff 42%); padding:14px; margin-top:14px; }
.genhead { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin:2px 2px 12px; }
.genhead .gtag { display:inline-flex; align-items:center; gap:6px;
  font:700 11px/1 var(--display); letter-spacing:.07em; text-transform:uppercase; color:var(--violet); }
.genhead .gtag .dot { width:7px; height:7px; border-radius:50%; background:var(--violet); }
.genhead .spacer { flex:1; }
.gconf { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:var(--pill);
  border:1px solid var(--violet-soft); background:#fff; font:600 11.5px/1 var(--display); color:var(--gua-gray-600, #4b5563); cursor:pointer; }
.gconf .ic { width:13px; height:13px; color:var(--violet); }

/* conversation thread */
.gthread { display:flex; flex-direction:column; gap:12px; }
.gmsg { max-width:88%; }
.gmsg .who { font:700 10.5px/1 var(--display); letter-spacing:.05em; text-transform:uppercase; color:var(--muted-2); margin:0 0 5px 2px; }
/* user instruction bubble (right) */
.gmsg.user { align-self:flex-end; text-align:right; }
.gmsg.user .bubble { display:inline-block; text-align:left; background:var(--primary); color:#fff;
  border-radius:14px 14px 4px 14px; padding:9px 13px; font-size:13px; line-height:1.5; box-shadow:var(--sh-sm); }
/* assistant message (left) */
.gmsg.ai { align-self:flex-start; width:100%; max-width:100%; }
.gmsg.ai .bubble { background:#fff; border:1px solid var(--violet-soft); border-radius:14px 14px 14px 4px;
  padding:12px 13px; box-shadow:var(--sh-sm); }
.gmsg.ai .note { font-size:12.5px; color:var(--gua-gray-700,#374151); line-height:1.5; }
.gmsg.ai .note b { color:var(--ink); }

/* collapsible composed-prompt disclosure inside an AI message */
.gprompt { margin-top:10px; border:1px solid var(--line); border-radius:10px; background:var(--gua-gray-50,#f9fafb); overflow:hidden; }
.gprompt summary { list-style:none; cursor:pointer; padding:8px 11px; font:600 11.5px/1 var(--display); color:var(--muted);
  display:flex; align-items:center; gap:7px; }
.gprompt summary::-webkit-details-marker { display:none; }
.gprompt summary .ic { width:13px; height:13px; }
.gprompt[open] summary { border-bottom:1px solid var(--line); }
.gprompt .ptext { padding:11px 12px; font:11.5px/1.6 ui-monospace,'SF Mono',Menlo,monospace; color:var(--gua-gray-700,#374151); white-space:pre-wrap; }

/* candidate grid inside an AI result */
.gcands { display:grid; grid-template-columns:repeat(4, 1fr); gap:9px; margin-top:11px; }
@media (max-width:680px){ .gcands { grid-template-columns:repeat(2,1fr); } }
.gcand { position:relative; border:1px solid var(--line); border-radius:11px; overflow:hidden; cursor:pointer;
  background:#fff; transition:border-color .14s, box-shadow .14s, transform .08s; }
.gcand:hover { border-color:var(--violet); box-shadow:var(--sh); transform:translateY(-1px); }
.gcand.sel { border-color:var(--violet); box-shadow:0 0 0 2px var(--violet); }
.gcand .gpick { position:absolute; top:7px; right:7px; width:20px; height:20px; border-radius:50%;
  background:var(--violet); color:#fff; display:none; place-items:center; box-shadow:var(--sh-sm); }
.gcand .gpick .ic { width:12px; height:12px; }
.gcand.sel .gpick { display:grid; }

/* faux generated-image placeholder (tasteful — premium soft gradients) */
.imgph { aspect-ratio:4/5; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  position:relative; color:#fff; overflow:hidden; }
.imgph .glyph { width:26px; height:26px; opacity:.85; }
.imgph .cap { font:800 10px/1.15 var(--display); letter-spacing:.02em; text-align:center; padding:0 10px; text-shadow:0 1px 3px rgba(0,0,0,.25); }
.imgph::after { content:''; position:absolute; inset:0; background:radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.18), transparent 60%); }
.imgph.v1 { background:linear-gradient(150deg,#2b2d7c 0%, #3a3c99 50%, #ff2d78 130%); }
.imgph.v2 { background:linear-gradient(150deg,#1a1b52 0%, #7c3aed 70%, #ff2d78 140%); }
.imgph.v3 { background:linear-gradient(150deg,#46496b 0%, #2b2d7c 60%, #c01a5b 130%); }
.imgph.v4 { background:linear-gradient(150deg,#15173a 0%, #2b2d7c 55%, #f77062 140%); }
.imgph.ar11 { aspect-ratio:1/1; }
.imgph.ar169 { aspect-ratio:16/9; }
.imgph.ar916 { aspect-ratio:9/16; }

/* selected-hero preview (the chosen image, larger) */
.genhero { display:flex; gap:14px; align-items:stretch; margin-top:6px; }
.genhero .hero { width:150px; flex:none; border-radius:13px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--sh); }
.genhero .hmeta { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:7px; }
.genhero .hmeta .ht { font:800 14px/1.25 var(--display); color:var(--ink); }
.genhero .hmeta .hd { font-size:12px; color:var(--muted); line-height:1.5; }

/* sticky composer (improve / describe a change) */
.gcompose { margin-top:13px; border:1px solid var(--violet-soft); border-radius:14px; background:#fff; box-shadow:var(--sh-sm); padding:10px; }
.gcompose .cr { display:flex; align-items:center; gap:9px; }
.gcompose .cin { flex:1; border:1px solid var(--line-strong); border-radius:11px; padding:11px 13px; font-size:13px; color:var(--ink);
  outline:none; transition:border-color .14s, box-shadow .14s; font-family:var(--body); }
.gcompose .cin:focus { border-color:var(--violet); box-shadow:0 0 0 3px rgba(124,58,237,.18); }
.gcompose .send { flex:none; display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 17px; border-radius:11px;
  border:1px solid var(--violet); background:var(--violet); color:#fff; font:700 13px/1 var(--display); cursor:pointer;
  box-shadow:0 6px 16px -6px rgba(124,58,237,.5); transition:filter .14s, transform .06s; }
.gcompose .send:hover { filter:brightness(1.05); }
.gcompose .send:active { transform:translateY(1px); }
.gcompose .quick { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.gchip { display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border-radius:var(--pill);
  border:1px solid var(--violet-soft); background:var(--violet-bg); color:var(--violet); font:600 11.5px/1 var(--display); cursor:pointer;
  transition:background .14s; }
.gchip:hover { background:#e7defc; }
.gchip .ic { width:12px; height:12px; }

/* first-run big generate CTA */
.genfirst { border:1px dashed var(--violet-soft); border-radius:14px; background:#fff; padding:18px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.genfirst .gf-ic { width:44px; height:44px; flex:none; border-radius:13px; display:grid; place-items:center;
  background:var(--violet-soft); color:var(--violet); font-size:21px; }
.genfirst .gf-t { font:800 15px/1.2 var(--display); color:var(--ink); }
.genfirst .gf-d { font-size:12.5px; color:var(--muted); margin-top:3px; line-height:1.5; }
.genfirst .gf-go { margin-left:auto; }
.btn.violet { background:var(--violet); border-color:var(--violet); color:#fff; box-shadow:0 6px 16px -6px rgba(124,58,237,.5); }
.btn.violet:hover { filter:brightness(1.06); border-color:var(--violet); }

/* ════════════════════════════════════════════════════════════════════════
   IDEA IMPORT — paste box + enriched idea cards in the inbox
   ════════════════════════════════════════════════════════════════════════ */
.pastebox { border:1px solid var(--line); border-radius:var(--r-xl); background:var(--surface); box-shadow:var(--sh-sm); padding:16px; }
.pastebox .pb-h { display:flex; align-items:center; gap:10px; margin-bottom:11px; }
.pastebox .pb-ic { width:34px; height:34px; flex:none; border-radius:10px; display:grid; place-items:center;
  background:var(--acc-50); color:var(--acc-700); font-size:16px; }
.pastebox .pb-t { font:800 15px/1.15 var(--display); color:var(--ink); }
.pastebox .pb-d { font-size:11.5px; color:var(--muted); margin-top:2px; }
.pastebox textarea { width:100%; min-height:120px; resize:vertical; border:1px solid var(--line-strong); border-radius:12px;
  padding:12px 13px; font-size:13px; line-height:1.55; color:var(--ink); font-family:var(--body); outline:none;
  transition:border-color .14s, box-shadow .14s; }
.pastebox textarea:focus { border-color:var(--acc); box-shadow:var(--ring); }
.pastebox .pb-foot { display:flex; align-items:center; gap:10px; margin-top:11px; flex-wrap:wrap; }
.pastebox .pb-foot .hint { font-size:11.5px; color:var(--muted); }

.processing { display:flex; align-items:center; gap:11px; border:1px solid var(--violet-soft); background:var(--violet-bg);
  border-radius:12px; padding:11px 14px; margin-top:12px; font-size:12.5px; color:var(--violet); font-weight:600; }
.processing .spin { width:16px; height:16px; border:2px solid var(--violet-soft); border-top-color:var(--violet);
  border-radius:50%; animation:spin 0.8s linear infinite; flex:none; }
@keyframes spin { to { transform:rotate(360deg); } }

/* enriched idea card */
.inbox { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
@media (max-width:780px){ .inbox { grid-template-columns:1fr; } }
.ideacard { border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-sm);
  padding:14px; display:flex; flex-direction:column; gap:9px; transition:box-shadow .14s, transform .12s, border-color .14s; }
.ideacard:hover { box-shadow:var(--sh-md); transform:translateY(-1px); }
.ideacard.fresh { border-color:var(--violet-soft); box-shadow:0 0 0 1px var(--violet-soft), var(--sh-sm); }
.ideacard .ic-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ideacard .fmt { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:var(--pill);
  font:700 10.5px/1 var(--display); letter-spacing:.02em; }
.ideacard .fmt .ic { width:12px; height:12px; }
.ideacard .fmt.image { background:rgba(43,45,124,.10); color:var(--primary); }
.ideacard .fmt.carousel { background:var(--violet-soft); color:var(--violet); }
.ideacard .fmt.video { background:var(--acc-light); color:var(--acc-700); }
.ideacard .freshtag { margin-left:auto; font:700 9.5px/1 var(--display); letter-spacing:.04em; text-transform:uppercase;
  color:var(--violet); background:var(--violet-bg); border:1px solid var(--violet-soft); padding:3px 7px; border-radius:var(--pill); }
.ideacard .it { font:800 14.5px/1.3 var(--display); color:var(--ink); }
.ideacard .meta { display:flex; flex-direction:column; gap:6px; }
.ideacard .mrow { font-size:12px; color:var(--ink-2); line-height:1.45; display:flex; gap:7px; }
.ideacard .mrow .lab { font:700 10px/1.5 var(--display); letter-spacing:.04em; text-transform:uppercase; color:var(--muted-2); flex:none; width:42px; }
.ideacard .tagrow { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.ideacard .matchchip { display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border-radius:var(--pill);
  background:var(--surface-2); border:1px solid var(--line); font:600 11px/1 var(--display); color:var(--ink-2); }
.ideacard .matchchip .ic { width:11px; height:11px; color:var(--acc-700); }
.ideacard .pchip { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:var(--pill);
  background:var(--surface-2); border:1px solid var(--line); font:600 10.5px/1 var(--display); color:var(--muted); }
.ideacard .ic-foot { display:flex; align-items:center; gap:8px; margin-top:2px; padding-top:10px; border-top:1px solid var(--line); }

/* ════════════════════════════════════════════════════════════════════════
   DESCRIBE canvas + brief export
   ════════════════════════════════════════════════════════════════════════ */
.describe-grid { display:grid; grid-template-columns:1fr; gap:13px; }
.dcard { border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-sm); padding:15px 16px; }
.dcard .dch { display:flex; align-items:center; gap:9px; margin-bottom:11px; }
.dcard .dch .dn { width:26px; height:26px; flex:none; border-radius:8px; display:grid; place-items:center;
  background:var(--acc-50); color:var(--acc-700); font:800 12px/1 var(--display); }
.dcard .dch .dt { font:800 14px/1.15 var(--display); color:var(--ink); }
.dcard .dch .dd { font-size:11.5px; color:var(--muted); }
.dcard .dch .spacer { flex:1; }

/* the brief export block (mono, copyable) */
.briefblock { border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; margin-top:6px; }
.briefblock .bh { display:flex; align-items:center; gap:8px; padding:9px 13px; border-bottom:1px solid var(--line);
  background:var(--gua-gray-50,#f9fafb); font:700 11px/1 var(--display); letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.briefblock .bh .ic { width:13px; height:13px; color:var(--primary); }
.briefblock .bh .spacer { flex:1; }
.briefblock .btext { padding:14px 15px; font:12px/1.65 ui-monospace,'SF Mono',Menlo,monospace; color:var(--gua-gray-700,#374151);
  white-space:pre-wrap; max-height:340px; overflow:auto; }
.briefblock .btext .bk { color:var(--primary); font-weight:700; }
.briefblock .btext .bc { color:var(--muted-2); }

/* "run it in your Claude project" steps */
.cpsteps { display:flex; flex-direction:column; gap:0; margin-top:4px; }
.cpstep { display:flex; gap:12px; padding:11px 2px; }
.cpstep + .cpstep { border-top:1px solid var(--line); }
.cpstep .cn { width:24px; height:24px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:rgba(43,45,124,.10); color:var(--primary); font:800 11px/1 var(--display); }
.cpstep .cb { font-size:12.5px; color:var(--ink-2); line-height:1.5; }
.cpstep .cb b { color:var(--ink); }
.cpstep .cb code { font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:11.5px; background:var(--surface-2);
  padding:1px 5px; border-radius:5px; color:var(--primary); }

/* finished-asset upload-back tile */
.finalrow { display:grid; grid-template-columns:1fr 1.2fr; gap:12px; align-items:stretch; margin-top:6px; }
@media (max-width:860px){ .finalrow { grid-template-columns:1fr; } }
.finaltile { border:1px solid var(--line); border-radius:14px; background:var(--surface); padding:12px;
  display:flex; align-items:center; gap:13px; }
.finaltile .fthumb { width:64px; height:80px; flex:none; border-radius:10px; position:relative; overflow:hidden; }
.finaltile .fthumb .ok { position:absolute; top:-6px; right:-6px; width:20px; height:20px; border-radius:50%;
  background:var(--success); color:#fff; display:grid; place-items:center; box-shadow:var(--sh-sm); z-index:2; }
.finaltile .fthumb .ok .ic { font-size:11px; width:11px; height:11px; }

/* numbered accordion sections (reused across produce pages) */
.asec { border:1px solid var(--line); border-radius:16px; background:var(--surface); box-shadow:var(--sh-sm);
  margin-top:14px; overflow:hidden; }
.asec.open { border-color:var(--acc-100); box-shadow:var(--sh); }
.asec.openv { border-color:var(--violet-soft); box-shadow:var(--sh); }
.asec-head { display:flex; align-items:center; gap:12px; padding:13px 16px; flex-wrap:wrap; }
.anum { width:30px; height:30px; flex:none; border-radius:9px; display:grid; place-items:center;
  font:800 13px/1 var(--display); background:var(--surface-2); color:var(--muted); }
.anum.done { background:var(--emerald-50); color:var(--success-deep); }
.anum.on { background:var(--acc); color:#fff; }
.anum.onv { background:var(--violet); color:#fff; }
.asec-head .ti { min-width:0; flex:1; }
.asec-head .ti .t { font:700 14px/1.2 var(--display); color:var(--ink); }
.asec-head .ti .d { font-size:11.5px; color:var(--muted); margin-top:2px; }
.asec-body { border-top:1px solid var(--line); padding:14px 16px 16px; }

/* slide rail (carousel) */
.sliderail { display:flex; gap:10px; overflow-x:auto; padding:4px 2px 10px; }
.sltile { width:120px; flex:none; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff;
  box-shadow:var(--sh-sm); cursor:pointer; transition:border-color .14s, box-shadow .14s; }
.sltile:hover { border-color:var(--violet); }
.sltile.sel { border-color:var(--violet); box-shadow:0 0 0 2px var(--violet); }
.sltile .slcap { padding:7px 9px; }
.sltile .sln { font:700 10px/1 var(--display); letter-spacing:.04em; text-transform:uppercase; color:var(--muted-2); }
.sltile .slt { font:700 11.5px/1.25 var(--display); color:var(--ink); margin-top:3px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sldot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:5px; }
.sldot.ok { background:var(--success); } .sldot.gen { background:var(--violet); } .sldot.idle { background:var(--line-strong); }

/* tiny generic helpers */
.eyebrow2 { font:700 11px/1 var(--display); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:9px;
  display:flex; align-items:center; gap:7px; }
.eyebrow2::before { content:''; width:3px; height:12px; border-radius:2px; background:var(--violet); }

/* ════════════════════════════════════════════════════════════════════════
   v2-REVISED — CONTINUOUS CREATE CONVERSATION (Describe + Produce merged):
   one chat shapes the brief (text) then generates & improves; a live BRIEF
   panel fills on the right. Plus the woven edge-states + auto-create fast-lane.
   ════════════════════════════════════════════════════════════════════════ */
.wsplit { display:grid; grid-template-columns:minmax(0,1fr) 322px; gap:18px; align-items:start; margin-top:14px; }
@media (max-width:940px){ .wsplit { grid-template-columns:1fr; } }
.wsplit .brside { position:sticky; top:72px; }
@media (max-width:940px){ .wsplit .brside { position:static; } }

/* phase chip row in the conversation header (① Brief → ② Generate) */
.gphase { display:inline-flex; align-items:center; gap:9px; }
.gphase .ph { display:inline-flex; align-items:center; gap:6px; font:700 11px/1 var(--display); color:var(--muted-2); }
.gphase .ph.done { color:var(--success-deep); }
.gphase .ph.on { color:var(--violet); }
.gphase .ph .pn { width:18px; height:18px; border-radius:50%; display:grid; place-items:center; font-size:10px; background:var(--surface-2); }
.gphase .ph.done .pn { background:var(--emerald-50); color:var(--success-deep); }
.gphase .ph.on .pn { background:var(--violet); color:#fff; }
.gphase .arr { color:var(--muted-2); }

/* generating (in-flight) bubble + skeleton candidates */
.gmsg.gen .bubble { border-color:var(--violet-soft); }
.genline { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--violet); font-weight:600; }
.genline .spin { width:14px; height:14px; border:2px solid var(--violet-soft); border-top-color:var(--violet); border-radius:50%; animation:spin .8s linear infinite; flex:none; }
.gskelgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-top:11px; }
@media (max-width:680px){ .gskelgrid { grid-template-columns:repeat(2,1fr); } }
.gskel { aspect-ratio:4/5; border-radius:11px; background:linear-gradient(100deg, #efeafc 28%, #f8f5ff 50%, #efeafc 72%); background-size:200% 100%; animation:shimmer 1.3s linear infinite; }
@keyframes shimmer { 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }

/* failed generation bubble + retry */
.gmsg.fail .bubble { background:var(--rose-50); border-color:#f6c9d4; }
.gmsg.fail .note { color:var(--rose); }
.gmsg.fail .note b { color:var(--danger); }
.retrybtn { margin-top:9px; display:inline-flex; align-items:center; gap:6px; border:1px solid #f6c9d4; background:#fff; color:var(--rose); border-radius:9px; padding:6px 12px; font:700 12px/1 var(--display); cursor:pointer; }
.retrybtn:hover { background:var(--rose-50); }

/* ── live BRIEF panel (right rail) ── */
.briefpanel { border:1px solid var(--line); border-radius:var(--r-xl); background:var(--surface); box-shadow:var(--sh-sm); overflow:hidden; }
.briefpanel .bp-h { display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--line); background:var(--gua-gray-50,#f9fafb); }
.briefpanel .bp-h .t { font:800 13px/1 var(--display); color:var(--ink); }
.briefpanel .bp-h .ic { width:14px; height:14px; color:var(--primary); }
.briefpanel .bp-h .spacer { flex:1; }
.briefpanel .bp-body { padding:13px 14px; display:flex; flex-direction:column; gap:13px; }
.bpsec .l { font:700 10px/1 var(--display); letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2); margin-bottom:5px; display:flex; align-items:center; gap:6px; }
.bpsec .l .ic { width:11px; height:11px; }
.bpsec .v { font-size:12.5px; color:var(--ink-2); line-height:1.5; }
.bpsec .v.empty { color:var(--muted-2); font-style:italic; }
.bpsec.filled .l { color:var(--violet); }
.bp-chips { display:flex; flex-wrap:wrap; gap:5px; }
.bptag { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:var(--pill); background:var(--surface-2); border:1px solid var(--line); font:600 11px/1 var(--display); color:var(--ink-2); }
.bptag .ic { width:11px; height:11px; }

/* produce-mode quiet control (follows the brand default; switch to override) */
.produce-quiet { display:flex; align-items:center; gap:8px; padding:10px 14px; border-top:1px solid var(--line); background:var(--violet-bg); font:600 12px/1 var(--display); color:var(--violet); }
.produce-quiet .ic { width:13px; height:13px; }
.produce-quiet .sw { margin-left:auto; font-weight:700; text-decoration:none; color:var(--violet); border-bottom:1px dashed var(--violet-soft); }

/* compact no-kit nudge (inside brief panel) */
.nokit-mini { display:flex; align-items:center; gap:9px; border:1.5px dashed rgba(224,134,0,.45); background:var(--amber-50); border-radius:10px; padding:9px 11px; font-size:11.5px; color:var(--ink-2); }
.nokit-mini .ic { color:var(--amber); width:15px; height:15px; flex:none; }
.nokit-mini b { color:var(--ink); }

/* no-Higgsfield-connected banner */
.noconnect { display:flex; align-items:center; gap:12px; flex-wrap:wrap; border:1px solid var(--line-strong); border-left:4px solid var(--primary); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--sh-sm); padding:12px 15px; }
.noconnect .nc-ic { width:34px; height:34px; flex:none; border-radius:10px; display:grid; place-items:center; background:rgba(43,45,124,.10); color:var(--primary); font-size:16px; }
.noconnect .nc-t { font:800 13.5px/1.2 var(--display); color:var(--ink); }
.noconnect .nc-d { font-size:12px; color:var(--muted); margin-top:2px; }

/* empty idea-inbox cold start */
.emptyinbox { border:1.5px dashed var(--line-strong); border-radius:var(--r-xl); background:var(--surface-2); padding:34px 22px; text-align:center; margin-top:14px; }
.emptyinbox .ei-ic { width:54px; height:54px; border-radius:16px; display:inline-grid; place-items:center; background:#fff; color:var(--muted-2); box-shadow:var(--sh-sm); font-size:24px; margin-bottom:12px; }
.emptyinbox .ei-t { font:800 16px/1.2 var(--display); color:var(--ink); }
.emptyinbox .ei-d { font-size:12.5px; color:var(--muted); margin:6px auto 0; line-height:1.55; max-width:400px; }

/* auto-create fast-lane button (idea cards) */
.btn.auto { background:linear-gradient(135deg,var(--violet),#9b5cf0); border-color:var(--violet); color:#fff; box-shadow:0 4px 12px -4px rgba(124,58,237,.5); }
.btn.auto:hover { filter:brightness(1.07); border-color:var(--violet); box-shadow:0 6px 16px -5px rgba(124,58,237,.55); }
.btn.auto .ic { color:#fff !important; }

/* mockup state-variant label */
.statetag { display:inline-flex; align-items:center; gap:6px; font:700 9.5px/1 var(--display); letter-spacing:.05em; text-transform:uppercase; color:var(--amber); background:var(--amber-50); border:1px solid rgba(224,134,0,.3); padding:3px 8px; border-radius:var(--pill); }
.statetag.v { color:var(--violet); background:var(--violet-bg); border-color:var(--violet-soft); }