@import "tw-animate-css";
@import "./shadcn.css";
@import "@rakazo/ui-tokens/css";

@source "./**/*.{ts,tsx}";

@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-chat-user: var(--chat-user);
  --color-chat-user-foreground: var(--chat-user-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-link: var(--link);
  --color-success: var(--success);
  --color-warning: var(--warning);
  --color-overlay: var(--overlay);
  --color-scrollbar: var(--scrollbar);
  --color-scrollbar-hover: var(--scrollbar-hover);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);

  /* Typography scale */
  --text-ui-caption: var(--font-size-caption);
  --text-ui-caption--line-height: var(--line-height-tight);
  --text-ui-label: var(--font-size-label);
  --text-ui-label--line-height: var(--line-height-tight);
  --text-ui-body-sm: var(--font-size-body-sm);
  --text-ui-body-sm--line-height: var(--line-height-body);
  --text-ui-body: var(--font-size-body);
  --text-ui-body--line-height: var(--line-height-body);
  --text-ui-reading: var(--font-size-reading);
  --text-ui-reading--line-height: var(--line-height-reading);
  --text-ui-title-sm: var(--font-size-title-sm);
  --text-ui-title-sm--line-height: var(--line-height-tight);
  --text-ui-title: var(--font-size-title);
  --text-ui-title--line-height: var(--line-height-tight);

  /* Control + icon sizes (also drive h-*, size-*, gap-*, p-* utilities) */
  --spacing-control-xs: var(--control-height-xs);
  --spacing-control-sm: var(--control-height-sm);
  --spacing-control-md: var(--control-height-md);
  --spacing-control-lg: var(--control-height-lg);
  --spacing-icon-sm: var(--icon-sm);
  --spacing-icon-md: var(--icon-md);
  --spacing-icon-lg: var(--icon-lg);
  --spacing-rk-shell: var(--spacing-shell);
  --spacing-rk-sidebar-x: var(--spacing-sidebar-row-x);
  --spacing-rk-sidebar-y: var(--spacing-sidebar-row-y);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

