/* 訊息收件箱——樣式照《訊息面板-WhatsApp款-定稿.dc.html》(老闆已批款) 數值原樣抄。
   自成一套 `msg-` class,避開 `.panel`/`.zone-*` 嗰批選擇器,唔會撞。
   顏色一律用返 `style.css` 已有嘅 token;定稿入面冇對應 token 嘅先自己開新變量。

   🔴 2026-09-14(老闆驗收卡住之後,統籌單4補):`.msg-panel` 而家掛喺
   `#zone-messages` 個 `.zone-body` 入面(正式面板嘅殼),**唔再係獨立卡片**——
   卡片嘅樣(background/border/radius/shadow)已經由 `.panel` 畀晒,呢度淨係
   剩返做 CSS 變數嘅命名空間,唔可以再畫多次張卡,唔係就會card-in-card。 */

.msg-panel {
  --msg-row-hover: #FAFAFB;
  --msg-unread-bg: #FBFDFC;
  --msg-selected-bg: #F0F1F3;
  --msg-avatar-group-bg: #EDF1F5;
  --msg-avatar-group-ink: #5B6B7C;
  --msg-avatar-group-alt-bg: #F1F0F4;
  --msg-avatar-group-alt-ink: #6B6578;
  --msg-bubble-mine-bg: #F1FAF5;
  --msg-bubble-mine-border: #CFE9DC;
}

/* 老闆本機驗收開關(MESSAGES_LOCAL)嘅提示——同影子帶撞色但唔撞位
   (嗰條係全頁貼頂,呢條淨係喺訊息面板頭,範圍細過影子帶好多)。 */
.msg-local-banner {
  padding: 6px 13px; font-size: 12px; font-weight: 600; text-align: center;
  background: #FDF2E9; color: #9A5B13; border-bottom: 1px solid #F3D9B5;
}
.msg-local-banner[hidden] { display: none; }

.msg-head {
  display: flex; align-items: center; gap: 9px;
  height: 44px; padding: 0 13px;
  border-bottom: 1px solid var(--line);
}
.msg-head .msg-head-icon { width: 16px; height: 16px; color: var(--prog-fill); flex: none; }
.msg-head-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.msg-head-count {
  font-size: 11.5px; font-weight: 600; color: #FFFFFF;
  background: var(--prog-fill); border-radius: 6px; padding: 1px 7px;
  font-variant-numeric: tabular-nums;
}
.msg-head-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.msg-head-tools button {
  border: none; background: none; padding: 4px; cursor: pointer;
  color: var(--icon-idle); display: flex; align-items: center; border-radius: 6px;
}
.msg-head-tools button:hover { background: var(--tag-bg); color: var(--muted-2); }

.msg-toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; row-gap: 8px;
  padding: 8px 13px; border-bottom: 1px solid var(--line);
  background: #FCFCFD;
}
/* 🔴 單4 發現(2026-09-14):掛通真 endpoint 之前,呢個面板一直因為
   404 靜靜哋自己唔起身(`messages.js` 嘅設計),所以呢條走位一直冇被
   UI 閘見過。掛通之後先現形:窄嘅右欄一行擺唔晒「搜尋＋封存＋新對話」
   三樣嘢,`msg-toolbar-btn`／`msg-new-btn` 又係 `flex: none`(唔准縮),
   一定爆版。加 `flex-wrap` 等擠唔落先跳去第二行,唔郁原本掣嘅樣。 */
