/* Hikos · 任务 e8a5bf81（道哥 #20186 第 4 项）· 站内信全局概览（统计 + 往来网络 + 邮箱导航）与组员邮箱。
   颜色一律走皮肤令牌（src/kmind/tokens.css）：白天 / 夜间皮肤各自成立；小组色经 --c 注入。只在远端模式生效。 */

/* ---------- ① 全局概览 ---------- */
html[data-kmb="remote"] .kmb-mo { display: flex; flex-direction: column; gap: 14px; container-type: inline-size; }
html[data-kmb="remote"] .kmb-mo-metrics { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
html[data-kmb="remote"] .kmb-mo-metric { background: var(--k-tint, var(--k-bg)); border-color: var(--k-line); text-align: center; }
html[data-kmb="remote"] .kmb-mo-metric b { color: var(--k-ink); }
html[data-kmb="remote"] .kmb-mo-metric span { color: var(--k-ink3); font-size: 12px; }
html[data-kmb="remote"] .kmb-mo-metric.hot b { color: rgb(var(--k-amber-rgb)); }
html[data-kmb="remote"] .kmb-mo-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); gap: 14px; align-items: start; }
@media (max-width: 960px) { html[data-kmb="remote"] .kmb-mo-grid { grid-template-columns: 1fr; } }
@container (max-width: 820px) { html[data-kmb="remote"] .kmb-mo-grid { grid-template-columns: 1fr; } html[data-kmb="remote"] .kmb-mo-metrics { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); } }   /* 宇宙视图的对话窗等窄容器 */
html[data-kmb="remote"] .kmb-mo-net, html[data-kmb="remote"] .kmb-mo-nav { background: var(--k-tint, var(--k-bg)); border: 1px solid var(--k-line); border-radius: 14px; padding: 12px 14px; min-width: 0; }
html[data-kmb="remote"] .kmb-mo-net > header, html[data-kmb="remote"] .kmb-mo-nav > header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 6px; }
html[data-kmb="remote"] .kmb-mo-net > header b, html[data-kmb="remote"] .kmb-mo-nav > header b { font-size: 14px; color: var(--k-ink); white-space: nowrap; }
html[data-kmb="remote"] .kmb-mo-net > header span, html[data-kmb="remote"] .kmb-mo-nav > header span { font-size: 12px; }
html[data-kmb="remote"] .kmb-mo-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; font-size: 11.5px; color: var(--k-ink3); }
html[data-kmb="remote"] .kmb-mo-legend span { display: inline-flex; align-items: center; gap: 6px; }
html[data-kmb="remote"] .kmb-mo-legend i { display: inline-block; width: 18px; height: 0; border-top: 2px dashed var(--k-line); }
html[data-kmb="remote"] .kmb-mo-legend i.lg-e { border-top: 3px solid rgba(var(--k-acc-rgb), .55); }
html[data-kmb="remote"] .kmb-mo-legend i.lg-w, html[data-kmb="remote"] .kmb-mo-legend i.lg-h { width: 8px; height: 8px; border: 0; border-radius: 50%; background: var(--k-acc); box-shadow: 0 0 6px var(--k-acc); }
html[data-kmb="remote"] .kmb-mo-legend i.lg-h { background: rgb(var(--k-amber-rgb)); box-shadow: 0 0 6px rgb(var(--k-amber-rgb)); }

