/* ==========================================================================
 * 汇能移动端样式（≤768px）—— 现代简约
 *
 * 架构：
 *   - 底部 TabBar：毛玻璃浮层 / 邮箱 / 通讯录 / 写信（凸起 CTA）/ 设置
 *   - 邮件列表：呼吸感行卡（分隔改为留白）+ 按压反馈 + 未读蓝点
 *   - 阅读页 / 写信页：沉浸式卡片 + 底部安全区适配
 *   - 抽屉导航：圆角浮层化
 * 全部使用 _variables.less 设计 token；动效尊重 prefers-reduced-motion。
 * ========================================================================== */
/* TabBar 桌面端隐藏 */
.qq-tabbar {
  display: none;
}
@media screen and (max-width: 768px) {
  /* ---------- 全局基底 ---------- */
  body:not(.task-login) {
    background: #f7f8fa;
  }
  /* 底部留出 TabBar 高度（含安全区） */
  body:not(.task-login) #layout {
    padding-top: 0 !important;
    padding-bottom: calc(44px + 16px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* 桌面顶栏不入移动端 */
  #qq-topbar {
    display: none !important;
  }
  /* ---------- 底部 TabBar：毛玻璃浮层 ---------- */
  .qq-tabbar {
    position: fixed;
    z-index: 1000;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: stretch;
    height: calc(44px + 12px + env(safe-area-inset-bottom, 0px));
    padding: 0 8px env(safe-area-inset-bottom, 0px);
    background: rgba(255, 255, 255, 0.88);
    border-top: 1px solid #f1f5f9;
    backdrop-filter: blur(16px) saturate(1.6);
    -webkit-backdrop-filter: blur(16px) saturate(1.6);
  }
  .qq-tab {
    position: relative;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    color: #64748b;
    text-decoration: none;
    transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    /* 选中态：图标轻弹 + 主色 */
  }
  .qq-tab:active {
    transform: scale(0.94);
  }
  .qq-tab:before {
    float: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    font-size: 22px !important;
    line-height: 1 !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .qq-tab .inner {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    max-width: 100%;
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .qq-tab.selected {
    color: #1d6fff;
    font-weight: 600;
  }
  .qq-tab.selected:before {
    color: #1d6fff;
    transform: translateY(-1px) scale(1.06);
  }
  /* 写信：品牌渐变凸起圆钮（唯一彩色 CTA） */
  .qq-tab-compose:before {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-top: -24px !important;
    color: #fff !important;
    background: linear-gradient(135deg, #3b8bff 0%, #1d6fff 60%, #1466f2 100%);
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(29, 111, 255, 0.32);
  }
  .qq-tab-compose.selected {
    color: #1d6fff;
  }
  .qq-tab-compose.selected:before {
    color: #fff !important;
    transform: translateY(-1px) scale(1.04);
  }
  .qq-tab-compose:active:before {
    transform: scale(0.96);
  }
  /* 邮箱 Tab 未读角标（qqmail-ui.js 写入） */
  .qq-tabbar-unread {
    position: absolute;
    top: 4px;
    display: none;
    min-width: 16px;
    padding: 0 5px;
    color: #fff;
    background: #ef4444;
    border: 2px solid #fff;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
  }
  /* jQuery UI 模态弹窗（联系人选择器等）：层级必须压过顶栏/TabBar（z-index 1000）。
       弹窗在窄屏铺满全屏，按钮面板落在视口底部，
       若低于 TabBar 层级，"确定/添加"按钮会被 TabBar 完全遮住。 */
  .ui-dialog {
    z-index: 2300;
  }
  .ui-widget-overlay {
    z-index: 2250;
  }
  .qq-tab-mail .qq-tabbar-unread {
    display: block;
    left: calc(50% + 8px);
  }
  /* ---------- 抽屉导航：圆角浮层头 ---------- */
  #layout-menu .popover-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
  }
  #layout-menu .popover-header #logo {
    margin: 0;
  }
  /* ---------- 通用触控与按压反馈 ---------- */
  .listing tbody td,
  .listing li a {
    min-height: 44px;
  }
  .toolbar a,
  #taskmenu a,
  .header a.btn {
    min-width: 44px;
    min-height: 44px;
  }
  .popover .listing li a {
    min-height: 44px;
  }
  /* 列表头：白底 + 底部极淡线（去重投影） */
  #messagelist-header,
  body.task-mail #layout-content > .header {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  /* ---------- 邮件列表：呼吸感行卡 ---------- */
  body.task-mail.action-none #messagelist-content {
    min-height: 40vh;
    padding: 8px 12px 12px;
  }
  body.task-mail.action-none table.messagelist {
    display: block;
    width: 100% !important;
    table-layout: fixed;
    /* 未读：主题转主文字色 + 左侧蓝点竖条 */
    /* 选中：蓝光晕底 */
  }
  body.task-mail.action-none table.messagelist > tbody {
    display: block;
    width: 100%;
  }
  body.task-mail.action-none table.messagelist > tbody > tr {
    display: flex !important;
    width: 100% !important;
    min-width: 0;
    min-height: 48px;
    margin-bottom: 4px;
    background: #fff;
    border: 0;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.03);
    box-sizing: border-box;
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    /* 按压反馈：卡片下压 */
    /* 两行式主列：发件人+时间 / 主题 */
    /* 旗标列收窄 */
  }
  body.task-mail.action-none table.messagelist > tbody > tr:active {
    transform: scale(0.985);
    box-shadow: none;
  }
  body.task-mail.action-none table.messagelist > tbody > tr > td {
    border-bottom: 0 !important;
    min-width: 0;
    box-sizing: border-box;
  }
  body.task-mail.action-none table.messagelist > tbody > tr > td.selection {
    flex: 0 0 32px;
    width: 32px !important;
  }
  body.task-mail.action-none table.messagelist > tbody > tr > td.selection input {
    width: 16px;
    height: 16px;
  }
  body.task-mail.action-none table.messagelist > tbody > tr > td.threads {
    flex: 0 0 1.25em;
    width: 1.25em !important;
  }
  body.task-mail.action-none table.messagelist > tbody > tr > td.subject {
    display: flex !important;
    flex: 1 1 0 !important;
    flex-wrap: wrap;
    align-content: center;
    width: auto !important;
    min-width: 0 !important;
    padding: 12px 8px 12px 0 !important;
    overflow: hidden;
  }
  body.task-mail.action-none table.messagelist > tbody > tr > td.subject span.msgicon.status {
    position: static;
    align-self: center;
    width: 16px;
    margin-right: 8px;
  }
  body.task-mail.action-none table.messagelist > tbody > tr > td.subject span.msgicon.status:before {
    height: auto;
    line-height: 1;
  }
  body.task-mail.action-none table.messagelist > tbody > tr > td.subject span.fromto {
    flex: 1 1 auto;
    max-width: none;
    padding: 0;
    overflow: hidden;
    color: #0f172a;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body.task-mail.action-none table.messagelist > tbody > tr > td.subject span.date {
    float: none !important;
    flex: 0 0 auto;
    padding-left: 8px;
    color: #64748b;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
  }
  body.task-mail.action-none table.messagelist > tbody > tr > td.subject span.subject {
    flex: 0 0 100%;
    width: 100% !important;
    margin-top: 1px;
    overflow: hidden;
    color: #64748b;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body.task-mail.action-none table.messagelist > tbody > tr > td.flags {
    width: 2.2em !important;
    padding-right: 4px !important;
  }
  body.task-mail.action-none table.messagelist > tbody > tr > td.flags > span {
    width: 18px;
  }
  body.task-mail.action-none table.messagelist tr.unread td.subject span.fromto,
  body.task-mail.action-none table.messagelist tr.unread td.subject span.subject {
    color: #0f172a !important;
  }
  body.task-mail.action-none table.messagelist tr.unread td.subject span.subject {
    color: #334155 !important;
  }
  body.task-mail.action-none table.messagelist tr.unread {
    box-shadow: inset 3px 0 0 #1d6fff, 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.03);
  }
  body.task-mail.action-none table.messagelist tr.selected td {
    color: #0f172a;
    background: #eff6ff;
  }
  /* ---------- 阅读页：沉浸式卡片 ---------- */
  body.task-mail.action-show #layout-content,
  body.task-mail.action-preview #layout-content {
    background: #f7f8fa;
  }
  body.task-mail.action-show #layout-content .frame-content,
  body.task-mail.action-preview #layout-content .frame-content {
    padding: 12px;
  }
  body.task-mail.action-show #layout-content #message-header,
  body.task-mail.action-preview #layout-content #message-header,
  body.task-mail.action-show #layout-content #message-content,
  body.task-mail.action-preview #layout-content #message-content {
    max-width: none;
    background: #fff;
    border: 0;
  }
  body.task-mail.action-show #layout-content #message-header,
  body.task-mail.action-preview #layout-content #message-header {
    margin: 0 12px;
    padding: 16px;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.03);
  }
  body.task-mail.action-show #layout-content #message-header .subject,
  body.task-mail.action-preview #layout-content #message-header .subject {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
  }
  body.task-mail.action-show #layout-content #message-content,
  body.task-mail.action-preview #layout-content #message-content {
    min-height: 240px;
    margin: 0 12px;
    padding: 8px 16px 24px;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.03);
  }
  /* ---------- 写信页：卡片化表头 + 沉浸编辑器 + 发送栏 ---------- */
  body.task-mail.action-compose {
    /* 表头行：无框输入 + 行分隔线 + 聚焦高亮 */
    /* 收件人行右侧按钮：主色软底（添加）+ 中性软底（删除） */
    /* 正文编辑器：内嵌圆角区 + 聚焦光环 */
  }
  body.task-mail.action-compose #compose-content {
    padding: 12px;
    background: #f7f8fa;
  }
  body.task-mail.action-compose #compose-content > form {
    padding: 0 12px 12px;
    background: #fff;
    border: 0;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.03);
  }
  body.task-mail.action-compose #compose-content > .formbuttons {
    padding: 12px;
    background: #fff;
    border: 0;
    border-top: 1px solid #f1f5f9;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.03);
  }
  body.task-mail.action-compose #compose-headers .compose-headers .form-group {
    margin: 0 !important;
    padding: 4px 0;
    border-bottom: 1px solid #f1f5f9;
  }
  body.task-mail.action-compose #compose-headers .compose-headers .form-group:last-child {
    border-bottom: 0;
  }
  body.task-mail.action-compose #compose-headers .compose-headers .form-group:focus-within {
    background: #eff6ff;
    border-bottom-color: transparent;
  }
  body.task-mail.action-compose #compose-headers .compose-headers .form-group > label {
    flex: 0 0 3.5em;
    padding-top: 13px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.2;
  }
  body.task-mail.action-compose #compose-headers .compose-headers .form-group .form-control {
    padding-right: 8px;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  body.task-mail.action-compose #compose-headers .compose-headers .form-group .form-control:focus {
    outline: 0;
    box-shadow: none;
  }
  body.task-mail.action-compose #compose_subject .form-control {
    font-weight: 600;
  }
  body.task-mail.action-compose #compose-headers .input-group-append .input-group-text.icon {
    margin-left: 4px;
    padding: 0 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
  }
  body.task-mail.action-compose #compose-headers .input-group-append .input-group-text.icon.add {
    color: #1d6fff;
    background: rgba(29, 111, 255, 0.09);
  }
  body.task-mail.action-compose #compose-headers .input-group-append .input-group-text.icon.delete {
    color: #64748b;
    background: #f1f5f9;
  }
  body.task-mail.action-compose #composebodycontainer {
    min-height: 260px;
    margin-top: 8px;
    overflow: hidden;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 6px;
    transition: border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), background 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
  body.task-mail.action-compose #composebodycontainer:focus-within {
    background: #fff;
    border-color: rgba(29, 111, 255, 0.4);
    box-shadow: 0 0 0 3px rgba(29, 111, 255, 0.1);
  }
  body.task-mail.action-compose #composebodycontainer #composebody {
    display: block;
    width: 100%;
    min-height: 258px;
    padding: 12px 16px;
    border: 0;
    background: transparent;
    box-shadow: none;
    resize: none;
  }
  body.task-mail.action-compose #composebodycontainer #composebody:focus {
    outline: 0;
    box-shadow: none;
  }
  body.task-mail.action-compose #composebodycontainer iframe {
    display: block;
    width: 100%;
    min-height: 258px;
    border: 0;
  }
  body.task-mail.action-compose .formbuttons .btn-primary {
    min-width: 96px;
    height: 44px;
    background: linear-gradient(135deg, #3b8bff 0%, #1d6fff 60%, #1466f2 100%) !important;
    border: 0 !important;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(29, 111, 255, 0.28);
    font-size: 14px;
    font-weight: 600;
  }
  /* ---------- 通讯录 / 设置 ---------- */
  body.task-addressbook .listing li a,
  body.task-settings .listing li a {
    min-height: 44px;
  }
  body.task-addressbook #layout-content .iframe-wrapper,
  body.task-settings #layout-content .iframe-wrapper {
    padding: 12px;
  }
  body.task-addressbook #layout-content .iframe-wrapper iframe,
  body.task-settings #layout-content .iframe-wrapper iframe {
    border: 0;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.03);
  }
}
/* ---------- 手机（≤480px）：进一步收紧 ---------- */
@media screen and (max-width: 480px) {
  .qq-tab .inner {
    font-size: 10px;
  }
  body.task-mail.action-none #messagelist-content {
    padding: 4px 8px 8px;
  }
  body.task-mail.action-none table.messagelist  > tbody > tr > td.subject span.date {
    padding-left: 4px;
  }
}
/* ---------- 平板（769~1024px）：顶栏保留，品牌副标题收纳 ---------- */
@media screen and (max-width: 1024px) and (min-width: 769px) {
  #qq-topbar {
    padding: 0 16px;
  }
  .qq-topbar-brand {
    flex: 0 0 auto;
  }
  .qq-topbar-brand .brand-company {
    display: none;
  }
  .qq-topbar-user .qq-topbar-name {
    max-width: 96px;
  }
}
/* ---------- 动效降级 ---------- */
@media (prefers-reduced-motion: reduce) {
  .qq-tab,
  .qq-tab:before,
  body.task-mail.action-none table.messagelist  > tbody > tr {
    transition: none;
  }
}
/**
 * 汇能移动端皮肤（hnmobile）—— 覆写 Elastic 基础样式
 *
 * 参考 QQ 邮箱 App：白底行卡、蓝色 CTA、底部 TabBar、安全区适配。
 * 全部引用 Elastic variables.less 的 token；触控热区 ≥44px。
 */
/* 设计 token（颜色/图标字体变量；reference 模式只取变量与 mixin，不输出 CSS）。
   elastic variables.less 会经 (optional) "_variables" 链式加载本皮肤目录下的
   _variables.less（编译时 include-path 需包含 skins/hnmobile/styles） */
/* ========== Icon 字体（引用 elastic 的 FontAwesome，可让 TabBar/工具栏图标渲染） ========== */
@font-face {
  font-family: 'Icons';
  font-style: normal;
  font-weight: 900;
  src: url("../../elastic/fonts/fa-solid-900.woff2") format('woff2'), url("../../elastic/fonts/fa-solid-900.woff") format('woff');
}
@font-face {
  font-family: 'Icons';
  font-style: normal;
  font-weight: 400;
  src: url("../../elastic/fonts/fa-regular-400.woff2") format('woff2'), url("../../elastic/fonts/fa-regular-400.woff") format('woff');
}
/* ========== 基础：移动优先 ========== */
html,
body {
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
}
body.hn-mobile {
  background: #f7f8fa;
  font-size: 15px;
}
body.hn-mobile #layout {
  /* 100dvh：跟随手机浏览器地址栏收展的动态视口，防止布局底部被顶出屏幕 */
  height: 100dvh;
  padding-top: 52px !important;
  padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
}
/* 不支持 dvh 的旧浏览器回退：svh（小视口，永远可见的最小高度） */
@supports not (height: 100dvh) {
  body.hn-mobile #layout {
    height: 100svh;
  }
}
/* ========== 全局导航骨架：整页跳转/刷新期间的占位首屏 ==========
   HTML 到达即渲染（CSS 阻塞渲染无裸 HTML 白屏）；页面真实内容就绪后
   由 hnmobile.js 淡出移除。结构与列表骨架一致，观感上与切换 tab 无差别 */
.hn-nav-skeleton {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5000;
  display: flex;
  flex-direction: column;
  background: #f7f8fa;
  overflow: hidden;
  /* 模拟顶栏 */
  /* 骨架行区 */
  /* 所有占位块统一 shimmer 动画 */
  /* 淡出过渡：真实页面渲染完成后由 JS 加 .hn-ns-out 触发 */
}
.hn-nav-skeleton .hn-ns-appbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: calc(52px + env(safe-area-inset-top, 0px));
  margin-top: env(safe-area-inset-top, 0px);
  padding: 0 14px;
  background: #fff;
  border-bottom: 1px solid #f1f5f9;
}
.hn-nav-skeleton .hn-ns-appbar .hn-ns-back,
.hn-nav-skeleton .hn-ns-appbar .hn-ns-action {
  width: 44px;
  height: 16px;
  border-radius: 8px;
}
.hn-nav-skeleton .hn-ns-appbar .hn-ns-title {
  flex: 1 1 auto;
  height: 16px;
  margin: 0 12px;
  border-radius: 8px;
}
.hn-nav-skeleton .hn-ns-body {
  flex: 1 1 auto;
  overflow: hidden;
  padding: 4px 16px 0;
}
.hn-nav-skeleton .hn-ns-row {
  display: flex;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid #eef2f6;
  background: #fff;
}
.hn-nav-skeleton .hn-ns-row .hn-ns-avatar {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin-right: 12px;
  border-radius: 50%;
}
.hn-nav-skeleton .hn-ns-row .hn-ns-lines {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 2px;
}
.hn-nav-skeleton .hn-ns-row .hn-ns-line {
  display: block;
  height: 12px;
  margin-bottom: 9px;
  border-radius: 6px;
}
.hn-nav-skeleton .hn-ns-row .hn-ns-line.hn-ns-line-sm {
  width: 42%;
  height: 14px;
  margin-bottom: 12px;
}
.hn-nav-skeleton .hn-ns-row .hn-ns-line.hn-ns-line-md {
  width: 88%;
}
.hn-nav-skeleton .hn-ns-row .hn-ns-line.hn-ns-line-xs {
  width: 64%;
  margin-bottom: 0;
}
.hn-nav-skeleton .hn-ns-avatar,
.hn-nav-skeleton .hn-ns-line,
.hn-nav-skeleton .hn-ns-back,
.hn-nav-skeleton .hn-ns-title,
.hn-nav-skeleton .hn-ns-action {
  background: linear-gradient(90deg, #eef2f6 25%, #f6f8fb 37%, #eef2f6 63%);
  background-size: 400% 100%;
  animation: hn-sk-shimmer 1.3s ease-in-out infinite;
}
.hn-nav-skeleton.hn-ns-out {
  opacity: 0;
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
/* ========== 顶栏 ========== */
.hn-appbar {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  height: calc(52px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 8px 0;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid #f1f5f9;
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
}
.hn-appbar-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  margin: 0;
  color: #0f172a;
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 左右容器等宽（96px），保证中间标题绝对居中：
   详情页右侧有两个 44px 按钮（88px），左侧仅一个返回键，不等宽会导致标题偏移 */
.hn-appbar-left,
.hn-appbar-right {
  display: flex;
  align-items: center;
  flex: 0 0 96px;
}
.hn-appbar-left {
  justify-content: flex-start;
}
.hn-appbar-right {
  justify-content: flex-end;
}
/* 邮件详情页顶栏右侧：上一封/下一封切换（空心线框 SVG，44px 触控热区） */
.hn-appbar-navmsg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: #0f172a;
  text-decoration: none;
  /* 命令不可用（如已在第一封/最后一封）时置灰，提示不可切换 */
}
.hn-appbar-navmsg .hn-navmsg-ico {
  display: block;
  width: 22px;
  height: 22px;
}
.hn-appbar-navmsg.disabled {
  opacity: 0.35;
  pointer-events: none;
}
.hn-appbar-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: -3px;
  color: #0C1C33;
  text-decoration: none;
}
.hn-appbar-back svg {
  display: block;
}
/* 信头弹窗（headers dialog，iframe 内为 Elastic dialog.html + hn-mobile body）：
   覆盖服务端 dialog_class=text-nowrap，移动端信头强制换行不溢出。
   注意：iframe 请求为 action=headers，body class 是 action-headers 而非 action-none */
body.task-mail.hn-mobile .frame-content.text-nowrap {
  white-space: normal !important;
  word-break: break-all;
  overflow-wrap: anywhere;
  overflow-x: hidden;
}
body.task-mail.hn-mobile .frame-content.text-nowrap font {
  font-weight: 600;
  color: #334155;
}
/* 预览面板专用返回键：仅面板打开（is-visible）时显示 */
.hn-appbar-back-panel {
  display: none;
}
.hn-appbar-back-panel.is-visible {
  display: inline-flex;
}
/* 列表页预览面板：自带二级顶栏隐藏（返回/标题由 appbar 承担），
   仅视觉隐藏，Elastic ui.js 仍需其中的 back-list-button 绑定 show_list() */
body.task-mail.hn-mobile #layout-content > .header.hn-panel-header,
body.task-addressbook.hn-mobile #layout-content > .header.hn-panel-header {
  display: none !important;
}
/* 预览面板底部的 Elastic 克隆按钮条/前一后一条：与 TabBar 冲突，整条隐藏 */
body.task-mail.hn-mobile #layout-content .content-frame-navigation,
body.task-addressbook.hn-mobile #layout-content .content-frame-navigation {
  display: none !important;
}
.hn-appbar-action {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 12px;
  color: #1d6fff;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.hn-appbar-action:active {
  background: #f1f5f9;
}
.hn-appbar-action.disabled {
  color: #cbd5e1;
}
/* 详情页右上角"更多操作"（⋯）按钮：加大加粗更醒目 */
.hn-msg-more {
  width: 40px;
  height: 40px;
  padding: 0;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}
