/* ============================================================================
   agent.css — components for the Brand AGENT suite. Layers on shell.css +
   engine.css + redesign.css + copilot.css (reuses .convrow/.remembercard/
   .plancard/.scopechip/.mlist/.frontinput/.intentchip/.canvaspanel/.optcard/
   .gradcard/.kicker/.lede/.sectlabel/.annot). Tokens: --primary indigo #2b2d7c,
   --acc pink #ff2d78, --ink/--muted/--line, --radius, --display.
   ========================================================================== */

/* ---- persona in nav + topbar -------------------------------------------- */
.freedot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--acc); margin-left:5px; vertical-align:middle; }
.agentchip { display:inline-flex; align-items:center; gap:7px; padding:4px 10px 4px 5px; border-radius:999px; border:1px solid var(--line);
  background:var(--surface); font-size:12px; font-weight:750; color:var(--ink); }
.agentav { width:22px; height:22px; border-radius:50%; background:linear-gradient(135deg, var(--primary), var(--acc)); box-shadow:0 0 0 2px #fff, 0 2px 6px -2px rgba(255,45,120,.5); }

/* ---- agent hero / presence ---------------------------------------------- */
.agenthero { display:flex; gap:15px; align-items:flex-start; padding:18px 20px; border-radius:18px;
  background:linear-gradient(120deg, var(--primary-deep), var(--primary)); color:#fff; position:relative; overflow:hidden; }
.agenthero::after { content:""; position:absolute; right:-40px; top:-40px; width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,45,120,.55), transparent 70%); }
.agenthero .ah-av { flex:none; width:52px; height:52px; border-radius:16px; background:linear-gradient(135deg, #fff3, #fff1);
  border:1px solid rgba(255,255,255,.35); display:grid; place-items:center; position:relative; z-index:1; }
.agenthero .ah-av .ic { width:26px; height:26px; color:#fff; }
.agenthero .ah-b { position:relative; z-index:1; flex:1; }
.agenthero .ah-hi { font:800 20px/1.25 var(--display); letter-spacing:-.01em; }
.agenthero .ah-sub { font-size:13.5px; color:rgba(255,255,255,.85); margin-top:4px; line-height:1.5; max-width:560px; }
.agenthero .ah-meta { display:flex; gap:8px; flex-wrap:wrap; margin-top:11px; }
.ah-pill { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; color:#fff;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:4px 10px; }
.ah-pill .ic { width:12px; height:12px; }

/* ---- PROACTIVE LANE ------------------------------------------------------ */
.prolane { display:grid; gap:9px; margin-top:12px; }
.prolane.two { grid-template-columns:1fr 1fr; }
.procard { display:flex; gap:11px; align-items:flex-start; padding:12px 13px; border:1px solid var(--line); border-radius:13px; background:var(--surface); transition:.13s; }
.procard:hover { border-color:var(--primary); box-shadow:0 4px 12px -7px rgba(43,45,124,.4); }
.procard .pk { flex:none; width:32px; height:32px; border-radius:10px; display:grid; place-items:center; }
.procard .pk .ic { width:16px; height:16px; }
.procard.suggest .pk { background:var(--surface-2); color:var(--primary); }
.procard.gap .pk { background:var(--amber-50); color:var(--amber); }
.procard.followup .pk { background:var(--acc-light); color:var(--acc-700); }
.procard .pb { flex:1; }
.procard .pt { font-weight:750; font-size:13px; color:var(--ink); }
.procard .pd { font-size:11.5px; color:var(--muted); margin-top:3px; line-height:1.5; }
.procard .pa { display:flex; gap:7px; align-items:center; margin-top:9px; }
.protag { font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:2px 7px; border-radius:999px; }
.protag.suggest { color:var(--primary); background:var(--surface-2); }
.protag.gap { color:#7a4d00; background:var(--amber-50); }
.protag.followup { color:var(--acc-700); background:var(--acc-light); }

/* ---- AREAS --------------------------------------------------------------- */
.arealist { display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-top:12px; }
@media (max-width:900px){ .arealist { grid-template-columns:1fr; } }
.areacard { border:1px solid var(--line); border-radius:14px; background:var(--surface); padding:14px 15px; cursor:pointer; transition:.13s; }
.areacard:hover { border-color:var(--primary); box-shadow:0 5px 14px -8px rgba(43,45,124,.42); }
.areacard.on { border-color:var(--acc); box-shadow:0 5px 16px -8px rgba(255,45,120,.4); }
.area-h { display:flex; align-items:center; gap:10px; }
.area-ic { flex:none; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:var(--surface-2); color:var(--primary); }
.areacard.free .area-ic { background:var(--acc-soft); color:var(--acc-700); }
.area-ic .ic { width:16px; height:16px; }
.area-t { font-weight:800; font-size:14px; color:var(--ink); }
.area-kind { margin-left:auto; font-size:9.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:2px 8px; border-radius:999px; border:1px solid var(--line); color:var(--muted); }
.areacard.free .area-kind { color:var(--acc-700); border-color:var(--acc-100); background:var(--acc-light); }
.area-digest { font-size:12px; color:var(--ink-2); line-height:1.5; margin-top:9px; border-left:3px solid var(--line-strong); padding-left:10px; }
.area-meta { display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; font-size:11px; color:var(--muted); }
.area-meta .m { display:inline-flex; align-items:center; gap:5px; }
.area-meta .ic { width:12px; height:12px; }

/* ---- KNOWLEDGE BASE ------------------------------------------------------ */
.kbtabs { display:flex; gap:7px; flex-wrap:wrap; margin:14px 0 12px; }
.kbtab { display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:999px; border:1px solid var(--line);
  background:var(--surface); font-size:12.5px; font-weight:700; color:var(--ink-2); cursor:pointer; }
.kbtab.on { border-color:var(--primary); background:var(--surface-2); color:var(--primary-deep); }
.kbtab .ic { width:13px; height:13px; }
.kbgrid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:900px){ .kbgrid { grid-template-columns:1fr; } }
.kbcard { border:1px solid var(--line); border-radius:14px; background:var(--surface); overflow:hidden; }
.kb-h { display:flex; align-items:center; gap:9px; padding:11px 13px; border-bottom:1px solid var(--line); background:#fbfbfe; }
.kb-ty { flex:none; width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:var(--surface-2); color:var(--primary); }
.kb-ty .ic { width:15px; height:15px; }
.kb-t { font-weight:800; font-size:13.5px; color:var(--ink); }
.kb-tag { margin-left:auto; font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:2px 8px; }
.kb-body { padding:11px 13px; display:grid; gap:8px; }
.kb-field { display:flex; gap:10px; font-size:12.5px; }
.kb-field .kf-l { flex:none; width:92px; color:var(--muted); font-weight:700; }
.kb-field .kf-v { color:var(--ink); }
.kb-prov { display:flex; align-items:center; gap:6px; padding:8px 13px; border-top:1px solid var(--line); font-size:10.5px; color:var(--muted); }
.kb-prov .ic { width:11px; height:11px; }
.kb-prov .conf { margin-left:auto; display:inline-flex; align-items:center; gap:4px; font-weight:750; color:var(--success-deep); }

/* ---- MEMORY HOME STATS --------------------------------------------------- */
.memstats { display:grid; grid-template-columns:repeat(4,1fr); gap:11px; margin-top:12px; }
@media (max-width:760px){ .memstats { grid-template-columns:1fr 1fr; } }
.memstat { border:1px solid var(--line); border-radius:13px; background:var(--surface); padding:13px 14px; }
.memstat .ms-n { font:800 24px/1 var(--display); color:var(--primary-deep); }
.memstat .ms-l { font-size:11.5px; color:var(--muted); margin-top:5px; font-weight:600; }
.memstat .ms-ic { float:right; width:26px; height:26px; border-radius:8px; display:grid; place-items:center; background:var(--surface-2); color:var(--primary); }
.memstat .ms-ic .ic { width:14px; height:14px; }

/* ---- ONBOARDING ---------------------------------------------------------- */
.obsteps { display:grid; gap:12px; margin-top:14px; }
.obstep { display:flex; gap:13px; align-items:flex-start; padding:15px 16px; border:1px solid var(--line); border-radius:15px; background:var(--surface); }
.obstep.on { border-color:var(--acc); box-shadow:0 6px 18px -10px rgba(255,45,120,.4); }
.obstep.done { background:#fbfefc; }
.ob-n { flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font:800 13px/1 var(--display); background:var(--surface-2); color:var(--primary); }
.obstep.on .ob-n { background:var(--acc); color:#fff; }
.obstep.done .ob-n { background:var(--success); color:#fff; }
.ob-b { flex:1; }
.ob-t { font-weight:800; font-size:14.5px; color:var(--ink); }
.ob-d { font-size:12.5px; color:var(--muted); margin-top:3px; line-height:1.5; }
.obconnect { display:flex; gap:9px; flex-wrap:wrap; margin-top:11px; }
.obinput { flex:1; min-width:220px; display:flex; align-items:center; gap:8px; padding:9px 12px; border:1.5px solid var(--line-strong); border-radius:11px; background:#fbfbfe; }
.obinput .ic { width:15px; height:15px; color:var(--muted); }
.obinput input { flex:1; border:none; outline:none; background:transparent; font:500 13px/1.4 inherit; color:var(--ink); }
.obfound { display:grid; gap:7px; margin-top:11px; }
.obfound .of-row { display:flex; align-items:center; gap:9px; padding:9px 11px; border:1px solid var(--line); border-radius:10px; background:#fbfefc; font-size:12.5px; }
.obfound .of-row .ic { width:14px; height:14px; color:var(--success); flex:none; }
.obfound .of-row b { color:var(--ink); }
.obfound .of-row .cnt { margin-left:auto; font-size:11px; font-weight:750; color:var(--muted); }

/* ---- settings rows ------------------------------------------------------- */
.setgroup { border:1px solid var(--line); border-radius:14px; background:var(--surface); overflow:hidden; margin-top:12px; }
.setgroup-h { padding:11px 15px; background:var(--surface-2); border-bottom:1px solid var(--line); font-weight:800; font-size:12.5px; color:var(--ink); display:flex; align-items:center; gap:8px; }
.setgroup-h .ic { width:14px; height:14px; color:var(--primary); }
.setrow { display:flex; gap:14px; align-items:center; padding:14px 15px; border-bottom:1px solid var(--line); }
.setrow:last-child { border-bottom:none; }
.setrow .sr-b { flex:1; }
.setrow .sr-t { font-weight:750; font-size:13.5px; color:var(--ink); }
.setrow .sr-d { font-size:12px; color:var(--muted); margin-top:2px; line-height:1.5; }
.seg2 { display:inline-flex; border:1px solid var(--line-strong); border-radius:10px; overflow:hidden; }
.seg2 button { border:none; background:var(--surface); font:700 12px/1 inherit; color:var(--muted); padding:8px 12px; cursor:pointer; border-right:1px solid var(--line); }
.seg2 button:last-child { border-right:none; }
.seg2 button.on { background:var(--acc); color:#fff; }
.toggle { width:42px; height:24px; border-radius:999px; background:var(--line-strong); position:relative; cursor:pointer; flex:none; }
.toggle.on { background:var(--acc); }
.toggle::after { content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; transition:.15s; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.toggle.on::after { left:20px; }

/* ---- small helpers ------------------------------------------------------- */
.lede { font-size:14px; color:var(--ink-2); line-height:1.6; max-width:680px; }
.dim { color:var(--muted); }
.mono { font: 500 12.5px/1.55 ui-monospace, Menlo, monospace; }
.pagehead { display:flex; align-items:flex-start; gap:12px; }
.pagehead .spacer { flex:1; }