/* ============================================================
   Startup / Revisit Touchpoints — banner + modal + force-update
   prefix: tm-tp-（B6 触达组件重构）
   服务对象：UpdateBanner / AnnouncementBanner / AnnouncementModal /
   versionCheckFlow 强更"版本旅程卡"。
   颜色全走 token：info 面 = 品牌紫（暗色经 --tm-brand-purple 自动提亮），
   warning 面 = --tm-status-warning-*；alpha 族用 R3 预混 token
   （--tm-brand-purple-alpha-*），规避 color-mix 在旧 WebView 的兼容风险。
   T5：本文件不定义 --tm-* 变量。
   ============================================================ */

/* ---- 横幅挂载 slot：高度 0 的定位锚，banner absolute 覆盖其后的聊天区顶部；
        独立于 #chat → welcome/clearChat 重建聊天区不清横幅 ---- */
.tp-banner-slot {
  position: relative;
  height: 0;
  overflow: visible;
}

/* ---- 横幅基座（tp-banner-slot 顶部 absolute 挂载面）---- */
.tm-tp-banner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--tm-space-2, 8px);
  padding: var(--tm-space-2, 8px) var(--tm-space-3, 12px);
  font-size: var(--tm-text-md, 13px);
  line-height: var(--tm-leading-tight, 1.4);
  background: var(--tm-brand-purple-alpha-10, rgba(124, 92, 252, 0.10));
  border-bottom: 1px solid var(--tm-brand-purple-alpha-28, rgba(124, 92, 252, 0.28));
  color: var(--tm-brand-purple, #7c5cfc);
  transform: translateY(-100%);
  transition: transform var(--tm-dur-normal, 250ms) var(--tm-ease-out, ease-out);
  backdrop-filter: blur(var(--tm-glass-blur-soft, 8px));
  -webkit-backdrop-filter: blur(var(--tm-glass-blur-soft, 8px));
}

.tm-tp-banner.tm-tp-visible {
  transform: translateY(0);
}

.tm-tp-banner--warning {
  background: var(--tm-status-warning-bg, rgba(245, 158, 11, 0.10));
  border-bottom-color: var(--tm-status-warning, #f59e0b);
  color: var(--tm-status-warning-fg, #92400e);
}

.tm-tp-banner-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin-top: 1px;
}

.tm-tp-banner-text,
.tm-tp-banner-content {
  flex: 1;
  min-width: 0;
}

.tm-tp-banner-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  align-self: center;
}

.tm-tp-banner-title {
  font-weight: var(--tm-weight-semibold, 600);
}

.tm-tp-banner-body {
  margin-top: 2px;
  opacity: 0.85;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tm-tp-banner-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--tm-space-1, 4px);
  margin-top: 1px;
}

/* ---- 按钮（横幅内紧凑款 + 弹窗内主按钮共用基座）---- */
.tm-tp-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--tm-radius-sm, 6px);
  padding: 2px 10px;
  min-height: 24px;
  font-size: var(--tm-text-sm, 12px);
  font-weight: var(--tm-weight-medium, 500);
  cursor: pointer;
  color: inherit;
  background: transparent;
  transition: background var(--tm-dur-fast, 150ms) var(--tm-ease-out, ease-out),
              opacity var(--tm-dur-fast, 150ms) var(--tm-ease-out, ease-out),
              transform var(--tm-dur-instant, 80ms) var(--tm-ease-out, ease-out);
}

.tm-tp-btn:active {
  transform: scale(0.97);
}

.tm-tp-btn--primary {
  background: var(--tm-brand-purple, #7c5cfc);
  color: #fff;
}

.tm-tp-btn--primary:hover {
  background: var(--tm-brand-purple-strong, #6a4bea);
}

.tm-tp-banner--warning .tm-tp-btn--primary {
  background: var(--tm-status-warning, #f59e0b);
}

.tm-tp-btn--ghost {
  opacity: 0.8;
}

.tm-tp-btn--ghost:hover {
  opacity: 1;
  background: var(--tm-brand-purple-alpha-08, rgba(124, 92, 252, 0.08));
}

/* 弹窗内主按钮为块级触达款（44px 触达高度，styles44 同标准） */
.tm-tp-btn--block {
  width: 100%;
  min-height: 40px;
  padding: 10px 24px;
  font-size: var(--tm-text-md, 13px);
  font-weight: var(--tm-weight-semibold, 600);
  border-radius: var(--tm-radius-md, 10px);
}

.tm-tp-close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 2px;
  border-radius: var(--tm-radius-xs, 4px);
  font-size: 16px;
  line-height: 1;
  opacity: 0.6;
  transition: opacity var(--tm-dur-fast, 150ms) var(--tm-ease-out, ease-out),
              background var(--tm-dur-fast, 150ms) var(--tm-ease-out, ease-out);
}

.tm-tp-close:hover {
  opacity: 1;
  background: var(--tm-brand-purple-alpha-08, rgba(124, 92, 252, 0.08));
}

/* ---- 弹窗基座（critical 公告 + 强更卡共用）---- */
.tm-tp-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--tm-overlay-modal, rgba(0, 0, 0, 0.5));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--tm-space-4, 16px);
  opacity: 0;
  transition: opacity var(--tm-dur-fast, 200ms) var(--tm-ease-out, ease-out);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.tm-tp-modal-overlay.tm-tp-visible {
  opacity: 1;
}