.hn-msg-more:active {
  background: #f1f5f9;
}
/* ========== 移动端消息提示（Toast）：覆盖 Elastic 桌面式居中消息框 ========== */
body.hn-mobile #messagestack {
  position: fixed;
  top: calc(60px + env(safe-area-inset-top, 0px));
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translateX(-50%);
  z-index: 2400;
  width: auto;
  max-width: calc(100vw - 40px);
  max-height: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
body.hn-mobile #messagestack div {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-height: 0;
  margin: 0;
  padding: 12px 8px;
  border: none;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.85);
  color: #fff;
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
  box-shadow: 0 4px 8px rgba(15, 23, 42, 0.06), 0 16px 40px rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: hn-toast-in 0.25s cubic-bezier(0.4, 0, 0.2, 1) both;
}
body.hn-mobile #messagestack div.voice {
  position: absolute;
  top: -1000px;
}
body.hn-mobile #messagestack div:not(.loading) {
  min-width: 280px;
  justify-content: center;
}
body.hn-mobile #messagestack div i.icon {
  font-size: 1.25em !important;
  line-height: 1;
}
body.hn-mobile #messagestack div i.icon:before {
  color: #fff;
}
body.hn-mobile #messagestack div.alert-info {
  background: #1d6fff;
}
body.hn-mobile #messagestack div.alert-success {
  background: #10b981;
}
body.hn-mobile #messagestack div.alert-warning {
  background: #f59e0b;
}
body.hn-mobile #messagestack div.alert-danger {
  background: #ef4444;
}
body.hn-mobile #messagestack div.loading {
  display: none;
}
@keyframes hn-toast-in {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes hn-spin {
  to {
    transform: rotate(360deg);
  }
}
body.hn-mobile .iframe-loader {
  top: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.6);
}
body.hn-mobile .iframe-loader .spinner-border {
  width: 36px;
  height: 36px;
  border-width: 4px;
  color: #1d6fff;
  border-color: currentColor rgba(29, 111, 255, 0.2) currentColor currentColor;
}
body.hn-mobile .iframe-loader .spinner-border .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
/* ========== 底部 TabBar ========== */
.hn-tabbar {
  position: fixed;
  z-index: 1000;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: stretch;
  height: calc(56px + env(safe-area-inset-bottom, 0px));
  padding: 0 8px env(safe-area-inset-bottom, 0px);
  background: rgba(255, 255, 255, 0.9);
  border-top: 1px solid #f1f5f9;
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
}
.hn-tab {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  color: #64748b;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
}
.hn-tab:before {
  float: none !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  color: inherit;
  font-family: 'Icons';
  font-weight: 900;
  font-size: 21px !important;
  line-height: 1 !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
}
.hn-tab .inner {
  display: block;
  margin-top: 8px;
  overflow: hidden;
  max-width: 100%;
  font-size: 13px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hn-tab:active {
  transform: none;
}
.hn-tab.selected {
  color: #1d6fff;
  font-weight: 600;
}
.hn-tab.selected:before {
  color: #1d6fff;
}
/* Tab 图标（FA）：邮件/通讯录略放大，与中间写信 CTA 更协调 */
.hn-tab-mail:before,
.hn-tab-contacts:before {
  font-size: 22px !important;
}
.hn-tab-mail:before {
  content: "\f0e0";
}
.hn-tab-contacts:before {
  content: "\f2b9";
}
.hn-tab-settings:before {
  content: "\f013";
}
/* 写信凸起 CTA（需 !important 压过 .hn-tab:before 的 width/height:auto） */
.hn-tab-compose:before {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px !important;
  height: 44px !important;
  margin-top: -22px !important;
  float: none !important;
  color: #fff !important;
  font-family: 'Icons';
  font-weight: 900;
  content: "\f2b6";
  background: linear-gradient(135deg, #3b8bff 0%, #1d6fff 60%, #1466f2 100%);
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(29, 111, 255, 0.32);
}
/* TabBar 未读角标（3 Tab：邮件 Tab 中心 ≈ 16.67%） */
.hn-tabbar-unread {
  position: absolute;
  z-index: 2;
  top: 4px;
  left: calc(16.67% + 6px);
  display: none;
  min-width: 16px;
  padding: 0 5px;
  color: #fff;
  background: #ef4444;
  border: 2px solid #fff;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}
/* ========== 隐藏 Elastic 桌面布局元素 ========== */
body.hn-mobile {
  /* Elastic 桌面三栏列宽约束解除：移动端单栏全宽 */
}
body.hn-mobile #qq-topbar {
  display: none !important;
}
body.hn-mobile #layout-sidebar,
body.hn-mobile #layout-list,
body.hn-mobile #layout-content {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  border: 0 !important;
}
/* 顶栏统一：所有主列表页（邮件/通讯录/设置）均使用 hn-appbar，
   内容区不再有内嵌标题头 */
/* Elastic 自身会按小屏模式显示/隐藏面板（hidden 类），此处兜底：
   非选中面板必须隐藏（同屏只留一个面板） */
body.hn-mobile #layout > div.hidden {
  display: none !important;
}
/* ========== 邮件列表 ========== */
body.task-mail.action-none,
body.task-addressbook {
  /* 搜索条：胶囊造型（无点击效果，聚焦仅轻微变色） */
  /* 列表内嵌标题头已移除，标题统一由顶部 hn-appbar 承担；
       保留 .header 基线样式供详情面板（layout-content）使用 */
  /* 列表滚动区：紧贴 Tab 下缘（无空隙） */
  /* 列表加载骨架屏：进页面/切文件夹/刷新时，先显示动画再显示列表内容。
       绝对铺满列表区（盖在真实列表之上演化，加载完由 JS 移除）。
       min-height 必须撑满容器：行数按高度估算可能偏少，不够会被底部露出旧列表 */
  /* 呼吸式 shimmer：灰条从左到右扫过微光 */
  /* 文件夹切换：单行 Tab（小图标 + 文字），横向可滚动，选中仅变蓝不加下划线 */
}
body.task-mail.action-none .hn-searchbar,
body.task-addressbook .hn-searchbar {
  position: relative;
  z-index: 10;
  top: auto;
  left: auto;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  height: auto;
  min-height: 48px;
  line-height: normal;
  margin: 12px 16px 12px;
  padding: 2px 4px 2px 0;
  overflow: visible;
  background: #f1f5f9;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  transition: background 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  /* 右侧图标（放大镜/清空/筛选）：移动端圆形触控热区，无按压反馈 */
  /* 清空（×）：灰色圆形浅底徽标，移动端样式（贴搜索框右缘）。
           仅输入内容后显示：Elastic ui.js 会在有输入时给 .searchbar 加 .active
           （并配 input 事件监听），沿用该状态：默认隐藏，.active 才显示 */
  /* 放大镜提交按钮：移动端无用（回车/搜索键触发搜索），隐藏以让 × 贴右。
           Elastic 本用 display:none 隐藏它，但被上面 a.button 的 display:flex 覆盖，
           变成占 40px 宽的空盒，把清空按钮顶离右缘 */
}
body.task-mail.action-none .hn-searchbar:focus-within,
body.task-addressbook .hn-searchbar:focus-within {
  background: #e9eef5;
  box-shadow: none;
}
body.task-mail.action-none .hn-searchbar form:before,
body.task-addressbook .hn-searchbar form:before,
body.task-mail.action-none .hn-searchbar a:before,
body.task-addressbook .hn-searchbar a:before {
  height: 48px;
  line-height: 48px;
  color: #64748b;
}
body.task-mail.action-none .hn-searchbar form:before,
body.task-addressbook .hn-searchbar form:before {
  font-size: 16px;
}
body.task-mail.action-none .hn-searchbar form,
body.task-addressbook .hn-searchbar form {
  padding-left: 6px;
}
body.task-mail.action-none .hn-searchbar input,
body.task-addressbook .hn-searchbar input {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  min-height: 48px;
  color: #0f172a;
  font-size: 17px;
}
body.task-mail.action-none .hn-searchbar input::placeholder,
body.task-addressbook .hn-searchbar input::placeholder {
  color: #64748b;
}
body.task-mail.action-none .hn-searchbar a.button,
body.task-addressbook .hn-searchbar a.button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 4px 0 0;
  color: #64748b;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: none;
}
body.task-mail.action-none .hn-searchbar a.button:before,
body.task-addressbook .hn-searchbar a.button:before {
  margin: 0;
}
body.task-mail.action-none .hn-searchbar a.button:hover,
body.task-addressbook .hn-searchbar a.button:hover,
body.task-mail.action-none .hn-searchbar a.button:focus,
body.task-addressbook .hn-searchbar a.button:focus,
body.task-mail.action-none .hn-searchbar a.button:focus-visible,
body.task-addressbook .hn-searchbar a.button:focus-visible,
body.task-mail.action-none .hn-searchbar a.button:active,
body.task-addressbook .hn-searchbar a.button:active {
  color: #64748b;
  background: transparent;
  box-shadow: none;
  outline: none;
  opacity: 1;
}
body.task-mail.action-none .hn-searchbar a.button.reset,
body.task-addressbook .hn-searchbar a.button.reset {
  margin-right: 0;
  display: none !important;
}
body.task-mail.action-none .hn-searchbar.active a.button.reset,
body.task-addressbook .hn-searchbar.active a.button.reset {
  display: flex !important;
}
body.task-mail.action-none .hn-searchbar a.button.reset:before,
body.task-addressbook .hn-searchbar a.button.reset:before {
  float: right;
  width: 22px;
  height: 22px;
  margin: 0 3px 0 0;
  padding-top: 4px;
  font-size: 12px;
  line-height: 14px;
  color: #fff;
  background: #b6c2d1;
  border-radius: 50%;
}
body.task-mail.action-none .hn-searchbar a.button.search,
body.task-addressbook .hn-searchbar a.button.search {
  display: none !important;
}
body.task-mail.action-none .header,
body.task-addressbook .header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  min-height: 48px;
  margin: 8px 12px 0;
  padding: 0 14px;
  background: transparent;
  border-bottom: 0;
  line-height: 48px;
}
body.task-mail.action-none .header .header-title,
body.task-addressbook .header .header-title {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  color: #0f172a;
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
}
body.task-mail.action-none .header .hn-list-actions,
body.task-addressbook .header .hn-list-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
body.task-mail.action-none .header .hn-btn-icon,
body.task-addressbook .header .hn-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  color: #64748b;
  background: transparent;
  border: 0;
  text-decoration: none;
}
body.task-mail.action-none .header .hn-btn-icon:before,
body.task-addressbook .header .hn-btn-icon:before {
  float: none;
  width: auto;
  height: auto;
  margin: 0;
  font-size: 18px;
  line-height: 1;
}
body.task-mail.action-none .header .hn-btn-icon .inner,
body.task-addressbook .header .hn-btn-icon .inner {
  display: none;
}
body.task-mail.action-none .header .hn-btn-icon:active,
body.task-addressbook .header .hn-btn-icon:active {
  transform: scale(0.92);
}
body.task-mail.action-none #messagelist-content,
body.task-addressbook #messagelist-content {
  position: relative;
  top: auto;
  min-height: 40vh;
  margin: 0;
  padding: 0 0 calc(56px + env(safe-area-inset-bottom, 0px));
  background: transparent;
}
body.task-mail.action-none .hn-list-loader,
body.task-addressbook .hn-list-loader {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  min-height: 100%;
  z-index: 5;
  background: #fff;
}
body.task-mail.action-none .hn-sk-item,
body.task-addressbook .hn-sk-item {
  display: flex;
  align-items: flex-start;
  margin: 0 16px;
  padding: 16px 0;
  border-bottom: 1px solid #eef2f6;
}
body.task-mail.action-none .hn-sk-item .hn-sk-avatar,
body.task-addressbook .hn-sk-item .hn-sk-avatar {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin-right: 12px;
  border-radius: 50%;
  background: #eef2f6;
}
body.task-mail.action-none .hn-sk-item .hn-sk-lines,
body.task-addressbook .hn-sk-item .hn-sk-lines {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 2px;
}
body.task-mail.action-none .hn-sk-item .hn-sk-lines .hn-sk-line,
body.task-addressbook .hn-sk-item .hn-sk-lines .hn-sk-line {
  display: block;
  height: 12px;
  margin-bottom: 9px;
  border-radius: 6px;
  background: #eef2f6;
}
body.task-mail.action-none .hn-sk-item .hn-sk-lines .hn-sk-line.hn-sk-line-sm,
body.task-addressbook .hn-sk-item .hn-sk-lines .hn-sk-line.hn-sk-line-sm {
  width: 42%;
  height: 14px;
  margin-bottom: 12px;
}
body.task-mail.action-none .hn-sk-item .hn-sk-lines .hn-sk-line.hn-sk-line-md,
body.task-addressbook .hn-sk-item .hn-sk-lines .hn-sk-line.hn-sk-line-md {
  width: 88%;
}
body.task-mail.action-none .hn-sk-item .hn-sk-lines .hn-sk-line.hn-sk-line-xs,
body.task-addressbook .hn-sk-item .hn-sk-lines .hn-sk-line.hn-sk-line-xs {
  width: 64%;
  margin-bottom: 0;
}
body.task-mail.action-none .hn-sk-item .hn-sk-lines .hn-sk-line:last-child,
body.task-addressbook .hn-sk-item .hn-sk-lines .hn-sk-line:last-child {
  margin-bottom: 0;
}
body.task-mail.action-none .hn-sk-item .hn-sk-avatar,
body.task-addressbook .hn-sk-item .hn-sk-avatar,
body.task-mail.action-none .hn-sk-item .hn-sk-line,
body.task-addressbook .hn-sk-item .hn-sk-line {
  background: linear-gradient(90deg, #eef2f6 25%, #f6f8fb 37%, #eef2f6 63%);
  background-size: 400% 100%;
  animation: hn-sk-shimmer 1.3s ease-in-out infinite;
}
@keyframes hn-sk-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}
body.task-mail.action-none .hn-folder-cards,
body.task-addressbook .hn-folder-cards {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  margin: 0;
  overflow-x: auto;
  background: #fff;
  /* 上下线与列表分隔线同色（#e4e8ee），满宽直角 */
  border-top: 1px solid #e4e8ee;
  border-bottom: 1px solid #e4e8ee;
  border-radius: 0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
body.task-mail.action-none .hn-folder-cards::-webkit-scrollbar,
body.task-addressbook .hn-folder-cards::-webkit-scrollbar {
  display: none;
}
body.task-mail.action-none .hn-folder-cards .hn-fcard,
body.task-addressbook .hn-folder-cards .hn-fcard {
  display: flex;
  flex: 0 0 auto;
  /* 不压缩：一行放不下时整体横向滑动 */
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  min-width: 0;
  padding: 18px 14px 14px;
  color: #334155;
  background: transparent;
  border: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  /* 文字左侧小图标（复用 Elastic 图标字体 regular 400 描边风）。
               图标码点均已实测存在于 regular 字体文件。
               对齐：inline-flex + 固定行框，消除字形基线偏移导致的上下错位 */
  /* 选中态：仅变蓝，无下划线/指示条，不加粗 */
}
body.task-mail.action-none .hn-folder-cards .hn-fcard .hn-fcard-icon,
body.task-addressbook .hn-folder-cards .hn-fcard .hn-fcard-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.2em;
  height: 1.2em;
  color: inherit;
  font-family: 'Icons';
  font-weight: 400;
  font-style: normal;
  font-size: 15px;
  line-height: 1.2;
}
body.task-mail.action-none .hn-folder-cards .hn-fcard .hn-fcard-name,
body.task-addressbook .hn-folder-cards .hn-fcard .hn-fcard-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.task-mail.action-none .hn-folder-cards .hn-fcard.selected,
body.task-addressbook .hn-folder-cards .hn-fcard.selected {
  color: #1d6fff;
}
body.task-mail.action-none .hn-folder-cards .hn-fcard:active,
body.task-addressbook .hn-folder-cards .hn-fcard:active {
  background: #f1f5f9;
}
/* 移动端邮件列表只保留卡片行：隐藏桌面排序表头与“选择”工具栏按钮 */
body.hn-mobile table.messagelist thead {
  display: none !important;
}
body.hn-mobile a.button.selection.toolbar-button {
  display: none !important;
}
/* ========== 写信页：隐藏 Elastic 桌面残留 ========== */
body.task-mail.action-compose.hn-mobile {
  /* 外层 hn-appbar 已提供标题与返回键，隐藏 Elastic 内层 header（双标题） */
  /* 头部汉堡菜单（打开 Elastic 任务菜单）与右侧更多按钮 */
  /* 正文区顶部的源码/HTML 切换条 */
}
body.task-mail.action-compose.hn-mobile #layout-content > .header {
  display: none !important;
}
body.task-mail.action-compose.hn-mobile .task-menu-button,
body.task-mail.action-compose.hn-mobile a.options[data-hidden="big"],
body.task-mail.action-compose.hn-mobile #layout-content > .header > .button {
  display: none !important;
}
body.task-mail.action-compose.hn-mobile #composebodycontainer .editor-toolbar,
body.task-mail.action-compose.hn-mobile #composebodycontainer > label.voice {
  display: none !important;
}
/* 桌面 formbuttons 底栏属于写信页正常结构（发送/取消），由下方移动端样式接管 */
/* ========== 双重空状态去重：隐藏分页条中的"邮箱为空"计数文案 ========== */
body.hn-mobile .hn-pagenav .hn-pg-count,
body.hn-mobile #rcmcountdisplay,
body.hn-mobile #rcmcountdisplayclone {
  visibility: hidden;
}
/* 列表页空状态：由 .listing-info 承担，升级为图标空状态（通讯录同理）。
   图标走 ::before 伪元素：Elastic ui.js 的 MutationObserver 会反复用
   info.text(msg) 重写容器内容，任何子元素都会被抹掉，伪元素不受影响。
   视觉去按钮化：无阴影、浅灰底、细描线，明确"插画提示"而非可点元素。 */
