/* ---------- Teammate module (#627, #779): the styles moved out of the Inbox page ----------
     These rules moved verbatim from `src/inbox/app.html` into this file (#779). They are the
     Teammate module's own panel, screens, held-item, composer, context-column and quick-ask styles.
     The shared canvas `.pp-ph`/`.ctx`/`.ctxcol`/`.dk` rules and the shell's responsive layout for
     the docked panel (the `@media (max-width:820px)` `.tm-dock`/`.tm-open` block) stay in the shell.
     No rule here has a selector that starts with the document-root pseudo-class, so none had to stay
     behind for the inline token block (#778 lesson). The module stylesheet loads before the inline
     <style>, so the inline shell rules still win. */
  /* ============================== Teammate panel ============================== */
  .tm-dock{background:var(--canvas);position:relative;min-width:0;min-height:0;overflow:hidden;display:flex;flex-direction:column}
  .tm-dock[hidden]{display:none}
  /* The Teammate dock header is the canvas compact-panel header (.pp-ph, #574): a serif section
     title, then the expand and close icon buttons. No spark icon and no text button. */
  .pp-ph{display:flex;align-items:center;gap:4px;padding:14px 10px 4px 16px;flex:none}
  .pp-ph .t-sec{flex:1}
  .tm-body{flex:1;min-height:0;overflow-y:auto;padding:0}
  /* The thread named as the subject of a Teammate question, shown when Ask Teammate is opened from
     a thread reader (#260). */
  .tm-context{display:flex;flex-direction:column;gap:2px;margin:4px 0 12px;padding:10px 12px;border-radius:var(--r-md);background:var(--ai-bg);border:1px solid var(--ai-line)}
  .tm-context b{color:var(--ink)}

  /* ============================== Teammate screens (#563) ==============================
     Ported one to one from the design canvas (ModTeammate, row "Teammate"; people.css `pp-` set).
     The full module is a self-contained canvas frame (`#teammateStage` > `.tm-frame`): its own
     conversations context column and its own stage, so the shell's Mail rail stays folded for
     Teammate (adr/0063 decision 11) and the frame matches the canvas. The docked panel reuses the
     same `.pp-` stage in its compact form (`.pp-panel`). Every colour resolves through a token, so
     light and dark both render. */
  /* The stage pane in the shell's second track, shown in place of the Mail list pane on Teammate. */
  #teammateStage{grid-column:2;grid-row:1;position:relative;min-width:0;min-height:0;overflow:hidden;background:var(--canvas)}
  #teammateStage[hidden]{display:none}
  /* The canvas module frame (.mw): the conversations context column, then the stage. One track at
     ≤820px, where the context column folds away and the conversation fills the stage. */
  .tm-frame{position:absolute;inset:0;display:grid;grid-template-columns:var(--ctx-w) minmax(0,1fr);gap:1px;background:var(--line)}
  .tm-frame > .ctx{background:var(--rail)}
  .tm-mstage{position:relative;background:var(--canvas);min-width:0;min-height:0;overflow:hidden}
  @media (max-width:820px){ .tm-frame{grid-template-columns:minmax(0,1fr)} .tm-frame > .ctx{display:none} }

  .pp-stage{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--canvas)}
  .pp-scroll{flex:1;overflow-y:auto;min-height:0}
  .pp-col{max-width:740px;margin:0 auto;padding:10px 22px 28px;display:flex;flex-direction:column;gap:18px}
  .pp-panel .pp-col{padding:8px 16px 20px;gap:14px}
  .pp-greet{display:flex;flex-direction:column;gap:8px;padding-top:28px}
  .pp-q{align-self:flex-end;max-width:82%;padding:10px 14px;border-radius:16px;border-bottom-right-radius:6px;background:var(--sel-2);font-size:14px;line-height:1.5;color:var(--ink)}
  .pp-a{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px}
  .pp-sp{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:var(--ai-ink);flex:none}
  .pp-sp .ico{width:14px;height:14px}
  .pp-ab{font-size:14px;line-height:1.6;color:var(--ink);min-width:0;display:flex;flex-direction:column;gap:10px}
  .pp-ab p{margin:0}
  .pp-ab ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
  .pp-srcs{display:flex;flex-wrap:wrap;gap:4px 14px}
  .pp-src{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2);padding:2px 0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;transition:color .16s,text-decoration-color .16s}
  .pp-src:hover{color:var(--ink);text-decoration-color:currentColor}
  .pp-src .ico{width:13px;height:13px;color:var(--ink-3)}
  .pp-choices{display:flex;flex-wrap:wrap;gap:8px}
  /* streamed steps */
  .pp-steps{display:flex;flex-direction:column;gap:6px}
  .pp-steps-h{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;padding:2px 0;font-size:12.5px;color:var(--ink-3);font-weight:600}
  .pp-steps-h .cx{color:var(--ink-3)}
  .pp-steps ul{list-style:none;margin:0;padding:2px 0 0;display:flex;flex-direction:column;gap:7px}
  .pp-step{display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:10px;align-items:center;font-size:12.5px;color:var(--ink-2)}
  .pp-step .ico{width:15px;height:15px}
  .pp-step.done .ico{color:var(--brand)}
  .pp-step.wait{color:var(--ink-3)}
  .pp-step.run{color:var(--ink);font-weight:600}
  .pp-step .w{font-size:12px;color:var(--ink-3);font-weight:400}
  /* The "Step N of M" counter beside the working header, and the plan / plan-change label row. */
  .pp-steps-n{margin-left:6px;font-weight:400;color:var(--ink-3)}
  .pp-step.pp-plan{grid-template-columns:1fr;gap:0;color:var(--ink-3);font-weight:600;font-size:12px}
  .pp-ring{width:14px;height:14px;border-radius:50%;border:1.6px solid var(--ink-faint)}
  .pp-spin{width:14px;height:14px;border-radius:50%;border:1.8px solid var(--sel-2);border-top-color:var(--ink);animation:ppspin .9s linear infinite}
  @keyframes ppspin{to{transform:rotate(360deg)}}
  .think{display:flex;flex-direction:column;gap:7px;padding-top:6px}
  .think i{display:block;height:10px;border-radius:4px;background:var(--sel-2);position:relative;overflow:hidden}
  .think i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--canvas) 60%,transparent),transparent);animation:skel-shimmer 1.2s ease-in-out infinite}
  /* held items: soft raised surface, no outline (owner review 5 October 2026) */
  .pp-held{align-self:stretch;border-radius:var(--r-lg);background:var(--raised);overflow:hidden}
  .pp-held-h{display:flex;align-items:center;gap:8px;padding:12px 15px 0}
  .pp-held-h b{flex:1;font-size:12.5px;font-weight:600;color:var(--ink-2)}
  .pp-hp{font-size:12px;font-weight:500;color:var(--ai-ink)}
  .pp-held-b{padding:8px 15px 12px;font-size:14px;line-height:1.55;color:var(--ink);white-space:pre-wrap}
  /* the subject line of a new-thread chase, above the body (#785): a muted label over its value in
     read mode, and label over the subject input in edit mode */
  .pp-held-sub{padding:8px 15px 0;display:flex;flex-direction:column;gap:3px;font-size:14px;color:var(--ink)}
  .pp-held-sub .t-sub{font-size:12px}
  .pp-held-f{display:flex;align-items:center;gap:8px;padding:0 15px 14px;flex-wrap:wrap}
  .pp-held-edit{padding:4px 15px 12px}
  .pp-held-edit textarea{min-height:120px}
  .pp-held-edit.pp-held-sub{padding-top:8px;padding-bottom:4px}
  .pp-qr{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
  .pp-kv{display:flex;flex-direction:column;gap:6px;padding:10px 15px 14px;font-size:13.5px;color:var(--ink)}
  .pp-kv div{display:grid;grid-template-columns:16px minmax(0,1fr);gap:10px;align-items:center}
  .pp-kv .ico{width:15px;height:15px;color:var(--ink-3)}
  .pp-done{display:flex;align-items:center;gap:8px;padding:0 15px 14px;font-size:12.5px;color:var(--ink-2);flex-wrap:wrap}
  .pp-done .ico{width:15px;height:15px;color:var(--brand)}
  .pp-err{display:flex;align-items:center;gap:8px;padding:0 15px 14px;font-size:12.5px;color:var(--danger)}
  /* A neutral notice (not an error): a dropped ask connection the operator can retry, shown inside
     the conversation column. Uses a muted ink colour, never the danger colour. */
  .pp-note{display:flex;align-items:center;gap:8px;padding:0 15px 14px;font-size:12.5px;color:var(--ink-2)}
  /* A recovery note whose bold lead must sit on its own line above the body, so the lead never wraps
     beside the text ("Sending did" / "not finish."). Stacks the lead above the body on the module
     card and the thread card. */
  .pp-note-lead{flex-direction:column;align-items:flex-start;gap:2px}
  /* The held-back disclosure labels under a held draft (acceptance criterion 4 of #1220): the kinds
     of detail the teammate left out, each on its own line. Named only — never a value (adr/0007). */
  .pp-withheld{margin:4px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:2px}
  .pp-withheld li{list-style:disc}
  /* brief cards on the home screen */
  .pp-brief{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .pp-bcard{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--canvas);text-align:left;transition:background .16s,transform .14s var(--ease)}
  .pp-bcard:hover{background:var(--sel)}
  .pp-bcard:active{transform:scale(.985)}
  .pp-bcard .go{margin-top:auto;padding-top:6px;font-size:12.5px;color:var(--ink-2);font-weight:500}
  .pp-can{display:flex;flex-direction:column;gap:10px}
  .pp-can ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
  .pp-can li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;font-size:13.5px;color:var(--ink-2)}
  .pp-can li .ico{color:var(--ink-3);margin-top:1px}
  /* composer */
  .pp-foot{flex:none;padding:10px 22px 22px}
  .pp-panel .pp-foot{padding:10px 16px 16px}
  .pp-foot-in{max-width:740px;margin:0 auto;display:flex;flex-direction:column;gap:8px}
  .pp-sugs{display:flex;gap:6px;flex-wrap:wrap}
  .pp-sug{font-size:12.5px;color:var(--ink-2);padding:5px 11px;border-radius:999px;border:1px solid var(--line);background:var(--canvas);transition:background .16s}
  .pp-sug:hover{background:var(--sel);color:var(--ink)}
  .pp-comp{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--canvas);padding:10px 10px 8px 14px;transition:border-color .18s,box-shadow .18s}
  .pp-comp:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 20%,transparent)}
  .pp-comp textarea{width:100%;border:0;outline:none;resize:none;background:none;font-size:14px;line-height:1.5;min-height:44px;padding:2px 0;color:var(--ink)}
  .pp-comp textarea::placeholder{color:var(--ink-3)}
  .pp-bar{display:flex;align-items:center;gap:8px}
  .pp-bar .hint{margin-left:auto;font-size:12px;color:var(--ink-3);white-space:nowrap}
  .pp-ctxchip{display:inline-block;min-width:0;flex:0 1 auto;font-size:12px;font-weight:500;color:var(--ai-ink);background:var(--ai-bg);border-radius:999px;padding:3px 10px;white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis}
  .pp-panel .pp-ctxchip{max-width:124px}
  /* The chip with a context (#1121): the counterparty and the subject, cut short with an ellipsis,
     then the remove control. The chip does not clip, so the focus ring of the control shows. */
  .pp-ctxchip.has-ctx{display:inline-flex;align-items:center;gap:2px;padding:1px 2px 1px 10px;overflow:visible}
  .pp-ctxchip .pp-ctxl{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .pp-ctxx{flex:none;display:grid;place-items:center;width:22px;height:22px;padding:0;border:0;border-radius:999px;background:none;color:var(--ai-ink);cursor:pointer}
  .pp-ctxx:hover{background:var(--ai-line)}
  .pp-ctxx:focus-visible{outline-offset:0}
  .pp-bar > button{flex:none}
  .pp-mic{position:relative;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:var(--ink-3)}
  .pp-mic .soon{position:absolute;top:-8px;right:-14px;font-size:8.5px;padding:0 4px}
  .pp-stop{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:9px;border:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--ink-2);background:var(--canvas);transition:background .16s}
  .pp-stop:hover{background:var(--sel)}
  /* The pending state while the stop is in flight: dimmed and not clickable, so the operator sees
     their Stop registered and does not click it again. */
  .pp-stop[disabled]{opacity:.55;cursor:default}
  .pp-stop[disabled]:hover{background:var(--canvas)}
  .pp-stop i{width:9px;height:9px;border-radius:2px;background:var(--ink)}
  /* The Stop control sits under the working steps, left-aligned on its own row. */
  .pp-stoprow{display:flex}
  /* The partial-answer notice: the shared warn banner, flush inside the answer body. */
  .pp-partial{margin:0}
  .pp-send{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--ink);color:var(--canvas);transition:filter .16s}
  .pp-send:hover{filter:brightness(1.1)}
  .pp-send:disabled{opacity:.4;cursor:not-allowed}
  /* context column: working-on-now and conversation list */
  .pp-work{display:flex;flex-direction:column;gap:6px;margin:4px 0 0;padding:11px 12px;border-radius:var(--r-lg);background:var(--raised);text-align:left;width:100%;transition:background .16s}
  .pp-work:hover{background:var(--sel)}
  .pp-work .ln{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2)}
  .pp-conv{display:flex;flex-direction:column;gap:4px;width:100%;padding:8px 10px;border-radius:8px;text-align:left;transition:background .16s}
  .pp-conv:hover{background:var(--sel)}
  .pp-conv.on{background:var(--sel-2)}
  .pp-conv .tt{font-size:13.5px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pp-conv.hot .tt{font-weight:600}
  /* the conversation preview, one muted line from the first operator turn (#652) */
  .pp-conv .pp-prev{font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pp-conv .mt{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-3)}
  .pp-st{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--ink-2)}
  .pp-st .ico{width:12px;height:12px}
  .pp-st .pp-spin{width:11px;height:11px;border-width:1.5px}
  .pp-st.ai .ico{color:var(--ai-ink)}
  .pp-st.warn{color:var(--warn)}
  .pp-st.ok .ico{color:var(--brand)}
  .pp-st.mute{color:var(--ink-3)}
  .pp-ctx-empty{padding:6px 10px;font-size:12.5px;color:var(--ink-3)}
  /* quick ask (⌘J) — a centred overlay from any view */
  .pp-qscrim{position:fixed;inset:0;z-index:40;background:var(--scrim)}
  .pp-qscrim[hidden]{display:none}
  .pp-qp{position:fixed;z-index:41;left:50%;top:14%;transform:translateX(-50%);width:min(640px,calc(100% - 32px));background:var(--canvas);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-float);overflow:hidden;animation:popIn .22s var(--ease)}
  .pp-qp[hidden]{display:none}
  .pp-qin{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
  .pp-qin .ico{color:var(--ai-ink)}
  .pp-qin input{flex:1;border:0;outline:none;background:none;font-size:15px;color:var(--ink);min-width:0}
  .pp-qin input::placeholder{color:var(--ink-3)}
  .pp-qb{padding:8px 8px 6px;display:flex;flex-direction:column;gap:2px}
  .pp-qb .t-meta{padding:8px 10px 4px;font-weight:600}
  .pp-qi{display:flex;align-items:center;gap:10px;width:100%;min-height:38px;padding:7px 10px;border-radius:8px;font-size:13.5px;color:var(--ink-2);text-align:left}
  .pp-qi:hover,.pp-qi.on{background:var(--sel);color:var(--ink)}
  .pp-qi .ico{color:var(--ink-3)}
  .pp-qi .r{margin-left:auto;font-size:12px;color:var(--ink-3)}
  .pp-qf{display:flex;align-items:center;gap:14px;padding:10px 16px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-3)}
  .pp-qf span{display:inline-flex;align-items:center;gap:6px}
  .pp-qf .kbd{margin-right:2px}
  @media (prefers-reduced-motion:reduce){ .pp-spin,.pp-qp,.think i::after{animation:none!important} .pp-bcard{transition:none} }