@keyframes spotlight-ring {
0%,
  100% {
    opacity: 0.3;
    transform: scale(1);
}
50% {
    opacity: 0.6;
    transform: scale(1.03);
}
}
.animate-spotlight-ring {
  border: 2px solid color-mix(in oklch, var(--accent-1), var(--muted) 40%);
  animation: spotlight-ring 2.5s ease-in-out infinite;
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
.animate-spotlight-ring {
    animation: none;
    opacity: 0.5;
}
}

.slot-loader[data-v-bafb0fc3] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 120px;
  background: var(--background);
}
.slot-loader__content[data-v-bafb0fc3] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 280px;
  padding: 2rem 1rem;
}

/* Spinner */
.slot-loader__spinner-wrap[data-v-bafb0fc3] {
  position: relative;
  width: 40px;
  height: 40px;
}
.slot-loader__spinner[data-v-bafb0fc3] {
  width: 40px;
  height: 40px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: slot-spin-bafb0fc3 0.8s linear infinite;
}
@keyframes slot-spin-bafb0fc3 {
to {
    transform: rotate(360deg);
}
}

/* Text */
.slot-loader__text[data-v-bafb0fc3] {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  text-align: center;
  line-height: 1.4;
}

/* Skeleton shimmer */
.slot-loader__skeleton[data-v-bafb0fc3] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  margin-top: 0.5rem;
}
.slot-loader__skeleton-line[data-v-bafb0fc3] {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    var(--muted) 0%,
    var(--border) 50%,
    var(--muted) 100%
  );
  background-size: 200% 100%;
  animation: slot-shimmer-bafb0fc3 1.5s ease-in-out infinite;
}
.slot-loader__skeleton-line--wide[data-v-bafb0fc3] {
  width: 100%;
}
.slot-loader__skeleton-line--medium[data-v-bafb0fc3] {
  width: 75%;
}
.slot-loader__skeleton-line--narrow[data-v-bafb0fc3] {
  width: 50%;
}
@keyframes slot-shimmer-bafb0fc3 {
0% {
    background-position: 200% 0;
}
100% {
    background-position: -200% 0;
}
}

/* Error */
.slot-loader__error-icon[data-v-bafb0fc3] {
  color: var(--destructive);
  opacity: 0.8;
}
.slot-loader__error-title[data-v-bafb0fc3] {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--foreground);
  text-align: center;
}
.slot-loader__error-detail[data-v-bafb0fc3] {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  text-align: center;
  line-height: 1.4;
  word-break: break-word;
  max-height: 60px;
  overflow: hidden;
}

/* Retry button */
.slot-loader__retry-btn[data-v-bafb0fc3] {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--foreground);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-top: 0.25rem;
}
.slot-loader__retry-btn[data-v-bafb0fc3]:hover {
  background: var(--muted);
  border-color: var(--ring);
}
.slot-loader__retry-btn[data-v-bafb0fc3]:active {
  transform: scale(0.97);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.slot-loader__spinner[data-v-bafb0fc3] {
    animation-duration: 1.5s;
}
.slot-loader__skeleton-line[data-v-bafb0fc3] {
    animation: none;
    background: var(--muted);
}
}