body.task-addressbook.hn-mobile .listing-info,
body.hn-mobile #messagelist-content .listing-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 280px;
  padding: 24px;
  color: #64748b;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  pointer-events: none;
  user-select: none;
  /* 浅灰圆角方底 + 蓝灰描线空邮件图标（内嵌 SVG data URI，52px） */
}
body.task-addressbook.hn-mobile .listing-info::before,
body.hn-mobile #messagelist-content .listing-info::before {
  content: '';
  display: block;
  width: 104px;
  height: 104px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='M3.5 7.5l7.4 5.2a2 2 0 0 0 2.2 0l7.4-5.2'/%3E%3C/svg%3E") center / 52px 52px no-repeat, #f1f5f9;
  border-radius: 28px;
}
/* 移动端分页：精简为 ‹ 计数 › */
body.hn-mobile .hn-pagenav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 48px;
  margin: 4px 12px 8px;
  padding: 0 12px;
  border: 0;
}
body.hn-mobile .hn-pagenav .hn-pg-prev,
body.hn-mobile .hn-pagenav .hn-pg-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: #1d6fff;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.03);
  text-decoration: none;
}
body.hn-mobile .hn-pagenav .hn-pg-prev.disabled,
body.hn-mobile .hn-pagenav .hn-pg-next.disabled {
  color: #cbd5e1;
  background: transparent;
  box-shadow: none;
}
body.hn-mobile .hn-pagenav .hn-pg-prev:before,
body.hn-mobile .hn-pagenav .hn-pg-next:before {
  float: none;
  width: auto;
  height: auto;
  margin: 0;
  font-size: 18px;
  line-height: 1;
}
body.hn-mobile .hn-pagenav .hn-pg-prev .inner,
body.hn-mobile .hn-pagenav .hn-pg-next .inner {
  display: none;
}
body.hn-mobile .hn-pagenav .hn-pg-count {
  color: #64748b;
  font-size: 13px;
  white-space: nowrap;
}
/* 邮件列表：QQ 邮箱平铺风格（白底行 + 细分隔线 + 大浅灰头像） */
body.task-mail.action-none table.messagelist {
  display: block;
  width: 100% !important;
  table-layout: fixed;
  /* X5 内核对 display:flex 的 tr 保留 table 布局几何残留（行间 4px 缝），显式清零 */
  border-spacing: 0;
  /* ---------- 未读 / 已读视觉分层 ---------- */
  /* 未读：发件人加粗深色（未读蓝点承担状态标识） */
  /* 已读：整体弱化（与未读拉开层次） */
  /* 所有状态一律不加左侧色条与阴影（平铺风格靠字重与蓝点区分） */
  /* 点击行仅跳转：不给选中行换背景色（保持静默跳转）。
           注意：这里不能把 td 背景改透明——td 白底是盖住底层左滑删除块的"盖板"，
           一旦透明，点击选中时底层的红色删除块就会透出来 */
}
body.task-mail.action-none table.messagelist > tbody {
  display: block;
  width: 100%;
}
body.task-mail.action-none table.messagelist > tbody > tr {
  display: flex !important;
  /* list.js remove_row 只设内联 display:none，会被上面的 flex !important 压过
               导致"删除后行不消失"。属性选择器提高特异性，让被移除的行真正隐藏 */
  width: 100% !important;
  min-width: 0;
  /* X5 内核下行框默认带间隙，强制行与行紧贴（首行不受影响故此前未发现） */
  margin: 0 !important;
  padding: 0;
  /* Elastic 基座在触屏下将行高撑到 47.6px，三行内容合计远超 72px。
               height 必须放开由内容决定，min-height 只兜底 */
  height: auto !important;
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  box-sizing: border-box;
  /* 手机上 tap 会触发 :hover 且状态会驻留，强制日期常显
               （覆盖 Elastic 的 .messagelist tr:hover span.date { display:none }）。
               注意必须挂在 tr 层级，嵌进 td 内会生成永远匹配不到的选择器 */
  /* 星标列不再占行尾宽度（移动端行尾留白难看），
               星标由 JS 搬到首行发件人名右侧显示 */
}
body.task-mail.action-none table.messagelist > tbody > tr[style*="display: none"] {
  display: none !important;
}
body.task-mail.action-none table.messagelist > tbody > tr:hover span.date {
  display: inline !important;
}
body.task-mail.action-none table.messagelist > tbody > tr > td {
  border-bottom: 0 !important;
  /* 覆盖 Elastic .listing.focus 的聚焦蓝条（QQ 平铺风格无色条） */
  border-left: 0 !important;
  border-top: 0 !important;
  box-sizing: border-box;
  /* 同 tr：放开固定高度，避免内容被裁剪（见 .hn-msg-right 注释） */
  height: auto !important;
  line-height: 1.4 !important;
}
body.task-mail.action-none table.messagelist > tbody > tr > td.subject {
  display: flex !important;
  flex: 1 1 0 !important;
  align-items: center;
  width: auto !important;
  min-width: 0 !important;
  /* 上下 padding 为 0：行与行之间不留白（用户反馈"列表之间有空隙"），
                   左右保留内容边距；分隔线贴行底 */
  padding: 0 12px 0 16px !important;
  overflow: hidden;
  /* 发件人头像（单字 + 彩色渐变底，背景色由 JS 按姓名哈希注入）
                   与首行发件人名对齐：头像顶部与名称行顶部平齐。
                   .hn-msg-right 有 8px 上留白，头像需同步下移 8px；
                   圆内文字保持几何居中（不用 padding 挤压内容区） */
  /* 右侧整体信息块（竖直堆叠：首行 → 主题行 → 预览行）
                   line-height 必须收紧：Elastic 基座 .listing td 的
                   @listing-touch-line-height(≈48px) 会把每行撑到 38-48px，
                   三行远超行卡高度被裁剪 */
  /* 首行：未读蓝点 + 发件人 + 时间 */
  /* 主题行 */
  /* 邮件内容预览：两行省略（QQ 邮箱样式），hn_mobile 插件注入。
                   注意：line-clamp 必须加在真正包含文字的内层 span 上——
                   外层 div 上的 clamp 对其块级子元素不生效（嵌套盒截断失效） */
  /* 主题/内容前置字段标签（历史遗留，不再注入） */
}
body.task-mail.action-none table.messagelist > tbody > tr > td.subject .hn-msg-avatar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  width: 44px;
  height: 44px;
  margin-right: 12px;
  margin-top: 8px;
  color: #fff;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 600;
}
body.task-mail.action-none table.messagelist > tbody > tr > td.subject .hn-msg-right {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  gap: 3px;
  /* 分隔线只画在右侧信息块（头像列无线，QQ 邮箱式 inset 线）。
                       行间视觉呼吸感靠分隔线两侧对称留白实现（上一行贴线下留白、
                       下一行贴线上留白），红块满行高但红底白字居中，观感可接受；
                       tr/td 的 margin/padding 不可动（X5 行间缝修复依赖其为 0） */
  border-bottom: 1px solid #e4e8ee;
  padding: 8px 0;
  /* 覆盖基座对 td 及内部元素的高行高（含 html.touch 47.6px） */
}
body.task-mail.action-none table.messagelist > tbody > tr > td.subject .hn-msg-right,
body.task-mail.action-none table.messagelist > tbody > tr > td.subject .hn-msg-right * {
  line-height: 1.4 !important;
}
body.task-mail.action-none table.messagelist > tbody > tr > td.subject .hn-msg-head {
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  min-width: 0;
  /* 未读蓝点（发件人名前，QQ 邮箱样式） */
  /* 星标（自 td.flags 搬入，发件人名右侧，金色实心星） */
}
body.task-mail.action-none table.messagelist > tbody > tr > td.subject .hn-msg-head .hn-unread-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-right: 6px;
  background: #1d6fff;
  border-radius: 50%;
}
body.task-mail.action-none table.messagelist > tbody > tr > td.subject .hn-msg-head span.msgicon.status {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-right: 8px;
}
body.task-mail.action-none table.messagelist > tbody > tr > td.subject .hn-msg-head span.msgicon.status:before {
  height: auto;
  line-height: 1;
  font-size: 15px;
}
body.task-mail.action-none table.messagelist > tbody > tr > td.subject .hn-msg-head span.fromto {
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  color: #17325c;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* 无收件人/无发件人兜底文案：灰色弱化 */
}
body.task-mail.action-none table.messagelist > tbody > tr > td.subject .hn-msg-head span.fromto.hn-noname {
  color: #9aa4b2;
  font-weight: 400;
}
body.task-mail.action-none table.messagelist > tbody > tr > td.subject .hn-msg-head span.date {
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: 8px;
  color: #9aa4b2;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
}
body.task-mail.action-none table.messagelist > tbody > tr > td.subject .hn-msg-head span.flagged.hn-flag-inhead {
  flex: 0 0 auto;
  width: auto;
  margin-left: 4px;
  color: #f0b928;
}
body.task-mail.action-none table.messagelist > tbody > tr > td.subject .hn-msg-head span.flagged.hn-flag-inhead:before {
  content: "\f005";
  /* 旗形改实心星 */
  font-weight: 900;
  font-size: 14px;
  line-height: 1;
}
body.task-mail.action-none table.messagelist > tbody > tr > td.subject .hn-subjwrap {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
body.task-mail.action-none table.messagelist > tbody > tr > td.subject .hn-subjwrap span.subject {
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 0;
}
body.task-mail.action-none table.messagelist > tbody > tr > td.subject span.size {
  display: none !important;
  /* 移动端隐藏邮件大小，保持行卡简洁 */
}
body.task-mail.action-none table.messagelist > tbody > tr > td.subject span.subject {
  display: block;
  flex: 1 1 auto;
  width: 100% !important;
  min-width: 0;
  margin-top: 0;
  /* 去掉 Elastic 触屏规则 td.subject .subject 的 1.5rem 右内边距，
                       让主题文字顶到行右缘 */
  padding: 0 !important;
  overflow: hidden;
  color: #2c3e5d;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
  /* 主题单行显示，超出省略号 */
  text-overflow: ellipsis;
  white-space: nowrap;
  /* 未读主题前置小圆点由首行蓝点承担，此处去重 */
}
body.task-mail.action-none table.messagelist > tbody > tr > td.subject span.subject span.msgicon.status {
  display: none;
}
body.task-mail.action-none table.messagelist > tbody > tr > td.subject span.subject a {
  color: inherit;
  text-decoration: none;
}
body.task-mail.action-none table.messagelist > tbody > tr > td.subject .hn-msg-preview {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  margin-top: 0;
  overflow: hidden;
  color: #9aa4b2;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  word-break: break-all;
}
body.task-mail.action-none table.messagelist > tbody > tr > td.subject .hn-msg-preview span.hn-preview {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
body.task-mail.action-none table.messagelist > tbody > tr > td.subject .hn-field {
  display: none;
}
body.task-mail.action-none table.messagelist > tbody > tr > td.flags {
  display: none !important;
}
body.task-mail.action-none table.messagelist > tbody > tr > td.flags span.flagged {
  color: #f0b928;
  /* 星标邮件金色星 */
}
body.task-mail.action-none table.messagelist > tbody > tr > td.flags span.flagged:before {
  content: "\f005";
  /* 旗形改实心星 */
  font-weight: 900;
  font-size: 14px;
}
body.task-mail.action-none table.messagelist .hn-mbox-INBOX tr.unread {
  background: #fff;
}
body.task-mail.action-none table.messagelist .hn-mbox-INBOX tr.unread td.subject span.fromto {
  color: #17325c;
  font-weight: 700;
}
body.task-mail.action-none table.messagelist .hn-mbox-INBOX tr.unread td.subject span.subject {
  color: #17325c !important;
  font-weight: 500;
}
body.task-mail.action-none table.messagelist .hn-mbox-INBOX tr.unread td.subject span.date {
  color: #17325c;
  font-weight: 600;
}
body.task-mail.action-none table.messagelist .hn-mbox-INBOX tr.message:not(.unread) {
  background: #fff;
}
body.task-mail.action-none table.messagelist .hn-mbox-INBOX tr.message:not(.unread) td.subject span.fromto {
  color: #4a5b76;
  font-weight: 500;
}
body.task-mail.action-none table.messagelist .hn-mbox-INBOX tr.message:not(.unread) td.subject span.subject {
  color: #5a6a84;
}
body.task-mail.action-none table.messagelist tr.unread,
body.task-mail.action-none table.messagelist tr.flagged,
body.task-mail.action-none table.messagelist tr.hn-flagged {
  box-shadow: none;
}
body.task-mail.action-none table.messagelist tr.selected td {
  color: inherit;
}
/* ---------- 邮件列表：左滑删除 ----------
   tr 为手势容器：position:relative 作包含块 + overflow:hidden 硬裁剪。
   删除按钮绝对定位充满整行（top/right/bottom 全 0）：高度恒等于行框高度，
   与相邻行零间隙；即使包含块行为异常，overflow:hidden 也把一切内容
   裁剪在本行内，绝不穿出到相邻行或 Tab 区域。
   左滑时 JS 直接平移各 td（不包裹 DOM，保持 tr>td 选择器有效） */
body.task-mail.action-none table.messagelist > tbody > tr {
  position: relative;
  z-index: 0;
  /* 建立堆叠上下文：-1 只在本行内下沉，不落到行背景之后 */
  overflow: hidden;
  /* 硬裁剪边界：任何异常时内容不出行框 */
  /* 删除按钮：宽度与 JS BUTTON_W 一致；
           纵向布局：图标在上文字在下（flex-direction:column） */
  /* td 抬到按钮上层，白底盖住未滑动区域 */
}
body.task-mail.action-none table.messagelist > tbody > tr .hn-swipe-del {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 84px;
  color: #fff;
  background: #f0443c;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* 垃圾桶图标（复用 Elastic 图标字体 FontAwesome 5） */
}
body.task-mail.action-none table.messagelist > tbody > tr .hn-swipe-del:before {
  content: "\f2ed";
  font-family: Icons;
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
}
body.task-mail.action-none table.messagelist > tbody > tr > td {
  position: relative;
  z-index: 1;
  background: #fff;
}
/* 详情页底部工具栏（替代 TabBar）：邮件详情 = 删除/回复/转发/更多，
   联系人详情 = 写信/关闭。白底 + 上边线 + 按钮均分，图标在上、文字在下 */
.hn-bottom-toolbar {
  position: fixed;
  z-index: 1000;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: stretch;
  height: calc(64px + env(safe-area-inset-bottom, 0px));
  padding: 0 4px env(safe-area-inset-bottom, 0px);
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid #f1f5f9;
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
}
.hn-bottom-toolbar .hn-tb-btn {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* 图标与文字间距（4px + 2px） */
  min-width: 44px;
  color: #475569;
  /* 深灰蓝，比 @text-primary 略浅但保持可读 */
  font-size: 12px;
  font-weight: 400;
  /* 不加粗 */
  text-decoration: none !important;
  box-shadow: none !important;
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
  /* 空心线框图标（SVG 在上，模板提供 path/circle 描边） */
  /* 实心图标（更多按钮三点）：填充当前色，取消空心描边 */
}
.hn-bottom-toolbar .hn-tb-btn .hn-tb-ico {
  display: block;
  width: 22px;
  height: 22px;
  color: inherit;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hn-bottom-toolbar .hn-tb-btn .hn-tb-ico-solid {
  fill: currentColor;
  stroke: none;
}
.hn-bottom-toolbar .hn-tb-btn > span {
  line-height: 1;
}
.hn-bottom-toolbar .hn-tb-btn:active {
  transform: scale(0.96);
  opacity: 0.7;
}
/* 联系人详情页（iframe 内）写信/关闭同样使用空心 SVG，无额外字体规则 */
/* 详情页（非 iframe）：TabBar 让位给底部工具栏 */
body.task-mail.action-show.hn-mobile .hn-tabbar,
body.task-mail.action-preview.hn-mobile .hn-tabbar {
  display: none !important;
}
/* 详情页：不显示顶部返回标题栏（用户要求移除；返回走系统返回手势/浏览器回退），
   底部工具栏（删除/回复/转发/更多）承担全部操作 */
body.task-mail.action-show.hn-mobile .hn-appbar {
  display: none !important;
}
/* 顶栏隐藏后内容区不再让位（清掉 52px 上内边距） */
body.task-mail.action-show.hn-mobile #layout {
  padding-top: 0 !important;
}
/* 列表内预览面板（非独立详情页）仍隐藏 appbar——面板的返回/标题
   由 hnmobile.js initPanelSync 动态接管，避免与 iframe 内重复 */
body.task-mail.action-preview.hn-mobile .hn-appbar {
  display: none !important;
}
body.task-mail.action-preview.hn-mobile #layout {
  padding-top: 0 !important;
}
/* ========== 附件预览（task=mail&action=get，.eml 等附件点开后的页面） ==========
   点附件后在弹窗对话框内以 iframe 打开（windowframe，_framed=1&_extwin=1），
   也兼容独立标签页打开。iframe 内是完整布局：隐藏全局 appbar/tabbar 与
   Elastic 桌面工具栏 header（文件名+下载/打印/回复/转发），
   由 hnmobile.js initMessagePart 注入移动端返回标题栏（返回 + 居中文件名）。 */
body.task-mail.action-get.hn-mobile .hn-tabbar,
body.task-mail.action-get.hn-mobile .hn-appbar {
  display: none !important;
}
/* 全局 #layout 为 appbar/TabBar 留的 52/56px 占位在此页均为空白
   （两栏已隐藏），清零让返回栏贴顶、内容贴底 */
body.task-mail.action-get.hn-mobile #layout {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
body.task-mail.action-get.hn-mobile #layout-content > .header,
body.task-mail.action-get.hn-mobile #layout-content .header.menu {
  display: none !important;
}
/* 附件预览页返回标题栏（复用联系详情 .hn-contact-nav 的样式基调）：
   返回箭头 + 居中文件名，无右侧动作按钮 */
body.task-mail.action-get.hn-mobile #layout-content > .hn-msgpart-nav {
  position: sticky;
  top: 0;
  z-index: 1100;
  height: calc(52px + env(safe-area-inset-top, 0px));
  display: flex;
  align-items: center;
  padding: env(safe-area-inset-top, 0px) 8px 0;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid #f1f5f9;
  color: #0f172a;
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  /* 右侧无按钮，用等宽右边距与左侧返回键平衡，保证标题视觉居中 */
}
body.task-mail.action-get.hn-mobile #layout-content > .hn-msgpart-nav .hn-msgpart-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: -3px;
  color: #0C1C33;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
