frontend/src/components/modal/TagChip.vue

@@ -1,7 +1,7 @@
 <template>
   <span class="fc-tag-chip" @mouseenter="onEnter" @mouseleave="onLeave">
     <v-chip
-      size="small" :closable="!unconfirmedAuto"
+      size="default" :closable="!unconfirmedAuto"
       :color="store.colorFor(tag.kind)" variant="tonal"
       class="fc-tag-chip__nav"
       role="link"
@@ -9,7 +9,7 @@
       @click="$emit('navigate', tag)"
       @click:close="$emit('remove', tag.id)"
     >
-      <v-icon start size="x-small">{{ iconFor(tag.kind) }}</v-icon>
+      <v-icon start size="small">{{ iconFor(tag.kind) }}</v-icon>
       <span class="fc-tag-chip__name">{{ tag.name }}</span><v-icon
         v-if="tag.is_system" end size="x-small" class="fc-tag-chip__system"
         title="System tag — tagged items are excluded from training other concepts"
@@ -27,13 +27,13 @@
           :title="`Yes — keep “${tag.name}” (trains the model, won't be retracted)`"
           :aria-label="`Confirm ${tag.name}`"
           @click.stop="$emit('confirm', tag)"
-        ><v-icon size="13">mdi-check</v-icon></button>
+        ><v-icon size="15">mdi-check</v-icon></button>
         <button
           type="button" class="fc-tag-chip__no"
           :title="`No — remove “${tag.name}”`"
           :aria-label="`Reject ${tag.name}`"
           @click.stop="$emit('remove', tag.id)"
-        ><v-icon size="13">mdi-close</v-icon></button>
+        ><v-icon size="15">mdi-close</v-icon></button>
       </span>
     </v-chip>
     <!-- Modal-safe kebab is baked into KebabMenu (this chip lives in the
@@ -159,23 +159,27 @@ function iconFor (k) { return KIND_ICONS[k] || 'mdi-tag' }
 .fc-tag-chip__kebab { opacity: 0.7; }
 .fc-tag-chip:hover .fc-tag-chip__kebab { opacity: 1; }
 .fc-tag-chip__fandom { opacity: 0.7; font-size: 0.85em; }
-/* Provisional auto-tag: a compact green ✓ / red ✗ pair in place of the ✕. The
-   yes/no is obvious enough on its own, so there's no "auto" label (operator-asked
+/* Provisional auto-tag: a green ✓ / red ✗ pair in place of the ✕. The yes/no is
+   obvious enough on its own, so there's no "auto" label (operator-asked
    2026-07-07). flex:0 0 auto keeps it visible while the name ellipsis-truncates. */
 .fc-tag-chip__verdict {
-  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 1px;
-  margin-left: 3px;
+  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px;
+  margin-left: 5px;
 }
+/* Solid-filled (white glyph on a full success/error circle) so accept/reject
+   stay well-defined even on a muted tonal chip — e.g. character (info) — instead
+   of a faint icon that only lit up on hover. Mirrors the Suggestions rail's
+   verdict buttons so the affordance reads identically (operator-asked 2026-07-08). */
 .fc-tag-chip__yes, .fc-tag-chip__no {
   display: inline-flex; align-items: center; justify-content: center;
-  width: 18px; height: 18px; padding: 0; border: none; border-radius: 50%;
-  background: transparent; cursor: pointer; transition: background 0.1s;
+  width: 22px; height: 22px; padding: 0; border: none; border-radius: 50%;
+  color: #fff; cursor: pointer; opacity: 0.92;
+  transition: transform 0.1s, opacity 0.1s;
 }
-.fc-tag-chip__yes { color: rgb(var(--v-theme-success)); }
-.fc-tag-chip__no { color: rgb(var(--v-theme-error)); }
-.fc-tag-chip__yes:hover { background: rgb(var(--v-theme-success), 0.16); }
-.fc-tag-chip__no:hover { background: rgb(var(--v-theme-error), 0.16); }
+.fc-tag-chip__yes { background: rgb(var(--v-theme-success)); }
+.fc-tag-chip__no { background: rgb(var(--v-theme-error)); }
+.fc-tag-chip__yes:hover, .fc-tag-chip__no:hover { opacity: 1; transform: scale(1.1); }
 .fc-tag-chip__yes:focus-visible, .fc-tag-chip__no:focus-visible {
-  outline: 2px solid rgb(var(--v-theme-accent)); outline-offset: 1px;
+  outline: 2px solid rgb(var(--v-theme-accent)); outline-offset: 2px;
 }
 </style>