/* Local middle-area component only; reuse shared visual tokens. */
#wechat-followup { container-type:inline-size; min-width:0; padding-bottom:12px; }
.wf-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:8px 0 16px; }
.wf-heading h2 { font-size:23px; margin:0 0 8px; }
.wf-heading p,.wf-notice { color:var(--muted); font-size:11px; line-height:1.7; margin:0; }
.wf-controls { border:1px solid var(--line); border-radius:var(--radius-card); background:var(--surface); padding:15px; }
.wf-indicators { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; font-size:10px; color:var(--muted); }
.wf-indicators b { display:block; font-size:11px; color:var(--ink); margin-top:6px; font-weight:550; }
.wf-control-actions { display:flex; align-items:end; gap:8px; flex-wrap:wrap; margin-top:14px; }
.wf-control-actions label { display:flex; flex-direction:column; gap:6px; color:var(--muted); font-size:10px; }
.wf-control-actions select { font-size:11px; }
.wf-notice { margin:9px 0 14px; }
.wf-body { display:grid; grid-template-columns:minmax(160px,.32fr) minmax(0,1fr); gap:14px; align-items:start; }
.wf-customers,.wf-detail { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-card); min-width:0; }
.wf-customers { padding:12px; position:sticky; top:0; }
.wf-list-toolbar { display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.wf-list-toolbar input,.wf-list-toolbar select { width:100%; font-size:11px; }
.wf-customer-scroll { max-height:55dvh; overflow:auto; overscroll-behavior:contain; }
.wf-customer { text-align:left; width:100%; padding:12px 10px; border:1px solid transparent; border-bottom-color:var(--line); border-radius:12px; display:flex; flex-direction:column; gap:7px; font-size:11px; }
.wf-customer small { color:var(--muted); font-size:10px; line-height:1.6; }
.wf-customer span { color:var(--muted); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; max-width:100%; }
.wf-customer:hover { background:var(--surface-subtle); }
.wf-customer.is-selected { background:var(--ice-tint); border-color:var(--ice-edge); }
.wf-empty { padding:20px 8px; margin:0; color:var(--muted); font-size:11px; line-height:1.8; }
.wf-detail { padding:16px; }
.wf-detail-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:14px; }
.wf-detail h3 { font-size:13px; margin:0; }
.wf-reading { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:16px; }
.wf-reading>div { min-width:0; }
.wf-reading .section-head { flex-wrap:wrap; }
.wf-reading select { font-size:10px; max-width:100%; }
.wf-message { padding:12px; background:var(--surface-tint); border:1px solid var(--line); border-radius:12px; margin-bottom:12px; }
.wf-message small,.wf-reference small { color:var(--muted); font-size:10px; line-height:1.7; }
.wf-message p,.wf-reference p,.wf-history p,.wf-log p,.wf-compose p { font-size:11px; line-height:1.8; overflow-wrap:anywhere; white-space:pre-wrap; }
.wf-reading .check { margin-bottom:10px; align-items:start; font-size:10px; line-height:1.7; }
.wf-reading .check input { flex-shrink:0; margin-top:3px; }
.wf-knowledge { border-left:1px solid var(--line); padding-left:14px; }
.wf-knowledge input { width:100%; font-size:11px; }
#wf-references { max-height:38dvh; overflow:auto; margin-top:10px; }
.wf-reference { border-bottom:1px solid var(--line); padding:10px 0; font-size:11px; }
.wf-reference b { display:block; }
.wf-reference p { margin:6px 0; }
.wf-reference small { display:block; }
.wf-history,.wf-log { font-size:11px; color:var(--muted); margin-top:14px; }
.wf-history summary,.wf-log summary { cursor:pointer; }
.wf-compose { border-top:1px solid var(--line); padding-top:16px; margin-top:16px; }
.wf-compose textarea { width:100%; font-size:12px; min-height:100px; }
.wf-compose .field { margin:12px 0; }
.wf-compose-actions { display:flex; gap:8px; flex-wrap:wrap; }
.wf-input-result { color:var(--muted); }
.wf-input-preview { font:inherit; font-size:11px; white-space:pre-wrap; overflow-wrap:anywhere; padding:12px; border:1px solid var(--mint-edge); background:var(--mint-tint); border-radius:12px; }
@container(max-width:820px) { .wf-reading { grid-template-columns:1fr; } .wf-knowledge { border-left:0; border-top:1px solid var(--line); padding:12px 0 0; } #wf-references { max-height:180px; } }
@container(max-width:560px) { .wf-body { grid-template-columns:1fr; } .wf-customers { position:static; } .wf-customer-scroll { max-height:190px; } .wf-indicators { grid-template-columns:1fr; gap:8px; } .wf-indicators b { display:inline; margin-left:8px; } .wf-heading { align-items:start; } .wf-heading h2 { font-size:19px; } }