/*
 * 立劢文旅AI平台 - 公共组件样式
 *
 * 包含：按钮、输入框、卡片、标签、表格等基础组件
 */

/* ===== 基础重置 ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  height: 100%;
  font-family: var(--font-family);
  color: var(--color-text-primary);
  background-color: var(--color-page-bg);
  overflow: hidden;
  overscroll-behavior: none;
}

/*
 * ===== 共享浮层基线 =====
 * 浮层体系统一分为：
 * 1. toast：短时反馈
 * 2. modal：正式居中弹窗
 * 3. lite-dialog：页面内轻引导浮层
 *
 * 所有浮层都必须沿用同一套圆角、边框与阴影语言，
 * 以应用中心「快捷应用设置」引导层作为当前基线。
 */
:root {
  --proto-layer-radius: 12px;
  --proto-layer-control-radius: 8px;
  --proto-layer-surface: var(--color-island-bg);
  --proto-layer-border: color-mix(in srgb, var(--color-divider) 82%, var(--color-border));
  --proto-layer-control-bg: color-mix(in srgb, var(--color-input-bg) 92%, var(--color-island-bg));
  --proto-layer-control-border: color-mix(in srgb, var(--color-divider) 88%, var(--color-primary) 12%);
  --proto-layer-overlay: rgba(10, 15, 32, 0.34);
  --proto-layer-shadow-soft: 0 12px 28px color-mix(in srgb, var(--color-text-primary) 7%, transparent);
  --proto-layer-shadow-formal: 0 22px 48px color-mix(in srgb, var(--color-text-primary) 11%, transparent);
  --proto-layer-highlight:
    inset 0 1px 0 color-mix(in srgb, white 7%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--color-card-border) 32%, transparent);
  --proto-layer-top-anchor: 24px;
  --proto-layer-top-anchor-compact: 16px;
  --proto-layer-toast-max-width: min(360px, calc(100vw - 32px));
  --proto-layer-toast-top: var(--proto-layer-top-anchor);
}

[data-theme="dark"] {
  --proto-layer-border: color-mix(in srgb, var(--color-card-border) 90%, white 5%);
  --proto-layer-control-bg: color-mix(in srgb, var(--color-input-bg) 86%, var(--color-island-bg));
  --proto-layer-control-border: color-mix(in srgb, var(--color-card-border) 92%, white 8%);
  --proto-layer-overlay: rgba(6, 9, 19, 0.46);
  --proto-layer-shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.2);
  --proto-layer-shadow-formal: 0 18px 42px rgba(0, 0, 0, 0.28);
  --proto-layer-highlight:
    inset 0 1px 0 color-mix(in srgb, white 5%, transparent),
    inset 0 0 0 1px color-mix(in srgb, white 4%, transparent);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover {
  color: var(--color-primary-hover);
}

/* ===== 按钮 ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 0 var(--space-lg);
  height: 36px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  user-select: none;
  line-height: 1;
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}
.btn-primary:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}
.btn-primary:active {
  background-color: var(--color-primary-active);
}

.btn-default {
  background-color: var(--color-input-bg);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}
.btn-default:hover {
  color: var(--color-primary);
  border-color: var(--color-primary-border);
}

.btn-text {
  background: transparent;
  color: var(--color-text-secondary);
  border: none;
  padding: 0 var(--space-sm);
}
.btn-text:hover {
  color: var(--color-primary);
}

/* ===== .btn-danger（2026-04-24 新增 · 详见 reusable/button-variants-baseline.md） =====
 * 用于"破坏性/不可逆"动作（驳回 / 删除 / 下架 / 退款 / 强制踢出）的主按钮
 * 全站禁用浏览器默认的 disabled 样式（浏览器默认浅灰白底在暗色下会失效）
 * 默认：红底白字 / hover：加深 / disabled：浅红底 + 半透白字（保留色相识别）
 * ⚠️ disabled 态用 .btn.btn-danger:disabled 双类特异性（0,2,1），压过下方 .btn:disabled（0,1,1）的 opacity:0.5 */
