/* Marty — mascot.css (F7)
 * Styles for the mascot insight card and speech bubble.
 * Uses only the design tokens defined in app.css. */

.mascot-card {
  background: var(--green-softer);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
}

.mascot-card .mascot-svg,
.mascot-card > :first-child {
  flex: 0 0 auto;
}

.mascot-svg {
  display: block;
}

.mascot-bubble {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  background: var(--card);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.45;
  box-shadow: var(--shadow);
}

/* little speech tail pointing back at Marty */
.mascot-bubble::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 50%;
  width: 12px;
  height: 12px;
  background: var(--card);
  border-radius: 3px;
  transform: translateY(-50%) rotate(45deg);
}

/* friendly wobble when the card (or mascot) is hovered / focused */
@keyframes mascot-wave {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(-7deg); }
  45%  { transform: rotate(6deg); }
  70%  { transform: rotate(-3deg); }
  100% { transform: rotate(0deg); }
}

.mascot-card:hover .mascot-svg,
.mascot-card:focus-within .mascot-svg,
.mascot-svg:hover,
.mascot-wave {
  animation: mascot-wave .9s ease-in-out;
  transform-origin: 50% 82%;
}

@media (prefers-reduced-motion: reduce) {
  .mascot-card:hover .mascot-svg,
  .mascot-card:focus-within .mascot-svg,
  .mascot-svg:hover,
  .mascot-wave {
    animation: none;
  }
}