:root {
  color-scheme: light dark;
  -webkit-text-size-adjust: 100%;

  --saas-radius-xl: 24px;
  --saas-radius-lg: 18px;
  --saas-radius-md: 14px;

  --saas-text: #0b1220;
  --saas-subtle: rgba(15, 23, 42, 0.56);
  --saas-border: rgba(15, 23, 42, 0.08);
  --saas-card: rgba(255, 255, 255, 0.72);
  --saas-card-strong: rgba(255, 255, 255, 0.86);

  --saas-shadow:
    0 22px 70px rgba(15, 23, 42, 0.10),
    0 10px 26px rgba(15, 23, 42, 0.06);

  --saas-brand: #3b5bff;
  --saas-brand-2: #2f4fe6;
  --saas-ring: rgba(59, 91, 255, 0.18);
}

.dark {
  --saas-text: #e6edf7;
  --saas-subtle: rgba(226, 232, 240, 0.62);
  --saas-border: rgba(148, 163, 184, 0.16);
  --saas-card: rgba(16, 22, 33, 0.62);
  --saas-card-strong: rgba(17, 24, 39, 0.72);
  --saas-shadow:
    0 26px 90px rgba(0, 0, 0, 0.52),
    0 10px 30px rgba(0, 0, 0, 0.34);
  --saas-ring: rgba(132, 154, 255, 0.20);
}

body {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang SC", sans-serif;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 顶级 SaaS：干净通透背景 + 大留白 */
.apple-ui {
  color: var(--saas-text);
  background:
    radial-gradient(1200px 520px at 15% -10%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0)),
    radial-gradient(1100px 520px at 85% -8%, rgba(232, 238, 255, 0.75), rgba(255, 255, 255, 0)),
    linear-gradient(180deg, #ffffff 0%, #f4f6fb 58%, #f3f5fa 100%);
}

.dark .apple-ui {
  background:
    radial-gradient(980px 520px at 18% -14%, rgba(64, 97, 150, 0.26), rgba(0, 0, 0, 0)),
    radial-gradient(960px 520px at 84% -16%, rgba(112, 130, 190, 0.16), rgba(0, 0, 0, 0)),
    linear-gradient(180deg, #070a10 0%, #0b101b 55%, #0b1220 100%);
}

/* 顶栏：极简毛玻璃 */
.apple-ui header {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--saas-border) !important;
  background: rgba(255, 255, 255, 0.62) !important;
}
.dark .apple-ui header {
  background: rgba(10, 14, 22, 0.55) !important;
}

/* 容器：不撑满屏幕，左右留白 */
.apple-ui main {
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 用户端控制台改为贴左布局 */
.panel-user main {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* 手机 / 触控：侧栏必须在内容之上可点；去掉 aside 毛玻璃避免 iOS 命中异常 */
.panel-user #consoleSection > aside,
.panel-admin #adminConsoleSection > aside {
  position: relative;
  z-index: 30;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(15, 23, 42, 0.08);
}

@media (max-width: 1023px) {
  .apple-ui.panel-user #consoleSection > aside.rounded-2xl,
  .apple-ui.panel-admin #adminConsoleSection > aside.rounded-2xl {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--saas-card-strong) !important;
  }
}

.panel-admin main {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* 控制台主列与「机器人概览」：占满宽；勿写死 align-items，否则会压过 Tailwind 的 lg:items-start */
.panel-user #consoleSection,
.panel-admin #adminConsoleSection {
  width: 100%;
  max-width: 100%;
}

.panel-user #consoleSection > .console-main-column,
.panel-admin #adminConsoleSection > .console-main-column {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  box-sizing: border-box;
}

