/* Compact WeChat interface fragments, using the supplied file's visual language.
   Natural 14–17px body type; fit core actions without inner scrolling or zoom. */
.work-play { --wp-text:rgba(0,0,0,.9); --wp-secondary:rgba(0,0,0,.55); --wp-line:rgba(0,0,0,.1); --wp-green:#07c160; --wp-red:#fa5151; box-sizing:border-box; width:100%; max-width:480px; min-width:0; min-height:0; margin:auto; background:#fff; color:var(--wp-text); border:1px solid var(--wp-line); border-radius:12px; overflow:hidden; font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif; font-size:14px; line-height:1.4; text-align:left; }
.work-play * { box-sizing:border-box; }
.work-play p,.work-play h3 { margin:0; }
.work-play button { appearance:none; font:inherit; color:inherit; cursor:pointer; border:0; border-radius:0; background:transparent; text-align:inherit; min-width:0; }
.work-play button:focus-visible { outline:2px solid #07c160; outline-offset:-3px; }
.work-play button:hover { background-color:rgba(0,0,0,.035); }
.wp-nav { height:44px; display:grid; grid-template-columns:44px 1fr 44px; align-items:center; flex:none; border-bottom:1px solid rgba(0,0,0,.05); background:#f7f7f7; }
.wp-nav strong { font-size:16px; font-weight:500; text-align:center; }
.wp-nav-button,.wp-nav>span { width:44px; height:44px; display:flex; align-items:center; justify-content:center; }
.wp-nav img { width:22px; height:22px; object-fit:contain; }
.wp-secondary { color:var(--wp-secondary); font-size:12px; line-height:1.4; }
.wp-sheet-stage { padding:10px 0 0; background:#ededed; }
.wp-selected-messages { padding:0 16px 10px; }
.wp-selected-count { color:var(--wp-secondary); font-size:12px; margin-bottom:6px!important; }
.wp-selected-message { display:flex; align-items:center; gap:8px; padding:3px 0; font-size:13px; }
.wp-selected-message>span { color:#07a854; font-weight:600; flex:none; }
.wp-selected-message>div { display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; min-width:0; }
.wp-selected-message>div>span { display:block; background:#95ec69; padding:5px 9px; border-radius:4px; }
.wp-selected-message small { font-size:11px; color:var(--wp-secondary); }
.wp-selected-message.is-current>div>span { outline:2px solid #07c160; outline-offset:1px; }
.wp-selected-message.is-current small { color:#057c40; }
.wp-selected-message.is-expired>div>span { background:#fff; }
.wp-sheet { background:#fff; border-radius:12px 12px 0 0; overflow:hidden; }
.wp-sheet-summary { padding:10px 16px 2px; color:var(--wp-secondary); text-align:center; font-size:13px; }
.wp-sheet>.wp-secondary { text-align:center; padding:0 16px 8px; }
.wp-sheet-action { display:block; width:100%; padding:11px 14px; min-height:44px; font-size:16px!important; line-height:1.35; text-align:center!important; border-bottom:1px solid rgba(0,0,0,.06)!important; }
.wp-sheet-group+.wp-sheet-group { border-top:6px solid #f3f3f3; }
.wp-group-label { display:block; padding:6px 16px 0; color:var(--wp-secondary); font-size:12px; }
.wp-sheet-group .wp-sheet-action { padding-top:6px; }
.wp-sheet-cancel { display:block; width:100%; padding:11px 16px; min-height:48px; text-align:center!important; border-top:6px solid #f3f3f3!important; font-size:16px!important; }
.wp-case-note { padding:7px 16px; font-size:12px; text-align:center; color:var(--wp-secondary); background:#fff; }
.wp-upload { min-height:294px; padding:18px 24px 20px; display:flex; flex-direction:column; gap:16px; }
.wp-upload-file { display:flex; align-items:center; justify-content:center; gap:12px; }
.wp-upload-icon { width:44px; height:50px; object-fit:contain; }
.wp-upload-file>div { min-width:0; display:flex; flex-direction:column; gap:3px; }
.wp-upload-file strong { font-size:15px; font-weight:500; overflow-wrap:anywhere; }
.wp-upload-file span { color:var(--wp-secondary); font-size:12px; }
.wp-upload-message { text-align:center; }
.wp-upload-message h3 { font-size:20px; line-height:1.4; font-weight:500; margin:0 0 8px; }
.wp-upload-message p { font-size:14px; line-height:1.45; }
.wp-upload-message>.wp-secondary { display:block; margin-top:6px; }
.wp-upload-actions { display:grid; gap:8px; max-width:260px; width:100%; margin:auto auto 0; }
.work-play .wp-primary,.work-play .wp-secondary-button { display:flex; align-items:center; justify-content:center; text-align:center; min-height:44px; padding:10px 16px; border-radius:8px; font-size:16px; font-weight:500; line-height:1.35; }
.work-play .wp-primary { color:#fff; background:#07c160; }
.work-play .wp-primary:hover { background:#06ae56; }
.work-play .wp-secondary-button { color:rgba(0,0,0,.9); background:rgba(0,0,0,.05); }
.work-play .wp-secondary-button:hover { background:rgba(0,0,0,.08); }
.wp-waiting { font-size:14px!important; }
.wp-recipients { padding:8px 16px; }
.wp-section-label { color:var(--wp-secondary); font-weight:400; font-size:12px; margin:0 0 4px!important; }
.wp-person { width:100%; display:flex; align-items:center; gap:10px; padding:3px 0; }
.wp-avatar { display:block; width:32px; height:32px; border-radius:4px; object-fit:cover; flex:none; }
.wp-person-copy { min-width:0; display:flex; flex-direction:column; gap:1px; }
.wp-person-copy strong { font-size:14px; font-weight:400; line-height:1.25; }
.wp-person-copy>span { color:var(--wp-secondary); font-size:12px; line-height:1.2; }
.wp-chat-list { border-top:1px solid var(--wp-line); margin-top:5px; padding-top:5px; }
.wp-chat-list .wp-person+.wp-person { border-top:1px solid rgba(0,0,0,.04); }
.wp-avatar-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.wp-avatar-strip .wp-person { flex-direction:column; justify-content:flex-start; gap:5px; text-align:center; padding:4px 0 6px; }
.wp-avatar-strip .wp-avatar { width:40px; height:40px; }
.wp-avatar-strip .wp-person-copy { align-items:center; }
.wp-avatar-strip .wp-person-copy>span { max-width:100%; overflow-wrap:anywhere; }
.wp-recipient-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.wp-recipient-tiles .wp-person { display:flex; flex-direction:column; justify-content:flex-start; gap:5px; padding:8px 4px; border-radius:8px; background:#f7f7f7; text-align:center; }
.wp-recipient-tiles .wp-person-copy { align-items:center; }
.wp-transfer { padding:12px 16px 16px; }
.wp-transfer-heading { font-size:13px; color:var(--wp-secondary); margin-bottom:8px!important; }
.wp-transfer-row { width:100%; display:flex; align-items:center; gap:10px; min-height:66px; padding:10px 0; border-bottom:1px solid var(--wp-line)!important; }
.wp-file-type { flex:none; width:34px; height:42px; display:flex; align-items:center; justify-content:center; background:#667b89; color:#fff; font-size:10px; font-weight:600; border-radius:3px; }
.wp-file-type.is-pdf { background:#fa5151; }
.wp-file-copy { display:flex; flex-direction:column; min-width:0; gap:2px; flex:1; }
.wp-file-copy strong { font-size:14px; font-weight:400; overflow-wrap:anywhere; line-height:1.3; }
.wp-transfer-side { flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:5px; }
.wp-file-state { display:flex; align-items:center; gap:5px; font-size:14px; white-space:nowrap; }
.wp-status-dot { display:inline-block; width:9px; height:9px; border-radius:50%; }
.wp-status-dot.is-done { background:#07c160; }
.wp-status-dot.is-failed { background:#fa5151; }
.is-color-limited .wp-status-dot.is-done,.is-color-limited .wp-status-dot.is-failed { background:#8d9391; }
.wp-state-symbol { width:16px; height:16px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; background:#07c160; color:#fff; }
.wp-state-symbol.is-failed { background:#fa5151; }
.is-color-limited .wp-state-symbol { background:#8d9391; }
.wp-transfer-reason { color:var(--wp-secondary); font-size:12px; }
.wp-transfer-link { color:#576b95; font-size:14px; }
.wp-transfer-footer { margin-top:14px; }
.wp-transfer-footer .wp-primary { min-width:184px; max-width:240px; margin:0 auto; }
.wp-transfer-footer>.wp-secondary { text-align:center; padding:9px 0; }
@media(max-width:960px) { .wp-person.is-row { min-height:44px; } }
@media(max-width:400px) { .wp-recipients { padding-inline:12px; } .wp-transfer { padding-inline:12px; } .wp-upload { padding-inline:18px; } .wp-selected-message { padding-inline:12px; } }

/* The details option reveals a real next step instead of describing a button
   that does not exist. Native details preserves keyboard and touch access. */
.wp-transfer-detail summary { cursor:pointer; list-style:none; }
.wp-transfer-detail summary::-webkit-details-marker { display:none; }
.wp-transfer-detail summary:focus-visible { outline:2px solid #07c160; outline-offset:2px; }
.wp-transfer-detail-body { padding:12px; background:#f7f7f7; border-radius:8px; margin:8px 0; font-size:13px; }
.wp-transfer-detail-body>strong { font-weight:500; }
.wp-transfer-detail-body>p { margin:6px 0 10px; line-height:1.5; color:var(--wp-secondary); }
.wp-transfer-detail-body .wp-primary { width:100%; font-size:14px; }
.wp-transfer-focus-note,.wp-detail-close-label { display:none; }
.wp-transfer:has(.wp-transfer-detail[open]) .wp-transfer-heading,
.wp-transfer-files:has(.wp-transfer-detail[open])>.wp-transfer-row,
.wp-transfer-detail[open] .wp-detail-open-label { display:none; }
.wp-transfer:has(.wp-transfer-detail[open]) .wp-transfer-focus-note { display:block; color:var(--wp-secondary); font-size:13px; margin-bottom:8px; }
.wp-transfer-detail[open] .wp-detail-close-label { display:inline; }

/* Fit the three selected messages and all menu actions on a short desktop.
   The summary already repeats the selection count; keep its full text while
   removing only that duplicated header. Message and action font sizes stay put. */
@media (min-width:961px) and (min-height:620px) and (max-height:760px) {
 .work-play--action-sheet .wp-sheet-stage {padding-top:4px;}
 .work-play--action-sheet .wp-selected-messages {padding-bottom:4px;}
 .work-play--action-sheet .wp-selected-message {padding-block:1px;}
 .work-play--action-sheet .wp-selected-message>div>span {padding-block:3px;}
 .work-play--action-sheet:has(.wp-sheet-summary) .wp-selected-count {display:none;}
 .work-play--action-sheet .wp-sheet-summary {padding-top:6px;}
 .work-play--action-sheet .wp-sheet>.wp-secondary {padding-bottom:4px;}
 .work-play--action-sheet .wp-group-label {padding-top:3px;}
 .work-play--action-sheet .wp-sheet-cancel {padding-block:8px;min-height:44px;}
}