/* The one chat UI (chat.js). Brand tokens only (tokens.css); hosts set the root's size. */
.pbc{--pbc-soft:color-mix(in srgb,var(--c-text) 6%,var(--c-surface));--pbc-mine:color-mix(in srgb,var(--accent) 18%,var(--c-surface));
  container-type:inline-size;height:100%;min-height:0;background:var(--c-bg);color:var(--c-text);font:var(--t-16)/1.5 var(--f-display);overflow:hidden}
.pbc-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr);height:100%;min-height:0}
.pbc [hidden]{display:none!important}
.pbc *{box-sizing:border-box}
.pbc button{font:inherit;cursor:pointer;color:inherit}
.pbc svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* threads */
.pbc-side{display:flex;flex-direction:column;min-height:0;background:var(--c-surface)}
.pbc-new{display:flex;align-items:center;justify-content:center;gap:var(--s2);margin:var(--s4);padding:var(--s3);border:0;border-radius:var(--r-sm);background:var(--btn-bg);color:var(--btn-ink)!important;font-weight:600}
.pbc-threads{flex:1;overflow-y:auto}
.pbc-t{display:grid;grid-template-columns:36px minmax(0,1fr) auto;column-gap:var(--s3);align-items:center;padding:var(--s3) var(--s4);border-left:3px solid transparent;color:inherit;text-decoration:none}
.pbc-t:hover{background:var(--pbc-soft)}
.pbc-t.on{background:var(--pbc-soft);border-left-color:var(--accent)}
.pbc-t b{font-size:var(--t-14);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pbc-t span{grid-column:2/-1;font-size:var(--t-12);color:var(--c-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pbc-av{grid-row:1/3;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:var(--t-12);font-weight:700;background:var(--pbc-mine);color:var(--c-text)}
.pbc-dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.pbc-foot{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border-top:1px solid var(--c-border);font-size:var(--t-12);color:var(--c-muted)}
.pbc-foot a{color:var(--c-muted)}
.pbc-foot:empty{display:none}
.pbc-empty{margin:var(--s6) var(--s4);color:var(--c-muted);font-size:var(--t-14);text-align:center}

/* one thread */
.pbc-main{display:flex;flex-direction:column;min-width:0;min-height:0}
.pbc-head{display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s4);border-bottom:1px solid var(--c-border);background:var(--c-surface)}
.pbc-head h1{margin:0;font-size:var(--t-16);font-weight:650}
.pbc-head p{margin:0;font-size:var(--t-12);color:var(--c-muted)}
.pbc-icon{display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:var(--r-sm);background:none}
.pbc-icon:hover{background:var(--pbc-soft)}
.pbc-msgs{flex:1;overflow-y:auto;padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3)}
.pbc-m{max-width:min(78%,560px);padding:var(--s3) var(--s4);border-radius:var(--r-lg);background:var(--pbc-soft);font-size:var(--t-14);overflow-wrap:anywhere}
.pbc-m small{display:block;font-size:var(--t-12);color:var(--c-muted);margin-bottom:var(--s1)}
.pbc-m.me{align-self:flex-end;background:var(--pbc-mine)}
.pbc-m.step{background:var(--c-surface);border:1px solid var(--c-border);border-top:4px solid var(--accent);box-shadow:0 4px 16px rgb(0 0 0/.08)}
.pbc-m.step.done{border-top-color:var(--c-border);box-shadow:none}
.pbc-step-act{margin-top:var(--s3)}
.pbc-step-act button{padding:var(--s2) var(--s4);border:0;border-radius:var(--r-sm);background:var(--btn-bg);color:var(--btn-ink)!important;font-weight:600}
.pbc-done{font-weight:600;color:var(--accent-ink)}
.pbc-file{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s2);padding:var(--s2) var(--s3);border-radius:var(--r-sm);background:var(--c-surface);border:1px solid var(--c-border);color:inherit;text-decoration:none;font-size:var(--t-12)}
.pbc-typing{margin:0;font-size:var(--t-12);color:var(--c-muted)}