.btn-danger {
  background-color: var(--color-error);
  color: var(--color-text-inverse, #fff);
  border-color: var(--color-error);
}
.btn-danger:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--color-error) 88%, black);
  border-color: color-mix(in srgb, var(--color-error) 88%, black);
}
.btn-danger:active:not(:disabled) {
  background-color: color-mix(in srgb, var(--color-error) 80%, black);
}
.btn.btn-danger:disabled {
  /* override shared .btn:disabled 的 opacity:0.5（叠半透明白在暗色下全瞎），改用"浅红 + 半透白字" */
  background-color: rgba(245, 34, 45, 0.4);
  border-color: rgba(245, 34, 45, 0.4);
  color: rgba(255, 255, 255, 0.7);
  opacity: 1;
  cursor: not-allowed;
}
[data-theme="dark"] .btn.btn-danger:disabled {
  background-color: rgba(245, 34, 45, 0.28);
  border-color: rgba(245, 34, 45, 0.3);
  color: rgba(255, 255, 255, 0.55);
}

.btn-lg {
  height: 44px;
  padding: 0 var(--space-xl);
  font-size: var(--font-size-lg);
  border-radius: var(--radius-md);
}

.btn-sm {
  height: 28px;
  padding: 0 var(--space-md);
  font-size: var(--font-size-xs);
}

.btn-block {
  width: 100%;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===== 列表行操作下拉菜单（.row-action-menu） =====
 * 2026-04-19 从成员管理 .mm-row-menu 抽离为平台复用组件
 * 适用："管理型"列表页行尾三个点按钮点击后弹出的菜单（见 reusable/list-row-actions-baseline.md）
 * 定位由 shared/scripts/row-action-menu.js 用 fixed + JS 计算
 */
.row-action-menu {
  position: fixed;
  z-index: 40;
  min-width: 112px;
  padding: 4px;
  background: var(--color-island-bg);
  border: 1px solid var(--color-card-border);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: inherit;
}

.row-action-menu[hidden] {
  display: none;
}

.row-action-menu button {
  border: none;
  background: transparent;
  padding: 8px 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
  cursor: pointer;
  border-radius: 6px;
  font-family: inherit;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.row-action-menu button:hover {
  background: var(--color-menu-hover);
}

.row-action-menu button.is-danger {
  color: var(--color-error);
}

.row-action-menu button.is-danger:hover {
  background: color-mix(in srgb, var(--color-error) 8%, transparent);
}

.row-action-menu-sep {
  height: 1px;
  background: var(--color-divider);
  margin: 4px 2px;
}

/* ===== 输入框 ===== */
.input-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.input-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.input {
  width: 100%;
  height: 40px;
  padding: 0 var(--space-md);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  background-color: var(--color-input-bg);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  font-family: inherit;
}
.input::placeholder {
  color: var(--color-input-placeholder);
}
.input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}
.input:hover:not(:focus) {
  border-color: var(--color-primary-border);
}

.input-wrapper {
  position: relative;
}
.input-wrapper .input {
  padding-right: 40px;
}
.input-icon-right {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
}
.input-icon-right:hover {
  color: var(--color-text-secondary);
}

.input-error {
  border-color: var(--color-error) !important;
}
.input-error:focus {
  box-shadow: 0 0 0 3px rgba(245, 34, 45, 0.08) !important;
}
.error-text {
  font-size: var(--font-size-xs);
  color: var(--color-error);
}

/* ===== 复选框 ===== */
.checkbox-group {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  user-select: none;
}
.checkbox-group input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* ===== 卡片 ===== */
.card {
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}

/* ===== 分隔线 ===== */
.divider {
  height: 1px;
  background-color: var(--color-divider);
  margin: var(--space-lg) 0;
}

/* ===== 标签 ===== */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: var(--font-size-xs);
  border-radius: var(--radius-xs);
  line-height: 1.6;
}
.tag-default {
  background-color: var(--color-tag-default-bg);
  color: var(--color-tag-default-text);
}
.tag-primary {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}
.tag-success {
  background-color: rgba(82, 196, 26, 0.08);
  color: var(--color-success);
}
.tag-warning {
  background-color: rgba(250, 173, 20, 0.08);
  color: var(--color-warning);
}
.tag-error {
  background-color: rgba(245, 34, 45, 0.08);
  color: var(--color-error);
}