body.task-mail.action-get.hn-mobile #layout-content > .hn-msgpart-nav .hn-msgpart-back:active {
  opacity: 0.65;
}
body.task-mail.action-get.hn-mobile #layout-content > .hn-msgpart-nav .hn-msgpart-back svg {
  display: block;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
}
body.task-mail.action-get.hn-mobile #layout-content > .hn-msgpart-nav .hn-msgpart-title {
  flex: 1 1 auto;
  min-width: 0;
  margin-right: 44px;
  color: #0f172a;
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 邮件列表长按操作菜单（底部动作面板） */
body.hn-mobile .hn-actions-menu {
  position: fixed;
  z-index: 2200;
  right: 0;
  bottom: 0;
  left: 0;
  visibility: hidden;
  padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px));
  background: #f1f5f9;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.18);
  transform: translateY(105%);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.25s;
}
body.hn-mobile .hn-actions-menu.opened {
  visibility: visible;
  transform: translateY(0);
}
body.hn-mobile .hn-actions-menu .hn-actions-header {
  padding: 10px 0 6px;
  color: #64748b;
  font-size: 13px;
  text-align: center;
}
body.hn-mobile .hn-actions-menu ul.menu {
  margin: 0;
  padding: 0;
  list-style: none;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  /* 各操作项图标（FontAwesome 变量来自 Elastic fontawesome.less） */
  /* 旗形改实心星 */
}
body.hn-mobile .hn-actions-menu ul.menu li {
  margin: 0;
  border: 0;
}
body.hn-mobile .hn-actions-menu ul.menu li a {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 20px;
  color: #0f172a;
  font-size: 16px;
  text-decoration: none;
  /* 统一图标列：固定宽度保证各行动作文字垂直对齐 */
}
body.hn-mobile .hn-actions-menu ul.menu li a:before {
  flex: 0 0 22px;
  margin-right: 12px;
  color: #334155;
  font-family: 'Icons';
  font-weight: 900;
  font-style: normal;
  font-size: 16px;
  line-height: 1;
}
body.hn-mobile .hn-actions-menu ul.menu li a:active {
  background: #f1f5f9;
}
body.hn-mobile .hn-actions-menu ul.menu li:last-child a {
  border-bottom: 0;
}
body.hn-mobile .hn-actions-menu ul.menu a[href='#reply']:before {
  content: "\f3e5";
}
body.hn-mobile .hn-actions-menu ul.menu a[href='#replyall']:before {
  content: "\f122";
}
body.hn-mobile .hn-actions-menu ul.menu a[href='#forward']:before {
  content: "\f064";
}
body.hn-mobile .hn-actions-menu ul.menu a[href='#flag']:before {
  content: "\f005";
}
body.hn-mobile .hn-actions-menu ul.menu a[href='#markunread']:before {
  content: "\f2b6";
}
body.hn-mobile .hn-actions-menu ul.menu a[href='#markread']:before {
  content: "\f0e0";
}
body.hn-mobile .hn-actions-menu ul.menu a[href='#download']:before {
  content: "\f019";
}
body.hn-mobile .hn-actions-menu ul.menu a[href='#delete']:before,
body.hn-mobile .hn-actions-menu ul.menu .hn-act-delete:before {
  content: "\f2ed";
}
body.hn-mobile .hn-actions-menu ul.menu .hn-act-delete {
  color: #ef4444;
  font-weight: 600;
}
body.hn-mobile .hn-actions-menu ul.menu .hn-act-delete:before {
  color: #ef4444;
}
body.hn-mobile .hn-actions-menu .hn-menu-close {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin-top: 8px;
  color: #1d6fff;
  background: #fff;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}
body.hn-mobile .hn-actions-menu .hn-menu-close:active {
  background: #f1f5f9;
}
/* ========== 阅读页（通栏白色正文，无卡片圆角） ========== */
/* 已标旗邮件：主题前图标改金色实心星（覆写 Elastic 的红色旗形）。
   独立顶层规则：body.status-flagged 由核心按旗标状态挂到 iframe 文档 body 上 */
body.status-flagged #layout-content #message-header > .subject:before {
  content: "\f005";
  color: #f0b928;
  font-weight: 900;
}
body.task-mail.action-show,
body.task-mail.action-preview {
  /* 头部：同样用 #layout-content 高特异性覆盖 Elastic mobile 的边距/圆角/阴影 */
  /* 内容区：为覆盖 Elastic mobile 里更高特异性的
       #layout-content #message-content（带 shadow/圆角/边距）规则，
       这里沿用同一特异性选择器并置其 border-radius/shadow 为 0 */
  /* 阅读页底部"前一/后一"分页条与 TabBar 二选一：隐藏分页条（用系统返回） */
}
body.task-mail.action-show #layout-content,
body.task-mail.action-preview #layout-content {
  background: #fff;
}
body.task-mail.action-show #layout-content .frame-content,
body.task-mail.action-preview #layout-content .frame-content {
  padding: 0 0 calc(56px + env(safe-area-inset-bottom, 0px));
}
body.task-mail.action-show #message-header,
body.task-mail.action-preview #message-header,
body.task-mail.action-show #message-content,
body.task-mail.action-preview #message-content {
  max-width: none;
  background: #fff;
  border: 0;
}
body.task-mail.action-show #layout-content #message-header,
body.task-mail.action-preview #layout-content #message-header {
  margin: 0;
  padding: 16px 12px;
  border-radius: 0;
  box-shadow: none;
  /* 邮件主题标题 */
  /* 发件人卡：头像左、摘要右（左右结构）；为融入通栏白底，去掉灰底与圆角，
           改用底部浅色分隔线与正文分区（移动端已移除头像对象，仅保留信息行） */
  /* Elastic 自带占位人像隐藏（移动端已不使用头像） */
  /* 简洁信息行：发件人/收件人一行 + 日期一行，详情/概要按钮固定在右侧；
           min-height:0 覆盖 Elastic 的头像占位高度，配合 align-items:flex-start
           保证展开/收起时首行（发件人/日期/按钮）位置稳定不位移 */
  /* 详情/概要按钮：相对发件人首行垂直居中 */
  /* 概要行（"在 <日期> 来自 <发件人>"）：已由 byline 替代展示，仅作数据源隐藏 */
  /* 详情视图表格文字（概要按钮点击后的收件人/日期等）：默认收起源头表，
           避免默认展开完整的发件人/收件人/日期列表，点击"详情"才通过 details-view 展开 */
  /* 详情视图：header-headers 本身是 <table>，Elastic 用 display:initial 展示
           会破坏表格布局（标签与值不在同一水平线），恢复两列表格布局 */
  /* 概要/信头/纯文本切换链接：整体推到信息行最右 */
  /* 头部操作按钮（信头/源码切换等）：图标与放大后文字对齐 */
}
body.task-mail.action-show #layout-content #message-header .subject,
body.task-mail.action-preview #layout-content #message-header .subject {
  margin: 0 0 0;
  color: #0f172a;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
}
body.task-mail.action-show #layout-content #message-header .header,
body.task-mail.action-preview #layout-content #message-header .header {
  display: block;
  padding: 5px 0 16px;
  background: transparent;
  border-radius: 0;
  border-bottom: 1px solid #f1f5f9;
}
body.task-mail.action-show #layout-content #message-header img.contactphoto,
body.task-mail.action-preview #layout-content #message-header img.contactphoto {
  display: none;
}
body.task-mail.action-show #layout-content #message-header .hn-sum-avatar,
body.task-mail.action-preview #layout-content #message-header .hn-sum-avatar,
body.task-mail.action-show #layout-content #message-header .hn-msg-avatar,
body.task-mail.action-preview #layout-content #message-header .hn-msg-avatar {
  display: none !important;
}
body.task-mail.action-show #layout-content #message-header .header-content,
body.task-mail.action-preview #layout-content #message-header .header-content {
  min-width: 0;
}
body.task-mail.action-show #layout-content #message-header .header-content,
body.task-mail.action-preview #layout-content #message-header .header-content {
  min-height: 0;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 4px 12px;
}
body.task-mail.action-show #layout-content #message-header .header-content .header-links,
body.task-mail.action-preview #layout-content #message-header .header-content .header-links {
  align-self: center;
}
body.task-mail.action-show #layout-content #message-header .hn-msg-byline,
body.task-mail.action-preview #layout-content #message-header .hn-msg-byline {
  flex: 1 1 auto;
  min-width: 0;
  /* 行1：发件人（蓝色可点击，点击跳联系人详情）+ 本行最右侧的详情/概要按钮；
               收件人信息行不显示（完整收件人见"详情"展开） */
  /* 行2：日期单独一行 */
}
body.task-mail.action-show #layout-content #message-header .hn-msg-byline .hn-msg-recipients,
body.task-mail.action-preview #layout-content #message-header .hn-msg-byline .hn-msg-recipients {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px 10px;
  /* 发件人：蓝色可点击 */
}
body.task-mail.action-show #layout-content #message-header .hn-msg-byline .hn-msg-recipients .hn-msg-from,
body.task-mail.action-preview #layout-content #message-header .hn-msg-byline .hn-msg-recipients .hn-msg-from {
  flex: 0 1 auto;
  min-width: 0;
  color: #2563eb;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  word-break: break-all;
}
body.task-mail.action-show #layout-content #message-header .hn-msg-byline .hn-msg-recipients .hn-msg-to,
body.task-mail.action-preview #layout-content #message-header .hn-msg-byline .hn-msg-recipients .hn-msg-to {
  display: none;
}
body.task-mail.action-show #layout-content #message-header .hn-msg-byline .hn-msg-meta,
body.task-mail.action-preview #layout-content #message-header .hn-msg-byline .hn-msg-meta {
  margin-top: 4px;
  color: #64748b;
  font-size: 14px;
}
body.task-mail.action-show #layout-content #message-header .header-summary,
body.task-mail.action-preview #layout-content #message-header .header-summary {
  display: none;
}
body.task-mail.action-show #layout-content #message-header .header-headers,
body.task-mail.action-preview #layout-content #message-header .header-headers {
  display: none;
  margin-top: 4px;
  font-size: 15px;
  font-weight: 400;
  color: #64748b;
}
body.task-mail.action-show #layout-content #message-header .header-content.details-view .header-summary,
body.task-mail.action-preview #layout-content #message-header .header-content.details-view .header-summary {
  display: none;
}
body.task-mail.action-show #layout-content #message-header .header-content.details-view table.header-headers,
body.task-mail.action-preview #layout-content #message-header .header-content.details-view table.header-headers {
  display: table !important;
  width: 100%;
  /* 常规文档流：在发件人行下方展开、位于头部下划线之上；
               首行稳定性由 .header-content 的 flex-start + min-height:0 保证 */
  margin: 6px 0 0;
}
body.task-mail.action-show #layout-content #message-header .header-content.details-view table.header-headers tr,
body.task-mail.action-preview #layout-content #message-header .header-content.details-view table.header-headers tr {
  display: table-row;
  border-bottom: none;
}
body.task-mail.action-show #layout-content #message-header .header-content.details-view table.header-headers td,
body.task-mail.action-preview #layout-content #message-header .header-content.details-view table.header-headers td {
  display: table-cell;
  float: none !important;
  padding: 4px 0;
  vertical-align: top;
  font-size: 15px;
  border-bottom: none;
}
body.task-mail.action-show #layout-content #message-header .header-content.details-view table.header-headers td.header-title,
body.task-mail.action-preview #layout-content #message-header .header-content.details-view table.header-headers td.header-title {
  width: 5em;
  color: #64748b;
  white-space: nowrap;
}
body.task-mail.action-show #layout-content #message-header .header-content.details-view table.header-headers td.header,
body.task-mail.action-preview #layout-content #message-header .header-content.details-view table.header-headers td.header {
  color: #334155;
  word-break: break-all;
  /* 详情视图里的收件人/发件人地址：去掉下划线，蓝色可点击跳转联系人详情 */
}
body.task-mail.action-show #layout-content #message-header .header-content.details-view table.header-headers td.header a.rcmContactAddress,
body.task-mail.action-preview #layout-content #message-header .header-content.details-view table.header-headers td.header a.rcmContactAddress,
body.task-mail.action-show #layout-content #message-header .header-content.details-view table.header-headers td.header a.rcmaddcontact,
body.task-mail.action-preview #layout-content #message-header .header-content.details-view table.header-headers td.header a.rcmaddcontact {
  text-decoration: none;
  border-bottom: none;
  color: #2563eb;
}
body.task-mail.action-show #layout-content #message-header .header-links,
body.task-mail.action-preview #layout-content #message-header .header-links {
  flex: 0 0 auto;
  margin: 0 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
body.task-mail.action-show #layout-content #message-header .header-links a,
body.task-mail.action-preview #layout-content #message-header .header-links a {
  color: #1d6fff;
  font-size: 14px;
  opacity: 0.9;
  white-space: nowrap;
}
body.task-mail.action-show #layout-content #message-header .header-links a:before,
body.task-mail.action-preview #layout-content #message-header .header-links a:before {
  height: 1.4rem;
  line-height: 1.2;
}
body.task-mail.action-show #layout-content #message-content,
body.task-mail.action-preview #layout-content #message-content {
  min-height: 240px;
  margin: 0;
  padding: 8px 12px 10px;
  border-radius: 0;
  box-shadow: none;
  /* 邮件正文放大：纯文本(.message-part)与 HTML 邮件(.message-htmlpart) */
  /* 正文内嵌图片附件块：隐藏顶部文件名/大小行与底部"显示/下载"链接按钮，
           图片点击预览/下载统一走附件列表的侧边栏菜单 */
}
body.task-mail.action-show #layout-content #message-content .message-part,
body.task-mail.action-preview #layout-content #message-content .message-part,
body.task-mail.action-show #layout-content #message-content .message-htmlpart,
body.task-mail.action-preview #layout-content #message-content .message-htmlpart {
  font-size: 16px;
  line-height: 1.7;
  /* 引用块同步放大但弱化 */
}
body.task-mail.action-show #layout-content #message-content .message-part div.rcmBody,
body.task-mail.action-preview #layout-content #message-content .message-part div.rcmBody,
body.task-mail.action-show #layout-content #message-content .message-htmlpart div.rcmBody,
body.task-mail.action-preview #layout-content #message-content .message-htmlpart div.rcmBody,
body.task-mail.action-show #layout-content #message-content .message-part div.pre,
body.task-mail.action-preview #layout-content #message-content .message-part div.pre,
body.task-mail.action-show #layout-content #message-content .message-htmlpart div.pre,
body.task-mail.action-preview #layout-content #message-content .message-htmlpart div.pre {
  font-size: inherit;
}
body.task-mail.action-show #layout-content #message-content .message-part blockquote,
body.task-mail.action-preview #layout-content #message-content .message-part blockquote,
body.task-mail.action-show #layout-content #message-content .message-htmlpart blockquote,
body.task-mail.action-preview #layout-content #message-content .message-htmlpart blockquote {
  font-size: 15px;
}
body.task-mail.action-show #layout-content #message-content p.image-attachment,
body.task-mail.action-preview #layout-content #message-content p.image-attachment {
  /* 图片独占成卡：左侧留出文件图标位不需要了，直接居中展示 */
}
body.task-mail.action-show #layout-content #message-content p.image-attachment .attachment-links,
body.task-mail.action-preview #layout-content #message-content p.image-attachment .attachment-links,
body.task-mail.action-show #layout-content #message-content p.image-attachment .image-filename,
body.task-mail.action-preview #layout-content #message-content p.image-attachment .image-filename,
body.task-mail.action-show #layout-content #message-content p.image-attachment .image-filesize,
body.task-mail.action-preview #layout-content #message-content p.image-attachment .image-filesize {
  display: none !important;
}
body.task-mail.action-show #layout-content #message-content p.image-attachment .image-link,
body.task-mail.action-preview #layout-content #message-content p.image-attachment .image-link {
  float: none;
  display: block;
  margin: 0 auto;
  border: 0;
  width: auto !important;
}
body.task-mail.action-show #layout-content #message-content p.image-attachment .image-link .image-thumbnail,
body.task-mail.action-preview #layout-content #message-content p.image-attachment .image-link .image-thumbnail {
  margin: 0 auto;
  border-radius: 8px;
}
body.task-mail.action-show #layout-content #message-content p.image-attachment::after,
body.task-mail.action-preview #layout-content #message-content p.image-attachment::after {
  display: block;
  clear: both;
  content: '';
}
body.task-mail.action-show .hn-pagenav,
body.task-mail.action-preview .hn-pagenav,
body.task-mail.action-show #layout-content .footer.content-frame-navigation,
body.task-mail.action-preview #layout-content .footer.content-frame-navigation {
  display: none !important;
}
/* ========== 设置子页（folders/identities 等）：内层 Elastic header 自带返回+标题，
   隐藏外层移动端 App Bar，避免双层顶栏 ========== */
body.task-settings.hn-mobile:not(.action-none) .hn-appbar {
  display: none !important;
}
body.task-settings.hn-mobile:not(.action-none) #layout {
  padding-top: 8px !important;
}
/* ========== 邮箱列表 / 写信 两个 Tab 根页：去掉顶部标题栏，内容直顶屏幕；
   底部 TabBar 全局保留（写信页同样显示，由 updateTabSelection 高亮写信 Tab） ========== */
body.task-mail.action-none.hn-mobile .hn-appbar,
body.task-mail.action-list.hn-mobile .hn-appbar,
body.task-mail.action-compose.hn-mobile .hn-appbar {
  display: none !important;
}
body.task-mail.action-none.hn-mobile #layout,
body.task-mail.action-list.hn-mobile #layout,
body.task-mail.action-compose.hn-mobile #layout {
  padding-top: 0 !important;
}
/* ========== 通讯录 Tab 根页：顶栏/TabBar 常规隐藏；
   进入详情面板（iframe）时由 JS 加 hn-detail-open：
   顶栏仍隐藏（参照邮件详情页），底部工具栏（写信/关闭）随面板显示 ========== */
body.task-addressbook.hn-mobile .hn-appbar {
  display: none !important;
}
body.task-addressbook.hn-mobile #layout {
  padding-top: 0 !important;
}
/* 通讯录根页只展示组织树；Elastic 的空白联系人 iframe 会显示大水印，
   宽屏访问 /m/ 时还会把移动端列表挤成固定窄列。选中联系人后由 JS 加
   hn-detail-open，再恢复详情面板。 */
body.task-addressbook.hn-mobile:not(.hn-detail-open) #layout-list {
  width: 100% !important;
  flex: 1 1 auto !important;
}
body.task-addressbook.hn-mobile:not(.hn-detail-open) #layout-content {
  display: none !important;
}
/* 详情面板打开态：TabBar 让位给 iframe 内底部工具栏 */
body.task-addressbook.hn-mobile.hn-detail-open .hn-tabbar {
  display: none !important;
}
/* 详情面板打开态：iframe 面板铺满屏幕（底部工具栏在 iframe 内固定，
   故父 #layout 底部不留白；圆角白卡改为直抵屏幕的沉浸面板） */
body.task-addressbook.hn-mobile.hn-detail-open #layout {
  padding-bottom: 0 !important;
}
body.task-addressbook.hn-mobile.hn-detail-open #layout-content .iframe-wrapper {
  padding: 0;
}
body.task-addressbook.hn-mobile.hn-detail-open #layout-content .iframe-wrapper iframe {
  background: #fff;
  border-radius: 0;
  box-shadow: none;
  height: 100%;
}
/* ========== 写信页：卡片化表头 + 沉浸编辑器 + 悬浮发送栏 ========== */
body.task-mail.action-compose {
  /* ---------- 表头行：无框输入 + 行分隔线 + 聚焦高亮 ---------- */
  /* 收件人令牌（ui.js recipient_input 动态生成）回显样式：
       紧凑药丸形、主色软底、小字号，令牌换行排布 */
  /* 隐藏真实上传表单（供"添加附件"触发文件选择，本身不可见）；
       用尺寸裁切而非 display:none，保证移动端程序化 .click() 仍能弹选择器。 */
  /* 发件人：原生 <select> 去浏览器默认外观，统一右侧下拉箭头 */
  /* 收件人行右侧按钮：主色软底（添加）+ 中性软底（删除） */
  /* ---------- 正文编辑器：内嵌圆角区 + 聚焦光环；初始矮高度，随内容自适应增高 ---------- */
  /* ---------- 附件区：虚线拖放卡片 ---------- */
  /* Elastic ui.js 会把 .formbuttons 的发送按钮克隆进底部 content-frame-navigation
       （id 带 "-clone" 后缀），与保留的 formbuttons 操作栏重复，整条隐藏 */
  /* ---------- 发送栏：吸底常驻，长文不丢操作 ---------- */
}
body.task-mail.action-compose #layout-content {
  background: #f7f8fa;
}
body.task-mail.action-compose #compose-content {
  padding: 12px;
  background: #f7f8fa;
}
body.task-mail.action-compose #compose-content > form {
  padding: 0 12px 12px;
  background: #fff;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.03);
}
body.task-mail.action-compose #compose-headers .compose-headers .form-group {
  align-items: center;
  margin: 0 !important;
  padding: 4px 0;
  border-bottom: 1px solid #f1f5f9;
  transition: background 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
body.task-mail.action-compose #compose-headers .compose-headers .form-group:last-child {
  border-bottom: 0;
}
body.task-mail.action-compose #compose-headers .compose-headers .form-group:focus-within {
  background: #eff6ff;
  border-bottom-color: transparent;
}
body.task-mail.action-compose #compose-headers .compose-headers .form-group:focus-within + .form-group {
  border-top-color: transparent;
}
body.task-mail.action-compose #compose-headers .compose-headers .form-group > label {
  flex: 0 0 3.5em;
  padding: 0;
  color: #64748b;
  font-size: 15px;
  line-height: 1.2;
}
body.task-mail.action-compose #compose-headers .compose-headers .form-group input.form-control,
body.task-mail.action-compose #compose-headers .compose-headers .form-group select.form-control {
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}
body.task-mail.action-compose #compose-headers .compose-headers .form-group .form-control {
  padding-right: 8px;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 16px;
}
body.task-mail.action-compose #compose-headers .compose-headers .form-group .form-control:focus {
  outline: 0;
  box-shadow: none;
}
body.task-mail.action-compose #compose_subject .form-control {
  font-weight: 400;
}
body.task-mail.action-compose #compose_subject .form-control::placeholder {
  font-weight: 400;
}
body.task-mail.action-compose #compose-headers .recipient-input {
  padding: 4px 8px;
  cursor: text;
}
body.task-mail.action-compose #compose-headers .recipient-input li.recipient {
  max-width: 100%;
  width: auto;
  display: inline-flex;
  align-items: center;
  margin: 4px 4px 0 0;
  padding: 0 6px 0 10px;
  background: rgba(29, 111, 255, 0.08);
  border: 1px solid rgba(29, 111, 255, 0.18);
  border-radius: 999px;
  font-size: 13px;
  line-height: 26px;
  white-space: nowrap;
}
body.task-mail.action-compose #compose-headers .recipient-input li.recipient .name {
  padding: 0;
  color: #0f172a;
  font-weight: 500;
  line-height: 26px;
}
body.task-mail.action-compose #compose-headers .recipient-input li.recipient .email {
  text-indent: -5000rem;
  width: 0;
}
body.task-mail.action-compose #compose-headers .recipient-input li.recipient a.button.icon.remove {
  font-size: 0.8em;
  margin-left: 2px;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
}
body.task-mail.action-compose #compose-headers .recipient-input li.recipient a.button.icon.remove:before {
  line-height: 1;
  display: block;
}
body.task-mail.action-compose #compose-headers .recipient-input li.recipient a.button.icon.remove:active {
  color: #dc2626;
}
body.task-mail.action-compose #compose-headers .recipient-input li.input {
  flex: 1;
  min-width: 60px;
}
body.task-mail.action-compose #compose-headers .recipient-input input {
  font-size: 13px;
  cursor: text;
}
body.task-mail.action-compose #uploadform {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}
body.task-mail.action-compose #compose_from select.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill%3D%22%2364748b%22%20d%3D%22M4.7%206l3.3%203.3L11.3%206l1%201L8%2011.3%203.7%207z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
  cursor: pointer;
}
body.task-mail.action-compose #compose-headers .input-group-append .input-group-text.icon {
  margin-left: 4px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), background 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
