/* XHS 运营台 · 共用设计规范（私信台 / 设备 / 工作流三页共用）
   颜色只在这里定义；各页自己的样式只引用这些变量。 */
:root{
  --brand:#4b5cff;--brand-2:#7b5cff;--brand-hover:#3d4de6;--brand-soft:#eef0ff;--brand-ink:#3443d6;
  --bg:#f4f5f8;--side:#fafbfc;--pane:#ffffff;--raised:#ffffff;
  --fg:#1b1d28;--fg-2:#4a4e5e;--mute:#8a8fa0;--faint:#b4b8c5;
  --line:#e8eaf0;--line-2:#dfe2ea;--hover:#f2f3f7;--press:#e9ebf2;
  --ok:#14a35a;--ok-soft:#e6f6ee;--warn:#e8930c;--warn-soft:#fdf3e2;--err:#e5394f;--err-soft:#fdecee;--info:#5b6478;
  --unread:#f53f5b;
  --r-sm:6px;--r:10px;--r-lg:14px;--r-xl:18px;
  --sh-1:0 1px 2px rgba(20,24,40,.05);--sh-2:0 2px 8px rgba(20,24,40,.06),0 1px 2px rgba(20,24,40,.04);
  --sh-3:0 12px 32px rgba(20,24,40,.14),0 2px 6px rgba(20,24,40,.06);
  --ring:0 0 0 3px rgba(75,92,255,.22);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --brand:#7584ff;--brand-2:#9a83ff;--brand-hover:#8a97ff;--brand-soft:#232748;--brand-ink:#a9b2ff;
  --bg:#0f1015;--side:#15161c;--pane:#1a1b22;--raised:#20212a;
  --fg:#e9eaf0;--fg-2:#b9bcc8;--mute:#858a9a;--faint:#5c6070;
  --line:#272934;--line-2:#30323e;--hover:#22242d;--press:#2a2c37;
  --ok:#3fc683;--ok-soft:#173326;--warn:#f0a73a;--warn-soft:#3a2d16;--err:#ff6377;--err-soft:#3d1c22;--info:#9aa1b4;
  --sh-1:none;--sh-2:0 1px 0 rgba(255,255,255,.03);--sh-3:0 16px 40px rgba(0,0,0,.5);--ring:0 0 0 3px rgba(117,132,255,.3);
  color-scheme:dark;
}}
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{font-family:var(--font)}
:focus-visible{outline:none;box-shadow:var(--ring)}
::selection{background:var(--brand-soft)}
/* 细滚动条 */
*{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background-color:var(--faint)}::-webkit-scrollbar-track{background:transparent}

/* ---------- 左侧导航栏 ---------- */
.rail{background:var(--side);border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;padding:14px 0 12px;gap:4px;width:64px;flex:none;z-index:5}
.rail .brandmark{width:38px;height:38px;margin-bottom:14px;display:block;border-radius:11px;box-shadow:0 4px 12px rgba(75,92,255,.28)}
.rail button,.rail a.nav{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:var(--mute);position:relative;border:0;background:none;cursor:pointer;
  transition:background .15s,color .15s;text-decoration:none}
