/* The account manager (assets/brief.js): question cards and the content plan in the chat, the client's answers in
   their bubble, and the brief board that fills in on the canvas while they talk. Tokens come from app.html. */

/* ---------- question cards ---------- */
.bcard,.pcard{padding:0;overflow:hidden}
/* lists of inputs: one column that may shrink below the inputs' natural width */
.bq-items,.bq-focus,.pc-list,.pp-main,.bq-answers,.bd-plan ol{grid-template-columns:minmax(0,1fr)}
.bq-item,.bq-fr,.pp{min-width:0}
.bc-top{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--line);font-size:12px;font-weight:600;color:var(--stone);background:#FBFBFC}
.bc-top span{color:var(--violet)}
.bc-bar{flex:1;height:5px;border-radius:99px;background:#EEEEF1;overflow:hidden}
.bc-bar b{display:block;height:100%;background:var(--grad);border-radius:99px;transition:width .4s}
.bc-top small{font-size:11px;font-variant-numeric:tabular-nums}
.bq{padding:16px 16px 15px;border-bottom:1px solid var(--line)}
.bq:last-of-type{border-bottom:0}
.bq h5{margin:0 0 2px;font-family:var(--font-ui);font-size:14.5px;font-weight:600;line-height:1.55}
.bq-hint{margin:2px 0 0;font-size:12.5px;color:var(--stone);line-height:1.6}
.bq.shake{animation:bqShake .35s}
@keyframes bqShake{25%{transform:translateX(4px)}75%{transform:translateX(-4px)}}

.bq-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.bq-chips button{min-height:32px;padding:4px 12px;border-radius:99px;border:0;background:var(--soft);font-size:13px;font-weight:500;color:var(--ink);line-height:1.4;transition:background-color var(--t-fast),box-shadow var(--t-fast),color var(--t-fast)}
.bq-chips button:hover{background:var(--soft-2)}
.bq-chips button[aria-pressed="true"]{background:var(--primary-soft);color:var(--primary);box-shadow:inset 0 0 0 1.5px var(--primary)}
.bq-chips button[aria-pressed="true"]::before{content:"✓";margin-inline-end:5px;font-weight:700}
.bq-chips [data-other]{background:transparent;box-shadow:inset 0 0 0 1px var(--sand);color:var(--stone)}
.bq-chips.sm button{min-height:28px;padding:3px 10px;font-size:12.5px}
.bq-in{display:block;width:100%;height:40px;margin-top:12px;border-radius:var(--r-md);border:1px solid var(--sand);background:var(--surface);padding:0 12px;outline:0;font-size:14px;box-shadow:var(--sh-xs);transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.bq-in:focus{border-color:var(--primary);box-shadow:var(--ring);background:var(--surface)}
.bq .row2{margin-top:10px}
.bq .field{margin-bottom:8px}
.bq .field:last-child{margin-bottom:0}

/* name and logo */
.bq-name{display:flex;gap:10px;align-items:center;margin-top:10px}
.bq-name .bq-in{margin:0;flex:1}
.bq-logo{width:52px;height:52px;flex:none;border-radius:14px;border:1.5px dashed var(--primary-line);background:#F9F7FF center/contain no-repeat;display:grid;place-items:center;align-content:center;color:var(--violet);font-size:10.5px;font-weight:600;line-height:1.2}
.bq-logo[style*="background-image"]{border:0;box-shadow:inset 0 0 0 1px var(--line);background-color:#fff;background-origin:content-box;padding:5px}
.bq-logo svg{width:16px;height:16px}
.bq-logo:hover{border-color:var(--violet)}
.bq-sw i{display:inline-block;width:14px;height:14px;border-radius:4px;margin-inline-start:4px;vertical-align:-2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}

/* services and prices */
.bq-items{display:grid;gap:6px;margin-top:10px}
.bq-items:empty{display:none}
.bq-item{display:flex;align-items:center;gap:6px;background:#FAFAFB;border-radius:11px;padding:4px;box-shadow:inset 0 0 0 1px var(--line)}
.bq-item [data-n]{flex:1;min-width:0;height:32px;border:0;border-radius:8px;background:transparent;padding:0 8px;font-size:13.5px;font-weight:500;outline:0}
.bq-item [data-n]:focus{background:#fff;box-shadow:inset 0 0 0 1.5px var(--primary)}
.bq-price{display:flex;align-items:center;gap:4px;width:108px;flex:none;height:32px;border-radius:8px;background:#fff;box-shadow:inset 0 0 0 1px var(--sand);padding:0 8px}
.bq-price input{width:100%;min-width:0;border:0;outline:0;background:transparent;font-size:13px;direction:ltr;text-align:right;font-variant-numeric:tabular-nums}
.bq-price small{font-size:11px;color:var(--stone);flex:none}
.bq-price:focus-within{box-shadow:inset 0 0 0 1.5px var(--primary)}
.bq-x{width:28px;height:28px;flex:none;border:0;border-radius:8px;background:transparent;color:var(--faint);display:grid;place-items:center}
.bq-x:hover{background:var(--bad-soft);color:var(--bad)}
.bq-x svg{width:14px;height:14px}
.bq-addrow{display:flex;gap:6px;margin-top:8px}
.bq-addrow .bq-in{margin:0;flex:1;min-width:0}
.bq-addrow .btn{height:38px;flex:none}
.bq-switch{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13px;font-weight:500;cursor:pointer;width:fit-content}
.bq-switch input{width:16px;height:16px;accent-color:var(--violet);margin:0}

/* the team: a tile per person with their photo */
.bq-team{display:grid;grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:8px;margin-top:10px}
.bq-mem{position:relative;display:grid;justify-items:center;align-content:start;gap:5px;padding:12px 8px 8px;border-radius:14px;background:#FAFAFB;box-shadow:inset 0 0 0 1px var(--line)}
.bq-mem .ph{width:64px;height:64px;border-radius:50%;border:1.5px dashed var(--primary-line);background:#F9F7FF center/cover no-repeat;color:var(--violet);display:grid;place-items:center;margin-bottom:3px}
.bq-mem .ph:hover{border-color:var(--violet)}
.bq-mem .ph[style*="background-image"]{border:0;box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--primary)}
.bq-mem .ph svg{width:22px;height:22px}
.bq-mem input{width:100%;height:30px;border-radius:8px;border:1px solid var(--sand);background:#fff;padding:0 8px;font-size:12.5px;text-align:center;outline:0}
.bq-mem input[data-n]{font-weight:600}
.bq-mem input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(139,61,255,.1)}
.bq-mem .bq-x{position:absolute;top:4px;inset-inline-end:4px;width:24px;height:24px}
.bq-mem.add{border:1.5px dashed var(--sand);background:transparent;box-shadow:none;color:var(--stone);font-size:12.5px;font-weight:600;min-height:146px;align-content:center;cursor:pointer}
.bq-mem.add svg{width:20px;height:20px;color:var(--violet)}
.bq-mem.add:hover{border-color:var(--primary);color:var(--violet)}

/* how many posts and in which sizes */
.bq-sizes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}
.bq-sz{border-radius:12px;background:#FAFAFB;box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column}
.bq-sz.on{background:var(--primary-soft);box-shadow:inset 0 0 0 1.5px var(--primary)}
.bq-sz .pk{border:0;background:none;padding:10px 4px 6px;display:grid;justify-items:center;gap:1px;width:100%}
.bq-sz .pk i{display:block;border-radius:3px;background:linear-gradient(160deg,#ECECEF,#E4E4E8);box-shadow:inset 0 0 0 1.5px #C9C9D0;margin-bottom:4px}
.bq-sz.on .pk i{background:var(--grad);box-shadow:none}
.bq-sz .pk b{font-size:12px;font-weight:600;line-height:1.3;text-align:center}
.bq-sz .pk small{font-size:10.5px;color:var(--stone);direction:ltr}
.bq-sz .bstep{margin:0 6px 7px;display:none}
.bq-sz.on .bstep{display:flex}
.bstep{display:flex;align-items:center;justify-content:space-between;gap:4px;padding:2px;border-radius:9px;background:#fff;box-shadow:0 0 0 1px rgba(114,50,242,.18);min-width:84px;flex:none}
.bstep button{width:24px;height:24px;border-radius:7px;border:0;background:var(--primary-soft);color:var(--primary);font-weight:700;line-height:1;font-size:15px}
.bstep button:hover{background:var(--primary-soft-2)}
.bstep output{font-size:13px;font-weight:700;color:var(--primary);font-variant-numeric:tabular-nums;min-width:16px;text-align:center}
.bq-more{border:0;background:none;color:var(--violet);font-size:12.5px;font-weight:600;padding:8px 2px 0;cursor:pointer}
.bq-sum{margin:10px 0 0;font-size:12.5px;font-weight:600;color:var(--ink);background:var(--primary-soft);border-radius:9px;padding:7px 10px}

/* how the posts are distributed */
.bq-focus{display:grid;gap:3px;max-height:290px;overflow-y:auto;margin:10px -4px 0;padding:0 4px;scrollbar-width:thin}
.bq-fr{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:11px}
.bq-fr.on{background:#F9F7FF}
.bq-fr .nm{flex:1;min-width:0;font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bq-fr:not(.on) .bstep output{color:var(--ghost)}
.bq-fr .th,.pp-th,.bd-plan .th{width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:var(--primary-soft);color:var(--violet)}
.bq-fr .th img,.pp-th img,.bd-plan .th img{width:100%;height:100%;object-fit:cover}
.bq-fr .th b,.pp-th b,.bd-plan .th b{font-family:var(--font-ui);font-size:13px}
.bq-fr .th svg,.pp-th svg,.bd-plan .th svg{width:16px;height:16px}

/* the card's footer */
.bc-err{margin:0 14px 8px;font-size:12.5px;color:var(--bad)}
.bc-foot{display:flex;align-items:center;gap:2px;flex-wrap:wrap;padding:12px 16px 14px;border-top:1px solid var(--line);background:#FBFBFC}
.bc-foot .btn{height:36px;padding:0 20px;margin-inline-end:auto}
.bc-link{border:0;background:none;padding:6px 8px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--stone);cursor:pointer}
.bc-link:hover{background:var(--line);color:var(--ink)}
.bc-link[data-act="plan"]{color:var(--violet)}

/* the client's answers, in their own bubble */
.msg.user .bubble:has(.bq-answers){white-space:normal;padding:10px 14px}
.bq-answers{display:grid;gap:7px;text-align:start}
.bq-ans{display:block;font-size:13.5px;line-height:1.6}
.bq-ans em{display:block;font-style:normal;font-size:11px;font-weight:600;color:var(--stone)}
.bq-ans small{color:var(--stone);font-size:12px}
.bq-mini{width:22px;height:22px;border-radius:6px;object-fit:contain;background:#fff;vertical-align:-6px;margin-inline-end:6px}
.bq-ppl{display:flex;flex-wrap:wrap;gap:6px 12px}
.bq-ppl>span{display:inline-flex;align-items:center;gap:6px}
.bq-ppl img,.bq-ppl b{width:24px;height:24px;border-radius:50%;object-fit:cover;display:inline-grid;place-items:center;background:#fff;font-size:11px}
.bq-contact{display:flex;flex-wrap:wrap;gap:4px 12px}
.bq-contact svg{width:13px;height:13px;color:var(--violet);margin-inline-end:4px;vertical-align:-2px}

/* ---------- the content plan ---------- */
.pc-head{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 8px}
.pc-head b{font-family:var(--font-ui);font-size:15px;font-weight:700}
.pc-n{font-size:12px;font-weight:700;color:var(--violet);background:var(--primary-soft);border-radius:99px;padding:2px 10px}
.pc-brief{display:flex;flex-wrap:wrap;gap:5px;padding:0 14px 12px}
.pc-brief span{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:500;color:var(--ink-3);background:var(--soft);border-radius:99px;padding:3px 9px}
.pc-brief span.ok{color:var(--ok);background:var(--ok-soft)}
.pc-brief svg{width:12px;height:12px}
.pc-list{list-style:none;margin:0;padding:0 8px;display:grid;gap:6px}
.pp{display:flex;align-items:flex-start;gap:8px;padding:8px;border-radius:13px;background:#FAFAFB;box-shadow:inset 0 0 0 1px var(--line);animation:pop .25s ease both}
.pp-n{width:20px;height:20px;flex:none;margin-top:6px;border-radius:50%;background:var(--ink);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center}
.pp-main{flex:1;min-width:0;display:grid;gap:5px}
.pp-topic{display:block;width:100%;min-height:32px;border:1px solid transparent;border-radius:8px;background:transparent;padding:4px 6px;font:600 13.5px/1.55 var(--font-ui);color:inherit;outline:0;resize:none;field-sizing:content}
.pp-topic:hover{border-color:var(--sand);background:#fff}
.pp-topic:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px rgba(139,61,255,.1)}
.pp-meta{display:flex;gap:5px;flex-wrap:wrap;padding-inline-start:4px}
.pp-meta select{height:28px;max-width:100%;border:0;border-radius:8px;background:#fff;box-shadow:inset 0 0 0 1px var(--sand);padding:0 6px;font-size:12px;font-weight:500;color:var(--ink-2);cursor:pointer}
.pp-meta select:first-child{flex:1;min-width:0}
.pp-x{width:26px;height:26px;flex:none;border:0;border-radius:8px;background:transparent;color:var(--faint);display:grid;place-items:center;margin-top:3px}
.pp-x:hover{background:var(--bad-soft);color:var(--bad)}
.pp-x svg{width:14px;height:14px}
.pc-add{display:flex;align-items:center;justify-content:center;gap:6px;width:calc(100% - 16px);margin:6px 8px 0;height:36px;border-radius:12px;border:1.5px dashed var(--sand);background:transparent;font-size:13px;font-weight:600;color:var(--stone)}
.pc-add:hover{border-color:var(--primary);color:var(--violet)}
.pc-add svg{width:15px;height:15px}
.pc-opts{padding:12px 14px 0;display:grid;gap:8px}
.pc-opts:empty{display:none}
.pc-row{display:flex;align-items:center;gap:8px;font-size:13px;flex-wrap:wrap}
.pc-row>span{color:var(--stone);min-width:52px}
.pc-row .seg{margin:0}
.pc-row small{color:var(--stone)}
.pc-note{margin:0;font-size:12.5px;color:var(--stone);background:var(--app);border-radius:10px;padding:8px 10px;line-height:1.6}
.pc-go{display:flex;width:calc(100% - 28px);margin:12px 14px 0;height:44px;font-size:14.5px;border-radius:var(--r-lg)}
.pc-go:disabled{opacity:.4;cursor:default}
.pc-edit{display:flex;flex-wrap:wrap;align-items:center;gap:5px;padding:10px 14px 14px;font-size:12px;color:var(--stone)}
.pc-edit button{height:26px;padding:0 9px;border-radius:99px;border:0;background:var(--soft);font-size:12px;font-weight:500;color:var(--ink-2)}
.pc-edit button:hover{background:var(--soft-2)}

/* ---------- the brief board on the canvas ---------- */
.board{max-width:620px;margin:6px auto 0;animation:pop .35s ease both}
.bd{background:var(--surface);border-radius:var(--r-2xl);padding:22px 22px 16px;box-shadow:0 0 0 1px var(--line),var(--sh-lg)}
.bd-head{display:flex;align-items:center;gap:12px}
.bd-logo{width:52px;height:52px;flex:none;border-radius:15px;background:var(--primary-soft) center/contain no-repeat;background-origin:content-box;padding:4px;display:grid;place-items:center;font-family:var(--font-ui);font-weight:800;font-size:20px;color:var(--violet);box-shadow:inset 0 0 0 1px rgba(139,61,255,.18)}
.bd-t{flex:1;min-width:0}
.bd-t b{display:block;font-family:var(--font-ui);font-size:18px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-t small{font-size:12.5px;color:var(--stone)}
.bd-pct{font-family:var(--font-ui);font-weight:800;font-size:15px;color:var(--violet);font-variant-numeric:tabular-nums}
.bd-bar{height:6px;border-radius:99px;background:#EEEEF1;overflow:hidden;margin:14px 0 4px}
.bd-bar i{display:block;height:100%;background:var(--grad);border-radius:99px;transition:width .5s}
.bd-list{margin:0;display:grid}
.bd-row{display:grid;grid-template-columns:100px 1fr;gap:12px;padding:12px 0;border-top:1px solid #F2F2F4;align-items:start}
.bd-row:first-child{border-top:0}
.bd-row dt{font-size:12.5px;font-weight:600;color:var(--stone);padding-top:3px}
.bd-row dd{margin:0;display:flex;flex-wrap:wrap;gap:6px;font-size:13.5px;min-width:0}
.bd-row.empty dd span{color:var(--ghost);font-size:12.5px}
.bd-chip{display:inline-flex;align-items:center;gap:6px;background:var(--primary-soft);color:var(--primary-ink);border-radius:99px;padding:3px 10px;font-size:12.5px;font-weight:500}
.bd-chip small{font-size:11px;color:var(--violet);font-weight:700}
.bd-person{display:inline-flex;align-items:center;gap:8px;background:#FAFAFB;border-radius:99px;padding:3px 3px 3px 12px;box-shadow:inset 0 0 0 1px var(--line)}
.bd-person img,.bd-person>b{width:30px;height:30px;border-radius:50%;object-fit:cover;display:grid;place-items:center;background:var(--primary-soft);color:var(--violet);font-size:12px;flex:none}
.bd-person span{display:grid;line-height:1.3}
.bd-person span b{font-size:12.5px}
.bd-person span small{font-size:11px;color:var(--stone)}
.bd-c{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;margin-inline-end:6px}
.bd-c svg{width:14px;height:14px;color:var(--violet);flex:none}
.bd-plan{margin-top:2px;padding-top:12px;border-top:1px solid #F2F2F4}
.bd-plan h6{margin:0 0 8px;font-size:12.5px;font-weight:700}
.bd-plan ol{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.bd-plan li{display:flex;align-items:center;gap:10px;font-size:13px;padding:6px 8px;border-radius:11px;background:#FAFAFB}
.bd-plan li>span:nth-child(2){flex:1;min-width:0}
.bd-plan li small{font-size:11px;color:var(--stone);white-space:nowrap}

@media (max-width:900px){
  .bq-sizes{grid-template-columns:repeat(2,1fr)}
  .bd-row{grid-template-columns:82px 1fr}
}
/* the brief's logo after the one-time check (app.js checkBriefLogo): shown on a checkerboard so its transparency shows */
.bubble img.logo-fixed{display:block;width:128px;height:128px;margin:10px 0 2px;padding:8px;border-radius:12px;object-fit:contain;
  background:repeating-conic-gradient(#ececf1 0 25%,#fff 0 50%) 0 0/14px 14px;border:1px solid rgba(0,0,0,.06)}