body.task-mail.action-compose #compose-headers .input-group-append .input-group-text.icon:active {
  transform: scale(0.9);
}
body.task-mail.action-compose #compose-headers .input-group-append .input-group-text.icon.add {
  color: #1d6fff;
  background: rgba(29, 111, 255, 0.09);
}
body.task-mail.action-compose #compose-headers .input-group-append .input-group-text.icon.add:active {
  background: rgba(29, 111, 255, 0.18);
}
body.task-mail.action-compose #compose-headers .input-group-append .input-group-text.icon.delete {
  color: #64748b;
  background: #f1f5f9;
}
body.task-mail.action-compose #compose-headers .input-group-append .input-group-text.icon.delete:active {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}
body.task-mail.action-compose #composebodycontainer {
  min-height: 262px;
  margin-top: 8px;
  overflow: hidden;
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 6px;
  transition: border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), background 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body.task-mail.action-compose #composebodycontainer:focus-within {
  background: #fff;
  border-color: rgba(29, 111, 255, 0.4);
  box-shadow: 0 0 0 3px rgba(29, 111, 255, 0.1);
}
body.task-mail.action-compose #composebodycontainer #composebody {
  display: block;
  width: 100%;
  min-height: 260px;
  height: 260px;
  padding: 12px 16px;
  border: 0;
  background: transparent;
  box-shadow: none;
  resize: none;
  overflow: hidden;
}
body.task-mail.action-compose #composebodycontainer #composebody:focus {
  outline: 0;
  box-shadow: none;
}
body.task-mail.action-compose #composebodycontainer iframe {
  display: block;
  width: 100%;
  min-height: 270px;
  border: 0;
}
body.task-mail.action-compose #compose-attachments {
  margin-top: 12px;
  padding: 12px 16px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.03);
  /* 隐藏大附件图标：Elastic 给 .file-upload 加 droptarget 后用 :after
           (content:@icon-file-drop) 画出 10rem 大图标，这里关掉（保留"添加附件"按钮
           与拖放功能本身，仅去图标）。 */
}
body.task-mail.action-compose #compose-attachments .upload-form {
  display: flex;
  align-items: center;
  gap: 12px;
}
body.task-mail.action-compose #compose-attachments .upload-form .hint {
  flex: 1;
  margin: 0;
  color: #64748b;
  font-size: 13px;
}
body.task-mail.action-compose #compose-attachments .btn.btn-secondary.attach {
  height: 36px;
  padding: 0 16px;
  color: #1d6fff;
  background: rgba(29, 111, 255, 0.09);
  border: 0;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
}
body.task-mail.action-compose #compose-attachments .btn.btn-secondary.attach:active {
  transform: scale(0.96);
  background: rgba(29, 111, 255, 0.18);
}
body.task-mail.action-compose #compose-attachments .attachmentslist {
  margin: 8px 0 0;
}
body.task-mail.action-compose #compose-attachments .attachmentslist li a {
  min-height: 40px;
}
body.task-mail.action-compose #compose-attachments.droptarget:after {
  content: none;
}
body.task-mail.action-compose .content-frame-navigation {
  display: none !important;
}
body.task-mail.action-compose .formbuttons {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 0;
  padding: calc(12px + 1px) 16px calc(12px + 1px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid #f1f5f9;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body.task-mail.action-compose .formbuttons .btn-primary,
body.task-mail.action-compose .formbuttons .button.mainaction,
body.task-mail.action-compose .formbuttons .button.savedraft,
body.task-mail.action-compose .formbuttons .button.cancel {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 14px;
}
body.task-mail.action-compose .formbuttons .btn-primary:before,
body.task-mail.action-compose .formbuttons .button.mainaction:before,
body.task-mail.action-compose .formbuttons .button.savedraft:before,
body.task-mail.action-compose .formbuttons .button.cancel:before {
  display: inline;
  float: none;
  width: auto;
  height: auto;
  margin: 0 4px 0 0;
  font-size: 13px;
  line-height: 1;
}
body.task-mail.action-compose .formbuttons .button.savedraft:before {
  content: "\f304";
  font-family: 'Icons';
  font-weight: 900;
}
body.task-mail.action-compose .formbuttons .button.cancel:before {
  content: "\f00d";
  font-family: 'Icons';
  font-weight: 900;
}
body.task-mail.action-compose .formbuttons .button.send:before {
  content: "\f1d8";
  font-family: 'Icons';
  font-weight: 900;
}
body.task-mail.action-compose .formbuttons .btn-primary,
body.task-mail.action-compose .formbuttons .button.mainaction {
  color: #fff;
  background: linear-gradient(135deg, #3b8bff 0%, #1d6fff 60%, #1466f2 100%) !important;
  border: 0 !important;
  box-shadow: 0 2px 8px rgba(29, 111, 255, 0.28);
  font-weight: 600;
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
body.task-mail.action-compose .formbuttons .btn-primary:active:not(:disabled),
body.task-mail.action-compose .formbuttons .button.mainaction:active:not(:disabled) {
  transform: scale(0.98);
  box-shadow: 0 1px 4px rgba(29, 111, 255, 0.24);
}
body.task-mail.action-compose .formbuttons .button.savedraft {
  color: #fff;
  background: #f59e0b;
  border: 0;
  font-weight: 600;
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
body.task-mail.action-compose .formbuttons .button.savedraft:active:not(.disabled) {
  transform: scale(0.96);
}
body.task-mail.action-compose .formbuttons .button.savedraft.disabled {
  opacity: 0.5;
  pointer-events: none;
}
body.task-mail.action-compose .formbuttons .button.cancel {
  color: #fff;
  background: #ef4444;
  border: 0;
  font-weight: 600;
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
body.task-mail.action-compose .formbuttons .button.cancel:active {
  transform: scale(0.96);
}
/* ========== 写信页：发送/保存草稿加载遮罩 ========== */
body.hn-mobile #hn-compose-loading {
  position: fixed;
  z-index: 5000;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
body.hn-mobile #hn-compose-loading.visible {
  opacity: 1;
  visibility: visible;
}
body.hn-mobile #hn-compose-loading .hn-cl-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 124px;
  padding: 24px;
  color: #fff;
  font-size: 15px;
  background: rgba(15, 23, 42, 0.82);
  border-radius: 16px;
  box-shadow: 0 4px 8px rgba(15, 23, 42, 0.06), 0 16px 40px rgba(15, 23, 42, 0.1);
}
body.hn-mobile #hn-compose-loading .hn-cl-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: hn-cl-spin 0.8s linear infinite;
}
@keyframes hn-cl-spin {
  to {
    transform: rotate(360deg);
  }
}
/* ========== 弹出菜单：底部动作面板（Bottom Sheet） ========== */
body.hn-mobile .popupmenu {
  position: fixed;
  z-index: 2100;
  right: 0;
  bottom: 0;
  left: 0;
  max-height: 70vh;
  overflow-y: auto;
  visibility: hidden;
  background: #fff;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.14);
  transform: translateY(100%);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
body.hn-mobile .popupmenu.opened,
body.hn-mobile .popupmenu[aria-expanded="true"] {
  visibility: visible;
  transform: translateY(0);
}
body.hn-mobile .popupmenu ul.menu li a {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 20px;
  color: #334155;
  font-size: 16px;
  text-decoration: none;
}
body.hn-mobile .popupmenu ul.menu li a:before {
  width: 24px;
  margin-right: 12px;
  color: #64748b;
  font-size: 17px;
}
body.hn-mobile .popupmenu ul.menu li a:active {
  background: #f1f5f9;
}
/* Bootstrap popover 承载的 Elastic 下拉菜单（附件/搜索筛选/收件人操作等）：
   打开时菜单 DOM 被移入 .popover-body，显隐与定位由 popover 控制，
   不会有人给它加 .opened —— 必须还原文档流，
   否则被上方底部面板规则 fixed+隐藏，弹窗内容一片空白 */
body.hn-mobile .popover .popupmenu {
  position: static;
  visibility: visible;
  max-height: none;
  overflow: visible;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  transition: none;
}
/* jQuery UI 模态弹窗（联系人选择器等）：层级必须压过顶栏/TabBar（z-index 1000）。
   弹窗在窄屏被 elastic 铺满全屏，按钮面板落在视口底部，
   若低于 TabBar 层级，"确定/添加"按钮会被 TabBar 完全遮住。 */
body.hn-mobile .ui-dialog {
  z-index: 2300;
  /* 选择联系人页为全屏操作页，弹窗自带标题栏（标题+关闭×）多余，删除 */
  /* 弹窗内所有元素（容器/滚动区/列表）一律隐藏滚动条 */
}
body.hn-mobile .ui-dialog .ui-dialog-titlebar {
  display: none;
}
body.hn-mobile .ui-dialog *,
body.hn-mobile .ui-dialog .ui-dialog-content {
  scrollbar-width: none;
}
body.hn-mobile .ui-dialog *::-webkit-scrollbar,
body.hn-mobile .ui-dialog .ui-dialog-content::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
body.hn-mobile .ui-widget-overlay {
  z-index: 2250;
}
/* 联系人选择器（写信页 "选择人员"）：在 jQuery UI 弹层中正常平铺显示，
   不受上方底部面板的位移/隐藏规则影响 */
body.hn-mobile #recipient-dialog,
body.hn-mobile .ui-dialog #recipient-dialog {
  position: static;
  z-index: auto;
  right: auto;
  bottom: auto;
  left: auto;
  max-height: none;
  overflow: visible;
  visibility: visible;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  /* 移动端：单栏分组树 + 底部确定按钮，替代桌面左右两栏。
       必须覆盖 plugin compose_tree.css 的 520px 固定宽度（其窄屏断点为 680px，
       真机 720/768 视口会横向溢出，导致"勾选/回填"异常） */
  /* 回到顶部：与通讯录页同位（fixed 距屏底 84px，弹窗全屏时即视口定位）。
       注意不能用面板内 absolute：面板下方还有弹窗按钮栏，锚面板会偏高 */
  /* 成员卡片：上下内边距增大（与通讯录主页一致 14px） */
  /* 搜索框：与主列表 .hn-searchbar 统一（灰底胶囊 + 内嵌清空 ×）
       结构为 plugin 注入的 .apl-tree-search-box > input#apl-tree-search，
       JS 会补 .hn-clear 清空按钮并以 .has-value 标记有无输入 */
  /* 目录/联系人列表基础触控热区 */
}
body.hn-mobile #recipient-dialog .apl-recipient-picker,
body.hn-mobile .ui-dialog #recipient-dialog .apl-recipient-picker {
  display: flex;
  width: auto !important;
  flex-direction: column;
  height: 100%;
}
body.hn-mobile #recipient-dialog .apl-recipient-source,
body.hn-mobile .ui-dialog #recipient-dialog .apl-recipient-source {
  display: flex;
  flex: 1 1 auto;
  min-height: 220px;
  flex-direction: column;
  margin: 0;
}
body.hn-mobile #recipient-dialog .hn-backtop,
body.hn-mobile .ui-dialog #recipient-dialog .hn-backtop {
  position: fixed;
  right: 24px;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  z-index: 900;
}
body.hn-mobile #recipient-dialog .apl-recipient-pane-title,
body.hn-mobile .ui-dialog #recipient-dialog .apl-recipient-pane-title {
  padding: 12px 16px 8px;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
}
body.hn-mobile #recipient-dialog .apl-recipient-tree-scroller,
body.hn-mobile .ui-dialog #recipient-dialog .apl-recipient-tree-scroller,
body.hn-mobile #recipient-dialog .scroller,
body.hn-mobile .ui-dialog #recipient-dialog .scroller {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
}
body.hn-mobile #recipient-dialog .apl-recipient-tree-scroller::-webkit-scrollbar,
body.hn-mobile .ui-dialog #recipient-dialog .apl-recipient-tree-scroller::-webkit-scrollbar,
body.hn-mobile #recipient-dialog .scroller::-webkit-scrollbar,
body.hn-mobile .ui-dialog #recipient-dialog .scroller::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
body.hn-mobile #recipient-dialog .apl-org-member,
body.hn-mobile .ui-dialog #recipient-dialog .apl-org-member {
  padding: 14px;
  /* 点击无反馈：覆盖 plugin compose_tree.css 的蓝底+左竖线 */
  /* 头像/姓名尺寸与通讯录主页一致（头像 44px/17px，姓名 16px） */
}
body.hn-mobile #recipient-dialog .apl-org-member:active,
body.hn-mobile .ui-dialog #recipient-dialog .apl-org-member:active {
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.03);
}
body.hn-mobile #recipient-dialog .apl-org-member .apl-org-avatar,
body.hn-mobile .ui-dialog #recipient-dialog .apl-org-member .apl-org-avatar {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  font-size: 17px;
}
body.hn-mobile #recipient-dialog .apl-org-member .apl-org-name,
body.hn-mobile .ui-dialog #recipient-dialog .apl-org-member .apl-org-name {
  font-size: 16px;
}
body.hn-mobile #recipient-dialog .apl-tree-search-box,
body.hn-mobile .ui-dialog #recipient-dialog .apl-tree-search-box {
  display: flex;
  position: relative;
  align-items: center;
  margin: 12px 16px;
  padding: 2px 4px 2px 0;
  background: #f1f5f9;
  border: 0;
  border-radius: 999px;
  transition: background 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  /* 搜索放大镜：伪元素图标与 .hn-searchbar 同款（Icons 字体 \f002），
           左侧留 10px 与主列表图标起点一致 */
  /* 清空 ×：绝对定位贴右缘（右 8px 垂直居中），22px 圆与主列表同尺寸，
           仅有输入时显示 */
}
body.hn-mobile #recipient-dialog .apl-tree-search-box:focus-within,
body.hn-mobile .ui-dialog #recipient-dialog .apl-tree-search-box:focus-within {
  background: #e9eef5;
}
body.hn-mobile #recipient-dialog .apl-tree-search-box:before,
body.hn-mobile .ui-dialog #recipient-dialog .apl-tree-search-box:before {
  content: "\f002";
  flex: 0 0 auto;
  width: 28px;
  margin-left: 10px;
  font-family: 'Icons';
  font-weight: 900;
  font-style: normal;
  font-size: 16px;
  line-height: 48px;
  text-align: center;
  color: #64748b;
  -webkit-font-smoothing: antialiased;
}
body.hn-mobile #recipient-dialog .apl-tree-search-box #apl-tree-search,
body.hn-mobile .ui-dialog #recipient-dialog .apl-tree-search-box #apl-tree-search {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  box-sizing: border-box;
  padding: 0 30px 0 4px;
  color: #0f172a;
  font-size: 17px;
  background: transparent;
  border: 0;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
body.hn-mobile #recipient-dialog .apl-tree-search-box #apl-tree-search::placeholder,
body.hn-mobile .ui-dialog #recipient-dialog .apl-tree-search-box #apl-tree-search::placeholder {
  color: #64748b;
}
body.hn-mobile #recipient-dialog .apl-tree-search-box #apl-tree-search::-webkit-search-cancel-button,
body.hn-mobile .ui-dialog #recipient-dialog .apl-tree-search-box #apl-tree-search::-webkit-search-cancel-button {
  display: none;
}
body.hn-mobile #recipient-dialog .apl-tree-search-box .hn-clear,
body.hn-mobile .ui-dialog #recipient-dialog .apl-tree-search-box .hn-clear {
  display: none;
  position: absolute;
  right: 14px;
  top: 50%;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  transform: translateY(-50%);
  color: #fff;
  cursor: pointer;
  outline: none;
  background: #b6c2d1;
  border: 0;
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
}
body.hn-mobile #recipient-dialog .apl-tree-search-box .hn-clear svg,
body.hn-mobile .ui-dialog #recipient-dialog .apl-tree-search-box .hn-clear svg {
  display: block;
  width: 12px;
  height: 12px;
  pointer-events: none;
}
body.hn-mobile #recipient-dialog .apl-tree-search-box.has-value .hn-clear,
body.hn-mobile .ui-dialog #recipient-dialog .apl-tree-search-box.has-value .hn-clear {
  display: flex;
}
body.hn-mobile #recipient-dialog .directorylist li a,
body.hn-mobile .ui-dialog #recipient-dialog .directorylist li a,
body.hn-mobile #recipient-dialog .contactlist li a,
body.hn-mobile .ui-dialog #recipient-dialog .contactlist li a {
  min-height: 48px;
  padding: 0 16px;
  line-height: 48px;
}
/* Bootstrap 弹层（附件菜单/搜索筛选等 popover）必须高于下方遮罩，
   否则被遮罩盖住整层发暗；仍低于底部动作面板(2100/2200)与 jQuery UI 弹窗(2250/2300) */
body.hn-mobile .popover {
  z-index: 2050;
}
/* 手机布局下弹层钉住视口：Elastic 规则用 absolute + top:0/bottom:0/right:0
   画右侧栏，absolute 相对最近定位祖先/文档定位，页面滚动或嵌套定位上下文
   会产生面板偏移（App 端反馈"下载附件可点区域偏移、要点多次"的嫌疑之一）；
   fixed 直接把面板锚定到视口，消除定位链路的不确定性。Popper 内联的
   top/left/transform 已被 Elastic 手机规则覆盖/清零，改 fixed 无副作用 */
html.layout-phone body.hn-mobile .popover,
html.layout-small body.hn-mobile .popover {
  position: fixed;
}
/* 底部面板遮罩 */
body.hn-mobile .popover-overlay,
body.hn-mobile #popover-overlay {
  z-index: 2000;
  background: rgba(15, 23, 42, 0.4);
}
/* ========== 通用触控热区 ========== */
body.hn-mobile .listing tbody td,
body.hn-mobile .listing li a {
  min-height: 48px;
}
body.hn-mobile .toolbar a,
body.hn-mobile #taskmenu a,
body.hn-mobile .header a.btn {
  min-width: 44px;
  min-height: 44px;
}
body.hn-mobile .form-control,
body.hn-mobile .custom-select {
  min-height: 44px;
  font-size: 16px;
  /* ≥16px 防 iOS 聚焦自动放大 */
}
/* ========== 登录页（玻璃拟态·晨蓝商务） ========== */
body.task-login.hn-mobile {
  /* 全屏沉浸：盖住 appbar/tabbar 占位 */
  background: radial-gradient(120% 90% at 85% -10%, rgba(59, 139, 255, 0.35) 0%, rgba(59, 139, 255, 0) 55%), radial-gradient(110% 80% at -10% 100%, rgba(34, 211, 238, 0.22) 0%, rgba(34, 211, 238, 0) 52%), linear-gradient(168deg, #dfe9fb 0%, #e8f1ff 42%, #f4f8ff 100%);
  background-attachment: fixed;
  /* 背景柔光装饰 */
  /* 表格 → 块级，行间距统一 */
  /* 登录按钮容器：服务端输出 <p class="formbuttons">（复数），单数类名不匹配 */
}
body.task-login.hn-mobile .hn-appbar,
body.task-login.hn-mobile .hn-tabbar {
  display: none !important;
}
body.task-login.hn-mobile #layout {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
body.task-login.hn-mobile #layout-content.hn-login {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  padding: 32px 28px calc(24px + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
}
body.task-login.hn-mobile .hn-login-decor {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
}
body.task-login.hn-mobile .hn-decor {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(46px);
  opacity: 0.55;
}
body.task-login.hn-mobile .hn-decor.hn-decor-1 {
  top: -90px;
  right: -70px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle at 32% 30%, #7db4ff, rgba(125, 180, 255, 0) 70%);
}
body.task-login.hn-mobile .hn-decor.hn-decor-2 {
  bottom: -60px;
  left: -80px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle at 60% 40%, #8ad8f0, rgba(138, 216, 240, 0) 70%);
}
body.task-login.hn-mobile .hn-decor.hn-decor-3 {
  top: 42%;
  left: -50px;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle at 50% 50%, #b7ccff, rgba(183, 204, 255, 0) 70%);
  opacity: 0.4;
}
body.task-login.hn-mobile .hn-login-hero {
  position: relative;
  z-index: 1;
  margin-bottom: 26px;
  text-align: center;
  animation: hn-login-rise 0.55s cubic-bezier(0.4, 0, 0.2, 1) both;
}
body.task-login.hn-mobile .hn-login-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  margin: 0 auto 14px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 24px;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.05), 0 4px 12px rgba(15, 23, 42, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body.task-login.hn-mobile .hn-login-logo #logo {
  display: block;
  max-width: 56px;
  max-height: 56px;
  margin: 0;
  object-fit: contain;
  /* 抵消 elastic 的 top:16vh 定位残留 */
  position: static;
  top: auto;
}
body.task-login.hn-mobile .hn-login-slogan {
  margin: 0;
  color: #0f172a;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
body.task-login.hn-mobile .hn-login-sub {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 13px;
  letter-spacing: 0.12em;
}
body.task-login.hn-mobile .hn-login-card {
  position: relative;
  z-index: 1;
  padding: 26px 22px;
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 20px;
  box-shadow: 0 4px 8px rgba(15, 23, 42, 0.06), 0 16px 40px rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  animation: hn-login-rise 0.55s cubic-bezier(0.4, 0, 0.2, 1) 0.08s both;
}
body.task-login.hn-mobile #login-form {
  top: auto;
}
body.task-login.hn-mobile #login-form table,
body.task-login.hn-mobile #login-form tbody,
body.task-login.hn-mobile #login-form tr,
body.task-login.hn-mobile #login-form td {
  display: block;
  width: 100%;
}
body.task-login.hn-mobile #login-form .form-group.row {
  margin: 0 0 14px;
}
body.task-login.hn-mobile #login-form .form-group.row:last-of-type {
  margin-bottom: 0;
}
body.task-login.hn-mobile #login-form td.title {
  display: none !important;
}
body.task-login.hn-mobile #login-form td.input.input-group {
  position: relative;
  display: flex;
  align-items: center;
}
body.task-login.hn-mobile #login-form .input-group-text {
  position: absolute;
  /* Bootstrap 规定 .input-group > .form-control:focus { z-index: 3 }，
               聚焦的不透明输入框会盖住 z-index:2 的图标，必须压过它 */
  z-index: 4;
  top: 50%;
  left: 14px;
  /* 不设 top 时绝对定位图标落到"静态位置"：外层 prepend 无流内容高度为 0，
               居中后其顶边在行高中线，图标整体下坠约半个图标高——必须显式垂直居中 */
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: transparent;
  border: 0;
  color: #64748b;
  font-family: 'Icons';
  font-style: normal;
  font-weight: 900;
  font-size: 14px;
}
body.task-login.hn-mobile #login-form .input-group-text.icon.user:before {
  content: "\f007";
}
body.task-login.hn-mobile #login-form .input-group-text.icon.pass:before {
  content: "\f023";
}
body.task-login.hn-mobile #rcmloginuser,
body.task-login.hn-mobile #rcmloginpwd {
  width: 100%;
  min-height: 50px;
  padding: 0 14px 0 44px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid #e8edf3;
  border-radius: 14px;
  box-shadow: none;
  color: #0f172a;
  font-size: 16px;
  /* ≥16px 防 iOS 聚焦自动放大 */
  transition: border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