/* ===== 工具类 ===== */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--color-text-secondary); }
.text-sm { font-size: var(--font-size-sm); }
.text-xs { font-size: var(--font-size-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }
.w-full { width: 100%; }

/* 面包屑（Breadcrumb）基线已在 shared/styles/layout.css 定义（2026-04-23 重构）
 * 冻结文档：reusable/breadcrumb-baseline.md */

/* ===== Tooltip 文字提示弹窗 v6（2026-04-25 默认正下方 + 极致紧贴 + 唯一弹窗强制 · 详见 reusable/tooltip-baseline.md） =====
 * 触发：任意元素带 data-tooltip="文字" + hover/focus 双触发
 * 视觉（v4 沿用）：12px / 400 / heading 柔和灰 / padding 5/10 / radius-sm 6 / max-width 280 / text-align left
 * 位置优先级规则（v6 强制 · 业务页必须遵守）：
 *   1. 默认 bottom（正下方居中）· 视觉对齐母体最强
 *   2. 下方有遮挡 → 用 top（正上方居中）
 *   3. 上下都有遮挡 → 用 right-bottom / right-top / left-bottom / left-top
 *   4. modifier 列表（共 6 方向）：bottom（默认）/ top / right-bottom / right-top / left-bottom / left-top
 * gap 1px（v6 由 3px 缩小 · 极致紧贴母体 · 让 tooltip 视觉上"挂在"按钮边缘）
 * 唯一弹窗规则（v6 强制 · 不可豁免）：
 *   - 同一交互对象（按钮/链接/浮层）只允许一个 tooltip 视觉形态
 *   - 禁止：原生 title + data-tooltip 共存 · 业务级浮窗（自造 div tooltip）+ data-tooltip 共存 · 多个 data-tooltip 嵌套
 *   - 所有 hover 显示文字的需求统一走 data-tooltip，禁止任何形式的自造（无论命名是 .xxx-tip / .xxx-tooltip / .xxx-popover 文字提示型）
 * 严禁：tooltip 内嵌 <strong> 标题行 · attr(data-tooltip) 只渲染纯文本 */
[data-tooltip]:not([data-tooltip=""]) {
  position: relative;
}
/* v6.4 · 默认 ::after 全配置 + opacity:0 hidden（参与 hover 延时 transition）
 * hover 延时设计：用户停留 ≥ 400ms 才温柔淡入 · 防"鼠标路过"误触干扰用户原本动作 */
[data-tooltip]:not([data-tooltip=""])::after {
  content: attr(data-tooltip);
  position: absolute;
  /* 默认 bottom（正下方居中）· 视觉对齐母体最强 */
  top: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--proto-layer-surface);
  color: var(--color-text-heading);
  border: 1px solid var(--proto-layer-border);
  box-shadow: var(--proto-layer-shadow-soft), var(--proto-layer-highlight);
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  max-width: 320px;           /* v6.5 · 280→320 让中等长度文字一行显示 · 长文字超过才换行 */
  width: max-content;
  text-align: left;
  white-space: normal;
  word-break: break-word;
  pointer-events: none;
  z-index: 99999;             /* 高于任何 modal/drawer/popover */
  /* 默认隐藏 · 离开时 opacity 立即淡出 · visibility 等淡出完成才切到 hidden */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}
/* hover/focus · 延时 200ms 后温柔淡入 */
[data-tooltip]:not([data-tooltip=""]):hover::after,
[data-tooltip]:not([data-tooltip=""]):focus-visible::after {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.18s ease 0.2s, visibility 0s linear 0.2s;
}
/* 输入框功能按钮区作用域：默认改正上方
 * 适用：ai-chat / ai-image / ai-video / asset-upload 4 页 .chat-input-features 工具栏
 * v6.4 · 直接 override 默认 ::after（不依赖 :hover）让延时 transition 也能工作 */
