/**
 * Enterprise SaaS — Visual "SlideFlow Vivo" (Fase Sensorial)
 * Transições 0.5s ease-out, respiração no background do dashboard, skeletons em loadings.
 * Nada brusco; o sistema transmite calma e elegância.
 */

/* ——— Transições globais (0.5s ease-out para hover e troca de telas) ——— */
:root {
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: ease-out;
  --transition-default: 0.5s var(--ease-out);
  --transition-fast: 0.25s var(--ease-out);
  --breathing-duration: 12s;
}

button,
a.btn,
input[type="submit"],
input[type="button"],
[role="button"],
.primary,
.btn-primary,
.btn-google,
.mode-btn,
.topbar .btn-topbar {
  transition: transform var(--transition-fast), box-shadow var(--transition-default), background var(--transition-fast), border-color var(--transition-fast);
}

button:hover,
a.btn:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.primary:hover,
.btn-primary:hover,
.btn-google:hover,
.mode-btn:hover,
.topbar .btn-topbar:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

button:active,
a.btn:active,
.primary:active,
.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Elementos interativos: transição suave */
input,
textarea,
select,
.card,
.panel-left,
.panel-right,
.login-card,
.wizard-content {
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

/* ——— Skeleton Screen (pulsação sutil para loadings da IA) ——— */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-bg-light, #2a2a2a) 0%,
    var(--color-bg-medium, #252525) 50%,
    var(--color-bg-light, #2a2a2a) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-pulse 1.5s var(--ease-smooth) infinite;
  border-radius: 6px;
}

.skeleton-text {
  height: 1em;
  margin-bottom: 0.5rem;
}

.skeleton-title {
  height: 1.5em;
  width: 60%;
  margin-bottom: 1rem;
}

.skeleton-block {
  height: 4rem;
}

@keyframes skeleton-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Overlay de loading IA */
.ai-loading-skeleton {
  padding: 1.5rem;
  border-radius: 8px;
  border: 1px solid var(--color-border, #404040);
}

.ai-loading-skeleton .skeleton-title { width: 70%; }
.ai-loading-skeleton .skeleton-text { width: 100%; }
.ai-loading-skeleton .skeleton-text:nth-child(3) { width: 90%; }
.ai-loading-skeleton .skeleton-text:nth-child(4) { width: 80%; }
.ai-loading-skeleton .skeleton-block { margin-top: 1rem; }

/* ——— Micro-interações: sombras suaves (soft shadows) ——— */
.card,
.login-card,
.wizard-content,
.panel-left .sidebar-section {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  transition: box-shadow var(--transition-default);
}

.card:hover,
.login-card:hover,
.wizard-content:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

/* ——— Respiração no background do dashboard (drift de gradiente / glow, ciclo 12s) ——— */
.product-dashboard,
.product-project-dashboard {
  position: relative;
  overflow: hidden;
}

.product-dashboard::before,
.product-project-dashboard::before {
  content: '';
  position: absolute;
  inset: -50%;
  z-index: 0;
  background: radial-gradient(
    ellipse 120% 80% at 50% 50%,
    rgba(59, 130, 246, 0.04) 0%,
    rgba(99, 102, 241, 0.03) 40%,
    transparent 70%
  );
  animation: dashboard-breathing var(--breathing-duration) ease-in-out infinite;
  pointer-events: none;
}

.product-dashboard > *,
.product-project-dashboard > * {
  position: relative;
  z-index: 1;
}

@keyframes dashboard-breathing {
  0%, 100% { opacity: 0.6; transform: scale(1) translate(0, 0); }
  33% { opacity: 1; transform: scale(1.02) translate(1%, 0.5%); }
  66% { opacity: 0.8; transform: scale(0.98) translate(-0.5%, -0.5%); }
}

/* ——— Loader IA: skeleton pulsante em vez de spinner ——— */
.ai-loader-overlay .ai-loader-spinner,
.ai-loader-overlay .ai-loader-content:has(.ai-loader-spinner) .ai-loader-spinner {
  display: none;
}

.ai-loader-overlay .ai-loader-content:not(:has(.ai-progress-steps)) .ai-loader-title,
.ai-loader-overlay .ai-loader-content:not(:has(.ai-progress-steps)) .ai-loader-desc {
  margin-bottom: 1rem;
}

.ai-loading-skeleton-overlay {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 0;
}

.ai-loading-skeleton-overlay .skeleton-title { width: 70%; }
.ai-loading-skeleton-overlay .skeleton-text { width: 100%; }
.ai-loading-skeleton-overlay .skeleton-text:nth-child(3) { width: 90%; }
.ai-loading-skeleton-overlay .skeleton-block { margin-top: 0.5rem; height: 3rem; }

/* Progresso composto: etapas com check suave */
#ai-progress-steps.ai-progress-steps,
.ai-loader-content .ai-progress-steps {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.5rem;
  max-width: 320px;
}

.ai-step {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  opacity: 0.6;
  transition: opacity var(--transition-default);
}

.ai-step.active,
.ai-step.done {
  opacity: 1;
}

.ai-step-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--color-bg-medium, #252525);
  border: 1px solid var(--color-border, #404040);
  font-size: 0.75rem;
  color: var(--color-primary, #3b82f6);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.ai-step.done .ai-step-check {
  background: rgba(34, 197, 94, 0.2);
  border-color: rgb(34, 197, 94);
  color: rgb(34, 197, 94);
}

.ai-step-label {
  font-size: 0.95rem;
  color: var(--color-text, #e5e5e5);
}

/* Troca de tela: transição suave */
.product-dashboard,
.product-hub,
.product-project-dashboard,
.product-login-page,
main[class^="product-"] {
  transition: opacity var(--transition-default);
}