body.task-login.hn-mobile #rcmloginuser::placeholder,
body.task-login.hn-mobile #rcmloginpwd::placeholder {
  color: #cbd5e1;
}
body.task-login.hn-mobile #rcmloginuser:focus,
body.task-login.hn-mobile #rcmloginpwd:focus {
  background: #fff;
  border-color: rgba(29, 111, 255, 0.55);
  box-shadow: 0 0 0 3px rgba(29, 111, 255, 0.12);
  outline: 0;
}
body.task-login.hn-mobile .formbuttons {
  margin: 28px 0 0;
}
body.task-login.hn-mobile #rcmloginsubmit {
  width: 100%;
  height: 50px;
  background: linear-gradient(135deg, #3b8bff 0%, #1d6fff 60%, #1466f2 100%) !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 20px rgba(29, 111, 255, 0.32);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  /* 视觉居中补偿字距 */
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
body.task-login.hn-mobile #rcmloginsubmit:hover {
  box-shadow: 0 10px 24px rgba(29, 111, 255, 0.38);
}
body.task-login.hn-mobile #rcmloginsubmit:active {
  transform: scale(0.97);
  box-shadow: 0 4px 12px rgba(29, 111, 255, 0.3);
}
body.task-login.hn-mobile #login-form .sso-login-button-wrap {
  margin: 12px 0 0;
  padding: 0;
  border: 0 !important;
}
body.task-login.hn-mobile #login-form #rcmloginsso {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid #dbeafe;
  border-radius: 14px;
  color: #1d6fff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
body.task-login.hn-mobile #login-form #rcmloginsso:hover,
body.task-login.hn-mobile #login-form #rcmloginsso:focus {
  background: #fff;
  border-color: rgba(29, 111, 255, 0.55);
  color: #1d6fff;
}
body.task-login.hn-mobile .hn-login-foot {
  position: relative;
  z-index: 1;
  margin: 26px 0 0;
  color: #cbd5e1;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-align: center;
  animation: hn-login-rise 0.55s cubic-bezier(0.4, 0, 0.2, 1) 0.16s both;
}
@keyframes hn-login-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ========== 通讯录 / 设置 ========== */
body.task-addressbook #layout-content .iframe-wrapper,
body.task-settings #layout-content .iframe-wrapper {
  padding: 12px;
  background: transparent;
}
body.task-addressbook #layout-content .iframe-wrapper iframe,
body.task-settings #layout-content .iframe-wrapper iframe {
  background: #fff;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.03);
}
/* ========== 通讯录：联系人行卡（QQ 式白底卡片 + 首字母头像） ========== */
body.hn-mobile.task-addressbook {
  /* 列表滚动区下沉为卡片流（与邮件列表一致） */
  /* 联系人行：卡片化 */
  /* 分页条：与邮件一致 */
}
body.hn-mobile.task-addressbook #layout-list .scroller {
  margin: 0;
  padding: 8px 12px 16px;
  background: transparent;
}
body.hn-mobile.task-addressbook table.contactlist {
  display: block;
  width: 100% !important;
  border-collapse: separate;
}
body.hn-mobile.task-addressbook table.contactlist > tbody {
  display: block;
  width: 100%;
}
body.hn-mobile.task-addressbook table.contactlist > tbody > tr {
  position: relative;
  display: flex !important;
  /* list.js remove_row 只设内联 display:none，需属性选择器提高特异性让被删行真正隐藏 */
  align-items: center;
  width: 100% !important;
  min-height: 68px;
  margin-bottom: 8px;
  padding: 10px 12px;
  background: #fff;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.03);
  box-sizing: border-box;
  transition: none;
  /* 首字母头像 */
  /* 姓名 + 邮箱（上下结构） */
  /* 分组行（td.action 有 pushgroup） */
  /* 点击不做交互反馈（含选中态），保持静止外观 */
}
body.hn-mobile.task-addressbook table.contactlist > tbody > tr[style*="display: none"] {
  display: none !important;
}
body.hn-mobile.task-addressbook table.contactlist > tbody > tr:active {
  transform: none;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.03);
  background: #fff;
}
body.hn-mobile.task-addressbook table.contactlist > tbody > tr > td {
  padding: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
}
body.hn-mobile.task-addressbook table.contactlist > tbody > tr > td.action {
  display: none !important;
}
body.hn-mobile.task-addressbook table.contactlist > tbody > tr > td.name {
  display: flex !important;
  flex: 1 1 0;
  align-items: center;
  min-width: 0;
  /* 隐藏 Elastic 默认的 user/users 行图标（改用首字母渐进头像） */
}
body.hn-mobile.task-addressbook table.contactlist > tbody > tr > td.name:before {
  display: none !important;
}
body.hn-mobile.task-addressbook table.contactlist > tbody > tr .hn-contact-avatar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: 12px;
  color: #fff;
  border-radius: 50%;
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.1);
  user-select: none;
}
body.hn-mobile.task-addressbook table.contactlist > tbody > tr .hn-contact-info {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
}
body.hn-mobile.task-addressbook table.contactlist > tbody > tr .hn-contact-name {
  max-width: 100%;
  overflow: hidden;
  color: #0f172a;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.hn-mobile.task-addressbook table.contactlist > tbody > tr span.email {
  display: block;
  max-width: 100%;
  overflow: hidden;
  margin: 0 !important;
  color: #64748b;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.hn-mobile.task-addressbook table.contactlist > tbody > tr.group .hn-contact-info .hn-contact-name {
  color: #1d6fff;
}
body.hn-mobile.task-addressbook table.contactlist > tbody > tr.group .hn-contact-avatar {
  background: linear-gradient(135deg, #c7dcff, #9cc2ff) !important;
  color: #1d6fff;
}
body.hn-mobile.task-addressbook table.contactlist > tbody > tr.selected {
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.03);
}
body.hn-mobile.task-addressbook table.contactlist > tbody > tr.selected .hn-contact-name {
  color: #0f172a;
}
body.hn-mobile.task-addressbook table.contactlist > tbody > tr.unseen {
  font-weight: normal;
}
body.hn-mobile.task-addressbook .hn-pagenav {
  justify-content: center;
}
/* ========== 联系人新增/编辑页（iframe 内移动端表单） ========== */
/* 不依赖 JS：直接用服务端输出的 body class（action-add / action-edit） */
/* action-show（详情页）复用固定顶部导航样式，详情页具体布局在下方独立块处理 */
body.hn-mobile.task-addressbook.action-add,
body.hn-mobile.task-addressbook.action-edit,
body.hn-mobile.task-addressbook.action-show,
body.hn-mobile.hn-contact-edit,
body.hn-mobile.hn-contact-view {
  overflow: hidden;
  /* 固定顶栏/底栏需要页面级滚动容器 */
  height: 100%;
}
body.hn-mobile.task-addressbook.action-add .hn-contact-nav,
body.hn-mobile.task-addressbook.action-edit .hn-contact-nav,
body.hn-mobile.task-addressbook.action-show .hn-contact-nav,
body.hn-mobile.hn-contact-edit .hn-contact-nav,
body.hn-mobile.hn-contact-view .hn-contact-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: calc(52px + env(safe-area-inset-top, 0px));
  z-index: 1100;
  display: flex;
  align-items: center;
  padding: env(safe-area-inset-top, 0px) 8px 0;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid #f1f5f9;
  color: #0f172a;
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  /* 右侧占位与返回键同宽（44px），保证标题绝对居中 */
}
body.hn-mobile.task-addressbook.action-add .hn-contact-nav .hn-contact-back,
body.hn-mobile.task-addressbook.action-edit .hn-contact-nav .hn-contact-back,
body.hn-mobile.task-addressbook.action-show .hn-contact-nav .hn-contact-back,
body.hn-mobile.hn-contact-edit .hn-contact-nav .hn-contact-back,
body.hn-mobile.hn-contact-view .hn-contact-nav .hn-contact-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: -3px;
  color: #0C1C33;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
