/* Project-wide motion polish — smooth transitions & subtle dynamics */

/* ── Windows & panels ── */
.window-panel {
  transition:
    width var(--collapse-dur) var(--sw-motion-spring),
    min-width var(--collapse-dur) var(--sw-motion-spring),
    border-color var(--sw-motion-base) var(--sw-motion-soft),
    box-shadow var(--sw-motion-base) var(--sw-motion-soft),
    transform var(--sw-motion-base) var(--sw-motion-spring),
    opacity var(--sw-motion-base) var(--sw-motion-soft),
    filter var(--sw-motion-base) var(--sw-motion-soft) !important;
}

.window-header {
  transition:
    background var(--sw-motion-base) var(--sw-motion-soft),
    border-color var(--sw-motion-base) var(--sw-motion-soft) !important;
}

/* ── Sessions sidebar ── */
.session-item {
  transition:
    background var(--sw-motion-base) var(--sw-motion-soft),
    color var(--sw-motion-base) var(--sw-motion-soft),
    opacity var(--sw-motion-base) var(--sw-motion-soft),
    transform var(--sw-motion-base) var(--sw-motion-spring) !important;
}

.session-item:hover {
  transform: translateX(2px);
}

/* ── Chat messages ── */
@keyframes msg-enter {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.msg.msg-enter {
  animation: msg-enter var(--sw-motion-base) var(--sw-motion-spring) both;
}

/* ── Composer ── */
.composer-bar {
  transition:
    border-color var(--sw-motion-base) var(--sw-motion-soft),
    box-shadow var(--sw-motion-base) var(--sw-motion-soft),
    background var(--sw-motion-base) var(--sw-motion-soft) !important;
}

/* ── Mode calibration (no lift, smooth crossfade) ── */
.calib-mode-seg {
  transition:
    background var(--sw-motion-base) var(--sw-motion-spring),
    opacity var(--sw-motion-base) var(--sw-motion-soft),
    filter var(--sw-motion-base) var(--sw-motion-soft) !important;
}

html[data-agent-mode="analysis"] .calib-mode-seg[data-mode="analysis"],
html[data-agent-mode="planning"] .calib-mode-seg[data-mode="planning"],
html[data-agent-mode="brainstorm"] .calib-mode-seg[data-mode="brainstorm"],
html[data-agent-mode="decision"] .calib-mode-seg[data-mode="decision"] {
  animation: none !important;
  opacity: 1 !important;
  filter: brightness(1.04);
}

.calib-mode-cycle {
  transform: none !important;
  animation: none !important;
  transition:
    background var(--sw-motion-base) var(--sw-motion-soft),
    filter var(--sw-motion-base) var(--sw-motion-soft) !important;
}

.calib-mode-cycle:hover {
  transform: none !important;
  animation: none !important;
  filter: brightness(1.06);
}

.calib-mode-cycle:active {
  transform: none !important;
  animation: none !important;
  filter: brightness(0.94);
  transition-duration: var(--sw-motion-fast) !important;
}

.calib-mode-desc-track {
  transition: transform 0.38s var(--sw-motion-spring) !important;
}

.calib-mode-desc {
  transition: opacity var(--sw-motion-base) var(--sw-motion-soft);
}

/* ── Toggles ── */
.calib-toggle-track,
.calib-toggle-thumb {
  transition:
    background var(--sw-motion-base) var(--sw-motion-spring),
    border-color var(--sw-motion-base) var(--sw-motion-soft),
    left var(--sw-motion-base) var(--sw-motion-spring),
    transform var(--sw-motion-base) var(--sw-motion-spring) !important;
}

.calib-toggle-row {
  transition: background var(--sw-motion-base) var(--sw-motion-soft) !important;
}

/* ── Hub / FX screen fades ── */
.hub-screen,
#fx-screen.fx-terminal,
#app-screen.hypr-workspace {
  transition: opacity var(--sw-motion-slow) var(--sw-motion-soft) !important;
}

.hub-mode-node {
  transition:
    transform var(--sw-motion-base) var(--sw-motion-spring),
    opacity var(--sw-motion-base) var(--sw-motion-soft),
    border-color var(--sw-motion-base) var(--sw-motion-soft) !important;
}

/* ── Modals ── */
.session-modal-overlay {
  transition: opacity var(--sw-motion-base) var(--sw-motion-soft) !important;
}

@media (prefers-reduced-motion: reduce) {
  .window-panel,
  .session-item,
  .composer-bar,
  .calib-mode-seg,
  .calib-mode-cycle,
  .calib-toggle-track,
  .calib-toggle-thumb,
  .hub-screen,
  #fx-screen.fx-terminal,
  #app-screen.hypr-workspace {
    transition: none !important;
  }

  .session-item:hover {
    transform: none;
  }

  .msg.msg-enter {
    animation: none;
  }

  .calib-mode-cycle:hover,
  .calib-mode-cycle:active {
    filter: none;
  }
}