/* 窄屏：主内容区卡片去掉毛玻璃，减轻 iOS/微信 WebView 命中层错位 */
@media (max-width: 1023px) {
  .panel-user #consoleSection > .console-main-column section.rounded-2xl,
  .panel-admin #adminConsoleSection > .console-main-column section.rounded-2xl {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

.apple-ui .robot-overview-card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.apple-ui .robot-overview-stats {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.apple-ui .robot-overview-stat {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* 卡片：细腻圆角 + 轻柔阴影 + 适度毛玻璃 */
.apple-ui section.rounded-2xl,
.apple-ui aside.rounded-2xl {
  border: 1px solid var(--saas-border) !important;
  border-radius: var(--saas-radius-xl) !important;
  background: var(--saas-card) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--saas-shadow);
}

/* 角色胶囊：低饱和、干净 */
.apple-ui .role-badge {
  background: rgba(15, 23, 42, 0.04);
  color: rgba(15, 23, 42, 0.65);
  border: 1px solid var(--saas-border);
}
.dark .apple-ui .role-badge {
  background: rgba(226, 232, 240, 0.06);
  color: rgba(226, 232, 240, 0.72);
}

/* 输入：更轻、更像 Notion/Apple */
.apple-ui input,
.apple-ui textarea,
.apple-ui canvas {
  border: 1px solid var(--saas-border) !important;
  border-radius: var(--saas-radius-md) !important;
  background: var(--saas-card-strong) !important;
  transition: box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.dark .apple-ui input,
.dark .apple-ui textarea,
.dark .apple-ui canvas {
  background: rgba(12, 16, 26, 0.55) !important;
}
.apple-ui input:focus,
.apple-ui textarea:focus {
  outline: none;
  border-color: rgba(59, 91, 255, 0.35) !important;
  box-shadow: 0 0 0 6px var(--saas-ring);
}

/* 按钮：轻微上浮、柔和变色 */
.apple-ui button {
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, filter 0.18s ease;
}
.apple-ui button:hover {
  transform: translateY(-1px);
}
.apple-ui button:active {
  transform: translateY(0px);
}

/* 品牌按钮：更“高端后台”的干净渐变 */
.apple-ui .brand-btn,
.apple-ui button.bg-indigo-600 {
  background: linear-gradient(180deg, var(--saas-brand) 0%, var(--saas-brand-2) 100%) !important;
  box-shadow: 0 14px 40px rgba(47, 79, 230, 0.22);
}
.apple-ui .brand-btn:hover,
.apple-ui button.bg-indigo-600:hover {
  filter: brightness(1.03);
  box-shadow: 0 16px 46px rgba(47, 79, 230, 0.26);
}

/* 数据统计：手机三列横排用 clamp 保最小字号；sm 起与桌面一致放大 */
.apple-ui .stat-count,
.apple-ui #onlineCount,
.apple-ui #offlineCount,
.apple-ui #totalCount,
.apple-ui #adminOnlineCount,
.apple-ui #adminOfflineCount,
.apple-ui #adminTotalCount {
  font-size: clamp(1.5rem, 5.8vw + 0.35rem, 2.65rem);
  line-height: 1.08;
  font-weight: 650;
  letter-spacing: -0.02em;
}

@media (min-width: 640px) {
  .apple-ui .stat-count,
  .apple-ui #onlineCount,
  .apple-ui #offlineCount,
  .apple-ui #totalCount,
  .apple-ui #adminOnlineCount,
  .apple-ui #adminOfflineCount,
  .apple-ui #adminTotalCount {
    font-size: 2.65rem;
    line-height: 1.05;
  }
}

/* 概览三格内数字：按视口缩放，与均分栏宽匹配 */
.apple-ui .robot-overview-stats .stat-count,
.apple-ui .robot-overview-stats #onlineCount,
.apple-ui .robot-overview-stats #offlineCount,
.apple-ui .robot-overview-stats #totalCount,
.apple-ui .robot-overview-stats #adminOnlineCount,
.apple-ui .robot-overview-stats #adminOfflineCount,
.apple-ui .robot-overview-stats #adminTotalCount {
  font-size: clamp(1.15rem, 0.55rem + 9vw, 2.45rem);
  line-height: 1.08;
}

