/* =============================================================================
   安澜心理 ANLANCE — 咨询师端工作台原型 · 交互增强层 (v0.2)
   -----------------------------------------------------------------------------
   定位：Extension 模式。只补齐「缺失的交互状态」，不修改任何设计 token。
   纪律：色值/间距/圆角/缓动 一律引用 tokens.css 变量，零硬编码、零新色。
   覆盖：按压态 / 禁用态 / 键盘焦点 / 骨架屏 / 进度条 / Toast / 确认弹窗
   动效：极轻。仅必要状态过渡，120–200ms，无弹跳、无装饰性入场动画。
   ============================================================================= */

/* ============================================================ 1. 按压态
   Extension 契约：沿用 .btn 已有 transition 属性，只追加 transform，
   避免重复声明 transition 造成覆盖冲突。                                   */
.btn:active,
.link-btn:active,
.chip:active,
.tab:active {
  transform: translateY(1px);
}

/* 主按钮按下去要「沉」一点，用内阴影而非缩放，避免文字抖动 */
.btn--primary:active {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .18);
}

.btn--danger:active {
  box-shadow: inset 0 1px 3px rgba(179, 38, 30, .16);
}

/* 卡片类可点击元素：整体轻微下沉，给用户「按到了」的确认感 */
.todo:active,
.row:active {
  transform: translateY(1px);
}

/* 图标按钮（通知铃等）：按下时背景加深一档 */
.topbar__bell:active {
  background: var(--line-soft);
}

/* ============================================================ 2. 禁用态
   原生 :disabled 与既有的 [aria-disabled] 表现保持一致。                   */
.btn:disabled,
.btn[aria-disabled="true"]:disabled {
  opacity: .55;
  cursor: not-allowed;
  background: var(--surface-2);
  color: var(--ink-300);
  border-color: var(--line-soft);
  box-shadow: none;
  transform: none;
}

.btn--primary:disabled,
.btn--primary[aria-disabled="true"]:disabled {
  background: var(--anlan-blue-100);
  border-color: var(--anlan-blue-100);
  color: var(--ink-300);
}

/* 禁用时不触发任何按压反馈 */
.btn:disabled:active {
  transform: none;
  box-shadow: none;
}

/* 表单控件禁用态 */
input:disabled,
select:disabled,
textarea:disabled {
  background: var(--surface-2);
  color: var(--ink-300);
  cursor: not-allowed;
  border-color: var(--line-soft);
}

/* ============================================================ 3. 键盘焦点
   仅在键盘操作时出现，鼠标点击不显示，避免干扰视觉。                        */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.link-btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
.tab:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius);
}

/* 已有 focus 样式的元素，用 inherit 保底，避免焦点环被裁切 */
.card:focus-visible,
.row:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* ============================================================ 4. 骨架屏
   用于 AI 督导报告生成中的内容占位。极轻微光扫过，不刺眼。                 */
.skeleton {
  display: block;
  border-radius: 6px;
  background: var(--surface-2);
  background-image: linear-gradient(
    90deg,
    var(--surface-2) 0%,
    var(--line-soft) 50%,
    var(--surface-2) 100%
  );
  background-size: 200% 100%;
  animation: anlan-shimmer 1.4s var(--ease-standard) infinite;
}

.skeleton--text { height: 12px; margin-bottom: var(--space-2); }
.skeleton--text:last-child { margin-bottom: 0; }
.skeleton--title { height: 18px; width: 45%; margin-bottom: var(--space-4); }
.skeleton--avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
}

@keyframes anlan-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 骨架屏容器：让整块报告区在生成中保持结构稳定，避免布局跳动 */
.skeleton-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) 0;
}

/* ============================================================ 5. 进度条
   AI 督导生成的阶段进度。高度 3px，极细，不抢视觉。                        */
.progress {
  margin-top: var(--space-4);
}

.progress__track {
  height: 3px;
  border-radius: 999px;
  background: var(--anlan-blue-50);
  overflow: hidden;
}

.progress__bar {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--anlan-blue);
  transition: width 400ms var(--ease-standard);
}