body.hn-mobile.task-addressbook.action-add .hn-contact-nav .hn-contact-back:active,
body.hn-mobile.task-addressbook.action-edit .hn-contact-nav .hn-contact-back:active,
body.hn-mobile.task-addressbook.action-show .hn-contact-nav .hn-contact-back:active,
body.hn-mobile.hn-contact-edit .hn-contact-nav .hn-contact-back:active,
body.hn-mobile.hn-contact-view .hn-contact-nav .hn-contact-back:active {
  opacity: 0.65;
}
body.hn-mobile.task-addressbook.action-add .hn-contact-nav .hn-contact-back svg,
body.hn-mobile.task-addressbook.action-edit .hn-contact-nav .hn-contact-back svg,
body.hn-mobile.task-addressbook.action-show .hn-contact-nav .hn-contact-back svg,
body.hn-mobile.hn-contact-edit .hn-contact-nav .hn-contact-back svg,
body.hn-mobile.hn-contact-view .hn-contact-nav .hn-contact-back svg,
body.hn-mobile.task-addressbook.action-add .hn-contact-nav .hn-contact-back .hn-contact-back-icon,
body.hn-mobile.task-addressbook.action-edit .hn-contact-nav .hn-contact-back .hn-contact-back-icon,
body.hn-mobile.task-addressbook.action-show .hn-contact-nav .hn-contact-back .hn-contact-back-icon,
body.hn-mobile.hn-contact-edit .hn-contact-nav .hn-contact-back .hn-contact-back-icon,
body.hn-mobile.hn-contact-view .hn-contact-nav .hn-contact-back .hn-contact-back-icon {
  display: block;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
}
body.hn-mobile.task-addressbook.action-add .hn-contact-nav .hn-contact-nav-title,
body.hn-mobile.task-addressbook.action-edit .hn-contact-nav .hn-contact-nav-title,
body.hn-mobile.task-addressbook.action-show .hn-contact-nav .hn-contact-nav-title,
body.hn-mobile.hn-contact-edit .hn-contact-nav .hn-contact-nav-title,
body.hn-mobile.hn-contact-view .hn-contact-nav .hn-contact-nav-title {
  flex: 1 1 auto;
  min-width: 0;
  color: #0f172a;
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.hn-mobile.task-addressbook.action-add .hn-contact-nav .hn-contact-nav-spacer,
body.hn-mobile.task-addressbook.action-edit .hn-contact-nav .hn-contact-nav-spacer,
body.hn-mobile.task-addressbook.action-show .hn-contact-nav .hn-contact-nav-spacer,
body.hn-mobile.hn-contact-edit .hn-contact-nav .hn-contact-nav-spacer,
body.hn-mobile.hn-contact-view .hn-contact-nav .hn-contact-nav-spacer {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
}
body.hn-mobile.task-addressbook.action-add .hn-contact-nav:after,
body.hn-mobile.task-addressbook.action-edit .hn-contact-nav:after,
body.hn-mobile.task-addressbook.action-show .hn-contact-nav:after,
body.hn-mobile.hn-contact-edit .hn-contact-nav:after,
body.hn-mobile.hn-contact-view .hn-contact-nav:after {
  content: none;
}
body.hn-mobile.task-addressbook.action-add .hn-contact-form,
body.hn-mobile.task-addressbook.action-edit .hn-contact-form,
body.hn-mobile.task-addressbook.action-show .hn-contact-form,
body.hn-mobile.hn-contact-edit .hn-contact-form,
body.hn-mobile.hn-contact-view .hn-contact-form {
  margin: 56px 0 84px;
  padding: 0;
}
body.hn-mobile.task-addressbook.action-add .contact-header,
body.hn-mobile.task-addressbook.action-edit .contact-header,
body.hn-mobile.task-addressbook.action-show .contact-header,
body.hn-mobile.hn-contact-edit .contact-header,
body.hn-mobile.hn-contact-view .contact-header {
  display: flex;
  align-items: flex-start;
  padding: 20px 16px 8px;
}
body.hn-mobile.task-addressbook.action-add .contact-header .contact-photo,
body.hn-mobile.task-addressbook.action-edit .contact-header .contact-photo,
body.hn-mobile.task-addressbook.action-show .contact-header .contact-photo,
body.hn-mobile.hn-contact-edit .contact-header .contact-photo,
body.hn-mobile.hn-contact-view .contact-header .contact-photo {
  margin-right: 14px;
  flex: 0 0 72px;
  width: 72px;
}
body.hn-mobile.task-addressbook.action-add .contact-header .contact-photo .image-upload,
body.hn-mobile.task-addressbook.action-edit .contact-header .contact-photo .image-upload,
body.hn-mobile.task-addressbook.action-show .contact-header .contact-photo .image-upload,
body.hn-mobile.hn-contact-edit .contact-header .contact-photo .image-upload,
body.hn-mobile.hn-contact-view .contact-header .contact-photo .image-upload,
body.hn-mobile.task-addressbook.action-add .contact-header .contact-photo #contactpic,
body.hn-mobile.task-addressbook.action-edit .contact-header .contact-photo #contactpic,
body.hn-mobile.task-addressbook.action-show .contact-header .contact-photo #contactpic,
body.hn-mobile.hn-contact-edit .contact-header .contact-photo #contactpic,
body.hn-mobile.hn-contact-view .contact-header .contact-photo #contactpic {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px;
  max-width: 64px;
  padding: 0 !important;
  border-radius: 50% !important;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  background: #f2f5fb;
}
body.hn-mobile.task-addressbook.action-add .contact-header .contact-photo .image-upload img,
body.hn-mobile.task-addressbook.action-edit .contact-header .contact-photo .image-upload img,
body.hn-mobile.task-addressbook.action-show .contact-header .contact-photo .image-upload img,
body.hn-mobile.hn-contact-edit .contact-header .contact-photo .image-upload img,
body.hn-mobile.hn-contact-view .contact-header .contact-photo .image-upload img,
body.hn-mobile.task-addressbook.action-add .contact-header .contact-photo #contactpic img,
body.hn-mobile.task-addressbook.action-edit .contact-header .contact-photo #contactpic img,
body.hn-mobile.task-addressbook.action-show .contact-header .contact-photo #contactpic img,
body.hn-mobile.hn-contact-edit .contact-header .contact-photo #contactpic img,
body.hn-mobile.hn-contact-view .contact-header .contact-photo #contactpic img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  object-fit: cover;
  border-radius: 50%;
}
body.hn-mobile.task-addressbook.action-add .contact-header .contact-photo .photo-controls,
body.hn-mobile.task-addressbook.action-edit .contact-header .contact-photo .photo-controls,
body.hn-mobile.task-addressbook.action-show .contact-header .contact-photo .photo-controls,
body.hn-mobile.hn-contact-edit .contact-header .contact-photo .photo-controls,
body.hn-mobile.hn-contact-view .contact-header .contact-photo .photo-controls {
  text-align: center;
  margin-top: 2px;
}
body.hn-mobile.task-addressbook.action-add .contact-header .contact-head,
body.hn-mobile.task-addressbook.action-edit .contact-header .contact-head,
body.hn-mobile.task-addressbook.action-show .contact-header .contact-head,
body.hn-mobile.hn-contact-edit .contact-header .contact-head,
body.hn-mobile.hn-contact-view .contact-header .contact-head {
  flex: 1;
  margin: 0;
  min-width: 0;
}
body.hn-mobile.task-addressbook.action-add .contact-head .row,
body.hn-mobile.task-addressbook.action-edit .contact-head .row,
body.hn-mobile.task-addressbook.action-show .contact-head .row,
body.hn-mobile.hn-contact-edit .contact-head .row,
body.hn-mobile.hn-contact-view .contact-head .row,
body.hn-mobile.task-addressbook.action-add .propform.grouped .row,
body.hn-mobile.task-addressbook.action-edit .propform.grouped .row,
body.hn-mobile.task-addressbook.action-show .propform.grouped .row,
body.hn-mobile.hn-contact-edit .propform.grouped .row,
body.hn-mobile.hn-contact-view .propform.grouped .row,
body.hn-mobile.task-addressbook.action-add .contact-head > .name,
body.hn-mobile.task-addressbook.action-edit .contact-head > .name,
body.hn-mobile.task-addressbook.action-show .contact-head > .name,
body.hn-mobile.hn-contact-edit .contact-head > .name,
body.hn-mobile.hn-contact-view .contact-head > .name,
body.hn-mobile.task-addressbook.action-add .propform.grouped > .name,
body.hn-mobile.task-addressbook.action-edit .propform.grouped > .name,
body.hn-mobile.task-addressbook.action-show .propform.grouped > .name,
body.hn-mobile.hn-contact-edit .propform.grouped > .name,
body.hn-mobile.hn-contact-view .propform.grouped > .name,
body.hn-mobile.task-addressbook.action-add .contact-head > .names,
body.hn-mobile.task-addressbook.action-edit .contact-head > .names,
body.hn-mobile.task-addressbook.action-show .contact-head > .names,
body.hn-mobile.hn-contact-edit .contact-head > .names,
body.hn-mobile.hn-contact-view .contact-head > .names,
body.hn-mobile.task-addressbook.action-add .propform.grouped > .names,
body.hn-mobile.task-addressbook.action-edit .propform.grouped > .names,
body.hn-mobile.task-addressbook.action-show .propform.grouped > .names,
body.hn-mobile.hn-contact-edit .propform.grouped > .names,
body.hn-mobile.hn-contact-view .propform.grouped > .names,
body.hn-mobile.task-addressbook.action-add .contact-head > .nickname,
body.hn-mobile.task-addressbook.action-edit .contact-head > .nickname,
body.hn-mobile.task-addressbook.action-show .contact-head > .nickname,
body.hn-mobile.hn-contact-edit .contact-head > .nickname,
body.hn-mobile.hn-contact-view .contact-head > .nickname,
body.hn-mobile.task-addressbook.action-add .propform.grouped > .nickname,
body.hn-mobile.task-addressbook.action-edit .propform.grouped > .nickname,
body.hn-mobile.task-addressbook.action-show .propform.grouped > .nickname,
body.hn-mobile.hn-contact-edit .propform.grouped > .nickname,
body.hn-mobile.hn-contact-view .propform.grouped > .nickname,
body.hn-mobile.task-addressbook.action-add .contact-head > .organization,
body.hn-mobile.task-addressbook.action-edit .contact-head > .organization,
body.hn-mobile.task-addressbook.action-show .contact-head > .organization,
body.hn-mobile.hn-contact-edit .contact-head > .organization,
body.hn-mobile.hn-contact-view .contact-head > .organization,
body.hn-mobile.task-addressbook.action-add .propform.grouped > .organization,
body.hn-mobile.task-addressbook.action-edit .propform.grouped > .organization,
body.hn-mobile.task-addressbook.action-show .propform.grouped > .organization,
body.hn-mobile.hn-contact-edit .propform.grouped > .organization,
body.hn-mobile.hn-contact-view .propform.grouped > .organization,
body.hn-mobile.task-addressbook.action-add .contact-head > .department,
body.hn-mobile.task-addressbook.action-edit .contact-head > .department,
body.hn-mobile.task-addressbook.action-show .contact-head > .department,
body.hn-mobile.hn-contact-edit .contact-head > .department,
body.hn-mobile.hn-contact-view .contact-head > .department,
body.hn-mobile.task-addressbook.action-add .propform.grouped > .department,
body.hn-mobile.task-addressbook.action-edit .propform.grouped > .department,
body.hn-mobile.task-addressbook.action-show .propform.grouped > .department,
body.hn-mobile.hn-contact-edit .propform.grouped > .department,
body.hn-mobile.hn-contact-view .propform.grouped > .department,
body.hn-mobile.task-addressbook.action-add .contact-head > .jobtitle,
body.hn-mobile.task-addressbook.action-edit .contact-head > .jobtitle,
body.hn-mobile.task-addressbook.action-show .contact-head > .jobtitle,
body.hn-mobile.hn-contact-edit .contact-head > .jobtitle,
body.hn-mobile.hn-contact-view .contact-head > .jobtitle,
body.hn-mobile.task-addressbook.action-add .propform.grouped > .jobtitle,
body.hn-mobile.task-addressbook.action-edit .propform.grouped > .jobtitle,
body.hn-mobile.task-addressbook.action-show .propform.grouped > .jobtitle,
body.hn-mobile.hn-contact-edit .propform.grouped > .jobtitle,
body.hn-mobile.hn-contact-view .propform.grouped > .jobtitle,
body.hn-mobile.task-addressbook.action-add .contact-head > .displayname,
body.hn-mobile.task-addressbook.action-edit .contact-head > .displayname,
body.hn-mobile.task-addressbook.action-show .contact-head > .displayname,
body.hn-mobile.hn-contact-edit .contact-head > .displayname,
body.hn-mobile.hn-contact-view .contact-head > .displayname,
body.hn-mobile.task-addressbook.action-add .propform.grouped > .displayname,
body.hn-mobile.task-addressbook.action-edit .propform.grouped > .displayname,
body.hn-mobile.task-addressbook.action-show .propform.grouped > .displayname,
body.hn-mobile.hn-contact-edit .propform.grouped > .displayname,
body.hn-mobile.hn-contact-view .propform.grouped > .displayname {
  display: flex;
  flex-direction: column;
  padding: 6px 0;
}
body.hn-mobile.task-addressbook.action-add .contact-head label[for^='ff_'],
body.hn-mobile.task-addressbook.action-edit .contact-head label[for^='ff_'],
body.hn-mobile.task-addressbook.action-show .contact-head label[for^='ff_'],
body.hn-mobile.hn-contact-edit .contact-head label[for^='ff_'],
body.hn-mobile.hn-contact-view .contact-head label[for^='ff_'],
body.hn-mobile.task-addressbook.action-add .propform.grouped label[for^='ff_'],
body.hn-mobile.task-addressbook.action-edit .propform.grouped label[for^='ff_'],
body.hn-mobile.task-addressbook.action-show .propform.grouped label[for^='ff_'],
body.hn-mobile.hn-contact-edit .propform.grouped label[for^='ff_'],
body.hn-mobile.hn-contact-view .propform.grouped label[for^='ff_'],
body.hn-mobile.task-addressbook.action-add .contact-head .contactfieldlabel,
body.hn-mobile.task-addressbook.action-edit .contact-head .contactfieldlabel,
body.hn-mobile.task-addressbook.action-show .contact-head .contactfieldlabel,
body.hn-mobile.hn-contact-edit .contact-head .contactfieldlabel,
body.hn-mobile.hn-contact-view .contact-head .contactfieldlabel,
body.hn-mobile.task-addressbook.action-add .propform.grouped .contactfieldlabel,
body.hn-mobile.task-addressbook.action-edit .propform.grouped .contactfieldlabel,
body.hn-mobile.task-addressbook.action-show .propform.grouped .contactfieldlabel,
body.hn-mobile.hn-contact-edit .propform.grouped .contactfieldlabel,
body.hn-mobile.hn-contact-view .propform.grouped .contactfieldlabel {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 500;
  color: #737677;
}
body.hn-mobile.task-addressbook.action-add .contact-head input,
body.hn-mobile.task-addressbook.action-edit .contact-head input,
body.hn-mobile.task-addressbook.action-show .contact-head input,
body.hn-mobile.hn-contact-edit .contact-head input,
body.hn-mobile.hn-contact-view .contact-head input,
body.hn-mobile.task-addressbook.action-add .contact-head select,
body.hn-mobile.task-addressbook.action-edit .contact-head select,
body.hn-mobile.task-addressbook.action-show .contact-head select,
body.hn-mobile.hn-contact-edit .contact-head select,
body.hn-mobile.hn-contact-view .contact-head select,
body.hn-mobile.task-addressbook.action-add .propform.grouped input:not([type='checkbox']):not([type='radio']),
body.hn-mobile.task-addressbook.action-edit .propform.grouped input:not([type='checkbox']):not([type='radio']),
body.hn-mobile.task-addressbook.action-show .propform.grouped input:not([type='checkbox']):not([type='radio']),
body.hn-mobile.hn-contact-edit .propform.grouped input:not([type='checkbox']):not([type='radio']),
body.hn-mobile.hn-contact-view .propform.grouped input:not([type='checkbox']):not([type='radio']),
body.hn-mobile.task-addressbook.action-add .propform.grouped select,
body.hn-mobile.task-addressbook.action-edit .propform.grouped select,
body.hn-mobile.task-addressbook.action-show .propform.grouped select,
body.hn-mobile.hn-contact-edit .propform.grouped select,
body.hn-mobile.hn-contact-view .propform.grouped select,
body.hn-mobile.task-addressbook.action-add .propform.grouped textarea,
body.hn-mobile.task-addressbook.action-edit .propform.grouped textarea,
body.hn-mobile.task-addressbook.action-show .propform.grouped textarea,
body.hn-mobile.hn-contact-edit .propform.grouped textarea,
body.hn-mobile.hn-contact-view .propform.grouped textarea {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-bottom: 1px solid #e2e8f0;
  border-radius: 0;
  background: transparent;
  padding: 10px 0;
  min-height: 44px;
  font-size: 16px;
  color: #737677;
  -webkit-appearance: none;
  appearance: none;
}
body.hn-mobile.task-addressbook.action-add .contact-head input:focus,
body.hn-mobile.task-addressbook.action-edit .contact-head input:focus,
body.hn-mobile.task-addressbook.action-show .contact-head input:focus,
body.hn-mobile.hn-contact-edit .contact-head input:focus,
body.hn-mobile.hn-contact-view .contact-head input:focus,
body.hn-mobile.task-addressbook.action-add .contact-head select:focus,
body.hn-mobile.task-addressbook.action-edit .contact-head select:focus,
body.hn-mobile.task-addressbook.action-show .contact-head select:focus,
body.hn-mobile.hn-contact-edit .contact-head select:focus,
body.hn-mobile.hn-contact-view .contact-head select:focus,
body.hn-mobile.task-addressbook.action-add .propform.grouped input:not([type='checkbox']):not([type='radio']):focus,
body.hn-mobile.task-addressbook.action-edit .propform.grouped input:not([type='checkbox']):not([type='radio']):focus,
body.hn-mobile.task-addressbook.action-show .propform.grouped input:not([type='checkbox']):not([type='radio']):focus,
body.hn-mobile.hn-contact-edit .propform.grouped input:not([type='checkbox']):not([type='radio']):focus,
body.hn-mobile.hn-contact-view .propform.grouped input:not([type='checkbox']):not([type='radio']):focus,
body.hn-mobile.task-addressbook.action-add .propform.grouped select:focus,
body.hn-mobile.task-addressbook.action-edit .propform.grouped select:focus,
body.hn-mobile.task-addressbook.action-show .propform.grouped select:focus,
body.hn-mobile.hn-contact-edit .propform.grouped select:focus,
body.hn-mobile.hn-contact-view .propform.grouped select:focus,
body.hn-mobile.task-addressbook.action-add .propform.grouped textarea:focus,
body.hn-mobile.task-addressbook.action-edit .propform.grouped textarea:focus,
body.hn-mobile.task-addressbook.action-show .propform.grouped textarea:focus,
body.hn-mobile.hn-contact-edit .propform.grouped textarea:focus,
body.hn-mobile.hn-contact-view .propform.grouped textarea:focus {
  outline: none;
  border-bottom-color: #1d6fff;
  box-shadow: 0 1px 0 #1d6fff;
}
body.hn-mobile.task-addressbook.action-add .propform.grouped textarea,
body.hn-mobile.task-addressbook.action-edit .propform.grouped textarea,
body.hn-mobile.task-addressbook.action-show .propform.grouped textarea,
body.hn-mobile.hn-contact-edit .propform.grouped textarea,
body.hn-mobile.hn-contact-view .propform.grouped textarea {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px;
  min-height: 96px;
  resize: vertical;
}
body.hn-mobile.task-addressbook.action-add .propform.grouped > fieldset,
body.hn-mobile.task-addressbook.action-edit .propform.grouped > fieldset,
body.hn-mobile.task-addressbook.action-show .propform.grouped > fieldset,
body.hn-mobile.hn-contact-edit .propform.grouped > fieldset,
body.hn-mobile.hn-contact-view .propform.grouped > fieldset {
  margin: 0;
  border: 0;
}
body.hn-mobile.task-addressbook.action-add .propform.grouped legend,
body.hn-mobile.task-addressbook.action-edit .propform.grouped legend,
body.hn-mobile.task-addressbook.action-show .propform.grouped legend,
body.hn-mobile.hn-contact-edit .propform.grouped legend,
body.hn-mobile.hn-contact-view .propform.grouped legend {
  margin: 18px 16px 4px;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  color: #1d6fff;
  text-transform: none;
}
body.hn-mobile.task-addressbook.action-add .propform.grouped fieldset.contactfieldgroup,
body.hn-mobile.task-addressbook.action-edit .propform.grouped fieldset.contactfieldgroup,
body.hn-mobile.task-addressbook.action-show .propform.grouped fieldset.contactfieldgroup,
body.hn-mobile.hn-contact-edit .propform.grouped fieldset.contactfieldgroup,
body.hn-mobile.hn-contact-view .propform.grouped fieldset.contactfieldgroup {
  margin: 0 12px;
  padding: 10px 14px 12px;
  border: 0;
  border-radius: 10px;
  background: #f6f8fc;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.03);
}
body.hn-mobile.task-addressbook.action-add .propform.grouped fieldset.contactfieldgroup + fieldset.contactfieldgroup,
body.hn-mobile.task-addressbook.action-edit .propform.grouped fieldset.contactfieldgroup + fieldset.contactfieldgroup,
body.hn-mobile.task-addressbook.action-show .propform.grouped fieldset.contactfieldgroup + fieldset.contactfieldgroup,
body.hn-mobile.hn-contact-edit .propform.grouped fieldset.contactfieldgroup + fieldset.contactfieldgroup,
body.hn-mobile.hn-contact-view .propform.grouped fieldset.contactfieldgroup + fieldset.contactfieldgroup {
  margin-top: 10px;
}
body.hn-mobile.task-addressbook.action-add .propform.grouped fieldset.contactfieldgroup > legend,
body.hn-mobile.task-addressbook.action-edit .propform.grouped fieldset.contactfieldgroup > legend,
body.hn-mobile.task-addressbook.action-show .propform.grouped fieldset.contactfieldgroup > legend,
body.hn-mobile.hn-contact-edit .propform.grouped fieldset.contactfieldgroup > legend,
body.hn-mobile.hn-contact-view .propform.grouped fieldset.contactfieldgroup > legend {
  margin: 2px 0 6px;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  color: #737677;
  text-transform: none;
  float: none;
}
body.hn-mobile.task-addressbook.action-add .propform.grouped fieldset.contactfieldgroup .row,
body.hn-mobile.task-addressbook.action-edit .propform.grouped fieldset.contactfieldgroup .row,
body.hn-mobile.task-addressbook.action-show .propform.grouped fieldset.contactfieldgroup .row,
body.hn-mobile.hn-contact-edit .propform.grouped fieldset.contactfieldgroup .row,
body.hn-mobile.hn-contact-view .propform.grouped fieldset.contactfieldgroup .row {
  position: relative;
  padding: 0;
  margin: 0 0 8px;
}
body.hn-mobile.task-addressbook.action-add .propform.grouped fieldset.contactfieldgroup .row:last-child,
body.hn-mobile.task-addressbook.action-edit .propform.grouped fieldset.contactfieldgroup .row:last-child,
body.hn-mobile.task-addressbook.action-show .propform.grouped fieldset.contactfieldgroup .row:last-child,
body.hn-mobile.hn-contact-edit .propform.grouped fieldset.contactfieldgroup .row:last-child,
body.hn-mobile.hn-contact-view .propform.grouped fieldset.contactfieldgroup .row:last-child {
  margin-bottom: 0;
}
body.hn-mobile.task-addressbook.action-add .propform.grouped fieldset.contactfieldgroup .row .contactfieldlabel,
body.hn-mobile.task-addressbook.action-edit .propform.grouped fieldset.contactfieldgroup .row .contactfieldlabel,
body.hn-mobile.task-addressbook.action-show .propform.grouped fieldset.contactfieldgroup .row .contactfieldlabel,
body.hn-mobile.hn-contact-edit .propform.grouped fieldset.contactfieldgroup .row .contactfieldlabel,
body.hn-mobile.hn-contact-view .propform.grouped fieldset.contactfieldgroup .row .contactfieldlabel {
  margin: 0 0 4px;
  font-size: 12px;
  color: #737677;
}
body.hn-mobile.task-addressbook.action-add .propform.grouped fieldset.contactfieldgroup .row select,
body.hn-mobile.task-addressbook.action-edit .propform.grouped fieldset.contactfieldgroup .row select,
body.hn-mobile.task-addressbook.action-show .propform.grouped fieldset.contactfieldgroup .row select,
body.hn-mobile.hn-contact-edit .propform.grouped fieldset.contactfieldgroup .row select,
body.hn-mobile.hn-contact-view .propform.grouped fieldset.contactfieldgroup .row select {
  min-height: 36px;
  width: auto;
  align-self: flex-start;
  padding: 6px 26px 6px 0;
  border: 0;
  background: transparent;
  font-size: 14px;
  color: #737677;
}
body.hn-mobile.task-addressbook.action-add .propform.grouped fieldset.contactfieldgroup .row input:not([type='checkbox']):not([type='radio']),
body.hn-mobile.task-addressbook.action-edit .propform.grouped fieldset.contactfieldgroup .row input:not([type='checkbox']):not([type='radio']),
body.hn-mobile.task-addressbook.action-show .propform.grouped fieldset.contactfieldgroup .row input:not([type='checkbox']):not([type='radio']),
body.hn-mobile.hn-contact-edit .propform.grouped fieldset.contactfieldgroup .row input:not([type='checkbox']):not([type='radio']),
body.hn-mobile.hn-contact-view .propform.grouped fieldset.contactfieldgroup .row input:not([type='checkbox']):not([type='radio']),
body.hn-mobile.task-addressbook.action-add .propform.grouped fieldset.contactfieldgroup .row textarea,
body.hn-mobile.task-addressbook.action-edit .propform.grouped fieldset.contactfieldgroup .row textarea,
body.hn-mobile.task-addressbook.action-show .propform.grouped fieldset.contactfieldgroup .row textarea,
body.hn-mobile.hn-contact-edit .propform.grouped fieldset.contactfieldgroup .row textarea,
body.hn-mobile.hn-contact-view .propform.grouped fieldset.contactfieldgroup .row textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fff;
  padding: 10px 12px;
  min-height: 44px;
  font-size: 16px;
  color: #737677;
}
body.hn-mobile.task-addressbook.action-add .propform.grouped fieldset.contactfieldgroup .row input:not([type='checkbox']):not([type='radio']):focus,
body.hn-mobile.task-addressbook.action-edit .propform.grouped fieldset.contactfieldgroup .row input:not([type='checkbox']):not([type='radio']):focus,
body.hn-mobile.task-addressbook.action-show .propform.grouped fieldset.contactfieldgroup .row input:not([type='checkbox']):not([type='radio']):focus,
body.hn-mobile.hn-contact-edit .propform.grouped fieldset.contactfieldgroup .row input:not([type='checkbox']):not([type='radio']):focus,
body.hn-mobile.hn-contact-view .propform.grouped fieldset.contactfieldgroup .row input:not([type='checkbox']):not([type='radio']):focus,
body.hn-mobile.task-addressbook.action-add .propform.grouped fieldset.contactfieldgroup .row textarea:focus,
body.hn-mobile.task-addressbook.action-edit .propform.grouped fieldset.contactfieldgroup .row textarea:focus,
body.hn-mobile.task-addressbook.action-show .propform.grouped fieldset.contactfieldgroup .row textarea:focus,
body.hn-mobile.hn-contact-edit .propform.grouped fieldset.contactfieldgroup .row textarea:focus,
body.hn-mobile.hn-contact-view .propform.grouped fieldset.contactfieldgroup .row textarea:focus {
  outline: none;
  border-color: #1d6fff;
  box-shadow: 0 0 0 2px rgba(29, 111, 255, 0.15);
}
body.hn-mobile.task-addressbook.action-add .propform.grouped fieldset.contactfieldgroup .row textarea,
body.hn-mobile.task-addressbook.action-edit .propform.grouped fieldset.contactfieldgroup .row textarea,
body.hn-mobile.task-addressbook.action-show .propform.grouped fieldset.contactfieldgroup .row textarea,
body.hn-mobile.hn-contact-edit .propform.grouped fieldset.contactfieldgroup .row textarea,
body.hn-mobile.hn-contact-view .propform.grouped fieldset.contactfieldgroup .row textarea {
  min-height: 88px;
  resize: vertical;
}
body.hn-mobile.task-addressbook.action-add .propform.grouped fieldset.contactfieldgroup .row a.deletebutton,
body.hn-mobile.task-addressbook.action-edit .propform.grouped fieldset.contactfieldgroup .row a.deletebutton,
body.hn-mobile.task-addressbook.action-show .propform.grouped fieldset.contactfieldgroup .row a.deletebutton,
body.hn-mobile.hn-contact-edit .propform.grouped fieldset.contactfieldgroup .row a.deletebutton,
body.hn-mobile.hn-contact-view .propform.grouped fieldset.contactfieldgroup .row a.deletebutton {
  position: absolute;
  right: 0;
  top: 2px;
  font-size: 13px;
  color: #db5858;
  text-decoration: none;
  padding: 6px 4px;
}
body.hn-mobile.task-addressbook.action-add p.addfield,
body.hn-mobile.task-addressbook.action-edit p.addfield,
body.hn-mobile.task-addressbook.action-show p.addfield,
body.hn-mobile.hn-contact-edit p.addfield,
body.hn-mobile.hn-contact-view p.addfield {
  margin: 12px 16px 4px;
}
body.hn-mobile.task-addressbook.action-add p.addfield select,
body.hn-mobile.task-addressbook.action-edit p.addfield select,
body.hn-mobile.task-addressbook.action-show p.addfield select,
body.hn-mobile.hn-contact-edit p.addfield select,
body.hn-mobile.hn-contact-view p.addfield select {
  border-bottom-color: transparent;
  color: #1d6fff;
  font-size: 15px;
}
body.hn-mobile.task-addressbook.action-add .hn-contact-footer,
body.hn-mobile.task-addressbook.action-edit .hn-contact-footer,
body.hn-mobile.task-addressbook.action-show .hn-contact-footer,
body.hn-mobile.hn-contact-edit .hn-contact-footer,
body.hn-mobile.hn-contact-view .hn-contact-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1100;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid #e2e8f0;
}
body.hn-mobile.task-addressbook.action-add .hn-contact-footer .button.submit,
body.hn-mobile.task-addressbook.action-edit .hn-contact-footer .button.submit,
body.hn-mobile.task-addressbook.action-show .hn-contact-footer .button.submit,
body.hn-mobile.hn-contact-edit .hn-contact-footer .button.submit,
body.hn-mobile.hn-contact-view .hn-contact-footer .button.submit,
body.hn-mobile.task-addressbook.action-add .hn-contact-footer .btn.submit,
body.hn-mobile.task-addressbook.action-edit .hn-contact-footer .btn.submit,
body.hn-mobile.task-addressbook.action-show .hn-contact-footer .btn.submit,
body.hn-mobile.hn-contact-edit .hn-contact-footer .btn.submit,
body.hn-mobile.hn-contact-view .hn-contact-footer .btn.submit,
body.hn-mobile.task-addressbook.action-add .hn-contact-footer .hn-contact-save,
body.hn-mobile.task-addressbook.action-edit .hn-contact-footer .hn-contact-save,
body.hn-mobile.task-addressbook.action-show .hn-contact-footer .hn-contact-save,
body.hn-mobile.hn-contact-edit .hn-contact-footer .hn-contact-save,
body.hn-mobile.hn-contact-view .hn-contact-footer .hn-contact-save,
body.hn-mobile.task-addressbook.action-add .hn-contact-footer button.submit,
body.hn-mobile.task-addressbook.action-edit .hn-contact-footer button.submit,
body.hn-mobile.task-addressbook.action-show .hn-contact-footer button.submit,
body.hn-mobile.hn-contact-edit .hn-contact-footer button.submit,
body.hn-mobile.hn-contact-view .hn-contact-footer button.submit {
  display: block;
  width: 100%;
  min-height: 48px;
  line-height: 48px;
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #4f9bff 0%, #1d6fff 60%, #0a5fe0 100%);
  border: 0;
  border-radius: 24px;
  box-shadow: 0 6px 14px rgba(20, 88, 220, 0.28);
  -webkit-appearance: none;
}
body.hn-mobile.task-addressbook.action-add .hn-contact-footer .button.submit:active:not(:disabled),
body.hn-mobile.task-addressbook.action-edit .hn-contact-footer .button.submit:active:not(:disabled),
body.hn-mobile.task-addressbook.action-show .hn-contact-footer .button.submit:active:not(:disabled),
body.hn-mobile.hn-contact-edit .hn-contact-footer .button.submit:active:not(:disabled),
body.hn-mobile.hn-contact-view .hn-contact-footer .button.submit:active:not(:disabled),
body.hn-mobile.task-addressbook.action-add .hn-contact-footer .btn.submit:active:not(:disabled),
body.hn-mobile.task-addressbook.action-edit .hn-contact-footer .btn.submit:active:not(:disabled),
body.hn-mobile.task-addressbook.action-show .hn-contact-footer .btn.submit:active:not(:disabled),
body.hn-mobile.hn-contact-edit .hn-contact-footer .btn.submit:active:not(:disabled),
body.hn-mobile.hn-contact-view .hn-contact-footer .btn.submit:active:not(:disabled),
body.hn-mobile.task-addressbook.action-add .hn-contact-footer .hn-contact-save:active:not(:disabled),
body.hn-mobile.task-addressbook.action-edit .hn-contact-footer .hn-contact-save:active:not(:disabled),
body.hn-mobile.task-addressbook.action-show .hn-contact-footer .hn-contact-save:active:not(:disabled),
body.hn-mobile.hn-contact-edit .hn-contact-footer .hn-contact-save:active:not(:disabled),
body.hn-mobile.hn-contact-view .hn-contact-footer .hn-contact-save:active:not(:disabled),
body.hn-mobile.task-addressbook.action-add .hn-contact-footer button.submit:active:not(:disabled),
body.hn-mobile.task-addressbook.action-edit .hn-contact-footer button.submit:active:not(:disabled),
body.hn-mobile.task-addressbook.action-show .hn-contact-footer button.submit:active:not(:disabled),
body.hn-mobile.hn-contact-edit .hn-contact-footer button.submit:active:not(:disabled),
body.hn-mobile.hn-contact-view .hn-contact-footer button.submit:active:not(:disabled) {
  transform: scale(0.98);
  opacity: 0.9;
}
body.hn-mobile.task-addressbook.action-add .hn-contact-footer .button.submit:disabled,
body.hn-mobile.task-addressbook.action-edit .hn-contact-footer .button.submit:disabled,
body.hn-mobile.task-addressbook.action-show .hn-contact-footer .button.submit:disabled,
body.hn-mobile.hn-contact-edit .hn-contact-footer .button.submit:disabled,
body.hn-mobile.hn-contact-view .hn-contact-footer .button.submit:disabled,
body.hn-mobile.task-addressbook.action-add .hn-contact-footer .btn.submit:disabled,
body.hn-mobile.task-addressbook.action-edit .hn-contact-footer .btn.submit:disabled,
body.hn-mobile.task-addressbook.action-show .hn-contact-footer .btn.submit:disabled,
body.hn-mobile.hn-contact-edit .hn-contact-footer .btn.submit:disabled,
body.hn-mobile.hn-contact-view .hn-contact-footer .btn.submit:disabled,
body.hn-mobile.task-addressbook.action-add .hn-contact-footer .hn-contact-save:disabled,
body.hn-mobile.task-addressbook.action-edit .hn-contact-footer .hn-contact-save:disabled,
body.hn-mobile.task-addressbook.action-show .hn-contact-footer .hn-contact-save:disabled,
body.hn-mobile.hn-contact-edit .hn-contact-footer .hn-contact-save:disabled,
body.hn-mobile.hn-contact-view .hn-contact-footer .hn-contact-save:disabled,
body.hn-mobile.task-addressbook.action-add .hn-contact-footer button.submit:disabled,
body.hn-mobile.task-addressbook.action-edit .hn-contact-footer button.submit:disabled,
body.hn-mobile.task-addressbook.action-show .hn-contact-footer button.submit:disabled,
body.hn-mobile.hn-contact-edit .hn-contact-footer button.submit:disabled,
body.hn-mobile.hn-contact-view .hn-contact-footer button.submit:disabled {
  opacity: 0.55;
  box-shadow: none;
}
/* ========== 联系人详情页（iframe 内 action-show）：名片式布局 ========== */
body.hn-mobile.task-addressbook.action-show,
body.hn-mobile.hn-contact-view {
  /* 压过 Elastic html.iframe body.task-addressbook 的白底大内边距 */
  background: #f7f8fa;
  padding: 0;
  /* 覆盖编辑页的 overflow:hidden：详情页内容（名片）需跟随页面滚动 */
  overflow: auto;
  /* ---------- 名片头：姓名 + 部门副标题 ---------- */
  /* ---------- 字段分组卡（邮箱/电话/地址/个人信息…） ----------
       服务端输出层级：fieldset.propform.grouped > div#contactsection*
       > fieldset.contactfieldgroup > .row > (label.contactfieldlabel
       + div.contactfieldcontent)。卡片化到内层分组，行内左右对齐。 */
}
body.hn-mobile.task-addressbook.action-show #contact-details > .formcontent,
body.hn-mobile.hn-contact-view #contact-details > .formcontent,
body.hn-mobile.task-addressbook.action-show .formcontent.hn-contact-view,
body.hn-mobile.hn-contact-view .formcontent.hn-contact-view {
  display: block;
  max-width: 560px;
  margin: 0 auto;
  /* 无顶部导航栏，仅常规页边距；底部留滚动余量 */
  padding: 12px 12px 24px;
}
body.hn-mobile.task-addressbook.action-show .contact-header,
body.hn-mobile.hn-contact-view .contact-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 4px 0 14px;
  padding: 24px 16px 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.03);
  text-align: center;
  /* 姓名字段纵向堆叠（contacthead 输出的 fieldset 结构拍平） */
}
body.hn-mobile.task-addressbook.action-show .contact-header .contact-head,
body.hn-mobile.hn-contact-view .contact-header .contact-head {
  display: block;
  min-width: 0;
  margin: 0;
  border: 0;
  /* 完整部门路径会提取到名片副标题，隐藏原始字段避免重复 */
  /* 隐藏空姓名部件换行产生的多余空隙 */
}
body.hn-mobile.task-addressbook.action-show .contact-header .contact-head legend,
body.hn-mobile.hn-contact-view .contact-header .contact-head legend {
  display: none;
}
body.hn-mobile.task-addressbook.action-show .contact-header .contact-head .row,
body.hn-mobile.hn-contact-view .contact-header .contact-head .row,
body.hn-mobile.task-addressbook.action-show .contact-header .contact-head > div,
body.hn-mobile.hn-contact-view .contact-header .contact-head > div {
  display: block;
  padding: 0;
}
body.hn-mobile.task-addressbook.action-show .contact-header .contact-head .namefield,
body.hn-mobile.hn-contact-view .contact-header .contact-head .namefield {
  display: block;
  margin: 0;
  padding: 0;
}
body.hn-mobile.task-addressbook.action-show .contact-header .contact-head .namefield.department,
body.hn-mobile.hn-contact-view .contact-header .contact-head .namefield.department {
  display: none;
}
body.hn-mobile.task-addressbook.action-show .contact-header .contact-head .namefield.name,
body.hn-mobile.hn-contact-view .contact-header .contact-head .namefield.name,
body.hn-mobile.task-addressbook.action-show .contact-header .contact-head .namefield.firstname,
body.hn-mobile.hn-contact-view .contact-header .contact-head .namefield.firstname,
body.hn-mobile.task-addressbook.action-show .contact-header .contact-head .namefield.surname,
body.hn-mobile.hn-contact-view .contact-header .contact-head .namefield.surname,
body.hn-mobile.task-addressbook.action-show .contact-header .contact-head .namefield.displayname,
body.hn-mobile.hn-contact-view .contact-header .contact-head .namefield.displayname {
  color: #0f172a;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}
body.hn-mobile.task-addressbook.action-show .contact-header .contact-head .namefield:not(.name):not(.firstname):not(.surname):not(.displayname):not(.organization):not(.department):not(.jobtitle),
body.hn-mobile.hn-contact-view .contact-header .contact-head .namefield:not(.name):not(.firstname):not(.surname):not(.displayname):not(.organization):not(.department):not(.jobtitle) {
  display: none;
}
body.hn-mobile.task-addressbook.action-show .contact-header .contact-head .hn-contact-sub,
body.hn-mobile.hn-contact-view .contact-header .contact-head .hn-contact-sub {
  margin-top: 4px;
  color: #64748b;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}
body.hn-mobile.task-addressbook.action-show #contacttabs,
body.hn-mobile.hn-contact-view #contacttabs {
  margin: 0;
}
body.hn-mobile.task-addressbook.action-show #contacttabs .tabbed,
body.hn-mobile.hn-contact-view #contacttabs .tabbed {
  margin: 0;
}
body.hn-mobile.task-addressbook.action-show fieldset.propform.grouped,
body.hn-mobile.hn-contact-view fieldset.propform.grouped {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  /* 无内容分组不占位 */
}
body.hn-mobile.task-addressbook.action-show fieldset.propform.grouped > legend,
body.hn-mobile.hn-contact-view fieldset.propform.grouped > legend {
  display: none;
}
body.hn-mobile.task-addressbook.action-show fieldset.propform.grouped fieldset.contactfieldgroup,
body.hn-mobile.hn-contact-view fieldset.propform.grouped fieldset.contactfieldgroup {
  display: block;
  margin: 0 0 12px;
  min-width: 0;
  padding: 14px 18px 12px;
  background: #fff;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.03);
  /* 标签列与字段值保持同一行，避免继承 Elastic 的表单行布局 */
  /* 组内复选框行（所属分组）走列表式排布 */
}
body.hn-mobile.task-addressbook.action-show fieldset.propform.grouped fieldset.contactfieldgroup + fieldset.contactfieldgroup,
body.hn-mobile.hn-contact-view fieldset.propform.grouped fieldset.contactfieldgroup + fieldset.contactfieldgroup {
  margin-top: 0;
}
body.hn-mobile.task-addressbook.action-show fieldset.propform.grouped fieldset.contactfieldgroup > legend,
body.hn-mobile.hn-contact-view fieldset.propform.grouped fieldset.contactfieldgroup > legend {
  display: none;
}
body.hn-mobile.task-addressbook.action-show fieldset.propform.grouped fieldset.contactfieldgroup > .hn-contact-field-title,
body.hn-mobile.hn-contact-view fieldset.propform.grouped fieldset.contactfieldgroup > .hn-contact-field-title {
  margin: 0 0 6px;
  padding: 0;
  color: #334155;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
body.hn-mobile.task-addressbook.action-show fieldset.propform.grouped fieldset.contactfieldgroup .row,
body.hn-mobile.hn-contact-view fieldset.propform.grouped fieldset.contactfieldgroup .row {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  min-height: 48px;
  padding: 8px 0;
  margin: 0;
  background: transparent;
  box-shadow: none;
  border-bottom: 1px solid #f1f5f9;
}
body.hn-mobile.task-addressbook.action-show fieldset.propform.grouped fieldset.contactfieldgroup .row:last-child,
body.hn-mobile.hn-contact-view fieldset.propform.grouped fieldset.contactfieldgroup .row:last-child {
  border-bottom: 0;
}
body.hn-mobile.task-addressbook.action-show fieldset.propform.grouped fieldset.contactfieldgroup.contactcontrolleremail .row,
body.hn-mobile.hn-contact-view fieldset.propform.grouped fieldset.contactfieldgroup.contactcontrolleremail .row {
  grid-template-columns: minmax(0, 1fr);
}
body.hn-mobile.task-addressbook.action-show fieldset.propform.grouped fieldset.contactfieldgroup.contactcontrolleremail .contactfieldlabel,
body.hn-mobile.hn-contact-view fieldset.propform.grouped fieldset.contactfieldgroup.contactcontrolleremail .contactfieldlabel {
  display: none;
}
body.hn-mobile.task-addressbook.action-show fieldset.propform.grouped fieldset.contactfieldgroup .contactfieldlabel,
body.hn-mobile.hn-contact-view fieldset.propform.grouped fieldset.contactfieldgroup .contactfieldlabel,
body.hn-mobile.task-addressbook.action-show fieldset.propform.grouped fieldset.contactfieldgroup label.contactfieldlabel,
body.hn-mobile.hn-contact-view fieldset.propform.grouped fieldset.contactfieldgroup label.contactfieldlabel,
body.hn-mobile.task-addressbook.action-show fieldset.propform.grouped fieldset.contactfieldgroup label.label,
body.hn-mobile.hn-contact-view fieldset.propform.grouped fieldset.contactfieldgroup label.label {
  min-width: 0;
  max-width: none;
  margin: 0;
  color: #64748b;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
body.hn-mobile.task-addressbook.action-show fieldset.propform.grouped fieldset.contactfieldgroup .contactfieldcontent,
body.hn-mobile.hn-contact-view fieldset.propform.grouped fieldset.contactfieldgroup .contactfieldcontent {
  min-width: 0;
  color: #0f172a;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
  overflow-wrap: break-word;
  word-break: break-word;
  /* 邮箱/电话/网址：主色可点 */
  /* 多行地址的复合字段 */
}
body.hn-mobile.task-addressbook.action-show fieldset.propform.grouped fieldset.contactfieldgroup .contactfieldcontent a,
body.hn-mobile.hn-contact-view fieldset.propform.grouped fieldset.contactfieldgroup .contactfieldcontent a {
  color: #0f172a;
  text-decoration: none;
}
body.hn-mobile.task-addressbook.action-show fieldset.propform.grouped fieldset.contactfieldgroup .contactfieldcontent a:active,
body.hn-mobile.hn-contact-view fieldset.propform.grouped fieldset.contactfieldgroup .contactfieldcontent a:active {
  opacity: 0.6;
}
body.hn-mobile.task-addressbook.action-show fieldset.propform.grouped fieldset.contactfieldgroup .contactfieldcontent a.email,
body.hn-mobile.hn-contact-view fieldset.propform.grouped fieldset.contactfieldgroup .contactfieldcontent a.email,
body.hn-mobile.task-addressbook.action-show fieldset.propform.grouped fieldset.contactfieldgroup .contactfieldcontent a.phone,
body.hn-mobile.hn-contact-view fieldset.propform.grouped fieldset.contactfieldgroup .contactfieldcontent a.phone,
body.hn-mobile.task-addressbook.action-show fieldset.propform.grouped fieldset.contactfieldgroup .contactfieldcontent a.url,
body.hn-mobile.hn-contact-view fieldset.propform.grouped fieldset.contactfieldgroup .contactfieldcontent a.url {
  color: #1d6fff;
}
body.hn-mobile.task-addressbook.action-show fieldset.propform.grouped fieldset.contactfieldgroup .contactfieldcontent span.data,
body.hn-mobile.hn-contact-view fieldset.propform.grouped fieldset.contactfieldgroup .contactfieldcontent span.data {
  display: block;
}
body.hn-mobile.task-addressbook.action-show fieldset.propform.grouped fieldset.contactfieldgroup .contactfield,
body.hn-mobile.hn-contact-view fieldset.propform.grouped fieldset.contactfieldgroup .contactfield {
  padding: 0;
}
body.hn-mobile.task-addressbook.action-show fieldset.propform.grouped fieldset.contactfieldgroup ul.proplist,
body.hn-mobile.hn-contact-view fieldset.propform.grouped fieldset.contactfieldgroup ul.proplist {
  margin: 0;
  padding: 0;
  list-style: none;
}
body.hn-mobile.task-addressbook.action-show fieldset.propform.grouped fieldset.contactfieldgroup ul.proplist li,
body.hn-mobile.hn-contact-view fieldset.propform.grouped fieldset.contactfieldgroup ul.proplist li {
  display: flex;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid #f1f5f9;
}
body.hn-mobile.task-addressbook.action-show fieldset.propform.grouped fieldset.contactfieldgroup ul.proplist li:last-child,
body.hn-mobile.hn-contact-view fieldset.propform.grouped fieldset.contactfieldgroup ul.proplist li:last-child {
  border-bottom: 0;
}
body.hn-mobile.task-addressbook.action-show fieldset.propform.grouped fieldset.contactfieldgroup ul.proplist li label,
body.hn-mobile.hn-contact-view fieldset.propform.grouped fieldset.contactfieldgroup ul.proplist li label {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #0f172a;
  font-size: 14px;
}
body.hn-mobile.task-addressbook.action-show fieldset.propform.grouped fieldset.contactfieldgroup:empty,
body.hn-mobile.hn-contact-view fieldset.propform.grouped fieldset.contactfieldgroup:empty {
  display: none;
}
/* ========== 通讯录：组织架构树（部门折叠 + 成员卡片） ========== */
body.hn-mobile.task-addressbook {
  /* 回到顶部：固定右下角（TabBar 之上），外观共用 body.hn-mobile .hn-backtop */
}
body.hn-mobile.task-addressbook .hn-orgtree {
  padding: 0px 0 32px;
}
body.hn-mobile.task-addressbook .hn-org-hint {
  padding: 56px 16px;
  text-align: center;
  color: #64748b;
  font-size: 14px;
}
body.hn-mobile.task-addressbook .hn-org-dept {
  margin-bottom: 4px;
}
body.hn-mobile.task-addressbook .hn-org-dept .hn-org-dept-head {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 12px 8px 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
body.hn-mobile.task-addressbook .hn-org-dept .hn-org-dept-head:active {
  opacity: 0.65;
}
body.hn-mobile.task-addressbook .hn-org-dept .hn-org-dept-head .hn-org-caret {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-right: 4px;
  color: #64748b;
  transform: rotate(90deg);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
body.hn-mobile.task-addressbook .hn-org-dept .hn-org-dept-head .hn-org-dept-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: #0f172a;
  font-size: 15px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.hn-mobile.task-addressbook .hn-org-dept.hn-collapsed .hn-org-caret {
  transform: rotate(0deg);
}
body.hn-mobile.task-addressbook .hn-org-dept.hn-collapsed .hn-org-members {
  display: none;
}
body.hn-mobile.task-addressbook .hn-org-dept.hn-dept-hidden {
  display: none;
}
body.hn-mobile.task-addressbook .hn-org-members {
  margin-bottom: 6px;
}
body.hn-mobile.task-addressbook .hn-org-member {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  padding: 14px 64px 14px 14px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.03);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body.hn-mobile.task-addressbook .hn-org-member:active {
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.03);
}
body.hn-mobile.task-addressbook .hn-org-member .hn-org-avatar {
  display: flex;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: 12px;
  color: #fff;
  border-radius: 50%;
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.1);
  user-select: none;
}
body.hn-mobile.task-addressbook .hn-org-member .hn-contact-name {
  max-width: 100%;
  overflow: hidden;
  color: #0f172a;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.hn-mobile.task-addressbook .hn-org-member .email {
  display: block;
  max-width: 100%;
  overflow: hidden;
  margin: 3px 0 0 !important;
  color: #64748b;
  font-size: 13px;
  font-style: normal;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.hn-mobile.task-addressbook .hn-org-compose {
  position: absolute;
  right: 12px;
  top: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: rgba(29, 111, 255, 0.1);
  color: #1d6fff;
}
body.hn-mobile.task-addressbook .hn-org-compose svg {
  display: block;
  width: 20px;
  height: 20px;
}
body.hn-mobile.task-addressbook .hn-org-compose:active {
  transform: translateY(-50%) scale(0.9);
  background: rgba(29, 111, 255, 0.22);
}
body.hn-mobile.task-addressbook .hn-search-hidden {
  display: none !important;
}
body.hn-mobile.task-addressbook .hn-backtop {
  position: fixed;
  right: 24px;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  z-index: 900;
}
/* ========== 回到顶部按钮（通讯录 / 选人弹窗共用外观与动效） ========== */
body.hn-mobile .hn-backtop {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  color: #1d6fff;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  background: #fff;
  border: 1px solid #e8edf3;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.05), 0 4px 12px rgba(15, 23, 42, 0.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.25s, box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
body.hn-mobile .hn-backtop svg {
  display: block;
  pointer-events: none;
}
body.hn-mobile .hn-backtop:focus,
body.hn-mobile .hn-backtop:focus-visible {
  outline: none;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.05), 0 4px 12px rgba(15, 23, 42, 0.06);
}
body.hn-mobile .hn-backtop:active {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.03);
  transform: translateY(8px) scale(0.92);
}
body.hn-mobile .hn-backtop.shown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
body.task-settings #sections-table {
  padding: 0;
}
body.task-settings #sections-table li a {
  min-height: 52px;
  border-radius: 0;
  line-height: 52px;
}
body.task-settings #sections-table li.selected > a {
  background: #eff6ff;
  font-weight: 600;
}
/* 隐藏的真实 mailboxlist：仅为数据流存在（getunread/未读角标依赖），
   移出视口而非 display:none，保证 treelist 初始化测量正常 */