@media (min-width: 640px) {
  .apple-ui .robot-overview-stats .stat-count,
  .apple-ui .robot-overview-stats #onlineCount,
  .apple-ui .robot-overview-stats #offlineCount,
  .apple-ui .robot-overview-stats #totalCount,
  .apple-ui .robot-overview-stats #adminOnlineCount,
  .apple-ui .robot-overview-stats #adminOfflineCount,
  .apple-ui .robot-overview-stats #adminTotalCount {
    font-size: 2.65rem;
    line-height: 1.05;
  }
}

/* 登录卡片：更强冲击力（居中、阴影更柔） */
#loginSection,
#adminLoginSection {
  border-radius: 28px !important;
  box-shadow:
    0 30px 90px rgba(15, 23, 42, 0.14),
    0 10px 26px rgba(15, 23, 42, 0.06) !important;
}

/* Toast：更克制、更像 SaaS */
#toastHost > div {
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.login-cosmic-bg {
  position: relative;
  overflow-x: hidden;
  isolation: isolate;
}

.login-cosmic-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  /* 日间登录底图：MissChat/assets/images/bj.jpg；换图后若浏览器不刷新，可把下面 ?v= 数字改大一次 */
  background-color: #eef2f4;
  background-image:
    url("../images/bj.jpg?v=3"),
    radial-gradient(ellipse 980px 420px at 50% -8%, rgba(248, 250, 252, 0.38), transparent 68%),
    radial-gradient(ellipse 720px 360px at 12% 108%, rgba(203, 213, 225, 0.14), transparent 58%),
    radial-gradient(ellipse 640px 320px at 88% 96%, rgba(186, 199, 188, 0.08), transparent 55%),
    linear-gradient(180deg, rgba(241, 245, 249, 0.22) 0%, rgba(226, 232, 240, 0.12) 42%, rgba(203, 213, 225, 0.1) 100%);
  background-position: center center, center center, center center, center center, center center;
  background-size: cover, auto, auto, auto, auto;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  /* 日间固定：勿用视差 fixed、勿做透明度动画，避免手机地址栏/微信 WebView 整页抖动 */
  background-attachment: scroll, scroll, scroll, scroll, scroll;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
  animation: none;
}

.login-cosmic-bg::after {
  content: "";
  position: fixed;
  inset: 0;
  opacity: 0.32;
  pointer-events: none;
  z-index: 0;
  /* 清明细雨：更疏 — 仅两层、大间距、低对比 */
  background-image:
    repeating-linear-gradient(100deg, transparent 0, transparent 96px, rgba(100, 116, 139, 0.085) 96px, rgba(100, 116, 139, 0.085) 97px),
    repeating-linear-gradient(99deg, transparent 0, transparent 128px, rgba(148, 163, 184, 0.055) 128px, rgba(148, 163, 184, 0.055) 129px);
  background-size:
    360px 360px, 440px 440px;
  background-position: 0 0, 0 0;
  animation: none;
}

.login-cosmic-bg > * {
  position: relative;
  z-index: 1;
}

.dark .login-cosmic-bg::before {
  /* 仅极光：常年轻微漂移，不受流星动画透明度影响 */
  background:
    radial-gradient(500px 230px at 14% 18%, rgba(99, 102, 241, 0.14), transparent 72%),
    radial-gradient(430px 200px at 82% 14%, rgba(56, 189, 248, 0.12), transparent 74%),
    radial-gradient(460px 220px at 54% 86%, rgba(168, 85, 247, 0.1), transparent 76%),
    radial-gradient(980px 440px at 50% -18%, rgba(37, 99, 235, 0.08), transparent 74%);
  background-size: auto, auto, auto, auto;
  background-repeat: no-repeat;
  filter: saturate(1.03) blur(0.1px);
  animation: aurora-drift 14s ease-in-out infinite alternate;
}

