/* 版本: v2.0 - 移动到 public 目录 - 2026-02-07 */
/**
 * 直播智管 - 全局基础样式
 *
 * 包含：
 * 1. Focus Ring 样式（可访问性）
 * 2. 触摸目标尺寸增强
 * 3. iOS 安全区域适配
 * 4. 减少动画媒体查询
 * 5. 基础重置样式
 */

/* ==========================================================================
   1. Focus Ring 样式（WCAG 可访问性要求）
   ========================================================================== */

/* 默认 focus 样式 - 仅在键盘导航时显示 */
*:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
  border-radius: 4px;
}

/* 按钮/链接的 focus 样式 - 双层圆环效果 */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  box-shadow:
    0 0 0 2px #ffffff,
    0 0 0 4px #3b82f6;
}

/* 移除浏览器默认 outline，使用自定义样式 */
*:focus {
  outline: none;
}

/* ==========================================================================
   2. 触摸目标尺寸增强（移动端）
   ========================================================================== */

/* 确保所有交互元素有最小触摸目标 (44x44px) */
button,
a,
[role="button"],
[role="link"],
input[type="checkbox"],
input[type="radio"] {
  min-width: 44px;
  min-height: 44px;
}

/* 图标按钮通过 padding 扩大点击区域 */
.icon-btn,
.btn-icon-only {
  padding: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 小触摸设备上的额外安全边距 */
@media (pointer: coarse) {
  button,
  a,
  [role="button"] {
    position: relative;
  }

  button::after,
  a[href]::after,
  [role="button"]::after {
    content: '';
    position: absolute;
    inset: -4px;
  }
}

/* ==========================================================================
   3. iOS 安全区域适配
   ========================================================================== */

/* 顶部安全区域（刘海屏） */
.pt-safe {
  padding-top: env(safe-area-inset-top);
}

/* 底部安全区域（Home Indicator） */
.pb-safe {
  padding-bottom: env(safe-area-inset-bottom);
}

/* 左侧安全区域 */
.pl-safe {
  padding-left: env(safe-area-inset-left);
}

/* 右侧安全区域 */
.pr-safe {
  padding-right: env(safe-area-inset-right);
}

/* 全方向安全区域 */
.p-safe {
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* 使用 max() 确保最小间距（iOS 11+ 语法） */
@supports (padding: max(0px)) {
  .pb-safe {
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }

  .pt-safe {
    padding-top: max(16px, env(safe-area-inset-top));
  }

  /* 底部导航栏专用安全区域 */
  .safe-area-bottom {
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }

  /* 高度适配（用于占位） */
  .h-safe {
    height: max(16px, env(safe-area-inset-bottom));
  }
}

/* ==========================================================================
   4. 动画定义
   ========================================================================== */

/* 底部滑入动画 */
@keyframes slide-up-from-bottom {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.animate-slide-up-from-bottom {
  animation: slide-up-from-bottom 0.3s ease-out;
}

/* ==========================================================================
   5. 减少动画媒体查询（可访问性）
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 仅对过渡动画应用平滑滚动 */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ==========================================================================
   5. 基础重置和增强
   ========================================================================== */

/* 确保文本在移动端可读（最小 16px 防止自动缩放） */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* 改善文本渲染 */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 确保图片响应式 */
img,
video {
  max-width: 100%;
  height: auto;
}

/* 按钮重置 */
button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/* 链接重置 */
a {
  color: inherit;
  text-decoration: none;
}

/* 列表重置 */
ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   6. 实用类（配合 Tailwind 使用）
   ========================================================================== */

/* 可见性类 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.not-sr-only {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* 禁用用户选择 */
.no-select {
  user-select: none;
  -webkit-user-select: none;
}

/* 光标样式 */
.cursor-pointer {
  cursor: pointer;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

/* ==========================================================================
   7. 滚动条样式（可选）
   ========================================================================== */

/* 自定义滚动条（Chrome/Safari/Edge） */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f3f4f6;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* Firefox 滚动条 */
* {
  scrollbar-width: thin;
  scrollbar-color: #d1d5db #f3f4f6;
}

/* ==========================================================================
   8. 打印样式
   ========================================================================== */

@media print {
  .no-print {
    display: none !important;
  }

  a[href]:after {
    content: " (" attr(href) ")";
  }

  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }
}