/* === Loader scene (matches static loader in index.html) === */
.loader-scene[data-v-171d5a64] {
  position: relative;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(
    0 10px 30px color-mix(in srgb, var(--accent-1) 12%, transparent)
  );
}
.loader-orbit[data-v-171d5a64] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: loader-orbit-rotate-171d5a64 12s linear infinite;
}
.loader-mascot-wrapper[data-v-171d5a64] {
  position: relative;
  z-index: 1;
  animation: loader-mascot-breathe-171d5a64 3s ease-in-out 300ms infinite;
}
.loader-mascot[data-v-171d5a64] {
  display: block;
  width: 40px;
  height: 40px;
  -o-object-fit: contain;
     object-fit: contain;
  filter: drop-shadow(
    0 5px 14px color-mix(in srgb, var(--foreground) 10%, transparent)
  );
}
@keyframes loader-orbit-rotate-171d5a64 {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
@keyframes loader-mascot-breathe-171d5a64 {
0%,
  100% {
    transform: scale(1);
}
50% {
    transform: scale(1.05);
}
}

/* === Checkmark draw animation === */
.check-ring-bg[data-v-171d5a64] {
  stroke: color-mix(in oklch, var(--accent-1), transparent 85%);
}
.check-ring[data-v-171d5a64] {
  stroke: var(--accent-1);
  stroke-dasharray: 157;
  stroke-dashoffset: 157;
  animation: ring-draw-171d5a64 0.6s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.check-mark[data-v-171d5a64] {
  stroke: var(--accent-1);
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: check-draw-171d5a64 0.4s cubic-bezier(0.65, 0, 0.35, 1) 0.35s forwards;
}

/* === CTA Button === */
.ceremony-cta[data-v-171d5a64] {
  background: var(--accent-gradient) !important;
  color: var(--accent-1-foreground) !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow:
    0 1px 3px color-mix(in oklch, var(--accent-1), transparent 70%),
    0 4px 16px color-mix(in oklch, var(--accent-1), transparent 85%);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.ceremony-cta[data-v-171d5a64]:hover {
  transform: scale(1.02);
  box-shadow:
    0 2px 6px color-mix(in oklch, var(--accent-1), transparent 60%),
    0 8px 24px color-mix(in oklch, var(--accent-1), transparent 75%);
}
.ceremony-cta[data-v-171d5a64]:active {
  transform: scale(0.98);
}
@keyframes ring-draw-171d5a64 {
to {
    stroke-dashoffset: 0;
}
}
@keyframes check-draw-171d5a64 {
to {
    stroke-dashoffset: 0;
}
}

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
.loader-orbit[data-v-171d5a64] {
    animation: none;
}
.loader-mascot-wrapper[data-v-171d5a64] {
    animation: none;
}
.check-ring[data-v-171d5a64],
  .check-mark[data-v-171d5a64] {
    animation: none;
    stroke-dashoffset: 0;
}
.ceremony-cta[data-v-171d5a64] {
    transition: none;
}
.ceremony-cta[data-v-171d5a64]:hover {
    transform: none;
}
}

.ceremony-exit[data-v-ca73bad5] {
  animation: ceremony-leave-ca73bad5 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes ceremony-leave-ca73bad5 {
0% {
    opacity: 1;
    transform: scale(1) translateY(0);
}
100% {
    opacity: 0;
    transform: scale(1.02) translateY(-16px);
}
}
@media (prefers-reduced-motion: reduce) {
.ceremony-exit[data-v-ca73bad5] {
    animation: ceremony-leave-reduced-ca73bad5 0.3s ease-out forwards;
}
@keyframes ceremony-leave-reduced-ca73bad5 {
0% {
      opacity: 1;
}
100% {
      opacity: 0;
}
}
}

/* У нас запрещены стили в vue, но анимации переходов часто требуют локальных стилей
   для transition. Однако, согласно правилам проекта, мы должны избегать style в vue.
   Поэтому используем tailwind классы в transition компоненте. */

@keyframes welcome-float {
0%,
  100% {
    transform: translateY(0);
}
50% {
    transform: translateY(-6px);
}
}
.animate-welcome-float {
  animation: welcome-float 3s ease-in-out infinite;
}
@keyframes welcome-ring-1 {
0%,
  100% {
    transform: scale(1);
    opacity: 0.1;
}
50% {
    transform: scale(1.08);
    opacity: 0.15;
}
}
.animate-welcome-ring-1 {
  animation: welcome-ring-1 3s ease-in-out infinite;
}
@keyframes welcome-ring-2 {
0%,
  100% {
    transform: scale(1);
    opacity: 0.05;
}
50% {
    transform: scale(1.05);
    opacity: 0.08;
}
}
.animate-welcome-ring-2 {
  animation: welcome-ring-2 3s ease-in-out 0.5s infinite;
}
@media (prefers-reduced-motion: reduce) {
.animate-welcome-float,
  .animate-welcome-ring-1,
  .animate-welcome-ring-2 {
    animation: none;
}
}

@keyframes msg-enter {
to {
    opacity: 1;
    transform: translateY(0);
}
}
.animate-msg-enter {
  animation: msg-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes bounce-dot {
0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
}
30% {
    transform: translateY(-4px);
    opacity: 1;
}
}
.animate-bounce-dot {
  animation: bounce-dot 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.animate-msg-enter {
    animation: none;
    opacity: 1;
    transform: none;
}
.animate-bounce-dot {
    animation: none;
    opacity: 0.6;
}
}

@keyframes draw-line {
to {
    opacity: 0.22;
    transform: scaleX(1);
}
}
@keyframes draw-line-bold {
to {
    opacity: 0.45;
    transform: scaleX(1);
}
}
@keyframes draw-line-accent {
to {
    opacity: 0.25;
    transform: scaleX(1);
}
}
.animate-draw-line {
  animation: draw-line 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transform: scaleX(0);
}
@keyframes doc-blink {
0%,
  100% {
    opacity: 1;
}
50% {
    opacity: 0;
}
}
.animate-blink {
  animation: doc-blink 1s step-end infinite;
}
@keyframes drift-a {
0% {
    transform: translate(0, 0);
}
50% {
    transform: translate(100px, 0);
}
100% {
    transform: translate(20px, 20px);
}
}
.animate-drift-a {
  left: 60px;
  top: 72px;
  will-change: transform;
  animation: drift-a 4s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards;
}
@keyframes sync-badge {
to {
    opacity: 1;
}
}
.animate-sync-badge {
  animation: sync-badge 0.5s cubic-bezier(0.16, 1, 0.3, 1) 1.6s forwards;
}
@media (prefers-reduced-motion: reduce) {
.animate-draw-line,
  .animate-blink,
  .animate-drift-a,
  .animate-sync-badge {
    animation: none;
    opacity: 0.3;
    transform: scaleX(1);
}
}

@keyframes orb-pop {
to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}
}
.animate-orb-pop {
  animation: orb-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  will-change: transform, opacity;
}
@keyframes orb-ring {
0%,
  100% {
    opacity: 0;
    transform: scale(1);
}
50% {
    opacity: 0.25;
    transform: scale(1.18);
}
}
.animate-orb-ring {
  animation: orb-ring 2s ease-in-out infinite;
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
.animate-orb-pop {
    animation: none;
    opacity: 1;
    transform: scale(1) rotate(0deg);
}
.animate-orb-ring {
    animation: none;
}
}

.slot-empty-state[data-v-ec3619d7] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 240px;
  background: var(--background);
  padding: 2rem 1rem;
}
.slot-empty-state__content[data-v-ec3619d7] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 360px;
  text-align: center;
}
.slot-empty-state__icon[data-v-ec3619d7] {
  color: var(--muted-foreground);
  opacity: 0.5;
  margin-bottom: 0.5rem;
}
.slot-empty-state__title[data-v-ec3619d7] {
  font-size: 1rem;
  font-weight: 600;
  color: var(--foreground);
  line-height: 1.4;
}
.slot-empty-state__description[data-v-ec3619d7] {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  line-height: 1.5;
}
.slot-empty-state__badge[data-v-ec3619d7] {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--destructive-foreground);
  background: var(--destructive);
  border-radius: 9999px;
  margin-top: 0.25rem;
}
.slot-empty-state__actions[data-v-ec3619d7] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  margin-top: 0.5rem;
}
.slot-empty-state__btn[data-v-ec3619d7] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  border: none;
  width: 100%;
}
.slot-empty-state__btn--primary[data-v-ec3619d7] {
  color: var(--primary-foreground);
  background: var(--primary);
}
.slot-empty-state__btn--primary[data-v-ec3619d7]:hover {
  opacity: 0.9;
}
.slot-empty-state__btn--secondary[data-v-ec3619d7] {
  color: var(--foreground);
  background: transparent;
  border: 1px solid var(--border);
}
.slot-empty-state__btn--secondary[data-v-ec3619d7]:hover {
  background: var(--muted);
  border-color: var(--ring);
}
.slot-empty-state__btn[data-v-ec3619d7]:active {
  transform: scale(0.98);
}
.slot-empty-state__btn svg[data-v-ec3619d7] {
  flex-shrink: 0;
}

