<template>
  <!-- Silent while the route's primary answers: naming the model every turn
       would be noise. It appears only when a backup entry is carrying the
       conversation, which changes both the answer's style and its window. -->
  <span
    v-if="chat.servedFallback && chat.servedModel"
    class="model-chip"
    :title="title"
  >
    <i class="ph ph-plug-charging"></i>
    <span class="model-chip-text">{{ t('chat.backupModel', { model: chat.servedModel }) }}</span>
  </span>
</template>

<script setup>
import { computed } from 'vue'
import { useChatStore } from '@/stores/chat.js'
import { t } from '@/i18n/index.js'

const chat = useChatStore()

const title = computed(() =>
  t('chat.backupModelTitle', {
    model: chat.servedModel,
    target: chat.servedTarget || '—',
  })
)
</script>

<style scoped>
.model-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 220px;
  padding: 1px 8px;
  border: 1px solid color-mix(in srgb, var(--gn-color-warning) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--gn-color-warning) 10%, transparent);
  color: var(--gn-color-warning);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}

.model-chip i {
  font-size: 12px;
}

.model-chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 640px) {
  .model-chip-text {
    display: none;
  }

  .model-chip {
    padding: 1px 5px;
  }
}
</style>