.progress__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--ink-500);
}

.progress__stage {
  color: var(--anlan-blue);
  font-weight: var(--fw-medium);
}

.progress__pct {
  font-family: var(--font-mono);
  color: var(--ink-500);
}

/* 生成完成后进度条转为「已完成」态 */
.progress.is-done .progress__bar {
  background: var(--ok);
}

/* ============================================================ 6. Toast
   操作结果反馈。右下角浮出，不打断当前操作。                               */
.toast-host {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-end;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  max-width: 380px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  font-size: var(--text-sm);
  color: var(--ink-900);
  pointer-events: auto;

  /* 极轻入场：只做淡入 + 8px 上移，200ms */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--motion-base) var(--ease-out),
              transform var(--motion-base) var(--ease-out);
}

.toast.is-in {
  opacity: 1;
  transform: translateY(0);
}

.toast.is-out {
  opacity: 0;
  transform: translateY(4px);
}

.toast__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--ok);
}

.toast--warn .toast__icon { color: var(--warn); }
.toast--risk .toast__icon { color: var(--risk); }
.toast--info .toast__icon { color: var(--anlan-blue); }

.toast__text {
  flex: 1;
  line-height: 1.5;
}

.toast__action {
  flex-shrink: 0;
  padding: 0 var(--space-2);
  min-height: 32px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--anlan-blue);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-out);
}

.toast__action:hover { background: var(--anlan-blue-50); }
.toast__action:active { transform: translateY(1px); }

/* ============================================================ 7. 确认弹窗
   破坏性操作（删除档案 / 清空记录）二次确认。
   支持「输入代号验证」——心理咨询行业对数据操作需格外谨慎。                 */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: rgba(13, 31, 60, .38);
  backdrop-filter: blur(3px);

  opacity: 0;
  transition: opacity var(--motion-base) var(--ease-out);
}

.modal[hidden] { display: none; }
.modal.is-in { opacity: 1; }

.modal__panel {
  width: 100%;
  max-width: 420px;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 24px 60px rgba(13, 31, 60, .24);

  transform: translateY(8px);
  transition: transform var(--motion-base) var(--ease-out);
}

.modal.is-in .modal__panel { transform: translateY(0); }

.modal__title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  letter-spacing: .5px;
  color: var(--ink-900);
}

.modal__desc {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--ink-700);
}

/* 需要验证时，高亮待输入的代号 */
.modal__verify {
  margin-bottom: var(--space-4);
}

.modal__verify-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  color: var(--ink-500);
}

.modal__verify-code {
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  color: var(--risk);
}

.modal__input {
  width: 100%;
  min-height: var(--tap-min);
  padding: 0 var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink-900);
  font-size: var(--text-sm);
  font-family: var(--font-mono);
  transition: border-color var(--motion-fast) var(--ease-out);
}

.modal__input:focus {
  outline: none;
  border-color: var(--anlan-blue);
  box-shadow: var(--shadow-focus);
}

.modal__input.is-error {
  border-color: var(--risk);
}

.modal__error {
  display: none;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--risk);
}

.modal__error.is-shown { display: block; }

.modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

/* ============================================================ 8. 无障碍降级
   尊重系统「减少动态效果」设置：关闭所有非必要动画，保留状态变化。          */
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
  .progress__bar { transition: none; }
  .toast,
  .toast.is-in,
  .toast.is-out,
  .modal,
  .modal__panel,
  .modal.is-in .modal__panel {
    transition: none;
    transform: none;
  }
  .btn:active,
  .link-btn:active,
  .chip:active,
  .tab:active,
  .todo:active,
  .row:active {
    transform: none;
  }
}

/* ============================================================ 9. 小屏适配
   Toast 与弹窗在窄屏下贴边，避免溢出。                                      */
@media (max-width: 760px) {
  .toast-host {
    right: var(--space-4);
    left: var(--space-4);
    bottom: var(--space-4);
    align-items: stretch;
  }
  .toast { max-width: none; }
  .modal { padding: var(--space-4); }
}