@keyframes rakazo-avatar-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.rakazo-bot-avatar-ring {
  animation: rakazo-avatar-spin 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  opacity: 0;
  transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.rakazo-bot-avatar {
  transition: box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.rakazo-bot-avatar[data-working="true"] .rakazo-bot-avatar-ring {
  opacity: 1;
}

.rakazo-bot-avatar-eyes {
  animation: var(--rakazo-eye-animation-name) var(--rakazo-eye-animation-duration)
    var(--rakazo-eye-animation-easing) var(--rakazo-eye-animation-delay) infinite;
  transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.rakazo-bot-avatar-eyes-working {
  opacity: 0;
}

.rakazo-bot-avatar[data-working="true"] .rakazo-bot-avatar-eyes-idle {
  opacity: 0;
}

.rakazo-bot-avatar[data-working="true"] .rakazo-bot-avatar-eyes-working {
  opacity: 1;
}

.rakazo-organic-avatar-body {
  transform-origin: center;
  transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.rakazo-organic-avatar-body-idle {
  animation: rakazo-organic-idle 5.6s ease-in-out infinite;
}

.rakazo-organic-avatar-body-working {
  opacity: 0;
}

.rakazo-organic-avatar[data-working="true"] .rakazo-organic-avatar-body-idle {
  opacity: 0;
}

.rakazo-organic-avatar[data-working="true"] .rakazo-organic-avatar-body-working {
  opacity: 1;
}

.rakazo-organic-avatar-eyes {
  transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.rakazo-organic-avatar-eyes-working {
  opacity: 0;
}

.rakazo-organic-avatar[data-working="true"] .rakazo-organic-avatar-eyes-idle {
  opacity: 0;
}

.rakazo-organic-avatar[data-working="true"] .rakazo-organic-avatar-eyes-working {
  opacity: 1;
}

.rakazo-organic-avatar[data-eye-pattern="0"] .rakazo-organic-avatar-eyes-idle {
  animation: rakazo-eyes-idle-0 5.8s ease-in-out infinite;
}

.rakazo-organic-avatar[data-eye-pattern="1"] .rakazo-organic-avatar-eyes-idle {
  animation: rakazo-eyes-idle-1 6.4s ease-in-out -1.7s infinite;
}

.rakazo-organic-avatar[data-eye-pattern="2"] .rakazo-organic-avatar-eyes-idle {
  animation: rakazo-eyes-idle-2 5.2s ease-in-out -3.1s infinite;
}

.rakazo-organic-avatar[data-eye-pattern="3"] .rakazo-organic-avatar-eyes-idle {
  animation: rakazo-eyes-idle-3 6.8s ease-in-out -2.3s infinite;
}

.rakazo-organic-avatar[data-eye-pattern="0"] .rakazo-organic-avatar-eyes-working {
  animation: rakazo-organic-eyes-loop-0 6.6s ease-in-out infinite;
}

.rakazo-organic-avatar[data-eye-pattern="1"] .rakazo-organic-avatar-eyes-working {
  animation: rakazo-organic-eyes-loop-1 7.2s ease-in-out -1.4s infinite;
}

.rakazo-organic-avatar[data-eye-pattern="2"] .rakazo-organic-avatar-eyes-working {
  animation: rakazo-organic-eyes-loop-2 6.1s ease-in-out -3.2s infinite;
}

.rakazo-organic-avatar[data-eye-pattern="3"] .rakazo-organic-avatar-eyes-working {
  animation: rakazo-organic-eyes-loop-3 7.8s ease-in-out -2.1s infinite;
}

/* Durations mirror @rakazo/core WORKING_AVATAR_DURATIONS_MS (avatar-motion). */
.rakazo-organic-avatar[data-shape-family="0"] .rakazo-organic-avatar-body-working {
  animation: rakazo-organic-float 1.8s ease-in-out infinite;
}

.rakazo-organic-avatar[data-shape-family="1"] .rakazo-organic-avatar-body-working {
  animation: rakazo-organic-stretch 1.35s ease-in-out infinite;
}

.rakazo-organic-avatar[data-shape-family="2"] .rakazo-organic-avatar-body-working,
.rakazo-organic-avatar[data-shape-family="8"] .rakazo-organic-avatar-body-working {
  animation: rakazo-organic-sway 1.6s ease-in-out infinite;
}

.rakazo-organic-avatar[data-shape-family="3"] .rakazo-organic-avatar-body-working,
.rakazo-organic-avatar[data-shape-family="4"] .rakazo-organic-avatar-body-working {
  animation: rakazo-organic-turn 2.4s ease-in-out infinite;
}

.rakazo-organic-avatar[data-shape-family="5"] .rakazo-organic-avatar-body-working,
.rakazo-organic-avatar[data-shape-family="9"] .rakazo-organic-avatar-body-working {
  animation: rakazo-organic-squash 1.35s ease-in-out infinite;
}

.rakazo-organic-avatar[data-shape-family="6"] .rakazo-organic-avatar-body-working {
  animation: rakazo-organic-pulse 1.1s ease-in-out infinite;
}

.rakazo-organic-avatar[data-shape-family="7"] .rakazo-organic-avatar-body-working {
  transform-origin: center 20%;
  animation: rakazo-organic-ring 1.35s ease-in-out infinite;
}

@keyframes rakazo-organic-float {
  0%,
  100% {
    transform: translateY(2px) scaleX(1.02);
  }
  50% {
    transform: translateY(-3px) scaleX(0.98);
  }
}

@keyframes rakazo-organic-idle {
  0%,
  100% {
    transform: translateY(1.2px) scale(1.012, 0.988);
  }
  50% {
    transform: translateY(-1.4px) scale(0.988, 1.012);
  }
}

@keyframes rakazo-organic-stretch {
  0%,
  100% {
    transform: translateY(2px) scale(1.04, 0.96);
  }
  50% {
    transform: translateY(-3px) scale(0.96, 1.05);
  }
}

@keyframes rakazo-organic-sway {
  0%,
  100% {
    transform: rotate(-3deg) translateX(-1px);
  }
  50% {
    transform: rotate(3deg) translateX(1px);
  }
}

@keyframes rakazo-organic-turn {
  0%,
  100% {
    transform: rotate(-4deg) scale(0.98);
  }
  50% {
    transform: rotate(4deg) scale(1.04);
  }
}

@keyframes rakazo-organic-squash {
  0%,
  100% {
    transform: scale(1.04, 0.96);
  }
  50% {
    transform: scale(0.96, 1.04);
  }
}

@keyframes rakazo-organic-pulse {
  0%,
  100% {
    transform: scale(0.96);
  }
  45% {
    transform: scale(1.06);
  }
}

@keyframes rakazo-organic-ring {
  0%,
  100% {
    transform: rotate(-4deg);
  }
  35% {
    transform: rotate(5deg);
  }
  65% {
    transform: rotate(-3deg);
  }
}

@keyframes rakazo-organic-eyes-loop-0 {
  0%,
  100% {
    transform: translate(-9%, 1%) scaleY(0.94);
  }
  18% {
    transform: translate(9%, -2%) scaleY(1.04);
  }
  34% {
    transform: translate(0, -8%) scale(1.08);
  }
  48% {
    transform: scale(1.12, 0.82);
  }
  51% {
    transform: scale(1.05, 0.08);
  }
  54% {
    transform: scale(1.12, 0.9);
  }
  72% {
    transform: translate(-5%, 7%) scaleY(0.9);
  }
  86% {
    transform: translate(7%, 3%);
  }
}

@keyframes rakazo-organic-eyes-loop-1 {
  0%,
  100% {
    transform: translate(0, -8%) scale(1.06);
  }
  16% {
    transform: translate(8%, 2%);
  }
  31% {
    transform: translate(0, 8%) scaleY(0.9);
  }
  46% {
    transform: translate(-8%, 2%);
  }
  61% {
    transform: scale(0.88, 1.1);
  }
  76% {
    transform: translateY(-7%) scaleY(1.08);
  }
  88% {
    transform: translateY(6%) scale(1.08, 0.86);
  }
}

@keyframes rakazo-organic-eyes-loop-2 {
  0%,
  100% {
    transform: scale(0.9, 1.08);
  }
  20% {
    transform: scale(1.14, 0.84);
  }
  24% {
    transform: scale(1.08, 0.08);
  }
  28% {
    transform: scale(1.02);
  }
  45% {
    transform: translate(-9%, -3%) scaleY(0.94);
  }
  62% {
    transform: translate(9%, 2%) scaleY(1.05);
  }
  80% {
    transform: translate(0, -8%) scale(1.06);
  }
}

@keyframes rakazo-organic-eyes-loop-3 {
  0%,
  100% {
    transform: translateY(7%) scaleY(0.9);
  }
  14% {
    transform: translateY(-9%) scaleY(1.08);
  }
  30% {
    transform: translate(8%, -2%);
  }
  47% {
    transform: translate(-8%, 3%) scaleY(0.94);
  }
  63% {
    transform: scale(1.12, 0.82);
  }
  78% {
    transform: translate(0, -7%) scale(0.9, 1.08);
  }
  91% {
    transform: translate(0, 5%) scale(1.06, 0.9);
  }
}

@keyframes rakazo-eyes-idle-0 {
  0%,
  32%,
  100% {
    transform: translate(0, 0) scaleY(1);
  }
  35% {
    transform: translate(0, 0) scaleY(0.08);
  }
  38% {
    transform: translate(0, 0) scaleY(1);
  }
  48%,
  62% {
    transform: translate(3px, -0.5px) scaleY(1);
  }
  70%,
  84% {
    transform: translate(-2.5px, 0.5px) scaleY(1);
  }
  89% {
    transform: translate(0, 0) scaleY(0.12);
  }
  91% {
    transform: translate(0, 0) scaleY(1);
  }
}

@keyframes rakazo-eyes-idle-1 {
  0%,
  25%,
  100% {
    transform: translate(0, 0) scaleY(1);
  }
  32%,
  48% {
    transform: translate(-3px, -1px) scaleY(1);
  }
  54% {
    transform: translate(0, 0) scaleY(0.08);
  }
  56% {
    transform: translate(0, 0) scaleY(1);
  }
  59% {
    transform: translate(0, 0) scaleY(0.08);
  }
  61% {
    transform: translate(0, 0) scaleY(1);
  }
  68%,
  82% {
    transform: translate(2.5px, 0.5px) scaleY(1);
  }
}

@keyframes rakazo-eyes-idle-2 {
  0%,
  28%,
  100% {
    transform: translate(0, 0) scaleY(1);
  }
  36%,
  52% {
    transform: translate(0.5px, -1.8px) scaleY(1.05);
  }
  58% {
    transform: translate(0, 0) scaleY(0.08);
  }
  60% {
    transform: translate(0, 0) scaleY(1);
  }
  68%,
  85% {
    transform: translate(3px, 0) scaleY(1);
  }
  92% {
    transform: translate(0, 0) scaleY(0.1);
  }
  94% {
    transform: translate(0, 0) scaleY(1);
  }
}

@keyframes rakazo-eyes-idle-3 {
  0%,
  24%,
  100% {
    transform: translate(0, 0) scaleY(1);
  }
  30%,
  46% {
    transform: translate(-2.5px, 1.2px) scaleY(0.95);
  }
  52% {
    transform: translate(0, 0) scaleY(0.08);
  }
  54% {
    transform: translate(0, 0) scaleY(1);
  }
  62%,
  78% {
    transform: translate(2.8px, -1px) scaleY(1);
  }
  86% {
    transform: translate(0, 0) scaleY(0.08);
  }
  88% {
    transform: translate(0, 0) scaleY(1);
  }
}

@keyframes rakazo-eyes-working {
  0% {
    transform: translate(-4px, 0) scale(0.92, 0.95);
  }
  25% {
    transform: translate(0, -2px) scale(1.08, 1.08);
  }
  50% {
    transform: translate(4px, 0) scale(0.92, 0.95);
  }
  75% {
    transform: translate(0, 2px) scale(1, 0.9);
  }
  100% {
    transform: translate(-4px, 0) scale(0.92, 0.95);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rakazo-bot-avatar-ring,
  .rakazo-bot-avatar-eyes {
    animation: none;
    transition: none;
  }

  .rakazo-bot-avatar {
    transition: none;
  }

  .rakazo-bot-avatar-visor {
    transition: none;
  }

  .rakazo-organic-avatar[data-shape-family] .rakazo-organic-avatar-body {
    animation: none;
    d: var(--rakazo-organic-path);
    transition: none;
  }

  .rakazo-organic-avatar[data-eye-pattern] .rakazo-organic-avatar-eyes {
    animation: none;
    transition: none;
  }
}