/* composer */
.pbc-comp{margin:0 var(--s4) var(--s4);border:1px solid var(--c-border);border-radius:var(--r-lg);background:var(--c-surface)}
.pbc-comp:focus-within{border-color:var(--accent)}
.pbc-comp textarea,.pbc-title{display:block;width:100%;border:0;resize:none;padding:var(--s3) var(--s4) 0;font:inherit;font-size:var(--t-14);background:none;color:inherit;outline:0;min-height:0}
.pbc-title{padding-bottom:var(--s2);border-bottom:1px solid var(--c-border);font-weight:600}
.pbc-bar{display:flex;align-items:center;gap:var(--s1);padding:var(--s2);flex-wrap:wrap}
.pbc .pbc-tool{display:flex;align-items:center;gap:var(--s1);padding:var(--s2);border:1px solid transparent;border-radius:var(--r-sm);background:none;color:var(--c-muted)!important;font-size:var(--t-12);cursor:pointer}
.pbc-tool:hover{border-color:var(--c-border);color:var(--c-text)!important}
.pbc-more{position:relative}.pbc-more>summary{list-style:none}.pbc-more>summary::-webkit-details-marker{display:none}
.pbc-menu{position:absolute;bottom:calc(100% + var(--s1));left:0;z-index:5;min-width:220px;padding:var(--s1);border:1px solid var(--c-border);border-radius:var(--r-sm);background:var(--c-surface);box-shadow:0 8px 24px rgba(0,0,0,.14)}
.pbc-menu button{display:flex;align-items:center;gap:var(--s2);width:100%;padding:var(--s2);border:0;border-radius:var(--r-sm);background:none;color:var(--c-text);font-size:var(--t-14);text-align:left;cursor:pointer}
.pbc-menu button:hover{background:var(--pbc-soft)}
.pbc .pbc-send{margin-left:auto;display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s4);border:0;border-radius:var(--r-sm);background:var(--btn-bg);color:var(--btn-ink)!important;font-weight:600;font-size:var(--t-14)}
.pbc-send:disabled{opacity:.5}
.pbc-staged{display:flex;flex-wrap:wrap;gap:var(--s2);padding:0 var(--s3)}
.pbc-staged:not(:empty){padding-top:var(--s3)}
.pbc-chip{display:flex;align-items:center;gap:var(--s1);padding:var(--s1) var(--s2);border-radius:var(--r-sm);background:var(--pbc-soft);font-size:var(--t-12)}
.pbc-chip button{border:0;background:none;padding:0 var(--s1)}
.pbc-err{margin:0;padding:0 var(--s4);color:var(--danger);font-size:var(--t-12)}
.pbc-err:empty{display:none}
.pbc-drop{position:absolute;inset:var(--s2);display:grid;place-items:center;border:2px dashed var(--accent);border-radius:var(--r-lg);background:color-mix(in srgb,var(--c-surface) 85%,transparent);font-weight:600;z-index:2}
.pbc-drop[hidden]{display:none}

/* narrow (popup, panel, phone): one view at a time, icon-only tools */
.pbc[data-view=list] .pbc-main,.pbc[data-view=thread] .pbc-side{display:none}
.pbc[data-view=thread] .pbc-side .pbc-foot{display:flex}
@container (max-width:520px){.pbc-tool span{display:none}.pbc-m{max-width:88%}}
/* wide: threads beside the conversation */
@container (min-width:640px){
  .pbc-in{grid-template-columns:280px minmax(0,1fr)}
  .pbc[data-view] .pbc-side,.pbc[data-view] .pbc-main{display:flex}
  .pbc-side{border-right:1px solid var(--c-border)}
  .pbc-back{display:none}
  .pbc-msgs{padding:var(--s6)}
  .pbc-comp{margin:0 var(--s6) var(--s6)}
}

