/**
 * OCR 用户同意弹窗样式
 * @module ocr-consent
 * @version 1.1.0
 * @date 2026-01-29
 * @compliance CSS基线规则 - 使用设计令牌，禁止硬编码px值
 */

/* ============================================================
   弹窗遮罩层
   ============================================================ */

.ocr-consent-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-overlay, rgba(0, 0, 0, 0.5));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: var(--space-4);
  animation: ocr-fade-in 0.2s ease-out;
}

@keyframes ocr-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ============================================================
   弹窗主体
   ============================================================ */

.ocr-consent-modal {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  max-width: var(--m-max-width);
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: ocr-slide-up 0.3s ease-out;
}

@keyframes ocr-slide-up {
  from {
    opacity: 0;
    transform: translateY(var(--spacing-lg));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   弹窗头部
   ============================================================ */

.ocr-consent-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--border-width-sm) solid var(--color-border);
}

.ocr-consent-icon {
  font-size: var(--text-2xl, 1.5rem);
  line-height: 1;
}

.ocr-consent-title {
  flex: 1;
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text);
}

.ocr-consent-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-xl);
  height: var(--spacing-xl);
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--text-2xl, 1.5rem);
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.ocr-consent-close:hover {
  background-color: var(--color-surface-hover);
  color: var(--color-text);
}

.ocr-consent-close:focus {
  outline: var(--focus-ring-width) solid var(--color-primary);
  outline-offset: var(--focus-ring-offset);
}

/* ============================================================
   弹窗内容
   ============================================================ */

.ocr-consent-body {
  padding: var(--space-5);
  overflow-y: auto;
}

.ocr-consent-body > p {
  margin: 0 0 var(--space-4);
  color: var(--color-text);
  line-height: var(--leading-relaxed);
}

.ocr-consent-list {
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}

.ocr-consent-list li {
  position: relative;
  padding-left: var(--space-5);
  margin-bottom: var(--space-3);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

.ocr-consent-list li::before {
  content: "•";
  position: absolute;
  left: var(--space-2);
  color: var(--color-primary);
  font-weight: bold;
}

.ocr-consent-list li:last-child {
  margin-bottom: 0;
}

.ocr-consent-list strong {
  color: var(--color-text);
  font-weight: var(--font-medium);
}

/* ============================================================
   同意复选框
   ============================================================ */

.ocr-consent-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background-color: var(--color-surface-secondary);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.ocr-consent-checkbox:hover {
  background-color: var(--color-surface-hover);
}

.ocr-consent-checkbox input[type="checkbox"] {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.125rem;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.ocr-consent-checkbox span {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

.ocr-consent-checkbox a {
  color: var(--color-primary);
  text-decoration: none;
}

.ocr-consent-checkbox a:hover {
  text-decoration: underline;
}

/* ============================================================
   弹窗底部
   ============================================================ */

.ocr-consent-footer {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: var(--border-width-sm) solid var(--color-border);
  background-color: var(--color-surface-secondary);
}

.ocr-consent-footer .btn {
  flex: 1;
}

.ocr-consent-manual {
  /* 手动填写按钮 - 使用次要样式 */
}

.ocr-consent-agree {
  /* 同意按钮 - 使用主要样式 */
}

.ocr-consent-agree:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================================
   OCR 进度指示器
   ============================================================ */

.ocr-progress-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-overlay-dark, rgba(0, 0, 0, 0.7));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: calc(var(--z-modal) + 1);
}

.ocr-progress-content {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
  max-width: 20rem;
  width: 90%;
}

.ocr-progress-spinner {
  width: var(--spacing-3xl);
  height: var(--spacing-3xl);
  border: var(--border-width-lg) solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: var(--radius-full);
  animation: ocr-spin 1s linear infinite;
  margin: 0 auto var(--space-4);
}

@keyframes ocr-spin {
  to {
    transform: rotate(360deg);
  }
}

.ocr-progress-text {
  color: var(--color-text);
  font-size: var(--text-base);
  margin-bottom: var(--space-3);
}

.ocr-progress-bar {
  width: 100%;
  height: 0.375rem;
  background-color: var(--color-surface-secondary);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.ocr-progress-bar-fill {
  height: 100%;
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}

.ocr-progress-percent {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ============================================================
   OCR 结果提示
   ============================================================ */

.ocr-result-toast {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  z-index: calc(var(--z-modal) + 2);
  animation: ocr-toast-in 0.3s ease-out;
}

@keyframes ocr-toast-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(var(--spacing-lg));
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.ocr-result-toast--success {
  border-left: var(--spacing-xs) solid var(--color-success);
}

.ocr-result-toast--error {
  border-left: var(--spacing-xs) solid var(--color-error);
}

.ocr-result-toast--warning {
  border-left: var(--spacing-xs) solid var(--color-warning);
}

.ocr-result-icon {
  font-size: var(--text-xl, 1.25rem);
  line-height: 1;
}

.ocr-result-message {
  color: var(--color-text);
  font-size: var(--text-sm);
}

/* ============================================================
   移动端适配
   ============================================================ */

@media (max-width: 640px) {
  .ocr-consent-overlay {
    padding: var(--space-4);
    /* 居中显示，避免被底部导航栏遮挡 */
    align-items: center;
    /* 确保弹窗在底部导航栏之上 */
    padding-bottom: calc(var(--space-4) + var(--m-bottom-nav-height));
  }

  .ocr-consent-modal {
    /* 限制移动端弹窗宽度为屏幕的 80%（最小化贴边问题）并设置合理的最大值 */
    width: 80%;
    max-width: 420px;
    box-sizing: border-box;
    margin: 0 auto;
    max-height: 80vh;
    /* 居中显示时使用圆角 */
    border-radius: var(--radius-lg);
    animation: ocr-slide-up-mobile 0.3s ease-out;
  }

  @keyframes ocr-slide-up-mobile {
    from {
      opacity: 0;
      transform: translateY(var(--spacing-lg));
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .ocr-consent-header {
    padding: var(--space-4);
  }

  .ocr-consent-body {
    padding: var(--space-4);
  }

  .ocr-consent-footer {
    flex-direction: column;
    padding: var(--space-4);
  }

  .ocr-consent-footer .btn {
    width: 100%;
  }

  .ocr-result-toast {
    left: var(--space-4);
    right: var(--space-4);
    transform: none;
    bottom: var(--space-4);
  }

  @keyframes ocr-toast-in {
    from {
      opacity: 0;
      transform: translateY(var(--spacing-lg));
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* ============================================================
   暗色模式适配
   ============================================================ */

@media (prefers-color-scheme: dark) {
  .ocr-consent-overlay {
    background-color: var(--color-overlay-dark, rgba(0, 0, 0, 0.7));
  }

  .ocr-progress-overlay {
    background-color: var(--color-overlay-darker, rgba(0, 0, 0, 0.85));
  }
}