.msg-search {
  flex: 1; display: flex; align-items: center; gap: 7px;
  height: 28px; padding: 0 10px;
  background: var(--card); border: 1px solid #E6E6EB; border-radius: 8px;
}
.msg-search svg { width: 13px; height: 13px; color: var(--icon-idle); flex: none; }
.msg-search input {
  border: none; outline: none; background: none; flex: 1;
  font-size: 12.5px; color: var(--ink); min-width: 0;
}
.msg-search input::placeholder { color: var(--muted); }
.msg-toolbar-btn {
  display: flex; align-items: center; gap: 6px; flex: none;
  height: 28px; padding: 0 10px;
  background: var(--card); border: 1px solid #E6E6EB; border-radius: 8px;
  font-size: 12.5px; color: var(--ink); cursor: pointer;
}
.msg-toolbar-btn:hover { background: var(--tag-bg); }
.msg-toolbar-btn.is-on { background: var(--tag-bg); border-color: var(--grip-idle); font-weight: 600; }
.msg-toolbar-btn svg { width: 13px; height: 13px; color: var(--icon-idle); }

/* 工單〈執位六件〉④(2026-09-20):由全寬綠掣改做標題列一粒 `＋`——
   `.msg-new-btn` 而家係動態插入 `#zone-messages .zone-tools`(見
   `messages.js` 嘅 `掛標題新對話掣()`)嘅圖示掣,尺寸/透明底/hover
   全部食返 `style.css` 嘅 `.zone-btn`,呢度淨係補圖示顏色(綠色,分得
   出佢同摺疊/隱藏兩粒中性灰唔同)。 */
.msg-new-btn svg { width: 14px; height: 14px; color: var(--prog-fill); }
.msg-new-btn:hover svg { color: var(--green-hover); }
.msg-new-btn.is-on { background: var(--tag-bg); }

.msg-list { max-height: 420px; overflow-y: auto; }
/* 工單〈二〉10：每行固定 60px，一定有預覽線——`box-sizing: border-box`
   等 padding 計入嗰個 60px，唔准因為冇內容令行高唔一致。 */
.msg-row {
  height: 60px; box-sizing: border-box;
  display: flex; align-items: center; gap: 11px;
  padding: 0 13px; border-bottom: 1px solid var(--line-row);
  cursor: pointer;
}
.msg-row:hover { background: var(--msg-row-hover); }
.msg-row.is-unread { background: var(--msg-unread-bg); box-shadow: inset 3px 0 0 var(--prog-fill); }
.msg-row.is-selected { background: var(--msg-selected-bg); box-shadow: inset 3px 0 0 var(--ink); }
.msg-row.is-archived { opacity: .7; }

.msg-avatar { flex: none; width: 40px; height: 40px; }
.msg-avatar-dm {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--tag-bg); color: var(--muted-2);
  font-size: 14.5px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
/* 工單〈執位六件〉③(2026-09-20):拆走灰色圓底,容器縮細做 26×26、
   冇背景、冇圓角——淨圖示。保留 `--msg-avatar-group-ink`／`-alt-ink`
   兩種顏色分公司群組(全公司)同一般群組,冇咗底色一樣分得出。 */
.msg-avatar-group {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
}
.msg-avatar-group svg { width: 19px; height: 19px; color: var(--msg-avatar-group-ink); }
.msg-avatar-group.msg-avatar-group-alt svg { color: var(--msg-avatar-group-alt-ink); }
/* 工單〈二〉7（訊息面板改版單B，2026-09-20）：文件摺角，扁平單一圖示，
   灰色，唔准用有剔嘅（原本 base+badge 疊剔+萬字夾嗰個組合已拆走）。
   🔴 呢個 class **淨係俾鬼行(舊 Airtable 留言未讀指路牌,`鬼行HTML()`)用**
   ——佢仲係 40×40 灰圓,base+badge 疊埋一齊,唔准改細。普通任務行／
   thread header 而家用返下面新嘅 `.msg-avatar-task-flat`(工單〈執位
   六件〉③)。兩個 class 分開,唔會你改我又跟住走樣。 */
.msg-avatar-task {
  position: relative; width: 40px; height: 40px; border-radius: 50%;
  background: var(--tag-bg); display: flex; align-items: center; justify-content: center;
}
.msg-avatar-task > svg { width: 19px; height: 19px; color: var(--muted-3); }
/* 工單〈執位六件〉③(2026-09-20):任務行／thread header 嘅頭像——拆走
   灰色圓底,26×26、冇背景、冇圓角,淨圖示。 */
