/* PujiCRM polish layer — loaded last; tightens alignment, feedback and rhythm.
   Every rule here is an override of an existing component; no layout redesigns. */

/* A. Every control answers immediately: colour transitions + press feedback. */
.btn,.icon-button,.case-tab,.inbox-filter-tabs button,.inbox-conversation,
.click-row,.nav button,.stat-link,.inbox-business-actions>.btn,
.inbox-context .btn,.demo-pill{transition:background-color .12s ease,border-color .12s ease,color .12s ease,box-shadow .12s ease}
.btn:active:not(:disabled),.icon-button:active{transform:translateY(1px)}
.btn:focus-visible,.icon-button:focus-visible,.case-tab:focus-visible,
.inbox-filter-tabs button:focus-visible,.inbox-wa:focus-visible{outline:2px solid #356c4d;outline-offset:2px}
.btn-primary{box-shadow:0 1px 2px #163e2b26}

/* B. Stable figures: counts, money and timestamps stop jittering on poll. */
.stat-value,.inbox-count,.unread-bubble,.organization-stat b,.money-grid b,
time,.inbox-message-meta,.inbox-conversation-top,.inbox-pagination,
.inbox-summary-row .badge,.kv-grid b{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* C. Main workbench frame gets one subtle elevation; columns read as surfaces. */
.inbox-layout{box-shadow:0 10px 30px #163e2b0d}
.inbox-context{background:#fcfdfa}
.inbox-list-pane{background:#fcfdfa}

/* D. Conversation list: name and clock share a baseline, rows breathe evenly. */
.inbox-conversation{padding:11px 14px}
.inbox-conversation-top{align-items:baseline}
.inbox-conversation-top time{font-size:10px;line-height:1}
.inbox-conversation-top b{line-height:1.35}
.inbox-conversation-bottom{align-items:center;margin-top:2px}
.inbox-conversation-message{margin:5px 0 0}
.inbox-high-intent,.inbox-not-customer{font-size:9px;line-height:1;padding:3px 5px;border-radius:4px;flex:none}

/* E. Chat column: steadier message rhythm, clearer dividers, calmer meta line. */
.inbox-message{margin:13px 0}
.inbox-message-bubble{padding:11px 13px 7px}
.inbox-message-meta{margin-top:7px;gap:8px;font-size:9.5px}
.inbox-date-divider{margin:20px 0 22px}
.inbox-chat-header{padding:11px 16px 10px}
.inbox-chat-tools .btn{border-radius:6px}

/* F. Composer: the reply box is the most-used element — give it presence. */
.inbox-compose textarea{border-radius:8px;background:#f4f7f0;box-shadow:inset 0 1px 2px #e3e9dc}
.inbox-compose textarea:focus{background:#fff;box-shadow:none;outline:2px solid #a9c6a6;border-color:#a9c6a6}
.inbox-compose-footer .btn-primary{min-width:96px}

/* G. Right column: strict grids for the business actions, tidy tag row. */
.inbox-context .inbox-business-actions{gap:7px}
.inbox-context .inbox-business-actions>*{min-width:0;margin:0}
.inbox-action-readonly{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:39px;gap:2px}
.inbox-current-tag .actions{gap:6px}
.inbox-context-heading{align-items:center;padding-bottom:13px;border-bottom:1px solid var(--line);margin-bottom:16px}
.inbox-context-heading h2{font-size:14px;letter-spacing:-.2px}

/* H. AI summary: structured block instead of a grey text wall. */
.inbox-ai-summary-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.inbox-ai-summary-head b{font-size:12.5px;font-weight:700;letter-spacing:-.2px}
.inbox-ai-summary-head span{display:block;font-size:9.5px;color:var(--muted);margin-top:3px}
.inbox-ai-summary-copy{font-size:11.5px;line-height:1.85;color:#2c443a;background:#f7faf4;border:1px solid #e2ecdb;border-radius:8px;padding:11px 13px;margin-top:10px}
.inbox-ai-summary-meta{font-size:9.5px;color:#8a9a8b;margin-top:7px}
.inbox-ai-summary-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.inbox-ai-summary-actions .btn{border-radius:6px}
.inbox-ai-summary-state{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted);padding:14px 0}
.inbox-ai-summary-note{font-size:11px;color:var(--muted);padding:12px 0;line-height:1.8}
.inbox-summary-section{border-top:1px solid var(--line);margin-top:16px;padding-top:16px}

/* I. Business summary blocks in the context column: consistent card rhythm. */
.inbox-business-item+.inbox-business-item{padding-top:10px;margin-top:10px}
.inbox-profile-button{border-radius:7px}
.inbox-record-link>.btn{border-radius:7px}

/* J. Slim, quiet scrollbars in the three scrolling panes. */
.inbox-conversations,.inbox-message-scroll,.inbox-context,.table-wrap,.conversation{scrollbar-width:thin;scrollbar-color:#c9d6c4 transparent}
.inbox-conversations::-webkit-scrollbar,.inbox-message-scroll::-webkit-scrollbar,
.inbox-context::-webkit-scrollbar,.table-wrap::-webkit-scrollbar{width:9px;height:9px}
.inbox-conversations::-webkit-scrollbar-thumb,.inbox-message-scroll::-webkit-scrollbar-thumb,
.inbox-context::-webkit-scrollbar-thumb,.table-wrap::-webkit-scrollbar-thumb{background:#ccd8c6;border-radius:5px;border:2px solid transparent;background-clip:content-box}
.inbox-conversations::-webkit-scrollbar-thumb:hover,.inbox-message-scroll::-webkit-scrollbar-thumb:hover,
.inbox-context::-webkit-scrollbar-thumb:hover{background:#b3c4ac;border:2px solid transparent;background-clip:content-box}

/* K. Filter tabs: clearer active/hover so the current filter is obvious. */
.inbox-filter-tabs button{border-radius:6px;transition:background-color .12s ease,color .12s ease}
.inbox-filter-tabs button:hover{background:#f1f5ec;color:#3c5546}
.inbox-filter-tabs button.active{box-shadow:inset 0 -2px 0 #4d7a56}

/* L. Lists and tables hover consistently. */
.inbox-conversation:hover{background:#f4f8ef}
.inbox-conversation.selected{background:#e9f2e4}
.click-row:hover{background:#f7faf3}

/* M. Badges and labels: one radius, one weight. */
.badge,.inbox-business-label,.unread-bubble,.demo-pill{border-radius:5px}
.badge{padding:4px 7px}

/* N. Dialogs and toasts land instead of popping. */
dialog[open]{animation:polish-pop .16s ease}
.toast{transition:opacity .18s ease,transform .18s ease}
@keyframes polish-pop{from{opacity:0;transform:translateY(6px) scale(.99)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){dialog[open]{animation:none}}

/* O. Task banner: the counts are the message — number-first chips. */
.reminder-banner{align-items:center;gap:16px}
.reminder-banner-copy strong{font-size:15px;letter-spacing:-.2px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.reminder-overdue{font-style:normal;font-size:10px;font-weight:700;color:#a2521f;background:#f9e5c8;padding:3px 8px;border-radius:10px;line-height:1.4}
.reminder-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.reminder-chip{display:inline-flex;align-items:baseline;gap:6px;border:1px solid #ecdab9;background:#fffdf6;border-radius:7px;padding:5px 10px;transition:background-color .12s ease,border-color .12s ease}
.reminder-chip b{font-size:15px;font-weight:700;color:#8a5a1e;font-variant-numeric:tabular-nums}
.reminder-chip span{font-size:10px;color:#8b7a55;white-space:nowrap}
.reminder-chip:hover{border-color:#d8b97e;background:#fdf7ea}
@media(max-width:680px){.reminder-banner{margin:14px 17px 0;flex-wrap:wrap}.reminder-banner .actions{width:100%}}

/* P. Customer record: card fields align on a grid, money leads the eye,
   outstanding balances read as action items, footers breathe. */
.item-card{border-radius:9px;padding:15px 16px}
.item-heading{align-items:flex-start;gap:14px;margin-bottom:12px}
.item-heading .badge{flex:none;margin-top:2px}
.kv-grid{gap:12px 18px}
.kv-grid>div{min-width:0}
.kv-grid span{font-size:10px;color:var(--muted);display:block}
.kv-grid b{font-size:13.5px;font-weight:700;letter-spacing:-.2px;font-variant-numeric:tabular-nums;display:block;margin-top:3px}
.kv-grid b.is-due{color:#b3541f}
.money-grid{gap:12px;margin:13px 0 10px}
.money-grid>div{min-width:0}
.money-grid span{font-size:10px;color:var(--muted)}
.money-grid b{font-size:15px;font-weight:700;letter-spacing:-.2px;font-variant-numeric:tabular-nums;display:block;margin-top:3px}
.money-grid b.is-due{color:#b3541f}
.item-footer{gap:8px;padding-top:13px;margin-top:12px}
.item-footer .btn{border-radius:6px}
.payment-line{border-radius:6px}
.customer-hero{padding:20px 22px;border-radius:11px}
.customer-hero h1{font-size:21px}
.customer-context-controls{border-radius:10px}
.customer-record-tag .badge{font-size:10px}

/* Q. Inbox list column: a slimmer filter stack above the conversations.
   The WA picker and its label share one row, the hint only appears once a
   specific inbox is selected, and 添加联系人 moved into the heading row. */
.inbox-list-heading{padding:8px 12px 5px}
.inbox-list-controls{gap:4px}
.inbox-search{margin:0 12px 5px}
.inbox-wa-row{display:flex;align-items:center;gap:8px;margin:0 12px 5px}
.inbox-wa-label{margin:0;font-size:10px;color:var(--muted);flex:none;white-space:nowrap}
.inbox-wa-row .inbox-wa{margin:0;flex:1;width:auto;height:30px}
.inbox-wa-hint{margin:0 12px 4px;font-size:10px;color:var(--muted)}
.inbox-wa-hint:empty{display:none}
.inbox-filter-tabs{padding:0 10px 5px}
.inbox-filter-tabs button{min-height:28px}
/* Background message notification affordance */
.notification-action{border:1px solid rgba(23,61,49,.18);background:#e8f2e2;color:#173d31;border-radius:999px;padding:7px 12px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
.notification-action:hover{background:#d8ebd1}
@media(max-width:680px){.mobile-notification-action{font-size:10px;padding:6px 8px;max-width:74px;white-space:normal;line-height:1.15}}