/* ============================================================================
   copilot.css — components specific to the Conversational Copilot suite.
   Layers on top of shell.css + engine.css + redesign.css (tokens: --primary
   indigo #2b2d7c, --acc pink #ff2d78, --ink/--muted/--line, --radius, --display).
   ========================================================================== */

/* ---- generic scaffolding ------------------------------------------------- */
.mono { font: 500 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
.kicker { font: 800 11px/1 var(--display); letter-spacing:.10em; text-transform:uppercase;
  color:var(--primary); display:inline-flex; align-items:center; gap:6px; }
.pill-lite { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface); font-size:11.5px; font-weight:700; color:var(--ink-2); }

/* ---- OPTION CARDS (copilot offers choices inline) ------------------------ */
.optcards { display:grid; gap:9px; margin-top:10px; }
.optcards.two { grid-template-columns:1fr 1fr; }
.optcards.three { grid-template-columns:1fr 1fr 1fr; }
.optcard { display:flex; gap:10px; align-items:flex-start; padding:11px 12px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--surface); cursor:pointer; transition:.14s; }
.optcard:hover { border-color:var(--primary); box-shadow:0 3px 10px -5px rgba(43,45,124,.35); }
.optcard.on { border-color:var(--acc); background:var(--acc-light); }
.optcard .oic { flex:none; width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  background:var(--surface-2); color:var(--primary); }
.optcard.on .oic { background:var(--acc-soft); color:var(--acc-700); }
.optcard .oic .ic { width:15px; height:15px; }
.optcard .ot { font-weight:750; font-size:13px; color:var(--ink); }
.optcard .od { font-size:11.5px; color:var(--muted); margin-top:2px; line-height:1.45; }
.optcard .ock { margin-left:auto; align-self:center; color:var(--acc); opacity:0; }
.optcard.on .ock { opacity:1; }

/* ---- INLINE FORM (structured input captured in one flow) ----------------- */
.cform { margin-top:10px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); overflow:hidden; }
.cform-h { display:flex; align-items:center; gap:8px; padding:9px 12px; background:var(--surface-2);
  border-bottom:1px solid var(--line); font-weight:750; font-size:12.5px; color:var(--ink); }
.cform-h .ic { width:14px; height:14px; color:var(--primary); }
.cform-body { padding:12px; display:grid; gap:11px; }
.cfield .cl { display:block; font-size:11px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  color:var(--muted); margin-bottom:5px; }
.cinput, .ctextarea { width:100%; border:1px solid var(--line-strong); border-radius:9px; padding:8px 10px;
  font:500 13px/1.5 inherit; color:var(--ink); background:var(--surface); }
