/* =========================================================
 * OpenCampus Base — Dashboard（我的校园 · 登录后前端工作台）
 * V1.0  |  2026-09-08
 *
 * 作用域：全部样式限定在 .oc-dash 内，复用 main.css 的 :root 设计变量
 * （--blue / --navy / --ink / --gray / --line / --bg / --radius / --shadow），
 * 不污染门户前台其他页面。
 *
 * 角色差异只由数据与权限驱动（见 dashboard.php / parts/sidebar.php），
 * 本文件不区分角色。
 * ========================================================= */

.oc-dash{display:flex;align-items:flex-start;min-height:calc(100vh - 64px)}

/* ===================== 侧边栏 ===================== */
.oc-dash-side{
  width:250px;flex-shrink:0;
  background:#0f172a;color:#cbd5e1;
  position:sticky;top:64px;
  height:calc(100vh - 64px);overflow-y:auto;
  padding:16px 14px 28px;
}
.oc-side-brand{display:flex;align-items:center;gap:10px;padding:6px 10px 16px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:14px}
.oc-side-brand svg{flex-shrink:0}
.oc-side-brand b{color:#fff;font-size:15px;letter-spacing:.3px}
.oc-side-brand span{display:block;font-size:10px;color:#64748b;letter-spacing:1.5px;margin-top:2px}
.oc-side-group{margin-bottom:16px}
.oc-side-group > .lbl{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:#5b677d;padding:0 11px;margin-bottom:8px}
.oc-side-link{
  display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;
  color:#cbd5e1;font-size:14px;transition:background .15s,color .15s;text-decoration:none;
}
.oc-side-link:hover{background:rgba(255,255,255,.06);color:#fff}
.oc-side-link.active{background:var(--blue);color:#fff}
.oc-side-link svg{width:18px;height:18px;flex-shrink:0;opacity:.92}
.oc-side-link .badge{
  margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
  background:rgba(255,255,255,.14);color:#fff;font-size:11px;font-weight:600;
  display:grid;place-items:center;
}
.oc-side-link.active .badge{background:rgba(255,255,255,.25)}

/* ===================== 主内容区 ===================== */
.oc-dash-main{flex:1;min-width:0;padding:26px 30px 56px}

/* 工作台壳统一按钮（补充 main.css 的 .btn-blue/.btn-green） */
.btn.btn-primary{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:0 6px 16px rgba(47,109,246,.28)}
.btn.btn-primary:hover{background:var(--blue-dark);border-color:var(--blue-dark)}
.btn.btn-ghost{background:#fff;color:var(--navy);border-color:var(--line);box-shadow:none}
.btn.btn-ghost:hover{border-color:#d5e1f7;color:var(--blue);background:#f8fbff}
.btn.btn-sm{padding:7px 14px;font-size:12.5px}

/* 欢迎区 */
.oc-welcome{
  position:relative;overflow:hidden;border-radius:var(--radius);
  padding:28px 32px;color:#fff;margin-bottom:20px;
  background:#1e3a6e;
}
.oc-welcome::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:url('../images/hero-campus.png') center/cover no-repeat,
             linear-gradient(105deg,rgba(15,23,42,.86),rgba(15,23,42,.45) 60%,rgba(15,23,42,.2));
  background-blend-mode:overlay;
}
.oc-welcome > *{position:relative;z-index:1}
.oc-welcome h1{font-size:26px;font-weight:800;letter-spacing:.5px}
.oc-welcome .meta{margin-top:8px;font-size:14px;color:rgba(255,255,255,.85)}
.oc-welcome .meta b{color:#fff}
.oc-welcome .quote{margin-top:14px;font-size:13.5px;color:rgba(255,255,255,.7);font-style:italic}

/* 数据条 */
.oc-stat-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:22px}
.oc-stat-card{
  background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:16px 18px;
  display:flex;align-items:center;gap:14px;transition:transform .2s,box-shadow .2s;
}
.oc-stat-card:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(22,36,77,.1)}
.oc-stat-card .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;color:#fff;flex-shrink:0}
.oc-stat-card .num{font-size:30px;font-weight:800;color:var(--navy);line-height:1}
.oc-stat-card .lbl{font-size:13px;color:var(--gray);margin-top:4px}

/* 栅格 */
.oc-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.oc-grid > .span-12{grid-column:span 12}
.oc-grid > .span-8{grid-column:span 8}
.oc-grid > .span-7{grid-column:span 7}
.oc-grid > .span-5{grid-column:span 5}
.oc-grid > .span-4{grid-column:span 4}

/* 区域卡片 */
.oc-zone{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 22px;display:flex;flex-direction:column}
.oc-zone-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.oc-zone-head h3{font-size:17px;color:var(--navy);font-weight:700}
.oc-zone-head .sub{font-size:11px;color:#a5b1c2;margin-top:3px;display:block}
.oc-zone-head .more{font-size:12.5px;color:#8b98ad;display:inline-flex;align-items:center;gap:4px;transition:color .2s;text-decoration:none}
.oc-zone-head .more:hover{color:var(--blue)}

/* 快捷操作 */
.oc-qa-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.oc-qa{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--line);border-radius:13px;transition:background .2s,border-color .2s,transform .2s;text-decoration:none;color:inherit}
.oc-qa:hover{background:#f6f9ff;border-color:#d8e6ff;transform:translateY(-2px)}
.oc-qa .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#fff;flex-shrink:0}
.oc-qa .txt b{font-size:14.5px;color:var(--navy);display:block;line-height:1.3}
.oc-qa .txt span{font-size:11.5px;color:var(--gray);margin-top:3px;display:block}

/* 我的应用 */
.oc-app-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.oc-app-card{display:flex;gap:13px;padding:15px;border:1px solid var(--line);border-radius:13px;align-items:center;transition:background .2s,border-color .2s,transform .2s;text-decoration:none;color:inherit}
.oc-app-card:hover{background:#f6f9ff;border-color:#d8e6ff;transform:translateY(-2px)}
.oc-app-card .ai-ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;color:#fff;flex-shrink:0}
.oc-app-card .ai-txt{flex:1;min-width:0}
.oc-app-card .ai-txt b{font-size:14.5px;color:var(--navy);display:block;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oc-app-card .ai-txt span{font-size:12px;color:var(--gray);margin-top:3px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oc-app-card > svg{color:#c3ccd9;flex-shrink:0;transition:transform .2s,color .2s}
.oc-app-card:hover > svg{transform:translateX(3px);color:var(--blue)}

/* 待办 */
.oc-task-list{display:flex;flex-direction:column}
.oc-task-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid #f2f5fa;font-size:14px;color:#3d4b63}
.oc-task-row:last-child{border-bottom:none}
.oc-task-check{width:18px;height:18px;border-radius:6px;border:2px solid #d4dce8;flex-shrink:0;cursor:pointer;transition:border-color .2s,background .2s}
.oc-task-check:hover{border-color:var(--blue)}
.oc-task-row .tt{display:flex;flex-direction:column;min-width:0}
.oc-task-row .tt b{font-size:14px;color:var(--navy);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oc-task-row .tt span{font-size:11.5px;color:var(--gray);margin-top:2px}
.oc-task-row .pri{margin-left:auto;font-size:11px;font-weight:600;padding:2px 9px;border-radius:999px;flex-shrink:0}
.oc-task-row .pri.high{background:#fde8ec;color:#e23a52}
.oc-task-row .pri.mid{background:#fff3e0;color:#d98a00}
.oc-task-row .pri.low{background:#eafaf0;color:#2ea85c}

/* 通知 */
.oc-note-list{display:flex;flex-direction:column}
.oc-note-row{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid #f2f5fa;font-size:13.5px;color:#3d4b63}
.oc-note-row:last-child{border-bottom:none}
.oc-note-dot{width:8px;height:8px;border-radius:50%;margin-top:6px;flex-shrink:0}
.oc-note-dot.info{background:var(--blue)}
.oc-note-dot.warn{background:#f59e0b}
.oc-note-dot.ok{background:#2ea85c}
.oc-note-row .nt{flex:1;min-width:0}
.oc-note-row .nt b{font-weight:600;color:var(--navy);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oc-note-row .nt span{font-size:12px;color:var(--gray);display:block;margin-top:2px}
.oc-note-row time{font-size:12px;color:#a5b1c2;flex-shrink:0;margin-top:1px}

/* 校园动态 */
.oc-act-list{display:flex;flex-direction:column}
.oc-act-row{display:flex;gap:14px;padding:11px 0;border-bottom:1px solid #f2f5fa;font-size:13.5px;color:#3d4b63}
.oc-act-row:last-child{border-bottom:none}
.oc-act-row img{width:74px;height:54px;border-radius:9px;object-fit:cover;flex-shrink:0}
.oc-act-row .at{flex:1;min-width:0}
.oc-act-row .at b{font-size:14px;color:#2b3a55;font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oc-act-row .at span{font-size:12px;color:#9aa7ba;display:block;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oc-act-row time{font-size:12px;color:#a5b1c2;flex-shrink:0}

/* 访客态 */
.oc-guest{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:60px 24px;text-align:center;max-width:560px;margin:40px auto}
.oc-guest .ic{font-size:46px}
.oc-guest h1{font-size:24px;color:var(--navy);margin:14px 0 8px}
.oc-guest p{color:var(--gray);font-size:14px;line-height:1.8}
.oc-guest .acts{margin-top:22px;display:flex;gap:12px;justify-content:center}

/* ===================== 响应式 ===================== */
@media (max-width:1100px){
  .oc-grid > .span-8,.oc-grid > .span-7,.oc-grid > .span-5,.oc-grid > .span-4{grid-column:span 12}
  .oc-qa-grid{grid-template-columns:repeat(2,1fr)}
  .oc-app-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:920px){
  .oc-dash{display:block}
  .oc-dash-side{
    position:static;width:100%;height:auto;
    display:flex;gap:6px;overflow-x:auto;padding:12px;
  }
  .oc-side-brand{display:none}
  .oc-side-group{display:flex;align-items:center;gap:6px;margin-bottom:0;flex-shrink:0}
  .oc-side-group > .lbl{display:none}
  .oc-side-link{padding:8px 12px;white-space:nowrap}
  .oc-side-link .badge{margin-left:8px}
  .oc-dash-main{padding:18px 16px 44px}
}
@media (max-width:640px){
  .oc-stat-strip{grid-template-columns:1fr}
  .oc-qa-grid,.oc-app-grid{grid-template-columns:1fr}
  .oc-welcome{padding:22px 20px}
  .oc-welcome h1{font-size:22px}
  /* 移动端横向溢出修复：网格子项允许收缩至 min-content 以下 */
  .oc-zone{min-width:0}
}

/* =========================================================
 * App 壳组件（应用中心 / 应用详情，复用 .oc-dash 作用域）
 * ========================================================= */

/* 页头工具行 */
.oc-dash-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.oc-dash-head .tt h1{font-size:22px;font-weight:800;color:var(--navy);letter-spacing:.3px}
.oc-dash-head .tt .sub{font-size:13px;color:var(--gray);margin-top:5px}
.oc-dash-head .acts{display:flex;align-items:center;gap:12px}
.oc-search{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:0 14px;height:42px;width:260px;transition:border-color .2s,box-shadow .2s}
.oc-search:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,109,246,.12)}
.oc-search svg{color:#9aa7ba;flex-shrink:0}
.oc-search input{border:none;outline:none;background:transparent;font-size:14px;color:var(--navy);width:100%;font-family:inherit}
.oc-select{border:1px solid var(--line);border-radius:11px;height:42px;padding:0 14px;font-size:14px;color:var(--navy);background:#fff;font-family:inherit;cursor:pointer}

/* Tabs */
.oc-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;flex-wrap:wrap}
.oc-tab{padding:10px 15px;font-size:13.5px;color:var(--gray);border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;transition:color .15s,border-color .15s;background:none;border-top:none;border-left:none;border-right:none;font-family:inherit}
.oc-tab:hover{color:var(--navy)}
.oc-tab.active{color:var(--blue);font-weight:600;border-bottom-color:var(--blue)}
.oc-tab .cnt{font-size:11px;background:#eef2f8;border-radius:8px;padding:1px 6px;margin-left:5px;color:var(--gray)}
.oc-tab.active .cnt{background:#eaf1ff}

/* 应用中心网格 */
.oc-apps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.oc-app-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:11px;transition:transform .18s,box-shadow .18s,border-color .18s;text-decoration:none;color:inherit}
.oc-app-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#d5e1f7}
.oc-app-card .head{display:flex;gap:12px;align-items:center}
.oc-app-card .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;color:#fff;font-size:22px;flex-shrink:0}
.oc-app-card .nm{font-size:15px;font-weight:700;color:var(--navy)}
.oc-app-card .ver{font-size:11px;color:#a5b1c2;margin-left:3px}
.oc-app-card .tag{margin-top:5px}
.oc-app-card .desc{font-size:12.5px;color:var(--gray);min-height:38px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.6}
.oc-app-card .foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:4px}
.oc-app-card .meta{font-size:11.5px;color:#a5b1c2}
@media (max-width:1280px){.oc-apps-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){.oc-apps-grid{grid-template-columns:1fr}}

/* 应用详情 —— 应用头 */
.oc-app-hero{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 24px;display:flex;gap:18px;align-items:center;margin-bottom:18px}
.oc-app-hero .ic{width:64px;height:64px;border-radius:16px;display:grid;place-items:center;color:#fff;font-size:30px;flex-shrink:0}
.oc-app-hero .info{flex:1;min-width:0}
.oc-app-hero .info h1{font-size:20px;font-weight:800;color:var(--navy);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.oc-app-hero .info .meta{font-size:12.5px;color:var(--gray);margin-top:6px;display:flex;gap:14px;flex-wrap:wrap}
.oc-app-hero .info .desc{font-size:13px;color:var(--gray);margin-top:9px;max-width:660px;line-height:1.7}
.oc-app-hero .ops{margin-left:auto;display:flex;gap:10px;flex-shrink:0}
.oc-app-hero .ops .btn{padding:9px 16px;font-size:13.5px}

/* 标签 */
.oc-tag{display:inline-block;font-size:11px;font-weight:600;padding:2px 9px;border-radius:999px;line-height:1.5}
.oc-tag.green{background:#eafaf0;color:#2ea85c}
.oc-tag.blue{background:#eaf1ff;color:var(--blue)}
.oc-tag.orange{background:#fff3e0;color:#d98a00}
.oc-tag.red{background:#fde8ec;color:#e23a52}
.oc-tag.gray{background:#f0f3f8;color:#8492a6}

/* 应用详情 —— 主区 + 右栏 */
.oc-app-body{display:grid;grid-template-columns:1fr 312px;gap:18px;align-items:start}
.oc-rail{display:flex;flex-direction:column;gap:16px}
.oc-rail-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px}
.oc-rail-card h3{font-size:14px;color:var(--navy);font-weight:700;margin-bottom:12px}
.oc-rail-row{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;padding:6px 0;border-bottom:1px solid #f2f5fa;color:var(--gray)}
.oc-rail-row:last-child{border-bottom:none}
.oc-rail-row b{color:var(--navy)}
.oc-rail-row.muted{color:#a5b1c2}
.oc-rail-list{display:flex;flex-direction:column;gap:12px}
.oc-rail-list .b{font-size:12.5px;color:var(--navy);font-weight:600;line-height:1.45}
.oc-rail-list .mt{font-size:11.5px;color:#a5b1c2;margin-top:3px}
@media (max-width:1000px){.oc-app-body{grid-template-columns:1fr}.oc-rail{order:-1}}

/* 应用详情 —— 公告/列表视图 */
.oc-notice-list{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.oc-notice-row{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid #f2f5fa;cursor:pointer;transition:background .15s}
.oc-notice-row:last-child{border-bottom:none}
.oc-notice-row:hover{background:#fafbfe}
.oc-notice-row .tt{flex:1;min-width:0}
.oc-notice-row .tt .t{font-size:14px;font-weight:600;color:var(--navy);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.oc-notice-row .tt .m{font-size:12px;color:var(--gray);margin-top:3px}
.oc-notice-row .rd{font-size:11.5px;flex-shrink:0}
.oc-dot-unread{width:8px;height:8px;border-radius:50%;background:#e23a52;display:inline-block;flex-shrink:0}
.oc-dot-read{width:8px;height:8px;border-radius:50%;background:#d4dce8;display:inline-block;flex-shrink:0}
.oc-detail{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:26px 30px}
.oc-detail h2{font-size:19px;font-weight:800;color:var(--navy);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.oc-detail .dm{font-size:12.5px;color:var(--gray);margin:10px 0 18px;padding-bottom:14px;border-bottom:1px solid var(--line);display:flex;gap:16px;flex-wrap:wrap}
.oc-detail .db p{margin-bottom:12px;line-height:1.9;font-size:14px;color:#36425a}
.oc-detail .dsign{margin-top:24px;text-align:right;color:var(--gray);font-size:13px;line-height:1.9}

/* 面包屑 */
.oc-breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--gray);margin-bottom:16px;flex-wrap:wrap}
.oc-breadcrumb a{color:var(--gray);text-decoration:none;transition:color .15s}
.oc-breadcrumb a:hover{color:var(--blue)}
.oc-breadcrumb .sep{opacity:.5}
.oc-breadcrumb .cur{color:var(--navy);font-weight:600}

/* =========================================================
 * Profile（个人资料）/ Notifications（消息中心）组件
 * ========================================================= */

/* 个人资料 —— 头部 */
.oc-profile-hero{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:24px 26px;display:flex;gap:20px;align-items:center;margin-bottom:18px}
.oc-profile-hero .av{width:84px;height:84px;border-radius:22px;overflow:hidden;flex-shrink:0;background:#eef3fb;display:grid;place-items:center}
.oc-profile-hero .av img{width:100%;height:100%;object-fit:cover}
.oc-profile-hero .info{flex:1;min-width:0}
.oc-profile-hero .info h1{font-size:22px;font-weight:800;color:var(--navy);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.oc-profile-hero .info .role{font-size:12px;font-weight:600;padding:3px 11px;border-radius:999px;background:#eaf1ff;color:var(--blue)}
.oc-profile-hero .info .meta{font-size:13px;color:var(--gray);margin-top:8px;display:flex;gap:18px;flex-wrap:wrap}
.oc-profile-hero .ops{margin-left:auto;flex-shrink:0}

/* 字段卡 */
.oc-field-list{padding:4px 0}
.oc-field-row{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid #f2f5fa;font-size:14px}
.oc-field-row:last-child{border-bottom:none}
.oc-field-row .k{width:96px;color:var(--gray);flex-shrink:0}
.oc-field-row .v{color:var(--navy);font-weight:600;flex:1;min-width:0}
.oc-field-row .v.muted{color:#a5b1c2;font-weight:400}

/* 资料栅格 */
.oc-prof-body{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start}
@media (max-width:1000px){.oc-prof-body{grid-template-columns:1fr}}

/* 关联应用账号行 */
.oc-linked{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid #f2f5fa}
.oc-linked:last-child{border-bottom:none}
.oc-linked .ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;color:#fff;font-size:19px;flex-shrink:0}
.oc-linked .lt{flex:1;min-width:0}
.oc-linked .lt b{font-size:14px;color:var(--navy);font-weight:600;display:block;line-height:1.3}
.oc-linked .lt .mt{font-size:11.5px;color:var(--gray);margin-top:2px;display:block}

/* 消息中心 —— 列表 */
.oc-msg-list{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.oc-msg-row{display:flex;gap:14px;padding:16px 18px;border-bottom:1px solid #f2f5fa;transition:background .15s;cursor:pointer}
.oc-msg-row:last-child{border-bottom:none}
.oc-msg-row:hover{background:#fafbfe}
.oc-msg-row.unread{background:#f6f9ff}
.oc-msg-row .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#fff;flex-shrink:0;font-size:19px}
.oc-msg-row .body{flex:1;min-width:0}
.oc-msg-row .body .top{display:flex;align-items:center;gap:9px}
.oc-msg-row .body .top b{font-size:14.5px;color:var(--navy);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oc-msg-row .body .top .cat{font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;background:#f0f3f8;color:#8492a6;flex-shrink:0}
.oc-msg-row .body .top .dot{width:8px;height:8px;border-radius:50%;background:#e23a52;flex-shrink:0}
.oc-msg-row .body .pv{font-size:13px;color:var(--gray);margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oc-msg-row time{font-size:12px;color:#a5b1c2;flex-shrink:0;margin-top:2px}
.oc-msg-tip{font-size:12px;color:#a5b1c2;margin-top:14px}