.dark .login-cosmic-bg::after {
  opacity: 0.76;
  background-image:
    radial-gradient(circle at 8% 14%, rgba(255, 255, 255, 0.96) 0 1.1px, transparent 1.2px),
    radial-gradient(circle at 18% 76%, rgba(255, 255, 255, 0.9) 0 1px, transparent 1.1px),
    radial-gradient(circle at 29% 43%, rgba(255, 255, 255, 0.95) 0 1.25px, transparent 1.35px),
    radial-gradient(circle at 39% 21%, rgba(255, 255, 255, 0.86) 0 0.9px, transparent 1px),
    radial-gradient(circle at 52% 70%, rgba(255, 255, 255, 0.98) 0 1.25px, transparent 1.35px),
    radial-gradient(circle at 66% 28%, rgba(255, 255, 255, 0.92) 0 1.1px, transparent 1.2px),
    radial-gradient(circle at 79% 52%, rgba(255, 255, 255, 0.88) 0 1px, transparent 1.1px),
    radial-gradient(circle at 92% 35%, rgba(255, 255, 255, 0.95) 0 1.2px, transparent 1.3px),
    radial-gradient(circle at 12% 48%, rgba(255, 255, 255, 0.8) 0 0.82px, transparent 0.92px),
    radial-gradient(circle at 37% 86%, rgba(255, 255, 255, 0.78) 0 0.8px, transparent 0.9px),
    radial-gradient(circle at 58% 62%, rgba(255, 255, 255, 0.76) 0 0.76px, transparent 0.86px),
    radial-gradient(circle at 84% 74%, rgba(255, 255, 255, 0.8) 0 0.8px, transparent 0.9px);
  background-size:
    auto, auto, auto, auto, auto, auto, auto, auto,
    280px 280px, 320px 320px, 360px 360px, 400px 400px;
  animation: starlight 4.8s ease-in-out infinite;
}

.theme-toggle-icon {
  width: 16px;
  height: 16px;
  display: block;
}

.loading-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.2);
  z-index: 60;
  backdrop-filter: blur(4px);
}

.loading-overlay.show {
  display: flex;
}

.loading-spinner {
  width: 2.1rem;
  height: 2.1rem;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #ffffff;
  border-radius: 9999px;
  animation: spin 0.7s linear infinite;
}

.msg-flash {
  animation: flash-bg 0.8s ease;
}

#logBox {
  white-space: pre-wrap;
  word-break: break-word;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes aurora-drift {
  0% { transform: translate3d(-3%, -2%, 0) scale(1.02); }
  50% { transform: translate3d(1%, 1%, 0) scale(1.06); }
  100% { transform: translate3d(3%, 2%, 0) scale(1.08); }
}

@keyframes starlight {
  0%, 100% { opacity: 0.36; }
  50% { opacity: 0.64; }
}

@keyframes qingming-mist {
  /* 仅极轻呼吸，不 scale 底图避免水墨画被拉扯 */
  0% { opacity: 0.94; }
  100% { opacity: 1; }
}

@keyframes rain-fall {
  0% {
    background-position:
      0 -10%, 48px -6%;
  }
  100% {
    background-position:
      -14px 118vh, 40px 120vh;
  }
}

@keyframes flash-bg {
  0% { background: rgba(148, 163, 184, 0.18); }
  100% { background: transparent; }
}

@media (max-width: 768px) {
  body { font-size: 14px; }
  table { font-size: 12px; }

  /*
   * 登录页手机：底图伪层改 absolute 贴 body，避免 position:fixed 随浏览器 UI 伸缩「乱跳」；
   * 深色同样关掉极光/星光动画，仅保留静态渐变。
   */
  body.login-cosmic-bg {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
  }

  .login-cosmic-bg::before,
  .login-cosmic-bg::after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    height: auto;
    background-attachment: scroll, scroll, scroll, scroll, scroll !important;
  }

  .dark .login-cosmic-bg::before {
    animation: none !important;
    transform: none !important;
    filter: none;
  }

  .dark .login-cosmic-bg::after {
    animation: none !important;
    opacity: 0.55;
  }
}