.chat-input-features [data-tooltip]:not([data-tooltip=""])::after {
  top: auto;
  right: auto;
  bottom: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%);
}
/* 8 方向 modifier · gap 全 1px 紧贴 · v6.4 直接 override 默认 ::after */
[data-tooltip][data-tooltip-pos="top"]::after {
  top: auto;
  bottom: calc(100% + 1px);
  /* left: 50%; transform: translateX(-50%) 继承默认 */
}
[data-tooltip][data-tooltip-pos="right-bottom"]::after {
  left: calc(100% + 1px);
  transform: none;
}
[data-tooltip][data-tooltip-pos="right-top"]::after {
  top: auto;
  bottom: calc(100% + 1px);
  left: calc(100% + 1px);
  transform: none;
}
[data-tooltip][data-tooltip-pos="left-bottom"]::after {
  left: auto;
  right: calc(100% + 1px);
  transform: none;
}
[data-tooltip][data-tooltip-pos="left-top"]::after {
  top: auto;
  left: auto;
  bottom: calc(100% + 1px);
  right: calc(100% + 1px);
  transform: none;
}
[data-tooltip][data-tooltip-pos="right"]::after {
  top: 50%;
  left: calc(100% + 1px);
  bottom: auto;
  right: auto;
  transform: translateY(-50%);
}
[data-tooltip][data-tooltip-pos="left"]::after {
  top: 50%;
  left: auto;
  bottom: auto;
  right: calc(100% + 1px);
  transform: translateY(-50%);
}
/* 短文字居中对齐 modifier */
[data-tooltip][data-tooltip-align="center"]::after {
  text-align: center;
}

/* ========== Viewport Guard · v10.10（2026-04-26 · 阈值改 1080）==========
 * 浏览器内容区宽度 < 1080px 时全屏阻断 + 文字提示。
 *
 * 阈值演进：
 * - v7 (2026-04-25)：layout.css `@media (max-width: 1279px)` 旧 fallback 卡片版（已 v10.9 删除）
 * - v10.6 (2026-04-26)：阈值 < 1440 + 纯白底（用户初版决议）
 * - v10.9 (2026-04-26)：阈值降到 < 1200（用户半屏 inner=1278 实测能用）
 * - v10.10 (2026-04-26)：阈值降到 < 1080（用户决议 · 进一步放宽下限）
 *
 * 单一来源原则：全平台只有这一套 viewport guard（v10.9 已删 layout.css 旧块）
 *
 * 实现方式：纯 CSS 双伪元素方案，零 JS、零 DOM 注入、自动跟随主题色。
 * - body > *  visibility:hidden 阻断真实页面（pseudo 不算 children，不受影响）
 * - body::before 渲染主标题（上半屏）
 * - body::after  渲染副文案（下半屏，不挡点击）
 * - 暗色自动适配（用 --color-page-bg / --color-text-* token，已在 [data-theme="dark"] 重定义）
 *
 * 与 1080-1440 区间的关系：v10.7 已物理删除原 stage 2 / mobile @media。
 * 1080-1440 视口不阻断，靠列宽百分比 + content-island grid 三件套 + sidebar 用户手动收缩自适应。
 * 个别页若在该区间布局崩，单独针对该页恢复必要的 @media（不要批量回滚）。
 */
/* max-width 用 1079.98 而不是 1079 → 规避 DPR 1.5 等 sub-pixel 浏览器 innerWidth=1079 时
 * matchMedia(max-width:1079) 不命中的边界 quirk（同 v10.9 的 1199.98 修正逻辑）。
 * 1079.98 确保 ≤ 1079 整数 viewport 都阻断，1080+ 整数 viewport 都正常。*/
@media (max-width: 1079.98px) {
  body > * {
    visibility: hidden !important;
  }
  body::before {
    content: "建议使用更大的浏览器窗口";
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-page-bg, #f7f8fa);
    color: var(--color-text-primary, #1a1a2e);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    /* padding-bottom 大于 top → 内容居中点上移 ≈ 25px，给副文案让位 */
    padding: 40px 40px 90px;
  }
  body::after {
    content: "为获得最佳体验，请将浏览器窗口宽度调整至 1080 px 以上";
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary, #8c8ca1);
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
    /* padding-top 大于 bottom → 内容居中点下移 ≈ 25px，落在主标题下方 */
    padding: 90px 40px 40px;
    pointer-events: none;
  }
}