/* studio.css — 工作台专用样式 */
@reference "../index.css";

/* Prompt 编辑器 */
.prompt-editor {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  background: oklch(0.20 0.011 265 / 0.6);
  border: 1px solid var(--color-hairline-soft);
  border-radius: 0.5rem;
  padding: 0.75rem;
  color: var(--color-text);
}

/* 强调色 */
.accent-gradient {
  background: linear-gradient(180deg, var(--color-accent-2), var(--color-accent));
  color: oklch(0.14 0 0);
}

.accent-gradient-text {
  color: var(--color-accent-2);
}

/* 片段卡片 */
.segment-card {
  background: linear-gradient(180deg, oklch(0.22 0.012 265 / 0.5), oklch(0.20 0.012 265 / 0.35));
  border: 1px solid var(--color-hairline-soft);
  border-radius: 0.75rem;
}

/* 面板底色 */
.studio-panel {
  background: var(--color-bg-grad-a);
  border-color: var(--color-hairline);
}

/* 呼吸灯动画 — 用于任务雷达 */
@keyframes breathe {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}

.animate-breathe {
  animation: breathe 2s ease-in-out infinite;
}

/* 脉冲进度条 */
@keyframes progress-pulse {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

.animate-progress-pulse {
  animation: progress-pulse 1.5s ease-in-out infinite;
}

/* shot status pulse */
@keyframes shot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.animate-shot-pulse {
  animation: shot-pulse 1.8s ease-in-out infinite;
}

/* shimmer 占位 */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.animate-shimmer {
  background: linear-gradient(90deg, transparent, oklch(1 0 0 / 0.08), transparent);
  background-size: 200% 100%;
  animation: shimmer 1.8s linear infinite;
}

@keyframes workspace-focus-flash {
  0% {
    box-shadow: 0 0 0 0 oklch(0.76 0.09 295 / 0);
    background-color: transparent;
  }
  12% {
    box-shadow:
      0 0 0 1px oklch(0.88 0.05 295 / 0.78),
      0 0 0 10px oklch(0.76 0.09 295 / 0.12),
      0 18px 36px oklch(0 0 0 / 0.38);
    background-color: oklch(0.76 0.09 295 / 0.08);
  }
  32% {
    box-shadow: 0 0 0 0 oklch(0.76 0.09 295 / 0);
    background-color: transparent;
  }
  46% {
    box-shadow:
      0 0 0 1px oklch(0.80 0.12 70 / 0.68),
      0 0 0 9px oklch(0.80 0.12 70 / 0.12),
      0 16px 34px oklch(0 0 0 / 0.34);
    background-color: oklch(0.80 0.12 70 / 0.08);
  }
  66% {
    box-shadow: 0 0 0 0 oklch(0.76 0.09 295 / 0);
    background-color: transparent;
  }
  82% {
    box-shadow:
      0 0 0 1px oklch(0.78 0.10 155 / 0.72),
      0 0 0 8px oklch(0.78 0.10 155 / 0.12),
      0 14px 28px oklch(0 0 0 / 0.28);
    background-color: oklch(0.78 0.10 155 / 0.08);
  }
  100% {
    box-shadow: 0 0 0 0 oklch(0.76 0.09 295 / 0);
    background-color: transparent;
  }
}

.workspace-focus-flash {
  animation: workspace-focus-flash 2.4s ease-in-out forwards;
  will-change: box-shadow, background-color;
}

/* 通用按钮：sv-navbtn */
.sv-navbtn {
  font-size: 0.71875rem;
  padding: 4px 10px;
  border-radius: 5px;
  color: var(--color-text-2);
  border: 1px solid var(--color-hairline);
  background: oklch(0.22 0.011 265 / 0.5);
  transition: background .12s, color .12s;
  cursor: pointer;
}
.sv-navbtn:not(:disabled):hover {
  background: oklch(0.26 0.013 265 / 0.7);
  color: var(--color-text);
}
.sv-navbtn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 提示词 textarea — 中性低 chroma 背景，与玻璃面板协调 */
.prompt-ta {
  width: 100%;
  padding: 10px 12px;
  font-size: 0.78125rem;
  line-height: 1.65;
  color: var(--color-text);
  background: linear-gradient(180deg, oklch(0.225 0.003 285 / 0.55), oklch(0.195 0.003 285 / 0.4));
  border: 1px solid var(--color-hairline-soft);
  border-radius: 8px;
  font-family: var(--font-sans);
  resize: vertical;
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.03);
  outline: none;
}
.prompt-ta:focus {
  border-color: var(--color-accent-soft);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.04), 0 0 0 3px var(--color-accent-dim);
}
.prompt-ta:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 主题化 range slider — 用 accent 色填充已选区段 */
.theme-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 999px;
  background: oklch(0.30 0.010 265 / 0.7);
  outline: none;
  cursor: pointer;
}
.theme-slider:focus-visible {
  box-shadow: 0 0 0 3px var(--color-accent-dim);
}
.theme-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--color-accent-2), var(--color-accent));
  border: 1px solid var(--color-accent-soft);
  box-shadow: 0 2px 6px -2px var(--color-accent-glow), inset 0 1px 0 oklch(1 0 0 / 0.35);
  cursor: pointer;
  margin-top: -5px;
}
.theme-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--color-accent-2), var(--color-accent));
  border: 1px solid var(--color-accent-soft);
  box-shadow: 0 2px 6px -2px var(--color-accent-glow), inset 0 1px 0 oklch(1 0 0 / 0.35);
  cursor: pointer;
}
.theme-slider::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: oklch(0.30 0.010 265 / 0.7);
}
.theme-slider:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 对话编辑器输入框 — 与玻璃面板协调的中性低 chroma 背景 */
.dlg-input {
  padding: 5px 10px;
  font-size: 0.78125rem;
  line-height: 1.4;
  color: var(--color-text);
  background: linear-gradient(180deg, oklch(0.20 0.011 265 / 0.6), oklch(0.18 0.010 265 / 0.45));
  border: 1px solid var(--color-hairline-soft);
  border-radius: 6px;
  outline: none;
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.03);
  transition: border-color .12s, box-shadow .12s;
}
.dlg-input::placeholder {
  color: var(--color-text-4);
}
.dlg-input:focus {
  border-color: var(--color-accent-soft);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.04), 0 0 0 3px var(--color-accent-dim);
}
.dlg-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.dlg-input--speaker {
  color: var(--color-accent-2);
  font-weight: 500;
}