/* 强更 = terminal 触点，z 走 critical 档（B2 归位：仅次于 region-lock） */
.tm-tp-force-update {
  z-index: var(--tm-z-critical, 10200);
  /* terminal 上屏即终态，无收场动画路径 → 直接可见 */
  opacity: 1;
}

.tm-tp-modal {
  background: var(--tm-bg-2, #fff);
  color: var(--tm-text-primary, #1a1a1a);
  border: 1px solid var(--tm-border-default, transparent);
  border-radius: var(--tm-radius-lg, 12px);
  padding: var(--tm-space-5, 24px);
  max-width: min(360px, calc(100vw - 24px));
  width: 100%;
  box-shadow: var(--tm-shadow-xl, 0 8px 32px rgba(0, 0, 0, 0.15));
  text-align: center;
  transform: scale(1);
  transition: transform var(--tm-dur-fast, 200ms) var(--tm-ease-out, ease-out);
}

.tm-tp-modal--enter {
  transform: scale(0.95);
}

.tm-tp-modal-icon {
  margin-bottom: var(--tm-space-3, 12px);
  display: flex;
  justify-content: center;
}

.tm-tp-modal-icon--danger {
  color: var(--tm-status-danger, #dc2626);
}

.tm-tp-brand-img {
  width: 44px;
  height: 44px;
}

.tm-tp-modal-title {
  margin: 0 0 var(--tm-space-2, 8px);
  font-size: var(--tm-text-lg, 17px);
  font-weight: var(--tm-weight-semibold, 600);
  color: var(--tm-text-primary, #1a1a1a);
}

.tm-tp-modal-body {
  margin: 0 0 var(--tm-space-4, 16px);
  font-size: var(--tm-text-base, 14px);
  color: var(--tm-text-secondary, #555);
  line-height: var(--tm-leading-normal, 1.5);
}

/* ---- 强更"版本旅程卡"：v旧 → v新（被打断的用户至少知道为什么值得）---- */
.tm-tp-version-journey {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--tm-space-2, 10px);
  font-variant-numeric: tabular-nums;
  font-weight: var(--tm-weight-semibold, 600);
  font-size: var(--tm-text-base, 15px);
  margin: var(--tm-space-3, 12px) 0;
  color: var(--tm-text-muted, #94a3b8);
}

.tm-tp-version-journey .from {
  color: var(--tm-text-muted, #94a3b8);
  text-decoration: line-through;
}

.tm-tp-version-journey .to {
  color: var(--tm-brand-purple, #7c5cfc);
}

.tm-tp-notes {
  margin: 0 0 var(--tm-space-4, 16px);
  padding: 0 0 0 var(--tm-space-4, 16px);
  text-align: left;
  font-size: var(--tm-text-sm, 12px);
  color: var(--tm-text-secondary, #555);
  line-height: var(--tm-leading-relaxed, 1.6);
}

/* ---- P2-5 修复：onboarding 期间隐藏顶部触达横幅 ----
   （overlay 挖洞时横幅会在洞内露出，破坏首屏沉浸） */
body[data-onboarding-active] .tm-tp-banner {
  display: none !important;
}

/* ---- B8 · 区域锁页信任升级（s06）：品牌 icon + 居中说明卡变体 ----
   合规语义（阻断/不可关闭/aria-hidden app）不变，纯展示层增强 */
.region-lock-card--centered {
  text-align: center;
  align-items: center; /* 存量卡是 flex column，text-align 不控 flex item（icon 居中靠这条） */
}
.region-lock-icon {
  display: inline-flex;
  margin-bottom: 10px;
  color: var(--tm-brand-purple);
  opacity: 0.9;
}

/* ---- reduced-motion（组件轨；system.css 全局轨双保险）---- */
@media (prefers-reduced-motion: reduce) {
  .tm-tp-banner,
  .tm-tp-modal-overlay,
  .tm-tp-modal,
  .tm-tp-btn {
    transition-duration: 0.01ms;
  }
}

/* ---- M1「玻璃必有降级」：无 backdrop-filter 内核（旧 WebView）----
   banner 近透明 tint 失去 blur 后紫字会直叠下层内容 → 提到实底；
   弹窗遮罩失去 blur 后加深遮罩浓度补偿分离度 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tm-tp-banner {
    background: var(--tm-surface-1, #ffffff);
  }
  .tm-tp-modal-overlay {
    background: rgba(0, 0, 0, 0.62);
  }
}