frontend/src/lib/components/FeedbackOverlay.svelte

<script lang="ts">
  import { lastTranscription, lastFeedback, feedbackLevel, voiceStatus } from '$lib/stores/game';

  $: transcription = $lastTranscription;
  $: feedback = $lastFeedback;
  $: level = $feedbackLevel;
  $: processing = $voiceStatus === 'processing';
  $: hasContent = !!(transcription || feedback || processing);
</script>

<div class="overlay" class:has-content={hasContent}>
  {#if processing && !transcription}
    <div class="processing-dots">
      <span></span><span></span><span></span>
    </div>
  {:else}
    {#if transcription}
      <p class="transcription">"{transcription}"</p>
    {/if}
    {#if feedback}
      <p class="feedback feedback--{level}">{feedback}</p>
    {/if}
  {/if}
</div>

<style>
  .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    padding: 8px 14px;
    min-height: 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    background: transparent;
    pointer-events: none;
    transition: background 0.2s;
  }

  .overlay.has-content {
    background: rgba(13, 17, 23, 0.82);
    pointer-events: auto;
  }

  .transcription {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .feedback {
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .feedback--ok      { color: #4ade80; }
  .feedback--warning { color: #facc15; }
  .feedback--error   { color: #f87171; }

  .processing-dots {
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
  }

  .processing-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--player);
    animation: bounce 0.9s ease-in-out infinite;
  }

  .processing-dots span:nth-child(2) { animation-delay: 0.15s; }
  .processing-dots span:nth-child(3) { animation-delay: 0.3s;  }

  @keyframes bounce {
    0%, 80%, 100% { transform: scale(0.7); opacity: 0.4; }
    40%           { transform: scale(1);   opacity: 1; }
  }
</style>