/* screenshot editor (crop and draw before sending) */
.pbc-edit{position:fixed;inset:0;z-index:2147483646;display:flex;flex-direction:column;background:rgb(13 20 34/.92);height:auto}
.pbc-edit-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);padding:var(--s3) var(--s4);background:var(--c-surface);border-bottom:1px solid var(--c-border)}
.pbc-edit-bar button{padding:var(--s2) var(--s3);border:1px solid var(--c-border);border-radius:var(--r-sm);background:none;font-size:var(--t-14)}
.pbc-edit-hint{flex-basis:100%;font-size:var(--t-14);color:var(--c-muted)}
.pbc-edit-bar button.on{border-color:var(--accent);background:var(--pbc-mine)}
.pbc-edit-bar .pbc-sw{width:28px;height:28px;padding:0;border-radius:50%;border:2px solid transparent}
.pbc-edit-bar .pbc-sw.on{border-color:var(--c-text)}
.pbc-edit-sep{width:1px;align-self:stretch;background:var(--c-border)}
.pbc-edit-bar .pbc-send{margin-left:auto}
.pbc-edit-stage{flex:1;min-height:0;display:grid;place-items:center;padding:var(--s4)}
.pbc-edit canvas{max-width:100%;max-height:100%;cursor:crosshair;touch-action:none;box-shadow:0 8px 32px rgb(0 0 0/.4)}
/* cards: checklist, upload, login, do, ask */
.pbc-check{list-style:none;margin:var(--s2) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s1)}
.pbc-check li{display:flex;align-items:center;justify-content:space-between;gap:var(--s2)}
.pbc-check label{display:flex;align-items:center;gap:var(--s2);cursor:pointer}
.pbc-check input{width:18px;height:18px;accent-color:var(--accent)}
.pbc-check li.on span{text-decoration:line-through;color:var(--c-muted)}
.pbc-form{display:flex;flex-direction:column;gap:var(--s3);margin:var(--s2) 0 0}
.pbc-form>label,.pbc-form fieldset{display:flex;flex-direction:column;gap:var(--s1);margin:0;padding:0;border:0;min-width:0}
.pbc-form legend{padding:0;margin-bottom:var(--s1)}.pbc-form span{font-weight:600}
.pbc-form input:not([type]),.pbc-form textarea{width:100%;box-sizing:border-box;padding:var(--s2) var(--s3);border:1px solid var(--c-border);border-radius:var(--r-sm);font:inherit;background:var(--c-surface,transparent);color:inherit}
.pbc-form .pbc-opt{display:flex;align-items:center;gap:var(--s2);cursor:pointer;font-weight:400}.pbc-form .pbc-opt input{width:18px;height:18px;accent-color:var(--accent)}
.pbc-form dt{font-weight:600}.pbc-form dd{margin:0 0 var(--s2)}
.pbc-cardbtn{display:inline-block;margin-top:var(--s2);padding:var(--s2) var(--s4);border:1px solid var(--accent);border-radius:var(--r-sm);color:var(--c-text);cursor:pointer;font-weight:600;background:transparent}
.pbc-ask{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s2)}
.pbc-ask button{padding:var(--s2) var(--s4);border:0;border-radius:var(--r-sm);background:var(--btn-bg);color:var(--btn-ink);font-weight:600}
.pbc-ask button.ghost{background:transparent;border:1px solid var(--c-border);color:var(--c-text)}
.pbc-vid{display:inline-flex;align-items:center;gap:var(--s1);font-size:var(--t-14,14px);color:var(--c-text)}
.pbc-vid svg{width:14px;height:14px;fill:currentColor;stroke:none}
.pbc-note{margin:var(--s2) 0 0;color:var(--c-muted)}
.pbc-m small.pbc-via{display:block;margin:var(--s1) 0 0;opacity:.7}
.pbc-film{width:min(960px,92vw);padding:0;border:0;border-radius:var(--r-lg);background:var(--c-surface);color:var(--c-text);box-shadow:0 24px 64px rgb(0 0 0/.35)}
.pbc-film::backdrop{background:rgb(0 0 0/.6)}
.pbc-film-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s2) var(--s2) var(--s2) var(--s4)}
.pbc-film-head button{font-size:var(--t-20,20px);line-height:1;padding:var(--s1) var(--s3)}
.pbc-film video{display:block;width:100%;background:#000}
ul.pbc-films{list-style:none;margin:0;padding:0}
ul.pbc-films li{margin:0 0 var(--s2)}
/* Something that happened, not something said: small and quiet, so people's messages stay the conversation. */
.pbc-ev{align-self:center;margin:0;font-size:var(--t-12);color:var(--c-muted)}
.pbc-ev span{display:inline-block;padding:2px var(--s2);border:1px solid var(--c-border);border-radius:999px}
.pbc-tasks{list-style:none;margin:var(--s2) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s3)}
.pbc-tasks li{display:flex;flex-direction:column;gap:var(--s1)}.pbc-tasks li.on{color:var(--c-muted)}.pbc-tasks .pbc-ask{margin-top:0}
.pbc-btnlink{display:inline-block;padding:var(--s2) var(--s4);border-radius:var(--r-sm);background:var(--btn-bg);color:var(--btn-ink);font-weight:600;text-decoration:none}
.pbc-proj{margin-top:var(--s2)}.pbc-proj p{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);margin:0 0 var(--s2)}
.pbc-proj a{color:var(--accent-ink);font-weight:600;text-decoration:none}.pbc-proj progress{width:100%;height:6px;accent-color:var(--accent)}
.pbc-tasks li>span:first-child{font-weight:600}.pbc-tasks li.on>span:first-child{font-weight:400}