/* Responsive */
@media (min-width: 640px) {
.slot-empty-state__actions[data-v-ec3619d7] {
    flex-direction: row;
}
.slot-empty-state__btn[data-v-ec3619d7] {
    width: auto;
}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.slot-empty-state__btn[data-v-ec3619d7] {
    transition: none;
}
.slot-empty-state__btn[data-v-ec3619d7]:active {
    transform: none;
}
}

/**
 * CSS Containment для оптимизации производительности
 *
 * contain: layout style paint - изолирует layout/style/paint пересчёты
 * внутри этого контейнера, предотвращая reflow всего приложения
 * при монтировании/размонтировании модулей
 */
#main-frame-content[data-v-9ee11dbb] {
  contain: layout style paint;
}

.isolate-context[data-v-1ff39c6d] {
  transform: translate3d(0, 0, 0);
}
.writing-mode-vertical[data-v-1ff39c6d] {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
}

/* Плавная анимация для всех панелей в группе */
/* Используем только opacity для плавности без reflow */
[data-v-1ff39c6d] .resizable-panel-group-smooth [data-slot='resizable-panel'] {
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}

/* Отключаем анимацию при ресайзе */
[data-v-1ff39c6d] 
  .resizable-panel-group-smooth.no-transition [data-slot='resizable-panel']
 {
  transition: none !important;
  will-change: auto;
}

/* Плавная анимация для содержимого внутри правого сайдбара */
[data-v-1ff39c6d] .right-sidebar-panel > * {
  transition: opacity 0.2s ease-in-out;
}