.hn-hidden-mailboxlist {
  position: absolute;
  top: -9999px;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  visibility: hidden;
}
/* ========== 滚动条隐藏 ========== */
/* 隐藏滚动条但保留滚动能力（App WebView / 手机浏览器同样生效）：
   Firefox 走 scrollbar-width，旧 Edge/IE 走 -ms-overflow-style，
   WebKit/Blink（iOS WKWebView、安卓 WebView）走 ::-webkit-scrollbar；
   :root 覆盖页面级滚动条（含信头弹窗等 iframe 文档），元素级覆盖列表/正文等内层容器 */
:root,
body.hn-mobile,
body.hn-mobile * {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
:root::-webkit-scrollbar,
body.hn-mobile::-webkit-scrollbar,
body.hn-mobile *::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  background: transparent;
}
/* ========== 图片附件弹窗预览 ==========
   邮件详情页点击图片附件，不跳转预览页，而在当前页面全屏弹窗预览。
   层级须压过 TabBar(1000)/popupmenu(2100)/ui-dialog(2300)。
   关闭按钮触控热区 ≥44px，并适配刘海屏安全区。 */
body.hn-mobile .hn-imgpreview-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, 0.88);
  animation: hn-imgpreview-in 0.18s ease-out;
}
body.hn-mobile .hn-imgpreview-box {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
}
body.hn-mobile .hn-imgpreview-img {
  max-width: 100%;
  max-height: 74vh;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  object-fit: contain;
}
body.hn-mobile .hn-imgpreview-name {
  display: -webkit-box;
  max-width: 100%;
  margin-top: 14px;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  text-align: center;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
body.hn-mobile .hn-imgpreview-close {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top));
  right: 16px;
  z-index: 2601;
  display: flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
@keyframes hn-imgpreview-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* ========== 动效降级 ========== */
@media (prefers-reduced-motion: reduce) {
  body.hn-mobile .hn-tab,
  body.hn-mobile .hn-tab:before,
  body.hn-mobile table.messagelist > tbody > tr,
  body.hn-mobile .popupmenu,
  body.task-login.hn-mobile .hn-login-card {
    transition: none;
    animation: none;
  }
}
/* ========== 邮件列表：无限滚动状态条 ========== */
#messagelist-content .hn-il-status {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  /* 触控热区（error 态可点重试） */
  margin: 4px 8px 12px;
  color: #9aa4b2;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  /* 静默哨兵态：零高不可见，仅供 IntersectionObserver 触发 */
}
#messagelist-content .hn-il-status[data-state='idle'] {
  min-height: 0;
  height: 0;
  margin: 0;
  overflow: hidden;
}
#messagelist-content .hn-il-status[data-state='loading']::before {
  content: '';
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border: 2px solid #d3dae3;
  border-top-color: #1d6fff;
  border-radius: 50%;
  animation: hn-il-spin 0.7s linear infinite;
}
#messagelist-content .hn-il-status[data-state='error'] {
  color: #e0564d;
  cursor: pointer;
}
@keyframes hn-il-spin {
  to {
    transform: rotate(360deg);
  }
}