/**
 * 美宿云 AI-OMS · Google Chrome 原生质感版本展示与发布日志样式库
 * 遵循: Google Material 3 规范 | 亮底设计 | ADR-0404 语义垂直拆分标准
 */

/* 引入抽屉主体与 Antigravity Releases 折叠面板样式 (依据 CSS 规范置于顶层) */
@import url("hud/chrome_drawer.css");
@import url("hud/antigravity_releases.css");

:root {
  --chrome-blue: #1A73E8;
  --chrome-blue-hover: #1557B0;
  --chrome-blue-bg: #E8F0FE;
  --chrome-green: #34A853;
  --chrome-green-bg: #ECFDF5;
  --chrome-yellow: #FBBC05;
  --chrome-red: #EA4335;
  --chrome-surface: #FFFFFF;
  --chrome-surface-alt: #F8FAFC;
  --chrome-border: #E8EAED;
  --chrome-border-active: #C2E7FF;
  --chrome-text-primary: #202124;
  --chrome-text-secondary: #5F6368;
  --chrome-text-muted: #80868B;
  --chrome-shadow-sm: 0 1px 3px rgba(60,64,67,0.12), 0 1px 2px rgba(60,64,67,0.24);
  --chrome-shadow-md: 0 4px 12px rgba(60,64,67,0.15);
  --chrome-shadow-lg: 0 12px 32px rgba(60,64,67,0.18);
  --chrome-radius-pill: 9999px;
  --chrome-radius-card: 16px;
  --chrome-radius-sm: 8px;
  --chrome-transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ================= 1. 顶栏 Chrome 风格版本胶囊 (支持常态收起与平滑展开) ================= */
.chrome-version-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--chrome-surface);
  border: 1px solid var(--chrome-border);
  height: 32px;
  padding: 0 12px;
  border-radius: var(--chrome-radius-pill);
  font-size: 12px;
  font-weight: 600;
  color: var(--chrome-text-primary);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
}

.chrome-version-pill:hover {
  background: var(--chrome-blue-bg);
  border-color: #AECBFA;
  color: var(--chrome-blue);
  box-shadow: var(--chrome-shadow-sm);
  transform: translateY(-1px);
}

.chrome-version-pill .chrome-logo-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  display: inline-block;
}

.chrome-version-pill .pulse-dot-live {
  width: 6px;
  height: 6px;
  background-color: var(--chrome-green);
  border-radius: 50%;
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}

.chrome-version-pill .pulse-dot-live::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--chrome-green);
  opacity: 0.5;
  animation: chrome-pulse 1.8s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

@keyframes chrome-pulse {
  0% { transform: scale(0.9); opacity: 0.8; }
  70% { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}

.chrome-version-pill .version-tag-text {
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--chrome-blue);
  letter-spacing: -0.01em;
}

/* 常态隐藏完整构建详情，hover 时平滑展开 */
.chrome-version-pill .version-details-expand {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.chrome-version-pill:hover .version-details-expand {
  max-width: 160px;
  opacity: 1;
  margin-left: 2px;
}

.chrome-version-pill .time-beijing-badge {
  font-size: 10.5px;
  color: #64748B;
  background: #F1F5F9;
  padding: 1px 6px;
  border-radius: 4px;
}

/* ================= 1.2 数据血缘双轨胶囊 (Apple HIG 高质感设计) ================= */
.data-lineage-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--chrome-radius-pill);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.data-lineage-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}

.data-lineage-pill.real-mode {
  background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
  border: 1px solid #A7F3D0;
  color: #065F46;
}

.data-lineage-pill.mock-mode {
  background: linear-gradient(135deg, #FAF5FF 0%, #EDE9FE 100%);
  border: 1px solid #DDD6FE;
  color: #5B21B6;
}

.data-lineage-pill.auto-mode {
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
  border: 1px solid #BFDBFE;
  color: #1E40AF;
}

.data-lineage-pill .mode-badge-pill {
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 9999px;
  text-transform: uppercase;
}

.data-lineage-pill.real-mode .mode-badge-pill {
  background: #FFFFFF;
  color: #059669;
  border: 1px solid #A7F3D0;
}

.data-lineage-pill.mock-mode .mode-badge-pill {
  background: #FFFFFF;
  color: #7C3AED;
  border: 1px solid #DDD6FE;
}

.data-lineage-pill.auto-mode .mode-badge-pill {
  background: #FFFFFF;
  color: #2563EB;
  border: 1px solid #BFDBFE;
}

/* ================= 2. 页面右下角 HUD 悬浮胶囊 ================= */
.chrome-hud-capsule {
  position: fixed;
  bottom: 20px;
  right: 24px;
  z-index: 990;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--chrome-border);
  padding: 6px 14px 6px 10px;
  border-radius: var(--chrome-radius-pill);
  box-shadow: var(--chrome-shadow-md);
  cursor: pointer;
  transition: var(--chrome-transition);
  user-select: none;
}

.chrome-hud-capsule:hover {
  background: #FFFFFF;
  border-color: #AECBFA;
  box-shadow: var(--chrome-shadow-lg);
  transform: translateY(-2px);
}

.chrome-hud-capsule .hud-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--chrome-text-primary);
}

.chrome-hud-capsule .hud-version {
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--chrome-blue);
  background: var(--chrome-blue-bg);
  padding: 2px 6px;
  border-radius: 4px;
}

.chrome-hud-capsule .hud-time {
  font-size: 11px;
  color: var(--chrome-text-secondary);
}

/* ================= 3. 抽屉骨架与遮罩 ================= */
.chrome-drawer-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(32, 33, 36, 0.25);
  backdrop-filter: blur(4px);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: var(--chrome-transition);
}

.chrome-drawer-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.chrome-drawer-backdrop.pin-mode {
  background: transparent;
  pointer-events: none;
  backdrop-filter: none;
}

.chrome-release-drawer {
  position: fixed;
  top: 16px;
  right: 16px;
  bottom: 16px;
  width: 480px;
  max-width: calc(100vw - 32px);
  background: var(--chrome-surface);
  border: 1px solid var(--chrome-border);
  border-radius: var(--chrome-radius-card);
  box-shadow: var(--chrome-shadow-lg);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  transform: translateX(110%);
  transition: var(--chrome-transition);
  overflow: hidden;
  pointer-events: auto;
}

.chrome-release-drawer.active {
  transform: translateX(0);
}

.drawer-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--chrome-border);
  background: var(--chrome-surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.drawer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.drawer-brand-logo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--chrome-blue-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.drawer-title-main {
  font-size: 15px;
  font-weight: 700;
  color: var(--chrome-text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.drawer-subtitle {
  font-size: 11.5px;
  color: var(--chrome-text-secondary);
  margin-top: 2px;
}

.drawer-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.drawer-tool-btn {
  background: var(--chrome-surface-alt);
  border: 1px solid var(--chrome-border);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--chrome-text-secondary);
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: var(--chrome-transition);
}

.drawer-tool-btn:hover {
  background: var(--chrome-blue-bg);
  color: var(--chrome-blue);
}

.drawer-tool-btn.pinned {
  background: #FEF3C7;
  border-color: #FCD34D;
  color: #B45309;
}

.drawer-close-btn {
  background: transparent;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--chrome-text-secondary);
  font-size: 16px;
  cursor: pointer;
  transition: var(--chrome-transition);
}

.drawer-close-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--chrome-text-primary);
}