.cinput:focus, .ctextarea:focus { outline:none; border-color:var(--acc); box-shadow:var(--ring); }
.ctextarea { min-height:56px; resize:vertical; }
.cform-foot { display:flex; align-items:center; gap:8px; padding:10px 12px; border-top:1px solid var(--line); background:#fbfbfe; }

/* ---- PLAN CARD (the approval gate) --------------------------------------- */
.plancard { margin-top:11px; border:1.5px solid var(--primary); border-radius:14px; overflow:hidden;
  box-shadow:0 10px 26px -14px rgba(43,45,124,.45); background:var(--surface); }
.plan-h { display:flex; align-items:center; gap:9px; padding:11px 14px; color:#fff;
  background:linear-gradient(100deg, var(--primary), var(--primary-deep)); }
.plan-h .ic { width:16px; height:16px; }
.plan-h .t { font-weight:800; font-size:13.5px; letter-spacing:.01em; }
.plan-h .tag { margin-left:auto; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  background:rgba(255,255,255,.16); padding:3px 8px; border-radius:999px; }
.plan-body { padding:12px 14px; display:grid; gap:9px; }
.planrow { display:flex; gap:10px; align-items:flex-start; }
.planrow .pn { flex:none; width:20px; height:20px; border-radius:6px; background:var(--surface-2);
  color:var(--primary); font:800 11px/20px var(--display); text-align:center; }
.planrow .pt { font-size:12.5px; color:var(--ink); line-height:1.5; }
.planrow .pt b { color:var(--ink); }
.diff { display:inline-flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:3px; }
.diff .was { text-decoration:line-through; color:var(--muted); background:#fff1f3; border:1px solid #ffd9df;
  padding:1px 7px; border-radius:6px; font-size:11.5px; }
.diff .arr { color:var(--muted-2); }
.diff .now { color:var(--success-deep); background:#eafaf0; border:1px solid #bde9cd;
  padding:1px 7px; border-radius:6px; font-size:11.5px; font-weight:650; }
.planimpact { display:flex; gap:8px; align-items:flex-start; padding:9px 11px; border-radius:10px;
  background:var(--amber-50); border:1px solid rgba(224,134,0,.28); font-size:12px; color:#7a4d00; margin-top:2px; }
.planimpact .ic { width:14px; height:14px; color:var(--amber); flex:none; margin-top:1px; }
.plan-acts { display:flex; align-items:center; gap:8px; padding:11px 14px; border-top:1px solid var(--line); background:#fbfbfe; }
.plan-acts .spacer { flex:1; }

/* ---- REMEMBER / LEARNING PROPOSAL ---------------------------------------- */
.remembercard { margin-top:11px; border:1px solid var(--acc-100); border-radius:14px; background:linear-gradient(180deg,#fff,var(--acc-light));
  overflow:hidden; }
.rem-h { display:flex; align-items:center; gap:8px; padding:10px 13px; font-weight:800; font-size:12.5px; color:var(--acc-700); }
.rem-h .ic { width:15px; height:15px; }
.rem-body { padding:0 13px 12px; }
.rulequote { border-left:3px solid var(--acc); padding:6px 11px; background:var(--surface); border-radius:0 8px 8px 0;
  font-size:13px; color:var(--ink); font-weight:600; }
.scopepick { display:flex; flex-wrap:wrap; gap:7px; margin-top:11px; align-items:center; }
.scopepick .lbl { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); margin-right:2px; }
.rem-acts { display:flex; gap:8px; align-items:center; margin-top:12px; }

/* ---- SCOPE CHIPS --------------------------------------------------------- */
.scopechip { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px;
  font-size:11.5px; font-weight:750; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); cursor:pointer; }
.scopechip .ic { width:12px; height:12px; }
.scopechip.on.item   { border-color:var(--muted); background:#f1f2f6; color:var(--ink); }
.scopechip.on.surface{ border-color:var(--primary); background:var(--surface-2); color:var(--primary-deep); }
.scopechip.on.brand  { border-color:var(--acc); background:var(--acc-soft); color:var(--acc-700); }
.scopechip.mini { padding:2px 8px; font-size:10.5px; cursor:default; }

/* ---- MEMORY / LEARNINGS SURFACE ------------------------------------------ */
.mtoolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:14px 0 12px; }
.mlist { border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--surface); }
.mrow { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:13px 15px;
  border-bottom:1px solid var(--line); }
.mrow:last-child { border-bottom:none; }
.mrow:hover { background:#fbfbfe; }
.mrow .mk { flex:none; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:var(--surface-2); color:var(--primary); }
.mrow .mk.style { background:var(--acc-soft); color:var(--acc-700); }
.mrow .mk .ic { width:16px; height:16px; }
.mrow .mrule { font-size:13.5px; font-weight:650; color:var(--ink); line-height:1.4; }
.mrow .mmeta { display:flex; flex-wrap:wrap; gap:7px; margin-top:6px; align-items:center; }
.mrow .msrc { font-size:11px; color:var(--muted); display:inline-flex; align-items:center; gap:4px; }
.mrow .msrc .ic { width:11px; height:11px; }
.mrow .mact { display:flex; gap:6px; align-items:center; }
.reinf { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:750; color:var(--muted);
  border:1px solid var(--line); border-radius:999px; padding:2px 8px; }
.reinf.hot { color:var(--acc-700); border-color:var(--acc-100); background:var(--acc-light); }
.reinf .ic { width:11px; height:11px; }
.statusbadge { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; font-size:11px; font-weight:800; }
.statusbadge.active { color:var(--primary-deep); background:var(--surface-2); }
.statusbadge.graduated { color:var(--success-deep); background:#eafaf0; }
.statusbadge.superseded { color:var(--muted); background:#f1f2f6; text-decoration:line-through; }
.statusbadge .ic { width:11px; height:11px; }

/* ---- GRADUATION CARD ----------------------------------------------------- */
.gradcard { margin-top:11px; border:1.5px solid var(--success); border-radius:14px; background:linear-gradient(180deg,#fff,#f2fcf6); overflow:hidden; }
.grad-h { display:flex; align-items:center; gap:8px; padding:11px 14px; color:#fff; background:linear-gradient(100deg,#16a34a,#15803d); }
.grad-h .ic { width:16px; height:16px; }
.grad-h .t { font-weight:800; font-size:13px; }
.grad-body { padding:13px 14px; }
.gradflow { display:flex; align-items:center; gap:11px; flex-wrap:wrap; }
.gradnode { display:flex; gap:9px; align-items:center; padding:9px 12px; border:1px solid var(--line); border-radius:11px; background:var(--surface); flex:1; min-width:180px; }
.gradnode .ic { width:15px; height:15px; color:var(--primary); flex:none; }
.gradnode .gn-l { font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.gradnode .gn-v { font-size:12.5px; font-weight:650; color:var(--ink); margin-top:1px; }
.gradarr { color:var(--success); flex:none; }

/* ---- DESIGN-CHANGE LADDER ------------------------------------------------ */
.ladder { display:grid; gap:0; margin-top:11px; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--surface); }
.rung { display:flex; gap:12px; align-items:flex-start; padding:13px 15px; border-top:1px solid var(--line); cursor:pointer; transition:.13s; position:relative; }
.rung:first-child { border-top:none; }
.rung:hover { background:#fbfbfe; }
.rung.on { background:var(--acc-light); }
.rung.on::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--acc); }
.rung .rn { flex:none; width:26px; height:26px; border-radius:8px; display:grid; place-items:center;
  background:var(--surface-2); color:var(--primary); font:800 12px/1 var(--display); }
.rung.on .rn { background:var(--acc); color:#fff; }
.rung .ri { flex:none; width:26px; height:26px; display:grid; place-items:center; color:var(--muted); }
.rung .ri .ic { width:16px; height:16px; }
.rung.on .ri { color:var(--acc-700); }
.rung .rbody { flex:1; }
.rung .rt { font-weight:800; font-size:13.5px; color:var(--ink); display:flex; align-items:center; gap:8px; }
.rung .rquote { color:var(--muted); font-weight:600; font-style:italic; font-size:12px; }
.rung .rd { font-size:12px; color:var(--muted); margin-top:3px; line-height:1.5; }
.rung .rtag { margin-left:auto; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  color:var(--muted-2); border:1px solid var(--line); border-radius:999px; padding:2px 8px; }
.rung.on .rtag { color:var(--acc-700); border-color:var(--acc-100); background:var(--surface); }
.ladder-rail { display:flex; align-items:center; gap:7px; margin:2px 0 0 2px; font-size:11.5px; color:var(--muted); }
.ladder-rail .ic { width:13px; height:13px; }

/* ---- INTEROP: package / paste / dropzone --------------------------------- */
.iogrid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:6px; }
@media (max-width:900px){ .iogrid { grid-template-columns:1fr; } }
.iocard { border:1px solid var(--line); border-radius:14px; background:var(--surface); overflow:hidden; }
.iocard-h { display:flex; align-items:center; gap:9px; padding:12px 14px; border-bottom:1px solid var(--line); }
.iocard-h .ic { width:16px; height:16px; color:var(--primary); }
.iocard-h .t { font-weight:800; font-size:13.5px; color:var(--ink); }
.iocard-h .n { font-size:11.5px; color:var(--muted); font-weight:600; }
.iocard-body { padding:14px; }
.pastebox { width:100%; min-height:120px; border:1.5px dashed var(--line-strong); border-radius:11px; background:#fbfbfe;
  padding:11px 13px; font:500 12.5px/1.6 inherit; color:var(--ink-2); resize:vertical; }
.pastebox:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(43,45,124,.14); }
.dropzone { border:1.5px dashed var(--line-strong); border-radius:11px; background:#fbfbfe; padding:22px 14px; text-align:center; }
.dropzone .ic { width:26px; height:26px; color:var(--primary); }
.dropzone .dz-t { font-weight:750; font-size:13px; color:var(--ink); margin-top:7px; }
.dropzone .dz-d { font-size:11.5px; color:var(--muted); margin-top:3px; }
.pkg { border:1px solid var(--line); border-radius:11px; overflow:hidden; }
.pkg-sec { padding:10px 12px; border-top:1px solid var(--line); }
.pkg-sec:first-child { border-top:none; }
.pkg-sec .pl { font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--muted);
  display:flex; align-items:center; gap:6px; }
.pkg-sec .pl .ic { width:12px; height:12px; color:var(--primary); }
.pkg-sec .pv { font-size:12.5px; color:var(--ink-2); margin-top:5px; line-height:1.55; }
.pkg-sec.prompt .pv { font:500 12px/1.6 ui-monospace, Menlo, monospace; color:var(--ink); background:#fbfbfe;
  border:1px solid var(--line); border-radius:8px; padding:9px 11px; }
.pkg-learn { display:flex; gap:7px; flex-wrap:wrap; margin-top:6px; }
.learntag { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:650; color:var(--acc-700);
  background:var(--acc-light); border:1px solid var(--acc-100); border-radius:999px; padding:3px 9px; }
.learntag .ic { width:11px; height:11px; }
.pending { display:flex; gap:9px; align-items:center; padding:11px 13px; border-radius:11px;
  border:1px dashed var(--primary); background:var(--surface-2); margin-top:12px; }
.pending .ic { width:16px; height:16px; color:var(--primary); flex:none; }

/* ---- FRONT-DOOR HOME ----------------------------------------------------- */
.greet { font:800 26px/1.2 var(--display); color:var(--ink); letter-spacing:-.01em; }
.greet .accent { color:var(--acc); }
.frontinput { display:flex; align-items:center; gap:10px; margin-top:16px; padding:14px 16px; border:1.5px solid var(--line-strong);
  border-radius:16px; background:var(--surface); box-shadow:0 10px 30px -18px rgba(43,45,124,.5); }
.frontinput:focus-within { border-color:var(--acc); box-shadow:var(--ring); }
.frontinput .ic-lead { width:20px; height:20px; color:var(--acc); flex:none; }
.frontinput input { flex:1; border:none; outline:none; font:500 15px/1.4 inherit; color:var(--ink); background:transparent; }
.frontinput input::placeholder { color:var(--muted-2); }
.intentrow { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.intentchip { display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:999px; border:1px solid var(--line);
  background:var(--surface); font-size:12.5px; font-weight:650; color:var(--ink-2); cursor:pointer; transition:.13s; }
.intentchip:hover { border-color:var(--acc); color:var(--acc-700); background:var(--acc-light); }
.intentchip .ic { width:14px; height:14px; color:var(--primary); }
.intentchip:hover .ic { color:var(--acc); }
.sectlabel { font:800 11px/1 var(--display); letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
  margin:26px 0 11px; display:flex; align-items:center; gap:8px; }
.sectlabel::after { content:""; flex:1; height:1px; background:var(--line); }
.convlist { display:grid; gap:9px; }
.convrow { display:flex; gap:12px; align-items:center; padding:13px 15px; border:1px solid var(--line); border-radius:13px;
  background:var(--surface); cursor:pointer; transition:.13s; }
.convrow:hover { border-color:var(--primary); box-shadow:0 4px 12px -7px rgba(43,45,124,.4); }
.convrow .cvic { flex:none; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:var(--surface-2); color:var(--primary); }
.convrow .cvic.style { background:var(--acc-soft); color:var(--acc-700); }
.convrow .cvic .ic { width:16px; height:16px; }
.convrow .cv-t { font-weight:700; font-size:13.5px; color:var(--ink); }
.convrow .cv-s { font-size:11.5px; color:var(--muted); margin-top:2px; }
.convrow .cv-time { margin-left:auto; font-size:11px; color:var(--muted-2); white-space:nowrap; }

/* ---- CANVAS PANEL (right side — a live brand-profile section) ------------ */
.canvaspanel { border:1px solid var(--line); border-radius:14px; background:var(--surface); overflow:hidden; }
.cv-h { display:flex; align-items:center; gap:8px; padding:11px 13px; border-bottom:1px solid var(--line); background:var(--surface-2); }
.cv-h .ic { width:15px; height:15px; color:var(--primary); }
.cv-h .t { font-weight:800; font-size:12.5px; color:var(--ink); }
.cv-h .v { margin-left:auto; font-size:10.5px; font-weight:800; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:2px 8px; background:var(--surface); }
.cvsec { padding:11px 13px; border-bottom:1px solid var(--line); }
.cvsec:last-child { border-bottom:none; }
.cvsec .cl { font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.cvsec .cvv { font-size:13px; color:var(--ink); margin-top:4px; line-height:1.5; }
.cvsec.changed { background:linear-gradient(90deg, #fff7fa, #fff); }
.cvsec.changed .cl { color:var(--acc-700); }
.cvsec .cvv .hl { background:var(--acc-soft); border-radius:4px; padding:0 3px; box-decoration-break:clone; }
.updated-flash { display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:800; color:var(--acc-700); margin-left:6px; }
.updated-flash .ic { width:11px; height:11px; }

/* ---- small helpers ------------------------------------------------------- */
.lede { font-size:14px; color:var(--ink-2); line-height:1.6; max-width:680px; }
.t> { color:var(--muted); }
.dim { color:var(--muted); }