/* ==========================================================================
   鲸鱼娘 · 未至之境 (Whale Girl · The Unreached) - 全息赛博动态主题
   适配: WorkBuddy2API 控制台 & New API
   ========================================================================== */

:root, [data-theme="dark"], .dark, body {
  /* 基础主调背景：透明，让全息视频浮现 */
  --bg: transparent !important;
  --background: transparent !important;
  --foreground: #E8F1FF !important;

  /* 面板、卡片与表面：薄玻璃透明蓝黑 */
  --surface: rgba(10, 16, 32, 0.72) !important;
  --surface-2: rgba(14, 25, 48, 0.65) !important;
  --raise: rgba(20, 35, 65, 0.75) !important;
  --card: rgba(10, 16, 32, 0.72) !important;
  --card-foreground: #E8F1FF !important;
  --popover: rgba(10, 16, 32, 0.9) !important;
  --popover-foreground: #E8F1FF !important;

  /* 侧边栏与头部：深色透视玻璃 */
  --sidebar: rgba(5, 7, 13, 0.75) !important;
  --sidebar-foreground: #E8F1FF !important;
  --sidebar-primary: #3A7BFF !important;
  --sidebar-accent: rgba(58, 123, 255, 0.25) !important;
  --sidebar-border: rgba(30, 58, 107, 0.6) !important;

  /* 结构线条与强调 */
  --line: rgba(30, 58, 107, 0.6) !important;
  --line-soft: rgba(30, 58, 107, 0.35) !important;
  --border: rgba(30, 58, 107, 0.55) !important;
  --input: rgba(14, 25, 48, 0.75) !important;
  --ring: #39FFD1 !important;

  /* 主色调：电光蓝 & 青色状态 */
  --ink: #E8F1FF !important;
  --ink-2: #A8C2E8 !important;
  --ink-3: #7593BE !important;
  --primary: #3A7BFF !important;
  --primary-foreground: #E8F1FF !important;
  --accent: #3A7BFF !important;
  --accent-soft: rgba(58, 123, 255, 0.25) !important;
  --accent-foreground: #0A1020 !important;

  /* 状态颜色 */
  --ok: #39FFD1 !important;
  --ok-soft: rgba(57, 255, 209, 0.18) !important;
  --warn: #F5B544 !important;
  --warn-soft: rgba(245, 181, 68, 0.18) !important;
  --bad: #F0655F !important;
  --bad-soft: rgba(240, 101, 95, 0.18) !important;

  /* 次级文本与表格 */
  --muted: rgba(20, 40, 71, 0.45) !important;
  --muted-foreground: #8FA8CC !important;
  --table-row: transparent !important;
  --table-header: rgba(10, 16, 32, 0.75) !important;
}

html, body, #root, .shell, .main, .view, .wrap {
  background: transparent !important;
  color: #E8F1FF !important;
}

/* ── 全息背景视频层 ── */
#whale-bg-container {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
  background-color: #05070D;
}

#whale-bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  filter: contrast(1.02) saturate(1.02);
  opacity: 0.95;
}

#whale-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(5,7,13,0) 0%, rgba(5,7,13,0.1) 70%, rgba(5,7,13,0.3) 90%, rgba(5,7,13,0.45) 100%);
  z-index: 1;
}

#whale-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.15) 50%);
  background-size: 100% 4px;
  opacity: 0.18;
  z-index: 2;
}

/* ── WorkBuddy2API 控制台专有玻璃化结构 ── */
.shell, .main, .view, .wrap {
  background: transparent !important;
}

.nav {
  background-color: rgba(5, 7, 13, 0.78) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-right: 1px solid rgba(30, 58, 107, 0.65) !important;
}

.topbar {
  background-color: rgba(5, 7, 13, 0.72) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid rgba(30, 58, 107, 0.55) !important;
}

.sec, .card, [class*="card"], [class*="Card"], [class*="panel"], [class*="Panel"],
[role="region"], .semi-card, .box, .qgroup {
  background-color: rgba(10, 16, 32, 0.72) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(30, 58, 107, 0.75) !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.45) !important;
  border-radius: 12px !important;
}