/* 网络图：SVG 自适应宽度，颜色全部取令牌 */
html[data-kmb="remote"] .kmb-net { display: block; width: 100%; height: auto; max-height: 520px; overflow: visible; font-family: inherit; }
html[data-kmb="remote"] .kmb-net-s { stroke: var(--k-line); stroke-width: 1.2; stroke-dasharray: 3 4; fill: none; }
html[data-kmb="remote"] .kmb-net-e { fill: none; stroke: rgba(var(--k-acc-rgb), .42); stroke-linecap: round; transition: stroke .2s; }
html[data-kmb="remote"] .kmb-net-e.hot { stroke: rgba(var(--k-amber-rgb), .6); }
html[data-kmb="remote"] .kmb-net-e:hover { stroke: var(--k-acc); }
html[data-kmb="remote"] .kmb-net-w { fill: var(--k-acc); filter: drop-shadow(0 0 3px var(--k-acc)); pointer-events: none; }
html[data-kmb="remote"] .kmb-net-w.hot { fill: rgb(var(--k-amber-rgb)); filter: drop-shadow(0 0 4px rgb(var(--k-amber-rgb))); }
html[data-theme="night"][data-kmb="remote"] .kmb-net-w { filter: drop-shadow(0 0 6px var(--k-acc)) drop-shadow(0 0 12px rgba(var(--k-acc-rgb), .5)); }
html[data-theme="night"][data-kmb="remote"] .kmb-net-w.hot { filter: drop-shadow(0 0 6px rgb(var(--k-amber-rgb))) drop-shadow(0 0 12px rgba(var(--k-amber-rgb), .5)); }
html[data-kmb="remote"] .kmb-net-n { cursor: pointer; outline: none; }
html[data-kmb="remote"] .kmb-net-halo { fill: var(--c, var(--k-acc)); opacity: 0; transition: opacity .18s; }
html[data-kmb="remote"] .kmb-net-n:hover .kmb-net-halo, html[data-kmb="remote"] .kmb-net-n:focus-visible .kmb-net-halo { opacity: .18; }
html[data-kmb="remote"] .kmb-net-c { fill: var(--c, var(--k-acc)); stroke: var(--k-bg); stroke-width: 2; }
html[data-kmb="remote"] .kmb-net-member .kmb-net-c { fill: var(--k-bg); stroke: var(--c, var(--k-acc)); stroke-width: 2; }
html[data-kmb="remote"] .kmb-net-owner .kmb-net-c { fill: var(--k-ink); stroke: var(--k-bg); }
html[data-kmb="remote"] .kmb-net-more .kmb-net-c { fill: var(--k-hover); stroke: var(--k-line); stroke-dasharray: 2 2; }
html[data-kmb="remote"] .kmb-net-i { text-anchor: middle; font-size: 12px; font-weight: 600; fill: var(--k-on-acc, #fff); pointer-events: none; }
html[data-kmb="remote"] .kmb-net-member .kmb-net-i { fill: var(--c, var(--k-acc)); font-size: 11px; }
html[data-kmb="remote"] .kmb-net-owner .kmb-net-i { fill: var(--k-bg); font-size: 14px; }
html[data-kmb="remote"] .kmb-net-more .kmb-net-i { fill: var(--k-ink3); font-size: 10px; }
html[data-kmb="remote"] .kmb-net-l { text-anchor: middle; font-size: 11px; fill: var(--k-ink2); pointer-events: none; }
html[data-kmb="remote"] .kmb-net-leader .kmb-net-l { font-weight: 600; fill: var(--k-ink); }
html[data-kmb="remote"] .kmb-net-b circle { fill: rgb(var(--k-amber-rgb)); stroke: var(--k-bg); stroke-width: 1.5; }
html[data-kmb="remote"] .kmb-net-b text { text-anchor: middle; font-size: 9px; font-weight: 700; fill: #fff; }
html[data-kmb="remote"] .kmb-net-struct { opacity: .9; }

/* 邮箱导航 */
html[data-kmb="remote"] .kmb-mo-team { margin: 6px 0 10px; }
html[data-kmb="remote"] .kmb-mo-team h4 { display: flex; align-items: center; gap: 8px; margin: 6px 0 4px; font-size: 12.5px; color: var(--k-ink2); font-weight: 600; }
html[data-kmb="remote"] .kmb-mo-team h4 .kmb-muted { font-weight: 400; margin-left: auto; font-size: 11.5px; }
html[data-kmb="remote"] .kmb-mo-team.flash { animation: kmb-mo-flash 1.2s ease-out; border-radius: 10px; }
@keyframes kmb-mo-flash { 0% { background: rgba(var(--k-acc-rgb), .18); } 100% { background: transparent; } }
html[data-kmb="remote"] .kmb-mo-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--k-acc)); flex: none; }
html[data-kmb="remote"] .kmb-mo-box { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--k-ink); text-align: left; cursor: pointer; font: inherit; }
html[data-kmb="remote"] .kmb-mo-box:hover { background: var(--k-hover); border-color: var(--k-line); }
html[data-kmb="remote"] .kmb-mo-box img, html[data-kmb="remote"] .kmb-mo-box .avatar { width: 26px; height: 26px; border-radius: 50%; flex: none; }
html[data-kmb="remote"] .kmb-mo-av { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--k-sel); color: var(--k-ink2); font-size: 12px; font-style: normal; flex: none; }
html[data-kmb="remote"] .kmb-mo-av.big { width: 40px; height: 40px; font-size: 16px; }
html[data-kmb="remote"] .kmb-mo-av.sm { width: 22px; height: 22px; font-size: 11px; }
html[data-kmb="remote"] .kmb-mo-name { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; }
html[data-kmb="remote"] .kmb-mo-name small { font-size: 10.5px; padding: 0 5px; border-radius: 6px; background: rgba(var(--k-acc-rgb), .12); color: var(--k-acc); }
html[data-kmb="remote"] .kmb-mo-box.leader .kmb-mo-name { font-weight: 600; }
html[data-kmb="remote"] .kmb-mo-io { margin-left: auto; font-size: 11px; color: var(--k-ink3); white-space: nowrap; }
html[data-kmb="remote"] .kmb-mo-unread { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: rgb(var(--k-amber-rgb)); color: #fff; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }
html[data-kmb="remote"] .kmb-mo-box svg:last-child { color: var(--k-dim); flex: none; }

/* ---------- ② 组员邮箱 ---------- */
html[data-kmb="remote"] .kmb-mbox-wrap { container-type: inline-size; flex: 1; min-height: 0; }
html[data-kmb="remote"] .kmb-mbox { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 14px; align-items: start; min-height: 0; }
html[data-kmb="remote"] .kmb-mbox-q { height: 28px; font-size: 12px; width: 180px; padding: 0 10px; }
html[data-kmb="remote"] .kmb-mbox-side { display: flex; flex-direction: column; gap: 10px; background: var(--k-tint, var(--k-bg)); border: 1px solid var(--k-line); border-radius: 14px; padding: 12px; position: sticky; top: 0; }
html[data-kmb="remote"] .kmb-mbox-who { display: flex; align-items: center; gap: 10px; }
html[data-kmb="remote"] .kmb-mbox-who img, html[data-kmb="remote"] .kmb-mbox-who .avatar { width: 40px; height: 40px; border-radius: 50%; }
html[data-kmb="remote"] .kmb-mbox-who b { display: block; font-size: 14px; color: var(--k-ink); }
html[data-kmb="remote"] .kmb-mbox-who small { color: var(--k-ink3); font-size: 11.5px; }
html[data-kmb="remote"] .kmb-mbox-go { display: flex; gap: 6px; }
html[data-kmb="remote"] .kmb-mbox-go button { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 4px 10px; }
html[data-kmb="remote"] .kmb-mbox-filters, html[data-kmb="remote"] .kmb-mbox-labels, html[data-kmb="remote"] .kmb-mbox-peers { display: flex; flex-direction: column; gap: 2px; }
html[data-kmb="remote"] .kmb-mbox-side .section-label { margin: 6px 0 2px; font-size: 11px; color: var(--k-ink3); }
html[data-kmb="remote"] .kmb-mbox-chip { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--k-ink2); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
html[data-kmb="remote"] .kmb-mbox-chip:hover { background: var(--k-hover); }
html[data-kmb="remote"] .kmb-mbox-chip.on { background: var(--k-sel); color: var(--k-acc); font-weight: 600; }
html[data-kmb="remote"] .kmb-mbox-chip.dim { color: var(--k-dim); font-size: 12px; }
html[data-kmb="remote"] .kmb-mbox-chip .kmb-n { font-size: 11px; color: var(--k-ink3); font-style: normal; }
html[data-kmb="remote"] .kmb-mbox-chip.on .kmb-n { color: var(--k-acc); }
html[data-kmb="remote"] .kmb-mbox-peer { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border: 0; border-radius: 9px; background: transparent; color: var(--k-ink2); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
html[data-kmb="remote"] .kmb-mbox-peer:hover { background: var(--k-hover); }
html[data-kmb="remote"] .kmb-mbox-peer.on { background: var(--k-sel); color: var(--k-acc); }
html[data-kmb="remote"] .kmb-mbox-peer img, html[data-kmb="remote"] .kmb-mbox-peer .avatar { width: 22px; height: 22px; border-radius: 50%; }
html[data-kmb="remote"] .kmb-mbox-peer span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-kmb="remote"] .kmb-mbox-peer small { color: var(--k-dim); font-size: 11px; }
html[data-kmb="remote"] .kmb-mbox-main { min-width: 0; background: var(--k-tint, var(--k-bg)); border: 1px solid var(--k-line); border-radius: 14px; overflow: hidden; }
html[data-kmb="remote"] .kmb-mbox-crumb { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--k-line); font-size: 12px; color: var(--k-ink2); }
html[data-kmb="remote"] .kmb-mbox-crumb .kmb-muted { margin-left: auto; }
html[data-kmb="remote"] .kmb-mbox-row { display: grid; grid-template-columns: 18px 128px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 9px 14px; border: 0; border-bottom: 1px solid var(--k-line2, var(--k-line)); background: transparent; color: var(--k-ink2); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
html[data-kmb="remote"] .kmb-mbox-row:hover { background: var(--k-hover); }
html[data-kmb="remote"] .kmb-mbox-row.unread { color: var(--k-ink); }
html[data-kmb="remote"] .kmb-mbox-row.unread .kmb-mbox-cp, html[data-kmb="remote"] .kmb-mbox-row.unread .kmb-mbox-subj b { font-weight: 700; }
html[data-kmb="remote"] .kmb-mbox-row.archived { opacity: .7; }
html[data-kmb="remote"] .kmb-mbox-dir { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: var(--k-dim); font-style: normal; }
html[data-kmb="remote"] .kmb-mbox-dir.in { color: var(--k-acc); background: rgba(var(--k-acc-rgb), .12); }
html[data-kmb="remote"] .kmb-mbox-dir.in svg { transform: rotate(180deg); }
html[data-kmb="remote"] .kmb-mbox-row.unread .kmb-mbox-dir.in { background: rgb(var(--k-amber-rgb)); color: #fff; }
html[data-kmb="remote"] .kmb-mbox-cp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-kmb="remote"] .kmb-mbox-cp small { margin-left: 4px; color: var(--k-dim); font-size: 11px; }
html[data-kmb="remote"] .kmb-mbox-subj { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; }
html[data-kmb="remote"] .kmb-mbox-subj b { font-weight: 500; flex: none; max-width: 60%; overflow: hidden; text-overflow: ellipsis; }
html[data-kmb="remote"] .kmb-mbox-snip { color: var(--k-ink3); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
html[data-kmb="remote"] .kmb-mbox-tag { display: inline-block; padding: 0 6px; border-radius: 6px; background: rgba(var(--k-acc-rgb), .1); color: var(--k-acc); font-size: 11px; font-style: normal; line-height: 18px; white-space: nowrap; }
html[data-kmb="remote"] .kmb-mbox-tag.sys { background: var(--k-hover); color: var(--k-ink3); }
html[data-kmb="remote"] .kmb-mbox-meta { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--k-dim); white-space: nowrap; }
html[data-kmb="remote"] .kmb-mbox-meta small { padding: 0 5px; border-radius: 6px; background: var(--k-hover); }
@media (max-width: 640px) { html[data-kmb="remote"] .kmb-mbox-row { grid-template-columns: 18px minmax(0, 1fr) auto; } html[data-kmb="remote"] .kmb-mbox-cp { display: none; } }

/* 读信 */
html[data-kmb="remote"] .kmb-mbox-read { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 20px; }
html[data-kmb="remote"] .kmb-mbox-readhead { display: flex; align-items: center; gap: 12px; }
html[data-kmb="remote"] .kmb-mbox-readhead b { display: block; font-size: 15px; color: var(--k-ink); }
html[data-kmb="remote"] .kmb-mbox-readhead small { display: block; font-size: 12px; }
html[data-kmb="remote"] .kmb-mbox-readhead button { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
html[data-kmb="remote"] .kmb-mbox-backbtn svg { transform: rotate(180deg); }
html[data-kmb="remote"] .kmb-mbox-letters { display: flex; flex-direction: column; gap: 10px; }
html[data-kmb="remote"] .kmb-mbox-letter { border: 1px solid var(--k-line); border-radius: 12px; padding: 10px 14px; background: var(--k-bg); }
html[data-kmb="remote"] .kmb-mbox-letter.out { border-left: 3px solid rgba(var(--k-acc-rgb), .45); }
html[data-kmb="remote"] .kmb-mbox-letter.in { border-left: 3px solid var(--k-line); }
html[data-kmb="remote"] .kmb-mbox-letter.unread { border-left-color: rgb(var(--k-amber-rgb)); }
html[data-kmb="remote"] .kmb-mbox-letter header { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; font-size: 12.5px; }
html[data-kmb="remote"] .kmb-mbox-from { font-weight: 600; color: var(--k-ink); }
html[data-kmb="remote"] .kmb-mbox-letter header time { margin-left: auto; font-size: 11.5px; }
html[data-kmb="remote"] .kmb-mbox-letter header .link { font-size: 12px; }
html[data-kmb="remote"] .kmb-mbox-text { font-size: 13.5px; line-height: 1.6; color: var(--k-ink); white-space: normal; word-break: break-word; }
html[data-kmb="remote"] .kmb-mbox-atts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
html[data-kmb="remote"] .kmb-mbox-att { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border: 1px solid var(--k-line); border-radius: 8px; font-size: 12px; color: var(--k-ink2); background: var(--k-tint, var(--k-bg)); }
html[data-kmb="remote"] .kmb-mbox-att small { color: var(--k-dim); }
html[data-kmb="remote"] .kmb-mbox-att .link { font-size: 12px; padding: 0 2px; }
html[data-kmb="remote"] .kmb-mbox-labels-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
html[data-kmb="remote"] .kmb-mbox-ptab { display: flex; flex-direction: column; gap: 12px; }
html[data-kmb="remote"] .kmb-mbox-ptab .kmb-metrics { grid-template-columns: repeat(4, 1fr); }

/* 会话顶栏新按钮（邮箱 / 插件）与「会话」同形 */
html[data-kmb="remote"] .kmb-dmtool svg { display: block; }

/* 窄容器（宇宙视图的对话窗 / 手机）：左栏收成横向芯片条，列表一栏。放在文件末尾：同特异性靠后者赢 */
@media (max-width: 860px) { html[data-kmb="remote"] .kmb-mbox { grid-template-columns: 1fr; } }
@container (max-width: 760px) {
  html[data-kmb="remote"] .kmb-mbox { grid-template-columns: 1fr; }
  html[data-kmb="remote"] .kmb-mbox-side { position: static; }
  html[data-kmb="remote"] .kmb-mbox-filters, html[data-kmb="remote"] .kmb-mbox-labels, html[data-kmb="remote"] .kmb-mbox-peers { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px; }
  html[data-kmb="remote"] .kmb-mbox-side .section-label { width: 100%; margin: 4px 0 0; }
  html[data-kmb="remote"] .kmb-mbox-chip { padding: 4px 10px; border: 1px solid var(--k-line); border-radius: 999px; font-size: 12.5px; }
  html[data-kmb="remote"] .kmb-mbox-peer { padding: 3px 8px 3px 4px; border: 1px solid var(--k-line); border-radius: 999px; }
  html[data-kmb="remote"] .kmb-mbox-peer small { display: none; }
  html[data-kmb="remote"] .kmb-mbox-peer span { flex: none; max-width: 9em; }
}
@container (max-width: 560px) { html[data-kmb="remote"] .kmb-mbox-row { grid-template-columns: 18px minmax(0, 1fr) auto; } html[data-kmb="remote"] .kmb-mbox-cp { display: none; } }