/* === Agent Handoff Hint ===
 * 文件分析成功后引导用户去 agent 侧的一次性动效。
 * 卡片贴向右侧 agent 面板，左下→右上 fade-in，尾巴指向面板，
 * 6.5s 后自动 fade-out；点击 X 或按 Esc 立即关闭。
 */
@keyframes handoff-card-in {
  0% {
    opacity: 0;
    transform: translateY(8px) translateX(12px) scale(0.96);
    filter: blur(6px);
  }
  60% {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
    filter: blur(0);
  }
}
@keyframes handoff-card-out {
  0% { opacity: 1; transform: translateY(0) translateX(0) scale(1); }
  100% { opacity: 0; transform: translateY(-4px) translateX(8px) scale(0.98); }
}
@keyframes handoff-headline-rise {
  0% { opacity: 0; transform: translateY(6px); letter-spacing: 0.05em; }
  100% { opacity: 1; transform: translateY(0); letter-spacing: 0.01em; }
}
@keyframes handoff-subtitle-rise {
  0% { opacity: 0; transform: translateY(4px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes handoff-arc-sweep {
  0% { transform: translateX(-110%); opacity: 0; }
  20% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateX(110%); opacity: 0; }
}
@keyframes handoff-orb-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
@keyframes handoff-tail-pulse {
  0%, 100% {
    transform: translateX(0);
    opacity: 0.85;
  }
  50% {
    transform: translateX(4px);
    opacity: 1;
  }
}

.agent-handoff-card {
  animation: handoff-card-in 540ms cubic-bezier(0.22, 1.2, 0.36, 1) both;
  will-change: opacity, transform, filter;
}
.agent-handoff-card[data-leaving="true"] {
  animation: handoff-card-out 280ms ease-in forwards;
}
.agent-handoff-headline {
  animation: handoff-headline-rise 720ms cubic-bezier(0.22, 1, 0.36, 1) 180ms both;
}
.agent-handoff-subtitle {
  animation: handoff-subtitle-rise 640ms cubic-bezier(0.22, 1, 0.36, 1) 320ms both;
}
.agent-handoff-arc {
  animation: handoff-arc-sweep 1.6s cubic-bezier(0.4, 0, 0.2, 1) 280ms both;
}
.agent-handoff-orb {
  animation: handoff-orb-float 2.4s ease-in-out infinite;
}
.agent-handoff-tail-line,
.agent-handoff-tail-arrow {
  animation: handoff-tail-pulse 1.6s ease-in-out 480ms infinite;
}

@media (prefers-reduced-motion: reduce) {
  .animate-breathe,
  .animate-progress-pulse,
  .agent-handoff-card,
  .agent-handoff-headline,
  .agent-handoff-subtitle,
  .agent-handoff-arc,
  .agent-handoff-orb,
  .agent-handoff-tail-line,
  .agent-handoff-tail-arrow,
  .animate-shot-pulse,
  .animate-shimmer,
  .workspace-focus-flash {
    animation: none !important;
  }
  .agent-handoff-card { opacity: 1; }
}