.qrow:hover, .srow:hover, tbody tr:hover, .semi-table-row:hover {
  background-color: rgba(20, 40, 71, 0.5) !important;
}

/* 弹窗与遮罩层 */
.veil {
  background: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.dialog, .semi-modal-content, [class*="dialog-content"] {
  background-color: rgba(10, 16, 32, 0.92) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(57, 255, 209, 0.4) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7), 0 0 24px rgba(58, 123, 255, 0.25) !important;
  border-radius: 14px !important;
}

/* 表格透明化 */
table, .semi-table, [class*="table"], [class*="Table"] {
  background-color: transparent !important;
}

thead, tr, th {
  background-color: rgba(10, 16, 32, 0.6) !important;
  color: #8FA8CC !important;
  border-color: rgba(30, 58, 107, 0.45) !important;
}

tbody tr, td, .semi-table-row {
  background-color: transparent !important;
  border-color: rgba(30, 58, 107, 0.35) !important;
  color: #E8F1FF !important;
}

/* 按钮全息微发光 */
button, .semi-button {
  backdrop-filter: blur(8px) !important;
}

button.primary, button[class*="primary"], .semi-button-primary {
  background-color: #3A7BFF !important;
  border-color: #3A7BFF !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 15px rgba(58, 123, 255, 0.45) !important;
  transition: all 0.2s ease !important;
}

button.primary:hover:not(:disabled), button[class*="primary"]:hover, .semi-button-primary:hover {
  background-color: #528BFF !important;
  border-color: #39FFD1 !important;
  box-shadow: 0 0 22px rgba(57, 255, 209, 0.65) !important;
}

/* 输入框与选择器 */
input, textarea, select, .semi-input, [class*="input"], [class*="Input"], [class*="select"] {
  background-color: rgba(14, 25, 48, 0.75) !important;
  border: 1px solid rgba(58, 123, 255, 0.4) !important;
  color: #E8F1FF !important;
  backdrop-filter: blur(8px) !important;
}

input:focus, textarea:focus, select:focus, .semi-input:focus {
  border-color: #39FFD1 !important;
  box-shadow: 0 0 12px rgba(57, 255, 209, 0.4) !important;
}

/* 滚动条 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: rgba(5, 7, 13, 0.5);
}
::-webkit-scrollbar-thumb {
  background: rgba(58, 123, 255, 0.5);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #39FFD1;
}

/* 状态操作按钮与标签 */
button.warn {
  background: rgba(245, 181, 68, 0.15) !important;
  color: #F5B544 !important;
  border: 1px solid rgba(245, 181, 68, 0.45) !important;
}
button.warn:hover {
  background: #F5B544 !important;
  color: #05070D !important;
}
button.bad {
  background: rgba(240, 101, 95, 0.15) !important;
  color: #F0655F !important;
  border: 1px solid rgba(240, 101, 95, 0.45) !important;
}
button.bad:hover {
  background: #F0655F !important;
  color: #FFFFFF !important;
}
button.ok {
  background: rgba(57, 255, 209, 0.15) !important;
  color: #39FFD1 !important;
  border: 1px solid rgba(57, 255, 209, 0.45) !important;
}
button.ok:hover {
  background: #39FFD1 !important;
  color: #05070D !important;
}

/* ── UI 隐藏纯净壁纸模式与 HUD 提示 ── */
body > *:not(#whale-bg-container):not(#whale-hud-toast) {
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.whale-ui-hidden {
  overflow: hidden !important;
}

body.whale-ui-hidden > *:not(#whale-bg-container):not(#whale-hud-toast) {
  opacity: 0 !important;
  pointer-events: none !important;
  user-select: none !important;
  transform: scale(0.99);
}

#whale-hud-toast {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  padding: 8px 22px;
  background: rgba(10, 16, 32, 0.88);
  border: 1px solid rgba(57, 255, 209, 0.5);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 16px rgba(57, 255, 209, 0.3);
  border-radius: 30px;
  color: #39FFD1;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 13px;
  font-weight: 550;
  letter-spacing: 0.5px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 999999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#whale-hud-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}