.rail button:hover,.rail a.nav:hover{background:var(--hover);color:var(--fg-2)}
.rail button.on,.rail a.nav.on{background:var(--brand-soft);color:var(--brand)}
.rail button.on::before,.rail a.nav.on::before{content:"";position:absolute;left:-10px;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:var(--brand)}
.rail svg{width:22px;height:22px}.rail .grow{flex:1}
.rail .sep{width:24px;height:1px;background:var(--line);margin:6px 0}
.rail .cnt{position:absolute;top:3px;right:1px;background:var(--warn);color:#fff;font-size:10px;font-weight:600;min-width:16px;height:16px;border-radius:8px;display:none;place-items:center;padding:0 4px;border:2px solid var(--side);box-sizing:content-box}
.rail .status{width:44px;height:28px;display:grid;place-items:center}
.rail .me{width:34px;height:34px;margin:4px 0 2px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);font-weight:650;font-size:13px;box-shadow:0 0 0 2px var(--side),0 0 0 3px var(--line)}
.rail .me img{width:100%;height:100%;object-fit:cover}.rail .me[hidden]{display:none}
/* 触屏（iPad / 手机）：滚动区域用惯性滚动、不把滚动传给外层；悬停提示点一下会粘住，关掉 */
.page,.convs,.accts,.msgs,.scroll,.livepane,.palette,.side{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
@media (hover:none){[data-tip]:hover::after{display:none}}
/* 悬停提示（右侧浮出） */
[data-tip]{position:relative}
[data-tip]:hover::after{content:attr(data-tip);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);white-space:nowrap;
  background:#1b1d28;color:#fff;font-size:12px;font-weight:500;padding:5px 9px;border-radius:7px;box-shadow:var(--sh-3);pointer-events:none;z-index:50}
@media (prefers-color-scheme:dark){[data-tip]:hover::after{background:#33354a}}
.dot{width:9px;height:9px;border-radius:50%;background:var(--faint);box-shadow:0 0 0 3px var(--side)}.dot.on{background:var(--ok)}
.dot.busy{background:var(--warn);animation:pulse 1.2s ease-in-out infinite}@keyframes pulse{50%{opacity:.35}}

/* 带导航栏的独立页面（设备、工作流） */
body.with-rail{display:flex;height:100vh;height:100dvh;margin:0;overflow:hidden}
body.with-rail>.page{flex:1;min-width:0;overflow:auto}

/* ---------- 通用组件 ---------- */
.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 14px;border-radius:var(--r);border:1px solid var(--line-2);
  background:var(--pane);color:var(--fg);font:inherit;font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,box-shadow .15s}
.btn:hover{background:var(--hover)}.btn:active{background:var(--press)}
.btn.pri{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 1px 2px rgba(75,92,255,.3)}.btn.pri:hover{background:var(--brand-hover);border-color:var(--brand-hover)}
.btn.ghost{border-color:transparent;background:none}.btn.ghost:hover{background:var(--hover)}
.btn.danger{color:var(--err)}.btn.sm{height:28px;padding:0 10px;font-size:12px;border-radius:8px}
.btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn svg{width:15px;height:15px}
.inp{width:100%;height:38px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r);background:var(--pane);color:var(--fg);font:inherit;font-size:14px;outline:0;transition:border-color .15s,box-shadow .15s}
.inp:focus{border-color:var(--brand);box-shadow:var(--ring)}textarea.inp{height:auto;padding:10px 12px;line-height:1.6}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:500;padding:1px 8px;border-radius:999px;background:var(--hover);color:var(--fg-2);white-space:nowrap}
.chip.ok{background:var(--ok-soft);color:var(--ok)}.chip.warn{background:var(--warn-soft);color:var(--warn)}.chip.err{background:var(--err-soft);color:var(--err)}
.chip.brand{background:var(--brand-soft);color:var(--brand-ink)}
.panel{background:var(--pane);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.pagehead{display:flex;align-items:center;gap:14px;padding:22px 28px 6px;max-width:1080px;margin:0 auto}
.pagehead h1{font-size:20px;font-weight:650;margin:0;letter-spacing:-.01em}.pagehead .desc{color:var(--mute);font-size:13px;margin-top:2px}
.confidential{font-size:11px;color:var(--faint);letter-spacing:.02em}

@media (max-width:760px){
  [data-tip]:hover::after{display:none}
  body.with-rail{flex-direction:column-reverse}
  body.with-rail>.rail,.rail.mobile-bottom{width:100%;height:56px;flex-direction:row;justify-content:space-around;padding:0 6px;border-right:0;border-top:1px solid var(--line)}
  .rail .brandmark,.rail .grow,.rail .sep,.rail .status,.rail .logout,.rail .me{display:none!important}
  .rail button.on::before,.rail a.nav.on::before{display:none}
  .pagehead{padding:16px 16px 4px}
}