/* 审批第七版第二批「审批动作」（决定 W-APPROVALS-V7-ACT-20260927）：单子详情（头、内容卡、流程与评论、评论框）、底部按钮、
   各个底部弹层（通过、退回补充、拒绝、转交、加签、催一下、撤回）、批量审批、休假代批、系统通知卡片按钮和早上 9 点汇总。
   版式沿用第一批的 lv-*／af-*（白卡片、灰色小标题、红色只给主按钮）；状态色照通用规矩：红＝要你动手、灰＝结束了、黑框＝在等别人。 */

/* ── 单子头 ── */
.ad-page { display: grid; gap: 14px; padding-bottom: 12px; }
.ad-main, .ad-side { display: grid; gap: 14px; min-width: 0; }
.ad-head { display: grid; gap: 6px; padding: 4px 2px 0; }
.ad-head-kind { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; color: var(--muted); font-size: 13px; font-weight: 650; }
.ad-head-title { margin: 0; color: var(--ink); font-size: 22px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.ad-head-who { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; color: var(--ink); font-size: 14px; font-weight: 650; overflow-wrap: anywhere; }
.ad-head-when { margin: 0; color: var(--muted); font-size: 13px; }
.ad-card { margin: 0; }
.ad-rows > div { align-items: baseline; }
.ad-row-detail dd { white-space: normal; line-height: 1.6; }
mark.ad-added { padding: 1px 2px; border-radius: 4px; background: #fff1a8; color: var(--ink); }
.ad-pane-tools { display: flex; justify-content: flex-end; }
.ad-tool { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; font-size: 13px; }
.ad-tool .icon { width: 16px; height: 16px; }
.ad-denied { padding: 24px 16px; color: var(--muted); text-align: center; }

/* 附件：一张一张卡片（报价单、发票），照片是缩略图 */
.ad-files:empty { display: none; }
.ad-files { display: grid; gap: 8px; margin-top: 10px; }
.ad-file { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: #fafafb; color: var(--ink); text-decoration: none; }
.ad-file-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 9px; background: #d92d20; color: #fff; font-size: 11px; font-weight: 800; }
.ad-file-name { display: grid; min-width: 0; }
.ad-file-name b { overflow: hidden; font-size: 14.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.ad-file-name small { color: var(--muted); font-size: 12px; }
.ad-photos { display: flex; flex-wrap: wrap; gap: 8px; }
.ad-photo { display: block; width: 76px; height: 76px; overflow: hidden; border-radius: 12px; background: #eceef1; }
.ad-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ── 流程与评论（第 21、23、24 条）：左边头像一条竖线串起来，右边谁、什么时候、说了什么、把关什么 ── */
.ad-flow { display: grid; gap: 6px; }
.ad-h { margin: 6px 2px 2px; color: var(--ink); font-size: 17px; font-weight: 800; }
.ad-timeline { display: grid; margin: 0; padding: 0; list-style: none; }
.ad-entry { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; padding: 8px 0 12px; }
.ad-entry + .ad-entry::before { content: ''; position: absolute; top: -10px; inset-inline-start: 17px; height: 18px; border-inline-start: 1px solid #d9dbe0; }
.ad-entry.is-future + .ad-entry::before, .ad-divider + .ad-entry::before { border-inline-start-style: dashed; }
.ad-avatar { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; background: #f4f5f7; color: #5d6470; font-size: 12px; font-weight: 800; }
.ad-avatar.is-sm { width: 26px; height: 26px; font-size: 10.5px; }
.ad-avatar.is-current { border: 2px solid var(--ink); background: #fff; color: var(--ink); }
.ad-badge { position: absolute; inset-block-end: -3px; inset-inline-end: -3px; display: grid; place-items: center; width: 16px; height: 16px; border: 2px solid #fff; border-radius: 50%; background: #8a8d94; color: #fff; }
.ad-badge svg { width: 10px; height: 10px; }
.ad-entry-body { display: grid; gap: 4px; min-width: 0; }
.ad-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin: 0; font-size: 14.5px; }
.ad-who b { font-weight: 750; }
.ad-who small { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.ad-behalf { color: var(--ink) !important; }
.ad-when { margin-inline-start: auto; color: var(--muted); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.ad-tag { display: inline-flex; align-items: center; min-height: 20px; padding: 0 7px; border: 1px solid var(--line); border-radius: 6px; background: #f4f5f7; color: #5d6470; font-size: 11.5px; font-weight: 700; }
.ad-tag.is-back { border-color: #f3c3bf; background: #fff5f4; color: var(--danger); }
.ad-line { margin: 0; color: var(--ink); font-size: 14.5px; }
.ad-line b { font-weight: 750; }
.ad-sub { color: var(--muted); font-size: 13px; font-weight: 600; }
.ad-bubble { justify-self: start; max-width: 100%; padding: 8px 12px; border-radius: 12px; background: #f4f5f7; color: var(--ink); font-size: 14.5px; line-height: 1.55; overflow-wrap: anywhere; }
.ad-bubble.is-note { background: #fff5f4; color: var(--danger); font-weight: 650; }
.ad-at { color: #1f6feb; font-weight: 700; }
.ad-gate { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.ad-entry.is-muted .ad-who b, .ad-entry.is-muted .ad-who small { color: #8a8d94; }
.ad-divider { display: flex; align-items: center; gap: 10px; margin: 4px 0 0 46px; color: var(--muted); font-size: 12.5px; font-weight: 700; }
[dir="rtl"] .ad-divider { margin: 4px 46px 0 0; }
.ad-divider::after { content: ''; flex: 1; border-top: 1px solid var(--line); }

/* 评论框：「写评论，@ 提到同事」＋ @ ＋附件＋发送；@ 出来的人在上面一张小卡 */
.ad-composer { position: relative; display: grid; gap: 8px; padding: 8px 8px 8px 12px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.ad-composer-row { display: flex; align-items: flex-end; gap: 4px; }
.ad-composer textarea { flex: 1; min-height: 36px; max-height: 160px; padding: 8px 0; border: 0; resize: none; background: transparent; color: var(--ink); font: inherit; font-size: 15px; line-height: 1.45; outline: none; }
.ad-icon-btn { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; color: #5d6470; cursor: pointer; }
.ad-icon-btn svg { width: 21px; height: 21px; }
.ad-send { min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: #eceef1; color: var(--ink); font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
.ad-composer:focus-within .ad-send { background: var(--red); color: #fff; }
.ad-mentions { display: grid; gap: 2px; max-height: 260px; overflow: auto; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 8px 24px rgba(20, 20, 24, .12); }
.ad-mentions[hidden] { display: none; }
.ad-mention-title { margin: 2px 6px 4px; color: var(--muted); font-size: 12.5px; font-weight: 700; }
.ad-mention { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 8px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
.ad-mention.is-active, .ad-mention:hover { background: #eef4ff; }
.ad-mention span { display: grid; min-width: 0; }
.ad-mention b { font-size: 14.5px; font-weight: 750; }
.ad-mention small { color: var(--muted); font-size: 12.5px; }
.ad-mention-none { margin: 6px 8px; color: var(--muted); font-size: 13px; }
.ad-chips, .ad-sheet-files { display: flex; flex-wrap: wrap; gap: 6px; }
.ad-sheet-files:empty { display: none; }
.ad-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 6px 4px 4px; border: 1px solid var(--line); border-radius: 10px; background: #fafafb; font-size: 12.5px; }
.ad-chip.is-busy { opacity: .55; }
.ad-chip img, .ad-chip i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: #5d6470; color: #fff; font-size: 9px; font-style: normal; font-weight: 800; object-fit: cover; }
.ad-chip b { overflow: hidden; max-width: 150px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.ad-chip-x { width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 15px; cursor: pointer; }

/* ── 底部一栏（第 21、23、25、26、28–32 条）：上面一行字（你这一关把关、代谁批、补完回到谁），下面按钮 ── */
.ad-sticky { display: block; }
/* 手机：按钮条贴在屏幕最下面（第 23、31、34 条图）。这个应用的 body 设了 overflow-x: hidden，.sticky-actions 在这里贴不住底，
   所以直接 fixed，#main 下面留出按钮条的高度；电脑两栏时按钮跟在右栏最下面、批量那条贴在左栏列表底下（第 35 条）。 */
@media (max-width: 1023.98px) {
  /* 两条都带 .sticky-actions：打字时跟别的底栏一样先收起来（styles.css「打字时收底栏」名单） */
  #main > .ad-sticky.sticky-actions, #apv-home-body .apv-batch-bar.sticky-actions {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 30; margin: 0; padding: 10px 16px calc(12px + var(--safe-bottom));
    border-top: 1px solid var(--line); background: rgba(255, 255, 255, .97);
  }
  #main > .ad-sticky { display: block; }
  #main > .ad-sticky > .ad-bar { width: min(100%, 888px); margin-inline: auto; }
  #main:has(> .ad-sticky) { padding-bottom: calc(150px + var(--safe-bottom)); }
  #main:has(> .ad-sticky .ad-bar-row.is-side) { padding-bottom: calc(205px + var(--safe-bottom)); }
  #main:has(#apv-home-body .apv-batch-bar) { padding-bottom: calc(96px + var(--safe-bottom)); }
}
.ad-bar { display: grid; gap: 8px; width: 100%; }
.ad-bar-line { display: flex; align-items: flex-start; gap: 6px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.ad-bar-line svg, .ad-bar-line .icon { flex: none; width: 15px; height: 15px; margin-top: 2px; }
.ad-bar-line b { color: var(--ink); font-weight: 750; }
.ad-bar-row { display: flex; gap: 8px; }
/* 退回补充、拒绝按字宽，不折行；通过（主按钮）占剩下的；撤回申请｜催一下这种两个的平分 */
.ad-bar-row > * { flex: 1 1 0; min-height: 46px; min-width: 0; padding: 0 14px; white-space: nowrap; }
.ad-bar-row .ad-btn-main { flex: 1.5 1 0; }
.ad-bar-row:has(> .ad-btn-reject) > :not(.ad-btn-main) { flex: 0 0 auto; }
.ad-bar-row:has(> .ad-btn-reject) > .ad-btn-main { flex: 1 1 auto; }
.ad-bar-row.is-side > * { flex: 0 1 auto; min-height: 34px; padding: 0 16px; font-size: 14px; }
.ad-btn-wide { flex: 1 1 100%; }
.ad-btn-reject { border-color: #f3c3bf !important; background: #fff5f4 !important; color: var(--danger) !important; }

/* ── 底部弹层 ── */
.ad-lead { display: grid; gap: 4px; margin: 4px 0 14px; padding: 12px 14px; border-radius: 12px; background: #f4f5f7; color: var(--ink); font-size: 14.5px; font-weight: 700; line-height: 1.55; }
.ad-lead small { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.ad-req { margin-inline-start: 2px; color: var(--danger); font-style: normal; }
.ad-choice { display: grid; gap: 8px; margin-bottom: 12px; }
.ad-option { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.ad-option:has(input:checked) { border-color: var(--red); background: #fff7f6; }
.ad-option input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--red); }
.ad-option span { display: grid; gap: 2px; min-width: 0; }
.ad-option b { font-size: 15px; font-weight: 750; }
.ad-option small { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.ad-owed, .ad-recv { display: grid; gap: 8px; margin-bottom: 10px; }
.ad-owed[hidden], .ad-recv[hidden] { display: none; }
.ad-dashed { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; margin: 4px 0 8px; border: 1.5px dashed #c9ccd2; border-radius: 12px; background: transparent; color: var(--ink); font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; }
.ad-dashed svg { width: 18px; height: 18px; }
.ad-search { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.ad-search svg { width: 18px; height: 18px; color: var(--muted); }
.ad-search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 16px; outline: none; }
.ad-search:has(input[aria-invalid="true"]) { border-color: var(--danger); }
.ad-people { display: grid; gap: 8px; max-height: 38vh; margin: 10px 0 12px; overflow: auto; }
.ad-person { display: grid; grid-template-columns: 36px minmax(0, 1fr) 24px; align-items: center; gap: 10px; min-height: 56px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
.ad-person.is-static { grid-template-columns: 36px minmax(0, 1fr); margin-bottom: 10px; cursor: default; }
.ad-person.is-on { border-color: var(--red); background: #fff7f6; }
.ad-person-name { display: grid; gap: 1px; min-width: 0; }
.ad-person-name b { font-size: 15px; font-weight: 750; }
.ad-person-name small { overflow: hidden; color: var(--muted); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.ad-person-box { display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid #c9ccd2; border-radius: 6px; color: #fff; }
.ad-person.is-on .ad-person-box { border-color: var(--red); background: var(--red); }
.ad-person-box svg { width: 14px; height: 14px; }

/* ── 批量审批（第 34 条） ── */
.apv-subrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.apv-subrow > .apv-subtabs { flex: 1; min-width: 0; }
.apv-batch-toggle { display: inline-flex; flex: none; align-items: center; gap: 6px; min-height: 36px; padding: 0 4px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 14.5px; font-weight: 750; cursor: pointer; }
.apv-batch-toggle svg { width: 18px; height: 18px; }
.apv-batch-toggle.is-on { color: var(--red); }
.apv-row.is-batch { grid-template-columns: 24px 40px minmax(0, 1fr); }
.apv-check { display: grid; place-items: center; align-self: center; width: 22px; height: 22px; border: 1.5px solid #c9ccd2; border-radius: 6px; color: #fff; }
.apv-check.is-on { border-color: var(--red); background: var(--red); }
.apv-check.is-off { background: #eceef1; }
.apv-check svg { width: 14px; height: 14px; }
.apv-row.is-locked { opacity: .55; }
.apv-batch-bar { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; }
.apv-batch-bar > span { color: var(--ink); font-size: 15px; font-weight: 750; }
.apv-batch-bar > .primary-button { flex: 0 1 60%; min-height: 46px; }
.ad-batch-list { display: grid; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 12px; }
.ad-batch-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; }
.ad-batch-row + .ad-batch-row { border-top: 1px solid var(--line); }
.ad-batch-text { display: grid; gap: 2px; min-width: 0; }
.ad-batch-text b { font-size: 15px; font-weight: 750; }
.ad-batch-text small { color: var(--muted); font-size: 12.5px; }
.ad-batch-amount { font-size: 14.5px; font-weight: 750; }

/* ── 休假代批（第 33 条） ── */
.apv-dg-entry { display: flex; align-items: center; justify-content: space-between; margin: 14px 2px 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); font-size: 14.5px; font-weight: 700; text-decoration: none; }
.ad-dg-banner { display: grid; gap: 2px; margin: 12px 0 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.ad-dg-banner b { font-size: 15px; font-weight: 800; }
.ad-dg-banner p { margin: 0; color: var(--muted); font-size: 13.5px; }
.ad-dg-card { display: grid; gap: 6px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.ad-dg-card p { margin: 0; font-size: 14px; line-height: 1.55; }
.ad-dg-range b { font-size: 15.5px; font-weight: 800; }
.ad-dg-src { color: var(--muted); font-size: 13px !important; }
.ad-dg-actions { display: flex; gap: 8px; margin-top: 4px; }
.ad-dg-actions > * { min-height: 38px; padding: 0 16px; font-size: 14px; }
.ad-dg-title { margin: 2px 2px 12px; color: var(--ink); font-size: 20px; font-weight: 800; }
.ad-dg-h { margin: 20px 2px 8px; color: var(--ink); font-size: 16px; font-weight: 800; }
.ad-dg-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 52px; background: transparent; font: inherit; text-align: start; }
.ad-dg-form > .ad-dg-row:first-child { border-top: 0; }
.ad-dg-row .lv-val.is-empty { color: #9a9ca3; font-weight: 650; }
.ad-dg-kinds { display: grid; gap: 10px; padding: 12px 0 8px; border-top: 1px solid var(--line); }
.ad-dg-kinds .lv-sub { margin: 0; }
.ad-dg-modes { display: flex; flex-wrap: wrap; gap: 8px; }
.ad-dg-mode { min-height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; }
.ad-dg-mode.is-on { border-color: var(--red); background: #fff5f6; color: var(--red); }
.ad-kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.ad-kind { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 13.5px; font-weight: 650; }
.ad-kind input { accent-color: var(--red); }
.ad-dg-auto { padding-block: 12px; }
.ad-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.ad-switch > span:first-child { display: grid; gap: 2px; min-width: 0; }
.ad-switch b { font-size: 15px; font-weight: 750; }
.ad-switch small { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.ad-dg-will { margin: 10px 2px 0; }

/* ── 补充后重新提交（第 27 条）：最上面谁退回的、说了什么；核对页写改了哪几处 ── */
.ad-returned { display: grid; gap: 4px; margin: 0 0 12px; padding: 12px 14px; border: 1px solid #f3c3bf; border-radius: 12px; background: #fff5f4; }
.ad-returned b { color: var(--danger); font-size: 15px; font-weight: 800; }
.ad-returned p { margin: 0; color: var(--ink); font-size: 14.5px; line-height: 1.55; }
.af-file.is-new { border-color: #f3c3bf; background: #fff7f6; }
.af-file-new { color: var(--danger); font-size: 12px; font-style: normal; font-weight: 800; white-space: nowrap; }
.af-photo .af-file-new { position: absolute; inset-inline-start: 4px; bottom: 4px; padding: 1px 5px; border-radius: 6px; background: #fff; }
.ad-changes { display: grid; gap: 6px; padding-block: 12px; }
.ad-changes p { margin: 0; font-size: 14.5px; }
.ad-changes-next { display: flex; gap: 6px; color: var(--muted); font-size: 13px !important; }
.ad-changes-next .icon { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.ad-resubmit-files { display: grid; gap: 8px; }

/* ── 系统通知卡片（第 22 条）：下面直接带按钮；早上 9 点汇总列最久的几张 ── */
/* 按钮一行横跨整张卡片（第 22 条图），上面一条细线 */
.chat-notice-card > .chat-notice-actions { display: flex; grid-column: 1 / -1; margin: 2px -16px -16px; border-top: 1px solid var(--line); }
.chat-notice-act { display: grid; flex: 1; place-items: center; min-height: 48px; color: var(--red); font-size: 15px; font-weight: 800; text-decoration: none; }
.chat-notice-act + .chat-notice-act { border-inline-start: 1px solid var(--line); color: var(--ink); }
.ad-digest-oldest { margin: 2px 0 6px; color: var(--muted); font-size: 13px; }
.ad-digest { display: grid; }
.ad-digest-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0; padding: 8px 0; font-size: 14px; }
.ad-digest-row + .ad-digest-row { border-top: 1px solid var(--line); }
.ad-digest-row span { min-width: 0; overflow-wrap: anywhere; }
.ad-digest-row b { flex: none; color: var(--muted); font-size: 13px; font-weight: 700; }
.ad-digest-row b.is-late { color: var(--danger); }
.ad-digest-row.is-more span { color: var(--ink); font-weight: 650; }
.ad-digest-done { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 0; color: var(--ink); font-size: 14px; font-weight: 650; }
.ad-digest-done svg { width: 16px; height: 16px; color: var(--muted); }

/* ── 电脑（第 35 条）：右边这一栏里内容和「流程与评论」左右两栏；底部按钮跟在下面 ── */
@media (min-width: 1100px) {
  .apv-split-pane .ad-page.is-split { grid-template-columns: minmax(0, 1.05fr) minmax(320px, 1fr); align-items: start; column-gap: 22px; }
  .apv-split-pane .ad-page.is-split .ad-main, .apv-split-pane .ad-page.is-split .ad-side { display: grid; gap: 14px; min-width: 0; }
  .apv-split-pane .ad-page.is-split .ad-side { position: sticky; top: 0; }
  /* 右栏底部按钮：跟在「流程与评论」那一栏下面，别拉满整个右栏；底色跟右栏一样是白的 */
  body .apv-split-pane .ad-sticky.sticky-actions { background: #fff; }
  .apv-split-pane .ad-sticky > .ad-bar { width: min(100%, 620px); margin-inline-start: auto; }
}