.msg-avatar-task-flat {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
}
.msg-avatar-task-flat svg { width: 19px; height: 19px; color: var(--muted-3); }
/* 舊 base+badge 組合——淨係「鬼行」（舊 Airtable 留言未讀指路牌）仲用緊，
   保留呢兩條規矩，唔可以刪。*/
.msg-avatar-task-base {
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--tag-bg); display: flex; align-items: center; justify-content: center;
}
.msg-avatar-task-base svg { width: 19px; height: 19px; color: var(--muted-3); }
.msg-avatar-task-badge {
  position: absolute; right: -2px; top: -2px; width: 17px; height: 17px;
  border-radius: 50%; background: var(--card); border: 1px solid #E1E3E7;
  display: flex; align-items: center; justify-content: center;
}
.msg-avatar-task-badge svg { width: 10px; height: 10px; color: var(--muted-2); }

.msg-row-body { flex: 1; min-width: 0; }
.msg-row-top { display: flex; align-items: baseline; gap: 8px; }
.msg-row-title {
  flex: 1; min-width: 0; font-size: 14.5px; font-weight: 500; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.msg-row.is-unread .msg-row-title { font-weight: 600; }
.msg-row-bottom { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.msg-row-preview {
  flex: 1; min-width: 0; font-size: 13px; color: var(--muted-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.msg-row.is-unread .msg-row-preview { color: #3F444B; }

/* 工單〈二〉6（訊息面板改版單B，2026-09-20）：時間喺上、頭像喺時間下面
   靠右——右邊做一條獨立直欄，時間同「未讀泡＋成員頭像」上下疊，唔再
   同標題擠埋一行(舊版做法)。 */
.msg-row-right {
  flex: none; width: 52px; display: flex; flex-direction: column;
  align-items: flex-end; gap: 5px;
}
.msg-row-time { font-size: 11.5px; color: var(--muted-3); font-variant-numeric: tabular-nums; }
/* 🔴 工單〈二〉14 顏色表:「未讀行嘅時間字」轉灰——舊版呢度用
   `var(--prog-fill)`（綠色），今次收窄綠色淨係留俾「要老闆出手」嘅四
   個位（頂部數字牌／每行未讀泡／新對話掣／送出掣），時間字唔算，跌返
   用灰但保留 font-weight:600 分得出未讀。 */
.msg-row.is-unread .msg-row-time { font-weight: 600; color: var(--muted-2); }
.msg-row-right-bottom { display: flex; align-items: center; height: 20px; gap: 4px; }
.msg-row-badge {
  min-width: 19px; height: 19px; padding: 0 6px; border-radius: 999px;
  background: var(--prog-fill); color: #FFFFFF; font-size: 11.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums; flex: none;
}
/* 工單 #415：右邊顯示「呢個對話有邊個」——dm 已經拆走（左邊已經有，
   2026-09-20 工單〈二〉6），group 出晒其他成員(唔包自己)，task 出對家。
   群組要疊幾個微微 overlap（規格.md 第5條）：第二粒開始向左疊、加白圈
   分隔，公司得三四個人唔使做 +N 縮寫。 */
.msg-row-members { flex: none; display: flex; align-items: center; }
.msg-row-member {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--tag-bg); color: var(--muted-2);
  font-size: 10.5px; font-weight: 600; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.msg-row-member + .msg-row-member { margin-left: -7px; box-shadow: 0 0 0 2px var(--card); }

/* 工單〈執位六件〉①(2026-09-20):「其他同事的任務」專屬兩點——
   指派人(最終責任人)22px 深灰實底白字，負責人 13px 淺灰底疊喺右下、
   底部對齊、overlap 6px、1.5px 白邊。指派人＝負責人嗰陣(自己開俾
   自己)`messages.js` 已經淨傳一粒，呢度唔使另外判斷。 */
.msg-row-otherdots { flex: none; display: flex; align-items: flex-end; }
.msg-dot {
  flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600;
}
.msg-dot-assigner {
  width: 22px; height: 22px; font-size: 11.4px;
  background: var(--assigner-dark); color: #FFFFFF;
}
.msg-dot-owner {
  width: 13px; height: 13px; font-size: 7.5px; margin-left: -6px;
  background: var(--tag-bg); color: var(--tag-ink);
  box-shadow: 0 0 0 1.5px var(--card);
}

/* 工單〈二〉1/2（訊息面板改版單B，2026-09-20）：列表只分兩區——未讀
   (靜態標籤，預設展開，冇摺疊功能)、已閱讀(可撳掣摺疊，預設收埋)。 */
.msg-section-head {
  height: 30px; box-sizing: border-box; padding: 0 13px;
  display: flex; align-items: center; gap: 7px;
  border-top: 1px solid var(--line-row);
}
.msg-section-label { font-size: 11.5px; font-weight: 600; color: var(--muted-2); letter-spacing: .09em; }
.msg-section-count { font-size: 11.5px; font-weight: 600; color: var(--muted-3); }
/* 🔴 老闆親自捉：摺疊箭嘴要喺最右手面（設計稿畫咗喺左，「擺返最右我
   先順暢啲」）——`.msg-section-arrow` 用 `margin-left: auto` 推去尾。 */
.msg-section-toggle {
  height: 44px; box-sizing: border-box; margin-top: 8px; padding: 0 13px;
  display: flex; align-items: center; gap: 7px; width: 100%;
  background: var(--card); border: none; border-top: 1px solid var(--line-row);
  cursor: pointer; text-align: left;
}
.msg-section-toggle:hover { background: var(--msg-row-hover); }
.msg-section-arrow { margin-left: auto; flex: none; display: flex; color: var(--icon-idle); }
.msg-section-arrow svg { width: 14px; height: 14px; }

.msg-empty, .msg-loading { padding: 24px 13px; text-align: center; font-size: 13px; color: var(--muted); }
/* 工單〈執位六件〉②(2026-09-20):未讀區零項嘅「沒有未讀訊息」——同
   成個列表都空嗰句(`.msg-empty`)分開一個細版,唔使成段 24px 直向留白
   咁誇張(呢度淨係一個區入面嘅零狀態,唔係成塊面板都冇嘢)。 */
.msg-empty-section { padding: 14px 13px; font-size: 12.5px; color: #3C4149; }

/* ── 就地開新對話／新群組(2026-09-16 老闆親令:唔准另彈窗口)──────
   以前呢一段係 `.msg-modal` 彈窗嘅樣。而家成件事喺訊息面板同一個框架
   入面攤開一格,住喺 `.msg-toolbar` 同 `.msg-list` 中間 ——
   所以佢要睇落似「工具列拉長咗」,唔係似一張浮起嘅卡。 */
.msg-newbox {
  border-bottom: 1px solid var(--line); background: var(--card);
  padding: 9px 13px 11px;
}
.msg-newbox[hidden] { display: none; }
.msg-newbox-head { font-size: 12px; color: var(--muted-2); margin-bottom: 7px; }
.msg-newbox-row {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 7px 6px; border: none; border-radius: 9px; background: none;
  font-size: 14px; color: var(--ink); cursor: pointer; text-align: left;
}
.msg-newbox-row:hover { background: var(--msg-row-hover); }
.msg-newbox-row .msg-avatar-dm { width: 30px; height: 30px; font-size: 12.5px; }
.msg-newbox-togroup { font-weight: 600; color: var(--prog-fill); }
.msg-newbox-field { display: block; font-size: 12.5px; color: var(--muted-2); }
.msg-newbox-name {
  display: block; width: 100%; box-sizing: border-box; margin-top: .3rem;
  padding: .4rem .6rem; border: 1px solid #E6E6EB; border-radius: 8px;
  font: inherit; font-size: 13px; color: var(--ink);
}
.msg-newbox-members { display: flex; flex-wrap: wrap; gap: .45rem .9rem; margin-top: .6rem; }
.msg-newbox-members label { display: flex; align-items: center; gap: .4rem; font-size: 13px; color: var(--ink); }
/* 工單 #415(老闆 2026-09-19,兩輪打回頭):開群組個名單要預設剔埋自己,
   但自己嗰粒 checkbox 撳唔郁(disabled)。第一輪老闆話「應該灰色格仔」,
   第二輪追加:「唔需要自己一行,同其他人拍埋一齊就得」——所以呢度**淨係
   用灰色分得出自己**,唔再 `flex-basis:100%` 迫佢獨佔一行,同 Ben／
   Boy／Lam 用返 `.msg-newbox-members` 原本嗰個 `flex-wrap` 排法。 */
.msg-newbox-member-self { color: var(--muted-3); }
.msg-newbox-member-self input[disabled] { accent-color: var(--muted-3); }
.msg-newbox-err { color: var(--p1); font-size: 12.5px; margin: .5rem 0 0; }
.msg-newbox-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 9px; }
.msg-newbox-cancel, .msg-newbox-submit {
  height: 28px; padding: 0 12px; border-radius: 8px; font-size: 12.5px; cursor: pointer;
}
.msg-newbox-cancel { border: 1px solid #E6E6EB; background: var(--card); color: var(--ink); }
.msg-newbox-cancel:hover { background: var(--tag-bg); }
.msg-newbox-submit { border: none; background: var(--prog-fill); color: #FFFFFF; font-weight: 600; }
.msg-newbox-submit:hover { background: var(--green-hover); }

/* ── 對話展開(決策#18:佔主區域,原主區域內容褪落副區,唔冚唔摺)── */
.msg-thread {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(31, 33, 36, .04); overflow: hidden;
  display: flex; flex-direction: column; min-height: 480px;
}
.msg-thread-head {
  display: flex; align-items: center; gap: 12px; padding: 11px 15px;
  border-bottom: 1px solid var(--line);
}
.msg-thread-back {
  border: none; background: none; cursor: pointer; color: var(--muted-2);
  display: flex; align-items: center; padding: 4px; flex: none;
}
.msg-thread-back svg { width: 17px; height: 17px; }
.msg-thread-title { flex: 1; min-width: 0; }
.msg-thread-name {
  font-size: 16px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.msg-thread-sub { font-size: 12.5px; color: var(--muted-2); margin-top: 2px; }
.msg-thread-unread-btn, .msg-thread-archive-btn, .msg-thread-mute-btn {
  display: flex; align-items: center; gap: 7px; flex: none;
  height: 30px; padding: 0 11px; border: 1px solid #E6E6EB; border-radius: 8px;
  font-size: 13px; color: var(--ink); background: var(--card); cursor: pointer;
}
.msg-thread-unread-btn svg, .msg-thread-archive-btn svg, .msg-thread-mute-btn svg { width: 14px; height: 14px; }
.msg-thread-unread-btn:hover, .msg-thread-archive-btn:hover, .msg-thread-mute-btn:hover { background: var(--tag-bg); }
.msg-thread-mute-btn[aria-pressed="true"] { background: var(--tag-bg); border-color: var(--grip-idle); }

.msg-thread-body {
  flex: 1; overflow-y: auto; padding: 18px 22px;
  display: flex; flex-direction: column; gap: 16px; background: #FCFCFD;
}
.msg-day-sep { display: flex; align-items: center; gap: 12px; }
.msg-day-sep span { flex: 1; height: 1px; background: #EDEDF1; }
.msg-day-sep b { font-size: 11.5px; font-weight: 400; color: var(--muted-2); white-space: nowrap; }

.msg-bubble-row { display: flex; gap: 11px; }
.msg-bubble-row.is-mine { flex-direction: row-reverse; }
.msg-bubble-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--tag-bg); color: var(--muted-2);
  font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center;
}
.msg-bubble-row.is-mine .msg-bubble-avatar { background: var(--prog-bg); color: var(--prog-ink); }
.msg-bubble-col { min-width: 0; }
.msg-bubble-row.is-mine .msg-bubble-col { display: flex; flex-direction: column; align-items: flex-end; }
.msg-bubble-meta { display: flex; align-items: baseline; gap: 8px; }
.msg-bubble-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.msg-bubble-time { font-size: 11.5px; color: var(--muted-3); font-variant-numeric: tabular-nums; }
.msg-bubble {
  margin-top: 5px; padding: 10px 13px; max-width: 600px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  border-top-left-radius: 3px;
  font-size: 14.5px; line-height: 1.6; color: var(--ink);
  overflow-wrap: break-word; white-space: pre-wrap;
}
.msg-bubble-row.is-mine .msg-bubble {
  background: var(--msg-bubble-mine-bg); border-color: var(--msg-bubble-mine-border);
  border-top-left-radius: 12px; border-top-right-radius: 3px;
}

/* 已讀顯示,連時間(決策#16)——淨係自己送嗰句先有,靠右貼喺氣泡底。 */
.msg-bubble-read {
  margin-top: 4px; font-size: 11px; color: var(--muted-3);
  text-align: right; font-variant-numeric: tabular-nums;
}

/* ── 舊 Airtable 留言(決策#24「方案D」)————————————————
   任務對話專屬,擺喺氣泡串最頂。用灰底同虛線分隔,睇得出「呢啲係歷史
   紀錄,唔係而家傾緊嘅嘢」——冇已讀概念,靚樣同新訊息氣泡分得開。 */
.msg-legacy-section { margin-bottom: 14px; }
.msg-legacy-toggle {
  display: flex; align-items: center; gap: 6px;
  border: none; background: none; padding: 4px 0;
  font-size: 12.5px; color: var(--muted-2); cursor: pointer;
}
.msg-legacy-toggle:hover { color: var(--ink); }
.msg-legacy-list {
  margin-top: 8px; padding: 10px 12px 2px;
  background: #FAFAFB; border: 1px dashed #E1E3E7; border-radius: 10px;
  display: flex; flex-direction: column; gap: 12px;
}
.msg-legacy-bubble .msg-bubble { background: transparent; border-style: dashed; }
.msg-legacy-bubble .msg-bubble-name, .msg-legacy-bubble .msg-bubble-time { color: var(--muted-3); }

.msg-thread-footer { padding: 13px 15px; border-top: 1px solid var(--line); }
.msg-compose {
  border: 1px solid var(--line); border-radius: 12px; background: var(--card); overflow: hidden;
}
.msg-compose textarea {
  display: block; width: 100%; box-sizing: border-box; resize: none;
  border: none; outline: none; font: inherit; font-size: 14.5px;
  padding: 12px 14px; color: var(--ink); max-height: 140px;
}
.msg-compose textarea::placeholder { color: var(--muted); }
.msg-compose-bar {
  display: flex; align-items: center; gap: 10px; padding: 8px 11px;
  border-top: 1px solid var(--line-row); background: #FCFCFD;
}
.msg-compose-hint { font-size: 11.5px; color: var(--muted-3); }
.msg-compose-send {
  margin-left: auto; display: flex; align-items: center; height: 32px; padding: 0 16px;
  background: var(--prog-fill); color: #FFFFFF; border: none; border-radius: 8px;
  font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.msg-compose-send:hover { background: var(--green-hover); }
.msg-compose-send:disabled { background: var(--tag-bg); color: var(--muted); cursor: default; }

/* 自己啱啱送出、未確認嗰句(optimistic UI)——淡少少,等收到真確認先變實。 */
.msg-bubble-row.is-pending .msg-bubble { opacity: .6; }

/* 舊留言未讀嘅指路牌行(2026-09-16 清鬼數)——樣照抄普通對話行,
   唔另開一套。淨係開唔到嗰啲(舊單冇任務編號)撳唔落去,要睇得出。 */
.msg-row-legacy.is-dead { cursor: default; opacity: .72; }